@charset "UTF-8";

:root {
  --main-color: #1bb8ce;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { color: #111; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: 1.6rem; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; border: 0; vertical-align: top; transition: all .3s ease; -ms-interpolation-mode: bicubic; }
button { background: transparent; border: none; appearance: none; cursor: pointer; }
a { transition: all .3s ease; }

.red { color: #c00; }
.large { font-size: large; }
.x-large { font-size: x-large; }
.text-center { text-align: center; }
.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 767px) {
  body { font-size: 1.4rem; }
  
  .large { font-size: medium; }
  .x-large { font-size: large; }
  .pc { display: none; }
  .sp { display: block; }
}

/* --------------------------------------------------
  ロゴ
-------------------------------------------------- */

#logo { text-align: center; }
#logo .inner { margin: 1rem auto; max-width: 1000px; }
#logo img { max-width: 320px; }

@media screen and (max-width: 767px) {
  #logo img { width: 240px; }
}

/* --------------------------------------------------
  メインビジュアル
-------------------------------------------------- */

#mv { padding: 4rem 0; width: 100%; background: var(--main-color); }
#mv .inner { margin: 0 auto; max-width: 1000px; text-align: center; }
#mv .inner img { width: 100%; max-width: 700px; }

@media screen and (max-width: 767px) {
  #mv { padding: 4rem 2rem; }
  #mv .inner img {}
}

/* --------------------------------------------------
  共通
-------------------------------------------------- */

main h2 { margin-bottom: 4rem; padding: 1rem; background: var(--main-color); border-radius: 5px; color: #fff; font-size: 2.8rem; text-align: center; }
main p { margin: 1rem 0; }
main ul, main ol { margin: 1rem 0 1rem 2.4rem; }
main table { margin: .5rem 0; width: 100%; border-collapse: collapse; }
main th, main td { padding: 5px 20px; border: solid 1px #ccc; text-align: center; }
main th { background: #eee; }
main td { background: #fff; }

@media screen and (max-width: 767px) {
  main h2 { margin-bottom: 3rem; font-size: 2rem; }
  main th, main td { padding: 5px; }
}

/* --------------------------------------------------
  お使いみち自由
-------------------------------------------------- */

#use { padding: 8rem 0; }
#use .inner { margin: 0 auto; padding: 0 2rem; max-width: 1000px; }
#use p { margin-bottom: 3rem; }
#use ul { margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px 10px; }
#use li { padding: 10px 0; width: calc(20% - 10px); border: solid 2px var(--main-color); border-radius: 10px; text-align: center; }
#use li img { width: 80%; }

@media screen and (max-width: 767px) {
  #use { padding: 4rem 0; }
  #use .inner { padding: 0 1rem; }
  #use p { margin-bottom: 2rem; }
  #use li { width: 48%; }
}

/* --------------------------------------------------
  お申し込みの流れ
-------------------------------------------------- */

#flow { padding: 8rem 0; background: #f4f4f4; }
#flow .inner { margin: 0 auto; padding: 0 2rem; max-width: 1000px; }
#flow ol { margin: 0; list-style: none; display: flex; justify-content: space-between; }
#flow li { padding: 20px 0; width: 200px; background: #fff; border: solid 2px var(--main-color); border-radius: 10px; font-size: 1.8rem; font-weight: bold; text-align: center; position: relative; }
#flow li::after { content: ''; width: 20px; height: 60px; background: var(--main-color); clip-path: polygon(0 0, 100% 50%, 0 100%); display: block; position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%); }
#flow li:last-child::after { display: none; }
#flow figure img { margin: 0 20px 20px; max-width: 150px; }

@media screen and (max-width: 767px) {
  #flow { padding: 4rem 0; }
  #flow .inner { padding: 0 1rem; }
  #flow ol { flex-direction: column; gap: 50px; }
  #flow li { margin: 0 auto; width: 100%; max-width: 400px; }
  #flow li::after { margin: 0 auto; width: 60px; height: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%); left: 0; right: 0; top: calc(100% + 18px); transform: none; }
  #flow figure img { margin-bottom: 10px; max-width: 120px; }
  #flow figcaption br { display: none; }
}

/* --------------------------------------------------
  商品概要
-------------------------------------------------- */

#overview { padding: 8rem 0 6rem; }
#overview .inner { margin: 0 auto; padding: 0 2rem; max-width: 1000px; }
#overview h2 {}
#overview h3 { padding: .5rem 2rem; background: #f4f4f4; }
#overview section { margin: 2rem 0; }
#overview .note { margin-top: 3rem; padding: .5rem 2rem; border: solid 1px #ccc; }

@media screen and (max-width: 767px) {
  #overview { padding: 4rem 0 2rem; }
  #overview .inner { padding: 0 1rem; }
  #overview h3 { padding: .5rem 1rem; }
}

/* --------------------------------------------------
  個人情報の取扱いに関する同意条項
-------------------------------------------------- */

#agreement { padding: 8rem 0 16rem; background: #f4f4f4; }
#agreement .inner { margin: 0 auto; padding: 0 2rem; max-width: 1000px; }
#agreement h2 { all: unset; margin-bottom: 2rem; font-size: 2.4rem; font-weight: bold; text-align: center; display: block; }
#agreement h3 { font-size: 2rem; }
#agreement h3::before { content: '●'; margin-right: .25rem; }
#agreement ul { margin: 0 0 0 2.4rem; list-style: disc; }

@media screen and (max-width: 767px) {
  #agreement { padding: 4rem 0 12rem; }
  #agreement .inner { padding: 0 1rem; }
  #agreement h2 { font-size: 2rem; }
  #agreement h3 { font-size: 1.8rem; }
}

/* --------------------------------------------------
  追従ボタン
-------------------------------------------------- */

#fixed-button { width: 100%; height: 100px; background: rgba(255,255,255,.9); position: fixed; bottom: 0; }
#fixed-button .inner { margin: 0 auto; height: 100%; max-width: 1000px; display: flex; align-items: center; justify-content: center; }
#fixed-button a { width: 50%; height: 60px; background: #c00; border-radius: 5px; color: #fff; font-size: 2.8rem; font-weight: 700; line-height: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
#fixed-button a::before { content: ''; width: 20px; height: 100%; background: #fff; display: inline-block; position: absolute; left: 0; top: -100%; animation: button-animation 3s ease-in-out infinite; }
#fixed-button a:hover { opacity: .8; }

@keyframes button-animation {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

@media screen and (max-width: 767px) {
  #fixed-button { height: 90px; }
  #fixed-button a { width: 90%; font-size: 2.4rem; }
}

/* --------------------------------------------------
  同意条項の確認
-------------------------------------------------- */

#overlay { display: none; }

body.on { overflow: hidden; }
body.on #overlay { width: 100vw; height: 100vh; background: rgba(0,0,0,.8); position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; }
body.on #confirm { margin: 0 auto; max-width: 1000px; }
body.on #confirm ul { margin: 0; list-style: none; }
body.on #confirm li { margin: 40px 0; }
body.on #confirm a { padding: 2rem 4rem; background: #fff; border-radius: 5px; color: #111; font-size: 2rem; font-weight: 500; line-height: 1.3;  text-decoration: none; display: flex; align-items: center; justify-content: center; }
body.on #confirm a.submit { background: #666; color: #fff; transition: all .3s; pointer-events: none; }
body.on #confirm a.submit.checked { background: #c00; pointer-events: auto; }
body.on #confirm #check { margin-bottom: 20px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; }

@media screen and (max-width: 767px) {
  body.on #confirm { max-width: 90%; }
  body.on #confirm a { padding: 2rem; font-size: 1.8rem; }
}