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

body {
  color: #484848;
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 600;
  background: linear-gradient(90deg, #F3DBDE 10.42%, #E1E9F5 86.67%);
}

.container {
  width: 90%;
  margin-inline: auto;
}

.middle-container {
  width: 90%;
  margin-inline: auto;
}

.inner {
  width: 100%;
  max-width: 466px;
  margin-inline: auto;
}

.flex {
  display: flex;
}

.contents {
  background-color: #fff;
}

.contents h1 {
  font-weight: 700;
  font-size: 3rem;
}

.text {
  font-weight: 400;
  color: #333;
  line-height: 1.75;
  text-align: justify;
  width: 90%;
  margin-inline: auto;
}

.dib {
  display: inline-block;
}

/* ピンクの矢印ボタン */
.pink-arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: #FB94A1;
  background-color: #fff;
  border-radius: 77px;
  border: 2px solid #F4DCDF;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: .5s;
  width: 381px;
  height: 60px;
  font-size: 2.4rem;
}

.pink-arrow-button::after {
  width: 15px;
  height: 15px;
  border-top: 3px solid #FB94A1;
  border-right: 3px solid #FB94A1;
  right: 40px;
}

.pink-arrow-button:hover {
  color: #fff;
}

.pink-arrow-button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FB94A1;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .5s;
  z-index: -1;
}

.pink-arrow-button:hover::before {
  transform: scale(1, 1);
}

.pink-arrow-button::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: rotate(45deg)translateY(-50%);
  transition: .5s;
}

.pink-arrow-button:hover::after {
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

/* 年間占いバナー */
.year-banner {
  display: block;
  border-radius: 20px;
  background-color: #FFE2E6;
  overflow: hidden;
  position: relative;
  width: 90%;
}

.year-banner .for-zoom {
  align-items: center;
  justify-content: flex-start;
}

.year-banner .for-zoom .momohana {
  transition: .5s;
}

.year-banner:hover .for-zoom .momohana {
  transform: scale(1.05);
}

.year-banner .for-zoom p {
  text-align: center;
  color: #FB94A1;
  font-weight: 700;
  line-height: 1.02;
  font-size: 9rem;
}

.year-banner .for-zoom p .this-year {
  display: block;
}

.year-banner .for-zoom .this-year-zodiac-img {
  position: absolute;
}

.year-banner .for-zoom .this-year-zodiac-img img {
  object-fit: contain;
}

.year-banner:hover .for-zoom .this-year-zodiac-img img {
  animation: poyopoyo  1.5s ease-out forwards;
}

@keyframes poyopoyo {
  0%, 50%, 100% {
    transform: scale(1.1);
  }
  25%, 75% {
    transform: scale(1.2);
  }
}

/* ピンクリボン タイトル */
.contents .pink-ribbon {
  align-items: center;
  color: #FFF;
  background-color: #FB94A1;
  position: relative;
  margin-inline: auto;
  margin-bottom: 13px;
  height: 46px;
  font-size: 2.2rem;
}

.contents .pink-ribbon::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 0 26px 27px;
  border-color: transparent transparent transparent #FFFFFF;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
}

.contents .pink-ribbon::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 27px 26px 0;
  border-color: transparent #FFFFFF transparent transparent;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}

/* 今週の命運は？ 日付 12支イラスト*/
.contents .week {
  text-align: center;
}

.contents .week .date {
  font-size: 3.4rem;
  margin-bottom: 25px;
}

.contents .week .date .small-day-of-week {
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.contents .week .animals {
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  align-items: flex-end;
}

.contents .week .animals {
  gap: 20px 0;
}

.contents .week .animals a {
  width: 30%;
}

.contents .week .animals a figure img {
width: 100%;
margin-bottom: 2px;
}

.contents .week .animals a:hover figure img {
  animation: swayImg .8s forwards ease-in-out;
}

.contents .week .animals a figure figcaption {
  transition: .3s;
  font-family: 'Mochiy Pop One', sans-serif;
  font-weight: 400;
}

.contents .week .animals a:hover figure figcaption {
  color: #FB94A1;
}

@keyframes swayImg {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(-3deg);
  }

  66% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.contents .week .animals figure figcaption {
  font-size: 1.9rem;
}

/* 生年月日計算 */
.contents .zodiac {
  border: 2px solid #F4DCDF;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 10px;
  padding: 18px 23px 36px;
}

.contents .zodiac .date-of-birth {
  font-weight: 400;
  text-align: left;
  color: #959595;
  font-size: 1.4rem;
}

.contents .zodiac .birth {
  width: 100%;
  justify-content: space-between;
}

.contents .zodiac .birth .birth-deco {
  position: relative;
}

.contents .zodiac .birth .birth-deco::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-bottom: 0;
  right: 10px;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 10px solid #484848;
}

.contents .zodiac .birth .birth-deco select {
  width: 100%;
  border: 2px solid #F4DCDF;
  text-align: left;
  transition: .5s;
  height: 46px;
  padding-left: 10px;
}

.contents .zodiac .birth .birth-deco select .selected_hidden {
  text-align: right;
}

.contents .zodiac .birth .birth-deco select:hover {
  border: 2px solid #FFABB6;
}

.contents .zodiac .birth .birth-deco select:focus-visible {
  outline: none;
}

.contents .zodiac .birth .birth-year {
  width: 52%;
}

.contents .zodiac .birth .birth-month {
  width: 21%;
}

.contents .zodiac .birth .birth-day {
  width: 21%;
}

.contents .zodiac .your-zodiac {
  color: #9AB927;
  font-weight: 700;
}

.contents .zodiac .your-zodiac .answer {
  color: #FB94A1;
  font-size: 3.6rem;
  margin: 0 3px;
}

.contents .caution {
  color: #767676;
  font-weight: 400;
  font-size: 1.8rem;
  margin-bottom: 34px;
  width: 90%;
  margin-inline: auto;
}

/* お知らせ一覧の共通 */
.middle-container .heading {
  position: relative;
  margin-bottom: 34px;
}

.middle-container .heading h2 {
  margin-inline: auto;
  font-weight: 700;
  font-size: 3rem;
  color: #613812;
}

.middle-container .heading a {
  position: absolute;
  color: #FB94A1;
  font-weight: 500;
  border-bottom: 1px solid #FB94A1;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  font-size: 2.2rem;
  padding-right: 20px;
  transition: .3s;
}

.middle-container .heading a::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  transition: .5s;
  width: 12px;
  height: 12px;
  border-top: 2px solid #FB94A1;
  border-right: 2px solid #FB94A1;
  right: 5px;
}

.middle-container .heading a:hover {
  border-bottom: 1px solid transparent;
  opacity: .8;
}

.middle-container .heading a:hover::after {
  transform: rotate(45deg) translate(3px, -70%);
}

.middle-container .each-news {
  background-color: #fff;
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  margin-bottom: 20px;
  padding: 20px 24px;
  transition: .5s;
}

.middle-container .each-news:hover {
  background-color: #FCEFF1;
}

.middle-container .each-news:last-of-type {
  margin-bottom: 0;
}

.middle-container .each-news .date {
  color: #8A8A8A;
  transition: .5s;
}

.middle-container .each-news:hover .date {
  opacity: .5;
}

.middle-container .each-news .title {
  transition: .5s;
}

.middle-container .each-news:hover .title {
  opacity: .5;
}

/* 干支を調べる */
.investigate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FF65C1;
  width: 100%;
  color: #fff;
  margin-inline: auto;
  position: relative;
  transition: .5s;
  height: 60px;
  box-shadow: 0 0 0 0 #F4DCDF inset, 0 0 0 0 #F4DCDF;
  transition: all .2s ease-in-out;
  border: 1px solid #FF65C1;
}

.investigate-button:hover {
  box-shadow: 0 0 5px 0 #F4DCDF inset, 0 0 5px 4px #F4DCDF;
}

.investigate-button::before {
  position: absolute;
  content: "干支を調べる";
  color: #fff;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 3rem;
}

/* snsバナー */
.sns {
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  background: #FFF;
  margin-inline: auto;
  overflow: hidden;
}

.sns h2 {
  color: #FB94A1;
  font-weight: 600;
  position: relative;
  font-size: 3.2rem;
}

.sns h2::before {
  position: absolute;
  content: "";
  width: 2px;
  background-color: #FB94A1;
  transform: rotate(-30deg);
  bottom: -2px;
}

.sns h2::after {
  position: absolute;
  content: "";
  width: 2px;
  background-color: #FB94A1;
  transform: rotate(30deg);
  bottom: -2px;
}

.sns h2 span {
  color: #9AB927;
}

.sns .img-icons {
  justify-content: space-between;
}

.sns .img-icons .rotate {
  position: relative;
}

.sns .img-icons .rotate img {
  max-width: fit-content;
  position: absolute;
  transform: rotate(14deg);
  top: 12px;
  left: -121px;
}

.sns .img-icons .icons {
  text-align: center;
  padding-top: 19px;
}

.sns .img-icons .icons h3 {
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 3px;
}

.sns .img-icons .icons a {
  border-radius: 46px;
  position: relative;
  display: block;
  transition: .5s;
  height: 62px;
}

.sns .img-icons .icons a:hover {
  opacity: .7;
}

.sns .img-icons .icons .x {
  margin-bottom: 15px;
}

.sns .img-icons .icons .x a {
  background-color: #0F1419;
}

.sns .img-icons .icons .instagram a {
  background-color: #F80277;
}

.sns .img-icons .icons a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .1s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sns .img-icons .icons .x a::after {
  content: url(../img/x.svg);
  width: 30px;
  height: 31px;
}

.sns .img-icons .icons .x a:hover::after {
  width: 31px;
  height: 32px;
}

.sns .img-icons .icons .instagram a::after {
  content: url(../img/instagram.svg);
  width: 30px;
  height: 30px;
}

.sns .img-icons .icons .instagram a:hover::after {
  width: 31px;
  height: 31px;
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
  width: 90%;
  margin-inline: auto;
}

.pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  border: 1px solid #FB94A1;
  background: #FB94A1;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.pagination a {
  transition: .3s;
}

.pagination a:hover {
  opacity: .5;
}

.pagination a.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  border: 1px solid #FB94A1;
  background: #FFF;
  color: #FB94A1;
  font-size: 2rem;
  font-weight: 700;
}

.pagination a.prev {
  position: relative;
  background-color: transparent;
  border: none;
}

.pagination a.prev::after {
  position: absolute;
  content: "";
  border-top: 3px solid #FB94A1;
  border-left: 3px solid #FB94A1;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
}

.pagination a.next {
  position: relative;
  background-color: transparent;
  border: none;
}

.pagination a.next::after {
  position: absolute;
  content: "";
  border-top: 3px solid #FB94A1;
  border-right: 3px solid #FB94A1;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

/*------------------------------ ヘッダー ------------------------------*/
header {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  font-weight: 600;
  background-color: #fff;
  padding: 20px 0 8px;
}

header::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #F3DBDE 0%, #E1E9F5 100%);
  z-index: -1;
}

header .container .logo {
  margin-inline: auto;
  text-align: center;
  margin-bottom: 13px;
}

header .container .logo a {
  transition: .5s;
  opacity: 1;
}

header .container .logo a:hover {
  opacity: .5;
}

header .container .logo img {
  object-fit: contain;
}

header .container .update {
  text-align: center;
  font-family: "Mochiy Pop One";
  font-size: 2.4rem;
  font-weight: 400;
  color: #FB94A1;
  letter-spacing: 0.03em;
  margin-bottom: 11px;
}

header .container nav ul {
  justify-content: space-between;
  align-items: center;
}

header .container nav ul li {
  display: flex;
  text-align: center;
  line-height: 1.2;
  font-size: 2rem;
  height: 48px;
}

header .container nav ul li a {
  display: flex;
  align-items: center;
  position: relative;
  transition: .3s;
}

header .container nav ul li a.current-page {
  color: #FB94A1;
}

header .container nav ul li a.current-page::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  background-color: #FB94A1;
  border-radius: 9999px;
}

header .container nav ul li a:hover {
  color: #FB94A1;
}

header .container nav ul li a::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FB94A1;
  opacity: 0;
  transition: .3s;
  border-radius: 9999px;
}

header .container nav ul li a:hover::after {
  height: 12px;
  opacity: 1;
}

/*------------------------------ フッター ------------------------------*/
footer {
  background-color: #fff;
  width: 100%;
  text-align: center;
}

footer .container nav ul {
  justify-content: space-between;
  align-items: center;
}

footer .container nav ul li {
  text-align: center;
}

footer .container nav ul li a {
  display: flex;
  position: relative;
  transition: .3s;
  align-items: center;
  position: relative;
  transition: .3s;
}

footer .container nav ul li a.current-page {
  color: #FB94A1;
}

footer .container nav ul li a.current-page::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #FB94A1;
  border-radius: 9999px;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
}

footer .container nav ul li a:hover {
  color: #FB94A1;
}

footer .container nav ul li a::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 1px;
  background-color: #FB94A1;
  opacity: 0;
  transition: .3s;
  border-radius: 9999px;
}

footer .container nav ul li a:hover::after {
  height: 8px;
  opacity: 1;
}

footer .container p small {
  font-size: 1.4rem;
  font-weight: 500;
}

/*------------------------------ TOP ------------------------------*/
#top .contents {
  text-align: center;
}

#top .contents h2 {
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: #613812;
}

#top .contents .week .pink-ribbon {
  align-items: center;
  color: #FFF;
  background-color: #FB94A1;
  height: 46px;
  position: relative;
  margin-inline: auto;
  font-size: 2.2rem;
  width: 274px;
  margin-bottom: 13px;
}

#top .contents .week .pink-ribbon::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 0 26px 27px;
  border-color: transparent transparent transparent #FFFFFF;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
}

#top .contents .week .pink-ribbon::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 26px 27px 26px 0;
  border-color: transparent #FFFFFF transparent transparent;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}

/*------------------------------ 週刊占い 一覧 ------------------------------*/
#week .contents .week {
  margin-bottom: 62px;
}

#week .contents .zodiac-head {
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: #613812;
}

/*------------------------------ 週刊占い詳細 ------------------------------*/
#single-week .contents .week h1 {
  font-weight: 900;
  color: #FB94A1;
  font-size: 5rem;
}

#single-week .contents .week h1 .chose-zodiac {
  color: #9AB927;
}

#single-week .contents .week .before-date {
  color: #FB94A1;
  font-size: 2.2rem;
  margin-bottom: 5px;
}

#single-week .contents .week h2 {
  color: #FB94A1;
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 14px;
}

#single-week .contents .week .your-week-fortune {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 44px;
}

#single-week .contents .week .your-week-fortune::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #F3DBDE 0%, #E1E9F5 100%);
}

#single-week .contents .week .better {
  margin-bottom: 66px;
}

#single-week .contents .week .power {
  border: 2px solid #F4DCDF;
  margin-inline: auto;
  width: 90%;
  padding: 25px 10px;
  margin-bottom: 60px;
}

#single-week .contents .week .power h2 {
  align-items: center;
  color: #FFF;
  background-color: #FB94A1;
  position: relative;
  margin-inline: auto;
  margin-bottom: 13px;
  height: 46px;
  font-size: 2.2rem;
  max-width: 420px;
}

#single-week .contents .week .power .explanation {
  justify-content: space-between;
  align-items: center;
}

#single-week .contents .week .power .explanation .power-zodiac img {
  margin-bottom: 5px;
}

#single-week .contents .week .power .explanation .power-zodiac p {
  font-weight: 400;
}

#single-week .contents .week .power .explanation .point-color {
  width: 65%;
  text-align: left;
}

#single-week .contents .week .power .explanation .point-color h3 {
  font-family: 'Mochiy Pop One', sans-serif;
  font-weight: 400;
  justify-content: flex-start;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #FFFFDC;
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
  color: #FB94A1;
  font-size: 3rem;
  margin-bottom: 2px;
}

#single-week .contents .week .power .explanation .point-color p {
  font-weight: 500;
  line-height: 1.75;
}

#single-week .contents .week .power .explanation .point-color .point {
  margin-bottom: 20px;
}

#single-week .contents .week .power .explanation .point-color .color {
  margin-bottom: 15px;
}

#single-week .contents .week .power .explanation .point-color .color p {
  color: #FB94A1;
  /* font-size: 1.4rem; */
  font-weight: 400;
}

#single-week .contents .week .power .explanation .point-color .two-color {
  gap: 0 20px;
}

#single-week .contents .week .power .explanation .point-color .two-color figure {
  align-items: center;
}

#single-week .contents .week .power .explanation .point-color .two-color figure .modified-svg svg {
  max-width: 70px;
  height: 42px;
}

#single-week .contents .week .animals {
  margin-bottom: 63px;
}

/*------------------------------ 年間占い 一覧 ------------------------------*/
#year .contents {
  text-align: center;
}

#year .contents .middle-container .tell {
  line-height: 1.5;
  font-size: 2.2rem;
  color: #613812;
}

#year .contents .middle-container h1 {
  color: #FB94A1;
  font-size: 3rem;
}

#year .contents .middle-container .fortune a {
  justify-content: space-between;
  align-items: center;
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  background-color: #fff;
  font-size: 3rem;
  margin-bottom: 30px;
  transition: .5s;
}

#year .contents .middle-container .fortune a:hover {
  background-color: #FCEFF1;;
}

#year .contents .middle-container .fortune a:last-of-type {
  margin-bottom: 0;
}

#year .contents .middle-container .fortune a figure img {
  transition: .5s;
}

#year .contents .middle-container .fortune a:hover figure img {
  animation: swayImg .8s forwards ease-in-out;
}

@keyframes swayImg {
  0% {
    transform: rotate(0deg);
  }

  33% {
    transform: rotate(-3deg);
  }

  66% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

#year .contents .middle-container .fortune a figure figcaption {
  font-weight: 900;
  color: #FB94A1;
  font-size: 2.2rem;
}

#year .contents .middle-container .fortune a figure figcaption span {
  color: #9AB927;
}

#year .contents .middle-container .fortune a p {
  text-align: justify;
  transition: .5s;
  line-height: 1.54;
  width: 80%;
}

#year .contents .middle-container .fortune a:hover p {
  opacity: .5;
}

/*------------------------------ 年間占い 詳細 ------------------------------*/
#single-year .contents {
  text-align: center;
  margin-bottom: 40px;
}

#single-year .contents h1 {
  font-weight: 900;
  color: #FB94A1;
}

#single-year .contents h1 .chose-zodiac {
  color: #9AB927;
}

#single-year .contents .chose-zodiac-img {
  margin-bottom: 15px;
}

#single-year .year-top p:first-of-type {
  line-height: 1.54;
  margin-inline: auto;
  font-size: 2.2rem;
  margin-bottom: 30px;
  color: #613812;
}

#single-year .contents figure {
  justify-content: center;
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  background: #FFF;
  align-items: center;
  padding: 10px 0;
}

#single-year .contents figure figcaption {
  font-size: 2.2rem;
  color: #613812;
}

#single-year .contents figure .figure-img img {
  object-fit: contain;
}

#single-year .contents .two-lucky .lucky-color {
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  background: #FFF;
  padding: 0 5px;
}

#single-year .contents .number-text {
  justify-content: center;
  border-radius: 20px;
  border: 2px solid #F4DCDF;
  background: #FFF;
  align-items: center;
}

#single-year .contents .number-text .lucky-number {
  font-weight: 600;
  color: #FB94A1;
  font-size: 9.6rem;
}

#single-year .contents .number-text p {
  color: #613812;
}

#single-year .protection .img-color {
  margin-inline: auto;
  gap: 0 40px;
  width: 321px;
}

#single-year .contents .two-lucky {
  width: 90%;
  margin-inline: auto;
}

#single-year .contents.happy .two-lucky {
  justify-content: center;
}

#single-year .lucky .two-lucky .img-color {
  padding: 0 5%;
}

#single-year .lucky .two-lucky .number-text p span {
  display: inline-block;
}

#single-year .happy .two-lucky figure figcaption {
  color: #FB94A1;
  font-weight: 900;
  font-size: 3rem;
}

#single-year .happy .two-lucky figure figcaption span {
  color: #9AB927;
}

/*------------------------------ お知らせ一覧 ------------------------------*/
#news .middle-container {
  margin-bottom: 60px;
}

#news .middle-container h1 {
  margin-inline: auto;
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 34px;
  color: #613812;
}

/*------------------------------ お知らせ詳細 ------------------------------*/
#single-news .contents {
  padding: 40px 5%;
}

#single-news .contents .date {
  color: #8A8A8A;
}

#single-news .contents .title {
  color: #613812;
  justify-content: flex-start;
  border-bottom: 1px solid #000;
  font-weight: 600;
  font-size: 3rem;
  padding-bottom: 15px;
  margin-bottom: 14px;
}

#single-news .contents .text {
  width: 100%;
  margin-bottom: 72px;
}

/*------------------------------ ももはな占いについて ------------------------------*/
#about .contents {
  text-align: center;
}

#about .contents h1 {
  color: #613812;
  margin-bottom: 40px;
}

#about .contents dl {
  text-align: left;
  width: 90%;
  margin-inline: auto;
  margin-bottom: 30px;
}

#about .contents dl:last-of-type {
  margin-bottom: 42px;
}

#about .contents dl dt {
  display: inline-block;
  background: #EEF4FD;
  padding: 6px 10px;
  font-size: 2.2rem;
}

#about .contents dl dd {
  width: 100%;
}

#about .contents .supervision {
  margin-bottom: 40px;
}

#about .contents .supervision figure figcaption {
  line-height: 1.75;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

@media screen and (max-width: 500px) {
  #about .contents .supervision figure figcaption {
    font-size: 2rem;
  }
}

#about .contents .supervision h2 {
  display: inline-block;
  background: #EEF4FD;
  padding: 6px 10px;
  font-size: 2.2rem;
  margin-bottom: 3px;
}

#about .contents .links {
  width: 90%;
  margin-inline: auto;
}

#about .contents .links h2 {
  display: inline-block;
  margin-bottom: 20px;
}

#about .contents .links .official .pink-arrow-button {
  width: 48%;
}

/*------------------------------ プライバシーポリシー ------------------------------*/
.mb20 {
  margin-bottom: 20px;
}

#privacy .contents h1 {
  color: #613812;
  font-weight: 700;
  margin-bottom: 30px;
}

#privacy .contents .privacy-container {
  width: 90%;
  margin-inline: auto;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
}

#privacy .contents .privacy-container h2 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 2rem;
  color: #FB94A1;
  justify-content: flex-start;
}

#privacy .contents .privacy-container article ul li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 3px;
}

#privacy .contents .privacy-container article ul li:last-of-type {
  margin-bottom: 0;
}

#privacy .contents .privacy-container article ul li a {
  color: #FB94A1;
  border-bottom: 1px solid #FB94A1;
  transition: .5s;
}

#privacy .contents .privacy-container article ul li a:hover {
    border-bottom: 1px solid transparent;
    opacity: .8;
}

#privacy .contents .privacy-container .afterword {
  text-align: right;
}

#privacy .contents .privacy-container .company {
  text-align: right;
}


/*------------------------------ 404 ------------------------------*/
#not-found {
  text-align: center;
}

#not-found .contents .number-text {
  color: #FB94A1;
  font-weight: 700;
  font-size: 9rem;
}

#not-found .contents p:nth-of-type(2) {
  margin-bottom: 40px;
}

/*------------------------------ お問い合わせ 送信完了------------------------------*/
#contact-thanks .contents {
  margin-bottom: 80px;
}

#contact-thanks .contents h1 {
  color: #613812;
  margin-bottom: 19px;
}

#contact-thanks .contents p {
  margin-inline: auto;
  line-height: 1.75;
  font-weight: 400;
  color: #333;
  max-width: 466px;
  margin-bottom: 10px;
  width: 90%;
}

#contact-thanks .contents .long-mb {
  margin-bottom: 40px;
}


/*------------------------------ お問い合わせ ------------------------------*/

#contact .contents h1 {
  color: #613812;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 19px;
}

#contact .contents .please {
  max-width: 466px;
  margin-inline: auto;
  margin-bottom: 40px;
    width: 90%;
}

#contact .contents .please p {
    line-height: 1.75;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
}

#contact .contents .contact_form {
  max-width: 466px;
  width: 90%;
  margin-inline: auto;
}

#contact .contents .contact_form input {
  background-color: transparent;
}

#contact .contents label {
  color: #959595;
  line-height: 1.71;
}

#contact .contents .contact_form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}

#contact .contents .contact_form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  position: absolute;
  color: #FB94A1;
  line-height: 1.75;
  bottom: -25px;
  left: 0;
}

#contact .contents .contact_form .wpcf7-form-control-wrap input.wpcf7-form-control,
#contact .contents .contact_form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  font-family: 'M PLUS 1', sans-serif;
  display: block;
  width: 100%;
  font-size: 2rem;
  color: #333;
  border: 2px solid #F4DCDF;
  padding: 8px 14px;
}

#contact .contents .contact_form .wpcf7-form-control-wrap textarea.wpcf7-form-control {
  font-weight: 400;
  line-height: 2;
}

#contact .contents .contact_form .wpcf7-form-control-wrap input::placeholder {
  color: #A9A9A9;
}

#contact .contents .contact_form p {
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

#contact .contents .contact_form .accept {
  text-align: center;
  margin-bottom: 40px;
}

#contact .contents .contact_form .accept .wpcf7-list-item label {
  display: flex;
  align-items: center;
}

#contact .contents .contact_form .accept input {
  width: 24px;
  height: 24px;
  border: 1px solid #D1D1D1;
  margin-right: 15px;
}

#contact .contents .contact_form .accept .wpcf7-list-item-label {
  font-size: 1.8rem;
  color: #FB94A1;
}

#contact .contents .contact_form .accept .wpcf7-list-item-label span {
  color: #484848;
}

#contact .contents .contact_form .accept .wpcf7-list-item-label a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: .3s;
}

#contact .contents .contact_form .accept .wpcf7-list-item-label a:hover {
  opacity: .5;
}

#contact .contents .contact_form .confirm .wpcf7-submit:disabled {
  color: rgba(251, 148, 161, 0.5);
  background-color: #fff;
}

#contact .contents .contact_form .confirm .wpcf7-submit:disabled:hover {
  color: #fff;
  background-color: #fff;
}

#contact .contents .contact_form .confirm .pink-arrow-button {
  transition: .3s;
}

#contact .contents .contact_form .confirm .pink-arrow-button::after {
  transition: .5s;
}

#contact .contents .contact_form .confirm input:disabled:hover::after {
  display: none;
}

#contact .contents .contact_form .confirm p input.pink-arrow-button {
  font-weight: 600;
  position: relative;
  top: 33px;
  left: -2px;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: center;
  text-transform: inherit;
  width: 102%;
  border: none;
  transition: .3s;
}

/* 色変化だけ　スライドなしテスト */
#contact .contents .contact_form .confirm .pink-arrow-button::before {
  transform: none;
  opacity: 0;
  transition: .3s;
}

#contact .contents .contact_form .confirm .pink-arrow-button:hover:before {
  opacity: 1;
}


/*------------------------------ お問い合わせ確認 ------------------------------*/

#contact-confirm .contents h1 {
  color: #613812;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 19px;
}

#contact-confirm .contents .contact_form {
  max-width: 466px;
  width: 90%;
  margin-inline: auto;
}

#contact-confirm .contents .contact_form .answer {
  display: block;
  color: #333;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
}

#contact-confirm .contents .contact_form label {
  color: #959595;
  font-size: 1.4rem;
  line-height: 1.71;
  display: block;
  margin-bottom: 20px;
}

#contact-confirm .contents .contact_form .textarea label {
  margin-bottom: 60px;
}

#contact-confirm .contents .contact_form .textarea label .answer {
  line-height: 2;
  font-weight: 400;
}

#contact-confirm .contents .contact_form .accept .wpcf7-list-item-label a:hover {
  opacity: .5;
}

#contact-confirm .contents .contact_form .submit .pink-arrow-button {
  transition: .3s;
}

#contact-confirm .contents .contact_form .submit p input.pink-arrow-button {
  font-weight: 600;
  position: relative;
  top: 18px;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: center;
  text-transform: inherit;
  border: none;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button {
  margin-bottom: 30px;
  transition: .3s;
}

#contact-confirm .contents .contact_form .edit p input.gray-arrow-button {
  font-weight: 600;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: center;
  text-transform: inherit;
  border: none;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: #ACACAC;
  background-color: #fff;
  border-radius: 77px;
  border: 2px solid #ACACAC;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: .3s;
  width: 381px;
  height: 60px;
  font-size: 2.4rem;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button::after {
  width: 15px;
  height: 15px;
  border-top: 3px solid #ACACAC;
  border-left: 3px solid #ACACAC;
  left: 40px;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button:hover {
  color: #fff;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D2D2D2;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .5s;
  z-index: -1;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button:hover::before {
  transform: scale(1, 1);
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: .5s;
}

#contact-confirm .contents .contact_form .edit .gray-arrow-button:hover::after {
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
}