/* ==========================================================================
   1. 固定ページ共通
   ========================================================================== */

/* 1-1. ヒーローセクション 
-------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-inline: auto;
    width: 100%;
    min-height: 300px;
    aspect-ratio: 5 / 2;
}

.hero .hero-bg {
    position: absolute;
  inset: 0;
  z-index: 0;
}

.hero .hero-bg-img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero .container-standard {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.3);
    padding: 3em var(--spacing-sm);
}

.hero h2 {
    font-weight: normal;
    letter-spacing: .1em;
    font-size: clamp(var(--fz20),3vw,var(--fz38));
}

.hero h2 .highlight {
    color: #FC3465;
}


/* 固定ページ「OEMについて」 (page-id-20)
-------------------------------------------------------------- */

body.page-id-20 .hero .hero-text {
    font-size: var(--fz32);
    line-height: 1.8;
    margin-top: 1em;
    font-size: clamp(var(--fz16),3vw,var(--fz28));
    min-height: 3.6em;
}

body.page-id-20 .introduction p {
    font-size: clamp(var(--fz16),2.5vw,var(--fz22));
}

body.page-id-20 .consultation-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    width: 100%;
}

body.page-id-20 .consultation-list li {
    position: relative;
    padding: .8em .8em .8em 4em;
    background-color: #fff0f0;
    line-height: 1.6;
    font-size: var(--fz25);
    width: calc((100% - var(--spacing-md) * 2) / 2);
    font-size: clamp(var(--fz16),2vw,var(--fz25));
    font-size: clamp(var(--fz16),2vw,var(--fz22));
}

body.page-id-20 .consultation-list li::before {
    position: absolute;
    top: 50%;
    left: 1.2em;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #707070;
    background-color: #ffffff;
    content: "";
}

body.page-id-20 .consultation-list li::after {
    position: absolute;
    top: calc(50% - 1.2em);
    left: 2.2em;
    transform: rotate(45deg);
    width: .7em;
    height: 1.4em;
    border: solid #fc3465;
    border-width: 0 1px 1px 0;
    content: "";
}

body.page-id-20 .features-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 24rem));
    gap: var(--spacing-md) 4rem;
    justify-content: center;
}

body.page-id-20 .features-list > li {
    padding: 3rem 2rem 4rem;
    background: linear-gradient(#cb7fde 0%, #a46eb1 100%);
    box-shadow: 0 5px 16px color-mix(in srgb, #cb7fde 20%, #ccc 50%);
    color: #fff;
    border-radius: 2.5rem;
    /* aspect-ratio: 5/6; */
}

body.page-id-20 .features-list > li:nth-child(1) {
    background: 
        url('/wp/wp-content/themes/aroze-child/assets/images/oem_feature_bg_01.png') center/cover no-repeat,
        linear-gradient(#cb7fde 0%, #a46eb1 100%);
    background-size: 45%;
    background-size: 144px;
    background-position: -4% 104%;
}

/* 2番目のリストアイテムの背景 */
body.page-id-20 .features-list > li:nth-child(2) {
    background: 
        url('/wp/wp-content/themes/aroze-child/assets/images/oem_feature_bg_02.png') center/cover no-repeat,
        linear-gradient(#cb7fde 0%, #a46eb1 100%);
    background-size: 65%;
    background-size: 240px;
    background-position: -5% 113%;
}

/* 3番目のリストアイテムの背景 */
body.page-id-20 .features-list > li:nth-child(3) {
    background:
        url('/wp/wp-content/themes/aroze-child/assets/images/oem_feature_bg_03.png') center/cover no-repeat,
        linear-gradient(#cb7fde 0%, #a46eb1 100%);
        background-size: 65%;
        background-size: 200px;
        background-position: center 80%;
}

body.page-id-20 .features-list li h3 {
    text-align: center;
    font-size: var(--fz35);
    line-height: 1.5;
    font-size: clamp(var(--fz20),3.5vw,var(--fz32));
}

body.page-id-20 .features-list li p {
    max-width: 90%;
    margin-inline: auto;
    line-height: 1.8;
    margin-top: 2rem;
    font-size: clamp(var(--fz16),3vw,var(--fz18));
    letter-spacing: unset;
}

body.page-id-20 .features-list .item-wide p {
    letter-spacing: .05em;
    line-height: 1.8;
}

.note-list {
  list-style: none;
}

.note-list li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
font-size: clamp(var(--fz16),4vw,var(--fz18));

}

.note-list li::before {
  content: "※";
  position: absolute;
  left: 0;
}

body.page-id-20 .flow-list {
    counter-reset: step-counter;
    position: relative;
    list-style: none;
    padding: 0;
    max-width: 66.5rem;
    width: 100%;
}

body.page-id-20 .flow-list::before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #A788C3;
    position: absolute;
    top: 0;
    left: 21%;
}

body.page-id-20 .flow-list li {
    counter-increment: step-counter;
    position: relative;
    padding: 1em 2em 1em 25%;
    background-color: #F6CCD7;
    box-shadow: 0 5px 16px color-mix(in srgb, #F6CCD7 20%, #ccc 50%);
    color: #fff;
    border-radius: 4.5rem;
    min-height: 208px;
    min-height: 184px;
}

body.page-id-20 .flow-list li::before {
     content: counter(step-counter, decimal-leading-zero);
    position: absolute;
    left: 8%;
    color: #fff;
    font-size: 1.2em;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(var(--fz28),5vw,var(--fz62));
    font-size: clamp(var(--fz28),5vw,var(--fz55));
}

body.page-id-20 .flow-list li::after {
    content: "";
    width: 2px;
    height: 75%;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 21%;
    transform: translateY(-50%);
}

body.page-id-20 .flow-list li:not(:first-of-type) {
    margin-top: 2em;
}

body.page-id-20 .flow-list li h3 {
    letter-spacing: .1em;
    font-weight: normal;
    font-size: clamp(var(--fz20),5vw,var(--fz40));
    font-size: clamp(var(--fz20),5vw,var(--fz35));
}

body.page-id-20 .flow-list li p {
    color: #707070;
    line-height: 1.5;
    margin-top: 1rem;
    font-size: clamp(var(--fz16),3vw,var(--fz22));
    font-size: clamp(var(--fz16),3vw,var(--fz20));
}


/* 固定ページ「アローゼについて」 (page-id-25)
-------------------------------------------------------------- */
body.page-id-25{
     overflow-x: hidden;
}

body.page-id-25 p {
    font-size: clamp(var(--fz16),2.5vw,var(--fz22));
}

body.page-id-25 .hero-title {
    font-weight: bold;
}

/* ご挨拶 */
.signature {
    align-self: flex-end;
    margin-top: var(--spacing-lg); /* 64px */
    color: #707070;
}

.section-bg .container {
    margin-top: unset;
}

.section-bg {
    position: relative;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 6rem 2rem;
    margin-top: var(--spacing-lg); /* 64px */
}

.section-bg-img {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.grid-table {
  border-collapse: collapse;
  width: 100%;
}

.grid-table tr {
  display: grid;
  grid-template-columns: 200px 1fr; /* 1列目固定幅、2列目可変 */
}

.grid-table tr:not(:last-of-type) th,
.grid-table tr:not(:last-of-type) td {
    border-bottom: none;
}

.grid-table th {
  font-weight: bold;
  text-align: left;
  padding: 0.6em 1.5em;
  color: #A788C3;
}

.grid-table td {
    padding: 0.6em 1.5em 0.6em 2em;
}

.grid-table th,
.grid-table td,
.grid-table td p,
.grid-table td a {
    font-size: clamp(var(--fz16),2.5vw,var(--fz20));
    text-decoration: none;
}

.grid-table td a {
    color: var(--color-text-primary);
}

/* コンセプト */
.concept.section-bg {
    padding-top: 16rem;
    margin-top: 18rem;
}

.concept .container {
    position: relative;
}

.concept .container .concept-img {
    position: absolute;
    top: -24rem;
    left: 0;
    min-height: 160px;
    object-fit: cover;
    object-position: left;
}

/* 会社概要表 */
.company-overview .grid-table {
    background-color: rgb(255 255 255 / 80%);
}

.company-overview .grid-table th,
.company-overview .grid-table td {
  border: 1px solid #ccc;
}

.company-overview .grid-table th span {
    font-size: var(--fz16);
}

.company-overview .grid-table td {
    border-left: none;
}

/* 外側：中央配置 & 文字幅に縮むブロック */
.marker-highlight {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.8em auto 1.6em;
}

/* 内側：マーカー塗り（インライン） */
.marker-highlight .marker-text {
  display: inline; 
  padding: 0 .6em;
  line-height: 1.5;
  background-image: linear-gradient(transparent 60%, #f6ccd7 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; 
  word-break: break-word;
  font-size: clamp(var(--fz22),4vw,var(--fz32));
}

/* 沿革表 */
.company-timeline .grid-table tr {
    background-image: linear-gradient(to right, #A788C3 3px, transparent 3px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.company-timeline .grid-table tr:not(:last-of-type) {
    margin-bottom: 1rem;
}

.company-timeline .grid-table th {
    font-weight: normal;
}


/* --------------------------------------------------------------
   スマートフォン (768px以下)
-------------------------------------------------------------- */
@media (max-width: 768px) {
    /* -- 固定ページ「OEMについて」 -- */
    body.page-id-20 .hero {
        aspect-ratio: 4 / 3;
    }
    body.page-id-20 .hero .container-standard {
        padding: 2em var(--spacing-sm);
    }
    body.page-id-20 .features-list > li {
        padding: 2rem 1.5rem 3rem;
    }
    body.page-id-20 .consultation-list {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    body.page-id-20 .consultation-list li {
        width: 100%;
        padding-left: 3.5em;
    }
    body.page-id-20 .consultation-list li::before {
        left: 1em;
    }
    body.page-id-20 .consultation-list li::after {
        left: 2em;
    }

    body.page-id-20 .flow-list::before {
        left: 50%;
        transform: translate(-50%);
    }
    body.page-id-20 .flow-list li {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1.5rem;
        min-height: auto;
        border-radius: 2.5rem;
    }
    body.page-id-20 .flow-list li::before {
        order: 1;
        position: static;
        transform: none;
    }
    body.page-id-20 .flow-list li::after {
        order: 2;
        content: "";
        position: static;
        transform: none;
        width: 70%;
        height: 2px;
        margin-block: 1rem;
    }
    body.page-id-20 .flow-list li h3 {
        order: 3;
        text-align: center;
    }
    body.page-id-20 .flow-list li p {
        order: 4;
        text-align: left;
        max-width: 100%;
    }

     /* -- 固定ページ「アローゼについて」 -- */
     .concept .container .concept-img {
        top: -16rem;
     }

     .section-bg {
        padding-inline: 1rem;
     }

     .concept.section-bg {
        padding-top: 8rem;
        margin-top: 12rem;
    }
    
     .grid-table tr {
        grid-template-columns: 8em 1fr;
     }

     .grid-table th,
     .grid-table td {
        padding-inline: 0.8em;
     }

    .grid-table tr,
    .grid-table th,
    .grid-table td,
    .grid-table td p,
    .grid-table td a {
    font-size: clamp(var(--fz12),2.4vw,var(--fz16));
    letter-spacing: unset;
    line-height: 1.8;
}

.company-overview .grid-table th span {
    font-size: var(--fz12);
}

.company-overview .grid-table td svg {
    width: 1rem;
    height: 1rem;
}

}


/* ----------------------------------------
   お問い合わせフォーム
---------------------------------------- */

/* フォーム全体のコンテナ設定 */
.wpcf7 {
    max-width: 50rem; /* 800px */
    margin-inline: auto;
    font-family: "Noto Serif JP", "游明朝", "YuMincho", serif;
}

/* 各入力項目グループ（dl）の余白 */
.wpcf7-form dl {
    margin-bottom: var(--spacing-lg); /* 64px */
}

/* ラベル（dt）のスタイル */
.wpcf7-form dt {
    font-size: var(--fz18);
    font-weight: bold;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm); /* 16px */
    letter-spacing: .05em;
}

/* 必須マーク（※必須）のスタイル */
.wpcf7-form .required-mark {
    color: #fc3465;
    font-size: var(--fz16);
    margin-left: var(--spacing-xs); /* 8px */
    font-weight: normal;
}

/* 入力欄グループ（dd）の共通スタイル */
.wpcf7-form dd {
    margin-left: 0;
}

/* 姓名・フリガナの横並びレイアウト
  ※HTMLの「姓」と「名」の間の全角スペースは削除してください */
.wpcf7-form dd:has([data-name="your-lastname"]):has([data-name="your-firstname"]),
.wpcf7-form dd:has([data-name="your-lastname-kana"]):has([data-name="your-firstname-kana"]) {
    display: flex;
    flex-wrap: wrap; /* スマホ表示で折り返す */
    gap: var(--spacing-md); /* 32px */
}
.wpcf7-form dd:has([data-name="your-lastname"]) .wpcf7-form-control-wrap,
.wpcf7-form dd:has([data-name="your-lastname-kana"]) .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 12.5rem; /* 200px */
}

/* 入力欄（input, textarea, select）の共通スタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 1rem; /* 16px */
    border: 1px solid #dcdcdc;
    border-radius: 0.25rem; /* 4px */
    background-color: #ffffff;
    font-family: inherit;
    font-size: var(--fz16);
    color: var(--color-text-primary);
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* フォーカス時のスタイル */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: #a46eb1;
    box-shadow: 0 0 0 3px rgba(164, 110, 177, 0.2);
}

/* プレースホルダーのスタイル */
.wpcf7-form ::placeholder {
    color: #ababab;
    opacity: 1;
}

/* テキストエリアの高さ調整 */
.wpcf7-form textarea {
    min-height: 12.5rem; /* 200px */
    resize: vertical;
}

/* 注釈テキスト（.note）のスタイル */
.wpcf7-form .note {
    font-size: var(--fz14);
    color: #555555;
    line-height: 1.6;
    margin-top: var(--spacing-xs); /* 8px */
}

/* 注釈内のリンクスタイル */
.wpcf7-form .note a {
    color: #a46eb1;
    font-size: inherit;
    text-decoration: underline;
    transition: color 0.3s;
}
.wpcf7-form .note a:hover {
    color: #cb7fde;
}

/* 送信ボタン（.btn-moreを参考に） */
.wpcf7-form .wpcf7-submit {
    display: block;
    width: 100%;
    max-width: 22rem; /* 352px */
    margin-inline: auto;
    margin-top: var(--spacing-lg); /* 64px */
    padding: 0.75rem 1rem; /* 12px 16px */
    border: none;
    border-radius: 999px; /* 円形の角丸 */
    background: linear-gradient(90deg, #a46eb1 0%, #cb7fde 100%);
    color: #ffffff;
    font-weight: bold;
    font-size: var(--fz18);
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(164, 110, 177, 0.3);
}

/* --- Contact Form 7 バリデーション & メッセージ --- */

/* エラーメッセージ（入力欄の下） */
.wpcf7-form span.wpcf7-not-valid-tip {
    display: block;
    margin-top: var(--spacing-xs);
    color: #fc3465;
    font-size: var(--fz14);
}

/* エラーが出た入力欄のボーダー */
.wpcf7-form .wpcf7-not-valid {
    border-color: #fc3465 !important;
}

/* 送信後のメッセージ全体 */
.wpcf7 div.wpcf7-response-output {
    margin: var(--spacing-md) 0;
    padding: 1.5rem; /* 24px */
    border: 1px solid;
    border-left-width: 0.5rem; /* 8px */
    border-radius: 0.25rem; /* 4px */
}
/* 成功メッセージ */
.wpcf7 div.wpcf7-mail-sent-ok {
    background-color: #f5f1f9;
    border-color: #a46eb1;
    color: var(--color-text-primary);
}
/* 失敗・エラーメッセージ */
.wpcf7 div.wpcf7-validation-errors,
.wpcf7 div.wpcf7-spam-blocked,
.wpcf7 div.wpcf7-mail-sent-ng {
    background-color: #fff0f0;
    border-color: #fc3465;
    color: var(--color-text-primary);
}

/* --- レスポンシブ対応 (768px以下) --- */
@media (max-width: 768px) {
    .wpcf7-form dt {
        font-size: var(--fz16);
    }
}