@charset "utf-8";

.scroll-animation {
  transition: all 0.6s ease-in-out;
  opacity: 0;
}

.scroll-animation.animation-active { opacity: 1;}

.scroll-animation.bottom-to-top{ transform: translateY(10vh);}
.scroll-animation.left-to-right{ transform: translateX(-50vw);}
.scroll-animation.right-to-left{ transform: translateX(50vw);}

.scroll-animation.animation-active.bottom-to-top { transform: translateY(0);}
.scroll-animation.animation-active.left-to-right,
.scroll-animation.animation-active.right-to-left{ transform: translateX(0);}

.scroll-animation.animation-active.delay02{ transition-delay: 0.5s;}
.scroll-animation.animation-active.delay03{ transition-delay: 1s;}
.scroll-animation.animation-active.delay04{ transition-delay: 1.5s;}


.scroll-animation.animation-active.zoom-in { 
	display: inline-block; 
	animation: zoom-in 1.5s 0.6s ease-in-out 1;
}
@keyframes zoom-in {
  0% { transform: scale(1);}
  50% { transform: scale(1.2);}
  100% { transform: scale(1);}
}

@media screen and (max-width: 640px) {
	.scroll-animation.animation-active.delay02{ transition-delay: inherit;}
	.scroll-animation.animation-active.delay03{ transition-delay: inherit;}
	.scroll-animation.animation-active.delay04{ transition-delay: inherit;}	
	
} /*End max 640*/


.br-pc {display: block;}

/*FEATURE*/
#FEATURE.contents-section {
  position: relative;
  max-width: inherit;
  min-height: 70rem;
  z-index: 10;
}

.feature-bg {background-color: #e6f5fa; position: relative; display: flex; justify-content: center; z-index: 1;}

.feature-bg-img img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover;}

#FEATURE .section-title::after {width: 51rem;}

.feature-list {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.feature-list li {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 22.5%;
}
.feature-img {
	max-width: 20rem;
	background-color: #fff;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	display: block;
  overflow: hidden;
}
.feature-img img {
	display: block;
	margin: 0 auto;
	max-width: 19rem;
}
.feature-txt {  
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-content: space-between;
  line-height: 1.4;
}

.feature-txt h4 {
  font-size: var(--font-size-l);
  min-height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;    
}

.feature-txt h4 strong { display: block; font-weight: bold; line-height: 1.4; text-align: center;}
.feature-txt h4 span { white-space: nowrap;}

.feature-txt p {
  display: block;
  font-size: var(--font-size-m);
  text-align: left;    
}

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

	.feature-list li { width: 48%; padding-bottom: 2em;}

}/* End Max 680 */


/*SERVICE*/
#SERVICE.contents-section {padding-bottom: 0;}

.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
	justify-content: space-between;
	position: relative;
}
.service-list li {
	width: 30%;
	border: solid 0.2rem #047df4;
	padding: 2% 2.5%;
	border-radius: 3rem;
	min-height: 25rem;
	margin-bottom: 5%;
}

.service-list li img {
	max-width: 8rem;
}
.service-list li h4 {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.service-list li h4 span {
	font-weight: bold;
	padding-left: 1rem;
	text-align: left;
}

/*FLOW*/
.flow-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: row-reverse;
}

.flow-img {width: 40%;}
.flow-body {width: 60%;}

.flow-img {max-width: 42rem;}
.flow-img img {max-width: 42rem; margin-top: -6rem;}

.step {margin-left: 2rem;}

.step li h4 {
	text-align: left;
	padding: 0.5rem 0;
}

.step-body {
	display: flex; 
	justify-content: space-around; 
	height: 100%;
	padding-bottom: 4rem;
	position: relative;
}

.step-number {
	position: relative;
	background: #047df4;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	width: 6rem;
	height: 6rem;
	font-size: var(--font-size-l);
	font-weight: bold;;
	line-height: 2rem;
	align-content: center;
}

.step-number .small {
	display: block;
	font-size: var(--font-size-s);
}

.step-body.scroll-animation.animation-active::before {
	position: absolute;
	content: "";
	width: 0.375rem;
	height: 0;
	background: #047df4;
	top: 0;
	left: 7%;
	z-index: -1;
	animation: line 1.5s 0.6s forwards;
}

@keyframes line {
  0% { height: 0;}
  100% { height: 100%;}
}
.step-body.last.scroll-animation.animation-active::before {
	content: none;
}

.step-detail {width: 80%;}



.flow-inquiry {
	background: linear-gradient(0deg, rgb(110, 192, 245), rgb(86, 146, 245), rgb(3, 155, 251));
	color: #fff;
	border-radius: 3rem;
	max-width: 65rem;
	display: block;
	margin: 8rem auto 0;
	text-align: center;	
	overflow: hidden;
}
.flow-inquiry-body {
	padding-top: 4rem;
	margin-left: 2rem;
	font-size: var(--font-size-xl);
	font-weight: bold;
}
.blue-font {
	margin: 3rem auto 0;
	font-size: var(--font-size-l);
}
.blue-font a {
	width: 25rem;
	background: #fff; 
	border-radius: 1rem; 
	color: #047df4; 
	padding: 1rem 2rem 1rem;
}

.flow-inquiry-img img {
	max-width: 20rem; 
	display: block;
	margin: -7rem 0 0rem 1.5rem;
}

/*PRICE*/
.section-bg-price {width: 100%; background: #e6f5fa;}

#PRICE .section-title {
	margin: 0 auto 8rem;
	padding-top: 10rem;
}

.price-container {
	display: flex;
	justify-content: space-between;
  column-gap: 3rem;
}
.price-item {width: 30%;}
.price-item2 {margin: 0 auto; width: 65%;}

.price-item h4, .price-item2 h4 {
	display: flex;
	min-height: 3.6em;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-weight: bold;
	
}

.price-item h4 strong, .price-item2 h4 strong{display: block; line-height: 1.4;}

.price-item h4 span, .price-item2 h4 span {
	font-size: var(--font-size-s);
	white-space: nowrap;
}

.price-table .table-title {
	display: flex;
	color: #fff;
	background: #047df4;
	text-align: center;
	padding: 1.2rem;
	font-weight: bold;
}
.price-table .table-title p {flex: 1;}
.price-table ul li {
	display: flex;
	text-align: center;
	align-items: center;
	border-bottom: solid 0.1rem #047df4;
	padding: 1.2rem 1rem;
	background: #fff;
}
.price-table ul li p {flex: 1;}

.price-item2 .price-table ul li:first-child {border-top: solid 0.1rem #047df4;}

/*VOICE*/
.voice-box {
	display: flex;
	flex-wrap: wrap;
	column-gap: 4rem;
	row-gap: 4rem;
	justify-content: center;
	overflow: hidden;
}
.voice-box li {
	display: flex;
	flex-direction: column;
	max-width: 34rem;
	padding: 3rem 4rem 0;
	border: solid 0.3rem #047df4;
	border-radius: 0.8rem;
	overflow: hidden;
}

.voice-box li h4 {padding-bottom: 1.5rem;}

.voice-box li img {
	max-width: 15rem;
	margin-bottom: -2.5rem;
}

.txt-right {text-align: right;}

/*MOVIE*/ /*202409動画非公開*/
/*.section-bg-movie {width: 100%; background: #badbfc;}

#MOVIE .section-title {
	margin: 0 auto 6rem;
	padding-top: 10rem;
}

.txt-center {text-align: center;}

.movie-container {position: relative; max-width: 70rem; margin: 0 auto;}

.swiper.movie-slider {max-width: 70rem; height: auto;}

.movie-slider .swiper-slide {width: 100%; height: 100%;}

.movie-container .swiper-button-prev::after,
.movie-container .swiper-button-next::after {color: #fff; font-size: var(--font-size-xxl);}

.movie-container .swiper-button-prev,
.movie-container .swiper-button-next {
	position: absolute;
	top: 50%;
}
.movie-container .swiper-button-prev {left: -5%;}
.movie-container .swiper-button-next {right: -5%;}

.movie-container .swiper-pagination-bullet {background-color: #fff;}

.movie-container .swiper-pagination-bullets.swiper-pagination-horizontal {
	position: absolute;
	bottom: -2.5rem;
}

.open-modal {
	cursor: pointer;
	position: relative;
  width: 100%;
}

.open-modal::before {
	position: absolute;
	content: '';
	width: 7rem;
	height: 7rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url('/img/movie_icon.svg') no-repeat center;
	background-size: contain;
	z-index: 1;
}*/
/*202409動画非公開ここまで*/

/*OFFICE*/
.office-container {
	display: flex; 
	justify-content: center;
	align-items: center;
	column-gap: 4.5rem;
}

.office-data {width: 48%;}
.office-data dl {
	display: flex;
	flex-wrap: wrap;
}

.office-data dl dt, .office-data dl dd {
	border-bottom: solid 0.1rem #999999;
	padding: 2rem 0;
	background: #fff;	
}
.office-data dl dt:first-child,
.office-data dl dt:first-child + dd {border-top: solid 0.1rem #999999;}
.office-data dl dt {width: 30%; text-align: center;}
.office-data dl dd {width: 70%; text-align: left;}

.office-map {
	max-width: 50rem; 
	width: 52%; 
	aspect-ratio: 4 / 3;
}

.member-box {
	margin: 0 auto;
	max-width: 50rem;
}
.member-box2 {
	margin: 10rem auto 0;
	display: flex;
	justify-content: space-around;
}

.member-box2 .member {width: 40%;}

.member-name {text-align: center; font-weight: bold; margin-bottom: 1rem;}
.member-name p {font-size: var(--font-size-l);}
.member-name img {
	max-width: 27rem; 
	margin: 0 auto 0.5rem; 
	display: block;
	border-radius: 50%;
}


/*INQUIRY*/
#INQUIRY.contents-section {padding-bottom: 0;}

.section-bg-inquiry {width: 100%;	background: #a1d3e3;}

#INQUIRY .section-title {
	margin: 0 auto 6rem;
	padding-top: 10rem;
}

.inquiry-container {
	display: block;
	max-width: 76rem;
	background: #fff;
	border-radius: 3rem;
	padding: 6rem 0 4rem;
	margin: 0 auto;
}

.inquiry-container form {
	width: 70%;
	margin: 0 auto;
}

.form-row label {
	font-weight: bold;
} 

.form-label {padding-bottom: 1.5rem;}

#INQUIRY input, textarea {
	width: 100%;
  border: solid 0.1rem #222;
  border-radius: 0.8rem;
  padding: 0.7em;
}

input::placeholder, textarea::placeholder {color: #8f8e8e;}

form .btn {
	display: block;
	margin: 0 auto;
	background: #047df4;
	color: #fff;
	padding: 1rem 5rem 1rem;
	border-radius: 1rem;
	cursor: pointer;
}

.red {color: #fc4141;}

.inquiry-img {
	max-width: 60rem;
	margin: 1rem auto 0;
	overflow: hidden;
}
.inquiry-img img {
	max-width: 60rem;
	width: 100%;
	margin-bottom: -1rem;
}


@media screen and (max-width: 1024px) {
	.office-container {
		display: block;
	}
	
	.office-data {width: 80%; margin: 0 auto;}
	
	.office-map {width: 80%; margin: 4rem auto 0; max-width: 60rem;}
}

@media screen and (max-width: 960px) {
	.br-sp {display: none;}
}

@media screen and (max-width: 820px) {	
	.price-container,
	.price-container2{display: block; margin: 0 auto; max-width: 70rem;}
	
	.price-item {width: 80%; margin: 0 auto 3rem;}
	
	.price-item2 {width: 80%; margin: 0 auto;}

}

@media screen and (min-width: 769px) and (max-width: 820px) {
	.step-body.scroll-animation.animation-active::before {left: 8%}
}


@media screen and (max-width: 768px) {
	.flow-container {display: block;}
	.flow-body {width: 100%;}
	
	.flow-img {width: 100%; display: block; margin: 0 auto;}
	.flow-img img {display: block; margin: 0 auto;}
	
	.flow-inquiry {margin: 2rem auto 0;}
	.flow-inquiry-body {padding-top: 3rem;}
	.blue-font {margin: 3rem auto 0;}
	
	.movie-container {max-width: 50rem;}
	.swiper.movie-slider {max-width: 50rem;}
}

@media screen and (max-width: 640px) {
	.br-pc {display: none;}
		
	#FEATURE .section-title::after {max-width: 35rem;}
	
	.feature-list {display: block;}
	.feature-list li {margin: 0 auto; width: 100%; padding-bottom: 3em;}
	.feature-list li:last-child {padding-bottom: 0;}
	.feature-txt h4 {min-height: 2.6em;}
	
	.service-list {display: block;}
	.service-list li {
		width: 100%; 
		max-width: 33rem; 
		margin: 0 auto 3rem;
		padding: 2rem;
		min-height: inherit;
	}
	
	.flow-img img {max-width: 27rem;}
	
	.flow-inquiry-img img {max-width: 15rem; margin: -1rem 0 0rem 1.5rem;}	
	
	.price-item, .price-item2 {width: 96%;}
	
	#PRICE .section-title {margin: 0 auto 6rem;}
	
	.open-modal::before {widows: 5rem; height: 5rem;}
	
	.office-data, .office-map {width: 96%;}
	.office-map {aspect-ratio: 3 / 4;}
	
	.member-box ,.member-box2 {width: 96%;}
	.member-box2 {display: block;}
	.member-box2 .member {width: 100%;}
	.member-box2 .member.member01 {margin-bottom: 4rem;}
	
	.inquiry-container {padding: 4rem 0;}
	.inquiry-container form {width: 83%;}
	.form-label {padding-bottom: 1rem;}
	
}

@media screen and (max-width: 550px) {
	.step-body.scroll-animation.animation-active::before {left: 9%}
	
	.movie-container {max-width: 32rem;}
	.swiper.movie-slider {max-width: 32rem;}
	.movie-container .swiper-button-prev {left: -9%;}
	.movie-container .swiper-button-next {right: -9%;}
	
}	



/* form:入力(追記日:2024/06/12 担当者：tuchi) *---*---*---*---*---*---*---*/
.red-back{background-color: #ffe8e8;}

.errormessage{
	margin-top: 0.5em;
	font-weight: bold;
	color: #fc4141;
}

/* form:確認(追記日:2024/06/11 担当者：tuchi) *---*---*---*---*---*---*---*/
.form .alert {
	margin-top: 0.5em;
	font-weight: bold;
	color: #fc4141;
}

.form .button-area {
	display: flex;
	margin-top: 5em;
}

@media screen and (max-width: 640px) {
	.form .button-area {
		display:block;
	}

	.form .button-area button {
		max-width: 12em;
		width:100%;
		text-align: center;
	}

	.form .back {
		margin-bottom:2.5em;
	}
}

.form .back {
	background: #8f8e8e;
}

/* form:完了(追記日:2024/06/11 担当者：tuchi) *---*---*---*---*---*---*---*/
.form .txt {
	max-width: 20em;
	width: 100%;
	margin: 0 auto 2em;
}

.form .link {
	max-width:8em;
	width: 100%;
	margin: 0 auto 3em;
}

.form .link a{
	display: block;
	width: 100%;
	text-align: center;
	padding: 1rem;
	color: #fff;
	background: #047df4;
	border-radius: 1rem;
	box-sizing: border-box;
}

/* form:プライバシーポリシー(追記日:2024/06/14 担当者：tuchi) *---*---*---*---*---*---*---*/
.form-pp {
	overflow: hidden;
	margin: 1em auto 2em;
	padding: 0 !important;
	border: solid 0.1rem #222;
	border-radius: 0.8rem;
	padding: 0.7em;
}

.form-pp,
.form-pp .frame {
	width: 100%;
	height:16em;
}

.form-pp .frame {
	overflow-y: scroll;
	padding: 1em;
}

.form-pp::-webkit-scrollbar {
	width:1em;
	height:1em;
	border: 1px solid #047df4;
	border-radius:0 0 0 0;
}

.form-pp dl {
	counter-reset: number 0;  
}

.form-pp dt {
	margin: 2em 0 1em 0;
	padding:0 0 0.5em 0;
	text-align:left;
	font-weight: bold;
	border-bottom:#ccc solid 1px ;
}

.form-pp dt::before {
	counter-increment: number 1;
	content:counter(number) ". ";
}

.form-pp dd,
.form-pp dd p {
	font-size: var(--font-size-s);
}

.form-pp ol {
	counter-reset: kouban 0;
}

.form-pp ol li {
	margin: 1em 0 0 0;
	padding:0 0 0 1.7em;
	text-indent: -1.7em;
	font-size: var(--font-size-s);
}

.form-pp ol li::before {
	counter-increment: kouban 1;
	content:"(" counter(kouban) ") ";
}


/* form:チェックボックス(追記日:2024/06/14 担当者：tuchi) *---*---*---*---*---*---*---*/
.check {
	text-align: center;
	margin: 0 0 1.5em 0;
}

.check+.errormessage {
	margin: -1.5em 0 1.5em 0;
	text-align: center;
}

.check #CHECK {
	display: inline-block;
	width: 1em;
	height:0.8em;
	margin: 0 0.3em 0 0;
	cursor: pointer;
	appearance: auto;
	box-sizing: border-box;
	padding: initial;
	border: initial;
	background-color: initial;
}

.check label {
	cursor: pointer;
}

@media screen and (max-width: 640px) {
	.check {
		text-align: left;
		text-indent: -1.3em;
		padding:0 0 0 1.3em;
	}
	.check+.errormessage {
		margin: -1.5em 0 1.5em 1.3em;
		text-align: left;
	}	
}

/* DEBUG(追記日:2024/06/11 担当者：tuchi) *---*---*---*---*---*---*---*/
#DEBUG {width: 100%;margin-top:2em;border-top: 1px solid #999999;}
#DEBUG h1 {margin:2em auto ;text-align: center;font-size: var(--font-size-l);font-weight: bold;}
#DEBUG dl {width: 90%;margin:1em auto ;}
#DEBUG dt {font-size: var(--font-size-m);font-weight: bold;}
#DEBUG dd {margin: 0.5em 0 2em 2em;font-size: var(--font-size-s);}