@charset "utf-8";
@media screen and (max-width : 768px){
	#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: calc(335 / 375 * 100vw);
		margin: auto;
	}


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

	#section_title {
		display: flex;
		align-items: center;
		height: calc(206 / 375 * 100vw);
		background: url(../img/kv_sp.jpg) 50% 50% / cover no-repeat;
	}

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

	#section_title h2 {
		font-family: var(--font-bold);
		font-size: calc(16 / 375 * 100vw);
		line-height: calc(24 / 16);
	}
	#section_title p {
		margin-top: calc(7 / 375 * 100vw);
		font-family: var(--font-bold);
		font-size: calc(10 / 375 * 100vw);
		line-height: calc(16 / 10);
	}


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

	#section_item .block_inner {
		width: auto;
	}

	#section_item .list>li {
		position: relative;
		z-index: 1;
		margin-top: calc(60 / 375 * 100vw);
		padding: calc(141 / 375 * 100vw) 0 calc(23 / 375 * 100vw);
		background: #fff;
	}

	#section_item .list .num {
		position: absolute;
		top: calc(-37 / 375 * 100vw);
		z-index: 1;
	}
	#section_item .list .num img {
		width: auto;
		height: calc(74 / 375 * 100vw);
	}

	#section_item .list figure {
		position: absolute;
		z-index: 2;
	}

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

	#section_item .list h3 {
		white-space: nowrap;
		font-family: var(--font-bold);
		font-size: calc(24 / 375 * 100vw);
	}
	#section_item .list h3 span,
	#section_item .list h3 small {
		display: inline-block;
		vertical-align: top;
	}
	#section_item .list h3 span {
		margin-bottom: calc(10 / 375 * 100vw);
		font-size: calc(14 / 375 * 100vw);
	}
	#section_item .list h3 small {
		margin-top: calc(9 / 375 * 100vw);
		text-indent: -.5em;
		letter-spacing: .05em;
		font-size: calc(13 / 375 * 100vw);
	}

	#section_item .list .text {
		width: calc(295 / 375 * 100vw);
		margin: auto;
	}
	#section_item .list .text p {
		margin: calc(12 / 375 * 100vw) 0 calc(-6 / 375 * 100vw);
		font-size: calc(12 / 375 * 100vw);
		line-height: calc(24 / 12);
	}
	#section_item .list .text p small {
		display: inline-block;
		margin: calc(6 / 375 * 100vw) 0 calc(2 / 375 * 100vw);
		vertical-align: top;
		font-size: calc(10 / 375 * 100vw);
		line-height: calc(14 / 10);
	}

	#section_item .list .movie {
		z-index: 2;
		margin-top: calc(21 / 375 * 100vw);
	}
	#section_item .list .movie a::after {
		background-image: url(../img/btn_play.svg);
		background-size: calc(72 / 375 * 100vw);
	}

	#section_item .list .use {
		box-sizing: border-box;
		width: calc(335 / 375 * 100vw);
		margin: calc(22 / 375 * 100vw) auto 0;
		padding: calc(17 / 375 * 100vw) calc(20 / 375 * 100vw) calc(28 / 375 * 100vw);
		border: 1px solid var(--c-border);
		font-size: calc(12 / 375 * 100vw);
		line-height: calc(20 / 12);
	}
	#section_item .list .use p:first-child {
		margin-top: calc(-4 / 375 * 100vw);
		font-family: var(--font-bold);
		color: var(--c-red);
	}
	#section_item .list .use ol {
		margin-bottom: calc(-4 / 375 * 100vw);
	}

	#section_item .list .use .note {
		margin: calc(11 / 375 * 100vw) 0 calc(-3 / 375 * 100vw);
		font-weight: var(--font-light);
		font-size: calc(11 / 375 * 100vw);
		line-height: calc(17 / 11);
	}
	#section_item .list .use .note span {
		text-decoration: underline;
	}

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

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

	#section_item .item01 .num {
		left: calc(102 / 375 * 100vw);
	}

	#section_item .item01 figure {
		width: calc(133 / 375 * 100vw);
		left: calc(122 / 375 * 100vw);
		top: calc(-55 / 375 * 100vw);
	}

	#section_item .item01 .movie {
		display: grid;
		gap: calc(15 / 375 * 100vw);
	}

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

	#section_item .item02 .num {
		right: calc(80 / 375 * 100vw);
	}

	#section_item .item02 figure {
		overflow: hidden;
		left: calc(76 / 375 * 100vw);
		top: calc(-45 / 375 * 100vw);
		width: calc(240 / 375 * 100vw);
		height: calc(174 / 375 * 100vw);
	}

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

	#section_item .item03 .num {
		left: calc(54 / 375 * 100vw);
	}

	#section_item .item03 figure {
		left: calc(88 / 375 * 100vw);
		top: calc(-48 / 375 * 100vw);
		width: calc(206 / 375 * 100vw);
	}
	#section_item .item03 h3 small {
		text-indent: 0;
	}

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

	#section_item .item04 .num {
		right: calc(54 / 375 * 100vw);
	}

	#section_item .item04 figure {
		left: calc(40 / 375 * 100vw);
		top: calc(-20 / 375 * 100vw);
		width: calc(316 / 375 * 100vw);
	}
	#section_item .item04 h3 small {
		margin: calc(3 / 375 * 100vw) 0 calc(-4 / 375 * 100vw);
		line-height: calc(21 / 13);
	}

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

	#section_item .list>.item05,
	#section_item .list>.item06 {
		padding-top: calc(229 / 375 * 100vw);
	}

	#section_item .item05 .num,
	#section_item .item06 .num {
		z-index: 3;
	}
	#section_item .item05 .num {
		left: calc(70 / 375 * 100vw);
	}

	#section_item .item05 figure,
	#section_item .item06 figure {
		overflow: hidden;
		left: calc(57 / 375 * 100vw);
		top: calc(18 / 375 * 100vw);
		width: calc(261 / 375 * 100vw);
		border-radius: calc(20 / 375 * 100vw);
	}

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

	#section_item .item06 .num {
		right: calc(70 / 375 * 100vw);
	}


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

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

	footer .guaranteed {
		margin-bottom: 0;
		padding-bottom: 60px;
	}


/* ----------------------------------------
	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%;
	}
}