@charset "utf-8";
/* story 共通 */
main section article > div:first-of-type > div > .unit:first-of-type {
	position: relative;
}
section:not(.story) h2 {
	font-size: 160%;
	font-weight: bold;
}
main section p:not(:first-of-type) {
	margin-top: 0;
}
main section:not(.story) article > div > p {
	margin-top: 45px;
}
main section:not(.story) article > div:first-of-type .text_1 > p:first-of-type {
	margin-top: 80px;
}

main section article > div:not(:first-of-type) {
	margin-top: 75px;
}
main section article h3 {
	margin-top: 30px;
	font-size: 120%;
	font-weight: bold;
	line-height: 1.5;
}
main section article > div > div .unit p {
	margin-top: 10px !important;
	text-align: right;
}
main section article > div > div .unit p:not(:last-of-type) {
	background-color: #73bfef;
	color: #fff;
	font-size: 86.66%;
	display: block;
	font-weight: bold;
	width: 12em;
	margin-left: auto;
	text-align: center;
	letter-spacing: 0;
}
main section article > div > div .unit p:last-of-type {
	font-size: 113.33%;
	font-weight: bold;
	margin-top: 0 !important;
}
main section article > div > div .unit p:last-of-type span {
	font-size: 66.66%;
	font-weight: normal;
	margin-left: 10px;
}
@media screen and (min-width:769px) {
	main .kv article .catch {
		position: relative;
	}
	section:not(.story) h2.pc_only {
		font-weight: bold;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		position: absolute;
		margin-bottom: 0;
		line-height: 1.3 !important;
		left: 60px;
		height: max-content;
		text-orientation: upright;
		-webkit-text-orientation: upright;
		word-break: break-all;
		top: 0 !important;
	}
	.story article > div > ul .st_locality a::after,
	.story article > div > ul .st_customers a::after,
	.story article > div > ul .st_staff a::after,
	.story article > div > ul li {
		width: 540px;
		height: 340px;
	}
	.story article > div > ul .st_locality a::after {
		background: url(../img/bnr_st_locality_pc_story.jpg) no-repeat center;
		background-size: contain;
	}
	.story article > div > ul .st_customers a::after {
		background: url(../img/bnr_st_customers_pc_story.jpg) no-repeat center;
		background-size: contain;
	}
	.story article > div > ul .st_staff a::after{
		background: url(../img/bnr_st_staff_pc_story.jpg) no-repeat center;
		background-size: contain;
	}
	main .story article {
		height: 530px;
		margin-right: -490px;
	}
	main section:not(.kv):not(.story) article {
		padding: 70px 0 !important;
		max-width: 1400px;
	}
	main section article > div:not(:first-of-type) {
		margin-top: 120px;
	}
	main section article > p {
		text-align: center;
	}
	main section article > div {
		margin: 0 auto;
	}
	main section article > div >.photo {
		margin-top: 0 !important;
		max-width: 667px;
		position: absolute;
		width: 53%;
	}
	main section article > div > div {
		margin: 0;
		position: relative;
	}
	main section article > div:first-of-type > div > .unit {
		position: absolute !important;
		bottom: 20px;
		right: 30px;
	}
	main section article > div.story_3_1 > div .unit p {
		margin-top: 0 !important;
	}
	main section article > div:not(:first-of-type):nth-of-type(even) .photo {
		left: -65px;
	}
	main section article > div:not(:first-of-type):nth-of-type(odd) .photo {
		right: -65px;
	}
	main section article > div:not(:first-of-type) > div {
		max-width: 580px;
		width: 50%;
	}
	
	main section article > div:not(:first-of-type):nth-of-type(even) > div {
		margin-left: auto;
	}
	main section article > div:not(:first-of-type):nth-of-type(odd) > div {
		margin-right: auto;
	}
	section:not(.story).story_3 h2:first-of-type,
	section:not(.story) h2.pc_only {
		font-size: 4vw !important;
		top: 0 !important;
	}
	main section:not(.story) article > div:first-of-type .text_1 > p:first-of-type {
		margin-top: 50px;
	}
	main section article h3 {
		margin-top: 0;
		font-size: 168.75%;
	}
	main section article > div > div .unit .pc_only {
		position: absolute;
		bottom: 20px;
		left: 70px;
	}
	main section article > div > div .unit p:not(:last-of-type) {
		width: 205px;
		font-size: 106.25%;
	}
	main section article > div > div .unit p:last-of-type {
		color: #fff;
		font-size: 137.5%;
		margin-top: 0 !important;
		text-align: left;
	}
	main section article > div .text_1 > p {
		max-width: 760px;
		margin-left: auto;
		width: 70%;
		text-align: left;
	}
}
@media screen and (min-width:1024px) {
	section:not(.story).story_3 h2:first-of-type,
	section:not(.story) h2.pc_only {
		font-size: 36px !important;
	}
}
@media screen and (min-width:1201px) {
	section:not(.story).story_3 h2:first-of-type,
	section:not(.story) h2.pc_only {
		font-size: 300% !important;
	}
}
@media screen and (min-width:1300px) {
	main section article > div:not(:first-of-type):nth-of-type(even) .photo {
		left: -100px;
	}
}
/* story1 */
.story_1 .kv article p:first-of-type {
	background: url("../img/kv_story_1_sp.jpg") no-repeat;
	height: 210px;
	background-size: cover;
	position: relative;
	background-position: top;
	max-height: 210px;
}
.story_1 .kv article .catch span {
	background: url("../img/kv_story_1_txt_sp.png") no-repeat;
	height: 136px;
	width: 43%;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	max-width: 322px;
	max-height: 316px;
}
.story_1 section article > div > div > .photo {
	background: url("../img/photo_story_1_1_sp.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	margin-top: 40px;
	height: 250px;
}
section:not(.story) h2.sp_only {
	position: absolute;
	margin-bottom: 0;
	left: 5%;
}
.story_1 section:not(.story) h2.sp_only {
	width: 27%;
	max-width: 100px;
}
.story_1 section:not(.story) h2.sp_only {
	bottom: -44px;
}
@media screen and (min-width:769px) {
	.story_1 .kv article p:first-of-type {
		background: url("../img/kv_story_1_pc.jpg") no-repeat;
		height: 405px;
		background-size: cover;
		background-position: center;
		max-height: 405px;
	}
	.story_1 .kv article .catch span {
		background: url("../img/kv_story_1_txt_pc.png") no-repeat;
		height: 214px;
		width: 398px;
		background-size: cover;
		position: absolute;
		top: -200px;
		left: 0;
		max-width: none;
		max-height: none;
	}
	.story_1 section article > div > div > .photo {
		background: url("../img/photo_story_1_1_pc.jpg") no-repeat;
		height: 520px;
		width: 100%;
		/*background-position: center;*/
		margin-top: 70px;
	}
	.story_1 section:not(.story) h2.pc_only {
		top: -195px !important;
	}
}
/* story2 */
.story_2 .kv article p:first-of-type {
	background: url("../img/kv_story_2_sp.jpg") no-repeat;
	height: 210px;
	background-size: cover;
	position: relative;
	background-position: top;
	max-height: 210px;
}
.story_2 .kv article .catch span {
	background: url("../img/kv_story_2_txt_sp.png") no-repeat;
	height: 117px;
	width: 47%;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	max-width: 352px;
	max-height: 273px;
}
.story_2 section article > div > div > .photo {
	background: url("../img/photo_story_2_1_sp.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	margin-top: 40px;
	height: 250px;
}
.story_2 section h2.sp_only {
	width: 37%;
	max-width: 150px;
}
@media screen and (min-width:769px) {
	.story_2 .kv article p:first-of-type {
		background: url("../img/kv_story_2_pc.jpg") no-repeat;
		height: 405px;
		background-size: cover;
		background-position: center;
		max-height: 405px;
	}
	.story_2 .kv article .catch span {
		background: url("../img/kv_story_2_txt_pc.png") no-repeat;
		height: 214px;
		width: 419px;
		background-size: cover;
		position: absolute;
		top: -200px;
		left: 0;
		max-width: none;
		max-height: none;
	}
	.story_2 section article > div > div > .photo {
		background: url("../img/photo_story_2_1_pc.jpg") no-repeat;
		height: 520px;
		width: 100%;
		background-position: center;
	}
}
@media screen and (min-width:1201px) {
	.story_2 section:not(.story) h2.pc_only {
		top: -195px !important;
		left: 60px;
	}
}
/* story3 */
.story_3 .kv article p:first-of-type {
	background: url("../img/kv_story_3_sp.jpg") no-repeat;
	height: 210px;
	background-size: cover;
	position: relative;
	background-position: top;
	max-height: 210px;
}
.story_3 .kv article .catch span {
	background: url("../img/kv_story_3_txt_sp.png") no-repeat;
	height: 136px;
	width: 65%;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	max-width: 478px;
	max-height: 316px;
}
.story_3 section article > div > div > .photo {
	background: url("../img/photo_story_3_1_sp.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	margin-top: 40px;
	height: 250px;
}
.story_3 main section:not(.story) article > div:first-of-type .text_1 > p:first-of-type {
	margin-top: 120px;
}
.story_3 main section article > div > div .unit p:not(:last-of-type) {
	width: 185px;
}
.story_3 main section article > div > div .unit:first-of-type p:last-of-type {
	padding-right: 17px;
}
.story_3 main section article > div > div .unit p:last-of-type span:nth-of-type(2) {
	margin-left: 5px;
	font-weight: bold;
}
.story_3 main section article > div > div .unit:first-of-type p:nth-of-type(2) {
	padding-right: 0;
}
.story_3 main section article div .text span {
	display: block;
	font-size: 86.66%;
	line-height: 2;
	margin-top: 20px;
	color: inherit;
}
.story_3 section:not(.story) h2.sp_only {
	width: 27%;
	max-width: 100px;
}
@media screen and (min-width:769px) {
	.story_3 .kv article p:first-of-type {
		background: url("../img/kv_story_3_pc.jpg") no-repeat;
		height: 405px;
		background-size: cover;
		background-position: center;
		max-height: 405px;
	}
	.story_3 .kv article .catch span {
		background: url("../img/kv_story_3_txt_pc.png") no-repeat;
		height: 242px;
		width: 441px;
		background-size: cover;
		position: absolute;
		top: -200px;
		left: 0;
		max-width: none;
		max-height: none;
	}
	.story_3 section article > div > div > .photo {
		background: url("../img/photo_story_3_1_pc.jpg") no-repeat;
		height: 520px;
		width: 100%;
		background-position: center;
	}
	.story_3 main section:not(.story) article > div:first-of-type .text_1 > p:first-of-type {
		margin-top: 50px;
	}
	.story_3 main section article > div > div .unit:first-of-type {
		top: 60px;
		left: 30px;
		right: initial;
	}
	.story_3 main section article > div > div .unit:first-of-type p:nth-of-type(2){
		color: inherit;
	}
	
	.story_3 main section article > div > div .unit:nth-of-type(2) {
		bottom: 60px;
		right: 20px;
	}
	.story_3 main section article > div > div .unit p:last-of-type span:nth-of-type(2) {
		display: none;
	}
	.story_3 main section article > div > div .unit p:not(:last-of-type) {
		width: 258px;
		letter-spacing: 1px;
	}
	.story_3 main section article > div > p span {
		display: block;
		font-size: 81.25%;
	}
}
@media screen and (min-width:1201px) {
	.story_3 section:not(.story) h2.pc_only {
		top: -195px !important;
		left: 60px;
	}
}