@charset "UTF-8";

/*共通部分-------*/

/*remを使うための準備*/
html{
        font-size: 100%;
        scroll-behavior: smooth;
}
body{
        font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        line-height: 1.7;
        color: rgb(54, 48, 42);
}
a{
        text-decoration: none;
}
img{
        max-width: 100%;
}


/*ページに戻るボタン------------------------*/
.pagetop {
        height: 50px;
        width: 50px;
        position: fixed;
        right: 30px;
        bottom: 30px;
        background: rgba(0, 0, 0, 0);
        border: solid 3px #632d31;
        border-bottom: solid 3px #fbb03b;
        border-radius: 0 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
}  
.pagetop__arrow {
        height: 15px;
        width: 15px;
        border-top: 3px solid #632d31;
        border-right: 3px solid #fbb03b;
        transform: translateY(20%) rotate(-45deg);
}

/*TOP pageここから-----------------------------------------------*/
/*HEADER-------*/
.logo{
        width: 210px;
        min-width: 150px;
        margin-top: 14px;
}
.main-nav{
        display: flex;
        list-style: none;
        font-size: 1.25rem;
        text-transform: uppercase;
        margin-top: 6%;
        margin-bottom: 30px;
}
.main-nav li{
        margin-left: 30px;
}
.main-nav a{
        border-left: 1px solid #632d31be;
        border-right: 5px solid #632d31be;
        font-family: 'Philosopher', sans-serif;
        padding: 100px 10px 5px 10px;
        background: #a04249;
        color: #F6F7F8;
        transition-duration: 2s;
        box-shadow: 1px 1px 3px #333;
}
.main-nav a:hover{
        border-bottom: 1px solid #632d31ea;
        border-right: 3px solid #632d31be;
        font-weight: bold;
        transition: all 1.5s ease-out;
        color: #a7a7a7;
        padding-bottom: 23%;
        transition-duration: 1s;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
.page-header{
        display: flex;
        justify-content: space-between;
}

/*スライドショー修正-------------*/
/*jQuery-------------*/
/* .mv{
        overflow: hidden;
        max-width: 95%;
        margin: 0 auto;
}
.flex-direction-nav a::before{
        font-size: 30px;
}
.slidetop .home-content{
        margin-top: 0;
        padding-bottom: 50px;
}
.flexslider{
        border: none;
} */

/*slick-------------*/
/* .slider {
        width: 95%;
        border-radius: 20px;
        overflow: hidden;
        margin: 0 auto;
}
.slick-img img {
        width: 100%;
}
@keyframes fdzm {
        0% {
                transform: scale(1);
        }
        100% {
                transform: scale(1.1);
        }
}
.animation {
        animation: fdzm 4s 0s forwards;
} */


/* 効果をかけるためのスタイル設定 */
#slick-main .slick-slide{
	/* slickによってelement.styleで付けられるopacityを無効化 */
	opacity: 1 !important;
}
#slick-main .slideobject{
	/* フェード要素の初期設定 */
	opacity: 0;
	transition: 0s;
}
#slick-main .slick-active .slideobject{
	/* slick-active(効果開始)の際のフェード設定 */
	/* [重要]slick側の設定と同じdurationを取る */
	opacity: 1;
	transition: ease 5.0s;
}
#slick-main .slick-continue .slideobject{
	/* エフェクトの継続用に付与したslick-continueのフェード設定 */
	/* [重要]slick側の設定と同じdurationを取る */
	opacity: 0;
	transition: ease 5.0s;
}
#slick-main figure.image{
	/* 画像 ズーム要素の初期設定 */
	transform: scale(1.0, 1.0);
	transition: 0s;
}
#slick-main .slick-active figure.image{
	/* 画像　slick-active(効果開始) */
	/* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */
	transform: scale(1.1, 1.1);
	transition: ease 10.0s; 
}
#slick-main .slick-continue figure.image{
	/* 画像　slick-continue */
	/* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */
	transform: scale(1.4, 1.4);
	transition: ease 10.0s;
}
#slick-main p.text{
	/* テキスト 初期設定 */
	opacity: 0;
	transition: 0s;
}
#slick-main .slick-active p.text{
	/* テキスト　slick-active(効果開始) この辺は自由にduration */
	opacity: 1;
	transition: ease 1.0s; 
	transition-delay: 1.0s;
}
#slick-main .slick-continue p.text{
	/* テキスト　slick-continue この辺は自由にduration */
	opacity: 0;
	transition: ease 1.0s; 
}

/* スライド周りの基本スタイル */
.slick{
        width: 100%;
        margin: 0 auto;
}
.slideobject{
	position: relative;
	z-index: 10;
	overflow: hidden;
	border-radius: 20px;
        height: 35vh;
        width: 100%;
}
.slideobject figure.image1{
        background-image: url(../img/1x/slide1-100.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
        width: 100%;
        height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slideobject figure.image2{
        background-image: url(../img/1x/slide2-100.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
        width: 100%;
        height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slideobject figure.image3{
        background-image: url(../img/1x/slide3-100.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
        width: 100%;
        height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slideobject figure.image4{
        background-image: url(../img/1x/slide4-100.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
        width: 100%;
        height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slideobject p.text{
	font-size: 20px;
	line-height: 1.5em;
	width: 10.0em;
	height: 3.0em;
	margin: auto;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
}

/* slick-theme.cssのドット編集 */
.slick-dots
{
    bottom: -30px;
}
.slick-dots li
{
    margin: 0 7px;
}
.slick-dots li button:before
{
        width: 8px;
        height: 22px;

        content: '';
        
        border: 1px solid #333;
        text-align: center;

        opacity: .15;
}




/**最大幅の指定**/
.wrapper{
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 4%;
}

.wrapper_max{
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 2%;
}

/*HOME-------------------------*/
.text{
        font-size: 2rem;
       margin-top: -55px;
       margin-left: 50px;
       letter-spacing: 0.75rem;
       font-family: 'Philosopher', sans-serif;
}
.textline{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.15rem;
        letter-spacing: 0.75em;
        margin-right: 50px;
        margin-top: -30px;
        text-align: right;
}
.headline{
        margin-top: 100px;
        margin-bottom: 120px;
        font-weight: normal;
}

/*見出し---------------------------------*/
h2 span{
        background: linear-gradient(transparent 60%, #fbb03b 70%);
        border-radius: 80% 50% 60% 15%/80% 75% 15% 75%;
}
h3 span{
        background: linear-gradient(transparent 80%, #fbb03b 70%);
        border-radius: 80% 50% 60% 15%/80% 75% 15% 75%;
}
p span{
        background: linear-gradient(transparent 80%, #fbb03b 70%);
        border-radius: 80% 50% 60% 15%/80% 75% 15% 75%;
}
.page-tittle{
        letter-spacing: 0.4em;
        text-align: center;
        font-size: 2.5rem;
        font-family: 'Popping',sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 120px;
        margin-top: 260px;
}
.tittle-page{
        letter-spacing: 0.4em;
        text-align: center;
        font-size: 2.5rem;
        font-family: 'Popping',sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        margin-bottom: 70px;
}
.desc{
        background: #3d5762;
        margin-top: 150px;
        padding-bottom: 120px;
        border-radius: 0 15%;
}
.concept{
        color: #fff;
        text-align: center;
        background-image: url(../img/1x/cafe.png),url(../img/1x/cafe2.png); 
        background-repeat: no-repeat;
        background-size: 23%;
        background-position: left 7%,right 100px;
        padding-bottom: 160px;
}
.text-a{
        letter-spacing: 0.25em;
        font-size: 1.5rem;
        line-height: 80px;
        font-weight: bold;
        
}
.chefimg{
        padding-top: 50px;
        padding-bottom: 25px;
        margin-left: 39%;
        width: 200px;
}
/*
.desc > .wrapper{
        background-image: url(../img/1x/cafe.png) no-repeat left top;
        background-size: contain;
}*/

/*ボタン-------------------*/
.online-button{
        text-align: center;
        margin-top: -15px;
}
.menu-button{
        text-align: center;
        margin-top: -156px;
}
.button{
        font-family: 'Popping',sans-serif;
        font-weight: bold;
        letter-spacing: 0.2em;
        font-size: 1.375rem;
        background: #a04249;
        color: #fff;
        border-radius: 0 15%;
        padding: 28px 12%; 
        transition-duration: 4.5s;
}
.button:hover{
        color: #3c3939;
        border-bottom: 2px solid #333;
        border-right: 4px solid #333;
        border-radius: 25%;
        background: #49030af1;
        box-shadow: 10px 10px rgba(192, 92, 16, 0.648);
        transition-duration: 1.8s;
}

/*RECOMMED PRODUCT-------------*/
.nowrap{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-bottom: 150px;
}
.recommeded figure{
        flex-basis: 66%;
}
.recommeded figure img{
        width: 100%;
}
.recommeded .entry-content{
        flex-basis: 30%;
        margin-top: 3em;
}
.recommeded h3{
        font-family: 'Popping',sans-serif;
        font-weight: bold;
        font-size: 1.3rem;
        letter-spacing: 0.12em;
        text-align: center;
        margin-bottom: 1.5em;
        width: 100%;
}
.recommeded p{
        font-weight: bold;
        font-size: 0.85rem;  
        line-height: 2.5em;
        padding: 0 25px 30px 25px;
        border-radius: 15%;
        background: #fff;
}
.bg-1{
        background: url(../img/1x/r-rbg-8.png) no-repeat right bottom;
        background-size: 60% auto;
        padding-bottom: 50px;
       
}
.bg-2{
        background: url(../img/1x/r-lbg-8.png) no-repeat left bottom;
        background-size: 45% auto;
        padding-bottom: 100px;
}
.bg-3{
        background: url(../img/1x/r-rbg-2-8.png) no-repeat right bottom;
        background-size: 62% auto;
        padding-bottom: 320px;
}

/*MATERIAL------------------------*/
.box{
        max-width: 100%;
        height: 140px;
        background: #3d5762;   
}
.gn{
        display: flex;
        justify-content: space-around;
        margin-top: -100px;
}
.material-title{
        flex-basis: 25%;
}
.material img{
        border-radius: 50%;
}
.material h3{
        text-align: center;
        font-family: 'Popping',sans-serif;
        margin-top: 60px;
        margin-bottom: 20px;
}
.material p{
        font-weight: bold;
        line-height: 2em;
        margin-left: 15px;
}

/*ACCESS-----------------*/
.map{
        margin-bottom: 180px;
}
.map h3{
        text-align: center;
        font-family: 'Popping',sans-serif;
        margin-top: 2em;
        margin-bottom: 1.5em;
}
.map p{
        font-weight: bold;
        margin-bottom: 1.5em;
}
.map-flex{
        display: flex;
        justify-content: space-between;
}
.map figure{
        flex-basis: 66%;
}
.info-title{
        flex-basis: 28%;
}
map figure img{
       width: 100%;
}
.info-img{
        background: #3d5762;
        padding-bottom: 10px;
        border-radius: 10% 10% 0 0;
        width: 100%;
        height: 400px;
}
.map-img{
        background: #3d5762;
        padding-top: 40px;
        border-radius: 0 0 10% 10%;
}
.snsicon{
        list-style: none;
       display: flex;
       justify-content: right ;
       
       
}
.snsicon img{
        margin-right: 18px;
        margin-bottom: 8px;
}

/*TOP pageここまで-----------------------------------------------*/

/*NEWS----------------------------------------*/
.news-logo-img{
        max-width: 45%;
        margin-right: 0;
        margin-left: auto;
        margin-top: -160px;
}
.frame{
        border: 1px solid rgba(0, 0, 0, 0.3);
        padding-top: 80px;
        margin-top: 240px;
}
.letter{
        margin-bottom: 20px;
}
.letter h3{
        text-align: center;
        margin-bottom: 160px;
        padding: 10px 0;
        letter-spacing: 1.5em;
        font-size: 1.5rem;
        font-family: 'Tsukimi Rounded', sans-serif;
        font-weight: bold;
        background: #a04249;
        color: #fff;
}
.letter p{
        font-size: 1.2rem;
        letter-spacing: 0.5em;
        font-family: 'Tsukimi Rounded', sans-serif;
}
.news-header{
        background: url(../img/1x/news-head-100.jpg) no-repeat center;
        background-size: cover;
        width: 100%;
        min-height: 20vh;
}
.news-title{
        margin-bottom: 0px;
        margin-top: -50px;
}
.news-title h2{
        letter-spacing: 0.4em;
        text-align: center;
        font-size: 2.5rem;
        font-family: 'Popping',sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        background: #fff;
        border-radius: 20% 20% 0 0;
        width: 50%;
        margin: 0 auto;
}
/*list---*/
.news-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 240px;
}
.news-item{
        flex-basis: 47%;
        margin-bottom: 50px;
}
.news-item-set{
        display: flex;
}
.news-txt{
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        position: relative;
        margin: 0 auto;
        flex-basis: 80%;
}
.news-txt::after{
        content: ">";
        display: block;
        position: absolute;
        right: 10px;
        color: #fbb03b;
}
.news-item figure{
        max-width: 100%;
        flex-basis: 50%;
}
.news-txt h3{
        margin-top: 30px;
        font-size: 1rem;
        padding-right: 1em;
}
.news-txt p{
        bottom: 0;
        left: 0;
        position: absolute;
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.5);
}
.news-list a{
        display: block;
        color: rgb(54, 48, 42);
        transition-duration: 1.5s;
}
.news-list a:hover{
        color: rgba(0, 0, 0, 0.5);
        opacity: 0.5;
        transition-duration: 1.5s;
}
/*数字リンク---*/
.wp-pagenavi{
        list-style: none;
        display: flex;
        justify-content: center;
        margin-top: 100px;
        margin-bottom: 240px;
}
.wp-pagenavi li{
       margin: 0 auto;
}
.wp-pagenavi a{
        color: rgb(54, 48, 42);
        transition-duration: 0.5s;
        font-weight: bold;
        font-size: 1.5rem;
}
.wp-pagenavi a:hover{
        color: rgba(54, 48, 42, 0.5);
        transition-duration: 1s;
}
/*NEWSここまで---------------------------*/

/*MENU----------------------------------*/
.menu-header{
        background: url(../images/coffee-2085314_1280.png) no-repeat center;
        background-size: cover;
        width: 100%;
        min-height: 20vh;
}
.menu-font{
        text-align: center;
        font-family: 'Damion', cursive;
        font-size: 3rem;
        letter-spacing: 0.8em;
        margin-top: 240px;
}
.menu-box{
        margin-top: -35px;
}
.menu-box h3{
        margin-top: 100px;
        margin-bottom: 24px;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.5rem;
        letter-spacing: 0.5em;
}
.menu-box-line{
        border-left: 3px solid #000;
        padding-left: 24px;
        padding-bottom: 60px;
}
.menu-grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding-bottom: 24px;
}
.card-flex-text p{
        font-family: 'Philosopher', sans-serif;
}
.card-flex-text-text{
        font-weight: bold;
}
.menu-pagenavi{
        list-style: none;
        display: flex;
        justify-content: center;
        margin-top: 240px;
        margin-bottom: 240px;
}
.menu-pagenavi li{
        margin: 0 auto;
 }
 .menu-pagenavi a{
         color: rgb(54, 48, 42);
         transition-duration: 0.5s;
         font-weight: bold;
         font-size: 1.5rem;
 }
 .menu-pagenavi a:hover{
         color: rgba(54, 48, 42, 0.5);
         transition-duration: 1s;
 }
 .menu-box img{
        border-radius: 8%;
 }
/*MENUここまで----------------------------------*/

/*CONTACT-------------------------------*/
.desc-image{
        background: url(../images/sweets_waifu2x.webp) no-repeat center center;
        background-size: cover;
        min-height: 100vh;
        padding-bottom: 100px;
}
/*Googleフォーム CONTACT*/
.gform{
        padding-top: 3em;
        text-align: center;
}

/*店舗情報・地図*/
.add-map{
        margin-bottom: 180px;
}
.add-h{
        font-family: 'Popping',sans-serif;
        text-align: center;
        margin-bottom: 2em;
        font-size: 1.2rem;
}
.add-h2{
        color: #fff;
        background: #a04249;
        padding-top: 10px;
        padding-bottom: 8px;
        font-family: 'Satisfy', cursive;
        text-align: center;
        letter-spacing: 0.65em;
        font-size: 1.5rem;
}
.add{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        margin-bottom: 10px;
        margin-top: 50px;
}
.add p{
        margin-bottom: 50px;
        font-size: 1.1rem;
}
.add-text2{
        margin-top: 30px;
}
.add-snsicon{
        display: flex;
        list-style: none;
        justify-content: center;
        margin-bottom: 15px;
}
.add-snsicon li{
        margin-left: 40px;
}

/*iframe*/
iframe{
        width: 100%;
}
/*CONTACTここまで--------------------------*/


/*フッター------------------------*/
footer{
        background: #a04249;
        text-align: center;
        padding: 26px 0;
}
footer p{
        color: #fff;
        font-size: 0.875rem;
}
.home footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
}
footer img{
        width: 10%;
        margin-bottom: 10px;
}


/*スマホ版メニュー*/
.menu-btn{
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: rgba(0, 0, 0, 0); 
}
.menu-btn span {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #fbb03b;
    position: absolute;
    transition: all 0.5s;
}
.menu-btn span:before,
.menu-btn span:after{
        content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #632d31;
    position: absolute;
    transition: all 0.5s;
}
.menu-btn span::before{
        bottom: 8px;
}
.menu-btn span::after{
        top: 8px;
}

/*チェック状態の時の変化--------*/
#menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);
        /*メニューオープン時は真ん中の線を(span)透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
}

#menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
}
#menu-btn-check{
        display: none;
}
/*スマホ版メニューの中身*/
.nmenu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        /*通常時は画面右に押し込む----------*/
        left: 100%;
        z-index: 80;
        background-color: rgba(18, 36, 45, 0.85);
        transition: all 0.5s;
}
.nmenu-content ul {
        padding: 70px 10px 0;
}
.nmenu-content ul li {
        background: linear-gradient(transparent 90%, #632d31 70%);
        border-radius: 80% 50% 60% 15%/80% 75% 15% 75%;
        list-style: none;
}
.nmenu-content ul li a {
        font-family: 'Philosopher', sans-serif;
        font-weight: bold;
        display: block;
        width: 100%;
        font-size: 22px;
        box-sizing: border-box;
        color:#fbb03b;
        text-decoration: none;
        padding: 9px 15px 10px 22px;
        position: relative;
}
.nmenu-content ul li a::before {
        content: "";
        width: 11px;
        height: 10px;
        border-top: solid 2px #632d31;
        border-right: solid 2px #fbb03b;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
}

/*チェック状態の時*/
#menu-btn-check:checked ~ .nmenu-content {
        left: 0;/*メニューを画面内へ*/
}
   
    

/*モバイル版--------------------------*/
@media(max-width:700px){
        .news-title h2{
                font-size: 2rem;
                padding: 12px 0 30px 0;
        }
}
@media(max-width:500px){
        .news-title h2{
                font-size: 1.5rem;
        }
}

@media(max-width:600px){
        html{
                font-size: 80%;
                width: 100%;
        }
        .mv{
                margin-top: 5px;
        }
        
        /*HEADER*/
        /*スマホではメニューを非表示にする*/
        .page-header nav{
                display: none;
        }
        .main-nav{
                font-size: 1rem;
                margin-top: 10px;
        }
        .main-nav li{
                margin: 0 20px;
        }

        .page-header{
                flex-direction: column;
                align-items: center;
                margin-bottom: 15px;
        }

        
        /*HEADLINE*/
        .headline{
                margin-bottom: -163px;  
        }
        .text{
                text-align: center;
                margin-top: -20px;
                font-size: 1.5rem;
        }
        .textline{
                display: none;
        }
        
        /*CONCEPT*/
        .desc{
                height: 630px;
        }
        .concept{
                background-image: none;
                display: flex;
                flex-direction: column;
        }
        .chefimg{
                margin-top: 20px;
                margin-bottom: -20px;
                width: 40%;
                margin-left: 110px;
        }
        .page-tittle{
                font-size: 2rem;
                margin-bottom: 50px;
                margin-top: 130px;
        }
        .tittle-page{
                font-size: 2rem;
        }
        .text-a{
                font-size: 1rem;
                margin-top: -30px;
                line-height: 4.5em;
        }

        /*RECOMMED PRODUCT*/
        .duct{
                display: none;
        }
        .recommeded figure{
                flex-basis: 100%;
        }
        .recommeded .entry-content{
                flex-basis: 100%;
                margin-bottom: -70px;
        }
        .recommeded p{
                line-height: 2.3em;
                width: 80%;
                padding: 0 8px 10px 8px;
                margin-left: 38px;
                font-weight: bold;
        }
        .bg-1{
                background-size: 80% auto;
                padding-bottom: 100px;
        }
        .bg-2{
                background-size: 90% auto;
                padding-bottom: 130px;
        }
        .bg-3{
              padding-bottom: 205px;
              background-size: 92% auto;
        }

        /*MATERIAL*/
        .box{
                display: none;
        }
        .material{
                display: none;
        }
        .box-ip{
                background: #3d5762;
        }
        .material-ip{
                background: #3d5762;
                margin-bottom: 70px;
                border-top: 3px solid #632d31;
                border-bottom: 3px solid #632d31; 
        }
        .material-flex{
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-around;
                padding-top: 20px;
                padding-bottom: 20px;
        }
        .material-flex img{
                border-radius: 50%;
        }
        .material-flex figure{
                flex-basis: 45%;
        }
        .material-text{
                flex-basis: 39%;
        }
        .material-ip h3{
                font-family: 'Popping',sans-serif;
                font-size: 1rem;
                text-align: center;
                color: #fff;
                margin-bottom: 10px;
                margin-right: 10px;
        }
        .material-ip p{
                font-size: 0.8rem;
                color: #fff;
                font-weight: bold;
                letter-spacing: 0.2em;
        }

        /*ACCESS*/
        .map{
                display: none;
        }
        .map-ip{
                margin-bottom: 50px;
        }
        .map-ip img{
               max-width: 100%;
        }
        .map-img-ip{
                border-radius: 10% 10% 0 0;
                padding-bottom: 40px;
                background: #3d5762;
        }
        .info-img-ip{
                border-radius:  0 0 10% 10%;
                padding-top: 10px;
                background: #3d5762;
        }
        .map-ip h3{
                text-align: center;
                margin-top: 15px;
                margin-bottom: 20px;
        }
        .info-ip{
                display: flex;
                justify-content: space-around;
                flex-wrap: nowrap;
                margin-bottom: 30px;
        }
        .tion-ip-2{
                margin-top: 16px;
        }
        .map-ip p{
                font-size: 0.75rem;
        }
        .access{
                margin-top: 18px;
        }
        .map-ip iframe{
                padding-top: 10px;
                padding-bottom: 10px;
                background: #3d5762;
        }
        .snsicon-ip{
                list-style: none;
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
        }
        .snsicon-ip img{
                width: 50%;
                margin-left: 10px;
        }
        

        /*HOME*/
        .home-content{
                margin-top: 20%;
        }
        
        /*NEWS*/
        .news-list{
                flex-direction: column;
        }

        /*MENU*/
        .menu-grid{
                grid-template-columns: 1fr 1fr;
        }
}


/*PC版-----------------------------------*/
@media(min-width:601px){
       .hamburger-menu{
        display: none;}

        /*RECOMMEDED PRODUCT*/
        .blend-ip{
                display: none;
        }
        .pro{
                display: none;
        }
        /*MATERIAL*/
        .box-ip{
        display: none;
        }
        .material-ip{
                display: none;
        }
        /*ACCESS*/
        .map-ip{
                display: none;
        }
}

@media(max-width:1000px){

        /*PRODUCT*/
        .bg-1{
                flex-direction: column;
                background-size: 44%;
        }
        .bg-2{
                flex-direction: column-reverse;
                background-size: 38%;
        }
        .bg-3{
                flex-direction: column;
                background-size: 50%;
                padding-bottom: 226px;
        }
        .entry-content h3{
                margin-top: 12%;
        }

        /*MATERIAL*/
        .material{
                font-size: 0.87rem;
                font-weight: bold;
        }

        /*ACCESS*/
        .map-flex{
                flex-direction: column;
        }
        .map-flex figure img{
                width: 100%;
        }
        .snsicon{
                justify-content: center;
                margin-bottom: 10px;
        }
        .snsicon img{
                margin-left: 25px;
        }
        .n{
                display: flex;
                justify-content: space-around;
        }
        .in{
                flex-basis: 40%;
        }
        .mation{
                flex-basis: 30%;
                margin-top: 30px;
        }
        .map-flex{
                margin-bottom: 10px;
        }
}