@charset "utf-8";
/* terracanis.css */
.wrapper .__inner .main{padding-top: 0;}
.wrapper .__inner .main .__heading h1.__h1.c-h1{display: none;}
.wrapper--page-detail .__inner{
	max-width: none !important;
}
.main.main--page-detail-1column section.__to-home{display: none;}
.main.main--page-detail-1column section:not(.__heading), .main.main--page-detail-2column section:not(.__heading){
	padding: 0;
}

#brand-wrapper{
	margin-bottom: 5em;
	font-family:'Noto Sans JP', sans-serif;
	font-size: 16px;
	color: #000;
}
#brand-wrapper section .inner{
	max-width: 1200px;
	width: 95%;
	margin: auto;
}
#brand-wrapper section .side-by-side{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3.8em;
}
#brand-wrapper h3{
	margin-bottom: 0;
	color: #e5ddb6;
	font-size: 70px;
	font-weight: bold;
	font-family: 'Inter', sans-serif;
    line-height: 0.85;
    letter-spacing: 0.08em;	
}
#brand-wrapper .inner h4{
	margin-bottom: 1.3em;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
}
#brand-wrapper .breadcrumb{
	position: relative;
	max-width: 1400px;
    width: 98%;
    margin: 1.5em auto 3em;
	padding-left: 28px;
	font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1;
	letter-spacing: 0.06em;
}
#brand-wrapper .breadcrumb::before{
	content: "";
	background: url(https://files.bcart.jp/tricco/uploads/images/common/icon_bc.png)no-repeat;
	background-size: 100%;
	position: absolute;
	top: -4px;
	left: 0;
	width: 18px;
	height: 18px;
}
#brand-wrapper .breadcrumb span{
	margin: 0 8px;
}
#brand-wrapper .kv{
    margin-bottom: 100px;
    font-size: 0;
    line-height: 0;
}
#brand-wrapper .about{
	margin-top: 0;
}
#brand-wrapper .about .h2_ttl{
    text-align: center;
    font-size: 60px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    line-height: 0.7;
}
#brand-wrapper .h2_ttl span{
	font-size: 20px;
	font-family: 'Noto Sans JP', sans-serif;
}
#brand-wrapper .concept{
	margin-top: 3.2em;
	padding-bottom: 4em;
	background-color: #f4f2e6;
}
#brand-wrapper .detail{
	position: relative;
	display: block;
}
#brand-wrapper .detail .h3_sub{
    position: absolute;
    bottom: -33%;
    left: 1%;
    font-size: 30px;
    font-weight: bold;
}
#brand-wrapper .side-by-side .side_left{
	width: 45%;
	line-height: 0;
}
#brand-wrapper .side-by-side .side_right{
	width: 45%;
}
#brand-wrapper .side-by-side .txt{
    margin-bottom: 1.8em;
	line-height: 1.8;
    letter-spacing: 0.02em;
}
#brand-wrapper .inner .btn_link{
	position: relative;
    display: block;
    max-width: 300px;
    width: 60%;
    color: #fff;
    background: #997c31;
	text-indent: -1.3em;
    text-align: center;
    text-decoration: none;
    font-size: 20.6px;
    margin: auto;
    padding: 1em 0;
    line-height: 0.9;
	letter-spacing: -0.02em;
}
#brand-wrapper .inner .btn_link:hover{opacity: .8;}
#brand-wrapper .inner .btn_link::after{
	content: "";
	background: url(https://files.bcart.jp/tricco/uploads/images/brand/forza/link_icon.png)no-repeat;
    background-size: 100%;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 28%;
    right: 13%;
}
#brand-wrapper .quality{margin-top: 93px;}
#brand-wrapper .quality .side-by-side{
	margin-top: -4em;
	margin-bottom: 2.5em;
}
#brand-wrapper .quality .side-by-side .side_left{
	padding-top: 7.1em;
}
#brand-wrapper .quality .side-by-side .side_left .emb{
	margin-top: 2em;
	margin-bottom: 2em;
}

#brand-wrapper .quality .side-by-side .split{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	margin-top: 3.2em;
}
#brand-wrapper .quality .side-by-side .split p.split_lead{
	width: 43%;
}
#brand-wrapper .quality .side-by-side .split p.split_img{
	width: 53%;
}
#brand-wrapper .quality .side-by-side .split p.split_lead .ttl{
	font-weight: bold;
}
#brand-wrapper .quality .side-by-side .split p.split_lead .txt{
	display: block;
	font-size: 14px;
}
#brand-wrapper .sustainable{
	margin-top: 6.3em;
	padding-bottom: 4em;
	background-color: #f4f2e6;
}
#brand-wrapper .sustainable .sustainable_ul{
	display: flex;
	justify-content: space-between;
	gap:0 1rem;
	margin: 5.5em auto 5em;
	list-style: none;
}
#brand-wrapper .sustainable .sustainable_ul li{
	max-width: 330px;
	width: 32%;
}
#brand-wrapper .sustainable .sustainable_ul li h4{
	margin-top: 0.4em;
    margin-bottom: 0.4em;
	font-size: 17px;
	font-weight: bold;
}
#brand-wrapper .sustainable .sustainable_ul li p{
	font-size: 16px;
	font-feature-settings: "palt" 1;
	line-height: 1.8;
	letter-spacing: 0.08em;
}
#brand-wrapper .product{
	margin-top: 8.7em;
}
#brand-wrapper .product .product_img{
	max-width: 866.5px;
	width: 90%;
	margin: auto;
}
#brand-wrapper .product h3{
	margin-top: 0.8em;
	color: #000;
	text-align: center;
	font-size: 60px;
}
#brand-wrapper .product .h3_sub{
    display: block;
    margin: auto;
    color: #000;
    text-align: center;
    font-size: 20px;
    line-height: 3;
}
#brand-wrapper .product .item_ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:0 1.86%;
	max-width: 1100px;
	width: 90%;
	margin: 0 auto 5em;
	padding: 3em 0;
	list-style: none;
}
#brand-wrapper .product .item_ul li{
	max-width: 256px;
	width: 23.6%;
	margin-bottom: 3em;
}
#brand-wrapper .product .item_ul li .lead{
	font-feature-settings: "palt";
	line-height: 1.8;
	letter-spacing: 0.02em;
}
#brand-wrapper .product .item_ul li a{
    position: relative;
    display: block;
    max-width: 174px;
    width: 80%;
    margin: 1.2em auto 0;
    padding: 4% 0;
    color: #fff;
    text-align: center;
    background: #997c31;
    line-height: 1;
}
#brand-wrapper .product .item_ul li a:hover{
	text-decoration: none;
	opacity: .8;
}
#brand-wrapper .product .item_ul li a::after{
    content: "";
    position: absolute;
    top: 39%;
    right: 8%;
    margin: 0;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
#brand-wrapper .product .dog{
	max-width: 1200px;
	width: 100%;
	margin: 3em auto 0;
	background: #f4f2e6;
}
#brand-wrapper .product h4.product_ttl{
	background-color: #d3c375;
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/terracanis/tera_pc_product02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 140px;
    color: #fff;
    text-align: center;
    font-size: 52px;
    font-weight: bold;
	font-family: 'Inter', sans-serif;
    line-height: 2.5;
    letter-spacing: 0.1em;
}
#brand-wrapper .product .cat{
	max-width: 1200px;
	width: 100%;
	margin: auto;
	background: #e2ede0;
}
#brand-wrapper .product .cat h4.product_ttl{
	background-color: #b5cfaf;
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/terracanis/tera_pc_product03.jpg);
}
#brand-wrapper .product .cat .item_ul li a{
    background: #75a969;
}

/* ---------- w1250 ---------- */
@media (min-width:751px) and (max-width:1250px){


}/* w1250 end */


/* ---------- sp750 ---------- */
@media screen and (max-width: 750px){
.wrapper .__inner .main{
	padding-top: 0;
}
.main.main--page-detail-1column section:not(.__heading), .main.main--page-detail-2column section:not(.__heading){
	padding: 0;
}
.main.main--page-detail-1column section:not(:first-child), .main.main--page-detail-2column section:not(:first-child){
	margin-top: 0;
}
#brand-wrapper{font-size: 4vw;}
#brand-wrapper section .inner{width: 100%;}
#brand-wrapper section .side-by-side{
	display: block;
	margin-top: 10%;
	margin-bottom: 10%;
}
#brand-wrapper h3{font-size: 13.05vw;}
#brand-wrapper .inner h4{
    margin: 5% auto;
    text-align: justify;
    font-size: 4.8vw;
    font-feature-settings: "palt";
    line-height: 1.6;
    letter-spacing: 0.02em;
}
#brand-wrapper .kv{margin-bottom: 16%;}
#brand-wrapper .about .h2_ttl{
	font-size: 9.33vw;
	line-height: 0.8;
}
#brand-wrapper .h2_ttl span{
	font-size: 4.8vw;
	font-family: 'Noto Sans JP', sans-serif;
}
#brand-wrapper .concept{
	margin-top: 12%;
	padding: 0 6% 10%;
}
#brand-wrapper .detail{}
#brand-wrapper .detail .h3_sub{font-size: 5.59vw;}
#brand-wrapper .side-by-side .side_left{width: 100%;}
#brand-wrapper .side-by-side .side_right{width: 100%;}
#brand-wrapper .side-by-side .txt{
	margin-bottom: 5%;
	text-align: justify;
	font-feature-settings: "palt";
    letter-spacing: 0.03em;
}
#brand-wrapper .inner .btn_link{
	width: 76%;
	font-size: min(4.56vw, 20.6px);
}
#brand-wrapper .inner .btn_link:hover{}
#brand-wrapper .inner .btn_link::after{
	top: 30%;
	max-width: 24px;
	max-height: 24px;
	width: 5.33vw;
    height: 5.33vw;
}
#brand-wrapper .quality{
	margin-top: 25%;
	padding: 0 6% 10%;
}
#brand-wrapper .quality .side-by-side{
	margin-bottom: 5%;
}
#brand-wrapper .quality .side-by-side .side_left{
}
#brand-wrapper .quality .side-by-side .side_left .quality_spimg{
	margin-bottom: 5%;
}
#brand-wrapper .quality .side-by-side .side_left .emb{
	width: 85%;
	margin: 0 auto 5%;
}
#brand-wrapper .quality .side-by-side .split{
    flex-wrap: wrap;
	margin-top: 10%;
}
#brand-wrapper .quality .side-by-side .split p.split_lead{
	width: 100%;
}
#brand-wrapper .quality .side-by-side .split p.split_img{
	width: 100%;
}
#brand-wrapper .quality .side-by-side .split p.split_img>img{
	display: block;
	width: 68%;
	margin: 0 auto 5%;
}
#brand-wrapper .quality .side-by-side .split p.split_lead .ttl{
}
#brand-wrapper .quality .side-by-side .split p.split_lead .txt{
	font-size: 3.73vw;
	letter-spacing: 0.08em;	
}

#brand-wrapper .sustainable{
	margin-top: 16%;
	padding: 0 6% 10%;
}
#brand-wrapper .sustainable .inner h3{
	font-size: 12.8vw;
    letter-spacing: -0.02em;
}
#brand-wrapper .sustainable .inner .h3_sub{
	bottom: -18%;
}
#brand-wrapper .sustainable .sustainable_ul{
	flex-wrap: wrap;
	margin: 20% auto 1%;
}
#brand-wrapper .sustainable .sustainable_ul li{
	width: 100%;
	margin: 0 auto 12%;
}
#brand-wrapper .sustainable .sustainable_ul li figure{
	display: block;
	width: 75.76%;
	margin: auto;
}
#brand-wrapper .sustainable .sustainable_ul li h4{
	margin: 1% auto;
	font-size: 4.27vw;
}
#brand-wrapper .sustainable .sustainable_ul li p{
    text-align: justify;
    line-height: 1.6;
	font-size: 4vw;
	letter-spacing: 0.05em;
}
#brand-wrapper .product{
	margin-top: 28%;
}
#brand-wrapper .product .product_img{
	max-width: 100%;
	width: 100%;
}
#brand-wrapper .product h3{
	margin-top: 10%;
	font-size: 9.33vw;
	font-family: 'Inter', sans-serif;
    letter-spacing: 0;
}
#brand-wrapper .product .h3_sub{
    font-size: 4.8vw;
    font-family: 'Noto Sans JP', sans-serif;
	line-height: 2;
    letter-spacing: 0.04em;
}
#brand-wrapper .product .item_ul{
	gap: 0 5%;
	width: 88%;
	margin: 0 auto 4em;
	padding: 1.5em 0 1em;
}
#brand-wrapper .product .item_ul li{
	max-width: unset;
	width: 47.5%;
    margin-bottom: 10%;
}
#brand-wrapper .product .item_ul li .lead{
	min-height: 4.5em;
    text-align: justify;
    font-size: 3.47vw;
	font-feature-settings: "palt";
    line-height: 1.5;
    letter-spacing: 0;
}
#brand-wrapper .product .item_ul li a{
	max-width: unset;
	padding: 5% 0;
	font-size: 2.93vw;
}
#brand-wrapper .product .item_ul li a:hover{
}
#brand-wrapper .product .item_ul li a::after{
    top: 40%;
    right: 8%;
    margin: 0;
    width: 1.5vw;
    height: 1.5vw;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
#brand-wrapper .product .dog{
}
#brand-wrapper .product h4.product_ttl{
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/terracanis/sp_terra_DOG.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 18.6vw;
	font-size: 9.33vw;
	line-height: 2;
	letter-spacing: 0.04em;
	text-indent: 1.2em;
	font-weight:bold;
}
#brand-wrapper .product .cat{
}
#brand-wrapper .product .cat h4.product_ttl{
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/terracanis/sp_terra_CAT.jpg);
}
#brand-wrapper .product .cat .item_ul li a{
	padding: 6% 0;
	font-size: 2.93vw;
}


}/* sp750 end */


/*----------------------------------------------------------*/
/* for NaturalCode orver ride */
/*----------------------------------------------------------*/

/* --------------- */
/* fix */
.header { z-index:1000!important; }

/* --------------- */
/* common */
.main #brand-wrapper section .img-wrap { display: flex; }
.main #brand-wrapper section .img-wrap img { width:100%; }
.main #brand-wrapper section .inner .lead .detail { position: relative; display: flex; align-items: baseline; margin-bottom: 3%; }
.main #brand-wrapper section .inner .lead .detail h3 { margin-bottom: 0; font-size: 3.8vw; color: #e00053; font-weight: bold; font-family: 'Inter', sans-serif; line-height: 0.85; letter-spacing: 0.08em; }
.main #brand-wrapper section .inner .lead .detail .h3_sub { position: static; font-size: 1.5vw; font-weight: bold; color: #000; }
.main #brand-wrapper section .inner .lead p.att { font-size: 1.5vw; font-weight: bold; color: #fff; line-height: 1.6em; }
.main #brand-wrapper section .inner .lead p.about { font-size: 1.2vw; font-weight: normal; color: #fff; margin-top: 2%; width: 60%; line-height: 1.8em; }
.main #brand-wrapper section.concept,
.main #brand-wrapper section.features { margin-top: 0; padding-bottom:0; position: relative; }
.main #brand-wrapper section.concept .inner,
.main #brand-wrapper section.features .inner { position: absolute; top: 0; left: 0; width: 50%; max-width: unset; }

/* --------------- */
/* kv */
.main #brand-wrapper .kv { margin-bottom: 0px; }
.main #brand-wrapper .kv .bg1{ background-color: #f89270; }
.main #brand-wrapper .kv .bg2{ background-color: #e00053; }
.main #brand-wrapper .kv .bg2 p { text-align: center; font-size: 60px; font-weight: 600; font-family: 'Inter', sans-serif; line-height: 0.7; color: #fff; }

/* --------------- */
/* Concept */
.main #brand-wrapper section.concept {}
.main #brand-wrapper section.concept .inner{ top: 13%; left: 50%; }
.main #brand-wrapper section.concept .inner .lead p.att { color: #e00053; }
.main #brand-wrapper section.concept .inner .lead p.about { color: #000; }

/* --------------- */
/* Feature */
.main #brand-wrapper section.features {}
.main #brand-wrapper section.features .inner{ top: 13%; left: 16%; }
.main #brand-wrapper section.features .inner .lead .detail { margin-bottom: 12%; }
.main #brand-wrapper section.features .inner .lead p.about { width: 67%; }

/* --------------- */
/* Recipe */
.main #brand-wrapper section.recipe { margin: 0; padding: 4% 0; position: relative; }
.main #brand-wrapper section.recipe .inner { display: grid; gap: 5%; grid-template-columns: 50% 50%; width: 75%; max-width: unset; }
.main #brand-wrapper section.recipe .inner .photo { width: 100%; text-align: right; }
.main #brand-wrapper section.recipe .inner .photo img { margin: 0 2% 0 0; width: 80%; display: inline-block; }
.main #brand-wrapper section.recipe .inner .lead p.att { color: #e00053; }
.main #brand-wrapper section.recipe .inner .lead p.about { font-size: 1vw; color: #000; width: 80%; }
.main #brand-wrapper section.recipe .cat2 { position: absolute; bottom: 0; left: 13%; width: 10%; }
.main #brand-wrapper section.recipe .cat3 { position: absolute; bottom: 0; right: 8%; width: 7%; }

/* --------------- */
/* Go Green */
.main #brand-wrapper section.gogreen { padding-top:4%; margin:0; background: #7bd04a; position: relative; }
.main #brand-wrapper section.gogreen .inner { text-align:center; max-width: unset; padding-bottom: 10em; z-index: 1; position: relative; }
.main #brand-wrapper section.gogreen .inner .ttl { color: #fff; font-size: 2.6vw; font-weight: bold; margin-bottom: 2%; }
.main #brand-wrapper section.gogreen .inner .about { color: #fff; font-size: 1.3vw; line-height: 2.2em; font-weight:bold; }
.main #brand-wrapper section.gogreen .inner ul.active { display: flex; flex-direction: column; gap: 6em; max-width: 1200px; margin: 5em auto 0; }
.main #brand-wrapper section.gogreen .inner ul.active li { list-style-type: none; position: relative; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail { border-radius: 4em; padding:3em 0 2em 4em; display: grid; grid-template-columns: 45% auto; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(1) .detail { background-color: #08bae9; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail { background-color: #fbc653; padding: 3em 4em 2em 0; grid-template-columns: auto 45%; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(3) .detail { background-color: #e34a83; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail .data { display: flex; flex-direction: column; gap: 0.5em; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(odd) .detail .data { order:1; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(even) .detail .data { order:2; gap: 0.5em; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(3) .detail .data { gap: 0.5em; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail .topic { display: grid; justify-content: left; align-items: center; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(1) .detail .topic { grid-template-columns: 220px auto; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail .topic { grid-template-columns: 220px auto; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(3) .detail .topic { grid-template-columns: 200px auto; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail .topic p { color:#fff; font-weight:bold; font-size:20px; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail .topic p { margin-left:1.5em; padding-bottom: 1em; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(3) .detail .topic p { margin-left:1.5em; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail .info { color:#fff; font-size:14px; text-align: left; line-height: 1.8em; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail .info { color:#000; }
.main #brand-wrapper section.gogreen .inner ul.active li .photo { width: 92%;margin-top: -14%; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(odd) .photo { text-align: right; margin-left: auto; order:2; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(even) .photo { text-align: left; margin-right: auto; order:1; }
.main #brand-wrapper section.gogreen::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;max-width: 40%;background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/natural/img_gogreen_bk01.jpg);background-size: contain;background-repeat: no-repeat;background-position-y: bottom;}
.main #brand-wrapper section.gogreen::after {content: "";position: absolute;bottom: 0;right: 0;width: 100%;height: 100%;max-width: 40%;background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/natural/img_gogreen_bk02.jpg);background-size: contain;background-repeat: no-repeat;background-position-x: right;background-position-y: bottom;}

/* --------------- */
/* Line Up */
.main #brand-wrapper .product .cat h4.product_ttl {
	background-color: #faeef3;
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/natural/lineup_cat.png);
}
.main #brand-wrapper .product .cat{
	background: #faeef3;
}
.main #brand-wrapper .product .cat .item_ul li a {
	background: #e00053;
}

/* ------------------------------------------------------------------------------------------ */
/* ---------- sp750 ---------- */
/* ------------------------------------------------------------------------------------------ */
@media screen and (max-width: 750px){

/* --------------- */
/* common */
.main #brand-wrapper section .inner .lead .detail h3 { font-size: 11vw; }
.main #brand-wrapper section .inner .lead .detail { flex-direction: column; margin-bottom: 6%; }
.main #brand-wrapper section .inner .lead .detail .h3_sub { font-size: 3.5vw; }
.main #brand-wrapper section .inner .lead p.att { font-size: 3.5vw; }
.main #brand-wrapper section .inner .lead p.about { font-size: 3.5vw; }
.main #brand-wrapper section .inner .lead p.about { width:100%; }

/* --------------- */
/* Concept */
.main #brand-wrapper section.concept { padding: 0; display: flex; flex-direction: column; }
.main #brand-wrapper section.concept .img-wrap { order:2;}
.main #brand-wrapper section.concept .inner{ position:static; order:1; }
.main #brand-wrapper section.concept .inner {position: static;order: 1;width: 100%;background: #dedede;margin: 0 auto;padding: 2.5em 2em 2em;}

/* --------------- */
/* Feature */
.main #brand-wrapper section.features .cat1 {position: absolute;top: -17%;left: 70%;width: 27%; }
.main #brand-wrapper section.features { padding: 0; display: flex; flex-direction: column; background: #d2d7e4; }
.main #brand-wrapper section.features .img-wrap { order:2; margin-top: -14%; z-index: 5; }
.main #brand-wrapper section.features .inner {position: static;order: 1;width: 100%; margin: 0 auto;padding: 2.5em 2em 2em;z-index: 10;}
.main #brand-wrapper section.features .inner .lead .detail { margin-bottom: 6%; }
.main #brand-wrapper section.features .inner .lead p.att { color:#000; }
.main #brand-wrapper section.features .inner .lead p.about { color:#000;width: 100%; }

/* --------------- */
/* Recipe */
.main #brand-wrapper section.recipe { padding:0; }
.main #brand-wrapper section.recipe .inner {width: 100%;flex-direction: column;display: flex;margin: 0 auto;padding: 2.5em 2em 4em;row-gap: 2em;}
.main #brand-wrapper section.recipe .inner .photo{ order:2; }
.main #brand-wrapper section.recipe .inner .lead{ order:1; }
.main #brand-wrapper section.recipe .inner .lead p.att{font-size: 5vw; }
.main #brand-wrapper section.recipe .inner .lead p.about{font-size:3.8vw;width: 100%;margin-top: 1em; }
.main #brand-wrapper section.recipe .inner .photo img { width:100%; margin:0; }
.main #brand-wrapper section.recipe .cat2 { bottom: 84.5%;left: 82%;width: 18%;}
.main #brand-wrapper section.recipe .cat3 { bottom: 6%; right: 80%; width: 14%; }

/* --------------- */
/* Go Green */
.main #brand-wrapper section.gogreen { padding-top: 15%; }
.main #brand-wrapper section.gogreen .inner { padding-bottom: 5.5em; }
.main #brand-wrapper section.gogreen .inner .ttl {font-size: 8.5vw; margin-bottom: 3.5%; }
.main #brand-wrapper section.gogreen .inner .about {font-size: 4.0vw; width: 90%; margin: 0 auto;}
.main #brand-wrapper section.gogreen .inner ul.active { gap: 3em; margin: 3em auto 0; }
.main #brand-wrapper section.gogreen .inner ul.active li {}
.main #brand-wrapper section.gogreen .inner ul.active li .detail { display: flex; flex-direction: column; padding: 1em 1em 7em 2em; z-index: 5; }
.main #brand-wrapper section.gogreen .inner ul.active li .photo {position: relative;z-index: 10;width: 80%;text-align: left;}
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2n+1) .photo { margin: -25% auto 0; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(1) .detail {margin-left: 5%; border-radius: 4em 0 0 4em; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail { margin-right: 5%; border-radius: 0 4em 4em 0; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(3) .detail {margin-left: 5%; border-radius: 4em 0 0 4em; }
.main #brand-wrapper section.gogreen .inner ul.active li .detail .topic { grid-template-columns: 50% auto!important; }
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .detail {padding: 1.5em 1em 7em 2em;grid-template-columns: auto 45%;}
.main #brand-wrapper section.gogreen .inner ul.active li:nth-child(2) .photo {margin: -25% auto 0;}
.main #brand-wrapper section.gogreen::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/natural/img_gogreen_bg_sp.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-y: top;
}
.main #brand-wrapper section.gogreen::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background-image: url(https://files.bcart.jp/tricco/uploads/images/brand/natural/weed.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-y: bottom;
}

}
/* ---------- sp750 end ---------- */