@charset "UTF-8"; /* ---------------------------------- PLAZA PASS ---------------------------------- */ .pane-contents .container { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;} .pane-contents .pane-main { width: 100%;} .pane-footer, #footer_top { margin-top: 0;} .for-sp { display: none;} #plaza_pass section { margin: 0 0 100px;} #plaza_pass .section-inner { max-width: 1000px; margin: 0 auto; position: relative;} #plaza_pass .design-title-frame { padding: 0; margin: 0 0 30px 0; text-align: center;} #plaza_pass .design-title-frame .eng { padding: 0; margin: 0 0 10px 0; border: none; text-align: center; font-size: 50px; font-weight: 600; font-family: "roc-grotesk", sans-serif; font-style: normal; letter-spacing: 0.05em; line-height: 1.0; color: #0047BA; display: block;} #plaza_pass .design-title-frame .jpn { font-size: 20px; font-weight: 600; text-align: center; line-height: 1.0; display: block;} #plaza_pass .pop-text { margin: 0 0 30px 0; font-size: 22px; font-weight: 600; text-align: center; color: #0047BA;} #plaza_pass .attention-wrap .ttl { margin: 0 0 10px 0; font-size: 16px;} #plaza_pass .attention-wrap .indent-list li { padding: 0 0 0 1em; margin: 0 0 5px 0; text-indent: -1em; font-size: 16px;} #plaza_pass .attention-wrap .indent-list li a { text-decoration: underline; color: #0047BA;} #plaza_pass #sec_plazapass_main .section-inner { max-width: 1200px; margin: 0 auto;} #plaza_pass #sec_plazapass_main .image img { width: 100%;} #plaza_pass #sec_plazapass_main .buttons { width: 620px; display: flex; justify-content: space-between; position: absolute; bottom: 0; left: calc(50% - 310px);} #plaza_pass #sec_plazapass_main .buttons p { width: calc(50% - 10px);} #plaza_pass #sec_plazapass_main .buttons p a { width: 100%; height: 45px; border: #0047BA 2px solid; border-radius: 45px; font-size: 15px; font-weight: 600; text-decoration: none; display: flex; justify-content: center; align-items: center; color: #fff; background: #0047BA; transition: 0.3s;} #plaza_pass #sec_plazapass_main .buttons p a:hover { opacity: 0.7;} #plaza_pass #sec_plazapass_navi { padding: 40px 0; background: #E9EEF0;} #plaza_pass #sec_plazapass_navi ul { display: flex; justify-content: center; gap: 20px;} #plaza_pass #sec_plazapass_navi ul li { width: calc((100% - 60px) / 4); height: 45px;} #plaza_pass #sec_plazapass_navi ul li a { width: 100%; height: 45px; border: #0047BA 2px solid; border-radius: 45px; font-size: 15px; font-weight: 600; text-decoration: none; display: flex; justify-content: center; align-items: center; color: #0047BA; background: #fff; transition: 0.3s;} #plaza_pass #sec_plazapass_navi ul li a:hover { color: #fff; background: #0047BA;} #plaza_pass #sec_plazapass_point .plazapass-point-image { max-width: 670px; margin: 0 auto 30px;} #plaza_pass #sec_plazapass_point ul.head { margin: 0 0 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 40px;} #plaza_pass #sec_plazapass_point ul.head li.store { width: 24%;} #plaza_pass #sec_plazapass_point ul.head li.voice { width: calc(59% - 40px);} #plaza_pass #sec_plazapass_point ul.head li.phone { width: 17%;} #plaza_pass #sec_plazapass_point ul.head li.voice p { height: 40px; border-radius: 10px; font-size: 18px; font-weight: 600; color: #fff; background: #0047BA; display: flex; justify-content: center; align-items: center; position: relative;} #plaza_pass #sec_plazapass_point ul.head li.voice p + p { margin-top: 25px;} #plaza_pass #sec_plazapass_point ul.head li.voice p::after { content: ''; width: 0px; height: 0px; border-width: 18px 7px 0 7px; border-color: #0047BA transparent transparent transparent; border-style: solid; position: absolute; left: -12px; bottom: 5px; z-index: 1; transform: rotate(70deg);} #plaza_pass #sec_plazapass_point ul.head li.voice p + p::after { left: unset; right: -12px; transform: rotate(-70deg);} #plaza_pass #sec_plazapass_point ul.howto { display: flex; justify-content: space-between; align-items: center;} #plaza_pass #sec_plazapass_point ul.howto li { width: calc(50% - 15px); padding: 0 0 20px 0; border: #E9EEF0 1px solid; font-size: 18px; font-weight: 600; text-align: center; color: #FF0091;} #plaza_pass #sec_plazapass_point ul.howto li .flow { margin: 0 0 15px 0; font-size: 50px; font-weight: 600; color: #FF0091; display: flex; justify-content: center; align-items: center;} #plaza_pass #sec_plazapass_point ul.howto li .flow .arrow { margin: 0 20px; font-size: 0;} #plaza_pass #sec_plazapass_point ul.howto li .flow .arrow::after { content: ''; width: 0px; height: 0px; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #FF0091; border-style: solid;} #plaza_pass #sec_plazapass_point ul.howto li .flow .equal { margin: 0 20px; font-size: 40px;} #plaza_pass #sec_plazapass_point ul.howto li .flow .icon-point { width: 82px; height: 82px; background: url("../../../img/usr/card/point_bg.png") center center / cover no-repeat; font-size: 40px; color: #fff; display: flex; justify-content: center; align-items: center;} #plaza_pass #sec_plazapass_point ul.howto li .ttl { width: 100%; height: 42px; margin: 0 0 30px 0; font-size: 18px; font-weight: 600; color: #0047BA; display: flex; justify-content: center; align-items: center; background: #E9EEF0; position: relative;} #plaza_pass #sec_plazapass_point ul.howto li .ttl::after { content: ''; width: 0px; height: 0px; border-width: 12px 7px 0 7px; border-color: #E9EEF0 transparent transparent transparent; border-style: solid; position: absolute; bottom: -12px; left: calc(50% - 6px); z-index: 1;} #plaza_pass #sec_plazapass_point ul.howto li .tax { font-size: 12px; font-weight: 400; color: #FF0091;} #plaza_pass #sec_plazapass_stage .table-wrap { margin: 0 0 20px 0; position: relative;} #plaza_pass #sec_plazapass_stage table { width: 100%; border: #DFE4E6 1px solid; border-collapse: collapse;} #plaza_pass #sec_plazapass_stage table th { padding: 18px; border: #DFE4E6 1px solid; border-collapse: collapse; background: #E9EEF0; font-size: 22px; font-weight: 600; text-align: center; vertical-align: middle;} #plaza_pass #sec_plazapass_stage table th .memo { font-size: 14px; font-weight: 400; text-align: center;} #plaza_pass #sec_plazapass_stage table td { padding: 18px; border: #DFE4E6 1px solid; border-collapse: collapse; background: #fff; font-size: 22px; font-weight: 600; text-align: center; vertical-align: middle;} #plaza_pass #sec_plazapass_stage table td .eng { padding: 0; margin: 0 0 5px 0; text-align: center; font-size: 28px; font-weight: 600; font-family: "roc-grotesk", sans-serif; font-style: normal; line-height: 1.0; display: block;} #plaza_pass #sec_plazapass_stage table td .jpn { padding: 0; margin: 0; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.0; display: block;} #plaza_pass #sec_plazapass_stage table td.bronze, #plaza_pass #sec_plazapass_stage table td.bronze * { color: #9D4E0A;} #plaza_pass #sec_plazapass_stage table td.silver, #plaza_pass #sec_plazapass_stage table td.silver * { color: #898F93;} #plaza_pass #sec_plazapass_stage table td.gold, #plaza_pass #sec_plazapass_stage table td.gold * { color: #BA8F00;} #plaza_pass #sec_plazapass_stage table tr.point td { font-size: 32px; font-weight: 600;} #plaza_pass #sec_plazapass_member .benefits-list { margin: 0 0 30px 0; display: flex; justify-content: space-between; gap: 8px;} #plaza_pass #sec_plazapass_member .benefits-list li { width: calc((100% - (8px * 5))/6); padding: 20px 0 10px; text-align: center; background: #E9EEF0; position: relative; color: #0047BA;} #plaza_pass #sec_plazapass_member .benefits-list li .number { width: 40px; height: 36px; padding: 6px 0 0 0; font-size: 20px; font-weight: 600; text-align: center; color: #fff; background: #0047BA; position: absolute; left: -5px; top: -5px;} #plaza_pass #sec_plazapass_member .benefits-list li .number::after { content: ''; width: 0px; height: 0px; border-width: 0 20px 7px 20px; border-color: transparent #0047BA transparent #0047BA; border-style: solid; position: absolute; bottom: -7px; left: 0; z-index: 1;} #plaza_pass #sec_plazapass_member .benefits-list li .title { height: 60px; margin: 0 0 5px 0; font-size: 12px; font-weight: 600; color: #0047BA; display: flex; justify-content: center; align-items: center;} #plaza_pass #sec_plazapass_member .benefits-list li .icon { width: 70px; height: 70px; margin: 0 auto 5px; position: relative;} #plaza_pass #sec_plazapass_member .benefits-list li .icon .num { width: 70px; height: 70px; font-size: 26px; font-weight: 600; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;} #plaza_pass #sec_plazapass_member .benefits-list li .icon .num.small { font-size: 22px; font-weight: 600;} #plaza_pass #sec_plazapass_member .benefits-list li .intro { height: 60px; font-size: 10px; font-weight: 600; color: #0047BA; display: flex; justify-content: center; align-items: center;} #plaza_pass #sec_plazapass_app { padding: 100px 0; margin: 0; background: #E9EEF0;} #plaza_pass #sec_plazapass_app ul.app-point > li { margin: 0 0 30px 0; display: flex; justify-content: center; gap: 40px;} #plaza_pass #sec_plazapass_app ul.app-point > li:nth-child(odd) { flex-direction: row-reverse;} #plaza_pass #sec_plazapass_app ul.app-point > li .image { width: 223px;} #plaza_pass #sec_plazapass_app .desc { padding: 36px 0 0 0; position: relative;} #plaza_pass #sec_plazapass_app .title { margin: 0 0 20px 0; line-height: 2.0;} #plaza_pass #sec_plazapass_app .title p { font-size: 22px; font-weight: 600;} #plaza_pass #sec_plazapass_app .title p span[class^="line"] { margin: 5px 0 3px; border-bottom: #00A0E9 2px dashed; font-size: 22px; font-weight: 600; display: inline; background: #fff; position: relative;} #plaza_pass #sec_plazapass_app .title p span.line01::after, #plaza_pass #sec_plazapass_app .point01 .title p span.line02::after { content: ''; width: 32px; height: 32px; background: url("../../../img/usr/card/pop.png") center center / cover no-repeat; position: absolute; top: -23px; right: -32px; z-index: 1;} #plaza_pass #sec_plazapass_app .point01 .title p span.line01::after { display: none;} #plaza_pass #sec_plazapass_app .point01 .title p span.line02 { left: -6px;} #plaza_pass #sec_plazapass_app .title p span.color { color: #00A0E9;} #plaza_pass #sec_plazapass_app .point { width: 85px; height: 26px; padding: 0 0 0 10px; font-size: 16px; font-weight: 600; line-height: 1.0; color: #fff; background: #FF0091; display: flex; align-items: center; position: absolute; left: -10px; top: 0;} #plaza_pass #sec_plazapass_app .point::after { content: ''; width: 0px; height: 0px; border-width: 13px 7px 13px 0; border-color: #FF0091 transparent #FF0091 transparent; border-style: solid; position: absolute; top: 0; right: -7px; z-index: 1;} #plaza_pass #sec_plazapass_app .text p { font-size: 16px; font-weight: 400; line-height: 1.8;} #plaza_pass #sec_plazapass_app .app-image { width: 421px; margin: 0 auto 30px;} #plaza_pass #sec_plazapass_app .app-image ul { display: flex; justify-content: center; gap: 20px; align-items: center;} /* ---------------------------------- SP ---------------------------------- */ @media only screen and (max-width: 1000px) { .for-sp { display: block;} #plaza_pass .design-title-frame { margin: 0 0 20px 0;} #plaza_pass .design-title-frame .eng { font-size: 26px;} #plaza_pass .design-title-frame .jpn { font-size: 13px;} #plaza_pass .pop-text { margin: 0 0 20px 0; font-size: 16px;} #plaza_pass .attention-wrap { margin: 0 20px;} #plaza_pass .attention-wrap .ttl { font-size: 13px;} #plaza_pass .attention-wrap .indent-list li { font-size: 13px;} #plaza_pass section { margin: 0 0 60px;} #plaza_pass #sec_plazapass_main { margin-bottom: 0;} #plaza_pass #sec_plazapass_main .buttons { width: 80%; display: block; position: absolute; bottom: 8%; left: 10%;} #plaza_pass #sec_plazapass_main .buttons p { width: 100%;} #plaza_pass #sec_plazapass_main .buttons p + p { margin-top: 6%;} #plaza_pass #sec_plazapass_main .buttons p a { font-size: 14px;} #plaza_pass #sec_plazapass_navi { padding: 20px 20px 10px;} #plaza_pass #sec_plazapass_navi ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0;} #plaza_pass #sec_plazapass_navi ul li { width: calc(50% - 5px); margin: 0 0 10px 0;} #plaza_pass #sec_plazapass_navi ul li a { font-size: 12px;} #plaza_pass #sec_plazapass_point { padding: 0 20px;} #plaza_pass #sec_plazapass_point ul.head { margin: 0 0 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 40px;} #plaza_pass #sec_plazapass_point ul.head li.voice { width: calc(59% - 20px);} #plaza_pass #sec_plazapass_point ul.head li.voice p { height: 24px; font-size: 11px;} #plaza_pass #sec_plazapass_point ul.head li.voice p + p { margin-top: 15px;} #plaza_pass #sec_plazapass_point ul.head li.voice p::after { border-width: 16px 5px 0 5px; left: -6px; bottom: 2px;} #plaza_pass #sec_plazapass_point ul.head li.voice p + p::after { right: -6px;} #plaza_pass #sec_plazapass_point ul.howto li { width: calc(50% - 8px); padding: 0 0 15px 0; font-size: 12px;} #plaza_pass #sec_plazapass_point ul.howto li .flow { margin: 0 0 15px 0; font-size: 26px; color: #FF0091; display: flex; justify-content: center; align-items: center;} #plaza_pass #sec_plazapass_point ul.howto li .flow .arrow { margin: 0 10px; font-size: 0;} #plaza_pass #sec_plazapass_point ul.howto li .flow .arrow::after { border-width: 6px 0 6px 10px;} #plaza_pass #sec_plazapass_point ul.howto li .flow .equal { margin: 0 10px; font-size: 18px;} #plaza_pass #sec_plazapass_point ul.howto li .flow .icon-point { width: 60px; height: 60px; background: url("../../../img/usr/card/point_bg.png") center center / cover no-repeat; font-size: 30px;} #plaza_pass #sec_plazapass_point ul.howto li .ttl { width: 100%; height: 36px; margin: 0 0 20px 0; font-size: 14px;} #plaza_pass #sec_plazapass_point ul.howto li .ttl::after { border-width: 10px 5px 0 5px; bottom: -10px; left: calc(50% - 5px);} #plaza_pass #sec_plazapass_point ul.howto li .tax { font-size: 8px;} #plaza_pass #sec_plazapass_stage .table-wrap { padding: 0 10px 20px 10px; margin: 0 0 20px 0; position: relative;} #plaza_pass #sec_plazapass_stage table { width: 100%; border: #DFE4E6 1px solid; border-collapse: collapse;} #plaza_pass #sec_plazapass_stage table th { min-width: 31%; padding: 5px 3px; font-size: 14px; font-weight: 400;} #plaza_pass #sec_plazapass_stage table th .memo { font-size: 12px; font-weight: 400; text-align: left; position: absolute; left: 10px; bottom: 0;} #plaza_pass #sec_plazapass_stage table td { min-width: 23%; padding: 5px 3px; font-size: 14px;} #plaza_pass #sec_plazapass_stage table td .eng { margin: 0 0 2px 0; font-size: 17px;} #plaza_pass #sec_plazapass_stage table td .jpn { font-size: 14px;} #plaza_pass #sec_plazapass_stage table tr.point td { font-size: 24px;} #plaza_pass #sec_plazapass_stage table tr.point th::after { content: '※'; font-size: 8px;} #plaza_pass #sec_plazapass_member .benefits-list { margin: 0 20px 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0;} #plaza_pass #sec_plazapass_member .benefits-list li { width: calc(50% - 1px); padding: 20px 0 10px; margin-top: 30px;} #plaza_pass #sec_plazapass_member .benefits-list li .number { width: 60px; height: 24px; padding: 2px 0 0 0; line-height: 24px; left: calc(50% - 30px); top: -15px;} #plaza_pass #sec_plazapass_member .benefits-list li .number::after { border-width: 0 30px 5px 30px; bottom: -5px;} #plaza_pass #sec_plazapass_app { padding: 60px 15px; background: #E9EEF0;} #plaza_pass #sec_plazapass_app ul.app-point > li { gap: 0; justify-content: space-between;} #plaza_pass #sec_plazapass_app ul.app-point > li:nth-child(odd) { flex-direction: row;} #plaza_pass #sec_plazapass_app ul.app-point > li .image { width: 120px;} #plaza_pass #sec_plazapass_app .desc { width: calc(100% - 140px); padding: 28px 0 0 0; position: relative;} #plaza_pass #sec_plazapass_app .title { margin: 0 0 10px 0;} #plaza_pass #sec_plazapass_app .title p { font-size: 16px;} #plaza_pass #sec_plazapass_app .title p span[class^="line"] { font-size: 16px; position: relative;} #plaza_pass #sec_plazapass_app .title p span.line01::after { width: 20px; height: 20px; background: url("../../../img/usr/card/pop.png") center center / cover no-repeat; top: -18px; right: -20px; z-index: 1;} #plaza_pass #sec_plazapass_app .point01 .title p span.line02::after { display: none;} #plaza_pass #sec_plazapass_app .point01 .title p span.line01::after { display: block;} #plaza_pass #sec_plazapass_app .point01 .title p span.line02 { left: 0;} #plaza_pass #sec_plazapass_app .title p span.color { color: #00A0E9;} #plaza_pass #sec_plazapass_app .point { width: 65px; height: 18px; padding: 1px 0 0 7px; font-size: 12px; left: -5px;} #plaza_pass #sec_plazapass_app .point::after { border-width: 9px 5px 9px 0; right: -5px;} #plaza_pass #sec_plazapass_app .text p { font-size: 13px;} #plaza_pass #sec_plazapass_app .app-image { width: 100%; margin: 0 auto 30px;} #plaza_pass #sec_plazapass_app .app-image .photo { margin: 0 30px 20px; display: flex; justify-content: center; align-items: center; gap: 30px;} #plaza_pass #sec_plazapass_app .app-image .photo img { width: 50%;} #plaza_pass #sec_plazapass_app .app-image .photo img.for-sp { width: 30%;} #plaza_pass #sec_plazapass_app .app-image ul { padding: 0 15px; justify-content: space-between;} #plaza_pass #sec_plazapass_app .app-image ul li.icon01 { display: none;} }