@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	common
	header
	main
	footer
------------------------------------------------------------------------ */


/* ========================================================================
	common
======================================================================== */
@media print, screen and (min-width:768px){
body{
	min-width:1260px;
}

.sp{
	display:none;
}

.inner{
	position:relative;
	width:1200px;
	margin:0 auto;
}

a img, .fade, .fades a{ transition-duration:0.2s; }
a:hover img, .fade:hover, .fades a:hover{ opacity:0.8; }
.fade:hover img, .fades a:hover img{ opacity:1; }
}

@media screen and (max-width:767px){
body{
	min-width:320px;
	font-size:1.6rem; /* 16px */
}

.pc{
	display:none;
}

.inner{
	position:relative;
	padding:0 20px;
}
}


/* ========================================================================
	header
======================================================================== */
header h1{
	position:absolute;
	top:0;
	left:0;
	width:16.875vw;
}

@media screen and (max-width:767px){
header{
	background:#faf7e6;
}

header h1{
	position:static;
	width:auto;
}

header h1 img{
	width:auto;
	height:100px;
}
}


/* ----------------------------------------
	menu
---------------------------------------- */
#menu{
	position:absolute;
	top:56px;
	left:50%;
	width:1140px;
	margin:0 0 0 -570px;
}

#menu .btn{
	display:none;
}

#menu ul{
	display:flex;
	justify-content:center;
}

#menu a{
	display:block;
	margin:0 15px;
	font-size:1.6rem;
	font-weight:700;
	line-height:3.7rem;
	letter-spacing:normal;
	text-decoration:none;
}
#menu a:hover{ color:#81770E; }

@media print, screen and (min-width:768px) and (max-width:1600px){
#menu ul{
	justify-content:flex-end;
}

#menu a{
	margin:0 0 0 35px;
	font-size:1.6rem;
	line-height:3.7rem;
}
}

@media screen and (max-width:767px){
#menu .btn{
	display:block;
	position:fixed;
	top:20px;
	right:20px;
	box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	cursor:pointer;
	z-index:20;
}

#menu .gnavi{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:0 20px;
	background:rgba(0,0,0,0.6);
	text-align:center;
	z-index:15;
}

#menu ul{
	width:100%;
	height:100%;
	flex-direction:column;
	gap:20px 0;
}

#menu a{
	margin:0;
	font-size:1.8rem;
	color:#ffffff;
	line-height:3.8rem;
}
#menu a:hover{ color:#ffffff; }
}


/* ========================================================================
	main
======================================================================== */
main{
	overflow:hidden;
}

main p{
	font-weight:500;
}


/* ----------------------------------------
	h2
---------------------------------------- */
h2.icon{
	margin:0 0 80px 0;
	padding:94px 0 0 0;
	background:url(../../img/icon_pear.png) no-repeat center top;
	text-align:center;
	font-size:4.8rem;
	line-height:1;
	letter-spacing:0.1em;
}

h2.vertical{
	padding:40px 36px;
	background:url(../../img/bg_h2.png) repeat center;
	font-size:4.8rem;
	color:#ffffff;
	line-height:1;
	letter-spacing:0.2em;
	writing-mode:vertical-rl;
	white-space:nowrap;
}

@media screen and (max-width:767px){
h2.icon{
	margin:0 0 30px 0;
	padding:44px 0 0 0;
	background-size:27px 29px;
	font-size:2.4rem;
	line-height:3.4rem;
}

h2.vertical{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	padding:15px;
	font-size:2.4rem;
	line-height:1;
	letter-spacing:0.1em;
	writing-mode:horizontal-tb;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#hero{
	padding:150px 40px 86px;
	background:url(../../img/bg_hero.png) no-repeat center bottom #f9f6e2;
	text-align:center;
}

@media screen and (max-width:767px){
#hero{
	padding:40px 10px;
	background-position:center;
	background-size:100% auto;
}
}


/* ----------------------------------------
	about
---------------------------------------- */
#about{
	position:relative;
	min-height:1056px;
	padding:12px 0 0 0;
	background:#f9f6e2;
	text-align:center;
}

#about::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:314px;
	background:url(../../img/bg_about01.png) no-repeat center top;
	background-size:cover;
	z-index:1;
}

#about::after{
	content:"";
	position:absolute;
	top:37px;
	left:0;
	width:100%;
	height:784px;
	background:url(../../img/bg_about02.png) no-repeat center;
	z-index:2;
}

#about .inner{
	z-index:3;
}

#about h2.icon{
	letter-spacing:0.2em;
}

#about p{
	font-size:2.0rem;
	line-height:4.2rem;
}

@media screen and (max-width:767px){
#about{
	min-height:auto;
	padding:20px 0;
	background:url(../../img/bg_about02.png) no-repeat center 20px #f9f6e2;
	background-size:100% auto;
}
#about::after{ content:none; }

#about::before{
	bottom:-157px;
	height:157px;
	background-size:100% auto;
}

#about p{
	font-size:1.8rem;
	line-height:3.8rem;
}
}


/* ----------------------------------------
	feature
---------------------------------------- */
#feature{
	position:relative;
	margin:0 0 210px 0;
	padding:214px 0 0 0;
}

#feature::before{
	content:"";
	position:absolute;
	top:-314px;
	left:0;
	width:100%;
	height:774px;
	background:url(../../img/bg_feature.jpg) no-repeat center top;
	background-size:cover;
}

#feature .inner{
	display:flex;
	width:auto;
	max-width:1680px;
	padding:0 40px;
}

#feature h2.vertical{
	padding:14px 36px 34px;
}

#feature p{
	position:absolute;
	bottom:0;
	right:140px;
	font-size:2.2rem;
}

#feature ul{
	display:flex;
	padding:0 0 0 80px;
}

#feature ul li:nth-child(1){ margin:103px 3px 0 0; }
#feature ul li:nth-child(2){ margin:256px 6px 0 0; }
#feature ul li:nth-child(3){ margin:99px 46px 0 0; }
#feature ul li:nth-child(4){ margin-top:29px; }

@media screen and (max-width:767px){
#feature{
	margin:0 0 98px 0;
	padding:16.3541% 0 0 0;
	background:url(../../img/bg_feature.jpg) no-repeat center top;
	background-size:auto 100%;
}
#feature::before{ content:none; }

#feature .inner{
	display:block;
	padding:0 20px;
	z-index:1;
}

#feature h2.vertical{
	top:40px;
	padding:15px 15px 15px 5px;
}

#feature p{
	position:absolute;
	bottom:-38px;
	right:20px;
	font-size:1.8rem;
	line-height:1;
}

#feature ul{
	flex-wrap:wrap;
	margin:0 -5px;
	padding:114px 0 0 0;
}

#feature ul li{
	width:50%;
	padding:0 5px 20px;
}
#feature ul li:nth-child(1),
#feature ul li:nth-child(2),
#feature ul li:nth-child(3),
#feature ul li:nth-child(4){ margin:0; }
}


/* ----------------------------------------
	name
---------------------------------------- */
#name{
	position:relative;
	padding:150px 0 0 0;
	background:url(../../img/bg_name.png) no-repeat center 296px #f9f6e2;
}

#name::before{
	content:"";
	position:absolute;
	top:-80px;
	left:50%;
	width:580px;
	height:498px;
	margin:0 0 0 332px;
	background:url(../../img/bg_pear.png) no-repeat center;
}

@media screen and (max-width:767px){
#name{
	padding:60px 0 0 0;
	background:url(../../img/bg_name.png) no-repeat center 140px #f9f6e2;
	background-size:200% auto;
}

#name::before{
	top:-20px;
	width:50%;
	height:100px;
	margin:0;
	background:url(../../img/bg_pear.png) no-repeat right 20px center;
	background-size:auto 100%;
}
}


/* box
---------------------------------------- */
#name .box{
	display:flex;
	margin:35px 0 0 0;
	padding:54px 100px 100px;
	background:#ffffff;
	border:3px solid #d0bf1c;
	border-radius:50px;
}
#name dl.box{
	display:block;
	margin:0;
	padding:94px 0 88px 0;
	text-align:center;
}

#name .box .logo{
	padding:0 130px 0 22px;
}

#name .box .block{
	flex:1;
	padding:80px 0 0 0;
}

#name .box h3{
	margin:0 0 25px 0;
	padding:0 0 15px 0;
	border-bottom:2px solid #d9c71e;
	font-size:3.0rem;
	font-weight:700;
	line-height:4.0rem;
}

#name .box dd{
	padding:28px 0 0 0;
	font-size:2.4rem;
	color:#000000;
}

@media screen and (max-width:767px){
#name .box{
	display:block;
	margin:20px 0 0 0;
	padding:30px 20px;
	border:3px solid #d0bf1c;
	border-radius:30px;
}
#name dl.box{ padding:30px 20px; }

#name .box .logo{
	padding:0 0 30px 0;
	text-align:center;
}
#name .box .logo img{ width:184px; }

#name .box .block{
	padding:0;
}

#name .box h3{
	margin:0 0 20px 0;
	text-align:center;
	font-size:2.2rem;
	line-height:3.2rem;
}

#name .box dt{
	line-height:1;
}
#name .box dt img{ width:198px; }

#name .box dd{
	padding:20px 0 0 0;
	font-size:1.8rem;
}
}


/* ----------------------------------------
	consumer
---------------------------------------- */
#consumer{
	position:relative;
	padding:392px 0 148px 0;
}

#consumer::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../../img/bg_consumer.png) no-repeat center top;
	background-size:100% auto;
}

#consumer h2.icon{
	margin-bottom:50px;
}

#consumer p{
	margin:0 0 74px 0;
	text-align:center;
	line-height:3.0rem;
}

#consumer ul{
	display:flex;
	flex-wrap:wrap;
	gap:40px 60px;
}

#consumer ul li{
	width:570px;
	padding:60px 40px 64px;
	background:#f7f7f7;
	border-radius:14px;
}

#consumer ul li h3{
	padding:0 0 10px 52px;
	background:url(../../img/icon_balloon.png) no-repeat left top;
	font-size:2.4rem;
	font-weight:700;
	color:#4c4c4c;
	line-height:3.6rem;
}

#consumer ul li p{
	margin:0;
	text-align:left;
	font-size:1.6rem;
}

@media screen and (max-width:767px){
#consumer{
	padding:21.5625% 0 20px 0;
}

#consumer h2.icon{
	margin-bottom:20px;
}

#consumer p{
	margin:0 0 30px 0;
}

#consumer ul{
	display:block;
}

#consumer ul li{
	width:auto;
	margin:0 0 20px 0;
	padding:30px 20px;
}

#consumer ul li h3{
	padding:0 0 10px 40px;
	background:url(../../img/icon_balloon.png) no-repeat left 2px;
	background-size:30px auto;
	font-size:2.0rem;
	line-height:3.0rem;
}

#consumer ul li p{
	font-size:1.6rem;
}
}


/* age
---------------------------------------- */
#consumer .age{
	margin:0 0 34px 0;
	font-size:1.6rem;
	font-weight:500;
	color:#4c4c4c;
	line-height:1;
}

@media screen and (max-width:767px){
#consumer .age{
	margin:0 0 20px 0;
	font-size:1.4rem;
}
}


/* ----------------------------------------
	producer
---------------------------------------- */
#producer{
	position:relative;
	margin:0 0 274px 0;
	padding:168px 0 5px 0;
	border-top:72px solid #ffffff;
	background:linear-gradient(to bottom, #f9f6e2 0%, #fee781 100%);
}

#producer::before{
	content:"";
	position:absolute;
	bottom:-274px;
	left:0;
	width:100%;
	height:274px;
	background:url(../../img/bg_producer.png) no-repeat center bottom;
	background-size:cover;
}

#producer h2.vertical{
	position:absolute;
	top:-240px;
	right:-200px;
	letter-spacing:0.05em;
}

#producer .inner > div{
	display:flex;
	align-items:flex-start;
	margin:0 0 60px 0;
}

@media print, screen and (min-width:768px) and (max-width:1680px){
#producer .inner{
	padding-right:160px;
}

#producer h2.vertical{
	right:0;
}
}

@media screen and (max-width:767px){
#producer{
	margin:0;
	padding:0;
	border-top:20px solid #ffffff;
}

#producer::before{
	bottom:-137px;
	height:137px;
	background:url(../../img/bg_producer.png) no-repeat center top;
	background-size:100% auto;
}

#producer h2.vertical{
	top:-20px;
	right:auto;
}

#producer .inner{
	padding-top:84px;
}

#producer .inner > div{
	display:block;
	margin:0;
	padding:0 0 50px 0;
}
}


/* block
---------------------------------------- */
#producer .block{
	position:relative;
	padding:52px 82px 0 87px;
}

#producer .block h3{
	position:absolute;
	top:0;
	left:0;
}

#producer .block figcaption{
	padding:16px 0 0 0;
	text-align:center;
	font-size:2.2rem;
	font-weight:500;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#producer .block{
	padding:0;
	text-align:center;
}

#producer .block h3{
	top:-20px;
	left:auto;
	right:50%;
	margin:0 50px 0 0;
	width:100px;
}

#producer .block figure img{
	width:240px;
}

#producer .block figcaption{
	font-size:2.0rem;
	line-height:2.8rem;
}
}


/* balloon
---------------------------------------- */
#producer .balloon{
	flex:1;
	position:relative;
	margin:42px 0 0 0;
	padding:70px 50px 30px 60px;
	background:#ffffff;
	border:3px solid #d0bf1c;
	border-radius:30px;
}

#producer .balloon::before,
#producer .balloon::after{
	content:"";
	position:absolute;
	top:77px;
	left:-27px;
	border-style:solid;
	border-color:transparent #d0bf1c transparent transparent;
	border-width:13.5px 27px 13.5px 0px;
}
#producer .balloon::after{
	top:80px;
	left:-21px;
	border-right-color:#ffffff;
	border-width:10.5px 21px 10.5px 0px;
}

#producer .balloon p{
	margin:0 0 40px 0;
	line-height:3.2rem;
}

#producer .balloon .img{
	margin:0 -15px 40px;
}

#producer .balloon .img img{
	width:50%;
	padding:0 15px;
}

@media screen and (max-width:767px){
#producer .balloon{
	margin:30px 0 0 0;
	padding:30px 20px 10px;
}
#producer .balloon::before,
#producer .balloon::after{ content:none; }

#producer .balloon p{
	margin:0 0 20px 0;
}

#producer .balloon .img{
	margin:0 -10px 20px;
}

#producer .balloon .img img{
	padding:0 10px;
}
}


/* developer
---------------------------------------- */
#producer .developer .block{
	order:2;
	padding:52px 74px 0 95px;
}

#producer .developer h3{
	left:auto;
	right:0;
}

@media screen and (max-width:767px){
#producer .inner .developer{
	padding:0 0 20px 0;
}

#producer .developer .block{
	padding:0;
}

#producer .developer h3{
	left:50%;
	margin:0 0 0 50px;
}
}


/* ---------- balloon ---------- */
#producer .developer .balloon{
	order:1;
}

#producer .developer .balloon::before,
#producer .developer .balloon::after{
	left:auto;
	right:-27px;
	border-color:transparent transparent transparent #d0bf1c;
	border-width:13.5px 0px 13.5px 27px;
}
#producer .developer .balloon::after{
	right:-21px;
	border-left-color:#ffffff;
	border-width:10.5px 0px 10.5px 21px;
}


/* ----------------------------------------
	link
---------------------------------------- */
#retailer{
	padding:90px 0 90px 0;
}

#retailer h2{
	margin:0 0 80px 0;
	text-align:center;
	font-size:3.4rem;
	font-weight:700;
	line-height:4.4rem;
}

#retailer h2 span{
	display:inline-block;
	padding:0 18px 15px;
	border-bottom:2px solid #d0bf1c;
}

@media screen and (max-width:767px){
#retailer{
	padding:14.2708% 0 60px 0;
}

#retailer h2{
	margin:40px 0 30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#retailer h2 span{
	display:block;
	padding:0 0 15px 0;
}
}

/* box
---------------------------------------- */
#retailer .box{
	display:flex;
	justify-content:space-between;
	padding:60px 70px;
	border:2px solid #e8e6d2;
	border-radius:20px;
	margin-bottom: 30px;
}

#retailer .box .logo{
	padding:5px 0 0 60px;
}

#retailer .box dl{
	width:640px;
}

#retailer .box dl dt{
	margin:0 0 12px 0;
	padding:0 0 13px 0;
	border-bottom:2px solid #e8e6d2;
	font-size:3.0rem;
	font-weight:500;
	line-height:4.0rem;
}

#retailer .box dl dd{
	font-weight:500;
	line-height:4.0rem;
}
#retailer .box dl dd a{ text-decoration:none; }
#retailer .box dl dd a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
#retailer .box{
	display:block;
	padding:30px 20px;
}

#retailer .box .logo{
	padding:0 0 30px 0;
	text-align:center;
}
#retailer .box .logo img{ width:140px; }

#retailer .box dl{
	width:auto;
}

#retailer .box dl dt{
	margin:0 0 10px 0;
	padding:0 0 15px 0;
	text-align:center;
	font-size:2.2rem;
	line-height:3.2rem;
}

#retailer .box dl dd{
	line-height:3.6rem;
	word-break:break-all;
}
}

/* ----------------------------------------
	link
---------------------------------------- */
#link{
	padding:90px 0 190px 0;
}

#link h2{
	margin:0 0 80px 0;
	text-align:center;
	font-size:3.4rem;
	font-weight:700;
	line-height:4.4rem;
}

#link h2 span{
	display:inline-block;
	padding:0 25px 25px;
	border-bottom:1px solid #d0bf1c;
}
#link ul {
	margin: 0 auto;
	border-top: 2px solid #e8e6d2;
}
#link li {
	padding: 20px 0;
	border-bottom: 2px solid #e8e6d2;
}

@media screen and (max-width:767px){
#link{
	padding:14.2708% 0 60px 0;
}

#link h2{
	margin:40px 0 30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#link h2 span{
	display:block;
	padding:0 0 15px 0;
}
}


/* ========================================================================
	footer
======================================================================== */
footer{
	background:#d0bf1c;
}

footer::after{
	content:"";
	display:block;
	aspect-ratio:1920/370;
	background:url(../../img/bg_footer.jpg) no-repeat center;
	background-size:cover;
}

footer .inner{
	display:flex;
	justify-content:space-between;
	width:auto;
	max-width:1680px;
	padding:0 40px 58px;
}

footer address{
	padding:144px 70px 0 0;
	font-weight:500;
	color:#000000;
	line-height:3.0rem;
}

footer .pagetop{
	display:none;
	position:fixed;
	bottom:30px;
	right:30px;
	cursor:pointer;
	z-index:10;
}

@media screen and (max-width:767px){
footer .inner{
	display:block;
	padding:0 20px 30px;
}

footer .logo img{
	width:149px;
}

footer address{
	padding:30px 0 0 0;
}

footer .pagetop{
	bottom:20px;
	right:20px;
	width:60px;
}
}