@charset "UTF-8";

:root {
    --form-gap: 8px;
    --form-font-size: 1rem;
    --form-panel-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
    --form-panel-border-radius: 0.25rem;
    --form-section-gap: 2rem;
    --form-color: #42210b;
	--form-highlight-color: #cb2d61;/*20230926*/
    --form-background: #ffebed;
    --form-grouped-background: #fff1f3;
	--form-font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", var(--bs-font-sans-serif);

    --form-label-badge-font-size: 12px;
    --form-label-badge-font-weight: bold;
    --form-label-badge-padding: 2px;
    --form-label-badge-margin: 0 4px 0 2px;
    --form-label-badge-line-height: 1;
    --form-label-badge-border-radius: 0.25rem;
    --form-label-required-badge-background: #cb2d61;
    --form-label-required-badge-color: #fff;
    --form-label-required-badge-content: '必須';
    --form-label-optional-badge-background: #888;
    --form-label-optional-badge-color: #fff;
    --form-label-optional-badge-content: '任意';

    --form-suppliment-font-size: 0.75rem;
    --form-suppliment-opacity: 0.6;
}

/*init*/

body {
	font-family: var(--form-font-family) !important;
}
label,
input,
select,
textarea {
	font-family: var(--bs-font-sans-serif) !important;
}

select,
label[for],
input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
}
label[for] {
	user-select: none;
}

.wpcf7 {
    width: min(100%, 640px);
    margin: 0 auto;
}

*::placeholder {
	color: #aaa !important;
}

/*utils*/

.nowrap {
	white-space: nowrap;
}

.condense {
	display: inline-block;
	font-size: 50%;
	transform: scaleY(2);
	transform-origin: center 75%;
}

/*wpcf7*/

.wpcf7-not-valid-tip {
	font-size: 0.6rem !important;
}

.wpcf7-response-output {
    background: var(--form-background);
    margin: 0 0 var(--form-section-gap) !important;
	padding: var(--form-gap) !important;
    border-radius: var(--form-panel-border-radius);
    box-shadow: var(--form-panel-box-shadow);
	padding: var(--form-gap);
	border: none !important;
}
.wpcf7 form.invalid .wpcf7-response-output {
	color: var(--bs-danger);
}

.wpcf7-spinner {
	display: none;
}

/*freetext*/

.wpcf7-list-item.has-free-text {
	display: flex;
}
.wpcf7-list-item.has-free-text > input[type="radio"],
.wpcf7-list-item.has-free-text > input[type="checkbox"]{
	flex-shrink: 0;
	margin-right: 8px;
}
.wpcf7-list-item.has-free-text > label {
	flex-shrink: 0;
	margin-right: 8px;
}
.wpcf7-list-item.has-free-text > input.wpcf7-free-text {
	width: 100%;
	flex-shrink: 1;
	margin-top: -3px;
	margin-bottom: -2px;
}

/*form title*/

.form-header__title {
	font-size: 2rem;
	font-weight: bold;
	color: var(--form-color);
	text-align: center;
	margin: 0;
	padding: 2rem 1rem;
}
.form-header__title strong { /*20230926*/
	color: var(--form-highlight-color);
}
.form-header__title strong::before {
	content: '【';
}
.form-header__title strong::after {
	content: '】';
}

/*article*/

.form-article {
    background: var(--form-background);
    color: var(--form-color);
    margin: 0 0 var(--form-section-gap) !important;
	padding: var(--form-gap) !important;
    border-radius: var(--form-panel-border-radius);
    box-shadow: var(--form-panel-box-shadow);
}
.form-article p,
.form-article ul,
.form-article li,
.form-article dl,
.form-article dd {
	margin-bottom: 0;
}
.form-article ul {
	padding-left: 1.5rem;
}
.form-article ul.notes {
	color: var(--form-highlight-color);
}

.form-article__title {
	font-size: var(--form-font-size);
	font-weight: bold;
}

.form-article__inner {
    background: var(--form-grouped-background);
    border-radius: var(--form-panel-border-radius);
    padding: var(--form-gap);
    box-shadow: var(--form-panel-box-shadow);
	letter-spacing: -1px;

	font-size: max(12px, min(2.5vw, 16px));
}
* + .form-article__inner {
    margin-top: var(--form-gap);
}

.form-article .required-badge {
    font-weight: var(--form-label-badge-font-weight);
    padding: var(--form-label-badge-padding);
    line-height: var(--form-label-badge-line-height);
    border-radius: var(--form-label-badge-border-radius);
    background: var(--form-label-required-badge-background);
    color: var(--form-label-required-badge-color);
	margin-top: 2px;
	margin-left: 2px;
	margin-right: 4px;
}

/*steps*/

.form-steps {
	padding-left: 0;
	margin-bottom: 0;
	display: flex;
	list-style-position: inside;
	justify-content: space-between;
}
.form-steps > li {
	opacity: 0.3;
	font-weight: normal;
	margin-left: 2px;
	margin-right: 2px;
}
.form-steps > li[aria-current] {
	opacity: 1;
	font-weight: bold;
}
.form-steps > li::marker {
	content: none;
}
.form-steps > li > .form-steps__label::before {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	content: counter(list-item);
	background: #888;
	border-radius: 0.25rem;
	margin-right: 4px;
}
.form-steps > li[aria-current] > .form-steps__label::before {
	background: #cb2d61;
	color: #fff;
}

/*buttons placeholder*/

.form-nav {
    margin-bottom: var(--form-section-gap);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--form-section-gap);
}

.form-nav__prev {
	grid-column: 1 / span 2;
}
.form-nav__next {
	grid-column: 3 / span 2;
}
.form-nav__done {
	grid-column: 2 / span 2;
}

/*precautions*/

.form-precautions > dd {
	display: list-item;
	margin-left: 1rem;
}

/*section*/

.form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--form-section-gap);
    border-radius: var(--form-panel-border-radius);
    box-shadow: var(--form-panel-box-shadow);
    background: var(--form-background);
}

.form-section__header {
    padding: 0 16px 16px;
}
.form-section__title {
	padding-top: 16px;
    margin-bottom: 0;
	font-size: 1.5rem;
    font-weight: bold;
    color: var(--form-color);
    position: sticky;
    top:0;
}
.form-section__content {
    padding: 0 var(--form-gap) var(--form-gap);
}

/*group*/

.form-group {
    background: var(--form-grouped-background);
    border-radius: var(--form-panel-border-radius);
    padding: var(--form-gap);
    box-shadow: var(--form-panel-box-shadow);
    margin-top: var(--form-gap);
}

/*row*/

.form-row {
	margin-top: var(--form-gap);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--form-gap);
}
.form-row > div[data-class="wpcf7cf_group"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--form-gap);
}
.form-row > * {
    grid-column: span 12;
}
.form-row__col01 {
    grid-column: span 1;
}
.form-row__col02 {
    grid-column: span 2;
}
.form-row__col03 {
    grid-column: span 3;
}
.form-row__col04 {
    grid-column: span 4;
}
.form-row__col05 {
    grid-column: span 5;
}
.form-row__col06 {
    grid-column: span 6;
}
.form-row__col07 {
    grid-column: span 7;
}
.form-row__col08 {
    grid-column: span 8;
}
.form-row__col09 {
    grid-column: span 9;
}
.form-row__col10 {
    grid-column: span 10;
}
.form-row__col11 {
    grid-column: span 11;
}
.form-row__col12 {
    grid-column: span 12;
}

/*label*/

.form-label {
    font-size: var(--form-font-size);
    color: var(--form-color);
	letter-spacing: -1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
	white-space: nowrap;
}

label.form-label,
h4.form-label {
    margin-bottom: 0;
}

h3.form-label {
	font-weight: bold;
}

h4.form-label {
	font-size: calc(var(--form-font-size) * 0.6);
}

.form-label--required::before,
.form-label--optional::before {
    font-size: var(--form-label-badge-font-size);
    font-weight: var(--form-label-badge-font-weight);
    padding: var(--form-label-badge-padding);
    margin: var(--form-label-badge-margin);
    line-height: var(--form-label-badge-line-height);
    border-radius: var(--form-label-badge-border-radius);
	flex-shrink: 0;
}
.form-label--required::before {
    background: var(--form-label-required-badge-background);
    color: var(--form-label-required-badge-color);
    content: var(--form-label-required-badge-content);
}
.form-label--optional::before {
    background: var(--form-label-optional-badge-background);
    color: var(--form-label-optional-badge-color);
    content: var(--form-label-optional-badge-content);
}

/*item*/

.form-item {
	display: block;
}

.form-item--date-select {
    display: grid !important;
    grid-template-columns: repeat(24, 1fr);
    gap: var(--form-gap);
}
.form-item--date-select > .wpcf7-form-control-wrap > select {
    text-align: right;
}
.form-item--date-select > .wpcf7-form-control-wrap:nth-child(1) {
    grid-column: span 10;
}
.form-item--date-select > .wpcf7-form-control-wrap:nth-child(2) {
    grid-column: span 7;
}
.form-item--date-select > .wpcf7-form-control-wrap:nth-child(3) {
    grid-column: span 7;
}

/*checkbox/radio*/

.form-item > ul {
	color: var(--form-color);
	padding-left: 1.5rem;
	margin-bottom: 0;
}

.form-check {
	padding-left: 1rem !important;
}
.form-check:not(.form-check-inline) + .form-check:not(.form-check-inline) {
	margin-top: var(--form-gap);
}
.form-check-label {
	display: block;
	margin-left: -0.5em;
	padding-left: 0.5em;
	color: var(--form-color);
}

/*control*/

.form-control--align-right {
	text-align: right;
}
.form-control--align-center {
	text-align: center;
}
.form-control[disabled] {
	background: var(--form-grouped-background);
	cursor: default;
}
.form-control[readonly]:not([disabled]) {
	background: rgba(255, 255, 255, 0.5);
}

/*suppliment*/

.form-suppliment {
    margin: var(--form-gap) 0 0 0;
	font-family: var(--bs-font-sans-serif) !important;
	font-size: var(--form-suppliment-font-size);
    color: var(--form-color);
    opacity: var(--form-suppliment-opacity);
}

legend + .form-suppliment {
	transform: translateY(calc(var(--form-gap) * -1));
	margin-bottom: calc(var(--form-gap) * -1);
	margin-left: 1px;
	margin-right: 1px;
}

/*unit label*/

label.input-group-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent;
    justify-content: center;
}

/*confirm value*/

.form-confirm-value {
	font-family: var(--form-font-family) !important; 
	font-size: var(--form-font-size);
	color: var(--form-color);
	white-space: pre-line;
	margin-bottom: 0;
}
.form-confirm-value--empty {
	opacity: 0.3;
}
.form-confirm-value--hidden,
.form-confirm-value--checklist {
	display: none;
}

/*responsive*/

@media screen and (max-width: 639px) {
	.form-section,
	.form-article,
	.wpcf7-response-output,
	.form-nav {
		width: 320px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.form-section {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.form-section__header {
		padding: 0;
	}

	.form-section__title {
		padding: var(--form-gap) var(--form-gap) 0;
		font-size: var(--form-font-size);
	}

}

/*flatpickr*/

.flatpickr-current-month {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	text-align: right;
}
.flatpickr-current-month .numInputWrapper {
	width: 8ch;
	text-align: left;
}
.numInputWrapper input {
	width: 4ch !important;
	padding-left: 0 !important;
}
.numInputWrapper::after {
	content: '年';
}
.flatpickr-days {
	padding-bottom: 2px;
}
.flatpickr-day {
	border-radius: 0.2rem;
	color: var(--form-color);
}

.flatpickr-months .flatpickr-month {
	color: var(--form-color);
	fill: var(--form-color);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	fill: var(--form-color);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--bs-primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
}