@charset "utf-8";
/* CSS Document */
/* theme name:mitama-guide */
:root {
    --design-width: 375;
    --contents-width: 375;
    --contents-side-padding: 10;
    --minwidth: 320;
    --root-fz: 32;
    --line-height: 1.5;
    --hover-opacity-ratio: 0.6;
    --hover-duration: .3s;
    --color-base-1: #513e1b;
    --color-base-2: #326635;
    --color-black-1: #333333;
    --color-white-1: #fff;
    --color-yellow:#d9a300;
    --ff-root: "Noto Sans JP", sans-serif;
    --hovertransition: all .3s ease;
}
@media (min-width: 751px) {
    :root {
        --contents-width-pc: 430;
        --root-fz: 16;
    }
}

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

/* ---------------------------------------------
*   html, body
--------------------------------------------- */
section.contentsMain{background-color: var(--color-white-1);}
html,
body {
    color: var(--color-black-1);
    font-size: calc(13.75 / var(--design-width) * 100vw);
    font-family: var(--ff-root);
    -webkit-text-size-adjust: 100%;
    background: var(--color-base-1);
    line-height: var(--line-height);
    font-weight: 500;
}
@media (min-width: 751px) {
    html,
    body {
        position: relative;
        font-size: 15px;
    }
    .page-bg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(./img/background-img.webp);
        background-size: cover;
        background-position: 50% 50%;
    }
    .page-bg:before {
        display: block;
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background-color: #00000080;
        content: "";
    }
}

/* ---------------------------------------------
*   <a> tag
--------------------------------------------- */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ---------------------------------------------
*   <img> tag
--------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.container{
    max-width: 93%;
    margin: 0 auto;
}
/* ---------------------------------------------
*   side contents
---------------------------------------------- */
.c-block-bg__logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: calc((100% - var(--contents-width-pc)* 1px) / 2);
    height: 100%;
}
.c-block-bg__logo img {
    width: 13.6vw;
    position: absolute;
    inset: 0;
    margin: auto;
    padding-top: 87px;
}
@media (min-width: 1001px) {
    .c-block-bg__logo img {
        width: 175px;
    }
}
.c-block-bg__qr {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: calc((100% - var(--contents-width-pc) * 1px) / 2);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
}
ul.pc_sidemenu{
    display: none;
}
@media all and (min-width:1135px){
    ul.pc_sidemenu{
        display: block;
        line-height: 2.75;
        font-size: 18px;
    }
    ul.pc_sidemenu li a{
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: var(--hovertransition);
        gap: 3em;
    }
    ul.pc_sidemenu li a span{
        width: 1.5em;
        height: 1.5em;
        background: url(./img/back-btn.svg);
        background-position: center;
        background-size: contain;
        transform: rotate(180deg);
    }
}
@media (any-hover: hover){
    ul.pc_sidemenu li a:hover{opacity: var(--hover-opacity-ratio);}
}

/* ---------------------------------------------
*   l-wrapper
--------------------------------------------- */
#l-wrapper {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    background: var(--color-base-1);
    position: relative;
}
@media (min-width: 751px) {
    #l-wrapper {
        position: relative;
        max-width: calc(var(--contents-width-pc) * 1px);
        margin-inline: auto;
        z-index: 100;
    }
}
@media (max-width: 750px) {
    .sp-hide {
        display: none !important;
    }
}
/*  --------------------------------------------
*   header
----------------------------------------------*/
header{
    background: var(--color-base-1);
    padding: 11px 0 12px;
}
h1.logo {
    width: clamp(97px, 22vw, 140px);
    margin: 0 auto;
    line-height: 0;
}
.noppi{
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    color: #fff;
    background: #326635;
    font-weight: 600;
    padding: 0.5rem;
    letter-spacing: 0.05em;
}
#modaalinline {
    display: none;
    visibility: hidden;
    position: fixed;
    z-index: 999;
    background: #fff;
    padding: 1rem 2rem;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modaal-container {
    max-width: 600px;
}
.noppi_item {
    text-align: center;
    margin-bottom: 1rem;
}
.noppi_text {
    line-height: 1.88;
}
/*  --------------------------------------------
*   footer
----------------------------------------------*/
footer {
    font-size: calc(17 / var(--design-width)* 100vw);
    background: var(--color-base-1);
    padding: 2.5em 0;
    text-align: center;
    line-height: 1.75;
    font-weight: 600;
}
footer .footerInner{
    color: var(--color-white-1);
}
footer p.tel span{
    display: inline-block;
    padding-right: 0.3em;
    font-size: calc(14 / var(--design-width)* 100vw);
}
@media (min-width:751px){
    footer {font-size: 20px;}
    footer p.tel span{font-size: 16px;}
}

/*  --------------------------------------------
*   main
----------------------------------------------*/
main{
    background: var(--color-white-1);
}
.maininner{
    padding: 35px 0;
    width: 93%;
    margin: 0 auto;
}
.mainContentsArea{padding: 35px 0 3.5rem;}
.innerwrap{
    width: 93%;
    margin: 0 auto;
}
/* ---------- front --------------- */
/* .guideMenus{
    padding: 7px 0;
}
.guideblk{
    display: flex;
    justify-content: space-between;
}
.guideblk:not(:last-child){
    margin-bottom: 7px;
}
.guideblk > div{
    width: 50%;
}
.guideblk .pic{
    position: relative;
}
.guideblk .pic span{
    position: absolute;
    left: 3%;
    bottom: 6%;
    font-size: min(calc(67 / var(--design-width)* 100vw), 80px);
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 10px rgb(0 0 0 / .8);
}
.guideblk .txt{
    padding: 2em 1.5em;
    font-weight: 600;
}
.guideblk .txt span{
    font-size: calc(12.5 / var(--design-width)* 100vw);
    line-height: 1.875;
}
.guideblk .txt p {
    font-size: calc(20 / var(--design-width) * 100vw);
    margin: 0.35em 0 0.65em;
}
.guideblk .txt a {
    background: var(--color-yellow);
    color: var(--color-white-1);
    display: block;
    text-align: center;
    border-radius: 50px;
    padding: 0.65em 0px;
    width: 90%;
    transition: var(--hovertransition);
}
@media (any-hover: hover){
    .guideblk .txt a:hover{opacity: var(--hover-opacity-ratio);}
}
@media all and (min-width:751px){
    .guideblk .txt span{
        font-size: 14px;
    }
    .guideblk .txt p{
        font-size: 25px;
    }
} */
.guideMenus{
    display: flex;
    flex-wrap: wrap;
}
.guideblk{
    width: 50%;
    height: calc((100vh - 99px) / 2);
    min-height: 280px;
    position: relative;
}
.guideblk > a{
    display: block;
    width: 100%;
    height: 100%;
}
.guideblk img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 61% 50%;
}
.guideblk.w-full{
    width: 100%;
    height: auto;
    aspect-ratio: 1.414 / 1;
}
.guideblk.w-full img{
    object-position: 61% 73%;
}
.guideblk a > span{
    position: absolute;
    left: 3%;
    bottom: 6%;
    font-size: min(calc(57 / var(--design-width)* 100vw), 74px);
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 10px rgb(0 0 0 / .8);
}
.guideblk .txt {
    padding: 1.5em 1em 1.5em 1em;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 0;
    width: 82%;
    text-align: right;
    color: #fff;
    /* background: #fff;
    background: unset;
    background: rgba(255, 255, 255, 0.695);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(19px); */
}
.guideblk.w-full .txt{
    width: 41%;
}
.guideblk .txt span{
    font-size: calc(12 / var(--design-width)* 100vw);
    transform: rot;
    line-height: 1.55;
    text-shadow:1px 1px 0 #513e1b, -1px -1px 0 #513e1b,
              -1px 1px 0 #513e1b, 1px -1px 0 #513e1b,
              0px 1px 0 #513e1b,  0 -1px 0 #513e1b,
              -1px 0 0 #513e1b, 1px 0 0 #513e1b;
}
.guideblk .txt p {
    font-size: calc(19 / var(--design-width) * 100vw);
    margin: 0.35em 0 0.58em;
    text-shadow:1px 1px 0 #513e1b, -1px -1px 0 #513e1b,
              -1px 1px 0 #513e1b, 1px -1px 0 #513e1b,
              0px 1px 0 #513e1b,  0 -1px 0 #513e1b,
              -1px 0 0 #513e1b, 1px 0 0 #513e1b;
}
.guideblk .txt p.more {
    background: var(--color-yellow);
    color: var(--color-white-1);
    display: block;
    text-align: center;
    border-radius: 50px;
    padding: 0.45em 0px;
    width: 83%;
    margin-left: auto;
    margin-right: -3px;
    font-size: calc(12.5 / var(--design-width) * 100vw);
    transition: all .3s ease;
}
@media (any-hover: hover){
    .guideblk .txt .more:hover{opacity: var(--hover-opacity-ratio);}
}
@media all and (max-width:319px){
    .guideblk{
        width: 100%;
        height: auto;
        min-height: 180px;
        aspect-ratio: 16 / 9;
    }
    .guideblk img{
        object-position: 61% 73%;
    }
    .guideblk .txt{
        width: 41%;
    }
}
@media all and (min-width:441px) and (max-width:636px){
    .guideblk{
        height: calc((100vh - (9.513vw + 22px)) / 2);
    }
}
@media all and (min-width:637px){
    .guideblk{
        height: calc((100vh - 142.61px) / 2);
    }
}
@media all and (min-width:751px){
    .guideblk .txt span{
        font-size: 13px;
    }
    .guideblk .txt p{
        font-size: 23px;
    }
    .guideblk .txt p.more{
        font-size: 13px;
    }
    .guideblk{
        height: 415px;
    }
}
/* ---------- childpage ----------- */
header .container{position: relative;}
a.header_back {
    display: block;
    width: 2.5em;
    max-width: 45px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
@media (min-width:751px){
    a.header_back{width: 32px;}
}
/* childpage title */
.pagettl{font-weight: 600;}
.pagettl span{
    font-size: calc(12.5 / var(--design-width)* 100vw);
    line-height: 1.875;
}
.pagettl h2{
    font-size: calc(20 / var(--design-width) * 100vw);
    margin: 0.35em 0 0.9em;
}
h3.pmcItem{
    font-size: calc(20 / var(--design-width) * 100vw);
    font-weight: 600;
    margin-bottom: 1.15em;
}
.openingtimes{
    background: #E6E4DF;
}
.openingtimes > .maininner{
    padding: 1em 0;
    font-size: calc(14 / var(--design-width) * 100vw);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1em;
}
#pageMain{
    padding-top: 2.5em;
}
.pageMainContents:nth-child(n+2){
    padding-top: 2.75em;
}
.linkbtn{
    border-radius: 8px;
    overflow: hidden;
}
.linkbtn a {
    display: block;
    width: 100%;
    color: var(--color-white-1);
    background: var(--color-yellow);
    padding: 1em 1.25em;
    font-size: calc(17 / var(--design-width) * 100vw);
    transition: var(--hovertransition);
}
.linkbtn:nth-of-type(n+2){
    margin-top: 1.4rem;
}
ul.guideinfo-list li:nth-of-type(n+2){
    margin-top: 2.5rem;
}
.post_title,.noinfo{
    padding-top: 1em;
    font-size: calc(15.5 / var(--design-width) * 100vw);
}
@media (any-hover: hover){
    .linkbtn a:hover{opacity: var(--hover-opacity-ratio);}
}
@media all and (min-width:751px){
    .pagettl span{font-size: 14px;}
    .pagettl h2,h3.pmcItem{font-size: 25px;}
    .openingtimes > .maininner{font-size: 17px;}
    .linkbtn a{font-size: 18px;}
    .post_title,.noinfo,.bodycare_normal_menu_blk .item{font-size: 19px;}
    .bodycare_normal_menu_blk .explain{font-size: 16px;}
}
/* bodycare */
.bodycare_normal_menu_blk .item{
    background: #f4f4f4;
    border-bottom: 1px dashed #666;
    padding: 0.7em 0 0.65em;
    font-size: calc(15.5 / var(--design-width) * 100vw);
}
.bodycare_normal_menu_blk .explain{
    font-size: calc(14.75 / var(--design-width) * 100vw);
    letter-spacing: 0.01em;
}
.bodycare_normal_menu_blk .item .t{
    padding-right: 4em;
}
.bodycare_normal_menu_blk .explain{
    font-weight: 400;
    line-height: 1.66;
    padding: 0.65em 0 0.6em;
}
.iso_img{
    margin-top: 2rem;
}
@media all and (min-width:751px){
    .bodycare_normal_menu_blk .item{font-size: 19px;}
    .bodycare_normal_menu_blk .explain{font-size: 16px;}
}
/* ------ single ------ */
.post_date.single{
    font-size: calc(13 / var(--design-width) * 100vw);
    color: #9c9c9c;
}
.post-title.single{
    font-size: calc(18.5 / var(--design-width) * 100vw);
    margin-top: 0.3em;
    font-weight: 600;
}
.post_content.single{
    margin: 1.5rem 0;
}
.post_pagenation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post_pagenation > div a,
.back_allnews a{
    background: var(--color-yellow);
    color: var(--color-white-1);
    display: block;
    text-align: center;
    border-radius: 50px;
    padding: 0.65em 0px;
    width: 7em;
    transition: var(--hovertransition);
    margin: 0 auto;
}
.back_allnews a{
    width: 11.75em;
}
.back_allnews{
    margin-top: 30px;
}
@media all and (min-width:751px){
    .post_date.single{
        font-size: 14px;
    }
    .post-title.single{
        font-size: 21px;
    }
}
@media (any-hover: hover){
    .post_pagenation > div a:hover,.back_allnews a:hover{opacity: var(--hover-opacity-ratio);}
}
/* ------ 404 ------ */
.page404Contents h2{
    font-size: calc(23 / var(--design-width) * 100vw);
    font-weight: 600;
}
.page404Contents h3{
    font-size: calc(16.5 / var(--design-width) * 100vw);
    font-weight: 600;
    margin-bottom: 1em;
}
.page404_contents > p{
    line-height: 1.85;
}
ul.page404_links{
    margin-top: 35px;
}
.page404_links li{margin-bottom: 0.5em;}
.page404_links li a {
    background: var(--color-yellow);
    color: var(--color-white-1);
    display: block;
    text-align: center;
    border-radius: 50px;
    padding: 0.65em 0px;
    width: 53vw;
    transition: var(--hovertransition);
    margin: 0 auto;
}
@media all and (min-width:751px){
    .page404Contents h2 {font-size: 29px;}
    .page404Contents h3 {font-size: 17px;}
    .page404_links li a{width: 215px;}
}
@media (any-hover: hover){
    .page404_links li a:hover{opacity: var(--hover-opacity-ratio);}
}

/* ------- ranking ------- */
.ranking-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.22em;
}
.rankinkblk {
    width: 100%;
}
.ranking_item .num{
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    padding-left: 1.5em;
    padding-right: 1.35em;
}
.ranking_item .num::before{
    content: "";
    width: 1rem;
    height: 3px;
    position: absolute;
    top: 55%;
    left: 0;
    transform: translateY(-50%);
    background: #326635;
    border-radius: 8px;
}
.ranking_item .num::after{
    content: "";
    width: 1rem;
    height: 3px;
    position: absolute;
    top: 55%;
    right: 0;
    transform: translateY(-50%);
    background: #326635;
    border-radius: 8px;
}
.ranking_item .num p{
    font-size: calc(25 / var(--design-width) * 100vw);
    display: inline-block;
}
.ranking_item .num span{
    display: inline-block;
    font-weight: 900;
    font-size: calc(12.5 / var(--design-width) * 100vw);
    padding-left: 0.05em;
}
.ranking_item .num span.syurui{
    font-size: calc(14.5 / var(--design-width) * 100vw);
    padding-bottom: 0.5em;
}
.ranking_item .num.no1{color: #d9a300;}
.ranking_item .num.no1::before,
.ranking_item .num.no1::after{
    background: #d9a300;
}
.ranking_item .num{color: #326635;}
.menuname{
    text-align: center;
    font-size: calc(15.5 / var(--design-width) * 100vw);
    padding: 3px;
    margin-bottom: 0.75em;
}
@media all and (min-width:751px){
    .ranking_item .num p {font-size: 34px;}
    .menuname {font-size: 19px;}
    .ranking_item .num span {font-size: 13px;}
    .ranking_item .num span.syurui{
        font-size: 17px;
        padding-bottom: 0.75em;
    }
}
.ytshort-wrap{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ytshort{
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
}
.ytshort iframe{
    width: 100%;
    height: 100%;
}
.demaeflow > div:nth-of-type(n+2){
    margin-top: 2em;
}
.indent{
    padding-left: 1em;
    text-indent: -1em;
    margin-top: 0.4em;
}
.demaeflow .demae-explain{
    line-height: 1.66;
    padding-left: 1.2em;
    text-indent: -1.2em;
}
.demaeflow .img {
    margin-top: 20px;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
@media all and (min-width:751px){
    .demaeflow .demae-explain{font-size: 16px;}
}