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

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

#top_cms .cms_title p, .more, #top_cms .cms_title p, #page_title p, a[href^="tel:"], header #header #header_menu li a .en, .scroll_txt{font-family: 'Krona One', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

body{background-size: 100px;background-position: top 0 left 0;/** background-image: url(./Dup/img/bg_img.png);animation: bgimage 5s linear infinite **/}
#wrap{position: relative;z-index: 1}

.normal_img img, .rectangle_img, square_img{border-radius: 20px}

#loader{top: 0;left: 0;z-index: 1000}
#loader::before, #loader::after{position: absolute;content: "";width: 100%;left: 0;background-color: #fff;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}
#page-top{z-index: 1}

/**
@keyframes bgimage{
0% {background-position: top 0 left 0}
100% {background-position: top -100px left 100px}
}
**/

main.pd_b-100px{padding-top: 0}
header{background-color: transparent!important;box-shadow: none!important;position: absolute;top: 0;left: 0;z-index: 1;margin: 0}
header #header #logo{position: absolute;top: 0;left: 20px;padding: 10px;background-color: rgba(255,255,255,0.9);box-shadow: 0 0 20px rgba(0,0,0,0.1);border-radius: 0 0 20px 20px}
header #header{max-width: 100%;justify-content: flex-end}
header #header #header_menu li a{transition: 0.3s;display: block}
header #header #header_menu li a:hover{transform: translateY(-5px)}
header #header #header_menu li a .jp{font-size: 10px;letter-spacing: 2px;color: #fff}
header #header #header_menu li a .en{opacity: 1;font-size: 16px;color: #fff}
#main_img{height: 100vh}

#intro{overflow:hidden;border-radius: 20px}

#page_title{text-align: center;background-color: rgba(37,149,199,0.8);padding-bottom: 100px;padding-top: 200px;max-width: 100%;margin: 0}
#page_title h2{padding: 0;margin-bottom: 10px;font-size: 20px;border-bottom: none;color: #fff;text-shadow: none}
#page_title p{padding: 0;margin: 0;background-color: transparent;color: #fff;box-shadow: none;font-size: 40px}

#h_contents .con_box::before{position: absolute;content: "";width: 0;height: 100%;background-color: #f4f9f9;top: 0;right: 0;transition: cubic-bezier(.86,0,.1,1) 1s;z-index: -1;border-top: solid 2px #2595c7}
#h_contents .con_box:nth-of-type(2)::before{right: auto;left: 0}
#h_contents .con_box.active::before{width: 100%}
#h_contents .con_img{top: -50px;opacity: 0;transform: translateX(-50px);transition: cubic-bezier(.11,1.1,.81,1) 1s}
#h_contents .con_box:nth-of-type(1) .con_img{border-radius: 0 20px 20px 0}
#h_contents .con_box:nth-of-type(2) .con_img{border-radius: 20px 0 0 20px;transform: translateX(50px)}
#h_contents .con_box:nth-of-type(3) .con_img{border-radius: 0 20px 20px 0}
#h_contents .con_box.active .con_img{opacity: 1;transform: translateX(0)}

#top_cms{margin-top: 50px}
#top_cms .top_cms_box{padding: 50px;position: relative;border-radius: 20px;background-color: #f9f8f7}
#top_cms .top_cms_box::before{position: absolute;content: "";width: 2px;height: 60px;left: 0;right: 0;top: -30px;background-color: #333;margin: auto}
#top_cms .cms_title{text-align: center;margin-bottom: 50px}
#top_cms .cms_title h2{padding: 0;border: none;font-size: 16px;margin-bottom: 20px;}
#top_cms .cms_title p{padding: 0 30px;background-color: transparent;color: #333;font-size: 30px;border-bottom: solid 1px;display: inline-block;line-height: 0.7}
.more{margin-top: 50px}
.more a{width: 200px;padding: 20px!important;border: solid 2px #2595c7;color: #2595c7;background-color: transparent;margin-left: auto;margin-right: auto;border-radius: 100px}
.more a:hover{background-color: #2595c7;color: #fff}

.cate_list li a{padding: 10px 20px!important;background-color: #F2EFE9;color: #2595C7}
.cate_list li a:hover{background-color: #2595C7;color: #fff}

.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 #2595c7;color: #2595c7;font-weight: normal;border-radius: 0!important}

footer.bg_color2{background-color: #333}
footer .txt_color1{color: #fff}

#intro .scroll_txt{top: 70px;left: 50%;transform: translateX(-50%)}
#intro h2{text-align: center;position: relative;padding-bottom: 20px;margin-bottom: 30px;border-bottom: solid 2px rgba(255,255,255,0.4)}
#intro h2::before{position: absolute;content: "";width: 40px;height: 2px;left: 0;right: 0;margin: auto;bottom: -2px;background-color: #fff}
#intro #intro_txt::after{background-color: rgba(37,149,199,0.8)}
#top_cms .fadein{opacity: 0;transform: translateY(20px);transition: 1s}
#top_cms .fadein.active{opacity: 1;transform: translateY(0)}

.scroll_txt span{display: inline-block;opacity: 0;transform: translateY(-10px);transition: 0.2s}
.scroll_txt span.active{opacity: 1;transform: translateY(0)}

#cms_5-c .box_txt1::before, .cms_5-c .box_txt1::before{color: rgba(0,0,0,0.4)}


/** tablet 780 **/
@media screen and (max-width: 768px){
#top_cms .top_cms_box{padding: 50px 20px}
#intro .scroll_txt{transform: translateX(0)}
#main_img{height: 60vw}
header #header #logo{left: 0;right: 0;margin: auto}
header #header #logo img{width: 100%!important}
header #header{padding-top: 100px}
#intro{border-radius: 0}
#h_contents .con_img{height: 300px;border-radius: 20px!important;width: calc(100% - 40px)!important;margin: 0 auto}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
header{padding-right: 0!important}
header #header #logo{background-color: transparent;box-shadow: none;border-radius: 0;margin: 0}
header #header{padding-top: 10px}
#page_title{padding-top: 100px}
#page_title p {font-size: 28px;letter-spacing: 0;}
.cate_title{font-size: 20px}
#h_contents .con_img{height: 60vw}
}

/** 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}
.cate_list li a{padding-top: 15px!important}
}