@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.header__btns {
  white-space: nowrap;
  .swell-block-button__link {
    padding-block: 0.5em;
  }
}

.p-mainVisual__imgLayer {
  img {
    object-position: bottom;
  }
}

h2.fv__title {
  border-left: none;
  @media (min-width: 600px) and (max-width: 840px) {
    font-size: 1.5em;
  }

  @media (min-width: 841px) {
    font-size: 1.8em;
  }
}

.fv__title,
.fv__catch {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

h2 {
  .u-fz-xs {
    color: #0041a3 !important;
  }
}

.top__blogSection {
  border-bottom: 1px solid #ccc;

  @media (max-width: 599px) {
    padding: 1em 0 !important;
  }
}

.top__blogLink {
  ul,
  ul a {
    border: none !important;
  }

  @media (max-width: 599px) {
    .swell-block-columns__inner {
      row-gap: 0 !important;
    }
  }
}

.top-serviceMedia {
  @media (max-width: 900px) {
    grid-template-columns: 100% !important;

    &.is-stacked-on-mobile > .wp-block-media-text__media {
      grid-column: 1;
      grid-row: 1;
    }

    &.is-stacked-on-mobile > .wp-block-media-text__content {
      grid-column: 1;
      grid-row: 2;
    }

    &.is-style-broken.is-stacked-on-mobile .wp-block-media-text__content {
      margin: var(--swl-mediatext--lap) 0 0 !important;
    }
  }

  .wp-block-media-text__content {
    position: relative;
    isolation: isolate; /* 擬似要素の z-index をこの中で完結させる */
    padding: 50px;
    background-color: transparent; /* 白は ::before に任せる */
  }
}

/* PC・タブレットサイズ以上で段々にする設定 */
@media (min-width: 768px) {
  .top-value__cards .swell-block-columns__inner {
    align-items: flex-start;
  }

  .top-value__cards .swell-block-column:nth-child(2) {
    margin-top: 30px;
  }

  .top-value__cards .swell-block-column:nth-child(3) {
    margin-top: 60px;
  }
}

/* ★カードのデザイン（影・背景色） */
.top-value__cards .swell-block-column {
  background-color: #ffffff; /* 背景色（白） */
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.16),
    0 -6px 18px rgba(0, 0, 0, 0.1); /* 上側の影 */
  overflow: hidden; /* はみ出た画像を角丸でカット */
  padding: 10px;
}

/* ★画像の設定（大きさを揃えて cover でトリミング） */
.top-value__cards .swell-block-column figure {
  margin: 0; /* 画像の余白を消してカードの上いっぱいに広げる */
}

.top-value__cards .swell-block-column img {
  width: 100%;
  height: 220px; /* ① 画像の高さを固定（お好みの高さに変更OK） */
  object-fit: cover; /* ② 枠いっぱいに綺麗に収める（＝画像を縦横比固定で切り抜き） */
}

/* ★テキスト部分だけに余白（パディング）をつける */
.top-value__cards .swell-block-column .wp-block-heading,
.top-value__cards .swell-block-column .wp-block-paragraph {
  padding-left: 20px;
  padding-right: 20px;
}

.top-value__cards .swell-block-column .wp-block-paragraph {
  padding-bottom: 20px;
}

.top-recruitMedia {
  figure {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: -10%;
      right: -10%;
      width: 100%;
      height: 100%;
      background-color: #0041a3;
      opacity: 0.8;
      z-index: -2;
    }
  }
}

.swell-block-dl__dt {
  background-color: #595656 !important;
}

/* コンタクトフォーム */
.cf7-modern-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-block: 60px;
  background: transparent;
}

.cf7-modern-form .form-group {
  margin-bottom: 40px;
}

.cf7-modern-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -20px;
  font-size: 16px;
}

.cf7-modern-form .required {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background-color: #d92b2b;
  border-radius: 3px;
}

.cf7-modern-form input[type="text"],
.cf7-modern-form input[type="email"],
.cf7-modern-form input[type="tel"],
.cf7-modern-form input[type="number"],
.cf7-modern-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.cf7-modern-form textarea {
  min-height: 150px;
  resize: vertical;
}

.cf7-modern-form .form-submit {
  text-align: center;
  margin-top: 30px;
}

.cf7-modern-form .submit-btn {
  background: #646464;
  color: white;
  font-size: 16px;
  padding: 15px 90px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cf7-modern-form .submit-btn:hover {
  background: #323232;
}

/* お問い合わせ種別（ラジオボタン） */
.cf7-modern-form .form-group:has(.wpcf7-radio) label {
  margin-bottom: 15px;
}

.cf7-modern-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.cf7-modern-form .wpcf7-list-item {
  margin: 0;
}

.cf7-modern-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  padding: 16px 24px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.cf7-modern-form .wpcf7-list-item label:has(input:checked) {
  background-color: #eef2f6;
  border-color: #0b2545;
}

.cf7-modern-form .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0b2545;
}

.cf7-modern-form .wpcf7-list-item-label {
  font-weight: 500;
}

@media screen and (any-hover: hover) {
  .cf7-modern-form .wpcf7-list-item label:hover {
    border-color: #0b2545;
  }
}

@media screen and (max-width: 767px) {
  .cf7-modern-form .wpcf7-list-item label {
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
  }
}

/*  */

.wpcf7-spinner {
  display: none;
}