@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
		font-size: 62.5%;
}

a{
	color: #0f0f0f;
	text-decoration: none;
		transition: 0.3s all ease;
}

a:hover{
	opacity: 0.6;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-size: min(1.5278vw, 2.2rem);
	font-family: "Noto Sans JP", sans-serif;
		font-style: normal;
	color: #0f0f0f;
		line-height: 1.6363;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		font-feature-settings: "palt";
		letter-spacing: 0.02em;
}

#wrapper{
		max-width: 1440px;
		width: 100%;
		margin: 0 auto;
}

#wrapper img{
		max-width: 100%;
}


/* =====================================
	header
===================================== */

header{
		width: 100%;
		max-width: 950px;
		height: 104px;
		padding: 32px 34px 0;
}

header img{
		width: 302px;
}


/* =====================================
	main
===================================== */

.visual div{
		position: relative;
}

.visual div p{
		position: absolute;
		top: min(15vw, 216px);
		left: min(21.8vw, 314px);
		width: min(22.56944vw, 325px);
}

.visual div p strong{
		font-weight: normal;
		background: linear-gradient(transparent 80%, #fffb91 20%);
}

.visual div ul{
		width: 100%;
		max-width: min(44.65278vw, 643px);
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: min(31.31944vw, 451px);
		left: 50%;
		transform: translateX(-50%);
}

.visual div li{
		width: 34.2146%;
}

#sec01 dl{
		display: flex;
		width: 100%;
}

#sec01 dl div{
		width: 100%;
		position: relative;
}

#sec01 dl div dd{
		width: 55.56%;
		position: absolute;
		top: min(35.9722vw, 518px);
		left: min(20.1389vw, 290px);
		font-size: min(1.45833vw, 2.1rem);
		line-height: 1.5238;
}

#sec01 dl div:nth-child(2) dd{
		left: min(2.9167vw, 42px);
}

#sec01 p, #sec01 figure{
		position: relative;
}

#sec01 p span{
	 font-size: min(1.389vw, 2.0rem);
		line-height: 1.6;
		width: min(63.89vw, 920px);
		position: absolute;
		top: min(39.79167vw, 573px);
		left: 50%;
		transform: translateX(-50%);
		padding-left: 1em;
		text-indent: -1em;
}

#sec01 figure figcaption{
		line-height: 1.55454;
		width: min(48.95833vw, 705px);
		position: absolute;
		top: min(35.34722vw, 509px);
		left: 50%;
		transform: translateX(-50%);
}

#sec01 .teacher{
		position: relative;
		width: 100%;
		padding: min(3.4722vw, 50px) 0 min(9.23611vw, 133px);
}

#sec01 .teacher img{
		margin: 0 auto;
		width: min(41.31944vw, 595px);
}

#sec01 .teacher p{
		position: absolute;
		top: min(11.18vw, 161px);
		left: min(42.01389vw, 605px);
		font-size: min(1.25vw, 1.8rem);
		line-height: 1.65;
}

#sec02{
		width: 100%;
		background: url("../img/remwell_lpc-C-03-0922_bg01.png") center repeat-y;
		padding: 0 40px;
}

#sec02 h2 img{
		margin: 0 auto;
		transform: translateY(-35px);
}

#sec02 .note{
		width: 100%;
		max-width: 950px;
		margin: -3px auto 38px;
		font-size: min(1.389vw, 2.0rem);
		line-height: 1.35;
		padding-left: 1em;
		text-indent: -1em;
}

#sec02 .condition{
		width: 100%;
		max-width: min(65.9722vw, 950px);
		margin: 0 auto 44px;
		display: flex;
		justify-content: space-between;
}

#sec02 .condition div{
		position: relative;
}

#sec02 .condition div:nth-child(1){
		width: 52.7368%;
}

#sec02 .condition div:nth-child(2){
		width: 45.15789%;
}

#sec02 .condition div dd{
		color: #fff;
		font-size: min(1.389vw, 2.0rem);
		line-height: 1.6;
}

#sec02 .condition div:nth-child(1) dd{
		position: absolute;
		top: min(12.986vw, 187px);
		left: min(5.56vw, 80px);
}

#sec02 .condition div:nth-child(2) dd{
		position: absolute;
		top: min(10vw, 144px);
		left: min(16.11vw, 232px);
}

#sec02 .input h3{
		text-align: center;
		font-size: min(2.0833vw, 3.0rem);
		color: #406cbc;
		line-height: 1;
		margin-bottom: 51px;
}

#sec02 .input div{
		width: 100%;
		max-width: min(65.9722vw, 950px);
		margin: 0 auto 40px;
		border-radius: 8px;
		background: #fff;
		text-align: center;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
}

#sec02 .input div::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-top: 14px solid #ffffff;
		border-bottom: 0;
		position: absolute;
		bottom: -14px;
		left: 50%;
		transform: translateX(-50%);
}

#sec02 .input div:nth-child(3)::before{
		display: none;
}

#sec02 .input div dt{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: min(1.944vw, 2.8rem);
		color: #fff;
		line-height: 1;
		background: #3c6fb9;
		width: 100%;
		height: 63px;
		border-radius: 8px 8px 0 0;
}

#sec02 .input div dd{
		font-size: min(1.59722vw, 2.3rem);
		padding: 30px 0 42px 28px;
}

#sec02 .input div dd + dd{
		padding: 30px 48px 42px 0;
}

#sec02 .input div dd span{
		font-size: min(1.73611vw, 2.5rem);
		color: #3c6fb9;
		vertical-align: bottom;
}

#sec02 .input div dd input{
		font-size: min(1.59722vw, 2.3rem);
		width: min(11.67vw, 168px);
		height: min(4.44vw, 64px);
		border: 3px solid #3c6fb9;
		box-shadow: inset 4px 3px 6px 0px rgba(0, 0, 0, 0.1);
		margin: 0 0.4em 0 1.2em;
		padding: 0 .5em;
		font-family: "Noto Sans JP", sans-serif;
}
#sec02 .caution{
		display: none;
		text-align: center;
		font-size: min(1.389vw, 2.0rem);
		opacity: 0;
}
#sec02 .is-active.caution{
		display: block;
		opacity: 1;
		animation-name: simulator_box_caution;
		animation-duration: .3s;
		animation-iteration-count: 1;
}
@keyframes simulator_box_caution {
		0%{
				transform: translateX(2%);
		}
		25%{
				transform: translateX(-2%);
		}
		50%{
				transform: translateX(1%);
		}
		75%{
				transform: translateX(-1%);
		}
		100%{
				transform: translateX(0%);
		}
}
#sec02 .input button{
		font-size: min(2.22vw, 3.2rem);
		font-weight: 500;
		line-height: 1;
		color: #3c6fb9;
		background: #fff;
		width: min(20.56vw, 296px);
		height: min(4.44vw, 64px);
		border-radius: min(2.22vw, 32px);
		border: none;
		box-shadow: 0px 0px 16px 0px rgba(20, 83, 142, 0.4);
		margin: 51px auto 0;
		text-align: center;
		display: table;
		font-family: "Noto Sans JP", sans-serif;
		cursor: pointer;
		padding: 0;
		transition: 0.3s all ease;
}

#sec02 .input button:hover{
		color: #fff;
		background: #3c6fb9;
}

#sec02 .output{
		background: #fff;
		width: calc(100% + 80px);
		clip-path: polygon(0 0, 50% 95px, 100% 0, 100% 100%, 0 100%);
		margin: -12px 0 0 -40px;
		padding: 185px 40px 0;
		max-height: 0;
}
#sec02 .is-active.output{
		transition: padding .3s;
		max-height: unset;
}

#sec02 .output p{
		text-align: center;
		font-size: min(2.0833vw, 3.0rem);
		line-height: 1;
		margin-bottom: 50px;
		opacity: 0;
}
#sec02 .is-active.output p{
		opacity: 1;
		transition: transform .6s, opacity .6s;
		transition-delay: .3s;
}

#sec02 .output p strong{
		font-size: 150%;
		font-weight: 500;
		color: #3c6fb9;
}

#sec02 .output p strong span{
		background-image: radial-gradient(circle at center, #3c6fb9 14%, transparent 18%);
		background-position: top right; /* 点の位置 */
		background-repeat: repeat-x; /* 横方向に繰り返し */
		background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
		padding-top: .3em; /* 縦方向の位置調整 */
}

#sec02 .output .result{
		padding: 160px 0 6px;
		text-align: center;
		font-size: min(3.89vw, 5.6rem);
		line-height: 1;
		background: url("../img/remwell_lpc-C-03-0922_arrow01.png") center top no-repeat;
		background-size: 41px auto;
		position: relative;
		display: table;
		margin: 0 auto;
		opacity: 0;
}
#sec02 .is-active.output .result{
		opacity: 1;
		transition: transform .6s, opacity .6s;
		transition-delay: 1.2s;
}

#sec02 .output .result::before{
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 20px;
		background: linear-gradient(90deg, #bee8fa, #b8c0e5);
		z-index: -1;
}

#sec02 .output .result strong{
		font-size: 150%;
}
#sec02 .output .notes{
		margin: 1em 0;
}
#sec02 .output .notes small{
		display: block;
		font-size: 60%;
		text-align: center;
		opacity: 0;
}
#sec02 .is-active.output .notes small{
		opacity: 1;
		transition: opacity .6s;
		transition-delay: 1.2s;
}

#sec03 dl div{
		position: relative;
}

#sec03 dl div dd{
		color: #fff;
		padding-left: 0.81em;
		position: absolute;
}

#sec03 dl div dd::before{
		content: "";
		background: #fff;
		width: 2px;
		height: 88%;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
}

#sec03 dl div:nth-child(1) dd{
		width: min(47.9167vw, 690px);
		top: min(33.4722vw, 482px);
		left: min(19.5833vw, 282px);
}

#sec03 dl div:nth-child(2) dd{
		width: min(47.9167vw, 690px);
		top: min(34.09722vw, 491px);
		left: min(34.722vw, 500px);
}

#sec03 dl div:nth-child(3) dd{
		width: min(45.1389vw, 650px);
		top: min(33.4722vw, 482px);
		left: min(19.5833vw, 282px);
}

#sec04 dl div{
		position: relative;
}

#sec04 dl div dd{
		position: absolute;
		top: min(23.95833vw, 345px);
		left: min(19.3056vw, 278px);
		width: min(59.722vw, 860px);
		font-size: min(1.389vw, 2.0rem);
		line-height: 1.6;
}

#sec04 p{
		text-align: center;
		padding: min(4.79167vw, 69px) 40px 0;
		height: min(24.8611vw, 358px);
		background: url("../img/remwell_lpc-C-03-0922_bg02.jpg") no-repeat center top;
		background-size: 100% auto;
		font-size: min(1.944vw, 2.8rem);
		line-height: 1.7142857;
}

#sec04 p a{
		padding: 34px 0 18px;
		font-size: min(2.3611vw, 3.4rem);
		line-height: 1;
		display: table;
		color: #057dff;
		border-bottom: 2px solid #057dff;
		margin: 0 auto;
}

#sec05{
		position: relative;
}

#sec05 p{
		text-align: center;
		padding: 0 40px;
		width: 100%;
		font-size: min(1.667vw, 2.4rem);
		line-height: 1.7142857;
		position: absolute;
		top: min(65.6944vw, 946px);
		left: 50%;
		transform: translateX(-50%);
}

#sec05 p small{
		font-size: 60%;
		display: block;
		margin-top: 1em;
}

#sec05 p a{
		padding: 34px 0 18px;
		font-size: min(2.3611vw, 3.4rem);
		line-height: 1;
		display: table;
		color: #057dff;
		border-bottom: 2px solid #057dff;
		margin: 0 auto;
}


/* =====================================
	shopify調整
===================================== */

.main-content{
		padding-top:0 !important;
}

p {
		color: #0f0f0f;
}

#sec02 .note {
		border: none;
		max-width: min(65.9722vw,950px);
}

#sim-caution01,
#sim-age-notes01,
#sim-age-notes02 {
		font-size: min(1.389vw,2rem) !important;
}