@charset "utf-8";

html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Hind', 'Noto Sans JP', Montserrat, sans-serif;
    font-style: normal;
    color: #252525;
    background-color: #fff;
    line-height: 1.9;
}

li {
    list-style-type: none;  
    padding-left: 0;  
}

a {
  color: inherit;
  transition: color 0.2s;
  text-decoration: none;
}

.container {
        width: 1024px;
        max-width: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 769px) {
    .container {
        padding: 0;
    } 
}/* pc 769px */

p {
    font-family: "Noto Sans JP";
    line-height: 1.33;
    font-style: normal;
}

/*セクションタイトルフォント*/
.hind {
    font-family: "Hind", sans-serif;
    font-weight: 500;
    font-style: normal;
}

@media only screen and (max-width: 769px) {
    .hind {
        font-weight: 400;
    } 
}/* pc 769px */

/*------------------*/

/*ボタン*/
.btnBox {
    display: flex;
    justify-content: center;
}

a.btn {
  background: #fff;
  color: #333;
  border: 1px solid #333;
  border-radius: 50px;
  transition: background 0.3s, color 0.3s;
  padding: 18px 30px 18px 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}

.btn .arrow {
  stroke: currentColor;
  transition: stroke 0.3s;
  margin-left: 8px;
      width: 16px;           /* 矢印画像のサイズ調整 */
    height: auto;
}

.btn:hover {
  background: #333;
  color: #fff;
}

@media only screen and (max-width: 769px) {
    .btn {
        padding: 14px 30px 14px 40px;
        gap: 10px;
    }
    
    .btn p {
        font-size: 12px;
    }

    .btnBox {
        padding-top: 2rem;
    }
}/* pc 769px */

h1 {
    display: flex;
    padding: 1rem;
    align-items: center;
    align-self: stretch;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

@media only screen and (max-width: 769px) {
    h1 {
        font-size: 1.2rem;
    }
}/* pc 769px */

/*メインビジュアル*/

.img-container {
  width: 100%;         /* 必要に応じて固定値もOK */
  aspect-ratio: 3/2;   /* 横縦比の例: 3:2。希望に合わせ変更可 */
  overflow: hidden;
  position: relative;
  display: block;
}

.zoom-effect {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fadeIn 3s forwards,slowZoomIn 10s;
  /* slowZoomInはfadeIn終了後に始まる */
}

/* フェードイン */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ズームイン */
@keyframes slowZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

/*スクロール
.scroll_up {
  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s ease-in-out;
}
.scroll_up.on {
  opacity: 1;
  transform: translateY(0);
}
  */

/*intro*/
.intro {
    display: flex;
    padding-top: 8rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.intro h2 {
    margin-bottom: 2.5rem;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 4rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.intro-text {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
}

.brSp {
    display: none;
}

.h2br {
    display: none;
}

@media only screen and (max-width: 769px) {
.brSp {
    display: inline;
}

.h2br {
    display: inline;
}

.brPc {
    display: none;
}

.intro {
    padding: 40px 20px 0 20px; 
}

.intro h2 {
    font-size: 2rem;
    line-height: 140%;
    letter-spacing: 0.4px;
    margin-bottom: 1.8rem;
    font-weight: 700;
}

.intro-text {
    font-size: 1.5rem;
    line-height: 143%;
    letter-spacing: 0.6px;
}
}/* pc 769px */

/*feature*/
.feature-section{
    padding-top: 60px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}

.feature_img {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding: 0 2rem;
}

.feature_img img {
    width: 46%;
    height: auto;
}

.img_padding {
    padding-top: 120px;
}

.feature-section h2 {
    font-family: "Noto Sans JP";
    font-size: 3rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.33;
    margin: 1rem 2rem 0 2rem;
}

.feature-section p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2;
    margin: 2rem 2rem 6em 2rem;
}

.feature_img2 img {
    width: 100%;
    height: auto;
    padding-bottom: 8rem;
}

@media only screen and (max-width: 769px) {
    .feature-section {
        padding-top: 3rem;
    }

    .feature_img {
        padding: 0 10px;
    }

    .img_padding {
        padding-top: 60px;
    }

    .feature-section h2 {
        font-size: 1.5rem;
        line-height: 147%;
        letter-spacing: 0.3px;
        font-weight: 700;
    }

    .feature-section p {
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 185%;
        letter-spacing: 0.52px;
        margin: 1rem 2rem;
    }

    .feature_img2 img {
        padding-bottom: 3rem;
    }
}/* pc 769px */

/*lineup*/
.lineup {
    padding: 6rem 0 8rem 0;
}

.lineup h2 {
    text-align: center;
    font-family: Hind;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1;
}

.lineup h3 {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
}

.lineup-list {
    margin: 4.5rem 0;
    display: flex;
    flex-wrap: wrap; 
}

.lineup-item {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 20px;
}

.lineup-item img {
    width: 100%;
}

.lineup-item:hover {
  /* ホバー時に変化させたいスタイルを書く */
  opacity: 0.7;
  filter: brightness(1.1);
  transition: opacity 0.3s, filter 0.3s;
}

.productName {
    font-size: 2.4rem;
    font-weight: 400;
}

.price {
    font-size: 1.4rem;
    line-height: 27px;
    font-weight: 400;
}

.viewDetails {
    font-size: 1rem;
    text-align: center;
    background-color: #333;
    width: 97px;
    margin-left: auto;
    padding: 5px 15px;
    border-radius: 10px;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease; /* アニメーションの準備 */
}

.viewDetails:hover {
    transform: scale(1.08);     /* 少し大きくなる */
}

@media only screen and (max-width: 769px) {
    .lineup {
        padding: 3rem 0 4rem;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .lineup h2 {
        font-size: 3rem;
        font-weight: 400;
    }

    .lineup h3 {
        margin: 0;
        padding-bottom: 1rem;
    }
    .lineup-list {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        align-content: center;
        margin: 0;
        padding: 0 1rem;
    }

    .lineup-item {
        display: flex;
        width: 320px;
        padding: 2rem 1rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .productName {
        font-size: 1.5rem;
        padding-bottom: 5px;
        font-weight: 500;
    }
    
    .price {
        font-size: 1.3rem;
        line-height: 130%;
        margin: 0;
    }

    .viewDetails {
        margin: 1rem auto;
        font-size: 0.8rem;
        width: 92px;
        padding: 4px 8px;
    }
}/* pc 769px */

/*works*/
.works {
    background: #A9B19F;
    padding: 8rem 5rem;
    align-items: center;
    display: column;
    align-self: stretch;
    
}
.works h2 {
    text-align: center;
    font-family: Hind;
    font-size: 4rem;
    font-weight: 500;
    color: #fffffd;
    line-height: 1;
}

.works h3 {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
    color: #fffffd;
    padding-bottom: 3rem;
}

.works-slideshow {
  position: relative;
  width: 100%;  /* お好みでサイズ調整OK */
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  
}

.works-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;
}
.works-slideshow img.active {
  opacity: 1;
  z-index: 2;
}

.worksBtn {
    padding-top: 6rem;
}

@media only screen and (max-width: 769px) {
    .works {
        padding: 3rem 2rem 4rem 2rem;
    }

    .works-slideshow {
        height: 320px;
    }

    .works h2 {
        font-size: 3rem;
        font-weight: 400;
    }

    .works h3 {
        margin: 0;
    }

    .worksBtn {
    padding-top: 2rem;
    }
}/* pc 769px */

/*pick-up*/
.pick-up {
    padding: 8rem 0;
}

.pick-up h2 {
    text-align: center;
    font-family: Hind;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1;
}

.pick-up h3 {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
}

.pick-up_item {
    display: flex;
    width: 630px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.pick-upVd {
    margin-bottom: 1rem;
    margin-right: 1rem;
}



.pick-up_item:hover {
  /* ホバー時に変化させたいスタイルを書く */
  opacity: 0.7;
  filter: brightness(1.1);
  transition: opacity 0.3s, filter 0.3s;
}

.pick-up_txtBox {
    margin-top: 8px;
}

ul.pick-up_list {
    display: flex;            /* 横並びにする */
    flex-wrap: wrap;          /* 複数行に折り返し可能に */
    gap: auto;                /* 自動余白（gap自体はauto非対応なので下記調整が必要） */
    justify-content: space-between; /* 両端揃えで間隔を自動調整 */
    padding: 4.5rem 0.5rem;
    margin: 0;
}

ul.pick-up_list li.pick-up_item {
    width: 50%;             /* liの固定横幅 */
    margin-bottom: 2rem;      /* 必要に応じて縦の間隔 */
    box-sizing: border-box;   /* パディングを含む幅指定に */
    padding: 1.5rem;
}

.pick-upImg {
    position: relative;
}

.pick-upImg img {
    width: 100%;
    object-fit: cover;
    display: block;
    align-self: stretch;
}



.pick-up_content {
    align-items: flex-start;
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}


.pick-up_title {
    position: absolute;
    top: 10px;  /* お好みで微調整 */
    left: 10px; /* お好みで微調整 */
    background: rgba(255,255,255,0.7); /* 読みやすいよう半透明背景を付与 */
    padding: 20px 8px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 2;
    font-size: 2rem;
    margin-right: 10px;
}

.pick-up_txt {
    font-size: 16px;
    line-height: 24px; 
    padding: 5px 10px 10px 10px;
    flex-wrap: wrap; 
}

@media only screen and (max-width: 769px) {
    .pick-up {
        padding: 3rem 0 4rem 0;
    }
    .pick-up h2 {
        font-size: 3rem;
        font-weight: 400;
    }

    .pick-up h3 {
        margin: 0;
    }

    ul.pick-up_list {
        align-items: flex-start;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列にする */
        gap: 10px;
        list-style: none;
        padding: 0 1rem 0 1rem;
        margin-top: 3rem;
    }
    
    ul.pick-up_list li.pick-up_item {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .pick-up_title {
        position: absolute;
        top: 10px;  /* お好みで微調整 */
        left: 10px; /* お好みで微調整 */
        background: rgba(255,255,255,0.7); /* 読みやすいよう半透明背景を付与 */
        padding: 1.2rem 0.8rem;
        border-radius: 4px;
        font-weight: 500;
        z-index: 2;
        font-size: 1.5rem;
        margin-right: 1rem;
    }

    .pick-up_txt {
        display: none;
        font-size: 1.2rem;
        line-height: 150%;
    }

    .pick-up_txtBox {
        gap: 0;
        padding: 0;
    }

    .pick-upBtnBox {
        padding: 0;
    }

    .pick-upImg img {
        height: auto;
    }

    .pick-upVd {
        margin: 1rem auto;
    }

}/* pc 769px */

/*banner*/
.sample_pc {
    max-width: 100%;
    padding-bottom: 7rem;
}

.sample_sp {
    display: none;
}

.sample_pc:hover {
  /* ホバー時に変化させたいスタイルを書く */
  opacity: 0.7;
  filter: brightness(1.1);
  transition: opacity 0.3s, filter 0.3s;
}


@media only screen and (max-width: 769px) {
    .sample_pc {
        display: none;
    }
    
    .sample_sp {
        display: inline;
        width: 100%;
        margin: 0;
        padding-bottom: 10rem;
    }

    .sample_sp:hover {
      /* ホバー時に変化させたいスタイルを書く */
      opacity: 0.7;
      filter: brightness(1.1);
      transition: opacity 0.3s, filter 0.3s;
    }
}/* pc 769px */