@charset "utf-8";

/* --------------------------------------------------------------- fv */
#fv{ position: relative; display: flex; align-items: center; gap: 7%; }
#fv:before{ position: absolute; content: ""; right: 0; top: 0; width: 85%; height: 100%; background: url(../images/japan/bg_fv.jpg) center/cover no-repeat; border-radius: 26px 0 0 26px; }
.fv__text{ padding-left: 3%; }
.fv__pic{ width: 625px; padding: 30px 0 40px; }
.fv__pic img{ width: 100%; height: auto; }

.fv__title{ line-height: 280%; }
.fv__title span{ padding: 5px 10px; font-size: 33px; color: #1E3F7C; font-weight: 700; background: #fff; }
.fv__sub{ padding: 0 0 35px; font-size: 18px; color: #1E3F7C; font-weight: 700; }
.fv__sub span{ display: inline-block; vertical-align: middle; width: 15%; height: 1px; margin-left: 2%; background: #1E3F7C; }
.fv__logo{ padding: 50px 0 0; }

.link_btn{ padding: 0 3%;}


/* --------------------------------------------------------------- case-compare */
#case-compare{ padding: 110px 0 80px; }
.case-compare__section:not(:last-of-type){ margin-bottom: 60px; }
.case-compare__heading{ display: flex; align-items: baseline; gap: 15px; margin-bottom: 26px; }
.case-compare__title{ font-size: 30px; font-weight: 700; }
.case-compare__label{ font-size: 14px; color: #E56F02; }
.case-compare__balloon{ position: relative; border-radius: 22px; padding: 30px; }
.case-compare__list{ list-style: none; margin: 0; padding: 0; background: #fff; }
.case-compare__item{ padding: 30px 35px; font-size: 20px; line-height: 2; border-top: 1px solid #E1F2FF; }
.case-compare__item:first-child{ border-top: none; }

.case-compare__balloon--issues{ background: #E1F2FF; }
.case-compare__balloon--issues::after{ content: ""; position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 36px solid #E1F2FF; }

.case-compare__balloon--effects{ background: #FFD6B1; }
.case-compare__balloon--effects .case-compare__item{ border-top: 1px solid #FFD6B1; }


/* --------------------------------------------------------------- story */
#story{ background: #E1F2FF; padding: 60px 0 75px; }
.story:not(:last-of-type){ margin-bottom: 40px; }
.story{ position: relative; }
.story:after{ position: absolute; content: ""; width: 30%; height: 100%; background: #fff; right: 0; top: 0; }

.story__card{ position: relative; z-index: 1; background: #fff; border-radius: 15px; padding: 90px 20px 90px 40px; display: flex; align-items: center; justify-content: space-between; gap: 5%; }
.story__media{ width: 40%; }
.story__media img{ width: 100%; height: auto; }

.story__body{ width: 54%; flex: 1; }
.story__ttl{ margin: 0 0 30px; font-size: 32px; font-weight: 700; }
.story__txt p{ margin: 0 0 40px; font-size: 16px; line-height: 2.5; }
.story__txt p:last-child{ margin-bottom: 0; }

.story:nth-of-type(even):after{ left: 0; }
.story:nth-of-type(even) .story__card{ flex-direction: row-reverse; }

.story__card--col{ gap: 35px; flex-direction: column; }
.story__ttl--center{ text-align: center; }
.story__body--low{ width: 90%; margin: 0 0 0 auto; }
.story__txt--split{ display: flex; align-items: flex-start; gap: 30px; }
.story__txt--split p{ width: calc(100% / 2); }

.story-list{ display: flex; justify-content: space-between; gap: 3%; padding: 95px 0 125px; }
.story-list__item{ position: relative; width: calc(100% / 3); background: #FAFAFA; padding: 57px 5% 20px; box-sizing: border-box; }
.story-list__num{ position: absolute; left: 50%; top: 3px; transform: translate(-50%, -50%); width: 77px; height: 77px; border-radius: 50%; background: #E56F02; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 29px; font-weight: 700; }
.story-list__media{ margin: 0 0 22px; padding-top: 24px; }
.story-list__media img{ display: block; width: 100%; height: auto; }
.story-list__box{ text-align: left; }
.story-list__ttl{ margin: 0 0 17px; font-size: 22px; font-weight: 700; color: #E56F02; text-align: center; }
.story-list__txt{ font-size: 16px; line-height: 2; }


/* --------------------------------------------------------------- comment */
#comment{ padding: 140px 0 70px; background: url(../images/bg_repeat02.jpg) center; }
.comment-hero{ position: relative; display: flex; align-items: center; padding: 0 0 70px; }
.comment-hero__media{ width: 50%; }
.comment-hero__media img{ width: 100%; height: auto; }
.comment-hero__box{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 57%; background: #fff; padding: 50px; box-sizing: border-box; }
.comment-hero__txt{ font-size: clamp(20px,1.8vw,30px); font-weight: 700; line-height: 1.5; }

.comment-card{ position: relative; background: #fff; border-radius: 15px; box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; padding: 80px 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 70px; }
.comment-card__body{ width: 58%; }
.comment-card__ttl{ margin: 0 0 35px; font-size: 34px; font-weight: 700; }
.comment-card__lead{ margin: 0 0 45px; font-size: 16px; line-height: 2; }
.comment-card__info{ background: #E1F2FF; padding: 25px 50px; box-sizing: border-box; }

.comment-card__list{ }
.comment-card__list li{ margin: 0 0 7px; font-size: 16px; line-height: 1.5; }
.comment-card__list li:last-child{ margin-bottom: 0; }
.comment-card__list a{ color: inherit; text-decoration: underline; }

.comment-card__side{ width: 30%; text-align: center; }
.comment-card__logo{ width: 90%; margin: 0 auto 40px; }
.comment-card__logo img{ max-width: 100%; height: auto; }

.comment-card__photo{ margin: 0 0 21px; }
.comment-card__photo img{ width: 100%; height: auto; }

.comment-card__name{ font-size: 20px; }
.comment-card__name small{ display: block; padding: 0 0 10px; font-size: 17px; }







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

/* --------------------------------------------------------------- fv */
	#fv{ flex-direction: column-reverse; }
	#fv::before{ width: 92%; height: 55%; border-radius: 15px 0 0 15px; }
	
	.fv__pic{ width: 60%; padding: 20px 0 50px; margin: 0 auto; }
	.fv__sub{ padding: 0 0 10px; font-size: 15px; order: 2; }
	.fv__title span{ padding: 0; font-size: 18px; }
	.fv__title{ line-height: 140%; order: 3; }
	.fv__text{ padding-left: 0; display: flex; flex-flow: column; margin-top: -11%; }
	.fv__logo{ padding: 20px 0 0; width: 130px; height: auto; margin: 0 0 0 auto; display: block; order: 1; }
	

/* --------------------------------------------------------------- case-compare */
	#case-compare{ padding: 50px 0; }
	.case-compare{ width: calc(100% - 32px); }
	.case-compare__section:not(:last-of-type){ margin-bottom: 40px; }
	.case-compare__title{ font-size: 22px; }
	.case-compare__label{ font-size: 12px; }
	.case-compare__item{ padding: 16px; font-size: 14px; line-height: 2; }
	
	.case-compare__balloon{ padding: 16px; border-radius: 16px; }
	.case-compare__balloon--issues::after{ bottom: -22px; border-left-width: 48px; border-right-width: 48px; border-top-width: 22px; }
	

/* --------------------------------------------------------------- story */
	#story{ padding: 40px 0 50px; }
	.story:not(:last-of-type){ margin-bottom: 24px; }
	.story:after{ display: none; }
	
	.story__card{ padding: 28px 18px; border-radius: 12px; flex-direction: column; gap: 20px; }
	.story:nth-of-type(even) .story__card{ flex-direction: column; }
	
	.story__media{ width: 60%; }
	.story__body{ width: 100%; }
	.story__ttl{ margin-bottom: 14px; font-size: 20px; line-height: 1.4; text-align: center; }
	.story__txt p{ margin-bottom: 18px; font-size: 14px; line-height: 2.1; }

	.story__txt--split { gap: 0; flex-direction: column; }
	.story__txt--split p { width: 100%; }
	
	.story-list{ flex-direction: column; gap: 40px; padding: 60px 0 70px; }
	.story-list__item{ width: 100%; padding: 24px 5%; }
	.story-list__num{ width: 64px; height: 64px; font-size: 22px; top: 0; }
	.story-list__media{ padding-top: 16px; margin-bottom: 16px; }
	.story-list__ttl{ font-size: 18px; margin-bottom: 12px; }
	.story-list__txt{ font-size: 14px; line-height: 1.9; }


/* --------------------------------------------------------------- comment */
	#comment{ padding: 0 0 50px; }
	.comment-hero{ padding: 0 0 25px; flex-direction: column; align-items: stretch; }
	.comment-hero__media{ width: 100%; }
	.comment-hero__box{ position: static; transform: none; width: 100%; padding: 10px 5%; }
	.comment-hero__txt{ font-size: 16px; line-height: 1.7; }
	
	.comment-card{ padding: 25px 5%; border-radius: 10px; gap: 20px; box-shadow: 10px 10px 0 rgba(0,0,0,.08); flex-direction: column; }
	.comment-card__body{ width: 100%; }
	.comment-card__ttl{ margin-bottom: 11px; font-size: 18px; line-height: 1.4; }
	.comment-card__lead{ margin-bottom: 20px; line-height: 1.7; font-size: 13px; }
	.comment-card__info{ padding: 15px 5%; }
	
	.comment-card__list li{ margin-bottom: 1px; font-size: 12px; line-height: 1.7; }
	.comment-card__side{ display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: center; }
	.comment-card__logo{ width: 40%; order: 2; margin: 0; }
	.comment-card__photo{ margin-bottom: 0; order: 1; width: 80%; }
	.comment-card__name{ font-size: 15px; line-height: 1.8; order: 3; width: 36%; text-align: left; }
	  


		

	
}