@charset "UTF-8";
/* ---------- フォントレギュレーション ---------- */
/* main配下はNoto Sans JPのみ。子孫にも指定して他フォントが混ざらないようにする */
main,
main * {
  font-family: "Noto Sans JP", sans-serif !important; }

main {
  font-size: 14px !important;
  line-height: 25.2px !important;
  background: url("../images/bg_contents.png") repeat-y;
  background-size: 100% auto; }
  @media all and (max-width: 768px) {
    main {
      background: url("../images/sp_bg_contents.png") repeat-y;
      background-size: 100% auto; } }

/* ---------- hero ---------- */
/* メインビジュアルは原寸で中央配置し、背景はコンテンツ側と同じ絵柄を敷いて繋げる */
.hero {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0 0; }
  @media all and (max-width: 768px) {
    .hero {
      padding: 10px 0 0; } }
  .hero img {
    width: 797px;
    max-width: 100%;
    height: auto; }
    @media all and (max-width: 768px) {
      .hero img {
        width: 82%; } }

/* ---------- contents ---------- */
.campaign_wrapper {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.9; }
  @media all and (max-width: 768px) {
    .campaign_wrapper {
      font-size: 12px; } }
  .campaign_wrapper #campaign {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 117px 0 0; }
    @media all and (max-width: 768px) {
      .campaign_wrapper #campaign {
        width: calc(100% - 30px);
        padding: 47px 0 0; } }
  .campaign_wrapper img {
    max-width: 100%;
    height: auto; }

/* ---------- 注釈 ---------- */
.notes {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.8;
  /* カンプでは折り返し行もぶら下げず行頭を揃える */ }
  @media all and (max-width: 768px) {
    .notes {
      margin-top: 12px;
      font-size: 10px; } }
  .notes li {
    display: block; }
  .notes.notes_center {
    text-align: center; }

/* ---------- 賞品 ---------- */
.prize {
  text-align: center;
  display: flex;
  justify-content: center; }
  .prize img {
    width: 800px;
    max-width: 100%;
    margin-top: -60px;
    /* sp_present 636px(2x) → 318px */ }
    @media all and (max-width: 768px) {
      .prize img {
        width: 318px;
        margin-top: -20px; } }

/* ---------- 枠付きセクション ---------- */
/* 光彩ボーダーは3分割画像で表現する（上部・中間・下部）。
   枠画像は光彩ぶん本体より広いので、幅を広げて左右に負のマージンを当て、
   ライン自体がコンテンツ幅（PC960 / SP345）に乗るようにしている。
   中間画像は縦1pxの左右ライン。上下フレーム画像と重ねると光彩が二重になるため、
   .cp_boxの上下paddingを画像高さと同じにして、.box_innerに全高へ引き伸ばして敷く。 */
.cp_box {
  position: relative;
  width: calc(100% + 30px);
  margin: 0 -15px 100px;
  /* 上下フレームは通常フローで置き、高さは画像のアス比ぶんをpadding-topで確保する。
     %paddingは幅基準なので、幅が変わっても高さが追従し、角丸と中間ラインが必ず繋がる。
     （absoluteで固定高さにすると幅可変時に接合部がズレる） */
  /* 見出しは枠上辺のギャップに収まる。上辺ラインの中央に文字がくる位置 */
  /* 賞品画像は上下に余白を持つので、SPでは枠内の上余白を詰める */ }
  @media all and (max-width: 768px) {
    .cp_box {
      width: calc(100% + 15px);
      margin: 0 -7.5px 30px; } }
  .cp_box::before, .cp_box::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 6.06061%;
    background-repeat: no-repeat;
    background-size: 100% 100%; }
    @media all and (max-width: 768px) {
      .cp_box::before, .cp_box::after {
        padding-top: 8.33333%; } }
  .cp_box::before {
    background-image: url("../images/frame_top.png"); }
    @media all and (max-width: 768px) {
      .cp_box::before {
        background-image: url("../images/sp_frame_top.png"); } }
  .cp_box::after {
    background-image: url("../images/frame_bottom.png"); }
    @media all and (max-width: 768px) {
      .cp_box::after {
        background-image: url("../images/sp_frame_bottom.png"); } }
  .cp_box .box_ttl {
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 44px;
    text-align: center;
    font-size: 50px;
    font-weight: 900;
    z-index: 1; }
    @media all and (max-width: 768px) {
      .cp_box .box_ttl {
        top: -7px;
        height: 22px;
        font-size: 25px; } }
    .cp_box .box_ttl span {
      display: block;
      line-height: 44px; }
      @media all and (max-width: 768px) {
        .cp_box .box_ttl span {
          line-height: 22px; } }
  .cp_box .box_inner {
    /* 縦1pxのラインを全高に引き伸ばす（縦方向は均一なので歪まない） */
    background: url("../images/frame_middle.png") center top/100% 1px repeat-y;
    padding: 18px 50px 0; }
    @media all and (max-width: 768px) {
      .cp_box .box_inner {
        background-image: url("../images/sp_frame_middle.png"); } }
    @media all and (max-width: 768px) {
      .cp_box .box_inner {
        padding: 14px 26px 3px; } }
  @media all and (max-width: 768px) {
    .cp_box.cp_box_prize .box_inner {
      padding-top: 0; } }

/* 応募方法の枠とLove Letterの間隔だけ狭い */
.cp_box + .loveletter {
  margin-top: -30px; }
  @media all and (max-width: 768px) {
    .cp_box + .loveletter {
      margin-top: 0px; } }

/* ---------- 応募資格 ---------- */
.qualification {
  /* アンカーで飛んだときに見出しが画面上端に貼り付かないよう余裕を持たせる */
  scroll-margin-top: 20px;
  margin-top: 45px; }
  @media all and (max-width: 768px) {
    .qualification {
      margin-top: 28px; } }
  .qualification .qualification_ttl {
    font-size: 16px;
    font-weight: bold; }
    @media all and (max-width: 768px) {
      .qualification .qualification_ttl {
        font-size: 13px; } }
  .qualification .notes {
    margin-top: 6px; }

/* ---------- 応募方法 ---------- */
.howto_lead {
  font-size: 18px;
  line-height: 1.8; }
  @media all and (max-width: 768px) {
    .howto_lead {
      font-size: 12px; } }

.howto_application {
  margin-top: 40px; }
  @media all and (max-width: 768px) {
    .howto_application {
      margin-top: 25px; } }
  .howto_application li {
    text-align: center;
    margin-bottom: 20px; }
    @media all and (max-width: 768px) {
      .howto_application li img {
        width: 100%; } }
    .howto_application li a {
      display: block;
      transition: opacity 0.3s; }
      .howto_application li a:hover {
        opacity: 0.8; }
    @media all and (max-width: 768px) {
      .howto_application li {
        margin-bottom: 10px; } }
    .howto_application li:last-child {
      margin-bottom: 0; }

.howto_notice {
  margin-top: 45px; }
  @media all and (max-width: 768px) {
    .howto_notice {
      margin-top: 28px; } }
  .howto_notice .notice_ttl {
    font-size: 16px;
    font-weight: bold; }
    @media all and (max-width: 768px) {
      .howto_notice .notice_ttl {
        font-size: 13px; } }
  .howto_notice .notes {
    margin-top: 6px; }

/* ---------- 応募規約アコーディオン ---------- */
.agree {
  width: 100%;
  margin: 45px auto 0; }
  @media all and (max-width: 768px) {
    .agree {
      margin-top: 28px; } }
  .agree .btn {
    display: block;
    width: 100%;
    height: 70px;
    cursor: pointer;
    text-indent: -9999px;
    overflow: hidden;
    border: 3px solid #3d7dff;
    border-image: linear-gradient(90deg, #5298ff 0%, #72e5ff 50%, #5298ff 100%) 1;
    background: url("../images/btn_agreement-open.png") no-repeat center center, linear-gradient(135deg, rgba(48, 56, 66, 0.2) 0%, rgba(31, 60, 83, 0.5) 100%); }
    @media all and (max-width: 768px) {
      .agree .btn {
        height: 40px;
        border-width: 2px;
        background-image: url("../images/sp_btn_agreement-open.png");
        background-size: 135px auto; } }
    .agree .btn.open {
      background-image: url("../images/btn_agreement-close.png"); }
      @media all and (max-width: 768px) {
        .agree .btn.open {
          background-image: url("../images/sp_btn_agreement-close.png"); } }
  .agree .agreebody {
    display: none;
    text-align: left;
    color: #000000;
    padding: 30px 0;
    margin-top: 2px; }
    @media all and (max-width: 768px) {
      .agree .agreebody {
        padding: 20px 0; } }
    .agree .agreebody p {
      margin: 6px 0 10px;
      line-height: 1.8;
      font-size: 16px;
      color: #fff;
      text-align: left;
      font-weight: normal; }
      @media all and (max-width: 768px) {
        .agree .agreebody p {
          font-size: 12px; } }
    .agree .agreebody h4 {
      margin: 20px 0 10px;
      line-height: 1.8;
      font-size: 18px;
      color: #fff;
      text-align: left;
      font-weight: bold; }
      @media all and (max-width: 768px) {
        .agree .agreebody h4 {
          font-size: 14px; } }
    .agree .agreebody ul {
      font-size: 16px;
      line-height: 1.8;
      color: #fff; }
      @media all and (max-width: 768px) {
        .agree .agreebody ul {
          font-size: 12px; } }
    .agree .agreebody li {
      display: block;
      text-indent: -1em;
      padding: 0 0 4px 1em; }
    .agree .agreebody a {
      color: #fff;
      text-decoration: underline; }

/* ---------- Love Letter ---------- */
.loveletter {
  text-align: center;
  margin-bottom: 91px;
  /* sp_oubo_read 677px(2x) → 338px */ }
  @media all and (max-width: 768px) {
    .loveletter {
      margin-bottom: 30px; } }
  .loveletter .loveletter_ttl {
    display: flex;
    justify-content: center; }
    @media all and (max-width: 768px) {
      .loveletter .loveletter_ttl img {
        width: 343px; } }
  .loveletter .entry_btn {
    margin-top: 40px;
    /* sp_btn_oubo 410px(2x) → 205px */ }
    @media all and (max-width: 768px) {
      .loveletter .entry_btn {
        margin-top: 20px; } }
    .loveletter .entry_btn a {
      display: inline-block;
      transition: opacity 0.3s; }
      .loveletter .entry_btn a:hover {
        opacity: 0.8; }
    @media all and (max-width: 768px) {
      .loveletter .entry_btn img {
        width: 205px; } }
  .loveletter .notes {
    margin-top: 30px; }
    @media all and (max-width: 768px) {
      .loveletter .notes {
        margin-top: 10px; } }

/* ---------- お問い合わせ先 ---------- */
/* 枠は cp_box と同じ3分割画像。見出しが枠内にあるためギャップなしの
   frame_top_contact を使う。内側の余白が角丸より小さいので、上下フレームは
   「角丸が終わる位置」で切り（background-size: 100% auto ＋ 低めのボックス）、
   そこから中間ラインを直結させている */
.address {
  width: calc(100% + 30px);
  margin: 0 -15px 60px; }
  @media all and (max-width: 768px) {
    .address {
      width: calc(100% + 15px);
      margin: 0 -7.5px 20px; } }
  .address::before, .address::after {
    content: "";
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto; }
  .address::before {
    padding-top: 4.94949%;
    background-image: url("../images/frame_top_contact.png");
    background-position: center top; }
    @media all and (max-width: 768px) {
      .address::before {
        padding-top: 7.08333%;
        background-image: url("../images/sp_frame_top_contact.png"); } }
  .address::after {
    padding-top: 5.05051%;
    background-image: url("../images/frame_bottom.png");
    background-position: center bottom; }
    @media all and (max-width: 768px) {
      .address::after {
        padding-top: 7.36111%;
        background-image: url("../images/sp_frame_bottom.png"); } }
  .address .box_inner {
    background: url("../images/frame_middle.png") center top/100% 1px repeat-y;
    padding: 0 56px; }
    @media all and (max-width: 768px) {
      .address .box_inner {
        background-image: url("../images/sp_frame_middle.png");
        padding: 3px 26px 1px; } }
  .address .address_ttl {
    text-align: center;
    font-size: 20px;
    font-weight: bold; }
    @media all and (max-width: 768px) {
      .address .address_ttl {
        font-size: 14px; } }
  .address .address_body {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 1.8; }
    @media all and (max-width: 768px) {
      .address .address_body {
        margin-top: 10px;
        font-size: 12px; } }
  .address .notes {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8; }
    @media all and (max-width: 768px) {
      .address .notes {
        font-size: 11px;
        text-align: left; } }

/* ---------- artistCPへのバナー ---------- */
.bnr {
  text-align: center;
  margin-bottom: 90px;
  /* sp_bnr_artistCP 720px(2x) → 360px */ }
  @media all and (max-width: 768px) {
    .bnr {
      margin-bottom: 45px; } }
  .bnr a {
    display: inline-block;
    transition: opacity 0.3s; }
    .bnr a:hover {
      opacity: 0.8; }
  @media all and (max-width: 768px) {
    .bnr img {
      width: 345px; } }

/* ---------- シェア ---------- */
.sns {
  text-align: center;
  /* SP用画像は2x書き出しのため実寸の半分で配置 */
  padding: 0 0 90px; }
  .sns h2 {
    display: flex;
    justify-content: center; }
  @media all and (max-width: 768px) {
    .sns h2 img {
      width: 157px; }
    .sns li:nth-child(1) img {
      width: 37px; }
    .sns li:nth-child(2) img {
      width: 40px; } }
  @media all and (max-width: 768px) {
    .sns {
      padding-bottom: 45px; } }
  .sns ul {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media all and (max-width: 768px) {
      .sns ul {
        margin-top: 18px; } }
    .sns ul li {
      margin: 0 22px; }
      @media all and (max-width: 768px) {
        .sns ul li {
          margin: 0 14px; } }
      .sns ul li a {
        display: inline-block;
        transition: opacity 0.3s; }
        .sns ul li a:hover {
          opacity: 0.8; }

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