@charset "UTF-8";




@media screen and (min-width: 768px) {
  main { font-size: 16px; line-height: 2; overflow: hidden; }
}


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


.h-years_b { border:20px solid #00A2CA; margin:0; padding:0; }
.h-years_b img { vertical-align:top; }

#h-years_mv { padding: 150px 30px 0; min-height: 770px;
              background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,1) 100%), url(../img/mv_bg.jpg) no-repeat top center / cover;}

.h-years_mv_hdg { text-align: center; margin-bottom: 70px; }
.h-years_mv_hdg span { display: inline-block; font-family: sofia-pro, sans-serif; color: #FFD201; padding-bottom: 5px; border-bottom: 2px solid #FFD201; margin-bottom: 40px; }
.h-years_mv_hdg picture { display: block; margin: 0 auto; max-width: 930px; }
.h-years_mv_hdg picture img,
.h-years_mv_hdg picture source { width: 100%; }

#h-years_prologue { max-width: 1032px; margin: -300px auto  65px; padding-top: 120px; text-align: center;
                    background: url(../img/prologue_bg.svg) no-repeat top center / 100% auto; }
#h-years_prologue h2 { position: relative; font-size: 22px; max-width: 446px; margin: 0 auto 25px; color: #00A2CA; }
#h-years_prologue h2::before,
#h-years_prologue h2::after { content: ""; position: absolute; top: calc(50% - 3px); width: 28%; height: 6px; display: block; border-top: 1px solid #00A2CA; border-bottom: 1px solid #00A2CA; }
#h-years_prologue h2::before { left: 0; }
#h-years_prologue h2::after { right: 0; }
#h-years_prologue p { font-size: 16px; line-height: 2.3; font-weight:bold; }

.chapter_nav { max-width: 1400px; margin: 0 auto; padding: 0 20px; transition:0.6s; bottom: -100px;
               background: linear-gradient(to right,  rgba(166,237,255,0) 0%,rgba(224,250,255,1) 18%,rgba(166,237,255,1) 85%,rgba(224,250,255,0) 100%); }
.chapter_nav ul { max-width: 1200px; margin: 0 auto; display:flex; justify-content: space-between; align-items: flex-start; } 
.chapter_nav li { width:calc(100% / 6); text-align:center; }
.chapter_nav li a { display: block; padding:25px 0; font-size:14px; text-decoration:none; line-height:1.4; font-weight:bold; color:#888888; transition:0.3s; }
.chapter_nav_num { color: #aaaaaa; margin-bottom:5px; }
  .chapter_nav li:nth-child(5) .chapter_nav_num { margin:5px 0 7px; }
.chapter_nav_num span { font-size:19px; margin-left:3px; }

.chapter_nav li a.active { color:#00A2CA; }
.chapter_nav li a.active .chapter_nav_num { color: #FFD201; }

/*　追従　*/
.move_start { width: 100%; position:fixed; bottom:0; left:0; right: 0; margin: auto; z-index:3; }
.chapter_nav.move_start { max-width: 100%; background:rgba(224,250,255,0.9); }
.chapter_nav.move_start li a { padding:10px 0; }


.chapter_set{ padding-top:100px; }
.chapter_hdg { max-width: 1260px; margin: 0 auto; padding: 0 30px; display: flex; justify-content: space-between; align-items: flex-start; }
  #chapter2 .chapter_hdg,
  #chapter4 .chapter_hdg,
  #chapter6 .chapter_hdg { flex-direction: row-reverse; }
.chapter_hdg picture { max-width: 500px; width:41.67%; }
.chapter_inner { max-width: 630px; width: 52.5%; padding: 80px; min-height: 600px; color: #00A2CA; margin-top: 80px;
                 background: linear-gradient(to right,  rgba(224,250,255,1) 0%,rgba(166,237,255,1) 100%); }
  #chapter6 .chapter_inner { background: linear-gradient(to right, #F9FFE0 0%,#FFF6A6 100%); }
.chapter_num { color: #FFD201; font-size: 26px; font-weight: bold; font-family: sofia-pro, sans-serif; margin-bottom: 25px; }
.chapter_num span { font-size: 35px; margin-left: 5px; }
.chapter_inner h2 { font-size: 44px; line-height: 1.3; margin-bottom: 20px; font-feature-settings: "palt"; }
.chapter_inner p { font-weight: bold; }


.chapter_cont {  }
.chapter_cont_inner { max-width: 1260px; margin: -100px auto 0; padding:200px 60px 70px; }
  /* bgset */
  #chapter1 .chapter_cont { background: linear-gradient(to right,#fff 0%,#fff 49.99%,#EFEACE 50%,#EFEACE 100%); }
  #chapter2 .chapter_cont { background: linear-gradient(to left,#fff 0%,#fff 49.99%,#E8FAFD 50%,#E8FAFD 100%); }
  #chapter3 .chapter_cont { background: linear-gradient(to right,#fff 0%,#fff 49.99%,#9FE8FF 50%,#9FE8FF 100%); }
  #chapter4 .chapter_cont { background: linear-gradient(to left,#fff 0%,#fff 49.99%,#BCEAFE 50%,#BCEAFE 100%); }
  #chapter5 .chapter_cont { background: linear-gradient(to right,#fff 0%,#fff 49.99%,#B7DBF2 50%,#B7DBF2 100%); }
  #chapter1 .chapter_cont_inner { background: linear-gradient(to right,#fff 170px,#F9F6E8 171px,#EFEACE 100%); }
  #chapter2 .chapter_cont_inner { background: linear-gradient(to left,#fff 170px,#C4F1F7 171px,#E8FAFD 100%); }
  #chapter3 .chapter_cont_inner { background: linear-gradient(to right,#fff 170px,#DBF6FF 171px,#9FE8FF 100%); }
  #chapter4 .chapter_cont_inner { background: linear-gradient(to left,#fff 170px,#83CDED 171px,#BCEAFE 100%); }
  #chapter5 .chapter_cont_inner { background: linear-gradient(to right,#fff 170px,#E7F6FF 171px,#B7DBF2 100%); }
.history_cont { display: flex; justify-content: space-between; flex-wrap: wrap; }
.history_cont + .history_cont { margin-top:60px; }
  #chapter1 .history_cont, #chapter3 .history_cont, #chapter5 .history_cont { flex-direction: row-reverse; }
.history_hdg { width: 51.67%; font-size:26px; color:#00A2CA; margin-bottom:40px; }
.history_txt { width: 51.67%; position: relative; margin-bottom:50px; }
.history_txt p + p { margin-top:20px; }
.history_year { position:absolute; left:-130px; height:100%; padding-right:25px; border-right:1px solid #00A2CA; color:#006FA1; font-weight:bold; font-size:24px; line-height:1.4; }
  #chapter2 .history_year, #chapter4 .history_year { left:initial; right: -130px; padding:0 0 0 25px; border-right:none; border-left:1px solid #00A2CA; }
.history_img { width:30.83%; margin-bottom:50px; }
.history_img figure + figure { margin-top:30px; }
.history_txt_img { width:59.68%; margin:40px auto; }
.history_img figcaption,
.history_txt_img figcaption { text-align:center; font-size:14px; margin-top:20px; line-height:1.6; }

.lyt-col { display: flex; justify-content: space-between; align-items: flex-start; }
.lyt-col > * { width:40%; }


/* hack */
.col1 .history_hdg,
.col1 .history_txt { width: 63.33%; padding-right:5.83%; }
.col1 .history_txt { border-right:1px solid #00A2CA; }
.col2 .history_hdg,
.col2 .history_txt { width: 63.33%; padding-right:23.33%; position:relative; }
.col2 .history_txt { border-right:1px solid #00A2CA; }
.col2 .history_txt .catch { position:absolute; right:5%; top:-8%; width:28%; }
.history_txt.col2 { padding-right:21.17%; position:relative; }
.history_txt.col2 .history_txt_img { position:absolute; width:47%; top:-18%; right:-40px; }

.chapter6_cont { max-width:1460px; margin:-140px auto 0; position:relative; padding:0 30px; }
.chapter6_cont::after { content:""; display: block; width:1px; height:calc(100% - 100px); background-color:#00A2CA; position: absolute; left:50%; top:100px; z-index:-1; clear:both; }
.chapter6_box { width:47.86%; padding:60px; background: linear-gradient(to right,#FFFDED 0%,#F7F5E2 100%); position:relative; }
.chapter6_box + .chapter6_box { margin-top: 40px; }
.chapter6_box::after { content:""; display: block; width: 20px; height: 20px; border-radius: 50%; position:absolute; top:90px; background-color:#FFD201; right:calc(-15px + -3.8%); z-index:1; }
.chapter6_box:nth-child(even) { float:right; margin-top:-400px; }
.chapter6_box:nth-child(even)::after { left: calc(-13px + -3.8%); right:initial; }

.chapter6_hdg { font-size:26px; text-align:center; color:#00A2CA; line-height:1.5; }
.chapter6_hdg::after { content:""; display:block; width:12px; height:1px; margin:20px auto 40px; background-color:#00A2CA; }
.chapter6_box p { margin:30px 0; }
.chapter6_box_img_w { width:84%; margin:0 auto; }
.chapter6_box_img_h { width:60%; margin:0 auto; }
.chapter6_list { background-color:#fff; padding:25px 35px; margin-right: 80px; position:relative; }
.chapter6_list li { padding-left:50px; position:relative; font-weight:bold; }
.chapter6_list li + li { margin-top:15px; }
.chapter6_list li span { position:absolute; top: 0; left:0; display:block; padding:8px; background-color:#FFD201; line-height:1; }
.chapter6_list figure { position:absolute; right:-20%; top:15px; width:35%; }
.chapter6_list figure figcaption { font-size:12px; text-align:center; }

@media screen and (max-width: 1251px) {
  .chapter6_cont { margin:-60px auto 0; padding: 40px; }
  .chapter6_box:nth-child(4) { margin-top:-300px; }
  .chapter6_hdg { font-size:26px; }
  .chapter6_cont::after { height: calc(100% - 170px); top: 130px; }
}

/* hdg animate */
.chapter_inner { transition: initial; /* アニメーションの設定 */ }
.move-up { transform: translateY(0); /* Y軸方向に上に移動させる */ }

/*アニメーション要素のスタイル*/
.animation {
  opacity : 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.load_book { display:none; visibility:hidden; opacity:0; }





@media screen and (max-width: 767px) {

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

.h-years_b { border:10px solid #00A2CA; }

#h-years_mv { padding: 35px 10px 0; min-height: initial;
              background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,1) 100%), url(../img/mv_bg.jpg) no-repeat top center / cover; }

.h-years_mv_hdg { margin-bottom:30px; }
.h-years_mv_hdg span { font-size: 14px; padding-bottom: 5px; margin-bottom: 30px; }
.h-years_mv_hdg picture { max-width: 270px; }

#h-years_prologue { margin: 0 auto 30px; padding: 50px 10px 0; background: url(../img/prologue_bg.svg) no-repeat top center / 150% auto; }
#h-years_prologue h2 { font-size: 15px; max-width: 208px; margin: 0 auto 15px; }
#h-years_prologue h2::before, #h-years_prologue h2::after { width: 23%; top: calc(50% - 1px); height: 4px; }
#h-years_prologue p { font-size: 12px; line-height: 1.8; }

.chapter_nav { background:none; }
.chapter_nav.sp { margin:50px 0 30px; }
.chapter_nav ul { display: block; margin: 0 20px; border-top:1px solid #00A2CA; } 
.chapter_nav li { width: 100%; text-align:left; border-bottom:1px solid #00A2CA; }
.chapter_nav li a { position: relative; padding:15px 0 15px 60px; font-size:12px; }
.chapter_nav_num { width: 46px; font-size: 10px; margin-bottom:0; line-height:1.2; text-align:center; position:absolute; left:5px; top:8px; }
.chapter_nav_num span { display: block; font-size:17px; margin-left:0; }
.chapter_nav li:nth-child(5) .chapter_nav_num { top:11px; font-size:12px; }
.chapter_nav li a { color:#00A2CA; }
.chapter_nav li a .chapter_nav_num { color: #FFD201; }

/*　追従　*/
.move_start { position:inherit; }
.chapter_nav.move_start { background:none; }
.chapter_nav.move_start li a { padding:15px 0 15px 60px; }

.chapter_set{ padding-top:0; margin-top:50px; }
.chapter_hdg { display: block; overflow: hidden; padding:0; position:relative; }
.chapter_hdg picture { display:block; max-width: initial; width:100%; height:100%; }
.chapter_hdg picture img,
.chapter_hdg picture source { width:100%; height:auto; object-fit: cover; }

.chapter_inner { max-width: 310px; width: 100%; padding: 22px; min-height: initial; margin: 20px auto -30px; text-align: center; position:relative; z-index:2; }

.chapter_num { font-size: 14px; margin-bottom: 15px; line-height:1; }
.chapter_num span { font-size: 19px; margin-left: 3px; }
.chapter_inner h2 { font-size: 20px; line-height: 1.6; margin-bottom: 15px; }
.chapter_inner p { font-size: 14px; text-align: left; }

.chapter_cont_inner { margin: -100px 0 0; padding:45px 20px 20px; }
  /* bgset */
  #chapter1 .chapter_cont,
  #chapter2 .chapter_cont,
  #chapter3 .chapter_cont,
  #chapter4 .chapter_cont,
  #chapter5 .chapter_cont { background: none; }
  #chapter1 .chapter_cont_inner { background: linear-gradient(to left,#F9F6E8 0,#EFEACE 100%); }
  #chapter2 .chapter_cont_inner { background: linear-gradient(to left,#C4F1F7 0,#E8FAFD 100%); }
  #chapter3 .chapter_cont_inner { background: linear-gradient(to left,#DBF6FF 0,#9FE8FF 100%); }
  #chapter4 .chapter_cont_inner { background: linear-gradient(to left,#83CDED 0,#BCEAFE 100%); }
  #chapter5 .chapter_cont_inner { background: linear-gradient(to left,#E7F6FF 0,#B7DBF2 100%); }
.history_cont { display: block; }
.history_cont + .history_cont { margin-top:45px; }
.history_hdg { width: 100%; font-size:18px; margin-bottom:20px; text-align:center; }
.history_txt { width: 100%; margin-bottom:20px; padding-left:90px; padding-bottom:5px; }
.history_txt p { font-size:12px; line-height:1.8; }
.history_txt p + p { margin-top:10px; }

.history_year,
#chapter2 .history_year, #chapter4 .history_year { position:absolute; left:0; right: initial; padding:0 16px 0 0; border-right:1px solid #00A2CA; border-left: none; font-size:16px; }

.history_img { width:240px; margin:0 auto 25px; }
.history_img.w170 { width:170px; }
.history_img figure + figure { margin-top:20px; }
.history_txt_img { width:200px; margin:20px auto; }
.history_img figcaption, .history_txt_img figcaption { font-size:10px; margin-top:10px; }

/* hack */
.col1 .history_hdg { width: 100%; padding:0; }
.col1 .history_txt { width: calc(100% - 15px); padding:0 0 0 20px; margin-left:15px; }
.col1 .history_txt { border-right:none; ;border-left:1px solid #00A2CA; }
.col2 .history_hdg { width: 100%; padding:0; }
.col2 .history_txt { width: calc(100% - 15px); padding:0 0 0 20px; margin-left:15px; }
.col2 .history_txt { border-right:none; ;border-left:1px solid #00A2CA; }
.col2 .history_txt .catch { position:initial; width: 45%; }
.history_txt.col2 { padding-right:0; position:relative; }
.history_txt.col2 .history_txt_img { position:initial; width:80%; }

.lyt-col { display: block; }
.lyt-col > * { width:240px; }

.chapter6_cont { margin:-100px 20px 0 35px; padding:0; }
.chapter6_cont::after { height:calc(100% - 40px); left:-15px; top:40px; }
.chapter6_box { width: 100%; padding:30px 20px; }
.chapter6_box + .chapter6_box { margin-top: 20px; }
.chapter6_box::after { width:11px; height: 11px; top:40px; left:-20px; right:initial; }
.chapter6_box:nth-child(even) { float:initial; margin-top:20px; }
.chapter6_box:nth-child(even)::after { left: -20px; }

.chapter6_hdg { font-size:18px; }
.chapter6_hdg::after { margin:15px auto 20px; }
.chapter6_box p { font-size: 12px; margin:20px 0; }
.chapter6_box_img_w { width:260px; }
.chapter6_box_img_h { width:240px; }
.chapter6_list { padding:20px 18px; margin-right:0; }
.chapter6_list li { padding-left:33px; font-size: 11px; }
.chapter6_list li + li { margin-top:10px; }
.chapter6_list li span { top: -2px; padding:5px; }
.chapter6_list figure { position:initial; width:38%; margin:10px auto 0; }
.chapter6_list figure figcaption { font-size:10px; text-align:center; }

.sp_reverse { display: flex; flex-direction: column-reverse; }

.load_book { display: block; opacity: 1; visibility: visible; position:fixed; top:0; left:0; width:100%; height:100%; z-index:400; overflow:hidden;
            background:url(../img/sp_chapter_web.png) no-repeat center center #00A2CA; background-size:300px 526px; }
.load_book_inner { position: absolute; top: 0; bottom: 0; margin: auto; left: calc(50% - 300px); width: 300px; height: 526px; display: block; opacity:0; }
.load_book_inner li { position: relative; }
.load_book_inner li img { position:absolute; width:300px; left: 50%; right:50%; transform-origin:right; opacity:0; }

.wf-active .load_book { animation: rAnimation2 0.7s ease-in forwards; animation-delay: 3.5s; }
.wf-active .load_book_inner { opacity:1; }
.wf-active .load_book_inner li:nth-child(1) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 0s; }
.wf-active .load_book_inner li:nth-child(2) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 0.5s; }
.wf-active .load_book_inner li:nth-child(3) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 1s; }
.wf-active .load_book_inner li:nth-child(4) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 1.5s; }
.wf-active .load_book_inner li:nth-child(5) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 2s; }
.wf-active .load_book_inner li:nth-child(6) img { animation: rAnimation 0.5s ease-out forwards; animation-delay: 2.5s; }

@keyframes rAnimation {
  0% { transform:perspective(500px) rotateY(180deg); opacity:0; width: 500px; }
  100% { transform:perspective(500px) rotateY(0deg); opacity:1; width: 300px; }
}

@keyframes rAnimation2 {
  0% { opacity:1; }
  100% { opacity:0; transform:scale(1.5); display:none; visibility:hidden; }
}


}