@charset "utf-8";

/*--------------------
  edit log: 
  - 2025.06.26 秋ふくる2025ページ作成ページ作成
--------------------*/

/*--------------------
common
--------------------*/
/*BiNDup dress 無効化*/
.a-main .b-plain{
	max-width: none!important;
}
#w-bottom-right{
	display: none;
}
*{
	margin:0;
	padding:0;
	
}
html, body{
	font-family: "Noto Serif JP", serif;
}
main{
	overflow:hidden;
	width:100%;
	/* min-width:1100px; */
	background-color: #eaeae8;
}
.column{
	max-width: none!important;
}
.top__ctn, .product__ctn, .material__ctn, .data__ctn, .archive__ctn{
	position:relative;
	width:1100px;
	margin:0 auto;
	background:#eaeae8;
}
.a-site_contents{
	position:relative;
	/* width:1100px; */
	height:100%;
	margin:0 auto;
}
.a-site_contents p, .a-site_contents img{
	display:block;
	position:absolute;
	border:0;
	box-sizing:border-box;
}

/* Top Image part */
.top-image{
	display: block;
	position:relative;
	top: 4px;
	max-width: 1100px;
	width: 100%;
	height: 652px;
}
.top-bg-image{
	position:relative;
	top: 0;
	left:0px;
	width:1100px;
	height:652px;
}
.fourseasons{
	display: flex;
	width: 1100px;
	height: 652px;
	overflow: hidden;
}
.box-season{
	width: 275px;
	height: 100%;
}
.box-season img.season-image{
	display: block;
	max-width: 275px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.yosofuharu-w{
	position:relative;
	z-index: 1;
	top: 228px;
    right: 750px;
    width: 416px;
	animation: satoyama 2.0s cubic-bezier(1.0, 0.3, 0.5, 1) forwards;
}
.seasonal-products{
	position:relative;
	z-index: 1;
	top:35px;
	left:0;
	right:0;
	width:977px;
	margin: 0 auto;
	animation: satoyama 2.0s cubic-bezier(1.0, 0.3, 0.5, 1) forwards;
}
.top-satoyama{
	position:relative;
	top:324px;
	left:384px;
	width:334px;
	height:68px;
	animation: satoyama 2.0s cubic-bezier(1.0, 0.3, 0.5, 1) forwards;
}
@keyframes satoyama {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media(min-width: 1024px){
	.autumn__gif{
		height: 593px;
	}
}

/* Lead Sentence Part */
.lead-sentence{
	display: block;
	position:relative;
	margin-top: 72px;
	max-width: 1100px;
	width: 100%;
	height: 250px;
}
.lead-sentence .txt7{
	position:absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	height:180px;
}
.lead-sentence .txt8{
	position:absolute;
	top:11em;
	left: 0;
	right: 0;
	margin: 0 auto;
	height:49px;
	margin-top: 2em;
}


.catch_copy span {
		transition: 5.0s;
	opacity: 0;
	transform: translateY(20px);
	display: block;
}
	.catch_copy.active span:first-child {
		animation: catch_anime 1.0s forwards 0s;
	}
	.catch_copy.active span:nth-child(2) {
		animation: catch_anime 1.0s forwards 0.3s;
	}
	.catch_copy.active span:nth-child(3) {
		animation: catch_anime 1.0s forwards 0.6s;
	}
	.catch_copy.active span:nth-child(4) {
		animation: catch_anime 1.0s forwards 0.9s;
	}
	.catch_copy.active span:nth-child(6) {
		animation: catch_anime 1.0s forwards 1.2s;
	}
	
	@keyframes catch_anime {
		0% {
			transform: translateY(20px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

/* Main Image part */
.main-image{
	display: block;
	position:relative;
	max-width: 1100px;
	width: 100%;
	height: 575px;
	margin-top: 125px;
}
.yosofuharu-logo-wrap{
	position:relative;
	width: 100%;
	height: 235px;
}
.yosofuharu-logo{
	position:absolute;
	top:0;
	left:324px;
	max-width: 435px;
	width:100%;
	height:auto;
}
.a-site_contents .bg-movie{
	position:absolute;
	top:66px;
	left:0px;
	max-width: 1100px;
	width: 100%;
	/* height:365px; */
}

.a-site_contents .kg_bottle{
	position:absolute;
	top:-72px;
	left:322px;
	width:456px;
	height:608px;
}

/* Movie */
.movie_blk {
	width: 100%;
	height: 365px;
	position: relative;
}
.movie_blk video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.movie_blk p {
	font-size: 20px;
	padding: 20px;
	border-radius: 8px;
	background-color: rgba(255,255,255,0.7);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%,-50%);
}

/* Autumn 2025 scroll on movie */
.autumn-scroll{

}
.loop-wrap {
	position: absolute;
	top:450px;
	width: 1100px;
	height: 110px;
	overflow: hidden;
}
.loop-wrap img{
	/* transform: translateX(100%); */
}
.loop-wrap.active img:nth-child(odd){
	animation: slide 50s linear infinite;
}
.loop-wrap.active img:nth-child(even) {
	animation: slide2 50s linear infinite;
}

@keyframes slide {
	0% {
		transform: translateX(105%);
	}
	to {
		transform: translateX(0%);
	}
}
@keyframes slide2 {
	0% {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-105%);
	}
	}

/* commentary  */
.commentary{
	position: relative;
	display: block;
	max-width: 1100px;
	width: 100%;
	min-height: 440px;
	margin-bottom: 110px;
}
.txt6{
	display: block;
	position: relative;
	top: 38px;
	left: 28px;
	right: 0;
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	height:284px;
}
.dashline{
	letter-spacing: 0;
}

/* Online shop */
.onlineshop{
	display: block;
	position: relative;
	top:353px;
	left:0;
	right:0;
	margin: 0 auto;
	width: 274px;
	height: 49px;
	border: 1.3px solid black;
}
.txt29{
	position: absolute;
	top: 15px;
	margin: 0 auto;
	width: 274px;
	height: 49px;
	text-align: center;
}
.price{
	display: block;
	position: relative;
	top: 419px;
	left:0;
	right:0;
	margin: 0 auto;
	font-size: 14px;
	letter-spacing:0.03em;
	text-align: center;
	width: 350px;
	height: 20px;
	border: 1px solid red;
}
.price-head{
	margin-right: 0.5em;
}



/* materilal 1 */
.material1{
	display: flex;
	width: 800px;
	/* margin: 40px auto; */
	margin: 0px auto 40px;
	height: 210px;
}
.box1{
	position: relative;
	width: 273px;
	padding-top: 1em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	margin-left: 25px;
}
.box1 p{
	z-index: 2;
}
.txt9,
.txt9_1{
	top: 3.6em;
}
.txt10,
.txt10_1{
	top : 8.5em;
}
.line,
.line_ex{
	top: 6.8em;
}
.camo{
	top: 0px;
	right: -20px;
	mix-blend-mode: multiply;
}

.rosemary{
	top: -40px;
    right: -32px;
    scale: 0.8;
	mix-blend-mode: multiply;
}
.cardamom{
	top: 44px;
    right: -40px;
    scale: 0.8;
	mix-blend-mode: multiply;
}

.yuzupeel{
	top: 0px;
	right: 0px;
	mix-blend-mode: multiply;
}

/* Key Botanical Commentary */
.mid-text{
	position: relative;
	height: 50px;
	width: 800px;
	margin: 0 auto;
}
.txt23{
	width: 100%;
	text-align: center;
	height:57px;
}

/* Material 2 */
.material2{
	display: flex;
	width: 790px;
	margin: 40px auto;
	height: 80px;
	justify-content: space-between;
}
.box2{
	position: relative;
	width: 140px;
	padding-top: 1em;
	padding-left: 0.8em;
	padding-right: 0.8em;
	margin-left: 18px;
}
div.box-sasa{
	margin-left: 0;
}
.bx-sasa p{
	left: 0;
}

/* 杉 クロモジ*/
.box-sugi{
	width: 164px;
}
.box-cham{
	width: 110px;
}
.box-lico{
	width: 110px;
}

.txt15{
	top: 3em;
}

.sugi{
	top: -7px;
	left: 68px;
	mix-blend-mode: multiply;
}
.kuromoji{
	top: 30px;
	left: 100px;
	mix-blend-mode: multiply;
}

/* 笹の葉ヨモギ */

.sasa{
	top: -22px;
	left: 48px;
	mix-blend-mode: multiply;
}
.yomogi{
	top: 13px;
	left: 80px;
	mix-blend-mode: multiply;
}
/* カモミール */

.chamomile{
	top:53px;
	left: 38px;
	mix-blend-mode: multiply;
}

/* リコリスルート 舞茸*/
.txt18{

}
.licorise{
	top: -8px;
	left: -40px;
	mix-blend-mode: multiply;
}

.maitake{
	top: 57px;
	left: 88px;
	mix-blend-mode: multiply;
}

/* 甘酒 */
.hand{
	top: 10px;
	left: 43px;
	mix-blend-mode: multiply;
}

/* Material 3 */
.material3{
	display: flex;
	width: 758px;
	margin: 40px auto;
	height: 100px;
	justify-content: space-between;
}
.box3{
	position: relative;
	padding-top: 1em;
	padding-left: 0.8em;
	padding-right: 0.8em;
}
.box-juni{
	width:280px;
}
.box-shisen{
	width:250px;
}
.box-yuki{
	width:150px;
}

/* ジェニパーベリー コリアンダー アンジェリカルート */
.txt20{
	top:20px;
	left: 12px;
}
.juniperberry{
	top:-15px;
	left: 128px;
	mix-blend-mode: multiply;
}
.img20, .coriander{
	top: 0px;
	left:242px;
	mix-blend-mode: multiply;
}
.img23, .angelicaroot{
	top: 38px;
	left:164px;
	mix-blend-mode: multiply;
}

/* 四川山椒 シナモン ゆずピール */
.txt21{
	top:20px;
	left: 12px;
}
.img18, .shisenaosansho{
	left:90px;
	mix-blend-mode: multiply;
}
.img19, .cinnamon{
	top: -15px;
	left:144px;
	mix-blend-mode: multiply;
}
.img21, .yuzu{
	top: 25px;	
	left:164px;
	mix-blend-mode: multiply;
}

/* 雪つばき種 薮つばき種 */
.txt22{
	top:20px;
    left: -2px;
}

.img22, .yukitsubaki_seed{
	top: -7px;
	left:64px;
	mix-blend-mode: multiply;
}

/* Data area part */
.data-area{
	position: relative;
	display: flex;
	width: 950px;
	height: 700px;
	margin: 92px auto 180px;
}
/* Radar Chart */
	.radar-chart{
		display:block;
		position: relative;
		width: 562px;
	}
	.chart-base{
		display:block;
		position: absolute;
		width:100%;
		mix-blend-mode: multiply;
	}
	.chart-area{
		display:block;
		position: absolute;
		width:100%;
		mix-blend-mode: multiply;
	}

	/* Recommend Part */
	
	.recommend{
		display: block;
		width: 39%;
	}
	.txt24{
		position: absolute;
		/* top:2847px; */
		top: 80px;
		display: block;
		width: 388px;
		text-align: center;
	}
	.txt25{
		position: absolute;
		/* top:2920px; */
		top: 153px;
		display: block;
		width: 388px;
		text-align: center;
	}
	
	.with-hotwater{
		position: relative;
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	.txt26{
		position: absolute;
		/* top:3308px; */
		top: 541px;
		width: 388px;
		text-align: center;
	}
	.txt27{
		position: absolute;
		/* top:3173px; */
		top:406px;
		width: 388px;
		text-align: center;
	}
	.txt28{
		position: absolute;
		/* top:3136px; */
		top: 369px;
		width: 388px;
		text-align: center;
	}
	.glass{
		position: absolute;
		top:462px;
		left:20px;
		width:345px;
		margin: 0 auto;
		height:64px;
	}
	.img24, .boche_circle{
		position: absolute;
		top:305px;
		left:20px;
		margin: 0 auto;
		width:343px;
		height:343px;
		mix-blend-mode: multiply;
	}
	.img27, .circle{
		position: absolute;
		top:310px;
		right: 15px;
		width:92px;
		height:92px;
	}
	.txt30{
		position: absolute;
		top:343px;
		width:75px;
		right:23px;
	}

/* Archives part */

.impression{
	position: relative;
	max-width: 1100px;
	width: 100%;
	height: 73px;
}
.archives{
	display: flex;
	/* justify-content: space-between; */
	position: relative;
	max-width: 1100px;
	width: 100%;
	height: auto;
}
.box-archive{
	display: block;
	position: relative;
	width: 275px;
	height: 528px;
	overflow: hidden;
}
.archives_title{
	left:0;
	right:0;
	width:1008px;
	height:73px;
	margin: 0 auto;
}
.img14, .bg_archives{
	left:0;
	right:0;
	width:100%;
	height:528px;
}
.akifukuru_subtitle,
.archive_subtitle{
	position: absolute;
	top:415px;
	left: 0;
	right: 0;
	width:189px;
	height:47px;
	margin: 0 auto;
}
.yosofuharu_subtitle{
	position: absolute;
	top:402px;
	left: 0;
	right: 0;
	width:189px;
	height:75px;
	margin: 0 auto;
}
.akifukuru_bottle_mini,
.yosofuharu_bottle_mini{
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	width:288px;
	height:384px;
	/* スムーズにするための魔法の1行 */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 拡大時のガタつき防止 */
    backface-visibility: hidden;
}
a.box-archive:hover .akifukuru_bottle_mini{
	transform: scale(1.08);
}
.img29, .bottle_silhouette{
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	width: 288px;
	height: 384px;
}
.new_badge{
	z-index: 1;
    width: 60px;
    top: 150px;
    left: 44px;
}	

	
	
	
	
/*--------------------
text
--------------------*/

.fs1{
	font-family:"Noto Serif JP";
}
.fs2{
	font-family:"Noto Serif JP";
}
.ts1{
	color:rgb(0,0,0);
	text-align:left;
	font-size:11.2px;
	line-height:1.196428571429;
	letter-spacing:0.32em;
	margin-top:-0.089285714286em;
}
.ts2{
	color:rgb(0,0,0);
	text-align:left;
	font-size:11.2px;
	line-height:1.196428571429;
	letter-spacing:0.08em;
	margin-top:-0.089285714286em;
}
.ts3{
	color:rgb(0,0,0);
	text-align:left;
	font-size:11.2px;
	line-height:1.196428571429;
	letter-spacing:0.2em;
	margin-top:-0.089285714286em;
}
.ts4{
	color:rgb(0,0,0);
	text-align:left;
	font-size:11.2px;
	line-height:1.196428571429;
	letter-spacing:0.199em;
	margin-top:-0.089285714286em;
}
.ts5{
	color:rgb(35,24,21);
	text-align:center;
	font-size:16.3px;
	line-height:2.570552147239;
	letter-spacing:0.4em;
	margin-top:-0.79754601227em;
}
.ts6{
	color:rgb(35,24,21);
	text-align:center;
	font-size:19.4px;
	line-height:2.438144329897;
	letter-spacing:0.3em;
	margin-top:-0.721649484536em;
}
.a-site_contents .wide{
	letter-spacing:0.45em;
}
.lead-sentence .ts7{
	color:rgb(35,24,21);
	text-align:center;
	font-size:23.2px;
	line-height:2.439655172414;
	letter-spacing:0.4em;
	margin-top:-0.73275862069em;
}
.a-site_contents .wide2 {
	letter-spacing:0.8em;
}
.ts8{
	color:rgb(35,24,21);
	text-align:left;
	font-size:17.5px;
	line-height:1.480225988701;
	letter-spacing:0.303em;
	margin-top:-0.225988700565em;
}
.ts8_1{
	color:rgb(35,24,21);
	text-align:left;
	font-size:17.5px;
	line-height:1.480225988701;
	letter-spacing:0.303em;
	margin-top:-1.7em;
}
.ts9{
	color:rgb(0,0,0);
	text-align:left;
	font-size:12.8px;
	line-height:1.664122137405;
	letter-spacing:0.08em;
	margin-top:-0.30534351145em;
}

.ts11{
	color:rgb(35,24,21);
	text-align:center;
	font-size:16.3px;
	line-height:1.558282208589;
	letter-spacing:0.1em;
	margin-top:-0.306748466258em;
}
.ts12{
	color:rgb(0,0,0);
	text-align:center;
	font-size:28.7px;
	line-height:1.362369337979;
	letter-spacing:0.35em;
	margin-top:-0.174216027875em;
}
.ts13{
	color:rgb(0,0,0);
	text-align:center;
	font-size:18px;
	line-height:1.811111111111;
	letter-spacing:0.18em;
	margin-top:-0.388888888889em;
}
.ts14{
	color:rgb(0,0,0);
	text-align:center;
	font-size:13.8px;
	line-height:1.739130434783;
	letter-spacing:0.2em;
	margin-top:-0.36231884058em;
}
.caution{
	font-size: 0.7em;
	vertical-align: top;
}
.footnote{
	position: absolute;
	top: 614px;
	width: 388px;
	text-align: center;
	font-size: 12.5px;
	line-height:1.6;
	letter-spacing:0.14em;
}
.ts15{
	color:rgb(0,0,0);
	text-align:center;
	font-size:15.5px;
	line-height:1.664516129032;
	letter-spacing:0.2em;
	margin-top:-0.322580645161em;
}
.ts16{
	color:rgb(0,0,0);
	text-align:center;
	font-size:21.4px;
	line-height:1.808411214953;
	letter-spacing:0.2em;
	margin-top:-0.420560747664em;
}
.ts17{
	color:rgb(35,24,21);
	text-align:center;
	font-size:18px;
	line-height:1.361809045226;
	letter-spacing:0.25em;
	margin-top:-0.201005025126em;
}
.ts18{
	color:rgb(35,24,21);
	text-align:center;
	font-size:13.2px;
	line-height:1.409090909091;
	letter-spacing:0.103em;
	margin-top:-0.227272727273em;
}

/*--------------------
<p>
--------------------*/

.a-site_contents .txt1{
	top:29px;
	left:554px;
	height:22px;
}
.a-site_contents .txt2{
	top:29px;
	left:712px;
	height:22px;
}
.a-site_contents .txt3{
	top:29px;
	left:885px;
	height:22px;
}
.a-site_contents .txt4{
	top:30px;
	left:350px;
	height:22px;
}
.a-site_contents .txt5{
	top:29px;
	left:194px;
	height:22px;
}

.mg1{
	display: block;
	margin-top: 100px;
}





/*--------------------
<img>
--------------------*/


.sunshine_through_tree{	
	position: absolute;
	/* top:1773px; */
	top: 430px;
	left:-350px;
	width:1803px;
	max-width: none;
	height:734px;
	mix-blend-mode: multiply;
	transform: translate3d(0,0,0);
}

.a-site_contents .img3{
	top:0px;
	left:-410px;
	width:1920px;
	height:63px;
}
.a-site_contents .img4{
	top:20px;
	left:32px;
	width:33px;
	height:32px;
}

/*--------------------
    tablet CSS
--------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
	.top__ctn, .product__ctn, 
	.material__ctn, .data__ctn, 
	.archive__ctn{
		width: 100%;
	}
	.top-image{
		height: auto;
	}
	.box-season{
		background-size: cover;
		/*transform: scale(1);*/
		height: auto;
	}
	.yosofuharu-w{
	    z-index: 1;
	    top: 178px;
        left: -80px;
        width: 410px;
        max-width: none;
	}
	.seasonal-products, .material__ctn {
		transform: scale(0.9); /* 90%表示 */
	}
	.fourseasons{
		width: 100%;
		height: auto;
		/*min-height: 420px;*/
		min-height: 534px;
	}
	.akifukuru-w{
		left:-16px;
	}
	.a-site_contents .kg_bottle{
		left: 50%;
    	transform: translateX(-50%);
	}
	.yosofuharu-logo{
		left: 50%;
    	transform: translateX(-55%);
	}
	.data-area{
		width: 100;
		margin: 0 auto;
	}
	.radar-chart{
		width: 50vw;
	}
	.radar-chart img, .chart-area{
		top: 50%;
    	transform: translateY(-50%);
	}
	.recommend{
		width: calc(80% / 2);
		transform: scale(0.8);
	}
	.bottle_silhouette, .akifukuru_bottle_mini,.yosofuharu_bottle_mini{
		height: auto;
		top: 80px;
	}
	.new_badge{
	    top: 175px;
    	left: 40px;
	}
	.ts5{
		letter-spacing: 0.24em;
	}
}

/*--------------------
    smartphone CSS
--------------------*/
@media (max-width: 767px){
	.top__ctn, .product__ctn, 
	.material__ctn, .data__ctn, 
	.archive__ctn{
		width: 100%;
	}
	.top-image{
		height: 593px;
	}
	.akifukuru-w, .seasonal-products{
		animation-name: none;
	}
	.fourseasons{
		position: relative;
		width: fit-content;
		height: 100%;
	}
	.box-season{
		background: url("https://www.asahi-shuzo.co.jp/_userdata/img/kubotagin/seasonal/spring/bg_top_sp_2x.jpg");
		background-size: cover;
    	width: 100vw;
    	height: 100%;
    	flex-shrink: 0;
	}
	img.seasonal-products{
		position: absolute;
        width: 90%;
        top: 480px;
        left: 50%;
        transform: translateX(-50%);
	}
	.yosofuharu-w{
	    z-index: 1;
	    top: 88px;
	    left: -64px;
	    width: 80%;
	}
	/* Lead Sentence Part */
	.lead-sentence{
		position: absolute;
		margin-top: 180px;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		pointer-events: none; /* 下の要素を触れるようにする */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		text-align: center;
	}
	.lead-sentence p{
		background: #eaeae8;
		padding-top: 40px;
	}
	.lead-sentence .ts7{
		background: #eaeae8;
	}
	.lead-sentence .txt8 {
		top: 12em;
	}
	
	/* Main Image part */
	.main-image{
		height: 450px;
		margin-top: 240px;
	}
	.yosofuharu-logo-wrap{
		height: 160px;
	}
	.yosofuharu-logo{
		left: 50%;
		transform: translateX(-52%);
		max-width: 314px;
		width: 100%;
		height: auto;
		top: 16px;
	}
	.a-site_contents .bg-movie{
		height: 80vw;
		top: 56px;
	}
	.a-site_contents .kg_bottle{
		top: -80px;
    	left: 50%;
    	width: 100%;
    	height: auto;
    	transform: translateX(-50%);
	}
	
	/* Commentary */
	.commentary{
		min-height: 360px;
	}
	.txt6{
		padding: 15px;
		left: 0;
		height: auto;
	}
	
	/* Online shop */
	.onlineshop{
		top:372px;
		width: 200px;
		height: 37px;
	}
	.txt29{
	    top: 9px;
	    margin: 0 auto;
		width: 200px;
	    height: 37px;
	}
	.price{
		top: 416px;
		font-size: 0.75em;
	}
	
	/* Material1 */
	.material1{
		flex-direction: column;
		width: 100%;
		height: 440px;
		gap: 10em;
		margin-top: 24px;
	}
	.box1{
		width: 100%;
		margin-left: 20px;
	}
	.txt9{
		top: 0;
	}
	.txt9_1{
		top: 16px;
	}
	.txt10{
		top : 3.5em;
	}
	.txt10_1{
		top: 4.5em;
	}
	.line{
		top: 2em;
	}
	.line_ex{
		top: 3em;
	}
	.camo{
		right: 28px;
	}
	.rosemary{
		top: -44px;
		right: 16px;
	}
	.cardamom{
		top: 58px;
		right: 28px;
}
	.yuzupeel{
		top: 20px;
		right: 28px;
	}
	
	/* Key Botanical Commentary */
	.mid-text{
		width: 100%;
		height: 80px;
	}
	.txt23{
		height:80px;
	}
	
	/* Material2 */
	.material2{
		justify-content: normal;
		width: 100%;
		height: auto;
		flex-wrap: wrap;
		/* gap: 1em; */
	}
	.box2{
		width: 10em;
		padding-top: 6em;
		margin-left: 0;
	}
	.box2 img{
		width: 40%;
	}
	.box-lico img, .box-ama img{
		width: 56%;
	}
	.material2 > .box2{
		flex: 0 0 auto;
	}
	.box-sugi, div.box-sasa, .box-ama{
		margin-left: 20px;
	}
	.sugi{
		left: 56px;
	}
	.kuromoji{
		left: 88px;
	}
	.sasa{
		left: 40px;
	}
	.yomogi{
		left: 72px;
	}
	.box-cham{
		padding-left: 0;
	}
	.chamomile{
		top: 48px;
		left: 40px;
	}
	.txt15{
		left: 1em;
	}
	.box-lico{
		padding-left: 0;
		margin-left: 20px;
	}
	.licorise{
		top: 48px;
    	left: 32px;
	}
	.maitake{
		top: 70px;
		right: -16px;
	}
	.hand{
		top: 30px;
	}
	
	
	/* Material3 */
	.material3{
		justify-content: normal;
		width: 100%;
		height: auto;
		flex-wrap: wrap;
		/* gap: 1em; */
	}
	.box3{
		width: 10em;
		padding-top: 7em;
		margin-left: 0;
	}
	.material3 > .box3{
		flex: 0 0 auto;
	}
	.material3 > .box3:nth-child(n){
		flex: 0 0 100%;
	}
	.material3 > .box3:nth-child(n+2):nth-child(-n+3) {
		flex: 0 0 calc(100% / 2);
	}
	.box-juni{
		margin-left: 32px;
	}
	.juniperberry{
		top: 18px;
    	left: -5px;
    	width: 24%;
	}
	.txt20{
		left: 40%;
    	transform: translateX(-50%);
	}
	.coriander{
		top: 8px;
    	left: 206px;
    	width: 11%;
	}
	.angelicaroot{
		top: 24px;
    	left: 208px;
    	width: 22%;
	}
	.txt21{
		left: 22px;
	}
	.shisenaosansho{
		top: -8px;
    	left: 85px;
    	width: 28%;
	}
	.cinnamon{
		top: 26px;
    	left: 120px;
    	width: 34%;
	}
	.yuzu{
		top: 56px;
    	left: 80px;
    	width: 32%;
	}
	.txt22{
		top: 32px;
    	left: 38px;
	}
	.yukitsubaki_seed{
    	left: 96px;
    	width: 40%;
	}
	
	/* Data area */
	.data-area{
		width: 100%;
		min-height: 940px;
		height: auto;
		margin: 0 auto;
		flex-direction: column;
		justify-content: space-between;
	}
	.radar-chart{
		max-width: 350px;
		width: 100%;
		min-height: 480px;
		margin: 0 auto;
	}
	.recommend{
		width: 100%;
		min-height: 520px;
	}
	.data-area .txt24{
		top: 480px;
    	width: 100%;
	}
	.data-area .txt25{
		top: 528px;
		width: 100%;
	}
	.img24{
		top: 120px;
		left: 50%;
        transform: translateX(-50%);
	}
	.txt26{
		top: 328px;
		left: 0;
		width: 100%;
	}
	.txt27{
		top: 200px;
		left: 0;
		width: 100%;
	}
	.txt28{
		top: 168px;
		left: 0;
		width: 100%;
	}
	.txt30{
		top: 159px;
    	right: 38px;
	}
	.footnote{
		font-size: 0.75em;
		top: 400px;
		left: 0;
		width: 100%;
	}
	.glass{
		top: 248px;
		left: 50%;
        transform: translateX(-50%);
	}
	.img27, .circle{
		top: 132px;
		right: 40px;
		width: 72px;
		height: 72px;
	}
	
	
	/* Archive part */
	.box-archive{
		width: 100%;
		height: auto;
		min-height: 179px;
	}
	.impression{
		height: 32px;
	}
	.archives_title{
		width:85vw;
		min-height: 24px;
		height: auto;
	}
	.bg_archives{
		height:auto;
	}
	.akifukuru_subtitle{
		top: 86%;
		width: 100%;
		height: 4vw;
	}
	.yosofuharu_subtitle{
		top: 82.5%;
		width: 100%;
		height: 6.5vw;
	}
	.akifukuru_bottle_mini,
	.yosofuharu_bottle_mini,
	img.bottle_silhouette{
		position: absolute;
		top: 4%;
		width:100%;
		height:auto;
	}
	.new_badge{
		top: 22%;
        left: 6%;
        width: 30%;
	}
	
	/*--------------------
	text
	--------------------*/
	.ts18{
		font-size: 0.75em;
	}
	.ts5{
		font-size:0.85em;
		letter-spacing: 0.36em;
	}
	.ts6, .ts9{
		font-size:0.85em;
	}
	.ts11, .ts13, .ts14, .ts15, .ts17 {
		font-size: 0.9em;
	}
	.ts16, .data-area .ts12{
	 	font-size: 1.2em;
	 }
	 .lead-sentence .ts7{
	 	font-size: 1.25em;
	 }
	
	/*--------------------
	<img>
	--------------------*/
	.sunshine_through_tree{	
		top:365px;
	}
}
/*-----------------------------------
   width minimum smartphone CSS
-----------------------------------*/

@media (max-width: 376px){
	.box1{
		padding-left: 0;
		margin-left: 8px;
	}
	.tealeaf, .iribancha{
		right: 8px;
	}
	.kinmokusei{
		right: 0px;
	}
	.circle{
		right: 32px;
	}
	.txt30{
		right: 31px;
	}
	
	.ts5{
		letter-spacing: 0.3em;
	}
	.box-archive{
		min-height: 174px;
	}
}