@charset "utf-8";

/*------------------------------------
汎用
------------------------------------*/
.flex {display: flex;}
.cf:after {display: block; clear: both; content: "";}

/*ゴシック*/
.sans,
.sans * {font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif;}

/*筆記体*/
.segoe {font-family: "Segoe Script",serif; display: inline-block; line-height: 1;}
.chikushi {font-family: fot-tsukuardgothic-std,sans-serif; font-weight: 700; font-style: normal;}

/*------------------------------------
共通
------------------------------------*/
/*アンダーライン*/
.u-line {position: relative;}
.u-line:after {content: ''; position: absolute; bottom: -2px; left: auto; right: 0; width: 0; height: 1px; background: #21201b; transition: all .4s ease-in-out;}
.u-line:hover:after {left: 0; right: auto; width: 100%; transition: all .5s ease;}
.u-line.white:after {background: #fff;}
.u-line.orange:after {background: #ff901e;}

/*moreボタン*/
.more {display: inline-flex; width: 190px; color: #21201b; font-size: 13px; position: relative;}
.more:before,
.more:after {content: ''; transition: .5s ease; position: absolute; display: inline-block; height: 1px; background-color: #21201b;}
.more:before {top: 25px; left: -5px; width: 190px;}
.more:after {top: 19px; left: 168px; width: 20px; transform: rotate(40deg);}
.more:hover:before {transform: translate(15px,0);}
.more:hover:after {transform: translate(15px,0) rotate(40deg);}
.more.white {color: #fff;}
.more.white:before,
.more.white:after {background-color: #fff;}

/*ページ内スクロール*/
#scroll {position: fixed; background: #21201b; transform: translate(0,100px); width: 48px; height: 48px; border: 2px solid #808080; z-index: 100;}
#scroll:before,
#scroll:after {position: absolute; top: 50%; transform: translate(-50%,-50%); display: block; content: ""; width: 16px; height: 2px; background: #fff;}
#scroll:before {left: calc(50% - 7px); transform: translate(-50%,-50%) rotate(-30deg);}
#scroll:after {left: calc(50% + 7px); transform: translate(-50%,-50%) rotate(30deg);}
#scroll.active {transform: translate(0,0);}

/*noimage*/
.noimage {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background:#fff;}
.noimage .logo-icon {width: 25%; height: 28%; margin: 0 auto 15px;}
.noimage .logo-name {width: 40%; height: 10%;}

/*読み込みボタン*/
.scroller-status {display: none;}
.scroller-status p {text-align: center; margin: 0 auto 40px;}
.scroller-status .loader,
.scroller-status .loader:after {border-radius: 50%; width: 4em; height: 4em;}
.scroller-status .loader {margin: 0 auto 80px; position: relative; text-indent: -9999em; border-top: .44em solid rgba(0,0,0, 0.2); border-right: .44em solid rgba(0,0,0, 0.2); border-bottom: .44em solid rgba(0,0,0, 0.2); border-left: .44em solid #21201b; transform: translateZ(0); animation: load-cycle 1.1s infinite linear;}
@keyframes load-cycle {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}



/* 404ページ */
.page404 h2{
	font-size: 8em;
	color: #c2c2c2;
	text-align: center;
	font-family: sans-serif;
}

.page404 p{
	text-align: center;
}

.page404 a{
	font-family: sans-serif;
	font-weight: bold;
	font-size: 1.2em;
}

.page404 .bt{
	margin-top: 50px;
}