﻿/* all page */
/* color */
.txt_color1{color: #9e5226;} /* メインカラー */
.txt_color3{color: #772339;} /* アクセントカラー1 */

/* background-color */
.bg_color1{background-color: #9e5226;} /* メインカラー */
.bg_color3{background-color: #772339;} /* アクセントカラー1 */
.bg_color4{background-color: #772339;} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #9e5226;}
.border_color3{border-color: #772339;}

.hvr_txt_color1:hover{color: #9e5226;} /* メインカラー */

.linkStyle{
    color: #333;
    text-decoration: underline;
}

/* top ----------------*/

/* header */
#header h1 {
	background-color: transparent;
}
#header h1.active {
    top: 10px;
    left: 10px;
    padding: 10px;
	background-color: transparent;
}
#header h1 span {
    border: none;
    padding: 10px;
}

/* main img */
#main_img{
	background-color: #000;
}
#catch .main_catch{
	background-image: url("./Dup/img/catch.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 160px;
    width: 160px;
	height: 500px;
	position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
}
#catch .main_left{
	background-image: url("./Dup/img/main_left.png");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: 35vw;
    width: 35vw;
	height: 100vh;
	position: absolute;
	bottom: 1px;
	left: 0;
	z-index: 5;
}
#catch .main_right{
	background-image: url("./Dup/img/main_right.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 35vw;
    width: 35vw;
	height: 100vh;
	position: absolute;
	bottom: 1px;
	right: 0;
	z-index: 5;
}

/* main */


/* intro */

/* contents */
#contents1{
	position: relative;
}
#contents1::before{
	content: "";
	background-image: url("./Dup/img/kumo.png");
	background-position: right;
	background-repeat: no-repeat;
	background-size: 450px;
	width: 450px;
	height: 450px;
	position: absolute;
	top: 50px;
	right: -20px;
}
#contents1::after{
	content: "";
	background-image: url("./Dup/img/kumo2.png");
	background-position: left;
	background-repeat: no-repeat;
	background-size: 500px;
	width: 500px;
	height: 500px;
	position: absolute;
	bottom: 50px;
	left: -20px;
}
#contents1 .contents1_illust{
	content: "";
	background-image: url("./Dup/img/turu.png");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 200px;
    width: 200px;
    height: 400px;
    position: absolute;
    bottom: 0;
    left: 20vw;
    z-index: 1;
}
#contents1 img{
	border: 5px solid;
}
#contents3{
	background-image: url("./Dup/img/texture.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#contents3 figure{
	border: 5px solid;
}
#contents3::before{
	content: "";
	background-image: url("./Dup/img/hinomaru.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 450px;
	width: 450px;
	height: 450px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 1;
}

/* topcms */

/* footer */


/* under page */
#page_title::before{
	content: "";
	background-image: url("./Dup/img/tree_left.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 120px;
	width: 120px;
	height: 300px;
	position: absolute;
	left: 0;
	bottom: 0;
}
#page_title::after{
	content: "";
	background-image: url("./Dup/img/tree_right.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 150px;
	width: 150px;
	position: absolute;
	right: 0;
	bottom: 0;
}

/* cms1 */

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */
#page7 .box{
	border-bottom: 1px dotted;
	box-sizing: border-box;
	width: 100%!important;
	-webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
}

/* page8 */
#page8 #tel_txt a {
    padding-left: 0;
}

/* page9 */

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#catch .main_left{
		background-size: 45vw;
		width: 50vw;
	}
	#catch .main_right{
		background-size: 45vw;
		width: 50vw;
	}
	#contents1::before {
		background-size: 300px;
		width: 300px;
		height: 300px;
		top: -50px;
	}
	#contents1::after {
		background-size: 360px;
		width: 360px;
		height: 360px;
		z-index: -1;
	}
	
	#contents1 .contents1_illust {
		background-size: 140px;
		width: 140px;
		height: 300px;
		left: 5vw;
	}
	#contents3::before {
		background-size: 270px;
		width: 270px;
		height: 270px;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#header h1.active {
		top: 0px;
		left: 0px;
		padding: 0px;
	}
	#catch .main_catch {
		background-size: 90px;
		width: 90px;
		height: 270px;
	}
	#contents1 .contents1_illust {
		background-size: 110px;
		width: 110px;
		height: 300px;
		bottom: -130px;
		left: 10vw;
		z-index: 3;
	}
	#contents3::before {
		background-size: 200px;
		width: 200px;
		height: 220px;
	}
	#page_title::before {
		background-size: 80px;
		width: 70px;
		height: 230px;
	}
	#page_title::after {
		background-size: 100px;
		width: 100px;
	}
	
}

