@charset "utf-8";

/* 共通 */
/*body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue","Mplus 1p", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}*/
.hide {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.flex {
    box-sizing: border-box;
    display: flex;
}

a {
    transition: 0.8s;
}

a:hover {
    opacity: 0.4;
}

/* #top */
body {
    width: 100%;
    height: 100vh;
}

/* header */
.header_wrap {
    width: 100%;
    max-width: 100%;
}

.header {
    width: 100%;
    max-width: 980px;
    height: 0;
    padding-bottom: 41.35%;
    background: url(../img/img_header.jpg) no-repeat center/contain;
    margin: 0 auto 20px;
    box-sizing: border-box;
}

/* .con01 */
.con01 {
    width: 100%;
    max-width: 980px;
    margin: auto;
    box-sizing: border-box;
}

.setumei {
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.setumei h2 {
    line-height: 1.6;
    font-size: 30px;
    margin-bottom: 40px;
    font-weight: bold;
}

.setumei p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
}

.tokutyo {
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 30px;
    margin-bottom: 80px;
    padding: 0 20px;
    box-sizing: border-box;
}

.tokutyo li {
    width: calc((100% - 60px) / 3);
    justify-content: center;
    flex-wrap: wrap;
}

.tokutyo figure {
    margin-bottom: 10px;
    width: 100%;
    max-width: 250px;
    text-align: center;
}

.tokutyo p {
    line-height: 1.4;
    font-size: 14px;
}

.syousai {
    justify-content: center;
    align-items: flex-start;
    gap: 45px;
    flex-wrap: wrap;
    margin-bottom: 80px;
    padding: 0 20px 0 0;
}

.syousai dt {
    width: calc(30% - 45px);
    text-align: right;
}
.syousai .tokutyo_txt {
    margin-top:20px;
}
.syousai dd {
    font-size: 16px;
    width: 70%;
    line-height: 1.4;
}

.syousai dt span {
    font-size: 22px;
    font-weight: bold;
    padding: 10px;
    border: 2px solid #000;
}

.table_wrap {
    padding: 0 20px;
}

.con01 table {
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
    max-width: 840px;
    margin: 0 auto 80px;
}

.con01 table:nth-of-type(2) {
    margin: 0 auto 120px;
}

.con01 th,
.con01 td {
    padding: 10px;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: 16px;
    letter-spacing: 1px;
    border: 1px solid #000;
}

.con01 .t_big {
    font-size: 24px;
}

.con01 .t_small {
    font-size: 10px;
    text-align: center;
}

.con01 .t_left_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.con01 .t_left_wrap span {
    line-height: 1.4;
}

.con01 .t_center {
    text-align: center;
}

/* .list */
.list {
    width: 100%;
}

.list_wrap {
    width: 100%;
    max-width: 980px;
    height: 0;
    padding-bottom: 82.65%;
    margin: 0 auto 80px;
    background: url(../img/list.jpg) no-repeat center/contain;
    position: relative;
    z-index: 999;
}

.link_list a {
    display: block;
    position: absolute;
    transition: 0.6s;
    z-index: 1000;
    height: 0;
}

.link_list a:hover {
    background: rgba(255, 255, 255, 0.6);
}

.link_list01 a {
    padding-bottom: 26.99%;
    border-radius: 20px;
    width: 34.47%;
}

.link_list02 a {
    padding-bottom: 17.4%;
    border-radius: 10px;
    width: 21.94%;
}

.link_zensyoku a {
    top: 16.66%;
    left: 32.65%;
}

.link_tansai a {
    top: 51.35%;
    left: 4.58%;
}

.link_nousai a {
    top: 51.35%;
    left: 27.24%;
}

.link_tyu-sai a {
    top: 51.35%;
    left: 50.30%;
}

.link_mono a {
    top: 51.35%;
    left: 73.46%;
}

.link_blue a {
    top: 75.62%;
    left: 4.58%;
}

.link_green a {
    top: 75.62%;
    left: 27.24%;
}

.link_be-ju a {
    top: 75.62%;
    left: 50.30%;
}

.link_pink a {
    top: 75.62%;
    left: 73.46%;
}

.link_list.soldout a::after {
    content: '';
    display: block;
    width: 41.8%;
    height: 52.9%;
    background: url(../img/soldout.png) no-repeat center/contain;
    position: absolute;
    right: -9.3%;
    top: -7.6%;
    background-color: rgba(255,255,255,1);
    border-radius: 50%;
}

/* .zensyoku */
.color_con {
    width: 100%;
    max-width: 980px;
    margin: 0 auto 120px;
    position: relative;
}

.color_con.soldout figure::after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background: url(../img/soldout.png) no-repeat center/contain;
    position: absolute;
    right: 20px;
    bottom: 20px;
    /* background-color: rgba(255,255,255,1); */
    border-radius: 50%;
    z-index: 99;
}

.link_kounyu {
    position: relative;
    padding: 0 20px 0 0;
}

.link_kounyu a {
    border-radius: 3px;
    color: #fff;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    max-width: 160px;
    margin: 10px 0 0 auto;
    font-size: 18px;
    font-weight: bold;
}

.link_kounyu::after {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
}
.zensyoku .link_kounyu a {
    background-color: #231815;
}
.tansai .link_kounyu a {
    background-color: #bdc0c0;
}
.nousai .link_kounyu a {
    background-color: #595757;
}
.tyu-sai .link_kounyu a {
    background-color: #7d7d7d;
}
.mono .link_kounyu a {
    background-color: #231815;
}
.blue .link_kounyu a {
    background-color: #43a1c3;
}
.green .link_kounyu a {
    background-color: #8eb57c;
}
.be-ju .link_kounyu a {
    background-color: #7f4f21;
}
.pink .link_kounyu a {
    background-color: #e61673;
}

/* .osusume */
.osusume_ttl  h2 {
    text-align:center;
    border-left:1px solid #000;
    border-right:1px solid #000;
    max-width:270px;
    margin: 0 auto 40px;
    padding:10px 20px;
    font-weight:bold;
}
.osusume_ttl span {
    display:block;
    font-size:1.2em;
    margin-top:10px;
    font-weight:bold;
}
.osusume_list {
    justify-content:center;
    align-items: stretch;
    gap:0 40px;
    max-width:980px;
    margin: 0 auto 100px;
}
.osusume_list .left,.osusume_list .right {
    justify-content:center;
    flex-wrap:wrap;
    align-items: flex-end;
    gap:0 10px;
}
.osusume_list .top_txt,.set_list .top_txt {
    width:100%;
    text-align: center;
    align-self:flex-start;
}
.osusume_list .top_txt p,.set_list .top_txt p {
    font-weight:bold;
    font-size: 20px;
}
.osusume_list .left .item {
    width:calc((100% - 20px) / 2);
    box-sizing: border-box;
}
.osusume_list .right .item {
    width:calc((100% - 60px) / 4);
    box-sizing: border-box;
}
.set_list .item {
    width:calc((100% - 20px) / 2);
    box-sizing: border-box;
    max-width: 240px;
}
.set_list .set {
    width:100%;
    max-width: 700px;
    padding: 0 10px;
    box-sizing: border-box;
}
.osusume_list .item figure,.set_list .item figure {
    text-align: center;
    margin-bottom:20px;
}
.osusume_list .item p,.set_list .item p {
    text-align: center;
}
.osusume_list .item a,.set_list .item a {
    display: inline-block;
    margin:auto;
    text-align:center;
    background:#000;
    color:#fff;
    border-radius:5px;
    padding: 5px 10px;
}

.set_list {
    width:100%;
    max-width:980px;
    justify-content:center;
    align-items:flex-start;
    margin:0 auto 100px;
    flex-wrap:wrap;
    gap:20px;
}

/* footer */
footer {
    text-align: center;
    padding-bottom: 20px;
}

footer ul {
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

footer a {
    display: block;
    box-sizing: border-box;
    width: 43px;
    height: 43px;
    border-radius: 3px;
    transition: 0.3s;
}

footer a:hover {
    opacity: 0.3;
}

footer .link_fb {
    background: url(../img/icon_fb.png) no-repeat center/contain;
}

footer .link_ig {
    margin-right: 30px;
    background: url(../img/icon_ig.png) no-repeat center/contain;
}

footer .link_yt {
    background: url(../img/icon_yt.png) no-repeat center/contain;
    margin-right: 30px;
}

footer .foo_text {
    font-size: 12px;
    margin-bottom: 10px;
    color: #727171;
}

footer .last_text {
    font-size: 10px;
    color: #727171;
}

footer .nho_t {
    font-size: 12px;
    margin: 30px 0 10px;
    color: #727171;
}

footer .nho_link a {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 34px;
    max-width: 300px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

footer .pw_link a {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 58px;
    max-width: 240px;
    margin: 0 auto 40px;
    padding: 0 10px;
}

/* topへ */
#page_top {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 5px;
    bottom: 10px;
    opacity: 0.6;
    z-index: 900;
}

#page_top a {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #000;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

#page_top a::after {
    content: '';
    font-size: 13px;
    position: absolute;
    top: 35px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    color: #000;
}

.sp_on {
    display: none;
}

/*.sp_off {
  display:block;
}*/

/* youtube */
.youtube_wrap {
    width:100%;
    max-width:750px;
    margin:auto;
}
.youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .youtube iframe {
    width: 100%;
    height: 100%;
  }



@media screen and (min-width: 980px) {
    .header {
        height: 405px;
        padding: 0;

    }

    .list_wrap {
        height: 810px;
        padding-bottom: 0;
    }
}

/* サイズ別設定 */
@media screen and (max-width: 980px) {

}

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

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

@media screen and (max-width: 574px) {
    .setumei h2 {
        font-size: 22px;
    }
    .osusume_list {
        flex-wrap:wrap;
    }
    .osusume_list .left,.osusume_list .right {
        width:100%;
        margin:0 auto 40px;
        padding: 0 20px;
    }
    .osusume_list .right .item {
        width:calc((100% - 20px) / 2)
    }

}

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

@media screen and (max-width: 420px) {
    .flex {
        display: inherit;
    }
    .tokutyo li,.tokutyo figure,.osusume_list .left .item,.osusume_list .right .item,.set_list .item {
        width: 100%;
        max-width: 100%;
    }
    .tokutyo li,.set_list .item {
        margin-bottom:40px;
    }
    .tokutyo p {
        text-align: center;
    }
    .syousai .tokutyo_txt {
        margin:0 auto 20px;
    }
    .syousai dt {
        width:100%;
        text-align:center;
    }
    .syousai dd {
        width:100%;
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 40px;
    }
    .osusume_ttl {
        padding:0 20px;
        box-sizing: border-box;
    }

    figure {
        text-align: center;
    }

    figure img {
        width: 100%;
        max-width: 100%;
    }
    .osusume_list .left .item {
        margin-bottom:20px;
    }
    .osusume_list .left .item img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: 50% 100%;
    }

    .sp_on {
        display: block;
    }

    .sp_off {
        display: none;
    }
    footer .link_yt,footer .link_ig,footer .link_fb {
        margin: 0 auto 20px;
    }
}