/* ==================================================================
	変数
*/

:root {
	--max-width: 960px;
}

@media screen and (min-width: 768px) {
    .only-sp {display: none}
}
@media screen and (max-width: 767px) {
    .only-pc {display: none}
}

/* ==================================================================
    javascript連動
*/

/* バリデーションエラー */
.is-error__text {
    margin-top: 1em;
	font-weight: bold;
    font-size: .875rem;
}
.is-error__text::before {
	content: "!";
	display: inline-block;
	height: 1.5em;
    width: 1.5em;
	margin-right: .25em;
	border-radius: 50%;
	text-align: center;
}
.is-error__text {
    color: red;
}
.is-error__text::before {
	color: white;
	background: red;
}

/* fadeアニメ */
[data-motion] {
    opacity: 0;
    transition: opacity .8s ease-out, transform .8s ease-out;
}
[data-motion="fade-up"] {
	transform: translateY(20%);
}
[data-motion="fade-left"] {
	transform: translateX(-20%);
}
[data-motion="fade-right"] {
	transform: translateX(20%);
}

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

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

/* -------------------
    グリッドレイアウト
*/
.l-rows {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
:is(#headerArea ,#footerArea) .l-rows {
    justify-content: space-between;
    align-items: center;
}
.l-grid {
	display: grid;
    justify-content: center;
    align-items: start;
	gap: 1rem;
    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_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%);
    }
}


/* -------------------
    Main Visual
*/
.l-mv__wrap {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.l-mv__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    height: 100%;
    width: 100%;
}
.l-mv__detail {
    display: grid;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}
.l-mv__img {
    width: 100%;
    height: fit-content;
    line-height: 0;
}
.l-mv__img img {
    object-fit: cover;
    line-height: 0;
}
@media screen and (min-width: 768px) {
    .l-mv__inner {
        align-content: center;
        justify-content: space-between;
    }
    .l-mv__img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        max-width: 50%;
        z-index: -1;
    }
}


/* -------------------
    TABLE
*/

.l-table {
	background: white;
}
.l-table :is(th, td) {
	display: block;
    padding: 1em;
    width: 100%;
}
.l-table :is(tr, th) {
    margin: -1px;
    width: calc(100% + 2px);
    border: solid 1px;
}
.l-table caption {
    padding: .5em;
    font-size: 1rem;
    text-align: left;
}
@media all and (min-width:768px) {
	.l-table :is(th, td) {
		display: table-cell;
        width: auto;
		vertical-align: middle;
	}
	.l-table th {
		width: 30%;
	}
	.l-table td {
		width: 70%;
	}	
}

/* インナー */
.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: 19.7em;
    }
    .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 }


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

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

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

/* アンダーラインテキスト */
.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;
    place-content: space-evenly;
	border-left: solid 0.25em
}

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


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


/* -------------------
    1文字ずつ浮き上がるアニメーション（jqueryと併用）
*/
.c-font__floatLetter  {
    overflow: hidden;
    line-height: 1;
    /* 動きの加速・減速 */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
/* 文字単体の設定 */
.c-font__floatLetter .float-chara {
    display: inline-block;
    /* 初期位置：下にずらして隠す */
    transform: translateY(1.3em);
}
/* アニメーション発火時の設定 */
.c-font__floatLetter.is-active .float-chara {
    /* 位置を戻すアニメーション設定 */
    transition: transform 0.7s var(--ease-out-quart);
    /* インデックス番号に基づいて遅延させる(jqueryで連番) */
    transition-delay: calc(0.12s * var(--index));
    /* 元の位置に戻す */
    transform: translateY(0);
}


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

/* -------------------
    ボタン
*/
.o-btn {
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    width: fit-content;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;

/* アニメーション */
    transition: all 300ms ease;
}
.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-liftup,
.o-btn.btn-push,
.o-btn.btn-push,
.o-btn.btn-arrow {
    opacity: 1;  
}

/* リフトアップボタン */
.o-btn.btn-liftup {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 初期の薄い影 */
}
.o-btn.btn-liftup:hover {
    transform: translateY(-.25rem);
    box-shadow: 0 .25rem .5rem rgba(0,0,0,0.3);
}

/* スライドボタン  */
.o-btn.btn-slide {
    overflow: hidden;
}
.o-btn.btn-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    background: white;
    transform: scaleX(0); 
    transition: transform 300ms cubic-bezier(0.5, 0, 0.5, 1);
    transform-origin: right;
    z-index: -1;
}
.o-btn.btn-slide:hover {
    color: black;
}
.o-btn.btn-slide:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* プッシュ型ボタン */
.o-btn.btn-push {
    border-radius: .25em;
    box-shadow: 0 .25rem 0 rgba(0,0,0,0.5); 
    transform: translateY(0);
}
.o-btn.btn-push:hover {
    text-decoration-color: transparent;
    box-shadow: none;
    transform: translateY(.25rem);
}

/* 矢印ボタン */
.o-btn.btn-arrow {
    background: white;
    color: black;
    border: solid 1px;
	--arrow-color: currentColor;
	--arrow-move-x: 20px;
}
.o-btn.btn-arrow::before,
.o-btn.btn-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	background-color: var(--arrow-color);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), right 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.o-btn.btn-arrow::before {
	right: -40%; 
	width: 50%;
	height: 1px;
	margin-top: -0.5px;
}
.o-btn.btn-arrow:hover::before {
	right: -50%; 
}
.o-btn.btn-arrow::after {
	right: -40%;
	width: .5rem;
	height: .5rem;
	background-color: transparent;
	border-top: 1px solid var(--arrow-color);
	border-right: 1px solid var(--arrow-color);
	transform: translateY(-50%) rotate(45deg);
	margin-right: 1px;
}
.o-btn.btn-arrow:hover::after {
	right: -50%;
}


/* -------------------
    ハンバーガーメニュー
*/
#headerArea {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    z-index: 999;
}
.o-btn__hamburger {
    position: relative;
    display: block;
    width: 2em;
    height: 1.5em;
}
.o-btn__hamburger span,
.o-btn__hamburger::before,
.o-btn__hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin: auto;
    background: currentColor;
    transition-duration: 300ms;
}
.o-btn__hamburger span {
    top: 0;
    bottom: 0;
}
.is-active .o-btn__hamburger span {
    opacity: 0;
    width: 100%;
}
.o-btn__hamburger::before {
    top: 0;
}
.is-active .o-btn__hamburger::before {
    transform: rotate(45deg);
}
.o-btn__hamburger::after {
    bottom: 0;
}
.is-active .o-btn__hamburger::after {
    top: 0;
    bottom: auto;
    transform: rotate(-45deg);
}
/* グロナビ */
.o-menu__global ul {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    background: white;
}
@media screen and (min-width:768px) {
    .o-btn__hamburger {
        display: none;
    }
}
@media screen and (max-width: 747px) {
	.o-menu__global {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
        height: 0;
		overflow: hidden;
		transition: all 300ms ease;
	}
	.is-active .o-menu__global {
		height: 100vh;
	}
    .o-menu__global ul {
        flex-direction: column;
        height: 100%;
    }
}

/* -------------------
    カード型コンテンツ
*/
.o-cards {
    position: relative;
    display: grid;
    align-content: start;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.o-cards {
    background: white;
}
.card-img img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 1;
}
.card-detail {
    padding: 1rem;
    display: grid;
    gap: 1rem;
}
@media screen and (min-width: 768px) {
    .card-detail {
        padding: 2rem;
        display: grid;
        gap: 1rem;
    }
}
.card-ttl, .card-caption {
    display: grid;
    gap: .5rem;
}
.card-ttl {
    max-width: fit-content;
    margin: 0 auto;
    text-align: center;
	user-select: none;
}
.card-caption {
    font-size: .875em;
}

/* ------------------- 
    アコーディオン
*/
.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 300ms ease;
}
.o-accordion__outside.is-active::after {
    transform: rotate(-45deg)
}
.o-accordion__outside,
.o-accordion__inside {
    padding: 1em;
}
.o-accordion__inside {
    display: none;
}
.o-accordion__inside > dl {
    display: grid;
    gap: 1em;
}
.o-accordion__icon {
    display: inline-block;
    line-height: 1;
}

/* -------------------
    背景色設定
*/
.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: whitesmoke;
}

/* -------------------
    アイコン
*/
/* 必須アイコン */
.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-list__note > 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;
    text-align: left;
}
.o-list__number > li:before {
    counter-increment: number 1;
    content: counter(number) ". ";
}
/* リスト-チェック */
.o-item__list > li::before {
    content: "";
    display: inline-block;
    margin-right: .5em;
    width: .5em;
    height: .25em;
    border-top: solid 1px;
    border-right: solid 1px;
    vertical-align: super;
    transform: rotate(135deg);
}

/* -------------------
    フロー図
*/
.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;
}

/* -------------------
    swiper
*/
.o-swiper__area {
    position: relative;
    min-width: 0;
}
.o-swiper__area .swiper-horizontal {
    height: 100%;
    overflow: hidden;
}
.o-swiper__area .swiper-wrapper {
    width: 100%;
    height: 100%;
    min-height: 240px;
}
.o-swiper__area .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: lightgray;
}
.o-swiper__area .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.o-swiper__area .swiper-button-next,
.o-swiper__area .swiper-button-prev {
    top: 0;
    bottom: 0;
    margin: auto;
}
.o-swiper__area .swiper-button-prev {
    left: -10%;
}
.o-swiper__area .swiper-button-next {
    right: -10%;
}
.o-swiper__area .swiper-navigation-icon {
    width: 2rem;
    height: 2rem;
    color: black;
}
.o-swiper__area .swiper-pagination-progressbar {
    top: auto;
    bottom: 0;
    height: .5rem;
}
.o-swiper__area .swiper-pagination-progressbar,
.o-swiper__area .swiper-pagination-bullet {
    background: gray;
}
.o-swiper__area .swiper-pagination-progressbar-fill,
.o-swiper__area .swiper-pagination-bullet-active {
    background: black;
}