@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {

  /* フォントサイズ */
  --fs10:0.625rem;
  --fs11:0.6875rem;
  --fs12:0.750rem;
  --fs13:0.8125rem;
  --fs14:0.875rem;
  --fs15:0.9375rem;
  --fs16:1rem;
  --fs17:1.0625rem;
  --fs18:1.125rem;
  --fs19:1.1875rem;
  --fs20:1.25rem;
  --fs21:1.3125rem;
  --fs22:1.375rem;
  --fs23:1.4375rem;
  --fs24:1.5rem;
  --fs25:1.5625rem;
  --fs26:1.625rem;
  --fs27:1.6875rem;
  --fs28:1.75rem;
  --fs29:1.8125rem;
  --fs30:1.875rem;

  /* カラー */
  --colorBlack01:#000000;
  --colorGray01:#615245;
  --colorGray02:#dddddd;
  --colorGray03:#646464;
  --colorBeige01:#fffbf8;
  --colorBeige02:#fcf1ea;
  --colorBlue01:#0043e4;
  --colorBrown01:#C14100;
  --colorNavy01:#000A44

}

body { font-family: "Noto Sans JP", sans-serif; font-size:16px; }

.fs10 { font-size:var(--fs10); }
.fs11 { font-size:var(--fs11); }
.fs12 { font-size:var(--fs12); }
.fs13 { font-size:var(--fs13); }
.fs14 { font-size:var(--fs14); }
.fs15 { font-size:var(--fs15); }
.fs16 { font-size:var(--fs16); }
.fs17 { font-size:var(--fs17); }
.fs18 { font-size:var(--fs18); }
.fs19 { font-size:var(--fs19); }
.fs20 { font-size:var(--fs20); }
.fs21 { font-size:var(--fs21); }
.fs22 { font-size:var(--fs22); }
.fs23 { font-size:var(--fs23); }
.fs24 { font-size:var(--fs24); }
.fs25 { font-size:var(--fs25); }
.fs26 { font-size:var(--fs26); }
.fs27 { font-size:var(--fs27); }
.fs28 { font-size:var(--fs28); }
.fs29 { font-size:var(--fs29); }
.fs30 { font-size:var(--fs30); }

a { color:var(--colorBlue01); }

.txtBold { font-weight:500 !important; }

ul.txtList,
ol.txtList { padding-left:20px; }
ul.txtList > li { list-style:disc; }
ol.txtList > li { list-style:decimal; }
ul.txtList > li:first-child,
ol.txtList > li:first-child { margin-top:0; }

#container { /* max-width:750px; */ margin:0 auto; background-color:var(--colorBeige01); padding-bottom:35px; }

#titleSec { text-align:center; padding:60px 0 0; }
#titleSec #titleArea { width:260px; margin:0 auto; }
#titleSec #titleArea p { margin-top:30px; color:var(--colorGray01); font-size:var(--fs18); font-weight:500; }
#titleSec #titleArea p > span { font-size:var(--fs20); font-weight:bold; color:var(--colorBlack01); color:var(--colorBrown01); display:inline-block; padding:0 5px; }

.subTitleSec { text-align:center;margin-top:5px; padding:20px 0; }
.subTitleSec .subTitleArea h2 { color:var(--colorGray01); font-weight:bold; font-size:var(--fs20); padding-top:25px; background:url(../images/title_bg.png) no-repeat center top / 45px auto; }

.howToSec { color:var(--colorGray03); background-color:#ffffff; }
.howToSec:last-of-type { border-bottom:1px solid var(--colorGray02); }
.howToSec > h3 { font-weight:normal; font-size:var(--fs18);  }
.howToSec:not(:first-of-type) > h3 { border-top:1px solid var(--colorGray02); }
.howToSec > h3 > a { display:block; padding:15px 44px 18px 20px; color:var(--colorBrown01); text-decoration:none; padding-left:48px; background:none no-repeat 15px center / 24px auto; background-color:var(--colorBeige02); position:relative; }

.howToSec#login > h3 > a { background-image:url(../images/icon_1.png); }
.howToSec#home > h3 > a { background-image:url(../images/icon_2.png); background-position:20px center; background-size:16px auto; }
.howToSec#delivery > h3 > a { background-image:url(../images/icon_3.png); }
.howToSec#store > h3 > a { background-image:url(../images/icon_4.png); }
.howToSec#community > h3 > a { background-image:url(../images/icon_5.png); }
.howToSec#helpful > h3 > a { background-image:url(../images/icon_6.png); }
.howToSec#etc > h3 > a { background-image:url(../images/icon_7.png); }

.howToSec > h3 > a::after,
.howToSec .howToArea > h4 a::after { content:''; display:block; position:absolute; right:20px; top:50%; transform:translateY(-50%); background-color:var(--colorBlack01); width:15px; height:15px; clip-path:polygon(100% 40%, 50% 90%, 0 40%, 10% 30%, 50% 70%, 90% 30%); transition:clip-path 0.5s ease; }
.howToSec > h3.open > a::after,
.howToSec .howToArea > h4.open a::after { clip-path:polygon(90% 70%, 50% 30%, 10% 70%, 0 60%, 50% 10%, 100% 60%); }
.howToSec .howToArea { border-top:1px solid var(--colorGray02); border-bottom:1px solid var(--colorGray02); /* padding-bottom:15px; */ display:none; }
.howToSec .howToArea > h4 { font-weight:normal; }
.howToSec .howToArea > h4:not(:first-child) { border-top:1px solid var(--colorGray02); }
.howToSec .howToArea > h4 a { display:block; padding:12px 44px 12px 28px; text-decoration:none; color:var(--colorNavy01); position:relative; }
.howToSec .howToArea > h4 a::before { content:''; width:5px; height:1px; background-color:var(--colorBrown01); display:block; position:absolute; left:15px; top:50%; transform:translateY(-50%); }
.howToSec .howToArea .howToInner { margin:7px 15px 0; padding-bottom:15px; display:none; }
.howToSec .howToArea .howToInner > h5 { font-size:var(--fs20); font-weight:500; margin-top:30px; }
.howToSec .howToArea .howToInner > h5 + p { margin-top:0; }
.howToSec .howToArea .howToInner > p,
.howToSec .howToArea .howToInner > ul,
.howToSec .howToArea .howToInner > ol,
.howToSec .howToArea .howToInner > dl { margin-top:15px; }
.howToSec .howToArea .howToInner > *:first-child { margin-top:0; }
.howToSec .howToArea .howToInner > p + dl dt:first-child { margin-top:0; }
.howToSec .howToArea .howToInner > dl dt { margin-top:23px; position:relative; padding-left:10px; font-weight:500; }
.howToSec .howToArea .howToInner > dl dt::before { content:''; width:5px; height:1px; background-color:var(--colorGray01); display:block; position:absolute; left:0; top:0.75em; }
.howToSec .howToArea .howToInner > dl dd > *:first-child { margin-top:10px; }
.howToSec:has(h3.open) + .howToSec > h3 { border-top:none; }

.imgBox { margin:0 15px; display:flex; justify-content:center; }
.imgBox:not(:first-child) { margin-top:15px; }
.imgBox img { max-width:400px; width:100%; }

.howToSec .howToArea .howToInner ul li > .imgBox + div,
.howToSec .howToArea .howToInner ol li > .imgBox + div { margin-top:15px; }
.howToSec .howToArea .howToInner ul li > div + .imgBox,
.howToSec .howToArea .howToInner ol li > div + .imgBox { margin-bottom:15px; }

ul.txtList > li .imgBox,
ol.txtList > li .imgBox { margin-left:-5px; }

@media screen and (min-width:710px){

/* .imgBox img { width:60%; max-width:500px; } */

}