*{
box-sizing:border-box;
}


body{
margin:0;
background:#201506;
font-family: "Yu Mincho", "YuMincho",serif;
font-weight:600;
min-width:320px;
}


img{
max-width:100%;
height:auto;
display:block;
}
.ib{display:inline-block;}

.pc-only{display:initial;}
.sp-only{display:none;}
@media (max-width:768px){
  .pc-only{display:none;}
  .sp-only{display:initial;}
}

/* header */

.header {
  position:fixed;
  top:0;
  z-index: 1000;
  background: rgba(32,21,6,0.8);
  width:100%;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  padding: 0 30px;
  max-width:1480px;

  margin:0 auto;
}
.logo{display:flex; align-items: center; gap:50px;}
#main-logo img{height:40px;}
#oillio-logo img{height:60px;}

@media (max-width:1280px){
  .header-inner {height: 100px; padding: 0 25px;}
  .logo{display:flex; align-items: center; gap:40px;}
  #main-logo img{height:35px;}
  #oillio-logo img{height:55px;}
}

@media (max-width:1080px){
  .header-inner {height: 90px;}
  .logo{display:flex; align-items: center; gap:30px;}
  #main-logo img{height:30px;}
  #oillio-logo img{height:50px;}
}

@media (max-width:880px){
  .header-inner {height: 80px; padding: 0 20px;}
  #main-logo img{height:27px;}
  #oillio-logo img{height:40px;}
}
@media (max-width:576px){
  .header-inner {height: 70px; padding: 0 10px 0 20px; gap:20px;}
  .logo{display:flex; align-items: center; gap:20px;}
  #main-logo img{height:22px;}
  #oillio-logo img{height:36px;}
}


/* ======================
Hamburger Button
====================== */

.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.menu-button span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: 0.3s;
}

.menu-button span:nth-child(1) { top: 12px; }
.menu-button span:nth-child(2) { top: 19px; }
.menu-button span:nth-child(3) { top: 26px; }

/* 開いたとき */
.menu-button.is-active span:nth-child(1) {
  transform: translate(-50%, 7px) rotate(45deg);
}

.menu-button.is-active span:nth-child(2) {
  opacity: 0;
}

.menu-button.is-active span:nth-child(3) {
  transform: translate(-50%, -7px) rotate(-45deg);
}

/* ======================
Navigation
====================== */

.nav-list {
  display: flex;
  gap: 30px;
}

.nav a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
   font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight:600;
}

.nav a:hover {
  opacity: 0.7;
}

@media (max-width:1280px){
  .nav a {font-size: 16px;}
}

/* ======================
SP Layout
====================== */

@media (max-width: 1080px) {

  .menu-button {
    display: block;
    z-index:5;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #4f1c11;
    padding: 80px 24px;
    transition: right 0.3s ease;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .nav.is-open {
    right: 0;
  }

  .nav-list {
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }

  .nav a {
    font-size: 24px;
    font-weight:700;
    color:#fff;
  }

}
@media (max-width: 576px) {
  .nav a {
    font-size: 18px;
  }
}


/* ======================
Overlay
====================== */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  display:none;
}

.nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ======================
Focus
====================== */

button:focus-visible,
a:focus-visible {
  outline: 3px solid #881d22;
  outline-offset: 3px;
}

/* main */

main{width:100%;}
main .container{ max-width:1480px; margin:0 auto; padding:0 50px;}
main section.contents-block{background:url(../images/base-bg.jpg) #ebe5d6 0 0 no-repeat; border-radius:10px; margin-bottom:40px;}
.section-in{padding:60px;}

.section-in h2 img{width:auto; height:48px; margin:0 auto;}
.section-in h2{margin-bottom:60px; text-align:center;}
#online-btn{position:fixed; bottom:20px; right:20px; z-index:5; width:340px;}


@media (max-width:1280px){
  main .container{ max-width:1480px; margin:0 auto; padding:0 30px;}
  main section.contents-block{margin-bottom:40px;}
  .section-in{padding:50px 40px;}
  .section-in h2 img{height:40px;}
  .section-in h2{margin-bottom:50px;}
 
  #online-btn{bottom:10px; right:10px; width:270px;}
}

@media (max-width:1080px){
  main .container{padding:0 20px;}
  main section.contents-block{margin-bottom:30px;}
  .section-in{padding:50px 35px;}
  .section-in h2 img{height:36px;}
  .section-in h2{margin-bottom:40px;} 
  #online-btn{bottom:10px; right:10px; width:240px;}
}

@media (max-width:880px){
  main .container{padding:0 15px;}
  .section-in{padding:45px 30px;}
  .section-in h2 img{height:30px;}
  .section-in h2{margin-bottom:35px; text-align:center;}
}

@media (max-width:768px){
  .section-in{padding:35px 25px;}
  .section-in h2 img{height:27px;}
}

@media (max-width:576px){
  main .container{padding:0 10px;}
  .section-in{padding:30px 15px;}
  .section-in h2{margin-bottom:25px}
  .section-in h2 img{height:24px;}
  #online-btn{bottom:10px; right:-10px; width:160px;}
}

@media (max-width:430px){
  .section-in h2 img{height:22px;}
}

/* products */
.section-in .products{display:flex; gap:40px; margin:40px auto 0;}
.products-item{width:calc(50% - 20px); display:flex; gap:30px;}
.products-bottle{width:25%;} 
.products-text{width:calc(75% - 30px);}
.products-text h3{margin-bottom:30px;}
.products-text p{font-size:18px; line-height:1.6; color:#333; text-align:center; margin-bottom:30px;}
.products-text h4{color:#fff; display:block; width:fit-content; padding:5px 10px; border-radius:6px; margin-left:20px; font-size:15px;}
#products01 .products-text h4{background:#4f1c11;}
#products02 .products-text h4{background:#881d22;}
.recommend-list{width:calc(100% - 40px); margin:10px auto; display:flex; gap:15px;}
.recommend-list li{width:calc((100% - 15px * 2) / 3); max-width:112px; text-align:center; font-size:14px;}
.recommend-list li img{margin-bottom:5px;}

@media (max-width:1280px){
.products-text p{font-size:16.5px;}
}

@media (max-width:1080px){
  .section-in .products{display:flex; gap:30px; margin:40px auto 0;}
  .products-item{width:calc(50% - 20px); display:flex; gap:25px;}
  .products-bottle{width:20%;} 
  .products-text{width:calc(80% - 25px);}
  .products-text h3{margin-bottom:25px;}
  .products-text p{font-size:15px; margin-bottom:25px;}
  .products-text h4{color:#fff; margin-left:20px; font-size:14px;}
  .recommend-list{width:calc(100% - 40px); margin:10px auto; display:flex; gap:15px;}
  .recommend-list li{width:calc((100% - 15px * 2) / 3); max-width:112px; text-align:center; font-size:14px;}
}
@media (max-width:880px){
  .section-in .products{display:flex; gap:30px; margin:40px auto 0; flex-direction: column; align-items: center; row-gap:60px;}
  .products-item{width:100%; max-width:570px; display:flex; gap:25px;}
  .products-text p{font-size:18px; margin-bottom:25px;}
}
@media (max-width:576px){
  .section-in .products{display:flex; gap:30px; margin:30px auto 0; flex-direction: column; align-items: center; row-gap:60px;}
  .products-item{width:96%; max-width:570px; display:flex; gap:25px;}
  .products-text p{font-size:15px; margin-bottom:25px; text-align:left;}
  .products-text p br{display:none;}

  .products-text h4{margin-left:0;}
  .recommend-list{width:100%; margin:10px auto; display:flex; gap:15px; flex-wrap:wrap;}
  .recommend-list li img{margin-bottom:5px;}
}

@media (max-width:430px){
  .recommend-list li{width:calc((100% - 15px * 1) / 2); max-width:112px; text-align:center; font-size:14px;}
}


/* feature */
.feature-block{display:flex; gap:40px; margin-bottom:40px;}
.feature-block .feature-item{padding:10px 0; width:calc(50% - 20px);}
/* .feature-block .feature-item:first-child{border-right:dotted 2px #b9817c} */

.feature-block .feature-item p{font-size:15px; line-height:1.6; text-align:center; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight:600; color:#333;}
.feature-block .feature-list{margin-top:20px; display:flex; gap:15px;} 
.feature-block .feature-list li{width:calc((100% - 15px * 2) / 3); display:flex; flex-direction: column; gap:5px;}
.feature-block .feature-list li p{background:rgba(79,28,17,0.1); padding:6px; border-radius: 6px; margin:10px 0; font-size:12px; font-weight:700; line-height:1.6;}
.feature-block .feature-list li p span{color:#881d22;}

.attention{background:rgba(79,28,17,0.1); border-radius:10px; padding:30px;}
.attention h3{max-width:670px; width:90%; margin:10px auto 40px;}
.attention-list{width:90%; display:flex; flex-wrap:wrap; gap:20px; margin:0 auto;}
.attention-list li{width:calc((100% - 40px) / 2); position:relative; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight:600; font-size:16px; color:#333; padding-left:1em;}
.attention-list li:before{content:""; display:block; width:0.6em; height:0.6em; border-radius:0.3em; background-color:#881d22; position:absolute; top:0.2em; left:0;}

@media (max-width:1080px){
  .attention h3{max-width:560px; width:90%; margin:0 auto 30px;}
  .attention-list{width:95%;}
  .attention-list li{font-size:15px;}
}

@media (max-width:880px){
.feature-block{display:flex; gap:40px; margin-bottom:40px; width:100%; flex-direction: column; justify-content: center; align-items: center;}
.feature-block .feature-item{padding:10px 0; width:100%; max-width:600px;}
.attention{background:rgba(79,28,17,0.1); border-radius:10px; padding:20px;}
.attention-list{width:90%; margin-bottom:20px;}
.attention-list li{font-size:15px; width:100%;}
}

@media (max-width:768px){
  .attention h3{text-align:center;}
  .attention h3 img{max-width:560px; width:auto; height:54px; margin:10px auto 0;}
}

@media (max-width:576px){
  .feature-block .feature-list{flex-wrap:wrap; width:90%; margin:20px auto 0;}
  .feature-block .feature-list li{width:calc((100% - 15px * 1) / 2);}
  .attention{background:rgba(79,28,17,0.1); border-radius:10px; padding:20px;}
  .attention h3 img{max-width:560px; width:auto; height:48px; margin:10px auto 0;}

  .attention-list{width:100%;}
  .attention-list li{font-size:14px; width:100%;}
}

@media (max-width:430px){
  .attention h3 img{max-width:560px; width:auto; height:40px; margin:10px auto 0;}
}


/* shopping */
section#shopping{background:#2b2113; border-radius:10px; margin-bottom:40px;}
.shoplist{margin:0 auto 30px; display:flex; gap:20px; flex-wrap:wrap;}
.shoplist li{width:calc((100% - 20px * 3) / 4 );}

.shoplist.type02{display:flex; flex-wrap:wrap;}
.shoplist.type02 li{width:calc((100% - 20px * 1) / 2 );}

section#shopping p{text-align:center; font-size:14px; line-height:1.6; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight:600; color:#fff; padding-top:30px;}


@media (max-width:880px){
.shoplist{margin:0 auto 30px; display:flex; gap:20px;}
.shoplist li{width:calc((100% - 20px * 1) / 2 );}
}

@media (max-width:576px){
  .shoplist{margin:0 auto 10px; display:flex; gap:16px;}
  .shoplist li{width:calc((100% - 16px * 1) / 2 );}
  section#shopping p{font-size:12px; padding-top:20px;}
}


/* footer */
footer{padding:20px 20px 40px;}
.copyright{text-align:center; font-size:12px; font-family: Helvetica, Arial, sans-serif; font-weight:600; color:#fff; line-height:1.6;}



/* kv */

section.kv{margin:0 auto; width:100%; max-width:1800px;}

.kv-slider{
width:100%;
}

.kv-slider img{

width:100%;
height:100%;
object-fit:cover;

}
.swiper-pagination-bullet{background:#8e8e8e;}
.swiper-pagination-bullet-active{background:#dfb46d;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:20px;}

/* recipe */

.recipe-block{margin-bottom:60px;}
.recipe-block + .recipe-block + .recipe-block{margin-bottom:0;}

/* recipe-list */
.recipe-list{display:flex; flex-wrap:wrap; gap:30px; width:100%;}
.recipe-list li{width:calc((100% - 30px * 2) / 3); border-radius:8px;}

@media (max-width:768px){
.recipe-list{gap:20px; width:100%;}
.recipe-list li{width:calc((100% - 20px) / 2);}
}

@media (max-width:576px){
.recipe-list{gap:24px; width:100%;}
.recipe-list li{width:100%;}
}


.recipe-card.is-hidden{display:none;}
.recipe-card.is-hidden.is-visible{display:flex;animation:recipeShow .3s ease;}
@keyframes recipeShow{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.recipe-more-close{display:none;}
.recipe-more.is-open .recipe-more-open{display:none;}
.recipe-more.is-open .recipe-more-close{display:inline;}
.recipe-more{display:block; margin:20px auto; background:#fff; padding:10px 10px; border:solid 2px #4f1c11; color:#4f1c11; font-size:16px; font-weight:700; border-radius:30px; width:75%; max-width:420px;}
.recipe-list a{display:block; padding:10px; text-decoration:none; color:#4f1c11;}
.recipe-body{text-align:center; padding:20px 10px; font-size:18px; line-height:1.6; width:90%; margin:0 auto; display:flex; flex-direction:column; flex:1; gap:15px;}
.recipe-body span{background:#4f1c11; color:#fff; padding:8px 16px; width:fit-content; border-radius:30px; margin:15px auto 5px; display:block; font-size:15px; margin-top:auto;}

a:focus-visible,
button:focus-visible{outline:3px solid #2E8208; outline-offset:3px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

.recipe-category{background:rgba(79,28,17,0.1); margin-bottom:30px; position:relative; border-radius:10px; padding:36px 20px 36px 160px;}
.recipe-category img{height:28px;}
.recipe-category#category01:after{content:""; display:block; width:120px; height:112px; background:url(../images/category-ph01.png); background-size:contain; background-repeat:no-repeat; position:absolute; left:20px; top:-25px;}
.recipe-category#category02:after{content:""; display:block; width:100px; height:80px; background:url(../images/category-ph02.png); background-size:contain; background-repeat:no-repeat; position:absolute; left:40px; top:10px;}
.recipe-category#category03:after{content:""; display:block; width:101px; height:104px; background:url(../images/category-ph03.png); background-size:contain; background-repeat:no-repeat; position:absolute; left:40px; top:-15px;}

.recipe-head{margin-bottom:40px; position:relative;}
.recipe-head:before{content:""; display:block; position:absolute; width:26%; height:100%; background:url(../images/recipe01.png); background-size:100%; background-repeat:no-repeat;}
.recipe-head:after{content:""; display:block; position:absolute; right:0; top:0; width:26%; height:100%; background:url(../images/recipe02.png); background-size:100%; background-repeat:no-repeat;}

.recipe-lead{text-align:center;}
.recipe-lead img{width:auto; height:50px; margin:-10px auto 0;}

.recipe-card{position:relative; background:#fff; border-radius:0; display:flex;}
.recipe-card a{display:flex; flex-direction:column; width:100%; height:100%;}
.recipe-card::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:4px;}

.is-garlic::after{background:#D69B00;}
.is-mala::after{background:#C00000;}

.recipe-thumb{position:relative; aspect-ratio:3 / 2;}
.recipe-thumb img{width:100%; height:100%; object-fit:cover; display:block;}


/* bottle-common */
.recipe-thumb::before{content:""; position:absolute; bottom:-10px; right:-5px; width:60px; height:170px; background-size:contain; background-repeat:no-repeat; z-index:2;}

/* bottle-garlic */
.is-garlic .recipe-thumb::before{background-image:url('../images/garlic.png');}


/* bottle-mala */
.is-mala .recipe-thumb::before{background-image:url('../images/mala.png');}


@media (max-width:1280px){

.recipe-block{margin-bottom:50px;}
.recipe-body{font-size:16px; width:100%;}
.recipe-body span{background:#4f1c11; color:#fff; padding:8px 16px; width:fit-content; border-radius:30px; margin:15px auto 5px; display:block; font-size:15px;}
.recipe-lead img{width:auto; height:40px; margin:-10px auto 0;}
.recipe-category{margin-bottom:30px; padding:28px 20px 28px 130px;}
.recipe-category img{height:24px;}
.recipe-category#category01:after{content:""; width:96px; height:90px; position:absolute; left:20px; top:-25px;}
.recipe-category#category02:after{content:""; width:80px; height:64px; position:absolute; left:30px; top:10px;}
.recipe-category#category03:after{content:""; width:82px; height:84px; position:absolute; left:30px; top:-15px;}

/* 共通 */
.recipe-thumb::before{content:""; position:absolute; bottom:-10px; right:-5px; width:53px; height:150px; z-index:2;}
}

@media (max-width:1080px){
.recipe-block{margin-bottom:50px;}
.recipe-body{font-size:15px; width:100%;}
.recipe-body span{background:#4f1c11; color:#fff; padding:8px 16px; width:fit-content; border-radius:30px; margin:15px auto 5px; display:block; font-size:15px;}
.recipe-category{margin-bottom:30px; padding:22px 20px 22px 110px;}
.recipe-category img{height:21px;}
.recipe-category#category01:after{content:""; width:77px; height:72px; position:absolute; left:20px; top:-20px;}
.recipe-category#category02:after{content:""; width:68px; height:54px; position:absolute; left:25px; top:5px;}
.recipe-category#category03:after{content:""; width:70px; height:72px; position:absolute; left:30px; top:-15px;}
.recipe-lead img{width:auto; height:36px; margin:-10px auto 0;}

/* 共通 */
.recipe-thumb::before{content:""; position:absolute; bottom:-10px; right:-5px; width:39px; height:110px; z-index:2;}
.recipe-more{font-size:15px;}
}

@media (max-width:768px){
  .recipe-head{margin-bottom:25px;}
}

@media (max-width:576px){
.recipe-head:before{display:none;}
.recipe-head:after{display:none;}
.recipe-body{font-size:14px; gap:10px;}
.recipe-lead img{width:auto; height:24px; margin:-10px auto 0;}
.recipe-category{margin-bottom:24px; padding:22px 20px 22px 90px;}
.recipe-category img{height:18px;}
.recipe-category#category01:after{content:""; width:60px; height:56px; position:absolute; left:20px; top:-8px;}
.recipe-category#category02:after{content:""; width:58px; height:46px; position:absolute; left:20px; top:8px;}
.recipe-category#category03:after{content:""; width:58px; height:60px; position:absolute; left:20px; top:-10px;}
.recipe-body span{font-size:13px; padding:8px 24px; margin:0 auto;}
.recipe-more{font-size:13px;}
}