@charset "utf-8";

/*------------------------------------
  COMMON
------------------------------------*/
/* reset */
html { background:#FFF; color: #666; font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana;}
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, input, textarea, p, th, td, a, img { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0;}
img { max-width: 100%; border: 0;}
em, strong, th { font-style: normal; font-weight: normal;}
li { list-style: none;}
th { text-align: left;}
h1, h2, h3, h4, h5 { font-size:100%; font-weight:normal;}
a { text-decoration: none;}
a:hover { text-decoration: underline;}
a:hover img { opacity: 0.8; -ms-filter: "alpha(opacity=80)"; filter: alpha(opacity=80);}

body {
  opacity: 0;
}

#trialset img { display: block; margin: 0 auto;}

/* トップ */
#trialset .sec-top ul { max-width: 642px; margin: 0 auto 35px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 9%}
#trialset .sec-top ul > li  { width: 51.61%;}

/* メインビジュアル */
#trialset .sec-mv { margin: 0 0 16%;}

/* トライアルセット */
#trialset .sec-trial { margin: 0 0 16%;}
#trialset .sec-trial .offer { position: relative;}
#trialset .sec-trial .offer .btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18%; width: 85.73%;}
#trialset .case01 .sec-trial .offer .btn { bottom: 17%;}
#trialset .case02 .sec-trial .offer .btn { bottom: 18.5%;}

/* インスタグラム */
#trialset .sec-instagram .instagram-inner { background-color: #cce4ee; padding: 30px 15px;}
#trialset .sec-instagram .instagram-area { background-color: #fff; padding: 15px 30px;}
#trialset .sec-instagram .instagram-area .icon { margin: 0 0 20px;}
#trialset .sec-instagram .step-instagram { padding: 20px 50px; background-color: #fff;}

/* 肌悩み */
#trialset .sec-trouble ul { background-color: #cce4ee; padding: 50px;}
#trialset .sec-trouble li:not(:last-child) { margin: 0 0 20px;}

/* 喜びの声 */
#trialset .sec-voice { margin-top: 30px; padding: 50px; background-color: #cce4ee;}
#trialset .sec-voice li:not(:last-child) { margin: 0 0 30px;}

/* お悩み・原因 */
#trialset .sec-cause .txt-ttl { margin: 20px 20px 10px;}

/* 解決方法 */
#trialset .sec-solutions { padding: 50px; background-color: #cce4ee;}
#trialset .sec-solutions h2 { margin: 0 0 20px;}
#trialset .sec-solutions p.txt { font-size: 12px; line-height: 1.6;  max-width: 842px; margin: 20px auto;}
#trialset .sec-solutions .gif-container { position: relative;}
#trialset .sec-solutions .gif-container .buttons-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1;}
#trialset .sec-solutions .gif-container .buttons-wrap.show { opacity: 1; z-index: 10;}
#trialset .sec-solutions .gif-container button { display: none; position: absolute; top: 50%; left: 50%; width: 118px; height: 118px; background: url(../../skincarekit/btn_gif_start.png) no-repeat; background-size: 100% auto; cursor: pointer; outline: none; border: none; transform: translate(-50%, -50%); transition: background-image 0.1s ease-in; z-index: 2;}
#trialset .sec-solutions .gif-container button.stop { background-image: url(../../skincarekit/btn_gif_stop.png);}
#trialset .sec-solutions .gif-container .buttons.hide { opacity: 0; visibility: hidden; z-index: -1; -webkit-transition: 0.3s ease all; transition: 0.3s ease all;}

/* 3ステップ */
#trialset .sec-step .step-inner { padding: 50px; background-color: #cce4ee;}
#trialset .sec-step .step-box { margin: 50px 0 0;}
#trialset .sec-step h3 { margin: 50px 0 0;}
#trialset .sec-step ul { max-width: 720px; margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
#trialset .sec-step ul li { width: 48.5%; margin-bottom: 20px;}

/* サービス内容 */
#trialset .sec-service { padding: 50px; background: #cae4f0;}
#trialset .sec-service h2 { margin-bottom: 40px; text-align: center;}
#trialset .sec-service ul { max-width: 1000px; margin: 0 auto; display: flex; justify-content: center;}

/* 追従バナー */
#trialset .sec-bnr { position: fixed; bottom: 12px; left: 50%; z-index: 9999; width: 93.333%; display: none; transform: translateX(-50%);max-width: 700px;}
#trialset .sec-bnr .bnr-inner { box-sizing: border-box; max-width: 590px; margin: 0 auto; padding: 0 15px; }

/* visumo */
#trialset .vsm-tile img.ecbn-visumo-logo { display: inline;}

/* ちらつき対応 */
#trialset .white-mask { width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 50;}

/* リンク */
.sec-link { padding: 20px 0 25px; }
.sec-link li { margin: 5px 0; text-align: center;}
.sec-link a {color: #666; font-size: 12px; text-decoration: underline;}
.sec-link a:hover {text-decoration: none;}

/*------------------------------------
  PC
------------------------------------*/
@media screen and (min-width: 700px) {
  .for-sp { display: none !important;}
  #trialset { box-sizing: border-box; max-width: 750px; margin: 0 auto 20px;}
  #trialset .sec-top li { cursor: pointer;}
  #trialset .sec-top li:hover { opacity: .6;}
	
	#trialset .sec-no01 .note { padding: 20px 7%; font-size: 12px; line-height: 1.6;}
	#trialset .sec-no01 .note br.sp { display: none;}
}

/*------------------------------------
  SP
------------------------------------*/
@media screen and (max-width: 699px) {
  .for-pc { display: none !important;}
  #trialset { margin-bottom: 10px;}
  /* トップ */
  #trialset .sec-top ul { padding: 0 50px;}
  /* #trialset .sec-top li { width: 47%;} */
  /* トライアルセット */
  #trialset .sec-trial .trial-inner { padding: 15px; border: 10px solid #0078a8;}
  /* #trialset .sec-trial .image { margin: 10px -3vw 0 0;} */
  /* インスタグラム */
  #trialset .sec-instagram .instagram-area .icon img { width: 26px;}
  /* 喜びの声 */
  #trialset .sec-voice { margin: 20px 0 0; padding: 20px;}
  #trialset .sec-voice li:not(:last-child) { margin: 0 0 20px;}
  /* 解決方法 */
  #trialset .sec-solutions { padding: 20px;}
  #trialset .sec-solutions p.txt { margin-top: 10px;}
  /* 3ステップ */
  #trialset .sec-step .step-inner { padding: 30px 20px 20px;}
  #trialset .sec-step .step-box { margin: 20px 0 0;}
  #trialset .sec-step h3 { margin: 20px 0 0;}
  #trialset .sec-step ul { margin: 15px auto; padding: 0 15px;}
  #trialset .sec-step ul li { margin-bottom: 10px;}
  /* サービス内容 */
  #trialset .sec-service { padding: 30px 20px 20px;}
	#trialset .sec-service h2 { margin-bottom: 20px;}
	
	#trialset .sec-no01 .note { padding: 15px 7% 5px; font-size: 10px; line-height: 1.4;}
	#trialset .sec-no01 .note br.sp { display: block;}
}

/*------------------------------------
  数量調整
------------------------------------*/
.lp-form .lp-form-inp select[name="qty1"] option:nth-child(n+2) { display: none;}
.lp-form .lp-form-inp select[name="qty1"] { background: none; }