/*-------------------------------------------------------------
 色 ・　文字
---------------------------------------------------------------*/
:root{
    --color1: #004da0;
    --color2: #f3f3f3;
    --color3: #ffc031;
    --color4: #ffc031;
	--text: #111111;
    --base: #ffffff;
    
    --font1: 18px;
    --fontB1: 32px;
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --fontB1: 22px;
    }
}
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15,.font_14_sp, .width_100per_sp,.width_100per{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1)), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1)), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1)), calc(1rem  - 6px));}


/* color */
body, .txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--text);}
.linkStyle{transition: 0.5s;color: var(--text)}
.linkStyle:hover{opacity: 0.7}

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: var(--red);}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: white} /* 白背景 */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}

/*-------------------------------------------------------------
 top, all
---------------------------------------------------------------*/
#intro h2, #contents1 h2{
    font-size: 2.5rem;
}


.contents2_bg{
    background-position-y: 32%;
}

#f_contact{display: none;}
#f_contact a span.hover_box{display: none;}
#f_contact a:hover span.hover_box{display: none;}

#copyright{
    padding-bottom: 70px;
}
#sp_nav li.scrollin{
    font-size: var(--font1);
}

/* タブレット */
@media screen and (max-width: 768px){
    #intro h2{
        text-align: center;
    }
    #intro h2, #contents1 h2{font-size: 2.2rem;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #intro h2, #contents1 h2{font-size: 1.9rem;letter-spacing: 0;}
    #page_title .box{padding: 120px 0 50px;}
    
    #intro .grid_10_sp,#contents1 .grid_10_sp{
        width: 90%!important;
    }
}
/*--------------------------------------------
 モーダル 
----------------------------------------------*/
.modal_bt{
    cursor: pointer;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20%;
    /*border: 2px solid;*/
    color: var(--text);
    background-color: var(--base);
    box-shadow: 3px 4px 0px rgba(0,0,0,0.3);
}
.modal_bt:hover{
    opacity: 0.7!important;
    background-color: var(--color2);
    color: var(--color1);
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
}


.modal_box{
    top: 0;
    left: 0;
    background-color: rgba(0,77,160,0.8);
    z-index: 999;
    overflow-y: scroll;
}
.modal_box .close{
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/* タブレット */
@media screen and (max-width: 768px){
    .modal_bt{
        margin: 20px auto;
    }
    .modal_wrap .modal_item{
        padding-top: 130px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .modal_bt{}
}
/*-------------------------------------------------------------
 logo
---------------------------------------------------------------*/

#footer #logo2{max-width: 180px;}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .load_logo{width: 35%;}
}

/*-------------------------------------------------------------
 cms1
---------------------------------------------------------------*/
.cms_1-g .date{max-width: 140px;}

.pager li a{
    background-color: var(--color1);
    color: var(--base);
}
.pager li a:hover{
    
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 cms2
---------------------------------------------------------------*/
#cms_2-g .box_item_2{
    padding: 0 10px;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 cms3
---------------------------------------------------------------*/

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*-------------------------------------------------------------
 cms4
---------------------------------------------------------------*/
#cms_6-c .cate_box{
    border: 1px solid var(--color1);
    border-top: 5px solid var(--color1);
    border-radius: 0 0 15px 15px;
}
#cms_6-c .arrow{bottom: -101px;}
#cms_6-c .cate_box .box_img1{
    margin: 20px auto 0;
}
#cms_6-c .cate_box .box_img1 img{
    border-radius: 15px;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #cms_6-c .cate_box{
        padding: 40px 8%;
    }
}
/*-------------------------------------------------------------
 cms5
---------------------------------------------------------------*/
#cms_2-h .cate_title_wrap{
    width: 30%!important;
    color: var(--base);
}
#cms_2-h .cate_img1{
    width: 40%!important;
}
#cms_2-h .cate_title_wrap .cate_title{
    font-size: 2rem;
}

#cms_2-h .box_title1:before{display: none;}
#cms_2-h .cate .box_wrap .cate_box:nth-child(1){margin-top: 50px;}
#cms_2-h .box_item{
    padding: 30px;
}
#cms_2-h .cate_box:nth-child(odd){
    background-color: var(--color2);
}

.topcms_about_type1 {counter-reset: box 0;padding-top: 35px;}
.topcms_about_type1 .cate_box {
	width: 31%!important;
	padding: 55px 25px 25px;
	background-color: #f5f5f5;
	border-radius: 10px;
	box-sizing: border-box;
}
.topcms_about_type1 .number {
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 90px;
}
.topcms_about_type1 .number::before {
	counter-increment: box 1;
	content: "0"counter(box);
	font-size: 67px;
	line-height: 1;
	text-align: center;
	color: #ffbe51;
	display: inline-block;
	position: absolute;
	right: 0;
	left: 0;
	top: -42px;
	margin: auto;
	z-index: 0;
}
.topcms_about_type1 .number::after {
	content: "";
	position: absolute;
	display: block;
	width: 73%;
	height: 2px;
	background: #ffbe51;
	left: 0;
	right: 0;
	margin: auto;
	top: 22px;
}
.topcms_about_type1 .cate_box .box_title1{
    font-size: calc(var(--font1) + 2);
    line-height: 1.6;
    z-index: 1
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_about_type1 .cate_box {
	margin: 0 auto 80px;
	width: 80%!important;
}
.topcms_about_type1 .cate_box:last-of-type {
	margin-bottom: 0;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    .topcms_about_type1 .cate_box {
    	width: 90%!important;
    	padding: 50px 25px 25px;
    }
    .topcms_about_type1 .number::before{
    	font-size: 59px;
    	top: -34px;
    }
    .topcms_about_type1 .number::after{
    	width: 72%;
    }
    #cms_2-h .cate_title_wrap .cate_title{
        font-size: 1.4rem;
    }
}

/* タブレット */
@media screen and (max-width: 768px){
    #cms_2-h .cate_title_wrap{width: 50%!important;}
    #cms_2-h .cate_img1{width: 50%!important;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #cms_2-h .box_title1{
        font-size: 1.1rem;
        font-weight: bold;
    }
    #cms_2-h .cate_title_wrap{width: 100%!important;}
    #cms_2-h .cate_img1{width: 100%!important;}
    #cms_2-h .box_item{
        letter-spacing: 0em;
        padding: 30px 5%;
    }
    #cms_2-h .box_item .box_txt1{padding-top: 20px;}
}
/*-------------------------------------------------------------
 page10
---------------------------------------------------------------*/



/*-------------------------------------------------------------
 お問い合わせ
---------------------------------------------------------------*/
.contact_tel{
    width: 45%;
}
.contact_tel.mail a{
    font-size: 28px;
    line-height: 1.3;
}

/* タブレット */
@media screen and (max-width: 768px){
    .contact_tel{width: 100%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .contact_tel.mail a{font-size: 25px;}
}

/* -------------------------------------------------------------
 リンクボタン 
--------------------------------------------------------------*/
.linkStyle,a{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
a{
    text-decoration: none;
}
.linkStyle:hover,a:hover{
	opacity: 0.7;
	text-decoration: none;
}

.cate_list li a,#page10 ul li a,.more a{
    /*background-color: var(--color1);*/
    /*background: linear-gradient(90deg, var(--color3)5%, var(--color1)95%);*/
    /*color: var(--base);*/
    /*font-weight: bold;*/
    /*padding: 10px 20px;*/
    /*transition: all 0.8s;*/
}
#page10 ul li a{
    /*padding-top: 15px;*/
    /*padding-bottom: 15px;*/
}
.cate_list li a:hover,#page10 ul li a:hover,.more a:hover{
    /*background-color:var(--color3);*/
    /*opacity: 0.7;*/
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/* -------------------------------------------------------------
 メインイメージ 
--------------------------------------------------------------*/

#main_img::before{
    display: none;
    background-color: transparent;
}
#main_img .catch_box{
    /*left: 2%;*/
    right: 2%;
    top: 0;
    /*width: 90vh;*/
    width: calc(90vh - 70px);
    max-width: 50%;
    height: 100%;
}
#main_img .catch_box .catch1{
    top: 54%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
/*#main_img .catch_box .catch2{*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*}*/

/* タブレット */
@media screen and (max-width: 768px){
    #main_img{
        margin-top: 85px;
        /*height: calc(100vw * 0.56)!important;*/
        height: 56vw!important;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{
        margin-top: 65px;
    /*    background: url(./Dup/img/main_img_sp.png) top center / cover no-repeat!important;*/
    /*    height: calc(100vw * 2.01)!important;*/
        width: 100vw;
    }
    /*#main_img .catch_box{*/
    /*    display: none;*/
    /*}*/
}