@charset "UTF-8";
/*
店舗検索用
*/
/*
============================================== */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;800&display=swap');


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

html{
    font-size: 62.5%;
}

a{
  color:#141414;
  text-decoration: none;
}

.children_PageBody *{
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* メインエリアの背景 */
.children_PageBody{
    background-color: #FFF4E0;
    background: url(/wp-content/themes/mngtr_basic/img/children/kids_bg-pc.jpg) top/ cover no-repeat;
    padding-bottom: 60px;
    position: relative;
}

.children_PageBody .pageTitle{
    font-size: 2rem;
    font-size: clamp(2rem, 1.515rem + 1.294vw, 4rem);
    font-weight: 800;
    padding: 0;
    padding-top: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25em;
}
.children_PageBody .pageTitle::before,
.children_PageBody .pageTitle::after{
    display: block;
    content: '';
    width: .05em;
    height: 2.25em;
    background-color: #330E0B;

}
.children_PageBody .pageTitle::before {
    rotate: -35deg;
}
.children_PageBody .pageTitle::after {
    rotate: 35deg;
}

.MV{
    width: min(1080px,89.3%);
    margin-inline: auto;
}

.message{
    text-align: center;
    font-size: 1.6rem;
    font-size: clamp(1.6rem, 1.309rem + 0.777vw, 2.8rem);
    font-weight: 800;
    line-height: 1.53;
    margin: max(1.07em,15px) auto max(3.57em,50px);
    width: min(1080px,89.3%);
    color: #330E0B;
}

/*====================================================*/
/* 上のエリア */
/*====================================================*/

.upperArea{
    width: 100%;
}

.upperAreaContainer{
    max-width: 100%;
    width: min(1090px, 76%);
    margin-inline: auto;
    gap: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(331px,100%),1fr));

}

.children_PageBody .upperArea .attention_text{
    font-size: 1.6rem;
}

/*====================================================*/
/* 上下共通 */
/*====================================================*/
.upperArea .itemContainer{
    border-radius: 60px;
    padding: 15px min(30px, 5.7%) 47px;
    opacity: 0;
    position: relative;
    background: #fff center / cover no-repeat;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='60' ry='60' stroke='%23F09798FF' stroke-width='8' stroke-dasharray='4%2c 12' stroke-dashoffset='4' stroke-linecap='round'/%3e%3c/svg%3e");
}
.upperArea .itemContainer__inner{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 13px;
}
.upperArea .itemContent{
    position: relative;
    z-index: 2;
}

.itemContaier__inside{
    border: 5px #A5A5A5 dashed;
    border-radius: 10%;
    overflow:hidden;
}

.itemTextTitle{
    margin-top: -35px;
    font-weight: 800;
    font-size: 1.8rem;
    font-size: clamp(1.9rem, 1.24rem + 1.76vw, 3rem);
    line-height: 1.3;
    color: #EF2C25;
    text-align: center;
    padding-inline: min(20px, 4.3%);
    position: relative;
    z-index: 2;
}

.itemText{
    font-size:1.2rem;
    font-size: clamp(1.4rem, 1.04rem + 0.96vw, 2rem);
    line-height: 1.5;
    padding-inline: min(20px, 4.3%);
}
.itemNote{
    padding-inline: min(20px, 4.3%);
    font-size: clamp(1.3rem, 1.12rem + 0.48vw, 1.6rem);
    margin-top: 0.625em;
}
.upperArea .itemContainer img
{
    display: block;
    margin-inline: auto;
    max-height: 420px;
}

.menuArea{
    width: 100%;
    overflow: hidden;
    margin-top: 200px;
}

.menu-icon{
    width: min(1280px,84%);
    margin-inline: auto;
}
.menu-icon img{
    display: block;
    width: min(700px, 100%);
    margin-inline: auto;
}

.menuAreaContainer{
    max-width: 100%;
    width:1280px;
    margin-inline: auto;
    margin-top: 60px;
}

.menuArea .itemContainer{
    display: flex;
    flex-direction: column;
    background-color: transparent;
    opacity: 0;
    position: relative;
    width: min(818px, 63.9%);
    padding-top: 32px;
    background: top / contain no-repeat;
}
.menuArea .itemContainer + .itemContainer{
    margin-top: -190px;
    margin-top: -14.9%;
}
/* 奇数=右・偶数=左（冒頭右・末尾左のため） */
.menuArea .itemContainer:not(:nth-child(even)){
    margin-left: auto;
    background-image: url(/wp-content/themes/mngtr_basic/img/children/okohon_kids_frame02.webp);
    background-position-x: right;
}
.menuArea .itemContainer:nth-child(even) {
    background-image: url(/wp-content/themes/mngtr_basic/img/children/okohon_kids_frame01.webp);
    background-position-x: left;
}
.menuArea .itemContainer:not(:nth-child(even)) .menuDescription{
    align-self: flex-end;
    margin-right:min(100px, 12.3%);
}
.menuArea .itemContainer:nth-child(even) .menuDescription {
    margin-left:min(100px, 12.3%);
}
.menuArea .itemContainer .menuDescription{
    width: fit-content;
    font-size: 1.2rem;
    font-size: clamp(1.2rem, 1.006rem + 0.518vw, 2rem);
    position: relative;
}
.menuArea .itemContainer:nth-child(1) .menuDescription {
    top: 30px;
    margin-bottom: 30px;
}
.menuArea .itemContainer:nth-child(2) .menuDescription {
    bottom: 50px;
    margin-bottom: 50px;
}
.menuArea .itemContainer:nth-child(3) .menuDescription {
    bottom: 30px;
    margin-bottom: 30px;
}
.menuArea .itemContainer:nth-child(4) .menuDescription {
    bottom: 65px;
    margin-bottom: 65px;
}
.menuArea .itemContainer:nth-child(5) .menuDescription {
    bottom: 30px;
    margin-bottom: 30px;
}
.menuArea .itemContainer:nth-child(6) .menuDescription {
    bottom: 45px;
    margin-bottom: 45px;
}
.menuArea .itemContainer:nth-child(7) .menuDescription {
    bottom: 30px;
    margin-bottom: 30px;
}
.menuArea .itemContainer:nth-child(8) .menuDescription {
    bottom: 45px;
    margin-bottom: 45px;
}
.menuArea .itemContainer .menuTtl{
    font-size: 1.8rem;
    font-size: clamp(1.8rem, 1.509rem + 0.777vw, 3rem);
    line-height: 40px;
    font-weight: 800;
    text-shadow: #fff 0 2px 4px;
    display: block;
    margin-bottom: 10px;
}
.menuArea .itemContainer .menuTtl small{
    font-size: max(.866em,16px);

}
.menuArea .itemContainer:not(:nth-child(even)) .menuTtl {
    text-align: right;
}
.menuArea .itemContainer:nth-child(even) .menuTtl {
    text-align: left;
}

.menuArea .itemContainer:nth-of-type(2n+1) .menuTtl{
    color: #0B7B58;
}

.menuArea .itemContainer:nth-of-type(2n) .menuTtl{
    color: #EF2C25;
}


.attention_container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0px 7.8125% 0px;
}

.children_PageBody .btnContainer{
    width: 100%;
    text-align: center;
    margin-top: 50px;
}


.children_PageBody .btnContainer .btn{
    font-family: 'Noto Sans JP', sans-serif;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.children_PageBody .btnContainer .btn:hover{
    background-color: black;
    color: white;
}
.children_PageBody .btnContainer .btn::before{
    display: block;
    content: '';
    width: .43em;
    height: .43em;
    border-right: 1px solid;
    border-bottom: 1px solid;
    rotate: -45deg;
    transform: skew(10deg, 10deg);
}

.menu_attention{
    width: min(1080px, 89%);
    margin-inline: auto;
}
.menu_attention_text{
    font-family: 'Noto Sans JP', sans-serif;

    display: flex;
}
.menu_attention_text::before{
    content: '※';
}
.allergy_information{
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: 40px;
    text-align: right;
}

.allergy_information a{
    font-family: 'Noto Sans JP', sans-serif;
    color: #821923;
}


/*====================================================*/
/* SP */
/*====================================================*/
@media screen and (max-width:767px) {
    .pcOnly{
        display: none;
    }    
    .spOnly{
        display: none;
    }
    .children_PageBody .pageTitle{
        font-size: 2rem;
        padding-top: 30px;
    }
    .message{
        margin-block: 15px 50px;
        line-height: 1.56;
    }
    .upperAreaContainer{
        max-width: 375px;
        margin-bottom: 40px;
        gap: 30px;
    }
    .children_PageBody .upperArea .attention_text{
        font-size: 1.0rem;
    }    
    .upperArea .itemContainer{
        width: 100%;
        padding: 10px 0 29px;
        gap: 4px;
        border-radius: 30px;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='30' ry='30' stroke='%23F09798FF' stroke-width='4' stroke-dasharray='4%2c 12' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    }
    .upperArea .itemContainer figure{
        padding-inline: min(28px, 9.6%);
    }
    .itemText,
    .itemTextTitle,
    .itemNote{
        padding-inline: min(10.5%, 30px);
    }
    .itemTextTitle{
        line-height: 1.2;
        margin-top: -25px;
    }
    .menuArea {
        margin-top: 90px;
    }
    .menuAreaContainer {
        margin-top: 20px;
    }
    .menuArea .itemContainer{
        width: min(375px, 100%);
    }
    .menuArea .itemContainer + .itemContainer{
        margin-top: 10px;
    }
    .menuArea .itemContainer:not(:nth-child(even)) .menuTtl {
        text-align: right;
    }
    .menuArea .itemContainer:nth-child(even) .menuTtl {
        text-align: left;
    }
    /* 奇数=右・偶数=左 */
    .menuArea .itemContainer:not(:nth-child(even)){
        background-position: top 0 left 65px;
    }
    .menuArea .itemContainer:nth-child(even) {
        background-position: top 0 right 100px;
    }
    .menuArea .itemContainer:nth-child(1){
        background-position: top 0 left 65px;
        padding-top: 17px;
    }
    .menuArea .itemContainer:nth-child(2){
        background-position: top 0 right 100px;
        padding-top: 25px;
    }
    .menuArea .itemContainer:nth-child(3){
        padding-top: 32px;
    }
    .menuArea .itemContainer:nth-child(4){
        padding-top: 21px;
    }
    .menuArea .itemContainer:nth-child(5){
        padding-top: 24px;
    }
    .menuArea .itemContainer:nth-child(6){
        padding-top: 14px;
    }
    .menuArea .itemContainer:nth-child(7){
        padding-top: 24px;
    }
    .menuArea .itemContainer:nth-child(8){
        padding-top: 14px;
    }
    .menuArea .itemContainer .imgContainer{
        width: 100%;
    }
    .menuArea .itemContainer:nth-child(1) .menuDescription ,
    .menuArea .itemContainer:nth-child(2) .menuDescription ,
    .menuArea .itemContainer:nth-child(3) .menuDescription ,
    .menuArea .itemContainer:nth-child(4) .menuDescription ,
    .menuArea .itemContainer:nth-child(5) .menuDescription ,
    .menuArea .itemContainer:nth-child(6) .menuDescription ,
    .menuArea .itemContainer:nth-child(7) .menuDescription ,
    .menuArea .itemContainer:nth-child(8) .menuDescription {
        position: static;
    }
    .menuArea .itemContainer:not(:nth-child(even)) .menuDescription{
        margin-right:min(35px, 9%);
    }
    .menuArea .itemContainer:nth-child(even) .menuDescription {
        margin-left:min(35px, 9%);
    }        
    .menuArea .itemContainer:nth-child(1) .menuDescription{
        margin-block: 11px 25px;
    }
    .menuArea .itemContainer:nth-child(2) .menuDescription{
        margin-block: -7px 54px;
    }
    .menuArea .itemContainer:nth-child(3) .menuDescription{
        margin-block: -16px 44px;
    }
    .menuArea .itemContainer:nth-child(4) .menuDescription{
        margin-block: 0 35px;
    }
    .menuArea .itemContainer:nth-child(5) .menuDescription{
        margin-block: -5px 40px;
    }
    .menuArea .itemContainer:nth-child(6) .menuDescription{
        margin-block: 0 58px;
    }
    .menuArea .itemContainer:nth-child(7) .menuDescription{
        margin-block: -5px 40px;
    }
    .menuArea .itemContainer:nth-child(8) .menuDescription{
        margin-block: 0 58px;
    }
    .menuArea .itemContainer .menuTtl{
        line-height: 22px;
    }
    .children_PageBody {
        background-image: url(/wp-content/themes/mngtr_basic/img/children/kids_bg-sp.jpg);
    }
    .children_PageBody .btnContainer{
        width: 100%;
    }
    .menu_attention{
        margin-top: 30px;
    }
    .allergy_information{
        font-size: 1.2rem;
    }


    
}


/*====================================================*/
/* アニメーション */
/*====================================================*/
@keyframes fadeInLeft{
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}

.fadeInLeft{
    animation-name: fadeInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInRight{
    0%{
        opacity: 0;
        transform: translateX(20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}

.fadeInRight{
    animation-name: fadeInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}