@charset "utf-8";

:root {
 --menu-width: 35%;
 --base-speed: 0.4s;
 --delay-step: 0.1s;
}

@media (min-width: 768px) {
 #menu-hamburger-menu .sub-menu {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-left: 15px;
  transition: max-height var(--base-speed) ease-in-out, visibility var(--base-speed);
 }

 #menu-hamburger-menu .sub-menu.is-open {
  max-height: 1000px;
  visibility: visible;
 }

 .toggle-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
 }

 .toggle-btn::before,
 .toggle-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
  transition: 0.3s;
 }

 .toggle-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
 }

 .toggle-btn.is-active::after {
  transform: translate(-50%, -50%) rotate(0deg);
 }

 /* --- 子要素のアニメーション設定 --- */
 #menu-hamburger-menu .sub-menu li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--base-speed) ease, transform var(--base-speed) ease;
  transition-delay: 0s !important;
 }

 /* .is-openがついた瞬間から、--si を使った遅延が計算される */
 #menu-hamburger-menu .sub-menu.is-open li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(var(--si) * var(--delay-step)) !important;
 }
}

@media (max-width: 767px) {
 :root {
  --menu-width: 70%;
 }

 .toggle-btn {
  display: none;
 }

 #menu-hamburger-menu .sub-menu {
  display: block !important;
 }
}

/* スピード切り替えクラス */
.speed-fast {
 --base-speed: 0.4s;
 --delay-step: 0.1s;
}

.speed-normal {
 --base-speed: 0.8s;
 --delay-step: 0.125s;
}

.speed-slow {
 --base-speed: 1.2s;
 --delay-step: 0.15s;
}

/* 背面スクロール禁止 */
body.menu-open {
 overflow: hidden;
}

/* ハンバーガーボタン（3本線 → ×） */
.menu-btn {
 position: fixed;
 z-index: 9999;
 width: 40px;
 height: 40px;
 cursor: pointer;
 border: none;
 background: none;
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
 content: "";
 position: absolute;
 left: 5px;
 height: 2px;
 width: 30px;
 background: #333;
 transition: all 0.3s;
}

.menu-btn span::before {
 top: -10px;
}

.menu-btn span::after {
 top: 10px;
}

body.menu-open .menu-btn span {
 background: transparent;
}

body.menu-open .menu-btn span::before {
 transform: rotate(45deg);
 top: 0;
}

body.menu-open .menu-btn span::after {
 transform: rotate(-45deg);
 top: 0;
}

/* オーバーレイ */
.menu-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 z-index: 9997;
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--base-speed);
}

body.menu-open .menu-overlay {
 opacity: 1;
 visibility: visible;
}

/* メニュー本体 */
.drawer-menu {
 position: fixed;
 z-index: 9998;
 overflow-y: auto;
 transition: transform var(--base-speed) ease-in-out;
 visibility: hidden;
}

body.menu-open .drawer-menu {
 visibility: visible;
}

/* 方向別設定 */
.from-left {
 top: 0;
 left: 0;
 width: var(--menu-width);
 height: 100%;
 transform: translateX(-100%);
}

.from-right {
 top: 0;
 right: 0;
 width: var(--menu-width);
 height: 100%;
 transform: translateX(100%);
}

.from-top {
 top: 0;
 left: 0;
 width: 100%;
 height: 70%;
 transform: translateY(-100%);
}

.from-bottom {
 bottom: 0;
 left: 0;
 width: 100%;
 height: 70%;
 transform: translateY(100%);
}

body.menu-open .from-left,
body.menu-open .from-right,
body.menu-open .from-top,
body.menu-open .from-bottom {
 transform: translate(0, 0);
}

/* 項目ごとの時間差アニメーション */
.drawer-menu li {
 transition: opacity var(--base-speed) ease, transform var(--base-speed) ease;
}

.drawer-menu.from-left li {
 opacity: 0;
 transform: translateX(-50px);
}

.drawer-menu.from-right li {
 opacity: 0;
 transform: translateX(50px);
}

.drawer-menu.from-top li {
 opacity: 0;
 transform: translateY(-50px);
}

.drawer-menu.from-bottom li {
 opacity: 0;
 transform: translateY(50px);
}

body.menu-open .drawer-menu li {
 transition-delay: calc(var(--i) * var(--delay-step));
}

body.menu-open .drawer-menu.from-left li,
body.menu-open .drawer-menu.from-right li {
 opacity: 1;
 transform: translateX(0);
}

body.menu-open .drawer-menu.from-top li,
body.menu-open .drawer-menu.from-bottom li {
 opacity: 1;
 transform: translateY(0);
}

/* --- ドロワーが閉じている時のサブメニューの状態 --- */
/* body.menu-open が外れた際、中身を即座に透明にする設定 */
body:not(.menu-open) .drawer-menu .sub-menu {
 opacity: 0;
 transition: opacity 0.2s ease;
 /* 閉じる時はスッと消す */
}

body:not(.menu-open) .drawer-menu .sub-menu li {
 opacity: 0;
 transform: translateX(-10px);
 /* 閉じるときは遅延（delay）をリセットして即座に反応させる */
 transition-delay: 0s !important;
}

/* --- プラスマーク（toggle-btn）のフェードアウト --- */
/* ドロワーを閉じる際、プラスマーク自体も親要素と一緒に消えるように調整 */
body:not(.menu-open) .toggle-btn {
 opacity: 0;
 transition: opacity 0.2s ease;
}

/* --- サブメニューが開いている時の挙動を補強 --- */
.sub-menu.is-open {
 opacity: 1;
 /* 明示的に不透明にする */
}

/* 簡易装飾 */
.menu-inner {
 padding: 40px;
}

.menu-inner ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.menu-inner ul li {
 font-size: 1.2rem;
}

.menu-inner .sub-menu {
 margin-left: 1.5rem;
 font-size: 0.9rem;
}

body:not(.menu-open) .menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
 box-shadow: 0 1px 0px #ccc;
}

/*========= レイアウトのためのCSS ===============*/

.pc-only-images {
 display: none;
}

.sp-only-slider {
 display: block;
}

/* PC（911px以上） */
@media screen and (min-width: 911px) {
 .pc-only-images {
  display: block;
 }

 .sp-only-slider {
  display: none;
 }
}

@media only screen and (min-width:911px) {

 /* 共通：画像固定エリア */
 .images {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #333;
 }

 .image-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* 背景画像の共通設定 */
 .bg-img {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
 }

 /* --- パターンA：フェード (is-fade) --- */
 .images.is-fade .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
 }

 .images.is-fade .bg-img.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
 }

 /* --- パターンB：縦スクロール押し出し (is-slide) --- */
 .images.is-slide .image-inner {
  display: block;
 }

 .images.is-slide .bg-img {
  position: relative;
 }
}

:root {
 --show-time: 3s;
 /* 1枚あたりの時間 */
}

.scroll_speed01 {
 --show-time: 1.5s;
 /* 1枚あたりの時間 */
}

.scroll_speed03 {
 --show-time: 4.5s;
 /* 1枚あたりの時間 */
}

@media only screen and (min-width:911px) {

 .left_v01:has(.pc-only-images),
 .left_v01:has(.slider-container),
 .left_v02:has(.pc-only-images),
 .left_v02:has(.slider-container),
 .left_v04:has(.pc-only-images),
 .left_v04:has(.slider-container),
 .right_v01:has(.pc-only-images),
 .right_v01:has(.slider-container),
 .right_v02:has(.pc-only-images),
 .right_v02:has(.slider-container),
 .right_v04:has(.pc-only-images),
 .right_v04:has(.slider-container) {
  position: absolute;
  top: 0;
  z-index: -10;
 }
}

/* フェード・ズームモード共通のベース */
.slider-container.fade-mode,
.slider-container.zoom-mode {
 position: absolute;
 top: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 z-index: -10;
 background-color: #333;
}

.fade-mode .slide,
.zoom-mode .slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 opacity: 0;
 background-size: cover;
 background-position: center;
 animation-duration: var(--total-time);
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-fill-mode: both;
}

/* --- 1. ズームモード --- */
.zoom-mode .slide {
 /* animation-name 削除 */
 background-size: cover;
}

/* --- 2. フェードモード --- */
.fade-mode .slide {
 /* animation-name 削除 */
 background-size: cover;
}

/* --- 3. スライドモード --- */
.slide-mode.slick-initialized {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 opacity: 1;
 visibility: visible;
 z-index: -10;
 /* 背面に配置 */
}

/* 横スライド（910px以下）でスライドを横に並べるための設定 */
@media only screen and (max-width: 910px) {

 .slide-mode.slick-initialized .slick-list,
 .slide-mode.slick-initialized .slick-track {
  height: 100% !important;
  display: flex !important;
  /* 横並びを強制 */
  align-items: center;
 }
}

.slide-mode.slick-initialized .slide {
 height: 100vh;
 width: 100%;
 display: block !important;
 position: relative !important;
 opacity: 1 !important;
 visibility: visible !important;
 background-size: cover;
 background-position: center;
}

@media only screen and (max-width: 910px) {
 .slide-mode.slick-initialized .slide {
  height: 100% !important;
 }

 .l-aside-left>div:first-child .slider-container {
  height: 100%;
  min-height: 550px;
 }

 .l-aside-left {
  height: 100%;
  min-height: 500px;
  max-height: 600px;
  overflow: auto;
 }

 .l-aside-right {
  height: 100%;
  overflow: auto;
  min-height: 400px;
  max-height: 600px;
 }

 .l-aside-right>div:first-child .slider-container {
  height: 100%;
  min-height: 400px;
 }
}

.fade-mode .slide.is-single,
.zoom-mode .slide.is-single {
 animation: unset;
 opacity: 1;
}

.fade-mode .slide.is-single,
.zoom-mode .slide.is-single,
.slide-mode .slide.is-single {
 background-repeat: no-repeat;
}

.slide-mode .slide.is-single {
 background-size: cover;
 height: 100%;
}

.slide-mode:has(.slide.is-single) {
 position: absolute;
 top: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 z-index: -10;
 background-color: #333;
}

/* 縦スライド時の枠線を消す */
.slick-vertical .slick-slide {
 border: none !important;
 outline: none !important;
}

.gallery-outer-container:has(.is-vertical) {
 position: absolute;
 top: 0;
}

.gallery_list_wrapper:has(.is-vertical) {
 height: 1000px;
}

@media (max-width: 910px) {
 .gallery_list_wrapper:has(.is-vertical) {
  height: 550px;
 }
}

/* 共通設定 */
/* 描画範囲を限定しメモリ消費を抑える */
.gallery_list_wrapper {
 overflow: hidden;
 position: relative;
 contain: paint;
 -webkit-mask-image: -webkit-radial-gradient(white, black);
 /* iOSの角丸はみ出しバグ対策 */
}

.gallery_list {
 display: flex !important;
 will-change: transform;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 animation-play-state: paused !important;
}

/* 計算完了後に動き出す */
.gallery_list.is-active {
 animation-play-state: running !important;
}

/* ホバー停止（JSのクラス制御に連動） */
.gallery_list.is-paused {
 animation-play-state: paused !important;
}

/* 隙間を物理的に埋める */
.gallery_list.is-horizontal>div {
 flex-shrink: 0 !important;
 margin-right: -1px !important;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

.gallery_list.is-vertical>div {
 width: 100%;
 flex-shrink: 0 !important;
 margin-bottom: -1px !important;
}

/* 画像がループ時に一瞬消えるのを防ぐ */
.gallery_list img {
 display: block;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
}

.gallery_direction03,
.gallery_direction04 {
 flex-direction: column;
}

/* アニメーション：端数計算を排除（0.1pxハックなどは削除） */
@keyframes gallery_direction01 {
 0% {
  transform: translate3d(0, 0, 0);
 }

 100% {
  transform: translate3d(var(--slide-distance), 0, 0);
 }
}

@keyframes gallery_direction02 {
 0% {
  transform: translate3d(var(--slide-distance), 0, 0);
 }

 100% {
  transform: translate3d(0, 0, 0);
 }
}

@keyframes gallery_direction03 {
 0% {
  transform: translate3d(0, var(--slide-distance), 0);
 }

 100% {
  transform: translate3d(0, 0, 0);
 }
}

@keyframes gallery_direction04 {
 0% {
  transform: translate3d(0, 0, 0);
 }

 100% {
  transform: translate3d(0, var(--slide-distance), 0);
 }
}

/* videoタグ専用プログレスバー */
.progress-container {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 15px;
 cursor: pointer;
 z-index: 10;
 display: flex;
 align-items: flex-start;
}

.video-bar {
 width: 0%;
 height: 4px;
 background: rgba(255, 255, 255, 0.5);
 transition: width 0.1s linear;
 will-change: width;
 pointer-events: none;
}

.progress-container:hover .video-bar {
 height: 7px;
 background: rgba(255, 255, 255, 0.8);
}

/* プログレスバーのスタイル */
.slider-progress-bar {
 position: absolute;
 top: 0;
 left: 0;
 width: 0%;
 height: 4px;
 background-color: rgba(255, 255, 255, 0.5);
 z-index: 99;
 pointer-events: none;
 animation: full-progress var(--total-time) linear infinite;
}

@keyframes full-progress {
 0% {
  width: 0%;
 }

 100% {
  width: 100%;
 }
}

.images,
.bg-slider-container {
 position: relative;
 overflow: hidden;
}

/* slickスライド専用プログレスバー */
.slider-progress {
 width: 100%;
 height: 4px;
 position: absolute;
 top: 0;
 overflow: hidden;
 z-index: 0;
}

.progress-bar {
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.5);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.8s linear;
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: 1;
}

@media (min-width: 911px) {
 aside>div:has(.pc-only-images) .slider-progress {
  display: none;
 }
}

@media (min-width: 911px) {
 aside>div:has(.pc-only-images) .slider-progress {
  display: none;
 }
}

/*　サムネイル付きギャラリー　*/
/*スライダー全体のコンテナ*/
.sliderArea {
 width: 100%;
 max-width: 100%;
 margin: 0 auto;
 overflow: hidden;
 box-sizing: border-box;
}

.thumb_slider:not(.slick-initialized),
.thumb:not(.slick-initialized) {
 display: flex;
 overflow: hidden;
 height: 300px;
}

.thumb_slider:not(.slick-initialized)>div:nth-child(n+2),
.thumb:not(.slick-initialized)>div:nth-child(n+2) {
 display: none;
}

.slick-slider:not(.bg-slider-container) .slick-track {
 display: flex !important;
 flex-direction: row;
 align-items: flex-start;
 margin-left: 0;
 margin-right: 0;
 text-align: center;
}

.slick-slider:not(.bg-slider-container) .slick-slide {
 height: auto !important;
 float: none !important;
 display: block;
 aspect-ratio: 16 / 10;
}

/*メインスライダー (.thumb_slider)*/
.thumb_slider {
 margin-bottom: 10px;
 width: 100%;
}

.thumb_slider img {
 width: auto;
 max-height: 100%;
 object-fit: contain;
}

/*サムネイルスライダー (.thumb)*/
.thumb {
 width: 100%;
}

.thumb .slick-list {
 margin: 0 -5px;
 overflow: visible;
}

.thumb .slick-slide {
 padding: 0 5px;
 cursor: pointer;
 opacity: 0.5;
 transition: opacity 0.3s ease;
}

.thumb .slick-current {
 opacity: 1;
}

.thumb img {
 width: 100%;
 object-fit: cover;
 aspect-ratio: 16 / 10;
}

.slick-prev,
.slick-next {
 display: none !important;
}

.slick-slide:focus {
 outline: none;
}

/* 動くテキスト */
.move-text-block {
 padding: 15px;
}

.move-text-item {
 padding: 5px 0;
}

.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
 white-space: nowrap;
}

html.translated-ltr .visually-hidden {
 position: unset;
 width: auto;
 height: auto;
}

html.translated-ltr .char-span {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

/* --- 共通ベース --- */
.move-text-block {
 overflow: hidden;
}

.move-text-block {
 container-type: inline-size;
 width: 100%;
}

/* type01-04（塊）の初期状態 */
.move-text-item[class*="text_type01"],
.move-text-item[class*="text_type02"],
.move-text-item[class*="text_type03"],
.move-text-item[class*="text_type04"] {
 opacity: 0;
}

/* type05-06（一文字ずつ）の初期状態 */
.move-text-item[class*="text_type05"] span.char-span,
.move-text-item[class*="text_type06"] span.char-span {
 display: inline-block;
 opacity: 0;
}

/* --- ループあり：12秒周期設定 --- */
.is-active.is-loop {
 animation-duration: 12s;
 animation-fill-mode: forwards;
}

.text_type01.is-active.is-loop {
 animation-name: textLeftInOut;
}

.text_type02.is-active.is-loop {
 animation-name: textRightInOut;
}

.text_type03.is-active.is-loop {
 animation-name: textTopInOut;
}

.text_type04.is-active.is-loop {
 animation-name: textBottomInOut;
}

/* 一文字ずつループ（12秒） */
.text_type05.is-active.is-loop span.char-span {
 animation: waveInOut 12s forwards var(--delay);
}

.text_type06.is-active.is-loop span.char-span {
 animation: appearInOut 12s steps(1, start) forwards var(--calculated-delay);
}

/* --- ループなし：維持設定 --- */
.is-active.no-loop {
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
}

.text_type01.is-active.no-loop {
 animation-name: textInOnly;
 transform: translateX(-2em);
}

.text_type02.is-active.no-loop {
 animation-name: textInOnly;
 transform: translateX(2em);
}

.text_type03.is-active.no-loop {
 animation-name: textInOnly;
 transform: translateY(-2em);
}

.text_type04.is-active.no-loop {
 animation-name: textInOnly;
 transform: translateY(2em);
}

/* 一文字ずつ維持 */
.text_type05.is-active.no-loop span.char-span {
 animation: textInOnly 1s forwards var(--delay);
 transform: translateY(1em);
}

.text_type06.is-active.no-loop span.char-span {
 animation: textInOnly 0.5s forwards var(--calculated-delay);
}

/* --- キーフレーム定義（12秒 = 100%） --- */
@keyframes textLeftInOut {
 0% {
  opacity: 0;
  transform: translateX(-2em);
 }

 5%,
 45% {
  opacity: 1;
  transform: translateX(0);
 }

 50%,
 100% {
  opacity: 0;
  transform: translateX(-0.5em);
 }
}

@keyframes textRightInOut {
 0% {
  opacity: 0;
  transform: translateX(2em);
 }

 5%,
 45% {
  opacity: 1;
  transform: translateX(0);
 }

 50%,
 100% {
  opacity: 0;
  transform: translateX(0.5em);
 }
}

@keyframes textTopInOut {
 0% {
  opacity: 0;
  transform: translateY(-2em);
 }

 5%,
 45% {
  opacity: 1;
  transform: translateY(0);
 }

 50%,
 100% {
  opacity: 0;
  transform: translateY(-0.5em);
 }
}

@keyframes textBottomInOut {
 0% {
  opacity: 0;
  transform: translateY(2em);
 }

 5%,
 45% {
  opacity: 1;
  transform: translateY(0);
 }

 50%,
 100% {
  opacity: 0;
  transform: translateY(0.5em);
 }
}

/* 一文字ずつループ用 */
@keyframes waveInOut {
 0% {
  opacity: 0;
  transform: translateY(1em);
 }

 5%,
 45% {
  opacity: 1;
  transform: translateY(0);
 }

 50%,
 100% {
  opacity: 0;
 }
}

@keyframes appearInOut {
 0% {
  opacity: 0;
 }

 0.5%,
 49.5% {
  opacity: 1;
 }

 50%,
 100% {
  opacity: 0;
 }
}

/* 共通 */
@keyframes textInOnly {
 to {
  opacity: 1;
  transform: translate(0, 0);
 }
}

/* タイプライターカーソル */
.text_type06.is-active span.char-span:nth-last-child(2)::after {
 content: '';
 display: inline-block;
 width: 0;
 height: 1.2em;
 border-right: solid 2px currentColor;
 animation: tikatika 0.8s steps(2) infinite, appearInOut 12s steps(1) forwards;
 vertical-align: text-bottom;
 margin-left: 2px;
}

@keyframes tikatika {

 0%,
 49% {
  border-right-color: currentColor;
 }

 50%,
 100% {
  border-right-color: transparent;
 }
}

/* 背景色が消えてから表示 */
.move-text-block:has(.text_type07) {
 position: relative;
 display: block;
 overflow: hidden;
}

.move-text-block:has(.text_type07)::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 z-index: 10;
 pointer-events: none;
}

.move-text-block:has(.text_type07.is-active)::after {
 animation: revealBlockMain 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.move-text-block .text_type07 {
 opacity: 0;
}

.move-text-block:has(.text_type07.is-active) .text_type07 {
 animation: fadeInText 0s forwards 0.7s;
}

@keyframes revealBlockMain {
 0% {
  width: 0;
  left: 0;
 }

 50% {
  width: 100%;
  left: 0;
 }

 100% {
  width: 0;
  left: 100%;
 }
}

@keyframes fadeInText {
 to {
  opacity: 1;
 }
}

/* Slick起動前：縦並びや巨大化を防ぐ */
.content-news.center-slider {
 display: flex;
 overflow: hidden;
 opacity: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}

.content-news.center-slider:not(.slick-initialized) li:not(:first-child) {
 display: none;
}

/* Slick起動後：ふわっと表示 */
.content-news.slick-initialized {
 position: relative;
 display: block !important;
 opacity: 1;
 transition: opacity 0.5s ease;
}

/* 全スライドの基本（通常時） */
.center-slider .slick-slide {
 transition: transform 0.5s ease, opacity 0.5s ease !important;
 transform: scale(0.85);
 opacity: 0.5;
 z-index: 1;
 outline: none;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
}

.center-slider .slick-current.slick-center {
 transform: scale(1.15) !important;
 opacity: 1 !important;
 z-index: 2;
}

.center-slider .item {
 padding: 60px 15px;
}

/* 画像の高さを固定（ガタつき防止） */
.slider-container .slick-arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
 font-size: 0;
}

.slider-container .slick-prev {
 left: 10px;
}

.slider-container .slick-next {
 right: 10px;
}

.slider-container .slick-prev,
.slider-container .slick-next {
 display: inline-block !important;
 opacity: 0.7;
}

.slider-container .slick-prev::before,
.slider-container .slick-next::before {
 font-size: 26px;
 color: var(--news_bg);
 font-weight: 900;
 font-family: "Font Awesome 5 Free";
 border-radius: 50%;
 background-color: var(--news_color);
}

.slider-container .slick-prev:hover,
.slider-container .slick-next:hover {
 opacity: 1.0;
 transition: 0.5s;
}

.slider-container .slick-prev::before {
 content: "\f359";
}

.slider-container .slick-next::before {
 content: "\f35a";
}

.slider-container .slick-dots {
 position: absolute;
 bottom: 6%;
 display: flex !important;
 justify-content: center;
 list-style: none;
 width: 100%;
 padding: 0;
 margin: 0;
}

.slider-container .slick-dots li {
 margin: 0 6px;
}

.slider-container .slick-dots li button {
 font-size: 0;
 width: 8px;
 height: 8px;
 cursor: pointer;
 border: 0;
 background: #ccc;
 border-radius: 50%;
 transition: 0.3s;
 border: solid 1px rgba(255, 255, 255, 0.5);
}

.slider-container .slick-dots li.slick-active button {
 background: #333;
 transform: scale(1.2);
}


.slider-container li#slick-slide00 .blog-thum img.c-n-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* ==================================

  コンテンツ幅フェード（コンテンツ内ブログ記事一覧）
 
================================== */
section:has(.wide-f) {
 padding: 0 !important;
}

.content-news.wide-f .item-f {
 width: 100%;
 min-width: unset;
 max-width: unset;
 padding: 0;
}

.content-news.wide-f .item-f>a {
 position: relative;
}

.content-news.wide-f .item-f .blog-txt {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 50%;
 background-color: var(--news_bg);
}

/* slick適用前のガタつき防止 */
.wide-f {
 opacity: 0;
 visibility: hidden;
 overflow: hidden;
}

.wide-f.slick-initialized {
 opacity: 1;
 visibility: visible;
 transition: opacity 0.5s ease-in;
}

.wide-f .slick-slide {
 outline: none !important;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
}

.wide-f .slick-active {
 z-index: 2 !important;
 opacity: 1 !important;
}

.wide-f .slick-slide:not(.slick-active) {
 z-index: 1 !important;
 transition: opacity 800ms linear;
}

.wide-f .slick-prev,
.wide-f .slick-next {
 position: absolute;
 display: inline-block !important;
 z-index: 10;
 width: 40px;
 height: 40px;
 bottom: 0;
 font-size: 0;
 line-height: 0;
 color: transparent;
 background-color: var(--news_color);
}

.wide-f .slick-prev:hover,
.wide-f .slick-next:hover {
 background-color: var(--news_bg);
 transition: 0.5s;
}

.wide-f .slick-prev {
 left: 0;
}

.wide-f .slick-next {
 left: 41px;
}

.wide-f .slick-prev:before {
 content: "\f0d9";
 font-weight: 900;
 font-family: "Font Awesome 5 Free";
}

.wide-f .slick-next:before {
 content: "\f0da";
 font-weight: 900;
 font-family: "Font Awesome 5 Free";
}

.wide-f .slick-prev:before,
.wide-f .slick-next:before {
 font-size: 24px;
 color: var(--news_bg);
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}

.wide-f .slick-prev:hover:before,
.wide-f .slick-next:hover:before {
 color: var(--news_color);
 transition: 0.5s;
}

.wide-container {
 position: relative;
}

.slider-counter {
 position: absolute;
 bottom: 0;
 left: 82px;
 z-index: 10;
 height: 40px;
 width: 70px;
 color: var(--news_color);
 background-color: var(--news_bg);
 font-weight: bold;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

/* ==================================

コンテンツフェードアニメーション

================================== */

.fade-left,
.fade-right,
.fade-up,
.fade-down {
 opacity: 0;
 animation-duration: 0.6s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-play-state: paused;
}

.fade-left-slow,
.fade-right-slow,
.fade-up-slow,
.fade-down-slow {
 opacity: 0;
 animation-duration: 1.2s;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-play-state: paused;
}

.is-active-fadein {
 animation-play-state: running !important;
}

/* 左から右へ */
.fade-left,
.fade-left-slow {
 animation-name: slideInLeft;
}

@keyframes slideInLeft {
 from {
  transform: translateX(-50px);
  opacity: 0;
 }

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

/* 右から左へ */
.fade-right,
.fade-right-slow {
 animation-name: slideInRight;
}

@keyframes slideInRight {
 from {
  transform: translateX(50px);
  opacity: 0;
 }

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

/* 下から上へ */
.fade-up,
.fade-up-slow {
 animation-name: slideInUp;
}

@keyframes slideInUp {
 from {
  transform: translateY(50px);
  opacity: 0;
 }

 to {
  transform: translateY(0);
  opacity: 1;
 }
}

/* 上から下へ */
.fade-down,
.fade-down-slow {
 animation-name: slideInDown;
}

@keyframes slideInDown {
 from {
  transform: translateY(-50px);
  opacity: 0;
 }

 to {
  transform: translateY(0);
  opacity: 1;
 }
}

/* ==================================

時間差でアニメーション

================================== */

/* 時間差でアニメーションさせる */
.delay-1 {
 animation-delay: 0.2s;
}

.delay-2 {
 animation-delay: 0.4s;
}

.delay-3 {
 animation-delay: 0.6s;
}

.delay-4 {
 animation-delay: 0.8s;
}

.delay-5 {
 animation-delay: 1.0s;
}

/* ==================================

画像をモーダル表示

================================== */
.lum-lightbox.lum-open {
 z-index: 9999;
}


.modal01 {
 position: relative;
}

.modal01 a::after {
 content: url(/wp-content/themes/Template/assets/img/modal_plus.png);
 position: absolute;
 bottom: -2px;
 right: 0;
}

.lum-lightbox-inner img {
 object-fit: contain;
}


/* ==================================

コンテンツ画像ギャラリー

================================== */
.contents-slider-wrap {
 width: 100%;
 max-width: 100%;
 overflow: hidden;
}

.contents-slider>li,
.contents-slider02>li {
 width: 100%;
}

.contents-slider img,
.contents-slider02 img {
 width: 100%;
 height: 100%;
 display: block;
 max-width: 100%;
 object-fit: cover;
}

.contents-slider-wrap .slick-dots {
 display: flex;
 justify-content: center;
 list-style: none;
 margin: 10px 0 0;
 padding: 0;
 gap: 8px;
}

.contents-slider-wrap .slick-dots li button {
 font-size: 0;
 width: 35px;
 height: 1px;
 border-bottom: solid 1px rgba(255, 255, 255, 0.7);
 padding: 0;
 border: none;
 background-color: #ccc;
 cursor: pointer;
 transition: background-color 0.3s;
}

.contents-slider-wrap .slick-dots li.slick-active button {
 background-color: #333;
 height: 4px;
 border: solid 1px rgba(255, 255, 255, 0.7);
}

/* ==================================

ウェーブ

================================== */

.l-aside-left.wave01,
.l-aside-left.wave02,
.l-aside-right.wave01,
.l-aside-right.wave02 {
 overflow: hidden;
 z-index: 0;
 transform: translateZ(0);
}

.l-aside-left.wave01::before,
.l-aside-left.wave02::after,
.l-aside-right.wave01::before,
.l-aside-right.wave02::after {
 content: "";
 position: absolute;
 left: var(--w-left);
 aspect-ratio: 1 / 1;
 will-change: transform;
 backface-visibility: hidden;
 animation: wave-anime linear infinite;
}

.bg-effect-wave.wave01::before,
.bg-effect-wave.wave02::after {
 content: "";
 position: fixed;
 left: var(--w-left);
 aspect-ratio: 1 / 1;
 will-change: transform;
 backface-visibility: hidden;
 animation: wave-anime linear infinite;
}

.l-aside-left.wave01::before,
.l-aside-right.wave01::before {
 border-radius: 47% 45%;
 background-image: var(--w-bg01);
 animation-duration: var(--w-speed01);
 top: var(--w-top01);
 bottom: var(--w-bottom01);
 width: var(--w-size01);
 z-index: -9;
 background-position: center;
 background-size: var(--w-bs01);
}

.bg-effect-wave.wave01::before {
 border-radius: 47% 45%;
 background-image: var(--w-bg01);
 animation-duration: var(--w-speed01);
 top: var(--w-top01);
 bottom: var(--w-bottom01);
 width: var(--w-size01);
 z-index: 99;
 background-position: center;
 background-size: var(--w-bs01);
}

.l-aside-left.wave02::after,
.l-aside-right.wave02::after {
 border-radius: 45% 50%;
 background-image: var(--w-bg02);
 animation-duration: var(--w-speed02);
 top: var(--w-top02);
 bottom: var(--w-bottom02);
 width: var(--w-size02);
 z-index: -8;
 background-position: center;
 background-size: var(--w-bs02);
}

.bg-effect-wave.wave02::after {
 border-radius: 45% 50%;
 background-image: var(--w-bg02);
 animation-duration: var(--w-speed02);
 top: var(--w-top02);
 bottom: var(--w-bottom02);
 width: var(--w-size02);
 z-index: 100;
 background-position: center;
 background-size: var(--w-bs02);
}

.contents.bg-effect-wave.wave01::before {
 z-index: -9;
 background-position: center;
 background-size: var(--w-bs01);
}

.contents.bg-effect-wave.wave02::after {
 z-index: -8;
 background-position: center;
 background-size: var(--w-bs02);
}

.contents.bg-effect-wave {
 overflow: hidden;
 z-index: 0;
 transform: translateZ(0);
}

@keyframes wave-anime {
 0% {
  transform: var(--w-tf) rotate(0deg);
 }

 100% {
  transform: var(--w-tf) rotate(360deg);
 }
}

/* ドロップ加工 */
.raindrop01:before {
 box-shadow: inset 10px 10px 15px rgba(255, 255, 255, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.raindrop02:after {
 box-shadow: inset 10px 10px 15px rgba(255, 255, 255, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.bg-line-u,
.bg-line-t,
.bg-line-u2,
.bg-line-t2,
.bg-square-u,
.bg-square-t,
.bg-square-u2,
.bg-square-t2,
.bg-marker-thin,
.bg-marker-bold,
.bg-block-square,
.bg-block-circle {
 position: relative;
}

.bg-square-u *,
.bg-square-t *,
.bg-square-u2 *,
.bg-square-t2 * {
 position: relative;
 z-index: 2;
}

.bg-line-u,
.bg-square-u {
 padding: 0 10px 10px 0;
}

.bg-line-t,
.bg-square-t {
 padding: 10px 0 0 10px;
}

.bg-line-u2,
.bg-square-u2 {
 padding: 0 0 10px 10px;
}

.bg-line-t2,
.bg-square-t2 {
 padding: 10px 10px 0 0;
}

.bg-marker-thin,
.bg-marker-bold {
 padding: 0 10px;
}

.bg-block-square,
.bg-block-circle {
 padding: 0 0.6em;
 margin-top: 1.0em !important;
 margin-bottom: 1.0em !important;
 width: calc(100% - 0.75em);
 margin-left: 0.5em;
 margin-right: 0.25em;
}

.bg-line-u::before,
.bg-line-u::after,
.bg-line-t::before,
.bg-line-t::after,
.bg-line-u2::before,
.bg-line-u2::after,
.bg-line-t2::before,
.bg-line-t2::after,
.bg-square-u::before,
.bg-square-t::before,
.bg-square-u2::before,
.bg-square-t2::before,
.bg-block-square::before,
.bg-block-circle::before,
.bg-block-square::after,
.bg-block-circle::after {
 content: "";
 position: absolute;
 background-color: currentColor;
 transform: scale(0);
 opacity: 0;
 transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease-out;
 will-change: transform;
 z-index: 1;
}

.bg-marker-thin::before,
.bg-marker-bold::before {
 content: "";
 position: absolute;
 background-color: currentColor;
 transform: scaleX(0);
 opacity: 0;
 transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease-out;
 will-change: transform;
 z-index: 1;
}

.bg-line-u::before,
.bg-line-t::before,
.bg-line-u2::before,
.bg-line-t2::before {
 width: 95%;
 height: 1px;
}

.bg-line-u::after,
.bg-line-t::after,
.bg-line-u2::after,
.bg-line-t2::after {
 width: 1px;
 height: 50%;
}

.bg-square-u::before,
.bg-square-t::before,
.bg-square-u2::before,
.bg-square-t2::before {
 width: 95%;
 height: 50%;
}

.bg-line-u::before {
 bottom: 5px;
 right: 0;
 transform-origin: right bottom;
}

.bg-square-u::before {
 bottom: 0;
 right: 0;
 transform-origin: right bottom;
}

.bg-line-u::after {
 bottom: 0;
 right: 5px;
 transform-origin: right bottom;
}

.bg-line-t::before {
 top: 5px;
 left: 0;
 transform-origin: left top;
}

.bg-square-t::before {
 top: 0;
 left: 0;
 transform-origin: left top;
}

.bg-line-t::after {
 top: 0;
 left: 5px;
 transform-origin: left top;
}

.bg-line-u2::before {
 bottom: 5px;
 left: 0;
 transform-origin: left bottom;
}

.bg-square-u2::before {
 bottom: 0;
 left: 0;
 transform-origin: left bottom;
}

.bg-line-u2::after {
 bottom: 0;
 left: 5px;
 transform-origin: left bottom;
}

.bg-line-t2::before {
 top: 5px;
 right: 0;
 transform-origin: right top;
}

.bg-square-t2::before {
 top: 0;
 right: 0;
 transform-origin: right top;
}

.bg-line-t2::after {
 top: 0;
 right: 5px;
 transform-origin: right top;
}

.bg-marker-thin::before {
 width: 100%;
 height: 3px;
 transform-origin: left;
 bottom: 0;
 left: 0;
}

.bg-marker-bold::before {
 width: 100%;
 height: 15px;
 transform-origin: left;
 bottom: -5px;
 left: 0;
}

.bg-block-square::before,
.bg-block-circle::before {
 height: 1.0em;
 aspect-ratio: 1 / 1;
 left: -0.5em;
 top: -0.5em;
}

.bg-block-square::after,
.bg-block-circle::after {
 height: 0.5em;
 aspect-ratio: 1 / 1;
 right: -0.25em;
 bottom: -0.25em;
}

.bg-block-circle::before,
.bg-block-circle::after {
 border-radius: 50%;
}

.bg-line-u.is-content-fadein::before,
.bg-line-u.is-content-fadein::after,
.bg-line-t.is-content-fadein::before,
.bg-line-t.is-content-fadein::after,
.bg-line-u2.is-content-fadein::before,
.bg-line-u2.is-content-fadein::after,
.bg-line-t2.is-content-fadein::before,
.bg-line-t2.is-content-fadein::after,
.bg-block-square.is-content-fadein::before,
.bg-block-circle.is-content-fadein::before,
.bg-block-square.is-content-fadein::after,
.bg-block-circle.is-content-fadein::after {
 transform: scale(1.0);
 opacity: 0.6;
}

.bg-marker-thin.is-content-fadein::before,
.bg-marker-bold.is-content-fadein::before {
 transform: scaleX(1.0);
 opacity: 0.4;
}

.bg-square-u.is-content-fadein::before,
.bg-square-t.is-content-fadein::before,
.bg-square-u2.is-content-fadein::before,
.bg-square-t2.is-content-fadein::before {
 transform: scale(1.0);
 opacity: 0.2;
}

/* 背景色スクロールで変化 */
.bg-effect-fade {
 will-change: background-color;
 position: relative;
 background-color: var(--w-bg01);
 z-index: 0;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transform: translateZ(0);
}

.bg-effect-fade::before {
 content: "";
 will-change: opacity;
 position: absolute;
 inset: 0;
 background-color: var(--w-bg02);
 opacity: var(--scroll-progress, 0);
 z-index: -1;
 transition: opacity 0.1s linear;
 transform: translateZ(0);
}

/* スクロールで拡大する円 */
.bg-effect-circle {
 position: relative;
 overflow: hidden;
}

.bg-effect-circle::before {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: -2;
 overflow: hidden;
}

.bg-effect-circle::after {
 content: '';
 position: absolute;
 bottom: -50%;
 right: -50%;
 width: 250vmax;
 height: 250vmax;
 background-color: var(--w-bg01);
 border-radius: 50%;
 transform-origin: right bottom;
 animation: grow-circle linear both;
 animation-timeline: scroll(root);
 animation-range: 0% 80%;
 z-index: -1;
}

@container (width < 481px) {
 article.bg-effect-circle::after {
  bottom: 0%;
  width: 400vmax;
  height: 400vmax;
 }
}

@keyframes grow-circle {
 from {
  transform: scale(0);
 }

 to {
  transform: scale(1);
 }
}

/* ふわふわ */
.fuwafuwa1 {
 display: inline-block;
 will-change: transform;
 animation: fuwafuwa 4s ease-in-out infinite;
 transition: transform 2.0s ease-in-out;
}

.fuwafuwa2 {
 display: inline-block;
 will-change: transform;
 animation: fuwafuwa 2s ease-in-out infinite;
 transition: transform 1.0s ease-in-out;
}

@keyframes fuwafuwa {

 0%,
 100% {
  transform: translate3d(0, 0, 0) rotate(-3deg);
 }

 50% {
  transform: translate3d(0, -4px, 0) rotate(3deg);
 }
}

/* 回転 */
.rotate1 {
 display: inline-block;
 will-change: transform;
 animation: rotate-anime 10s linear infinite;
}

.rotate2 {
 display: inline-block;
 will-change: transform;
 animation: rotate-anime 5s linear infinite;
}

@keyframes rotate-anime {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

.fuwafuwa1:hover,
.fuwafuwa2:hover,
.rotate1:hover,
.rotate2:hover {
 animation-play-state: paused;
}

/* タイトルマスク・パララックス */
.masked-text {
 will-change: background-position;
 transform: translateZ(0);
 font-size: clamp(40px, 4vw, 100px);
 font-weight: bold;
 background-image:
  var(--m-img), linear-gradient(var(--m-bgcolor), var(--m-bgcolor)), var(--m-img);
 background-size: 100% auto, cover, 100% auto;
 background-attachment: scroll;
 background-position-y: -80px;
 -webkit-background-clip: text, border-box, border-box;
 background-clip: text, border-box, border-box;
 color: var(--m-txtcolor, transparent);
 text-align: center;
 padding: 50px 0;
}

/* ブロックパララックス */
.parallax-bg {
 will-change: background-position;
 transform: translateZ(0);
 background-image: var(--m-img);
}

/* サイドメニューの種類がハンバーガーと同じ場合のサブメニュー */
.menu_type01 .menu-has-children {
 position: relative;
}

.menu_type01 .menu-has-children>a {
 display: block;
 position: relative;
}

.menu_type01 .menu-has-children>a::after {
 content: '+';
 position: absolute;
 right: 0;
 top: 0;
 width: 44px;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.05);
 transition: transform 0.3s;
 border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.menu_type01 .menu-has-children.is-open02>a::after {
 content: '-';
}

.menu_type01 .sub-menu {
 max-height: 0;
 overflow: hidden;
 visibility: hidden;
 transition: max-height var(--base-speed, 0.3s) ease-in-out, visibility var(--base-speed, 0.3s);
}

.menu_type01 .menu-has-children.is-open02>.sub-menu {
 max-height: 500px;
 visibility: visible;
}

.menu_type01 .sub-menu a {
 color: var(--lm-color, #222222);
 display: block;
 opacity: 1;
 padding: 15px 0;
 text-align: center;
 transition: 0.5s;
}

.menu_type01 .sub-menu a:hover {
 color: var(--lm-bgcolor, rgba(255, 255, 255, 0.8));
 background-color: var(--lm-color);
 transition: 0.5s;
}