@charset 'utf-8';

/*共通*/

.bg_color { background:rgba(237, 200, 74, 0.2);}
.contents_inner .h1_wrap h1 { font-size:32px; margin-bottom:30px; }
.contents_inner .h1_wrap span { font-size:16px; line-height:2em; }
h2.border_bottom { flex-wrap:wrap; justify-content: initial; border-bottom:1px solid #A87B00; letter-spacing:0.04em; display:flex; align-items:center;}
h2.border_bottom span { width:100%; display:inline-block; letter-spacing:0.05em; font-size:14px; margin-top:10px; }
@media screen and (min-width:768px) {
  .contents_inner .h1_wrap h1 { font-size:48px; margin-right:48px; letter-spacing:0.05em; }
  .contents_inner .h1_wrap span { font-size:18px; }
  h2.border_bottom span { width:auto; font-size:18px; margin-left:30px; display:inline; }
  h2.border_bottom.small { font-size:24px; color:#A87B00; }
}

main { padding-bottom:0; }
.contents_link { width:100%; display:none; flex-wrap:wrap;justify-content: space-between;  border-top:1px solid #707070;}
.contents_link li { text-align:center; }
.contents_link li { width:50%; padding:13px 10px; border-bottom:1px solid #707070; }
.contents_link li:nth-child(odd) {border-right: 1px solid #707070; }
.contents_link li a { width:100%; color:#646462; text-align:center; font-size:14px; position:relative; display:inline-block; }
.contents_link li a::after { content:""; position:absolute; top:50%; right:5%; width:7px; height:7px; background:url("../img/arrow_right.svg") no-repeat center/contain; transform:translateY(-50%); }
.contents_link li a.active
.contents_inner .h1_wrap { width:100%;  position: relative; }

.image_top { width:100%; height:25vh; margin-bottom:60px; }
.image_top img { width:100%; height:100%; object-fit:cover; border:1px solid #707070; animation: none;}
.lead { line-height:2em; margin-bottom:80px; text-align: justify;}
.contents_wrap { padding-bottom:0px; }
.contents_wrap.top { padding-bottom:0px; }
.contents_wrap.toplink { display:flex; flex-wrap:wrap; flex-direction: column-reverse;}
.contents_wrap.toplink .contents_inner.margintop0 { margin-top:0; }
.contents_wrap .image_top { margin-bottom:30px; }
@media screen and (min-width:768px) {
  .contents_link { width:auto; justify-content: initial; margin-bottom:56px; margin-bottom:initial; border-top:0; display:flex; }
  .contents_link li { width:auto; padding:0 20px; /*border-right:1px solid #646462;*/ border-top:none; border-left:none; border-bottom:none; margin-bottom:initial; margin-bottom:10px; }
  .contents_link li a { position:relative; display:inline-block; text-align:left; font-size:16px; text-decoration:none; }
  .contents_link li a::after { content:""; position:absolute; top:initial; left:0; bottom:0; width:0%; height:1px; background-color:currentColor; transition:width 0.3s ease; }
  .contents_link li a:hover::after { width:100%; }
  .contents_link li a.active { text-decoration:underline;}
  .contents_link li a.active:hover::after { content:none; }
  
  .contents_inner .h1_wrap { margin-bottom:50px; }
  .contents_link { width:90%; margin:0 auto 56px auto; }
  .image_top { height:480px; display:block;  }
  .contents_wrap { padding-bottom:120px; }
  .contents_inner.margintop0 { margin-top:0; }
  .contents_wrap.toplink { flex-direction: initial;}

}

@media (max-width: 768px) {
  .contents_link li:has(a.active) {
    display: none;
  }
}
.contents_link li:nth-child(odd) {
  border-left: 1px solid #707070;
}




/*ページ下部共通リンク*/
.contents_link_bottom { width:90%; display:flex; flex-wrap:wrap; margin:40px auto 0 auto;justify-content: space-between; padding-bottom:80px; }
.contents_link_bottom li { width:47.5%; }
.contents_link_bottom li .arch {width:clamp(100%,28vw,100%);aspect-ratio:320/350;border-radius:9999px 9999px 0 0;overflow:hidden;margin-bottom:16px;display:flex;align-items:center;justify-content:center;  position:relative; border:1px solid #434343;}
.contents_link_bottom li .arch::after {content:"";position:absolute;inset:0; /* top, right, bottom, leftすべて0 */background:rgba(0,0,0,0.34); /* 黒の34%透過 */z-index:1; /* 画像より上 */pointer-events:none; /* クリック透過 */}
.contents_link_bottom li .arch img {width:100%;height:100%;object-fit:cover;object-position:center;display:block;  transition: transform 0.6s ease; transform: scale(1); }
.contents_link_bottom li .arch strong { width:100%; font-size:24px; text-align:center; position:absolute; z-index:1; color:rgba(255,255,255,0.8); line-height:1.1em; z-index:2; padding-top:50px; }
.contents_link_bottom li .arch strong span.gothic {font-size:14px; font-weight:bold; color:rgba(255,255,255,1);}
.contents_link_bottom li a:hover .arch img { transform: scale(1.08);  }
@media screen and (min-width:768px) {
  .contents_link_bottom {  margin:0 auto; gap:54px; display:flex; padding-bottom:0; }
  .contents_link_bottom li { width:28%; }
  .contents_link_bottom li .arch strong { font-size:4vw; }
  .contents_link_bottom li .arch strong span.gothic { font-size:18px; }
}
@media screen and (min-width:1120px) {
  .contents_link_bottom { width:1080px;  margin:80px auto 0 auto;}
  .contents_link_bottom li { width:320px; }
    .contents_link_bottom li .arch strong { font-size:39px; }
}

.contents_link_bottom li .arch {
  position: relative;
  overflow: hidden;
}

/* ===== 黒幕の左右分割 ===== */
/* アーチ本体を基準にする＆はみ出し隠し */
.contents_link_bottom li .arch{
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* ===== 黒幕の左右分割（そのままでOK） ===== */
.contents_link_bottom li .arch::before,
.contents_link_bottom li .arch::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:50%;
  background:rgba(0,0,0,0.34);
  z-index:1;
  pointer-events:none;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* 左半分：左端から中央へ */
.contents_link_bottom li .arch::before{
  left:0;              /* ← 左端起点 */
  transform:translateX(0);
  transform-origin:right center;
}

/* 右半分：必ず中央(左:50%)から配置するのがコツ */
.contents_link_bottom li .arch::after{
  left:50%;            /* ← ここを right:0 ではなく left:50% に */
  transform:translateX(0);
  transform-origin:left center;
}

/* ===== ホバー時：中央→左右へ開く ===== */
.contents_link_bottom li:hover .arch::before{ transform:translateX(-100%); }
.contents_link_bottom li:hover .arch::after{  transform:translateX(100%);  }


.contents.bg_white { margin-bottom:50px;}
.contents_inner .contents .contents_in { padding-bottom:0; }
.contents_in p { margin-bottom:32px; line-height:2em; text-align:justify; }
.contents_in .contents_text p { margin-bottom:0;}
.contents_in small { line-height:1.5em; margin-top:10px; }
.contents_in .contents_img { margin-bottom:32px;margin-top: 20px;}
.contents_img img { width:100%; margin-bottom:15px;}
.evaluation .contents_img img:last-of-type { margin-bottom: 0;}
.award{line-height: 1.8;margin-top: 10px;}
.contents_box.flexbox { padding-bottom:40px; }
@media screen and (min-width:768px) {
  .contents_box { margin-bottom:50px;}
  .contents_box:last-of-type { margin-bottom:80px;}
  .contents_box.flexbox { display:flex; justify-content: space-between;}
  .contents_box.flexbox .contents_text { width:55%;}
  .contents_box.flexbox .contents_img { width:25%; margin-bottom:0;}
  .contents_box.suehiro .contents_img.flexbox { display:flex; justify-content: space-between; margin-top: 30px;}
  .contents_box.suehiro .contents_img.flexbox  img { width: 32%;}
  .contents_img img { width:100%; margin-bottom:10px;}
  .contents_in p { margin-bottom:50px; }
  .contents_in .contents_img { margin-top: 0px;}
  .award {display: flex;flex-direction: row;gap: 50px;}

  .contents_box.flexbox .contents_img.galleria { width:32%; }
  .contents_box.flexbox { padding-bottom:initial; }

}
@media screen and (min-width:1280px) {
  .contents_box.flexbox .contents_text { width: 60%;}
}

.message_bottom { width:100%; text-align:center; font-size:18px; line-height:2em; letter-spacing:0.05em; }
@media screen and (min-width:768px) {
.message_bottom { font-size:24px; }
}

.voice_list { width:100%; display:flex; flex-wrap:wrap; justify-content: space-between; }
.voice_list li{ width:100%; margin-bottom:30px; }
.voice_list li .fukidashi { background:#EAEAEA; padding:20px; position:relative; margin-bottom:20px; }
.voice_list li .fukidashi p { margin-bottom:0; }
.voice_list li .fukidashi::after {content: "";position: absolute;bottom: -12px; left: 40px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 12px solid #EAEAEA;}
.voice_list li dl { width:100%; display:flex; margin-bottom:28px; align-items:center;}
.voice_list li dl dd p { margin-bottom:0; }
.voice_list li dl img { width:27px; margin-right:5px; }
@media screen and (min-width:768px) {
  .voice_list { margin-bottom:70px; border-bottom:1px solid #A87B00;}
  .voice_list li{ width:32%; margin-bottom:0; }
  .voice_list li .fukidashi { padding:30px; }
  .fukidashi p { font-size:17px; }
}

.contents_wrap.contentslink .title_en { width:100%; text-align:center; font-size:40px; display:inline-block;letter-spacing: 0.16em;margin-bottom: 20px; padding-top:100px;}
.contents_wrap.contentslink h2 {width:100%; text-align:center; display:inline-block;  }

 .contents_link.top { display:none; }
@media screen and (min-width:768px) {
  .contents_link.top { width:100%; display:flex; border-bottom:1px solid #A87B00; padding-bottom:20px; }


}

/*雀の動き*/
.contents_wrap.top { width:100%; position:relative; }
.contents_wrap.top .bird { width:20px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
.contents_wrap.top .bird1 { left:0; top:0; transform:rotate(20deg); animation-delay:0s; }
.contents_wrap.top .bird2 { left:10%; top:5vh; transform:rotate(-20deg); animation-delay:0.7s; }
.contents_wrap.top .bird3 { left:8%; top:10vh; transform:rotate(10deg); animation-delay:1.4s; }
@media screen and (min-width:768px) {
  .contents_wrap.top .bird { width:28px; position:absolute; z-index:2; will-change:transform,opacity; animation:flyPath 6s linear infinite; }
  .contents_wrap.top .bird1 { left:50%; top:11vh; transform:rotate(20deg); animation-delay:0s; }
  .contents_wrap.top .bird2 { left:55%; top:9vh; transform:rotate(-20deg); animation-delay:0.7s; }
  .contents_wrap.top .bird3 { left:60%; top:7vh; transform:rotate(10deg); animation-delay:1.4s; }
}
@keyframes flyPath { 0% { transform:translate(0,0) rotate(10deg); opacity:0; } 5% { opacity:1; } 15% { transform:translate(15vw,-6vh) rotate(12deg); } 20% { transform:translate(20vw,-4vh) rotate(8deg); } 30% { transform:translate(30vw,-12vh) rotate(6deg); } 35% { transform:translate(35vw,-9vh) rotate(4deg); } 50% { transform:translate(50vw,-18vh) rotate(0deg); } 55% { transform:translate(55vw,-15vh) rotate(-3deg); } 70% { transform:translate(70vw,-26vh) rotate(-6deg); } 75% { transform:translate(75vw,-22vh) rotate(-8deg); } 100% { transform:translate(102vw,-32vh) rotate(-5deg); opacity:0; } }