@charset "UTF-8";

html{
	font-size:62.5%;
}

p, a, ul li, .name{
	font-family: 'Noto Sans JP', sans-serif;
	color:#000;
}

h1, h2{
	font-family: 'Neonderthaw', cursive;
}

.top-caption p, .item-cap p, .style-caption p{
	font-size:1.3rem;
}

h1{
	letter-spacing: 0!important;
	font-size:7rem;
	color:#e9c746;
}

.mid-wrapper{
	padding:40px 0;
}

.top-caption{
	width:700px;
	margin:20px auto;
}

.yellow, .white{
	padding:30px 0 20px;
	overflow: hidden;
}

.yellow{
	background-color:#ffffef;
}

.white{
	background-color:#ffffff;
}

.item-flex{
	width:900px;
	margin:20px auto -50px;
	display:flex;
	height:auto;
	align-items: center;
	justify-content: space-between;
}

.item-wrap{
	width:50%;
}

.item-caption h1{
	text-align: center;
	margin-bottom:20px;
}

.item-title h2{
	font-size:4rem;
	letter-spacing:0!important;
	color:#25a5a5;
}

.name{
	color:#25a5a5;
}

.kore-title, .item-title, .style-wrap h1{
	display:block;
	position:relative;
	transform: rotate(-5deg);
}

.style-wrap h1{
	left:-20px;
	top:10px;
	z-index:11;
}

.reverse .style-wrap h1{
	transform: rotate(5deg);
	left:230px;
	top:30px;
	color:#25a5a5;
}

.kore-title{
	width:280px;
	top:20px;
	left:-20px;
	z-index:10;
}

.item-title{
	top:-80px;
	left:110px;
}

.item-caption, .style-caption{
	width:45%;
	font-size:1.3rem;
}

.item-caption{
	margin-bottom:90px;
}

.style-flex{
	width:900px;
	margin:auto;
	display:flex;
	height:auto;
	align-items: center;
	justify-content: space-between;
	padding-bottom:60px;
}

.reverse{
	flex-direction:row-reverse;
}

.style-wrap{
	width:49%;
}

.style-caption{
	width:47%;
}

.box-line{
	position:relative;
	box-sizing: border-box;
	padding:30px 25px 20px;
}

.box-line:before,.box-line:after{ 
    content:'';
    width: 50px;
    height: 50px;
    position: absolute;
    display: inline-block;
}

.box-line:before{
    top:0;
    left: 0;
}

.g-title .box-line:before{
    border-left: solid 5px #e9c746;
    border-top: solid 5px #e9c746;
}

.y-title .box-line:before{
    border-left: solid 5px #25a5a5;
    border-top: solid 5px #25a5a5;
}

.box-line:after{
    bottom:0;
    right: 0;
}

.g-title .box-line:after{
    border-right: solid 5px #e9c746;
    border-bottom: solid 5px #e9c746;
}

.y-title .box-line:after{
    border-right: solid 5px #25a5a5;
    border-bottom: solid 5px #25a5a5;
}

.box-line p {
    margin: 0; 
    padding: 0;
}

.item-caption .new-item-list, .style-caption .new-item-list, .caption-image{
	margin-top:30px;
}

.caption-image{
	box-sizing: border-box;
	padding:25px 25px 0;
}

.jiko_soto{
	margin:10px auto;
	box-sizing: border-box;
	padding:50px;
}

.jikoshoukai_img img{
	width:80%;
	margin:30px 0;
	padding-bottom:10px;
}

/*タブレット用*/
@media screen and (max-width: 768px){

	.top-caption{
		width:500px;
	}

	.item-flex{
		width:640px;
		margin:20px auto -20px;
	}
	
	h1{
		font-size:5rem;
	}
	
	.item-title h2{
		font-size:2.8rem;
	}
	
	.item-title{
		top:-40px;
		left:60px;
	}
	
	.style-flex{
		width:640px;
	}
	
	.reverse .style-wrap h1{
		left:150px;
		top:20px;
	}
		

}

/*タブレット用*/
@media screen and (max-width: 820px){

	.top-caption{
		width:500px;
	}

	.item-flex{
		width:640px;
		margin:20px auto -20px;
	}
	
	h1{
		font-size:5rem;
	}
	
	.item-title h2{
		font-size:2.8rem;
	}
	
	.item-title{
		top:-40px;
		left:60px;
	}
	
	.style-flex{
		width:640px;
	}
	
	.reverse .style-wrap h1{
		left:150px;
		top:20px;
	}

}

/*スマホ用*/
@media screen and (max-width:640px){

	.top-caption{
		width:280px!important;
	}
	
	.item-flex, .style-flex{
		width:320px;
		display:block;
	}
	
	.style-flex{
		padding-bottom:0;
	}
	
	.kore-title{
		width:240px;
		top:10px;
		left:-10px;
	}
	
	.item-title{
		top:-40px;
		left:30px;
	}

	.item-wrap, .item-caption, .style-wrap, .style-caption{
		width:100%;
	}
	
	.style-caption{
		margin-top:40px;
		margin-bottom:40px;
	}

	.jiko_soto{
		padding:0;
	}

}

/* CSS Document */