@charset "UTF-8"; /* ご利用ガイド（32）の見た目 2026-10-26。中身は 新ページ\ご利用ガイド\guide-stylish.html から作成（.hr-guide32 の中だけに効く） */ /* サイトの見た目（default.css）が中に入り込まないよう、最初に打ち消す */ #main-column #Journal .hr-guide32 :is(h1,h2,h3,h4,h5,h6){border:0;padding:0;margin:0;background:none;font-size:inherit;letter-spacing:inherit;color:inherit} #main-column #Journal .hr-guide32 :not(svg, svg *){font-size:inherit;color:inherit;line-height:inherit;letter-spacing:inherit} #main-column #Journal .hr-guide32 svg{font-size:inherit;line-height:inherit} #main-column #Journal .hr-guide32 *:not(svg *){font-family:inherit!important} /* 10/27：default.css の body *{font-family:…!important} で書体が全部サイトの字になっていた */ #main-column #Journal .hr-guide32 :is(strong,b){font-weight:700} #main-column #Journal .hr-guide32 li{list-style-type:inherit} #main-column #Journal .hr-guide32 ul{list-style-type:disc;margin:1em 0} #main-column #Journal .hr-guide32 ol{list-style-type:decimal;margin:1em 0} #main-column #Journal .hr-guide32{--ink:#161616;--sub:#6e6e6e;--line:#d9d9d9;--tint:#f3f3f3;--blk:#3a3a3a} #main-column #Journal .hr-guide32 *{box-sizing:border-box} #main-column #Journal .hr-guide32{scroll-behavior:smooth} #main-column #Journal .hr-guide32{margin:0;background:#fff;color:var(--ink);font:400 15px/1.9 "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif!important;letter-spacing:.02em} #main-column #Journal .hr-guide32 .hero{padding:44px max(24px,calc((100% - 1200px)/2)) 12px;text-align:center} #main-column #Journal .hr-guide32 .hero h1{margin:0;font-size:clamp(30px,5vw,44px);font-weight:900;letter-spacing:.2em;line-height:1.25;padding-left:.2em} #main-column #Journal .hr-guide32 .hero .en{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 0;font:600 clamp(18px,2.3vw,24px)/1.2 "Cormorant Garamond",Georgia,"Times New Roman",serif;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif!important;letter-spacing:.38em;text-transform:uppercase;color:var(--blk)} #main-column #Journal .hr-guide32 .hero .en span{margin-right:-.38em} #main-column #Journal .hr-guide32 .hero .en::before, #main-column #Journal .hr-guide32 .hero .en::after{content:"";flex:0 1 clamp(40px,12vw,160px);height:1px;background:linear-gradient(90deg,transparent,var(--blk))} #main-column #Journal .hr-guide32 .hero .en::after{background:linear-gradient(270deg,transparent,var(--blk))} #main-column #Journal .hr-guide32 .hero .lead{max-width:780px;margin:12px auto 0;font-size:14px;line-height:1.6;color:#444} #main-column #Journal .hr-guide32 .hero .lead span{display:block} #main-column #Journal .hr-guide32 .jump{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;background:#fff;padding:12px max(24px,calc((100% - 1200px)/2)) 20px;counter-reset:n} #main-column #Journal .hr-guide32 .jump a{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;gap:6px;min-height:76px;padding:12px 16px;background:#fff;border:1px solid var(--blk);color:var(--blk);font-size:13.5px;font-weight:500;line-height:1.5;text-decoration:none;position:relative;isolation:isolate;overflow:hidden;transition:color .35s} #main-column #Journal .hr-guide32 .jump a::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--blk);transform:scale(0);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s} #main-column #Journal .hr-guide32 .jump a::before{counter-increment:n;content:counter(n,decimal-leading-zero);color:var(--sub);transition:color .35s;font:500 30px/1 "Helvetica Neue",Arial,sans-serif;font-family:"Helvetica Neue",Arial,sans-serif!important;letter-spacing:.04em} #main-column #Journal .hr-guide32 .jump a:hover, #main-column #Journal .hr-guide32 .jump a:focus-visible{color:#fff;outline:none} #main-column #Journal .hr-guide32 .jump a:hover::after, #main-column #Journal .hr-guide32 .jump a:focus-visible::after{transform:scale(1);opacity:1} #main-column #Journal .hr-guide32 .jump a:hover::before, #main-column #Journal .hr-guide32 .jump a:focus-visible::before{color:#b5b5b5} @media(min-width:641px){#main-column #Journal .hr-guide32 .jump{position:sticky;top:0;z-index:5;padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}} #main-column #Journal .hr-guide32 main{max-width:1200px;margin:0 auto;padding:16px 24px 120px;counter-reset:s} #main-column #Journal .hr-guide32 section{scroll-margin-top:70px;padding-top:40px} #main-column #Journal .hr-guide32 h2{display:flex;align-items:baseline;gap:18px;margin:0 0 28px;padding:18px 24px;background:var(--blk);color:#cfcfcf;font-size:21px;font-weight:700;line-height:1.4;letter-spacing:.08em} #main-column #Journal .hr-guide32 h2 span::first-letter{color:#fff;font-size:1.18em} #main-column #Journal .hr-guide32 h2::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:500 14px/1 "Helvetica Neue",Arial,sans-serif;font-family:"Helvetica Neue",Arial,sans-serif!important;color:#b5b5b5;letter-spacing:.1em} #main-column #Journal .hr-guide32 h3{margin:44px 0 14px;padding:10px 16px;background:var(--tint);border-left:4px solid var(--blk);font-size:17px;font-weight:700;line-height:1.5} #main-column #Journal .hr-guide32 h4{display:inline-block;margin:22px 0 6px;padding:1px 12px;background:var(--blk);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.08em} #main-column #Journal .hr-guide32 p{margin:.7em 0} #main-column #Journal .hr-guide32 a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px;word-break:break-all} #main-column #Journal .hr-guide32 a:hover{color:var(--sub)} #main-column #Journal .hr-guide32 em{font-style:normal;font-weight:700;background:linear-gradient(transparent 62%,#d6d6d6 62%)} #main-column #Journal .hr-guide32 strong{font-weight:700} #main-column #Journal .hr-guide32 small{font-size:.85em} #main-column #Journal .hr-guide32 img{max-width:100%;height:auto;display:block;margin:16px 0} #main-column #Journal .hr-guide32 img.wide{max-width:min(640px, 100%)} /* 10/27：640pxだとスマホで右にはみ出していた */ #main-column #Journal .hr-guide32 img.small{max-width:180px} #main-column #Journal .hr-guide32 .scroll{overflow-x:auto;margin:16px 0;border:1px solid var(--blk)} #main-column #Journal .hr-guide32 table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.7} #main-column #Journal .hr-guide32 th, #main-column #Journal .hr-guide32 td{padding:12px 14px;border:1px solid var(--line);vertical-align:top;text-align:left} #main-column #Journal .hr-guide32 th{background:#4d4d4d;border-color:#666;color:#fff;font-weight:500} #main-column #Journal .hr-guide32 tr:nth-child(even) td{background:#fafafa} #main-column #Journal .hr-guide32 .fee-table table{min-width:820px} #main-column #Journal .hr-guide32 .notes{margin:16px 0;padding:16px 20px;list-style:none;background:var(--tint);font-size:13px;line-height:1.85} #main-column #Journal .hr-guide32 .notes li{position:relative;padding-left:18px;margin:6px 0} #main-column #Journal .hr-guide32 .notes li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;background:var(--blk)} #main-column #Journal .hr-guide32 .notice{margin:24px 0;padding:18px 24px;border:2px solid var(--blk);background:#fff} #main-column #Journal .hr-guide32 .notice h4{margin:0 0 6px} #main-column #Journal .hr-guide32 .notice p{font-size:13px;margin:.4em 0} #main-column #Journal .hr-guide32 ul:not(.notes){padding-left:1.3em} @media(max-width:640px){ #main-column #Journal .hr-guide32 .hero{padding:32px 20px 8px}#main-column #Journal .hr-guide32 .hero .lead{font-size:13px}#main-column #Journal .hr-guide32 .hero .lead span{display:inline} #main-column #Journal .hr-guide32 .jump{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 16px 16px} #main-column #Journal .hr-guide32 .jump a:last-child:nth-child(odd){grid-column:1/-1} #main-column #Journal .hr-guide32 .jump a{min-height:64px;padding:10px 14px;font-size:13px} #main-column #Journal .hr-guide32 .jump a::before{font-size:24px} #main-column #Journal .hr-guide32 main{padding:8px 16px 80px} #main-column #Journal .hr-guide32 h2{font-size:18px;padding:14px 16px;gap:12px}} @media(prefers-reduced-motion:reduce){#main-column #Journal .hr-guide32{scroll-behavior:auto}#main-column #Journal .hr-guide32 .jump a::after{transition:none}#main-column #Journal .hr-guide32 .tel-ic .phone, #main-column #Journal .hr-guide32 .tel-ic .wave{animation:none}} #main-column #Journal .hr-guide32 .map{margin:20px 0;padding:0}#main-column #Journal .hr-guide32 .ms{overflow-x:auto}#main-column #Journal .hr-guide32 .map svg{display:block;width:100%;max-width:852px;height:auto}#main-column #Journal .hr-guide32 .ms.desk svg{min-width:560px}#main-column #Journal .hr-guide32 .ms.mob{display:none}@media(max-width:640px){#main-column #Journal .hr-guide32 .ms.desk{display:none}#main-column #Journal .hr-guide32 .ms.mob{display:block}#main-column #Journal .hr-guide32 .ms{overflow:visible}} #main-column #Journal .hr-guide32 .map text{pointer-events:none} #main-column #Journal .hr-guide32 .legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 24px;font-size:13px;line-height:1.6} #main-column #Journal .hr-guide32 .legend li{display:flex;gap:10px;align-items:flex-start}#main-column #Journal .hr-guide32 .legend b{font-weight:500} #main-column #Journal .hr-guide32 .sw{flex:none;width:22px;height:22px;margin-top:2px;border-radius:3px} #main-column #Journal .hr-guide32 .map figcaption{margin-top:10px;font-size:12px} #main-column #Journal .hr-guide32 .map .t rect{stroke:#3a3a3a;stroke-width:1.2} #main-column #Journal .hr-guide32 .t.a rect, #main-column #Journal .hr-guide32 .sw.a{fill:#3a3a3a;background:#3a3a3a}#main-column #Journal .hr-guide32 .t.a text{fill:#fff} #main-column #Journal .hr-guide32 .t.b rect{fill:url(#hatch)}#main-column #Journal .hr-guide32 .t.b text{fill:#3a3a3a;font-weight:500}#main-column #Journal .hr-guide32 .sw.b{background:repeating-linear-gradient(45deg,#3a3a3a 0 2px,#fff 2px 5px);border:1.2px solid #3a3a3a} #main-column #Journal .hr-guide32 .hb{fill:#fff}#main-column #Journal .hr-guide32 .hl{stroke:#3a3a3a;opacity:.55} #main-column #Journal .hr-guide32 .t.c rect, #main-column #Journal .hr-guide32 .sw.c{fill:#888;background:#888}#main-column #Journal .hr-guide32 .t.c text{fill:#fff} #main-column #Journal .hr-guide32 .t.d rect, #main-column #Journal .hr-guide32 .sw.d{fill:#ccc;background:#ccc}#main-column #Journal .hr-guide32 .t.d text{fill:#3a3a3a} #main-column #Journal .hr-guide32 .t.e rect{fill:#fff}#main-column #Journal .hr-guide32 .t.e text{fill:#3a3a3a}#main-column #Journal .hr-guide32 .sw.e{background:#fff;border:1.2px solid #3a3a3a} #main-column #Journal .hr-guide32 .t.f rect{fill:#fff;stroke-dasharray:3 3}#main-column #Journal .hr-guide32 .t.f text{fill:#3a3a3a}#main-column #Journal .hr-guide32 .sw.f{background:#fff;border:1.2px dashed #3a3a3a} #main-column #Journal .hr-guide32 .map .t.a rect, #main-column #Journal .hr-guide32 .map .t.c rect, #main-column #Journal .hr-guide32 .map .t.d rect{stroke:none} #main-column #Journal .hr-guide32 .map figcaption{color:#6b6b6b} #main-column #Journal .hr-guide32 .map svg{max-width:none}#main-column #Journal .hr-guide32 .map{padding:0 clamp(0px,3vw,40px)}@media(max-width:640px){#main-column #Journal .hr-guide32 .map{padding:0}} #main-column #Journal .hr-guide32 .tel{--tel:#3a3a3a;display:flex;align-items:center;gap:clamp(16px,3vw,32px);max-width:none;margin:20px 0;padding:22px clamp(18px,3vw,32px);background:#fff;border:1px solid #d9d9d9;border-top:4px solid var(--tel);border-radius:0} #main-column #Journal .hr-guide32 .tel p{margin:0} #main-column #Journal .hr-guide32 .tel-ic{flex:none;width:clamp(60px,9vw,84px);color:var(--tel)} #main-column #Journal .hr-guide32 .tel-ic svg{display:block;width:100%;height:auto} /* スマホの絵が8秒に1回プルっと震える（波線も少し光る） */ #main-column #Journal .hr-guide32 .tel-ic .phone{transform-box:fill-box;transform-origin:50% 60%;animation:tel-buru 8s 1.5s ease-in-out infinite} #main-column #Journal .hr-guide32 .tel-ic .wave{animation:tel-wave 8s 1.5s ease-in-out infinite} @keyframes tel-buru{0%,8%,100%{transform:rotate(0)}1%{transform:rotate(-9deg)}2%{transform:rotate(8deg)}3%{transform:rotate(-7deg)}4%{transform:rotate(6deg)}5%{transform:rotate(-4deg)}6%{transform:rotate(3deg)}7%{transform:rotate(-1deg)}} @keyframes tel-wave{0%,10%,100%{opacity:1}2%,6%{opacity:.25}4%,8%{opacity:1}} #main-column #Journal .hr-guide32 .tel-main{flex:0 1 auto;min-width:0} #main-column #Journal .hr-guide32 .tel-lead{display:inline-block;padding:4px 18px;background:var(--tel);color:#fff;font-size:16px;font-weight:500;line-height:1.6;letter-spacing:.12em} #main-column #Journal .hr-guide32 .tel-lead.out{background:none;color:var(--tel);box-shadow:inset 0 0 0 1px var(--tel)} #main-column #Journal .hr-guide32 .tel-no{margin-top:6px;font:700 clamp(26px,5.6vw,52px)/1.1 "Helvetica Neue","Segoe UI",Arial,sans-serif;font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif!important;letter-spacing:.04em;color:#222;white-space:nowrap} #main-column #Journal .hr-guide32 .tel-no a{color:inherit;text-decoration:none} #main-column #Journal .hr-guide32 .tel-hours{flex:none;align-self:stretch;margin-left:clamp(0px,3vw,40px);padding-left:calc(clamp(16px,3vw,32px) + clamp(0px,3vw,40px));border-left:1px solid #d9d9d9;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} #main-column #Journal .hr-guide32 .tel-hours .tel-lead{font-size:18px} #main-column #Journal .hr-guide32 .tel-note{margin-top:8px;font-size:20px;line-height:1.8;color:#333;letter-spacing:.04em} #main-column #Journal .hr-guide32 .tel-note span{display:inline-block;min-width:4em;margin-right:8px;color:#777;font-size:15px;letter-spacing:.12em} /* FAXでのご注文ページへのリンク（2026-10-15）：カード全体がリンク。ホバーで色が左から満ち、矢印が右へ。8秒に1回、FAXから紙が出てくる */ #main-column #Journal .hr-guide32 .fax-link{--tel:#3a3a3a;position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,28px);margin:20px 0;padding:20px clamp(18px,3vw,32px);overflow:hidden;background:#fff;border:1px solid #d9d9d9;border-top:4px solid var(--tel);color:var(--ink);text-decoration:none;isolation:isolate;transition:color .35s,box-shadow .35s,transform .35s} #main-column #Journal .hr-guide32 .fax-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tel);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)} #main-column #Journal .hr-guide32 .fax-link:hover, #main-column #Journal .hr-guide32 .fax-link:focus-visible{color:#fff;transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.12);outline:none} #main-column #Journal .hr-guide32 .fax-link:hover::before, #main-column #Journal .hr-guide32 .fax-link:focus-visible::before{transform:scaleX(1);transform-origin:left} #main-column #Journal .hr-guide32 .fax-link::after{content:"";position:absolute;top:0;bottom:0;left:-60%;z-index:1;width:35%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none;animation:fax-shine 8s 2s ease-in-out infinite} #main-column #Journal .hr-guide32 .fax-link-ic{flex:none;width:clamp(56px,8vw,72px);color:var(--tel);transition:color .35s} #main-column #Journal .hr-guide32 .fax-link-ic svg{display:block;width:100%;height:auto;overflow:visible} #main-column #Journal .hr-guide32 .fax-link-ic .fill{fill:#fff;transition:fill .35s}#main-column #Journal .hr-guide32 .fax-link:hover .fax-link-ic .fill, #main-column #Journal .hr-guide32 .fax-link:focus-visible .fax-link-ic .fill{fill:var(--tel)}#main-column #Journal .hr-guide32 .fax-link-ic .paper{animation:fax-paper 8s 1s ease-in-out infinite} #main-column #Journal .hr-guide32 .fax-link:hover .fax-link-ic{color:#fff} #main-column #Journal .hr-guide32 .fax-link-main{flex:1 1 auto;min-width:0} #main-column #Journal .hr-guide32 .fax-link-main span{display:block} #main-column #Journal .hr-guide32 .fax-link-ttl{font-size:clamp(17px,2.2vw,20px);font-weight:700;letter-spacing:.08em;line-height:1.5} #main-column #Journal .hr-guide32 .fax-link-txt{margin-top:2px;color:var(--sub);font-size:13.5px;line-height:1.7;transition:color .35s} #main-column #Journal .hr-guide32 .fax-link:hover .fax-link-txt{color:#e6e6e6} #main-column #Journal .hr-guide32 .fax-link-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;transition:transform .35s} #main-column #Journal .hr-guide32 .fax-link-go svg{width:16px;height:16px} #main-column #Journal .hr-guide32 .fax-link:hover .fax-link-go{transform:translateX(6px)} @keyframes fax-shine{0%{left:-60%}15%,100%{left:130%}} @keyframes fax-paper{0%,70%,100%{transform:translateY(0)}78%,90%{transform:translateY(-9px)}} @media(max-width:640px){#main-column #Journal .hr-guide32 .fax-link{gap:14px;padding:16px}#main-column #Journal .hr-guide32 .fax-link-ttl{font-size:16px;white-space:nowrap}#main-column #Journal .hr-guide32 .fax-link-go{width:36px;height:36px}} @media(prefers-reduced-motion:reduce){#main-column #Journal .hr-guide32 .fax-link::after, #main-column #Journal .hr-guide32 .fax-link-ic .fill{fill:#fff;transition:fill .35s}#main-column #Journal .hr-guide32 .fax-link:hover .fax-link-ic .fill, #main-column #Journal .hr-guide32 .fax-link:focus-visible .fax-link-ic .fill{fill:var(--tel)}#main-column #Journal .hr-guide32 .fax-link-ic .paper{animation:none}} @media(max-width:960px){#main-column #Journal .hr-guide32 .tel{flex-wrap:wrap;row-gap:16px}#main-column #Journal .hr-guide32 .tel-hours{flex:1 1 100%;margin-left:0;padding:14px 0 0;border-left:0;border-top:1px solid #d9d9d9;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px}#main-column #Journal .hr-guide32 .tel-note{margin:0}} #main-column #Journal .hr-guide32 .fee{display:none} @media(max-width:640px){ #main-column #Journal .hr-guide32 .fee-table{display:none} #main-column #Journal .hr-guide32 .fee{display:block;list-style:none;margin:14px 0;padding:0;border-top:1px solid var(--line)} #main-column #Journal .hr-guide32 .fee li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 2px;border-bottom:1px solid var(--line)} #main-column #Journal .hr-guide32 .fee b{font-weight:700} #main-column #Journal .hr-guide32 .fee small{grid-column:1;word-break:keep-all;color:#777;font-size:12px;line-height:1.6} #main-column #Journal .hr-guide32 .fee i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:700;font-size:16px;white-space:nowrap} #main-column #Journal .hr-guide32 .scroll:not(.fee-table){overflow:visible;border:0;background:none} #main-column #Journal .hr-guide32 .scroll:not(.fee-table) table, #main-column #Journal .hr-guide32 .scroll:not(.fee-table) tbody, #main-column #Journal .hr-guide32 .scroll:not(.fee-table) tr, #main-column #Journal .hr-guide32 .scroll:not(.fee-table) th, #main-column #Journal .hr-guide32 .scroll:not(.fee-table) td{display:block;width:100%} #main-column #Journal .hr-guide32 .scroll:not(.fee-table) th{white-space:normal} #main-column #Journal .hr-guide32 .scroll:not(.fee-table) td{border-top:0} #main-column #Journal .hr-guide32 .scroll:not(.fee-table) tr{margin-bottom:10px} } #main-column #Journal .hr-guide32 .free-ship{margin:18px 0 6px;font-size:17px;font-weight:700;line-height:1.6}#main-column #Journal .hr-guide32 .free-ship strong{color:#b0505f;font-size:26px;font-weight:900;letter-spacing:.06em;margin:0 2px}#main-column #Journal .hr-guide32 .ship-fee{color:#a95a66;font-weight:700;background:linear-gradient(transparent 60%,#f6d6dc 60%)}#main-column #Journal .hr-guide32 .same-day{margin:12px 0 8px;font-size:16px;line-height:1.7}#main-column #Journal .hr-guide32 .same-day strong{color:#b0505f;font-size:20px;font-weight:900}@media (max-width:640px){#main-column #Journal .hr-guide32 .free-ship{font-size:15px}#main-column #Journal .hr-guide32 .free-ship strong{font-size:22px}#main-column #Journal .hr-guide32 .same-day strong{font-size:18px}} #main-column #Journal .hr-guide32 .ship-days{min-width:0;width:100%}#main-column #Journal .hr-guide32 .ship-days td strong{color:#b0505f}@media (max-width:768px){#main-column #Journal .hr-guide32 .ship-days{display:table!important}#main-column #Journal .hr-guide32 .ship-days tbody{display:table-row-group!important}#main-column #Journal .hr-guide32 .ship-days tr{display:table-row!important}#main-column #Journal .hr-guide32 .ship-days th, #main-column #Journal .hr-guide32 .ship-days td{display:table-cell!important;padding:10px 8px!important;font-size:13px;vertical-align:middle}#main-column #Journal .hr-guide32 .ship-days{table-layout:fixed!important}#main-column #Journal .hr-guide32 .ship-days th:first-child, #main-column #Journal .hr-guide32 .ship-days td:first-child{width:38%!important}#main-column #Journal .hr-guide32 .ship-days th, #main-column #Journal .hr-guide32 .ship-days td{width:auto;min-width:0!important;white-space:normal!important}} /* お届け日指定：カート用（/files/cart-otodoke.html）と同じ案内に統一（2026-10-16） */ #main-column #Journal .hr-guide32 .hr-otd{--t:#2b2b2b;--s:#6b6b6b;--l:#ece6e2;--soft:#faf6f3;--k:#3a3a3a;max-width:880px;margin:12px 0;color:var(--t);font:400 14px/1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","游ゴシック体",Meiryo,sans-serif;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","游ゴシック体",Meiryo,sans-serif!important;letter-spacing:.02em;text-align:left} #main-column #Journal .hr-guide32 .hr-otd *{box-sizing:border-box} #main-column #Journal .hr-guide32 .hr-otd-ttl{margin:0 0 10px;padding:8px 14px;background:var(--soft);border-left:3px solid var(--k);font-size:15px;font-weight:700;line-height:1.5} #main-column #Journal .hr-guide32 .hr-otd .map{margin:0 0 18px;padding:0} #main-column #Journal .hr-guide32 .hr-otd .ms svg{display:block;width:100%;height:auto} #main-column #Journal .hr-guide32 .hr-otd .ms.mob{display:none} #main-column #Journal .hr-guide32 .hr-otd .map text{pointer-events:none} /* 色は元の地図画像（japan_map_haitatujikan_202305）に合わせる：青＝午前中、オレンジ＝14〜16時、ピンク＝18〜20時、緑＝2日間（2026-10-15 高見さん） */ #main-column #Journal .hr-guide32 .hr-otd{--ca:#5a8cc2;--cc:#eda21e;--cd:#d48ebb;--ce:#72b26d} #main-column #Journal .hr-guide32 .hr-otd .t rect{stroke:none} #main-column #Journal .hr-guide32 .hr-otd .t text{fill:#fff} #main-column #Journal .hr-guide32 .hr-otd .t.a rect{fill:var(--ca)}#main-column #Journal .hr-guide32 .hr-otd .t.c rect{fill:var(--cc)}#main-column #Journal .hr-guide32 .hr-otd .t.d rect{fill:var(--cd)}#main-column #Journal .hr-guide32 .hr-otd .t.e rect{fill:var(--ce)} #main-column #Journal .hr-guide32 .hr-otd .map{position:relative} #main-column #Journal .hr-guide32 .hr-otd .lg{position:absolute;left:12px;top:12px;width:calc(58% - 12px);padding:12px 14px;border:1px solid #e3ddd8;background:#fff} #main-column #Journal .hr-guide32 .hr-otd .legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:12.5px;line-height:1.55} #main-column #Journal .hr-guide32 .hr-otd .legend li{display:flex;gap:8px;align-items:flex-start;margin:0;padding:0;list-style:none} #main-column #Journal .hr-guide32 .hr-otd .legend b{font-weight:700} #main-column #Journal .hr-guide32 .hr-otd .legend small{display:block;color:var(--s);font-size:11.5px} #main-column #Journal .hr-guide32 .hr-otd .sw{flex:none;width:16px;height:16px;margin-top:2px;border-radius:3px} #main-column #Journal .hr-guide32 .hr-otd .sw.a{background:var(--ca)}#main-column #Journal .hr-guide32 .hr-otd .sw.c{background:var(--cc)}#main-column #Journal .hr-guide32 .hr-otd .sw.d{background:var(--cd)}#main-column #Journal .hr-guide32 .hr-otd .sw.e{background:var(--ce)} #main-column #Journal .hr-guide32 .hr-otd figcaption{margin-top:8px;color:var(--s);font-size:11.5px} #main-column #Journal .hr-guide32 .hr-otd .legend{letter-spacing:0} #main-column #Journal .hr-guide32 .hr-otd .map.cmp .legend small{display:none} #main-column #Journal .hr-guide32 .hr-otd .map.stk{display:flex;flex-direction:column}#main-column #Journal .hr-guide32 .hr-otd .map.stk .lg{order:-1;position:static;width:auto;margin:0 0 12px} #main-column #Journal .hr-guide32 .hr-otd-notes{margin:0;padding:14px 18px;list-style:none;background:var(--soft);color:#111;font-size:13px;line-height:1.8} #main-column #Journal .hr-guide32 .hr-otd-notes li{position:relative;margin:5px 0;padding:0 0 0 16px;list-style:none} #main-column #Journal .hr-guide32 .hr-otd-notes li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;background:var(--k)} #main-column #Journal .hr-guide32 .hr-otd em{font-style:normal;font-weight:700;color:#d0646c;background:linear-gradient(transparent 62%,#e3d6d0 62%)} /* 強調は下線＋淡い赤の文字（2026-10-15 高見さん） */ #main-column #Journal .hr-guide32 .hr-otd-ex{display:block;margin-top:2px;padding-left:1em;color:#555}#main-column #Journal .hr-guide32 .hr-otd-ex span{display:block;padding-left:3em;text-indent:-3em} #main-column #Journal .hr-guide32 .hr-otd-tel{margin:14px 0 0;padding:12px 16px;border:1px solid var(--l);font-size:13px;line-height:1.7} #main-column #Journal .hr-guide32 .hr-otd-tel p{margin:0} #main-column #Journal .hr-guide32 .hr-otd-tel a{color:var(--t);font:700 20px/1.3 "Helvetica Neue",Arial,sans-serif;font-family:"Helvetica Neue",Arial,sans-serif!important;letter-spacing:.04em;text-decoration:none} @media(min-width:641px) and (max-width:800px){#main-column #Journal .hr-guide32 .hr-otd .lg{top:2px;width:calc(70% - 12px);padding:8px 12px}#main-column #Journal .hr-guide32 .hr-otd .legend small{display:none}#main-column #Journal .hr-guide32 .hr-otd .legend{gap:5px 14px;font-size:11px}#main-column #Journal .hr-guide32 .hr-otd .legend li{white-space:nowrap}#main-column #Journal .hr-guide32 .hr-otd figcaption{margin-top:5px;font-size:11px}} @media(max-width:640px){ #main-column #Journal .hr-guide32 .hr-otd{font-size:13px} #main-column #Journal .hr-guide32 .hr-otd .ms.desk{display:none}#main-column #Journal .hr-guide32 .hr-otd .ms.mob{display:block} #main-column #Journal .hr-guide32 .hr-otd .map{margin-bottom:14px} #main-column #Journal .hr-guide32 .hr-otd .lg{left:8px;top:2.46vw;width:calc(75vw - 8px);min-height:34vw;padding:1.3vw 2vw;display:flex;flex-direction:column;justify-content:center} #main-column #Journal .hr-guide32 .hr-otd .legend{grid-template-columns:1fr;gap:.6vw;font-size:2.6vw;line-height:1.3} #main-column #Journal .hr-guide32 .hr-otd .legend li{gap:5px} #main-column #Journal .hr-guide32 .hr-otd .legend small{font-size:2.35vw;line-height:1.3} #main-column #Journal .hr-guide32 .hr-otd .legend small{display:block;margin-left:0} #main-column #Journal .hr-guide32 .hr-otd .legend .pc{display:none} #main-column #Journal .hr-guide32 .hr-otd .sw{width:2.9vw;height:2.9vw;margin-top:.4vw;border-radius:2px} #main-column #Journal .hr-guide32 .hr-otd figcaption{margin-top:.6vw;font-size:2.2vw;line-height:1.3} /* 地図の幅を基準にする（PCのブラウザのスクロールバーなどで画面幅とずれないように）。対応していないブラウザは上の vw のまま */ @supports(container-type:inline-size){#main-column #Journal .hr-guide32 .hr-otd .map{container-type:inline-size} #main-column #Journal .hr-guide32 .hr-otd .lg{left:8px;top:2.46cqw;width:calc(75cqw - 8px);min-height:34cqw;padding:1.3cqw 2cqw;display:flex;flex-direction:column;justify-content:center} #main-column #Journal .hr-guide32 .hr-otd .legend{grid-template-columns:1fr;gap:.6cqw;font-size:2.6cqw;line-height:1.3} #main-column #Journal .hr-guide32 .hr-otd .legend small{font-size:2.35cqw;line-height:1.3} #main-column #Journal .hr-guide32 .hr-otd .sw{width:2.9cqw;height:2.9cqw;margin-top:.4cqw;border-radius:2px} #main-column #Journal .hr-guide32 .hr-otd figcaption{margin-top:.6cqw;font-size:2.2cqw;line-height:1.3} } #main-column #Journal .hr-guide32 .hr-otd-notes{padding:12px 14px;font-size:12.5px}} #main-column #Journal .hr-guide32 .hr-otd{max-width:none} /* ガイドではページ幅いっぱい */ /* ガイドでは肌色をやめ、ガイドの灰色・黒に合わせる（2026-10-16 高見さん） */ #main-column #Journal .hr-guide32 .hr-otd{--soft:var(--tint);--k:var(--blk);--l:#e2e2e2} #main-column #Journal .hr-guide32 .hr-otd .lg{border-color:#e2e2e2} #main-column #Journal .hr-guide32 .hr-otd-ttl{display:inline-block;margin:6px 0 10px;padding:1px 12px;background:var(--blk);border:0;color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.08em} #main-column #Journal .hr-guide32 .hr-otd-notes{color:inherit} #main-column #Journal .hr-guide32 .hr-otd em{color:inherit;background:linear-gradient(transparent 62%,#d6d6d6 62%)} /* 配達時間帯の時計（よくあるご質問と同じ形 2026-10-18） */ #main-column #Journal .hr-guide32 .htime{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:20px 12px;margin:0 0 22px;padding:20px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #main-column #Journal .hr-guide32 .htime li{flex:0 0 calc(20% - 10px);min-width:0;margin:0;padding:0;list-style:none;text-align:center;line-height:1.4} #main-column #Journal .hr-guide32 .htime svg{display:block;width:100%;max-width:92px;height:auto;margin:0 auto 10px} #main-column #Journal .hr-guide32 .htime .fc{fill:none;stroke:#a39aa6;stroke-width:1.4} #main-column #Journal .hr-guide32 .htime .sl{fill:#f4b183} #main-column #Journal .hr-guide32 .htime .tk circle{fill:#7d737f} #main-column #Journal .hr-guide32 .htime .ct{fill:var(--ink)} #main-column #Journal .hr-guide32 .htime .nm{display:block;font-size:11px;color:var(--sub);letter-spacing:.08em;min-height:1.4em} #main-column #Journal .hr-guide32 .htime .tm{display:block;font-size:15px;color:var(--ink);letter-spacing:.04em;white-space:nowrap} @media (max-width:600px){#main-column #Journal .hr-guide32 .htime{justify-content:flex-start;gap:14px 8px;padding:16px 0}#main-column #Journal .hr-guide32 .htime li{flex:0 0 calc(50% - 4px);display:flex;align-items:center;gap:10px;text-align:left}#main-column #Journal .hr-guide32 .htime svg{flex:none;width:34px;margin:0}#main-column #Journal .hr-guide32 .htime .nm{display:none}#main-column #Journal .hr-guide32 .htime .tm{font-size:14px}} #main-column #Journal .hr-guide32 .htime-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:0 0 22px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #main-column #Journal .hr-guide32 .htime-wrap .htime{margin:0;padding:0;border:0;order:-1} #main-column #Journal .hr-guide32 .htime-wrap .htime{gap:16px 6px}#main-column #Journal .hr-guide32 .htime-wrap .htime li{flex-basis:calc(20% - 5px)}#main-column #Journal .hr-guide32 .htime-wrap .htime svg{max-width:72px}#main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:13.5px;letter-spacing:0} #main-column #Journal .hr-guide32 .htime-txt{margin:0;font-size:14px;line-height:1.9} @media (max-width:640px){#main-column #Journal .hr-guide32 .htime-wrap{grid-template-columns:1fr;gap:16px;padding:16px 0}#main-column #Journal .hr-guide32 .htime-wrap .htime{order:0}#main-column #Journal .hr-guide32 .htime-txt{font-size:13.5px}} @media (min-width:641px) and (max-width:960px){#main-column #Journal .hr-guide32 .htime-wrap{grid-template-columns:6fr 5fr;gap:20px}#main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:12px}} @media (max-width:600px){#main-column #Journal .hr-guide32 .htime-wrap .htime li{flex-basis:calc(50% - 4px)}} /* ===== 文字サイズの統一（2026-10-19 スウィートマミー基準：本文14px・リード15px・注記13px・最小12px。元に戻すときはこの段落を消す） ===== */ #main-column #Journal .hr-guide32{font-size:14px} #main-column #Journal .hr-guide32 .hero h1{font-size:clamp(36px,5.6vw,56px)} #main-column #Journal .hr-guide32 .hero .lead{font-size:15px} #main-column #Journal .hr-guide32 .jump a{font-size:14px} #main-column #Journal .hr-guide32 h2{font-size:28px} #main-column #Journal .hr-guide32 h3{font-size:19px} #main-column #Journal .hr-guide32 h4, #main-column #Journal .hr-guide32 .hr-otd-ttl{font-size:13px} #main-column #Journal .hr-guide32 table{font-size:14px} #main-column #Journal .hr-guide32 .fax-link-txt{font-size:14px} #main-column #Journal .hr-guide32 .hr-otd{font-size:14px} #main-column #Journal .hr-guide32 .hr-otd .legend{font-size:13px} #main-column #Journal .hr-guide32 .hr-otd .legend small, #main-column #Journal .hr-guide32 .hr-otd figcaption{font-size:12px} #main-column #Journal .hr-guide32 .htime .nm{font-size:12px} #main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:14px} #main-column #Journal .hr-guide32 .htime-txt{font-size:14px} @media (min-width:641px) and (max-width:960px){#main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:13px}} /* 地図の凡例：地図の左上の空き（地図に重ねる）。字は小さくしない。641〜800pxは2列、640px以下は1列で地域名を省く（地図で分かるため） */ @media (min-width:641px) and (max-width:800px){ #main-column #Journal .hr-guide32 .hr-otd .legend{font-size:13px;gap:6px 16px} #main-column #Journal .hr-guide32 .hr-otd figcaption{font-size:12px} } @media (max-width:640px){ #main-column #Journal .hr-guide32 .hr-otd .lg{width:calc(76% - 8px);min-height:0;padding:8px 10px} #main-column #Journal .hr-guide32 .hr-otd .legend{grid-template-columns:1fr;gap:5px;font-size:13px;line-height:1.4} #main-column #Journal .hr-guide32 .hr-otd .legend small{display:none} #main-column #Journal .hr-guide32 .hr-otd .legend li{gap:6px} #main-column #Journal .hr-guide32 .hr-otd .sw{width:12px;height:12px;margin-top:3px} #main-column #Journal .hr-guide32 .hr-otd figcaption{margin-top:6px;font-size:12px;line-height:1.4} } /* 時間指定の円を大きく（10/19 高見さん） */ #main-column #Journal .hr-guide32 .htime svg{max-width:104px} #main-column #Journal .hr-guide32 .htime-wrap .htime svg{max-width:84px} /* スマホもPCと同じく5つ横並び・円の下に時間（10/19 高見さん。ここだけ12px） */ @media (max-width:600px){ #main-column #Journal .hr-guide32 .htime, #main-column #Journal .hr-guide32 .htime-wrap .htime{justify-content:space-between;gap:12px 4px} #main-column #Journal .hr-guide32 .htime li, #main-column #Journal .hr-guide32 .htime-wrap .htime li{flex:0 0 calc(20% - 4px);display:block;text-align:center} #main-column #Journal .hr-guide32 .htime svg, #main-column #Journal .hr-guide32 .htime-wrap .htime svg{width:100%;max-width:56px;margin:0 auto 6px} #main-column #Journal .hr-guide32 .htime .nm{display:block;font-size:12px;letter-spacing:0} #main-column #Journal .hr-guide32 .htime .tm, #main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:12px;letter-spacing:0;white-space:nowrap} } @media (max-width:400px){#main-column #Journal .hr-guide32 .htime .nm, #main-column #Journal .hr-guide32 .htime .tm, #main-column #Journal .hr-guide32 .htime-wrap .htime .tm{font-size:11px}} @media (max-width:640px){ #main-column #Journal .hr-guide32 .hero h1{font-size:36px} #main-column #Journal .hr-guide32 .hero .lead{font-size:15px} #main-column #Journal .hr-guide32 .jump a{font-size:14px} #main-column #Journal .hr-guide32 h2{font-size:24px} #main-column #Journal .hr-guide32 .hr-otd{font-size:14px} #main-column #Journal .hr-guide32 .hr-otd-notes{font-size:13px} #main-column #Journal .hr-guide32 .htime-txt{font-size:14px} } /* サイトのヘッダー（高さ64px）がスクロールで上に固定されるので、目次はその下に止め、飛んだ先の見出しも隠れないようにする（2026-10-26） */ @media(min-width:641px){#main-column #Journal .hr-guide32 .jump{top:64px}#main-column #Journal .hr-guide32 section{scroll-margin-top:210px}} /* ===== 10/27 見出しを A の形にそろえる（仮バナー → 英字 → ページ名56px → リード）。元に戻すときはこの段落を消す ===== */ #main-column #Journal .hr-guide32 .hr-a-head{max-width:1200px;margin:0 auto;padding:24px 0 8px;text-align:left} #main-column #Journal .hr-guide32 .hr-a-head .hr-hero{margin:0 0 40px} #main-column #Journal .hr-guide32 .hr-a-head .hr-hero img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:8px} #main-column #Journal .hr-guide32 .hr-a-en{display:block;margin:0 0 8px;color:#c97782;font-family:"Helvetica Neue", Arial, sans-serif!important;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:.3em;text-transform:uppercase} #main-column #Journal .hr-guide32 .hr-a-title{display:block;margin:0 0 16px;padding:0;border:0;color:#2b2b2b;font-size:56px;font-weight:700;line-height:1.35;letter-spacing:.08em;word-break:auto-phrase;text-wrap:balance;text-align:left} #main-column #Journal .hr-guide32 .hr-a-title::before, #main-column #Journal .hr-guide32 .hr-a-title::after{content:none;display:none} #main-column #Journal .hr-guide32 .hr-a-lead{margin:0 0 32px;color:#6b6b6b;font-size:15px;line-height:1.9;text-align:left} @media (max-width:639px){#main-column #Journal .hr-guide32 .hr-a-title{font-size:min(36px,9.2vw);letter-spacing:0}} #main-column #Journal .hr-guide32 .hr-temp-banner::before{content: ""; position: absolute; inset: 12px; border: 1px solid rgba(43, 43, 43, 0.18); border-radius: 4px; pointer-events: none;} #main-column #Journal .hr-guide32 .hr-temp-banner__brand{margin: 0 0 10px; color: #6b6b6b; font-family: "Helvetica Neue", Arial, sans-serif!important; font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase;} #main-column #Journal .hr-guide32 .hr-temp-banner__en{margin: 0; font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif!important; font-size: clamp(32px, 5.2vw, 64px); font-style: italic; font-weight: 500; letter-spacing: 0.04em; line-height: 1.05;} #main-column #Journal .hr-guide32 .hr-temp-banner__ja{display: flex; align-items: center; gap: 14px; margin: 12px 0 0; font-size: clamp(14px, 1.5vw, 18px); font-weight: 700; letter-spacing: 0.2em;} #main-column #Journal .hr-guide32 .hr-temp-banner__ja::before, #main-column #Journal .hr-guide32 .hr-temp-banner__ja::after{content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.5;} #main-column #Journal .hr-guide32 .hr-temp-banner__text{margin: 8px 0 0; color: #6b6b6b; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: 0.08em; text-wrap: balance;} @media (max-width: 639px){#main-column #Journal .hr-guide32 .hr-temp-banner{aspect-ratio: auto; min-height: 0; padding: 34px 22px;} #main-column #Journal .hr-guide32 .hr-temp-banner::before{inset: 8px;} #main-column #Journal .hr-guide32 .hr-temp-banner__brand{margin-bottom: 6px; font-size: 12px; letter-spacing: 0.3em;} #main-column #Journal .hr-guide32 .hr-temp-banner__en{font-size: 30px;} #main-column #Journal .hr-guide32 .hr-temp-banner__ja{gap: 10px; margin-top: 8px; font-size: 14px; letter-spacing: 0.12em;} #main-column #Journal .hr-guide32 .hr-temp-banner__ja::before, #main-column #Journal .hr-guide32 .hr-temp-banner__ja::after{width: 18px;} #main-column #Journal .hr-guide32 .hr-temp-banner__text{font-size: 12px; letter-spacing: 0.04em;}}