body {
	font-family: '游ゴシック Medium', '游ゴシック体','ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333f48;
}

h1, h2 {
	font-family: '游ゴシック Medium', '游ゴシック体','ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.c_blue {
	color: #001489;
}
.c_red {
	color: #cd325d;
}
.c_yellow {
	color: #ffff66;
}


/* --------------------------------------------------------------------------------
 marker
-------------------------------------------------------------------------------- */
.js-line {
	display: inline;
	position: relative;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 2px; 
	transition: all 1s ease-in-out;
	padding-bottom: 5px;
}
.js-line.is-inview {
	background-size: 100% 2px; 
}
#FV .fv2 .msg h2 .js-line,
#Trouble .trouble_1 .js-line,
#Trouble .trouble_3 .js-line,
#Levelup .js-line,
.cart h2 .js-line {
	background-image: linear-gradient(90deg, #cd325d, #cd325d);
}
#Trouble .trouble_2 .js-line {
	background-image: linear-gradient(90deg, #fff, #fff);
}


.js-marker {
	display: inline;
	position: relative;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 55%; 
	transition: all 1s ease-in-out;
	padding-bottom: 5px;
}
.js-marker.is-inview {
	background-size: 100% 55%; 
}
#Reason .js-marker {
	background-image: linear-gradient(90deg, #f5dce2, #f5dce2);
}



/* --------------------------------------------------------------------------------
 .wrap
-------------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: 750px;
	margin: auto;
	background: #fff;
}


/* --------------------------------------------------------------------------------
 .cart
-------------------------------------------------------------------------------- */
.cart {
	margin: 0 auto;
	background: #9acbbc;
}
.cart .title {
	padding: 0 0 5rem;
	background: -moz-radial-gradient(#ebf5f2 40%, #c8e1db);
	background: -webkit-radial-gradient(#ebf5f2 40%, #c8e1db);
	background: radial-gradient(#ebf5f2 40%, #c8e1db);
	position: relative;
}
.cart .title h2 {
	font-size: 1.55rem;
	line-height: 1.8;
	text-align: center;
	margin-bottom: 0;
}
.cart .title h2 .js-line {
	font-size: 1.75rem;
	font-weight: 700;
	color: #cd325d;
}
#c_2 .title h2 .js-line {
	font-size: 1.625rem;
}
.cart .cvarea {
	background: -moz-linear-gradient(top, #c8e1db, #9acbbc); 
	background: -webkit-linear-gradient(top, #c8e1db, #9acbbc); 
	background: linear-gradient(to bottom, #c8e1db, #9acbbc);
	padding: 0 1rem 1rem;
	margin-top: -2.5rem;
}
.cart .cvarea .inner {
	text-align: center;
	background: #fff;
	padding: 0 0 1rem;
	margin-bottom: 1rem;
	filter: drop-shadow(0px 0px 40px rgba(197,207,220,0.6));
	transform: translateZ(0);
	position: relative;
}
.cart .cvarea .inner .label {
	font-size: 1.125rem;
	color: #fff;
	padding: .25rem .75rem;
	background: #cd325d;
	position: absolute;
	top:-1.25rem;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.cart .cvarea .inner h3 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 0;
}
.cart .cvarea .inner .name {
	width: 100%;
	position: absolute;
	top: 4%;
	left: 0;
}
.cart .cvarea .inner .name .name_en {
	font-family: '游明朝' , 'Yu Mincho',YuMincho,  "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", 'Hiragino Mincho ProN','Hiragino Mincho Pro',HGS明朝E,メイリオ,Meiryo,serif;
	position: relative;
	display: inline-block;
	padding: 0 1.75rem;
}
  
.cart .cvarea .inner .name .name_en:before,
.cart .cvarea .inner .name .name_en:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 1.25rem;
	height: 1px;
	background-color: #333f48;
}
.cart .cvarea .inner .name .name_en:before {
	left:0;
}
.cart .cvarea .inner .name .name_en:after {
	right: 0;
}
.cart .cvarea .inner .item {
	width: 100%;
}
.cart .cvarea .inner .pricebox {
	width: 90%;
	text-align: center;
	margin: -1rem auto 0;
}
.cart .cvarea .inner .btn {
	filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.25));
	transform: translateZ(0);
	margin: 1rem auto;
	display: block;
}
.cart .cvarea .notice {
	font-size: 0.75rem;
	text-align: center;
	font-family: '游ゴシック Medium', '游ゴシック体','ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	margin-top: 0.5rem;
}
.cart .cvarea .note {
	font-size: 0.75rem;
	text-align: left;
	font-family: '游ゴシック Medium', '游ゴシック体','ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #fff;
	margin-top: 0.5rem;
}
/*重なり*/
.cart .title.layered {
	padding-top: 5rem;
	margin-top: -5rem;
}



/* --------------------------------------------------------------------------------
 #FV
-------------------------------------------------------------------------------- */
#FV {
	filter: drop-shadow(0px 15px 8px rgba(0,0,0,0.05));
	transform: translateZ(0);
	position: relative;
	z-index: 2;
}
#FV .logo {
	width: 20%;
	position: absolute;
	top: 10px;
	left: 4%;
	z-index: 2;
}
#FV .title {
	position: relative;
	padding: 1.75rem 0 1rem;
	background-color: #fff;
}
#FV .title .circle {
	display: flex;
	justify-content: center;
	margin-bottom: .5rem;
}
#FV .title .circle li {
    font-size: 0.85rem;
	font-weight: 700;
    color: #fff;
    line-height: 1.2;
	text-align: center;
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9acbbc;
    border-radius: 50%;
	margin: 0 0.25rem;
}
#FV .title h1 {
	font-size: 1.4rem;
	font-weight: 700;
	color: #333f48;
	text-align: center;
	letter-spacing: .1rem;
	width: 100%;
}
#FV .fv1 {
	position: relative;
}
#FV .fv1 .item {
	width: 52%;
	position: absolute;
	bottom: 18%;
    left: 4%;
}
#FV .fv1 .model {
	font-size: 0.75rem;
	position: absolute;
	text-align: right;
	top: 65%;
	right: 4%;
	filter: drop-shadow(0px 0px 10px rgba(246,223,211,1)) drop-shadow(0px 0px 10px rgba(246,223,211,1));
	transform: translateZ(0);
}
#FV .fv1 .kome {
	position: absolute;
	text-align: right;
	top: 72%;
	right: 4%;
}

#FV .fv2 {
	position: relative;
}
#FV .fv2 .msg {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 8%;
	left: 0;
}
#FV .fv2 .msg p {
	font-size: 1.625rem;
	line-height: 1;
}
#FV .fv2 .msg h2 {
	font-size: 3rem;
	color: #cd325d;
}


/* --------------------------------------------------------------------------------
 #Trouble
-------------------------------------------------------------------------------- */
#Trouble {
	padding-top: 0;
	background-color: #fafafa;
	text-align: center;
}
#Trouble .trouble_1 {
	position: relative;
}
#Trouble .trouble_1  h2 {
	font-size: 1.875rem;
	line-height: 1.25;
	position: absolute;
	top: 5%;
	width: 100%;
}
#Trouble .trouble_2 {
	position: relative;
}
#Trouble .trouble_2 .txt_1 {
	width: 100%;
	font-size: 1.3125rem;
	font-weight: 400;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 3%;
	left: 0;
}
#Trouble .trouble_2 .txt_2 {
	width: 100%;
	font-size: 1.625rem;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 7%;
	left: 0;
}
#Trouble .trouble_2 .txt_3 {
	width: 52%;
	font-size: 1.625rem;
	text-align: left;
	position: absolute;
	top: 61%;
	right: 4%;
}

#Trouble .trouble_3 {
	position: relative;
}
#Trouble .trouble_3 .txt_1 {
	width: 100%;
	font-size: 1.3rem;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 4%;
	left: 0;
}
#Trouble .trouble_3 .txtbox_1 {
	width: 100%;
	position: absolute;
	top: 12%;
	left: 0;
	text-align: center;
}
#Trouble .trouble_3 .txt_2 {
	font-size: 2rem;
	color: #cd325d;
	line-height: 1.7;
	margin-bottom: .5rem;
}
#Trouble .trouble_3 .txt_3 {
	width: 100%;
	font-size: 1.875rem;
}
#Trouble .trouble_3 .txtbox_2 {
	width: 100%;
	position: absolute;
	bottom: 2%;
	left: 0;
	text-align: center;
}
#Trouble .trouble_3 .txt_4 {
	font-size: 1.1875rem;
}
#Trouble .trouble_3 .txt_5 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #cd325d;
	line-height: 1.7;
}

#Trouble .trouble_4 {
	position: relative;
}
#Trouble .trouble_4 .txt_1 {
	width: 100%;
	font-size: 1.875rem;
	line-height: 1.5;
	text-align: left;
	padding-left: 6%;
	position: absolute;
	top: 20%;
	left: 0;
}
#Trouble .trouble_4 .txt_2 {
	width: 62%;
	font-size: 0.75rem;
	text-align: right;
	position: absolute;
	top: 41%;
	left: 0;
}


/* --------------------------------------------------------------------------------
 #Step
-------------------------------------------------------------------------------- */
#Step .step_1 {
	position: relative;
}
#Step .step_1 .txt {
	font-size: 0.875rem;
	position: absolute;
	top: 65%;
	right: 8%;
}

#Step .step_2 {
	position: relative;
}
#Step .step_2 .txt {
	font-size: 0.875rem;
	position: absolute;
	top: 30%;
	left: 8%;
}

#Step .step_3 {
	position: relative;
}
#Step .step_3 .txt {
	font-size: 0.875rem;
	position: absolute;
	top: 28%;
	right: 8%;
}
#Step .step_3 .mov {
	width: 72vw;
	max-width: 450px;
	position: absolute;
	clip-path:circle(32% at 50% 48%);
	top: 60%;
	right: 0;
}


/* --------------------------------------------------------------------------------
 #Levelup
-------------------------------------------------------------------------------- */
#Levelup {
	position: relative;
	z-index: 3;
}
#Levelup .title {
	position: relative;
}
#Levelup .title p {
	font-size: 1.625rem;
	position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
#Levelup .inner {
	text-align: center;
	margin-top: -2rem;
	position: relative;
}
#Levelup .inner h2 {
	font-size: 1.75rem;
	font-weight: 400;
	text-align: center;
	color: #cd325d;
	line-height: 1.8;
	margin-bottom: 1rem;
	position: relative;
}
#Levelup .inner h2 span {
	z-index: 2;
	position: relative;
}
#Levelup .inner h2 .step {
	display: inline-block;
	width: 38%;
	max-width: 240px;
	margin-left: 1rem;
	vertical-align: -6%;
}
#Levelup .inner h2 .arrow {
	width: 40%;
	position: absolute;
	top: -32%;
	left: 52%;
    max-width: 240px;
}
#Levelup .inner h3 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #cd325d;
}
#Levelup .inner .txt_1 {
	font-size: 1.35rem;
	margin-bottom: .5rem;
}
#Levelup .inner .img_1 {
	width: 92%;
	margin: 1rem auto;
}
#Levelup .inner .txt_2 {
	width: 100%;
	font-size: 1.35rem;
	position: absolute;
	bottom: 2%;
	left: 0;
}
#Levelup .inner .img_2 {
	margin-top: 1rem;
	filter: drop-shadow(0px 15px 8px rgba(0,0,0,0.05));
	transform: translateZ(0);
}


/* --------------------------------------------------------------------------------
 #Comparison
-------------------------------------------------------------------------------- */
#Comparison {
	padding: 2rem 1rem;
}

/* --------------------------------------------------------------------------------
 #Point
-------------------------------------------------------------------------------- */
#Point {
	background-color: #f6f6f6;
	margin-bottom: 2rem;
}
#Point .point_cnt {
	padding-bottom: 2rem;
}
#Point .point_1 {
	margin-top: -4.5rem;
}
#Point .point_cnt .title {
	position: relative;
}
#Point .point_cnt .title  h2 {
	width: 100%;
	font-size: 1.5rem;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 0;
}
#Point .point_cnt .inner {
	width: 90%;
	margin: -3rem auto 1rem;
	background-color: #fff;
	padding: 1rem 1rem 2rem;
	filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.05));
	transform: translateZ(0);
}
#Point .point_cnt .inner h3 {
	font-size: 1.875rem;
	text-align: center;
	margin-bottom: 1rem;
}
#Point .point_cnt .inner h3 span {
	font-size: 120%;
	color: #cd325d;
}
#Point .point_cnt .inner p {
	text-align: center;
	line-height: 2;
}
#Point .point_1 .doctor {
	position: relative;
}
#Point .point_1 .doctor img {
	width: 100%;
}
#Point .point_1 .doctor .left {
	font-size: 1.75rem;
	line-height: 1.35;
	letter-spacing: 5px;
	text-align: center;
	position: absolute;
	top: 6%;
    left: 7%;
    width: 34.5%;
    height: 34.5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#Point .point_1 .doctor .right {
	font-size: 1.75rem;
	line-height: 1.35;
	letter-spacing: 5px;
	text-align: center;
	position: absolute;
	top: 6%;
    right: 5%;
    width: 34.5%;
    height: 34.5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#Point .point_1 .name {
	width: 100%;
	padding: .5rem 0 1rem;
	display: flex;
}
#Point .point_1 .name p {
	flex: 1;
	font-size: 0.8125rem;
	text-align: center;
}
#Point .point_2 .levelup {
	position: relative;
}
#Point .point_2 .levelup p {
	font-size: 0.6875rem;
	text-align: left;
	position: absolute;
	bottom: 5%;
	right: 4%;
}
#Point .point_2 .levelup p span {
	position: relative;
}
#Point .point_2 .levelup p span::before {
	content: "※";
	position: absolute;
	top: -9%;
	left: -18%;
}
#Point .point_4 {
	padding-bottom: 0;
}
#Point .point_4 .inner {
	margin-bottom: 1rem;
}
#Point .point_3 .inner img,
#Point .point_4 .inner img {
	margin-bottom: 1.5rem;
}
#Point .solution {
	font-size: 1.3125rem;
	text-align: center;
	padding-bottom: 1rem;
	background: -moz-linear-gradient(top, #f6f6f6, #f9f9f9); 
	background: -webkit-linear-gradient(top, #f6f6f6, #f9f9f9); 
	background: linear-gradient(to bottom, #f6f6f6, #f9f9f9);
}
#Point .solution span {
	font-size: 1.625rem;
	color: #fff;
	background-color: #9acbbc;
	padding: 2px;
}

/* --------------------------------------------------------------------------------
 #Merit
-------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------
 #Reason
-------------------------------------------------------------------------------- */
#Reason h3 {
	text-align: center;
	background-color: #9acbbc;
	height: 6.25rem;
	position: relative;
} 
#Reason h3:before,
#Reason h3:after { 
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	content:'';
	width: 2rem;
	height: 4.25rem;
	border-top: solid 1px #ecf2ef;
	border-bottom: solid 1px #ecf2ef;
	display: inline-block;
}
#Reason h3:before {
	border-left: solid 1px #ecf2ef;
	left: 4%;
}
#Reason h3:after {
	content: '';
	border-right: solid 1px #ecf2ef;
	right: 4%;
}
#Reason h3 span {
	width: 92%;
	font-size: 1.8125rem;
	color: #ecf2ef;
	line-height: 1.25;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
} 
#Reason .inner {
	background-color: #fff;
	padding: 2rem 1rem;
}
#Reason .inner .illust {
	display: block;
	margin: 1rem auto;
}
#Reason .inner .balloon_top {
    position: relative;
    padding: 1rem;
    border: 1px solid #cd325d;
}
#Reason .inner .balloon_top p {
	margin: 0;
	padding: 0;
}
#Reason .inner .balloon_top:after {
	position: absolute;
	top: -1.5rem;
	left: 30%;
	transform: skew(35deg);
	height: 1.5rem;
	width: 15px;
	border-right: 1px solid #cd325d;
	background-color: #fff;
	content: "";
}

#Reason .inner .balloon_top {
    position: relative;
    padding: 1rem;
    border: 1px solid #cd325d;
}
#Reason .inner .balloon_top:after {
	position: absolute;
	top:-1.5rem;
	left: 35%;
	transform: skew(35deg);
	height: 1.5rem;
	width: 15px;
	border-right: 1px solid #cd325d;
	background-color: #fff;
	content: "";
}
#Reason .inner .balloon_top p {
	margin: 0;
	padding: 0;
	letter-spacing: .1rem;
}

#Reason .inner .balloon {
	width: 90%;
    position: relative;
    padding: 1rem;
    border: 1px solid #cd325d;
}
#Reason .inner .balloon:after {
	position: absolute;
	top: 55%;
	height: 1.5rem;
	width: 1rem;
	background-color: #fff;
	content: "";
}
#Reason .inner .balloon p {
	margin: 0;
	padding: 0;
	letter-spacing: .1rem;
}
#Reason .inner .bln_left {
	margin: 0 0 1.5rem auto;
}
#Reason .inner .bln_left:after {
	left: calc(-0.75rem - 1px);
	transform: skew(-45deg);
	border-left: 1px solid #cd325d;
}
#Reason .inner .bln_right {
	margin: 0 auto 1.5rem 0;
}
#Reason .inner .bln_right:after {
	right: calc(-0.75rem - 1px);
	transform: skew(45deg);
	border-right: 1px solid #cd325d;
}
#Reason .kome {
	margin-top: .5rem;
}


/* --------------------------------------------------------------------------------
 #Clinic
-------------------------------------------------------------------------------- */
#Clinic .inner {
	padding: 2rem 1rem;
	background-color: #ecf2ef;
	position: relative;
	z-index: 2;
}
#Clinic .inner::after {
	width: 1px;
	height: 3rem;
	content: "";
	background-color: #333f48;
	position: absolute;
	bottom: -1.5rem;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#Clinic .inner h2 {
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.8;
}
#Clinic .inner p {
	letter-spacing: .1rem;
}
#Clinic .inner .pic {
	width: 100%;
	margin: 1.5rem auto;
}
#Clinic .inner .doctor {
	width: 100%;
	margin: 1.5rem auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background-color: #fff;
	position: relative;
}
#Clinic .inner .doctor div {
	width: 50%;
}
#Clinic .inner .doctor div img {
	width: 100%;
}
#Clinic .inner .doctor .text {
	font-size: 0.6875rem;
	letter-spacing: .1rem;
	padding: .7rem 1rem;
}
#Clinic .inner .doctor div p {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
#Clinic .inner .doctor .cross {
	width: 65%;
	position: absolute;
	top:33.7%;
	left:9.5%;
}
#Clinic .kv {
	background: #fff;
	padding: 8rem 0 0;
	position: relative;
}
#Clinic .kv .msg {
	position: absolute;
	top: 14%;
	left: 10%;
}
#Clinic .kv .msg h3 {
	font-size: 1.8125rem;
	color: #fff;
	line-height: 1.8;
	margin-bottom: .5rem;
}
#Clinic .kv .msg h3 span {
	background-color:#9acbbc;
	padding: .25rem;
}
#Clinic .kv .msg p {
	font-size: 1.4375rem;
}