/* =========================================
   基本リセット
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  background:#ffffff;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Yu Gothic",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height:1.7;
  color:#333;
}

/* =========================================
   画像共通
========================================= */

img{
  display:block;
  max-width:100%;
  height:auto;
}

.wrap{
  width:100%;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================
   セクション基本
========================================= */

.lp-section{
  position:relative;
  width:100%;
  padding:0;
}

/* 中央配置用 */

.lp-inner{
  width:min(100%,1200px);
  margin:0 auto;
  padding:0 16px;
}

/* =========================================
   画像配置
========================================= */

.lp-img{
  display:block;
  margin:0 auto;
  width:min(100%,1100px);
}

/* サイズ違い */

.lp-img-sm{
  width:min(100%,700px);
}

.lp-img-md{
  width:min(100%,900px);
}

.lp-img-lg{
  width:min(100%,1100px);
}

.lp-img-full{
  width:100%;
}

/* =========================================
   HERO
========================================= */

.hero{
  position:relative;
  width:100%;
  min-height:700px;

  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;

  background-color:#ffffff;
}


/* =========================================
   背景ブロック
========================================= */

/* 第一ブロック */

.bg-soft{
  background:linear-gradient(
    180deg,
    #faf7ff 0%,
    #efe8fb 100%
  );
  padding:60px 0;
}

/* 第二ブロック */

.bg-purple{
  background:linear-gradient(
    180deg,
    #e2d6fb 0%,
    #c9b7f0 100%
  );
  padding:60px 0;
}


/* 第三ブロック */

.bg-rightgreen{
  background:linear-gradient(
    180deg,
    #fff1fb 0%,
    #e4cadc 100%
  );
  padding:60px 0;
}



/* 第４ブロック */

.bg-forthbloc{
  background:linear-gradient(
    180deg,
    #ebe5ff 0%,
    #cadddf 100%
  );
  padding:60px 0;
}




/* 第５ブロック */

.bg-fivebloc{
  background:linear-gradient(
    180deg,
    #faf7ff 0%,
    #efe8fb 100%
  );
  padding:60px 0;
}



/* 第６ブロック */

.bg-sixbloc{
  background:linear-gradient(
    180deg,
    #e2d6fb 0%,
    #c6bed7 100%
  );
  padding:60px 0;
}

/* 第７ブロック */

.bg-sevenbloc{
  background:linear-gradient(
    180deg,
    #f2e3b5 0%,
    #f2e3b5 100%
  );
  padding:60px 0;
}



/* =========================================
   区切り画像
========================================= */

.divider{
  width:100%;
  text-align:center;
}

.divider img{
  display:block;
  margin:0 auto;
  width:100%;
  max-width:1200px;
}

/* =========================
   円弧ブロック
========================= */

.white-curve{
  position: relative;
  background: #fff;
  margin-top: -90px;
  padding: 120px 0 40px;
  z-index: 5;
}

.white-curve::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -320px;
  transform: translateX(-50%);
  width: max(50vw, 1600px);
  height: 450px;
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}

.curve-content{
  position:relative;
  z-index:2;
}

.curve-banner{
  width:min(700px,100%);
  margin:0 auto 20px;
}

.curve-message{
  position: relative;
  transform: translateY(-150px);
  margin-bottom:-120px;
  z-index: 2;
}

.curve-message img{
  width: min(900px, 90%);
  margin: 0 auto;
}


.hero-ribbon{
  position: relative;
  z-index: 20;
  margin-top: 0;
  margin-bottom: 0px;
  transform: translateY(-220px);
}

.hero-ribbon img{
  display:block;
  width:min(700px,92%);
  margin:0 auto;
}

/* =========================
   スマホ
========================= */

@media (max-width:768px){

  .hero{
    min-height:520px;
  }

.hero-ribbon{
  position: relative;
  z-index: 20;
  margin-top: 0;
  margin-bottom: -15px;
  transform: translateY(-150px);
}

  .hero-ribbon img{
    width:min(680px,96%);
  }

  .white-curve{
    margin-top: -55px;
    padding: 80px 0 26px;
  }

  .white-curve::before{
    top: -300px;
    width: max(45vw, 1200px);
    height: 300px;
  }

.curve-message{
  position: relative;
  transform: translateY(-150px);
  margin-bottom:-120px;
  z-index: 2;
}

  .bg-soft,
  .bg-purple{
    padding:40px 0;
  }
}


/* =========================
   スマホ 520
========================= */



@media (max-width:520px){
  .hero-ribbon{
    margin-bottom: -12px;
    transform: translateY(-220px);
  }

  .hero-ribbon img{
    width: min(460px, 92%);
  }

.curve-message{
  position: relative;
  transform: translateY(-150px);
  margin-bottom:-120px;
  z-index: 2;
}
}


/* =========================
   スマホ 418
========================= */


@media (max-width:418px){
  .hero-ribbon{
    margin-bottom: -50px;
    transform: translateY(-300px);
  }

  .hero-ribbon img{
    width: min(460px, 92%);
  }

  .white-curve{
    margin-top: -55px;
    padding: 80px 0 26px;
  }

  .white-curve::before{
    top: -360px;
    width: max(30vw, 1200px);
    height: 300px;
  }

.curve-message{
  position: relative;
  transform: translateY(-250px);
  margin-bottom:-500px;
  z-index: 2;
}

}


/* =========================================
   下部リンク
========================================= */

.rune-info-links-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.rune-info-links-list li{
  margin:0;
  padding:0;
}

.rune-info-links-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.64);
  border:1px solid rgba(185,170,219,0.34);
  color:#5f5371;
  font-size:13px;
  line-height:1.5;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 8px 20px rgba(92,72,132,0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.rune-info-links-list a:hover{
  transform:translateY(-1px);
  border-color:rgba(180,143,244,0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.46),
    0 10px 24px rgba(92,72,132,0.09);
}


.rune-info-panel{
  margin:0 auto 16px;
  padding:20px 18px 16px;
  border-radius:24px;
  background:rgba(255,255,255,0.52);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.64);
  box-shadow:
    0 12px 34px rgba(92,72,132,0.14),
    inset 0 1px 0 rgba(255,255,255,0.78);
}



/* =========================================
   コピーライト
========================================= */

.rune-info-copyright{
  width:100%;
  text-align:center;
  margin-top:16px;
}

.rune-info-copy-main{
  margin:0 0 6px;
  font-size:12px;
  line-height:1.7;
  color:#6e6383;
}

.rune-info-copy-sub{
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:#8a7fa3;
  letter-spacing:0.04em;
}

@media (max-width:520px){
  .rune-info-copy-main{
    font-size:11px;
  }

  .rune-info-copy-sub{
    font-size:10px;
  }
}

html{
  scroll-behavior:smooth;
}