@charset "UTF-8";



@keyframes appear-title{
    0%  { opacity: 0; padding-top: 20px; }
    40% { padding-top: 0; margin-top: -20px; opacity: 1; }
    100%{ opacity: 1; }
}
@keyframes appear-main{
    0%  { opacity: 0; padding-top: 90px; }
    40% { padding-top: 0; margin-top: -80px; opacity: 1; }
    100%{ opacity: 1; }
}
@keyframes appear-sub{
    0%  { opacity: 0; transform: translateY(-20px); }
    40% { opacity: 1; transform: translateY(20px); }
    100%{ opacity: 1; }
}
@keyframes flash-1{
    0%  { opacity: 0; }
    38% { opacity: 1; }
    75% { opacity: 0.9; }
    100%{ opacity: 0; }
}
@keyframes rotate-6{
    0%  { transform: translateY(0); }
    50% { transform: translateY(-50px); }
    100%{ transform: translateY(0); }
}
@keyframes appear-motto{
    0%  { transform: translateY(40px); opacity: 0; }
    50% { transform: translateY(-40px) }
    100%{ opacity: 1; }
}
@keyframes shake{ 
    0%  { 
        transform: translate(-50%,0) rotate(0);            
    }
    20% { 
        transform: translate(-50%,0) rotate(6deg);
    }
    40% { 
        transform: translate(-50%,0) rotate(-6deg);
    }
    60% { 
        transform: translate(-50%,0) rotate(6deg);
    }
    80% { 
        transform: translate(-50%,0) rotate(0);
    }
    100%{ 
        transform: translate(-50%,0) rotate(0);
    }
}
@keyframes circle-inner{
    0%  { transform: scale(0); opacity: 1; }
    44% { opacity: 1; }
    100%{ transform: scale(1.1); opacity: 0; }
}
@keyframes is-open-pc{
    0%  { transform: translateY(-10px); opacity: 0; }
    50% { transform: translateY(7px); }
    100%{ opacity: 1; }
}


/*===== COMMON =====*/

body{
    background-color: #FFFFFF;
}
body,section{
    width: 100%;
}
img{
    height:  auto;
}
a:hover{
    cursor: pointer;
}

.curve{
    background-color: #fff;
    border-bottom-left-radius: 1340px 330px;
    border-bottom-right-radius: 1340px 330px;
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
    height: 270px;
    margin-top: -110px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
}


.sp{
    display: none;
}
.sp-360{
    display: none;
}
.sp-600{
     display: none;
}
#footer-link-sp{
    display: none;
}
.nav-sp{
    display: none;
}

/*===== Slick Normalize =====*/

.slick-slide {
    transform: scale(.85);
    transition: 0.3s;
    height: calc(100vw / 3 );
    align-items: center;
    
}
.slick-slide img{
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}
.slick-current {
    transform: scale(1);
    transition: 0.3s;
}
.slick-dots{
    bottom: -50px;
}
.slick-dots li{
    width: 23px;
}
.slick-dots li button::before{
    font-size: 16px;
}




/*==========================
 ヘッダーCSS 
==========================*/
.header-body{
    position: fixed;
    width: 100%;
    border-radius: 0 0 100px 100px;
    background-color: #fff;
    box-shadow: 0px 2px 1px rgb(96 53 44 / 5%);
    z-index: 1000;
    transition: 0.15s;
}
.header-body-open{
    border-radius: 0;
    transition: 0.15s;
    z-index: 1000;
}
.header-wide{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 66%;
    padding-top: 22px;
    padding-bottom: 22px;
    z-index: 2000;
}
.nav-list-main{
    display: flex;
    justify-content: space-between;
    width: 62%;
}
.nav-button div{
    width: 25px;
    height: 3px;
    border-radius: 3px;
}
.nav-button div,.nav-active:hover{
    cursor: pointer;
}
.nav-button div:first-child{
    background-color: #008132;
    margin-bottom: 7.5px;
    transition: 0.3s;
}
.nav-button div:nth-child(2){
    background-color: #C8000F;
    margin-bottom: 7.5px;
    transition: 0.2s;
}
.nav-button div:nth-child(3){
    background-color: #FFC400;
    transition: 0.2s;
}

.nav-active:first-child{
    transform: rotate(45deg) translate(10px,10px);
    transition: 0.4s;
}
.nav-active:nth-child(2){
    opacity: 0;
    transition: 0.4s;
}
.nav-active:nth-child(3){
    transform: rotate(-45deg) translate(5px,-5px);
    transition: 0.4s;
}


.nav-open{
    position: absolute;
    position: fixed;
    top: -100px;
    width: 100%;
    height: 73px;
    background-color: #FFC400;
    z-index: 200;
    transition: 0.2s;
}
.nav-open-active{
    top: 100px;
    transition: 0.2s;
}
.common-menu{
    max-width: 1280px;
    padding: 47px 22px 0 22px;
    margin: 0 auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-effect-active{
    animation: is-open-pc 0.47s ease-in-out ;
    animation-fill-mode: forwards;
    opacity: 0;
}
.pc-effect-active:nth-child(2){
    animation-delay: 0.2s;
}
.pc-effect-active:nth-child(3){
    animation-delay: 0.3s;
}
.pc-effect-active:nth-child(4){
    animation-delay: 0.4s;
}
.pc-effect-active:nth-child(5){
    animation-delay: 0.5s;
}
.pc-effect-active:nth-child(6){
    animation-delay: 0.6s;
}
.pc-effect-active:nth-child(n+7){
    animation-delay: 0.7s;
}


.header-curve{
    width: 100vw;
}
.header-curve img{
    width: 100%;
}

/*外国語*/
.lang_list{
    display: flex;
}
.lang_list li{
    padding-right: 11px;
    padding-left: 11px;
    border-right: 1px solid #8B675F;
}
#header_sns{
    display: flex;
}
#header_sns li{
    padding-left: 10px;
}

/*==========================
  ポップアップウインドウ
==========================*/
.popup{
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.4);
}

.popup-win{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    padding: 45px;
    width: 60%;
    background-color: white;
    border-radius: 30px;
    z-index: 51;
}
.popup-caption{
    font-weight: 700;
    font-size: 2.4rem;
    color: #3B201B;
    line-height: 2;
    text-align: center;
}
.popup-btn{
    display: block;
    font-size: 2rem;
    font-weight: 700;
    padding: 20px;
    background-color: #C8000F;
    color: white;
    border-radius: 50px;
    width: 50%;
    margin: 20px auto 0 auto;
    text-align: center;
    transition: 0.3s;
}
.popup-btn:hover{
    opacity: 0.6;
}


/*==========================
  メインビジュアル
==========================*/
.mainvisual{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 1337px;
    background-image: url(/mankitsu_special_2022/images/main_back_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
h1{
    position: absolute;
    top: 11%;
    left: 50.7%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 996px;
    opacity: 0;
    z-index: 30;
    text-align: center;
}
.main-h1-active{
    animation : appear-title 0.7s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}

.main-body{
    position: absolute;
    top: 26%;
    left: 49%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 375px;
    opacity: 0;
}
.main-body-active{
    animation : appear-title 0.6s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

.main-dish,.main-miso,.main-coffee,.main-soft{
    position: absolute;
    opacity: 0;
}
.main-sub-active{
    animation : appear-main 0.8s ease-in-out;
    animation-fill-mode: forwards;
}
.main-sub-prin-active{
    animation : appear-main 0.8s ease-in-out, shake 0.9s ease-in-out 0.8s;
    animation-fill-mode: forwards;
}


.main-dish{
    top: 40%;
    left: 49%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    width: 756px;
    z-index: 30;
    text-align: center;
}
.main-miso{
    top: 45%;
    left: 50%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 1151px;
    z-index: 30;
    text-align: center;
    animation-delay: 0.1s;
}
.main-coffee{
    top: 29.5%;
    left: 50%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 1151px;
    text-align: center;
    animation-delay: 0.38s;
}
.main-soft{
    top: 25%;
    left: 49%;
    transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 1151px;
    text-align: center;
    animation-delay: 0.25s;
}
h1 img, .main-body img,.main-dish img,.main-miso img,.main-coffee img,.main-soft img{
    width: 100%;
}

/*背景明かり*/
.main-light{
    position: absolute;
    opacity: 0;
}
.main-light-active{
    animation: flash-1 2.4s linear infinite;
}
#light-1{ top: 26%; left: 3.17%; }
#light-2{ top: 13.6%; left: 7%; animation-delay: 1.2s; }
#light-3{ top: 20.1%; left: 10.6%; }
#light-4{ top: 12.59%; left: 15.36%; animation-delay: 0.6s; }
#light-5{ top: 20.18%; left: 17.13%; animation-delay: 0.8s; }
#light-6{ top: 12.66%; right: 13.86%; animation-delay: 1.2s; }
#light-7{ top: 21.44%; right: 12.86%; animation-delay: 0.3s; }
#light-8{ top: 13.87%; right: 7.65%; animation-delay: 0.8s; }
#light-9{ top: 20.98%; right: 3.2%; }



/*==========================
  満喫セットとは？
==========================*/
#about-caption{
    position: relative;
    padding-top: 160px;
    background-color: #fff;
    border-bottom-left-radius: 800px 90px;
    border-bottom-right-radius: 800px 90px;
}

.about-title{
    text-align: center;
    padding-left: 1%;
    margin-bottom: 83px;
}
    .about-title-active{/*anime*/
        animation : appear-sub 0.8s ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.6s;
    }
.about-text{
    text-align: center;
    opacity: 0;
    animation-delay: 0.7s;
}
.about-photo{
    position: absolute;
    opacity: 0;
}
 
    .about-ph-active{
        animation: appear-title 1s ease-in-out;
        animation-fill-mode: forwards;
    }
    #photo-1{ bottom: 18%; left: 8.54%; }
    #photo-2{ bottom: -2%; left: 10.2%; animation-delay: 0.3s; }
    #photo-3{ bottom: 9%; left: 21.5%; animation-delay: 0.15s; }
    #photo-4{ bottom: 8.3%; right: 24.73%; animation-delay: 0s; }
    #photo-5{ bottom: 20.1%; right: 9.9%; animation-delay: 0.3s; }
    #photo-6{ bottom: -1%; right: 13.59%; animation-delay: 0.15s;}


/*Youtube*/
.about-video-card{
    max-width: 956px;
    margin: 0 auto 76px auto;
    border-radius: 25px;
    box-shadow: 1px 1px 1px 0 rgba(73, 35, 29, 0.16);
    text-align: center;
}
.about-video-caption{
    padding-top: 30px;
    padding-bottom: 40px;
}
iframe{
    width: 100%;
    height: 56%;
    border-radius: 25px 25px 0 0;
}



/*==========================
  お選びください
==========================*/
#select{
    background-color: #E7DACB;
    overflow: hidden;
}

/*== ウインドウ部分 ==*/
.select-card-window{
    position: absolute;
        top: -48px;
        left: 23%;
    width: 740px;
    padding: 26px 68px 26px 72px;
    background-color: #E7DACB;
    border-radius: 50px;
    border: 6px solid #37211C;
    text-align: center;
}
.select-card-window img{
    position: absolute;
    top: -32px;
    left: -65px;
}

/*== カードボックス ==*/
.select-card{
    position: relative;
    max-width: 1280px;
    margin: 0 auto 135px auto;
    background-color: #fff;
    border-radius: 60px;
}
.select-card::after{
    content: "";
    display: block;
    position: absolute;
        left: 50%;
        bottom: -35px;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    width: 85px;
    height: 38px;
    background-image: url(/mankitsu_special_2022/images/select_arrow.svg);
}
#select-card-1st{ margin-top: 160px; }
#select-card-5th{ margin-bottom: 0; padding: 50px 90px 125px 90px; }
#select-card-5th::after{ margin-bottom: 160px; content: none; }

/*== コンテナーボックス ==*/
.select-container{
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    flex-grow: 0;
}
.sl-inner-1{ padding: 116px 58px 61px 56px; }
.sl-inner-2{ justify-content: center; padding-top: 113px; padding-bottom: 52px; }
.sl-inner-3{ align-items: baseline; padding: 90px 130px 30px 110px ; }
.sl-inner-4{ align-items: baseline; padding: 80px 180px 35px 150px ; }
.sl-inner-5{ width: 100%; }


/*== コンテナーコンテンツ ==*/
.select-container-ch img{
    margin-bottom: 10px;
}
#select-cone{
    padding-right: 70px;
}
#select-miso{
    padding-left: 70px;
}



/*==========================
  セット完成！
==========================*/
#select-set-img{
    width: 100%;
    height: auto;
    margin-top: 52px;
}
.menu-title-box{
    display: flex;
    align-items: center;
    padding-bottom: 32px;
}
.menu-title{
    padding-top: 1.2%;
    padding-left: 1%;
    margin-bottom: 22px;
}

.pref-select{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #EFEBEA;
}
.pref-select p{
    padding-right: 60px;
}
#pref-select{
    width: 120px;
    padding-top: 9px;
    padding-bottom: 10px;
    padding-left: 22px;
    border-radius: 30px;
    color: #C8000F;
    background-color: #fff;
    background-image: url(/mankitsu_special_2022/images/select_button_arrow.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: right 5px center;
    text-align: left;
}

/*== 価格 ==*/
.price-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}
.price-box{
    display: flex;
    justify-content: space-between;
    width: 44%;
    margin-top: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid #efebea;
}
.price-none{
    display: block;
    height: 100%;
    width: 100%;
    min-width: 140px;
    min-height: 40px;
    background-image: url(/mankitsu_special_2022/images/select_price_none.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}
.price-caption li{
    margin-bottom: 6px;
}
.price-caption{
    margin-bottom: 83px;
}

/*== トッピング ==*/
.topping-head{
    margin-bottom: 40px;
    padding-top: 20px;
    padding-bottom: 24px;
    border-radius: 10px;
    background-color: #EFEBEA;
    text-align: center;
}
.topping-name{
    margin: 23px 0 8px 0;
}
.topping-container{
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    padding-left: 20px;
    padding-right: 20px;
}
.topping-price{
    text-align: center;
}
.topping-price::before{
    content: url(/mankitsu_special_2022/images/topping_price_ico.svg);
    padding-right: 10px;
}
.yen{
    padding-right: 6px;
}
.topping-attension{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topping-attension hr{
    width: 26%;
    height: 1px;
    border-top: none;
    background-color: #EFEBEA;
}

/*== 店舗検索ボタン ==*/
.button{
    position: relative;
    width: 800px;
    margin: 105px auto 0 auto;
}
.search-shop{
    width: 800px;
    padding: 31px 10px 35px 10px;
    background-color: #C8000F;
    border-radius: 50px;
    text-align: center;
    transition: 0.3s;
}
.search-shop:hover{
    background-color: #aa000d;
    transition: 0.4s;
}
.button-img{
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 101px;
}
#search-arrow{
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    top: 48%;
    right: 4%;
}
.about-button-active{
    animation: appear-motto 0.7s ease-in-out;
        animation-fill-mode: forwards;
}



/*==========================
  もっと！満喫セット
==========================*/
#combi{
    padding: 78px 0 105px 0;
    background-color: #E7DACB;
}
.combi-title{
    text-align: center;
}
.combi-title p{
    margin: 38px 0 53px 0;
}
    /*アニメ*/
    .combi-title img{
        opacity: 0;
    }
    .combi-title img:nth-child(2){
        padding-right: 13px;
    }
    .combi-title-active{
        animation: appear-motto 0.7s ease-in-out;
        animation-fill-mode: forwards;
    }
    .combi-title-active:nth-child(2){
        animation: appear-motto 0.7s ease-in-out;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }
    .combi-title-active:nth-child(3){
        animation: appear-motto 0.7s ease-in-out;
        animation-fill-mode: forwards;
    }
    .combi-title-active:nth-child(4){
        animation: appear-motto 0.7s ease-in-out;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }



/*==========================
  ドンキーのこだわり、いっぱい！
==========================*/
#obsession{
    padding-top: 204px;
    background-image: linear-gradient(#4D3631 8%, #010000 20%, #36201B 45%, #59372F 75%,#151312 100%);
    background-image: -moz-linear-gradient(#4D3631 8%, #010000 20%, #36201B 45%, #59372F 75%,#151312 100%);
    background-image: -webkit-linear-gradient(#4D3631 8%, #010000 20%, #36201B 45%, #59372F 75%,#151312 100%);
}
.ob-title{
    text-align: center;
    margin-bottom: 80px;
}
#ob-title-abso{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.ob-index{
    width: 1280px;
    margin: 0 auto 210px auto;
}
.index-link:hover{
    color: #FFC400;
    border-bottom: #FFC400 solid 4px;
    line-height: 42px;
    transition: 0.4s;
}

/*===== アイコンナビ =====*/

.icon-navi{
    position: fixed;
    right: -20%;
    top: 55%;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
    width: 90px;
    padding: 20px 0 20px 0;
    transition: 0.3s;
    overflow: hidden;
    text-align: center;
}
.icon-navi-active{
    right: 6%;
    z-index: 100;
    transition: 0.3s;
}
.icon-navi img{
    margin-bottom: 13px;
    transition: 0.4s;
}
.ico-active{
    transform: scale(1.8);
    padding-bottom: 10px;
    padding-top: 10px;
}

/*===== こだわり各種 =====*/
#obsession{
    padding-bottom: 120px;
}
.ob-sec{
    position: relative;
    margin: 0 auto;
    width: 1656px;
}
.ob-sec-container{
    display: flex;
    justify-content: space-between;
    width: 1140px;
    margin: 0 auto;
}
.ob-wrapper{
     width: 1280px;
     margin: 0 auto;
}

/*== 点滅する光 ==*/
.circle{
    position: absolute;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    width: 31px;
    height: 31px;
    border-radius: 31px;
    background-color: #FFC400;
}
.inner-circle{
    position: absolute;
    top: -19px;
    left: -18px;
    width: 68px;
    height: 68px;
    border-radius: 80px;
    opacity: 1;
    background-color: #FFC400;
    animation: circle-inner 1.6s linear infinite;
}
#dish-circle-1 { /*バーグ*/ top: 61.5%; left: 44.2%; }
#dish-circle-2 { /*サラダ*/ top: 44.5%; left: 62.7%; }
#dish-circle-3 { /*ライス*/ top: 35.5%; left: 38%; }
#dish-circle-4 { /*チーズ*/ top: 52%; right: 39%; }
#dish-circle-5 { /*おろしそ*/ top: 49%; left: 30%; }
#dish-circle-6 { /*エッグ*/ top: 56%; right: 26.8%; }
#dish-circle-7 { /*パイン*/ top: 63.5%; left: 32%; }
#dish-circle-8 { /*みそ汁*/ top: 41.9%; right: 37.5%; }
#dish-circle-9 { /*コーンスープ*/ top: 42.2%; left: 36%; }
#dish-circle-10{ /*コーヒー*/ top: 28%; right: 33.5%; }
#dish-circle-11{ /*オレンジ*/ top: 27%; left: 33.5%; }
#dish-circle-12{ /*オレンジ*/ top: 28%; left: 66.2%; }
#dish-circle-13{ /*オレンジ*/ top: 37%; left: 35.5%; }


#ob-dish{
    margin: 0 auto;
    background-image: url(/mankitsu_special_2022/images/ob_berg_pic.png);
    background-repeat: no-repeat;
    background-position: center 82.5%;
    margin-bottom: 134px;
}
.ob-sec-container{
    margin-bottom: 346px;
}
#ob-contents-berg-3{
    margin-left: 12.2%;
}

#ob-cheese{
    padding-top: 50px;
    background-image: url(/mankitsu_special_2022/images/ob_cheese_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-cheese{
    margin-left: 5.8%;
    padding-top: 20px;
    padding-bottom: 138px;
    width: 592px;
}

#ob-oroshiso{
    padding-top: 50px;
    background-image: url(/mankitsu_special_2022/images/ob_oroshiso_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-oroshiso{
    width: 592px;
    margin-left: 48%;
    padding-top: 20px;
    padding-bottom: 138px;
}

#ob-egg{
    padding-top: 50px;
    background-image: url(/mankitsu_special_2022/images/ob_egg_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-egg{
    width: 592px;
    margin-left: 6.64%;
    padding-top: 30px;
    padding-bottom: 158px;
}

#ob-pine{
    padding-top: 50px;
    background-image: url(/mankitsu_special_2022/images/ob_pine_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-pine{
    width: 610px;
    margin-left: 48%;
    padding-top: 25px;
    padding-bottom: 158px;
}

#ob-miso{
    padding-top: 100px;
    background-image: url(/mankitsu_special_2022/images/ob_miso_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-miso{
    width: 620px;
    margin-left: 8.8%;
    padding-bottom: 168px;
}

#ob-cone{
    padding-top: 30px;
    background-image: url(/mankitsu_special_2022/images/ob_cone_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-cone{
    width: 610px;
    margin-left: 49%;
    padding-top: 40px;
    padding-bottom: 28px;
}

#ob-coffee{
    height: 780px;
    background-image: url(/mankitsu_special_2022/images/ob_coffee_pic.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
#ob-contents-coffee{
    width: 592px;
    margin-left: 6.64%;
    padding-top: 195px;
    padding-bottom: 0px;
}

#ob-orange{
    height: 648px;
    background-image: url(/mankitsu_special_2022/images/ob_orange_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-orange{
    width: 610px;
    margin-left: 45%;
    padding-top: 110px;
    padding-bottom: 0px;
}

#ob-ichigo{
    height: 700px;
    background-image: url(/mankitsu_special_2022/images/ob_ichigo_pic.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
#ob-contents-ichigo{
    width: 592px;
    margin-left: 12.64%;
    padding-top: 190px;
    padding-bottom: 0px;
}

#ob-soft{
    height: 775px;
    background-image: url(/mankitsu_special_2022/images/ob_soft_pic.png);
    background-repeat: no-repeat;
    background-position: center center;
}
#ob-contents-soft{
    width: 610px;
    margin-left: 37.64%;
    padding-top: 180px;
}
/*== 文字width ==*/
.berg-p{
    width: 400px;
}
#berg-p-left{
    width: 430px;
}
#oroshiso-p{
    padding-left: 24px;
}
#pine-p{
    letter-spacing: 0.05em;
}
#miso-p{
    letter-spacing: 0.03em;
}

/*重ね文字*/
.svg-abso{
    position: relative;
}
.abso-div{
    position: absolute;
    top: 30px;
    left: 0;
    opacity: 0;
}
.ob-abso-active{
    top: 0;
    opacity: 1;
    transition: 1s;
}


#ob-salad-abso{ width: 623px; }
#ob-rice-abso{ width: 357px; }
#ob-berg-abso{ width: 540px; }
#ob-cheese-abso{ width: 571px; }
#ob-oroshiso-abso{ width: 554px; }
#ob-egg-abso{ width: 543px; }
#ob-pine-abso{ width: 461px; }
#ob-miso-abso{ width: 393px; }
#ob-cone-abso{ width: 654px; }
#ob-coffee-abso{ width: 477px; }
#ob-orange-abso{ width: 525px; }
#ob-ichigo-abso{ width: 540px; }
#ob-soft-abso{ width: 611px; }



/*==========================
  注意事項
==========================*/
.attension-card{
    width: 956px;
    margin: 90px auto 0 auto;
    padding: 50px 50px 52px 50px;
    border-radius: 25px;
    background-color: #fff;
}
 .attension-card ul li{
    text-indent: -1em;
    padding-left: 1em;
 }
 .attension-card ul li::before{
    content: "● ";
    color: #3B201B;
 }
 .attension-card hr{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    border-top: none;
    background-color: #EFEBEA;
 }
 .ob-btn{
    text-align: center;
    transition: 0.3s;
    opacity: 0;
 }
 .ob-btn img:hover{
    opacity: 0.8;
    transition: 0.4s;
 }
 .ob-btn-active{
    animation: appear-motto 0.7s ease-in-out;
    animation-fill-mode: forwards;
}

 /*==========================
  フッター
==========================*/
.app-link{
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: #C8000F;
    text-align: center;
}
.app-link img{
    max-width: 956px;
}
.footer-nav{
    padding-top: 70px;
    padding-bottom: 72px;
    background-color: #60352C;
    background-image: url(/mankitsu_special_2022/images/footer_illust.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
.footer-link{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 25px auto;
    max-width: 900px;
}
.footer-link li{
    width: 25%;
    margin-bottom: 21px;
}
.footer-link li:nth-child(4n+1){ width: 24%; padding-left: 1%; }
.footer-link li:nth-child(4n+2){ width: 24%; }
.footer-link li:nth-child(4n+3){ width: 27%; }
.footer-link li:nth-child(4n+4){ width: 23.7%; }
.footer-link li:nth-child(-n+4){ margin-bottom: 22px; }
.footer-sns{
    display: flex;
    justify-content: space-between;
    width: 206px;
    margin: 0 auto 15px auto;
}



/*========================
    PC 1535px以下〜
========================*/
@media screen and (max-width: 1657px) {
    /*== こだわり背景微調整 ==*/
    .ob-sec{
        width: 1535px;
    }
}
@media screen and (max-width: 1535px) {
    /*========================
     　カードタイプ Width 一括
    ========================*/
    .about-video-card,.attension-card{
        width: 765px;
    }
    .select-card{
        width: 1024px;
        margin-bottom: 115px;
    }
    .curve{
        height: 250px;
    }

    /*========================
     　スリックスライド
    ========================*/
    .slick-dots{
        bottom: -30px;
    }
    
    /*========================
     　FV周り調整
    ========================*/
    .header-wide{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .header-logo{
        width: 134px;
    }
    .header-logo img{
        width: 100%;
    }
    .nav-open{
        height: 66px;
    }
    .nav-open-active{
        top: 70px;
    }
    .common-menu{
        max-width: 1000px;
        padding-top: 36px;
    }

    .mainvisual{
        height: 1069px;
    }
    h1{
        width: 797px;
        top: 12%;
    }
    .main-body{
        width: 300px;
        top: 27%;
    }
    .main-dish{
        width: 628px;
        top: 41%;
    }
    .main-miso,.main-coffee,.main-soft{
        width: 920px;
        text-align: center;
    }

    /*========================
     　とは？〜選べる 調整
    ========================*/
    #about-caption{
        padding-top: 80px;
    }
    .about-title{
        width: 742px;
        margin: 0 auto 66px auto;
    }
    .about-title img{
        width: 100%;
    }
    .about-video-card{
        margin-bottom: 50px;
    }
    iframe{
        height: 45%;
    }
    .about-photo img{
        width: 100%;
    }
    #photo-1{ width: 140px; }
    #photo-2{ width: 161px; }
    #photo-3{ width: 102px; }
    #photo-4{ width: 108px; }
    #photo-5{ width: 174px; }
    #photo-6{ width: 95px; }

    .select-card-window{
        left: 50%;
            transform: translate(-50%, 0%);
            -webkit-transform: translate(-50%, 0%);
            -ms-transform: translate(-50%, 0%);
        width: 592px;
        padding: 26px 55px 26px 58px;
    }
    .select-card-window img{
        width: 110px;
        top: -28px;
        left: -60px;
    }

    .select-container-ch img{
        width: 95%;
    }
    .sl-inner-1{ padding: 93px 46px 49px 45px; }
    .sl-inner-2{ padding: 90px 0px 42px 0px; }
    .sl-inner-3{ padding: 72px 104px 24px 88px ; }
    .sl-inner-4{ padding: 64px 120px 28px 120px ; }
    .sl-inner-4 .select-container-ch img{ width: 88px; }
    #select-card-5th{ margin-bottom: 0; padding: 40px 72px 100px 72px; }
    #select-set-img{ margin-top: 42px;}

    .menu-title{
        padding-top: 1.8%;
        margin-bottom: 18px;
    }
    .menu-title-ico img{
        width: 67px;
    }
    .pref-select{
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .price-container{
        margin-bottom: 25px;
    }
    .price-caption li{
        margin-bottom: 4px;
    }
    .price-caption{
        margin-bottom: 66px;
    }
    .price-box{
        margin-top: 26px;
        margin-bottom: 14px;
    }
    .price-nine{
        width: 112px;
    }

    /*トッピング*/
    .topping-box{
        text-align: center;
    }
    .topping-box img{
        width: 80%;
    }
    .topping-head{
        margin-bottom: 32px;
        padding-top: 16px;
        padding-bottom: 18px;
    }
    .topping-name{
        margin-top: 16px;
        margin-bottom: 6px;
    }
    .button{
        width: 80%;
        margin-top: 84px;
        text-align: center;
    }
    .search-shop{
        width: 100%;
        padding: 25px 10px 28px 10px;
    }
    .button-img{
        width: 112px;
        left: 95px;
    }


    /*========================
     　もっと！満喫セット 小
    ========================*/
    #combi{
        padding: 62px 0 62px 0;
    }
    .combi-title img{
        max-width: 363px;
    }
    .combi-title img{
        max-width: 363px;
    }
    .combi-title img:nth-child(2){
        max-width: 368px;
    }
    .combi-title p{
        margin: 30px 0 42px 0;
    }


    /*========================
     ドンキーのこだわり、いっぱい！ 小
    ========================*/

    /*===== アイコンナビ =====*/
    .icon-navi{
        padding: 16px 0 16px 0;
    }
    .icon-navi img{
        width: 40px;
    }
    .index-ico img{
        width: 46px;
    }

    #dish-circle-10{ /*コーヒー*/ top: 42%; right: 33.5%; }
    /*======================*/

    #obsession{
        padding-top: 153px;
    }
    .ob-title{
        margin-bottom: 64px;
    }
    .ob-title img,#ob-title-abso img{
        width: 548px;
        padding-left: 1.8%;
    }
    

    .ob-index{
        margin-bottom: 168px;
    }
    .ob-index,.ob-sec-container,.ob-wrapper{
        width: 1024px;
    }
    .ob-sec{
        width: 1280px;
    }
    #ob-dish,#ob-cheese,#ob-oroshiso,#ob-egg,#ob-pine,
    #ob-miso,#ob-cone,#ob-coffee,#ob-orange,#ob-ichigo,
    #ob-soft{
        background-size: 100%;
    }
    .abso-div img{
        width: 100%;
    }
    #svg-salad,#ob-salad-abso  { width: 498px; }
    #svg-rice,#ob-rice-abso   { width: 285px; }
    #svg-berg,#ob-berg-abso   { width: 430px; }
    #svg-cheese,#ob-cheese-abso { width: 452px; }
    #svg-oroshiso,#ob-oroshiso-abso{ width: 452px; }
    #svg-egg,#ob-egg-abso    { width: 434px; }
    #svg-pine,#ob-pine-abso   { width: 368px; }
    #svg-miso,#ob-miso-abso   { width: 314px; }
    #svg-cone,#ob-cone-abso   { width: 528px; }
    #svg-coffee,#ob-coffee-abso { width: 382px; }
    #svg-orange,#ob-orange-abso { width: 418px; }
    #svg-ichigo,#ob-ichigo-abso { width: 418px; }
    #svg-soft,#ob-soft-abso   { width: 432px; }

    .ob-sec-container{
        margin-bottom: 300px;
    }

    #ob-dish{ margin-bottom: 110px; }
    #ob-contents-cheese{ padding-bottom: 110px; width: 474px;}
    #ob-contents-oroshiso{ padding-bottom: 110px; width: 474px;}
    #ob-contents-egg{ padding-bottom: 126px; width: 474px;}
    #ob-contents-pine{ padding-bottom: 126px; width: 474px;}
    #ob-contents-miso{ width: 496px;}
    #ob-contents-cone{ padding-bottom: 22px; width: 488px;}
    #ob-contents-coffee{ padding-bottom: 134px; width: 496px;}
    #ob-contents-orange{ padding-bottom: 0; width: 488px;}
    #ob-contents-ichigo{ padding-top: 160px;  width: 474px;}
    #ob-contents-soft{ padding-bottom: 0; width: 474px;}

    #ob-cheese{padding-top: 40px;}
    #ob-oroshiso{padding-top: 20px;}
    #ob-egg{padding-top: 40px;}
    #ob-pine{padding-top: 40px;}
    #ob-miso{padding-top: 80px;}
    #ob-cone{padding-top: 30px;}
    #ob-coffee{height: 624px;}
    #ob-orange{height: 518px;}
    #ob-ichigo{height: 560px;}
    #ob-soft{height: 690px;}
    
    .ob-btn{
        width: 765px;
        margin: 0 auto;
    }
    .ob-btn img{
        width: 100%;
    }
}

@media screen and (max-width: 1326px) {

    /*スリックスライド*/
    .slick-slide {
        transform: scale(.85);
        transition: 0.3s;
        height: calc(100vw / 2.4 );
        /*height: 630px;*/
        align-items: center;
    }
    .slick-dots{
        bottom: -20px;
    }
    .slick-slide img{
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .combi-title p{
        margin-bottom: 16px;
    }

    .icon-navi-active{
        right: 3%;
    }
    .index-ico img{
        width: 42px;
    }
    .ob-sec{
         width: 1110px;
    }
    .ob-btn{
        width: 80%;
    }
    .attension-card,.ob-index,.ob-sec-container,.ob-wrapper{
        width: 80%;
    }
    .about-video-card{
        width: 68%;
    }
    .select-container-ch img{
        width: 70%;
    }
    .select-card{
        width: 76%;
    }
    .sl-inner-1{
        padding-left: 3%;
        padding-right: 3%;
    }
    .sl-inner-2,
    .sl-inner-3,
    .sl-inner-4{
        padding-left: 10%;
        padding-right: 10%;
    }
    .curve{
        height: 240px;
    }
    .search-shop{
        width: 100%;
    }
    .button-img{
        width: 90px;
        left: 10%;
    }

    #svg-salad,#ob-salad-abso  { width: 82%; }
    #svg-rice,#ob-rice-abso   { width: 53%; }
    #svg-berg,#ob-berg-abso   { width: 44%; }
    #svg-cheese,#ob-cheese-abso { width: 75%; }
    #svg-oroshiso,#ob-oroshiso-abso{ width: 75%; }
    #svg-egg,#ob-egg-abso    { width: 80%; }
    #svg-pine,#ob-pine-abso   { width: 62%; }
    #svg-miso,#ob-miso-abso   { width: 60%; }
    #svg-cone,#ob-cone-abso   { width: 100%; }
    #svg-coffee,#ob-coffee-abso { width: 60%; }
    #svg-orange,#ob-orange-abso { width: 68%; }
    #svg-ichigo,#ob-ichigo-abso { width: 72%; }
    #svg-soft   { width: 100%; }
    #ob-soft-abso   { width: 74%; }
    

    .berg-p,#berg-p-left{ width: 84%; }
    #ob-contents-cheese{ padding-bottom: 70px; width: 50%;}
    #ob-contents-oroshiso{ padding-bottom: 70px; width: 53%;}
    #ob-contents-egg{ padding-bottom: 100px; width: 48%;}
    #ob-contents-pine{ padding-bottom: 100px; width: 48%;}
    #ob-contents-miso{ width: 50%;}
    #ob-contents-cone{ padding-bottom: 0px; width: 48%;}
    #ob-contents-coffee{ padding-bottom: 107px; width: 50%;}
    #ob-contents-orange{ padding-bottom: 0; width: 50%;}
    #ob-contents-ichigo{ padding-top: 120px;  width: 50%;}
    #ob-contents-soft{ padding-bottom: 0; width: 60%;}

    #dish-circle-1{ top: 59%; left: 45%; }/*肉*/
    #dish-circle-2{ top: 39.5%; left: 60%; }
    #dish-circle-3{ top: 32.5%; left: 37%; }
/*
    #dish-circle-1{ top: 4.6%; left: 11%; }
    #dish-circle-2{ top: 12.5%; left: 68%; }
    #dish-circle-3{ top: 29.5%; left: 24%; }
    #dish-circle-4{ top: 45%; left: 26%; }
    #dish-circle-5{ top: 40.5%; left: 35.5%; }
    #dish-circle-6{ top: 45%; left: 62%; }
    #dish-circle-7{ top: 53%; left: 41%; }
    #dish-circle-8{ top: 30%; left: 37%; }
    #dish-circle-9{ top: 26%; left: 58%; }
    #dish-circle-10{ top: 11.2%; left: 46%; }
    #dish-circle-11{ top: 18%; left: 70%; }
    #dish-circle-12{ top: 26%; left: 33%; }
    #dish-circle-13{ top: 35%; left: 72.3%; }
    */
}

@media screen and (max-width: 1110px) {
    .nav-sp{
        display: block;
    }
    .slick-slide {
        height: calc(100vw / 2.5 );   
    }
    /*ヘッダー*/
    .nav-list-main{
        width: 49%;
    }
    .header-logo{
        width: 114px;
    }
    .nav-button div{
        width: 19px;
    }
    .nav-button div:first-child{
        margin-bottom: 5px;
    }
    .nav-button div:nth-child(2){
        margin-bottom: 5px;
    }

    /*===== Gナビ =====*/
    .nav-open{
        overflow-y: scroll;
    }
    
    .nav-pc{
        display: none;
    }
    .nav-open{
        top: -1000px;
    }
    .nav-open-active{
        top: 0px;
        width: 100vw;
        height: 100vh;

    }
    .nav-container-sp{
        display: flex;
        justify-content: space-between;
        margin-top: 90px;
        padding: 0 10% 0 10%;
    }
    .header-curve{
        display: none;
    }
    .nav-active:first-child{
        transform: rotate(45deg) translate(7px,7px);
    }
    .nav-active:nth-child(3){
        transform: rotate(-45deg) translate(4px,-4px);
    }
    .common-menu{
        display: block;
        width: auto;
        padding: 0;
        margin: 0;
    }
    #header_sns_sp{
        display: inline;
        animation: is-open-pc 0.47s ease-in-out ;
        animation-fill-mode: forwards;
        animation-delay: 0.8s;
        opacity: 0;
    }
    #header_sns_sp li{
        margin-bottom: 22px;
    }
    #header_sns_sp img{
        width: 32px;
    }
    .menu-effect{
        margin-bottom: 24px;
    }
    .menu-effect-small{
        margin-bottom: 20px;
    }
    #menu-effect-last{
        margin-bottom: 28px;
    }
    .header-menu-img{
        display: block;
    }
    .lang_list{
        margin-bottom: 120px;
    }
    .lang_list li:first-child{
        padding-left: 0;
    }

    .pc-effect-active:nth-child(6){ animation-delay: 0s; }
    .pc-effect-active:nth-child(7){ animation-delay: 0.1s; }
    .pc-effect-active:nth-child(8){ animation-delay: 0.2s; }
    .pc-effect-active:nth-child(9){ animation-delay: 0.3s; }
    .pc-effect-active:nth-child(10){ animation-delay: 0.4s; }
    .pc-effect-active:nth-child(11){ animation-delay: 0.5s; }
    .pc-effect-active:nth-child(12){ animation-delay: 0.6s; }
    .pc-effect-active:nth-child(13){ animation-delay: 0.7s; }
    .pc-effect-active:nth-child(n+14){ animation-delay: 0.8s; }



    .ob-sec{
        width: 100%;
    }
    .index-ico img{
        width: 36px;
    }

    .tb{
        display: none;
    }

    h1{
        width: 80%;
        left: 50%;
    }
    .main-body{
        width: 38%;
    }
    .main-dish{
        width: 78%;
        left: 50%;
    }
    .main-coffee,.main-miso,.main-soft{
        width: 94%;
        left: 50%;
    }

    .about-title img{
        width: 90%;
    }
    .select-card-window{
        width: 70%;
    }
    #select-card-5th{
        margin-bottom: 0; 
        padding-left: 5%;
        padding-right: 5%;
    }
    .price-caption{
        margin-bottom: 44px;
    }

    .button-img{
        width: 80px;
        left: 6%;
    }

    .combi-title img{
        width: 90%;
    }

    #dish-circle-1{ top: 60%; left: 45%; }/*肉*/
    #dish-circle-2{ top: 39.5%; left: 60%; }
    #dish-circle-3{ top: 36.5%; left: 37%; }
    .app-link img{
        width: 70%;
    }
    .ob-title img,#ob-title-abso img{
        width: 50%;
    }
    .footer-link{
         max-width: 700px;
    }
}

@media screen and (max-width: 950px) {
    #dish-circle-1{ top: 64%; left: 45%; }/*肉*/
    #dish-circle-2{ top: 48.5%; left: 60%; }
    #dish-circle-3{ top: 44.5%; left: 37%; }
    #dish-circle-10{ top: 56%; right: 33.5%; }
    #dish-circle-12{ top: 48%; left: 66.2%; }
}

@media screen and (max-width: 800px) {

    .popup-win{    
        padding: 8%;
        width: 90%;        
    }
    .popup-caption{      
        font-size: 1.8rem;  
        line-height: 1.4;
        text-align: center;
    }
    .popup-btn{        
        font-size: 1.4rem;        
        padding: 20px;
        width: 75%;        
    }    

    #svg-rice{
        display: none!important;
    }

    .curve{
        margin-left: -50px;
        margin-right: -50px;
        padding-left: 50px;
        padding-right: 50px;
    }
    .slick-slide {
        height: calc(100vw * 1.1 );   
    }


    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    @keyframes rotate-6{
        0%  { transform: translateY(0); }
        50% { transform: translateY(-25px); }
        100%{ transform: translateY(0); }
    }

    /*ヘッダーとフッター*/
    .header-body{
        border-radius: 0 0 40px 40px;
    }
    .index-ico img{
        width: 34px;
    }
    .app-link{
        padding-top: 24px;
        padding-bottom: 20px;
    }
    .app-link img{
        margin: 0 auto;
    }
    .footer-nav{
        padding-top: 35px;
        padding-bottom: 40px;
        padding-left: 8.1%;
        padding-right: 8.1%;
    }
    .footer-link li{
        margin-bottom: 16px;
        line-height: 1.7;
    }
    .footer-link li:nth-child(4n+1){ width: 50%; padding-right: 10%; padding-left: 0;}
    .footer-link li:nth-child(4n+2){ width: 46%; }
    .footer-link li:nth-child(4n+3){ width: 50%; padding-right: 10%}
    .footer-link li:nth-child(4n+4){ width: 46%; }
    .footer-link li:nth-child(-n+4){ margin-bottom: 22px; }

    .footer-nav{
        background-image: url(/mankitsu_special_2022/images/footer_illust_sp.png);
    }
    
    #light-1{ display: none; }
    #light-2{ top: 26.6%; left: -4%;}
    #light-2 img{ width: 40px; }
    #light-3{ display: none; }
    #light-4{ top: 35%; left: 3.8%;}
    #light-4 img{ width: 40px; }
    #light-5{ top: 40.18%; left: -5%;}
    #light-5 img{ width: 48px; }
    #light-6{ top: 32.66%; right: 5.86%; animation-delay: 1.2s; }
    #light-6 img{ width: 50px; }
    #light-7{ display: none; }
    #light-8{ top: 25.87%; right: 1.65%; animation-delay: 0.8s; }
    #light-8 img{ width: 40px; }
    #light-9{ top: 38.5%; right: -8%;}
    #light-9 img{ width: 80px; }

    /*width適正*/
    .about-title{
        width: 87%;
    }
    .about-video-card{
        width: 87%;
    }
    iframe{
        width: 100%;
        height: 180px;
    }
    .select-card{
        width: 87%;
    }
    .select-card-window{
        width: 81%;
    }
    .menu-title-box{
        width: 82%;
        margin: 0 auto 10px auto;
        padding-bottom: 0;
    }
    .menu-title{
        padding-top: 3.6%;
        padding-left: 3%;
        line-height: 1.4;
    }
    .menu-title-ico img{
        width: 65px;
    }
    .combi-title img{
        width: 66.6%;
    }
    .combi-title img:nth-child(3){
        width: 36%;
        padding-left: 2%;
    }
    .combi-title p{
        width: 87%;
    }
    .ob-title img,#ob-title-abso img{
        width: 74.5%;
    }
    .ob-index{
        width: 88%;
    }
    .index-ico{
        padding-left: 4px;
        padding-right: 0px;
    }
    .ob-btn{
        width: 87%;
        margin-top: 60px;
    }
    .attension-card{
        margin-top: 40px;
        width: 87%;
    }


    /*余白適正*/
    #about-caption{
        padding-top: 0;
    }
    .about-title{
        margin-bottom: 39px;
    }
    .about-video-card{
        margin-bottom: 30px;
    }
    .about-vudeo-card h2{
        margin-bottom: 6px;
    }
    .about-video-caption{
        padding-top: 20px;
        padding-bottom: 24px;
        margin-bottom: 30px;
    }
    .about-text{
        margin-bottom: 60px;
    }
    /*選べる*/
    .select-card-window{
        padding: 16px 20px 16px 20px;
        border: 3px solid;
    }
    .select-card{
        border-radius: 25px;
        margin-bottom: 140px;
    }
    #select-card-1st{
        margin-top: 120px;
    }
    #select-card-5th{
        padding: 20px 0px 60px 0px;
    }
    .pref-select{
        display: block;
        text-align: center;
    }
    .pref-select p{
        padding-right: 0;
        margin-bottom: 8px;
    }
    .price-container{
        width: 82%;
        margin: 0 auto 20px auto;
    }
    .price-caption{
        width: 82%;
        margin: 6px auto 35px;
    }
    .price-box{
        width: 100%;
        margin-top: 35px;
    }
    .topping-head{
        width: 82%;
        margin: 0 auto 20px auto;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .topping-container{
        padding-left: 8.8%;
        padding-right: 8.8%;
        margin-bottom: 0;
        flex-wrap: wrap;
    }
    .topping-box{
        width: 50%;
        margin-bottom: 30px;
    }
    .topping-box:nth-child(3),.topping-box:nth-child(4){
        margin-bottom: 18px;
    }
    .topping-box img{
        width: 90%;
    }
    .topping-price::before{
        content: url(/mankitsu_special_2022/images/topping_price_ico_sp.svg);
        padding-right: 5px;
    }
    .yen{
        padding-right: 3px;
    }
    .topping-attension-sp{
        width: 82%;
        margin: 0 auto;
    }
    hr{
        border-color: #EFEBEA;
        margin-bottom: 20px;
    }
    .button{
        margin-top: 45px;
    }
    .search-shop{
        padding: 11px 10px 12px 10px;
    }
    #combi{
        padding-top: 35px;
        padding-bottom: 38px;
    }
    .combi-title img{
        margin: 0 auto 0 auto;
    }
    .combi-title p{
        margin: 30px auto 0px auto;
    }
    #obsession{
        padding-top: 65px;
    }
    .ob-title{
        margin-bottom: 55px;
    }


    /*画像サイズ適正*/
    .about-title img{
        width: 100%;
    }
    .price-container{
        display: block;
    }
    .price-box{
        align-items: center;
    }
    .select-card-window img{
        width: 68px;
        top: -20px;
        left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
    }
    .menu-title::before{
        content: "";
    }
    #select-set-img-sp{
        display: block;
        width: 85%;
        margin: 40px auto 6px auto;
    }
    .topping-box img{
        width: 70%;
    }
    /*===== 導入の写真 =====*/
    #photo-1{ width: 16%; bottom: -13%; left: 3.54%; }
    #photo-2{ width: 16%; bottom: -20%; left: 20.2%; }
    #photo-3{ width: 13%; bottom: -14%; left: 38.5%; }
    #photo-4{ width: 12%; bottom: -21.3%; right: 19.73%; }
    #photo-5{ width: 18%; bottom: -14.1%; right: 27.9%; }
    #photo-6{ width: 12%; bottom: -17%; right: 5.59%; }

    /*===== アイコンナビ =====*/
    .icon-navi{
        padding: 10px 0 10px 0;
    }
    .icon-navi-active{
        right: -3%;
    }
    .icon-navi img{
        width: 26px;
        margin-bottom: 15px;
    }

    /*リスト内適正*/

    
    .sl-inner-1,.sl-inner-2,.sl-inner-3,.sl-inner-4{
        flex-wrap: wrap;
        padding: 65px 3% 20px 3%;
    }
    .sl-inner-2{
        padding: 54px 3.5% 19px 3.5%;
    }
    .sl-inner-3{
        padding: 48px 7% 19px 7%;
    }
    .sl-inner-4{
        padding: 52px 7% 21px 7%;
    }
    .select-container-ch{
        width: 50%;
        margin-bottom: 14px;
    }
    .select-container-ch img{
        width: 66%;
        margin-bottom: 4px;
    }
    #select-list-first-dish,#select-list-first-drink{
        width: 100%;
    }
    #select-list-first-dish img,#select-list-first-drink img{
        width: 32%;
    }
    #select-cone{
        padding-right: 0;
    }
    #select-miso{
        padding-left: 0;
    } 
    #search-arrow{
        right: 7%;
    }


    /*こだわり適正*/
    .ob-index{
        margin-bottom: 80px;
        line-height: 1.2;
    }
    .index-ico{
        line-height: 1;
    }
    .ob-sec,.ob-wrapper,.ob-sec-container{
        width: 100%;
        margin-bottom: 0;
    }
    .ob-sec-container{
        display: block;
    }
    #oroshiso-p{
        padding-left: 0;
    }

    .ob-pic-sp{
        width: 100%;
    }
    .ob-pic-sp img{
        width: 100%;
    }

    #ob-dish,#ob-cheese,#ob-oroshiso,#ob-egg,#ob-pine,
    #ob-miso,#ob-cone,#ob-coffee,#ob-orange,#ob-ichigo,
    #ob-soft{
        background-image: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 0;
        height: auto;
    }
    .ob-contents,#ob-contents-berg-3,.berg-p,#berg-p-left,#ob-contents-cheese,
    #ob-contents-oroshiso,#ob-contents-egg,#ob-contents-pine,#ob-contents-miso,#ob-contents-cone,#ob-contents-coffee,#ob-contents-orange,#ob-contents-ichigo,
    #ob-contents-soft{
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 0;
        height: auto;
    }

    .ob-sec-container,
    .ob-wrapper{
        padding-left: 5.8%;
        padding-right: 13%;
    }

    #ob-berg-wrapper{
        padding-right: 0;
    }

    .ob-sec-container .ob-wrapper{
        padding-left: 0;
    }

    #svg-salad,#ob-salad-abso  { width: 105%; }
    #svg-rice-sp   { width: 105%; }
    #ob-rice-abso   { width: 105%; }
    #svg-berg,#ob-berg-abso,#svg-berg-sp,#ob-berg-abso { width: 100%; }
    #svg-cheese,#ob-cheese-abso { width: 100%; }
    #svg-oroshiso,#ob-oroshiso-abso{ width: 100%; }
    #svg-egg,#ob-egg-abso    { width: 92%; }
    #svg-pine,#ob-pine-abso   { width: 78%; }
    #svg-miso,#ob-miso-abso   { width: 76%; }
    #svg-cone,#svg-cone-sp,#ob-cone-abso   { width: 76%; }
    #svg-coffee,#ob-coffee-abso { width: 83%; }
    #svg-orange,#ob-orange-abso { width: 90%; }
    #svg-ichigo,#ob-ichigo-abso { width: 90%; }
    #svg-soft   { width: 105%; }
    #ob-soft-abso{ width: 92%; }


    #ob-dish .ob-contents{ margin-bottom: 60px; }
    #ob-dish .ob-contents:first-child{ margin-top: -160px; }
    #ob-dish{ margin-bottom: 128px; }
    #ob-cheese .ob-wrapper{ margin-top: -200px; margin-bottom: 128px; }
    #ob-oroshiso .ob-wrapper{ margin-top: -200px; margin-bottom: 118px; }
    #ob-egg .ob-wrapper{ margin-top: -180px; margin-bottom: 128px; }
    #ob-pine .ob-wrapper{ margin-top: -210px; margin-bottom: 100px; }
    #ob-miso .ob-wrapper{ margin-top: -290px; margin-bottom: 128px; }
    #ob-cone .ob-wrapper{ margin-top: -160px; margin-bottom: 125px; }
    #ob-coffee .ob-wrapper{ margin-top: -160px; margin-bottom: 140px; }
    #ob-orange .ob-wrapper{ margin-top: -180px; margin-bottom: 160px; }
    #ob-ichigo .ob-wrapper{ margin-top: -200px; margin-bottom: 120px; }
    #ob-soft .ob-wrapper{ margin-top: -270px; margin-bottom: 80x; }

    #dish-circle-1{ top: 4.6%; left: 11%; }
    #dish-circle-2{ top: 12.5%; left: 68%; }
    #dish-circle-3{ top: 29.5%; left: 24%; }
    #dish-circle-4{ top: 45%; left: 26%; }
    #dish-circle-5{ top: 40.5%; left: 35.5%; }
    #dish-circle-6{ top: 45%; left: 62%; }
    #dish-circle-7{ top: 53%; left: 41%; }
    #dish-circle-8{ top: 30%; left: 37%; }
    #dish-circle-9{ top: 26%; left: 58%; }
    #dish-circle-10{ top: 11.2%; left: 46%; }
    #dish-circle-11{ top: 18%; left: 70%; }
    #dish-circle-12{ top: 26%; left: 33%; }
    #dish-circle-13{ top: 35%; left: 72.3%; }
}

@media screen and (max-width: 600px) {
    .popup-caption{      
        font-size: 1.5rem;  
        line-height: 1.4;        
    }
    .popup-btn{                
        width: 100%;        
        padding: 15px;
    }    

    .curve{
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: -140px;
    }

    .slick-slide {
        height: calc(100vw * 1.78 );   
    }
    .slick-slide img{
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .slick-dots{
        bottom: -20px;
    }

    .sp-600{
        display: block;
    }
    .pc-600{
        display: none;
    }
    .header-wide{
        padding-top: 16px;
        padding-bottom: 16px;
        width: 82%;
    }
    .header-logo{
        width: 90px;
    }
    .app-link img{
        width: 88%;
    }
    #footer-link-sp{
        display: flex;
    }
    .footer-link li{
        margin-bottom: 15px;
    }
    .footer-link li:nth-child(-n+4){
        margin-bottom: 15px;
    }
    .footer-sns{
        display: flex;
        justify-content: space-between;
        width: 167px;
        margin-bottom: 20px;
    }
    .footer-nav{
        padding-bottom: 90px;
    }

    /**/

    .mainvisual{
        width: 100%;
        height: auto;
        background-image: none;
    }
    .main-bg{
        width: 100%;
    }
    .main-bg img{
        width: 100%;
    }
    h1{
        top: 11%;
        width: 68%;
    }
    .main-body{
        width: 64%;
        top: 33%;
        left: 50%;
        z-index: 30;
    }
    .main-dish{
        width: 92%;
        top: 60%;
        left: 50%;
        z-index: 32;
    }
    .main-coffee{
        width: 95%;
        top: 46%;
    }
    .main-miso{
        width: 95%;
        top: 55%;
    }
    .main-soft{
        width: 94%;
        top: 46%;
        left: 50%;
    }

    #select-card-2nd .select-card-window,#select-card-3nd .select-card-window, #select-card-4nd .select-card-window{
       top: -32px;
    }
    .select-container-ch img{
        width: 86%;
    }
    #select-list-first-dish img,#select-list-first-drink img{
        width: 44%;
    }

    .menu-title{
        margin-top: 3;
    }
    .topping-box{
        width: 46%;
    }
    .topping-box img{
        width: 100%;
    }

    .button-img{
        width: 70px;
        left: 6%;
    }
    .search-shop{
        padding-left: 27%;
    }

    .combi-title img:nth-child(3){
        width: 52%;
    }
    .icon-navi-active{
        right: -5.5%;
    }

    .ob-index{
        margin-bottom: 40px;
    }

    

    .circle{
        width: 22px;
        height: 22px;
    }
    .inner-circle{
        top: -13px;
        left: -13px;
        width: 48px;
        height: 48px;
    }

    #ob-dish .ob-contents{ margin-bottom: 37px; }
    #ob-dish .ob-contents:first-child{ margin-top: -80px; }
    #ob-dish{ margin-bottom: 68px; }
    #ob-cheese .ob-wrapper{ margin-top: -80px; margin-bottom: 68px; }
    #ob-oroshiso .ob-wrapper{ margin-top: -90px; margin-bottom: 58px; }
    #ob-egg .ob-wrapper{ margin-top: -65px; margin-bottom: 65px; }
    #ob-pine .ob-wrapper{ margin-top: -90px; margin-bottom: 38px; }
    #ob-miso .ob-wrapper{ margin-top: -116px; margin-bottom: 68px; }
    #ob-cone .ob-wrapper{ margin-top: -70px; margin-bottom: 65px; }
    #ob-coffee .ob-wrapper{ margin-top: -70px; margin-bottom: 75px; }
    #ob-orange .ob-wrapper{ margin-top: -90px; margin-bottom: 80px; }
    #ob-ichigo .ob-wrapper{ margin-top: -95px; margin-bottom: 60px; }
    #ob-soft .ob-wrapper{ margin-top: -125px; margin-bottom: 40px; }

    #dish-circle-1{ top: 2.9%; left: 10%; }
    #dish-circle-2{ top: 8%; left: 70%; }
    #dish-circle-3{ top: 18%; left: 25%; }
    #dish-circle-4{ top: 35%; left: 26%; }
    #dish-circle-5{ top: 32%; left: 36%; }
    #dish-circle-6{ top: 34%; left: 62%; }
    #dish-circle-7{ top: 40%; left: 41%; }
    #dish-circle-8{ top: 23%; left: 37%; }
    #dish-circle-9{ top: 20%; left: 59%; }
    #dish-circle-10{ top: 10%; left: 46%; }
    #dish-circle-11{ top: 15%; left: 70%; }
    #dish-circle-12{ top: 22%; left: 33%; }
    #dish-circle-13{ top: 31%; left: 71%; }

    .attension-card{
        margin-top: 78px;
        padding: 35px 30px 32px 30px;
    }
    .attension-card ul li{
        margin-bottom: 6px;
    }
    #obsession{
        padding-bottom: 30px;
        background-image: linear-gradient(#4D3631 2%, #010000 25%, #36201B 45%, #59372F 75%,#151312 100%);
        background-image: -moz-linear-gradient(#4D3631 2%, #010000 25%, #36201B 45%, #59372F 75%,#151312 100%);
        background-image: -webkit-linear-gradient(#4D3631 2%, #010000 25%, #36201B 45%, #59372F 75%,#151312 100%);
    }
    .ob-btn{
        margin-top: 0;
    }
}

@media screen and (max-width: 365px){
    .sp-360{
        display: block;
    }
}