/*
Theme Name: 2chiikipf2026
Author URI: https://www.mlit.go.jp/2chiiki_pf/
Description: 2Chiiki Platform Theme
Version: 1.0.0
*/

@charset "utf-8";

/* 見出し --------------------------------------------------------------------------------- */
.subtitle-en {
    padding-top: 80px;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--c-primary);
}

.subtitle-jp {
    padding-top: 7px;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
}

@media screen and (max-width:960px) {
    .subtitle-en {
        padding-top: 40px;
        font-size: 12px;
    }

    .subtitle-jp {
        padding-top: 0px;
        font-size: 20px;
        padding-bottom: 0px;
    }
}

/* form部品 --------------------------------------------------------------------------------- */

.input-box input[type="text"],
.input-box input[type="tel"],
.input-box input[type="email"],
.input-box input[type="url"],
.input-box input[type="password"],
.input-box textarea,
.input-box select {
    margin-bottom: 0;
    font-size: 1rem;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.no-result {
    text-align: center;
}

/* 注釈系(mypageにも同じのあります)  --------------------------------------------------------------------------------- */
.note {
    font-size: 0.875rem;
    font-weight: normal;
    font-feature-settings: 'palt';
    letter-spacing: 0.03em;
    display: inline-block;
    margin-left: 15px;
}

p.label {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 20px 0 10px;
}

.comment {
    margin: 20px auto;
    font-size: 0.875rem;
}

p.label+.comment {
    margin-top: 0;
}

.label-mini {
    font-size: 0.875rem;
}

.sub {
    font-size: 0.875rem;
    font-weight: normal;
    margin-left: 0.5rem;
}

p.attention {
    margin-top: 1rem;
    text-decoration: underline;
}


/* 必須マーク --------------------------------------------------------------------------------- */
.req {
    background-color: var(--c-primary);
    color: #fff;
    padding: 4px 6px;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle;
}

/* reg_message --------------------------------------------------------------------------------- */

.reg_alert {
    color: var(--c-primary);
    border: var(--c-primary) 1px solid;
    padding: 12px;
    width: 480px;
    margin: 95px auto auto;
    text-align: center;
}

h1.page-title.reg_title {
    padding: 32px 0;
}

.reg_message {
    width: 480px;
    margin: auto;
}

@media (max-width: 960px) {

    .reg_alert,
    .reg_message {
        width: 100%;
        padding: 12px 0;
    }

}

.URLinvalid {
    text-align:center;
}


/* セレクト -------------------------------------------------------------------------------- */
.input-box select {
    box-sizing: border-box;
    border-radius: 8px;
    background-color: var(--c-white);
    border: 1px solid var(--c-secondary);
    width: 100%;
    padding: 16px 15px;
    margin-bottom: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("/images/icon-select.svg") no-repeat right 12px center var(--c-white);
    padding-right: 40px;
    background-size: 24px;
}


/* ラジオボタン・チェックボックス ------------------------------------------------------------- */
.input-box label.check,
.input-box label.radio {
    display: grid;
    grid-template-columns: 15px 1fr;
    column-gap: 7px;
    align-items: start;
    font-weight: 600;
    margin-right: 20px;
    -webkit-flex-wrap: initial;
    text-align: left;
}

/* 本物のチェックボックスは隠す */
.input-box label.check input[type="checkbox"],
.input-box input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    opacity: 0;
}

/* 自作のチェックボックス（自由にサイズ変更） */
.input-box label.check span:not(.dot),
.input-box label.radio span:not(.dot) {
    width: 15px;
    height: 15px;
    margin: 2px 0 0 0;
    border: 1px solid var(--c-secondary);
    background-color: var(--c-white);
    border-radius: 2px;
    display: block;
    position: relative;
}

/* チェックされた時の色 */
.input-box label.check input:checked+span:not(.dot),
.input-box label.radio input:checked+span:not(.dot) {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

/* チェックマーク（✓） */
.input-box label.check span:not(.dot)::after,
.input-box label.radio span:not(.dot)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 9px;
    border-right: 2px solid var(--c-white);
    border-bottom: 2px solid var(--c-white);
    transform: rotate(45deg);
    opacity: 0;
}

/* チェックされた時に表示 */
.input-box label.check input[type="checkbox"]:checked+span:not(.dot)::after,
.input-box label.radio input[type="radio"]:checked+span:not(.dot)::after {
    opacity: 1;
}

/* ラベルをカスタムボタンとして表示 */
.input-box .custom-radio {
    position: relative;
    padding-left: 26px;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

/* ラジオボタン-外側の丸 */
.input-box .custom-radio::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border: 2px solid var(--c-secondary);
    background-color: var(--c-white);
    border-radius: 50%;
}

/* ラジオボタン-内側の丸（選択時のみ表示） */
.input-box input[type="radio"]:checked+.custom-radio::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--c-primary);
}

/* disable時 */
.input-box input[type="checkbox"]:disabled+span {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--c-lightgray);
}

.input-box input[type="checkbox"]:disabled+span::before {
    background-color: var(--c-bgcolor);
    border-color: var(--c-lightgray);
}

.input-box input[type="checkbox"]:disabled~label {
    color: var(--c-lightgray);
}


/* 入力欄 ----------------------------------------------------------------------- */
.input-box input[type="password"],
.input-box input[type="text"],
.input-box input[type="tel"],
.input-box input[type="email"],
.input-box input[type="url"],
.input-box input[type="date"],
.input-box input[type="number"],
.input-box textarea {
    box-sizing: border-box;
    border-radius: 8px;
    background-color: var(--c-white);
    border: 1px solid var(--c-secondary);
    width: 100%;
    padding: 16px 15px 16px 15px;
}


/* 検索マークつき入力欄 */
.input-box input.input-search {
    box-sizing: border-box;
    border-radius: 8px;
    background-color: var(--c-white);
    border: 1px solid var(--c-secondary);
    width: 100%;
    padding: 16px 40px 16px 15px;
    background-image: url("/images/icon-search.svg");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px;
}


/* パスワード欄：目アイコン */
.pwd-wrap {
    position: relative;
}

.pwd-wrap input.password {
    /*	padding-right: 44px; */
}

.pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* アイコン（表示/非表示で切替） */
.pwd-toggle::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("/images/icon-password-hidden.svg") no-repeat center / contain;
}

.pwd-toggle.is-on::before {
    background: url("/images/icon-password-show.svg") no-repeat center / contain;
}

/* ボタン -------------------------------------------------------------------------------------------- */
/* button/input/.btn a といろいろ分岐しているので注意 */

.btn_area button,
.btn_area input,
.btn_area .btn a {
    box-sizing: border-box;
    width: 178px;
    height: 48px;
    line-height: 48px;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    transition: all 0.2s;
    font-weight: 600;
    font-family: inherit;
}

.btn_area .btn a {
    display: block;
}

.btn_area .btn-primary,
.btn_area .buttons {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 360px;
    margin: 30px auto 0 auto;
    border: none;
    background-color: var(--c-primary);
    color: var(--c-white);
}



.btn_area .btn-select-area,
.btn_area .btn-select-all {
    border: solid 1px var(--c-primary);
    background-color: var(--c-primary);
    color: var(--c-white);
    border-radius: 25px;
}

.btn_area .btn-clear {
    border: solid 1px var(--c-secondary);
    background-color: var(--c-white);
    color: var(--c-secondary);
}

.btn_area .btn-close {
    border: solid 1px var(--c-primary);
    background-color: var(--c-primary);
    color: var(--c-white);
}

.btn_area input:hover,
.btn_area button:hover,
.btn_area .btn a:hover,
.btn_area label.btn-file:hover {
    opacity: 0.7;
    transition: all 0.2s;
}

/* モーダルのログインボタン */
.modal .btn-login a,
.modal-login .btn-login {
    padding-left: 30px;
    border: solid 2px var(--c-primary);
    background-image: url("/images/icon-login.svg");
    background-position: center left 24px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-color: var(--c-white);
    color: var(--c-primary);
}

/* モーダルのマイページ用装飾 */
.modal-login .btn-login.btn-mypage {
    background-position-x: 12px;
}

/* モーダルのキャンセルボタン */
.modal .btn-application a,
.modal-login .btn-application,
.modal-login .btn-favrelease {
    border: solid 2px var(--c-government);
    background-color: var(--c-government);
    color: var(--c-white);
}

.modal-login .btn-cancel {
    border: solid 2px var(--c-primary);
    color: var(--c-white);
    background-color: var(--c-primary);

}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 8px;
    right: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.close-btn img {
    width: 27px;
    height: 27px;
    display: block;
}

/* fav */
.favorite {
    width: 32px;
    background-color: transparent;
    border: 0;
}


/* モット見る */
.btn_area .btn .btn_more {
    width: 358px;
    border: solid 1px var(--c-primary);
    background-color: var(--c-primary);
    color: var(--c-white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.btn_area .btn .btn_more::after {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("../images/icon-add.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    flex: 0 0 auto;
}

/* 普通のログインボタン */
.btn-login a,
.btn-login a {
    padding-left: 30px;
    border: solid 2px var(--c-primary);
    background-image: url("/images/icon-login.svg");
    background-position: center left 24px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-color: var(--c-white);
    color: var(--c-primary);
}

.btn-application a,
.btn-application a {
    border: solid 2px var(--c-government);
    background-color: var(--c-government);
    color: var(--c-white);
}

/* file用 */
label.btn-file {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-width: 164px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    color: #2ea9e0;
    border: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    transition: all 0.2s;
}

label.btn-file::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: url("/images/button-file.svg") no-repeat center / contain;
    flex: 0 0 auto;
}

/*=========================================*/
/* pagination */
/*=========================================*/

.pagination-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 50px 0 0 0;
}

.pagination-list li {
    color: var(--c-primary);
    text-align: center;
}

.pagination-list li a,
.pagination-list li.page,
.pagination-list li .current,
.pagination-list li span {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: solid 1px var(--c-primary);
    border-radius: 500px;
    text-decoration: none;
}

.pagination-list li a,
.pagination-list li span {
    color: var(--c-primary);
    text-decoration: none;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    transition: all 0.2s;
}

.pagination-list li a:hover {
    opacity: 0.5;
    transition: all 0.2s;
}

.pagination-list li.page,
.pagination-list li .current {
    background-color: var(--c-primary);
    color: var(--c-white);
}

.pagination-list li .prev01 img,
.pagination-list li .next01 img,
.pagination-list li .next02 img,
.pagination-list li .prev02 img {
    width: 6px;
}

.pagination-list li .next02 img,
.pagination-list li .prev02 img {
    width: 10px;
}

@media screen and (max-width:960px) {
    .pagination-list {
        padding: 10px 0 0 0;
    }

    .pagination-list li a,
    .pagination-list li.page,
    .pagination-list li .current {
        width: 42px;
        height: 42px;
    }

    .pagination-list li.number {
        display: none;
    }
}

.pagination-list li a,
.pagination-list li.page {
    /* width: 42px;
    height: 42px; */
}

.pagination-list li.number {
    display: none;
}

/*=========================================*/
/* 非会員向け */
/*=========================================*/
.case-detail-contents div.noLogin,
.news-detail-contents div.noLogin {
    border-top: dashed 1px var(--c-secondary);
    border-bottom: dashed 1px var(--c-secondary);
    padding: 24px 0;
}

.case-detail-contents .dotline,
.news-detail-contents .dotline {
    text-align: center;
    margin: 24px auto;
}


.case-detail-contents .noLogin .btn_area,
.news-detail-contents .noLogin .btn_area {
    justify-content: center;
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

@media screen and (max-width:960px) {

    .case-detail-contents .noLogin .btn_area a,
    .news-detail-contents .noLogin .btn_area a {

        max-width: 160px;

    }
}


/*=========================================*/
/* WPMem */
/*=========================================*/

#wpmem_msg,
.wpmem_msg {
    text-align: center;
    background: transparent;
    border: 0;
    margin: 0 auto;
    line-height: 1.75;
    padding: 0px;
}

.error {
    font-size: 0.875rem;
    display: block;
    color: var(--c-error);
}

.wpmem_msg>a {
    display: block;
    margin-bottom: 1rem;
}


/*=========================================*/
/* item-box */
/*=========================================*/
.item-box {
    display: block;
    cursor: pointer;
    margin: 0;
    background-color: var(--c-white);
    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    border-radius: 8px;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    transition: all 0.2s;
}

.item-box a {
    text-decoration: none;
}

.case-list .item-box:hover>a {
    opacity: 0.7;
    transition: all 0.2s;
}

.case-list .item-box:hover a {
    text-decoration: none;
    color: var(--c-primary);
}

/* 画像コンテナを390×190の比率に固定（比率は可変で縮小） */
.item-box .img {
    position: relative;
    display: flex;
    width: 100%;
    /* aspect-ratio: 390 / 190;
    ←比率固定 */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--c-bgcolor);
}

.item-box .img img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

.item-box .data-area {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

.item-box .category {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    height: 40px;
    margin-right: 16px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: bold;
    line-height: 32px;
    color: var(--c-white);
}

.item-box .administrator,
.item-box .mlit,
.item-box .category01 {
    background-color: var(--c-primary);
}

.item-box .government,
.item-box .category02 {
    background-color: var(--c-government);
}

.item-box .company,
.item-box .category03 {
    background-color: var(--c-company);
}

.item-box .add {
    flex: 1;
    padding: 3px 0 2px 23px;
    background-image: url("/images/icon-pin.svg");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    font-size: 13px;
    min-height: 1rem;
    text-overflow: ellipsis;
    max-width: 13rem;
    overflow: hidden;
    overflow: hidden;
    white-space: nowrap;
}

.item-box .favorite {
    width: 32px;
    background-color: transparent;
    border: 0;
}

.item-box .favorite img {
    width: 24px;
    margin: auto;
}

.item-box .title-area {
    display: block;
    padding: 15px 18px;
}

.item-box .title {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.item-box .logo-area {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 16px;
}

.item-box .logo {
    width: 30px;
    height: 30px;
}

.item-box .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-box .name {
    flex: 1;
    padding-left: 7px;
    font-size: 13px;
}

.item-box .tag-area {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
}

.item-box .tag {
    flex: 0 0 auto;
    height: 25px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 25px;
    color: var(--c-secondary);
    border: solid 2px var(--c-secondary);
    border-radius: 500px;
}

/* 折り返しするなら */
[data-tag-clamp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

.tag-area[data-tag-clamp] .tag {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 省略チップ‗デザイン変更必要なら */
.tag-area[data-tag-clamp] .tag-ellipsis {
    border: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

/* 要調整 */

@media screen and (max-width: 1109px) and (min-width: 961px) {
    .item-box {
        width: calc((100% - 30px) / 2);
    }
}

@media (max-width: 960px) {
    .item-box {
        width: 100%;
        margin-right: 0px;
    }
}


/*=========================================*/
/* ステッパー */
/*=========================================*/
.stepper {
    --size: 44px;
    --line: 2px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.stepper__item {
    position: relative;
    text-align: center;
    padding-top: 8px;
}

/* 横線（最後以外に引く） */
.stepper__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(8px + (var(--size) / 2) - (var(--line) / 2));
    left: 50%;
    width: 100%;
    height: var(--line);
    background: var(--c-primary);
    z-index: 0;
}

/* 番号ボックス */
.stepper__num {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    margin: 0 auto 10px;

    border: 2px solid var(--c-primary);
    border-radius: 6px;
    background: var(--c-white);

    color: var(--c-primary);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

/* 現在のステップ（塗りつぶし） */
.stepper__item.is-current .stepper__num {
    background: var(--c-primary);
    color: var(--c-white);
}

/* ラベル */
.stepper__label {
    display: inline-block;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    line-height: 22px;
}

/* スマホ調整（文字小さく＆詰める） */
@media (max-width: 960px) {
    .stepper {
        /* PCの変数は流用 */
        grid-template-columns: 1fr;
        /* 5列 → 1列 */
        row-gap: 12px;
    }

    .stepper__item {
        /* 中央寄せ → 左寄せ＆横並びに */
        text-align: left;
        padding-top: 0;
        padding-left: calc(var(--size) + 14px);
        /* ボックス分の左余白 */
        min-height: var(--size);
    }

    /* PCの横線を「縦線」に置き換え */
    .stepper__item:not(:last-child)::after {
        top: calc(var(--size) + 4px);
        /* ボックスの少し下から */
        left: calc(var(--size) / 2);
        width: var(--line);
        height: calc(100% + 12px);
    }

    .stepper__num {
        /* 左に固定配置 */
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

    .stepper__label {
        /* 右側にテキストが来るだけ */
        display: block;
        font-size: 16px;
        line-height: 48px;
    }

    /* SPでは <br> 強制改行を消して自然折返し（要らなければ削除OK） */
    .stepper__label br {
        display: none;
    }
}

/*=========================================*/
/* scrollHint/スクロールテーブル */
/*=========================================*/
@media (max-width: 960px) {
    .scrollTable {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* スクロール可能な時だけ付けるクラス */
    .scrollTable.is-scrollable::after {
        content: "";
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 150px;
        transform: translate(-50%, -50%);
        width: 136px;
        height: 113px;
        background: url("/images/scroll-mark.svg") center/contain no-repeat;
        opacity: 0.9;
        pointer-events: none;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
    }

    /* ユーザーが触った/スクロールしたら薄くする */
    .scrollTable.is-hinted::after {
        opacity: 0;
        transition: opacity .25s ease;
    }

    .scrollTable table {
        width: max-content !important;
        min-width: 100%;
        table-layout: fixed;
    }

    .scrollTable th,
    .scrollTable td {
        white-space: nowrap;
    }
}