@charset "UTF-8";
/* CSS Document */
/* ===== 変数・ベース ===== */ :root {
  --ink: #1a1a1a;
  --paper: #fff;
  --accent: #71511E; /* 金色風（後で調整OK） */
  --deep: #1f1f1f;
  --plum: #6d5a7b; /* タブの紫（後で調整OK） */
}
html {
  scroll-behavior: smooth;
}
body {
    color: var(--ink);
}
body {
  font-family: A1 Mincho, serif;
}
.back {
    height: 100vh;
    background-image: url(../img/back.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    position: fixed;
    z-index: -1;
}
.back2 {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: -1;
}

.back2 img {
    height: 100vh;
    width: 100vw;
}

@keyframes comboMove {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.02) translate(15px, -15px);
  }
}


.logo {
  mix-blend-mode: difference;
}
p a {
    color: #000000;
}
p a:hover {
    opacity: 0.8;
}
p.text-white a {
    color: #fff;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-weight: 600;
  line-height: 2rem;
}
h1,.h1 {
    font-size: clamp(1.75rem, 12vw, 50rem);
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: normal;
     line-height: 1em;
}
@media (max-width: 767.98px) {
    h1,.h1 {
    font-size: clamp(1.75rem, 16vw, 50rem);
     line-height: 1.75em;
}
}
h2,.h2 {
    font-size: clamp(1.75rem, 7vw, 8rem);
    line-height: 1.5em;
    letter-spacing: 20px;
    font-weight: normal;
}
@media (max-width: 767.98px) {
h2,.h2 {
    font-size: clamp(1.75rem, 4vw, 8rem);
    letter-spacing: 15px;
}
}

h3,.h3 {
  font-size: clamp(1.75rem, 4vw, 5rem);
    line-height: 1.5em;
    letter-spacing: 10px;
    font-weight: normal;
}

h4,.h4 {
  font-size: clamp(1rem, 3vw, 1.5rem);
    line-height: 3em;
    letter-spacing: 10px;
    font-weight: normal;
}
@media (max-width: 767.98px) {
    h4,.h4 {
    line-height: 2.5em;
    letter-spacing: 7px;
}
}
h5,.h5 {
  font-size: clamp(0.9rem, 4vw, 1.3rem);
    font-weight: normal;
}
.h6 {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

p,.p {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    line-height: 2em;
}
.gothic {
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif!important;
}
.title {
  font-size: clamp(1rem, 4vw, 2rem);
}
.times{
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
     line-height: 1em;
        letter-spacing: 0px;
}
a figure {
  overflow: hidden;
}
a figure img.img-fluid {
  display: block;
  transition-duration: 0.3s; /*変化に掛かる時間*/
}
a:hover figure img.img-fluid {
  transform: scale(1.1);
  transition-duration: 0.3s;
}

.fixd-menu {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.logo-top {
  position: fixed;
  width: 100%;
  height: auto;
  max-width: 200px;
  top: 20px;
  left: 90px;
  z-index: 2;
     filter: invert(1);
mix-blend-mode: difference;   
}

.logo-top a img:hover {
    cursor:pointer;
}

.logo-top2 {
     position: fixed;
  width: 100%;
  height: auto;
  max-width: 56px;
  top: 20px;
  left: 20px;
  z-index: 3;
}
.bg-black p,.bg-black label {
    color: #FFFFFF;
}

/* -----------------------------------
   共通構造
----------------------------------- */
.cp_fullscreenmenu {
  position: fixed;
  z-index: 100;
  top: 0px;
  right: 0px;
}

/* ハンバーガーボタン */
.cp_fullscreenmenu .hamburger {
  position: relative;
  z-index: 120;
  width: 50px;
  height: 50px;
  padding: 0.5em 1em;
  cursor: pointer;
  background: #383838;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
    
}
.cp_fullscreenmenu .hamburger > span {
  position: absolute;
  width: 18px;
  height: 0px;
  background: #fff;
  transition: all .4s ease;
  left: 16px;
}
.cp_fullscreenmenu .hamburger > span::before,
.cp_fullscreenmenu .hamburger > span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1px;
  background: #fff;
  transition: all .4s ease;
  left: 0;
}
.cp_fullscreenmenu .hamburger > span::before { top: -8px; }
.cp_fullscreenmenu .hamburger > span::after { top: 8px; }

/* 開いた時のバー変形 */
html.menu-open .cp_fullscreenmenu .hamburger > span {
  transform: rotate(135deg);
    height: 1px;
}
html.menu-open .cp_fullscreenmenu .hamburger:hover > span {
  transform: rotate(225deg);
}
html.menu-open .cp_fullscreenmenu .hamburger > span::before {
  top: 0;
  transform: rotate(90deg);
}
html.menu-open .cp_fullscreenmenu .hamburger > span::after {
  top: 0;
  opacity: 0;
}


.cp_fullscreenmenu .hamburger:hover {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------
   メニュー本体
----------------------------------- */
.cp_fullscreenmenu .menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  z-index: 110;
  transition: visibility 0s linear .8s; /* ← 閉じる時に少し遅延をつける */
}

/* 開いた状態 */
html.menu-open .cp_fullscreenmenu .menu {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html.menu-open .cp_fullscreenmenu .menu::before {
  transform: translate(-50%, -50%) scale(1);
}

html.menu-open .cp_fullscreenmenu .menu ul {
    opacity: 1;
    padding-left: 0px;
}

/* ズームで拡大する青い円 */
.cp_fullscreenmenu .menu::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vw;
  height: 150vw;
  background: #383838;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

/* メニューリスト */
.cp_fullscreenmenu .menu ul {
  list-style: none;
  text-align: center;
 opacity: 0;
  position: relative;
  z-index: 2;
transition: opacity .4s ease .3s;
}

.cp_fullscreenmenu .menu li {
  font-size: 24px;
  margin: 1em;
}
.cp_fullscreenmenu .menu a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}
.cp_fullscreenmenu .menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15em;
    width: 0;
    height: 2px;
    background-color: #AAAAAA;
    transition: width .4s ease;
}

.cp_fullscreenmenu .menu a:hover::after {
  width: 100%;
}

/* -----------------------------------
   開いた状態
----------------------------------- */
html.menu-open .cp_fullscreenmenu .menu {
  visibility: visible;
  pointer-events: auto;
}

html.menu-open .cp_fullscreenmenu .menu::before {
  transform: translate(-50%, -50%) scale(1);
}

html.menu-open .cp_fullscreenmenu .menu ul {
  opacity: 1;
}


/* -----------------------------------
   スクロールロック
----------------------------------- */
html.menu-open {
  overflow: hidden;
}

/* -----------------------------------
   メディア調整
----------------------------------- */

/* 開いた時：通常のバッテン（135°） */
html.menu-open .cp_fullscreenmenu .hamburger {
    background-color: hsla(0,0%,100%,1.00);
}
html.menu-open .cp_fullscreenmenu .hamburger > span {
  transform: rotate(135deg);
    background: #000;
}

/* 開いた状態で hover した時：さらに90°（225°）に回転 */
html.menu-open .cp_fullscreenmenu .hamburger:hover > span {
  transform: rotate(225deg);
}

/* バーの上下もそのまま維持 */
html.menu-open .cp_fullscreenmenu .hamburger > span::before,
html.menu-open .cp_fullscreenmenu .hamburger > span::after {
  top: 0;
  transform: rotate(90deg);
    background: #000;
}
html.menu-open .cp_fullscreenmenu .hamburger > span::after {
  opacity: 0;
}
/* 初期状態：非表示・下方向へずらしておく */
.cp_fullscreenmenu .menu ul li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}

/* 開いたとき：順番にフェードイン */
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(1) { transition-delay: 0.2s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(2) { transition-delay: 0.3s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(3) { transition-delay: 0.4s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(4) { transition-delay: 0.5s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(5) { transition-delay: 0.6s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(6) { transition-delay: 0.7s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(7) { transition-delay: 0.8s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(8) { transition-delay: 0.9s; }
html.menu-open .cp_fullscreenmenu .menu ul li:nth-of-type(9) { transition-delay: 1.0s; }


.cp_fullscreenmenu .menu div img {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}

html.menu-open .cp_fullscreenmenu .menu div img {
    opacity: 1;
width: 300px;
margin-left: auto;
margin-right: auto;
    color: #fff;
     transition: opacity .4s ease, transform .4s ease;
}
@media (max-width: 575.98px) {
    html.menu-open .cp_fullscreenmenu .menu div img {
    opacity: 1;
width: 180px;
}
}
html.menu-open .cp_fullscreenmenu .menu ul li {
  opacity: 1;
  transform: translateY(0);
    width: 100%;
margin-left: auto;
margin-right: auto;
color: #FFF;
text-align: left;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
.cp_fullscreenmenu .menu ul li {
    width: 100%;
margin-left: auto;
margin-right: auto;
color: #FFF;
text-align: left;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}

html.menu-open .cp_fullscreenmenu .menu ul li a,.cp_fullscreenmenu .menu ul li a {
    width: 100%;
    background-color: #1F1F1F;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    display: inline-block;
    font-size: 1.2rem;
    font-weight: normal;
}
html.menu-open .cp_fullscreenmenu .menu ul li.white a {
    background-color: #FFF;
    color: #000!important;
}

.cp_fullscreenmenu .menu div.waku {
    display: flex;
overflow: hidden;
width: 100vw;
width: 100lvw;
height: 100vh;
height: 100lvh;
    max-width: 700px;
    backface-visibility: hidden;
align-items: center;
justify-content: center;
    z-index:1;
}

@media (max-width: 1199.98px) {
.cp_fullscreenmenu .menu::before {
width: 300vw;
height: 300vw;
}
}
@media (max-width: 575.98px) {
html.menu-open .cp_fullscreenmenu .menu ul li a,.cp_fullscreenmenu .menu ul li a {
    font-size: 0.9rem;
        padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
}
}

html.menu-open .cp_fullscreenmenu .menu ul,.cp_fullscreenmenu .menu ul {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
html.menu-open .cp_fullscreenmenu .menu ul.second-menu li {
width: 50%;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
html.menu-open .cp_fullscreenmenu .menu ul.second-menu li a {
background-color: #20B2D5 !important;
}
/* -----------------------------------
   キーボード操作での見やすさ
----------------------------------- */
.cp_fullscreenmenu .hamburger:focus-visible,
.cp_fullscreenmenu .menu a:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 3px;
  border-radius: 6px;
}
.menu-logo {
max-width: 150px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.hero-img {
    min-height: 100vh;
}
.title-span{
   color: transparent;
   display: block;
   overflow: hidden;
   position: relative;
   transition: color 0ms 0.5s;
   width: max-content;
}
.title-span::after{
  content: "";
  left: -1px;
  display: block;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background-color: white;
}
.title-span.active{
  color: white;
}
.title-span.active::after{
  animation: lineAnime 1s;
}

.title-span2{
   color: transparent;
   display: inline-block;
   overflow: hidden;
   position: relative;
   transition: color 0ms 0.5s;
}
.title-span2::after{
  content: "";
  left: -1px;
  display: block;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background-color: white;
}
.title-span2.active{
  color: white;
}
.title-span2.active::after{
  animation: lineAnime 1s;
}

.title-span3{
   color: transparent;
   display: inline-block;
   overflow: hidden;
   position: relative;
   transition: color 0ms 0.5s;
}
.title-span3::after{
  content: "";
  left: -1px;
  display: block;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background-color: black;
}
.title-span3.active{
  color: black;
}
.title-span3.active::after{
  animation: lineAnime 1s;
}

@keyframes lineAnime {
  0% {
    transform: translateX(-100%)
  }
  50% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(100%)
  }
}

.btn-box {
    position: relative;
    font-size: clamp(1em, 2.5vw, 1.2em);
    background-color: #fff;
    color: #000;
    border-radius: 0px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    width: 100%;
    max-width: 500px;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}
.btn-box:after {
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
    content: '';
    position: absolute;
    border-top: 1px solid #000;
    top: 50%;
    right: 0px;
    width: 50px;
}
.btn-box:hover {
    background-color: #C3C3C3;
    letter-spacing: 0.15em;
}
.btn-box:hover:after {
    width: 70px;
}

img.gray {
        filter: grayscale(100%);
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
      }
img.gray:hover {
        filter: none;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
      }

/* CSS Document */

.submit {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem)!important;
}
.input-group-text {
    border-radius: 0px;
    border-width: 1px;
}
.mfp-required {
    background-color: #6A6A6A;
    color: hsla(0,0%,100%,1.00);
    border-width: 1px;
    border-color: #6A6A6A;
}
.form-control,.input-group-text {
    padding: 10px;
    border-radius: 0px;
}
.input-group {
position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: stretch;
	align-items: stretch;
	width: 100%;}
form label {
    font-size: clamp(1em, 4vw, 1.1em);
    line-height: 2em;
}
/* Bootstrapのデフォルト装飾をリセット */
.custom-control-input {
  position: absolute;
  opacity: 0;
}

.custom-control-label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 16px;
  color: #222;
  user-select: none;
}

/* 外側の円 */
.custom-control-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #6A6A6A; /* 外側の水色 */
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

/* 内側の円（選択時） */
.custom-control-input:checked ~ .custom-control-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #3aa7c2;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* ホバー時にちょっと色を濃く */
.custom-control-label:hover::before {
  border-color: #1d8da8;
}

/* ラベル間の余白 */
.custom-control {
  margin-bottom: 0.8em;
}
#MfpField_06 {width:45%;}
/* セレクトボックス全体のスタイル */
.custom-select {
  appearance: none; /* ブラウザ標準の▼を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.6em 1em;
  font-size: 16px;
  color: #222;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg fill='%233aa7c2' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 30px;
  cursor: pointer;
}

/* フォーカス・ホバー時 */
.custom-select:hover,
.custom-select:focus {
  border-color: #3aa7c2;
  box-shadow: 0 0 0 3px rgba(58, 167, 194, 0.25);
  outline: none;
}

#mfp_hidden {
    display: none;
}
textarea.form-control {
    min-height: 150px!important;
}
div.mfp_err {
width: 100%;
}
input::placeholder,textarea::placeholder {
    color:#C2C1C1!important;
    opacity: 1;
}

.mfp_element_button {
    color: hsla(0,0%,100%,1.00);
    background-color: hsla(186,100%,28%,1.00);
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    border-width: 0px;
}
.mfp_element_button:hover {
        opacity: 0.8;
}

#mfp_button_cancel {
    background-color: hsla(186,58%,53%,1.00)!important;
}
.carousel-indicators [data-bs-target] {
width: 15px;
height: 15px;
}

.about-dl {
    color: #FFFFFF;
        display: flex;
    flex-wrap: wrap;
}
.about-dl dt,.about-dl dd {
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 2em;
    letter-spacing: 5px;
    font-weight: normal;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.about-dl dt {
    width: 30%;
    border-bottom: 1px solid #FFFFFF;
}
.about-dl dd {
    width: 70%;
    text-align: left;
    border-bottom: 1px solid #BDBDBD;
}
.ctr {
    position: fixed;
    right: 20px;
    bottom: 20px;
        z-index: 2;
}
@media (max-width: 767.98px) {
    .ctr {
    position: fixed;
    right: 0px;
    bottom: 0px;
    background-color: #000000;
    width: 100%;
    border: 1px solid #FFFFFF;
}
        .ctr img {
    width: 100%;
    height: auto;
}
}
.map {
    width: 100%;
    height:600px;
    filter: grayscale(1);
}
@media (max-width: 767.98px) {
    .map {
    height:450px;
}
}
.ctr img {
  transition: all 0.4s ease;
}

.ctr:hover img {
    opacity: 0.7;
}

.item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: calc(var(--i) * 0.2s);
}

/* 見えたら発火 */
.item.is-show {
  opacity: 1;
  transform: translateY(0);
}
.fadein-right {
  opacity: 0;
  transform: translateX(100px); /* 右から少し */
  animation: fadeInFromRight 0.6s ease-out forwards;
}

@keyframes fadeInFromRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}