@charset "utf-8";
header {
background-size:100%,cover;
background-position:center,top center;
background-image:url(../images/bg.svg),linear-gradient(90deg, rgba(0,103,133,1),rgba(0,163,196,1));
box-sizing:border-box;
position:relative;top: 0;
width: 100%;
height:6em;
margin: 0 auto;
}
header h1{display:table;float:left;margin:0.5em auto;}
header h1 strong{font-family: 'Besley', serif;font-style:italic;font-size:1.1em;line-height: 1.4;}
header h1 span{font-family: 'Noto Sans JP', sans-serif;display:block;font-style:normal;white-space:nowrap;font-size:x-small;}
header h1 img{width:auto;margin:0 5px 0 0;height:2.5em;float:left;}
header h1 a:link,
header h1 a:visited,
header h1 a:active {color:rgba(255,255,255,1);}
header h1 a:hover {color:rgba(255,255,255,0.8);}

#lnavi{box-sizing:border-box;display:flex;justify-content: center;align-items: center;
float:right;
}
#lnavi li{margin:0 0 0 1px;font-size:x-small;line-height:1;}
#lnavi li a:link,
#lnavi li a:visited{
display:block;
color:rgba(255,255,255, 1);
background:rgba(0,0,0,0.2);
padding:0.4em 1.2em 0.6em 1.2em;
}
#lnavi li a:hover {color:rgba(255,255,255, 0.8);background:rgba(0,0,0,0.1);}
#lnavi li a:active{color:rgba(255,255,255, 1);background:rgba(255,255,255,0.2);}

#head,
.navigation ul{box-sizing:border-box;width:100%;height:auto;padding:0 5%;}

#head {margin: 0 auto;display: block; height:3em;}

.navigation{background:linear-gradient(0deg, rgba(0,0,0,0.05),rgba(0,0,0,0.3));
margin: 0 auto;display: block;clear:both;
}
.navigation ul {overflow: hidden;z-index:1;
margin: 0 auto;
position:relative;bottom:0; 
display: flex;
justify-content: center;
align-items: center;
height:2.5em;
}
.navigation li {box-sizing: border-box;text-align:center;
border-right:1px dotted rgba(255,255,255,0.3);
font-weight:bold;font-size:0.8em;line-height:1.4;
}
.item1 {flex:1 0 10%;order:9;} 
.item2 {flex:1 0 9%;border-left:1px dotted rgba(255,255,255,0.3);order:1;} 
.item3 {flex:1 0 13%;order:2;}
.item4 {flex:1 0 17%;order:3;}
.item5 {flex:1 0 13%;order:4;}
.item6 {flex:1 0 9%;order:5;}
.item7 {flex:1 0 9%;order:6;}
.item8 {flex:1 0 11%;order:7;}
.item9 {flex:1 0 9%;order:8;}
/*flex-grow伸び率、大きさ, flex-shrink縮み率、小ささ, flex-basis基本幅*/
.navigation li span{display: block;font-style:italic; font-family: 'Besley', serif;color:rgba(255,255,255,0.5);font-weight:400;letter-spacing:0.05em;font-size:0.8em;}
.navigation a:link,
.navigation a:visited{color:rgba(255,255,255, 1);display:block;
padding: 0.7em 0 0.3em 0;
}
.navigation a:hover {color:rgba(255,255,255, 0.8);background:rgba(255,255,255,0.1);}
.navigation a:active{color:rgba(255,255,255, 1);background:rgba(0,0,0,0.3);}
.navigation .item1 a:link,
.navigation .item1 a:visited{
color:rgba(255,255,255, 1);
background:rgba(0,130,255,0.4);
}
.navigation .item1 a:hover {color:rgba(255,255,255, 0.8);background:rgba(0,130,255,0.7);}
.navigation .item1 a:active{color:rgba(255,255,255, 1);background:rgba(0,130,255,0.2);}

#fixeds{}
.fixed{z-index:1000;position:fixed;top:0;left:0;right:0;margin:0 auto;background:rgba(0,163,196,0.9);}

#menuline,
.mobileline{display:none;}


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

.navigation li {font-size:0.7em;}

#head{width:98vw;height:auto;padding:0 1vw;}
.navigation ul{width:100vw;padding:0;
}

}

@media only screen and (max-width:812px) {/* 768*/
header {width:100%;height:3em;margin: 0 auto; padding:0 1em;box-sizing:border-box;text-align:right;float:none;background:rgba(255,255,255,0.9);
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
z-index:10;
position: fixed;
}


header h1 img{margin:auto;max-width:100%;width:8vw;height:auto;position:absolute;right:0;top:0;bottom:0;}

/* menu */
.navigation {
position:fixed;
top:0;
left: 0;
visibility:hidden;
overflow-y:hidden;/*元*/
height:100%;
padding:0;
margin: 0;
-webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
opacity: 0;
background-color:rgba(255, 255, 255, 0.8);
width:100%;
display: flex;
justify-content: center;
align-items: center;

background-image:url(../../images/bg2.png),url(../../images/bg.png) ;
background-size:170% auto,170% auto;
background-position:top left 27% ,right 27% bottom;
background-repeat: no-repeat,no-repeat;

}

.navigation nav,
.navigation ul {width: 90vw;position: relative;top:0;text-align:center;overflow: hidden;margin:0 auto;
}
.navigation li {float:left; width:33.3333%; margin: 0 auto;}

.navigation a:link,
.navigation a:visited{display:block;padding: 2vh 5px 2vh 5px;}

/* menu toggle */
.mobileline {
box-sizing: border-box;
display: block;
z-index:10;
position:absolute;
top: 0;
left: 0;
width:8vw;
height:100%;
padding:2px 0 0 0;
text-align:left;
}

.menulines {/*ハンバーガーの大きさ*/
display: block;
position: relative;
width: 20px;
height: 100%;
cursor:default;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
margin: 0 auto;
}
.menulines > span {
display: block;
position: absolute;
top:63%;
margin-top: -0.5em;
width: 100%;
height: 1px;
border-radius: 1px;
background-color:rgba(0, 60, 30, 0.7);
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.menulines > span:before, .menulines > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color:rgba(0, 60, 30, 0.7);
-webkit-transition: transform .3s ease;
transition: transform .3s ease;}
.menulines > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);}
.menulines > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);}
/*menu line*/
#menuline:checked + .mobileline .menulines {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);}
#menuline:checked + .mobileline span:before,
#menuline:checked + .mobileline span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);}
#menuline:checked ~ .navigation {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;}
}

@media (max-width: 667px) {
}

@media (max-width: 480px) {
header {padding:0 0.5em;}
header h1 span{padding:0 18vw 0 0;}
.titleL{font-size:4.5vw;}
.titleM{font-size:3.5vw;}
.titleS{font-size:3vw;padding:0 18vw 0 0;}
header h1 img{width:15vw;}
.navigation nav,
.navigation ul {width:80vw;}
.navigation li {float:none;display: block;text-align: center;width:80vw;}
.navigation a:link,
.navigation a:visited{padding: 1.7vh 5px 1.2vh 5px;}
.mobileline {width:13vw;}
}

@media (max-width: 414px) {
}