/* layout ___________________________________________________________________________________________________ */
#contents h1 {padding: 2.75rem 0;}
#contents h1 img {height: 47.5vh;}
#contents h3.feature_hero{margin: 3rem 0;}
#contents h3.feature_hero img{width: 100%; display: block;}
#contents p{overflow-wrap: anywhere;}

.list_outer .tit_area h2 em {display: block; font-size: 14px; font-weight: normal; letter-spacing: 10px;}
.list_outer .tit_area p{font-size: 20px; color: rgb(232, 232, 232); margin-top: 30px;}

.intro_area{width: 100%; display: flex; justify-content: normal; align-items: center; margin-top: 0; background-repeat: no-repeat; background-size: auto;  background-position-x: inherit; background-position-y: 50%;}
.intro_area aside{width: 50%; padding: 8rem 0;}
.intro_area.story_1{justify-content: right; background-image: url(../images/intro_bg_1.webp); background-position-x: left;}
.intro_area.story_2{justify-content: left; background-image: url(../images/intro_bg_2.webp); background-position-x: right;}
.intro_area.story_3{justify-content: right; background-image: url(../images/intro_bg_3.webp); background-position-x: left;}
.intro_area h3{font-size: 54px; margin-bottom: 0.75rem;}
.intro_area h3 em{font-size: 54px; position: relative;}
[data-ruby]::before {content: attr(data-ruby); font-size: 16px; letter-spacing: 12px; position: absolute; top: -1.5em; left: 50%; right: 0; margin: 0 0 0 -58px;}
.intro_area p{font-size: 20px;}
.intro_area p span{font-size: 16px; display: block; margin: 10px 0;}
.intro_area div.common_btn,
.intro_area a.common_btn{display: block; width: 90%; max-width: 320px; background: linear-gradient(to right, #325BDA, #6033E8); font-size: 18px; font-weight: 700; line-height: 1.25em; color: #fff; text-align: center; padding: 10px 10px 8px; margin: 20px auto; border-radius: 8px; cursor: pointer;}
.intro_area div.common_btn em{display: block; font-size: 14px;}

.feature{background: #3a3a3a; color: rgb(232, 232, 232); padding: 30px; margin-top: 2rem; border-radius: 8px;}
.feature ul{align-items: flex-start;}
.feature ul > li{width: 46%; margin: 2%;}
.feature h4{font-size: 24px; font-weight: 600; margin-bottom: 10px;}
.feature h4 span{display: block; width: 100%; max-width: 90px; background: linear-gradient(to right, #325BDA, #6033E8); font-size: 17px; line-height: 1; text-align: center; border-radius: 30px; padding: 6px 7px 5px; margin-bottom: 7px;}
.feature p{overflow-wrap: anywhere; line-height: 1.75em;}
.feature p em{font-size: 12px;}
.feature hr{width: 96%; display: block; border-top: 1px solid #595959; border-bottom: 0; border-left: 0; border-right: 0; margin: 2.5rem auto 1rem;}
.feature figure{display: block; width: 100%; margin: 0 0 25px; padding: 0; border-radius: 10px; overflow: hidden;}
.feature figure img{width: 100%;}

.feature ul.vsx  > li{width: 30%; margin: 1.5%;}
.feature ul.vsx  > li p{font-size: 12.25px;}

.feature .movie{width: 96%; margin: 20px auto;}
.feature .movie .detail{width: 48%; padding-top: 27%; position: relative; border-radius: 10px; overflow: hidden;}
.feature .movie .detail iframe{width: 100%; height: 100%; position: absolute; top: 0; right: 0;}
.feature .movie .exp{width: 48%;}
.feature .movie .exp h4{display: block; width: 100%; max-width: 320px; background: linear-gradient(to right, #325BDA, #6033E8); font-size: 24px; line-height: 1; text-align: center; border-radius: 30px; padding: 15px 0 12px; margin-bottom: 10px;}
.feature .movie .exp p{font-size: 18px;}

.note_box{width: 100%; background: #ff1e02; border: 2px solid #ff1e02; padding: 30px; margin: 2rem auto;}
.note_box h3{font-size: 20px; margin-bottom: 5px; color: #fff;}
.note_box .exc-circle {display: inline-block; color: #ff1e02; line-height: 1; width: 0.85em; height: 0.85em; background: #fff; border: 0.1em solid #fff; border-radius: 50%; box-sizing: content-box; margin-right: 5px; vertical-align: -0.21em; position: relative;}
.note_box .exc-circle > span {width: 0.15em; height: 0.6em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.note_box .exc-circle > span::before, .note_box .exc-circle > span::after {content: ''; display: block; width: inherit; background: #ff1e02;}
.note_box .exc-circle > span::before {margin-bottom: 0.1em; height: 0.35em; border-radius: 0.025em;}
.note_box .exc-circle > span::after {height: 0.15em; border-radius: 50%;}

.guide{width: 100%;}
.guide article{margin-top: 25px;}
.guide.flex{align-items: flex-start;}
.guide .guide_outline,
.guide .guide_notice{width: 48%;}
.guide .guide_outline .table-area{overflow-x: auto; width: 100%;}
.guide .guide_outline .table-area table{width: 100%; table-layout: auto;}
.guide .guide_outline .table-area th,
.guide .guide_outline .table-area td{padding: 15px; border: 1px solid #fff; vertical-align: top; white-space: nowrap;}
.guide .guide_outline .table-area th{text-align: left;}
.guide .guide_outline .table-area td p b{display: block;}
.guide .guide_outline .table-area td ul > li p{margin: 0 0 10px;}
.guide .guide_outline .table-area td ul > li p:last-of-type {margin-bottom: 0;}
.guide .guide_notice ul{font-size: 14px;}
.guide .guide_notice ul > li{list-style: disc; margin: 10px 20px;}
.guide .guide_notice ul > li:first-child{margin-top: 0;}

footer .link ul li a:hover{color: #e8e8e8; transition: all 0.35s ease;}

.btn_area{margin: 50px 0 100px;}
.btn_area h5{color: #e8e8e8; font-size: 30px; font-weight: 600; text-align: center;}
.btn_area a{display: block; width: 90%; max-width: 400px; background: linear-gradient(to right, #325BDA, #6033E8); font-size: 18px; font-weight: 700; line-height: 56px; color: #fff; text-align: center; padding: 0 16px; margin: 20px auto; border-radius: 8px;}

.center_box .popup_header .tit {text-align: center;}
.center_box ul.slider{width: 100%; max-width: 620px;}
.center_box .slick-list li figure{width: 100%; margin: 1.25rem 0 0.75rem; padding: 0;}
.center_box .slick-list li figure img{width: 100%;}
.center_box .slick-list li p{font-size: 18px; overflow-wrap: anywhere;}
.center_box .slick-dots {bottom: -40px;}
.center_box .slick-dots li {height: 32px; width: 32px; margin: 0 2px;}
.center_box .slick-dots li button {height: 32px; width: 32px;}
.center_box .slick-dots li button:before {width: 32px; height: 32px; font-size: 16px; line-height: 32px;}
.center_box .slick-dots li.slick-active button:before {color: #3f64dc; opacity: 1;}


/* =========================================================================================================== */
/* Mobile ==================================================================================================== */
/* =========================================================================================================== */

@media screen and (max-width: 768px) {
/**/
	#contents h1 {padding: 20rem 0;}
	#contents h1 img {height: 25vh;}
	#contents h3.feature_hero{margin: 5.5rem 4vw;}
    .list_outer .tit_area h2 {font-size: 5.9rem;}
	.list_outer .tit_area h2 em {font-size: 12px; letter-spacing: 5px;}
	.list_outer .tit_area p{font-size: 16px; margin: 15px 0;}

	.intro_area aside{width: 100%; padding: 58.5rem 4vw 5rem;}
	.intro_area.story_1{background-position-x: center; background-position-y: top; background-size: contain;}
	.intro_area.story_2{background-position-x: center; background-position-y: top; background-size: contain;}
	.intro_area.story_3{background-position-x: center; background-position-y: top; background-size: contain;}
	.intro_area h3{font-size: 28px; margin-bottom: 2rem; text-align: center;}
	.intro_area h3 em{font-size: 28px;}
	[data-ruby]::before {font-size: 12px; letter-spacing: 10px; margin: 0 0 0 -47px;}
	.intro_area p{font-size: 16px;}
	.intro_area p span{font-size: 12.5px;}
	.intro_area div.common_btn{width: 80%;}
	.intro_area div.common_btn em{font-size: 12.5px;}

	.feature{width: 90%; padding: 15px; margin: 2rem auto;}
	.feature ul > li{width: 100%; margin: 5% 2.5%;}
	.feature h4{font-size: 18px;}
	.feature h4 span{max-width: 80px; font-size: 14px; padding: 5px;}
	.feature p{font-size: 16px; line-height: 1.45em;}
	.feature p em{font-size: 10px;}
	.feature hr{margin: 4rem auto 0rem;}
	.feature figure{margin: 0 0 15px;}

	.feature ul.vsx  > li{width: 100%; margin: 3% 1.5%;}
	.feature ul.vsx figure{width: 100%; max-width: 240px; margin: 0 auto 15px;}

	.feature .movie {margin: 10px auto;}
	.feature .movie .detail{width: 100%; padding-top: 55%; margin-bottom: 15px;}
	.feature .movie .exp{width: 100%;}
	.feature .movie .exp h4{max-width: 240px; font-size: 16px; padding: 12px 0 10px; margin-bottom: 10px;}
	.feature .movie .exp p{font-size: 16px;}

	.note_box{width: 90%; padding: 15px; margin: 4rem auto;}
	.note_box h3{font-size: 16px;}
	.note_box p {font-size: 14px; line-height: 1.45em;}
	.note_box .exc-circle {margin-right: 3px; vertical-align: -0.175em;}

	.guide article{padding: 0 4vw; margin-top: 20px;}
	.guide.flex{flex-direction: column;}
	.guide .guide_outline,
	.guide .guide_notice{width: 100%;}
	.guide .guide_outline .table-area th,
	.guide .guide_outline .table-area td {padding: 10px; white-space: nowrap;}
	.guide .guide_notice ul > li{overflow-wrap: anywhere; margin: 15px;}

	.btn_area{margin: 20px 4vw 40px;}
	.btn_area h5{font-size: 16px;}
	.btn_area a{width: 80%; line-height: 50px; padding: 0 16px; margin: 10px auto;}

	.center_box ul.slider{max-width: 600px; margin: 0 auto;}
	.center_box .slick-list li figure{margin: 3rem 0;}
	.center_box .slick-list li p{font-size: 16px;}
	.full_popup .center_box {padding: 7rem 5rem 14rem 5rem;}

@media screen and (max-width: 370px) {}
@media screen and (max-width: 360px) {}
@media screen and (max-width: 330px) {}