@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(nav.css);
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 11px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
}

a{
	color: #0066ff;
	text-decoration: none;
}



a:active, a:focus,input:active, input:focus{outline:0;}



/* ここから
------------------------------------------------------------*/



/* 共通
------------------------------------------------------------*/
h1, h2, ,h3 ,p{
	font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

img{
	width: 100%;
	height: auto;
}

section{clear:both;}

section h3{
	font-size: 18px;
	font-weight:bold;
	ttext-align: center;
        width:75%;
        bborder-left:solid 5px green;
       
}




/* すまほ対応
------------------------------------------------------------*/

@media only screen and (min-width: 641px){
}

@media only screen and (max-width: 440px){
}

@media only screen and (max-width: 799px){




#header{
    position: relative;
    overflow:hidden;
    width:100%;
}

.co-2-1{
        display: none;
        }
        
.co-2-2{
        margin-top:150px;
        margin-bottom:30px;
        }



.banar{
        width:90%;
        height:auto;margin: auto;
        }


#contener{
        display:block;
        justify-content: space-between;

width:100%;
height:auto;
bborder:solid 1px #000000;
}

#cont{
width:80%;
height:auto;
bborder:solid 1px red;
margin:auto;
}



.box02{
display:block;

justify-content: space-between;
width:98%;
height:auto;
background-color: ;
bborder:solid 1px blue;
                margin:auto;
}

.lan0{
width:100%;
height:auto;
background-color:#f3f3f3;
border:solid 1px #7ec7f4;
margin-top:5%;
}

.lan00{
width:100%;
display:flex;
flex-direction: column-reverse;
bborder:solid 1px blue;
}



.lan-h {
mmargin:auto;
border:solid 1px #7ec7f4;
background-color:#7ec7f4;
}

.lan-h h3{
font-size:16px;       
width:100%;
color:#ffffff;
text-align:center;
mmargin:auto;
bborder:solid 1px #000000;
}


.lan-p {
width:100%;
margin:4% 2%;
bborder:solid 1px #000000;
}


.lan-p p{
font-size:13px;
color:#696969;
width:80%;
margin:auto;
bborder:solid 1px #000000;
}

.lan-p2 {
width:60%;
margin:2% auto 4%;
background:#7ec7f4;;
bborder:solid 1px #000000;
}

.lan-p2 p {
font-size:14px;
color:#fff;
font-weight:bold;
text-align:center;
}



.lan-img {
width:50%;
margin:3% auto ;
bborder:solid 1px #000000;
flex-shrink: 0; 
}

.lan-img:hover{
        oopacity: 0.4;
                }
        

.lan-img img{
width:100%;
margin:auto;
bborder:solid 1px #000000;
}


.motto{
width:50%;
height:auto;
margin:6% auto;
background:#7ec7f4;
border:solid 2px #fff;
}


.motto p{
color:#fff;
font-size:15px;
font-weight:bold;
text-align:center;
}



.vtr{
border:solid 1px #7ec7f4;
width:100%;
margin:10% auto;
background:#f3f3f3;
}

.vtr video{
width:100%;
bborder:solid 1px #7ec7f4;
}

.vtr-p{
font-size:14px;
margin:auto;
width:90%;
bborder:solid 1px #7ec7f4;
}


 h2{
	font-size: 13px;
	font-weight:bold;
	text-align: center;
        width:100%;
        margin:auto;
        background:#7ec7f4;       
        color:#fff;
}


.video-title h2{
	font-weight:bold;
	text-align: center;
        width:100%;
        margin: auto;
        background:#7ec7f4;       
        color:#fff;
}

.four{
        display:flex;
        flex-direction: column-reverse;

        width:100%;
        height:auto;
        background-color:#f3f3f3;
        border:solid 1px #7ec7f4;
        margin:2% auto;
        }
        .four00 {
                width:100%;
                bborder:solid 1px #696969;
                margin: auto;
        }
        .four00 h3{
                font-size:16px;
                line-height: 150%;
                color:#0099cc;
                bborder:solid 1px #0099cc;
                margin:3% auto;
        }

        .four00 p{
                font-size: 14px;
                color: #696969;;
                        bborder:solid 1px #696969;
                        margin:10% 10% ;                
                }
                
        .four01{
        width:50%;
        margin:3% auto;
        bborder:solid 1px #696969;
        flex-shrink: 0; 
        }


.face{
width:100%;
height:auto;
border:solid 1px #7ec7f4;
                margin: auto;
                overflow:auto; 
                -webkit-overflow-scrolling:touch;                
}

.box-title{
   width:100%;
   height:auto;
   margin:10% auto -2%;
   bborder:solid 1px #7ec7f4;
  }




.erea{
display:flex;
flex-direction: column-reverse;
width:100%;
height:auto;
margin: auto;
background:#ececec;
}

/*1
------------------------------------------------------------*/

.map-p{
ddisplay:block;
width:90%;
margin:auto;
height:auto;
bborder:solid 1px red;
}


.map-p2{
margin:8% auto;
}



.map-p p{
font-size:13px;
width:95%;
margin: auto;
hheight:100%;
line-height:150%;
bborder:solid 1px red;
}


.erea-map-s{
position:relative;
width:90%;
margin:auto;
height:auto;
bborder:solid 1px #7ec7f4;
bbackground:#ececec;
flex-shrink: 0; 
}

.erea-map-b{
position:absolute;
width:45%;
height:6%;
bottom:4%;
right:2%;
bborder:solid 1px #000000;
}


.erea-map-s img{
bborder:solid 1px blue;
margin:auto;
flex-shrink: 0; 
}
/*2
------------------------------------------------------------*/

/*
------------------------------------------------------------*/


.axes{
width:100%;
height:auto;
margin: auto;
}

.axes-title{
width:100%;
margin-top:10%;
height:auto;
bborder:solid 1px #7ec7f4;
}

.axes-title p{
font-size:20px;
}

.axes-img{
display:block;
justify-content: space-between;
width:100%;
height:auto;
border:solid 1px #7ec7f4;
background-color:#f3f3f3;
}


.axes-img-right{
width:90%;
margin:4% auto;
height:auto;
bborder:solid 1px #7ec7f4;
}

.axes-img-left{
display: none;
width:57%;
hheight:auto;
bborder:solid 1px #7ec7f4;
}



.axes-tri{
    width:10%;
    height:auto;
    margin: auto;
    bborder:solid 1px #7ec7f4;
 }
  


.triangle3{
display:none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid orange;
}




.htn-box01 a{
display:flex;
width:90%;
height:auto;
background: #dcfed6;
margin:1% auto;
border-radius: 10px;
}


.htn-box02 a{
display:flex;
width:90%;
height:auto;
background: #ffe2bc;
margin:1% auto;
border-radius: 10px;
}

.htn-box03 a{
display:flex;
width:90%;
height:auto;
background: #b4e3fe;
margin:1% auto;
border-radius: 10px;
}

.htn-box04 a{
display:flex;
width:90%;
height:auto;
background: #ccbcfe;
margin:1% auto;
border-radius: 10px;
}


.htn-box05 a{
display:flex;
width:90%;
height:auto;
background: #fecee8;
margin:1% auto;
border-radius: 10px;
}










.htn-img01{
width:20%;
height:auto;
bborder:solid 1px #dcfed6;
}

.htn-p{
display: flex;
justify-content: center;
align-items: center;
width:80%;
height:auto;
bborder:solid 1px #000000;
}

.htn-p p{
font-size:12px;
font-weight:bold;
width:70%;
bborder:solid 1px #000000;
}

.htn-ya{
display: flex;
justify-content: center;
align-items: center;
width:10%;
height:auto;
bborder:solid 1px #dcfed6;
}




/* スマホコンテンツ
------------------------------------------------------------*/






.co-2-0{    
                display:flex;
                width:100%;
                height:auto;
                margin:60px auto 0px;
                border:solid 1px #f5f5f5;
                border-top: salmon;
}


/* 　スマホフッター
------------------------------------------------------------*/

#sec033{
        background:#000000;
        padding:1%;
        bborder:solid 1px #000000;
}
        .iinner{display:flex;
                justify-content: space-between;
                width:100%;
                height:auto;
                bborder:solid 1px #fff;
                margin:auto;
                }
                .col033-pc {
                        display: none;
 
                        }
        
        
                        .col034-s {
                                display: block;                                       
                                width:100%;
                                height:auto;
                                text-align:center;
                                margin:1% auto;
                                bborder:solid 1px #fff;               
                                }
                                
                      .col034-s p span{font-size: 15px;
                                color:green;
                                }
                
                      .col034-s p{
                                color:#fff;
                                }         






}


@media only screen and (min-width: 800px){

        #header{
                position: relative;
                overflow:hidden;
                width:100%;
            }


#contener{
width:80%;
margin:0 auto;        
}

        .co-2-1{
                display: block;
                margin-top:70px;
                margin-bottom:30px;
               }
        
               .banar{
                display: none;
               }
               .box01{
                display:flex;
                justify-content: space-between;
                width:90%;
                height:auto;
                background-color: ;
                bborder:solid 1px blue;
                                margin:auto;
                }

               .box02{
                display:flex;
                justify-content: space-between;
                width:90%;
                height:auto;
                background-color: ;
                bborder:solid 1px blue;
                                margin:2% auto;
                }
                
                .lan0{
                position:relative;
                width:100%;
                height:auto;
                background-color:#f3f3f3;
                border:solid 1px #7ec7f4;
                margin:10px;
                }




                
                .lan00{
                width:100%;
                display:flex;
                flex-direction: column-reverse;
                bborder:solid 1px blue;
                }
                .lan-h {
                        mmargin:auto;
                        border:solid 1px #7ec7f4;
                        background-color:#7ec7f4;
                        }
                        
                        .lan-h h3{
                        font-size:16px;       
                        width:100%;
                        color:#ffffff;
text-align:center;

                        mmargin:auto;
                        bborder:solid 1px #000000;
                        }
                        
                        
                        .lan-p {
                        width:100%;
                        margin:4% 2%;
                        bborder:solid 1px #000000;
                        }
                        
                        
                        .lan-p p{
                        font-size:13px;
                        color:#696969;
                        width:80%;
                        margin:auto;
                        bborder:solid 1px #000000;
                        }


.lan-p2 {
display:none;
}


                        .lan-img {
                                width:85%;
                                margin:6% auto ;
                                bborder:solid 1px #000000;
                                flex-shrink: 0; 
                                }

                                

                        .lan-img01 {
                        width:85%;
                        margin:6% auto ;
                        bborder:solid 1px #000000;
                        }
                        
                        .lan-img01:hover{
                                opacity: 0.4;
                                        }
                                
                        
                        .lan-img img{
                        width:100%;
                        margin:auto;
                        bborder:solid 1px #000000;
                        }





.motto{
position:absolute;
bottom:0;
right:0;
width:50%;
height:auto;
margin:auto;
background:#7ec7f4;
border:solid 2px #fff;
}


.motto p{
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
}                     



 h2{
	font-size: 20px;
	font-weight:bold;
	text-align: center;
        width:100%;
        margin: auto;
        background:#7ec7f4;       
        color:#fff;
}

.vtr{
border:solid 1px #7ec7f4;
width:60%;
margin:5% auto;
background:#f3f3f3;
}

.vtr video{
width:100%;
bborder:solid 1px #7ec7f4;
}

.vtr-p{
font-size:14px;
margin:auto;
width:90%;
bborder:solid 1px #7ec7f4;
}




.video-title h2{
	font-size: 20px;
	font-weight:bold;
	text-align: center;
        width:80%;
        margin: auto;
        background:#7ec7f4;       
        color:#fff;
}

                        .face{
                                width:500px;
                                height:auto;
                                border:solid 1px #7ec7f4;
                                margin:10px auto;
                                overflow:auto; 
                                -webkit-overflow-scrolling:touch;  }             
              
.box-title{
   width:89%;
   height:auto;
   margin:4% auto 0;
   bborder:solid 1px #7ec7f4;
  }
 
                        .four{
                            width:48%;
                            border:solid 1px #7ec7f4;
                            background-color: #f4f4f4;
                            margin:0px auto;
                             }  


                                                .four00 {
                                                        width:90%;
                                                        bborder:solid 1px #696969;
                                                        margin: auto;
                                                }
                                                     .four00 h3{font-size:20px;
                                                        line-height:150%;
                                                        width:90%;
                                                        color:#0099CC;
                                                        bborder:solid 1px #7ec7f4;
                                                        margin:6% auto;
                                                }
                                        
                                                .four00 p{font-size: 14px;
                                                        color: #222222;
                                                                bborder:solid 1px #696969;
                                                                margin:5% 5% ;                
                                                        }
                                                        
                                                .four01{
                                                width:50%;
                                                margin:auto;
                                                bbobrder:solid 1px #696969;
                                                }


.erea{
display:flex;
width:70%;
height:auto;
margin: auto;
background:#ececec;
}
/*
------------------------------------------------------------*/
.map-p{
width:50%;
mmargin:auto;
height:auto;
bborder:solid 1px red;
}


.map-p p{
font-size:14px;
width:75%;
margin:2% auto 2%;
height:auto;
line-height:150%;
bborder:solid 1px red;
}

.map-p1{
margin:8% auto;
}


.map-p2{
margin:8% auto;
}



.erea-map-s{
position:relative;
width:50%;
margin:auto;
height:auto;
bborder:solid 1px #7ec7f4;
background:#ececec;
}

.erea-map-b{
position:absolute;
width:45%;
height:6%;
bottom:4%;
right:2%;
bborder:solid 1px #000000;
}
/*
------------------------------------------------------------*/



/*
------------------------------------------------------------*/





                                                        .banar{
                                                                width:90%;
                                                                height:auto;margin: auto;
                                                        
                                                                }
                                                        
                                                        
                                                        

  
.axes-title{
   width:70%;
   height:auto;

   margin:5% auto 0%;
   bborder:solid 1px #7ec7f4;
  }


.htn-sec-out{
width:70%;
height:auto;
margin:0 auto;
border:solid 1px #7ec7f4;
background-color: #f4f4f4;
}


.htn-sec{
width:100%;
height:auto;
display:flex;
margin:1% auto;
bborder:solid 1px #7ec7f4;
}



.htn-box01 a{
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}


.htn-box02 a{
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}

.htn-box03 a{
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}

.htn-box04 a{
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}


.htn-box05 a{
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}


.htn-box-s {
width:19%;
height:auto;
border:solid 1px #ffb754;
background-color: #ffe8c9;
border-radius: 10px;
margin:0 auto;
}

.htn-box-s :hover{
background-color: #d4bfa2;
}

.htn-img01{
width:40%;
height:auto;
bborder:solid 1px #dcfed6;
flex-shrink: 0; 
}

.htn-p{
width:70%;
margin:5% auto 0px;
height:110px;
bborder:solid 1px #000000;
}

.htn-p p{
font-size:14px;
font-weight:bold;
wwidth:100%;
bborder:solid 1px #000000;
}

.htn-ya{
display:none;
justify-content: center;
align-items: center;
width:10%;
height:auto;
bborder:solid 1px #dcfed6;
}











.axes-tri{
    width:10%;
    height:auto;
    margin: auto;

 }
  


.triangle3{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid  #7ec7f4;
}



.axes-title h2{
  font-size:20px;
  }
 



.axes{
    width:70%;
    height:auto;
    margin: auto;
 }
.axes-img{
  display:flex;
  justify-content: space-between;
  width:100%;
  height:auto;
  border:solid 1px #7ec7f4;
  background-color:#f3f3f3;
   }
   
 
.axes-img-right{
 width:65%;
 height:auto;
 bborder:solid 1px #7ec7f4;
 }
 .mid-img:hover{opacity: 0.5;}
 .low-img:hover{opacity: 0.5;} 
.axes-img-left{
  width:35%;
  hheight:auto;
  bborder:solid 1px #7ec7f4;
 }                                                                
 

#sec033{height:auto;
                margin-top:70px;
                background:#000000;
}
        .iinner{display:flex;
                justify-content: space-between;
                width:65%;
                bborder:solid 1px red;
                margin:auto;
                }
                .col033-pc {
                        display: block;
                        width:100%;
                        height:auto;
                        text-align:center;
                        margin:1% auto;
                        bborder:solid 1px #fff;               
                        }
                        
              .col033-pc p span{font-size: 15px;
                        color:green;
                        }
        
              .col033-pc p{
                        color:#fff;
                        }
        
        
                        .col034-s {
                                display: none;                                       
                                }    
 }




@media only screen and (min-width: 900px){
}




@media only screen and (min-width: 1000px){
}





@media only screen and (min-width: 1100px){
}



@media only screen and (min-width: 1250px){
.wrap{
position:relative;
 width:1250px;
 margin:auto;
background:#fff;
zz-index:-9;
}
body{
background:#eeeeee;
}

}