@charset "UTF-8";
/*bootstrap対策*/
/*h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  line-height: 1;
  color: inherit
}
p {
  margin: 0;
}
dl,
ol,
.ul {
  margin: 0;
}
dt,
.dd {
  margin: 0;
}*/
/****************************/
h1,
h2,
h3,
h4,
h5,
h6,
p,
.header,
.footer,
.main,
.dl,
.dt,
.dd,
.ol,
.ul,
.li,
a,
span,
address,
blockquote,
table,
tr,
th,
.td {
  font-weight: normal;
  margin: 0;
  padding: 0;
  /*transform: rotate(0.03deg);*/
}
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  /*overflow-x: hidden;*/
  /*横スクロールが出るのを隠すため*/
}
html {
  font-size: 62.5%;
  /*font-size: 0.390625vw*/
  /*期値を10pxとする場合：10/2560*100=0.396（表示させたい文字サイズ÷width×100*/
  /*transform: rotate(0.03deg);*/
}
body {
  color: #3e3e3e;
  font-size: 1.6rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  line-height: 1;
}

/*iphone対策*/
button {
  appearance: none;
  -webkit-appearance: none;
  color: #3e3e3e;
}





/*汎用*/
.inner {
  width: 90%;
  max-width: 160rem;
  margin: auto;
}



.buttonA {
  position: relative;
  width: fit-content;
  min-width: 22rem;
  height: 5.8rem;
  line-height: 1;
  /*background: #424242;*/
}
.buttonA_ma {
    margin: 5rem 0 0 0;
}
.buttonA::after {
  content: "⇀";
  transform: scale(4, 1);
  display: inline-block;
  position: absolute;
  top: 2rem;
  right: -1rem;
  color: #424242;
  mix-blend-mode: multiply;
}

.buttonB {
  position: relative;
  width: fit-content;
  min-width: 22rem;
  height: 5.8rem;
  line-height: 1;
  /*background: #fffbf2;*/
  background:#E5E6E5;
}
.buttonB::after {
  content: "⇀";
  transform: scale(4, 1);
  display: inline-block;
  position: absolute;
  top: 2rem;
  right: -1rem;
  color: #fffbf2;
  mix-blend-mode: difference;
}





.title {
  display: grid;
  width: fit-content;
  height: fit-content;
  place-items: center;
}
.title .sub {
  font-size: 3.7rem;
  margin: 0 0 4rem;
}
.sub_bak {/*背景グレーの場合文字色白*/
    font-size: 3.7rem;
    margin: 0 0 4rem;
    /*color: #fff;*/
}
.title h2,
.title h3 {
  writing-mode: vertical-rl;
  font-family: 'Hina Mincho', serif;
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  letter-spacing: 0.5em;
}
.h_bak {/*背景グレーの場合*/
    /*color: #fff;*/
}
.title .h_bak::before {/*背景グレーの場合*/
    content: "";
    height: 5.5rem;
    width: 0.1rem;
    /*background: #fff;*/
    display: inline-block;
    margin: 0 0 3rem;
}
.title h2::before,
.title h3::before {
  content: "";
  height: 5.5rem;
  width: 0.1rem;
  background: #1c1c1c;
  display: inline-block;
  margin: 0 0 3rem;
}


/*== ボタン共通設定 */
.slidebtn {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  border: 2px solid #555;
  /* ボーダーの色と太さ */
  height: inherit;
  width: inherit;
  min-width: inherit;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
  background: #E5E6E5;
}

.slidebtn:hover {
  text-decoration: none;
}
/*ボタン内spanの形状*/
.slidebtn span {
  position: relative;
  z-index: 3;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*color: #fff;*/
  color: #000;
  font-size: 1.5rem;
  width: inherit;
  min-width: inherit;
  height: inherit;
  display: grid;
  place-items: center;
}
.buttonB .slidebtn span {
  color: #424242;
}
.slidebtn:hover span {
  color: #fff;
  text-decoration: none;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /*色や形状*/
  background: #2C4169;
  /*背景色*/
  width: 100%;
  height: 100%;
  /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*.bgleft_ye:before {黄色ver
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #F7B325;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}*/
/*hoverした際の形状*/
.bgleft:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}




/*header*/
.header {
  width: 100%;
  height: 8rem;
  position: fixed;
  margin: auto;
  /*padding:0 7.8125vw;*/
  z-index: 99;
}
.header h1 {
  /*font-size: 3.7rem;*/
  font-size: 2.7rem;/*フォントサイズ変更*/
  font-family: 'Hina Mincho', serif;
  text-decoration: none;
  width: fit-content;
  letter-spacing: 2rem;
  margin-left: 1%;
  /* height: 6rem; */
  /* position: absolute;
  top: 0;
  left: calc(50% - 3em); */
  /* display: grid; */
  place-items: center;
  /* padding: 4rem 0 0 0; */
}
.header h1 a {
  color: #fff;
}
.header .nav {
  height: 6rem;
  margin:4rem auto 0;
}
.header .nav .ul .li a:hover {
  color: inherit;
}
.header .nav>.ul {
  width: 100%;
  height: inherit;
  place-items: center;
}
.header .nav>.ul>.li {
  list-style: none;
  position: relative;
  width: 100%;
  height: inherit;
  text-align: center;
}
.header .nav>.ul .li p {
  width: inherit;
  height: inherit;
  display: grid;
  align-items: center;
}
.header .nav>.ul>.li:last-of-type {
  display: none;
}
.header .nav>.ul>.li:nth-of-type(5) {
  grid-column: 5/6;
}
.header .nav>.ul>.li a {
  color: #fff;
  width: inherit;
  height: inherit;
  display: inline-grid;
  align-items: center;
}
/*.header .nav>.ul>.li a {
    color: #fff;
    width: inherit;
    height: inherit;
    display: inline-grid;
    align-items: center;
    font-weight: bold;
    font-size: 1.8rem;
}*/
.header h1 a:hover {
  color: #fff;
}
.header a:hover {
  color: initial;
}

.scroll-nav > .hedLogoBox > .hedLogoImgBox > img{
  filter: brightness(30%);
}

/*サブメニュー*/
.header .nav>.ul>.li>.ul {
  display: none;
  width: 100%;
}
.header .nav>.ul>.li>.ul>.li {
  width: inherit;
  padding: 2rem 0;
}
.header .nav>.ul>.li>.ul>.li a {
  color: #fff;

}
.header .nav>.ul>.li>.ul>.li:hover a {
  text-decoration: none;
}

.header .nav>.ul>.li:hover .ul {
  display: block;
  position: absolute;
  left: 0;
}
.header .nav>.ul>.li:hover .ul .li {
  background: #2c150d;
}


/*main*/

.mainimg {
  position: relative;
}
.mainimg {
  width: 100%;
  height: 50rem;
  margin: 0 0 15.5rem;
  overflow: hidden;
}
.ab_mainimg {
    width: 100%;
    height: 50rem;
    margin: 0 0 0 0;
    overflow: hidden;
}
.flow .mainimg {
    margin: 0 0 0 0 !important;
}
.mainimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}


.mainimg h2 {
  width: 100%;
  max-width: 40rem;
  height: 6rem;
  font-size: 3.7rem;
  font-family: 'Hina Mincho', serif;
  color: #fff;
  letter-spacing: 0.2em;
  position: absolute;
  left: 0;
  bottom: 6rem;
  display: grid;
  place-items: center;
}
.mainimg .sub {
  width: 100%;
  max-width: 40rem;
  height: 6rem;
  font-size: 2.7rem;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
}
.button_contact {
  font-family: 'Hina Mincho', serif;
  position: absolute;
  right: 0;
  top: 10%;
  writing-mode: vertical-rl;
  background: #424242;
  width: 5.5rem;
  height: 5.5rem;
}
.button_contact a {
  width: inherit;
  height: inherit;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  position: relative;
  box-shadow: inset 0 0 2rem rgba(255, 255, 255, 0);
}
.button_contact a:hover {
  box-shadow: inset 0 0 2rem rgba(255, 255, 255, 0.5);
  transition: 1.5s;
}
.button_contact a::before {
  content: "";
  background: url(/system_panel/uploads/images/icon_mail.png) no-repeat;
  width: 1.5rem;
  height: 1.1rem;
  display: inline-block;
  position: absolute;
  top: 2rem;
}

.index_cnt5{
    /*background: #242C2E;*/
    padding: 16rem 0 19rem 0;
}
.servicelist_cnt4 {
    /*background: #242C2E;*/
    padding: 16rem 0 19rem 0;
}
.bottom_info {
  background: rgba(0, 0, 0, 0.5) url(/system_panel/uploads/images/bottom_info_bg.jpg) center;
  background-size: cover;
  background-blend-mode: darken;
  padding: 12rem 0;
  width: 90%;
  max-width: 120rem;
  /*margin: 0 auto 19rem;*/
  /*margin: 16rem auto 19rem;*/
  margin: 0 auto;
  display: flex;
  gap: 16rem;
  justify-content: center;
}
.bottom_info .left h2 {
  font-size: 3.7rem;
  font-family: 'Hina Mincho', serif;
  color: #fff;
  margin: 0 0 3.5rem;
  letter-spacing: 0.25em;
}
.bottom_info .left p {
  color: #fff;
  line-height: 2.5;
}
.bottom_info .right {
  max-width: 120rem;
}
.bottom_info .right .buttonB {
  margin: 0 0 3rem;
  width: 28rem;
}



.bottom {
  width: 100%;
  height: 34rem;
  background: rgba(0, 0, 0, 0.2) url(/system_panel/uploads/images/bottom_bg.jpg) center;
  background-blend-mode: darken;
  display: grid;
  place-content: center;
  /*margin: 0 0 11rem;*/
}
.bottom .button_area {
  display: flex;
  width: 100%;
  max-width: 120rem;
  justify-content: space-around;
  align-items: center;
}
.bottom>p {
  font-size: 2.4rem;
  font-family: 'Hina Mincho', serif;
  color: #fff;
  margin: 0 0 5rem;
  text-align: center;
}
.bottom .button_area .tel {
  font-size: 3.7rem;
  flex-grow: 1;
}
.bottom .button_area .tel i {
  color: #fff;
}
.bottom .button_area .tel a {
  color: #fff;
}
.bottom .button_area .buttonB {
  width: 28rem;
  margin: 0 2.5rem
}



/*footer*/

.footer .left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 42%;
}
.allfooter{
    /*background: #fff7e4;*/
    padding: 11rem 0 0 0;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  max-width: 120rem;
  justify-content: space-between;
  margin: auto;
}
.footer .left .logo {
  font-size: 3.7rem;
  font-family: 'Hina Mincho', serif;
  letter-spacing: 0.25em;
}
.footer .left p {
    font-weight: bold;
    line-height: 2.5;
}
.footer .left a {
    color: inherit;
    font-weight: bold;
}
.footer .right .nav>.ul {
  display: grid;
  gap: 3rem 8.85vw;
}

.footer .right .nav>.ul>.li {
  list-style: none;
}
.footer .right .nav>.ul>.li a {
    color: inherit;
    border-bottom: 0.1rem solid #3e3e3e;
    font-weight: bold;
}
.footer .right .nav>.ul>.li a:hover {
  text-decoration: none;
}
.footer .right .ul .li:nth-of-type(1),
.footer .right .ul .li:nth-of-type(2),
.footer .right .ul .li:nth-of-type(3) {
  grid-column: 1/2;
}
.footer .right .ul .li:nth-of-type(3) {
  grid-row: 3/7;
}
.footer .right .ul .li:nth-of-type(4),
.footer .right .ul .li:nth-of-type(5),
.footer .right .ul .li:nth-of-type(6),
.footer .right .ul .li:nth-of-type(7),
.footer .right .ul .li:nth-of-type(8) {
  grid-column: 2/3
}
.footer .right .ul .li:nth-of-type(4) {
  grid-row: 1/2;
}

.footer .right .nav>.ul>.li>.ul {
  display: grid;
  /* gap: 3rem; */
  margin: 2rem 0 0;
}
.footer .right .nav>.ul>.li>.ul .li p {
  display: list-item;
  list-style-type: "-";
  padding-inline-start: 1rem;
}

.footer .copyright {
  width: 100%;
  text-align: center;
  margin: 6rem 0;
}
.footer .copyright a {
  color: inherit;
}





/*ページ遷移時のフェードイン効果*/
html {
  animation: fadein 3s forwards;
}
@keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}




/*スムーススクロール*/
html {
  /*scroll-behavior: smooth;※smoooothでの使用は不可*/
}




/*-----ハンバーガーメニュー-----*/
/*-----20240222@PC時もハンバーガーメニュー表示希望とのことで変更-----*/
/* .navToggle {
  display: none;
} */

    /*アコーディオン*/
    .aco-open::after {
      font-size: 3rem;
      right: 1rem;
  }
  .aco-open.active::after {
      font-size: 3rem;
      right: 1rem;
  }

  /*common.cssでnavに高さが与えられている場合はheight:initial;を追加*/
  .nav.globalMenuSp {
      position: fixed;
      z-index: 20;
      top: 0;
      right: 0;
      /*background:rgba(0,0,0,0.8);*/
      color: #000;
      text-align: center;
      transform: translateY(-100%);
      transition: all 0.6s;
      width: 100%;
      height: initial;
      margin:0;
  }

  .nav.globalMenuSp .ul {
      margin: 0 auto;
      padding: 0;
      width: 100%;
  }
  .nav.globalMenuSp .ul .li {
      font-size: 1.8rem;
      list-style-type: none;
      padding: 0;
      width: 100%;

      margin-bottom: initial;
      background: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .nav.globalMenuSp .ul .li p {
      width: inherit;
      height: inherit;
  }
  nav.globalMenuSp ul li a {
      display: block;
      color: rgba(0, 0, 0, 0.9);
      padding: 1em 0;
      font-size: 1.8rem;
  }

  /* 最後はラインを描かない */
  .nav.globalMenuSp>.ul>.li:last-child {
      /*padding-bottom: 0;*/
      border-bottom: 0;
      border-radius: 0;
  }

  .nav.globalMenuSp .ul .li a {
      display: block;
      color: rgba(0, 0, 0, 0.9);
      padding: 1em 0;
      font-size: 1.8rem;
  }
  .nav.globalMenuSp .ul .li a:hover {
      /*background: #000;*/
  }

  /* このクラスを、jQueryで付与・削除する */
  .nav.globalMenuSp.active {
      transform: translateY(0%);
  }


  .navToggle {
      display: block;
      position: fixed;
      /* bodyに対しての絶対位置指定 */
      right: 13px;
      top: 1.5%;
      width: 42px;
      height: 51px;
      cursor: pointer;
      z-index: 30;
      /*background: #666;*/
      text-align: center;
  }

  .navToggle span {
      display: block;
      position: absolute;
      /* .navToggleに対して */
      width: 30px;
      border-bottom: solid 3px #FFF;
      -webkit-transition: .35s ease-in-out;
      -moz-transition: .35s ease-in-out;
      transition: .35s ease-in-out;
      left: 6px;
  }

  .navToggle span:nth-child(1) {
      top: 9px;
  }

  .navToggle span:nth-child(2) {
      top: 18px;
  }

  .navToggle span:nth-child(3) {
      top: 27px;
  }

  .navToggle span:nth-child(4) {
      border: none;
      color: #FFF;
      font-size: 1.2rem;
      font-weight: bold;
      top: 3.5rem;
  }


  /* 最初のspanをマイナス45度に */
  .navToggle.active span:nth-child(1) {
      top: 18px;
      left: 6px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }

  /* 2番目と3番目のspanを45度に */
  .navToggle.active span:nth-child(2),
  .navToggle.active span:nth-child(3) {
      top: 18px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
  }






/*.headerSwitch用*/
/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
.header {
  /*background: #000;*/
  position: fixed;
  top: 0;
}
.header.scroll-nav {
  /* 余白を狭くする */
  /* 背景を白にする */
  background: rgba(255, 255, 255, 0.5);
  /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  /*box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7);*/
}
/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
.header.scroll-nav h1 a {
  color: #3e3e3e;
}.header.scroll-nav>.nav>.ul >.li > p > a {
  color: #3e3e3e;
}
.header.scroll-nav h1::before{
  background-color: #424242;
}





/*アコーディオン*/
.aco2 {
  display: none;
  /*初期状態で開いておく場合はinitialに変更*/
}
#wrapper .aco2 {
  display: initial;
  /*初期状態で開いておく場合はinitialに変更*/
}
.aco-open {
  position: relative;
}
.aco-open::after {
  /* 閉じている時 */
  content: "－";
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 5rem;
  color: #424242;
  font-family: sans-serif;
}
.aco-open.active::after {
  /* 開いている時 */
  content: "＋";
  font-size: 5rem;
  color: #424242;
  top: 1.5rem;
  font-family: sans-serif;
}




/*========= 流れるテキストslideAnime ===============*/
/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}
.slide-in_inner {
  display: inline-block;
}
/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}




/*wow.js（animate.cssのスクロールのタイミングに発動させるライブラリ）用*/
.box {
  animation-fill-mode: forwards;
}




/*animate.cssの追加css*/
.animate__delay-1s {
  animation-delay: calc(var(--animate-delay)*0.5) !important;
}
.animate__delay-2s {
  animation-delay: calc(var(--animate-delay)*1) !important;
}
.animate__delay-3s {
  animation-delay: calc(var(--animate-delay)*1.5) !important;
}
.animate__delay-4s {
  animation-delay: calc(var(--animate-delay)*2) !important;
}
.animate__delay-5s {
  animation-delay: calc(var(--animate-delay)*2.5) !important;
}
.animate__delay-6s {
  animation-delay: calc(var(--animate-delay)*3) !important;
}




/*==================================================
じわっ
===================================*/

.blur{
  animation-name:blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}


/*slick*/
/*.slick {}
:is(.slick-img img, .thumbnail-img img) {
  height: auto;
  width: 100%;
  aspect-ratio: 4/3;
  padding: 1rem;
}
.slick-prev::before {
  content: "<" !important;
  color: #b2ebfe !important;
  font-weight: bold;
  font-size: 6rem !important;
}
.slick-next::before {
  content: " > " !important;
  color: #b2ebfe !important;
  font-weight: bold;
  font-size: 6rem !important;
}
.slick-next {
  right: -8rem !important;
}
.slick-prev {
  left: -8rem !important;
}
.slick-prev,
.slick-next {
  transform: scale(0.5, 1) !important;
  top: -40rem !important;
  padding: 1em;
  width: 5rem !important;
  height: 5rem !important;
}
.slick-prev:before,
.slick-next:before {
  color: #000;
  opacity: 1;
}*/

/* 20231027@修正  */
.topServiceLInk{
  font-size: 3rem;
font-family: 'Hina Mincho', serif;
color: #fff;
}

.topServiceLInk:hover{
color: #fff;
text-decoration: underline;
}

.topServiceLInkBox {
background: rgba(0, 0, 0, 0.2) url(/system_panel/uploads/images/index_cnt3_3_20231027.jpg) no-repeat;
background-size: cover;
}

.readFont{
font-family: 'Hina Mincho', serif;
}

.scroll-nav > .navToggle > span{
  color: #333;
  border-color: #333;
}
.navToggle.active > span{
  color: #333;
  border-color: #333;
}

.navToggle.active{
  top:0.5%;
}

.header h1 a{
  text-decoration: none;
}

.hedLogoBox{
  transition: all 0.3s ease 0s;
}

.hedLogoBox:hover{
  opacity: 0.6;
}

body {
	background: #dcdcdc;
}