@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
.mainVisual {
	margin-bottom: 62px;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	height: calc(100vh - 80px);
	box-sizing: border-box;
	background: url(../img/index/main_bg.jpg) no-repeat center center / cover;
}
.mainVisual .inner {
	margin: 0 auto;
	padding: 0 96px 22px 0;
	width: 1150px;
	align-items: end;
	box-sizing: border-box;
}
.mainVisual .inner .title {
	padding-bottom: 4px;
	color: #FFF;
	font-size: 7.2rem;
	font-weight: 500;
	font-family: "Oswald", sans-serif;
	line-height: 1.1;
	text-shadow: 0px 6px 12px #000;
}
.mainVisual .inner .text {
	color: #FFF;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.6;
}
#main {
	margin-bottom: 43px;
}
#main .content {
	width: 1152px;
}
#main .topBox {
	margin-bottom: 69px;
}
#main .topBox .photoBox {
	width: 576px;
}
#main .topBox .textBox {
	margin-top: -8px;
	width: calc(100% - 610px);
}
#main .topBox .textBox h2 {
	margin-bottom: 14px;
	font-size: 2.4rem;
	font-weight: 700;
}
#main .topBox .textBox .txtBox p {
	margin-bottom: 32px;
	font-size: 1.8rem;
	line-height: 1.78;
}
#main .topBox .textBox .txtBox p:last-child {
	margin-bottom: 0;
}
#main section h2 {
	margin-bottom: 57px;
	font-size: 2.2rem;
	font-weight: 700;
}
#main .sec01 {
	margin-bottom: 82px;
}
#main .sec01 .photo {
	margin-left: -156px;
	position: absolute;
	top: 32px;
	left: 50%;
	width: 298px;
}
#main .sec01 .textUl {
	padding: 0 12px 0 17px;
}
#main .sec01 .textUl > li {
	margin-bottom: 57px;
}
#main .sec01 .textUl .subUl li {
	width: 370px;
}
#main .sec01 .textUl .subUl li .subBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .sec01 .textUl li .pho {
	width: 86px;
}
#main .sec01 .textUl li .rBox {
	margin-top: 21px;
	width: calc(100% - 100px);
}
#main .sec01 .textUl li .rBox .ttl {
	margin-bottom: 19px;
	font-size: 2.4rem;
}
#main .sec01 .textUl li .rBox .txt {
	line-height: 1.56;
}
#main .sec02 {
	margin-bottom: 84px;
}
#main .sec02 h2 {
	margin-bottom: 45px;
}
#main .sec02 .content,
#main .sec03 .content {
	width: 1170px;
}
#main .sec02 .photoList {
	padding-right: 15px;
}
#main .sec02 .photoList > li {
	padding: 10px 10px 12px;
	width: 570px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: #F2F2F2;
	box-sizing: border-box;
}
#main .sec02 .photoList > li::before {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 182px;
	background-color: #F4AC27;
	content: '';
}
#main .sec02 .photoList > li::after {
	content: "";
    position: absolute;
    top: 6px;
    left: 5px;
    right: 5px;
	bottom: 6px;
    border-width: 15px;
    border-style: solid;
    border-image: url(../img/index/line.png) 30 30 stretch;
}
#main .sec02 .photoList > li .pho {
	padding-left: 16px;
	width: 245px;
	position: relative;
	z-index: 2;
}
#main .sec02 .photoList > li .txtBox {
	margin-top: 42px;
	width: calc(100% - 292px);
	position: relative;
	z-index: 2;
}
#main .sec02 .photoList > li.reverse .pho {
	padding: 2px 20px 0 0;
	order: 1;
}
#main .sec02 .photoList > li.reverse .txtBox {
	padding: 2px 0 0 16px;
	width: calc(100% - 286px);
}
#main .sec02 .photoList > li .txtBox .headLine01 {
	margin: 0 -16px 75px 0;
}
#main .sec02 .photoList > li .txtBox .headLine01 .en {
	margin-bottom: 5px;
	font-size: 2.8rem;
}
#main .sec02 .photoList > li .textUl {
	margin-bottom: 12px;
}
#main .sec02 .photoList > li .textUl li {
	margin-bottom: 3px;
	padding-left: 18px;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 500;
	text-indent: -1em;
}
#main .sec02 .photoList > li .link {
	width: 172px;
}
#main .sec02 .photoList > li .link a {
	padding: 10px 5px 11px;
	display: block;
	color: #FFF;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	text-align: center;
	background-color: #263238;
	border-radius: 4px;
}
#main .sec02 .photoList > li .link a:hover {
	opacity: 0.7;
}
#main .sec03 h2 {
	margin-bottom: 68px;
}
#main .sec03 .photoUl .slick-slide > div {
	margin-right: 30px;
	width: 370px;
}
#main .sec03 .photoUl .slick-slide > div li {
	border-radius: 7px;
	overflow: hidden;
}
#main .sec03 .photoUl li img {
	width: 100%;
}
#main .sec03 .photoUl .slick-dots {
	margin-top: 40px;
	padding-right: 0;
}
@media all and (max-width: 896px) {
	.mainVisual {
		margin-bottom: 5px;
		padding: 0;
		min-height: 540px;
		display: block;
		background-image: url(../img/index/main_bg_sp.jpg);
	}
	.mainVisual .inner {
		margin: 0;
		padding: 44px 15px 22px;
		width: auto;
		display: block;
		box-sizing: border-box;
	}
	.mainVisual .inner .title {
		margin: 0 0 142px;
		padding-bottom: 0;
		font-size: 5rem;
		font-family: "Hammersmith One", sans-serif;
		font-weight: bold;
		line-height: 1.3;
		text-shadow: inherit;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}
	.ios .mainVisual .inner .title {
		letter-spacing: 0;
	}
	.mainVisual .inner .text {
		text-align: right;
	}
	#main {
		margin-bottom: 35px;
	}
	#main .topBox {
		margin-bottom: 26px;
		display: block;
	}
	#main .topBox .photoBox {
		margin: 0 -9px 15px;
		width: auto;
	}
	#main .topBox .photoBox img {
		width: 100%;
	}
	#main .topBox .textBox {
		margin-top: 0;
		width: auto;
	}
	#main .topBox .textBox h2 {
		margin-bottom: 4px;
		font-size: 2rem;
		line-height: 1.6;
	}
	#main .topBox .textBox .txtBox p {
		margin-bottom: 32px;
		font-size: 1.6rem;
		line-height: 2;
		text-align: justify;
	}
	#main section h2 {
		margin-bottom: 30px;
	}
	#main .sec01 {
		margin-bottom: 27px;
	}
	#main .sec01 .photo {
		margin: 0 31px 21px 20px;
		position: static;
		width: auto;
	}
	#main .sec01 .photo img {
		width: 100%;
	}
	#main .sec01 .textUl {
		padding: 0;
	}
	#main .sec01 .textUl > li {
		margin-bottom: 26px;
	}
	#main .sec01 .textUl > li:last-child {
		margin-bottom: 0;
	}
	#main .sec01 .textUl .subUl {
		display: block;
	}
	#main .sec01 .textUl .subUl li {
		margin-bottom: 26px;
		padding: 0 7px;
		width: auto;
	}
	#main .sec01 .textUl .subUl li:last-child {
		margin-bottom: 0;
	}
	#main .sec01 .textUl li .subBox {
		margin-bottom: 11px;
	}
	#main .sec01 .textUl li .rBox .ttl {
		margin-bottom: 0;
	}
	#main .sec01 .textUl li .txt {
		padding: 0 5px;
		font-size: 1.6rem;
		line-height: 1.56;
	}
	#main .sec02 {
		margin: 0 8px 28px;
	}
	#main .sec02 h2 {
		margin-bottom: 14px;
	}
	#main .sec02 .photoList {
		padding-right: 0;
		display: block;
	}
	#main .sec02 .photoList > li {
		margin: 0 -10px 15px -1px;
		padding: 7px 10px 8px;
		width: auto;
	}
	#main .sec02 .photoList > li:last-child {
		margin-bottom: 0;
	}
	#main .sec02 .photoList > li::before {
		height: 50.2%;
	}
	#main .sec02 .photoList > li::after {
		top: 3px;
		left: 2px;
		right: 2px;
		bottom: 3px;
		border-width: 15px;
		border-style: solid;
		border-image: url(../img/index/line_sp.png) 30 30 stretch;
	}
	#main .sec02 .photoList > li .pho {
		padding-left: 6px;
		width: 148px;
	}
	#main .sec02 .photoList > li .txtBox {
		margin-top: 23px;
		display: flex;
		flex-wrap: wrap;
		justify-content: end;
		width: calc(100% - 163px) !important;
	}
	#main .sec02 .photoList > li.reverse .pho {
		padding: 0 8px 0 0;
	}
	#main .sec02 .photoList > li.reverse .txtBox {
		padding: 2px 0 0 6px;
		justify-content: start;
	}
	#main .sec02 .photoList > li .txtBox .headLine01 {
		margin: 0 0 46px 0;
		font-size: 1.3rem;
	}
	#main .sec02 .photoList > li .txtBox .headLine01 .en {
		margin-bottom: 6px;
		font-size: 1.6rem;
	}
	#main .sec02 .photoList > li.reverse .txtBox .headLine01 {
		margin-bottom: 41px;
	}
	#main .sec02 .photoList > li .textUl {
		margin: 0 0 10px -10px;
	}
	#main .sec02 .photoList > li.reverse .textUl {
		margin-left: -5px;
	}
	#main .sec02 .photoList > li .textUl li {
		margin-bottom: 0;
		padding-left: 12px;
		font-size: 1.2rem;
	}
	#main .sec02 .photoList > li .link {
		margin-left: auto;
		width: 104px;
	}
	#main .sec02 .photoList > li.reverse .link {
		margin: 0 auto 0 0;
	}
	#main .sec02 .photoList > li .link a {
		padding: 6px 5px 8px;
		font-size: 1.1rem;
	}
	#main .sec03 {
		padding: 0 8px;
	}
	#main .sec03 h2 {
		margin-bottom: 17px;
	}
	#main .sec03 .photoUl {
		margin: 0 -16px 0 -6px;
	}
	#main .sec03 .photoUl .slick-slide > div {
		margin-right: 10px;
		width: auto;
	}
	#main .sec03 .photoUl .slick-dots {
		margin-top: 17px;
		padding-right: 7;
	}
}
@media all and (min-width: 415px) and (max-width: 896px) {
	#main .sec02 .photoList > li::after {
		border: 2px dotted #D8D7D4;
	}
}
@media all and (max-width: 374px) {
	.mainVisual .inner .title {
		font-size: 13vw;
	}
	.mainVisual .inner .text {
		font-size: 5vw;
	}
	#main .sec01 .textUl li .rBox .ttl {
		font-size: 6vw;
	}
	#main .sec02 .photoList > li .pho {
		width: 120px;
	}
	#main .sec02 .photoList > li .txtBox {
		width: calc(100% - 140px) !important;
	}
}
@media all and (max-width: 359px) {
	#main .sec02 .photoList > li .txtBox .headLine01 {
		font-size: 1rem;
	}
	#main .sec02 .photoList > li .txtBox .headLine01 .en {
		font-size: 1.3rem;
	}
	#main .sec02 .photoList > li .textUl li {
		font-size: 1.1rem;
	}
}