/* ==========================================================================
   1. Base Styles & PC Layout (共通・PC設定)
   ========================================================================== */

/* Reset & Base */
:root {
    --primary-red: #D32F2F; /* いちごの赤 */
    --accent-pink: #FFCDD2; /* 薄いピンク */
    --text-dark: #333333;
    --bg-gray: #F5F5F5;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    color: var(--text-dark);
    line-height: 1.8;
    background-color: #fff;
    /* 横揺れ防止 */
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* ▼▼▼ これを追加 ▼▼▼ */
.img-modal {
    display: none; /* PCでもスマホでも、最初は隠しておく */
}


a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* Utilities */
.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.section-padding {
    padding: 40px 0;
}

.text-center {
    text-align: center;
}

.mb-50 {
    margin-bottom: 30px;
}

.serif {
    font-family: var(--font-serif);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
    line-height: 1.4;
    font-family: var(--font-sans);
    color: #445548;
}

/* スマホ専用クラス（PCでは非表示） */
.sp-only {
    display: none;
}

/* Header (PC) */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 70px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
}

.pc-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.pc-nav a {
    font-weight: 500;
    font-size: 0.9rem;
}

.pc-nav a:hover {
    color: var(--primary-red);
}

/* 1. ヘッダーのボタン（共通スタイル修正） */
.btn-header {
    background: linear-gradient(to right, #F09819, #FF512F);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(240, 152, 25, 0.3); /* ほんのり光らせる */
    border: none;
}

.logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

.logo a {
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

.logo a:hover {
    opacity: 0.7;
    color: inherit;
}

.logo img {
    vertical-align: bottom;
}

/* スマホメニュー関連（PCでは非表示） */
.hamburger-btn, .sp-nav {
    display: none;
}

/* Main Visual */
#mv {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}

.mv-video-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #000;
}

.mv-video-area video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: videoFadeLoop 8s linear infinite;
}

@keyframes videoFadeLoop {
    0% { opacity: 0; }
    35% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.mv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    z-index: -1;
}

.mv-content {
    text-align: center;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.mv-lead {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px; /* 修正: 20px -> 10px */
    line-height: 1.6;
    color: #fff;
    background: rgba(211, 47, 47, 0.8);
    display: inline-block;
    padding: 5px 20px;
}

.sub-copy {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 4.5rem;
    margin-top: 0;
    margin-bottom: 40px;
    line-height: 1.3;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.scrolldown {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scrolldown span {
    position: absolute;
    left: -15px;
    top: -30px;
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.scrolldown::after {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 60px;
    background: #fff;
    animation: pathmove 1.5s ease-in-out infinite;
    opacity: 0;
}

@keyframes pathmove {
    0% { height: 0; top: 0; opacity: 0; }
    30% { height: 30px; opacity: 1; }
    100% { height: 0; top: 60px; opacity: 0; }
}

/* 3. メインビジュアル（動画上）のボタン */
#mv .btn-cta {
    background: linear-gradient(to right, #F09819, #FF512F);
    border: none;
    border-radius: 50px;
    color: #fff;
    padding: 10px 50px;
    box-shadow: 0 4px 15px rgba(240, 152, 25, 0.4);
    transition: all 0.3s ease;
    display: inline-block;
}

#mv .btn-cta:hover {
    background: #fff;
    color: #F09819; /* ホバー時は文字をオレンジに */
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
    padding: 10px 50px;
    transform: translateY(-2px);
}

/* Intro Section (Slideshow) */
#intro {
    position: relative; /* スライドを重ねる基準 */
    width: 100%;
    height: 800px; /* 高さを固定（PC基準） */
    overflow: hidden;
    background-color: #fff;
}

.intro-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* 上下中央寄せ */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    /* フェードアニメーション設定 */
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out; /* 2秒かけてゆっくり切り替え */
}

/* activeクラスがついているスライドだけ表示 */
.intro-slide.active {
    opacity: 1;
    z-index: 2;
}

/* 各スライドの背景画像設定 */
.slide-1 {
    background-image: url('../images/bg.jpg');
}

.slide-2 {
    background-image: url('../images/bg2.jpg');
}

/* コンテンツ（文字部分）のスタイル */
.intro-content {
    max-width: 600px;
    padding: 40px 0;
}

.intro-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #445548;
    line-height: 1.4;
    margin-bottom: 30px;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
}

.intro-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: #555555;
    line-height: 2;
}

/* Smart Management Section */
.bg-light-gray {
    background-color: #FFFFFF;
}

.smart-header {
    text-align: left;
    max-width: 900px;
}

.smart-title {
    font-size: 2.0rem; /* 他のセクションタイトル(.section-title)と同じサイズに統一 */
    font-weight: 700;
    color: #445548;
    line-height: 1.6; /* 行間も少し広げて圧迫感を減らす（1.4 -> 1.6） */
    font-family: var(--font-sans);
}

.smart-title .text-accent {
    color: #445548;
    font-size: 1.1em;
    background: linear-gradient(transparent 60%, #ffcdd2 60%);
    padding: 0 5px;
    overflow-wrap: break-word;
}

.smart-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.smart-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.smart-card-header {
    background-color: #E0877F;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
}

.smart-card-header .small-label {
    font-size: 0.9rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0;
    line-height: 1.2;
}

.smart-card-header .large-label {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin-top: 2px;
}

.smart-card-body {
    padding: 25px 20px;
}

.smart-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.smart-item:last-child {
    margin-bottom: 0;
}

.icon-area {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    padding-top: 0;
    margin-right: 10px;
}

.icon-area img {
    width: 100%;
    max-width: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.text-area h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.text-area p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Product Detail Section */
#product-detail {
    background-image: url(../images/cooling-effect_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.product-header {
    margin-bottom: 50px;
}

.product-sub {
    font-weight: 700;
    color: #445548;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
}

.product-sub::before,
.product-sub::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E0877F;
}

.product-sub::before { top: -5px; }
.product-sub::after { bottom: -5px; }

.product-title {
    font-family: var(--font-sans);
    font-size: 5rem;
    font-weight: 700;
    color: #445548;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.product-title .reg {
    font-size: 1.5rem;
    vertical-align: top;
}

.product-desc {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8;
    color: #333;
}

.product-desc strong {
    color: #E0877F;
    font-weight: 700;
}

.product-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.feature-card {
    position: relative;
    width: 45%;
    max-width: 450px;
}

.feature-img-box {
    width: 100%;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-yellow {
    position: absolute;
    top: -20px;
    left: -15px;
    width: 90px;
    height: 90px;
    background-color: #E0877F;
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    line-height: 1.2;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transform: rotate(-10deg);
}

.product-point-box {
    background: #fff;
    border-radius: 15px;
    padding: 30px 40px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 2px solid #E0877F;
    display: flex;
    align-items: center;
    gap: 30px;
}

.point-badge {
    width: 130px;
    height: auto;
    flex-shrink: 0;
    transform: rotate(-10deg);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.point-badge img {
    width: 100%;
    height: auto;
    display: block;
}

.point-content {
    text-align: left;
}

.point-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

.point-lead strong {
    background: linear-gradient(transparent 70%, #ffcdd2 70%);
    font-weight: 700;
    color: #333;
}

/* Cooling Effect Section */
.cooling-effect-header h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #445548;
    line-height: 1.6;
    font-family: var(--font-sans);
    background: linear-gradient(transparent 70%, #ffcdd2 70%);
    display: inline;
    padding: 0 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.cooling-video-wrapper {
    max-width: 900px;
    margin: 0 auto 60px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: #000;
}

.cooling-video-wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

.content-accordion {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid #ddd;
}

.content-accordion-item {
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.accordion-summary-header {
    display: flex;
    align-items: center;
    padding: 25px 10px;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: background-color 0.3s;
}

.accordion-summary-header:hover {
    background-color: #f9f9f9;
}

.accordion-summary-header::-webkit-details-marker {
    display: none;
}

.accordion-summary-header::after {
    content: '';
    position: absolute;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #445548;
    border-bottom: 2px solid #445548;
    transform: rotate(45deg);
    transition: transform 0.3s;
    margin-top: -5px;
}

.content-accordion-item[open] .accordion-summary-header::after {
    transform: rotate(-135deg);
    margin-top: 5px;
}

.example-label {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    margin-right: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-width: 90px;
    text-align: center;
    color: #fff;
}

.label-overview { background-color: #445548; }
.label-example { background-color: #445548; }
.label-system { background-color: #445548; }

.accordion-summary-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.accordion-panel {
    padding: 0 20px 40px;
    animation: fadeIn 0.5s ease;
}

.accordion-panel p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #555;
}

.effect-images img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.cta-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    min-width: 200px;
    transition: transform 0.2s;
}

.cta-button:not(.secondary) {
    background: linear-gradient(to right, #F09819, #FF512F);
    color: #fff;
    box-shadow: 0 4px 15px rgba(240, 152, 25, 0.4);
}

.cta-button.secondary {
    background: #fff;
    color: #D32F2F;
    border: 2px solid #D32F2F;
}

.cta-button:hover {
    transform: translateY(-3px);
}

/* Case Study Section */
#case-study {
    background-image: url('../images/case_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 240px;
    background-color: #f9f9f9;
    position: relative;
    padding-bottom: 80px;
}

.case-header {
    padding-top: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.case-sub {
    font-size: clamp(0.7rem, 4vw, 1.3rem);
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.case-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #445548;
    background: linear-gradient(transparent 70%, #ffcdd2 70%);
    display: inline-block;
    line-height: 1.2;
}

.case-contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.case-bubble {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    font-weight: 500;
    border: 1px solid #eee;
}

.case-bubble p {
    border-bottom: 2px solid #ffcdd2;
    display: inline;
    padding-bottom: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.case-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    left: 50%;
    transform: translateX(-50%);
}

.bubble-top::after {
    bottom: -15px;
    border-width: 15px 15px 0 15px;
    border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent;
}

.case-contents .case-bubble:nth-child(2) { transition-delay: 0.2s; }
.case-contents .case-bubble:nth-child(3) { transition-delay: 0.4s; }
.case-contents .case-bubble:nth-child(4) { transition-delay: 0.6s; }

/* Interview */
.interview-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 15px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease;
}

.interview-row.reverse {
    flex-direction: row-reverse;
    transform: translateX(50px);
}

.interview-row.reverse .interview-text {
    text-align: right;
}

.interview-row.visible {
    opacity: 1;
    transform: translateX(0);
}

.interview-img {
    width: 45%;
    flex-shrink: 0;
    height: 310px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 5px 5px 0 var(--accent-pink);
}

.interview-text {
    width: 55%;
    flex-shrink: 0;
}

.interview-text h3 {
    font-family: var(--font-sans);
    color: #445548;
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 700;
    background: linear-gradient(transparent 70%, #ffcdd2 70%);
    display: inline;
    padding: 0 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.int-company {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    margin-top: 20px;
}

.int-position {
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 0;
    line-height: 1.4;
    font-feature-settings: "palt";
}

.int-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-top: 5px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.small-honorific {
    font-size: 0.7em;
    font-weight: normal;
    margin-left: 3px;
}

.int-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
}

/* Map Section */
#map-section {
    background-color: #FFF;
}

.map-container {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.map-container iframe {
    display: block;
    width: 100%;
    height: 600px;
}

/* FAQ Section */
#faq {
    background-color: #f0f7f4;
}

#faq .section-title {
    color: #445548;
    font-family: var(--font-sans);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.faq-item summary {
    display: block;
    position: relative;
    padding: 20px 60px 20px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #445548;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: #445548;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.answer {
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    overflow: hidden;
}

.answer p {
    margin: 0;
    padding: 10px 20px;
}

.ans-mark {
    color: var(--primary-red);
    font-weight: bold;
    margin-right: 5px;
}

.faq-item[open] .answer {
    animation: slideDown 0.4s ease-out forwards;
}

@keyframes slideDown {
    0% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
    100% { opacity: 1; max-height: 300px; padding-top: 20px; padding-bottom: 20px; }
}

.faq-item summary:hover {
    background-color: #f9f9f9;
}

/* Mist Fan Section */
#fan {
    background-color: #fff;
}

.fan-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.fan-img-box {
    width: 45%;
    flex-shrink: 0;
    text-align: center;
}

.fan-img-box img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.fan-text-box {
    width: 55%;
    text-align: left;
}

.fan-title {
    font-family: var(--font-sans);
    color: #445548;
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(transparent 70%, #ffcdd2 70%);
    line-height: 1.4;
    margin-bottom: 14px;
}

.fan-text {
    font-family: var(--font-sans);
    color: #445548;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.fan-sub {
    font-size: 0.8em;
    font-weight: 500;
    display: block;
    margin-top: 10px;
    color: #666;
}

/* Contact Form */
#contact {
    background-color: #f5f5f5;
}

.contact-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.contact-form {
    max-width: 700px;
    margin: 0 auto 50px;
    background: #fff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
}

.required {
    background-color: var(--primary-red);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    background-color: #fcfcfc;
    transition: all 0.3s;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-red);
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    font-size: clamp(0.8rem, 4vw, 1rem);
    color: #999; /* 薄くして圧迫感を減らす */
}

.select-wrap {
    position: relative;
}

.btn-submit {
    background: linear-gradient(to right, #F09819, #FF512F);
    color: #fff;
    border: none;
    padding: 18px 80px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(240, 152, 25, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 152, 25, 0.6);
}

/* ------------------------------
   Privacy Checkbox Styles
   ------------------------------ */
.privacy-check-wrapper {
    display: flex;
    justify-content: center; /* 左右中央寄せ */
    align-items: center;     /* 上下中央揃え */
    gap: 10px;               /* チェックボックスと文字の間隔 */
    margin: 30px 0;          /* 上下の余白を確保 */
    width: 100%;
}

/* チェックボックス本体 */
.privacy-check-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;              /* デフォルトの余白をリセット */
    flex-shrink: 0;         /* 画面が狭くても潰れないようにする */
}

/* ラベルテキスト */
.privacy-check-wrapper label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
    user-select: none;      /* 連打した時に文字が選択されるのを防ぐ */
}

/* プライバシーポリシーのリンク */
.privacy-check-wrapper label a {
    color: #333;
    text-decoration: underline;      /* ご要望：下線を引く */
    text-underline-offset: 3px;      /* 下線と文字の間隔 */
    transition: color 0.3s;
}

/* リンクホバー時 */
.privacy-check-wrapper label a:hover {
    color: var(--primary-red);       /* ホバー時にブランドカラーに */
    text-decoration: underline;      /* ホバー時も下線を維持 */
}

/* スマホ用の調整（画面が狭い時に文字が折り返しても崩れないように） */
@media (max-width: 768px) {
    .privacy-check-wrapper {
        align-items: flex-start;
        text-align: left;
    }
    
    .privacy-check-wrapper input[type="checkbox"] {
        margin-top: 3px;
    }
}

.tel-contact {
    margin-top: 50px;
    color: #444;
}

.tel-link {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #445548;
    line-height: 1;
    margin: 10px 0;
    font-family: var(--font-sans);
}

.tel-note {
    font-size: 0.9rem;
    color: #666;
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 50px 0;
    text-align: center;
}

footer .logo {
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
}

.copyright {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Animation Utilities */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.smart-grid .smart-card:nth-child(2) {
    transition-delay: 0.4s;
}

.smart-grid .smart-card:nth-child(3) {
    transition-delay: 0.6s;
}


/* ==========================================================================
   2. Media Queries (スマホ・タブレット設定 / 1024px以下)
   ========================================================================== */

@media (max-width: 1024px) {

    /* ------------------------------
       Header & Hamburger Menu
       ------------------------------ */
    .pc-nav {
        display: none;
    }
    .btn-header {
        display: none;
    }
    
    /* ヘッダーの枠組み調整 */
    .header-inner {
        justify-content: center; /* 中身を中央寄せ */
        padding: 0;              /* 余白リセット */
    }

    /* ロゴの調整 */
    .logo {
        width: 90%;              /* 横幅90% */
        height: 100%;            /* 高さはいっぱいに */
        justify-content: left; 
        margin: 0 auto;          /* ブロック自体も中央に */
    }

    /* ロゴ画像の調整 */
    .logo img {
        max-height: 40px;
        width: 70%;
    }

    /* ハンバーガーボタン表示 */
    .hamburger-btn {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 70px;
        height: 70px;
        cursor: pointer;
        z-index: 1100;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 3本線のデザイン */
    .hamburger-btn span {
        position: absolute;
        width: 30px;
        height: 2px;
        background-color: #333;
        transition: all 0.4s ease;
    }
    .hamburger-btn span:nth-child(1) { transform: translateY(-10px); }
    .hamburger-btn span:nth-child(2) { opacity: 1; }
    .hamburger-btn span:nth-child(3) { transform: translateY(10px); }

    /* 開いた時 */
    .hamburger-btn.active span:nth-child(1) { transform: translateY(0) rotate(45deg); }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

    /* スマホ用メニュー本体 */
    .sp-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        z-index: 1000;
        padding-top: 90px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.4s ease;

        text-align: center;
        overflow-y: auto;
    }
    .sp-nav.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .sp-nav ul {
        list-style: none;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    
    .sp-nav li {
        border-bottom: 1px solid #ddd;
        margin-bottom: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease;
    }
    .sp-nav.active li {
        opacity: 1;
        transform: translateY(0);
    }
    /* ディレイ */
    .sp-nav.active li:nth-child(1) { transition-delay: 0.1s; }
    .sp-nav.active li:nth-child(2) { transition-delay: 0.2s; }
    .sp-nav.active li:nth-child(3) { transition-delay: 0.3s; }
    .sp-nav.active li:nth-child(4) { transition-delay: 0.4s; }
    .sp-nav.active li:nth-child(5) { transition-delay: 0.5s; }

    .sp-nav a {
        font-size: 1.1rem;
        font-weight: 700;
        color: #445548;
        display: block;
        padding: 20px 10px;
        text-align: center; 
        position: relative;
    }

    /* お問い合わせボタン専用 (2. スマホメニュー内のボタン修正) */
    .sp-nav li.sp-nav-btn {
        border-bottom: none;
        margin-top: 30px;
        text-align: center;
    }
    .sp-nav-btn a {
        background: linear-gradient(to right, #F09819, #FF512F);
        color: #fff;
        display: inline-block;
        padding: 15px 30px;
        border-radius: 50px;
        box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3);
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
    
    /* ------------------------------
       Footer Logo Fix (Tablet - 1024px以下)
       ------------------------------ */
    footer .logo {
        justify-content: center; /* 左寄せ設定を解除して中央へ */
        width: 100%;             /* 幅を100%に戻す */
        margin: 0 auto 20px;     /* 中央配置を確実に */
    }

    footer .logo a {
        justify-content: center; /* リンク内も中央寄せ */
        width: 100%;             /* クリックエリア調整 */
    }

    footer .logo img {
        width: auto;             /* 幅70%制限を解除 */
        max-width: 250px;        /* フッターに適した少し大きめのサイズ */
        max-height: none;        /* 高さ40px制限を解除 */
    }
}

/* ==========================================================================
   2. Media Queries (スマホ・タブレット設定 / 768px以下)
   ========================================================================== */

@media (max-width: 768px) {
    /* ------------------------------
       Global Utilities
       ------------------------------ */
    .sp-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
    span.sp-only {
        display: inline;
    }
    .section-title {
        font-size: clamp(1.3rem, 6vw, 1.9rem);
    }
    .section-padding {
        padding: 50px 0;
    }

    /* ------------------------------
       Main Visual (MV)
       ------------------------------ */
    #mv {
        height: 100dvh;
        min-height: 550px;
    }
    .mv-lead {
        font-size: clamp(0.8rem, 3.5vw, 1.1rem);
        white-space: nowrap;
        letter-spacing: 0.05em; 
    }
    .sub-copy {
        font-size: clamp(1.5rem, 9vw, 3rem);
        line-height: 1.4;
    }
    #mv .btn-cta {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
        width: clamp(200px, 60vw, 300px);
        padding: 14px 0;
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
    }
        #mv .btn-cta:hover {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    background: #fff;
    color: #F09819; /* ホバー時は文字をオレンジに */
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
    padding: 14px 0;
    transform: translateY(-2px);
    }
    
    

    /* ------------------------------
       Intro (Mobile)
       ------------------------------ */
    #intro {
        height: auto;      /* 高さは固定せず */
        min-height: 600px; /* 最低限の高さを確保 */
    }

    .intro-slide {
        /* スマホ用: 背景画像を暗くする処理をここに移動 */
        background-position: center top;
        background-size: cover;
        align-items: flex-start;
        padding-top: 100px;
    }

    .slide-1 {
           background-image: 
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('../images/bg.jpg');
    }

    .slide-2 {
        background-image: 
            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
            url('../images/bg2.jpg');
    }

    .intro-content {
        max-width: 100%;
        margin-bottom: 0;
    }
    .intro-title {
        font-size: clamp(1.5rem, 8vw, 2rem);
        color: #FFF;
        margin-bottom: 30px; /* 余白を少し詰める */
    }
    .intro-text {
        font-size: 1rem;
        color: #FFF;
        line-height: 1.8;
    }

    /* ------------------------------
       Smart Management (横スクロール化)
       ------------------------------ */
    .smart-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        padding-bottom: 30px;
        margin-right: -20px;
        padding-right: 20px;
        
        /* ★スクロールバーを非表示にする設定 */
        -ms-overflow-style: none;  /* IE, Edge */
        scrollbar-width: none;     /* Firefox */
        align-items: stretch;
    }

    /* Chrome, Safari用 */
    .smart-grid::-webkit-scrollbar {
        display: none;
    }

    .smart-card {
        /* カードの横幅を固定する（画面の85%くらいの幅） */
        /* これにより「次のカードが少し見切れる」ので、スクロールできることが伝わる */
        min-width: 85vw; 
        
        /* スクロールした時に中央で止まるようにする */
        scroll-snap-align: center;
        
        /* 高さリセット */
        height: auto;
    }
    
    .smart-title {
       font-size:clamp(1.3rem, 4vw, 1.9rem) ;
        text-align: left; /* 左揃えを維持 */
    }
    
    /* ------------------------------
       Product Detail
       ------------------------------ */
    .product-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
        line-height: 1.1; /* 英語タイトルなので行間は詰め気味に */
    }
        
    .product-desc {
        font-size: 1rem;
        text-align: left;
    }
    .product-features {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    .feature-card {
        width: 100%;
        max-width: 100%;
    }
    
    /* ------------------------------
       Product Point Box (左上バッジ・テキスト保護版)
       ------------------------------ */
    .product-point-box {
        /* Flexboxを解除して、要素を積み重ねる */
        display: block;
        position: relative;
        
        /* バッジが上に突き出る分のスペースを外側に確保 */
        margin-top: 50px; 
        
        /* ★重要：バッジが被らないように「内側の上余白」をたっぷり取る */
        padding: 70px 15px 30px 15px; 
    }

    .point-badge {
        /* 左上に配置 */
        position: absolute;
        top: -40px;  /* 箱から上に半分くらい飛び出させる */
        left: 10px;  /* 左端から少し内側へ */
        
        /* サイズ調整 */
        width: 28%;       /* 画面幅に応じて可変 */
        max-width: 110px; /* 大きくなりすぎないように */
        min-width: 80px;  /* 小さくなりすぎないように */
        
        transform: rotate(-10deg);
        z-index: 5; /* テキストより手前に */
    }

    .point-content {
        text-align: left;
        width: 100%;
        
        /* ★重要：単語の途中で改行させない設定 */
        overflow-wrap: break-word;  /* 長い単語は折り返す */
        word-wrap: break-word;      /* 旧ブラウザ用 */
        word-break: normal;         /* 日本語は自然に、英単語は途中で切らない */
    }

    /* ------------------------------
       Cooling Effect
       ------------------------------ */
    .cooling-effect-header h2 {
        font-size: clamp(1.5rem, 6vw, 1.9rem); 
        line-height: 1.6;
    }
    
    .accordion-summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .accordion-summary-header h3 {
        font-size: 1rem;
    }
    
    /* アコーディオンの右にある記号（::after）を消す */
    .accordion-summary-header::after {
        display: none;
    }

    .cta-buttons-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    .cta-button {
        width: 100%;
    }

    /* ------------------------------
       Cooling Video Full Width (SP)
       ------------------------------ */
    .cooling-video-wrapper {
        width: 100vw;                   /* 画面幅の100%にする */
        margin-left: calc(50% - 50vw);  /* 親の幅制限を無視して画面左端まで広げる */
        margin-right: calc(50% - 50vw); /* 右側も同様 */
        border-radius: 0;               /* 角丸をなしにする */
        max-width: none;                /* PC用の最大幅制限(900px)を解除 */
        box-shadow: none;               /* 画面いっぱいになるので影も消す */
    }

    /* ------------------------------
       Case Study
       ------------------------------ */
    #case-study {
        background-position: center 120px;
        /* SPでは非表示にする指定が混ざっていましたが、
           必要なら display: none; をコメントアウト解除してください */
        display: none;
    }
    .case-contents {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .case-title {
        font-size: clamp(1.5rem, 5vw, 1.9rem);
    }

    /* ------------------------------
       Interview
       ------------------------------ */
    .interview-row, .interview-row.reverse {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }
    .interview-img, .interview-text { width: 100%; }
    .interview-img { height: 250px; }
    .interview-text h3 {
        font-size: clamp(1.2rem, 5vw, 1.9rem);
    }
    .interview-row.reverse .interview-text {
        text-align: left;
        font-size: 1.1rem;
    }
    .int-company {
        font-size: 1.1rem;
    }
    .int-name {
        font-size: 1rem;
    }

    /* ------------------------------
       Map
       ------------------------------ */
    .map-container iframe {
        height: 400px;
    }

    /* ------------------------------
       FAQ
       ------------------------------ */
    .faq-item summary {
        font-size: 1rem;
        padding: 15px 50px 15px 15px;
    }

    /* ------------------------------
       Fan
       ------------------------------ */
    .fan-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .fan-img-box {
        width: 80%;
        margin: 0 auto;
    }
    .fan-text-box {
        width: 100%;
        text-align: center;
    }
    .fan-title {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .fan-text {
        font-size: 1rem;
    }

    /* ------------------------------
       Contact
       ------------------------------ */
    .contact-form {
        padding: 30px 20px;
    }
    .btn-submit {
        width: 100%;
        max-width: none;
    }
    .tel-link {
        font-size: 1.8rem;
    }
    
    /* ------------------------------
       Animation Reset (Mobile)
       ------------------------------ */
    /* スマホではカードのアニメーションを無効化して、最初から表示状態にする */
    .smart-grid .smart-card.fade-up {
        opacity: 1;
        transform: none;
        transition: none; /* ふわっとする動きも消す */
    }
    
    /* ------------------------------
       Scroll Hint (Overlay版)
       ------------------------------ */
    /* 1. ヒントの親要素（.container）を基準にする設定 */
    #smart-management .container {
        position: relative;
    }

    /* 2. ヒントを浮かせ、中央に配置 */
    .scroll-hint {
        position: absolute;  /* 浮遊させる */
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;         /* テキストを中央寄せするために幅確保 */
        z-index: 10;         /* カードより手前に表示 */
        pointer-events: none; /* 下にあるカードの操作を邪魔しない（重要！） */
        opacity: 1;
        transition: opacity 0.5s ease;
        margin-top: 0;       
    }

    /* 3. 消える時のクラス */
    .scroll-hint.is-hidden {
        opacity: 0;
    }

    /* 4. アイコンのデザイン */
    .scroll-hint-icon {
        width: 70px;
        height: 70px;
        background: rgba(255, 255, 255, 0.7); 
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 指（ハンド）の形をCSSで簡易的に作る */
    .hand {
        width: 12px;
        height: 12px;
        border-top: 3px solid #E0877F;
        border-right: 3px solid #E0877F;
        transform: rotate(45deg);
        margin-left: -5px;
        animation: swipeAnim 1.5s infinite ease-in-out;
    }

    @keyframes swipeAnim {
        0% { transform: translateX(-5px) rotate(45deg); opacity: 0; }
        20% { opacity: 1; }
        80% { opacity: 1; }
        100% { transform: translateX(5px) rotate(45deg); opacity: 0; }
    }

    /* ------------------------------
       Image Modal (SP Zoom)
       ------------------------------ */
    .img-modal {
        display: none; 
        position: fixed;
        z-index: 9999; 
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); 
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .img-modal.active {
        display: flex;
        opacity: 1;
    }

    .modal-content {
        max-width: 95%;
        max-height: 90%;
        object-fit: contain; 
        box-shadow: 0 0 20px rgba(255,255,255,0.2);
    }

    .close-modal {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        z-index: 10000;
    }
        
    .effect-images img {
        cursor: zoom-in;
    }
        
    /* ------------------------------
       Footer Logo Fix (SP)
       ------------------------------ */
    footer .logo {
        justify-content: center; /* ロゴエリア全体を中央寄せ */
    }

    footer .logo a {
        justify-content: center; /* aタグの中身（画像）を中央寄せ */
        width: 100%;             /* クリックエリアを広げる */
    }

    footer .logo img {
        width: auto;       /* ヘッダー用の「幅70%」という指定を解除 */
        max-width: 200px;  /* フッターに適したサイズに制限 */
        max-height: none;  /* 高さ制限も解除して自然な比率に */
    }
    
/* -------------------------------------------
   追従フッター & ヘッダー切り替え設定
   ------------------------------------------- */

/* デフォルト（PC）では非表示 */
#floating-footer {
    display: none;
}

/* スマホ時のみの設定 */
@media (max-width: 768px) {
    
    /* ヘッダーのアニメーション設定 */
    #header {
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    /* ヘッダーを隠す */
    #header.header-hidden {
        opacity: 0;
        pointer-events: none; 
        transform: translateY(-20px); 
    }

/* 追従フッターのスタイル（修正版） */
    #floating-footer {
        display: block; 
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2000; 
        
        padding: 0; 
        background: transparent;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        
        /* ▼▼▼ 修正箇所：初期状態 ▼▼▼ */
        opacity: 0;                  /* 透明にしておく */
        transform: translateY(30px); /* 100%ではなく、30pxだけ下にずらす（移動距離を短くして上品に） */
        
        /* アニメーション速度：1秒かけてゆっくり出す */
        transition: opacity 1.0s ease, transform 1.0s ease;
    }

    /* 出現時 */
    #floating-footer.is-visible {
        opacity: 1;             /* 不透明にする */
        transform: translateY(0); /* 元の位置に戻す */
    }

    #floating-footer a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;             
        height: 70px;            
        background: linear-gradient(to right, #F09819, #FF512F);
        color: #fff;
        font-weight: bold;
        font-size: 1.2rem;       
        letter-spacing: 0.05em;
        border-radius: 0;      
        text-decoration: none;
    }
        
}