body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333333;
  line-height: 1.5;
  background-color: #ffffff
}

.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
a {transition: .3s;}
a:hover {opacity: 0.8;}



header {
    padding: 19px 0;
}
.logo img {
    width: 180px;   /* ★この数字を調整して好きな大きさにしてください */
    height: auto;   /* 縦横比を保つ */
    display: block; /* 下にできる謎の隙間を消す */
}
header .container {
    display: flex;
    justify-content: space-between; /* ロゴを左、メニューを右に寄せる */
    align-items: center;           /* 上下の高さを中央に揃える */
    padding: 20px 0;
}
header nav ul {
    display: flex;                 /* メニュー項目を横並びにする */
    list-style: none;              /* 点（・）を消す */
    margin: 0;          /* ★これを入れる */
    padding: 0;         /* ★これを入れる */
    align-items: center; /* ★メニュー内の文字の上下を揃える */
}
header nav ul li {
    margin-left: 20px;             /* メニュー同士の間隔を空ける */
}
header nav ul li a {
    text-decoration: none;         /* 下線を消す */
    color: #333;                   /* 文字色 */
    font-weight: bold;
    font-size: 16px;
    line-height: 1; 
    display: block;
}

@media screen and (max-width: 767px) {
    /* 1. ロゴとメニューを縦に並べて中央に寄せる */
    header .container {
        display: flex;
        flex-direction: column; /* 縦並びにする */
        align-items: center;    /* 中央揃え */
        padding: 10px 0;
    }

    /* 2. ロゴの下に少し隙間を作る */
    .logo img {
        width: 150px; /* お好みのサイズでOK */
        margin-bottom: 10px;
    }
    header nav {
        display: block;
        position: static; /* 浮かせず配置 */
    }

    header nav ul {
        display: flex;
        flex-direction: row; /* 横並び */
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    header nav ul li {
        margin: 0 10px; /* 左右に10pxずつ空ける */
    }

    header nav ul li a {
        font-size: 14px;
        color: #333; /* 文字色を黒に戻す */
    }
}
header {
    padding: 19px 0;
}
header .container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 0;
}
.logo img {
    width: 180px;
    height: auto;
    display: block;
}
#hmb {
    display: none;
}
.section3 .row {
display: flex;
flex-wrap: wrap;
justify-content: center;
    gap: 20px;
}

.section3 .col {
    /* 3つ並びにするため、余裕を持って30%程度に設定 */
/*    width: calc(33.333% - 20px); */
    box-sizing: border-box;
    margin-bottom: 30px; /* 下段との間隔 */
}

.section3 .row .ge {
display: flex;          /* 下段の2つを横並びにする */
    justify-content: center;  /* 2つをギュッと中央に寄せる */
    gap: 20px;              /* 2つの間の距離を固定する */
    width: 100%;
}



@media screen and (max-width: 767px) {
    .container .col {
        width: 100%; /* スマホでは縦に1列 */
        margin: 0 0 20px 0;
    }
    header .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0;
    }

    /* 2. 三本線ボタンのデザイン（これがないとボタンが消えます） */
    #hmb {
        display: block !important;
        position: relative;
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 1000;
    }
    #hmb span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        left: 0;
        transition: 0.3s;
    }
    #hmb span:nth-child(1) { top: 0; }
    #hmb span:nth-child(2) { top: 10px; }
    #hmb span:nth-child(3) { top: 20px; }

    /* 3. 【重要】右側に隠しておくメニューの設定 */
    header nav {
        display: block !important; /* noneではなく常に存在する状態にする */
        position: fixed;
        top: 0;
        right: -100%;           /* 画面の右の外側に隠す */
        width: 45%;             /* メニューの幅（右半分のサイズ） */
        height: 100vh;          /* 画面の一番下まで届く高さ */
        background-color: #fff; /* メニューの背景色 */
        z-index: 999;           /* コンテンツより手前に出す */
        transition: 0.4s;       /* スライドするスピード */
        padding-top: 100px;     /* 上に余白を作る */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 左側にうっすら影 */
    }

    /* 4. ボタンを押したとき（active）に画面内へスライドさせる */
    #header.active nav {
        right: 0;               /* 右端を0の位置まで移動させる */
    }

    /* 5. メニューの中身（HOMEなど）を縦に並べる */
    header nav ul {
        flex-direction: column !important;
        align-items: flex-start;
        padding: 0 0 0 40px;
        margin: 0;
    }
    header nav ul li {
        margin: 20px 0 !important;
        list-style: none;
    }

    /* 6. ボタンを押したときに三本線を「×」にする */
    #header.active #hmb span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    #header.active #hmb span:nth-child(2) { opacity: 0; }
    #header.active #hmb span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}




.section1 .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section1 .col {
    width: 49%;
}
.section1 h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 27px;
}
.span {
    color: #e11616;
}
.span2 {
  color: #156faf;
}
.section1 p {
    margin-bottom: 27px;
}
.section1 a {
    font-weight: 700;
    display: inline-block;
    background-color: #e11616;
    color: #ffffff;
    padding: 12px 30px 15px;
    border-radius: 100px;
    margin-bottom: 30px;
}


@media screen and (max-width: 767px) {
    .section1 .row {
        display: flex;
        flex-direction: column-reverse;
        gap: 24px;
    }
    .section1 .col {
        width: 100%;
        text-align: left;
    }
    .section1 h1 {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .section1 img {
        width: 90%;
        margin: 0 auto;
        display: block;
        
    }
}


.section2 {
    padding: 58px 0 78px;
}
.section2 .container {
    max-width: 660px;
    background-color: #fde7e7;
    border-radius: 20px;
    padding: 59px 71px 74px;
}
.section2 h2 {
    font-size: 36px;
    font-weight: 700;
}
.section2 h2 span {
    color: #e11616;
}
.section2 .heading {
    font-size: 14px;
    font-weight: 700;
    color: #e11616;
    margin-bottom: 19px;
}
.section2 .text {
    line-height: 1.8;
}


@media screen and (max-width: 767px) {
  .section2 .container {
    padding: 24px;
 }
}


.section3 {
    padding: 0 0 140px 0;
}
.section3 h2 {
    font-size: 36px;
    font-weight: 700;
}
.section3 h2 span {
    color: #e11616;
}
.section3 .heading {
    font-size: 14px;
    font-weight: 700;
    color: #e11616;
    margin-bottom: 19px;
}
.section3 .text {
    line-height: 1.8;
    margin-bottom: 44px;
}
.section3 .row {
    display: flex;
    justify-content: space-between;
}
.section3 .col {
    width: 32%;
}
.section3 .bg {
    text-align: center;
    background-color: #fde7e7;
    width: 250px;
    height: 250px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto 50px;
}
.section3 .ge .bg img[src*="img13.png"] {
    width: 210px;
}
.section3 .ge .bg img[src*="img15.png"] {
    width: 210px;
    margin-left: 10px;
}

.section3 img {
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)
    translateY(-50%);
}
.section3 h3 {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
    color: #156faf;
}
.section3 .text2 {
    font-size: 14px;
    line-height: 1.8;
} 

@media screen and (max-width: 767px) {
    .section3 .row .ge{
        display: flex;
        flex-direction: column; /* 横並びを解除して縦にする */
        align-items: center;    /* 中央に寄せる */
        gap: 20px;
    }
  .section3 .ge .bg img[src*="img13.png"] {
    width: 140px;
}
.section3 .ge .bg img[src*="img15.png"] {
    width: 140px;
    margin-left: 10px;
}
 .section3 {
    padding: 0 0 90px 0;
 } 
 .section3 .row {
    flex-wrap: wrap;
     gap: 30px;
    }
    .section3 .col {
        width: 100%;
    }
    .section3 .bg {
        width: 160px;
        height: 160px;
        margin-bottom: 15px;
    }
    .section3 img {
        height: 90px;
    }
}



.section4 {
    padding: 0 0 124px 0;
}
.section4 h2 {
    font-size: 36px;
    font-weight: 700;
}
.section4 h2 span {
    color: #e11616;
}
.section4 .heading {
    font-size: 14px;
    font-weight: 700;
    color: #e11616;
    margin-bottom: 19px;
}
.section4 .text {
    line-height: 1.8;
    margin-bottom: 44px;
}
.section4 .row {
    display: flex;
    justify-content: space-between;
}
.section4 .col:first-child {
    width: 40%;
}
.section4 .col:last-child {
    width: 49%;
}
.section4 .btn {
    display: inline-block;
    background-color: #e11616;
    color: #fff;
    text-decoration: none;
    padding: 12px 35px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 100px;
}

@media screen and (max-width: 767px) {
    .section4 {
        padding: 0 0 30px 0;
    }
    .section4 .row {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 24px;
    }
    .section4 .col:first-child {
        width: 100%;
    }
    .section4 img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    .section4 .col:last-child {
        width: 100%;
        text-align: left;
    }
    .section4 .text {
        margin-bottom: 0; 
    }
    .section4 .btn {
        display: inline-block;
        margin-top: 25px;  
        margin-bottom: 35px; 
        line-height: 1;
    }
}



.section5 {
    text-align: center;
    margin-bottom: 57px;
}
.section5 .container {
    background-color: #fde7e7;
    border-radius: 20px;
    padding: 31px 0 40px;
}
.section5 h2 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 22px;
}
.section5 img {
    max-width: 180px;
    margin-bottom: 27px;
}
.section5 a {
    font-weight: 700;
    display: inline-block;
    background-color: #e11616;
    color: #fff;
    padding: 12px 30px 15px;
    border-radius: 100px;
}

@media screen and (max-width: 767px) {
    .section5 {
     margin-bottom: -20px;   
    }
    .section5 .container {
        padding: 24px 0;
    }
    .section5 h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    .section5 img {
        max-width: 130px;
    }
}


footer .logo img {
    width: 170px;     
    height: auto;
    margin-bottom: -15px;
}
footer {
    text-align: center;    /* 中身をすべて中央に寄せる */
    padding: 60px 0 30px; 
}
footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-nav ul {
    display: flex;         /* メニューを横並びにする */
    justify-content: center;/* 中央に揃える */
    list-style: none;      /* 点（・）を消す */
    margin: 20px 0;        /* ロゴとコピーライトとの間隔 */
    padding: 0;
}
.footer-nav ul li {
    margin: 0 15px;        /* メニュー同士の横の間隔 */
}
.footer-nav ul li a {
    text-decoration: none;
    color: #333;         
    font-weight: bold;
    font-size: 14px; 
}
.copyright {
    font-size: 12px;
    color: #999;
}
@media (max-width: 767px) {
    footer nav {
        display: none; 
    }
 footer .logo img {
        display: block;
        margin: 0 auto 7px;
    }
    
}



/*【 COMPANY 】*/
.page-title-area h1 span {
  color: #e11616;
}
.company-section h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0px 0 10px;
}

.company-section .subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #e11616;
  text-align: center;
  margin-bottom: 40px;
}
.rep-img {
    width: 200px;
    margin-top: 15px;
    border-radius: 5px;
    display: block;
　　}
.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.company-table th, .company-table td {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: left; 
}
.company-table th {
    background-color: #fde7e7; 
    width: 30%;
}
.company-section h1 span {
  color: #e11616;
}
.rep-img-container {
  margin-top: 70px;
  text-align: center;
}
.rep-img {
  width: 250px; 
  height: auto;
  border-radius: 5px;
  display: inline-block;
}


/*【 SERVICE 】*/
.service-section .page-title-area {
  margin-top: -25px; 
}
.service-section h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0px 0 10px;
}
.service-section .subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #e11616;
  text-align: center;
  margin-bottom: 40px;
}
.service-content {
  padding: 20px;
}
.service-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px; 
  gap: 5%;
}
.service-item.reverse {
  flex-direction: row-reverse;
}
.service-img {
  width: 40%;
  flex-shrink: 0;
}
.service-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain; 
  box-shadow: none;
  border-radius: 20px; 
  display: block;
}
.service-text {
  width: 45%;
  display: flex;        /* 縦に並べる力を出す */
  flex-direction: column; /* 上から順に並べる */
}
.service-text h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
  position: relative;
}
.service-text h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background-color: #e11616;
  vertical-align: middle;
  margin-right: 10px;
}
.service-text p {
  line-height: 1.8;
  color: #333;
}


@media screen and (max-width: 767px) {
  .service-item, 
  .service-item.reverse {
    flex-direction: column-reverse; 
    margin-bottom: 50px;
  }
  .service-img, 
  .service-text {
    width: 100%;
  }
.service-img {
  margin-top: 50px;    /* 画像の上の余白 */
  margin-left: auto;   /* 中央寄せ */
  margin-right: auto;  /* 中央寄せ */
  display: block;
}
    .service-section .subtitle {
    margin-bottom: 5px; 
}
  .service-text {
    display: flex;
    flex-direction: column;
    gap: 20px; 
  }
  /* 2. もともと付いている余白をゼロにする */
  .service-text h3 {
    margin-bottom: 0;
  }
.service-section {
      margin-bottom: -30px;  
    }
.service-content {
  display: flex;        /* flexを有効にする */
  flex-direction: column; /* 縦に並べる */
  gap: 50px;            /* アイテム同士の間隔 */
    }
.page-title-area {
    margin-bottom: 40px; 
    }
}





/*【 STORIES 】*/
.page-title-area h1 span {
  color: #e11616;
}
.stories-section h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0px 0 10px;
}
.stories-section .subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #e11616;
  text-align: center;
  margin-bottom: 40px;
}

.case {
    margin-bottom: 40px;
}
/*↑あとで調べる*/
.name {
    font-size: 1.4rem;
    font-weight: bold;
}
.name::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background-color: #e11616;
  vertical-align: middle;
  margin-right: 10px;
}
.info {
  color: #666;
  margin-bottom: 20px;
}



.tag-chekku {
    color: #156faf;
    font-weight: 600;
     font-size: 16px;
}
.stories-text .stories-text2 {
    line-height: 1.6;
}

.stories-item .stories-text p {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.tag-chekku::before {
    color: #156faf;
     content: "\2713"; /* チェック記号のコード */
  margin-right: 5px;
}
.stories-text2 .tag-nochekku {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}
/* 短いアクセント線（おしゃれの秘訣） */
.stories-text2 h3 {
font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-bottom: 2px solid #e0e0e0;
  width: fit-content; 
  padding: 0 15px 8px 15px;
  position: relative; 
}
.stories-text2 h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; 
  width: 40px; 
  height: 2px;
  background: #d32f2f; 
}
/* 短いアクセント線（おしゃれの秘訣）ここまで */

.stories-text2 {
    background: #fdf2f2;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    width: 100%;            /* 横幅を少し狭くする */
}
.stories-text2 p {
    font-weight: bold;
}


.client,
.stories-item,
.stories-text,
.stories-text2,
.case {
  display: flex;
  flex-direction: column;
}

.client { gap: 5px; }
.stories-item { gap: 30px; } 
.stories-text { gap: 10px; } 
.stories-text2 { gap: 10px; }
.case { gap: 100px; }

.stories-section .container {
  max-width: 800px;  /* ここで幅を決める */
  margin: 0 auto;      /* これで真ん中へ */
  padding: 0 40px;     /* 左右に少しゆとり */
}


@media screen and (max-width: 767px) {
.stories-section .container {
    max-width: 100%;  /* 横幅をいっぱいにする */
    padding: 0 15px;  /* 左右に最低限の余白だけ残す */
  }
}









/*【 CONTACT 】*/
.page-title-area h1 span {
  color: #e11616;
}
.contact-section h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0px 0 10px;
}
.contact-section .subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #e11616;
  text-align: center;
  margin-bottom: 40px;
}


.contact-content {
    padding: 10px 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content-form {
    border: 1.5px solid #aaa;
    padding: 80px 70px;
}
.title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    margin-bottom: 60px;
}
.contact-content .subtitle {
    display: block;
}
form {
    width: 460px;
}
.item {
    margin-bottom: 10px;
}
.label {
    margin-right: 20px;
    width: 135px;
    border-left: 3px solid #e11616;
    padding-left: 10px;
    display: inline-block;
    vertical-align: top;
}
.inputs {
    width: 300px;
    background-color: #fde7e7;
}
input[type="text"],
input[type="email"]{
    border: solid 1px #aaa;
    padding: 10px;
    font-size: 15px;
    border-radius: 5px;
}
textarea {
    text-align: left;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px;
    height: 160px;
    width: 300px;
    font-size: 15px;
    margin-bottom: 50px;
}
.button-area {
    text-align: center;
}

input[type="submit"] {
    width: 105px;
    background-color: #e11616;
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin: 0 5px;
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
    transition: .3s;
}
input[type="submit"]:hover {
    opacity: 0.8;
}
    
input[type="reset"] {
    background-color: #837a7a;
    border: none;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin: 0 5px;
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
    transition: .3s;
}
input[type="reset"]:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
  .contact-section {
    transform: scale(0.8);      /* 80%に縮小 */
    transform-origin: top center;
    width: 125%;               /* 縮小分を補う幅 */
    margin-left: -12.5%;       /* 中央に配置 */
      margin-bottom: -200px;
  }
  .content-form {
    border: 1.5px solid #aaa;  /* 黒い枠線を引く */
    margin: 0 20px;      /* 左右に隙間を作る */
  }
  form {
    width: 100%;
  }
    .label {
        margin-bottom: 10px;
    }
    .content-form p {
        font-size: 20px;
    }
#contact-title { font-size: 20px; }
    /* 1. タイトル下の巨大な余白を削る */
 /* ここを1箇所だけ書き換える（または追加する） */
  .content-form .title {
    font-size: 20px; 
    line-height: 1.4; /* 行間を整えて読みやすくする */
  }
    .content-form .title, 
  .content-form p {
    width: 100vw;       /* 画面いっぱいの幅にする */
    margin-left: -50px; /* 左の余白を無理やり突き破る */
    margin-right: -50px;/* 右の余白を無理やり突き破る */
    text-align: center;
     margin-bottom: 0px;
  }
}
/* --- 代表紹介エリア全体のスタイル --- */
.representative-area {
  padding: 60px 0;    /* 上下の余白 */
  text-align: center; /* 全体を中央寄せ */
}

/* 画像のスタイル */
.rep-intro-img {
  width: 300px;       /* 画像の横幅（お好みで調整） */
  height: 300px;       /* 比率は維持 */
  margin-bottom: 30px; /* 画像下の余白 */
  border-radius: 50%;
}

/* 役職名（代表取締役） */
.rep-post {
  font-size: 16px;    /* 文字の大きさ */
  color: #888;        /* 文字の色（グレー系） */
  font-weight: 500;   /* 文字の太さ */
  margin-bottom: 10px; /* 名前との間隔 */
}

/* 名前（川原 聖也） */
.rep-name {
  font-size: 32px;    /* 文字の大きさ */
  color: #333;        /* 文字の色（濃いグレー） */
  font-weight: 700;   /* 文字を太く */
  letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
  margin-bottom: 25px; /* 説明文との間隔 */
}
.rep-info .nemu {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 20px;
    max-width: 650px;   /* 下の説明文と同じ幅にする */
    margin: 0 auto;     /* これで説明文と同じ位置まで中央に寄る */
    width: 100%;
}

/* 説明文 */
.rep-description {
  font-size: 15px;    /* 文字の大きさ */
  color: #555;        /* 文字の色 */
  line-height: 2.0;   /* 行の間隔（広いほうが読みやすいです） */
  max-width: 650px;   /* 文章が横に広がりすぎないように制限 */
  margin: 0 auto;      
  text-align: left;  /* 文章自体は左寄せ（読みやすさ優先） */
}









/*修正*/