*,*::before,*::after{box-sizing:border-box;}

body{
margin: 0;
padding: 0;
background-color: #eef1f4;
}
body.home{
padding-top: 120px;
}
img{
max-width: 100%;
height: auto;
}
a{
text-decoration: none;
}
a:hover{
    text-decoration: none;
}

:root {
/* ========================
  Color
======================== */
--color-main: #1f2a33;      /* 少し青寄り黒 */
--color-sub: #b9c42f;       /* グレーも青寄りに */
--color-accent: #008000;    /* 少し渋めに落とす */

--color-bg: #ffffff;
--color-bg-soft: #ffc20e;   /* 背景に寄せる */
--color-border: #e94709;    /* ちょい濃く */

--color-indigo: #165e83;
--color-sky: #0094c8;
--color-red: #c9171e;

/* ========================
  Spacing
======================== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
--space-4xl: 96px;
--space-5xl: 128px;

/* ========================
  Font Size
======================== */
--text-xs: 0.75rem;   /* 12px */
--text-sm: 0.875rem;  /* 14px */
--text-md: 1rem;      /* 16px */
--text-lg: 1.125rem;  /* 18px */
--text-xl: 1.25rem;   /* 20px */
--text-2xl: 1.5rem;   /* 24px */
--text-3xl: 2rem;     /* 32px */
--text-4xl: 2.5rem;   /* 40px */

/* ========================
  Line Height
======================== */
--lh-tight:1.3;
--lh-base:1.7;
--lh-loose:2;

/* ========================
  Radius
======================== */
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 20px;

/* ========================
  Transition
======================== */
--transition: .3s ease;

/* ========================
  Boxshadow
======================== */
--box-shadow:6px 6px 0px rgb(47 79 111 /.25);
}

/* ========================
  Typography (Responsive)
======================== */
h1 {font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));}
h2 {font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl));}
h3 {font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));}
h4 {font-size: clamp(var(--text-lg), 2vw, var(--text-xl));}
h5 {font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));}
h6 {font-size: clamp(var(--text-sm), 1.4vw, var(--text-md));}
p  {font-size: clamp(var(--text-sm), 1.2vw, var(--text-md));}
p.lead {font-size: clamp(var(--text-sm), 1.2vw, var(--text-lg));}

h2,h3       {color: var(--color-indigo);}
p           {color: var(--color-main);}
p.lead      {font-weight: 600;}
.home p.lead{color: var(--color-indigo);}

.center-center {
display: grid;
place-content: center;
text-align: center;
gap: 1ch;
}
.youtube {
    margin: 0 0 var(--space-md);
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}


/* ========================
  Line Height
======================== */
body{line-height:var(--lh-base);}
h1,h2,h3{line-height:var(--lh-tight);}
p.lead{line-height:var(--lh-loose);}

.grid{
display:grid;
width: 100%;
--gap-size: 30px; /* デフォルトのgap */
gap: var(--gap-size);
}
.gap-5 { --gap-size: 5px; }
.gap-10 { --gap-size: 10px; }
.gap-15 { --gap-size: 15px; }
.gap-20 { --gap-size: 20px; }
.gap-30 { --gap-size: 30px; }
.gap-60 { --gap-size: 60px; }
.gap-80 { --gap-size: 80px; }
.gap-90 { --gap-size: 90px; }

.grid-2{grid-template-columns: repeat(2, 1fr);}
.grid-3{grid-template-columns: repeat(3, 1fr);}
.grid-4{grid-template-columns: repeat(4, 1fr);}
.grid-5{grid-template-columns: repeat(5, 1fr);}

.grid-1-2{grid-template-columns: 1fr 2fr;}
.grid-2-1{grid-template-columns: 2fr 1fr;}
.grid-2-3{grid-template-columns: 2fr 3fr;}

.container{
max-width:1200px;
margin-inline:auto;
padding-inline:var(--space-md);
}
.w-900{
max-width: 900px;
margin: 0 auto;
}
.w-800{
max-width: 800px;
margin: 0 auto;
}
.w-600{
max-width: 600px;
margin: 0 auto;
}
.pc     {display: revert;}
.tablet {display: none;}
.sp     {display: none;}

@media (max-width:1199px){
.container{
padding-inline:var(--space-md);
}
}
@media (max-width:834px) {
.container{
width: 100%;
padding-inline:var(--space-md);
}
.text-md-center{
text-align: left;
}
.pc{display: none;}
.tablet{display: block;}
.sp{display: none;}
}
@media (max-width:600px) {
.container{
width: 100%;
max-width: 100%;
}
.pc{display: none;}
.tablet{display: none;}
.sp{display: block;}

.grid-2   {grid-template-columns: 1fr;}
.grid-3   {grid-template-columns: 1fr;}
.grid-4   {grid-template-columns: 1fr;}
.grid-1-2 {grid-template-columns: 1fr;}
.grid-2-1 {grid-template-columns: 1fr;}
}

.mb-lg{
    margin-bottom: var(--space-lg) !important;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  letter-spacing: .1em;
}


.nav-toolbar {
    border-bottom: 1px solid hsl(203 53% 7% / .04);
    height: 48px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center; 
    align-items: center;
}

/* PCナビ */
.nav-menu {
    display: flex;
    justify-content: end;
}

.nav-menu a {
     color: hsl(203 53% 7% / .56);
    display: inline-block;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1rem;
    padding: 1rem;
    position: relative;
    text-decoration: none;
}
body:not(.home) .nav-menu a {
    color: rgb(255 255 255 /1);
}
.home .nav-menu a,
body:not(.home) .is-scrolled .nav-menu a {
    color: hsl(203 53% 7% / .56);
    text-shadow: none;
}
.is-scrolled .nav-menu a {
    color: hsl(203 53% 7% / .56);
}

body:not(.home) .nav-menu a:hover{
        color: #fff;
}
body:not(.home) .is-scrolled .nav-menu a:hover{
    color: var(--color-indigo);
}
body:not(.home) .nav-menu a.active {
    color: rgb(255 255 255 /1);
}
.is-scrolled .nav-menu a:hover,
body:not(.home) .is-scrolled  .nav-menu a.active {
    color: hsl(203 53% 7%);
}
  
.nav-menu > a::after {
    background-color: transparent;
    content: "";
    height: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease, background .2s ease;
}

/* JSで付与されるactiveクラスとaria-current属性で下線を引く */
.nav-menu > a.active::after,
.nav-menu > a[aria-current="page"]::after {
    background-color:var(--color-bg-soft);
    transform: scaleX(1);
}

/* ハンバーガーボタン */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: none; /* 初期状態では非表示 */
    height: 24px;
    padding: 0;
    position: absolute;
    top: 30px;
    right: 20px;
    width: 24px;
    z-index: 100; /* メニューより手前に表示 */
}

.hamburger span {
    background-color: var(--color-indigo);
    display: block;
    height: 2px;
    position: absolute;
    left: 0;
    transition: all .3s;
    width: 100%;
}

.hamburger span:nth-child(1) {
    top: 4px;
}

.hamburger span:nth-child(2) {
    top: 11px;
}

.hamburger span:nth-child(3) {
    bottom: 4px;
}
  
  /* activeクラスが付いた時にバツ印にする */
.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* モバイル用メニュー */
.mobile-menu {    
    background-color: hsl(0 0% 100% / .95);
    border-top: 1px solid hsl(203 53% 7% / .04);
    height: calc(100vh - 64px);
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    position: fixed;
    top: 64px; /* ヘッダーの高さ分下げる */
    right: 0; 
    transform: translateX(100%); /* 最初は画面の外に隠しておく */
    transition: transform .3s ease-in-out;
    width: 100%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mobile-menu a {
    color: hsl(203 53% 7% / .56);
    font-size: 1.25rem;
    font-weight: 600;
    padding: .75rem 0;
    text-decoration: none;
}
.mobile-menu a:last-child {
    display: block;
    margin-top: var(--space-2xl);
    font-size: 2rem;
    font-weight: 600;
}

/* showクラスが付いたら表示 */
.mobile-menu.show {
    transform: translateX(0);
}

/* レスポンシブ設定 (画面幅が768px以下で適用) */
@media (max-width: 768px) {
    .nav-toolbar {
        border-bottom: none;
        justify-content: flex-end; /* ハンバーガーボタンを右寄せ */
    }
    
    .nav-menu {
        display: none; /* PCメニューを非表示 */
    }
    
    .hamburger {
        display: block; /* ハンバーガーボタンを表示 */
    }
}

/* ドロップダウン サブメニュー開閉設定 (画面幅が769px以上で適用) */
@media (min-width: 769px) {
    .nav-submenu {
        cursor: pointer;
        display: inline-block;
        font-size: .875rem;
        font-weight: 600;
        line-height: 1rem;
        padding: 1rem;
        position: relative; /* サブメニューの基準 */
    }
  
    .nav-submenu .submenu-label, 
    .nav-submenu a > .submenu-label {
        color: hsl(203 53% 7% / .56);
    }
  
    .nav-submenu:hover .submenu-label, 
    .nav-submenu:hover a > .submenu-label {
        border-bottom: 2px solid hsl(203 53% 7%);
        color: hsl(203 53% 7%);
    }
  
    .nav-submenu .submenu {
        background-color: hsl(0 0% 98%);
        border: 1px solid hsl(0 0% 87%);
        box-shadow: 0 4px 8px hsl(0 0% 0% / .5);
        display: none;
        min-width: 160px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }
    
    .nav-submenu:hover .submenu,
    .nav-submenu .submenu:hover {
        display: block;
    }
  
    .nav-submenu .submenu a {
        color: hsl(203 53% 7% / .56);
        display: block;
        padding: .75rem 1rem;
        text-decoration: none;
    }
  
    .nav-submenu .submenu a:hover {
        background-color: hsl(0 0% 94%);
        color: hsl(203 53% 7%);
    }
}


#main-nav{
padding: 0;
}
#contentareas{
padding: 30px;
}
.header>.navbar{
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
max-width: 100%;
padding: 0;
}
.navbar-brand {
grid-row: 1 / span 2; /* ロゴは縦にまたがる */
align-self: center;
position: relative;
z-index: 2;
}
.navbar {
grid-column: 2;
grid-row: 1;
align-items: center;
}


.logo-wrap {
position: relative;
width: 200px;
height: 60px;
}

.logo {
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
transition: transform 0.3s ease;
}
.logo.small {
opacity: 0;
}
.header>.navbar {
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.header>.navbar.is-scrolled {
height: 70px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
}

.navbar.is-scrolled .logo-wrap {
height: 70px;
}

.navbar.is-scrolled .logo.big {
opacity: 0;
}

.navbar.is-scrolled .logo.small {
opacity: 1;
}

.navbar.is-scrolled .logo {
transform: scale(0.85);
}

@media (max-width: 768px) {
    .logo-wrap {
        position: relative;
        width: 200px;
        height: 80px;
}
    .nav-toolbar{
        height: 80px;
    }
    .header>.navbar.is-scrolled {
    height: 80px;
}
    .logo.big{
        display: none;
    }
    .logo.logo.small{
        display: block;
        opacity: 1;
    }
    .navbar.is-scrolled .logo {
    transform: scale(1);
}
}


/*FOOTER*/
footer{
    padding: var(--space-lg) 0 var(--space-2xl);
    background-color: var(--color-bg);
    background-color: #eef1f4;
}
footer .container{
    display: grid;
    grid-template-columns: 160px auto 480px;
    gap: 60px;
}

.info{
grid-column:2 / 3;
grid-row:1 / 2;
}
footer h3{
    margin: 0 0 var(--space-md);
}

footer h3 span{
font-size: var(--text-sm);
}
footer a[href^="tel:"] {
    display: block;
    margin: 0 0 var(--space-md);
    font-size: var(--text-2xl);
    font-weight: 600;
}

.footer-sns{
    display: flex;
    gap: 30px;
    margin: 0 0 0px;
    padding: 0;
    list-style: none;
}

.footer-nav{
    grid-column:1 / 3;
    grid-row:2 / 3;
}
.footer-nav1,
.footer-nav2{
    display: flex;
    gap: 0px 15px;
    margin: 0 0 var(--space-sm);
    padding: 0;
    list-style: none;    
}
.footer-nav2{
    font-size: var(--text-sm);
} 
.sewing-machine{
    grid-column:3 / 4;
    grid-row:1 / 3;
    margin-top: auto;
}




@media (max-width: 600px) {
.footer-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
}

/*LAYOUT*/
main{
    position: relative;
    padding: 0 0 var(--space-4xl);
}
.section{
padding: var(--space-2xl) 0;    
}

/*UTILITY*/

.section_contact{
position: relative;
padding: var(--space-4xl) 0;  

text-align: center;
}
.section_contact::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(images/bg_contact.webp);
    background-color: var(--color-bg);
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    opacity: 1;
}

.section_contact a{
font-size: 2rem;
font-weight: 600;
}
.section_contact a span{
display: block;
width: 100%;
font-size: 1.125rem;
font-weight: 600;
}

.section_contact a{
position:relative;
display: inline-block;
margin:0 auto var(--space-2xl);
padding:20px 40px;
z-index:2; /* ←これ上げる */
}

/* 白背景 */
.section_contact a::before{
content:"";
position:absolute;
inset:0;
background:#fff;
border:2px solid var(--color-indigo);
border-radius:20px;
z-index:-1;
}
.section_contact a::after{
content:"";
position:absolute;
top:6px;
left:6px;
width:100%;
height:100%;
border-radius:20px;

background: repeating-linear-gradient(
45deg,
#000 0px,
#000 2px,
transparent 2px,
transparent 8px
);

border:2px solid #000;
z-index:-2;
transition: .3s;
}
.section_contact a:hover::after{
top:1px;
left:1px;
}


.btn-ordermade{
    display: block;
    margin: var(--space-lg) 0 0;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-bg);
    width: fit-content;
    font-size: var(--text-xl);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: .3s;
}
.btn-ordermade:hover{
    color: var(--color-indigo);
    background-color: var(--color-bg);
    border: 1px solid var(--color-bg);
}
.btn-dash{
position:relative;
display:inline-block;
padding:16px 32px;
border:2px dashed #333;
text-decoration:none;
color:#333;
transition:color .3s;
}
.btn-dash::before{
content:"";
position:absolute;
inset:0;
border:2px dashed #333;
opacity:0;
}
/* アニメーション本体 */
.btn-dash:hover::before{
opacity:1;
animation:dashMove 1s linear infinite;
}
/* 点線を流す */
@keyframes dashMove{
0%{
stroke-dashoffset:0;
}
100%{
stroke-dashoffset:20;
}
}

.btn-svg{
position:relative;
display:block;
width: fit-content;
margin: 0 auto;
padding:var(--space-sm) var(--space-xl);
font-weight: 700;
text-decoration:none;
color:#333;
background-color: var(--color-bg);
    font-size: var(--text-xl);
  font-family: "Vibur", cursive;
  font-weight: 400;
  font-style: normal;
}


.btn-svg span{
position:relative;
z-index:2;
}

/* SVG枠 */
.btn-svg svg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

/* 点線 */
.btn-svg rect{
fill:none;
stroke:#333;
stroke-width:1.5;
stroke-dasharray:4 8;
transition:.3s;
stroke-linecap: round;
}

/* hoverで流す */
.btn-svg:hover rect{
animation:dashFlow 1s linear infinite;
}

@keyframes dashFlow{
to{
stroke-dashoffset:-12;
}
}


/*UTILITY*/
.title{
position:relative;
width: fit-content;
margin:0 auto var(--space-2xl);
padding:20px 40px;
z-index:2; /* ←これ上げる */
}

/*HERO*/
.hero{
    position: relative;
    display: grid;
    grid-template-columns: 800px 1fr;
    margin: 0 0 var(--space-2xl);
    padding: var(--space-2xl) 0 var(--space-5xl);
    overflow: hidden;
}
.hero::before{
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -10px;
    content: url(images/ornament_01.webp);
    width: 100%;
}

.contact .hero::before,
.thanks .hero::before{
    content: url(images/ornament_01_white.webp);
}
.contact .hero{
    margin-bottom: 0;
}


.hero .hero-text {
display: grid;
place-content: center;
gap: 1ch;
padding: var(--space-lg);
}
.hero-img{
    position: relative;
display: grid;
place-content: center;
text-align: center;
gap: 1ch;
}
.hero-img img{
    position: relative;
    z-index: 2;
    max-width: 500px;
    border: 10px solid var(--color-bg);
    border-radius: var(--radius-lg);
    transform: rotate(-2deg) translate(10px,80px);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.hero-text{color:#fff;}
.works .hero{background-color: var(--color-red);}
.custom-made .hero{background-color: var(--color-sky);}
.i-ironubou .hero{background-color: var(--color-indigo);}
.contact .hero{background-color: var(--color-indigo);}

.i-ironubou .hero-text p,
.contact .hero-text p{color: rgb(255 255 255 /.75);}



/*TOPPAGE*/
.home .section_interlude{
    background-image: url(images/ornament_y_01.webp);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.home .section_contact{
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.home .section_news h2{
    position: relative;
    margin: 0 0 var(--space-lg);
}
.home .section_news h2::after{
    position: absolute;
    top: -5px;
    content: url(images/iron.svg);
    width: 60px;
    margin-left: var(--space-lg);
}
.home .section_news dl{
    margin: 0;
    padding: 0;
}
.home .section_news dd:not(:last-child) {
margin-bottom: var(--space-md);
}
.home .section_news dd{
    color: var(--color-sky);
}
.home .section_news dd a{
    display: block;
    width: fit-content;
    margin-top: 1rem;
    padding: .25rem .5rem;
    background-color: #fff;
    border: 2px solid var(--color-sub);
    border-radius: var(--radius-md);
}
.section_upcycling{
    background-color: var(--color-bg);
}
.section_upcycling .grid{
    padding: var(--space-xl);
    color: var(--color-bg);
    background-color: var(--color-indigo);
    border-radius: var(--radius-lg);
}
.home .section_upcycling h2,
.home .section_upcycling p.lead{
    color: var(--color-bg);
}
.section_upcycling .grid{
    align-items: center;
}
.section_upcycling h2{
    display: block;
    margin: 0 auto;
}
.home .section_upcycling p.lead{
    color: rgb(255 255 255 /.75);
}   

.carousel-wrap {
overflow: hidden;
padding-top: 20px;
}

.track {
display: flex;
will-change: transform;
}

.item {
flex-shrink: 0;
margin-right: 20px;
transition: transform .4s ease;
}
.item:nth-child(3n+1){
transform: translateY(-10px) scale(.97);
}
.item:nth-child(3n+2){
transform: translateY(-25px) scale(.95);
}
.item:nth-child(3n+3){
transform: translateY(-5px) scale(.98);
}

.item img {
height: 500px;
width: auto;
display: block;
border-radius: var(--radius-lg);
}
.section_interlude h1{
    text-align: center;
}
.section_interlude h1 span{
font-size: var(--text-md);
}
.section_interlude p span{
color: var(--color-red);
}
.section_interlude p span {
display: inline-block;
animation: heartFade 4s ease-in-out infinite;
}
@keyframes heartFade {
0%, 100% {
opacity: 0.85;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1.1) rotate(5deg);
}
}


.section_service figure,
.section_scene figure{
    position: relative;
    display:flex;
    flex-direction:column;
    height:100%;
}

.section_service figcaption,
.section_scene figcaption{
    display:flex;
    flex-direction:column;
    flex:1;
}
.section_service figcaption p,
.section_scene figcaption p{
    margin: 0 0 var(--space-lg);
}
.btn-wrap{
    margin-top:auto;
}

.making_number,
.activities-number{
    position: absolute;
    left: 10px;
    top: -15px;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--color-border);
    background-color: #eef1f4;
    border-radius: 50%;
    font-family: "Vibur", cursive;
    font-weight: 500;
    font-style: normal;
}


.section_service img,
.section_scene img{
    margin: 0 auto var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--box-shadow);
}
.section_service h3,
.section_scene h3{
    margin: 0 auto var(--space-md);
}

.section_upcycling h2 span{
font-size: var(--text-lg);
}


.section_outline{
    padding: var(--space-2xl) 0 var(--space-5xl);
}
.section_staff{
    padding: 0;
    background-color: var(--color-bg);
}
.img_staff{
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    transform: translateY(-60px);
    border-radius: var(--radius-lg);
}

.dl_overview{
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    gap: 30px;
}
.dl_overview dt{
    text-align: right;
}

.section_origin{
    color: var(--color-bg);
    background-color: var(--color-main)
}
.section_origin h2 {
    color: var(--color-bg);
}
.section_origin p{
    color: rgb(255 255 255 /.9);
}
.section_origin img{
    border-radius: var(--radius-md);
}
.bg_origin_01,
.bg_origin_02,
.bg_origin_03{
    background-position: right 60px bottom 30px;
    background-repeat: no-repeat;
}
.bg_origin_01 {background-image: url(images/bg_origin_01.webp);}
.bg_origin_02 {background-image: url(images/bg_origin_02.webp);}
.bg_origin_03 {background-image: url(images/bg_origin_03.webp);}

.section_youtube{
    background-color: var(--color-sub);
}
.section_youtube h2{
    margin: 0 auto var(--space-lg);
    text-align: center;
}
.section_service{
    background-image: url(images/line_02.svg), url(images/line_02.svg);
    background-repeat: no-repeat;
    background-position: center top 30px,center bottom 15px;
    background-size: 800px auto;
    background-color: var(--color-bg-soft);
}
.section_philosophy{
    background-color: var(--color-bg);
}


/*WORKS*/
.works .section_interlude{
    padding: 0 0 var(--space-3xl);
}
.works .section_interlude p{
    margin-bottom: 0;
}
.section_portfolio{
    background-color: var(--color-bg-soft);
}
.tabs{
max-width:1200px;
margin:auto;
}

/* ナビ */
.tab-nav{
display:flex;
justify-content: center;
gap:24px;
border-bottom:1px solid #fff;
}

.tab-nav button{
background:none;
border:none;
padding:12px 6px;
font-size:var(--text-lg);
font-weight: 600;
cursor:pointer;
position:relative;
color:#666;
}

/* アクティブ */
.tab-nav button.is-active{
color: var(--color-red);
background-color: rgb(255 255 255 /.5);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* 下線アニメ */
.tab-nav button::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:0;
height:2px;
background:var(--color-red);
transition:.3s;
}

.tab-nav button.is-active::after{
width:100%;
}

/* コンテンツ */
.tab-content{
display:none;
padding-top:32px;
animation: fade .3s ease;
}
.tab-content.is-active{
display:block;
}
.tab-content .tab-content_info{
    margin-bottom: var(--space-lg);
}
.tab-content h3{
    text-align: center;
    font-size: var(--text-3xl);
        font-weight: 700;
}
.tab-content h3 span{
    display: block;
    margin-top: var(--space-md);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-red);
    letter-spacing: normal;
}
.tab-content p{
    text-align: center;
    font-weight: 600;
}

@keyframes fade{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}

@media (max-width: 768px){
.tab-nav{
overflow-x:auto;
white-space:nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom:8px;
}
.tab-nav button{
flex:0 0 auto;
}
.gallery{
display:flex;
gap:24px;
overflow-x:auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 50%;
}
.gallery img{
flex:0 0 auto;
width:70%;
max-width:300px;
aspect-ratio:1/1;
object-fit:cover;
scroll-snap-align:center;
}
}




/*オーダーメイド*/
.section_price  { background-color: var(--color-bg);}
.section_comment{ background-color: var(--color-bg-soft);}
.section_flow   { background-color: var(--color-sub);}
.section_faq    { background-color: var(--color-accent);
}
@media(min-width:835px){
.lead-tl{
    margin-top: var(--space-lg);
}
}
.greeting .lead{
    margin-bottom: var(--space-md);
}

.section_price h2{
    position: relative;
}
.section_price h2::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -80px;
    margin: 0 auto;

    display: block;
    width: 90px;
    height: 60px;
    background-image: url(images/measure.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.section_comment h2,
.section_flow h2,
.section_faq h2{
    text-align: center;
    margin: 0 auto var(--space-lg);
    color: var(--color-bg);
}
#contact-order{
    padding: var(--space-2xl) 0;
    background-color: var(--color-bg);
}
#contact-order h2{
    margin: 0 auto var(--space-2xl);
    text-align: center;
}    
.tbl_price{
    margin-top: var(--space-lg);
    border-collapse: collapse;
    border-spacing: 0;
}
.tbl_price th,
.tbl_price td{
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-indigo);
}
.tbl_price th{
    background-color: rgb(22 94 131 /.1);
}
.tbl_price td{
    background-color: var(--color-bg);
}
.sticky_wrap{
min-height: 80px; /* navの高さ */
}
.sticky_cm-nav{
    display: flex;
    justify-content: center;
}
.sticky_cm-nav a{
    display: block;
    padding: 15px;
    white-space: nowrap;
    letter-spacing: normal;
}
.sticky_cm-nav.is-fixed{
position: fixed;
top: 110px;
left: 0;
width: 100%;
z-index: 9999;
padding-left: var(--space-md);
padding-right: var(--space-md);
color: var(--color-bg-soft);
background-color: rgb(22 94 131 /.75);
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
backdrop-filter: blur(12px);
width: fit-content;
border-radius: 999px;
left: 50%;
transform: translate(-50%, -50%);
animation: sticky_cm-nav 0.6s ease-in 0.8s both;
}
@keyframes sticky_cm-nav{
0%{ opacity: 0; }
100%{ opacity: 1; }
}
.sticky_cm-nav.is-hide{
pointer-events:none;
display: none;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.dl_commnet{
    margin: 0 0 var(--space-md);
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
}
.dl_commnet dt{
    margin: 0 0 var(--space-md);
    font-size: var(--text-lg);
    letter-spacing: normal;
    color: var(--color-indigo);
}
.dd-client{
    margin-top: var(--space-md);
    color: var(--color-indigo);
}

.floating-cta{
position: fixed;
bottom: 20px;
right: 0;
z-index: 999;
padding: 14px 24px 14px 14px;
background: var(--color-red);
color: #fff;
border-radius: var(--radius-md) 0 0 var(--space-md);
font-size: 14px;
line-height: 1.6;
width: 1ch;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.floating-cta{
opacity: 0;
transform: translateY(20px);
transition: all .3s ease;
}

.floating-cta.is-show{
opacity: 1;
transform: translateY(0);
}
@media (max-width: 834px){
.sticky_wrap{
display: none;
}
}
@media (min-width: 835px){
.floating-cta{
display: none;
}
}


.comment-accordion {
margin: 0 auto;
}

.comment-item {
border-radius: 16px;
overflow: hidden;
transition: background .3s ease;
}

.comment-item + .comment-item {
margin-top: 12px;
}

/* ボタン */
.comment-trigger {
    display: block;
    width: 20ch;
    margin: 0 auto var(--space-xl);
text-align: left;
padding: 16px 20px;
color: var(--color-bg);
background: var(--color-indigo);
border: none;
font-size: 1rem;
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
position: relative;
}

/* 矢印 */
.comment-trigger::after {
content: "";
width: 10px;
height: 10px;
border-right: 2px solid var(--color-bg-soft);
border-bottom: 2px solid var(--color-bg-soft);
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
transition: transform .3s ease;
}

/* 開いた状態 */
.comment-item.is-open .comment-trigger::after {
transform: translateY(-50%) rotate(225deg);
}

/* 中身 */
.comment-content {
height: 0;
overflow: hidden;
transition: height .35s ease;
}
.comment-content-inner{
display: grid;
grid-template-columns: repeat(2 ,1fr);
gap: 15px;
}
/* 中の余白 */
.comment-content-inner {
padding: 0 20px 16px;
color: #555;
line-height: 1.7;
}


.dl_contact-flow{
    position: relative;
    margin: 0 0 var(--space-2xl);
    display: grid;
    grid-template-columns: 30ch 1fr;
    gap: 30px;
}

.dl_contact-flow::before{
    content: "";
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 5px;
    display: block;
    width: 1px;
    height: 90%;
    background-color: var(--color-border);
}
.dl_contact-flow dt{
    position: relative;
    padding-left: 40px;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-red);
}
.dl_contact-flow dt::before{
    position: absolute;
    z-index: 3;
    left: 11px;
    top: -2px;
}
.dl_contact-flow dt:nth-of-type(1)::before{content: "1";}
.dl_contact-flow dt:nth-of-type(2)::before{content: "2";}
.dl_contact-flow dt:nth-of-type(3)::before{content: "3";}
.dl_contact-flow dt:nth-of-type(4)::before{content: "4";}
.dl_contact-flow dt::after{
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    top: 3px;
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.dl_contact-flow dt span{
    position: relative;
}
.dl_contact-flow dt span::before,
.dl_contact-flow dt span::after{
    content: "";
    position: absolute;
    z-index: 1;
}

@media(min-width:835px){
.form-address{
    padding-left: var(--space-xl);
    border-left: 2px solid var(--color-indigo);
}
}



.section_origin h2{
    margin: 0 auto var(--space-2xl);
    text-align: center;
}
.section_origin p{
    margin-bottom: var(--space-xl);
    letter-spacing: .1em;
    font-size: var(--text-md);
    font-weight: 500;
    line-height: var(--lh-loose);
    text-indent: 1em;
}

details {
    margin-top: auto;
border: 1px solid #e5e5e5;
border-radius: var(--radius-sm);
padding: 16px 20px;
background: #fff;
transition: all .3s ease;
}

details + details {
margin-top: 12px;
}

summary {
cursor: pointer;
font-weight: 600;
list-style: none;
position: relative;
padding-right: 24px;
}
summary span{
    display: block;
    font-size: var(--text-sm);
    letter-spacing: normal;
}

/* デフォルトの三角消す */
summary::-webkit-details-marker {
display: none;
}

/* アイコン */
summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
transition: transform .3s ease;
}
details[open] {
background: #f9f9f9;
border-color: #ccc;
}
/* 開いたとき */
details[open] summary::after {
content: "−";
}

/* 中身 */
details > *:not(summary) {
margin-top: 12px;
line-height: 1.7;
color: #555;
}
details > *:not(summary) {
opacity: 0;
transform: translateY(-8px);
transition: all .3s ease;
}

/* 開いたとき */
details[open] > *:not(summary) {
opacity: 1;
transform: translateY(0);
}

.btn-terms{
    display: block;
    width: fit-content;
    margin: var(--space-md) 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    border: 1px solid var(--color-indigo);
}

.custom-made #mailform,
.contact #mailform{
    padding: var(--space-2xl);
    background-color: var(--color-bg);
    border: 5px solid var(--color-indigo);
    border-radius: var(--radius-lg);
    box-shadow: 6px 6px 0px rgb(22 94 131 /.2);
}

.contact_form label,
.section_form label{
    display: block;
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm);
    font-weight: 600;
    background-color: rgb(185 196 47 /.15);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.contact_form label span,
.section_form label span{
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-accent);
}
.contact_form label span.required,
.section_form label span.required{
    line-height: 1;
    display: inline-block;
    padding: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-bg);
    background-color: #7a9b1f;
    border-radius: var(--radius-sm);
}
.contact_form textarea,
.section_form textarea{
    width: 100%;
    margin: 0 0 var(--space-lg);
    border-radius: var(--radius-sm);
}
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.section_form input[type="text"],
.section_form input[type="email"],
.section_form input[type="tel"]{
    width: 100%;
    margin: 0 0 var(--space-lg);
    border-radius: var(--radius-sm);
}
.contact_form select{
    margin: 0 0 var(--space-lg);
}

.contact_form input#zip,
.section_form input#zip{
    width: 150px;
/*    width: fit-content;*/
}
.btn-zip{
    width: fit-content;
    color: var(--color-bg);
    background-color: var(--color-accent);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
#contact-order input[type="submit"],
.section_form input[type="submit"]{
    margin: 0 auto;
    padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-3xl);
    display: block;
    width: fit-content;
    font-size: 18px;
    letter-spacing: 1em;
    color: #fff;
    background-color: var(--color-indigo);
    border-radius: var(--radius-sm);
}
p.accept{
    margin: 0 auto var(--space-lg);
    text-align: center;
}
p.accept a{
    color: var(--color-sky);
}

/*藍色縫房について*/
.section_philosophy .grid-2 h2{
    margin: 0 auto var(--space-xl);
    text-align: center;

}
.section_philosophy .grid-2 img{
    display: block;
    margin: 0 auto;
    padding: var(--space-lg);
    border-color: var(--color-main);
    border-style: solid;
    border-width: 0 1px 1px 0;
}

.dl_history dt,
.dl_results dt{
    position: relative;
    color: var(--color-main);
}
.dl_history dt::before,
.dl_results dt::before{
    content: "";
    position: absolute;
    left: -15px;
    top: 17px;
    display: block;
    width: 10px;
    height: 1px;
    background-color: var(--color-indigo);
}
.dl_history dd,
.dl_results dd{
    color: var(--color-indigo);
}
.dl_history dd:not(:last-child),
.dl_results dd:not(:last-child) {
    margin: 0 0 var(--space-md);
}

/*お問い合わせ*/
.contact_info h2{
    font-size: var(--text-2xl);
}
.contact_info a{
    font-size: var(--text-3xl);
    font-weight: 700;
}

.section_form {
    background-color: var(--color-bg);
}
.section_form form{
    padding: var(--space-2xl);
    background-color: var(--color-bg);
    border: 5px solid var(--color-indigo);
    border-radius: var(--radius-lg);
    box-shadow: 6px 6px 0px rgb(22 94 131 /.2);
}
.section_form dl{
    display: grid;
    grid-template-columns: 30ch auto;
    gap: 30px;
    margin: 0 auto var(--space-2xl);
    background-color: #fff;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
}

.accept{
    margin: 0 auto var(--space-lg);
    text-align: center;
}




/*特定商取引法に基づく表示 個人情報保護指針*/
.thanks,
.terms-of-sale,
.privacy{
    background-color: var(--color-indigo);
}
.thanks main,
.terms-of-sale main,
.privacy main{
    color: rgb(255 255 255 /.85);
}
.terms-of-sale main,
.privacy main{
    padding: var(--space-5xl) 0;
}
.thanks .hero h1,
.terms-of-sale main h1,
.privacy main h1{
    margin: 0 auto var(--space-2xl);
    text-align: center;
}
.thanks .hero p,
.terms-of-sale main p,
.privacy main p{
    margin: 0 auto var(--space-2xl);
    color: rgb(255 255 255/.9);
}
.terms-of-sale main dl,
.privacy main dl{
    padding: var(--space-2xl);
    border: 1px solid rgb(255 255 255 /.5);
}
.terms-of-sale main dt,
.privacy main dt{
    margin: 0 0 1em;
    padding: var(--space-sm) var(--space-md);
    background-color: rgb(0 0 0 /.1);
}
.terms-of-sale main dd,
.privacy main dd{
    margin: 0 0 2em;
    padding: 0 var(--space-md);
}

.thanks main{
    padding-bottom: 0;
}
.thanks .hero{
    margin-bottom: 0;
}
.thanks_sewing-machine{
    padding: var(--space-2xl) 0;
    background-color: #fff !important;
}
.thanks_sewing-machine img{
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-lg);
}
.thanks .w-600 img{
    border-radius: 50%;
}


@media(max-width:600px){
.header>.navbar {
background-color: rgba(255, 255, 255, 1);
transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

main {
    padding: 0 0 var(--space-xs);
}
.section {
    padding: var(--space-lg) 0;
}
footer .container {
display: block;
gap: 60px;
}
footer .container img:nth-child(1){
    display: block;
    margin: 0 auto 1rem;
    width: 120px;
}
.info {
    text-align: center;
}
.info h3{
    text-align: center;
    margin: 0 0 var(--space-xs)
}
footer a[href^="tel:"] {
margin: 0 0 var(--space-lg);
}
.footer-sns{
    margin-bottom: var(--space-lg);
    justify-content: center;
}
.footer-sns img{
    max-width: 60px;
}
.footer-nav {
display: block;
gap: 15px;
}
.footer-nav1{
    display: grid;
    grid-template-columns: repeat(2 ,1fr);
    padding: var(--space-lg) 0;
    border-top: 1px dotted var(--color-indigo);
    border-bottom: 1px dotted var(--color-indigo);
}
.footer-nav1 li a{
    display: block;
    padding: var(--space-xs) var(--space-md);
}
.footer-nav2 li a{
    display: block;
    padding: var(--space-xs) var(--space-md);
}
.hero{
    grid-template-columns: 1fr;
    padding: var(--space-3xl) 0 var(--space-3xl);
    gap: 60px;
    margin-bottom: 0;
}
.hero .hero-img{
    grid-row: 1 /2;
}
.hero .hero-img img{
    max-width: 90vw;
    height: auto;
    transform: translate(-40px , 30px) rotate(-3deg);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.hero .hero-text{
    grid-row: 2 /3;
    padding: 0 var(--space-lg) var(--space-2xl);
}
.hero li{
    font-size: .937rem;
}
.hero::before{
    bottom: -60px;
}

.title {
margin: 0 auto var(--space-xl);
padding: 20px 40px;
z-index: 2;
}
.section_contact a {
font-size: 1.375rem;
}
.section_contact a span {
font-size: 1rem;
}
.section_news img{
    display: block;
    margin: 0 auto;
    max-width: 40vw;
}
.sewing-machine{
    display: block;
    margin: 0 auto;
    max-width: 200px;
}
.section_upcycling .grid {
grid-template-columns: 1fr;
padding: var(--space-md);
}
.tbl_price th, .tbl_price td {
padding: var(--space-sm);
}
.tbl_price th{
    white-space: nowrap;
}
.tbl_price th span{
    display: block;
}
.dl_contact-flow {
display: block;
}
.dl_contact-flow dd{
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-xl);
}
#contact-order h2 {
    margin: 0 auto var(--space-lg);
    font-size: 1.25rem;
}
.custom-made #mailform,
.contact #mailform {
padding: var(--space-md);
background-color: var(--color-bg);
border: 5px solid var(--color-indigo);
border-radius: var(--radius-lg);
box-shadow: 6px 6px 0px rgb(22 94 131 /.2);
}
#contact-order input[type="submit"], .section_form input[type="submit"] {
margin: 0 auto;
padding: var(--space-md);
display: block;
width: fit-content;
font-size: 18px;
letter-spacing: normal;
color: #fff;
background-color: var(--color-indigo);
border-radius: var(--radius-sm);
}
.dl_overview {
display: block;
margin-bottom: var(--space-2xl);
}
.dl_overview dt{
    text-align: left;
    border-bottom: 1px solid var(--color-indigo);
    font-size: .875rem;
}
.dl_overview dd{
    margin-bottom: var(--space-lg);
}
.img_staff{
    max-width: 75vw;
}
.miyuki{
    display: block;
    margin: 0 auto var(--space-md);
}
.signature{
    text-align: center;
}
.philosophy img{
    max-width: 40vw;
}
.contact .btn-ordermade{
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-lg);
}
.section_form .gap-60{
    gap: 0px;
}
.section_form .gap-60 .phone,
.section_form .gap-60 p{
    text-align: center;
}
.thanks .hero h1, .terms-of-sale main h1, .privacy main h1 {
    font-size: 1.25rem;
}
.terms-of-sale main dl, .privacy main dl {
padding: var(--space-md);
}
.thanks .w-600 .grid-2{
grid-template-columns: repeat(2,1fr);
}
.comment-content-inner {
grid-template-columns: 1fr;
}
}