@charset "utf-8";

/* CSS Document */



  :root{

  --stone-bg:#f8fbfb;

  --stone-bg-alt:#ffffff;

  --ink:#2f3a40;

  --ink-soft:#2f3a40;

  --moss:#2f3a40;

  --moss-deep:#5f9db0;

  --bronze:#4a90e2;

  --line:#e5edf3;

}



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



  html{scroll-behavior:smooth;}



  body{

    background:var(--stone-bg);

    color:var(--ink);

    font-family:"Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

    font-weight:400;

    line-height:1.9;

    -webkit-font-smoothing:antialiased;

  }



  a{color:inherit; text-decoration:none;}

  img{display:block; max-width:100%;}

  ul{list-style:none;}



  h1,h2,h3{

    font-family:"Shippori Mincho", serif;

    font-weight:600;

    letter-spacing:.04em;

  }



  .wrap{

    max-width:1080px;

    margin:0 auto;

    padding:0 24px;

  }



  /* ---------- crest mark : signature element (家紋風) ---------- */

  .crest{

    width:46px;

    height:46px;

    margin:0 auto 24px;

    color:var(--bronze);

    opacity:.85;

  }

  .crest svg{ width:100%; height:100%; }



  /* ---------- header ---------- */



.header-top{

	font-size: 10px;

	margin-left: 10px;

} 



  header{

    position:sticky;

    top:0;

    z-index:50;

    background:rgba(238,236,229,.92);

    backdrop-filter:blur(6px);

    border-bottom:1px solid var(--line);

  }

  .nav-inner{

    position:relative;

    max-width:1080px;

    margin:0 auto;

    padding:16px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

  }

  .brand{

    font-family:"Shippori Mincho", serif;

    font-size:1.05rem;

    letter-spacing:.12em;

    white-space:nowrap;

  }



  /* hamburger button */

  .menu-toggle-checkbox{ display:none; }

  .hamburger-btn{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    width:30px;

    height:24px;

    cursor:pointer;

    z-index:60;

  }

  .hamburger-btn span{

    display:block;

    height:2px;

    background:var(--ink);

    border-radius:1px;

    transition:transform .3s ease, opacity .3s ease;

  }

  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

  }

  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(2){

    opacity:0;

  }

  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

  }



  /* dropdown nav panel */

  .mobile-nav{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    max-height:0;

    overflow:hidden;

    background:var(--stone-bg-alt);

    border-bottom:1px solid var(--line);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

    transition:max-height .4s ease;

  }

  .menu-toggle-checkbox:checked ~ .mobile-nav{

    max-height:520px;

  }

  .mobile-nav ul{

    display:flex;

    flex-direction:column;

    padding:8px 24px 20px;

  }

  .mobile-nav li{ border-bottom:1px solid var(--line); }

  .mobile-nav li:last-child{ border-bottom:none; }

  .mobile-nav a{

    display:block;

    position:relative;

    padding:16px 4px;

    font-size:.92rem;

    letter-spacing:.04em;

    color:var(--ink-soft);

    transition:color .25s ease;

  }

  .mobile-nav a:hover, .mobile-nav a:focus-visible{ color:var(--moss-deep); }



  /* ---------- 事業内容 プルダウンサブメニュー ---------- */

  .nav-submenu summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 4px;

    cursor:pointer;

    list-style:none;

  }

  .nav-submenu summary::-webkit-details-marker{ display:none; }

  .submenu-link{

    flex:1;

    font-size:.92rem;

    letter-spacing:.04em;

    color:var(--ink-soft);

    transition:color .25s ease;

  }

  .submenu-link:hover, .submenu-link:focus-visible{ color:var(--moss-deep); }

  .submenu-arrow{

    font-size:1.3rem;

    line-height:1;

    color:var(--bronze);

    margin-left:8px;

    transition:transform .3s ease;

  }

  .nav-submenu[open] .submenu-arrow{ transform:rotate(180deg); }

  .submenu-list{

    padding:0 0 10px 14px;

  }

  .submenu-list li{ border-bottom:none; }

  .submenu-list a{

    display:block;

    padding:10px 4px;

    font-size:.85rem;

    letter-spacing:.03em;

    color:var(--ink-soft);

    opacity:.85;

    transition:color .25s ease, opacity .25s ease;

  }

  .submenu-list a::before{ content:"– "; color:var(--bronze); }

  .submenu-list a:hover, .submenu-list a:focus-visible{

    color:var(--moss-deep);

    opacity:1;

  }



  /* ---------- hero ---------- */

  .hero{

    position:relative;

    min-height:52vh;

    display:flex;

    align-items:flex-end;

    background:#1c1b18;

    overflow:hidden;

  }

  .hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.72;

	

  }

  .hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    180deg,

    rgba(255,255,255,0.05) 0%,

    rgba(255,255,255,0.10) 50%,

    rgba(255,255,255,0.35) 100%

  );

  }



  .hero-content{

    position:relative;

    z-index:2;

    width:100%;

    padding:52px 24px 44px;

    color:#f4f2ec;

    text-align:center;

  }

  .hero-eyebrow{

    display:block;

    font-size:.78rem;

    letter-spacing:.4em;

    color:#d8cfae;

    margin-bottom:18px;

    text-transform:uppercase;

  }

  .hero h1{

    font-size:clamp(2.1rem, 5vw, 3.4rem);

    line-height:1.4;

    margin-bottom:22px;

  }

  .hero p{

    font-size:1rem;

    letter-spacing:.08em;

    color:#eae6d8;

  }



  /* ---------- section shell ---------- */

  section{

    padding:96px 0;

  }

  section + section{

    border-top:1px solid var(--line);

  }

  .section-head{

    text-align:center;

    margin-bottom:56px;

  }

  .eyebrow{

    display:block;

    font-family:"Shippori Mincho", serif;

    font-size:.82rem;

    letter-spacing:.4em;

    text-transform:uppercase;

    color:var(--bronze);

    margin-bottom:10px;

  }

  .section-head h2{

    font-size:clamp(1.6rem, 3vw, 2.1rem);

    color:var(--ink);

  }

  .lead{

    max-width:520px;

    margin:22px auto 0;

    color:var(--ink-soft);

    font-size:.98rem;

  }



  /* ---------- services ---------- */

  .service-grid{

    display:flex;

    flex-direction:column;

    gap:1px;

    background:var(--line);

    border:1px solid var(--line);

    max-width:820px;

    margin:0 auto;

  }

  .service-card{

    background:var(--stone-bg-alt);

    display:flex;

    align-items:center;

    gap:28px;

    padding:0;

    text-align:left;

    transition:background .3s ease;

  }

  .service-card .thumb{

    flex:0 0 42%;

    aspect-ratio:16/9;

    overflow:hidden;

  }

  .service-card .thumb img{

    width:100%; height:100%;

    object-fit:cover;

    filter:grayscale(.15);

    transition:transform .5s ease, filter .5s ease;

  }

  .service-card:hover{ background:#fff; }

  .service-card:hover .thumb img{

    transform:scale(1.06);

    filter:grayscale(0);

  }

  .service-card p{

    padding:0 24px 0 0;

    font-size:.98rem;

    letter-spacing:.03em;

	background: rgba(255, 255, 255, 0.85);

  }



  .cta-row{

    text-align:center;

    margin-top:52px;

  }



  .service-links-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    max-width:700px;

    margin:56px auto 0;

  }

  .service-links-grid a{

    display:flex;

    align-items:center;


    gap:14px;

    padding:16px 16px;

    border:1px solid var(--line);

    background:var(--stone-bg-alt);

    transition:border-color .25s ease, background .25s ease, transform .25s ease;

  }

  .service-links-grid a:hover, .service-links-grid a:focus-visible{

    border-color:var(--bronze);

    background:#fff;

    transform:translateY(-2px);

  }

  .s-icon{

    flex:0 0 auto;

    width:26px; height:26px;

    color:var(--moss-deep);

  }

  .s-icon svg{ width:100%; height:100%; }

  .s-label{

    flex:1;

    font-size:.86rem;

    letter-spacing:.02em;

    color:var(--ink);

  }

  .s-arrow{

    color:var(--bronze);

    font-size:1.1rem;

    line-height:1;

  }

  .btn{

    display:inline-block;

    padding:9px 24px;

    border:1px solid var(--ink);

    font-size:.76rem;

    letter-spacing:.14em;

    color:var(--ink);

    transition:background .3s ease, color .3s ease, border-color .3s ease;

  }

  .btn:hover, .btn:focus-visible{

    background:var(--moss-deep);

    border-color:var(--moss-deep);

    color:#f5f3ec;

  }



  .gallery-strip{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1px;

    margin-top:64px;

    background:var(--line);

    border:1px solid var(--line);

  }

  .gallery-strip img{

    width:100%;

    height:340px;

    object-fit:cover;

    filter:grayscale(.1);

  }



  /* ---------- strengths ---------- */

  .strengths-intro{ max-width:640px; margin:0 auto 40px; text-align:center; color:var(--ink-soft); font-size:.92rem; }

  .strengths-grid{

    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px 32px;

    max-width:860px; margin:0 auto 40px;

  }

  .strength-item{ padding:22px 24px; background:var(--stone-bg-alt); border:1px solid var(--line); }

  .strength-item h3{

    font-family:"Shippori Mincho", serif;

    font-size:.94rem; color:#0D0748; margin-bottom:8px;

  }

  .strength-item p{ font-size:.86rem; color:var(--ink-soft); }

  .strengths-outro{ max-width:560px; margin:0 auto; text-align:center; color:var(--ink-soft); font-size:.9rem; }



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

  .contact-section{ background:var(--stone-bg-alt); }

  .phone-block{

    max-width:520px;

    margin:0 auto 40px;

    text-align:center;

  }

  .phone-number{

    display:inline-block;

    font-family:"Shippori Mincho", serif;

    font-size:clamp(1.8rem, 4.5vw, 2.4rem);

    color:var(--moss-deep);

    letter-spacing:.04em;

    border-bottom:1px solid var(--moss-deep);

    padding-bottom:4px;

    transition:color .25s ease, border-color .25s ease;

  }

  .phone-number:hover, .phone-number:focus-visible{

    color:var(--bronze);

    border-color:var(--bronze);

  }

  .phone-hours{

    margin-top:16px;

    font-size:.86rem;

    color:var(--ink-soft);

    letter-spacing:.03em;

  }

  .phone-hours .closed{ color:var(--ink-soft); }



  .contact-bar{

    max-width:640px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:14px;

  }

  .contact-bar a{

    display:block;

    text-align:center;

    padding:16px 10px;

    border:1px solid var(--ink);

    font-size:.82rem;

    letter-spacing:.06em;

    transition:background .3s ease, color .3s ease, border-color .3s ease;

  }

  .contact-bar a.primary{

    background:var(--moss-deep);

    border-color:var(--moss-deep);

    color:#f5f3ec;

  }

  .contact-bar a:hover, .contact-bar a:focus-visible{

    background:var(--ink);

    border-color:var(--ink);

    color:#f5f3ec;

  }



  /* ---------- news ---------- */

  .news-panel{

    max-width:680px;

    margin:0 auto;

    background:var(--stone-bg-alt);

    border:1px solid var(--line);

    padding:44px 40px;

    text-align:center;

  }

  .news-panel p{ color:var(--ink-soft); font-size:.94rem; }

  .news-panel p + p{ margin-top:14px; }

  .news-panel .btn{ margin-top:30px; }



  /* ---------- greeting ---------- */

  .greeting{

    background:var(--ink);

    color:#efece3;

  }

  .greeting .eyebrow{ color:#c9a877; }

  .greeting .section-head h2{ color:#f5f3ec; }

  .greeting-body{

    max-width:680px;

    margin:0 auto;

    font-size:.95rem;

    color:#d9d5c8;

  }

  .greeting-body p{ margin-bottom:22px; }

  .greeting-body .quote{

    font-family:"Shippori Mincho", serif;

    font-size:1.15rem;

    color:#f0e6cc;

    text-align:center;

    margin:36px 0;

    letter-spacing:.06em;

  }

  .greeting .cta-row .btn{

    border-color:#efece3;

    color:#efece3;

  }

  .greeting .cta-row .btn:hover{

    background:#c9a877;

    border-color:#c9a877;

    color:#1c1a15;

  }



  /* ---------- FAQ ---------- */

  .faq-list{

    max-width:720px;

    margin:0 auto;

    border-top:1px solid var(--line);

  }

  .faq-item{

    border-bottom:1px solid var(--line);

  }

  .faq-item summary{

    list-style:none;

    cursor:pointer;

    display:flex;

    align-items:baseline;

    gap:16px;

    padding:24px 4px;

    font-family:"Shippori Mincho", serif;

    font-size:1.02rem;

    color:var(--ink);

  }

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

  .faq-item summary .q-mark{

    color:var(--bronze);

    font-size:1.1rem;

    flex-shrink:0;

  }

  .faq-item summary .toggle{

    margin-left:auto;

    font-family:"Zen Kaku Gothic New", sans-serif;

    color:var(--ink-soft);

    font-size:1.2rem;

    transition:transform .3s ease;

  }

  .faq-item[open] summary .toggle{ transform:rotate(45deg); }

  .faq-item .a-body{

    padding:0 4px 26px 34px;

    color:var(--ink-soft);

    font-size:.92rem;

    max-width:600px;

  }



  .qa-section{ background:var(--stone-bg-alt); }

  .qa-tag{

    text-align:center;

    font-family:"Shippori Mincho", serif;

    font-style:italic;

    color:var(--moss-deep);

    margin-bottom:8px;

    letter-spacing:.06em;

  }



  /* ---------- footer ---------- */

  .site-menu{

    text-align:center;

    padding-bottom:38px;

    margin-bottom:34px;

    border-bottom:1px solid #3a3831;

  }

  .site-menu-title{

    font-family:"Shippori Mincho", serif;

    font-size:1rem;

    letter-spacing:.15em;

    color:#cfcabb;

    margin-bottom:22px;

  }

  .site-menu-list{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    font-size:.84rem;

    letter-spacing:.04em;

  }

  .site-menu-list a{ color:#a9a496; transition:color .25s ease; }

  .site-menu-list a:hover, .site-menu-list a:focus-visible{ color:#c9a877; }

  footer{

    background:var(--ink);

    color:#b9b5a8;

    padding:56px 0 30px;

    font-size:.78rem;

  }

  .credit-block{

    max-width:900px;

    margin:0 auto 34px;

    line-height:1.9;

    color:#8f8b7e;

  }

  .footer-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

    margin-bottom:26px;

  }

  .footer-links a{ color:#cfcabb; }

  .footer-links a:hover{ color:#c9a877; }

  .footer-bottom{

    text-align:center;

    color:#6f6c60;

    letter-spacing:.05em;

  }



.site-menu{

  text-align: center;

  margin-bottom: 34px;

}



.site-menu-title{

  font-family: "Shippori Mincho", serif;

  font-size: 1rem;

  letter-spacing: .15em;

  color: #cfcabb;

  margin-bottom: 22px;

}



.site-menu-list{

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

  list-style: none;

  padding: 0;

  margin: 0;

}



.site-menu-list li{

  width: 100%;

  text-align: center;

}



.site-menu-list a{

  display: inline-block;

  color: #cfcabb;

  text-align: center;

}



.site-menu-list a:hover{

  color: #c9a877;

}





 /* ---------- LINE縦 ---------- */



.line-panel {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 50px;

}



.line-add-area {

  text-align: center;

}



.line-panel figure {

  margin: 0;

  text-align: center;

}







/* 事業内容のカード同士に隙間を入れる */

.service-grid {

  gap: 20px;

  background: rgba(255, 255, 255, 0.85);

}



/* カードの文字をmigi寄せ */

.service-card p {

  text-align: right;

  padding: 10px 12px;

  margin: 0;

}

.site-menu-list{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:16px;

  font-size:.84rem;

  letter-spacing:.04em;

  list-style:none;

  padding:0;

  margin:0;

}





  /* ---------- responsive ---------- */

  @media (max-width:860px){

    .strengths-grid{ grid-template-columns:1fr; }

    .gallery-strip{ grid-template-columns:1fr; }

  }



  @media (max-width:520px){

    .service-links-grid{ grid-template-columns:repeat(2, 1fr); }

    .contact-bar{ grid-template-columns:1fr; }

    .service-card{ flex-direction:column; align-items:stretch; }

    .service-card .thumb{ flex:none; aspect-ratio:16/9; }

    .service-card p{ padding:16px 18px 22px; }

    section{ padding:68px 0; }

    .hero{ min-height:46vh; }

    .news-panel{ padding:34px 22px; }

  }



  @media (prefers-reduced-motion: reduce){

    *{ transition:none !important; scroll-behavior:auto !important; }

  }





































/* ---------- LINEステーション---------- */





.line-section{ background:var(--stone-bg-alt); }

.line-panel{

  max-width:640px; margin:0 auto; display:grid;

  grid-template-columns:1fr 1fr; gap:36px; text-align:center;

}

.line-panel figure{ background:#fff; border:1px solid var(--line); padding:26px 20px 22px; }

.line-panel img{ margin:0 auto 16px; max-width:150px; }

.line-panel figcaption{ font-size:.86rem; color:var(--ink-soft); }

.line-note{

  max-width:640px; margin:34px auto 0; text-align:center;

  font-size:.86rem; color:var(--ink-soft); line-height:2;

}

.line-note .line-id{ color:var(--moss-deep); font-weight:500; letter-spacing:.04em; }



/* =========================

   固定ヘッダー

========================= */



.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  background: rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}



/* ヘッダーに隠れないようにする */

body {

  padding-top: 100px;

  padding-bottom: 75px;

}





/* =========================

   固定フッター

========================= */



.fixed-footer {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 65px;

  z-index: 1000;



  display: flex;

  align-items: center;

  justify-content: center;



  background: rgba(255, 255, 255, 0.95);

  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);

}



/* 電話・お問い合わせボタン */

.fixed-footer a {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}



/* ボタン画像 */

.fixed-footer img {

  display: block;

  width: auto;

  height: 48px;

  max-width: 100%;

}





@media screen and (max-width: 768px) {



  body {

    padding-top: 90px;

    padding-bottom: 65px;

  }



  .fixed-footer {

    height: 60px;

  }



  .fixed-footer a {

    width: 100%;

  }



  .fixed-footer img {

    width: 100%;

    height: 100%;

    object-fit: contain;

  }

}



/* スマホ版：事業内容カードの文字余白だけ調整 */

@media screen and (max-width: 520px) {



  .service-grid {

    gap: 12px;

  }



  .service-card {

    gap: 0;

  }



  .service-card p {

    padding: 5px 8px;

    margin: 0;

    text-align: right;

    line-height: 1.3;

    min-height: 0;

	font-weight: 700;

  }

  .service-card {

    gap: 0;

    overflow: visible;

  }



  .service-card p {

    position: relative;

    z-index: 2;



    width: 100%;

    margin: -58px 0 0 auto;

    padding: 18px 14px 20px;



    background: #fff;

    text-align: right;

    line-height: 1.4;

	font-weight: 700;

	background: rgba(255, 255, 255, 0.85);

  }

}









/* 事業内容8個の画像ボタンを枠いっぱいにする */





.service-links-grid a {

  display: block;

  padding: 0;

  border: none;

  background: transparent;

  overflow: hidden;

}



.service-links-grid a img {

  display: block;

  width: 100%;

  height: auto;

  margin: 0;

}





/* スマホは2列 */

@media screen and (max-width: 520px) {

  .service-links-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }

}









/* 事業内容8個の画像ボタン */

.service-links-grid a {

  display: block;

  padding: 0;

  margin: 0;

  border: none;

  background: transparent;

  overflow: hidden;

}



.service-links-grid a img {

  display: block;

  width: 100%;

  height: auto;

  margin: 0;

}



/* スマホは2列 */

@media screen and (max-width: 520px) {

  .service-links-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

  }

}





.service-links-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

  max-width: 700px;

  margin: 56px auto 0;

}



.service-column {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.service-column a {

  display: block;

  padding: 0;

  margin: 0;

  border: none;

  background: transparent;

}



.service-column img {

  display: block;

  width: 100%;

  height: auto;

}





/* =========================

   追加調整

========================= */



/* 石材総合石也の強み：各タイトルを濃い水色に */

.strength-item h3 {

  color: #4f8291;

}



/* LINEで相談ボタンをLINEカラーに */

.contact-bar a.primary {

  background: #06c755;

  border-color: #06c755;

  color: #fff;

}



.contact-bar a.primary:hover,

.contact-bar a.primary:focus-visible {

  background: #05ad4a;

  border-color: #05ad4a;

  color: #fff;

}





/* LINE友だち追加ボタン */

.line-add-area {

  text-align: center;

}



.line-add-btn {

  display: inline-block;

  width: auto;

  min-width: 190px;

  padding: 9px 22px;

  background: #06c755;

  border: 1px solid #06c755;

  color: #fff;

  text-align: center;

  font-weight: 700;

  border-radius: 4px;

}



.line-add-btn:hover {

  background: #05ad4a;

  border-color: #05ad4a;

  color: #fff;

}



/* ボタンの下の説明文 */

.line-add-note {

  margin-top: 25px;

  text-align: center;

  font-size: 0.86rem;

  color: var(--ink-soft);

  font-weight: 700;

}



.line-id{

	font-weight: 700 !important;

	color: #060C39;

}



figcaption{

	font-weight: 700;

}



/* ---------- スクロールバー　---------- */



.mobile-nav{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    max-height:0;

    overflow:hidden;

    background:var(--stone-bg-alt);

    border-bottom:1px solid var(--line);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

    transition:max-height .4s ease;

}



.menu-toggle-checkbox:checked ~ .mobile-nav{

    max-height:75vh;

    overflow-y:auto;

}





.mobile-nav::-webkit-scrollbar{

    width: 8px;

}



.mobile-nav::-webkit-scrollbar-track{

    background: #2f3a40;   /* 濃いグレー */

}



.mobile-nav::-webkit-scrollbar-thumb{

    background: #8a8a8a;   /* 明るめグレー */

    border-radius: 10px;

}



.mobile-nav::-webkit-scrollbar-thumb:hover{

    background: #b0b0b0;

}



/* スマホは縦並び */

@media screen and (max-width: 520px) {

  .line-panel {

    display: flex;

    flex-direction: column;

    gap: 28px;

  }



  .line-add-area {

    width: 100%;

  }


}









/* =========================================================

   scroll animation (trapatch風：斜めライン + 画像スライド)

   ========================================================= */

.reveal{

  opacity:0;

  transform:translateY(26px);

  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);

}

.reveal.is-visible{ opacity:1; transform:translateY(0); }



.reveal-img{

  opacity:0;

  transform:scale(1.14);

  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);

}

.reveal-img.is-visible{ opacity:1; transform:scale(1); }
.hero img.reveal-img.is-visible{ opacity:.72; } 


.reveal-crest{

  opacity:0;

  transform:rotate(-14deg) scale(.7);

  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);

}

.reveal-crest.is-visible{ opacity:.85; transform:rotate(0deg) scale(1); }



/* 見出し下の斜めライン */

.section-head{ position:relative; }

.section-head::after{

  content:"";

  display:block;

  width:0;

  height:3px;

  margin:18px auto 0;

  background:linear-gradient(90deg, var(--bronze), var(--moss-deep));

  transform:skewX(-18deg);

  transition:width .9s cubic-bezier(.22,.61,.36,1) .1s;

}

.section-head.is-visible::after{ width:64px; }



@media (prefers-reduced-motion: reduce){

  .reveal, .reveal-img, .reveal-crest{

    opacity:1 !important; transform:none !important; transition:none !important;

  }

  .section-head::after{ transition:none !important; width:64px !important; }

}