/* font */
@import url('https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@400;700;800&display=swap');

/* -------------------------------------------
 ベース
------------------------------------------- */
/* 変数 */
:root {
  --font-base: 'LINE Seed JP', sans-serif;
  --font-nav: 'LINE Seed JP', sans-serif;
}

/* ヘッダーの高さ */
:root {
  --header-height: 64px;
}

@media screen and (max-width: 428px) {
  :root {
    --header-height: 48px;
  }
}

/* 調整 */

html {
  scroll-behavior: smooth;
}

a:hover {
  opacity: 0.7;
}

address {
  font-style: normal;
}

/* -------------------------------------------
 main-wrap
------------------------------------------- */
.main-wrap {
  padding-top: var(--header-height);
  position: relative;
}

.main-wrap::after {
  content: '';
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
   background:repeat-y center top/100% url(../images/bg-pc.webp),
    #fafbf0;
  z-index: -1;
  pointer-events: none;
    @media (max-width: 768px) {
    background:
      repeat-y center top/100% url(../images/bg-sp.webp),
      #fafbf0;
  }
}

/* -------------------------------------------
 nav
------------------------------------------- */
/* アンカーリンク位置調整 */
:target {
  scroll-margin-top: calc(128px + var(--header-height));
   @media (max-width: 768px) {
    scroll-margin-top: calc(65px + var(--header-height));
   }
}
.nav {
  font-family: var(--font-nav);
  position: sticky;
  top: var(--header-height);
  box-sizing: border-box;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 769px) {
  .nav {
    min-height: 120px;
    border-radius: 8px;
    background: #e95550;
    box-shadow: 0 8px 0 0 #d4894c;
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 18px;
  }
}

.nav__list {
     display: flex;
    font-size: 2.5rem;
    gap: 1em;
    width: 100%;
    justify-content: center;
}


 @media (max-width: 768px) {
  .nav__list {
    font-size: 1rem;
    gap: 16px;
  }
 }

.nav__list-item {
  color: #fafbf0;
  font-weight: 700;
  line-height: 1;
}

 @media (min-width: 769px) {

  .nav__list-item:not(:first-of-type)::before {
content: "/";
display: inline-block;
padding-right: 1em;
  }
 }
@media (max-width: 768px) {
    .nav__list-item{
      display: flex;
      flex: 1;
max-width: 137px;
min-height: 29px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50px;
background: #E95550;
    }
}
@media (max-width: 768px) {
.nav__link{
display: flex;
width: 100%;
height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
}

/* -------------------------------------------
 main-container
------------------------------------------- */
main.main-container{
  max-width: none;
  background: transparent;
  font-family: var(--font-base);
  margin-top: 0;
}

/* -------------------------------------------
 main-section
------------------------------------------- */

.main-section{
  display: flex;
  flex-direction: column;
  gap: 95px;
  padding-bottom: 95px;
   @media (max-width: 768px) {
    gap: 30px;
    padding-bottom: 30px;
   }
}

.main-section__ttl{
      min-height: 120px;
      background: #E95550;
    color: #FAFBF0;
text-align: center;
font-size: 2.5rem;
font-weight: 700;
line-height: 130%;
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
  box-sizing: border-box;
}

 @media (min-width: 769px) {
  .main-section__ttl{
    border-radius: 8px;
    box-shadow: 0 8px 0 0 #d4894c;
}
 }

  @media (max-width: 768px) {
    .main-section__ttl{
      min-height: 62px;
  font-size: 1.25rem;
}
  }

  .main-section__inner{
     width: 95%;
    margin-inline: auto;
  }

  .main-section__attention{
         width: 95%;
    margin-inline: auto;
    color: #535354;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
 @media (max-width: 768px) {
  font-size: 0.625rem;
 }
  }

  /* -------------------------------------------
 goods-list
------------------------------------------- */
.goods-list{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
gap: 20px;
 @media (max-width: 768px) {
  grid-template-columns: 1fr;
  max-width: 254px;
 }
}

/* -------------------------------------------
 goods-item
------------------------------------------- */
.goods-item{
  display: flex;
padding: 18px 20px 25px 20px;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
border-radius: 16px;
border: 2px solid #66B57F;
background: #FFF;
 @media (max-width: 768px) {
  gap: 10px;
 }
}
.goods-item__sample{
  display: block;
  width: 70%;
aspect-ratio: 1/1;
img{
  width: 100%;
  height: 100%;
          aspect-ratio: 1 / 1;
object-fit: contain;
}
}
.goods-item__info{
  display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #40210F;
width: 100%;
}

  @media (min-width: 769px) {
    .goods-item__info--width-s{
  max-width: 282px;
}
  }

.goods-item__ttl{
text-align: center;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.1;
padding-bottom: 8px;
width: 100%;
border-bottom: 0.5px solid #40210F;
 @media (max-width: 768px) {
  font-size: 0.75rem;
 }
}
.goods-item__price{
text-align: center;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}

/* -------------------------------------------
 mv
------------------------------------------- */
.mv{
  position: relative;
}

.mv__language-btn{
  position: absolute;
  display: block;
  width: 7.81%;
    top: 6%;
    right: 2.3%;
     @media (max-width: 768px) {
          width: 10%;
    top: 6%;
    right: 1.3%;
     }
}

/* -------------------------------------------
 concept
------------------------------------------- */
.concept{
  padding: 60px 16px;
   @media (max-width: 768px) {
    padding-block: 32px;
   }
}
.concept__inner{
  display: flex;
  width: 100%;
max-width: 960px;
padding: 60px 80px;
flex-direction: column;
justify-content: center;
align-items: center;
margin-inline: auto;
gap: 28px;
border-radius: 48px;
border: 2px solid #66B57F;
background: #FFF;
box-sizing: border-box;
 @media (max-width: 768px) {
  padding: 20px;
  gap: 10px;
  border-radius: 16px;
 }
}
.concept__ttl{
  width: fit-content;
  margin-inline: auto;
}
.concept__text-block{
  color: #66B57F;
font-size: 1.5rem;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 1em;
line-height: 1.3;
 @media (max-width: 768px) {
  font-size: 0.75rem;
 }
}
.concept__picture-list{
  display: flex;
}
/* -------------------------------------------
 レスポンシブ対応
------------------------------------------- */

@media (min-width: 769px) {
  .sp {
    display: none;
  }
}

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