@charset "utf-8";

/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
    color:#333;
	font-size: 1em;
    box-sizing: border-box;
}

body {
	font-size: 62.5%;
}

body,
table,
input, textarea, select, option {
	font-family: "Hiragino Kaku Gothic", "ヒラギノ角ゴ", Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    /*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}
.font-g{
    font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif !important;
}
.font-m{
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}


article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

img {
	vertical-align: top;
}

a,
a:link {
	color: #040404;
	text-decoration: none;
}

a:visited {
	color: #040404;
}

a:hover {
	color: #040404;
}

a:active {
	color: #040404;
}


/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
html{
    overflow: auto;
}
body {
	max-width: 640px;
    margin: 0 auto;
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #fafafa;
    overflow: hidden;
}

#container {
	text-align: left;
}

a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}

.sp {
	display: none !important;
}

@media screen and (max-width: 767px) {
	body {
		min-width: inherit;
        font-size: 60%;
	}
	
	body.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	#container {
		padding-top: 60px;
	}

	a:hover,
	a:hover img {
		opacity: 1 !important;
	}

	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}

	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
}
.img100{
    width: 100%;
}

/*
TOP
*/








/*
アニメーション
jsとHTMLで以下のアニメーションを設定。
#start を背景表示。
#start を js-init_1 に設定。
#start img を js-init_2 に設定。
#sc-ani-obj などあとから表示されるものを js-init_3 に設定。

*/
#start{
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9000;
}
#start img{
    width: 142px;
    margin: calc(50vh - 71px) calc(50vw - 71px) 0;
}


.js-init_1{
    display: none;
}
.js-init_2{
    display: none;
}
.js-init_3{
    display: none;
}
.js-init_4{
    transition: .8s;
    transform:scale(1.2);
    opacity: 0;
}
.js-init_4.on{
    opacity: 1;
    transform:scale(1);
}
/**/


#sc-ani-obj{
    height: 68px;
    overflow: hidden;
    position: absolute;
    top: calc((100vh - 224px) / 2 + 194px);
    width: 100%;
}
#sc-ani-obj:after{
    content:"";
    display: block;
    width: 1px;
    border-left:1px #fff solid;
    animation:scroll 2s ease 0s infinite normal;
    margin: 0 auto 0;
}
#sc-text{
    color: #fff;
    border: 1px solid #fff;
    padding: 5px;
    font-size: 10px;
    width: 15em;
    text-align: center;
    letter-spacing: 0.5em;
    margin: 0 auto;
    left:10px;
    right:10px;
    position: absolute;
    top: calc((100vh - 224px) / 2 + 262px);
    display: block;
}
#main-title{
    position: absolute;
    top: calc((100vh - 224px) / 2 - 120px) ;
    display: block;
    width:33%;
    min-width: 260px;
    max-width: 360px;
    left: 10px;
    right: 10px;
    margin: auto auto;
}
#main-title img{
    width: 100%;
}
@keyframes scroll{
    0%{
    height: 0;
    }
    50%{
        height: 150px;
        margin-top: 0;
    }
    100%{
        margin-top: 150px;
        height: 150px;
    }
}

@media screen and (max-width: 767px) {
    #main-title{
        top: calc((100vh - 224px) / 2 - 60px) ;
    }
    .video-wrap video{
        display: none;
    }
}

/* ナビゲーション */
#gHeader_pc{
    display: none;/* PC版 なし */

    position: absolute;
    bottom:0px;
    color:#fff;
    z-index: 100;
    background-color: rgba(0,0,0,0.9);
    width: 100%;
    height: 84px;
}
#gHeader_pc div{
    color:#fff;
}


/* main */
#main{
    background-color: #fff;
    position: relative;
}




/*
メイン
*/
#top{
    margin-top: -1px;
    background: url(./img5/index.png) no-repeat bottom;
    background-size: cover;
    padding-bottom: 0px;
	min-height: 130vh;
}
@media screen and (max-width: 767px) {
	#top{
		min-height: 110vh;
	}
}
#top_img1{
}
#top .top_main{
    text-align: center;
    margin: 0 auto;
    width: 90%;
    max-width: 510px;
    padding-top: 720px;
}
#top .top_main .sougaku{
	width: 33%;
	margin-left: auto;
	margin-right: -10px;
	margin-top: -50px;
}
#top .top_img{
	width: 100%;
	margin-top: 30px;
}

#lead{
    margin-top: -40px;
    padding-bottom: 40px;
}
#lead .lead1{
    width: 80%;
    min-width: 256px;
    margin: 0 auto;
}
#lead .lead2{
    background-color: #231815;
    padding: 40px 0 20px;
    text-align: center;
    margin: 30px 0;
}
#lead .lead2 h2{
    font-size: 200%;
    font-weight: 700;
	color: #fff;
}
#lead .lead2 p{
    font-size: 160%;
    font-weight: 700;
}

#lead .lead2 .lead_date{
	font-size: 50px;
	color: #ffffff; 
}
#lead .lead2 .lead_date span{
	font-size: 70px;
	color: #ffffff; 
}
@media screen and (max-width: 767px) {
	#lead .lead2 .lead_date{
		font-size:26px;
		color: #ffffff; 
	}
	#lead .lead2 .lead_date span{
		font-size: 46px;
		color: #ffffff; 
	}
}
#lead .lead2 .lead_img{
    width: 80%;
    margin: 10px auto 10px;
}
#lead .lead3{
    width: 80%;
    min-width: 270px;
    margin: 0 auto;
}
#lead .lead3 h3{
    font-weight: 700;
    font-size: 160%;
    color: #ea5514;
    text-align: center;
    margin-top: 60px;
    letter-spacing: 0.05em;
}
#lead .lead3 h3:after{
    content:" ";
    display: block;
    background-color: #333;
    height: 3px;
    width: 20%;
    margin: 10px auto 20px;
}
#lead .lead3 p{
    font-size: 120%;
    line-height: 200%;
}
#lead .lead3 a{
    color: #ea5514;
    text-decoration: underline;
}
#lead .lead4{
    width: 80%;
    min-width: 270px;
    margin: 0 auto;
    border: 5px solid #ea5514;
    padding: 25px;
    margin-top: 25px;
}
#lead .lead4 h3{
    font-weight: 700;
    font-size: 160%;
    color: #34a7bf;
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}
#lead .lead4 p{
    font-size: 120%;
    line-height: 200%;
}

#lead .lead5{
	width: 100%;
}
#lead .lead5 .iconimg{
	width: 80%;
	min-width: 270px;
    margin: 0 auto 50px;
}
#lead .lead5 .iconimg2{
	width: 80%;
    margin: 0 auto 30px;
}
#lead .lead5 h3{
	color:#e61241;
	font-size: 37px;
	line-height: 130%;
	font-weight: 900;
}
#lead .lead5 p.caution{
	font-size: 90%;
	margin-top: 3px;
}
#lead .lead5 p{
	font-size: 19px;
	margin-top: 10px;
}
@media screen and (max-width: 767px) {
	#lead .lead5 h3{
		font-size: 22px;
	}
	#lead .lead5 p{
		font-size: 13px;
	}
}
#lead .lead5 .sidebox{
	display: flex;
	margin: 30px 0px;
}
#lead .lead5 .sidebox .textbox1{
	padding: 20px 10px 10px 40px;
	width: 68%
}
#lead .lead5 .sidebox .imgbox1{
	width: 32%; 
	padding-top: 20px;
}
#lead .lead5 .sidebox .textbox2{
	padding: 20px 20px 10px 20px;
	width: 50%
}
#lead .lead5 .sidebox .imgbox2{
	width: 50%;
	padding-top: 20px;
}
#lead .lead5 .sidebox .textbox3{
	padding: 20px 10px 10px 40px;
	width: 67%
}
#lead .lead5 .sidebox .imgbox3{
	width: 43%; 
	padding-top: 20px;
}
@media screen and (max-width: 767px) {
	#lead .lead5 .sidebox .textbox1{
		width: 73%;
	}
	#lead .lead5 .sidebox .textbox1,#lead .lead5 .sidebox .textbox3{
		padding: 20px 10px 10px 20px;
	}
}


#shop{
    padding-top: 20px;
    background-color: #fce7e2;
}
#shop h2{
    width: 31.1%;
    margin: 40px auto;
}
#shop .shoplist{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:20px 15px;
}
#shop .shoplist .shop_index_box{
    width: 49%;
    padding:10px 8px;
    background-color: #fce7e2;
    margin-bottom: 2%;

    text-align: center;
}
#shop .shoplist .shop_index_img{
    width: 100%;
    height: 15vh;
    background-size: cover;
}
#shop .shoplist .shop_index_img a{
    display: block;
    width: 100%;
    height: 100%;
}
#shop .shoplist h3{
    margin-top: 10px;
    font-size: 100%;
}
@media screen and (max-width: 767px) {
	#shop .shoplist h3{
		margin-top: 10px;
		font-size: 120%;
	}
}

#policy{
    padding: 50px 30px 30px;
    border-top: 1px solid #eee;
}
#policy h2{
    font-size: 140%;
    text-align: center;
    padding-bottom: 20px;
}
#policy h3{
    font-size: 120%;
    padding-bottom: 10px;
}
#policy p{
    font-size: 100%;
    padding-bottom: 20px;
}

/**/
#page_header{
    background-color: #e61241;
    padding:0px 0;
}
#page_header img{
    width: 100%;
    margin: 0 auto;
    display: block;
}

/*
shop
*/
.shop_photo{
    width: 100%;
    height: 480px;
    background-size: cover;
    background-repeat: no-repeat;
}
.shop_photo img{
    width: 100%;
    z-index: -1;
    display: block;
}
.shop_number_box{
    padding-top: 20px;
	background-color: #fff;
}
.shop_number{
    background-color: #e61241;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 50%;
    font-size: 25px;
    display: flex;
    justify-content:center;
    align-items:center;
    z-index: 100;
    margin-left: 20px;
}
.shop_box{
    background-color: #fff;
    padding: 20px;
}
.shop_box_gray{
    background-color: #efefef;
    padding: 20px;
}
.shop_box_takeout{
    background-color: #fffcd9;
    padding: 20px;
}
.shop_detail{
    display: flex;
    margin-bottom: 5px;
}
.shop_detail div:first-child{
    width: 20px;
}
.shop_box_gray h2{
    color: #e61241;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.shop_box_takeout h2{
    color: #e61241;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.shop_box_gray .shop_detail div:first-child p,
.shop_box_takeout .shop_detail div:first-child p
{
    color: #e61241;
}
.shop_box .shop_detail div:first-child p
{
    color: #333;
}


.shop_box h1{
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    font-weight: 700;
}
.shop_box p,.shop_box_gray p{
    font-size: 13px;
    line-height: 160%;
}
.shop_box a{
    color: #e61241;
}
.shop_link{
    padding-top: 10px;
}
.shop_caution{
	margin-top: 20px;
    padding: 10px;
	background-color: #ffe8dc;
}
.shop_caution p{
    color: #ff793e;
}

.shop_box_gray_nopadding{
    background-color: #efefef;

}
.shop_antenna_box{
    padding:20px;
    border-bottom: 1px solid #ccc;
}
.shop_antenna_box h3{
    color: #e61241;
    font-weight: 700;
    font-size: 200%;
}
.shop_antenna_main{
    display: flex;
    margin-top: 10px;
}
.shop_antenna_img{
    width: 30.1%;
    margin-right: 3%;
}
.shop_antenna_content p{
    font-size: 120%;
}
ul.shop_antenna_list{
margin-top: 10px;
}
ul.shop_antenna_list li:before{
    content:"●";
    color: #e61241;
}
.shop_antenna_btn{
    width: 80%;
    margin: 0 auto;
}

.shop_btn{
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}
.shop_btn div{
	width: 50%;
}



.back_btn{
    padding: 40px 0 20px;
}
.back_btn a{
    display: block;
    width: 80%;
    background-color: #e61241;
    font-size: 15px;

    padding:10px 8px;
    border-radius:10px;
    margin-bottom: 2%;
    display: flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    border-bottom: 3px solid #ccc;;
    margin: 0 auto;
    color: #fff;
}
.paging{
    margin: 80px 0px 0;
    display: flex;
    justify-content:space-between;
}
.paging div:first-child{
    padding: 0 10px 0 0;
}
.paging div:last-child{
    text-align: right;
    padding: 0 0 0 10px;
}
.paging a{
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 5px 10px;
}


.shop_index_img--end{
    position: relative;
}
.shop_index_img--end:before{
    content:"";
    background: url(./img3/end.png) no-repeat;
    width: 126px;
    height: 93px;
    position: absolute;
    margin: auto;
    top:10px;
    left:10px;
    right: 10px;
    bottom: 10px;
    background-size: 100%;
}