>
/* === リセットと共通スタイル === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    background-color: #000;
    color: #333;
    line-height: 1.8;
}
@media (max-width: 900px) {
    .hero .logo img {
        height: 55px !important;
    }
}
.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
li.feature-desc {
    font-weight: 900;
    font-family: cursive;
}
/* === トップセクション === */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.video-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
section.client-report-section .image-area2 {
    margin-top: 24px;
}
.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.header {
    position: absolute;
    top: 0; right: 0;
    width: 100%;
    padding: 40px 60px;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.nav-menu {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-item {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    transition: color 0.3s ease;
    position: relative;
}
.nav-item:hover {
    color: rgba(255,255,255,0.7);
}
.nav-item::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.3);
}
.nav-item:last-child::after {
    display: none;
}
.left-panel {
    position: relative;
    bottom: -50%;
    z-index: 10;
    padding: 100px 60px;
    color: white;
}
.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 8px;
    margin-bottom: 40px;
}
.japanese-text {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 1.8;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.logo {
    position: absolute;
    top: 22px;
    left: 34px;
    z-index: 10;
}
.logo img {
    height: 70px;
    width: auto;
}
.scroll-indicator {
    position: absolute;
    bottom: 50px;
    right: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}
.scroll-text {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    margin-bottom: 15px;
}
.scroll-line-container {
    position: relative;
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,0.3);
}
.scroll-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(255,255,255,0.9);
    animation: scrollLine 2s infinite ease-in-out;
}
@keyframes scrollLine {
    0% { top: 0; height: 0; opacity: 1; }
    50% { top: 20px; height: 20px; opacity: 1; }
    100% { top: 40px; height: 0; opacity: 0; }
}

/* === お問い合わせセクション === */
.section-contact {
    background-color: #f4f4f4;
    padding: 80px 20px;
    color: #333;
    text-align: center;
}
.section-contact h2 {
font-size: 36px;
margin-bottom: 30px;
}
.section-contact form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.section-contact input,
.section-contact textarea {
padding: 14px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
.section-contact button {
padding: 14px;
font-size: 16px;
background-color: #534742;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: opacity 0.3s ease;
}
.section-contact button:hover {
opacity: 0.8;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Section 1 - パッシブハウス */
.section-1 {
display: flex;
align-items: center;
min-height: 72vh;
background-color: #f8f6f3;
}

.section-1 .container {
display: flex;
align-items: center;
gap: 60px;
}
.title-with-image {
display: flex;
align-items: flex-start; /* 上揃え */
gap: 40px; /* タイトルと画像の間隔 */
}

.title-area {
flex: 1;
padding-right: 40px;
}

.main-title {
font-size: 3rem;
font-weight: 100;
line-height: 1.2;
text-orientation: mixed;
margin-bottom: 40px;
}
.main-title2 {
font-size: 3rem;
font-weight: 100;
line-height: 1.2;
writing-mode: vertical-rl;
text-orientation: mixed;
margin-bottom: 40px;
font-family: 'Playfair Display', serif;
}
.main-title2 span {
text-combine-upright: all;
letter-spacing: 1px;
}
.content-area {
flex: 1.5;
margin: 24% 0 0 10%;
}

.hero-image {
width: 100%;
height: 300px;
object-fit: cover;
margin-bottom: 40px;
}

.description {
font-size: 0.85rem;
line-height: 1.9;
color: #555;
margin-bottom: 30px;
}

.view-more {
align-self: flex-start; /* 左寄せ */
font-size: 0.9rem;
color: #c4a484;
text-decoration: none;
letter-spacing: 0.1em;
}



.interior-image {
width: 90%;
object-fit: cover;
}

/* Section 2 - 5つ星の快適 */
.section-2 {
background-color: #fff;
padding: 100px 0;
min-height: 100vh;
}

.section-2 .container {
display: flex;
align-items: flex-start;
gap: 80px;
}

.image-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

.family-image {
width: 60%;
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}

.content-area-2 {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.section-title {
font-size: 3rem;
font-weight: 100;
letter-spacing: 0.2em;
line-height: 1.3;
margin-bottom: 60px;
color: #2c2c2c;
}

.features-grid {
writing-mode: vertical-rl;
}
li {
list-style-type: none;
}
.feature-item {
padding: 20px;
}

.feature-title {
font-size: 3.1rem;
font-weight: lighter;
/* margin-bottom: 15px; */
color: #fff;
font-family: 'Playfair Display', serif;
}

.feature-desc {
font-size: 1.2rem;
color: #666;
line-height: 1.6;
}

.section-2-description {
font-size: 0.9rem;
line-height: 1.8;
color: #555;
}
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 1s ease;
}

.fade-in.show {
opacity: 1;
transform: translateY(0);
}
.contact-info {
position: fixed;
right: 0px;
top: 45%;
transform: translateY(-50%);
background-color: #af003b;
color: white;
padding: 20px 15px;
text-align: center;
font-size: 0.8rem;
letter-spacing: 0.1em;
writing-mode: vertical-rl;
text-orientation: mixed;
z-index: 7;
}

.contact-info::before {
content: "✉";
display: inline;
margin: 0;
font-size: 1rem;
}
.section-title {
font-size: 3rem;
font-weight: 100;
letter-spacing: 0.2em;
line-height: 1.3;
margin-bottom: 40px;
color: #2c2c2c;
}
@media (max-width: 768px) {
.section-1 .container,
.section-2 .container {
flex-direction: column;
gap: 40px;
}

.main-title {
font-size: 2.5rem;
writing-mode: horizontal-tb;
text-align: center;
}

.section-title {
font-size: 2rem;
text-align: center;
}

.features-grid {
grid-template-columns: 1fr;
}
}
/* === フッター === */
.footer {
background-color: #534742;
color: white;
padding: 40px 0;
width: 100%;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 40px;
}
.footer-left {
flex: 1;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo img {
height: 80px;
width: auto;
}
.company-info {
font-size: 14px;
line-height: 1.8;
color: #cccccc;
margin-bottom: 20px;
}
.footer-right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
}
.footer-nav {
display: flex;
gap: 30px;
white-space: nowrap;
align-items: center;
}
.footer-nav a {
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 400;
transition: opacity 0.3s ease;
position: relative;
}
.footer-nav a:not(:last-child)::after {
content: '';
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 16px;
background-color: #999;
}
.footer-nav a:hover {
opacity: 0.7;
}
.social-icons {
display: flex;
gap: 20px;
align-items: center;
}
.social-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}
.social-icon:hover {
opacity: 0.7;
}
.footer-bottom {
text-align: center;
margin-top: 40px;
padding-top: 20px;
font-size: 12px;
color: #999;
}
.section-2 .container {
display: flex;
gap: 60px;
align-items: flex-start;
}

/* image-area 左 */
.image-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

/* 中央：featuresと説明 */
.content-wrap {
flex: 1;
display: flex;
justify-content: space-between;
gap: 40px;
}

/* 中央左：グリッド＋説明 */
.features-and-desc {
margin-top: 70px;
display: flex;
flex-direction: column;
gap: 30px;
}

/* 右端の縦書きタイトル */
.vertical-title {
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
font-weight: 100;
color: #2c2c2c;
margin: 0;
line-height: 1.4;
}
ul.feature-item li {
margin-left: 14px;
}
/* === Section Feature === */
.section-feature {
background-color: #f8f8f8;
}

.feature-hero {
background: url("/wp-content/uploads/2025/08/アセット-4-3.png");
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}

.feature-title2 {
font-size: 3.5rem;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 10px;
}

.feature-subtitle {
font-size: 1rem;
letter-spacing: 1px;
opacity: 0.9;
}

.feature-grid {
max-width: 1200px;
margin: 80px auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 0 40px;
}

.feature-item2 {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.feature-item2:hover {
transform: translateY(-5px);
}
.feature-image {
width: 100%;
height: 280px;
object-fit: cover;
}
.feature-content {
padding: 30px;
}
.feature-text {
font-size: 1.1rem;
line-height: 1.8;
color: #333;
margin-bottom: 25px;
}

/* view-moreは既に存在する場合は省略可 */

.blueprints-bg {
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.blueprints-bg::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
background: linear-gradient(45deg, transparent 40%, rgba(100,100,100,0.1) 42%, rgba(100,100,100,0.1) 58%, transparent 60%);
background-size: 20px 20px;
}

.wood-logs-bg {
background: linear-gradient(45deg, #8B4513 0%, #A0522D 25%, #D2691E 50%, #CD853F 75%, #DEB887 100%);
background-size: 80px 80px;
position: relative;
}
.wood-logs-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(139,69,19,0.8) 15%, transparent 16%), 
radial-gradient(circle at 60% 40%, rgba(160,82,45,0.8) 18%, transparent 19%),
radial-gradient(circle at 80% 80%, rgba(210,105,30,0.8) 14%, transparent 15%);
}

.family-living-bg {
background: linear-gradient(135deg, #f4e4bc 0%, #e8d5a3 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.family-living-bg::before {
content: '';
position: absolute;
width: 60%;
height: 40%;
background: rgba(101,67,33,0.8);
border-radius: 8px;
}

.construction-bg {
background: linear-gradient(135deg, #faf0e6 0%, #f5deb3 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.construction-bg::before {
content: '';
position: absolute;
width: 80%;
height: 60%;
background: linear-gradient(90deg, rgba(218,165,32,0.3) 0%, rgba(255,215,0,0.3) 100%);
border-radius: 4px;
}

@media (max-width: 768px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 20px;
}

.feature-title {
font-size: 2.5rem;
}
}
/* Works & News Section CSS */
.works-section {
padding: 80px 0;
background: white;
}
.works-title {
font-size: 2.5rem;
font-weight: 300;
color: #c4a484;
margin-bottom: 60px;
text-align: left;
letter-spacing: 1px;
}
.works-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.work-item {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.work-item:hover {
transform: translateY(-3px);
}
.work-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.work-content {
padding: 20px;
}
.work-category {
font-size: 0.8rem;
color: #999;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.work-description {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
}
.view-more-works {
text-align: left;
margin-top: 30px;
}
.view-more-works a {
color: #c4a484;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 1px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.view-more-works a:hover {
opacity: 1;
}
path {
fill: #fff;
}
.client-report-section {
background: #f5f5f5;
position: relative;
}
.client-report-bg {
background: url("/wp-content/uploads/2025/08/bg-hero-1.jpg");
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 60px;
}
.client-report-content {
text-align: right;
}
.client-report-title {
font-size: 1.2rem;
color: #666;
margin-bottom: 15px;
letter-spacing: 1px;
}
.client-report-link {
color: #c4a484;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 1px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.client-report-link:hover {
opacity: 1;
}
.news-section {
padding: 80px 0;
background: white;
}
.news-title {
font-size: 2.5rem;
font-weight: 300;
color: #c4a484;
margin-bottom: 20px;
text-align: left;
letter-spacing: 1px;
}
.news-subtitle {
font-size: 1.5rem;
color: #333;
margin-bottom: 50px;
font-weight: 300;
}
.news-list {
border-top: 1px solid #e0e0e0;
}
.news-item {
border-bottom: 1px solid #e0e0e0;
padding: 25px 0;
display: flex;
align-items: center;
transition: background-color 0.3s ease;
}
.news-item:hover {
background-color: #fafafa;
}
.news-date {
font-size: 0.9rem;
color: #c4a484;
margin-right: 40px;
min-width: 100px;
letter-spacing: 0.5px;
}
.news-content {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
.view-more-news {
text-align: left;
margin-top: 40px;
}
.view-more-news a {
color: #c4a484;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 1px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.view-more-news a:hover {
opacity: 1;
}
.house-exterior-1 {
background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.house-exterior-1::before {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 80%;
    height: 60%;
    background: linear-gradient(45deg, #f5f5f5 40%, #333 42%, #333 58%, #f5f5f5 60%);
}
.house-exterior-2 {
    background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.house-exterior-2::before {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 80%;
    height: 60%;
    background: linear-gradient(45deg, #D2691E 40%, #333 42%, #333 58%, #f5f5f5 60%);
}
@media (max-width: 768px) {
.works-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .works-title, .news-title {
        font-size: 2rem;
    }
    .client-report-bg {
        padding: 0 30px;
    }
    .news-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .news-date {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
.fixed-button {
    position: fixed;
    bottom: 390px;
    left: 20px;
    z-index: 999;
    display: block;
    width: 180px;
    height: 180px;
    transition: opacity 0.3s ease;
}
.fixed-button img {
    width: 100%;
    height: auto;
    display: block;
}
.fixed-button:hover {
opacity: 0.8;
}
@media (max-width: 768px) {
    .fixed-button {
        width: 60px;
        height: 60px;
        bottom: 15px;
        left: 15px;
    }
}
/* ============ 3カラム×2行の土台 ============ */
.section-1 .hero-grid{
  display:grid;
  grid-template-columns: 220px minmax(420px, 1fr) minmax(340px, 1fr);
  grid-template-rows: auto auto;
  gap: 32px 48px;             /* 行・列の間隔：上記スクショの余白感に近づけ */
  align-items:start;
}

/* 左の縦書きカラム（2段ぶち抜き） */
.section-1 .col-left{
  grid-column:1;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;       /* 罫線を見出しの右側に置くため右寄せ */
  gap:16px;
}
.section-1 .vertical-title{
  writing-mode: vertical-rl;  /* 縦書き */
  text-orientation: upright;  /* 句読点など直立 */
  line-height: 1.9;
  letter-spacing: .12em;
  font-size: clamp(24px, 3.2vw, 40px);
  margin: 0;
}
.section-1 .vertical-divider{
  width: 1px;
  flex: 1 1 auto;             /* 見出しの高さに合わせて伸縮 */
  background: #222;
  opacity: .5;
  display: block;
}

/* 中央：大きい画像（2段ぶち抜き） */
.section-1 .col-center{
  grid-column:2;
  grid-row:1 / span 2;
}
.section-1 .col-center .hero-image{
  width:100%;
  height:auto;
  display:block;
}

/* 右上：説明＋view more */
.section-1 .col-right-top{
  grid-column:3;
  grid-row:1;
}
.section-1 .col-right-top .description{
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .02em;
  color:#111;
  margin-bottom: 14px;
}

.section-1 .view-more .arrow{ opacity:.6; transition: transform .2s ease; }
.section-1 .view-more:hover .arrow{ transform: translateX(4px); }

/* 右下：小さめ画像 */
.section-1 .col-right-bottom{
  grid-column:3;
  grid-row:2;
  justify-self: start;        /* 右カラムの左寄せ配置（スクショの見た目に近づけ） */
}
.section-1 .col-right-bottom .interior-image{
  width: min(100%, 360px);    /* 大きくなりすぎないよう最大幅を抑制 */
  height:auto;
  display:block;
}

/* 下段左〜中央に跨る長文（1〜2列目に広げる） */
.section-1 .col-bottom-left {
    grid-column: 2 / span 2;
    grid-row: 3;
    align-self: start;
    max-width: 620px;
}
.section-1 .col-bottom-left .description{
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .02em;
  color:#111;
}

/* 余白の微調整（お好みで） */
.section-1 {
    /* padding-block: 56px 72px; */
    padding: 0 !important;
}
.section-1 .container{ max-width: 1200px; margin: 0 auto; }

/* ============ レスポンシブ ============ */
@media (max-width: 1024px){
  .section-1 .hero-grid{
    grid-template-columns: 160px 1fr 1fr;
    gap: 28px 28px;
  }
}
@media (max-width: 768px){
  .section-1 .hero-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }
	.footer-right {
    display: none;
}
  .section-1 .col-left{
    grid-column:1; grid-row:auto;
    align-items:flex-start;
  }
  .section-1 .vertical-title{
    writing-mode: horizontal-tb;   /* スマホでは横書きに */
    text-orientation: mixed;
    font-size: clamp(20px, 6vw, 28px);
  }
  .section-1 .vertical-divider{ width:100%; height:1px; }
  .section-1 .col-center{ grid-column:1; grid-row:auto; }
  .section-1 .col-right-top{ grid-column:1; grid-row:auto; }
  .section-1 .col-right-bottom{ grid-column:1; grid-row:auto; }
  .section-1 .col-bottom-left{
    grid-column:1; grid-row:auto; max-width: none;
  }
}

/* 土台 */
.works-section { padding-block: 64px; }
.works-section .container { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.works-section .works-title{
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: .08em;
  margin: 0 0 20px;
}

/* グリッド */
.works-section .works-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;                 /* 行間・列間 */
  align-items: start;
}

/* カード */
.works-section .work-item{
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.works-section .work-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* 画像領域（背景でも<img>でもOK） */
.works-section .work-image{
  aspect-ratio: 3 / 2;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.works-section .work-image img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* テキスト */
.works-section .work-content{ padding: 14px 16px 16px; }
.works-section .work-category{
  font-size: 12px; letter-spacing:.08em; opacity:.7; margin-bottom:6px;
}
.works-section .work-description{
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .works-section .works-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 640px){
  .works-section .works-grid{ grid-template-columns: 1fr; gap: 16px; }
  .works-section { padding-block: 48px; }
  .works-section .work-item{ border-radius: 10px; }
	
}

/* 低モーション配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .works-section .work-item{ transition: none; }
}
/* 土台 */
.news-section { padding-block: 56px 80px; }
.news-section .container { max-width: 1100px; margin: 0 auto; padding-inline: 16px; }

.news-section .news-title{
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1;
  color: #b8936d;
  margin: 0 0 12px;
}
.news-section .news-subtitle{
  font-size: 18px;
  letter-spacing: .08em;
  margin: 0 0 24px;
  color:#222;
}

/* リスト本体 */
.news-section .news-list{ margin-top: 8px; }

/* 1行：左に日付、右に本文。ボーダーで区切る */
.news-section .news-item{
  display: grid;
  grid-template-columns: 180px 1fr;   /* 左：日付 / 右：本文 */
  align-items: center;
  padding: 18px 8px;
  border-top: 1px solid #e9e6e3;
  text-decoration: none;              /* aタグ対応 */
}
.news-section .news-item:last-child{ border-bottom: 1px solid #e9e6e3; }
.news-section .news-item:hover{ background:#faf8f6; }

.news-section .news-date{
  font-size: 14px;
  letter-spacing: .08em;
  color: #b8936d;
  white-space: nowrap;
}
.news-section .news-content{
  font-size: 16px;
  color:#333;
}

/* view more */
.news-section .view-more-news{ margin-top: 24px; text-align: right; }
.news-section .view-more-news a{
  text-decoration: none; letter-spacing: .08em; color:#fff; position: relative; padding-right: 40px;
}


/* レスポンシブ */
@media (max-width: 900px){
  .news-section .news-item{
    grid-template-columns: 1fr; 
    row-gap: 4px;
    padding: 14px 4px;
  }
  .news-section .news-date{ order:1; }
  .news-section .news-content{ order:2; }
  .news-section .news-title{ font-size: clamp(28px, 7vw, 40px); }
}
/* スマホだけ横書きに切り替え */
@media (max-width: 768px){
  .section-2 .vertical-title{
    writing-mode: horizontal-tb;   /* 横書き */
    text-orientation: mixed;
    line-height: 1.3;
    letter-spacing: .04em;
  }
  /* 横書き時に改行<br>が邪魔なら非表示に（不要なら消してOK） */
  .section-2 .vertical-title br{ display:none; }

  /* 必要ならサイズ・余白も調整 */
  .section-2 .vertical-title{
    font-size: clamp(20px, 6vw, 28px);
    margin: 12px 0 16px;
  }
	.content-wrap {
    display: block;
}
}
/* スマホ幅で .content-wrap を1カラムGrid化して、h2を一番上に */
@media (max-width: 768px){
  .section-2 .content-wrap{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "features";
    gap: 16px;
  }
  .section-2 .content-wrap .vertical-title{ /* = h2 */
    grid-area: title;
    /* 縦書き → 横書き（必要なければ削除可） */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.3;
    letter-spacing: .04em;
    margin: 0 0 8px;
  }
  .section-2 .content-wrap .vertical-title br{ display:none; } /* 改行タグを無効化（任意） */

  .section-2 .content-wrap .features-and-desc{
    grid-area: features;
  }
	.side-badge {
    top: 80%;
}
	.logo img {
    height: 53px;
    width: auto;
}
	.hero .logo {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 900;
    display: none;
}
}
/* ---- Bottom CTA Image Button ---- */
.cta-bottom{
  padding: 32px 0 64px;         /* 上下の余白（フッターとぶつからないように） */
  background: transparent;      /* 必要なら色を付けてもOK */
}
.cta-bottom .cta-link{
  display: block;
  max-width: 1100px;            /* 画像の最大幅 */
  margin: 0 auto;               /* 中央寄せ */
}
.cta-bottom img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;          /* 角丸。不要なら消してOK */
  box-shadow: 0 8px 30px rgba(0,0,0,.08);  /* ほんのり影 */
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-bottom .cta-link:hover img{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
}

/* スマホ微調整 */
@media (max-width: 640px){
  .cta-bottom{ padding: 24px 0 48px; }
  .cta-bottom img{ border-radius: 10px; }
	.link-banner img {
    width: 70% !important;
    border: 1px solid;
}
}
.link-banner {
    width: 100%;
    text-align: center;
    margin-top: 10%;
}
.link-banner img {
    width: 30%;
}
.link-banner img {
    width: 30%;
    border: 1px solid;
}
.view-more, .view-more2, .view-more3, .view-more-news, .view-more-works {
  display: inline-block;
  padding: 12px 28px;
  background-color: #a0865a;   /* ボタン色 */
  color: #fff;                /* 文字色 */
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;          /* 角丸 */
  transition: all 0.3s ease;
  position: relative;
}

.view-more .arrow {
  display: inline-block;
  margin-left: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.view-more:hover {
  background-color: #8c7350;   /* hover時 少し濃い色 */
  transform: translateY(-2px); /* hover時に浮き上がる */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.view-more:hover .arrow {
  transform: rotate(-45deg) translate(4px, -4px); /* hover時に矢印が動く */
}
.image-area2, .view-more3 {
    /* max-width: 1000px; */
    margin: 0 auto;
    text-align: center;
	padding-bottom: 5%;
}
.section-feature .feature-heading{
 max-width: 1200px;
    text-align: left;
    font-family: 'Playfair Display', serif;
    font-weight: 300;
    letter-spacing: .12em;
    font-size: clamp(24px, 3vw, 36px);
    color: #c4a483;
    /* margin: 0 0 20px; */
    margin: 0 auto;
}
.image-area3 {
    margin: 0 auto;
    text-align: center;
    background: #f8f6f3;
    padding-bottom: 80px;
}
.fonceng {
    font-family: 'Noto Sans JP';
}