@charset "UTF-8";
/* CSS Document */

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;margin-bottom:0;padding-left:0;}
img,abbr,acronym,fieldset{border:0;}

html {width:100%;font-size:62.5%;}
video {width: 100%;}
a, a:hover {text-decoration:none;}
a:focus,*:focus {outline:none;}
html {width:100%;font-size:62.5%;scroll-behavior: smooth;scroll-padding-top: 100px;}

/**, *:before, *:after {box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing: border-box;-ms-box-sizing:border-box;}*/
/*reset END*/

* {overflow-wrap: break-word;word-wrap: break-word;}/*連続英単語*/
.selector {font-feature-settings: "palt";}/*文字詰め*/
a:hover{opacity: .8rem;transition-duration: .4s;}

:root {
	--white:     #ffffff;
	--gray:      #666666;
	--light-gray:#cccccc;
	--darkred:   #94193A;
	--red:       #D60013;
	--bgyellow:  #FEFBF4;
	--pink1:    #F5BBC9;
	--pink2:     #F4D2D6;
	--light-pink:#FEF4F4;
	--green:     #D6F0F1;
	--darkgreen: #104C6A;
}

#flow {
	width:100%;font-size:62.5%;
	font-style: normal;
	font-weight: 500;
	-webkit-text-size-adjust:100%;
	font-size:1.6rem;
	color: var(--darkred);
	line-height:1.8;
	letter-spacing: 0.2rem;
	font-feature-settings: "palt";
	box-sizing: border-box;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	padding-top: 0;
	background-position: center; 
}
c 
#flow img {width:100%;display:block;}
#flow .img {
  /* フォーマット clamp(最小値, 推奨値, 最大値) */ 
  width: clamp(200px, 100%, 50%);
}
#flow h1{
	font-size:clamp(2.2rem, 1.836rem + 1.82vw, 3.2rem); 
	line-height:1.666;
	margin-bottom: 10%;
	text-align: center;
	border-bottom: 0;
	letter-spacing: 4px;
}
#flow h1 > strong{font-size: 120%; color: var(--pink1); font-weight: bold;}
#flow h2{font-size: clamp(2rem, 1.855rem + 0.73vw, 2.4rem); margin-bottom: 2rem; text-align: center;}
#flow h2 > strong{font-size: 150%; display: block;font-weight: bold;}
#flow h3{font-size: clamp(1.8rem, 1.727rem + 0.36vw, 2rem); margin-bottom: 1.5rem; text-align: left; font-weight: bold;}
#flow p{font-size: clamp(1.2rem, 0.982rem + 1.09vw, 1.8rem); text-align: left;}
#flow sup{
	font-size: smaller;
vertical-align: super !important;
}
.tx-s{font-size:clamp(1rem, 0.927rem + 0.36vw, 1.2rem)!important; color: var(--gray);}
.tx-white{color: var(--white);}
.en{
	font-family: 'Georgia', serif; /* 変えたいフォント */
}

#flow section{
	width: 100%;
}
#flow .section-inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 20% 4%;
}
#flow .btn{
	max-width: clamp(300px, 100%, 30%);
	padding:1.5rem 2rem; overflow: hidden;
	line-height: 1.4;
	margin: 0 auto 3rem; display: block;
	background-color: var(--darkred);
	color: var(--white);
	border-radius: 4rem;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition-duration: .4s;
	z-index: 2;
	font-weight: bold;
}
#flow .btn.white{
	background-color: var(--white);
	color: var(--darkred);
}

#flow .btn:hover{}

.main-contents{
	position: relative;
	text-align: center;
	width: 100vw; height: 100vh;overflow: hidden;
	background-color: var(--pink2);
}
.main-contents--video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	clip-path: ellipse(140% 80% at 50% 20%);
}
.main-contents-box{
	width: 100%;
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  margin: 0;
	  color: var(--white) !important;
	  font-weight: bold;
	text-align: center;
}
.main-contents--btn{
	display: flex;
	align-items: stretch;
	justify-content: center;
	
}
.main-contents--btn > .btn{
	margin: 0 10px!important;
}
.main-contents--img{width: 70% !important; display: block; margin: 0 auto 2rem;}
.concept-contents{
	background-color: var(--pink2);
	background-image: url("img/bg.png");
	background-repeat: no-repeat;
	background-position: 0 90%;
	background-size: 100%;
}
.concept-contents-wrap{
	display: flex;
	justify-content:center;
}
.concept-contents--img{
	border-radius: 30px;
	margin-top: 49%;
    margin-bottom: 30%;
    width: 80% !important;
}
#flow p.concept-contents--txt{
	font-size: clamp(1.3rem, 1.118rem + 0.91vw, 1.8rem);
	line-height: 1.5; font-weight: bold; margin-top: 53%; margin-left: -297%;}

.point-contents {background-color: var(--pink1);}
.point-contents-tit{color: var(--white);}
.point-contents-box{position: relative;}
.point-contents--img{width: 60%!important; display: block; margin: 0 auto 2rem;}
#flow .btn-circle{
  width: 25px;
  height: 25px;
  border-radius: 50%;
	background-color: var(--red);
	opacity: 90%;
	display: block;
	position: absolute;
	animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
  0%   { opacity: 0.3;}
  100% { opacity: 1; }
}
.point-contents--btn1{top: 2%; left: 29%;}
.point-contents--btn2{bottom: 20%; right: 30%;}
.point-contents--btn3{top: 50%; left: 50%;}
.point-contents--btn4{bottom: 30%; left: 21%;}


.remodal {
	padding: 10% 6%;
	max-width: 500px !important;
	border-radius: 30px !important;
}
.remodal-img{max-width: 400px; width: 100%;}
img[src*="point-tit"]{max-width: 100px; margin: 0 auto 1rem 0; display: block;}
.remodal-tit{
	margin-bottom: 1.5rem; 
	color: var(--red); text-align: left; 
	font-size: clamp(1.8rem, 1.727rem + 0.36vw, 2rem);
}
.remodal-txt{text-align: left; margin-bottom: 1.5rem; }
.remodal-cancel{
	position: absolute;
	top: 3%; right: 6%;
	color: var(--gray);
	background-color: var(--white);
	width: 4rem; height: 4rem; min-width: 20px;
	border-radius: 50%; font-size: 2rem;
	line-height: 1;
}
.embed-container {
  position: relative;
  overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.report-contents{background-color: var(--light-pink);}
.tabs {
  display: flex;
  flex-wrap: wrap;
	
}

.tab_label {
	text-align: center;
  color: var(--darkred);
	background-color: var(--white);
  font-weight: bold;
  position: relative;
  z-index: 1;
  cursor: pointer;
  line-height: 1.2;
  padding: 1rem 0;
  margin: 0; 
	width: 50% !important;
	font-size: 1.2rem;
}

.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
	padding-top: 10%;
	
}
input[name="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #fff;
  background-color: var(--darkred);
	border-radius: 40px;
}
.tabs input:checked + .tab_label::after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content{
  display: block;
}

.tab_content{
  position: relative;
  animation: fadeIn 1s ease;
	text-align: center;
}
#flow .report-contents-tit{text-align: center; line-height: 1.4;}
#flow .report-contents-tit span{font-weight: normal;}
#flow .report-contents-tit strong{font-size: 120%; color: var(--red);display: inline;font-weight: bold;}


.report-contents--message{background: var(--white); border-radius: 30px; padding: 4%; margin-bottom: 1.5rem;}
.report-contents--profile{display: flex;}
.profile-img{width: 28%; }
.profile-name{margin-bottom: 1rem;}
.profile-txt{
	border-top: 1px solid var(--light-gray);
	border-bottom: 1px solid var(--light-gray);
	padding: 1rem 0; line-height: 1.4;
	width: calc(80% - 20px); text-align: left !important; color: var(--gray); }

.care-contents  {background-color: var(--green);color: var(--darkgreen) !important;}
.care-contents-box{
	width: 100%;
	background-color: var(--white);
	border-radius: 30px;
	margin-bottom: 5%;
}
.care-contents--img{border-radius: 30px 30px 0 0;}
.care-contents--txt{padding: 4%;}

.conv-contents{background-color: var(--bgyellow);}
.conv-contents-box{text-align: center; margin-bottom: 5%;}
.conv-contents--tit{text-align: center !important; }
.conv-contents--tit strong{font-size: 120%;font-weight: bold;}
.conv-contents--img{border-radius: 30px;}
.conv-contents--price{margin-bottom: 2rem; text-align: center !important;}
.brand-contents{background-color: var(--white); border-radius: 30px; padding:20% 6%;}
.brand-contents--logo{width: 70% !important; margin: 0 auto 10%; display: block;}
.brand-contents--txt{text-align: center;}

@media screen and (min-width: 1200px) {
	#flow .section-inner{padding: 4%;}
	.flex{display: flex;flex-wrap: wrap;justify-content: center;}
	.flex.flex-center {align-items: center;}
	.flex.flex-stretch{align-items: stretch;}
	.flex.row{flex-direction: row-reverse;}
	#flow h1{font-size: 3.2rem; margin-bottom: 4rem;}
	.remodal {padding: 4%; max-width: 500px !important;}
	.main-contents--img {max-width: 400px !important;}
	.concept-contents{background-position: 0 10%; background-size: 100%;}
	.concept-contents-box {width: 400px;}
	#flow p.concept-contents--txt {line-height: 1.8; margin-top: 15%; margin-left: -50px;}
	.concept-contents--img {margin-top:30%; margin-bottom: 20%; width: 100% !important;}
	.point-contents{padding: 0;}
	.point-contents--img{width: 30%!important;}
	.remodal-cancel{top: 2%; right: 2%; width: 40px; height: 40px; min-width: 40px;}
	#flow .btn-circle{width: 30px; height: 30px;}
	#flow .btn.point-contents--btn{width: 20%; margin: 0 0 0 auto;}
	.point-contents--btn1{top: 2%; left: 39%;}
	.point-contents--btn2{bottom: 20%; right: 40%;}
	.point-contents--btn3{top: 50%; left: 50%;}
	.point-contents--btn4{bottom: 30%; left: 36%;}
	.care-contents-box{width: calc(100% / 3 - 20px); margin: 0 10px 5%;}
	.conv-contents-box,
	.brand-contents-box{width: calc(100% / 2 - 40px); margin: 0 20px 5%;}
	.brand-contents{padding: 6%;}
	.brand-contents--logo{margin-bottom: 0;}
	.brand-contents--txt{text-align: left;}
	.conv-contents--img{width: 80% !important;}
	.tab_label {width: calc(100% / 4) !important;font-size: 1.3rem;}
	.tab_content{padding-top: 5%;}
	.report-contents--profile{width: 60%; margin: 0 auto; align-items: center;}
	#flow .report-contents-tit strong{font-size: 150%;font-weight: bold;}
	#flow .tab_content img,
	#flow .tab_content video{display: block; margin: 0 auto 5%; width: 80%}
	.tabs {justify-content: center;}
	.tabs label:first-of-type{border-radius: 40px 0 0 40px;}
	.tabs label:last-of-type{border-radius: 0 40px 40px 0;}
	
}

.sp-only {
  display: none;
}

@media screen and (max-width: 575px) {
  .sp-only {
    display: block;
  }
}