@charset "utf-8";

/* font family */
.f_yg {font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;}
.f_ym {font-family: "游明朝", "YuMincho","ヒラギノ明朝 ProN","ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

/* font size */
.f20 {font-size: min(20px, calc(calc(20/750) * 100vw));}/*20px*/
.f28 {font-size: min(28px, calc(calc(28/750) * 100vw));}/*28px*/
.f30 {font-size: min(30px, calc(calc(30/750) * 100vw));}/*30px*/
.f32 {font-size: min(32px, calc(calc(32/750) * 100vw));}/*32px*/
.f40 {font-size: min(40px, calc(calc(40/750) * 100vw));}/*40px*/
.f50 {font-size: min(50px, calc(calc(50/750) * 100vw));}/*50px*/

/* line-height */
.lh120 { line-height:120%;}
.lh140 { line-height:140%;}
.lh160 { line-height:160%;}

/* color */

/* bold */
strong,.strong { font-weight:bold;}

/* normal */
.fw_normal { font-weight:normal !important;}

/* align */
.txt_c{ text-align:center;}
.txt_r{ text-align:right;}

/* display */
.block {
	display: block;
}

/* img */
img {
	vertical-align: bottom;
	height: auto;
}

/* li */
li {
	list-style: none;
}

/* マージン */
.mt5 { margin-top:5px;}
.mt10 { margin-top: min(10px, calc(calc(10/750) * 100vw));}
.mt20 { margin-top: min(20px, calc(calc(20/750) * 100vw));}
.mt30 { margin-top: min(30px, calc(calc(30/750) * 100vw));}
.mt40 { margin-top: min(40px, calc(calc(40/750) * 100vw));}
.mt50 { margin-top: min(50px, calc(calc(50/750) * 100vw));}
.mt60 { margin-top: min(60px, calc(calc(60/750) * 100vw));}
.mt100 { margin-top: min(100px, calc(calc(100/750) * 100vw));}
.mt150 { margin-top: min(150px, calc(calc(150/750) * 100vw));}

.mb40 { margin-bottom: min(40px, calc(calc(40/750) * 100vw));}
.mb50 { margin-bottom: min(50px, calc(calc(50/750) * 100vw));}
.mb60 { margin-bottom: min(60px, calc(calc(60/750) * 100vw));}
.mb190 { margin-bottom: min(190px, calc(calc(190/750) * 100vw));}

.pt100 { padding-top: min(100px, calc(calc(100/750) * 100vw))!important;}
.pb60 { padding-bottom: min(60px, calc(calc(60/750) * 100vw))!important;}
.pb100 { padding-bottom: min(100px, calc(calc(100/750) * 100vw))!important;}
.pb110 { padding-bottom: min(110px, calc(calc(110/750) * 100vw))!important;}

.yellow_under {
	background: linear-gradient(transparent 50%, #fff783 50%);
}

.text_80 {
	font-size: 80%;
}

/* 幅 */

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

.inner {
	padding: 0 min(25px, calc(calc(25/750) * 100vw));
}

.inner35 {
	padding: 0 min(35px, calc(calc(35/750) * 100vw));
}

/* ---------------------------------------------------------
fv
--------------------------------------------------------- */

.fv_price {
	display: flex;
	justify-content: center;
}

.fv_price img {
	width: min(362px, calc(calc(362/750) * 100vw));
}

.fv_btn {
	display: flex;
	justify-content: space-between;
}

/* ---------------------------------------------------------
reason
--------------------------------------------------------- */

.reason {
	background-image: url(../img/reason_bg.png);
	background-size: contain;
}

.reason_arrow {
	margin-top: -90px;
	position: relative;
}

@media only screen and (max-width: 750px) {
	.reason_arrow {
		margin-top: -12vw;
	}
}

/* ---------------------------------------------------------
problem
--------------------------------------------------------- */

.problem_which {
	margin-top: -90px;
}

@media only screen and (max-width: 750px) {
	.problem_which {
		margin-top: -12vw;
	}
}

.problem li {
	position: relative;
}

.problem .video01 {
	width: min(560px, calc(calc(560/750) * 100vw));
	position: absolute;
	top: 368px;
	right: 0;
	left: 0;
	margin: auto;
}

.problem .video02 {
	width: min(315px, calc(calc(315/750) * 100vw));
	position: absolute;
	top: 325px;
	right: 0;
	left: 0;
	margin: auto;
}

/* ---------------------------------------------------------
loopSlide
--------------------------------------------------------- */

.loopSlide {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
	background-color: #efcc6d;
	padding: min(20px, calc(calc(20/750) * 100vw)) 0;
}

.loopSlide ul {
	padding: 0;
	display: flex;
	flex-shrink: 0;
}

.loopSlide ul:first-child {
	animation: slide1 60s -30s linear infinite;
}

.loopSlide ul:last-child {
	animation: slide2 60s linear infinite;
}

@media only screen and (min-width: 751px) {
	.loopSlide:hover ul {
		animation-play-state: paused;
	}
}

.loopSlide ul li {
	display: inline-block;
	width: 100%;
	min-width: min(400px, calc(calc(400/750) * 100vw));
	margin-right: min(20px, calc(calc(20/750) * 100vw));
	list-style: none;
	text-align: center;
}

.loopSlide ul li img {
	display: block;
	width: 100%;
	height: auto;
}

@keyframes slide1 {
    0% {
        transform: translateX(100%);
    }
 
    to {
        transform: translateX(-100%);
    }
}
 
@keyframes slide2 {
    0% {
        transform: translateX(0);
    }
 
    to {
        transform: translateX(-200%);
    }
}

/* ---------------------------------------------------------
price
--------------------------------------------------------- */

.price {
	background-image: url(../img/price_bg.png);
	background-size: contain;
	padding-bottom: min(460px, calc(calc(460/750) * 100vw));
}

.safe {
	position: absolute;
	top: -438px;
	left: 0;
	width: min(737px, calc(calc(737/750) * 100vw));
}

/* ---------------------------------------------------------
suggestion
--------------------------------------------------------- */

.suggestion {
	position: relative;
	background: linear-gradient(to bottom, #ffffec, #fffff5);
}

/* ---------------------------------------------------------
flow
--------------------------------------------------------- */

.flow_box {
	background-image: url(../img/flow_bg.png);
	background-size: contain;
}

/* ---------------------------------------------------------
clinic
--------------------------------------------------------- */

.clinic_img {
	width: 100%;
}

.clinic_box {
	border: 4px solid #ed71b2;
}

@media only screen and (max-width:750px){
	.clinic_box {
		border: 2px solid #ed71b2;
	}
}

.clinic_button {
	background-color: #ed71b2;
	position: relative;
	height: min(80px, calc(calc(80/750) * 100vw));
}

.clinic_button_text {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.clinic_button_icon {
	background-color: #fff;
	width: min(30px, calc(calc(30/750) * 100vw));
	height: min(30px, calc(calc(30/750) * 100vw));
	display: block;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: min(30px, calc(calc(30/750) * 100vw));
	bottom: 0;
	margin: auto;
}

.clinic_button_icon::before {
	content: "";
	display: block;
	width: min(20px, calc(calc(20/750) * 100vw));
	height: min(4px, calc(calc(4/750) * 100vw));
	background-color: #ed71b2;
	position: absolute;
	top: 50%;
	-webkit-transform: translateX(5px) translateY(-2px);
	transform: translateX(5px) translateY(-2px);
}

.clinic_button_icon::after {
	content: "";
	display: block;
	width: min(4px, calc(calc(4/750) * 100vw));
	height: min(20px, calc(calc(20/750) * 100vw));
	background-color: #ed71b2;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-2px) translateY(5px);
	transform: translateX(-2px) translateY(5px);
}

.current .clinic_button_icon::after {
	visibility:hidden;
}

.clinic_flex {
	display: flex;
}

.clinic_icon_map {
	margin-right: min(27px, calc(calc(27/750) * 100vw));
	margin-top: min(6px, calc(calc(6/750) * 100vw));
	height: min(30px, calc(calc(30/750) * 100vw));
}

.clinic_icon_time {
	margin-right: min(20px, calc(calc(20/750) * 100vw));
	margin-top: min(6px, calc(calc(6/750) * 100vw));
	height: min(28px, calc(calc(28/750) * 100vw));
}

.clinic_train {
	background-color: #fffff1;
	padding: min(30px, calc(calc(30/750) * 100vw)) min(35px, calc(calc(35/750) * 100vw));
}

.clinic_bold {
	font-weight: 700;
	color: #ed71b2;
}

.clinic_director {
	height: min(40px, calc(calc(40/750) * 100vw));
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ed71b2;
	color: #fff;
	margin-right: min(30px, calc(calc(30/750) * 100vw));
	padding: 0 min(24px, calc(calc(24/750) * 100vw));
	border-radius: min(20px, calc(calc(20/750) * 100vw));
}

/* ---------------------------------------------------------
docter
--------------------------------------------------------- */

.docter_container {
	border: 4px solid #ed71b2;
	border-top: none;
}

@media only screen and (max-width:750px){
	.docter_container {
		border: 2px solid #ed71b2;
	}
}

.docter_title {
	height: min(80px, calc(calc(80/750) * 100vw));
	background-color: #ed71b2;
	color: #fff;
	display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------------------------------------------------------
copyright
--------------------------------------------------------- */

.copyright {
    text-align: center;
	color: #333;
}

.fixed {
	width: 100%;
	position: fixed;
	z-index: 100;
	height: 150px;
	left: 0;
	bottom: 0;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.fixed_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/* gap: min(10px, calc(calc(10/750) * 100vw)); */
}

.cv_btn .tel {
	position: absolute;
	top: 10px;
	left: 115px;
}

.cv_btn .line {
	position: absolute;
	top: 10px;
	left: 390px;
}