@charset "UTF-8";
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break: break-all; }
*:focus { outline: 3px solid #953232; }

html { font-size: 62.5%; }
@media screen and (max-width: 750px) { html { font-size: 2.1111111111vw; } }
html.js-mobile.js-landscape { font-size: 50%; }

body { color: #1F1F1F; font-family: "BIZ UDGothic", YuGothicM, YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-size: 1.8rem; -webkit-text-size-adjust: 100%; }

li { list-style: none; }

img { max-width: 100%; vertical-align: bottom; }

video { max-width: 100%; }

a { color: #1F1F1F; }
a:hover { text-decoration: none; }

button { padding: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: 1.8rem; cursor: pointer; }

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="submit"], input[type="button"], textarea, select { font-family: inherit; font-size: 1.8rem; }

.only-pc { display: block; }
@media screen and (max-width: 750px) { .only-pc { display: none; } }

.only-sp { display: none; }
@media screen and (max-width: 750px) { .only-sp { display: block; } }

img.only-pc, span.only-pc { display: inline; }
@media screen and (max-width: 750px) { img.only-pc, span.only-pc { display: none; } }
img.only-sp, span.only-sp { display: none; }
@media screen and (max-width: 750px) { img.only-sp, span.only-sp { display: inline; } }

table.only-pc { display: table; }
@media screen and (max-width: 750px) { table.only-pc { display: none; } }
table.only-sp { display: none; }
@media screen and (max-width: 750px) { table.only-sp { display: table; } }

.js-tel { color: #000 !important; text-decoration: none; cursor: default; }

.pagetop { position: fixed; bottom: 30px; right: 10px; z-index: 9999; opacity: 0; transition: all .5s; transform: translateY(100px); width: 95px; }
@media screen and (max-width: 750px) { .pagetop { bottom: 50px; width: 7rem; } }
.pagetop.is-show { opacity: 1; transform: translateY(0); }

.inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; line-height: 1.7; }
@media screen and (max-width: 750px) { .inner { padding: 0 4.6666666667%; } }

.contents { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }

.contents_s { width: 100%; max-width: 900px; margin: 0 auto; }

.all-wrapper { background-color: #fff; }

/* ------------------------------ ヘッダー
------------------------------ */
.header-jump { position: fixed; z-index: 999999; }
.header-jump a { position: absolute; top: 0; left: -1000px; display: block; padding: 0.5rem 1rem; background-color: #e5f2fc; white-space: nowrap; }
.header-jump a:focus { left: 0; }

.header { z-index: 99999; position: sticky; top: 0; left: 0; width: 100%; background-color: #e5f2fc; }
.header .header-main { display: flex; align-items: center; justify-content: space-between; min-height: 100px; padding: 0 25px 0 40px; }
@media screen and (max-width: 1300px) { .header .header-main { padding: 0 20px; } }
@media screen and (max-width: 1100px) { .header .header-main { align-items: flex-start; min-height: 80px; padding-right: 0; } }
@media screen and (max-width: 960px) { .header .header-main { min-height: 80px; } }
@media screen and (max-width: 750px) { .header .header-main { padding-left: 4.6666666667%; } }
.header .header-main .header-logo { width: 323px; margin-right: 20px; }
@media screen and (max-width: 1100px) { .header .header-main .header-logo { display: flex; align-items: center; justify-content: flex-start; width: 502px; min-height: 80px; }
  .header .header-main .header-logo img { width: 502px; } }
@media screen and (max-width: 750px) { .header .header-main .header-logo { width: 264px; margin-right: 10px; }
  .header .header-main .header-logo img { width: 264px; } }
@media screen and (max-width: 1100px) { .header .header-main .header-logo .logo_pc { display: none; } }
.header .header-main .header-logo .logo_sp { display: none; }
@media screen and (max-width: 1100px) { .header .header-main .header-logo .logo_sp { display: block; } }
.header .header-main .header-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
@media screen and (max-width: 1100px) { .header .header-main .header-nav { height: 100%; } }
.header .header-main .header-nav .gnav { display: flex; align-items: flex-end; justify-content: flex-end; margin-right: 17px; }
@media screen and (max-width: 1300px) { .header .header-main .header-nav .gnav { margin-right: 5px; } }
@media screen and (max-width: 1100px) { .header .header-main .header-nav .gnav { display: none; } }
.header .header-main .header-nav .gnav li:nth-child(2) figure, .header .header-main .header-nav .gnav li:nth-child(4) figure, .header .header-main .header-nav .gnav li:nth-child(6) figure { margin-bottom: 4px; }
.header .header-main .header-nav .gnav li:nth-child(6) a { padding-left: 10px; }
.header .header-main .header-nav .gnav li:last-child figure { margin-bottom: 4px; }
.header .header-main .header-nav .gnav li:last-child a { color: #BA1C39; padding-bottom: 0; }
.header .header-main .header-nav .gnav li a { display: block; text-decoration: none; padding: 0 17px 0.5em; font-size: 1.6rem; color: #004ba3; text-align: center; transition: all .6s; }
@media screen and (max-width: 1300px) { .header .header-main .header-nav .gnav li a { padding-left: 10px; padding-right: 10px; } }
@media screen and (max-width: 1200px) { .header .header-main .header-nav .gnav li a { padding-left: 5px; padding-right: 5px; } }
.header .header-main .header-nav .gnav li a:hover { opacity: 0.7; }
.header .header-main .header-nav .gnav li figure { margin-bottom: 12px; }
.header .header-main .header-nav .gnav li p { line-height: 1.1; }
.header .header-main .header-nav .header-link { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 5px; width: 21.8rem; }
@media screen and (max-width: 960px) { .header .header-main .header-nav .header-link { display: none; } }
.header .header-main .header-nav .header-link li a { text-decoration: none; }
.header .header-main .header-nav .header-link li ._btn { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 2.5em; font-size: 1.6rem; border-radius: 2em; }
.header .header-main .header-nav .header-link li button._btn { font-size: 1.6rem; line-height: 1; transition: all .6s; }
.header .header-main .header-nav .header-link li button._btn:hover { opacity: 0.7; }
.header .header-main .header-nav .header-link li._nickname { width: 100%; }
.header .header-main .header-nav .header-link li._nickname ._btn { align-items: initial; padding: 3px 8px; border: 2px solid #004ba3; background-color: #fff; }
.header .header-main .header-nav .header-link li._nickname ._mypagelabel { display: flex; align-items: center; margin-right: 5px; padding-right: 5px; border-right: 1px solid #004ba3; color: #004ba3; font-size: 1.4rem; }
.header .header-main .header-nav .header-link li._nickname ._icon { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; min-height: 30px; padding-left: 30px; background: url("../img/common/ico_icon.svg") no-repeat left center; background-size: 30px auto; }
.header .header-main .header-nav .header-link li._nickname ._icon p { width: 5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: center; }
.header .header-main .header-nav .header-link li._nickname ._icon p._label { width: 100%; font-size: 1.2rem; }
.header .header-main .header-nav .header-link li._login { position: relative; width: 10.7rem; }
.header .header-main .header-nav .header-link li._login ._btn { padding: 0 10px; border: 2px solid #fff; color: #fff; text-align: center; }
.header .header-main .header-nav .header-link li._login .modal-link-login, .header .header-main .header-nav .header-link li._login a { background-color: #004ba3; }
.header .header-main .header-nav .header-link li._login .modal-link-register { background-color: #D62A41; }
.header .header-main .header-nav .header-link li._login ._link { margin-top: 5px; text-align: center; }
.header .header-main .header-nav .header-link li._login ._link button { font-size: 1.6rem; line-height: 1; text-decoration: underline; }
.header .header-main .header-nav .header-link._logined li._login { width: 100%; }
.header .header-main .header-nav .header-menu { display: none; position: relative; width: 80px; min-height: 100px; margin-left: 15px; cursor: pointer; }
@media screen and (max-width: 1100px) { .header .header-main .header-nav .header-menu { display: block; } }
@media screen and (max-width: 1200px) { .header .header-main .header-nav .header-menu { margin-left: 10px; } }
@media screen and (max-width: 960px) { .header .header-main .header-nav .header-menu { min-height: 80px; margin-left: 0; } }
.header .header-main .header-nav .header-menu img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.header.js-fixed { animation-name: slide; }
.header.js-fixed .header-main { padding-right: 0; min-height: 80px; }
@media screen and (max-width: 750px) { .header.js-fixed .header-main { padding-left: 4.6666666667%; } }
.header.js-fixed .header-main .header-logo { display: flex; align-items: center; justify-content: flex-start; width: 505px; height: 100%; }
.header.js-fixed .header-main .header-logo img { width: 505px; }
@media screen and (max-width: 750px) { .header.js-fixed .header-main .header-logo { width: 264px; margin-right: 10px; }
  .header.js-fixed .header-main .header-logo img { width: 264px; } }
.header.js-fixed .header-main .header-logo .logo_pc { display: none; }
.header.js-fixed .header-main .header-logo .logo_sp { display: block; }
.header.js-fixed .header-main .header-nav { height: 100%; }
.header.js-fixed .header-main .header-nav .gnav { display: none; }
@media screen and (max-width: 960px) { .header.js-fixed .header-main .header-nav .header-link { display: none; } }
.header.js-fixed .header-main .header-nav .header-menu { display: block; width: 80px; height: 100%; cursor: pointer; }

.nav-menu { z-index: 999991; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #004ba3 url("../img/common/menu_bg001.png") no-repeat left top; background-size: cover; }
@media screen and (max-width: 750px) { .nav-menu { background-image: none; } }
.nav-menu .nav-menu-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; line-height: 1.6; }
.nav-menu .nav-close { position: absolute; top: 0; right: 0; width: 80px; cursor: pointer; }
@media screen and (max-width: 750px) { .nav-menu .nav-close { width: 80px; } }
.nav-menu .nav-menu-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 65px 20px; line-height: 1.6; }
@media screen and (max-width: 960px) { .nav-menu .nav-menu-inner { padding-top: 100px; } }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-inner { padding: 0 0 6.6666666667%; } }
.nav-menu .nav-menu-box { width: 100%; max-width: 1000px; margin: 0 auto; }
.nav-menu a { display: block; text-decoration: none; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-bg { padding-top: 6.6666666667%; background: url("../img/common/menu_sp.png") no-repeat left top; background-size: cover; } }
.nav-menu .nav-menu-logo { width: 331px; margin: 0 auto; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-logo { width: 50.4%; margin-bottom: 5.3333333333%; } }
.nav-menu .nav-menu-top { position: relative; margin-bottom: 30px; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-top { margin-bottom: 6%; padding: 0 6.6666666667%; } }
.nav-menu .nav-menu-top .nav-menu-home { position: absolute; left: 0; bottom: 0; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-top .nav-menu-home { position: static; } }
.nav-menu .nav-menu-top .nav-menu-home a { display: flex; align-items: center; }
.nav-menu .nav-menu-top .nav-menu-home a .ico { width: 1.6em; margin-right: 10px; }
.nav-menu .nav-menu-top .nav-menu-home a span { font-size: 2.2rem; color: #fff; }
.nav-menu .nav-link { position: absolute; top: 0; right: 0; z-index: 100; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 5px; width: 21.8rem; margin-top: 8px; margin-right: 95px; }
@media screen and (max-width: 750px) { .nav-menu .nav-link { position: static; flex-wrap: nowrap; width: 100%; margin: 0 auto; padding: 0 4% 5.3333333333%; column-gap: 2.8985507246%; } }
.nav-menu .nav-link li ._btn { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 2.5em; font-size: 1.6rem; border-radius: 2em; transition: all .6s; line-height: 1; }
.nav-menu .nav-link li button._btn { font-size: 1.6rem; line-height: 1; text-decoration: none; }
.nav-menu .nav-link li button._btn:hover { opacity: 0.7; }
.nav-menu .nav-link li._nickname { width: 100%; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname { flex: 1; } }
.nav-menu .nav-link li._nickname ._btn { align-items: initial; padding: 3px 8px; border: 2px solid #004ba3; background-color: #fff; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname ._btn { padding-left: 1rem; padding-right: 1rem; border-color: #fff; } }
.nav-menu .nav-link li._nickname ._btn ._mypagelabel { display: flex; align-items: center; margin-right: 5px; padding-right: 5px; border-right: 1px solid #004ba3; color: #004ba3; font-size: 1.4rem; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname ._btn ._mypagelabel { margin-right: 1rem; padding-right: 1rem; } }
.nav-menu .nav-link li._nickname ._btn ._icon { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; min-height: 30px; padding-left: 30px; background: url("../img/common/ico_icon.svg") no-repeat left center; background-size: 30px auto; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname ._btn ._icon { padding-left: 35px; } }
.nav-menu .nav-link li._nickname ._btn ._icon p { width: 5em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: center; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname ._btn ._icon p { width: 100%; } }
.nav-menu .nav-link li._nickname ._btn ._icon p._label { width: 100%; font-size: 1.2rem; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._nickname ._btn ._icon p._label { width: auto; } }
.nav-menu .nav-link li._login { position: relative; width: 10.7rem; }
@media screen and (max-width: 750px) { .nav-menu .nav-link li._login { width: 12rem; } }
.nav-menu .nav-link li._login ._btn { padding: 0 10px; border: 2px solid #fff; color: #fff; text-align: center; }
.nav-menu .nav-link li._login .modal-link-login, .nav-menu .nav-link li._login a { background-color: #004ba3; }
.nav-menu .nav-link li._login .modal-link-register { background-color: #D62A41; }
.nav-menu .nav-link li._login ._link { margin-top: 5px; line-height: 1; text-align: center; }
.nav-menu .nav-link li._login ._link button { color: #fff; font-size: 1.6rem; line-height: 1; text-decoration: underline; }
.nav-menu .nav-link._logined li._login { width: 100%; }
@media screen and (max-width: 750px) { .nav-menu .nav-link._logined li._login { width: 12rem; } }
.nav-menu .nav-menu-list { display: flex; flex-wrap: wrap; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-list { padding: 0 4.6666666667%; border-bottom: 1px solid #80a5d1; } }
.nav-menu .nav-menu-list._list01 { margin-bottom: 6.6666666667%; padding-top: 5.3333333333%; padding-bottom: 2.6666666667%; border-top: 1px solid #80a5d1; border-bottom: 1px solid #80a5d1; }
.nav-menu .nav-menu-list li { width: 19.2%; margin-right: 1%; margin-bottom: 3.5%; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-list li { width: 47.0588235294%; margin-right: 5.8823529412%; margin-bottom: 5.8823529412%; }
  .nav-menu .nav-menu-list li:nth-child(5) { margin-right: 5.8823529412% !important; }
  .nav-menu .nav-menu-list li:nth-child(2n) { margin-right: 0; } }
.nav-menu .nav-menu-list li:nth-child(5n) { margin-right: 0; }
.nav-menu .nav-menu-list li:last-child { margin-right: 0; }
.nav-menu .nav-menu-item { display: flex; justify-content: space-between; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-item { display: block; } }
.nav-menu .nav-menu-item p { width: 9em; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-item p { width: 100%; margin-bottom: 9.3333333333%; border-bottom: 1px solid #80a5d1; } }
.nav-menu .nav-menu-item p a { display: block; text-decoration: none; padding: 10px 1.2em 10px 2em; background: #fff url("../img/common/ico_news.svg") no-repeat left 15px center; background-size: 24px auto; text-align: center; color: #004ba3; border-radius: 2em; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-item p a { padding: 5.3333333333% 16%; background: #004ba3 url("../img/common/ico_news_w.svg") no-repeat left 6% center; background-size: 5.6% auto; border-radius: 0; font-size: 2.0rem; color: #fff; text-align: left; } }
.nav-menu .nav-menu-item ul { display: flex; align-items: center; justify-content: flex-end; }
@media screen and (max-width: 750px) { .nav-menu .nav-menu-item ul { justify-content: center; } }
.nav-menu .nav-menu-item ul li { margin-left: 30px; }
.nav-menu .nav-menu-item ul li:first-child { margin-left: 0; }
.nav-menu .nav-menu-item ul li a { text-decoration: underline; color: #fff; }
.nav-menu .nav-menu-item ul li a:hover { text-decoration: none; }

.js-menuopen { background-color: #004ba3 !important; overflow: hidden; }
.js-menuopen .nav-menu { display: block; }

/* ------------------------------ ぱんくず
------------------------------ */
.topicpath ol { display: flex; flex-wrap: wrap; padding: 10px 30px; background-color: #f1f6fd; font-size: 1.6rem; line-height: 1.6; }
@media screen and (max-width: 750px) { .topicpath ol { padding: 10px 4.6666666667%; } }
.topicpath ol li::after { content: '/'; margin: 0 0.2em; }
.topicpath ol li:last-child::after { display: none; }
.topicpath ol li a { text-decoration: none; }
.topicpath ol li a:hover { text-decoration: underline; }

/* ------------------------------ ページタイトル
------------------------------ */
.pagettl-sec { padding: 50px 0; background-color: #fff; font-size: 3.3rem; font-weight: 700; color: #004ba3; text-align: center; }
@media screen and (max-width: 750px) { .pagettl-sec { font-size: 2.8rem; } }

/* ------------------------------ フッター
------------------------------ */
.footer .footer-in { padding: 20px 0; background-color: #66d7fc; }
.footer .footer-con { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media screen and (max-width: 750px) { .footer .footer-con { display: block; padding: 0 4.6666666667%; } }
.footer .footer-logo { width: 262px; }
@media screen and (max-width: 750px) { .footer .footer-logo { margin: 0 auto 30px; } }
.footer .footer-box { flex: 1; }
@media screen and (max-width: 1400px) { .footer .footer-box { padding-right: 100px; } }
@media screen and (max-width: 750px) { .footer .footer-box { padding-right: 0; } }
.footer .footer-box .footer-txt { margin-bottom: 10px; font-size: 1.6rem; line-height: 1.4; text-align: right; }
@media screen and (max-width: 750px) { .footer .footer-box .footer-txt { font-size: 1.4rem; text-align: center; } }
.footer .footer-box .footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 10px; font-size: 1.6rem; }
@media screen and (max-width: 750px) { .footer .footer-box .footer-nav { justify-content: center; font-size: 1.4rem; } }
.footer .footer-box .footer-nav li { margin-left: 15px; text-align: center; line-height: 1.6; }
@media screen and (max-width: 750px) { .footer .footer-box .footer-nav li { margin: 0 10px; } }
@media screen and (max-width: 750px) { .footer .footer-box .footer-nav li:last-child { width: 100%; } }
.footer .footer-box .footer-nav li::before { content: '›'; display: inline; margin-right: 0.5em; }
.footer .footer-box .footer-nav li a { text-decoration: none; }
.footer .footer-box .footer-nav li a:hover { text-decoration: underline; }
.footer .footer-box .copy { font-size: 1.6rem; text-align: right; }
@media screen and (max-width: 750px) { .footer .footer-box .copy { font-size: 1.2rem; text-align: center; } }

.opacity { transition: all .6s; }
.opacity:hover { opacity: 0.7; }

.error-message { margin-top: 5px; color: #f00; }

.message._error { margin-bottom: 20px; padding: 5px; background-color: #f00; color: #fff; text-align: center; }

._shadow { box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.4); }

.cmn-anchor { position: relative; }
.cmn-anchor a { position: absolute; top: -80px; }

.cmn-fig { position: relative; }
.cmn-fig::before { content: ''; display: block; padding-top: 75%; }
.cmn-fig img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.cmn-fig._cover img { object-fit: cover; }
.cmn-fig._rt32::before { padding-top: 66.6666666667%; }
.cmn-fig._rt21::before { padding-top: 50%; }
.cmn-fig._rt7::before { padding-top: 70%; }
.cmn-fig._rt11::before { padding-top: 100%; }

@media screen and (max-width: 1100px) { .swiper-slide > .swiper-slide-in { display: none; } }
@media screen and (max-width: 1100px) { .swiper-slide.swiper-slide-active > .swiper-slide-in { display: block; } }

.swiper-pagination-bullet:focus { outline: solid; }

.autoplay-btn { position: relative; display: block; width: 15.6rem; margin: 0 auto; }
.autoplay-btn .autoplay-btn-ico { position: absolute; top: 0; left: 0; z-index: 10; display: flex; justify-content: center; align-items: center; width: 5.4rem; height: 100%; border: 2px solid #004ba3; border-radius: 10px; background-color: #004ba3; }
.autoplay-btn .autoplay-btn-ico .ico-start { display: none; width: 2.2rem; }
.autoplay-btn .autoplay-btn-ico .ico-stop { width: 2.4rem; }
.autoplay-btn .autoplay-btn-label { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 5.4rem; padding: 0.5rem 0.5rem 0.5rem 5.9rem; border: 2px solid #004ba3; border-radius: 10px; background-color: #fff; color: #004ba3; font-weight: 700; text-align: center; }
.autoplay-btn .autoplay-btn-label ._start { display: none; }
.autoplay-btn._isstop .autoplay-btn-ico { background-color: #fff; }
.autoplay-btn._isstop .autoplay-btn-ico .ico-start { display: inline-flex; }
.autoplay-btn._isstop .autoplay-btn-ico .ico-stop { display: none; }
.autoplay-btn._isstop .autoplay-btn-label ._start { display: block; }
.autoplay-btn._isstop .autoplay-btn-label ._stop { display: none; }

.tab { display: none; }
.tab.active { display: block; }

.js-modalopen, .js-modalstartopen, .js-modalmypageopen { overflow: hidden; }

.new-item { display: flex; align-items: center; font-size: 1.6rem; }
.new-item .new-cate { width: 8em; margin-left: 1em; padding: 5px; color: #fff; text-align: center; }
.new-item .new-cate._cate01 { background-color: #ec808e; }
.new-item .new-cate._cate02 { background-color: #ffac58; }
.new-item .new-cate._cate03 { background-color: #6ec0d0; }
.new-item .new-cate._cate04 { background-color: #8fcb7c; }

.box { margin-bottom: 40px; }
.box._mb2 { margin-bottom: 20px; }

.txt { line-height: 2; }
.txt a { color: #1f94eb; }
.txt .txt_red { color: #ff1f1f; }
.txt strong { font-weight: 700; }

.txt-cap { padding-left: 1em; text-indent: -1em; }

.caption { margin-top: 10px; font-size: 1.6rem; text-align: center; }
@media screen and (max-width: 750px) { .caption { font-size: 1.1rem; } }

.subheading { margin-bottom: 30px; padding: 10px 15px 5px; background-color: #004ba3; font-size: 2.2rem; font-weight: 700; color: #fff; }
@media screen and (max-width: 750px) { .subheading { font-size: 2.0rem; } }
.subheading._mb2 { margin-bottom: 10px; }

.txtheading { margin-bottom: 30px; font-size: 2.0rem; font-weight: 700; color: #004ba3; }
@media screen and (max-width: 750px) { .txtheading { font-size: 1.6rem; } }
.txtheading._mb2 { margin-bottom: 10px; }

.line { border-bottom: 2px solid #80a5d1 !important; }

.txtfig { display: flex; justify-content: space-between; }
@media screen and (max-width: 750px) { .txtfig { display: block; } }
.txtfig._reverse { flex-direction: row-reverse; }
.txtfig._reverse .txtfig-fig { margin-right: 0; margin-left: 6.6666666667%; }
@media screen and (max-width: 750px) { .txtfig._reverse .txtfig-fig { margin: 0 auto 20px; } }
.txtfig .txtfig-fig { width: 46.6666666667%; margin-right: 6.6666666667%; }
@media screen and (max-width: 750px) { .txtfig .txtfig-fig { width: 100%; margin: 0 auto 20px; } }
.txtfig .txtfig-txt { flex: 1; }

.fig_01 { width: 46.6666666667%; margin: 0 auto 40px; }
.fig_01 li { margin-bottom: 70px; }
.fig_01 li:last-child { margin-bottom: 0; }

.fig_02 { display: flex; flex-wrap: wrap; margin: 0 auto; }
.fig_02 li { width: 46.6666666667%; margin-right: 6.6666666667%; margin-bottom: 4.4444444444%; }
.fig_02 li:nth-child(2n) { margin-right: 0; }
.fig_02 li:last-child { margin-right: 0; }

.fig_03 { display: flex; flex-wrap: wrap; margin: 0 auto; }
.fig_03._tac { justify-content: center; }
.fig_03 li { width: 31.1111111111%; margin-right: 3.3333333333%; margin-bottom: 4.4444444444%; }
.fig_03 li:nth-child(3n) { margin-right: 0; }
.fig_03 li:last-child { margin-right: 0; }

.list { counter-reset: hoge; }
@media screen and (max-width: 750px) { .list { font-size: 1.6rem; } }
.list._bullet li { display: flex; }
.list._bullet li::before { content: '●'; margin-top: 0.2em; margin-right: 0.5em; color: #004ba3; }
.list._number { counter-reset: number 0; }
.list._number li { display: flex; }
.list._number li::before { margin-top: 0.2rem; margin-right: 0.5em; counter-increment: number 1; content: counter(number) "."; color: #004ba3; font-weight: 700; line-height: 1.8; }
.list._link:last-child { margin-bottom: 0 !important; }

.txtlink { display: flex; align-items: flex-start; text-decoration: none; width: fit-content; }
.txtlink:hover { text-decoration: underline; }
.txtlink .ico { margin-right: 0.5em; margin-top: 0.3em; width: 1.2em; }
.txtlink span { flex: 1; }

.btn { display: inline-block; text-decoration: none; padding: 15px 60px 15px 50px; background: #fff url("../img/common/ico_arrow.svg") no-repeat right 20px center; background-size: 31px auto; border: 2px solid #004ba3; border-radius: 2em; transition: all .6s; }
@media screen and (max-width: 750px) { .btn { font-size: 1.6rem; } }
.btn._pdf { background-image: url("../img/common/ico_pdf.svg"); background-size: 21px auto; }
.btn._file { background-image: url("../img/common/ico_file.svg"); background-size: 21px auto; }
.btn:hover { opacity: 0.7; }

.frame { padding: 45px 30px; border: 2px solid #004ba3; border-radius: 1em; }
.frame._em { border-color: #ff380d; }
.frame._bg { border: none; background-color: #bbebff; }

.back-btn { text-align: center; }
.back-btn a { display: inline-block; text-decoration: none; padding: 15px 20px 15px 60px; background: #fff url("../img/common/ico_arrow_l.svg") no-repeat left 20px center; background-size: 31px auto; border: 2px solid #004ba3; text-align: center; border-radius: 2em; transition: all .6s; }
@media screen and (max-width: 750px) { .back-btn a { padding-top: 10px; background-size: 30px auto; } }
.back-btn a:hover { opacity: 0.7; }

.ico { display: inline-flex; justify-content: center; align-items: center; width: 1em; line-height: 0; }
.ico::before { width: 100% !important; }

.ico-home::before { content: url("../img/common/ico_home.svg"); }

.ico-arrow::before { content: url("../img/common/ico_arrow.svg"); }

.ico-arrow-03::before { content: url("../img/common/ico_arrow03.svg"); }

.ico-arrow-l::before { content: url("../img/common/ico_arrow_l.svg"); }

.ico-arrow-w::before { content: url("../img/common/ico_arrow_w.svg"); }

.ico-arrow-w-l::before { content: url("../img/common/ico_arrow_w_l.svg"); }

.ico-pdf::before { content: url("../img/common/ico_pdf.svg"); }

.ico-external::before { content: url("../img/common/ico_file.svg"); }

.ico-back::before { content: url("../img/common/ico_back.svg"); }

.ico-start::before { content: url("../img/common/ico_start.svg"); }

.ico-stop::before { content: url("../img/common/ico_stop.svg"); }

.ico-orientation::before { content: url("../img/common/ico_orientation.svg"); }

.ico-orientation-v::before { content: url("../img/common/ico_orientation_v.svg"); }

.ico-faq::before { content: url("../img/common/ico_faq.svg"); }

.ico-faq02::before { content: url("../img/common/ico_faq02.svg"); }

.ico-pdf::before { content: url("../img/common/ico_pdf.svg"); }

.ico-fig::before { content: url("../img/common/ico_fig.svg"); }

.ico-password::before { content: url("../img/common/ico_password.svg"); }

.ico-password02::before { content: url("../img/common/ico_password02.svg"); }

.ico-setting::before { content: url("../img/common/ico_setting.svg"); }

.ico-play::before { content: url("../img/common/ico_play.svg"); }

.ico-sound::before { content: url("../img/common/ico_sound.svg"); }

.ico-mute::before { content: url("../img/common/ico_mute.svg"); }

.ico-star::before { content: url("../img/common/ico_star.svg"); }

.ico-lock::before { content: url("../img/common/ico_lock.svg"); }

.ico-clock::before { content: url("../img/common/ico_clock.svg"); }

.ico-card::before { content: url("../img/common/ico_card.svg"); }

.ico-bus02::before { content: url("../img/common/ico_bus02.svg"); }

.ico-train02::before { content: url("../img/common/ico_train02.svg"); }

.ico-point::before { content: url("../img/game/driver/ico_point.svg"); }

.ico-colon::before { content: url("../img/game/driver/ico_colon.svg"); }

.ico-door-open::before { content: url("../img/game/driver/ico_open.svg"); }

.ico-door-close::before { content: url("../img/game/driver/ico_close.svg"); }

.ico-num-w-::before { content: url("../img/game/driver/num/w-.svg"); }

.ico-num-w0::before { content: url("../img/game/driver/num/w0.svg"); }

.ico-num-w1::before { content: url("../img/game/driver/num/w1.svg"); }

.ico-num-w2::before { content: url("../img/game/driver/num/w2.svg"); }

.ico-num-w3::before { content: url("../img/game/driver/num/w3.svg"); }

.ico-num-w4::before { content: url("../img/game/driver/num/w4.svg"); }

.ico-num-w5::before { content: url("../img/game/driver/num/w5.svg"); }

.ico-num-w6::before { content: url("../img/game/driver/num/w6.svg"); }

.ico-num-w7::before { content: url("../img/game/driver/num/w7.svg"); }

.ico-num-w8::before { content: url("../img/game/driver/num/w8.svg"); }

.ico-num-w9::before { content: url("../img/game/driver/num/w9.svg"); }

.ico-num-g0::before { content: url("../img/game/driver/num/g0.svg"); }

.ico-num-g1::before { content: url("../img/game/driver/num/g1.svg"); }

.ico-num-g2::before { content: url("../img/game/driver/num/g2.svg"); }

.ico-num-g3::before { content: url("../img/game/driver/num/g3.svg"); }

.ico-num-g4::before { content: url("../img/game/driver/num/g4.svg"); }

.ico-num-g5::before { content: url("../img/game/driver/num/g5.svg"); }

.ico-num-g6::before { content: url("../img/game/driver/num/g6.svg"); }

.ico-num-g7::before { content: url("../img/game/driver/num/g7.svg"); }

.ico-num-g8::before { content: url("../img/game/driver/num/g8.svg"); }

.ico-num-g9::before { content: url("../img/game/driver/num/g9.svg"); }

.ico-correct::before { content: url("../img/game/manners/ico_correct.svg"); }

.ico-ranking::before { content: url("../img/game/matching/ico_ranking.svg"); }

.ico-clear::before { content: url("../img/game/quiz/ico_clear.svg"); }

.ico-tips::before { content: url("../img/game/quiz/ico_tips.svg"); }

.outing-top { padding: 70px 0 90px; background: url("../img/common/outing/outing_bg001.png") no-repeat center top; background-size: cover; }
@media screen and (max-width: 750px) { .outing-top { padding: 80px 0; } }
.outing-top .outing-ttl { width: 45.6%; margin-bottom: 20px; }
@media screen and (max-width: 750px) { .outing-top .outing-ttl { width: 67.0588235294%; } }
.outing-top .outing-txt { z-index: 9; position: relative; width: 63%; margin-bottom: 20px; padding: 1rem 1rem 1rem 2.5rem; border-radius: 2rem; background-color: #fff; }
@media screen and (max-width: 750px) { .outing-top .outing-txt { width: 100%; } }
.outing-top .outing-txt::before { content: ''; position: absolute; bottom: 29px; right: -29px; display: block; width: 30px; height: 20px; background: url("../img/common/fukidashi_top.svg") no-repeat left center; background-size: contain; }
@media screen and (max-width: 750px) { .outing-top .outing-txt::before { bottom: initial; top: -30px; right: 25%; width: 20px; height: 30px; background-image: url("../img/common/fukidashi_top_sp.svg"); } }
.outing-top .outing-txt p { font-size: 2.8rem; font-weight: 700; color: #004ba3; }
@media screen and (max-width: 750px) { .outing-top .outing-txt p { font-size: 1.8rem; } }
.outing-top .outing-icon { position: absolute; top: 0; right: 0; width: 22%; margin-top: -3%; margin-right: 10%; }
@media screen and (max-width: 1200px) { .outing-top .outing-icon { margin-top: -1%; margin-right: 3.5%; } }
@media screen and (max-width: 750px) { .outing-top .outing-icon { width: 22.0588235294%; margin-top: -10.2941176471%; margin-right: 0; } }
.outing-top .outing-con { position: relative; display: flex; justify-content: space-between; }
@media screen and (max-width: 750px) { .outing-top .outing-con { display: block; } }
.outing-top .outing-box { width: 45.6%; margin-right: 8%; background-color: #fff; border: 2px solid #004ba3; border-radius: 1em; }
@media screen and (max-width: 750px) { .outing-top .outing-box { width: 100%; margin-right: 0; margin-bottom: 60px; } }
.outing-top .outing-box:last-child { margin-right: 0; }
@media screen and (max-width: 750px) { .outing-top .outing-box:last-child { margin-bottom: 0; } }
.outing-top .outing-box a { display: block; height: 100%; text-decoration: none; padding: 10px 30px 30px; }
@media screen and (max-width: 1200px) { .outing-top .outing-box a { padding-left: 20px; padding-right: 20px; } }
.outing-top .outing-box .outing-box-heading { margin-bottom: 15px; padding: 0 50px; background: url("../img/common/ico_arrow.svg") no-repeat right center; background-size: 48px auto; font-size: 2.8rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 960px) { .outing-top .outing-box .outing-box-heading { background-size: 30px auto; } }
.outing-top .outing-box .outing-box-heading ._h { max-width: 8.5em; margin: 0 auto; }
.outing-top .outing-box .outing-box-lead { max-width: 19em; margin: 0 auto 20px; text-align: center; }

.book-top { padding: 60px 0 70px; background-color: #e5f2fc; }
@media screen and (max-width: 750px) { .book-top { padding: 80px 0; } }
.book-top .book-ttl { width: 48.3%; margin-bottom: 20px; }
@media screen and (max-width: 750px) { .book-top .book-ttl { width: 71.0294117647%; } }
.book-top .book-txt { z-index: 9; position: relative; width: 63%; margin-bottom: 20px; padding: 1rem 1rem 1rem 2.5rem; border-radius: 2rem; background-color: #fff; }
@media screen and (max-width: 750px) { .book-top .book-txt { width: 100%; } }
.book-top .book-txt::before { content: ''; position: absolute; bottom: 29px; right: -29px; display: block; width: 30px; height: 20px; background: url("../img/common/fukidashi_top.svg") no-repeat left center; background-size: contain; }
@media screen and (max-width: 750px) { .book-top .book-txt::before { bottom: initial; top: -30px; right: 23%; width: 20px; height: 30px; background-image: url("../img/common/fukidashi_top_sp.svg"); } }
.book-top .book-txt p { font-size: 2.8rem; font-weight: 700; color: #004ba3; }
@media screen and (max-width: 750px) { .book-top .book-txt p { font-size: 1.8rem; } }
.book-top .book-icon { position: absolute; top: 0; right: 0; width: 27.2%; margin-top: -2%; margin-right: 10%; }
@media screen and (max-width: 1200px) { .book-top .book-icon { margin-top: -1%; margin-right: 3.5%; } }
@media screen and (max-width: 750px) { .book-top .book-icon { width: 26.4705882353%; margin-top: -7.3529411765%; margin-right: 0; } }
.book-top .book-con { position: relative; display: flex; justify-content: space-between; column-gap: 8%; }
@media screen and (max-width: 750px) { .book-top .book-con { flex-direction: column; row-gap: 60px; } }
.book-top .book-box { width: 45.6%; background-color: #fff; border: 2px solid #004ba3; border-radius: 1em; }
@media screen and (max-width: 750px) { .book-top .book-box { width: 100%; } }
.book-top .book-box a { display: block; text-decoration: none; padding: 10px 30px 30px; }
@media screen and (max-width: 1200px) { .book-top .book-box a { padding-left: 20px; padding-right: 20px; } }
.book-top .book-box .book-box-heading { margin-bottom: 15px; padding: 0 50px; background: url("../img/common/ico_arrow.svg") no-repeat right center; background-size: 48px auto; font-size: 2.8rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 960px) { .book-top .book-box .book-box-heading { background-size: 30px auto; } }
.book-top .book-box .book-box-heading ._h { max-width: 8em; margin: 0 auto; }
.book-top .book-box .book-box-lead { max-width: 20em; margin: 0 auto 20px; text-align: center; }
.book-top .book-box .book-box-lead._s { max-width: 18em; }

.crafts-top { padding: 60px 0 150px; background: url("../img/home/crafts_bg001.png") no-repeat center top; background-size: cover; }
@media screen and (max-width: 750px) { .crafts-top { padding: 80px 0; } }
.crafts-top .crafts-ttl { width: 45.7%; margin-bottom: 20px; }
@media screen and (max-width: 750px) { .crafts-top .crafts-ttl { width: 67.2058823529%; } }
.crafts-top .crafts-txt { z-index: 9; position: relative; width: 63%; margin-bottom: 20px; padding: 1rem 1rem 1rem 2.5rem; border-radius: 2rem; background-color: #fff; }
@media screen and (max-width: 750px) { .crafts-top .crafts-txt { width: 100%; } }
.crafts-top .crafts-txt::before { content: ''; position: absolute; bottom: 29px; right: -29px; display: block; width: 30px; height: 20px; background: url("../img/common/fukidashi_top.svg") no-repeat left center; background-size: contain; }
@media screen and (max-width: 750px) { .crafts-top .crafts-txt::before { bottom: initial; top: -30px; right: 23%; width: 20px; height: 30px; background-image: url("../img/common/fukidashi_top_sp.svg"); } }
.crafts-top .crafts-txt p { font-size: 2.8rem; font-weight: 700; color: #004ba3; }
@media screen and (max-width: 750px) { .crafts-top .crafts-txt p { font-size: 1.8rem; } }
.crafts-top .crafts-icon { position: absolute; top: 0; right: 0; width: 34.5%; margin-top: -3%; margin-right: 3%; }
@media screen and (max-width: 1200px) { .crafts-top .crafts-icon { margin-top: -1%; margin-right: 0; } }
@media screen and (max-width: 750px) { .crafts-top .crafts-icon { width: 26.4705882353%; margin-top: -2.9411764706%; margin-right: 0; } }
.crafts-top .crafts-con { position: relative; display: flex; justify-content: space-between; width: 100%; max-width: 1140px; margin: 0 auto; }
@media screen and (max-width: 960px) { .crafts-top .crafts-con { display: block; } }
.crafts-top .crafts-box { position: relative; width: 31.5789473684%; margin-right: 2.6315789474%; background-color: #fff; border: 2px solid #004ba3; border-radius: 1em; }
@media screen and (max-width: 960px) { .crafts-top .crafts-box { width: 50%; margin: 0 auto 60px; } }
@media screen and (max-width: 750px) { .crafts-top .crafts-box { width: 100%; } }
.crafts-top .crafts-box._box01 .crafts-box-heading { text-align: left; }
@media screen and (max-width: 960px) { .crafts-top .crafts-box._box01 .crafts-box-heading { text-align: center; } }
.crafts-top .crafts-box._box01 figure { margin-right: -20px; }
.crafts-top .crafts-box:last-child { margin-right: 0; }
@media screen and (max-width: 960px) { .crafts-top .crafts-box:last-child { margin: 0 auto; } }
.crafts-top .crafts-box a { display: block; text-decoration: none; width: 100%; height: 100%; padding: 30px 20px 20px; }
.crafts-top .crafts-box a:hover .crafts-box-heading, .crafts-top .crafts-box a:hover figure { opacity: 0.7; }
.crafts-top .crafts-box .crafts-box-heading { margin-bottom: 15px; padding: 5px 50px 5px 0; background: url("../img/common/ico_arrow.svg") no-repeat right center; background-size: 48px auto; font-size: 2.8rem; font-weight: 700; text-align: center; color: #004ba3; transition: all .6s; }
@media screen and (max-width: 750px) { .crafts-top .crafts-box .crafts-box-heading { background-size: 30px auto; } }
.crafts-top .crafts-box figure { text-align: center; transition: all .6s; }
.crafts-top .crafts-box .crafts-box-item { position: absolute; bottom: 0; right: 0; width: 30.8333333333%; margin-bottom: -10px; margin-right: -10px; padding: 15px 2px; border: 3px solid #004ba3; background-color: #dee500; font-size: 2.1rem; font-weight: 700; text-align: center; border-radius: 1em; color: #004ba3; }
@media screen and (max-width: 1200px) { .crafts-top .crafts-box .crafts-box-item { font-size: 1.8rem; } }
@media screen and (max-width: 960px) { .crafts-top .crafts-box .crafts-box-item { font-size: 1.4rem; } }
.crafts-top .crafts-box .crafts-box-item span { display: inline-block; font-size: 5.0rem; line-height: 1.1; }
@media screen and (max-width: 960px) { .crafts-top .crafts-box .crafts-box-item span { font-size: 4.0rem; } }

.game-top { position: relative; padding: 60px 0 80px; background: #0079e3 url("../img/common/game/game_bg001.png") no-repeat center top; background-size: cover; }
@media screen and (max-width: 750px) { .game-top { padding: 80px 0; } }
.game-top::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 25.8571428571%; background: url("../img/common/bg_game.svg") no-repeat center bottom; background-size: 100% auto; }
@media screen and (max-width: 750px) { .game-top::before { margin-bottom: 93.3333333333%; } }
@media screen and (max-width: 750px) { .game-top::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; padding-top: 100%; background-color: #004ba3; } }
.game-top .inner { position: relative; z-index: 10; }
.game-top .game-ttl { width: 63.8%; margin-bottom: 20px; }
@media screen and (max-width: 750px) { .game-top .game-ttl { width: 86.4705882353%; } }
.game-top .game-txt { z-index: 9; position: relative; margin-bottom: 40px; width: 63%; margin-bottom: 20px; padding: 1rem 1rem 1rem 2.5rem; border-radius: 2rem; background-color: #fff; }
@media screen and (max-width: 750px) { .game-top .game-txt { width: 100%; } }
.game-top .game-txt::before { content: ''; position: absolute; bottom: 29px; right: -29px; display: block; width: 30px; height: 20px; background: url("../img/common/fukidashi_top.svg") no-repeat left center; background-size: contain; }
@media screen and (max-width: 750px) { .game-top .game-txt::before { bottom: initial; top: -30px; right: 15%; width: 20px; height: 30px; background-image: url("../img/common/fukidashi_top_sp.svg"); } }
.game-top .game-txt p { max-width: 19em; font-size: 2.8rem; font-weight: 700; color: #004ba3; }
@media screen and (max-width: 750px) { .game-top .game-txt p { font-size: 1.8rem; } }
.game-top .game-icon { position: absolute; top: 0; right: 0; width: 21%; margin-top: -4%; }
@media screen and (max-width: 1200px) { .game-top .game-icon { margin-top: -1%; } }
@media screen and (max-width: 750px) { .game-top .game-icon { width: 19.1176470588%; margin-top: -7.3529411765%; } }
.game-top .game-list { position: relative; display: flex; }
@media screen and (max-width: 750px) { .game-top .game-list { flex-wrap: wrap; } }
.game-top .game-list li { width: 22.8333333333%; margin-right: 2.6666666667%; cursor: pointer; }
@media screen and (max-width: 750px) { .game-top .game-list li { width: 48%; margin-right: 4%; margin-bottom: 4%; }
  .game-top .game-list li:nth-child(2) { margin-right: 0; } }
.game-top .game-list li:last-child { margin-right: 0; }
@media screen and (max-width: 750px) { .game-top .game-list li:last-child { margin-bottom: 0; } }
.game-top .game-list li a, .game-top .game-list li .game-list-con { display: block; text-decoration: none; }
.game-top .game-list li p { margin-top: 20px; font-size: 2.0rem; color: #fff; }
@media screen and (max-width: 750px) { .game-top .game-list li p { font-size: 1.6rem; } }

.login-box { width: 100%; max-width: 530px; margin: 0 auto; }
.login-box .login-ttl { margin-bottom: 35px; padding-bottom: 15px; border-bottom: 1px solid #004ba3; font-size: 2.9rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 750px) { .login-box .login-ttl { font-size: 2.0rem; } }
.login-box ul li { margin-bottom: 35px; }
@media screen and (max-width: 750px) { .login-box ul li p { font-size: 1.6rem; } }
.login-box ul li .login-label { margin-bottom: 5px; font-size: 2rem; font-weight: 700; }
.login-box ul li .login-desc { margin-bottom: 5px; }
.login-box ul li .login-txt { margin-top: 10px; }
.login-box ul li .login-input { display: flex; align-items: center; border: 2px solid #004ba3; border-radius: 0.5em; background-color: #fff; }
.login-box ul li .login-input input { flex: 1; width: 100%; padding: 10px 20px; border: none; background-color: transparent; font-size: 2.6rem; outline: none; }
@media screen and (max-width: 750px) { .login-box ul li .login-input input { font-size: 1.8rem; } }
.login-box ul li .login-input .ico { width: 40px; margin: 0 15px; cursor: pointer; }
.login-box ul li .login-input .ico-password { display: none; }
.login-box ul li .login-input._show .ico-password02 { display: none; }
.login-box ul li .login-input._show .ico-password { display: inline; }
.login-box ul li .login-pwhide { margin-top: 5px; }
.login-box .login-user { margin-top: 30px; }
.login-box .login-user a, .login-box .login-user span { color: #004ba3; text-decoration: underline; cursor: pointer; }
.login-box .login-btn { width: 100%; max-width: 310px; margin: 0 auto; }
.login-box .login-btn button { width: 100%; padding: 20px; background-color: #004ba3; font-size: 2.0rem; font-weight: 700; color: #fff; text-align: center; border-radius: 2em; }
.login-box .login-btn button:focus { outline: 3px solid #953232; }

.modal-start-sec, .modal-setting-sec { display: none; position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
.modal-start-sec .modal-in, .modal-setting-sec .modal-in { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2rem; overflow-y: auto; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-in, .modal-setting-sec .modal-in { padding: 20px; } }
.modal-start-sec .modal-con, .modal-setting-sec .modal-con { position: relative; width: 100%; max-width: 800px; margin: auto; }
@media screen and (max-width: 960px) { .modal-start-sec .modal-con, .modal-setting-sec .modal-con { max-width: 650px; } }
.modal-start-sec._profile .modal-con, .modal-setting-sec._profile .modal-con { max-width: 900px; }
@media screen and (max-width: 960px) { .modal-start-sec._profile .modal-con, .modal-setting-sec._profile .modal-con { max-width: 650px; } }
.modal-start-sec .modal-close, .modal-setting-sec .modal-close { z-index: 999; position: absolute; top: 0; right: 0; width: 47px; margin-top: -15px; margin-right: -15px; cursor: pointer; }
.modal-start-sec .modal-box, .modal-setting-sec .modal-box { padding: 40px 30px 0; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-box, .modal-setting-sec .modal-box { padding: 20px 30px; } }
.modal-start-sec .modal-lead, .modal-setting-sec .modal-lead { margin-bottom: 20px; font-size: 2.2rem; font-weight: 700; color: #004ba3; text-align: center; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-lead, .modal-setting-sec .modal-lead { font-size: 2.0rem; } }
.modal-start-sec .modal-link, .modal-setting-sec .modal-link { display: flex; justify-content: space-between; width: 100%; max-width: 645px; margin: 0 auto; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-link, .modal-setting-sec .modal-link { display: block; } }
.modal-start-sec .modal-link li, .modal-setting-sec .modal-link li { width: 48.0620155039%; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-link li, .modal-setting-sec .modal-link li { width: 100%; margin-bottom: 20px; }
  .modal-start-sec .modal-link li:last-child, .modal-setting-sec .modal-link li:last-child { margin-bottom: 0; } }
.modal-start-sec .modal-link li button, .modal-setting-sec .modal-link li button { display: block; width: 100%; padding: 20px; border: 1px solid #fff; font-size: 2.0rem; font-weight: 700; text-align: center; color: #fff; border-radius: 2em; cursor: pointer; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-link li button, .modal-setting-sec .modal-link li button { padding: 10px; font-size: 1.8rem; } }
.modal-start-sec .modal-link li button.modal-link-guest, .modal-setting-sec .modal-link li button.modal-link-guest { background-color: #00738B; }
.modal-start-sec .modal-link li button.modal-link-login2, .modal-setting-sec .modal-link li button.modal-link-login2 { background-color: #004ba3; }
.modal-start-sec .modal-link li .modal-link-txt, .modal-setting-sec .modal-link li .modal-link-txt { margin-bottom: 5px; text-align: center; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-link li .modal-link-txt, .modal-setting-sec .modal-link li .modal-link-txt { font-size: 1.4rem; } }
.modal-start-sec .modal-top, .modal-setting-sec .modal-top { padding: 20px; background-color: #e5f2fc; border-top-left-radius: 1em; border-top-right-radius: 1em; }
.modal-start-sec .modal-top .modal-ttl, .modal-setting-sec .modal-top .modal-ttl { font-size: 2.9rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-top .modal-ttl, .modal-setting-sec .modal-top .modal-ttl { font-size: 2.2rem; } }
.modal-start-sec .modal-start-swiper, .modal-start-sec .modal-setting-swiper, .modal-setting-sec .modal-start-swiper, .modal-setting-sec .modal-setting-swiper { overflow: hidden; }
.modal-start-sec .modal-start-swiper .swiper-slide, .modal-start-sec .modal-setting-swiper .swiper-slide, .modal-setting-sec .modal-start-swiper .swiper-slide, .modal-setting-sec .modal-setting-swiper .swiper-slide { position: relative; height: auto; border-radius: 1em; background-color: #fff; overflow: hidden; }
.modal-start-sec .modal-start-swiper .swiper-slide > .swiper-slide-in, .modal-start-sec .modal-setting-swiper .swiper-slide > .swiper-slide-in, .modal-setting-sec .modal-start-swiper .swiper-slide > .swiper-slide-in, .modal-setting-sec .modal-setting-swiper .swiper-slide > .swiper-slide-in { display: none; }
.modal-start-sec .modal-start-swiper .swiper-slide.swiper-slide-active > .swiper-slide-in, .modal-start-sec .modal-setting-swiper .swiper-slide.swiper-slide-active > .swiper-slide-in, .modal-setting-sec .modal-start-swiper .swiper-slide.swiper-slide-active > .swiper-slide-in, .modal-setting-sec .modal-setting-swiper .swiper-slide.swiper-slide-active > .swiper-slide-in { display: block; }
.modal-start-sec .modal-start-swiper ._modallogin, .modal-start-sec .modal-start-swiper ._modaluser, .modal-start-sec .modal-start-swiper ._modalsetting, .modal-start-sec .modal-start-swiper ._modalprofile, .modal-start-sec .modal-setting-swiper ._modallogin, .modal-start-sec .modal-setting-swiper ._modaluser, .modal-start-sec .modal-setting-swiper ._modalsetting, .modal-start-sec .modal-setting-swiper ._modalprofile, .modal-setting-sec .modal-start-swiper ._modallogin, .modal-setting-sec .modal-start-swiper ._modaluser, .modal-setting-sec .modal-start-swiper ._modalsetting, .modal-setting-sec .modal-start-swiper ._modalprofile, .modal-setting-sec .modal-setting-swiper ._modallogin, .modal-setting-sec .modal-setting-swiper ._modaluser, .modal-setting-sec .modal-setting-swiper ._modalsetting, .modal-setting-sec .modal-setting-swiper ._modalprofile { padding: 10px 0 30px; border: 4px solid #fff; border-radius: 1em; background: #fff url("../img/game/modal_bg001.png"); }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modallogin, .modal-start-sec .modal-start-swiper ._modaluser, .modal-start-sec .modal-start-swiper ._modalsetting, .modal-start-sec .modal-start-swiper ._modalprofile, .modal-start-sec .modal-setting-swiper ._modallogin, .modal-start-sec .modal-setting-swiper ._modaluser, .modal-start-sec .modal-setting-swiper ._modalsetting, .modal-start-sec .modal-setting-swiper ._modalprofile, .modal-setting-sec .modal-start-swiper ._modallogin, .modal-setting-sec .modal-start-swiper ._modaluser, .modal-setting-sec .modal-start-swiper ._modalsetting, .modal-setting-sec .modal-start-swiper ._modalprofile, .modal-setting-sec .modal-setting-swiper ._modallogin, .modal-setting-sec .modal-setting-swiper ._modaluser, .modal-setting-sec .modal-setting-swiper ._modalsetting, .modal-setting-sec .modal-setting-swiper ._modalprofile { padding: 20px; } }
.modal-start-sec .modal-start-swiper ._modalsetting, .modal-start-sec .modal-setting-swiper ._modalsetting, .modal-setting-sec .modal-start-swiper ._modalsetting, .modal-setting-sec .modal-setting-swiper ._modalsetting { padding-top: 30px; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalsetting, .modal-start-sec .modal-setting-swiper ._modalsetting, .modal-setting-sec .modal-start-swiper ._modalsetting, .modal-setting-sec .modal-setting-swiper ._modalsetting { padding-top: 20px; } }
.modal-start-sec .modal-start-swiper ._modalsetting .setting-nav, .modal-start-sec .modal-setting-swiper ._modalsetting .setting-nav, .modal-setting-sec .modal-start-swiper ._modalsetting .setting-nav, .modal-setting-sec .modal-setting-swiper ._modalsetting .setting-nav { display: flex; flex-direction: column; gap: 2.4rem; max-width: 500px; margin: 0 auto; padding: 60px 0; }
.modal-start-sec .modal-start-swiper ._modalsetting .setting-nav .setting-nav-btn, .modal-start-sec .modal-setting-swiper ._modalsetting .setting-nav .setting-nav-btn, .modal-setting-sec .modal-start-swiper ._modalsetting .setting-nav .setting-nav-btn, .modal-setting-sec .modal-setting-swiper ._modalsetting .setting-nav .setting-nav-btn { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 20px 30px; border: 1px solid #fff; border-radius: 20px; background-color: #004ba3; color: #fff; font-size: 2.4rem; font-weight: 700; }
.modal-start-sec .modal-start-swiper ._modalsetting .setting-nav .setting-nav-btn:focus, .modal-start-sec .modal-setting-swiper ._modalsetting .setting-nav .setting-nav-btn:focus, .modal-setting-sec .modal-start-swiper ._modalsetting .setting-nav .setting-nav-btn:focus, .modal-setting-sec .modal-setting-swiper ._modalsetting .setting-nav .setting-nav-btn:focus { outline: 3px solid #953232; }
.modal-start-sec .modal-start-swiper ._modalprofile .login-ttl, .modal-start-sec .modal-setting-swiper ._modalprofile .login-ttl, .modal-setting-sec .modal-start-swiper ._modalprofile .login-ttl, .modal-setting-sec .modal-setting-swiper ._modalprofile .login-ttl { margin-bottom: 20px; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-lead, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-lead, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-lead, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-lead { margin-bottom: 30px; font-size: 2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalprofile .profile-lead, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-lead, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-lead, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-lead { font-size: 1.6rem; } }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav { padding: 0 20px 30px; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 738px; margin: 0 auto; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li { width: 18.1571815718%; margin-bottom: 30px; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li { width: 31.1653116531%; } }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li button, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li button, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button { display: block; width: 100%; border: 7px solid transparent; border-radius: 50%; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li button figure, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button figure, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li button figure, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button figure { border: 5px solid transparent; border-radius: 50%; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li button._active, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button._active, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li button._active, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button._active { border-color: #004ba3; }
.modal-start-sec .modal-start-swiper ._modalprofile .profile-nav ul li button._active figure, .modal-start-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button._active figure, .modal-setting-sec .modal-start-swiper ._modalprofile .profile-nav ul li button._active figure, .modal-setting-sec .modal-setting-swiper ._modalprofile .profile-nav ul li button._active figure { border-color: #fff; }
.modal-start-sec .modal-start-swiper .modalstart-back, .modal-start-sec .modal-start-swiper .modalsetting-back, .modal-start-sec .modal-setting-swiper .modalstart-back, .modal-start-sec .modal-setting-swiper .modalsetting-back, .modal-setting-sec .modal-start-swiper .modalstart-back, .modal-setting-sec .modal-start-swiper .modalsetting-back, .modal-setting-sec .modal-setting-swiper .modalstart-back, .modal-setting-sec .modal-setting-swiper .modalsetting-back { display: flex; align-items: center; column-gap: 5px; margin: 0 0 0.5rem 1.5rem; color: #004ba3; font-size: 1.6rem; }
.modal-start-sec .modal-start-swiper .modalstart-back .ico, .modal-start-sec .modal-start-swiper .modalsetting-back .ico, .modal-start-sec .modal-setting-swiper .modalstart-back .ico, .modal-start-sec .modal-setting-swiper .modalsetting-back .ico, .modal-setting-sec .modal-start-swiper .modalstart-back .ico, .modal-setting-sec .modal-start-swiper .modalsetting-back .ico, .modal-setting-sec .modal-setting-swiper .modalstart-back .ico, .modal-setting-sec .modal-setting-swiper .modalsetting-back .ico { width: 2.2rem; }
.modal-start-sec .modal-start-swiper .modalstart-back._hide, .modal-start-sec .modal-start-swiper .modalsetting-back._hide, .modal-start-sec .modal-setting-swiper .modalstart-back._hide, .modal-start-sec .modal-setting-swiper .modalsetting-back._hide, .modal-setting-sec .modal-start-swiper .modalstart-back._hide, .modal-setting-sec .modal-start-swiper .modalsetting-back._hide, .modal-setting-sec .modal-setting-swiper .modalstart-back._hide, .modal-setting-sec .modal-setting-swiper .modalsetting-back._hide { visibility: hidden; }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main { padding: 40px 30px; background-color: #fff; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main { padding: 20px 30px; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-txt, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-txt, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-txt, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-txt { margin-bottom: 20px; font-size: 2.0rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-txt, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-txt, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-txt, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-txt { font-size: 1.8rem; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point { position: relative; width: 100%; max-width: 715px; margin: 0 auto 30px; padding: 20px 100px; background-color: #e5f2fc; border-radius: 4em; }
@media screen and (max-width: 960px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point { padding-left: 30px; padding-right: 30px; } }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point { padding: 10px 20px; font-size: 1.6rem; border-radius: 2em; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point figure { position: absolute; top: 0; right: 0; width: 25.5944055944%; margin-top: -4.1958041958%; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point figure, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point figure { top: initial; bottom: 0; margin-top: 0; margin-bottom: -30px; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point dl dt { margin-bottom: 10px; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-start-point dl dt, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-start-point dl dt { margin-bottom: 5px; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user-wrap { margin-bottom: 40px; text-align: center; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user-wrap, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user-wrap { margin-bottom: 20px; } }
.modal-start-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user, .modal-start-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user, .modal-setting-sec .modal-start-swiper ._modalstart .modal-start-main .modal-user, .modal-setting-sec .modal-setting-swiper ._modalstart .modal-start-main .modal-user { color: #004ba3; text-decoration: underline; cursor: pointer; }
.modal-start-sec .modal-start-swiper ._modaldriver, .modal-start-sec .modal-start-swiper ._modalmanners, .modal-start-sec .modal-start-swiper ._modalmatching, .modal-start-sec .modal-start-swiper ._modalquiz, .modal-start-sec .modal-setting-swiper ._modaldriver, .modal-start-sec .modal-setting-swiper ._modalmanners, .modal-start-sec .modal-setting-swiper ._modalmatching, .modal-start-sec .modal-setting-swiper ._modalquiz, .modal-setting-sec .modal-start-swiper ._modaldriver, .modal-setting-sec .modal-start-swiper ._modalmanners, .modal-setting-sec .modal-start-swiper ._modalmatching, .modal-setting-sec .modal-start-swiper ._modalquiz, .modal-setting-sec .modal-setting-swiper ._modaldriver, .modal-setting-sec .modal-setting-swiper ._modalmanners, .modal-setting-sec .modal-setting-swiper ._modalmatching, .modal-setting-sec .modal-setting-swiper ._modalquiz { padding: 10px 0 30px; border: 4px solid #fff; border-radius: 1em; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modaldriver, .modal-start-sec .modal-start-swiper ._modalmanners, .modal-start-sec .modal-start-swiper ._modalmatching, .modal-start-sec .modal-start-swiper ._modalquiz, .modal-start-sec .modal-setting-swiper ._modaldriver, .modal-start-sec .modal-setting-swiper ._modalmanners, .modal-start-sec .modal-setting-swiper ._modalmatching, .modal-start-sec .modal-setting-swiper ._modalquiz, .modal-setting-sec .modal-start-swiper ._modaldriver, .modal-setting-sec .modal-start-swiper ._modalmanners, .modal-setting-sec .modal-start-swiper ._modalmatching, .modal-setting-sec .modal-start-swiper ._modalquiz, .modal-setting-sec .modal-setting-swiper ._modaldriver, .modal-setting-sec .modal-setting-swiper ._modalmanners, .modal-setting-sec .modal-setting-swiper ._modalmatching, .modal-setting-sec .modal-setting-swiper ._modalquiz { padding: 20px 0; } }
.modal-start-sec .modal-start-swiper ._modaldriver figure, .modal-start-sec .modal-start-swiper ._modalmanners figure, .modal-start-sec .modal-start-swiper ._modalmatching figure, .modal-start-sec .modal-start-swiper ._modalquiz figure, .modal-start-sec .modal-setting-swiper ._modaldriver figure, .modal-start-sec .modal-setting-swiper ._modalmanners figure, .modal-start-sec .modal-setting-swiper ._modalmatching figure, .modal-start-sec .modal-setting-swiper ._modalquiz figure, .modal-setting-sec .modal-start-swiper ._modaldriver figure, .modal-setting-sec .modal-start-swiper ._modalmanners figure, .modal-setting-sec .modal-start-swiper ._modalmatching figure, .modal-setting-sec .modal-start-swiper ._modalquiz figure, .modal-setting-sec .modal-setting-swiper ._modaldriver figure, .modal-setting-sec .modal-setting-swiper ._modalmanners figure, .modal-setting-sec .modal-setting-swiper ._modalmatching figure, .modal-setting-sec .modal-setting-swiper ._modalquiz figure { position: relative; }
.modal-start-sec .modal-start-swiper ._modaldriver figure figcaption, .modal-start-sec .modal-start-swiper ._modalmanners figure figcaption, .modal-start-sec .modal-start-swiper ._modalmatching figure figcaption, .modal-start-sec .modal-start-swiper ._modalquiz figure figcaption, .modal-start-sec .modal-setting-swiper ._modaldriver figure figcaption, .modal-start-sec .modal-setting-swiper ._modalmanners figure figcaption, .modal-start-sec .modal-setting-swiper ._modalmatching figure figcaption, .modal-start-sec .modal-setting-swiper ._modalquiz figure figcaption, .modal-setting-sec .modal-start-swiper ._modaldriver figure figcaption, .modal-setting-sec .modal-start-swiper ._modalmanners figure figcaption, .modal-setting-sec .modal-start-swiper ._modalmatching figure figcaption, .modal-setting-sec .modal-start-swiper ._modalquiz figure figcaption, .modal-setting-sec .modal-setting-swiper ._modaldriver figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalmanners figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalmatching figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalquiz figure figcaption { position: absolute; top: 0; left: 0; }
.modal-start-sec .modal-start-swiper ._modaldriver, .modal-start-sec .modal-setting-swiper ._modaldriver, .modal-setting-sec .modal-start-swiper ._modaldriver, .modal-setting-sec .modal-setting-swiper ._modaldriver { background-color: #d9f4ff; }
.modal-start-sec .modal-start-swiper ._modaldriver figure figcaption, .modal-start-sec .modal-setting-swiper ._modaldriver figure figcaption, .modal-setting-sec .modal-start-swiper ._modaldriver figure figcaption, .modal-setting-sec .modal-setting-swiper ._modaldriver figure figcaption { width: 49.6428571429%; margin: 11.3571428571% 0 0 25.2857142857%; }
.modal-start-sec .modal-start-swiper ._modalmanners, .modal-start-sec .modal-setting-swiper ._modalmanners, .modal-setting-sec .modal-start-swiper ._modalmanners, .modal-setting-sec .modal-setting-swiper ._modalmanners { background-color: #d9ffe6; }
.modal-start-sec .modal-start-swiper ._modalmanners figure figcaption, .modal-start-sec .modal-setting-swiper ._modalmanners figure figcaption, .modal-setting-sec .modal-start-swiper ._modalmanners figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalmanners figure figcaption { width: 40.6428571429%; margin: 6.6428571429% 0 0 30.7857142857%; }
.modal-start-sec .modal-start-swiper ._modalmatching, .modal-start-sec .modal-setting-swiper ._modalmatching, .modal-setting-sec .modal-start-swiper ._modalmatching, .modal-setting-sec .modal-setting-swiper ._modalmatching { background-color: #ffdd99; }
.modal-start-sec .modal-start-swiper ._modalmatching figure figcaption, .modal-start-sec .modal-setting-swiper ._modalmatching figure figcaption, .modal-setting-sec .modal-start-swiper ._modalmatching figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalmatching figure figcaption { width: 47.2857142857%; margin: 11.7857142857% 0 0 27.2142857143%; }
.modal-start-sec .modal-start-swiper ._modalquiz, .modal-start-sec .modal-setting-swiper ._modalquiz, .modal-setting-sec .modal-start-swiper ._modalquiz, .modal-setting-sec .modal-setting-swiper ._modalquiz { background-color: #ffff54; }
.modal-start-sec .modal-start-swiper ._modalquiz figure figcaption, .modal-start-sec .modal-setting-swiper ._modalquiz figure figcaption, .modal-setting-sec .modal-start-swiper ._modalquiz figure figcaption, .modal-setting-sec .modal-setting-swiper ._modalquiz figure figcaption { width: 37.0714285714%; margin: 9.8571428571% 0 0 31.5714285714%; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-in, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-in, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-in, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-in { max-width: 583px; margin: 0 auto; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-box, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-box, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-box, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-box { margin-bottom: 20px; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-btn { position: relative; display: block; width: 100%; padding: 2.5rem 0 1.8rem; border-radius: 20px; background-color: #004ba3; color: #fff; font-weight: 700; text-align: center; cursor: pointer; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-btn:focus, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-btn:focus, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-btn:focus, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-btn:focus { outline: 3px solid #953232; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock { background-color: #c8cbd9; cursor: initial; }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock { position: absolute; top: 50%; left: 50%; display: flex; justify-content: center; align-items: center; width: 6.75rem; height: 6.75rem; border-radius: 50%; background-color: #fff; transform: translate(-50%, -50%); }
.modal-start-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock .ico, .modal-start-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock .ico, .modal-setting-sec .modal-start-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock .ico, .modal-setting-sec .modal-setting-swiper .modal-stage .modal-stage-btn._lock .modal-stage-lock .ico { width: 2.38rem; }
.modal-start-sec .modal-start-swiper ._modaldriverstart, .modal-start-sec .modal-setting-swiper ._modaldriverstart, .modal-setting-sec .modal-start-swiper ._modaldriverstart, .modal-setting-sec .modal-setting-swiper ._modaldriverstart { height: 100%; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage { padding: 25px; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll { max-height: 392px; padding-top: 5px; overflow-y: auto; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar { width: 4px; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track { background-color: #d7dcf7; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb { background-color: #004ba3; }
.modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-btn { font-size: 3.4rem; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modaldriverstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modaldriverstart .modal-stage .modal-stage-btn { font-size: 2.2rem; } }
.modal-start-sec .modal-start-swiper ._modalmannersstart, .modal-start-sec .modal-setting-swiper ._modalmannersstart, .modal-setting-sec .modal-start-swiper ._modalmannersstart, .modal-setting-sec .modal-setting-swiper ._modalmannersstart { height: 100%; }
.modal-start-sec .modal-start-swiper ._modalmannersstart .modal-stage, .modal-start-sec .modal-setting-swiper ._modalmannersstart .modal-stage, .modal-setting-sec .modal-start-swiper ._modalmannersstart .modal-stage, .modal-setting-sec .modal-setting-swiper ._modalmannersstart .modal-stage { padding: 70px 25px; }
.modal-start-sec .modal-start-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalmannersstart .modal-stage .modal-stage-btn { font-size: 3.4rem; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalmannersstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalmannersstart .modal-stage .modal-stage-btn { font-size: 2.2rem; } }
.modal-start-sec .modal-start-swiper ._modalmatchingstart, .modal-start-sec .modal-setting-swiper ._modalmatchingstart, .modal-setting-sec .modal-start-swiper ._modalmatchingstart, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart { height: 100%; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage { padding: 25px 25px 40px; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar { width: 4px; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-track { background-color: #d7dcf7; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-scroll::-webkit-scrollbar-thumb { background-color: #004ba3; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-btn { padding: 2.4rem 0 2rem; font-size: 2.7rem; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-btn { font-size: 2.2rem; } }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide { display: flex; justify-content: center; align-items: center; margin-top: 1rem; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol { position: relative; display: flex; align-items: center; margin-right: 1em; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol::before, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol::before, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol::before, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #c8cbd9; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li { position: relative; margin-right: 1.5rem; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li:last-child, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li:last-child, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li:last-child, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li:last-child { margin-right: 0; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear { padding: 0.3rem; background-color: #fff; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear .ico, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear .ico, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear .ico, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li._clear .ico { width: 3.4rem; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li span, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li span, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li span, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-guide ol li span { display: inline-block; width: 1.4em; border-radius: 50%; background-color: #c8cbd9; color: #004ba3; font-size: 2rem; font-weight: 700; text-align: center; }
.modal-start-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-txt, .modal-start-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-txt, .modal-setting-sec .modal-start-swiper ._modalmatchingstart .modal-stage .modal-stage-txt, .modal-setting-sec .modal-setting-swiper ._modalmatchingstart .modal-stage .modal-stage-txt { text-align: center; }
.modal-start-sec .modal-start-swiper ._modalquizstart, .modal-start-sec .modal-setting-swiper ._modalquizstart, .modal-setting-sec .modal-start-swiper ._modalquizstart, .modal-setting-sec .modal-setting-swiper ._modalquizstart { height: 100%; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage { padding: 25px; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lead, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lead, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lead, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lead { margin-bottom: 25px; text-align: center; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-in, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-in, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-in, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-in { display: flex; flex-wrap: wrap; justify-content: space-between; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box { width: 47.8559176672%; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft { position: relative; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft .modal-stage-btn { opacity: 0.3; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft::before, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft::before, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-box._draft::before, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-box._draft::before { content: ''; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: url("../img/game/quiz/middle_h001.png") no-repeat center center; pointer-events: none; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-btn, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-btn, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 2rem; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-label { font-size: 2.2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-label, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-label { font-size: 2rem; } }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv { font-size: 4.6rem; font-weight: 700; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv { font-size: 3.2rem; } }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv rt, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv rt, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv rt, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._lv rt { font-size: 30%; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num { margin: 0 0.5rem; font-size: 4.3rem; font-weight: 700; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._num { font-size: 3rem; } }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit { font-size: 3.5rem; font-weight: 700; }
@media screen and (max-width: 750px) { .modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit { font-size: 2.4rem; } }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit rt, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit rt, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit rt, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-lv ._unit rt { font-size: 40%; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-clear, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-clear, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-clear, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-clear { position: absolute; top: -0.5rem; right: -0.5rem; }
.modal-start-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-clear .ico, .modal-start-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-clear .ico, .modal-setting-sec .modal-start-swiper ._modalquizstart .modal-stage .modal-stage-clear .ico, .modal-setting-sec .modal-setting-swiper ._modalquizstart .modal-stage .modal-stage-clear .ico { width: 4.14rem; }

.modal-mypage-sec { display: none; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
.modal-mypage-sec .modal-in { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2rem; overflow-y: auto; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-in { padding: 20px; } }
.modal-mypage-sec .modal-con { position: relative; width: 100%; max-width: 800px; margin: auto; border-radius: 1em; }
@media screen and (max-width: 960px) { .modal-mypage-sec .modal-con { max-width: 650px; } }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-con { padding: 20px 0; } }
.modal-mypage-sec .modal-mypage-swiper { overflow: hidden; }
.modal-mypage-sec .modal-mypage-swiper .swiper-slide { height: auto; }
.modal-mypage-sec .modal-mypage-swiper .swiper-slide > .swiper-slide-in { display: none; }
.modal-mypage-sec .modal-mypage-swiper .swiper-slide.swiper-slide-active > .swiper-slide-in { display: block; }
.modal-mypage-sec .modal-close { z-index: 999; position: absolute; top: 0; right: 0; width: 47px; margin-top: -15px; margin-right: -15px; cursor: pointer; }
.modal-mypage-sec .modal-box { padding: 40px 30px 0; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-box { padding: 20px 30px; } }
.modal-mypage-sec .modal-mypage-top { position: relative; padding: 20px; background-color: #e5f2fc; border-top-left-radius: 1em; border-top-right-radius: 1em; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-top { padding: 20px; } }
.modal-mypage-sec .modal-mypage-top .modal-mypage-ttl { font-size: 2.9rem; font-weight: 700; text-align: center; color: #004ba3; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-top .modal-mypage-ttl { font-size: 2.2rem; } }
.modal-mypage-sec .modal-mypage-main { background-color: #fff; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; overflow: hidden; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-main-item { position: relative; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-subttl { padding: 20px 30px; border-bottom: 1px solid #80a5d1; font-size: 2.6rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-subttl { padding-left: 45px; font-size: 2.2rem; } }
.modal-mypage-sec .modal-mypage-main .modal-back { position: absolute; top: 50%; left: 0; width: 43px; margin-left: 30px; margin-top: -21px; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-back { width: 33px; margin-left: 10px; margin-top: -16px; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con { padding: 30px; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul { width: 100%; max-width: 550px; margin: 0 auto; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul li { margin-bottom: 20px; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu { display: block; width: 100%; padding: 30px; font-size: 2.0rem; font-weight: 700; text-align: center; text-decoration: none; border-width: 4px; border-style: solid; border-radius: 1em; background-color: #F4FAFE; transition: all .6s; cursor: pointer; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu { padding: 20px; font-size: 1.6rem; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu:hover { opacity: 0.7; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu:last-child { margin-bottom: 0; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu._history, .modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu._ranking_mc, .modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu._card { border-color: #004ba3; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu._ranking { border-color: #007ad6; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con ul .modal-mypage-menu._start { border-color: #009efe; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history { overflow-y: scroll; height: calc(100vh/2); }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history::-webkit-scrollbar { width: 4px; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history::-webkit-scrollbar-track { background-color: #d7dcf7; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history::-webkit-scrollbar-thumb { background-color: #004ba3; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history table { width: 100%; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history thead { position: sticky; top: 0; z-index: 1; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history thead tr th { background-color: #fff; padding: 20px 10px; border-bottom: 1px solid #bfd2e8; font-size: 2rem; color: #004ba3; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history thead tr th:nth-child(1) { width: 8em; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history thead tr th:nth-child(2) { text-align: left; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history thead tr th:nth-child(3) { width: 8em; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history tbody tr:nth-child(odd) { background-color: #f1f6fd; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history tbody tr td { padding: 20px 10px; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history tbody tr td { font-size: 1.4rem; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history tbody tr td:nth-child(1) { text-align: center; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-history tbody tr td:nth-child(3) { text-align: center; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .modal-ranking-txt { padding: 1rem; font-size: 1.6rem; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .modal-ranking-txt { font-size: 1.4rem; text-align: left; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu { display: flex; justify-content: center; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn { display: flex; align-items: center; justify-content: center; width: 41.25%; margin: 0 1.25% 5px; padding: 15px 5px; background-color: #dcdcdc; font-size: 2.6rem; cursor: pointer; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn { width: 100%; padding: 10px; font-size: 1.4rem; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn p { color: #1F1F1F; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn:hover, .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn.active { background-color: #004ba3; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn:hover p, .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabmenu .tabmenu-btn.active p { color: #fff; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .tabcontents, .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 ._con { min-height: calc(100vh/2); }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking { width: calc(100% - 10px); overflow-y: scroll; height: calc(100vh/2); padding-right: 10px; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking { width: 100%; padding-right: 0; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking::-webkit-scrollbar { width: 4px; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking::-webkit-scrollbar-track { background-color: #d7dcf7; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking::-webkit-scrollbar-thumb { background-color: #004ba3; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking table { width: 100%; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking thead { position: sticky; top: 0; z-index: 1; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking thead tr th { background-color: #fff; padding: 20px 10px; border-bottom: 1px solid #bfd2e8; font-size: 2rem; color: #004ba3; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking thead tr th { font-size: 1.6rem; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr:nth-child(odd) { background-color: #f1f6fd; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr.active { background-color: #91dcff; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td { padding: 20px 10px; vertical-align: middle; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td { padding-left: 5px; padding-right: 5px; font-size: 1.6rem; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._rank { width: 9em; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._rank { width: 6em; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._pt { width: 7em; text-align: center; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._ctime { width: 9em; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._ctime { width: 7em; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._date { width: 9em; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._date { width: 5em; }
  .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td._date span { display: block; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-box { position: relative; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-box span { position: absolute; top: 50%; left: 0; width: 32px; transform: translateY(-50%); }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-box span { width: 1.2em; } }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-profile { display: flex; align-items: center; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-profile .ico-profile { display: block; width: 2em; height: 2em; margin-right: 1rem; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.modal-mypage-sec .modal-mypage-main .modal-mypage-con02 .table-ranking tbody tr td .table-ranking-profile p { flex: 1; }
.modal-mypage-sec .modal-matching-swiper { width: 100%; margin-top: 40px; margin-bottom: 40px; overflow: hidden; }
.modal-mypage-sec .modal-matching-swiper .swiper-slide { width: 50.4166666667%; margin: 0 1.25%; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-matching-swiper .swiper-slide { width: 66.6666666667%; } }
.modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig { position: relative; width: 100%; border-radius: 2rem; overflow: hidden; pointer-events: all; }
.modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #00aadc; border-radius: 2rem; box-sizing: border-box; }
.modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig ._cardfigcap { position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: center; padding: 1rem 2rem; border-bottom-right-radius: 2rem; background-color: #004ba3; color: #fff; font-size: 2rem; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig ._cardfigcap { font-size: 1.6rem; } }
.modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig ._cardfigcap i { display: inline-block; width: 2em; margin-right: 0.5rem; border-radius: 50%; background-color: #fff; color: #004ba3; font-size: 1.6rem; font-style: normal; text-align: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-matching-swiper .swiper-slide ._cardfig ._cardfigcap i { font-size: 1.4rem; } }
.modal-mypage-sec .modal-matching-swiper .tool-slide { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.modal-mypage-sec .modal-matching-swiper .swiper-pagination { position: static; width: auto; margin: 0 1rem; }
.modal-mypage-sec .modal-matching-swiper .swiper-pagination .swiper-pagination-bullets { position: static; margin: 0; width: 100%; }
.modal-mypage-sec .modal-matching-swiper .swiper-pagination .swiper-pagination-bullet { width: 13px !important; height: 13px !important; margin: 0 5px !important; background: #d7dcf7; opacity: 1; }
.modal-mypage-sec .modal-matching-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #004ba3; }
.modal-mypage-sec .modal-matching-swiper .slide-btn { width: 43px; cursor: pointer; }
@media screen and (max-width: 750px) { .modal-mypage-sec .modal-matching-swiper .slide-btn { width: 33px; } }
.modal-mypage-sec .modal-mypage-slider { position: relative; display: none; width: 100%; height: 100%; overflow: hidden; }
.modal-mypage-sec._modalmatching .modal-mypage-top { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
@media screen and (max-width: 750px) { .modal-mypage-sec._modalmatching .modal-mypage-top { flex-direction: column-reverse; align-items: initial; row-gap: 10px; } }
.modal-mypage-sec._modalmatching .modal-mypage-top::before { content: ''; flex: 1; }
@media screen and (max-width: 750px) { .modal-mypage-sec._modalmatching .modal-mypage-top::before { display: none; } }
.modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-ttl { width: 14em; }
@media screen and (max-width: 750px) { .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-ttl { width: 100%; } }
.modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back, .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back2 { display: none; flex: 1; align-items: center; cursor: pointer; }
.modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back._show, .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back2._show { display: flex; }
.modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back .ico, .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back2 .ico { width: 54px; }
@media screen and (max-width: 750px) { .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back .ico, .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back2 .ico { width: 2em; } }
.modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back span, .modal-mypage-sec._modalmatching .modal-mypage-top .modal-mypage-back2 span { margin-left: 10px; font-weight: 700; color: #004ba3; }
.modal-mypage-sec._modalcard .modal-con { max-width: 1200px; }
@media screen and (max-width: 1300px) { .modal-mypage-sec._modalcard .modal-con { max-width: 900px; } }
@media screen and (max-width: 960px) { .modal-mypage-sec._modalcard .modal-con { max-width: 650px; } }
@media screen and (max-width: 750px) { .modal-mypage-sec._modalcard .modal-con { padding: 20px 0; } }
.modal-mypage-sec._modalcard .modal-mypage-slider { display: block; }
.modal-mypage-sec .modal-matching-list._hide { display: none; }
.modal-mypage-sec .modal-matching-detail { display: none; padding: 3rem 2rem; background-color: #fff; }
.modal-mypage-sec .modal-matching-detail .modal-matching-detail-in { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 2rem; }
.modal-mypage-sec .modal-matching-detail .modal-matching-item { display: none; width: 100%; max-width: 1005px; }
@media screen and (max-width: 1300px) { .modal-mypage-sec .modal-matching-detail .modal-matching-item { max-width: 100%; } }
.modal-mypage-sec .modal-matching-detail .modal-matching-item .matching-result-fig { max-width: 880px; margin: 0 auto; }
.modal-mypage-sec .modal-matching-detail .modal-matching-item-swiper { overflow: hidden; }
.modal-mypage-sec .modal-loading { display: none; position: relative; }
.modal-mypage-sec .modal-loading._show { display: block; }
.modal-mypage-sec .modal-loading p { position: absolute; top: 40px; left: 0; width: 100%; text-align: center; }

.matching-result-fig { position: relative; border-radius: 2rem; overflow: hidden; }
.matching-result-fig figure { position: relative; }
.matching-result-fig figure::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #00aadc; border-radius: 2rem; box-sizing: border-box; }
.matching-result-fig .matching-result-fig-cap { position: absolute; top: 0; left: 0; display: flex; align-items: center; padding: 1rem 2rem; border-bottom-right-radius: 2rem; background-color: #004ba3; color: #fff; font-size: 2rem; }
@media screen and (max-width: 750px) { .matching-result-fig .matching-result-fig-cap { font-size: 1.6rem; } }
.matching-result-fig .matching-result-fig-cap i { display: inline-block; width: 2em; margin-right: 0.5rem; border-radius: 50%; background-color: #fff; color: #004ba3; font-size: 1.6rem; font-style: normal; text-align: center; }
@media screen and (max-width: 750px) { .matching-result-fig .matching-result-fig-cap i { font-size: 1.4rem; } }
.matching-result-fig .matching-result-detail-btn { position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 18rem; margin: 0 4.1428571429% 3.7142857143% 0; padding: 0.8rem 1rem; border: 2px solid #004ba3; border-radius: 2em; background-color: #fff; cursor: pointer; }
@media screen and (max-width: 750px) { .matching-result-fig .matching-result-detail-btn { width: 8em; padding: 0.5rem 1rem; } }
.matching-result-fig .matching-result-detail-btn span { flex: 1; color: #004ba3; font-size: 2.2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 750px) { .matching-result-fig .matching-result-detail-btn span { font-size: 1.6rem; } }
.matching-result-fig .matching-result-detail-btn .ico { width: 3.1rem; margin-left: 0.5rem; }
@media screen and (max-width: 750px) { .matching-result-fig .matching-result-detail-btn .ico { width: 2rem; } }

.matching-result-detail { display: flex; justify-content: space-between; max-width: 1005px; margin: 0 auto; }
@media screen and (max-width: 750px) { .matching-result-detail { display: block; } }
.matching-result-detail .matching-result-detail-fig { width: 45.7711442786%; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-fig { width: 100%; margin-bottom: 2rem; } }
.matching-result-detail .matching-result-detail-fig figure { position: relative; border-radius: 2rem; overflow: hidden; }
.matching-result-detail .matching-result-detail-fig figure::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #00aadc; border-radius: 2rem; box-sizing: border-box; }
.matching-result-detail .matching-result-detail-con { width: 46.7661691542%; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con { width: 100%; } }
.matching-result-detail .matching-result-detail-con .matching-result-detail-ttl { display: flex; align-items: flex-start; margin-bottom: 2rem; padding-top: 0.5em; font-size: 2.4rem; font-weight: 700; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-detail-ttl { font-size: 1.8rem; } }
.matching-result-detail .matching-result-detail-con .matching-result-detail-ttl i { display: inline-block; width: 2em; margin-top: 0.4rem; margin-right: 0.5rem; border-radius: 50%; background-color: #004ba3; color: #fff; font-size: 1.8rem; font-style: normal; text-align: center; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-detail-ttl i { margin-top: 0.3em; font-size: 1.4rem; } }
.matching-result-detail .matching-result-detail-con .matching-result-detail-ttl span { flex: 1; color: #004ba3; font-size: 3.4rem; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-detail-ttl span { font-size: 2.4rem; } }
.matching-result-detail .matching-result-detail-con .matching-result-detail-ttl ruby rt { font-size: 30%; }
.matching-result-detail .matching-result-detail-con dl { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; color: #004ba3; font-size: 2rem; font-weight: 700; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con dl { font-size: 1.6rem; } }
.matching-result-detail .matching-result-detail-con dl dt { white-space: nowrap; }
.matching-result-detail .matching-result-detail-con dl dd { flex: 1; }
.matching-result-detail .matching-result-detail-con .matching-result-detail-txt { margin-top: 2rem; margin-bottom: 1rem; }
.matching-result-detail .matching-result-detail-con .matching-result-back-btn { display: flex; justify-content: center; align-items: center; width: 18rem; margin-left: auto; padding: 0.8rem 1rem; border: 2px solid #004ba3; border-radius: 2em; background-color: #fff; cursor: pointer; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-back-btn { width: 8em; padding: 0.5rem 1rem; } }
.matching-result-detail .matching-result-detail-con .matching-result-back-btn span { flex: 1; color: #004ba3; font-size: 2.2rem; font-weight: 700; text-align: center; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-back-btn span { font-size: 1.6rem; } }
.matching-result-detail .matching-result-detail-con .matching-result-back-btn .ico { width: 3.1rem; margin-right: 0.5rem; }
@media screen and (max-width: 750px) { .matching-result-detail .matching-result-detail-con .matching-result-back-btn .ico { width: 2rem; } }

.clearfix { zoom: 1; }
.clearfix::before { content: ""; display: table; }
.clearfix::after { content: ""; display: table; clear: both; }

.w100 { width: 100%; }

.tar { text-align: right !important; }

.tac { text-align: center !important; }

.mab0 { margin-bottom: 0 !important; }

.mab10 { margin-bottom: 10px !important; }

.mab20 { margin-bottom: 20px !important; }

.mab40 { margin-bottom: 40px !important; }

.lh-xl { line-height: 2; }

.lh-l { line-height: 1.8; }

.lh-m { line-height: 1.6; }

.lh-s { line-height: 1.4; }

.lh-ss { line-height: 1.2; }

.lh-no { line-height: 1; }

@media screen and (max-width: 750px) { .sp-lh-m { line-height: 1.6; } }

@media screen and (max-width: 750px) { .sp-lh-s { line-height: 1.4; } }

._ai-fe { align-items: flex-end; }

._ai-c { align-items: center; }

rt { margin-bottom: 2px; }

@-moz-document url-prefix() { rt { margin-bottom: 0; } }
.js-anime-fadein { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-fadein.js-anime-on { animation-name: fadeIn; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.js-anime-slide { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slide.js-anime-on { animation-name: slide; }

@keyframes slide { 0% { opacity: 0; transform: translateY(100px); }
  100% { opacity: 1; transform: translateY(0); } }
.js-anime-slideleft { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slideleft.js-anime-on { animation-name: slideLeft; }

@keyframes slideLeft { 0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); } }
.js-anime-slideright { opacity: 0; animation-duration: .5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.js-anime-slideright.js-anime-on { animation-name: slideRight; }

@keyframes slideRight { 0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); } }
@keyframes bound { 0% { transform: translateY(0); }
  5% { transform: translateY(-25px); }
  10% { transform: translateY(0); }
  20% { transform: translateY(-15px); }
  25% { transform: translateY(0); }
  30% { transform: translateY(0); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); } }
@keyframes poyopoyo { 0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70% { transform: scale(0.95); } }
@media print { .js-anime-fadein, .js-anime-slide, .js-anime-slideleft, .js-anime-slideright { opacity: initial; } }

/*# sourceMappingURL=style.css.map */