@charset "UTF-8";

/** -----------------------------------
    全体共通
-------------------------------------**/
body {
	/* フォントファミリーを指定する 'Zen Maru Gothic'はgoogleフォントのwebフォント */
	font-family: 'Zen Kaku Gothic New', "Yu Gothic", YuGothic, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
	/* 背景色#f9f6e7 */
	background-color: #f4e9db;
	/* 文字色#3b5059 */
	color: #3b5059;
	background-image: url(../images/back_paper.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

img {
	/* 画像は基本親要素に対して横幅100% */
	width: 100%;
	/* 最大横幅も100%に設定 */
	max-width: 100%;
}

a {
	/* 文字色を#333333 */
	color: #3b5059;
	/* フォントサイズを15px */
	font-size: 18px;
	/* デフォルトCSSを打ち消す */
	text-decoration: none;
}

ul {
	/* デフォルトCSSを打ち消す */
  	list-style-type: none;
}

/** -----------------------------------
    レイアウト
-------------------------------------**/
#about {
	/* セクション間のベースの余白 上内側余白60px 下外側余白60px */
	padding-top: 60px;
	margin-bottom: 60px;
}

#pickup, #access, #sns, #menu {
	/* セクション間のベースの余白 上内側余白60px 下外側余白60px */
	padding: 60px 0;
}

.section-inner1 {
	/* コンテンツ幅の横幅100% */
	width: 100%;
	/* コンテンツ幅の最大横幅960px */
	max-width: 960px;
	/* 余白を左右均等に散らして、コンテンツをまるっと左右中央に配置 */
	margin: 0 auto;
}

.section-inner2 {
	/* コンテンツ幅の横幅100% */
	width: 100%;
	/* コンテンツ幅の最大横幅960px */
	max-width: 1280px;
	/* 余白を左右均等に散らして、コンテンツをまるっと左右中央に配置 */
	margin: 0 auto;
}

.wide_1080 {
	max-width: 1280px;
	width: 100%;
	padding: 0.6%;
	margin: 0 auto;
}

.col-2, .col-3, .col-4 {
	/* 3つ横並びのレイアウト */
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
}

.col-2 .item {
	/* 要素と要素の間の余白が24pxで3つの要素の横幅が等しくなるように指定する */
 	 width: calc((100% - 48px)/2);
}

.col-3 .item {
	/* 要素と要素の間の余白が24pxで3つの要素の横幅が等しくなるように指定する */
 	 width: calc((100% - 72px)/3);
}

.col-4 .item {
	/* 要素と要素の間の余白が24pxで3つの要素の横幅が等しくなるように指定する */
 	 width: calc((100% - 96px)/4);
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.section-inner1, .section-inner2 {
		/* レスポンシブでは、コンテンツ幅の左右に24pxの余白 */
		padding: 0 24px;
		/* 最大横幅550px */
		max-width: 550px;
	}

	.col-2, .col-3 {
		/* レスポンシブでは横並びを解除 */
		display: block;
	}

	.col-2 .item, .col-3 .item {
		/* 横幅は100% */
		width: 100%;
		/* 左右中央よせ＆下側に50pxの余白 */
		margin: 0 auto 50px;
	}
}

/** -----------------------------------
    テキスト
-------------------------------------**/
h2 {
	/* 文字色#3b5059 */
	color: #3b5059;
	/* 文字太さをboldに */
	font-weight: bold;
	/* 文字を左右中央揃え */
	text-align: center;
	font-size: 25px;
}

h2.large{
	font-size: 60px;
	text-align: left;
}

h2.medium {
	font-size: 20px;
}

h2.small {
	/* 文字の大きさ20px */
	font-size: 20px;
	font-weight: bold;
}

h3.large {
	/* 文字の大きさ20px */
	font-size: 18px;
	font-weight: bold;
}

p {
	/* 文字の大きさ16px */
	font-size: 16px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.1em;
}

p.large {
	/* 文字の大きさ18px */
	font-size: 20px;
	/* 行間を指定*/
	line-height: 1.8;
	/* 文字間を指定 */
	letter-spacing: 0.18em;
}

p .medium{
	/* 文字の大きさ18px */
	font-size: 18px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.1em;
}

p.small {
	/* 文字の大きさ14px */
	font-size: 14px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.1em;
}

li {
	/* 文字の大きさ18px */
	font-size: 18px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	h2.medium {
		font-size: 18px;
	}

	h2.small {
		font-size: 18px;
	}

	h3.large {
		font-size: 16px;
	}

	p {
		font-size: 16px;
	}

	p.large {
		font-size: 18px;
	}

	p.small {
		font-size: 14px;
	}

	li {
		font-size: 16px;
	}
}

/** -----------------------------------
    ボタン
-------------------------------------**/

.button-border-small {
	display: block;
	width: 150px;
	height: 40px;
	border: 2px solid #b3d074;
	color: #3b5059;
	font-size: 16px;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	border-radius: 25px;
}

.button-border {
	display: block;
	width: 200px;
	height: 55px;
	border: 2px solid #3b5059;
	color: #f4e9db;
	font-size: 15px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	border-radius: 30px;
}

.button-small {
	display: block;
	width: 150px;
	height: 40px;
	background-color: #f4e9db;
	color: #3b5059;
	font-size: 16px;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	border-radius: 25px;
}

.button-medium {
	display: block;
	width: 430px;
	height: 45px;
	background-color: #b3d074;
	color: #3b5059;
	font-size: 16px;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	border-radius: 20px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.button-medium {
		width: 250px;
		height: 35px;
		font-size: 14px;
		line-height: 35px;
	}

	.button-border-small {
		
		width: 140px;
		height: 35px;
		font-size: 14px;
		line-height: 30px;
	}

	.button-border {
		width: 160px;
		height: 40px;
		font-size: 13px;
		line-height: 35px;
	}
}

/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header {
	/* 背景色#f9f6e7 */
	background-color: #b3d074;
	/* 横幅100% */
	width: 100%;
	/* 高さ70px */
	height: 70px;
	/* 内側余白を左右80px */
	padding: 0 80px;
	/* 横並びにする */
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
	/* 横並びした要素を上下中央に配置 */
	align-items: center;
	/* 固定表示 */
	position: fixed;
	/* 固定表示は上から0pxの位置に */
	top: 0;
	/* 重なり順を1に（数字が大きいほど重なり順は上） */
	z-index: 5;
}

.header-logo {
	/* 横幅150px*/
	width: 200px;
}
.header-logo img {
	/* 画像の下にできる余白を削除する記述 上下中央に配置するために追加 */
	vertical-align: bottom;
}

.gnav-pc-wrap {
	/* 横並びにする */
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
	/* 横並びした要素を上下中央に配置 */
	align-items: center;
}

ul.gnav-pc {
	/* 横幅100% */
	width: 100%;
}

ul.gnav-pc li {
	/* インライン要素にして横並びにする */
	display: inline;
	/* 右側余白40px */
  	margin-right: 40px;
}

ul.gnav-pc li a {
	/* メニューの文字スタイルを指定 */
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #3b5059;
	font-size: 18px;
	letter-spacing: 0.1em;
}

ul.gnav-pc li a:hover {
	/* ホバー時に透明度0.7 */
  	opacity: 0.7;
}

.sns-icon {
	display: flex;
}

.instagram-icon {
	/* 横幅28px */
	width: 28px;
	/* 高さ28px */
	height: 28px;
}

.facebook-icon {
	/* 横幅28px */
	width: 28px;
	/* 高さ28px */
	height: 28px;
	margin-left: 15px;
}

.instagram-icon:hover {
	/* ホバー時に透明度0.7 */
	opacity: 0.7;
}

.facebook-icon:hover {
	/* ホバー時に透明度0.7 */
	opacity: 0.7;
}

#menu-button {
	/* pc時非表示（display:block;でHTMLを表示、display:none;でHTMLを非表示できます） */
  	display: none;
}

.gnav-sp-wrap {
	/* pc時非表示 */
	display: none;
}

ul.gnav-sp {
	/* pc時非表示 */
	display: none;
}
.sp-buttom-button {
	/* pc時非表示 */
	display: none;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#header {
		/* 内側余白を0pxに変更 */
		padding: 0px;
	}

	#header h1 {
		/* ロゴの左に余白24px */
		padding-left: 24px;
	}

	.gnav-pc-wrap {
		/* PC用のメニューを非表示 */
		display: none;
	}

	ul.gnav-sp {
		/* SP時に表示させる */
		display: block;
	}


	#menu-button {
		/* SP時に表示させる */
		display: block;
		/* 横幅70px */
		width: 70px;
		/* 高さ70px */
		height: 70px;
		/* 内側余白 上下22px 左右20px */
		padding: 22px 20px;
	}

	.menu-button-inner {
		/* 配置の基準となる親要素を指定 */
		position: relative;
		/* 横幅100% */
		width: 100%;
		/* 高さ100% */
		height: 100%;
	}

	.menu-button-inner span {
		/* ブロック要素にする */
		display: block;
		/* 線の長さ親要素の100% */
		width: 100%;
		/* 線の太さ1px */
		height: 1px;
		/* 線の色#333333 */
		background-color: #3b5059;
		/* 配置したい要素に指定 */
		position: absolute;
	}

	.menu-button-inner span:nth-child(1) {
		/* 上の線の配置 */
		top: 0;
	}

	.menu-button-inner span:nth-child(2) {
		/* 中央の線の配置 上下中央に配置するための記述 */
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.menu-button-inner span:nth-child(3) {
		/* 下の線の配置 */
		bottom: 0;
	}

	/* クリックした時に、ハンバーガーボタンをバツにするCSS */
	.close span:nth-of-type(1){
	    width: 100%;
		/* 線を45度回転 */
	    transform: rotate(45deg);
		/* 綺麗な×の形にするための配置調整 */
		top: 12px;
	}

	.close span:nth-of-type(2){
		/* 中央の線は透明にして見えなくする */
	    opacity: 0;
	}

	.close span:nth-of-type(3){
	    width: 100%;
		/* 線を-45度回転 */
	    transform: rotate(-45deg);
		/* 綺麗な×の形にするための配置調整 */
		bottom: 13px;
	}

	/* スマホ用メニューのスタイル設定 */
	.gnav-sp-wrap {
		/* jQueryで表示させるため、最初は非表示 */
		display: none;
		/* 横幅を画面いっぱいに広げる */
		width: 100vw;
		/* 縦幅を画面いっぱいに広げる */
		height: 100vh;
		/* 背景色#f9f6e7 */
		background-color: #b3d074;
		/* 位置を固定 */
		position: fixed;
		/* 重なり順を100に設定 */
		z-index: 100;
		/* メニューの位置調整のため上に内側余白100px */
		padding-top: 100px;
	}

	ul.gnav-sp li {
		/* メニューテキストを左右中央揃え */
		text-align: center;
		/* 各メニューの間に30pxの余白を設定 */
		margin-bottom: 30px;
	}

	ul.gnav-sp li a {
		font-family: 'Montserrat', sans-serif;
		font-size: 20px;
		/* 文字間隔を広げる(0.1em) */
		letter-spacing: 0.1em;
		color: #3b5059;
		font-weight: bold;
	}
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual {
	position: relative;
	/* 横幅を画面いっぱいに広げる */
	width: 100vw;
	/* 高さをヘッダー分（70px）減らして指定 */
	height: calc(100vh - 70px);
	/* ヘッダー分、上に余白を設定する */
	margin-top: 70px;
	background: #b3d074;
}

#mainImg{
	position: absolute;
	overflow: hidden;
	right: 4%;
	width: 90%;
	height: 85%;
}

#mainImg img{
	position: absolute;
	left: 50%;
	max-width: 1280px;
	width: 1280px;
	margin-left: -640px;
}

.copy-wrap {
	position: absolute;
	right: 32%;
	bottom: 30%;
	width: 40%;
}

.maincopy {
	/*文字のスタイルを指定*/
	color: #ffffff;
	font-size: 40px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.18em;
	/* 配置したい要素にposition:absolute;を指定 */
	position: absolute;
	/* 縦から20%,右から10%の位置に配置 */
	white-space: nowrap;
}

.subcopy {
	color: #FFFFFF;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.1em;
	/* 配置したい要素にposition:absolute;を指定 */
	position: absolute;
	/* 縦から20%,右から10%の位置に配置 */
	top: 70px;
	left: 100%;
	white-space: nowrap;
	z-index: 3;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#mainvisual {
		/* sp用のヘッダー高さに合わせてheightを調整 */
		height: calc(100vh - 70px);
		/* sp用の背景画像に変更 */
		background-image: url("../images/mv_sp.jpg");
		/* ヘッダー分、上に余白を設定する */
		margin-top: 70px;
	}

	#mainImg img{
	height: 667px;
    }	

	.copy-wrap {
		position: absolute;
		right: -15%;
		top: 7%;		
	}

	.maincopy {
		/* フォントサイズを18pxにする */
		font-size: 24px;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.subcopy {
		/* フォントサイズを18pxにする */
		font-size: 20px;
		top: 70%;
		left: -20%;
		writing-mode: vertical-rl;
	}

}

/** -----------------------------------
    らあふについて
-------------------------------------**/
#about .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

.about-inner {
	/* イラスト左側・中央のテキストエリア・イラスト右側を横並び */
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

#about .messages {
	text-align: center;
	margin-bottom: 80px;
}

#about p.large {
	margin-bottom: 15px;
}

#about p.medium span {
	display: block;
}

.center {
	margin: 28px;
}

.slick-slide {
	/* slickの画像と画像の間に余白を空ける */
	margin: 0 5px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	#about p.medium span {
	display: inline;
}
	
}

/** -----------------------------------
    ピックアップ
-------------------------------------**/
#pickup {
	background-color: #b3d074;
}


#pickup .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

.pickup-event {
	background-color: #f4e9db;
	opacity: 0.7;
	border-radius: 20px;
}

.pickup-event ul{
	/* ブロック表示にする */
	display: block;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
	/* 横並びした要素を上下中央に配置 */
	align-items: center;
	/* 最大横幅960px */
	max-width: 960px;
	/* 左右中央に配置 */
	margin: 0 auto;
	/* 上15px 下20px の内側余白 */
	padding: 15px 20px;
}

.pickup-event ul li a {
	display: flex;
	/*子要素を上部で揃える指定*/
	align-items: flex-start;
}

.pickup_article1, .pickup_article2, .pickup_article3 {
	/* 横並びにする */
	display: flex;
	/* 横並びした要素を上下中央に配置 */
	align-items: center;
	margin-bottom: 20px;
}

.pickup_article4 {
	/* 横並びにする */
	display: flex;
	/* 横並びした要素を上下中央に配置 */
	align-items: center;
}

/*.pickup_article1:hover, .pickup_article2:hover, .pickup_article3:hover, .pickup_article4:hover  {
	/* ホバー時に透明度0.7 
	opacity: 0.7;
}
*/

.information_date {
	/* 文字間隔 0.1em */
	letter-spacing: 0.1em;
	/* 右側に余白40px */
	margin-right: 40px;
}

.viewall_button {
	/* 位置調整 */
	display: flex;
	/* 右寄せ */
    justify-content: flex-end;
	margin: 0 auto;
	margin-top: 50px;
	padding-bottom: 20px;
}

.viewall_button a:hover {
	/* ホバー時、ボタンのカラーを#aea18fに */
	background-color: #aea18f;
	/* ホバー時、ボタンの文字色を#ffffffに */
	color: #ffffff;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	
}

/** -----------------------------------
    らあふでできること（MENU）
-------------------------------------**/
#menu {
	background-image: url(../images/back_paper.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#menu .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

#menu .item {
	text-align: center;
}

#menu .item h3.large {
	padding-bottom: 10px;
}

#menu .item img {
	text-align: center;
	/* 画像とテキストの間の余白30px */
	margin-bottom: 20px;
}

.link-text {
	/* テキストとアイコンを横並び */
	text-align: center;
}

.link-text p.large {
	margin-bottom: 10px;
}

#menu .button-medium {
	margin: 0 auto;
	margin-top: 20px;
}

#menu .button-medium:hover {
	/* ホバー時、ボタンのカラーを#aea18fに */
	background-color: #aea18f;
	/* ホバー時、ボタンの文字色を#ffffffに */
	color: #ffffff;
}

#menu .laughchan{
	text-align: center;

}

#menu .laughchan img{
	/* 横幅340px */
	width: 340px;
	padding: 20px;

}

.viewall_button {
	/* 位置調整 */
	display: flex;
	/* 右寄せ */
    justify-content: flex-end;
	margin: 0 auto;
	margin-top: 50px;
	padding-bottom: 20px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.laughchan {
		display: none;
	}
	
}

/** -----------------------------------
    アクセス
-------------------------------------**/
#access {
	background-color: #6393a6;
	color: #f4e9db;
}

#access .main-title {
	color: #f4e9db;
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

#access h2.medium{
	color: #f4e9db;
}

/* Google mapをレスポンシブ対応するためのお決まりコード ここから*/
.gmap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 縦横比率が、横:縦=16:9の場合 */
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
/* Google mapをレスポンシブ対応するためのお決まりコード ここまで*/

#access p.medium {
	padding: 0 0 30px;
}

.shop-info {
	display: block;
	padding: 0 0 160px;
}

dl {
	font-size: 16px;
	line-height: 1.6
}

dt {
	float: left ;
	clear: left ;
	width: 120px ;
}

dd {
	float: left ;
	padding-bottom: 10px;
}

.access-button {
	display: flex;
	justify-content: space-between;
	margin: 20px 20px 0 0;
}

a.button-border:hover {
	/* ホバー時透明度0.7 */
	opacity: 0.7;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	#access p.medium {
		margin-left: 30px;
	}

	.shop-info {
		margin-left: 30px;
	}

	dl {
		font-size: 16px;
		line-height: 1.6
	}

	.access-button {
		margin: 30px 5px 0 5px;
	}

	.shop-info {
	padding: 0 0 200px;
}

}

/** -----------------------------------
    SNS
-------------------------------------**/
#sns {
	background-color: #547582;
}

#sns .sns-comment {
	text-align: center;
}

#sns h2.medium {
	color: #f4e9db;
}

ul.sns-coment {
	/* 文字色#ffffff */
	color: #f4e9db;
	/* リンク文字の下側に30pxの余白 */
	margin-bottom: 30px;
}


ul.sns-comment img.instagram{
	/* インスタアイコン横幅34px */
	width: 38px;
}

ul.sns-comment img.facebook{
	/* ツイッターアイコン横幅40px */
	width: 40px;
}

ul.sns-comment a:hover{
	opacity: 0.7;
}

ul.sns-comment li {
	/* inline-block要素にして、横並びにする */
	display: inline-block;
	/* テキストと画像が上下中央に配置されるように微調整 */
	vertical-align: middle;
	/* 右に余白を10px */
	margin-right: 40px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	ul.sns-comment img.instagram{
		/* インスタアイコン横幅34px */
		width: 20px;
	}
	
	ul.sns-comment img.facebook{
		/* ツイッターアイコン横幅40px */
		width: 20px;
	}

	ul.sns-comment li {
		margin-right: 20px;
	}
	
}


/** -----------------------------------
    フッター
-------------------------------------**/
#footer {
	/* セクション 上の内側余白60px */
	padding-top: 60px;
	background-color: #3b5059;
	color: #f4e9db;
}


.footer-contents {
	/* ロゴとテキストエリアを横並び */
	display: flex;
	/* 左右中央に集まるように水平方向の揃え方を指定する */
	justify-content: space-between;
	/* 左右中央揃えにして、下側に40px余白を設定 */
	margin: 0 auto 40px;
}

.footer-contents .column {
	/* 要素と要素の間の余白が20pxで4つの要素の横幅が等しくなるように指定する */
	width: calc((100% - 80px)/4);
}

.footer-logo {
	/* ロゴの横幅120px */
	width: 120px;
	margin-left: 50px;
}

ul.footer-nav li {
	margin: 0 0 20px;
}

ul.footer-nav li a {
	color: #f4e9db;
	font-weight: bold;
}

ul.footer-nav li a:hover {
	/* ホバー時に透明度0.7 */
  	opacity: 0.7;
}

ul.footer-nav-sub li {
	margin: 0 0 5px;
}

ul.footer-nav-sub li a {
	color: #f4e9db;
}

ul.footer-nav-sub li a:hover {
	/* ホバー時に透明度0.7 */
  	opacity: 0.7;
}

a.contact {
	color: #f4e9db;
	font-weight: bold;

}

.column .contact-text {
	margin-top: 20px;
}

.footer-button {
	/* 左右中央に配置 */
	text-align: center;
	margin-top: 20px;
}

.footer-button a {
	/* ボタンのスタイル */
	background-color: #ffffff;
	padding: 20px 35px;
	border-radius: 50px;
	text-align: center;
	font-weight: bold;
	color: #3b5059;
	border: 1px #ffffff solid;
	line-height: 1;
	display: block;
}

.footer-button a:hover {
	/* ホバー時、ボタンのカラーを#aea18fに */
	background-color: #aea18f;
	/* ホバー時、ボタンの文字色を#ffffffに */
	color: #ffffff;
}

.copyright {
	color: #f4e9db;
	text-align: center;
	padding: 10px 0;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 820px) {

	.footer-contents {
		/* ブロック要素にして文字を縦並びに */
		display: block;
		margin: 0 auto 40px;
	}

	.footer-contents .column {
		text-align: center;
		/* 横幅は100% */
		width: 100%;
	}
	
	.footer-logo {
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.footer-link ul li {
		/* ブロック要素にして文字を縦並びに */
		display: block;
	}

	ul.footer-nav li {
		margin: 0 0 10px;
	}

	ul.footer-nav-sub {
		margin-bottom: 20px;
	}

	.footer-button {
		/* 左右中央に配置 */
		text-align: center;
		display: inline-block;
	}

	.footer-button a {
		/* ボタンのスタイル */
		padding: 10px;
		line-height: 1;
	}

	}

/**以下下層ページ**/

/** -----------------------------------
    サブビジュアル
-------------------------------------**/

#subvisual {
	position: relative;
	width: 100%;
	margin-top: 0 auto;
}

.title_area-contact, .title_area-access, .title_area-event, .title_area-menu {
	position: relative;
	width: 100%;
	background-size: cover;
	margin-top: 70px;
	text-align: center;
	height: 500px;
	box-sizing: border-box;
}

.title_area-contact::after {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	height: 800px;
	top: 80px;
	z-index: 4;
	background: url(../images/shape_top.png) center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.title_area-access::after, .title_area-event::after, .title_area-menu::after {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	height: 800px;
	top: 80px;
	z-index: 4;
	background: url(../images/shape_top_green.png) center center;
	background-size: contain;
	background-repeat: no-repeat;
}

#subvisual .title_area-contact {
	background-image: url(../images/sv_contact.jpg);
	background-position: center;
}

#subvisual .title_area-access {
	background-image: url(../images/sv_access_2.jpg);
	background-position: center;
}

#subvisual .title_area-event {
	background-image: url(../images/sv_event_2.jpg);
	background-position: center;
}

#subvisual .title_area-menu {
	background-image: url(../images/sv_event.jpg);
	background-position: center;
}

#subvisual .main-title {
	/* タイトルの上下に余白60px */
	padding: 50px 100px;
}

/**もしアクセスとメニューページのメインタイトルの色を変えたいなら

.title_area-access .main-title h2.large, .title_area-menu .main-title h2.large {
	color: #f4e9db;
}
**/


/** -----------------------------------
    ACCESSページ
-------------------------------------**/

#access-info .col-2 {
	padding: 60px;
}

#access-info {
	background-color: #b3d074;
	padding-top: 80px;
}

#access-info .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

#access-info .shop-info {
	padding-top: 20px;
	padding: 0 0 80px;
}

#access-info .shop-info dl {
	font-size: 20px;
}

#access-info .access-button {
	text-align: center;
}

.access-button .button-small {
	display: block;
	width: 200px;
	height: 55px;
	border: 2px solid #f4e9db;
	color: #3b5059;
	font-size: 15px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	border-radius: 30px;
}

.access-button a:hover {
	/* ホバー時、ボタンのカラーを#aea18fに */
	background-color: #aea18f;
	/* ホバー時、ボタンの文字色を#ffffffに */
	color: #ffffff;
}


/** --  交通アクセス--  **/
#transportation {
	padding-bottom: 60px;
}

#transportation .main-title {
	/* タイトルの上下に余白60px */
	padding: 60px 0 20px 0;
}

#transportation .main-title h2.medium {
	text-align: left;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 820px) {

	#access-info {
	padding: 20px 0;
	}

	#access-info .col-2 {
	padding: 0;
    }

	#access-info .access-button {
		margin: 70px 5px 0 5px;
	}

}


/** -----------------------------------
    EVENTページ
-------------------------------------**/

#comingup {
	background-color: #b3d074;
	padding: 60px 0;
}

#comingup .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

#comingup {
	margin-top: 30px;
}

#comingup .event-info {
	padding-top: 20px;
}

.event-title p.large {
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 10px;
}

#comingup .event-info dl {
	font-size: 20px;
}

#event-list {
	padding: 60px 0;
}

#event-list .main-title {
	/* タイトルの上下に余白60px */
	padding-bottom: 60px;
}

#event-list p.medium {
	font-weight: bold;
}

#event-list p.information_date {
	text-align: right;
}

#event-list .item {
	/* タイトルの上下に余白60px */
	padding-bottom: 40px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 820px) {

	#comingup {
	margin-top: 0px;
}

}


/** -----------------------------------
    メニューページ
-------------------------------------**/

/**  メニューページのリンク  **/

#menu-links {
	background-color: #b3d074;
	margin-top: 56px;
}

#menu-links .col-4 {
	padding: 40px 0;
}

#menu-links .item a:hover {
	/* ホバー時に透明度0.7 */
	opacity: 0.7;
}

.link img {
	/* 画像とテキストの間の余白30px */
	margin-bottom: 30px;
}

#menu-links .link-text {
	/* テキストとアイコンを横並び */
	display: flex;
	justify-content: center;
	align-items: center;
}

.arrow {
	/* アイコンの大きさを指定 */
	width: 25px;
	height: 25px;
	/* 文字との間に余白10px */
	margin-left: 10px;
}

/**  --メニューページのイベント&共通--  **/
#menu-event, #menu-workshop, #menu-relax, #menu-retreat {
	padding: 40px 0;
}

#menu-event h2.medium, #menu-workshop h2.medium, #menu-relax h2.medium, #menu-retreat h2.medium{
	font-family: 'Marcellus', cursive;
	margin: 0 auto 40px;
	font-size: 30px;
	font-weight:normal;
	text-align: center;
	background: url(../images/borderline.png) repeat-x 0 50%;
	background-size: 2px 2px;
}

#menu-event h2 span, #menu-workshop h2 span, #menu-relax h2 span, #menu-retreat h2 span {
	background-color: #b3d074;
	padding: 0 80px;
}

/** --  メニューページのワークショップ、リラックス--  **/
.menu-title {
	margin: 60px 0 20px 0;
}

#menu-workshop .menu-title h2.small, #menu-relax .menu-title h2.small {
	text-align: left;
}

#menu-workshop .link-text p.medium, #menu-relax .link-text p.medium {
	text-align: left;
	margin-bottom: 20px;
}

#menu-workshop .link-text p, #menu-relax .link-text p {
	text-align: right;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 820px) {
	
	#menu-links {
	margin-top: 0px;
}
	
	.title_area-menu .main-title h2.large {
	color: #f4e9db;
}

}

/** -----------------------------------
    CONTACTページ
-------------------------------------**/
#contact {
	background-color: #f4e9db;
	padding: 60px 0;
}

#contact .main_title {
	/* タイトルの上下に余白60px */
	padding: 40px;
}

#contact .messages {
	text-align: center;
	margin-bottom: 40px;
}

.form {
	width: 100%;
	/* CONTACTセクションのみ、コンテンツ幅を最大680pxにする */
	max-width: 680px;
	margin: 0 auto;
	margin-top: 50px;
	padding-bottom: 70px;
}

.form_item{
  width: 100%;
  font-size: 14px;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input_label{
  max-width: 230px;
  width: 100%;
}

.input_area_box{
  width: 100%;
  max-width: 450px;
}

.input_area{
  width: 100%;
  padding: 10px;
  border: solid 1px #3b5059;
  background-color: #ffffff;
 }

textarea {
  height: 80px;
}

.question{
  margin-right: 24px;
}

.radio_and_option {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
}

#contact .cta_button_wrap {
  padding-top: 36px;
}

#contact .button-small {
  cursor: pointer;
  background-color: #b3d074;
  width: 200px;
  border-radius: 15px;
  text-align: center;
  margin: 0 auto;
}

#contact .button-small:hover {
	/* ホバー時、ボタンのカラーを#aea18fに */
	background-color: #aea18f;
	/* ホバー時、ボタンの文字色を#ffffffに */
	color: #ffffff;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

  .form_item{
    /* スマートフォン時、flexでの横並びを解除する */
    display: block;
  }

  .input_area_box {
    margin-top: 6px;
  }

}