@charset "utf-8";

body {
 position: relative;
 font-family: "Noto Sans JP", sans-serif;
 margin: 0;
 padding: 0;
 min-height: 100vh;
 color: #53493e;
}

@media screen and (min-width: 769px) {
 body:before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url(../image/pattern_star.png);
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: 0.5;
  z-index: -1;
 }

 body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(0deg, #a8f3ff 30%, #d3f9ff 100%);
 }
}

/* 中央設定 */
.contents {
 max-width: 450px;
 width: 100vw;
 background: #fff;
}

@media screen and (min-width: 769px) {
 .contents {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  height: 100vh;
  overflow-y: auto;
  transform: translateX(-50%);
  border-left: #efc056 2px solid;
  border-right: #efc056 2px solid;
 }
}

@media screen and (max-width: 768px) {
 .contents {
  max-width: 768px;
 }
}

/* スクロールバー非表示 */
.contents {
 scrollbar-width: none; /* Firefox用 */
 -ms-overflow-style: none; /* IE, Edge用 */
}
.contents::-webkit-scrollbar {
 display: none; /* Chrome, Safari用 */
}

.pc-bg {
 position: fixed;
 left: 50%;
 transform: translateX(-50%);
 bottom: 0;
 min-width: 1200px;
 max-width: 2000px;
 width: 110%;
}

@media screen and (max-width: 768px) {
 .pc-bg {
  display: none;
 }
}

img {
 width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
}

a {
 text-decoration: none;
}

/* ホバー */
@media screen and (min-width: 769px) {
 .c-hv {
  transition: opacity 0.3s;
 }

 .c-hv:hover {
  opacity: 0.8;
 }
}

/* テキスト */
.c-title {
 max-width: 300px;
 width: 100%;
 margin: 0 auto 24px;
}

.c-txt {
 font-size: 16px;
 font-weight: 600;
 line-height: 1.5;
}

.c-smalltxt {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.5;
}

.c-txt .txt_red {
 font-size: 24px;
 color: #e84f3c;
}

/* 共通 幅 */
.c-inner {
 padding-left: 24px;
 padding-right: 24px;
}

/* sp時 追従メニュー */
.sp-menu {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 background: #ffeab0;
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 1000;
 padding: 10px 24px;
}

.sp-menu a {
 width: 24%;
 text-align: center;
 background-color: #f29814;
 text-decoration: none;
 border-radius: 10px;
 padding: 8px 0;
}

/* PCでは非表示、SP幅のみ表示 */
@media screen and (min-width: 769px) {
 .sp-menu {
  display: none;
 }
}

#link1,
#link2,
#link3,
#link4 {
 padding-top: 48px;
 margin-top: -48px;
}

/* フェードイン */
.FadeinUp {
 opacity: 0;
 transform: translateY(30px);
 transition: 0.8s;
}

.FadeinUp.is-show {
 opacity: 1;
 transform: translateY(0);
}

/* ボタン */
.c-btn {
 display: block;
 max-width: 280px;
 width: 100%;
 margin: auto;
 transition: 0.3s;
}
.c-btn:hover {
 transform: scale(1.1);
}

/* ヘッダー */
.contents-header {
 background-color: #fff;
 padding: 16px 24px;
}

.contents-header_logo {
 display: block;
 width: 120px;
}

/* キャンペーン期間 */
.contents-about {
 position: relative;
 z-index: 1;
 margin-top: -48px;
}

@media screen and (max-width: 768px) {
 .contents-about {
  margin-top: -12%;
 }
}

/* 応募方法 */
.contents-about_application {
 position: relative;
 background-color: #ffeab0;
 overflow: hidden;
 z-index: 0;
 padding-top: 40px;
 padding-bottom: 48px;
}

.contents-about_application::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url(../image/pattern_star.png);
 background-repeat: repeat;
 background-size: 100px 100px;
 opacity: 0.5;
 z-index: -1;
}

@media screen and (max-width: 768px) {
 .contents-about_application::before {
  background-size: 28%;
 }
}

.contents-about_application .c-txt {
 text-align: center;
}

.contents-about_application_image {
 padding-top: 16px;
 padding-bottom: 16px;
}

.contents-about_application_illust {
 padding-top: 32px;
 padding-bottom: 32px;
}

/* アコーディオン */
.accordion-box_label {
 position: relative;
 cursor: pointer;
 text-align: center;
 background-color: #008cd7;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border: solid 2px #fff;
 padding: 16px 0 14px;
 transition: 0.3s;
}

.accordion-box_label:after {
 content: "";
 display: block;
 width: 16px;
 height: 16px;
 background-image: url("../image/icon_arrow.svg");
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 top: 50%;
 right: 5%;
 transform: translateY(-50%) rotate(0deg);
 transition: transform 0.4s;
 pointer-events: none;
}

.accordion-box_label_txt {
 width: 240px;
}

.accordion-box_label.open:after {
 transform: translateY(-50%) rotate(180deg);
}

.accordion-box_label.open {
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}

.accordion-box_detail {
 display: none;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 background-color: #fff;
 padding: 16px 16px 24px;
}

.accordion-box_detail_txt {
 font-size: 12px;
 font-weight: 600;
 line-height: 1.5;
}

.accordion-box_detail_image {
 border: solid 1px #ffeab0;
 border-radius: 10px;
 margin-top: 8px;
}

.accordion-box_detail_image img {
 border-radius: 10px;
}

.detail_box {
 margin-top: 24px;
}

.detail_box:first-of-type {
 margin-top: 0;
}

.detail_box_title {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.5;
 margin-bottom: 8px;
}

.detail_box_txt {
 font-size: 12px;
 font-weight: 500;
 line-height: 1.5;
 margin-top: 8px;
}

.detail_box_txt .link {
 color: #008cd7;
 text-decoration: underline;
 word-wrap: break-word;
}

.contents-about_application_btn {
 margin-top: 24px;
}

.contents-about_application .c-smalltxt {
 text-align: center;
 padding-top: 32px;
 padding-bottom: 16px;
}

.contents-present {
 position: relative;
 background-color: #feffe1;
 overflow: hidden;
 z-index: 0;
 padding-top: 40px;
 padding-bottom: 80px;
}

.contents-present:before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url(../image/pattern_yellow.png);
 background-repeat: repeat;
 background-size: 25px 25px;
 z-index: -1;
}

.contents-present .c-txt {
 text-align: center;
 line-height: 1.3;
}

.contents-present_image {
 padding-top: 24px;
}

.contents-profile {
 position: relative;
 z-index: 1;
 margin-top: -40px;
}

.contents-profile_box {
 position: relative;
 background-color: #ffeab0;
 overflow: hidden;
 z-index: 0;
 padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
 .contents-profile_box {
  padding-bottom: 30%;
 }
}

.contents-profile_box:before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url(../image/pattern_star.png);
 background-repeat: repeat;
 background-size: 100px 100px;
 opacity: 0.5;
 z-index: -1;
}

@media screen and (max-width: 768px) {
 .contents-profile_box:before {
  background-size: 28%;
 }
}

.contents-profile_box_area {
 background-color: #fff;
 border-radius: 20px;
 filter: drop-shadow(8px 8px 0 #f5dd99);
 padding: 16px 0 32px;
}

.contents-profile_box_area_name {
 max-width: 100px;
 width: 100%;
 margin: auto;
}

.contents-profile_box_area .c-smalltxt {
 text-align: center;
 padding-top: 16px;
}

.contents-profile_box_area_sns {
 display: flex;
 justify-content: center;
}

.contents-profile_box_area_sns .icon {
 width: 44px;
 margin: 24px 8px 0;
}

.contents-profile_box_area_sns .icon img {
 width: 44px;
}

.contents-profile_box_area_txt {
 margin-top: 24px;
}

/* イラスト */
.contents-illust {
 position: relative;
 z-index: 1;
 margin-top: -40px;
}

@media screen and (max-width: 768px) {
 .contents-illust {
  margin-top: -20%;
 }
}

/* ビックローブ光のご紹介 */
.contents-hikari {
 position: relative;
 background-color: #008cd7;
 overflow: hidden;
 z-index: 0;
 padding-top: 40px;
 padding-bottom: 48px;
}

.contents-hikari:before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url(../image/pattern_white.png);
 background-repeat: repeat;
 background-size: 25px 25px;
 opacity: 0.06;
 z-index: -1;
}

.contents-hikari:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 inset: 0;
 width: 100%;
 height: 100px;
 background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0));
 opacity: 0.3;
 z-index: 0;
}

.contents-hikari_image {
 border-radius: 20px;
 filter: drop-shadow(8px 8px 0 #0081c6);
 margin-top: 24px;
}

.contents-hikari_image:first-of-type {
 margin-top: 0;
}

.contents-hikari_btn {
 padding-top: 32px;
}

.contents-footer {
 display: block;
 background-color: #fff;
 padding-top: 32px;
 padding-bottom: 24px;
}

@media screen and (max-width: 768px) and (min-width: 500px) {
 .contents-footer {
  padding-bottom: 24%;
 }
}

@media screen and (max-width: 499px) {
 .contents-footer {
  padding-bottom: 30%;
 }
}

.contents-footer_logo {
 display: block;
 max-width: 150px;
 width: 100%;
 margin: auto;
}

.contents-footer small {
 display: block;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding-top: 24px;
}

.contents-footer_mark {
 display: flex;
 justify-content: center;
 align-items: center;
 padding-top: 16px;
}

.contents-footer_mark .contents-footer_mark_icon {
 width: 45px;
 height: auto;
 margin: 0 8px;
}