@charset "utf-8";

/*
about
染の安坊について
*/

.about .breadcrumb .inner {
   background: none;
}

/* #Sec01
-----------------------------------------------------------------*/
.about #Sec01{
	padding: 100px 80px;
	background: url(../images/about/bg_01.png);
	background-repeat: no-repeat;
	background-size: 1550px;
	background-position: top -380px center;
	margin-top: -60px;
}
.about #Sec01 .inner{
	max-width: 1040px;
	margin: 0 auto;
}
.about #Sec01 h2.ttl{
}

.about #Sec01 .part{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 80px;
}
.about #Sec01 .part .txt_box{
	width: 48%;
}
.about #Sec01 .part .ttl{
	font-size: 3.2rem;
	font-family: 'Noto Serif JP', serif;
}
.about #Sec01 .part .ttl span{
	font-size: 5rem;
}
.about #Sec01 .part .txt{
	margin-top: 10px;
}
.about #Sec01 .part .more_btn_bl{
	margin-top: 30px;
}
.about #Sec01 .part .img{
	width: 48%
}
.about #Sec01 .part .img img{
	width: 100%;
	height: auto;
}

.about #Sec01 .box_01{
}
.about #Sec01 .box_01 .img{
	position: relative;
}
.about #Sec01 .box_01 .img:after{
	content: "";
	position: absolute;
	bottom: -150px;
	right: 200px;
	z-index: -1;
	width: 540px;
	height: 544px;
	background-image: url(../images/about/bg_02.png);
	background-size: 540px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_02{
	flex-flow: row-reverse;
}
.about #Sec01 .box_02 .img{
	position: relative;
}
.about #Sec01 .box_02 .img:after{
	content: "";
	position: absolute;
	bottom: -150px;
	left: 200px;
	z-index: -1;
	width: 486px;
	height: 488px;
	background-image: url(../images/about/bg_03.png);
	background-size: 486px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_03{
}
.about #Sec01 .box_03 .img{
	position: relative;
}
.about #Sec01 .box_03 .img:after{
	content: "";
	position: absolute;
	bottom: -150px;
	right: 200px;
	z-index: -1;
	width: 623px;
	height: 580px;
	background-image: url(../images/about/bg_04.png);
	background-size: 623px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_04{
	flex-flow: row-reverse;
}
.about #Sec01 .box_04 .img{
	position: relative;
}
.about #Sec01 .box_04 .img:after{
	content: "";
	position: absolute;
	bottom: -150px;
	left: 200px;
	z-index: -1;
	width: 540px;
	height: 544px;
	background-image: url(../images/about/bg_02.png);
	background-size: 540px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_05{
}

.about #Sec01 .btn_box{
	margin-top: 150px;
}
.about #Sec01 .btn_box ul{
	display: flex;
	justify-content: space-between;
}
.about #Sec01 .btn_box ul li{
	width: 48%;
}
.more_btn_bl a{
	width: 100%;
}

@media screen and (max-width: 1020px) {
/* 1020pxまでの幅の場合に適応される */


/* 1020pxまでの幅の場合に適応される */
}

@media screen and (max-width: 767px) {
/* 767pxまでの幅の場合に適応される */

/* #Sec01
-----------------------------------------------------------------*/
.about #Sec01{
	padding: 40px 50px 60px;
	margin-top: 0;
}
.about #Sec01 .part{
	display: block;
	margin-top: 60px;
}
.about #Sec01 .part .txt_box{
	width: 100%;
}
.about #Sec01 .part .ttl{
	font-size: 2.3rem;
}
.about #Sec01 .part .ttl span{
	font-size: 3rem;
}
.about #Sec01 .part .txt{
	margin-top: 10px;
}
.about #Sec01 .part .more_btn_bl{
	margin-top: 30px;
}
.about #Sec01 .part .img{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

.about #Sec01 .box_01{
	flex-flow: row-reverse;
}
.about #Sec01 .box_01 .img{
	position: relative;
}
.about #Sec01 .box_01 .img:after{
	content: "";
	position: absolute;
	bottom: -30px;
	right: 100px;
	z-index: -1;
	width: 330px;
	height: 340px;
	background-image: url(../images/about/bg_02.png);
	background-size: 330px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_02{
	
}
.about #Sec01 .box_02 .img{
	position: relative;
}
.about #Sec01 .box_02 .img:after{
	content: "";
	position: absolute;
	bottom: -30px;
	left: 100px;
	z-index: -1;
	width: 330px;
	height: 340px;
	background-image: url(../images/about/bg_03.png);
	background-size: 330px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_03{
	flex-flow: row-reverse;
}
.about #Sec01 .box_03 .img{
	position: relative;
}
.about #Sec01 .box_03 .img:after{
	content: "";
	position: absolute;
	bottom: -40px;
	right: 100px;
	z-index: -1;
	width: 400px;
	height: 375px;
	background-image: url(../images/about/bg_04.png);
	background-size: 400px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_04{
	
}
.about #Sec01 .box_04 .img{
	position: relative;
}
.about #Sec01 .box_04 .img:after{
	content: "";
	position: absolute;
	bottom: -30px;
	left: 100px;
	z-index: -1;
	width: 330px;
	height: 340px;
	background-image: url(../images/about/bg_02.png);
	background-size: 330px auto;
	background-repeat: no-repeat;
}
.about #Sec01 .box_05{
flex-flow: row-reverse;
}

.about #Sec01 .btn_box{
	margin-top: 80px;
}
.about #Sec01 .btn_box ul{
	display: block;
}
.about #Sec01 .btn_box ul li{
	width: 100%;
	margin-top: 20px;
}
.more_btn_bl a{
	width: 100%;
}

/* 767pxまでの幅の場合に適応される */
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */


/* 640pxまでの幅の場合に適応される */
}