@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用フォント関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.fwN { font-weight: 500; }
.fwB { font-weight: 700; }
.fcR { color: #cc0000; }
.tdL { text-decoration: line-through; }
.tdU { text-decoration: underline; }
.wsN { white-space: nowrap; }
.ffsP { font-feature-settings: "palt"; }
.taR,
.taRL { text-align: right; }
.taC,
.taCL { text-align: center; }
.font12 { font-size: 1.2rem; line-height: 1.8rem; }
.font14 { font-size: 1.4rem; line-height: 2.2rem; }
.font16 { font-size: 1.6rem; line-height: 2.6rem; }
.font22 { font-size: 2.2rem; line-height: 3.2rem; }

@media screen and (max-width: 767px) {
	.taRL,
	.taCL { text-align: left; }
	.taLC { text-align: center; }
	.font14 { font-size: 1.2rem; line-height: 1.8rem; }
	.font16 { font-size: 1.4rem; line-height: 2rem; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用レイアウト関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ maxW：max-width指定かつセンタリング ］
―――――――――――――――――――――――――――――― */

.maxW960 { max-width: 960px; margin-right: auto; margin-left: auto; }



/* ――――――――――――――――――――――――――――――
［ diB：各種 display inline-block ］
―――――――――――――――――――――――――――――― */

.diB,
.diBI,
.diBB { display: inline-block; }

@media screen and (max-width: 767px) {
	.diBI { display: inline; }
	.diBB { display: block; }
}



/* ――――――――――――――――――――――――――――――
［ dBI：各種 display block ］
―――――――――――――――――――――――――――――― */

.dBI { display: block; }

@media screen and (max-width: 767px) {
	.dBI { display: inline; }
}



/* ――――――――――――――――――――――――――――――
［ commonPara：段落行間 ］
―――――――――――――――――――――――――――――― */

.commonPara20 p:not(:last-child) { margin-bottom: 20px; }
.commonPara30 p:not(:last-child) { margin-bottom: 30px; }
.commonPara40 p:not(:last-child) { margin-bottom: 40px; }

@media screen and (max-width: 767px) {
	.commonPara20 p:not(:last-child) { margin-bottom: 10px; }
	.commonPara30 p:not(:last-child) { margin-bottom: 15px; }
	.commonPara40 p:not(:last-child) { margin-bottom: 20px; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 汎用画像処理関連 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ autoImg：原寸表示 ］
―――――――――――――――――――――――――――――― */

.autoImg img { max-width: 100%; width: auto; }



/* ――――――――――――――――――――――――――――――
［ changeImg：2点の画像入れ替え ］
―――――――――――――――――――――――――――――― */

.changeImg div:nth-child(2) { display: none; }

@media screen and (max-width: 767px) {
	.changeImg div:nth-child(1) { display: none; }
	.changeImg div:nth-child(2) { display: block; }
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 コンテンツ間隔 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.mb05 { margin-bottom: 5px; }
.mb06 { margin-bottom: 6px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }
.mb120 { margin-bottom: 120px; }
.mb140 { margin-bottom: 140px; }
.mb160 { margin-bottom: 160px; }
.mb180 { margin-bottom: 180px; }
.mb200 { margin-bottom: 200px; }

@media screen and (max-width: 767px) {
	.mb20 { margin-bottom: 10px; }
	.mb30 { margin-bottom: 15px; }
	.mb40 { margin-bottom: 20px; }
	.mb50 { margin-bottom: 25px; }
	.mb60 { margin-bottom: 30px; }
	.mb70 { margin-bottom: 35px; }
	.mb80 { margin-bottom: 40px; }
	.mb90 { margin-bottom: 45px; }
	.mb100 { margin-bottom: 50px; }
	.mb120 { margin-bottom: 60px; }
	.mb140 { margin-bottom: 70px; }
	.mb160 { margin-bottom: 80px; }
	.mb180 { margin-bottom: 90px; }
	.mb200 { margin-bottom: 100px; }
}






/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 以下共通レイアウト 】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ――――――――――――――――――――――――――――――
［ scrollFade ］
―――――――――――――――――――――――――――――― */

.scrollFade.scrollActive { opacity: 1; transform: translateY(0); }
.scrollFade { opacity: 0; transform: translateY(50px); transition: 1.25s; }



/* ――――――――――――――――――――――――――――――
［ pageAnchor ］
―――――――――――――――――――――――――――――― */

.pageAnchor { display: block; padding-top: 130px; margin-top: -130px; }

@media screen and (max-width: 767px) {
	.pageAnchor { padding-top: 30px; margin-top: -30px; }
}



/* ――――――――――――――――――――――――――――――
［ pageHead ］
―――――――――――――――――――――――――――――― */

.pageHead { max-width: 1200px; margin-right: auto; margin-left: auto; }
.pageHead .headTitle { margin-top: 80px; margin-bottom: 50px; }
.pageHead .headTitle.titleExh { font-size: 6.4rem; line-height: 8.4rem; font-weight: bold; color: #333; text-align: center; }
.pageHead .headTitle.titleFaf { max-width: 394px; margin-right: auto; margin-left: auto; }
.pageHead .headTitle.titleAlk { max-width: 456px; margin-right: auto; margin-left: auto; }
.pageHead .headAnker { position: relative; z-index: 1; }
.pageHead .headAnker a { position: relative; display: block; width: 90px; height: 90px; border: solid 1px transparent; border-radius: 50%; font-size: 0; line-height: 0; margin-right: auto; margin-left: auto; }
.pageHead .headAnker a::after { position: absolute; top: 0; right: 0; left: 0; display: block; width: 18px; height: 18px; border-bottom: 2px solid #b3babf; border-left: 2px solid #b3babf; content: ""; transform: rotate(-45deg); animation: headAnker 3s ease-in-out infinite; margin: 8px auto 0; }

@media screen and (min-width: 769px) {
	.pageHead .headAnker a { transition: 0.3s ease; }
	.pageHead .headAnker a:hover { border-color: #b3babf; }
}

@media screen and (max-width: 768px) {
	.pageHead .headAnker a { border-color: #b3babf; }
}

@media screen and (max-width: 767px) {
	.pageHead { max-width: 500px; }
	.pageHead .headTitle { margin-top: 50px; margin-bottom: 35px; }
	.pageHead .headTitle.titleExh { font-size: 4.0rem; line-height: 6rem; font-weight: bold; color: #333; text-align: center; }
	.pageHead .headTitle.titleFaf,
	.pageHead .headTitle.titleAlk { width: 80%; }
	.pageHead .headAnker a { width: 50px; height: 50px; border-color: #b3babf; }
	.pageHead .headAnker a::after { width: 14px; height: 14px; margin-top: 0; }
}

@keyframes headAnker {
	0%   { top: 35%; }
	84%  { top: 35%; }
	88%  { top: 40%; }
	92%  { top: 35%; }
	96%  { top: 40%; }
	100% { top: 35%; }
}



/* ――――――――――――――――――――――――――――――
［ sectionTitle ］
―――――――――――――――――――――――――――――― */

.sectionTitle { font-size: 4.6rem; line-height: 6.4rem; color: #333; text-align: center; margin-bottom: 50px; }

@media screen and (max-width: 767px) {
	.sectionTitle { font-size: 2.8rem; line-height: 4rem; margin-bottom: 25px; }
}



/* ――――――――――――――――――――――――――――――
［ movieParts ］
―――――――――――――――――――――――――――――― */

.movieArrow { position: relative; display: block; width: 100%; }
.movieArrow::before,
.movieArrow::after { position: absolute; top: 0; right: 0; bottom: 0; content: ""; margin: auto; z-index: 1; }
.movieArrow::before { left: 0; display: block; width: 68px; height: 68px; background-color: #f9f9f9; border-radius: 50%; }
.movieArrow::after { left: 4px; display: block; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 22px; border-color: transparent transparent transparent #333; }

@media screen and (min-width: 769px) {
	.movieArrow::before,
	.movieArrow::after { transition: 0.4s ease; }
	.movieArrow:hover::before,
	.movieArrow:hover::after { opacity: 0.8; }
	.movieHover { overflow: hidden; }
	.movieHover img { transition: 0.4s ease; }
	.movieHover:hover img { transform: scale(1.1); }
}