:root{
    --key: #5b8f63;
    --sub: #5b8f63;
    --green: #5b8f63;
    --beige-soft: #f9f8f4;
    --beige-dark: #eeeae0;
}
@font-face{
    font-family: "TA Oonishi";
    src: url("../fonts/ta-oonishi.woff2") format("woff2");
    font-display: swap;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
  overflow-x: clip;
}
body{
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    overflow-x: clip;
    padding-top: 62px;
    background: #fff;
}
body.home,
body.front-page{
    padding-top: 0;
}
body.drawer-open{
    overflow: hidden;
}
img{
	width: 100%;
    height: auto;
	display: block;
}
p{
	line-height: 2;
	letter-spacing: 1px;
}
h1,
h2,
h3{
	line-height: 1.7;
	letter-spacing: 3px;
}
table{
	width: 100%;
}
table,
td,
th{
	border-collapse: collapse;
    letter-spacing: 2px;
	border: 1px solid #d8d8db;
}
th,
td{
	padding: 10px 20px;
	line-height: 1.5;
    letter-spacing: 2px;
}
th{
    white-space: nowrap;
}
dt,
dd,
li{
	line-height: 1.5;
    letter-spacing: 2px;
}
/*
section{
    padding: 80px 0;
}
*/

@media screen and (max-width:768px){
    h1,
    h2,
    h3{
        letter-spacing: 1px;
        overflow-wrap: anywhere;
    }
    th{
        white-space: normal;
    }
    section{
        padding: 30px 0;
    }
    body{
        font-size: 14px;
        padding-top: 52px;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    body.home,
    body.front-page{
        padding-top: 0;
    }
}

.width-800{
	max-width: 800px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-900{
	max-width: 900px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-s{
	max-width: 1000px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-1100{
	max-width: 1100px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-m{
	max-width: 1200px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-1300{
	max-width: 1300px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-1400{
	max-width: 1400px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-l{
	max-width: 1500px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.width-full{
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
}

.flex,
.flex-al{
	display: flex;
	flex-wrap: wrap;
}
.flex-sb,
.flex-sb-al{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.rev{
	flex-direction: row-reverse;
}
.l404-page{
    padding-top: 100px;
}

.text-r{
	text-align: right;
}
.text-c{
	text-align: center;
}
.imp{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

@media screen and (max-width:768px){
	.flex,
	.flex-sb{
		display: block;
	}
    .l404-page{
        padding-top: 50px;
    }
.sec-title,
.sec-title2,
.sec-title3{
    margin-bottom: 40px;
}
.sec-title3 p{
    margin-top: 50px;
}

}

/**********************************************************************/
/*************************  リンクボタン  *************************/
/**********************************************************************/


/**********************************************************************/
/*************************  ホバーアニメーション  *************************/
/**********************************************************************/
@media screen and (min-width:768px){
	.hov-underline{
	  position: relative;
	  display: inline-block;
	  text-decoration: none;
	  color: inherit;
	}

	/* 下線の初期状態（非表示） */
	.hov-underline::after {
	  content: "";
	  position: absolute;
	  bottom: -5px;
	  left: 0;
	  height: 2px;
	  width: 100%;
	  background: var(--green);
	  transform: scaleX(0);     /* 横幅を0に */
	  transform-origin: left;   /* 左から伸びる */
	  transition: transform 0.3s ease;
	}
	/* ホバー時にアンダーラインを伸ばす */
	.hov-underline:hover::after {
	  transform: scaleX(1);     /* 横幅を元に戻す */
	}

	.hov-zoom{
	  overflow: hidden;
	}
	.hov-zoom img,
	.hov-zoom2 img{
	  transition: transform 0.4s ease, opacity 0.4s ease;
	}
	.hov-zoom:hover img,
	.hov-zoom2:hover img{
	  transform: scale(1.1);  /* 少し拡大 */
	  opacity: 0.7;            /* ちょっと薄くする */
	}

	.hov-opa{
		transition: opacity 0.3s ease;
	}
	.hov-opa:hover{
		opacity: 0.7;
	}
	.hov-btn{
		background-color: transparent;
		transition: all 0.3s ease;
	}
	.hov-btn:hover{
		background-color: rgba(0, 0, 0, 0.05);
		border-color: var(--key);
        color: var(--key);
		transform: translateY(-2px);
	}

	.hov-up{
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
	}
	.hov-up:hover{
		transform: translateY(-6px);
	}
}

/**********************************************************************/
/**********************  オブザーバーアニメーション  ***********************/
/**********************************************************************/
/* フェイド + スライド <div class="fade-up js-fadein"> */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease;
}
.fade-up.is-visible{
    opacity: 1;
    transform: translateY(0);
}
/* フェイド + スケール <div class="fade-scale js-fadein"> */
.fade-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: 0.6s ease;
}
.fade-scale.is-visible{
    opacity: 1;
    transform: scale(1);
}
/* 横からスライド <div class="fade-left js-fadein"> */
.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: 0.8s ease;
}
.fade-left.is-visible{
    opacity: 1;
    transform: translateX(0);
}
/* マスクで出現 <div class="mask-item js-fadein"> */
.mask-item {
    overflow: hidden;
}
.mask-item img{
    display: block;
    width: 100%;
    /* 初期状態 */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s ease;
}
.mask-item.is-visible img{
    clip-path: inset(0 0 0 0);
}
/* ぼかしながら出現 <div class="blur-item js-fadein"> */
.blur-item {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(20px);
    transition: 
        opacity 0.8s ease,
        filter 0.8s ease,
        transform 0.8s ease;
}
.blur-item.is-visible{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.delay-15{ transition-delay: 0.15s; }
.delay-20{ transition-delay: 0.2s; }
.delay-30{ transition-delay: 0.3s; }
.delay-40{ transition-delay: 0.4s; }
.delay-50{ transition-delay: 0.5s; }

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

.header-fix{
    border-bottom: 1px solid #f1f1f4;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.95);
	height: 62px;
    padding: 2px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
body.home .header-fix,
body.has-hero .header-fix{
    transform: translate3d(0, -100%, 0);
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.home.is-header-shown .header-fix,
body.has-hero.is-header-shown .header-fix{
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}
.header-container{
    display: flex;
    justify-content: space-between;
	align-items: center;
    width: 100%;
    padding: 0 28px 0 34px;
    box-sizing: border-box;
}
.header-logo a{
    display: flex;
    align-items: center;
    height: 62px;
}
.header-logo img{
    width: auto;
    height: 42px;
}
.hero-logo{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 62px;
    display: flex;
    align-items: center;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.hero-logo-link{
    display: flex;
    align-items: center;
    height: 62px;
    pointer-events: auto;
}
.hero-logo img{
    width: auto;
    height: 42px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,0.35));
}
body.is-header-shown .hero-logo{
    opacity: 0;
}
body.is-header-shown .hero-logo-link{
    pointer-events: none;
}
.header-container nav{
	flex-basis: calc(100% - 220px);
}
@media screen and (min-width:1281px){
    .header-container{
        padding: 0 100px 0 34px;
    }
}
@media screen and (max-width:1280px){
	.header-container nav{
		display: none;
	}
}

.header-nav{
    display: flex;
    align-items: center;
    justify-content: right;
	margin-right: 0;
}
.header-nav>li{
	margin-left: 1.15%;
	font-size: 13px;
	position: relative;
}
.header-nav-parent{
	display: inline-block;
	padding: 20px 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.header-nav-direct{
	display: inline-block;
	padding: 20px 0;
	color: var(--key-deep);
	font-weight: 500;
	letter-spacing: .08em;
	white-space: nowrap;
}
.header-nav-direct:hover{
	color: var(--key);
}
.header-nav > li.has-mega .header-nav-parent{
	position: relative;
}
.header-nav > li.has-mega .header-nav-parent::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
}
.header-nav>li ul{
    position: absolute;
    top: 100%;
    left: 50%;
    background: var(--beige-soft);
    padding: 20px;
    white-space: nowrap;
    width: max-content;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    letter-spacing: 1px;
    margin-top: 10px;
    transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}
.header-nav>li ul li:not(:last-of-type){
	padding-bottom: 15px;
}
.header-nav>li:hover ul{
	opacity: 1;
	visibility: visible;
}
.nav-child-title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--key);
}
.nav-child-title::after{
    content: "";
    flex-grow: 1;
    border-top: 1px solid #aaa;
}
.header-nav-btn{
    padding: 6px 14px;
    border-radius: 5px;
    border: 1px solid;
    white-space: nowrap;
}
.header-nav-btn.soudan-btn{
    background: var(--key);
    color: #fff;
    border-color: var(--key);
}
.header-nav-btn.catalog-btn{
    background: #fff;
    color: var(--key);
    border-color: var(--key);
}
.header-nav-btn.event-btn{
    background: #fff;
    color: #222;
    border-color: #222;
}

.header-nav > li.has-mega{
    position: static;
}
.header-mega{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid #eceae6;
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 20;
}
.header-nav > li.has-mega:has(.header-nav-parent:hover) .header-mega,
.header-nav > li.has-mega:has(.header-mega:hover) .header-mega,
.header-nav > li.has-mega:focus-within .header-mega{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.header-mega-in{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 48px;
    padding: 36px 0 40px;
    box-sizing: border-box;
}
.header-nav > li.has-mega .header-mega .header-mega-in{
    padding-top: 36px;
    padding-bottom: 40px;
}
.header-nav > li.has-mega .header-mega ul{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    white-space: normal;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    flex: 1;
}
.header-nav > li.has-mega .header-mega ul li{
    padding: 0;
}
.header-nav > li.has-mega .header-mega ul li:not(:last-of-type){
    padding-bottom: 0;
}
.header-nav > li.has-mega .header-mega ul a{
    display: block;
    padding: 10px 0;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #f1eee8;
}
.header-nav > li.has-mega .header-mega ul a:hover{
    opacity: 0.55;
}
.header-mega-img{
    flex: 0 0 38%;
    max-width: 420px;
    overflow: hidden;
}
.header-mega-img img{
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.header-mega-build{
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 40px 56px;
    align-items: start;
}
.header-mega-heading{
    display: block;
    margin: 0 0 12px;
    padding: 9px 12px;
    background: var(--key);
    color: #fff;
    font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.45;
}
.header-mega-heading::after{
    content: none;
}
.header-mega-heading a{
    color: inherit;
    text-decoration: none;
}
.header-mega-heading a:hover{
    opacity: 0.92;
}
.header-nav > li.has-mega .header-mega-build .header-mega-links{
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: none;
    width: 100%;
}
.header-mega-cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.header-mega-card{
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
}
.header-mega-card img{
    width: 100%;
    height: 118px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.header-mega-card:hover img{
    transform: scale(1.06);
}
.header-mega-card span{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 12px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.35;
}
.header-mega-card span::before{
    content: "";
    flex: 0 0 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #fff;
}
.header-mega-about{
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
}
.header-mega-about-top{
    grid-column: 1 / -1;
}
.header-mega-play-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.header-mega-play{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d8d4cc;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #1a1a1a;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.header-mega-play::before{
    content: "";
    flex: 0 0 8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #222;
}
.header-mega-play:hover{
    opacity: 1;
    border-color: var(--key);
    color: var(--key-deep);
    background: #fff;
}
.header-nav > li.has-mega .header-mega-purpose ul{
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 2px;
    flex: none;
    width: 100%;
    padding: 0 0 0 4px;
    box-sizing: border-box;
}
.header-nav > li.has-mega .header-mega-purpose ul a{
    position: relative;
    display: block;
    padding: 8px 0 8px 15px;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #1a1a1a;
    transition: color 0.2s ease, background 0.2s ease;
    border-radius: 2px;
}
.header-nav > li.has-mega .header-mega-purpose ul a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #222;
    transform: translateY(-50%);
}
.header-nav > li.has-mega .header-mega-purpose ul a:hover{
    opacity: 1;
    color: var(--key-deep);
    background: var(--beige-soft);
}
.header-mega-purpose{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
    padding-bottom: 24px;
}
.header-mega-purpose-top{
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}
.header-mega-purpose-cta{
    margin: 0;
}
.header-mega-purpose-cta-link{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--key-deep);
    border-radius: 4px;
    background: var(--key-deep);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    white-space: nowrap;
}
.header-mega-purpose-cta-link:hover{
    background: var(--key);
    border-color: var(--key);
    color: #fff;
}
.header-mega-purpose-group .header-mega-play.is-emphasis{
    color: var(--key-deep);
    font-weight: 600;
}
.header-mega-purpose-col{
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}
.header-mega-purpose .header-mega-heading{
    margin-bottom: 10px;
}
.header-mega-purpose-group .header-mega-play{
    width: 100%;
    box-sizing: border-box;
}
.header-mega-lineup-only{
    display: block;
}
/* 商品ラインナップのみ：3カード化に合わせてサムネの縦を広げる（他メガの .is-captioned は 170〜180px のまま） */
.header-mega-lineup-only .header-mega-card.is-captioned img{
    height: 280px;
}
.header-mega-lineup-foot{
    margin: 20px 0 0;
    text-align: center;
}
.header-mega-lineup-index{
    display: inline-flex;
    width: auto;
    margin: 0;
    background: var(--key);
    border-color: var(--key);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.header-mega-lineup-index::before{
    border-color: transparent transparent transparent #fff;
}
.header-mega-lineup-index:hover{
    opacity: 1;
    background: #fff;
    border-color: var(--key);
    color: var(--key-deep);
}
.header-mega-lineup-index:hover::before{
    border-color: transparent transparent transparent var(--key-deep);
}
.header-mega-cards-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.header-mega-trio{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
}
.header-mega-trio-top{
    grid-column: 1 / -1;
}
.header-mega-trio-col{
    min-width: 0;
    padding: 0 16px;
    border-right: 1px solid #d8d4cc;
    box-sizing: border-box;
}
.header-mega-trio-col:last-child{
    border-right: 0;
}
.header-nav > li.has-mega .header-mega ul.header-mega-trio-posts{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    flex: none;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.header-mega-trio-posts li{
    min-width: 0;
}
.header-nav > li.has-mega .header-mega .header-mega-trio-posts a.header-mega-trio-post{
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 0;
    border-bottom: 0;
    color: #222;
    letter-spacing: normal;
    line-height: 1.45;
    transition: opacity 0.2s ease;
}
.header-nav > li.has-mega .header-mega .header-mega-trio-posts a.header-mega-trio-post:hover{
    opacity: 0.78;
}
.header-mega-trio-post-thumb{
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #ebe7df;
}
.header-mega-trio-post-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header-mega-trio-post-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.header-mega-card.is-captioned img{
    height: 170px;
}
.header-mega-trio .header-mega-card.is-captioned img,
.header-mega-cards-2 .header-mega-card.is-captioned img{
    height: 180px;
}
.header-mega-card span.header-mega-card-copy{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 36px 14px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.68) 100%);
    color: #fff;
    align-items: unset;
    gap: 0;
    font-size: inherit;
    letter-spacing: normal;
    line-height: inherit;
}
.header-mega-card span.header-mega-card-copy::before{
    content: none;
}
.header-mega-card-copy b{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.header-mega-card-copy b::before{
    content: "";
    flex: 0 0 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #fff;
}
.header-mega-card-copy em{
    display: block;
    margin: 6px 0 0 15px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.92);
    font-weight: 400;
}
.header-mega-panel-top{
    padding-bottom: 12px;
    border-bottom: 1px solid #d8d4cc;
    margin-bottom: 20px;
}
.header-mega-read-top{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d8d4cc;
}
.header-mega-in.header-mega-read{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 0;
    align-items: stretch;
}
.header-mega-read-main{
    min-width: 0;
    padding-right: 40px;
}
.header-mega-read-side{
    min-width: 0;
    padding: 20px 24px 20px 32px;
    border-left: 1px solid #e3e0da;
    background: var(--beige-soft);
    box-sizing: border-box;
}
.header-mega-read-heading{
    min-width: 0;
}
.header-mega-read-en{
    margin: 0 0 4px;
    font-family: "EB Garamond", "Times New Roman", serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.2;
    color: #8a8a8a;
    text-transform: uppercase;
}
.header-mega-read-title{
    margin: 0;
    font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    color: var(--key);
}
.header-mega-read-title a{
    color: inherit;
    text-decoration: none;
}
.header-mega-read-title a:hover{
    color: var(--key);
    opacity: 0.75;
}
.header-mega-read-more{
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--key-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.header-mega-read-more:hover{
    opacity: 0.7;
}
.header-mega-read-body{
    display: grid;
    grid-template-columns: minmax(200px, 228px) minmax(0, 1fr);
    gap: 28px 40px;
    align-items: start;
}
.header-mega-read-lead{
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: #555;
}
.header-mega-read-nav .header-mega-play{
    font-size: 15px;
    font-weight: 500;
    border-color: #d8d4cc;
    color: #1a1a1a;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.header-mega-read-nav .header-mega-play:hover{
    opacity: 1;
    border-color: var(--key);
    color: var(--key-deep);
    background: #fff;
}
.header-mega-read-nav .header-mega-play.is-read-cat::before{
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
}
.header-mega-read-nav .header-mega-play.is-read-cat-iezukuri::before{
    background: var(--key);
}
.header-mega-read-nav .header-mega-play.is-read-cat-hinibi::before{
    background: #b8925a;
}
.header-nav > li.has-mega .header-mega .header-mega-read-posts,
.header-nav > li.has-mega .header-mega .header-mega-read-news{
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none;
}
.header-nav > li.has-mega .header-mega .header-mega-read-posts li,
.header-nav > li.has-mega .header-mega .header-mega-read-news li{
    padding: 0;
}
.header-mega-read-feed{
    min-width: 0;
}
.header-nav > li.has-mega .header-mega .header-mega-read-posts a.header-mega-read-post{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid #ebe7df;
    letter-spacing: normal;
    color: #222;
    box-sizing: border-box;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.header-mega-read-posts li:last-child a.header-mega-read-post{
    border-bottom: 0;
}
.header-nav > li.has-mega .header-mega .header-mega-read-posts a.header-mega-read-post:hover{
    opacity: 1;
    background: var(--beige-soft);
}
.header-mega-read-post-thumb{
    flex: 0 0 128px;
    width: 128px;
    max-width: 128px;
    display: block;
    overflow: hidden;
    background: #f3f1ec;
    border-radius: 2px;
}
.header-mega-read-post-thumb img{
    width: 128px;
    height: 80px;
    max-width: none;
    object-fit: cover;
}
.header-mega-read-post-body{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
}
.header-mega-read-post-label{
    align-self: flex-start;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
}
.header-mega-read-post-label.is-tone-iezukuri{
    background: var(--key);
}
.header-mega-read-post-label.is-tone-hinibi{
    background: #b8925a;
}
.header-mega-read-post-title{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #111;
}
.header-mega-read-post-body time{
    font-size: 12px;
    color: #777;
    letter-spacing: 0.05em;
}
.header-mega-read-news{
    margin: 0;
}
.header-mega-read-news-link{
    display: block;
    padding: 12px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid #ebe7df;
    color: #222;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.header-nav > li.has-mega .header-mega .header-mega-read-news a.header-mega-read-news-link{
    padding: 12px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid #ebe7df;
    letter-spacing: normal;
}
.header-mega-read-news li:last-child .header-mega-read-news-link{
    border-bottom: 0;
}
.header-mega-read-news-link:hover{
    opacity: 1;
    background: rgba(255,255,255,0.65);
}
.header-mega-read-news-link time{
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #777;
    letter-spacing: 0.05em;
}
.header-mega-read-news-title{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #111;
}
.header-mega-read-empty{
    margin: 0;
    padding: 20px 0;
    font-size: 13px;
    color: #888;
    letter-spacing: 0.04em;
}

@media screen and (max-width:768px){
    .header-fix{
        height: 52px;
    }
    .header-container{
        padding: 0 16px 0 20px;
    }
    .header-logo{
        height: 50px;
    }
    .header-logo a{
        height: 50px;
    }
    .header-logo img{
        height: 34px;
    }
    .hero-logo,
    .hero-logo-link{
        height: 52px;
    }
    .hero-logo img{
        height: 34px;
    }
}

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

.sns-bar{
    position: fixed;
    top: 105px;
    right: 28px;
    z-index: 90;
    width: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    mix-blend-mode: difference;
}
.sns-bar a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    transition: opacity 0.3s ease;
}
.sns-bar a:hover{
    opacity: 0.65;
}
.sns-bar svg{
    width: 22px;
    height: 22px;
    display: block;
}
.sns-bar .sns-line-icon{
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: invert(1);
}
body.drawer-open .sns-bar{
    visibility: hidden;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .sns-bar{
        display: none;
    }
}

.hamburger-area {
    position: fixed;
    top: 19px;
    right: 28px;
    z-index: 110;
}
body.home .hamburger-area,
body.has-hero .hamburger-area{
    transform: translate3d(0, -80px, 0);
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.home.is-header-shown .hamburger-area,
body.has-hero.is-header-shown .hamburger-area{
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}
.hamburger{
  position: relative;
  width: 30px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
}
/* 各線（span） */
.hamburger span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s ease;
}
/* 上の線 */
.hamburger span:nth-child(1) {
  top: 0;
}
/* 真ん中の線 */
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
/* 下の線 */
.hamburger span:nth-child(3) {
  bottom: 0;
}
/* ✕ に変わるときの状態 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 50%;
}
.hamburger.active span:nth-child(2){
  opacity: 0;
}
.hamburger.active span:nth-child(3){
  transform: rotate(-45deg);
  bottom: auto;
  top: 50%;
}
/* ドロワーメニュー初期状態 */
.drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--beige-dark);
    transition: right 0.4s ease;
    z-index: 90;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 0;
}
/* 開いた状態 */
.drawer.open {
  right: 0;
}
body.drawer-open .header-fix,
body.home.drawer-open .header-fix,
body.has-hero.drawer-open .header-fix,
body.home.is-header-shown.drawer-open .header-fix,
body.has-hero.is-header-shown.drawer-open .header-fix{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.drawer-open .hero-logo{
    opacity: 0;
    pointer-events: none;
}
.drawer-in{
    min-height: 100vh;
}
.drawer-logo{
    text-align: center;
    margin-bottom: 80px;
}
.drawer-logo a{
    justify-content: center;
}
.drawer-logo img{
    width: auto;
    height: 56px;
}
.drawer-column{
    flex: 1;
}
.drawer-menu{
    flex-grow: 1;
}
.drawer-column{
    flex-basis: 32%;
}
.drawer-menu-section:not(:last-of-type){
    margin-bottom: 40px;
}
.drawer-menu-title{
    border-left: 4px solid var(--green);
    padding: 6px 0 2px 10px;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
}
.drawer-menu-section ul li:not(:last-of-type){
    margin-bottom: 20px;
}
.site-menu{
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 32px;
    padding-right: 0;
    margin-bottom: 42px;
}
.site-menu-group{
    min-width: 0;
}
.site-menu-title{
    border-left: 4px solid var(--green);
    padding: 6px 0 2px 10px;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.site-menu-list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-menu-list > li:not(:last-child){
    margin-bottom: 14px;
}
.site-menu-subtitle{
    border-left: 4px solid var(--green);
    padding: 6px 0 2px 10px;
    margin: 30px 0 16px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.site-menu-list a{
    color: inherit;
    text-decoration: none;
}
.site-menu-details > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
}
.site-menu-details > summary::-webkit-details-marker{
    display: none;
}
.site-menu-details > summary::after{
    content: "+";
    flex: 0 0 auto;
    color: var(--green);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.site-menu-details[open] > summary::after{
    content: "−";
}
.site-menu-details > .site-menu-list{
    margin: 12px 0 4px 12px;
    padding-left: 14px;
    border-left: 1px solid #d4d9d2;
}
.site-menu-list-depth-1 > li:not(:last-child),
.site-menu-list-depth-2 > li:not(:last-child){
    margin-bottom: 10px;
}
.site-menu-list-depth-1 a,
.site-menu-list-depth-2 a{
    font-size: 14px;
}
.site-menu-list-depth-2{
    margin-top: 10px !important;
}
.drawer .drawer-main,
.footer-nav .drawer-main{
    display: block;
}
.drawer-cta{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.drawer-cta > a{
    display: block;
    border: 2px solid;
    padding: 15px 5px;
    text-align: center;
    margin-bottom: 0;
    transition: all 0.3s ease;
}
.drawer-cta > a:hover{
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.drawer-sns-area{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 3%;
    margin-top: 8px;
}
.drawer-sns-area a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #333;
    transition: opacity 0.3s ease;
}
.drawer-sns-area a:hover{
    opacity: 0.65;
}
.drawer-sns-area svg{
    width: 22px;
    height: 22px;
    display: block;
}
.drawer-sns-area .sns-line-icon{
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    object-position: center;
}
.drawer-info a{
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
}
.d-tel{
    width: 60px;
}
.d-tel-text{
    font-size: 36px;
    line-height: 1.1;
    font-family: "EB Garamond", serif;
    font-weight: 500;
    margin: 8px 0;
}

@media screen and (max-width:768px){
	.hamburger-area{
		top: 14px;
		right: 16px;
	}
    .drawer{
        justify-content: flex-start;
        padding: 72px 0 100px;
    }
    .drawer-logo{
        margin-bottom: 36px;
    }
    .drawer-logo img{
        height: 44px;
    }
    .drawer-menu-title{
        font-size: 15px;
        margin-bottom: 14px;
    }
    .drawer-menu-section{
        margin-bottom: 35px;
    }
    .drawer-menu-section ul li:not(:last-of-type){
        margin-bottom: 12px;
    }
    .site-menu,
    .footer-nav .site-menu{
        grid-template-columns: 1fr;
        gap: 28px;
        padding-right: 0;
    }
    .site-menu-group {
        padding: 0;
    }
    .site-menu-title{
        font-size: 15px;
        margin-bottom: 14px;
    }
    .site-menu-list > li:not(:last-child){
        margin-bottom: 12px;
    }
    .site-menu-subtitle{
        margin-top: 26px;
        font-size: 15px;
    }
    .drawer-column{
        margin-bottom: 8px;
    }
    .drawer-cta{
        margin-top: 12px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .drawer-info{
        margin-top: 24px;
    }
    .drawer-info a{
        justify-content: flex-start;
        gap: 10px;
    }
    .d-tel{
        width: 45px;
    }
    .d-info p{
        font-size: 14px;
    }
    .d-info p.d-tel-text{
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: 1px;
        margin: 8px 0 0;
    }
.drawer-cta > a{
    border: 1px solid;
    padding: 12px 5px;
    font-size: 14px;
}
.drawer-sns-area{
    grid-column: auto;
    margin-top: 14px;
}

    
}

/**********************************************************************/
/***************************  contact-link  ***************************/
/**********************************************************************/


/**********************************************************************/
/***************************  第1CTA  ***************************/
/**********************************************************************/
.site-cta{
    background: var(--beige-dark);
    padding: 56px 0;
    text-align: center;
}
.site-cta-lead{
    font-family: "Shippori Mincho", serif;
    font-size: 24px;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
}
.site-cta-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.site-cta-btn{
    display: inline-block;
    background: var(--key);
    color: #fff;
    padding: 16px 40px;
    border-radius: 4px;
    letter-spacing: 0.1em;
}
.site-cta-tel{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.site-cta-tel-num{
    font-family: "EB Garamond", serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.04em;
}
.site-cta-tel-note{
    font-size: 13px;
    margin-top: 6px;
    letter-spacing: 0.04em;
}
.site-cta-addr{
    margin-top: 20px;
    font-size: 14px;
}
.site-cta-addr a{
    text-decoration: underline;
}

@media screen and (max-width:768px){
    .site-cta{
        padding: 36px 0;
    }
    .site-cta-lead{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .site-cta-btn{
        padding: 14px 28px;
        width: 100%;
        max-width: 320px;
    }
    .site-cta-tel{
        align-items: center;
        text-align: center;
    }
    .site-cta-tel-num{
        font-size: 28px;
    }
}

/**********************************************************************/
/******************************  footer  ******************************/
/**********************************************************************/
.map-area{
    height: 400px;
}
.footer-nav{
    padding: 50px 0;
}
.footer-nav .drawer-logo{
    text-align: left;
    margin-bottom: 40px;
}
.footer-nav .drawer-logo a{
    justify-content: flex-start;
}
.footer-nav .drawer-logo img{
    width: auto;
    height: 52px;
}
.footer-nav .drawer-logo p{
    margin-top: 10px;
    line-height: 1.8;
    font-size: 13px;
    text-align: left;
}
.copyright{
    background: var(--beige-dark);
    padding: 10px;
    text-align: center;
    font-size: 13px;
}
.copyright a{
    text-decoration: underline;
}
.bottom-nav{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: center;
    background: var(--beige-soft);
    gap: 10px;
    padding: 12px;
    border-top: 1px solid #f1f1f4;
    z-index: 100;
    display: none;
}
.bottom-nav a{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 80px;
    border-radius: 10px;
    font-size: 20px;
}
.bottom-tel{
    background: var(--beige-dark);
	border: 1px solid var(--beige-dark);
}
.bottom-mail{
	background: var(--green);
	border: 1px solid var(--green);
    color: #fff;
}
.bottom-catalog{
	background: #f9f8f4;
	border: 1px solid #333;
}
.bottom-nav a img{
	width: 25px;
}

@media screen and (max-width:768px){
	.footer{
		padding-top: 30px;
	}
	.footer-wrapper{
		margin-bottom: 30px;
	}
    .footer-info{
        margin-bottom: 30px;
        text-align: center;
    }
	.footer-logo{
		margin-bottom: 0px;
	}
    .footer-logo a{
        font-size: 22px;
    }
    .footer-logo img{
        height: 40px;
        object-fit: contain;
    }
	.footer-info p{
		margin-bottom: 10px;
	}
    .footer-contact-area{
        margin-bottom: 30px;
        padding-left: 0;
    }
    .footer-contact a{
        margin-bottom: 12px;
        font-size: 14px;
        padding: 10px;
    }

	.footer-wrapper nav{
		margin: 0 5%;
	}
    .footer-nav li{
        margin-bottom: 0;
        font-size: 14px;
    }
    .footer-nav li a{
        margin-bottom: 0;
    }
    .footer-nav>ul>li{
        padding: 15px;
        border-bottom: 1px dashed #ccc;
    }
    .footer-nav li ul li{
        height: auto;
        padding: 5px;
    }
    .footer-nav li ul li:not(:last-of-type){
        border-bottom: 1px dashed #ccc;
    }    
    .map-area{
        height: 220px;
    }
    .footer-nav{
        padding: 36px 0 24px;
    }
    .footer-nav .drawer-logo{
        margin-bottom: 28px;
    }
	.copyright{
		font-size: 12px;
        padding: 12px 16px 20px;
	}
	.bottom-nav{
		display: flex;
		padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
	}
	.bottom-nav a{
		padding: 10px;
		border-radius: 5px;
		font-size: 14px;
		flex-basis: 30%;
		display: block;
		text-align: center;
	}
	.bottom-nav a img{
		width: 23px;
		margin: 0 auto 5px;
	}
}

/**********************************************************************/
/*****************************  page共通  *****************************/
/**********************************************************************/
.page-top h2{
    font-size: 30px;
    text-align: center;
}
.page-top p{
    margin-top: 50px;
    text-align: center;
    line-height: 2.2;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
}
.page-top-archive-title{
    display: flex;
    justify-content: center;
}
.page-top-archive .title-main{
    justify-content: center;
    align-items: center;
}
.page-top-archive .title-main img{
    width: 55px;
    margin-right: 12px;
}
.page-top-archive .title-main .title-label{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.page-top-archive .title-main .title-ja{
    font-size: 28px;
    text-align: center;
}
.page-top-archive .title-main .title-en{
    font-size: 16px;
    display: block;
    text-align: center;
}
.page-top-archive p{
    margin-top: 40px;
}
.page-top-flex{
    padding-left: 10%;
}
.page-top-info{
    flex-basis: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-top-info h2{
    margin-bottom: 30px;
    font-size: 32px;
    color: var(--green);
}
.page-top-info h2 span{
    font-size: 16px;
    display: block;
    margin-top: 5px;
}
.page-top-info p{
    font-size: 18px;
}
.page-top-info .lead{
    margin-bottom: 10px;
    color: var(--orange-soft);
    line-height: 1.8;
}
.page-top-img{
    flex-basis: calc(100% - 630px);
}
.page-top-img img{
    height: 100%;
    object-fit: cover;
    border-radius: 30px 0 0 30px;
}

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-header{
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 30px 0;
    background: #fff;
    color: #222;
    overflow: hidden;
    margin-top: 62px;
}
.page-header-text{
    flex: 1 1 22%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 16px 0 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 60vh;
    box-sizing: border-box;
}
.page-header-en{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "EB Garamond", serif;
    font-size: 16px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin: 0;
    color: #8a857c;
    line-height: 1.4;
    transform: translateY(12px);
}
.page-header-text .header-text{
    position: relative;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(26px, 2.8vw, 42px);
    letter-spacing: 0.2em;
    line-height: 1.65;
    color: #222;
    max-height: 60vh;
}
.page-header-img{
    position: relative;
    flex: 0 0 78%;
    width: 78%;
    height: 60vh;
    background: var(--beige-dark);
}
.page-header-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header--text-only{
    padding: 36px 0 28px;
    background: #fff;
    border-bottom: 1px solid #e6e1d6;
}
.page-header--text-only .page-header-text{
    min-height: 0;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.page-header--text-only .page-header-en,
.page-header--text-only .page-header-text .header-text{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    max-height: none;
    transform: none;
}
.page-header--text-only .page-header-en{
    font-size: 13px;
    letter-spacing: 0.32em;
}
.page-header--text-only .page-header-text .header-text{
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing: 0.14em;
    line-height: 1.55;
}

.privacy-page .page-body{
    padding: 48px 0 80px;
}
.privacy-doc-head{
    margin-bottom: 2.5em;
    padding-bottom: 1.75em;
    border-bottom: 1px solid #e6e1d6;
}
.privacy-doc-title{
    margin: 0 0 1em;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: 0.1em;
    line-height: 1.75;
    color: #222;
}
.privacy-doc-lead{
    margin: 0;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}
.privacy-content h2{
    margin-top: 2em;
}

.page-body{
    padding: 60px 0 80px;
}
.page-body-title{
    font-size: 28px;
    margin-bottom: 24px;
    letter-spacing: 0.08em;
}
.page-body-lead{
    font-size: 16px;
    margin-bottom: 28px;
    line-height: 2;
}
.contact-notes{
    margin-bottom: 24px;
}
.contact-notes li{
    margin-bottom: 8px;
}
.contact-office{
    margin-bottom: 36px;
    font-size: 14px;
}
.form-soon{
    padding: 24px;
    background: var(--beige-soft);
}

.wpcf7-form p,
.wpcf7-form label{
    display: block;
    margin-bottom: 16px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
    width: 100%;
    border: 1px solid #ccc;
    padding: 12px;
    background: #fff;
}
.wpcf7-form textarea{
    min-height: 140px;
}
.wpcf7-form input[type="submit"],
.wpcf7-submit{
    background: var(--key);
    color: #fff;
    border: none;
    padding: 14px 40px;
    cursor: pointer;
    letter-spacing: 0.1em;
}
/* CF7 標準CSSオフ時の送信結果・エラー表示 */
.wpcf7 form .wpcf7-response-output{
    display: none;
    margin: 1.5rem 0 0;
    padding: 14px 18px;
    border: 2px solid var(--line-light);
    font-size: 14px;
    line-height: 1.7;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{
    display: block;
    border-color: #c9a227;
    background: #fffbea;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
    display: block;
    border-color: var(--error);
    background: #fff5f5;
}
.wpcf7 form.sent .wpcf7-response-output{
    display: block;
    border-color: var(--key-deep);
    background: var(--green-soft);
}
.wpcf7-not-valid-tip{
    display: block;
    margin-top: 6px;
    color: var(--error);
    font-size: 13px;
    line-height: 1.6;
}
.wpcf7 form .wpcf7-form-control.wpcf7-not-valid{
    border-color: var(--error);
    box-shadow: inset 0 0 0 1px var(--error);
}
.wpcf7-submit:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}
.sk-privacy .wpcf7-list-item label{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.7;
}
/* destyle で appearance が消えるため、枠付きのカスタムチェックを表示 */
.sk-privacy .wpcf7-list-item input[type="checkbox"]{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1px solid #a9a8a1;
    border-radius: 3px;
    background: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.sk-privacy .wpcf7-list-item input[type="checkbox"]::before{
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: transform .12s;
    background: var(--key-deep);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.sk-privacy .wpcf7-list-item input[type="checkbox"]:checked::before{
    transform: scale(1);
}
.sk-privacy .wpcf7-list-item input[type="checkbox"]:focus-visible{
    outline: 2px solid var(--key-deep);
    outline-offset: 2px;
}
.wpcf7-turnstile {
    text-align: center;
    margin: 30px;
}

.page-foot{
    padding: 60px 0;
    text-align: center;
}
.page-foot .line{
    height: 100px;
    width: 2px;
    background: var(--key);
    margin: 0 auto 30px;
}
.page-foot-title{
    font-size: 30px;
    margin-bottom: 30px;
}
.page-foot-text{
    font-size: 18px;
}


@media screen and (max-width:768px){
    .page-header{
        flex-direction: column;
        padding: 16px 0 0;
    }
    .page-header-img{
        order: -1;
        flex: none;
        width: 100%;
        height: 38vh;
    }
    .page-header-text{
        min-height: 0;
        padding: 20px 20px 8px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
    }
    .page-header-en,
    .page-header-text .header-text{
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        max-height: none;
        transform: none;
    }
    .page-header-en{
        font-size: 13px;
        letter-spacing: 0.28em;
    }
    .page-header-text .header-text{
        font-size: 28px;
        letter-spacing: 0.12em;
        line-height: 1.5;
    }
    .page-header--text-only{
        padding: 24px 0 20px;
    }
    .page-header--text-only .page-header-text{
        width: 90%;
        padding: 0;
    }
    .page-header--text-only .page-header-text .header-text{
        font-size: 24px;
    }
    .privacy-page .page-body{
        padding: 32px 0 48px;
    }
    .page-body{
        padding: 36px 0 48px;
    }
}

.breadcrumb{
    padding: 12px 0;
    background: var(--beige-soft);
    border-bottom: 1px solid #e6e1d6;
}
body > .breadcrumb{
    margin-top: 62px;
}
.breadcrumb ul{
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    flex-wrap: wrap;
}
.breadcrumb ul li{
    letter-spacing: 2px;
    line-height: 1.5;
}
.breadcrumb ul li:not(:last-of-type)::after{
	content: "＞";
	font-size: 12px;
	margin: 0 15px;
}

@media screen and (max-width:768px){
	.breadcrumb{
		padding: 10px 0;
	}
    body > .breadcrumb{
        margin-top: 52px;
    }
    .breadcrumb ul li{
        font-size: 12px;
    }
    .breadcrumb ul li:not(:last-of-type)::after{
        margin: 0 10px;
    }
}

.back-to-home{
    padding: 10px 0;
    text-align: center;
    background: var(--beige-dark);
}
.back-to-home a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #555;
    font-size: 14px;
    letter-spacing: 0.12em;
    padding: 20px 15%;
}
.back-to-home a::before{
    content: "";
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: rotate(-45deg);
}
@media screen and (min-width:769px){
    .back-to-home a:hover{
        color: var(--key);
    }
}

.page-intro{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 72px 0 64px;
    text-align: center;
}
.page-intro-en,
.section-en{
    margin: 0 0 10px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: .28em;
}
.page-intro-title{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.14em;
    margin-bottom: 32px;
}
.page-intro-text{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 2.2;
    letter-spacing: 0.1em;
}
.page-intro-sign{
    margin-top: 36px;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: #666;
}
.page-intro-more{
    margin-top: 16px;
    text-align: center;
}
.thanks-page .page-intro-more {
    margin-top: 80px;
}

/* ヒーロー下：写真付き導入 */
.page-intro-with-image{
    padding: 120px 0;
    background: var(--beige-soft);
}
.page-intro-with-image-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
}
.page-intro-with-image-title{
    position: relative;
    margin-bottom: 28px;
    padding-bottom: 14px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(24px, 2.25vw, 32px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .04em;
}
.page-intro-with-image-title.is-nowrap{
    white-space: nowrap;
}
.page-intro-with-image-title::after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 1px;
    background: var(--key);
    content: "";
}
.page-intro-with-image-lead{
    margin: 0 0 28px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(18px, 2.1vw, 24px);
    line-height: 2.15;
    letter-spacing: .12em;
}
.page-intro-with-image-text{
    max-width: 560px;
    margin: 0;
}
.page-intro-with-image-media{
    margin: 0;
}
.page-intro-with-image-media img{
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.more-link{
    position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    padding-right: 36px;
    letter-spacing: 0.1em;
    line-height: 1.6;
}
.more-link::before,
.more-link::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    pointer-events: none;
}
.more-link::after{
    width: 18px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}
.more-link::before{
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.more-link-en{
    font-family: "EB Garamond", serif;
}
@media screen and (min-width: 769px){
    a.more-link:hover{
        color: var(--key);
    }
}
@media screen and (max-width:768px){
    .page-intro{
        padding: 48px 0 40px;
    }
    .page-intro-title{
        font-size: 24px;
        margin-bottom: 24px;
    }
    .page-intro-with-image{
        padding: 64px 0;
    }
    .page-intro-with-image-inner{
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .page-intro-with-image-title{
        font-size: 24px;
    }
    .page-intro-with-image-title.is-nowrap{
        font-size: 20px;
    }
    .page-intro-with-image-media{
        order: -1;
    }
}

/**********************************************************************/
/***************************  フロントページ  ***************************/
/**********************************************************************/

.front-page{
    color: #222;
}
.f-job-card-text h3,
.f-works-item h2,
.f-works-item h3,
.f-event-body h3,
.f-topics-blog-text h3,
.f-lineup-card-text h3{
    font-size: 18px;
}
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.f-btn{
    padding: 16px 28px;
    border: 1px solid var(--key);
    letter-spacing: 0.12em;
    background: #fff;
    color: var(--key);
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.f-btn:hover{
    background: var(--key);
    color: #fff;
}
.front-page .f-recruit .f-btn:hover{
    background: var(--key);
    border-color: var(--key);
    color: #fff;
}
.f-btn.f-btn-s{
    padding: 10px 20px;
    background: transparent;
}
.concept-note-link .f-btn-s{
    margin-top: 20px;
}
.f-dash-title{
    font-family: "Shippori Mincho", serif;
    font-size: 26px;
    letter-spacing: 0.16em;
    margin-bottom: 25px;
    color: var(--key);
    display: inline-block;
}
.f-dash-title::after{
    content: "";
    display: block;
    width: 2.2em;
    height: 1px;
    margin-top: 5px;
    background: currentColor;
}
.f-works-intro .f-dash-title::after,
.f-topics-intro .f-dash-title::after{
    margin-inline: auto;
}
.f-tategaki-pair{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-family: "Shippori Mincho", serif;
}
.f-tategaki-main,
.f-tategaki-sub{
    writing-mode: vertical-rl;
    line-height: 1.5;
}
.f-tategaki-main{
    font-size: clamp(40px, 4.4vw, 70px);
    letter-spacing: 0.22em;
}
.f-tategaki-sub{
    font-size: 35px;
    letter-spacing: 0.28em;
    transform: translateY(-40px);
}

.hero-slider{
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    overflow-anchor: none;
    background: #111 url("../img/front/hero-poster.jpg") center / cover no-repeat;
}
.hero-media{
    position: absolute;
    inset: 0;
}
.hero-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.hero-slider::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,0.32);
    pointer-events: none;
}
.hero-catch{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0;
    width: 90%;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-catch h1{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 4.2vw, 48px);
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.7;
}
.hero-catch-en{
    margin-top: 16px;
    font-family: "EB Garamond", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.6;
    opacity: 0.92;
}
.hero-catch h1,
.hero-catch-en{
    opacity: 0;
    transform: translateY(40%);
}
.hero-slider.is-ready .hero-catch h1{
    animation: hero-fadeup 1s ease forwards;
    animation-delay: 0.6s;
}
.hero-slider.is-ready .hero-catch-en{
    animation: hero-fadeup-en 1s ease forwards;
    animation-delay: 1.2s;
}
@keyframes hero-fadeup{
    from{
        opacity: 0;
        transform: translateY(40%);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes hero-fadeup-en{
    from{
        opacity: 0;
        transform: translateY(40%);
    }
    to{
        opacity: 0.92;
        transform: translateY(0);
    }
}.f-news{
    padding: 50px 0;
}
.f-news-flex{
    align-items: flex-start;
}
.f-news-body{
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.f-news-label{
    margin-bottom: 18px;
    font-family: "EB Garamond", serif;
    font-size: 28px;
    font-weight: 500;
    position: relative;
    color: var(--key);
}
.f-news-label::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 32px;
    height: 1px;
    background: var(--key);
}
.f-news-item{
    display: flex;
    align-items: center;
}
.f-news-item time{
    flex-shrink: 0;
    font-family: "EB Garamond", serif;
    letter-spacing: 0.08em;
}
.f-news-slash{
    flex-shrink: 0;
    margin: 0 12px;
    color: #ddd;
}
.f-news-cat{
    flex-shrink: 0;
    font-weight: 500;
    letter-spacing: 0.1em;
    border: 1px solid var(--key);
    border-radius: 999px;
    padding: 3px 12px;
    line-height: 1.4;
    color: var(--key);
}
.f-news-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}
.f-news-empty{
    margin: 0;
    color: #888;
}
.f-news-flex .more-link{
    flex-shrink: 0;
    margin-top: 2px;
}

.f-concept{
    padding: 0 0 48px;
    overflow: hidden;
}
.f-concept-lead{
    width: 77%;
    margin: 0;
}
.f-concept-lead img{
    width: 100%;
    height: 62vh;
    min-height: 380px;
    object-fit: cover;
    display: block;
}
.f-concept-in{
    display: flex;
    align-items: flex-start;
    gap: 8%;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 80px;
}
.f-concept-copy{
    flex: 1 1 0;
    min-width: 280px;
    padding-top: 28px;
    max-width: 480px;
}
.f-concept-right{
    flex: 1.15 1 0;
    min-width: 280px;
}
.f-concept-copy .f-btn{
    margin-top: 24px;
}
.f-concept-heading{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 2;
    letter-spacing: 0.16em;
    margin: 0 0 48px;
}
.f-concept-photo{
    width: calc(100% + max(5vw, (100vw - 1280px) / 2));
    max-width: none;
    margin: 0;
}
.f-concept-photo img{
    width: 100%;
    height: 42vh;
    min-height: 280px;
    object-fit: cover;
    display: block;
}

.f-job{
    position: relative;
    padding: 80px 0 120px;
}
.f-job-intro{
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
}
.f-job-title{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.16em;
    margin: 0;
}
.f-job-board{
    display: flex;
    gap: 48px;
    align-items: flex-start;
}
.f-job-nav{
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    width: 240px;
    padding: 8px 0 0;
    position: sticky;
    top: 65px;
}
.f-job-tab{
    width: 100%;
    padding: 16px 0;
    text-align: left;
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.12em;
    line-height: 1.6;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e8e6e2;
    cursor: pointer;
    color: #222;
}
a.f-job-tab{
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}
.f-job-tab.is-active{
    color: var(--key);
    border-bottom-color: var(--key);
}
.f-job-panels{
    flex: 1;
    min-width: 0;
}
.f-job-panel{
    display: none;
}
.f-job-panel.is-active{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 32px;
    align-items: start;
}
.f-job-card{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0;
    overflow: hidden;
}
.f-job-card-img{
    flex: none;
    width: 100%;
    margin: 0;
}
.f-job-card-img img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.f-job-card-text{
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0 25px 0 0;
}
.f-job-card-text h3{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    line-height: 1.6;
}
.f-job-card-text p{
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #555;
}
.f-job-card-arrow{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.f-job-card-arrow img{
    width: 14px;
    height: 14px;
}

.f-works{
    padding: 0 0 100px;
}
.f-photo-lead{
    display: flex;
    align-items: center;
    margin-bottom: 72px;
}
.f-photo-lead.is-reverse{
    flex-direction: row-reverse;
}
.f-photo-lead-img{
    flex: 0 0 77%;
    margin: 0;
}
.f-photo-lead-img img{
    width: 100%;
    height: 56vh;
    min-height: 360px;
    object-fit: cover;
    display: block;
}
.f-photo-lead .f-tategaki-pair{
    flex: 1;
    min-width: 0;
    padding-left: 24px;
}
.f-photo-lead.is-reverse .f-tategaki-pair{
    justify-content: flex-end;
    padding-left: 12%;
    padding-right: 40px;
}
.f-photo-lead .f-tategaki-main{
    font-size: clamp(36px, 4vw, 52px);
    letter-spacing: 0.28em;
}
.f-works-intro{
    text-align: center;
    margin: 0 auto 64px;
    padding: 0 5%;
}
.f-works-intro p:not(.f-dash-title){
    line-height: 2.1;
}
.f-works-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 28px 24px;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto 56px;
}
.f-works-item{
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
}
.f-works-item-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.f-works-item-cat,
.f-topics-blog-cat{
    display: inline-block;
    background: #e8e6e2;
    padding: 4px 12px;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--key);
    font-size: 14px;
}
.f-works-item-img{
    margin-bottom: 15px;
}
.f-works-item-img img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}
.f-works-item h2,
.f-works-item h3{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.08em;
    margin-top: 10px;
}
.f-works-item-spec{
    margin: 6px 0 0;
    letter-spacing: 0.06em;
    color: #666;
    line-height: 1.6;
}

.lineup-common{
    padding: 88px 0 96px;
    background: var(--beige-dark);
}
.lineup-common-head{
    max-width: 820px;
    margin-bottom: 48px;
}
.lineup-common-head .section-en{
    font-size: 16px;
}
.lineup-common-head h2{
    margin-bottom: 18px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
}
.lineup-common-head > p:last-child{
    margin: 0;
    font-size: 16px;
    line-height: 2;
}
.lineup-process{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lineup-process li{
    background: #fff;
}
.lineup-process figure{
    margin: 0;
}
.lineup-process img{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.lineup-process li > div{
    padding: 28px 32px 36px;
}
.lineup-process-num{
    margin: 0 0 8px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 16px;
    letter-spacing: .18em;
}
.lineup-process h3{
    margin-bottom: 12px;
    font-family: "Shippori Mincho", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .12em;
}
.lineup-process li > div > p:last-child{
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.9;
}
.lineup-list{
    padding: 88px 0 0;
}
.lineup-list-head{
    margin-bottom: 36px;
}
.lineup-list-head .section-en{
    font-size: 16px;
}
.lineup-list-head h2{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
}
.lineup-feature{
    display: grid;
    gap: 0;
    padding: 0 0 40px;
}
.lineup-feature-item{
    display: block;
    color: inherit;
}
.lineup-feature-item:nth-child(even){
    background: var(--beige-soft);
}
.lineup-feature-inner{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    padding: 56px 0;
}
.lineup-feature-item:nth-child(even) .lineup-feature-inner{
    grid-template-columns: 0.85fr 1.15fr;
}
.lineup-feature-item:nth-child(even) .lineup-feature-img{
    order: 2;
}
.lineup-feature-img{
    overflow: hidden;
}
.lineup-feature-img img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform .6s ease;
}
.lineup-feature-meta{
    display: flex;
    gap: 16px;
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    color: #777;
}
.lineup-feature-text h3{
    font-family: "Shippori Mincho", serif;
    font-size: 28px;
    margin-bottom: 16px;
}
.lineup-feature-text p{
    font-size: 16px;
    line-height: 2;
    margin-bottom: 24px;
}
.lineup-feature-price{
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
}
.lineup-feature-price span{
    display: grid;
    grid-template-columns: 15em minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.lineup-feature-price em{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #d8d3c8;
    color: #333;
    font-style: normal;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}
.lineup-feature-item:nth-child(odd) .lineup-feature-price em{
    background: var(--beige-soft);
}
.lineup-feature-price strong{
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .04em;
}
.lineup-feature-item:hover .lineup-feature-img img{
    transform: scale(1.06);
}
.lineup-feature-item:hover .more-link{
    color: var(--key);
}
.lineup-feature-item .more-link::before,
.lineup-feature-item .more-link::after{
    transition: transform .35s ease;
}
.lineup-feature-item:hover .more-link::after{
    transform: translate(8px, -50%);
}
.lineup-feature-item:hover .more-link::before{
    transform: translate(8px, -50%) rotate(45deg);
}
.f-event{
    --f-event-inset: 6%;
    padding: 0 0 80px;
    background: #f3f1ec;
}
.f-event-head{
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 48px;
    padding: 0 var(--f-event-inset) 48px;
}
.f-event-head-main{
    flex: 1;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.f-tategaki-over{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: -150px;
    margin-left: 1%;
}
.f-tategaki-over .f-tategaki-main{
    font-size: clamp(30px, 4.4vw, 70px);
    letter-spacing: 0.2em;
}
.f-event .f-tategaki-over .f-tategaki-main {
    font-size: clamp(25px, 2.8vw, 30px);
    transform: translateY(20px);
}
.f-event .f-tategaki-sub {
    font-size: 43px;
    transform: translateY(-50px);
}
.f-event-intro{
    position: relative;
    z-index: 1;
    flex: 1;
    padding-bottom: 8px;
    padding-top: 20px;
}
.f-event-intro p:not(.f-dash-title){
    line-height: 2;
}
.f-event-head .f-btn{
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 8px;
}
.f-event-slider{
    position: relative;
    margin-left: var(--f-event-inset);
    margin-right: var(--f-event-inset);
    overflow: visible;
    z-index: 1;
}
.f-event-swiper.swiper{
    width: 100%;
    overflow: visible;
}
.f-event-slider .swiper-button-prev.f-event-prev,
.f-event-slider .swiper-button-next.f-event-next{
    width: 48px;
    height: 48px;
    margin: 0;
    top: calc(50% - 28px);
    border: 1px solid #1c1a17;
    border-radius: 50%;
    background: #1c1a17;
    box-shadow: 0 4px 16px rgba(28, 26, 23, 0.12);
    color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    z-index: 3;
}
.f-event-slider .swiper-button-prev.f-event-prev{
    left: 0;
    right: auto;
    transform: translate(-50%, -50%);
}
.f-event-slider .swiper-button-next.f-event-next{
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
}
.f-event-slider .swiper-button-prev.f-event-prev::after,
.f-event-slider .swiper-button-next.f-event-next::after{
    font-size: 14px;
    font-weight: 700;
}
@media (hover: hover){
    .f-event-slider .swiper-button-prev.f-event-prev:hover,
    .f-event-slider .swiper-button-next.f-event-next:hover{
        background: #fff;
        border-color: #1c1a17;
        color: #1c1a17;
        box-shadow: 0 6px 20px rgba(28, 26, 23, 0.14);
    }
}
.f-event-slider .swiper-button-prev.f-event-prev.swiper-button-disabled,
.f-event-slider .swiper-button-next.f-event-next.swiper-button-disabled{
    opacity: 0.35;
}
.f-event-slider .swiper-button-prev.f-event-prev:focus-visible,
.f-event-slider .swiper-button-next.f-event-next:focus-visible{
    outline: 2px solid #1c1a17;
    outline-offset: 2px;
}
.f-event-swiper .swiper-wrapper{
    padding-bottom: 4px;
}
.f-event-pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 28px;
    padding: 0 0 16px;
    line-height: 0;
}
.f-event-pagination-bullet{
    width: 8px;
    height: 8px;
    margin: 0 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-text, #333);
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.f-event-pagination-bullet.is-active{
    opacity: 1;
    transform: scale(1.15);
}
.f-event-swiper .swiper-slide{
    height: auto;
    display: flex;
}
.f-event-item a{
    display: block;
    color: inherit;
    text-decoration: none;
}
.f-event-swiper .f-event-item a{
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    background: #fff;
}
.f-event-swiper .f-event-body{
    flex: 1;
    padding: 0 20px 20px;
}
.f-event-img{
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
}
.f-event-img img{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.f-event-status{
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.08em;
    background: #fff;
    color: #222;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.f-event-status.is-open{
    background: var(--key);
    color: #fff;
}
.f-event-status.is-closed{
    background: #6d6d6d;
    color: #fff;
}
.f-event-body h3{
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.65;
    margin: 0 0 14px;
}
.f-event-meta{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: #444;
}
.f-event-meta img{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 4px;
}
.f-event-meta-label{
    flex-shrink: 0;
    width: 2.5em;
    letter-spacing: 0.12em;
}
.f-event-meta-value{
    flex: 1;
    min-width: 0;
}
.f-event-empty{
    margin: 0 var(--f-event-inset);
    padding: 8px 4% 24px 0;
    position: relative;
    z-index: 1;
    color: #888;
}

.f-lineup{
    --lineup-view: 1.75;
    --lineup-gap: 72px;
    --lineup-card-h: 420px;
    position: relative;
    padding: 0 0 80px;
    overflow: hidden;
    color: #222;
}
.f-lineup-hero{
    position: relative;
    padding: 100px 0 150px;
    color: #fff;
    background: #1c1a17 url("../img/front/f-lineup-top.webp") center / cover no-repeat;
}
.f-lineup-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(28, 26, 23, 0.55);
}
.f-lineup-head{
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 5%;
}
.f-lineup-label{
    font-family: "EB Garamond", serif;
    letter-spacing: 0.28em;
    margin-bottom: 16px;
}
.f-lineup-head h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: 0.16em;
    line-height: 1.6;
    margin: 0 0 24px;
}
.f-lineup-desc{
    line-height: 2.1;
    letter-spacing: 0.06em;
}
.f-lineup-slider{
    position: relative;
    z-index: 2;
    margin-top: -72px;
}
.f-lineup-swiper{
    overflow: hidden;
}
.f-lineup-slide{
    height: var(--lineup-card-h);
}
.f-lineup-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: var(--lineup-card-h);
    background: var(--beige-dark);
    color: #222;
    text-decoration: none;
}
.f-lineup-card-text{
    min-width: 0;
    height: var(--lineup-card-h);
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.f-lineup-card-text h3{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.08em;
    line-height: 1.45;
    margin: 0 0 8px;
}
.f-lineup-card-label{
    display: block;
    font-family: "EB Garamond", serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
    color: #777;
}
.f-lineup-card-sub{
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: #777;
}
.f-lineup-card-catch{
    margin: 0 0 16px;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.06em;
    color: #333;
}
.f-lineup-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}
.f-lineup-chips li{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #c5cfc6;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #333;
}
.f-lineup-chips b{
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #3f6f47;
}
.f-lineup-card-price{
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(34, 34, 34, 0.15);
    line-height: 1.4;
}
.f-lineup-card-price span{
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #777;
}
.f-lineup-card-price strong{
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #3f6f47;
}
.f-lineup-card-text .more-link{
    margin-top: auto;
    align-self: flex-end;
}
.f-lineup-card-img{
    width: 100%;
    height: var(--lineup-card-h);
    margin: 0;
    overflow: hidden;
}
.f-lineup-card-text h3 span:last-child{
    display: block;
}
.f-lineup-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.f-lineup-slider .swiper-button-prev.f-lineup-prev,
.f-lineup-slider .swiper-button-next.f-lineup-next{
    width: 44px;
    height: 44px;
    margin-top: 0;
    top: 50%;
    background: transparent;
    color: #222;
    z-index: 3;
}
.f-lineup-slider .swiper-button-prev.f-lineup-prev{
    left: calc((100% - 100% / var(--lineup-view)) / 2 - var(--lineup-gap) / (2 * var(--lineup-view)));
    right: auto;
    transform: translate(-50%, -50%);
}
.f-lineup-slider .swiper-button-next.f-lineup-next{
    right: calc((100% - 100% / var(--lineup-view)) / 2 - var(--lineup-gap) / (2 * var(--lineup-view)));
    left: auto;
    transform: translate(50%, -50%);
}
.f-lineup-slider .swiper-button-prev.f-lineup-prev::after,
.f-lineup-slider .swiper-button-next.f-lineup-next::after{
    font-size: 16px;
    font-weight: 700;
}
.f-lineup-foot{
    text-align: center;
    margin-top: 60px;
}
.f-recruit{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}
.f-recruit-img{
    position: absolute;
    inset: 0;
}
.f-recruit-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.f-recruit-img::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.38);
}
.f-recruit-copy{
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}
.f-recruit-en{
    font-family: "EB Garamond", serif;
    font-size: 20px;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
}
.f-recruit-copy h2{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.6;
    margin-bottom: 24px;
}
.f-recruit-copy p{
    line-height: 2.1;
    margin-bottom: 28px;
}
.front-page .f-recruit .f-btn{
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.f-topics{
    padding: 0 0 100px;
    background: #f3f1ec;
}
.f-topics-in{
    text-align: center;
}
.f-topics-intro{
    max-width: 560px;
    margin: 0 auto 56px;
}
.f-topics-intro p:not(.f-dash-title){
    line-height: 2.1;
}
.f-topics-blog-items{
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    text-align: left;
    margin-bottom: 40px;
}
.f-topics-blog-items > *{
    flex: 0 0 calc((100% - 64px) / 3);
    width: calc((100% - 64px) / 3);
}
.f-topics-blog-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.f-topics-blog-img{
    overflow: hidden;
    margin-bottom: 14px;
}
.f-topics-blog-img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.f-topics-blog-text time{
    display: block;
    letter-spacing: 0.08em;
    color: #777;
    margin-bottom: 8px;
}
.f-topics-blog-text h3{
    line-height: 1.7;
    letter-spacing: 0.06em;
}
.f-topics-empty{
    color: #888;
    padding: 20px 0;
    flex: 0 0 100%;
    width: 100%;
}

.f-sns{
    padding: 80px 0 120px;
    background: #f9f8f4;
    text-align: center;
}
.f-sns-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    text-align: left;
}
.f-sns-item{
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
    min-height: 320px;
    overflow: hidden;
    color: #fff;
}
.f-sns-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.f-sns-item::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.12));
}
.f-sns-item-text{
    position: relative;
    z-index: 1;
    padding: 36px 28px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.f-sns-name{
    font-family: "EB Garamond", serif;
    font-size: 22px;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}
.f-sns-item-text p:not(.f-sns-name){
    line-height: 1.8;
    margin-bottom: 0;
}
.f-sns-linecard-banner{
    max-width: 800px;
    margin: 50px auto 0;
}
.f-sns-linecard-banner img{
    width: 100%;
    height: auto;
    display: block;
}
.reform-linecard-banner{
    margin-top: 28px;
    margin-bottom: 36px;
}

.f-cta{
    position: relative;
    overflow: hidden;
    padding: 100px 0 88px;
    text-align: center;
    color: #fff;
}
.f-cta-bg{
    position: absolute;
    inset: 0;
    display: flex;
}
.f-cta-bg img{
    width: 50%;
    height: 100%;
    object-fit: cover;
}
.f-cta-bg::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(28, 24, 20, 0.58);
}
.f-cta-in{
    position: relative;
    z-index: 1;
}
.f-cta-label{
    font-size: 16px;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
}
.f-cta-tel{
    display: inline-block;
    color: #fff;
    font-family: "EB Garamond", serif;
    font-size: clamp(42px, 6vw, 64px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 16px;
}
.f-cta-hours{
    font-size: 16px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.88);
    margin-bottom: 40px;
}
.f-cta-btns{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 56px;
}
.f-cta-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: 18px 28px;
    background: #fff;
    color: #2a2723;
    letter-spacing: 0.12em;
    font-size: 16px;
    border: 1px solid #fff;
}
.f-cta-btn:hover{
    background: #f3f1ec;
}
.f-cta-company{
    padding-top: 8px;
}
.f-cta-logo{
    display: inline-block;
    margin-bottom: 12px;
}
.f-cta-logo img{
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
}
.f-cta-company-name{
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
}
.f-cta-company-addr{
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.88);
}


@media screen and (max-width: 1100px){
    .f-lineup{
        --lineup-view: 1.55;
        --lineup-gap: 48px;
    }
    .f-lineup-card-text{
        padding: 28px 22px 24px;
    }
    .f-lineup-card-catch{
        margin-bottom: 12px;
    }
    .f-tategaki-main{
        font-size: 32px;
    }
    .f-job-nav{
        flex-basis: 200px;
        width: 200px;
    }
    .lineup-process{
        gap: 20px;
    }
    .lineup-feature-inner,
    .lineup-feature-item:nth-child(even) .lineup-feature-inner{
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0;
    }
    .lineup-feature-item:nth-child(even) .lineup-feature-img{
        order: 0;
    }
    .f-event-head{
        padding-bottom: 40px;
    }
    .f-event-head-main{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .f-event-head .f-btn{
        margin-top: 16px;
    }
    .f-sns-item{
        flex-basis: calc((100% - 20px) / 2);
        width: calc((100% - 20px) / 2);
    }
}
@media screen and (max-width: 768px){
    .f-btn {
        font-size: 14px;
        padding: 14px 28px;
    }
    .hero-catch h1{
        font-size: 24px;
        letter-spacing: 0.12em;
    }
    .f-tategaki-pair{
        flex-direction: column-reverse;
        gap: 4px;
    }
    .f-tategaki-main,
    .f-tategaki-sub{
        writing-mode: horizontal-tb;
        padding-top: 0;
    }
    .f-photo-lead .f-tategaki-main{
        font-size: 26px;
        letter-spacing: 0.12em;
    }
    .f-tategaki-sub{
        font-size: 15px;
        transform: translateY(0px);
    }
    .f-event .f-tategaki-over .f-tategaki-main{
        letter-spacing: 0.12em;
        transform: none;
    }
    .f-event .f-tategaki-sub{
        font-size: 18px;
        transform: translateY(0px);
    }
    .f-event-spbtn{
        margin-top: 30px;
    }
    .f-concept{
        padding: 0 0 28px;
    }
    .f-concept-lead{
        width: 100%;
    }
    .f-concept-lead img{
        height: 42vh;
        min-height: 240px;
    }
    .f-concept-in{
        display: block;
        width: 90%;
        padding-top: 40px;
    }
    .f-concept-in .text-r{
        text-align: center;
    }
    .f-concept-copy{
        max-width: none;
        padding-top: 0;
        margin-bottom: 40px;
    }
    .f-concept-heading{
        font-size: 22px;
        margin-bottom: 28px;
    }
    .f-concept-photo{
        width: calc(100% + 5vw);
        margin-right: -5vw;
    }
    .f-dash-title {
        font-size: 22px;
    }
    .f-photo-lead{
        display: block;
        margin-bottom: 40px;
    }
    .f-photo-lead-img img{
        height: 42vh;
        min-height: 240px;
    }
    .f-photo-lead .f-tategaki-pair,
    .f-photo-lead.is-reverse .f-tategaki-pair{
        padding: 20px 5% 0;
        justify-content: flex-start;
        align-items: center;
    }
    .f-works .f-photo-lead,
    .f-topics .f-photo-lead{
        margin-bottom: 20px;
    }
    .f-works-intro {
        margin: 0 auto 30px;
    }
    .f-works-intro p,.f-topics-intro p{
        text-align: left;
    }
    .f-works-grid{
        gap: 32px;
    }
    .f-works-grid .f-works-item{
        flex-basis: 100%;
        width: 100%;
    }
    .f-works-item-img img{
        height: 220px;
    }
    .f-works-item h3 {
        margin-top: 5px;
        font-size: 16px;
    }
    .f-concept-photo img,
    .lineup-feature-img img{
        height: 220px;
        min-height: 0;
        margin-bottom: 16px;
    }
    .lineup-common{
        padding: 64px 0 72px;
    }
    .lineup-process{
        grid-template-columns: 1fr;
    }
    .lineup-process li > div{
        padding: 22px 22px 28px;
    }
    .lineup-feature-price span{
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .f-job{
        padding: 56px 0 80px;
    }
    .f-job-intro {
        margin: 0 auto 30px;
    }
    .f-job-board{
        flex-direction: column;
        gap: 32px;
    }
    .f-job-nav{
        flex-basis: auto;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
        gap: 0;
        border: 1px solid #e8e6e2;
        background: #fff;
        position: static;
        top: auto;
    }
    .f-job-tab{
        width: 100%;
        padding: 12px 14px;
        text-align: left;
        line-height: 1.55;
        border: 0;
        border-bottom: 1px solid #e8e6e2;
        border-left: 3px solid transparent;
        box-sizing: border-box;
        font-size: 14px;
    }
    .f-job-nav .f-job-tab:last-child{
        border-bottom: 0;
    }
    .f-job-tab.is-active{
        color: var(--key);
        background: var(--beige-soft);
        border-left-color: var(--key);
        border-bottom-color: #e8e6e2;
        font-weight: 500;
    }
    .f-job-panels{
        padding: 0;
        min-height: 0;
    }
    .f-job-panel.is-active{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .f-job-card{
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-bottom: 0;
    }
    .f-job-card-img{
        flex-basis: auto;
        width: 100%;
    }
    .f-job-card-img img{
        height: 200px;
    }
    .f-job-card-text{
        padding: 0 32px 0 0;
    }
    .f-sns-item,
    .f-topics-blog-items > *{
        flex-basis: 100%;
        width: 100%;
    }
    .f-event{
        --f-event-inset: 5%;
    }
    .f-event-head{
        display: block;
        padding: 0 var(--f-event-inset) 32px;
    }
    .f-tategaki-over{
        margin: 0 0 20px;
        padding-top: 50px;
    }
    .f-event-head .f-btn{
        display: block;
        margin: 20px 0 0;
    }
    .f-event-slider{
        margin-left: var(--f-event-inset);
        margin-right: var(--f-event-inset);
        padding-right: 0;
    }
    .f-event-slider .swiper-button-prev.f-event-prev,
    .f-event-slider .swiper-button-next.f-event-next{
        width: 40px;
        height: 40px;
    }
    .f-event-slider .swiper-button-prev.f-event-prev::after,
    .f-event-slider .swiper-button-next.f-event-next::after{
        font-size: 12px;
    }
    .f-event-pagination{
        margin-top: 24px;
        padding-bottom: 12px;
    }
    .f-event-empty{
        margin: 0 var(--f-event-inset);
        padding: 8px 0 24px;
    }
    .f-lineup{
        --lineup-view: 1.22;
        --lineup-gap: 28px;
        --lineup-card-h: 560px;
        padding: 0 0 56px;
    }
    .f-lineup-hero{
        padding: 64px 0 88px;
    }
    .f-lineup-head h2{
        font-size: 24px;
        letter-spacing: 0.1em;
    }
    .f-lineup-slider{
        margin-top: -48px;
    }
    .f-lineup-card{
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
    }
    .f-lineup-card-img{
        order: -1;
        height: 200px;
    }
    .f-lineup-card-text{
        height: auto;
        padding: 20px 20px 24px;
    }
    .f-lineup-card-catch{
        margin-bottom: 12px;
        font-size: 15px;
    }
    .f-lineup-card-price strong{
        font-size: 20px;
    }
    .f-lineup-slider .swiper-button-prev.f-lineup-prev,
    .f-lineup-slider .swiper-button-next.f-lineup-next{
        width: 32px;
        height: 32px;
    }
    .f-lineup-slider .swiper-button-prev.f-lineup-prev{
        left: calc((100% - 100% / var(--lineup-view)) / 2 - var(--lineup-gap) / (2 * var(--lineup-view)));
        right: auto;
        transform: translate(-50%, -50%);
    }
    .f-lineup-slider .swiper-button-next.f-lineup-next{
        right: calc((100% - 100% / var(--lineup-view)) / 2 - var(--lineup-gap) / (2 * var(--lineup-view)));
        left: auto;
        transform: translate(50%, -50%);
    }
    .f-lineup-foot{
        margin-top: 28px;
    }
    .f-news{
        padding: 28px 0;
    }
    .f-news-in{
        flex-wrap: wrap;
        gap: 16px 20px;
        position: relative;
        padding-right: 56px;
    }
    .f-news-label{
        width: 100%;
    }
    .f-news-body{
        flex: 1 1 100%;
    }
    .f-news-item{
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .f-news-slash{
        margin: 0 8px;
    }
    .f-news-title{
        flex-basis: 100%;
        white-space: normal;
        margin-top: 4px;
    }
    .f-news-in .more-link{
        position: absolute;
        top: 0;
        right: 0;
    }
    .f-topics-blog-text h3 {
        font-size: 16px;
    }
    .f-recruit-copy h2{
        font-size: 24px;
    }
    .f-sns{
        padding: 30px 0;
    }
    .f-topics-intro {
        margin: 0px auto 30px;
    }
    .f-cta{
        padding: 72px 0 64px;
    }
    .f-cta-btns{
        gap: 12px;
        margin-bottom: 40px;
    }
    .f-cta-btn{
        min-width: 0;
        width: 100%;
    }
}
@media screen and (max-width: 468px){
    .f-recruit{
        min-height: 0;
        max-height: 400px;
    }
    .f-recruit-copy{
        padding: 40px 0;
    }
    .f-recruit-en{
        margin-bottom: 10px;
        font-size: 18px;
    }
    .f-recruit-copy h2{
        margin-bottom: 14px;
        font-size: 22px;
    }
    .f-recruit-copy p{
        margin-bottom: 18px;
        line-height: 1.85;
    }
}
@media (prefers-reduced-motion: reduce){
    .hero-catch h1,
    .hero-catch-en{
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero-catch-en{
        opacity: 0.92;
    }
    .hero-video{
        display: none;
    }
    body.home .header-fix,
    body.home .hamburger-area,
    body.has-hero .header-fix,
    body.has-hero .hamburger-area,
    .hero-logo{
        transition: none;
    }
    .lineup-feature-img img,
    .lineup-feature-item .more-link::before,
    .lineup-feature-item .more-link::after{
        transition: none;
    }
}

/**********************************************************************/
/***************************  コンセプトページ  ***************************/
/**********************************************************************/

.concept-page{
    color: #222;
    overflow: hidden;
    background: #f9f8f4;
}
.concept-en{
    font-family: "EB Garamond", serif;
    letter-spacing: 0.28em;
    font-size: 15px;
    margin-bottom: 10px;
}
.concept-chapter-head h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
}
.concept-hub{
    padding: 0 0 40px;
}
.concept-catch{
    font-family: "Shippori Mincho", serif;
    text-align: center;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.14em;
    margin-bottom: 40px;
}
.concept-prose{
    max-width: 1000px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.concept-lead-block{
    width: 90%;
    max-width: 760px;
    margin: 0 auto 56px;
    padding: 0;
    text-align: center;
}
.concept-lead-block::after{
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin: 32px auto 0;
    background: var(--key);
}
.concept-lead{
    font-family: "Shippori Mincho", serif;
    text-align: center;
    font-size: clamp(18px, 2.1vw, 24px);
    line-height: 2.15;
    letter-spacing: 0.12em;
    margin: 0;
}
.concept-sign{
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: #666;
    margin-bottom: 72px;
}
.concept-prose p{
    margin-bottom: 1.6em;
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: #4a4a4a;
    font-size: 15px;
}
.concept-prose p:last-child{
    margin-bottom: 0;
}
.concept-prose p.concept-prose-first{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(16px, 1.5vw, 18px);
    color: #222;
    letter-spacing: 0.08em;
    line-height: 2.2;
}
.concept-index{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    padding-bottom: 80px;
}
.concept-index-item{
    display: block;
    color: inherit;
}
.concept-index-item figure{
    margin-bottom: 18px;
    overflow: hidden;
}
.concept-index-item img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
@media screen and (min-width: 769px){
    .concept-index-item:hover img,
    .concept-works-item:hover img,
    .concept-points li:hover img{
        transform: scale(1.04);
    }
    .concept-index-item:hover .concept-index-title{
        color: var(--key);
    }
}
.concept-index-en{
    font-family: "EB Garamond", serif;
    letter-spacing: 0.2em;
    font-size: 14px;
    color: var(--key);
    margin-bottom: 6px;
}
.concept-index-title{
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
}
.concept-index-item p:last-child{
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: #555;
}
.concept-chapter{
    padding-bottom: 40px;
    scroll-margin-top: 80px;
}
.concept-chapter-hero{
    position: relative;
    min-height: min(62vh, 680px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    margin-bottom: 64px;
}
.concept-chapter-hero figure{
    position: absolute;
    inset: 0;
    margin: 0;
}
.concept-chapter-hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.concept-chapter-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,18,16,0.7) 0%, rgba(20,18,16,0.12) 55%, transparent 100%);
}
.concept-chapter-head{
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 56px;
}
.concept-chapter-head h2{
    font-size: clamp(28px, 3.6vw, 46px);
}
.concept-chapter-in{
    padding-bottom: 40px;
}
.concept-points{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 72px auto 48px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.concept-points li{
    background: #fff;
    overflow: hidden;
}
.concept-points figure{
    margin: 0;
    overflow: hidden;
}
.concept-points img{
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.concept-points-body{
    padding: 22px 22px 28px;
}
.concept-points-num{
    font-family: "EB Garamond", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--key);
    margin-bottom: 8px;
    line-height: 1;
}
.concept-points h3{
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    line-height: 1.6;
}
.concept-points p{
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #555;
}
.concept-points .more-link{
    margin-top: 30px;
    font-size: 14px;
}
.concept-note{
    width: 90%;
    max-width: 760px;
    margin: 0 auto 64px;
    padding: 28px 32px 32px;
    background: #efece4;
    text-align: center;
}
.concept-note p{
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: #555;
}
.concept-note-link{
    margin-top: 0;
}
.concept-works{
    padding: 8px 0 72px;
}
.concept-works-label{
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.2em;
    font-size: 24px;
    text-align: center;
    margin: 0 0 20px;
}
.concept-works-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
.concept-works-item{
    display: block;
    color: #fff;
}
.concept-works-item figure{
    position: relative;
    margin: 0;
    overflow: hidden;
}
.concept-works-item img{
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.concept-works-item figcaption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 20px 18px;
    background: linear-gradient(to top, rgba(20,18,16,0.72) 0%, transparent 100%);
}
.concept-works-cat{
    display: block;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.82);
    margin-bottom: 4px;
}
.concept-works-name{
    display: block;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    letter-spacing: 0.08em;
}
.oyakata-page{
    color: #222;
    overflow: hidden;
}
.oyakata-page .media-split--training-photo{
    grid-template-columns: minmax(0, clamp(180px, 26vw, 300px)) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 5vw, 64px);
}
.oyakata-page .media-split--training-photo .media-split-media{
    padding: 0;
    background: none;
}
.oyakata-page .media-split--training-photo .media-split-media img{
    width: 100%;
    max-width: 324px;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}
.leader-hero{
    padding: clamp(70px, 9vw, 130px) 0;
    background: #f1f3ed;
}
.leader-hero-inner{
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}
.leader-hero-visual{
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.leader-hero-main,
.leader-hero-portrait{
    display: block;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(35, 40, 34, .16);
}
.leader-hero-main{
    width: 58%;
    aspect-ratio: 257 / 362;
    margin-bottom: 46px;
}
.leader-hero-portrait{
    position: relative;
    z-index: 1;
    width: 48%;
    aspect-ratio: 210 / 320;
    margin-left: -34px;
    border: 9px solid #fff;
}
.leader-hero-copy h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(30px, 4vw, 49px);
    line-height: 1.55;
    letter-spacing: .1em;
    margin-bottom: 32px;
}
.leader-hero-role{
    margin-bottom: 5px;
    color: #686d66;
    font-size: 13px;
    letter-spacing: .08em;
}
.leader-hero-name{
    margin-bottom: 28px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: .16em;
}
.leader-hero-lead{
    margin-bottom: 20px;
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.9;
    letter-spacing: .07em;
}
.leader-hero-copy > p:last-child{
    margin-bottom: 0;
    color: #555;
    font-size: 14px;
    line-height: 2;
}
.leader-quote{
    padding: clamp(58px, 7vw, 90px) 0;
    background: #385b40;
    color: #fff;
    text-align: center;
}
.leader-quote p{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(21px, 3.2vw, 34px);
    line-height: 1.9;
    letter-spacing: .12em;
}
.story-quote{
    position: relative;
    margin-right: 0;
    margin-left: 0;
    padding: clamp(35px, 5vw, 58px);
    background: #f2f4ef;
    border-left: 4px solid var(--key);
    text-align: center;
}
.story-quote p{
    margin: 0;
    color: #34523a;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(19px, 2.7vw, 28px);
    line-height: 1.9;
    letter-spacing: .08em;
}
.story-quote cite{
    display: block;
    margin-top: 18px;
    color: #777;
    font-size: 12px;
    font-style: normal;
    letter-spacing: .08em;
}
.leader-profile-data{
    margin-top: 0;
}
@media screen and (min-width: 769px){
    .oyakata-page .f-btn:hover{
        background: var(--key);
        color: #fff;
    }
}
@media screen and (max-width: 900px){
    .leader-hero-inner{
        grid-template-columns: 1fr;
    }
    .leader-hero-visual{
        width: min(520px, 86%);
        margin: 0 auto;
    }
    .leader-hero-copy{
        max-width: 680px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 768px){
    .leader-hero{
        padding: 60px 0 70px;
    }
    .leader-hero-inner{
        gap: 42px;
    }
    .leader-hero-visual{
        width: 92%;
    }
    .leader-hero-main{
        margin-bottom: 34px;
    }
    .leader-hero-portrait{
        margin-left: -24px;
        border-width: 6px;
    }
    .leader-hero-copy h2{
        margin-bottom: 24px;
    }
    .leader-quote p br{
        display: none;
    }
}
.concept-close{
    padding: 80px 0 100px;
    text-align: center;
}
.concept-close-btns{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

@media screen and (max-width: 1100px){
    .concept-index-item img{
        height: 220px;
    }
    .concept-works-item img{
        height: 280px;
    }
}

@media screen and (max-width: 768px){
    .concept-hub{
        padding: 0 0 20px;
    }
    .concept-index{
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 48px;
    }
    .concept-index-item img{
        height: 200px;
    }
    .concept-chapter-hero{
        min-height: 52vh;
        margin-bottom: 40px;
    }
    .concept-chapter-head{
        margin-bottom: 36px;
    }
    .concept-lead-block{
        margin-bottom: 40px;
    }
    .concept-points{
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px auto 32px;
    }
    .concept-points img{
        height: 200px;
    }
    .concept-note{
        padding: 24px 20px 28px;
        margin-bottom: 48px;
    }
    .concept-works-list{
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .concept-works-item img{
        height: 240px;
    }
    .concept-close{
        padding: 48px 0 64px;
    }
    .concept-close-btns .f-btn{
        width: 100%;
    }
}

/**********************************************************************/
/***************************  間取り講座  ***************************/
/**********************************************************************/

.madori-lessons{
    padding: 0 0 80px;
}
.madori-lesson{
    padding-bottom: 48px;
}
.madori-lesson h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 28px);
    letter-spacing: 0.12em;
    text-align: center;
    margin-bottom: 20px;
}
.madori-works-link{
    padding-bottom: 40px;
}

/**********************************************************************/
/***************************  会社案内  ***************************/
/**********************************************************************/

.company-page{
    color: #222;
    overflow: hidden;
    background: #f9f8f4;
}
.company-page h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.14em;
    font-size: clamp(24px, 3vw, 36px);
    text-align: center;
    margin-bottom: 24px;
}
.company-page .concept-en{
    text-align: center;
}
.company-message{
    background: #fff;
    padding: 80px 0;
}
.company-message-head{
    text-align: center;
    margin-bottom: 48px;
}
.company-message-head .concept-en{
    color: var(--key);
}
.company-message-in{
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 48px 56px;
    align-items: start;
}
.company-message-fig{
    margin: 0;
    overflow: hidden;
}
.company-message-fig img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}
.company-message-body .concept-lead{
    text-align: left;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 2;
    margin-bottom: 28px;
    color: var(--key);
}
.company-message-body p.company-message-quote{
    font-family: "Shippori Mincho", serif;
    color: var(--key);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.95;
    letter-spacing: 0.14em;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--key);
    margin: 8px 0 28px;
}
.company-message,
.company-profile,
.company-history,
.company-place{
    scroll-margin-top: 80px;
}
.company-message-body p{
    margin-bottom: 1.6em;
    line-height: 2.1;
    letter-spacing: 0.05em;
    color: #4a4a4a;
    font-size: 15px;
}
.company-message-body p:last-child{
    margin-bottom: 0;
}
.company-message-sign{
    text-align: center;
    margin: 16px 0 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #666;
    white-space: nowrap;
}
.company-message-name{
    font-family: "TA Oonishi", "Shippori Mincho", serif;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: 0.08em;
    color: #222;
    font-weight: 400;
}
.company-message-more{
    text-align: center;
    margin-top: 48px;
}
.company-profile{
    padding: 80px 0;
}
.company-history{
    padding: 0 0 80px;
}
.company-spec,
.company-timeline{
    margin: 8px auto 0;
    background: #fff;
}
.company-spec-row{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px 32px;
    padding: 30px 40px;
    border-bottom: 1px solid #ece8de;
    align-items: flex-start;
}
.company-spec dt{
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.12em;
    font-size: 15px;
    line-height: 1.8;
    background: var(--key);
    text-align: center;
    color: #fff;
}
.company-spec dd{
    margin: 0;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}
.company-licenses{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.company-licenses li{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border-bottom: 1px solid #f1eee6;
    font-size: 14px;
}
.company-spec-note{
    margin: 12px 0 0;
    font-size: 13px;
    color: #888;
}
.company-timeline{
    padding: 0;
    list-style: none;
}
.company-timeline li{
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px 28px;
    padding: 22px 32px;
    border-bottom: 1px solid #ece8de;
}
.company-timeline li:last-child{
    border-bottom: none;
}
.company-timeline-year{
    font-family: "EB Garamond", serif;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: var(--key);
    margin: 0;
    line-height: 1.6;
}
.company-timeline p{
    margin: 0;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}
.company-history-link{
    margin-top: 28px;
}
.company-place{
    background: #fff;
    padding: 80px 0;
}
.company-place .concept-prose{
    margin-bottom: 48px;
}
.company-place .concept-prose p{
    text-align: center;
}
.company-place-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.company-place-list figure{
    position: relative;
    margin: 0;
    overflow: hidden;
}
.company-place-list li:first-child{
    grid-column: 1 / -1;
}
.company-place-list img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}
.company-place-list li:first-child img{
    height: 420px;
}
.company-place-list figcaption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 20px 18px;
    background: linear-gradient(to top, rgba(20,18,16,0.72) 0%, transparent 100%);
    color: #fff;
}
.company-place-name{
    display: block;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.company-place-list figcaption span:last-child{
    display: block;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.86);
    line-height: 1.7;
}
@media screen and (min-width: 769px){
    .oyakata-page .f-btn:hover,
    .company-page .f-btn:hover{
        background: var(--key);
        color: #fff;
    }
}
@media screen and (max-width: 768px){
    .company-message{
        padding: 56px 0;
    }
    .company-message-in{
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .company-message-fig img{
        aspect-ratio: 3 / 4;
        max-height: 420px;
        margin: 0 auto;
    }
    .company-message-sign{
        font-size: 13px;
        letter-spacing: 0.04em;
    }
    .company-spec-row,
    .company-timeline li{
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 20px;
    }
    .company-licenses{
        grid-template-columns: 1fr;
    }
    .company-place{
        padding: 56px 0;
    }
    .company-place-list{
        grid-template-columns: 1fr;
    }
    .company-place-list img,
    .company-place-list li:first-child img{
        height: 240px;
    }
}

/**********************************************************************/
/***************************  ブログ一覧  ***************************/
/**********************************************************************/

.blog-page{
    color: #222;
    background: #f9f8f4;
}
.blog-main{
    padding: 0 0 80px;
}
.blog-main.has-filters{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px 40px;
    align-items: start;
}
.blog-filters{
    padding-top: 4px;
}
.blog-filter{
    margin-bottom: 32px;
}
.blog-filter-label{
    font-family: "Shippori Mincho", serif;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
    font-size: 15px;
}
.blog-filter ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-filter li{
    margin: 0;
}
.blog-filter a{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #ece8de;
    letter-spacing: 0.06em;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.blog-filter a span{
    color: #888;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.blog-filter a.is-active{
    color: var(--key);
}
.blog-filter a.is-active span{
    color: var(--key);
}
.blog-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
}
.blog-card a{
    display: block;
    color: inherit;
}
.blog-card figure{
    margin: 0 0 14px;
    overflow: hidden;
}
.blog-card img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.blog-card time{
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #777;
    margin-bottom: 8px;
}
.blog-card h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 1.7;
    text-align: left;
    margin: 0;
}
.blog-empty{
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    padding: 40px 0;
}
.blog-page .navigation.pagination,
.event-page .navigation.pagination{
    margin-top: 48px;
    text-align: center;
}
.blog-page .nav-links,
.works-page .nav-links,
.event-page .nav-links,
.a-news-items + .navigation.pagination .nav-links{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.blog-page .page-numbers,
.works-page .page-numbers,
.event-page .page-numbers,
.a-news-items + .navigation.pagination .page-numbers{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d8d4c8;
    background: #fff;
    color: #444;
    font-size: 14px;
    letter-spacing: 0.06em;
}
.blog-page .page-numbers.current,
.works-page .page-numbers.current,
.event-page .page-numbers.current,
.a-news-items + .navigation.pagination .page-numbers.current{
    border-color: var(--key);
    background: var(--key);
    color: #fff;
}
.s-event-page .single-content {
    background: #fff;
    padding: 40px;
    border: 1px solid var(--line-light);
}
@media screen and (min-width: 769px){
    .blog-filter a:hover{
        color: var(--key);
    }
    .blog-page .page-numbers:hover,
    .works-page .page-numbers:hover,
    .event-page .page-numbers:hover,
    .a-news-items + .navigation.pagination .page-numbers:hover{
        border-color: var(--key);
        color: var(--key);
    }
    .blog-page .page-numbers.current:hover,
    .works-page .page-numbers.current:hover,
    .event-page .page-numbers.current:hover,
    .a-news-items + .navigation.pagination .page-numbers.current:hover{
        color: #fff;
    }
}
@media screen and (max-width: 768px){
    .blog-main.has-filters{
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 56px;
    }
    .blog-list{
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .blog-card img{
        height: 200px;
    }
}

/**********************************************************************/
/***************************  施工事例  ***************************/
/**********************************************************************/
.works-page,
.event-page{
    color: #222;
    background: #f9f8f4;
}
.works-page{
    padding-bottom: 80px;
}
.works-archive .f-works-grid{
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 48px;
}
.works-archive .f-works-item:nth-child(3n + 2){
    transition-delay: 0.1s;
}
.works-archive .f-works-item:nth-child(3n + 3){
    transition-delay: 0.2s;
}
.works-page .f-works-item{
    position: relative;
}
.works-page .f-works-item-meta{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding: 8px;
}
.works-filters{
    margin: 0 auto 48px;
}
.works-filters ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.works-filters a{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    letter-spacing: 0.08em;
    font-size: 14px;
    color: #444;
    border-bottom: 1px solid transparent;
}
.works-filters a span{
    color: #888;
    font-size: 12px;
}
.works-filters a.is-active{
    color: var(--key);
    border-bottom-color: var(--key);
}
.works-filters a.is-active span{
    color: var(--key);
}
.works-page .navigation.pagination{
    margin-top: 24px;
    text-align: center;
}
/**********************************************************************/
/***************************  お知らせ一覧  ***************************/
/**********************************************************************/
.news-page{
    color: #222;
    background: #fff;
}
.a-news-main{
    padding-bottom: 80px;
}
.a-news-items{
    border-top: 1px solid #d9d7d1;
}
.a-news-item{
    border-bottom: 1px solid #d9d7d1;
}
.a-news-link{
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px 48px;
    align-items: center;
    padding: 30px 28px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.a-news-meta{
    align-items: center;
    gap: 16px;
}
.a-news-date{
    flex-shrink: 0;
    font-family: "EB Garamond", serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.a-news-cat{
    display: inline-block;
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid var(--key);
    color: var(--key);
    font-size: 12px;
    letter-spacing: 0.08em;
    line-height: 1.4;
}
.a-news-title{
    grid-column: 2;
    grid-row: 1;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.7;
}
.a-news-excerpt{
    grid-column: 2;
    margin: -16px 0 0;
    color: #666;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.8;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.a-news-items + .navigation.pagination{
    margin-top: 48px;
    text-align: center;
}
.item-none{
    padding: 48px 0;
    text-align: center;
    color: #888;
}
@media screen and (min-width: 769px){
    .a-news-link:hover{
        background: var(--beige-soft);
        color: var(--key);
        opacity: 1;
    }
}
@media screen and (max-width: 768px){
    .a-news-main{
        padding-bottom: 56px;
    }
    .a-news-link{
        display: block;
        padding: 22px 4px;
    }
    .a-news-meta{
        gap: 12px;
        margin-bottom: 10px;
    }
    .a-news-date{
        font-size: 17px;
    }
    .a-news-cat{
        padding: 3px 10px;
        font-size: 11px;
    }
    .a-news-title{
        font-size: 16px;
        line-height: 1.65;
    }
    .a-news-excerpt{
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.7;
    }
    .a-news-items + .navigation.pagination{
        margin-top: 32px;
    }
}
.event-list{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.event-page .f-event-item a{
    display: grid;
    grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
    gap: 24px 36px;
    align-items: center;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line-light);
}
.event-page .f-event-img{
    margin-bottom: 0;
}
.event-page .f-event-item a:not(:has(.f-event-img)){
    grid-template-columns: 1fr;
}
.event-page .f-event-meta:not(:has(img)){
    padding-left: 24px;
}
.event-page .f-event-body h3{
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
}
.event-page .a-news-excerpt{
    margin: 0 0 14px;
}
.event-page .f-event-body .f-event-status,
.single-event .single-head .f-event-status{
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 30px;
}
@media screen and (min-width: 769px){
    .event-page .f-event-item a:hover{
        border-color: var(--key);
    }
}
@media screen and (max-width: 768px){
    .event-page .f-event-item a{
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    .event-page .f-event-body h3{
        font-size: 18px;
    }
}
/**********************************************************************/
/***************************  投稿シングル  ***************************/
/**********************************************************************/

.single-page{
    color: #222;
    background: #f9f8f4;
    padding: 48px 0 80px;
}
.single-page .blog-main{
    padding-bottom: 0;
}
.single-title{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 16px;
}
.single-event .single-title{
    text-align: left;
}
.single-event .single-content{
    margin-top: 40px;
}
.blog-single-head{
    margin-bottom: 10px;
}
.blog-single-head__top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px 32px;
}
.blog-single-head__lead{
    flex: 1;
    min-width: 0;
}
.blog-single-head__title{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(22px, 2.8vw, 34px);
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-align: left;
    margin: 0 0 12px;
    color: #333;
}
.blog-single-head__rule{
    border: 0;
    height: 2px;
    margin: 0 0 0;
    background: var(--key);
}
.blog-single-head__lead .blog-single-head__meta{
    margin-top: 14px;
}
.blog-single-head__staff{
    flex: 0 0 auto;
    width: min(120px, 28vw);
    text-align: center;
}
.blog-single-head__staff-card{
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.blog-single-head__staff-photo{
    display: block;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 2px;
}
.blog-single-head__staff-photo img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.blog-single-head__staff-placeholder{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #e8e4da;
}
.blog-single-head__staff-link{
    display: block;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--key);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-single-head__sep{
    color: var(--key);
}
.blog-single-head__author{
    color: var(--key);
}
.blog-single-head__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #555;
}
.blog-single-head__terms{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    color: var(--key);
}
.blog-single-head__cat{
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--key);
    background: rgba(91, 143, 99, 0.08);
    color: var(--key);
    font-size: 12px;
    line-height: 1.6;
    text-decoration: none;
}
.blog-single-head__cat:hover{
    background: rgba(91, 143, 99, 0.16);
}
@media (max-width: 640px){
    .blog-single-head__top{
        flex-direction: column;
    }
    .blog-single-head__staff{
        width: 100px;
        margin-left: auto;
    }
}
.single-meta{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #777;
    margin-bottom: 32px;
}
.single-thumb{
    margin: 0 0 40px;
    overflow: hidden;
}
.single-thumb img{
    width: 100%;
    height: auto;
    display: block;
}
.single-nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #ece8de;
    font-size: 14px;
    letter-spacing: 0.08em;
}
.single-nav-prev{
    justify-self: start;
}
.single-nav-list{
    justify-self: center;
    padding: 8px 20px;
    border: 1px solid var(--key);
    color: var(--key);
}
.single-nav-next{
    justify-self: end;
    text-align: right;
}
.single-content{
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}
.single-content > *:first-child{
    margin-top: 0;
}
.single-content p{
    margin: 0 0 10px;
}
.single-content h2{
    position: relative;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: 0.1em;
    color: #222;
    margin: 2.4em 0 1em;
    padding: 0.15em 0 0.5em 0.85em;
    border-bottom: 2px solid var(--key);
}
.single-content h2::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.5em;
    width: 5px;
    background: var(--key);
}
.single-content h3{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(17px, 1.8vw, 21px);
    letter-spacing: 0.08em;
    color: var(--key);
    margin: 1.8em 0 20px;
    padding-left: 0.75em;
    border-left: 3px solid #c5d4c7;
}
.single-content h4{
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: #222;
    margin: 1.6em 0 0.6em;
}
.single-content ul,
.single-content ol{
    margin: 0 0 1.6em;
    padding-left: 1.5em;
}
.single-content ul{
    list-style: disc;
}
.single-content ol{
    list-style: decimal;
}
.single-content ul li::marker,
.single-content ol li::marker{
    color: var(--key);
}
.single-content li{
    margin: 0.4em 0;
    line-height: 1.9;
}
.single-content li ul,
.single-content li ol{
    margin: 0.4em 0 0.6em;
}
.single-content strong{
    font-weight: 700;
    color: var(--key);
}
.single-content em{
    font-style: italic;
}
.single-content a{
    color: var(--key);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.single-content img,
.single-content figure{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.6em 0;
}
.single-content figure img{
    margin: 0;
}
.blog-main .single-content img{
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(72vh, 560px);
    margin-left: 0;
    margin-right: auto;
}
.single-content figcaption{
    margin-top: 8px;
    font-size: 13px;
    color: #888;
}
.single-content blockquote{
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--key);
    color: #555;
}
.single-content table{
    margin: 0 0 1.6em;
    width: 100%;
}
.single-content th,
.single-content td{
    padding: 10px 12px;
    border: 1px solid #ece8de;
    font-size: 14px;
    line-height: 1.7;
}
.single-content th{
    background: #fff;
    font-weight: 700;
}
@media screen and (min-width: 769px){
    .single-nav a:hover{
        color: var(--key);
    }
    .single-nav-list:hover{
        background: var(--key);
        color: #fff;
    }
}
@media screen and (max-width: 768px){
    .single-page{
        padding: 32px 0 56px;
    }
    .single-nav{
        grid-template-columns: 1fr 1fr;
        gap: 16px 8px;
    }
    .single-nav-list{
        grid-column: 1 / -1;
        justify-self: center;
        order: -1;
    }
}

.single-page [id^="ez-toc-container"],
.single-content [id^="ez-toc-container"]{
    display: block;
    width: 100%;
    margin: 0 0 2.4em;
    padding: 24px 28px 20px;
    background: #fff;
    border: 1px solid #ece8de;
    border-radius: 0;
    box-shadow: none;
}
.single-page [id^="ez-toc-container"] .ez-toc-title-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ece8de;
}
.single-page [id^="ez-toc-container"] .ez-toc-title,
.single-content [id^="ez-toc-container"] .ez-toc-title{
    display: block;
    margin: 0;
    padding: 0;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.14em;
    line-height: 1.5;
    color: #222;
    text-align: left;
}
.single-page [id^="ez-toc-container"] .ez-toc-title-toggle,
.single-page [id^="ez-toc-container"] a.ez-toc-toggle{
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: #888;
}
.single-page [id^="ez-toc-container"] .ez-toc-toggle label,
.single-page [id^="ez-toc-container"] .ez-toc-js-icon-con,
.single-page [id^="ez-toc-container"] .ez-toc-cssicon{
    float: none;
    left: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #ece8de;
    border-radius: 0;
    background: #f9f8f4;
}
.single-page [id^="ez-toc-container"] .ez-toc-icon-toggle-span{
    width: 28px;
    height: 28px;
    color: var(--key);
}
.single-page [id^="ez-toc-container"] ul,
.single-page [id^="ez-toc-container"] ol,
.single-page [id^="ez-toc-container"] li,
.single-content [id^="ez-toc-container"] ul,
.single-content [id^="ez-toc-container"] ol,
.single-content [id^="ez-toc-container"] li{
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
    overflow: visible;
    line-height: 1.7;
}
.single-page [id^="ez-toc-container"] ul.ez-toc-list{
    margin-top: 4px;
}
.single-page [id^="ez-toc-container"] ul ul{
    margin: 0;
    padding: 0;
}
.single-page [id^="ez-toc-container"] a,
.single-content [id^="ez-toc-container"] a{
    display: block;
    color: #444;
    text-decoration: none;
    text-underline-offset: 3px;
    box-shadow: none;
}
.single-page [id^="ez-toc-container"] a.ez-toc-link{
    padding: 10px 0;
    border-bottom: 1px solid #f0ece3;
    letter-spacing: 0.04em;
}
.single-page [id^="ez-toc-container"] .ez-toc-heading-level-2 > a.ez-toc-link{
    font-size: 15px;
    color: #222;
}
.single-page [id^="ez-toc-container"] .ez-toc-heading-level-3 > a.ez-toc-link{
    padding: 6px 0 6px 1.2em;
    font-size: 13px;
    color: #666;
    border-bottom-color: transparent;
}
.single-page [id^="ez-toc-container"] .ez-toc-heading-level-3:last-child > a.ez-toc-link{
    border-bottom: 1px solid #f0ece3;
}

.single-content img.line-icon{
    max-width: 300px;
}
.single-content img.qr-code{
    max-width: 300px;
}

@media screen and (min-width: 769px){
    .single-page [id^="ez-toc-container"] a.ez-toc-link:hover{
        color: var(--key);
        text-decoration: none;
    }
}
/**********************************************************************/
/***************************  施工事例  ***************************/
/**********************************************************************/
.works-single-page{
    color: #222;
    background: #f9f8f4;
}
.works-single-page{
    padding: 48px 0 80px;
}
.works-head{
    text-align: center;
    margin-bottom: 32px;
}
.works-cats{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.works-cats span{
    display: inline-block;
    background: var(--key);
    padding: 6px 16px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.works-title{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(24px, 3.2vw, 40px);
    letter-spacing: 0.1em;
    line-height: 1.7;
    margin-bottom: 0;
}
.works-hero{
    margin: 0 auto 48px;
    overflow: hidden;
}
.works-hero-btn{
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}
.works-hero img{
    object-fit: cover;
    max-width: 800px;
    max-height: 720px;
    margin: auto;
}
.works-lead{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(16px, 1.7vw, 18px);
    line-height: 2.2;
    letter-spacing: 0.08em;
    text-align: left;
    max-width: 720px;
    width: 90%;
    margin: 0 auto 20px;
    color: #333;
}
.works-thumbs{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 auto 72px;
}
.works-thumb{
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    overflow: hidden;
    cursor: zoom-in;
}
.works-thumb img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.works-spec{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 80px;
}
.works-spec .company-spec-row{
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 24px 28px;
}
.works-spec .works-spec-row-basic:nth-child(odd){
    border-right: 1px solid #ece8de;
}
.works-spec:has(+ .works-tags){
    margin-bottom: 30px;
}
.works-tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin: 0 auto 80px;
    padding: 0;
    list-style: none;
}
.works-tags a{
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid rgba(91,143,99,0.45);
    background: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    font-size: 14px;
    color: var(--key);
    line-height: 1.5;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media screen and (min-width: 769px){
    .works-tags a:hover{
        background: var(--key);
        border-color: var(--key);
        color: #fff;
    }
}
.works-points{
    padding: 0 0 40px;
}
.works-points-head{
    text-align: center;
    margin-bottom: 56px;
}
.works-points-head h2{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.14em;
    font-size: clamp(24px, 3vw, 36px);
}
.works-point{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin: 0 auto 80px;
    width: 90%;
    max-width: 1200px;
}
.works-point.is-reverse .works-point-img{
    order: 2;
}
.works-point-img{
    margin: 0;
    overflow: hidden;
}
.works-point-img img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}
.works-point-body .concept-points-num{
    margin-bottom: 12px;
}
.works-point-body h3{
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    letter-spacing: 0.1em;
    line-height: 1.7;
    margin: 0 0 16px;
}
.works-point-body h3 + p{
    margin-top: 0;
}
.works-point-body p:not(.concept-points-num){
    font-size: 15px;
    line-height: 2.1;
    letter-spacing: 0.04em;
    color: #4a4a4a;
}
.works-content{
    margin: 0 auto 24px;
}
.works-nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 16px 24px;
    margin-top: 56px;
}
.works-nav-item{
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    width: 100%;
    padding: 14px 16px;
    background: #f7f5f2;
    border: 1px solid #e8e4da;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    align-items: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.works-nav-item:not(.is-empty):hover{
    border-color: var(--key);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.works-nav-item:not(:has(figure)){
    grid-template-columns: 1fr;
}
.works-nav-item.is-next{
    justify-self: end;
    text-align: right;
}
.works-nav-item.is-next:has(figure){
    grid-template-columns: 1fr 88px;
}
.works-nav-item.is-next:not(:has(figure)){
    grid-template-columns: 1fr;
}
.works-nav-item figure{
    grid-row: 1 / span 2;
    margin: 0;
    overflow: hidden;
    width: 88px;
}
.works-nav-item.is-next figure{
    grid-column: 2;
}
.works-nav-item img{
    width: 88px;
    height: 64px;
    object-fit: cover;
    display: block;
}
.works-nav-item span{
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #5c5c5c;
}
.works-nav-item p{
    margin: 0;
    min-width: 0;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.55;
    color: #2a2a2a;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.works-nav-list{
    align-self: center;
    padding: 8px 20px;
    border: 1px solid var(--key);
    color: var(--key);
    letter-spacing: 0.08em;
    font-size: 14px;
}
.works-lightbox{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,18,16,0.92);
    padding: 48px 72px 64px;
}
.works-lightbox[hidden]{
    display: none;
}
.works-lightbox-in{
    position: relative;
    width: min(1100px, 100%);
}
.works-lightbox-in figure{
    margin: 0;
}
.works-lightbox-in img{
    width: 100%;
    height: min(80vh, 860px);
    object-fit: contain;
    display: block;
}
.works-lightbox-close{
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.works-lightbox-prev,
.works-lightbox-next{
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border: none;
    background: none;
    cursor: pointer;
    transform: translateY(-50%);
}
.works-lightbox-prev{
    left: -56px;
}
.works-lightbox-next{
    right: -56px;
}
.works-lightbox-prev::before,
.works-lightbox-next::before{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.works-lightbox-prev::before{
    transform: rotate(-135deg);
    margin-left: 12px;
}
.works-lightbox-next::before{
    transform: rotate(45deg);
    margin-left: 8px;
}
.works-lightbox-count{
    margin: 16px 0 0;
    text-align: center;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.16em;
    font-size: 13px;
}
body.works-lightbox-open{
    overflow: hidden;
}
@media screen and (min-width: 769px){
    .works-filters a:hover,
    .works-page .page-numbers:hover{
        color: var(--key);
    }
    .works-page .page-numbers.current:hover{
        color: #fff;
    }
    .works-single-page .works-point-img img{
        transition: transform 0.5s ease;
    }
    .works-single-page .works-point:hover .works-point-img img,
    .works-thumbs .works-thumb:hover img{
        transform: scale(1.03);
    }
    .works-nav-item:not(.is-empty):hover span,
    .works-nav-item:not(.is-empty):hover p,
    .works-nav-list:hover{
        color: var(--key);
    }
    .works-nav-list:hover{
        background: var(--key);
        color: #fff;
    }
}
@media screen and (max-width: 768px){
    .works-archive .f-works-item{
        transition-delay: 0s;
    }
    .works-single-page{
        padding: 32px 0 56px;
    }
    .works-head{
        margin-bottom: 20px;
    }
    .works-hero{
        margin-bottom: 32px;
    }
    .works-hero img{
        height: 48vh;
        min-height: 220px;
    }
    .works-thumbs{
        grid-template-columns: 1fr 1fr;
        margin-bottom: 48px;
    }
    .works-thumb img{
        height: 140px;
    }
    .works-spec{
        grid-template-columns: 1fr;
        margin-bottom: 56px;
    }
    .works-spec .company-spec-row{
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 20px;
    }
    .works-spec .works-spec-row-basic:nth-child(odd){
        border-right: none;
    }
    .works-spec:has(+ .works-tags){
        margin-bottom: 16px;
    }
    .works-tags{
        margin-bottom: 40px;
    }
    .works-nav{
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .works-nav-list{
        grid-column: 1 / -1;
        justify-self: center;
        order: -1;
        margin-bottom: 4px;
    }
    .works-nav-item.is-empty{
        display: none;
    }
    .works-nav-item.is-prev:not(.is-empty){
        grid-column: 1;
    }
    .works-nav-item.is-next:not(.is-empty){
        grid-column: 2;
    }
    .works-nav-item,
    .works-nav-item.is-next{
        justify-self: stretch;
        text-align: left;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 8px;
        padding: 10px 10px 12px;
    }
    .works-nav-item.is-next:has(figure),
    .works-nav-item.is-prev:has(figure){
        grid-template-columns: 1fr;
    }
    .works-nav-item span{
        grid-row: 1;
    }
    .works-nav-item figure,
    .works-nav-item.is-next figure{
        grid-row: 2;
        grid-column: 1;
        width: 100%;
    }
    .works-nav-item p{
        grid-row: 3;
        grid-column: 1;
        min-width: 0;
        max-width: 100%;
        font-size: 12px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .works-nav-item img{
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
    }
    .works-lightbox{
        padding: 56px 16px 24px;
    }
    .works-lightbox-in img{
        height: 62vh;
    }
    .works-lightbox-prev{
        left: 0;
    }
    .works-lightbox-next{
        right: 0;
    }
    .works-points-head{
        margin-bottom: 36px;
    }
    .works-point{
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 48px;
    }
    .works-point.is-reverse .works-point-img{
        order: 0;
    }
    .works-point-img img{
        height: 220px;
    }
}

/**********************************************************************/
/*****************************  マージン  *****************************/
/**********************************************************************/

.mb-0{
    margin-bottom: 0!important;
}
.mb-5{
	margin-bottom: 5px!important;
}
.mb-10{
	margin-bottom: 10px!important;
}
.mb-20{
	margin-bottom: 20px!important;
}
.mb-30{
	margin-bottom: 30px!important;
}
.mb-50{
	margin-bottom: 50px!important;
}
.mb-80{
	margin-bottom: 80px!important;
}
.mb-100{
	margin-bottom: 100px!important;
}
.mt-30{
	margin-top: 30px;
}
.mt-50{
	margin-top: 50px;
}

@media screen and (max-width:768px){
    .mb-0-sp{
        margin-bottom: 0!important;
    }
	.mb-30{
		margin-bottom: 20px!important;
	}
	.mb-50{
		margin-bottom: 30px!important;
	}
	.mb-80{
		margin-bottom: 30px!important;
	}
	.mb-100{
		margin-bottom: 50px!important;
	}
	.mt-30{
		margin-top: 20px!important;
	}
	.mt-50{
		margin-top: 20px!important;
	}
}

/**********************************************************************/

.pc {
  display: block !important;
}
/*pcのみ表示ブロック*/
.sp {
  display: none !important;
}
/*スマホのみ表示ブロック*/
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  /*pcのみ表示ブロック*/
  .sp {
    display: block !important;
  }
  /*スマホのみ表示ブロック*/
}

/* 家づくりの流れ */
.flow-steps,
.flow-consult{
    padding: 120px 0;
}
.flow-steps-intro > h2,
.flow-consult h2{
    margin-bottom: 28px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 400;
}
.flow-phase{
    margin-top: 64px;
}
.flow-phase + .flow-phase{
    margin-top: 110px;
}
.flow-phase-head{
    padding: 28px 0;
    text-align: center;
    background: var(--beige-dark);
}
.flow-phase-head-inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.flow-phase.is-second .flow-phase-head{
    background: #e8efe7;
}
.flow-phase.is-after .flow-phase-head{
    color: #fff;
    background: var(--key);
}
.flow-phase-en{
    margin: 0;
    font-family: "EB Garamond", serif;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: .12em;
}
.flow-phase-head h3{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 24px;
    font-weight: 400;
}
.flow-list{
    margin-top: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #d8d8d0;
}
.flow-item{
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 220px;
    gap: 32px;
    padding: 42px 0;
    border-bottom: 1px solid #d8d8d0;
}
.flow-item--no-photo{
    grid-template-columns: 80px minmax(0, 1fr);
}
.flow-num{
    margin: 0;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: .04em;
}
.flow-content h4{
    margin: -9px 0 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 24px;
    line-height: 1.7;
    letter-spacing: 3px;
    font-weight: 400;
}
.flow-content p{
    margin: 0;
}
.flow-content .flow-related-link{
    margin-top: 18px;
    line-height: 1.5;
}
.flow-related-link a{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--key);
    border-bottom: 1px solid currentColor;
}
.flow-related-link a::after{
    content: "→";
    transition: transform .2s ease;
}
.flow-related-link a:hover::after{
    transform: translateX(4px);
}
.guide-menu-photo-placeholder{
    display: block;
    background: #d7d8d4;
}
.flow-photo{
    display: block;
    width: 100%;
    height: auto;
    align-self: start;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.flow-photo-placeholder{
    background: #d7d8d4;
}
.flow-photo-aftercare{
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--beige-soft);
}
.flow-photo-aftercare img{
    width: 78%;
    height: auto;
}
.flow-consult{
    background: #f0f4ef;
    text-align: center;
}
.flow-consult p:last-child{
    margin-top: 36px;
}

@media screen and (max-width: 768px){
    .flow-steps,
    .flow-consult{
        padding: 64px 0;
    }
    .flow-steps-intro > h2,
    .flow-consult h2{
        margin-bottom: 20px;
        font-size: 25px;
    }
    .flow-phase{
        margin-top: 40px;
    }
    .flow-phase + .flow-phase{
        margin-top: 64px;
    }
    .flow-phase-head{
        padding: 22px 0;
    }
    .flow-phase-head-inner{
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .flow-phase-en{
        font-size: 15px;
    }
    .flow-phase-head h3{
        font-size: 20px;
    }
    .flow-item{
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 30px 0;
    }
    .flow-num{
        font-size: 32px;
    }
    .flow-content h4{
        margin: 0 0 12px;
        font-size: 21px;
        letter-spacing: 1px;
    }
    .flow-photo{
        width: min(100%, 360px);
        margin-top: 6px;
    }
}

/* 家づくりガイド */
.guide-menu{
    padding: 120px 0;
    background: var(--beige-soft);
}
.guide-menu-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #d8d8d0;
    border-left: 1px solid #d8d8d0;
}
.guide-menu-item{
    min-height: 260px;
    padding: 0 42px 38px;
    color: inherit;
    border-right: 1px solid #d8d8d0;
    border-bottom: 1px solid #d8d8d0;
    background: rgba(255, 255, 255, .45);
    transition: background-color .25s ease;
}
.guide-menu-item:hover{
    background: #fff;
}
.guide-menu-num,
.guide-menu-en{
    display: block;
    color: var(--key);
}
.guide-menu-photo-placeholder,
.guide-menu-photo{
    aspect-ratio: 16 / 7;
    margin: 0 -42px 28px;
}
.guide-menu-photo{
    display: block;
    width: calc(100% + 84px);
    height: auto;
    object-fit: cover;
}
.guide-menu-num{
    margin-bottom: 5px;
    font-family: "EB Garamond", serif;
    font-size: 34px;
    line-height: 1;
}
.guide-menu-en{
    font-family: "EB Garamond", serif;
    font-size: 13px;
    letter-spacing: .12em;
}
.guide-menu-item h2{
    margin: 32px 0 12px;
    font-family: "Shippori Mincho", serif;
    font-size: 25px;
    font-weight: 400;
}
.guide-menu-item p{
    margin: 0;
}

@media screen and (max-width: 768px){
    .guide-menu{
        padding: 64px 0;
    }
    .guide-menu-grid{
        grid-template-columns: 1fr;
    }
    .guide-menu-item{
        min-height: 0;
        padding: 0 24px 28px;
    }
    .guide-menu-photo-placeholder,
    .guide-menu-photo{
        margin: 0 -24px 22px;
    }
    .guide-menu-photo{
        width: calc(100% + 48px);
    }
    .guide-menu-item h2{
        margin: 20px 0 8px;
        font-size: 22px;
    }
}

/* 標準仕様・こだわり部材 */

.spec-page{
    --key-deep: #3f6f47;
    --white: #ffffff;
    --text: #222222;
    --text-sub: #666666;
    --border: #d8d8db;
    --border-light: #e8e6e2;
    --dark: #1c1a17;
    --tbc-line: #c98a00;
    --tbc-text: #6b4e00;
    --font-mincho: "Shippori Mincho", serif;
    --font-en: "EB Garamond", serif;
    --font-sans: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif;
    --section-y: 80px;
    --heading-gap: 48px;
    --gap: 32px;
    --radius-pill: 30px;
    --shadow-hover: 0 16px 32px rgba(0, 0, 0, .08);
}

@media (max-width: 768px){
    .spec-page{
        --section-y: 64px;
        --heading-gap: 32px;
        --gap: 20px;
    }
}
.spec-page .spec-actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
}
.spec-page .tbc{
    display: inline-block;
    margin: 0 .15em;
    padding: 0 .1em;
    border-bottom: 1px dotted var(--tbc-line);
    color: var(--tbc-text);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .02em;
    vertical-align: .1em;
    white-space: nowrap;
}
.spec-page .tbc--value{
    margin: 0;
    font-size: 14px;
    color: var(--text-sub);
    border-bottom-color: var(--border);
    vertical-align: baseline;
}
.spec-page .tbc--plain{
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    vertical-align: baseline;
}

/* 未確認の採用区分バッジ：塗り・緑枠を使わず、確定済みに見えない破線の1つにまとめる */
.spec-page .tbc-badge{
    background: var(--white) !important;
    border: 1px dashed var(--tbc-line) !important;
    color: var(--tbc-text) !important;
}
.spec-page .spec-badge-state{
    font-size: 11px;
    letter-spacing: 0;
}

.spec-page .spec-note{
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-sub);
    letter-spacing: .02em;
    margin-top: 16px;
}
.spec-page .spec-body-lead{
    max-width: 720px;
    margin-bottom: 40px;
}
.spec-page .spec-center-link{
    text-align: center;
    margin-top: 48px;
}
.spec-page .spec-link-row{
    margin-top: 32px;
}

.spec-page .spec-works{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.spec-page .spec-work-title{
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .04em;
}
.spec-page .spec-work-no{
    margin-right: 8px;
    color: var(--key-deep);
    font-family: var(--font-en);
    letter-spacing: .06em;
}
.spec-page .spec-works + .spec-note,
.spec-page .spec-works ~ .spec-link-row{
    text-align: center;
}

.spec-page .spec-measured{
    margin: 0;
    padding: 32px;
    border: 1px solid var(--border-light);
    background: var(--white);
}
.spec-page .spec-measured-cap{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
}
.spec-page .spec-bars{
    display: grid;
    gap: 14px;
    margin: 0;
}
.spec-page .spec-bar{
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 16px;
    align-items: center;
    margin: 0;
}
.spec-page .spec-bar dt{
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.spec-page .spec-bar dd{
    display: grid;
    grid-template-columns: 1fr 9em;
    gap: 12px;
    align-items: center;
    margin: 0;
}
.spec-page .spec-bar-track{
    display: block;
    height: 20px;
    background: var(--beige-soft);
}
.spec-page .spec-bar-fill{
    display: block;
    width: calc(var(--v, 0) * 1%);
    height: 100%;
    background: var(--key);
}
.spec-page .spec-bar--after .spec-bar-fill{
    background: var(--key-deep);
}
.spec-page .spec-bar--diff .spec-bar-fill{
    background: var(--text-sub);
}
.spec-page .spec-bar.is-empty .spec-bar-track{
    border: 1px dashed var(--border);
    background: var(--beige-soft);
}
.spec-page .spec-bar-value{
    font-family: var(--font-en);
    font-size: 20px;
}
.spec-page .spec-bar-empty{
    color: var(--text-sub);
}
.spec-page .spec-measured-empty{
    display: none;
    margin-top: 16px;
    color: var(--text-sub);
    font-size: 13px;
}
.spec-page .spec-measured:has(.is-empty) .spec-measured-empty{
    display: block;
}
.spec-page .spec-subhead{
    margin: 40px 0 16px;
    font-family: var(--font-mincho, "Shippori Mincho", serif);
    font-size: 20px;
    font-weight: 500;
}
.spec-page .spec-measured-conds{
    padding: 12px 4px 16px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.9;
}
.spec-page .spec-measured-conds + .spec-data{
    border-top: 1px solid var(--border);
}

@media (max-width: 768px){
    .spec-page .spec-works{
        grid-template-columns: 1fr;
    }
    .spec-page .spec-measured{
        padding: 20px 16px;
    }
    .spec-page .spec-bar{
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .spec-page .spec-bar dd{
        grid-template-columns: 1fr 8.5em;
    }
}

/* 目次 */
.spec-page .spec-toc{
    padding: 0 0 var(--section-y);
    text-align: center;
}
.spec-page .spec-toc ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 12px;
}
.spec-page .spec-toc a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 18px;
    border: 1px solid var(--border-light);
    color: var(--text);
    font-size: 14px;
    letter-spacing: .06em;
    text-decoration: none;
}
.spec-page .spec-toc a::after{
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--key-deep);
    border-bottom: 1px solid var(--key-deep);
    transform: translateY(-2px) rotate(45deg);
}
.spec-page .spec-toc a:hover{
    border-color: var(--key);
    color: var(--key-deep);
}

@media (max-width: 768px){
    .spec-page .spec-toc ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .spec-page .spec-toc a{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 6px 14px;
    }
}

/* お悩み */
.spec-page .spec-worries li{
    font-family: var(--font-mincho);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .04em;
    padding: 22px 8px;
    border-top: 1px solid var(--border);
}
.spec-page .spec-worries li:last-child{
    border-bottom: 1px solid var(--border);
}

@media (max-width: 768px){
    .spec-page .spec-worries li{
        font-size: 16px;
        padding: 18px 4px;
    }
}

.spec-page .spec-choose{
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.spec-page .spec-choose-step{
    border: 1px solid var(--border-light);
    background: var(--white);
}
.spec-page .spec-choose-q{
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 18px 24px;
    background: var(--beige-dark);
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.6;
}
.spec-page .spec-choose-no{
    flex-shrink: 0;
    color: var(--key-deep);
    font-family: var(--font-en);
    font-size: 22px;
    letter-spacing: .06em;
}
.spec-page .spec-choose-answers{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}
.spec-page .spec-choose-answers li{
    padding: 20px 24px;
}
.spec-page .spec-choose-answers li + li{
    border-left: 1px solid var(--border-light);
}
.spec-page .spec-choose-key{
    display: inline-block;
    margin-bottom: 6px;
    padding: 0 12px;
    border: 1px solid var(--key-deep);
    border-radius: var(--radius-pill);
    color: var(--key-deep);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}
.spec-page .spec-choose-a{
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
}

@media (max-width: 768px){
    .spec-page .spec-choose-q{
        gap: 10px;
        padding: 14px 16px;
        font-size: 17px;
    }
    .spec-page .spec-choose-answers{
        grid-template-columns: 1fr;
    }
    .spec-page .spec-choose-answers li{
        padding: 16px;
    }
    .spec-page .spec-choose-answers li + li{
        border-top: 1px solid var(--border-light);
        border-left: 0;
    }
}

/* 2カラム（画像＋本文） */
.spec-page .spec-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.spec-page .spec-split--rev .spec-split-media{
    order: 2;
}
.spec-page .spec-split-body > p + p{
    margin-top: 2em;
}
.spec-page .spec-split-body .section-heading{
    max-width: none;
    margin-bottom: 24px;
}
.spec-page .spec-split-body .section-heading h2{
    margin-bottom: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.55;
}

@media (max-width: 1100px){
    .spec-page .spec-split{
        gap: 40px;
    }
}

@media (max-width: 768px){
    .spec-page .spec-split{
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .spec-page .spec-split--rev .spec-split-media{
        order: 0;
    }
}
.spec-page .spec-diagram{
    margin-top: 56px;
    max-width: 900px;
}
.spec-page .spec-product{
    margin-top: 28px;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    line-height: 1.8;
}
.spec-page .spec-product div{
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.spec-page .spec-product dt{
    color: var(--text-sub);
}

/* ---------- 9. Image placeholder .ph ---------- */
.spec-page .ph{
    position: relative;
    overflow: hidden;
    background: var(--beige-dark);
    aspect-ratio: 3 / 2;
}
.spec-page .ph--1x1{
    aspect-ratio: 1 / 1;
}
.spec-page .ph--fill{
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}
.spec-page .ph::before{
    content: attr(data-ph);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    white-space: pre-line;
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .04em;
}
.spec-page .ph img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spec-page .ph img.is-missing{
    visibility: hidden;
}
.spec-page .ph:has(> img:not(.is-missing))::before{
    content: none;
}

/* 実在人物・施工事例・メーカー製品は生成せず、支給写真の差し替え枠として整える。 */
.spec-page .ph:has(> img.is-missing){
    background-color: var(--beige-soft);
    background-image:
    linear-gradient(135deg, rgb(91 143 99 / 7%) 25%, transparent 25%),
    linear-gradient(315deg, rgb(91 143 99 / 7%) 25%, transparent 25%);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
    border: 1px solid var(--border-light);
}
.spec-page .ph:has(> img[src*="/craftsman-face."])::before{
    content: "SAKAE CRAFTSMAN\A 職人写真は取材後に掲載予定";
}
.spec-page .ph:has(> img[src*="/works-"])::before{
    content: "WORKS\A 施工事例写真は確認後に掲載予定";
}
.spec-page .ph:has(> img[src*="/maker-"])::before{
    content: "PRODUCT PHOTO\A メーカー許諾確認後に掲載予定";
}

/* ---------- 10. Spec points（数値カード） ---------- */
.spec-page .spec-points{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}
.spec-page .spec-points--4{
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px){
    .spec-page .spec-points,
    .spec-page .spec-points--4{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .spec-page .spec-points,
    .spec-page .spec-points--4{
        grid-template-columns: 1fr;
    }
}
.spec-page .spec-point{
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px){
    .spec-page .spec-point{
        padding: 24px;
    }
}
.spec-page .spec-point-en{
    font-family: var(--font-en);
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--key-deep);
    line-height: 1.4;
}
.spec-page .spec-point-label{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.6;
    margin-top: 12px;
}
.spec-page .spec-point-value{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-height: 72px;
    margin-top: 8px;
    padding-bottom: 20px;
    position: relative;
    letter-spacing: 0;
}
.spec-page .spec-point-value::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 1px;
    background: var(--key);
}
.spec-page .spec-point-num{
    font-family: var(--font-en);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text);
}
.spec-page .is-long .spec-point-num{
    font-size: 30px;
}
.spec-page .spec-point-pre,
.spec-page .spec-point-unit{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
.spec-page .spec-point-value.is-text{
    align-items: center;
}
.spec-page .spec-point-text{
    font-family: var(--font-mincho);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: .04em;
}
.spec-page .spec-point-value.is-tbc{
    align-items: center;
}

@media (max-width: 768px){
    .spec-page .spec-point-num{
        font-size: 40px;
    }
    .spec-page .spec-point-pre,
    .spec-page .spec-point-unit{
        font-size: 14px;
    }
    .spec-page .spec-point-text{
        font-size: 22px;
    }
    .spec-page .spec-point-value{
        min-height: 60px;
    }
}
.spec-page .spec-point-translation{
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: .04em;
}
.spec-page .spec-point-note{
    margin-top: auto;
    padding-top: 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-sub);
    letter-spacing: .02em;
}

/* ---------- 11. Cards .spec-card ---------- */
.spec-page .spec-cards{
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
}

@media (min-width: 769px){
    .spec-page .spec-cards{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1101px){
    .spec-page .spec-cards{
        grid-template-columns: repeat(3, 1fr);
    }
    .spec-page .spec-cards--n4,
    .spec-page .spec-cards--n2{
        grid-template-columns: repeat(2, 1fr);
        margin-inline: auto;
    }
}
.spec-page .spec-cards-item{
    display: flex;
}
.spec-page .spec-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border-light);
    color: var(--text);
    text-decoration: none;
    transition: box-shadow .25s, transform .25s;
}
.spec-page .spec-card:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
    .spec-page .spec-card:hover{
        transform: none;
    }
}
.spec-page .spec-card-body{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}
.spec-page .spec-card-no{
    font-family: var(--font-en);
    font-size: 15px;
    letter-spacing: .14em;
    color: var(--key-deep);
    line-height: 1.4;
}
.spec-page .spec-card-title{
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .06em;
    margin-top: 4px;
}
.spec-page .spec-card-en{
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--text-sub);
    line-height: 1.5;
    text-transform: uppercase;
}
.spec-page .spec-card-text{
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .04em;
}
.spec-page .spec-card-foot{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}
.spec-page .spec-card.is-pending{
    border: 1px dashed var(--border);
    background: var(--white);
}
.spec-page .spec-card.is-pending .spec-card-no{
    color: var(--text-sub);
}

@media (max-width: 768px){
    .spec-page .spec-card{
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr);
        align-items: stretch;
    }
    .spec-page .spec-card .ph{
        aspect-ratio: auto;
        min-height: 100%;
    }
    .spec-page .spec-card .ph::before{
        font-size: 10px;
        padding: 6px;
    }
    .spec-page .spec-card-body{
        padding: 14px 14px 14px 16px;
    }
    .spec-page .spec-card-title{
        font-size: 16px;
    }
    .spec-page .spec-card-en{
        font-size: 11px;
        letter-spacing: .08em;
    }
    .spec-page .spec-card-text{
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.7;
    }
    .spec-page .spec-card-foot{
        padding-top: 10px;
        gap: 6px;
    }
}

/* 採用区分バッジ */
.spec-page .spec-badge{
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 12px;
    border: 1px solid;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.5;
    white-space: nowrap;
}
.spec-page .spec-badge--standard{
    background: var(--key-deep);
    border-color: var(--key-deep);
    color: var(--white);
}
.spec-page .spec-badge--select{
    background: var(--white);
    border-color: var(--key-deep);
    color: var(--key-deep);
}
.spec-page .spec-badge--varies{
    background: var(--white);
    border-color: #666;
    color: #555;
}
.spec-page .spec-badge--pending{
    background: var(--white);
    border: 1px dashed var(--text-sub);
    color: var(--text-sub);
}
.spec-page .spec-card-badge{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* ---------- 12. Hub parts ---------- */
.spec-page .spec-map{
    max-width: 1000px;
    margin-inline: auto;
}
.spec-page .spec-map-svg{
    display: block;
    width: 100%;
    height: auto;
}
.spec-page .map-pin circle{
    fill: var(--key);
    stroke: var(--white);
    stroke-width: 4;
    transition: fill .2s;
}
.spec-page .map-pin text{
    fill: var(--white);
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    pointer-events: none;
}
.spec-page .map-pin:hover circle,
.spec-page .map-pin:focus circle{
    fill: var(--key-deep);
}
.spec-page .map-pin:focus{
    outline: none;
}
.spec-page .map-pin:focus-visible circle{
    stroke: var(--dark);
    stroke-width: 5;
}
.spec-page .spec-map figcaption{
    text-align: center;
}
.spec-page .spec-map-legend{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 24px;
    max-width: 1000px;
    margin: 32px auto 0;
    border-top: 1px solid var(--border-light);
}
.spec-page .spec-map-legend a{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    letter-spacing: .04em;
}
.spec-page .spec-map-legend a:hover{
    color: var(--key-deep);
}
.spec-page .spec-map-legend-no{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--key-deep);
    color: var(--white);
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0;
}

@media (max-width: 1100px){
    .spec-page .spec-map-legend{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px){
    .spec-page .spec-map-legend{
        grid-template-columns: 1fr 1fr;
        gap: 0 12px;
    }
    .spec-page .spec-map-legend a{
        font-size: 13px;
        gap: 8px;
    }
}
.spec-page .spec-list-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .04em;
}
.spec-page .spec-list-table th,
.spec-page .spec-list-table td{
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.spec-page .spec-list-table thead th{
    background: var(--beige-dark);
    font-weight: 700;
    font-size: 13px;
}
.spec-page .spec-list-table tbody th{
    font-weight: 700;
}
.spec-page .spec-list-table tr.is-pending th,
.spec-page .spec-list-table tr.is-pending td{
    color: var(--text-sub);
}

@media (max-width: 768px){
    .spec-page .spec-list-table thead{
        display: none;
    }
    .spec-page .spec-list-table,
    .spec-page .spec-list-table tbody,
    .spec-page .spec-list-table tr,
    .spec-page .spec-list-table th,
    .spec-page .spec-list-table td{
        display: block;
    }
    .spec-page .spec-list-table tr{
        border: 1px solid var(--border-light);
        background: var(--white);
        padding: 12px 16px;
        margin-bottom: 12px;
    }
    .spec-page .spec-list-table th,
    .spec-page .spec-list-table td{
        border: 0;
        padding: 4px 0;
        display: grid;
        grid-template-columns: 76px 1fr;
        gap: 8px;
        align-items: center;
    }
    /* QA：em指定だと th（15px）と td（14px）で値の位置がずれた */
    .spec-page .spec-list-table th::before,
    .spec-page .spec-list-table td::before{
        content: attr(data-label);
        font-size: 12px;
        font-weight: 400;
        color: var(--text-sub);
    }
    .spec-page .spec-list-table tbody th{
        font-size: 15px;
    }
    .spec-page .spec-list-table td > *,
    .spec-page .spec-list-table th > *{
        justify-self: start;
    }
}
.spec-page .spec-linkcards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1100px){
    .spec-page .spec-linkcards{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px){
    .spec-page .spec-linkcards{
        grid-template-columns: 1fr;
    }
}
.spec-page .spec-linkcard{
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 120px;
    padding: 24px;
    border: 1px solid var(--border-light);
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    position: relative;
    transition: box-shadow .25s, transform .25s;
}
.spec-page .spec-linkcard::after{
    content: "→";
    position: absolute;
    right: 20px;
    bottom: 16px;
    font-family: var(--font-en);
    color: var(--key-deep);
    font-size: 18px;
}
.spec-page .spec-linkcard:hover{
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.spec-page .spec-linkcard-en{
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--key-deep);
}
.spec-page .spec-linkcard-title{
    font-weight: 700;
    font-size: 15px;
    line-height: 1.6;
    padding-right: 24px;
}
.spec-page .spec-linkcard-body{
    font-size: 14px;
    line-height: 1.9;
}
.spec-page .spec-linkcard--wide{
    padding: 32px 56px 32px 32px;
}

/* ---------- 13. Detail parts ---------- */
.spec-page .spec-benefits{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

@media (max-width: 768px){
    .spec-page .spec-benefits{
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
.spec-page .spec-benefit-title{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 8px;
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: .04em;
}
.spec-page .spec-benefit-no{
    font-family: var(--font-en);
    font-size: 22px;
    color: var(--key-deep);
    letter-spacing: .06em;
}
.spec-page .spec-benefit p{
    font-size: 15px;
    line-height: 1.9;
}

@media (max-width: 768px){
    .spec-page .spec-benefit-title{
        font-size: 18px;
    }
}

/* QA：481〜768px は1:1の画像が全幅（768px時は約690px角×3枚）になり縦に長すぎたため、画像左・本文右に */

@media (min-width: 481px) and (max-width: 768px){
    .spec-page .spec-benefits{
        gap: 28px;
    }
    .spec-page .spec-benefit{
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        align-items: start;
    }
    .spec-page .spec-benefit .ph{
        grid-row: 1 / span 2;
    }
    .spec-page .spec-benefit-title{
        margin-top: 0;
    }
}
.spec-page .spec-voice{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 56px;
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--border-light);
}
.spec-page .spec-voice-face{
    width: 140px;
}
.spec-page .spec-voice-text p{
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: .04em;
}
.spec-page .spec-voice-name{
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-sub);
}
.spec-page .is-alt .spec-voice{
    background: var(--white);
}
.spec-page .spec-section:not(.is-alt) .spec-voice{
    background: var(--beige-soft);
    border-color: transparent;
}

@media (max-width: 768px){
    .spec-page .spec-voice{
        grid-template-columns: 88px 1fr;
        gap: 16px;
        padding: 20px;
        margin-top: 36px;
    }
    .spec-page .spec-voice-face{
        width: 88px;
    }
    .spec-page .spec-voice-face::before{
        font-size: 9px;
    }
    .spec-page .spec-voice-text p{
        font-size: 15px;
    }
}

/* 比較表 */
.spec-page .spec-compare{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .03em;
    background: var(--white);
}
.spec-page .spec-compare th,
.spec-page .spec-compare td{
    padding: 14px 16px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.spec-page .spec-compare thead th{
    background: var(--beige-dark);
    font-weight: 700;
    font-size: 13px;
}
.spec-page .spec-compare thead th.is-ours{
    background: var(--key-deep);
    color: var(--white);
}
.spec-page .spec-compare tbody th{
    font-weight: 700;
    background: var(--beige-soft);
    width: 24%;
}
.spec-page .spec-compare td.is-ours{
    font-weight: 500;
}

@media (max-width: 768px){
    .spec-page .spec-compare{
        font-size: 13px;
        letter-spacing: 0;
    }
    .spec-page .spec-compare th,
    .spec-page .spec-compare td{
        padding: 10px 7px;
    }
    .spec-page .spec-compare thead th{
        font-size: 12px;
    }
    .spec-page .spec-compare tbody th{
        width: 26%;
    }
}

@media (max-width: 400px){
    .spec-page .spec-compare:not(.spec-compare--wide){
        font-size: 12.5px;
    }
    .spec-page .spec-compare th,
    .spec-page .spec-compare td{
        padding: 9px 5px;
    }
    .spec-page .spec-compare tbody th{
        width: 24%;
    }
}
.spec-page .spec-compare-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-light);
}
.spec-page .spec-compare-scroll:focus-visible{
    outline-offset: 2px;
}
.spec-page .spec-compare--wide{
    min-width: 860px;
}
.spec-page .spec-compare--wide th,
.spec-page .spec-compare--wide td{
    border-width: 0 1px 1px 0;
}
.spec-page .spec-compare--wide thead th{
    width: 27%;
}
.spec-page .spec-compare--wide thead th:first-child{
    width: 19%;
}
.spec-page .spec-compare--wide tbody th,
.spec-page .spec-compare--wide thead th:first-child{
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border);
}
.spec-page .spec-compare--wide thead th:first-child{
    background: var(--beige-dark);
}
.spec-page .spec-compare-hint{
    display: none;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-sub);
    text-align: right;
}

@media (max-width: 900px){
    .spec-page .spec-compare-hint{
        display: block;
    }
    .spec-page .spec-compare--wide{
        min-width: 720px;
    }
    .spec-page .spec-compare--wide thead th:first-child{
        width: 22%;
    }
}

/* 仕様データ */
.spec-page .spec-data{
    border-top: 1px solid var(--border);
    font-size: 15px;
    line-height: 1.8;
}
.spec-page .spec-data > div{
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--border);
}
.spec-page .spec-data dt{
    font-weight: 700;
    font-size: 14px;
}
.spec-page .spec-data--compact{
    font-size: 14px;
}
.spec-page .spec-data--compact > div{
    padding: 12px 4px;
    grid-template-columns: 12em 1fr;
}

@media (max-width: 768px){
    .spec-page .spec-data > div,
    .spec-page .spec-data--compact > div{
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 2px;
    }
    .spec-page .spec-data dt{
        font-size: 13px;
        color: var(--text-sub);
    }
}

/* FAQ */
.spec-page .spec-faq{
    border-top: 1px solid var(--border);
}
.spec-page .spec-faq-item{
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.spec-page .spec-faq-q{
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 32px 1fr 24px;
    gap: 12px;
    align-items: baseline;
    padding: 20px 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: .04em;
}
.spec-page .spec-faq-q::-webkit-details-marker{
    display: none;
}
.spec-page .spec-faq-q::after{
    content: "＋";
    color: var(--key);
    font-size: 20px;
    font-weight: 400;
    text-align: right;
    line-height: 1;
}
.spec-page .spec-faq-item[open] > .spec-faq-q::after{
    content: "−";
}
.spec-page .spec-faq-q:hover .spec-faq-qtext{
    color: var(--key-deep);
}
.spec-page .spec-faq-mark{
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 500;
    color: var(--key-deep);
    line-height: 1;
}
.spec-page .spec-faq-a{
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 0 36px 24px 4px;
}
.spec-page .spec-faq-a .spec-faq-mark{
    color: var(--text-sub);
}
.spec-page .spec-faq-a p{
    font-size: 15px;
    line-height: 1.9;
}

@media (max-width: 768px){
    .spec-page .spec-faq-q{
        grid-template-columns: 24px 1fr 20px;
        gap: 8px;
        font-size: 15px;
        padding: 16px 2px;
    }
    .spec-page .spec-faq-a{
        grid-template-columns: 24px 1fr;
        gap: 8px;
        padding: 0 4px 20px 2px;
    }
    .spec-page .spec-faq-mark{
        font-size: 20px;
    }
}

/* 固定ページ共通コンテンツ */
.content-section{
    padding: 120px 0;
}
.content-section--compact{
    padding: 48px 0;
}
.content-section--soft,
.consult-section{
    background: var(--beige-soft);
}
.content-section--green-soft{
    background: #f0f4ef;
}
.content-section h2{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 400;
}
.section-heading{
    max-width: 800px;
    margin-bottom: 56px;
}
.section-heading h2{
    margin-bottom: 20px;
}
.section-heading > p:last-child{
    margin-bottom: 0;
}
.section-title{
    margin-bottom: 52px;
}
.section-gap{
    margin-top: 64px;
}
.standard-spec-head{
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}
.standard-spec-head h2{
    position: relative;
    margin-bottom: 32px;
    padding-bottom: 24px;
}
.standard-spec-head h2::after{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 82px;
    height: 2px;
    background: var(--key);
    content: "";
    transform: translateX(-50%);
}
.standard-spec-head > p:not(.section-en){
    margin-bottom: 8px;
}
.standard-spec-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.standard-spec-card{
    padding: 48px 30px 42px;
    background: #fff;
    border-top: 3px solid var(--key);
    box-shadow: 0 8px 18px rgba(52, 57, 51, .1);
    text-align: center;
}
.standard-spec-category{
    margin-bottom: 18px;
    color: var(--key);
    font-size: 16px;
    letter-spacing: .08em;
}
.standard-spec-value{
    margin-bottom: 12px;
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(26px, 3.3vw, 38px);
    font-weight: 600;
}
.standard-spec-value small{
    font-size: .65em;
}
.standard-spec-caption{
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
}
.standard-spec-note{
    margin: 16px 0 0;
    color: #999;
    font-size: 12px;
    line-height: 1.7;
}
.anchor-section{
    background: #e8efe8;
}
.anchor-nav{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #d8d8d0;
    border-left: 1px solid #d8d8d0;
}
.anchor-nav a{
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    padding: 18px 20px;
    color: inherit;
    border-right: 1px solid #d8d8d0;
    border-bottom: 1px solid #d8d8d0;
    background: #fff;
}
.anchor-nav a::after{
    width: 8px;
    height: 8px;
    margin: -4px 3px 0 auto;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: margin-top .2s ease;
}
.anchor-nav a:hover{
    color: var(--key);
    background: var(--beige-soft);
}
.anchor-nav a:hover::after{
    margin-top: 2px;
}
.anchor-nav-num{
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 21px;
}
.anchor-nav-copy{
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.anchor-nav-copy strong{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .04em;
}
.anchor-nav-copy small{
    margin-top: 4px;
    color: #6e786f;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .03em;
}
.anchor-section .anchor-nav{
    border-color: rgba(61, 91, 68, .25);
}
.anchor-section .anchor-nav a{
    color: #35463a;
    border-color: rgba(61, 91, 68, .25);
    background: rgba(255, 255, 255, .35);
}
.anchor-section .anchor-nav a:hover{
    color: var(--key);
    background: #fff;
}
.anchor-section .anchor-nav-num{
    color: var(--key);
    opacity: .75;
}
.media-split{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(48px, 7vw, 90px);
}
.media-split--reverse .media-split-media{
    order: 2;
}
.media-split-media{
    margin: 0;
}
.media-split-media img{
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.media-split-copy h2{
    margin-bottom: 28px;
}
.media-split-copy > p:not(.section-en){
    margin-bottom: 20px;
}
.media-split-copy > p:last-child{
    margin: 30px 0 0;
}
.card-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.card-grid--two{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-card{
    display: flex;
    min-width: 0;
    color: inherit;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e1da;
    transition: transform .25s ease, box-shadow .25s ease;
}
.content-card[href]:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(52, 57, 51, .09);
}
.content-card-media{
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.content-placeholder{
    background: #d7d8d4;
}
.content-card-body{
    display: block;
    flex-grow: 1;
    padding: 25px 26px 28px;
}
.content-card-title,
.content-card-text{
    display: block;
}
.content-card-title{
    margin-bottom: 10px;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
}
.content-card-text{
    font-size: 14px;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: .05em;
}
.exterior-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--key-deep);
    font-size: 13px;
    letter-spacing: .08em;
}
.exterior-card-more::after {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(45deg);
}
.case-study-head{
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}
.case-study-head h2{
    margin-bottom: 24px;
}
.case-study-meta{
    margin: 0 0 10px;
    color: #777;
    font-size: 14px;
}
.image-gallery{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.image-gallery figure{
    margin: 0;
}
.image-gallery img{
    width: 100%;
    height: 260px;
    object-fit: cover;
}
.image-gallery figcaption{
    margin-top: 10px;
    color: #666;
    font-size: 13px;
    text-align: center;
}
.method-label{
    width: fit-content;
    margin-bottom: 18px;
    padding: 6px 12px;
    color: var(--key);
    border: 1px solid currentColor;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .08em;
}
.method-block--separated{
    margin-top: 110px;
    padding-top: 110px;
    border-top: 1px solid #d8d8d0;
}
.method-gallery{
    margin-top: 42px;
}
.voice-box{
    max-width: 820px;
    margin: 52px auto 0;
    padding: 34px 42px;
    background: var(--beige-soft);
    border-left: 3px solid var(--key);
}
.voice-box p{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
}
.voice-box cite{
    display: block;
    margin-top: 15px;
    color: #777;
    font-size: 13px;
    font-style: normal;
    text-align: right;
}
.consult-section{
    text-align: center;
}
.consult-section h2{
    margin-bottom: 24px;
}
.consult-section p:last-child{
    margin-top: 36px;
}

@media screen and (max-width: 900px){
    .anchor-nav{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .card-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .standard-spec-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px){
    .content-section{
        padding: 64px 0;
    }
    .content-section--compact{
        padding: 30px 0;
    }
    .section-heading{
        margin-bottom: 34px;
    }
    .section-title{
        margin-bottom: 32px;
    }
    .section-gap{
        margin-top: 38px;
    }
    .standard-spec-head{
        margin-bottom: 32px;
        text-align: left;
    }
    .standard-spec-head h2::after{
        left: 0;
        transform: none;
    }
    .standard-spec-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .standard-spec-card{
        padding: 34px 20px 30px;
    }
    .anchor-nav{
        grid-template-columns: 1fr;
    }
    .anchor-nav a{
        min-height: 60px;
        padding: 14px 16px;
    }
    .media-split{
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .media-split-copy h2{
        margin-bottom: 20px;
    }
    .media-split--media-last-mobile .media-split-media{
        order: 2;
    }
    .media-split--reverse .media-split-media{
        order: 0;
    }
    .card-grid{
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .content-card-body{
        padding: 22px 20px 24px;
    }
    .case-study-head{
        margin-bottom: 34px;
        text-align: left;
    }
    .image-gallery{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .image-gallery img{
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .method-block--separated{
        margin-top: 64px;
        padding-top: 64px;
    }
    .voice-box{
        margin-top: 32px;
        padding: 25px 22px;
    }
    .voice-box p{
        font-size: 16px;
    }
}

/* スタッフ・職人紹介 */
.staff-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
}
.staff-card{
    display: grid;
    grid-template-columns: minmax(150px, .85fr) minmax(0, 1.15fr);
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    background: #fff;
    border: 1px solid #e3e1da;
    transition: transform .25s ease, box-shadow .25s ease;
}
.staff-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(52, 57, 51, .1);
}
.staff-card-photo{
    margin: 0;
    overflow: hidden;
    background: #d7d8d4;
}
.staff-card-photo img,
.staff-card-photo .content-placeholder{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .4s ease;
}
.staff-card:hover .staff-card-photo img{
    transform: scale(1.03);
}
.staff-card-copy{
    padding: 26px 26px 28px;
}
.staff-card-position{
    margin-bottom: 8px;
    color: var(--key);
    font-size: 13px;
    letter-spacing: .08em;
}
.staff-card h3{
    margin-bottom: 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: .1em;
}
.staff-card-catch{
    min-height: 3.6em;
    margin-bottom: 22px;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}
.staff-card-more{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--key);
    font-size: 12px;
    letter-spacing: .08em;
}
.staff-card-more::after{
    width: 20px;
    border-top: 1px solid currentColor;
    content: "";
}
.staff-grid--representative{
    grid-template-columns: minmax(0, 860px);
}
.staff-grid--representative .staff-card{
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    align-items: center;
}
.staff-grid--representative .staff-card-photo img,
.staff-grid--representative .staff-card-photo .content-placeholder{
    aspect-ratio: 1 / 1;
}
.staff-grid--representative .staff-card-copy{
    padding: 40px clamp(32px, 5vw, 64px);
}
.staff-grid--representative .staff-card-catch{
    min-height: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
}
.staff-profile-hero{
    background: var(--beige-soft);
}
.staff-profile-hero-inner{
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}
.staff-profile-photo{
    margin: 0;
    background: #d7d8d4;
}
.staff-profile-photo img,
.staff-profile-photo .content-placeholder{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.staff-profile-position{
    margin-bottom: 10px;
    color: var(--key);
    font-size: 15px;
    letter-spacing: .1em;
}
.staff-profile-copy h1{
    margin-bottom: 6px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: .12em;
}
.staff-profile-kana{
    margin-bottom: 34px;
    color: #777;
    font-size: 12px;
    letter-spacing: .12em;
}
.staff-profile-catch{
    position: relative;
    margin: 34px 0 26px;
    padding-left: 22px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.8;
}
.staff-profile-catch::before{
    position: absolute;
    top: .3em;
    bottom: .3em;
    left: 0;
    border-left: 2px solid var(--key);
    content: "";
}
.staff-profile-text{
    line-height: 2;
}
.staff-profile-text p:last-child{
    margin-bottom: 0;
}
.staff-profile-data{
    margin-top: 34px;
    border-top: 1px solid #d6d3ca;
}
.staff-profile-data > div{
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    padding: 18px 0;
    border-bottom: 1px solid #d6d3ca;
}
.staff-profile-data dt{
    color: var(--key);
    font-size: 13px;
    letter-spacing: .08em;
}
.staff-profile-data dd{
    margin: 0;
}
.staff-message .width-s{
    position: relative;
    overflow: hidden;
    padding: clamp(38px, 6vw, 68px);
    background: #fff;
    border: 1px solid #d7e0d7;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(52, 57, 51, .08);
}
.staff-message .width-s::before{
    position: absolute;
    top: 12px;
    right: 30px;
    color: rgba(75, 112, 83, .1);
    content: "“";
    font-family: "Shippori Mincho", serif;
    font-size: 120px;
    line-height: 1;
    pointer-events: none;
}
.staff-message .width-s > *{
    position: relative;
    z-index: 1;
}
.staff-message h2{
    margin-bottom: 30px;
}
.staff-message-body{
    font-size: 16px;
    line-height: 2.1;
}
.staff-message-body p:last-child{
    margin-bottom: 0;
}
.staff-article-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}
.staff-article-grid .blog-card h3{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .08em;
}
.staff-articles-more{
    margin-top: 44px;
}
.staff-back{
    border-top: 1px solid #e0ddd4;
}

@media screen and (max-width: 900px){
    .staff-grid{
        grid-template-columns: 1fr;
    }
    .staff-article-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px){
    .staff-grid,
    .staff-article-grid{
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .staff-card,
    .staff-grid--representative .staff-card{
        display: block;
        grid-template-columns: 1fr;
    }
    .staff-grid--representative .staff-card-photo img,
    .staff-grid--representative .staff-card-photo .content-placeholder{
        aspect-ratio: 4 / 5;
    }
    .staff-grid--representative .staff-card-copy{
        padding: 26px 20px 28px;
    }
    .staff-card-copy{
        padding: 22px 20px 24px;
    }
    .staff-card-catch{
        min-height: 0;
    }
    .staff-profile-hero-inner{
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .staff-profile-photo{
        max-width: 420px;
    }
    .staff-profile-data > div{
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .staff-message .width-s{
        padding: 32px 24px;
        border-radius: 6px;
    }
    .staff-message .width-s::before{
        top: 10px;
        right: 18px;
        font-size: 88px;
    }
}

/* よくある質問 */
.faq-anchor-section{
    background: #f0f4ef;
}
.faq-anchor-nav{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.faq-anchor-nav a{
    min-height: 72px;
    background: rgba(255, 255, 255, .65);
}
.faq-group{
    scroll-margin-top: 80px;
}
.faq-group-inner{
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(50px, 8vw, 110px);
}
.faq-group-head{
    position: sticky;
    top: 100px;
}
.faq-group-head h2{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 400;
    line-height: 1.6;
}
.faq-list{
    border-top: 1px solid #d9d8d2;
}
.faq-item{
    border-bottom: 1px solid #d9d8d2;
}
.faq-item summary{
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 22px 8px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker{
    display: none;
}
.faq-letter{
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 25px;
    line-height: 1;
}
.faq-question{
    font-family: "Shippori Mincho", serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .06em;
}
.faq-toggle{
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #aebcaf;
    border-radius: 50%;
}
.faq-toggle::before,
.faq-toggle::after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    border-top: 1px solid var(--key);
    content: "";
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, transform .2s ease;
}
.faq-toggle::after{
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-toggle::after{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0);
}
.faq-answer{
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 24px;
    padding: 28px 40px 30px 22px;
    background: rgba(232, 239, 232, .65);
}
.faq-answer > div{
    font-size: 14px;
    line-height: 2;
}
.faq-answer p{
    margin-bottom: 14px;
}
.faq-answer p:last-child{
    margin-bottom: 0;
}
.faq-answer a{
    color: var(--key);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media screen and (max-width: 900px){
    .faq-group-inner{
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .faq-group-head{
        position: static;
    }
}

@media screen and (max-width: 768px){
    .faq-anchor-nav{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .faq-anchor-nav a{
        min-height: 68px;
    }
    .faq-item summary{
        grid-template-columns: 28px minmax(0, 1fr) 26px;
        gap: 10px;
        min-height: 76px;
        padding: 18px 4px;
    }
    .faq-question{
        font-size: 15px;
    }
    .faq-toggle{
        width: 26px;
        height: 26px;
    }
    .faq-answer{
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 18px;
        padding: 22px 18px;
    }
}

@media screen and (max-width: 520px){
    .faq-anchor-nav{
        grid-template-columns: 1fr;
    }
}

/* 固定ページ共通：数値・工程・詳細パネル */
.content-card-media--contain{
    padding: 24px;
    background: #f4f5f1;
    object-fit: contain;
}
.media-split-media--contain{
    padding: clamp(18px, 3vw, 34px);
    background: #f7f7f3;
}
.media-split-media--contain img{
    aspect-ratio: auto;
    object-fit: contain;
}
.stat-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.stat-grid--four{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-card{
    padding: 38px 24px 34px;
    background: #fff;
    border-top: 3px solid var(--key);
    box-shadow: 0 8px 20px rgba(52, 57, 51, .08);
    text-align: center;
}
.stat-label{
    margin-bottom: 16px;
    color: var(--key);
    font-size: 14px;
    letter-spacing: .1em;
}
.stat-value{
    margin-bottom: 14px;
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.35;
}
.stat-unit{
    margin-left: 3px;
    font-size: .55em;
}
.stat-caption{
    margin: 0;
    color: #666;
    font-size: 12px;
    line-height: 1.8;
}
.content-note{
    margin: 28px 0 0;
    color: #777;
    font-size: 12px;
    line-height: 1.8;
}
.process-timeline{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.process-step{
    position: relative;
    padding: 38px 28px 0 0;
    border-top: 1px solid #bfcbbf;
}
.process-step::before{
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--key);
    border-radius: 50%;
    content: "";
}
.process-step-num,
.feature-panel-num{
    margin-bottom: 18px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 22px;
    letter-spacing: .08em;
}
.process-step h3{
    margin-bottom: 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
}
.process-step div p{
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.9;
}
.detail-list{
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}
.detail-list li{
    position: relative;
    padding: 15px 0 15px 22px;
    border-top: 1px solid #d8d8d0;
    font-size: 14px;
    line-height: 1.8;
}
.detail-list li:last-child{
    border-bottom: 1px solid #d8d8d0;
}
.detail-list li::before{
    position: absolute;
    top: 1.75em;
    left: 2px;
    width: 7px;
    height: 7px;
    background: var(--key);
    border-radius: 50%;
    content: "";
}
.figure-frame{
    margin: 0;
    padding: clamp(20px, 4vw, 42px);
    background: #fff;
    box-shadow: 0 8px 20px rgba(52, 57, 51, .07);
}
.figure-frame img{
    display: block;
    width: 100%;
    height: auto;
}
.feature-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.feature-panel{
    padding: 32px 34px;
    background: #fff;
    border: 1px solid #dce2da;
}
.feature-panel-num{
    margin-bottom: 12px;
}
.feature-panel h3{
    margin-bottom: 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: .07em;
}
.feature-panel > p:last-child{
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.9;
}

@media screen and (max-width: 900px){
    .stat-grid,
    .stat-grid--four{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .process-timeline{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 0;
    }
}

@media screen and (max-width: 768px){
    .stat-grid,
    .stat-grid--four,
    .feature-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .stat-card{
        padding: 30px 20px 27px;
    }
    .process-timeline{
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .process-step{
        padding: 28px 0 0;
    }
    .feature-panel{
        padding: 26px 22px;
    }
    .content-card-media--contain{
        padding: 18px;
    }
}

/* 建て替え */
.rebuild-page{
    overflow: hidden;
    color: #252925;
}
.rebuild-hero{
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(390px, 42%);
    min-height: 680px;
    background: #f0eee8;
}
.rebuild-hero-photo{
    min-height: 680px;
}
.rebuild-hero-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rebuild-hero-copy{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 8vw, 120px) clamp(45px, 7vw, 105px);
}
.rebuild-hero-copy::before{
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: #b8c3b8;
    content: "";
}
.rebuild-hero-copy h2{
    margin-bottom: 32px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(32px, 4.4vw, 58px);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .09em;
}
.rebuild-hero-lead{
    margin-bottom: 22px;
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.9;
    letter-spacing: .07em;
}
.rebuild-hero-copy > p:last-child{
    margin: 0;
    color: #565b56;
    font-size: 14px;
    line-height: 2;
}
.rebuild-opening{
    padding: clamp(100px, 13vw, 180px) 0;
    text-align: center;
}
.rebuild-opening h2{
    margin-bottom: 38px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(29px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .1em;
}
.rebuild-opening p:not(.section-en){
    max-width: 710px;
    margin: 0 auto 18px;
    color: #555;
    font-size: 15px;
    line-height: 2.2;
}
.rebuild-choice{
    padding: clamp(85px, 10vw, 140px) 0;
    background: #eceae4;
}
.rebuild-section-head{
    margin-bottom: clamp(48px, 6vw, 75px);
}
.rebuild-section-head h2{
    margin-bottom: 22px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(27px, 3.8vw, 43px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .09em;
}
.rebuild-section-head > p:last-child{
    color: #5b605b;
    font-size: 14px;
    line-height: 2;
}
.rebuild-choice-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rebuild-choice-card{
    min-height: 540px;
    padding: clamp(42px, 6vw, 78px);
}
.rebuild-choice-card.is-rebuild{
    background: #385b40;
    color: #fff;
}
.rebuild-choice-card.is-renovation{
    background: #fff;
    color: #2d322e;
}
.rebuild-choice-label{
    margin-bottom: 30px;
    font-size: 12px;
    letter-spacing: .12em;
}
.rebuild-choice-card h3{
    margin-bottom: 40px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(23px, 2.8vw, 34px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .08em;
}
.rebuild-choice-card ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.rebuild-choice-card li{
    position: relative;
    padding: 14px 0 14px 24px;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: 14px;
    line-height: 1.8;
}
.rebuild-choice-card.is-renovation li{
    border-color: #deded8;
}
.rebuild-choice-card li:last-child{
    border-bottom: 1px solid rgba(255,255,255,.22);
}
.rebuild-choice-card.is-renovation li:last-child{
    border-color: #deded8;
}
.rebuild-choice-card li::before{
    position: absolute;
    top: 1.55em;
    left: 3px;
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
    content: "";
}
.rebuild-choice-card .more-link{
    margin-top: 28px;
}
.rebuild-questions{
    padding: clamp(90px, 11vw, 150px) 0;
    background: #213629;
    color: #fff;
}
.rebuild-section-head.is-light > p:last-child{
    color: rgba(255,255,255,.72);
}
.rebuild-questions .section-en{
    color: #afc6b3;
}
.rebuild-question-list{
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.24);
    list-style: none;
}
.rebuild-question-list li{
    display: grid;
    grid-template-columns: 90px minmax(260px, .9fr) minmax(300px, 1.1fr);
    align-items: center;
    gap: clamp(25px, 5vw, 75px);
    padding: 42px 0;
    border-bottom: 1px solid rgba(255,255,255,.24);
}
.rebuild-question-num{
    color: #a7bca9;
    font-family: "EB Garamond", serif;
    font-size: 31px;
}
.rebuild-question-title small,
.rebuild-journey-body small{
    display: block;
    margin-bottom: 8px;
    color: #a7bca9;
    font-family: "EB Garamond", serif;
    font-size: 11px;
    letter-spacing: .18em;
}
.rebuild-question-title h3{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .06em;
}
.rebuild-question-list li > p{
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 2;
}
.rebuild-cost{
    padding: clamp(90px, 11vw, 150px) 0;
    background: #f4f1ea;
}
.rebuild-cost-layout{
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(500px, 1.2fr);
    align-items: center;
    gap: clamp(50px, 8vw, 110px);
}
.rebuild-cost-intro h2{
    margin-bottom: 28px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 3.6vw, 43px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .08em;
}
.rebuild-cost-intro > p:not(.section-en){
    color: #585d58;
    font-size: 14px;
    line-height: 2;
}
.rebuild-cost-map{
    position: relative;
    width: min(100%, 600px);
    aspect-ratio: 1;
    margin-left: auto;
}
.rebuild-cost-map::before,
.rebuild-cost-map::after{
    position: absolute;
    inset: 12%;
    border: 1px solid #c9cec5;
    border-radius: 50%;
    content: "";
}
.rebuild-cost-map::after{
    inset: 25%;
}
.rebuild-cost-core,
.rebuild-cost-item{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
}
.rebuild-cost-core{
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 31%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: #385b40;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(17px, 2vw, 24px);
    line-height: 1.7;
    letter-spacing: .07em;
}
.rebuild-cost-item{
    z-index: 3;
    width: 24%;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #d5d8d1;
    box-shadow: 0 8px 20px rgba(45, 52, 45, .08);
}
.rebuild-cost-item strong{
    font-family: "Shippori Mincho", serif;
    font-size: clamp(14px, 1.6vw, 19px);
    font-weight: 500;
}
.rebuild-cost-item small{
    margin-top: 5px;
    color: #777;
    font-size: 10px;
}
.rebuild-cost-item.is-01{ top: 0; left: 38%; }
.rebuild-cost-item.is-02{ top: 25%; right: 1%; }
.rebuild-cost-item.is-03{ right: 10%; bottom: 5%; }
.rebuild-cost-item.is-04{ bottom: 5%; left: 10%; }
.rebuild-cost-item.is-05{ top: 25%; left: 1%; }
.rebuild-journey{
    padding: clamp(90px, 11vw, 150px) 0;
}
.rebuild-journey-list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.rebuild-journey-list li{
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 220px;
    gap: clamp(28px, 5vw, 70px);
    min-height: 190px;
}
.rebuild-journey-marker{
    position: relative;
    display: flex;
    justify-content: center;
}
.rebuild-journey-marker::after{
    position: absolute;
    top: 54px;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #bac7ba;
    content: "";
}
.rebuild-journey-list li:last-child .rebuild-journey-marker::after{
    display: none;
}
.rebuild-journey-marker span{
    position: relative;
    z-index: 1;
    display: grid;
    width: 54px;
    height: 54px;
    background: #385b40;
    border-radius: 50%;
    color: #fff;
    font-family: "EB Garamond", serif;
    font-size: 17px;
    place-items: center;
}
.rebuild-journey-body{
    padding: 4px 0 55px;
}
.rebuild-journey-body h3{
    margin-bottom: 15px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 500;
    letter-spacing: .08em;
}
.rebuild-journey-body p,
.rebuild-journey-note{
    margin: 0;
    color: #616661;
    font-size: 13px;
    line-height: 1.9;
}
.rebuild-journey-note{
    padding-top: 25px;
    border-top: 1px solid #d8dcd5;
}
.rebuild-journey-note a{
    color: var(--key);
    border-bottom: 1px solid currentColor;
}
.rebuild-journey-more{
    margin-top: 25px;
    text-align: center;
}
.rebuild-promise{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 650px;
    background: #385b40;
    color: #fff;
}
.rebuild-promise-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rebuild-promise-copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 9vw, 130px);
}
.rebuild-promise-copy .section-en{
    color: #bed0c1;
}
.rebuild-promise-copy h2{
    margin-bottom: 34px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(29px, 4vw, 49px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .1em;
}
.rebuild-promise-copy > p:not(.section-en){
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 2;
}

@media screen and (max-width: 1000px){
    .rebuild-hero{
        grid-template-columns: 1.15fr .85fr;
    }
    .rebuild-hero-copy{
        padding: 60px 40px;
    }
    .rebuild-cost-layout{
        grid-template-columns: 1fr;
    }
    .rebuild-cost-intro{
        max-width: 680px;
    }
    .rebuild-cost-map{
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px){
    .rebuild-hero{
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .rebuild-hero-photo{
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .rebuild-hero-copy{
        padding: 50px 7.5% 65px;
    }
    .rebuild-hero-copy::before{
        top: 0;
        right: 7.5%;
        bottom: auto;
        left: 7.5%;
        width: auto;
        height: 1px;
    }
    .rebuild-opening{
        text-align: left;
    }
    .rebuild-choice-grid{
        grid-template-columns: 1fr;
    }
    .rebuild-choice-card{
        min-height: 0;
        padding: 42px 28px;
    }
    .rebuild-question-list li{
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px 20px;
        padding: 32px 0;
    }
    .rebuild-question-list li > p{
        grid-column: 2;
    }
    .rebuild-cost-layout{
        grid-template-columns: 1fr;
    }
    .rebuild-cost-map{
        width: 100%;
    }
    .rebuild-cost-item{
        width: 27%;
    }
    .rebuild-cost-item small{
        display: none;
    }
    .rebuild-journey-list li{
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 20px;
        min-height: 0;
    }
    .rebuild-journey-marker{
        justify-content: flex-start;
    }
    .rebuild-journey-marker::after{
        left: 27px;
    }
    .rebuild-journey-body{
        padding-bottom: 42px;
    }
    .rebuild-journey-note{
        display: none;
    }
    .rebuild-promise{
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .rebuild-promise-photo{
        aspect-ratio: 4 / 3;
    }
    .rebuild-promise-copy{
        padding: 60px 7.5% 70px;
    }
}

/* 固定ページ共通：年表・記録リスト */
.record-list{
    display: grid;
    gap: 0;
}
.record-item{
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
    gap: clamp(24px, 4vw, 56px);
    padding: 42px 0;
    border-top: 1px solid #d8dcd5;
}
.record-item:last-child{
    border-bottom: 1px solid #d8dcd5;
}
.record-year{
    margin: 0;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 28px;
    letter-spacing: .06em;
}
.record-category{
    margin-bottom: 10px;
    color: var(--key);
    font-size: 12px;
    letter-spacing: .16em;
}
.record-body h3{
    margin-bottom: 16px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .06em;
}
.record-body p{
    margin-bottom: 14px;
    color: #555;
    font-size: 13px;
    line-height: 1.95;
}
.record-body p:last-child{
    margin-bottom: 0;
}
.record-media{
    margin: 0;
    overflow: hidden;
    background: #eceee8;
}
.record-media img{
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.record-media--contain{
    background: #fff;
    padding: 12px;
}
.record-media--contain img{
    aspect-ratio: 3 / 4;
    object-fit: contain;
}
.record-media--fit img{
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

@media screen and (max-width: 768px){
    .record-item{
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px 18px;
        padding: 32px 0;
    }
    .record-year{
        font-size: 22px;
    }
    .record-media{
        grid-column: 1 / -1;
        margin-top: 12px;
    }
}

/* 商品ラインナップ（個別ページ） */
.lineup-spec{
    margin: 0 0 40px;
    background: #fff;
}
.lineup-spec-row{
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 12px 28px;
    padding: 28px 32px;
    border-bottom: 1px solid #ece8de;
}
.lineup-spec-row:last-child{
    border-bottom: none;
}
.lineup-spec dt{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 16px;
    letter-spacing: .12em;
}
.lineup-spec dd{
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
}
.lineup-spec-section .lineup-product-head > p:last-child,
.lineup-product-hero-copy .lineup-product-lead{
    font-size: clamp(16px, 1.7vw, 20px);
}
.lineup-spec-notes{
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.lineup-spec-notes li{
    position: relative;
    padding-left: 1.2em;
    color: #555;
    font-size: 16px;
    line-height: 1.9;
}
.lineup-spec-notes li::before{
    content: "※";
    position: absolute;
    left: 0;
}
.lineup-product{
    background: #fff;
    color: #2f332f;
}
.lineup-product-hero{
    padding: 0 0 8px;
    background: #f4f1ea;
}
.lineup-product-hero-media{
    margin: 0;
    height: min(480px, 52vh);
    overflow: hidden;
}
.lineup-product-hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lineup-product-hero-panel{
    position: relative;
    z-index: 1;
    margin-top: -108px;
}
.lineup-product-hero-copy{
    width: min(560px, 100%);
    padding: 36px 40px 40px;
    background: #fff;
    border-top: 3px solid var(--key);
    box-shadow: 0 18px 40px rgba(52, 57, 51, .08);
}
.lineup-product-label{
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    color: #7a766c;
    font-size: 12px;
    letter-spacing: .22em;
}
.lineup-product-hero-copy h1{
    margin: 0 0 16px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .12em;
}
.lineup-product-lead{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.9;
    letter-spacing: .08em;
}
.lineup-glance{
    padding: 56px 0 clamp(80px, 10vw, 120px);
    background: #f4f1ea;
}
.lineup-glance-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.lineup-glance-card-price{
    grid-column: span 4;
}
.lineup-glance-grid > .lineup-glance-card:nth-child(2){
    grid-column: span 2;
}
.lineup-glance-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
    padding: 28px 32px;
    background: #fff;
    border-top: 3px solid var(--key);
}
.lineup-glance-card-point{
    grid-column: span 2;
    min-height: 0;
}
.lineup-glance-label{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
    color: #8a857c;
    font-family: "EB Garamond", serif;
    font-size: 13px;
    letter-spacing: .22em;
}
.lineup-glance-label span{
    color: var(--key);
    font-size: 18px;
}
.lineup-glance-value{
    margin: 0;
    color: var(--key);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.4;
}
.lineup-glance-note,
.lineup-glance-text{
    margin: 12px 0 0;
    color: #555;
    font-size: 15px;
    line-height: 1.9;
}
.lineup-concept{
    padding: clamp(80px, 10vw, 130px) 0;
    background: #fff;
}
.lineup-concept-inner{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
}
.lineup-concept-media{
    margin: 0;
}
.lineup-concept-media img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lineup-concept-copy{
    position: relative;
    z-index: 1;
    margin-left: -72px;
    padding: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 56px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(52, 57, 51, .08);
}
.lineup-concept-copy h2{
    margin-bottom: 24px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .1em;
}
.lineup-concept-copy > p:not(.section-en){
    margin: 0 0 16px;
    color: #555;
    font-size: 16px;
    line-height: 2;
}
.lineup-concept-copy > p:last-child{
    margin-bottom: 0;
}
.lineup-features{
    padding: clamp(80px, 10vw, 130px) 0;
    background: #f4f1ea;
}
.lineup-feature-list{
    display: grid;
    gap: 28px;
}
.lineup-feature-row{
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    background: #fff;
}
.lineup-feature-row.is-reverse figure{
    order: 2;
}
.lineup-feature-row figure{
    margin: 0;
}
.lineup-feature-row img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.lineup-feature-row-copy{
    padding: clamp(28px, 4vw, 56px);
}
.lineup-feature-row-num{
    margin: 0 0 12px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 28px;
    letter-spacing: .08em;
    line-height: 1;
}
.lineup-feature-row-copy h3{
    margin: 0 0 16px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.6;
}
.lineup-feature-row-copy > p:last-child{
    margin: 0;
    color: #555;
    font-size: 16px;
    line-height: 2;
}
.lineup-plan{
    padding: clamp(80px, 10vw, 130px) 0;
    background: #fff;
}
.lineup-plan-layout{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 36px;
    align-items: start;
}
.lineup-plan-figure{
    margin: 0;
    padding: 20px;
    background: #f7f5f0;
    border: 1px solid #e6e1d6;
}
.lineup-plan-figure svg{
    display: block;
    width: 100%;
    height: auto;
}
.lineup-plan-figure text{
    fill: #2f332f;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    letter-spacing: .08em;
}
.lineup-plan-figure figcaption{
    margin-top: 12px;
    color: #6d6a62;
    font-size: 13px;
    letter-spacing: .08em;
}
.lineup-plan-facts{
    margin: 0;
    background: #fff;
    border-top: 1px solid #e6e1d6;
}
.lineup-plan-facts div{
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid #e6e1d6;
}
.lineup-plan-facts dt{
    margin: 0;
    color: #8a857c;
    font-size: 14px;
    letter-spacing: .14em;
}
.lineup-plan-facts dd{
    margin: 0;
    font-family: "Shippori Mincho", serif;
    font-size: 26px;
    letter-spacing: .06em;
}
.lineup-plan-facts small{
    display: block;
    margin-top: 4px;
    color: #777;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .06em;
}
.lineup-plan-changes{
    margin-top: 28px;
}
.lineup-plan-changes h3{
    margin: 0 0 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .12em;
}
.lineup-plan-changes ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.lineup-plan-changes li{
    position: relative;
    padding: 10px 0 10px 1.4em;
    border-bottom: 1px solid #ece8de;
    font-size: 16px;
    line-height: 1.7;
}
.lineup-plan-changes li::before{
    content: "";
    position: absolute;
    top: 1.15em;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--key);
}
.lineup-plan-changes > p{
    margin: 14px 0 0;
    color: #666;
    font-size: 14px;
    line-height: 1.9;
}
.lineup-spec-section{
    background: #f4f1ea;
}
.lineup-product-head{
    max-width: 760px;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.lineup-product-head h2{
    margin-bottom: 18px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .1em;
}
.lineup-product-head > p:last-child{
    margin: 0;
    color: #5c615c;
    font-size: 14px;
    line-height: 2;
}
.lineup-product-points{
    padding: clamp(80px, 10vw, 130px) 0;
    background: var(--beige-soft);
}
.page-intro .page-intro-lineup{
    justify-content: center;
    margin-bottom: 14px;
}
.lineup-product--pet .lineup-product-points{
    padding-top: clamp(48px, 6vw, 72px);
    margin-bottom: 80px;
}
.lineup-product-point-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #cfc9bb;
}
.lineup-product-point-list li{
    padding: 32px 28px 8px 0;
    border-right: 0;
}
.lineup-product-point-list li + li{
    padding-left: 28px;
    border-left: 1px solid #cfc9bb;
}
.lineup-product-point-num{
    display: block;
    margin-bottom: 18px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 28px;
    letter-spacing: .08em;
}
.lineup-product-point-list small{
    display: block;
    margin-bottom: 10px;
    color: #8a857c;
    font-family: "EB Garamond", serif;
    font-size: 12px;
    letter-spacing: .22em;
}
.lineup-product-point-list h3{
    margin-bottom: 14px;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .12em;
}
.lineup-product-point-list p{
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.95;
}
.lineup-product-block{
    padding: 0 0 clamp(80px, 10vw, 130px);
}
.lineup-product-block-inner{
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 0;
}
.lineup-product-block.is-reverse .lineup-product-block-media{
    order: 2;
}
.lineup-product-block-media{
    margin: 0;
}
.lineup-product-block-media img{
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.lineup-product-block-copy{
    position: relative;
    z-index: 1;
    margin-left: -72px;
    padding: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 56px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(52, 57, 51, .08);
}
.lineup-product-block.is-reverse .lineup-product-block-copy{
    margin-left: 0;
    margin-right: -72px;
}
.lineup-product-block-copy h2{
    margin-bottom: 24px;
    font-family: "Shippori Mincho", serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .08em;
}
.lineup-product-block-copy > p:not(.section-en){
    margin-bottom: 16px;
    color: #555;
    font-size: 14px;
    line-height: 2;
}
.lineup-product-types{
    padding: clamp(80px, 10vw, 130px) 0;
    background: #ece8df;
}
.lineup-product-type-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.lineup-product-type{
    min-height: 280px;
    padding: 42px 40px;
    background: #fff;
    border-top: 3px solid var(--key);
}
.lineup-product-type-label{
    margin-bottom: 18px;
    color: var(--key);
    font-family: "EB Garamond", serif;
    font-size: 13px;
    letter-spacing: .22em;
}
.lineup-product-type h3{
    margin-bottom: 18px;
    font-family: "Shippori Mincho", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .14em;
}
.lineup-product-type p{
    margin-bottom: 16px;
    color: #555;
    font-size: 14px;
    line-height: 2;
}
.lineup-product-type p:last-child{
    margin-bottom: 0;
}
.lineup-product-gallery{
    padding: clamp(80px, 10vw, 130px) 0;
}
.lineup-product-gallery-grid{
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr;
    gap: 18px;
}
.lineup-product-gallery-grid figure{
    margin: 0;
}
.lineup-product-gallery-grid img{
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #e4e0d6;
}
.lineup-product-gallery-grid figure:first-child img{
    aspect-ratio: 4 / 5.15;
}
.lineup-product-gallery-grid figcaption{
    margin-top: 12px;
    color: #6d6a62;
    font-size: 12px;
    letter-spacing: .12em;
}
.lineup-spec-photos .lineup-product-gallery-grid.is-two{
    grid-template-columns: 1fr 1fr;
}
.lineup-spec-photos .lineup-product-gallery-grid.is-one{
    grid-template-columns: minmax(0, 720px);
}
.lineup-spec-photos .lineup-product-gallery-grid.is-one img{
    aspect-ratio: 4 / 3;
}
.lineup-spec-photos .lineup-product-gallery-grid figcaption{
    font-size: 16px;
    letter-spacing: .08em;
}
.lineup-product-nav{
    padding: 0 0 clamp(70px, 8vw, 110px);
}
.lineup-product-nav-list{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.lineup-product-nav-item{
    display: block;
    color: inherit;
    background: #fff;
}
.lineup-product-nav-item img{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.lineup-product-nav-item span{
    display: block;
    padding: 16px 16px 18px;
}
.lineup-product-nav-item small{
    display: block;
    margin-bottom: 6px;
    color: #8a857c;
    font-family: "EB Garamond", serif;
    font-size: 11px;
    letter-spacing: .18em;
}
.lineup-product-nav-item strong{
    display: block;
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
}
.lineup-product-nav-more{
    margin: 28px 0 0;
    text-align: center;
}

@media screen and (max-width: 1100px){
    .lineup-glance-card-price,
    .lineup-glance-grid > .lineup-glance-card:nth-child(2){
        grid-column: span 3;
    }
    .lineup-concept-inner,
    .lineup-feature-row,
    .lineup-plan-layout{
        grid-template-columns: 1fr;
    }
    .lineup-concept-copy{
        margin-left: 0;
    }
    .lineup-feature-row.is-reverse figure{
        order: 0;
    }
    .lineup-product-nav-list{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px){
    .lineup-spec-row{
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 22px 20px;
    }
    .lineup-product-hero{
        padding-bottom: 0;
    }
    .lineup-product-hero-media{
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .lineup-product-hero-panel{
        width: 90%;
        margin-top: -40px;
    }
    .lineup-product-hero-copy{
        width: 100%;
        padding: 28px 22px 32px;
    }
    .lineup-glance{
        padding-top: 28px;
    }
    .lineup-glance-card-price,
    .lineup-glance-grid > .lineup-glance-card:nth-child(2),
    .lineup-glance-card-point{
        grid-column: 1 / -1;
    }
    .lineup-glance-card{
        min-height: 0;
        padding: 24px 22px;
    }
    .lineup-concept,
    .lineup-features,
    .lineup-plan{
        padding: 64px 0;
    }
    .lineup-concept-copy,
    .lineup-feature-row-copy{
        padding: 28px 22px 32px;
    }
    .lineup-plan-facts div{
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .lineup-product-nav-list{
        grid-template-columns: 1fr;
    }
    .lineup-product > .page-intro{
        padding: 48px 0 36px;
    }
    .lineup-product > .page-intro .page-intro-text{
        font-size: 15px;
        line-height: 2;
        letter-spacing: .06em;
    }
    .lineup-product-points,
    .lineup-product-types,
    .lineup-product-gallery{
        padding: 64px 0;
    }
    .lineup-product--pet .lineup-product-points{
        padding-top: 40px;
        margin-bottom: 48px;
    }
    .lineup-product-head{
        margin-bottom: 32px;
    }
    .lineup-product-head h2{
        font-size: 22px;
        letter-spacing: .08em;
    }
    .lineup-product-point-list{
        grid-template-columns: 1fr;
    }
    .lineup-product-point-list li{
        padding: 24px 0 20px;
    }
    .lineup-product-point-list li + li{
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #cfc9bb;
        padding-top: 24px;
    }
    .lineup-product-point-list p{
        font-size: 14px;
    }
    .lineup-product-block{
        padding-bottom: 64px;
    }
    .lineup-product-block-inner{
        grid-template-columns: 1fr;
    }
    .lineup-product-block.is-reverse .lineup-product-block-media{
        order: 0;
    }
    .lineup-product-block-copy,
    .lineup-product-block.is-reverse .lineup-product-block-copy{
        margin-left: 0;
        margin-right: 0;
        padding: 28px 0 0;
        box-shadow: none;
    }
    .lineup-product-block-copy h2{
        font-size: 22px;
        margin-bottom: 20px;
    }
    .lineup-product-type-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lineup-product-type{
        min-height: 0;
        padding: 28px 22px;
    }
    .lineup-product-type h3{
        font-size: 22px;
    }
    .lineup-product-gallery-grid{
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .lineup-product-gallery-grid img,
    .lineup-product-gallery-grid figure:first-child img{
        aspect-ratio: 4 / 3;
    }
    .lineup-product .sk-subnav ul{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lineup-product .sk-subnav a{
        min-height: 76px;
        padding: 12px 14px;
    }
    .lineup-product .sk-subnav b{
        font-size: 15px;
    }
}


/* 下層16ページ（20260926） */
:root {
    --text: #222;
    --text-2: #555;
    --text-3: #666;
    --line: #d8d8d0;
    --line-light: #e3e1da;
    --line-header: #f1f1f4;
    --green-soft: #f0f4ef;
    --green-pale: #e8efe8;
    --green-line: #bfcbbf;
    --overlay: rgba(28, 24, 20, .58);
    --shadow-card: 0 12px 30px rgba(52, 57, 51, .09);
    --key-deep: #3f6f47;
    --error: #b3261e;
    --tbc-bg: #fff4d6;
    --tbc-line: #c98a00;
    --font-sans: "游ゴシック体", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
    --font-mincho: "Shippori Mincho", serif;
    --font-en: "EB Garamond", serif;
}
.content-section {
    scroll-margin-top: 80px;
}
.page-intro-text + .page-intro-text {
    margin-top: 1.2em;
}
.page-intro .content-note {
    text-align: center;
}
.content-note + .content-note {
    margin-top: 4px;
}
.section-heading.is-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.f-btn.is-fill {
    background: var(--key-deep);
    border-color: var(--key-deep);
    color: #fff;
}
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.btn-row.is-center {
    justify-content: center;
}
@media screen and (min-width: 768px) {
    .f-btn.is-fill:hover {
        background: #fff;
        color: var(--key-deep);
    }
}
@media screen and (max-width: 768px) {
    .page-intro-text:has(+ .page-intro-text),
    .page-intro-text + .page-intro-text,
    .page-intro-text + .page-intro-text ~ .content-note,
    .page-intro .content-note {
        text-align: left;
    }
    .btn-row .f-btn {
        width: 100%;
    }
}
@media screen and (min-width: 901px) {
    .feature-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .process-timeline--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .process-timeline--7 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .standard-spec-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media screen and (min-width: 1101px) {
    .process-timeline--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .standard-spec-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media screen and (min-width: 901px) and (max-width: 1100px) {
    .process-timeline--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.process-step-term {
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 10px;
    border: 1px solid var(--green-line);
    border-radius: 30px;
    color: var(--key-deep);
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 1.6;
}
.page-ako .width-800 > p:not(.content-note) + p:not(.content-note),
.page-demolition .width-800 > p:not(.content-note) + p:not(.content-note),
.page-exterior .width-800 > p:not(.content-note) + p:not(.content-note),
.page-inheritance .width-800 > p:not(.content-note) + p:not(.content-note),
.page-lifeplan .width-800 > p:not(.content-note) + p:not(.content-note),
.page-migration .width-800 > p:not(.content-note) + p:not(.content-note),
.page-real-estate .width-800 > p:not(.content-note) + p:not(.content-note),
.page-recruit .width-800 > p:not(.content-note) + p:not(.content-note),
.page-renovation .width-800 > p:not(.content-note) + p:not(.content-note),
.page-retaining-wall .width-800 > p:not(.content-note) + p:not(.content-note),
.page-roof .width-800 > p:not(.content-note) + p:not(.content-note),
.page-soundproof .width-800 > p:not(.content-note) + p:not(.content-note),
.page-store .width-800 > p:not(.content-note) + p:not(.content-note),
.page-subsidy .width-800 > p:not(.content-note) + p:not(.content-note),
.page-used-home .width-800 > p:not(.content-note) + p:not(.content-note),
.page-yumematsuri .width-800 > p:not(.content-note) + p:not(.content-note) {
    margin-top: 1em;
}
.detail-list--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}
.detail-list--two li:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--line);
}
@media screen and (max-width: 900px) {
    .feature-grid--three,
    .standard-spec-grid--three {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .detail-list--two {
        grid-template-columns: 1fr;
    }
    .detail-list--two li:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }
}

/* ==========================================================================
   50 sk- components（今回追加する部品）
   ========================================================================== */

/* 画像プレースホルダ（画像未着・生成前）。data-img に画像IDを入れる -------------- */
.sk-ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; background: #d7d8d4; color: #4f524d; font-size: 12px; letter-spacing: .08em; text-align: center; padding: 12px; }
.sk-ph::before { content: attr(data-img); font-family: var(--font-en); font-size: 14px; }
.sk-ph.is-square { aspect-ratio: 1 / 1; }
.sk-ph.is-wide { aspect-ratio: 16 / 9; }

/* 【要確認】マーカー（公開前に0件にする） ----------------------------------------- */
.sk-tbc { background: var(--tbc-bg); outline: 1px dashed var(--tbc-line); padding: 0 .2em; }
.sk-tbc::before { content: "【要確認】"; color: #8a5a00; font-size: .85em; font-weight: 700; }

/* 悩み（こんなお悩みありませんか） --------------------------------------------- */
.sk-worry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.sk-worry-list li { position: relative; padding: 26px 24px 26px 56px; background: #fff; border: 1px solid var(--line-light); font-size: 15px; line-height: 1.8; letter-spacing: .04em; }
.sk-worry-list li::before { content: ""; position: absolute; top: 30px; left: 22px; width: 18px; height: 18px; border: 1px solid var(--key); border-radius: 3px; }
.sk-worry-list li::after { content: ""; position: absolute; top: 32px; left: 28px; width: 6px; height: 11px; border-right: 2px solid var(--key-deep); border-bottom: 2px solid var(--key-deep); transform: rotate(45deg); }
.sk-worry-answer { max-width: 760px; margin: 48px auto 0; text-align: center; font-family: var(--font-mincho); font-size: clamp(18px, 2vw, 24px); line-height: 2; letter-spacing: .08em; }
.sk-worry-answer::before { content: ""; display: block; width: 0; height: 0; margin: 0 auto 28px; border-style: solid; border-width: 16px 22px 0; border-color: var(--key) transparent transparent; }
@media screen and (max-width: 900px) { .sk-worry-list { grid-template-columns: 1fr; gap: 10px; } }
@media screen and (max-width: 768px) { .sk-worry-list li { padding: 18px 16px 18px 50px; } .sk-worry-list li::before { top: 22px; left: 18px; } .sk-worry-list li::after { top: 24px; left: 24px; } }

/* 価格の目安（レンジ表示の表） -------------------------------------------------- */
.sk-price-wrap { max-width: 960px; margin: 0 auto; }
.sk-price { width: 100%; background: #fff; border-top: 2px solid var(--key); }
.sk-price caption { margin-bottom: 14px; font-family: var(--font-mincho); font-size: 18px; letter-spacing: .08em; }
.sk-price th, .sk-price td { padding: 20px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; vertical-align: middle; }
.sk-price thead th { background: var(--beige-soft); font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: .08em; }
.sk-price tbody th { width: 34%; font-weight: 500; }
.sk-price .sk-price-value { font-family: var(--font-mincho); font-size: 20px; font-weight: 600; color: var(--key-deep); white-space: nowrap; }
.sk-price .sk-price-value small { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.sk-price-notes { margin-top: 20px; padding: 20px 24px; background: var(--beige-soft); font-size: 13px; line-height: 1.9; }
.sk-price-notes dt { margin-bottom: 4px; font-size: 13px; color: var(--key-deep); }
.sk-price-notes dd + dt { margin-top: 12px; }
/* 価格表の中の【要確認】：金額の明朝・大きさを引き継がず、小さく読みやすく */
.sk-price .sk-tbc { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.7; }
.sk-price .sk-tbc::before { font-size: 11px; }
.sk-price td .sk-tbc { display: inline-block; }
@media screen and (max-width: 768px) {
  .sk-price thead { display: none; }
  .sk-price tr { display: block; padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .sk-price th, .sk-price td { display: block; width: auto !important; padding: 2px 0; border: 0; }
  .sk-price tbody th { font-size: 15px; }
  .sk-price td[data-label]::before { content: attr(data-label) "："; color: var(--text-3); font-size: 12px; }
  .sk-price-notes { padding: 16px; }
}

/* Before / After ------------------------------------------------------------ */
.sk-ba { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: center; gap: 12px; }
.sk-ba figure { position: relative; margin: 0; }
.sk-ba img, .sk-ba .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-ba-label { position: absolute; top: 0; left: 0; padding: 4px 14px; background: rgba(28, 26, 23, .78); color: #fff; font-family: var(--font-en); font-size: 13px; letter-spacing: .2em; }
.sk-ba figure.is-after .sk-ba-label { background: var(--key-deep); }
.sk-ba-arrow { width: 0; height: 0; margin: 0 auto; border-style: solid; border-width: 12px 0 12px 16px; border-color: transparent transparent transparent var(--key); }
.sk-ba-caption { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; color: var(--text-2); }
.sk-ba-list { display: grid; gap: 56px; }
.sk-ba-item h3 { margin-bottom: 6px; font-size: 20px; letter-spacing: .08em; }
.sk-ba-item .case-study-meta { margin-bottom: 16px; }
@media screen and (max-width: 768px) {
  .sk-ba { grid-template-columns: 1fr; gap: 8px; }
  .sk-ba-arrow { border-width: 14px 12px 0; border-color: var(--key) transparent transparent; }
  .sk-ba-list { gap: 40px; }
}

/* 動画（自前mp4／YouTube） -------------------------------------------------- */
.sk-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1c1a17; }
.sk-video.is-placeholder { background: #d7d8d4; }
.sk-video video, .sk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; background: #000; }
.sk-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.sk-video-item figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.sk-video-item figcaption b { display: block; font-family: var(--font-mincho); font-size: 17px; font-weight: 500; letter-spacing: .06em; }
.sk-video-item figcaption span { color: var(--text-3); font-size: 13px; }
@media screen and (max-width: 768px) { .sk-video-grid { grid-template-columns: 1fr; } }

/* 3択CTA（相談する／現地を見てもらう／事務所に来る）＋電話 ------------------------ */
.sk-cta3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.sk-cta3-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px 28px; background: #fff; border: 1px solid var(--line-light); text-align: center; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sk-cta3-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--key); }
.sk-cta3-item.is-primary { border-top: 3px solid var(--key); }
.sk-cta3-en { color: var(--key-deep); font-family: var(--font-en); font-size: 13px; letter-spacing: .24em; }
.sk-cta3-title { font-family: var(--font-mincho); font-size: 20px; font-weight: 500; letter-spacing: .1em; }
.sk-cta3-text { color: var(--text-2); font-size: 13px; line-height: 1.8; }
.sk-cta3-go { margin-top: 6px; padding: 10px 22px; background: var(--key-deep); color: #fff; font-size: 14px; letter-spacing: .1em; }
.sk-tel { margin-top: 36px; text-align: center; }
.sk-tel-label { font-size: 14px; letter-spacing: .12em; }
.sk-tel-num { display: inline-block; margin: 4px 0; font-family: var(--font-en); font-size: clamp(34px, 4.5vw, 48px); font-weight: 500; letter-spacing: .04em; line-height: 1.2; color: var(--text); }
.sk-tel-hours { color: var(--text-3); font-size: 13px; }
.sk-reassure { margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-2); }
@media screen and (max-width: 768px) { .sk-cta3 { grid-template-columns: 1fr; gap: 10px; } .sk-cta3-item { padding: 22px 16px; } }

/* 数字で見る（大きな数字＋単位＋出典） ------------------------------------------ */
.sk-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk-stat-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-stat { padding: 28px 20px 24px; background: #fff; border: 1px solid var(--line-light); text-align: center; }
.sk-stat-label { font-size: 14px; letter-spacing: .06em; color: var(--text-2); }
.sk-stat-value { margin: 6px 0; font-family: var(--font-en); font-size: clamp(40px, 5vw, 56px); font-weight: 500; line-height: 1.1; color: var(--key-deep); }
.sk-stat-value small { margin-left: 4px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text); }
.sk-stat-note { color: var(--text-3); font-size: 12px; line-height: 1.7; }
.sk-stat-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 【要確認】ラベルが大きな数字と同じサイズにならないように（数字・数値カードの中） */
.sk-stat-value .sk-tbc, .standard-spec-value .sk-tbc { display: inline-block; padding: 2px 8px 4px; line-height: 1.2; }
.sk-stat-value .sk-tbc::before, .standard-spec-value .sk-tbc::before { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
/* 2列になる幅では、奇数個の最後の1枚を横いっぱいにして「1枚だけ余る」見え方を防ぐ */
@media screen and (max-width: 1100px) {
  .sk-stat-grid:not(.sk-stat-grid--three):not(.sk-stat-grid--five) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-stat-grid:not(.sk-stat-grid--three):not(.sk-stat-grid--five) > .sk-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sk-stat-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 768px) {
  .sk-stat-grid, .sk-stat-grid--three, .sk-stat-grid--five { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sk-stat-grid > .sk-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sk-stat { padding: 20px 10px; }
}
@media screen and (max-width: 400px) { .sk-stat-grid, .sk-stat-grid--three, .sk-stat-grid--five { grid-template-columns: 1fr; } }

/* 表（募集要項・会社情報・開催概要など。th/td の2列） ------------------------------- */
.sk-table { width: 100%; border-top: 1px solid var(--line); }
.sk-table th, .sk-table td { padding: 20px 16px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.9; }
.sk-table th { width: 24%; min-width: 120px; background: var(--beige-soft); font-weight: 500; letter-spacing: .06em; }
.sk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sk-table-scroll:focus-visible { outline: 2px solid var(--key-deep); }
@media screen and (max-width: 768px) {
  .sk-table th, .sk-table td { display: block; width: 100%; padding: 12px 14px; }
  .sk-table th { border-bottom: 0; }
}

/* エリア・スポット（赤穂で暮らす：番号付きトピック／エリア一覧） ------------------ */
.sk-topic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.sk-topic + .sk-topic { margin-top: 96px; }
.sk-topic.is-reverse .sk-topic-media { order: 2; }
.sk-topic-num { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; color: var(--key-deep); font-family: var(--font-en); letter-spacing: .2em; }
.sk-topic-num b { font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.sk-topic-num span { font-size: 14px; text-transform: uppercase; }
.sk-topic h3 { margin-bottom: 20px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.6; }
.sk-topic-media img, .sk-topic-media .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-topic-media figcaption { margin-top: 8px; font-size: 12px; color: var(--text-3); }
.sk-topic-copy > p + p:not(.sk-source) { margin-top: 1em; }
.sk-source { margin-top: 12px; color: var(--text-3); font-size: 12px; line-height: 1.7; }
.sk-area-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-area-list li { padding: 8px 18px; background: #fff; border: 1px solid var(--green-line); border-radius: 30px; font-size: 14px; letter-spacing: .06em; }
.sk-area-list li.is-main { background: var(--key-deep); border-color: var(--key-deep); color: #fff; }
.sk-area-group + .sk-area-group { margin-top: 24px; }
.sk-area-group h3 { margin-bottom: 12px; font-size: 16px; font-family: var(--font-sans); font-weight: 700; letter-spacing: .08em; }
@media screen and (max-width: 768px) {
  .sk-topic { grid-template-columns: 1fr; gap: 20px; }
  .sk-topic + .sk-topic { margin-top: 56px; }
  .sk-topic.is-reverse .sk-topic-media { order: 0; }
  .sk-topic-num b { font-size: 44px; }
}

/* イベント・相談会の開催情報カード ------------------------------------------------ */
.sk-event { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: #fff; border: 1px solid var(--line-light); }
.sk-event-media img, .sk-event-media .sk-ph { width: 100%; height: 100%; min-height: 260px; object-fit: cover; aspect-ratio: auto; }
.sk-event-body { padding: 36px 40px; }
.sk-event-status { display: inline-block; margin-bottom: 12px; padding: 3px 14px; border-radius: 30px; background: var(--key-deep); color: #fff; font-size: 12px; letter-spacing: .1em; }
.sk-event-status.is-closed { background: #666; }
.sk-event-status + .sk-tbc { display: inline-block; margin: 0 0 12px 4px; font-size: 13px; line-height: 1.7; vertical-align: top; }
.sk-event-title { margin-bottom: 18px; font-family: var(--font-mincho); font-size: 22px; font-weight: 500; letter-spacing: .08em; line-height: 1.6; }
.sk-event-meta { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px 12px; font-size: 14px; line-height: 1.8; }
.sk-event-meta dt { color: var(--key-deep); font-weight: 500; }
.yume-event-text{margin: 20px;}
@media screen and (max-width: 768px) { .sk-event { grid-template-columns: 1fr; } .sk-event-media img, .sk-event-media .sk-ph { min-height: 0; aspect-ratio: 3 / 2; } .sk-event-body { padding: 24px 20px; } }

/* 連携スキーム図（相続・家族信託：お客様⇄栄建築⇄士業） -------------------------- */
.sk-scheme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; max-width: 1000px; margin: 0 auto; }
.sk-scheme-node { position: relative; padding: 28px 22px; background: #fff; border: 1px solid var(--line-light); text-align: center; }
.sk-scheme-node.is-center { background: var(--key-deep); border-color: var(--key-deep); color: #fff; }
.sk-scheme-node + .sk-scheme-node { margin-left: 40px; }
.sk-scheme-node + .sk-scheme-node::before { content: "⇄"; position: absolute; top: 50%; left: -34px; transform: translateY(-50%); color: var(--key-deep); font-size: 24px; }
.sk-scheme-node h3 { margin-bottom: 10px; font-size: 18px; letter-spacing: .08em; }
.sk-scheme-node p { font-size: 13px; line-height: 1.8; }
@media screen and (max-width: 768px) {
  .sk-scheme { grid-template-columns: 1fr; }
  .sk-scheme-node + .sk-scheme-node { margin: 40px 0 0; }
  .sk-scheme-node + .sk-scheme-node::before { content: "⇅"; top: -34px; left: 50%; transform: translateX(-50%); }
}
#scheme .inheritance-scheme-note {
    max-width: 720px;
    margin: 36px auto 0;
    text-align: center;
}

/* タグ・バッジ ----------------------------------------------------------------- */
.sk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-tag { display: inline-block; padding: 2px 12px; border: 1px solid var(--green-line); border-radius: 30px; color: var(--key-deep); font-size: 12px; letter-spacing: .06em; line-height: 1.8; }

/* 関連ページ（行き止まりを作らないテキストリンク列。QAで3種類の実装を統一） ------------ */
/* <nav class="content-section content-section--compact sk-related" aria-labelledby="related-title">
     <div class="width-m"><p class="section-en">RELATED</p><h2 id="related-title" class="sk-related-title">関連ページ</h2>
     <ul class="sk-related-list"><li><a href="…">ページ名</a></li>…</ul></div></nav> */
.sk-related .sk-related-title, .content-section .sk-related-title { margin-bottom: 20px; font-size: clamp(22px, 2.4vw, 28px); }
.sk-related-list { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-related-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; background: #fff; border: 1px solid var(--green-line); color: var(--key-deep); font-size: 14px; letter-spacing: .08em; line-height: 1.6; transition: background .25s; }
.sk-related-list a::after { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.sk-related-list a:hover { background: var(--green-soft); }
.sk-related .content-note { margin-top: 16px; }
@media screen and (max-width: 768px) {
  .sk-related-list li { width: 100%; }
  .sk-related-list a { width: 100%; justify-content: space-between; }
}

/* 中央寄せブロック／本文下のリンク行（real-estate・used-home・store から共通化） ------- */
.sk-center-block { text-align: center; }
.sk-center-block h2 { margin-bottom: 24px; }
.sk-center-block .btn-row { margin-top: 32px; }
.sk-inline-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 36px; margin-top: 28px; }
.sk-inline-links .more-link { margin-left: 0; }
.text-link {
    color: var(--key-deep);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.text-link:hover {
    color: var(--key);
}
@media screen and (max-width: 768px) {
  .sk-center-block { text-align: left; }
  .sk-inline-links { justify-content: flex-start; }
}

/* 引用リード（大きめの明朝の一文） ------------------------------------------------ */
.sk-lead { max-width: 760px; margin: 0 auto; font-family: var(--font-mincho); font-size: clamp(18px, 2vw, 20px); line-height: 2.2; letter-spacing: .08em; text-align: center; }
@media screen and (max-width: 768px) { .sk-lead { text-align: left; } }

/* フォーム ------------------------------------------------------------------ */
.sk-form { max-width: 800px; margin: 0 auto; padding: 48px 56px; background: #fff; border: 1px solid var(--line-light); }
.sk-form-lead { margin-bottom: 28px; font-size: 14px; line-height: 1.9; }
.sk-form-reassure { margin-bottom: 28px; padding: 14px 18px; background: var(--green-soft); font-size: 14px; line-height: 1.8; }
.sk-field { margin-bottom: 26px; }
.sk-field > label, .sk-field > .sk-field-label, .sk-field legend { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.sk-req, .sk-opt { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.7; }
.sk-req { background: var(--key-deep); color: #fff; }
.sk-opt { background: #ecebe6; color: var(--text-2); }
.sk-help { margin-top: 6px; color: var(--text-3); font-size: 12px; line-height: 1.7; }
.sk-input, .sk-select, .sk-textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  background: #fff; border: 1px solid #c9c8c1; border-radius: 4px; font-size: 16px; line-height: 1.6;
}
.sk-textarea { min-height: 160px; resize: vertical; }
.sk-select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sk-input:focus, .sk-select:focus, .sk-textarea:focus { border-color: var(--key-deep); outline: 2px solid rgba(63, 111, 71, .25); outline-offset: 0; }
/* エラー表示：色だけに頼らず枠を太くする（送信時はブラウザ標準のメッセージも出る） */
.sk-input:user-invalid, .sk-select:user-invalid, .sk-textarea:user-invalid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.sk-choice input:user-invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.sk-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sk-choices { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.sk-choices.is-column { flex-direction: column; gap: 10px; }
.sk-choice { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.6; cursor: pointer; }
.sk-choice input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1px solid #a9a8a1; background: #fff; display: grid; place-content: center; }
.sk-choice input[type="radio"] { border-radius: 50%; }
.sk-choice input[type="checkbox"] { border-radius: 3px; }
.sk-choice input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s; background: var(--key-deep); }
.sk-choice input[type="radio"]::before { border-radius: 50%; }
.sk-choice input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.sk-choice input:checked::before { transform: scale(1); }
.sk-choice input:focus-visible { outline: 2px solid var(--key-deep); outline-offset: 2px; }
/* CF7 のラジオ・チェックは .sk-choice が付かない。destyle で appearance が消えると枠も消える */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item label,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-bottom: 0; padding: 10px 0; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0; cursor: pointer; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1px solid #a9a8a1; background: #fff; display: grid; place-content: center; cursor: pointer; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input { border-radius: 50%; }
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input { border-radius: 3px; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input::before,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s; background: var(--key-deep); }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input::before { border-radius: 50%; }
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input:checked::before,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input:checked::before { transform: scale(1); }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input:focus-visible,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input:focus-visible { outline: 2px solid var(--key-deep); outline-offset: 2px; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item input:user-invalid,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item input:user-invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.sk-form fieldset { border: 0; }
.sk-privacy { margin: 32px 0 8px; padding: 18px 20px; background: var(--beige-soft); font-size: 13px; line-height: 1.9; }
.sk-privacy a { color: var(--key-deep); text-decoration: underline; }
.sk-privacy p { margin-bottom: 8px; font-size: 13px; line-height: 1.9; }
.sk-submit { display: flex; justify-content: center; margin-top: 28px; }
.sk-submit button { min-width: 280px; padding: 18px 32px; background: var(--key-deep); color: #fff; font-size: 16px; letter-spacing: .14em; border-radius: 4px; transition: opacity .3s; }
.sk-submit button:hover { opacity: .85; }
.sk-form-after { margin-top: 20px; color: var(--text-3); font-size: 13px; text-align: center; }
@media screen and (max-width: 768px) {
  .sk-form { padding: 28px 18px; }
  .sk-field-row { grid-template-columns: 1fr; }
  .sk-submit button { width: 100%; min-width: 0; }
}

/* Generated-image disclosure */
.sk-image-disclaimer {
  margin-block: 1rem 0;
  color: #6f695f;
  font-size: .75rem;
  line-height: 1.7;
  text-align: right;
}

/* 赤穂で暮らす（/ako/）固有スタイル。common.css の後に読み込む。新しい色は増やさない
   ※数字の中の【要確認】ラベル・関連ページは QA で common.css に共通化 */

/* 目次からのジャンプ先（固定ヘッダー分の余白） */
.page-ako .sk-topic { scroll-margin-top: 90px; }

/* エリアガイド（sk-area-group を見出し＋短文で使う） */
.page-ako .ako-area-guide .sk-area-group { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.page-ako .ako-area-guide .sk-area-group + .sk-area-group { margin-top: 18px; }
.page-ako .ako-area-guide .sk-area-group h3 { margin-bottom: 6px; }
.page-ako .ako-area-guide .sk-area-group p { margin: 0; font-size: 14px; line-height: 1.9; }

/* 移住相談会への誘導（sk-event の見出しを h2 で使うためサイズを戻す） */
.page-ako .sk-event-title { font-size: clamp(22px, 2.4vw, 28px); }
.page-ako .sk-event-body > p:not(.section-en) { margin-bottom: 16px; font-size: 15px; }
.page-ako .sk-event-body .btn-row { margin-top: 24px; }

.ako-numbers .sk-stat-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.ako-numbers .sk-stat-value small { margin-left: 0; }
.ako-numbers .sk-stat-num { font-family: var(--font-en); }

/* page-demolition.css｜解体工事（/sakae/demolition/）
   common.css の後に読み込む。色・フォントは common.css のトークンのみ使用
   ※導入文の段落間・2列の箇条（.detail-list--two）・価格表の【要確認】・関連ページは QA で common.css に共通化 */

/* 対応する解体：写真なしカード */
.page-demolition #services .content-card { border-top: 3px solid var(--key); }

/* 強みの箇条 */
.page-demolition .detail-list--two { margin-top: 56px; }
.page-demolition .demolition-extra li { position: relative; padding-left: 1em; }
.page-demolition .demolition-extra li::before { content: "・"; position: absolute; left: 0; }

/* 補助金の帯 */
.page-demolition .demolition-subsidy { text-align: center; }
.page-demolition .demolition-subsidy h2 { margin-bottom: 20px; }
.page-demolition .demolition-subsidy p:not(.section-en) { text-align: left; }
.page-demolition .demolition-subsidy p:last-child { margin-top: 28px; text-align: center; }

/* 解体後の選択肢：見出し側を写真の横に */
.page-demolition .demolition-next-head .media-split-copy h2 { margin-bottom: 0; }

.demo-subsidy-text{margin: 30px 0;}

@media screen and (max-width: 768px) {
  .page-demolition .detail-list--two { margin-top: 32px; }
  .page-demolition .demolition-subsidy { text-align: left; }
  .page-demolition .demolition-subsidy .f-btn { width: 100%; }
}

/* page-exterior.css｜エクステリア（/sakae/exterior/）
   common.css の後に読み込む。色・フォントは common.css のトークンのみ使用
   ※導入文の段落間・ギャラリー画像の比率・関連ページは QA で common.css に共通化 */

/* できること：写真なしカード（上に緑の線） */
.page-exterior #services .content-card { border-top: 3px solid var(--key); }

/* Before/After：事例ごとに区切り線 */
.page-exterior .sk-ba-item + .sk-ba-item { padding-top: 56px; border-top: 1px solid var(--line); }
.page-exterior .sk-ba-item .case-study-meta { margin-bottom: 4px; color: var(--key-deep); font-family: var(--font-en); letter-spacing: .2em; }
.page-exterior .sk-ba-item h3 { margin-bottom: 18px; line-height: 1.7; }

/* ギャラリー：8枚を PC 4列×2段 */
.page-exterior .exterior-gallery-title { margin: 88px 0 28px; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .08em; }
.page-exterior .exterior-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 強み：見出しの下に本文＋箇条（2カラム）。エクステリア・擁壁など */
.sk-strength-layout h2 {
    margin-bottom: 28px;
}
.sk-strength-layout__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.sk-strength-layout__copy > p {
    margin-bottom: 20px;
}
.sk-strength-layout__copy > p:last-child {
    margin-bottom: 0;
}
.sk-strength-layout .detail-list {
    margin-top: 0;
}
.sk-strength-layout .detail-list li {
    font-size: 15px;
}
@media screen and (max-width: 900px) {
  .sk-strength-layout__columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media screen and (max-width: 900px) {
  .page-exterior .exterior-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 768px) {
  .page-exterior .sk-ba-item + .sk-ba-item { padding-top: 40px; }
  .page-exterior .exterior-gallery-title { margin-top: 56px; }
  .page-exterior .exterior-gallery { gap: 8px; }
}

/* ライフプラン（/lifeplan/）固有スタイル。common.css の後に読み込む。新しい色は増やさない */

/* 面談の準備と費用：小見出し・注記・表の間隔 */
.page-lifeplan .lifeplan-sub { margin: 8px 0 0; font-size: 18px; letter-spacing: .08em; }
.page-lifeplan .lifeplan-sub + .detail-list { margin-top: 14px; }
.page-lifeplan .media-split-copy .lifeplan-prepare-note { margin: 16px 0 24px; font-size: 14px; }
.page-lifeplan #prepare .sk-table { background: #fff; }

/* 移住相談会（/migration/）固有スタイル。common.css の後に読み込む。新しい色は増やさない */

/* 開催情報 */
.page-migration .migration-event-text { margin: 20px 0 0; font-size: 15px; }
.page-migration .sk-event-body .btn-row { margin-top: 24px; }

/* 相談できること：本文＋リンクの2段（common の p:last-child 指定をリンク行にかけない） */
.page-migration .migration-talk-grid .feature-panel { display: flex; flex-direction: column; }
.page-migration .migration-talk-grid .feature-panel > p:not(.feature-panel-num) { color: var(--text-2); font-size: 14px; line-height: 1.9; }
.page-migration .migration-talk-grid .feature-panel > p:last-child { margin-top: auto; padding-top: 16px; color: inherit; }

/* フォーム補足 */
.page-migration .migration-date-help { margin: -14px 0 26px; }

/* ==========================================================================
   page-real-estate.css  不動産事業（/real-estate/）
   - common.css / pages.css の後に読み込む。.page-real-estate でスコープ
   - 導入文の段落間・中央寄せブロック（.sk-center-block）・リンク行（.sk-inline-links）・
     5ステップの流れ（.process-timeline--5）・関連ページ（.sk-related）は QA で common.css に共通化
   ========================================================================== */

.page-real-estate .page-cta-note { text-align: center; }

/* 強み：箇条 */
.page-real-estate .real-estate-points { margin-top: 56px; }

/* 仲介手数料 */
.page-real-estate .real-estate-fee { max-width: 880px; padding: 28px 32px; background: #fff; border: 1px solid var(--line-light); }
.page-real-estate .real-estate-fee h3 { margin-bottom: 10px; font-size: 20px; letter-spacing: .08em; }
.page-real-estate .real-estate-fee p { font-size: 14px; line-height: 1.9; }

@media screen and (max-width: 768px) {
  .page-real-estate .page-cta-note { text-align: left; }
  .page-real-estate .real-estate-points { margin-top: 36px; }
  .page-real-estate .real-estate-fee { padding: 22px 18px; }
}

/* ==========================================================================
   page-recruit.css  採用情報（/recruit/）
   - common.css / pages.css の後に読み込む。.page-recruit でスコープ
   - 5項目の数字（.sk-stat-grid--five）・関連ページ（.sk-related）・個人情報の説明文（.sk-privacy p）は
     QA で common.css に共通化
   ========================================================================== */

/* 数字：注記 */
.page-recruit #numbers .sk-stat-note { font-size: 12px; }
.page-recruit #numbers .content-note { text-align: center; }
@media screen and (max-width: 768px) { .page-recruit #numbers .content-note { text-align: left; } }

/* 集合写真 */
.page-recruit .recruit-group-photo { max-width: 1000px; margin-left: auto; margin-right: auto; }
.page-recruit .recruit-group-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* 仕事内容カード（リンクなし） */
.page-recruit .content-card-title { margin-bottom: 10px; }

/* 先輩の声（取材後に表示） */
.page-recruit .recruit-voice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.page-recruit .recruit-voice { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px; background: #fff; border: 1px solid var(--line-light); }
.page-recruit .recruit-voice img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.page-recruit .recruit-voice h3 { margin-bottom: 8px; font-size: 18px; }
@media screen and (max-width: 768px) {
  .page-recruit .recruit-voice-list { grid-template-columns: 1fr; }
  .page-recruit .recruit-voice { grid-template-columns: 100px minmax(0, 1fr); padding: 18px; }
}

/* フォーム：経験年数の入力行・送信完了 */
.page-recruit .recruit-years { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.page-recruit .recruit-years label { flex: 0 0 auto; }
.page-recruit .recruit-years .sk-input { width: 120px; min-height: 44px; }
.page-recruit .recruit-form-done h3 { margin-bottom: 12px; font-size: 20px; }

/* page-retaining-wall.css｜擁壁工事（/sakae/retaining-wall/）
   common.css の後に読み込む。exterior と見た目を揃える（9/16：同じカテゴリ）
   ※導入文の段落間は QA で common.css に共通化 */

/* 点検の目安：写真を上寄せに */
.page-retaining-wall #check .media-split { align-items: start; }

/* 強み：文章＋箇条の2カラム（写真なし） */
/* 法令の注記（擁壁ページのみ .rw-law） */
.rw-law {
    margin-top: 64px;
    padding: 28px 32px;
    background: var(--beige-soft);
    border-left: 3px solid var(--key);
}
.rw-law h3 {
    margin-bottom: 12px;
    font-size: clamp(18px, 2vw, 21px);
    letter-spacing: .06em;
}
.rw-law p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
}

@media screen and (max-width: 768px) {
  .rw-law { margin-top: 40px; padding: 22px 18px; }
}

/* page-roof.css｜屋根替え・外壁塗装（/sakae/roof/）
   common.css の後に読み込む。色・フォントは common.css のトークンのみ使用
   ※導入文の段落間・2列の箇条（.detail-list--two）・関連ページは QA で common.css に共通化 */

/* 劣化サイン：写真を上寄せに */
.page-roof #check .media-split { align-items: start; }

/* 強みの箇条 */
.page-roof .detail-list--two { margin-top: 56px; }

/* 火災保険・補助金の囲み（.roof-insurance は屋根ページのみ） */
.sk-price-wrap > .content-note + .roof-insurance { margin-top: 40px; }
.roof-insurance {
    margin-top: 48px;
    padding: 32px 36px;
    background: #fff;
    border: 1px solid var(--line-light);
    border-left: 3px solid var(--key);
}
.roof-insurance .section-en { margin-bottom: 12px; }
.roof-insurance h3 { margin-bottom: 14px; font-size: clamp(18px, 2vw, 22px); line-height: 1.7; letter-spacing: .06em; }
.roof-insurance p:not(.section-en) { margin: 0; font-size: 14px; line-height: 1.9; }
.roof-insurance p + p { margin-top: 16px; }
.roof-insurance .more-link { margin-top: 0; color: var(--key-deep); }

@media screen and (max-width: 768px) {
  .page-roof .detail-list--two { margin-top: 32px; }
  .roof-insurance { padding: 24px 20px; }
}

/* page-soundproof.css｜防音工事（/sakae/soundproof/）
   common.css の後に読み込む。色・フォントは common.css のトークンのみ使用
   ※導入文の段落間・ギャラリー画像の比率・価格表の【要確認】・関連ページは QA で common.css に共通化 */

/* 事例：2件を区切る */
.page-soundproof .sp-case + .sp-case { margin-top: 88px; padding-top: 72px; border-top: 1px solid var(--line); }
.page-soundproof .sp-case .case-study-head { margin-bottom: 36px; }
.page-soundproof .sp-case .case-study-head h3 { margin-bottom: 16px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.7; letter-spacing: .06em; }
.sp-case .image-gallery { margin-bottom: 32px; }

/* 数値カード：【要確認】の文字が長いので折り返す */
.page-soundproof .standard-spec-value { font-size: clamp(20px, 2.4vw, 28px); overflow-wrap: anywhere; }
#performance .content-note {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* しくみ：床下地の写真 */
.page-soundproof .sp-mechanism-photo { max-width: 760px; margin-left: auto; margin-right: auto; }
.page-soundproof .sp-mechanism-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.page-soundproof .sp-mechanism-photo figcaption { margin-top: 12px; color: var(--text-2); font-size: 14px; line-height: 1.8; text-align: center; }

/* 強み */
.page-soundproof #strength .media-split { align-items: start; }
.page-soundproof #strength .detail-list { margin-top: 10px; }
.page-soundproof #strength .content-note { margin-top: 20px; }

@media screen and (max-width: 768px) {
  .page-soundproof .sp-case + .sp-case { margin-top: 56px; padding-top: 48px; }
  .page-soundproof .sp-case .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .page-soundproof .sp-mechanism-photo figcaption { text-align: left; }
}

/* ==========================================================================
   page-store.css  店舗・施設（/store/）
   - common.css / pages.css の後に読み込む。.page-store でスコープ
   - 導入文の段落間・導入下の注記・リンク行（.sk-inline-links）・関連ページ（.sk-related）は
     QA で common.css に共通化
   ========================================================================== */

/* 代表事例 */
.page-store .store-feature-case .case-study-head { margin-bottom: 40px; }
.page-store .store-case-title { margin-bottom: 20px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.7; letter-spacing: .06em; }

/* 事例カード（リンクなし） */
.page-store .content-card-title { margin-bottom: 10px; }

/* 補助金（/subsidy/）固有スタイル。common.css の後に読み込む。新しい色は増やさない
   ※導入下の確認日の注記（中央寄せ）は QA で common.css に共通化 */

/* 制度カード（リンクではない content-card） */
.page-subsidy .content-card-text { margin-bottom: 16px; }
.page-subsidy .subsidy-card-meta { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.8; }
.page-subsidy .subsidy-card-meta dt { color: var(--key-deep); font-weight: 500; }
.page-subsidy .subsidy-card-meta dd + dt { margin-top: 8px; }

/* 火災保険の注記ボックス */
.page-subsidy .subsidy-note { max-width: 880px; padding: 32px 36px; background: #fff; border-left: 3px solid var(--key); }
.page-subsidy .subsidy-note h3 { margin-bottom: 14px; font-size: clamp(19px, 2vw, 22px); line-height: 1.7; }
.page-subsidy .subsidy-note p:last-child { margin: 0; font-size: 15px; }
@media screen and (max-width: 768px) { .page-subsidy .subsidy-note { padding: 24px 20px; } }

/* 3択の下の資料請求リンク */
.page-subsidy .subsidy-catalog-link { max-width: 1000px; margin: 20px auto 0; }

/* ==========================================================================
   page-used-home.css  中古・空き家（/used-home/）
   - common.css / pages.css の後に読み込む。.page-used-home でスコープ
   - 導入文の段落間・中央寄せブロック（.sk-center-block）・リンク行（.sk-inline-links）・
     6ステップの流れ（.process-timeline--6）・関連ページ（.sk-related）は QA で common.css に共通化
   ========================================================================== */

/* 確認するポイント */
.page-used-home .used-home-points-title { margin-top: 64px; font-size: 20px; letter-spacing: .08em; }
.page-used-home .used-home-points { margin-top: 18px; }
.page-used-home .used-home-points b { color: var(--key-deep); font-weight: 700; }

/* 事例＋古民家再生への導線（.used-home-kominka はこのページのみ） */
.used-home-kominka {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 56px;
    padding: 40px clamp(22px, 4vw, 44px);
    text-align: center;
    background: var(--beige-soft);
    border: 1px solid var(--line-light);
}
.used-home-kominka > p {
    margin: 0;
    font-family: var(--font-mincho);
    font-size: 18px;
    letter-spacing: .08em;
    line-height: 1.8;
}
.used-home-kominka .btn-row {
    justify-content: center;
    margin: 0;
}

@media screen and (max-width: 768px) {
  .page-used-home .used-home-points-title { margin-top: 40px; }
  .used-home-kominka { margin-top: 40px; gap: 20px; padding: 32px 20px; }
  .used-home-kominka .btn-row { width: 100%; }
  .used-home-kominka .btn-row .f-btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   page-yumematsuri.css  夢祭り（/yumematsuri/）
   - common.css / pages.css の後に読み込む。.page-yumematsuri でスコープ
   - 色・余白は common.css のトークンを使用（新しい色は増やさない）
   - 導入文の段落間・3列の数字（≤1100px で崩れない）・関連ページは QA で common.css に共通化
   ========================================================================== */

/* 数字：単位を数値の前に置く（「延べ」「毎年」） ------------------------------------ */
.page-yumematsuri .sk-stat-value small:first-child { margin: 0 4px 0 0; }
.page-yumematsuri .sk-stat-value.is-tbc { font-family: var(--font-sans); font-size: 18px; line-height: 1.8; }

/* 動画：上段横長×2・下段縦長×2（HTML順 2026,2024 / 2025,2023） */
.page-yumematsuri .sk-video-grid.is-yume-movies { align-items: start; }
.page-yumematsuri .sk-video-grid.is-yume-movies .sk-video.is-portrait { max-width: none; width: 100%; margin: 0; }
@media screen and (min-width: 769px) {
  .page-yumematsuri .sk-video-grid.is-yume-movies > .sk-video-item:first-child { grid-column: auto; }
}

/* 動画：キャプション内の要確認は改行して読みやすく */
.page-yumematsuri .sk-video-item figcaption .sk-tbc { display: inline-block; margin-top: 2px; font-size: 12px; }

/* 次回開催 */
.page-yumematsuri .yume-event-text { margin-top: 20px; font-size: 15px; line-height: 1.9; }
.page-yumematsuri .yume-event-btns { margin-top: 24px; }
.page-yumematsuri .yume-event-btns .f-btn { font-size: 15px; }

/* OB客の方へ（中央寄せの読み物） */
.page-yumematsuri .yume-ob { text-align: center; }
.page-yumematsuri .yume-ob h2 { margin-bottom: 28px; }
.page-yumematsuri .yume-ob p:not(.section-en) { max-width: 720px; margin-left: auto; margin-right: auto; }
.page-yumematsuri .yume-ob p:not(.section-en) + p { margin-top: 1em; }

@media screen and (max-width: 768px) {
  .page-yumematsuri .yume-ob { text-align: left; }
}

.sk-price,
.sk-table {
    border-width: 0;
}
.sk-price {
    border-top: 2px solid var(--key);
}
.sk-table {
    border-top: 1px solid var(--line);
}
.sk-price th,
.sk-price td,
.sk-table th,
.sk-table td {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--line);
    white-space: normal;
    letter-spacing: .04em;
}


/* ==========================================================================
   コンセプト / 家づくりガイド / 商品ラインナップ（2026-09-26）
   common.css §60〜69・§72〜77 と page-concept / page-guide / page-lineup
   ========================================================================== */

.content-card-meta { display: block; margin-bottom: 6px; color: var(--text-3); font-size: 13px; letter-spacing: .06em; }

/* 60 追加トークン -------------------------------------------------------------- */
:root {
  --hair: #cfc9bd;                          /* 番号ラベル・タブ見出しの細罫 */
  --measure: 680px;                         /* 読み物の1行幅（38〜42字） */
  --chapter-gap: 160px;                     /* 章と章のあいだ（PC） */
  --chapter-gap-sp: 88px;                   /* 同（SP） */
  --fs-display: clamp(30px, 3.2vw, 46px);   /* 縦書き見出し */
  --fs-statement: clamp(20px, 2.1vw, 28px); /* 明朝のリード */
}

/* 61 .sk-statement：左に縦書き見出し、右にリードと本文（ページ冒頭・章の導入） ------------ */
/* <section class="sk-statement"><div class="sk-statement-inner width-1100">
     <h2 class="sk-statement-title">見える美しさも、<br>見えない強さも。</h2>
     <div class="sk-statement-copy"><p class="sk-statement-lead">…</p><div class="sk-statement-body"><p>…</p></div></div>
   </div></section> */
.sk-statement { padding: 140px 0 128px; }
.sk-statement.is-soft { background: var(--beige-soft); }
.sk-statement-inner { display: grid; grid-template-columns: auto minmax(0, var(--measure)); justify-content: center; align-items: start; gap: clamp(48px, 8vw, 140px); }
.sk-statement-title { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-mincho); font-size: var(--fs-display); font-weight: 500; line-height: 1.75; letter-spacing: .22em; color: var(--text); }
.sk-statement-en { margin-bottom: 18px; color: var(--key-deep); font-family: var(--font-en); font-size: 15px; letter-spacing: .28em; text-transform: uppercase; }
.sk-statement-lead { margin-bottom: 40px; font-family: var(--font-mincho); font-size: var(--fs-statement); line-height: 2; letter-spacing: .12em; }
.sk-statement-body p { font-size: 15px; line-height: 2.3; letter-spacing: .08em; }
.sk-statement-body p + p { margin-top: 1.4em; }
.sk-statement-body .sk-btn-row { margin-top: 44px; }
@media screen and (max-width: 768px) {
  .sk-statement { padding: 72px 0 60px; }
  .sk-statement-inner { grid-template-columns: 1fr; gap: 28px; }
  .sk-statement-title { writing-mode: horizontal-tb; font-size: 26px; letter-spacing: .1em; line-height: 1.7; }
  .sk-statement-lead { margin-bottom: 28px; font-size: 19px; letter-spacing: .06em; }
}

/* 62 .sk-label：「01 ─ STRUCTURE」の番号ラベル ---------------------------------------- */
/* <p class="sk-label"><b>01</b><span>SK Method</span></p>  ※装飾なので読み上げ不要なら aria-hidden="true" */
.sk-label { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; color: var(--key-deep); font-family: var(--font-en); letter-spacing: .08em; line-height: 1.2; }
.sk-label b { font-size: 30px; font-weight: 400; }
.sk-label span { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; }
.sk-label::after { content: ""; flex: 1 1 48px; max-width: 220px; border-top: 1px solid var(--hair); }
.sk-label.is-center { justify-content: center; }
.sk-label.is-center::before { content: ""; flex: 1 1 48px; max-width: 220px; border-top: 1px solid var(--hair); }

/* 63 .sk-chapter：画面端まで伸びる大判写真＋縦書き見出し＋淡い面（本文）＋小さな写真 ---------- */
/* <section class="sk-chapter" id="…" aria-labelledby="…">
     <div class="sk-chapter-top">
       <figure class="sk-chapter-media"><img …></figure>
       <div class="sk-chapter-head"><p class="sk-label"><b>01</b><span>SK Method</span></p>
         <h2 class="sk-chapter-title" id="…">壊させない、<br>という考え方。</h2></div>
     </div>
     <div class="sk-chapter-panel"><div class="sk-chapter-body">
       <p class="sk-chapter-lead">…</p><p>…</p><div class="sk-btn-row">…</div></div>
       <figure class="sk-chapter-sub"><img …></figure>（任意）
     </div>
   </section>
   左右反転は .is-reverse。本文の下に .sk-point などを続けるときは .sk-chapter-panel の中に入れる */
.sk-chapter { position: relative; padding-bottom: var(--chapter-gap); scroll-margin-top: 80px; }
.sk-chapter-top { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 62%) minmax(0, 1fr); align-items: start; }
.sk-chapter-media { margin: 0; }
.sk-chapter-media img, .sk-chapter-media .sk-ph { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-chapter-head { display: flex; flex-direction: column; align-items: flex-start; padding: 56px clamp(24px, 5vw, 80px) 0; }
.sk-chapter-head .sk-label { align-self: stretch; }
.sk-chapter-title { writing-mode: vertical-rl; text-orientation: mixed; margin-top: 8px; font-family: var(--font-mincho); font-size: var(--fs-display); font-weight: 500; line-height: 1.7; letter-spacing: .2em; }
.sk-chapter-panel { position: relative; width: 92%; max-width: 1320px; margin: -140px 0 0 auto; padding: 200px clamp(24px, 6vw, 96px) 96px; background: var(--beige-soft); }
.sk-chapter-body { max-width: var(--measure); }
.sk-chapter-lead { margin-bottom: 28px; font-family: var(--font-mincho); font-size: var(--fs-statement); line-height: 2; letter-spacing: .1em; }
.sk-chapter-body > p:not(.sk-chapter-lead):not(.sk-label) { font-size: 15px; line-height: 2.3; letter-spacing: .08em; }
.sk-chapter-body > p + p { margin-top: 1.3em; }
.sk-chapter-sub { position: absolute; right: 6%; bottom: -64px; width: 26%; margin: 0; }
.sk-chapter-sub img, .sk-chapter-sub .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-chapter-panel > .sk-points, .sk-chapter-panel > .sk-bignum-grid, .sk-chapter-panel > .sk-stagger, .sk-chapter-panel > .image-gallery, .sk-chapter-panel > .sk-video-single, .sk-chapter-panel > .sk-note-box { margin-top: 72px; }
.sk-chapter.is-reverse .sk-chapter-top { grid-template-columns: minmax(0, 1fr) minmax(0, 62%); }
.sk-chapter.is-reverse .sk-chapter-media { order: 2; }
.sk-chapter.is-reverse .sk-chapter-head { align-items: flex-end; }
.sk-chapter.is-reverse .sk-chapter-panel { margin: -140px auto 0 0; }
.sk-chapter.is-reverse .sk-chapter-body { margin-left: auto; }
.sk-chapter.is-reverse .sk-chapter-sub { right: auto; left: 6%; }
.sk-chapter.has-sub .sk-chapter-body { padding-bottom: 40px; }
.sk-chapter.is-plain .sk-chapter-panel { background: transparent; }
/* QA2：小写真（.sk-chapter-sub）の絶対配置は、面の中に .sk-points などが続くと本文・解説に重なる（concept で報告）
   → PC・タブレットでは本文の横に並べる（page-concept.css の対処を共通化。recruit・テンプレートも同じ見え方になる） */
@media screen and (min-width: 769px) {
  .sk-chapter.has-sub .sk-chapter-panel { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(200px, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
  .sk-chapter.has-sub .sk-chapter-panel > * { grid-column: 1 / -1; }
  .sk-chapter.has-sub .sk-chapter-body { grid-column: 1; grid-row: 1; }
  .sk-chapter.has-sub .sk-chapter-sub { position: static; grid-column: 2; grid-row: 1; width: auto; max-width: 420px; margin: 0 0 40px; justify-self: end; }
  .sk-chapter.has-sub.is-reverse .sk-chapter-panel { grid-template-columns: minmax(200px, 1fr) minmax(0, var(--measure)); }
  .sk-chapter.has-sub.is-reverse .sk-chapter-body { grid-column: 2; margin-left: 0; }
  .sk-chapter.has-sub.is-reverse .sk-chapter-sub { grid-column: 1; justify-self: start; }
}
@media screen and (max-width: 1100px) {
  .sk-chapter-sub { width: 32%; }
}
@media screen and (max-width: 768px) {
  .sk-chapter { padding-bottom: var(--chapter-gap-sp); }
  .sk-chapter-top, .sk-chapter.is-reverse .sk-chapter-top { grid-template-columns: 1fr; }
  .sk-chapter.is-reverse .sk-chapter-media { order: 0; }
  .sk-chapter-head, .sk-chapter.is-reverse .sk-chapter-head { align-items: flex-start; padding: 28px 5% 0; }
  .sk-chapter-title { writing-mode: horizontal-tb; font-size: 26px; letter-spacing: .1em; }
  .sk-chapter-panel, .sk-chapter.is-reverse .sk-chapter-panel { width: 100%; margin: 24px 0 0; padding: 36px 5% 44px; }
  .sk-chapter-lead { font-size: 19px; letter-spacing: .06em; }
  .sk-chapter-sub, .sk-chapter.is-reverse .sk-chapter-sub { position: static; width: 72%; margin: 28px 0 0 auto; }
  .sk-chapter.has-sub .sk-chapter-body { padding-bottom: 0; }
  .sk-chapter-panel > .sk-points, .sk-chapter-panel > .sk-bignum-grid, .sk-chapter-panel > .sk-stagger, .sk-chapter-panel > .image-gallery, .sk-chapter-panel > .sk-video-single, .sk-chapter-panel > .sk-note-box { margin-top: 44px; }
}

/* 64 .sk-point：面の上辺にタブ見出しが乗る解説ブロック（SK工法の3つの技、家相の手順など） ------ */
/* <div class="sk-points">
     <article class="sk-point"><p class="sk-point-tab"><span>技 01</span>ドリフトピン工法</p>
       <div class="sk-point-body"><div class="sk-point-text"><h3>…</h3><p>…</p></div>
       <figure class="sk-point-media"><img …><figcaption>…</figcaption></figure></div></article>
   </div>  写真なしは .sk-point.is-text-only。白地の面にするときは .sk-points.is-white（淡い面の上に置く場合） */
.sk-points { display: grid; gap: 64px; }
.sk-point { position: relative; padding: 64px clamp(20px, 5vw, 72px) 56px; background: var(--beige-soft); }
.sk-points.is-white .sk-point { background: #fff; }
/* QA2：left:50% だと絶対配置の幅が面の半分までに制限され、SPで「ドリフトピ／ン工法」のように折り返していた → 左右0＋auto で中央寄せ */
.sk-point-tab { position: absolute; top: 0; left: 0; right: 0; width: fit-content; margin: 0 auto; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 14px; max-width: 92%; padding: 10px 24px; background: #fff; border: 1px solid var(--hair); font-family: var(--font-mincho); font-size: 15px; letter-spacing: .12em; line-height: 1.5; white-space: nowrap; }
.sk-point-tab span { flex: none; white-space: nowrap; padding-right: 14px; border-right: 1px solid var(--hair); color: var(--key-deep); }
.sk-point-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.sk-point h3, .sk-point h4 { margin-bottom: 18px; font-family: var(--font-mincho); font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.7; letter-spacing: .1em; }
.sk-point-text p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.sk-point-text p + p { margin-top: 1em; }
.sk-point-media { margin: 0; }
.sk-point-media img, .sk-point-media .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-point-media figcaption { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 1.7; }
.sk-point.is-text-only .sk-point-body { grid-template-columns: 1fr; max-width: var(--measure); margin: 0 auto; }
.sk-point.is-reverse .sk-point-media { order: -1; }
@media screen and (max-width: 768px) {
  .sk-points { gap: 48px; }
  .sk-point { padding: 44px 18px 30px; }
  .sk-point-tab { padding: 8px 16px; font-size: 14px; letter-spacing: .06em; white-space: normal; }
  .sk-point-body { grid-template-columns: 1fr; gap: 20px; }
  .sk-point.is-reverse .sk-point-media { order: 0; }
}

/* 65 .sk-bignum：「耐震等級 3」「特許 2件」のような大きな数字（明朝） ----------------------- */
/* <div class="sk-bignum-grid"><div class="sk-bignum"><p class="sk-bignum-label">特許工法</p>
     <p class="sk-bignum-value">2<small>件</small></p><p class="sk-bignum-note">2025年6月取得</p></div>…</div> */
.sk-bignum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.sk-bignum { padding: 40px 20px 36px; text-align: center; }
.sk-bignum + .sk-bignum { border-left: 1px solid var(--hair); }
.sk-bignum-label { color: var(--text-2); font-size: 13px; letter-spacing: .12em; line-height: 1.6; }
.sk-bignum-value { margin: 10px 0 8px; color: var(--key-deep); font-family: var(--font-mincho); font-size: clamp(44px, 5.2vw, 68px); font-weight: 500; line-height: 1.15; letter-spacing: .04em; }
.sk-bignum-value small { margin-left: .15em; color: var(--text); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.sk-bignum-value .sk-bignum-pre { display: block; margin-bottom: 4px; color: var(--text); font-family: var(--font-sans); font-size: 14px; letter-spacing: .1em; }
.sk-bignum-note { color: var(--text-3); font-size: 12px; line-height: 1.7; }
.sk-bignum-label, .sk-bignum-note, .sk-point-tab { word-break: auto-phrase; } /* QA2：SP2列で「グランプ／リ」「兵庫県1／位」のように語の途中で折れていた */
.sk-bignum-value .sk-tbc { display: inline-block; padding: 2px 8px 4px; font-size: .5em; line-height: 1.2; }
.sk-bignum-value .sk-tbc::before { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; line-height: 1.6; }
@media screen and (max-width: 768px) {
  .sk-bignum-grid { grid-template-columns: 1fr 1fr; }
  .sk-bignum { padding: 26px 10px 22px; }
  .sk-bignum + .sk-bignum { border-left: 0; }
  .sk-bignum:nth-child(even) { border-left: 1px solid var(--hair); }
  .sk-bignum:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .sk-bignum:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 66 .sk-btn-line：線のボタン（eco-works の「〜の理由 ＞」型）。主CTAは既存の .f-btn.is-fill / .sk-cta3 --- */
.sk-btn-row { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 40px; }
.sk-btn-row.is-center { justify-content: center; }
.sk-btn-line { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 56px; padding: 14px 24px 14px 28px; background: #fff; border: 1px solid var(--text); color: var(--text); font-size: 14px; letter-spacing: .14em; line-height: 1.6; transition: background .3s, color .3s; }
.sk-btn-line::after { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.sk-btn-line.is-green { border-color: var(--key-deep); color: var(--key-deep); }
@media (hover: hover) { .sk-btn-line:hover { background: var(--text); color: #fff; } .sk-btn-line.is-green:hover { background: var(--key-deep); color: #fff; } }
@media screen and (max-width: 768px) { .sk-btn-row .sk-btn-line { width: 100%; } }

/* 67 .sk-lineup：商品カード（写真＋英字名＋漢字名＋仕様チップ＋価格＋詳しく見る） ------------------ */
/* <div class="sk-lineup-grid"><article class="sk-lineup-card">
     <a class="sk-lineup-link" href="../lineup/kiwami/index.html">
       <figure class="sk-lineup-media"><img …></figure>
       <div class="sk-lineup-body"><p class="sk-lineup-en">KIWAMI</p><h3 class="sk-lineup-name">極<small>kiwami</small></h3>
         <p class="sk-lineup-sub">住まいの理想を極める家</p><p class="sk-lineup-catch">…</p>
         <ul class="sk-spec-chips"><li><b>UA値</b>0.39</li>…</ul>
         <p class="sk-lineup-price"><span>32坪の建物価格（税込）</span><b>3,136</b>万円〜</p>
         <span class="sk-lineup-more">詳しく見る</span></div></a></article>…</div> */
.sk-lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 48px; }
.sk-lineup-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.sk-lineup-card { min-width: 0; }
.sk-lineup-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.sk-lineup-media { position: relative; margin: 0; overflow: hidden; }
.sk-lineup-media img, .sk-lineup-media .sk-ph { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
@media (hover: hover) { .sk-lineup-link:hover .sk-lineup-media img { transform: scale(1.04); } .sk-lineup-link:hover .sk-lineup-more { background: var(--text); color: #fff; } }
.sk-lineup-body { display: flex; flex-direction: column; flex-grow: 1; padding: 28px 4px 0; }
.sk-lineup-en { color: var(--key-deep); font-family: var(--font-en); font-size: 15px; letter-spacing: .3em; line-height: 1.4; }
.sk-lineup-name { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 4px; font-family: var(--font-mincho); font-size: clamp(30px, 3vw, 40px); font-weight: 500; line-height: 1.4; letter-spacing: .1em; }
.sk-lineup-name small { font-family: var(--font-en); font-size: 17px; font-weight: 400; letter-spacing: .12em; color: var(--text-2); }
.sk-lineup-sub { color: var(--text-2); font-size: 13px; letter-spacing: .1em; }
.sk-lineup-catch { margin: 16px 0 18px; font-family: var(--font-mincho); font-size: 18px; line-height: 1.9; letter-spacing: .08em; }
.sk-spec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-spec-chips li { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 12px; border: 1px solid var(--green-line); font-size: 13px; line-height: 1.6; letter-spacing: .04em; }
.sk-spec-chips b { color: var(--key-deep); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.sk-lineup-price { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; }
.sk-lineup-price span { display: block; color: var(--text-2); font-size: 12px; }
.sk-lineup-price b { font-family: var(--font-mincho); font-size: 28px; font-weight: 600; color: var(--key-deep); letter-spacing: .02em; }
/* QA2：価格・仕様表の中の【要確認】を大きな明朝の数字に引きずらせない（page-lineup.css から移動） */
.sk-lineup-price .sk-tbc, .sk-price-box .sk-tbc { display: inline-block; margin-top: 4px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.7; color: var(--text); }
.sk-spec-table .sk-tbc { display: inline-block; margin-top: 4px; font-size: 11px; line-height: 1.6; }
.sk-lineup-more { display: inline-flex; align-self: flex-start; align-items: center; gap: 18px; margin-top: auto; padding: 12px 22px; border: 1px solid var(--text); font-size: 13px; letter-spacing: .14em; transition: background .3s, color .3s; }
.sk-lineup-price + .sk-lineup-more, .sk-spec-chips + .sk-lineup-more { margin-top: 24px; }
.sk-lineup-more::after { content: ""; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
@media screen and (max-width: 1100px) { .sk-lineup-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 768px) {
  .sk-lineup-grid, .sk-lineup-grid.is-three { grid-template-columns: 1fr; gap: 56px; }
  .sk-lineup-body { padding-top: 20px; }
}

/* 68 .sk-spec-table：4商品の仕様比較（SPは横スクロール、左列固定） ------------------------------ */
/* <div class="sk-spec-scroll" role="region" aria-label="4商品の仕様比較（横にスクロールできます）" tabindex="0">
     <table class="sk-spec-table"><caption>…</caption>
       <thead><tr><th scope="col">項目</th><th scope="col"><span>KIWAMI</span>極</th>…</tr></thead>
       <tbody><tr class="sk-spec-group"><th scope="colgroup" colspan="5">住宅性能</th></tr>
         <tr><th scope="row">UA値</th><td>0.39</td>…</tr></tbody></table></div>
   商品ページで自分の列を強調するときは該当の th/td に class="is-current" */
.sk-spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-light); background: #fff; }
.sk-spec-scroll:focus-visible { outline: 2px solid var(--key-deep); outline-offset: 2px; }
.sk-spec-table { width: 100%; min-width: 880px; font-size: 14px; line-height: 1.7; }
.sk-spec-table caption { padding: 16px 20px 0; color: var(--text-3); font-size: 12px; }
.sk-spec-table th, .sk-spec-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-light); vertical-align: middle; }
.sk-spec-table td + td, .sk-spec-table th + td, .sk-spec-table thead th + th { border-left: 1px solid var(--line-light); }
.sk-spec-table thead th { background: #fff; font-family: var(--font-mincho); font-size: 22px; font-weight: 500; text-align: center; letter-spacing: .1em; }
.sk-spec-table thead th span { display: block; color: var(--key-deep); font-family: var(--font-en); font-size: 12px; font-weight: 400; letter-spacing: .24em; }
.sk-spec-table thead th:first-child { position: sticky; left: 0; z-index: 2; width: 150px; font-family: var(--font-sans); font-size: 13px; color: var(--text-2); text-align: left; } /* QA2：見出し行の左列も本文の行と同じく固定（page-lineup.css から移動） */
.sk-spec-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--beige-soft); font-size: 13px; font-weight: 500; }
.sk-spec-table td { text-align: center; }
.sk-spec-group th { background: var(--green-soft); color: var(--key-deep); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-align: left; }
.sk-spec-table .is-current { background: #f3f7f2; }
.sk-spec-table thead .is-current { box-shadow: inset 0 3px 0 var(--key-deep); }
.sk-spec-hint { display: none; margin-top: 8px; color: var(--text-3); font-size: 12px; }
@media screen and (max-width: 900px) { .sk-spec-hint { display: block; } .sk-spec-table tbody th[scope="row"], .sk-spec-table thead th:first-child { width: 112px; } }

/* 69 .sk-spec-list（商品ページの仕様：項目と内容の2列）／ .sk-price-box（価格の目安） ---------------- */
.sk-spec-list { display: grid; grid-template-columns: 10em minmax(0, 1fr); border-top: 1px solid var(--line); }
.sk-spec-list dt, .sk-spec-list dd { padding: 20px 8px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.9; }
.sk-spec-list dt { color: var(--key-deep); font-family: var(--font-mincho); font-weight: 500; letter-spacing: .1em; }
.sk-price-box { max-width: 880px; margin: 0 auto; padding: 44px clamp(20px, 5vw, 64px); background: #fff; border: 1px solid var(--line-light); border-top: 3px solid var(--key-deep); }
.sk-price-box-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.sk-price-box-row dt { font-size: 15px; letter-spacing: .08em; }
.sk-price-box-row dd { color: var(--key-deep); font-family: var(--font-mincho); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.3; }
.sk-price-box-row dd small { margin-left: 4px; color: var(--text); font-family: var(--font-sans); font-size: 14px; font-weight: 500; }
.sk-price-box .content-note { margin-top: 20px; }
@media screen and (max-width: 768px) {
  .sk-spec-list { grid-template-columns: 1fr; }
  .sk-spec-list dt { padding: 16px 4px 0; border-bottom: 0; }
  .sk-spec-list dd { padding: 4px 4px 16px; font-size: 14px; }
}

/* 72 .sk-pillars：こだわりの目次（主要3本は大きく、補足2本は横長で小さく＝情報の優先度を形で示す） ---- */
/* <ol class="sk-pillars"><li><a href="#sk-method"><figure><img …></figure><p class="sk-label"><b>01</b><span>SK Method</span></p>
     <h3>SK工法</h3><p>…</p></a></li>…</ol>  ＋ <ol class="sk-pillars is-sub" start="4">…</ol> */
.sk-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.sk-pillars > li { min-width: 0; }
.sk-pillars a { display: block; height: 100%; color: inherit; }
.sk-pillars figure { margin: 0 0 20px; overflow: hidden; }
.sk-pillars img, .sk-pillars .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
@media (hover: hover) { .sk-pillars a:hover img { transform: scale(1.04); } .sk-pillars a:hover h3 { color: var(--key-deep); } }
.sk-pillars .sk-label { margin-bottom: 12px; }
.sk-pillars h3 { margin-bottom: 10px; font-family: var(--font-mincho); font-size: clamp(21px, 2vw, 26px); font-weight: 500; letter-spacing: .1em; line-height: 1.5; transition: color .3s; }
.sk-pillars p:not(.sk-label) { font-size: 14px; line-height: 1.9; }
.sk-pillars.is-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
.sk-pillars.is-sub a { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; background: var(--beige-soft); }
.sk-pillars.is-sub figure { margin: 0; }
.sk-pillars.is-sub h3 { font-size: 20px; }
/* QA2：is-sub の3枚版（写真が上・文字が下の小カード×3。media の「会社のこと」など。page-media.css から移動） */
@media screen and (min-width: 901px) {
  .sk-pillars.is-sub.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-pillars.is-sub.is-three a { grid-template-columns: 1fr; gap: 16px; }
}
/* QA2：カード末尾の「〜を見る ＞」（concept・guide の .cp-card-go／.gd-card-go を統一） */
.sk-card-go { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--key-deep); font-size: 14px; letter-spacing: .1em; }
.sk-card-go::after { content: ""; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
@media screen and (max-width: 900px) { .sk-pillars { grid-template-columns: 1fr; gap: 36px; } .sk-pillars.is-sub { grid-template-columns: 1fr; } }
@media screen and (max-width: 520px) { .sk-pillars.is-sub a { grid-template-columns: 1fr; gap: 14px; padding: 16px; } }

/* 73 .sk-stagger（大1＋小2の写真組）／ .sk-case-meta（事例の基本データ） ---------------------------- */
.sk-stagger { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.sk-stagger figure { margin: 0; }
/* QA2(2026-09-26)：figcaption があると img(height:100%) に押し出されて次の段の写真の下に隠れていた → 写真＋キャプションの2段にする */
.sk-stagger figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.sk-stagger figure:first-child { grid-row: span 2; }
.sk-stagger img, .sk-stagger .sk-ph { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-stagger figure:first-child img, .sk-stagger figure:first-child .sk-ph { aspect-ratio: auto; min-height: 100%; }
.sk-stagger figcaption { margin-top: 6px; color: var(--text-3); font-size: 12px; }
.sk-case-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; margin: 28px 0 0; padding: 20px 24px; background: #fff; border-left: 3px solid var(--key); font-size: 14px; line-height: 1.8; }
.sk-case-meta dt { color: var(--key-deep); font-weight: 500; white-space: nowrap; }
@media screen and (max-width: 768px) {
  .sk-stagger { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sk-stagger figure:first-child { grid-row: auto; grid-column: 1 / -1; }
  .sk-stagger figure:first-child img, .sk-stagger figure:first-child .sk-ph { aspect-ratio: 3 / 2; min-height: 0; }
  .sk-case-meta { grid-template-columns: 1fr; gap: 0 0; padding: 16px 18px; }
  .sk-case-meta dd + dt { margin-top: 8px; }
}

/* 74 .sk-subnav：兄弟ページのナビ（商品ラインナップ・ガイドの章）。現在地は aria-current="page" ---- */
.sk-subnav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.sk-subnav li { display: flex; } /* QA2：1項目だけ2行（ペットと暮らす家）になると枠の下辺がずれていた → 全項目を行の高さまで伸ばす */
.sk-subnav a { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 16px 18px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: #fff; color: var(--text); transition: background .25s; }
.sk-subnav-en { color: var(--key-deep); font-family: var(--font-en); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.sk-subnav b { font-family: var(--font-mincho); font-size: 17px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; }
.sk-subnav a:hover { background: var(--green-soft); }
.sk-subnav a[aria-current="page"] { background: var(--key-deep); color: #fff; }
.sk-subnav a[aria-current="page"] .sk-subnav-en { color: #d9e7da; }
@media screen and (max-width: 520px) { .sk-subnav ul { grid-template-columns: 1fr 1fr; } .sk-subnav a { min-height: 76px; padding: 12px 14px; } }

/* 75 .sk-check-list：このような方に（チェック付き・PC2列） -------------------------------------- */
.sk-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; max-width: 1000px; margin: 0 auto; border-top: 1px solid var(--line); }
.sk-check-list li { position: relative; padding: 18px 8px 18px 40px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.sk-check-list li::before { content: ""; position: absolute; top: 22px; left: 6px; width: 18px; height: 18px; border: 1px solid var(--key); border-radius: 50%; }
.sk-check-list li::after { content: ""; position: absolute; top: 26px; left: 12px; width: 5px; height: 9px; border-right: 2px solid var(--key-deep); border-bottom: 2px solid var(--key-deep); transform: rotate(45deg); }
@media screen and (max-width: 768px) { .sk-check-list { grid-template-columns: 1fr; } .sk-check-list li { font-size: 15px; } }

/* 76 .sk-note-box（注記の囲み）／ .sk-video-single（動画1本を大きく） ------------------------------ */
.sk-note-box { padding: 20px 24px; background: #fff; border: 1px solid var(--line); color: var(--text-2); font-size: 13px; line-height: 1.9; }
.sk-note-box p + p { margin-top: .6em; }
.sk-note-box p { font-size: 13px; }
.sk-video-single { max-width: 960px; margin-left: auto; margin-right: auto; }
.sk-video-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-video.is-portrait { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
@media screen and (max-width: 900px) { .sk-video-grid.is-three { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 768px) { .sk-video-grid.is-three { grid-template-columns: 1fr; } }

/* 77 .sk-reveal：スクロールで控えめに現れる（common.js が html に .js を付けたときだけ隠す） ------- */
.js .sk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.js .sk-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .sk-reveal { opacity: 1; transform: none; transition: none; } }
@media print { .js .sk-reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   page-concept.css｜コンセプト（sakae/concept/）実装A 2026-09-26
   - common.css §60〜77 の部品を使い、足りない所だけ .page-concept でスコープを切って追加
   - 色・書体は common.css のトークンのみ（新色なし）
   ========================================================================== */

/* 企業理念（STATEMENT 内の小写真＋明朝の一文） */
.page-concept .cp-philosophy { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 28px; margin: 48px 0 0; padding-top: 36px; border-top: 1px solid var(--hair); }
.page-concept .cp-philosophy img { width: 100%; height: auto; }
.page-concept .cp-philosophy-title { font-family: var(--font-mincho); font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; line-height: 1.9; letter-spacing: .14em; }
.page-concept .sk-statement-body .cp-philosophy-title + .cp-philosophy-note { margin-top: 8px; }
.page-concept .sk-statement-body .cp-philosophy-note { color: var(--text-3); font-size: 12px; line-height: 1.7; letter-spacing: .04em; }

/* 章への橋渡し（家の違いは、完成すると見えなくなる） */
.page-concept .cp-bridge .section-heading { margin-bottom: 36px; }
.page-concept .cp-bridge .sk-lead + .sk-lead { margin-top: 1.2em; }

/* 章本文の「暮らしにとっての意味」 */
.page-concept .cp-benefit { margin-top: 32px; padding: 22px 26px; background: #fff; border-left: 3px solid var(--key); }
.page-concept .cp-benefit-title { margin-bottom: 6px; color: var(--key-deep); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.page-concept .cp-benefit p:not(.cp-benefit-title) { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.page-concept .sk-chapter-body > .cp-benefit + p { margin-top: 1.3em; }

/* 特許証（書類なので縦長のまま小さく）＋特許表記 */
.page-concept .cp-patent { display: flex; align-items: center; gap: 20px; margin: 32px 0 0; }
.page-concept .cp-patent img { flex: 0 0 auto; width: 104px; height: auto; border: 1px solid var(--line-light); background: #fff; }
.page-concept .cp-patent figcaption { color: var(--text-2); font-size: 13px; line-height: 1.8; letter-spacing: .06em; }
.page-concept .cp-patent figcaption b { display: block; color: var(--key-deep); font-family: var(--font-mincho); font-size: 16px; font-weight: 500; letter-spacing: .1em; }

/* 章パネル内の小見出し（3つの技 など）と、sk-point の見出しを h4 で使う */
.page-concept .cp-points-title { margin: 88px 0 56px; font-family: var(--font-mincho); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.6; letter-spacing: .12em; text-align: center; }
.page-concept .sk-chapter-panel > .cp-points-title + .sk-points { margin-top: 0; }
.page-concept .sk-chapter-panel .sk-points .sk-point { background: #fff; }

/* 家相：補足3ブロック */
.page-concept .cp-kaso-notes { margin-top: 72px; }
.page-concept .cp-kaso-notes .feature-panel { display: flex; flex-direction: column; }
.page-concept .cp-kaso-notes .feature-panel h3 { font-family: var(--font-mincho); font-weight: 500; }
.page-concept .cp-kaso-notes .feature-panel > p { color: var(--text-2); font-size: 14px; line-height: 2; }
.page-concept .cp-kaso-notes .feature-panel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 16px; }
.page-concept .cp-kaso-notes .more-link { margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--key-deep); }

/* 04 職人の手仕事：写真4枚（大1＋小3） */
.page-concept .sk-stagger.is-four figure:first-child { grid-row: span 3; }
.page-concept .cp-craft-block + .cp-craft-block { margin-top: 72px; }
.page-concept .cp-craft-block h3 { margin-bottom: 20px; font-size: clamp(20px, 2vw, 26px); letter-spacing: .1em; }
.page-concept .cp-craft-block > p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.page-concept .cp-craft-block > p + p { margin-top: 1em; }
.page-concept .cp-craft-block .detail-list a { color: var(--key-deep); text-decoration: underline; text-underline-offset: 4px; }
.page-concept .cp-craft-lead { max-width: var(--measure); font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.page-concept .cp-craft-jisha {
  margin-top: 96px;
  padding: 44px 40px 40px;
  border: 1px solid rgba(62, 47, 35, .14);
  background: rgba(255, 255, 255, .72);
}
.page-concept .cp-craft-jisha-en {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--key-deep);
}
.page-concept .cp-craft-jisha h3 {
  margin-bottom: 16px;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: .1em;
}
.page-concept .cp-craft-jisha > p {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .06em;
}
.page-concept .cp-craft-jisha .sk-btn-row { margin-top: 28px; margin-bottom: 0; }

/* 05 赤穂とともに：導線カード・この町で続けていること */
.page-concept .sk-chapter-panel > .card-grid { margin-top: 64px; }
.page-concept .cp-community,
.media-page .cp-community { margin-top: 88px; padding: 56px clamp(20px, 5vw, 64px); background: var(--beige-soft); scroll-margin-top: 80px; }
.page-concept .cp-community h3,
.media-page .cp-community h2 { margin-bottom: 20px; font-family: var(--font-mincho); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.6; letter-spacing: .12em; }
.media-page .cp-community .section-en { margin-bottom: 12px; }
.media-page .cp-community { margin-top: 0; }
.page-concept .cp-community-text,
.media-page .cp-community-text { max-width: var(--measure); margin-bottom: 40px; }
.page-concept .cp-community-text p,
.media-page .cp-community-text p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.page-concept .cp-community-text p + p,
.media-page .cp-community-text p + p { margin-top: 1em; }
.media-page .cp-community .sk-video-item { margin-bottom: 40px; }
.page-concept .content-card .sk-tbc { font-size: 13px; }

/* 章の小写真（.sk-chapter-sub）を本文の横に並べる指定は、QA2 で common.css §63 に共通化 */

@media screen and (max-width: 768px) {
  .page-concept .cp-philosophy { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; padding-top: 28px; }
  .page-concept .cp-philosophy img { max-width: 260px; }
  .page-concept .cp-points-title { margin: 56px 0 44px; text-align: left; }
  .page-concept .cp-benefit { padding: 18px 18px; }
  .page-concept .cp-patent img { width: 84px; }
  .page-concept .cp-kaso-notes { margin-top: 48px; }
  .page-concept .sk-stagger.is-four figure:first-child { grid-row: auto; }
  .page-concept .sk-stagger.is-four figure:last-child { grid-column: 1 / -1; }
  .page-concept .cp-community,
  .media-page .cp-community { margin-top: 56px; padding: 36px 18px; }
  .media-page .cp-community { margin-top: 0; }
  .page-concept .cp-craft-block + .cp-craft-block { margin-top: 48px; }
  .page-concept .cp-craft-jisha { margin-top: 56px; padding: 32px 24px 28px; }
}

/* ==========================================================================
   page-guide.css｜家づくりガイド（sakae/guide/）実装A 2026-09-26
   - common.css §60〜77 の部品を使い、足りない所だけ .page-guide でスコープを切って追加
   - 色・書体は common.css のトークンのみ（新色なし）
   ========================================================================== */

/* 目次：6項目なので PC 3列×2段 */
.page-guide .anchor-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 章の見出しブロック（番号ラベル＋h2＋リード） */
.page-guide .gd-head { max-width: 800px; margin-bottom: 64px; }
.page-guide .gd-head h2 { margin-bottom: 24px; }
.page-guide .gd-head > p:not(.sk-label) { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }

/* 01 流れ：4つの段階 */
.page-guide .gd-stage + .gd-stage { margin-top: 88px; }
.page-guide .gd-stage-head { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 48px; align-items: start; margin-bottom: 44px; padding-top: 28px; border-top: 1px solid var(--hair); }
.page-guide .gd-stage-en { grid-row: span 3; color: var(--key-deep); font-family: var(--font-en); font-size: 14px; line-height: 1.6; letter-spacing: .24em; text-transform: uppercase; }
.page-guide .gd-stage-en b { display: block; font-size: 40px; font-weight: 400; letter-spacing: .04em; line-height: 1.2; }
.page-guide .gd-stage-head h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: .12em; line-height: 1.6; }
.page-guide .gd-stage-head p { font-size: 15px; line-height: 2; letter-spacing: .06em; }
.page-guide .gd-stage-term { color: var(--text-2); font-size: 13px !important; }
.page-guide .gd-stage-term b { color: var(--key-deep); font-weight: 500; }
.page-guide .process-step h4 { margin-bottom: 10px; font-family: var(--font-mincho); font-size: 19px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; }
.page-guide .gd-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
.page-guide .process-step .text-link { display: inline-block; margin-top: 8px; font-size: 14px; }
.page-guide .gd-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: 64px 0 0 auto; }
.page-guide .gd-photos figure { margin: 0; }
.page-guide .gd-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.page-guide .gd-photos figcaption { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 1.7; }
.page-guide .gd-genba { margin-top: 120px; }

/* 02 お引渡し式：面なしの章（本文＋動画） */
.page-guide #ceremony .sk-chapter-body > p:not(.sk-chapter-lead) .sk-tbc { font-size: 13px; }
.page-guide #ceremony .sk-chapter-body > .sk-btn-row { margin-top: 1.6em; }
.page-guide #ceremony-videos { margin-top: 48px; }
.page-guide #ceremony .content-note { max-width: var(--measure); }
@media screen and (min-width: 901px) {
  .page-guide #ceremony-videos.sk-video-grid.is-three {
    grid-template-rows: auto auto;
    align-items: start;
  }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item:nth-child(1) { grid-column: 1; grid-row: 1; }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item:nth-child(2) { grid-column: 1; grid-row: 2; }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item:nth-child(3) { grid-column: 2; grid-row: 1; }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item.is-portrait-span { grid-column: 3; grid-row: 1 / span 2; }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .content-note { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
}
@media screen and (max-width: 900px) {
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item,
  .page-guide #ceremony-videos.sk-video-grid.is-three > .sk-video-item.is-portrait-span {
    grid-column: auto;
    grid-row: auto;
  }
  .page-guide #ceremony-videos.sk-video-grid.is-three > .content-note { grid-column: 1 / -1; }
}

/* 03 資金計画 */
.page-guide .sk-points.is-white .sk-point h3 { font-size: clamp(19px, 1.8vw, 23px); }

/* 04 技術・性能（「0.39〜0.68」のような幅のある数値は字数が多いので少し小さく） */
.page-guide .gd-bignum .sk-bignum-value { font-size: clamp(34px, 4vw, 56px); white-space: nowrap; }
.page-guide .gd-tech-cards { margin-top: 64px; }
.page-guide .gd-inline-link { margin-top: 28px; }

/* 06 保証：60年保証の図（HTML/CSS） */
.page-guide .gd-60 { margin: 72px 0 0; padding: 44px clamp(20px, 4vw, 56px) 40px; background: var(--beige-soft); }
.page-guide .gd-60-title { margin-bottom: 28px; font-family: var(--font-mincho); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: .12em; line-height: 1.6; }
.page-guide .gd-60-bar { position: relative; display: grid; grid-template-columns: 1fr 2fr; height: 56px; margin-bottom: 8px; }
.page-guide .gd-60-bar span { display: flex; align-items: center; padding: 0 16px; font-size: 14px; letter-spacing: .08em; line-height: 1.4; }
.page-guide .gd-60-bar .is-initial { background: var(--key-deep); color: #fff; }
.page-guide .gd-60-bar .is-extend { background: #fff; border: 1px dashed var(--key); border-left: 0; color: var(--key-deep); }
.page-guide .gd-60-scale { display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 36px; color: var(--text-2); font-size: 13px; letter-spacing: .04em; }
.page-guide .gd-60-scale > span:last-child { display: flex; justify-content: space-between; }
.page-guide .gd-60-scale i { font-style: normal; }
.page-guide .gd-60-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: gd60; }
.page-guide .gd-60-steps li { position: relative; padding: 16px 14px 16px; background: #fff; border: 1px solid var(--line-light); font-size: 14px; line-height: 1.7; letter-spacing: .04em; text-align: center; }
.page-guide .gd-60-steps li + li::before { content: ""; position: absolute; top: 50%; left: -11px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--key); transform: translateY(-50%); }
.page-guide .gd-60-steps li.is-goal { background: var(--key-deep); border-color: var(--key-deep); color: #fff; font-weight: 700; }
.page-guide .gd-60-note { margin-top: 20px; color: var(--text-2); font-size: 13px; line-height: 1.9; }
.page-guide .gd-table { margin-top: 72px; }
.page-guide .gd-table .sk-table th { width: 30%; }
.page-guide .gd-scope { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-guide .gd-scope summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 8px; cursor: pointer; font-family: var(--font-mincho); font-size: 16px; letter-spacing: .08em; list-style: none; }
.page-guide .gd-scope summary::-webkit-details-marker { display: none; }
.page-guide .gd-scope summary::after { content: "＋"; color: var(--key-deep); }
.page-guide .gd-scope[open] summary::after { content: "－"; }
.page-guide .gd-scope p { padding: 0 8px 20px; font-size: 14px; line-height: 2; }

@media screen and (max-width: 900px) {
  .page-guide .anchor-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-guide .gd-60-steps { grid-template-columns: 1fr; gap: 14px; }
  .page-guide .gd-60-steps li + li::before { top: -12px; left: 50%; border-width: 8px 6px 0 6px; border-color: var(--key) transparent transparent transparent; transform: translateX(-50%); }
}
@media screen and (max-width: 768px) {
  .page-guide .gd-head { margin-bottom: 40px; }
  .page-guide .gd-bignum { grid-template-columns: 1fr; }
  .page-guide .gd-bignum .sk-bignum { border-left: 0 !important; }
  .page-guide .gd-bignum .sk-bignum + .sk-bignum { border-top: 1px solid var(--hair); }
  .page-guide .gd-bignum .sk-bignum-value { font-size: 36px; }
  .page-guide .gd-stage + .gd-stage { margin-top: 56px; }
  .page-guide .gd-stage-head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 28px; padding-top: 20px; }
  .page-guide .gd-stage-en { grid-row: auto; }
  .page-guide .gd-stage-en b { display: inline; margin-right: 10px; font-size: 30px; }
  .page-guide .gd-steps--2 { grid-template-columns: 1fr; }
  .page-guide .gd-photos { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .page-guide .gd-genba { margin-top: 72px; }
  .page-guide .gd-60 { margin-top: 48px; padding: 28px 16px; }
  .page-guide .gd-60-bar { height: auto; min-height: 52px; }
  .page-guide .gd-60-bar span { padding: 8px 10px; font-size: 12px; }
  .page-guide .gd-60-scale { font-size: 12px; }
  .page-guide .gd-table { margin-top: 48px; }
  .page-guide .gd-table .sk-table th { width: 100%; }
}
@media screen and (max-width: 400px) { .page-guide .anchor-nav { grid-template-columns: 1fr; } }

/* ==========================================================================
   栄建築 商品ラインナップ page-lineup.css（第2弾 2026-09-26）
   対象：lineup/index.html（body.page-lineup）と商品5ページ（body.page-lineup-child）
   - common.css → pages.css の後に読み込む。色・書体は common.css のトークンのみ
   - 新しい部品は増やさず、common.css §60〜77 の部品の「この画面での調整」だけを書く
   ========================================================================== */

/* ---- 【要確認】を大きな数字・価格の書体に引きずらせない指定は QA2 で common.css §67 に移動 ---- */

/* ---- lineup：どの商品でも同じこと（feature-grid 2×2） ---- */
.page-lineup .lp-process .feature-panel h3 { font-size: 20px; }
.page-lineup .lp-process .feature-panel .more-link { margin-top: 16px; color: var(--key-deep); font-size: 14px; }
@media screen and (max-width: 768px) {
  .page-lineup .lp-process.feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .page-lineup .lp-process .feature-panel { padding: 24px 20px; }
}

/* ---- lineup：カード下の注記 ---- */
.page-lineup .lp-card-note { margin-top: 40px; }

/* ---- lineup：仕様比較表（全項目）。SPは .sk-spec-scroll の中だけ横スクロール、左列固定 ---- */
.page-lineup .sk-spec-table { min-width: 960px; table-layout: fixed; }
/* 見出し行の左列の固定（sticky・幅150px／SP112px）は QA2 で common.css §68 に移動 */
.page-lineup .sk-spec-table td { font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.page-lineup .sk-spec-table tr.is-num td { font-family: var(--font-mincho); font-size: 20px; font-weight: 600; color: var(--key-deep); }
.page-lineup .sk-spec-table tr.is-text td { text-align: left; }
@media screen and (max-width: 900px) {
  .page-lineup .sk-spec-table { min-width: 820px; }
  .page-lineup .sk-spec-table thead th { font-size: 19px; }
  .page-lineup .sk-spec-table th, .page-lineup .sk-spec-table td { padding: 12px 12px; }
}

/* ---- lineup：価格の目安（.sk-price 3列） ---- */
.page-lineup .sk-price td { text-align: left; }
.page-lineup .sk-price tbody th small { margin-left: 6px; font-family: var(--font-en); font-size: 14px; color: var(--text-2); letter-spacing: .08em; }
.page-lineup .sk-price td .sk-tbc { margin-top: 4px; }

/* ---- lineup：暮らし方から選ぶ（2枚）＝写真＋文字だけのカード ---- */
.page-lineup .lp-lifestyle .sk-lineup-more { margin-top: 24px; }

/* ---- lineup：どれを選べばいい？（4商品の「向いている方」＋チェックリスト） ---- */
.lp-which-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lp-which { padding: 36px clamp(20px, 3.4vw, 44px) 28px; background: #fff; border: 1px solid var(--line-light); border-top: 3px solid var(--key-deep); }
.lp-which h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .1em; }
.lp-which h3 small { font-family: var(--font-en); font-size: 16px; font-weight: 400; color: var(--text-2); letter-spacing: .12em; }
.lp-which-lead { margin-bottom: 18px; font-family: var(--font-mincho); font-size: 16px; line-height: 1.9; letter-spacing: .06em; }
.lp-which .sk-check-list { grid-template-columns: 1fr; max-width: none; }
.lp-which .sk-check-list li { padding-top: 14px; padding-bottom: 14px; font-size: 14px; }
.lp-which .sk-check-list li::before { top: 17px; }
.lp-which .sk-check-list li::after { top: 21px; }
.lp-which .more-link { margin-top: 18px; color: var(--key-deep); font-size: 14px; }
.lp-which-close { margin-top: 48px; font-family: var(--font-mincho); font-size: clamp(17px, 1.8vw, 20px); line-height: 2; letter-spacing: .06em; text-align: center; }
@media screen and (max-width: 768px) {
  .lp-which-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-which { padding: 26px 18px 20px; }
  .lp-which-close { text-align: left; }
}

/* ---- 商品ページ：施工例の注記・性能の補足 ---- */
.page-lineup-child .lp-spec-note { max-width: 880px; }
.page-lineup-child .sk-bignum-value small { margin-left: .2em; }
.page-lineup-child .sk-spec-list { margin-top: 56px; }
.page-lineup-child .lp-closing-sub { margin-top: 40px; margin-bottom: 14px; color: var(--key-deep); font-family: var(--font-mincho); font-size: 18px; font-weight: 500; letter-spacing: .12em; }
.page-lineup-child .sk-statement-body .lp-closing-sub + p { margin-top: 0; }
.page-lineup-child .lp-price-link { margin-top: 28px; justify-content: center; }
@media screen and (max-width: 768px) {
  .page-lineup-child .sk-spec-list { margin-top: 36px; }
}

/* ---- reiwa：5つのこと の図解（インラインSVG。公式の図版は許諾待ちのため HTML/SVG で作図） ---- */
.lp-diagram { margin: 0; }
.lp-diagram svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--beige-soft); }
.lp-diagram figcaption { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 1.7; }
.lp-diagram .d-line { fill: none; stroke: var(--text-2); stroke-width: 2; }
.lp-diagram .d-house { fill: #fff; stroke: var(--text-2); stroke-width: 2; }
.lp-diagram .d-sun-s { fill: none; stroke: #c98a00; stroke-width: 2.5; stroke-dasharray: 8 6; }
.lp-diagram .d-sun-w { fill: none; stroke: var(--key); stroke-width: 2.5; stroke-dasharray: 8 6; }
.lp-diagram .d-in { fill: none; stroke: var(--key-deep); stroke-width: 3; }
.lp-diagram .d-out { fill: none; stroke: #8a8578; stroke-width: 3; }
.lp-diagram .d-box { fill: var(--green-soft); stroke: var(--key-deep); stroke-width: 2; }
.lp-diagram text { font-family: var(--font-sans); font-size: 20px; fill: var(--text); }
.lp-diagram text.d-small { font-size: 17px; fill: var(--text-2); }
.lp-diagram text.d-green { fill: var(--key-deep); }
.lp-diagram text.d-amber { fill: #8a5a00; }

/* ---- reiwa：栄建築だからできる（sk-chapter.is-plain）の中の「標準仕様との関係」 ---- */
.page-lineup-reiwa .lp-relation { max-width: var(--measure); margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--hair); }
.page-lineup-reiwa .lp-relation h3 { margin-bottom: 14px; font-family: var(--font-mincho); font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; letter-spacing: .1em; line-height: 1.7; }
.page-lineup-reiwa .lp-relation p { font-size: 15px; line-height: 2.2; letter-spacing: .06em; }
.page-lineup-reiwa .lp-relation .sk-btn-row { margin-top: 28px; }
.page-lineup-reiwa .sk-statement .sk-note-box { margin-top: 36px; }
.page-lineup-reiwa .lp-cta-after { margin-top: 28px; color: var(--text-2); font-size: 14px; line-height: 1.9; text-align: center; }

/* ---- 極・匠・和・紡：AI生成写真の明示 ---- */
.page-lineup-child .page-header-img { position: relative; }
.lp-ai-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(29,31,28,.72);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;
  backdrop-filter: blur(5px);
}
.lp-ai-note { margin-top: 20px; }

@media screen and (max-width: 768px) {
  .page-lineup-reiwa .lp-relation { margin-top: 40px; padding-top: 28px; }
  .page-lineup-reiwa .lp-cta-after { text-align: left; }
  .lp-ai-badge { right: 10px; bottom: 10px; min-height: 30px; padding: 5px 9px; font-size: 12px; }
}


/* ==========================================================================
   メディア掲載・表彰歴（2026-09-26）
   common.css §70 .sk-record と page-media.css
   ========================================================================== */

/* 70 .sk-record：年表（表彰・認定／メディア掲載） ------------------------------------------------ */
/* <ol class="sk-record"><li class="sk-record-item">
     <p class="sk-record-year"><time datetime="2025">2025</time></p>
     <div class="sk-record-body"><p class="sk-record-meta"><span class="sk-tag">表彰</span>2025年〇月</p><h3>…</h3><p>…</p></div>
     <figure class="sk-record-media"><img …></figure></li></ol> */
.sk-record { border-top: 1px solid var(--hair); }
.sk-record-item { display: grid; grid-template-columns: 140px minmax(0, 1fr) 300px; gap: 20px clamp(24px, 4vw, 56px); padding: 40px 0; border-bottom: 1px solid var(--hair); }
.sk-record-item.no-media { grid-template-columns: 140px minmax(0, 1fr); }
.sk-record-year { color: var(--key-deep); font-family: var(--font-en); font-size: 40px; line-height: 1.1; letter-spacing: .04em; }
.sk-record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-2); font-size: 13px; }
.sk-record-body h3 { margin-bottom: 12px; font-family: var(--font-mincho); font-size: clamp(19px, 1.9vw, 23px); font-weight: 500; line-height: 1.6; letter-spacing: .08em; }
.sk-record-body p:not(.sk-record-meta) { font-size: 15px; line-height: 2.1; }
.sk-record-body .sk-source { font-size: 12px; }
.sk-record-media { margin: 0; }
.sk-record-media img, .sk-record-media .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-record-media img.is-contain { object-fit: contain; background: var(--beige-soft); }
.sk-record-media figcaption { margin-top: 6px; color: var(--text-3); font-size: 12px; }
@media screen and (max-width: 900px) { .sk-record-item { grid-template-columns: 110px minmax(0, 1fr); } .sk-record-media { grid-column: 2; } }
@media screen and (max-width: 768px) {
  .sk-record-item, .sk-record-item.no-media { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .sk-record-media { grid-column: auto; }
  .sk-record-year { font-size: 30px; }
}

/* ==========================================================================
   page-media.css  メディア掲載・表彰歴（/media/）2026-09-26 実装C
   - common.css / pages.css の後に読み込む。.page-media でスコープ
   ========================================================================== */

/* 数字：技能顕功賞は数字を大きくせず「平成22年度」を明朝で（原稿の指定） */
.page-media .media-bignum-era { display: inline-block; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .08em; line-height: 1.6; }

/* 年表：年が未確定の行（『兵庫での家づくり』） */
.page-media .media-year-tbc { color: var(--text-3); }

/* 年表の本文中のリンク行 */
.page-media .sk-record-body .sk-btn-row { margin-top: 20px; }

/* 年表の縦長の書類（表彰状）は、枠を縦長にして小さく見せる */
.page-media .sk-record-media img.is-contain[height="1200"] { aspect-ratio: 3 / 4; max-width: 240px; margin: 0 auto; }

/* 年表：本文末尾の動画 */
.page-media .sk-record-body .sk-record-body-video { margin: 28px 0 0; max-width: 560px; }

/* COMPANY：3枚を横並び → QA2 で common.css の .sk-pillars.is-sub.is-three に共通化 */

/* ==========================================================================
   物件情報（/property/）
   common.css §71 と page-property.css
   ========================================================================== */

.sk-chip-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.sk-chip-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--green-line); border-radius: 30px; color: var(--key-deep); font-size: 14px; letter-spacing: .06em; }
.sk-chip-nav a[aria-current="true"], .sk-chip-nav a:hover { background: var(--key-deep); border-color: var(--key-deep); color: #fff; }
.sk-property-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.sk-property { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line-light); scroll-margin-top: 90px; }
.sk-property-media { position: relative; margin: 0; }
.sk-property-media img, .sk-property-media .sk-ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sk-property-type { position: absolute; top: 0; left: 0; padding: 4px 14px; background: var(--key-deep); color: #fff; font-size: 12px; letter-spacing: .12em; }
.sk-property-status { position: absolute; top: 0; right: 0; padding: 4px 12px; background: rgba(28, 26, 23, .82); color: #fff; font-size: 12px; letter-spacing: .08em; }
.sk-property-body { display: flex; flex-direction: column; flex-grow: 1; padding: 22px 22px 24px; }
.sk-property-area { color: var(--text-2); font-size: 12px; letter-spacing: .12em; }
.sk-property h3, .sk-property-name { margin: 4px 0 10px; font-family: var(--font-mincho); font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.sk-property-name a { color: inherit; }
.sk-property-price { margin-bottom: 14px; color: var(--key-deep); font-family: var(--font-mincho); font-size: 16px; font-weight: 600; }
.sk-property-price b { font-size: 30px; letter-spacing: .02em; }
.sk-property-point { margin-bottom: 12px; font-size: 13px; line-height: 1.8; }
.sk-property-meta { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 6px 10px; margin-bottom: 20px; font-size: 13px; line-height: 1.7; }
.sk-property-meta dt { color: var(--text-2); font-weight: 500; }
.sk-property-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.sk-property-actions .f-btn { flex: 1 1 auto; }
@media screen and (max-width: 1100px) { .sk-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 768px) { .sk-property-grid { grid-template-columns: 1fr; gap: 28px; } }

.page-property .page-property-list.content-section { padding: 36px 0 96px; }
.page-property .page-intro--property-list {
    width: auto;
    max-width: none;
    margin: 0 0 28px;
    padding: 0;
    text-align: left;
}
.page-property .page-intro--property-list .page-intro-title {
    margin-bottom: 10px;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.5;
    letter-spacing: .12em;
}
.page-property .page-intro-lead {
    margin: 0 0 12px;
    font-family: var(--font-mincho);
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .08em;
}
.page-property .page-intro-text--compact {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .06em;
}
.page-property .property-asof { margin-top: 16px; text-align: left; font-size: 12px; }
.page-property.post-type-archive-property .sk-chip-nav { margin-bottom: 32px; }
.single-property #main > .content-section:first-of-type { padding-top: 48px; }
.page-property .property-group { scroll-margin-top: 90px; }
.page-property .property-group + .property-group { margin-top: 64px; }
.page-property .property-group-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); font-family: var(--font-mincho); font-size: clamp(21px, 2.2vw, 26px); font-weight: 500; letter-spacing: .1em; scroll-margin-top: 90px; }
.page-property .property-group-title small { color: var(--text-2); font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.page-property .property-notes { max-width: 880px; margin-top: 72px; padding: 28px 32px; background: #fff; border: 1px solid var(--line-light); }
.page-property .property-notes h3 { margin-bottom: 12px; font-family: var(--font-mincho); font-size: 18px; font-weight: 500; letter-spacing: .08em; }
.page-property .property-notes li { position: relative; padding-left: 1.1em; font-size: 13px; line-height: 1.9; }
.page-property .property-notes li::before { content: "・"; position: absolute; left: 0; }
.page-property #why .sk-btn-row { flex-direction: column; align-items: flex-start; margin-top: 28px; }
.page-property .property-detail { max-width: 880px; }
.page-property .property-detail-media { margin: 0 0 28px; }
.page-property .property-detail-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.page-property .property-detail .sk-property-meta { margin-top: 28px; font-size: 15px; }
.page-property .property-detail .property-body { margin-top: 32px; }
.page-property .property-detail .property-document { margin-top: 16px; }
.page-property .property-detail .sk-btn-row { margin-top: 36px; }
.page-property .property-extra { margin-top: 48px; }
.page-property .property-extra h2 { margin-bottom: 16px; font-family: var(--font-mincho); font-size: 22px; font-weight: 500; letter-spacing: .08em; }
.page-property .property-sheet { margin: 0; }
.page-property .property-sheet img { width: 100%; height: auto; }
.page-property .property-map { position: relative; margin-top: 16px; aspect-ratio: 16 / 10; }
.page-property .property-sheet + .property-map { margin-top: 16px; }
.page-property .property-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media screen and (min-width: 769px) {
  .single-property .breadcrumb ul,
  .single-property .breadcrumb ul li:not(:last-of-type)::after { font-size: 16px; }
}
.single-property .property-detail { font-size: 16px; line-height: 1.8; }
.single-property .property-detail-media { margin-bottom: 22px; }
.single-property .property-detail-title { margin: 0 0 10px; font-family: var(--font-mincho); font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
.single-property .property-detail .sk-property-area,
.single-property .property-detail .sk-property-point,
.single-property .property-detail .sk-property-price,
.single-property .property-detail .property-body { font-size: 16px; line-height: 1.8; }
.single-property .property-detail .sk-property-price b { font-size: 32px; }
.single-property .property-detail .sk-property-meta,
.single-event .sk-property-meta { grid-template-columns: 9em minmax(0, 1fr); gap: 0; margin-top: 28px; border: 1px solid var(--line-light); font-size: 16px; line-height: 1.7; }
.single-property .property-detail .sk-property-meta dt,
.single-property .property-detail .sk-property-meta dd,
.single-event .sk-property-meta dt,
.single-event .sk-property-meta dd { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line-light); }
.single-property .property-detail .sk-property-meta dt,
.single-event .sk-property-meta dt { background: var(--beige-soft); color: var(--key-deep); font-weight: 500; }
.single-event .sk-property-meta dt { background: var(--beige-dark); }
.single-property .property-detail .sk-property-meta dd,
.single-event .sk-property-meta dd { background: #fff; }
.single-property .property-detail .sk-property-meta dt:nth-last-child(-n+2),
.single-property .property-detail .sk-property-meta dd:nth-last-child(-n+2),
.single-event .sk-property-meta dt:nth-last-child(-n+2),
.single-event .sk-property-meta dd:nth-last-child(-n+2) { border-bottom: 0; }
.single-property .property-extra,
.single-event .property-extra { padding: 28px 28px 32px; background: var(--beige-soft); border: 1px solid var(--line-light); }
.single-event .property-extra { margin-top: 56px; background: #fff; }
.single-event .sk-btn-row { margin-top: 28px; }
.single-property .property-extra h2,
.single-event .property-extra h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); font-size: 22px; }
.single-event .property-extra h2 { font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: 0.08em; }
.single-property .property-extra h2::before,
.single-event .property-extra h2::before { content: ""; flex: 0 0 4px; width: 4px; height: 1.05em; background: var(--key-deep); }
.single-property .property-sheet { background: #fff; }
.single-property .property-detail .f-btn { font-size: 16px; }
@media screen and (max-width: 768px) {
  .single-property .property-detail .sk-property-meta,
  .single-event .sk-property-meta { grid-template-columns: 1fr; }
  .single-property .property-detail .sk-property-meta dt,
  .single-event .sk-property-meta dt { padding-bottom: 0; border-bottom: 0; }
  .single-property .property-detail .sk-property-meta dd,
  .single-event .sk-property-meta dd { padding-top: 6px; }
  .single-property .property-extra,
  .single-event .property-extra { padding: 22px 16px 24px; }
}
@media screen and (max-width: 768px) {
  .page-property .property-asof { text-align: left; }
  .page-property .property-group + .property-group { margin-top: 44px; }
  .page-property .property-notes { margin-top: 48px; padding: 22px 18px; }
  .page-property #why .sk-btn-row { align-items: stretch; }
}

/* 介護リフォーム（/care-reform/）。縦写真は切らず、横写真は 3:2 */
.page-care-reform .sk-ba img { aspect-ratio: 3 / 4; object-fit: contain; background: #f4f1ec; }
.page-care-reform .sk-ba figure.is-wide img { aspect-ratio: 3 / 2; }
.page-care-reform .sk-ba-item + .sk-ba-item { padding-top: 56px; border-top: 1px solid var(--line); }
.page-care-reform .sk-ba-item .case-study-meta { margin-bottom: 4px; color: var(--key-deep); font-family: var(--font-en); letter-spacing: .2em; }
.page-care-reform .sk-ba-item h3 { margin-bottom: 18px; line-height: 1.7; }
.page-care-reform #services .content-card { border-top: 3px solid var(--key); }
.page-care-reform .image-gallery { grid-template-columns: minmax(0, 480px); margin-top: 18px; }
.page-care-reform .image-gallery img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #f4f1ec; }
/* 介護保険ブロック（care-sub はこのページのみ）。body の page-care-reform に依存しない */
#subsidy .detail-list--two + .care-sub { margin: 56px 0 16px; font-size: 18px; letter-spacing: .08em; }
#subsidy .care-sub + .detail-list--two + p { margin-top: 36px; }
#subsidy .care-sub + .detail-list--two + p + p { margin-top: 16px; }
@media screen and (max-width: 768px) {
  .page-care-reform .sk-ba-item + .sk-ba-item { padding-top: 40px; }
  .page-care-reform .image-gallery { grid-template-columns: 1fr; }
}

/* 耐震リフォーム（/seismic-reform/） */
.page-seismic-reform .image-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-seismic-reform .image-gallery img { height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #f4f1ec; }
.page-seismic-reform #media .media-split-media img { aspect-ratio: 3 / 4; object-fit: contain; background: #f4f1ec; }
#diagnosis .ad-sub-title + p { margin-bottom: 28px; }
#subsidy .detail-list:not(.detail-list--two) + p { margin-top: 36px; }
@media screen and (max-width: 768px) {
  .page-seismic-reform .image-gallery { grid-template-columns: 1fr; }
}

/* 現場レポート詳細の工程 */
.report-log {
  list-style: none;
  margin: 64px auto 0;
  padding: 0;
}
.report-log-item {
  padding: 32px 0;
  border-top: 1px solid var(--line-light);
}
.report-log-item time {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--key-deep);
}
.report-log-item h2 {
  margin: 8px 0 12px;
  font-size: 22px;
  letter-spacing: .06em;
}
.report-log-item p {
  margin: 0;
}
.report-log-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.report-log-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.report-related {
  margin-top: 40px;
}

/* 施工事例・現場レポートなどの関連ブロック */
.sakae-related-property {
  margin-top: 56px;
}
.sakae-related-property-inner {
  padding: 32px 28px 36px;
  background: var(--bg-pale, #f7f5f2);
  border: 1px solid var(--line-light);
}
.sakae-related-property-head {
  margin-bottom: 24px;
  text-align: center;
}
.sakae-related-property-title {
  margin: 0 0 8px;
  font-family: var(--font-mincho);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.6;
}
.sakae-related-property-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub, #666);
}
.sakae-related-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.sakae-related-property-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line-light);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sakae-related-property-card:hover {
  border-color: var(--key);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.sakae-related-property-label {
  display: block;
  padding: 10px 14px 0;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--key-deep);
}
.sakae-related-property-thumb {
  margin: 10px 14px 0;
  overflow: hidden;
}
.sakae-related-property-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.sakae-related-property-body {
  padding: 14px 14px 18px;
}
.sakae-related-property-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.sakae-related-property-place {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub, #666);
}
.sakae-related-property-grid:has(> :only-child) {
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .sakae-related-property-inner {
    padding: 24px 18px 28px;
  }
  .sakae-related-property-grid {
    grid-template-columns: 1fr;
  }
  .sakae-related-property-grid:has(> :only-child) {
    max-width: none;
  }
}
@media screen and (min-width: 768px) {
  .sakae-related-property-grid:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* お客様の声の質問と回答 */
.voice-body {
  margin-top: 48px;
}
.voice-heading {
  margin: 0 0 28px;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1.7;
}
.voice-prose p,
.voice-qa-a p {
  margin: 0 0 1em;
  line-height: 2;
}
.voice-prose p:last-child,
.voice-qa-a p:last-child {
  margin-bottom: 0;
}
.voice-qa-item {
  padding: 32px 0;
  border-top: 1px solid var(--line-light);
}
.voice-qa-item:last-child {
  border-bottom: 1px solid var(--line-light);
}
.voice-qa-q,
.voice-qa-a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
}
.voice-qa-q {
    margin: 0;
    font-family: var(--font-mincho);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1.8;
    background: var(--beige-dark);
    padding: 10px;
}
.voice-qa-a {
  margin-top: 18px;
  padding: 0 10px;
}
.voice-mark {
  font-family: "EB Garamond", serif;
  font-size: 28px;
  line-height: 1;
  color: var(--key);
}
.voice-qa-a .voice-mark {
  color: var(--key-deep);
}
.voice-qa-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.voice-qa-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media screen and (max-width: 768px) {
  .report-log-images { grid-template-columns: 1fr; }
  .report-log-item h2 { font-size: 18px; }
  .voice-heading { font-size: 18px; }
  .voice-qa-q { font-size: 16px; }
  .voice-qa-images { grid-template-columns: 1fr; }
}

/* ----- page-aircon ----- */
.page-aircon .aircon-process-media {
  margin-bottom: 32px;
}
.page-aircon .aircon-media-slot {
  margin: 0;
}
.page-aircon .aircon-media-slot img {
  width: 100%;
  height: auto;
  display: block;
}
.page-aircon .aircon-work-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 0.35em;
}
.page-aircon .aircon-work-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(47, 101, 86, 0.35);
  text-underline-offset: 0.15em;
}
.page-aircon .aircon-work-title a:hover {
  color: var(--key);
}
.page-aircon .aircon-work-link {
  margin: 0.75em 0 0;
}
.page-aircon #works .aircon-work-list {
  width: 100%;
}
.page-aircon #works .aircon-work-list .process-step {
  align-self: start;
}
.page-aircon #works .aircon-work-actions {
  width: 100%;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid #c8d0c7;
}
.page-aircon #sakae .media-split-media img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   追加分（2026年10月 写真・文章）— 旧 sakae-add.css を統合
   ========================================================================== */

/* ---- 共通：小見出し ---- */
.ad-sub-title{
    margin-bottom: 18px;
    font-family: var(--font-mincho, "Shippori Mincho", serif);
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
}
h3.ad-sub-title.section-gap{ margin-bottom: 24px; }

/* ---- 共通：横長の資料画像（ブランド帯） ---- */
.ad-banner{
    margin: 0 0 56px;
}
.ad-banner img{
    display: block;
    width: 100%;
    height: auto;
}

/* ---- 共通：資料・図版（全体を見せる） ---- */
.ad-doc{
    margin: 40px 0 0;
    padding: clamp(14px, 2.4vw, 28px);
    background: #fff;
    border: 1px solid var(--beige-dark);
}
.ad-doc img{
    display: block;
    width: 100%;
    height: auto;
}
.ad-doc figcaption{
    margin-top: 12px;
    color: #666;
    font-size: 13px;
    line-height: 1.8;
}

/* media-split の画像を、切り抜かずに全体表示する */
.media-split-media--contain img{
    aspect-ratio: auto;
    object-fit: contain;
    max-height: 520px;
}
.ad-doc-portrait img{
    max-height: 640px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ---- 共通：表の横スクロール ---- */
.ad-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ad-table-wrap .spec-compare{
    min-width: 640px;
}
.ad-score{
    max-width: 720px;
}
.ad-score td{
    text-align: center;
}

/* ---- 前後比較（耐震診断 → 補強案） ---- */
.ad-compare{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 3vw, 32px);
    max-width: 860px;
    margin: 0 auto;
}
.ad-compare-item{
    margin: 0;
    padding: clamp(12px, 2vw, 20px);
    background: #fff;
    border: 1px solid var(--beige-dark);
}
.ad-compare-item.is-after{
    border-color: var(--key);
    box-shadow: 0 0 0 1px var(--key) inset;
}
.ad-compare-label{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    color: #666;
}
.ad-compare-item.is-after .ad-compare-label{
    color: var(--key);
}
.ad-compare-item img{
    display: block;
    width: 100%;
    height: auto;
}
.ad-compare-item figcaption{
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
}
.ad-compare-item figcaption b{
    font-family: var(--font-mincho, "Shippori Mincho", serif);
    font-size: 26px;
    font-weight: 600;
    margin: 0 4px;
}
.ad-compare-item.is-after figcaption b{
    color: var(--key);
}
.ad-compare-arrow{
    margin: 0;
    font-size: 28px;
    color: var(--key);
}

/* ---- 写真2枚（大・小） ---- */
.ad-photo-pair{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
.ad-photo-pair figure{
    margin: 0;
}
.ad-photo-pair img{
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
}
.ad-photo-pair figcaption{
    margin-top: 10px;
    color: #666;
    font-size: 13px;
    text-align: center;
}

/* ---- 特徴3つ（ジョリパット） ---- */
.ad-feature-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.ad-feature-list li{
    padding: 28px 24px;
    background: var(--beige-soft);
}
.ad-feature-en{
    margin: 0 0 8px;
    font-family: "EB Garamond", serif;
    font-size: 15px;
    letter-spacing: .14em;
    color: var(--key);
}
.ad-feature-list h3{
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.6;
}
.ad-feature-list p:not(.ad-feature-en){
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
}

/* ---- コンセプト：SK工法 → 耐震改修への橋渡し ---- */
.ad-sk-reform{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    margin-top: clamp(48px, 6vw, 72px);
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border-top: 3px solid var(--key);
}
.ad-sk-reform-text h3{
    margin: 6px 0 16px;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.5;
}
.ad-sk-reform-text > p:not(.cp-benefit-title):not(.content-note){
    line-height: 2;
}
.ad-sk-reform-media{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ad-sk-reform-media figure{
    margin: 0;
}
.ad-sk-reform-media img{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--beige-dark);
}
.ad-sk-reform-media figcaption{
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}

/* ---- 夢祭り：企画カード ---- */
.ad-program{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ad-program figure{
    margin: 0 0 18px;
}
.ad-program img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.ad-program h3{
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: .06em;
}
.ad-program p{
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
}

/* ---- 夢祭り：年ごとのアーカイブ ---- */
.ad-archive{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ad-archive figure{
    margin: 0;
}
.ad-archive img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.ad-archive figcaption{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}
.ad-archive figcaption b{
    font-family: "EB Garamond", serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--key);
    letter-spacing: .04em;
}

/* ---- 資料請求 ---- */
.catalog-page .catalog-handbook-list{
    margin-top: 20px;
}
.catalog-page .catalog-figure-note{
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    letter-spacing: .04em;
}
.catalog-page .catalog-material-grid{
    margin-top: 48px;
}
.catalog-page .catalog-book-cover{
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 16px 16px 0;
    background: #f6f5f1;
    box-sizing: border-box;
}
.catalog-page .catalog-form{
    margin-top: 0;
    padding-top: 64px;
    padding-bottom: 80px;
}
@media (max-width: 767px){
    .catalog-page .catalog-material-grid{
        grid-template-columns: 1fr;
    }
}

/* ---- 追加分：タブレット ---- */
@media (max-width: 1024px){
    .ad-program{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-archive{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ad-sk-reform{ grid-template-columns: 1fr; }
    .ad-sk-reform-media{ max-width: 520px; }
}

/* ---- 追加分：スマートフォン ---- */
@media (max-width: 767px){
    .ad-banner{ margin-bottom: 36px; }
    .ad-compare{
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .ad-compare-arrow{
        text-align: center;
        transform: rotate(90deg);
    }
    .ad-photo-pair{ grid-template-columns: 1fr; }
    .ad-photo-pair img{ height: 240px; }
    .ad-feature-list{ grid-template-columns: 1fr; }
    .ad-program{ grid-template-columns: 1fr; gap: 32px; }
    .ad-archive{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-split-media--contain img{ max-height: none; }
    .ad-doc-portrait img{ max-height: 520px; }
}