@charset "UTF-8";

/* #mv */
#mv {
	background: linear-gradient(180deg, #d4f5e0 0%, #c0e5cd 51.44%, #e9f9ef 100%);
	padding: 0;
	overflow: hidden;
	& .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 546px;
		column-gap: 30px;
		grid-template-areas:
			"hero right"
			"cta right";
		align-items: end;
		row-gap: 16px;
		min-height: 587px;
		padding-top: 64px;
		padding-bottom: 48px;
		box-sizing: border-box;
    max-width: 1140px;
	}
	& .mv__hero {
		grid-area: hero;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	& .mv__cta {
		grid-area: cta;
		width: 454px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	& .mv__lead {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-text);
	}
	& .mv__ttl {
		font-size: 46px;
		font-weight: 700;
		color: var(--col-text);
		line-height: 1.45;
		& .mv__ttl-main {
			display: block;
			height: 0;
			overflow: hidden;
			text-indent: -9999px;
		}
		& .mv__ttl-em {
			color: var(--col-primary);
		}
		& .mv__ttl-sub {
			font-size: 43px;
		}
	}
	& .mv__price {
		display: flex;
		align-items: baseline;
		gap: 4px;
		font-weight: 700;
		color: var(--col-text);
		font-size: 16px;
		& .mv__price-label {
			font-size: 16px;
		}
		& .mv__price-num {
			font-size: 30px;
			color: #ff5874;
			letter-spacing: .02em;
		}
		& .mv__price-unit {
			font-size: 16px;
		}
		&::before,
		&::after {
			content: "";
			display: block;
			width: 22px;
			height: 3px;
			background: var(--col-text);
			border-radius: 2px;
			align-self: center;
		}
		&::before {
			transform: rotate(52.46deg);
			margin-right: 4px;
			margin-bottom: -10px;
		}
		&::after {
			transform: rotate(-52.46deg);
			margin-left: 0;
			margin-bottom: -8px;
		}
	}
	& .mv__btn-trial {
    width: 100%;
		max-width: 454px;
		height: 64px;
		box-sizing: border-box;
		font-size: 24px;
		text-align: center;
		padding: 0 20px;
		margin-top: 0;
		margin-bottom: 36px;
	}
	& .mv__right {
		grid-area: right;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
	}
	& .mv__cards {
		position: relative;
		z-index: 1;
		display: flex;
		gap: 24px;
		justify-content: center;
		padding-top: 53px;
	}
	& .mv__card {
		flex: 0 0 166px;
		width: 166px;
		height: 312px;
		box-sizing: border-box;
		border-radius: 20px;
		box-shadow: 5px 5px 0 rgba(0,0,0,.28);
		padding: 32px 12px 22px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		color: var(--col-white);
		text-shadow: 0 1px 1px rgba(0,0,0,.25);
		& .mv__card-link {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			height: 100%;
			color: inherit;
			cursor: pointer;
		}
		& .mv__card-icon {
			width: 100px;
			height: auto;
			margin-bottom: 20px;
			transform: translateZ(0);
		}
		& .mv__card-label {
			font-size: 16px;
			font-weight: 700;
			white-space: nowrap;
			margin-bottom: 4px;
		}
		& .mv__card-value {
			font-size: 16px;
			font-weight: 700;
			line-height: 1.5;
			& strong {
				display: block;
				font-size: 32px;
				font-weight: 700;
				letter-spacing: .14em;
				line-height: 1.2;
				white-space: nowrap;
				& span {
					font-size: 20px;
				}
			}
		}
		& .mv__card-note {
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 1px;
			border-top: 1px solid rgba(255,255,255,.7);
			padding-top: 12px;
			width: 100%;
			text-align: center;
			margin-top: auto;
		}
		&.mv__card--domain {
			background: #2fbde1;
		}
		&.mv__card--server {
			background: #26c4c4;
			& .mv__card-label {
				margin-top: 10px;
			}
			& .mv__card-value {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				min-height: 54px;
			}
			& .mv__card-value strong {
				font-size: 33px;
				letter-spacing: .03em;
			}
		}
		&.mv__card--ip {
			background: #31cdd3;
		}
	}
	& .mv__illust {
		position: absolute;
		bottom: -18px;
		left: -20px;
		width: 640px;
		opacity: .7;
		pointer-events: none;
	}
}

@media screen and (max-width: 1099px) {
	#mv {
		padding: 0;
		& .wrap {
			grid-template-columns: 1fr;
			grid-template-areas:
				"hero"
				"right"
				"cta";
			min-height: auto;
			row-gap: 22px;
			padding: 40px 16px;
		}
		& .mv__right {
			align-self: auto;
			width: 100%;
		}
		& .mv__hero {
			align-items: center;
			text-align: center;
      gap: 4px;
		}
		& .mv__cta {
			width: 100%;
			max-width: 454px;
			margin: 0 auto;
		}
		& .mv__lead {
			font-size: 14px;
		}
		& .mv__ttl {
			font-size: 32px;
			line-height: 1.4;
			text-align: left;
			& .mv__ttl-sub {
				font-size: 30px;
			}
		}
		& .mv__price {
			font-size: 14px;
			& .mv__price-label {
				font-size: 14px;
			}
			& .mv__price-num {
				font-size: 24px;
			}
			& .mv__price-unit {
				font-size: 14px;
			}
			&::before,
			&::after {
				width: 16px;
				height: 2px;
			}
			&::before {
				margin-right: 0;
			}
			&::after {
				margin-left: 0;
			}
		}
		& .mv__btn-trial {
			width: 100%;
			max-width: 275px;
			height: 48px;
			font-size: 15px;
			margin-bottom: 36px;
		}
		& .mv__btn-consult {
			height: 48px;
			width: 220px;
			font-size: 13px;
		}
		& .mv__cards {
			padding-top: 0;
			gap: 11px;
			justify-content: center;
			flex-wrap: wrap;
		}
		& .mv__card {
			flex: 0 0 105px;
			width: 105px;
			height: 170px;
			padding: 20px 8px 14px;
			box-shadow: 3px 3px 0 rgba(0,0,0,.19);
			& .mv__card-icon {
				width: 68px;
				margin-bottom: 12px;
			}
			& .mv__card-label {
				font-size: 12px;
				white-space: nowrap;
				margin-bottom: 2px;
			}
			& .mv__card-value {
				font-size: 12px;
				& strong {
					font-size: 21px;
					& span {
						font-size: 15px;
					}
				}
			}
			& .mv__card-note {
				display: none;
			}
			&.mv__card--server {
				& .mv__card-label {
					margin-top: 5px;
				}
				& .mv__card-value {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					min-height: 34px;
				}
				& .mv__card-value strong {
					font-size: 24px;
					letter-spacing: normal;
				}
			}
		}
		& .mv__illust {
			display: none;
		}
	}
}

@media screen and (min-width: 641px) and (max-width: 1099px) {
	#mv {
		& .wrap {
			row-gap: 32px;
			padding-top: 56px;
			padding-bottom: 32px;
		}
		& .mv__hero {
			gap: 20px;
		}
		& .mv__lead {
			font-size: 16px;
		}
		& .mv__ttl {
			font-size: 36px;
			line-height: 1.4;
			& .mv__ttl-sub {
				font-size: 34px;
			}
		}
		& .mv__price {
			font-size: 16px;
			& .mv__price-label {
				font-size: 16px;
			}
			& .mv__price-num {
				font-size: 28px;
			}
			& .mv__price-unit {
				font-size: 16px;
			}
		}
		& .mv__cta {
			max-width: 400px;
		}
		& .mv__btn-trial {
			max-width: 400px;
			height: 52px;
			font-size: 18px;
			margin-bottom: 36px;
		}
		& .mv__btn-consult {
			height: 52px;
			padding: 0 30px;
		}
		& .mv__cards {
			gap: 20px;
		}
		& .mv__card {
			flex: 0 0 116px;
			width: 116px;
			height: 200px;
			padding: 24px 10px 16px;
			box-shadow: 4px 4px 0 rgba(0,0,0,.22);
			& .mv__card-icon {
				width: 76px;
				margin-bottom: 16px;
			}
			& .mv__card-label {
				font-size: 13px;
				margin-bottom: 3px;
			}
			& .mv__card-value {
				font-size: 13px;
				& strong {
					font-size: 26px;
					& span {
						font-size: 16px;
					}
				}
			}
			&.mv__card--server {
				& .mv__card-label {
					margin-top: 6px;
				}
				& .mv__card-value {
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					min-height: 40px;
				}
				& .mv__card-value strong {
					font-size: 27px;
				}
			}
		}
	}
}

/* #problem */
#problem {
	& .problem__hd {
		text-align: center;
		margin-bottom: 48px;
	}
	& .problem__ttl {
		color: var(--col-text);
	}
	& .problem__lead {
		--lead-mb: 0;
	}
	& .problem__list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		max-width: 1000px;
		margin: 0 auto;
	}
	& .problem__item {
		box-shadow: var(--shadow-card);
		overflow: hidden;
	}
	& .problem__item-hd {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px 32px 24px 28px;
		cursor: pointer;
		transition: background .2s ease;
	}
	& .problem__item-hd-row {
		display: flex;
		gap: 16px;
	}
	& .problem__item:not(.problem__item--open):hover .problem__item-hd {
		background: #edf9f3;
	}
	& .problem__item-case {
		flex-shrink: 0;
		color: var(--col-primary);
		font-weight: 700;
		line-height: 1;
	}
	& .problem__item-case-label {
		padding-right: 4px;
		font-size: 24px;
	}
	& .problem__item-case-num {
		font-size: 32px;
		font-weight: 700;
	}
	& .problem__item-ttl {
		flex: 1;
		font-size: 22px;
		font-weight: 600;
		color: var(--col-text);
		line-height: 1.5;
	}
	& .problem__item-toggle {
		flex-shrink: 0;
		align-self: center;
		width: 20px;
		height: 20px;
		transition: transform .25s ease;
	}
	& .problem__item--open .problem__item-toggle {
		transform: rotate(180deg);
	}
	& .problem__item-answer {
		display: none;
	}
	& .problem__item--open .problem__item-answer {
		display: block;
	}
	& .problem__item-body {
		padding: 0 32px 20px 28px;
		font-size: 16px;
		color: var(--col-text);
		line-height: 1.8;
	}
	& .problem__item-answer-box {
		background: #edf9f3;
		margin: 0 28px 24px;
		padding: 20px 24px;
		border-radius: var(--radius-md);
	}
	& .problem__item-answer-ttl {
		font-size: 22px;
		font-weight: 700;
		color: var(--col-primary);
		margin-bottom: 10px;
	}
	& .problem__item-answer-body {
		font-size: 16px;
		color: var(--col-text);
		line-height: 1.8;
	}
	& .problem__item-answer-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 14px;
	}
	& .problem__item-answer-tag {
		font-size: 12px;
		font-weight: 700;
		color: var(--col-primary);
		border: 1px solid #cedbeb;
		border-radius: 999px;
		padding: 4px 16px;
		background: var(--col-white);
	}
}

@media screen and (max-width: 1024px) {
	#problem {
		& .problem__item-hd {
			padding: 20px 24px;
			gap: 20px;
		}
		& .problem__item-hd-row {
			gap: 14px;
		}
		& .problem__item-case-label {
			font-size: 18px;
		}
		& .problem__item-case-num {
			font-size: 24px;
		}
		& .problem__item-ttl {
			font-size: 18px;
		}
		& .problem__item-toggle {
			width: 20px;
			height: 20px;
		}
		& .problem__item-body {
			padding: 0 24px 16px;
			font-size: 13px;
		}
		& .problem__item-answer-box {
			margin: 0 24px 20px;
			padding: 16px;
		}
		& .problem__item-answer-ttl {
			font-size: 17px;
		}
	}
}

@media screen and (max-width: 640px) {
	#problem {
		& .problem__hd {
			margin-bottom: 30px;
		}
		& .problem__item-hd {
			padding: 18px 20px;
			gap: 18px;
		}
		& .problem__item-hd-row {
			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-areas:
				"case toggle"
				"ttl toggle";
			align-items: center;
			gap: 2px 12px;
		}
		& .problem__item-case {
			grid-area: case;
		}
		& .problem__item-ttl {
			grid-area: ttl;
		}
		& .problem__item-toggle {
			grid-area: toggle;
		}
		& .problem__item-case-label {
			font-size: 15px;
		}
		& .problem__item-case-num {
			font-size: 20px;
		}
		& .problem__item-ttl {
			font-size: 16px;
		}
		& .problem__item-toggle {
			width: 15px;
			height: 15px;
		}
		& .problem__item-body {
			padding: 0 20px 16px;
		}
		& .problem__item-answer-box {
			margin: 0 20px 18px;
		}
		& .problem__item-answer-ttl {
			font-size: 14px;
		}
		& .problem__item-answer-body {
			font-size: 14px;
		}
	}
}

/* #features */
#features {
	& .features__ttl {
		color: var(--col-text);
		text-align: center;
		line-height: 1.6;
		margin-bottom: 16px;
	}
	& .features__lead {
		--lead-mb: 32px;
		font-weight: normal;
	}
	& .features__list {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	& .features__item {
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: var(--radius-lg);
		box-shadow: 0 6px 16px rgba(23,67,77,.06);
		display: flex;
		align-items: center;
		padding: 32px 56px 48px 40px;
		gap: 40px;
	}
	& .features__item-body {
		flex: 1;
	}
	& .features__item-ttl {
		font-size: 28px;
		font-weight: 700;
		color: var(--col-primary);
		margin-bottom: 16px;
		line-height: 1.5;
	}
	& .features__item-text {
		font-size: 15px;
		color: var(--col-text);
		line-height: 1.8;
		margin-bottom: 20px;
	}
	& .features__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	& .features__tag {
		font-size: 12px;
		font-weight: 700;
		color: var(--col-primary);
		border: 1px solid var(--col-primary);
		border-radius: 10px;
		padding: 6px 16px;
	}
	& .features__item-img {
		flex-shrink: 0;
		width: 256px;
		& img {
			width: 100%;
			height: auto;
		}
	}
}

@media screen and (max-width: 1024px) {
	#features {
		& .features__item {
			padding-left: 30px;
			padding-right: 30px;
		}
		& .features__item-img {
			width: 170px;
		}
	}
}

@media screen and (max-width: 640px) {
	#features {
		& .features__item {
			flex-direction: column;
			padding: 24px 20px;
			gap: 20px;
		}
		& .features__item-img {
			width: 200px;
		}
		& .features__item-ttl {
			font-size: 18px;
		}
		& .features__item-text {
			font-size: 14px;
		}
		& .features__tag {
			font-size: 11px;
			padding: 4px 12px;
		}
	}
}

/* #price */
#price {
	padding: 0;
	background: #e9f8ef;
	& > .wrap {
		padding-top: 80px;
		padding-bottom: 40px;
	}
	& .price__ttl {
		color: var(--col-text);
		text-align: center;
		margin-bottom: 16px;
	}
	& .price__lead {
		--lead-mb: 48px;
	}
	& .price__plans {
		display: flex;
		gap: 24px;
		justify-content: center;
		margin-bottom: 16px;
	}
	& .price__plan {
		flex: 1;
		max-width: 315px;
		background: var(--col-white);
		border-radius: var(--radius-lg);
		box-shadow: 0 4px 10px rgba(23,67,77,.2);
		overflow: visible;
		position: relative;
	}
	& .price__plan-badge {
		position: absolute;
		top: -16px;
		left: 50%;
		transform: translateX(-50%);
		width: 165px;
		font-size: 13px;
		padding: 5px 20px;
		border-radius: 999px;
	}
	& .price__plan-hd {
		background: var(--col-teal);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		padding: 22px 22px 16px;
		min-height: 103px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	& .price__plan-hd--outline {
		background: rgba(241,255,248,.5);
		border-bottom: 1px solid var(--col-primary);
	}
	& .price__plan-name {
		font-size: 30px;
		font-weight: 700;
		color: var(--col-white);
	}
	& .price__plan-name--teal {
		color: var(--col-primary);
	}
	& .price__plan-desc {
		font-size: 14px;
		color: var(--col-white);
	}
	& .price__plan-desc--dark {
		color: var(--col-text);
	}
	& .price__plan-body {
		padding: 20px 16px 24px;
	}
	& .price__plan-price {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-text);
		text-align: center;
		line-height: 1.4;
		margin-bottom: 20px;
		& .price__plan-num {
			font-size: 40px;
			color: #ff5874;
		}
	}
	& .price__plan-specs {
		background: #edf9f3;
		padding: 12px 16px;
		margin-bottom: 26px;
	}
	& .price__plan-spec {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		font-size: 13px;
		color: var(--col-text);
		border-bottom: 1px solid #ddeee6;
		&:last-child {
			border-bottom: none;
		}
		& dt {
			font-weight: 500;
		}
		& dd {
			font-weight: 500;
		}
	}
	& .price__plan-btn {
		width: 196px;
		height: 42px;
		margin: 0 auto;
		letter-spacing: 0;
	}
	& .price__plan-btn--primary {
		background: var(--col-primary);
		color: var(--col-white);
		border-color: var(--col-primary);
		&:hover {
			color: var(--col-white);
			background: var(--col-primary-dk);
			border-color: var(--col-primary-dk);
		}
	}
	& .price__note {
		font-size: 13px;
		color: var(--col-text);
		text-align: left;
		margin-bottom: 40px;
	}
	& .price__common {
		max-width: 1000px;
		margin: 0 auto;
		padding: 40px;
	}
	& .price__common-ttl {
		font-size: 22px;
		font-weight: 700;
		color: var(--col-text);
		text-align: center;
		margin-bottom: 24px;
	}
	& .price__common-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
	& .price__common-item {
		position: relative;
		background: #f5f5f5;
		border-bottom: 2px solid var(--col-teal);
		padding: 18px 16px;
		& + & {
			border-left: 1px solid var(--col-white);
		}
	}
	& .price__common-icon {
		position: absolute;
		top: 10px;
		right: 16px;
		width: 34px;
		height: 34px;
	}
	& .price__common-label {
		font-size: 15px;
		font-weight: 500;
		color: var(--col-text);
		margin-bottom: 6px;
	}
	& .price__common-value {
		font-size: 14px;
		font-weight: 700;
		color: var(--col-primary);
		letter-spacing: 0;
		& .price__common-value-sm {
			font-size: 11px;
		}
	}
	& .price__common-btn {
		width: 290px;
		height: 48px;
		margin: 28px auto 0;
	}
	& .price__domain {
		padding: 0 var(--pad-x) 80px;
		& > .wrap {
			max-width: 1000px;
			padding: 56px 40px 48px;
		}
	}
	& .price__domain-ttl {
		font-size: 22px;
		font-weight: 700;
		color: var(--col-text);
		text-align: center;
		margin-bottom: 24px;
	}
	& .price__domain-list-wrap {
		position: relative;
		max-width: 800px;
		margin: 0 auto 48px;
	}
	& .price__domain-badge {
		position: absolute;
		left: 0;
		bottom: calc(100% + 6px);
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		font-weight: 500;
		color: var(--col-text);
		white-space: nowrap;
	}
	& .price__domain-badge-icon {
		width: 17px;
		height: 17px;
	}
	& .price__domain-badge--popular {
		& .price__domain-badge-icon {
			width: 16px;
			height: 13px;
		}
	}
	& .price__domain-list {
		background: #f5f5f5;
		border-radius: var(--radius-lg);
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 15px;
		padding: 54px 40px 40px;
	}
	& .price__domain-item {
		position: relative;
		background: var(--col-white);
		font-size: 21px;
		font-weight: 700;
		color: var(--col-primary);
		text-align: center;
		padding: 4px 10px 8px;
		border-radius: 0;
	}
	& .price__domain-free {
		text-align: center;
		margin-bottom: 40px;
	}
	& .price__domain-free-badge {
		display: inline-block;
		background: var(--col-primary);
		color: var(--col-white);
		font-size: 22px;
		font-weight: 700;
		padding: 6px 32px;
		clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
		margin-bottom: -10px;
	}
	& .price__domain-free-ttl {
		font-size: 34px;
		font-weight: 700;
		color: var(--col-text);
		line-height: 1.4;
		margin-bottom: 8px;
		& .price__domain-free-em {
			color: var(--col-primary);
		}
		& .price__domain-free-zero {
			font-size: 73px;
			font-weight: 700;
			color: var(--col-primary);
			line-height: 1;
		}
	}
	& .price__domain-free-sub {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-text);
		& .price__domain-free-em {
			color: var(--col-primary);
			text-decoration: underline;
			text-decoration-color: #ffbacc;
			text-underline-offset: -4px;
			text-decoration-thickness: 10px;
		}
	}
	& .price__domain-years {
		display: block;
		max-width: 800px;
		margin: 0 auto 85px;
		& picture,
		& img {
			display: block;
			width: 100%;
		}
	}
	& .price__domain-search {
    width: 100%;
		max-width: 880px;
		margin: 0 auto 32px;
		border: 2px solid var(--col-primary);
		border-radius: var(--radius-lg);
		padding: 48px 40px 32px;
		position: relative;
	}
	& .price__domain-search-hd {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		gap: 12px;
		background: var(--col-white);
		padding: 0 30px;
		margin-bottom: 85px;
		font-size: 13px;
		white-space: nowrap;
	}
	& .price__domain-search-badge {
		flex-shrink: 0;
		width: 53px;
		height: 53px;
	}
	& .price__domain-search-ttl {
		font-size: 30px;
		font-weight: 700;
		color: #333;
		text-align: center;
		& .price__domain-search-em {
			color: var(--col-primary);
		}
	}
	& .price__domain-search-form {
		display: flex;
		align-items: center;
		border: 2px solid var(--col-teal);
		border-radius: 999px;
		background: var(--col-white);
		overflow: hidden;
		margin-bottom: 34px;
		height: 62px;
	}
	& .price__domain-search-input {
		flex: 1;
		height: 100%;
		border: none;
		outline: none;
		font-size: 13px;
		color: var(--col-text);
		padding: 0 20px;
		background: transparent;
		&::placeholder {
			color: #9ca3af;
		}
	}
	& .price__domain-search-ext {
		display: flex;
		align-items: center;
		height: 38px;
		font-size: 15px;
		color: #333;
		padding: 0 8px 0 12px;
		border-left: 1px solid #22ACB3;
		white-space: nowrap;
	}
	& .price__domain-search-select {
		appearance: none;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
		color: #333;
		cursor: pointer;
		padding: 0 20px 0 0;
		height: 38px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322ACB3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 4px center;
	}
	& .price__domain-search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		background: var(--col-primary);
		color: var(--col-white);
		font-size: 16px;
		font-weight: normal;
		padding: 0 24px;
		height: 46px;
		margin-right: 8px;
		border: none;
		cursor: pointer;
		border-radius: 999px;
		transition: background .2s ease;
		&:hover {
			background: var(--col-primary-dk);
		}
		& .price__domain-search-btn-icon {
			width: 18px;
			height: 18px;
		}
	}
	& .price__domain-search-note {
		background: #f5f5f5;
		border-radius: 10px;
		padding: 10px 16px 14px;
		font-size: 22px;
		font-weight: 700;
		color: #333;
		text-align: center;
		& .price__domain-search-zero {
			color: #ff5874;
		}
		& .price__domain-search-zero-num {
			font-size: 42px;
			line-height: 1;
		}
	}
	& .price__spec-link {
		height: 54px;
		margin: 0 auto;
	}
}

@media screen and (min-width: 1024px) {
	#price {
		& > .wrap {
			max-width: 1000px;
			padding-left: 0;
			padding-right: 0;
		}
	}
}

@media screen and (max-width: 1024px) {
	#price {
		& .price__plans {
			flex-wrap: wrap;
			row-gap: 40px;
		}
		& .price__plan {
			flex: 0 0 calc(50% - 12px);
			max-width: calc(50% - 12px);
		}
		& .price__common-list {
			grid-template-columns: repeat(3, 1fr);
		}
		& .price__domain-list {
			gap: 10px;
			padding-bottom: 40px;
		}
		& .price__domain-item {
			font-size: 17px;
		}
		& .price__domain-free-badge {
			font-size: 18px;
		}
		& .price__domain-free-ttl {
			font-size: 26px;
			& .price__domain-free-zero {
				font-size: 58px;
			}
		}
		& .price__domain-free-sub {
			font-size: 17px;
		}
		& .price__domain-search-hd {
			gap: 8px;
			padding: 0 20px;
		}
		& .price__domain-search-badge {
			width: 40px;
			height: 40px;
		}
		& .price__domain-search-ttl {
			font-size: 20px;
		}
		& .price__domain-search-btn {
			font-size: 14px;
		}
		& .price__domain-search-note {
			padding: 16px;
			font-size: 18px;
			& .price__domain-search-zero-num {
				font-size: 34px;
			}
		}
	}
}

@media screen and (max-width: 640px) {
	#price {
		& > .wrap {
			padding-top: 60px;
			padding-bottom: 40px;
		}
		& .price__domain {
			padding-bottom: 60px;
			& > .wrap {
				padding: 32px 20px;
			}
		}
		& .price__plans {
			flex-direction: column;
			align-items: center;
		}
		& .price__plan {
			max-width: 100%;
			width: 100%;
		}
		& .price__plan-name {
			font-size: 22px;
		}
		& .price__plan-desc {
			font-size: 13px;
		}
		& .price__plan-price {
			font-size: 15px;
			& .price__plan-num {
				font-size: 32px;
			}
		}
		& .price__plan-spec {
			font-size: 12px;
		}
		& .price__plan-btn {
			font-size: 14px;
		}
		& .price__note {
			font-size: 12px;
			margin-bottom: 30px;
		}
		& .price__common {
			padding: 24px 20px;
		}
		& .price__common-ttl {
			font-size: 18px;
		}
		& .price__common-list {
			grid-template-columns: repeat(2, 1fr);
		}
		& .price__common-item {
			padding: 14px 12px;
		}
		& .price__common-icon {
			display: none;
		}
		& .price__common-label {
			font-size: 12px;
			margin-bottom: 4px;
		}
		& .price__common-value {
			font-size: 13px;
			& .price__common-value-sm {
				font-size: 10px;
			}
		}
		& .price__common-btn {
			width: 100%;
			max-width: 290px;
		}
		& .price__domain-ttl {
			font-size: 18px;
		}
		& .price__domain-list {
			grid-template-columns: repeat(2, 1fr);
			gap: 12px 8px;
			padding: 40px 14px 16px;
			border-radius: 10px;
		}
		& .price__domain-item {
			font-size: 14px;
			padding: 8px 4px;
		}
		& .price__domain-badge {
			bottom: calc(100% + 4px);
			font-size: 10px;
		}
		& .price__domain-years {
			margin-bottom: 40px;
		}
		& .price__domain-free {
			margin-bottom: 30px;
		}
		& .price__domain-free-ttl {
			font-size: 18px;
			margin-bottom: 18px;
			white-space: nowrap;
			& br {
				display: none;
			}
			& .price__domain-free-zero {
				font-size: 42px;
			}
		}
		& .price__domain-free-sub {
			font-size: 14px;
			& .price__domain-free-em {
				font-size: 16px;
			}
		}
		& .price__domain-free-badge {
			font-size: 14px;
			margin-bottom: 16px;
		}
		& .price__domain-search {
			border: none;
			padding: 0;
		}
		& .price__domain-search-hd {
			position: static;
			transform: none;
			gap: 6px;
			width: auto;
			max-width: 100%;
			padding: 0;
			margin: 0 auto 12px;
			justify-content: center;
			white-space: normal;
		}
		& .price__domain-search-badge {
			width: 32px;
			height: 32px;
		}
		& .price__domain-search-ttl {
      text-align: left;
			font-size: 16px;
		}
		& .price__domain-search-form {
			position: relative;
			flex-wrap: wrap;
			height: auto;
			border-radius: 10px;
			padding: 14px 8px 8px;
			margin-bottom: 24px;
		}
		& .price__domain-search-input {
			flex: 1 1 100%;
			width: 100%;
			height: 40px;
			padding: 0 88px 0 12px;
		}
		& .price__domain-search-ext {
			position: absolute;
			top: 12px;
			right: 12px;
			height: 40px;
			padding: 0 0 0 10px;
		}
		& .price__domain-search-select {
			height: 40px;
		}
		& .price__domain-search-btn {
			flex: 0 0 100%;
			width: 100%;
      max-width: 200px;
			height: 40px;
			margin: 10px auto 0;
			font-size: 14px;
		}
		& .price__domain-search-note {
			padding: 16px 10px;
			font-size: 16px;
			& .price__domain-search-zero-num {
				font-size: 32px;
			}
		}
		& .price__spec-link {
			font-size: 14px;
			width: 248px;
      height: 44px;
		}
	}
}

/* #trial */
#trial {
	background: #f7fbfc;
	& .trial__ttl {
		color: var(--col-text);
		text-align: center;
		margin-bottom: 16px;
	}
	& .trial__lead {
		--lead-mb: 48px;
	}
	& .trial__card {
		padding: 40px 28px;
	}
	& .trial__card-note {
		font-size: 16px;
		font-weight: 600;
		color: var(--col-accent);
		text-align: center;
		margin-top: 40px;
	}
	& .trial__link {
    background: var(--col-primary);
    color: var(--col-white);
    border: 1px solid var(--col-primary);
		width: 100%;
    max-width: 400px;
		margin: 20px auto 0;
		transition: color .2s ease, background .2s ease;
		&:hover {
			color: var(--col-primary);
			background: var(--col-white);
		}
	}
	& .trial__steps {
		display: flex;
		flex-wrap: wrap;
		row-gap: 32px;
		gap: 24px;
	}
	& .trial__step {
		flex: 1 1 0;
		width: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	& .trial__step-label {
		width: 100%;
		background: var(--col-primary);
		color: var(--col-white);
		font-size: 18px;
		font-weight: 700;
		padding: 8px 0;
		margin-bottom: 30px;
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
	}
	& .trial__step:first-child .trial__step-label {
		padding-left: 0;
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
	}
	& .trial__step:nth-child(1) .trial__step-label {
		background: #75ccc4;
	}
	& .trial__step:nth-child(2) .trial__step-label {
		background: var(--col-logo-green);
	}
	& .trial__step:nth-child(3) .trial__step-label {
		background: var(--col-teal);
	}
	& .trial__step:nth-child(4) .trial__step-label {
		background: var(--col-primary);
	}
	& .trial__step-icon {
		width: auto;
		height: 66px;
		object-fit: contain;
		margin-bottom: 16px;
	}
	& .trial__step-name {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-primary);
		margin-bottom: 10px;
	}
	& .trial__step-desc {
		font-size: 13px;
		color: var(--col-text);
		line-height: 1.7;
		padding: 0 8px;
	}
}

@media screen and (max-width: 1024px) {
	#trial {
		& .trial__steps {
			display: grid;
			grid-template-columns: repeat(2, 275px);
			justify-content: center;
			row-gap: 32px;
			column-gap: 30px;
		}
		& .trial__step:nth-child(3) .trial__step-label {
			padding-left: 0;
			clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
			border-radius: 4px 0 0 4px;
		}
	}
}

@media screen and (max-width: 640px) {
	#trial {
		& .trial__card {
			padding: 32px 20px;
		}
		& .trial__card-note {
			font-size: 14px;
			margin-top: 30px;
		}
		& .trial__link {
			width: 100%;
			max-width: 340px;
		}
		& .trial__steps {
			display: flex;
			flex-direction: column;
			gap: 32px;
		}
		& .trial__step {
			flex: none;
			width: 100%;
		}
		& .trial__step-label {
			clip-path: none !important;
			border-radius: var(--radius-sm);
			padding: 6px 0;
			font-size: 15px;
      margin-bottom: 18px;
		}
		& .trial__step-icon {
			width: auto;
			height: 64px;
		}
    & .trial__step-desc {
      font-size: 15px;
    }
	}
}

/* #client */
#client {
	background: #f7fbfc;
	& .client__ttl {
		color: var(--col-text);
		text-align: center;
		margin-bottom: 16px;
	}
	& .client__lead {
		--lead-mb: 32px;
		line-height: 1.875;
	}
	& .client__sub-ttl {
		font-size: 26px;
		font-weight: 700;
		color: var(--col-primary);
		text-align: center;
		margin-bottom: 40px;
	}
	& .client__tools {
		display: flex;
		gap: 64px;
		margin-bottom: 80px;
	}
	& .client__tool {
		flex: 1;
		border: 1px solid var(--col-border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: var(--col-white);
	}
	& .client__tool-hd {
		background: var(--col-teal);
		color: var(--col-white);
		font-size: 24px;
		font-weight: 700;
		padding: 14px 40px;
	}
	& .client__tool-body {
		padding: 24px 36px 30px;
	}
	& .client__tool-name {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-text);
		margin-bottom: 10px;
	}
	& .client__tool-desc {
		font-size: 14px;
		color: var(--col-text);
		line-height: 1.8;
		margin-bottom: 24px;
	}
	& .client__tool-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
	& .client__tool-list {
		display: flex;
		flex-direction: column;
	}
	& .client__tool-item {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		font-weight: 700;
		color: var(--col-text);
		line-height: 2.2;
		& img {
			width: 18px;
			height: 18px;
			flex-shrink: 0;
		}
	}
	& .client__tool-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 14px;
		font-size: 14px;
		font-weight: 700;
		color: #ff5874;
		text-decoration: underline;
		text-underline-offset: 3px;
		&:hover {
			text-decoration: none;
		}
		& .client__tool-link-icon {
			width: 12px;
			height: 7px;
		}
	}
	& .client__tool-img {
		width: 132px;
		height: auto;
		flex-shrink: 0;
	}
	& .client__ai-ttl {
		font-size: 30px;
		font-weight: 700;
		color: #ff5874;
		text-align: center;
		line-height: 1.5;
		margin-bottom: 16px;
	}
	& .client__ai-lead {
		font-size: 16px;
		color: var(--col-text);
		text-align: center;
		line-height: 1.875;
		margin-bottom: 30px;
	}
	& .client__steps {
		display: flex;
		gap: 24px;
		align-items: flex-start;
	}
	& .client__step {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	& .client__step-time {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--col-teal);
		color: var(--col-white);
		font-size: 16px;
		font-weight: 700;
		padding: 4px 24px;
		border-radius: 999px;
		margin-bottom: -16px;
		position: relative;
		z-index: 1;
		align-self: center;
	}
	& .client__step-card {
		width: 100%;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: 20px;
		box-shadow: 0 6px 16px rgba(23,67,77,.06);
		padding: 32px 28px;
	}
	& .client__step-head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
	}
	& .client__step-num {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: var(--col-primary);
		color: var(--col-white);
		font-size: 18px;
		font-weight: 700;
		border-radius: 50%;
		flex-shrink: 0;
	}
	& .client__step-name {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-text);
	}
	& .client__step-desc {
		font-size: 14px;
		color: var(--col-text);
		line-height: 1.8;
		margin-bottom: 24px;
	}
	& .client__step-mock {
		overflow: hidden;
		& img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
	& .client__ai-btn {
		margin: 40px auto 0;
	}
}

@media screen and (max-width: 1024px) {
	#client {
		& .client__sub-ttl {
			font-size: 20px;
		}
		& .client__tools {
			flex-direction: column;
			gap: 20px;
		}
		& .client__tool-hd {
			font-size: 22px;
		}
		& .client__tool-name {
			font-size: 17px;
		}
		& .client__steps {
			flex-wrap: wrap;
			row-gap: 32px;
		}
		& .client__step {
			flex: 0 0 calc(50% - 12px);
		}
	}
}

@media screen and (max-width: 640px) {
	#client {
		& .client__sub-ttl {
			font-size: 18px;
		}
		& .client__ai-lead {
			font-size: 15px;
		}
		& .client__ai-btn {
			width: 100%;
			max-width: 340px;
		}
		& .client__tools {
			flex-direction: column;
			gap: 20px;
		}
		& .client__tool-hd {
			font-size: 20px;
			padding: 10px 24px;
		}
		& .client__tool-body {
			padding: 20px 24px 30px;
		}
		& .client__tool-name {
			font-size: 16px;
		}
		& .client__tool-desc {
			font-size: 14px;
		}
		& .client__tool-row {
			flex-direction: column;
			align-items: center;
			gap: 12px;
		}
		& .client__tool-item {
			font-size: 14px;
		}
		& .client__tool-link {
			display: flex;
			justify-content: center;
			font-size: 13px;
		}
		& .client__tool-img {
			width: 140px;
		}
		& .client__ai-ttl {
			font-size: 22px;
		}
		& .client__steps-wrap {
			position: relative;
		}
		& .client__steps.slick-initialized {
			display: block;
		}
		& .client__steps.slick-initialized .slick-slide {
			padding: 0 4px;
		}
		& .client__step {
			align-items: center;
		}
		& .client__step-mock {
			width: 80%;
			margin: 0 auto;
		}
		& .client__steps-arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			width: 36px;
			height: 36px;
			background: var(--col-primary);
			border-radius: 50%;
			border: none;
			cursor: pointer;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 9px;
				height: 9px;
				border-top: 2px solid #fff;
				border-right: 2px solid #fff;
			}
			&.slick-disabled {
				display: none !important;
			}
		}
		& .client__steps-arrow--prev {
			left: -12px;
			&::before {
				transform: translate(-35%, -50%) rotate(-135deg);
			}
		}
		& .client__steps-arrow--next {
			right: -12px;
			&::before {
				transform: translate(-65%, -50%) rotate(45deg);
			}
		}
	}
}

/* #support */
#support {
	background: #e9f8ef;
	& .support__ttl {
		color: var(--col-text);
		text-align: center;
		margin-bottom: 16px;
	}
	& .support__lead {
		--lead-mb: 48px;
	}
	& .support__cards {
		display: flex;
		gap: 30px;
	}
	& .support__card {
		flex: 1;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: var(--radius-lg);
		box-shadow: none;
		padding: 28px 28px 24px;
		display: flex;
		flex-direction: column;
	}
	& .support__card-icon {
		align-self: flex-start;
		width: auto;
		height: 36px;
		margin-bottom: 16px;
	}
	& .support__card-ttl {
		font-size: 18px;
		font-weight: 700;
		color: var(--col-primary);
		line-height: 1.5;
		min-height: 54px;
		margin-bottom: 12px;
	}
	& .support__card-desc {
		font-size: 14px;
		color: var(--col-text);
		line-height: 1.7;
		margin-bottom: 16px;
	}
	& .support__card-info {
		background: #f5f5f5;
		border-radius: 7px;
		padding: 12px 16px;
		margin-bottom: 16px;
		& li {
			font-size: 13px;
			font-weight: 500;
			color: var(--col-text);
			line-height: 1.8;
		}
	}
	& .support__card-link {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		color: var(--col-primary);
		text-decoration: underline;
		text-underline-offset: 3px;
		align-self: flex-end;
		&::after {
			content: '';
			display: inline-block;
			width: 6px;
			height: 6px;
			border-right: 2px solid var(--col-primary);
			border-bottom: 2px solid var(--col-primary);
			transform: rotate(-45deg) translateY(1px);
		}
		&:hover {
			text-decoration: none;
		}
	}
}

@media screen and (max-width: 1024px) {
	#support {
		& .support__cards {
			flex-direction: column;
			gap: 24px;
		}
		& .support__card-ttl {
			min-height: unset;
		}
	}
}

@media screen and (max-width: 640px) {
	#support {
		& .support__cards {
			flex-direction: column;
		}
		& .support__card-ttl {
			min-height: unset;
		}
	}
}

/* #customer-support */
#customer-support {
	background: #e9f8ef;
	& .cs__ttl {
		color: var(--col-primary);
		text-align: center;
		margin-bottom: 16px;
	}
	& .cs__lead {
		--lead-mb: 32px;
	}
	& .cs__hours {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: 999px;
		padding: 16px 36px;
		max-width: 800px;
		margin: 0 auto 40px;
	}
	& .cs__hours-label {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-primary);
	}
	& .cs__hours-time {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-primary);
	}
	& .cs__hours-note {
		font-size: 16px;
		color: var(--col-text);
	}
	& .cs__cards {
		display: flex;
		gap: 40px;
		justify-content: center;
	}
	& .cs__card {
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: 20px;
		box-shadow: 0 6px 16px rgba(23,67,77,.06);
		width: 480px;
		padding: 40px 32px 28px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		& #lhc_status_container,
		& .lhc-status-native-offline,
		& .lhc-status-native-online {
			display: contents;
		}
		& .lhc-status-native-offline a,
		& .lhc-status-native-online a {
			--btn-trial-push: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 290px;
			height: 48px;
			margin-bottom: 16px;
			overflow: hidden;
			background: var(--col-accent);
			border-radius: 999px;
			box-shadow: 0 var(--btn-trial-push) 0 #efaab6;
			font-size: 16px;
			font-weight: 700;
			color: var(--col-white);
			transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
			&:hover {
				color: var(--col-white);
				background: var(--col-accent-dk);
				transform: translateY(var(--btn-trial-push));
				box-shadow: 0 0 0 #efaab6;
			}
			& img,
			& .chat_txt,
			& .chat_subtxt {
				display: none;
			}
			&::before {
				content: "チャットサポート";
			}
			&.disabled {
				opacity: .4;
			}
		}
	}
	& .cs__card-icon {
		width: auto;
		height: 50px;
		object-fit: contain;
		margin-bottom: 20px;
	}
	& .cs__card-ttl {
		font-size: 22px;
		font-weight: 700;
		color: var(--col-text);
		margin-bottom: 20px;
	}
	& .cs__card-btn {
		--btn-trial-push: 4px;
		width: 290px;
		height: 48px;
		font-size: 16px;
		margin-bottom: 16px;
		overflow: hidden;
	}
	& .cs__card-note {
		font-size: 13px;
		color: var(--col-text);
	}
	& .cs__card-annotation {
		margin-top: 6px;
		font-size: 11px;
		line-height: 1.6;
		color: var(--col-text-muted);
	}
}

@media screen and (max-width: 1024px) {
	#customer-support {
		& .cs__cards {
			gap: 20px;
		}
		& .cs__hours-label,
		& .cs__hours-time {
			font-size: 16px;
		}
		& .cs__card {
			width: auto;
			flex: 1;
			padding: 32px 20px 24px;
		}
		& .cs__card-icon {
			height: 40px;
		}
		& .cs__card-ttl {
			font-size: 19px;
		}
		& .cs__card-btn,
		& .lhc-status-native-offline a,
		& .lhc-status-native-online a {
			width: 100%;
			max-width: 260px;
		}
	}
}

@media screen and (max-width: 640px) {
	#customer-support {
		& .cs__card-ttl {
			font-size: 18px;
		}
		& .cs__card-note {
			font-size: 12px;
		}
		& .cs__hours {
			flex-direction: column;
			gap: 4px;
			padding: 16px 24px;
			margin-bottom: 24px;
			text-align: center;
		}
		& .cs__hours-note {
			font-size: 13px;
		}
		& .cs__cards {
			flex-direction: column;
			align-items: center;
			gap: 24px;
		}
		& .cs__card {
			width: 100%;
			padding-top: 30px;
		}
		& .cs__card-btn,
		& .lhc-status-native-offline a,
		& .lhc-status-native-online a {
			width: 100%;
			max-width: 290px;
		}
	}
}

/* #cta */
#cta {
	background: var(--col-teal);
	padding: 60px 0;
	& .wrap {
		display: flex;
		align-items: center;
		gap: 60px;
	}
	& .cta__left {
		flex: 1;
	}
	& .cta__catch {
		font-size: 29px;
		font-weight: 700;
		color: var(--col-white);
		margin-bottom: 4px;
	}
	& .cta__ttl {
		font-size: 46px;
		font-weight: 700;
		color: var(--col-white);
		line-height: 1.25;
		margin-bottom: 16px;
	}
	& .cta__desc {
		font-size: 18px;
		font-weight: 600;
		color: var(--col-white);
		line-height: 1.8;
		margin-bottom: 24px;
	}
	& .cta__brand {
		color: #ffd175;
		font-weight: 700;
		font-style: normal;
	}
	& .cta__badges {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
	}
	& .cta__badge {
		display: flex;
		align-items: center;
		gap: 8px;
		border: 2px solid var(--col-white);
		border-radius: 10px;
		padding: 12px 20px;
		font-size: 16px;
		font-weight: 700;
		color: var(--col-white);
		& img {
			width: 14px;
			height: auto;
			flex-shrink: 0;
		}
	}
	& .cta__right {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		flex-shrink: 0;
	}
	& .cta__btn-trial {
		width: 350px;
		height: 80px;
		font-size: 24px;
	}
	& .cta__note {
		font-size: 14px;
		font-weight: 700;
		color: var(--col-white);
		text-align: center;
	}
}

@media screen and (max-width: 1024px) {
	#cta {
		& .wrap {
			flex-direction: column;
			gap: 32px;
		}
		& .cta__left {
			text-align: center;
		}
		& .cta__ttl {
			font-size: 36px;
		}
		& .cta__catch {
			font-size: 22px;
		}
		& .cta__badges {
			justify-content: center;
		}
		& .cta__right {
			width: 100%;
		}
		& .cta__btn-trial {
			width: 100%;
			max-width: 350px;
			height: 64px;
			font-size: 20px;
		}
		& .cta__btn-consult {
			width: 100%;
			max-width: 230px;
			height: 52px;
			font-size: 14px;
		}
	}
}

@media screen and (max-width: 640px) {
	#cta {
		& .wrap {
			flex-direction: column;
			gap: 30px;
		}
		& .cta__left {
			text-align: center;
		}
		& .cta__ttl {
			font-size: 28px;
		}
		& .cta__catch {
			font-size: 18px;
		}
		& .cta__desc {
			font-size: 15px;
			margin-bottom: 18px;
		}
		& .cta__badges {
			justify-content: center;
			flex-wrap: wrap;
			gap: 8px;
		}
		& .cta__badge {
			padding: 9px 18px;
			font-size: 12px;
			gap: 6px;
			white-space: nowrap;
			& img {
				width: 12px;
			}
		}
		& .cta__right {
			width: 100%;
		}
		& .cta__btn-trial {
			width: 100%;
			max-width: 320px;
			height: 60px;
			font-size: 17px;
		}
		& .cta__note {
			font-size: 12px;
			margin-top: -4px;
		}
	}
}
@media screen and (min-width: 1101px) {
  #cta {
    & .wrap {
      padding: 0 72px;
    }
  }
}

/* #history */
#history {
	background: var(--col-teal);
	padding: 56px 0;
	& .history__catch {
		font-size: 36px;
		font-weight: 700;
		color: var(--col-white);
		text-align: center;
		margin-bottom: 0;
	}
	& .history__ttl-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-bottom: 24px;
	}
	& .history__ttl-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	& .history__laurel {
		width: 32px;
		height: auto;
		flex-shrink: 0;
	}
	& .history__laurel--r {
		transform: scaleX(-1);
	}
	& .history__ttl {
		font-size: 46px;
		font-weight: 700;
		color: var(--col-white);
		white-space: nowrap;
    letter-spacing: .08em;
	}
	& .history__ttl-em {
		color: #ffd175;
		font-style: normal;
	}
	& .history__desc {
		font-size: 18px;
		font-weight: 600;
		color: var(--col-white);
		text-align: center;
		line-height: 2;
	}
	& .history__num {
		font-size: 28px;
		font-weight: 700;
		font-style: normal;
	}
	& .history__brand {
		color: #ffd175;
		font-style: normal;
	}
}

@media screen and (max-width: 1024px) {
	#history {
		& .history__ttl {
			font-size: 34px;
		}
	}
}

@media screen and (max-width: 640px) {
	#history {
		& .history__catch {
			font-size: 22px;
		}
		& .history__ttl {
			font-size: 22px;
			white-space: normal;
		}
		& .history__ttl-wrap {
			gap: 8px;
			margin-bottom: 14px;
		}
		& .history__laurel {
			width: 20px;
		}
		& .history__desc {
			font-size: 15px;
		}
		& .history__num {
			font-size: 22px;
		}
	}
}

/* #cta-strip */
#cta-strip {
	padding: 0;
	& .wrap {
		display: flex;
		align-items: stretch;
		gap: 0;
		max-width: none;
		padding: 0;
	}
	& .cta-strip__left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
    gap: 26px;
		background: var(--col-teal);
		padding: 42px 30px 42px max(40px, calc((100vw - 1100px) / 2 + 40px));
		margin-left: -40px;
	}
	& .cta-strip__ttl {
		font-weight: 700;
		color: var(--col-white);
		& .cta-strip__ttl-line {
			display: block;
			font-size: 22px;
			line-height: 42px;
		}
		& .cta-strip__ttl-line--lg {
			font-size: 32px;
			line-height: 46px;
		}
	}
	& .cta-strip__num {
		font-size: 40px;
		font-style: normal;
	}
	& .cta-strip__brand {
		color: #ffd3df;
		font-style: normal;
	}
	& .cta-strip__desc {
		font-size: 16px;
		font-weight: 500;
		color: var(--col-white);
		line-height: 22px;
	}
	& .cta-strip__right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
		flex-shrink: 0;
		background: #63d1c8;
		padding: 40px max(40px, calc((100vw - 1100px) / 2 + 40px)) 40px 30px;
		padding-left: 70px;
		margin-right: -40px;
	}
	& .cta-strip__trial-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	& .cta-strip__btn-trial {
		width: 340px;
		height: 66px;
		font-size: 24px;
	}
	& .cta-strip__note {
		font-size: 13px;
		font-weight: 700;
		color: var(--col-white);
		text-align: center;
	}
}

@media screen and (max-width: 1100px) {
	#cta-strip {
		& .cta-strip__left {
			margin-left: 0;
		}
		& .cta-strip__right {
			margin-right: 0;
			padding-left: 40px;
		}
	}
}

@media screen and (max-width: 1024px) {
	#cta-strip {
		background: none;
		padding: 0;
		& .wrap {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: 0;
		}
		& .cta-strip__left {
			background: var(--col-teal);
			padding: 32px 40px;
		}
		& .cta-strip__right {
			width: 100%;
			gap:20px;
			background: #63d1c8;
			padding: 32px 40px;
		}
		& .cta-strip__ttl {
			& .cta-strip__ttl-line {
				font-size: 19px;
				line-height: 32px;
			}
			& .cta-strip__ttl-line--lg {
				font-size: 26px;
				line-height: 36px;
			}
		}
		& .cta-strip__num {
			font-size: 32px;
		}
		& .cta-strip__desc {
			font-size: 13px;
		}
		& .cta-strip__btn-trial {
			width: 300px;
			height: 58px;
			font-size: 21px;
		}
		& .cta-strip__note {
			font-size: 11px;
		}
		& .cta-strip__btn-consult {
			width: 230px;
			height: 52px;
			font-size: 14px;
		}
	}
}

@media screen and (max-width: 640px) {
	#cta-strip {
		background: none;
		padding: 0;
		& .wrap {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: 0;
		}
		& .cta-strip__left {
			background: var(--col-teal);
			padding: 40px 20px;
		}
		& .cta-strip__ttl {
			& .cta-strip__ttl-line {
				font-size: 17px;
				line-height: 26px;
			}
			& .cta-strip__ttl-line--lg {
				font-size: 22px;
				line-height: 30px;
			}
		}
		& .cta-strip__num {
			font-size: 26px;
		}
		& .cta-strip__desc {
			font-size: 14px;
		}
		& .cta-strip__btn-trial {
			height: 56px;
			font-size: 18px;
		}
		& .cta-strip__note {
			font-size: 11px;
		}
	}
}

/* #agency */
#agency {
	& .agency__ttl {
		color: var(--col-text);
		text-align: center;
		line-height: 1.5;
		margin-bottom: 16px;
	}
	& .agency__ttl-em {
		color: var(--col-primary);
		font-style: normal;
	}
	& .agency__lead {
		--lead-mb: 48px;
	}
	& .agency__list {
		display: flex;
		flex-direction: column;
		gap: 24px;
		max-width: 1001px;
		margin: 0 auto;
	}
	& .agency__row {
		display: flex;
		align-items: center;
	}
	& .agency__problem {
		display: flex;
		align-items: center;
		gap: 23px;
		flex-shrink: 0;
	}
	& .agency__avatar {
		width: 76px;
		height: 76px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}
	& .agency__problem-label {
		width: 328px;
		flex-shrink: 0;
		min-height: 97px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: var(--col-white);
		border: 1px solid var(--col-border);
		border-radius: 16px;
		padding: 12px 24px;
		font-size: 18px;
		font-weight: 600;
		color: var(--col-text);
		text-align: left;
		line-height: 1.5;
		position: relative;
		&::before {
			content: '';
			position: absolute;
			z-index: 2;
			left: -18px;
			top: 19px;
			width: 18px;
			height: 16px;
			background: url(/business/img/top/agency_tail.svg) no-repeat center / 100% 100%;
			transform: scale(-1, -1);
		}
		&::after {
			content: '';
			position: absolute;
			z-index: 2;
			left: -1px;
			top: 20px;
			width: 6px;
			height: 13px;
			background: var(--col-white);
		}
	}
	& .agency__arrow {
		flex-shrink: 0;
		width: 46px;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		&::before {
			content: '';
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 11px solid var(--col-text);
		}
	}
	& .agency__sol {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 16px;
		min-height: 97px;
		background: #edf9f3;
		border: 1px solid var(--col-border);
		border-radius: 16px;
		padding: 20px 32px;
	}
	& .agency__sol-icon {
		width: 50px;
		height: 50px;
		object-fit: contain;
		flex-shrink: 0;
	}
	& .agency__sol-body {
		flex: 1;
	}
	& .agency__sol-ttl {
		font-size: 20px;
		font-weight: 700;
		color: var(--col-primary);
		margin-bottom: 6px;
		line-height: 1.4;
	}
	& .agency__sol-desc {
		font-size: 13px;
		color: var(--col-text);
		line-height: 1.7;
	}
}

@media screen and (max-width: 1024px) {
	#agency {
		& .agency__row {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
		}
		& .agency__problem {
			width: 100%;
		}
		& .agency__problem-label {
			width: auto;
			flex: 1;
			min-height: auto;
			padding: 12px 20px;
			&::before, &::after {
				margin-top: -6px;
			}
		}
		& .agency__arrow {
			width: 100%;
			height: 24px;
			margin-bottom: 8px;
			transform: rotate(90deg);
		}
		& .agency__sol {
			width: 100%;
      align-items: flex-start;
		}
    & .agency__sol-ttl {
      font-size: 17px;
    }
	}
}

@media screen and (max-width: 640px) {
	#agency {
		& .agency__row {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
		}
		& .agency__problem {
			width: 100%;
		}
		& .agency__problem-label {
			width: auto;
			flex: 1;
			font-size: 15px;
			min-height: auto;
			padding: 10px 16px;
			&::before, &::after {
				margin-top: -10px;
			}
		}
		& .agency__arrow {
			width: 100%;
			height: 24px;
			margin-bottom: 8px;
			transform: rotate(90deg);
		}
		& .agency__sol {
			width: 100%;
			padding: 20px;
		}
	}
}