/* SPを基準とした共通本文。既存テーマのstyle.cssは読み込まない。 */
:root {
    --flower-accent:#FF9A6E;
    --flower-ink:#292929;
    --flower-line:#a5a5a5;
    --flower-panel:#f8f8f7;
    --flower-body-width:350px
}
* {
    box-sizing:border-box
}
html {
    overflow-x:clip;
    scroll-behavior:smooth;
    scroll-padding-top:85px
}

/* fadeUp */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
from {
    opacity: 0;
	transform: translateY(100px);
}

to {
    opacity: 1;
	transform: translateY(0);
}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger, .fadeUpTriggerRight, .fadeUpTriggerLeft{
    opacity: 0;
}
body.flower-page {
    margin:0;
    overflow-x:clip;
    isolation:isolate;
    color:var(--flower-ink);
    background:#fff;
    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
    font-size:14px;
    line-height:1.75;
    letter-spacing:.04em
}
.flower-page :where(h1,h2,h3,p,figure,ul) {
    margin:0;
    padding:0
}
.flower-page h1,.flower-page h2,.flower-page h3 {
    font-weight:400
}
.flower-page img {
    display:block;
    max-width:100%;
    height:auto
}
.flower-page a {
    color:inherit;
    text-decoration:none
}
.flower-page button {
    font:inherit
}
.flower-page a:focus-visible,.flower-page button:focus-visible {
    outline:2px solid var(--flower-accent);
    outline-offset:5px
}
.flower-page [data-placeholder] {
    cursor:default
}
.flower-skip {
    position:fixed;
    top:-80px;
    left:12px;
    z-index:100;
    background:white;
    padding:10px
}
.flower-skip:focus {
    top:8px
}
.flower-mobile-header {
    position:fixed;
    inset:0 0 auto;
    z-index:60;
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    background:rgba(255,255,255,0.8)
}
.flower-brand,.flower-page h2,.flower-page h3,.flower-nav,.flower-button,.flower-menu-toggle,.flower-photo-dots,.flower-instagram>a {
    font-family:Arial,"Helvetica Neue",sans-serif
}
.flower-brand {
    font-size:18px;
    letter-spacing:.08em;
    color:var(--flower-accent)!important
}
.flower-menu-toggle {
    width:34px;
    height:40px;
    padding:10px 2px;
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer
}
.flower-menu-toggle span {
    display:block;
    width:28px;
    height:1px;
    background:var(--flower-accent);
    transition:transform .2s,opacity .2s
}
.flower-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(9px) rotate(45deg)
}
.flower-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0
}
.flower-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-9px) rotate(-45deg)
}
/* 背景は画面全体に固定し、本文のみスクロールする。 */
.flower-top-anchor {
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:1px;
    pointer-events:none
}
.flower-backdrop {
    position:fixed;
    inset:0;
    background:#aaa9a6 url('../ad/asset/img/p0343_l.png') center / cover no-repeat;
    pointer-events:none;
    z-index:-1
}
.flower-side {
    display:none
}
.flower-nav {
    display:none;
    position:fixed;
    inset:60px 0 0;
    z-index:50;
    overflow:auto;
    padding:0;
    background:#aaa9a6 url('../ad/asset/img/p0343_l.png') center / cover no-repeat;
    color:#fff;
    font-size:18px;
    letter-spacing:.05em
}
.flower-nav.is-open {
    display:block
}
.flower-nav-photo {
    width:390px;
    max-width:100%;
    aspect-ratio:390 / 245;
    object-fit:cover;
    margin:0 auto
}
.flower-nav-content {
    padding:58px calc(50vw - 175px) 40px
}
.flower-nav-content>ul a:hover,
.flower-nav-content>ul a:focus-visible {
    color:var(--flower-accent)
}
.flower-nav ul {
    list-style:none
}
.flower-nav-content>ul>li {
    margin-bottom:10px
}
.flower-nav li ul {
    font-size:14px;
    padding:12px 0 0 5px
}
.flower-nav li li {
    margin-bottom:6px
}
.flower-nav li li a::before {
    content:"—";
    color:#fff;
    margin-right:10px
}
.flower-socials {
    display:flex;
    gap:16px;
    margin-top:45px;
    align-items:center
}
.flower-socials>a {
    display:flex;
    width:25px;
    height:25px;
    align-items:center;
    justify-content:center
}
.flower-socials svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:2
}
.flower-icon-dot {
    fill:currentColor;
    stroke:none
}
.flower-line-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:26px;
    height:24px;
    border-radius:50%;
    color:var(--flower-accent);
    background:#fff;
    font:8px Arial,sans-serif;
    letter-spacing:0;
    flex-shrink:0
}
.flower-line-icon::after {
    content:"";
    position:absolute;
    bottom:-3px;
    left:7px;
    width:0;
    height:0;
    border-top:6px solid #fff;
    border-right:7px solid transparent
}
.flower-main {
    position:relative;
    z-index:10;
    width:var(--flower-body-width);
    max-width:calc(100% - 40px);
    margin:100px auto;
    padding-bottom:0
}
.flower-panel {
    background:var(--flower-panel);
    border-radius:10px;
    margin-bottom:100px
}
.flower-page h2 {
    color:var(--flower-accent);
    font-size:18px;
    line-height:1.35;
    letter-spacing:.06em
}
.flower-page h3 {
    color:var(--flower-accent);
    font-size:14px;
    line-height:1.6;
    letter-spacing:.04em
}
.flower-copy {
    padding:0 25px
}
.flower-copy p+p {
    margin-top:26px
}
.flower-logo {
    height:210px;
    display:grid;
    place-items:center;
    border-bottom:1px solid var(--flower-line)
}
.flower-logo img {
    width:200px;
    height:200px;
    object-fit:contain
}
.flower-hero {
    position:relative;
    height:400px;
    display:grid;
    grid-template-columns:1fr 1fr
}
.flower-hero::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:var(--flower-line)
}
.flower-hero img {
    position:absolute;
    top:20px;
    left:-35px;
    width:265px;
    max-width:none;
    height:310px;
    object-fit:contain
}
.flower-hero h1 {
    grid-column:2;
    font-size:20px;
    letter-spacing:.08em;
    line-height:2;
    align-self:start;
    padding:70px 0 70px 25px;
    border-bottom:1px solid var(--flower-line);
    white-space:nowrap
}
.flower-about-title {
    text-align:center;
    padding:14px 0 57px
}
.flower-about-copy {
    padding-bottom:55px
}
.flower-flowers {
    position:relative;
    padding-bottom:55px
}
.flower-flowers-heading {
    position:relative;
    padding:59px 25px 20px;
    border-bottom:1px solid var(--flower-line);
    min-height:150px
}
.flower-flowers-heading img {
    position:absolute;
    top:-25px;
    right:-42px;
    width:230px;
    max-width:none;
    pointer-events:none
}
.flower-flowers-caption {
    font-size:12px;
    margin-top:16px!important;
    margin-bottom:52px!important
}
.flower-flowers .flower-copy h3 {
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    margin-bottom:26px
}
.flower-section-heading {
    padding:58px 25px 35px
}
.flower-section-heading p {
    font-size:12px;
    margin-top:2px
}
.flower-lesson {
    position:relative
}
.flower-lesson h3,.flower-attention h3 {
    display:flex;
    align-items:center;
    gap:10px
}
.flower-lesson-left h3 {
    padding-left:25px
}
.flower-lesson-right h3 {
    flex-direction:row-reverse;
    padding-right:25px
}
.flower-lesson h3::after,.flower-attention h3::after {
    content:"";
    height:1px;
    background:var(--flower-line);
    flex:1
}
.flower-lesson h3 span {
    white-space:nowrap
}
.flower-lesson-content {
    padding-top:10px;
    padding-bottom:64px;
    position:relative
}
.flower-lesson-left .flower-lesson-content {
    padding-left:25px;
    padding-right:50px
}
.flower-lesson-right .flower-lesson-content {
    padding-left:70px;
    padding-right:15px
}
.flower-lesson-content::before {
    position:absolute;
    content:"";
    top:-11px;
    bottom:5px;
    width:1px;
    background:var(--flower-line)
}
.flower-lesson-left .flower-lesson-content::before {
    right:50px
}
.flower-lesson-right .flower-lesson-content::before {
    left:50px
}
.flower-lesson-content>img {
    width:270px;
    height:310px;
    object-fit:contain;
    margin:20px auto 30px
}
.flower-lesson-left .flower-lesson-content>img {
    max-width:none;
    position:relative;
    left:-20px
}
.flower-lesson-content>img.flower-first-image {
    width:330px;
    height:255px;
    left:-45px
}
.flower-price {
    font-size:12px;
    line-height:1.5;
    letter-spacing:0
}
.flower-attention {
    padding:0 0 55px 25px
}
.flower-attention ul {
    list-style:none;
    font-size:12px;
    padding:10px 25px 0 0;
    line-height:1.9
}
.flower-lined-heading {
    padding:58px 25px 20px;
    border-bottom:1px solid var(--flower-line)
}
.flower-order>.flower-copy {
    padding-top:14px
}
.flower-order-item {
    margin:55px 20px 70px!important
}
.flower-order-image {
    position:relative;
    height:250px
}
.flower-order-image::before {
    content:"";
    position:absolute;
    top:0;
    left:40px;
    width:150px;
    height:200px;
    background:#e6e5dc
}
.flower-order-item:nth-of-type(2) .flower-order-image::before {
    left:auto;
    right:40px
}
.flower-order-image img {
    position:relative;
    width:250px;
    height:250px;
    object-fit:contain;
    margin:auto
}
.flower-order-item figcaption {
    text-align:right;
    font-size:12px;
    letter-spacing:0;
    margin-top:9px
}
.flower-cta {
    text-align:center;
    padding:0 20px 60px
}
.flower-cta p {
    margin-bottom:15px
}
.flower-button {
    display:inline-block;
    background:var(--flower-accent);
    color:#fff!important;
    border-radius:30px;
    padding:5px 28px;
    font-size:18px;
    letter-spacing:.05em;
    line-height:1.7
}
.flower-profile {
    position:relative
}
.flower-profile-photo {
    width:82%;
    height:382px!important;
    object-fit:cover
}
.flower-profile-decoration {
    position:absolute;
    bottom:-105px;
    right:-35px;
    width:200px;
    height:235px!important;
    object-fit:contain;
    pointer-events:none
}
.flower-profile-caption {
    padding:10px 25px;
    font-size:12px
}
.flower-profile-caption a {
    color:#a09da1;
    text-decoration:underline;
    font-family:Arial,sans-serif;
    letter-spacing:0
}
.flower-company-copy {
    padding-top:82px;
    padding-bottom:56px
}
.flower-shop-photos img {
    width:90%;
    aspect-ratio:1.6;
    object-fit:cover
}
.flower-shop-photos img+img {
    margin-left:auto;
    margin-top: 15px
}
.flower-instagram {
    padding:55px 25px 0;
    text-align:right
}
.flower-instagram-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:7px
}
.flower-instagram-grid span {
    display:block;
    aspect-ratio:3/4;
    background:#a39fa3
}
.flower-instagram>a {
    color:var(--flower-accent);
    font-size:12px;
    text-decoration:underline
}
.flower-contact {
    padding-top:42px
}
.flower-contact .flower-cta {
    padding-top:24px
}
.flower-contact .flower-cta p {
    font-size:14px;
    white-space:nowrap;
    letter-spacing:0
}
.flower-sticky-contact {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:35;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:60px;
    padding:12px 8px;
    background:var(--flower-accent);
    color:#fff!important;
    font-size:14px
}
.flower-page.menu-open {
    overflow:hidden
}
.flower-page.menu-open .flower-sticky-contact {
    display:none
}
@media(min-width:1280px) {
    :root {
        --flower-body-width:390px;
        --flower-slide-height:min(54vw,calc(100vh - 100px));
        --flower-nav-top:clamp(24px,calc(var(--flower-slide-height) - 490px),205px)
    }
    html {
        scroll-padding-top:25px
    }
    .flower-mobile-header,.flower-sticky-contact {
        display:none
    }
    .flower-side {
        display:block;
        position:fixed;
        z-index:0;
        left:0;
        top:0;
        width:39.0625vw;
        height:100vh;
        border-right:1px solid white
    }
    .flower-slides {
        height:var(--flower-slide-height)
    }
    .flower-slide {
        height:100%
    }
    .flower-slide[hidden] {
        display:none
    }
    .flower-slide>img {
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:top
    }
    .flower-photo-dots {
        display:flex;
        justify-content:flex-end;
        gap:28px;
        padding:20px;
        border-top:1px solid white;
        color:#fff;
        font-size:14px
    }
    .flower-photo-dots button {
        font:inherit;
        background:transparent;
        color:inherit;
        padding:0;
        cursor:pointer;
        display:grid;
        place-items:center;
        border:1px solid white;
        border-radius:50%;
        width:30px;
        height:30px
    }
    .flower-photo-dots .is-current {
        background:white;
        color:#999
    }
    .flower-main {
        margin:100px 0 100px calc(39.0625vw + 60px);
        width:390px
    }
    .flower-nav,.flower-nav.is-open {
        display:block;
        inset:0 0 auto auto;
        top:var(--flower-nav-top);
        left:calc(39.0625vw + 510px);
        padding:0 20px 0 0;
        max-height:calc(var(--flower-slide-height) - var(--flower-nav-top) - 20px);
        overflow:auto;
        background:transparent;
        color:#fff;
        font-size:18px
    }
    .flower-nav .flower-nav-photo {
        display:none
    }
    .flower-nav-content {
        padding:0
    }
    .flower-nav-content>ul>li {
        margin-bottom:16px
    }
    .flower-nav li ul {
        padding-top:12px
    }
    .flower-hero {
        height:480px
    }
    .flower-hero img {
        top:70px;
        width:235px;
        height:280px;
        left:-25px
    }
    .flower-hero h1 {
        padding-bottom:75px
    }
    .flower-about-copy {
        padding-bottom:55px
    }
    .flower-profile-photo {
        height:382px!important
    }
    .flower-side::after {
        content:"";
        position:absolute;
        top:var(--flower-slide-height);
        left:0;
        width:100vw;
        height:1px;
        background:white;
        z-index:-1
    }
    .flower-page.menu-open {
        overflow:auto
    }
}
@media(max-width:374px) {
    .flower-hero h1 {
        font-size:16px;
        padding-left:15px
    }
    .flower-hero img {
        width:205px;
        left:-25px
    }
    .flower-copy {
        padding-left:20px;
        padding-right:20px
    }
    .flower-flowers-heading img {
        width:195px;
        right:-25px
    }
    .flower-flowers-heading h2 {
        font-size:16px
    }
    .flower-lesson-content>img {
        width:240px
    }
    .flower-lesson-content>img.flower-first-image {
        width:290px;
        left:-35px
    }
    .flower-lesson h3 {
        font-size:12px;
        gap:7px
    }
    .flower-lesson-right .flower-lesson-content {
        padding-left:55px
    }
    .flower-lesson-right .flower-lesson-content::before {
        left:40px
    }
    .flower-contact .flower-cta p {
        font-size:12px
    }
    .flower-profile-decoration {
        right:-20px;
        width:170px
    }
    .flower-order-item figcaption {
        font-size:10px
    }
    .flower-sticky-contact {
        font-size:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .flower-menu-toggle span {
        transition:none
    }
}