@charset "UTF-8";
:root {
  --color-right-blue: #558db4;
}
#businesscard img {
  display: block;
  width: 100%;
  height: auto;
}
body.is-pc a:hover {
  opacity: 1 !important
}
/*=========================
▼▼共通▼▼
===========================*/
.header {
  width: 100%;
  z-index: 3;
  background: #fff;
  border-bottom: 2px solid #f0652d;
  position: fixed;
  top: 0;
  left: 0;
  border-top: 3px solid #b60081;
}
.header_wrapper {
  height: 72px;
  padding: 0 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 1064px;
  margin: 0 auto;
}
.header_wrapper .header_logo {
  position: absolute;
  top: 53%;
  left: 50%;
  width: 276px;
  transform: translate(-50%, -50%);
}
.header_wrapper .header_logo img {
  width: 100%;
  height: auto;
}
.page_wrapper {
  position: relative;
}
#businesscard .line_break {
  display: inline-block;
}
#businesscard {
  max-width: 100%;
  width: 100%;
  border: none;
  background-color: #f0652d;
  position: relative;
}
#businesscard .contents_wrapper {
  padding-top: 77px;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 2;
}
#businesscard a:hover,
button:hover {
  opacity: 1 !important;
  transition: 0.3s;
}
.o-footer {
  z-index: 2;
}
/*▼▼装飾▼▼*/
#businesscard .decoration_box {
  width: 100%;
  height: calc(100vh - 77px);
  border-radius: 100px 15px 100px 15px;
  border: 9px solid #f0652d;
  background-image: url(../images/bg_pc.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
  top: 77px;
  left: 0;
  z-index: 1;
}
/*▲▲装飾▲▲*/
#businesscard .parent {
  position: relative;
}
/*=========================
▲▲共通▲▲
===========================*/
/*=========================
▼▼左カラム▼▼
===========================*/
#businesscard .inner_logo {
  width: calc(100%/3);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 5% 0 6%;
}
#businesscard .inner_logo .logo {
  width: 26%;
  max-width: 500px;
  position: fixed;
  top: 32%;
}
/*=========================
▲▲左カラム▲▲
===========================*/
/*=========================
▼▼右カラム▼▼
===========================*/
#businesscard .inner_nav {
  width: calc(100% / 3);
  order: 3;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 6% 0 5%;
}
#businesscard .inner_nav .nav_wrapper {
  width: 26%;
  max-width: 450px;
  position: fixed;
  top: 32%;
  border: 5px solid #f1652d;
  border-radius: 15px;
  padding: 30px 20px 20px;
  background-color: #fff;
}
#businesscard .nav_wrapper::before {
  content: "";
  display: block;
  width: min(calc(62vw*.076), 62px);
  height: min(calc(60vw*.076), 60px);
  top: max(calc(-3vw*.076), -3px);
  left: max(calc(-3vw*.076), -3px);
  position: absolute;
  background-image: url(../images/nav_shape.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#businesscard .nav_title {
  width: 70%;
  margin: 0 auto min(calc(18vw* .066), 18px);
}
.nav_wrapper .back_page_block {
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  color: #404fde;
  background-color: #e1e7ff;
  padding: 7% 9% 11%;
  border-radius: 10px;
}
.nav_wrapper .back_page_block .back_btn_01 {
  box-shadow: 5px 5px 0px rgb(60 67 157);
  border-radius: 5px;
  transition-duration: .3s;
  margin-top: 2%;
}
.nav_wrapper .back_page_block .back_btn_01 img {
  border-radius: 5px;
}
.nav_wrapper.back_page_block .back_btn_01:hover {
  box-shadow: none;
  transform: translate(var(--font-5), var(--font-6));
}
#businesscard .nav_pc li {
  width: 50%;
  height: min(calc(58vw* .066), 58px);
  margin: 0 auto min(calc(18vw* .066), 18px);
  position: relative;
}
#businesscard .nav_pc li::before {
  content: "";
  display: block;
  width: 8%;
  height: 47%;
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
  position: absolute;
  background-image: url(../images/nav_arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  transition: 0.2s;
}
#businesscard .nav_pc li:hover::before {
  left: 3px;
}
#businesscard .nav_pc li::after {
  content: "";
  display: block;
  width: 113%;
  height: 10px;
  position: absolute;
  bottom: max(calc(-10vw* .076), -10px);
  left: -6%;
  background-image: url(../images/nav_dots_gray.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: min(calc(30vw * .065), 30px) min(calc(4vw * .065), 4px);
}
#businesscard .nav_pc li:nth-of-type(3)::after {
  display: none;
}
#businesscard .nav_pc li a {
  display: block;
  width: fit-content;
  height: 100%;
  padding: min(calc(16vw* .066), 16px) 0 min(calc(16vw* .066), 16px) min(calc(24vw* .066), 24px);
  position: relative;
  z-index: 1;
}
#businesscard .nav_pc li a::after {
  opacity: 0;
  transition-duration: .3s;
}
#businesscard .nav_pc li a::after {
  content: "";
  display: block;
  width: 0;
  height: 13px;
  bottom: 12%;
  left: min(calc(24vw* .066), 24px);
  transform: translateY(-50%);
  position: absolute;
  background-color: #ffec4e;
  transition: 0.3s;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}
#businesscard .nav_pc li .display::after, #businesscard .nav_pc li a:hover::after {
  width: calc(100% - min(calc(24vw* .066), 24px));
}
#businesscard .nav_pc li img {
  width: auto;
  height: 100%;
}
/*=========================
▲▲右カラム▲▲
===========================*/
/* navi */
#sp_navi_wrapper input {
  display: none;
}
#sp_navi_wrapper {
  position: relative;
  overflow: hidden;
  z-index: 3;
}
#main_nav~.close_bg {
  position: fixed;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  top: 0;
  left: 0;
  cursor: pointer;
  pointer-events: none;
  transition-duration: 0.3s;
}
#main_nav:checked~.close_bg {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.nav-icon-wrap {
  background: linear-gradient(90deg, rgba(255, 163, 125, 1) 0%, rgba(234, 75, 10, 1) 100%);
  border-radius: 6px;
  position: fixed;
  top: 16px;
  right: 12px;
  z-index: 999;
  transition-duration: 0.3s;
  border: 1px solid #fff;
}
.nav-icon {
  display: block;
  width: 44px;
  height: 44px;
  padding-top: 24px;
  text-align: center;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  position: relative;
}
.nav-icon p {
  font-size: 11px;
}
.nav-icon .navi_text {
  font-weight: 600;
}
.nav-icon::before,
.nav-icon::after {
  content: "";
  display: block;
  width: 26px;
  border-top: 2px solid #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  transition: 0.3s all;
}
.nav-icon::after {
  top: 17px;
}
.header-nav-wrap {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transition: all .5s;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
}
#main_nav:checked~.header-nav-wrap {
  display: block;
  top: 0;
  right: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  visibility: visible;
  opacity: 1;
  background-color: #ffefe3;
}
.header-nav-inner {
  width: 100%;
  max-width: 500px;
  margin: 70px auto 0;
  height: 100%;
}
.header-nav-inner.header-nav-inner-black, .header-nav-inner.header-nav-inner-gold {
  display: none;
}
div:has(#black:checked) .header-nav-inner-black, div:has(#gold:checked) .header-nav-inner-gold {
  display: block;
}
.header-nav-inner img {
  display: block;
  width: 100%;
  height: 100%;
}
.header-nav-inner::-webkit-scrollbar {
  display: none;
}
.header-nav {
  border-top: 1px solid var(--sp-nav-border);
  color: var(--nav-text);
}
#main_nav:checked~.nav-icon-wrap>.nav-icon {
  position: relative;
}
#main_nav:checked~.nav-icon-wrap>.nav-icon::before {
  width: 30px;
  top: 14px;
  left: 7px;
  transform: rotate(30deg);
  z-index: 999999;
}
#main_nav:checked~.nav-icon-wrap>.nav-icon::after {
  width: 30px;
  top: 14px;
  left: 7px;
  transform: rotate(-30deg);
  z-index: 999999;
}
#sp_navi_wrapper .contents_nav {
  width: 90%;
  padding: var(--font-52) 12%;
  margin: 0 5%;
  position: relative;
  border: 5px solid #f1652d;
  background-color: #fff;
  border-radius: 15px;
  position: relative;
}
#sp_navi_wrapper .contents_nav::before {
  content: "";
  display: block;
  width: min(calc(62vw*.076), 62px);
  height: min(calc(60vw*.076), 60px);
  top: max(calc(-3vw*.076), -3px);
  left: max(calc(-3vw*.076), -3px);
  position: absolute;
  background-image: url(../images/nav_shape.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#sp_navi_wrapper .nav_title {
  width: 61%;
  height: min(11vw, 50px);
  margin: 0 auto min(calc(40vw*.076), 40px);
  position: relative;
}
#sp_navi_wrapper .title_top {
  width: 100%;
}
#sp_navi_wrapper .nav_title::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -21px;
  background-image: url(../images/nav_dots_gray.png);
  background-repeat: repeat-x;
  background-position: center left;
  background-size: 50px;
}
#sp_navi_wrapper .nav_title a {
  display: block;
  width: fit-content;
  height: 100%;
  padding: 10px 0 15px 42px;
}
#sp_navi_wrapper .nav_title a::before {
  content: "";
  display: block;
  width: 10%;
  height: 44%;
  top: 45%;
  left: 0;
  transform: translateY(-50%);
  position: absolute;
  background-image: url(../images/nav_arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition-duration: .3s
}
#sp_navi_wrapper .nav_title.nav_title_campaign a::before {
  width: 9%;
  height: 16%;
}
#sp_navi_wrapper .nav_title.nav_title_campaign a::after {
  display: none;
}
#sp_navi_wrapper .nav_title a:hover::before {
  left: 10px;
}
#sp_navi_wrapper .nav_title img {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
#sp_navi_wrapper h2.nav_title::after {
  display: none;
}
#sp_navi_wrapper .nav_title:nth-of-type(3)::after {
  display: none;
}
#sp_navi_wrapper a:hover {
  opacity: 1;
}
#sp_navi_wrapper .letsjoin_text {
  width: 78%;
  margin: 0 auto;
  padding: min(calc(30vw*0.27), 30px) 0 min(calc(15vw*0.27), 15px);
  position: relative;
}
#sp_navi_wrapper .apply_button_01 {
  margin: 0 auto min(calc(8vw*0.27), 8px);
  width: 100%;
  max-width: 430px;
  margin: 0 auto 25px;
  box-shadow: 5px 5px 0px rgba(163, 64, 10, 1);
  border-radius: 5px;
  transition-duration: .3s;
}
#sp_navi_wrapper .apply_button_01 img {
  border-radius: 5px;
}
#sp_navi_wrapper .apply_button_01:hover {
  box-shadow: none;
  transform: translate(var(--font-10), var(--font-6));
}
#sp_navi_wrapper .back_page_block {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  color: #404fde;
  background-color: #e1e7ff;
  padding: 7% 9% 11%;
  border-radius: 10px;
}
#sp_navi_wrapper .back_page_block .back_btn_01 {
  box-shadow: 5px 5px 0px rgb(60 67 157);
  border-radius: 5px;
  transition-duration: .3s;
  margin-top: 2%;
}
#sp_navi_wrapper .back_page_block .back_btn_01 img {
  border-radius: 5px;
}
#sp_navi_wrapper .back_page_block .back_btn_01:hover {
  box-shadow: none;
  transform: translate(var(--font-5), var(--font-6));
}
/* /navi */
/*▼▼ コンテンツ内ページリンク ▼▼*/
#businesscard .text_pagelink {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding-right: 4%;
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}
#businesscard .text_pagelink a {
  color: #696969;
  border-bottom: 1px solid #696969;
  transition-duration: .3s;

}
#businesscard .text_pagelink a:hover, #businesscard .text_pagelink.lounge a:hover, #businesscard .text_pagelink.about_waonpoint a:hover, #businesscard .text_pagelink.obs_02 a:hover {
  border-color: transparent;
}
#businesscard .text_pagelink:after {
  content: "";
  display: block;
  width: 15%;
  height: 73%;
  position: absolute;
  top: 56%;
  right: -4%;
  transform: translateY(-50%);
  background-image: url(../images/separate_icon.png);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}
/*▲▲ コンテンツ内ページリンク ▲▲*/
/*=========================
▼▼sp_contents▼▼
===========================*/
#businesscard .inner_main {
  max-width: 500px;
  padding-bottom: 160px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  order: 2;
  background-color: #acbaf6;
}
/*=========================
▼▼conts_fv▼▼
===========================*/
#businesscard #conts_fv {
  background-color: #f5bea8;
  border-top: 10px solid #f5bea8;
  border-left: 9px solid #f5bea8;
  border-right: 9px solid #f4bea6;
  position: relative;
}
#businesscard .back_page_block.sp_main {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  font-size: 22px;
  align-items: center;
  width: 94%;
  height: 15%;
  justify-content: center;
  padding: 4% 4% 3%;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
  color: #404fde;
  background-color: #e1e7ff;
}
#businesscard .back_page_block.sp_main .back_btn_01 {
  box-shadow: 5px 5px 0px rgb(60 67 157);
  border-radius: 5px;
  transition-duration: .3s;
  margin-top: 2%;
}
#businesscard .back_page_block.sp_main .back_btn_01 img {
  border-radius: 5px;
}
#businesscard .back_page_block .back_btn_01:hover {
  box-shadow: none;
  transform: translate(var(--font-5), var(--font-6));
}
#businesscard .back_page_block.sp_main .back_btn_01 {
  margin-top: 0;
  width: 62%;
  margin-left: 5%;
}
/*=========================
▲▲ conts_fv ▲▲
===========================*/
/*=========================
▼▼conts_lineup▼▼
===========================*/
#businesscard #conts_lineup {
  border-right: 9px solid #f4bea6;
  border-left: 9px solid #f4bea6;
  background-color: #ffe7de;
  padding-bottom: 30px;
}
#businesscard #conts_lineup .lineup_group {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  background-color: #ffe7de;
}
#businesscard #conts_lineup .lineup {
  width: calc(100%/3);
  transition: transform .3s;
  position: relative;
}
#businesscard #conts_lineup .lineup::before {
  content: "";
  display: block;
  width: 8%;
  height: 7%;
  background-image: url(../images/pagelink_arrow.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  transition-duration: .3s;
}
#businesscard #conts_lineup .lineup:hover::before {
  bottom: 12%;
}
/*=========================
▲▲conts_lineup▲▲
===========================*/
/*============================
▼▼ conts_collect ▼▼
============================*/
#conts_collect {
  border-left: 9px solid #acbaf4;
  border-right: 9px solid #aabaf4;
}
#businesscard #conts_collect .text_pagelink {
  bottom: 5%;
  left: 50%;
}
/*=========================
▲▲ conts_collect ▲▲
===========================*/
/*============================
▼▼ conts_use ▼▼
============================*/
#conts_use {
  border-left: 9px solid #495daa;
  border-right: 9px solid #495daa;
}
/*=========================
▲▲ conts_use ▲▲
===========================*/
/*============================
▼▼ conts_share ▼▼
============================*/
#conts_share {
  border-left: 9px solid #acbaf5;
  border-right: 9px solid #acbaf5;
  background-color: #fff;
}
#businesscard .margin {
  padding-bottom: var(--font-40);
  background-color: #4a5eaa;
}
#conts_share .back_page_block.sp_main {
  height: 18%;
  bottom: 4%;
  top: auto;
}
#conts_share .donation_list .text_pagelink {
  bottom: 29%;
  left: 50%;
}
#conts_share .contents_img.donation_list {
  padding-bottom: 11%;
}
/*=========================
▲▲ conts_share ▲▲
===========================*/
.contents_img.form {
  border-left: 9px solid #f6bea8;
  border-right: 9px solid #f6bea8;
}
#back-top {
  display: none;
  width: 60px;
  position: fixed;
  bottom: 30px;
  right: 40px;
  z-index: 99;
  transition: .3s;
}
#back-top:hover {
  bottom: 36px;
}
#back-top img {
  display: block;
  width: 100%;
  height: auto;
}
/*=========================
▲▲sp_contents▲▲
===========================*/
@media screen and (max-width: 1150px) {
  #businesscard .inner_logo, #businesscard .inner_nav {
    display: none !important;
  }
}
@media screen and (max-height: 700px) {
  #businesscard .inner_logo, #businesscard .inner_nav {
    display: none;
  }
}
@media screen and (min-width: 1151px) {
  #sp_navi_wrapper {
    display: none;
  }
}