@charset "utf-8";
@media screen and (max-width: 768px){
	#contents_area {
		letter-spacing: .015em;
		color: var(--civic-c-text);
		font-size: calc(26 / 750 * 100vw);
		line-height: calc(42 / 26);
		font-feature-settings: 'palt' 1;
	}

	.section,
	.block,
	.block_inner {
		position: relative;
		z-index: 1;
	}
	.section {
		margin-top: calc(72 / 750 * 100vw);
	}
	.section img {
		display: block;
	}


/* ----------------------------------------
	Animation
---------------------------------------- */

	.anim_ready .scroll_anim:not([data-anim-parent*='sp']),
	.anim_ready [data-anim-children*='sp'] {
		opacity: 0;
		backface-visibility: hidden;
	}

	.anim_ready .scroll_anim:not(.block){
		transform: translate(0,40px);
	}

	.anim_ready .anim_end:not([data-anim-parent*='sp']),
	.anim_ready .anim_end [data-anim-children*='sp'] {
		opacity: 1 !important;
		transform: translate(0,0) !important;
		transition-duration: 1s;
		transition-property: opacity, transform;
	}

	.anim_end[data-anim-order$='2'],
	.anim_end [data-anim-order$='2'] { transition-delay: .2s; }
	.anim_end[data-anim-order$='3'],
	.anim_end [data-anim-order$='3'] { transition-delay: .4s; }
	.anim_end[data-anim-order$='4'],
	.anim_end [data-anim-order$='4'] { transition-delay: .6s; }


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

	#section_title {
		margin-top: calc(30 / 750 * 100vw);
		text-align: center;
	}
	#section_title h3 {
		padding: calc(37 / 750 * 100vw) 0;
		border: solid var(--civic-c-border);
		border-width: 1px 0;
		letter-spacing: .03em;
		font-family: var(--font-bold);
		font-size: calc(32 / 750 * 100vw);
		line-height: 1;
	}
	#section_title h3 span {
		display: block;
		margin-top: calc(27 / 750 * 100vw);
		letter-spacing: .03em;
		font-size: calc(20 / 750 * 100vw);
	}
	#section_title h3+p {
		margin-top: calc(42 / 750 * 100vw);
	}

	#section_title .profile {
		display: flex;
		align-items: center;
		margin-top: calc(66 / 750 * 100vw);
		background: var(--civic-c-bg-profile);
	}
	#section_title .profile figure {
		width: calc(280 / 750 * 100vw);
		margin-left: calc(34 / 750 * 100vw);
	}
	#section_title .profile>div {
		width: 50%;
		padding: calc(28 / 750 * 100vw) 0 calc(28 / 750 * 100vw) calc(26 / 750 * 100vw);
	}
	#section_title .profile p {
		text-align: left;
		font-size: calc(21 / 750 * 100vw);
		line-height: calc(31 / 21);
	}
	#section_title .profile p+p {
		margin-top: calc(31 / 750 * 100vw);
	}

	#section_title .profile .name {
		display: inline-block;
		font-size: calc(28 / 750 * 100vw);
		line-height: calc(42 / 28);
	}


/* ----------------------------------------
	section_paragraph
---------------------------------------- */

	.section_paragraph .block_inner {
		width: calc(624 / 750 * 100vw);
	}

	.section_paragraph h4 {
		position: relative;
		margin-bottom: calc(30 / 750 * 100vw);
		padding-bottom: calc(30 / 750 * 100vw);
		border-bottom: 1px solid var(--civic-c-border);
		letter-spacing: .03em;
		font-family: var(--font-bold);
		font-size: calc(32 / 750 * 100vw);
		line-height: calc(38 / 32);
	}
	.section_paragraph h4::before {
		content: '';
		position: absolute;
		left: 0;
		bottom: -1px;
		z-index: 1;
		width: calc(39 / 750 * 100vw);
		height: 1px;
		background: #f00;
	}
	.section_paragraph figure {
		margin-bottom: calc(33 / 750 * 100vw);
	}
	.section_paragraph p+figure {
		margin: calc(33 / 750 * 100vw) 0 0;
	}
	.section_paragraph figure li+li {
		margin-top: calc(15 / 750 * 100vw);
	}
	.section_paragraph p {
		margin: calc(-8 / 750 * 100vw) 0;
	}


/* ----------------------------------------
	footer_topic_path
---------------------------------------- */

	#footer_topic_path {
		margin-top: max(114 / 750 * 100vw, 88px);
	}
}