@charset "utf-8";html { scroll-padding-top: 100px;}

.kv {position:relative;}
.kv_main img { width: 100%;}
.kv_fade {position:absolute; opacity: 0;
  transform: translateY(20px); /* 20px上に移動して非表示にする */
  transition: opacity 3s cubic-bezier(.16,1,.3,1), transform 3s cubic-bezier(.16,1,.3,1);}
.kv_fade._deco {top: 8.49vw; left: 8.34vw; width: 6.58vw;}
.kv_fade._read {font-family: "Noto Serif JP", serif; font-size: 1.17vw; text-align:center; display: flex; flex-direction: column; justify-content:center; top:13.68vw; left:13.83vw;}
.kv_fade._read ._01{ letter-spacing:0.01em; }
.kv_fade._read ._02{ letter-spacing:0.2em; font-weight:500; line-height: 1.61vw; }
.kv_fade._read ._line {width:3.66vw; height:1px; background-color:#000; margin:1.61vw auto;}
.kv_fade._title { top: 25.03vw; left: 10.02vw; width: 24.59vw; }
.read p { font-family: "Noto Sans JP", sans-serif; font-size: 12px; text-align:center; line-height:28px; margin: 60px auto 143px; }

.profile { width:80%; margin: 0 auto 100px;}
.profile_title { display: flex; align-items: center; margin-bottom:40px;}
.profile_title h3 { color:#000; font-family: "biz-udmincho", sans-serif;; font-size: 18px; padding-right:28px; border-right: solid 1px #000}
.profile_title p { font-family: "Crimson Text", serif; font-size: 14px; padding-left: 20px;}
.profile_li {display: flex; justify-content: space-between;}
.profile_li li { width: 30%}
.profile_num, .profile_insta p { font-family: "biz-udmincho", sans-serif; font-size: 10px;}
.profile_num span { font-family: "Crimson Text", serif; font-size: 14px; }
.profile_type { font-family: "Noto Serif JP", serif; font-size: 14px; text-align:center; width:100%; padding: 5px 0; margin: 5px auto 20px; font-weight: 500;}
.profile_content {display:flex; gap:10%; align-items: flex-start;}
.profile_content img {width:30%}
.profile_name {font-family: "Noto Serif JP", serif; font-size: 14px; font-weight: 500;}
.profile_name span { font-size: 10px;}
.profile_introduction {font-family: "Noto Sans JP", sans-serif; font-size: 10px; line-height:22px; margin:14px auto;}
.profile_insta { display:flex; align-items:center;}
.profile_insta img {width:16px; height:16px; margin-right:10px;}

.style {padding:82px 0 100px; position:relative;}
.style h3 { color:#000; font-family: "Crimson Text", serif; font-size: 60px; margin-left:15%;}
.style h3 span {font-family: "biz-udmincho", sans-serif; font-size: 20px; font-weight:bold;  padding-right:16px;}
.style_name {font-family: "Noto Serif JP", serif; font-size: 20px; margin-left:15%; font-weight: 500;}
.style_name span { font-size: 14px;}
.style .container {margin-left:15%; width:20%;}
.style_content {width:68%; margin: 56px 14% 0 18%; display:flex; justify-content: space-between;}
.style_img {width:54%;}
.style_img img {width:100%}
.style_sentence {width:323px; margin: 0 5px;}
.style_read { font-family: "Noto Serif JP", serif; font-size: 14px; line-height:26px; margin:98px 0 24px; font-weight: 500;}
.style_text { font-family: "Noto Sans JP", sans-serif; font-size: 10px; line-height:22px; }
.style_sentence .btn {width: 95px; display: flex; justify-content:space-evenly; align-items:center;  border-radius:50px; margin: 30px 0 40px auto; padding:7px 7px 7px 14px; gap: 4px;}
.style_sentence .btn p { font-family: "Noto Sans JP", sans-serif; font-size: 8px;}
.credit {font-family: "EB Garamond", serif; font-size: 10px; line-height:16px;}
.credit span {text-decoration: underline; text-decoration-thickness: 1px;}
.style_deco {position: absolute; display: flex; align-items:center; width:4%;}

.style._01, .style._03 { background-color:#F8F8F8;}
.style._01 .style_sentence .btn {background-color:#7297BC}
.style._01 {border-left: solid 10px #7297BC; box-sizing: border-box;}
.style._01 .style_deco {left:2%;}
.style._02 .style_sentence .btn {background-color:#89B4B4}
.style._02 {border-right: solid 10px #89B4B4; box-sizing: border-box;}
.style._02 .style_deco {right:2%;}
.style._02 .style_content {flex-direction: row-reverse;}
.style._03 .style_sentence .btn {background-color:#CEAABB}
.style._03 {border-left: solid 10px #CEAABB; box-sizing: border-box;}
.style._03 .style_deco {left:2%;}

.item_list {margin: 100px auto 66px; width:25%;}
.item_list a p{ font-family: "Noto Sans JP", sans-serif; font-size: 12px;  padding:24px; text-align: center; border: solid 1px #000;}
.banner {display: flex; justify-content: space-between; width:64%; margin: 0 auto}
.banner img{max-width:29vw;}
.staff_credit {width:64%; margin: 100px auto; }

.kv_fade_up {opacity: 1; transform: translateY(0); transition: 1.6s ease opacity, 1.6s ease transform; transition-delay: 0.5s;}


@media (max-width: 750px) {
html { scroll-padding-top: calc(56px + 30px);}
.kv_fade._deco { top: -2.92vw; left: 3.98vw; width:21.27vw;}
.kv_fade._read ._01, .kv_fade._read ._02 { font-size: 3.19vw; line-height: 5.85vw;}
.kv_fade._read { top:11.96vw; left:0; width:100%;}
.kv_fade._read ._line { margin: 3.19vw auto; width: 7.97vw;}
.kv_fade._title { top: 39vw; width: 100%; left:0; display: flex; justify-content:center;}
.kv_fade._title img {width: 66.48vw;}
.read p { margin: 30px auto 50px; font-size: 10px; line-height: 22px;}
.profile { width:85%; margin: 0 auto 69px;}
.profile_li {flex-flow: column; gap:18px;}
.profile_title h3 { padding-right: 12px; font-size: 14px;}
.profile_title p { padding-left: 12px; font-size: 10px;}
.profile_li li { width: 100%; margin: 0 auto;}
.style {padding:113px 0 60px;}
.style h3 { font-size: 40px; margin-left:10%;}
.style h3 span {font-size: 16px; padding-right:11px;}
.style_name {font-size: 16px; margin-left:10%;}
.style_name span { font-size: 10px;}
.style .container {margin-left:10%; width:50%;}
.style_content {width:100%; margin: 40px 0 0; flex-direction: column;}
.style_img { width:90%; margin-left:auto;}
.style_sentence {width:80%; margin: 0 auto;}
.style_read {font-size: 14px; line-height:26px; margin:40px 0 24px;}
.style_deco {display:block; width:10%; left:0; margin-left:auto;}
.style._01 {border-left: solid 6px #7297BC; box-sizing: border-box; padding-top:34px;}
.style._01 .style_deco {top:-19px; right: 5%; }
.style._02 {border-left: solid 6px #89B4B4; box-sizing: border-box; border-right:none;}
.style._02 .style_deco {top:60px; right: 5%; }
.style._02 .style_content {flex-direction: column;}
.style._03 {border-left: solid 6px #CEAABB; box-sizing: border-box;}
.style._03 .style_deco {top:60px; right: 5%; }
.item_list {margin: 60px auto; width:88%;}
.banner {flex-direction: column; gap:30px; width:88%;}
.banner img{max-width:100%;}
.staff_credit {width:88%; margin: 60px auto; }
}

@media screen and (min-width:750px) and ( max-width:1024px) {
.read p { margin: 30px auto 50px; }
.profile_li {flex-flow: column; gap:18px;}
.profile_li li { width: 100%; margin: 0 auto;}
.style_content{width:93%; margin: 56px 3% 0 4%;}
.style h3 {margin-left:4%;}
.style_name {margin-left:4%;}
.style .container {margin-left:4%; width:40%;}
.item_list, .banner, .staff_credit {width:80%;}
}

@media screen and (min-width:600px) and ( max-width:1024px) {
.profile_content {align-items:center}
}

@media (max-width: 370px) {
  .view_min370{ display: none;}
}

@media (max-width: 350px) {
.read p { font-size:10px; }
}

@media (max-width: 330px) {
.view_min330{ display: none;}
.kv_fade._deco { width: 65px;}
.kv_fade._read { font-size: 13px; }
}

.container {
  position: relative;
  width: 100%;
  height: 50px; /* この高さは調整可能です */
  overflow: hidden; /* アニメーションの外側部分を非表示にします */
}

.base-line {
  position: absolute;
  width: 100%;
  height: 2px; /* 下線の太さ */
  top: 50%; /* コンテナの中心に配置 */
  transform: translateY(-50%);
}

@keyframes slideIn {
  from {
    left: -100%;
    width: 100%;
  }
  to {
    left: 100%;
    width: 100%;
  }
}

.animated-line {
  position: absolute;
  height: 2px; /* 上線の太さ、下線と同じにしています */
  background-color: black;
  top: 50%; /* コンテナの中心に配置 */
  transform: translateY(-50%);
  animation: 5s slideIn 1s ease-in-out infinite; /* アニメーションの時間とタイプを指定します */
}

.fade_up { opacity: 0; transition: .8s ease opacity,.8s ease transform; transform: translateY(24px); transition-delay: .25s;}
.fade_up.is_active {  opacity: 1; transform: translate(0);}

.fade_in { opacity: 0; transition: .8s ease opacity; transition-delay: .25s;}
.fade_in.is_active {  opacity: 1;}

.fade_in_right  { opacity: 0; transition: .8s ease opacity,.8s ease transform; transform: translateX(24px); transition-delay: .25s;}
.fade_in_right.is_active { opacity: 1; transform: translate(0);}

.fade_in_left  { opacity: 0; transition: .8s ease opacity,.8s ease transform; transform: translateX(-24px); transition-delay: .25s;}
.fade_in_left.is_active { opacity: 1; transform: translate(0);}

.fade_delay_1 { transition-delay: .25s; }
.fade_delay_2 { transition-delay: .5s; }
.fade_delay_3 { transition-delay: .75s; }

#triger_murayama, #triger_fukuda, #triger_sato { cursor: pointer; }