.p-sakuhin * { box-sizing: border-box; }
.p-sakuhin .p-gallery__slider.u-mb--lll { margin-bottom: 2em !important; }
@media screen and (max-width: 767px) { .p-sakuhin .p-gallery__slider.u-mb--lll { margin-bottom: 1em !important; } }

.localnav { top: 0 !important; }

.sakuhinNavi { display: flex; flex-wrap: wrap; padding: 0 0 30px 0; border-bottom: 4px solid #000; margin-bottom: 80px; gap: 20px; }
@media screen and (max-width: 767px) { .sakuhinNavi { gap: 4vw; margin-bottom: 8vw; } }
.sakuhinNavi .sakuhinNaviHead { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-weight: bold; }
@media screen and (min-width: 768px) { .sakuhinNavi .sakuhinNaviHead { width: 160px; border-right: 2px solid #000; } }
@media screen and (max-width: 767px) { .sakuhinNavi .sakuhinNaviHead { width: 100%; font-size: 1.1rem; } }
.sakuhinNavi .sakuhinNaviList { width: calc(100% - 180px); }
@media screen and (max-width: 767px) { .sakuhinNavi .sakuhinNaviList { width: 100%; } }
.sakuhinNavi .sakuhinNaviList ul { display: flex; flex-wrap: wrap; gap: 10px; }
@media screen and (max-width: 767px) { .sakuhinNavi .sakuhinNaviList ul { gap: 3vw; } }
@media screen and (max-width: 767px) { .sakuhinNavi .sakuhinNaviList ul li { width: calc(50% - 1.5vw); } }
.sakuhinNavi .sakuhinNaviList ul li a { display: block; min-width: 143px; background-color: #FFF; color: #000; text-align: center; border: 1px solid #000; border-radius: 9999px; position: relative; padding: .2em 2em .2em 1.6em; font-size: 14px; letter-spacing: -1px; transition: all .3s ease; }
@media screen and (max-width: 767px) { .sakuhinNavi .sakuhinNaviList ul li a { width: 100%; min-width: inherit; } }
.sakuhinNavi .sakuhinNaviList ul li a::before, .sakuhinNavi .sakuhinNaviList ul li a::after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); transition: all .3s ease; }
.sakuhinNavi .sakuhinNaviList ul li a::before { right: .5em; width: 1.1em; height: 1.1em; border-radius: 50%; background-color: #000; }
.sakuhinNavi .sakuhinNaviList ul li a::after { right: 1em; width: .23em; height: .23em; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: translateY(-50%) rotate(45deg); }
.sakuhinNavi .sakuhinNaviList ul li a.current { background-color: #000; color: #FFF; text-decoration: none; }
.sakuhinNavi .sakuhinNaviList ul li a.current::before { background-color: #FFF; }
.sakuhinNavi .sakuhinNaviList ul li a.current::after { right: .8em; border-color: #000; width: .43em; transform: translateY(-50%) rotate(135deg); }
.sakuhinNavi .sakuhinNaviList ul li a:hover { background-color: #000; color: #FFF; text-decoration: none; }
.sakuhinNavi .sakuhinNaviList ul li a:hover::before { background-color: #FFF; }
.sakuhinNavi .sakuhinNaviList ul li a:hover::after { border-color: #000; }

.sakuhinBlock .sakuhinBox { padding-bottom: 80px; margin-bottom: 80px; border-bottom: 4px solid #333; }
@media screen and (max-width: 767px) { .sakuhinBlock .sakuhinBox { padding-bottom: 15vw; margin-bottom: 15vw; } }
.sakuhinBlock .sakuhinBox .photoArea { width: 100%; max-width: 600px; margin: 0 auto 1.8rem auto; text-align: center; }
.sakuhinBlock .sakuhinBox .photoArea .img { margin-bottom: 1.4rem; }
.sakuhinBlock .sakuhinBox .photoArea .img img { max-width: 600px; max-height: 600px; }
@media screen and (max-width: 767px) { .sakuhinBlock .sakuhinBox .photoArea .img img { max-width: 80vw; max-height: 80vw; } }
.sakuhinBlock .sakuhinBox .photoArea .name { font-weight: bold; font-size: 1rem; padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.sakuhinBlock .sakuhinBox .photoArea .title { font-size: 1.4rem; }
@media screen and (max-width: 767px) { .sakuhinBlock .sakuhinBox .photoArea .title { font-size: 1.2rem; } }
.sakuhinBlock .sakuhinBox .commentArea h3 { display: inline-block; background-color: #000; color: #FFF; padding: 2px 1rem; margin-bottom: .4rem; font-size: 1.1rem; }
@media screen and (max-width: 767px) { .sakuhinBlock .sakuhinBox .commentArea h3 { font-size: .9rem; } }
.sakuhinBlock .sakuhinBox .commentArea h4 { margin-bottom: .4rem; font-size: 1rem; }
@media screen and (max-width: 767px) { .sakuhinBlock .sakuhinBox .commentArea h4 { font-size: .9rem; } }
.sakuhinBlock .sakuhinBox .commentArea .text { font-size: .9rem; }
.sakuhinBlock .sakuhinBox .commentArea .text:not(:last-child) { margin-bottom: 3rem; }

#footer #pagetopBlock { transition: all 0.2s ease-in; }
@media screen and (min-width: 768px) { #footer #pagetopBlock.ups { bottom: 100px !important; } }
@media screen and (max-width: 767px) { #footer #pagetopBlock.ups { bottom: 33vw !important; } }

#pagetopBlockSP { display: none !important; }

.footerPnl { position: sticky; bottom: -140px; left: 0; width: 100%; background-color: #FFF; z-index: 98; padding: 20px 0; transition: all 0.2s ease-in; }
@media screen and (max-width: 767px) { .footerPnl { padding: 3vw; bottom: -50vw; } }
.footerPnl.fixed { bottom: 0; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); }
.footerPnl .footerPnlInner { max-width: 960px; margin: 0 auto; text-align: center; }
.footerPnl .footerPnlWrap { display: flex; flex-wrap: wrap; gap: 50px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap { flex-direction: column; gap: 3vw; } }
.footerPnl .footerPnlWrap li { width: calc(50% - 25px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li { width: 100%; } }
.footerPnl .footerPnlWrap li > p { margin-bottom: 10px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li > p { margin-bottom: 1vw; font-size: 3.4vw; } }
.footerPnl .footerPnlWrap li .linkBtnPremium { width: 100%; }
.footerPnl .footerPnlWrap li .linkBtnPremium a { padding: .4em 2.5em; width: 100%; min-width: 100%; font-size: 16px; }
.footerPnl .footerPnlWrap li .linkBtnPremium a small { font-size: 12px; }
@media screen and (max-width: 767px) { .footerPnl .footerPnlWrap li .linkBtnPremium a { min-height: 12vw; font-size: 3.6vw; }
  .footerPnl .footerPnlWrap li .linkBtnPremium a small { font-size: 3.2vw; } }
@media screen and (min-width: 768px) { .footerPnl .footerPnlWrap li .linkBtnPremium a { min-height: 60px; }
  .footerPnl .footerPnlWrap li .linkBtnPremium a span.pc { display: inline-block; } }
