@charset'utf-8';

:root {
 --w21-red:#a33848; --w21-green:#447557; --w21-gold:#c3a88d; --w22-gold:#8f4c1b; --w23-mainred:#963335;
 --w23-bg:#fcfaf3; --w23-bg2:#fefaf3;
 --w21-shadow:1px 1px 0 #e8e5e3, -1px -1px 0 #e8e5e3, -1px 1px 0 #e8e5e3, 1px -1px 0 #e8e5e3, 0px 1px 0 #e8e5e3,  0-1px 0 #e8e5e3, -1px 0 0 #e8e5e3, 1px 0 0 #e8e5e3;
 --w21-shadow2px:#e8e5e3 2px 0px, #e8e5e3 -2px 0px, #e8e5e3 0px -2px, #e8e5e3 0px 2px, #e8e5e3 2px 2px, #e8e5e3 -2px 2px, #e8e5e3 2px -2px, #e8e5e3 -2px -2px, #e8e5e3 1px 2px, #e8e5e3 -1px 2px, #e8e5e3 1px -2px, #e8e5e3 -1px -2px, #e8e5e3 2px 1px, #e8e5e3 -2px 1px, #e8e5e3 2px -1px, #e8e5e3 -2px -1px;
}



/*==============================
	common
==============================*/
#yuju { background:var(--w23-bg);padding-bottom: 2rem; }
#yuju:not(.item) { overflow:hidden; }
#yuju > section { max-width:1024px; margin:auto; }
#yuju > section > picture {
    display: block;
}
#yuju .info { text-align:right; font-size:.8em; line-height:1.4em; }
#yuju em { font-style:normal; }
#yuju em b { font-weight:500; }

#yuju #item-features{
  background-color: #fff;
}
#yuju #item-features h3{
  margin-top: 2.2em;
  color:#8f7c22;
}
#yuju #item-features p{
  margin: 1.2em auto;
}
#yuju #item-features p .attention{
display: block;
line-height: 1.4;
font-size: .9em; 
color: #8f7c22;}
#item-features small a{
  text-decoration: underline;
}
@media screen and (max-width:425px) {
#yuju { font-size:.96em; }
#yuju .icon { left:2em; width:66px; height:56px; }
#yuju .icon:after { bottom:-10px; border:33px solid var(--w23-mainred); border-top:10px solid transparent; }
}



@media screen and (min-width:1025px) {
#yuju #main-vs img[alt='item'] { width:7em; }
#yuju #main-vs .message { margin-left:5em; font-size:1.1em; }
}

@media screen and (max-width:1024px) {
#yuju #main-vs img[alt='item'] { width:6em; }
#yuju #main-vs .bg-illust { font-size:.9em; }
#yuju #main-vs .bg-illust img { width:12em; }
#yuju #main-vs .bg-illust img:nth-of-type(5) { width:8em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#yuju #main-vs img[alt='item']:first-of-type { left:1em; }
#yuju #main-vs .message { width:calc(100% - 17em); margin-left:3em; }
}

@media screen and (min-width:769px) {
#yuju #main-vs h1 span { display:inline-block; }
#yuju #main-vs h1 span + span { margin-left:.4em; }
#yuju #main-vs .message { max-width:29em; }
#yuju #main-vs .message h2 { margin-left:1em; }
#yuju #main-vs .message h2 + p br { display:none; }
}

@media screen and (max-width:768px) {
#yuju #main-vs { padding:4em 0; }
#yuju #main-vs h1 { margin-bottom:1em; }
#yuju #main-vs h1 span { display:block; }
#yuju #main-vs h1 span + span { margin-top:.2em; }
#yuju #main-vs .message { justify-content:center; margin:3em 0 0 auto; text-align:center; }
#yuju #main-vs .message h2 { text-align:center; }
#yuju #main-vs .message time { width:calc(100% - 2em); max-width:24em; margin:auto; }
#yuju #main-vs .message .info { margin-right:2em; }
#yuju #main-vs .message .circle { position:absolute; top:8em; right:-15em; }
#yuju #main-vs .bg-illust img:nth-of-type(1) { top:0; left:-3em; }
#yuju #main-vs .bg-illust img:nth-of-type(2) { top:14em; bottom:auto; }
#yuju #main-vs .bg-illust img:nth-of-type(3) { top:2em; margin:auto; }
#yuju #main-vs .bg-illust img:nth-of-type(4) { right:-2em; }
#yuju #main-vs .bg-illust img:nth-of-type(5) { top:20em; bottom:auto; right:-1em; }
#yuju #main-vs .bg-illust .dot.left span:nth-of-type(1) { top:2em; left:5em; }
#yuju #main-vs .bg-illust .dot.left span:nth-of-type(2) { top:11em; left:4em; }
#yuju #main-vs .bg-illust .dot.left span:nth-of-type(3) { top:12em; left:2em; }
#yuju #main-vs .bg-illust .dot.left span:nth-of-type(4) { top:14em; left:4em; }
#yuju #main-vs .bg-illust .dot.left span:nth-of-type(5) { top:0; bottom:8em; left:4em; margin:auto; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(1) { top:1em; right:9em; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(2) { right:4em; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(3) { right:2em; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(4) { right:4em; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(5) { bottom:30em; right:2em; }
#yuju #main-vs .bg-illust .dot.right span:nth-of-type(6) { bottom:28em; right:4em; }
}

@media screen and (min-width:426px) and (max-width:768px) {
#yuju #main-vs .message .circle { left:0; margin:auto; }
}

@media screen and (max-width:425px) {
#yuju #main-vs { padding:3em 0; }
#yuju #main-vs img[alt='item'] + img[alt='item'] { margin-left:1em; }
#yuju #main-vs .message .circle { top:6em; right:.6em; }
#yuju #main-vs .message h2 { font-size:1.2em; }
#yuju #main-vs .bg-illust img { width:10em; }
#yuju #main-vs .bg-illust img:nth-of-type(5) { width:6em; }
}

@media screen and (max-width:320px) {
#yuju #main-vs { font-size:.96em; }
#yuju #main-vs img[alt='item'] { width:5em; }
#yuju #main-vs .message h2 + p { font-size:13px; }
#yuju #main-vs .message .circle { font-size:1.4em; }
}



/*==============================
	item lineup
==============================*/
#yuju #item-lineup h2 { margin-bottom:1em; text-align:center; font-family:var(--w21-font2); font-size:2em; font-weight:500; letter-spacing:.1em; }
#yuju #item-lineup h2:after { position:relative; top:-.5em; content:''; display:block; width:8em; height:1px; margin:auto; background:var(--text); }
#yuju #item-lineup h2 span { position:relative; padding:0 .6em; background:var(--w23-bg); z-index:1; }

/*ul*/
#yuju #item-lineup ul { display:flex; justify-content:space-between; align-items:stretch; margin:auto; }
#yuju #item-lineup li a { display:block; }
#yuju #item-lineup li img { display:block; width:auto; height:6em; margin:0 auto -.8em; }
#yuju #item-lineup li p { padding:1.2em 0 1em; text-align:center; line-height:1.4em; background:#fff; border-radius:.4em; transition:.4s; }

/*fixed*/
#yuju #item-lineup .fixed { position:fixed; bottom:.6em; left:0; right:0; width:calc(100% - 1em); z-index:100; }
#yuju #item-lineup .fixed img { display:none; }
#yuju #item-lineup .fixed p { padding:.8em 0; border:1px solid; box-shadow:.1em .1em .2em rgba(0,0,0,.1); }
#yuju #item-lineup .fixed li:nth-of-type(1) p { color:var(--w21-red); }
#yuju #item-lineup .fixed li:nth-of-type(2) p { color:var(--w21-green); }
#yuju #item-lineup .fixed li:nth-of-type(3) p { color:var(--w22-gold); }


@media screen and (min-width:1025px) {
#yuju #item-lineup { display:none; }
}

@media screen and (min-width:769px) {
#yuju #item-lineup { font-size:1.06em; }
#yuju #item-lineup ul { max-width:42em; }
#yuju #item-lineup li { width:calc(100%/3 - 1em); }
#yuju #item-lineup li p br { display:none; }
}

@media screen and (max-width:768px) {
#yuju #item-lineup ul { max-width:26em; }
#yuju #item-lineup li { width:calc(100%/3 - .6em); }
#yuju #item-lineup .fixed { bottom:6em; }
}

@media screen and (max-width:425px) {
#yuju #item-lineup li { width:calc(100%/3 - .3em); }
#yuju #item-lineup .fixed { bottom:6em; font-size:.9em; }
}



/*==============================
	list
==============================*/
#yuju #list { padding:4em 0; }

/*ul*/
#yuju #list ul { width:calc(100% - 4em); margin:auto; }
#yuju #list li { position:relative; padding:2em; background:rgba(255,255,255,.4); }
#yuju #list li > img { display:block; width:100%; margin:auto; }
#yuju #list li > img[alt='item'] { max-width:400px; }
#yuju #list li h3 { margin:2em auto 1.6em; text-align:center; }
#yuju #list li h3 > * { display:block; }
#yuju #list li h3 em { margin:.2em auto .4em; font-size:2.2em; font-weight:500; line-height:1em; letter-spacing:.06em; }
#yuju #list #item1 h3 b,
#yuju #list #item3 h3 b:nth-of-type(1) { color:var(--w21-red); }
#yuju #list #item2 h3 b,
#yuju #list #item3 h3 b:nth-of-type(2) { color:var(--w21-green); }
#yuju #list li h3 + p { line-height:1.6em; }

#yuju #list dl { margin-top:1em!important; }
#yuju #list .aroma { text-align:center; }
#yuju #list .detail { max-width:22em; margin:auto; font-size:.9em; }
#yuju #list dt { margin-bottom:.6em; font-size:1.06em; letter-spacing:.1em; }
#yuju #list .aroma dt { margin-bottom:.4em; }
#yuju #list .aroma dt b { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1em; }
#yuju #list .aroma dd { display:inline-block; margin:.4em .1em 0; }
#yuju #list .detail dd:nth-of-type(n+2) { margin-top:.2em; line-height:1.4em; }
#yuju #list .aroma dd img { display:inline-block; width:1.2em; height:1.2em; margin:0 .2em -.2em 0; border-radius:50%; }

#yuju #list .button { position:relative; display:block; width:14em; margin:1em auto 0; padding:1em 1em 1em 1.4em; font-size:1.16em; line-height:1em; border-radius:.2em; }
#yuju #list .button:after {
	position:absolute;
	top:50%;
	right:1.4em;
	content:'';
	display:block;
	width:.6em;
	height:.6em;
	border-right:1px solid;
	border-bottom:1px solid;
	transform:translate(-25%,-50%) rotate(-43deg);
	transition:.4s;
}
#yuju #list #item1 .button { color:#fff; background:var(--w21-red); }
#yuju #list #item2 .button { color:#fff; background:var(--w21-green); }
#yuju #list #item3 .button { color:#fff; background:var(--w22-gold); }


@media screen and (min-width:1441px) {
#yuju #list li { width:calc(100%/3 - .8em); }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#yuju #list li { width:calc(100%/3 - .4em); padding:2em 1em; }
}

@media screen and (min-width:1025px) {
#yuju #list ul { display:flex; justify-content:space-between; align-items:stretch; }
}

@media screen and (max-width:1024px) {
#yuju #list ul { max-width:600px; }
#yuju #list li:nth-of-type(n+2) { margin-top:2em; }
}

@media screen and (max-width:425px) {
#yuju #list ul { width:calc(100% - 2em); }
#yuju #list li { padding:2em 1em; }
}

@media screen and (max-width:320px) {
#yuju #list li { padding:2em .8em; }
}



/*==============================
	item page
==============================*/
#yuju [id^='item-'] { padding:1em 4em; }
#yuju [id^='item-']:first-of-type { padding-top:3em; }
#yuju [id^='item-'] > p:not(.icon) { 
line-height:1.8em;
position: relative;
max-width: 800px;
margin: 1.8em auto;}
#yuju #item-concept picture{
  margin: 2em auto ;
}
#yuju #item-concept p{
  line-height: 1.6em;
  margin: .8em auto;
}
#yuju [id^='item-'] h3 { margin-top:1.4em;  margin-bottom:1.2em; text-align:center; font-size:1.2em; font-weight:500; letter-spacing:1px; }
#yuju h3.blend-heading{
  padding: 1.4em 0 .4em;
  font-size: 1.4em;
}
#yuju #item-concept h3:first-of-type {
  margin-top: 0;
}
/*main*/
#yuju #item-main { position:relative; max-width:1024px; }
#yuju #item-main > *:not(.bg-illust) { z-index:1; }

#yuju #item-main h2 { max-width:85%; margin:0 auto 1em; text-align:center; font-size:1.2em;font-family: "Yu Mincho Regular", "Yu Mincho",
  "Hiragino Mincho ProN W3", "Hiragino Mincho ProN",
  "Hiragino Mincho Pro", "Hiragino Mincho Std",
  "Noto Serif JP", "Noto Serif CJK JP",
  "Source Han Serif JP", "IPAexMincho", "MS PMincho", serif; }
#yuju #item-main h2 > * { display:block; font-weight:500;}

#yuju #item-main h2 em { margin:.3em auto .2em; padding-top:.2em; font-size:1.6em; line-height:2em; letter-spacing:.06em; border-top:1px solid;  }
#yuju.happy-song #item-main h2 b,
#yuju.xmas-gift #item-main h2 b:nth-of-type(1) { color:var(--w21-red); }
#yuju.winter-tree #item-main h2 b,
#yuju.xmas-gift #item-main h2 b:nth-of-type(2) { color:var(--w21-green); }

#yuju #item-main > img { display:block; margin:auto; }
#yuju #item-main > img[alt='item'] { width:auto; height:22em; }
#yuju #item-main > img[alt='gift'] { width:100%; max-width:768px; }

/*aroma*/
#yuju p.blend_details { padding:0 0 2em;margin: 1.2em auto 1.4em; }
#yuju p.blend_details:last-of-type {
    padding: 0;
}
#yuju #item-aroma h4 { text-align:center; margin:1em auto .4em; padding:.5em 0 .6em; background:var(--w23-bg2); }
#yuju #item-aroma p { display:inline-block; margin:.1em .2em; }
#yuju #item-aroma p img { display:inline-block; width:3em; height:3em; margin:0 .2em -.2em 0; border-radius:50%; }


/*detail*/
#yuju #item-detail { position:relative; width:calc(100% - 2em); max-width:800px; margin:2em auto; background:var(--w23-bg2); }
#yuju #item-detail:before,
#yuju #item-detail:after { position:absolute; left:0; content:''; display:block; width:100%; height:1px; background:var(--text); }
#yuju #item-detail:before { top:-.4em; }
#yuju #item-detail:after { bottom:-.4em; }
#yuju #item-detail h4 { text-align:center; margin:1em auto .4em; padding:.5em 0 .6em; background:var(--w23-bg); }
#yuju #item-detail p.overview { text-align:center; font-weight:500; }

#yuju #item-concept small {font-size: .9em; display: block;}
@media screen and (min-width:768px) {
  #yuju #item-main h2 > span{
    font-size: 1.1em;
  }  
#yuju #item-concept small br{display: none;}
}
#yuju #item-concept h3 span{
  font-family: sans-serif;
}
@media screen and (max-width:768px) {
#yuju [id^='item-'] { padding:1em 2em ; }
#yuju #item-main h2 { font-size:1.2em; }
  #yuju #item-main h2 > span{
    font-size: .9em;
  }
#yuju #item-main > img[alt='item'] { height:18em; }
}

@media screen and (max-width:425px) {
#yuju #item-link a { margin:0 0 2em; }
}

@media screen and (max-width:375px) {
#yuju { font-size:.9em; }
#yuju [id^='item-'] { padding:1em 1em; }
#yuju #item-main h2 { font-size:1.2em; }
#yuju #item-main .icon { left:1em; }
#yuju #item-main > img[alt='item'] { height:16em; }
}

@media screen and (max-width:320px) {
#yuju #item-main img + p { font-size:13px; }
}