@charset "UTF-8";
html{
    font-size: 100%;
}
body{
    color: #333;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
img{
    max-width: 100%;
    vertical-align: bottom;
}
li{
    list-style: none;
}
a{
    color: #333;
    text-decoration: none;
}
a:hover{
    opacity: 0.7;
}
.wrapper{
    max-width: 1040px;
    padding: 0 20px;
    margin: 0 auto;
}
/* -----------header------------- */
#header{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}
#header .logo{
    width: 100%;
    max-width: 140px;
}
#header .logo a{
    display: block;
}
#header .navi .menu{
    display: flex;
    align-items: center;
}
#header .navi .menu li{
    font-size: 14px;
    margin-left: 40px;
}
/*----------mainvisual---------*/
.mainvisual{
    margin-bottom: 100px;
}
.mainvisual img{
    width: 100%;
}
/*----------section-title--------*/
.section-title-main{
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
}
.section-title-main::after{
  content: "";
  width: 80px;
  height: 2px;
  background-color: #000;
  margin: 0 auto;
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
}
.section-title{
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}
.section-main{
    margin-bottom: 100px;
}
.section-main .description{
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}
/*----------section-1.2--------*/
.section-1{
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}
.section-1 .img{
    max-width: 1260px;
}
.section-1 .tex{
    margin-left: 50px;
}
/*---------product-------------------*/
.product{
    padding: 30px 0 80px;
    background-color: #E6E6E6;
}
.product .lineup{
    display: flex;
    justify-content: space-between;
}
.product .lineup li{
    width: 30%;
    max-width: 300px;
    margin-right: 5%;
}
.product .lineup li:last-child{
    margin-right: 0;
}
/* =========================================
   レスポンシブ対応 (画面幅 768px 以下)
========================================= */
@media screen and (max-width: 768px) {
    .mainvisual {
        margin-bottom: 50px; /* スマホでは余白を少し狭くする */
    }
    /* ----------- header ------------- */
    #header {
        flex-direction: column; /* ロゴとメニューを縦に並べる */
        height: auto;
        padding: 20px;
        gap: 15px; /* ロゴとメニューの間の余白 */
    }
    #header .navi .menu {
        flex-wrap: wrap; /* 画面が狭い場合に折り返す */
        justify-content: center;
    }
    #header .navi .menu li {
        margin-left: 15px;
        margin-right: 15px;
    }

    /* ---------- mainvisual --------- */
    .mainvisual {
        margin-bottom: 50px; /* 余白を縮小 */
    }

    /* ---------- section-title -------- */
    .section-title-main {
        font-size: 22px; /* スマホ向けにフォントサイズを調整 */
        margin-bottom: 40px;
    }
    .section-title {
        font-size: 20px;
    }

    /* ---------- section-main -------- */
    .section-main {
        margin-bottom: 50px;
    }
    .section-main .description {
        text-align: left; /* スマホなどの狭い画面では左揃えの方が読みやすいため変更（お好みで外してください） */
    }

    /* ---------- section-1 -------- */
    .section-1 {
        flex-direction: column; /* 画像とテキストを縦積みに変更 */
        margin-bottom: 50px;
    }
    .section-1 .img {
        width: 100%;
        margin-bottom: 20px; /* 画像の下に余白を追加 */
    }
    .section-1 .tex {
        margin-left: 0; /* PC用の左余白(50px)をリセット */
    }
    /* --------- product ------------------- */
    .product .lineup {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;    /* 中央寄せ */
    }

    .product .lineup li {
        width: 100%;            /* 横幅をいっぱいにする */
        max-width: 400px;       /* 広がりすぎないよう上限を設定 */
        margin-right: 0;        /* PC用の横余白をリセット */
        margin-bottom: 30px;    /* 縦に並んだ時のアイテム間の余白 */
    }

    .product .lineup li:last-child {
        margin-bottom: 0;       /* 最後の要素の下余白を消す */
    }
}