@charset "utf-8";
/*------------------------------------------------------------
	スイートコーンページ
------------------------------------------------------------*/
/* common */
#gNavi .navi07 a {
	color: #7DC170;
}
:root {
	--base-color01: #311A0B;
	--base-color02: #0A2910;
	--font-color01: #fff;
	--font-color02: #4D222E;
}
.about,.upcycle{
	background-color: #FFFEF2;
}
.about .copy,
.upcycle .copy{
	color: var(--font-color02);
}
.contents_body{
	background-color: var(--base-color01);
}
.contents_body .contents_img img{
	height: 100%;
}
.overlap_text{
	color: var(--font-color01);
	text-shadow:1px 1px 3px var(--base-color01);
}
/* header */
.lp_header{
	background-color: var(--base-color01);
    height: 60px;
}
.lp_nav_list li a{
    color:#9E9792;
}
/* main visual */
.mv_video::after{
	background-image: url(../img/corn/mv_dotted.png);
	content: '';
	display: block;
	height: 100vh;
	opacity: .3;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}
.mv_copy{
	color:#4E3607;
}
a.mv_scrollicon{
    color:#fff;

}
/* about */
.about_company{
	height: auto;
}
.about_img{
    right:0;
}
/* upcycle */
.upcycle_img{
    left:0;
}
.upcycle_text{
	margin-left: auto;
	margin-right: 0;
    width: 72%;
}
/* process */
.process{
	background-image: url(../img/corn/process_bg.jpg);
	background-position: 50% 50%;
	background-size: cover;
	color: var(--font-color01);
	position: relative;
	text-align: left;
}
.process::after {
	background-color: var(--base-color02);
	bottom: 0;
	content: '';
	left: 0;
	opacity: .62;
	position: absolute;
	right: 0;
	top: 0;
}
.process h2{
	margin:0 0 8px;
}
.process .copy{
	line-height:2;
	opacity:.7;
}
/* delicious */
.delicious{
	background-color: var(--base-color02);
	color: #d6d9d3;
}
.delicious .contents_text{
    margin:0 0 24px;
}
h3{
	font-weight: 300;
}
/* gallery */
.gallery{
	background-color: #DAE3D8;
}
/* order */
.order{
	background-color: #FFF0D0;
}
.lp_form_btn {
	align-items: center;
	background-color: #583506;
	box-shadow: 0 3px 3px rgba(0,0,0,.16);
	display: block;
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}
.lp_form_btn.soldout {
	background-color: #EDE6D4;
	box-shadow: unset;
	pointer-events: none
}
a.lp_form_btn:link {
	color: #FFFFFF;
}
a.lp_form_btn:visited {
	color: #FFFFFF;
}
a.lp_form_btn:hover {
	color: #FFFFFF;
}
a.lp_form_btn.soldout:link {
	color: #DBD5C6;
}
a.lp_form_btn.soldout:visited {
	color: #DBD5C6;
}
a.lp_form_btn.soldout:hover {
	color: #DBD5C6;
}
.order .law.contents_text{
	margin: 0;
}
.law a{
	text-decoration: underline;
}
/* woodchips */
.woodchips{
	background-color: #fff;
}
.woodchips_img_wrapper{
	display: flex;
}
.woodchips .contents_text{
	margin:12px 0 0;
	text-align: center;
}
.woodchips .contents_text a{
	color:#0956BF;
	text-decoration: underline;
}

/* GSAP用 */
.contents_body .contents_img {
    /* マスクで非表示にしておく */
    clip-path: inset(0 100% 0 0);
    /* マスクがアニメーションを表示できるように */
    transition: 1s ease-in-out;
}
.contents_body.show .contents_img{
    /* マスクを解除 */
    clip-path: inset(0 0 0 0);
}
.contents_body .overlap_text{
    /* 透過で非表示 */
    opacity:0;
    /* マスクがアニメーションを表示できるように */
    transition: .5s .5s ease-in-out;
}
.contents_body.show .overlap_text{
    /* 表示 */
    opacity:1;
}


@media (max-width: 767px) {
	/* common */
	.lp h2 {
		margin: 0 0 8px;
	}
	.contents_body .contents_img {
        height: 280px;
        width: 100%;
    }
	/* main visual */
    .mv_contents {
		min-width: 280px;
        top: 50%;
    }
	.mv_logo {
		height: 200px;
		width: 180px;
	}
	.mv_copy {
		margin: 0 0 38px;
	}
	/* about */
	.about h2{
		height: 56px;
		width:238px;
	}
	.about_company {
		margin: 0;
		width: 236px;
	}
	/* upcycle */
	.upcycle h2{
		height: 56px;
		width:280px;
	}
	.upcycle_text {
		margin: 0 auto;
        width: 100%;
    }
	/* process */
	.process_inner {
		padding: 0 0 126px;
	}
	.process h2{
		height: 56px;
		width:171px;
	}
	.process .contents_img{
		margin: 0 auto;
		width: 74%;
	}
	.process .contents_img01,.contents_img02{
		display: none;
	}
	/* delicious */
	.delicious_contents{
		width: 90%;
	}
	.delicious .contents_text {
		font-size: 16px;
	}
	.delicious h2{
		height: 56px;
		width:197px;
	}
	/* gallery */
	.gallery h2 {
		height: 56px;
		margin: 0 5% 16px;
		width: 151px;
	}
	/* contact */
	.order{
		padding:126px 0 88px;
	}
	.order h2 {
		height: 56px;
		width: 120px;
	}
	.order .contents_text{
		margin: 0 0 50px;
	}
	.lp_form_btn{
		border-radius: 36px;
		font-size: 16px;
		margin: 0 auto 24px;
		min-width: 286px;
		padding: 12px 0;
		width: 90%;
	}
	.law {
		font-size: 14px;
		text-align: center;
	}
	/* woodchips */
	.woodchips{
		padding: 126px 0 120px;
	}
	.woodchips h2{
		height: 56px;
		width: 242px;
	}
	.woodchips .contents_text {
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
	}
}

@media (min-width: 768px) {
	/* common */
	.contents_body .contents_img{
		height: 430px;
        position: absolute;
        top:-128px;
        width:78%;
    }
	/* header */
	.lp_header_logo{
		height: 38px;
		width: 272px;
	}
	/* main visual */
	.mv_contents {
		top: 50%;
	}
	.mv_logo{
		height: auto;
		width: 236px;
	}
	.mv_copy{
		height: 138px;
		margin-bottom: 42px;
		width: 436px;
	}
	/* about */
	.about{
		padding: 168px 0 0;
	}
	.about h2{
		height: 70px;
		width:298px;
	}
	.about_company {
		margin: 0 auto;
		max-width: 540px;
	}
	/* upcycle */
	.upcycle{
		padding: 168px 0 0;
	}
	.upcycle h2{
		height: 70px;
		margin: 0 auto 20px;
		width:350px;
	}
	.upcycle_text {
		margin-left: auto;
		margin-right: 0;
		width: 72%;
	}
	/* process */
	.process{
		padding: 168px 0 0;
	}
	.process_inner{
		padding: 0 0 184px;
	}
	.process h2{
		height: 77px;
		width:214px;
	}
	.process .copy{
		margin-bottom: 78px;
		text-align: left;
	}
	.process .contents_img img{
		height: auto;
		width: 100%;
	}
	.process .contents_img01{
		margin: 0 0 57px;
		max-width: 754px;
	}
	.process .contents_img02{
		display: block;
		margin: 0 0 0 auto;
		max-width: 737px;
	}
	.process .contents_img_sp{
		display: none;
	}
	/* delicious */
	.delicious{
		padding:168px 0 0;
	}
	.delicious h2{
		height: 70px;
		width:246px;
	}
	/* gallery */
	.gallery{
		padding: 168px 0 0;
	}
	.gallery h2 {
		height: 70px;
		margin: 0 auto 60px;
		width: 210px;
	}
	/* order */
	.order{
		padding: 168px 20px 220px;
	}
	.order h2 {
		height: 70px;
		width: 150px;
	}
	.order .contents_text{
		margin:0 0 60px;
		text-align: center;
	}
	.lp_form_btn {
		border-radius: 50px;
		font-size: 18px;
		margin: 0 auto 60px;
		padding: 18px 0;
		width: 410px;
	}
	a.lp_form_btn:hover {
		color: #FFFFFF;
	}
	/* woodchips */
	.woodchips{
		padding: 168px 0 208px;
	}
	.woodchips h2{
		height: 70px;
		width:  302px;
	}
	.woodchips_img{
		width: 50%;
	}
}
@media (max-width: 1086px) {
	/* header */
	.lp_header {
		height: unset;
		padding: 10px 0;
	}
	.lp_header_inner {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.lp_nav {
		margin: 10px 0 0 20px;
		width: 100%;
	}
	.lp_header_logo {
		height: 29px;
		width: 208px;
	}
	.lp_nav_list li {
		margin: 0px 22px 0 0;
	}
	.lp_nav_list li:last-child {
		margin: 0px 22px 0 0;
	}
}