@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
@font-face {
  font-family: "Zen Kaku Gothic";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Zen_Kaku_Gothic_New/woff2/ZenKakuGothicNew-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic";
  font-weight: 500;
  font-style: normal;
  src: url("../../font/Zen_Kaku_Gothic_New/woff2/ZenKakuGothicNew-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic";
  font-weight: 700;
  font-style: normal;
  src: url("../../font/Zen_Kaku_Gothic_New/woff2/ZenKakuGothicNew-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic";
  font-weight: 900;
  font-style: normal;
  src: url("../../font/Zen_Kaku_Gothic_New/woff2/ZenKakuGothicNew-Black.woff2") format("woff2");
}
html {
  scroll-behavior: smooth;
  /****** アンカーリンク用高さ調整 start  ******/
  scroll-padding-top: 180px;
  /******* アンカーリンク用高さ調整 end  *******/
}
html body {
  width: 100%;
  font-family: "Zen Kaku Gothic", "LINESeedJP", sans-serif;
  color: #222222;
  background: #f7f3ef;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "pkna" 1;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1.1rem);
  line-height: clamp(2rem, 1.96rem + 0.2vw, 2.2rem);
  letter-spacing: 0.1rem;
  position: relative;
}
html body main {
  overflow: hidden;
}
html body main .space {
  display: block;
  height: 1rem;
}
html body main .check_list {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}
html body main .check_list li {
  padding-bottom: 0.5rem;
  line-height: 1.5;
  border-bottom: 2px solid #f58326;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
html body main .check_list li::before {
  content: "";
  background-image: url(../../img/common/check.png);
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 1.15rem;
  min-height: 1.15rem;
  display: block;
}
html body main .check_list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
html body.noscroll {
  overflow: hidden;
  touch-action: none; /* モバイルでも操作を制限 */
}

@media screen and (max-width: 480px) {
  html body {
    line-height: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
  }
}
/*****************************************/
/*****  inview  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.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-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;
  transform: translateY(20px) scale(0.8);
  -webkit-transform: translateY(20px) scale(0.8);
  transition: 0.6s all cubic-bezier(0.175, 0.885, 0.32, 1.375);
  -webkit-transition: 0.6s all cubic-bezier(0.175, 0.885, 0.32, 1.375);
}
.js-fader-t.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transform: translateY(0) scale(1);
}

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

.js-blur {
  filter: blur(6px);
  -webkit-filter: blur(6px);
  transition: 1s all;
  -webkit-transition: 1s all;
}
.js-blur.is-show {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  filter: blur(0);
  -webkit-filter: blur(0);
}

.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);
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  inview  end  ******/
/*****************************************/
img {
  max-width: 100%;
}

/*****************************************/
/****  コンテンツ部分基本幅設定  start  ****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.layout_width {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media screen and (max-width: 480px) {
  .layout_width {
    padding: 0 1rem;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*****  コンテンツ部分基本幅設定  end  *****/
/*****************************************/
/*****************************************/
/*****  セクション部分空白設定  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
section {
  padding: 6rem 0;
  background-color: #f7f3ef;
}

@media screen and (max-width: 1024px) {
  section {
    padding: 4rem 0;
  }
}
@media screen and (max-width: 768px) {
  section {
    padding: 3rem 0;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  セクション部分空白設定  end  ******/
/*****************************************/
/*****************************************/
/*******  見出し[h2]部分設定  start  ******/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.txt_m {
  font-size: 1.25em;
  line-height: 1.85;
}

.txt_l {
  font-size: 1.75em;
  line-height: 1.85;
  font-weight: 700;
}

.frame {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #2ca05e;
  color: #fff;
}
.frame::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #2ca05e transparent transparent;
  translate: -50% 100%;
}

.deco {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.deco::before {
  content: "";
  height: 3rem;
  width: 5px;
  background-color: #2ca05e;
  position: absolute;
  left: -2rem;
  border-radius: 10px;
  transform: rotate(-45deg);
}
.deco::after {
  content: "";
  height: 3rem;
  width: 5px;
  background-color: #2ca05e;
  position: absolute;
  right: -2rem;
  border-radius: 10px;
  transform: rotate(45deg);
}

h2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  margin-bottom: 2rem;
  font-family: "Zen Kaku Gothic", "LINESeedJP", sans-serif;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}
h2 .en {
  text-transform: uppercase;
  font-size: clamp(2.2rem, 2.16rem + 0.2vw, 2.4rem);
  font-family: "Zen Kaku Gothic", "LINESeedJP", sans-serif;
  font-weight: bold;
}
h2 .ja {
  font-size: clamp(2.3rem, 2.26rem + 0.2vw, 2.5rem);
}
h2 .ja span {
  font-size: 1.35em;
  font-weight: 900;
  padding: 0 5px;
  color: #2ca05e;
}

@media screen and (max-width: 768px) {
  h2 .ja {
    font-size: clamp(2rem, 1.96rem + 0.2vw, 2.2rem);
  }
}
@media screen and (max-width: 480px) {
  .txt_m {
    font-size: 1.1em;
    line-height: 1.55;
  }
  .txt_l {
    font-size: 1.5em;
    line-height: 1.85;
  }
  h2 .ja {
    font-size: clamp(1.5rem, 1.46rem + 0.2vw, 1.7rem);
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/********  見出し[h2]部分設定  end  *******/
/*****************************************/
.hukidasi {
  padding-top: 2rem;
  font-size: 1.5em;
}
.hukidasi .btn {
  padding: 15px 30px !important;
}

.button_solid012 .btn {
  border-radius: 5px;
  position: relative;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 25px;
  font-weight: 600;
  border: 2px solid #222222;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.button_solid012 .btn span {
  background: #222222;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: -2rem;
  padding: 3px 10px;
  font-size: 0.8em;
  color: #fff;
  font-weight: bold;
}
.button_solid012 .btn span:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 10px solid transparent;
  border-top: 5px solid #222222;
}
.button_solid012 .btn:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f58326;
  border-bottom: 2px solid #222222;
  border-radius: 5px;
  z-index: -1;
}
.button_solid012 .btn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #222222;
  border: 2px solid #000;
  border-radius: inherit;
  box-shadow: 0 0.4rem 0 0 rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0.4rem, -1rem);
  transition: all 0.3s;
  z-index: -2;
}
.button_solid012 .btn:hover {
  transform: translate3d(0, 0.2rem, -1rem);
}
.button_solid012 .btn:hover:after {
  transform: translate3d(0, 0.2rem, -1rem);
  box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 480px) {
  .hukidasi {
    padding-top: 2rem;
    font-size: 1.1em;
  }
  .hukidasi .btn {
    padding: 15px 30px !important;
  }
  .button_solid012 .btn {
    padding: 12px 16px !important;
  }
}
/*****************************************/
/**********  マーカー設定  start  *********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.marker_type1 {
  display: inline;
  background: linear-gradient(transparent 60%, rgba(44, 160, 94, 0.6) 55%);
  padding: 0 0.15rem;
  margin: 0 0.15rem;
  -webkit-text-emphasis: filled #2ca05e;
  text-emphasis: filled #2ca05e;
  font-weight: bold;
}

.marker_type2 {
  display: inline;
  background: linear-gradient(transparent 60%, rgb(255, 136, 0) 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;
}
#breadcrumb .breadcrumb__warp {
  width: 80%;
  margin: 0 auto;
  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;
}

@media screen and (max-width: 480px) {
  #breadcrumb .breadcrumb__warp {
    width: 90%;
  }
}
header {
  width: calc(100% - 4rem);
  display: flex;
  gap: 30px;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  top: 0;
  margin-top: 10px;
  left: 2rem;
  border-radius: 5px;
  z-index: 20;
  padding: 20px 3%;
  background-color: #fff;
  position: absolute;
  transition: background-color 0.3s ease, color 0.3s ease;
}
header .he_logo {
  transition: 0.3s ease;
}
header .he_logo img {
  width: 220px;
}
header .he_logo span {
  font-size: 2em;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 900;
}
header .he-box {
  position: relative;
  display: flex;
  justify-content: end;
}
header .he-box .he_wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: end;
}
header .he-box .he_wrap nav ul {
  display: flex;
  justify-content: space-around;
  gap: 40px;
  align-items: center;
}
header .he-box .he_wrap nav ul li p {
  font-size: 0.9em;
  text-align: center;
  font-weight: 600;
}
header .he-box .he_wrap nav ul li span {
  color: #2ca05e;
  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: #2ca05e;
  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 .active a::after {
  transform: scale(1, 1);
  width: 100%;
}

/* 上部に固定させるスタイルを用意 */
.fixed {
  position: fixed;
  top: 0;
  z-index: 100;
}
@media screen and (max-width: 1280px) {
  header .he-box .he_wrap nav ul {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    align-items: center;
  }
}
@media screen and (max-width: 1279px) {
  header .he-box .he_wrap nav {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  header {
    width: calc(100% - 2rem);
    left: 1rem;
    padding: 12px 3%;
  }
  header .he_logo {
    width: 200px;
  }
  header .he-box .he_wrap {
    margin: 0 15px 0 0;
  }
  .fixed .he_logo {
    width: 200px;
  }
}
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background-color: #f7f3ef;
  /*動き*/
  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;
}

/*アクティブクラスがついたら位置を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 {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  align-items: center;
}
#g-nav ul .logo span {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  font-size: 2.5em;
}
#g-nav ul li {
  font-size: 1.15em;
  list-style: none;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
#g-nav ul li img {
  width: 100%;
  max-width: 200px;
}
#g-nav ul li a {
  font-weight: bold;
  text-decoration: none;
  display: block;
  letter-spacing: 0.1em;
  transition: 0.5s;
}
#g-nav ul li a:hover {
  opacity: 0.5;
}
#g-nav ul li p {
  text-align: center;
}
#g-nav ul li p i {
  font-size: 30px;
}
#g-nav ul li span {
  font-weight: 600;
  color: #222222;
}
#g-nav ul li:first-child a {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

/*========= ボタンのための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: #2ca05e;
  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: #2ca05e;
  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);
}

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

.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: 1279px) {
  .menu-btn,
  .menu-icon {
    display: block;
  }
}
@media screen and (max-width: 480px) {
  #g-nav ul {
    top: 50%;
  }
  #g-nav ul .sns_wrap {
    margin-top: 1rem;
  }
  #g-nav ul li p {
    line-height: 20px;
  }
  #g-nav ul li img {
    margin-bottom: 1rem;
  }
}
#floating {
  position: fixed;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 99;
  display: none;
}
#floating li {
  display: block;
  margin: 0.5rem 0;
  border-right: none;
  transform: translateX(1rem);
  transition: all ease 0.5s;
}
#floating li a {
  border-radius: 5px 0 0 5px;
  width: 65px;
  background-color: #f2c74f;
  color: #fff;
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.9rem);
  padding: 1rem 1.5rem 1rem 0.5rem;
  writing-mode: vertical-rl;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  position: relative;
  transition: all ease 0.5s;
  font-weight: 900;
}
#floating li:nth-child(1) a {
  color: #222222;
}
#floating li:nth-child(2) a {
  background-color: #222222;
}
#floating li:nth-child(3) a {
  background-color: #2ca05e;
}
#floating li:nth-child(4) a {
  background-color: #f58326;
}
#floating li:hover {
  transform: translateX(0);
}
@media screen and (max-width: 768px) {
  #floating {
    display: none !important;
  }
}
_:lang(x) + _:-webkit-full-screen-document,
#floating {
  right: 25px;
}
_:lang(x) + _:-webkit-full-screen-document li,
#floating li {
  border: none;
}

#main-visual {
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
#main-visual h1 {
  position: absolute;
  z-index: -999;
  opacity: 0;
}
#main-visual .emblem {
  position: absolute;
  width: 95%;
  max-width: 650px;
  z-index: 3;
  bottom: 5%;
  left: 4rem;
  position: absolute;
  transition-delay: 1.2s;
}
#main-visual .copy {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  left: 4rem;
  line-height: 1.25;
  letter-spacing: 0.2em;
  white-space: nowrap;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  text-shadow: rgb(44, 44, 47) 0px 1px 3px;
}
#main-visual .copy .main {
  font-size: 3em;
}
#main-visual .copy .main span {
  font-size: 1.5em;
  text-shadow: 3px 3px 0 #2ca05e, -3px -3px 0 #f58326;
}
#main-visual .copy .js-fader:nth-of-type(2) {
  transition-delay: 0.4s;
}
#main-visual .copy .js-fader:nth-of-type(3) {
  transition-delay: 0.8s;
}
@keyframes show {
  0% {
    top: 15px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
#main-visual .swiper-top {
  width: 100%;
  height: 100% !important;
  position: relative;
  overflow: hidden;
}
#main-visual .swiper-top .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99;
}
#main-visual .swiper-top .swiper-slide__image {
  width: 100%;
  height: 100%;
  will-change: transform;
  overflow: hidden;
}
#main-visual .swiper-top .swiper-slide__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 2s ease-in-out;
}
#main-visual .swiper-horizontal > .swiper-pagination-bullets,
#main-visual .swiper-pagination-bullets.swiper-pagination-horizontal,
#main-visual .swiper-pagination-custom,
#main-visual .swiper-pagination-fraction {
  bottom: 5%;
  display: none;
}
@keyframes mask-slide-in {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
#main-visual .swiper-slide img {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  transition: clip-path 0.6s ease-in, transform 7s linear !important;
  transform: scale(1);
}
#main-visual .swiper-slide.swiper-slide-active img {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: scale(1.08);
}
#main-visual .swiper-slide.swiper-slide-next img {
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  transform: scale(1);
}

@media screen and (max-width: 928px) {
  #main-visual .copy,
  #main-visual .emblem {
    left: 2rem;
  }
}
@media screen and (max-width: 480px) {
  #main-visual .emblem {
    left: 50%;
    transform: translate(-50%, 0%);
  }
  #main-visual .copy {
    left: 1rem;
    top: 30%;
    line-height: 1.5;
  }
  #main-visual .copy .main {
    font-size: 8.5vw;
  }
}
#cta {
  background-color: #f58326;
  background-color: #fffaf0;
  position: relative;
  padding-bottom: 3rem;
}
#cta .sp_br {
  display: none;
}
#cta .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #cta .section {
    width: 90%;
  }
}
#cta .section {
  background-image: url(../../img/home/service01.jpg);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  padding: 10vh 0 5vh;
  border-radius: 1rem;
  position: relative;
  z-index: 0;
}
#cta .section::before {
  content: "";
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px) saturate(180%);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  position: absolute;
  z-index: -1;
  top: 0;
}
#cta .section .cta01 {
  position: absolute;
  width: 20%;
  min-width: 140px;
  bottom: 0;
  right: 0;
}
#cta .section .cta02 {
  position: absolute;
  width: 8%;
  min-width: 50px;
  top: 2rem;
  left: 1rem;
}
#cta .section .cta03 {
  position: absolute;
  width: 6%;
  min-width: 40px;
  top: -3rem;
  left: 10%;
}
#cta .section .frame {
  background-color: #fff;
  color: #222222;
}
#cta .section .frame::after {
  border-color: #fff transparent transparent;
}
#cta .section h2 {
  white-space: nowrap;
  line-height: 1.5;
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translate(-50%, 0%) translateY(20px) scale(0.8);
}
#cta .section h2 .ja span {
  color: #ff0000;
}
#cta .section_inner {
  padding: 0 1rem;
}
#cta .section_inner .txt_m {
  text-align: center;
}
#cta .section_inner p {
  font-weight: 600;
}
#cta .section_inner .button_solid012 {
  margin-top: 2rem;
}
#cta .section_inner .button_solid012 .btn:before {
  background: #f58326;
}

@media screen and (max-width: 1280px) {
  #cta .section .cta02 {
    left: -5%;
  }
  #cta .section .cta03 {
    left: 2%;
  }
}
@media screen and (max-width: 928px) {
  #cta .section_inner .txt_m {
    text-align: justify;
  }
  #cta {
    padding-top: 15vh;
  }
  #cta .sp_br {
    display: block;
  }
  #cta .section h2 {
    top: -10vh;
  }
}
@media screen and (max-width: 480px) {
  #cta {
    padding-top: 10vh;
  }
  #cta .section {
    padding: 4.5rem 0 4rem;
  }
  #cta .section .cta01 {
    bottom: -5rem;
    right: -3rem;
  }
  #cta .section h2 {
    top: -4rem;
  }
  #cta .section_inner .button_solid012 {
    margin-top: 1rem;
  }
}
#problem {
  position: relative;
}
#problem .sp_br {
  display: none;
}
#problem::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/common/bg_pattern.png);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.1;
}
#problem .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #problem .section {
    width: 90%;
  }
}
#problem .section {
  max-width: 1024px;
  border: 6px solid #222222;
  position: relative;
  padding: 4rem 2rem 6rem;
  border-radius: 2rem;
  z-index: 0;
  background-color: #f2c74f;
}
#problem .section::before {
  content: "";
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  border: 6px solid #222222;
  border-radius: 2rem;
  position: absolute;
  top: 2rem;
  background-color: #fff;
  z-index: -1;
}
#problem .section .clip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: -4rem;
  width: 250px;
}
#problem .section_inner {
  padding: 0 2rem;
}
#problem .section_inner .problem {
  width: 50%;
  max-width: 300px;
  display: block;
  margin: 1rem auto 0;
}
#problem .section_inner .txt_m {
  text-align: center;
}
#problem .section_inner .check_list {
  margin: 2rem auto 0;
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
  text-align: justify;
}
#problem .section_inner .check_list li {
  padding-bottom: 0.5rem;
  font-weight: 500;
}
#problem .section_inner .check_list li b {
  color: #f58326;
  color: rgb(236, 39, 39);
}

@media screen and (max-width: 1024px) {
  #problem .sp_br {
    display: block;
  }
}
@media screen and (max-width: 928px) {
  #problem .section {
    padding: 4rem 1rem 6rem;
  }
  #problem .section::before {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    top: 1rem;
  }
}
@media screen and (max-width: 768px) {
  #problem .section {
    width: 100%;
    padding: 3rem 1rem 2rem;
    border: 2px solid #222222;
  }
  #problem .section::before {
    border: 2px solid #222222;
  }
  #problem .section .clip {
    width: 130px;
    top: -2rem;
  }
}
@media screen and (max-width: 767px) {
  #problem .pc_br {
    display: none;
  }
  #problem .section_inner .txt_m {
    text-align: justify;
  }
}
@media screen and (max-width: 480px) {
  #problem .section_inner {
    padding: 0 1rem;
  }
}
#drawn .sp_br {
  display: none;
}
#drawn {
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(30, 74, 16, 0.04) 26px, rgba(30, 74, 16, 0.04) 26px, transparent 27px, transparent 51px, rgba(30, 74, 16, 0.04) 52px, rgba(30, 74, 16, 0.04) 52px, transparent 53px, transparent 77px, rgba(30, 74, 16, 0.04) 78px, rgba(30, 74, 16, 0.04) 78px, transparent 79px, transparent 103px, rgba(30, 74, 16, 0.04) 104px, rgba(30, 74, 16, 0.04) 104px, transparent 105px, transparent 129px, rgba(30, 74, 16, 0.04) 130px, rgba(30, 74, 16, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(30, 74, 16, 0.04) 26px, rgba(30, 74, 16, 0.04) 26px, transparent 27px, transparent 51px, rgba(30, 74, 16, 0.04) 52px, rgba(30, 74, 16, 0.04) 52px, transparent 53px, transparent 77px, rgba(30, 74, 16, 0.04) 78px, rgba(30, 74, 16, 0.04) 78px, transparent 79px, transparent 103px, rgba(30, 74, 16, 0.04) 104px, rgba(30, 74, 16, 0.04) 104px, transparent 105px, transparent 129px, rgba(30, 74, 16, 0.04) 130px, rgba(30, 74, 16, 0.04) 130px);
  position: relative;
}
#drawn .illust06 {
  position: absolute;
  width: 12%;
  min-width: 100px;
  top: 0;
  left: 3rem;
}
#drawn .drawn {
  position: absolute;
  width: 20%;
  min-width: 140px;
  bottom: 0;
  right: 3rem;
}
#drawn .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #drawn .section {
    width: 90%;
  }
}
#drawn .section_inner p {
  text-align: center;
}
#drawn .section_inner .txt_m {
  margin: 2rem 0;
  font-weight: 600;
}
#drawn .section_inner .txt_m span {
  font-size: 1.25em;
  color: #2ca05e;
  font-weight: 600;
  border-bottom: 8px double #f2c74f;
}

@media screen and (max-width: 1279px) {
  #drawn .section_inner p {
    text-align: justify;
  }
  #drawn .section_inner .txt_m {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  #drawn .sp_br {
    display: block;
  }
  #drawn .illust06 {
    top: 6rem;
    left: -1rem;
  }
  #drawn .drawn {
    right: 0rem;
  }
}
@media screen and (max-width: 480px) {
  #drawn .section_inner .txt_m {
    margin: 1rem 0;
  }
  #drawn .section_inner .txt_m span {
    line-height: 2;
  }
}
#feature .sp_br {
  display: none;
}
#feature .js-fader {
  transition-delay: 0.5s;
}
#feature .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #feature .section {
    width: 90%;
  }
}
#feature .section_inner .center {
  text-align: center;
}
#feature .section_inner ul {
  margin: 4rem auto 0;
  display: flex;
  flex-flow: column;
  gap: 6rem;
}
#feature .section_inner ul li {
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative;
}
#feature .section_inner ul li .dots {
  position: absolute;
  width: 40%;
  max-width: 350px;
  left: 60%;
  bottom: -6rem;
  transform: translate(-50%, 0%);
  opacity: 0.25;
}
#feature .section_inner ul li .re {
  left: 40%;
  transform: scale(-1, 1) translate(50%, 0%);
}
#feature .section_inner ul li:nth-child(2n) {
  flex-flow: row-reverse;
}
#feature .section_inner ul li figure {
  width: 40%;
  position: relative;
  z-index: 0;
  padding: 3rem;
}
#feature .section_inner ul li figure::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#feature .section_inner ul li .txt {
  width: 70%;
}
#feature .section_inner ul li .txt .txt_l {
  margin-bottom: 1rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 2.5em;
  color: #2ca05e;
  line-height: 1.5;
}
#feature .section_inner ul li .txt .txt_l .num {
  line-height: 1;
  font-size: 2.5em;
  color: #222222;
  transform: scaleY(0.8);
}
#feature .section_inner ul li .txt .txt_l .strong {
  background: linear-gradient(transparent 80%, #f2c74f 55%);
}
#feature .section_inner ul li .txt p {
  padding-left: 10rem;
  text-align: justify;
}

@media screen and (max-width: 1300px) {
  #feature .section_inner ul li .txt .txt_l {
    font-size: 2em;
  }
}
@media screen and (max-width: 1279px) {
  #feature .section_inner .center {
    text-align: justify;
  }
  #feature .section_inner ul li .txt p {
    padding-left: 0rem;
  }
  #feature .section_inner ul li figure {
    padding: 2rem;
    width: 35%;
  }
}
@media screen and (max-width: 1023px) {
  #feature .js-fader {
    transition-delay: 0s;
  }
  #feature .section_inner ul li {
    width: 80%;
    flex-flow: column;
    margin-left: auto;
    gap: 1rem;
  }
  #feature .section_inner ul li figure {
    width: 60%;
    max-width: 300px;
  }
  #feature .section_inner ul li .txt {
    width: 100%;
  }
  #feature .section_inner ul li:nth-child(2n) {
    flex-flow: column;
    margin-left: 0;
    margin-right: auto;
  }
}
@media screen and (max-width: 928px) {
  #feature .section_inner ul li .dots {
    bottom: -5rem;
  }
}
@media screen and (max-width: 767px) {
  #feature .sp_br {
    display: block;
  }
  #feature .section_inner ul li {
    width: 100%;
  }
  #feature .section_inner ul li .dots {
    width: 75%;
    bottom: -5.5rem;
    left: 60%;
  }
  #feature .section_inner ul li .re {
    left: 40%;
  }
  #feature .section_inner ul li .txt .txt_l {
    font-size: 1.65em;
    flex-flow: column;
    gap: 0.5rem;
    position: relative;
  }
  #feature .section_inner ul li .txt .txt_l .num {
    position: absolute;
    top: -1rem;
    left: 0;
  }
  #feature .section_inner ul li .txt .txt_l span {
    text-align: center;
  }
}
@media screen and (max-width: 480px) {
  #feature .section_inner ul {
    margin: 2rem auto 0;
    gap: 4rem;
  }
}
#service {
  background-color: #fff;
  padding-bottom: 0;
}
#service .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #service .section {
    width: 90%;
  }
}
#service .section {
  padding-bottom: 6rem;
}
#service .section_inner .center {
  text-align: center;
}
#service .section_inner ul {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  text-align: justify;
}
#service .section_inner ul li figure {
  border-radius: 5px;
  border: 2px solid #222222;
  overflow: hidden;
  aspect-ratio: 3/2;
}
#service .section_inner ul li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 3/2;
}
#service .section_inner ul li .txt {
  position: relative;
  padding: 2.5rem 0 0;
}
#service .section_inner ul li .txt .txt_m {
  font-weight: 600;
  border-radius: 5px;
  border: 2px solid #222222;
  position: absolute;
  padding: 0 1rem;
  white-space: nowrap;
  top: -1.5rem;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: #f58326;
}
#service .btn_bg {
  background-color: #f58326;
}
#service .btn_bg .btn_wrap {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #service .btn_bg .btn_wrap {
    width: 90%;
  }
}
#service .btn_bg .btn_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  gap: 4rem;
  position: relative;
}
#service .btn_bg .btn_wrap .service {
  position: absolute;
  width: 20%;
  min-width: 120px;
  left: 0%;
  bottom: 0;
}
#service .btn_bg .btn_wrap .button_solid012 {
  font-size: 1.5em;
}
#service .btn_bg .btn_wrap .button_solid012 .btn {
  padding: 15px 30px;
}
#service .btn_bg .btn_wrap .button_solid012 .btn::before {
  background: #fff;
}

@media screen and (max-width: 1280px) {
  #service .section_inner ul {
    gap: 4rem 3rem;
  }
}
@media screen and (max-width: 1024px) {
  #service .section_inner .center {
    text-align: justify;
  }
  #service .btn_bg .btn_wrap .service {
    left: -10%;
  }
}
@media screen and (max-width: 928px) {
  #service .btn_bg .btn_wrap {
    gap: 2rem;
  }
}
@media screen and (max-width: 768px) {
  #service .section_inner ul {
    grid-template-columns: 1fr;
  }
  #service .section_inner ul li figure {
    width: 90%;
    margin: 0 auto;
  }
  #service .btn_bg .btn_wrap {
    padding: 3rem 0;
  }
}
@media screen and (max-width: 480px) {
  #service .section_inner ul {
    margin-top: 2rem;
  }
  #service .section_inner ul li .txt {
    padding: 1.5rem 0 0;
  }
  #service .section_inner ul li .txt .txt_m {
    padding: 0.25rem 1rem;
  }
  #service .btn_bg .btn_wrap {
    padding: 2.5rem 0;
  }
  #service .btn_bg .btn_wrap .button_solid012 {
    font-size: 1.35em;
  }
}
#area {
  background-color: #2ca05e;
  color: #fff;
  position: relative;
  overflow: hidden;
}
#area .kansai {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
  width: 40%;
  opacity: 0.75;
}
#area .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #area .section {
    width: 90%;
  }
}
#area .section {
  text-align: justify;
}
#area .section_inner h2 {
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}
#area .section_inner .txt {
  margin-right: 40%;
}
#area .section_inner .txt .button_solid012 {
  width: -moz-fit-content;
  width: fit-content;
  margin: 1rem 0 0 0;
  color: #222222;
}

@media screen and (max-width: 767px) {
  #area .kansai {
    width: 70%;
    right: -10%;
    bottom: -10%;
    transform: unset;
    opacity: 0.8;
  }
  #area .section_inner .txt {
    margin-right: 0%;
  }
}
#security {
  background-color: #fffaf0;
}
#security .sp_br {
  display: none;
}
#security .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #security .section {
    width: 90%;
  }
}
#security .section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
}
#security .section_inner {
  display: flex;
  flex-flow: column;
}
#security .section_inner h2 {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #222222;
}
#security .section_inner h2 .ja {
  font-size: 1.35em;
}
#security .section_inner b {
  color: red;
}
#security .section_inner div {
  text-align: justify;
}
#security .section_inner .button_solid012 {
  margin-block: 0.5rem;
}
#security .section_inner figure {
  margin-top: 1rem;
  border-radius: 5px;
  border: 2px solid #222222;
  overflow: hidden;
}
#security .section_inner figure img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1500px) {
  #security .sp_br {
    display: block;
  }
}
@media screen and (max-width: 928px) {
  #security .section {
    gap: 2rem;
  }
}
@media screen and (max-width: 768px) {
  #security .section {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
@media screen and (max-width: 480px) {
  #security .section_inner h2 {
    margin-bottom: 1rem;
  }
}
#link {
  position: relative;
}
#link::after {
  content: "";
  display: block;
  width: calc(100% - 30px);
  height: 100%;
  position: absolute;
  top: -180px;
  left: 30px;
  z-index: -1;
  opacity: 0.8;
}
#link .section {
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  #link .section {
    width: 90%;
  }
}
#link .section__title {
  opacity: 0;
  position: absolute;
  z-index: -999;
  pointer-events: none;
}
#link .section__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  row-gap: 2rem;
}
#link .section__list .inner {
  width: calc((100% - 4rem) / 3);
  border: 2px solid #222222;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
#link .section__list .inner__image {
  width: 60%;
  margin: 4rem auto 0;
  aspect-ratio: 1;
  overflow: hidden;
}
#link .section__list .inner__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s scale;
}
#link .section__list .inner .ja {
  position: absolute;
  margin: 0 15px;
  top: 15px;
  z-index: 10;
  border: 2px solid #222222;
  padding: 5px 10px;
  background-color: #2ca05e;
  font-size: 1.25em;
  font-weight: 600;
  transition: 0.3s all;
  color: #fff;
}
#link .section__list .inner a:hover img {
  scale: 1.05;
}
#link .section__list .inner a:hover::after {
  opacity: 0.05;
}
#link .section__list .inner a:hover .ja {
  background-color: #f58326;
}

@media screen and (max-width: 1280px) {
  #link .section__list .inner__image {
    aspect-ratio: 1;
  }
}
@media screen and (max-width: 1024px) {
  #link .section__list .inner .ja {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 1500px) {
  #link .section__list .inner {
    width: calc((100% - 4rem) / 2);
  }
}
@media screen and (max-width: 950px) {
  #link .section__list {
    display: grid;
    grid-template-columns: 1fr;
  }
  #link .section__list .inner {
    width: 100%;
    aspect-ratio: 2/1;
  }
  #link .section__list .inner .ja span {
    display: block;
  }
  #link .section__list .inner__image {
    width: 45%;
    margin: 2rem auto 0;
  }
}
@media screen and (max-width: 480px) {
  #link .section__list {
    row-gap: 1rem;
  }
}
#carousel {
  position: relative;
}
#carousel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 40%;
  height: 100%;
  display: block;
  z-index: -1;
  background-color: #2ca05e;
  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: #2ca05e;
  border: solid 1px #2ca05e;
  color: #f58326;
  transition: all ease 0.5s;
}
#carousel .carousel__warp--link a:hover {
  background-color: #f58326;
  color: #2ca05e;
}

#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: "Montserrat", 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;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 2.5em;
  right: 2.5em;
  z-index: 99;
}
.pagetop a {
  width: 45px;
  height: 45px;
  aspect-ratio: 1/1;
  display: block;
  background-color: #2ca05e;
  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: #f58326;
}
@media screen and (max-width: 1280px) {
  .pagetop {
    bottom: calc(50px + 1rem);
  }
}
@media screen and (max-width: 480px) {
  .pagetop {
    display: none;
    position: fixed;
    bottom: calc(50px + 1.5rem);
    right: 1.5em;
  }
  .pagetop a {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
  }
}
_:lang(x) + _:-webkit-full-screen-document,
.pagetop {
  right: 18px;
}

.footer {
  position: relative;
  overflow: hidden;
}
.footer .sp_br {
  display: none;
}
.footer__wrap {
  max-width: 80%;
  margin-inline: auto;
  position: relative;
  z-index: 10;
  padding: 120px 0 45px;
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  row-gap: 1rem;
  align-items: center;
}
.footer__logo {
  grid-row: 1/3;
  grid-column: 1/2;
  width: 280px;
  max-width: 100%;
  text-align: center;
}
.footer__logo a {
  display: block;
  width: 100%;
}
.footer__logo img {
  width: 100%;
}
.footer__logo span {
  display: flex;
  flex-flow: column;
  font-size: 3em;
  gap: 1rem;
  font-weight: 900;
}
.footer__address {
  display: flex;
  align-items: center;
}
.footer__address span {
  display: inline-block;
}
.footer__tel .button_solid012 {
  width: -moz-fit-content;
  width: fit-content;
}
.footer__tel .btn {
  display: flex;
  align-items: center;
}
.footer__tel i {
  margin-right: 0.5rem;
}
.footer__tel a {
  font-size: 1.1em;
}
.footer__nav {
  grid-column: 1/3;
  margin-block-start: 30px;
  margin-inline: auto;
  padding-top: 1rem;
  position: relative;
}
.footer__nav::before {
  content: "";
  height: 2px;
  width: 100vw;
  background-color: #222222;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.5rem;
  padding-top: 1rem;
}
.footer__nav ul li a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
  font-size: 0.9em;
  transition: 0.3s ease;
}
.footer__nav ul li a i {
  padding-top: 2px;
}
.footer__nav ul li a span {
  display: none;
}
.footer__nav ul li:hover a {
  opacity: 0.6;
}
.footer__copy {
  position: relative;
  z-index: 7;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
  background-color: #222222;
}
.footer__copy span {
  display: inline-block;
}
.footer__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

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

@media screen and (max-width: 1024px) {
  .footer .sp_br {
    display: block;
  }
}
@media screen and (max-width: 928px) {
  .footer__nav ul {
    flex-wrap: wrap;
  }
  .footer__wrap {
    -moz-column-gap: 30px;
         column-gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .footer {
    padding-bottom: 45px;
  }
  .footer__wrap {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    padding-bottom: 1.5rem;
    max-width: 90%;
  }
  .footer__logo, .footer__tel {
    margin-inline: auto;
  }
  .footer__address {
    justify-content: center;
    text-align: center;
  }
  .footer__nav {
    margin-block-start: 15px;
  }
  .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%;
    border-top: 2px solid #f7f3ef;
  }
  #sp_btn ul {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
  }
  #sp_btn ul li {
    height: 45px;
    width: 100%;
    display: block;
    padding: 7.5px 0;
    background-color: #f2c74f;
    color: #fff;
  }
  #sp_btn ul li a,
  #sp_btn ul li .button {
    display: flex;
    gap: 0.5rem;
    text-align: center;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    transition: 0.5s;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  #sp_btn ul li a:hover,
  #sp_btn ul li .button:hover {
    opacity: 0.5;
  }
  #sp_btn ul li a span,
  #sp_btn ul li .button span {
    display: none;
  }
  #sp_btn ul li a i,
  #sp_btn ul li .button i {
    font-size: 1.2em;
  }
  #sp_btn ul li:nth-child(1) {
    color: #222222;
  }
  #sp_btn ul li:nth-child(2) {
    border-left: 2px solid #f7f3ef;
    border-right: 2px solid #f7f3ef;
    background-color: #222222;
  }
  #sp_btn ul li:nth-child(3) {
    width: 200%;
    background-color: #2ca05e;
  }
  #sp_btn ul li:nth-child(3) span {
    display: block;
  }
  #sp_btn ul li:nth-child(4) {
    background-color: #f58326;
  }
}
@media screen and (max-width: 480px) {
  .footer__wrap {
    max-width: 90%;
  }
  .footer__copy span {
    display: block;
  }
}
.emblem {
  background-color: #fffaf0;
}
.emblem img {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  width: 95%;
  padding: 5vh 0;
}

.number {
  background-color: #fffaf0;
}
.number .sp_br {
  display: none;
}
.number_box {
  margin: 2rem auto 0;
  width: 80%;
  margin: 0 auto;
  max-width: 1280px;
  position: relative;
}
@media screen and (max-width: 480px) {
  .number_box {
    width: 90%;
  }
}
.number_box {
  font-size: 1.5em;
  font-weight: bold;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  text-align: center;
}
.number_box__contents {
  border: 3px solid #222222;
  border-radius: 10px;
  overflow: hidden;
}
.number_box__contents:nth-last-of-type(2) .title {
  background-color: #2ca05e;
}
.number_box__contents .title {
  background-color: #f58326;
  color: #fff;
  padding: 0.5rem;
}
.number_box__contents .txt {
  padding: 0.5rem 0;
  background-color: #fff;
  line-height: 1.65;
}
.number_box__contents .txt span {
  color: red;
  font-size: 1.75em;
  font-weight: 800;
}

@media screen and (max-width: 1024px) {
  .number .sp_br {
    display: block;
  }
  .number_box {
    gap: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .number_box {
    gap: 2rem;
  }
  .number_box__contents {
    border: 2px solid #222222;
  }
}
@media screen and (max-width: 600px) {
  .number_box {
    gap: 1rem;
    font-size: 1.1em;
  }
}/*# sourceMappingURL=style.css.map */