body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}


/* TOP背景 */
  .header{
    position:relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 650px;
  }

  .pc{display: block;}
  .sp{display: none;}
  @media screen and (max-width:770px) {
    .header{min-height: unset;}
  .pc{display: none;}
  .sp{display: block;}
  }

.header__bk{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.header__bk img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;

}

.header__img{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: unset;
}


@media screen and (max-width:770px) {
  .header__img{
    width:70%;
  }
}

.header__img img{
  width: 100%;
  max-width: 464.62px;
  height: auto;
  max-height: 801px;
  object-fit: contain;
}

.nav__lang{
  position: absolute;
  top:10px;
  right: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.nav__lang:hover{
  background: rgba(255, 255, 255, 1);
}
#bg{
  width: 100%;
  height: 620px;
  background-size: 400% 400%;
  animation: AnimationName 10s ease infinite;
}
#canvasWave {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 画像より前に表示する */
}

#canvasWave.canvas__top{
  top: 10%;
}

main{margin-top: 160px; font-size: 20px;}


.img-group{position: relative; width: 154px; height: 154px;}
.splide__slide img{width: 100%; position: absolute; top:0; left:0;}
.splide__slide_txt{width: 154px; position: absolute; bottom:0px; height: 2rem; background-color: rgba(255,255,255,0.8); padding:0 10px; z-index: 5; font-size:12px; display:flex; align-items: center;justify-content: center;}


/* 背景コンテナ */
#background-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.linkListArea{
  margin-top: 120px;
  padding: 60px 0;
  background-color: #940B3A;

  position: relative;
  z-index: 7;
  overflow-y: auto;
}
.linkList{
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 1rem;
  color: #fff;
}
.linkList-section{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #fff;
  background: rgba(148, 11, 59, 0.472);
  backdrop-filter: blur(4px);
}
.linkList-section__title{
width: 50%;
padding: 32px;
}
.linkList-section__list{
  width: 50%;
  padding: 32px 32px 0 0;
}
.linkList-section__list ul{
  width: 100%;
}
.linkList-section__list li{
  padding: 0 0 32px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.linkList-section__list li a{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.linkList-section__list li a .linkName{
display: block;
width: calc(100% - 20px);
}
.linkList-section__list li a .linkArrow{
  display: block;
  width: 20px;
  }
  
.linkList-section__list li a span img{
  width: 20px;
  height: 20px;
}

details{
border-bottom: 1px solid #fff;
background-color: rgba(255,255,255,0.2);
margin: 0;

}



summary{
  background: #940B3A;
  padding: 20px 0;
  position: relative;
  display: block;
  list-style: none;
  padding-left: 30px; /* アイコン分の余白 */
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary::before,
summary::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
}
summary::before {
  width: 20px;
  height: 20px;
  content: "+";
}
summary::after {
  width: 20px;
  height: 20px;
  transition: .1s;
}

summary:hover {
  cursor: pointer;
  color: #fff;
  /* background-color: rgba(255, 255, 255, 0.1); */
}

/* オープン時 */
details[open] summary::after {
  left: 10px;
  top: 2px;
  content:"-";
}
details[open] summary::before {
  transform: rotate(90deg);
  content:"";
}

.linkList-section__list a, .linkList-section__list a:visited, .linkList-section__list a:active{
  position: relative;
}
.linkList-section__list a::before{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(148, 11, 58, 1));
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -2px;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.linkList-section__list a:hover::before{
  transform-origin: left top;
  transform: scale(1, 1);
}

.footerLogoArea{
  width: 100%;
  padding: 60px;
  text-align: center;
  background-color: #3E3E3E;
}
.footerLogoArea img{
  width: 80%;
  max-width: 198px;
  height: auto;
}
.footer__copy{
  text-align: center;
  padding: 20px;
  font-size: 0.7em;;
}

@media screen and (max-width:770px) {
  .linkList{
    padding: 1rem 0;
  }
  .linkList-section__list{
    width: 100%;
    padding: 32px 32px 0 32px ;
  }  
  .linkListArea{
    background: #940B3A;
  }
}


.splide__slide a{
  position: relative;
  width: 154px;
  height: 154px;
  display: block;
}
.splide__slide .img-group {
  height: 154px;
  width: 154px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.splide__slide .img-group img {
  width: 154px;
  height: 154px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

/* .splide__slide .img-group img:hover {
  width: 180px;
  height: 180px;

} */

.splide{
  position: relative;
  z-index:20;;
  display: flex;
  align-items: center;
}

.splide__slide .img-group:hover {
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.1);

}

.splide .splide__slide {
  transition: transform 0.3s ease; /* アニメーションの速さと滑らかさを設定 */
  transform: scale(1); /* 初期状態のサイズ */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.splide .splide__slide:hover {
  transform: scale(1.2); /* ホバー時に拡大するサイズ */
  z-index: 10; /* 他の要素よりも上に表示されるようにする */
}

.splide__list{
  align-items: center;
}


@media screen and (max-width:770px) {
  .splide__list{
    align-items:flex-start;
  }
}