@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap");
@font-face {
  font-family: "Kosugi Maru";
  font-weight: 400;
  src: url("../../font/Kosugi_Maru/woff2/KosugiMaru-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 300;
  font-style: normal;
  src: url("../../font/Zen_Maru_Gothic/woff2/ZenMaruGothic-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Zen_Maru_Gothic/woff2/ZenMaruGothic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
  font-style: normal;
  src: url("../../font/Zen_Maru_Gothic/woff2/ZenMaruGothic-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-style: normal;
  src: url("../../font/Zen_Maru_Gothic/woff2/ZenMaruGothic-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-style: normal;
  src: url("../../font/Zen_Maru_Gothic/woff2/ZenMaruGothic-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Hachi_Maru_Pop";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Hachi_Maru_Pop/woff2/HachiMaruPop-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Square_Peg";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Square_Peg/woff2/SquarePeg-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Zen_Kurenaido";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Zen_Kurenaido/woff2/ZenKurenaido-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Mogra";
  font-weight: 400;
  font-style: normal;
  src: url("../../font/Mogra/woff2/Mogra-Regular.woff2") format("woff2");
}
html {
  scroll-behavior: smooth;
  /****** アンカーリンク用高さ調整 start  ******/
  scroll-padding-top: 180px;
  /******* アンカーリンク用高さ調整 end  *******/
}
html body {
  width: 100%;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  color: #181818;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "pkna" 1;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  line-height: 1.8;
  letter-spacing: 0.1rem;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html .animate__fadeIn {
  transform: none !important;
}
html p {
  transform: rotate(0.05deg);
  transform: skewX(0.03deg);
}
html a {
  transform: rotate(0.05deg);
  transform: skewX(0.03deg);
}
html td {
  transform: rotate(0.05deg);
  transform: skewX(0.03deg);
}

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

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

/*****************************************/
/****  コンテンツ部分基本幅設定  start  ****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*****  コンテンツ部分基本幅設定  end  *****/
/*****************************************/
/*****************************************/
/*****  セクション部分空白設定  start  *****/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
section {
  overflow: hidden;
}

.contents {
  max-width: 1280px;
  width: 90%;
  margin: 4rem auto;
  padding: 0 50px;
}

@media screen and (max-width: 768px) {
  .contents {
    width: 100%;
    margin: 2rem auto;
    padding: 0 20px;
  }
}
@media screen and (max-width: 480px) {
  .contents {
    width: 100%;
    padding: 0 1rem;
  }
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/******  セクション部分空白設定  end  ******/
/*****************************************/
.bgcolor {
  background-color: #00537f;
}
.bgcolor div h2 {
  color: #00537f;
}
.bgcolor div h2 b {
  color: #00537f;
}

/*****************************************/
/*******  見出し[h2]部分設定  start  ******/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.main-ttl {
  margin-bottom: 4rem;
}
.main-ttl h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  line-height: 0.5;
}
.main-ttl h2 p {
  font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
  line-height: 1;
  font-weight: 400;
  font-family: "Mogra", sans-serif;
  margin: 0.5rem 0;
  padding-bottom: 5px;
  position: relative;
  color: #00537f;
  filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
}
.main-ttl h2 p::first-letter {
  text-transform: uppercase;
  color: #019153;
}
.main-ttl h2 span {
  text-transform: uppercase;
  font-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  font-weight: 900;
  color: #00537f;
}
@media screen and (max-width: 1024px) {
  .main-ttl h2 {
    font-size: clamp(2.1rem, 2.06rem + 0.2vw, 2.3rem);
  }
  .main-ttl h2 p {
    font-size: clamp(2.8rem, 2.76rem + 0.2vw, 3rem);
  }
  .main-ttl h2 span {
    font-size: clamp(1.1rem, 1.06rem + 0.2vw, 1.3rem);
  }
}
@media screen and (max-width: 768px) {
  .main-ttl {
    margin-bottom: 2rem;
  }
  .main-ttl h2 {
    font-size: clamp(2rem, 1.96rem + 0.2vw, 2.2rem);
  }
  .main-ttl h2 p {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
}
@media screen and (max-width: 560px) {
  .main-ttl h2 {
    flex-direction: column;
    font-size: 25px;
  }
}

.main-ttl02 h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  line-height: 0.5;
}
.main-ttl02 h2 p {
  font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
  line-height: 1;
  font-weight: 400;
  font-family: "Mogra", sans-serif;
  margin: 0.5rem 0;
  padding-bottom: 5px;
  position: relative;
  color: #00537f;
  filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
}
.main-ttl02 h2 p::first-letter {
  text-transform: uppercase;
  color: #019153;
}
.main-ttl02 h2 span {
  font-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .main-ttl02 h2 {
    font-size: clamp(2rem, 1.96rem + 0.2vw, 2.2rem);
  }
  .main-ttl02 h2 p {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
}
@media screen and (max-width: 560px) {
  .main-ttl02 h2 {
    flex-direction: column;
    font-size: 25px;
  }
}

.ttl {
  margin-bottom: 2rem;
}
.ttl h2 {
  font-family: "Zen Old Mincho", sans-serif;
}
.ttl h2 p {
  font-size: 50px;
  padding: 0;
}
.ttl h2 p::first-letter {
  color: #db2442;
  text-transform: uppercase;
}
.ttl h2 p span {
  font-size: 20px;
  margin-left: 50px;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 20px;
  letter-spacing: 0.1rem;
}
.ttl h2 p span::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #db2442;
  top: 50%;
  left: -20px;
  translate: 0 -50%;
}
.ttl h2 p span::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 2px;
  background-color: #db2442;
  top: 50%;
  right: -20px;
  translate: 0 -50%;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/********  見出し[h2]部分設定  end  *******/
/*****************************************/
/*****************************************/
/**********  マーカー設定  start  *********/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.marker_type1 {
  display: inline;
  background: linear-gradient(transparent 65%, rgba(230, 230, 14, 0.431372549) 65%);
  padding: 0 0.15rem;
  margin: 0 0.15rem;
  font-weight: 500;
}

.marker_type2 {
  display: inline;
  background: linear-gradient(transparent 65%, rgba(230, 230, 14, 0.431372549) 65%);
  padding: 0 0.15rem 0.25rem;
  margin: 1rem 0.15rem 0;
  -webkit-text-emphasis: filled #00537f;
  text-emphasis: filled #00537f;
}
@media (max-width: 768px) {
  .marker_type2 {
    -webkit-text-emphasis: none;
    text-emphasis: none;
  }
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/***********  マーカー設定  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: -moz-fit-content;
  width: fit-content;
  position: absolute;
  z-index: 50;
  left: 20px;
  overflow: hidden;
}
#breadcrumb .breadcrumb__warp {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 50px;
  padding: 5px 10px;
}
#breadcrumb .breadcrumb__warp ol {
  width: 100%;
  display: flex;
}
#breadcrumb .breadcrumb__warp ol li {
  font-size: clamp(0.6rem, 0.56rem + 0.2vw, 0.8rem);
  padding: 0;
  font-weight: 800;
}
#breadcrumb .breadcrumb__warp ol li:first-child {
  padding: 0 1rem 0 0;
}

.main01 {
  position: relative;
}
.main01::after {
  position: absolute;
  background-image: url("../../img/home/bg01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  top: 0px;
  width: 100%;
  height: 100vh;
  content: "";
  z-index: -5;
  position: fixed;
  opacity: 0.4;
}

.main02 {
  position: relative;
}
.main02::before {
  position: absolute;
  background-image: url("../../img/common/bg05.png");
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  aspect-ratio: 1601/743;
  width: 100%;
  content: "";
  z-index: -5;
  opacity: 0.5;
}
.main02::after {
  position: absolute;
  background-image: url("../../img/common/bg06.png");
  background-size: cover;
  background-repeat: no-repeat;
  bottom: 0px;
  right: 0;
  width: 100%;
  aspect-ratio: 1601/743;
  content: "";
  z-index: -5;
  opacity: 0.5;
}

.parallax {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(40px);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.parallax-section {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
.parallax-section .parallax1 {
  position: absolute;
  top: 0;
  left: 0;
  /* ← 上下余白を確保 */
  width: 100%;
  height: 120%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
  opacity: 0.7;
  will-change: transform;
  transform: translate3d(0, 0px, 0);
  /* 明示 */
}

.js-clip-in {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: clip-path 1s;
}

.js-clip-in.is-active {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.insta_btn2 {
  /* ボタンの下地 */
  color: #fff;
  /* 文字・アイコン色 */
  border-radius: 7px;
  /* 角丸 */
  position: relative;
  display: inline-block;
  height: 60px;
  /* 高さ */
  width: 50%;
  /* 幅 */
  text-align: center;
  /* 中央寄せ */
  font-size: 25px;
  /* 文字サイズ */
  line-height: 60px;
  /* 高さと合わせる */
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  /* はみ出し隠す */
  text-decoration: none;
  margin: auto;
  /* グラデーション② */
}
.insta_btn2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.insta_btn2 {
  /* Instagramアイコン */
}
.insta_btn2 .fa-instagram {
  font-size: 35px;
  position: relative;
  top: 4px;
  margin-right: 10px;
}
.insta_btn2 {
  /* テキスト */
}
.insta_btn2 span {
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.insta_btn2 {
  /* ホバー時 */
}
.insta_btn2:hover span {
  transform: rotateX(360deg);
}

@media screen and (max-width: 768px) {
  .insta_btn2 {
    font-size: 20px;
  }
  .insta_btn2 .fa-instagram {
    font-size: 30px;
  }
}
@media screen and (max-width: 480px) {
  .insta_btn2 {
    font-size: 16px;
    width: 100%;
  }
  .insta_btn2 .fa-instagram {
    font-size: 26px;
  }
}
.red {
  color: #db2442;
}

.pink {
  color: #ff5b92;
}

.yellow {
  color: #fdeb43;
}

.green {
  color: #019153;
}

.blue {
  color: #00537f;
}

.orange {
  color: #fd9d43;
}

.fukidashi-02 {
  position: relative;
  display: block;
  padding: 12px 15px;
  outline: 2px solid #db2442;
  outline-offset: 2px;
  border-radius: 10px;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #fff;
}
.fukidashi-02::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 56px;
  height: 16px;
  width: 15px;
  border-right: 2px solid #db2442;
  transform: rotate(-40deg);
}

.br {
  display: inline-block;
}

.menu-open {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

.js #header {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* 表示タイミングを制御（好みで値調整） */
.js.is-ready #header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

header {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.4s;
}
header.fixed {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
header.fixed .header__logo {
  width: 100px;
}
header.fixed .header__logo a {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
header.fixed .container-header .header__nav .nav__list li a p {
  color: #181818;
}
header.fixed .container-header .header__sp .menu-button .menu-button__line,
header.fixed .container-header .header__sp .menu-button .menu-button__line::before,
header.fixed .container-header .header__sp .menu-button .menu-button__line::after {
  background-color: #db2442;
}
header .header__warp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  width: 100%;
  margin: 10px auto;
  padding: 0 1rem;
  box-sizing: border-box;
  transition: height 1s ease;
}
header .header__logo {
  width: 150px;
  transition: width 1s ease;
  transition: all 1s;
}
header .header__logo a {
  width: 150px;
}
header .header__logo:hover {
  opacity: 0.7;
}
header .header__logo:hover::after {
  opacity: 1;
}
header .container-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 20px;
}
header .container-header .header__nav {
  display: flex;
  flex-direction: column-reverse;
}
header .container-header .header__nav .nav__list {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
header .container-header .header__nav .nav__list li {
  position: relative;
  padding: 1rem 0;
}
header .container-header .header__nav .nav__list li::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-image: url(../../img/common/maru.png);
  background-size: contain;
  background-repeat: no-repeat;
}
header .container-header .header__nav .nav__list li:nth-child(2)::before {
  background-image: url(../../img/common/maru02.png);
}
header .container-header .header__nav .nav__list li:nth-child(3)::before {
  background-image: url(../../img/common/maru03.png);
}
header .container-header .header__nav .nav__list li:nth-child(4)::before {
  background-image: url(../../img/common/maru04.png);
}
header .container-header .header__nav .nav__list li:nth-child(5)::before {
  background-image: url(../../img/common/maru05.png);
}
header .container-header .header__nav .nav__list li:nth-child(6)::before {
  background-image: url(../../img/common/maru06.png);
}
header .container-header .header__nav .nav__list li > a {
  display: block;
  text-decoration: none;
  transition: color 0.3s, opacity 0.3s;
  text-align: center;
  line-height: 1.5;
  position: relative;
}
header .container-header .header__nav .nav__list li > a p {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  transition: color 0.3s ease;
}
header .container-header .header__nav .nav__list li > a span {
  font-size: 12px;
  font-weight: 700;
}
header .container-header .header__nav .nav__list li > a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #db2442;
  transition: width 0.3s ease-in-out;
}
header .container-header .header__nav .nav__list li > a:hover {
  color: #db2442;
}
header .container-header .header__nav .nav__list li > a:hover::after {
  width: 100%;
}
header .container-header .header__nav .nav__list li.active > a::after {
  width: 100%;
}
header .container-header .header__nav .nav__list .snslink {
  display: flex;
  gap: 1rem;
}
header .container-header .header__nav .nav__list .snslink li a i {
  font-size: 24px;
  transition: color 0.3s ease;
}
header .container-header .header__nav .nav__list .snslink li a i:hover {
  color: #db2442;
}
header .container-header .contact-box {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  color: #181818;
  min-width: 200px;
  cursor: pointer;
  font-size: clamp(1.1rem, 1.06rem + 0.2vw, 1.3rem);
  transition: color 0.3s, background-color 0.3s;
}
header .container-header .contact-box:hover {
  background-color: #181818;
  color: #00537f;
}
header .container-header .contact-box a {
  font-weight: bold;
}
header .container-header .contact-box a i {
  margin-right: 0.5rem;
}
header .container-header .header__sp {
  display: none;
}
header .container-header .header__sp .menu-button {
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  z-index: 100001;
}
header .container-header .header__sp .menu-button .menu-button__line,
header .container-header .header__sp .menu-button .menu-button__line::before,
header .container-header .header__sp .menu-button .menu-button__line::after {
  display: block;
  position: absolute;
  width: 28px;
  height: 3px;
  left: 6px;
  border-radius: 2px;
  background: #db2442;
  content: "";
  transition: all 0.3s;
}
header .container-header .header__sp .menu-button .menu-button__line {
  top: 19px;
}
header .container-header .header__sp .menu-button .menu-button__line::before {
  top: -10px;
}
header .container-header .header__sp .menu-button .menu-button__line::after {
  top: 10px;
}
header .container-header .header__sp .menu-button.active .menu-button__line {
  background: transparent;
}
header .container-header .header__sp .menu-button.active .menu-button__line::before {
  transform: translateY(10px) rotate(45deg);
  background: #db2442;
}
header .container-header .header__sp .menu-button.active .menu-button__line::after {
  transform: translateY(-10px) rotate(-45deg);
  background: #db2442;
}
header .container-header .header__sp .sp-nav {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 10000;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease, visibility 0.5s ease;
  display: flex;
  flex-direction: column;
}
header .container-header .header__sp .sp-nav::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("../../img/common/bg07.png") no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 0.3;
  z-index: -5;
}
header .container-header .header__sp .sp-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 280px;
  margin: 0 auto;
}
header .container-header .header__sp .sp-nav ul .header__logo {
  margin: 1rem auto;
  transition: all 0.4s;
}
header .container-header .header__sp .sp-nav ul > li {
  width: 100%;
  border-bottom: 2px dotted #00537f;
}
header .container-header .header__sp .sp-nav ul > li > a {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.5;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 400;
  color: #181818;
  text-decoration: none;
}
header .container-header .header__sp .sp-nav ul > li > a p {
  display: block;
  font-size: 16px;
  transition: all 0.4s;
}
header .container-header .header__sp .sp-nav ul > li > a span {
  font-size: 14px;
  padding: 0 30px;
  position: relative;
  transition: all 0.4s;
}
header .container-header .header__sp .sp-nav ul > li > a:hover p,
header .container-header .header__sp .sp-nav ul > li > a:hover span {
  color: #db2442;
}
header .container-header .header__sp .sp-nav ul .snslink {
  margin-top: 1rem;
}
header .container-header .header__sp .sp-nav ul .snslink a i {
  font-size: 20px;
  transition: all 0.4s;
}
header .container-header .header__sp .sp-nav ul .snslink a:hover i {
  color: #db2442;
  transition: all 0.4s;
}
header .container-header .header__sp .sp-nav.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media screen and (max-width: 1100px) {
  header .header__warp .header__logo {
    width: 130px;
  }
}
@media screen and (max-width: 1024px) {
  header .header__warp .header__logo {
    width: 100px;
  }
  header .container-header .header__nav .nav__list {
    gap: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  #header {
    background-color: transparent;
    box-shadow: none;
  }
  #header .header__warp {
    margin: 5px auto;
  }
  #header .container-header .header__contact,
  #header .container-header .header__nav {
    display: none;
  }
  #header .container-header .header__sp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }
  #header .container-header .contact-box {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  #header .header__logo {
    width: 80px;
  }
  #header .sp-nav ul .header__logo {
    margin: 0;
  }
  #header .sp-nav ul > li > a {
    font-size: 14px;
  }
  #header .sp-nav ul > li > a p {
    display: block;
    font-size: 14px;
  }
  #header .sp-nav ul > li > a span {
    font-size: 12px;
    padding: 0 30px;
    position: relative;
  }
}
#floating {
  position: fixed;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 998;
  opacity: 0;
}
#floating li {
  display: block;
  margin: 1.25rem 0;
  border-right: none;
}
#floating li a {
  background-color: #00537f;
  color: #ffffff;
  font-size: clamp(0.5rem, 0.46rem + 0.2vw, 0.7rem);
  padding: 1rem 0.5rem;
  font-weight: 800;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  width: 60px;
  height: 60px;
  position: relative;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  transition: ease 0.4s;
}
#floating li a i {
  font-size: 20px;
}
#floating li a p {
  display: none;
}
#floating li a::before {
  position: absolute;
  top: 0.75rem;
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#floating li a:hover {
  background-color: #db2442;
  color: #ffffff;
}

@media screen and (max-width: 768px) {
  #floating {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    justify-content: space-around;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
    border-bottom: 2px solid #fff;
    border-top: #fff 2px solid;
    will-change: transform;
    backface-visibility: hidden;
  }
  #floating li {
    display: block;
    width: 100%;
    margin: 0;
    border-right: #fff 2px solid;
    will-change: transform;
    backface-visibility: hidden;
  }
  #floating li:nth-child(2) {
    border-right: none;
  }
  #floating li:nth-child(2) {
    border-left: none;
  }
  #floating li a {
    writing-mode: unset;
    width: 100%;
    border-radius: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding: 10px;
    transition: background-color 0.3s ease, color 0.5s ease;
    font-size: 1rem;
    height: 50px;
  }
  #floating li a:hover {
    transform: none;
    background-color: #ffffff;
    opacity: 1;
  }
  #floating li a:hover span {
    color: #181818;
  }
  #floating li a span {
    display: block;
    writing-mode: horizontal-tb;
  }
  #floating li a p {
    display: block;
  }
  #floating li a i {
    font-size: 1rem;
    margin-bottom: 0;
    margin-top: 1px;
    margin-right: 10px;
  }
}
_:lang(x) + _:-webkit-full-screen-document,
#floating {
  right: 18px;
}
_:lang(x) + _:-webkit-full-screen-document li,
#floating li {
  border: none;
}

#mainvisual {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
#mainvisual .swiper-textbox {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  align-items: center;
  z-index: 10;
  padding: 50px;
  /* ======================
     sub title
  ====================== */
}
#mainvisual .swiper-textbox .sub-main {
  position: relative;
  text-align: center;
  font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
  font-family: "Zen_Kurenaido", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #181818;
  text-shadow: 1px 1px 15px rgb(255, 255, 255);
  padding: 10px 0;
  margin-bottom: 50px;
  letter-spacing: normal;
}
#mainvisual .swiper-textbox {
  /* ======================
     main title
  ====================== */
}
#mainvisual .swiper-textbox .main {
  width: 100%;
  margin: auto;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  font-size: 5rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  text-shadow: rgb(0, 0, 0) 5px 0px 0px, rgb(0, 0, 0) 4.9px 1px 0px, rgb(0, 0, 0) 4.6px 1.9px 0px, rgb(0, 0, 0) 4.1px 2.8px 0px, rgb(0, 0, 0) 3.4px 3.5px 0px, rgb(0, 0, 0) 2.7px 4.2px 0px, rgb(0, 0, 0) 1.8px 4.6px 0px, rgb(0, 0, 0) 0.8px 4.9px 0px;
}
#mainvisual .swiper-textbox .main span {
  font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
  font-family: "Zen Maru Gothic", sans-serif;
}
#mainvisual .swiper-textbox .main {
  /* サブ英語タイトル */
}
#mainvisual .swiper-textbox .main.sub-text {
  font-size: 1.25rem;
  opacity: 0.9;
}
#mainvisual .swiper-textbox .main.sub-text span {
  font-size: clamp(2.8rem, 2.76rem + 0.2vw, 3rem);
  font-family: "Mogra", sans-serif;
}
#mainvisual .swiper-textbox .main {
  /* ======================
     1文字アニメーション
  ====================== */
}
#mainvisual .swiper-textbox .main .char {
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  position: relative;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  animation: growAndBack 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#mainvisual .swiper-textbox .main .space {
  width: auto;
}
#mainvisual {
  /* ======================
     animation
  ====================== */
}
@keyframes growAndBack {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  40% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
#mainvisual .swiper {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#mainvisual .swiper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
#mainvisual .swiper .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
}
#mainvisual .swiper .swiper-wrapper .swiper-slide .swiper-img {
  height: 100vh;
}
#mainvisual .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mainvisual {
  /* スライドの背景画像のスタイル */
}
#mainvisual .swiper-slide {
  position: relative;
  border-radius: 20px;
}
#mainvisual .swiper-slide-active .swiper-img,
#mainvisual .swiper-slide-duplicate-active .swiper-img,
#mainvisual .swiper-slide-prev .swiper-img {
  animation: zoomUp 12s linear 0s normal both;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
@media screen and (max-width: 768px) {
  #mainvisual .swiper-textbox .sub-main {
    font-size: clamp(2.8rem, 2.76rem + 0.2vw, 3rem);
  }
  #mainvisual .swiper-textbox .main {
    text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
  }
  #mainvisual .swiper-textbox .main span {
    font-size: 50px;
  }
  #mainvisual .swiper-textbox .main {
    /* サブ英語タイトル */
  }
  #mainvisual .swiper-textbox .main.sub-text span {
    font-size: 35px;
  }
  #mainvisual .swiper-textbox .big span {
    font-size: clamp(2.8rem, 2.76rem + 0.2vw, 3rem);
  }
}
@media screen and (max-width: 600px) {
  #mainvisual .swiper-textbox {
    padding: 10px;
  }
  #mainvisual .swiper-textbox .sub-main {
    font-size: clamp(2.3rem, 2.26rem + 0.2vw, 2.5rem);
  }
  #mainvisual .swiper-textbox .main span {
    font-size: 40px;
  }
  #mainvisual .swiper-textbox .main {
    /* サブ英語タイトル */
  }
  #mainvisual .swiper-textbox .main.sub-text span {
    font-size: 25px;
  }
  #mainvisual .swiper-textbox .big span {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
}
@media screen and (max-width: 480px) {
  #mainvisual .swiper-textbox {
    padding: 10px;
  }
  #mainvisual .swiper-textbox .sub-main {
    font-size: clamp(2.1rem, 2.06rem + 0.2vw, 2.3rem);
  }
  #mainvisual .swiper-textbox .main span {
    font-size: 30px;
  }
  #mainvisual .swiper-textbox .main {
    /* サブ英語タイトル */
  }
  #mainvisual .swiper-textbox .main.sub-text span {
    font-size: 24px;
  }
  #mainvisual .swiper-textbox .big span {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
}
#greeting {
  position: relative;
}
#greeting .contents {
  max-width: 100%;
  width: 100%;
  padding: 0;
}
#greeting .contents__wrap--text {
  width: 70%;
  padding: 30px 0;
  position: relative;
  order: 1;
  z-index: 5;
  margin: auto;
}
#greeting .contents__wrap--text .big {
  font-size: clamp(2rem, 1.96rem + 0.2vw, 2.2rem);
  font-weight: 700;
  color: #019153;
}
#greeting .contents__wrap--text .text {
  padding: 1rem 0;
  line-height: 1.8;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
  font-weight: 600;
}

@media screen and (max-width: 1280px) {
  #greeting .contents__wrap--text {
    width: 80%;
  }
  #greeting .contents__wrap--text .big {
    font-size: clamp(2.1rem, 2.06rem + 0.2vw, 2.3rem);
  }
}
@media screen and (max-width: 1024px) {
  #greeting .contents__wrap--img {
    width: 100%;
    order: 2;
    margin-top: 30px;
  }
  #greeting .contents__wrap--img figure {
    display: flex;
  }
  #greeting .contents__wrap--text {
    width: 90%;
    padding: 30px;
    order: 1;
    right: 0;
  }
  #greeting .contents__wrap--text .big {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
}
@media screen and (max-width: 768px) {
  #greeting .contents__wrap--text {
    width: 100%;
  }
  #greeting .contents__wrap--text .big {
    font-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  }
  #greeting .contents__wrap--text .text {
    padding: 10px 0;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.2rem);
  }
}
#about {
  position: relative;
  background-color: #e5fbff;
}
#about .contents {
  max-width: 100%;
  width: 100%;
}
#about .contents .main-ttl02 {
  position: relative;
}
#about .contents .main-ttl02 h2 {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 60px 50px;
  line-height: 1;
}
#about .contents .main-ttl02 h2::before {
  content: "";
  position: absolute;
  background-image: url("../../img/home/fukidashi01.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  top: -10px;
  left: 0;
  width: 100%;
  height: 340px;
  z-index: 1;
}
#about .contents .main-ttl02 h2 p {
  position: relative;
  z-index: 5;
}
#about .contents .main-ttl02 h2 .fukidashi span {
  position: relative;
  z-index: 5;
  font-size: 40px;
}
#about .contents__wrap {
  margin-top: 30px;
}
#about .contents__wrap--item {
  order: 1;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin: 8rem auto;
  row-gap: 20px;
}
#about .contents__wrap--item li {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: self-start;
  background-color: #ffffff;
  color: #00537f;
  font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  padding: 10px 30px;
  font-weight: 700;
  box-shadow: -4px 4px 0 #019153;
}
#about .contents__wrap--item li img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  margin-top: 12px;
}
@media screen and (max-width: 1280px) {
  #about .contents__wrap--item li {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
  #about .contents__wrap--item li img {
    margin-top: 5px;
  }
}
@media screen and (max-width: 1024px) {
  #about .contents__wrap--item li {
    font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
    line-height: 1.5;
  }
  #about .contents__wrap--item li img {
    width: 30px;
    height: 30px;
  }
  #about .contents__wrap figure {
    order: 1;
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  #about .contents .main-ttl02 h2 p {
    font-size: 40px;
  }
  #about .contents .main-ttl02 h2 .fukidashi span {
    font-size: 30px;
  }
  #about .contents__wrap--item li {
    font-size: 20px;
    line-height: 1.5;
  }
  #about .contents__wrap--item li img {
    margin-top: 1px;
  }
}
@media screen and (max-width: 600px) {
  #about .contents .main-ttl02 h2 {
    padding: 20px 30px;
    width: 330px;
  }
  #about .contents .main-ttl02 h2::before {
    height: 200px;
  }
  #about .contents .main-ttl02 h2 p {
    font-size: 30px;
  }
  #about .contents .main-ttl02 h2 .fukidashi span {
    font-size: 18px;
  }
  #about .contents__wrap--item {
    margin: 5rem auto;
  }
  #about .contents__wrap--item li {
    font-size: 18px;
    padding: 1rem;
  }
  #about .contents__wrap--item li img {
    margin-top: 2px;
  }
}
#staff {
  position: relative;
  background-color: #fffdea;
}
#staff .contents {
  max-width: 100%;
  width: 100%;
}
#staff .contents .main-ttl02 {
  position: relative;
}
#staff .contents .main-ttl02 h2 {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: 60px 140px;
  line-height: 1;
}
#staff .contents .main-ttl02 h2::before {
  content: "";
  position: absolute;
  background-image: url("../../img/home/fukidashi02.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  top: -35px;
  left: 0;
  width: 100%;
  height: 340px;
  z-index: 1;
}
#staff .contents .main-ttl02 h2 p {
  position: relative;
  z-index: 5;
}
#staff .contents .main-ttl02 h2 span {
  position: relative;
  z-index: 5;
  font-size: 40px;
}
#staff .contents__wrap {
  margin-top: 30px;
}
#staff .contents__wrap--item {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin: 8rem auto;
  row-gap: 20px;
}
#staff .contents__wrap--item li {
  color: #00537f;
  box-shadow: -4px 4px 0 #fd9d43;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: self-start;
  background-color: #ffffff;
  font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  padding: 10px 30px;
  font-weight: 700;
}
#staff .contents__wrap--item li img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  margin-top: 5px;
}
#staff .contents__wrap--item li p br {
  display: none;
}
#staff .contents__wrap figure {
  width: 30%;
}
#staff .contents__wrap figure img {
  aspect-ratio: 1036/1102;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media screen and (max-width: 1280px) {
  #staff .contents__wrap--item li {
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
  }
  #staff .contents__wrap--item li img {
    margin-top: 5px;
  }
}
@media screen and (max-width: 1024px) {
  #staff .contents__wrap--item li {
    font-size: clamp(1.6rem, 1.56rem + 0.2vw, 1.8rem);
    line-height: 1.5;
  }
  #staff .contents__wrap--item li img {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 768px) {
  #staff .contents .main-ttl02 h2::before {
    top: -30px;
  }
  #staff .contents .main-ttl02 h2 p {
    font-size: 40px;
  }
  #staff .contents .main-ttl02 h2 span {
    font-size: 30px;
  }
  #staff .contents__wrap--item li {
    font-size: 20px;
    line-height: 1.5;
  }
  #staff .contents__wrap--item li img {
    margin-top: 1px;
  }
}
@media screen and (max-width: 600px) {
  #staff .contents .main-ttl02 h2 {
    padding: 20px 30px;
    width: 330px;
  }
  #staff .contents .main-ttl02 h2::before {
    height: 230px;
  }
  #staff .contents .main-ttl02 h2 p {
    font-size: 30px;
  }
  #staff .contents .main-ttl02 h2 span {
    font-size: 18px;
  }
  #staff .contents__wrap--item {
    margin: 5rem auto;
  }
  #staff .contents__wrap--item li {
    font-size: 18px;
    padding: 1rem;
  }
  #staff .contents__wrap--item li img {
    margin-top: 2px;
  }
}
#top-item {
  overflow: hidden;
  padding-top: 100px;
}
#top-item .contents {
  padding: 0;
}
#top-item .top-item_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
#top-item .top-item_wrap ul,
#top-item .top-item_wrap ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-item .top-item_wrap ul li,
#top-item .top-item_wrap ol li {
  width: calc(33.3333333333% - 2rem);
  overflow: hidden;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.6));
}
#top-item .top-item_wrap ul li .top-item_img,
#top-item .top-item_wrap ol li .top-item_img {
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.5s all;
  aspect-ratio: 1/1;
}
#top-item .top-item_wrap ul li .top-item_img::after,
#top-item .top-item_wrap ol li .top-item_img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  backdrop-filter: blur(1px);
  z-index: 10;
  transition: 0.5s all;
}
#top-item .top-item_wrap ul li .top-item_img::before,
#top-item .top-item_wrap ol li .top-item_img::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: 0.5s all;
}
#top-item .top-item_wrap ul li .top-item_img:hover,
#top-item .top-item_wrap ol li .top-item_img:hover {
  transform: scale(1.1, 1.1);
  transition: 0.5s all;
}
#top-item .top-item_wrap ul li .top-item_img:hover::after,
#top-item .top-item_wrap ol li .top-item_img:hover::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  backdrop-filter: blur(0);
  z-index: 10;
  transition: 0.5s all;
}
#top-item .top-item_wrap ul li .top-item_img:hover::before,
#top-item .top-item_wrap ol li .top-item_img:hover::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  z-index: 10;
  transition: 0.5s all;
}
#top-item .top-item_wrap ul li .top-item_img img,
#top-item .top-item_wrap ol li .top-item_img img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
#top-item .top-item_wrap ul li .top-item_img h5,
#top-item .top-item_wrap ol li .top-item_img h5 {
  width: 80%;
  padding: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: clamp(2.3rem, 2.26rem + 0.2vw, 2.5rem);
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  text-shadow: 1px 2px 3px #000;
  transform: translateY(-50%) translateX(-50%);
  line-height: normal;
  text-align: center;
  z-index: 20;
  font-family: "Square_Peg", sans-serif;
}
#top-item .top-item_wrap ul li .top-item_img h5 span,
#top-item .top-item_wrap ol li .top-item_img h5 span {
  font-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  font-family: "Hachi_Maru_Pop", sans-serif;
  font-weight: 500;
}

@media screen and (max-width: 928px) {
  #top-item .top-item_wrap ul li {
    width: calc(50% - 1rem);
  }
  #top-item .top-item_wrap ul li .top-item_img h5 {
    font-size: 20px;
    white-space: nowrap;
    line-height: normal;
  }
}
@media screen and (max-width: 768px) {
  #top-item {
    padding: 0;
  }
  #top-item .top-item_wrap ul {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #top-item .top-item_wrap ul li {
    width: 100%;
  }
  #top-item .top-item_wrap ul li .top-item_img {
    aspect-ratio: 4/2;
  }
  #top-item .top-item_wrap ul li .top-item_img h5 {
    font-size: 22px;
  }
  #top-item .top-item_wrap ul li .top-item_img img {
    aspect-ratio: 520/230;
  }
}
@media screen and (max-width: 480px) {
  #top-item .top-item_wrap ul li {
    width: 100%;
    height: 100%;
  }
  #top-item .top-item_wrap ul li .top-item_img h5 {
    font-size: 20px;
    white-space: nowrap;
    line-height: normal;
  }
}
#carousel {
  position: relative;
}
#carousel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 40%;
  height: 100%;
  display: block;
  z-index: -1;
  background-color: #00537f;
  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: #00537f;
  border: solid 1px #00537f;
  color: #00537f;
  transition: all ease 0.5s;
}
#carousel .carousel__warp--link a:hover {
  background-color: #ffffff;
  color: #db2442;
}

#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-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;
}

#gallery_2 {
  width: 100%;
  overflow-x: hidden;
}
#gallery_2 .section__title {
  position: absolute;
  z-index: -999;
  opacity: 0;
  pointer-events: none;
}
#gallery_2 .section {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
#gallery_2 .section__list {
  display: flex;
  transition-timing-function: linear !important;
}
#gallery_2 .section__list li {
  width: 360px;
  display: block;
  padding-inline: 7.5px;
}
#gallery_2 .section__list li a {
  width: 100% !important;
  height: 100%;
  display: block;
}
#gallery_2 .section__list li a:hover img {
  scale: 1.1;
}
#gallery_2 .section__list li figure {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 5px;
}
#gallery_2 .section__list li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: scale 1s;
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 928px) {
  #gallery_2 .section__list li {
    width: 320px;
  }
}
@media screen and (max-width: 768px) {
  #gallery_2 .section__list li {
    width: 280px;
  }
}
.calender__content table {
  border: #db2442 2px solid;
  width: 100%;
}
.calender__content table tbody tr {
  border-bottom: #db2442 2px solid;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calender__content table tbody tr th,
.calender__content table tbody tr td {
  border-right: #db2442 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: #db2442;
}
.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 .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: 999;
}
.pagetop a {
  width: 70px;
  height: 70px;
  aspect-ratio: 1/1;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  border-radius: 50%;
  transition: all ease 0.5s;
  font-size: 13px;
  font-weight: 700;
  color: #00537f;
}
.pagetop a img {
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.6));
}
.pagetop a i {
  color: #00537f;
}
.pagetop a:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

@media screen and (max-width: 768px) {
  .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;
  overflow: hidden;
  z-index: 10;
}
#footer .footer-section {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#footer .footer-section .footer__warp {
  width: 100%;
  max-width: 1400px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding-top: 3rem;
  padding-bottom: 1rem;
  border-radius: 20px;
  gap: 3rem;
}
#footer .footer-section .footer__warp .content-left {
  width: 50%;
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}
#footer .footer-section .footer__warp .content-left .logo {
  width: 200px;
}
#footer .footer-section .footer__warp .content-left .info address p {
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  line-height: 1.5;
}
#footer .footer-section .footer__warp .content-left .info address p span {
  display: inline-block;
}
#footer .footer-section .footer__warp .content-left .info .phone {
  padding-top: 10px;
}
#footer .footer-section .footer__warp .content-left .info .phone a {
  transition: all 0.4s;
}
#footer .footer-section .footer__warp .content-left .info .phone a i {
  margin-right: 5px;
}
#footer .footer-section .footer__warp .content-left .info .phone a:hover {
  color: #db2442;
}
#footer .footer-section .footer__nav {
  width: 50%;
  text-align: center;
  padding: 1rem 0;
}
#footer .footer-section .footer__nav--warp {
  max-width: 1400px;
  margin: 0 auto;
}
#footer .footer-section .footer__nav--warp nav ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  gap: 1rem;
}
#footer .footer-section .footer__nav--warp nav ul li {
  transform: rotate(0.05deg);
  transform: skewX(0.03deg);
}
#footer .footer-section .footer__nav--warp nav ul li a {
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.5s ease, color 0.5s ease;
  transform: rotate(0.05deg);
  transform: skewX(0.03deg);
}
#footer .footer-section .footer__nav--warp nav ul li a span {
  font-size: clamp(0.5rem, 0.46rem + 0.2vw, 0.7rem);
  line-height: clamp(0.4rem, 0.36rem + 0.2vw, 0.6rem);
  display: block;
  padding-top: 10px;
}
#footer .footer-section .footer__nav--warp nav ul li a:hover {
  color: #db2442;
}
#footer .footer-section .footer__nav--warp nav ul .snslink {
  display: flex;
  gap: 1rem;
}
#footer .footer__copy {
  padding: 10px 0;
  text-align: center;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 1rem);
  background-color: #00537f;
  color: #fff;
}
#footer .footer__copy br {
  display: none;
}
@media (max-width: 768px) {
  #footer .footer__copy {
    padding-bottom: 65px;
  }
}

@media screen and (max-width: 1280px) {
  #footer .footer-section {
    padding: 0 50px;
  }
}
@media screen and (max-width: 1024px) {
  #footer .footer-section {
    width: 100%;
  }
}
@media screen and (max-width: 928px) {
  #footer .footer-section .footer__warp {
    flex-direction: column;
  }
  #footer .footer-section .footer__warp .content-left {
    width: 100%;
  }
  #footer .footer-section .footer__warp .content-left .logo {
    width: 150px;
  }
  #footer .footer-section .footer__nav {
    width: 90%;
    margin: auto;
  }
  #footer .footer-section .footer__nav--warp nav ul {
    justify-content: center;
  }
  #footer .footer-section .footer__nav--warp nav ul .snslink {
    width: 100%;
    justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  #footer .footer-section {
    padding: 0 1rem;
  }
  #footer .footer-section .footer__warp {
    gap: 1rem;
  }
  #footer .footer-section .footer__warp .content-left {
    flex-direction: column;
  }
  #footer .footer-section .footer__warp .content-left .address p {
    text-align: center;
  }
  #footer .footer-section .footer__warp .content-left .phone {
    text-align: center;
  }
}/*# sourceMappingURL=style.css.map */