@charset "utf-8";
html[lang="ja"] {
    margin: 0 !important;
}
body {
    font-size: 3.7vw;
    margin: 0;
    /* background: url(../img/bg-sp.jpg) no-repeat top center;
    background-size: cover; */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.nav__open {
    overflow: hidden;
}
.inner {
    width: 94%;
    margin: auto;
    position: relative;
}
.pc-only {
    display: none !important;
}
#wpadminbar {
    display: none !important;
}
/*
div[id*="anchor"] {
    padding: 60px 0 0 !important;
    margin: -60px 0 0 !important;
}
/* == parts ============================================== */
form.login_temp .box {
    margin: 10px 0;
    color: #fff;
}
form.login_temp input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}
form.login_temp label {
    display: inline-block;
    font-size: 115%;
    font-weight: 600;
    margin: 0 1vw 0 0;
    width: 25vw;
    box-sizing: border-box;
}
form.login_temp input[type="text"], form.login_temp input[type="password"] {
    background: #fff;
    color: #333;
    padding: 9px;
    width: calc(100% - 30vw);
}
form.login_temp input[type="submit"] {
    display: block;
    background: #fff;
    color: #000;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    padding: 10px 30px;
    margin: 5% auto 0;
}
/* == header ============================================== */
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 1000;
    background-color: transparent;
    transition: background 0.4s;
}
header.add_bg {
    background-color: rgba(255,255,255,0.8);
}
header .h-inner {
    padding: 0;
    overflow: hidden;
    line-height: 1;
}
header .h-logo {
    float: left;
    width: 120px;
    margin: 0 0 0 15px;
}
header .h-logo img {
    display: block;
    vertical-align: top;
    line-height: 1;
}
header #menu-trigger {
    position: absolute;
    right: 10px;
    top: 15px;
    width: 50px;
    height: 20px;
    z-index: 100;
    transition: all .5s;
    pointer-events: painted;
}
header #menu-trigger span {
    position: absolute;
    display: block;
    width: 60%;
    height: 2px;
    background: #333;
    border-radius: 3px;
    margin: auto;
    left: 0;
    right: 0;
    transition: all .5s;
}
header #menu-trigger span:nth-child(1) {
    top: 0;
}
header #menu-trigger span:nth-child(2) {
    top: 0;
    bottom: 0;
}
header #menu-trigger span:nth-child(3) {
    bottom: 0;
}
body.nav__open header #menu-trigger {
    transform: rotate(360deg);
}
body.nav__open header #menu-trigger span:nth-child(1) {
    transform: translateY(9px) rotate(-45deg);
}
body.nav__open header #menu-trigger span:nth-child(2) {
    transform: translateY(0) rotate(45deg);
}
body.nav__open header #menu-trigger span:nth-child(3) {
    opacity: 0;
}
header nav {
    position: absolute;
        width: 100%;
    top: 50px;
    right: -110%;
    background: #333;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    padding: 0 0 40px;
    overflow-y: scroll;
    transition: all .5s;
}
body.nav__open header nav {
    right: 0;
}
header .list_main-nav {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}
header .list_main-nav li {
    position: relative;
    border-bottom: dashed 1px #fff;
}
header .list_main-nav a {
    position: relative;
    display: block;
    padding: 4% 0 4% 10%;
    color: #fff;
    font-weight: 600;
    font-size: 115%;
}
header .list_main-nav a::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #fff;
    position: absolute;
    left: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
}
header .list_main-nav li.soon::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .9);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transition: .5s;
    pointer-events: none;
    z-index: 5;
}
header .list_main-nav li.soon::after {
    content: 'Coming soon';
    position: absolute;
    color: #333;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 1;
    font-size: 90%;
    transition: .5s;
    pointer-events: none;
    z-index: 6;
}


/* == footer ============================================== */
footer {
    width: 100%;
    background-color: #fff;
    position: relative;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    padding-top: 8dvw;
}
footer a {
    width: 43%;
    display: block;
    line-height: 0;
}
footer a img {
    width: 100%;
}
footer .copyright {
    text-align: center;
    font-size: 88%;
    padding: 4.3dvw 0;
    color: #231815;
    text-shadow:  0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
/* == frontpage ==============================================*/
.block_top {
    padding: 1% 0;
    width: 90%;
    margin: 0 auto;
}
.block_top .top-title {
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 7% 0 2%;
}
.block_top .top-title img {
    vertical-align: top;
    display: block;
}
.block_point .area_login {
    padding: 8% 0 5%;
}
.block_point .area_login .end-text{
    text-align: center;
    font-size: 135%;
    font-weight: 700;
}
/*--------------------*/
.block_point .area_main {
    padding: 0 0 20px;
}
.block_point .area_main .point-info {
    text-align: right;
    font-weight: 600;
    margin: 50px 0;
}
.block_point .area_main .point-info .point-name {
    margin: 0 3% 0 0;
}
.block_point .area_main .point-info .point-counter {
    font-size: 120%;
    position: relative;
    padding: 0 3% 0 0;
    display: inline-block;
    line-height: 1.4;
}
.block_point .area_main .point-info .point-counter::before {
    content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    position: absolute;
    left: 0;
    bottom: 0;
}
.block_point .area_main .point-info .point-counter .number {
    font-size: 200%;
    padding: 0 10px;
}
.block_point .area_form {
    overflow: hidden;
}
.block_point .point-set {
    position: relative;
    margin: 50px 0;
}
.block_point .point-set::before, .block_point .point-set::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}
.block_point .point-set::before {
    top: -50px;
    border-width: 50px 100vw 0 0;
}
.block_point .point-set::after {
    bottom: -50px;
    border-width: 0 0 50px 100vw;
}
.block_point .point-set.set200 {
    background: #EF8A54;
}
.block_point .point-set.set200::before {
    border-color: transparent #EF8A54 transparent transparent;
}
.block_point .point-set.set200::after {
    border-color: transparent transparent transparent #EF8A54;
}
.block_point .point-set.set150 {
    background: #83B9E4;
}
.block_point .point-set.set150::before {
    border-color: transparent #83B9E4 transparent transparent;
}
.block_point .point-set.set150::after {
    border-color: transparent transparent transparent #83B9E4;
}
.block_point .point-set.set100 {
    background: #8DC21F;
}
.block_point .point-set.set100::before {
    border-color: transparent #8DC21F transparent transparent;
}
.block_point .point-set.set100::after {
    border-color: transparent transparent transparent #8DC21F;
}
.block_point .point-set.set50 {
    background: #FCD12B;
}
.block_point .point-set.set50::before {
    border-color: transparent #FCD12B transparent transparent;
}
.block_point .point-set.set50::after {
    border-color: transparent transparent transparent #FCD12B;
}
.block_point .point-set.set30 {
    background: #BBA9CE;
}
.block_point .point-set.set30::before {
    border-color: transparent #BBA9CE transparent transparent;
}
.block_point .point-set.set30::after {
    border-color: transparent transparent transparent #BBA9CE;
}
.block_point .point-set.set200 .point-ate,
.block_point .point-set.set150 .point-ate,
.block_point .point-set.set100 .point-ate {
    width: 60%;
    margin: 0 auto 10px;
}
.block_point .point-set.set50 .point-ate, .block_point .point-set.set30 .point-ate {
    width: 55%;
    margin: 0 auto 10px;
}
.list_point-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.list_point-item li {
    background: #fff;
    box-sizing: border-box;
    padding: 10px;
    width: 48%;
    margin: 1%;
}
.list_point-item li.none{
    opacity: .5;
    pointer-events: none;
}
.list_point-item li img {
    vertical-align: top;
}
.list_point-item label {
    display: block;
    cursor: pointer;
}
.list_point-item .thumbnail {
    margin: 0 0 10px;
    text-align: center;
}
.list_point-item .input-text {
    position: relative;
    padding: 0 0 0 1.5em;
    font-weight: 600;
}
.list_point-item .input-text input {
    position: absolute;
    left: .2em;
    top: .4em;
}
.list_point-item .tags {
    margin: 5px 0 0;
}
.list_point-item .tags span {
    display: inline-block;
    font-size: 88%;
    font-weight: 600;
    padding: 3px 10px;
    line-height: 1;
    color: #fff;
    margin: 0 5px 0 0;
}
.list_point-item .tags span.fridge {
    background: #036EB7;
}
.list_point-item .tags span.cold {
    background: #2ca6e0;
}
.list_point-item .tags span.limit {
    background: #e60012;
}
.list_point-item .input-number {
    margin: 8px 0 0;
    font-size: 88%;
    font-weight: 600;
}

.bg_img {
    position: absolute;
    z-index: 999;
}
.bg_img.bg_200_1 { top: -14%; right: 1%; height: 14vw; }
.bg_img.bg_200_2 { bottom: -12%; left: -1%; height: 17vw; }
.bg_img.bg_150_1 { top: -22%; right: 0; height: 13vw; }
.bg_img.bg_150_2 { bottom: -14%; left: 2%; height: 17vw; }
.bg_img.bg_100_1 { top: -18%; right: -1%; height: 19vw; }
.bg_img.bg_100_2 { bottom: 9%; right: -1%; height: 14vw; }
.bg_img.bg_100_3 { bottom: -5%; left: -3%; height: 12vw; }
.bg_img.bg_50_1 { top: -14%; right: -1%; height: 14vw; }
.bg_img.bg_50_2 { bottom: 11%; left: -1%; height: 13vw; }
.bg_img.bg_50_3 { bottom: -1%; right: 9%; height: 12vw; }
.bg_img.bg_30_1 { top: -11%; right: 1%; height: 13vw; }
.bg_img.bg_30_2 { bottom: 7%; left: 5%; height: 30vw; }
.bg_img.bg_30_3 { bottom: 0; right: 2%; height: 32vw; }

.block_point .area_submit {
    margin: 70px 0 30px;
}
.block_point .area_submit input {
    display: block;
    width: 250px;
    color: #fff;
    font-size: 200%;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 40px;
    border: none;
    background: #e8373d;
    padding: 10px 0;
    cursor: pointer;
}
.block_point .area_confirm .area_submit input {
    background: url("../img/point/submit.svg") no-repeat center;
    background-size: contain;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
}
.block_point .area_confirm {
    background: #fff;
    padding: 20px;
    margin: 30px 0;
}
.block_point .area_confirm .att-text {
    margin: 20px 0;
    font-size: 115%;
    text-align: center;
}
.block_point .area_confirm .confirm-name {
    position: relative;
    border-bottom: solid 1px #333;
}
.block_point .area_confirm .confirm-name h1 {
    font-size: 200%;
    font-weight: 600;
}
.block_point .area_confirm .confirm-name p {
    position: absolute;
    right: 0;
    top: 20px;
}
.block_point .list_point-selected {
    margin: 0 0 30px;
}
.list_point-selected li {
    overflow: hidden;
    padding: 20px 0;
    border-bottom: dashed 1px #333;
}
.list_point-selected .area_item {
    overflow: hidden;
}
.list_point-selected .area_item .item-thumbnail {
    text-align: center;
    margin: 0 0 10px;
}
.list_point-selected .area_item .item-thumbnail img {
    vertical-align: top;
}
.list_point-selected .area_item .item-name {
    position: relative;
    box-sizing: border-box;
    font-weight: 600;
}
.list_point-selected .area_item .item-name span {
    display: block;
    font-size: 125%;
}
.list_point-selected .area_form {
    margin: 15px 0 0;
    overflow: hidden;
}
.list_point-selected .area_form .input-box {
    float: left;
    font-size: 125%;
    margin: 5px 0 0;
}
.list_point-selected .area_form .point-text {
    display: inline-block;
    padding: 5px 30px;
    border: solid 1px #333;
    line-height: 1;
    float: right;
}
.list_point-selected .area_form .point-text span {
    font-size: 150%;
}
.list_point-selected .point-result .area_item p {
    color: #ff4500;
    font-size: 150%;
    font-weight: 600;
    margin: 0 0 10px;
}
.list_point-selected .point-result .area_form {
    margin: 0;
}
.list_point-selected .point-result .area_form .total-point {
    font-size: 115%;
    font-weight: 600;
}
.list_point-selected .point-result .area_form .result-data {
    font-size: 125%;
    font-weight: 600;
    color: #191970;
}
.block_point .btn_base {
    width: 250px;
    margin: auto;
    text-align: center;
    border: solid 1px navy;
}
.block_point .btn_base a {
    display: block;
    padding: 12px 0;
    background: navy;
    color: #fff;
    font-size: 150%;
    font-weight: 600;
}
.block_point .btn_base:hover {
    background: #fff;
}
.block_point .btn_base:hover aa {
    background: #fff;
}
.block_point .form-confirm {
    margin: 50px auto 0;
}
.block_point .form-confirm .point-form-text {
    text-align: center;
    margin: 0 0 20px;
}
.list_point-customer {
    margin: 0 0 20px;
}
.list_point-customer li {
    overflow: hidden;
    padding: 8px 0;
}
.list_point-customer .area_label {
    font-weight: 600;
    margin: 0 0 5px;
}
.list_point-customer .area_input input {
    width: 100%;
}
.block_point .form-confirm .point-form-att {
    font-size: 88%;
}
.block_point .area_thanks {
    margin: 60px auto 0;
    background: #fff;
    box-sizing: border-box;
    padding: 30px 15px;
    text-align: center;
}
.block_point .area_thanks .thanks-title {
    font-size: 125%;
    font-weight: 600;
    margin: 0 0 10px;
}
.block_point .area_thanks .thanks-text {
    font-weight: 600;
    margin: 0 0 20px;
}
/*--------------------
mypage
--------------------*/
#page_mypage {
    background: url(../img/point-bg.jpg) no-repeat center;
    background-size: cover;
    min-height: calc(100vh - 32px);
}
.block_mypage {
    padding: 150px 0 100px;
}
.block_mypage .mypage-title {
    width: 600px;
    margin: 0 auto 30px;
}
.block_mypage .white-base {
    background: #fff;
    padding: 50px;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
}
.block_mypage .point-time {
    text-align: right;
}
.block_mypage .info-box {
    margin: 0 0 40px;
}
.block_mypage .info-box .box-input {
    margin: 0 0 10px;
}
.block_mypage .info-box .box-input .text {
    font-size: 150%;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
}
.block_mypage .info-box .box-input .input {
    display: inline-block;
    vertical-align: middle;
    border: solid 1px #333;
    padding: 5px 10px 1px;
    margin: 0 10px 0 0;
    min-width: 250px;
    box-sizing: border-box;
    font-size: 125%;
    font-weight: 600;
}
.block_mypage .point-number {
    text-align: center;
    font-size: 125%;
    font-weight: 600;
    line-height: 1;
}
.block_mypage .point-number span {
    font-size: 500%;
    letter-spacing: 3px;
}
.block_mypage .mypage-att {
    margin: 30px auto 0;
    max-width: 1000px;
    color: #fff;
    font-size: 115%;
    font-weight: 600;
}

.login-input {
    padding: 0 4%;
    margin: auto;
    max-width: 450px;
}
.login-input .login-title {
    text-align: center;
    width: 100%;
    margin: 0 auto 10px;
}
.login-input .login-kotira {
    text-align: center;
    font-size: 150%;
    margin: 0 0 8%;
}
.login-input form input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.login-input form input[type="text"], .login-input form input[type="password"] {
    background: #fff;
    width: calc(100% - 7em);
    float: right;
    border: solid 1px #000;
}
.login-input .input-box {
    overflow: hidden;
    font-size: 18px;
    font-weight: 600;
    color: #231815;
    margin: 0 0 3%;
    text-shadow:  0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
.login-input input[type="button"], .login-input input[type="submit"] {
    display: block;
    background: #231815;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: 7px 30px;
    cursor: pointer;
    transition: all .2s;
    margin: 6% auto 0;
}

#mv_txt {
    max-width: 70%;
    margin: 20px auto 0;
    display: block;
}



/*==========================================
mov area
===========================================*/
#fv {
    display: none;
}


/*==========================================
main area
===========================================*/
#lp {
    width: 100dvw;
    position: relative;
    z-index: 2;
    background-color: #fff;
}