@charset "UTF-8";
@import url("css-smacss/style-base.css");
@import url("css-smacss/style-layout.css");
@import url("css-smacss/style-module.css");
@import url("css-smacss/style-state.css");
@import url("css-smacss/style-theme.css");

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
}



        html {
            font-size: 62.5%;
			margin-top: 0px!important;
        }

        @media screen and (min-width: 577px) {
            html {
                font-size: 0.625vw;
            }
        }

        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        h1,
        h2,
        h3,
        p {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        img {
            width: 100%;
            height: auto;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            opacity: 0.7;
        }

        .sp-only {
            display: none;
        }

        @media (max-width: 576px) {
            .sp-only {
                display: block;
            }
        }

        .pc-only {
            display: block;
        }

        @media (max-width: 576px) {
            .pc-only {
                display: none;
            }
        }

        .container {
            padding: 0;
        }

        div[class^="col-"] {
            padding: 0;
        }

        .row {
            margin: 0;
        }

        /* スマホ縦画面用 */
        @media screen and (max-width: 320px) {
            .container {
                padding: 0;
            }

            div[class^="col-"] {
                padding: 0;
            }

            .row {
                margin: 0;
            }
        }

        .main-vk {
            font-family: YuGothic, "Yu Gothic", sans-serif;
            background-image: url(https://thevegeboykitchen.pro/wp/wp-content/themes/cocoon-master/images/paper.jpg);
            background-repeat: repeat;
        }

        .info-area {
			font-family: "Noto Sans JP", sans-serif;
            background-image: url(https://thevegeboykitchen.pro/wp/wp-content/themes/cocoon-master/images/info-back.png);
            background-repeat: no-repeat;
            background-size: 90%;
            background-position: center center;
            margin-top: 3rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 70rem;
            color: #fff;
        }

        @media (max-width: 576px) {
            .info-area {
                background-image: url(https://thevegeboykitchen.pro/wp/wp-content/themes/cocoon-master/images/info-back_sp1.png);
                background-size: cover;
                height: 40rem;
                margin-top: -0.5rem;
            }
        }

        .info-wrapper {
            margin-top: 1rem;
        }

        @media (max-width: 576px) {
            .info-wrapper {
                margin-top: 0;
                margin-left: 1.5rem;
            }
        }

        .info-title {
            font-size: 3.2rem;
            letter-spacing: 1px;
            text-align: center;
        }

        @media (max-width: 576px) {
            .info-title {
                font-size: 1.9rem;
                line-height: 1.4;
            }
        }
		
		@media (max-width: 330px) {
            .info-title {
                font-size: 1.6rem;
            }
        }

        .info-txt {
            font-size: 1.8rem;
            width: 85rem;
            margin-top: 1.5rem;
            line-height: 2;
            text-align: center;
        }

        @media (max-width: 576px) {
            .info-txt {
                font-size: 1.4rem;
                width: 90%;
                text-align: left;
                margin-left: 1rem;
            }
        }
		
		@media (max-width: 330px) {
            .info-txt {
                font-size: 1.3rem;
                line-height: 1.7;
            }
        }

        .swiper-area {
            margin-top: 2rem;
        }

        @media (max-width: 576px) {
            .swiper-area {
                margin-top: 5rem;
				height: 200px;
            }
        }

        .swiper-container {
            margin: 0;
        }

        .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-transition-property: -webkit-transform;
            transition-property: -webkit-transform;
            transition-property: transform;
            transition-property: transform, -webkit-transform;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

        .swiper-slide {
            -ms-flex-negative: 0;
            flex-shrink: 0;
            position: relative;
            -webkit-transition-property: -webkit-transform;
            transition-property: -webkit-transform;
            transition-property: transform;
            transition-property: transform, -webkit-transform;
        }

        .swiper-slide img {
            width: 250px;
            height: 250px;
        }

        @media (max-width: 576px) {
            .swiper-slide {

            }
            .swiper-slide img {
                width: 250px!important;
                height: 200px;
				margin: 0 0.5em;

            }
        }

        .swiper-container-free-mode>.swiper-wrapper {
            -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
        }

        .access-area {
            margin-top: 7rem;
        }

        @media (max-width: 576px) {
            .access-area {
                margin-top: 5rem;
            }
        }

        .access-content {
            width: 85%;
            margin: 0 auto;
            padding: 7rem;
            background-color: white;
        }

        @media (max-width: 576px) {
            .access-content {
                width: 95%;
                padding: 1rem;
            }
        }

        .access-title {
            text-align: center;
        }

        .access-title img {
            margin: 0 auto;
            width: 40%;
        }

        @media (max-width: 576px) {
            .access-title img {
                margin-top: 1.5rem;
                margin-bottom: 0;
                width: 75%;
            }
        }

        .access-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-top: 4rem;
            padding: 0 4rem;
        }

        @media (max-width: 576px) {
            .access-item {
                display: block;
                padding: 0;
            }
        }

        .access-info {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin-right: 1rem;
            text-align: left;
        }

        @media (max-width: 576px) {
            .access-info {
                margin-right: 0;
            }
        }

        .access-info .h1 {
            font-size: 4rem;
        }

        @media (max-width: 576px) {
            .access-info .h1 {
                font-size: 2.3rem;
            }
        }

        .access-info .h5 {
            font-size: 1.9rem;
            line-height: 1.9;
        }

        @media (max-width: 576px) {
            .access-info .h5 {
                font-size: 1.3rem;
            }
        }

        .access-info .fa-phone {
            font-size: 88%;
        }

        .access p {
            line-height: 1.7;
        }

        .access-map {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin-left: 1rem;
            text-align: center;
        }

        @media (max-width: 576px) {
            .access-map {
                margin-top: 1.5rem;
            }
        }

        .access-item-takeout {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 4rem;
            border-top: 1px dashed #ff6600;
            border-bottom: 1px dashed #ff6600;
            margin-left: 4rem;
            margin-right: 4rem;
        }

        @media (max-width: 576px) {
            .access-item-takeout {
                display: block;
                margin-left: 0;
                margin-right: 0;
            }
        }

        .access-img-takeout {
            margin: 1rem 0;
            width: 33%;
        }

        @media (max-width: 576px) {
            .access-img-takeout {
                width: 100%;
            }
        }

        .access-txt-takeout {
            width: 100%;
            margin-left: 3rem;
        }

        @media (max-width: 576px) {
            .access-txt-takeout {
                margin: 0 0 1rem;
            }
        }

        .access-txt-takeout .h1 {
            font-size: 3rem;
            margin-top: 1.5%;
        }

        @media (max-width: 576px) {
            .access-txt-takeout .h1 {
                font-size: 2rem;
            }
        }

        .access-txt-takeout .h5 {
            font-size: 1.8rem;
            line-height: 1.6;
            margin: 1% 0;
        }

        @media (max-width: 576px) {
            .access-txt-takeout .h5 {
                font-size: 1.3rem;
            }
        }

        .access-photoitem {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-top: 5rem;
            padding: 0 4rem;
        }

        @media (max-width: 576px) {
            .access-photoitem {
                margin-top: 3rem;
                padding: 0;
            }
        }

        .access-img {
            width: 23%;
        }

        @media (max-width: 576px) {
            .access-img {
                margin-top: 1rem;
                width: 47%;
            }
        }

        .access-img p {
            margin-top: 1rem;
            font-size: 1.5rem;
            line-height: 1.3;
        }

        @media (max-width: 576px) {
            .access-img p {
                font-size: 1.2rem;
            }
        }

        .access-logo {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-top: 9rem;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        @media (max-width: 576px) {
            .access-logo {
                margin-top: 3rem;
            }
        }

        .access-logo .img-wrapper {
            text-align: center;
        }

        .access-logo .img-wrapper .vegecompany-logo {
            width: 20.5rem;
            height: auto;
        }

        @media (max-width: 576px) {
            .access-logo .img-wrapper .vegecompany-logo {
                width: 12rem;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
        }

        .access-logo .img-wrapper .manbo-logo {
            width: 20.5rem;
            height: auto;
        }

        @media (max-width: 576px) {
            .access-logo .img-wrapper .manbo-logo {
                width: 12rem;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
        }

        .access-logo p {
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            text-align: center;
        }

        @media (max-width: 576px) {
            .access-logo p {
                font-size: 1.2rem;
            }
        }

        .footer {
            margin-top: 5rem;
            background-image: url(https://thevegeboykitchen.pro/wp/wp-content/themes/cocoon-master/images/footer_img1.png);
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
            padding: 4rem 0 3rem;
        }

        .footer p {
            font-size: 1.5rem;
            text-align: center;
        }

        @media (max-width: 576px) {
            .footer p {
                font-size: 1.2rem;
            }
        }

        .footer .sns-icon {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin: 3rem 0 2rem;
        }

        .footer .fab {
            display: block;
            margin: 0 1rem;
        }

        @-webkit-keyframes zoomUp {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            100% {
                -webkit-transform: scale(1.15);
                transform: scale(1.15);
            }
        }

        @keyframes zoomUp {

            /* 1.15倍させる指定 */
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            100% {
                -webkit-transform: scale(1.15);
                transform: scale(1.15);
            }
        }

        .swiper-slide {
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .swiper-slide-active .slide-img,
        .swiper-slide-duplicate-active .slide-img,
        .swiper-slide-prev .slide-img {
            /* 12秒かけて拡大させる */
            -webkit-animation: zoomUp 12s linear 0s;
            animation: zoomUp 12s linear 0s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .slide-img {
            background-size: cover;
            background-position: center center;
            /* 背景画像は中央を軸に表示させる */
            height: 100vh;
            /* 600pxの高さで表示させる */
        }
		
		
		.text-point{
			color: #dc3545!important;
			font-size: 14px!important;
		}


		.insta-area{
			margin-top: 2rem;
		}
		.insta-area a{
			color: #dc3545!important;
			font-size: 14px!important;
		}
		.insta-area img{
			width:  30px!important;
			margin-right: 1.25rem;
		}
		
		.text-danger a{
			color: #dc3545!important;
		}
		
		#tc-widget{
		}




.yoyaku-area{
	margin-top: 10px;
}

.tc-header{
	margin-top: 10px;
	
}
.tc-body{
	
}


.yoyaku-title{
	text-align: center;
	font-size: 3rem;
}
.yoyaku-tel{
	text-align: center;
	font-size: 4.8rem;
}
.yoyaku-tel a{
	color: #dc3545;
}
.yoyaku-wedget{
	text-align: center;
}



#tc-widget .tc-wrap{
	width: 95%!important;
	float: none;
	margin-left: 25px;
}
.tc-body{
	padding: 0 10px;
}
.tc-date,.tc-time,.tc-ppl{
	margin-right: 30px!important;
}

/*834px以下*/
@media screen and (max-width: 834px){
	.yoyaku-title{
	text-align: center;
	font-size: 2rem;
	}
	.yoyaku-tel{
	text-align: center;
	font-size: 3rem;
	}
	.yoyaku-tel a{
	color: #dc3545;
	}
#tc-widget .tc-wrap{
	width: 100%!important;
	float: none;
	margin-left: 0px;
}
.tc-body{
	padding: 0 10px;
}
.tc-date,.tc-time,.tc-ppl{
	margin-right: 30px!important;
}
	#tc-widget{
	width: 100%!important;
	}
	#tc-widget input[type='text'],
	#tc-widget select{
		width: 200px!important;
	}
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/************************************
2025追加
************************************/
/*スタッフ募集*/
/* スタイル 13 */
.sbox{
	padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
	border-radius:0;
	border-width: 0;
	position: relative;
	z-index: 0;
}

.sbox:before{
	position: absolute;
	border: 2px dashed #fff;/*破線の太さ・色*/
	content: '';
	display: block;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin:5px;
	z-index: -1;
	border-radius:3px;
}