@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Spartan:wght@500&display=swap');

body, .font_sans-serif{font-family: 'Spartan', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important}

.linkStyle{color: #82D8A4}

body{position: relative}
footer, #top_cms, #info_map{position: relative;z-index: 1}
#wrap{position: relative;z-index: 2}
#fakeloader, #main_img{background: linear-gradient(to bottom right, #00277F, #5FAB9B)}
body, .txt_color_nomal{color: #333!important}
#wrap{background-color: transparent}
header{display:-webkit-box;display:-moz-box;display:-ms-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content: center;align-items: center;flex-direction: row;}
header .grid_3 a[href="page08.aspx"], #info_map .foot_tel_bt a[href="page08.aspx"]{display: none}
header .grid_3{display: none}
header{position: absolute;z-index: 99;width: 100%;top: 0;left: 0}
header .header, header .header .txt_color_nomal{max-width: 100%!important;color: #fff}
header .header{width: 30%!important;padding-top: 0}
#fixed_right_banner{top: 120px}
#main_menu{width: 70%!important;padding: 20px 0;margin: 0}
#main_menu, #main_menu.fixed{transition-property: background}
#main_menu .menu_title{display: none}
header #logo{width: 100%!important;margin: 0}
.button_container span{box-shadow: none;background-color: #82D8A4}
#main_img, #main_img2{height: 100vh;margin-top: 0!important}
#main_img h2{right: 50px;bottom: 150px;width: calc(100% - 100px);opacity: 0;transform: translateX(20px);transition: 1s}
#main_img h2.active{opacity: 1;transform: translateX(0)}
#main_menu.fixed{background-color: rgba(0,39,127,0.9)!important;width: 100%!important}
#main_menu.fixed ul{border-color: transparent}
#main_menu ul li a, #main_menu ul .txt_color2{color: #fff}
#main_menu.fixed ul li a, #main_menu.fixed ul .txt_color2{color: #fff}
#info_map{background-color: rgba(242,242,237,0.4)}
#info_map .border_color2{border-color: #00277F}
#wrap.txt_white, #info_map .txt_white{color: #333}
#aisatsu h2, #top_contents h2{position: relative;padding-bottom: 30px;margin-bottom: 40px;}
#aisatsu .intro_title span{opacity: 0;display: inline-block;transform: translateX(10px);transition: 0.3s}
#aisatsu .intro_title span.active{opacity: 1;transform: translateX(0)}
#aisatsu h2::before, #aisatsu h2::after, #top_contents h2::before, #top_contents h2::after{position: absolute;content: "";left: 0;right: 0;margin: auto}
#aisatsu h2::before, #aisatsu h2::after{background-color: #fff}
#top_contents  .con_img{top: -50px}
#top_contents .con_box .con_img::before{position: absolute;content: "";width: 100%;height: 100%;top: 0;background-color: #fff;display: block;transition: 1.5s cubic-bezier(0,1.15,.63,.99)}
#top_contents .contents1  .con_img::before{left: 0}
#top_contents .contents2  .con_img::before{right: 0}
#top_contents .contents3  .con_img::before{left}
#top_contents .con_box.active .con_img::before{width: 0;opacity: 0}
#top_contents .con_txt_wrap{z-index: 1;opacity: 0;transition: 1s;transform: translateY(20px)}
#top_contents .con_txt_wrap::before{position: absolute;font-size: 200px;top: 0;line-height: 1;color: #fff;opacity: 0.1;z-index: -1}
#top_contents .contents1 .con_txt_wrap::before{content: "01";right: 50px}
#top_contents .contents2 .con_txt_wrap::before{content: "02";left: 50px}
#top_contents .contents3 .con_txt_wrap::before{content: "03";right: 50px}
#top_contents .contents1 .con_img{opacity: 0;transition: 1s;transform: translateX(-20px)}
#top_contents .contents2 .con_img{opacity: 0;transition: 1s;transform: translateX(20px)}
#top_contents .contents3 .con_img{opacity: 0;transition: 1s;transform: translateX(-20px)}
#top_contents .con_box.active .con_txt_wrap, #top_contents .contents1.active .con_img, #top_contents .contents2.active .con_img, #top_contents .contents3.active .con_img{opacity: 1;transform: translateX(0)}
/**
#top_contents h2::before, #top_contents h2::after{background-color: #00277F}
**/
#aisatsu h2::before, #top_contents h2::before{height: 1px;width: 60px;bottom: 0}
#aisatsu h2::after, #top_contents h2::after{height: 30px;width: 1px;bottom: -15px}
/**
#top_contents h2{color: #00277F}
#top_contents p{color: #333}
#top_contents .contents_box{background-color: #F7F7F5;overflow: hidden;padding-top: 80px}
.contents_box::after, .contents_box2::before, .contents_box2::after{display: none}
.contents_box::before{position: absolute;text-align: center;color: #fff;width: 100px;height: 100px;line-height: 140px;left: 0;right: 0;top: -50px;margin: auto;z-index: 1;background-color: #00277F;border-radius: 50%;font-size: 10px}
#contents1 .contents_box::before{content: "01"}
#contents2 .contents_box::before{content: "02"}
#contents3 .contents_box::before{content: "03"}
**/
#top_cms .cms_title h2::before, #top_cms .cms_title h2::after{background-color: #00277F}
footer{background-color: #333;padding-bottom: 50px!important;border-top: none!important}
#foot_txt{color: #fff}

#main_img2{max-width: 100%;height: 400px}
#main_img2 .page_title{background: linear-gradient(to bottom right, rgba(0,39,127,0.8), rgba(95,171,155,0.8))}
#main_img2 h2{background-color: transparent;border: solid 1px #fff;font-size: 16px;top: 55%}
#main_img2 h2 span{font-size: 30px;margin-top: 10px}
#main_img2 h2::before{position: absolute;content: "";width: 1px;height: 40px;left: 0;right: 0;bottom: -20px;background-color: #fff;margin: auto}
#main_img2{background-position: center}

#top_cms .cms_box .border_white{text-align: left}
.effect{color: #00277F}

.pager li a{background-color: #F2F2ED}
.cate_list .txt_color2{color: #00277F}
.cate_list .border_color2{border-color: #00277F}
.cms_5-b .cate_box .open_bt .box_title1::before, #cms_5-b .cate_box .open_bt .box_title1::before{color: #00277F!important}
#page9 #contents .txt_color2{color: #00277F}
#page10 #contents .txt_color2{color: #00277F;padding-left: 0;display: block}
#page10 #contents .txt_color2::after{content: "-"}


/** tablet 780 **/
@media screen and (max-width: 768px){
#f_menu ul li a{letter-spacing: 0}
#main_img2 h2{padding-left: 0;padding-right: 0;width: 400px;}
#logo2{width: 100%!important;text-align: center}
#main_img{height: 70vw}
footer .grid_9{width: 100%!important}
#main_menu ul li a{letter-spacing: 1px}
#main_img h2{bottom: 50px}
#main_img2{height: 350px}
#top_contents .con_img{height: 300px;top: 0;transform: none!important}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
body::before{width: calc(100% - 30px)}
header .header{width: 100%!important;}
header #logo{text-align: left;padding-left: 20px;padding-top: 20px}
#main_img h2{right: 20px;bottom: 20px;width: calc(100% - 40px)}
#main_img2{height: 300px}
#main_img2 h2{padding-left: 0;padding-right: 0;width: 300px!important}
#main_img2 h2 span{font-size: 24px}
#logo{width: 100%!important;margin: 0;margin-bottom: 30px;}
#top_contents .con_img{height: 50vw}
#top_contents .con_txt_wrap::before{font-size: 130px}
#top_contents .contents1 .con_txt_wrap::before{right: 20px}
#top_contents .contents2 .con_txt_wrap::before{right: 20px;left: auto}
#top_contents .contents3 .con_txt_wrap::before{right: 20px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
body, .font_sans-serif{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important}
}