/*その他 --------------------------------------------*/
.top_cms_before,#top_cms,footer,.f_before, article, .all_bg{
    position: relative;
    z-index: 2;
}
.top_cms_wrap,.f_before, .footer_back, .main_box{
    position: relative;
    z-index: 1;
}

#loading img{max-width: 200px;}
.pc_box #logo{max-width: 200px;}

/* メインイメージ -----------------------------------*/
.main_dec1{
    height: 100%;
    top: 0px;
    left: 0;
    z-index: 2;
}
.main_dec2{
    height: 100%;
    top: 0px;
    right: 0;
    z-index: 2;
}
.catch {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -50%);/* X横 Y縦 始点が要素の中心になる */
    width: 60%;
}
#main_img .catch img{
    min-height: auto;
}

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

/* バナー -------------------------------------------*/
.contact_bt a{border: none;}

/*コンテンツ ----------------------------------------*/
.dec1{
    display: inline-block;
    padding: 0 10px 2px 0;
    width: 60px;

	position: relative;
	animation-name: anim_type2;
	animation-iteration-count: infinite;
	animation-duration: 0.1s;
	animation-direction: alternate;
	animation-timing-function: steps(2);
	transition-duration: .3s;
	transition-property: transform;
}
@keyframes anim_type2 {
	0% {bottom: 0;}
	100% {bottom: -2px;}
}

/*下層ページ ----------------------------------------*/
.page_box{
    background: #f3f3f3;
    width: 40%;
    min-width: 450px;
    margin: 40px 0;

	transform: translateX(-30px);
	transition: transform 1s ease, opacity 0.3s;
	transition-property: opacity,transform;
	opacity: 0;
}
.page_box.start{transform: translateX(0);opacity: 1;}

/* タブレット */
@media screen and (max-width: 768px){
    .page_box{
        width: 40%;
        min-width: 340px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .page_box{
        width: 50%;
        min-width: 170px;
    }
    /*プライバシーポリシーのみ*/
    #page_title .page_box.priv{
        padding-left: 30px;
        padding-right: 5px;
        min-width: 250px;
    }
    #page_title .page_box.priv::before{width: 25px;}
    #page_title .page_box.priv h2{font-size: 20px;}
}

/*人を知る ------------------------------------------*/
#cms_6-a .box_title1{
	border-color: rgba(0,0,0,0.05)
}
#cms_6-a .box_title1::before{
	content: "Q.";
	font-weight: bold;
	position: absolute;
	top: 6px;
	left: 13px;
	font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);
}
#cms_6-a .box_txt1::before{
	content: "A.";
	font-weight: bold;
	position: absolute;
	color: rgba(0,0,0,0.3);
	top: 8px;
	left: 13px;
	font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);
}
.cms_6-a .box_title1{
	border-color: rgba(0,0,0,0.05)
}
.cms_6-a .box_title1::before{
	content: "Q.";
	font-weight: bold;
	position: absolute;
	top: 6px;
	left: 13px;
	font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);
}
.cms_6-a .box_txt1::before{
	content: "A.";
	font-weight: bold;
	position: absolute;
	color: rgba(0,0,0,0.3);
	top: 8px;
	left: 13px;
	font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);
}

@media screen and (max-width: 768px){
	#cms_6-a .box_title1::before{
		top: 6px;
		font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);
	}
	#cms_6-a .box_txt1::before{
		top: 9px;
		font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);
	}
	.cms_6-a .box_title1::before{
		top: 6px;
		font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);
	}
	.cms_6-a .box_txt1::before{
		top: 9px;
		font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);
	}
}
@media screen and (max-width: 667px){
	#cms_6-a .box_title1::before{
		top: 5px;
		left: 0;
		font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);
	}
	#cms_6-a .box_txt1::before{
		top: 10px;
		left: 0;
		font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);
	}
	.cms_6-a .box_title1::before{
		top: 5px;
		left: 0;
		font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);
	}
	.cms_6-a .box_txt1::before{
		top: 10px;
		left: 0;
		font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);
	}
}
/* 自動リンク設定  ----------------------------------*/
.linkStyle{
	color:#d1000f;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color:#d1000f;
	opacity: 0.7;
	text-decoration: none;
}

/*配色 ----------------------------------------------*/

/*グレー*/
.txt_color2{color: #999;}
#loading_bg.bg_color4{background-color:#efefef;}
#loading_bg .gauge{background-color: #939393;}
.hamburger__icon{background-color: #939393;}
.footer_back{background: #c7c7c7;}
.contents1_wrap, .top_cms_wrap {background-color:#2a2929;}
header,.top_cms_wrap .top_cms_before{background: linear-gradient(15deg, #5c5c5c 0%, #262626 20%, #262626 50%, #9b9b9b 70%, #d5d4d4 80%, #efefef 90%);}
.top_cms_wrap{background: linear-gradient(215deg, rgba(62,62,62,1) 0%, rgba(46,45,45,1) 12%, rgba(96,95,95,1) 66%, rgba(139,139,139,1) 85%, rgba(140,140,140,1) 95%);}
.all_bg{background: linear-gradient(345deg, rgba(42,41,41,1) 36%, rgba(144,143,143,1) 75%, rgba(204,204,204,1) 87%, rgba(255,255,255,1) 95%);}
.main_box{background: linear-gradient(205deg, rgb(177 177 177) 36%, rgb(110 110 110) 50%, rgb(75 75 75) 70%, rgb(75 75 75) 80%);}

/*赤*/
.txt_color3{color: #d1000f;}
.img-container:before{background:#a9000c;}
header .button:hover::after{box-shadow: inset 0 0 0 15em #a9000c;}


/*青*/
#contents1 h2:before{color:#0b3a95;}
.hvr_bg_color1:hover{background-color: #0b3a95;}
#contents1 h2,#contents1 h2:before{border-color:#0b3a95;}
.button:hover::after{box-shadow: inset 0 0 0 15em #0b3a95;}
.cursor.bg_black{background-color: #3b6ed1;}

/*白*/
#contents1{background-color:#fff;}
.contact_bt a:hover, .tel_bt a:hover{color:#fff;}

/* タブレット */
@media screen and (max-width: 768px){
    header{background:#efefef;}
    header.bg_color1{background-color: #efefef;}
    .footer_back .f_before{background: linear-gradient(0deg, rgba(42,41,41,1) 36%,rgb(151 151 151) 95%);}
    .footer_back{background: #c7c7c7;}
}
/* スマホ */
@media screen and (max-width: 667px){
    .top_cms_wrap{background:linear-gradient(15deg, #3e3e3e 0%, #2e2d2d 12%, #858585 66%, #afafaf 85%, #efefef 95%);}
    .top_cms_wrap .top_cms_before{background: linear-gradient(139deg, #262626 20%, #262626 60%, #919191 90%, #efefef 100%);}
    .main_box{background: linear-gradient(180deg, #343434 180px, #9d9d9d 350px, #dbdbdb 30%, #dbdbdb 40%, #898989 50%, #4b4b4b 70%, #4b4b4b 80%);}
}
/*文字・文字間・空間・大きさ --------------------------------*/
.cate_txt1, .box_txt1, .box_txt2, #page9 p,#tel_txt p{
    letter-spacing: 0.03em;
    line-height: 1.7em;
}
.box_title1{letter-spacing: 0.05em;}

/* タブレット */
@media screen and (max-width: 768px){
    .main_box{padding-top: 70px;}
    .hamburger{top: 15px;}
    #contents1 p, #contents2 p, #contents3 p{
        letter-spacing: 0.03em;
        line-height: 1.8em;
    }
    .dec1{display: block;}
    .banner{padding: 0;}
    footer.pd_b-100px_tb{padding-bottom: 140px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    
    #contents2 h2, #contents3 h3{
        font-size: 21px;
        letter-spacing: -0.05em;
    }
    .top_cms_wrap .top_cms_before{top: 30%;}
    footer.pd_b-100px_tb{padding-bottom: 120px;}
    #loading img{max-width: 130px;}
    
    #cms_2-a .cate{
        margin-bottom: 0px;
    }
    #cms_2-a .cate_box{
        padding-bottom: 30px;
        margin-top: 30px;
    }
    #cms_2-a .box_item{
        margin-bottom: 0px;
    }
    #cms_6-a .box_wrap{
        padding: 5%;
        margin-bottom: 0px;
    }
    
    #cms_6-a .cate_wrap, #cms_6-a .cate{
        margin-bottom: 30px;
    }
    #cms_6-a .cate_box{
        width: 100%!important;
    }
    
    /*背景の調整*/
    .main_box{
        background-image: url(Dup/img/bg_sp.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .all_bg{display:none;}
}

/*テンプレート  -------------------------------------*/
/* タブレット */
@media screen and (max-width: 768px){
    .footer_back .f_before{
        height: 1100px;
        width: 45%;
    }
    .banner{bottom: 5px;}
}

/* スマホ */
@media screen and (max-width: 667px){
    #page9 h3{letter-spacing: 0.07em;}
    #contact_tel a{padding: 20px 0;}
    #tel_txt p, #tel_txt h3{padding: 10px 0 5px;}
    .footer_back .f_before{
        right: -70%;
        height: 1200px;
        width: 60%;
    }
    #cms_6-b .cate_title{letter-spacing: -0.03em;}
    .all article section{padding: 30px 3%;}
}