@charset "utf-8";

/*--------------------------------------------------*/
/*		https://
/*		/css/common.css
/*--------------------------------------------------*/
/*		$index
/*--------------------------------------------------*/
/*			$index......目次
/*			$reset......リセットcss
/*			$font.......ウェブフォントcss
/*			$layout.....全体のレイアウト
/*			$parts......共通パーツレイアウト
/*			$header.....ヘッダレイアウト
/*			$footer.....フッタレイアウト
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*			$reset
/*--------------------------------------------------*/
*{box-sizing: border-box; margin:0; padding:0; text-align:left;}
hr{display:none; margin:0; padding:0; border:none; font-size:0; line-height:0;}
a{color:inherit; text-decoration:none;/* -webkit-transition: all 0.4s ease; transition: all 0.4s ease;*/}
/*a.none:hover{cursor: default;}*/
ul,ol{list-style:none;}
address{font-style:normal;}
p{line-height:1.6;}
i{font-style: normal;}
img{max-width:100%; border:none;}
.fleft{float:left;}
.fright{float:right;}
.clear:after,.clear:before{content:""; display:block; overflow:hidden; height:0;}
.clear:after{clear:both;}
.clear{zoom:1;}



/*--------------------------------------------------*/
/*			$font
/*--------------------------------------------------*/
@font-face {
    font-family: 'Noto Serif Japanese';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/notoserif/NotoSerifJP-Light.otf) format('opentype'),url(../fonts/notoserif/NotoSerifJP-Light.woff) format("woff");
    font-display: swap;
   }
@font-face {
    font-family: 'Noto Serif Japanese';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/notoserif/NotoSerifJP-Regular.otf) format('opentype'),url(../fonts/notoserif/NotoSerifJP-Regular.woff) format("woff");
    font-display: swap;
   }
@font-face {
     font-family: 'Noto Serif Japanese';
     font-style: normal;
     font-weight: 700;
    src: url(../fonts/notoserif/NotoSerifJP-SemiBold.otf) format('opentype'),url(../fonts/notoserif/NotoSerifJP-SemiBold.woff) format("woff");
    font-display: swap;
   }


/*--------------------------------------------------*/
/*			$layout
/*--------------------------------------------------*/
html,body{width:100%; height:auto;}
html{font-size:62.5%; font-family: "Noto Serif Japanese","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: 300;}
body{position:relative; overflow: hidden; width: 100%; height: 100vh; color:#333; font-size: 1.0em; line-height:1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; animation: body .1s ease forwards 6s;}
.liquid-inner{position:relative; width:93.65%; max-width:1180px; min-width: 1000px; margin:0 auto;}
.solid-inner{position:relative; width:960px; margin:0 auto;}
.flex{display:-webkit-flex; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.sans-serif{font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", sans-serif;}
#wrap{position: relative; overflow: hidden; width: 100%;}
@keyframes body{
0%{overflow: hidden; height: 100vh;}
100%{overflow: visible; height: auto;}
}
@media screen and (max-width: 768px) {

}



/*--------------------------------------------------*/
/*			$anchor
/*--------------------------------------------------*/
#anchor li{opacity: 1; position: fixed; right: 1vw; z-index: 100; color: #fff; font-size: 3.125vw; line-height: 1; transition: transform .2s ease-in;}
/*#anchor li:hover{transform: rotateY(720deg);}*/
#anchor li.prev{top: 1vw;}
#anchor li.next{top: 92.5vh;}
#anchor li.off{opacity: 0; z-index: 0;}
#anchor li a{display: block; animation: anchor 6s linear infinite;}
@media screen and (min-width: 640px) and (max-width: 768px) {

}
/*@keyframes anchor{
0%,100%{opacity: 1; transform: rotateY(0);}
50%{opacity: .5; transform: rotateY(360deg);}
}*/


/*--------------------------------------------------*/
/*			$slide
/*--------------------------------------------------*/
.slide{position: relative; width: 100%; height: 100vh;}
.slide-txt{-webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: absolute; left: 0; top: 0; z-index: 15; width: 93.65%; height: 100%; margin: 0 auto; color: #fff;}
.slide-txt .slide-tit dt{font-size: 1.269vw; font-weight: 300; line-height: 1; letter-spacing: .2em;}
.slide-txt .slide-tit dt span{font-size: 2.38vw;}
.slide-txt .slide-tit dd h1{position: relative; padding-bottom: .5em; font-size: 4.764vw; font-weight: 300; letter-spacing: .2em;}
.slide-txt .slide-tit dd h1 span{position: relative;}
.slide-txt .slide-tit dd h1 span:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: .2em; background-color: rgba(0,158,184,.7); transform:skewY(-1deg);
-webkit-clip-path: polygon(.5% 0, 100% 0%, 99.5% 100%, 0% 100%);
clip-path: polygon(.5% 0, 100% 0%, 99.5% 100%, 0% 100%);}
.slide-txt .slide-tit dd h1 span:after{content: ""; position: absolute; bottom: 2%; left: 1%; width: 0%; height: .18em; background-color: rgba(0,158,184,.5); transform:skewY(-2deg);
-webkit-clip-path: polygon(.5% 0, 100% 0%, 99.5% 100%, 0% 100%);
clip-path: polygon(.5% 0, 100% 0%, 99.5% 100%, 0% 100%);}

.on .slide-txt .slide-tit dd h1 span:before{animation: marker .5s ease-out forwards;}
.on .slide-txt .slide-tit dd h1 span:after{animation: marker .5s ease-out forwards .5s;}

.slide-txt p,.slide-txt dt,.slide-txt li,.slide-txt address{font-size: 1.269vw; font-weight: 300; line-height: 2; letter-spacing: .1em;}
@keyframes marker{
0%{width: 0;}
100%{width: 100%;}
}


/*--------------------------------------------------*/
/*			$header
/*--------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1179px) {

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

}



/*--------------------------------------------------*/
/*			$footer
/*--------------------------------------------------*/

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

}