@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;700&family=Noto+Sans+JP:wght@300;400;700&family=Noto+Serif+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500;600;700&display=swap');

:root {
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;
    --font-cormorant: 'Cormorant', serif;
    
    --pink: #F55A5A;
    --beige: #F8F6F0;
    --orange: #F19037;

}

*:before, *:after { pointer-events:none;}
.drag-sort-y { display:flow-root;}


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

html { scroll-behavior: smooth;}
body { font-family: var(--font-sans), sans-serif; line-height: 2.2 !important; color: #0A0A0A; font-size: clamp(15px, 4vw, 18px); background-color: #fff; overflow-x:clip;}
img { width: 100%; height:auto; object-fit: cover; max-width:unset;}
section { padding: 80px 0px; position: relative;}
.inner { max-width: 1200px; margin: 0 auto; padding-inline:10px;}

a[href^="tel:"] { pointer-events:none;}

@media (max-width: 768px) {
    a[href^="tel:"] { pointer-events:auto;}
    nav ul { flex-direction: column; text-align: center; }
    section { padding: 50px 0px}
    .container { padding: 10px; }
    .inner { padding-inline:20px;}
}


/* ---------------- */
/* common */
/* ---------------- */
.width-100 { width: 100%;} 
section .flex-box { display: flex; gap: 2em;}
section .flex-box .wrap { flex: 1;}

@media (max-width: 768px) { 
    section .flex-box { flex-direction: column;}
    section .flex-box .wrap.width-70 { width: 70%; margin: 0 auto;}
    section .flex-box.column-reverse { flex-direction: column-reverse;}
}

.background-color-beige { background-color: var(--beige);}
.background-color-yellow { background-color: #FDFBEA;}
.background-color-pink { background-color: #FEF3F3;}
.background-color-orange { background-color: #F19037;}
.background-color-white { background-color: #fff;}

.font-cormorant { font-family: var(--font-cormorant) !important;}
.font-serif { font-family: var(--font-serif) !important;}
.font-sans { font-family: var(--font-serif) !important;}

.alC { text-align: center;}
.alR { text-align: right;}

.note { font-size: 0.8em;}
.color-orange { color: var(--orange);}
.color-pink { color: var(--pink);}
.color-unset { color: unset !important;}

.border-radius-15 { border-radius: 15px 0px;}
.border-radius-20 img { border-radius: 20px 0px 20px 0px;}
.border-radius-30 img { border-radius: 30px 0px 30px 0px;}
.border-radius-50 { border-radius: 50px 0px;}


.square img { height: 270px !important; width: 270px !important; margin: 0 auto; object-fit: cover;}

@media (max-width: 768px) { 
    .square img { height: 170px !important; }

    #subpage .square img { width:100%!important; height:auto!important;}
}

/* .subtitle-sec */
.subtitle-sec .nougaki { text-align: center;}
.subtitle-sec .nougaki h3 {
    color:var(--pink);
    /* viewport:768-1024px  20-34px */
    font-size:clamp(1.25rem, calc(-1.375rem + 5.469vw), 2.125rem);
    font-family:var(--font-serif);
    line-height:1.8;
    font-weight: 500;
}
.subtitle-sec .nougaki div { font-family: var(--font-serif); margin-top: 2em;}

.subtitle-sec .shopinfo-nougaki { margin-top: 50px;}
.subtitle-sec .shopinfo-nougaki .left { flex: 3;}
.subtitle-sec .shopinfo-nougaki .right { flex: 2;}

.subtitle-sec .shopinfo-nougaki .left div:not(:first-child) { padding-top: 0.5em;}

@media only screen and (max-width:768px){
    .subtitle-sec { padding:0;}
    .subtitle-sec .nougaki { text-align:start;}
    .subtitle-sec .nougaki h3 { margin-block:2em 1.5em; font-size:4.4vw;}
}



/* shop-gallery */
.shop-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top: 100px;}
.shop-gallery img { width:280px; height:auto;}

@media (max-width: 768px) { 
    .shop-gallery {
        --gap:0.75rem;

        gap:var(--gap);
        margin-top: 50px;
    }
    .shop-gallery > * { flex-basis:calc((100% - var(--gap)) / 2);}
    .shop-gallery img { width:100%;}
}


/* .button-wrap */
.button-wrap { width: fit-content; margin: 1em auto;}
.button-wrap .button { padding: 0.8em 2.5em; font-size: 1em; font-family: serif; letter-spacing: 2px; text-decoration: none; background-color: #fff; border: 1px solid #E2E2E2; border-radius: 50px; position: relative; overflow: hidden; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.button-wrap .button::after { content: ""; width: 55px; height: 20px; background: url(./image/button-arrow.svg) no-repeat center; background-size: contain;  transition: transform 0.2s; position: absolute; top: 42%; left: 100%; transform: translate(-50%, -50%);}
.button-wrap .button:hover { background-color: #F38A96; color: #fff;}
.button-wrap .button:hover::after { transform: translate(-15px, -10px);}



/* タイトル */
.title-wrap { text-align: center; width: fit-content; margin: 0 auto;}
.title-wrap h2 { font-family: var(--font-cormorant); font-size: 2.7em; text-align: center; position: relative; line-height: 1;}
.title-wrap h2::before {  content: ""; position: absolute; top: 1.5em; left: 50%; width: 250px; height: 100%; background: url(image/h2-under-bar.png) no-repeat center; transform: translate(-50%, -50%); background-size: contain;}
.title-wrap h3 { color: var(--orange);  font-family: var(--font-serif); font-size: 1.1em; padding-top: 1.5em;}
.content { margin-top: 40px;}

@media only screen and (max-width:768px){
    .content { font-size:14px; line-height:2;}
}


.title-wrap.off-white { background-color: #fff; border-radius: 10px 0px 0px 0px; width: 85%; max-width: 460px; padding: 1.5em;}
/* .title-wrap.off-white h2::after { content: ""; position: absolute; right: -30px; top: 15px; transform: translateY(-50%); width: 100px; height: 110px; background: url(image/ribbon.svg) no-repeat center / contain; } */


.off-white-wrap { background-color: #fff; position: relative; max-width: 700px; width: 85%; margin: 0 auto; padding: 1em;}
.off-white-wrap::after {
    content:"";
    position:absolute;
    inset:-15px -11px auto auto;
    width:100px;
    height:auto;
    aspect-ratio:10/11;
    background: url(image/ribbon.svg) no-repeat center / contain;
}

@media only screen and (max-width:768px){
    .off-white-wrap::after {
        width:50px;
        inset:-8px -5px auto auto;
    }
}


/* レスポンシブ */
.pc { display: inherit;}
.sp, .sm { display: none;}
.sm_mid { display:none; color:var(--orange);}

@media only screen and (max-width:1024px) {
    body { font-size: 15px;  }
    .pc { display: none; }
    .sp, .sm { display: block; }
    .sm_mid { display:block;}
}


/* ---------------- */
/* hedaer */
/* ---------------- */
header { font-family: var(--font-serif); font-size: clamp(14px, 3vw, 17px); margin-top: 35px;  position: relative; overflow: hidden;}
header::before { content: ""; position: absolute; top: 75px; right: 0; width: calc(62vw + 0px); height: 760px; background-image: url(./image/index/back-ground-image.jpg); background-size: contain; background-repeat: no-repeat; z-index: -1; background-position: top; border-radius: 100px 0px 0px 0px;}
header .inner { }
header .header-container { display: flex; justify-content: space-between; }
header .header-container .logo { width: 200px;}


@media (max-width: 1024px) { 
    header { margin-top: 5px;}
    header::before {width: calc(80vw + 0px);  height: 500px; top: 63px; border-radius: 50px 0px 0px 0px;}

    header .header-container { align-items: center; position: fixed; width: calc(100% - 0px); z-index: 100; padding: 5px; background-color: #fff; margin: 0 auto; top: 0%; left: 50%; transform: translate(-50%, 0%);}
}

@media (max-width: 768px) { 
    header::before {height: 35vh; min-height: 250px; background-size: cover; border-radius: 50px 0 0 0 ;}
}


/* header */
header .image-wrap { padding-top: 90px; max-width: 700px; width: 60%;}

header .padding-top-70 { padding-top: 70px;}
header .padding-top-50 { padding-top: 50px;}

.header-text-wrap {text-align: right; position: relative; display: flex; align-items: end; justify-content: space-between; gap: 2em;}
.header-text-wrap h2 { color: var(--pink); font-size: clamp(1.5em, 4vw, 2em); line-height: 1.6; font-weight: 500;}
.header-text-wrap .text-wrap { line-height: 2.3;}
.header-text-wrap .sub-image-wrap { max-width: 550px; flex: 2; position: relative; z-index: 1;}

.midashi { text-align: right;}

@media (max-width: 1024px) { 
    .header-text-wrap {text-align: center; justify-content: center;}
    .midashi { text-align: left;}
    header .padding-top-70 { padding-top: 0px;}
}

.header-text-sec { font-family: var(--font-serif); font-size: clamp(14px, 3vw, 17px); padding: unset; top: -50px; margin-bottom: -50px;}

/* 下層ページ */
header .header-title-wrap { padding-bottom: 5em; padding-top: 5em;}
header .header-title-wrap h2 {font-family: var(--font-cormorant); font-size: clamp(2.8em, 4vw, 4em); color: var(--orange); line-height: 1; background-color: rgba(255, 255, 255, 0.7); width: fit-content; padding: 0.3em 0.5em;}
header .header-title-wrap p { font-family: var(--font-serif); font-size: 1.2em; font-weight: 500; text-shadow:0 3px 0 white; padding-left: 1.5em;}

@media (max-width: 1024px) { 
    .sub-image-wrap { width: 105%; position: relative; margin-top: 2em;}
    .header-text-sec .header-text-wrap  { flex-direction: column-reverse; text-align: left; align-items: center; gap: 2em;}
    .header-text-sec .header-text-wrap  h2 { text-align: center;}
    .header-text-sec .header-text-wrap  .text-wrap { top: unset;}
    header .image-wrap { padding-bottom: 3em;  width: 80%;}
    header .header-title-wrap { padding-bottom: 5em; padding-top: 8em;}

    /* 下層ページ */
    .header-text-wrap .header-title-wrap { padding-bottom: 5em; margin-top: 10em;}
}

@media (max-width: 768px) { 
    .header-text-sec { top: 50px; margin-bottom: 50px;}
    
}



/* ---------------- */
/* header */
/* ---------------- */
.main-header::before { background-size: cover;}
.main-header .midashi { margin-bottom:clamp(4.375rem, calc(-8.75rem + 27.344vw), 8.75rem); /* viewport:768-1024px  70-140px */}
.lineup-header::before { background-image: url('./image/lineup/back-ground-image.jpg'); }
.shop-header::before { background-image: url('./image/shopinfo/back-ground-image.jpg'); }
.order-header::before { background-image: url('./image/order/back-ground-image.jpg'); }
.contact-header::before { background-image: url('./image/contact/back-ground-image.jpg')}
.newpage-header::before {
    background-image:image-set(
        url(./image/newpage/back-ground-image.webp) type("image/webp"),
        url(./image/newpage/back-ground-image.jpg)
    );
}

@media screen and (max-width:768px) {
    .main-header .midashi { padding-top:1lh;}
}



nav ul { white-space: nowrap; display: flex; line-height: unset; align-items: center; line-height: normal; background-color: rgba(255, 255, 255, 0.85); border-radius: 27px;  font-family: var( --font-serif);}
nav ul li { position: relative;}
nav ul li:not([class]) a {
    /* viewport:1024-1200px  17-25.5px */
    padding-inline:clamp(1.063rem, calc(-2.028rem + 4.83vw), 1.594rem);
}
nav ul li a:hover { color: var(--orange);}
nav ul li:last-child { padding-right: unset;} 
nav ul li:nth-child(-n+4)::after { content: ""; position: absolute; right: 0%; top: 25%; height: 60%; width: 1px; background: #E2E2E2;}
nav ul li.shop { background-color: #F19037; color: #fff; font-size: 1.3em; text-align: center; font-weight: bold; font-family: var(--font-cormorant);}
nav ul li.shop:hover { background-color: #F38A96;}
nav ul li.shop a { padding: 0.4em 0.7em;}
nav ul li.shop a:hover { color: #fff !important;}



@media screen and (max-width:1024px) {
    nav ul li:last-child { padding-inline:0;}
}

nav .button { display: none;}

/* ハンバーガーメニューのスタイル */
.hamburger-menu { display: none; flex-direction: column; justify-content: space-between; align-items: center; width: 55px; height: 55px; padding: 8px 5px; cursor: pointer; position: relative; background-color: var(--orange); z-index: 2;}             
.hamburger-menu span { width: 75%; height: 3px; background-color: #fff; border-radius: 4px; transition: all 0.3s ease;}            
/* アニメーションのスタイル（メニューオープン時） */
.hamburger-menu.open span:nth-child(1) {  transform: rotate(45deg); position: absolute; width: 60%; top: 20px;}            
.hamburger-menu.open span:nth-child(2) { opacity: 0;}            
.hamburger-menu.open span:nth-child(3) { transform: rotate(-45deg); position: absolute; width: 60%; top: 20px;}            
.hamburger-menu p { font-size: 10px; color: #fff; transition: opacity 0.3s ease; line-height: 1;}            
.hamburger-menu .menu-text { opacity: 1; display: block;}            
.hamburger-menu .close-text { opacity: 0; display: none;}            
.hamburger-menu.open .menu-text { opacity: 0; display: none;}            
.hamburger-menu.open .close-text { opacity: 1; display: block;}            
/* 1024px以下のときにハンバーガーメニューを表示 */
@media screen and (max-width: 1024px) { 
    nav ul {display: none; flex-direction: column; width: 100%; background-color: #fff; }
    nav ul li {margin: 10px 0; text-align: center; }
    .hamburger-menu { display: flex; }



    nav.active ul {  display: flex; position: absolute; top: 67px; left: 50%; transform: translate(-50%, 0%); background-color: var(--orange); height: 100vh; z-index: 1; border-radius: 0px; gap: unset; width: calc( 100% + 20px);}
    nav ul li { color: #fff; border-bottom: 1px solid #fff; width: 100%; margin: unset;}
    nav ul li a { font-size:16px; font-weight:bold;}
    nav ul li:not([class]) a { display:block; padding:1em; background-color:var(--orange);}
    nav ul li:not(:last-child)::after { content: unset;}
    nav .link-button { border-bottom: unset;}
    nav .link-button a { display:block; background-color: #fff; width: 80%; max-width: 300px; color: #000; margin:1em auto 0; padding:1em; font-weight: 500;}
    nav .link-button i { color: var(--orange);}
    nav .button { display: block;}

    nav ul li a:hover { color:#fff; background-color:var(--pink);}
}


/* ---------------- */
/* footer */
/* ---------------- */
footer section { padding: 60px 0px; background-image: url(./image/footer-img-01.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-position: center 100px;}
footer section .inner {}
footer section .flex-box { align-items: flex-end; justify-content: space-between;}
footer section .flex-box .wrap { flex: unset;}
footer .logo { max-width: 280px; width: 65%; margin: 0 auto;}
footer .info-wrap .company-name { margin-top: 1em;}
footer .info-wrap .address { font-size: 0.9em;}
footer .info-wrap .tel { font-size: 1.8em; color: var(--orange); line-height: 1.4;}
footer .info-wrap .tel span { font-size: 0.6em;}

footer .top-links { display: flex; gap: 1em; justify-content: right; margin-bottom: 2em;}
footer .top-links a { background-color: #FFFFFF; padding: 0.6em 1em; line-height: 1; border: 1px solid #E5E5E5; font-family: var(--font-cormorant); font-size: 1.1em;}
footer .top-links a:hover { background-color: #F38A96; color: #fff;}
footer .top-links a:hover i { color: #fff;}
footer .top-links a i { color: var(--orange); padding-right: 0.2em;}

footer nav ul { padding: 0.5em 1.5em;}
footer nav ul li:last-child::after { content: unset;}

footer .copyright { font-family: var(--font-cormorant); font-size: 14px; text-align: center; padding: 1em 0px;}

@media (max-width: 768px) { 
    footer section { background-image: url(./image/footer-img-01-sp.png); background-position: center 40px;;}
    footer section .flex-box { flex-direction: column; align-items: center;}
    footer section .flex-box .wrap { text-align: center;}

    footer .top-links { flex-wrap: wrap; justify-content: center;}
    footer .top-links a { flex: auto;}
    footer .top-links a:last-child { flex-shrink: 1; width: 100%;}
}


footer .link-to-top {  position: fixed; right: 10px; bottom: 10px; width: 80px; height: 80px; z-index: 1000; display: flex; align-items: flex-start; justify-content: flex-end;}
@media (max-width: 768px) {
    footer .link-to-top { right:5px; bottom:30px; width:56px; height:56px;}
    header:has(.active) ~ footer .link-to-top { display:none;}
}

/* ---------------- */
/* index.html */
/* ---------------- */
.kazari-left {position: relative;}
.kazari-left:before { content: ""; position: absolute; transform: translate(-50%, -50%); top: 0%; left: 20%; width: 500px; height: 500px; background-size: contain; background-repeat: no-repeat; mix-blend-mode: multiply; z-index: 0;}

.kazari-right {position: relative;}
.kazari-right:before {  content: ""; position: absolute; transform: translate(-50%, -50%); top: 0%; right: 0%; width: 500px; height: 500px; background-size: contain; background-repeat: no-repeat; mix-blend-mode: multiply; z-index: 0;}

/* .kazari-image-01:before { background-image: url(./image/common/kazariflower-lineup-sec-01.png); } */
.kazari-image-02:before { background-image: url(./image/common/kazari-02.png); top: 80%;}
.kazari-image-03:before { background-image: url(./image/lineup/kazari-03.png); top: 100%; right: -250px; z-index: 1;}
.kazari-image-04:before { background-image: url(./image/shopinfo/kazari-04.png); top: 100%; left: 10%;}
.kazari-image-05:before { background-image: url(./image/common/kazari-01.png); top: 5%; z-index:0;}
.kazari-image-06:before { background-image: url(./image/common/kazari-06.png); top: 5%; right: -40%; z-index: -1;}
.kazari-image-07:before { background-image: url(./image/common/kazari-07.png);  top: 75%; left: 30%;}
.kazari-image-08:before { background-image: url(./image/common/kazari-08.jpg); width:1051px; aspect-ratio:1051/720; background-position:center;}

@media (max-width: 768px) { 
    .kazari-image-01:before { top: -20%; mix-blend-mode: multiply;}
    .kazari-image-08:before { width:100vw; object-fit:cover;}

    #subpage .shop-header + main .kazari-image-04:before { width:100vw; object-fit:cover;}
    #subpage .lineup-header + main .kazari-image-05:before { width:100vw; object-fit:cover;}
}


/* shop-information-sec */
.shop-information-sec { }

@media (max-width: 768px) { 
    .shop-information-sec .content .alC { text-align:justify;}
    .shop-information-sec .width-70 {  width: 70%; margin: 0 auto;}
}

.flower-grid { display: flex; flex-wrap: wrap; justify-content: center; gap:1.75em;}
.flower-item { width: 270px; text-align: center; transition: transform 0.3s ease-in-out;}
.flower-item:hover .square img {  transform: scale(1.02); opacity: .9;}
.flower-item .item-name { font-size: 1.1em; margin-top: 0.3em; font-weight: 500; font-family: var(--font-serif); transition: transform 0.3s ease-in-out;}
.flower-item .item-price { color: var(--pink); font-size: 1.1111em; line-height: 2; font-weight: 500; letter-spacing: 1px;}
.flower-item .item-size { font-size: 0.9em; font-weight: 500;}

@media (max-width: 768px) { 
    .flower-grid { gap: 1em; } 
    .flower-item { width: calc(50% - 1em); max-width: none; }
    .flower-item .item-name { font-size:1em;}
    .flower-item .image { height: 100px;}

    #subpage .flower-grid { gap:3em 1em;}

}



.guide-sec { margin-bottom: 250px}
.guide-sec { background-image: url(./image/index/guide-sec-01.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
.guide-sec .inner .flex-box { position: relative; top: 250px;}
.guide-sec .inner .flex-box .title-wrap { position:relative;}
.guide-sec .inner .flex-box .title-wrap:before {
    content:"";
    position:absolute;
    inset:-16px -13px auto auto;
    display:block;
    width:110px;
    height:auto;
    aspect-ratio:10/11;
    background:url(image/ribbon.svg) no-repeat center / contain;
}

@media (max-width: 768px) { 
    .guide-sec { background-image: unset; margin-bottom: unset}
    .guide-sec .inner { padding-left: 0px; padding-right: 0px;}
    .guide-sec .inner .flex-box { top: unset;}

    .guide-sec .inner .flex-box .title-wrap:before {
        width:55px;
        inset:-8px -7px auto auto;
    }

    .guide-sec .inner-wrap { position: relative; top: 100px;}
    .guide-sec .left { background-image: url(./image/index/guide-sec-02-sp.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; padding-top: 100px; margin-bottom: 100px;}
    .guide-sec .right { background-image: url(./image/index/guide-sec-01-sp.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; padding-top: 100px; margin-bottom: 100px;}
}



.guide-sec-2 { background-image: url(./image/index/guide-sec-02.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
.guide-sec-3 { background-image: url(./image/shopinfo/guide-sec-03.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
.guide-sec-3 .inner { max-width: unset;}
.guide-sec-3 .flex-wrap { display:contents;}

@media (max-width:768px){
    .guide-sec-2 { margin-bottom:150px; background-image:url(image/index/guide-sec-02_sp.jpg);}
    .guide-sec-2 .flex-box .wrap { translate:0 70%;}

    .guide-sec-3 { background:none; padding-bottom:0px;}
    .guide-sec-3 .flex-wrap {
        display:block;
        margin-bottom:75px;
        padding-top:75px;
    }
    .guide-sec-3 .wrap { width:80%; border-radius:0 10px 0 0; translate:0 40%;}
    .guide-sec-3 .note { display:none;}
    .guide-sec-3 :nth-child(1 of .flex-wrap) { background:url(image/guide-sec-03_sp_1.jpg) no-repeat center / cover;}
    .guide-sec-3 :nth-child(2 of .flex-wrap) { background:url(image/guide-sec-03_sp_2.jpg) no-repeat center / cover;}
}


/* instagram-sec */
.instagram-sec { background-color: #FEFBEB;}
.instagram-sec .title-wrap { margin-bottom:2.75rem;}
.instagram-sec .button-wrap { margin-top:2.375rem;}



/* ---------------- */
/* shopinfo */
/* ---------------- */

/* Google Mapを囲う要素 */
/* .map { position: relative; width: 100%; height: 0; padding-top:350px;}
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} */
iframe { width:100%;}



/* .shop-info */
.shop-info { text-align: center; margin-top: 3em;}
.shop-info .logo { width: 170px; margin: 0 auto;}
.shop-info h1 { font-size: 1.2em; font-weight: bold; margin-bottom: 0.5em;}
.shop-info .orange { color: var(--orange); font-weight: bold; font-size: 1.4em;}


/* company-profile-sec */
/* .company-profile-sec table { width: 100%; border: 1px solid #D8D8D8; border-collapse: collapse; }
.company-profile-sec table th { background-color: #FCE8BC; width: 200px; font-weight: 500;}
.company-profile-sec table th, .company-profile-sec table td { border: 1px solid #D8D8D8; padding: 0.5em 1em;} */

@media (max-width: 768px) { 
    /* .company-profile-sec table th { width: 100px; text-align: center; white-space: nowrap;} */
}

/* ribbon */
.ribbon { position: relative;}
.ribbon::before {
    content: "";
    position: absolute;
    inset:-15px auto auto -11px;
    width:100px;
    height:auto;
    aspect-ratio:10/11;
    background: url(image/ribbon-2.svg) no-repeat center / contain;
}

@media only screen and (max-width:768px){
    .ribbon::before {
        width:50px;
        inset:-8px auto auto -6px;
    }
}

.padding-30 {padding: 1em; max-width: 450px; margin: 0 auto;}

/* ---------------- */
/* order */
/* ---------------- */

.title-pink { background-color: var(--pink);}
.title-pink h2 { color: #fff; font-size: 1.4em; padding: 0.2em 0.7em}

.step-header { text-align: center; margin: 0 auto; width: fit-content;}
.step-header .step-circle {  background-color: var(--orange); width: 120px; height: 120px; text-align: center; border-radius: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-family: var(--font-serif); line-height: 1; font-size: 3em; margin: 0 auto; position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);}
.step-header .step-circle span { font-size: 0.4em;}
.step-header .decorative-line { width: 200px; margin: 0 auto;}
.step-header .sub-title { color: var(--pink); font-size: 1.4em; font-weight: bold;}

.item-wrap { background-color: #fff; position: relative; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); border-radius: 30px; padding: 4em 0em 1.5em; margin-top: 5em;}


/* flower-options */
.flower-options { display: flex; flex-wrap: wrap; gap: 1.5em; margin-top: 1em; justify-content: center;}
.flower-options .item { width: 200px; text-align: center;}
.flower-options .item :is(p, div) { line-height: 1.4; margin-top: 0.5em;}

@media (max-width: 768px) { 
    .flower-options .item { width: calc(50% - 1.5em);}
      
}

.allow-down { text-align: center; margin: 2em;}
.allow-down img { width: 50px; margin: 0 auto;}


.tell-warap .sub-title { font-size: 1.6em;}
.tell-warap img { max-width: 530px; margin: 0 auto;}


.shipment-sec .pink { color: var(--pink); font-weight: bold; font-size: 1.2em;}
.shipment-sec .text { margin-top: 0.5em;}
.shipment-sec .text p { padding: 0.5em 0px; line-height: 1.4;}
.shipment-sec .note-text { padding-left: 1em;}

/* .faq */
.faq { clear:both;}
.faq:not(:last-child) { border-bottom: 3px dotted #D8D8D8; padding-bottom: 1em;}
.faq:not(:first-child) { padding-bottom: 2em; padding-top: 2em;}
.faq.border-none { border-bottom: unset !important;}
.question { color: var(--pink); display: flex; align-items: baseline;}
.q-mark { font-size: 2.5em; margin-right: 0.3em; font-family: var(--font-cormorant); line-height: normal;}
.q-text { font-weight: 500; font-size: 1.2em;}
.answer { display: flex; align-items: baseline;}
.a-mark { color: var(--orange); font-size: 2.5em; margin-right: 0.3em; font-family: var(--font-cormorant); line-height: normal;}            
.a-text { }




/* ---------------- */
/* .contact-info */
/* ---------------- */
.contact-sec { padding-top: 0px;}
.contact-info { display:flex; flex-direction:column; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); border-radius: 30px; padding: 2.5em;}
.contact-info .ci_top { display:flex; flex-wrap:wrap; gap:2rem 0;}
.contact-info :is(.ci_top_l, .ci_top_r) {
    /* viewport:768-1024px  60-110px */
    --icon-size:clamp(3.75rem, calc(-5.625rem + 19.531vw), 6.875rem);

    display:grid;
    grid-template-columns:var(--icon-size) auto;
    grid-template-rows:repeat(2, auto);
    grid-template-areas:
        "img title"
        "img cont";
        align-items:center;
    gap:0 1.5rem;
    flex-basis:50%;
}
.contact-info :is(.ci_top_l, .ci_top_r) .ci_icon { grid-area:img;}
.contact-info :is(.ci_top_l, .ci_top_r) .ci_title {
    grid-area:title;
    align-self:end;
    /* viewport:768-1024px  15-24px */
    font-size:clamp(0.938rem, calc(-0.75rem + 3.516vw), 1.5rem);
    font-weight:600;
    line-height:1.3;
}
.contact-info :is(.ci_top_l, .ci_top_r) .ci_cont { grid-area:cont; align-self:start; color:var(--pink); font-weight:bold; line-height:1.3;}
.contact-info .ci_top_l .ci_cont {
    /* viewport:768-1024px  28-44px */
    font-size:clamp(1.75rem, calc(-1.25rem + 6.25vw), 2.75rem);
}
.contact-info .ci_top_r .ci_cont {
    /* viewport:768-1024px  18-30px */
    font-size:clamp(1.125rem, calc(-1.125rem + 4.688vw), 1.875rem);
}
.contact-info .ci_bottom {
    position:relative;
    display:flex;
    align-items:center;
    gap:1rem 2rem;
    margin-top:1.5em;
    padding-top:1.5em;
}
.contact-info .ci_bottom:before {
    content:"";
    position:absolute;
    display:block;
    width:100%;
    height:5px;
    background:radial-gradient(circle farthest-side, #D8D8D8, #D8D8D8 30%, transparent 30%, transparent) repeat-x center / 20px 5px;
    inset:0 auto auto 0;
    translate:0 -50%;
}
.contact-info .ci_bottom img { width:170px;}


@media (max-width: 768px) { 
    .contact-info { padding: 1em;}
    .contact-info .flex-wrap { flex-direction: column;}
    .contact-info .flex-wrap .address img { width: 60%; margin: 0 auto;}
    .contact-info .ci_top { gap:1.5rem 0;}
    .contact-info :is(.ci_top_l, .ci_top_r) { gap:0 1em; flex-basis:auto;}
    .contact-info .ci_bottom { flex-direction:column; text-align:center;}
}

/* ==================================================
    other
================================================== */
#top .flower-grid img { width:100%; height:auto; aspect-ratio:270/180;}

#subpage .lineup-header + main .flower-grid .flower-item .item-price {
    margin-top:0.5rem;
    padding-top:0.5rem;
    background:url(image/h2-under-bar.png) no-repeat top center / 100% auto;
}