/* ==================================================================
	変数
*/
:root {
	--max-width: 950px;
}

/*===============================================================================================
    layout
    -- レイアウト専用（ページ構造）
*/

/* -------------------
    ラッパー       
 */
.l-wrap, .l-inner, .l-contents {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
	margin: 0 auto;
    z-index: 0;
}
.l-wrap {
	gap: 2em;
    padding: 1rem;
    width: 100%;
    height: 100%;
}
.l-inner {
	gap: 1.5em;
	width: 100%;
	max-width: var(--max-width);
}
.l-contents {
	gap: 1.5em;
    width: 100%;
}
.l-head {
    display: grid;
    gap: 1em;
    text-align: center;
}

/* -------------------
    グリッドレイアウト
*/
.l-rows {
    display: flex;
    /* justify-content: center; */
    flex-wrap: wrap;
    gap: 1em;
}
:is(#headerArea ,#footerArea) .l-rows {
    justify-content: space-between;
    align-items: center;
}
.l-grid {
	display: grid;
    justify-content: center;
	gap: 1em;
    grid-template-columns: 100%;
}
@media screen and (min-width:768px) and (max-width:1079px) {
    .l-grid.g-rows_3,
    .l-grid.g-rows_4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width:1080px) {
    .l-grid.g-rows {
        grid-auto-flow: column;
        grid-auto-columns: minmax(auto, 100%);
    }
    .l-grid.g-rows_2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .l-grid.g-rows_3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .l-grid.g-rows_4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .l-grid.g-rows_flap {
        grid-template-columns: auto;
        grid-auto-flow: column;
        grid-auto-columns: minmax(auto, 100%);
    }
}

/* -------------------
    TABLE
*/
/* インナー */
.l-table__inner {
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    gap: .5em;
    width: 100%;
}
th .l-table__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
}
.l-table__inner:has(:is(input[type="radio"],input[type="checkbox"])) {
    gap: .5em 1em;
}


/* -------------------
    FORM
*/
/* 入力欄サイズ（文字制限準拠） */
.l-table__contents {
    width: 100%;
    /* width: fit-content; */
}
@media screen and (min-width: 768px){
    .l-table__contents:not(:has(textarea)) {
        max-width: 20em;
    }
    .l-table__contents:has(:is(input[type="radio"],input[type="checkbox"])) {
        width: fit-content;
    }
}
.l-table__contents:has([maxlength="1"]){ max-width: 2em }
.l-table__contents:has([maxlength="2"]){ max-width: 3em }
.l-table__contents:has([maxlength="3"]){ max-width: 4em }
.l-table__contents:has([maxlength="4"]){ max-width: 5em }
.l-table__contents:has([maxlength="5"]){ max-width: 6em }
.l-table__contents:has([maxlength="6"]){ max-width: 7em }
.l-table__contents:has([maxlength="7"]){ max-width: 8em }
.l-table__contents:has([maxlength="8"]){ max-width: 9em }
.l-table__contents:has([maxlength="9"]){ max-width: 10em }
.l-table__contents:has([maxlength="10"]){ max-width: 11em }
.l-table__contents:has([maxlength="11"]){ max-width: 12em }
.l-table__contents:has([maxlength="12"]){ max-width: 13em }
.l-table__contents:has([maxlength="13"]){ max-width: 14em }


/* -------------------
    Main Visual
*/
.l-mv__item {
    width: 100vw;
    height: auto;
    margin: 0 auto;
}
@media screen and (min-width: 768px){
    .l-mv__item {
        width: fit-content;
    }
}

/* -------------------
    コピーライト
*/
.l-copyright {
    padding: 1em;
    font-size: x-small;
    text-align: center;
}

/*===============================================================================================
    component
    -- 再利用可能な UI コンポーネント
*/

/* -------------------
    装飾
*/
/* 棒線 */
.c-decoration__border {
    border: solid 4px currentColor;
}

/* アンダーラインテキスト */
a:link.c-text__underline {
    text-decoration: revert;
}
.c-text__underline {
	vertical-align: baseline;
	text-decoration-color: currentColor;
}
a.c-text__underline:hover {
	text-decoration-color: transparent
}

/* 横ラインテキスト */
.c-text__line_left {
    padding-left: 0.5em;
	border-left: solid 0.3em
}

/* 赤注釈 */
.c-text__attention {
    color: red;
    font-size: small;
}

/* 矢印アイコン */
.c-arrow_linetri {
    position: relative;
}
.c-arrow_linetri:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-block;
    margin: auto;
    width: 1em;
    height: 1px;
    background: currentColor;
}
.c-arrow_linetri:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-block;
    margin: auto;
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
}
.o-btn.c-arrow_linetri:after ,
.o-btn.c-arrow_linetri:before {
    right: 1em;
}

/* レイヤーカラー_黒グラデーション */
.c-layer_gradation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, transparent, #000000);
}

/* -------------------
    注釈（テーブル）
*/
.c-input__mark {
	display: inline-block;
	color: gray;
}
.c-input__notes {
	display: block;
	width: 100%;
}


/*===============================================================================================
    object
    --再利用可能なオブジェクト
*/

/* -------------------
    ボタン
*/
.o-btn {
    display: inline-block;
    padding: .5em 1em;
    width: fit-content;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}
.o-btn:hover {
    text-decoration-color: transparent;
    opacity: .8;
}
.o-btn {
    background-color: black;
    color: white;
}
.o-btn:disabled, a[tabindex="-1"] {
    opacity: .5;
}
.o-btn[data-search] {
    padding: .25em .5em;
    min-width: fit-content;
    line-height: 1;
}
@media screen and (min-width: 768px) {
    .o-btn[data-search] {
        padding: .75em;
    }
}
.o-btn.btn-radius {
    border-radius: 24px;
}

/* ------------------- 
    アコーディオン
*/
.o-accordion__contents {
    display: block;
    width: 100%;
    border: solid;
    overflow: hidden;
}
.o-accordion__outside {
    position: relative;
    cursor: pointer;
}
.o-accordion__outside {
    background: black;
    color: white;
}
@media screen and (min-width: 768px){ 
    .o-accordion__outside {
        display: flex;
        align-items: center;
        gap: 1em;
    }
}
.o-accordion__outside::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    margin-left: auto;
    border-top: solid 3px;
    border-right: solid 3px;
    aspect-ratio: 1;
    object-fit: cover;
    transform: rotate(135deg);
    transition: all 0.3s ease;
}
.o-accordion__outside.isActive::after {
    transform: rotate(-45deg)
}
.o-accordion__outside,
.o-accordion__inside {
    padding: 1em;
}
.o-accordion__inside > dl {
    display: grid;
    gap: 1em;
}
.o-accordion__icon {
    display: inline-block;
    line-height: 1;
}

/* -------------------
    カード型コンテンツ
*/
.o-cards {
    position: relative;
    display: grid;
    gap: .5em;
    padding: 1em;
    width: 100%;
}
.o-cards {
    background: white;
}
.o-cards .card-ttl {
    max-width: fit-content;
    margin: 0 auto;
    text-align: center;
}
.o-cards .card-img {
    display: block;
    margin-bottom: 50%;
}
.o-cards .card-img img {
    position: absolute;
    top: 0;
    left: 0;
}

/* -------------------
    背景色設定
*/
.o-bg-full {
    position: relative;
}
.o-bg-full::before {
    content: "";
    display: block;
    z-index: -9999;
    position: absolute;
    top: 0;
    left: -100%;
    margin: auto;
    width: 9999px;
    height: 100%;

    background: inherit;
}
.o-bg-full::before {
    background: lightgray;
}

/* -------------------
    アイコン
*/
/* 必須アイコン */
.o-icon__required, [data-status] {
	display: inline-block;
    /* padding: .25em .5em;
    margin: 0 .5em; */
	line-height: 1em;
	vertical-align: middle;
    font-size: x-small;
    word-break: keep-all;
}
.o-icon__required, [data-status] {
	color: red;
}
[data-status="complete"] {
    color: gray;
}
/* 別窓リンクアイコン */
.o-icon__blank {
    position: relative;
    display: inline-block;
    margin-left: .25em;
    margin-right: .5em;
    width: 10px;
    height: 10px;
}
.o-icon__blank::after, 
.o-icon__blank::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    border: solid 1px currentColor;
	border-top-width: medium;
}
.o-icon__blank::before {
    bottom: 50%;
    right: 50%;
}
.o-icon__blank::after {
	top: 50%;
    left: 50%;
}

/* -------------------
    注釈
*/
.o-note__wrap {
    display: grid;
    gap: .25em;
    padding: 1em;
    margin: 0 auto;
    width: 95%;
    font-size: small;
}
.o-note__wrap {
    background: whitesmoke;
}
@media screen and (min-width: 768px) {
    .o-note__wrap {
        width: 100%;
    }
}

/* 注釈風テーブル */
.o-note__wrap:has(.l-table) {
	padding: 1.5em;
}
.o-note__wrap :is(.l-table, .l-table th) {
	background: transparent;
}
.o-note__wrap .l-table :is(tr, th, td) {
    border: none;
}
.o-note__wrap .l-table :is(th, td) {
    display: block;
    width: 100%;
} 
.o-note__wrap .l-table th {
	position: relative;
    padding: 0 0 1em 0;
}
.o-note__wrap .l-table th [data-status] {
	position: absolute;
	visibility: hidden;
}
.o-note__wrap .l-table td {
	padding: 0;
}
.o-note__wrap .l-table td > dl dd:has(input) {
	text-align: center;
}

dl.o-note__wrap dt {
    font-weight: bold;
}

.o-note__list {
    text-indent: 1em;
    margin: .5em;
}
.o-note__list > li::before {
    content: "";
    display: inline-block;
    margin-right: .5em;
    width: .5em;
    height: .5em;
    border: solid 1px;
    border-radius: 100%;
    vertical-align: middle;
}
/* 数字 */
.o-list__number {
    display: grid;
    gap: .25em;
    counter-reset: number 0;
    padding: 1em;
    text-align: left;
}
.o-list__number > li:before {
    counter-increment: number 1;
    content: counter(number) ". ";
}

/* -------------------
    フロー図
*/
.o-list__flow {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.o-list__flow li {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 2.5em;
    margin: 0 auto;
    color: white;
}
.o-list__flow li:not(.o-list__flow li.is-active) {
    padding-left: 1em;
}
@media (min-width:768px) {
    .o-list__flow {
        margin: auto;
    }
	.o-list__flow li {
        min-width: 10em;
	}
}
.o-list__flow li::after,
.o-list__flow li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(100% - 2px);
    margin: auto;
    height: 100%;
    aspect-ratio: 1 / 3;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    z-index: 1;
}
.o-list__flow li::before {
    height: 120%;
    background: currentColor;
}
.o-list__flow li,
.o-list__flow li::after {
    background: gray;
}
.o-list__flow li.is-active,
.o-list__flow li.is-active::after {
    background: black;
}
.o-list__flow li:last-of-type:after,
.o-list__flow li:last-of-type::before {
    display: none;
}