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

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

.con_no, .more, #top_cms .cms_title, #contents::before, #intro_txt h2::before{font-family: 'Kufam', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

#intro h2, .con_title, .cate_title{font-weight: 700}


.linkStyle{color: #62d38a}

.svg_box, .svg_box2, #map, #info, #info_title_box{display: none!important}
#loader{top: 0;left: 0;z-index: 1000}
#loader::before, #loader::after{position: absolute;content: "";width: 100%;left: 0;background-color: #349ee0;height: 51%;transition: 1s}
#loader::before{top: 0}
#loader::after{bottom: 0}
#loader.active::before, #loader.active::after{height: 0}
#loader img{z-index: 1}

#logo img{max-width: 50px}
header{background-color: #fff}
.index header{background-color: rgba(255,255,255,0.4)}
header.transform{background-color: rgba(255,255,255,0.8)}
#intro_txt{background-image: url(./Dup/img/bg_img2.png);background-size: cover;background-position: center}
#intro_txt h2::before{content: "Introduction";text-align: center;display: block;font-size: 30px;color: #ccc;margin-bottom: 10px}
#intro_txt h2 span{line-height: 1.5;border-bottom: none}
.con_bg{background-color: rgba(200,200,200,0.8)}
#contents{top: -100px}
#contents::before{position: absolute;content: "About us";width: 100%;text-align: center;color: #fff;left: 0;top: -100px;font-size: 40px}
.con_box::before{position: absolute;content: "";width: 200px;height: 1px;background-color: #349ee0;transform: rotate(-45deg);left: -35px;top: 60px;}
.con_no{z-index: 1}
.con_no::before{position: absolute;content: "";width: 40px;height: 40px;top: 50%;left: -5px;transform: translateY(-50%);background-color: #fff;z-index: -1}
.more{margin: 50px auto 0}
.more a{padding: 20px;border-radius: 50px;border: none;background-color: #f2f2f2}
#top_cms .top_cms_box{border: solid 1px #333;padding-bottom: 30px;width: 90%;box-sizing: border-box}
#top_cms .cms_title{text-align: center;margin-bottom: 50px;margin-top: -12px}
#top_cms .cms_title h2{display: inline-block;font-size: 30px;color: #333;padding: 0 20px;background-color: #fff}
#page_title{background-position: center;position: relative}
#page_title::before{position: absolute;content: "";width: 100%;height: 20px;left: 0;bottom: 0;background-color: rgba(255,255,255,0.4)}
#filter_white{background-color: rgba(52,158,224,0.6)!important}
#page_title h2{position: relative;padding: 30px 0;font-size: 40px}
#page_title h2::before, #page_title h2::after{position: absolute;content: "";width: 50px;height: 2px;background-color: #fff;transform: rotate(-45deg);left: 0;right: 0;margin: auto}
#page_title h2::before{top: 0;left: 120px}
#page_title h2::after{bottom: 0;right: 120px}
#page_title h2 span{background-color: transparent;padding: 0;}
.cate_list li a{padding: 10px 20px 12px!important;background-color: #f2f2f2;color: #349ee0;border-radius: 50px}
.cate_list li a:hover{opacity: 1;background-color: #62d38a;color: #fff}
footer .bg-mask{background-color: transparent}
footer .bg_color1{background-color: #333}
footer, footer .txt_color1, footer .txt_color3{color: #fff}
#logo2 img{max-width: 80px}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;text-align: left;padding-bottom: 5px;margin-bottom: 50px;border-bottom: solid 2px #333;color: #333}


/** tablet 780 **/
@media screen and (max-width: 768px){
#contents{top: -50px}
.con_img{height: 40vw}
.con_box::before, .con_no::before{display: none}
#page_title h2{font-size: 28px}
#contents::before{top: -80px}
header #header #header_menu li{width: auto}
#logo{margin-bottom: 10px}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#top_cms .top_cms_box{padding-left: 5%;padding-right: 5%}
#logo{padding-top: 10px;padding-bottom: 10px;margin-bottom: 0;}
#logo img{max-width: 40px}
header{padding-bottom: 0}
.cate_title{font-size: 20px}
h1.logo{text-align: left;padding-left: 10px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
body, .font_sans-serif, .font_serif{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;font-weight: 400}
#intro h2, .con_title{font-weight: bold}
.cate_list li a{padding: 15px 20px 10px!important}
}