@charset "utf-8";

/*パララックス部分*/
.parallax-section { height: calc(44vh + 66px); position:relative; z-index:-1; background-attachment:scroll; background-size:cover; 
  background-position: center 66px; overflow:hidden; color:white;  margin-bottom:0; z-index:2; }
.content {position: relative;z-index: 1;width: 100%;margin: 0 auto;/*padding: 40px 20px;*/text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;}
@media screen and (min-width: 768px) {
  .parallax-section { height: calc(100vh - 80px); position:relative; background-attachment: scroll;background-position: center center; background-size:cover; overflow:hidden; color:white; margin-bottom:80px; z-index:10; }
}
@media screen and (min-width:1024px) {
  .parallax-section {  position:relative; background-attachment:fixed; background-size:cover; background-position:top 66px; overflow:hidden; color:white; margin-bottom:80px; z-index:10; }
}
.parallax-section .content-top { height:100%; position:relative; }
.parallax-section .content-top .title_english { font-size:38px; position:absolute; display:block; margin-top:initial; right: calc(100vw + 0.5em); z-index:2; top:78vw;line-height:1em; display: inline-block; transform: rotate(90deg) translateY(calc(0.5em - 100vw)); transform-origin:100% 100%; white-space: nowrap; color: rgba(0,0,0,0.3);}
@media screen and (min-width:375px) {
  .parallax-section .content-top .title_english { font-size:45px;  top:75vw;}
}
@media screen and (min-width:414px) {
  .parallax-section .content-top .title_english { font-size:50px; top:75vw}
}

.parallax-section .content-top .profile { width:100%; position:absolute; bottom:0; }
.parallax-section .content-top .profile .busho  { display:none; }
.parallax-section .content-top .profile .nyusha { display:none; }
.parallax-section .content-top .profile .name { display:none; }
.parallax-section .content-top .shadow { width: 100vw; height:35vw;  background: linear-gradient(0deg, rgba(0,0,0,0.3), rgba(255,255,255,0)); position:absolute; bottom:0; }
@media screen and (min-width:768px) {
  .parallax-section .content-top .title_english { font-size:130px; top:700px; bottom:initial; }
  .parallax-section .content-top .profile { width:96%; margin:0 2% 0 2%; bottom:10px; color: #fff; text-align:left; display:block; }
  .parallax-section .content-top .shadow { height:20vw;background: linear-gradient(0deg, rgba(0,0,0,0.9), rgba(255,255,255,0));  }
  .parallax-section .content-top .profile .name { font-size:24px; text-align:left; line-height:1.5em; margin-bottom:10px; display:block; letter-spacing:0.05em; }
  .parallax-section .content-top .profile .busho {  line-height:1.7em; display:inline; font-size:18px; }
  .parallax-section .content-top .profile .nyusha { width:auto;  display:inline; font-size:18px;}
}

.parallax-section .content-top .profile .main_copy { width:100%; margin-left:5%; margin-bottom:10px;line-height:1.3em; text-align:left; font-size:30px; letter-spacing:0.2em; color:#fff; }
@media (min-width: 768px) and (max-width:1079px) {
  .parallax-section .content-top .profile .main_copy  { width:100%; font-size:70px; display:block; margin-left:0; margin-bottom:initial; }
}
@media screen and (min-width:1079px) {
  .parallax-section .content-top .profile .main_copy  { width:100%; font-size:75px; margin-bottom:initial; margin-left:0; }
}
@media screen and (min-width:1280px) {
  .parallax-section .content-top .profile .main_copy  { font-size:82px; white-space: nowrap;}
}




.contents_right .main_copy { font-size: 20px; position:relative; }
.contents_right h2 { font-size:24px;margin-bottom: 20px; }
@media screen and (min-width:768px) {
  .contents_right h2 { font-size:32px; }
}
.contents_right img { width: 100%; height: auto; margin:10px 0 0 0; }
.contents p { margin-bottom:0px; }
.contents_wrap { margin-top:30px; position:relative; }
.contents_wrap .contents .contents_left { border-bottom:1px solid #ccc; padding-bottom:20px; margin-bottom:20px; }
.contents_wrap .contents .contents_left .profile { display:flex; flex-wrap:wrap; }
.busho { line-height:50px; margin-right:10px; }
.name { font-size:24px; line-height:50px; }
.nyusha { width:100%; display:block; margin:0 0 10px 0; }
.profiletext { font-size:14px; display:block; line-height:1.5em; color:#696D70; margin-bottom:20px; display:block; text-align:justify;}
.contents_wrap .contents .contents_left .profile small.font-caption { width:100%; display:block; line-height:1.5em; }
.contents_wrap .contents .contents_left .profile span.font-caption.gothic {line-height:1.5em; } 
.contents_wrap .contents .contents_right .text_wrap { width:100%; margin-bottom:56px; }




@media (min-width: 768px) and (max-width:1079px) {
  .contents_wrap .contents .contents_left { display:none; }
}
@media screen and (min-width:1080px) {
  .contents p { margin-bottom:40px; }
  .contents_wrap { margin-top:initial; }
  .contents_wrap .contents { width:90%; max-width:1080px; display:flex; gap:72px; justify-content:space-between; position:relative; }
  .contents_wrap .contents .contents_left { border-bottom:0; position:relative; display:block; }
  .contents_wrap .contents .contents_left::before {content: "";position: absolute;top: -50px;left: -50px;width: calc(100% + 100px); /* 左右に50pxずつ広げる */
    height: calc(100% + 30px); border-right: 1px solid #ccc; box-sizing: border-box;pointer-events: none; /* ユーザー操作を妨げないように */z-index: 0; /* 背面に置きたい場合 */}
  .contents_wrap .contents .contents_left img { width:170px; margin-bottom:10px; filter: grayscale(100%); }
  .contents_wrap .contents .contents_left .headline-lg { font-size:26px; display:block; line-height:1.5em; letter-spacing:0.05em; }
  .contents_wrap .contents .contents_left .profile h1 { text-align:left; line-height:1.5em; margin-bottom:10px; }
  .contents_wrap .contents .contents_left .profile .font-caption { font-size:18px;  margin-bottom:20px; }
  .contents_wrap .contents .contents_left .profile .busho { width:100%; }
  .contents_wrap .contents .contents_left .profile .profiletext { margin-bottom:10px; line-height:1.7em; }
  .contents_wrap .contents .contents_left {position: absolute;top:100px;left: 50px;width: 290px;transition: transform 0.5s ease, opacity 0.5s ease;opacity: 0;transform: translateY(100px); /* 初期位置：少し下 */}
  .contents_wrap .contents .contents_left.fixed {position: fixed;z-index: 1;opacity: 1;transform: translateY(0); }
  .contents_right {opacity: 0;transform: translateY(20px); /* 下からスライド */transition: opacity 0.5s ease, transform 0.5s ease;margin-top:120px; }
  .contents_right.visible {opacity: 1;transform: translateY(0);}
  .contents_wrap .contents .contents_right { width:60%; overflow-y: auto; margin-left:40%; }
  .contents_wrap .contents .contents_right .text_wrap { margin-bottom:72px; }
  .contents_wrap .contents .contents_right .text_wrap img { width:100%; }
  .contents_wrap .contents .contents_right .text_wrap h2 { font-size:32px; line-height:2em; letter-spacing:0.05; margin-bottom:40px; }
  .font-caption { line-height:1.7em; display:block; margin-bottom:20px; }

}

.text_wrap:nth-child(3) { margin-bottom:0; }
.headline-md { line-height: 2.5em; letter-spacing:0.05; }
.scroll-message {opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.scroll-message.visible {opacity: 1;transform: translateY(0);}
.headline-xl { margin-top:30vh; margin-bottom: 100px;}

.photo_staff_wrapper {position:relative; display:inline-block; overflow:hidden; }
.photo_staff { width:100%; height:auto; display:block;}
@media screen and (min-width:1080px) {
  .photo_staff_wrapper { width:640px; margin:0 auto; display:block; }
  .photo_staff { width:640px; }
}
.photo_mask { width:100%; height:100%; position:absolute; top:0; left:0;background: white; transform: translateY(0%);transition: transform 1.5s ease-out;z-index: 2;}
.photo_staff_wrapper.visible .photo_mask {transform: translateY(-100%);}


/*ページリンク*/

.contents_wrap .contents_bottom { width:100%;  display:flex; align-items:center; height:40px; /*position: fixed;bottom: 0; */z-index:0; background-color:#B3212B; }
.contents_wrap .contents_bottom li { width:33%; }
.contents_wrap .contents_bottom li a { width:100%; display:flex;  align-items: center; justify-content: center; color:#fff; }
@media screen and (min-width:1080px) {
/*.contents_wrap .contents_bottom { width:initial; left: calc(50% - 631px + (1080px * 0.4));right: 0;transition: opacity 0.3s ease; z-index:5; }*/
.contents_wrap .contents_bottom { width:100%;transition: opacity 0.3s ease; z-index:5; }

}


.contents_bottom li a .nav_arrow{ width:26px; height:26px; margin-left:10px; overflow:hidden; border-radius:50%; border:1px solid #fff; display:flex; align-items: center; justify-content: center;}
.contents_bottom li a .nav_arrow img { width:12px; margin-top:0; }
.contents_bottom li a:hover .nav_arrow img {animation: arrowLoop 1s linear infinite;}
.contents_bottom li a:hover { background:none; opacity:0.7; }
.contents_bottom li a {transition: background 0.3s ease; }
@keyframes arrowLoop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(70px);
    opacity: 0;
  }
  50% {
    transform: translateX(-70px);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.contents_bottom li a.prev .nav_arrow { margin-right:10px; }
.contents_bottom li a.prev .nav_arrow img { transform: rotate(180deg) scaleY(-1);}
.contents_bottom li a.prev:hover .nav_arrow img {animation: arrowLoopReverse 1s linear infinite;}
@keyframes arrowLoopReverse {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(-70px);
    opacity: 0;
  }
  50% {
    transform: translateX(70px);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/*サイドバーがフッターに隠れるのを防ぐ*/
@media screen and (min-width:798px) {
  .contents_wrap {
    position: relative;
  }
  
  .contents_left {
    position: fixed;
    top: 100px;
    width: 300px;
    z-index: 10;
    transition: transform 0.3s ease;
  }
  
}