@charset "utf-8";

/*========================

2nd_page_template

========================*/

/*---------------------------------------------
main
---------------------------------------------*/
#main {
 display:flex;
}

#main #main_left {
 /*height:100vh;*/
 min-width:260px;
 position:relative;
}

#main #main_cont {
 display: flex;
 flex-direction: column;
 flex:1;
 width: calc(100% - 290px);
 row-gap:20px;
 padding: 0 0 30px 30px;
}

#main #main_cont .section {
 align-items:center
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:start;
}

#main #main_cont .section .section_title {
 background-color:var(--white);
}

.section .section_cont {
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 padding:0 50px 50px;
 row-gap:20px;
}

.section .section_cont p.lead {
 font-size:1.6rem;
 text-align:center;
 line-height:1.6;
}

/*---------------------------------------------
main_visual
---------------------------------------------*/
#main_visual {
 background-color:var(--white);
 border-radius:0 0 0 80px;
 height:380px;
 position:relative;
 align-items: center;
 flex: 0 0 380px;
 display: flex;
 justify-content: start;
 position: relative;
 z-index: 1;
 width: 100%;
}

#main_visual #main_visual_cont {
 border-radius:0 0 0 80px;
 position:absolute;
 height:380px;
 width:100%;
 top:0;
 opacity: 0;
 -webkit-transition: opacity 3s;
 transition: opacity 3s;
}

#main_visual #main_visual_cont.lazyloaded {
 opacity:1;
}

#main_visual #main_visual_cont img {
 border-radius:0 0 0 80px;
 height:480px;
 object-fit:cover;
 width:100%;
}

#main_visual h2.left_title {
 position:relative;
 margin-bottom:-40px;
 padding: 30px 30px 30px 50px;
 display:flex;
 align-items:center;
 justify-content:start;
 z-index:3;
}

#main_visual h2.left_title:before {
 background-color:var(--white);
 border-radius:0 50px 50px 0;
 content:" ";
 left:0;
 height:100%;
 position:absolute;
 width:calc(100% + 20px);
 opacity:1;
 z-index:1;
}

#main_visual h2.left_title span {
 color:var(--sub);
 font-size:calc(1.6rem + ((1vw - 0.48rem) * 0.6944));
 font-weight:600;
 position:relative;
 z-index:3;
}

/*--- section_title ---*/

.section .section_title h2 {
 align-items: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 50px 0 100px;
 position: relative;
 width:100%;
}

.section .section_title h2 span {
 font-size: 2.6rem;
 font-weight: 600;
 line-height: 1.3;
 text-align: center;
}

.section .section_title h2 span.en {
 color: var(--gray_cc);
 font-size: 1.4rem;
 font-weight: 600;
 padding-top: 15px;
}

.section .section_title h2:after {
 background-image: linear-gradient(90deg, rgba(18, 143, 205, 1) 0, rgba(18, 143, 205, 1) 33%, rgba(254, 229, 6, 1) 33%, rgba(254, 229, 6, 1) 66%, rgba(86, 193, 32, 1) 66%, rgba(86, 193, 32, 1) 100%);
 content: " ";
 height: 5px;
 width: 200px;
 left: 50%;
 bottom: 60px;
 margin-left: -100px;
 position: absolute;
}

/*---------------------------------------------
left_nav
---------------------------------------------*/
#left_nav {
 height:100%;
 padding-bottom:30px;
 position:relative;
 width:260px;
 transition: transform 0.5s ease, top 0.5s ease;
 transform: translateY(0);
 overflow-x: hidden;
}

#left_nav.fixed {
 position:fixed;
 top:0;
 height:100%;
 overflow-y: scroll;
}

#left_nav #left_nav_cont {
 background-color:var(--yellow);
 border-radius:0 0 20px 0;
 padding:20px 20px 50px;
 position:relative;
}

#left_nav .symbol {
 display: flex;
 justify-content: center;
 margin-top: -40px;
 margin-left: -20px;
 position:relative;
 z-index:2;
}

#left_nav .symbol img {
 aspect-ratio: 260 / 173;
 height:auto;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:130px;
}

#left_nav .symbol img.lazyloaded {
 opacity:1;
}