@charset "UTF-8";
/* CSS Document */

html{
	height: 100%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
	font-size: 62.5%;
	letter-spacing: 0.1em;
	color: #475963;
}

body{
	height: 100%;
	background: #e5e5e5;
	font-size: 16px; font-size: 1.6rem;
	line-height: 1.4em;
}

/*--------------------------------------------------------------------------------
 COMMON
-------------------------------------------------------------------------------- */
article, section {
	margin: 0 auto;
	width: 100%;
}

.inner {
    margin: 0 auto;
	width: calc(100% - 100px);
}
@media screen and (max-width:760px){
	.inner {
		width: calc(100% - 40px);
	}
}

a {
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* MARGIN */
.mt10 {margin-top: 10px!important;}
.mb10 {margin-bottom: 10px!important;}

/* FONT */
.small {font-size: 70%}

/* LAYOUT */
.center {text-align: center!important;}
.right {text-align: right!important;}

/* BR */
@media screen and (min-width:760px){	
	.br-pc {display: block;}
	.br-sp {display: none;}
}

@media screen and (max-width:760px){	
	.br-pc {display: none;}
	.br-sp {display: block;}
}

/* HEADER */
#head {
    margin: 0 auto;
    padding: 40px 50px 34px;
    width: 100%;
	position: relative;
}

.Hinner {
    margin: 0 auto;
    width: 100%;
	display: flex;
	justify-content: space-between
}
@media screen and (max-width:760px){	
}

/* NAVIGATION */
#Gnav {
	width: 120px;
}

nav ul {
	margin-top: 0;
    list-style: none;
	float: left;
}
nav ul li {
	margin: 6px 0 0 0;
	font-family: "Montserrat", sans-serif;
	font-size: 15px; font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3em;
}
nav ul li a {
	color: #475963;
}

/* HEADER LOGO */
#head .logo img {
	width: 162px;
	height: auto;
}

/* LINK NAVIGATION */
#Lnav {
	width: 120px;
}
#Lnav ul {
	display: flow-root;
}
#Lnav ul li {
	float: left;/* 単数の場合right */
	margin: 10px 0 0 14px;
}
#Lnav ul li img {
	width: 46px;
}
#Lnav_sp {display: none;}

/* TOGGLE */
#toggle {
    display: none;
    position: absolute;
    right: 20px;
    top: 21px;
    width: 28px;
    height: 34px;
    cursor: pointer;
    z-index: 1000;
}

#toggle div {
    position: relative;
}

#toggle span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #475963;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#toggle span:nth-child(1) {top: 0;}
#toggle span:nth-child(2) {top: 10px;}
#toggle span:nth-child(3) {top: 20px;}

@media screen and (max-width: 880px) {
    #head, .Hinner {
        width: 100%;
        padding: 0;
    }

    #head {
        top: 0;
        position: fixed;
        margin-top: 0;
        z-index: 999;
    }

    /* FIXED RESET */
    #head.fixed {
        padding-top: 0;
        background: transparent;
    }

    #mobile-head {
        background: #e5e5e5;
        width: 100%;
        height: 65px;
        position: relative;
    }

    #head.fixed .logo, #head .logo {
		margin: 10px 0 0 20px;
		position: absolute;
	}

	#head.fixed .logo img {
		width: 70px;
		height: auto;
	}

    #Gnav {
        position: absolute;
        right: -100%;
        background-color: rgba(71,89,99,0.9);
        width: 100%;
        text-align: center;
        padding: 65px 0 1000px;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #Gnav ul {
		margin-top: 0;
        position: static;
		float: none;
    }

    #Gnav ul li {
		margin-right: 0;
        float: none;
        position: static;
    }

    #head #Gnav ul li a, #head.fixed #Gnav ul li a {
        width: 100%;
        display: block;
        color: #e5e5e5;
        padding: 18px 0;
    }

    #toggle {
        display: block;
    }

	/* HEADER LOGO */
	#head .logo img {
		width: 70px;
		height: auto;
	}

/* LINK NAVIGATION */
	#Lnav {
		display: none;
	}
	#Lnav_sp {
		margin: auto;
		width: 106px;/*2個の場合106px 1個の場合46px*/
		display: block;
	}
	#Lnav_sp ul {
		display: flow-root;
		text-align: center;
	}
	#Lnav_sp ul li {
		float: left;
		margin: 10px 0 0 14px;
	}
	#Lnav_sp ul li:first-child {margin: 10px 0 0 0;}
	#Lnav_sp ul li img {
		width: 46px;
	}

    /* TOGGLE */
    .open #toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /* #Gnav */
    .open #Gnav {
        transform: translateX(-100%);
    }
}

/*--------------------------------------------------------------------------------
 HOME
-------------------------------------------------------------------------------- */
.Mlogo {
	padding-right: 50px;
	width: 100%;
	top: 42%;
	text-align: center;
	z-index: 100;
	position: absolute;
}	
.Mlogo img {
	width: 20%;
	height: auto;
}

ul#Hnav {
	margin: -240px auto 0;
	width: calc(100% - 100px);
}
ul#Hnav li {
	padding: 70px 10px;
	position: relative;
	color: #475963;
	font-family: "Montserrat", sans-serif;
	font-size: 42px; font-size: 4.2rem;
	font-weight: 500;
	line-height: 1.3em;
	border-bottom: 1px solid #a3acb1;
	background: url("../img/arrow.png") right 30px center/12px 24px no-repeat;
	transition: all .8s;
}
ul#Hnav :hover {
	color: #e5e5e5;
	background: #475963 url("../img/arrow_w.png") right 30px center/12px 24px no-repeat;
}
@media screen and (max-width:760px){
.Mlogo {
	padding-right: 5%;
	width: 100%;
	top: 40%;
}	
	.Mlogo img {
		width: 150px;
	}

	ul#Hnav {
		margin: -30px auto 0;
		width: calc(100% - 40px);
	}
	ul#Hnav li {
		padding: 30px 10px;
		font-size: 25px; font-size: 2.5rem;
		background: url("../img/arrow.png") right 10px center/8px 16px no-repeat;
	}
	ul#Hnav :hover {
		background: #475963 url("../img/arrow_w.png") right 10px center/8px 16px no-repeat;
	}
}

/*--------------------------------------------------------------------------------
 SHOP INFORMATION
-------------------------------------------------------------------------------- */
.shop_info_wrap {
	margin: 150px auto 0;
	width: calc(100% - 100px);
	background: #d4d7d8;
}

.shop_info {
	margin: 0 auto;
	padding: 70px 30px 50px;
	width: 1100px;
	display: flow-root;
	background: url("../img/point_map.png") center top/120px auto no-repeat;
}

.shop_info h2 {
	margin: 0 0 80px 0;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 30px; font-size: 3rem;
}

.map {
	float: left;
	width: 500px;
}
.map img {
	width: 100%;
}
.map p {
	margin: 10px auto;
	padding: 3px 10px;
	display: table;
	color: #475963;
	font-family: "Montserrat", sans-serif;
	font-size: 12px; font-size: 1.2rem;
	border: 1px solid #a3acb1;
	border-radius: 30px;
	transition: all .3s;
}
.map p:hover {
	color: #e5e5e5;
	background: #475963;
	border-color: #475963;
}

.info {
	float: right;
	width: 500px;
	font-size: 14px; font-size: 1.4rem;
}

.info table {
	margin: 0 0 20px 0;
	width: 100%;
}

.info table tr {
	border-top: 1px solid #b1b7bb; 
	border-bottom: 1px solid #b1b7bb; 
}
.info table tr th, .info table tr td {
	padding: 25px 10px;
	text-align: left;
}

.info p {
	padding: 0 10px;
}
@media screen and (max-width:1200px){
	.shop_info_wrap {
		margin: 100px auto 0;
		width: calc(100% - 40px);
	}

	.shop_info {
		padding: 40px 10px 20px;
		width: 100%;
		background: url("../img/point_map.png") center top/80px auto no-repeat;
	}

	.shop_info h2 {
		margin: 0 0 30px 0;
		font-size: 18px; font-size: 1.8rem;
	}

	.map {
		float: none;
		width: 100%;
	}

	.info {
		float: none;
		width: 100%;
		font-size: 12px; font-size: 1.2rem;
	}
	.info table {
		margin: 30px 0 10px 0;
		width: 100%;
	}

	.info table tr th, .info table tr td {
		padding: 15px 10px;
	}
	.info table tr th {
		white-space: nowrap;
		vertical-align: middle;
	}

	.info p {
		padding: 0 10px;
	}
	
	.tel a[href^="tel:"] {
		color: inherit;
		text-decoration: none;
    }
}


/*--------------------------------------------------------------------------------
 CONTENTS
-------------------------------------------------------------------------------- */
.mv {
	margin: 0 auto 100px;
	width: calc(100% - 100px);
	height: 400px;
	background: center center/cover no-repeat;
}

.mv_concept {background-image: url("../img/main_concept.jpg")}
.mv_menu {background-image: url("../img/main_menu.jpg")}
.mv_share {background-image: url("../img/main_share.jpg")}
.mv_event {background-image: url("../img/main_event.webp")}

h1 {
	margin: 0 0 100px 0;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 30px; font-size: 3rem;
}

.txt {
	text-align: center;
	font-size: 16px; font-size: 1.6rem;
	line-height: 3.25em;
}

.pra1 {margin-bottom: 65px;}
.pra2 {margin-bottom: 25px;}

/* MENU */
h2.menu1, h2.menu2 {
	margin: 0 auto 50px;
	padding: 6px 0 3px 0;
	width: 204px;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	font-size: 19px; font-size: 1.9rem;
	color: #e5e5e5;
	background-color: #475963;
}
h2.menu2 {margin-top: 100px;}

p.menu_note {
	margin: 0 0 50px 0;
	text-align: center;
	font-size: 80%;
}

.menu {
	margin: 0 auto;
	width: 1100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.menu dl {
	width: 530px;
	border-bottom: #bdc2c4 1px solid;
	display: flow-root;
}
.menu dl:nth-child(-n+2) {border-top: #bdc2c4 1px solid;}

.menu dl dt, .menu dl dd {padding: 40px 20px;}
.menu dl dt {float: left;}
.menu dl dd {float: right;}
.menu p {
    margin-top: 30px;
    width: 100%;
    font-size: 80%;
    text-align: right;
}

/* SHARE ROAST */
.share {
	margin: 0 auto;
	width: 1100px;
}
.share dl {
	margin: 0 auto;
	width: 530px;
	border-top: #bdc2c4 1px solid;
	border-bottom: #bdc2c4 1px solid;
	display: flow-root;
}
.share dl dt {padding: 40px 20px;} 
.share dl dd {padding: 30px 20px;}
.share dl dt {float: left;}
.share dl dd {float: right; text-align: right;}

/* PCT */
.pct {
	margin: 150px auto 0;
	padding: 0 0 100px 0;
	background: linear-gradient(rgba(224,217,213,0) 0%, rgba(224,217,213,0) 80.6%, rgba(224,217,213,100) 80.6%, rgba(224,217,213,100) 100%);
 }

.pct_concept {
	margin: 0 auto;
	width: 860px;
	display: flow-root;
}
.pct_concept > .pct_left {
	float: left;
	width: 580px;
}
.pct_concept > .pct_right {
	float: right;
	width: 240px;
}
.pct_concept > .pct_right img {margin: 0 0 40px 0;}
.pct_concept img {width: 100%;}

.pct_menu {
	margin: 0 auto;
	width: 980px;
}
.pct_menu > .pct_top {
	margin: 0 0 40px 0;
	width: 100%;
}
.pct_top img {width: 100%;}

.pct_menu > .pct_bottom {
	width: 100%;
	display: flow-root;
}
.pct_menu > .pct_bottom img {
	margin: 0 0 0 40px;
	float: right;
	width: 360px;
}

.pct_share {
	margin: 0 auto;
	width: 950px;
	display: flow-root;
}
.pct_share > .pct_right {
	float: right;
	width: 580px;
}
.pct_share > .pct_left {
	float: left;
	width: 330px;
}
.pct_share > .pct_left img {margin: 0 0 40px 0;}
.pct_share img {width: 100%;}
@media screen and (max-width:760px){
	.mv {
		margin: 65px auto 60px;
		width: calc(100% - 40px);
		height: 250px;
	}

	h1 {
		margin: 0 0 60px 0;
		font-size: 24px; font-size: 2.4rem;
	}

	.txt {
		margin-right: auto;
		margin-left: auto;
		text-align: left;
		width: calc(100% - 40px);
		font-size: 15px; font-size: 1.5rem;
		line-height: 2.2em;
	}

	.pra1 {margin-bottom: 40px;}
	.pra2 {margin-bottom: 20px;}
	
	/* MENU */
	h2.menu1, h2.menu2 {
		margin: 0 auto 40px;
		width: 200px;
		font-size: 18px; font-size: 1.8rem;
	}
	h2.menu2 {margin-top: 60px;}

	p.menu_note {
		margin: 0 0 40px 0;
	}

	.menu {width: calc(100% - 40px);}
	.menu dl {width: 100%;}
	.menu dl:nth-child(2) {border-top: none;}
	.menu dl dt, .menu dl dd {padding: 25px 10px;}
    .menu p {margin-top: 20px;}

	/* SHARE ROAST */
	.share {width: calc(100% - 40px);}
	.share dl {width: 100%;}
	.share dl dt {padding: 25px 10px;} 
	.share dl dd {padding: 25px 10px;}

	/* PCT */
	.pct {
		margin: 80px auto 0;
		padding: 0 0 80px 0;
	 }

	.pct_concept {
			width: calc(100% - 40px);
	}
	.pct_concept > .pct_left {
		float: none;
		margin: 0 0 20px 0;
		width: 100%;
	}
	.pct_concept > .pct_right {
		float: none;
		width: 100%;
	}
	.pct_concept > .pct_right img {width: calc(50% - 10px); margin: 0; float: left;}
	.pct_concept > .pct_right img:first-child {margin: 0 20px 0 0!important;}

	.pct_menu {width: calc(100% - 40px);}
	.pct_menu > .pct_top {margin: 0 0 20px 0;}

	.pct_menu > .pct_bottom {
		width: 100%;
		display: flow-root;
	}
	.pct_menu > .pct_bottom img {
		margin: 0 0 20px 0;
		float: right;
		width: 80%;
	}
	.pct_menu > .pct_bottom img:last-child {margin-bottom: 0;}
	
	.pct_share {
				width: calc(100% - 40px);
	}
	.pct_share > .pct_right {
		margin: 0 0 20px 0;
		float: none;
		width: 100%;
	}
	.pct_share > .pct_left {
		float: none;
		width: 70%;
	}
	.pct_share > .pct_left img {margin: 0 0 20px 0;}
	.pct_share > .pct_left img:last-child {margin-bottom: 0;}
}


/* EVENTS */
.event_index {
    margin: 0 auto;
	width: 1100px;
}
.event_index a:hover {
	text-decoration: none;
	opacity: 1;
}
.event_index dl {
    display: flex;
    margin: 0 0 50px 0;
    background-color: #f2f2f2;
	transition: all .5s ease-out;
}
.event_index dl:hover {
    background-color: #475963;
}
.event_index dl dt {
    display: inline-block;
    overflow: hidden;
    width: 300px;
}
.event_index dl dt img {
    display: block;
    transition-duration: .5s;
    width: 100%;
}
.event_index dl:hover dt img {
    transform: scale(1.1);
}
.event_index dl dd {
    margin: 35px 0 0 35px;
    color: #475963;
	transition: all .5s ease-out;
}
.event_index dl:hover  dd {
    color: #f2f2f2;
}
.event_data {
    display: flex;
    margin: 0 0 25px 0;
}
.event_category {
    width: 150px;
    padding: 1px 10px;
    color: #f2f2f2;
    font-size: 14px;
	font-family: "Montserrat", sans-serif;
    background-color: #475963;
	transition: all .5s ease-out;
}
.event_index dl:hover .event_category {
    color: #475963;
    background-color: #f2f2f2;
}
.event_date {
    margin: 0 0 0 20px;
}
.event_info {
    line-height: 1.7em;
}
@media screen and (max-width:760px){
    .event_index {
        width: calc(100% - 40px);
    }
    .event_index dl {
        flex-wrap: wrap;
        margin: 0 0 20px 0;
    }
    .event_index dl dt {
        width: 100%;
    }
    .event_index dl dd {
        margin: 20px;
    }
    .event_data {
        margin: 0 0 15px 0;
    }
    .event_category {
        font-size: 12px;
    }
    .event_date {
        margin: 1px 0 0 15px;
        font-size: 14px;
    }
    .event_info {
        font-size: 15px;
    }
}


/* EVENTS ARTICLE */
.ttl_event {
    margin-top: 50px; 
}
.event_head {
    width: 1100px;
	margin: 0 auto 50px;
}

.pct_event {
    width: 1100px;
	margin: 0 auto;
}
.pct_event_head {
    width: 100%;
    margin: 0 0 50px 0;
}
.pct_event_head img {
    width: 100%;
}
.pct_event_nomal {
    display: flex;
    justify-content: space-between;
}
.pct_event_inner {
    width: 525px; 
}

.pct_event_nomal img {
    width: 100%;
    margin: 0 0 50px 0;
}
.event_plofile {
    width: 1100px;
	margin: 0 auto 50px;
    padding: 50px;
    background-color: #f2f2f2;
}
.event_plofile p {
    margin-bottom: 1em;
    line-height: 1.7em;
}
.event_plofile ul {
    padding-top: 0.5em;
}
.event_plofile li {
    margin-top: 5px;
}
.event_plofile li a {
    color: #008085;
}
.event_plofile li::before {
	margin: 0 1em 0 0;
    content: '—';
}
@media screen and (max-width:760px){
    .ttl_event {
        margin-top: 100px; 
    }
    .event_head {
        width: calc(100% - 40px);
        margin: 0 auto 25px;
    }

    .pct_event {
        width: calc(100% - 40px);
    }
    .pct_event_head {
        margin: 0 0 25px 0;
    }
    .pct_event_nomal {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .pct_event_inner {
        width: 100%; 
    }
    .pct_event_nomal img {
        margin: 0 0 25px 0;
    }
    .event_plofile {
        width: calc(100% - 40px);
        margin: 0 auto 25px;
        padding: 25px;
    }
    .event_plofile p {
        font-size: 14px;
    }
    .event_plofile ul {
        font-size: 14px;
    }
    .event_plofile li {
        margin-top: 3px;
    }
}


/*--------------------------------------------------------------------------------
 FOOTER
-------------------------------------------------------------------------------- */
footer {
	margin: 100px 0 0 0;
	padding: 40px;
	width: 100%;
	height: 390px;
	background: url("../img/pct_footer.jpg") center center/cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: flex-end;	
}
footer p {
	color: #e5e5e5;
	font-family: "Montserrat", sans-serif;
	font-size: 12px; font-size: 1.2rem;
}

@media screen and (max-width:760px){
	footer {
		margin: 50px 0 0 0;
		padding: 20px;
		height: 200px;
	}
	footer p {
		font-size: 11px; font-size: 1.1rem;
	}
}