@charset "UTF-8";
@import url(all.css);
/*rootの変数宣言*/
:root {
  /*==============================
      カラー    
  ==============================*/
  --color-font: #0d162f;
  --color-white: #ffffff;
  --color-blue: #4169e1;
  --color-yellow: #fcaf2b;
  --color-red: #d10004;
  --color-lightblue: #d9eaf4;
  --color-whiteblue: #eaf1f5;
  --color-gray: #f1f4f6;
  /*カレントカラー*/
  --color-current: #4169e1;
  /*テキストリンクカラー*/
  --color-textlink: #4169e1;
  /*必須ボタンカラー*/
  --color-required: #4169e1;
  /*任意ボタンカラー*/
  --color-optional: #4169e1;
  /*ラジオボタンカラー*/
  --color-radio: #4169e1;
  /*チェックボタンカラー*/
  --color-check: #4169e1;
  /*==============================
      フォントファミリー
  ==============================*/
  /*本文*/
  --font-family-body: "Noto", sans-serif;
  --font-family-Noto: "Noto", sans-serif;
  --font-family-Oswald: "Oswald", sans-serif;
  /*==============================
      フォントサイズ
  ==============================*/
  /*基準のフォントサイズ*/
  --font-size-body: 1.7rem;
  /*その他テキスト*/
  --font-size-14: 1.4rem;
  --font-size-15: 1.5rem;
  --font-size-16: 1.6rem;
  --font-size-17: 1.7rem;
  --font-size-18: 1.8rem;
  --font-size-20: 2.0rem;
  --font-size-22: 2.2rem;
  --font-size-23: 2.3rem;
  --font-size-24: 2.4rem;
  --font-size-25: 2.5rem;
  --font-size-26: 2.6rem;
  --font-size-30: 3.0rem;
  --font-size-35: 3.5rem;
  --font-size-38: 3.8rem;
  --font-size-40: 4.0rem;
  --font-size-50: 5.0rem;
  --font-size-55: 5.5rem;
  --font-size-65: 6.5rem;
  --font-size-80: 8.0rem;
  --font-size-85: 8.5rem;
  /*==============================
      行間
  ==============================*/
  /*基準の行間*/
  --line-height-base: 2;
  /*==============================
      文字間
  ==============================*/
  /*基準の文字間*/
  --letter-spacing-base: 0.05em;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Thin.otf) format("opentype");
  font-weight: 100;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-DemiLight.otf) format("opentype");
  font-weight: 200;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Light.otf) format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Regular.otf) format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Medium.otf) format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Bold.otf) format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Black.otf) format("opentype");
  font-weight: 900;
}

/*rootの変数宣言*/
:root {
  /*==============================
      カラー    
  ==============================*/
  --color-font: #0d162f;
  --color-white: #ffffff;
  --color-blue: #4169e1;
  --color-yellow: #fcaf2b;
  --color-red: #d10004;
  --color-lightblue: #d9eaf4;
  --color-whiteblue: #eaf1f5;
  --color-gray: #f1f4f6;
  /*カレントカラー*/
  --color-current: #4169e1;
  /*テキストリンクカラー*/
  --color-textlink: #4169e1;
  /*必須ボタンカラー*/
  --color-required: #4169e1;
  /*任意ボタンカラー*/
  --color-optional: #4169e1;
  /*ラジオボタンカラー*/
  --color-radio: #4169e1;
  /*チェックボタンカラー*/
  --color-check: #4169e1;
  /*==============================
      フォントファミリー
  ==============================*/
  /*本文*/
  --font-family-body: "Noto", sans-serif;
  --font-family-Noto: "Noto", sans-serif;
  --font-family-Oswald: "Oswald", sans-serif;
  /*==============================
      フォントサイズ
  ==============================*/
  /*基準のフォントサイズ*/
  --font-size-body: 1.7rem;
  /*その他テキスト*/
  --font-size-14: 1.4rem;
  --font-size-15: 1.5rem;
  --font-size-16: 1.6rem;
  --font-size-17: 1.7rem;
  --font-size-18: 1.8rem;
  --font-size-20: 2.0rem;
  --font-size-22: 2.2rem;
  --font-size-23: 2.3rem;
  --font-size-24: 2.4rem;
  --font-size-25: 2.5rem;
  --font-size-26: 2.6rem;
  --font-size-30: 3.0rem;
  --font-size-35: 3.5rem;
  --font-size-38: 3.8rem;
  --font-size-40: 4.0rem;
  --font-size-50: 5.0rem;
  --font-size-55: 5.5rem;
  --font-size-65: 6.5rem;
  --font-size-80: 8.0rem;
  --font-size-85: 8.5rem;
  /*==============================
      行間
  ==============================*/
  /*基準の行間*/
  --line-height-base: 2;
  /*==============================
      文字間
  ==============================*/
  /*基準の文字間*/
  --letter-spacing-base: 0.05em;
}

@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Thin.otf) format("opentype");
  font-weight: 100;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-DemiLight.otf) format("opentype");
  font-weight: 200;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Light.otf) format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Regular.otf) format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Medium.otf) format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Bold.otf) format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "Noto";
  src: url(/font/NotoSansCJKjp-Black.otf) format("opentype");
  font-weight: 900;
}
/*opacity含めたカラー指定あればここで定義*/
/*========================
    default
========================*/
html {
  font-size: 62.5%;
}

a[href^="tel:"] {
  pointer-events: none;
}

.pc-none {
  display: none !important;
}

.wrapper {
  min-width: 1280px;
  max-width: 1920px;
  margin-inline: auto;
}

.container {
  /*ヘッダー追従の時はここにmax-width:1920px;,overflow-x:hidden;をかける*/
}

.com-inbox {
  width: clamp(1280px, 72.92vw, 1400px);
}

/*ロゴのホバー処理*/
.logo a:hover {
  transition: opacity 0.3s;
}
.logo a:hover:hover {
  opacity: 0.5;
}

/*パンくずリスト*/
.breadcrumb {
  padding-block: 1rem;
}
.breadcrumb__list {
  width: clamp(800px, 62.5vw, 1200px);
  margin-inline: auto;
  display: flex;
  justify-content: flex-start;
  gap: 0.25em;
}
.breadcrumb__item {
  display: flex;
  font-size: 1.5rem;
  font-weight: 900;
}
.breadcrumb__item::after {
  content: "｜";
  margin-left: 0.25em;
  pointer-events: none;
}
.breadcrumb__item:last-child {
  display: block;
  max-width: 23rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb__item:last-child::after {
  display: none;
}
.breadcrumb__item a:hover {
  transition: opacity 0.3s;
}
.breadcrumb__item a:hover:hover {
  opacity: 0.5;
}

/*追従ボタン*/
.follow-btn {
  right: 4.8rem;
  bottom: 4rem;
}

/*==============================
    各種ホバー処理
==============================*/
.header .gnav__item a:not(.dropdown-menu__link) {
  transition: all 0.3s;
}
.header .gnav__item a:not(.dropdown-menu__link):hover {
  opacity: 0.5;
}

.mv-nav__item {
  transition: all 0.3s;
}
.mv-nav__item:hover {
  background-color: rgba(0, 32, 126, 0.5);
}

.mail-btn {
  transition: all 0.3s;
}
.mail-btn:hover {
  background-color: var(--color-white);
  color: var(--color-font);
}
.mail-btn:hover::before {
  background: url(../img/common/icon_mail_navy.png) top left/contain no-repeat;
}

.com-btn {
  transition: all 0.3s;
}
.com-btn:hover {
  opacity: 0.7;
}
.com-btn--arw {
  transition: all 0.3s;
}
.com-btn--arw:hover {
  opacity: 0.5;
}
.com-btn--link:hover {
  background-color: var(--color-white);
  color: var(--color-font);
  opacity: 1;
}
.com-btn--link:hover::after {
  transition: all 0.3s;
  background: url(../img/mutual/icon_link_b.png) top left/contain no-repeat;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
  transition: all 0.3s;
  opacity: 0.8;
}

.water-handle__item::before {
  transition: all 0.3s;
  position: absolute;
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.water-handle__item:hover::before {
  opacity: 1;
}

.technical-can__btn {
  transition: all 0.3s;
}
.technical-can__btn:hover {
  opacity: 0.5;
}

.footer .sns__item {
  transition: all 0.3s;
}
.footer .sns__item:hover {
  opacity: 0.5;
}

.follow-btn a {
  transition: all 0.3s;
}
.follow-btn a:hover {
  transform: translateY(-1rem);
  opacity: 0.7;
}

.paginated__link:hover {
  opacity: 0.5;
}

.com-textlink:hover {
  opacity: 0.5;
}

.agree:hover {
  opacity: 0.5;
}

/*==============================
    ヘッダー
==============================*/
.header {
  padding-left: 2rem;
}
.header .gnav {
  display: flex;
  gap: 4rem;
}
.header .gnav__list {
  gap: 2em;
}
.header .gnav__item {
  height: 100px;
}
.header .mail-btn {
  width: 24rem;
}

/*==============================
    メインビジュアル
==============================*/
.mv {
  height: clamp(533px, 41.67vw, 800px);
}
.mv::before {
  position: absolute;
  z-index: -2;
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background: linear-gradient(to right, var(--color-blue) 0%, #00207e 100%);
}
.mv__copy {
  width: 50%;
  padding-left: clamp(100px, 7.81vw, 150px);
  font-size: clamp(35px, 2.76vw, 53px);
  gap: clamp(17px, 1.3vw, 25px);
}
.mv__copy span {
  padding-bottom: clamp(12px, 0.94vw, 18px);
}
.mv__copy span::before {
  height: clamp(3px, 0.21vw, 4px);
}
.mv-nav {
  height: 100%;
  width: 50%;
}
.mv-nav__list {
  height: 100%;
}
.mv-nav__item {
  height: 25%;
}
.mv-nav__item a {
  padding-inline: 7rem;
}
.mv-nav__item a::after {
  right: 7rem;
  width: 6rem;
}
.mv-nav__item a::before {
  right: clamp(193px, 15.1vw, 290px);
}
.mv-nav__item:first-child a::before {
  width: clamp(171px, 13.33vw, 256px);
}
.mv-nav__item:nth-child(2) a::before {
  width: clamp(165px, 12.86vw, 247px);
}
.mv-nav__item:nth-child(3) a::before {
  width: clamp(165px, 12.92vw, 248px);
}
.mv-nav__item:last-child a::before {
  width: clamp(166px, 12.97vw, 249px);
}

/*==============================
    サブビジュアル
==============================*/
.sv {
  width: 100%;
  height: clamp(227px, 17.71vw, 340px);
}
.sv__title {
  left: calc(50% - clamp(360px, 28.13vw, 540px));
  gap: clamp(15px, 1.2vw, 23px);
}
.sv__title .ja {
  font-size: clamp(33px, 2.6vw, 50px);
}
.sv__title .en {
  font-size: clamp(9px, 0.73vw, 14px);
}

/*==============================
    共通タイトル
==============================*/
/*==============================
    共通ボタン
==============================*/
.com-btn {
  height: 7rem;
}

/*==============================
    共通テーブル
==============================*/
.com-table {
  width: 1080px;
  margin-inline: auto;
}
.com-table tr th {
  width: 22rem;
}
.com-table tr td a {
  display: inline-block;
}
.com-table tr td .replace {
  margin-left: 1rem;
}

/*==============================
    TOP
==============================*/
/*「誰に頼めばいい？」
その悩み、ジャパンサポートシステム（JSS）へ。*/
.top-about {
  padding-block: 10rem;
}
.top-about .com-inbox {
  width: 1180px;
}
.top-about .com-title02 {
  margin-bottom: 6rem;
}
.top-about__image {
  flex-shrink: 0;
  margin-left: -6rem;
}

/*サービス内容*/
.top-service {
  padding-block: 10rem;
  /*スライド部分*/
}
.top-service__text {
  width: clamp(353px, 27.6vw, 530px);
}
.top-service__text p {
  font-size: clamp(11px, 0.89vw, 17px);
}
.top-service__title {
  font-size: clamp(24px, 1.88vw, 36px);
  margin-bottom: clamp(27px, 2.08vw, 40px);
}
.top-service__box {
  margin-top: clamp(27px, 2.08vw, 40px);
  padding: clamp(28px, 2.19vw, 42px) clamp(12px, 0.94vw, 18px) clamp(20px, 1.56vw, 30px) clamp(12px, 0.94vw, 18px);
  margin-bottom: clamp(20px, 1.56vw, 30px);
}
.top-service__box .tag {
  font-size: clamp(11px, 0.83vw, 16px);
  padding: clamp(7px, 0.57vw, 11px) clamp(12px, 0.94vw, 18px) clamp(7px, 0.57vw, 11px) clamp(11px, 0.83vw, 16px);
}
.top-service__box p {
  letter-spacing: 0.05em;
}
.top-service .com-btn {
  height: clamp(47px, 3.65vw, 70px);
  font-size: clamp(11px, 0.89vw, 17px);
}
.top-service .com-title01 {
  margin-bottom: clamp(40px, 3.13vw, 60px);
}
.top-service .swiper-slide {
  padding: clamp(42px, 3.28vw, 63px) clamp(47px, 3.65vw, 70px) clamp(41px, 3.23vw, 62px) clamp(47px, 3.65vw, 70px);
  width: clamp(787px, 61.46vw, 1180px);
  min-height: clamp(360px, 28.13vw, 540px);
}
.top-service .swiper-slide::before {
  right: 0;
  bottom: 0;
  position: absolute;
}
.top-service .swiper-slide::after {
  font-size: clamp(40px, 3.13vw, 60px);
  left: clamp(47px, 3.65vw, 70px);
}
.top-service .swiper-slide__title {
  font-size: clamp(24px, 1.88vw, 36px);
  margin-bottom: clamp(27px, 2.08vw, 40px);
}
.top-service .swiper-slide__box {
  margin-top: clamp(27px, 2.08vw, 40px);
  padding: clamp(28px, 2.19vw, 42px) clamp(20px, 1.56vw, 30px) clamp(20px, 1.56vw, 30px) clamp(20px, 1.56vw, 30px);
  margin-bottom: clamp(20px, 1.56vw, 30px);
}
.top-service .swiper-slide__box p {
  font-size: clamp(11px, 0.83vw, 16px);
}
.top-service .swiper-slide__box .tag {
  font-size: clamp(11px, 0.83vw, 16px);
  padding: clamp(7px, 0.57vw, 11px) clamp(12px, 0.94vw, 18px) clamp(7px, 0.57vw, 11px) clamp(11px, 0.83vw, 16px);
}
.top-service .swiper-slide.slide01::before {
  width: clamp(347px, 27.08vw, 520px);
}
.top-service .swiper-slide.slide02::before {
  width: clamp(344px, 26.88vw, 516px);
}
.top-service .swiper-slide.slide03::before {
  width: clamp(366px, 28.59vw, 549px);
}
.top-service .swiper-slide.slide04::before {
  width: clamp(344px, 26.88vw, 516px);
}
.top-service .swiper-button-prev {
  left: clamp(220px, 17.19vw, 330px);
}
.top-service .swiper-button-next {
  right: clamp(220px, 17.19vw, 330px);
}

/*代表挨拶・会社概要*/
.top-company {
  padding-bottom: 10rem;
  /*代表挨拶*/
  /*会社概要*/
}
.top-company-greeting {
  padding-block: 10rem;
}
.top-company-greeting .com-title02 {
  margin-bottom: 6rem;
}
.top-company-section {
  padding-block: 10rem;
}
.top-company-section::before {
  top: clamp(40px, 3.13vw, 60px);
  width: clamp(353px, 27.6vw, 530px);
}
.top-company-section .com-title02 {
  margin-bottom: 6rem;
}

/*まずはお気軽にご相談ください。*/
.top-contactUs {
  padding-block: 10rem;
}
.top-contactUs::before {
  bottom: 0;
  right: calc(50% + clamp(345px, 26.98vw, 518px));
  width: clamp(95px, 7.45vw, 143px);
}
.top-contactUs .com-title02 .ja::before {
  z-index: -1;
  left: -0.9rem;
  transform: translate(0);
  height: 2rem;
  width: calc(100% + 1rem);
  background: #ffe8c0;
}
.top-contactUs__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.top-contactUs .com-inbox {
  justify-content: space-between;
  padding: clamp(33px, 2.6vw, 50px) clamp(103px, 8.07vw, 155px) clamp(19px, 1.51vw, 29px) clamp(109px, 8.54vw, 164px);
}
.top-contactUs .mail-btn {
  width: 46rem;
  height: 8rem;
}
.top-contactUs .com-tel {
  width: 46rem;
}

/*お知らせ*/
.top-news {
  padding-block: 10rem;
}
.top-news .com-inbox {
  width: 1180px;
  display: flex;
  gap: 16rem;
}
.top-news .com-title01 {
  margin-bottom: 6rem;
}
.top-news .com-news__item:first-child a {
  padding-top: 0.2rem;
}

/*お問い合わせ・ご相談*/
.com-contact {
  padding-block: 10rem;
}
.com-contact .com-title01 {
  margin-bottom: 6rem;
}
.com-contact__box {
  width: 1080px;
  padding: 4rem 6rem 1.6rem 6rem;
}
.com-contact::before {
  width: 12rem;
  left: calc(50% + 51.1rem);
}
.com-contact .mail-btn {
  width: 46rem;
  height: 8rem;
  border-radius: 0.6rem;
}
.com-contact .com-tel {
  width: 46rem;
}

/*==============================
    水道申請代行
==============================*/
/*こんなお悩みありませんか？*/
.water-worries {
  padding-block: 10rem;
}
.water-worries .com-title02 {
  margin-bottom: 6rem;
}
.water-worries__list {
  width: 1200px;
  padding: 6rem;
}
.water-worries__item {
  width: 25.5rem;
  padding: 4.7rem;
}

/*ジャパンサポートシステムが選ばれる理由*/
.water-reason {
  padding-block: 10rem;
  overflow: hidden;
}
.water-reason::before {
  width: 59rem;
}
.water-reason .com-title02 {
  margin-bottom: 5.6rem;
}
.water-reason__list {
  padding: 6rem;
  width: 1200px;
  margin-inline: auto;
}
.water-reason__item {
  padding: 4rem;
  gap: 3.5rem;
}
.water-reason__image {
  width: 28rem;
  aspect-ratio: 280/190;
  flex-shrink: 0;
}
.water-reason__text {
  width: calc(100% - 3.5rem - 28rem);
}

/*対応エリア*/
.water-area {
  padding-block: 10rem 2.3rem;
}
.water-area__wrap {
  margin-top: -0.8rem;
  justify-content: center;
  align-items: center;
}
.water-area__image {
  width: 71.3rem;
  aspect-ratio: 713/378;
}
.water-area__serif {
  width: 19.6rem;
  aspect-ratio: 1;
}

/*過去のご依頼事例*/
.water-case {
  padding-block: 10rem;
}
.water-case .com-title02 {
  margin-bottom: 6rem;
}
.water-case__list {
  justify-content: center;
  padding: 6rem;
  gap: 2rem;
  width: 1200px;
  margin-inline: auto;
}
.water-case__item {
  width: 53rem;
  flex-shrink: 0;
}
.water-case__image {
  width: 100%;
  aspect-ratio: 530/340;
}

/*サービス一覧*/
.water-service {
  padding-block: 10rem;
}
.water-service .com-title02 {
  margin-bottom: 6rem;
}
.water-service__list {
  padding: 6rem;
  width: 1200px;
  margin-inline: auto;
}
.water-service__wrap {
  padding: 3rem;
}
.water-service__image {
  width: 28rem;
  aspect-ratio: 280/190;
  flex-shrink: 0;
}

/*ご依頼の流れ*/
.water-flow {
  padding-block: 10rem;
}
.water-flow .com-title02 {
  margin-bottom: 6rem;
}
.water-flow__list {
  padding: 6rem;
}
.water-flow__list::before {
  height: calc(100% - 12rem);
  top: 6rem;
}
.water-flow__title {
  padding-inline: 15rem;
}
.water-flow__text {
  padding: 3rem;
}

/*当社ではこのようなご依頼も承っております*/
.water-handle {
  padding-block: 10rem;
}
.water-handle .com-title02 {
  margin-bottom: 6rem;
}
.water-handle__list {
  width: 1200px;
  margin-inline: auto;
}
.water-handle__item {
  width: 40rem;
  aspect-ratio: 2/1;
}
.water-handle__item a {
  padding: 2rem 6rem;
}

/*==============================
    技能実習生
==============================*/
/*グローバル人材の活用をサポート*/
.technical-about {
  padding-block: 10rem;
}
.technical-about .com-title02 {
  margin-bottom: 6rem;
}
.technical-about__wrap {
  width: 1080px;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.technical-about__image {
  width: 54rem;
  aspect-ratio: 540/420;
  flex-shrink: 0;
}

/*外国人技能実習・特定技能制度とは*/
.technical-foreign {
  padding-block: 10rem;
}
.technical-foreign .com-title02 {
  margin-bottom: 6rem;
}
.technical-foreign__container {
  width: 1200px;
  padding: 6rem;
}
.technical-foreign .intro {
  margin-bottom: 4rem;
  line-height: 1;
}
.technical-foreign__item {
  padding: 2.5rem 5rem;
}
.technical-foreign__item dt {
  width: 21rem;
}

/*ジャパンサポートシステムができること*/
.technical-can {
  padding-block: 10rem;
}
.technical-can .com-title02 {
  margin-bottom: 6rem;
}
.technical-can__list {
  padding: 6rem;
}
.technical-can__item {
  padding: 3rem;
}
.technical-can__image {
  width: 22rem;
  aspect-ratio: 220/160;
  flex-shrink: 0;
}
.technical-can__text {
  width: calc(100% - 22rem - 2.5rem);
}

/*受入れまでの流れ*/
.technical-flow {
  padding-block: 10rem;
}
.technical-flow .com-title02 {
  margin-bottom: 6rem;
}
.technical-flow__container {
  padding: 6rem;
}
.technical-flow__list::before {
  height: calc(100% - 12rem);
  top: 6rem;
}
.technical-flow__item {
  padding: 2.5rem 9rem;
}
.technical-flow__item::before {
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
}

/*==============================
    共済保険
==============================*/
/*共済とは？*/
.mutual-about {
  padding-block: 10rem;
}
.mutual-about .com-inbox {
  width: 1080px;
}
.mutual-about .com-title02 {
  margin-bottom: 6rem;
}
.mutual-about__wrap {
  align-items: center;
}
.mutual-about__image {
  flex-shrink: 0;
  width: 54rem;
  aspect-ratio: 540/406;
}

/*取り扱い保険*/
.mutual-products {
  padding-block: 10rem;
  /*動画*/
  /*補償内容*/
  /*特徴*/
}
.mutual-products .com-title02 {
  margin-bottom: 6rem;
}
.mutual-products__list {
  width: 1200px;
  margin-inline: auto;
}
.mutual-products__item {
  padding: 6rem;
}
.mutual-products__wrap {
  align-items: flex-start;
}
.mutual-products__image {
  width: 52rem;
  aspect-ratio: 520/360;
  flex-shrink: 0;
}
.mutual-products__box {
  margin-bottom: 4rem;
}
.mutual-products__box:last-of-type {
  margin-bottom: 0;
}
.mutual-products__box .txt {
  padding-block: 3rem 0;
  margin-bottom: -0.4rem;
}
.mutual-products__container .com-btn {
  width: 52rem;
}
.mutual-products--guarantee__item {
  padding: 3.5rem;
}
/*共済への想い*/
.mutual-message {
  padding-block: 10rem;
}
.mutual-message .com-inbox {
  width: 1080px;
}
.mutual-message .com-title02 {
  margin-bottom: 6rem;
}

/*==============================
    不動産・その他
==============================*/
.estate-section {
  padding-block: 10rem;
}
.estate-section .com-title02 {
  margin-bottom: 6rem;
}
.estate-section__wrap {
  background-color: var(--color-whiteblue);
  display: flex;
  gap: 4rem;
  padding: 6rem;
  width: 86%;
  margin-inline: auto;
}
.estate-section__image {
  width: 52rem;
  aspect-ratio: 520/360;
  flex-shrink: 0;
}

.other-section {
  padding-block: 10rem;
}
.other-section .com-title02 {
  margin-bottom: 6rem;
}
.other-section__container {
  padding: 6rem;
  width: 1200px;
}
.other-section__wrap {
  gap: 4rem;
  margin-bottom: 4rem;
}
.other-section__image {
  width: 20rem;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.other-section__cont {
  padding: 3rem;
}
.other-section__item {
  padding: 3.5rem;
  width: 50rem;
}
.other-section__contain .com-btn {
  width: 52rem;
  margin-inline: auto;
}

/*==============================
    お知らせ一覧
==============================*/
.news {
  padding-block: 10rem;
}
.news .com-title02 {
  margin-bottom: 6rem;
}

/*お知らせ共通部分*/
.com-news__list {
  width: 80rem;
}
.com-news__item a:hover {
  transition: opacity 0.3s;
}
.com-news__item a:hover:hover {
  opacity: 0.5;
}

/*タグリスト(PC)
-----------------------------*/
.tag-select {
  text-align: right;
  margin-bottom: 5rem;
}
.tag-select__box {
  min-width: 24rem;
}
.tag-select__box::after {
  right: var(--font-size-18);
}
.tag-select__dropdown {
  line-height: 1;
  padding: 12px 48px 12px 12px;
  background-color: var(--color-white);
}

/*==============================
    お知らせ詳細
==============================*/
.news-detail {
  padding-block: 10rem;
}
.news-detail__title {
  font-size: var(--font-size-26);
}
.news-detail__box {
  padding: 4rem 4rem 6rem 4rem;
  width: 1080px;
  margin-inline: auto;
}

/*==============================
  お問い合わせ
==============================*/
.contact {
  padding-block: 10rem;
}
.contact .com-title02 {
  margin-bottom: 6rem;
}
.contact .com-table {
  margin-bottom: 3rem;
  width: 90%;
  margin-inline: auto;
}
.contact .com-table th {
  width: 30%;
}
.contact .com-btn {
  margin-inline: auto;
  margin-top: 5rem;
  width: 30rem;
}
.contact .com-btn::after {
  display: none;
}
.contact .contact-submits-wrap {
  display: flex;
  justify-content: center;
  gap: 3rem;
}
.contact .contact-submits-wrap .com-btn {
  margin-inline: 0;
}

/*==============================
  お問い合わせ完了
==============================*/
.complete {
  padding-block: 10rem;
}
.complete .com-title02 {
  margin-bottom: 6rem;
}
.complete__box {
  text-align: center;
}
.complete__btn {
  margin-top: 5rem;
}
.complete__btn:hover {
  opacity: 0.5;
}

/*==============================
　プライバシーポリシー
==============================*/
.privacy {
  padding-block: 10rem;
}
.privacy .com-inbox {
  width: 1080px;
}
.privacy .com-title02 {
  margin-bottom: 6rem;
}
.privacy__box {
  margin-bottom: 5rem;
}
.privacy__box:last-child {
  margin-bottom: 0;
}

/*==============================
    サイトマップ
==============================*/
.site {
  padding-block: 10rem;
}
.site .com-title02 {
  margin-bottom: 6rem;
}
.site .com-inbox {
  width: 70rem;
}
.site__list {
  display: flex;
  flex-direction: column;
}
.site__item {
  height: 7.5rem;
}
.site__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1rem;
}
.site__item a::after {
  width: 1rem;
  aspect-ratio: 1;
}
.site__item a:hover {
  transition: all 0.3s;
  opacity: 0.5;
}
.site__item a:hover::after {
  transform: rotate(-45deg) translate(5px, 5px);
  transition: all 0.3s;
}

/*==============================
    このページは存在しません
==============================*/
.e404 {
  padding-block: 10rem;
}
/*==============================
    フッター
==============================*/
.footer-nav__list {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  gap: 2rem 5rem;
}
.footer-nav__item:first-of-type {
  grid-column: span 2;
}
.footer-nav__item:has(.dropdown-menu__list) {
  grid-row: span 3;
}
.footer-nav__item a {
  transition: all 0.3s;
}
.footer-nav__item a:hover {
  opacity: 0.5;
}
.footer-nav__item .dropdown-menu__list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-nav__item .dropdown-menu__item a {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(13, 22, 47, 0.6);
}
.footer-nav__item .dropdown-menu__item a::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1px;
  background-color: var(--color-font);
}
.footer__inner {
  width: 1180px;
  justify-content: space-between;
  padding-block: 6rem;
}
.footer .sns__item {
  width: 3rem;
}
.footer small {
  padding-left: clamp(247px, 19.27vw, 370px);
  justify-content: flex-start;
}