﻿@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP&display=swap');

body, .font_sans-serif, .font_en{font-family: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif}

.link_box ul{justify-content: center}
.link_box ul li{width: 30px!important;margin: 0 10px}
.cate_img1, .cate_img{margin-left: auto;margin-right: auto}
header.bg_color4{background-color: rgba(255,255,255,0.8);border-right: solid 1px #f2f2f2}
.fat-nav ul .txt_color3{color: #00aff4}
#main_img, #main_img img{min-height: inherit;height: inherit}
.scroll_bt{display: none}
.button{background-color: #f7f7f7;border: solid 1px #e6e6e6;color: #00aff4;z-index: 1;position: relative}
#top_cms .button{background-color: transparent;border-color: #00aff4}
.button:hover{background-color: transparent;border-color: #00aff4;color: #fff}
.button:hover::after{box-shadow: inset 0 0 0 15em #00aff4}
.button2{background-color: #f25916;color: #fff;border: none}
.button2:hover{background-color: #00aff4;box-shadow: none}
.cate_list li{width: auto!important;padding: 5px}
.cate_list li a{padding: 5px 15px;}
#main_menu{margin-bottom: 50px}
#main_menu ul li a{text-align: center;color: #333;margin-bottom: 0;padding: 15px 0!important}
#main_menu ul li a:hover{color: #00aff4}
#main_menu ul li a::before{width: 30px!important;left: 0;right: 0;bottom: 0;background-color: #e6e6e6;margin: auto;transform: none;top: auto}
#main_menu ul li:last-child a::before{display: none}

#main_img::before{position: absolute;content: "";width: 100%;height: 50px;background-image: url(./Dup/img/bg_img2.png);background-size: 100% 100%;left: 0;bottom: -1px;z-index: 4}
#main_img .main_txt{right: 5%;bottom: 100px;z-index: 4}
#page_title .title_img::before{background-image: url(./Dup/img/bg_img2.png), url("../img/title_bg.png");background-position: bottom left, top left;background-size: 100% 50px, auto;background-repeat: no-repeat, repeat}
.con1_wrap{background-image: url(./Dup/img/bg_img3.png);background-repeat: no-repeat;background-position: right bottom;background-size: 400px}
.con_wrap::before{position: absolute;content: "";top: 0;left: 0;right: 20%;bottom: -100px;background-color: #eff7f9;z-index: -1;background-image: url(./Dup/img/bg_img1.png);background-repeat: no-repeat;background-position: bottom 100px left -10px;background-size: 800px}
#contents2 h2{color: #333;padding-bottom: 20px;margin-bottom: 30px;position: relative}
#contents2 h2::before{content: "01";display: block;font-size: 50px;color: #00aff4;letter-spacing: 3px}
#contents2 h2::after{position: absolute;content: "";width: 50px;height: 1px;left: 0;bottom: 0;background-color: #00aff4}
#contents3 .con3_wrap{margin-top: -30px}
#contents3 .grid_6:first-of-type .con3_wrap::before{position: absolute;text-align: center;content: "02";font-size: 50px;width: 100%;left: 0;top: -40px;pointer-events: none;color: #00aff4;letter-spacing: 3px}
#contents3 .grid_6:last-of-type .con3_wrap::before{position: absolute;text-align: center;content: "03";font-size: 50px;width: 100%;left: 0;top: -40px;pointer-events: none;color: #00aff4;letter-spacing: 3px}
#contents3 h3{text-align: center;color: #333;padding-bottom: 20px;margin-bottom: 30px;position: relative}
#contents3 h3::before{position: absolute;content: "";width: 50px;height: 1px;left: 0;right: 1px;bottom: 0;margin: auto;background-color: #00aff4}
#top_cms .cms_title h2{color: #333;font-size: 30px}
#top_cms .cms_title p{color: #333;opacity: 0.4}
.cms_title::before{background-color: #333;top: 24px;transform: none}

#page_title .txt_shadow-b{text-shadow: none}
#page_title h2{color: #333;font-size: 30px}
#page_title p{color: #00aff4}
#page_title .page_box::before{background-color: #333;transform: none;top: 24px}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;text-align: center;padding-bottom: 5px;margin-bottom: 50px;border-bottom: solid 2px #ddd;color: #333;font-weight: normal;position: relative}
.cate_title::before{position: absolute;content: "";width: 50px;height: 2px;left: 0;right: 0;bottom: -2px;margin: auto;background-color: #00aff4;}

.footer_cms{color: #333}


/** tablet 780 **/
@media screen and (max-width: 768px){
#logo{max-width: 260px}
.con1_wrap{background-size: 300px}
#main_img::before{height: 8vw}
#page_title .title_img::before{background-size: 100% 8vw, auto}
.con_wrap::before{background-size: 600px}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#logo{max-width: 200px}
footer .logo{text-align: center}
.cate_list li{width: 100%!important}
.cate_title{font-size: 20px}
.con1_wrap{background-size: 70%}
.con_wrap::before {right: 0;bottom: 100px;background-position: top 70px right -10px;background-size: 300px;}
#page_title h2{font-size: 24px;letter-spacing: 1px}
#page_title .page_box::before{top: 18px}
#main_img .main_txt{bottom: 50px;width: 250px}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
#page10 ul li a, .pc_box .contact_bt a{padding-top: 15px;padding-bottom: 15px}
.cate_list li a{padding-bottom: 8px}
#page9 .box p a{padding-top: 5px;padding-bottom: 8px}
}