@charset "utf-8";

/* =========================================================
   IASO SHINSAIBASHI | SP <=767px
   PC/TB FIXを変更せず、SP専用責務のみを定義
========================================================= */
:root{
    --shin-navy:#183247;
    --shin-blue:#6e9db8;
    --shin-ivory:#f8f7f3;
    --shin-text:#334652;
    --shin-muted:#71828b;
    --shin-line:#dbe4e9;
    --shin-white:#fff
}

.ShinsaibashiPage{
    color:var(--shin-text);
    background:#fff;
    overflow:hidden
}

.ShinsaibashiPage *,
.ShinsaibashiPage *::before,
.ShinsaibashiPage *::after{
    box-sizing:border-box
}

.ShinsaibashiInner{
    width:calc(100% - 36px);
    margin:0 auto
}

.ShinsaibashiEyebrow{
    margin:0 0 13px;
    color:var(--shin-blue);
    font-size:8px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.17em
}

/* HERO -------------------------------------------------- */
.ShinsaibashiHero{
    position:relative;
    min-height:520px;
    margin:0;
    overflow:hidden;
    background:#eef7fa
}

.ShinsaibashiHero__media,
.ShinsaibashiHero__media picture{
    position:absolute;
    inset:0;
    display:block
}

.ShinsaibashiHero__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center
}

.ShinsaibashiHero__veil{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 34%,rgba(236,248,252,.16) 100%),
        radial-gradient(ellipse at center,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 38%,transparent 68%);
    pointer-events:none
}

.ShinsaibashiHero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    height:1px;
    background:rgba(110,157,184,.2)
}

.ShinsaibashiHero__inner{
    position:relative;
    z-index:2;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 0 42px
}

.ShinsaibashiHero__copy{
    width:100%;
    max-width:330px;
    margin:0 auto;
    text-align:center;
    text-shadow:0 1px 16px rgba(255,255,255,.92)
}

.ShinsaibashiHero__brand{
    margin:0 0 15px;
    color:#456e87;
    font-family:Georgia,"Times New Roman",serif;
    font-size:8px;
    font-weight:400;
    line-height:1.4;
    letter-spacing:.24em
}

.ShinsaibashiHero__open{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    margin-bottom:16px;
    color:var(--shin-navy)
}

.ShinsaibashiHero__open span,
.ShinsaibashiHero__open small{
    color:#648399;
    font-size:6.5px;
    font-weight:600;
    letter-spacing:.14em
}

.ShinsaibashiHero__open strong{
    color:#315d7c;
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    font-weight:400;
    line-height:1;
    letter-spacing:.03em
}

.ShinsaibashiHero h1{
    margin:0;
    color:var(--shin-navy);
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:28px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:.02em
}

.ShinsaibashiHero__lead{
    margin:18px 0 0;
    color:#315d78;
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:11.5px;
    font-weight:500;
    line-height:1.8;
    letter-spacing:.05em
}

.ShinsaibashiHero__sub{
    margin:15px auto 0;
    padding-top:12px;
    border-top:1px solid rgba(74,124,153,.28);
    color:#698596;
    font-size:5.5px;
    font-weight:600;
    line-height:1.55;
    letter-spacing:.10em
}

/* INDEX ------------------------------------------------- */
.ShinsaibashiNav{
    border-top:1px solid var(--shin-line);
    border-bottom:1px solid var(--shin-line);
    background:#fff
}

.ShinsaibashiNav__inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:0
}

.ShinsaibashiNav__links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    counter-reset:shinsaibashi-index
}

.ShinsaibashiNav__links a{
    position:relative;
    display:flex;
    min-height:62px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:14px 8px;
    border-right:1px solid var(--shin-line);
    border-bottom:1px solid var(--shin-line);
    color:var(--shin-navy);
    font-size:10px;
    font-weight:500;
    line-height:1.45;
    text-align:center;
    text-decoration:none
}

.ShinsaibashiNav__links a:nth-child(2n){
    border-right:0
}

.ShinsaibashiNav__links a:nth-last-child(-n+2){
    border-bottom:0
}

.ShinsaibashiNav__links a::before{
    counter-increment:shinsaibashi-index;
    content:counter(shinsaibashi-index,decimal-leading-zero);
    position:static;
    flex:0 0 auto;
    color:var(--shin-blue);
    font-family:Georgia,"Times New Roman",serif;
    font-size:10px;
    font-weight:400;
    line-height:1
}

/* COMMON ------------------------------------------------ */
.ShinsaibashiSectionHead{
    max-width:none;
    margin:0 0 30px
}

.ShinsaibashiSectionHead h2,
.ShinsaibashiConcept h2,
.ShinsaibashiMenuGuide h2,
.ShinsaibashiOpening h2,
.ShinsaibashiBrand h2{
    margin:0;
    color:var(--shin-navy);
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:500;
    letter-spacing:.02em
}

.ShinsaibashiSectionHead h2{
    font-size:26px;
    line-height:1.65
}

.ShinsaibashiSectionHead--row{
    display:block;
    max-width:none
}

.ShinsaibashiSectionHead--row>p{
    margin:18px 0 0;
    color:var(--shin-muted);
    font-size:13px;
    line-height:1.95
}

.ShinsaibashiLead{
    margin:0;
    color:var(--shin-navy);
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:15px;
    font-weight:500;
    line-height:1.95
}

.ShinsaibashiText{
    margin:17px 0 0;
    color:var(--shin-muted);
    font-size:15px;
    line-height:1.95
}

/* QUICK ------------------------------------------------- */
.ShinsaibashiQuick{
    padding:70px 0;
    background:#fff
}

.ShinsaibashiFacts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    border:1px solid var(--shin-line);
    background:var(--shin-line)
}

.ShinsaibashiFacts article{
    min-height:158px;
    position:relative;
    padding:20px 16px 18px;
    background:#fbfcfc
}

.ShinsaibashiFacts article>span{
    display:block;
    margin-bottom:18px;
    color:#b7cbd7;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px
}

.ShinsaibashiFacts small{
    display:block;
    color:var(--shin-blue);
    font-size:6px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.12em
}

.ShinsaibashiFacts strong{
    display:block;
    margin-top:9px;
    color:var(--shin-navy);
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    font-weight:400;
    line-height:1.25
}

.ShinsaibashiFacts p{
    margin:9px 0 0;
    color:var(--shin-muted);
    font-size:10.5px;
    line-height:1.65
}

/* CONCEPT ---------------------------------------------- */
.ShinsaibashiConcept{
    padding:70px 0;
    background:var(--shin-ivory)
}

.ShinsaibashiConcept__grid{
    display:block
}

.ShinsaibashiConcept__copy{
    margin-bottom:28px
}

.ShinsaibashiConcept h2{
    font-size:26px;
    line-height:1.68
}

/* SERVICES --------------------------------------------- */
.ShinsaibashiServices{
    padding:70px 0 74px;
    background:#f5f9fb
}

.ShinsaibashiServices__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px
}

.ShinsaibashiServiceCard{
    position:relative;
    overflow:hidden;
    border:1px solid var(--shin-line);
    background:#fff
}

.ShinsaibashiServiceCard--feature,
.ShinsaibashiServiceCard--visual{
    display:block;
    min-height:0
}

.ShinsaibashiServiceCard__media{
    position:relative;
    margin:0;
    overflow:hidden;
    background:#eaf1f4
}

.ShinsaibashiServiceCard__media::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(24,50,71,.04);
    pointer-events:none
}

.ShinsaibashiServiceCard__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}

.ShinsaibashiServiceCard--feature .ShinsaibashiServiceCard__media{
    height:250px
}

.ShinsaibashiServiceCard--visual .ShinsaibashiServiceCard__media{
    height:225px
}

.ShinsaibashiServiceCard__body{
    position:relative;
    padding:23px 20px 25px
}

.ShinsaibashiServiceCard--feature .ShinsaibashiServiceCard__body{
    padding:25px 20px 27px
}

.ShinsaibashiServiceCard__number{
    position:absolute;
    top:22px;
    right:20px;
    color:#b5c9d4;
    font-family:Georgia,"Times New Roman",serif;
    font-size:23px;
    font-weight:400;
    line-height:1
}

.ShinsaibashiServiceCard__eyebrow{
    margin:0 0 11px;
    padding-right:50px;
    color:var(--shin-blue);
    font-size:6.5px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.13em
}

.ShinsaibashiServiceCard h3{
    margin:0;
    color:var(--shin-navy);
    font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:20px;
    font-weight:500;
    line-height:1.6
}

.ShinsaibashiServiceCard__body>p:last-of-type,
.ShinsaibashiServiceCard--editorial p:last-of-type{
    margin:13px 0 0;
    color:var(--shin-muted);
    font-size:13px;
    line-height:1.9
}

.ShinsaibashiServiceCard__spec{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px
}

.ShinsaibashiServiceCard__spec span{
    padding:7px 10px;
    border:1px solid #bcd0da;
    color:var(--shin-navy);
    background:#f8fbfc;
    font-size:8px;
    font-weight:600;
    letter-spacing:.06em
}

.ShinsaibashiServiceCard--editorial{
    display:block;
    min-height:0;
    padding:24px 20px 26px;
    background:
        radial-gradient(circle at 88% 18%,rgba(110,157,184,.12),transparent 28%),
        linear-gradient(145deg,#f9fcfd 0%,#eef6f9 100%)
}

.ShinsaibashiServiceCard--editorial::before{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:59px;
    height:1px;
    background:linear-gradient(90deg,rgba(110,157,184,.22),rgba(110,157,184,.72),rgba(110,157,184,.08))
}

.ShinsaibashiServiceCard--editorial .ShinsaibashiServiceCard__number{
    top:22px;
    right:20px
}

.ShinsaibashiServiceCard--editorial .ShinsaibashiServiceCard__eyebrow{
    position:static;
    margin:0 0 36px;
    padding-right:50px
}

.ShinsaibashiServiceCard__editorialWord{
    margin-bottom:20px;
    color:rgba(24,50,71,.09);
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    font-weight:400;
    line-height:.88;
    letter-spacing:-.03em
}

.ShinsaibashiServiceCard__editorialBody{
    max-width:none;
    padding:0;
    border-left:0
}

/* MENU GUIDE ------------------------------------------- */
.ShinsaibashiMenuGuide{
    padding:70px 0 74px;
    background:#fff
}

.ShinsaibashiMenuGuide__head{
    max-width:none
}

.ShinsaibashiMenuGuide h2{
    font-size:26px;
    line-height:1.68
}

.ShinsaibashiMenuGuide__head>p:not(.ShinsaibashiEyebrow){
    margin:18px 0 0;
    color:var(--shin-muted);
    font-size:13px;
    line-height:1.95
}

.ShinsaibashiMenuGuide__head .br-pc{
    display:none
}

.ShinsaibashiMenuGuide__matrix{
    margin-top:32px;
    display:block;
    border:1px solid var(--shin-line)
}

.ShinsaibashiMenuGuide__axis{
    display:grid;
    grid-template-columns:auto 1fr 1fr;
    align-items:center;
    gap:10px;
    padding:17px 18px;
    background:var(--shin-navy);
    color:#fff
}

.ShinsaibashiMenuGuide__axis span{
    color:#93bbcf;
    font-size:6.5px;
    font-weight:600;
    letter-spacing:.14em
}

.ShinsaibashiMenuGuide__axis strong{
    text-align:center;
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    font-weight:400
}

.ShinsaibashiMenuGuide__times{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.ShinsaibashiMenuGuide__times article{
    min-height:120px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-left:1px solid var(--shin-line);
    border-top:1px solid var(--shin-line);
    background:#fbfcfc
}

.ShinsaibashiMenuGuide__times article:nth-child(odd){
    border-left:0
}

.ShinsaibashiMenuGuide__times article:nth-child(-n+2){
    border-top:0
}

.ShinsaibashiMenuGuide__times article.is-recommended{
    background:#f0f7fa
}

.ShinsaibashiMenuGuide__times em{
    position:absolute;
    top:13px;
    color:var(--shin-blue);
    font-size:5px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.11em
}

.ShinsaibashiMenuGuide__times span{
    color:var(--shin-navy);
    font-family:Georgia,"Times New Roman",serif;
    font-size:34px;
    line-height:1
}

.ShinsaibashiMenuGuide__times small{
    margin-top:6px;
    color:#81929b;
    font-size:6px;
    font-weight:600;
    letter-spacing:.12em
}

.ShinsaibashiMenuGuide__options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 10px;
    margin-top:20px;
    padding-top:17px;
    border-top:1px solid var(--shin-line);
    color:#657b86;
    font-size:6.8px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:.08em
}

.ShinsaibashiMenuGuide__note{
    margin:15px 0 0;
    color:#84959d;
    font-size:10.5px;
    line-height:1.75
}

/* OPENING ---------------------------------------------- */
.ShinsaibashiOpening{
    padding:70px 0 74px;
    background:var(--shin-navy)
}

.ShinsaibashiOpening__inner{
    display:block
}

.ShinsaibashiOpening__date{
    position:relative;
    width:190px;
    margin:0 0 42px;
    padding:24px 26px;
    border:1px solid rgba(255,255,255,.18)
}

.ShinsaibashiOpening__date::after{
    content:"";
    position:absolute;
    right:-16px;
    bottom:-16px;
    width:58px;
    height:58px;
    border:1px solid rgba(151,199,220,.22)
}

.ShinsaibashiOpening__date small,
.ShinsaibashiOpening__date span{
    display:block;
    color:#8fb7ca;
    font-size:6.5px;
    font-weight:600;
    letter-spacing:.15em
}

.ShinsaibashiOpening__date strong{
    display:block;
    margin:7px 0;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:78px;
    font-weight:400;
    line-height:.82
}

.ShinsaibashiOpening .ShinsaibashiEyebrow{
    color:#9cc2d4
}

.ShinsaibashiOpening h2{
    color:#fff;
    font-size:27px;
    line-height:1.7
}

.ShinsaibashiOpening__copy>p:not(.ShinsaibashiEyebrow){
    max-width:none;
    margin:17px 0 0;
    color:#c7d6dd;
    font-size:13px;
    line-height:1.95
}

/* BRAND ------------------------------------------------ */
.ShinsaibashiBrand{
    padding:72px 0 76px;
    background:#fff;
    text-align:center
}

.ShinsaibashiBrand__inner{
    max-width:none
}

.ShinsaibashiBrand h2{
    font-size:27px;
    line-height:1.7
}

.ShinsaibashiBrand__inner>p:not(.ShinsaibashiEyebrow){
    max-width:none;
    margin:20px auto 0;
    color:var(--shin-muted);
    font-size:13px;
    line-height:1.95
}

.ShinsaibashiBrand__inner .br-pc,
.ShinsaibashiBrand__inner .br-tb{
    display:none
}

.ShinsaibashiBrand__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:28px
}

.ShinsaibashiBrand__actions .iaso-button{
    width:100%
}

/* SMALL SP --------------------------------------------- */
@media (max-width:390px){
    .ShinsaibashiInner{
        width:calc(100% - 32px)
    }

    .ShinsaibashiHero{
        min-height:550px
    }

    .ShinsaibashiHero__inner{
        min-height:550px;
        padding-top:64px
    }

    .ShinsaibashiHero h1{
        font-size:26px
    }

    .ShinsaibashiQuick,
    .ShinsaibashiConcept,
    .ShinsaibashiServices,
    .ShinsaibashiMenuGuide,
    .ShinsaibashiOpening{
        padding-top:66px;
        padding-bottom:68px
    }

    .ShinsaibashiSectionHead h2,
    .ShinsaibashiConcept h2,
    .ShinsaibashiMenuGuide h2{
        font-size:25px
    }

    .ShinsaibashiFacts article{
        min-height:154px;
        padding-left:14px;
        padding-right:14px
    }

    .ShinsaibashiFacts strong{
        font-size:16px
    }

    .ShinsaibashiServiceCard--feature .ShinsaibashiServiceCard__media{
        height:235px
    }

    .ShinsaibashiServiceCard--visual .ShinsaibashiServiceCard__media{
        height:212px
    }

    .ShinsaibashiOpening h2,
    .ShinsaibashiBrand h2{
        font-size:26px
    }
}