@charset "utf-8";

/* ボタン */
.more-box {
	margin:30px auto 0px auto;
}
.more-box .more{
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	letter-spacing: 0.2em;
	text-align: center;
}
.more-box .more:before{
	width:1px;
	height:57px;
	background:#000;
	display: block;
	margin:0 auto 23px auto;
	content:"";
}
.more-box .more a{
	position:relative;
	border:1px solid;
	background-color:#FDF8F5;
	padding:8px 39px;
	position:relative;
	transition: all .3s;
	top:0;
}
.more-box .more a:hover{
	opacity: 1;
	top:-3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.more-box .more a::after {
    /*content: '';*/
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -10px;
    left: 0%;
    /*線の形状*/
    width: 100%;
    height: 2px;
    background:#000;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}*/

/*現在地とhoverの設定*/
.more-box .more a:hover{
	opacity: 1;
}
.more-box .more a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
@media (max-width: 850px){
	.more-box .more:before{
		height:46px;
		margin:0 auto 10px auto;
	}
	.more-box .more{
		font-size:14px;
	}
	.more-box .more a{
		padding:3px 30px;
	}
}
@media (max-width: 850px){
	.vm.sp_only{
		font-family: 'Nanum Myeongjo';
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0.3em;
		color:#0752C8;
		display: flex !important;
		width:100%;
		justify-content: center;
		align-items: center;
		height:50px;
		cursor: pointer;
		transition: ease 0.3s;
		overflow: hidden;
	}
	.vm.action{
		height:0;
	}
	.vm:before{
		content:"";
		width:15px;
		height:9px;
		background-image:url("../img/viewmore.png");
		background-repeat: no-repeat;
		background-size:contain;
		margin-right:15px;
		display: block;
	}
}

/* ボタン end */
/*改行系*/
.pc_only{
	display:block !important;
}
.sp_only{
	display:none !important;
}
@media (max-width: 850px){
	.pc_only{
		display:none !important;
	}
	.sp_only{
		display:block !important;
	}
}

/*h2*/
h2{
    width:1146px;
    margin: 0 auto;
	color:#0752C8;
	font-size:40px;
	font-weight: 700;
	font-family: 'Nanum Myeongjo';
	margin-bottom: 50px;
}

h3.on-boarder{
	text-align: center;
	margin-bottom: 47px;
}
h3.on-boarder span{
	font-family: "Sawarabi Mincho";
	font-size: 24px;
	font-weight: 500;
	line-height: 43px;
	letter-spacing: 0.2em;
	text-align: center;
	border-bottom: 1px solid;
	padding-bottom: 5px;

}
@media (max-width: 850px){
	h2{
		width:100%;
		padding:0 25px;
		font-size:24px;
		margin-bottom: 30px;
	}
	h3.on-boarder{
		text-align: center;
		margin-bottom: 44px;
	}
	h3.on-boarder span{
		font-size: 16px;
		line-height: 29px;
		letter-spacing: 0.2em;
		padding:0 5px 5px 5px;
	
	}
}
/*header*/
header{
	border-bottom: 1px solid;
}
header .container{
	height:90px;
	align-items: center;

}
header .container li{
	font-size:20px;
	font-weight: 700;
	font-family: 'Nanum Myeongjo';
}
header .container li a{
	transition: ease 0.3s;
}
header .container li a:hover{
	color:#0752C8;
	opacity: 1;
}
header .left{
	width:300px;
}
header .right{
	width:260px;
}
@media (max-width: 850px){
	header{
		position: fixed;
		top:-61px;
		transition: ease 0.3s;
		width: 100%;
		background: #FFB697;
		z-index:3;
	}
	.hc header{
		top:0;
	}
	header .container{
		height:60px;
	}
	header .left{
		width:70%;
	}
	header .right{
		width:15%;
	}
	header .container li{
		font-size: 15px;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 0.1em;
	}	
}
/*logo*/
.logo{
	width:457px;
	background-color: #FFB697;
	margin:-45px auto 0 auto;
}
.logo h1{
	width:360px;
	margin:0 auto;
}
@media (max-width: 850px){
	.logo{
		width:220px;
		background-color: #FFB697;
		margin:0px auto -10px auto;
		position: relative;
		z-index: 2;
		padding-top:10px;
	}
	.logo h1{
		width:180px;
		margin:0 auto;
	}	
}
/*fv*/
#fv .container{
	position: relative;
	overflow: hidden;
}
#fv .container figure{
	position: absolute;
	top:50px;
	left:-4%;
	width: 40%;
}
#fv .txt{
	margin:0 auto;
	padding: 100px 0 300px 0;
	justify-content: center;
	flex-direction: row-reverse;
}
#fv .txt p.p1{
	margin-left:80px;
}
#fv .txt p.p2{
	letter-spacing: 4px;
	line-height: 45px;
	padding-left:200px;
	font-size:16px;
	font-weight: 500;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap
}
@media (max-width: 1350px){
	#fv .container figure{
		width:30%;
		top:250px;
	}
}
@media (max-width: 850px){
	#fv{
		border-top:1px solid;
	}
	#fv .container figure{
		top:120px;
		width:50%;
	}
	#fv .txt{
		margin:0 auto;
		padding: 100px 20px 50px 20px;
		justify-content: flex-start;
		flex-direction: column;
		
	}
	#fv .txt p.p1{
		font-size: 18px;
		line-height: 50px;
		letter-spacing: 0.2em;
		font-family: "Sawarabi Mincho";
		color:#0752C8;
		width:50%;
		margin:0 0 150px auto;
	}
	#fv .txt p.p2{
		font-size: 13px;
		font-weight: 400;
		line-height: 23px;
		letter-spacing: 0.2em;
		-ms-writing-mode: lr;
		writing-mode: horizontal-tb;
		padding:0;
		margin-bottom: 20px;
	}
}
/*c1*/
#c1{
	background:#FFEFE6;
	padding:100px 0 0 0;
}
#c1 .two-clm{
	position: relative;
}
#c1 .two-clm:before{
	position: absolute;
	width:10%;
	height:100%;
	left:0;
	top:0;
	background-color: #FFB697;
	content:"";
	display: block;
	z-index: 0;
}
#c1 .left{
	width:50%;
	height:243px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	z-index:2;
	position: relative;
}
#c1 .left h3{
	font-family: "Sawarabi Mincho";
	font-size: 24px;
	font-weight: 500;
	line-height: 35px;
	letter-spacing: 0.2em;
}
#c1 .left h3 span{
	font-family: 'Nanum Myeongjo';
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-align: center;
	display: block;
}
#c1 .left figure{
	width:125px;
	margin-left:115px;
}
#c1 .right{
	width:45%;
}
#c1 .right h4{
	font-family: 'Nanum Myeongjo';
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.2em;
	margin-bottom: 50px;
}
#c1 .right h5{
	font-size: 16px;
	font-weight: 400;
	line-height: 29px;
	letter-spacing: 0.1em;
	margin-bottom: 15px;
}

#c1 .right .list-block{
	margin-bottom: 60px;
}
#c1 .right .list-block ul{
	border-left:1px solid;
	margin-left:10px;
	padding-left:30px;
}
#c1 .right .list-block ul li{
	margin-bottom: 10px;
	line-height: 26px;
}
#c1 .right .list-block ul li dt{
	width:100px;
}
#c1 .one-clm{
	background-color: #FFB697;
	padding:70px 0;
}
#c1 .one-clm .feature-block{
	width:254px;
}
#c1 .one-clm .feature-block .num{
	font-family: 'Nanum Myeongjo';
	font-size: 36px;
	font-weight: 700;
	line-height: 65px;
	letter-spacing: 0.1em;
	text-align: center;
	color: #0752C8;
}
#c1 .one-clm .feature-block h4{
	font-family: "Sawarabi Mincho";
	font-size: 18px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 0.2em;
	text-align: center;
	margin-bottom: 20px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#c1 .one-clm .feature-block p{
	line-height: 25px;
	letter-spacing: 0.1em;
}
@media (max-width: 850px){
	#c1{
		padding:40px 0 0 0;
	}
	#c1 .two-clm:before{
		display: none;
	}
	#c1 .left{
		width:100%;
		height:120px;
		margin-bottom: 50px;
	}
	#c1 .container:first-of-type .left h3{
		width:60%;
	}
	#c1 .left h3{
		font-family: "Sawarabi Mincho";
		font-size: 18px;
		line-height: 26px;
		letter-spacing: 0.2em;
		text-align: center;
	}
	#c1 .left h3 span{
		font-size: 12px;
		line-height: 15px;
		margin-bottom: 10px;
	}
	#c1 .left figure{
		width:60px;
		margin-left:30px;
	}
	#c1 .right{
		width:100%;
		padding:0 25px;
	}
	#c1 .right h4{
		font-size: 18px;
		line-height: 22px;
		margin-bottom: 20px;
		text-align: center;
	}
	#c1 .right h5{
		font-size: 14px;
		line-height: 25px;
		margin-bottom: 15px;
	}

	#c1 .right .list-block{
		margin-bottom: 40px;
	}
	#c1 .right .list-block ul{
		margin-left:5px;
		padding-left:10px;
	}
	#c1 .right .list-block ul li{
		margin-bottom: 10px;
		font-size:12px;
		line-height: 21px;
	}
	#c1 .right .list-block ul li dt{
		width:90px;
		font-size:12px;
	}
	#c1 .right .list-block ul li dd{
		font-size:12px;
	}
	#c1 .one-clm .feature-block{
		width:100%;
		margin-bottom: 40px;
	}
	#c1 .one-clm .feature-block .title{
		display: flex;
		margin-bottom:15px;
		justify-content: center;
	}
	#c1 .one-clm .feature-block .title .num{
		margin-right: 30px;
	}
	#c1 .one-clm .feature-block h4{
		font-size:16px;
		line-height: 28px;
	}
	#c1 .one-clm .feature-block p{
		font-size:12px;
		line-height: 22px;
	}
}
/*c2*/
#c2{
	background:#FFEFE6;
	padding:100px 0;
}
#c2 .outline h3{
	margin-bottom: 80px;
}
.works-block{
	margin-bottom:150px;
	position: relative;
}
.works-block .img{
	width:38%;
	height:27vw;
	position: absolute;
	left:0;
	z-index:2;
	overflow:hidden;
}
.swiper-pagination-bullets{
	text-align: center;
	margin-top:20px;
}
.swiper-pagination-bullets span{
	width:30px;
	height:5px;
	border-radius: 1px;
	margin:0 15px !important;
	background-color:#FFB8A1;
	opacity: 1;
}
.swiper-pagination-bullets .swiper-pagination-bullet-active{
	background-color:#0752C8;
}
.works-block.reverse .img{
	right:0;
	left:auto;
	z-index: 2;
}
.works-block .inner{
	position: relative;
	z-index: 1;
}
.works-block:after{
	content:"";
	width:95%;
	background: #FDF8F5;
	height:100%;
	display: block;
	position: absolute;
	top:50px;
	right:0;
	z-index:0;
}
.works-block.reverse:after{
	right:auto;
	left:0;
}
.works-block .txt{
	width:50%;
	margin:0 0 0 auto;
	padding-top:100px;
	position: relative;
	z-index: 2;
}
.works-block.reverse .txt{
	margin:0 auto 0 0;
}

.works-block .txt h4{
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 0.2em;
	margin-bottom: 30px;
}
.works-block .txt .detail p{
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.2em;
	margin-bottom: 10px;
}
.works-block.wb1 .txt .detail{
	margin-bottom: 70px;
}
.works-block .txt .detail{
	margin-bottom: 45px;
}

.works-block .txt .list-block ul{
	border-left:1px solid;
	padding-left:20px;
}
.works-block .txt .list-block ul li{
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.2em;
	margin-bottom: 10px;
}
.works-block .txt .link-block ul li{
	margin-bottom: 30px;
}
.works-block .txt .link-block ul li a{
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.2em;
	color: #0752C8;
}
#c2 .workshop h3{
	margin-bottom: 30px;
}
.workshop .center{
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 30px;
}
.workshop .swiper-container6{
	padding-bottom: 180px;
	position: relative;
	overflow:hidden;
	width: 100%;
}
.workshop .swiper-container6:after{
	content:"";
	width:100%;
	height:80%;
	background: #FDF8F5;
	position: absolute;
	bottom: 0;
	left:0;
}
.swiper-button-prev6{
	position: absolute;
	top:12vw;
	left:24%;
	width:20px;
	height:20px;
	z-index:3;
	content:"";
	border-left: 1px solid #0752C8;
	border-bottom: 1px solid #0752C8;
	transform: rotate(45deg);
	cursor:pointer;
}
.swiper-button-next6{
	position: absolute;
	top:12vw;
	right:24%;
	width:20px;
	height:20px;
	z-index:3;
	border-top: 1px solid #0752C8;
	border-right: 1px solid #0752C8;
	transform: rotate(45deg);
	cursor:pointer;
}
.workshop li p{
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: 0.2em;
	text-align: center;
	margin-top:70px;
}
.workshop .swiper-pagination-bullets{
	margin-top: -90px;
	position: relative;
	z-index: 2;
}
@media (max-width: 850px){
	#c2{
		background:#FFEFE6;
		padding:40px 0;
	}
	#c2 .outline h3{
		margin-bottom: 30px;
	}
	.works-block{
		margin-bottom:40px;
		position: relative;
	}
	.works-block .img{
		width:100%;
		height:auto;
		position: static;
		left:0;
		z-index:2;
		overflow:hidden;
	}
	.works-block .txt{
		width:100%;
		margin:0 0 0 auto;
		padding-top:10px;
		padding-bottom: 40px;
		position: relative;
		z-index: 2;
	}
	.swiper-pagination-bullets{
		position: relative;
		z-index: 3;
	}
	.swiper-pagination-bullets span{
		width:18px;
		height:3px;
		margin:0 8px !important;
	}
	.works-block:after{
		width:100%;
		top:0px;
	}
	.works-block .txt h4{
		font-size: 16px;
		line-height: 23px;
		margin-bottom: 20px;
	}
	.works-block .txt .detail p{
		font-size: 12px;
		line-height: 19px;
		margin-bottom: 10px;
	}
	.works-block.wb1 .txt .detail{
		margin-bottom: 30px;
	}
	.works-block .txt .detail{
		margin-bottom: 30px;
	}
	.works-block .txt .list-block ul li{
		font-size: 12px;
		line-height: 17px;
	}
	.works-block .txt .link-block ul li a{
		font-size: 12px;
		line-height: 17px;
	}
	.workshop .center{
		font-size: 12px;
		line-height: 22px;
		text-align: left;
		margin-bottom: 30px;
		padding:0 25px;
	}
	.workshop .swiper-container6{
		padding-bottom: 110px;
		position: relative;
	}
	.workshop li p{
		font-size: 13px;
		line-height: 29px;
		margin-top:44px;
		text-align: left;
		padding:0 25px;
	}
	.workshop .swiper-pagination-bullets{
		margin-top: -90px;
		position: relative;
		z-index: 2;
	}
	.workshop .more-box{
		margin:-40px 0 30px 0;
		position: relative;
		z-index: 3;
	}
	.swiper-button-prev6{
		position: absolute;
		top:25vw;
		left:5%;
		width:20px;
		height:20px;
		z-index:3;
		content:"";
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		transform: rotate(45deg);
		cursor:pointer;
	}
	.swiper-button-next6{
		position: absolute;
		top:25vw;
		right:5%;
		width:20px;
		height:20px;
		z-index:3;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(45deg);
		cursor:pointer;
	}
}
/*c3*/

#c3{
	padding:100px 0;
}
#c3 .center{
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.2em;
	text-align: center;
	margin-top: -85px;
}
@media (max-width: 850px){
	#c3{
		padding:40px 0;
	}
	#c3 .center{
		font-size: 12px;
		line-height: 30px;
		margin-top: 0px;
	}
	#c3 .more-box{
		margin:10px auto 0 auto;
	}
}
footer{
	border-top: 1px solid;
	padding:35px 0;
}
footer .copy{
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-align: center;
	font-family: 'Nanum Myeongjo';
}
@media (max-width: 850px){
	footer{
		border-top: 1px solid;
		padding:20px 0;
	}
	footer .copy{
		font-size: 12px;
	}	
}