/*
Theme Name: One Stone Two Birds LP
Theme URI: https://example.com/
Author: Your Company
Author URI: https://example.com/
Description: ONE STONE TWO BIRDS 角栓溶解クレンジングオイル 商品紹介LP用のオリジナル1ページテーマです。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unique License
Text Domain: one-stone-two-birds
*/

/* ===========================================================
   以下はLPデザイン本体のCSSです（assets/css/lp.css の内容）
   =========================================================== */

/* =========================================================
   ONE STONE TWO BIRDS LP — メインスタイルシート
   ========================================================= */

:root{
  /* ベースカラー */
  --c-text:        #2b2b2b;
  --c-text-soft:   #555555;
  --c-bg-white:    #ffffff;
  --c-bg-gray:     #ececea;
  --c-bg-gray-2:   #e5e5e5;
  --c-border-soft: #e3ded2;

  /* VC（ビタミンC）ブランドカラー */
  --c-vc-bar:      #f08a1f;
  --c-vc-bar-2:    #ea5515;
  --c-vc-text:     #f59c0e;
  --c-vc-gold:     #fabe01;
  --c-vc-bg:       #fdecc3;
  --c-vc-bg-deep:  #f6d893;

  /* RC（レチノール）ブランドカラー */
  --c-rc-bar:      #8a1428;
  --c-rc-bar-2:    #bc0018;
  --c-rc-text:     #db1817;
  --c-rc-pink:     #dc2772;
  --c-rc-bg:       #f8d2cb;
  --c-rc-bg-deep:  #f3b2a6;

  /* ボタン */
  --c-btn-bg:      #3e3f43;
  --c-btn-bg-hover:#232426;

  /* タイポグラフィ */
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --container-w: 1120px;
}

/* ---------------------------------------------------------
   リセット & ベース
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.ostb-lp-page{
  margin:0;
  padding:0;
  font-family:var(--f-sans);
  color:var(--c-text);
  background:#ffffff;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
  word-break:break-word;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
.ostb-container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 20px;
}
.ostb-visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.ostb-section-pad{ padding:64px 0; }
@media (max-width:640px){
  .ostb-section-pad{ padding:44px 0; }
}
sup{
	font-size: 75%;
}
h2 sup{
	font-size: 60%;
}
h3 sup{
	font-size: 60%;
}
/* 見出し共通 */
.ostb-section-title{
  font-family:var(--f-serif);
  font-size:clamp(22px,4vw,32px);
  text-align:center;
  letter-spacing:.04em;
  color:var(--c-text);
  margin-bottom:8px;
}
.ostb-section-subtitle{
  text-align:center;
  font-size:15px;
  color:var(--c-text-soft);
  margin-bottom:36px;
}
.ostb-point-badge{
  display:block;
  width:104px;
  margin:0 auto 22px;
}
.ostb-lead-text{
  max-width:760px;
  margin:36px auto 0;
  font-size:15px;
  color:var(--c-text-soft);
  text-align:left;
}
@media (min-width:641px){
  .ostb-lead-text{ text-align:left; }
}

/* ---------------------------------------------------------
   ヒーロー（FV）
   --------------------------------------------------------- */
.ostb-hero{
  background:#cdc3c9;
  line-height:0;
}
.ostb-hero img{ width:100%; }

/* ---------------------------------------------------------
   購入ボタン（共通パーツ）
   --------------------------------------------------------- */
.ostb-buy-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:var(--c-btn-bg);
  color:#fff;
  font-size:16px;
  letter-spacing:.06em;
  padding:18px 20px;
  border-radius:4px;
  transition:background .2s ease;
}
.ostb-buy-btn:hover,
.ostb-buy-btn:focus-visible{ background:var(--c-btn-bg-hover); }
.ostb-buy-btn svg{ width:14px; height:14px; flex:0 0 auto; }

/* ---------------------------------------------------------
   商品比較セクション
   --------------------------------------------------------- */
.ostb-products{
  padding:48px 0 64px;
}
.ostb-products-grid{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
}
.ostb-products-grid > article{
  flex:1 1 100%;
  min-width:0;
}
@media (min-width:861px){
  .ostb-products-grid{ gap:40px; }
  .ostb-products-grid > article{ flex:1 1 calc(50% - 20px); }
}

.ostb-product-card__eyebrow{
  text-align:center;
  font-family:var(--f-serif);
  font-size:20px;
  letter-spacing:.18em;
  color:var(--c-text-soft);
  margin-bottom:10px;
}
.ostb-product-card__bar{
  text-align:center;
  color:#fff;
  font-family:var(--f-serif);
  font-size:22px;
  letter-spacing:.12em;
  padding:6px 0;
  margin-bottom:18px;
}
.ostb-product-card--vc .ostb-product-card__bar{
  background:linear-gradient(90deg,var(--c-vc-bar),var(--c-vc-bar-2));
}
.ostb-product-card--rc .ostb-product-card__bar{
  background:linear-gradient(90deg,var(--c-rc-bar-2),var(--c-rc-bar));
}

.ostb-product-card__lead{
  text-align:center;
  font-size:17px;
  font-weight:600;
  margin-bottom:14px;
}
.ostb-product-card--vc .ostb-product-card__lead{ color:#c96a16; }
.ostb-product-card--rc .ostb-product-card__lead{ color:#9c2a3a; }

.ostb-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px!important;
}
.ostb-tags li{
  font-size:12.5px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid;
  white-space:nowrap;
}
.ostb-product-card--vc .ostb-tags li{ border-color:#e7b27e; color:#b56a1d; }
.ostb-product-card--rc .ostb-tags li{ border-color:#dba3ac; color:#9c2a3a; }

.ostb-product-card__body{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:22px;
}
.ostb-product-card__bottle{
  flex:0 0 104px;
  max-width:104px;
}
.ostb-product-card__detail{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.ostb-product-card__info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  gap:10px;
  margin-bottom: 30px;
}
.ostb-product-card__venn{
  flex:1 1 95%;
  text-align:center;
}
.ostb-product-card__venn-label{
  font-size:11.5px;
  font-weight:700;
  margin-bottom:8px;
  line-height:1.4;
}
.ostb-product-card--vc .ostb-product-card__venn-label{ color:var(--c-vc-text); }
.ostb-product-card--rc .ostb-product-card__venn-label{ color:var(--c-rc-text); }
.ostb-product-card__venn img{
	width:100%;
	/*max-width:140px;*/
	max-width: 80%;
	margin:0 auto;
	}

.ostb-icons-list{
  flex:1 1 54%;
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top: 30px!important;
}
.ostb-icons-list li{
  border-radius:8px;
  overflow:hidden;
  background:#f0f0f0;
}
.ostb-icons-list li img{ width:100%; }

@media (max-width:480px){
	.ostb-icons-list li{
		width: 80%;
		text-align: center;
	}
}
@media (max-width:480px){
  .ostb-product-card__info{ flex-direction:column; }
  .ostb-product-card__venn,
  .ostb-icons-list{ flex:none; width:100%; }
}

.ostb-product-card__meta{
  text-align:left;
  font-size:13.5px;
  color:var(--c-text-soft);
  margin:0;
}
.ostb-product-card__meta strong{
  display:block;
  font-size:14.5px;
  color:var(--c-text);
  margin-bottom:2px;
}

/* ---------------------------------------------------------
   POINT 01 — 角栓溶解処方
   --------------------------------------------------------- */
.ostb-point01{ background:var(--c-bg-gray); }

.ostb-steps{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:8px;
}
.ostb-steps li{ flex:1 1 100%; }
@media (min-width:769px){
  .ostb-steps li{ flex:1 1 calc(33.333% - 14px); }
}
.ostb-steps li{
  /*background:#fff;
  border:1px solid var(--c-border-soft);
  border-radius:14px;*/
  overflow:hidden;
}
.ostb-steps li img{ width:100%; }

/* ---------------------------------------------------------
   POINT 02 — クレンジング力&スキンケア効果UP
   --------------------------------------------------------- */
.ostb-point02{ background:#fff; }
.ostb-cards2{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:40px!important;
  max-width:760px;
  margin-left:auto!important;
  margin-right:auto!important;
}
.ostb-cards2 li{ flex:1 1 100%; }
@media (min-width:769px){
  .ostb-cards2 li{ flex:1 1 calc(50% - 10px); }
}
.ostb-cards2 li{
  border:1px solid var(--c-border-soft);
  border-radius:14px;
  overflow:hidden;
}
.ostb-cards2 li img{ width:100%; }

/* ---------------------------------------------------------
   POINT 03 — 高純度・原液美容成分配合（VC / レチノール）
   --------------------------------------------------------- */
.ostb-point03-intro{ background:var(--c-bg-gray); padding:64px 0 8px; }
@media (max-width:640px){ .ostb-point03-intro{ padding:44px 0 8px; } }

.ostb-active-block{
  position:relative;
  padding:56px 0;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.ostb-active-block--vc{ background-color:var(--c-vc-bg); }
.ostb-active-block--rc{ background-color:var(--c-rc-bg); }

.ostb-active-block__badge{
  display:block;
  width:96px;
  margin:0 auto 18px;
}
.ostb-active-block__top{
  position:relative;
  margin-bottom:20px;
}
.ostb-active-block__bottle{
  position:absolute;
  left:6px;
  top:-6px;
  width:112px;
  max-width:112px;
  z-index:4;
}
.ostb-active-block__headline{
  margin:0;
  padding:44px 0 0 0;
  min-height:150px;
  font-family:var(--f-serif);
  font-size:clamp(18px,3.2vw,25px);
  line-height:1.5;
  text-align: center;
}
@media (max-width:768px){
  .ostb-active-block__bottle{
    position:static;
    width:120px;
    margin:0 auto 12px;
  }
  .ostb-active-block__headline{
    padding:0;
    min-height:0;
    text-align:center;
  }
}
.ostb-active-block--vc .ostb-active-block__headline{ color:#7a3d05; }
.ostb-active-block--rc .ostb-active-block__headline{ color:#6e1620; }

.ostb-active-block__main{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  position:relative;
  z-index:1;
}
.ostb-active-block__photo,
.ostb-active-block__diagram{ flex:1 1 100%; }
@media (min-width:769px){
  .ostb-active-block__photo{ flex:1 1 calc(46% - 9px); }
  .ostb-active-block__diagram{ flex:1 1 calc(54% - 9px); }
}
.ostb-active-block__photo{
  border-radius:10px;
  overflow:hidden;
}
.ostb-active-block__photo img{ width:100%; height:100%; object-fit:cover; }
.ostb-active-block__diagram{
  background:#fff;
  border-radius:10px;
  padding:18px;
  display:flex;
  align-items:center;
}
.ostb-active-block__diagram img{ width:100%; }

.ostb-active-block__text{
  max-width:880px;
  margin:26px auto 0;
  font-size:14.5px;
}
.ostb-active-block--vc .ostb-active-block__text{ color:#7a4a18; }
.ostb-active-block--rc .ostb-active-block__text{ color:#7a3038; }

/* ---------------------------------------------------------
   POINT 04 — 天然由来保湿オイル / うるおい成分
   --------------------------------------------------------- */
.ostb-point04{ background:var(--c-bg-gray); }

.ostb-oils-grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
.ostb-oils-grid figure{
  margin:0;
  flex:1 1 calc(50% - 8px);
}
@media (min-width:641px){
  .ostb-oils-grid figure{ flex:1 1 calc(25% - 12px); }
}
.ostb-oils-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:6px;
}
.ostb-oils-grid figcaption{
  text-align:center;
  font-size:13px;
  margin-top:10px;
  color:var(--c-text);
}

.ostb-ingredients-title{
  margin-top:56px;
}
.ostb-ingredients{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
}
.ostb-ingredients figure{
  margin:0;
  flex:1 1 calc(33.333% - 10px);
}
@media (max-width:560px){
  .ostb-ingredients figure{ flex:1 1 100%; max-width:320px; margin-left:auto; margin-right:auto; }
}
.ostb-ingredients img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:6px;
}
.ostb-ingredients figcaption{
  text-align:center;
  font-size:14px;
  margin-top:10px;
}

/* ---------------------------------------------------------
   注釈（フットノート）
   --------------------------------------------------------- */
.ostb-footnotes{
  background:#fff;
  padding:28px 0 36px;
  border-top:1px solid #ececec;
}
.ostb-footnotes ol{
  list-style:none;
  margin:0;
  padding:0;
  font-size:11.5px;
  line-height:1.9;
  color:#7c7c7c;
  display:flex;
  flex-wrap:wrap;
  gap:0 10px;
}
.ostb-footnotes ol li{ white-space:normal; }

/* ---------------------------------------------------------
   フリー処方 / フッター
   --------------------------------------------------------- */
.ostb-free{
  background:var(--c-bg-gray-2);
  padding:64px 0;
  text-align:center;
}
.ostb-free__title{
  font-family:var(--f-serif);
  font-size:clamp(18px,3.4vw,24px);
  line-height:1.9;
  margin-bottom:30px;
}
.ostb-free__label{
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.ostb-free-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:620px;
  margin:0 auto 24px!important;
}
.ostb-free-pills li{ flex:1 1 calc(33.333% - 7px); }
@media (max-width:480px){
  .ostb-free-pills li{ flex:1 1 calc(50% - 5px); }
}
.ostb-free-pills li{
  background:#75787e;
  color:#fff;
  font-size:13.5px;
  padding:12px 8px;
  border-radius:999px;
}
.ostb-patch{
  max-width:620px;
  margin:0 auto;
  border:1px solid #c9c9c9;
  border-radius:999px;
  padding:5px 20px;
  font-size:13px;
}
.ostb-patch small{
  display:block;
  font-size:11px;
  color:#8c8c8c;
  margin-top:4px;
}

/* ---------------------------------------------------------
   サイトフッター（簡易）
   --------------------------------------------------------- */
.ostb-site-footer{
  background:#2b2b2b;
  color:#bbb;
  text-align:center;
  font-size:12px;
  padding:22px 0;
}
.ostb-site-footer a{ color:#ddd; }
 
/*追加*/
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}
.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}


.toggle-btn03 {
  position: relative;
  width: 100%;
  font-size: 18px;
  color: #fff;
  background: #444;
  padding: 16px;
  text-align: center;
}
.toggle-btn03:link {
  color: #fff;
}
.toggle-btn03:after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 24px;
  top: 24px;
  background: none;
}
.toggle-btn03.on:after {
  border-right: none;
  border-bottom: none;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
  top: 29px;
}
.toggle-btn__inner03 {
  display: none;
}
.toggle-btn__inner03.on {
  display: block;
}
.toggle-btn__inner03 ul {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
.toggle-btn__inner03 li {
  position: relative;
  width: 50%;
  height: 64px;
  text-align: center;
}
.toggle-btn__inner03 a {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,.1);
}
.toggle-btn__inner03 a > * {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
}
.toggle-btn__inner03 .toggle-btn__ec {
  border-right: none;
  border-bottom: none;
}
.toggle-btn__inner03 .toggle-btn__amazon {
  border-bottom: none;
}
.toggle-btn__inner03 .toggle-btn__rakuten {
  border-left: none;
}