@charset "utf-8";

#primary {
    padding: 0;
}
#main {
    min-height:0;
}

#welcome section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif !important;
    line-height: 1;
    letter-spacing: 0;
}
#welcome {
    width: 100%;
    background: #000;
    color: #000;
}
#welcome section {
    width: min(100%, 750px);
    margin-inline: auto;
    padding: min(calc((50 / 750) * 100vw), 50px) min(calc((33 / 750) * 100vw), 33px) min(calc((100 / 750) * 100vw), 100px);
    background-color: #fff;
    line-break: strict;
}
#welcome img {
    border: none;
    vertical-align: bottom;
}
#welcome a {
    margin-inline: auto;
    text-decoration: none;
    transition: background 0.3s;
}
#welcome li {
    list-style: none;
}
#welcome .txt-en {
    font-size: 110%;
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W05 45 Light", sans-serif !important;
    line-height: 0.8;
}
#welcome .section-title {
    margin-bottom: min(calc((50 / 750) * 100vw), 50px);
    padding-block: min(calc((16 / 750) * 100vw), 16px);
    background: #000;
    color: #fff;
    font-size: min(calc((44 / 750) * 100vw), 44px);
    line-height: calc(48 / 44);
    text-align: center;
}
#welcome .section-sub-title {
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
    font-size: min(calc((36 / 750) * 100vw), 36px);
    line-height: calc(42 / 36);
    text-align: center;
}
#welcome .section-cont {
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
}
#welcome .section-cont p {
    font-size: min(calc((28 / 750) * 100vw), 28px);
    line-height: calc(40 / 28);
}
#welcome .section-img {
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
    text-align: center;
}
#welcome .disc-list li {
    position: relative;
    margin-bottom: min(calc((16 / 750) * 100vw), 16px);
    padding-left: 1em;
    font-size: min(calc((28 / 750) * 100vw), 28px);
    line-height: calc(40 / 28);
}
#welcome .disc-list li:last-of-type {
    margin-bottom: 0;
}
#welcome .disc-list li::before {
    position: absolute;
    left: 0;
    content: "・";
}
#welcome .notes li {
    position: relative;
    margin-bottom: min(calc((8 / 750) * 100vw), 8px);
    padding-left: 1em;
    font-size: min(calc((23 / 750) * 100vw), 23px);
    line-height: calc(28 / 23);
}
#welcome .notes li::before {
    position: absolute;
    left: 0;
    content: "＊";
}
#welcome .common-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: min(calc((500 / 750) * 100vw), 500px);
    margin-bottom: min(calc((20 / 750) * 100vw), 20px);
    padding-block: min(calc((26.5 / 750) * 100vw), 26.5px);
    border: 1px #000 solid;
    background: #fff;
    color: #000;
    font-size: min(calc((26 / 750) * 100vw), 26px);
    text-align: center;
    line-height: calc(31 / 26);
}
#welcome .common-btn.arrow::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: min(calc((23 / 750) * 100vw), 23px);
    transform: translateY(-50%) rotate(-90deg);
    font-size: min(calc((30 / 750) * 100vw), 30px);
    font-family: 'icomoon' !important;
    content:"\e904";
}
#welcome .common-btn.arrow.down::after {
    transform: translateY(-50%) rotate(0deg);
}
#welcome .common-btn:last-of-type {
    margin-bottom: 0;
}
@media screen and (min-width:751px) {
    #welcome .common-btn:hover {
        background:#000;
        color:#fff;
    }
}

/* .section-head */
#welcome .section-head {
    padding-block: min(calc((41.5 / 750) * 100vw), 41.5px);
    background-color: #000;
    color: #fff;
}
#welcome .section-head .head-txt {
    text-align: center;
}
#welcome .section-head h1 {
    margin-bottom: min(calc((24 / 750) * 100vw), 24px);
    font-size: min(calc((48 / 750) * 100vw), 48px);
    line-height: calc(68 / 48);
}
#welcome .section-head p {
    font-size: min(calc((30 / 750) * 100vw), 30px);
    line-height: calc(39 / 30);
}

/* .section-nav */
#welcome #section-nav .nav-box-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc((30 / 750) * 100vw), 30px);
    margin-bottom: min(calc((50 / 750) * 100vw), 50px);
}
#welcome #section-nav li {
    width: calc(50% - min(calc((15 / 750) * 100vw), 15px));
    height: min(calc((312 / 750) * 100vw), 312px);
    background-color: #000;
    transition: opacity .3s;
}
#welcome #section-nav li:hover {
    opacity: .8;
}
#welcome #section-nav li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-block: min(calc((30 / 750) * 100vw), 30px);
}
#welcome #section-nav li a::after {
    display: block;
    width: min(calc((138 / 750) * 100vw), 138px);
    height: min(calc((138 / 750) * 100vw), 138px);
    content: "";
}
#welcome #section-nav li:nth-of-type(1) a::after {
    background: url("nav-icon_postage.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li:nth-of-type(2) a::after {
    background: url("nav-icon_present.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li:nth-of-type(3) a::after {
    background: url("nav-icon_point.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li:nth-of-type(4) a::after {
    background: url("nav-icon_campaign.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li:nth-of-type(5) a::after {
    background: url("nav-icon_lip.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li:nth-of-type(6) a::after {
    background: url("nav-icon_rakuten.png")no-repeat 50% 50% / contain;
}
#welcome #section-nav li div {
    color: #fff;
    font-size: min(calc((28 / 750) * 100vw), 28px);
    text-align: center;
    line-height: calc(34 / 28);
}
#welcome #section-nav li div .note {
    display: block;
    margin-top: min(calc((6 / 750) * 100vw), 6px);
    font-size: min(calc((16 / 750) * 100vw), 16px);
    line-height: calc(20 / 16);
}

/* .section-first */
#welcome #section-first h3:last-of-type {
    padding-top: min(calc((50 / 750) * 100vw), 50px);
}
#welcome #section-first .section-img img {
    width: min(calc((294 / 750) * 100vw), 294px);
}
#welcome #section-first .notes {
    margin-block: min(calc((16 / 750) * 100vw), 16px) min(calc((30 / 750) * 100vw), 30px);
}
#welcome #section-first .kit-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc((50 / 750) * 100vw), 50px) min(calc((30 / 750) * 100vw), 30px);
}
#welcome #section-first .kit-wrap a {
    width: calc(50% - min(calc((15 / 750) * 100vw), 15px));
    margin-inline: 0;
    transition: opacity .3s;
}
#welcome #section-first .kit-wrap a:hover {
    opacity: .8;
}
#welcome #section-first .kit-wrap .kit-prod {
    margin-top: min(calc((24 / 750) * 100vw), 24px);
    font-size: min(calc((28 / 750) * 100vw), 28px);
    line-height: calc(38 / 28);
    text-align: center;
}

/* .section-step */
#welcome #section-step .section-cont p {
    margin-bottom:  min(calc((16 / 750) * 100vw), 16px);
}
#welcome #section-step .section-cont p:last-of-type {
    margin-bottom: 0;
}
#welcome #section-step .step-wrap .section-step-title {
    margin-block: min(calc((100 / 750) * 100vw), 100px) min(calc((50 / 750) * 100vw), 50px);
    padding-bottom: min(calc((22 / 750) * 100vw), 22px);
    border-bottom: 1px solid #000;
    font-size: min(calc((36 / 750) * 100vw), 36px);
}
#welcome #section-step .step-wrap .section-img.issist img {
    width: min(calc((438 / 750) * 100vw), 438px);
}
#welcome #section-step .step-wrap .section-img.seach img,
#welcome #section-step .step-wrap .section-img.order img,
#welcome #section-step .step-wrap .section-img.get img {
    width: min(calc((294 / 750) * 100vw), 294px);
}
#welcome #section-step .step-wrap img.pay {
    width: min(calc((512 / 750) * 100vw), 512px);
    margin-top: min(calc((16 / 750) * 100vw), 16px);
}
#welcome #section-step .step-wrap .section-cont {
    text-align: center;
}
#welcome #section-step .step-wrap h4 {
    margin-block: min(calc((80 / 750) * 100vw), 80px) min(calc((30 / 750) * 100vw), 30px);
    font-size: min(calc((34 / 750) * 100vw), 34px);
    text-align: center;
    line-height: calc(40 / 34);
}
#welcome #section-step .step-wrap .disc-list {
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
    text-align: left;
}
#welcome #section-step .step-wrap .disc-list a {
    text-decoration: underline;
}
#welcome #section-step .btn-wrap .common-btn .txt-en {
    line-height: calc(31 / 29);
}
/* .section-line */
#welcome #section-line {
    padding-bottom: min(calc((200 / 750) * 100vw), 200px);
}
#welcome #section-line .line-flow {
    margin-bottom: min(calc((50 / 750) * 100vw), 50px);
}
#welcome #section-line .line-flow h3 {
    margin-block: min(calc((50 / 750) * 100vw), 50px) min(calc((30 / 750) * 100vw), 30px);
    padding-left: 1em;
    font-size: min(calc((36 / 750) * 100vw), 36px);
    line-height: calc(48 / 36);
    text-indent: -1em;
}
#welcome #section-line .line-flow p {
    margin-bottom: min(calc((16 / 750) * 100vw), 16px);
    font-size: min(calc((28 / 750) * 100vw), 28px);
    line-height: calc(40 / 28);
}
#welcome #section-line .line-flow p:last-of-type {
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
}
#welcome #section-line .line-flow a {
    display: inline-block;
    margin-bottom: min(calc((30 / 750) * 100vw), 30px);
    transition: opacity .3s;
}
#welcome #section-line .line-flow a:hover {
    opacity: .8;
}
#welcome #section-line .line-flow div {
    text-align: center;
}
#welcome #section-line .line-flow div.add img {
    width: min(calc((220 / 750) * 100vw), 220px);
}
#welcome #section-line .line-flow div.membership img {
    width: min(calc((350 / 750) * 100vw), 350px);
}
#welcome #section-line .common-btn {
    padding-block:  min(calc((24 / 750) * 100vw), 24px);
}