@charset "UTF-8";

@font-face {
  font-family: 'Neura Display';
  src: url('../fonts//NeuraDisplayVariable[wght].ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
:root {
   --color-black: #2D2D2D;
   --color-white: #FFFFFF;
   --color-gray: #807E7B;
   --color-navy: #1D4984;
   --color-pink: #DBB7C3;
   --color-gold: #BD9E85;
}

/*============================
全体
============================*/
html {
  font-size: 10px;
}
body {
  font-family: "LINE Seed JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: 0;
  width: 100%;
}
main {
  overflow-x: hidden;
}
a {
  color: var(--color-black);
  text-decoration: none;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
li {
  list-style: none;
}
.neura-display {
  font-family: 'Neura Display', sans-serif;
}
.serif {
  font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 767px) {
  /* コンテンツ幅 */
  .wrapper {
    width: 100%;
  }
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }
}

/*==================================
定期便ご契約内容
==================================*/

.subscription-info {
  background: linear-gradient(180deg, #F4FEFF 0%, #DDF5F7 100%);
  padding: 18rem 4rem 14rem;
}

.subscription-info__inner {
  width: 100%;
  max-width: 102.4rem;
  margin: 0 auto;
}

.subscription-info__card {
  background: #fff;
  border-radius: 16px;
  padding: 8rem 4rem;
}

.subscription-info__title {
  color: #1D4984;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 5.6rem;
}

.subscription-info__body {
  text-align: center;
}

.subscription-info__lead {
  color: #1D4984;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 2.4rem;
}

.subscription-info__note {
  color: #2D2D2D;
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 5.6rem;
}

.subscription-info__button-wrap {
  display: flex;
  justify-content: center;
}

.subscription-info__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 36rem;
  height: 5.6rem;
  border: 2px solid #1D4984;
  border-radius: 999px;
  background: #1D4984;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  transition: .3s;
}

.subscription-info__button-arrow {
  position: absolute;
  top: 50%;
  right: 4rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 1.3rem;
  background: url("../img/white-arrow.svg") center / contain no-repeat;
  transition: .3s;
}

@media (min-width:768px){

  .subscription-info__button:hover{
    background:#fff;
    color:#1D4984;
  }

  .subscription-info__button:hover .subscription-info__button-arrow{
    background-image:url("../img/navy-arrow.svg");
    transform:translateY(-50%) translateX(8px);
  }

}

@media screen and (max-width:767px){

  .subscription-info{
    padding:10rem 2rem 6rem;
  }

  .subscription-info__card{
    border-radius:12px;
    padding:4rem 2rem;
  }

  .subscription-info__title{
    font-size:2.4rem;
    margin-bottom:3.2rem;
  }

  .subscription-info__lead{
    font-size:2rem;
    margin-bottom:1.6rem;
  }

  .subscription-info__note{
    font-size:1.6rem;
    margin-bottom:4rem;
  }

  .subscription-info__button{
    max-width:100%;
    height:5rem;
    font-size:1.8rem;
  }

  .subscription-info__button-arrow{
    right:3rem;
    width:2rem;
    height:1rem;
  }

}