@charset'utf-8';

/*LP*/
body{
        margin:0;
    }
/* PC時：全面背景画像の上に .lp-container を載せる */
@media (min-width: 901px) {
  body {
    position: relative;
    min-height: 100vh;
    background-color: #fff; /* 読み込み前の保険 */
  }



  .lp-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;      /* コンテンツの横幅 */
    margin: 40px auto 80px; /* 上下に少し余白 */
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
}
  .lp-container {
            max-width: 600px;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff; /* コンテンツ背景 */
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
        }
#orderForm{
  margin-bottom: 4em;
}
#orderForm.lpc{
  font-family:
        "Noto Sans JP",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "YuGothic",
        "Meiryo",
        sans-serif !important;
      line-height: 1.7 !important;
}
          img, video {
            max-width: 100%;
            width: 100%;
            height: auto;
            vertical-align: bottom; /* 画像下の隙間削除 */
            display: block;
        }
img[src*="tracking.php?U=https://aromicstyle"] {
  width:1px;
}
  .lp-video {
            display: block;
            width: 80%;       /* 幅を80%に変更 */
            margin: 0 auto;   /* 中央寄せ */
    border-radius: 12px; /* 動画の角を丸くする */
        }
.crossPointItems{
display:none
}

/* セクション全体の最大幅設定 */
.pc-max-width {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* 画像をレスポンシブにするための基本的なスタイル */
section img {
    display: block;
    width: 100%;
    height: auto;
}
.pattern-section {
            width: 100%;
            /* #76A9A3 の極薄背景 (透過度で調整) */
            background-color: rgba(118, 169, 163, 0.1); 
            position: relative;
            overflow: hidden;
        }

 /* ----------------------------------------
           トップ（ヒーロー）エリア：動画背景
        ---------------------------------------- */
        .hero-section {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        /* 背面の動画 */
        .hero-video-bg {
            position: absolute;
            top: -4em;     /* 0 から -4em に変更 */
            left: 0;
            width: 100%;
            height:auto;
            object-fit: cover; /* 枠に合わせてトリミング */
            z-index: 1;        /* 背面 */
        }
        /* 前面の画像（透過PNG） */
        .hero-image-fg {
            position: relative;
            z-index: 2;        /* 前面 */
            width: 100%;
            display: block;
        }
        /* ----------------------------------------
           LP02
        ---------------------------------------- */
/*picture#LP02,picture#LP03,picture#LP04,picture#LP15,picture#LP16,picture#LP17 {
    display: block;
    margin: 0 1em;
}*/
        /* ----------------------------------------
           特殊背景エリア (LP08 - LP10)
        ---------------------------------------- */
        

        /* 方眼紙風ドットパターン (疑似要素で重ねる) */
        .pattern-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 白いドットを配置 */
            background-image: radial-gradient(#ffffff 20%, transparent 20%);
            background-position: 0 0;
            background-size: 10px 10px; /* ドットの間隔 */
            opacity: 0.6; /* ドットの濃さ調整 */
            pointer-events: none; /* クリックを透過 */
            z-index: 1;
        }

        /* コンテンツをパターンの上に表示 */
        .pattern-content {
            position: relative;
            z-index: 2;
        }
 .pattern-section .deodorant{
    background-color: #fff;
  }
        /* 動画の上下マージン調整（必要に応じて） */
        .lp-video {
            display: block;
        }

        /* ----------------------------------------
           アコーディオン (LP13, LP14)
        ---------------------------------------- */
        .accordion-wrapper {
            background: #fff;
            border-top: 1px solid #eee;
          margin-bottom: 2em;
        }

        details {
            width: 100%;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
        }

        summary {
            list-style: none; /* デフォルトの三角を消す */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #fff;
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }
        
        /* Safariなどのデフォルトマーカー消去 */
        summary::-webkit-details-marker {
            display: none;
        }

        /* アコーディオン開閉アイコン */
        summary::after {
            content: "+";
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 30px;
            background-color: #76A9A3; /* テーマカラー */
            color: #fff;
            border-radius: 50%;
            font-size: 20px;
            font-weight: normal;
            transition: transform 0.3s ease;
        }

        details[open] summary::after {
            transform: rotate(45deg); /* 開いたときに×にする */
        }

        /* アコーディオンの中身 */
        .accordion-content {
            background: #fafafa;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
/* 画面幅が1000px以上の場合のスタイル (PC表示) */
@media (min-width: 1001px) {
    .img-pc {
        display: block; /* PC版を表示 */
    }
    .img-sp {
        display: none; /* スマホ版を非表示 */
    }
}
 /* ==============================================
           ★追加修正★ U-KOMIウィジェットのはみ出し防止設定
           ウィジェット内の 80vw 指定を強制的に 100% に上書きします
        ============================================== */
        .gallery-pictures-container[data-gallery-id],
        .review-container[data-action] {
            width: 100% !important;     /* 幅を親要素に合わせる */
            max-width: 100% !important; /* 最大幅も制限 */
            margin: 0 auto !important;  /* 中央寄せ */
            overflow: hidden !important; /* はみ出し防止の念押し */
        }

  .gallery-pictures-container[data-gallery-id="1813"] {
    max-width: 600px;
  }
/*==============================
	Form部分
==============================*/

#orderPayment .formItem #paytype_18 + span + div img {
    width: 120px;   /* 好きな幅に調整 */
    height: auto;
  margin-bottom: .5rem;
}
#price .load_more_img{max-width: 50px}
/*==============================
	footer
==============================*/
footer#lp-footer ul, ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
footer#lp-footer img { height:auto; }
footer#lp-footer p { text-align:center; }
footer#lp-footer h3 { margin-bottom:1em; padding:.8em 1em; text-align:center; font-size:1.06em; font-weight:500; letter-spacing:1px; background:#eee; }
footer#lp-footer h3:nth-of-type(n+2) { margin-top:2em; }

footer#lp-footer .contact { padding:3em 0; }
footer#lp-footer .contact p { line-height:1.6em; }
footer#lp-footer .contact p:first-of-type { font-size:1.1em; letter-spacing:.1em; }
footer#lp-footer .contact p:nth-of-type(n+2) { margin-top:1em; }
footer#lp-footer .contact p a { padding:0 .1em; text-decoration:underline; color:var(--link); }
footer#lp-footer .contact p a[href*='tel'] { display:inline-block; margin:.2em auto; text-decoration:none; font-size:1.4em; letter-spacing:.1em; color:var(--text); }
footer#lp-footer .contact button { display:block; margin:1em auto; background:none; border:none; }
footer#lp-footer .contact button a { display:block; padding:.8em 1.6em; font-size:1.06em; background:#eee; border-radius:10em; }

footer#lp-footer .store { margin:auto; padding:0 1em; overflow-x:auto; white-space:nowrap; }
footer#lp-footer .store li { display:inline-block; width:12em; vertical-align:top; white-space:normal; }
footer#lp-footer .store li:nth-of-type(n+2) { margin-left:.6em; }
footer#lp-footer .store img { display:block; width:100%; margin:.4em auto; }
footer#lp-footer .store img + p { text-align:left; font-size:.9em; line-height:1.4em; }
footer#lp-footer .store a { position:relative; top:-2px; display:inline-block; margin-left:4px; text-decoration:underline; font-size:12px; color:var(--link); }

footer#lp-footer > dl { display:flex; flex-wrap:wrap; align-items:stretch; width:calc(100% - 1em); max-width:800px; margin:1em auto; text-align:left; font-feature-settings:'palt'; }
footer#lp-footer > dl > * { padding:1em; }
footer#lp-footer > dl > *:nth-child(n+3) { margin-top:.2em; }
footer#lp-footer > dl dt { width:15%; background:#f5f5f5; padding-top: 2em;}
footer#lp-footer > dl dt p { 
}
footer#lp-footer > dl dd { width:77%; background:#fafafa;margin-inline-start: 0px; }
footer#lp-footer > dl dd * { text-align:left; font-size:.9em; line-height:1.6em; }
footer#lp-footer > dl dd p { text-align:left; }
footer#lp-footer > dl a { text-decoration:underline; color:var(--link); }
footer#lp-footer .company-info {
  max-width: 800px;
  margin: 0 auto;
}

/* dlを2カラム(25% / 75%)・2段にする */
footer#lp-footer .company-detail {
  display: grid;
  grid-template-columns: 25% 75%;
  border: 1px solid #fff;
  margin: 0;
}
footer#lp-footer .company-detail > * {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}
footer#lp-footer .company-detail > *:nth-child(odd) {
    border-right: none; /* 右側の列だけ線を消す */
}
/* dt, dd のデフォルト余白をリセット */
footer#lp-footer .company-detail dt,
footer#lp-footer .company-detail dd {
  margin: 0;
}
footer#lp-footer .company-detail dt{
  background: #eee;display: flex;
    align-items: center; /* ← 縦中央揃えのポイント */
}
/* タイトル側 */
footer#lp-footer .company-detail dt p {
  display: block;
  font-weight: 600;
  text-align: center;
  margin: auto;
}
footer#lp-footer .company-detail dd{
  background: #fcfcfc;
}
/* 文中の段落余白を少しだけ整える（お好みで） */
footer#lp-footer .company-detail dd p {
  margin: 8px 16px 8px;
  text-align: left;
}

/* SP版：左右に8pxの余白を付ける（25/75はそのまま） */
@media (max-width: 767px) {
 footer#lp-footer .company-info {
    padding: 0 8px;
  }
}
footer#lp-footer .link { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; border-top:1px solid; }
footer#lp-footer .link a { display:block; padding:1.2em .2em; text-align:center; color:var(--text); }

footer#lp-footer .copy {	margin:auto;	padding:1.4em 0;	text-align:center;	font-size:.9em;	color:#fff;	background:rgba(0,0,0,.6);	box-sizing:border-box; }
footer#lp-footer .copy ul { display:flex; justify-content:center; margin-bottom:.8em; }
footer#lp-footer .copy li:nth-of-type(n+2) { border-left:1px solid; }
footer#lp-footer .copy li a { margin:0 1em; color:#fff; }
footer#lp-footer .copyright span { font-family:var(--font-logo); }


@media screen and (min-width:1025px) {
footer#lp-footer .link li { width:calc(100%/4); border-left:1px solid; }
footer#lp-footer .link li:nth-of-type(4n+1) { border-left:none; }
footer#lp-footer .link li:nth-of-type(n+5) { border-top:1px solid; }
}

@media screen and (max-width:1024px) {
footer#lp-footer .link li { width:calc(100%/2); }
footer#lp-footer .link li:nth-of-type(2n+2) { border-left:1px solid; }
footer#lp-footer .link li:nth-of-type(n+3) { border-top:1px solid; }
}

@media screen and (min-width:769px) {
footer#lp-footer > dl { margin-bottom:2em; }
}

@media screen and (max-width:768px) {
footer#lp-footer > dl dt { width:6em; }
footer#lp-footer > dl dd { width:calc(100% - 6em); }
a.cart-btn { bottom:.4em; left:0; right:0; margin:auto; font-size:1.1em; }
}

@media screen and (max-width:425px) {
footer#lp-footer { font-size:.9em; }
footer#lp-footer .contact { padding:2em 0; }
footer#lp-footer > dl > * { padding:.8em .6em; }
a.cart-btn { font-size:1em; }
}


img.load_more_img{
  max-width: 50px;
}