@charset "UTF-8";
/*==================================================
https://codepen.io/ugokuweb/pen/wvoQmNv

keyframesがiOS chromeで動かない
transitionで対応する
ransition-delayを入れないと正しく動作しない

タグにクラスを付与する
.fadeInTrigger
.fadeUpTrigger
.fadeDownTrigger
.fadeLeftTrigger
.fadeRightTrigger

//.flipDownTrigger
//.flipLeftTrigger
//.flipLeftTopTrigger
//.flipRightTrigger
//.flipRightTopTrigger
//.rotateXTrigger
//.rotateYTrigger
//.rotateLeftZTrigger
//.rotateRightZTrigger
//.zoomInTrigger
//.zoomOutTrigger
//.blurTrigger
//.smoothTrigger
//.bgappearTrigger
//.bgUDextendTrigger
//.bgDUextendTrigger
//.bgRLextendTrigger
//.bgLRextendTrigger
===================================*/
/* その場で */
.fadeInTrigger {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fadeIn {
  opacity: 1;
}

/* 下から */
.fadeUpTrigger {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s cubic-bezier(0.5, 1, 0.89, 1), transform 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fadeUp {
  opacity: 1;
  transform: translateY(0);
}

/* 上から */
.fadeDownTrigger {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 1s cubic-bezier(0.5, 1, 0.89, 1), transform 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fadeDown {
  opacity: 1;
  transform: translateY(0);
}

/* 左から */
.fadeLeftTrigger {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s cubic-bezier(0.5, 1, 0.89, 1), transform 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fadeLeft {
  opacity: 1;
  transform: translateX(0);
}

/* 右から */
.fadeRightTrigger {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1s cubic-bezier(0.5, 1, 0.89, 1), transform 1s cubic-bezier(0.5, 1, 0.89, 1);
  transition-delay: 0.25s;
}

.fadeRight {
  opacity: 1;
  transform: translateX(0);
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/*==================================================
パタッ
===================================*/
/* 下へ */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* 左へ */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 左上へ */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* 右へ */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 右上へ */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0;
}

/*==================================================
くるっ
===================================*/
/* X 軸（縦へ） */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/*　Y軸（横へ） */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* Z 軸（左へ） */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/*　Z 軸（右へ） */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/
/* 拡大 */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* 縮小 */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0;
}

/*==================================================
じわっ
===================================*/
/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0;
}

/*==================================================
にゅーん
===================================*/
/* 滑らかに変形して出現 */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative; /* 枠線が書かれる基点*/
  opacity: 0;
}

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333; /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333; /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime 0.5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 0.5s linear 0.5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime 0.5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 0.5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime 0.5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
/*背景色が伸びて出現（共通）*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*右から*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/*下から*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/*上から*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2; /*この数字を必要回数分に変更*/
}

.countinfinite {
  animation-iteration-count: infinite; /*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s;
}

.delay-time1 {
  animation-delay: 1s;
}

.delay-time15 {
  animation-delay: 1.5s;
}

.delay-time2 {
  animation-delay: 2s;
}

.delay-time25 {
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s;
}

.change-time1 {
  animation-duration: 1s;
}

.change-time15 {
  animation-duration: 1.5s;
}

.change-time2 {
  animation-duration: 2s;
}

.change-time25 {
  animation-duration: 2.5s;
}

:root {
  --night-color: #161724;
}

/**
 * base style
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  font-size: 62.5%;
  color: #444;
  scroll-behavior: smooth;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

body {
  width: 100%;
  min-height: 100vh;
  line-height: 1.8;
  margin: 0 auto;
  font-size: 1.9rem;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  position: relative;
  font-optical-sizing: auto;
  font-style: normal;
  color: #444;
  background: #181b2b url(../../images/lp/soundsleep/star.jpg) no-repeat center top;
  background-size: 100% auto;
}

h1,
h2,
h3,
h4,
h5,
h5,
h6 {
  font-family: "Noto Serif JP", serif;
  font-size: 100%;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

img,
picture {
  max-width: 100%;
  display: block;
  border: 0;
}

a {
  outline: none;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

li {
  list-style: none;
}

.flex {
  display: -o-flex;
  display: -moz-flex; /*--- Android4.3以前‰ ---*/
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table th,
table td {
  padding: 8px;
  text-align: left;
  word-break: break-all;
  border: 1px solid #ddd;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

form {
  width: 100%;
}

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
textarea {
  width: 100%;
  border: solid 1px #ccc;
  border-radius: 4px;
  font-size: 1.8rem;
  padding: 0.6rem;
  line-height: 1;
}

form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
textarea:focus {
  border: solid 1px #aaa;
}

textarea {
  resize: none;
}

/**
 * common style
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: #333;
}

.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-old-mincho-semibold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.zen-old-mincho-bold {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-old-mincho-black {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}

.shippori-mincho-b1-regular {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-b1-medium {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 500;
  font-style: normal;
}

.shippori-mincho-b1-semibold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 600;
  font-style: normal;
}

.shippori-mincho-b1-bold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-style: normal;
}

.shippori-mincho-b1-extrabold {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  font-style: normal;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.parallax-window {
  min-height: 400px;
  background: transparent;
  z-index: 200;
  position: relative;
}

.btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.btns .btn {
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: 2rem;
  position: relative;
  padding: 3rem 6rem 3rem 7.5rem;
  color: #fff;
  border-radius: 0;
  background-image: linear-gradient(115deg, #19b337 0%, #1f9736 25%, #11591f 90%, #07320f 100%);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.btns .btn span {
  position: relative;
}

.btns .btn:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition: all 0.3s;
  background-image: linear-gradient(115deg, #07320f 0%, #11591f 15%, #1f9736 70%, #19b337 100%);
}

.btns .btn:after {
  font-family: "Font Awesome 5 Free";
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - 0.8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: "\f30b";
  transition: all 0.3s;
}

.btns .btn:hover {
  color: #fff;
}

.btns .btn:hover:before {
  opacity: 0;
}

.btns .btn:hover:after {
  right: 0.5rem;
}

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #bbb 0%, #ddd 45%, #fff 70%, #ddd 85%, #bbb 90% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading img {
  width: 30%;
  animation: fadeInOut 1.5s infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
#loading.done {
  animation: done 0.8s forwards;
}

@keyframes done {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * LP
 */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5rem;
  padding-right: 5rem;
  overflow: hidden;
  border-radius: 4px;
  overflow: visible;
}

.center {
  text-align: center;
}

header {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  padding: 1.2rem 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
header a {
  width: 20rem;
  display: block;
  margin: 0 auto;
}

main {
  padding: 0;
}
main section {
  padding: 10rem 0;
  background-color: #fff;
}
main section h2 {
  color: #38428c;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 4.6rem;
  margin: 0 0 8rem;
  text-align: center;
}
main section h3 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 3rem;
  margin: 10rem 0 4rem;
  position: relative;
}
main section h3:first-letter {
  color: #38428c;
}
main section h3:after {
  content: "";
  display: block;
  height: 3px;
  margin: 0.6rem 0 0;
  background: linear-gradient(to right, rgba(56, 66, 140, 0.8), transparent);
}
main section .photo {
  margin: 0 0 3rem;
}
main section .photo img {
  width: 100%;
  height: auto;
  display: block;
}
main section .text p {
  margin: 0 0 0.2ex;
}
main section .text p.mb {
  margin-bottom: 2rem;
}
main section .text p b {
  font-size: 115%;
  font-weight: 700;
  background: linear-gradient(transparent 70%, rgba(255, 85, 144, 0.4) 80%);
}
main section .text .txt {
  width: 70%;
  margin: 0 auto 4rem;
}
main section .text .txt p {
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
}
main section .text ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2.4rem;
  margin: 4rem 0;
}
main section .text ul li {
  flex: 0 1 calc(50% - 1.2rem);
  min-width: 0;
  font-size: 85%;
  font-weight: 600;
  color: #333;
  padding: 1.5rem 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
main section .text ul li p {
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin-inline: auto;
}
main section .text .link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  font-size: 90%;
  color: #38428c;
  border: solid 2px #38428c;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
  margin: 3rem 0;
}
main section .text .link:hover {
  color: #fff;
  background-color: #2c2f6b;
}

footer {
  font-size: 90%;
  padding: 8rem 0 2rem;
  text-align: center;
  background-color: #f6f7ff;
}

#crmWebToEntityForm.zcwf_lblLeft .zcwf_col_fld {
  float: none !important;
}

#crmWebToEntityForm .zcwf_title {
  text-align: center;
  width: 100%;
  font-size: 150%;
  line-height: 1.7;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #aaa;
  padding-bottom: 8px;
  margin: 0 auto 4px;
  font-family: "Noto Serif JP", serif;
  font-weight: normal;
  max-width: 100% !important;
}

#crmWebToEntityForm .zcwf_row {
  width: 100%;
}

#crmWebToEntityForm .zcwf_row .zcwf_privacy {
  text-align: center;
}

#crmWebToEntityForm .zcwf_row .zcwf_privacy .zcwf_privacy_txt {
  width: auto;
  display: inline-block;
  font-family: "Noto Serif JP", serif !important;
}

#crmWebToEntityForm .zcwf_row .zcwf_privacy .zcwf_privacy_txt div {
  font-family: "Noto Serif JP", serif !important;
}

#crmWebToEntityForm .zcwf_row .zcwf_privacy .zcwf_privacy_txt font {
  font-family: "Noto Serif JP", serif !important;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_lab {
  width: 100%;
  margin: 30px 0 4px;
  padding: 0;
  font-family: "Noto Serif JP", serif !important;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld {
  width: auto;
  margin: 0;
  padding: 0;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld td {
  width: auto;
  border: none;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld select {
  width: auto !important;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld textarea {
  width: 100%;
  height: 200px;
  resize: none;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld [ftype=date] {
  width: 10em;
}

#crmWebToEntityForm .zcwf_row .zcwf_col_fld #Home_Phone,
#crmWebToEntityForm .zcwf_row .zcwf_col_fld #Mobile,
#crmWebToEntityForm .zcwf_row .zcwf_col_fld #CONTACTCF11 {
  width: 14em;
}

#crmWebToEntityForm .zcwf_row .zcwf_tooltip_ctn {
  font-size: small !important;
  z-index: 100;
  max-width: 250px;
}

#crmWebToEntityForm #formsubmit {
  width: 50%;
  padding: 14px 8px;
  max-width: none;
  margin: 0 auto 25px;
  display: block;
  color: #fff;
  font-weight: bold;
  background-color: #a76900;
  font-family: "Noto Serif JP", serif !important;
}

#crmWebToEntityForm #formsubmit:hover {
  opacity: 0.9;
}

#crmWebToEntityForm input[type=reset] {
  width: auto;
  display: block;
  max-width: none;
  margin: 0 auto;
  border: none;
  background: none;
  padding: 0;
  text-decoration: underline;
  font-size: 105%;
  font-family: "Noto Serif JP", serif !important;
}

/* soundsleep */
#lp.soundsleep #start {
  color: #fff;
  font-size: 160%;
  letter-spacing: 0.3em;
  width: 100%;
  height: 100vh;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
#lp.soundsleep #start.hide {
  opacity: 0;
  pointer-events: none;
}
#lp.soundsleep #contents {
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
#lp.soundsleep #contents.show {
  opacity: 1;
}
#lp.soundsleep #contents #kv {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  height: 80vh;
  min-height: 840px;
  position: relative;
  z-index: 2;
  font-family: "Noto Serif JP", serif;
  background: url(../../images/lp/soundsleep/kv.png) center top no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-end;
}
#lp.soundsleep #contents #kv .container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
#lp.soundsleep #contents #kv .container .text {
  margin: 0 0 -4rem;
  position: relative;
}
#lp.soundsleep #contents #kv .container .text img {
  position: absolute;
  top: -180px;
  right: 0;
  width: 16rem;
  height: auto;
}
#lp.soundsleep #contents #kv .container .text h1 {
  color: #fff;
  font-size: 195%;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
}
#lp.soundsleep #contents #kv .container .text p {
  color: #161724;
  margin: 1.4rem 0 0;
  padding: 0.4rem 0.8rem;
  text-align: center;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
}
#lp.soundsleep #contents main section.lead {
  background: none;
  color: #fff;
  margin: 30rem 0 0;
}
#lp.soundsleep #contents main section.lead h2 {
  color: #fff;
}
#lp.soundsleep #contents main section.lead a {
  color: #fff;
  text-decoration: underline;
}
#lp.soundsleep #contents main section.night {
  color: #fff;
  background-color: var(--night-color);
  position: relative;
}
#lp.soundsleep #contents main section.night::before {
  content: "";
  position: absolute;
  top: -10rem;
  left: 0;
  width: 100%;
  height: 10rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 23, 36, 0) 0%, rgba(22, 23, 36, 0.5) 60%, rgb(22, 23, 36) 100%);
  z-index: 1;
}
#lp.soundsleep #contents main section.night h2 {
  color: #fff;
}
#lp.soundsleep #contents main section.sound .speaker img {
  width: 50%;
  height: auto;
  margin: 0 auto;
}
#lp.soundsleep #contents main section.speaker {
  background-color: #f6f7ff;
}
#lp.soundsleep #contents main section.customer .text {
  width: 80%;
  margin: 0 auto;
  padding: 4rem 3rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background: #fefefe;
  font-size: 95%;
  color: #555;
}
#lp.soundsleep #contents main section.customer .text .paper {
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, #ccc 1px, transparent 1px);
  background-size: 8px 100%, 100% 2.5em;
  line-height: 2.5em;
  padding-bottom: 1px;
}
#lp.soundsleep #contents main section.customer .text .paper p span {
  display: block;
  text-align: right;
}
#lp.soundsleep #contents main section.experience .text .col2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: left;
  gap: 3rem;
}
#lp.soundsleep #contents main section.experience .text .col2 p {
  flex: 1 1 0;
  min-width: 0;
}
#lp.soundsleep #contents main section.experience .text .col2 img {
  max-width: 40%;
  height: auto;
  display: block;
}
#lp.soundsleep #contents main section.end {
  background-color: #f6f7ff;
}

@media (min-width: 1651px) {
  #lp.soundsleep #contents #kv {
    max-width: 100%;
    height: 100vh;
  }
}
@media (max-width: 1024px) {
  .container {
    width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  main section .text .txt {
    width: 80%;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 1.7rem;
  }
  .container {
    width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  header a {
    width: 16rem;
  }
  main section {
    padding: 7rem 0;
  }
  main section h2 {
    font-size: 2.8rem;
    margin: 0 0 6rem;
  }
  main section h3 {
    font-size: 2.4rem;
    margin: 6rem 0 3rem;
  }
  main section h3:after {
    content: "";
    display: block;
    height: 2px;
    margin: 0.6rem 0 0;
    background: linear-gradient(to right, rgba(56, 66, 140, 0.8), transparent);
  }
  main section .text .txt {
    width: 100%;
  }
  #lp.soundsleep #contents #kv {
    height: 65vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
  }
  #lp.soundsleep #contents #kv .container {
    justify-content: center;
  }
  #lp.soundsleep #contents #kv .container .text {
    margin: 0 0 -4rem;
    position: relative;
  }
  #lp.soundsleep #contents #kv .container .text img {
    position: absolute;
    top: -116px;
    right: 0;
    width: 12rem;
    height: auto;
  }
  #lp.soundsleep #contents #kv .container .text h1 {
    color: #fff;
    font-size: 170%;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-shadow: 0px 0px 4px rgb(0, 0, 0);
    text-align: center;
  }
  #lp.soundsleep #contents main section.lead {
    margin: 20rem 0 0;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 1.5rem;
  }
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  header a {
    width: 12rem;
  }
  main {
    padding: 0;
  }
  main section {
    padding: 5rem 0;
  }
  main section h2 {
    font-size: 2.1rem;
    margin: 0 0 4rem;
    text-align: left;
    line-height: 1.4;
    max-inline-size: -moz-max-content;
    max-inline-size: max-content;
    margin-inline: auto;
  }
  main section h3 {
    font-size: 1.8rem;
    margin: 5rem 0 2rem;
    line-height: 1.4;
  }
  main section h3:after {
    content: "";
    display: block;
    height: 2px;
    margin: 0.6rem 0 0;
    background: linear-gradient(to right, rgba(56, 66, 140, 0.8), transparent);
  }
  main section .text p.mb {
    margin-bottom: 1.6rem;
  }
  main section .text p b {
    font-size: 110%;
    font-weight: 700;
    background: linear-gradient(transparent 70%, rgba(255, 85, 144, 0.4) 80%);
  }
  main section .text .txt {
    width: 100%;
    margin: 0 auto 2rem;
  }
  main section .text .txt p {
    max-inline-size: none;
    margin-inline: auto;
  }
  main section .text ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2rem;
    margin: 4rem 0;
  }
  main section .text ul li {
    flex: 0 1 calc(50% - 1rem);
    padding: 1rem 1.2rem;
  }
  main section .text .link {
    padding: 1rem 1.4rem;
  }
  #lp.soundsleep #start {
    font-size: 150%;
  }
  #lp.soundsleep #contents #kv {
    height: 68vh;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
  }
  #lp.soundsleep #contents #kv .container {
    justify-content: center;
  }
  #lp.soundsleep #contents #kv .container .text {
    margin: 0 0 -10rem;
  }
  #lp.soundsleep #contents #kv .container .text img {
    top: -92px;
    width: 10rem;
  }
  #lp.soundsleep #contents #kv .container .text h1 {
    color: #fff;
    font-size: 130%;
  }
  #lp.soundsleep #contents #kv .container .text p {
    font-size: 90%;
  }
  #lp.soundsleep #contents main section.lead {
    margin: 20rem 0 0;
  }
  #lp.soundsleep #contents main section.customer .text {
    width: 100%;
    padding: 2.2rem 2rem;
    font-size: 85%;
  }
  #lp.soundsleep #contents main section.customer .text .paper {
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, #ccc 1px, transparent 1px);
    background-size: 8px 100%, 100% 2.7em;
    line-height: 2.7em;
    padding-bottom: 1px;
  }
  #lp.soundsleep #contents main section.customer .text .paper p span {
    display: block;
    text-align: right;
  }
  #lp.soundsleep #contents main section.experience .text .col2 {
    flex-direction: column-reverse;
    gap: 2rem;
  }
  #lp.soundsleep #contents main section.experience .text .col2 p {
    flex: 1 1 0;
    min-width: 0;
  }
  #lp.soundsleep #contents main section.experience .text .col2 img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}/*# sourceMappingURL=common.css.map */