/*
 * SDI ディップコーターページ専用CSS（整理版）
 * 対象HTML: index.php
 *
 * 【編集時のルール】
 * 1. 修正したい画面名を下の目次から検索する
 * 2. PCの基本指定 → 直後のメディアクエリ、の順に確認する
 * 3. 同じ条件の重複指定は、表示に影響しない範囲で統合済み
 * 4. カスケード順が必要な指定と画面幅ごとの指定は維持
 *
 * 【目次】
 * 01 基本設定・メインビジュアル
 * 02 比較表（基本設定）
 * 03 フローティングページ内ナビ
 * 04 私たちのディップコーターで解決できること
 * 05 ヘッダー・ハンバーガーメニュー
 * 06 ディップコーターの選び方
 * 07 製品カテゴリ・製品一覧・製品比較表
 * 08 学術研究における課題解決事例
 * 09 ディップコーティング支援事業
 * 10 最適な装置選びのご支援
 * 11 装置レンタル・受託コーティング
 * 12 サイト内検索
 * 13 新着情報・お役立ちコラム
 * 14 下部ナビゲーション
 * 15 お問い合わせ・ページトップ
 * 16 フッター
 */

/* ========================================================
   01. 基本設定・メインビジュアル
======================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0px;
    padding: 0px;
    overflow-x:hidden;
}

a img:hover {
    filter:alpha(opacity=70);
    opacity:0.7;
}

:root {
    /* Font Family */
    --font-gothic:
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
    --font-mincho:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
    /* Green Palette */
    --green-deep: #014f27;
    --green-primary: #026f35;
    --green-hover: #19a84b;
    --green-muted: #709e65;
    --green-medium: #9bc986;
    --green-light: #c2d9c3;
    --green-background: #dbe8d7;
    /* Existing aliases */
    --link-color: var(--green-primary);
    --over-color: var(--green-hover);
    --red-light: #e5caca;
}

h1,
h2,
h3,
h4,
p {
    margin: 0px;
    padding: 0px;
}

h1,
h2 {
    font-family: var(--font-mincho);
    font-weight: 700;
}

#maincontents {
    width: 100%;
    margin: 0 auto;
}

br.sp-only {
    display: none;
}
br.pc-only {
    display: none;
}

#main-visual {
    position: relative;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    color: #fff;
    background: #111;
}

.mv-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-overlay {
    position: absolute;
    inset: 0;
    background:
    linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.24) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.45) 100%);
}

@media screen and (max-width: 767px) {
    .mv-overlay {
        background:
        linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.15) 100%),
        linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.03) 40%, rgba(0,0,0,.30) 100%);
    }
}

.mv-content {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 80px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 80px;
}

.mv-content h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 600;
    letter-spacing: .04em;
    font-family: var(--font-gothic);
}

.mv-label-mark {
    display: inline-block;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    background: linear-gradient(
    135deg,
    #d7aa32 0%,
    #f1ce60 50%,
    #b58418 100%
    );
    clip-path: polygon(
    0 0,
    76% 0,
    100% 50%,
    76% 100%,
    0 100%
    );
}

#our-strengths {
    position: relative;
    min-height: 260px;
    max-width: 980px;
}

.strength-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition:
    opacity 3s ease,
    visibility 0s linear 3s;
    pointer-events: none;
}

.strength-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition:
    opacity 3s ease,
    visibility 0s linear 0s;
    pointer-events: auto;
}

.strength-title {
    margin: 0 0 24px;
    font-size: clamp(42px, 5.2vw, 76px);
    font-family: var(--font-mincho);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.strength-title  br.pc-only {
        display: inline;
    }

.strength-data {
    margin: 0 0 28px;
    font-size: clamp(24px, 2.7vw, 42px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: .05em;
    text-shadow: 0 3px 14px rgba(0,0,0,.45);
    font-family: var(--font-gothic);
}

.strength-detail {
    max-width: 760px;
    margin: 0;
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.9;
    font-weight: 500;
    letter-spacing: .04em;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    font-family: var(--font-gothic);
}

@media (max-width: 767px) {
    #main-visual {
        min-height: 560px;
    }

    .mv-video {
        object-position: right center;
    }

    .mv-content {
        width: calc(100% - 40px);
        padding-top: 40px;
    }

    .mv-content .sp-only{
        display: inline;
    }

    #our-strengths {
        min-height: 210px;
    }

    .strength-title {
        font-size: 34px;
    }

    .strength-data {
        font-size: 22px;
    }

    .strength-detail {
        display: none;
    }
}

/* ========================================================
   02. 比較表（基本設定）
   ※詳細な表デザインは「07. 製品カテゴリ」内にもある
======================================================== */

/* 比較対象外の製品列を非表示 */

.comparison-table .is-hidden {
    display: none;
}

.comparison-table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    width:1100px;
    margin: 0 auto 80px;
    overflow: auto;
    overflow-x: scroll;
    border: solid 1px #ddd;
}

.comparison-table {
    width: 100%;
    max-width: none;
}

.comparison-table-area::before {
    content: "※上記一覧の「仕様性能比較」にチェックすると、比較対象を絞り込めます";
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.comparison-table-area {
    width: 1100px;
    max-width: 100%;
    margin: 80px auto;
}

/* ========================================================
   03. フローティングページ内ナビ
======================================================== */

/* 最初は非表示 */

#floating-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    z-index: 900;
    transform: none;
}

/* メインビジュアル通過後に表示 */

#floating-nav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   パソコン版
======================================== */

/* 画面右下に固定 */

/* メニュー本体 */

.floating-nav-pc {
    display: flex;
    flex-direction: column;
    width: 120px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-shadow: -2px -2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 通常のメニュー */

#floating-nav a {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid #e5e5e5;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

#floating-nav a:hover {
    background: var(--green-muted);
    color: #fff;
}

.floating-nav-pc > a:last-child {
    border-bottom: 0;
}

/* 製品カテゴリ */

.floating-nav-sub {
    display: flex;
    flex-direction: column;
    background: var(--green-background);
    border-bottom: 1px solid #e5e5e5;
}

/* 製品カテゴリをインデント */

#floating-nav .floating-nav-sub a {
    position: relative;
    padding: 7px 14px 7px 30px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--green-deep);
    font-size: 12px;
    text-align: left;
}

/* インデント位置に小さな記号 */

#floating-nav .floating-nav-sub a::before {
    content: "　";
    position: absolute;
    left: 16px;
}

#floating-nav .floating-nav-sub a:last-child {
    border-bottom: 0;
}

#floating-nav .floating-nav-sub a:hover {
    background: var(--green-muted);
    color: #fff;
}

/* PCではスマホ版と開閉ボタンを非表示 */

.floating-nav-sp,
#floating-nav-toggle {
    display: none;
}

/* ========================================
   タブレット・スマホ版
======================================== */

@media screen and (max-width: 1100px) {
    #floating-nav {
        top: auto;
        right: 15px;
        bottom: 15px;
        transform: none;
    }

    .floating-nav-pc {
        display: none;
    }

    /* 開閉ボタン */

    #floating-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 104px;
        height: 44px;
        padding: 0 17px;
        background: var(--green-deep);
        color: #fff;
        border: 0;
        border-radius: 22px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
    }

    /* 上向き矢印 */

    .floating-nav-arrow {
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: translateY(2px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    /* 開いているときは下向き */

    #floating-nav.is-open .floating-nav-arrow {
        transform: translateY(-2px) rotate(225deg);
    }

    /* リンク一覧は最初は非表示 */

    .floating-nav-sp {
        position: absolute;
        right: 0;
        bottom: 54px;
        width: 190px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
        overflow: hidden;
    }

    /* ボタンを押したときだけ表示 */

    #floating-nav.is-open .floating-nav-sp {
        display: flex;
        flex-direction: column;
    }

    #floating-nav .floating-nav-sp a {
        min-width: 0;
        padding: 12px 34px 12px 16px;
        color: var(--green-deep);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }

    #floating-nav .floating-nav-sp a::after {
        content: "〉";
        position: absolute;
        right: 13px;
    }

    #floating-nav .floating-nav-sp a:last-child {
        border-bottom: 0;
    }
}

@media screen and (max-width: 1100px) {
    #site-header .header-logo {
        transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
    }

    #site-header.floating-nav-visible .header-logo {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ========================================================
   04. 私たちのディップコーターで解決できること
======================================================== */

/* ========================================
   私たちのディップコーターで解決できること
======================================== */

#our-solutions {
    position: relative;
    overflow: hidden;
}

#our-solutions .our-solutions-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/bg-solution.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#our-solutions .inner {
    position: relative;
    z-index: 1;
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 130px 0 140px;
    /* ↓追加 */
    opacity: 0;
    transform: translateY(3px);
    transition:
    opacity 1.8s ease,
    transform 1.8s ease;
}

#our-solutions.is-visible .inner {
    opacity: 1;
    transform: translateY(0);
}

#our-solutions h2 {
    width: 100%;
    margin: 0 0 75px;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.08em;
    color: #111;
}

#main-messages {
    width: 760px;
    max-width: 100%;
}

#main-messages p {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #222;
}

#main-messages br {
    display: block;
    content: "";
    margin: 45px 0;
}

#main-messages strong {
    font-family: var(--font-gothic);
    font-weight: 800;
    font-size: 24px;
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 768px) {
    #our-solutions .our-solutions-bg {
        background-position: center center;
    }

    #our-solutions .inner {
        width: calc(100% - 40px);
        padding: 75px 0 80px;
        opacity: 1;
        transform: none;
        transition: none;
    }

    #our-solutions h2 {
        width: auto;
        margin-bottom: 45px;
        font-size: 30px;
        line-height: 1.5;
    }

    #main-messages {
        width: auto;
    }

    #main-messages p {
        font-size: 16px;
        line-height: 1.9;
    }

    #main-messages br {
        margin: 0;
    }
    
    /* 改行の後に、もう1行分の空行を入れる */
    #main-messages br + p::before {
        content: "\A";
        white-space: pre;
    }
    #main-messages > p {
        display: inline;
        margin: 0;
        padding: 0;
    }
}

/* ========================================================
   05. ヘッダー・ハンバーガーメニュー
======================================================== */

/* ========================================
   ヘッダー
======================================== */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    color: #fff;
    background: transparent;
    transition: background-color 0.35s ease;
}

#site-header .header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 0 48px;
    box-sizing: border-box;
    transition: height 0.3s ease;
}

#site-header a {
    color: inherit;
    text-decoration: none;
}

#site-header .header-logo {
    flex: 0 0 auto;
    width: 200px;
    margin: 0 55px 0 0;
    padding: 0;
}

#site-header .header-logo img {
    display: block;
    width: 100%;
    height: auto;
}

#site-header .global-nav {
    flex: 1 1 auto;
}

#site-header .global-nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

#site-header .global-nav li {
    margin: 0;
    padding: 0;
}

#site-header .global-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 0 22px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: height 0.3s ease;
}

#site-header .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 24px;
    margin-left: 24px;
}

#site-header .header-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    height: 35px;
    padding: 0 20px;
    border: 1px solid #fff;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

#site-header .header-download {
    min-width: 170px;
    border-color: var(--green-hover);
    background-color: var(--green-hover);
}

#site-header .header-contact {
    min-width: 160px;
    background-color: transparent;
}

#site-header .header-button-icon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

#site-header .header-button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#site-header .header-language {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
}

#site-header .header-language a,
#site-header .header-language span {
    opacity: 0.7;
}

#site-header .header-language .is-current {
    color: var(--green-hover);
    opacity: 1;
}

/* 最初はロゴだけ表示 */

#site-header .global-nav,
#site-header .header-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

/* スクロール後 */

#site-header.scrolled {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
}

#site-header.scrolled .header-inner {
    height: 68px;
}

#site-header.scrolled .global-nav a {
    height: 68px;
}

#site-header.scrolled .global-nav,
#site-header.scrolled .header-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ========================================
   幅が狭いPC
======================================== */

@media screen and (max-width: 1500px) {
    #site-header .header-inner {
        padding-right: 30px;
        padding-left: 30px;
    }

    #site-header .header-logo {
        width: 220px;
        margin-right: 25px;
    }

    #site-header .global-nav a {
        padding-right: 13px;
        padding-left: 13px;
        font-size: 13px;
    }

    #site-header .header-actions {
        gap: 12px;
        margin-left: 15px;
    }

    #site-header .header-button {
        padding-right: 14px;
        padding-left: 14px;
        font-size: 13px;
    }

    #site-header .header-download {
        min-width: 160px;
    }

    #site-header .header-contact {
        min-width: 145px;
    }
}

/* ========================================
   タブレット・スマートフォン
======================================== */

@media screen and (max-width: 1100px) {
    #site-header .header-inner {
        height: 76px;
        padding: 0 25px;
    }

    #site-header .header-logo {
        width: 200px;
        margin: 0;
    }

    #site-header .global-nav,
    #site-header .header-actions {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    #site-header .header-inner {
        height: 68px;
        padding: 0 20px;
    }

    #site-header .header-logo {
        width: 175px;
    }
}

/* ========================================
   タブレット・スマホ ハンバーガーメニュー
======================================== */

/* PCでは表示しない */

#site-header .menu-toggle {
    display: none;
}

/* ========================================
   1100px以下
======================================== */

@media screen and (max-width: 1100px) {
    #site-header .header-inner {
        height: 76px;
        padding: 0 25px;
    }

    #site-header.scrolled .header-inner {
        height: 68px;
    }

    #site-header .header-logo {
        width: 200px;
        margin-right: 0;
    }

    /* ----------------------------------------
                   三本線
                   最初は非表示
                ---------------------------------------- */

    #site-header .menu-toggle {
        position: relative;
        z-index: 1200;
        display: block;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 10px;
        border: 0;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        cursor: pointer;
        transition:
        opacity .25s ease,
        visibility .25s ease;
    }

    /* スクロールしたら三本線を表示 */

    #site-header.scrolled .menu-toggle {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 三本線 */

    #site-header .menu-toggle span {
        position: absolute;
        left: 10px;
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        transition:
        top .25s ease,
        transform .25s ease,
        opacity .25s ease;
    }

    #site-header .menu-toggle span:nth-child(1) {
        top: 13px;
    }

    #site-header .menu-toggle span:nth-child(2) {
        top: 21px;
    }

    #site-header .menu-toggle span:nth-child(3) {
        top: 29px;
    }

    /* ----------------------------------------
                   PC用ナビ表示をスマホでは解除
                ---------------------------------------- */

    #site-header.scrolled .global-nav,
    #site-header.scrolled .header-actions {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ----------------------------------------
                   開いたメニュー
                ---------------------------------------- */

    #site-header.menu-open {
        background: rgba(0, 0, 0, .75);
        backdrop-filter: blur(12px);
    }

    #site-header.menu-open .global-nav,
    #site-header.menu-open .header-actions {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* メインナビ */

    #site-header .global-nav {
        position: fixed;
        top: 68px;
        left: 0;
        z-index: 1100;
        width: 100%;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        padding: 20px 25px 0;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .75);
    }

    #site-header .global-nav ul {
        display: block;
    }

    #site-header .global-nav li {
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    #site-header .global-nav a,
    #site-header.scrolled .global-nav a {
        display: block;
        height: auto;
        padding: 16px 5px;
        font-size: 14px;
        text-align: left;
    }

    /* 資料DL・お問い合わせ・言語 */

    #site-header .header-actions {
        position: fixed;
        top: 353px;
        left: 0;
        z-index: 1101;
        display: block;
        width: 100%;
        margin: 0;
        padding: 20px 25px 30px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, .75);
    }

    #site-header .header-button {
        width: 100%;
        height: 44px;
        margin: 0 0 12px;
    }

    #site-header .header-language {
        justify-content: center;
        margin-top: 20px;
    }

    /* ----------------------------------------
                   三本線 → ×
                ---------------------------------------- */

    #site-header.menu-open .menu-toggle span:nth-child(1) {
        top: 21px;
        transform: rotate(45deg);
    }

    #site-header.menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    #site-header.menu-open .menu-toggle span:nth-child(3) {
        top: 21px;
        transform: rotate(-45deg);
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #site-header .header-inner {
        height: 68px;
        padding: 0 20px;
    }

    #site-header .header-logo {
        width: 175px;
    }

    #site-header .global-nav {
        padding-right: 20px;
        padding-left: 20px;
    }

    #site-header .header-actions {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* ========================================================
   06. ディップコーターの選び方
======================================================== */

/* ========================================
   ディップコーターの選び方
======================================== */

#choosing-dip-coater {
    padding: 120px 0;
    background: #f3f3f1;
}

#choosing-dip-coater > h2,
#choosing-dip-coater > .choices {
    width: calc(100% - 80px);
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

#choosing-dip-coater h2 {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

#choosing-dip-coater .choices {
    padding: 0;
    list-style: none;
}

#choosing-dip-coater .features dt {
    position: relative;
    padding-left: 0;
    color: var(--green-primary);
    margin: 0 0 22px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

#choosing-dip-coater .features dt::before {
    content: "〉";
    position: absolute;
    top: 0;
    left: -28px;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.4;
}

/* ========================================
   上4項目
======================================== */

#choosing-dip-coater .choices > li:not(#view-case-studies) {
    margin: 0 0 18px;
}

#choosing-dip-coater .choice-link {
    position: relative;
    display: block;
    min-height: 210px;
    padding: 55px 360px 45px 75px;
    overflow: hidden;
    box-sizing: border-box;
    color: #111;
    text-decoration: none;
    transition:
    transform 0.25s ease;
}

/* 1・3枚目のグラデーション */

#chose-standard-models .choice-link,
#chose-release-agent-models .choice-link {
    background: linear-gradient(
    90deg,
    #ffffff 0%,
    #fbfbfb 55%,
    #ececec 100%
    );
}

/* 2・4枚目のグラデーション */

#chose-special-function-models .choice-link,
#chose-mass-production-models .choice-link {
    background: linear-gradient(
    90deg,
    #ffffff 0%,
    #fdfdfd 72%,
    #f2f2f2 100%
    );
}

/* ========================================
   右側の製品画像
======================================== */

#choosing-dip-coater .choice-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 340px;
    height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

#chose-standard-models .choice-link::after {
    background-image:
    url("../images/choice-standard-models.png");
    background-size: 320px auto;
    background-position: right 30px center;
}

#chose-special-function-models .choice-link::after {
    background-image:
    url("../images/choice-special-function-models.png");
    background-size: 200px auto;
    background-position: right 100px center;
}

#chose-release-agent-models .choice-link::after {
    background-image:
    url("../images/choice-release-agent-models.png");
    background-size: 180px auto;
    background-position: right 100px center;
}

#chose-mass-production-models .choice-link::after {
    background-image:
    url("../images/choice-mass-production-models.png");
    background-size: 200px auto;
    background-position: right 100px center;
}

/* ========================================
   文章部分
======================================== */

#choosing-dip-coater .features {
    position: relative;
    z-index: 2;
    margin: 0;
}

#choosing-dip-coater .features dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.025em;
}

/* ========================================
   ホバー
======================================== */

#choosing-dip-coater .choice-link:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 4px -2px #cccccc;
}

#choosing-dip-coater .choice-link:hover .features dt {
    color: var(--green-hover);
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #choosing-dip-coater {
        padding: 90px 0;
    }

    #choosing-dip-coater > h2,
    #choosing-dip-coater > .choices {
        width: calc(100% - 50px);
        max-width: none;
    }

    #choosing-dip-coater h2 {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        font-size: 32px;
    }

    #choosing-dip-coater .choice-link {
        min-height: 190px;
        padding: 45px 280px 40px 40px;
    }

    #choosing-dip-coater .choice-link::after {
        width: 260px;
    }

    #chose-standard-models .choice-link::after {
        background-size: 250px auto;
        background-position: right 15px center;
    }

    #chose-special-function-models .choice-link::after {
        background-size: 165px auto;
        background-position: right 55px center;
    }

    #chose-release-agent-models .choice-link::after {
        background-size: 150px auto;
        background-position: right 55px center;
    }

    #chose-mass-production-models .choice-link::after {
        background-size: 165px auto;
        background-position: right 55px center;
    }

    #choosing-dip-coater .features dt {
        font-size: 21px;
    }

    #choosing-dip-coater .features dd {
        font-size: 13px;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #choosing-dip-coater {
        padding: 60px 0;
    }

    #choosing-dip-coater > h2,
    #choosing-dip-coater > .choices {
        width: calc(100% - 30px);
    }

    #choosing-dip-coater h2 {
        margin-top: 1em;
        margin-bottom: 1.2em;
        font-size: 27px;
    }

    #choosing-dip-coater .choices > li:not(#view-case-studies) {
        margin-bottom: 14px;
    }

    #choosing-dip-coater .choice-link {
        min-height: 0;
        padding: 30px 25px 190px 45px;
    }

    #choosing-dip-coater .features dt::before {
        left: -22px;
        font-size: 20px;
        line-height: 1.45;
    }

    #choosing-dip-coater .choice-link::after {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 170px;
        background-position: center center;
    }

    #chose-standard-models .choice-link::after {
        background-size: auto 150px;
        background-position: center center;
    }

    #chose-special-function-models .choice-link::after {
        background-size: auto 145px;
        background-position: center center;
    }

    #chose-release-agent-models .choice-link::after {
        background-size: auto 145px;
        background-position: center center;
    }

    #chose-mass-production-models .choice-link::after {
        background-size: auto 145px;
        background-position: center center;
    }

    #choosing-dip-coater .features dt {
        margin-bottom: 14px;
        font-size: 20px;
    }

    #choosing-dip-coater .features dd {
        font-size: 13px;
        line-height: 1.8;
    }

    #choosing-dip-coater .choice-link:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ========================================
   学術研究における課題解決事例
======================================== */

#choosing-dip-coater .choices > #view-case-studies {
    margin-top: 60px;
}

#choosing-dip-coater #view-case-studies .choice-link {
    min-height: 210px;
    padding: 30px 390px 30px 55px;
    background: transparent;
}

#choosing-dip-coater #view-case-studies .choice-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 360px;
    height: 100%;
    background-image:
    url("../images/choice-case-studies.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 360px auto;
    pointer-events: none;
}

/*---------------------------------------------------------*/

#view-case-studies .features dt {
    position: relative;
    padding-left: 0;
}

#view-case-studies .features dt::before {
    content: "〉";
    position: absolute;
    top: 0;
    left: -28px;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.4;
}

/* ========================================
   学術研究における課題解決事例
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #choosing-dip-coater .choices > #view-case-studies {
        margin-top: 45px;
    }

    #choosing-dip-coater #view-case-studies .choice-link {
        min-height: 190px;
        padding: 30px 280px 30px 40px;
    }

    #choosing-dip-coater #view-case-studies .choice-link::after {
        width: 260px;
        background-size: 260px auto;
        background-position: right bottom;
    }

    #view-case-studies .features dt {
        padding-left: 24px;
    }

    #view-case-studies .features dt::before {
        font-size: 23px;
    }
}

/* ========================================
   学術研究における課題解決事例
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #choosing-dip-coater .choices > #view-case-studies {
        margin-top: 35px;
    }

    #choosing-dip-coater #view-case-studies .choice-link {
        min-height: 0;
        padding: 30px 25px 190px 45px;
    }

    #choosing-dip-coater #view-case-studies .choice-link::after {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 150px;
        background-size: auto 145px;
        background-position: center bottom;
    }

    #view-case-studies .features dt {
        padding-left: 0;
    }

    #view-case-studies .features dt::before {
        left: -22px;
        font-size: 20px;
        line-height: 1.45;
    }
}

/* ========================================================
   07. 製品カテゴリ・製品一覧・製品比較表
======================================================== */

/* ========================================
   製品カテゴリ共通
======================================== */

.product-category-section {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 80px auto;
    padding: 100px 60px 120px;
    box-sizing: border-box;
    background: #fff;
}

.product-category-section h3 {
    margin: 0 0 30px;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

/* ========================================
   製品選びのポイント
======================================== */

.product-category-section .advice {
    margin-bottom: 70px;
}

.product-category-section .how-to-choose {
    margin: 0;
}

.product-category-section .how-to-choose dt {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 12px;
    border-radius: 3px;
    background: var(--green-muted);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.product-category-section .how-to-choose dd {
    max-width: 920px;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    white-space: pre-line;
}

/* ========================================
   製品一覧 共通
======================================== */

.product-category-section .product-list,
#renting-models .product-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-category-section .product-item,
#renting-models .product-item {
    padding: 70px 0;
    border-top: 1px solid #ccc;
}

.product-category-section .product-item:last-child,
#renting-models .product-item:last-child {
    padding-bottom: 0;
}

/* ========================================
   製品ヘッダー 共通
======================================== */

.product-category-section .product-item-header,
#renting-models .product-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 35px;
}

.product-category-section .product-item-header > a,
#renting-models .product-item-header > a {
    display: block;
    flex: 1 1 auto;
    color: #111;
    text-decoration: none;
}

.product-category-section .product-name,
#renting-models .product-name {
    position: relative;
    margin: 0 0 18px;
    padding-left: 24px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.03em;
    color: var(--green-primary);
}

.product-category-section .product-item-header > a:hover .product-name,
#renting-models .product-item-header > a:hover .product-name {
    color: var(--green-hover);
}

.product-category-section .product-name::before,
#renting-models .product-name::before {
    content: "〉";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 28px;
    line-height: 1.35;
}

.product-category-section .product-number,
.product-category-section .product-category,
#renting-models .product-number,
#renting-models .product-category {
    display: flex;
    margin: 0;
    margin-left: 24px;
    font-size: 12px;
    line-height: 1.7;
}

.product-category-section .product-number dt,
.product-category-section .product-category dt,
#renting-models .product-number dt,
#renting-models .product-category dt {
    margin: 0;
}

.product-category-section .product-number dt::after,
.product-category-section .product-category dt::after,
#renting-models .product-number dt::after,
#renting-models .product-category dt::after {
    content: "：";
}

.product-category-section .product-number dd,
.product-category-section .product-category dd,
#renting-models .product-number dd,
#renting-models .product-category dd {
    margin: 0;
}

/* 比較チェック */

.product-category-section .product-item-header > label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 190px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    border-color: var(--green-muted);
    background: var(--green-background);
    color: var(--green-primary);
    font-weight: 600;
}

.product-category-section .product-item-header {
    position: relative;
}

.product-category-section .comparable {
    margin: 0;
}

.product-category-section .product-item-header > .compare-guide {
    position: absolute;
    right: 0;
    top: 58px;
    /* 微調整 */
    width: max-content;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.product-category-section .compare-guide a {
    color: var(--green-primary);
    text-decoration: underline;
}

.product-category-section .compare-guide a:hover {
    color: var(--green-hover);
}

.compare-guide a::before {
    content: "一覧表で比較";
}
.product-category-section .compare-guide::before {
    content: "チェックした製品を";
}
/* ========================================
   製品内容 共通
======================================== */

.product-category-section .product-item-content,
#renting-models .product-item-content {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    align-items: center;
    gap: 55px;
}

.product-category-section .product-item-content > a,
#renting-models .product-item-content > a {
    display: block;
}

.product-category-section .product-item-image,
#renting-models .product-item-image {
    display: block;
    width: 100%;
    height: auto;
}

.product-category-section .certification:has(dd:empty),
#renting-models .certification:has(dd:empty) {
    display: none;
}

/* ========================================
   製品説明 共通
======================================== */

.product-category-section .product-item-description,
#renting-models .product-item-description {
    min-width: 0;
}

.product-category-section .product-item-description dl,
#renting-models .product-item-description dl {
    margin: 0 0 12px;
}

.product-category-section .product-item-description dl:last-child,
#renting-models .product-item-description dl:last-child {
    margin-bottom: 0;
}

.product-category-section .product-item-description dt,
#renting-models .product-item-description dt {
    display: inline-block;
    margin: 0 0 5px;
    padding: 4px 12px;
    border-radius: 2px;
    background: var(--green-muted);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.product-category-section .product-item-description dd,
#renting-models .product-item-description dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

/* ========================================
   重要項目
   主な導入ケース / 製品選定の決め手
======================================== */

.product-category-section .product-item-description .product-selection,
.product-category-section .product-item-description .deciding-factor,
#renting-models .product-item-description .product-selection,
#renting-models .product-item-description .deciding-factor {
    border-left: 4px solid var(--green-muted);
    padding-left: 14px;
    margin-bottom: 18px;
}

/* 見出し */

.product-category-section .product-item-description .product-selection dt,
.product-category-section .product-item-description .deciding-factor dt,
#renting-models .product-item-description .product-selection dt,
#renting-models .product-item-description .deciding-factor dt {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    background: none;
    color: #222;
    font-size: 17px;
    font-family: var(--font-gothic);
    font-weight: 600;
    line-height: 1.5;
}

/* 本文 */

.product-category-section .product-item-description .product-selection dd,
.product-category-section .product-item-description .deciding-factor dd,
#renting-models .product-item-description .product-selection dd,
#renting-models .product-item-description .deciding-factor dd {
    font-size: 15px;
    line-height: 1.75;
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    .product-category-section {
        width: calc(100% - 50px);
        padding: 75px 35px 90px;
    }

    .product-category-section h3 {
        font-size: 32px;
    }

    .product-category-section .product-item-content,
    #renting-models .product-item-content {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 35px;
    }

    .product-category-section .product-item-header,
    #renting-models  .product-item-header {
        gap: 25px;
    }

    .product-category-section .product-item-header > label {
        min-width: 165px;
        padding: 0 14px;
        font-size: 12px;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    .product-category-section {
        width: calc(100% - 30px);
        padding: 55px 20px 70px;
    }

    .product-category-section h3 {
        margin-bottom: 25px;
        font-size: 27px;
    }

    .product-category-section .how-to-choose dd {
        font-size: 13px;
    }

    .product-category-section .product-item,
    #renting-models .product-item {
        padding: 50px 0;
    }

    .product-category-section .product-item-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 0;
        align-items: start;
        margin-bottom: 30px;
    }
    
    /* 商品名・型番・分類をグリッド上に配置 */
    .product-category-section .product-item-header > a {
        display: contents;
    }
    

    .product-category-section .product-number {
        grid-column: 1;
        grid-row: 2;
    }
    
    .product-category-section .product-category {
        grid-column: 1;
        grid-row: 3;
    }

    .product-category-section .product-item-header > label {
        width: fit-content;
        margin-top: 20px;
        margin-left: 24px;
    }

    .product-category-section .product-item-header > label::after {
        left: 0;
        right: auto;
    }

    .product-category-section .product-name::before {
        font-size: 21px;
        line-height: 1.45;
    }

    .product-category-section .product-item-content {
        display: block;
    }

    .product-category-section .product-item-content > a {
        margin-bottom: 30px;
    }

    .product-category-section .product-item-description dd {
        font-size: 13px;
    }

    .product-category-section .product-item-header > .compare-guide {
        position: static;
        display: block;
        width: auto;
        margin-top: 8px;
        margin-left: 24px;
        text-align: left;
        font-size: 12px;
        line-height: 1.5;
    }

    #renting-models .product-item-content {
        display: block;
    }

    #renting-models .product-item-content > a {
        display: block;
        margin-bottom: 30px;
    }

    #renting-models .product-item-image {
        width: 100%;
        height: auto;
    }

    #renting-models .product-item-description {
        width: 100%;
    }

    #renting-models .product-item-header {
        display: block;
        margin-bottom: 30px;
    }

    .product-category-section .product-item-header > label,
    #renting-models .product-item-header > label {
        border: none;
        background: transparent;
        min-width: 0;
        min-height: 0;
        padding: 0;
    }
    /* 右側：比較チェック */
    .product-category-section .product-item-header > label {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        justify-content: flex-end;
        width: auto;
        margin: 0;
        gap: 5px;
        line-height: 1.7;
    }
    
    /* 右側：比較リンク */
    .product-category-section .product-item-header > .compare-guide {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        position: static;
        display: block;
        width: auto;
        margin: 0;
        text-align: right;
        font-size: 12px;
        line-height: 1.7;
    }
    
    .product-category-section .product-item-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        align-items: start;
        margin-bottom: 30px;
    }
    
    .product-category-section .product-item-header > a {
        display: contents;
    }
    
    .product-category-section .product-name {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 8px;
    }
    
    .product-category-section .product-item-header > label {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        justify-content: flex-end;
        width: auto;
        margin: 0;
        gap: 5px;
        line-height: 1.5;
    }
    
    .product-category-section .product-item-header > .compare-guide {
        grid-column: 1;
        grid-row: 3;
        justify-self: end;
        position: static;
        display: block;
        width: auto;
        margin: 0;
        text-align: right;
        font-size: 12px;
        line-height: 1.5;
    }
    
    .product-category-section .product-number {
        grid-column: 1;
        grid-row: 4;
        margin-top: 12px;
    }
    
    .product-category-section .product-category {
        grid-column: 1;
        grid-row: 5;
    }
}

/*-------------------------------------------------------------------------------*/

/* スクロールバーの幅と高さを設定する */

.comparison-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* スクロールバーの形を設定する */

/* スクロールバーの色を設定する */

.comparison-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    --bg-opacity: 1;
    background-color: #666;
}

.comparison-table-wrap table {
    white-space: nowrap;
    width:auto;
    border-collapse: collapse;
    border: solid 1px #ddd;
}

.comparison-table-wrap table th {
    border-top: solid 1px #ddd;
    padding: 0.5em;
    font-size:12px;
    vertical-align:top;
    white-space: break-spaces !important;
}

.comparison-table-wrap table  td {
    border-top: solid 1px #ddd;
    padding: 0.5em;
    font-size:12px;
    text-align: center;
    vertical-align:top;
    white-space: break-spaces !important;
}

.comparison-table-wrap table td img {
    width:150px !important;
}

.comparison-table-wrap table  td.text-02,
.comparison-table-wrap table  td.text-03 {
    width:180px !important;
}

.comparison-table-wrap table th {
    text-align: center;
    width:180px;
    position:sticky;
    left: 0;
    z-index: 4;
    background-color: #ddd;
}

.comparison-table-wrap table :nth-child(odd) th {
    background: #eeeeee;
    white-space: nowrap!important;
}

.comparison-table-wrap table td.comment {
    text-align:left;
    white-space: wrap !important;
}

@media screen and (max-width: 767px) {
    .comparison-table-wrap table th {
        width: 90px;
        min-width: 90px;
        padding: 0.4em 0.2em;
        font-size: 10px;
        line-height: 1.25;
    }

    .comparison-table-wrap table :nth-child(odd) th {
        white-space: normal !important;
    }
}

/* ========================================================
   08. 学術研究における課題解決事例
======================================================== */

/* ========================================
   学術研究における課題解決の事例紹介
======================================== */

#case-studies {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0 140px;
}

#case-studies > h3 {
    margin: 0 0 75px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

/* ========================================
   リード文
======================================== */

#case-studies .advice-case-studies {
    margin: 0 0 110px;
}

#case-studies .advice-case-studies h4 {
    margin: 0 0 25px;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

#case-studies .advice-case-studies p {
    max-width: 900px;
    margin: 0;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.025em;
}

/* ========================================
   事例一覧
======================================== */

#case-studies .case-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#case-studies .case-item {
    margin: 0 0 100px;
}

#case-studies .case-item:last-child {
    margin-bottom: 0;
}

/* ========================================
   大学名・装置名
======================================== */

#case-studies .case-item-header {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
}

#case-studies .case-item-header > a {
    display: inline-block;
    color: var(--green-primary);
    text-decoration: none;
}

#case-studies .case-item-header > a .institution {
    color: var(--green-primary);
}

#case-studies .case-item-header > a:hover .institution {
    text-decoration-line: underline;
    text-decoration-color: var(--green-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

#case-studies .institution {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.025em;
}

#case-studies .product-name {
    display: flex;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}

#case-studies .product-name dt,
#case-studies .product-name dd {
    margin: 0;
}

#case-studies .product-name dt::after {
    content: "：";
}

/* ========================================
   事例詳細表
  ======================================== */

.case-item-description {
    width: 1100px;
    max-width: 100%;
    margin: 20px auto 0;
    border-top: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
    box-sizing: border-box;
}

.case-item-description dl {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    margin: 0;
}

.case-item-description dt,
.case-item-description dd {
    margin: 0;
    padding: 14px 18px;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
}

.case-item-description dt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-light);
    color: #222;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    text-align: center;
}

.case-item-description dd {
    background: #fff;
    color: #222;
    font-size: 14px;
    line-height: 1.9;
}

/* ========================================
   タブレット・スマートフォン
======================================== */

@media screen and (max-width: 768px) {
    #case-studies {
        width: calc(100% - 40px);
        padding: 75px 0 90px;
    }

    #case-studies > h3 {
        margin-bottom: 50px;
        font-size: 30px;
    }

    #case-studies .advice-case-studies {
        margin-bottom: 70px;
    }

    #case-studies .advice-case-studies h4 {
        margin-bottom: 20px;
        font-size: 22px;
    }

    #case-studies .advice-case-studies p {
        font-size: 14px;
        line-height: 1.9;
    }

    #case-studies .case-item {
        margin-bottom: 65px;
    }

    #case-studies .institution {
        font-size: 21px;
    }

    #case-studies .product-name {
        font-size: 13px;
    }

    .case-item-description dl {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .case-item-description dt,
    .case-item-description dd {
        padding: 12px;
        font-size: 13px;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 500px) {
    .case-item-description dl {
        display: block;
    }

    .case-item-description dt {
        display: block;
        text-align: left;
    }
}

/* ========================================================
   09. ディップコーティング支援事業
======================================================== */

/* ========================================
   ディップコーティング支援事業について
======================================== */

#dip-coating-supports {
    padding: 120px 0 0;
    background: #fff;
}

#dip-coating-supports > h2,
#dip-coating-supports > .choices {
    width: calc(100% - 80px);
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

#dip-coating-supports h2 {
    margin-top: 0;
    margin-bottom: 100px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

#dip-coating-supports .choices {
    padding: 0;
    list-style: none;
}

/* ========================================
   各支援メニュー
======================================== */

#dip-coating-supports .choices > li {
    position: relative;
    min-height: 180px;
    margin: 0 0 20px;
    padding: 50px 420px 50px 78px;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(
    90deg,
    #f8f8f8 0%,
    #f7f7f7 55%,
    #d9dbd8 100%
    );
    transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#dip-coating-supports .choices > li:last-child {
    margin-bottom: 0;
}

/* ========================================
   タイトル・本文
======================================== */

#dip-coating-supports .choices > li > a {
    z-index: 2;
    white-space: nowrap;
}

#dip-coating-supports .choices > li > p {
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

#dip-coating-supports .choices > li > a {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
    padding-left: 0;
    color: var(--green-primary);
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

#dip-coating-supports .choices > li > a::before {
    content: "〉";
    position: absolute;
    top: 0;
    left: -28px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.35;
}

#dip-coating-supports .choices > li > a:hover {
    color: var(--green-hover);
}

#dip-coating-supports .choices > li > p {
    max-width: 720px;
    margin: 0;
    color: #222;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.025em;
}

/* ========================================
   右側画像 共通
======================================== */

#dip-coating-supports .choices > li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 420px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
}

/* ========================================================
   10. 最適な装置選びのご支援
======================================================== */

/* ========================================
   最適な装置選びのご支援
======================================== */

#chose-introducing-support::after {
    background-image:
    url("../images/support-introducing.png");
    background-size: 280px auto!important;
    background-position: right 0 center;
}

#dip-coating-supports b,
#introducing-support strong {
    font-family: var(--font-gothic);
    font-weight: 800;
}

/* ========================================================
   11. 装置レンタル・受託コーティング
======================================================== */

/* ========================================
   ディップコーターの装置レンタル
======================================== */

#dip-coating-supports .choices > #chose-dip-coater-rental {
    background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #f1f1f1 55%,
    #cfd2cd 100%
    );
}

#chose-dip-coater-rental::after {
    width: 740px;
    background-image:
    url("../images/support-rental.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 0 center;
}

/* ========================================
   受託コーティング
======================================== */

#dip-coating-supports .choices > #chose-contract-coating::after {
    background-image: url("../images/support-contract-coating.png");
    background-size: cover;
    background-position: right 0 center;
}

/* ========================================
   ホバー
======================================== */

#dip-coating-supports .choices > li:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 4px -2px #cccccc;
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #dip-coating-supports {
        padding: 90px 0 0;
    }

    #dip-coating-supports > h2,
    #dip-coating-supports > .choices {
        width: calc(100% - 50px);
    }

    #dip-coating-supports h2 {
        margin-bottom: 65px;
        font-size: 32px;
    }

    #dip-coating-supports .choices > li {
        min-height: 180px;
        padding:
        42px
        400px
        42px
        42px;
    }

    #dip-coating-supports .choices > li::after {
        width: 400px;
    }

    #dip-coating-supports .choices > li > a {
        font-size: 23px;
    }

    #dip-coating-supports .choices > li p {
        width: 300px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #dip-coating-supports {
        padding: 65px 0 0;
    }

    #dip-coating-supports > h2,
    #dip-coating-supports > .choices {
        width: calc(100% - 40px);
    }

    #dip-coating-supports h2 {
        margin-bottom: 40px;
        font-size: 28px;
    }

    #dip-coating-supports .choices > li {
        min-height: 0;
        padding: 35px 25px 220px 45px;
    }

    #dip-coating-supports .choices > li > a {
        display: block;
        width: 100%;
        margin-bottom: 15px;
        padding-left: 0;
        box-sizing: border-box;
        font-size: 21px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #dip-coating-supports .choices > li > a::before {
        left: -22px;
        font-size: 20px;
        line-height: 1.45;
    }

    #dip-coating-supports .choices > li::after,
    #chose-dip-coater-rental::after,
    #chose-contract-coating::after {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 190px;
    }

    #chose-introducing-support::after {
        background-size: auto 170px;
        background-position: center center;
    }

    #dip-coating-supports .choices > li p {
        width: auto;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* ========================================
   最適な装置選びのご支援
======================================== */

#introducing-support {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 120px auto;
    padding: 90px 60px 100px;
    box-sizing: border-box;
    background: #f3f3f1;
}

/* ========================================
   セクション見出し
======================================== */

#introducing-support > h3 {
    margin: 0 0 28px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

#introducing-support > p {
    margin: 0 0 50px;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* ========================================
   2つの支援内容 共通
======================================== */

#advice-research-development,
#advice-mass-production {
    position: relative;
    margin: 0 0 45px;
    padding: 45px 55px 45px 125px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
}

#advice-mass-production {
    margin-bottom: 0;
}

/* 左側の装飾 */

#advice-research-development::before,
#advice-mass-production::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 110px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    pointer-events: none;
}

#advice-research-development::before {
    background-image: url("../images/bg-advice-research-development.jpg");
}

#advice-mass-production::before {
    background-image: url("../images/bg-advice-mass-production.jpg");
}

/* ========================================
   見出し
======================================== */

#advice-research-development h4,
#advice-mass-production h4 {
    position: relative;
    z-index: 1;
    margin: 0 0 25px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

/* ========================================
   本文
======================================== */

#advice-research-development p,
#advice-mass-production p {
    position: relative;
    z-index: 1;
    margin: 0 0 25px;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

#advice-research-development p:last-child,
#advice-mass-production p:last-child {
    margin-bottom: 0;
}

#advice-research-development > p:first-of-type,
#advice-mass-production > p:first-of-type {
    padding-left: 16px;
    border-left: 4px solid var(--green-muted);
    color: #222;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.9;
}

/* ========================================
   箇条書き
======================================== */

#advice-research-development ul,
#advice-mass-production ul {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

#advice-research-development li,
#advice-mass-production li {
    display: block;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    margin: 0;
    padding: 18px 16px;
    background: var(--green-muted);
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
    align-content: center;
}

#advice-research-development li:last-child,
#advice-mass-production li:last-child {
    margin-bottom: 0;
}
/* 広いPC・スマホでは指定位置で改行 */
#advice-research-development li br.sp-only,
#advice-mass-production li br.sp-only {
    display: inline;
}
/* 601〜1199pxでは自動折り返し */
@media screen and (min-width: 601px) and (max-width: 1199px) {
    #advice-research-development li br.sp-only,
    #advice-mass-production li br.sp-only {
        display: none;
    }
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #introducing-support {
        width: calc(100% - 50px);
        padding: 70px 40px 80px;
    }

    #introducing-support > h3 {
        font-size: 28px;
    }

    #advice-research-development,
    #advice-mass-production {
        padding:
        40px
        40px
        40px
        100px;
    }

    #advice-research-development::before,
    #advice-mass-production::before {
        width: 85px;
    }
    #advice-research-development ul,
    #advice-mass-production ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #advice-research-development li,
    #advice-mass-production li {
        display: block;
        min-height: 76px;
        padding: 14px 16px;
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #introducing-support {
        width: calc(100% - 30px);
        padding: 50px 20px 60px;
    }

    #introducing-support > h3 {
        font-size: 25px;
    }

    #introducing-support > p {
        margin-bottom: 35px;
    }

    #advice-research-development,
    #advice-mass-production {
        padding: 120px 25px 35px;
    }

    #advice-research-development::before,
    #advice-mass-production::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 90px;
        background-position: center;
        background-size: cover;
        transform: none;
    }

    #advice-research-development::before {
        background-image:
        url("../images/bg-advice-research-development-sp.jpg");
    }

    #advice-mass-production::before {
        background-image:
        url("../images/bg-advice-mass-production-sp.jpg");
    }

    #advice-research-development h4,
    #advice-mass-production h4 {
        font-size: 20px;
    }

    #advice-research-development p,
    #advice-mass-production p {
        font-size: 13px;
    }

    #advice-research-development > p:first-of-type,
    #advice-mass-production > p:first-of-type {
        padding-left: 12px;
        border-left-width: 4px;
        font-size: 15px;
    }

    #advice-research-development ul,
    #advice-mass-production ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #advice-research-development li,
    #advice-mass-production li {
        display: block;
        min-height: 76px;
        padding: 14px 16px;
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        line-height: 1.5;
    }

    br.sp-only {
        display: inline;
    }
}

/* ========================================
   ディップコーターの装置レンタル
======================================== */

#dip-coater-rental,
#contract-coating {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 120px auto;
    padding: 100px 60px 120px;
    box-sizing: border-box;
    background: #f3f3f1;
}

#dip-coater-rental > h3,
#contract-coating > h3 {
    margin: 0 0 25px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

#dip-coater-rental > p,
#contract-coating > p {
    margin: 0 0 60px;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.03em;
}

#contract-coating {
    padding-bottom: 80px;
}

/* ========================================
   メリットとデメリット
======================================== */

#renting-advantages,
#contract-advantages {
    margin-bottom: 110px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
}

#renting-advantages > h4,
#contract-advantages > h4 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

#renting-advantages > p,
#contract-advantages > p {
    margin: 0 0 35px;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

#renting-advantages > h4,
#renting-advantages > p,
#contract-advantages > h4,
#contract-advantages > p {
    grid-column: 1 / -1;
}

#renting-advantages > dl,
#contract-advantages > dl {
    margin: 0;
    border: 1px solid #d8d8d8;
    background: #fff;
}

#renting-advantages > dl dt,
#contract-advantages > dl dt {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid #d8d8d8;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

/* メリット */

#renting-advantages > dl:nth-of-type(1) dt,
#contract-advantages > dl:nth-of-type(1) dt {
    background: var(--green-light);
}

/* デメリット */

#renting-advantages > dl:nth-of-type(2) dt,
#contract-advantages > dl:nth-of-type(2) dt {
    background: var(--red-light);
}

#renting-advantages > dl dd,
#contract-advantages > dl dd {
    position: relative;
    margin: 0;
    padding: 0 25px 0 45px;
    font-size: 14px;
    line-height: 1.9;
}

#renting-advantages > dl dd:first-of-type,
#contract-advantages > dl dd:first-of-type {
    padding-top: 30px;
}

#renting-advantages > dl dd:last-of-type,
#contract-advantages > dl dd:last-of-type {
    padding-bottom: 30px;
}

#renting-advantages > dl dd::before,
#contract-advantages > dl dd::before {
    content: "・";
    position: absolute;
    left: 28px;
}

#renting-advantages > p:last-child,
#contract-advantages > p:last-child {
    margin-top: 35px;
    margin-bottom: 0;
}

/* ========================================
   レンタル対応機種一覧
======================================== */

#renting-models > h4 {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

#renting-models > p {
    margin: 0 0 55px;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* ========================================
   レンタル機種だけの補足表示
======================================== */

#renting-models .product-item {
    position: relative;
}

#renting-models .product-item-image {
    mix-blend-mode:multiply;
}

#renting-models .product-item-header > label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    color: #555;
}

#renting-models .product-item-header > label::before {
    content: "レンタル対応機種";
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #dip-coater-rental,
    #contract-coating {
        width: calc(100% - 50px);
        padding: 75px 40px 90px;
    }

    #dip-coater-rental > h3,
    #contract-coating > h3 {
        font-size: 28px;
    }

    #renting-advantages,
    #contract-advantages {
        margin-bottom: 80px;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #dip-coater-rental,
    #contract-coating {
        width: calc(100% - 30px);
        padding: 55px 20px 70px;
    }

    #dip-coater-rental > h3,
    #contract-coating > h3 {
        font-size: 25px;
    }

    #renting-advantages,
    #contract-advantages {
        display: block;
        margin-bottom: 65px;
    }

    #renting-advantages > dl,
    #contract-advantages > dl {
        margin-bottom: 20px;
    }

    #renting-advantages > dl:last-of-type,
    #contract-advantages > dl:last-of-type {
        margin-bottom: 0;
    }

    #renting-models > h4,
    #contract-coating-process > h4 {
        font-size: 21px;
    }

    #dip-coater-rental > p {
        font-size: 15px;
        line-height: 1.9;
    }

    #renting-models .product-item-header > label {
        display: none;
    }
}

/* ========================================
   受託コーティングの流れ
======================================== */

#contract-coating {
    margin-bottom:0;
}

#contract-coating-process {
    padding: 50px 55px 60px;
    box-sizing: border-box;
    background: #fff;
}

#contract-coating-process > h4 {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

#contract-coating-process > p {
    margin: 0 0 55px;
    font-size: 14px;
    line-height: 1.9;
}

/* 流れ */

#contract-coating-process > ol {
    width: 70%;
    max-width: 650px;
    margin: 0 auto 80px;
    padding: 0;
    list-style: none;
}

#contract-coating-process > ol li {
    position: relative;
    margin: 0 0 28px;
    padding: 16px 25px;
    background: var(--green-medium);
    color: #fff;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

#contract-coating-process > ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--green-medium);
}

/* ご相談時の注意点 */

#contract-coating-process > dl {
    margin: 0;
}

#contract-coating-process > dl dt {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 12px;
    border-radius: 2px;
    background: var(--green-muted);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

#contract-coating-process > dl dd {
    position: relative;
    margin: 0 0 5px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.8;
}

#contract-coating-process > dl dd::before {
    content: "・";
    position: absolute;
    left: 0;
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {

}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    br.sp-only {
        display: inline;
    }

    #contract-coating-process {
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
    }

    #contract-coating-process > ol {
        width: 100%;
    }

    #contract-coating-process > ol li {
        min-height: 68px;
        padding: 14px 16px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.5;
    }
}

/* ========================================================
   12. サイト内検索
======================================================== */

/* ========================================
   サイト内検索
======================================== */

#site-search {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0 140px;
}

#site-search > h2 {
    margin: 0 0 70px;
    font-size: 40px;
    font-weight: 500;
    font-family: var(--font-gothic);
    line-height: 1.45;
    letter-spacing: 0.04em;
}

/* ========================================
   検索エリア
======================================== */

#site-search form {
    padding: 55px 70px 60px;
    box-sizing: border-box;
    background: #f3f3f1;
}

#site-search form > p {
    max-width: 950px;
    margin: 0 0 45px;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.03em;
}

/* ========================================
   検索フォーム
======================================== */

#site-search .top-search {
    width: 360px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #fff;
    font-size: 16px;
    line-height: 46px;
    vertical-align: middle;
}

#site-search .button {
    height: 46px;
    margin-left: 12px;
    padding: 0 22px;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #fff;
    color: #111;
    font-size: 15px;
    cursor: pointer;
    vertical-align: middle;
    transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

#site-search .button:hover {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 900px) {
    #site-search {
        width: calc(100% - 50px);
        padding: 90px 0 110px;
    }

    #site-search > h2 {
        margin-bottom: 50px;
        font-size: 32px;
    }

    #site-search form {
        padding: 45px 40px 50px;
    }

    #site-search form > p {
        font-size: 15px;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #site-search {
        width: calc(100% - 40px);
        padding: 65px 0 75px;
    }

    #site-search > h2 {
        margin-bottom: 35px;
        font-size: 27px;
    }

    #site-search form {
        padding: 35px 25px 40px;
    }

    #site-search form > p {
        margin-bottom: 30px;
        font-size: 14px;
        line-height: 1.9;
    }

    #site-search .top-search {
        width: calc(100% - 85px);
        height: 44px;
    }

    #site-search .button {
        width: 70px;
        height: 44px;
        margin-left: 8px;
        padding: 0;
    }
}

/* ========================================================
   13. 新着情報・お役立ちコラム
======================================================== */

/* 外枠 */

#information-area {
    padding: 100px 0;
    background: #f3f3f1;
}

#whats-new,
#dip-coating-column {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 70px 60px 80px;
    box-sizing: border-box;
    background: #fff;
}

#dip-coating-column {
    margin-bottom: 0;
}

#whats-new > h2,
#dip-coating-column > h2 {
    margin: 0 0 45px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.04em;
}

/* 最新1件：見出し・本文 */

#whats-new .latest-information,
#dip-coating-column .latest-information {
    margin-bottom: 55px;
}

#whats-new .latest-information dl,
#dip-coating-column .latest-information dl {
    margin: 0;
}

#whats-new .latest-information dt,
#dip-coating-column .latest-information dt {
    margin: 0 0 30px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

#whats-new .latest-information dt a,
#dip-coating-column .latest-information dt a {
    display: inline-block;
    color: var(--green-primary);
    text-decoration: none;
}

#whats-new .latest-information dt a:hover,
#dip-coating-column .latest-information dt a:hover {
    color: var(--green-hover);
    text-decoration-line: underline;
    text-decoration-color: var(--green-hover);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

#dip-coating-column .latest-information .info-date {
    display: none;
}

#dip-coating-column .latest-information .info-title {
    display: block;
}

#whats-new .latest-information dd,
#dip-coating-column .latest-information dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* 新着情報：画像と本文 */

#whats-new .latest-information dd {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

#whats-new .latest-information-images {
    flex: 0 0 180px;
    width: 180px;
}

#whats-new .latest-information-images img {
    display: block;
    width: 180px;
    height: 120px;
    margin-bottom: 15px;
    object-fit: contain;
}

#whats-new .latest-information-images img:last-child {
    margin-bottom: 0;
}

#whats-new .latest-information-text {
    flex: 1;
    min-width: 0;
}

/* 過去の記事一覧：ホバー時はタイトルに下線 */

#whats-new .other-information,
#dip-coating-column .other-information {
    clear: both;
}

#whats-new .other-information dl,
#dip-coating-column .other-information dl {
    margin: 0;
}

#whats-new .other-information dt,
#dip-coating-column .other-information dt {
    margin: 0;
    border-top: 1px solid #ccc;
}

#whats-new .other-information dt:last-of-type,
#dip-coating-column .other-information dt:last-of-type {
    border-bottom: 1px solid #ccc;
}

#whats-new .other-information dt a,
#dip-coating-column .other-information dt a {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    color: var(--green-primary);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
}

#whats-new .other-information dt a:hover,
#dip-coating-column .other-information dt a:hover {
    color: var(--green-hover);
}

#whats-new .other-information dt a:hover .info-title,
#dip-coating-column .other-information dt a:hover .info-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#whats-new .other-information .info-date,
#dip-coating-column .other-information .info-date {
    flex: 0 0 140px;
}

#whats-new .other-information .info-title,
#dip-coating-column .other-information .info-title {
    flex: 1 1 auto;
}

/* 「全てを見る」「続きを見る」：先頭の矢印・下線なし */

#whats-new .other-information dd,
#dip-coating-column .other-information dd {
    margin: 28px 0 0;
    text-align: right;
}

#whats-new .other-information dd a,
#dip-coating-column .other-information dd a,
#dip-coating-column .latest-information .more-link a {
    display: inline-block;
    position: relative;
    padding: 0 0 0 24px;
    color: var(--green-primary);
    font-size: 13px;
    text-decoration: none;
}

#whats-new .other-information dd a,
#dip-coating-column .other-information dd a {
    line-height: 1.6;
}

#dip-coating-column .other-information dd a,
#dip-coating-column .latest-information .more-link a {
    text-align: left;
}

#dip-coating-column .latest-information .more-link a {
    margin: 25px 0 0 auto;
    box-sizing: border-box;
}

#whats-new .other-information dd a::before,
#dip-coating-column .other-information dd a::before,
#dip-coating-column .latest-information .more-link a::before {
    content: "〉";
    position: absolute;
    top: 0;
    left: 0;
    line-height: inherit;
}

#whats-new .other-information dd a:hover,
#dip-coating-column .other-information dd a:hover,
#dip-coating-column .latest-information .more-link a:hover {
    color: var(--green-hover);
}

/* タブレット */

@media screen and (max-width: 900px) {
    #information-area {
        padding: 70px 0;
    }

    #whats-new {
        width: calc(100% - 50px);
        margin-bottom: 55px;
        padding: 55px 40px 65px;
    }

    #dip-coating-column {
        width: calc(100% - 50px);
        padding: 55px 40px 65px;
    }

    #dip-coating-column {
        margin-bottom: 0;
    }

    #whats-new > h2,
    #dip-coating-column > h2 {
        font-size: 28px;
    }
}

/* スマートフォン */

@media screen and (max-width: 600px) {
    #information-area {
        padding: 45px 0;
    }

    #whats-new {
        width: calc(100% - 30px);
        margin-bottom: 35px;
        padding: 40px 20px 50px;
    }

    #dip-coating-column {
        width: calc(100% - 30px);
        padding: 40px 20px 50px;
    }

    #dip-coating-column {
        margin-bottom: 0;
    }

    #whats-new > h2,
    #dip-coating-column > h2 {
        margin-bottom: 30px;
        padding-bottom: 18px;
        font-size: 25px;
    }

    #whats-new .latest-information dt,
    #dip-coating-column .latest-information dt {
        font-size: 18px;
    }

    #whats-new .other-information dt a,
    #dip-coating-column .other-information dt a {
        display: block;
        padding: 10px 5px;
    }

    #whats-new .other-information .info-date,
    #dip-coating-column .other-information .info-date {
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        color: #777;
    }

    #whats-new .other-information .info-title,
    #dip-coating-column .other-information .info-title {
        display: block;
    }

    #whats-new .other-information dd,
    #dip-coating-column .other-information dd {
        margin-top: 22px;
        text-align: left;
    }

    #whats-new .other-information dd a,
    #dip-coating-column .other-information dd a {
        padding-right: 22px;
        font-size: 12px;
    }

    #whats-new .latest-information dd {
        flex-direction: column;
    }

    #whats-new .latest-information-text {
        order: 1;
        width: 100%;
    }

    #whats-new .latest-information-images {
        order: 2;
        width: 100%;
        margin-top: 25px;
    }

    #whats-new .latest-information-images img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto 15px;
    }

    #whats-new .latest-information-images img:last-child {
        margin-bottom: 0;
    }
}

/* ========================================================
   14. 下部ナビゲーション
======================================================== */

/* ========================================
   下部ナビゲーション
======================================== */

#bottom-navigation {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 70px 60px 80px;
}

/* ========================================
   上段メインリンク
======================================== */

#bottom-navigation .bottom-main-links {
    display: grid;
    grid-template-columns: 280px repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
    margin-bottom: 65px;
}

#bottom-navigation .bottom-main-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 90px;
    padding: 0 55px 0 45px;
    overflow: hidden;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#bottom-navigation .bottom-main-link span {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

#bottom-navigation .bottom-main-link:not(.bottom-about)::after {
    content: "〉";
    position: absolute;
    top: 50%;
    right: 25px;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

#bottom-navigation .bottom-main-link:hover {
    opacity: 0.8;
    filter: brightness(1.12);
}

/* ========================================
   ディップコーターとは？
======================================== */

#bottom-navigation .bottom-about {
    height: 150px;
    padding: 0 100px 0 35px;
    background-image: url("../images/bottom-about.jpg");
    background-size: contain;
    background-position: left center;
}

#bottom-navigation .bottom-about span {
    font-size: 16px;
}

/* ========================================
   システム概要
======================================== */

#bottom-navigation .bottom-system {
    justify-content: center;
    background-image: url("../images/bottom-system.jpg");
    background-position: left center;
    background-size: 100%;
}

/* ========================================
   コーティング例
======================================== */

#bottom-navigation .bottom-coating {
    justify-content: center;
    background-image:
    url("../images/bottom-coating.jpg");
    background-position: left center;
    background-size: 100%;
}

/* ========================================
   ディップコーターの特徴
======================================== */

#bottom-navigation .bottom-features {
    justify-content: center;
    background-image:
    url("../images/bottom-features.jpg");
    background-position: left center;
    background-size: 100%;
}

/* ========================================
   サポートボックス
======================================== */

#bottom-navigation .bottom-support-box {
    margin-bottom: 35px;
    padding: 30px 35px 40px;
    box-sizing: border-box;
    background: #f3f3f3;
}

#bottom-navigation .bottom-support-box:last-child {
    margin-bottom: 0;
}

/* ========================================
   サポート見出し
======================================== */

#bottom-navigation .bottom-support-title {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 35px;
}

#bottom-navigation .bottom-support-title h2 {
    margin: 0;
    font-family: var(--font-gothic);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

#bottom-navigation .bottom-support-title span {
    color: var(--green-primary);
    font-family: var(--font-gothic);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================
   サポートリンク共通
======================================== */

#bottom-navigation .bottom-support-links {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bottom-navigation .bottom-support-links-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 60px;
}

#bottom-navigation .bottom-support-links-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 45px;
}

#bottom-navigation .bottom-support-links li {
    margin: 0;
}

#bottom-navigation .bottom-support-links a {
    color: #111;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    transition: opacity 0.2s ease;
    position: relative;
    display: inline-block;
    padding-left: 32px;
    color: var(--green-primary);
}

#bottom-navigation .bottom-support-links a:hover {
    color: var(--green-hover);
}

#bottom-navigation .bottom-support-links a::before {
    content: "〉";
    position: absolute;
    top: 50%;
    left: 7px;
    width: auto;
    height: auto;
    border: 0;
    color: var(--green-primary);
    font-size: 16px;
    line-height: 1;
    transform: translateY(-50%);
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1100px) {
    #bottom-navigation {
        width: calc(100% - 50px);
    }

    #bottom-navigation .bottom-main-links {
        grid-template-columns: repeat(2, 1fr);
    }

    #bottom-navigation .bottom-about {
        height: 120px;
    }

    #bottom-navigation .bottom-support-links-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #bottom-navigation {
        width: calc(100% - 30px);
        padding: 60px 0 75px;
    }

    #bottom-navigation .bottom-main-links {
        display: block;
        margin-bottom: 45px;
    }

    #bottom-navigation .bottom-main-link {
        width: 100%;
        height: 80px;
        margin-bottom: 12px;
        padding-left: 30px;
    }

    #bottom-navigation .bottom-about {
        height: 120px;
        background-position: left center;
    }

    #bottom-navigation .bottom-main-link span {
        font-size: 19px;
    }

    #bottom-navigation .bottom-support-box {
        padding: 25px 20px 30px;
    }

    #bottom-navigation .bottom-support-title {
        display: block;
        margin-bottom: 25px;
    }

    #bottom-navigation .bottom-support-title h2 {
        margin-bottom: 5px;
        font-size: 22px;
    }

    #bottom-navigation .bottom-support-title span {
        font-size: 14px;
    }

    #bottom-navigation .bottom-support-links-2,
    #bottom-navigation .bottom-support-links-3 {
        display: block;
    }

    #bottom-navigation .bottom-support-links li {
        margin-bottom: 12px;
    }

    #bottom-navigation .bottom-support-links li:last-child {
        margin-bottom: 0;
    }

    #bottom-navigation .bottom-support-links a {
        padding-left: 30px;
        font-size: 15px;
    }
}

/* ========================================================
   15. お問い合わせ・ページトップ
======================================================== */

/* ========================================
   お問い合わせ
======================================== */

#contact-area {
    padding: 70px 0;
    background: #e9e9e9;
    font-family: var(--font-gothic);
}

#contact-area .contact-inner {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 35px 45px 50px;
    box-sizing: border-box;
    background: #fff;
}

/* ========================================
   見出し
======================================== */

#contact-area .contact-heading {
    display: flex;
    align-items: baseline;
    gap: 60px;
    margin-bottom: 45px;
}

#contact-area .contact-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 28px;
    flex: 0 0 auto;
}

#contact-area .contact-title-wrap h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    font-family: var(--font-gothic);
    line-height: 1.4;
    letter-spacing: 0.03em;
}

#contact-area .contact-title-wrap span {
    color: var(--green-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

#contact-area .contact-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* ========================================
   CTA
======================================== */

#contact-area .contact-actions {
    display: grid;
    grid-template-columns: 740fr 808fr 621fr;
    gap: 22px;
}

#contact-area .contact-action {
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

#contact-area .contact-action:hover {
    opacity: 0.72;
}

#contact-area .contact-action img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   Page Top
======================================== */

#page-top {
    padding: 30px 40px 25px;
    background: #e9e9e9;
    text-align: right;
}

#page-top a {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #222;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.4;
}

#page-top .page-top-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #d9f0ef;
    font-size: 13px;
    transition: opacity 0.2s ease;
}

#page-top a:hover {
    opacity: 0.65;
}

/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1100px) {
    #contact-area {
        padding: 60px 0;
    }

    #contact-area .contact-inner {
        width: calc(100% - 50px);
        padding: 35px 35px 45px;
    }

    #contact-area .contact-heading {
        display: block;
        margin-bottom: 35px;
    }

    #contact-area .contact-title-wrap {
        margin-bottom: 20px;
    }

    #contact-area .contact-actions {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #contact-area .contact-action {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }
}

/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #contact-area {
        padding: 45px 0;
    }

    #contact-area .contact-inner {
        width: calc(100% - 30px);
        padding: 30px 20px 35px;
    }

    #contact-area .contact-title-wrap {
        display: block;
    }

    #contact-area .contact-title-wrap h2 {
        margin-bottom: 5px;
        font-size: 24px;
    }

    #contact-area .contact-title-wrap span {
        font-size: 14px;
    }

    #contact-area .contact-lead {
        font-size: 14px;
        line-height: 1.8;
    }

    #contact-area .contact-actions {
        gap: 12px;
    }

    #page-top {
        padding: 20px;
    }

    #page-top a {
        gap: 12px;
        font-size: 15px;
    }

    #page-top .page-top-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
}

/* ========================================================
   16. フッター
======================================================== */

/* ========================================
   Footer
======================================== */

#footer {
    padding: 75px 0 55px;
    background: #e5f0f0;
    color: #111;
}

#footer .footer-inner {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr 0.75fr;
    gap: 70px;
    width: calc(100% - 100px);
    max-width: 1500px;
    margin: 0 auto;
}

/* ========================================
   会社情報
======================================== */

#footer .footer-logo {
    display: block;
    width: 330px;
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

#footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .footer-company-links li {
    margin-bottom: 14px;
}

#footer .footer-company-links a {
    position: relative;
    display: inline-block;
    padding-left: 13px;
    color: #111;
    font-size: 19px;
    line-height: 1.5;
    text-decoration: none;
}

#footer .footer-company-links a::before {
    content: "・";
    position: absolute;
    left: 0;
}

/* ========================================
   フッターナビ
======================================== */

#footer .footer-nav li {
    margin-bottom: 18px;
}

#footer .footer-nav a {
    display: inline-block;
    color: #111;
    font-size: 16px;
    line-height: 1.55;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

#footer .footer-nav a:hover,
#footer .footer-company-links a:hover {
    opacity: 0.55;
}

/* ========================================
   SNS
======================================== */

#footer .footer-right {
    display: flex;
    flex-direction: column;
}

#footer .footer-sns {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 55px;
}

#footer .footer-sns a {
    display: block;
}

#footer .footer-sns img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

#footer .footer-sns a:hover img {
    opacity: 0.6;
}

/* ========================================
   Copyright
======================================== */

#footer .footer-copyright {
    width: calc(100% - 100px);
    max-width: 1500px;
    margin: 35px auto 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}

/* ========================================
   Footer タブレット
======================================== */

@media screen and (max-width: 1100px) {
    #footer {
        padding: 60px 0 45px;
    }

    #footer .footer-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 50px;
        width: calc(100% - 60px);
    }

    #footer .footer-logo {
        width: 280px;
        margin-bottom: 25px;
    }

    #footer .footer-company-links a {
        font-size: 17px;
    }

    #footer .footer-nav a {
        font-size: 15px;
    }

    #footer .footer-right {
        display: block;
    }

    #footer .footer-sns {
        justify-content: flex-start;
        margin-top: 35px;
    }

    #footer .footer-copyright {
        width: calc(100% - 60px);
        margin-top: 40px;
        font-size: 13px;
    }
}

/* ========================================
   Footer スマートフォン
======================================== */

@media screen and (max-width: 600px) {
    #footer {
        padding: 45px 0 30px;
    }

    #footer .footer-inner {
        display: block;
        width: calc(100% - 40px);
    }

    #footer .footer-company,
    #footer .footer-nav {
        margin-bottom: 35px;
    }

    #footer .footer-logo {
        width: 230px;
        max-width: 100%;
        margin-bottom: 25px;
    }

    #footer .footer-company-links li,
    #footer .footer-nav li {
        margin-bottom: 12px;
    }

    #footer .footer-company-links a {
        padding-left: 12px;
        font-size: 15px;
    }

    #footer .footer-nav a {
        font-size: 14px;
        line-height: 1.6;
    }

    #footer .footer-right {
        margin-bottom: 0;
    }

    #footer .footer-sns {
        justify-content: flex-start;
        gap: 12px;
        margin-top: 25px;
    }

    #footer .footer-sns img {
        width: 30px;
        height: 30px;
    }

    #footer .footer-copyright {
        width: calc(100% - 40px);
        margin-top: 30px;
        font-size: 12px;
        line-height: 1.6;
        text-align: left;
    }
}