@charset "utf-8";

/*** パンくずリスト */
.app-breadcrumb {
    width:100%;
    margin:0;
    color:black;
    background-color:#f1f1f1;
    list-style:none;
    padding-top:1.0rem;
    padding-bottom:1.0rem;
}
@media (min-width:1040px) { /** medium pc */
    .app-breadcrumb {
        padding-left:calc((100% - 100.0rem) / 2);
    }
}
@media (max-width:1039.98px) { /** small pc and sp */
    .app-breadcrumb {
        padding-left:2.0rem;
    }
}
.app-breadcrumb li {
    display:inline-block;
}
.app-breadcrumb li + li {
    color:#00a24c;
    margin-left:1.0rem;
}
.app-breadcrumb li + li::before {
    content:'>';
    margin-right:1.0rem;
}


/*** ページ見出し */
.app-heading, .app-heading-green {
    width:100%;
    text-indent:-150vw;
    overflow:hidden;
    position:relative;
    margin:0;
}

/** 水玉背景 */
.app-heading::before, .app-heading-green::before {
    content:'';
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
    background-position:0 0, 0.8rem 0.8rem;
    background-size:0.8rem 0.8rem;
}
.app-heading::before {
    /*
    background-image:radial-gradient(#999999 9%, transparent 14%), radial-gradient(#999999 9%, transparent 14%);
    background-position:0 0, 8px 8px;
    background-size: 16px 16px;
    */
    background-image:radial-gradient(#999999 9%, transparent 14%), radial-gradient(#999999 9%, transparent 14%);
}
@media all and (-ms-high-contrast:none) { /** ie11 */
    .app-heading::before {
        background-image:radial-gradient(#aaaaaa 9%, transparent 21%), radial-gradient(#aaaaaa 9%, transparent 21%);
    }
}

.app-heading-green:before {
    background-color:#33a256;
    background-image:radial-gradient(#ffffff 9%, transparent 14%), radial-gradient(#ffffff 9%, transparent 14%);
}
@media all and (-ms-high-contrast:none) { /** ie11 */
    .app-heading-green::before {
        background-image:radial-gradient(#cccccc 9%, transparent 21%), radial-gradient(#cccccc 9%, transparent 21%);
    }
}
_::-webkit-full-page-media, _:future, :root .app-heading-green:before {   /** ios safari */
    background-image:radial-gradient(#ffffff 9%, transparent 24%), radial-gradient(#ffffff 9%, transparent 24%);
}

/** 背景画像 */
.app-heading::after {
    content:'';
    position:absolute;
    top:0px;
    background-repeat:no-repeat;
    background-size: contain;
    background-position:center;
}

.app-heading-green::after {
    content:'';
    position:absolute;
    top:0px;
    background-repeat:no-repeat;
    background-size: contain;
    background-position:center;
    background-color:#33a256;
    color:white;
    font-weight: bolder;
    text-indent: 0;
}
@media (min-width:992px) { /** pc */
    .app-heading {
        height:14.9rem;
    }
    .app-heading-green {
        height:12.0rem;
    }

    .app-heading::before, .app-heading-green::before {
        height:100%;
    }
    .app-heading::after, .app-heading-green::after {
        width:86.0rem;
        left:calc((100% - 86.0rem) / 2);
    }
    .app-heading::after {
        background-color:white;
        height:14.9rem;
    }
    .app-heading-green::after {
        background-color:#33a256;
        height:12.0rem;
    }
}
@media (max-width:991.98px) { /** sp */
    .app-heading {
        height:54vw;    /** 351px / width vw(27 + 596 + 27) */
    }
    .app-heading-green {
        height:36.5333vw;
    }

    .app-heading::before {
        height:54vw;    /** 351px / width vw(27 + 596 + 27) */
    }
    .app-heading::after {
        width:calc(100% - 27px * 2);
        height:54vw;    /** 351px / width vw(27 + 596 + 27) */
        left:27px;
        background-color:white;
    }

    .app-heading-green::before {
        background-position:0 0, 8px 8px;
        background-size:8px 8px;
        height:3.733vw;
    }
    _::-webkit-full-page-media, _:future, :root .app-heading-green:before {   /** ios safari */
        background-image:radial-gradient(#ffffff 9%, transparent 14%), radial-gradient(#ffffff 9%, transparent 14%);

    }
    .app-heading-green::after {
        width:100%;
        left:0;
        top:3.733vw;
        height:calc(100% - 3.733vw);
        text-align:center;
    }
}

/*** コンテンツ */
@media (min-width:1000px) { /** medium pc */
    .app-content {
        margin-left:auto;
        margin-right:auto;
        max-width:100.0rem;
        padding-top:3.4rem;
    }
}
@media (max-width:999.98px) { /** small pc and sp */
    .app-content {
        padding-top:1.8rem;
    }
}

/*** 更新履歴 */
.app-notice {
    border-style:dashed;
    border-color:#a4a4a4;
    border-width:0.1rem;
    padding:1.2rem;
    overflow:auto;
    color:black;
}
.app-notice dl {
    margin:0;
    display:flex;
    flex-wrap:wrap;
}
.app-notice a {
    text-decoration:none;
    color:inherit;
}
.app-notice dd a {
    color:#223c99;
}
.app-notice header h3 {
    font-size:1.6rem;
    font-weight:bolder;
}
.app-notice dt, .app-notice dd {
    display:inline-block;
    word-break: break-all;
    font-size:1.4rem;
    padding-bottom:1.2rem;
}
.app-notice dt {
    font-weight:normal;
    vertical-align: top;
    padding-left:1.0rem;
}
.app-notice dd {
    margin:0;
}
@media (min-width:992px) { /** pc */
    .app-notice {
        height:12.8rem;
    }
    .app-notice dt {
        width:18.0rem;
    }
    .app-notice dd {
        width:calc(100% - 18.0rem);
    }
}
@media (max-width:991.98px) { /** sp */
    .app-notice {
        height:128px;
        margin:0 14px;
    }
    .app-notice dt {
        width:100%;
    }
    .app-notice dd {
        width:100%;
    }
    .app-notice dt, .app-notice dd {
        font-size:16px;
    }
}

/* スクロールの幅の設定 */
.app-notice dl::-webkit-scrollbar, .app-notice::-webkit-scrollbar {
    width:1.0rem;
    height:1.0rem;
}
/* スクロールの背景の設定 */
.app-notice dl::-webkit-scrollbar-track, .app-notice::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    box-shadow: 0 0 0.4rem #aaa inset;
}
/* スクロールのつまみ部分の設定 */
.app-notice dl::-webkit-scrollbar-thumb, .app-notice::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background:#A3A1A8;
}

/*** パネル */
.app-panel {
    list-style:none;
    padding:0;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    position:relative;  /** before/afterのabsolute用 */
}
.app-panel > li {
    position:relative;  /** before/afterのabsolute用 */
    margin:1.4rem;
    padding:2.4rem;
}
.app-panel > li h3, .app-panel > li h4, .app-panel > li h5 {
    font-size:2.0rem;
    font-weight:bolder;
    margin-bottom:2.2rem;
    word-break:keep-all;
}
.app-panel > li a:focus-visible {
    outline:none;   /** chromeなどでリンク遷移時の枠線を表示しない */
}
.app-panel > li ul {
    list-style: none;
    padding:0;
}
.app-panel > li ul li {
    padding-left:1.5rem;
}
.app-panel > li ul li::before { /** リストアイテムの丸 */
    content:'';
    position:absolute;
    border-style:solid;
    border-radius:50%;
    border-width:0.4rem;
    margin-left:-1.5rem;
    margin-top:0.8rem; /** font-size / 2 */
}
.app-panel > li p {
    margin-bottom:2.0rem;
}
.app-to-detail {
    position:absolute;  /** before/afterのabsolute用 */
    font-weight:bolder;
    text-align:right;
    display:block;
    font-size:1.6rem;
    line-height:1.6rem;
    padding-right:3.6rem;
}
.app-to-detail i {
    position:absolute;
    top:calc(50% - 1.3rem);
    right:0px;
}
@media (min-width:992px) { /** pc */
    .app-panel {
        display:flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        margin-top:3.4rem;
        padding-bottom:3.4rem;
    }
    .app-panel > li {
        width:calc(50% - 1.4rem * 2);
    }
    .app-col3-pc > li {
        width:calc(33.3333% - ((1.4rem * 4) / 3));
    }
    .app-col4-pc > li {
        width:calc(25% - ((1.4rem * 6) / 4));
    }
    .app-col3-pc > li:first-of-type, .app-col4-pc > li:first-of-type {
        margin-left:0;
    }
    .app-col3-pc > li:last-of-type, .app-col4-pc > li:last-of-type {
        margin-right:0;
    }
    .app-panel > li.app-fw-pc {
        width:100%;
    }
    .app-to-detail {
        right:1.6rem;
        bottom:2.0rem;
    }
}
@media (max-width:991.98px) { /** sp */
    .app-panel {
        padding-bottom:28px;
    }
    .app-to-detail {
        right:10px;
        bottom:15px;
    }
}
@media (max-width:359.98px) { /** small-sp */
    .app-panel > li h3, .app-panel > li h4 {
        word-break:break-all;
    }
}

/** ※コメント */
.app-comment {
    font-size:1.2rem;
    margin-left:1.2rem;
}
.app-comment::before {
    content:'※';
    position:relative;
    left:-1.2rem;
    margin-right:-1.2rem;
}