@charset "UTF-8";

.wrapper {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  animation-name:fade-in;
  animation-duration:2s; /* アニメーション時間 */
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
  opacity: 0;
  transition: opacity 1s ease;
}
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}

.swiper {
height: auto;
margin-inline: auto;
}

/* メインスライダー */
.swiper-main {
  width: 100%;
  height: auto;
  position: relative;
}

/* スライド画像全体 */
.swiper-main .swiper-slide .swiper-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 画像はレイアウトを崩さず表示 */
.swiper-main .swiper-slide .swiper-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 10s linear;
  /* ズーム挙動はJSで制御 */
}

.swiper-thumb {
position: absolute;
right: 20px; /* 画像右端からの距離 */
bottom: 20px; /* 画像下端からの距離 */
width: /*256484556px;*/520px; /* サムネイル全体の幅。必要に応じて調整 */
height: /*643744px; */54px;/* サムネイル全体の高さ。必要に応じて調整 */
z-index: 10;
pointer-events: auto;
background: rgba(255,255,255,0.7); /* 見やすくする場合 */
border-radius: 8px; /* 角丸にする場合 */
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 影をつける場合 */

}

.swiper-thumb .swiper-slide {
width: /*64*/130px; /*!important;*/ /* サムネイル1枚の幅。必要に応じて調整 */
height: /*64*/54px; /*!important;*/ /* サムネイル1枚の高さ。必要に応じて調整 */
padding: 2px ;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 8px; /* お好みで */
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
opacity: .5;
transition: opacity .5s ease;
cursor: pointer;
}

.swiper-thumb .swiper-slide.swiper-slide-thumb-active {
opacity: 1;
border: 2px solid #00509d; /* アクティブ時の枠線 */
}

.swiper-thumb .swiper-slide img {
width: auto;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center center; /* 中央部分を表示 */
display: block;
border-radius: 8px;
}

/*=================================================================================
ここからクイックリファレンスのCSS
=================================================================================*/

.is-pc {display: block;}
.is-sp {display: none;}

@media only screen and (max-width: 768px) {
 .is-pc {display: none;}
 .is-sp {display: block;}
}

/*=================================================================================
ここからクイックリファレンスのCSS---ここはPC丸バナーの場合のCSS
=================================================================================*/

.quick-reference { width: 100%; padding: 5px 0; position:relative;}
.quick-reference-title { position: relative; font-size: 28px; text-align: center; width: 25%; padding: 10px 5px; background: linear-gradient(to right, #0057b8 1%, #008cc9 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%); color: #fff; font-weight: bold; opacity: 0; transform: translateX(-30px); animation: slideInLeft 0.8s ease forwards; animation-delay: 1s; white-space: nowrap; margin: 24px 0 -85px 0;}
/* 残像用の薄い影を２つ作成 */
.quick-reference-title::before,
.quick-reference-title::after { content: "クイックリファレンス"; position: absolute; top: 0; color: #fff; opacity: 0; font-weight: bold; white-space: nowrap; pointer-events: none; animation-fill-mode: forwards; user-select: none;}
.quick-reference-title::before { left: 5px; filter: blur(2px); transform: translateX(-10px); animation: slideInLeftShadow 0.8s ease forwards; animation-delay: 0.9s; z-index: -2;}
.quick-reference-title::after { left: 10px; filter: blur(4px); transform: translateX(-20px); animation: slideInLeftShadow 0.8s ease forwards; animation-delay: 0.8s; z-index: -3;}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }}
@keyframes slideInLeftShadow {
  0% { opacity: 0; transform: translateX(-40px); }
  80% { opacity: 0.15; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

.quick-reference-title-r { position: relative; font-size: 28px; text-align: center; width: 25%; padding: 10px 5px; background: linear-gradient(to right, #008cc9 1%, #0057b8 100%); clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 60px); color: #fff; font-weight: bold; opacity: 0; transform: translateX(30px); animation: slideInRight 0.8s ease forwards; animation-delay: 1s; white-space: nowrap; margin: -85px 0 25px auto;}
.quick-reference-title-r::before,
.quick-reference-title-r::after { content: "クイックリファレンス"; position: absolute; top: 0; color: #fff; opacity: 0; font-weight: bold; white-space: nowrap; pointer-events: none; animation-fill-mode: forwards; user-select: none;}
.quick-reference-title-r::before { right: 5px; filter: blur(2px); transform: translateX(10px); animation: slideInRightShadow 0.8s ease forwards; animation-delay: 0.9s; z-index: -2;}
.quick-reference-title-r::after { right: 10px; filter: blur(4px); transform: translateX(20px); animation: slideInRightShadow 0.8s ease forwards; animation-delay: 0.8s; z-index: -3;}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }}
@keyframes slideInRightShadow {
  0% { opacity: 0; transform: translateX(40px); }
  80% { opacity: 0.15; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }}
.quick-reference-title-r img { width: auto; }


@media only screen and (max-width: 1400px) {
.quick-reference-title { width: 100%;  font-size: 24px; margin: 0 0 10px 0; clip-path:none;}
.quick-reference-title-r { display: none;}}

.sides { width: 100%; animation-delay: 1.2s; margin: 0;}
.scroll { color: #222; position: relative; /*display: flex; align-items: center; gap: 10px; */animation-delay: 1.4s;}
.scroll span { font-size: 1em; transform: rotate(0deg); animation-delay: 1.6s;}
.line { height: 5px; width: 100%; background: linear-gradient(to right, #0057b8 1%, #008cc9 100%); position: relative; overflow: hidden; animation-delay: 1.8s;}
.line::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 50px; background-color: #888; animation: scrollHorizontalpc 2.3s linear infinite;}
@keyframes scrollHorizontalpc {
    0% { left: -50px; }
    100% { left: 100%; }}

.sides, .scroll, .scroll span, .line { opacity: 0; transform: translateX(-20px); animation: fadeInLeft 0.3s ease forwards; animation-delay: 1s;}
@keyframes fadeInLeft {
  to { opacity: 1; transform: translateY(0);}}
@media only screen and (max-width: 1400px) {
.sides{ margin: -66px 0 0px 0;padding: 0 0 52px 0; }}

  
.quick-reference .quick-reference-inner { display: flex; justify-content: space-around; align-items: center; gap: 20px; flex-wrap: nowrap; width: 800px; margin: 0 auto;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner{ position: relative; display: inline-block;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2),
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3) { position: relative; cursor: default; }
.quick-reference .quick-reference-inner .quick-reference-inner-banner::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #00509D; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;  box-sizing: border-box; z-index: 10; border-radius: 50%;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2)::before { border-color: #719e2b;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3)::before { border-color: #D28F2A;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:hover::before { opacity: 1; border-radius: 50%;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner img { width: 200px; height: 200px; transition: opacity 0.3s ease-in-out; display: block; opacity: 1;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:hover img { opacity: 0.7;}

.fadeInDelayed { opacity: 0; animation-name: fadeIn; animation-duration: 2s; animation-delay: 1s; animation-fill-mode: forwards; animation-timing-function: ease;}
@keyframes fadeIn { to { opacity: 1;}}

/*人文と管理栄養のリンクができたら消す箇所*/
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2):hover::before,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3):hover::before { opacity: 0 !important;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2)::after,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3)::after { content: "Coming soon"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width: 200px; height: 200px; line-height: 200px; text-align: center; font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; font-size: 26px; color: #fff; font-weight: bold; background: rgba(0, 0, 0, 0.6); padding: 0; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; white-space: nowrap; z-index: 20; }
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2):hover::after,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3):hover::after { opacity: 1; pointer-events: auto; }
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2) img,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3) img { opacity: 1 !important; transition: none !important;}
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2):hover img,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3):hover img { opacity: 0.3; transition: opacity 0.3s ease; }
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2):hover,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3):hover { outline: none; border: none; box-shadow: none;}
/*人文と管理栄養のリンクができたら消す箇所----ここまで*/

/*============================================================
SP
============================================================*/

/* スマホなど画面幅が600px以下の場合に縦並びに */
@media only screen and (max-width: 768px) {
.quick-reference .quick-reference-inner { justify-content: space-around; width: 99%; gap: 5px}
.quick-reference .quick-reference-inner .quick-reference-inner-banner img { width: 100%; height: 100%; }

.slide-text-box { width: 100%;}
.slide-text-box .slide-text { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 0 10px 0 0; width: 100%; color: #00509d; font-size: 22px; font-weight: bold; text-align: center; margin-top: -5px; padding: 10px 10px 0; opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease, transform 0.8s ease; pointer-events: none; }
.slide-text-box .sp-line { height: 5px; width: 100%; background: linear-gradient(to right, #0057b8 1%, #008cc9 100%); position: relative; overflow: hidden; animation-delay: 1.8s; }
.slide-text-box .sp-line::after { content: ''; position: absolute; bottom: 0; left: 0; height: 100%; width: 200%; background: linear-gradient( to right, #20AEE5 0%, #20AEE5 33%, #8EC54A 33%, #8EC54A 66%, #F5A21B 66%, #F5A21B 100%); background-size: 300% 100%; animation: scrollHorizontal 10s linear infinite; }
@keyframes scrollHorizontal {
  0% { background-position: 0% 0%; }
  100% { background-position: -300% 0%; }}

.slide-text-box.active .slide-text { opacity: 1; transform: translateX(0); }
.slide-text-box .slide-text .slide-icon { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; display: inline-block; object-fit: contain;}
.slide-text-box .slide-text-inner { text-align: center; font-size: 0.8em; padding-bottom: 12px;}

/*人文と管理栄養のリンクができたら消す箇所*/
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(2)::after,
.quick-reference .quick-reference-inner .quick-reference-inner-banner:nth-child(3)::after { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;  font-size: clamp(12px, 4vw, 24px);}}