@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.mainImg {
	display: block;
	padding: 72px 0 57px;
	height: auto;
}
.mainImg h2 {
	margin-bottom: 37px;
	font-size: 4.3rem;
	letter-spacing: .2em;
	text-align: center;
	text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.mainImg .photo {
	text-align: center;
}
.topImg {
	margin-bottom: 144px;
	text-align: center;
}
.mainBox {
	padding-top: 42px;
}
.mainBox .imgBox {
	margin-bottom: 80px;
	display: flex;
	justify-content: space-between;
}
.mainBox .imgBox .photoBox {
	margin: -52px -68px 0 0;
	order: 2;
}
.mainBox .imgBox .textBox {
	margin-top: -14px;
	flex: 1;
}
.mainBox .imgBox .list li {
	padding: 3px 0 0 60px;
	font-size: 2.9rem;
	letter-spacing: 0.1em;
	font-weight: bold;
	position: relative;
}
.mainBox .imgBox .list li::before {
	width: 41px;  
	height: 41px;
	background: url(../img/common/icon04.png) no-repeat left top;
	background-size: 100% auto;
	position: absolute;  
	top: 0;
	left: 0;  
	content: ""; 
}
.mainBox .imgBox .list li + li {
	margin-top: 22px;
}
.mainBox .imgBox .list li .bigSpan {
	font-size: 3.8rem;
	line-height: 1;
	vertical-align: -2px;
}
.mainBox .arrow {
	margin-bottom: 72px;
	text-align: center;
}
.troubles {
	position: relative;
}
.troubles h3 {
	margin-bottom: 65px;
	text-align: center;
	font-size: 3.7rem;
	font-weight: 900;
	letter-spacing: 0.2em;
}
.troubles h3 .txtSpan {
	margin-top: 14px;
	display: block;
	font-size: 4.3rem;
	letter-spacing: 0.2em;
}
.troubles h3 .subSpan01 {
	position: relative;
	z-index: 1;
}
.troubles h3 .subSpan01:after {
	width: 100%;  
	height: 21px;
	background : rgba(193, 39, 45, 0.5);
	position: absolute;  
	bottom: 0;
	left: 0;  
	content: ""; 
	z-index: -1;
}
.troubles h3 .subSpan02 {
	margin-right: 5px;
	font-size: 5.4rem;
}
.troubles .photo {
	margin-bottom: 67px;
	text-align: center;
}
.troubles .subPhoto01 {
	position: absolute;
	top: -55px;
	left: -94px;
}
.troubles .subPhoto02 {
	position: absolute;
	top: -54px;
	right: -48px;
}
.works {
	padding: 40px 0 185px;
}
.works .headLine01 {
	margin-bottom: 30px;
	padding-top: 105px;
	text-align: left;
	position: relative;
	letter-spacing: 0.1em;
}
.works .headLine01 img {
	position: absolute;
	top: 0;
	left: -70px;
}
#instafeed {
	margin-bottom: 27px;
	display: flex;
	flex-wrap: wrap;
}
#instafeed li {
	width: 300px;
	margin: 0 10px 10px 0;
}
#instafeed li:nth-child(4n) {
	margin-right: 0;
}
#instafeed a {
	display: block;
	padding-bottom: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#instafeed a:hover {
	opacity: 0.8;
}
.mainBox .imgBox02 {
	margin-bottom: 195px;
}
.mainBox .imgBox02 h3 {
	margin-bottom: 85px;
	font-size: 3.2rem;
	line-height: 1.8;
	letter-spacing: 0.2em;
}
.mainBox .imgBox02 h3 span {
	position: relative;
	top: -3px;
	font-size: 4rem;
	font-weight: 900;
	vertical-align: 3px;
	letter-spacing: 0.2em;
	background: url(../img/common/line02.png) repeat-x left bottom;
	background-size: 5px auto;
}
.mainBox .imgBox02 .textBox {
	margin-top: -33px;
}
.mainBox .imgBox02 p {
	margin: 0 0 23px 7px;
	font-size: 2.7rem;
	font-weight: bold;
	letter-spacing: 0.2em;
}
.mainBox .imgBox02 .ulBox {
	width: 764px;
	padding: 40px 20px 45px 46px;
	box-sizing: border-box;
	background-color: #fff;
}
.mainBox .imgBox02 .ulBox li {
	letter-spacing: 0.2em;
	line-height: 1.75;
	text-indent: -0.75em;
	padding-left: 0.75em;
}
.mainBox .imgBox03 .photoBox {
	margin: -8px -118px 0 0;
}
.mainBox .imgBox03 p {
	margin: 0 0 40px 15px;
}
.mainBox .imgBox02 .txt {
	margin: 0 50px 0 0;
	font-size: 2.1rem;
	text-align: justify;
	line-height: 1.75;
}
.mainBox .imgBox03 {
	margin-bottom: 74px;
}
.mainBox .imgBox03 h3 {
	margin: 0 -150px 97px 0;
}
.mainBox .textList {
	margin: 0 2px 75px;
}
.mainBox .textList li {
	width: 608px;
}

@media all and (min-width: 897px) {
	.headLine01 {
		font-size: 3.2rem;
	}
	.headLine01 .txtSpan {

	}
	.headLine01 .txtSpan02 {
		margin-top: 12px;
	}
}




@media all and (max-width: 896px) {
	#container {
		background-image: url(../img/index/sp_bg.jpg);
	}
	.mainImg {
		padding: 47px 0 51px;
	}
	.mainImg h2 {
		width: auto;
		margin: 0 0 32px;
		text-align: center;
		font-size: 2.43rem;
		line-height: 1.77;
		text-shadow: 0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,2px 2px 5px rgba(0, 0, 0, 0.5),2px 2px 5px rgba(0, 0, 0, 0.5),2px 2px 5px rgba(0, 0, 0, 0.5),2px 2px 5px rgba(0, 0, 0, 0.5),2px 2px 5px rgba(0, 0, 0, 0.5),0 0 5px #000;
	}
	.mainImg .photo {
		margin: 0 29px;
	}
	.mainImg .photo img {
		width: 100%;
	}
	.mainBox {
		padding-top: 20px;
	}
	.topImg {
		margin: 0 35px 46px;
	}
	.mainBox .imgBox {
		padding-top: 8px;
		margin-bottom: 32px;
		display: block;
	}
	.mainBox .imgBox .photoBox {
		margin: 0 70px 18px;
	}
	.mainBox .imgBox .photoBox img {
		width: 100%;
	}
	.mainBox .imgBox .textBox {
		margin-top: 0;
		position: relative;
		z-index: 1;
	}
	.mainBox .imgBox .textBox .list {
		text-align: center;
	}
	.mainBox .imgBox .list li {
		padding-left: 0;
		font-size: 1.4rem;
		letter-spacing: 0.1em;
		line-height: 1.8;
	}
	.mainBox .imgBox .list li::before {
		position: static;
		width: 20px;
		height: 20px;
		margin: 10px 6px -5px 0;
		display: inline-block;
	}
	.mainBox .imgBox .list li .bigSpan {
		font-size: 1.85rem;
		vertical-align: -1px;
	}
	.mainBox .imgBox .list li + li {
		margin-top: -3px;
	}
	.mainBox .imgBox .list .liStyle {
		margin-top: 6px;
	}
	.mainBox .imgBox .list .liStyle::before {
		margin-top: 0px;
		margin-bottom: -3px;
	}
	.mainBox .arrow {
		margin-bottom: 42px;
	}
	.mainBox .arrow img {
		width: 117px;
	}
	.troubles .subPhoto01 {
		display: none;
	}
	.troubles .subPhoto02 {
		display: none;
	}
	.troubles h3 {
		margin: 0 -10px 23px;
		font-size: 1.4rem;
	}
	.troubles h3 .txtSpan {
		margin-top: 5px;
		font-size: 1.61rem;
	}
	.troubles h3 .subSpan02 {
		font-size: 2rem;
		margin-right: 0;
	}
	.troubles h3 .subSpan01:after {
		height: 12px;
		bottom: -2px;
	}
	.troubles .photo {
		margin: 0 -5px 29px;
	}
	.troubles .photo img {
		width: 100%;
	}
	.works {
		padding: 60px 0 27px;
		text-align: center;
	}
	.works .headLine01 {
		margin-bottom: 17px;
		padding: 15px 40px 0;
		display: inline-block;
		text-align: center;
		position: relative;
		z-index: 1;
		letter-spacing: 0.1em;
	}
	.works .headLine01 img {
		top: -16px;
		width: 113px;
		left: 5px;
		z-index: -1;
	}
	#instafeed {
		margin: 0 13px 13px; 
		justify-content: space-between;
	}
	#instafeed li {
		width: 48.5%;
		margin: 0 0 11px;
	}
	.mainBox .imgBox02 {
		margin-bottom: 17px;
		position: relative;
	}
	.mainBox .imgBox02 .photoBox {
		margin: 0;
		position: absolute;
		top: 0;
		right: -9px;
		width: 207px;
	}
	.mainBox .imgBox02 h3 {
		margin-bottom: 18px;
		font-size: 1.6rem;
		line-height: 1.68;
	}
	.mainBox .imgBox02 h3 span {
		font-size: 2rem;
		top: -1px;
		vertical-align: 0;
		background-size: auto 12px;
	}
	.mainBox .imgBox02 p {
		margin: 0 0 17px;
		font-size: 1.35rem;
	}
	.mainBox .imgBox02 .ulBox {
		width: auto;
		padding: 15px 25px 20px;
	}
	.mainBox .imgBox02 .textBox {
		padding-top: 75px;
	}
	.mainBox .imgBox03 .photoBox {
		width: 156px;
		right: -28px;
	}
	.mainBox .imgBox03 .textBox {
		padding-top: 33px;
	}
	.mainBox .imgBox03 h3 {
		margin: 0 0 28px -5px;
	}
	.mainBox .imgBox03 p {
		font-size: 1.42rem;
		font-weight: 900;
		margin: 0 -10px 23px 0;
	}
	.mainBox .imgBox02 .txt {
		margin: 0;
		font-size: 1.25rem;
		font-weight: normal;
	}
	.mainBox .imgBox03 {
		margin-bottom: 33px;
	}
	.mainBox .textList {
		margin: 0 -1px 30px;
		display: block;
	}
	.mainBox .textList li {
		width: auto;
		margin-bottom: 12px;
	}
	.mainBox .textList li img {
		width: 100%;
	}
	#main {
		overflow: hidden;
	}
}

@media all and (max-width: 374px) {
	.troubles h3 .txtSpan {
		font-size: 1.5rem;
	}
	.troubles h3 .subSpan02 {
		font-size: 1.6rem;
	}
	.mainBox .imgBox02 h3 {
		font-size: 1.5rem;
	}
	.mainBox .imgBox02 .photoBox {
		width: 167px;
	}
	.mainBox .imgBox03 .photoBox {
		width: 140px;
	}
	.mainImg {
		padding-bottom: 16px;
	}
}

@media all and (min-width: 1000px) and (max-width: 1450px) {
	.troubles .subPhoto01 {
		left: -20px;
	}
	.works .headLine01 img {
		left: -20px;
	}
}