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

html{
    font-size: 62.5%;
}

a{
	color:#2a2a2a;
	text-decoration:none;
    transition: 0.3s opacity ease;
}

a:hover{
	opacity: 0.8;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
	font-size: 1.8rem;
    line-height: 1.5;
	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";
    color: #2a2a2a;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 400;
    background: #d8f1ed;
	font-family: 'Noto Sans JP', sans-serif;
}

#wrapper{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

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



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

.pr{
    position: relative;
}

.btn01{
    position: absolute;
    bottom: 1.25%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.btn01:hover{
	opacity: 0.9;
}

.btn01 img{
    width: 90%;
	filter: drop-shadow(4px 4px 4px #83c5cf);
    margin: 0 auto;
}

.btn02 img{
    width: 90%;
	margin: 0 auto;
}

.cta{
	padding-top: 5%;
}


#price1{
    background-color: #083264;
    padding:10px 0 30px;
}

#price2{
    width: 90%;
    margin:auto;
}

	
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

.title h2{
	display: inline-block;
}

.note{
	font-size: 0.9em;
}
/* =====================================
	改行指示
===================================== */
@media screen and (max-width:640px) {
	.pc {
		display: none;
	}
}
@media screen and (min-width:641px) {
	.sp {
		display: none;
	}
}

/* --------------------------------------------------------
	クーポンコード
-------------------------------------------------------- */
#coupon {
    background: #fdfaf5;
	padding-bottom: 5%;
}
.coupon_wrap {
display: flex;
    justify-content: space-evenly;
	padding: 0 2%;
    margin-bottom: 5%;
}
.coupon_wrap p {
    width: 80%;
    margin: 0 auto 15px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.05em;
}
.coupon_wrap img:hover {
opacity: 0.8;
}
/* --------------------------------------------------------
	キャンペーン割引価格について
-------------------------------------------------------- */
#plan {
background: #b5e5e2;
    padding: 5% 2.666% 5%;
}
#plan h2 {
margin: 6% auto;
    width: 32.733%;
}
#plan ul li {
margin-bottom: 1.5%;
}

/* --------------------------------------------------------
	全額保証制度
-------------------------------------------------------- */
#security {
  position: relative;
}
#security h2, #security h3, #security p {
  position: absolute;
  width: 82.733%;
  left: 50%;
  transform: translateX(-50%);
}
#security h2 {
    top: 9.248%;
    width: 79.733%;
}
#security h3 {
  top: 56.648%;
}
#security h3 span.text_link {
  display: block;
  text-align: center;
  font-size: min(calc(30/750*100vw), 2.95rem);
  font-weight: bold;
  margin-top: 2%;
}
#security h3 span.text_link a {
  color: #01AEB9;
  text-decoration: underline;
}
#security p {
  top: 82.648%;
}
/* --------------------------------------------------------
	治療事例
-------------------------------------------------------- */
#BA_contents {
background: repeating-linear-gradient(-45deg, #1cb1d0, #1cb1d0 2px, #00a7ca 0, #00a7ca 8px);
    padding: 5% 2.666% 10%;
}
#BA_contents h2 img {
    width: 100%;
    height: auto;
}
#BA_contents ul li {
margin-bottom: 3.5%;
}
#BA_contents ul li p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 100;
    padding: 2%;
}
/* --------------------------------------------------------
	選ばれる理由
-------------------------------------------------------- */
#merit {
    padding: 5% 2.666% 10%;
	background: #fff;
}
#merit h2 {
margin: 10% 3% 0;
}
#merit h2 img {
width: 100%;
}
.merit_read {
margin: 8% 0;
}
.merit_read img {
width: 100%;
}
.merit_list li {
margin: 5% 0;
}

/* =====================================
	こんなお悩み抱えていませんか？
===================================== */
#check {
	background: #eaeaea;
    padding: 15% 3% 15% 3%;
}

.checkbox{
	border: 2px solid #00819d;
	border-radius: 10px;
	overflow: hidden;
}

.checkbox .checkbox_ttl{
  background: #00819d;
}


.checkbox h3{
	color: #FFF;
    text-align: center;
    margin: 0;
    padding: 2%;
    font-size: 1.4em;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.checkbox .inner{
	 background: #FFF;
	padding: .5em;
}

.checkbox .inner ul {
	padding: 0 15%;
    font-size: 1.2em;
    font-weight: 400;
    color: #3c3c3c;
    padding-top: 2%;
    padding-bottom: 2%;
}

.checkbox .inner ul li {
	padding-left: 8%;
    line-height: 1.5em;
    background: url(../img/icon_check.png) left 0px top 4.5px no-repeat;
    background-size: 1em auto;
}

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

#check .arrow{ 
	margin-top: 3%;
    padding-left: 45%;
}

#check .txt-check-important {
	color: #3c3c3c;
	text-align: center;
	font-size:1.3em;
	font-weight: bolder;
	line-height: 1.8;	
	margin-bottom: 6%;
}

#check .txt-check-important span{
	color: #3c3c3c;
	text-align: center;
	font-size: 1.8em;
	font-weight: revert;
	line-height: 1.8;	
	margin-bottom: 6%;
}

@media screen and (min-width:641px) {
#check .txt-check-important .dot {
  padding-top: .5em;
  background-position: top 2px left;
  background-repeat: repeat-x;
  background-size: 1em 1em;
  background-image: radial-gradient(#ff2428 13%, transparent 16%);
  -webkit-appearance: none;
}
}

@media screen and (max-width:640px) {
#check .txt-check-important .dot {
  padding-top: .5em;
  background-position: top -4px left;
  background-repeat: repeat-x;
  background-size: 1em 1em;
  background-image: radial-gradient(#ff2428 13%, transparent 16%);
  -webkit-appearance: none;
}
}

#check .txt-background-yellow span{
	color: #3c3c3c;
	text-align: center;
	font-size: 2em;
	font-weight: bolder;
    letter-spacing: 0.05em;
	line-height: 1.8;	
	margin-bottom: 8%;
	background: linear-gradient(transparent 0%, #ffe500 0%);
}

/* =====================================
	4つの理由、オンラインだから
===================================== */
#reason {
	background: #ffffff;
    padding: 20% 3% 15% 3%;
}

#reason .title{
    margin-bottom: 7%;
    width: 95%;
    padding-left: 6%;
}

#reason .txt{
    margin-bottom: 3%;
}

#reason .onlin_title{ 
    padding-left: 22%;
    margin-top: 15%;
    margin-bottom: 5%;
}

#reason .txt_onlin{ 
	padding: 3%;
}

@media screen and (max-width:640px) {
	#reason .onlin_title{ 
		width: 83%;
		padding-left: 18%;
		margin-top: 15%;
		margin-bottom: 5%;
}
}


/* =====================================
	処方する主なAGA治療薬
===================================== */

#medicine {
	background: #e2f5f4;
    padding: 20% 3% 20% 3%;
	text-align: center; 
}

#medicine .slide{
	margin-bottom: 15%;
}


#medicine .title{
	margin-bottom: 6%;
	text-align: center;      
	width: 83%;
    padding-left: 15%;
}

#medicine .txt{
	background-color: #00829d;
	border-radius: 10px;
	
}

#medicine .txt p{
	color: #FFFFFF;
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1.2;	
	padding: 4%; 
	margin-bottom: 2%;
}

#medicine .small{
	color: #3c3c3c;
	font-size: small;
	font-weight: bolder;
	line-height: 1.2;	
	padding: 4%; 
}

#reason .dmm_txt{
	text-align: center;
}

/* =====================================
	処方する主なAGA治療薬_スライダー
===================================== */

.slick-prev, .slick-next {
    width: 8.75%;
    height: 8.75%;
    z-index: 99999;
}

.slick-prev {
    left: 4.6875%;
    background: url("../img/prev01.png") no-repeat center;
    background-size: contain;
}

.slick-next {
    right: 4.6875%;
    background: url("../img/next01.png") no-repeat center;
    background-size: contain;
}

.slick-dots {
	bottom: -5%;
    width: 80%;
}

/* dotsの色を変える */
/* dotsのサイズを変える */
.slick-dots li.slick-active button:before {
	border: 1px solid #00829d;
	background-color: #00829d;
	margin-top: 0px;
}

@media screen and (min-width:641px) {
	.slick-dots li button:before {
		width: 60%;
		height: 60%;
		border-radius: 60%;
		border: 1px solid #00829d;
	}
	.slick-dots li {
		width: 2vw;
		height: 2vw;
		margin: 0 2vw;
	}
}

@media screen and (max-width:640px) {
.slick-dots li button:before {
    background: #e2f5f4;
    border: 1px solid #00829d;
	width: 2vw;
    height: 2vw;
    border-radius: 2vw;
}

.slick-dots li {
    width: 2vw;
    height: 2vw;
    margin: 0 2vw;
}
}
/* =====================================
	AGAは進行性です
===================================== */

#explain {
	background: #00829d;
    padding: 20% 3% 20% 3%;
	text-align:center;
}

#explain .title{
	margin-bottom: 6%;
	text-align: center;
	width: 88%;
    padding-left: 12%;
}

#explain .txt{
	color: #FFF;
	font-size: 1.5em;
	font-weight: 300;
    letter-spacing: 0.05em;
	line-height: 1.5;	
	margin-bottom: 8%;
}


/* =====================================
	AGAの原因とは
===================================== */
#cause {
	background: #FFF;
    padding: 20% 3% 15% 3%;
	text-align:center;
}

#cause .title{
	margin-bottom: 6%;
	width: 85%;
    padding-left: 16%;
}

#cause .txt{
	margin-bottom: 8%;
}

#cause .txt p{
	color: #3c3c3c;
	font-size: 1.3em;
	margin-bottom: 6%;
	font-weight: bolder;
	letter-spacing: 0.05em;
	line-height: 1.5;	
}

#cause .img p{
	margin-bottom: 8%;
}
/* =====================================
	市販薬の育毛剤とAGAの治療薬の違い
===================================== */
#comparison {
	background: #e2f5f4;
    padding: 20% 3% 15% 3%;
	text-align:center;
	position:relative;
}
#comparison::after {
contents:"";
display:block;
  width: 100%;
  height: 0;
  border-style: solid;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 60px solid #555555;
  border-bottom: 0;
}
#comparison .title{
	margin-bottom: 6%;
    width: 95%;
    padding-left: 7%;
}

#comparison .txt{
	margin-bottom: 6%;
}

#comparison .txt01{
    margin-bottom: 4%;
}

#comparison .txt01 p{
	color: #3c3c3c;
	font-size: 1.3em;
	margin-bottom: 6%;
	font-weight: bolder;
	letter-spacing: 0.05em;
	line-height: 1.5;	
}

#comparison .txt02{
	color: #3c3c3c;
    font-size: 1.4em;
    letter-spacing: 0.05em;
    margin: 0 5%;
    margin-bottom: 8%;
    background-color: #C6EBE8;
    padding: 3%;
    border-radius: 10px;
}

#comparison .txt02 p{
	font-weight: bold;
}

#comparison .img .table{
	margin-bottom: 5%;
}
/* =====================================
	料金一覧
===================================== */
#price {
	background: #FFF;
    padding: 20% 3% 14% 3%;
	text-align:center;
}

#price .title{
	margin-bottom: 6%;
	width: 70%;
    padding-left: 28%;
}

#price .txt p{
	margin-bottom: 6%;
}

#price .note{
	margin-top: -4%;
}

/* =====================================
	使い方
===================================== */
#flow {
	background: #c8e9e4;
    padding: 20% 3% 14% 3%;
	text-align:center;
}

#flow .title{
	margin-bottom: 6%;
    width: 90%;
    padding-left: 11%;
}

#flow .txt{
	margin-bottom: 6%;
}

#flow .margin-bottom{
	margin-bottom: 3%;
}

#flow .txt .step{
	background-color: #FFF;
	padding: 10%;
    border-radius: 10px;
}

#flow .txt .label{
	background-color: #00829D;
    color: #FFF;
    padding: 1%;
    border-radius: 90px;
    font-size: 1.4em;
	width: 45%;
    margin: 0 auto;
}

#flow .txt .sub-title{
	padding: 5%;
}

#flow .txt .sub-title p{
	font-size: 2em;
    font-weight: bolder;
	color: #00829D;
}

#flow .txt .sub-txt p{
	font-size: 1.3em;
    margin-top: 3%;
    color: #3c3c3c;
}
.aten {
font-size: min(calc(20/750*100vw), 1.4rem);
    margin-top: 5px;
    line-height: 1.3;
    display: inline-block;
}
#flow .triangle{
	margin-bottom: 3%
}
    
#flow .triangle img {
	display: block;
    max-width: 20vw;
    margin: 0 auto;
}

/* =====================================
	注釈
===================================== */

#annotation{
    width: 100%;
    background: #fff;
    position: relative;
	padding: 10% 3% 15% 3%;
}

#annotation .bottom_line{
	border-bottom: 1px solid #a5a9b1;
	padding: 3% 0;
}

#annotation p{
	margin-bottom: 3%;
	font-size: medium;
	font-weight: bold;
}

#annotation p.annotation {
	font-size: small;
}

/* =====================================
	footer
===================================== */

footer .dmm_txt{
	padding-top: 4%;
	padding-bottom: 5%;
	font-size: medium;
	color: #3c3c3c;
	line-height: normal;
	font-weight: bold;
	text-align: center;
	background-color: #FFF;
}

footer .dmm_txt p{
	padding-top: 4%;
    padding-bottom: 5%;
}

footer .logo{
display: flex;
    justify-content: center;
}

footer .link{
	background-color: #3c3c3c;
    line-height: 2;
    padding-top: 5%;
}

footer .link a{
	color: #FFF;
}

footer > a{
    position: absolute;
    top: 19.9%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: block;
}

footer ul{
	color: #FFF;
    bottom: 7.8125%;
    left: 50%;
    width: 100%;
    justify-content: space-between;
    padding: 0 10%;
    font-size: medium;
	text-align: center;
	margin-bottom: 3%;
}

footer ul li{
	color: #FFF;
    font-size: medium;
}

#copyright{
	text-align: center;
	color: #FFF;
    font-size: small;
}

.floatBtn{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.6s all ease;
    z-index: 99999;
	width:640px;
	padding-bottom: 20px;
	background: #ff6c00;
}

.is-hidden {
    visibility: hidden;
    opacity: 0;
}


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

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
	font-size: 3.2552vw;
    width: 100%;
    overflow-x: hidden;
    min-width: inherit;
}

.floatBtn{
    width:100%;
    max-width:640px;
}
    
#price2{
    width: 80%;
    }

}