@charset "utf-8";

/* 共通 */
#campaign { width: 100%; padding-bottom: 80px;}
#campaign a { display: block; transition: .3s;}
#campaign a:hover { text-decoration: none; opacity: 0.8;}
#campaign img{ display: block; margin: 0 auto;}
#campaign h1, #campaign h2 { padding: 0; margin: 0;}
#campaign summary { display: block;}
#campaign summary::-webkit-details-marker { display: none;}
@media screen and (max-width: 749px) {
  #campaign { padding-bottom: 0;}
}

/* contents */
#campaign .campaign_inner { width: 100%; max-width: 750px; margin: 0 auto;}
#campaign .sec_mv { margin-bottom: 60px;}
#campaign .sec_about { padding: 0 20px;}
#campaign .sec_about { margin-bottom: 60px;}
#campaign .sec_about details {border-top: 2px solid #00a0ea;}
#campaign .sec_about details:nth-child(1) { border-bottom: 2px solid #00a0ea;}
#campaign .sec_about .about_title { position: relative; padding: 25px 0; font-size: 20px; font-weight: bold; letter-spacing: 0.08em; line-height: 1; color: #00a0ea; cursor: pointer;}
#campaign .sec_about .about_title::before, #campaign .sec_about .about_title::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 4px; background: #00a0ea; transition: all .3s;}
#campaign .sec_about .about_title::after { transform: translateY(-50%) rotate(90deg);}
#campaign .sec_about details[open] .about_title::after {transform: translateY(-50%) rotate(180deg);}
#campaign .sec_about details[open] .about_contents { animation: fadeIn 0.5s ease;}
#campaign .sec_about .about_contents { margin-bottom: 25px;}
#campaign .sec_about .about_contents p { font-size: 18px; letter-spacing: 0.08em; line-height: 1.4;}
#campaign .sec_about .about_contents .notice { margin-top: 10px; font-size: 14px; letter-spacing: 0;}
#campaign .sec_about .about_contents .flex { display: flex; justify-content: center; gap: 10px;}
#campaign .sec_about .about_contents .flex div { position: relative; width: calc((100% - 10px)/2); padding: 20px; background: rgb(0, 135, 255, 0.1);}
#campaign .sec_about .about_contents .flex div:first-child::after { content: ""; position: absolute; top: 50%; right: -22px; transform: translateY(-50%); width: 38px; height: 44px; background: #00a0ea; clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 1;}
#campaign .sec_about .about_contents .flex div p { margin-bottom: 12px; font-size: 18px;}
#campaign .sec_about .about_info { margin-top: 60px; padding: 40px 30px; font-size: 18px; letter-spacing: 0.06em; line-height: 1.5; background: #f0f4f7;}
#campaign .sec_about .about_info a { display: inline-block; text-decoration: underline;}
#campaign .sec_about .about_info_title { width: fit-content; margin: 0 auto 15px; padding-left: 43px; background: url(/img/usr/freepage/2026/2606AdryS_regular/icon_notice.png) no-repeat left center / 30px; font-weight: bold; font-size: 26px; letter-spacing: 0.1em; color: #e60012;}
#campaign .sec_offer { padding: 30px 25px; background-color: #eaf8fe;}
#campaign .sec_offer .offer_img { position: relative;}
#campaign .sec_offer .offer_img + .offer_img { margin-top: 20px;}
#campaign .sec_offer .offer_btn_wrap { position: absolute; bottom: 64px; left: 0; right: 0; width: 624px; margin: auto;}
#campaign .sec_offer .offer_btn + .offer_btn { margin-top: 15px;}
@media screen and (max-width: 749px) {
  #campaign .sec_mv { margin-bottom: 30px;}
  #campaign .sec_about { margin-bottom: 25px;}
  #campaign .sec_about details { border-width: 1px;}
  #campaign .sec_about details:nth-child(1) { border-width: 1px;}
  #campaign .sec_about .about_title { padding: 16px 0; font-size: 15px;}
  #campaign .sec_about .about_title::before, #campaign .sec_about .about_title::after { width: 10px; height: 2px;}
  #campaign .sec_about .about_contents { margin-bottom: 16px;}
  #campaign .sec_about .about_contents p { font-size: 13px;}
  #campaign .sec_about .about_contents .notice { margin-top: 3px; font-size: 10px;}
  #campaign .sec_about .about_contents .flex { gap: 5px;}
  #campaign .sec_about .about_contents .flex div { width: calc((100% - 5px)/2); padding: 10px;}
  #campaign .sec_about .about_contents .flex div:first-child::after { right: -2.66vw; width: 4vw; height: 4.533vw;}
  #campaign .sec_about .about_contents .flex div p { margin-bottom: 6px; font-size: 11px;}
  #campaign .sec_about .about_info{  margin-top: 30px; padding: 20px 15px; font-size: 12px;}
  #campaign .sec_about .about_info_title { margin: 0 auto 10px; padding-left: 25px; background-size: 15px; font-size: 15px;}
  #campaign .sec_offer { padding: 15px 12px;}
  #campaign .sec_offer .offer_img + .offer_img { margin-top: 10px;}
  #campaign .sec_offer .offer_btn_wrap { bottom: calc(64 / 750 * 100%); width: calc(624 / 750 * 100%);}
  #campaign .sec_offer .offer_btn + .offer_btn { margin-top: 8px;}
}