@charset "utf-8";
/* CSS Document */
/*フルードイメージ*/
img{max-width:100%;height:auto}

/*---------------------全ページ共通部分---------------------------------*/

body{
    background-color: #fefbf7;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #00043C;
    overflow-x: hidden;
    }
    
    #wrapper{
    max-width: 1200px;
    margin: 0 auto;
    }
    
    /* ヘッダー */
    header .drawer{
        width: 100%;
        margin: 0.5% 0 0.5% 1%;
        position: fixed;
        top: 0;
        left: 0;
        z-index:100;
    }
    header .header_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    header .logo{
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    header .logo .box01{
        margin: 0 1rem 0 0;
    }
    header .map_drawer{
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    header .map_drawer .box03{
        margin: 0 1.5rem 0 0;
    }
    header .map_drawer .box04{
        width: 4.9rem;
        height: 3.8rem;
        flex-shrink: 0;
        background-color: #00043C;
    }
    
    @media only screen and (width<500px){
    /* ヘッダー */
    header .drawer{        
        max-width: 100vw;
        margin: 0 0 0 0.5rem;
    }
    .header_item .logo_btn{
        width: 100%;
    }
    .header_item .logo_btn{
        max-width: 60%;
    }
    header .logo .box01{
        margin: 0.5rem;
    }
    header .map_drawer .box03{
        margin: 0;
    }
    header .map_drawer .box03{
        max-width: 60%;
    }
    header .map_drawer .box04{
        width: 3.9rem;
        height: 3.5rem;
    } 
    }
    
    
    /*-------------------------フッター----------------------------*/
    
    footer{
        background-color: #00043C;
        width: 100%;;
        padding: 4.762% 4.762% 0 4.7622%;
        }
        
         footer .box01{
        display: flex;
        justify-content: space-between;
        margin-bottom:4.762%;
        }
        
        footer .box01 .icon{
        width: 8%;
        margin-top:-0.5%;
        margin-right:10%;
        }
        
        footer .box01 .insta-icon{
        width: 5%;
        margin-top:-0.5%;
        margin-left:10%
        }
        
        footer .box01 .box01-1{
        width: 87%;
        display: flex;
        justify-content: space-between;
        }
        
        
        footer .box01 p{
        font-size: 16px;
        color: #FEFBF7;
        }
    
        
        footer .box02 .logo{
        margin-bottom:10.714%;
        }
         
        footer .box02 p{
        font-size: 12px; 
        line-height: 1rem;
        letter-spacing: 0.2rem;
        color: #00043C; 
         }
        
        
         footer .box02{
        width:20.83%;
        border: 2px solid #FEFBF7;
        border-radius:2vw;
        background-color: #FEFBF7;
        padding: 2.439%;
        outline: 2px solid #00043C;
        outline-offset:-10px;
        margin-bottom:4.762%;
         }
        
        
        footer .box03 p{
        font-size: 12px;
        color:#FEFBF7;
        text-align: center;
        }
        
        /* フッターsp用500px以下 */
        
        @media only screen and (width<500px) {
        
         footer{
        padding:16.667% 16.667% 0 16.667%;
        max-width:100%;
         }  
        
        footer .box01{
        display:block;
        margin-bottom:4.762%;
        }
        
        footer .box01 .box01-1{
        display: block;
        width: 100%;
        margin-bottom: 6%;
        
        }
    
    
        footer .box02 .logo{
        margin-bottom:5.714%;
        
        }
        
        footer .box02{
        margin-top:30px;
        width: 100%;
        padding: 6%;
        }
        
        footer .box01 .icon{
        margin-right:0;
        margin-bottom:10.714%;
        width: 100%;
        margin-top:0px;
        text-align: center;
        }
        
        footer .box01 .insta-icon{
        width: 100%;
        text-align: center;
        margin:0;
        }
        footer .box01 .box01-2{
        display: flex;
        justify-content: center;
        }
        
        
         footer .box02{
        width:100%;
        border-radius:8vw;
        background-color: #FEFBF7;
        outline-offset:-5px;
        margin:10.714% 0;
         }
        
    }
    
    
    /* 見出し */
    .mainimg{
        margin: 14.286% 0 14.286% 0;
    }
    .mainimg img{
        border-radius: 4vw;
    }
    .midasi02{
        display: flex;
        justify-content: flex-end;
        margin: 0 0 14.286% 0;
    }
    
    .midasi01{
    display: flex;
    justify-content:left;
    }
    
    
    h1{
    color: #fefbf7;
    font-size: 48px;
    line-height: 1.5;
    }
    
    h2{
    color: #dd2109;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 4.762%;
    }
    
    p{
    color: #00043C;
    font-size: 16px;
    line-height: 2.5;
    /*line-height: 3rem;*/
    letter-spacing: 0.20em;
    }
    
    
    
    
    /*全ページ共通sp用500px以下*/
    @media only screen and (width<500px){
        #wrapper{
        max-width: 100%;
        margin: 0 auto;
        padding:5%;
        overflow:hidden;
        }
    
        .midasi01 img{
            max-width: 70%;
        }
    
        .midasi02 img{
            max-width: 50%;
        }
    
        h1{
            font-size: 24px;
        }
    
        h2{
            font-size: 20px;
        }
    
    }
    
    
    
    /*-------------------------トップページPC用----------------------------*/
    
    /* 共通 */
    
    a,
    a:link,
    a:visited,
    a:hover,
    a:active {
    color: #00043c;
    text-decoration: none;
    }
    
    #toppage h2 {
    font-size:18px;
    font-weight:500;
    color: #dd2109;
    }
        
    #toppage h3 {
    font-size:18px;
    font-weight:500;
    line-height: 4rem;
    letter-spacing: 0.32rem;
    }
    
    
    /* スライドショー */
    #slideshow {
        position: relative;
        max-width:  1200px; /* 画像の横幅に合わせて記述 */
        height: 800px; /* 画像の高さに合わせて記述 */
        margin:14.286% 0;
    }
    
     #slideshow img {
    position: absolute;
    top: 0;
    left:0;
    z-index: 8;
     }
    
     #slideshow img.active {
    z-index: 10;
     }
    
     #slideshow img.last-active {
    z-index: 9;
     }
    
    #slideshow img{
    border-radius: 4vw;
    }
    
    
    /* ひなた町へようこそ */
    
    #toppage .box01{
    margin-bottom: 20%;
    text-align: center;
    padding:0 14.286%
    }
    
    #toppage .box01 .midasi01{
    display: flex;
    justify-content: center;
    margin-bottom:4.762%;
    }
    
    #toppage .box01 h3{
    text-align: center;
    }
    
    #toppage .box01 h2{
    font-size: 24px;
    margin-top: 2%;
    text-align: end;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-style:dotted;
    }
    
    
    /* もっとみるボタン */
    #toppage .box02 .btn{
    width:60%;
    border: 4px solid #dd2109;
    background-color: #dd2109;
    border-radius: 5vw;
    transition: 1s;
    text-decoration: none;   
    transition: 0.3s;
    margin: 0%;
    padding: 3%;
    transition: 1s;
    }
    
    
    #toppage .btn h3{
    color:#FEFBF7;
    text-align: center;
    }
    
    #toppage .box02 .btn:hover{
    background-color: #FEFBF7;;
    transition: 1s;
    }
    
    #toppage .btn h3:hover{
    color:#dd2109;
    }
    
    #toppage .box02{
    background-color: #ffffff;
    border:12px solid #dd2109;
    border-radius: 4vw;
    box-sizing: border-box;
    margin-bottom:20%;
    padding:2.432%;
    position:relative;
    }
    
    #toppage .box02::before{
    content: '';
    position: absolute;
    top:12px;
    left:12px;
    right: 12px;
    bottom: 12px;
    border: 6px solid #dd2109;
    border-radius: 4vw;
    pointer-events: none;
    }
    
    /* あそぶ */
    
    #toppage .box02 h3{
    line-height: 2.5em;
    }
    
    
    #toppage .image img{
    border-radius: 4vw;
    width: 100%;
    }
    
    #toppage .box02 .midasi01{
    position: absolute;
    top:-15%;
    right: 0%;
    }
    
    #toppage .box02{
    display: flex;
    }
    
    #toppage .asobu .box02 .box{
    width: 30%;
    margin:12% 1.432% 0 3.432%;
    }
    
    #toppage .box02 .box a{
    display: flex;
    justify-content: center;
    margin-top: 6%;
    }
    
    
    #toppage .box02 .image{
    width: 70%;
    }
    
    
       
    /* たべる */
    
    #toppage .taberu .box02 .midasi01{
    position: absolute;
    top:-15%;
    left: 0%;
    }
    
    #toppage .taberu .box02{
    display: flex;
    flex-direction: row-reverse;
    }
    
    #toppage .taberu .box02 .box{
    width: 30%;
    margin:12% 2.432% 0 2.432%;
    }
    
    
    /* とっておき */
    
    
    #toppage .totteoki .box02 .image{
    width: 100%;
    }
    
    #toppage .totteoki .box02 .midasi01{
    width:70% ;
    position: absolute;
    top:-15%;
    left: 15%;
    }
    
    /* こんなとこ、お問い合わせ */
    #toppage .box03{
    width: 100%;
    display: flex;
    justify-content: space-between;
    }
    
    #toppage .box03 .box02{
    width:47.5%;
    aspect-ratio: 1/1;
    background-color: #FEFBF7;
    border: 12px solid #00043c;
    padding:2.432%;
    }
    
    #toppage .box03 .box02::before{
    border: 6px solid #00043c;
    }
    
    /* こんなとこ */
    #toppage .box03 .about{
    position: relative;
    width: 100%;
    }
    
    #toppage .box03 .about .image{
    width: 100%;
    }
    
    #toppage .box03 .about .midasi01{
    width:60%;
    position: absolute;
    top:32.5%;
    left:23%;
    }
    
    #toppage .box03 .about .midasi02{
    width: 90%;
    position: absolute;
    top:43%;
    right:7.5%;
    }
    
    
    /* お問い合わせ */
    
    #toppage .box03 .contact{
    position: relative;
    width: 100%;
    }
    
    #toppage .box03 .contact .midasi01{
    width: 70%;
    position: absolute;
    top:33%;
    left:20%;
    }
    
    #toppage .box03 .contact .icon{
    width:30%;
    position: absolute;
    top:45%;
    right:35%;
    }
    
    
    
/* SP用 */
@media only screen and (width<500px)  {

    #wrapper{
    max-width: 100%;
    margin: 0 auto;
    }
        
    #slideshow{
    margin-bottom:0%;
    width: 100%;
    height: 100%;
    }
        
    .mainimg img{
    border-radius: 4vw;
    }
    
    #toppage{
        overflow: hidden;
    }
    #toppage h3 {
        font-size:16px;
    }

    /* ようこそ */
    
    #toppage .box02 .image{
    border-radius: 8vw;
    }
    
    #toppage .box01 h3{
    text-align:start;
    line-height: 2.1rem;
    letter-spacing: 0.18rem;
    }

    #toppage .box01 h2{
        font-size: 20px;
    }

    #toppage .box01 h2{
    text-align: center;
    }
        
        
    #toppage .box02 h3 {
    line-height: 2.1rem;
    letter-spacing: 0.18rem;
    }
        
    #toppage .box01{
    padding:85% 4.286% 4.286% 4.286%;
    }
    
    #toppage .box02{
    margin-bottom:33.333%;
    border:6px solid #DD2109;
    border-radius: 8vw;
    }
    
       
    #toppage .box02::before{
    top:6px;
    left:6px;
    right: 6px;
    bottom: 6px;
    border: 3px solid #dd2109;
    border-radius: 8.065vw;
    pointer-events: none;
    }
    
    #toppage .box02 .box .btn{
    border-radius: 8.065vw;
    }
    
    
    #toppage .box02 .image img{
    border-radius: 8.065vw;
    }
        
    /* あそぶ */
    
    #toppage .asobu .box02 .midasi01{
    width: 90%;
    top:-8%;
    left:18%;
    }
    
            
        
    #toppage .asobu .box02{
    display:block;
    padding:5%;
    }
        
    #toppage .asobu .box02 .box{
    width: 100%;
    margin:0;
    padding: 4.762% 4.762% 0 4.762%;
    }
        
    #toppage .box02 .image{
    width: 100%;
    }
    
        
    #toppage .box02 .btn{
    margin-top: 3%;
    }
        
     
    /* たべる */
        
    #toppage .taberu .box02 .midasi01{
    width: 90%;
    top:-8%;
    left:18%;
    }
            
    #toppage .taberu .box02{
    display:block;
    padding:5%;
    }
            
    #toppage .taberu .box02 .box{
    width: 100%;
    margin:0;
    padding: 4.762% 4.762% 0 4.762%;
    }
    
    #toppage .box02 .image{
    width: 100%;
    }
    
    
    #toppage .box .btn{
    border-radius: 8vw;;
    }
        
    /* とっておき */
    
    #toppage .totteoki .box02 .midasi01{
    width: 140%;
    left: 0.5%;
    top:-20%;
    }
        
    #toppage .totteoki .box02{
    padding:5%;
    }
        
    /* こんなとこ、お問い合わせ */
    #toppage .box03{
    display: block;
    }
    
    #toppage .box03 .box02{
    width: 100%;
    margin-bottom:33.333%;
    border:6px solid #00043C;
    }
    
       
    #toppage .box03 .box02::before{
    top:6px;
    left:6px;
    right: 6px;
    bottom: 6px;
    border: 3px solid #00043C;
    pointer-events: none;
    }
    
    
    
    /* こんなとこ */
    
    #toppage .box03 .about .box02{
    width: 100%;
    margin-right: 0;
    padding: 5%;    
    }
    
    #toppage .box03 .about .midasi01{
    width: 60%;
    left: 30%;
    }
    
    #toppage .box03 .about .midasi02{
    width: 150%;
    right: 13%;
    }
    
    #toppage .box03 .about{
    margin-right:0;
    }
    
    
        
    /*お問い合わせ  */
    #toppage .box03 .contact .box02{
    width: 100%;    
    }
    
    #toppage .box03 .contact .midasi01{
    width: 100%;
    left:14%;
    }
    
    #toppage .box03 .contact .icon{
    width: 30%;
    left:33%;
    }
    
    }
    
       
    /* ------------------------たべるPC用ページ--------------------------- */
    
    #taberu .box01{
        margin-bottom: 14.268%;    
        }
        
        #taberu h1{
        text-align: center;
        }
        
        #taberu p{
        color: #00043C;
        font-size: 16px;
        line-height: 2.5;
        letter-spacing: 0.20em;
        }
        
        #taberu .zabuton{
        max-width: 100%;
        background-color: #dd2109;
        padding: 2.439%;
        margin-bottom:4.762%;
        }
        #taberu .box01 img{
        border-radius: 4vw;
        }
        
        #taberu .box01 .box01-1{
        margin-bottom:4.762%;
        max-width: 1200px;
        }
        
        #taberu .box01-2{
        display: flex;
        margin-bottom: 4.762%;
        }
        
        #taberu .box01 .text-box{
        width: 55%;
        }
        
        #taberu .box01 .box01-3{
        width: 45%;
        margin-right: 4.762%;
        }
        
        #taberu .box01 .box01-3 img{
        width: 100%;
        height: 100%;
        }
        
        #taberu .box01 .text-box .box{
        margin-top: 4.762%;
        }
        
        #taberu .box01-4{
        display: flex;
        }
        
        #taberu .box01 .info{
        border:4px dotted #00043C;
        border-radius: 4vw;
        text-decoration: dotted;
        padding:4.762%;
        width: 45%;
        margin-right: 4.762%;
        }
        
        #taberu .box01 .info li{
        list-style-type: none;
        line-height: 2;
        }
        
        #taberu .box01-5{
        width: 55%;
        display: flex;
        justify-content: space-between;
        }
        
        #taberu .box01-5 .box1{
        margin-right:4.762%;
        }
        
        #taberu .box01-5 .box1 img{
        width: 100%;
        height: 100%;
        border-radius: 3vw;
        }
        
        #taberu .box01-5 .box2 img{
        width: 100%;
        height: 100%;
        border-radius: 3vw;
    }
        
        
        
        /* たべるsp用500px以下 */
        
        @media only screen and (width<500px) {
        
        #taberu .box01-2{
        display: block;
        margin-bottom: 4.762%;
        }
        
        #taberu .box01 .box01-3{
        width: 100%;
        }
        
        
        #taberu .box01 .text-box{
        width: 100%;
        }
        
        #taberu .box01-4{
        flex-direction:column-reverse
        }
        
        #taberu .box01-5{
        width: 100%;
        }
        
        #taberu .box01 .text-box h2{
        margin-top: 4.762%;
        }
        
        #taberu .box01 .info{
        margin-top: 4.762%;
        width: 100%;
        }
        
    }
        
    
    /*-------------------------あそぶのページPC用----------------------*/
    
    
    #asobu h1{
        line-height: 1.5em;
    }
    
    #asobu .box01{
        display: flex;
        margin-bottom: 4.762%;
    }
    
    #asobu .zabuton01{
        max-width: 570px;
        background-color: #dd2109;
        padding: 0.9%;
        padding-left: 3.3%;
        margin-bottom: 6%;
    }
    
    #asobu .box01 img{
        border-radius: 8.065%;
    }
    
    #asobu .box02{
        margin-right: 4.762%;
    }
    
    #asobu .box03{
        display: flex;
        margin: 0 0 14.286% 0;
    }
    
    #asobu .box03 img{
        border-radius: 8.065%;
    }
    
    #asobu .box04{
        max-width: 570px;
    }
    
    #asobu .box05{
        margin-right: 4.762%;
    
    }
    
    #asobu .box06{
        display: flex;
        margin-bottom: 4.762%;
    }
    
    #asobu .box06 img{
        border-radius: 8.065%;
    }

    #asobu .asobup{
        margin: 0 0 14.286% 0;
    }
    
    /*あそぶSP用*/
    
    @media only screen and (width<500px)  {
        #asobu h1{
            text-align: center;
        }
    
        #asobu .box01{
            display: block;
            margin-bottom: 4.762%;
        }
        
        #asobu .zabuton01{
            max-width: 100%;
            background-color: #dd2109;
            padding: 0.9%;
            padding-left: 3.3%;
            margin-bottom: 6%;
        }
        
        #asobu .box02{
            margin-right: 0;
            margin-bottom: 4.762%;
        }
        
        #asobu .box03{
            display: flex;
            margin: 0 0 14.286% 0;
        }
        
        #asobu .box03 img{
            border-radius: 8.065%;
        }
        
        #asobu .box04{
            max-width: 570px;
        }
        
        #asobu .box05{
            margin-right: 4.762%;
    
        }
        
        #asobu .box06{
            display: flex;
            margin-bottom: 4.762%;
        }
    
     }
    
    
    /*----------------------とっておきページPC用----------------------*/

    
    #favorite section{
        margin: 0 0 14.286% 0;
    }
    
    
    #favorite .favimg{
        margin-bottom: 4.762%
    }
    
    #favorite .favimg img{
        border-radius: 4vw;
    }
    
    #favorite .midasi01{
        display: flex;
        justify-content:left;
    }
    
    #favorite h1{
        text-align: center;
        }
    
    #favorite .box01{
        display: flex;
        margin-bottom: 4.762%;
    }
    
    #favorite .box02{
        display: flex;
        justify-content: end;
    }
    
    #favorite .position{
        position: relative;
    }
    
    #favorite .zabuton01{
        max-width: 17.921%;
        background-color: #dd2109;
        padding: 0.9% 3%;
        position: absolute;
        top: -2.439%;
        left: 2.439%;
    }
    
    #favorite .position02{
        position: relative;
    }
    
    #favorite .zabuton02{
        max-width: 17.921%;
        background-color: #dd2109;
        padding: 0.9%;
        position: absolute;
        top: -2.439%;
        left: 2.439%;
    }
    
    #favorite .box03{
        max-width: 45%;
        margin-top: 6.977%;
    }
    
    #favorite .box04{
        max-width: 45%;
        margin-right: 4.762%;
        margin-top: 7.692%;
    }
    
    #favorite .sukima{
        margin-right: 4.762%; 
    }
    
    #favorite .box01 img,#favorite .box02 img{
        border-radius: 3vw;
    }
    
    #favorite .position03{
        display: none;
    }
    
    /*とっておきPS用*/
    @media only screen and (width<500px)  {
    
        #favorite .midasi01 .img{
            max-width: 100%;
        }
    
        #favorite section{
            margin: 0 0 14.286% 0;
        }
        
    
        #favorite .favimg{
            margin-bottom: 4.762%
        }
        
        #favorite .favimg img{
            border-radius: 4vw;
        }
        
        
        #favorite .box01{
            flex-direction: column-reverse;
            margin-bottom: 4.762%;
        }
        
        #favorite .box02{
            flex-direction: column-reverse;
            justify-content: end;
        }
        
        #favorite .position{
            position: static;
        }
        
        #favorite .zabuton01{
            max-width: 100%;
            background-color: #dd2109;
            padding: 0.9% 3%;
            position: static;
            margin-bottom: 4.762%;
        }
        
        #favorite .position02{
            position: static;
        }
        
        #favorite .zabuton02{
            max-width: 100%;
            background-color: #dd2109;
            padding: 0.9%;
            position: static;
            margin-bottom: 4.762%;
        }
        
        #favorite .box03{
            max-width: 100%;
            margin: 0%;
        }
        
        #favorite .box04{
            max-width: 100%;
            margin: 0 0 4.762% 0;
        }
        
        #favorite .sukima{
            margin-right: 4.762%; 
        }
        
        #favorite .box01 img,#favorite .box02 img{
            display: none;
        }
    
        #favorite .position03{
            display: block;
            display: flex;
            margin-bottom: 4.762%;
        }
    
        #favorite .position03 img{
            border-radius: 3vw;
        }
    
    }
    
    /*-------------------aboutページPC用---------------------------*/
    
    #about{
        letter-spacing: 0.32rem;
        line-height: 2.5rem;
    }
    #about .midasi02{
        margin: 0 0 35% 0;
    }
    #about .box01{
        position: relative;
        margin-bottom: 57.143%;
    }
    #about .box01 .text{
        background-color: #DD2109;
        padding: 4.762%;
        margin: 4.762%;
    }
    #about .box01 .ten{
        border: 0.4rem dotted #FEFBF7;
        padding: 14.286% 4.762%;
    }
    #about .box01 .text01 p,#about .box01 .text02 p,#about .box01 .text03 p{
        font-weight: 600;
    }
    #about .box01 .text01 p{
        font-size: 1.8rem;
        color: #FEFBF7;
        margin: 0 0 5.263% 0;
    }
    #about .box01 .text02{
        background-color: #FEFBF7;
        border-radius: 2vw;
        padding: 4.762%;
        margin: 0 0 2.703% 0;
    }
    #about .box01 .text03{
        background-color: #FEFBF7;
        border-radius: 2vw;
        padding: 4.762%;
    }
    #about .box01 img{
        border-radius: 4vw;
    }
    #about .box01 .img01{
        position: absolute;
        top: -26%;
        left: 0;
    }
    #about .box01 .img02{
        position: absolute;
        bottom: -28%;
        right:  0;
        z-index: 4;
    }
    #about .box01 .img03{
        position: absolute;
        bottom: -52%;
        right: 30%;
        z-index: 3;
    }
    
    @media only screen and (max-width:500px) {
    #about{
        padding: 5%;
        margin: 0 0 50% 0;
    }
    #about .box01{
        position: relative;
        margin-bottom: 60%;
    }
    #about .midasi02{
        margin: 0 0 80% 50%;
        flex-shrink: 0;
    }
    #about .midasi02 img{
        max-width: 100%;
    }
    #about .box01 .text01{
        margin: 0 0 10.714% 0;
    }
    #about .box01 .text01 p{
        font-size: 1.4rem;
        letter-spacing: 0.3rem;
        line-height: 2.5rem;
    }
    #about .box01 .text02{
        margin: 0 0 5.66% 0;  
    } 
    #about .box01 .text02,#about .box01 .text03{
        padding: 10.714%;
    }   
    #about .box01 .img01,#about .box01 .img02,#about .box01 .img03{
        max-width: 70%;
    }
    #about .box01 .img01{
        position: absolute;
        top: -10%;
        left: 0;
    }
    #about .box01 .img02{
        position: absolute;
        bottom: -10%;
        right:  0;
        z-index: 4;
    }
    #about .box01 .img03{
        position: absolute;
        bottom: -20%;
        right: 30%;
        z-index: 3;
    }
    }
    
    
    
    /* --------------- 道のり --------------------- */
    #access{
        letter-spacing: 0.2rem;
        line-height: 1.5em;
    }
    #access .midasi01{
        margin: 14.286% 0 14.286% 0;
    }
    #access .map{
        margin: 0 0 7.692% 0;
    }
    #access .info {
        display: flex;
        margin: 0 0 14.286% 0;
    }
    
    /* 左 */
    #access .info .box01{
        width:calc((100% - 4.762%)/2);
        margin: 0 4.762% 0 0;
    }
    #access .info .box01 .address{
        border-radius: 2vw;
        border: 4px dotted #00043C;
        background-color: #ffffff;
        padding: 9.524%;
        margin: 0 0 9.524% 0;
    }
    #access .info .box01 .address .text01{
        background-color: #DD2109;
        margin: 0 0 9.524% 0;
        display: inline-block;
    }
    #access .info .box01 .address .text01 p{
        color: #FEFBF7;
        font-weight: 700;
        padding: 0 1rem;
    }
    #access .info .box01 .address .text02{
        margin: 0 0 4.762% 0;
    }
    #access .info .box01 .address .text02 p{
        letter-spacing: 0.3rem;
        line-height: 1.8rem;
    }
    #access .info .box01 .address .text03 p{
        letter-spacing: 0.3rem;
        line-height: 1.5rem;
    }
    #access .info .box01 .address .text03 span{
        font-size: 0.8rem;
    }
    #access .info .box01 .address .btn{
        display: flex;
        justify-content: flex-end;
    }
    #access .info .box01 .address .btn p{
        font-size: 0.8rem;
        font-weight: 500;
        color: #DD2109;
    }
    #access .info .box01 .address .btn a:link{
        text-decoration: none;
        color: #DD2109;
        text-decoration: underline;
        text-decoration-color: #DD2109;
        text-underline-offset: 0.6rem;
    }
    #access .info .box01 .address .btn a:visited{
        color: #DD2109;
    }
    #access .info .box01 .address .btn a:hover{
        opacity: 0.8;
        text-decoration-thickness: 0.12rem;
    }
    #access .info .box01 img{
        border-radius: 4vw;
    }
    
    /* 右 */
    #access .info .box02{
        width:calc((100% - 4.762%)/2);
        border-radius: 2vw;
        border: 3px solid #DD2109;
        background-color: #ffffff;
        padding: 2.439% 4.762% 4.762% 4.762%;
    }
    #access .info .box02 .midasi{
        margin: 0 0 4.762% 0;
    }
    #access .info .box02 .midasi p{
        font-size: 2.25rem;
        color: #DD2109;
        font-weight: 700;
    }
    #access .info .box02 .info01{
        border-bottom: 2px solid #00043C;
        padding: 0 0 9.524% 0;
        margin: 0 0 9.524% 0;
    }
    #access .info .box02 .info01 .text01{
        display: flex;
        justify-content: space-between;
        margin: 0 0 9.524% 0;
    }
    #access .info .box02 .info02 .text01{
        display: flex;
        justify-content: space-between;
        margin: 0 0 14.286% 0;
    }
    #access .info .box02 .info01 .text01 p,#access .info .box02 .info02 .text01 p{
        letter-spacing: 0.3rem;
        line-height: 1.5rem;
    }
    #access .info .box02 .way{
        color: #DD2109;
        font-size: 1.8rem;
        font-weight: 700;
    }
    #access .info .box02 .time{
        font-size: 0.8rem;
    }
    #access .info .box02 .text02{
        display: flex;
    }
    
    /*道のりSP用*/
    
    @media only screen and (max-width:500px) {
    #access{
        padding: 5%;
    }
    #access .midasi01 img{
        max-width: 70%;
    }
    #access .map{
        margin: 0 0 16.667% 0;
    }
    #access .info{
        flex-wrap: wrap;
        flex-direction: column;
        margin: 0 0 28.571% 0;
    }
    #access .info .box01{
        width: 100%;
        margin: 0;
        order: 2;
    }
    #access .info .box01 .img{
        margin: 0 0 10.714% 0;
    }
    #access .info .box02{
        width: 100%;
        order: 1;
        margin: 0 0 10.714% 0;
        padding: 2.913% 10.714% 10.714% 10.714%;
    }
    #access .info .box02 .way{
        font-size: 1.4rem;
        font-weight: 700;
    }
    #access .info .box01 .address .text03{
        margin: 0 0 4.762% 0;
    }
    }
    
    /* ------------------ お問い合わせページPC用------------------- */
    #contact{
        letter-spacing: 0.2rem;
        line-height: 1.5em;
    }
    #contact .midasi{
        background-color: #DD2109;
        padding: 0.5rem 1rem;
        margin: 200px calc(50% - 50vw);
        padding: 50px calc(50vw - 50%);
        width: 100vw;
        margin-bottom:7.692%;
    }
    #contact .midasi p{
        color: #FEFBF7;
        font-size: 2.25rem;
        font-weight: 700;
    }
    
    /* インフォ */
    #contact .info{
        border: 3px solid #DD2109;
        border-radius: 4vw;
        padding: 2.439% 2.439% 1.235% 2.439%;
        margin: 0 0 14.286% 0;
    }
    #contact .info p{
        color: #DD2109;
    }
    #contact .info .box01{
        display: flex;
        justify-content: center;
        padding: 0;
    }
    #contact .info .box02{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #contact .info .box03{
        display: flex;
    } 
    #contact .info .box02 .number p{
        font-size: 2rem;
        padding: 0;
        letter-spacing: 0.8rem;
        margin: 0 0.8rem 0 0;
    }
    #contact .info .box02 .number p,#contact .info .box02 span{
        font-weight: 800;
    }
    /* フォーム */
    #contact .form{
        max-width: 1200px;
        margin: 0 0 14.286% 0;
    }
    #contact table{
        width: 100%;
    } 
    #contact .form th{
        width: 25%;
    }
    #contact .form th,#contact .form td{ 
        font-weight: 600;
        padding: 0 0 4.762% 0;
        vertical-align: top;
    }
    #contact .form span{
        background-color: #DD2109;
        border-radius:  0.5vw;;
        font-size: 0.8rem;
        color: #FEFBF7;
        padding: 1% 1% 2% 2%;
        margin: 0 0 0 10%;
    }
    input[type="text"],input[type="email"] { 
        width:100%;
        border-radius: 0.5vw;
        border: 2px solid #00043C;
        font-size: 1rem;
        font-family: "Noto Sans JP", sans-serif;
        padding: 2.439%;
    }
    input[type="text"]:focus,input[type="email"]:focus{
        outline: none;
        border:2px solid #DD2109;
    }
    #contact .form textarea{
        width:100%;
        height: 200px;
        border-radius: 0.5vw;
        border: 2px solid #00043C;
        font-size: 1rem;
        font-family:  "Noto Sans JP", sans-serif;
        resize: none;
        padding: 2.439%;
    }
    #contact .form textarea:focus{
        outline: none;
        border-color: #DD2109;
    }
    
    /* ボタン */
    #contact .form .formbtn{
        text-align: center;
    } 
    #contact .form .btn{   
        text-decoration: none;
        border: 3px solid #DD2109;
        background-color: #DD2109;
        border-radius: 4vw;
        color: #FEFBF7;
        font-weight: 600;
        letter-spacing: 0.2rem;
        text-indent: 0.5em;
        padding: 1rem 2.5rem;
        cursor: pointer;
        transition: 0.3s;
    }
    #contact .form .formbtn :hover{
        background-color: #ffffff;
        color: #DD2109;
    }
    
    /*お問い合わせSP用*/
    @media only screen and (max-width:500px) {
    #contact{
        padding: 5%;
    }
    /* インフォ */
    #contact .midasi{
        margin: 100px calc(50% - 50vw);
        padding: 25px calc(50vw - 50%);
        margin-bottom:7.692%;
    }
     #contact .info{
        border-radius: 4vw;
        padding: 5.66%;
        margin: 0 0 14.286% 0;
    }
    #contact .info .box01{
        margin: 0 0 5.66% 0;
    }
    #contact .info .box02{
        display: block;
    }
    #contact .info .box03{
        align-items: center;
    }
    #contact .info .box02 .number p{
        font-size: 1rem;
        letter-spacing: 0.5rem;
    }
    #contact .info .box02 .acceptance{
        display: flex;
        justify-content: flex-end;
    }
    #contact table{
        width: 100%;
    } 
    #contact .form th{
        width: 100%;
    }
    
    /* フォーム */
    #contact .tabledesign th, #contact .tabledesign td{
        width: 100%;
        display: block;
    }
    #contact .tabledesign td{
    padding: 0 0 10.714% 0;
    }
    #contact .form span{
        border-radius:  1.5vw;;
        padding: 1% 1% 1.5% 1.5%;
        margin: 0 0 0 5%;
    }
    
    /* ボタン */
    #contact .form .btn{ 
        border-radius: 6vw;
    }
    }