@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");
}
@font-face {
  font-family: "BIZ UDPGothic";
  font-weight: 400;
  src: url("../../font/BIZ_UDPGothic/woff2/BIZUDPGothic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "BIZ UDPGothic";
  font-weight: 700;
  src: url("../../font/BIZ_UDPGothic/woff2/BIZUDPGothic-Bold.woff2") format("woff2");
}
/*--------------------------------------
    カード型_02
--------------------------------------*/
html {
  scroll-behavior: smooth;
  /****** アンカーリンク用高さ調整 start  ******/
  scroll-padding-top: 90px;
  /******* アンカーリンク用高さ調整 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;
  background-color: #ffffff;
}
html body main {
  overflow: hidden !important;
}
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 .indent {
  text-indent: -1em;
  padding-left: 1em;
  hanging-punctuation: first;
  display: inline-block;
}

/*****************************************/
/*****  ヘッダー部分基本幅設定  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: 80%;
  }
}
@media screen and (max-width: 480px) {
  .layout_width {
    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;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  セクション部分空白設定  end  ******/
/*****************************************/
.bgcolor {
  background-color: #595757;
}
.bgcolor div h2 {
  color: #e31b3b;
}
.bgcolor div h2 b {
  color: #e31b3b;
}

/*****************************************/
/*******  見出し[h2]部分設定  start  ******/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
h2 {
  width: 100%;
  display: flex;
  flex-flow: column;
  margin-bottom: 4rem;
  text-transform: uppercase;
  line-height: 1.5;
  font-family: "Zen Old Mincho", sans-serif;
  font-weight: bold;
  position: relative;
  text-align: left;
}
h2 .en {
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: "sans-serif";
  text-transform: capitalize;
  color: #333;
  line-height: 1;
  font-weight: bold;
  text-align: left;
  position: relative;
}
h2 .en::first-letter {
  color: #e31b3b;
}
h2 .ja {
  font-size: 1.2rem;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: bold;
  width: 100%;
  margin-right: auto;
  margin-left: 5px;
  width: 100%;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 928px) {
  h2 {
    margin-bottom: 3rem;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/********  見出し[h2]部分設定  end  *******/
/*****************************************/
/*****************************************/
/**********  マーカー設定  start  *********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.marker_type1 {
  display: inline;
  background: linear-gradient(transparent 60%, #f1dd66 55%);
  padding: 0 0.15rem;
  margin: 0 0.15rem;
  -webkit-text-emphasis: filled #f1dd66;
  text-emphasis: filled #f1dd66;
  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;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax_imagebox .bg_image_one {
  background-image: url("../../img/common/sample__bg.jpg");
}

@media screen and (max-width: 768px) {
  .parallax_imagebox {
    height: 400px;
  }
  .parallax_imagebox .background {
    background-position: bottom -20vh;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/***********  パララックス  end  **********/
/*****************************************/
#breadcrumb {
  padding: 0rem 0;
  margin: 1rem 0;
  width: 100%;
}
#breadcrumb .breadcrumb__warp {
  width: 100%;
  padding: 0rem 2rem 0;
  display: flex;
  justify-content: left;
  align-items: flex-start;
}
#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: 500px;
  margin: auto;
  padding: 15px 17px 15px;
  font-weight: bold;
  border: 1px solid #f1dd66;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
  background-color: #f1dd66;
  color: #fff;
  border-radius: 30px;
}
.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: #f1dd66;
}

@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 #f1dd66;
    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;
  }
}
.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: #f1dd66;
  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: #F4F6F6;
  font-weight: bold;
  margin: 4rem auto 4rem;
  display: flex;
  align-items: center;
}
.service-tit::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background-color: #f1dd66;
  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: #f5bc00;
  font-size: clamp(1.25rem, 4vw, 2.25rem);
}

.bg {
  width: 100%;
  height: 60px;
  display: flex;
}
.bg .box1 {
  background-color: #f1dd66;
  flex: 1;
  border-radius: 0 5px 0 0;
}
.bg .box2 {
  background-color: transparent;
  border-radius: 0 0px 0 15px;
  flex: 1;
}

.bg2 {
  width: 100%;
  height: 2px;
  display: flex;
}
.bg2 .box1 {
  background-color: #e31b3b;
  flex: 2;
}
.bg2 .box2 {
  background-color: #f1dd66;
  flex: 1.2;
}

#wrapper {
  position: relative;
}
#wrapper canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

/*=============
.bg_pattern 背景
==============*/
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: -1;
}

.Paper_v2 {
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(241, 221, 102, 0.2) 26px, rgba(241, 221, 102, 0.2) 26px, transparent 27px, transparent 51px, rgba(241, 221, 102, 0.2) 52px, rgba(241, 221, 102, 0.2) 52px, transparent 53px, transparent 77px, rgba(241, 221, 102, 0.2) 78px, rgba(241, 221, 102, 0.2) 78px, transparent 79px, transparent 103px, rgba(241, 221, 102, 0.2) 104px, rgba(241, 221, 102, 0.2) 104px, transparent 105px, transparent 129px, rgba(241, 221, 102, 0.2) 130px, rgba(241, 221, 102, 0.2) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(241, 221, 102, 0.2) 26px, rgba(241, 221, 102, 0.2) 26px, transparent 27px, transparent 51px, rgba(241, 221, 102, 0.2) 52px, rgba(241, 221, 102, 0.2) 52px, transparent 53px, transparent 77px, rgba(241, 221, 102, 0.2) 78px, rgba(241, 221, 102, 0.2) 78px, transparent 79px, transparent 103px, rgba(241, 221, 102, 0.2) 104px, rgba(241, 221, 102, 0.2) 104px, transparent 105px, transparent 129px, rgba(241, 221, 102, 0.2) 130px, rgba(241, 221, 102, 0.2) 130px);
}

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 2%;
  background-color: transparent;
  position: absolute;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}
header .he_logo {
  width: 90px;
  padding: 5px 15px;
  transition: 0.3s ease;
  background-color: #fff;
  border-radius: 5px;
}
header .he_logo img {
  width: 100%;
}
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;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 5px;
}
header .he-box .he_wrap nav ul {
  display: flex;
  justify-content: space-around;
  gap: 40px;
  align-items: center;
  text-align: center;
}
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: #595757;
  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: 1px;
  background-color: #e31b3b;
  transform: scale(0, 1);
  transform-origin: center top;
  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: #f1dd66;
  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;
  color: #595757;
}
.fixed .he-box .he_wrap {
  border: 1px solid #f1dd66;
}
.fixed .he_logo {
  width: 100px;
  background-color: #fff;
  border-radius: 5px;
}

@media screen and (max-width: 1280px) {
  header {
    z-index: 20;
    padding: 10px 30px 10 10px;
  }
  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;
  }
  .fixed .he-box .he_wrap {
    border: none;
  }
}
@media screen and (max-width: 1024px) {
  header {
    padding: 20px 2%;
    align-items: center;
  }
  header .he-box .he_wrap {
    background-color: transparent;
  }
  header .he-box .he_wrap nav {
    display: none;
  }
  header .he_logo {
    width: 80px;
  }
}
@media screen and (max-width: 480px) {
  header {
    padding: 16px 5%;
    gap: 20px;
  }
  header .he-box .he_wrap {
    margin: 0 15px 0 0;
  }
  .header.fixed {
    padding: 0px 20px 0 0px !important;
  }
}
/*****************************************/
/********  ヘッダー画像設定 start  ********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.heading_company {
  background-image: url("../../img/common/heading/heading01.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

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

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

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

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

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*********  ヘッダー画像設定 end  *********/
/*****************************************/
#heading {
  width: 100%;
  height: 42vh;
  display: flex;
  align-items: center;
  margin: 0 0 0rem 0;
  position: relative;
}
#heading::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 100px;
  border-radius: 0 0 5px 0;
  top: 0;
  left: 0;
  background-color: #fff;
}
#heading .heading__warp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  display: flex;
  align-items: flex-end;
}
#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 {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  color: #333;
  flex-flow: column;
  transition: all ease 1s;
  font-family: "Zen Old Mincho", sans-serif;
  line-height: 1.5;
  position: relative;
  margin: unset;
  padding: 0.5rem 2.5rem;
  background: #fff;
  border-radius: 0 5px 0px 0;
}
#heading .heading__warp h1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(241, 221, 102, 0.2) 26px, rgba(241, 221, 102, 0.2) 26px, transparent 27px, transparent 51px, rgba(241, 221, 102, 0.2) 52px, rgba(241, 221, 102, 0.2) 52px, transparent 53px, transparent 77px, rgba(241, 221, 102, 0.2) 78px, rgba(241, 221, 102, 0.2) 78px, transparent 79px, transparent 103px, rgba(241, 221, 102, 0.2) 104px, rgba(241, 221, 102, 0.2) 104px, transparent 105px, transparent 129px, rgba(241, 221, 102, 0.2) 130px, rgba(241, 221, 102, 0.2) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(241, 221, 102, 0.2) 26px, rgba(241, 221, 102, 0.2) 26px, transparent 27px, transparent 51px, rgba(241, 221, 102, 0.2) 52px, rgba(241, 221, 102, 0.2) 52px, transparent 53px, transparent 77px, rgba(241, 221, 102, 0.2) 78px, rgba(241, 221, 102, 0.2) 78px, transparent 79px, transparent 103px, rgba(241, 221, 102, 0.2) 104px, rgba(241, 221, 102, 0.2) 104px, transparent 105px, transparent 129px, rgba(241, 221, 102, 0.2) 130px, rgba(241, 221, 102, 0.2) 130px);
  z-index: 0;
}
#heading .heading__warp h1 .english {
  position: relative;
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
  font-family: "sans-serif";
  margin: 0 1rem 0 0rem;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  transition: all ease 1s;
  font-weight: bold;
  text-transform: uppercase;
}

@media screen and (max-width: 1280px) {
  #heading {
    height: 30vh;
  }
}
@media screen and (max-width: 1024px) {
  #heading {
    height: 35vh;
  }
  #heading::after {
    display: none;
  }
}
@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 p {
    width: 100%;
    font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  }
  #heading .heading__warp h1 span {
    width: 100%;
    font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
    margin: 1rem 0 0;
  }
}
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background-color: #fff;
  /*動き*/
  transition: all 0.6s;
}
#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: 100px;
  margin-bottom: 0rem;
}
#g-nav ul li .closebtn {
  margin: 30px auto 0;
  color: #F4F6F6;
  font-weight: bold;
  border: 1px solid #ffffff;
  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 {
  display: none;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  line-height: 10px;
}
#g-nav ul li:first-child a {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#g-nav ul li:last-child {
  font-size: 2em;
}

/*========= ボタンのための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: 0px;
  right: 0px;
  z-index: 9999999;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 10px 0;
}

.navicon {
  background: #e31b3b;
  display: block;
  height: 2px;
  width: 33px;
  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: #e31b3b;
  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: #333;
}

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

.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: 1024px) {
  .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;
  border-right: none;
  width: 45px;
  transition: all ease 0.5s;
  background-color: #e31b3b;
  color: #fff;
  border-radius: 5px 0 0 5px;
}
#floating li a {
  text-transform: uppercase;
  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:hover {
  color: #333;
  background-color: #f1dd66;
}

@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 {
  position: relative;
}
#greeting .section {
  position: relative;
  z-index: 2;
}
#greeting .section_inner {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}
#greeting .section_inner .wrap {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
#greeting .section_inner .wrap .textbox1 {
  width: 100%;
  padding-left: 5%;
}
#greeting .section_inner .wrap .textbox1 .catchphrase {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .border-animate {
  margin: 5px auto;
  font-size: 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 .textbox1 .catchphrase_textbox .border-animate::after {
  content: "";
  display: block;
  width: 101%;
  height: 110%;
  background: #f1dd66;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: 0.5s ease-in-out;
  transition-delay: 0.15s;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .border-animate.is-show::after {
  left: 152%;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .border-animate br {
  display: none;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .border-animate .emphasis {
  position: relative;
  display: inline-block;
  color: #333;
  font-weight: bold;
  font-size: 2rem;
  text-emphasis: filled dot #595757;
  -webkit-text-emphasis: filled dot #595757;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .border-animate.inview .highlight::after {
  width: 100%;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .sp-br {
  display: none;
}
#greeting .section_inner .wrap .textbox1 .catchphrase_textbox .mbr {
  display: none;
}
#greeting .section_inner .wrap .textbox1_text {
  line-height: 1.8;
  font-size: clamp(0.875rem, 4vw, 1.05rem);
}
#greeting .section_inner .wrap .imgbox1 {
  aspect-ratio: 3/2;
  width: 100%;
  max-width: 860px;
  position: relative;
  overflow: hidden;
  height: -moz-fit-content;
  height: fit-content;
}
#greeting .section_inner .wrap .imgbox1::after {
  content: "";
  display: block;
  width: 101%;
  height: 110%;
  background: #f1dd66;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: 0.5s ease-in-out;
  transition-delay: 0.15s;
}
#greeting .section_inner .wrap .imgbox1.is-show::after {
  left: 152%;
}
#greeting .section_inner .wrap .imgbox1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 10%;
     object-position: center 10%;
}
#greeting .section_inner .wrap:nth-child(even) {
  flex-direction: row-reverse;
  align-items: flex-end;
  position: relative;
}
#greeting .section_inner .wrap:nth-child(even)::before {
  content: "";
  position: absolute;
  top: -10rem;
  left: 13%;
  width: 26%;
  aspect-ratio: 3/2;
  background-image: url(../../img/company/greeting1-2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#greeting .section_inner .wrap:nth-child(even) {
  /* inview で is-show が付いたら表示 */
}
#greeting .section_inner .wrap:nth-child(even).is-show::before {
  opacity: 1;
  transform: translateY(0);
}
#greeting .section_inner .wrap:nth-child(even) .w-txt {
  padding: 2rem 5rem 0rem 2rem;
}
#greeting .section_inner .wrap:nth-child(even) .w-txt .strong {
  font-size: 1.25rem;
}
#greeting .section_inner .wrap:nth-child(even) .w-txt .strong .emphasis2 {
  -webkit-text-emphasis: dot;
          text-emphasis: dot;
  -webkit-text-emphasis-position: over;
          text-emphasis-position: over;
}
#greeting .section_inner .wrap:nth-child(even) .imgbox2 {
  width: 20%;
  z-index: -1;
}
@media screen and (max-width: 1620px) {
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate {
    font-size: 1.4rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate .emphasis {
    font-size: 1.6rem;
  }
  #greeting .section_inner .wrap:nth-child(even)::before {
    top: -6rem;
    left: 7%;
  }
}
@media screen and (max-width: 1366px) {
  #greeting .section_inner .wrap {
    align-items: center;
  }
  #greeting .section_inner .wrap .textbox1 {
    padding-left: 3%;
  }
  #greeting .section_inner .wrap .imgbox1 {
    width: 90%;
  }
  #greeting .section_inner .wrap:nth-child(even) .w-txt {
    padding: 0rem 2rem;
  }
}
@media screen and (max-width: 1280px) {
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate {
    font-size: 1.25rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate .emphasis {
    font-size: 1.4rem;
  }
  #greeting .section_inner .wrap .imgbox1 {
    aspect-ratio: 1/1;
  }
  #greeting .section_inner .wrap .imgbox1 img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #greeting .section_inner .wrap:nth-child(even)::before {
    left: 3%;
    width: 24%;
  }
  #greeting .section_inner .wrap:nth-child(even) .imgbox2 {
    width: 27%;
  }
}
@media screen and (max-width: 1180px) {
  #greeting .section_inner {
    gap: 6rem;
  }
  #greeting .section_inner .wrap:nth-child(even) {
    align-items: flex-start;
  }
  #greeting .section_inner .wrap:nth-child(even)::before {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  #greeting .section_inner {
    gap: 4rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate {
    font-size: 1.1rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate .emphasis {
    font-size: 1.1rem;
  }
  #greeting .section_inner .wrap:nth-child(even) {
    justify-content: flex-end;
  }
  #greeting .section_inner .wrap:nth-child(even) .w-txt {
    padding: 0rem 3rem 0 0;
  }
  #greeting .section_inner .wrap:nth-child(even) .w-txt .strong {
    font-size: 1.1rem;
  }
  #greeting .section_inner .wrap:nth-child(even) .imgbox2 {
    width: 32%;
  }
}
@media screen and (max-width: 980px) {
  #greeting .section_inner {
    gap: 0;
  }
  #greeting .section_inner .wrap {
    flex-direction: column-reverse;
    gap: 4rem;
  }
  #greeting .section_inner .wrap .textbox1 {
    padding-left: 5%;
  }
  #greeting .section_inner .wrap .textbox1 h2 {
    margin-bottom: 2rem;
  }
  #greeting .section_inner .wrap .imgbox1 {
    aspect-ratio: 3/2;
    width: 55%;
    margin-right: auto;
  }
  #greeting .section_inner .wrap:nth-child(even) {
    padding: 0 5%;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  #greeting .section_inner .wrap .textbox1 {
    padding: 0 5%;
  }
  #greeting .section_inner .wrap:nth-child(even) .imgbox2 {
    width: 42%;
  }
}
@media screen and (max-width: 480px) {
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate {
    font-size: 1rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate br {
    display: block;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate .emphasis {
    font-size: 1rem;
  }
  #greeting .section_inner .wrap .imgbox1 {
    width: 88%;
  }
  #greeting .section_inner .wrap:nth-child(even) .w-txt {
    padding: 0;
  }
  #greeting .section_inner .wrap:nth-child(even) .w-txt .strong {
    font-size: 1rem;
  }
  #greeting .section_inner .wrap:nth-child(even) .imgbox2 {
    width: 240px;
  }
}
@media screen and (max-width: 420px) {
  #greeting .section_inner .wrap:nth-child(even) .w-txt .strong br {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate {
    font-size: 0.9rem;
  }
  #greeting .section_inner .wrap .textbox1 .catchphrase .border-animate .emphasis {
    font-size: 0.95rem;
  }
}

#company {
  position: relative;
}
#company::after {
  content: "";
  position: absolute;
  bottom: 18rem;
  right: 0;
  width: 37%;
  height: 40%;
  background-image: url(../../img/common/logo/logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  z-index: -1;
  opacity: 0.3;
}
#company .section {
  width: 90%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 980px) {
  #company .section {
    width: 90%;
  }
}
@media screen and (max-width: 480px) {
  #company .section {
    width: 90%;
  }
}
#company .section_inner .address-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 4rem;
}
#company .section_inner .address-wrapper .address-box {
  width: 100%;
}
#company .section_inner .address-wrapper .address-box table {
  width: 50%;
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 2rem;
  line-height: 1.5;
}
#company .section_inner .address-wrapper .address-box table th,
#company .section_inner .address-wrapper .address-box table td {
  border-bottom: 2.5px solid #ddd;
  padding: 1em;
}
#company .section_inner .address-wrapper .address-box table th {
  border-bottom: 2.5px solid #e31b3b;
  text-transform: capitalize;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}
#company .section_inner .address-wrapper .address-box table td .sbr {
  display: none;
}
@media (max-width: 600px) {
  #company .section_inner .address-wrapper .address-box table th {
    width: 30%;
  }
}
@media screen and (max-width: 400px) {
  #company .section_inner .address-wrapper .address-box table td .sbr {
    display: block;
  }
}
#company .section_inner .address-wrapper .address-box table {
  width: 100%;
}
#company .section_inner .map .map-content {
  margin: 2rem auto 5rem;
}
#company .section_inner .map .map-content iframe {
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 2/1;
  border-radius: 0px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  min-height: 400px;
}
@media screen and (max-width: 480px) {
  #company .section_inner .map .map-content iframe {
    aspect-ratio: 2/1.3;
  }
}
#company .section_inner .map .map-content {
  margin: unset;
  width: 60%;
  margin-right: auto;
  aspect-ratio: unset;
}
@media screen and (max-width: 1240px) {
  #company::after {
    bottom: 76%;
    right: -3%;
    height: 25%;
  }
  #company .section_inner .address-wrapper {
    flex-direction: column;
  }
  #company .section_inner .address-wrapper .address-box table {
    width: 65%;
  }
  #company .section_inner .map .map-content {
    margin-right: unset;
    margin: 0 auto;
  }
}
@media screen and (max-width: 980px) {
  #company::after {
    bottom: 86%;
    right: 3%;
  }
}
@media screen and (max-width: 890px) {
  #company .section_inner .address-wrapper .address-box table {
    width: 90%;
  }
  #company .section_inner .map .map-content {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  #company::after {
    bottom: 83%;
    right: 0%;
  }
}
@media screen and (max-width: 480px) {
  #company::after {
    bottom: 80%;
    right: 1%;
  }
  #company .section_inner .address-wrapper .address-box table {
    width: 100%;
  }
}
.decorate {
  width: 100%;
  height: 32vh;
  margin: 7rem 0;
  position: relative;
}
.decorate__bg {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.decorate__bg::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.15));
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: -1;
  opacity: 0.25;
}
.decorate__image {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100vh;
  background-image: url("../../img/common/bgi01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

#carousel {
  position: relative;
}
#carousel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 40%;
  height: 100%;
  display: block;
  z-index: -1;
  background-color: #595757;
  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: #595757;
  border: solid 1px #595757;
  color: #e31b3b;
  transition: all ease 0.5s;
}
#carousel .carousel__warp--link a:hover {
  background-color: #ffffff;
  color: #f1dd66;
}

#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: #f1dd66 2px solid;
  width: 100%;
}
.calender__content table tbody tr {
  border-bottom: #f1dd66 2px solid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calender__content table tbody tr th,
.calender__content table tbody tr td {
  border-right: #f1dd66 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: #ffffff;
}
.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: #f1dd66;
}
.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: #e31b3b;
  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: #f1dd66;
}
.pagetop a:hover i {
  color: #333;
}

@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;
  background-image: url(../../img/common/bgi01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 42%;
}
#footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6039215686) 0%, rgba(247, 247, 247, 0.5215686275) 50%, rgba(238, 238, 238, 0.3098039216) 100%);
  pointer-events: none;
  z-index: 0;
}
#footer .footer__warp {
  width: 90%;
  margin: 0 auto;
  max-width: 1480px;
  position: relative;
}
@media screen and (max-width: 980px) {
  #footer .footer__warp {
    width: 90%;
  }
}
@media screen and (max-width: 480px) {
  #footer .footer__warp {
    width: 90%;
  }
}
#footer .footer__warp {
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3rem 0;
}
#footer .footer__warp_content {
  display: flex;
  align-items: center;
  gap: 2rem;
}
#footer .footer__warp_content .he_logo {
  width: 160px;
  padding: 1rem;
  text-align: center;
  border-radius: 30px;
  font-size: 1.5rem;
  font-weight: bold;
}
#footer .footer__warp_content .he_logo a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#footer .footer__warp_content--info {
  color: #333;
  font-size: 1rem;
  line-height: normal;
}
#footer .footer__warp_content--info--address {
  margin-bottom: 1.5rem;
}
#footer .footer__warp_content--info--address p .sbr {
  display: none;
}
#footer .footer__warp nav .nav_list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
#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 {
  color: #333;
  font-weight: 500;
  margin-bottom: 1rem;
  list-style: none;
  transition: all 0.5s ease;
  position: relative;
}
#footer .footer__warp nav .nav_list li:before {
  content: "\f138";
  /* fa-circle-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -20px;
  top: 0%;
  color: #e31b3b;
  font-size: 0.8em;
}
#footer .footer__warp nav .nav_list li p {
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  position: relative;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}
#footer .footer__warp nav .nav_list li span {
  display: none;
}
#footer .footer__warp nav .nav_list li:hover {
  color: #e31b3b;
}
#footer .footer__copy {
  padding: 1rem 0;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
  background-color: #e31b3b;
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
}

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

@media screen and (max-width: 1024px) {
  #footer::after {
    background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(247, 247, 247, 0.76) 50%, rgba(238, 238, 238, 0) 90%);
  }
  #footer .footer__warp {
    flex-direction: column;
    align-items: center;
    row-gap: 4rem;
  }
}
@media screen and (max-width: 880px) {
  #footer {
    position: relative;
    margin: 4rem 0 0 0;
  }
}
@media screen and (max-width: 768px) {
  #footer {
    position: relative;
  }
  #footer .footer__copy {
    padding: 1rem 0;
    padding-bottom: 70px;
    text-align: center;
    font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
  }
  .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: 50px;
    width: 100%;
    display: block;
    padding: 10px 0;
    background-color: #f1dd66;
    border-right: 1px solid #F4F6F6;
  }
  #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: 490px) {
  #footer .footer__warp_content {
    gap: 10px;
  }
  #footer .footer__warp_content .he_logo {
    width: 150px;
    padding: 0;
    font-size: 1.25rem;
  }
  #footer .footer__warp_content--info {
    width: 100%;
  }
  #footer .footer__warp_content--info--address {
    font-size: 1rem;
  }
  #footer .footer__warp nav {
    padding-left: 2rem;
  }
  #footer .footer__copy {
    padding-bottom: 80px;
  }
  #sp_btn ul li a i {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 375px) {
  #footer .footer__warp_content--info {
    width: 90%;
  }
  #footer .footer__warp_content--info--address p .sbr {
    display: block;
  }
}
.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 */