/* ページ固有設定 */
.opening{
  background:linear-gradient(#fff 0 530px,var(--cream) 530px)
}
.hero{
  position:relative;
  margin-left:max(3.84615%,calc((100% - 1500px)/2));
  height:clamp(390px,48.4615vw,745px);
  border-radius:50px 0 0 50px;
  overflow:hidden;
  color:#fff
}
.hero-image{
  width:100%;
  height:100%;
  object-fit:cover
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.16) 55%,transparent 85%)
}
.hero-copy{
  position:absolute;
  z-index:1;
  left:4.6%;
  top:50%;
  transform:translateY(-50%)
}
.hero-copy p{
  font-size:22px;
  font-weight:600;
  margin-top:24px;
  letter-spacing:.04em
}
.introduction{
  min-height:510px;
  padding:48px 0 65px
}
.support-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.support-list li{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:90px;
  padding:12px 20px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  box-shadow:3px 4px 4px #705a3512
}
.support-list img{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:none
}
.support-list h2{
  font-size:20px;
  line-height:1.5
}
.support-list p{
  font-size:16px;
  line-height:1.7
}
.intro-copy{
  text-align:center;
  font-size:17px;
  line-height:1.8;
  margin-top:45px
}
.intro-copy p+p{
  margin-top:18px
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1600px;
  margin-inline:auto
}
.reasons{
  margin-top:90px;
  margin-bottom:130px;
  align-items:center
}
.reasons-copy{
  padding-left:15.3846%;
  padding-right:10.5%
}
.section-intro{
  font-size:17px;
  line-height:1.8;
  margin:28px 0 22px
}
.reasons-image{
  width:100%;
  height:600px;
  object-fit:cover;
  border-radius:50px 0 0 50px
}
.reason-list{
  display:grid;
  gap:10px
}
.reason-list li{
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--cream);
  border-radius:10px;
  min-height:70px;
  padding:7px 25px;
  font-size:18px;
  font-weight:500
}
.reason-list img{
  width:60px;
  height:60px;
  object-fit:contain
}
.services{
  position:relative;
  max-width:1600px;
  margin:auto
}
.services:before{
  content:"";
  position:absolute;
  inset:130px 0;
  z-index:-1;
  background:var(--cream)
}
.service{
  display:grid;
  grid-template-columns:61.53846% 38.46154%;
  align-items:center;
  scroll-margin-top:30px
}
.service-image{
  width:100%;
  height:650px;
  object-fit:cover;
  border-radius:0 50px 50px 0
}
.service-copy{
  padding-left:14%;
  padding-right:20%
}
.service h2{
  font-size:44px;
  font-weight:700;
  color:var(--orange);
  white-space:nowrap
}
.service-en{
  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;
  margin:8px 0 30px
}
.service-copy>p:not(.service-en){
  font-size:17px;
  line-height:1.85
}
.service-renovation{
  grid-template-columns:38.46154% 61.53846%;
  margin-top:120px;
  align-items:start
}
.service-renovation .service-copy{
  padding:16px 14% 0 20%
}
.service-renovation .service-image{
  border-radius:50px 0 0 50px
}
.process{
  margin-top:130px;
  margin-bottom:100px;
  align-items:center
}
.process-image{
  width:calc(100% - 10px);
  height:600px;
  object-fit:cover;
  border-radius:0 50px 50px 0
}
.process-copy{
  padding-left:11%;
  padding-right:8%
}
.steps{
  display:grid;
  gap:18px;
  margin-top:40px
}
.steps li{
  display:flex;
  align-items:center;
  gap:18px
}
.step-number{
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  width:58px;
  height:58px;
  background:var(--orange);
  color:#fff;
  font-size:30px;
  font-weight:700
}
.steps h3{
  font-size:20px;
  line-height:1.45
}
.steps p{
  font-size:16px;
  line-height:1.7
}
@media (min-width:601px) and (max-width:1150px){
.hero-copy p{
  font-size:20px;
}
.reasons-copy{
    padding-left:12%;
    padding-right:8%
  }
.service h2{
    font-size:34px
  }
.service-copy{
    padding-right:12%;
    padding-left:12%
  }
.service-renovation .service-copy{
    padding-left:16%;
    padding-right:12%
  }
.services:before{
    inset:30px 0;
}
.support-list li{
    gap:12px;
    padding:12px
  }
.support-list h2{
    font-size:18px
  }
.support-list p{
    font-size:13px
  }
.reasons-image,.process-image{
    height:510px
  }
.service-image{
    height:560px
  }
.reason-list li{
    padding-inline:15px;
    gap:15px;
    font-size:15px
  }
.reason-list img{
    width:48px;
    height:48px
  }
.section-intro{
    font-size:14px
  }
.steps p{
    font-size:13px
  }
.steps h3{
    font-size:18px
  }
.process-copy{
    padding-left:8%;
    padding-right:5%
  }
}
@media (min-width:601px) and (max-width:820px){
.hero-copy p{
    font-size:16px
  }
.support-list img{
    width:42px;
    height:42px
  }
.support-list li{
    gap:9px
  }
.support-list h2{
    font-size:16px
  }
.support-list p{
    font-size:12px
  }
.intro-copy{
    font-size:14px
  }
.reasons-copy{
    padding-left:10%;
    padding-right:6%
  }
.reason-list li{
    font-size:13px;
    padding-inline:10px;
    gap:10px
  }
.reason-list img{
    width:40px;
    height:40px
  }
.service h2{
    font-size:28px
  }
.service-copy>p:not(.service-en){
    font-size:14px
  }
.service-copy{
    padding-left:10%;
    padding-right:10%
  }
.service-renovation .service-copy{
    padding-left:13%;
    padding-right:10%
  }
.service-en{
    font-size:17px
  }
.steps li{
    gap:12px
  }
.step-number{
    width:44px;
    height:44px;
    font-size:24px
  }
.steps h3{
    font-size:16px
  }
.process-copy{
    padding-left:8%
  }
}
@media (max-width:600px){
.opening{
    background:linear-gradient(#fff 0 330px,var(--cream) 330px)
  }
.hero{
    margin-left:20px;
    height:440px;
    border-radius:30px 0 0 30px
  }
.hero-image{
    object-position:57% center
  }
.hero:after{
    background:linear-gradient(90deg,#0009,#0002)
  }
.hero-copy{
    left:22px;
    right:15px;
    top:53%
  }
.hero-copy p{
    font-size:13px;
    line-height:1.8;
    margin-top:20px;
    letter-spacing:0
  }
.introduction{
    min-height:0;
    padding:28px 0 44px
  }
.support-list{
    grid-template-columns:1fr;
    gap:12px
  }
.support-list li{
    justify-content:flex-start;
    min-height:86px;
    padding:14px 16px;
    gap:14px
  }
.support-list img{
    width:46px;
    height:46px
  }
.support-list h2{
    font-size:17px
  }
.support-list p{
    font-size:12px;
    line-height:1.8
  }
.intro-copy{
    text-align:left;
    font-size:14px;
    line-height:2;
    margin-top:30px;
    letter-spacing:0
  }
.intro-copy p+p{
    margin-top:20px
  }
.desktop-break{
    display:none
  }
.split{
    grid-template-columns:1fr
  }
.reasons{
    margin-top:55px;
    margin-bottom:60px;
    gap:30px
  }
.reasons-copy{
    padding-inline:24px
  }
.section-intro{
    font-size:14px;
    margin:24px 0 20px;
    line-height:1.9
  }
.reason-list{
    gap:10px
  }
.reason-list li{
    min-height:64px;
    padding:8px 20px;
    font-size:15px;
    gap:20px
  }
.reason-list img{
    width:46px;
    height:46px
  }
.reasons-image{
    grid-row:1;
    margin-left:24px;
    width:calc(100% - 24px);
    height:auto;
    aspect-ratio:1.2;
    object-fit:cover;
    border-radius:30px 0 0 30px
  }
.services:before{
    inset:90px 0
  }
.service,.service-renovation{
    grid-template-columns:1fr;
    gap:28px
  }
.service-image{
    width:calc(100% - 24px);
    height:auto;
    aspect-ratio:1.23;
    object-fit:cover;
    border-radius:0 30px 30px 0
  }
.service-copy,.service-renovation .service-copy{
    padding:0 28px
  }
.service h2{
    font-size:32px
  }
.service-en{
    font-size:17px;
    margin:4px 0 20px
  }
.service-copy>p:not(.service-en){
    font-size:15px;
    line-height:1.95
  }
.service-renovation{
    margin-top:56px
  }
.service-renovation .service-image{
    grid-row:1;
    margin-left:24px;
    border-radius:30px 0 0 30px
  }
.service-renovation .service-copy{
    padding-bottom:36px
  }
.services:before{
    bottom:0
  }
.process{
    margin-top:60px;
    margin-bottom:60px;
    gap:32px
  }
.process-image{
    width:calc(100% - 24px);
    height:auto;
    aspect-ratio:1.15;
    border-radius:0 30px 30px 0
  }
.process-copy{
    padding:0 24px
  }
.steps{
    gap:22px;
    margin-top:28px
  }
.steps li{
    gap:16px
  }
.step-number{
    width:50px;
    height:50px;
    font-size:26px
  }
.steps h3{
    font-size:18px
  }
.steps p{
    font-size:13px
  }
}
@media (min-width:1151px){
.service-reform .service-copy{
    transform:translateY(85px)
  }
}
@media (min-width:601px) and (max-width:820px){
.service h2{
    font-size:clamp(22px,3.4vw,28px)
  }
}

/* 下層ページ：本文は未作成 */
.subpage main {
  min-height: 60vh;
}

/* 下層ページのタイトル */
.page-title {
  padding: 60px 0;
  background: var(--cream);
}
.page-title h1 {
  font-size: 44px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.page-title .eyebrow {
  margin-top: 12px;
  font-size:16px;
  letter-spacing:.08em;
}
@media (max-width: 600px) {
  .page-title {
    padding: 20px 0 22px;
    text-align:center;
  }
  .page-title h1 {
    font-size: 28px;
  }
  .page-title .eyebrow {
    font-size:13px;
    margin-top: 4px;
  }
}

/*-------------------------------
リフォームページ
--------------------------------*/
.reform-wrap {
  width: calc(100% - 90px);
  max-width: 1100px;
  margin-inline: auto;
}
.reform-prose p {

  overflow-wrap: anywhere;
}
.reform-prose p + p {
  margin-top: 24px;
}
.reform-prose h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight:700;

}
.reform-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-block:70px;
}
.reform-intro-copy h2 {
  margin: 16px 0 28px;
}
.reform-intro-photo {
  width: 100%;
  height: 410px;
  object-fit: cover;
  object-position: 58% center;
  border-radius: 50px 0 50px 0;
}
.reform-signs {
  padding-bottom: 90px;
}
.reform-concerns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.reform-concerns li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  background: var(--cream);
  border-radius: 8px;
  font-weight: 600;
}
.reform-concerns li::before {
  content: '✓';
  color: var(--orange);
  font-size:30px;
  font-weight:400;
  flex-shrink: 0;
}
.reform-comfort {
  background: var(--cream);
  padding-block: 80px;
}
.reform-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.reform-photo-row > img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 40px;
}
.reform-lifestyle {
  padding-block: 90px;
}
.reform-approach {
  padding: 65px 0;
  border-bottom: 1px solid var(--border);
}
.reform-approach > img {
  height: 580px;
  border-radius: 40px 0 0 40px;
}
.reform-closing {
  padding-block: 70px;
}
.reform-closing h2 {
  margin-bottom: 28px;
}
.reform-mobile-break {
  display: none;
}
@media (min-width: 601px) and (max-width: 900px) {
  .reform-intro, .reform-photo-row { gap: 30px; }
  .reform-concerns { grid-template-columns: repeat(2, 1fr); }
  .reform-approach { align-items: start; }
}
@media (max-width: 600px) {
  .reform-wrap { width: calc(100% - 48px); }
  .reform-intro, .reform-photo-row { grid-template-columns: 1fr; gap: 28px; }
  .reform-intro { padding-block: 48px;  }
  .reform-intro-copy h2 { font-size: 26px; margin: 0 0 22px; }
  .reform-intro-photo { height: 270px; border-radius: 30px 0 30px 0; }
  .reform-closing h2 { font-size: 24px; }
  .reform-signs { padding-bottom: 48px; }
  .reform-concerns { grid-template-columns: 1fr; gap: 10px; margin-bottom: 26px; }
  .reform-concerns li { padding: 2px 18px;  }
  .reform-comfort { padding-block: 48px; }
  .reform-photo-row > img { height: auto; aspect-ratio: 1.15; border-radius: 28px; }
  .reform-lifestyle { padding-block: 48px; }
  .reform-approach { padding: 44px 0; }
  .reform-approach > img { grid-row: 1; }
  .reform-closing { padding-block: 48px; }
  .reform-mobile-break { display: inline; }
}

/* リフォーム：写真と文章を中心にしたシンプル案（index-2.html） */
.reform-simple-wrap {
  width: calc(100% - 80px);
  max-width: 1000px;
  margin-inline: auto;
}
.reform-simple-lead {
  padding-block: 72px;
}
.reform-simple-lead h2 {
  font-size: 34px;

  margin-bottom: 36px;
}
.reform-simple-wide {
  border-radius: 50px;
  width: 100%;
  height: auto;
  aspect-ratio: 2.3;
  object-fit: cover;
  margin-bottom: 36px;
}
.reform-simple-text p {

  overflow-wrap: anywhere;
}
.reform-simple-text p + p {
  margin-top: 24px;
}
.reform-simple-row {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 80px;
}
.reform-simple-row > img {
  border-radius: 40px;
  width: 100%;
  height: auto;
}
.reform-simple-row h2 {
  font-size: 26px;

  margin-bottom: 24px;
}
.reform-simple-row-reverse {
  grid-template-columns: 1fr 34%;
}
.reform-simple-row-reverse > img {
  grid-column: 2;
  grid-row: 1;
}
.reform-simple-row-reverse > .reform-simple-text {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 600px) {
  .reform-simple-wrap { width: calc(100% - 48px); }
  .reform-simple-wide, .reform-simple-row > img { border-radius: 30px; }
  .reform-simple-row-reverse > img { grid-column: 1; grid-row: 1; }
  .reform-simple-row-reverse > .reform-simple-text { grid-column: 1; grid-row: 2; }
  .reform-simple-lead { padding-block: 44px; }
  .reform-simple-lead h2 { font-size: 26px; margin-bottom: 24px; }
  .reform-simple-wide { aspect-ratio: 1.4; margin-bottom: 24px; }
  .reform-simple-row { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
  .reform-simple-row > img { aspect-ratio: 1.4; object-fit: cover; }
  .reform-simple-row h2 { font-size: 24px; margin-bottom: 20px; }
}

/* シンプル案：暮らしの快適さを紹介するセクション */
.reform-simple-comfort {
  background: var(--cream);
  padding-block: 64px;
  margin-bottom: 80px;
}
.reform-simple-comfort > .reform-simple-row {
  padding-bottom: 0;
}
@media (max-width: 600px) {
  .reform-simple-comfort {
    padding-block: 40px;
    margin-bottom: 48px;
  }
}

/*-------------------------------
会社案内
--------------------------------*/
.company-wrap {
  width: calc(100% - 70px);
  max-width: 1000px;
  margin-inline: auto;
}
.company-overview {
  padding-block: 70px;
}
.company-wrap h2 {
  font-size: 32px;
  margin-bottom: 36px;
}
.company-details {
  margin: 0;
  border-top: 1px solid var(--border);
}
.company-details > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border);
}
.company-details dt,
.company-details dd {
  padding: 24px 28px;
  margin: 0;
}
.company-details dt {
  background: var(--cream);
  font-weight: 700;
}
.company-details dd a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.company-business {
  background: var(--cream);
  padding-block: 72px;
}
.company-business-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}
.company-business-list li {
  padding-block: 0 24px;
  border-bottom: 1px solid var(--border);
}
.company-business-list h3 {
  margin-bottom: 12px;
}
.company-business-list h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1em;
  margin-right: 12px;
  background: var(--orange);
  vertical-align: -.08em;
}
@media (max-width: 600px) {
  .company-wrap { width: calc(100% - 48px); }
  .company-overview { padding-block: 48px; }
  .company-wrap h2 { font-size: 24px; margin-bottom: 24px; }
  .company-details > div { grid-template-columns: 1fr; }
  .company-details dt { padding: 12px 16px; }
  .company-details dd { padding: 16px 16px 20px; overflow-wrap: anywhere; }
  .company-business { padding-block: 48px; }
  .company-business-list { grid-template-columns: 1fr; gap: 24px; }
  .company-business-list h3 { font-size: 20px; }
}

/* 会社概要：事業内容 */
.company-details .company-business-list {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 28px;
}
.company-details .company-business-list li {
  padding: 0;
  border: 0;
}
.company-details .company-business-list h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

/* 会社概要の見出し */
.company-overview > h2 {
  padding-bottom:10px;
  border-bottom:solid 3px var(--orange)
}

/*-------------------------------
リノベーション
--------------------------------*/
.renovation-wrap {
  width: calc(100% - 80px);
  max-width: 1000px;
  margin-inline: auto;
}
.renovation-intro-photo { object-position: center 45%; }
.renovation-details { padding-bottom: 72px; }
.renovation-reasons { padding-block: 72px; }
.renovation-reasons>h2 { 
  padding-bottom:10px;
  border-bottom:solid 3px var(--orange)
}
.renovation-prose p {  overflow-wrap: anywhere; }
.renovation-prose p + p { margin-top: 24px; }
.renovation-wishes {
  list-style: disc;
  padding-left: 1.5em;
  margin: 16px 0 28px;
}
.renovation-wishes li::marker { color: var(--orange); }
.renovation-value { background: var(--cream); padding-block: 64px; }
.renovation-row { display: grid; grid-template-columns: 55% 1fr; gap: 48px; align-items: center; }
.renovation-row > img { width: 100%; height: 380px; object-fit: cover; border-radius: 40px; }
.renovation-heading {
  font-size: 28px;
  font-weight:700;
  margin-bottom: 28px;
}
.renovation-reason-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 32px; }
.renovation-reason-list li { display: flex; align-items: center; gap: 20px; background: var(--cream); border-radius: 8px; padding: 18px 24px;  font-size:20px; font-weight: 600; }
.renovation-reason-list img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.renovation-prose .renovation-promise { margin-top: 40px;  font-size:22px; font-weight: 700; }
.renovation-prose .renovation-promise + p { margin-top: 12px; }
@media (max-width: 900px) and (min-width: 601px) {
  .renovation-row { gap: 30px; }
  .renovation-heading { font-size: 25px; }
  .renovation-reason-list li { padding: 16px; gap: 12px;  }
}
@media (max-width: 600px) {
  .renovation-wrap { width: calc(100% - 48px); }
  .renovation-intro-photo { grid-row: 2; }
  .renovation-details { padding-bottom: 44px; }
  .renovation-reasons { padding-block: 44px; }
  .renovation-value { padding-block: 40px; }
  .renovation-row { grid-template-columns: 1fr; gap: 28px; }
  .renovation-row > img { height: 260px; border-radius: 30px; }
  .renovation-heading { font-size: 23px; margin-bottom: 24px; }
  .renovation-reason-list { grid-template-columns: 1fr; gap: 12px; margin-block: 24px; }
  .renovation-reason-list li { padding: 8px 14px; gap: 14px; font-size:17px;  }
  .renovation-prose .renovation-promise {  margin-top: 28px; font-size:18px;}
}

/*-------------------------------
施工事例
--------------------------------*/
.works-notice {
  padding-block: 70px;
  text-align: center;
}