@charset "utf-8";

/* スマホ（〜767px） */
@media (max-width: 767px) {
  /* スマホ専用スタイル */
}

/* タブレット（768px〜1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
  /* タブレット専用スタイル */
}

/* PC（1025px〜） */
@media (min-width: 1025px) {
  /* PC専用スタイル */
}



.page_top { z-index: 10; }

.top_intro { margin-bottom: 40px; }

.side_bg_square { padding: 40px 0; }
.side_bg_square:nth-child(2n) { background:#E1F6FC; }

.content_img_wrap { position: relative; margin-bottom: 52px; }
.content_img_wrap::before { content: ''; position: absolute; bottom: -4px; left: -10px; display: block; width: 50%; height: 50%; background: #004680; }
.content_img { position: relative; width: 100%; aspect-ratio: 7 / 4; object-fit: cover; background: #666; z-index: 1; }
.content_illust { position: absolute; bottom: -24px; right: 0; width: 150px; height: 120px; z-index: 2; }

.content_text { display: flex; flex-direction: column; gap: 20px; }
.content_text_li { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #FFF; border: 2px solid #004680; border-radius: 12px; }
.content_text_title { display: flex; gap: 16px; align-items: center; }
.content_text_number { font-size: 36px; transform: translateY(-3px); }

/* sell_detail */
.contents_bg_excursion_wave_top { position: relative; }
.contents_bg_excursion_wave_top { background-color: #FDFD8A; }
.sell_detail_wrap { position: relative; }
.nanmaru_sell_detail { display: none; }
.sell_detail_list { display: flex; flex-wrap: wrap; gap: 12px; }
.sell_detail_list li { width: calc(50% - 6px); }
.sell_detail_list li a { display: flex; flex-direction: column; background: #FFF; }
.sell_detail_list li a .sell_detail_img { width: 100%; }
.sell_detail_list li a .sell_detail_text { display: flex; justify-content: space-between; padding: 8px; }
.sell_detail_list li a .sell_detail_text p { line-height: 25px; }
.sell_detail_list li a .sell_detail_text img { width: 25px; height: 25px; }

.link_buy_top .button_normal { margin-top: -80px; }

@media (min-width: 1080px) {
  .top_intro { text-align: center; }

  .side_bg_square { padding: 80px 0; }
  .side_bg_square:nth-child(n) { background: transparent; }

  .side_bg_square .contents { position: relative; } 
  .side_bg_square .contents::before { content: ''; position: absolute; top: 120px; width: calc(100% + calc(max(5vw, calc(50vw - 660px)) - 120px)); height: calc(100% - 80px); background: #E1F6FC; z-index: 0; }
  .side_bg_square:nth-child(2n+1) .contents::before { right: auto; left: 120px; border-radius: 0; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
  .side_bg_square:nth-child(2n) .contents::before { right: 120px; left: auto; border-radius: 0; border-top-right-radius: 30px; border-bottom-right-radius: 30px; }

  .content_img_wrap { position: absolute; top: 0; width: 60%; }
  .side_bg_square:nth-child(2n+1) .content_img_wrap { right: auto; left: 0; }
  .side_bg_square:nth-child(2n) .content_img_wrap { right: 0; left: auto; }
  .content_img_wrap::before { bottom: -18px; width: 60%; height: 60%; }
  .side_bg_square:nth-child(2n+1) .content_img_wrap::before { right: auto; left: -24px; }
  .side_bg_square:nth-child(2n) .content_img_wrap::before { right: -24px; left: auto; }
  .content_img { aspect-ratio: 2 / 1; }
  .content_illust { bottom: -80px; width: 250px; height: 200px; }
  .side_bg_square:nth-child(2n+1) .content_illust { right: auto; left: -60px; }
  .side_bg_square:nth-child(2n) .content_illust { right: -60px; left: auto; }

  .content_text_wrap { position: relative; width: 50%; padding-top: 40px; z-index: 2; }
  .side_bg_square:nth-child(2n+1) .content_text_wrap { margin-right: 0; margin-left: 50%; }
  .side_bg_square:nth-child(2n) .content_text_wrap { margin-right: 50%; margin-left: 0; }
  .content_text.smaller_than_img { height: calc(min(27vw, 396px) + 40px); }
  .content_text.just_one { padding-top: 40px; }

  /* sell_detail */
  .nanmaru_sell_detail { position: absolute; display: flex; top: 60px; right: 10%; width: 150px; }
  .nanmaru_sell_detail::before { position: absolute; top: 110px; right: 13%; content: ''; display: block; width: 120px; height: 30px; border-radius: 50%; background-color: #B0E6F5; }
  .nanmaru_sell_detail .page_title_nanmaru_illust { position: relative; flex-shrink: 0; width: 100%; z-index: 1; }
  .nanmaru_sell_detail .page_title_fukidashi { transform: translate(-50px, -50px); }
  .sell_detail_list { gap: 40px; }
  .sell_detail_list li a .sell_detail_text { padding: 20px; }
  .sell_detail_list li { width: calc(calc(100% - 80px) / 3); }

  .link_buy_top { background: transparent; }
  .link_buy_top .button_normal { margin-top: 0px; }
}