@charset "utf-8";

/*===============================================
 ●mobile.css  画面の横幅が768pxまで
===============================================*/

@media screen and (max-width: 768px) {
    /*-------------------------------------- 共通 */
    html,
    body {
        /*background-image: none;
            background: url(../images/content_bg_sp.jpg) center;
            -webkit-text-size-adjust: 100%;*/
        min-width: 100%;
    }
    p {
        font-size: 16px;
    }
    .pc {
        display: none !important;
    }
    .sp {
        display: block;
    }
    img {
        max-width: 100%;
        height: auto;
        width/***/
        : auto;
    }
    .img-responsive {
        width: 100%;
        height: auto;
    }
    header,
    .wrap,
    .container {
        width: 100%;
        min-width:inherit;
        /*overflow:hidden;*/
    }
    .container-inner {
        padding: 0;
        width: 90%;
        min-width: inherit;
    }
    .under-header {
        padding-top: 47px;
    }
    /*-------------------------------------- header */
    header{
        position:fixed;
        background:#eae4d1;
        width: 100%;
        z-index: 5000;
    }
    header p a {
        font-family: "EB Garamond", 'Noto Sans JP', serif;
        font-weight: 400;
        font-optical-sizing: auto;
        font-style: normal;
        font-size: 14px;
        margin: 0;
        letter-spacing: 0.04em;
    }
    header .container-inner.sp{
        width:100%;
        min-width:inherit;
        margin: 0;
        padding:5px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    header ul.nav{
        margin-left:5px;
    }
    .header-logo{
        width:60%;
    }
    .header-logo img{
        width:150px;
        height:auto;
    }
    .header-btn{
        width:70px;
        margin-right:40px;
    }
    .header-btn .btn-bk{
        width:100%;
        font-size:12px;
        padding:5px;
        margin-bottom:0;
    }
    header ul.nav li{
        font-size:14px;
        margin:0 5px;
    }

    /*header ul{
        display: flex;
        justify-content: flex-start;
        margin-left:10px;
    }*/

    header ul.sns{
        position:absolute;
        top:3px;
        right:50px;
    }
    header ul.sns img{
        max-width:inherit;
        width:24px;
        height:24px;
        margin:0 5px;
    }

    /*-------------------------------------- global-nav */
    .global-nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        color: #FFF;
    }
    .global-nav .button-toggle {
        background: #eae4d1;
        float: right;
        padding: 15px 15px 10px 15px;
        position: relative;
    }
    .global-nav .icon-bar {
        border-radius: 3px;
        display: block;
        height: 3px;
        width: 44px;
        background: #8f3f5d;
    }
    .global-nav .icon-bar+.icon-bar {
        margin-top: 7px;
    }
    .global-nav .nav-menu {
        width: 100%;
        height: auto;
        clear: both;
        z-index: 999;
        position: absolute;
        top: 46px;
        background:#FFF;
        padding-top:30px;
    }
    .global-nav .nav-menu li {
        text-align: center;
        background: #FFF;
    }
    /*.global-nav .nav-menu li:last-child {
        height: 43px;
    }*/
    .global-nav .nav-menu li img{
        width:70px;
        height:auto;
        margin:20px 0;
    }
    .global-nav .nav-menu li a {
        font-family: "EB Garamond", 'Noto Sans JP', serif;
        display: block;
        color: #222222;
        padding: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 1);
        border-right: 1px solid rgba(255, 255, 255, 1);
        background: #FFF;
        font-size: 18px;
        letter-spacing:0.04em;
    }
    .sp-menu-sns{
        display:flex;
        justify-content:center;
    }
    .global-nav .nav-menu .sp-menu-sns{
        padding:10px 0;
    }
    .global-nav .nav-menu .sp-menu-sns li{
        margin:0 5px;
    }
    .global-nav .nav-menu .sp-menu-sns li img{
        width:35px;
        height:auto;
    }
    
    #menuButton {
        display: block;
        width: 42px;
        height: 42px;
        position: fixed;
        top: 0;
        right: 5px;
        z-index: 3;
    }
    #menuButton span {
        display: block;
        background: #222222;
        width: 24px;
        height: 2px;
        position: absolute;
        left: 9px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
    }
    #menuButton span:first-child {
        top: 12px;
    }
    #menuButton span:nth-child(2) {
        margin-top: -1px;
        top: 50%;
    }
    #menuButton span:last-child {
        bottom: 12px;
    }
    #menuButton.active span:first-child {
        -webkit-transform: translateY(8px) rotate(45deg);
        -moz-transform: translateY(8px) rotate(45deg);
        -ms-transform: translateY(8px) rotate(45deg);
        transform: translateY(8px) rotate(45deg);
    }
    #menuButton.active span:nth-child(2) {
        opacity: 0;
    }
    #menuButton.active span:last-child {
        -moz-transform: translateY(-8px) rotate(-45deg);
        -ms-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
    }
    /*-------------------------------------- footer */
    footer{
        padding:0 0 3% 0;
    }
    
    footer img{
        width:33%;
        height:auto;
    }
    
    footer p{
        margin-top:10%;
        font-size:14px;
        line-height:2;
    }
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
    /*-------------------------------------- button */
    #index .btn.sp {
        margin-top: -16px;
        padding: 10px 0;
    }
    .btn {
        margin-bottom: 5px;
    }
    .btn-xlg {
        width: 70%;
        font-size: 18px;
        padding: 12px 0 14px 0;
        border-radius: 34px;
    }
    
    /*-------------------------------------- table */
    .table th,
    .table td {
        width: 100% !important;
        display: block;
        text-align: left;
        padding: 5px 10px;
    }
    .table.login {
        width: 100%;
    }
    #page-top {
        bottom: 10px;
        z-index: 10;
    }

    /*  共通  */
    h1{
        font-size:38px;
        margin-top:15%;
    }

    /*/**********************************************************各ページ**/

    /*-------------------------------------- index */
    #index .wrap{
    padding-top:45px;
}
   #index h2{
        font-size:42px;
    }
    #index h3{
        font-size:20px;
    }
    .hero{
        padding-top:30px;
    }
    .hero>img{
        width:100%;
        height:auto;
    }
    .hero div{
        width:45%;
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .hero div img{
        width:100%;
        height:auto;
    }
    .slider {
        display: block;
        width: 100%;
        content: "";
        height: 95svh;
        padding-top: calc(7 / 12 * 100%);
        position: relative;
    }
    .intro .container{
        background-image:none;
        padding-top:30px;
    }
    .intro p{
        width:100%;
    }
    .intro h4 {
       font-size:18px;
    }
    .intro .container-inner>img{
        position:inherit;
        top:inherit;
        right:inherit;
        width:100%;
        height:auto;
    }
    .intro02 p{
        width:100%;
        margin:40px 0;
    }

    /* top メニュー紹介　*/
    .top-menu{
        padding:40px 0;
    }
    .top-menu p{
        width:100%;
    }
    .top-curry{
        position:relative;
        padding-top:40px;
    }
    .top-curry h4{
        width:100%;
        padding-left:0;
    }
    .top-curry p{
         width:100%;
        padding-left:0;
        margin-bottom:30px;
    }
    #index .top-curry .container>h5{
        position:inherit;
        top:inherit;
        right:inherit;
        z-index:2;
        text-align: right;
        width:90%;
        margin:0 auto;
    }
    .top-curry .container>img{
        position:inherit;
        bottom:inherit;
        right:inherit;
        width:100%;
    }
    .top-food{
        background:#eae4d1;
    }
    .top-food{
        display: inherit;
    }
    .top-food div:first-child{
        width:100%;
        background:url(../images/top/202507/hambarger.jpg) no-repeat bottom #EEEEEE;
        background-size:100%;
        padding-top:20px;
        height:90vh;
    }
    .top-food div:first-child h5{
        padding-left:0;
        width:90%;
        margin:20px auto 0 auto;
    }
    .top-food div:first-child p{
        padding-left:0;
        width:90%;
        margin:20px auto 0 auto;
    }
    .top-food div:last-child{
        width:100%;
        padding:0 0 30px 0;
    }
    .top-food div:last-child h4,
    .top-food div:last-child p{
        padding-left:0;
        width:90%;
        text-align: justify;
        margin:0 auto;
    }
    .top-food div:last-child h4{
        margin-top:30px;
    }
    .top-food div:last-child p{
        margin-top:20px;
    }
    .top-calzone{
        position:relative;
        background:url(../images/top/bg02.png) no-repeat top left;
        background-size:50%;
        height:auto;
    }
    .top-calzone div{
        width:90%;
        text-align:right;
        padding-top:30px;
        margin:0 auto;
    }
    .top-calzone div p{
        text-align: left;
    }
    .top-calzone img{
        position:inherit;
        top:inherit;
        right:inherit;
        height:inherit;
        z-index:1;
        width:100%;
    }
    /*.top-sweets-drink{
        background:#eae4d1;
        position:relative;
    }
    .top-sweets-drink>img{
        position:inherit;
        z-index:1;
        width:100%;
        height:auto;
    }
    .top-sweets-drink .container-inner{
        position:inherit;
        z-index:5;
        top:inherit;
        left:inherit;
        width:100%;
        padding:40px 0 0 0;
    }
    .top-sweets-drink .container-inner h4,
    .top-sweets-drink .container-inner h5,
    .top-sweets-drink .container-inner p,
    .craft-cola h4,
    .craft-cola p{
        width:90%;
        margin:0 auto;
    }
    .top-sweets-drink .container-inner h4,
    .top-sweets-drink .container-inner p,
    .craft-cola h4,
    .craft-cola p{
        margin-top:20px;
    }
    .craft-cola{
        position:inherit;
        bottom:inherit;
        left:inherit;
        width:100%;
        z-index:5;
    }*/
    .top-drink{
        display: inherit;
        justify-content:inherit;
        align-items:inherit;
        padding:30px 0 0 0;
    }
    .top-drink div{
        width:90%;
        text-align: right;
        padding-right:0;
        margin:0 auto;
    }
    .top-drink div p{
        width:100%;
        float:none;
        text-align: justify;
    }
    .top-drink img{
        width:100%;
        margin-top:30px;
    }
    .top-menu-link{
        background:#eae4d1;
        padding:20px 0;
    }
    .top-menu-link .container-inner{
        text-align: right;
    }





    .top-access{
        background:url(../images/top/bg03.png) repeat-y;
        background-size:100%;
        text-align: center;
        padding-bottom:30px;
    }
    #index .top-access h3{
        font-size:32px;
    }
    .top-access .container-inner{
        text-align: right;
        margin-top:20px;
    }
    .top-access iframe{
        width:90%;
        height:400px;
    }

    .shop-info .container{
        display:inherit;
        justify-content: inherit;
        align-items: center;
    }
    .shop-info .container div,
    .shop-info .container>img{
        width:100%;
        text-align: center;
    }
    .shop-info .container div{
        padding:30px 0;
    }
    .shop-info .container div p img{
        width:33%;
    }
    #index .family h3{
        font-size:32px;
    }
    .concept{
        background:url(../images/top/bg04_sp.png) repeat-y;
        background-size:100%;
        padding:60px 5%;
    }
    #index .concept h2{
        font-size:20px;
    }
    .concept div{
        width:87%;
        margin:0 auto;
        text-align: justify;
    }
    

}