main {
    padding-bottom: 100px;
}

/* general */
.iconCaution {
    padding-left: 1.2em;
    background: url(/support/images/caution.gif) no-repeat left center;
}

.dotList li {
    margin-top: 10px;
    padding-left: 1em;
    background: url(/support/images/ico_circle_gray_s.gif) no-repeat left 8px;
}

.linkAr {
    position: relative;
    padding: 0 0 0 1em;
    background: none;
}

.linkAr::before {
    position: absolute;
    top: 10px;
    left: 0;
    display: inline-block;
    margin-top: -0.4em;
    content: "\f105";
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1;
}

.linkAr::before {
    font-family: "Font Awesome 5 Free";
}

.textLink, .link {
    cursor: pointer;
    text-decoration: underline;
    color: #000099;
}

.textLink:hover, .link:hover {
    text-decoration: none;
    color: #FF6633;
}


.textIndent {
    padding-left: 1em;
    text-indent: -1em;
}

/* ------------------------- */
/* 検索系 */
.product-search-section {
    margin-top: 2em;
}

/* 部品一覧 */
.centerTxt {
    text-align: center;
}

/* 製品検索 */
.searchBox {
    padding-bottom: 2rem;
}

.form-error-text {
    padding: 5px;
    color: #c00000;
    font-size: 0.8em;
    font-weight: bold;
}

.searchBox .formArea label {
    display: inherit;
    margin-bottom: 0;
}

.searchBox .formArea .fieldBlock {
    display: flex;
    width: 100%;
    max-width: 870px;
}

.searchBox .formArea .fieldBlock input[type=text] {
    float: left;
    flex: 1 1 100px;
    box-sizing: border-box;
    padding: 5px;
    border: #000 1px solid;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.searchBox .formArea .fieldBlock input[type=text]::placeholder {
    color: #7d7d7d;
    font-size: 1.4rem;
}

.searchBox .formArea .fieldBlock .btnSearch {
    position: relative;
    float: none;
    flex: 0 0 80px;
    box-sizing: border-box;
    margin-top: 0;
    padding: 0.5rem 0 0.5rem 2rem;
    color: #ffffff;
    border: #444 1px solid;
    border-radius: 0;
    background: #444;
    font-size: 1.3rem;
    min-width: 0;
}

.searchBox .formArea .fieldBlock .btnSearch:focus-visible {
    outline: solid 2px #535353;
    outline-offset: 4px;
}

.searchBox .formArea .fieldBlock .btnSearch:after {
    position: absolute;
    top: calc(50% - 0.5em);
    left: 0.5em;
    display: block;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-size: 1em;
    font-weight: 900;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .searchBox {
        padding-bottom: 3rem;
    }

    .searchBox .formArea .fieldBlock {
        width: 80%;
    }

    .searchBox .formArea .fieldBlock .btnSearch {
        width: auto;
        padding: 12px 15px 12px 30px;
        font-size: 1.6rem;
    }

    .searchBox .formArea .fieldBlock input[type=text] {
        padding: 12px 8px;
    }
}

.searchBox .searchBoxLink {
    margin-top: 10px;
    padding-left: 0;
}

.searchBox .arrowLink._pink {
    display: inline-block;
    color: #000;
}

.searchBox .arrowLink._pink:hover {
    text-decoration: underline;
}

.searchBox .arrowLink._pink::before {
    color: #bc0073;
}

.searchBox .form-hint-text {
    display: block;
    margin-bottom: 5px;
    font-weight: 400;
}


body.isSp .searchBox .searchBoxLink {
    margin-bottom: 20px;
    padding-top: 0;
    padding-left: 40px;
    line-height: 1.3;
}

/* 形名確認のしかた */
a.btn-show-list {
    position: relative;
    display: inline-block;
    width: 200px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 1rem 2em 1rem 1em;
    text-decoration: none;
    color: #000;
    border: solid 1px #000;
    border-radius: 999px;
    background: #fff;
    font-size: 1.4rem;
    font-weight: bold;
}

a.btn-show-list::before {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-block;
    content: "\f105";
    transform: translateY(-46%);
    color: var(--color-primary);
    font-family: "Font Awesome 5 Free";
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1;
}

a.btn-show-list:hover {
    color: #fff;
    background: #535353;
}

.products-sub-title {
    margin-bottom: 20px;
    font-size: 2.2rem;
    font-weight: 300;
}

@media screen and (min-width: 768px) {
    .products-sub-title {
        font-size: 2.8rem;
    }
}

.searchInfoText {
    margin-bottom: 30px;
    text-align: left;
    font-weight: 400;
}

.searchInfoText .searchInfoIcon {
    display: inline-block;
    margin-bottom: 10px;
    padding-left: 25px;
    background: url(/support/images/ico_info_pink.png) no-repeat left 2px;
}

.searchInfoText.hp_marginTop {
    margin-top: 30px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ pageAccessibility */


.productSectionOuterWrap .catTtl {
    margin-top: 35px;
    font-size: 2rem;
    font-weight: bold;
}

.productSectionWrap .ttlSec {
    margin: 35px 0 20px;
    font-size: 1.8rem;
    font-weight: bold;
}

/* ############################### btn-anc */

.btnBox {
    display: grid;
    align-items: start;
    flex-wrap: wrap;
    margin: 1em 0;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    column-gap: 1em;
    row-gap: 0.5em;
}

.btn-anc {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 1em 2.5em 1em 1em;
    text-decoration: none;
    border: solid 1px #000;
    border-radius: 5px;
    background: #fff;
    font-size: 1.3rem;
    font-weight: bold;
}

.btn-anc:hover {
    color: #fff;
    background: #535353;
}

.btn-anc:before {
    position: absolute;
    top: calc(50% - 0.65em);
    right: 0.5em;
    display: block;
    content: "\f063";
    color: #b01681;
    font-family: "Font Awesome 5 Free";
    font-size: 1.2em;
    font-weight: 900;
}

/**************/
:root {
    --grid-col-gap: 1.25em;
    --grid-row-gap: 1em;
    --color-primary: #b01681;
}

/**
 * parent list
 */
.product-list {
    display: grid;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--grid-row-gap) var(--grid-col-gap);
}

.product-list-item {
    word-break: break-all
}

.product-list-item--opened {
    z-index: 2;
}

/* 開閉操作 */
.collapse-button {
    position: relative;
    padding: 0.25em 2em 0.25em 1em;
    cursor: pointer;
    text-align: left;
    color: #000;
    border: none;
    border-bottom: 1px solid #ddd;
    background: none;
    font-size: 1.6rem;
}

.collapse-button:hover {
    color: var(--color-primary);
}

.collapse-button::after {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: block;
    content: "\f078";
    transition: transform .5s;
    font-family: "Font Awesome 5 Free";
    font-size: 1em;
    font-weight: 900;
    line-height: 1;
}

.collapse-button[aria-expanded="true"] {
    color: var(--color-primary);
    border: none;
    font-weight: 700;
}

.collapse-button[aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

.collapse-area {
    overflow-y: hidden;
    transform-origin: top center;
    animation: expandY .5s ease-out;
    border-bottom: 1px solid #ddd;
}

.collapse-area[aria-hidden="true"] {
    display: none;
}

/* 製品リスト内の開閉操作 */
.product-list .collapse-button {
    width: 100%;
}

.product-list .collapse-button[aria-expanded="true"] {
    background: #eee;
}

.product-list-item .collapse-area__inner {
    padding: 15px 15px 20px 15px;
    background-color: #eee;
}

.product-list-item-group {
    margin-bottom: 2em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

/*展開後リスト*/
.product-list-item-group .close-button-wrap {
    display: flex;
    justify-content: end;
}

.product-list-item-group .close-button {
    position: relative;
    padding: 0 0 0 1em;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1.4rem;
    color: #000;
}

.product-list-item-group .close-button::before {
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    display: block;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .product-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-list-item .collapse-area__inner {
        padding: 30px 30px 20px 30px;
    }

    .product-list-item .collapse-area {
        width: calc(300% + var(--grid-col-gap) * 2);
    }

    .product-list-item:nth-child(3n + 1) > .collapse-area {
        margin-left: 0;
    }

    .product-list-item:nth-child(3n + 2) > .collapse-area {
        margin-left: calc(-1 * (100% + var(--grid-col-gap)));
    }

    .product-list-item:nth-child(3n) > .collapse-area {
        margin-left: calc(-2 * (100% + var(--grid-col-gap)));
    }

    /** with img style */
    .product-list--img {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-list--img .product-list-item .collapse-area {
        width: calc(200% + var(--grid-col-gap));
    }

    .product-list--img .product-list-item:nth-child(2n + 1) > .collapse-area {
        margin-left: 0;
    }

    .product-list--img .product-list-item:nth-child(2n) > .collapse-area {
        margin-left: calc(-1 * (100% + var(--grid-col-gap)));
    }
}


@media screen and (min-width: 1080px) {
    .product-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .product-list-item .collapse-area {
        width: calc(500% + var(--grid-col-gap) * 4);
    }

    .product-list-item:nth-child(5n + 1) > .collapse-area {
        margin-left: 0;
    }

    .product-list-item:nth-child(5n + 2) > .collapse-area {
        margin-left: calc(-1 * (100% + var(--grid-col-gap)));
    }

    .product-list-item:nth-child(5n + 3) > .collapse-area {
        margin-left: calc(-2 * (100% + var(--grid-col-gap)));
    }

    .product-list-item:nth-child(5n + 4) > .collapse-area {
        margin-left: calc(-3 * (100% + var(--grid-col-gap)));
    }

    .product-list-item:nth-child(5n) > .collapse-area {
        margin-left: calc(-4 * (100% + var(--grid-col-gap)));
    }


    /** with img style */
    .product-list--img {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-list--img .product-list-item .collapse-area {
        width: calc(300% + var(--grid-col-gap) * 2);
    }

    .product-list--img .product-list-item:nth-child(3n + 1) > .collapse-area {
        margin-left: 0;
    }

    .product-list--img .product-list-item:nth-child(3n + 2) > .collapse-area {
        margin-left: calc(-1 * (100% + var(--grid-col-gap)));
    }

    .product-list--img .product-list-item:nth-child(3n) > .collapse-area {
        margin-left: calc(-2 * (100% + var(--grid-col-gap)));
    }
}

/**
 * child list
 */
.child-list-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.6rem;
    font-weight: 700;
}

.child-list {
    display: grid;
    flex-wrap: wrap;
    margin: 15px 0;
    padding: 0 10px;
    list-style: none;
    gap: var(--grid-row-gap) var(--grid-col-gap);
    grid-template-columns: 1fr;
}

.child-list-item {
    border-bottom: 1px solid #ddd;
    font-size: 1.4rem;
}

.child-list-item__link {
    display: block;
}

.child-list-item__label {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.25em 1em 0.25em 0.5em;
    font-weight: 500;
}

.child-list-item__label::after {
    position: absolute;
    top: 0.25em;
    right: 0.5em;
    display: block;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-size: 1em;
    font-weight: 900;
}


@media screen and (min-width: 768px) {
    .child-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .child-list--img {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1080px) {
    .child-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .child-list--img {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .child-list-item {
        font-size: 1.6rem;
    }
}

/**
 * 商品画像
 */
.product-img-wrapper {
    min-width: 130px;
    max-width: 130px;
    margin: 0 auto 20px auto;
    background: #fff;
}

.product-img-wrapper > img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

@keyframes expandY {
    from {
        max-height: 0;
    }
    to {
        max-height: 100%;
    }
}