@charset "UTF-8";

/* ================================
	Base
	================================ */
.container{ 
	position: relative;
	width: 100vw;
	margin: 0 auto;
	padding: 0 40px;
	overflow: hidden;
}
.container > .inner{
max-width: 1100px;
margin: 0 auto;
position: relative;
}

/*ドット表示
--------------------*/
/* ドットを生成するための両端カラム */
.dots-column {
	position: absolute;
	top: 0;
	height: 100%; /* main-contentの高さに合わせる */
	width: 12px;
	background-image: radial-gradient(
		circle at center,
		#FBC02D 0,
		#FBC02D 4px,
		transparent 4px,
		transparent 100%
		);
	background-size: 12px 32px;
	background-repeat: repeat-y;
}
/* 左側のドット列 */
.dots-column-left {
	left: -40px; /* main-contentからの距離 */
}
/* 右側のドット列 */
.dots-column-right {
	right: -40px;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
	.container {
		padding: 0 30px;
	}
	.dots-column {
		width: 8px;
		background-image: radial-gradient(
			circle at center,
			#FBC02D 0,
			#FBC02D 3px,
			transparent 3px,
			transparent 100%
			);
		background-size: 8px 28px;
	}
	.dots-column-left {
		left: -30px;
	}
	.dots-column-right {
		right: -30px;
	}
}
@media screen and (max-width: 480px) {
	.container {
		padding: 0 20px;
	}
	
	.dots-column {
		width: 6px;
		background-image: radial-gradient(
			circle at center,
			#FBC02D 0,
			#FBC02D 2px,
			transparent 2px,
			transparent 100%
			);
		background-size: 6px 24px;
	}
	.dots-column-left {
		left: -20px;
	}
	.dots-column-right {
		right: -20px;
	}
}

/* 固定幅用調整
---------------------- */
.container.is-fix > .inner,
.is-fix + .container > .inner{ width: 990px; }

/* ================================
	module:footer
	================================ */
.globalFooter{ 
	background-color:#f5ce32;
}
.globalFooter__credit{
	padding: 1em 0;
	text-align: center;
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3',Osaka,sans-serif;
}
.globalFooter__link{
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	overflow: hidden;
}
.globalFooter__link a{
	display: block;
	color:#435B67;
	text-decoration: underline;
	font-size:11px;
}
@media (min-width:768px){
	.globalFooter__link{ text-align: left;}
	.globalFooter__link--left{ float: left; }
	.globalFooter__link--right{ float: right;}
}

/* 固定幅用調整
---------------------- */
.is-fix + .globalFooter .globalFooter__link{ text-align: left;}
.is-fix + .globalFooter .globalFooter__link--left{ float: left; }
.is-fix + .globalFooter .globalFooter__link--right{ float: right;}

/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */

/* SP用CSSの記述 */
@media(min-width:751px){
	.sp{
		display: none !important;
	}
}
@media(max-width:750px){
	.pc{
		display: none !important;
	}
}




img{ width: 100%; }

.flexbox {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.flexbox div {
	margin: 0 15px;
}
.btn a {
	text-align: center;
	border: none;
	margin: 0 20px 0 0;
	padding: 20px;
	background: #fff;
	display: block;
	font-weight: bold;
	width: 400px;
	font-size: 0.9em;
	color: #dd9352;
	border: #dd9352 2px solid;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	float: left;
	/*border-radius: 5px;*/
}
.btn a.right {
	margin: 0 0 0 0;
	
}
.btn a:hover {
	background: #dd9352;
	color: #fff;
}

/***********************************************
マウスオーバー
***********************************************/
a {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	position: relative;
	top: 0;
}
a:hover {
	filter: alpha(opacity=85);
	-moz-opacity:0.85;
	opacity:0.85;
	top: -3px;
}

/*	margin
---------------------- */
.mt-0  {    margin-top:    0;}
.mt-10 {    margin-top: 10px;}
.mt-20 {    margin-top: 20px;}
.mt-23 {    margin-top: 23px;}
.mt-30 {    margin-top: 30px;}
.mt-40 {    margin-top: 40px;}
.mt-50 {    margin-top: 50px;}
.mt-60 {    margin-top: 60px;}
.mb-0  {    margin-bottom:    0;}
.mb-10 {    margin-bottom: 10px;}
.mb-20 {    margin-bottom: 20px;}
.mb-30 {    margin-bottom: 30px;}
.mb-40 {    margin-bottom: 40px;}
.mb-50 {    margin-bottom: 50px;}
.mb-60 {    margin-bottom: 60px;}
.mb-70 {    margin-bottom: 70px;}
.mb-80 {    margin-bottom: 80px;}
.mb-90 {    margin-bottom: 90px;}
.mb-100 {    margin-bottom: 100px;}

.mr-10 {    margin-right: 5px;}


/*	padding
---------------------- */
.pt-0  {    padding-top:    0;}
.pt-10 {    padding-top: 10px;}
.pt-20 {    padding-top: 20px;}
.pt-30 {    padding-top: 30px;}
.pt-40 {    padding-top: 40px;}
.pt-50 {    padding-top: 50px;}
.pt-60 {    padding-top: 60px;}
.pb-0  {    padding-bottom:    0;}
.pb-10 {    padding-bottom: 10px;}
.pb-20 {    padding-bottom: 20px;}
.pb-30 {    padding-bottom: 30px;}
.pb-40 {    padding-bottom: 40px;}
.pb-50 {    padding-bottom: 50px;}
.pb-60 {    padding-bottom: 60px;}


/* ================================
	ヘッダ
	.globalHeader
	================================ */
/*	globalHeader
---------------------- */
.globalHeader {
	text-align: center;
	background: url("../images/header-bg.jpg") no-repeat top center;
	background-size: cover;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.globalHeader .inner{
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 0;
	text-align: center;
	position: relative;
}
#ttl {
	max-width: 700px;
	padding: 80px 0 40px 0;
	margin: 0 auto 0 auto;
}


.float-L {
	float: left;
}

.float-R {
	float: right;
}
.flexcontainer {
	display: flex;
}
.flexitem {
	width: 20%;
	text-align: center;
}

.align-r {
	text-align: right;
}

.align-l {
	text-align: left;
}

.align-c {
	text-align: center;
}




/*スクロールを促す矢印*/
#scroll {
	position: absolute;
	top: 90%;
	left: 50%;
	
}

a.scroll {
	padding-top: 90px;
	color: #fff;
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 1.2em;
	letter-spacing: 2px;
}
a.scroll span {
	position: absolute;
	top: 90%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}



.contents {
	/*max-width: 990px;*/
	margin: 0 auto;
}

#area01,#area02,#area03 {
	padding: 0 0 50px 0;
}

.bk-orange100{
	background-color: rgba(245, 206, 50, .1);
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%)
}
.landscape02 {
	padding: 40px 30px 40px 0;
}
.landscape03 {
	padding: 0 0 0 50px;
}


.copy {
	max-width: 700px;
	padding: 50px 20px 50px 20px;
	margin: 0 auto
	}
	
	.photo {
		max-width: 500px;
		width: 100%;
		text-align: center;
	}
	
	.txt {
		max-width: 460px;
		width: 100%;
		text-align: center;
	}
	.txt2 {
		max-width: 700px;
		margin: 0 auto;
	}
	
	h2{
		text-align: left;
		font-size: 1.2rem;
		letter-spacing: .1em;
		line-height: 1.8em;
		margin-bottom: 4%;
	}
	p {
		text-align: left;
	}
	.txt2 p{
		text-align: center;
		margin:0 auto;
	}
	.photo_left, .photo_right {
		overflow: hidden;
		margin: 0 auto 7%;
	}
	
	.photo_left .photo {
		float: left;
	}
	.photo_left .txt {
		float: right;
		margin: 0 90px 0 0;
	}
	
	.photo_right .photo {
		float: right;
	}
	.photo_right .txt {
		float: left;
		margin: 0 0 0 90px;
	}
	.txt03 {
		margin-top: 60px;
	}
	.gourmet_list {
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
		gap: 20px;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.shop {
		width: 100%;
	}
	.shop a {
		display: block;
		width: 100%;
		height: 100%;
	}
		.shop a {
			text-decoration: none; /* 下線を削除 */
			color: inherit; /* 親要素の文字色を継承 */
		}
		.shop h3{
			font-size: initial;
			font-weight: normal;
		}
		/* ホバー時のスタイルも削除する場合 */
		.shop a :hover {
			text-decoration: none;
			color: inherit;
		}
		/* 訪問済みリンクの色も変更しない場合 */
		.shop a :visited {
			color: inherit;
		}
		.shop a h3 span{
		font-size: .8em;
		}
		.shop img {
			width: 100%;
			height: auto;
			display: block;
		}
	
	
	/* PC、Tablet用CSSの記述 */
	@media screen and (max-width: 1024px) {
		.photo {
			max-width: 45%;
			width: 100%;
		}
		.txt {
			max-width: 45%;
			width: 100%;
		}
	}
	
	@media screen and (max-width: 768px) {
		.globalHeader {
			margin-right: calc(50% - 50vw);
			margin-left: calc(50% - 50vw);
		}
		
		#ttl {
			padding: 40px 0 20px;
			margin: 0 auto 0 auto;
		}
		.copy {
			padding: 5%;
		}
		.photo_left .txt {
			width: 100%;
			margin: 0 0 0 0;
		}
		.photo_right .txt {
			width: 100%;
			margin: 0 0 0 0;
		}
		.photo_left .photo {
			width: 100%;
			margin: 0 0 0 0;
		}
		.photo_right .photo {
			width: 100%;
			margin: 0 0 0 0;
		}
		.photo {
			max-width: 100%;
			float: none;
			padding: 0 5% 5%;
		}
		
		.txt {
			max-width: 100%;
			float: none;
			padding: 0 5% 7%;
		}
		.txt h2{
			font-size: 1rem;
			letter-spacing: .08em;
			line-height: 1.4em;
			margin-bottom: 20px;
		}
		.txt p {
			font-size: .9rem;
		}
		
		.txt03 {
			margin-top: 0;
		}
	}

	
	/*スライドショー*/
	ul.slider-show li{
		padding:1px;
	}
	ul.slider-show li img{
		width:100%;
		height:auto;
	}
	/*ページ 領域こえの場合
	div.slick-list{
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding-right: calc(50vw - 50%);
		padding-left: calc(50vw - 50%);	
	}*/
	
	.area02-content-wrapper {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
		padding: 40px 20px;
		overflow: hidden;
	}
	
	/* 背景ロゴ */
	.background-logo-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: -1;
	}
	
	.background-logo {
		width: auto;
		height: auto;
		max-width: 90%;
		max-height: 90%;
		opacity: 0.5;
		object-fit: contain;
	}

	
	/* メインコンテンツ配置 */
	.content-container {
		display: flex;
		align-items: center;
		gap: 40px;
		margin: 40px 0;
	}
	
	/* 左側のチーズ画像部分 */
	.cheese-section {
		flex: 0 0 40%;
		position: relative;
	}
	
	.cheese-image {
		width: 100%;
		height: auto;
	}
	
	/* 中央の×マーク */
	.cross-mark {
		flex: 0 0 auto;
		font-size: 2rem;
		color: #333;
	}
	
	/* 右側のリスト部分 */
	.items-list {
		flex: 0 0 40%;
		display: grid;
		gap: 20px;
	}
	.list-item {
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 15px;
		background: #FFF;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}
	.item-badge {
		flex: 0 0 80px; /* 固定幅を設定 */
		min-height: 48px; /* 最小の高さを設定 */
		background: #FBC02D;
		color: #FFF;
		padding: 8px 10px;
		border-radius: 10px;
		font-size: 0.9rem;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		word-break: break-word; /* 長い単語の改行を許可 */
		line-height: 1.2;
	}
	.item-text {
		flex: 1;
		font-size: 0.95rem;
		line-height: 1.5;
		color: #333;
	}
	/* レスポンシブ対応 */
	@media screen and (max-width: 768px) {
		.area02-content-wrapper {
			padding: 0 20px;
		}
		.content-container {
			flex-direction: column;
			gap: 4px;
		}
		.cheese-section {
			flex: 0 0 100%;
		}
		.cross-mark {
			transform: rotate(90deg);
		}
		.items-list {
			flex: 0 0 100%;
			width: 100%;
		}
		.list-item {
			padding: 12px;
		}
		.item-badge {
			min-height: 42px;
			font-size: 0.85rem;
		}
		.gourmet_list {
			grid-template-columns: repeat(2, 1fr); /* スマホでは2列 */
			gap: 15px;
			max-width: 100%;
		}
	}
		.gmap {
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 56.25%;    /*16:9の比率にしたい場合、9/16=56.25%*/
		}
		
		.gmap iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
/*フッター追加*/
		.organization-name {
			font-size: 1rem;
			margin-bottom: 10px;
		}
		
		.footer-info {
			display: flex;
			gap: 20px;
			font-size: 0.9rem;
		}
		
		/* スマホ用の電話番号リンク（初期状態では非表示） */
		.phone-link {
			display: none;
			color: inherit;
			text-decoration: none;
		}
		
		/* スマホ表示用 */
		@media screen and (max-width: 768px) {
			.footer-info {
				flex-direction: column;
				gap: 5px;
			}
			
			/* 電話番号リンクを表示 */
			.phone-link {
				display: inline;
			}
		}
		
/*戻るボタン*/
		.scroll-top {
			position: fixed;
			right: 20px;
			bottom: 20px;
			width: 60px;
			height: 60px;
			background-color: #FBC02D;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: opacity 0.3s ease, transform 0.3s ease;
			opacity: 0;
			z-index: 1000;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
		
		.scroll-top.visible {
			opacity: 1;
		}
		
		/* 上向き矢印 */
		.scroll-top::before {
			content: '';
			width: 10px;
			height: 10px;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			transform: rotate(-45deg);
			margin-bottom: 2px;
		}
		
		/* TOPテキスト */
		.scroll-top::after {
			content: 'TOP';
			color: #fff;
			font-size: 12px;
			font-weight: bold;
			margin-top: 2px;
		}
		
		/* ホバー効果 */
		.scroll-top:hover {
			transform: translateY(-5px);
		}
		
		/* スマホ表示用 */
		@media screen and (max-width: 768px) {
			.scroll-top {
				width: 50px;
				height: 50px;
				right: 15px;
				bottom: 15px;
			}
			
			.scroll-top::before {
				width: 8px;
				height: 8px;
			}
			
			.scroll-top::after {
				font-size: 10px;
			}
		}
		
		/* PCレイアウト フッター追加 */
		@media screen and (min-width: 768px) {
			/* 親要素をflexboxで横並びに */
			.globalFooterpc {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20px;
				margin-top: 20px;
			}
			
			/* 左側のリンク部分（7割） */
			.globalFooter__linkpc {
				width: 50%;
			}
			
			/* 右側のApp Store/Google Playボタン部分（3割） */
			.flexbox_pc {
				width: 50%;
				display: flex;
				flex-direction: column;
				gap: 60px;  /* ボタン間の間隔 */
			}
			
			/* flexbox内の各ボタン */
			.flexbox_pc div {
				width: 100%;
			}
			
			/* ボタン内の画像がはみ出ないように */
			.flexbox_pc img {
				max-width: 100%;
				height: auto;
			}
		}