@charset 'utf-8';

:root { --brown:#9A877A; --dk-brown:#735b4a; --bg-brown:#ece6e3; --red:#964444; --bg-red:rgba(150,68,68,.1); }


/*Lineup リスト幅調整*/
#gift-wrapping #lineup .list ul { width:55em; }


@media screen and (max-width:768px) {
#gift-wrapping #lineup .list ul { width:52em; }
}



/*==============================
	common
==============================*/
body { background:#f5f3f2!important; }

#gift-wrapping { position:relative; padding:6em 0 8em; color:#222; border-bottom:.2em solid #fff; }
#gift-wrapping a { color:#043c78; border-bottom:1px solid; }
#gift-wrapping > section { margin:7em auto 0; }
#gift-wrapping > section.bg-color { padding:6em 0; }
#gift-wrapping > section.bg-color,
#gift-wrapping .bg-color > li { background:#fff; }

#gift-wrapping p.lead { width:calc(100% - 2em); margin:auto; text-align:center; font-size:1.06em; line-height:1.8em; }


/*title*/
#gift-wrapping h2 { margin-bottom:3em; padding:3em 0; text-align:center; background:rgba(255,255,255,.6); }
#gift-wrapping h2 span { display:block; }
#gift-wrapping h2 span:nth-of-type(1) { font-size:2.2em; font-weight:500; letter-spacing:.1em; color:var(--brown); }
#gift-wrapping h2 span:nth-of-type(2) { margin-top:.6em; font-size:1.1em; }


@media screen and (max-width:768px) {
#gift-wrapping { padding:5em 0 7em; }
#gift-wrapping > section { margin-top:6em; }
#gift-wrapping > section.bg-color { padding:5em 0; }
}

@media screen and (max-width:425px) {
#gift-wrapping { padding:4em 0 6em; font-size:.9em; }
#gift-wrapping > section { margin-top:5em; }
#gift-wrapping h2 { padding:2em 0; }
}



/*==============================
	main-vs
==============================*/
#gift-wrapping #main-vs { position:relative; width:calc(100% - 2em); max-width:500px; margin:5em auto 0; padding:3em 0 2em; color:var(--brown); border-top:1px solid; border-bottom:1px solid; }
#gift-wrapping #main-vs:before,
#gift-wrapping #main-vs svg { position:absolute; right:0; left:0; display:block; margin:auto; z-index:1; }
#gift-wrapping #main-vs:before { top:calc(-5em + 1px); content:''; width:10em; height:5em; background:#f5f3f2; border:1px solid; border-bottom:none; border-radius:10em 10em 0 0; }
#gift-wrapping #main-vs svg { top:-3.6em; width:5em; stroke:var(--brown); stroke-width:1px; }

#gift-wrapping #main-vs h1 { text-align:center; font-size:3em; font-weight:500; line-height:1.2em; letter-spacing:.1em; }
#gift-wrapping #main-vs p { width:100%; margin-top:1.4em; text-align:center; font-size:1.1em; line-height:2em; color:#35380A; }


@media screen and (max-width:768px) {
#gift-wrapping #main-vs h1 { font-size:2.6em; }
}

@media screen and (max-width:425px) {
#gift-wrapping #main-vs h1 { font-size:2.2em; }
#gift-wrapping #main-vs p { font-size:3.8vw; }
}



/*==============================
	lineup
==============================*/
/* ラインナップ下のボタン中央寄せ */
#gift-wrapping #lineup .list ul {
  width: fit-content;
}

#gift-wrapping #lineup .list {
  display: flex;
  justify-content: center;
}


#gift-wrapping #lineup a.btn { display:block; padding:1em 2em; text-align:center; border:1px solid; border-radius:4em; }
#gift-wrapping #lineup a.btn:hover { background:rgba(255,255,255,.6); }

#gift-wrapping #lineup .list { margin-bottom:3em; padding-bottom:8px; overflow-x:auto; font-feature-settings:'palt'; }
#gift-wrapping #lineup .list ul { display:flex; justify-content:center; align-items:stretch; margin:auto; }
#gift-wrapping #lineup .list ul li:nth-of-type(n+2) { margin-left:.6em; }
#gift-wrapping #lineup .list ul li:first-of-type { padding-left:1em; }
#gift-wrapping #lineup .list ul li:last-of-type { padding-right:1em; }
#gift-wrapping #lineup .list ul li span { margin-right:.4em; font-weight:600; }
#gift-wrapping #lineup .list ul li a { text-decoration:underline; }

#gift-wrapping #lineup .detail { width:calc(100% - 4em); margin:auto; }
#gift-wrapping #lineup .detail section h3 { padding:.4em 0; text-align:center; font-size:1.1em; font-weight:600; line-height:1.4em; color:var(--brown); background:var(--bg-brown); }
#gift-wrapping #lineup .detail section h3 span {
 position:relative;
 top:-.1em;
 display:inline-block;
 margin-right:.6em;
 padding:.3em;
 font-size:.8em;
 line-height:1em;
 letter-spacing:.1em;
 border:1px solid;
}
#gift-wrapping #lineup .detail section img { display:block; margin-bottom:.6em; }
#gift-wrapping #lineup .detail section p + p { margin-top:.4em; }
#gift-wrapping #lineup .detail section p + p:not(.price):before { content:''; display:block; margin:1em auto .8em; border-top:1px dashed; }
#gift-wrapping #lineup .detail section .appl { font-size:.96em; }
#gift-wrapping #lineup .detail section .size { margin-top:.2em; font-size:.96em; }
#gift-wrapping #lineup .detail section .price { text-align:right; color:var(--red); }
#gift-wrapping #lineup .detail section .price b { margin:0 .1em; font-size:1.4em; font-weight:500; }
#gift-wrapping #lineup .detail section .price:before { content:'1包装あたり'; }
#gift-wrapping #lineup .detail section .price:after { content:'税込'; margin-left:.2em; font-size:.9em; }
#gift-wrapping #lineup .detail section a.btn { max-width:14em; margin:1em auto 0; }
#gift-wrapping #lineup .detail section .link { text-align:center; }
#gift-wrapping #lineup .detail section .link a { display:inline-block; margin:1em .2em 0; }

/*limited*/
#gift-wrapping #lineup .detail section#limited { padding:2em; background:var(--bg-brown); }

/*member*/
#gift-wrapping #lineup .detail section#member img + p:before {
 content:'\4F1A\54E1\9650\5B9A';
 display:block;
 width:6em;
 margin:0 auto .6em;
 padding:0 .2em .2em;
 text-align:center;
 font-weight:600;
 letter-spacing:.1em;
 border-bottom:1px solid;
}


@media screen and (min-width:1441px) {
#gift-wrapping #lineup .detail section { width:calc(100%/4 - 1.8em); margin-left:2.4em; }
#gift-wrapping #lineup .detail section:nth-of-type(4n+1) { margin-left:0; }
#gift-wrapping #lineup .detail section:nth-of-type(n+5) { margin-top:3em; }
}

@media screen and (min-width:1025px) and (max-width:1440px) {
#gift-wrapping #lineup .detail section { width:calc(100%/3 - 1.2em); }
#gift-wrapping #lineup .detail section:nth-of-type(3n+2) { margin:0 1.8em; }
#gift-wrapping #lineup .detail section:nth-of-type(n+4) { margin-top:3em; }
}

@media screen and (min-width:769px) and (max-width:1024px) {
#gift-wrapping #lineup .detail section { width:calc(100%/2 - 1em); }
#gift-wrapping #lineup .detail section:nth-of-type(2n+2) { margin-left:2em; }
#gift-wrapping #lineup .detail section:nth-of-type(n+3) { margin-top:3em; }
}

@media screen and (min-width:769px) {
#gift-wrapping #lineup .detail { display:flex; flex-wrap:wrap; align-items:stretch; }
}

@media screen and (max-width:768px) {
#gift-wrapping #lineup .list a { padding:1em 1.4em; }
#gift-wrapping #lineup .detail section { max-width:600px; margin:auto; }
#gift-wrapping #lineup .detail section:nth-of-type(n+2) { margin-top:4em; }
#gift-wrapping #lineup .detail section h3 { font-size:1.3em; }
}

@media screen and (max-width:425px) {
#gift-wrapping #lineup a { font-size:1.06em; }
#gift-wrapping #lineup .list { margin-bottom:2em; }
#gift-wrapping #lineup .list ul li:nth-of-type(n+2) { margin-left:.4em; }
#gift-wrapping #lineup .list ul li:first-of-type { padding-left:.6em; }
#gift-wrapping #lineup .list ul li:last-of-type { padding-right:.6em; }
#gift-wrapping #lineup .detail { width:calc(100% - 2em); }
}



/*==============================
	idea
==============================*/
#gift-wrapping #idea h3 { margin-bottom:1.4em; text-align:center; font-size:1.26em; letter-spacing:.1em; color:var(--brown); }
#gift-wrapping #idea h3:nth-of-type(n+2) { margin-top:4em; }

#gift-wrapping #idea .tab { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 2em); max-width:1200px; margin:auto; }
#gift-wrapping #idea .tab input { display:none; }
#gift-wrapping #idea .tab label {
 width:calc(100%/4 - .75em);
 max-width:10em;
 margin-bottom:1.6em;
 padding:.8em .4em;
 text-align:center;
 font-size:1.1em;
 line-height:1.4em;
 letter-spacing:.1em;
 color:var(--dk-brown);
 background:rgba(255,255,255,.6);
 border:2px solid var(--bg-brown);
 border-radius:.4em;
 order:-1;
 cursor:pointer;
}
#gift-wrapping #idea .tab.btn3 label { width:calc(100%/3 - .75em); }
#gift-wrapping #idea .tab label:nth-of-type(n+2) { margin-left:1em; }
#gift-wrapping #idea .tab input:checked + label { font-weight:600; background:var(--bg-brown); }

#gift-wrapping #idea .tab .content { display:none; width:100%; transition:.4s; }
#gift-wrapping #idea .tab input:checked + label + .content { display:flex; flex-wrap:wrap; align-items:stretch; }

#gift-wrapping #idea .tab .content ul { display:flex; justify-content:center; align-items:flex-start; }
#gift-wrapping #idea .tab .content a { display:block; color:#35380A; border:none; }
#gift-wrapping #idea .tab .content img { display:block; width:100%; margin:auto; }
#gift-wrapping #idea .tab .content p { margin-top:.6em; }
#gift-wrapping #idea .tab .content img + p { margin-top:1em; }
#gift-wrapping #idea .tab .content .for { display:inline-block; padding:0 .4em .3em; text-align:center; font-size:.9em; font-weight:600; color:var(--dk-brown); border-bottom:2px solid; }
#gift-wrapping #idea .tab .content .detail { line-height:1.6em; }
#gift-wrapping #idea .tab .content .for + .detail { margin-top:.4em; }
#gift-wrapping #idea .tab .content .detail span { display:block; margin-top:.4em; padding:.6em; font-size:.9em; line-height:1.2em; background:rgba(255,255,255,.6); }
#gift-wrapping #idea .tab .content .price { text-align:right; color:var(--red); }
#gift-wrapping #idea .tab .content .price:after { content:'税込'; margin-left:.1em; font-size:.9em; }
#gift-wrapping #idea .tab .content .price b { font-size:1.3em; font-weight:500; }


@media screen and (min-width:1025px) {
#gift-wrapping #idea .tab .content li { width:calc(100%/4 - 1.2em); margin-left:1.6em; }
#gift-wrapping #idea .tab .content li:nth-of-type(4n+1) { margin-left:0; }
}

@media screen and (max-width:1024px) {
#gift-wrapping #idea .tab { width:100%; }
#gift-wrapping #idea .tab .content { padding-bottom:8px; overflow-x:auto; padding:0 1em 1em; }
#gift-wrapping #idea .tab .content ul { width:max-content; }
#gift-wrapping #idea .tab .content li { width:26vw; }
#gift-wrapping #idea .tab .content li:nth-of-type(n+2) { margin-left:1em; }
}

@media screen and (max-width:768px) {
#gift-wrapping #idea .tab .content li { width:50vw; }
}

@media screen and (max-width:425px) {
#gift-wrapping #idea .tab label { width:calc(100%/4 - .3em); font-size:3.8vw; }
#gift-wrapping #idea .tab label:nth-of-type(n+2) { margin-left:.4em; }
#gift-wrapping #idea .tab .content li { width:68vw; }
}



/*==============================
	shipping
==============================*/
#gift-wrapping #shipping h2 + p { width:calc(100% - 2em); margin:auto; font-size:1.06em; line-height:2em; }

#gift-wrapping #shipping .img { display:flex; justify-content:space-around; align-items:center; width:calc(100% - 3em); max-width:360px; margin:2em auto; }
#gift-wrapping #shipping .img img { display:block; max-width:120px; }
#gift-wrapping #shipping .img img:nth-of-type(2) {  }

#gift-wrapping #shipping .tab { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:calc(100% - 2em); max-width:800px; margin:auto; }
#gift-wrapping #shipping .tab input { display:none; }
#gift-wrapping #shipping .tab label {
 width:calc(100%/2 - 1.3em);
 max-width:10em;
 padding:1em .2em;
 text-align:center;
 font-size:1.1em;
 color:var(--dk-brown);
 background:rgba(255,255,255,.6);
 border-top-left-radius:.6em;
 border-top-right-radius:.6em;
 order:-1;
 cursor:pointer;
}
#gift-wrapping #shipping .tab label:nth-of-type(1) { margin-left:1em; }
#gift-wrapping #shipping .tab label:nth-of-type(2) { margin:0 1em 0 .6em; }
#gift-wrapping #shipping .tab input:checked + label { font-weight:600; background:var(--bg-brown); }

#gift-wrapping #shipping .tab .content {
 display:none;
 width:100%;
 padding:2em;
 line-height:1.8em;
 background:rgba(255,255,255,.6);
 border-bottom-left-radius:.6em;
 border-bottom-right-radius:.6em;
}
#gift-wrapping #shipping .tab input:checked + label + .content { display:block; border-top:.4em solid var(--bg-brown); }


@media screen and (min-width:426px) {
#gift-wrapping #shipping h2 + p { text-align:center; word-break:keep-all; word-wrap:break-word; }
}

@media screen and (max-width:425px) {
#gift-wrapping #shipping .img img { max-width:100px; }
#gift-wrapping #shipping .tab label { width:calc(100%/2 - 1.2em); }
#gift-wrapping #shipping .tab label:nth-of-type(2) { margin-left:.4em; }
}



/*==============================
	order
==============================*/
#gift-wrapping #order .step {
 display:flex;
 justify-content:center;
 align-items:stretch;
 max-width:35em;
 margin:auto;
 text-align:center;
 counter-reset:number 0;
 list-style-type:none;
 line-height:1.6em;
}
#gift-wrapping #order .step a { color:#35380A; border:none; }
#gift-wrapping #order .step li { position:relative; width:calc(100%/3); padding:1em 0; background:rgba(255,255,255,.6); }
#gift-wrapping #order .step li:nth-of-type(1) { width:11em; }
#gift-wrapping #order .step li:nth-of-type(2) { width:14em; }
#gift-wrapping #order .step li:nth-of-type(3) { width:10em; }
#gift-wrapping #order .step li:before {
 font-family:Marcellus,serif;
 counter-increment:number 1;
 content:counter(number);
 display:block;
 width:1em;
 margin:0 auto .4em;
 font-size:1.6em;
 color:var(--brown); 
}
#gift-wrapping #order .step li:nth-of-type(n+2):after {
 position:absolute;
 top:0;
 left:-.5em;
 content:'';
 width:1em;
 height:100%;
 background:url(/gift/img/arrow.webp) center / 100% no-repeat;
 z-index:1;
}

#gift-wrapping #order dl { width:calc(100% - 2em); max-width:800px; margin:4em auto 0; }
#gift-wrapping #order dt { font-size:1.16em; line-height:1.6em; }
#gift-wrapping #order dt:nth-of-type(n+2) { margin-top:1.6em; }
#gift-wrapping #order dd { margin-top:.4em; line-height:1.8em; }

#gift-wrapping #order .detail { counter-reset:number 0; }
#gift-wrapping #order .detail dt { font-weight:600; color:var(--brown); }
#gift-wrapping #order .detail dt:before { font-family:Marcellus,serif; counter-increment:number 1; content:counter(number); margin-right:.4em; font-size:1.4em; font-weight:500; }
#gift-wrapping #order .detail dd b { padding:0 .2em; font-weight:500; background:var(--bg-red); }
#gift-wrapping #order .detail .info { font-size:.9em; }
#gift-wrapping #order .detail .link { margin-top:.4em; text-align:right; }

#gift-wrapping #order .attention { padding:2em; background:var(--bg-red); }
#gift-wrapping #order .attention dt { text-align:center; color:var(--red); }
#gift-wrapping #order .attention dd { padding-left:1.1em; text-indent:-1.1em; line-height:1.6em; }
#gift-wrapping #order .attention dd:before { content:'※'; margin-right:.1em; color:var(--red); }


@media screen and (max-width:425px) {
#gift-wrapping #order .attention { padding:1em; }
#gift-wrapping #order dl { margin-top:3em; }
}

@media screen and (max-width:320px) {
#gift-wrapping #order .step { font-size:4vw; }
}



/*==============================
	footer
==============================*/
#index-footer { margin-top:0!important; }

/* ラインナップの商品セクションが2つのとき中央寄せ */
#gift-wrapping #lineup .detail {
  justify-content: center;
}