﻿
/*--------リンク・フォント--------*/
.linkStyle{color: #000000; text-decoration: underline;}

/*--------全体--------*/
#main_img{
    background-image: url(./Dup/img/main_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}


@media screen and (min-width: 668px){
#main_img h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
}

h1::after {    border-color: rgba(194, 228, 94, .5) transparent transparent transparent!important;}
.contents{
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
}
.contents h3,.contents div{
	position: relative;
	z-index: 3;
}
.contents h3{
	font-size: 100px;
	margin-bottom: 200px;
	line-height: 1;
}
.contents div{
	width: 50%;
	box-sizing: border-box;
	margin-left: 45%;
}
.contents div h4,.contents div p{position: relative;z-index: 2;}

.contents div::after{
	content: "";
	position: absolute;
	    background-color: #00a8a8;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.7;
	z-index: 1;
}
.contents::before,.contents::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.contents::before{
	z-index: 2;
	background-image: url("../img/bg_black.png");
	background-position: left top;
	background-size: 100% 100%;
	opacity: 0.5;
}
.contents::after{
	z-index: 1;
	background-position: center center;
	background-size: cover;
}
.cms_3-f .sub_cate:nth-of-type(even) .sub_cate_wrap{
    flex-direction: row-reverse;
}
.cms_3-f .sub_cate:nth-of-type(even) .sub_cate_wrap .sub_cate_item{
padding-right: 0px;
    padding-left: 20px;
}
.top_cms_box {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #f1f1f1;
}

.top_cms_box:before {
position: absolute;
    top: 7px;
    left: 7px;
    width: 100%;
    height: 100%;
    content: '';
    border: 4px solid #17a922;
}
footer #footer #footer_box .tel a {display: none;}

/*--------下層--------*/
.pager{justify-content: center!important;}

#cms_3-f{counter-reset: num;}
#cms_3-f .cate .cate_title{
    position: relative;
    z-index: +1;
    border: 0;
}
#cms_3-f .cate .cate_title:before {
        counter-increment: num;
    content: counter(num,decimal-leading-zero);
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b3e5e5;
    font-size: 5em;
    font-weight: 900;
    opacity: 0.4;
        font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    z-index: -1;
}

#cms_3-f .cate_box {
    background-color: #eff7d7;
    border-radius: 5px;
    border-bottom: 0;
    padding: 15px;
}

#cms_2-c .cate_box{
    border-left: dotted 4px #1e2b38;
    background-color: rgba(229, 229, 229, .35);
}

#cms_2-c #cate1 .cate_box{border-left:none;background-color: rgba(0,0,0,0);}
#cms_2-c #cate1 .box_txt1,
#cms_2-c #cate1 .box_txt2{padding-left:20px;}

#cms_2-c #cate1 .box_wrap{
    position: relative;
    padding-left: 30px;
}


#cms_2-c #cate1 .box_wrap:before{
    content: "";
    display: inline-block;
    height: calc(100% - 30px);
    border-left: 4px dotted #1e2b38;
    position: absolute;
    top: 30px;
    left: 26px;
}
#cms_2-c #cate1 .box_description2{
    position: relative;
    border-left: none;
    background-color: rgba(255, 255, 255, 0);
}
#cms_2-c #cate1 .box_description2 span{
position: absolute;
    display: inline-block;
    width: 68px;
    top: 5px;
    left: -38px;
}
#page_title.page05 {background-position: 50% 16%;}
#page08 #tel_txt{background-color: rgba(255, 255, 255, .4);}


/*--------タブレット--------*/
@media screen and (max-width: 768px){

    #main_img h2 { width: 70%!important;}
    #intro #intro_box #intro_txt h3::after {font-size: 4vw;}
    .contents h3{
		margin-bottom: 100px;
	}
	.contents div{
		width: 70%;
		box-sizing: border-box;
		margin-left: 25%;
	}
	.contents h3{font-size: 50px;}
	.contents div{width: 90%;margin-left: 5%;}
	footer #footer { padding: 45px;}
	    #cms_2-c #cate1 .cate_box{
    flex-direction: column-reverse;
}
#page_title {
    padding-top: 170px;
    padding-bottom: 130px;
}
    #cms_2-c #cate1 .box_description2 span {
    width: 61px;
    left: -34px;
}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
    #main_img{padding-top: 0;}
video {
display: block;
}

#intro{padding-top: 126px;}
    #main_img h2 { width: 100%!important;}
    #intro #intro_box #intro_txt h3::after {font-size: 5.1vw;}
    #intro h3 {font-size: 4.5vw;}
    #top_cms {
    padding-left: 3%;
    padding-right: 7%;
    }
    #page_title {
    padding-top: 110px;
    padding-bottom: 90px;
}
.cms_3-f .sub_cate:nth-of-type(even) .sub_cate_wrap .sub_cate_item {
    padding-right: 0px;
    padding-left: 0px;
}

#cms_2-c #cate1 .box_wrap{
    padding-left: 23px;
}
#cms_2-c #cate1 .box_wrap:before {
    left: 19px;
}
    #page08 #tel_contact h3{font-size: 3.6vw;}
    footer #footer {padding: 0px 15px 40px;}
}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
.pager li a{padding:8px 20px 12px;}
#cms_2-c #cate1 .box_description2::after{
    top:-1px;
}
}



