@charset "UTF-8";
/* header */
#header { border-bottom: 1px solid rgba(255, 255, 255, .3); position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } 
#header.scroll,
#header.on,
.sub #header,
#header.open { border-bottom: 1px solid #ddd; background: #fff; } 
#header.scroll .logo .logo_b,
#header.on .logo .logo_b,
.sub #header .logo .logo_b,
#header.open .logo .logo_b { display: inline-block; } 
#header.scroll .logo .logo_w,
#header.on .logo .logo_w,
.sub #header .logo .logo_w,
#header.open .logo .logo_w { display: none; } 
#header.scroll #top_nav>ul>li>a,
#header.on #top_nav>ul>li>a,
.sub #header #top_nav>ul>li>a,
#header.open #top_nav>ul>li>a { color: #11172b; } 
#header.scroll #top_nav>ul>li.active>a:after,
#header.on #top_nav>ul>li.active>a:after,
.sub #header #top_nav>ul>li.active>a:after,
#header.open #top_nav>ul>li.active>a:after { width: 100%; } 
#header.scroll #top_nav>ul>li .top_nav_sub>li:hover>a,
#header.on #top_nav>ul>li .top_nav_sub>li:hover>a,
.sub #header #top_nav>ul>li .top_nav_sub>li:hover>a,
#header.open #top_nav>ul>li .top_nav_sub>li:hover>a { color: #00879e; text-decoration: underline #00879e; text-underline-offset: 0.5em; } 
#header .header_inner:after { display: block; clear: both; content: ""; } 
#header .logo { position: absolute; top: 50%; left: 35px; } 
#header .logo a { display: inline-block; } 
#header .logo .logo_b { display: none; } 
#header .logo .logo_w { display: inline-block; } 
#header #top_nav li { position: relative; line-height: 150%; } 
#header #top_nav .top_nav_sub { display: none; } 
#header #back { display: none; position: absolute; } 
@media all and (min-width:1025px){
 #header .header_inner { margin: 0 auto; position: relative; z-index: 1; max-width: calc(1280px + 35px + 35px); } 
 #header .logo { transform: translateY(-60%); } 
 #header .logo img { width: 100%; } 
 #header #top_nav_btn { display: none; } 
 #header #top_nav { float: right; } 
 #header #top_nav>ul:after { display: block; clear: both; content: ""; } 
 #header #top_nav>ul>li { float: left; } 
 #header #top_nav>ul>li>a { display: block; padding: 44px 55px; position: relative; font-size: 1.2em; font-weight: 400; color: #fff; } 
 #header #top_nav>ul>li>a:after { display: block; position: absolute; bottom: 0; left: 50%; width: 0; height: 8px; background: #00879e; transition: all 0.3s ease-out; content: ""; transform: translateX(-50%); } 
 #header #top_nav>ul>li.active>a:after { width: 100%; } 
 #header #top_nav .top_nav_sub { border-top: 1px solid #ccc; position: absolute; top: 100%; right: 0; left: 0; background: #fff; } 
 #header #top_nav>ul>li.active .top_nav_sub { background: #f9f9f9; } 
 #header #top_nav>ul>li .top_nav_sub>li>a { display: block; padding: 15px; } 
 #header #top_nav>ul>li .top_nav_sub>li:hover>a { } 
 #header #top_nav .top_nav_sub_btn { display: none}
 #header #back { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; top: 100%; right: 0; left: 0; background: #fff; } 
 }
@media all and (max-width:1024px){
 #header { height: 70px; } 
 #header .logo { left: 20px; transform: translate(0, -60%); } 
 #header .logo img { width: 80%; } 
 #header #top_nav_btn { overflow: hidden; position: absolute; top: 50%; right: 20px; width: 28px; height: 28px; text-indent: -9999px; transform: translateY(-50%); } 
 #header #top_nav_btn>span { display: block; position: absolute; left: 50%; width: 100%; height: 2px; background: #fff; transition: all 0.3s ease-out; transform: translate(-50%, -50%); } 
 #header.scroll #top_nav_btn>span,
 #header.on #top_nav_btn>span,
 .sub #header #top_nav_btn>span,
 #header.open #top_nav_btn>span { background: #11172b; } 
 #header #top_nav_btn>span:nth-of-type(1) { top: 2px; } 
 #header #top_nav_btn>span:nth-of-type(2) { top: 12px; } 
 #header #top_nav_btn>span:nth-of-type(3) { top: 22px; } 
 #header.open #top_nav_btn>span:nth-of-type(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); } 
 #header.open #top_nav_btn>span:nth-of-type(2) { left: 100%; opacity: 0; } 
 #header.open #top_nav_btn>span:nth-of-type(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } 
 #header #top_nav { display: none; position: fixed; top: 70px; right: -320px; bottom: 0; z-index: 999; width: 100%; max-width: 320px; background: #fff; transition: all 0.3s ease-out; opacity: 0; } 
 #header #top_nav_btn:hover~#top_nav,
 #header #top_nav_btn:focus~#top_nav { display: block; } 
 #header.open #top_nav { display: block; right: 0; opacity: 1; } 
 #header #top_nav li a { display: block; padding: 0 35px 0 15px; position: relative; font-size: 1.2em; } 
 #header #top_nav>ul>li>a { height: 50px; font-size: 1.4em; line-height: 50px; } 
 #header #top_nav .top_nav_sub>li>a { padding: 16px 18px; background: #f9f9f9; color: #11172b; } 
 #header #top_nav>ul>li .top_nav_sub>li:hover>a { background: #333; color: #bbb; } 
 #header #top_nav li>.top_nav_sub_btn { overflow: hidden; position: absolute; top: 12px; right: 20px; width: 24px; height: 24px; background: url(/history/img/common/ico_select_arrow.png) no-repeat center center; text-indent: -9999px; } 
 #header #top_nav li.active>.top_nav_sub_btn { transform: rotate(180deg); } 
 #header #back { position: fixed; top: 70px; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .6); } 
 }
@media all and (max-width:768px){
 #header #top_nav>ul>li .top_nav_sub>li:hover>a { background: #333; color: #bbb; } 
 }
/* sub_visual */
#sub_visual { overflow: hidden; position: relative; height: 370px; background: url(/history/img/common/bg_sub_visual.jpg) no-repeat center center / cover; } 
#sub_visual:before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .6); content: ""; } 
#sub_visual h2 { position: absolute; top: 50%; left: 50%; font-size: 3em; font-weight: normal; color: #fff; transform: translate(-50%, -50%); } 
@media all and (min-width:1025px) { } 
@media all and (max-width:1024px){
 #sub_visual { height: 150px; } 
 }
@media all and (max-width:768px){
 #sub_visual h2 { font-size: 2.4em; } 
 }
/* side_nav */
#side_nav { } 
#side_nav.mt { margin-top: 150px; padding: 0 20px; } 
#side_nav .side_nav_inner { margin: 0 auto; border: 1px solid #eee; max-width: 1280px; background: #f9f9f9; border-radius: 10px; } 
#side_nav .side_nav_inner>ul:after { display: block; clear: both; content: ""; } 
#side_nav .side_nav_inner>ul>li { position: relative; width: 260px; float: left; font-size: 1.1em; color: #424242; } 
#side_nav .side_nav_inner>ul>li.home { width: unset; } 
#side_nav .side_nav_inner>ul>li.home>a { display: block; overflow: hidden; position: relative; width: 70px; height: 60px; background: url(/history/img/common/ico_bread_home.svg) no-repeat center center; text-indent: -9999px; } 
#side_nav .side_nav_inner>ul>li.home>a::after { display: block; border-right: 1px solid #d8d8d8; position: absolute; top: 50%; right: 0; width: 1px; height: 20px; content: ''; transform: translate(0, -50%); } 
#side_nav .side_nav_inner>ul>li>button { display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 20px; position: relative; width: 100%; height: 60px; text-align: left; } 
#side_nav .side_nav_inner>ul>li>button::after { display: block; margin-left: 10px; border-right: 1px solid #d8d8d8; width: 40px; height: 20px; background-image: url(/history/img/common/ico_angle.svg); background-repeat: no-repeat; background-position: center right 20px; background-size: 15px; content: ""; } 
#side_nav .side_nav_sub { display: none; border: 1px solid #d8d8d8; position: absolute; top: 100%; right: 0; left: 0; z-index: 2; background: #fff; } 
#side_nav .side_nav_sub>li>a { display: block; padding: 20px 20px; border-top: 1px solid #d8d8d8; font-size: 0.9em; line-height: 150%; } 
#side_nav .side_nav_sub>li:first-child>a { border-top: unset; } 
#side_nav .side_nav_inner>ul>li:hover .side_nav_sub { display: block; } 
#side_nav .side_nav_sub>li>a:hover { color: #1d1d1d; } 
@media all and (min-width:1025px) { } 
@media all and (max-width:1024px){
 #side_nav.mt { margin-top: 90px; } 
 }
@media all and (max-width:768px){
 #side_nav .side_nav_inner { border: unset; max-width: unset; background: unset; border-radius: unset; } 
 #side_nav .side_nav_inner>ul { display: flex; align-items: center; } 
 #side_nav .side_nav_inner>ul>li.home { } 
 #side_nav .side_nav_inner>ul>li.home>a { width: 15px; height: 15px; background-size: 15px; } 
 #side_nav .side_nav_inner>ul>li { width: unset; } 
 #side_nav .side_nav_inner>ul>li>a { width: unset; height: unset; } 
 #side_nav .side_nav_inner>ul>li>button { display: flex; align-items: center; padding: 0 0 0 10px; width: unset; height: unset; } 
 #side_nav .side_nav_inner>ul>li.home>a::after { display: none; } 
 #side_nav .side_nav_inner>ul>li>button::after { margin-left: unset; position: unset; width: 10px; height: 10px; background-image: unset; transform: unset; } 
 #side_nav .side_nav_inner>ul>li:last-child>button::after { border-right: unset; } 
 #side_nav .side_nav_sub { display: none !important; } 
 }
/* contents */
#contents { padding: 50px 20px 130px; line-height: 150%; } 
#contents .contents_inner { margin: 0 auto; max-width: 1280px; } 
#contents .sub_tit { padding-bottom: 20px; position: relative; font-size: 2.5em; line-height: 150%; color: #11172b; } 
#contents .sub_tit::after { margin: 0 auto; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 0.1em; background: linear-gradient(-45deg, #fff 25%, #ddd 0, #ddd 50%, #fff 0, #fff 75%, #ddd 0); -webkit-background-size: 3rem 3rem; background-size: 0.1em 0.1em; content: ""; } 
#contents .sub_txt { margin-top: 40px; margin-bottom: 70px; font-size: 1.1em; line-height: 1.8; } 
#contents .point_txt { margin-top: 40px; margin-bottom: 30px; font-size: 1.4em; font-weight: bold; line-height: 1.6; color: #11172b; } 
@media all and (min-width:1025px) { } 
@media all and (max-width:1024px){
 #contents { padding: 30px 20px 100px; } 
 #contents .sub_txt { margin-top: 30px; margin-bottom: 30px; } 
 #contents .point_txt { margin-top: 30px; margin-bottom: 30px; } 
 }
@media all and (max-width:768px){
 #contents { padding: 10px 20px 60px; } 
 #contents .sub_txt { margin-top: 20px; margin-bottom: 20px; } 
 #contents .point_txt { margin-top: 20px; margin-bottom: 20px; } 
 }
/* footer */
#footer { border-top: 1px solid #cdd1d5; background: #fff; } 
#footer.pt { padding-top: 50px; } 
#footer.pb { padding-bottom: 55px; } 
#footer .footer_inner { margin: 0 auto; padding: 0 35px; max-width: calc(1280px + 35px + 35px); } 
#footer .footer_inner:after { display: block; clear: both; content: ""; } 
#footer .footer_logo { margin-bottom: 40px; } 
#footer .footer_info { display: flex; flex-direction: column; row-gap: 20px; } 
#footer .footer_info p { font-size: 1.1em; line-height: 150%; color: #11172b; } 
#footer .copyright { margin-top: 65px; padding-top: 35px; border-top: 1px solid #ddd; } 
#footer .copyright p { font-size: 1em; line-height: 150%; color: #464c53; } 
@media all and (min-width:1025px) { } 
@media all and (max-width:1024px){
 #footer .copyright { margin-top: 40px; padding-top: 40px; } 
 }
@media all and (max-width:768px){
 #footer.pt { padding-top: 30px; } 
 #footer.pb { padding-bottom: 30px; } 
 #footer .footer_inner { padding: 0 20px; } 
 #footer .footer_logo { margin-bottom: 20px; width: 150px; } 
 #footer .footer_info { row-gap: 10px; } 
 #footer .copyright { margin-top: 20px; padding-top: 20px; } 
 }