@charset "UTF-8";
/* ==================================================
　リセット・基本
===================================================*/
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	text-decoration:none;
	list-style:none;
}

/* ==================================================
　全体レイアウト
===================================================*/
body{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color:#6E6E6E;
	font-weight:300;
	background:#f2f2f2;
	line-height:1.6;
}
.m-plus-rounded-1c-regular {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
 	font-style: normal;
}
.shippori-mincho-regular {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}
img{
	max-width:100%;
	height:auto;
	display:block;
}

a{
	color:inherit;
}
/* ==================================================
　共通レイアウト
===================================================*/
.inner{
	max-width:900px;
	margin:0 auto;
	padding:0 20px;
}

/* ==================================================
　ヘッダー
===================================================*/
header{
	background-color: #f2f2f2;
	border-bottom: 5px solid #769871;
}

.header-top{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	padding:15px 0;
	flex-wrap:wrap;
}

header h1 img{
	width:180px;
}

.nav-icon ul{
	display:flex;
	gap:15px;
}

.nav-icon img{
	width:40px;
	transition:.3s;
}

.nav-icon img:hover{
	opacity:.5;
}

/* ナビ */
.nav ul{
	display:flex;
	justify-content:space-between;
	padding:10px 0;
	max-width:500px;
	margin:0 auto;
}

.nav a{
	font-size:14px;
	transition:.3s;
}

.nav a:hover{
	color:#d96f93;
}

/* ==================================================
　メインビジュアル
===================================================*/
.main .inner{
	position:relative;
	text-align:center;
	padding:30px 0;
	background:#fff;
	border-bottom:5px solid #769871;
	box-shadow:0 5px 3px rgba(0,0,0,0.1);
}

.main_Catchphrase{
	font-family:"Shippori Mincho", serif;
	font-weight:900;
	position:absolute;
}

#catch{
	top:10%;
	left:8%;
	color:#e3d036;
	font-size: clamp(16px, 2.5vw, 26px);
	text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}

#name{
	top:10%;
	right:8%;
	color:#fff;
	font-size: clamp(24px, 5vw, 48px);
	line-height:1;
}

#name span{
	font-size: clamp(16px, 3vw, 32px);
}

/* ==================================================
　共通見出し・ボタン
===================================================*/
h2{
	text-align:center;
	margin-top:80px;
	font-size:36px;
	font-weight:400;
}

.view_more{
	display:block;
	text-align:right;
	margin-top:20px;
	font-size:14px;
	color:#b3b3b3;
	transition:.3s;
}

.view_more:hover{
	color:#d96f93;
}

/* ==================================================
　Products
===================================================*/
#products .products-list{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:40px;
	gap:20px;
}

#products .products-list li{
	width:calc(25% - 20px);
	max-width:200px;
	text-align:center;
	background:#fff;
	border-radius:10px;
	padding:15px;
	box-shadow:0 5px 10px rgba(0,0,0,0.1);
	transition:.3s;
}
#products .products-list li:hover{
	transform:translateY(-5px);
	box-shadow:0 10px 20px rgba(0,0,0,0.15);
}
#products p{
	margin-top:8px;
}

/* ==================================================
　Campaign
===================================================*/
#campaign .campaign_link{
	display:block;
	position:relative;
	margin-top:40px;
	transition:.3s;
	overflow:hidden;
}

#campaign .campaign_link img{
  width:100%;
  transition: transform .3s;
}

#campaign .campaign_link:hover{
	opacity:.6;
}

#campaign h3{
	position:absolute;
	top:25%;
	left:50%;
	transform:translateX(-50%);
	font-size:24px;
	color:#385a59;
	text-shadow:1px 1px 2px #fff;
	text-align:center;
}

#campaign h3 span{
	font-size:18px;
	display:block;
}

.campaign_box{
	position:absolute;
	bottom:15px;
	right:15px;
	background:rgba(255,255,255,0.7);
	padding:15px;
	border-radius:10px;
	font-size:14px;
	max-width:400px;
}

/* ==================================================
　News
===================================================*/

.news-list{
	margin-top:20px;
	background-color:#BDD7D6;
	padding:20px;
	max-height:200px;
	overflow-y:scroll;
}

.news-list li{
	padding:10px;
	margin-bottom: 10px;
	background-color:#fff;
	font-size:14px;
}
.news-list li:hover{
	color: #d96f93;
}
/* ==================================================
　SNS
===================================================*/
.sns-list{
	display:flex;
	justify-content:space-between;
	margin-top:40px;
	gap:15px;
}

.sns-list img{
	width:100%;
	border:10px solid #fff;
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
	transition:.3s;
}

.sns-list img:hover{
	opacity:.6;
}

/* ==================================================
　Brand Policy
===================================================*/
#brand_policy{
	margin-top:100px;
	background:url("../images/policy_back.png") no-repeat center/cover;
	padding:80px 0;
}

.policy_box{
	background:rgba(255,255,255,0.5);
	max-width:900px;
	margin:0 auto;
	padding:5%;
	border-radius:20px;
	display:flex;
	gap:30px;
	align-items:center;
}
.policy_box img{
 	width: clamp(200px, 30%, 250px);
	margin-left: 18%;
}
.policy_box p{
	font-family:"M PLUS Rounded 1c", sans-serif;
	color:#385a59;
	line-height:1.6;
	width: 80%;
}

/* TOPボタン */
.top_button a img{
	width:55px;
	position:fixed;
	bottom:80px;
	right:40px;
}

/* ==================================================
　フッター
===================================================*/
footer{
	background:#7DA676;
	color:#fff;
}

.footer_up{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:40px;
	padding:40px 0;
}

/* access */
.access{
	display:flex;
	gap:20px;
	
}

.access li{
	background:rgba(255,255,255,0.6); /* 半透明白 */
	border-radius:10px;
	text-align:center;
	width:20%;
	aspect-ratio:1/1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	flex:1;
}

.access img{
	margin:0 auto 8%;
	width:80%;
}
.access p{
	font-size:30%;
	line-height:1.4;
	padding-bottom: none;
}
.access a{
	display:block;
	width:80%;
	height:70%;
}
/* site map */
#site_map{
	display:flex;
	gap:30px;
	justify-content:flex-end;
	flex:1; 
}
.footer-site h4{
	font-size: clamp(14px, 2vw, 18px);
	margin-bottom:10px;
}

.footer-site ul li{
	margin-bottom:5px;
	font-size: clamp(12px, 1.8vw, 14px);
}
.footer-site a {
	display: inline-block;
	text-align: left;
}
.footer-site a:hover{
	opacity:.6;
}
.footer-site .line1,
.footer-site .line2{
	display: inline-block;
}
/* footer bottom */
.footer_low{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:30px;
	padding-bottom:20px;
}
.copyright img{
  width: clamp(120px, 30vw, 200px);
}
.sns_contact{
	display:flex;
	gap:15px;
}

.sns_contact img{
	width:40px;
}

/* ==================================================
　レスポンシブ
===================================================*/

/* タブレット */
@media (max-width:768px){

	h2{font-size:28px;}

	#products .products-list li{
		width:48%;
	}
	.campaign_box{
		display: none;
	}
	.policy_box{
		flex-direction:column;
		text-align:center;
	}

	.sns-list{
		flex-wrap:wrap;
	}

	.sns-list li{
		width:48%;
	}
}

/* スマホ */
@media (max-width:480px){

	.nav ul{
		display:none;
	}

	.nav-icon ul li:not(:last-child){
		display:none;
	}

	.header-top{
		align-items:center;
	}
	.main .inner{
		aspect-ratio: 1 / 1;
		overflow: hidden;
		position: relative; /* 既にあるけど念のため */
		padding:0; /* 余白あるとズレるので消す */
	}

	.main .inner img{
		width:100%;
		height:100%;
		object-fit: cover;
		object-position: 60% center; /* 両端カット */
	}
	.main_Catchphrase{
		writing-mode: vertical-rl; /* ←縦書き */
		text-orientation: upright;
		line-height:1.8;
	}
	#catch{
		top:5%;
		left:12%;
		font-size:16px;
	}

	#name{
		top:5%;
		right:10%;
		font-size:25px;
		line-height:1.2;
	}

	#name span{
		font-size:14px;
	}

	#products .products-list li{
		width:100%;
		justify-content:center;
		max-width:320px;
		margin:0 auto;
	}
	#products .products-list li img{
		width:100%;
		max-width:260px;
		margin:0 auto;
		display:block;
	}

	#campaign .campaign_link{
		aspect-ratio: 1 / 1;
		overflow:hidden
	}
	#campaign .campaign_link img{
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:left center;
 	 }
	#campaign h3{
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		text-align:center;
		width:80%;
		font-size:clamp(16px, 4vw, 20px);
	}

	#campaign h3 span{
		font-size:clamp(12px, 3vw, 16px);
	}
	.campaign_box{
		display: none;
	}
	.footer_up{
		flex-direction:column;
	}
	.access{
		width:100%;
	}
	#site_map{
		width:100%;
		justify-content:flex-start; /* ←ここ重要 */
		flex-direction:column;      /* 縦並びにする */
		gap:20px;
	}
	.footer_low{
		flex-direction:column;
		gap:15px;
		align-items:flex-start;
	}
	.access p{
		display: none;
	}
	.sns-list{
		flex-wrap:wrap;
	}
	.sns_contact{
		order:-1; /* ←これがポイント */
	}
	.sns-list li{
		width:45%;
	}
}