@charset "utf-8";

/***********************************************
PC
************************************************/

/* ======== 共通 ======== */
:root {
	--color-blue: #06B6D4;
	--color-d-blue: #0F9CAA;
	--color-l-blue: #ECFEFF;
	--color-green: #0D9488;
	--color-orange: #EA580C;
	--color-yellow: #FCD34D;
	--color-l-yellow: #FFFBEB;
	--color-brown: #92400E;
	--color-gray: #D1D5DB;
	--color-l-gray: #F9FAFB;
}
* {
    box-sizing: border-box;
}
.pc {
    display: inherit;
}
.sp {
    display: none;
}
.row {
	width: 1200px;
	margin: auto;
}
body {
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 1.6;
	margin: 0;
	background: #FFF;
}
img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
a {
	color: var(--color-d-blue);
	text-decoration: none;
    transition: 0.3s;
}
a:hover {
    opacity: 0.8;
    transition: 0.3s;
}
ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}
table {
	background: #FFF;
}
table, tr, th, td {
	border: none;
}
section {
	padding: 80px 0;
}
.note {
	font-size: 85%!important;
}
.bg-blue {
	background: var(--color-blue);
}
.bg-l-blue {
	background: var(--color-l-blue);
}
.bg-yellow {
	background: var(--color-l-yellow);
}
.bg-gray {
	background: var(--color-l-gray);
}

/* ======== コンテンツ ======== */
header {
	padding: 15px 0;
}
header span {
	font-size: 10px;
	display: block;
	margin-bottom: 5px;
}
header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .link-area {
	display: flex;
	align-items: center;
	gap: 20px;
}
header .logo-area img {
	width: 160px;
}
header .link-area a {
	font-size: 10px;
	color: #000;
}
header .link-area a.login {
	padding: 8px 30px;
	border: 1px solid #000;
	border-radius: 999px;
	line-height: 1;
}

.mv {
	padding-top: 30px;
}
.mv .cont-wrapper {
	display: grid;
	grid-template-columns: 475px 1fr;
	grid-template-rows: 1fr auto;
	align-items: end;
	padding: 0 90px;
}
.mv .cont-left {
	grid-column: 1;
	grid-row: 1;
}
.mv .cont-right {
	grid-column: 2;
	grid-row: 1 / 3;
}
.mv h1 {
	color: #FFF;
	font-size: 45px;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}
.mv h1 span {
	color: #FFF;
	font-size: 30px;
	font-weight: 500;
	margin: 0;
}
.mv .cont-left .img {
	margin: 40px 0;
	text-align: center;
}
.mv .cont-left .img img {
	width: 323px;
}
.mv .cont-right .img {
	text-align: center;
}
.mv .cont-right .img img {
	width: 460px;
}
main .mv .btn-area .btn {
	width: 230px;
}
.btn {
	display: inline-block;
	min-width: 230px;
	text-align: center;
}
.btn a {
	display: block;
	border-radius: 999px;
	padding: 20px 30px;
	line-height: 1;
	background: #FFF;
	color: var(--color-blue);
	font-size: 16px;
	font-weight: 600;
	width: 100%;
}
.btn.btn-yellow a {
	background: var(--color-yellow);
	color: var(--color-brown);
}
.btn.btn-blue a {
	background: var(--color-d-blue);
	color: #FFF;
}
.mv .btn-area {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
	margin-top: 10px;
}
.mv .btn-area .copy {
	font-size: 12px;
	color: #FFF;
	display: block;
	margin-bottom: 3px;
}
.top-nav .logo-area {
	text-align: center;
	padding: 15px 0;
	border-bottom: 1px dashed var(--color-gray);
}
.top-nav .logo-area img {
	width: 850px;
}
.top-nav .ac-nav ul {
	display: flex;
	justify-content: center;
	gap: 25px;
	padding: 30px 0;
}
.top-nav .ac-nav li {
	display: flex;
	align-items: center;
}
.top-nav .ac-nav li::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid var(--color-d-blue);
	border-right: 2px solid var(--color-d-blue);
	transform: rotate(45deg); 
	margin-left: 8px;
	margin-bottom: 4px;
}
.top-nav .ac-nav li a {
	color: #000;
	font-weight: 700;
	font-size: 12px;
}
h2.cont-h-title {
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	margin-top: 0;
	margin-bottom: 40px;
}
h2.cont-h-title strong {
	color: var(--color-d-blue);
}
h2.cont-h-title span {
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	background: var(--color-l-gray);
	border-radius: 4px;
	color: var(--color-blue);
	padding: 10px;
	width: 260px;
	display: block;
	margin: 0 auto 20px;
}
/* ---- point-box ---- */
.about .point-box {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 960px;
	margin: auto;
}
.about .point-box .point-num {
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	color: var(--color-d-blue);
	margin-bottom: 10px;
}

/* point-full（Point1・Point2） */
.about .point-box .point-full {
	background: #ECFEFF;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 1px 0 #164E63;
}
.about .point-box .point-full h3 {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 30px;
}
.about .point-box .point-full h3 strong {
	font-size: 38px;
}
.about .point-box .compare-wrapper {
	display: flex;
	justify-content: center;
	gap: 40px;
}
.about .point-box .compare-box {
	width: 400px;
	border-radius: 20px;
	padding: 30px;
}
.about .point-box .compare-our {
	background: #FFF;
	box-shadow: 1px 1px 0 #06B6D4;
}
.about .point-box .compare-other {
	background: #F4F4F5;
}
.about .point-box .compare-label {
	margin-bottom: 15px;
}
.about .point-box .compare-label > span {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: center;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 24px;
	font-weight: 600;
}
.about .point-box .compare-label .mark,
.about .point-box .compare-label .cross {
	font-size: 30px;
}
.about .point-box .label-our {
	background: var(--color-blue);
	color: #FFF;
}
.about .point-box .label-our .mark {
	color: #F8F777;
}
.about .point-box .label-other {
	background: #A1A1AA;
	color: #FFF;
}
.about .point-box .label-other .cross {
	color: #000;
}
.about .point-box .compare-box p {
	font-size: 20px;
	margin: 0;
	line-height: 1.8;
}
.about .point-box .compare-our p b {
	font-size: 22px;
}
.about .point-box .compare-our p strong {
	font-size: 32px;
	font-weight: 700;
	color: var(--color-orange);
}
.about .point-box .compare-box.compare-other p {
	font-size: 18px;
}
.about .point-box .compare-our ul {
	padding-left: 0;
	margin: 0;
}
.about .point-box .compare-our li {
	font-size: 20px;
	line-height: 1.6;
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
	list-style: none;
}
.about .point-box .compare-our li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 17px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg width='17' height='14' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.57981 14L0 8.40541L2.54281 5.85586L5.57981 8.90991L14.4572 0L17 2.54955L5.57981 14Z' fill='%2306B6D4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.about .point-box .compare-our li strong {
	color: var(--color-d-blue);
}
.about .point-box .compare-our .marker {
	background: linear-gradient(transparent 60%, #F8F777 60%);
	font-weight: 700;
}

/* point-half（Point3・Point4） */
.about .point-box .point-half-wrapper {
	display: flex;
	gap: 30px;
}
.about .point-box .point-half {
	flex: 1;
	background: #ECFEFF;
	border-radius: 20px;
	padding: 50px 30px 30px;
	box-shadow: 0 1px 0 #164E63;
	display: flex;
	flex-direction: column;
}
.about .point-box .point-half h3 {
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	margin: 0 0 20px;
	line-height: 1.4;
}
.about .point-box .point-half-inner {
	background: #FFF;
	border-radius: 20px;
	padding: 30px 40px;
	flex: 1;
}
.about .point-box .point-half .img {
	text-align: center;
	margin-bottom: 20px;
}
.about .point-box .point-half p {
	font-size: 18px;
	margin: 0 0 15px;
}
.about .point-box .point-half p strong {
	color: var(--color-d-blue);
}
.about .point-box .point-half ul {
	padding-left: 0;
}
.about .point-box .point-half li {
	font-size: 14px;
	position: relative;
	padding-left: 20px;
	list-style: none;
}
.about .point-box .point-half li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 13px;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.275 9.01875L0 4.74375L1.06875 3.675L4.275 6.88125L11.1562 0L12.225 1.06875L4.275 9.01875Z' fill='%230891B2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.about .point-box .point-half a {
	border: 1px solid #67E8F9;
	border-radius: 4px;
	color: var(--color-d-blue);
	font-size: 14px;
	padding: 15px;
	line-height: 1;
	width: 180px;
	margin: auto;
	display: block;
	text-align: center;
}

/* ---- page-header（プレスリリース一覧） ---- */
.page-header {
	background: var(--color-blue);
	padding: 10px 0;
}
.page-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.page-header h1 {
	font-size: 18px;
	font-weight: 700;
	color: #FFF;
	margin: 0;
}
.page-header .btn-area {
	display: flex;
	gap: 15px;
	margin: 0;
}
.page-header .btn-area .btn {
	min-width: auto;
	width: 140px;
}
.page-header .btn-area .btn.btn-white a {
	padding: 8px 20px;
	font-size: 10px;
	background: transparent;
	color: #FFF;
	border: 1px solid #FFF;
}
.page-header .btn-area .btn.btn-yellow a {
	padding: 8px 20px;
	font-size: 10px;
	background: #FCD34D;
	color: #B45309;
	border: none;
}

/* ---- page-form共通（登録・ログイン等） ---- */
.page-form header {
	border-bottom: 1px solid #000;
}

/* ---- register（登録フォーム） ---- */
.register,
.page-section {
	padding: 60px 0 80px;
}
.page-title {
	color: #FCD34D;
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 40px;
}
.form-wrapper {
	background: #FFF;
	border-radius: 10px;
	padding: 40px 30px;
}
.form-section {
	margin-bottom: 0;
}
.form-section h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 40px 0 15px;
}
.form-section:first-child h2 {
	margin-top: 0;
}
.form-desc {
	font-size: 18px;
	margin: 0 0 15px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.form-box {
	background: #FFF;
	border: 1px solid #FCD34D;
	border-radius: 0;
}
.form-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #FCD34D;
}
.form-row:last-child {
	border-bottom: none;
}
.form-label {
	width: 340px;
	flex-shrink: 0;
	font-weight: 600;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	min-height: 40px;
	background: #FFFBEB;
	padding: 15px 20px;
}
.label-tags {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-end;
}
.required,
.public {
	font-size: 16px;
	padding: 1px 8px;
	border-radius: 3px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
}
.required {
	background: #EA580C;
	color: #FFF;
}
.public {
	background: #FFDBC8;
	color: #EA580C;
}
.form-input {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 25px;
	justify-content: center;
}
.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="password"],
.form-input input[type="tel"],
.form-input input[type="url"],
.form-input select {
	background: #FFF;
	border: 1px solid #D9D9D9;
	border-radius: 0;
	padding: 10px 15px;
	font-size: 18px;
	width: 520px;
	font-family: inherit;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
	outline: none;
}
.form-input input:focus,
.form-input select:focus {
	outline: none;
	border-color: #D9D9D9;
}
.form-input select {
	appearance: none;
	cursor: pointer;
	width: 185px;
}
.form-input select.select-lg {
	width: 380px;
}
.form-input input.input-address {
	width: 380px;
}
.form-input input.input-sm {
	width: 70px;
}
.form-input input.input-sm2 {
	width: 85px;
}
.form-input input.input-md {
	width: 60px;
}
.form-input input.input-xs {
	width: 60px;
}
.form-input-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
}
.form-input .form-input-line input {
	width: auto;
}
.form-input .form-input-line input.input-sm {
	width: 70px;
}
.form-input .form-input-line input.input-sm2 {
	width: 85px;
}
.form-input .form-input-line input.input-md {
	width: 60px;
}
.form-input .form-input-line input.input-xs {
	width: 60px;
}
.form-prefix {
	font-size: 14px;
}
.form-note {
	display: block;
	font-size: 16px;
	color: #666666;
	margin-top: -8px;
}
.form-note-inline {
	font-size: 16px;
	color: #666666;
	white-space: nowrap;
}
.form-sub-label {
	font-size: 16px;
	color: #666666;
	margin-bottom: -8px;
}
.form-agreement-text {
	font-size: 18px;
	margin: 30px 0 15px;
}
.form-terms-box {
	background: #FFF;
	border: 1px solid #D9D9D9;
	border-radius: 0;
	padding: 25px 30px;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	margin-bottom: 20px;
}
.form-terms-box h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
}
.form-terms-box p {
	font-size: 16px;
	color: #6B7280;
	margin: 0;
	line-height: 1.8;
}
.form-radio-circle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.form-radio-circle input {
	display: none;
}
.form-radio-circle .radio-mark {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #D9D9D9;
	background: #FFF;
	position: relative;
}
.form-radio-circle input:checked + .radio-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #FCD34D;
}
.form-checkbox {
	text-align: center;
	margin: 30px 0 0;
}
.form-checkbox label {
	font-size: 18px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.form-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border: 1px solid #D9D9D9;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	background: #FFF;
}
.form-checkbox input[type="checkbox"]:checked {
	background: #FCD34D;
	border-color: #FCD34D;
}
.form-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 11px;
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-8.87513e-05 5.74583L1.69025 4.03418L5.13485 7.42196L12.5851 8.84533e-05L14.2897 1.71174L5.13485 10.8311L-8.87513e-05 5.74583Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.form-submit {
	text-align: center;
	margin-top: 40px;
}
.form-submit .btn {
	width: 100%;
	max-width: 445px;
}
.form-submit .btn a,
.form-submit .btn span {
	font-size: 20px;
}
.btn.btn-disabled span {
	display: block;
	border-radius: 999px;
	padding: 20px 30px;
	line-height: 1;
	background: #D9D9D9;
	color: #FFF;
	font-size: 20px;
	font-weight: 700;
	cursor: not-allowed;
}
.form-submit-double {
	display: flex;
	justify-content: center;
	gap: 30px;
}
.form-submit-double .btn {
	width: 100%;
	max-width: 445px;
}
.btn.btn-white-outline a {
	background: transparent;
	color: #9A3412;
	border: 1px solid #9A3412;
}

/* ---- confirm（確認画面） ---- */
.confirm-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
}
.confirm-row:last-child {
	margin-bottom: 0;
}
.form-section .form-box:has(.confirm-row) {
	padding: 35px 25px;
}
.confirm-label {
	width: 340px;
	flex-shrink: 0;
	font-size: 16px;
	color: #666666;
}
.confirm-value {
	flex: 1;
	font-size: 18px;
	font-weight: 400;
}

/* ---- complete（完了画面） ---- */
.complete-box {
	background: #FFF;
	border-radius: 10px;
	padding: 80px 40px;
	text-align: center;
}
.complete-icon {
	margin-bottom: 30px;
}
.complete-box h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 40px;
}
.btn.btn-lg a {
	padding: 25px 30px;
	font-size: 20px;
}
.complete-box .btn {
	width: 100%;
	max-width: 480px;
	margin: auto;
}

/* ---- auth（ログイン・パスワード共通） ---- */
.auth-box {
	background: #FFF;
	border-radius: 10px;
	padding: 60px 80px;
	text-align: center;
}
.login-logo {
	margin-bottom: 40px;
}
.login-logo img {
	max-width: 445px;
}
.auth-desc {
	font-size: 18px;
	line-height: 1.8;
	text-align: left;
	margin: 0 auto 40px;
	max-width: 670px;
}
.auth-form {
	text-align: left;
	margin-bottom: 30px;
	max-width: 670px;
	margin-left: auto;
	margin-right: auto;
}
.auth-form .form-row {
	display: flex;
	align-items: center;
	padding: 0;
	border-bottom: none;
}
.auth-form .form-label {
	width: auto;
	min-width: 150px;
	font-weight: 600;
	font-size: 20px;
	background: none;
	padding: 0;
}
.auth-form .form-input {
	flex: none;
}
.auth-form .form-input input {
	width: 520px;
}
.auth-box .form-submit {
	margin-top: 20px;
}
.auth-box .form-submit .btn {
	width: 100%;
	max-width: 445px;
}
.login-link {
	margin-top: 25px;
}
.login-link a {
	color: #000;
	font-size: 18px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}
.login-link a::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FCD34D;
	background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1L6.5 6L1.5 11' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px;
	flex-shrink: 0;
}

/* ---- press-archive ---- */
.press-archive {
	padding: 40px 0 80px;
}
.press-list .item h2 {
	font-size: 14px;
	font-weight: 400;
}

.comp-table table {
	width: 980px;
	margin: auto;
	border-collapse: collapse;
}

.comp-table th, .comp-table td {
	padding: 15px 5px;
	text-align: center;
	border: 1px solid #e0e0e0;
	position: relative;
}

.comp-table thead th {
	background-color: #F2F2F2;
	font-weight: 600;
	color: #333;
}

.comp-table .service-header {
	background-color: #06B6D4;
	color: #FFF;
	font-size: 24px;
	font-weight: bold;
	padding: 25px;
}
.comp-table .active-column {
	background-color: #FFF7C8;
}
.comp-table .row-header {
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	background-color: #FFF;
	color: #000;
}

/* アイコンのスタイル */
.comp-table .icon {
	font-size: 50px;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
}

.comp-table .icon-circle {
	color: #EA580C;
}

.comp-table .icon-double-circle {
	color: #EA580C;
	position: relative;
}

.comp-table .icon-triangle {
	color: #0D9488;
}

.comp-table .icon-cross {
	color: #000;
}

/* 価格と説明文のスタイル */
.comp-table .price {
	color: #00b4d8;
	font-weight: bold;
	font-size: 16px;
}

.comp-table .description {
	font-size: 12px;
	color: #6B7280;
	margin-top: 5px;
}

.comp-table .highlight-text {
	color: #06B6D4;
	font-weight: 700;
}
.comp-table .number {
	font-weight: 700;
	color: #06B6D4;
}

.press-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 40px 20px;
}
.press-list .item {
	width: 100%;
}
.press-list .item .thumb img {
	width: 100%;
	height: auto;
}
.press-list .item a {
	color: #000;
}
.press-list .item h3 {
	font-size: 14px;
	font-weight: 400;
}
.press-list .item .company-name,
.press-list .item .tag li a {
	color: #6B7280;
	font-size: 10px;
}
.press-list .item .tag li a {
	border: 1px solid var(--color-gray);
	padding: 3px 15px;
	line-height: 1;
	display: inline-block;
	border-radius: 999px;
}
.press-list .item .tag ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.press-list .btn {
	grid-column: 1 / -1;
	width: 450px;
	margin: 30px auto;
	text-align: center;
}
.voice-list .item {
	position: relative;
}
.voice-list .item a {
	width: 600px;
	display: flex;
	justify-content: flex-start;
	color: #000;
	background: #FFF;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	position: relative;
}
.voice-list .item a .img img {
	border-radius: 12px 0 0 12px;
}
.voice-list .item a .text {
	padding: 20px;
	flex: 1;
}
.voice-list .item a .text .company-name {
	font-size: 12px;
}
.voice-list .item a .text h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 10px 0;
}
.voice-list .item a .text p {
	font-size: 12px;
	margin: 0;
}
.voice-list .item .more {
	border: 1px solid #67E8F9;
	border-radius: 4px;
	color: var(--color-d-blue);
	font-size: 10px;
	padding: 5px;
	line-height: 1;
	width: 95px;
	margin: auto;
	display: block;
	text-align: center;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.voice-slider {
	--gap: 16px;
	--dot-size: 17px;
	--mask-edge: 48px;
	--item-w: 600px;
}
.voice-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 1200px;
	/* ぼかしマスク（対応ブラウザ用） */
	-webkit-mask-image: linear-gradient(to right,
		transparent 0, #000 var(--mask-edge),
		#000 calc(100% - var(--mask-edge)), transparent 100%);
	mask-image: linear-gradient(to right,
		transparent 0, #000 var(--mask-edge),
		#000 calc(100% - var(--mask-edge)), transparent 100%);
}
.voice-viewport::before,
.voice-viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--mask-edge);
	pointer-events: none;
	z-index: 2;
}
.voice-viewport::before {
	left: 0;
	background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.voice-viewport::after {
	right: 0;
	background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.voice-track {
	display: flex;
	gap: var(--gap);
	will-change: transform;
	transform: translateX(0);
	transition: transform .4s ease;
}
.voice-track .item {
	flex: 0 0 var(--item-w);
	width: var(--item-w);
	display: flex;
	justify-content: center;
}
.voice-list .item a {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	color: #000;
	background: #FFF;
	border-radius: 12px;
	border: 1px solid #E5E7EB;
	position: relative;
}

/* ドット */
.voice-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 35px;
}
.voice-dots button {
	appearance: none;
	border: none;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 9999px;
	background: #D9D9D9;
	cursor: pointer;
	padding: 0;
}
.voice-dots button.is-active {
	background: var(--color-d-blue);
}

main .btn-area {
	text-align: center;
	margin: 40px auto 0;
}
main .btn-area .btn {
	width: 100%;
	max-width: 445px;
}
main .btn-area .btn span {
	color: var(--color-orange);
	font-weight: 700;
	margin-bottom: 5px;
	display: block;
}
main .btn-area .btn.btn-yellow a {
	font-size: 20px;
}
main .btn-area .text-link a {
	text-decoration: underline;
	font-size: 10px;
	display: block;
	margin-top: 10px;
}

.faq-list {
	max-width: 100%;
	display: grid;
	background: #FFF;
	border-radius: 10px;
	padding: 60px 60px 30px;
}
.faq-list .item {
	padding: 35px 25px;
	border-top: 1px dashed #9CA3AF;
}
.faq-list .que {
	position: relative;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	padding-right: 50px;
	display: flex;
	align-items: flex-start;
}
.faq-list .que::after {
	content: "";
	position: absolute;
	right: 15px;
	top: 50%;
	width: 13.5px;
	height: 13.5px;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform .25s ease;
}
.faq-list .item.is-open .que::after {
	transform: translateY(-50%) rotate(-135deg);
}
.faq-list .que .label {
	color: var(--color-blue);
	font-weight: 600;
	font-size: 20px;
	margin-right: 20px;
	flex-shrink: 0;
}
.faq-list .que .text {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	padding-top: 3px;
}
.faq-list .ans {
	display: none;
	margin-top: 40px;
}
.faq-list .ans .label {
	color: #000;
	font-weight: 600;
	font-size: 20px;
	margin-right: 20px;
	flex-shrink: 0;
}
.faq-list .ans .text {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	padding-top: 3px;
}
.f-contact {
	text-align: center;
}
.f-contact h2.cont-h-title {
	color: #FFF;
}
.f-contact .img img {
	width: 185px;
}
.f-contact .btn-area {
	margin-top: 30px;
	gap: 30px;
	display: flex;
	justify-content: center;
}
.f-contact .btn-area .btn {
	width: 100%;
	max-width: 480px;
}
footer {
	padding: 60px 0;
}
footer .site-name {
	color: var(--color-green);
	text-align: center;
	margin-bottom: 25px;
	font-size: 14px;
}
footer .sitemap {
	display: flex;
	justify-content: center;
	gap: 100px;
}
footer .sitemap a {
	font-size: 12px;
	color: #6B7280;
	display: block;
}
footer .copyright {
	font-size: 12px;
	color: #6B7280;
	text-align: center;
	margin-top: 60px;
}

/***********************************************
タブレット
************************************************/
@media screen and (max-width: 1240px) {
	.row {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	.mv .cont-wrapper {
		padding: 0 20px;
	}
	.about .point-box {
		width: 100%;
	}
	.comp-table table {
		width: 100%;
	}
	.top-nav .logo-area img {
		width: 100%;
		max-width: 850px;
	}
	footer .sitemap {
		gap: 40px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.form-wrapper {
		padding: 40px 30px;
	}
	.form-row {
		flex-direction: column;
	}
	.form-label {
		width: 100%;
	}
	.form-input {
		padding: 16px;
	}
	.form-input input[type="text"],
	.form-input input[type="email"],
	.form-input input[type="password"],
	.form-input input[type="tel"],
	.form-input input[type="url"],
	.form-input select,
	.form-input select.select-lg,
	.form-input input.input-address {
		width: 100%;
		max-width: 100%;
	}
	.label-tags {
		flex-direction: row;
		align-items: center;
	}
	.form-label br {
		display: none;
	}
}

/***********************************************
SP
************************************************/
@media only screen and (max-width: 879px) {
	.pc {
		display: none;
	}
	.sp {
		display: inherit;
	}

	/* ======== 共通 ======== */
	.row {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
	section {
		padding: 50px 0;
	}
	h2.cont-h-title {
		font-size: 28px;
		margin-bottom: 30px;
	}
	h2.cont-h-title span {
		width: 230px;
		font-size: 12px;
	}
	h2.cont-h-title br.pc {
		display: none;
	}

	/* ======== ボタン共通（ヘッダー除く） ======== */
	main .btn a,
	main .btn span,
	main .btn.btn-lg a,
	main .btn-area .btn.btn-yellow a,
	.form-submit .btn a,
	.form-submit .btn span {
		padding: 15px 15px;
		font-size: 18px;
	}
	main .btn,
	main .mv .btn-area .btn {
		width: 100%;
		max-width: 400px;
	}


	/* ======== ヘッダー ======== */
	header {
		padding: 10px 0;
	}
	header .logo-area span {
		font-size: 7px;
		margin-bottom: 0;
	}
	header .logo-area img {
		width: 110px;
	}
	header .link-area {
		gap: 12px;
	}
	header .link-area a {
		font-size: 12px;
	}
	header .link-area a.login {
		padding: 6px 20px;
		font-size: 12px;
	}

	/* ======== MV ======== */
	.mv {
		padding-top: 20px;
		padding-bottom: 30px;
	}
	.mv .cont-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
	}
	.mv .cont-left {
		width: 100%;
		text-align: center;
	}
	.mv .cont-right {
		grid-column: auto;
		grid-row: auto;
	}
	.mv h1 {
		font-size: 37px;
		text-align: center;
	}
	.mv h1 span {
		font-size: 24px;
	}
	.mv .cont-left .img {
		margin: 20px 0;
	}
	.mv .cont-left .img img {
		width: 270px;
	}
	.mv .cont-right {
		width: 100%;
		flex: none;
	}
	.mv .cont-right .img img {
		width: 300px;
	}
	.mv .btn-area {
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 10px;
	}
	main .mv .btn-area .btn .copy {
		margin-bottom: 10px;
	}

	/* ======== トップナビ ======== */
	.top-nav .logo-area {
		padding: 10px 0;
	}
	.top-nav .logo-area img {
		width: 100%;
	}
	.top-nav .ac-nav ul {
		flex-direction: column;
		width: 80%;
		margin: 0 auto;
		gap: 0;
		padding: 15px 0;
	}
	.top-nav .ac-nav li {
		justify-content: space-between;
		padding: 12px 0;
	}
	.top-nav .ac-nav li::after {
		margin-left: auto;
	}
	.top-nav .ac-nav li a {
		font-size: 14px;
		text-align: left;
	}

	/* ======== About ======== */
	.about .point-box {
		width: 100%;
		gap: 30px;
	}
	.about .point-box .point-full {
		padding: 25px 16px;
	}
	.about .point-box .point-full h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	.about .point-box .point-full h3 strong {
		font-size: 38px;
	}
	.about .point-box .point-full h3 br {
		display: none;
	}
	.about .point-box .compare-wrapper {
		flex-direction: column;
		gap: 16px;
	}
	.about .point-box .compare-box {
		width: 100%;
		padding: 20px;
	}
	.about .point-box .compare-label > span {
		font-size: 24px;
	}
	.about .point-box .compare-label .mark,
	.about .point-box .compare-label .cross {
		font-size: 22px;
	}
	.about .point-box .compare-box p {
		font-size: 22px;
	}
	.about .point-box .compare-our p b {
		font-size: 22px;
	}
	.about .point-box .compare-our p strong {
		font-size: 32px;
	}
	.about .point-box .compare-box.compare-other p {
		font-size: 18px;
	}
	.about .point-box .compare-our li {
		font-size: 20px;
	}
	.about .point-box .point-half-wrapper {
		flex-direction: column;
		gap: 20px;
	}
	.about .point-box .point-half {
		padding: 30px 16px 20px;
	}
	.about .point-box .point-half h3 {
		font-size: 24px;
	}
	.about .point-box .point-half-inner {
		padding: 20px;
	}
	.about .point-box .point-half p {
		font-size: 16px;
	}
	.about .point-box .point-half li {
		font-size: 13px;
	}

	.feature h2.cont-h-title {
		font-size: 24px;
	}

	/* ======== 機能比較テーブル ======== */
	.comp-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.comp-table table {
		width: 855px;
		min-width: 855px;
	}
	.comp-table thead th:first-child {
		width: 145px;
	}
	.comp-table thead th {
		width: 170px;
		font-size: 16px;
	}
	.comp-table .service-header {
		width: 200px;
		font-size: 24px;
		padding: 15px;
	}
	.comp-table .icon {
		font-size: 50px;
	}

	/* ======== プレスリリース ======== */
	.press-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.press-list .item {
		width: 100%;
		display: grid;
		grid-template-columns: 150px 1fr;
		gap: 0 12px;
	}
	.press-list .item > a {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		gap: 0 12px;
	}
	.press-list .item .thumb {
		grid-row: 1 / 3;
	}
	.press-list .item .thumb img {
		width: 150px;
		height: auto;
	}
	.press-list .item h3,
	.press-list .item h2 {
		margin-top: 0;
		margin-bottom: 4px;
	}
	.press-list .item .tag {
		grid-column: 2;
		margin-top: 10px;
	}
	.press-list .item .tag ul {
		gap: 5px;
	}
	.press-list .item .tag li {
		line-height: 1;
	}
	.press-list .item .tag li a {
		padding: 3px 10px;
	}
	.press .press-list .btn,
	.press-archive .press-list .btn {
		width: 100%;
	}

	/* ======== お客様の声 ======== */
	body {
		overflow-x: hidden;
	}
	.voice-slider {
		--item-w: calc(100vw - 130px);
		--mask-edge: 0px;
		--gap: 12px;
		padding: 0 15px;
	}
	.voice-viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.voice-viewport::before,
	.voice-viewport::after {
		display: none;
	}
	.voice-slider {
		--dot-size: 12px;
	}
	.voice-list .item a {
		flex-direction: column;
	}
	.voice-list .item a .img img {
		border-radius: 12px 12px 0 0;
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.voice-list .item a .text {
		padding: 16px;
	}
	.voice-list .item a .text h3 {
		font-size: 16px;
		margin: 5px 0;
	}
	.voice-list .item a .text p {
		font-size: 12px;
	}
	.voice-list .item .more {
		position: relative;
		right: auto;
		bottom: auto;
		margin: 10px 0 0 auto;
	}
	.voice-viewport::before,
	.voice-viewport::after {
		display: none;
	}

	/* ======== ご利用の流れ ======== */
	.flow .img img {
		width: 100%;
		height: auto;
	}

	/* ======== FAQ ======== */
	.faq-list {
		padding: 30px 20px 15px;
	}
	.faq-list .item {
		padding: 15px 10px;
	}
	.faq-list .que {
		padding-right: 40px;
	}
	.faq-list .que .label {
		font-size: 20px;
		margin-right: 12px;
	}
	.faq-list .que .text {
		font-size: 16px;
	}
	.faq-list .ans .label {
		font-size: 20px;
		margin-right: 12px;
	}
	.faq-list .ans .text {
		font-size: 16px;
	}
	.faq-list .ans {
		margin-top: 25px;
	}

	/* ======== フッターCTA ======== */
	.f-contact h2.cont-h-title {
		font-size: 26px;
	}
	.f-contact .btn-area {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.f-contact .btn-area .btn.btn-yellow {
		order: -1;
	}

	/* ======== フッター ======== */
	footer {
		padding: 40px 0;
	}
	footer .sitemap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		padding: 0 30px;
	}
	footer .sitemap .item {
		display: contents;
	}
	footer .sitemap a {
		padding: 8px 0;
		text-align: left;
		font-size: 12px;
	}
	footer .copyright {
		margin-top: 30px;
	}

	/* ======== フォーム系（登録ページ等） ======== */
	.form-row {
		flex-direction: column;
	}
	.form-label {
		width: 100%;
		padding: 12px 16px;
		font-size: 16px;
	}
	.form-input {
		padding: 16px;
	}
	.form-input input[type="text"],
	.form-input input[type="email"],
	.form-input input[type="password"],
	.form-input input[type="tel"],
	.form-input input[type="url"],
	.form-input select {
		width: 100%;
		font-size: 16px;
		padding: 5px 10px;
	}
	.form-input select.select-lg,
	.form-input input.input-address {
		width: 100%;
	}
	.form-submit-double {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.form-submit-double .btn.btn-yellow {
		order: -1;
	}
	.auth-box {
		padding: 40px 20px;
	}
	.auth-form .form-row {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 15px;
	}
	.auth-form .form-label {
		font-size: 14px;
		min-width: auto;
		min-height: auto;
		margin-bottom: 5px;
	}
	.auth-form .form-input {
		padding: 0;
		width: 100%;
	}
	.auth-form .form-input input {
		width: 100%;
	}
	.login-link a {
		font-size: 14px;
	}
	.complete-box {
		padding: 50px 20px;
	}
	.complete-box h2 {
		font-size: 18px;
	}
	.complete-box .complete-icon {
		margin-bottom: 20px;
	}
	.complete-box h2 {
		margin-bottom: 20px;
	}
	.form-section .form-box:has(.confirm-row) {
		padding: 25px 25px;
	}
	.confirm-row {
		flex-direction: column;
		gap: 5px;
	}
	.confirm-label {
		width: 100%;
		font-size: 12px;
	}
	.confirm-value {
		font-size: 16px;
	}

	/* ======== ページヘッダー（プレスリリース一覧） ======== */
	.page-header .row {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.page-header-inner {
		flex-direction: column-reverse;
		gap: 10px;
		align-items: flex-start;
	}
	.page-header h1 {
		font-size: 18px;
	}
	.page-header .btn-area {
		width: 100%;
		display: flex;
		gap: 10px;
	}
	.page-header .btn-area .btn {
		width: 40%;
		flex: 1;
	}
	.page-header .btn-area .btn.btn-white a,
	.page-header .btn-area .btn.btn-yellow a {
		padding: 8px 10px;
		font-size: 12px;
	}

	/* ======== プレスリリースアーカイブ ======== */
	.press-archive {
		padding: 30px 0 50px;
	}

	/* ======== ページタイトル（登録・ログイン等） ======== */
	.page-title {
		font-size: 22px;
		margin-bottom: 25px;
	}
	.register,
	.page-section {
		padding-top: 30px;
	}

	/* ======== フォームセクション ======== */
	.form-section h2 {
		font-size: 18px;
		margin: 30px 0 12px;
	}
	.form-desc {
		font-size: 14px;
		flex-wrap: wrap;
	}
	.form-label {
		font-size: 14px;
	}
	.form-label .required,
	.form-label .public {
		font-size: 11px;
	}
	.label-tags {
		flex-direction: row;
		align-items: center;
	}
	.form-label br {
		display: none;
	}
	.form-desc img {
		width: 100% !important;
		height: auto !important;
	}
	.form-wrapper {
		padding: 25px 16px;
	}
	.form-agreement-text {
		font-size: 14px;
	}
	.form-terms-box {
		padding: 20px 16px;
	}
	.form-terms-box h3,
	.form-terms-box p {
		font-size: 14px;
	}
	.form-note,
	.form-note-inline {
		font-size: 12px;
	}
	.form-input-line {
		font-size: 12px;
	}
	.form-sub-label {
		display: none;
	}
	.form-checkbox label {
		font-size: 14px;
		text-align: left;
	}
	.form-submit {
		margin-top: 30px;
	}

	/* ======== ログイン・パスワード ======== */
	.login-logo img {
		max-width: 280px;
	}
	.auth-desc {
		font-size: 14px;
	}
}

/***********************************************
スマホ小（〜480px）
************************************************/
@media screen and (max-width: 480px) {
	.mv h1 {
		font-size: 8.6vw;
	}
	.mv h1 span {
		font-size: 5.6vw;
	}
	.mv .cont-left .img img {
		width: 62.8vw;
	}
	.mv .cont-right .img img {
		width: 69.8vw;
	}
}

/***********************************************
TOP（index）専用 ─ PC
************************************************/
/* 大きい数字はDIN（din-2014） */
.hero-left h1 .num,
.lead-title b,
.plan-price b {
	font-family: "din-2014", "Noto Sans JP", sans-serif;
}

.btn.btn-cyan a {
	background: var(--color-blue);
	color: #FFF;
}

/* ======== MV（hero） ======== */
.hero {
	padding: 20px 0 60px;
}
.hero .hero-wrap {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 30px;
	align-items: center;
}
.hero-left h1 {
	color: #FFF;
	font-size: 51px;
	font-weight: 700;
	line-height: 1.7;
	margin: 0 0 25px;
	overflow-wrap: break-word;
}
.hero-left h1 .num {
	color: var(--color-yellow);
	font-size: 107px;
	font-weight: 500;
	line-height: 1;
	margin: 0 4px;
}
.hero-left h1 .hl {
	color: var(--color-yellow);
}
/* 「だ」「け」の各文字上に●（だけと同じ色・12px） */
.hero-left h1 .hl .dk {
	position: relative;
	display: inline-block;
}
.hero-left h1 .hl .dk::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% - 0.34em);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: currentColor;
}
.hero-points {
	margin: 0 0 30px;
}
.hero-points li {
	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.9;
	position: relative;
	padding-left: 20px;
}
.hero-points li::before {
	content: "・";
	position: absolute;
	left: 0;
}
.hero-btns {
	display: flex;
	gap: 20px;
}
.hero-btns .btn {
	flex: 1;
	min-width: 0;
}
.hero-btns .btn a {
	font-size: 26px;
}
.hero-btns .copy {
	display: inline-block;
	position: relative;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 6px;
	padding: 0 42px;
}
.hero-btns .copy::before,
.hero-btns .copy::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2px;
	height: 20px;
	background: #000;
}
.hero-btns .copy::before {
	left: 14px;
	transform: translateY(-50%) rotate(-45deg);
}
.hero-btns .copy::after {
	right: 14px;
	transform: translateY(-50%) rotate(45deg);
}
/* マイクロコピー内spanのpadding/サイズ打ち消し（共通SPルール対策） */
.hero-btns .copy .copy-txt,
.hero-btns .copy .cnum {
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
}
.hero-btns .copy .cnum {
	font-family: "Inter", sans-serif;
}
.hero-right {
	text-align: center;
}
.hero-monitor img {
	width: 100%;
	max-width: 460px;
}
.hero-badges {
	text-align: center;
	margin-top: 10px;
}
.hero-badges img {
	width: 100%;
	max-width: 450px;
	height: auto;
}

/* ======== 導入企業ロゴ ======== */
.client-band {
	background: #FFF;
	padding: 40px 0;
	overflow: hidden;
}
.client-viewport {
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
.client-track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.client-track li {
	flex: 0 0 auto;
	padding: 0 40px;
}
.client-track img {
	height: 56px;
	width: auto;
	display: block;
}
/* 見切れる場合は無限横スクロール（JSで is-scroll 付与＋複製） */
.client-track.is-scroll {
	justify-content: flex-start;
	width: max-content;
	animation: client-marquee 20s linear infinite;
}
@keyframes client-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ======== 提携メディア（見出し＋カテゴリー） ======== */
.lead-title {
	text-align: center;
	font-weight: 700;
	line-height: 1.7;
	margin: 0 0 45px;
}
.lead-title span {
	display: block;
}
.lead-title .lt-1 {
	font-size: 36px;
}
.lead-title .lt-2 {
	font-size: 36px;
	margin-top: 8px;
}
.lead-title b {
	color: var(--color-yellow);
	font-size: 1.78em;
	font-weight: 700;
	line-height: 1;
	margin: 0 4px;
}
.lead-title .lt-num {
	font-size: 2.67em;
}
.lead-title em {
	font-style: normal;
	font-size: 0.68em;
	color: var(--color-yellow);
}
.cat-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.cat-list li {
	width: calc((100% - 80px) / 5);
}
.cat-list li img {
	width: 100%;
	height: auto;
	display: block;
}

/* ======== 提携メディア一覧＋CTA ======== */
.media-group h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 18px;
}
.media-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px 20px;
}
.media-cols li {
	font-size: 16px;
	font-weight: 700;
}
.media-cols li::before {
	content: "・";
}
.media-hr {
	border: none;
	border-top: 1px solid #333;
	margin: 35px 0;
}
.cta {
	margin-top: 90px;
	text-align: center;
}
.cta-copy {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 14px;
}
.cta-btns {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.cta-btns .btn {
	flex: 1;
	min-width: 0;
	max-width: 550px;
}
/* CTAボタン系フォントサイズ */
.cta-btns .btn a,
.plan-btn .btn a,
.doc-btn a,
.f-contact .btn-area .btn a,
body main .btn-area .btn.btn-yellow a {
	font-size: 26px;
}

/* ======== 導入事例 ======== */
.case-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.case-item {
	background: #FFF;
	border: 1px solid #E5E5E5;
	border-radius: 10px;
	padding: 16px;
}
.case-item .thumb {
	margin-bottom: 16px;
}
.case-item .thumb img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}
.case-item .company-name {
	font-size: 12px;
	color: #6B7280;
	margin-bottom: 8px;
}
.case-item h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.5;
}
.case-item p {
	font-size: 13px;
	color: #374151;
	margin: 0;
	line-height: 1.7;
}

/* ======== 料金プラン ======== */
.plan-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}
.plan-item {
	background: #FFF;
	border: 1px solid #E5E5E5;
	border-radius: 10px;
	min-width: 0;
	padding: 45px 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.plan-tag {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
}
.plan-name {
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 30px;
}
.plan-price {
	font-size: 36px;
	font-weight: 700;
	margin: 0;
}
.plan-price b {
	color: var(--color-yellow);
	font-size: 96px;
	font-weight: 700;
	line-height: 1;
	margin-right: 4px;
}
.plan-lead {
	color: var(--color-yellow);
	font-size: 48px;
	font-weight: 700;
	margin: 30px 0;
}
.plan-note {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin: 22px 0 0;
}
.plan-btn {
	margin-top: auto;
	padding-top: 35px;
}
.plan-btn .btn {
	width: 100%;
	max-width: 550px;
	margin: 0 auto;
}
.plan-notes {
	width: fit-content;
	max-width: 100%;
	margin: 35px auto 0;
	text-align: left;
}
.plan-notes p {
	font-size: 16px;
	font-weight: 700;
	margin: 3px 0;
}

/* ======== その他の機能 ======== */
.oth-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.oth-item {
	background: #FFF;
	border-radius: 10px;
	padding: 45px 55px;
	border: 1px solid #E5E5E5;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.oth-title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
	margin: 0;
	min-height: 4.8em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.oth-ph {
	width: 100%;
	max-width: 276px;
	height: 175px;
	margin-top: 75px;
	background: #D9D9D9;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: #333;
	text-align: center;
}

/* ======== ご利用の流れ ======== */
.flow-img {
	text-align: center;
}
.flow-img img {
	width: 100%;
	max-width: 1025px;
	height: auto;
}

/* ======== FAQ（もっと見る） ======== */
.faq-more {
	text-align: center;
	margin-top: 30px;
}
.faq-more a {
	font-size: 15px;
	text-decoration: underline;
}

/* ======== 資料ダウンロード ======== */
.doc-card {
	background: #FFF;
	border-radius: 16px;
	padding: 50px 40px;
}
.doc-card .cont-h-title.doc-title {
	font-size: 36px;
	margin-bottom: 40px;
}
.doc-card .cont-h-title.doc-title strong {
	color: var(--color-blue);
}
.doc-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
.doc-logo {
	width: 170px;
	height: 200px;
	background: #F9FAFB;
	border: 1px solid #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.doc-logo img {
	width: 120px;
	height: auto;
}
.doc-body {
	text-align: center;
}
.doc-lead {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 18px;
}
.doc-btn {
	width: 550px;
	max-width: 100%;
}
.doc-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}
.doc-btn .dl-ico {
	width: 30px;
	height: auto;
	flex-shrink: 0;
}

/***********************************************
TOP（index）専用 ─ タブレット
************************************************/
@media screen and (max-width: 1240px) {
	.hero .hero-wrap {
		gap: 20px;
	}
	.hero-left h1 {
		font-size: 36px;
	}
	.hero-left h1 .num {
		font-size: 72px;
	}
	.hero-btns .btn a {
		font-size: 20px;
	}
	.oth-item {
		padding: 40px 24px;
	}
	.oth-title {
		font-size: 18px;
	}
	.plan-item {
		padding: 40px 28px;
	}
	.doc-inner {
		gap: 25px;
	}
}

/***********************************************
TOP（index）専用 ─ SP
************************************************/
@media only screen and (max-width: 879px) {
	/* MV */
	.hero {
		padding: 20px 0 40px;
	}
	.hero .hero-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	.hero-left,
	.hero-right {
		min-width: 0;
	}
	.hero-left {
		text-align: center;
	}
	.hero-left h1 {
		font-size: 28px;
		margin-bottom: 20px;
	}
	.hero-left h1 .num {
		font-size: 58px;
	}
	.hero-left h1 .hl .dk::before {
		width: 8px;
		height: 8px;
	}
	.hero-points {
		display: inline-block;
		text-align: left;
		margin-bottom: 25px;
	}
	.hero-points li {
		font-size: 18px;
	}
	.hero-btns {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.hero-btns .btn {
		width: 100%;
		max-width: 400px;
	}
	.hero-monitor img {
		max-width: 200px;
	}
	.hero-badges img {
		max-width: 320px;
	}

	/* 導入企業帯 */
	.client-band {
		padding: 25px 0;
	}
	.client-track li {
		padding: 0 24px;
	}
	.client-track img {
		height: 44px;
	}

	/* 提携メディア */
	.lead-title {
		margin-bottom: 35px;
	}
	.lead-title .lt-1 {
		font-size: 20px;
	}
	.lead-title .lt-2 {
		font-size: 20px;
	}
	.cat-list {
		gap: 12px;
	}
	.cat-list li {
		width: calc((100% - 24px) / 3);
	}

	/* メディア一覧＋CTA */
	.media-group h3 {
		font-size: 18px;
	}
	.media-cols {
		grid-template-columns: repeat(2, 1fr);
	}
	.media-cols li {
		font-size: 14px;
	}
	.cta {
		margin-top: 40px;
	}
	.cta-btns {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.cta-btns .btn {
		width: 100%;
		max-width: 400px;
	}
	/* CTAボタン系はSPで20px */
	.cta-btns .btn a,
	.plan-btn .btn a,
	.doc-btn a,
	.f-contact .btn-area .btn a,
	body main .btn-area .btn.btn-yellow a {
		font-size: 20px;
	}

	/* 導入事例 */
	.case-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* 料金プラン */
	.plan-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.plan-item {
		padding: 35px 24px;
	}
	.plan-item:first-child .plan-tag {
		display: none;
	}
	.plan-name {
		font-size: 26px;
		margin-bottom: 20px;
	}
	.plan-price b {
		font-size: 52px;
	}
	.plan-lead {
		font-size: 30px;
		margin: 24px 0;
	}
	.plan-btn {
		padding-top: 28px;
	}
	.plan-note,
	.plan-notes p {
		font-size: 12px;
	}

	/* その他の機能 */
	.oth-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.oth-item {
		padding: 30px 20px;
	}
	.oth-ph {
		margin-top: 10px;
	}

	/* 資料ダウンロード */
	.doc-card {
		padding: 35px 20px;
	}
	.doc-card .cont-h-title.doc-title {
		font-size: 26px;
	}
	.doc-inner {
		flex-direction: column;
		gap: 20px;
	}
	.doc-lead {
		font-size: 20px;
	}
}

/***********************************************
TOP（index）専用 ─ スマホ小（〜480px）
************************************************/
@media screen and (max-width: 480px) {
	.hero-left h1 {
		font-size: 25px;
	}
	.hero-left h1 .num {
		font-size: 50px;
	}
}