@charset "utf-8";

/*------------------------------------------------------------------------------
  font
------------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/

html,
input,
textarea,
select,
button {
  font-family:
    sans-serif,
    "游ゴシック体",
    YuGothic,
    "游ゴシック",
    "Yu Gothic",
    "メイリオ",
    Meiryo,
    Noto Sans JP;
  font-weight: 500;
}

html {
  color: #494949;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-all;
}

body {
  background: #fff;
  margin: 0;
}

body.is_open {
  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
  margin: 0;
  vertical-align: top;
  max-width: 100%;
}

p,
span {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-weight: 600;
}

p:last-child {
  margin-bottom: 0;
}

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

input[type="submit"],
input[type="text"],
select,
textarea,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

select::-ms-expand {
  display: none;
}

textarea {
  resize: vertical;
}

button {
  border: none;
  cursor: pointer;
  background: none;
}

label {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

#wrapper {
  position: relative;
}

@media screen and (min-width: 751px) {
  a,
  a:before,
  a:after,
  a img:hover,
  button {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  a:hover,
  a img:hover,
  button:hover {
    opacity: 0.7;
  }
}

/*------------------------------------------------------------------------------
  css
------------------------------------------------------------------------------*/

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

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

  .sp {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  /*ここに記入します*/
}

/*------------------------------------------------------------------------------
  c_button
------------------------------------------------------------------------------*/
.c_button {
  font-family: "Times New Roman";
  font-size: 18px;
  letter-spacing: 0.04em;
  border: 1px solid #2c3e50;
  border-radius: 100px;
  padding: 12px 70px;
  display: inline-block;
}

.c_button:hover {
  color: #fff;
  background-color: #2c3e50;
}

/*------------------------------------------------------------------------------
  header
------------------------------------------------------------------------------*/
.header {
  width: 100%;
  text-align: center;
}

h1 {
  margin: 0 0 15px;
}

h2 {
  font-family: "Times New Roman";
  font-size: 60px;
  letter-spacing: 0.04em;
  color: #204443;
}

.logo {
  font-family: Gurmukhi MN;
  font-size: 60px;
  font-weight: 400;
}

.nav_list {
  text-align: center;
  border-top: 0.5px solid #9c9c9c;
  padding: 30px 0 25px;
}

.nav_list li {
  display: inline;
  margin-right: 80px;
  font-family: "Times New Roman";
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.08em;
}

/*-----------------------------
  mv
-----------------------------*/
.mv_block {
  width: 100%;
  position: relative;
}

.mv_block img {
  width: 100%;
  object-fit: cover;
}

.mv_text {
  position: absolute;
  left: 64px;
  top: 320px;
  letter-spacing: 0.08em;
  color: #fff;
}

.mv_main {
  font-family: Gurmukhi MN;
  font-size: 100px;
  font-weight: 400;
}

.mv_text_1 {
  font-size: 32px;
  margin: 5px 0 18px;
}

.mv_text_2 {
  font-size: 18px;
}

/*-----------------------------
  news
-----------------------------*/
.news_block {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.news_block h2 {
  text-align: left;
  padding-bottom: 30px;
  margin-top: 150px;
}

.news_slider a {
  margin-right: 33px;
  border: 1px solid #204443;
  height: 404px;
  transform: scale(0.9);
  transform-origin: top left; /* 左上を起点に小さくする */
  margin-right: 15px; /* scaleで小さくなった分、隙間を微調整 */
}

.news_text {
  display: flex;
  gap: 15px;
  margin: 22px 0 15px 17px;
}

.news_text .date {
  font-size: 15px;
}

.news_text .category {
  font-size: 10px;
  background-color: #204443;
  color: #fff;
  border-radius: 17px;
  padding: 3px 10px;
}

.news p {
  text-align: left;
  margin: 15px 0 0 17px;
}

.news_block .c_button {
  margin-top: 40px;
}

/*-----------------------------
  concept
-----------------------------*/
.cct_block {
  width: 1200px;
  margin: 0 auto;
}

.cct {
  display: flex;
  justify-content: space-between;
  padding-top: 140px;
}

.cct h2 {
  margin-top: -25px;
}

.cct .cct_main_text {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 110px 0 90px;
}

.cct .cct_text {
  font-size: 23px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 70px;
}

.cct_wrap {
  margin-left: 70px;
}

/*-----------------------------
  PRODUCTS
-----------------------------*/
.pdt_block {
  width: 1200px;
  margin: 0 auto;
}

.pdt_block h2 {
  padding-top: 110px;
}

.pdt_block p {
  font-size: 25px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  margin: 55px 0 48px;
}

.care_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 90px;
  padding: 0 50px;
}

.care_list {
  position: relative;
}

.care_list .care_category {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 32px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.care_more a {
  position: absolute;
  bottom: 42px;
  left: 201px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 8px;
}

/*-----------------------------
  FAQ
-----------------------------*/
.faq_block {
  width: 1200px;
  margin: 0 auto;
}

.faq {
  text-align: center;
}

.faq_wrap {
  display: grid;
  /* 左（FAQ見出し）を固定し、右（アコーディオン）を可変にする設定 */
  grid-template-columns: 220px 1fr;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 120px;
}

.faq_wrap h2 {
  text-align-last: left;
  margin-top: -20px;
}

.accordion {
  border-bottom: 1px dashed #000;
}

.accordion_summary {
  background-color: #fff; /* 見出しの背景色 */
  position: relative;
  cursor: pointer;
  padding: 21px 0;
  width: 100%; /* 見出しの横幅 */
  font-size: 18px; /* 見出しの文字サイズ */
  font-weight: 400; /* 見出しの太さ */
  appearance: none; /* buttonのスタイルリセット */
  border-top: 1px dashed #000; /* buttonのスタイルリセット */
  text-align: start; /* buttonのスタイルリセット */
}

.accordion_summary::before {
  content: "Q";
  font-family: "noto sans jp";
  font-size: 20px;
  font-weight: 400;
  padding-right: 23px;
  padding-left: 15px;
}

.accordion_summary::after {
  content: "+";
  font-size: 25px; /* 記号のサイズ */
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* 共通設定（メディアクエリの外に書くのが安全） */
.accordion_summary::after {
  content: "+";
  /* 既存のスタイル */
}

/* クラスがついた時の「ー」の設定 */
.accordion_summary.accordion_summary-open::after {
  content: "−"; /* ここが確実に反映されるようにする */
}

.accordion_detail {
  display: none;
  padding: 0 10px;
  background-color: #8b8989;
  background-color: rgba(139, 137, 137, 0.1);
}
.accordion_text {
  margin: 0;
  font-size: 18px; /* 見出しの文字サイズ */
  font-weight: 400; /* 見出しの太さ */
  padding: 24px 0;
  /* レイアウト調整 */
  display: flex; /* A と テキストを横並びにする */
  align-items: flex-start; /* 上揃え */
  text-align: left;
}

.accordion_text::before {
  content: "A";
  font-family: "noto sans jp";
  font-size: 20px;
  font-weight: 400;
  /* 余白調整 */
  padding-right: 20px;
  padding-left: 10px;
  /* 固定幅を持たせることで、2行目の開始位置を固定する */
}

.faq .c_button {
  margin-top: 38px;
}

/*-----------------------------
  RECRUITMENT
-----------------------------*/

.rcr {
  margin-top: 120px;
  position: relative;
}

.rcr img {
  width: 100%;
  object-fit: cover;
}

.rcr h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 20px;
  text-decoration-thickness: 1px;
  z-index: 100;
}

/*-----------------------------
  footer
-----------------------------*/
.footer_wrap {
  margin: 110px 0 60px;
  text-align: center;
}

.footer_nav {
  display: flex;
  gap: 60px;
  justify-content: center;
  font-family: "Times New Roman";
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing: 0.04em;
}

.f_logo {
  font-family: "Gurmukhi MN";
  font-size: 50px;
  letter-spacing: 0.04em;
  margin-bottom: 90px;
}

.footer_wrap p {
  font-family: "Times New Roman";
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/*------------------------------------------------------------------------------
  ブレークポイント
------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
  /* 1. 固定幅(1200px)の解除 */
  .news_block,
  .cct_block,
  .pdt_block,
  .faq_block {
    width: 90%; /* 1200pxを解除して画面幅いっぱいにする */
    padding: 0 20px; /* 左右に少し余白を作る */
  }

  h2 {
    font-size: 40px;
  }

  main {
    margin-top: 70px;
  }

  /*------------------------------------------------------------------------------
  header
------------------------------------------------------------------------------*/
  .header {
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 100;
    text-align: left;
    transition:
      background-color 0.2s ease,
      visibility 0.4s ease;
  }

  .logo {
    font-size: 40px;
    padding: 5px 0 0 15px;
  }

  .header.is_open {
    background-color: #204443;
  }

  .header.is_open .logo.sp {
    color: #fff;
  }

  .header.is_open .nav {
    opacity: 1;
    visibility: visible;
  }

  .nav {
    opacity: 0;
    visibility: hidden;
    background-color: #204443;
    width: 100%;
    position: fixed;
    top: 70px;
    right: 0;
    height: calc(100vh - 70px);
    padding-bottom: 20px;
    overflow: scroll;
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }

  .header .nav_open {
    position: absolute;
    top: 10px;
    right: 0;
    padding: 0 10px 0;
  }

  .header .batu {
    display: none;
  }

  .header.is_open .batu {
    display: block;
  }

  .header .open {
    display: block;
  }

  .header.is_open .open {
    display: none;
  }

  .nav_list {
    padding: 0 0;
  }

  .nav_list li {
    display: block;
    margin-right: 0px;
    font-size: 27px;
    font-weight: 400;
    padding: 30px 0;
    text-align: left;
    border-bottom: 1px solid #9c9c9c;
  }

  .nav_list li a {
    color: #fff;
    margin-left: 25px;
  }

  .nav_list_top {
    border-top: 1px solid #9c9c9c;
  }

  h1 {
    margin: 0;
  }

  /*------------------------------------------------------------------------------
  mv
------------------------------------------------------------------------------*/

  .mv_block img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .mv_text {
    left: 34px;
    top: auto;
    bottom: 20px;
    letter-spacing: 0.04em;
  }

  .mv_main {
    font-size: 12vw;
  }

  .mv_text_1 {
    font-size: 4vw;
    margin: 5px 0 9px;
  }

  .mv_text_2 {
    font-size: 3vw;
  }

  /*------------------------------------------------------------------------------
  news
------------------------------------------------------------------------------*/

  .news_block h2 {
    margin-top: 45px;
    padding-bottom: 15px;
  }

  /* スライダー要素の修正 */
  .news_slider a {
    transform: scale(0.8);
    transform-origin: top center; /* 中央起点にするとバランスが良くなります */
    margin-right: -20px; /* 横の隙間調整 */
    margin-bottom: -60px; /* ★ここで下の空白をグッと詰める */
    display: block;
  }

  .news_block .c_button {
    margin-top: 30px;
  }

  /*------------------------------------------------------------------------------
  concept
------------------------------------------------------------------------------*/
  .cct {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
  }

  .cct_detail {
    display: contents; /* 親の枠組みを無視して、中のh2とcct_wrapをcct直下と同じ扱いにする */
  }

  /* 1. タイトル */
  .cct h2 {
    order: 1;
    margin-bottom: 20px;
    width: 100%;
  }

  /* 2. 画像 */
  .cct img {
    order: 2;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  .cct_wrap {
    order: 3; /* 3. テキストとボタン */
    margin-left: 0;
    text-align: center;
  }

  .cct .cct_main_text {
    font-size: 24px;
    margin: 0px 0 20px;
  }

  .cct .cct_text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 40px;
  }

  /*------------------------------------------------------------------------------
  products
------------------------------------------------------------------------------*/
  .pdt_block h2 {
    padding-top: 50px;
  }

  .pdt_block p {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.04em;
    margin: 15px 0;
    font-weight: 400;
  }

  .care_wrap {
    display: block;
    padding: 0;
  }

  .care_list {
    margin-bottom: 20px;
  }

  .care_list img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .care_list .care_category {
    font-size: 23px;
    white-space: nowrap; /* 自動改行を禁止 */
  }

  .care_more a {
    position: absolute;
    bottom: 42px;
    left: 50%; /* 左から50%の位置に */
    transform: translateX(-50%); /* 要素の幅の半分だけ左に戻す */
    font-size: 10px;
  }

  /*------------------------------------------------------------------------------
  FAQ
------------------------------------------------------------------------------*/

  .faq_wrap {
    display: block;
    padding-top: 100px;
  }

  .faq_wrap h2 {
    padding-bottom: 30px;
  }

  .accordion_summary {
    padding: 15px 0;
    font-size: 14px; /* 見出しの文字サイズ */
  }

  .accordion_summary::before {
    font-size: 16px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .accordion_summary::after {
    content: "+";
    font-size: 22px; /* 記号のサイズ */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .accordion_text {
    font-size: 15px; /* 見出しの文字サイズ */
    padding: 15px 0;
  }

  .accordion_text::before {
    font-size: 18px;
    padding-right: 10px;
    padding-left: 3px;
  }

  .faq .c_button {
    margin-top: 40px;
  }

  /*------------------------------------------------------------------------------
  recruitment
------------------------------------------------------------------------------*/

  .rcr {
    margin-top: 80px;
  }

  .rcr img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .rcr h2 {
    white-space: nowrap; /* 自動改行を禁止 */
    font-size: 35px;
  }

  /*------------------------------------------------------------------------------
  footer
------------------------------------------------------------------------------*/

  .footer_wrap {
    margin: px 0 30px;
    text-align: center;
  }

  .footer_nav {
    display: none;
  }

  .f_logo {
    font-size: 40px;
  }

  .footer_wrap p {
    font-size: 10px;
  }
}