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



/*============================
ステップページ用CSS
============================*/
/*全体*/
body{background: #f0f0f0;}
h1{color: #333; font-weight:500; font-size:4rem; line-height:1.3; letter-spacing:2px; text-align: center; margin: 80px auto; font-family:'Caveat', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;}
h1 span{font-size: 1.5rem; display: inherit;}
hr{border-top: dotted 1px #ccc; border-right: none; border-bottom: none; border-left: none; width: 80%; margin: 20px auto;}

/*ステップ枠*/
.step_wrap{max-width: 940px; width:90%; margin: 0 auto 80px; padding: 0 5%;}
.step_wrap .content{width:760px; padding: 100px 90px; margin: 0 auto;}
.step_wrap .content h2 {padding:0 0 40px; text-align: center; font-size: 34px; line-height:1.6;}
.step_wrap .content .step_bbox{width: 100%; border: 1px solid #646464; padding-top: 20px; margin: 0 auto;}/*ボーダー枠*/
.step_wrap .content .step_wbox{width: 100%; border: 1px solid #fff; background: #fff; padding-top: 20px; margin: 0 auto;}/*白（ボーダー無）*/
.step_wrap .content .flow{background: url(../pc-img/step_arrow02.svg) no-repeat center bottom #fff; text-align: center; margin: 0 auto 30px; padding: 20px 0 30px;}
.step_wrap .content .flow h3 {width: 75%; padding:10px 0; margin: 0 auto 20px; font-size: 25px; line-height:1.4; background: #11006d; color: #fff; border-radius: 50px;}
/*.step_wrap .content .flow span {color: #11006d !important;}*/
.flow ul{width: 100%; list-style: none; padding: 20px 0; display: table; table-layout: fixed; margin: 0 auto;}
.flow ul li{width:calc(90%/2.6 - 30px); margin: 20px 40px; display:inline-flex; vertical-align:top; text-align: center; overflow: hidden;}
.flow ul li img{width:100%;}
.flow ul li a{color:#11006d; line-height:1.3;}
.flow ul li h4{font-weight: 700; font-size:18px; font-family: 'Oxygen', 'Noto Sans JP', sans-serif; padding-bottom:5px; display: block;}
.flow span, .flow h4{color: #11006d;}

/*配合成分*/
.maru {
    position: absolute;
    width: 100px;
    height: 100px; 
    background-color:#11006d;
    border-radius: 50%; 
    margin: 10px auto;
    margin-left: -20px;
    text-align: center;
}
.maru-inner {
   width: 95%;
    color: #fff;
    font-size: 85%;
   line-height: 1.2;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.maru2 {
    position: absolute;
    width: 70px;
    height: 70px; 
    background-color:#11006d;
    border-radius: 50%; 
    margin: 10px auto;
    margin-left: -8px;
    text-align: center;
}
.maru2-inner {
   width: 95%;
    color: #fff;
    font-size: 85%;
   line-height: 1.2;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.maru-inner font , .maru2-inner font {line-height: 1;}

/*使い方アイコン*/
.icon-btn {
	display: inline-block;
    text-decoration: none;
    width: 50px;
    height: 45px;
	padding: 5px 0 0;
    border-radius: 10px;
    background: #11006d;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    font-weight: bold;
    transition: .3s;
	position: absolute;
    margin:150px 1px 10px;
	z-index: 9999;
}
.icon-btn i {
    font-size: 22px;
    line-height: 1;
    padding-top: 4px;
}

/*タブ*/
.t_tab , .b_tab{display: table; width: 100%; table-layout: fixed; list-style: none;}
.t_tab li , .b_tab li{display: table-cell; vertical-align: middle; text-align: center; overflow: hidden;}
.t_tab li a , .b_tab li a{display: block; padding: 20px; font-size: 110%; line-height: 1.4; font-weight: 700; }
.t_tab li a{border-radius: 10px 10px 0 0;}
.b_tab li a{border-radius: 0 0 10px 10px;}
	
/*ベースカラー*/
.base_c{background: #fff; color:#11006d;} /*基本*/
.hq_c{background: #11006d; color:#fff;} /*ハイドロキノン*/
.vc_c{background: #F2B807; color:#fff;} /*ビタミン*/

/*コメント枠*/
.comment{width:65%; background: #777; padding: 15px; margin: 10px auto; font-size: 95%; color: #fff;}



/*============================
画面サイズが1150px以下の場合に適用
============================*/
@media screen and (max-width:1150px) {

/*全体*/
h1{font-size: 2.3rem; line-height: 1.3; letter-spacing:0; margin: 40px auto;}
h1 span{font-size: 1.3rem; letter-spacing:0;}

/*ステップ枠*/
.step_wrap .content{width:90%; padding: 30px 5%;}
.step_wrap .content h2 {padding:30px 0; font-size:28px; line-height:1.4;}
.step_wrap .content .flow{margin: 0 auto 30px; padding: 20px 0 50px;}
.step_wrap .content .flow h3 {width: 90%; font-size: 20px;}
.flow ul li{width:80%; margin:0 auto 50px;}
.flow ul li:last-child{margin-bottom: 0 !important;}

/*タブ*/
.t_tab li a{padding: 20px 5px; font-size: 100%; line-height: 1.2;}
.b_tab li a{padding: 20px 5px; font-size: 100%; line-height: 1.2;}
}