@charset "UTF-8";

/*
Theme Name: serendipity様オリジナルテーマ
Version: 2024/08/01
*/

/* 共通 */
h2 {
  font-size: clamp(35px, 9.3vw, 60px);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: 0.05em;
  line-height: 120%;
  font-family: var(--dancing);
}

.under-h2 {
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: var(--font-weight-semi-bold);
  line-height: 120%;
}

img {
  width: 100%;
  height: auto;
}

/* リセット */
* {
  box-sizing: border-box;
}

/* スクリーンリーダー用テキスト */
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* 共通 */
:root {
  /* font-family */
  --robot: "Roboto Serif", serif;
  --noto-serif: "Noto Serif JP", serif;
  --dancing: "Dancing Script", cursive;
  /* font-size */
  font-size: 16px;
  --font-size-base: clamp(1rem, 4.571vw, 1.125rem); /* 16px~18px */
  --font-size-sm: clamp(0.5rem, 2.286vw, 0.625rem); /* 8px~10px */
  --font-size-lg: clamp(1.5rem, 6.857vw, 1.625rem); /* 24px-26px */
  /* font-weight */
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  /* Color */
  --whiteColor: #fff;
  --blackColor: #000;

  /* animation */
  --animationDuration: 0.5s;
}

html {
  scroll-behavior: smooth;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
}

body {
  font-family: var(--noto-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  color: var(--blackColor);
  overflow-x: hidden;
}

/* .pc_view {
  display: initial;
} */

.sp_view {
  display: none;
}

@media (max-width: 768px) {
  .pc_view {
    display: none;
  }

  .sp_view {
    display: block;
  }
}

/* ヘッダー */
header {
  width: 100%;
  background-color: #e8e6dd;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  width: 90%;
  padding-top: 10px;
}

.sp-view {
  display: none;
}

.pc-view {
  display: initial;
}

.header-text {
  text-align: right;
  font-weight: var(--font-weight-medium);
  line-height: 150%;
}

.header-text p {
  font-size: clamp(14px, 3.7vw, 16px);
}

@media (max-width: 1150px) {
  .sp-view {
    display: initial;
  }

  .pc-view {
    display: none;
  }

  header .container {
    flex-direction: row-reverse;
  }
}

/* ヘッダー：ナビゲーション */
.nav .nav-menu {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 0;
  text-align: center;
}

.nav-menu a {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  padding: 0 25px;
  border-right: 1px solid #000;
}

.nav-menu a:hover {
  color: #fff;
}

/* ヘッダー：ナビゲーション：ボタン */
.navbtn {
  width: 48px;
  height: 48px;
  padding: 0;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 100;
}

.navbtn-bar {
  position: relative;
  display: block;
  width: 40px;
  height: 3px;
  background-color: currentColor;
  color: var(--blackColor);
  transition: transform 0.5s;
}

.navbtn-bar::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  transition: transform 0.5s;
  width: 40px;
  left: 0;
  transform: translateX(-50%);
  transform: translateY(-12px);
}

.navbtn p,
.sp-block {
  display: none;
}

/* ヘッダー：ナビゲーション：ボタン：オープン */
.navbtn-bar.open {
  transform: translateY(0) rotate(-405deg);
}

/* ヘッダー：ナビゲーション：オーバーレイ */
.navbtn-bar.open::before {
  transform: translateY(0) rotate(270deg);
}

@media (max-width: 1150px) {
  .navbtn {
    height: 100%;
    width: auto;
    aspect-ratio: 1.5/1;
    text-align: center;
  }

  .navbtn p,
  .to-contact-sp p {
    display: block;
    transform: translateY(25px);
  }

  .to-contact-sp p {
    transform: translateY(5px);
  }

  .open .navbtn p {
    opacity: 0;
  }

  .navbtn-bar,
  .navbtn-bar::before,
  .navbtn-bar::after {
    margin: 0 auto;
  }

  .sp-block {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 2px;
    height: 108px;
  }

  /* ヘッダー：ナビゲーション */
  .nav .nav-menu {
    justify-content: center;
    gap: 0;
    flex-direction: column;
    padding-top: 5vh;
  }

  .nav .nav-menu a {
    margin-bottom: 2.5em;
    width: 200px;
    padding: 0;
  }

  /* ヘッダー：ナビゲーション：オーバーレイ */
  .nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: scroll;
  }

  /* ヘッダー：ナビゲーション：オーバーレイ：オープン */
  .nav.open {
    opacity: 1;
    visibility: visible;
    z-index: 90;
    background-color: #e8e6dd;
  }
}

@media (max-width: 800px) {
  .nav .nav-menu {
    padding-top: 5vh;
  }

  .navbtn-bar,
  .navbtn-bar::before {
    width: 25px;
    height: 3px;
  }

  .navbtn-bar {
    transform: translateY(-2px);
  }

  .navbtn-bar::before {
    transform: translateY(-8px);
  }

  .navbtn-bar.open::before {
    transform: translateY(0) rotate(270deg);
  }

  .navbtn-bar.open {
    transform: translateY(-6px) rotate(-405deg);
  }

  .to-contact-sp img {
    width: 40px;
    margin: 0 auto;
    padding-top: 6px;
  }

  .main-logo img {
    height: 68px;
  }
}

/* FV */
#fv {
  background-color: rgba(232, 230, 221, 1);
  padding-top: 200px;
  padding-bottom: 40px;
  position: relative;
}

.fv-img img {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  height: auto;
  z-index: 1;
}

.fv-img {
  position: relative;
}

.fv-img::before {
  position: absolute;
  left: -1%;
  top: -20%;
  width: 70%;
  height: 50%;
  content: "";
  background: url(./assets/img/logo.png) top/contain;
  background-repeat: no-repeat;
}

@media (max-width: 1000px) {
  #fv {
    padding-top: 100px;
    padding-bottom: 20px;
  }

  .fv-img::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20%;
    width: 100%;
    height: 50%;
    background: url(./assets/img/logo.png) center/contain;
    background-repeat: no-repeat;
  }
}

@media (max-width: 768px) {
  .fv-img img {
    width: 70%;
  }
}

/* SNS */
#sns {
  background-color: rgba(232, 230, 221, 1);
}

#sns .container {
  padding-top: 47px;
  padding-bottom: 47px;
}

.sns-flex {
  display: flex;
  max-width: 740px;
  margin: 0 auto;
  gap: 15%;
  width: 92%;
}

.line-text,
.instagram-text {
  font-size: clamp(14px, 3.7vw, 22px);
  font-weight: var(--font-weight-bold);
  padding-top: 18px;
  padding-bottom: 18px;
  border: 1.5px solid rgba(0, 0, 0, 1);
  width: 50%;
}

.line-text:hover,
.instagram-text:hover {
  background-color: #000;
  color: rgba(232, 230, 221, 1);
}

@media (max-width: 800px) {
  .sns-flex {
    gap: 10%;
  }
}

@media (max-width: 600px) {
  .sns-flex {
    gap: 5%;
  }
}

/* feature */
#feature {
  background-color: #fff;
  padding-top: 137px;
  padding-bottom: 137px;
}

#feature .under-h2 {
  margin-bottom: 15px;
}

#feature .catch {
  margin-bottom: 3rem;
}

.large {
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(16px, 4.26vw, 30px);
  color: rgba(150, 209, 228, 1);
}

.feature-text {
  font-size: clamp(13px, 3.73vw, 20px);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  line-height: 1.7em;
  color: #000;
  width: 92%;
  margin: 0 auto;
}

.feature-text:nth-of-type(2) {
  margin-bottom: 70px;
}

.feature-box {
  position: relative;
  background-color: #e8e6dd;
  text-align: center;
  width: 76%;
  margin: 0 0 0 auto;
}

.feature-box img {
  position: absolute;
  top: 0;
  left: -10%;
  width: 250px;
}

.feature-box::before {
  position: absolute;
  background: url(./assets/img/bed.png) center/contain;
  background-repeat: no-repeat;
  content: "";
  left: -22%;
  top: -30%;
  width: 321px;
  height: 414px;
  z-index: 10;
}

.feature-inner {
  display: inline-block;
  margin: 0 auto;
  text-align: left;
  padding: 90px 0 90px;
}

.feature-inner h3 {
  display: inline-block;
  text-align: center;
  line-height: 2;
  margin: 1.5em 0;
}

.feature-inner p {
  font-weight: var(--font-weight-medium);
  font-size: 16px;
  line-height: 200%;
}

.feature-inner span {
  font-weight: bold;
}

.sp-br {
  display: none;
}

@media (max-width: 1300px) {
  .feature-box::before {
    width: 250px;
    height: 350px;
    left: -30%;
  }

  .feature-box img {
    width: 220px;
    left: -20%;
  }
}

@media (max-width: 1000px) {
  .feature-inner {
    padding: 22em 1em 3em;
  }

  .feature-box::before {
    left: -10%;
    top: -13%;
  }

  .feature-box img {
    left: 8%;
  }

  #feature .under-h2 {
    margin-bottom: 80px;
  }
}

@media (max-width: 650px) {
  #feature {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .sp-br {
    display: initial;
  }

  .feature-text:nth-last-of-type(1) {
    padding-bottom: 50px;
  }

  .feature-box {
    width: 90%;
  }

  .feature-box img {
    left: 12%;
    top: 0;
    width: 200px;
  }

  .feature-box::before {
    left: -10%;
    top: -5%;
    width: 250px;
    height: 300px;
  }

  .feature-inner {
    padding: 20em 1em 3em;
  }
}

@media (max-width: 400px) {
  .feature-box img {
    left: 11%;
    width: 162px;
  }

  .feature-box::before {
    left: -2%;
    top: -5%;
    width: 188px;
    height: 250px;
  }

  .feature-box {
    width: 95%;
  }

  .feature-inner {
    padding: 16rem 1rem 2rem;
  }

  .feature-inner h3 {
    margin-bottom: 1.5em;
  }

  .feature-inner p,
  .feature-inner h3 {
    font-size: 14px;
  }
}

/* service */
#service {
  padding-top: 137px;
  padding-bottom: 337px;
  background-color: rgba(232, 230, 221, 1);
}

#service .under-h2 {
  margin-bottom: 100px;
}

.service-box {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto 85px auto;
}

.service-box table {
  width: 100%;
}

.service-box tr {
  border-bottom: 2px solid #000;
}

.service-box tr:last-of-type {
  border-bottom: none;
}

.service-box tr th {
  width: 35%;
  text-align: center;
  border-right: 2px solid #000;
  font-size: clamp(14px, 3.7vw, 18px);
  font-weight: var(--font-weight-medium);
  line-height: 150%;
  padding-top: 3em;
  padding-bottom: 3em;
}

.service-box tr td {
  width: 65%;
  font-size: clamp(14px, 3.7vw, 18px);
  font-weight: var(--font-weight-medium);
  line-height: 150%;
  text-align: left;
  padding-left: 5em;
  padding-top: 3em;
  padding-bottom: 3em;
}

.service-box h3 {
  font-size: clamp(20px, 5.3vw, 32px);
  margin-bottom: 40px;
  font-weight: var(--font-weight-semi-bold);
  display: inline-block;
  position: relative;
}

.service-box h3::before {
  position: absolute;
  content: "";
  width: 110%;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.3em;
  background: linear-gradient(to right, #000000 0%, #96d1e4 100%);
}

.service-box .under-h3 {
  font-size: clamp(0.875rem, calc(0.6875rem + 0.75vw), 1.25rem);
  line-height: 150%;
  margin-bottom: 35px;
}

.bottom-wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1170px;
}

.service-bottom {
  float: right;
  width: 530px;
  line-height: 200%;
  font-size: 16px;
}

.service-bottom li {
  list-style: none;
  text-align: left;
}

.service-br {
  display: none;
}

@media (max-width: 660px) {
  #service {
    padding-top: 70px;
    padding-bottom: 100px;
  }

  .service-br {
    display: initial;
  }

  .service-bottom {
    float: inherit;
    width: 90%;
    margin: 0 auto;
  }

  .service-box tr th {
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .service-box tr td {
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .service-box {
    margin-bottom: 60px;
  }

  .service-bottom li {
    font-size: 14px;
  }

  #service .under-h2 {
    margin-bottom: 50px;
  }

  .service-box h3 {
    margin-bottom: 25px;
  }
}

/* point */
#point {
  padding-top: 86px;
  padding-bottom: 86px;
  background-color: rgba(147, 138, 138, 1);
}

#point h2 {
  color: #fff;
}

#point .under-h2 {
  color: #fff;
}

.point-text {
  color: #fff;
  font-size: clamp(14px, 3.73vw, 20px);
  max-width: 637px;
  text-align: left;
  margin: 0 auto;
  padding-top: 40px;
  line-height: 1.5em;
  padding-bottom: 66px;
  width: 92%;
}

.point-flex {
  display: flex;
  max-width: 1060px;
  margin: 0 auto;
  width: 90%;
  gap: 15px;
  transform: translateX(4.5%);
}

.point-box {
  text-align: left;
}

.point-smalltext {
  color: #fff;
  font-size: 16px;
  text-align: left;
  padding-top: 20px;
  padding-bottom: 68px;
  font-weight: var(--font-weight-semi-bold);
}

.point-res {
  width: 300px;
  display: block;
  padding-top: 22px;
  padding-bottom: 22px;
  border: 1px solid #fff;
  margin-left: 68%;
  color: #fff;
  font-size: clamp(14px, 3.7vw, 22px);
  font-weight: var(--font-weight-bold);
}

.point-res:hover {
  background-color: #fff;
  color: #938a8a;
}

@media (max-width: 1000px) {
  .point-flex {
    flex-direction: column;
    align-items: center;
    transform: translateX(0);
  }

  .point-flex img {
    max-width: 500px;
    margin: 0 auto;
  }

  .point-box {
    text-align: center;
  }

  .point-smalltext {
    text-align: center;
  }

  .point-res {
    margin: 0 auto;
  }
}

@media (max-width: 650px) {
  #point {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .point-smalltext {
    padding: 10px 0 34px;
  }
}

/* message */
#message {
  padding-top: 130px;
  padding-bottom: 130px;
}

.message-text {
  font-size: clamp(18px, 4.8vw, 25px);
  font-weight: var(--font-weight-bold);
  color: #000;
  line-height: 1.5em;
  padding-bottom: 74px;
}

.message-large {
  font-size: clamp(22px, 4.8vw, 40px);
  font-weight: var(--font-weight-bold);
  color: #000;
}

.message-flex {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
  width: 92%;
  gap: 12%;
}

.message-title {
  width: 60%;
}

.message-title1 {
  font-size: clamp(18px, 4.8vw, 25px);
  font-weight: var(--font-weight-bold);
  color: #000;
  text-align: left;
  padding-bottom: 15px;
}

.message-text1 {
  font-size: clamp(14px, 3.73vw, 18px);
  font-weight: var(--font-weight-medium);
  color: #000;
  text-align: left;
  line-height: 1.8em;
}

.message-img {
  width: 35%;
}

@media (max-width: 1100px) {
  .message-flex {
    gap: 7%;
  }
}

@media (max-width: 800px) {
  .message-flex {
    flex-direction: column-reverse;
    gap: 50px;
  }

  .message-title {
    width: 100%;
    margin: 0 auto;
  }

  .message-img {
    width: 60%;
    margin: 0 auto;
  }
}

@media (max-width: 650px) {
  #message {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .message-flex {
    gap: 30px;
  }

  .message-text {
    padding-bottom: 40px;
  }
}

@media (max-width: 400px) {
  .message-flex {
    width: 88%;
  }
}

/* qa */
#qa {
  background-color: rgba(232, 230, 221, 1);
  padding-top: 124px;
  padding-bottom: 124px;
}

#qa .under-h2 {
  letter-spacing: 0.05em;
  margin-bottom: 60px;
}

/* アコーディオン */
.accordion-box {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.accordion-question {
  max-width: 100%;
  margin-bottom: 20px;
  background-color: #938a8a;
}

.accordion-question summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: clamp(16px, 4.26vw, 24px);
  font-weight: var(--font-weight-semi-bold);
  line-height: 150%;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.1em;
  padding: 20px 65px 22px 80px;
  color: #fff;
  padding-left: 5em;
}

.accordion-question summary::-webkit-details-marker {
  display: none;
}

.accordion-question summary::before {
  font-size: clamp(16px, 4.26vw, 24px);
  font-weight: var(--font-weight-semi-bold);
  position: absolute;
  content: "Q.";
  left: 2em;
  top: 24%;
}

.accordion-question summary::after {
  position: absolute;
  content: "+";
  font-size: 30px;
  top: 28%;
  right: 30px;
  transition: transform 0.3s;
}

.accordion-question[open] summary::after {
  transform: rotate(135deg) translateX(3px) translateY(-2px);
}

.accordion-question p {
  transform: translateY(-30px);
  opacity: 0;
  margin: 0;
  padding: 1em 1em 1em 5em;
  color: #000;
  text-align: left;
  position: relative;
  font-size: clamp(16px, 4.26vw, 18px);
  line-height: 210%;
  background-color: #f4f4f4;
}

.accordion-question p::before {
  position: absolute;
  left: 30px;
  top: 18px;
  content: "";
  width: 34px;
  height: 23px;
  background: url(../img/A..svg) center/contain;
  background-repeat: no-repeat;
}

.accordion-question[open] p {
  transform: none;
  opacity: 1;
}

@media (max-width: 875px) {
  #qa {
    padding: 62px 0;
  }

  .accordion-question summary {
    padding: 12px 65px 14px 3em;
  }

  .accordion-question summary::before {
    left: 1em;
  }

  .accordion-question summary::after {
    top: 29%;
  }

  .accordion-question p {
    padding: 1em;
  }

  #qa .under-h2 {
    margin-bottom: 30px;
  }
}

/* contact */
#contact {
  background-color: #fff;
}

#contact .container {
  padding: 45px 0 70px;
}

#contact .under-h2 {
  margin-bottom: 35px;
}

.contact-form {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.contact-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.contact-content dt {
  width: 180px;
}

.contact-content dt label {
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: var(--font-weight-semi-bold);
}

.contact-content dd input,
.contact-content textarea {
  background-color: #fff;
  border: 1px solid #938a8a;
  width: 520px;
  font-size: clamp(16px, 4.2vw, 18px);
  padding: 0.7em 1em 0.8em;
}

.contact-content dd input:placeholder-shown,
.contact-content textarea:placeholder-shown {
  background-color: #e8e6dd;
}

.contact-content dd input {
  margin-bottom: 25px;
}

.contact-content dd input:focus,
.contact-content textarea:focus {
  outline: none;
  background-color: #fff;
}

#contact .wpcf7-not-valid-tip,
#contact .wpcf7-spinner {
  display: none;
}

.submit input {
  text-align: center;
  font-size: clamp(16px, 4.2vw, 18px);
  font-weight: var(--font-weight-semi-bold);
  width: 180px;
  padding: 16px 0 18px;
  margin: 70px auto 0 auto;
  background-color: #e8e6dd;
  border: 1px solid #938a8a;
}

.submit p {
  text-align: center;
}

.submit input:hover {
  background-color: #938a8a;
  color: #e8e6dd;
}

@media (max-width: 800px) {
  .contact-content {
    flex-direction: column;
  }

  .contact-content dd input,
  .contact-content textarea {
    width: 100%;
  }

  #contact dd {
    width: 100%;
  }

  .contact-content dt p {
    margin-bottom: 10px;
  }

  .submit input {
    margin-top: 40px;
  }

  #contact .container {
    padding: 30px 0 40px;
  }

  #contact .under-h2 {
    margin-bottom: 20px;
  }
}

/* footer */
footer {
  background-color: #e8e6dd;
}

footer .container {
  padding: 75px 0 25px;
}

.footer-logo {
  width: 210px;
  margin: 0 auto 50px;
}

.footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 825px;
  margin: 0 auto 70px;
}

.footer-flex img {
  width: 300px;
}

@media (max-width: 760px) {
  footer .container {
    padding: 30px 0 15px;
  }

  .footer-logo {
    margin: 0 auto 40px;
  }

  .footer-flex {
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto 30px;
  }

  .footer-flex img {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 400px) {
  .footer-flex img {
    width: 230px;
  }
}

/* キャンペーン */
.campaign {
  width: 272px;
  box-shadow: 1px 2px 2px gray;
  text-align: center;
  background-color: #e8e6dd;
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 5%;
  border-radius: 10px;
  padding-bottom: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s;
}

.campaign-inner {
  background-color: #fff;
  padding: 14px;
  border-radius: 100%;
  position: relative;
  width: 265px;
  margin: 0 auto;
}

.campaign-close {
  font-size: 24px;
  font-weight: var(--font-weight-semi-bold);
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}

.campaign-circle {
  border: solid #938a8a 1.5px;
  border-radius: 100%;
  padding: 24px 0;
}

.accent {
  text-align: center;
  font-size: 15px;
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.05em;
  line-height: 150%;
  display: inline-block;
  width: 85px;
  margin: 0 auto;
  padding: 0 0 4px 0;
  border-radius: 20px;
  background-color: #938a8a;
  color: #fff;
}

.campaign-title {
  font-size: 15px;
  font-weight: var(--font-weight-semi-bold);
  line-height: 200%;
  font-family: var(--robot);
  margin-bottom: 6px;
  margin-top: 6px;
}

.campaign-detail {
  font-size: 12px;
  line-height: 150%;
  font-weight: var(--font-weight-medium);
  margin-bottom: 10px;
  display: inline-block;
  text-align: left;
  padding-left: 1em;
}

.campaign-circle a {
  text-align: center;
  font-size: 15px;
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.05em;
  line-height: 150%;
  display: inline-block;
  width: 70px;
  margin: 0 auto 10px;
  padding: 0 0 4px 0;
  border-radius: 20px;
  background-color: #938a8a;
  color: #fff;
  border: 1px solid #938a8a;
}

.campaign-circle a:hover {
  background-color: #fff;
  color: #938a8a;
}

.campaign-bottom {
  font-size: 12px;
  line-height: 150%;
  font-weight: var(--font-weight-medium);
}

.campaign-inner2 {
  margin-top: 24px;
}

.campaign-inner2 p {
  text-align: center;
  font-size: 12px;
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.05em;
  line-height: 200%;
}

.campaign.on-view {
  opacity: 1;
  visibility: visible;
  pointer-events: inherit;
}

@media (max-width: 1205px) {
  .campaign {
    left: 50%;
    bottom: inherit;
    top: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    right: inherit;
    width: 90%;
    max-width: 400px;
    padding: 24px 0;
    z-index: 1000;
  }

  .campaign-close {
    top: 0;
    right: 0;
  }
}

@media (max-width: 768px) {
  .campaign.on-view {
    box-shadow: 0px 4px 8px 4px rgba(147, 138, 138, 0.5);
  }
}