@charset'utf-8';

:root { --deo-bl:20, 125, 147; --deo-ye:220,180,0; --deo-gr:150,150,150; }



/*==============================
	common
==============================*/
#aromic-deo { max-width:2000px; margin:auto; }
#aromic-deo .bg-box { position:relative; padding:6em 0; overflow:hidden; }
#aromic-deo .bg-box#scene{padding: 5em 0 2em}
#aromic-deo .bg-blue { background:rgba(var(--deo-bl),.06); }
#aromic-deo .hand-writing { position:absolute; font-family:'Caveat',cursive; transform:rotate(-10deg); }

#aromic-deo picture img { display:block; width:100%; }


/*title*/
#aromic-deo h2.ttl { position:relative; margin-bottom:1.4em; text-align:center; font-size:2em; font-weight:600; line-height:1.8em; letter-spacing:.1em; z-index:1; }
#aromic-deo h2.ttl em { padding:0 .1em; }
#aromic-deo h2.ttl + .hand-writing { top:.2em; left:0; margin:auto; text-align:center; font-size:6em; }



/*text*/
#aromic-deo p.txt { width:calc(100% - 1em); margin:auto; text-align:left; line-height:2em; }
#aromic-deo p.info { width:calc(100% - 1em); max-width:800px; margin:auto; text-align:right; font-size:.8em; line-height:1.6em; }
#aromic-deo p.info span { display:block; }
#aromic-deo p.info span:nth-of-type(n+2) { margin-top:.2em; }


@media screen and (min-width:769px) {
#aromic-deo p.txt { font-size:1.1em; }
}

@media screen and (max-width:1024px) {
#aromic-deo h2.ttl { font-size:1.8em; }
}

@media screen and (max-width:768px) {
#aromic-deo .bg-box { padding:5em 0; }
#aromic-deo h2.ttl { font-size:1.6em; }
#aromic-deo h2.ttl + .hand-writing { font-size:5em; }
}

@media screen and (max-width:425px) {
#aromic-deo .bg-box { padding:4em 0; }
#aromic-deo h2.ttl { font-size:1.4em; letter-spacing:1px; }
#aromic-deo h2.ttl + .hand-writing { font-size:4em; }
#aromic-deo p.txt { font-size:.9em; }
#aromic-deo p.info { font-size:12px; }
#aromic-deo .column-link { font-size:.9em; }
}

@media screen and (max-width:320px) {
#aromic-deo p.txt { font-size:13px; }
}



/*==============================
	main
==============================*/
#aromic-deo #main-vs { position:relative; display:flex; align-items:center; width:100%; max-width:2000px; margin:auto; }
#aromic-deo #main-vs > * { position:absolute; }

#aromic-deo #main-vs .catch { font-weight:600; z-index:1; }
#aromic-deo #main-vs .catch > p { color:#147d93;max-width:16.8em; margin:auto; font-size:1.6em; line-height:1.6em; letter-spacing:.06em; }

#aromic-deo #main-vs h1 { text-align:center; font-size:2em; }
#aromic-deo #main-vs h1 svg { display:block; width:8.2em; margin:1.8em auto 1em; fill:#333; stroke:none; }
#aromic-deo #main-vs h1 span { font-size:.9em; letter-spacing:.1em; }

#aromic-deo #main-vs .circle {
	left:1em;
 display:flex;
 justify-content:center;
 align-items:center;
 width:4.6em;
 height:4.6em;
 font-size:2.6em;
 line-height:1.26em;
 letter-spacing:.2em;
 color:#fff;
 background:rgba(var(--deo-bl),.7);
 border-radius:50vh;
 z-index:1;
}
#aromic-deo #main-vs .circle span { width:2.6em;margin-left:.4em; }

#aromic-deo #main-vs .hand-writing { right:4vw; font-size:6em; color:rgba(var(--deo-bl),.2); z-index:1; }

#aromic-deo #main-vs > picture { position:absolute; left:0; display:block; max-width:1000px; aspect-ratio:50/33; }

.award-banner {

    padding-top: 2em;
    text-align: center;
    background: rgba(var(--deo-bl), .06);
}
.award-banner img{
    max-width:600px; 
  margin: 10px auto;
}

@media screen and (max-width:768px) {
  .award-banner img{
    max-width:400px; 
}
}
@media screen and (min-width:1601px) {
#aromic-deo #main-vs { font-size:1.1em; }
}

@media screen and (min-width:1441px) {
#aromic-deo #main-vs { aspect-ratio:3.03/1; }
#aromic-deo #main-vs .catch,
#aromic-deo #main-vs picture { width:50%; }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#aromic-deo #main-vs { aspect-ratio:2.75/1; }
#aromic-deo #main-vs .catch { width:45%; }
#aromic-deo #main-vs > picture { width:55%; }
}

@media screen and (min-width:1025px) {
#aromic-deo #main-vs .catch { right:0; }
#aromic-deo #main-vs .circle { top:1em; }
#aromic-deo #main-vs .hand-writing { top:10vw; }
}

@media screen and (max-width:1024px) {
#aromic-deo #main-vs { aspect-ratio:1.55/1; }
#aromic-deo #main-vs .catch { top:8vw; left:6vw; }
#aromic-deo #main-vs .catch > p { font-size:1.8em; }
#aromic-deo #main-vs h1 { max-width:11em; }
#aromic-deo #main-vs .circle { bottom:-7vw; font-size:4vw; }
#aromic-deo #main-vs .hand-writing { bottom:-.6em; }
#aromic-deo #main-vs > picture { right:0; margin:auto; }
}

@media screen and (max-width:768px) {
#aromic-deo #main-vs { aspect-ratio:1.14/1; }
#aromic-deo #main-vs .catch { font-size:2vw; }
#aromic-deo #main-vs > picture { aspect-ratio:8/7; }
}

@media screen and (max-width:425px) {
#aromic-deo #main-vs .catch { font-size:2.2vw; text-shadow:#f3f8f4 2px 0px, #f3f8f4 -2px 0px, #f3f8f4 0px -2px, #f3f8f4 0px 2px, #f3f8f4 2px 2px, #f3f8f4 -2px 2px, #f3f8f4 2px -2px, #f3f8f4 -2px -2px, #f3f8f4 1px 2px, #f3f8f4 -1px 2px, #f3f8f4 1px -2px, #f3f8f4 -1px -2px, #f3f8f4 2px 1px, #f3f8f4 -2px 1px, #f3f8f4 2px -1px, #f3f8f4 -2px -1px; }
#aromic-deo #main-vs .catch > p { font-size:2em; }
#aromic-deo #main-vs .circle { font-size:1.2em; font-weight:600; }
#aromic-deo #main-vs .hand-writing { bottom:-.7em; font-size:4em; }
}



/*==============================
	lead
==============================*/
#aromic-deo #lead { padding:2em 0 4em; text-align:center; font-weight:500; line-height:2.2em; }
#aromic-deo #lead .product{color:#147d93;font-size: 1.2em;}

#aromic-deo #lead p { width:calc(100% - 1em); max-width:44em; margin:auto; }
#aromic-deo #lead em { background:rgba(255,255,255);padding: 0 .5em;font-size: 1.2em; }


@media screen and (min-width:769px) {
#aromic-deo #lead { font-size:1.26em; }
#aromic-deo #lead br { display:none; }
}

@media screen and (max-width:768px) {
#aromic-deo #lead { font-size:1.06em; }
}

@media screen and (max-width:425px) {
#aromic-deo #lead { font-size:4vw; }
}

@media screen and (max-width:320px) {
#aromic-deo #lead { font-size:13px; }
}



/*==============================
	point
==============================*/
#aromic-deo #point { counter-reset:number 0; }
#aromic-deo #point li { position:relative; max-width:1000px; margin:auto; }

#aromic-deo #point picture { display:block; aspect-ratio:40/23; }

#aromic-deo #point dl {	position:relative;	width:calc(100% - 2em);	max-width:24em;	padding:2em;	text-align:center;	line-height:1.6em;	background:#fff; }
#aromic-deo #point dl:before {
	position:absolute;
	top:-.4em;
	left:.4em;
	counter-increment:number 1;
	content:'point' counter(number);
	font-family:'Caveat',cursive;
	font-size:3em;
	text-shadow:0 0 .1em #fff;
	filter:drop-shadow(0 0 .1em #fff);
	color:rgb(var(--deo-bl));
}
#aromic-deo #point dt { margin-bottom:.6em; font-size:1.1em; line-height:1.6em; font-weight:600; }
#aromic-deo #point dd {text-align: left;padding: 1em;}

.marker {
    background: linear-gradient(transparent 60%, rgba(240, 228, 115, 0.5) 60%);
    font-weight: bold;
    padding: 0 2px;
    
}
.additive{
  font-size: .8em;
}


@media screen and (min-width:1601px) {
#aromic-deo #point { padding-bottom:10em; }
#aromic-deo #point li { zoom:1px; }
#aromic-deo #point li:before,
#aromic-deo #point li:after { content:''; display:table; line-height:0; }
#aromic-deo #point li:after{ clear:both; }
#aromic-deo #point li:nth-of-type(n+2) { margin-top:8em; }
#aromic-deo #point li:nth-of-type(odd) picture,
#aromic-deo #point li:nth-of-type(even) dl { float:right; }
#aromic-deo #point li:nth-of-type(even) picture,
#aromic-deo #point li:nth-of-type(odd) dl { float:left; }
#aromic-deo #point picture { width:80%; max-width:800px; }
#aromic-deo #point dl { position:absolute; bottom:-4em; max-width:28em; padding:3em; font-size:1.1em; }
#aromic-deo #point li:nth-of-type(even) dl { right:0; }
#aromic-deo #point dl:before { top:-.3em; font-size:4em; }
#aromic-deo #point li:nth-of-type(even) dl:before { left:auto; right:.4em; }
}

@media screen and (max-width:1600px) {
#aromic-deo #point dl {	top:-2em; margin:auto; }
}

@media screen and (min-width:1441px) and (max-width:1600px) {
#aromic-deo #point { padding:0 4em; }
#aromic-deo #point li { width:calc(100%/3 - 2em); }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#aromic-deo #point { padding:0 2vw; }
#aromic-deo #point li { width:calc(100%/3 - 1vw); }
}

@media screen and (min-width:1025px) and (max-width:1600px) {
#aromic-deo #point { display:flex; flex-wrap:wrap; justify-content:space-between; padding-bottom:4em; }
}
@media screen and (min-width:1025px) {
#aromic-deo #point dd {padding: 0;}
  }
@media screen and (max-width:1024px) {
#aromic-deo #point li { max-width:600px; margin:auto; }
#aromic-deo #point li:nth-of-type(n+2) { margin-top:2em; }
#aromic-deo #point dl { padding:2.6em 0; }
}

@media screen and (max-width:425px) {
#aromic-deo #point dl { max-width:21em; font-size:.94em; }
}



/*==============================
	target
==============================*/
#aromic-deo #target { position:relative; width:calc(100% - 2em); max-width:23em; font-weight:500; }
#aromic-deo #target:before,
#aromic-deo #target:after { position:absolute; content:''; width:100%; height:100%; border:1px solid rgb(var(--deo-bl)); }
#aromic-deo #target dt { margin-bottom:.6em; text-align:center; font-size:1.3em; letter-spacing:1px; }
#aromic-deo #target dt em { padding:0 .2em; background:rgba(var(--deo-bl),.1); }
#aromic-deo #target dd:nth-of-type(n+2) { margin-top:.4em; }
#aromic-deo #target dd svg { position:relative; top:calc(.25em + 1px); width:1.4em; margin-right:.4em; stroke:rgb(var(--deo-bl)); stroke-width:3px; }

#aromic-deo #target + picture { display:block; width:auto; max-height:320px; aspect-ratio:40/23; }


@media screen and (min-width:1441px) {
#aromic-deo #target { max-width:28.4em; padding:4em 4.6em 4em 5em; font-size:1.1em; }
#aromic-deo #target:before { top:-.6em; left:-.6em; }
#aromic-deo #target:after { top:.6em; left:.6em; }
#aromic-deo #target + picture { margin-left:4em; }
}

@media screen and (max-width:1440px) {
#aromic-deo #target { max-width:26.4em; padding:3em 3.6em 3em 4em; }
#aromic-deo #target:before { top:-.4em; left:-.4em; }
#aromic-deo #target:after { top:.4em; left:.4em; }
#aromic-deo #target + picture { max-height:260px; margin-left:2em; }
}

@media screen and (min-width:1025px) {
#aromic-deo .flex { display:flex; justify-content:center; align-items:center; margin:4em auto; }
}

@media screen and (max-width:1024px) {
#aromic-deo #target { margin:4em auto; }
#aromic-deo #target + picture { margin:auto; }
}

@media screen and (max-width:768px) {
#aromic-deo #target { max-width:22.4em; padding:3em 1.6em 3em 2em; }
}

@media screen and (max-width:425px) {
#aromic-deo #target { font-size:.9em; }
}

@media screen and (max-width:320px) {
#aromic-deo #target { max-width:21.4em; padding:3em 1em 3em 1.6em; font-size:13px; }
}



/*==============================
	aroma
==============================*/
#aromic-deo #aroma { font-weight:500; background:rgba(var(--deo-bl),.07); }

#aromic-deo #aroma h2.ttl + .hand-writing { right:-5em; color:rgba(255,255,255); }
#aromic-deo #aroma em { background:rgba(255,255,255);padding: 0 .5em; }
#aromic-deo #aroma p.txt { max-width:23em; }

#aromic-deo #aroma ul { display:flex; flex-wrap:wrap; justify-content:center; margin:2em auto 0; text-align:center; }
#aromic-deo #aroma li { width:10em; }
#aromic-deo #aroma li img { width:calc(100% - 2em); margin:auto; }
#aromic-deo #aroma li p { margin-top:.2em; }


@media screen and (min-width:1441px) {
#aromic-deo #aroma ul { font-size:1.1em; }
}

@media screen and (min-width:1025px) {
#aromic-deo #aroma ul { max-width:60em; }
}

@media screen and (max-width:1024px) {
#aromic-deo #aroma ul { max-width:30em; margin-top:1em; }
#aromic-deo #aroma li { margin-top:1em; }
}

@media screen and (max-width:768px) {
#aromic-deo #aroma h2.ttl + .hand-writing { right:-50vw; }
#aromic-deo #aroma ul { font-size:.9em; }
}

@media screen and (max-width:425px) {
#aromic-deo #aroma ul { max-width:24em; }
#aromic-deo #aroma li { width:8em; }
#aromic-deo #aroma li img { width:calc(100% - 1em); }
}



/*==============================
	scene
==============================*/
#aromic-deo #scene { font-weight:500; background:rgba(var(--deo-bl),.04); }

#aromic-deo #scene h2.ttl + .hand-writing { right:-5em; color:rgba(180,180,180,.2); }
#aromic-deo #scene em { background:rgba(255,255,255); }

#aromic-deo #scene ul { position:relative; max-width:19.4em; margin:auto; padding:2em; background:#fff; z-index:1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
#aromic-deo #scene li:before { content:'\30FB'; margin-right:.2em; font-weight:600; color:rgb(var(--deo-gr)); }
#aromic-deo #scene li:nth-of-type(n+2) { margin-top:.4em; }

#aromic-deo #scene picture { display:block; width:100%; aspect-ratio:40/23; max-width:800px; margin:-2em auto 2em; }

#aromic-deo #scene p.txt { max-width:19em; }
#aromic-deo #scene p.info { margin-top:1em; }

.portable-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* 中央寄せにしたい場合 */
}

.portable-banner {
  display: block;
  width: 80%;
  margin: 2em auto;
}

@media screen and (min-width: 769px) {
  .portable-banner {
    width: 500px;   
  }
}


@media screen and (min-width:1441px) {
#aromic-deo #scene ul { max-width:23.4em; padding:2em 4em; font-size:1.1em; }
}

@media screen and (max-width:768px) {
#aromic-deo #scene h2.ttl + .hand-writing { right:-50vw; }
}

@media screen and (max-width:425px) {
#aromic-deo #scene ul { font-size:.9em; }
#aromic-deo #scene picture { margin-bottom:1em; }
  
}
/* 画像全体のコンテナ：ここで最大幅を制限 */
.pdt-image-container {
  max-width: 1000px;
  margin: 0 auto; /* 中央寄せ */
  padding: 0 10px; /* スマホ時の左右の余白（必要に応じて調整） */
}

/* 2枚並ぶグリッド */
.usage-how-to-grid {
  display: flex;
  gap: 15px; 
  margin: 20px 0;
}

.usage-how-to-grid picture {
  flex: 1; /* PCで50%ずつ均等に */
}

.usage-how-to-grid img,
.made-in-japan-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* Made in Japan の余白 */
.made-in-japan-wrap {
  margin: 2em auto;
  text-align: center;
}
.made-in-japan-wrap img{
  max-width: 800px;
  margin: 4em auto 0;
}

/* スマホ用レイアウト：768px以下で縦並びに切り替え */
@media screen and (max-width: 768px) {
  .usage-how-to-grid {
    flex-direction: column;
    gap: 10px;
  }
}