@charset "utf-8";

/* ボタンに関する初期設定 */
*,
*:before,
*:after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}


/* ボーダーボックスに */
html {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* ボタンに関する初期設定 */
.btn,
button.btn {
   font-size: 1.6rem;
   font-weight: 700;
   line-height: 1.5;
   position: relative;
   display: inline-block;
   padding: 1rem 4rem;
   cursor: pointer;
   user-select: none;
   transition: all 0.3s;
   text-align: center;
   vertical-align: middle;
   text-decoration: none;
   letter-spacing: 0.1rem;
   color: #212529;
   border-radius: 0.5rem;
}

.btn:hover,
.btn:focus {
   color: #fff;
   background-color: #212529;
}



body {
   background-color: #fff;
   font-size: 16px;
   color: #252525;
   font-family: 'Noto Sans JP', sans-serif;
}

a {
   text-decoration: none;
   color: #252525;
}

img {
   max-width: 100%;
   vertical-align: center;
}

li {
   list-style: none;
}

/* サイドメニューの横幅だけ左にマージンをとる */
.container {
   margin-left: 300px;
}

/* コンテンツ幅を設定するための共通クラス */
.wrapper {
   max-width: 900px;
   padding: 80px 20px;
   margin: 0 auto;
}

.site_title {
   width: 200px;
   line-height: 1px;
   margin-bottom: 30px;
}

.site_title a {
   display: block;
}

/* セクションタイトル */
.sec_title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 1.75rem;
   margin-bottom: 60px;
   text-align: center;
}

.sec_title::before,
.sec_title::after {
   border-top: 1px solid;
   content: "";
   width: 28%;
}

#entry span {
   font-weight: bold;
   color: #264a79;
}

/* ヘッダー */
#header {
   width: 300px;
   height: 100%;
   background-color: #fff;
   padding: 40px 50px 30px 45px;
   position: fixed;
   top: 0;
   border-right: 1px solid #868686;
   /* 画面の高さが低くてレイアウト崩れてしまった場合縦スクロールできるように */
   overflow-y: auto;
}

#header .nav_menu {
   margin-bottom: 60px;
}

#header li {
   font-size: 1.1rem;
   padding: 8px 0;
}

#right_nav {
   width: 64px;
   position: fixed;
   top: 0;
   right: 0;
   z-index: 999;
   writing-mode: vertical-rl;
}

#right_nav ul {
   display: block;
   display: flex;
}

#right_nav ul .right_rcruit {
   text-align: center;
   background-color: #000;
   width: 100%;
   height: 175px;
   line-height: 64px;

}

#right_nav ul .right_rcruit a {
   color: #fff;
   font-weight: bold;
   font-size: 16px;
   display: block;
}

#right_nav ul .right_contact {
   text-align: center;
   background-color: #ccc;
   width: 100%;
   height: 175px;
   line-height: 64px;
}

#right_nav ul .right_contact a {
   font-weight: bold;
   font-size: 16px;
   display: block;
}

#navi .nav_tel {
   border: 1px solid #414141;
   padding: 20px;
   text-align: center;
}

#navi .nav_tel span {
   font-size: 1.3rem;
   font-weight: bold;
}

/* ビデオ */

/* 動画を全画面表示 */
#video {
   width: 100%;
   height: 100vh;
   position: relative;
}

#top_img {
   width: 100%;
   height: auto;
   -o-object-fit: cover;
   object-fit: cover;
   position: relative;
   background-color: #000;
}

#top_img img {
   opacity: 0.7;
}

#video .bg_video {
   position: fixed;
   width: 100%;
   height: auto;
   /* top: -220px; */
   z-index: -10;
}

#video .text {
   position: absolute;
   width: 80%;
   top: 50%;
   left: 40%;
   transform: translate(-50%, -50%);
   padding: 0;
   margin-left: 50px;
   font-size: 3.5rem;
   letter-spacing: -0.1em;
   font-weight: bold;
   color: #fff;
   opacity: 0.9;
   text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
   overflow: hidden;
}

#video .text span {
   display: inline-block;
   opacity: 0;
   transform: translateY(100%);
   animation: slideInFromBottom 0.5s forwards;
   animation-delay: 1s;
   /* 0.1秒ずつ遅延して表示 */
}

@keyframes slideInFromBottom {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

#top_img p {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 4.0rem;
   font-weight: bold;
   color: #fff;
   opacity: 0.9;
   text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
}

/* リンク先の下線処理 */
#navi .nav_menu,
#footer .menu {
   display: inline-block;
}

#navi .nav_menu li,
footer .menu li {
   padding-bottom: 4px;
   position: relative;
}

#navi .nav_menu li a,
footer .menu li a {
   display: inline-block;
}

#navi .nav_menu a::after {
   background-color: #121212;
   bottom: 0;
   content: '';
   display: block;
   height: 1px;
   left: 0;
   position: absolute;
   transition: .5s all;
   width: 0;
}

footer .menu li a::after {
   background-color: #ccc;
   bottom: 0;
   content: '';
   display: block;
   height: 1px;
   left: 0;
   position: absolute;
   margin-bottom: -4px;
   transition: .5s all;
   width: 0;
}

#navi .nav_menu a:hover::after,
footer .menu li a:hover::after {
   width: 100%;
}

/* サイドナビホバー自の色変更 */
#right_nav ul li:hover {
   transition: .5s all;
   background-color: #264a79;
}

/*
セクション1 project
*/
#project .splide__slide img {
   width: 100%;
   object-fit: cover;
}

#project {
   background-color: #fff;
}

#project p {
   margin-bottom: 40px;
}

#project .list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

#project .list li {
   width: 47%;
   border: solid 1px #000000;
   margin-bottom: 50px;
   position: relative;
}

/* 下段二つはマージンを設定しない */
#project .list li:last-child,
#project .list li:nth-last-child(2) {
   margin-bottom: 0;
}

#project .list li a {
   display: block;
}

#project .list img {
   object-fit: cover;
}

/*
セクション2 Feature
*/
#feature {
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   padding-bottom: 80px;
}

#feature .list {
   display: flex;
   justify-content: space-between;
}

#feature .list li {
   width: 30%;
   font-size: 0.875rem;
   text-align: center;
}

/*
円を作成

レスポンシブに対応した可変サイズの円を作成する場合は、
widthに100%を設定して、paddingで上下を50%に設定
今回は円の中にテキストが入っているのと、枠線をつけているため、
50%から上下それぞれテキストの高さ（10px）とボーダー（1px）をマイナスしている
※テキストの高さは、ディベロッパーツールで20pxと確認できるため、
上下で分割してそれぞれ10pxとなる。

*/
#feature .list li a {
   width: 100%;
   border: solid 1px #fff;
   border-radius: 50%;
   color: #fff;
   display: block;
   padding: calc(50% - 11px) 0;
   margin-bottom: 15px;
   text-align: center;
   position: relative;
   /* ホバー時に要素を隠すために設定 */
   overflow: hidden;
}

/*
ホバー時のスライドを疑似要素で作成
初期位置は left: -100%で左側に隠して置く
*/


#feature .feature_txt {
   margin-top: 80px;
   text-align: center;
   vertical-align: center;
   font-size: 2.3em;
}

/* 
セクション3　Flow
 */
#flow {
   background-color: #fff;
   padding-top: 40px;
}

#flow .step {
   display: flex;
   margin-top: 60px;
}

#flow .figure {
   position: relative;
}

/* 図形下の黄色い枠線を作成 */
#flow .figure::before {
   content: "";
   width: 50px;
   height: 600px;
   background-color: #ffdd00;
   position: absolute;
   top: 0;
   left: 75px
}

/* 図形の四角い部分を作成 */
#flow .figure li {
   width: 200px;
   height: 80px;
   line-height: 80px;
   background-color: #414141;
   color: #fff;
   font-size: 0.875rem;
   margin-bottom: 60px;
   position: relative;
   text-align: center;
}

/* 図形の三角部分を疑似要素で作成
position を使用して、四角の下に配置、台形にする */
#flow .figure li::before {
   content: "";
   border-top: 30px solid #414141;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
   position: absolute;
   top: 80px;
   right: 0;
   left: 0;
   margin: 0 auto;
}

#flow .figure li:last-child {
   margin-bottom: 0;
}

#flow .description {
   margin-left: 10%;
}

#flow .description dt {
   border-bottom: solid 1px #121212;
   font-size: 1.25rem;
   padding-bottom: 8px;
   margin-bottom: 10px;
   position: relative;
}

/* 
丸数字を作成
position を使用して、タイトルの左側に配置
 */
#flow .description dt span {
   width: 35px;
   height: 35px;
   line-height: 35px;
   background-color: #414141;
   border-radius: 50%;
   color: #fff;
   display: block;
   font-size: 1rem;
   text-align: center;
   position: absolute;
   bottom: 0;
   left: -45px;
}

#flow .description dd {
   margin-bottom: 43px;
}

#flow .description dd:last-child {
   margin-bottom: 0;
}


/* 
セクション4 contact
 */
#contact {
   background-color: #fff;
   padding-bottom: 80px;
}

#contact .link {
   display: flex;
   justify-content: center;
   margin-top: 60px;
}

#contact .link .item {
   width: 30%;
   border: solid 1px #121212;
   display: block;
   font-size: 0.875rem;
   position: relative;
   padding: 50px 0;
   text-align: center;
   transition: 0.1s;
}

#contact .link .item::before {
   content: "";
   border-top: 20px solid transparent;
   border-right: 20px solid #121212;
   position: absolute;
   right: 4px;
   bottom: 4px
}

/*
ホバー時は枠線を太くする
「border」ではなく「outline」を使用することで、ホバー時にレイアウトがずれるのを防ぎます。
*/
#contact .link .item:hover {
   outline: solid 3px #121212;
}

#contact .link .item img {
   margin-bottom: 5px;
}

.form-group {
   margin-bottom: 1.5rem;
   display: flex;
   flex-direction: column;
   border: none;
}

.form-group label,
.form-group legend {
   font-weight: bold;
   margin-bottom: 0.5rem;
}

.radio-group {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.radio-group.no-border {
   border: none;
   padding: 0;
   margin: 0;
}

.radio-group label {
   display: inline-flex;
   align-items: center;
   gap: 0.25em;
   font-size: 1rem;
   line-height: 1.4;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
   padding: 0.75rem;
   font-size: 1rem;
   border: 1px solid #ccc;
   border-radius: 0.4rem;
   max-width: 100%;
   background-color:#fff;
}

/* デフォルトを打ち消して自作 */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #bbbbbb; /* lightモードの枠線に近い色 */
  background-color: #fff; /* 背景は白 */
  cursor: pointer;
}

/* 選択されたときの中の丸 */
input[type="radio"]:checked {
  border: 5px solid #333;  /* 内側を黒丸で再現 */
  background-color: #fff;  /* 背景は白を維持 */
}

textarea {
   resize: vertical;
}

.required {
   color: red;
   margin-left: 0.25rem;
}

.radio-group {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}


/* 必須マーク */
.required-label::after {
   content: " 必須";
   color: #fff;
   background-color: #d9534f;
   font-size: 0.75rem;
   font-weight: bold;
   padding: 0.2em 0.5em;
   margin-left: 0.5em;
   border-radius: 0.3em;
   vertical-align: middle;
   display: inline-block;
}

/* セクション5　会社概要 */
#about {
   background-color: #fff;
   /* padding-bottom: 80px; */
}

#about h3 {
   line-height: 3.5;
}

#about .about_table {
   width: 100%;
   border-collapse: collapse;
   margin: 80px 0;
}

#about .about_table th,
#about .about_table td {
   padding: 20px 30px;
   border: 1px solid #aaaaaa;
}

#about .about_table th {
   background-color: #ccc;
   width: 150px;
   text-align: left;
}

#about .about_table td {
   width: calc(100% - 150px);
}

/* 代表の声 */
.president_voice {
   display: flex;
   justify-content: space-between;
   width: 96%;
   max-width: 1000px;
   margin: 0 auto;
}

.president_voice img {
   width: 45%;
   height: auto;
   margin: 0 auto auto auto;
}

.comment {
   width: 45%;
   margin: 0 auto;
   text-align: justify;
}

.name {
   display: block;
   text-align: right;
   margin-top: 1em;
}

/* グーグルマップレスポンシブ */
#about iframe {
   width: 100%;
   aspect-ratio: 16/9;
}

#about .suppliers {
   margin-bottom: 40px;
}

/* 採用情報セクション */
.job {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   margin-top: 40px;
}

.job>div {
   padding: 0 10px;
}


.job .card_thumbanil {
   width: 100%;
}

/* 採用情報キャッチコピー */

#entry_cc {
   display: block;
   margin-top: 120px;
   margin-bottom: 40px;
}

#entry_cc .entry_ttl {
   margin: 0 auto;
   padding: 40px;
}


/* 職種別募集要領 */
#info .info_job {
   display: flex;
   font-size: .9rem;
   padding-top: 40px;
   margin-bottom: 80px;
   padding-bottom: 40px;
   border-bottom: 1px solid #868686;
}

#info .info_job:nth-child(6) {
   border-bottom: none;
   margin-bottom: 0;
}

#info .reverse {
   flex-direction: row-reverse;
}

#info .info_job_img {
   width: 50%;
}

#info .info_ttl {
   font-size: 2rem;
   color: #264a79;
   text-align: center;
   margin-bottom: 20px;
}

#info .info_job_tbl {
   width: 50%;
   border-collapse: collapse;
   margin: 0 auto;
   padding: 20px;
}

#info .info_job_tbl table th,
#info .info_job_tbl table td {
   text-align: left;
   padding: 10px;
   border: 1px solid #aaaaaa;
}

#info .info_job_tbl table td {
   width: calc(100% - 150px);
}

#info .info_h3 {
   margin: 40px 0 10px 0;
   border-bottom: solid 1px #121212;
   line-height: 2;
}

/* カード */
.l-wrapper {
   margin: 1rem auto;
   width: 100%;
}

.l-wrapper:hover {
   transform: translateY(-3px);
   box-shadow: 0 7px 14px rgba(50, 50, 93, .1),
      0 3px 6px rgba(0, 0, 0, .08);
   transition: all .5s;
}

.d_none {
   visibility: hidden;
}

.card {
   background-color: #fff;
   box-shadow: 0 0 8px rgba(0, 0, 0, .16);
   color: #212121;
}

.card_header {
   display: flex;
   flex-wrap: wrap;
}

.card_title {
   padding: 1rem 1.5rem 0;
   font-size: 1.6rem;
   order: 1;
   margin-bottom: 0.6rem;
   font-weight: bold;
   text-decoration: none;
}

.card_thumbanil {
   margin: 0;
   order: 0;
   max-width: 100%;
   object-fit: cover;
}

.card_image {
   width: 100%;
   max-width: 100%;
   object-fit: cover;

}

.card_body {
   padding: 0 1.5rem;
}

.card_text {
   font-size: .8rem;
   text-align: center;
   text-decoration: none;
   padding-bottom: 0;
}

.card_text2 {
   font-size: .8rem;
   margin-top: 0;
   margin-bottom: 2rem;
}

.card_text+.card_text {
   margin-top: .5rem;
}

.card_footer {
   padding: 1rem;
   border-top: 1px solid #ddd;
}

.button {
   display: inline-block;
   text-decoration: none;
   transition: background-color .3s ease-in-out;
   text-align: center;
}

.button a {
   text-decoration: none;
}

.button.-compact {
   padding: .5rem 1rem;
   border-radius: .25rem;
   background-color: #264a79;
   color: #fff;
   font-weight: bold;
   text-decoration: none;
}

.button.-compact:hover,
.button.-compact:focus {
   background-color: #6bb6ff;
}

/* 採用情報セクション１ */

/* 
フッター
 */
#footer {
   background-color: #121212;
   color: #fff;
   padding: 20px 0;
}

#footer .menu {
   display: flex;
   justify-content: center;
   margin: 30px 0 60px 0;
}

#footer .menu li {
   border-right: solid 1px #fff;
   font-size: 0.875rem;
   padding: 0 20px;
}

#footer .menu li:last-child {
   border-right: none;
}

#footer .menu li a {
   color: #fff;
}

#footer .copyright {
   font-size: 0.75rem;
   text-align: center;
}

/* 
トップへ戻るボタン
表示・非表示の切り替えはjQueryで行う
 */
#to_top {
   width: 50px;
   height: 50px;
   background-color: #121212;
   border: solid 1px #fff;
   border-radius: 50%;
   position: fixed;
   right: 25px;
   bottom: 25px;
   z-index: 999;
}

/* 中の三角は疑似要素で作成 */
#to_top::after {
   content: "";
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #fff;
   position: relative;
   left: 17px;
   bottom: 3px;
}

/* ローディングアニメーション */
#loading {
   transition: all 1s;
   /* ローディングにかかる時間 */
   background-color: #eee;
   z-index: 9999;
   position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.loading-text {
   font-weight: bold;
   text-align: center;
}

.loaded {
   opacity: 0;
   visibility: hidden;
}

/* spinner by spinkit 
https://tobiasahlin.com/spinkit/
*/

.spinner {
   margin: 100px auto;
   width: 40px;
   height: 40px;
   position: relative;
   text-align: center;

   -webkit-animation: sk-rotate 2.0s infinite linear;
   animation: sk-rotate 2.0s infinite linear;
}

.dot1,
.dot2 {
   width: 60%;
   height: 60%;
   display: inline-block;
   position: absolute;
   top: 0;
   background-color: #333;
   border-radius: 100%;
   -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
   animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
   top: auto;
   bottom: 0;
   -webkit-animation-delay: -1.0s;
   animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate {
   100% {
      -webkit-transform: rotate(360deg)
   }
}

@keyframes sk-rotate {
   100% {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg)
   }
}

@-webkit-keyframes sk-bounce {

   0%,
   100% {
      -webkit-transform: scale(0.0)
   }

   50% {
      -webkit-transform: scale(1.0)
   }
}

@keyframes sk-bounce {

   0%,
   100% {
      transform: scale(0.0);
      -webkit-transform: scale(0.0);
   }

   50% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
   }
}

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

.scroll_up.on {
   transform: translateY(0);
   opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
   -webkit-transition: 0.8s ease-in-out;
   -moz-transition: 0.8s ease-in-out;
   -o-transition: 0.8s ease-in-out;
   transition: 0.8s ease-in-out;
   transform: translateX(-30px);
   opacity: 0;
   filter: alpha(opacity=0);
   -moz-opacity: 0;
}

.scroll_left.on {
   opacity: 1.0;
   filter: alpha(opacity=100);
   -moz-opacity: 1.0;
   transform: translateX(0);
}

/* ===== Validation (Global) ===== */
.error-msg {
   font-size: .875rem;
   margin-top: .25rem;
   color: #d93025;
   /* エラーテキスト色 */
}

.invalid {
   border-color: #d93025;
   outline: none;
   box-shadow: 0 0 0 2px rgba(217, 48, 37, .12);
}

/* メッセージ表示（成功/エラー） */
.form-message {
   margin: 0 auto;
   /* 上に余白、左右は中央寄せ */
   font-size: 0.85rem;
   border-radius: 0.4rem;
   padding: 1rem;
   max-width: 600px;
   /* 横幅を制限（任意で数値調整） */
   text-align: justify;
   /* 両端揃え */
   line-height: 1.4;
   /* 行間を少し広めに */

}

.form-message.success {
   color: #0f9d58;
   border: solid 2px #0f9d58;
}

/* 緑 */
.form-message.error {
   color: #d93025;
}

/* 赤 */


/*
デザインA（スマートフォン）
*/
@media screen and (max-width: 959px) {
   #entry {
      background-color: #fff;
   }

   .container {
      margin-left: 0;
   }

   .wrapper {
      padding: 60px 20px;
   }

   .btn,
   a.btn,
   button.btn {
      font-size: 1.2rem;
   }


   .site_title {
      width: 120px;
      margin-bottom: 0;
      position: relative;
      left: 18px;
      top: 10px;
   }

   .sec_title {
      font-size: 1.25rem;
      margin-bottom: 30px;
   }

   .sec_title::before,
   .sec_title::after {
      width: 18%;
   }


   /* ヘッダー */
   #header {
      width: 100%;
      height: 96px;
      padding: 0;
      z-index: 10;
   }

   #right_nav {
      width: 100%;
      top: auto;
      bottom: 0;
      right: 0;
      writing-mode: horizontal-tb;
   }

   /* #right_nav ul .right_rcruit {
      width: 50%;
      height: 54px;
      line-height: 54px;
   } */

   #right_nav ul .right_contact {
      width: 100%;
      height: 54px;
      line-height: 54px;
   }

   /* ハンバーガーメニュー */
   #navi {
      width: 300px;
      background: #fff;
      padding: 25px;
      position: fixed;
      top: 0;
      left: -300px;
      bottom: 0;
      opacity: 0;
      overflow-y: auto;
      transition: 0.5s;
      z-index: 20;
   }

   .open #navi {
      left: 0;
      opacity: 1;
   }

   #navi ul .nav_menu {
      margin-bottom: 30px;
   }

   #navi ul li {
      padding: 10px 0;
   }

   .hamburger {
      width: 30px;
      height: 30px;
      cursor: pointer;
      position: fixed;
      top: 22px;
      right: 18px;
      transition: 0.5s;
      z-index: 20;
   }

   .hamburger span {
      width: 30px;
      height: 2px;
      background-color: #121212;
      border-radius: 4px;
      display: block;
      position: absolute;
      left: 0;
      transition: 0.5s;
   }

   .hamburger span:nth-child(1) {
      top: 4px;
   }

   .hamburger span:nth-child(2) {
      top: 14px;
   }

   .hamburger span:nth-child(3) {
      bottom: 4px;
   }

   .open .hamburger span {
      background-color: #fff;
   }

   .open .hamburger span:nth-child(1) {
      transform: translateY(10px) rotate(-315deg);
   }

   .open .hamburger span:nth-child(2) {
      opacity: 0;
   }

   .open .hamburger span:nth-child(3) {
      transform: translateY(-10px) rotate(315deg);
   }

   #mask {
      display: none;
      transition: 0.5s;
   }

   .open #mask {
      width: 100%;
      height: 100%;
      background-color: #000;
      cursor: pointer;
      display: block;
      opacity: 0.8;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
   }

   /* スマホの場合は動画が見切れないように高さを調整 */
   #video {
      height: 80vh;
      /* 動画の横はみ出し防止 */
      overflow: hidden;
   }

   #video .bg_video {
      height: 520px;
      width: auto;
      top: 72px;
      left: 0;
      right: 0;
      margin: 0 auto;
   }

   #video .text,
   #top_img p {
      font-size: 2.4rem;
   }

   /* job */
   .job {
      display: flex;
      flex-wrap: wrap;
   }

   /* Project */
   #project .list {
      flex-direction: column;
   }

   #project .list li {
      width: 100%;
      margin-bottom: 30px;
   }

   #project .list li:nth-child(2),
   #project .list li:nth-child(3) {
      margin-bottom: 30px;
   }

   #project .list img {
      object-fit: cover;
      width: 100%;
   }

   /* feature */
   #feature {
      padding-bottom: 40px;
   }

   #feature .feature_txt {
      font-size: 1.2em;
   }

   /* Flow */
   #flow {
      padding-top: 0;
   }

   #flow .step {
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
   }

   #flow .figure {
      margin-bottom: 80px;
   }

   /* 図形の下の黄色い枠線を中央に配置 */
   #flow .figure::before {
      left: 0;
      right: 0;
      margin: 0 auto;
   }

   #flow .figure li {
      width: calc(100vw - 80px);
   }

   #flow .figure li::before {
      border-left: calc(50vw - 40px) solid transparent;
      border-right: calc(50vw - 40px) solid transparent;
   }

   #flow .description {
      margin-left: 50px;
   }

   /* Contact */
   #contact {
      padding-bottom: 60px;
   }

   #contact .link {
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
   }

   #contact .link .item {
      width: 90%;
      margin: 20px 0 0 0;
   }

   #contact .link .item:first-child {
      margin-top: 0;
   }

   .radio-group {
      /* flex-direction: column; */
   }

   #about {
      background-color: #fff;
   }

   #about .about_table th,
   #about .about_table td {
      width: 100%;
      display: block;
   }

   .form-group {
      margin-bottom: 1rem;
   }

   .form-group label,
   .form-group legend {
      font-size: 0.95rem;
   }

   input[type="text"],
   input[type="email"],
   input[type="tel"],
   select,
   textarea {
      font-size: 0.95rem;
      padding: 0.6rem;
   }

   .radio-group label {
      font-size: 0.9rem;
   }

   textarea {
      min-height: 100px;
   }

   button.btn {
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
   }

   /* info_job */
   #info .info_job {
      flex-direction: column;
      width: 100%;
   }


   #info .info_job_img {
      width: 100%;
      object-fit: cover;
   }

   #info .info_job_tbl {
      width: 100%;
   }

   /* フッター */
   #footer {
      padding-bottom: 64px;
   }

   #footer .menu {
      flex-wrap: wrap;
   }

   #footer .menu li {
      margin-top: 10px;
   }

   .d_none {
      display: none;
   }

   /* realtime validation */
   .error-msg {
      font-size: .875rem;
      margin-top: .25rem;
      color: #d93025;
   }

   .invalid {
      border-color: #d93025;
      outline: none;
      box-shadow: 0 0 0 2px rgba(217, 48, 37, .12);
   }
}

@media screen and (max-width: 768px) {

   /* 代表の声 */
   .president_voice {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 96%;
      max-width: 1000px;
      margin: 0 auto;
   }

   .president_voice img {
      width: 60%;
      min-width: 300px;
      height: auto;
      margin: 0 auto auto auto;
   }

   .comment {
      width: 94%;
      margin: 30px auto 0 auto;
      text-align: justify;
   }

   .name {
      display: block;
      text-align: right;
      margin-top: 1em;
   }
}