@charset "utf-8";

#contents_area {
	--c-bg: #d5dbe3;
	--c-text: #353535;
	--c-red: #d7261c;
	--c-border: #707070;
}

@media print, screen and (min-width : 769px){
	#contents_area {
		background: var(--c-bg);
	}

	.section {
		position: relative;
		z-index: 1;
		color: var(--c-text);
	}
	.section img {
		display: block;
		width: 100%;
	}
	.section sup {
		vertical-align: top;
		font-size: 75%;
	}

	.block_inner {
		width: 950px;
	}


/* ----------------------------------------
	section_title
---------------------------------------- */

	#section_title {
		display: flex;
		align-items: center;
		height: 430px;
		background: url(../img/kv_bg_pc.jpg) 50% 50% / cover no-repeat;
	}
	#section_title::before {
		content: '';
		position: absolute;
		left: calc(50% - 62px);
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: url(../img/kv_pc.png) 0 0 / auto 100% no-repeat;
	}

	#section_title .block {
		filter: drop-shadow(0 0 20px #fff);
	}

	#section_title h2 {
		letter-spacing: .045em;
		font-family: var(--font-bold);
		font-size: 40px;
		line-height: calc(56 / 40);
	}
	#section_title p {
		margin-top: 19px;
		letter-spacing: .1em;
		font-family: var(--font-bold);
		font-size: 20px;
		line-height: calc(32 / 20);
	}


/* ----------------------------------------
	section_item
---------------------------------------- */

	#section_item {
		margin-top: 100px;
		padding-bottom: 100px;
	}

	#section_item .list>li {
		position: relative;
		z-index: 1;
	}
	#section_item .list>li::before {
		content: '';
		position: absolute;
		left: calc(50% - 50vw);
		right: calc(50% - 50vw);
		top: 0;
		z-index: 1;
		height: 378px;
		background: #fff;
	}

	#section_item .list .num {
		position: absolute;
		z-index: 1;
	}
	#section_item .list .num img {
		width: auto;
	}

	#section_item .list figure {
		position: absolute;
		z-index: 2;
	}
	#section_item .list li>div {
		position: relative;
		z-index: 1;
	}

	#section_item .list .text {
		box-sizing: border-box;
		min-height: 378px;
		padding: 44px 0 20px;
		white-space: nowrap;
	}

	#section_item .list h3 {
		font-family: var(--font-bold);
		font-size: 46px;
	}
	#section_item .list h3 span,
	#section_item .list h3 small {
		letter-spacing: .05em;
	}
	#section_item .list h3 span {
		display: inline-block;
		margin-bottom: 20px;
		vertical-align: top;
		font-size: 25px;
	}
	#section_item .list h3 small {
		display: block;
		margin: 10px 0 -4px;
		text-indent: -.5em;
		font-size: 21px;
		line-height: calc(29 / 21);
	}

	#section_item .list .text p {
		margin: 18px 0 -6px;
		letter-spacing: .03em;
		font-size: 18px;
		line-height: calc(30 / 18);
	}
	#section_item .list .text p small {
		display: inline-block;
		margin: 8px 0 2px;
		vertical-align: top;
		font-size: 13px;
		line-height: calc(21 / 13);
	}

	#section_item .list .btn {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 169px;
		height: 40px;
		margin: -20px 0;
		padding-left: 15px;
		border-radius: 10px;
		background: var(--c-red);
		font-family: var(--font-bold);
		color: #fff !important;
		font-size: 16px;
	}
	#section_item .list .btn::after {
		content: '';
		position: absolute;
		right: 14px;
		top: 0;
		bottom: 0;
		z-index: 1;
		width: 22px;
		background: url(../img/btn_arrow.svg) 100% 50% / contain no-repeat;
	}

	#section_item .list .movie {
		width: 585px;
		margin: 44px auto 0;
	}
	#section_item .list .movie a::after {
		background-image: url(../img/btn_play.svg);
		background-size: 72px;
	}

	/* item01
	---------------------------------------- */

	#section_item .item01 .num {
		left: 16px;
		top: -58px;
	}

	#section_item .item01 figure {
		left: 65px;
		top: -111px;
		width: 325px;
	}

	#section_item .item01 .text {
		padding-left: 420px;
	}

	#section_item .item01 .btn {
		margin-left: 143px;
	}

	#section_item .item01 .movie {
		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
	}

	/* item02
	---------------------------------------- */

	#section_item .item02 {
		margin-top: 104px;
	}

	#section_item .item02 .num {
		right: 52px;
		top: -74px;
	}

	#section_item .item02 figure {
		right: -36px;
		top: -65px;
	}

	#section_item .item02 .btn {
		margin-left: 600px;
	}

	/* item03
	---------------------------------------- */

	#section_item .item03 {
		margin-top: 167px;
	}

	#section_item .item03 .num {
		left: 0;
		top: -109px;
	}

	#section_item .item03 figure {
		left: 7px;
		top: -82px;
	}

	#section_item .item03 h3 small {
		margin-left: .5em;
	}

	#section_item .item03 .text {
		padding-left: 505px;
	}

	#section_item .item03 .btn {
		margin-left: 183px;
	}

	/* item04
	---------------------------------------- */

	#section_item .item04 {
		margin-top: 96px;
	}

	#section_item .item04 .num {
		right: 46px;
		top: -61px;
	}

	#section_item .item04 figure {
		right: 71px;
		top: -55px;
	}

	#section_item .item04 .btn {
		margin-left: 600px;
	}

	/* item05
	---------------------------------------- */

	#section_item .item05 {
		margin-top: 86px;
	}

	#section_item .list .item05::before,
	#section_item .list .item06::before {
		height: 364px;
	}
	#section_item .item05 .num,
	#section_item .item06 .num {
		z-index: 3;
	}
	#section_item .item05 .num {
		left: 50px;
		top: -64px;
	}

	#section_item .item05 figure,
	#section_item .item06 figure {
		overflow: hidden;
		top: 30px;
		width: 384px;
		border-radius: 20px;
	}
	#section_item .item05 figure {
		left: 0;
	}

	#section_item .item05 .text,
	#section_item .item06 .text {
		min-height: 364px;
		padding-top: 62px;
	}
	#section_item .item05 .text {
		padding-left: 447px;
	}

	#section_item .item05 .btn {
		margin-left: 108px;
	}

	/* item06
	---------------------------------------- */

	#section_item .item06 {
		margin-top: 117px;
	}

	#section_item .item06 .num {
		right: 182px;
		top: -90px;
	}

	#section_item .item06 figure {
		right: 0;
	}

	#section_item .item06 .btn {
		margin-left: 676px;
	}


/* ----------------------------------------
	footer
---------------------------------------- */

	#contents_area footer {
		margin-bottom: 0;
		padding-bottom: 110px;
		background: #fff;
	}


/* ----------------------------------------
	movie_modal
---------------------------------------- */

	#movie_modal {
		position: fixed;
		text-align: center;
		white-space: nowrap;
	}
	#movie_modal::after,
	#movie_modal_inner {
		display: inline-block;
		vertical-align: middle;
	}
	#movie_modal::after {
		content: '';
		width: 0;
		height: 100%;
	}
	#movie_modal_inner {
		position: relative;
		width: 90%;
		max-width: 800px;
	}
	#movie_modal_data {
		position: relative;
		padding-top: 56.25%;
	}
	#movie_modal_data iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}