@charset "utf-8";

body{
  font-size: 62.5%;/*emの計算がしやすい*/
	font-family:'Playfair Display', serif,'Hiragino Mincho Pro','游明朝','Yu Mincho',YuMincho,serif;
	font-weight:normal;
	color: #333;
  text-align: left;
}

/* ブラウザのリセット */
p{
  margin: 0 !important;
  padding: 0 !important;
}

h1,h2{
  padding: 0;
  margin: 0;
}

ul li figure{
  list-style: none;
  padding: 0;
  margin: 0;
}

a{
  text-decoration: none;
}

/* ボタンの透明度一律調整 */
.rollover:hover{
  filter: saturate(150%);
  /* opacity: 0.9;
  filter:alpha(opacity=70);
  -sm-filter:"alpha(opacity=70)"; */
}

/* -----------------
全体設定
----------------- */

/* 全体を700pxの幅にして左右を整える */
.sec_wrap{
  max-width: 700px;
/* 700pxの幅で中央に揃うように */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

ul{
  list-style: none;
  padding-inline-start: 0px;
}

/* 全ての画像が700pxの中で幅いっぱいになるように */
.sec_wrap img,.formBtn{
  width: 100%;
}

/* arrowの共通設定 */
.arrow{
  text-align: center;
  margin:3em 0 3em 0;
}

.arrow img{
  width: 50%;
}

h2,h3,h4{
  margin: 0;
  padding: 0;
}

/* 全体の共通の横幅の隙間設定 */
.outer{
  max-width: 94%;
  margin: auto;
}

/* ------------------
見出しタグ設定(LPで使いまわしするもの）
------------------- */


h2{
  margin: 0.5em 0em;
  font-size: 5em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  font-feature-settings: "palt";
}

h3{
  margin: 0.5em 0em;
  /* padding: 0.3em 0.6em; */
  font-size: 2.2em;
  font-weight: normal;
}

/* 

h4{
  margin: 0.5em 0em;
  padding: 0.3em 0.6em;
  font-size: 1.4em;
  font-weight: bold;
  border: 1px solid #ccc;
}

h5{
  margin: 0.5em 0em;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ccc;
} 

*/


/* ------------------
section01 cvaの設定
------------------- */

header img{
  width: 700px;
}

.sec01{
  background-image: url(../images/back_cva@2x.png);
  padding: 3em 0;
}

.cva_title{
  text-align: center;
  margin-bottom: -2em;
}

.cva_title img{
  width: 80%;
}

.btn{
  position: relative;
}

.btn:hover{
  top: 3px;
}
.cva_text{
  margin-top: 2em;
}

.cva_text p{
  color: #fff;
  font-size: 1.5em;
  text-align: center;
}


/* ------------------
section02 mediaの設定
------------------- */

.sec02{
  background-image: url(../images/back_media@2x.png);
  background-size: contain;
  padding: 5em 0;
}

/* ------------------
section04 3タイプ別の設定
------------------- */
.sec04{
  background-image: url(../images/back@2x.webp);
  background-repeat: repeat;
  padding: 3em 0;
  margin: 4em 0 0 0;
}

.pink{
  color: #ff5f5b;
}

.swiper {
  margin-top: 4em;
}



@media only screen and (max-width:768px){
  .swiper {
    margin-top: 0;
  }
}

.swiper-button-prev,.swiper-button-next {
  color: #000;
  outline:none;
}

.swiper-button-prev{
  left: 0;
}

.swiper-button-next{
  right: 0;
}

.swiper-button-prev::after,.swiper-button-next::after {
  font-weight: 900;
  color: #cc0000;
}

@media only screen and (max-width:768px){
  .swiper-button-prev::after,.swiper-button-next::after {
    font-size: 3em;
  }
}

/* ------------------
section05 商品紹介エリアの設定
------------------- */

.sec05{
  padding: 5em 0;
}
.sec05 p{
  margin: 2em 0em;
  font-size: 5em;
  text-align: center;
  font-feature-settings: "palt";
}

.otodoke,.meguri,.brend,.syohou{
  margin:5em 0 3em 0;
}

.syohou{
  text-align: center;
}

.syohou img{
  width: 90%;
}

.sec05 h2{
  color: #8e3c36;
  font-size: 6em;
  font-weight: bold;
}

/* ------------------
section06 監修医師エリアの設定
------------------- */
.sec06{
  background-image: url(../images/back_blue@2x.webp);
  padding: 5em 0;
}
/* ------------------
section07 3つの特徴エリアの設定
------------------- */

.sec07{
  padding-bottom: 5em;
}

.but,.sec07_inner_title{
  margin:3em 0 3em 0;
  text-align: center;
}

.but img,.sec07_inner_title img{
  width: 100%;
}

.sec07_inner{
  padding: 3em 0;
  background-color:#f7f5e4;
}

.sec07_inner ul li{
  margin-bottom: 5em;
}

.sec07_inner ul li .label{
  max-width: 30%;
  margin: 0 auto -2em;
}

.sec07_inner h2{
  font-weight: normal;
  margin:0 0 0.5em 0;
}

.text_box{
  background-color: #fff;
  padding: 3em;
}

.sec07_inner figure{
  max-width: 100%;
  height: auto;
}


.t_text{
  background-color: #fff;
  padding: 2em 3em;
}

.t_text p{
  font-size: 2em;
  line-height: 2;
}

.yellow{
  background: linear-gradient(transparent 50%, yellow 50%);
}

.plusarea_01{
  text-align: center;
  margin: 5em 0 3em 0;
}

.plusarea_01 img{
  width: 100%;
}


.koukaarea{
  margin-bottom: 3em;
}

/* ------------------
section08 お客様の声エリアの設定
------------------- */
.sec08{
  background-color:#f6eeeb ;
  padding: 3em 0;
}

.sec08 h2{
  text-align: center;
}

.sec08 h2 img{
  width: 80%;
}

.voice_inner{
  background-color: #fff;
  border: 1px solid #ff5f5b ;
  padding: 3em;
  margin: 0 0 4em;
}

.voice_inner_left{
  float: left;
  width: 55%;
}

.voice_inner_right{
  float: right;
  width: 45%;
}

.voice_inner h3{
  font-size: 2.4em;
  color: #ff5f5b;
}

.voice_text{
  margin-top: 30px;
  margin-bottom: 20px;
}

.voice_inner p{
  clear: both;
  font-size: 1.9em;
  line-height: 1.9;
}

.name02{
  border-bottom:1px solid #ff5f5b;
}

small p{
  font-size: 1.3em;
  text-align: right;
}
/* ------------------
section09 プログラムの内容エリアの設定
------------------- */
.sec09{
  padding: 6em 0;
}

.title_top,.title_under,.step,.arrow_02{
  text-align: center;
}

.title_top img,.title_under img{
  width: 50%;
}

.title_under{
  margin-bottom: 4em;
}

.step img{
  width: 80%;
}

.sec09 h2{
  font-weight: normal;
}

.arrow_02 img{
  width: 30%;
}

.arrow_02,.step{
  margin-top: 3em;
}

/* ------------------
section12 特典画像
------------------- */
.sec12{
  margin-bottom: 4em;
}



/* ------------------
section10 開発秘話の設定
------------------- */
.sec10{
  background-image: url(../images/back@2x.png);
  background-repeat: repeat;
  padding: 3em 0;
}

.sec10 h2{
  text-align: center;
  margin-bottom: 1em;
}

.sec10 h2 img{
  width: 80%;
}

.sec10_inner{
  background-color: #fff;
  padding: 3em 4em;
}

.koushi{
  text-align: center;
  margin-bottom: 3em;
}

.koushi img{
  width: 70%;
}

.sec10_inner p{
  font-size: 1.8em;
  line-height: 1.9;
}


/* ------------------
section11 よくある質問エリアの設定
------------------- */

.sec11{
  padding: 3em 0;
}

.sec11 h2{
  font-weight: normal;
}

.green{
  color: #94bf00;
}

.qa-list dl {
  position: relative;
  margin: 30px 0 0;
  cursor: pointer;
  border: 1px solid #DDD;
}
.qa-list dl:first-child {
margin-top: 0;
}
.qa-list dl::after {
  position: absolute;
  top: 27px;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}
.qa-list .open::after {
  transform: rotate(-45deg);
}
.qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  font-size: 2em;
  font-weight: bold;
  background: #e7f2df;
}
.qa-list dl dt::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  content: 'Q.';
  color: #94bf00;
}
.qa-list dl dd::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  left: 20px;
  display: block;
  content: 'A.';
  font-weight: bold;
  color: #94bf00;
}
.qa-list dl dd {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
  margin: 30px 0 0;
  font-size: 1.8em;
}
.qa-list dl dd p:first-child{
  margin-top: 0;
}



/* -----------------
フッターの設定
------------------- */

.footer{
  padding: 2em 0em;
  text-align: center;
  font-size: 1.4em;
  margin-bottom: 14em;
}

.footer a{
  color: #333;
}

/* ---------------------
下部固定バナーの設定
---------------------- */

.floating_banner{
  position: fixed;
  bottom: 20px;
  width: 700px;
  text-align: center;
}

.floating_banner img{
  width: 90%;
}


.scroll_btn {
  animation-name:fuwafuwa; /* fuwafuwaっていうアニメーションの名前*/
  animation-duration:2s; /*アニメーションの時間設定*/
  animation-iteration-count:infinite; /*アニメーションの繰り返し設定*/
}

@keyframes fuwafuwa {
  0% {-webkit-transform:translate(0, 0px);}/*X軸とY軸*/
  50% {-webkit-transform:translate(0, -20px);}
  100% {-webkit-transform:translate(0, 0px);}
}