/*--------------------------------------------------------------
# Setting
--------------------------------------------------------------*/
/* color */
/* text */
/* font */
/*--------------------------------------------------------------
# normalize
--------------------------------------------------------------*/
html { overflow-x: hidden; }

body { font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 16px; font-weight: normal; overflow-x: hidden; color: #CCCCCC; letter-spacing: 0.06em; line-height: 1.6; background: #0D0D0D; position: relative; }

body::after { content: ""; position: fixed; background: url(../img/bg.png) no-repeat center center/cover; width: 100vw; height: 100vh; opacity: 0.2; left: 0; top: 0; z-index: -1; }

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; line-height: 1.6; }

a { color: #C39C37; text-decoration: underline; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

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

.container { max-width: 1200px; width: 90%; padding: 0; }

/*--------------------------------------------------------------
# common
--------------------------------------------------------------*/
/* heading */
.p-heading2 { text-align: center; font-family: 'Noto Serif JP', serif; font-size: 30px; margin: 60px 0; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-heading2 { margin: 0 0 25px; font-size: 20px; } }

.p-heading2 span { font-family: 'Alice', serif; color: #C39C37; font-size: 24px; display: block; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-heading2 span { font-size: 14px; } }

.p-heading3 { font-size: 22px; font-family: 'Noto Serif JP', serif; text-align: center; color: #C39C37; margin: 55px 0 20px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-heading3 { font-size: 18px; margin: 40px 0 12px; } }

.p-read { font-size: 20px; font-weight: 400; color: #fff; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-read { font-size: 16px; font-weight: 500; } }

.p-button__line { display: block; border: solid 1px #C39C37; color: #C39C37; font-size: 18px; text-align: center; padding: 30px; font-weight: 600; line-height: 1em; position: relative; text-decoration: none; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-button__line { padding: 20px; font-size: 16px; } }

.p-button__line:hover { background: #C39C37; color: #fff; }

.p-button__line:hover::after { background-image: url(../img/arrow-white.svg); }

.p-button__line::after { content: ""; position: absolute; background: url(../img/arrow-yellow.svg) no-repeat 0 0/contain; width: 20px; height: 20px; right: 30px; top: 0; bottom: 0; margin: auto; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-button__line::after { width: 15px; height: 15px; right: 20px; } }

/* list */
.p-list__defalut { padding: 0; text-align: left; }

.p-list__defalut li { position: relative; list-style: none; padding-left: 15px; margin-bottom: 0.5rem; line-height: 1.8; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-list__defalut li { font-size: 14px; } }

.p-list__defalut li::before { content: ""; position: absolute; background: #C39C37; width: 4px; height: 4px; left: 0; top: 11px; }

/* table */
.p-table { width: 100%; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-table { border-collapse: collapse; white-space: nowrap; margin-right: 20px; } }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-table__wrap { overflow-x: scroll; width: 105%; } }

.p-table thead { background: #202020; }

.p-table thead th { padding: 20px; text-align: left; color: #C39C37; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-table thead th { padding: 12px; font-size: 14px; } }

.p-table tbody tr { border-bottom: solid 1px #202020; }

.p-table tbody td { padding: 20px; text-align: left; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-table tbody td { padding: 12px; font-size: 14px; } }

.p-table tbody .closed span { font-size: 11.5px; color: #C39C37; border: solid 1px #C39C37; padding: 2px 5px; margin-right: 10px; }

.p-table tbody .closed td { color: #3E3E3E; }

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
footer { position: relative; }

footer address { font-style: normal; font-size: 14px; font-family: 'Alice', serif; text-align: center; }

footer .footer__logo img { width: 100%; }

footer .footer__logo a:hover { opacity: 0.8; }

footer .footer__sns { position: absolute; right: 20px; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

@media screen and (min-width: 0px) and (max-width: 768px) { footer .footer__sns { position: inherit; bottom: inherit; right: inherit; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 30px; } }

footer .footer__sns_tit { margin-right: 20px; font-family: 'Alice', serif; font-size: 14px; }

@media screen and (min-width: 0px) and (max-width: 768px) { footer .footer__sns_tit { text-align: center; margin-right: 0; } }

footer .footer__sns_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

footer .footer__sns_list a { padding: 10px; }

footer .footer__sns_list a:hover { opacity: 0.7; }

footer .footer__sns_list a img { height: 25px; }

/*--------------------------------------------------------------
# mainimg
--------------------------------------------------------------*/
.mainimg { height: 100vh; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; }

@media screen and (min-width: 0px) and (max-width: 992px) { .mainimg { height: 640px; } }

.mainimg__logo { position: absolute; left: 2vw; top: 2vw; width: 260px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .mainimg__logo { width: 180px; } }

.mainimg__logo a:hover { opacity: 0.8; }

.mainimg__logo img { width: 100%; }

.mainimg__catch { max-width: 1000px; width: 80%; }

@media screen and (min-width: 0px) and (max-width: 768px) { .mainimg__catch { width: 80%; max-width: 350px; height: 80%; -o-object-fit: contain; object-fit: contain; } }

.mainimg__catch img { width: 100%; }

@media screen and (min-width: 0px) and (max-width: 768px) { .mainimg__catch img { height: 100%; -o-object-fit: contain; object-fit: contain; } }

.mainimg__method { position: absolute; right: 2vw; bottom: 2vw; width: 140px; }

@media screen and (min-width: 0px) and (max-width: 992px) { .mainimg__method { width: 120px; } }

@media screen and (min-width: 0px) and (max-width: 768px) { .mainimg__method { width: 80px; bottom: 0; } }

.mainimg__method a:hover { opacity: 0.8; }

.mainimg__method img { width: 100%; }

/*--------------------------------------------------------------
# appaeal
--------------------------------------------------------------*/
.appeal { margin: 80px auto; }

@media screen and (min-width: 0px) and (max-width: 992px) { .appeal { margin: 40px auto; } }

.appeal__box { background: #202020; padding: 40px; }

.appeal h4 { font-size: 18px; font-weight: 500; margin-bottom: 30px; color: #fff; }

@media screen and (min-width: 0px) and (max-width: 992px) { .appeal h4 { font-size: 16px; margin-bottom: 15px; } }

/*--------------------------------------------------------------
# about
--------------------------------------------------------------*/
.about { margin: 100px 0; }

.about h2 { font-family: 'Noto Serif JP', serif; color: #C39C37; font-size: 40px; font-weight: 400; text-align: center; margin: 40px 0; }

@media screen and (min-width: 0px) and (max-width: 768px) { .about h2 { font-size: 30px; margin: 50px 0 20px; line-height: 1.3; } }

.about h2 span { font-size: 30px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .about h2 span { font-size: 22px; } }

@media screen and (min-width: 0px) and (max-width: 992px) { .about__catch { max-width: 600px; width: 80%; margin: auto; } }

.about__catch div { margin: auto; }

.about__catch div img { width: 100%; }

@media screen and (min-width: 0px) and (max-width: 768px) { .about__catch_2 { width: 50px; margin: 20px auto !important; } }

.about p { text-align: center; font-size: 18px; margin-bottom: 20px; line-height: 1.9; }

@media screen and (min-width: 0px) and (max-width: 768px) { .about p { font-size: 16px; text-align: left; } }

.about h3 { text-align: center; font-size: 20px; position: relative; padding-bottom: 26px; margin: 80px 0 30px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .about h3 { font-size: 18px; margin: 40px 0 20px; } }

.about h3::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 6.5px 0 6.5px; border-radius: 1px; border-color: #fff transparent transparent transparent; }

.about .p-button__line { max-width: 490px; margin: auto; }

/*--------------------------------------------------------------
# campaign
--------------------------------------------------------------*/
.section-bg { background: #0D0D0D; padding: 60px 0 20px; }

.campaign__flow { background: #202020; max-width: 600px; margin: auto; padding: 50px 0 60px; position: relative; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow { padding: 40px 0 50px; } }

.campaign__flow::before { content: ""; position: absolute; background: url(../img/flow-obi.png) no-repeat 0 0/contain; left: 0; top: 0; width: 148px; height: 93px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow::before { width: 110px; height: 70px; } }

.campaign__flow_arrow { width: 0; height: 0; margin: auto; border-style: solid; border-width: 11px 6.5px 0 6.5px; border-color: #fff transparent transparent transparent; margin: 50px auto; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow_arrow { margin: 30px auto; } }

.campaign__flow_number { color: #C39C37; font-size: 24px; font-family: 'Alice', serif; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow_number { font-size: 20px; } }

.campaign__flow_icon { margin: 30px 0 20px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow_icon { margin: 20px 0; } }

.campaign__flow_tit { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 30px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow_tit { font-size: 16px; } }

.campaign__flow a { color: #C39C37; border: solid 1px #C39C37; padding: 18px 40px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: none; }

@media screen and (min-width: 0px) and (max-width: 768px) { .campaign__flow a { display: block; width: 85%; margin: auto; padding: 15px; } }

.campaign__flow a:hover { background-color: #C39C37; color: #fff; }

.campaign__privacylink { color: #CCCCCC; border: solid 1px #CCCCCC; padding: 18px 40px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; }

.campaign__privacylink i { background: url(../img/icon-target.svg) no-repeat 0 0/contain; width: 1em; height: 1em; margin-left: 10px; }

.campaign__privacylink:hover { border-color: #C39C37; }

.campaign__privacylink:hover i { background-image: url(../img/icon-target-yellow.svg); }

/*--------------------------------------------------------------
# modal
--------------------------------------------------------------*/
.modal-header { font-size: 1.25rem; font-weight: bold; color: #0D0D0D; padding: 30px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .modal-header { padding: 20px; } }

.modal-footer { background: #f2f2f2; border-top: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 30px; }

.modal-footer__tel { max-width: 250px; margin: auto; }

.modal-body { padding: 30px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .modal-body { padding: 20px; } }

.modal-body .cm-iframe { width: 100%; margin: 0; padding-bottom: 56.25%; }

.btn-close { color: #fff; }

.contact-personal__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-flow: wrap; flex-flow: wrap; }

@media screen and (min-width: 0px) and (max-width: 768px) { .contact-personal__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }

.contact-personal__box { -ms-flex-preferred-size: 49%; flex-basis: 49%; margin-bottom: 2%; }

.contact-personal__box a { display: block; padding: 25px; background: #f2f2f2; height: 100%; text-decoration: none; }

@media screen and (min-width: 0px) and (max-width: 768px) { .contact-personal__box a { padding: 18px; } }

.contact-personal__box a p { color: #202020; }

.contact-personal__box a:hover { background: #E6E6E6; }

.contact-personal__box a:hover .contact-personal__title { text-decoration: underline; }

.contact-personal__title { color: #C39C37; font-weight: bold; margin-bottom: 10px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .contact-personal__title { font-size: 15px; margin-bottom: 5px; } }

.contact-personal p { font-size: 14px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .contact-personal p { font-size: 13px; } }

.p-btn__sub { border: solid 1px #C39C37; color: #C39C37; border-radius: 0; display: block; font-weight: bold; padding: 20px; position: relative; text-align: left; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-btn__sub { padding: 15px; } }

.p-btn__sub::after { position: absolute; content: ""; right: 20px; top: 0; bottom: 0; margin: auto; background: url(../img/arrow-yellow.svg) no-repeat 0 0/100% auto; width: 20px; height: 20px; }

@media screen and (min-width: 0px) and (max-width: 768px) { .p-btn__sub::after { right: 15px; } }

.p-btn__sub[role="button"]::after { background-image: url(../img/arrow-yellow-b.svg); }

.p-btn__sub[role="button"][aria-expanded="true"]::after { background-image: url(../img/arrow-yellow-t.svg); }

.p-btn__sub:hover { color: #fff; background-color: #C39C37; }

.p-btn__sub:hover::after { background-image: url(../img/arrow-white.svg); }

.p-btn__sub:hover[role="button"]::after { background-image: url(../img/arrow-white-b.svg); }

.p-btn__sub:hover[role="button"][aria-expanded="true"]::after { background-image: url(../img/arrow-white-t.svg); }
/*# sourceMappingURL=style.css.map */