@charset "UTF-8";
html {
    scrollbar-gutter: stable;
}
body.modal-open {
    padding-right: 0 !important;
}
/* ========================================
   基本設定
======================================== */
:root {
    --main-color: #006e38;
    --normal-color: #333;
    --sub-color: #f7f7f7;
    --font-ja: "Zen Kaku Gothic New", sans-serif;
    --font-en: "Outfit", sans-serif;
    --font-fa: "Font Awesome 7 Free";
}

html, body {
    font-size: 16px;
    font-family: var(--font-ja);
    /* font-family: sans-serif; */
    font-weight: 400;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    color: var(--normal-color);
    scroll-behavior: auto !important;
    overflow-x: clip;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size-adjust: none;
    -webkit-font-size-adjust: none;

    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body { animation: fadeIn 0.6s ease; }

/* ========================================
   スクロール出現アニメーション
   （英名<reveal-chars>を除く各要素を下からお上品にfade-in）
======================================== */
.reveal {
    transform: translateY(24px);
    opacity: 0;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-inview {
    transform: translateY(0);
    opacity: 1;
}
.reveal-delay01 { transition-delay: 0.2s; }
.reveal-delay02 { transition-delay: 0.4s; }
.reveal-delay03 { transition-delay: 0.6s; }
.reveal-delay04 { transition-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* sec01-rightの出現（箱＋縦書き文字送り）が終わってからsec01-leftを出現 */
.sec01-left.reveal { transition-delay: .8s; }

/* 縦書きテキスト：文字の頭（上）から1文字ずつ出現 */
.reveal-vert-char {
    display: inline-block;
    transform: translateY(-14px);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-vert-char.is-inview {
    transform: translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-vert-char {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

p {
    margin: 0 auto 1.5rem;
    padding: 0;
    line-height: 1.8;
}

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

a {
    text-decoration: none;
    transition: opacity 0.3s;
}
/* a:hover { opacity: 0.75; } */

/* img {
    display: block;
    max-width: 100%;
    height: auto;
} */

h1, h2, h3, h4, h5, h6 {
    color: #000;
    font-weight: 700;
    line-height: 1.3;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    padding: 0;
}
h1 { font-size: 38px;}
h2 { font-size: 32px;}
h3 { font-size: 29px;}
h4 { font-size: 26px;}
h5 { font-size: 22px;}
h6 { font-size: 18px;}

.top-page h2 { margin: 0;}

.sec-inline img {
    max-width: 100%;
    height: auto;
}
.sec-inline-start { 
    padding-inline-start: calc((100vw - 1100px) / 2);
    padding-left: 7.5%;
}
.sec-inline-end { 
    padding-inline-end: calc((100vw - 1100px) / 2);
    /* padding-right: 7.5%; */
}
.container-fluid{ padding: 0;}

.color-main { color: var(--main-color)}

.cf-turnstile { margin-bottom: 2rem;}

/* ========================================
   ヘッダー
======================================== */
#head {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 70px;
    background: var(--sub-color);
    z-index: 100;
}
.nosc #head { background: #fff;}

.head-inner {
    display: flex;
    align-items: center;
    /* max-width: 1280px; */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.head-wrap {
    
}

.head-logo {
    display: flex;
    max-width: 310px;
    flex-shrink: 0;
    margin: 0;
    margin-right: auto;
}

.head-logo a {
    display: flex;
    align-items: center;
}

.head-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ナビゲーション */
.head-nav {
    display: flex;
    height: 100%;
}

.head-nav > ul {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
}

.head-nav > ul > li {
    position: relative;
    height: 100%;
}

.head-nav > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 clamp(8px, 1.25vw, 20px);
    color: var(--normal-color);
    text-align: center;
    transition: opacity 0.3s;
}

.head-nav > ul > li > a:hover { opacity: 1; }

.nav-en {
    display: block;
    width: 100%;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 600;
    color: var(--main-color);
    line-height: 1;
    /* margin-bottom: 10px; */
    margin-bottom: 7px;
    text-align: center;
    transform: translateX(-0.5em);
}

.nav-ja {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--normal-color);
    line-height: 1;
    white-space: nowrap;
}

.nav-ja .punct {
    margin-left: -0.25em;
    letter-spacing: -0.25em;
}

.has-dropdown .nav-ja::after {
    content: '。';
    margin-left: -0.25em;
    letter-spacing: -0.25em;
    visibility: hidden;
}

.nav-ext-icon {
    display: inline-block;
    width: .75em;
    height: .75em;
    transform: translate(-5px,2px);
}

/* お問い合わせボタン */
.head-contact {
    display: flex;
    align-items: center;
    margin-left: 16px;
    flex-shrink: 0;
}

.head-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 138px;
    height: 41px;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 20.5px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}

.head-contact a:hover {
    background: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
    opacity: 1;
}

/* ドロップダウンメニュー */
.dropdown-menu-wrap {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--sub-color);
    border-radius: 0 0 10px 10px;
    padding: 3rem 0 2.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.3s ease-out, visibility 0.3s, transform 0.3s ease-out;
    z-index: 200;
}

.has-dropdown:hover .dropdown-menu-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 41px;
    gap: 0;
}

.dropdown-head {
    flex-shrink: 0;
    width: 407px;
    padding-top: 4px;
}

.dropdown-ja {
    font-size: 38px;
    font-weight: 900;
    color: #333;
    line-height: 1;
    margin-bottom: 1rem;
}

.dropdown-en {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 0.03em;
}

.dropdown-list {
    display: flex;
    gap: 25px;
    flex: 1;
}

.dropdown-list li { flex: 1; }

.dropdown-list a {
    display: block;
    color: var(--normal-color);
    transition: opacity 0.3s;
}

.drop-img {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    height: 170px;
}

.drop-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(217,217,217,0) 40%, rgba(0,0,0,0.5) 100%);
    border-radius: 10px;
}

.drop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.dropdown-list a:hover .drop-img img { transform: scale(1.05); }

.drop-tit {
    font-size: 16px;
    font-weight: 700;
    color: var(--normal-color);
    letter-spacing: 0.05em;
}


/* ハンバーガーメニュー */
.openbtn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1001;
    cursor: pointer;
    width: 32px;
    height: 32px;
    aspect-ratio: 1;
    border-radius: 100vmax;
    transition: .3s;
    background: var(--main-color);
}
.openbtn span {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 10px;
    height: 1.5px;
    background-color: #fff;
    transition: .3s;
}
.openbtn span:nth-of-type(1) {
    top: 35%; 
}
.openbtn span:nth-of-type(2) {
    top: 50%; 
}
.openbtn span:nth-of-type(3) {
    top: 65%; 
}
  
.openbtn.active span:nth-of-type(1) {
    top: 45%;
    left: 25%;
    transform: translateY(1px) rotate(-45deg);
    width: 50%;
}
.openbtn.active span:nth-of-type(2) {
    display: none;
}
.openbtn.active span:nth-of-type(3) {
    top: 60%;
    left: 25%;
    transform: translateY(-4px) rotate(45deg);
    width: 50%;
}
/* ×印が横幅を広くしても消えない設定 */
.openbtn.active{ display: block !important;}
.nosc .nav-menu{ opacity: 0;}
.nosc .menu-wrap .d-lg-none { display: block !important;}

button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}
input:not([type=checkbox],[type=radio]) {
    appearance: none;
    outline: none;
}
input[type=checkbox], input[type="radio"] {
    cursor: pointer;
}

/* ハンバーガーメニュー内部 */

#clickarea {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s;
}
#clickarea.panelactive {
    visibility: visible;
    pointer-events: auto;
}
.clickarea-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s;
}
#clickarea.panelactive .clickarea-overlay { opacity: 1; }
.sp-menu {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 410px;
    width: 50%;
    height: 100%;
    background: #fff;
    border-radius: 10px 0 0 10px;
    padding: 71px 5px 48px 5px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
#clickarea.panelactive .sp-menu { transform: translateX(0); }

/* SP ナビ */
.sp-nav {
    width: 80%;
    margin-inline: auto;
    margin-bottom: 3rem;
}
.sp-nav > li { 
    line-height: 1;
    margin-bottom: 1.5rem;
    cursor: pointer;
}
.sp-nav > li:last-child { margin-bottom: 0; }
.sp-nav > li > a {
    display: inline-flex;
    flex-direction: column;
    row-gap: 5px;
    color: var(--normal-color);
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}
.sp-nav > li > a:hover { opacity: 0.7; }

#clickarea .nav-en {
    display: block;
    width: auto;
    font-size: 14px;
    font-family: var(--font-en);
    font-weight: 600;
    line-height: 1;
    color: var(--main-color);
    margin-bottom: 0;
    text-align: left;
    transform: translateX(0);
}
#clickarea .nav-ja {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--normal-color);
    line-height: normal;
}

/* ABOUT サブメニュー */
.sp-has-sub > .sp-has-sub-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px 2.5rem;
}
.sp-has-sub > .sp-has-sub-wrap > a {
    display: inline-flex;
    flex-direction: column;
    row-gap: 5px;
    flex-shrink: 0;
    
    color: var(--normal-color);
    transition: opacity 0.3s;
}
.sp-has-sub > .sp-has-sub-wrap > a:hover { opacity: 0.7; }
.sp-submenu {
    display: flex;
    gap: 20px;
    padding-top: 24px;
    flex-shrink: 0;
}
.sp-sub-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 78px;
}
.sp-sub-col a {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 400;
    color: var(--normal-color);
    /* line-height: 16px; */
    white-space: nowrap;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}
.sp-sub-col a:hover { opacity: 0.7; }
.sp-sub-col a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1.5px;
    background: #D2D2D2;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 100vmax;
}

/* お問い合わせ */
.sp-contact { 
    display: flex;
    justify-content: center;
}
.sp-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 36px;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 100vmax;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}
.sp-contact a:hover {
    background: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
    opacity: 1;
}

/* × ボタン */
.openbtn.active { background: var(--sub-color); }
.openbtn.active span { background-color: var(--main-color); }

/* ========================================
   MV (ヒーローイメージ)
======================================== */
#mv {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 70px;
    overflow: hidden;
    padding: 10px 15px 10px;
    background: var(--sub-color);
}

.main-swiper {
    /* height: 100svh; */
    height: calc(100svh - 70px - 10px - 10px);
}

.mv-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

#mv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
}

/* ========================================
   sec01: CONCEPT
======================================== */
#sec01 {
    background: var(--sub-color);
    /* padding: clamp(80px, 16.8vw, 215px) 0 5rem; */
    padding: clamp(80px, 16.8vw, 190px) 0 6rem;
    overflow: hidden;
}

.sec01-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    gap: 25px;
    /* padding: 0 66px; */
}

.sec01-content {
    flex: 1;
    min-width: 0;
    /* display: flex;
    flex-direction: column; */
}

.sec01-concept-txt {
    align-self: flex-start;
    /* margin-top: 165px;
    margin-left: 60px;
    margin-bottom: -15px; */
    /* margin-bottom: 80px; */
    margin-bottom: 42px;
    font-family: var(--font-en);
    font-size: 150px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 0;
    margin-left: -1rem;
}

.sec01-left {
    position: relative;
    display: flex;
    flex-direction: column;
    /* width: 608px;
    margin-left: 173px; */
    margin-left: 6em;
    z-index: 1;
}

.sec01-left p {
    font-size: 24px;
    font-weight: 700;
    color: var(--normal-color);
    line-height: 65px;
    letter-spacing: 0.05em;
    margin-inline: 0;
    margin-bottom: 58px;
}

/* ボタン共通 */
.sec01-btn a,
.sec02-btn a {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: #fff;
}
.sec04-btn,
.sec05-btn {
    width: fit-content;
    background: #fff;
    border: 1px solid #fff;
    color: var(--main-color);
}

.sec01-btn a,
.sec02-btn a,
.sec04-btn,
.sec05-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    height: 41px;
    padding: 0 20px 0 25px;
    border-radius: 100vmax;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition-property: background, color, border-color, opacity, transform;
    transition-duration: 0.25s, 0.25s, 0.25s, 1s, 1s;
    transition-timing-function: ease-out, ease-out, ease-out, ease, cubic-bezier(0.16, 1, 0.3, 1);
}

.sec01-btn a:hover,
.sec02-btn a:hover {
    background: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}
.sec04-grid:hover .sec04-btn {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}
.sec05-card:hover .sec05-btn {
    background: var(--main-color);
    border-color: #fff;
    color: #fff;
}

/* 矢印アイコン */
.arrow-icon,
.arrow-icon-gr {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arrow-icon { color: #fff; transition: color 0.25s ease-out; }
.arrow-icon-gr { color: var(--main-color); transition: color 0.25s ease-out; }

.arrow-icon svg,
.arrow-icon-gr svg { display: block; }

.arrow-icon .nav-ext-icon,
.arrow-icon-gr .nav-ext-icon { transform: translateY(2px); }

.sec01-btn a:hover .arrow-icon,
.sec02-btn a:hover .arrow-icon { color: var(--main-color); }
.sec04-grid:hover .sec04-btn .arrow-icon-gr,
.sec05-card:hover .sec05-btn .arrow-icon-gr { color: #fff; }

/* sec01 右側 縦書きテキスト */
.sec01-right {
    flex-shrink: 0;
    max-width: 285px;
    position: relative;
    /* padding-top: 91px; */

    flex: .25;
    transform: translate(-1em,-1em);
}

.sec01-right-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.sec01-bar-group {
    position: relative;
    z-index: 1;
    /* width: 68px; */
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 3px;
}

.sec01-bar-group::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 5px;
    z-index: 1;
}

.sec01-bar-group01 {
    /* height: 351px; */
    padding-top: 9px;
}

.sec01-bar-group01::after {
    content: '';
    position: absolute;
    /* top: -3.5em;
    left: 100%; */
    top: -3.5rem;
    left: 90%;
    transform: translateX(-50%);
    max-width: 115px;
    max-height: 101px;
    background: url(../img/sec01-mark.png) no-repeat center / contain;
    z-index: 0;
    width: 175%;
    height: 175%;
    aspect-ratio: 1;
}

.sec01-bar-group02 {
    /* height: 353px; */
    margin-top: 9.5em;
    padding-top: 12px;
}

.sec01-vert-txt {
    position: relative;
    z-index: 2;
    writing-mode: vertical-rl;
    font-size: 40px;
    font-weight: 700;
    color: var(--normal-color);
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.sec01-punct {
    display: inline-block;
    margin-inline-end: -0.5em;
}

/* ========================================
   sec02: NEWS 古窯のいま
======================================== */
#sec02 {
    position: relative;
    padding: 5rem 0 6rem;
    background: linear-gradient(to bottom, var(--sub-color), #fff);
    /*
    overflow: hidden;
    */
    z-index: 2;
}

.sec02-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 68px;
    margin-bottom: 2.25rem;
}

.sec02-tit {
    font-size: 40px;
    font-weight: 700;
    color: var(--normal-color);
    letter-spacing: 0.03em;
}

.sec02-en {
    font-family: var(--font-en);
    font-size: clamp(50px, 7.5vw, 96px);
    font-weight: 600;
    color: #efefef;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;

    transform: translateY(-9%);
}

/* スライダー */
.sec02-slider-wrap {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 68px;
    /* overflow: hidden; */
}
.news-swiper {
    overflow: visible;
}


.news-swiper .swiper-slide {
    width: 306px;
    max-width: 305px;
    flex-shrink: 0;
}

.news-swiper .swiper-slide a {
    display: block;
    color: var(--normal-color);
}

.news-fig {
    width: 100%;
    height: 100%;
    aspect-ratio: 13 / 10;
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 20px;
}

.news-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.news-swiper .swiper-slide a:hover .news-fig img { transform: scale(1.05); }

.news-date {
    font-size: 14px;
    font-weight: 400;
    color: var(--main-color);
    margin-bottom: 14px;
    line-height: 1;
}

.news-body {
    font-size: 16px;
    font-weight: 400;
    color: var(--normal-color);
    line-height: 26px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* スライダーフッター（コントロール＋ボタン） */
.news-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-top: 4.5rem; */
    margin-top: 2.25rem;
}

/* スライダーコントロール */
.news-controls {
    display: flex;
    align-items: center;
}

.news-prev,
.news-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.3s;
}

.news-prev {
    margin-right: 48px;
    color: #d2d2d2;
}
.news-next {
    margin-right: 25px;
    color: var(--main-color);
}

.news-prev.is-active { color: var(--main-color); }
.news-next.is-disabled { color: #d2d2d2; }

.news-scrollbar-wrap {
    position: relative;
    width: 155px;
    height: 2px;
}

.news-scrollbar-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ddd;
    border-radius: 1px;
}

.news-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--main-color);
    border-radius: 1px;
    transition: left 0.3s, width 0.3s;
}

/* 一覧ボタン */
.sec02-btn { display: flex; }

/* ========================================
   sec03: ABOUT 会社案内
======================================== */

#sec02::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8rem;
    width: 100%;
    height: 8rem;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1.0) 0%,
        rgba(255, 255, 255, 0.85) 10%,
        rgba(255, 255, 255, 0.3) 60%,
        rgba(255, 255, 255, 0.1) 82%,
        rgba(255, 255, 255, 0.0) 100%
    );
}

#sec03 {
    position: relative;
    /* isolation: isolate; */
    padding: 5rem 0 10rem;
    background: #006E38;
    background: linear-gradient(150deg, #006E38 0%, #7ECE4E 23%, #A0C800 48%, #1B9F5E 100%);
    z-index: 1;
}
/* SVGのノイズフィルターを重ね合わせる擬似要素 */
#sec03::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noiseFilter);
    opacity: 0.3; 
    pointer-events: none;
}
/* 画面外に非表示にする SVG フィルター用の定義スタック */
.svg-filter-container {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


#sec04::before {
    content: "";
    position: absolute;
    left: 0;
    top: -10rem;
    width: 100%;
    height: 10rem;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.1) 18%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.85) 90%,
        rgba(255, 255, 255, 1.0) 100%
    );
}

.sec03-wrap {
    position: relative;
    max-width: 1145px;
    width: 90%;
    margin: 0 auto;
    padding-top: 2rem;
    z-index: 10;
}

.sec03-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 58px;
}

.sec03-en {
    font-family: var(--font-en);
    font-size: clamp(50px, 7.5vw, 96px);
    font-weight: 600;
    color: rgba(240, 255, 181, 0.5);
    line-height: 1;
    white-space: nowrap;

    transform: translateY(10%);
}

.sec03-tit {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.sec03-list {
    display: flex;
    gap: 15px;
}

.sec03-list li { 
    flex: 1;
    max-width: 300px;
    margin-inline: auto;
}

.sec03-list a {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
}

.sec03-list figure {
    position: relative;
    width: 100%;
    aspect-ratio: 275 / 265;
    overflow: hidden;
    border-radius: 10px;
}

.sec03-list figure::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(217,217,217,0) 40%, rgba(0,0,0,0.5) 100%);
    border-radius: 10px;
}

.sec03-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    border-radius: 12px;
}

.sec03-list a:hover img { transform: scale(1.05); }

.sec03-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    font-size: clamp(14px, 1.72vw, 22px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1;
    z-index: 1;
}

/* ========================================
   sec04: BUSINESS 事業と取り組み
======================================== */
#sec04 {
    position: relative;
    /* padding: 90px 0 100px; */
    padding: 105px 0 48px;
    background: #fff;
    z-index: 2;
}

.sec04-wrap {
    position: relative;
    max-width: 1145px;
    width: 90%;
    margin: 0 auto;
    z-index: 2;
}

.sec04-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 302px 302px;
    width: 100%;
    max-width: 1144px;
}

.sec04-img { overflow: hidden; }

.sec04-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.sec04-img01 {
    position: relative;
    container-type: inline-size;
    border-radius: 10px 0 0 0;
}
.sec04-en {
    position: absolute;
    top: 1.5rem;
    left: 2.25rem;
    font-family: var(--font-en);
    font-size: clamp(50px, 7.5vw, 96px);
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    line-height: 1;
    white-space: nowrap;
    /* pointer-events: none; */
    z-index: 2;
}

.sec04-img02 { border-radius: 0 10px 0 0; }
.sec04-img04 { border-radius: 0 0 10px 0; }

.sec04-img03 {
    position: relative;
    border-radius: 0 0 0 10px;
    overflow: hidden;
}

.sec04-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 79px 2.5rem 2.5rem;
    background: linear-gradient(to right, rgba(0,0,0,0.35), rgba(102,102,102,0));
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.top-page h2.sec04-tit {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 52px;
    white-space: nowrap;
    margin-bottom: 1.5rem;
}

.sec04-sub {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin-inline: 0;
    margin-bottom: 42px;
    line-height: 1.4;
}

/* SP専用複製（767px以下でのみ表示） */
.sec04-overlay-sp { display: none; }
.sec04-sub-sp { display: none; }
.sec04-btn-sp { display: none; }
.sec04-img04 { position: relative; }

/* ========================================
   sec05: RECRUIT 一緒にはたらく
======================================== */
#sec05 {
    position: relative;
    padding: 49px 0 100px;
    background: #fff;
}

.sec05-wrap {
    max-width: 1145px;
    width: 90%;
    margin: 0 auto;
}

.sec05-card {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 1145px;
    max-height: 600px;
    /* background: var(--main-color); */
    background: url(../img/bg.jpg) repeat center / cover;
    border-radius: 12px;
    overflow: hidden;
}
/* .sec05-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/sec05-bg.png');
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 10;
} */

.sec05-deco {
    position: absolute;
    top: -220px;
    right: 10px;
    bottom: -220px;
    left: 55%;
    display: flex;
    justify-content: flex-end;
    gap: 10.5px;
    pointer-events: none;
    transform: rotate(15deg);
}

.sec05-deco-col { 
    overflow: hidden;
    max-width: 270px;
    width: 100%;
    flex-shrink: 0;
}

.sec05-deco-col02 { margin-top: -70px; }

.sec05-deco-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.sec05-deco-track img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 275px;
    max-height: 400px;
    object-fit: contain;
    margin-bottom: 10.5px;
    border-radius: 13px;
    flex-shrink: 0;
}

.sec05-content {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    max-width: 46%;
    padding: 2.75rem 2rem 2.75rem;
    height: 100%;
    z-index: 1;
}

.sec05-en {
    font-family: var(--font-en);
    font-size: clamp(50px, 7.5vw, 96px);
    font-weight: 600;
    color: #218440;
    line-height: 1;
    white-space: nowrap;
    /* margin-bottom: 266px; */
}

.top-page h2.sec05-tit {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 35px;
    line-height: 1;
    white-space: nowrap;
}

.sec05-sub {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin-bottom: 36px;
    margin-inline: 0;
}

.sec05-txt {
    margin-left: 8px;
}

/* ========================================
   フッター
======================================== */
footer {
    position: relative;
    background: var(--sub-color);
    padding: 90px 0 20px;
}

.ft-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    row-gap: 65px;
    /* max-width: 1145px; */
    max-width: 1050px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 65px;
}

.ft-left {
    /* width: 540px; */
    flex-shrink: 0;

    margin-left: -9px;
    margin-top: 6px;
}

.ft-logo { margin-bottom: 45px; }
.ft-logo img {
    width: 308px;
    height: auto;
}

/* パートナーロゴ */
.ft-bnr {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ft-bnr-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ft-bnr-row img {
    max-width: 120px;
    height: 42px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* フッターナビ */
.ft-nav {
    display: flex;
    justify-content: flex-end;
    gap: 44px;
    flex: 1;
    padding-top: 14px;
    margin-right: 9px;
}

.ft-nav-col {
    display: flex;
    flex-direction: column;
    gap: calc(1em + 1px);
}

.ft-nav-head {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 24px;
}

.ft-nav-head a { color: #333; }

/* .ft-nav-col02 .ft-nav-head { margin-top: 28px; }
.ft-nav-col02 .ft-nav-head:first-child { margin-top: 0; } */

.ft-nav-head-ext a {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.ft-ext-icon {
    display: inline-block;
    width: .75em;
    height: .75em;
    transform: translateY(2px);
}

.ft-nav-sub-head {
    font-size: 16px;
    font-weight: 700;
    color: var(--normal-color);
}

.ft-nav-sub-head a { color: var(--normal-color); }

.ft-nav-col01 ul li:not(:last-child) { 
    line-height: 1;
    margin-bottom: 12px;
}

.ft-nav-col01 ul li a {
    font-size: 14px;
    font-weight: 400;
    color: var(--normal-color);
    transition: opacity 0.3s;
    line-height: 1;
}

.ft-nav-col01 ul li a:hover { opacity: 0.6; }

/* フッターボトム */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1220px;
    width: 96%;
    margin-inline: auto;
}

.ft-cr {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.4);
    line-height: 1;
    margin: 0;
}

.ft-bottom a {
    font-size: 14px;
    font-weight: 400;
    color: var(--normal-color);
    transition: opacity 0.3s;
}

.ft-bottom a:hover { opacity: 0.6; }


/* --------------------------------------------
    other page
-------------------------------------------- */
#titbar {
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background: #f0f6f3;
    z-index: 10;
    margin-top: 70px;

    hgroup {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        max-width: 1200px;
        margin-inline: auto;
        height: 100%;
        padding-inline: 50px;
        gap: 25px;
        z-index: 1;

        h1 {
            position: relative;
            margin: 0;
            padding: 0;
            color: var(--normal-color);
            font-size: 38px;
            font-weight: 900;
            letter-spacing: 0em;
            line-height: 1;
        }

        span {
            position: relative;
            display: block;
            font-family: var(--font-en);
            font-size: 16px;
            font-weight: 700;
            color: var(--main-color);
            line-height: 1;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
    }

}
/* SVGのノイズフィルターを重ね合わせる擬似要素（sec03と同じテクスチャ） */
/* #titbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noiseFilter);
    opacity: 0.3;
    pointer-events: none;
} */
/* 古窯ホールディングス様_ロゴ2（装飾マーク） */
#titbar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    max-width: 480px;
    transform: translateY(-50%);
    width: 40vw;
    max-height: 425px;
    height: 150%;
    background: url(../img/tit-img.png) no-repeat center right / contain;
    pointer-events: none;
    z-index: 0;
}
.tit-line {
    position: relative;
    color: var(--normal-color);
    padding-bottom: 10px;

    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 2.25em;
        height: 4px;
        border-radius: 100vmax;
        z-index: -1;
        background: var(--main-color);
    }
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 2em;
        width: calc(100% - 2em);
        height: 4px;
        border-radius: 0 100vmax 100vmax 0;
        z-index: -2;
        background: #D0D0D0;
    }
}
.tit-bd-l {
    position: relative;
    padding: 0 .75rem;
    color: var(--normal-color);
    letter-spacing: 0.02em;

    &::before {
        content: "";
        position: absolute;
        top: 55%;
        left: 0;
        transform: translateY(-50%);
        width: 5px;
        height: 65%;
        border-radius: 100vmax;
        background: var(--main-color);
        z-index: -1;
    }
}
.tit-bd-b {
    position: relative;
    display: inline-block;
    color: var(--normal-color);
    letter-spacing: 0.02em;
    padding-bottom: 8px;
}
.tit-bd-b::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #D2D2D2;
    border-radius: 100vmax;
    z-index: -1;
}
.tit-point {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--normal-color);
    padding: 0 1.25em;

    letter-spacing: 0.02em;
    font-weight: 500;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: .5em;
        height: .5em;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--main-color);
        z-index: -1;
    }
}

#cpage {
    font-size: 16px;
}
.sec-inline { 
    padding-inline: 50px;
    box-sizing: content-box;
    container-type: inline-size;
    max-width: 1000px;
    margin-inline: auto;
}
#cpage .sec-inline {
    margin-bottom: auto;
    padding-top: 0;
    padding-bottom: 0;
}
#cpage .table>:not(caption)>*>* {
    border-width: 1px;
    border-color: #000;
}


#cpage .sec-inline > div {
    position: relative;
    background: none;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#cpage .sec-inline > div::before {
    content: "";
    width: 100vw;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
    z-index: -1;
}
#cpage .sec-inline > div:nth-child(odd):not(:first-child)::before {
   background: #FFF;
}
/* #cpage .sec-inline > div a { 
    color: #fff;
    text-decoration: underline;
} */
#cpage .sec-inline > div .news-list a {
    text-decoration: none;
}

#cpage .sec-inline > div:nth-child(even)::before {
    background: var(--sub-color);
}
/* #cpage .sec-inline > div a {
    color: var(--main-color);
    text-decoration: underline;
} */
/* #cpage .sec-inline > div button a {
    color: #000;
    text-decoration: none;
} */


.breadcrumb {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 41px;
    background: #fff;
    margin: 0;
    padding: 0;
}
.breadcrumb ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 85%;
    /* max-width: 1000px; */
    max-width: 1085px;
    margin-inline: auto!important;
    padding-left: 0;
}
.breadcrumb ul li {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--main-color);
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0!important;
}
.breadcrumb ul li > span {
    display: flex;
    align-items: center;
    gap: .5em;
}
.breadcrumb ul li + li {
    margin-left: 12px;
}
.breadcrumb ul li span > span {
    display: inline-block;
}
.breadcrumb ul li span > img, .breadcrumb ul img {
    width: 5px;
    height: 4.5px;
    object-fit: contain;
}
.breadcrumb ul li a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #D2D2D2;
}

.breadcrumb ul li span > span:last-child {
    max-width: 15em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}


/*--- table ---*/

/* table-scroll */
.scroll-hint-icon { top: 50%!important; transform: translateY(-50%)!important; }
.scroll-hint-icon:before { width: 30px!important; height: 30px!important; }
.table-calc_list01 table {
    max-width: 100%;
}
.table-calc_list01 th,.table-calc_list01 td{
font-size: 0.65em !important;
padding: 3px !important;
}
.js-scrollable {
    width: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    /* margin: 2.5rem auto; */
}

a.anchorpoint {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

.full-map {
    line-height: 0;
    /* width: 100%; */
    max-height: 365px;
    min-width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.full-map iframe {
    width: 100%;
    height: 685px;
    margin-top: -150px;
}
.map-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.img-brs {
    border-radius: 9px;
}

/* 沿革 */
.about-list {
    display: flex;
    flex-direction: column;
    margin: 1rem 0 5.5rem;
}
.about-list02 {
    margin: 3.25rem 0 4rem;
}
.about-list .item {
    display: flex;
    align-items: baseline;
    column-gap: 3.4rem;
    padding: 2rem;
    border-bottom: 1px solid #E4E4E4;
}
.about-list.about-list02 .item {
    align-items: center;
    column-gap: 11rem;
    padding: 2rem 1rem;
}
.about-list .item:first-of-type { padding-top: 0;}
.about-year {
    flex-shrink: 0;
    width: 7em;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--main-color);
    white-space: nowrap;
}
.about-txt {
    font-size: 16px;
    line-height: 30px;
}

.message-wrap {
    margin-bottom: 3rem;
}
.message-box {
    display: flex;
    gap: 1.5rem 2.5rem;
}
.message-img {
    max-width: 450px;
    width: 100%;
    margin-inline: auto;
    flex: 1;
}
.message-txt {
    max-width: 510px;
    width: 100%;
    margin-inline: auto;
    flex: 1.5;
}
.message-txt p {
    line-height: 2.5;
    margin-bottom: 1rem;
}
p.message-name {
    line-height: 1.8;
    text-align: end;
    margin-bottom: 1.5rem;
}

/* グループ情報 */
.group-wrap {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 3rem 0;
    border-bottom: 1px solid #D2D2D2;
}
.group-wrap-first { padding-top: 1.5rem;}
.group-wrap:last-child { margin-bottom: 1rem;}
.group-img {
    flex-shrink: 0;
    max-width: 330px;
    width: 100%;
    margin-inline: auto;

    aspect-ratio: 330 / 225;
}
.group-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.group-txt {
    flex: 1;
    min-width: 0;
}
.group-txt .tit-bd-b { margin-bottom: 1rem;}
.group-txt > div:first-of-type {
    font-size: 20px;
    font-weight: 700;
    color: var(--normal-color);
    margin-bottom: .6rem;
}
.group-txt p {
    font-size: 16px;
    line-height: 34px;
    color: var(--normal-color);
    margin-bottom: 1.5rem;
}
.group-txt p:last-of-type {
    font-size: 14px;
    line-height: 30px;
    margin-bottom: .5rem;
}
.group-txt p a {
    color: var(--normal-color);
}
.group-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
}
.btn03 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding: 0 12px;
    background: rgba(217,217,217,0.53);
    border-radius: 3px;
    font-size: 12px;
    color: var(--normal-color);
    white-space: nowrap;
}
.group-link img {
    width: 25px;
    height: 25px;
}

.concept {
    font-size: 18px;
    line-height: 50px;
    text-align: center;
}

.concept-wrap {
    margin-top: 3rem;
}
.concept-wrap .item {
    display: flex;
    align-items: flex-start;
    padding: 4rem 4.5rem;
    gap: 2.5rem min(11.5vw,140px);
    border-radius: 10px;
    background: #F0F6F3;
    margin-bottom: 2rem;
}
.concept-tit {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 600;
    color: var(--main-color);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-wrap: nowrap;
}
.concept-head {
    font-size: clamp(26px,3vw,32px);
    font-weight: 700;
    letter-spacing: 5%;
    /* margin-bottom: 1rem; */
    margin-bottom: 2.5rem;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
.concept-wrap p {
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
    margin-bottom: 0;
}

/* これからのビジョン */
.vision-txt {
    line-height: 40px;
}
.vision-wrap {
    display: flex;
    justify-content: center;
    gap: 1.5rem .5rem;
    max-width: 945px;
    margin: 4.5rem auto 3rem;
}
.vision-wrap .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 1.25rem;
    max-width: 290px;
    width: calc(100% / 3);
    aspect-ratio: 1;
    border-radius: 100vmax;
    background: #F0F6F3;
    padding: 1.5rem 2rem 2rem;
    margin-inline: auto;
}
.vision-tit {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
}
.vision-wrap .item img {
    width: auto;
    max-width: 155px;
    height: auto;
    max-height: 60%;
    object-fit: contain;
}

.tit-flex {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em 1em;
    padding-left: .75rem;
    margin-bottom: 1rem;
}
.tit-color {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
}
.tit-small {
    font-size: 14px;
    font-weight: 700;
    color: var(--normal-color);
}

.bsns-item:not(:last-child) {
    margin-bottom: 6rem;
}
.bsns-item > img {
    margin-bottom: 1.5rem;
}
.bsns-item > img.img-brs { border-radius: 10px;}
.bsns-item p {
    line-height: 2.5;
}

.credo-list {
    list-style: none;
    padding-left: 0;
}
.credo-list li {
    font-size: 18px;
    font-weight: 500;
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 24px;
}

.block-center {
    display: flex;
    justify-content: center
}

/* contact */
.contact-form {
    margin-top: 3rem
}
.contact-form dl {
    display: block;
    margin: 0;
}
.contact-form dl > .contact-short-item {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px 0;
    padding-left: 2rem;
    border-bottom: 1px solid #E4E4E4;
}
.contact-form dl > .contact-short-item:first-child {
    padding-top: 0;
}
.contact-form dl > .contact-short-item:last-child {
    border-bottom: none;
}
.contact-form dl dt {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* width: 268px;
    max-width: 100%; */
    width: 20em;
    margin-right: 2.5%;
    padding: 0;
    font-family: var(--font-ja);
    color: var(--normal-color);
    white-space: nowrap;
}
.contact-form dl dt p {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.01em;
}
.contact-form dl dd {
    flex: 1;
    width: 100%;
    min-width: 260px;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.contact-form dl label {
    margin-bottom: 0;
}
.contact-form p {
    width: 100%!important;
    margin-bottom: 0!important;
    text-wrap: wrap;
}
.contact-form p.form-cp {
    font-size: 0.8em!important;
    line-height: 1.4;
    margin: 5px 0;
}
.contact-form .btn01 p { text-align: center;}

/* 必須マーク（緑ドット） */
.contact-form .must {
    display: inline-block;
    font-size: 18px;
    margin-left: 1em;
    color: var(--main-color);
}

/* テキスト・メール・電話・テキストエリア */
.contact-form input:not(.wpcf7-submit):not([type="radio"]):not([type="checkbox"]),
.contact-form dl dd textarea {
    width: 100%;
    /* max-width: 650px; */
    height: 50px;
    padding: 0 16px;
    background: #F0F6F3;
    border: none;
    border-radius: 4px;
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--normal-color);
}
.contact-form input[type="text"],
.contact-form input[type="tel"] {
    max-width: 325px;
}
.contact-form dl dd textarea {
    height: 188px;
    max-width: 651px;
    padding: 16px;
    line-height: 1.6;
    resize: vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #C8C8C8;
}

/* ラジオボタン（お問い合わせ種別） */
.contact-form .wpcf7-radio .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin-right: .5em;
}
.contact-form .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 1em;
}
.contact-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: 100%;
    flex-shrink: 0;
    position: relative;
}
.contact-form input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    background: var(--main-color);
    border-radius: 100vmax;
    transform: translate(-50%, -50%);
}
.contact-form .wpcf7-list-item-label {
    font-size: 16px;
    color: var(--normal-color);
    cursor: pointer;
}

/* ネイティブチェックボックスは非表示にして::beforeで代替 */
.wpcf7-acceptance .wpcf7-list-item { margin: 0;}
.contact-form .wpcf7-acceptance .wpcf7-list-item input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 27px;
    height: 27px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    cursor: pointer;
}
.contact-form .wpcf7-list-item label { position: relative;}
/* カスタムチェックボックス: Figma準拠(28×27px, border 2px #339fd6, radius 5px) */
.contact-form .wpcf7-acceptance .wpcf7-list-item label::before {
    content: '';
    display: block;
    width: 29px;
    height: 29px;
    border: 1px solid #E4E4E4;
    border-radius: 3px;
    background: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background .2s;
}
/* チェック時: 塗りつぶし＋白チェックマーク */
.contact-form .wpcf7-acceptance .wpcf7-list-item label:has(input[type=checkbox]:checked)::before {
    background: var(--main-color);
}
.contact-form .wpcf7-acceptance .wpcf7-list-item label:has(input[type=checkbox]:checked)::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translate(50%,-65%) rotate(45deg);
    width: 7px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* 送信ボタン（トップページのCTAボタンと同じ見た目） */
/* input要素は疑似要素(::after)を持てないため、矢印は背景画像で表現する */
.wpcf7-submit {
    display: inline-block;
    max-width: 130px;
    width: 100%;
    height: 40px;
    margin: 40px auto 0;
    padding: 0 35px 0 18px;
    background: var(--main-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='7' viewBox='0 0 16.5 6.50033' fill='none'%3E%3Cpath d='M10.75 0.750156L15.75 3.33925L10.75 5.75016' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0357 3.25016H0.75' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 17px 7px;
    border: 1px solid var(--main-color);
    border-radius: 100vmax;
    color: #fff;
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
    margin-bottom: 2rem;
}
.wpcf7-submit:hover {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='7' viewBox='0 0 16.5 6.50033' fill='none'%3E%3Cpath d='M10.75 0.750156L15.75 3.33925L10.75 5.75016' stroke='%23006e38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0357 3.25016H0.75' stroke='%23006e38' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    border-color: var(--main-color);
    color: var(--main-color);
}
form.contact-form {
    display: block;
    text-align: center;
}

.list-mb3 li { 
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 1300px) {
    .sec-inline-start, .sec-inline-end {
        padding: 0;
    }
}
/* ========================================
   レスポンシブ: 991px
======================================== */
@media (max-width: 991px) {
    .head-inner { padding: 0 16px; }
    .head-nav > ul > li > a { padding: 0 12px; }

    .sec01-concept-txt {
        font-size: 100px;
        margin-bottom: 2rem;
    }
    .sec01-left {
        margin-left: 3em;
    }
    .sec01-left p {
        font-size: 18px;
        line-height: 56px;
        margin-bottom: 2rem;
    }
    .sec01-right { padding-top: 0px; }
    /* .sec01-bar-group01 { height: 246px; } */
    .sec01-bar-group02 {
        /* height: 247px; */
        margin-top: 7em;
    }
    .sec01-vert-txt { font-size: 28px; }

    .top-page h2.sec04-tit { font-size: 28px; }
    .sec04-sub { font-size: 15px; }

    .top-page h2.sec05-tit { font-size: 28px; }
    .sec05-sub { 
        font-size: 16px;
        margin-bottom: 21px;
    }
    .sec05-content {
        max-width: 49%;
        padding: 1.5rem 2.25rem;
    }
    .sec05-deco {
        top: -180px;
        bottom: -180px;
        left: 58%;
        right: 10px;
    }
    .sec05-deco-col { 
        max-width: 160px;
    }

    .ft-left {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }
    .ft-nav { 
        justify-content: flex-start;
        padding-left: 0;
    }

    .breadcrumb ul {
        padding-inline: initial;
    }
    .sec-inline-start {
        padding-inline: initial;
        padding-left: 7.5%;
    }
    .sec-inline-end {
        padding-inline: initial;
        padding-right: 7.5%;
    }
    .sec-inline {
        padding-inline: initial;
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* .sec05-wrap が max-width:1145px に達するまで（〜1346px）は
   カード幅が縮んでいくのに .sec05-content 側の幅制限がなく、
   .sec05-deco(left:55%, rotate(15deg)) と重なってしまう。
   回転しているため見た目の左端は left の数値より外側に出る点も考慮。 */
@media (min-width: 992px) and (max-width: 1346px) {
    .sec05-deco {
        top: -180px;
        bottom: -180px;
        left: 75%;
    }
}

/* @media (min-width: 768px) {
    .news-swiper .swiper-slide { width: calc((100vw - 136px - 34.5px) / 3.3); }
} */

/* 戻す用（1280pxで固定値に切り替える旧実装。#sec02のoverflow:hiddenが画面幅いっぱいのため現在は不要） */
@media (min-width: 768px) and (max-width: 1280px) {
    .news-swiper .swiper-slide { width: calc((100vw - 136px - 34.5px) / 3.3); }
}

@media (min-width: 1281px) {
    .news-swiper .swiper-slide { 
        max-width: none;
        width: calc((1280px - 136px - 34.5px) / 3.3);
    }
}



/* ========================================
   レスポンシブ: 767px
======================================== */
@media (max-width: 767px) {
    #head { height: 60px; }
    a.anchorpoint {
        padding-top: 60px;
        margin-top: -60px;
    }
    .head-logo {
        width: 80%;
    }
    .head-nav { display: none; }
    .head-contact a {
        width: 110px;
        height: 36px;
        font-size: 14px;
    }

    .sp-menu {
        width: 90%;
    }
    .sp-has-sub > .sp-has-sub-wrap { flex-direction: column; }
    .sp-has-sub > .sp-has-sub-wrap > a { 
        width: 100%;
        height: 100%;
    }
    .sp-submenu { padding-top: 10px; }
    .sp-contact a { margin-left: 0; }

    #mv, #titbar { margin-top: 60px; }
    /* .mv-img { height: 280px; } */

    /* #sec01 { padding: 50px 0 60px; }
    .sec01-wrap { padding: 0 20px; } */

    .sec01-right { 
        flex: .4;
        transform: translate(0,0);
    }

    .sec01-concept-txt {
        font-size: 91px;
        margin-left: 0;
    }
    .sec01-left {
        width: 100%;
        margin-left: 0;
    }
    .sec01-left p {
        line-height: 42px;
    }

    .sec02-tit, .sec03-tit { font-size: 28px; }
    .sec02-en {
        transform: translateY(0);
    }
    .sec02-slider-wrap { padding: 0 0 0 7.5%; }
    /* .news-fig { height: 180px; } */
    .news-footer {
        gap: 16px;
        margin-top: 2.5rem;
    }

    /* #sec03 {
        background: url(../img/sec03-bg-sp.png) no-repeat center / cover;
        background-position-y: -10rem;
    } */

    .sec03-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sec03-list li {
        max-width: none;
        margin-inline: 0;
    }
    .sec03-label {
        font-size: 23px;
    }

    #sec02 {
        padding-bottom: 5rem
    }
    #sec02::after {
        bottom: -5rem;
        height: 5rem;
    }

    #sec03 { 
        padding-top: 2.5rem;
        padding-bottom: 5rem;
    }
    #sec04::before {
        top: -5rem;
        height: 5rem;
    }

    #sec04 { padding: 5rem 0 60px; }
    /* sec04: Figmaデザイン通り、4段の縦積みではなく2列2段のグリッドに切り替える。
       DOM順（img01:左上 → img02:右上 → img03:左下 → img04:右下）が
       そのままグリッドの並びと一致するため、orderでの並び替えは不要 */
    .sec04-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 220px);
    }
    .sec04-img01 { border-radius: 10px 0 0 0; }
    .sec04-img02 { border-radius: 0 10px 0 0; }
    .sec04-img03 {
        border-radius: 0 0 0 10px;
        position: relative;
    }
    /* img03単体には収まらないテキスト（下段2枚にまたがる）のため、
       デスクトップ用のオーバーレイ（img03内蔵）は非表示にする */
    .sec04-img03 .sec04-overlay h2.sec04-tit,
    .sec04-img03 .sec04-overlay .sec04-sub,
    .sec04-img03 .sec04-overlay .sec04-btn {
        display: none;
    }
    /* Figmaの Rectangle 61（img03範囲のみを覆う左→右グラデーション）を再現し、
       下段左側の文字の視認性を確保する */
    .sec04-img03::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(102,102,102,0));
        pointer-events: none;
    }
    .sec04-img04 { border-radius: 0 0 10px 0; }
    .sec04-en {
        top: 1rem;
        left: 7.875%;
    }
    .sec04-overlay-sp {
        display: block;
    }
    /* sec04-enの実際のボックス（top:1rem + font-size）を基準に、
       固定の余白(0.5rem)を足して配置する。%指定だと画像の行高が固定なのに対し
       enの文字サイズはvwで縮むため、狭い幅ほど余白が開きすぎてしまう問題を解消 */
    .sec04-overlay-sp h2.sec04-tit {
        position: absolute;
        top: calc(300px - 3rem);
        left: 7.875%;
        right: 5%;
        margin: 0;
        z-index: 2;
    }
    /* 下段2枚（img03/img04）にまたがるため、各画像のoverflow:hiddenの影響を
       受けないよう.sec04-grid直下に配置。タイトルの下端を基準に配置する */
    .sec04-sub-sp {
        display: block;
        position: absolute;
        top: calc(300px - 3rem + 50.4px + 0.5rem);
        left: 7.875%;
        right: 5%;
        margin: 0;
        z-index: 2;
    }
    .sec04-btn-sp {
        display: flex;
        position: absolute;
        left: 7.875%;
        bottom: 1.25rem;
        z-index: 2;
    }
    .top-page h2.sec04-tit {
        line-height: 1.8;
        white-space: normal;
        margin-bottom: clamp(12px, 5cqw, 20px);
    }
    .sec04-sub {
        margin-bottom: clamp(12px, 5cqw, 20px);
    }

    #sec05 { padding: 2.5rem 0 5rem; }
    .sec05-card {
        height: 310px;
        border-radius: 10px;
    }
    .top-page h2.sec05-tit { 
        font-size: 23px;
        margin-bottom: 1rem;
    }
    .sec05-sub { font-size: 14px; }
    .sec05-deco {
        top: -150px;
        bottom: -150px;
        left: 85%;
        right: -55px;
    }
    /* .sec05-deco-col { max-width: 135px; } */
    .sec05-deco-col { width: 105%;}
    .sec05-deco-track img { 
        height: 100%;
    }
    .sec05-deco-col02 { margin-top: -30px; }
    .sec05-content {
        max-width: 55%;
        padding: 1.5rem 7.875%;
    }
    .sec05-txt {
        margin-left: 0;
    }
    .top-page .sec04-img03 h2.sec04-tit { display: none;}

    #foot { padding: 40px 0 20px; }
    
    .ft-wrap {
        flex-direction: column;
        row-gap: 45px;
        padding-bottom: 45px;
    }
    .ft-left { width: 100%; }
    /* .ft-logo img { width: 200px; } */
    .ft-bnr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .ft-bnr-row { display: contents; }
    .ft-bnr-row img {
        width: 100%;
    }
    .ft-nav {
        flex-direction: column;
        gap: calc(1em + 1px);
        padding-left: 0;
    }
    .ft-nav-col01 ul li:not(:last-child) { 
        margin-bottom: 16px;
    }
    .ft-nav-col02 .ft-nav-head { margin-top: 0px; }
    .ft-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 15px;
        width: 85%;
    }

    h1 { font-size: 26px; }
    h2 { font-size: 24px; }
    h3 { font-size: 22px; }
    h4 { font-size: 20px; }
    h5 { font-size: 18px; }
    h6 { font-size: 16px; }
    .sec-inline {
        padding-left: 7.5%;
        padding-right: 7.5%;
    }

    #titbar {
        /* height: 148px; */
        height: 115px;

        hgroup {
            padding-right: 0;
            padding-left: 7.5%;
            gap: 15px;

            h1 {
                font-size: 26px;
            }
            span {
                font-size: 10px;
            }
        }
    }
    #titbar::after {
        max-width: 170px;
        width: 50vw;
        max-height: 150px;
    }

    /* .concept-head { font-size: 26px;} */
    .concept-wrap .item { 
        flex-direction: column;
        padding: 2.5rem 1.5rem;
    }
    .concept-wrap p {
        font-size: 16px;
        line-height: 2;
    }
    .credo-list li {
        font-size: 16px;
        line-height: 2;
        margin-bottom: 16px;
    }

    .message-box {
        flex-direction: column;
    }

    .group-wrap { flex-direction: column;}

    .vision-txt, .bsns-item p {
        line-height: 32px;
    }
    .bsns-item:not(:last-child) { margin-bottom: 4rem;}
    .vision-wrap {
        flex-direction: column;
    }
    .vision-wrap .item {
        width: 100%;
    }

    .concept {
        font-size: 16px;
        line-height: 40px;
    }
}

/* ========================================
   レスポンシブ: 575px
======================================== */
@media (max-width: 575px) {
    #cpage { font-size: 14px;}

    .sec01-btn a, .sec02-btn a, .sec04-btn, .sec05-btn {
        font-size: 12px;
        height: 32px;
        max-width: 130px;
        gap: 8px;
        padding: 0px 15px;
    }
    .arrow-icon, .arrow-icon-gr {
        width: 12px;
        height: 12px;
    }

    .sp-submenu { width: 100%;}

    .sec01-wrap, .sec03-wrap, .ft-wrap {
        width: 85%;
    }
    .sec04-wrap, .sec05-wrap { width: 100%;}

    .head-logo { max-width: 220px;}

    #sec01 { padding-top: 7rem;}

    .sec01-concept-txt { 
        font-size: 18vw;
        margin-bottom: 1rem;
    }
    .sec01-left p { font-size: 16px;}

    .sec01-right-inner {
        flex-direction: column-reverse;
        align-items: center;
        gap: 8px;
    }
    .sec01-bar-group {
        padding: 4px 12px;
    }
    .sec01-bar-group01 {
        margin-right: 2em;
        padding-top: 4px;
    }
    .sec01-bar-group02 {
        margin-top: 0;
        padding-top: 4px;
        margin-left: 2em;
    }
    .sec01-bar-group01::after {
        top: -3em;
        left: -3em;
        transform: none;
        width: 125%;
        height: 125%;
    }
    .sec01-vert-txt {
        writing-mode: horizontal-tb;
        letter-spacing: 0.1em;
    }

    .sec02-head {
        padding: 0;
        width: 85%;
        flex-direction: column-reverse;
        align-items: flex-start;
        /* row-gap: 1rem; */
    }
    .sec03-head {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .sp-nav { width: 85%;}
    .sp-menu {
        top: 60px;
        max-width: none;
        height: calc(100% - 60px);
        width: 100%;
        border-radius: 0;
        padding: 50px 5px 48px 5px;
    }
    #clickarea .clickarea-overlay { display: none; }

    .sp-submenu {
        flex-direction: column;
        padding-top: 8px;
        gap: 0;
    }
    .sp-sub-col { 
        width: 100%;
        margin-bottom: 15px
    }
    .sp-sub-col:last-child { margin-bottom: 0;}

    .sp-contact { justify-content: center; }
    .sp-contact a { margin-left: 0; }

    .sec01-wrap {
        flex-direction: column-reverse;
        align-items: center;
        row-gap: 50px;
    }

    #sec02 { 
        padding-top: 0;
        /* padding-bottom: 2.5rem; */
        padding-bottom: 5rem;
    }
    /* #sec03 { 
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    } */
    .sec03-wrap { padding-top: 2.5rem;}

    .sec03-list li {
        max-width: 250px;
    }
    .sec03-label { font-size: 16px;}
    .sec03-list figure { aspect-ratio: 1; }

    .news-controls { display: none;}

    .sec04-grid { grid-template-rows: repeat(2, 155px); }
    .sec04-overlay-sp h2.sec04-tit { top: calc(185px - 2rem); }
    .sec04-sub-sp { top: calc(200px - 2.5rem + 37px + 0.5rem); }
    .top-page h2.sec04-tit {
        font-size: clamp(23px, 6vw, 28px);
        margin-bottom: 1rem;
    }


    .sec04-sub {
        font-size: clamp(12px, 3vw, 15px);
        line-height: 20px;
    }
    /* sec05: RECRUITラベル直下にタイトル・サブテキストを配置し、
       ボタンのみ下部に残すFigma通りの配置に切り替える */
    .sec05-top {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .sec05-content { padding-bottom: 1.5rem;}
    /* sec05-deco: カードがaspect-ratio(320/620)で縦長になった分の高さを補うため、
       767px用の値より一回り大きくしてタイルの密度を保つ */
    .sec05-deco {
        top: -180px;
        bottom: -180px;
        left: 65vw;
        right: -8vw;
    }
    /* .sec05-deco-col { 
        max-width: 135px;
    } */
    .sec05-deco-col { 
        max-width: none;
        /* width: 80%; */
        width: 28vw;
    }
    .sec05-deco-track img {
        height: 100%;
        margin-bottom: 7px;
    }
    .sec05-deco-col02 { margin-top: -35px; }
    .sec05-sub {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 21px;
    }

    .ft-nav { display: none;}
    footer a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .ft-bnr-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    .ft-bnr {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        justify-items: center;
    }
    .ft-left {
        text-align: center;
    }

    

    .about-list .item {
        display: block;
        padding: 1rem;
    }
    .about-year {
        width: 100%;
        margin-bottom: 1rem;
    }

    .about-year, .about-txt, .message-txt p, .group-txt p { font-size: 14px;}

    .contact-form dl dt label { padding-left: 0;}
    .form-privacy__text {
        font-size: 12px;
        height: auto;
        max-height: 150px;
    }
    .contact-from .wpcf7-list-item label { font-size: 16px; }
    .form-input { width: 100%; }
    /* CF7 SP: 縦積み */
    .contact-form dl > .contact-short-item {
        flex-direction: column;
        gap: 12px;
        padding: 14px 0;
    }
    .contact-form dl dt {
        padding-top: 0;
        min-width: auto;
    }
    .contact-form .wpcf7-form-control-wrap textarea { font-size: 14px; }
    .contact-form .wpcf7-list-item label { font-size: 16px; }
}