﻿/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#intro,#contents1 figure,#contents1 h2 span,#top_cms{position: relative;}
/*リピートなし*/
#intro:before,#contents1 figure:before,#contents1 h2 span:before,#contents2:before,#contents3:before,
#top_cms:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#intro:before{
background-image: url(./Dup/img/obj1.png);
width: 250px;
height: 250px;
top: -140px;
left: 0;
z-index: 1;
}
#contents1 figure:before{
background-image: url(./Dup/img/obj2.png);
width: 250px;
height: 250px;
bottom: -90px;
left: -110px;
z-index: 1;
}
#contents1 h2 span:before{
background-image: url(./Dup/img/obj5.png);
width: 70px;
height: 70px;
top: -25px;
right: -65px;
}
#contents2:before{
background-image: url(./Dup/img/obj3.png);
width: 350px;
height: 350px;
top: -180px;
right: 0px;
z-index: 2;
}
#contents3:before{
background-image: url(./Dup/img/obj4.png);
width: 250px;
height: 250px;
top: -140px;
left: 0;
z-index: 1;
}
#top_cms:before{
background-image: url(./Dup/img/obj6.png);
width: 250px;
height: 250px;
top: -120px;
right: 0px;
z-index: 1;
}
/*--------------------------------
全体
--------------------------------*/
body{background-color: #f9f9f9;}
#header h1 img{max-width: 500px;}
#header h1.active img{max-width: 300px;}

#footer.bg_color2{background-color: #ebebe1;}
/*--------------------------------
TOP
--------------------------------*/

/*--------------------------------
下層
--------------------------------*/
/* 5-c QA削除 */
#cms_5-c .box_title1::before,#cms_5-c .box_txt1::before,
.cms_5-c .box_title1::before,.cms_5-c .box_txt1::before{
display: none;
}
#cms_5-c .box_title1,#cms_5-c .box_txt1,
.cms_5-c .box_title1,.cms_5-c .box_txt1{
padding-left: 0;
}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){

#intro:before{
width: 200px;
height: 200px;
top: -115px;
left: 0;
}
#contents1 figure:before{
width: 200px;
height: 200px;
bottom: -80px;
left: -85px;
}
#contents2:before{
width: 250px;
height: 250px;
top: -110px;
right: 0px;
}
#contents3:before{
width: 200px;
height: 200px;
top: -100px;
left: 0;
}
#top_cms:before{
width: 200px;
height: 200px;
top: -90px;
right: 0px;
}

}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
#header h1{max-width: 300px;width: 100%;}
#header h1.active{max-width: 200px;width: 100%;}
#header h1.active img{max-width: 200px;}

#intro:before{
width: 150px;
height: 150px;
top: -80px;
left: 0;
}
#contents1 figure:before{
width: 150px;
height: 150px;
bottom: -60px;
left: -50px;
}
#contents1 h2 span:before{
background-image: url(./Dup/img/obj5.png);
width: 50px;
height: 50px;
top: -25px;
right: -45px;
}
#contents2:before{
width: 150px;
height: 150px;
top: -65px;
right: 0px;
}
#contents3:before{
width: 150px;
height: 150px;
top: -80px;
left: 0;
}
#top_cms:before{
width: 150px;
height: 150px;
top: -80px;
right: 0px;
}

#contents2{min-height: auto;}

#page_title .txt_vertical{
webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
#page_title,#page_title::after{min-height: 40vh;}
#page_title > div{padding-top: 50px;}
#page_title h2{padding-right: 0;}

.cate_list li{
width: 100%;
box-sizing: border-box;
margin: 20px 0;
}
}

/*--------------------------自動リンク--------------------------*/
/* color */
.linkStyle{color: #194B28; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #194B28;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #fff;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #194B28;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
.contact_tel a{padding-bottom: 24px;}
#tel_txt h3{padding-bottom: 0;}
#tel_txt p{padding-bottom: 15px;}
}

/*--------------------------カラー--------------------------*/
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #646400} /* メインカラー */
.txt_color2{color: #194B28} /* サブカラー */
.txt_color3{color: #507806} /* アクセントカラー1 */
.txt_color4{color: #E6E6E6} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #646400} /* メインカラー */
.bg_color2{background-color: #194B28} /* サブカラー */
.bg_color3{background-color: #507806} /* アクセントカラー1 */
.bg_color4{background-color: #E6E6E6} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #646400}
.border_color2{border-color: #194B28}
.border_color3{border-color: #507806}
.border_color4{border-color: #E6E6E6}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #646400} /* メインカラー */
.hvr_txt_color2:hover{color: #194B28} /* サブカラー */
.hvr_txt_color3:hover{color: #507806} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #E6E6E6} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #646400} /* メインカラー */
.hvr_bg_color2:hover{background-color: #194B28} /* サブカラー */
.hvr_bg_color3:hover{background-color: #507806} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #E6E6E6} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #646400}
.hvr_border_color2:hover{border-color: #194B28}
.hvr_border_color3:hover{border-color: #507806}
.hvr_border_color4:hover{border-color: #E6E6E6}

@media  screen and (max-width: 667px){
.txt_color_nomal_sp{color: #333333;}
}