@charset "UTF-8";
@import url(all.css);
/*default
=======================================================*/
html {
  font-size: 62.5%;
}

body {
  min-width: 1280px;
  margin: auto;
  width: 100%;
  min-width: initial;
  color: var(--color-font);
  background: url(../img/common/bg.png) top left/cover no-repeat, var(--color-whitegreen);
  background-attachment: fixed;
}

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

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

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

/*display flexキッド 
=================================================*/
.flex {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  -js-display: flex;
  display: flex;
  width: 100%;
}

/*折り返し
-----------------------*/
.flx-wrp {
  flex-wrap: wrap;
}

/*逆順
-----------------------*/
.flx-rr {
  flex-direction: row-reverse;
}

/*水平方向の揃え
=================================================*/
/*初期値
-----------------------*/
.flx-strt {
  justify-content: start;
}

/*並列で均等配置（左右隙間なし=space-between）
-----------------------*/
.flx-btw {
  justify-content: space-between;
}

/*並列で均等配置（左右隙間あり=space-around）
-----------------------*/
.flx-ard {
  justify-content: space-around;
}

/*水平揃え　末揃え
-----------------------*/
.flx-end {
  justify-content: flex-end;
}

/*水平揃え　中央揃え
-----------------------*/
.flx-center {
  justify-content: center;
}

/*垂直方向の揃え
=================================================*/
/*水平揃え　上揃え
-----------------------*/
.flx-alitem-strt {
  align-items: flex-start;
}

/*水平揃え　高さ揃え
-----------------------*/
.flx-alitem-strch {
  align-items: stretch;
}

/*水平揃え　縦・横の中央揃え
-----------------------*/
.flx-alitem-c {
  align-items: center;
}

/*水平揃え　下揃え
-----------------------*/
.flx-alitem-end {
  align-items: flex-end;
}

/*水平揃え　ベースライン揃え
-----------------------*/
.flx-alitem-base {
  align-items: baseline;
}

/*複数行にした揃え方
=================================================*/
/*初期値
-----------------------*/
.flx-alcont-strt {
  align-content: flex-start;
}

/*親要素の開始位置から配置。上揃え
-----------------------*/
.flx-alcont-strch {
  align-content: stretch;
}

/*親要素の終点から配置。下揃え
-----------------------*/
.flx-alcont-end {
  align-content: flex-end;
}

/*中央揃え
-----------------------*/
.flx-alcont-c {
  align-content: center;
}

/*最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
-----------------------*/
.flx-alcont-s-btw {
  align-content: space-between;
}

/*上下端にある子要素も含め、均等に間隔をあけて配置
-----------------------*/
.flx-alcont-s-ard {
  align-content: space-around;
}

/*Custom
=======================================================*/
.pc-max-bx {
  min-width: initial;
  margin: 0 auto;
  position: relative;
  /*変更箇所*/
  max-width: 1340px;
  /*1920px - ((サブコンテンツのx値 - ベースラインから確保したい余白) * 2)*/
}

.sub-contents-fixed {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  /*変更箇所*/
  max-width: 1340px;
  /*1920px - ((サブコンテンツのx値 - ベースラインから確保したい余白) * 2)*/
}

.sub-contents {
  position: absolute;
  box-sizing: border-box;
  /*変更箇所*/
  width: 233px;
  background: var(--color-whitegreen);
  padding: 41px 0 43px 0;
  color: var(--color-font);
  font-weight: 500;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
}
.sub-contents a:hover {
  transition: opacity 0.3s;
}
.sub-contents a:hover:hover {
  opacity: 0.5;
}
.sub-contents .logo {
  height: 21px;
  margin-inline: auto;
  margin-bottom: 42px;
}
.sub-contents .gnav {
  display: flex;
  flex-direction: column;
  margin-bottom: 34px;
}
.sub-contents .gnav__item {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border-gray);
}
.sub-contents .gnav__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 10px 17px 5px;
}
.sub-contents .gnav__item a::after {
  content: "";
  width: 8px;
  aspect-ratio: 8/14;
  background: url(../img/common/nav_arw.svg) top left/contain no-repeat;
}
.sub-contents .current {
  color: var(--color-deepgreen);
}
.sub-contents .mail-btn {
  width: 200px;
  height: 45px;
  font-size: 16px;
  margin: 20px auto 0 auto;
}
.sub-contents .mail-btn::before {
  width: 20px;
}

.sub-contents-lt {
  left: 0;
  top: 0;
}

.sub-contents-side-lt {
  position: fixed;
  top: 0;
  margin-left: -211px;
}

.main-contents-container {
  width: 375px;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0 0 0 auto;
}

.main-contents-container .sub-contents {
  width: 233px;
}

.main-contents-bx {
  height: 100%;
  position: relative;
}

.contents-r {
  right: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/*カスタムスタイル
=======================================================*/
/*==============================
　common
==============================*/
/*各種ホバー処理*/
.logo {
  transition: all 0.3s;
}
.logo:hover {
  opacity: 0.5;
}

/*各種ボタン*/
.com-btn {
  transition: all 0.3s;
}
.com-btn::after {
  transition: all 0.3s;
}
.com-btn:hover {
  background-color: var(--color-deepgreen);
  color: var(--color-yellow);
}
.com-btn:hover::after {
  background: url(../img/common/btn-arw-y.png) top left/contain no-repeat;
}

.ig-btn {
  transition: all 0.3s;
}
.ig-btn::before {
  transition: all 0.3s;
}
.ig-btn:hover {
  background-color: var(--color-font);
  color: var(--color-yellow);
}
.ig-btn:hover::before {
  background: url(../img/common/icon_Instagram_White.svg) top left/contain no-repeat;
}

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

/*会社概要*/
.group a:hover {
  opacity: 0.5;
}

/*パンくず*/
.breadcrumb__item:last-child {
  pointer-events: none;
}
.breadcrumb__link:hover {
  transition: opacity 0.3s;
}
.breadcrumb__link:hover:hover {
  opacity: 0.5;
}

/*テキストリンク*/
.com-textlink,
.complete__btn {
  transition: opacity 0.3s;
}
.com-textlink:hover,
.complete__btn:hover {
  opacity: 0.5;
}

/*ページネーション*/
.paginated__link:hover {
  opacity: 0.5;
}

/*追従ボタン*/
.follow-btn {
  transition: all 0.3s;
}
.follow-btn:hover {
  opacity: 0.7;
}

/*お知らせ*/
.com-news__item a {
  transition: all 0.3s;
}
.com-news__item a:hover {
  opacity: 0.5;
}

/*サイトマップ*/
.site__item:hover {
  opacity: 0.7;
  transition: 0.3s;
}
.site__item:hover a::after {
  transform: translateX(0.5rem) rotate(-45deg);
  transition: 0.3s;
}

/*footer*/
.footer small a:hover {
  opacity: 0.5;
}

/*==============================
  追従ボタン
==============================*/
.follow-btn {
  width: 375px;
}

/*フッター*/
.footer__btn:hover {
  color: var(--color-white);
  background-color: var(--color-blue);
  transition: 0.3s;
}
.footer .logo {
  transition: opacity 0.3s;
}
.footer .logo:hover {
  opacity: 0.5;
}
.footer-nav__link {
  transition: all 0.3s;
}
.footer-nav__link:hover {
  opacity: 0.5;
}