/* ------------------------------------------------------------

    投票の仕方（スマッピー）

------------------------------------------------------------ */

/* ------------------------------------------------------------
	フロー
------------------------------------------------------------ */

.step_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:  min-content;
    gap: 40px 20px;
}

p + .step_container,
.tab_content .step_container {
    margin-top: var(--mt30_60);
}

.tab_content p + .step_container {
    margin-top: 36px;
}


/* - 見出し（STEP）
-------------------------------------------------- */

.step_unit .step {
    position: relative;
    width: 100%;
    height: fit-content;
    padding: 8px 10px;
    margin-top: -40px;
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    text-align: center;
    border-radius: var(--radius_xs);
    background-color: rgba(51, 51, 51, 0.8);
    background-color: rgb(from var(--color-black) r g b / 80%);
    color: var(--color-white);
}

.step_unit .step::after {
    content: "";
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translateX(-50%);
    background-color: inherit;
    width: 16px;
    height: 6px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* - 各STEP
-------------------------------------------------- */

.step_unit.wide,.arrow {
    grid-column: 1 / -1;
}

.step_unit {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    position: relative;
    padding: 20px;
    padding-inline: clamp(10px, 0.3363rem + 1.7699vw, 20px);
    border: 2px solid #ddd;
    border-radius: var(--radius_sm);
    background-color: var(--color-white);
}

.step_unit .content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 8px;
}

.step_unit .content .img img {
    border: 1px solid var(--btn-border-white);
}

.step_unit.wide {
    grid-row: span 3;
}

.step_unit.wide .content {
    grid-row: span 2;
}

.step_unit .detail {
    padding: 8px 12px;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #f5f5f5;
}

.step_unit .detail .underline_dotted {
    border-bottom: 1px dotted #ccc;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.step_unit .detail .underline_dotted + p {
    font-weight: normal;
}

.arrow {
    display: grid;
    place-content: center;
    margin-top: -20px;
}
.arrow img{
    width: 40px;
}


/* - STEP内 grid
-------------------------------------------------- */

.step_unit .inner_grid  {
    display: grid;
    grid-template-columns: auto;
    align-content: start;
    gap: 10px;
}

.inner_grid.col3 {
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 10px;
}

.inner_grid.col4 {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 10px;
}

.inner_grid.col5 {
    grid-template-columns: repeat(5,1fr);
    gap: 20px;
    margin-top: 10px;
}

.inner_grid .wide {
    grid-column: span 2;
}

.step_unit .inner_grid .txt.wide {
    grid-column: 1 / -1;
}

.inner_grid .wide .inner_grid{
    grid-template-columns: repeat(2,1fr);
}

.inner_grid .wide .inner_grid .img {
    grid-row-start: 1;
}

.inner_grid .title {
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgba(253, 200, 0, 0.9);
    padding: 6px 10px;
    color: var(--color-black);
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: var(--font-bold);
}

/* - スクロールあり PC
-------------------------------------------------- */

.scr .caution {
    display: none;
    grid-column: 1 / -1;
}

.inner_grid.col4 {
    gap: 12px;
    width: calc((100% - 128px)/3*4 + 36px);
    padding-bottom: 10px;
}

.is-scrollable .caution {
    display: block;
    margin-top: 10px;
}

.is-scrollable > .inner_grid {
    padding-bottom: 10px;
}
/* - タブ 調整
-------------------------------------------------- */
ul.nav.tab > li.current > a {
    background-color: var(--main-color);
}

ul.nav.tab > li.current > a:hover {
    background-color:  var(--main-color);
}

ul.nav.tab > li.current > a:after {
    border-top-color: var(--main-color);
}

ul.nav.tab > li {
    border-bottom: 1px solid #ffffff00;
}

ul.nav.tab > li:last-child {
    border-bottom: none;
}

/* - ボタンリスト
-------------------------------------------------- */
.button-list.center {
    grid-column: 1 / -1;
}


/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and (max-width : 767px) {

    /* ------------------------------------------------------------
        フロー
    ------------------------------------------------------------ */

    .step_container {
        grid-template-columns: 1fr 1fr;
        gap: 40px 6px;
    }

    .step_unit .step {
        width: 80%;
        padding: 4px;
        margin-top: -34px;
        margin-inline: auto;
        font-size: 1.3rem;
    }

    .step_unit {
        padding: 20px 6px 8px;
    }

    .step_unit .detail {
        padding: 6px 6px;
    }

    .arrow {
        display: none;
    }

    /* - スクロールあり
    -------------------------------------------------- */

    .inner_grid.col3 {
        gap: 12px;
        width: calc(((100vw - 22px) / 2)*3);
        min-width: 580px;
    }

    .inner_grid.col4 {
        width: calc(((100vw - 22px) / 2)*4);
    }

    .inner_grid.col5 {
        width: 180vw;
    }

    .inner_grid .title {
        font-size: 1.3rem;
        padding-inline: 4px;
    }


}