@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 100;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 200;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 300;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 500;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 600;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 800;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 900;
  src: url("../../font/Noto_Sans_Japanese/woff2/NotoSansJP-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 400;
  src: url("../../font/Zen_Old_Mincho/woff2/ZenOldMincho-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 500;
  src: url("../../font/Zen_Old_Mincho/woff2/ZenOldMincho-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 600;
  src: url("../../font/Zen_Old_Mincho/woff2/ZenOldMincho-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 700;
  src: url("../../font/Zen_Old_Mincho/woff2/ZenOldMincho-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Old Mincho";
  font-weight: 900;
  src: url("../../font/Zen_Old_Mincho/woff2/ZenOldMincho-Black.woff2") format("woff2");
}
/*--------------------------------------
    カード型_02
--------------------------------------*/
html {
  scroll-behavior: smooth;
  /****** アンカーリンク用高さ調整 start  ******/
  scroll-padding-top: 180px;
  /******* アンカーリンク用高さ調整 end  *******/
}
html body {
  width: 100%;
  font-family: "Zen Old Mincho", sans-serif;
  color: #333;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "pkna" 1;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.1rem);
  line-height: clamp(1.1rem, 1.06rem + 0.2vw, 1.3rem);
  letter-spacing: 0.1rem;
  overflow-y: scroll;
}
html body main {
  overflow-x: clip;
}
html body main section {
  position: relative;
}
html body main .space {
  display: block;
  height: 1rem;
}
html body main .space05 {
  display: block;
  height: 0.5rem;
}
html body main .space2 {
  display: block;
  height: 2rem;
}
html body main .space3 {
  display: block;
  height: 3rem;
}
html body main p {
  line-height: 1.8;
}
html body main img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
html body main .img_bg {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/*****************************************/
/*****  ヘッダー部分基本幅設定  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.header_layout_width {
  width: 90%;
  margin: 0 auto;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  ヘッダー部分基本幅設定  end  ******/
/*****************************************/
img {
  max-width: 100%;
}

/*****************************************/
/****  コンテンツ部分基本幅設定  start  ****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.layout_width_full {
  width: 90%;
  padding: 0 2rem;
  margin: 0 auto;
}

.layout_width {
  width: 90%;
  margin: 0 auto;
  padding: 2rem 2rem 0;
}

.layout_width_1024 {
  width: 60%;
  margin: 0 auto;
}

.layout_width_830 {
  width: 100%;
  max-width: 830px;
  padding: 0 2rem;
  margin: 0 auto;
}

@media screen and (max-width: 820px) {
  .layout_width_1024,
  .layout_width {
    width: 90%;
    padding: 2rem 2rem 0;
  }
}
@media screen and (max-width: 490px) {
  .layout_width {
    width: 100%;
    padding: 0 0rem;
  }
  .layout_width_1024,
  .layout_width {
    width: 90%;
  }
  .layout_width_830 {
    padding: 0 1rem;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*****  コンテンツ部分基本幅設定  end  *****/
/*****************************************/
/*****************************************/
/*****  セクション部分空白設定  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
section {
  padding: 5rem 0 5rem;
}

@media screen and (max-width: 1024px) {
  section {
    padding: 4rem 0 4rem;
  }
}
@media screen and (max-width: 768px) {
  section {
    padding: 3rem 0 3rem;
  }
}
@media screen and (max-width: 480px) {
  section {
    padding: 2.5rem 0 2.5rem;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  セクション部分空白設定  end  ******/
/*****************************************/
.bgcolor {
  background-color: #0a3990;
}
.bgcolor div h2 {
  color: #4fa1cb;
}
.bgcolor div h2 b {
  color: #4fa1cb;
}

/*****************************************/
/*******  見出し[h2]部分設定  start  ******/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
h2 {
  font-family: "Zen Old Mincho", sans-serif;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
h2 .ja {
  line-height: 1.3;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  position: relative;
  padding: 0 1rem;
}
h2 .ja::before {
  content: "";
  position: absolute;
  bottom: 0%;
  left: 0%;
  transform: skewX(-30deg);
  width: 100%;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(to left, #0a3990 0%, #4fa1cb 50%, #a0d8f4 100%);
  z-index: -1;
}
h2 .en2 {
  font-size: clamp(0.875rem, 2.5vw, 1.05rem);
  text-transform: lowercase;
  line-height: 1;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/********  見出し[h2]部分設定  end  *******/
/*****************************************/
/*****************************************/
/**********  マーカー設定  start  *********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.marker_type1 {
  display: inline;
  background: linear-gradient(transparent 60%, #a0d8f4 55%);
  padding: 0 0.15rem;
  margin: 0 0.15rem;
  -webkit-text-emphasis: filled #0a3990;
  text-emphasis: filled #0a3990;
  font-weight: bold;
}

.marker_type2 {
  display: inline;
  background: linear-gradient(transparent 80%, #ffaf93 55%);
  padding: 0 0.15rem 0.25rem;
  margin: 1rem 0.15rem 0;
  -webkit-text-emphasis: filled rgb(255, 136, 0);
  text-emphasis: filled rgb(255, 136, 0);
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/***********  マーカー設定  end  **********/
/*****************************************/
/*****************************************/
/********フォトギャラリー上下中央設定*******/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
#lightbox {
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  フォトギャラリー上下中央設定 ******/
/*****************************************/
/*****************************************/
/**********  パララックス  start  *********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.parallax_imagebox {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: transparent;
  min-height: 400px;
}
.parallax_imagebox .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.parallax_imagebox .bg_image_one {
  background-image: url("../../img/common/heading/heading01.jpg");
}

@media screen and (max-width: 768px) {
  .parallax_imagebox {
    height: 400px;
  }
  .parallax_imagebox .background {
    background-position: bottom -20vh;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/***********  パララックス  end  **********/
/*****************************************/
#breadcrumb {
  padding: 1rem 0;
  margin: 0rem 0;
  width: 100%;
  background-color: #0a3990;
  color: #fff;
}
#breadcrumb .breadcrumb__warp {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  padding: 0rem 2rem 0;
}
#breadcrumb .breadcrumb__warp ol {
  width: 100%;
  display: flex;
}
#breadcrumb .breadcrumb__warp ol li {
  padding: 0 0.5rem;
  font-size: clamp(0.6rem, 0.56rem + 0.2vw, 0.8rem);
  font-weight: 800;
}
#breadcrumb .breadcrumb__warp ol li:first-child {
  padding: 0 1rem 0 0;
}

/*****************************************/
/*****  inview  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.js-fader {
  -webkit-mask-image: linear-gradient(270deg, transparent 35%, #000 60%, #000);
  mask-image: linear-gradient(270deg, transparent 35%, #000 60%, #000);
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
}
.js-fader.is-show {
  transition: opacity 1.8s, -webkit-mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.8s, mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 1.8s, mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 1;
}

.js-fader-l {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50px);
  -webkit-transform: translateX(-50px);
  transition: 1s all;
  -webkit-transition: 1s all;
}
.js-fader-l.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

.js-fader-lb span {
  opacity: 0;
  display: inline-block;
  transform: translateY(30px);
  animation: fadeUp 0.6s forwards;
  animation-play-state: paused;
  /* 初期は停止 */
}

.js-fader-lb.is-show span {
  animation-play-state: running;
  /* .is-show で再生開始 */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.js-fader-r {
  opacity: 0;
  visibility: hidden;
  transform: translateX(50px);
  -webkit-transform: translateX(50px);
  transition: 1s all;
  -webkit-transition: 1s all;
}
.js-fader-r.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

.js-fader-t {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  -webkit-transform: translateY(50px);
  transition: 1s all;
  -webkit-transition: 1s all;
}
.js-fader-t.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.js-fader-d {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
  transition: 1s all;
  -webkit-transition: 1s all;
}
.js-fader-d.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  inview  end  ******/
/*****************************************/
.slide-btn {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 100%;
  text-transform: uppercase;
  max-width: 400px;
  margin: auto;
  padding: 15px 17px 15px;
  font-weight: bold;
  border: 1px solid #0a3990;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  background-color: #0a3990;
  color: #fff;
  border-radius: 2px;
}
.slide-btn i {
  font-size: 18px;
}
.slide-btn::before {
  content: "";
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: all 0.5s;
  z-index: -1;
}
.slide-btn:hover::before {
  transform: translateX(0);
}
.slide-btn:hover {
  color: #0a3990;
}

@media screen and (max-width: 768px) {
  .slide-btn {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 10px 20px 9px;
    font-weight: bold;
    border: 1px solid #0a3990;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
  }
}
@media screen and (max-width: 660px) {
  .slide-btn {
    width: 90%;
    max-width: 300px;
    padding: 12px 15px;
    font-size: 0.95rem;
  }
}
.btn2 {
  width: -moz-fit-content;
  width: fit-content;
  color: #333;
  padding: 10px 20px;
  display: block;
  text-align: center;
  background-size: 180% auto;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.3s ease;
}
.btn2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
  z-index: 1;
}
.btn2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #4fa1cb;
  transition: width 0.4s ease;
  z-index: 2;
}
.btn2:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}
.btn2:hover {
  color: #0a3990;
}
.btn2 i {
  opacity: 0.8;
}
.btn3,
a.btn,
button.btn {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem 0rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-custom01 {
  margin-bottom: 0.5rem;
  padding: 0;
  border-radius: 4rem;
}
a.btn-custom01::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  transform: translate3d(0, 0.75rem, -1rem);
  border: 2px solid #000;
  border-radius: inherit;
  background: #979797;
  box-shadow: 0 0.6rem 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01 .btn-custom01-front {
  position: relative;
  display: block;
  padding: 1rem 3rem;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: inherit;
  background: #ffffff;
}
a.btn-custom01:hover {
  transform: translate(0, 0.25rem);
  background: #ffffff;
}
a.btn-custom01:hover::before {
  transform: translate3d(0, 0.5rem, -1rem);
  box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:hover::after {
  content: "\f061";
}
a.btn-custom01:active {
  transform: translate(0, 0.75rem);
}
a.btn-custom01:active::before {
  transform: translate3d(0, 0, -1rem);
  box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:active::after {
  content: "\f061";
}

.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

.zoomin {
  width: 100%;
  height: 100%;
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: transform 1.2s ease, filter 1.2s ease;
  -webkit-transition: transform 1.2s ease, filter 1.2s ease;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  transition: all ease 1s;
  -webkit-transition: all ease 1s;
}
.zoomin.is-show {
  transform: scale(1);
  -webkit-transform: scale(1);
  filter: blur(0);
  -webkit-filter: blur(0);
  transition-delay: 0.3s;
}

.filter {
  filter: blur(12px) brightness(0.9);
  opacity: 0;
  transition: filter 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: filter, opacity;
}
.filter.is-show {
  filter: blur(0) brightness(1.3);
  opacity: 1;
}

.filter2 {
  filter: blur(12px) brightness(0.9);
  opacity: 0;
  transition: filter 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: filter, opacity;
}
.filter2.is-show {
  filter: blur(0) brightness(1);
  opacity: 1;
}

.zoom {
  width: 90%;
  margin: 0 auto;
  padding: 10px 8px;
  text-align: end;
  color: #333;
}
.button-21 a {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  font-weight: 400;
  outline: 1px solid #77a160;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 250px;
  text-align: center;
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s;
}

.button-21 a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #0a3990;
  z-index: -999;
  transition: all 0.3s ease;
}

.button-21 a:hover::before {
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.subcopy {
  line-height: 1.5;
  font-size: clamp(1.175rem, 3vw, 2rem);
  font-weight: bold;
}

.service-tit {
  font-size: 1.5rem;
  text-align: left;
  color: #a0d8f4;
  font-weight: bold;
  margin: 4rem auto 4rem;
  display: flex;
  align-items: center;
}
.service-tit::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background-color: #0a3990;
  margin-left: 1rem;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 60px solid #bf9e4f;
  border-bottom: 0;
  /* ▼ 中央に配置するための追加 */
  margin: 50px auto;
  /* 上下に少し余白を入れて、左右は自動で中央に */
}
@media screen and (max-width: 480px) {
  .triangle {
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-top: 50px solid #bf9e4f;
  }
}

.strong {
  font-weight: bold;
}

.strong2 {
  font-weight: bold;
  color: #0a3990;
  font-size: clamp(0.875rem, 4vw, 1.25rem);
}

.indent {
  text-indent: -1em;
  padding-left: 1em;
  hanging-punctuation: first;
  display: inline-block;
}

.parallax {
  background-image: url("../../img/home/gallery01.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgi {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.g-name {
  display: block;
  margin-top: 2rem;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-left: auto;
  margin-right: 3%;
  text-align: left;
}

header {
  width: 100%;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 20;
  padding: 10px 5%;
  background-color: #ffffff;
  position: absolute;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}
header .he_logo {
  width: 100%;
  max-width: 220px;
  font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
  color: #0a3990;
  font-weight: 900;
  padding: 5px 15px;
  transition: 0.3s ease;
}
header .he-box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
}
header .he-box .he_wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
  margin: 0 0px 0 0;
}
header .he-box .he_wrap nav ul {
  display: flex;
  justify-content: space-around;
  gap: 40px;
  align-items: center;
  text-align: right;
}
header .he-box .he_wrap nav ul li p {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}
header .he-box .he_wrap nav ul li span {
  color: #0a3990;
  font-size: 11px;
  font-weight: 800;
}
header .he-box .he_wrap nav ul li a {
  position: relative;
  display: inline-block;
}
header .he-box .he_wrap nav ul li a::after {
  position: absolute;
  bottom: -5%;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background-color: #58b9ca;
  transform: scale(0, 1);
  transform-origin: center top;
  /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: 0.3s;
}
header .he-box .he_wrap nav ul li a:hover::after {
  transform: scale(1, 1);
}
header .he-box .he_wrap nav ul .li-contact {
  background-color: #0a3990;
  padding: 10px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  transition: 0.5s;
  font-weight: 600;
  font-size: 13px;
}
header .he-box .he_wrap nav ul .li-contact a {
  color: #fff;
}
header .he-box .he_wrap nav ul .li-contact a i {
  margin: 0 5px 0 0;
}
header .he-box .he_wrap nav ul .li-contact:hover {
  opacity: 0.7;
}
header .he-box .he_wrap nav ul .li-contact a::after {
  height: 0px;
}
header .he-box .he_wrap nav ul .active a::after {
  transform: scale(1, 1);
  width: 100%;
}
header .he-box .he_wrap .he_instagram {
  width: 25px;
  margin: 0 0 0 20px;
}
header .he-box .he_wrap .he_instagram img {
  width: 100%;
}
header .he-box .he_wrap .he_instagram:hover {
  opacity: 0.5;
}

/* 上部に固定させるスタイルを用意 */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #0a3990;
  color: #fff;
}
.fixed .he-box .he_wrap nav ul li span {
  color: #ffffff;
}
.fixed .he_logo {
  color: #fff;
}
.fixed .navicon {
  background-color: #fff;
}
.fixed .navicon::after, .fixed .navicon::before {
  background-color: #fff;
}

@media screen and (max-width: 1280px) {
  header {
    z-index: 20;
    padding: 10px 30px 10 10px;
  }
  header .he_logo {
    width: 180px;
  }
  header .he-box .he_wrap nav ul {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    align-items: center;
  }
}
@media screen and (max-width: 1120px) {
  header {
    padding: 10px 20px 10px 20px;
  }
  header .he_logo {
    padding: 10px 0;
  }
}
@media screen and (max-width: 928px) {
  header .he-box .he_wrap nav {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  header {
    padding: 0px 20px 0 10px;
    gap: 20px;
  }
  header .he-box .he_wrap {
    margin: 0 15px 0 0;
  }
  .header.fixed {
    padding: 0px 20px 0 0px !important;
  }
}
/*****************************************/
/********  ヘッダー画像設定 start  ********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.heading_works {
  background-image: url("../../img/common/heading/heading01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.heading_construction {
  background-image: url("../../img/common/heading/heading02.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.heading_company {
  background-image: url("../../img/common/heading/heading03.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.heading_news {
  background-image: url("../../img/common/heading/heading04.jpg");
  background-position: center 5%;
  background-repeat: no-repeat;
  background-size: cover;
}

.heading_contact {
  background-image: url("../../img/common/heading/heading05.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*********  ヘッダー画像設定 end  *********/
/*****************************************/
#heading {
  width: 100%;
  height: 40vh;
  display: flex;
  align-items: center;
  margin: 0 0 0rem 0;
  position: relative;
}
#heading .heading__warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  display: flex;
  align-items: center;
}
#heading .heading__warp--bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50vh;
  z-index: -1;
}
#heading .heading__warp--bg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
#heading .heading__warp h1 {
  display: flex;
  color: #fff;
  flex-flow: column;
  transition: all ease 1s;
  font-family: "Zen Old Mincho", sans-serif;
  line-height: 1.5;
}
#heading .heading__warp h1 .ja {
  font-size: clamp(1.725rem, 2.5vw, 2.5rem);
  font-family: "Zen Old Mincho", sans-serif;
  margin: 0 1rem 0 0rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transition: all ease 1s;
  font-weight: bold;
}
#heading .heading__warp h1 .english {
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Zen Old Mincho", sans-serif;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transition: all ease 1s;
}

@media screen and (max-width: 1024px) {
  #heading {
    height: 35vh;
  }
}
@media screen and (max-width: 768px) {
  #heading {
    height: 35vh;
  }
}
@media screen and (max-width: 480px) {
  #heading {
    height: 40vh;
    background-size: cover;
  }
  #heading .heading__warp h1 {
    text-transform: uppercase;
    font-weight: bold;
  }
  #heading .heading__warp h1 .ja {
    width: 100%;
    font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
    margin: 1rem 0 0;
  }
  #heading .heading__warp h1 .english {
    width: 100%;
    font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  }
}
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999999;
  /*ナビのスタート位置と形状*/
  min-height: -webkit-fill-available;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100dvh;
  /*ナビの高さ*/
  background-color: #fff;
  /*動き*/
  transition: all 0.6s;
}
#g-nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100dvh;
  background-image: url(../../img/company/bgi-left.png);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: cover;
}
#g-nav .g-nav-icon {
  display: flex;
  align-items: center;
  width: 200px;
  margin-top: 30px;
  margin-left: 5px;
}
#g-nav .g-nav-icon a {
  padding: 0;
}
#g-nav .g-nav-icon a img {
  width: 30px;
  margin-right: 20px;
  transition: 0.4s;
}
#g-nav .g-nav-icon a img:hover {
  opacity: 0.5;
}
#g-nav .g-nav-icon a .youtube {
  width: 50px;
  margin-left: -5px;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 99999;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
}

/*リストのレイアウト設定*/
#g-nav ul li {
  list-style: none;
  text-align: center;
}
#g-nav ul li img {
  width: 100%;
  max-width: 250px;
  margin-bottom: 2rem;
}
#g-nav ul li .closebtn {
  margin: 30px auto 0;
  color: #a0d8f4;
  font-weight: bold;
  border: 1px solid #4fa1cb;
  border-radius: 30px;
  width: 40%;
  padding: 4px 10px;
}
#g-nav ul li a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
  padding: 25px 0 5px 0;
  display: block;
  letter-spacing: 0.1em;
  transition: 0.5s;
}
#g-nav ul li a:hover {
  opacity: 0.5;
}
#g-nav ul li p {
  font-size: 18px;
  text-align: center;
  line-height: 20px;
}
#g-nav ul li p i {
  font-size: 30px;
}
#g-nav ul li span {
  font-weight: 600;
  font-size: 13px;
  color: #0a3990;
  line-height: 10px;
}
#g-nav ul li:first-child a {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 1rem;
  font-size: clamp(1.7rem, 1.66rem + 0.2vw, 1.9rem);
  color: #0a3990;
}
/*========= ボタンのためのCSS ===============*/
/* Hamburger menu button */
.menu-btn:checked ~ .menu {
  transform: scale(1, 1);
  transform-origin: top;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li {
  opacity: 1;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
}

.menu-btn {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 9999;
}

.menu-icon {
  display: inline-block;
  position: absolute;
  top: -10px;
  right: 0px;
  z-index: 9999999;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 10px 0;
}

.navicon {
  background: #0a3990;
  display: block;
  height: 3px;
  width: 26px;
  position: relative;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #0a3990;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
  top: 9px;
}

.navicon:after {
  bottom: 9px;
}

/* Hamburger Menu Animation Start */
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
  background: #0a3990;
}

.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
  background: #0a3990;
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
  top: 0;
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  bottom: 0;
}

.menu-btn:checked ~ .menu-icon .navicon {
  background: rgba(0, 0, 0, 0);
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.menu-btn,
.menu-icon {
  display: none;
}

@media screen and (max-width: 928px) {
  .menu-btn,
  .menu-icon {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  #g-nav ul {
    top: 50%;
  }
  #g-nav ul li a {
    padding: 20px 0 5px 0;
  }
  #g-nav ul li p {
    font-size: 16px;
    line-height: 20px;
  }
}
#floating {
  overflow: hidden;
  display: none;
  /* 初期状態で非表示 */
  position: fixed;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 99;
}
#floating li {
  display: block;
  margin: 0.25rem 0;
  width: 45px;
  transition: all ease 0.5s;
}
#floating li a {
  width: 100%;
  border: solid 2px #0a3990;
  border-right: none;
  text-transform: uppercase;
  background-color: #4fa1cb;
  color: #666;
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
  padding: 1rem 0.7rem;
  writing-mode: vertical-rl;
  font-weight: 800;
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  position: relative;
}
#floating li a i {
  font-size: 1.2em;
}
#floating li:nth-child(2) i {
  font-size: 1.4em;
}
#floating li:hover {
  opacity: 0.5;
}

@media screen and (max-width: 768px) {
  #floating {
    display: none !important;
  }
}
_:lang(x) + _:-webkit-full-screen-document,
#floating {
  right: 18px;
}
_:lang(x) + _:-webkit-full-screen-document li,
#floating li {
  border: none;
}

#greeting .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  #greeting .section {
    width: 85%;
  }
}
@media screen and (max-width: 1080px) {
  #greeting .section {
    width: 90%;
  }
}
#greeting .section {
  position: relative;
  z-index: 2;
}
#greeting .section_inner {
  display: flex;
  flex-direction: column;
}
#greeting .section_inner .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
#greeting .section_inner .wrap .textbox {
  flex: 1;
  width: 100%;
  max-width: 875px;
}
#greeting .section_inner .wrap .textbox .catchphrase {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate {
  margin: 5px auto;
  font-size: clamp(1rem, 3.5vw, 1.725rem);
  color: #333;
  font-weight: 700;
  line-height: normal;
  position: relative;
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate::after {
  content: "";
  display: block;
  width: 101%;
  height: 110%;
  background: #4fa1cb;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: 0.5s ease-in-out;
  transition-delay: 0.15s;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate.is-show::after {
  left: 152%;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate .emphasis {
  position: relative;
  display: inline-block;
  color: #0a3990;
  font-weight: bold;
  font-size: clamp(1.25rem, 5vw, 2rem);
  text-emphasis: filled dot #0a3990;
  -webkit-text-emphasis: filled dot #0a3990;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate .emphasis br {
  display: none;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .border-animate.inview .highlight::after {
  width: 100%;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .sp-br {
  display: none;
}
#greeting .section_inner .wrap .textbox .catchphrase_textbox .mbr {
  display: none;
}
#greeting .section_inner .wrap .textbox .text {
  line-height: 1.8;
  font-size: clamp(0.875rem, 4vw, 1rem);
}
#greeting .section_inner .wrap .textbox .text .strong2 {
  -webkit-text-emphasis: dot;
          text-emphasis: dot;
  -webkit-text-emphasis-position: over;
          text-emphasis-position: over;
  color: #2c7f70;
}
#greeting .section_inner .wrap .textbox .text .name {
  margin-top: 2rem;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  margin-left: auto;
  text-align: right;
}
#greeting .section_inner .wrap .imgbox {
  flex: 1;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 520px;
  --slide-dir: 120%;
  position: relative;
}
#greeting .section_inner .wrap .imgbox::before {
  content: "";
  position: absolute;
  top: 4%;
  right: -20px;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #0a3990 0%, #4fa1cb 50%, #a0d8f4 100%);
  z-index: -1;
}
#greeting .section_inner .wrap .imgbox img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 60% 50%;
     object-position: 60% 50%;
}
#greeting .section_inner .wrap:nth-child(even) {
  flex-direction: row-reverse;
  padding-top: 4rem;
}
#greeting .section_inner .wrap:nth-child(even)::after {
  transform: scaleX(-1);
  background-position: 0% 79%;
}
#greeting .section_inner .wrap:nth-child(even) .textbox {
  padding-left: 0;
  padding-right: 6%;
}
#greeting .section_inner .wrap:nth-child(even) .imgbox {
  --slide-dir: -120%;
}
#greeting .section_inner .wrap:nth-child(even) .imgbox::after {
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
}
#greeting .section_inner .wrap:nth-child(even) .imgbox img {
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
}
@media screen and (max-width: 1080px) {
  #greeting .section_inner .wrap {
    gap: 3rem;
  }
}
@media screen and (max-width: 980px) {
  #greeting .section_inner .wrap {
    flex-direction: column;
    gap: 3rem;
  }
  #greeting .section_inner .wrap::after {
    height: 88vh;
  }
  #greeting .section_inner .wrap .textbox .text {
    width: 100%;
  }
  #greeting .section_inner .wrap .imgbox {
    aspect-ratio: 3/2;
    width: 80%;
    margin-left: auto;
  }
  #greeting .section_inner .wrap:nth-child(even) {
    padding-top: 2rem;
    flex-direction: column;
  }
  #greeting .section_inner .wrap:nth-child(even)::after {
    height: 100vh;
  }
  #greeting .section_inner .wrap:nth-child(even) .textbox {
    padding-left: 6%;
  }
  #greeting .section_inner .wrap:nth-child(even) .imgbox {
    margin-left: unset;
    margin-right: auto;
  }
}
@media screen and (max-width: 768px) {
  #greeting .section_inner .wrap .textbox .text {
    width: 100%;
  }
  #greeting .section_inner .wrap .imgbox {
    margin-left: unset;
  }
}
@media screen and (max-width: 480px) {
  #greeting .section_inner .wrap .textbox .text {
    letter-spacing: 1px;
  }
  #greeting .section_inner .wrap .textbox .catchphrase {
    margin-bottom: 1rem;
  }
  #greeting .section_inner .wrap .imgbox {
    width: 90%;
  }
}

#company {
  background-color: #5776af;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(255, 255, 255, 0.08) 26px, rgba(255, 255, 255, 0.08) 26px, transparent 27px, transparent 51px, rgba(255, 255, 255, 0.08) 52px, rgba(255, 255, 255, 0.08) 52px, transparent 53px, transparent 77px, rgba(255, 255, 255, 0.08) 78px, rgba(255, 255, 255, 0.08) 78px, transparent 79px, transparent 103px, rgba(255, 255, 255, 0.08) 104px, rgba(255, 255, 255, 0.08) 104px, transparent 105px, transparent 129px, rgba(255, 255, 255, 0.08) 130px, rgba(255, 255, 255, 0.08) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(255, 255, 255, 0.08) 26px, rgba(255, 255, 255, 0.08) 26px, transparent 27px, transparent 51px, rgba(255, 255, 255, 0.08) 52px, rgba(255, 255, 255, 0.08) 52px, transparent 53px, transparent 77px, rgba(255, 255, 255, 0.08) 78px, rgba(255, 255, 255, 0.08) 78px, transparent 79px, transparent 103px, rgba(255, 255, 255, 0.08) 104px, rgba(255, 255, 255, 0.08) 104px, transparent 105px, transparent 129px, rgba(255, 255, 255, 0.08) 130px, rgba(255, 255, 255, 0.08) 130px);
}
#company::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 90%;
  background-color: #fff;
  z-index: 0;
}
#company .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  #company .section {
    width: 85%;
  }
}
@media screen and (max-width: 1080px) {
  #company .section {
    width: 90%;
  }
}
#company .section {
  z-index: 1;
  margin: 1rem auto;
}
#company .section_inner {
  padding-top: 1rem;
}
#company .section_inner__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  line-height: 1.5;
  border-radius: 5px;
  text-transform: capitalize;
}
#company .section_inner__table th,
#company .section_inner__table td {
  border-bottom: 1px dashed #0a3990;
  padding: 2em;
}
#company .section_inner__table th {
  border-bottom: 2px solid #0a3990;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
  background-color: rgba(211, 234, 255, 0.5098039216);
}
@media (max-width: 768px) {
  #company .section_inner__table th {
    padding: 2em 0;
  }
}
@media (max-width: 650px) {
  #company .section_inner__table {
    display: block;
    width: 100%;
  }
  #company .section_inner__table th,
  #company .section_inner__table td {
    text-align: center;
    display: block;
    width: 100%;
    padding: 1em;
  }
  #company .section_inner__table th {
    border-bottom: none;
    font-size: 1rem;
  }
  #company .section_inner__table td {
    margin-bottom: 1rem;
    padding-top: 0;
  }
  #company .section_inner__table tr:last-child td {
    border-bottom: none;
    margin-bottom: 0rem;
    text-align: left;
  }
}
@media (max-width: 490px) {
  #company .section_inner__table {
    display: block;
    width: 100%;
  }
  #company .section_inner__table th,
  #company .section_inner__table td {
    text-align: left;
  }
}
@media screen and (max-width: 980px) {
  #company::before {
    height: 95%;
  }
  #company .section h2 {
    margin: 0 auto 1rem;
  }
}
#access::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80%;
  background-image: url(../../img/company/bgi-left.png);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: contain;
}
#access .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  #access .section {
    width: 85%;
  }
}
@media screen and (max-width: 1080px) {
  #access .section {
    width: 90%;
  }
}
#access .section_inner .map {
  margin: 2rem auto 5rem;
}
#access .section_inner .map iframe {
  width: 100%;
  border-radius: 0px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  min-height: 400px;
}
@media screen and (max-width: 480px) {
  #access .section_inner .map iframe {
    aspect-ratio: 2/1.3;
  }
}
@media screen and (max-width: 768px) {
  #access::before {
    background-size: cover;
  }
}

#carousel {
  position: relative;
}
#carousel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 40%;
  height: 100%;
  display: block;
  z-index: -1;
  background-color: #0a3990;
  clip-path: polygon(0 0, 65% 0, 100% 100%, 35% 100%);
}
#carousel .carousel__warp h2 {
  margin: 0 auto 4rem;
}
#carousel .carousel__warp--slider {
  overflow: hidden;
}
#carousel .carousel__warp--slider--box {
  transition-timing-function: linear;
}
#carousel .carousel__warp--slider--box--list {
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
#carousel .carousel__warp--slider--box--list img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
#carousel .carousel__warp--link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#carousel .carousel__warp--link a {
  margin: 2rem auto 0;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #0a3990;
  border: solid 1px #0a3990;
  color: #4fa1cb;
  transition: all ease 0.5s;
}
#carousel .carousel__warp--link a:hover {
  background-color: #4fa1cb;
  color: #0a3990;
}

#modal {
  padding: 5rem 0 15rem 0;
  position: relative;
  margin: 0 3rem 3rem;
  width: calc(100% - 6rem);
}
#modal::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  content: "coating gallery";
  text-transform: uppercase;
  font-family: "Zen Old Mincho", sans-serif;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(4rem, 3.5rem + 2.5vw, 6.5rem);
  writing-mode: vertical-rl;
  text-wrap: nowrap;
  line-height: 1;
  z-index: 1;
}
#modal .modal__warp h2 {
  margin: 0 auto 4rem;
}
#modal .modal__warp .modal {
  padding: 0 0;
}
#modal .modal__warp .inner {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 20px;
}
#modal .modal__warp .inner > ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#modal .modal__warp .inner > ul > li {
  width: calc(25% - 20px);
  margin-top: unset !important;
  margin: 0 10px 20px;
}
#modal .modal__warp .inner > ul > li figure {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
#modal .modal__warp .inner > ul > li figure img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all ease 1s;
}
#modal .modal__warp .inner > ul > li figure:hover img {
  scale: 1.15;
}
#modal .modal__warp {
  /* モーダルを開くボタン */
}
#modal .modal__warp .modal__trigger {
  cursor: pointer;
}
#modal .modal__warp .modal__trigger:nth-child(n+2) {
  margin-top: 60px;
}
#modal .modal__warp {
  /* モーダル本体 */
}
#modal .modal__warp .modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
#modal .modal__warp .modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, 0.85);
  cursor: pointer;
}
#modal .modal__warp .modal__container {
  position: absolute;
  top: calc(50% + 46px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100% - 40px, 1000px);
  height: calc(80vh - 40px);
  padding: 20px;
  background: #fff;
}
#modal .modal__warp .modal__inner {
  position: relative;
  overflow-y: scroll;
  height: calc(100% - 50px);
  padding: 0px 20px 20px 20px;
  margin: 50px 0 0 0;
}
#modal .modal__warp {
  /* モーダルを閉じるボタン */
}
#modal .modal__warp .modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgb(50, 50, 50);
  cursor: pointer;
  transition: opacity 0.6s;
  z-index: 999;
}
#modal .modal__warp .modal__close:hover {
  opacity: 0.6;
}
#modal .modal__warp .modal__close:before,
#modal .modal__warp .modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: "";
}
#modal .modal__warp .modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#modal .modal__warp .modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#modal .modal__warp {
  /* モーダル内のコンテンツ */
}
#modal .modal__warp .modal__content .modal__title {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
}
#modal .modal__warp .modal__content .modal__text {
  text-align: justify;
  -moz-text-align-last: left;
       text-align-last: left;
}

.calender__content table {
  border: #0a3990 2px solid;
  width: 100%;
}
.calender__content table tbody tr {
  border-bottom: #0a3990 2px solid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calender__content table tbody tr th,
.calender__content table tbody tr td {
  border-right: #0a3990 2px solid;
}
.calender__content table tbody tr th:last-child,
.calender__content table tbody tr td:last-child {
  border-right: none;
}
.calender__content table tbody tr th {
  padding: 5px 0px;
  text-align: center;
  background-color: #4fa1cb;
}
.calender__content table tbody tr td {
  min-height: 70px;
  text-align: left;
  padding: 5px;
  padding-top: 0;
}
.calender__content table tbody tr td .date {
  font-weight: bold;
  color: #0a3990;
}
.calender__content table tbody tr td.sat .date {
  color: blue;
}
.calender__content table tbody tr td.holiday .date, .calender__content table tbody tr td.sun .date {
  color: red;
}
.calender__content table tbody tr td.close {
  background-color: #ffe0eb;
}
.calender__content table tbody tr td.close2 {
  background-color: #ffff8b;
}
.calender__content table tbody tr td.close3 {
  background-color: #c8e7fa;
}
.calender__content table tbody tr td.close4 {
  background-color: #c8ffc8;
}
.calender__content table tbody tr td.close5 {
  background-color: #eee5d7;
}
.calender__content table tbody tr td.close6 {
  background-color: #ffd700;
}
.calender__content table tbody tr td {
  container-type: inline-size;
}
@container (max-width: 60px) {
  .calender__content table tbody tr td .event-button {
    font-size: 30cqi;
    padding: 3cqi 5cqi;
  }
}
.calender__content table tbody tr:last-child {
  border-bottom: none;
}
.calender__content .event-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin: 2px 0;
  font-size: 12px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.calender__content .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(infinity);
}
.calender__content .modal-content {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 5px;
  max-width: 500px;
  width: 90%;
}
.calender__content .close-button {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
  background: none;
  border: none;
}
.calender__content .modal-title {
  margin-bottom: 15px;
  padding-right: 20px;
}
.calender__content .modal-events {
  margin-top: 10px;
}
.calender__content .modal-events a {
  color: blue;
  text-decoration: underline;
}
.calender__content .cms_calendar {
  margin-bottom: 20px;
  display: none;
}
.calender__content .cms_calendar.current-month {
  display: block;
}
.calender__content .cms_calendar .past {
  background-color: #f5f5f5;
}
.calender__content .cms_calendar .close {
  background-color: #ffe6e6;
}
.calender__content .cms_calendar .date {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.calender__content .d_null {
  background-color: #d8d8d8;
}
.calender__content .calender__btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin-bottom: 20px;
}
.calender__content .calender__btn #prev {
  grid-row: 1/2;
  grid-column: 1/2;
  display: none;
}
.calender__content .calender__btn #next {
  grid-row: 1/2;
  grid-column: 3/4;
}
.calender__content .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.calender__content .calender__note {
  margin-top: 30px;
}

#calender {
  padding: 120px 0;
}
#calender .section {
  width: 80%;
  max-width: 1280px;
  margin-inline: auto;
}

body:has(#eventModal.open) {
  overflow: hidden;
}
body:has(#eventModal.open) header,
body:has(#eventModal.open) #floating,
body:has(#eventModal.open) #page-top {
  display: none;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 2.5em;
  right: 2.5em;
  z-index: 99;
}
.pagetop a {
  width: 52px;
  height: 52px;
  aspect-ratio: 1/1;
  display: block;
  background-color: #0a3990;
  border: solid 1px #0a3990;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  border-radius: 50%;
  transition: all ease 0.5s;
}
.pagetop a i {
  color: #fff;
}
.pagetop a:hover {
  background-color: #fff;
}
.pagetop a:hover i {
  color: #0a3990;
}

@media screen and (max-width: 768px) {
  .pagetop {
    bottom: calc(75px + 1.5rem);
  }
}
@media screen and (max-width: 480px) {
  .pagetop {
    display: none;
    position: fixed;
    bottom: calc(75px + 1.5rem);
    right: 1.5em;
  }
  .pagetop a {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
  }
}
#footer {
  position: relative;
  padding-top: 2rem;
  background-color: #0a3990;
  color: #fff;
}
#footer .footer__warp {
  width: 80%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 1280px) {
  #footer .footer__warp {
    width: 85%;
  }
}
@media screen and (max-width: 1080px) {
  #footer .footer__warp {
    width: 90%;
  }
}
#footer .footer__warp .he_logo {
  width: 100%;
  border-bottom: 1px solid #fff;
  padding: 1rem;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
}
#footer .footer__warp_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}
#footer .footer__warp_content--info {
  font-size: 1.25rem;
  line-height: normal;
  display: flex;
  gap: 4rem;
}
#footer .footer__warp_content--info--address {
  margin-bottom: 1.5rem;
}
#footer .footer__warp_content--info--tel a {
  transition: all 0.3s ease;
  font-weight: bold;
  padding: 10px 17px 10px;
  background-color: #fff;
  color: #0a3990;
}
#footer .footer__warp_content--info--tel a::before {
  background-color: #5776af;
}
#footer .footer__warp_content--info--tel a:hover {
  color: #0a3990;
  font-weight: bold;
  color: #fff;
}
#footer .footer__warp_content--info--tel p {
  min-width: 200px;
  margin-top: 12px;
  font-size: 16px;
}
#footer .footer__warp nav .nav_list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
#footer .footer__warp nav .nav_list .col1 {
  grid-column: 1;
}
#footer .footer__warp nav .nav_list .col2 {
  grid-column: 2;
}
#footer .footer__warp nav .nav_list li {
  font-weight: 500;
  margin-bottom: 1rem;
  list-style: none;
  display: flex;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
#footer .footer__warp nav .nav_list li::before {
  font-family: "Font Awesome 6 Free";
  content: "\f138";
  /* fa-circle-chevron-right のコード */
  font-weight: 900;
  /* solidは900 */
  margin-right: 8px;
  transition: transform 0.3s ease;
}
#footer .footer__warp nav .nav_list li span {
  display: none;
}
#footer .footer__warp nav .nav_list li:hover {
  color: #F4F6F6;
}
#footer .footer__warp nav .nav_list li:hover::before {
  transform: translateX(5px);
}
#footer .footer__copy {
  width: 80%;
  margin: 1rem auto 0;
  padding: 1rem 0;
  text-align: right;
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
}

.sp-fixed-link {
  display: none;
}

@media screen and (max-width: 1280px) {
  #footer .footer__warp_content {
    flex-direction: column;
  }
  #footer .footer__warp_content--info {
    width: 100%;
  }
  #footer .footer__warp nav .nav_list {
    grid-template-columns: repeat(6, max-content);
  }
}
@media screen and (max-width: 1080px) {
  #footer .footer__warp nav {
    width: 100%;
  }
  #footer .footer__warp nav .nav_list {
    grid-template-columns: repeat(3, max-content);
  }
}
@media screen and (max-width: 768px) {
  #footer {
    position: relative;
  }
  #footer .footer__warp_content {
    text-align: center;
  }
  .sp-fixed-link {
    display: flex;
    position: fixed;
    bottom: -70px;
    /* 初期位置は画面外 */
    left: 0;
    z-index: 99;
    width: 100%;
    transition: bottom 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
    /* transformを追加 */
    transform: translateY(100%);
    /* 初期位置は下に隠れる状態 */
  }
  .sp-fixed-link.hidden {
    display: none;
  }
  .sp-fixed-link.scroll {
    opacity: 0;
    transform: translateY(100%);
    /* スクロール中は下に隠れる */
    pointer-events: none;
  }
  .sp-fixed-link.page-open {
    bottom: 0;
    opacity: 1;
    transform: translateY(0);
    /* 下からスライドして表示される */
  }
  .sp-fixed-link.page-top {
    bottom: 0;
    opacity: 0;
    transform: translateY(0);
    /* 下からスライドして表示される */
    pointer-events: none;
  }
  #sp_btn {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    text-transform: capitalize;
  }
  #sp_btn ul {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    background-size: contain;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-image: none;
  }
  #sp_btn ul li {
    height: -moz-max-content;
    height: max-content;
    width: 100%;
    display: block;
    padding: 10px 0;
    background-color: #0a3990;
    border-right: 1px solid #a0d8f4;
  }
  #sp_btn ul li:last-child {
    border-right: none;
  }
  #sp_btn ul li a,
  #sp_btn ul li .button {
    display: flex;
    text-align: center;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
    transition: all 0.3s ease;
    cursor: pointer;
    transition: 0.5s;
    justify-content: center;
    align-items: center;
    letter-spacing: 0;
  }
  #sp_btn ul li a:hover,
  #sp_btn ul li .button:hover {
    opacity: 0.5;
  }
  #sp_btn ul li a i,
  #sp_btn ul li .button i {
    margin-right: 0.5rem;
  }
  #sp_btn ul li:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 700px) {
  #footer .footer__warp_content--info {
    text-align: left;
    flex-direction: column;
    gap: 0;
  }
  #footer .footer__warp_content--info--tel a {
    margin: unset;
    padding: 10px 11px 10px;
    width: 40%;
  }
}
@media screen and (max-width: 580px) {
  #footer .footer__warp_content {
    margin-top: 1rem;
  }
  #footer .footer__warp_content--info {
    font-size: 1.1rem;
  }
  #footer .footer__warp nav .nav_list {
    grid-template-columns: repeat(2, max-content);
  }
  #footer .footer__copy {
    margin: 0rem auto 0;
  }
}
@media screen and (max-width: 500px) {
  #footer .footer__warp_content--info--address {
    font-size: 1rem;
  }
  #footer .footer__warp_content--info--tel a {
    padding: 10px 11px 10px;
    width: 55%;
  }
}
.sp_fixed {
  position: fixed !important;
  bottom: -70px;
  left: 0;
  z-index: 999;
  transition: 1s;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}/*# sourceMappingURL=style.css.map */