@charset "utf-8";

#box {
	position: relative;
}
#box p {
	text-align: center;
}
#box .text1 {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 1.3rem;
	text-shadow: 1px 1px #fff;
	width: 90%;
	line-height: 1.3em;
}
#box p img {
	opacity: 0.5;
}
.box2 p, .box4 p {
	box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}
main ul {
	display: flex;
	margin-top: -6%;
}
main ul li {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 auto;
	width: 25%;
	padding: 4% 0%;
}
main ul li a {
	color: #fff;
	font-size: 1.5em;
}
main ul li a::before{
	transform: skewX(-30deg);
	content: ""; /*ボックスを作る*/
	position: absolute; /*ポジションで中央に配置*/
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; /* 親要素の後ろに来るように-1 */
	background: #667137;
	box-shadow: 9px 7px 3px rgb(0 0 0 / 10%);
}
#content_area #caution {
	margin-top: 3%;
	text-align: center;
	padding: 0 5%;
}
.newInfo {
	position: relative;
	width: 80%;
	padding: 5% 0;
	margin: 10% auto;
	border: solid 1px #000;    	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 3px #000;    /* 外側の線になる一本線の枠線をひく*/
	outline-offset: 5px;        /* 外側の線と内側の線の空き具合を調整*/
}
.newInfo h2 {
	position: absolute;
	top: -5%;
	left: -5%;
	-ms-transform: translate(-5%,-5%);
	-webkit-transform: translate(-5%,-5%);
	transform: translate(-5%,-5%);
	margin: 0;
	padding: 3%;
	background: white;
}
.newInfo dl dt {
	font-weight: bold;
	text-decoration: underline solid black;
}
.newInfo dl {
	display: flex;
	flex-wrap: wrap;
}
.newInfo dt {
	width: 30%;
	padding: 1%;
	margin-bottom: 5%;
	text-align: center;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.newInfo dd {
	width: 70%;
	padding: 1%;
	margin-bottom: 5%;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.newInfo dd:last-of-type,main dt:last-of-type {
	margin-bottom: 0%;
}

#collectionBox {
	text-align: center;
}
.collection1,
.collection2 {
	display: flex;
	margin: 10%;
}
.collection1 .box2,
.collection2 .box4 {
	width: 50%;
}
.collection1 .box3,
.collection2 .box5 {
	text-align: left;
	width: 50%;
	padding: 2%;
}
div.collection2 {
	flex-direction: row-reverse;
}

.collection2 h3,
.collection1 h3 {
	margin-bottom: 10%;
}
.responsive1 .btn2 {
	margin: 10% 30%;
	border-radius: 50px;
}
#items .btn2 {
	margin: 0% auto 10%;
	border-radius: 50px;
	width: 30%;
}
.responsive2 {
	display: flex;
	-webkit-flex-wrap: wrap;/* Safari etc. */
	-ms-flex-wrap: wrap;/* IE10        */
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 5%;
}
#items .responsive2 p {
	width: 31.3%;
	text-align: center;
	margin: 0 auto 10%;
	padding: 1%;
}
h2::after {
    content: "";
    display: none;
    background: #949494;
    width: 7%;
    height: 2px;
    bottom: 0;
    left: 50%;
    margin: 6px auto;
}
h2::before {
    content: "";
    display: none;
    background: #949494;
    width: 7%;
    height: 2px;
    bottom: 0;
    left: 50%;
    margin: 6px auto;
}

#items,
#items2 {
	margin: 0 4%;
	text-align: center;
}
.items p {
	margin: 5% 0;
}
#items p {
    width: 60%;
    margin: 0 auto;
    text-align: left;
}
#items2 dl,#items2 dt {
	text-align: left;
}
#items2 dt{
	/* width: 40%; */
	margin-bottom: 1%;
}
#items2 .leftText {
	padding: 0 5%;
	font-size: 0.9em;
	text-align: left;
}
#items2 dd {
	/* width: 60%; */
	margin-bottom: 1%;
}
.flexitem {
	width: 31.3%;
	margin: 0 auto 10%;
	padding: 1%;
}

.responsive3 {
	display: flex;
	-webkit-flex-wrap: wrap;/* Safari etc. */
	-ms-flex-wrap: wrap;/* IE10        */
	flex-wrap: wrap;
	justify-content: space-around;
}
.flexitem2 {
	width: 31.3%;
	margin: 0 auto 10%;
	padding: 1%;
}
.flexitem2 h3 {
	text-align: left;
	padding: 0 5%;
}
.flexitem2 .itemText {
	margin: 5% 0;
}
.responsive2 img {
	box-shadow: 0px 20px 10px 0px rgb(0 0 0 / 10%);
}
.centerText {
	text-align: center;
	margin-top: 10%;
	padding: 0 5%;
}

#items2 .centerText {
	color: #f37e7e;
	margin-bottom: 5%;
	font-size: 1.125rem;
}
#items2 h2 {
	margin: 0 auto;
}
.centerText strong {
	display: block;
	margin-bottom: 1%;
	color: #f37e7e;
	font-size: 2.25rem;
}

.flexitem2 dl {
	padding: 0 5%;
}
.flexitem2 dl,
.leftText {
	font-size: 1em;
}

@media screen and (max-width: 520px){
	main ul li {
		position: relative;
		z-index: 1;
		text-align: center;
		margin: 0 auto;
		width: 23%;
		padding: 5% 0;
	}
	main ul li a {
		font-size: 1em;
	}
	#items .btn2 {
		margin: 0% auto 10%;
		border-radius: 50px;
		width: 100%;
	}

	.centerText strong {
		font-size: 1.5em;
		text-align: center;
	}
	.centerText {
		padding: 0;
		margin: 10% auto ;
		font-size: 1em;
		text-align: left;
	}
	#content_area #caution {
		text-align: left;
		padding: 0;
		margin-bottom: 15%;
	}

	.newInfo {
		width: 100%;
		margin: 10% auto 15%;
	}
	.newInfo dl {
		padding: 5%;
	}
	#items p {
		width: 50%;
		margin: 0 auto;
		text-align: left;
	}
	.responsive2 img {
		box-shadow: 0px 10px 4px 0px rgb(0 0 0 / 5%);
	}
	.newInfo dt {
		width: 100%;
		padding: 1%;
		margin-bottom: 5%;
		text-align: left;
		box-sizing: border-box;
		border-bottom: none;
	}
	#items2 dd {
		border-bottom: 1px solid #eee;
	}
	.newInfo dd {
		width: 100%;
		padding: 1%;
		margin-bottom: 5%;
		box-sizing: border-box;
	}
	#items p {
		width: 100%;
	}
	.responsive2 p {
		width: 50%;
		box-sizing: border-box;
	}
	.responsive2 {
		margin-top: 10%;
	}
	#items p {
		text-align: left;
	}
	#items, #items2 {
		margin: 0 auto;
	}
	#items .btn2 {
		margin: 0% auto 10%;
	}
	#collectionBox h3,#items h3 {
		text-align: center;
		margin: 10% 0;
	}
	#collectionBox .btn2 {
		width: 100%;
	}
	.flexitem {
		width: 45%;
		margin: 0 auto 8%;
	}
	.flexitem2 {
		width: 100%;
	}
	.collection1,
	.collection2 {
		display: block;
	}
	.responsive1 {
		display: flex;
		flex-direction: column;
	}
	.collection1,
	.collection2,
	.collection1 .box2,
	.collection2 .box4,
	.collection1 .box3,
	.collection2 .box5 {
		margin: 0 auto;
		width: 100%;
	}
	.collection2 h3,
	.collection1 h3 {
		margin-top: 10%;
	}

	.flexitem .itemText,
	.flexitem2 .itemText,
	.flexitem h3,
	.flexitem2 h3 {
		text-align: left;
		margin: 5% 0;
	}
	.newInfo h2 {
		top: -3%;
		left: -3%;
	}

	.collection1 .box3 .btn2 {
		margin: 10% auto;
	}
	.responsive1 .btn2 {
		margin: 10% auto 0;
	}



	#box .text1 {
		font-size: 0.55em;
		top: 55%;
		font-weight: bold;
		text-shadow: 0px 0px #fff;
		padding: 2%;
		width: 70%;
	}
	#items .responsive2 p {
		width: 50%;
	}

}