@charset "utf-8";

/* common */
:root {
--color-txt: #000;
--color-txt2: #503100;
--color-txt3: #fff;
--color-name: #B57A1A;
--color-bg: #DAA700;
--color-catR: #A72612;
--color-catI: #A77F12;
--font-main: "Zen Old Mincho", serif;
--font-eng: "Outfit", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
font-size: clamp(13px, 1.31vw, 18px);
line-height: 1.6;
letter-spacing: 0.16rem;
}
a {
transition: 0.8s;
}

/* display */
.pcnone {
display: none;
}
@media screen and (max-width: 768px) {
.pcnone {
display: block;
}
.spnone {
display: none;
}
}

/* top */
#wrapper {
background-color: transparent;
}
.inner {
max-width: 1100px;
margin: 0 auto;
}
header {
position: relative;
}
.mv {
position: relative;
width: 100%;
overflow: hidden;
background-color: #f9f0d2; 
}
.mv h1 .mv_img {
margin: 0 auto;
width: 100vw;
}
.bg {
position: relative;
z-index: 2;
background: url("../images/bg_pc.png"), url("../images/bg2_pc.png");
background-size: 100% auto, 100% auto;
background-repeat: no-repeat, repeat-y;
background-position: center 0, center -38px;
padding-bottom: clamp(111px, 14.4vw, 277px);
margin: -2px auto 0;
}
.bg::before {
content: "";
display: block;
position: absolute;
top: -1.3%;
width: 45%;
height: 100%;
background: url("../images/bgparts.png") no-repeat center 0/100%;
}

/* loading */
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 9998;
background-color: #111;
width: 100%;
height: 100%;
display: block !important;
}
.sitename {
display: none; 
position: absolute;
top: 49%;
left: 54%;
transform: translate(-50%, -50%);
z-index: 9999; 
width: clamp(140px, 15.92vw, 286.63px);
}

/* header_menu */
.shop_header_block {
position: fixed;
top: 0;
z-index: 10;
width: 100%;
transition: 0.8s;
}
.shop_header_block:hover,
.shop_header_block.scrolled {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.shop_header_block:hover a:link,
.shop_header_block a:visited,
.shop_header_block .logo a:link p,
.shop_header_block .logo a:visited p {
color: var(--color-txt3);
transition: 0.8s;
}
.shop_header_block:hover a:link,
.shop_header_block:hover a:visited,
.shop_header_block:hover .logo a:link p,
.shop_header_block:hover .logo a:visited p,
.shop_header_block.scrolled a:link,
.shop_header_block.scrolled a:visited,
.shop_header_block.scrolled .logo a:link p,
.shop_header_block.scrolled .logo a:visited p {
color: var(--color-txt); 
}
.shop_header_block .wrap {
display: block;
width: 100%;
max-width: 1920px;
margin: 0 auto;
}
.shop_header_block .logo {
width: clamp(140px, 14.20vw, 194px); 
}
.shop_header_block .logo .logo_top {
width: clamp(140px, 14.20vw, 100%);
height: auto;
aspect-ratio: 215 / 37;
background-image: url("../images/logo_okunohosomichi_wht.png");
background-size: contain;
background-repeat: no-repeat;
transition: background-image 0.8s;
}
.shop_header_block .logo p {
font-size: clamp(11px, 1.17vw, 16px);
font-weight: bold;
}
.shop_header_block:hover .logo .logo_top,
.shop_header_block.scrolled .logo .logo_top {
background-image: url("../images/logo_okunohosomichi_hover.png");
}
.shop_header_block .gnav {
margin-left: 0;
width: 100%;
min-width: 769px;
}
.shop_header_block .gnav > ul {
flex-flow: row;
justify-content: center;
}
.shop_header_block .gnav > ul > li {
width: auto;
height: auto;line-height: 1.6;
padding: 12px 0;
}
.shop_header_block .gnav > ul > li > a {
display: block;
color: var(--color-txt3);
font-family: var(--font-main);
font-size: clamp(12px, 1vw, 18px);
font-weight: bold;
letter-spacing: 2px;
width: 100%;
padding: 1px clamp(12px, 1vw, 38px);
}
.shop_header_block .gnav > ul > li > a:hover {
color: #B88D01;
}
.shop_header_block .gnav > ul > li::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 1px;
height: 40%;
background: #fff;
transition: 0.8s;
}
.shop_header_block.scrolled .gnav > ul > li::before,
.shop_header_block:hover .gnav > ul > li::before {
background: var(--color-txt);
}
.shop_header_block .gnav > ul > li:first-child::before,
.shop_header_block .gnav > ul > li:nth-child(2)::before,
.shop_header_block .gnav > ul > li:last-child::before {
content: none;
}
.shop_header_block .gnav > ul > li:last-child {
width: clamp(108.08px, 14.05vw, 192px);
padding: 0;
}
.shop_header_block .gnav > ul > li:last-child a {
padding: 0;
}
.shop_header_block .gnav > ul > li:last-child > a .btn_hover {
width: clamp(108.08px, 14.05vw, 192px);
height: auto;
aspect-ratio: 192 / 51;
background-image: url("../images/btn_cart.png");
background-size: contain;
background-repeat: no-repeat;
transition: background-image 0.8s;
}
.shop_header_block .gnav > ul > li:last-child > a .btn_hover:hover,
.shop_header_block:hover .gnav > ul > li:last-child > a .btn_hover:hover,
.shop_header_block.scrolled .gnav > ul > li:last-child > a .btn_hover:hover {
background-image: url("../images/btn_cart_hover.png");
}
.shop_header_block:hover .gnav > ul > li:last-child > a .btn_hover,
.shop_header_block.scrolled .gnav > ul > li:last-child > a .btn_hover {
background-image: url("../images/btn_cart_scrolled.png");
}
.shop_header_block .gnav .menu {
top: 100%;
background: rgb(255 255 255);
transition: 0.8s;
}
.shop_header_block .gnav .menu ul li {
width: 100%;
font-family: var(--font-main);
border-bottom: solid 1px var(--color-txt);
}
.shop_header_block .gnav .menu ul li a {
display: block;
color: var(--color-txt);
font-weight: bold;
letter-spacing: 1.6px;
padding: 10px 10px;
transition: 0.8s;
}
.shop_header_block .gnav .menu ul li a:hover {
color: #B88D01;
}

/* item */
.item_cat {
position: relative;
z-index: 3;
text-align: center;
padding: clamp(84.59px, 11vw, 211.2px) 0 clamp(13.84px, 1.8vw, 34.56px);
}
.item_bg {
background: rgba(255,255,255,0.5);
border-top: 1px solid var(--color-bg);
border-bottom: 1px solid var(--color-bg);
}
.item_list {
position: relative;
font-weight: bold;
}
.item_list dt {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.item_list dt img {
width: auto;
max-height: clamp(110px, 10.13vw, 160px);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.item_list .item_txt {
color: var(--color-txt2);
padding: clamp(64px, 5.27vw, 100px) 2% clamp(12.30px, 1.4vw, 40px);
}
.item_list .item_txt span {
display: block;
margin-bottom: clamp(8px, 0.73vw, 10px);
}
.item_list .slider_box {
margin-bottom: clamp(25.89px, 3.36vw, 72px);
padding: 0 48px;
}
.item_list .slider_box .slick-prev,
.item_list .slider_box .slick-next {
top: 40%;
width: 40px;
height: 40px;
}
.item_list .slider_box .slick-prev::before,
.item_list .slider_box .slick-next::before {
content: none;
}
.item_list .slider_box .slick-prev {
left: -40px;
transform: translate(-6px, -50%);
}
.item_list .slider_box .slick-next {
right: -40px;
}
.item_list .slider_box .item_img {
position: relative;
}
.item_list .slider_box .package {
position: absolute;
right: 9%;
bottom: 2%;
max-height: clamp(100px, 11.80vw, 161.27px);
}
.cat2 .item_list .slider_box .package {
right: 2%;
bottom: 4%;
}
.cat3 .item_list .slider_box .package {
right: 1%;
bottom: 4%;
max-height: clamp(90px, 10.61vw, 145px);
}
.item_list .slider_box .item_name {
color: var(--color-name);
font-size: clamp(16px, 1.75vw, 24px);
}
.item_list .slider_box .price {
text-align: right;
font-size: clamp(12px, 1.46vw, 20px);
margin-right: 1.4rem;
}
.item_list .slider_box .price span {
font-size: 13px;
}

/* menu_slider */
.img_slider {
width: 100%;
overflow: hidden;
}
.img_slider .img_slide_track {
display: flex;
width: 200%; 
animation: scroll 90s linear infinite;
}
.img_slider .slide img {
width: 100%;
height: auto;
display: block;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

/* recipe */
.cat_recipe {
background: url("../images/catRecipe_bg.png") no-repeat top left/cover;
padding: clamp(63.61px, 8.27vw, 158.82px) 0 clamp(54.04px, 7.02vw, 134.93px);
}
.cat_recipe .inner {
display: flex;
justify-content: center;
align-items: center;
gap: 5%;
max-width: 1366px;
}
.cat_recipe .img {
text-align: center;
width: calc((100% - 15%) / 2);
}
.cat_recipe .img img {
width: 100%;
max-width: clamp(532px, 38.94vw, 80%);
}
.cat_recipe .info {
text-align: center;
width: calc((100% - 15%) / 2);
}
.cat_recipe .info dt {
color: var(--color-catR);
font-size: clamp(24px, 2.34vw, 32px);
font-weight: bold;
letter-spacing: 0.35rem;
margin-bottom: clamp(12px, 0.87vw, 16.86px);
}
.cat_recipe .info dd.txt {
text-align: left;
letter-spacing: 0;
max-width: clamp(548px, 40.11vw, 80%);
margin: 0 auto clamp(26px, 1.9vw, 36.54px);
}
.cat_recipe .info dd.txt span {
display: block;
text-align: center;
font-size: clamp(16px, 1.75vw, 24px);
font-weight: bold;
letter-spacing: 0.21rem;
margin-bottom: 8px;
}
.cat_recipe .info dd.btn_box {
background: var(--color-catR);
width: clamp(180.56px, 23.48vw, 320.8px);
border-radius: 8px;
padding: clamp(13px, 2%, 24.3px) clamp(4.69px, 6.61vw, 11.71px);
margin: 0 auto clamp(32px, 3.51vw, 67.46px);
transition: 0.6s;
}
.cat_recipe .info dd.btn_box .btn {
display: block;
align-content: center;
color: var(--color-txt3);
font-size: clamp(14px, 1.46vw, 20px);
width: 100%;
height: 100%;
}
.cat_recipe .info dd.btn_box:hover {
background: #891200;
}
.cat_recipe .info dd.youtube span {
display: block;
font-size: clamp(16px, 1.75vw, 24px);
font-weight: bold;
}
.cat_recipe .info dd.youtube span::before {
content: "";
display: inline-block;
position: relative;
top: 4px;
background: url("../images/catRecipe_parts1.png") no-repeat center/100%;
width: clamp(18px, 1.9vw, 26px);
height: clamp(24px, 2.34vw, 32px);
margin-right: 8px;
}
.cat_recipe .info dd.youtube span::after {
content: "";
display: inline-block;
position: relative;
top: 8px;
background: url("../images/catRecipe_parts2.png") no-repeat center/100%;
width: clamp(18px, 1.9vw, 26px);
height: clamp(24px, 2.34vw, 32px);
margin-left: 8px;
}

/* inn */
.cat_inn {
background: url("../images/catInn_bg.png") no-repeat top left/cover;
padding: clamp(73.18px, 9.51vw, 182.72px) 0;
}
.cat_inn .inner {
max-width: 1920px;
}
.cat_inn h2 {
color: var(--color-catI);
text-align: center;
font-size: clamp(24px, 2.34vw, 32px);
margin-bottom: clamp(40px, 5.27vw, 101.2px);
}
.cat_inn .inn_about {
display: flex;
justify-content: center;
align-items: center;
gap: 66px;
width: 80%;
margin: 0 auto clamp(100px, 12.81vw, 245.97px);
}
.cat_inn .inn_about.inn2 {
flex-direction: row-reverse;
gap: 32px;
margin-bottom: 0;
}
.cat_inn .inn_about .img {
display: flex;
flex-wrap: wrap;
gap: 16px;
width: calc((100% - 66px) * 0.55);
}
.cat_inn .inn_about.inn2 .img {
width: calc((100% - 32px) * 0.5);
}
.cat_inn .inn_about .img li:nth-child(1) {
width: 100%;
}
.cat_inn .inn_about .img li:nth-child(n+2) {
width: calc((100% - 32px) / 3);
}
.cat_inn .inn_about.inn2 .img li:nth-child(n+2) {
width: calc((100% - 16px) / 2);
}
.cat_inn .inn_about .info {
letter-spacing: 0.1rem;
width: calc((100% - 66px) * 0.45);
}
.cat_inn .inn_about.inn2 .info {
width: calc((100% - 32px) * 0.5);
}
.cat_inn .inn_about .info dt {
text-align: center;
font-size: clamp(24px, 2.34vw, 32px);
font-weight: bold;
margin-bottom: clamp(22px, 1.61vw, 30.92px);
}
.cat_inn .inn_about .info dt span { 
display: block;
font-size: clamp(15px, 1.75vw, 24px);
}
.cat_inn .inn_about .info dt img {
display: block;
max-width: clamp(220px, 22.62vw, 434.31px);
margin: clamp(14px, 1.61vw, 22px) auto 0;
}
.cat_inn .inn_about.inn2 .info dt .inn_name {
display: flex;
justify-content: center;
align-items: center;
gap: 37px;
}
.cat_inn .inn_about.inn2 .info dt .inn_name span {
font-size: clamp(24px, 2.34vw, 32px);
}
.cat_inn .inn_about.inn2 .info dt img {
max-width: 144px;
}
.cat_inn .inn_about .info dd.txt {
font-weight: 600;
margin-bottom: clamp(40px, 2.92vw, 56.22px);
}
.cat_inn .inn_about .info dd.btn_box {
background: var(--color-bg);
width: clamp(180.56px, 23.48vw, 320.8px);
border-radius: 8px;
padding: clamp(13px, 2%, 24.3px) clamp(4.69px, 6.61vw, 11.71px);
margin: 0 auto;
transition: 0.6s;
}
.cat_inn .inn_about .info dd.btn_box .btn {
display: block;
align-content: center;
color: var(--color-txt3);
text-align: center;
font-size: clamp(14px, 1.46vw, 20px);
width: 100%;
height: 100%;
}
.cat_inn .inn_about .info dd.btn_box:hover {
background: #B88D01;
}

/* footer */
footer {
color: var(--color-txt3);
font-size: clamp(12px, 1.17vw, 16px);
text-align: center;
background: url("../images/footer_bg.png") no-repeat left top/cover;
}
footer .inner {
max-width: 1100px;
padding: 0 4%;
margin: 0 auto;
}
footer p {
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 0.2rem;
padding: clamp(38.84px, 5.05vw, 69px) 0;
}
footer p img {
vertical-align: center;
width: clamp(121.03px, 15.73vw, 215px);
margin-left: 42px;
margin-right: 30px;
}
footer p span {
font-size: clamp(16px, 1.75vw, 24px);
}
footer ul {
display: flex;
justify-content: space-between;
align-items: center;
}
footer .footer_nav {
margin-bottom: clamp(22.51px, 2.92vw, 40px);
}
footer .footer_nav li:last-child {
display: block;
opacity: none;
width: clamp(21.95px, 2.85vw, 54.81px);
height: clamp(23.08px, 3.00vw, 57.62px);
transition: 0.6s;
}
footer .footer_nav li:last-child .btn_hover {
width: 100%;
height: 100%;
background-image: url("../images/btn_top.png");
background-size: contain;
background-repeat: no-repeat;
transition: background-image 0.6s;
}
footer .footer_nav li:last-child .btn_hover:hover {
background-image: url("../images/btn_top_hover.png");
}
footer .footer_lnk {
justify-content: center;
gap: 8%;
margin-bottom: clamp(47.28px, 6.14vw, 84px);
}
footer ul li a:link,
footer ul li a:visited {
color: var(--color-txt3);
}
footer ul li a:hover {
color: #B88D01;
}
footer .copyright {
font-size: clamp(12px, 0.87vw, 16px);
padding-bottom: clamp(20.26px, 2.63vw, 36px);
}

/* animation */
.fade {
opacity: 0;
transform: translateY(20px);
transition: opacity 1.4s, transform 1.4s;
}
.fade.is-show {
opacity: 1;
transform: translateY(0);
}

@media screen and (min-width: 768px) {
#sub-column {
display: block;
}
}
@media screen and (min-width: 769px) {
#sub-column {
display: none;
}
}
/* SP */
@media screen and (max-width: 768px) {
.bg {
background: url("../images/bg_sp.png");
background-size: 100% auto;
background-repeat: repeat-y;
background-position: center -42px;
}
.bg::before {
top: -0.3%;
width: 50%;
}
.sitename {
content: url("../images/ttl_main_sp.png");
top: 30%;
left: 50%;
width: auto;
height: 35%;
}
.cat_recipe .inner,
.cat_inn .inn_about,
.cat_inn .inn_about.inn2 {
flex-direction: column;
}
.cat_recipe .info,
.cat_recipe .img,
.cat_inn .inn_about .img, 
.cat_inn .inn_about .info,
.cat_inn .inn_about.inn2 .img, 
.cat_inn .inn_about.inn2 .info {
width: 100%;
}
.cat_inn .inn_about .img.spnone,
.cat_inn .inn_about.inn2 .img.spnone {
display: none;
}
.shop_header_block:hover,
.shop_header_block.scrolled {
background-color: transparent;
box-shadow: none;
}
.item_list dt img {
max-height: clamp(100px, 20vw, 160px);
}
.item_list .item_txt {
text-align: left;
font-size: clamp(16px, 4.5vw, 20px);
letter-spacing: 0.04rem;
padding: clamp(60px, 16%, 90px) 5.5% clamp(20px, 4%, 40px);
}
.item_list .item_txt span {
text-align: center;
}
.item_list .slider_box:has(li:nth-child(2)) {
padding: 0 0 0 8%;
}
.item_list .slider_box:has(li:nth-child(2)) .slick-list {
padding: 0 10% 0 0 !important;
}
.item_list .slider_box .slick-prev,
.item_list .slider_box .slick-next {
top: 28%;
}
.item_list .slider_box .slick-prev {
left: -7%;
transform: translate(0, -50%);
}
.item_list .slider_box .slick-next {
right: 1%;
}
.item_list .slider_box .package {
position: absolute;
right: 9%;
bottom: 2%;
max-height: clamp(145px, 38.70vw, 297.2px);
}
.cat3 .item_list .slider_box .package {
right: 1%;
bottom: 4%;
max-height: clamp(145px, 38.70vw, 297.2px);
}
.item_list .slider_box .item_name {
font-size: clamp(22px, 4.16vw, 32px);
}
.item_list .slider_box .price {
font-size: clamp(18px, 3.64vw, 28px);
}
.item_list .slider_box:has(li:nth-child(2)) .slick-dots {
padding-right: 10%;
}
.item_list .slider_box .slick-dots li {
margin: 0;
}
.item_list .slider_box .slick-dots li.slick-active button:before {
opacity: 1;
color: var(--color-bg);
}
.item_list .slider_box .slick-dots li button:before {
font-size: 32px;
line-height: 16px;
opacity: 1;
color: #D9D9D9;
}
.item_list .slider_box .btn_box {
background: var(--color-bg);
border-radius: 8px;
transition: 0.6s;
margin: 8% auto 2%;
}
.item_list .slider_box .btn_box .btn {
display: block;
align-content: center;
color: var(--color-txt3);
text-align: center;
width: 100%;
height: 100%;
}
.item_list .slider_box:has(li:nth-child(2)) .btn_box {
padding: clamp(16px, 4%, 20px) clamp(4.69px, 6.61vw, 11.71px) clamp(16px, 4%, 20px) 4%;
}
.item_list .slider_box .slick-dotted.slick-slider {
margin-bottom: clamp(60px, 1.6vw, 122.88px);
}
.img_slider .img_slide_track {
display: flex;
width: max-content; 
animation: scroll 50s linear infinite;
}
.img_slider .slide {
flex: 0 0 85vw;
}
.cat_recipe {
background: url("../images/catRecipe_bg_sp.png") no-repeat top left/cover;
padding: clamp(91.5px, 24.4vw, 187.39px) 8% clamp(87.48px, 23.33vw, 179.19px);
}
.cat_recipe .info dt {
font-size: clamp(30px, 5.46vw, 42px);
margin-bottom: clamp(22.98px, 6.13vw, 47.10px);
}
.cat_recipe .info dd:nth-child(2) {
margin-bottom: clamp(18.975px, 5.06vw, 38.91px);
}
.cat_recipe .info dd.txt,
.cat_inn .inn_about .info dd.txt {
font-size: clamp(20px, 3.12vw, 24px);
max-width: 100%;
}
.cat_recipe .info dd.txt span {
font-size: clamp(24px, 4.8vw, 36px);
letter-spacing: 0.1rem;
margin-bottom: clamp(18.975px, 5.06vw, 38.91px);
}
.cat_recipe .info dd.btn_box,
.item_list .slider_box .btn_box,
.cat_inn .inn_about .info dd.btn_box {
width: clamp(248px, 66.13vw, 400px);
padding: clamp(16px, 4%, 20px) clamp(4.69px, 6.61vw, 11.71px);
}
.cat_recipe .info dd.btn_box .btn,
.item_list .slider_box .btn_box .btn,
.cat_inn .inn_about .info dd.btn_box .btn {
font-size: clamp(18px, 2.66vw, 20px);
}
.cat_recipe .info dd.youtube span {
font-size: clamp(20px, 3.64vw, 28px);
}
.cat_inn {
padding: clamp(82.5px, 2.2vw, 168.96px) 0;
}
.cat_inn h2 {
font-size: clamp(30px, 5.46vw, 42px);
margin-bottom: clamp(39.97px, 10.66vw, 81.91px);
}
.cat_inn .inn_about {
margin-bottom: clamp(80px, 17.06vw, 131.07px);
}
.cat_inn .inn_about .info dt {
font-size: clamp(30px, 5.46vw, 42px);
}
.cat_inn .inn_about .info dt span { 
font-size: clamp(24px, 4.94vw, 38px);
}
.cat_inn .inn_about.inn2 .info dt span { 
font-size: clamp(20px, 4.94vw, 38px);
}
.cat_inn .inn_about.inn2 .info dt div {
gap: 4%;
}
.cat_inn .inn_about.inn2 .info dt .inn_name span {
font-size: clamp(25px, 5.46vw, 42px);
line-height: 1.4;
}
.cat_inn .inn_about .info dt img {
max-width: clamp(240px, 41.66vw, 320px);
}
.cat_inn .inn_about.inn2 .info dt img {
max-width: clamp(79.98px, 21.33vw, 163.83px);
margin-right: 0;
}
.cat_inn .inn_about .img,
.cat_inn .inn_about .info dd.txt  {
margin-bottom: clamp(22px, 1.61vw, 30.92px);
}
.cat_inn .inn_about .info dd.btn_box {
margin: 0 auto;
}
footer {
padding-top: clamp(20.26px, 2.63vw, 36px);
}
footer p {
display: block;
font-size: clamp(15px, 3.2vw, 24px);
padding: 0 8% clamp(22.99px, 6.13vw, 46px);
}
footer p img {
width: clamp(180px, 44.2vw, 332px);
margin-left: 0;
margin-right: 0;
margin-bottom: clamp(8px, 2.13vw, 16.38px);
}
footer p span {
display: block;
font-size: clamp(24px, 4.8vw, 36px);
letter-spacing: 6px;
}
#sub-column {
padding: 0;
}
#sub-column .category,
#sub-column .category nav {
margin-bottom: 0;
}
#sub-column.spsDrawerOpen {
z-index: 9;
}
#wrapper.spsDrawerOpen::before {
z-index: 8;
}
.shop_header_block #header-nav-drawer.spsDrawerOpen span::before,
.shop_header_block #header-nav-drawer.spsDrawerOpen span::after {
background: var(--color-bg);
margin-top: clamp(10px, 5.06vw, 30px);
}
#sub-column .sub_header {
display: flex;
justify-content: flex-end;
align-items: center;
gap: clamp(24px, 9vw, 150px);
width: calc(100% - 46px);
padding: 16px 0;
}
#sub-column .sub_header .txt_close {
color: var(--color-bg);
width: calc((100% - 24px) * 0.28);
}
#sub-column .sub_header .logo {
width: calc((100% - 24px) * 0.72);
}
#sub-column h2  {
display: flex;
flex-direction: column;
align-items: center;
font-size: clamp(16px, 2.66vw, 20px);
letter-spacing: 4px;
width: 100%;
padding: 0 0 0 16px;
}
#sub-column h2 .logo_top {
width: 100%;
height: auto;
aspect-ratio: 215 / 37;
background-image: url("../images/logo_okunohosomichi_hover.png");
background-size: contain;
background-repeat: no-repeat;
transition: background-image 0.8s;
}
#sub-column h2 .logo_top:hover {
background-image: url("../images/logo_okunohosomichi_wht.png");
}
#sub-column .category nav ul li a {
color: var(--color-bg);
text-align: center;
font-size: clamp(16px, 2.66vw, 20px);
padding: 8% 0;
}
#sub-column ul > li:last-child > a .btn_hover {
aspect-ratio: 192 / 51;
background-image: url("../images/btn_cart_hover.png");
background-size: contain;
background-repeat: no-repeat;
width: clamp(186.99px, 49.86vw, 374px);
height: auto;
margin: 0 auto;
transition: background-image 0.8s;
}
#sub-column ul > li:last-child > a .btn_hover:hover {
background-image: url("../images/btn_cart.png");
}
#sub-column .category nav ul li {border-bottom: 1px solid var(--color-bg);}
#sub-column .category nav ul li:first-child {
border-top: 1px solid var(--color-bg);
}
#sub-column .category nav ul li:last-child {
border-bottom: none;
}
#sub-column .category nav ul li:has(.menu) > a {
position: relative;
display: block;
}
#sub-column .category nav ul li.open > a {
border-bottom: 1px solid var(--color-bg);
}
#sub-column .category .toggle-icon {
position: absolute;
right: 15px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
display: inline-block;
pointer-events: none;
}
#sub-column .category .toggle-icon::before,
#sub-column .category .toggle-icon::after {
content: "";
position: absolute;
background-color: currentColor;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
#sub-column .category .toggle-icon::before {
width: 12px;
height: 1px;
}
#sub-column .category .toggle-icon::after {
width: 1px;
height: 12px;
}
#sub-column .category li.open .toggle-icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
#sub-column .category .menu {
display: none !important;
}
#sub-column .category li.open > .menu {
display: block !important;
}
#sub-column .category .menu ul {
display: flex;
justify-content: flex-start;
align-content: center;
flex-wrap: wrap;
gap: 4%;
padding: 8% 0 8% 8%;
margin: 0 auto;
}
#sub-column .category .menu ul li {
width: calc((100% - 12%) / 2);
border-bottom: none;
}
#sub-column .category .menu ul li:first-child {
border-top: none;
}
#sub-column .category .menu ul li a {
text-align: left;
}
#sub-column .category .menu ul li a::before {
content: "・";
}
}