@charset "UTF-8";
/* CSS Document */
:root {
	--lineAnimeSpeedPc: 60s;
	--lineAnimeSpeedSp: 60s;
	--LoopAnimeSpeedPc: 60s;
	--LoopAnimeSpeedSp: 30s;
}

/* -------------------------------------------
	bottomShare
---------------------------------------------- */
#bottomShare {display: flex;justify-content: center;margin: 50px 0 50px;list-style-type: none;}
#bottomShare li#twitter .box .share,
#bottomShare li#facebook .box .share {width: 44px;height: 44px;margin: 0 13px;background-repeat: no-repeat;background-position: 50% 50%;text-indent: -9999px;outline: none;}
#bottomShare li#twitter .box .share {background-color: #1da1f2;background-image: url(/club-me/common/v0006/images/icon_twitter.svg);background-size: 25px auto;border-radius: 50%;}
#bottomShare li#facebook .box .share {background-image: url(/club-me/common/v0006/images/icon_facebook.svg);background-size: contain;}
@media only screen and (max-width: 767px) {
	#bottomShare {margin: 40px 0 40px;}
	#bottomShare li#twitter .box .share,
	#bottomShare li#facebook .box .share {width: calc(100vw/(750/88));height: calc(100vw/(750/88));margin: 0 calc(100vw/(750/40));}
	#bottomShare li#twitter .box .share {background-size: calc(100vw/(750/50)) auto;}
}

/* -------------------------------------------
	レイアウト
---------------------------------------------- */
#cmeMain .l-contents {color: #333;font-family: 'Noto Sans JP', sans-serif;overflow: hidden;font-size: calc((16 / 12) * 100%);line-height: calc(26 / 16);font-weight: 400;}
#cmeMain .l-contents img{max-width: 100%;height: auto;vertical-align: top;}
#cmeMain .l-container {margin-right: auto;margin-left: auto;padding-right: 13px;padding-left: 13px;max-width: 1174px;position: relative;}
@media print, screen and (min-width: 768px) {
	#cmeMain .sp{display: none !important;}
}
@media only screen and (max-width: 767px) {
	#cmeMain .pc{display: none !important;}
	#cmeMain .l-contents {font-size: calc((13 / 10.5) * 100%);line-height: calc(44 / 26);}
	#cmeMain .l-container {margin-right: 0;margin-left: 0;padding-right: 30px;padding-left: 30px;max-width: none;}
}

#cmeMain .c-scroll{box-sizing: border-box;display: flex;align-items: flex-end;position: absolute;bottom: 0;right: 20px;padding-bottom: 60px;z-index: +1;}
#cmeMain .c-scroll>picture>img{width: 13px;}
#cmeMain .c-scroll .c-scroll__dots{display: flex;flex-direction: column;font-size: 0;line-height: 0;position: absolute;bottom: 0;left: 0;}
#cmeMain .c-scroll .c-scroll__dots img{animation: dots 2.8s linear infinite;opacity: 0;}
#cmeMain .c-scroll .c-scroll__dots img:nth-of-type(2){animation-delay: .2s;}
#cmeMain .c-scroll .c-scroll__dots img:nth-of-type(3){animation-delay: .4s;}
#cmeMain .c-scroll .c-scroll__dots img:nth-of-type(4){animation-delay: .6s;}
#cmeMain .c-scroll .c-scroll__dots img:nth-of-type(5){animation-delay: .8s;}
@media only screen and (max-width: 767px) {
	#cmeMain .c-scroll{right: -19px;padding-bottom: 30px;}
	#cmeMain .c-scroll>picture>img{width: 9px;}
	#cmeMain .c-scroll .c-scroll__dots img{width: 4px;}
}


/* -------------------------------------------
	view more
---------------------------------------------- */
#cmeMain .c-more{font-family: 'Noto Serif JP', serif;font-size: calc((14 / 16) * 100%);font-weight: 700;margin-top: 20px;}
#cmeMain .c-more>span{display: inline-block;vertical-align: top;position: relative;padding-right: 35px;}
#cmeMain .c-more>span::before{background-color: #dde9f0;border-radius: 50%;content: "";position: absolute;top: calc(50% - 12px);right: 0;width: 24px;height: 24px;}
#cmeMain .c-more>span::after{border-right: 2px solid #333;border-bottom: 2px solid #333;content: "";position: absolute;top: calc(50% - 2px);right: 10px;width: 3px;height: 3px;transform: rotate(-45deg);}
#cmeMain .c-more>span>span{display: block;overflow: hidden;position: relative;}
#cmeMain .c-more>span>span::after{content: attr(data-text);position: absolute;top: 100%;left: 0;}
@media (hover: hover) {
	#cmeMain a .c-more>span::before{transition: background-color .5s ease;}
	#cmeMain a:hover .c-more>span::before{background-color: transparent;}
	#cmeMain a .c-more>span>span>span{display: block;transform: translateY(0);transition: transform .5s ease;}
	#cmeMain a:hover .c-more>span>span>span{transform: translateY(-100%);}
	#cmeMain a .c-more>span>span::after{display: block;transform: translateY(0);transition: transform .5s ease;}
	#cmeMain a:hover .c-more>span>span::after{transform: translateY(-100%);}
}
@media only screen and (max-width: 767px) {
	#cmeMain .c-more{font-size: calc((12 / 13) * 100%);margin-top: 15px;}
	#cmeMain .c-more>span{padding-right: 30px;}
	#cmeMain .c-more::before{top: calc(50% - 11px);width: 22px;height: 22px;}
	#cmeMain .c-more::after{border-right: 1px solid #333;border-bottom: 1px solid #333;}
}

/* -------------------------------------------
	page-back
---------------------------------------------- */
.page-back { margin-top: 70px; }
.page-back p { text-align: center; }
.page-back p a { border-radius: 3px; border: 1px solid #dbdbdb; color: #222222; display: inline-block; vertical-align: bottom; padding: 15px 20px; }
.page-back p a:hover { text-decoration: none; }
.page-back p a span { display: block; position: relative; padding: 0 20px; }
.page-back p a span::after { content: ''; display: block; position: absolute; top: calc(50% - 4px); right: 0px; width: 7px; height: 7px;  border-top: 2px solid #c00; border-right: 2px solid #c00; transform: rotate(45deg); }
@media only screen and (min-width: 768px) {
	.page-back p a { transition: background-color 0.3s ease, color 0.3s ease; }
	.page-back p a:hover { color: #c00; background-color: #f5f5f5; }
}
@media only screen and (max-width: 767px) {
	.page-back { margin-top: 25px; }
	.page-back p a { display: block; font-size: 100%; }
	.page-back p a span::after { top: calc(50% - 3px); width: 5px; height: 5px; }
}

/* -------------------------------------------
	背景の線
---------------------------------------------- */
@keyframes lineScroll { 0% {background-position: 0 0;} 100% {background-position: -3718px 0;}}
@keyframes lineScrollSp { 0% {background-position: 0 0;} 100% {background-position: -1859px 0;}}
@keyframes dots { 0% {opacity: 0;} 7.14% {opacity: 1;} 57.14% {opacity: 1;} 64.28% {opacity: 0;} 100% {opacity: 0;}}

/* -------------------------------------------
	アニメーション
---------------------------------------------- */
.is-fade{opacity: 0;transition: opacity .8s ease;}
.is-fade.is-active{opacity: 1;}
.is-inBottom{opacity: 0;transform: translateY(70px);transition: opacity .8s ease, transform .8s ease;}
.is-inBottom.is-active, .is-active .is-inBottom{opacity: 1;transform: translateY(0);}
.is-mask{mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);mask-size: 100% 0;-webkit-mask-size: 100% 0;mask-repeat: no-repeat;-webkit-mask-repeat: no-repeat;mask-position: 0% 100%;-webkit-mask-position: 0% 100%;}
.is-mask.is-active, .is-active .is-mask{animation: maskMove .8s ease forwards;}
.is-zoom{display: inline-block;overflow: hidden;vertical-align: top;transform: rotate(.0001deg);}
.is-zoom .is-zoom-inner{display: inline-block;vertical-align: top;transition: transform 1.8s ease;transform: scale(1.1);}
.is-active .is-zoom .is-zoom-inner{transform: scale(1);}
@keyframes maskMove { 0% {mask-size: 100% 0;-webkit-mask-size: 100% 0;} 100% {mask-size: 100% 100%;-webkit-mask-size: 100% 100%;}}
.is-delay--05{transition-delay: .5s;animation-delay: .5s !important;}
.is-delay--10{transition-delay: 1s;animation-delay: 1s !important;}
.is-delay--15{transition-delay: 1.5s;animation-delay: 1.5s !important;}
.is-delay--20{transition-delay: 2s;animation-delay: 2s !important;}
.is-delay--25{transition-delay: 2.5s;animation-delay: 2.5s !important;}
.is-delay--30{transition-delay: 3s;animation-delay: 3s !important;}
.is-delay--35{transition-delay: 3.5s;animation-delay: 3.5s !important;}
.is-delay--40{transition-delay: 4s;animation-delay: 4s !important;}
.is-delay--45{transition-delay: 4.5s;animation-delay: 4.5s !important;}
.is-delay--50{transition-delay: 5s;animation-delay: 5s !important;}
@media only screen and (min-width: 768px) {
	.is-anime-delay--02-pc{transition-delay: .2s;animation-delay: .2s !important;}
	.is-anime-delay--04-pc{transition-delay: .4s;animation-delay: .4s !important;}
	.is-anime-delay--05-pc{transition-delay: .5s;animation-delay: .5s !important;}
}