@charset "utf-8";

:root {
	--border-radius: 5px;
	--color-black-darker: #555;
	--color-black-lighter: #999;
	--color-black-main: #777;
	--color-blue-lighter: #83beec;
	--color-blue-lighter-hover: #f7fbff;
	--color-blue-little-lighter: #e5f1fb;
	--color-blue-main: #0076f6;
	--color-gray-darker: #ccc;
	--color-gray-lighter: #f8f8f8;
	--color-gray-little-darker: #e9e9e9;
	--color-gray-main: #eee;
	--color-green-success: #27ad27;
	--color-overlay-bg: rgba(0, 0, 0, .7);
	--color-overlay-tooltip-bg: rgba(0, 0, 0, .8);
	--color-pink-lighter: #f0a8d7;
	--color-pink-lighter-hover: #fef9fd;
	--color-pink-lighter-text: #ed96cf;
	--color-pink-main: #e151af;
	--color-red-error: #e15156;
	--color-white-main: #fff;
	--color-yellow-main: #fe0;
	--container-w-main: 680px;
	--container-w-main-wide: 920px;
	--container-w-thanks: 960px;
	--container-w-wrapper: 1200px;
	--font-size-base: 1.8rem;
	--font-size-bigger: 2.4rem;
	--font-size-smaller: 1.4rem;
	--font-size-super-bigger: 4rem;
	--footer-border-bottom-width: 1px;
	--gap-main: 30px;
	--gap-narrow: 20px;
	--gap-narrow-more: 12px;
	--gap-wide: 40px;
	--gap-wide-more: 80px;
	--header-border-bottom-width: 3px;
	--header-height: 80px;
	--step-navigator-max-height: 77px;
	--t-column-w-address: 222px;
	--t-column-w-age: 60px;
	--t-column-w-checkbox: 50px;
	--t-column-w-customer-name: 152px;
	--t-column-w-dead: 122px;
	--t-column-w-deceased-name: 116px;
	--t-column-w-favorite-category: 135px;
	--t-column-w-gender: 44px;
	--t-column-w-operation: 116px;
	--t-column-w-phone: 170px;
	--t-column-w-sentence-category: 190px;
	--t-column-w-user: 80px;
	--t-include-checkbox-height: 25px;
	--t-include-checkbox-width: 25px;
	--t-include-icon-gap: 6px;
	--t-include-icon-height: 36px;
	--t-include-icon-width: 36px;
	--t-td-height: 50px;
	--t-th-height: 46px;
	--z-index-for-editor: 40;
	--z-index-for-header-menu: 10;
	--z-index-for-overlay: 30;
	--z-index-for-tooltip: 20;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

body {
	background-color: var(--color-gray-main);
	color: var(--color-black-main);
	font-family: "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
	font-size: var(--font-size-base);
	font-weight: normal;
	line-height: 1.8;
	margin: 0;
	text-align: left;
}
/*
@media screen and (max-width:744px) {
	body {
		display: none;
	}
} */

/*--------------------------------------------
	HTML TAG
--------------------------------------------*/
article, aside, footer, header, main, nav, section {
	display: block;
}

section {
	padding: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: normal;
	line-height: 1.3;
	margin-bottom: 0;
}

h1, .h1 {
	font-size: 3rem;
}

.content-header h1 {
	font-size: 2.4rem;
}

h2, .h2 {
	font-size: 2.7rem;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-size: 1.8rem;
}

p {
	margin-bottom: 1.6rem;
	margin-top: 0;
}

small, .fs-small {
	font-size: var(--font-size-smaller);
}

.fs-big {
	font-size: var(--font-size-bigger);
}

b, strong, .bold {
	font-weight: bolder;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: inherit;
}

ol, ul, dl {
	margin: 0;
	padding-left: 0;
}

li {
	list-style: none;
	list-style-position: outside;
	padding-left: 0;
}

table {
	border-collapse: collapse;
}

img {
	vertical-align: middle;
}

select {
	-webkit-appearance: menulist;
	-moz-appearance: menulist;
}

/*--------------------------------------------
	containers
--------------------------------------------*/
.wrapper, .header-wrapper, .main-container-wide, .main-container {
	margin-left: auto;
	margin-right: auto;
}

.wrapper, .header-wrapper {
	width: var(--container-w-wrapper);
}

.main-container-wide {
	position: relative;
	width: var(--container-w-main-wide);
}

.main-container {
	width: var(--container-w-main);
}

@media screen and (max-width:1240px) {
	.wrapper, .header-wrapper {
		width: calc(100% - 40px);
	}
}

@media screen and (max-width:960px) {
	.header-wrapper {
		width: calc(100%);
	}

	.main-container-wide {
		width: 722px;
	}
}

/* 表示切替 */
.tablet {
	display: none;
}

@media screen and (max-width:1200px) {
	.wide-desktop {
		display: none;
	}
}

@media screen and (max-width:960px) {
	.desktop {
		display: none;
	}

	.tablet {
		display: block;
	}
}

/*
/*--------------------------------------------
	位置
--------------------------------------------*/
.pull-center {
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

.text-left {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}

.horizon-reverse {
	transform: scale(-1, 1);
}

/*--------------------------------------------
    幅
--------------------------------------------*/
.table.select-narration-table {
	width: 1200px;
}

.overflow-x {
	border-left: 1px solid var(--color-gray-darker);
	border-right: 1px solid var(--color-gray-darker);
	overflow-x: scroll;
}

.overflow-x .table {
	border-left: none;
	border-right: none;
}

.overflow-x .table th:last-child, .overflow-x .table td:last-child {
	border-right: none;
}

.overflow-x .table th:first-child, .overflow-x .table td:first-child {
	border-left: none;
}

.w100 {
	width: 100%;
}

.w75 {
	width: 75%;
}

.w50 {
	width: 50%;
}

.w45 {
	width: 45%;
}

.w40 {
	width: 40%;
}

.w33 {
	width: 33%;
}

/*--------------------------------------------
	余白
--------------------------------------------*/
.m-right-small {
	margin-right: var(--gap-narrow-more);
}

.m-right-small-more {
	margin-right: calc(var(--gap-narrow-more) / 2);
}

.m-left-small {
	margin-left: var(--gap-narrow-more);
}

.m-left-small-more {
	margin-left: calc(var(--gap-narrow-more) / 2);
}

.m-top-main {
	margin-top: var(--gap-main);
}

/*--------------------------------------------
	button & icon
--------------------------------------------*/
.btn {
	align-items: center;
	background-color: var(--color-black-main);
	color: var(--color-white-main);
	display: inline-flex;
	justify-content: center;
	line-height: 1;
	padding: var(--gap-narrow-more) 2.4em;
	position: relative;
	transition-duration: .3s;
	transition-property: background-color, color;
}

.btn-big {
	padding-bottom: var(--gap-narrow);
	padding-top: var(--gap-narrow);
}

.btn-small {
	padding-bottom: calc(var(--gap-narrow-more) * 2/3);
	padding-left: calc(var(--gap-narrow-more) - 1px);
	padding-right: calc(var(--gap-narrow-more) - 1px);
	padding-top: calc(var(--gap-narrow-more) * 2/3);
}

.btn-medium {
	align-items: center;
	display: inline-flex;
	padding: var(--gap-narrow-more) 2.4em;
	padding-left: calc(var(--gap-narrow-more) + 4px);
	padding-right: calc(var(--gap-narrow-more) + 5px);
}

.btn:hover {
	background-color: var(--color-gray-darker);
}

/* 余白 */
.btn.pd-0 {
	padding: 0;
}

/* 両端半円 */
.btn-ac {
	border-radius: 100vh;
}

/* ボタン色 */
.btn-color-blue {
	background-color: var(--color-blue-main);
	color: var(--color-white-main);
}

.btn-color-blue:hover {
	background-color: var(--color-blue-lighter);
}

.btn-color-pink {
	background-color: var(--color-pink-main);
	color: var(--color-white-main);
}

.btn-color-pink:hover {
	background-color: var(--color-pink-lighter);
}

.btn-color-white {
	background-color: var(--color-white-main);
	color: var(--color-black-darker);
}

.btn.color-gray-main {
	background-color: var(--color-gray-main);
	color: var(--color-black-main);
}

.btn.color-gray-main:hover {
	background-color: var(--color-gray-darker);
}

.btn.bg-color-transparent {
	background-color: transparent;
}

.btn.color-gray-darker {
	background-color: var(--color-gray-darker);
	color: var(--color-black-main);
}

.btn.color-gray-darker.color-white {
	color: var(--color-white-main);
}

/* フォント色 */
.font-color-white {
	color: var(--color-white-main);
}

.font-color-black {
	color: var(--color-black-main);
}

.font-color-white span {
	color: var(--color-gray-darker);
}

.font-color-black span {
	color: var(--color-gray-darker);
}

/* アイコン */
.btn.ico-black-main [class^="icon-"], .btn.ico-gray-main [class*=" icon-"] {
	color: var(--color-black-main);
}

.btn.editor__add-text__close:disabled [class^="icon-"], .btn.ico-gray-main [class*=" icon-"] {
	color: var(--color-gray-darker);
}

.btn.ico-black-main:hover [class^="icon-"], .btn.ico-gray-main:hover [class*=" icon-"] {
	color: var(--color-black-darker);
}

.btn.ico-gray-darker [class^="icon-"], .btn.ico-gray-darker [class*=" icon-"] {
	color: var(--color-gray-darker);
}

.btn.ico-gray-darker:hover [class^="icon-"], .btn.ico-gray-darker:hover [class*=" icon-"] {
	color: var(--color-black-main);
}

.btn.ico-gray-main:hover [class^="icon-"], .btn.ico-gray-main:hover [class*=" icon-"] {
	color: var(--color-black-main);
}

.btn.ico-bigger [class^="icon-"], .btn.ico-bigger [class*=" icon-"] {
	font-size: var(--font-size-bigger);
}

.btn.ico-super-bigger [class^="icon-"], .btn.ico-super-bigger [class*=" icon-"] {
	font-size: var(--font-size-super-bigger);
}

/* border */
.btn.border-gray-darker {
	border: 1px solid var(--color-gray-darker);
}

.btn.border-right {
	border-right-style: solid;
	border-right-width: 1px;
}

.btn.border-right.color-gray-main {
	border-right-color: var(--color-gray-darker);
}

/* アウトライン */
.btn-outline {
	background-color: transparent;
	border: 2px solid var(--color-white-main);
	color: var(--color-white-main);
}

.btn-outline.btn-blue:hover {
	background-color: var(--color-white-main);
	color: var(--color-blue-main);
}

.btn-outline.btn-pink:hover {
	background-color: var(--color-white-main);
	color: var(--color-pink-main);
}

/* disabled */
.btn:disabled {
	background-color: var(--color-gray-darker);
	color: var(--color-white-main);
	pointer-events: none;
}

.editor__main__operator ul .btn:disabled .tooltip-show, .editor__main__operator ul .btn:hover:disabled .tooltip-show {
	display: none;
}

.editor__main__operator ul .btn:disabled i {
	color: var(--color-gray-darker);
}

.btn.ico-black-main.color-gray-main:disabled {
	background-color: var(--color-gray-main);
	color: var(--color-gray-darker);
}

.btn.ico-black-main.color-gray-main:disabled i {
	color: var(--color-gray-darker);
}

/* ボタンアイコン */
.btn-ico-left {
	left: .8em;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* ボタン矢印 */
[class^="btn-arrow-"]::before, [class*=" btn-arrow-"]::before {
	border: 6px solid transparent;
	border-left: 10.38px solid var(--color-white-main);
	content: "";
	height: 0;
	position: absolute;
	top: 50%;
	width: 0;
}

.btn-arrow-right::before {
	right: .8em;
	transform: translateY(-50%);
}

.btn-arrow-left::before {
	left: .8em;
	transform: translateY(-50%) rotate(180deg);
}

/*--------------------------------------------
tooltip
--------------------------------------------*/
.tooltip {
	position: relative;
}

.tooltip-show {
	background-color: var(--color-gray-main);
	color: var(--color-black-main);
	left: calc(0px - var(--gap-narrow-more));
	line-height: 1;
	padding: var(--gap-narrow-more);
	position: absolute;
	top: calc(-1em - var(--gap-narrow-more) * 3);
	white-space: nowrap;
}

.tooltip.bg-black-op .tooltip-show {
	background-color: var(--color-overlay-tooltip-bg);
	color: var(--color-white-main);
}

.line-3 .tooltip-show {
	top: calc(-3em - var(--gap-narrow-more) * 3);
}

.bottom .tooltip-show {
	top: calc(100% + var(--gap-narrow-more));
}

.left .tooltip-show {
	left: 0;
}

.tooltip:has(.tooltip-show)::before {
	border: 8px solid transparent;
	border-top-color: var(--color-gray-main);
	content: "";
	left: calc(50%);
	opacity: 0;
	position: absolute;
	top: calc(-1px - var(--gap-narrow-more));
	transform: translateX(-50%);
}

.tooltip.bottom:has(.tooltip-show)::before {
	border-bottom-color: var(--color-gray-main);
	border-top-color: transparent;
	top: calc(100% - 3px);
}

.tooltip.bg-black-op:has(.tooltip-show)::before {
	border-top-color: var(--color-overlay-tooltip-bg);
}

.tooltip:hover:before {
	opacity: 1;
}

.btn.tooltip:disabled::before {
	opacity: 0;
}

.thanks-body .editor__main__operator .tooltip-show {
	left: calc(100% + var(--gap-narrow-more));
	position: absolute;
	top: calc(0px);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.thanks-body .editor__main__operator .tooltip:has(.tooltip-show)::before {
	border: 8px solid transparent;
	border-right-color: var(--color-gray-main);
	content: "";
	left: calc(100% + var(--gap-narrow-more) - 6px);
	position: absolute;
	top: calc(50% - 8px);
}

/*--------------------------------------------
	form
--------------------------------------------*/
.form-mb {
	margin-bottom: var(--gap-narrow);
}

.form-btn {
	display: flex;
	gap: var(--gap-narrow);
	justify-content: center;
	margin-bottom: var(--gap-main);
}

.form:has(input:invalid) .form-btn:hover .alert-box, .form:has(.invalid) .form-btn:hover .alert-box {
	max-height: 100px;
}

.form-btn .btn {
	min-width: 250px;
}

.form .control-group {
	display: flex;
	gap: var(--gap-narrow);
	margin-bottom: var(--gap-wide);
}

.form label:not([class]) {
	display: block;
	font-weight: bolder;
}

.form .horizontal {
	align-items: center;
	display: block;
	font-size: 0;
}

.form .horizontal > * {
	font-size: var(--font-size-base);
	margin-right: var(--gap-narrow-more);
}

.form .horizontal select {
	width: auto;
}

.spread-form :not(.not-spread) > * {
	flex: 1;
}

.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]).two-digits-input {
	text-align: center;
	width: calc(3em + 20px);
}

.form input {
	color: var(--color-black-main);
	-webkit-text-fill-color: var(--color-black-main);
}

.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]), .form select, .form textarea {
	background-color: var(--color-gray-main);
	border: 2px solid var(--color-gray-main);
	border-radius: 5px;
	box-sizing: border-box;
	color: var(--color-black-main);
	line-height: 1;
	padding: 8px 10px;
}

.input-w100 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]), .input-w100 select, .input-w100 textarea {
	width: 100%;
}

.form select {
	padding-bottom: 7px;
	padding-top: 7px;
}

.form select option {
	color: var(--color-black-main);
}

.form select:invalid {
	color: var(--color-gray-darker);
}

.form select.placeholder option:first-child {
	color: var(--color-gray-darker);
}

.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]):hover, .form select:hover, .form textarea:hover {
	border: 2px solid var(--color-pink-lighter);
}

.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]):focus, .form select:focus, .form textarea:focus {
	background-color: var(--color-white-main);
}

.form input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px var(--color-gray-main) inset;
}

.form input:focus:-webkit-autofill {
	box-shadow: 0 0 0px 1000px var(--color-white-main) inset;
}

.form input::placeholder {
	color: var(--color-gray-darker);
	-webkit-text-fill-color: var(--color-gray-darker);
}

/* textarea */
.form textarea {
	display: block;
	line-height: 1.6;
}
.form textarea .memo {
	line-height: 1;
}

.form textarea::placeholder {
	color: var(--color-gray-darker);
}

/* checkbox & radio-btn */
.form label[class^="for-"], .form label[class*=" for-"] {
	align-items: center;
	background-color: var(--color-gray-main);
	border-radius: 100vh;
	color: var(--color-black-main);
	cursor: pointer;
	display: inline-flex;
	line-height: 1;
	margin-bottom: var(--gap-narrow-more);
	margin-right: 20px;
	padding: 14.5px;
	position: relative;
}

.form label[class^="for-"]:hover, .form label[class*=" for-"]:hover {
	background-color: var(--color-pink-lighter);
	border-radius: 100vh;
	color: var(--color-white-main);
}

.form label[class^="for-"]:has(input:checked), .form label[class*=" for-"]:has(input:checked) {
	background-color: var(--color-pink-lighter);
	color: var(--color-white-main);
}


.form input[type="checkbox"], .form input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
	position: absolute;
}

/* 備考メモと婚姻経験を非表示フォーム用 */
.form input[type="checkbox"].memo-display {
	-webkit-appearance: auto;
	appearance: auto;
	opacity: 1;
	position: static;
}

.form label[class^="for-"]::before, .form label[class*=" for-"]::before {
	align-items: center;
	background-color: var(--color-white-main);
	border: 1px solid var(--color-gray-darker);
	color: var(--color-white-main);
	content: "\e906";
	display: inline-flex;
	font-family: "icomoon";
	height: 20px;
	justify-content: center;
	margin-right: .5rem;
	width: 20px;
}

.form label[class^="for-"]:hover::before, .form label[class*=" for-"]:hover::before {
	border: 1px solid var(--color-pink-lighter);
}

.form label[class^="for-"]:has(input:checked)::before, .form label[class*=" for-"]:has(input:checked)::before {
	border: 1px solid var(--color-white-main);
	color: var(--color-pink-lighter);
	content: "\e906";
}


/* エラー文 */
.form .error {
	background-color: var(--color-pink-lighter-hover);
	border-radius: var(--border-radius);
	bottom: -2.5em;
	display: none;
	font-size: var(--font-size-smaller);
	margin-bottom: 0;
	margin-top: 6px;
	padding: 4px 10px;
	position: absolute;
	transition-delay: .3s;
	white-space: nowrap;
}

.error-text {
	background-color: var(--color-pink-lighter-hover);
	border-radius: var(--border-radius);
	bottom: -2.5em;
	display: none;
	font-size: var(--font-size-smaller);
	margin-bottom: 0;
	margin-top: 6px;
	padding: 4px 10px;
	transition-delay: .3s;
	white-space: nowrap;
}

.error-text.show {
	display: block;
}

.form .error::before {
	color: var(--color-red-error);
	content: "\e919";
	display: inline;
	font-family: "icomoon";
	margin-right: 6px;
}

.valid-form:hover:has(input:invalid) .error, .valid-form:hover:has(input:focus:invalid) .error, .validation-check-box.invalid.show .error, .required-form:hover:has(input:invalid) .error, .required-form:has(input:focus:invalid) .error, .show-error.error {
	display: block;
}


/* バリデーション関連 */
.form:has(input:invalid) .submit-btn, .form:has(textarea:invalid) .submit-btn, .form:has(.invalid) .submit-btn {
	opacity: .6;
	pointer-events: none;
}

.required-form, .validation-check-box, .valid-form {
	position: relative;
}

.required-form:hover:has(input:invalid)::before, .required-form:has(input:focus:invalid)::before, .required-form:hover:has(textarea:invalid)::before, .required-form:has(textarea:focus:invalid)::before, .required-form.invalid.show:hover::before {
	background-color: var(--color-pink-lighter);
	border-radius: var(--border-radius);
	color: var(--color-white-main);
	content: "必須";
	display: block;
	left: -76px;
	line-height: 1;
	padding: 14.5px;
	position: absolute;
	right: auto;
	top: 1.8em;
	width: 68px;
}

.required-form:hover:has(input:invalid)::after, .required-form:has(input:focus:invalid)::after, .required-form:hover:has(textarea:invalid)::after, .required-form:has(textarea:focus:invalid)::after, .required-form.invalid.show:hover::after {
	border: 5px solid transparent;
	border-left: 5px solid var(--color-pink-lighter);
	content: "";
	display: block;
	left: -8px;
	position: absolute;
	right: auto;
	top: 2.8em;
	width: 0;
	width: 5px;
}

.form-error {
	color: var(--color-red-error);
}

/* 右側に吹き出し */
.required-form.right-mark:hover:has(input:invalid)::before, .required-form.right-mark:has(input:focus:invalid)::before, .required-form.right-mark:hover:has(textarea:invalid)::before, .required-form.right-mark:has(textarea:focus:invalid)::before, .required-form.right-mark.invalid.show:hover::before {
	left: auto;
	right: -76px;
}

.required-form.right-mark:hover:has(input:invalid)::after, .required-form.right-mark:has(input:focus:invalid)::after, .required-form.right-mark:hover:has(textarea:invalid)::after, .required-form.right-mark:has(textarea:focus:invalid)::after, .required-form.right-mark.invalid.show:hover::after {
	border-left: transparent;
	border-right: 5px solid var(--color-pink-lighter);
	left: auto;
	right: -8px;
}

.form input:focus:invalid, .form textarea:focus:invalid {
	background-color: var(--color-pink-lighter-hover);
	color: var(--color-red-error);
	-webkit-text-fill-color: var(--color-red-main);
}

/* 表示切替関連 */
.form .display {
	height: auto;
	opacity: 1;
	transition-property: opacity;
	visibility: visible;
}

.form .not-display {
	height: 0;
	opacity: 0;
	visibility: hidden;
}

/*--------------------------------------------
table
--------------------------------------------*/
.table {
	background-color: var(--color-white-main);
	border: 1px solid var(--color-gray-darker);
	border-collapse: collapse;
	color: var(--color-black-main);
	margin-bottom: var(--gap-main);
	max-width: 100%;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}

.table thead {
	background-color: var(--color-gray-little-darker);
	border-bottom: 1px solid var(--color-gray-darker);
}

.table thead th {
	height: var(--t-th-height);
}

.table th, .table td {
	border: 1px solid var(--color-gray-darker);
	font-weight: normal;
	line-height: 1;
	padding-left: var(--gap-narrow-more);
	padding-right: var(--gap-narrow-more);
	vertical-align: middle;
}

.table td {
	height: var(--t-td-height);
	margin-top: -10px;
	overflow-x: scroll;
	padding-top: 10px;
	white-space: nowrap;
}

.table td.no-scroll {
	margin-top: 0;
	overflow: hidden;
	padding-top: 0;
}

.table td.hide-scroll {
	padding: 10px;
}

.table td.hide-scroll::-webkit-scrollbar {
	display: none;
}

.table td::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.table td::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-darker);
	--bg-opacity: 1;
	margin: 10px 0;
}

/* カラム */
.table .td-memo, .table .th-memo {
	text-align: left;
	text-overflow: ellipsis;
}

.table .td-narration, .table .th-narration {
	text-align: left;
}

.table .th-check, .table .td-check {
	padding: 0;
	width: var(--t-column-w-checkbox);
}

.table .td-check {
	margin-top: 0;
}

.table .th-gender {
	width: var(--t-column-w-gender);
}

.table .th-age {
	width: var(--t-column-w-age);
}

.table .th-dead-data {
	width: var(--t-column-w-dead);
}

.table .th-favorite-category {
	width: var(--t-column-w-favorite-category);
}

.table .th-sentence-category {
	width: var(--t-column-w-sentence-category);
}

.table .th-deceased-name {
	width: var(--t-column-w-deceased-name);
}

.table .th-customer-name {
	width: var(--t-column-w-customer-name);
}

.table .th-user {
	width: var(--t-column-w-user);
}

.table .th-address {
	width: var(--t-column-w-address);
}

.table .th-phone {
	width: var(--t-column-w-phone);
}

.table .th-mail {
	width: calc(1200px - var(--t-column-w-checkbox) - var(--t-include-icon-width) * 2 + var(--t-include-icon-gap) * 3 - var(--t-column-w-customer-name) - var(--t-column-w-customer-name) - var(--t-column-w-address) - var(--t-column-w-phone));
}

/* 操作 */

.table .th-operation.btn-num-2 {
	width: calc(var(--t-include-icon-width) * 2 + var(--t-include-icon-gap) * 3);
}

.table .th-operation.btn-num-1 {
	width: calc(var(--t-include-icon-width) + var(--t-include-icon-gap) * 4.2);
}

.table .td-operation {
	padding: 0;
}

.table .td-operation ul {
	display: flex;
	gap: var(--t-include-icon-gap);
	justify-content: center;
}

.table .td-operation a {
	align-items: center;
	background-color: var(--color-gray-darker);
	color: var(--color-white-main);
	display: inline-flex;
	height: var(--t-include-icon-height);
	justify-content: center;
	transition-delay: .2s;
	transition-property: color, background-color;
	width: var(--t-include-icon-width);
}

.table .td-operation a:hover {
	background-color: var(--color-pink-lighter);
	color: var(--color-white-main);
}

/* チェックボックス */
.form label.for-checkbox.checkbox-only {
	align-items: center;
	background: none;
	border-radius: 0;
	display: flex;
	height: 100%;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

.form label.for-checkbox.checkbox-only::before {
	background-color: var(--color-white-main);
	height: var(--t-include-checkbox-height);
	margin-right: 0;
	padding: 0;
	width: var(--t-include-checkbox-width);
}

.table.select-narration-table tr.hover label.for-checkbox.checkbox-only::before, .form label.for-checkbox.checkbox-only:hover::before {
	background-color: var(--color-white-main);
	border: 1px solid var(--color-pink-lighter);
	color: var(--color-pink-lighter);
	content: "\e906";
}

.form label.for-checkbox.checkbox-only:has(input:checked) {
	background: none;
}

.form label.for-checkbox.checkbox-only:has(input:checked)::before {
	background-color: var(--color-pink-lighter);
	border: 1px solid var(--color-pink-lighter);
	color: var(--color-white-main);
	content: "\e906";
}

/* メモ・備考欄ツールチップ */
.full-text {
	background-color: var(--color-overlay-tooltip-bg);
	border-radius: var(--border-radius);
	color: var(--color-white-main);
	padding: var(--gap-narrow-more);
	position: absolute;
	transition-duration: .3s;
	transition-property: opacity;
	visibility: hidden;
	width: 725px;
	z-index: var(--z-index-for-tooltip);
}

.full-text.show {
	opacity: 1;
	visibility: visible;
}

.full-text::after {
	border: 1.2rem solid transparent;
	content: "";
	left: 22px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	visibility: visible;
}

.full-text.show::after {
	opacity: 1;
	visibility: visible;
}

.full-text.top::after {
	border-top-color: var(--color-overlay-tooltip-bg);
	top: 100%;
}

.full-text.bottom::after {
	border-bottom-color: var(--color-overlay-tooltip-bg);
	bottom: 100%;
}

/* ページャー */
.pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-narrow-more);
	justify-content: center;
	line-height: 1;
	list-style: none;
	margin-bottom: var(--gap-main);
	margin-top: var(--gap-main);
}

.pager li {
	align-items: center;
	background-color: var(--color-gray-main);
	border: 3px solid var(--color-gray-darker);
	color: #ccc;
	display: flex;
	height: 40px;
	justify-content: center;
	transition-duration: .2s;
	transition-property: color, background-color, border;
	width: 40px;
}

.pager li a {
	align-items: center;
	background-color: var(--color-white-main);
	color: var(--color-pink-lighter);
	display: flex;
	height: 100%;
	justify-content: center;
	transition-duration: .2s;
	transition-property: color, background-color;
	width: 100%;
}

.pager li:has(a) {
	background-color: var(--color-white-main);
	border-color: var(--color-pink-lighter);
}

.pager li:has(a):hover {
	background-color: var(--color-white-main);
	border-color: var(--color-pink-lighter);
}

.pager li a:hover {
	background-color: var(--color-pink-lighter);
	color: var(--color-white-main);
	text-decoration: none;
}

.pager li a::after {
	transition-duration: .2s;
	transition-property: color, border;
}

.pager li.next a::after {
	border: 6px solid transparent;

/* 正三角形：baseのborder-width*1.73 */
	border-left: 10.38px solid var(--color-pink-lighter);
	content: "";
	left: 4px;
	position: relative;
}

.pager li.next:hover a::after {
	border-left-color: var(--color-white-main);
}

.pager li.prev a::after {
	border: 6px solid transparent;
	border-right: 10.38px solid var(--color-pink-lighter);
	content: "";
	position: relative;
	right: 4px;
}

.pager li.prev:hover a::after {
	border-right-color: var(--color-white-main);
}

/*--------------------------------------------
header
--------------------------------------------*/
header {
	background-color: var(--color-white-main);
	border-bottom-color: var(--color-gray-darker);
	border-bottom-style: solid;
	border-bottom-width: var(--header-border-bottom-width);
	height: var(--header-height);
}

.header-wrapper {
	align-items: center;
	display: flex;
}

.header__logo {
	width: 260px;
}

.header__logo img {
	width: 119px;
}

.header__logo--login {
	text-align: center;
}

.header__logo--login img {
	width: 200px;
}

@media screen and (max-width:1240px) {
	.header__logo {
		width: 160px;
	}
}

@media screen and (max-width:960px) {
	.header__logo img {
		margin-left: var(--gap-narrow);
	}
}

.header__menu {
	display: flex;
	flex-grow: 1;
}
.header__menu--color {
	color: var(--color-black-main);
}

.header__menu--flex-end {
	align-items: center;
	height: var(--header-height);
	justify-content: flex-end;
}

.header__menu--flex-end a {
	color: var(--color-black-darker);
}

/* main-menu */
.header__menu__main {
	align-items: center;
	display: flex;
	margin-right: auto;
}

.header__menu__main > ul {
	display: flex;
}

.header__menu__main > ul li {
	position: relative;
}

.header__menu__main h2 {
	cursor: pointer;
	display: inline-block;
	font-size: var(--font-size-base);
	padding-right: var(--gap-main);
	position: relative;
}

.header__menu__main h2::after {
	background-color: var(--color-pink-main);
	bottom: -12px;
	content: "";
	display: block;
	height: 2px;
	left: -100%;
	opacity: 0;
	position: absolute;
	transition-duration: .3s;
	transition-property: left, opacity;
	width: calc(100% - var(--gap-main));
}

.header__menu__main h2:hover::after {
	left: 0;
	opacity: 1;
}

.header-main-menu {
	background-color: var(--color-white-main);
	box-shadow: 0 0 0 1px var(--color-gray-darker) inset, 0 0 0 4px var(--color-white-main) inset, 0 0 0 7px var(--color-gray-main) inset;
	opacity: 0;
	padding: 7px;
	pointer-events: none;
	position: absolute;
	transition-duration: .3s;
	transition-property: opacity;
	white-space: nowrap;
	z-index: 0;
}

.header-main-menu li {
	display: none;
	line-height: 1;
}

.header-main-menu li a {
	border-bottom: 1px solid var(--color-gray-main);
	color: var(--color-black-main);
	display: block;
	padding: var(--gap-narrow-more) var(--gap-narrow) var(--gap-narrow-more) var(--gap-narrow-more);
	transition-duration: .2s;
	transition-property: color, background-color;
}

.header-main-menu li a:hover {
	background-color: var(--color-pink-lighter);
	color: var(--color-white-main);
}

.header-main-menu.open {
	opacity: 1;
	pointer-events: auto;
	z-index: var(--z-index-for-header-menu);
}

.header-main-menu.open li {
	display: block;
}

/* user-info-menu */
.header__menu__user-info {
	position: relative;
}

.header__menu__user-info button {
	align-items: center;
	border-left: 1px solid var(--color-gray-main);
	border-right: 1px solid var(--color-gray-main);
	color: var(--color-gray-darker);
	display: flex;
	height: var(--header-height);
	line-height: 1.3;
	padding: var(--gap-narrow-more);
	transition-duration: .3s;
	transition-property: color;
}

.header__menu__user-info button:hover {
	color: var(--color-black-main);
}

.header__menu__user-info__icon {
	align-items: center;
	background-color: var(--color-gray-main);
	border-radius: 100%;
	display: flex;
	font-size: 2.5rem;
	height: 50px;
	justify-content: center;
	text-align: center;
	transition-duration: .3s;
	transition-property: color, background-color;
	width: 50px;
}

.header__menu__user-info button:hover .header__menu__user-info__icon {
	background-color: var(--color-gray-darker);
	color: var(--color-white-main);
}

.header__menu__user-info__text {
	padding-left: var(--gap-narrow-more);
	text-align: left;
}

.header__menu__user-info button p {
	margin-bottom: 0;
}

.header__menu__user-info__name {
	font-size: var(--font-size-smaller);
}

.header__menu__user-info nav {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition-duration: .3s;
	transition-property: opacity;
	width: 100%;
	z-index: 0;
}

.header__menu__user-info nav.open {
	opacity: 1;
	pointer-events: auto;
	z-index: var(--z-index-for-header-menu);
}

.header__menu__user-info a {
	background-color: var(--color-overlay-bg);
	color: var(--color-white-main);
	display: block;
	line-height: 1;
	padding: var(--gap-narrow-more);
	transition-duration: .2s;
	transition-property: var(opacity);
	width: 100%;
}

.header__menu__user-info a:hover {
	opacity: .8;
}

/*--------------------------------------------
	main
--------------------------------------------*/
main {
	min-height: calc(100vh - var(--header-height) - var(--header-border-bottom-width) - 1.8em - 1px - var(--gap-narrow) - var(--gap-narrow));
}

.main-page {
	margin-top: var(--gap-main);
}

.main-page h1 {
	font-weight: bolder;
	margin-bottom: var(--gap-main);
	margin-top: var(--gap-main);
	padding-bottom: 22px;
	position: relative;
	text-align: center;
}

.main-page h1::after {
	background-color: var(--color-pink-lighter);
	bottom: 0;
	content: "";
	display: block;
	height: 7px;
	left: 50%;
	margin: auto;
	position: absolute;
	transform: translateX(-50%);
	width: 200px;
}

.heading-additional {
	margin-bottom: var(--gap-main);
	margin-top: -1em;
	text-align: center;
}

/*--------------------------------------------
	footer
--------------------------------------------*/
.footer__wrapper-login {
	border-top: 1px solid var(--color-gray-darker);
	color: var(--color-gray-darker);
	margin-top: var(--gap-main);
	padding: var(--gap-narrow);
	text-align: center;
}

.footer__wrapper-login a {
	color: var(--color-gray-darker);
}

.footer__wrapper {
	border-top: 1px solid var(--color-gray-darker);
	text-align: center;
}

.footer-nav {
	align-items: center;
	background-color: var(--color-white-main);
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

.footer-nav img {
	max-width: 200px;
}

.footer-link {
	display: flex;
	font-weight: bold;
}

.footer-link li {
	margin-left: 20px;
}

.footer-link a {
	color: var(--color-black-darker);
}

.copy-light {
	color: var(--color-black-darker);
	padding: 14px;
	text-align: center;
}

@media screen and (max-width:1240px) {
	.footer__wrapper {
		margin-left: var(--gap-narrow);
		margin-right: var(--gap-narrow);
	}
}

/*--------------------------------------------
	step-navigator
--------------------------------------------*/
.step-navigator {
	background-color: var(--color-white-main);
	color: var(--color-black-lighter);
}

.step-navigator ul {
	align-items: center;
	display: flex;
	justify-content: space-between;
	max-height: var(--step-navigator-max-height);
	overflow: hidden;
	padding-bottom: var(--gap-narrow-more);
	padding-top: var(--gap-narrow-more);
	position: relative;
}

.step-navigator ul::before {
	border-bottom: 1px solid var(--color-gray-darker);
	content: "";
	height: 0;
	left: 56px;
	position: absolute;
	top: calc(50% - 13px);
	width: calc(100% - 112px);
	z-index: 0;
}

.step-navigator ul li {
	min-width: 112px;
	text-align: center;
	z-index: 1;
}

.step-navigator ul li p {
	font-size: var(--font-size-smaller);
	line-height: 1;
	margin-bottom: 0;
}

.step-navigator__number {
	align-items: center;
	background-color: var(--color-gray-darker);
	border-radius: 100%;
	color: var(--color-white-main);
	display: flex;
	height: 30px;
	justify-content: center;
	margin-bottom: .5em;
	margin-left: auto;
	margin-right: auto;
	width: 30px;
}

.reached .step-navigator__number {
	background-color: var(--color-pink-lighter);
}

/*--------------------------------------------
	content
--------------------------------------------*/
.white-box {
	background-color: var(--color-white-main);
	color: var(--color-black-main);
	margin-bottom: var(--gap-main);
	margin-top: var(--gap-main);
	padding: var(--gap-wide) var(--gap-wide-more);
}

.white-box.border-gray-darker {
	border: 1px solid var(--color-gray-darker);
}

.white-box.padding-main {
	padding: var(--gap-main) var(--gap-main);
}

/* コンテンツヘッダー */
.content-header {
	align-items: flex-start;
	display: flex;
	gap: var(--gap-narrow);
	margin-top: var(--gap-narrow);
}

.content-header h1 {
	font-weight: bolder;
	line-height: 1;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 13px;
	text-align: left;
}

.content-header h1::after {
	background-color: var(--color-pink-main);
	height: 6px;
	left: 0;
	margin: auto;
	transform: translateX(0);
	width: 140px;
}

.content-header__record-count {
	background-color: var(--color-gray-darker);
	border-radius: 100vh;
	line-height: 1;
	padding: 6px var(--gap-narrow-more) 4px var(--gap-narrow-more);
}

.content-header__nav ul {
	display: flex;
}

.content-header:has(h1) nav {
	margin-left: auto;
}

.content-header__nav ul li:nth-child(n + 2) {
	border-left: 1px solid var(--color-gray-main);
	margin-left: 15px;
}

.content-header__nav ul li a, .content-header__nav ul li:not(:has(a)) {
	align-items: center;
	background-color: var(--color-white-main);
	color: var(--color-black-main);
	display: flex;
	gap: var(--gap-narrow-more);
	height: 50px;
	padding: 0 var(--gap-narrow);
	transition-duration: .2s;
	transition-property: color, background-color;
}

.content-header__nav ul li .icon {
	color: var(--color-gray-darker);
	font-size: var(--font-size-bigger);
	transition-duration: .2s;
	transition-property: color, background-color;
}

.content-header__nav p {
	line-height: 1.4;
	margin: 0;
}

.content-header__nav__sub-text {
	color: var(--color-gray-darker);
	padding-left: .2em;
}

.content-header__nav ul li a:hover, .content-header__nav ul li.active:not(:has(a)), .content-header__nav.pink ul li a {
	background-color: var(--color-pink-main);
	color: var(--color-white-main);
}

.content-header__nav ul li a:hover .icon, .content-header__nav ul li.active .icon {
	color: var(--color-white-main);
}

.content-header__nav ul li a:hover .content-header__nav__sub-text, .content-header__nav ul li.active .content-header__nav__sub-text {
	color: var(--color-pink-lighter-text);
}

.content-header__nav.pink ul li a:hover {
	background-color: var(--color-pink-lighter);
}

.content-header__nav.pink ul li a:hover .content-header__nav__sub-text {
	color: var(--color-white-main);
	opacity: .3;
}

/* blue nav */
.content-header__nav.blue ul li a {
	background-color: var(--color-blue-main);
	color: var(--color-white-main);
}

.content-header__nav.blue ul li a .icon {
	color: var(--color-white-main);
}

.content-header__nav.blue ul li a:hover {
	background-color: var(--color-blue-lighter);
}

@media screen and (max-width:960px) {
	.content-header__nav.is-tablet-change ul li a, .content-header__nav.is-tablet-change ul li:not(:has(a)) {
		height: 100px;
	}

	.content-header__nav__sub-text {
		padding-left: 0;
	}
}

/*--------------------------------------------
検索エリア
--------------------------------------------*/
.operation-form {
	background-color: var(--color-gray-lighter);
	border: 1px solid var(--color-gray-darker);
	border-bottom: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: var(--gap-narrow-more);
	padding-top: 0;
}

.operation-form__collective, .operation-form__search {
	align-items: flex-end;
	display: flex;
	gap: var(--gap-narrow-more);
	margin-top: var(--gap-narrow-more);
}

.operation-form__box option {
	color: var(--color-black-main);
}

.operation-form__fix {
	width: 150px;
}

.recorder-count-message {
	border: 1px solid var(--color-gray-darker);
	border-bottom: none;
	font-size: var(--font-size-smaller);
	margin-bottom: 0;
	text-align: center;
}

/* コントロール調整 */
.operation-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]), .operation-form select {
	padding: 4px;
}

.operation-form select {
	padding-bottom: 3px;
	padding-top: 3px;
}

.operation-form label {
	font-size: var(--font-size-smaller);
	line-height: 1.3;
}

.operation-form__search input {
	width: 180px;
}

.operation-form .btn {
	padding: 10.5px;
	padding: 10px;
	white-space: nowrap;
}

.operation-form .btn-text {
	margin-left: .2em;
}


/*--------------------------------------------
ナレーション作成
--------------------------------------------*/
/* AIかんたん作成
--------------------------------------------*/
/* -- ナレーション選択 */
.mode-select {
	display: flex;
	gap: var(--gap-main);
}

.mode-select a {
	color: var(--color-white-main);
	margin-top: var(--gap-narrow-more);
	padding: 4rem var(--gap-main);
}

.mode-select a.mode-select__ai {
	background-color: var(--color-pink-main);
}

.mode-select a.mode-select__own {
	background-color: var(--color-blue-main);
}

.mode-select article {
	display: flex;
	flex-flow: column;
	justify-content: center;
}

.mode-select__icon {
	font-size: 4rem;
	line-height: 1;
	margin-bottom: var(--gap-narrow-more);
	text-align: center;
}

.mode-select__heading {
	align-items: center;
	display: inline-flex;
	font-weight: bold;
	justify-content: center;
	margin-bottom: var(--gap-narrow-more);
	min-height: 2.7em;
	text-align: center;
}

.mode-select__description {
	line-height: 1.5;
	margin-bottom: var(--gap-main);
	opacity: .7;
	transition-duration: .3s;
	transition-property: opacity;
}

.mode-select article .btn i {
	opacity: 0;
}

.mode-select article:hover .btn i {
	opacity: 1;
}

.mode-select article:hover .btn-outline.btn-blue {
	background-color: var(--color-white-main);
	color: var(--color-blue-main);
}

.mode-select article:hover .btn-outline.btn-pink {
	background-color: var(--color-white-main);
	color: var(--color-pink-main);
}

/* -- エピソード入力 */
.robot-comment .robot-comment__label {
	border: 1px solid var(--color-gray-main);
	border-radius: var(--border-radius);
	display: inline-block;
	line-height: 1;
	margin-bottom: var(--gap-narrow-more);
	padding: var(--gap-narrow-more) var(--gap-narrow-more);
	position: relative;
}

.robot-comment .robot-comment__label::before {
	border: 10px solid transparent;
	border-right-color: var(--color-gray-main);
	content: "";
	left: -20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.robot-comment .robot-comment__label::after {
	border: 8px solid transparent;
	border-right-color: var(--color-white-main);
	content: "";
	left: -16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.robot-comment__icon {
	color: var(--color-gray-darker);
	font-size: 3.5rem;
	left: -65px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.required-form.robot-comment:hover:has(input:invalid)::before, .required-form.robot-comment:has(input:focus:invalid)::before, .required-form.robot-comment:hover:has(textarea:invalid)::before, .required-form.robot-comment:has(textarea:focus:invalid)::before, .required-form.robot-comment.invalid.show:hover::before {
	top: 3.1em;
}

.required-form.robot-comment:hover:has(input:invalid)::after, .required-form.robot-comment:has(input:focus:invalid)::after, .required-form.robot-comment:hover:has(textarea:invalid)::after, .required-form.robot-comment:has(textarea:focus:invalid)::after, .required-form.robot-comment.invalid.show:hover::after {
	top: 4.1em;
}

/* -- Loading */
body:has(.loading.before_loaded) .content-wrapper {
	height: 100vh;
	overflow: hidden;
	position: relative;
}

body:has(.loading.loaded) .content-wrapper {
	height: auto;
	overflow: auto;
	position: inherit;
}

body:has(.loading.loaded) .loading {
	display: none;
}

.loading {
	align-items: center;
	background-color: var(--color-overlay-bg);
	display: flex;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: var(--z-index-for-overlay);
}

.loading__info {
	color: var(--color-white-main);
	text-align: center;
}

.loading__info__icon {
	animation-duration: .7s;
	animation-iteration-count: infinite;
	animation-name: loadingIconAnimation;
	font-size: 6rem;
	line-height: 1;
	position: relative;
	transform: rotate(10deg);
}

.loading__info__icon i {
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: loadingIconShowAnimation;
	opacity: 0;
}

.loading__info__progressbar {
	background-color: var(--color-white-main);
	height: 25px;
	margin-bottom: var(--gap-narrow-more);
	position: relative;
}

.loading__info__progressbar::after {
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-name: progressbarAnimation;
	background-color: var(--color-gray-darker);
	content: "";
	height: 25px;
	left: 0;
	position: absolute;
	top: 0;
	width: 0%;
}

@keyframes progressbarAnimation {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes loadingIconShowAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes loadingIconAnimation {
	0% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-20deg);
	}
}

/* -- 入力前確認画面 */
.episode-confirm {
	align-items: center;
	background-color: var(--color-overlay-bg);
	display: none;
	height: 100vh;
	justify-content: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100vw;
	z-index: var(--z-index-for-overlay);
}

body:has(.loading.loaded + .episode-confirm.before_confirm) {
	overflow: hidden;
}

body:has(.loading.loaded) .episode-confirm.before_confirm {
	display: flex;
}

body:has(.loading.loaded + .episode-confirm.confirmed) {
	overflow: auto;
}

body:has(.loading.loaded) .episode-confirm.confirmed {
	display: none;
}

.episode-confirm__info {
	background-color: var(--color-white-main);
	padding: var(--gap-main) 60px;
	text-align: center;
}

.episode-confirm__info__icon {
	font-size: 6rem;
	line-height: 1;
}

.episode-confirm__info__description {
	text-align: left;
}

.episode-confirm__info__btn {
	margin-bottom: var(--gap-narrow);
}

.episode-confirm__info__btn .btn {
	width: 250px;
}

.form .episode-confirm__info__check label.checkbox-only {
	width: auto;
}

.form .episode-confirm__info__check label.checkbox-only:hover {
	color: var(--color-black-main);
}

.form .episode-confirm__info__check label.checkbox-only:has(input:checked) {
	color: var(--color-black-main);
}

/* 自社専用ナレーション作成
--------------------------------------------*/
/* -- 自社専用ナレーション編集画面ヘッダー*/
.episode-body__header {
	align-items: center;
	display: flex;
}

/* -- 自社専用ナレーション選択 */
.table.select-narration-table tbody tr {
	cursor: pointer;
}

.table.select-narration-table tr.hover td {
	background-color: var(--color-pink-lighter-hover);
}

/* -- テキストエリアが勝手に動く動作を防止 */
.overflow-anchor {
	overflow-anchor: none;
}

/*--------------------------------------------
ナレーション/お礼状：編集・確認
--------------------------------------------*/
/* -- 元に戻す、やり直すボタン */
.prev-next-btn {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-smaller);
	gap: var(--gap-narrow-more);
	left: 50%;
	max-width: 110px;
	position: fixed;
	top: calc(var(--header-height) + var(--gap-main) + var(--step-navigator-max-height) + var(--gap-narrow));
	transform: translateX(calc(var(--container-w-main) / 2 + var(--gap-narrow-more)));
	z-index: calc(var(--z-index-for-overlay) - 1);
}

@media screen and (max-width:960px) {
	.prev-next-btn {
		transform: translateX(calc(var(--container-w-main) / 2 - 50%));
	}
}

.content-editor textarea, .content-editor input[type="text"] {
	border-radius: 0;
}

.content-editor textarea:hover, .content-editor input[type="text"]:hover {
	border-color: var(--color-blue-lighter);
}

.content-editor textarea:active, .content-editor input[type="text"]:active {
	border-color: transparent;
}

/* -- 文章入れ替え */
.replace_sentences {
	display: none;
}

/* -- 操作 */
body:has(.editor-wrapper.editing)::before {
	background-color: var(--color-overlay-bg);
	content: "";
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	transition-duration: .3s;
	width: 100vw;
	z-index: var(--z-index-for-overlay);
}

.editor-wrapper.editing .episode__body__textarea {
	border-color: transparent;
	z-index: var(--z-index-for-editor);
}

.editor, .editor__main, .editor__favorite, .editor__add-text {
	opacity: 0;
	position: relative;
	transition-duration: .3s;
	transition-property: opacity;
	visibility: hidden;
	z-index: var(--z-index-for-editor);
}

.editor__main, .editor__favorite, .editor__add-text {
	position: absolute;
}

.editor-wrapper.editing .editor, .editor-wrapper.editing .editor__main {
	display: flex;
	opacity: 1;
	visibility: visible;
}


.editor-wrapper.in-trash {
	display: none;
}

/* -- お気に入り登録フォーム */
.editor__favorite {
	background-color: var(--color-gray-main);
	border: 1px solid var(--color-gray-main);
	position: fixed;
	text-align: center;
}

.editor__favorite__close {
	position: absolute;
	right: 0;
	top: -2em;
}

.editor__favorite__h3 {
	background-color: var(--color-black-main);
	color: var(--color-white-main);
	padding-bottom: var(--gap-narrow-more);
	padding-top: var(--gap-narrow-more);
}

.editor__favorite__body {
	background-color: var(--color-gray-main);
	padding: var(--gap-narrow);
}

.editor__favorite__body select {
	background-color: var(--color-white-main);
}

.editor__favorite__submit {
	margin: var(--gap-narrow-more) 0 0 0;
}

.editor__favorite__submit .register, .editor__favorite__h3 .register {
	display: inline;
}

.editor__favorite__submit .remove, .editor__favorite__h3 .remove {
	display: none;
}

select[name="favorite-cat"] {
	display: block;
}

.remove-favorite-form .editor__favorite__submit .register, .remove-favorite-form .editor__favorite__h3 .register {
	display: none;
}

.remove-favorite-form .editor__favorite__submit .remove, .remove-favorite-form .editor__favorite__h3 .remove {
	display: inline;
}

.remove-favorite-form select[name="favorite-cat"] {
	display: none;
}

.editor__favorite.show {
	opacity: 1;
	visibility: visible;
	z-index: calc(var(--z-index-for-editor) + 1);
}

body:has(.editor__favorite.show) {
	overflow: hidden !important;
}

.content-editor:has(.editor__favorite.show) .editor-wrapper {
	position: relative;
	z-index: calc(var(--z-index-for-overlay) - 1);
}

/* -- 文書挿入 */
.editor__add-text {
	background-color: var(--color-white-main);
	left: 50%;
	position: fixed;
	transform: translateX(-50%);
	width: calc(var(--container-w-main) - var(--gap-main) * 2);
}


.editor__add-text__header {
	align-items: center;
	border-bottom: 1px solid var(--color-gray-darker);
	display: flex;
	height: 50px;
	overflow: hidden;
}

.editor__add-text__header h3 {
	background-color: var(--color-gray-main);
	padding: var(--gap-narrow-more) var(--gap-narrow);
}

.editor__add-text__header__select {
	border-bottom: 3px solid var(--color-white-main);
	padding-left: var(--gap-narrow-more);
	padding-right: var(--gap-narrow-more);
	padding-top: 3px;
}

.editor__add-text__header__select:has(.selected) {
	border-bottom: 3px solid var(--color-black-main);
}

.editor__add-text__header__select:hover {
	border-bottom: 3px solid var(--color-gray-darker);
}

.form .editor__add-text__header select {
	background-color: var(--color-white-main);
	border: none;
}

.editor__add-text__close {
	margin-left: auto;
}

.editor__add-text__body {
	max-height: 200px;
	overflow-y: scroll;
}

.editor__add-text__body ul li {
	border-bottom: 1px solid var(--color-gray-darker);
	cursor: pointer;
	font-size: var(--font-size-smaller);
	line-height: 1.4em;
	padding: var(--gap-narrow-more);
}

.editor__add-text__body ul li:hover {
	background-color: var(--color-gray-main);
	cursor: pointer;
}

.editor__add-text__body__btn-set {
	left: calc(100% + 10px);
	opacity: 0;
	position: absolute;
	transition-duration: .3s;
	transition-property: top;
	visibility: hidden;
}

.editor__add-text__body__btn-set.show {
	opacity: 1;
	visibility: visible;
}

.editor__add-text__body__btn-set .btn {
	width: 42px;
}

.sentences_list_error {
	padding: var(--gap-main);
	text-align: center;
}

.editor__add-text.show {
	opacity: 1;
	visibility: visible;
	z-index: calc(var(--z-index-for-editor) + 1);
}

/* .editor__favorite.show {
	opacity: 1;
	visibility: visible;
	z-index: calc(var(--z-index-for-editor) + 1);
} */
body:has(.editor__favorite.show) .editor__add-text.show {
	opacity: 0;
	z-index: calc(var(--z-index-for-overlay) - 1);
}

/* .content-editor:has(.editor__favorite.show) .editor-wrapper {
	position: relative;
	z-index: calc(var(--z-index-for-overlay) - 1);
} */
.btn.is-favorite [class^="icon-"], .btn.is-favorite [class*=" icon-"] {
	color: var(--color-black-main);
}

.btn.is-favorite:hover [class^="icon-"], .btn.is-favorite:hover [class*=" icon-"] {
	color: var(--color-black-lighter);
}

.content-editor:has(.editor__add-text.show) .editor-wrapper.editing .episode__body__textarea {
	border-color: transparent;
	z-index: var(--z-index-for-editor);
}

.content-editor:has(.editor__add-text.show) .editor-wrapper.editing .editor__main {
	opacity: 0;
	visibility: hidden;
}

/* -- main editor */
.editor__main {
	bottom: calc(100% - var(--gap-narrow-more));
	display: flex;
	left: 0;
	position: absolute;
	width: 100%;
}

.editor__main__operator {
	margin-right: auto;
}

.editor__main__operator ul {
	display: flex;
}

.editor__main__operator ul .btn .tooltip-show {
	opacity: 0;
}

.editor__main__operator ul .btn:hover .tooltip-show {
	opacity: 1;
}


/* 閉じるボタン */
.editor__main__close {
	display: inline;
	margin-left: auto;
	text-align: right;
}

/* ナレーション
--------------------------------------------*/
.episode-body__text {
	padding: var(--gap-narrow-more);
	text-align: justify;
	text-justify: inter-ideograph;
}

.episode {
	margin-bottom: var(--gap-narrow-more);
	position: relative;
}

.episode__category {
	align-items: center;
	border: 1px solid var(--color-gray-darker);
	bottom: -16px;
	display: flex;
	font-size: var(--font-size-smaller);
	justify-content: center;
	left: calc(-10px - var(--gap-narrow) - var(--gap-narrow-more));
	line-height: 1.3;
	max-width: 110px;
	min-height: 4em;
	padding: calc(var(--gap-narrow-more) / 2);
	position: absolute;
	text-align: center;
	top: 0;
	transform: translateX(-100%);
	width: 110px;
}

.episode__category i {
	display: none;
}

.episode__category::after {
	border: 10px solid transparent;
	border-left: 10px solid var(--color-gray-main);
	content: "";
	left: calc(100% - 2px);
	position: absolute;
	top: calc(50% - 10px);
}

.episode__category::before {
	border: 10px solid transparent;
	border-left: 10px solid var(--color-gray-darker);
	content: "";
	left: 100%;
	position: absolute;
	top: calc(50% - 10px);
}

@media screen and (max-width:960px) {
	.episode__category span {
		display: none;
	}

	.episode__category i.icon-tag-solid {
		display: inline-block;
		overflow: hidden;
		width: 31px;
	}

	.episode__category {
		background-color: var(--color-gray-main);
		justify-content: left;
		left: -55px;
		max-width: 45px;
		min-height: 100%;
		transform: none;
		transition-duration: .3s;
		transition-property: max-width;
		z-index: 2;
	}

	.episode__category:hover {
		max-width: none;
		width: auto;
	}

	.episode__category:hover span {
		align-items: center;
		border-left: 1px solid var(--color-gray-darker);
		display: flex;
		height: 100%;
		padding-left: var(--gap-narrow-more);
		padding-right: var(--gap-narrow-more);
	}

	.episode__category::after {
		display: none;
	}

	.episode__category::before {
		display: none;
	}
}

.episode__body {
	position: relative;
}

.episode__body span {
	text-align: right;
}

.episode__body__tmp {
	background-color: var(--color-white-main);
	border-width: 1px;
	box-sizing: border-box;
	display: block;
	left: 0;
	line-height: 1.6;
	opacity: 0;
	overflow: hidden;
	padding: var(--gap-narrow-more);
	position: absolute;
	text-align: justify;
	top: 0;
	visibility: hidden;
	width: 100%;
}

.episode__body__tmp span {
	color: var(--color-gray-darker);
}

.episode__body__tmp.show {
	opacity: 1;
	visibility: visible;
	z-index: var(--z-index-for-editor);
}

.form .episode__body__textarea {
	background-color: var(--color-white-main);
	border-width: 1px;
	box-sizing: border-box;
	height: 0;
	line-height: 1.6;
	overflow: hidden;
	padding: var(--gap-narrow-more);
	position: relative;
	resize: none;
	text-align: justify;
}

.form .episode__body__textarea:hover {
	border-width: 2px;
	padding: calc(var(--gap-narrow-more) - 1px);
}

/* -- 確認画面 */
.episode-confirm-page {
	min-height: 961.714px;
	padding: calc(var(--gap-main) + var(--gap-narrow-more));
	text-align: justify;
}

.episode-confirm-page p {
	line-height: 1.6em;
	margin-bottom: 16px;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

.memo span {
	background-color: var(--color-gray-main);
	display: block;
	padding: calc(var(--gap-narrow-more)) calc(var(--gap-narrow-more) * 3 / 3);
}

.memo i {
	color: var(--color-gray-darker);
}

/* -- 印刷画面 */
.white-box.print-info {
	/* display: flex; */
	margin: var(--gap-narrow) auto;
	padding: var(--gap-wide) var(--gap-main);
	text-align: center;
	width: 450px;
}

.print-info__icon {
	color: var(--color-gray-darker);
	font-size: 5rem;
	line-height: 1;
	margin-bottom: var(--gap-narrow-more);
	text-align: center;
}

.episode-confirm-page.white-box {
	margin-top: 0;
}

/* ------------------------------------------
/* お礼状 147mm * 205mm
--------------------------------------------*/

.thanks-main {
	line-height: 1.4;
}

.thanks-body {
	aspect-ratio: 205 / 147;
	background-color: var(--color-white-main);
	border: .1vw solid var(--color-gray-darker);
	display: flex;
	flex-direction: column;
	font-family: "Klee One", cursive;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-orientation: upright;
	width: 100%;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

/* .text-combine {
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
} */

.thanks-body .editor__favorite, .thanks-body .editor__add-text, .editor__main {
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}

.thanks-body__left, .thanks-body__right {
	flex: 1;
	max-width: 50%;
}

.thanks-body__right {
	border-left: .1vw dotted var(--color-gray-darker);
}

/* -- アラート */
.alert-box {
	background-color: var(--color-red-error);
	bottom: 0;
	color: var(--color-white-main);
	max-height: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	transition-duration: .3s;
	transition-property: max-height;
	z-index: calc(var(--z-index-for-editor) + 1);
}

.alert-box p {
	margin: 0;
	padding: var(--gap-narrow);
}

.alert-box.show {
	max-height: 100px;
}

/* -- 編集可能エリアのデザイン */
.thanks-textarea-tmp, .thanks-text {
	background-color: var(--color-gray-main);
	border: none;
	box-sizing: border-box;
	display: inline-block;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
	height: 100%;
	line-height: 1.4;

/* max-width: 200px; */
	-moz-osx-font-smoothing: grayscale;

/* overflow-x: scroll; */
	/* overflow: hidden; */
	position: relative;
	text-align: justify;
}

/* フォントを調整 */
.thanks-font {
	font-family: "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
}

/* 喪主名の位置を調整 */
.thanks-text.thanks-textarea-mourner-first--confirm, .thanks-text.thanks-textarea-mourner-second--confirm {
	height: 100%;
	position: relative;
}

.thanks-text--mourner {
	font-size: var(--font-size-base);
	left: 50%;
	position: absolute;
	top: 300px;
	transform: translateX(-50%);
}

/* .not-line-break br:nth-child(1) {
>>>>>>> aefcbf9c1518ba0fd8f3cd630e93467cd3ebce8c
	display: none;
} */

.thanks-textarea-tmp:hover {
	background-color: var(--color-gray-lighter);
	border: none;
}

.thanks-text {
	background-color: transparent;
	border-color: transparent;
}

/* -- editorを表示しない */
.thanks-text--address.editing .editor__main, .thanks-text--mourner-first.editing .editor__main, .thanks-text--mourner-second.editing .editor__main {
	opacity: 0;
	visibility: hidden;
}

body:has(.editor-wrapper.thanks-text--address.editing)::before, body:has(.editor-wrapper.thanks-text--mourner-first.editing)::before, body:has(.editor-wrapper.thanks-text--mourner-second.editing)::before {
	display: none;
}

.thanks-body .editor-wrapper.thanks-text--address.editing .thanks-textarea-tmp, .thanks-body .editor-wrapper.thanks-text--mourner-first.editing .thanks-textarea-tmp, .thanks-body .editor-wrapper.thanks-text--mourner-second.editing .thanks-textarea-tmp {
	border-color: var(--color-gray-main);
}

/* 下揃え */
.thanks-text--address .thanks-textarea-tmp, .thanks-text--mourner-first .thanks-textarea-tmp, .thanks-text--mourner-second .thanks-textarea-tmp, .thanks-text--address, .thanks-text--mourner-first, .thanks-text--mourner-second, .thanks-text--sender-name {
	text-align: right;
}

.thanks-text.thanks-text--deathdate-wareki {
	margin-right: 35px;
	padding-top: 4%;
}

.thanks-text--sender-name {
	font-size: 1.4rem;
	position: absolute;
}

.thanks-textarea-tmp__deathdate {
	height: 42%;
	margin-right: 35px;
	top: 2%;
}

.thanks-text.thanks-proviso {
	font-size: 1.4rem;
	margin-right: 60px;
	padding-top: 7%;
}

/* エディター関連 - 上書き
 ------------------------------------------ */
/* テキストエリアを非表示にする */
.form .thanks-body .episode__body__textarea {
	display: none;
	height: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 50%;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}

.thanks-main .prev-next-btn {
	top: calc(var(--header-height) + var(--gap-main) + var(--step-navigator-max-height) + var(--gap-narrow) + 70px);
	transform: translateX(calc(var(--container-w-thanks) / 2 + var(--gap-narrow-more)));
}

.episode__body-title {
	font-size: 2rem;
	font-weight: bold;
	margin-left: 8px;
}

/* -- 数値関連 */
.thanks-body {
	font-size: var(--font-size-base);
	max-width: var(--container-w-thanks);
}

.thanks-body__left {
	padding: 40px 20px 40px 35px;
}

.thanks-body__right {
	padding: 40px 35px 40px 20px;
}

/* .thanks-body .episode, .thanks-text {
	margin-left: 2px;
} */

.thanks-textarea-tmp, .thanks-text {
	padding: 10px 0;
}

.thanks-text--closing-text {
	margin-right: var(--gap-narrow);
}

.thanks-text--sender-name {
	bottom: 60px;
	left: 35px;
}

@media screen and (max-width:1220px) {
	.thanks-main .prev-next-btn {
		transform: translateX(calc(var(--container-w-thanks) / 2 - 50%));
	}

	.thanks-main .desktop {
		display: none;
	}
}

@media screen and (max-width:1001px) {
	.thanks-main .prev-next-btn {
		gap: .6vw;
		transform: translateX(calc(100vw / 2 - 100%));
	}

	.thanks-main .prev-next-btn .btn {
		height: 40px;
		width: 40px;
	}

	/* -- 数値関連 */
	/* .thanks-textarea-tmp, .thanks-text {
		padding: 1vw .4vw;
	} */

	/* .thanks-body__left, .thanks-body__right {
		padding: 2vw 3vw;
	} */

	/* .thanks-body .episode, .thanks-text {
		margin-left: .2vw;
	} */

	.thanks-body {
		font-size: 1.8vw !important;
	}

	.thanks-text--closing-text {
		margin-left: 2vw;
		margin-right: 2vw;
	}
}

.has-placeholder[contenteditable=true]:empty:before {
	color: var(--color-gray-darker);
	content: attr(placeholder);
	display: block;

/* For Firefox */
	pointer-events: none;
}

.thanks-textarea-tmp:focus {
	outline: 0;
}

.thanks-textarea-tmp span.gray {
	color: var(--color-gray-darker);
}

.thanks-textarea-tmp span.gray::selection {
	background-color: transparent;
}

.thanks-textarea-tmp b.before {
	display: none;
}

.thanks-textarea-address {
	margin-right: 10px;
}

.thanks-textarea-mourner-first {
	font-size: 26px;
	height: 40%;
	margin: 0 15px;
}

.thanks-textarea-mourner-second {
	font-size: 26px;
	height: 40%;
}

/* textarea */
.thanks-body .editor-wrapper.editing .episode__body__textarea, .thanks-body .content-editor:has(.editor__add-text.show) .editor-wrapper.editing .episode__body__textarea {
	border-color: transparent;
	z-index: var(--z-index-for-editor);
}

.thanks-body .editor-wrapper.editing .thanks-textarea-tmp, .thanks-body .content-editor:has(.editor__add-text.show) .editor-wrapper.editing .thanks-textarea-tmp {
	border-color: transparent;
	z-index: var(--z-index-for-editor);
}

/* -- editor */
.thanks-body .editor-wrapper.editing .editor__main {
	flex-direction: column;
	left: 10px;
	top: 0;
}

.thanks-body .editor__main__operator ul {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	text-align: center;
}

.thanks-body .editor__main__operator ul .btn {
	height: 46px;
}

.thanks-body .editor__main__operator ul .btn .icon-star-solid {
	left: -1px;
	position: relative;
}

.thanks-body .editor__main__operator ul .btn .icon-arrow-rotate-left-solid {
	left: 2px;
	position: relative;
}

.thanks-body .editor__main__close {
	margin-top: var(--gap-narrow-more);
	text-align: center;
}

.thanks-body .editor__main__close .btn {
	height: 46px;
	width: 46px;
}

.thanks-body .editor__main__operator {
	align-items: center;
	display: flex;
	justify-items: center;
	top: 0;
}

.thanks-body .editor__main__operator .btn.border-right.color-gray-main {
	border-bottom: 1px solid var(--color-gray-darker);
	border-right: 0;
}

/* 文書挿入ボックス */
.thanks-body .editor__add-text {
	left: 20px;
	transform: translateX(0);
	width: 350px;
}

.thanks-body .editor__add-text__body__btn-set {
	left: calc(-50px);
}

.thanks-body .editor__add-text__header {
	flex-wrap: wrap;
	height: 97px;
	position: relative;
}

.thanks-body .editor__add-text__header h3 {
	width: 100%;
}

.thanks-body .editor__add-text__close {
	position: absolute;
	right: 0;
	top: 0;
}

.thanks-body .editor__add-text__header__select {
	max-width: 50%;
	overflow: hidden;
}

/* モーダル
 ------------------------------------------ */
.modal {
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 10;
}

.modal.is-show {
	opacity: 1;
	transition: .6s;
	visibility: visible;
}

.modal-inner {
	background-color: #fff;
	left: 50%;
	max-width: 600px;
	padding: 50px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	z-index: 2;
}

.modal-close-btn {
	cursor: pointer;
	position: absolute;
	right: -10px;
	top: -55px;
}

.modal-close-btn i {
	color: var(--color-white-main);
	font-size: 60px;
	z-index: 2;
}

.modal-title {
	font-size: 2.399rem;
	margin-bottom: 1.6rem;
	text-align: left;
}

.modal-background {
	background-color: rgba(0, 0, 0, .8);
	bottom: 0;
	cursor: pointer;
	height: calc(100% - var(--header-height));
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}

/* 削除モーダル
 ------------------------------------------ */

.btn-item {
	align-items: center;
	display: flex;
}

.yes-btn {
	background-color: var(--color-pink-main);
	color: var(--color-white-main);
	font-size: 18px;
	height: 40px;
	width: 100px;
}

.yes-btn:hover {
	opacity: 50%;
}

.no-btn {
	background-color: var(--color-black-main);
	color: var(--color-white-main);
	font-size: 18px;
	height: 40px;
	margin-right: 16px;
	width: 100px;
}

.no-btn:hover {
	opacity: 50%;
}

/* 詳細モーダル
 ------------------------------------------ */
.detail-modal {
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	visibility: hidden;
	width: 100%;
	z-index: 10;
}

.detail-modal.is-show {
	opacity: 1;
	visibility: visible;
}

.detail-modal.is-push {
	pointer-events: none;
}

.detail-modal-inner {
	background-color: #fff;
	left: 50%;
	max-width: 700px;
	padding: 40px 80px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	z-index: 2;
}

.detail-modal-title {
	font-weight: bold;
	line-height: 1;
	margin-bottom: 20px;
	padding-bottom: 10px;
	text-align: center;
}

.detail-modal-title::after {
	background-color: var(--color-pink-lighter-text);
	content: "";
	display: block;
	height: 6px;
	margin: 16px auto auto auto;
	width: 180px;
}

.detail-modal-table {
	border: 1px solid var(--color-gray-darker);
	font-size: 1.8rem;
	margin-bottom: 16px;
	width: 100%;
}
.table.detail-modal-table th {
	background-color: var(--color-gray-little-darker);
	border-right: 1px solid var(--color-gray-darker);
	font-weight: normal;
	text-align: left;
	width: 180px;
}
.table.detail-modal-table td {
	text-align: left;
	width: calc(100% - 180px);
}

.table.detail-modal-table.detail-modal-table--no-scroll td {
	height: 32px;
	margin-top: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 10px;
	white-space: pre-wrap;
}

.table.detail-modal-table.detail-modal-table--col-4 th {
	width: 18%;
}

.detail-modal-narration {
	background-color: var(--color-gray-little-darker);
	border-radius: 6px;
	font-size: 1.8rem;
	height: 200px;
	margin-bottom: 16px;
	margin-top: 5px;
	padding: 1rem 1.6rem;
	text-align: left;
	width: 100%;
}
.modal-btn-c {
	text-align: center;
}
.modal-btn-c input {
	margin: 5px;
}
.detail-close-btn {
	color: white;
	position: absolute;
	right: 0;
	top: 0;
}

.detail-change-btn {
	align-items: center;
	background-color: var(--color-black-main);
	display: flex;
	height: 40px;
	justify-content: center;
	width: 220px;
}

.modal-btn:hover {
	background-color: white;
	border: solid 2px;
	color: #6876c9;
}

.modal-scrollbar {
	overflow-y: overlay;
}

.modal-scrollbar::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.modal-scrollbar::-webkit-scrollbar-track {
	background: var(--color-white-main);
	border-radius: 5px;
	height: 10px;
	margin-bottom: 8px;
	margin-top: 8px;
}

.modal-scrollbar::-webkit-scrollbar-thumb {
	background: var(--color-gray-darker);
	border-radius: 5px;
	height: 10px;
}

/* アラートメッセージ
 ------------------------------------------ */
.alert-messages {
	align-items: center;
	color: var(--color-white-main);
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
	opacity: 1;
	padding: 8px;
	transition: opacity .6s;
}

.alert-messages--success {
	background-color: var(--color-green-success);
}

.alert-messages--error {
	background-color: var(--color-red-error);
}

.alert-close-btn {
	color: var(--color-white-main);
	cursor: pointer;
	transition: .3s;
}
/* お礼状
--------------------------------------------*/

/*--------------------------------------------
ログイン
--------------------------------------------*/
.login-title {
	margin-top: 20px;
	text-align: center;
}

.login-form {
	margin: auto auto;
	width: 560px;
}

.login-btn {
	height: 100%;
	margin: 70px 0 0;
}

.login-user-check {
	left: var(--gap-main);
	position: absolute;
}

.pos-re {
	position: relative;
}

.password-eye-icon {
	position: absolute;
	right: 20px;
	top: 9px;
}

/*--------------------------------------------
ユーザー設定
--------------------------------------------*/
.black-main-label {
	background-color: var(--color-black-main);
	color: var(--color-white-main);
	margin: 0 0 var(--gap-narrow-more) 0;
	padding: 8px 0 8px var(--gap-narrow-more);
}

/* 「利用規約」エリア
--------------------------------------------*/
.headline-terms-title {
	background-color: var(--color-blue-main);
	color: var(--color-white-main);
	padding: 60px 0;
	text-align: center;
}

.terms-wrapper {
	background-color: var(--color-white-main);
	padding: 40px;
}

.terms-summary {
	margin-bottom: 32px;
}

.terms-title {
	color: var(--color-black-main);
	margin-bottom: 32px;
	text-align: left;
}

.terms-subtitle {
	margin-bottom: 32px;
}

.terms-table th {
	padding-right: 8px;
	vertical-align: top;
}

.terms-table th, .terms-table td {
	padding-bottom: 8px;
}

.terms-table tr:last-child th, .terms-table tr:last-child td {
	padding-bottom: 32px;
}

.terms-table tr .terms-table__inner th, .terms-table tr .terms-table__inner td {
	padding-bottom: 8px;
}

.terms-table tr .terms-table__inner tr:first-child th, .terms-table tr .terms-table__inner tr:first-child td {
	padding-top: 8px;
}