@charset "utf-8";
/* CSS Document */

.page-top {
    background: center center / cover no-repeat url(../img/ttl-bg.jpg);
}

.main p{
	font-size:18px;
	line-height:36px;
	letter-spacing:0.5px;
}

.history{
	background-color:#F9F3EE;
	padding:150px 0 100px;
	box-sizing:border-box;
}
.history > div{
	text-align:center;
}
.history > div p{
}
/*.history > div p span{
	font-size:16px;
	font-weight:500;
}*/
.history > div p:first-of-type{
	margin-bottom:130px;
}
.history > div p:last-of-type{
	max-width:880px;
	width:100%;
	margin:40px auto 0;
	text-align:left;
}
.history > div h3{
}
.history > div img{
	margin:60px 0;
}

.culture{
	padding:150px 0;
}
.culture .flex{
	justify-content:space-between;
	margin-bottom:75px;
}
.culture .flex:last-of-type{
	margin-bottom:0;
}
.culture .box{
	text-align:left;
	width:39%;
}
.culture .box h3{
	text-align:left;
	font-size:36px;
	margin-bottom:10px;
}
.culture .box p{
}
.culture .box p span{
	font-weight:600;
}
.culture img{
	width:48%;
}

.element{
	background-color:#F9F3EE;
	padding:100px 0 60px;
	box-sizing:border-box;
}
.element > div > h3{
}
.element > div > p{
	text-align:left;
	max-width:580px;
	width:100%;
	margin:50px auto;
}
.box-wrap{
	justify-content:space-between;
	flex-wrap: wrap;
}
.box-wrap > div{
	position:relative;
	text-align:center;
	padding:55px 35px 35px;
	box-sizing:border-box;
	background-color:#FFFFFF;
	border-radius:10px;
	width:30%;
	margin-bottom:60px;
}
.box-wrap > div h5{
	position:absolute;
	top:45px;
	left:45px;
	font-size:32px;
	letter-spacing:0.5px;
}
.box-wrap > div h5:after{
	content:"";
	position:absolute;
	bottom:13px;
	right:-40px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width:70px;
	border-top:1px solid #000000;
	z-index:1;
}
.box-wrap > div h4{
	font-size:34px;
	margin-bottom:5px;
}
.box-wrap > div img{
	display:block;
	margin:0 auto;
}
.box-wrap > div p{
	line-height:24px;
}

.event{
	padding:120px 0;
}
.event h3{
	margin-bottom:100px;
}
.event h4{
	color:#2e1c12;
	font-size:30px;
	border-bottom:2px solid #2e1c12;
	padding-bottom:50px;
	margin-bottom:50px;
}

@media screen and (max-width: 767px) {
    .page-top {
        background: center center / cover no-repeat url(../img/ttl-bg-sp.jpg);
    }
	
	.wrap{
		padding:0;
	}
	
	.main p{
		font-size:17px;
		line-height:34px;
	}
	
	.history{
		padding:0 0 50px;
	}
	.history > div{
		text-align:left;
	}
	.history > div p:first-of-type{
		background-color:#FFFFFF;
		padding:60px 35px 50px;
	}
	.history > div p:last-of-type{
		padding:0 35px;
		margin:10px auto 0;
	}
	/*.history > div p span{
		font-size:15px;
	}*/
	.history > div img{
		margin:20px 0;
		width:100%;
	}
	
	.culture{
		padding:50px 0;
	}
	.culture .flex{
		display:block;
		margin-bottom:35px;
	}
	.culture .flex.reverse{
		display:flex;
		flex-direction: column-reverse;
	}
	.culture .box,
	.culture img{
		width:100% !important;
	}
	.culture .box{
		padding:25px 35px 15px;
	}
	.culture .box h3{
		font-size:28px;
		margin-bottom:0;
	}
	
	.element{
		padding:50px 0 30px;
	}
	.element > div > h3{
		font-size:30px;
	}
	.element > div > p{
		margin:10px auto 60px;
	}
	.box-wrap{
		padding:0 35px;
		box-sizing:border-box;
	}
	.box-wrap > div{
		width:48%;
		margin-bottom:30px;
	}
	.box-wrap > div h4{
		font-size:28px;
	}
	
	.event{
	}
	.event h3{
		font-size:30px;
	}
	.event h4{
		font-size:28px;
		margin-bottom:35px;
		padding:0 35px 35px;
	}
	
}

/* NotePC - iPadPro */
@media screen and (max-width: 1279px) {

}

/* iPadPro - iPad */
@media screen and (max-width: 1024px) {
	
	.culture .box{
		width:45%;
	}

}

/* 小型Tablet */
@media screen and (max-width: 767px) {
    header {
        background: linear-gradient(to top, #000, #000 1px, #fff 1px, #fff 2px, #000 2px, #000 4px, #fff 4px, #fff), #fff;
    }
}

/* Smartphone */
@media screen and (max-width: 500px) {
	
	.main p{
		font-size:3.4vw;
		line-height:7vw;
	}
	
	.history{
		padding:0 0 5vw;
	}
	.history > div p:first-of-type{
		padding:10vw 4vw 8vw;
		margin-bottom:8vw;
	}
	.history > div p:last-of-type{
		padding:0 4vw;
		margin:3vw auto 0;
	}
	/*.history > div p span{
		font-size:3.3vw;
	}*/
	
	.culture .box{
		padding:3vw 4vw 2vw;
	}
	.culture .box h3{
		font-size:4.5vw;
	}
	
	.element{
		padding:9vw 0 3vw;
	}
	.element > div > h3{
		font-size:5vw;
	}
	.element > div > p{
		margin:5vw 0 12vw;
		padding:0 8vw;
		box-sizing:border-box;
	}
	.box-wrap{
		padding:0 4vw;
	}
	.box-wrap > div{
		padding:10vw 0 8vw;
		margin-bottom:5vw;
	}
	.box-wrap > div h5{
		font-size:4.8vw;
		top:9vw;
		left:4vw;
	}
	.box-wrap > div h5:after{
		width:12vw;
		bottom:2vw;
		right:-8vw;
	}
	.box-wrap > div h4{
		font-size:4.5vw;
	}
	.box-wrap > div img{
		max-width:6vw;
	}
	
	.event{
		padding:20vw 0;
	}
	.event h3{
		font-size:5vw;
		margin-bottom:12vw;
	}
	.event h4{
		font-size:4.2vw;
		padding:0 4vw 6vw;
		margin-bottom:6vw;
	}
    
}