@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Quicksand:wght@600&family=Righteous&display=swap');

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

#intro_txt h2::before, #page_title .sub_title, #top_cms .cms_title p, #contents_h .con_no{font-family: 'Righteous', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

.font_bold{font-weight: normal}
.svg_box, .svg_box2{display: none!important}

#info .info_txt p.txt_color1{color: #333}
#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}

header{padding-bottom: 20px}
#logo{padding-top: 20px;width: 300px!important}
#logo .logo{width: 100%}
header #header #header_menu{width: auto!important;}
#header_menu .txt_color1{color: #333}
#header_menu a:hover span{color: #ffae2c}
#header #header_menu li:last-of-type{display: none;}
#intro_txt h2 span{padding-bottom: 0;border-bottom: none;line-height: 1.5}
.cate_list li a{color: #35d3b4;border-bottom: solid 1px #35d3b4}
.cate_list li a:hover{transform: translateY(-5px)}

#main_img{height: auto!important;max-height: inherit!important}
#page_title{background-position: center}
#page_title #filter_white{padding-bottom: 0!important;text-align: center}
#page_title h2{padding: 50px 100px 20px;display: inline-block;background-color: #fff;border-top: solid 5px #ffae2c;border-radius: 10px 10px 0 0;position: relative;bottom: -1px}
#page_title h2 .main_title{background-color: transparent;color: #333;padding: 0}
#page_title h2 .sub_title{top: 12px;left: 0;transform: skewX(-10deg);letter-spacing: 3px;font-size: 50px}
#intro #intro_txt{background-image: url(./Dup/img/intro_bg.png);background-size: cover;background-position: center}
#intro_txt h2 span{display: inline-block;transform: skewX(-10deg)}
#intro_txt h2::before{content: "INTRODUCTION";display: block;margin: 0 auto 30px;font-size: 30px;letter-spacing: 3px;transform: skewX(-10deg);color: #ffae2c;max-width: 300px;border-bottom: solid 2px #ffae2c}
#contents_h{background-color: #f7f5f0}
#contents_h .con_no span{display: inline-block;transform: skewX(-10deg)}
#contents_h .con_no::before{position: absolute;content: "";width: 5px;height: 100%;top: 0;left: -50px;background-color: #ffae2c}
#top_cms{max-width: 100%;margin: 0}
#top_cms .top_cms_box{width: 100%!important;padding: 80px 5% 50px;margin: 0;box-sizing: border-box}
#top_cms .top_cms_box:nth-child(4){background-color: #f9f9f9}
#top_cms .top_cms_box > .cms_wrap{max-width: 1280px;margin-left: auto;margin-right: auto}
#top_cms .cms_title{text-align: center;padding-bottom: 10px;margin-bottom: 40px;position: relative}
#top_cms .cms_title::before{position: absolute;content: "";width: 50px;height: 2px;left: 0;right: 0;bottom: 0;margin: auto;background-color: #ffae2c}
#top_cms .cms_title p{top: -40px;font-size: 50px;letter-spacing: 5px;transform: skewX(-10deg)}
#top_cms .cms_title h2{position: relative;color: #333;font-size: 30px}

.more{text-align: center;margin: 50px auto 0;width: 300px}
.more a{border: none;background-color: #ffae2c;border-radius: 50px;color: #fff;padding: 20px;}
.fadein{opacity: 0;transform: translateY(20px);transition: 1s}
.fadein.active{opacity: 1;transform: none}

.foot_banner{
    right: 90px;
    bottom: 10px;
    width: 326px;
    z-index: 1;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#header{justify-content: center;}
#main_img{margin-top: 122px}
header #header #header_menu{width: 100%!important;}
#logo{margin-bottom: 10px}
header{padding-bottom: 10px}
.cate_list li a:hover{transform: none}
#copyright{padding: 20px;text-align: left}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#header{justify-content: space-between;}
header{padding-bottom: 0}
#logo{padding-top: 10px;width: 200px!important}
#logo img{width: 100%!important;}
#main_img{margin-top: 61px}
#page_title h2{padding: 40px 0 30px;width: 95%}
#page_title h2 .sub_title{top: 18px;font-size: 30px}
#contents_h .con_no::before{left: -20px}
#intro #intro_txt{background-image: url(./Dup/img/intro_bg_sp.png)}
.foot_banner{
    right: auto;
    left: 10px;
    max-width: 280px;
    width: calc(100% - 90px);
}
#copyright {
    text-align: center;
    padding-bottom: 90px;
}
}

/** 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}
#intro_txt h2::before, #page_title .sub_title, #top_cms .cms_title p, #contents_h .con_no{font-family: 'Righteous', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}
#page_title h2 .sub_title{top: -15px}
}