@charset "UTF-8";
/* ---- reset ----- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
html,
body,
main,
header,
section,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  color: #333;
}

article,
header,
footer,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

ol,
ul {
  list-style: none;
  list-style-type: none;
}

a {
  color: #333;
  display: block;
  text-decoration: none;
  transition: all ease 0.5s;
}

p {
  font-size: 0.875rem;
  line-height: 1.8;
}

button {
  transition: all ease 0.5s;
}

img {
  width: 100%;
  pointer-events: none;
}

main {
  display: block;
}

@media screen and (min-width: 1025px) {
  a:hover {
    opacity: 0.7;
  }
  p {
    font-size: 1rem;
  }
}
/* ---- reset end ----- */
main {
  min-height: 100vh;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.main {
  opacity: 0;
}
.main.is-shown {
  animation: fadein ease-in-out 2s forwards;
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: block; /* 常時表示でOK（透明） */
}

footer {
  position: relative;
  z-index: 2;
}

.pc {
  display: none;
}

[data-js-owl-fadein-effect] {
  opacity: 0;
  transform: translateY(50px);
}

[data-js-owl-fadein-effect].is-shown {
  animation: fadein-slide ease 0.7s forwards;
}

@media screen and (min-width: 1025px) {
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}
/* ----- keyframes ----- */
@keyframes top-slide {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout-canvas {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
  }
}
@keyframes fadeoutTop {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadein-slide {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadein-slideTop {
  0% {
    opacity: 0;
    transform: translateY(150px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes flowerPop {
  0% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(180deg);
    opacity: 1;
  }
}
@keyframes textFill {
  0% {
    opacity: 0;
    transform: translateX(100px) rotateY(-360deg);
  }
  80% {
    transform: translateX(0px) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotateY(0deg);
  }
}
@keyframes textFill-C {
  0% {
    opacity: 0;
    transform: translateX(50px) rotateY(-180deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotateY(0deg);
  }
}
/* ----- keyframes end ----- */
/* header */
.header {
  position: relative;
  z-index: 5;
  display: none;
}
.header.is-shown {
  display: block;
}
.headerTitle {
  width: 100%;
  padding: 0.625rem 0 0.625rem 0.75rem;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(5px);
}
.headerTitle.scrolled {
  animation: fadein ease 1s forwards;
  pointer-events: all;
}
.headerTitle h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.headerTitle a {
  max-width: 40%;
}
.headerTitle a img {
  width: auto;
  max-height: 3.125rem;
}
.headerTitle.is-open {
  display: none;
}
.headerLine {
  cursor: pointer;
  position: fixed;
  top: 1.25rem;
  right: 1rem;
  height: 1.5rem;
  width: 35px;
  z-index: 3;
}
.headerLine span {
  background: #333;
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  width: 100%;
  transition: all ease 0.5s;
}
.headerLine span:nth-child(2) {
  top: 50%;
}
.headerLine span:nth-child(3) {
  top: auto;
  bottom: 0;
}
.headerLine.is-open span:nth-child(1) {
  transform: translateY(12px) rotate(-225deg);
}
.headerLine.is-open span:nth-child(2) {
  opacity: 0;
}
.headerLine.is-open span:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
}
.headerMenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  display: none;
  opacity: 0;
  transition: all ease 0.5s;
}
.headerMenu.is-open {
  display: block;
  animation: fadein ease 0.5s forwards;
}
.headerMenuImg {
  padding: 20% 0 0;
  margin: 0 0 2.5rem;
  position: relative;
}
.headerMenuImg a {
  width: 65%;
  max-width: 350px;
  margin: 0 auto;
}
.headerMenuImg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5.625rem;
  height: 100px;
  background-image: url(../images/menu_flower1.png);
  background-repeat: no-repeat;
  background-position: top 10px left 10px;
  background-size: contain;
  z-index: -1;
}
.headerMenuImg::after {
  content: "";
  position: absolute;
  bottom: -11.25rem;
  right: 8px;
  width: 100%;
  height: 10rem;
  background-image: url(../images/menu_flower2.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  z-index: -1;
}
.headerMenuNav {
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 0 0 6.25rem;
  background-image: url(../images/menu_flower3.png);
  background-repeat: no-repeat;
  background-position: bottom 20px left;
  background-size: 45%;
}
.headerMenuNavList {
  padding: 0 0 6%;
}
.headerMenuNavList li {
  margin: 0 0 1.5rem;
}
.headerMenuNavList li a {
  padding: 0 0 0 15%;
  font-size: 7.3vw;
  font-family: "Cormorant Infant", serif;
  letter-spacing: 2px;
}

@media screen and (min-width: 600px) {
  .headerMenuImg::before {
    width: 50%;
    height: 7.5rem;
  }
  .headerMenuNavList li a {
    font-size: 2.3em;
  }
}
@media screen and (min-height: 900px) {
  .headerMenuImg {
    margin: 0 0 3.75rem;
  }
  .headerMenuNavList li a {
    font-size: 8vw;
  }
  .headerMenuImg {
    padding: 24% 0 0;
  }
  .headerMenuNav {
    padding: 0 0 7.5rem;
  }
}
@media screen and (min-width: 768px) {
  .headerMenu.is-open {
    background-image: url(../images/menu_flowerT.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
  }
  .headerMenuInner {
    height: 100%;
  }
  .headerMenuInner::after {
    display: none;
  }
  .headerMenuImg {
    padding: 9% 0 0;
  }
  .headerMenuImg a {
    margin: 0 0 0 15%;
  }
  .headerMenuImg::before, .headerMenuImg::after {
    display: none;
  }
  .headerMenuNav {
    background: none;
  }
  .headerMenuNavList {
    padding: 0 0 20%;
  }
  .headerMenuNavList li a {
    font-size: 2.375rem;
  }
}
@media screen and (orientation: landscape) and (max-height: 500px) {
  /* 横スマホ専用調整 */
  .headerMenuNavList {
    padding: 0;
  }
  .headerMenu.is-open {
    background-image: url(../images/menu_flowerT.png);
    background-repeat: no-repeat;
    background-position: bottom -130px right -30px;
    background-size: 60%;
  }
  .headerMenuNav {
    background-image: none;
  }
  .headerMenuImg {
    padding: 5% 0 0;
  }
  .headerMenuImg::before, .headerMenuImg::after {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .headerLine {
    height: 1.875rem;
    top: 1.75rem;
    right: 1.75rem;
    width: 3.75rem;
  }
  .headerLine span:nth-child(2) {
    display: none;
  }
  .headerLine span:nth-child(1) {
    top: 10px;
  }
  .headerLine span:nth-child(3) {
    bottom: 10px;
  }
  .headerLine:hover span:nth-child(1) {
    transform: translateY(3px);
  }
  .headerLine.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(-195deg);
  }
  .headerLine.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(15deg);
  }
  .headerTitle {
    padding: 1rem 0 0.625rem 1.25rem;
  }
  .headerTitle a {
    max-width: 180px;
  }
  .headerTitle a img {
    width: 100%;
    max-height: 100%;
  }
  .headerMenu.is-open {
    background-color: #fff;
    background-image: none;
  }
  .headerMenuInner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    transition: all ease 0.5s;
  }
  .headerMenuInner::after {
    display: none;
  }
  .headerMenuInner {
    background-image: url(../images/menu_flowerPC.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    height: 103vh;
  }
  .headerMenuImg {
    padding: 7% 0 0;
    width: 50%;
  }
  .headerMenuImg a {
    max-width: 100%;
    width: 53%;
    margin: 0 9% 0 auto;
  }
  .headerMenuImg::before {
    display: none;
  }
  .headerMenuImg::after {
    display: none;
  }
  .headerMenuNav {
    width: 50%;
    padding: 10% 0 0;
  }
  .headerMenuNavList {
    padding: 0;
  }
  .headerMenuNavList li {
    padding: 0 0 0 13%;
    margin: 0 0 6%;
  }
  .headerMenuNavList li a {
    font-size: 2.4em;
    font-weight: 400;
    display: inline-block;
    padding: 0;
  }
  .headerMenuNavList li a::before {
    content: "A";
    background-image: url(../images/flowerR.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 80%;
    color: transparent;
    padding: 0 1rem 0 0;
    opacity: 0;
  }
  .headerMenuNavList li a:hover {
    opacity: 1;
  }
  .headerMenuNavList li a:hover::before {
    animation: fadein ease 1s forwards;
  }
  .headerMenuNavList li:nth-child(even) a::before {
    background-image: url(../images/flowerP.png);
  }
}
@media screen and (min-width: 1800px) {
  .headerMenuNavList li {
    margin: 0 0 5%;
  }
  .headerMenuNavList li a {
    font-size: 3.1em;
  }
}
/* footer */
.footer {
  padding: 2.5rem 0;
  background-color: #fff7ef;
}
.footerInner {
  border: 1px solid #754c24;
  width: 94%;
  margin: 0 auto;
  padding: 4.375rem 0 1.875rem;
}
.footerDeco1::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 1%;
  height: 6.25rem;
  width: 6.25rem;
  background-image: url(../images/footer_f1.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
}
.footerDeco1::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 2%;
  height: 6.25rem;
  width: 6.25rem;
  background-image: url(../images/footer_f2.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}
.footerImg {
  width: 75%;
  max-width: 350px;
  margin: 0 auto 3.75rem;
  position: relative;
  right: 8px;
}
.footerNav {
  width: 90%;
  margin: 0 auto 6.25rem;
}
.footerNavList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.footerNavList li {
  width: 33.3333333333%;
  margin: 0 0 2.1875rem;
}
.footerNavList li a {
  font-family: "Noto Serif JP", serif;
  text-transform: uppercase;
  font-size: 0.9em;
  text-align: center;
  letter-spacing: 1.5px;
}
.footerNavList li:nth-child(9) {
  width: 32%;
  font-size: 0.9em;
}
.footerNavList li:last-child {
  width: 68%;
  font-size: 0.9em;
}
.footerCopy {
  font-family: "Noto Serif JP", serif;
  font-size: 0.8em;
  text-align: center;
}
.footerDeco2::before {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 2%;
  height: 4.6875rem;
  width: 6.25rem;
  background-image: url(../images/footer_f3.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
}
.footerDeco2::after {
  content: "";
  position: absolute;
  bottom: 8.125rem;
  right: 2%;
  height: 3.4375rem;
  width: 3.4375rem;
  background-image: url(../images/footer_f4.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}

@media screen and (min-width: 768px) {
  .footerDeco1::before {
    height: 9.375rem;
    width: 8.125rem;
  }
  .footerDeco1::after {
    height: 9.375rem;
    width: 6.875rem;
  }
  .footerDeco2::before {
    height: 5.625rem;
    width: 11.25rem;
  }
  .footerDeco2::after {
    height: 4.375rem;
    width: 6.875rem;
  }
}
@media screen and (min-width: 1025px) {
  .footerInner {
    padding: 5rem 0 1.6875rem;
  }
  .footerDeco1::before {
    top: 0;
    left: 0;
    height: 40%;
    width: 10%;
    background-image: url(../images/footer_f1_PC.png);
  }
  .footerDeco1::after {
    top: 0;
    right: 1%;
    height: 27%;
    width: 11%;
    background-image: url(../images/footer_f2_PC.png);
  }
  .footerImg {
    max-width: 380px;
    margin: 0 auto 5rem;
  }
  .footerNav {
    max-width: 780px;
    margin: 0 auto 9.375rem;
  }
  .footerNavList li {
    width: 16.6666666667%;
  }
  .footerNavList li a {
    font-size: 1.1em;
  }
  .footerNavList li:nth-child(9) {
    width: 20%;
  }
  .footerNavList li:nth-child(9) a {
    font-size: 1em;
  }
  .footerNavList li:nth-child(10) {
    width: auto;
  }
  .footerNavList li:nth-child(10) a {
    font-size: 1em;
  }
  .footerDeco2::before {
    left: 0;
    bottom: 0;
    height: 25%;
    width: 10%;
    background-image: url(../images/footer_f3_PC.png);
  }
  .footerDeco2::after {
    bottom: 0;
    right: 0;
    height: 26%;
    width: 12%;
    background-image: url(../images/footer_f4_PC.png);
  }
}
@media screen and (min-width: 1800px) {
  .footerNav {
    max-width: 890px;
  }
  .footerNavList li:nth-child(9) a {
    font-size: 1rem;
  }
  .footerNavList li:nth-child(10) a {
    font-size: 1rem;
  }
}
/* top */
.topBackground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../images/bg_SP.png);
  background-position: top center;
  background-size: 100%;
  background-repeat: repeat-y;
  z-index: 1;
}

.top {
  opacity: 0;
  position: relative;
}
.top.is-colored::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  animation: fadein ease 1s forwards;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 0) 100%);
}
.top .hero {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
}
.top .heroMain {
  width: 100%;
  margin: 0 0 16vh;
}
.top .heroImg {
  width: 75%;
  margin: 0 auto 1.25rem;
}
.top .heroText {
  font-family: "Noto Serif JP", serif;
  font-size: 0.9em;
  text-align: center;
  letter-spacing: 1px;
}
.top .scroll {
  position: absolute;
  bottom: 5vh;
  left: 0;
  width: 100%;
  font-size: 0.8em;
  letter-spacing: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.top .scroll p {
  width: 100%;
  text-align: center;
}
.top .scroll span {
  height: 10vh;
  width: 1px;
  background-color: #333;
  margin: 0.625rem auto 0;
  display: block;
  position: relative;
}
.top .scroll span::after {
  content: "";
  width: 1px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  animation: top-slide ease-in-out 1s infinite;
}
.topEffect {
  opacity: 0;
  transform: translateY(50px);
}
.topEffect.is-shown {
  animation: fadein-slide ease-out 1s forwards;
}
.top .section {
  margin: 7.5rem auto 0;
  padding: 0 1rem;
}
.top .section:last-child {
  margin: 9.375rem auto 0;
  padding: 0 0 9.375rem;
}
.top .sectionTitle {
  font-size: 3.75rem;
  font-family: "Cormorant Infant", serif;
  margin: 0 0 2.5rem;
  font-weight: 400;
  letter-spacing: 2px;
  perspective: 800px;
}
.top .sectionTitle span {
  display: inline-block;
  opacity: 0;
  transform: translateX(100px) rotateY(-360deg);
  transform-origin: center bottom;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: linear-gradient(120deg, #c9a73a, #f2d85c, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 0 5px;
}
.top .sectionTitle span.anim {
  animation: textFill ease 1.5s forwards;
}
.top .sectionTitle span.is-dark {
  background: none;
  -webkit-text-fill-color: #333;
  color: #333;
}
.top .sectionGroup {
  margin: 5rem 0 0;
}
.top .sectionGroupTitle {
  font-size: 2.5em;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  margin: 0 0 0.625rem;
  letter-spacing: 1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.top .sectionGroupTitle span {
  display: inline-block;
  display: inline-block; /* spanをtransformできるように */
  transform-origin: 50% 50%; /* 回転中心 */
  width: 2.875rem;
  height: 2.875rem;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;
}
.top .sectionGroupTitle .red {
  background-image: url(../images/flowerR.png);
  margin: 0 1.5625rem 0 0;
}
.top .sectionGroupTitle .red.is-shown {
  animation: flowerPop 0.9s ease-out forwards;
}
.top .sectionGroupTitle .pink {
  background-image: url(../images/flowerP.png);
  margin: 0 0 0 1.5625rem;
}
.top .sectionGroupTitle .pink.is-shown {
  animation: flowerPop 0.9s 0.5s ease-out forwards;
}
.top .sectionGroupText {
  text-align: center;
  margin: 0 0 3.125rem;
  font-size: 0.9em;
}
.top .aboutLargeText {
  font-size: 1.3em;
  font-family: "Noto Serif JP", serif;
  margin: 0 0 2.5rem;
}
.top .serviceTopInner {
  opacity: 0;
  transform: translateY(50px);
}
.top .serviceTopInner.is-shown {
  animation: fadein-slide ease 1s forwards;
}
.top .serviceTopText {
  text-align: center;
  margin: 3.125rem 0 0;
}
.top .serviceTop .linkBtn {
  margin: 0.875rem auto 0;
}
.top .serviceTopList {
  margin: 1.875rem auto 3.125rem;
}
.top .serviceTopList li {
  position: relative;
  text-align: center;
  margin: 0 0 1.875rem;
  background-image: url(../images/white_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 4.375rem 0;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
}
.top .serviceTopList li.is-shown {
  animation: fadein-slide ease 0.5s forwards;
}
.top .serviceTopList li p {
  text-align: center;
  font-size: 1.75rem;
  font-family: "Noto Serif JP", serif;
}
.top .serviceTopList li p span {
  display: block;
  font-size: 0.875rem;
  font-family: "Noto Sans JP", sans-serif;
}
.top .serviceTopList li::after {
  content: "";
  background-image: url(../images/top_websites.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 14%;
  left: 20%;
  width: 60%;
  height: 50%;
}
.top .serviceTopList li:nth-child(2).is-shown {
  animation-duration: 1s;
}
.top .serviceTopList li:nth-child(2)::after {
  content: "";
  background-image: url(../images/top_landlingpage.svg);
}
.top .serviceTopList li:nth-child(3).is-shown {
  animation-duration: 2s;
}
.top .serviceTopList li:nth-child(3)::after {
  content: "";
  background-image: url(../images/top_designwork.svg);
  top: 11%;
}
.top .serviceTopList li:nth-child(4).is-shown {
  animation-duration: 3s;
}
.top .serviceTopList li:nth-child(4)::after {
  content: "";
  background-image: url(../images/top_support.svg);
}
.top .flowList {
  width: 80%;
  margin: 0 auto;
}
.top .flowList li {
  margin: 0 0 1.625rem;
  position: relative;
  overflow: hidden;
}
.top .flowNum {
  font-size: 4.2em;
  font-family: "Cormorant Infant", serif;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  opacity: 0.4;
  letter-spacing: 1px;
  position: absolute;
  top: 12%;
  left: 40%;
}
.top .flowNum.is-out {
  animation: fadeoutTop ease 0.5s forwards;
}
.top .flowContent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  transform: translateY(150px);
  opacity: 0;
}
.top .flowContent.is-shown {
  animation: fadein-slide ease 1s forwards;
}
.top .flowContentNum {
  font-size: 2.5em;
  font-family: "Cormorant Infant", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 3px;
  width: 20%;
  line-height: 1;
  position: relative;
}
.top .flowContentNum::after {
  content: "";
  width: 80px;
  height: 1px;
  background: #333;
  position: absolute;
  top: 10px;
  left: -6px;
  transform-origin: bottom right;
  transform: rotate(-50deg);
}
.top .flowContentText {
  font-size: 1rem;
  width: 80%;
  padding: 2.1875rem 0 0 0.625rem;
  position: relative;
}
.top .flowContentText span {
  font-size: 3.75rem;
  font-family: "Cormorant Infant", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 6px;
  line-height: 1;
  opacity: 0.3;
  position: relative;
  top: -18px;
}
.top .worksList {
  margin: 3.125rem 0 0;
  padding: 0;
}
.top .worksList li {
  margin: 0 0 1.25rem;
}
.top .sampleList {
  font-family: "Noto Serif JP", serif;
  width: 94%;
  margin: 0 auto;
}
.top .sampleList h4 {
  font-size: 1.3em;
  border-bottom: 1px solid #333;
  font-weight: 500;
  padding: 0 0 0.625rem;
  line-height: 1;
}
.top .sampleList p {
  text-align: right;
  font-size: 1.3em;
  font-weight: 500;
  padding: 1rem 0 0;
  margin: 0 0 1.875rem;
  line-height: 1;
}
.top .journalList li:nth-child(n+4) {
  display: none;
}
.top .contactTitle {
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.25rem;
}
.top .contact p {
  text-align: center;
}
.top .contact .linkBtn {
  margin: 2.125rem auto 0;
}

@media screen and (min-width: 600px) {
  .top.is-colored::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 100%);
  }
  .top .heroMain {
    margin: 0 0 16vh;
  }
  .top .heroImg {
    max-width: 400px;
  }
  .top .section {
    max-width: 500px;
  }
}
@media screen and (min-width: 1025px) {
  .background {
    background-image: url(../images/bg_PC.png);
  }
  .top .heroMain {
    margin: 0 0 2vh;
  }
  .top .heroImg {
    width: 30%;
    max-width: 340px;
  }
  .top .heroText {
    font-size: 1.3em;
  }
  .top .scroll {
    bottom: 10px;
  }
  .top .section {
    max-width: 1000px;
    width: 75%;
    margin: 12.5rem auto 0;
    padding: 0;
  }
  .top .section:last-child {
    margin: 15.625rem auto 0;
    padding: 0 0 15.625rem;
  }
  .top .sectionTitle {
    font-size: 5.3125rem;
  }
  .top .sectionGroup {
    margin: 7.5rem 0 0;
  }
  .top .sectionGroupTitle {
    font-size: 3.8em;
  }
  .top .sectionGroupTitle span {
    width: 3.75rem;
    height: 3.75rem;
  }
  .top .sectionGroupTitle .red {
    margin: 0 3.4375rem 0 0;
  }
  .top .sectionGroupTitle .pink {
    margin: 0 0 0 3.4375rem;
  }
  .top .sectionGroupText {
    font-size: 1.1em;
  }
  .top .about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top .aboutLeft {
    width: 45%;
  }
  .top .aboutRight {
    width: auto;
    padding: 2.8125rem 0 0;
  }
  .top .aboutLargeText {
    font-size: 1.5rem;
    font-weight: 500;
  }
  .top .about .sectionText {
    line-height: 2.2;
  }
  .top .serviceTop .sectionTitle {
    margin: 0 0 1.25rem;
  }
  .top .serviceTopText {
    margin: 1.875rem 0 0;
  }
  .top .serviceTopList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top .serviceTopList li {
    width: 47%;
    padding: 5rem 0;
  }
  .top .serviceTop .center {
    text-align: center;
    font-size: 1.125rem;
  }
  .top .flowList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .top .flowList li {
    width: 50%;
    margin: 0 0 3.75rem;
  }
  .top .flowContentNum {
    font-size: 2.9em;
  }
  .top .flowContentText {
    font-size: 1.1em;
    width: 48%;
  }
  .top .flowContentText span {
    font-size: 4.4em;
  }
  .top .worksList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .top .worksList li {
    width: 48%;
  }
  .top .sampleList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top .sampleList li {
    width: 46%;
  }
  .top .sampleList li h4,
  .top .sampleList li p {
    font-size: 1.5em;
  }
  .top .sampleList li h4 {
    padding: 0 0 1rem;
  }
  .top .journalList li:nth-child(n+4) {
    display: block;
  }
}
@media screen and (min-width: 1800px) {
  .top .heroImg {
    max-width: 100%;
    width: 25%;
  }
  .top .sectionTitle {
    font-size: 6.25rem;
  }
  .top .aboutLargeText {
    font-size: 1.875rem;
  }
  .top .serviceTopList li p span {
    font-size: 1rem;
  }
}
/* low page common style */
.lowPage {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.3) 80%, rgba(255, 255, 255, 0) 100%);
}
.lowPageHeaderTitle h1 {
  text-transform: capitalize;
  text-align: center;
  font-size: 4rem;
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 9.375rem 0 0.75rem;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 90%;
}
.lowPageHeaderTitle p {
  text-align: center;
  font-size: 0.8125rem;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 1px;
  margin: -10px 0 0;
}
.lowPageHeaderText {
  padding: 0 1rem;
  margin: 3.125rem 0 0;
}
.lowPageSection {
  margin: 7.5rem auto 0;
}
.lowPageTitle h2 {
  font-size: 2.5em;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  letter-spacing: 1px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 76%;
}
.lowPageTitle p {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 2px;
}
.lowPage .nextPage {
  padding: 5rem 0;
  margin: 7.5rem auto 0;
  position: relative;
}
.lowPage .nextPage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/link_bg_SP.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.8;
  z-index: -1;
}
.lowPage .nextPage h2 {
  text-transform: capitalize;
  text-align: center;
  font-size: 3.125rem;
  font-family: "Cormorant Infant", serif;
  margin: 0 0 2.5rem;
  font-weight: 400;
  letter-spacing: 1px;
}
.lowPage .nextPage p {
  text-align: center;
}
.lowPage .nextPage .linkBtn {
  margin: 2.125rem auto 0;
}
.lowPage .nextPage .linkBtn a {
  font-size: 1.25rem;
}
.lowPage .contact {
  padding: 6.25rem 0 7.5rem;
}
.lowPage .contactTitle {
  text-align: center;
  font-size: 3.125rem;
  font-family: "Cormorant Infant", serif;
  margin: 0 0 1.875rem;
  font-weight: 400;
  perspective: 800px;
}
.lowPage .contactTitle span {
  display: inline-block;
  opacity: 0;
  transform: translateX(50px) rotateY(-180deg);
  transform-origin: center bottom;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: linear-gradient(120deg, #c9a73a, #f2d85c, #b8962e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0 0 0 3px;
}
.lowPage .contactTitle span.anim {
  animation: textFill-C ease 1.3s forwards;
}
.lowPage .contactTitle span.is-dark {
  background: none;
  -webkit-text-fill-color: #333;
  color: #333;
}
.lowPage .contactInner {
  opacity: 0;
  will-change: opacity;
}
.lowPage .contactInner.is-shown {
  animation: fadein ease 1s forwards;
}
.lowPage .contact p {
  text-align: center;
}
.lowPage .contact .linkBtn {
  margin: 2.125rem auto 0;
}
.lowPage .notesSection {
  max-width: 460px;
  margin: 0 auto;
  padding: 5rem 1rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.7);
}
.lowPage .notesImg {
  text-align: center;
}
.lowPage .notesImg img {
  width: 30%;
  margin: 0 auto;
}
.lowPage .notesTitle {
  margin: 1.875rem 0 1.5rem;
  font-size: 1.4375rem;
  font-family: "Noto Serif JP", serif;
  text-align: center;
}
.lowPage .notesList li {
  position: relative;
  margin: 0 0 0.625rem;
}
.lowPage .notesList li::before {
  content: "◼︎";
  position: absolute;
  top: 4px;
  left: 0;
}
.lowPage .notesList li p {
  width: 96%;
  margin: 0 0 0 auto;
}
.lowPage .notyet {
  width: 80%;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-size: 1.4375rem;
  letter-spacing: 2px;
  padding: 1.875rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

@media screen and (min-width: 550px) {
  .lowPageHeaderText {
    padding: 0;
    text-align: center;
    max-width: 550px;
    margin: 3.125rem auto 0;
  }
  .lowPageHeaderTitle {
    padding: 5rem 0 0;
  }
  .lowPageHeaderTitle h1 {
    background-size: contain;
    padding: 4.375rem 0 0.9375rem;
  }
  .lowPageHeaderTitle p {
    margin: -0.625rem 0 0;
  }
  .lowPageSection {
    max-width: 550px;
  }
  .lowPageTitle h2 {
    background-size: contain;
  }
  .lowPageTitle h2.client {
    padding: 3.125rem 0 0;
  }
}
@media screen and (min-width: 1025px) {
  .lowPage {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 100%);
  }
  .lowPageHeaderTitle {
    padding: 12vh 0 0;
  }
  .lowPageHeaderTitle h1 {
    font-size: 4.375rem;
    padding: 7.5rem 0 2.125rem;
  }
  .lowPageHeaderTitle p {
    font-size: 1.25rem;
    margin: -1.875rem 0 0;
  }
  .lowPageHeaderText {
    max-width: 100%;
  }
  .lowPageSection {
    max-width: 860px;
    margin: 9.375rem auto 0;
  }
  .lowPage .nextPage {
    padding: 6.25rem 0;
    margin: 9.375rem auto 0;
  }
  .lowPage .nextPage::before {
    background-image: url(../images/link_bg_PC.jpg);
  }
  .lowPage .nextPage h2 {
    font-size: 4.375rem;
    margin: 0 0 1.875rem;
  }
  .lowPage .nextPage .linkBtn a {
    font-size: 1.25rem;
  }
  .lowPage .contact {
    padding: 7.5rem 0 9.375rem;
  }
  .lowPage .contactTitle {
    font-size: 4.375rem;
    margin: 0 0 1.875rem;
  }
  .lowPage .contact .linkBtn a {
    font-size: 1rem;
  }
  .lowPage .notesSection {
    max-width: 870px;
    width: 75%;
    padding: 5rem 0 1.25rem;
  }
  .lowPage .notesImg {
    width: 100%;
    margin: 0 0 1.875rem;
  }
  .lowPage .notesImg img {
    max-width: 150px;
  }
  .lowPage .notyet {
    margin: 0 auto;
  }
}
@media screen and (min-width: 1800px) {
  .lowPageHeaderTitle h1 {
    font-size: 6.25rem;
  }
  .lowPage .nextPage h2 {
    font-size: 6.25rem;
  }
  .lowPage .nextPage .linkBtn a {
    font-size: 1.75rem;
  }
  .lowPage .contactTitle {
    font-size: 6.25rem;
  }
  .lowPage .contact .linkBtn a {
    font-size: 1.25rem;
  }
}
/* works page style */
.works .scroll {
  display: none;
}
.works .lowPageTitle h2.client {
  background-image: url(../images/client.svg);
  padding: 5rem 0 0;
  margin: 0 0 10px;
}
.works .lowPageTitle h2.sample {
  background-image: url(../images/sample.svg);
  padding: 5rem 0 1.25rem;
}
.worksList {
  margin: 4.375rem auto 0;
  padding: 0 1rem;
}
.worksListTitle {
  font-size: 1.1em;
  font-family: "Noto Serif JP", serif;
  line-height: 1;
  margin: 0 0 1rem;
}
.worksItem {
  margin: 0 0 1.875rem;
}
.worksItem article {
  height: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}
.worksItem article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  background-color: rgba(51, 51, 51, 0.3);
}
.worksItem article h4 {
  font-family: "Noto Serif JP", serif;
  font-size: 1.375rem;
  color: #fff;
  position: relative;
  z-index: 2;
  line-height: 1.5;
  text-align: center;
  padding: 0 1rem;
}
.worksItem article h4 img {
  width: 66%;
}

@media screen and (min-width: 1025px) {
  .works {
    position: relative;
  }
  .works .scroll {
    display: block;
    margin: 6.875rem auto 0;
    width: 100%;
    font-size: 0.8em;
    letter-spacing: 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .works .scroll p {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: #cdcdcd;
  }
  .works .scroll span {
    height: 8vh;
    width: 1px;
    background-color: #cdcdcd;
    margin: 0.625rem auto;
    display: block;
    position: relative;
  }
  .works .scroll span::after {
    content: "";
    width: 1px;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
    animation: top-slide ease-in-out 1s infinite;
  }
  .works .lowPageTitle h2 {
    font-size: 3.4375rem;
  }
  .works .lowPageTitle h2.client {
    padding: 3.75rem 0 0;
    margin: 0;
  }
  .works .lowPageSection {
    max-width: 1040px;
    width: 90%;
  }
  .worksInner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 4.375rem 0 0;
  }
  .worksList {
    width: 48%;
    margin: 0;
    padding: 0;
  }
  .worksList.anim {
    width: 100%;
    margin: 3.125rem 0 0;
  }
  .worksListTitle {
    font-size: 1.375rem;
    font-weight: 400;
  }
  .worksListInner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .worksListInner .worksItem {
    width: 48%;
  }
  .worksItem article {
    height: 200px;
  }
  .worksItem article h4 img {
    width: 80%;
  }
}
/* about page style */
.about .lowPageTitle {
  position: relative;
}
.about .lowPageTitle h2 {
  background-size: contain;
}
.about .lowPageTitle h2.greeting {
  background-image: url(../images/greeting.svg);
  padding: 3.75rem 0;
}
.about .lowPageTitle h2.background {
  background-image: url(../images/background.svg);
  padding: 3.125rem 0 1rem;
}
.about .lowPageTitle h2.skills {
  background-image: url(../images/skills.svg);
  padding: 3.375rem 0 0;
  margin: 0 0 10px;
}
.about .lowPageTitle .greetingText {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  letter-spacing: 5px;
}
.about .lineHeight2 {
  line-height: 2.2;
}
.aboutHeaderText {
  margin: 3.75rem 0 0;
  text-align: center;
  font-size: 1.4em;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}
.aboutSectionInner {
  margin: 2.5rem 0 0;
  padding: 0 1rem;
}
.about .skillsList {
  padding: 1rem;
  margin: 32px auto 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.about .skillsTitle {
  font-size: 1.25rem;
  font-family: "Noto Serif JP", serif;
  border-bottom: 1px solid #333;
  line-height: 2;
}
.about .skillsItemList {
  padding: 0 1rem;
}
.about .skillsItemList li {
  margin: 1.25rem 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.125rem;
}
.about .endText {
  text-align: center;
  padding: 6.25rem 0 0;
}

@media screen and (min-width: 1025px) {
  .aboutHeaderText {
    margin: 5rem 0 0;
    font-size: 1.7em;
  }
  .about .lowPageTitle h2.greeting {
    padding: 5rem 0 3.75rem;
  }
  .about .lowPageTitle h2.background {
    padding: 5rem 0 1rem;
  }
  .about .lowPageTitle h2.skills {
    padding: 5rem 0 0;
  }
  .aboutSectionInner p {
    text-align: center;
  }
}
/* service page style */
.service .lowPageHeaderTitle h1 {
  background-position: center bottom 19px;
  background-size: 99%;
}
.service .index {
  max-width: 460px;
  margin: 0 auto;
}
.service .indexTitle {
  margin: 4.375rem auto 0;
  text-align: center;
}
.service .indexTitle img {
  width: 15%;
  max-width: 150px;
}
.service .indexList {
  margin: 1.875rem auto 0;
  padding: 0 0 3.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  width: 90%;
}
.service .indexList li {
  width: 48%;
  border: 1px solid #b3b3b3;
}
.service .indexList li a {
  text-align: center;
  line-height: 1;
  border: 1px dotted #b3b3b3;
  padding: 0.75rem 0;
  font-size: 0.8125rem;
  width: 92%;
  margin: 6px auto;
  position: relative;
}
.service .indexList li a::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 47%;
  width: 14px;
  height: 10px;
  background-image: url(../images/j_arrow.svg);
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: all ease 0.5s;
}
.service .indexList li a:hover::after {
  bottom: -40px;
}
.service .indexList li:nth-child(1) {
  background: #fff3f8;
}
.service .indexList li:nth-child(2) {
  background: #f6fff5;
}
.service .indexText {
  text-align: center;
  font-size: 1rem;
}
.serviceSection {
  margin: 6.25rem auto 0;
  padding: 0 0 2.5rem;
  position: relative;
  max-width: 460px;
}
.serviceSection::after {
  content: "";
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  z-index: -2;
}
.serviceSection::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 74%;
  background-image: url(../images/service_img1.jpg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.serviceSection.num1 {
  padding: 6.25rem 0 2.5rem;
  margin: 0 auto;
}
.serviceSection.num1::before {
  height: 80%;
}
.serviceSection.num1::after {
  top: 6.25rem;
}
.serviceSection.num2::before {
  background-image: url(../images/service_img2.jpg);
}
.serviceSection.num3::before {
  background-image: url(../images/service_img3.jpg);
}
.serviceSection.num4::before {
  background-image: url(../images/service_img4.jpg);
}
.serviceSectionBg {
  border: 1.3px solid;
  border-image: linear-gradient(to bottom, #b3b3b3, #ffffff) 1;
  width: 96%;
  margin: 0 auto;
}
.serviceTitle {
  padding: 2rem 0 2.5rem;
  text-align: center;
  position: relative;
}
.serviceTitle span {
  background-image: url(../images/s_title_img1.svg);
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 7%;
  width: 50%;
  height: 56px;
}
.serviceTitle .titleNum {
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-style: italic;
  font-size: 1.625rem;
  position: relative;
}
.serviceTitle .titleNum::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 40%;
  height: 35%;
  width: 20%;
  z-index: -1;
  background-color: #fff7ef;
}
.serviceTitle .sub {
  background: linear-gradient(to left, #a60011 0%, #e6307c 25%, #e6307c 53%, #e7317d 78%, #eb6ea0 100%);
  color: #fff;
  display: inline-block;
  padding: 0 1rem;
  font-size: 0.8125rem;
  margin: 10px 0 1rem;
}
.serviceTitle .title {
  font-size: 1.875rem;
  font-family: "Noto Serif JP", serif;
}
.serviceText {
  height: 410px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serviceText::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(../images/service_whiteball.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.serviceText p {
  text-align: center;
  line-height: 2;
  font-weight: 500;
  padding: 0 0 2.5rem;
}
.service .num2 .serviceTitle .title {
  font-size: 1.5rem;
}
.service .num2 .serviceTitle .title span {
  background-image: url(../images/s_title_img2.svg);
  bottom: 9px;
  right: 2%;
  width: 50%;
  height: 42px;
}
.service .num3 .serviceTitle .title span {
  background-image: url(../images/s_title_img3.svg);
  right: 4%;
  height: 70px;
}
.service .num3 .serviceTitle .title span.small {
  background: none;
  position: static;
  font-size: 0.8em;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 0;
}
.service .num4 .serviceTitle .title span {
  background-image: url(../images/s_title_img4.svg);
  right: 5%;
  height: 67px;
}
.service .flowSection {
  padding: 6.25rem 0 0;
  max-width: 460px;
  margin: 0 auto;
}
.service .flowLargeTitle {
  padding: 4.375rem 0 0;
  background-image: url(../images/flow_title.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
.service .flowLargeTitle h2 {
  font-size: 3.125rem;
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
}
.service .flowLargeTitle p {
  text-align: center;
  margin: 0.625rem 0 0;
}
.service .flowList {
  margin: 3.75rem auto 0;
  padding: 0 1rem;
}
.service .flowItem {
  padding: 0 0 3.125rem 3.125rem;
  position: relative;
  background-color: rgba(255, 255, 255, 0.7);
}
.service .flowItem::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 1.25rem;
  width: 3px;
  height: 100%;
  background-color: #009245;
}
.service .flowItem::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-image: url(../images/flowerP.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.service .flowTitle {
  font-size: 1.25rem;
  padding: 5px 0 0;
}
.service .flowTitle span {
  font-size: 28px;
  font-family: "Cormorant Infant", serif;
  font-style: italic;
  padding: 0 6px 0 0;
  letter-spacing: 2px;
}
.service .flowText {
  margin: 0.75rem 0 0;
}
.service .flowEndText {
  margin: 2.5rem 0 0;
  padding: 0 1rem;
  line-height: 2;
}
.service .flowEndText a {
  display: inline;
  text-decoration: underline;
  color: #009245;
}

@media screen and (min-width: 768px) {
  .service .lowPageHeaderTitle h1 {
    background-size: contain;
    padding: 9% 0 0.9375rem;
    background-position: bottom center;
  }
}
@media screen and (min-width: 1025px) {
  .service .lowPageHeaderTitle h1 {
    font-size: 4.375rem;
    padding: 7.5rem 0 2.125rem;
  }
  .service .index {
    max-width: 510px;
  }
  .service .indexTitle img {
    max-width: 100px;
    width: 20%;
  }
  .service .indexList {
    width: 100%;
    padding: 0 0 4.375rem;
  }
  .service .indexList li {
    width: 45%;
  }
  .service .indexList li a {
    font-size: 1rem;
  }
  .serviceSection {
    max-width: 870px;
    width: 75%;
    padding: 0;
    margin: 0 auto;
  }
  .serviceSection::before, .serviceSection::after {
    display: none;
  }
  .serviceSection.num3, .serviceSection.num4 {
    max-width: 100%;
    width: 48%;
  }
  .serviceSectionBg {
    border: none;
    padding: 1.25rem;
    background: linear-gradient(to right, #fff3f8 0%, #f6fff5 100%);
  }
  .serviceTitle .titleNum {
    font-size: 2.4375rem;
  }
  .serviceTitle .titleNum::after {
    width: 34%;
  }
  .serviceTitle .sub {
    background: none;
    border-bottom: 1.5px solid;
    border-image: linear-gradient(to right, #bc0000, #ffffff) 1;
    color: #333;
    padding: 0;
    display: block;
    font-size: 1rem;
    margin: 5px 0 1rem;
  }
  .serviceTitle .title {
    position: relative;
  }
  .serviceTitle .title span {
    bottom: auto;
    top: 0;
  }
  .serviceText {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 340px;
  }
  .serviceText p {
    padding: 0;
    font-size: 0.875rem;
  }
  .service .num1 .serviceSectionBg,
  .service .num2 .serviceSectionBg {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .service .num1 .serviceTitle,
  .service .num1 .serviceText,
  .service .num2 .serviceTitle,
  .service .num2 .serviceText {
    width: 50%;
  }
  .service .num1 .serviceTitle,
  .service .num2 .serviceTitle {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: left;
  }
  .service .num1 .serviceTitleInner,
  .service .num2 .serviceTitleInner {
    width: 90%;
    padding: 0 0 4.375rem;
  }
  .service .num1 .titleNum,
  .service .num2 .titleNum {
    position: relative;
    z-index: 1;
    padding: 0 0 0 1.25rem;
    text-align: left;
  }
  .service .num1 .titleNum::after,
  .service .num2 .titleNum::after {
    left: 0;
    height: 30%;
    bottom: 11px;
  }
  .service .num1 .sub,
  .service .num2 .sub {
    text-align: left;
  }
  .service .num1 .serviceText,
  .service .num2 .serviceText {
    position: relative;
    z-index: 2;
  }
  .service .num1 .serviceText::before,
  .service .num2 .serviceText::before {
    bottom: 0;
    background-size: 110%;
  }
  .service .num1 {
    padding: 6.25rem 0 3.75rem;
  }
  .service .num1 .serviceTitle .title {
    letter-spacing: 2px;
  }
  .service .num1 .serviceTitle .title span {
    width: 43%;
  }
  .service .num1 .serviceText {
    background-image: url(../images/service_img1.jpg);
    background-position: bottom left;
  }
  .service .num1 .serviceText::after {
    content: "";
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #fff 0%, transparent 100%);
    z-index: -1;
  }
  .service .num2 {
    padding: 0 0 3.75rem;
  }
  .service .num2 .serviceSectionBg {
    flex-direction: row-reverse;
  }
  .service .num2 .serviceTitle .title {
    font-size: 1.4375rem;
  }
  .service .num2 .serviceTitle .title span {
    top: 10px;
    bottom: 0;
  }
  .service .num2 .serviceText {
    background-image: url(../images/service_img2.jpg);
    background-position: bottom right;
  }
  .service .num2 .serviceText::after {
    content: "";
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left, #fff 0%, transparent 100%);
    z-index: -1;
  }
  .service .num3,
  .service .num4 {
    margin: 0;
  }
  .service .num3 .serviceSectionBg,
  .service .num4 .serviceSectionBg {
    background: linear-gradient(to bottom, #fff3f8 0%, #f6fff5 100%);
    position: relative;
    height: 100%;
  }
  .service .num3 .serviceSectionBg::after,
  .service .num4 .serviceSectionBg::after {
    content: "";
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 90%;
    height: 100%;
    background-position: bottom -30px center;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .service .num3 .serviceSectionBg::before,
  .service .num4 .serviceSectionBg::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: #fff;
  }
  .service .num3 .serviceTitle,
  .service .num4 .serviceTitle {
    position: relative;
    z-index: 2;
  }
  .service .num3 .serviceTitle .sub,
  .service .num4 .serviceTitle .sub {
    border-image: linear-gradient(to right, #fff 0%, #bc0000 50%, #fff 100%) 1;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .service .num3 .serviceTitle .title,
  .service .num4 .serviceTitle .title {
    font-size: 1.6875rem;
  }
  .service .num3 .serviceText,
  .service .num4 .serviceText {
    position: relative;
    z-index: 2;
  }
  .service .num3 .serviceText::before,
  .service .num4 .serviceText::before {
    bottom: 0;
  }
  .service .num3 .serviceSectionBg::after {
    background-image: url(../images/service_img3.jpg);
  }
  .service .num3 .serviceTitle .title span {
    height: 56px;
    bottom: -40px;
    top: auto;
  }
  .service .num3 .serviceTitle .title span.small {
    font-size: 1.25rem;
  }
  .service .num4 .serviceSectionBg::after {
    background-image: url(../images/service_img4.jpg);
  }
  .service .num4 .serviceTitle {
    padding: 2rem 0 3.75rem;
  }
  .service .num4 .serviceTitle .title span {
    right: 3%;
    height: 50px;
    top: auto;
    bottom: -30px;
  }
  .service .sectionGroup {
    max-width: 870px;
    width: 75%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .service .notesSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5rem 0 1.25rem;
  }
  .service .notesPC, .service .notesInner {
    width: 48%;
  }
  .service .flowSection {
    max-width: 870px;
    width: 75%;
  }
  .service .flowList {
    padding: 0;
    margin: 6.25rem auto 0;
  }
  .service .flowItem {
    width: 50%;
    background: linear-gradient(to bottom, #fff7ef 0%, #f6fff5 100%);
    padding: 1.375rem;
    min-height: 180px;
  }
  .service .flowItem:nth-child(odd) {
    margin: 0 auto 0 0;
  }
  .service .flowItem:nth-child(odd)::before {
    left: auto;
    right: 0;
  }
  .service .flowItem:nth-child(odd)::after {
    top: -25px;
    left: auto;
    right: -25px;
    width: 50px;
    height: 50px;
  }
  .service .flowItem:nth-child(even) {
    margin: 0 0 0 auto;
  }
  .service .flowItem:nth-child(even)::before {
    left: 0;
  }
  .service .flowItem:nth-child(even)::after {
    margin: 0 0 0 auto;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
  }
  .service .flowTitle {
    font-size: 1.25rem;
  }
  .service .flowTitle span {
    font-size: 1.875rem;
  }
  .service .flowText {
    font-size: 0.875rem;
  }
  .service .flowEndText {
    margin: 5rem 0 0;
    text-align: center;
  }
}
/* price page style */
.priceContainer {
  max-width: 460px;
  margin: 0 auto 1.875rem;
}
.priceSection {
  margin: 5rem auto 0;
  padding: 0 1rem;
}
.priceSectionTitle {
  background-position: center top;
  background-repeat: no-repeat;
  padding: 2.5rem 0 0;
}
.priceSectionTitle h2 {
  font-size: 1.875rem;
  font-family: "Noto Serif JP", serif;
  text-align: center;
  letter-spacing: 2px;
}
.priceSectionTitle h2 span {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  margin: 10px 0 0;
}
.priceSectionTitle p {
  font-size: 1.5625rem;
  font-weight: 500;
  text-align: center;
  margin: 1.4375rem 0 1.875rem;
  letter-spacing: 1px;
}
.priceSectionTitle.web {
  background-image: url(../images/p_web.svg);
  background-size: 80%;
}
.priceSectionTitle.lp {
  background-image: url(../images/p_lp.svg);
  background-size: 90%;
}
.priceSectionTitle.lp h2 {
  font-size: 1.625rem;
}
.priceSectionTitle.design {
  background-image: url(../images/p_design.svg);
  background-size: 90%;
  padding: 2.5rem 0 1.25rem;
}
.priceSectionTitle.support {
  background-image: url(../images/p_support.svg);
  background-size: 80%;
  padding: 2.5rem 0 1.25rem;
}
.priceSectionContent {
  padding: 2.25rem 0;
  border-radius: 22px;
}
.priceSectionContent.pink {
  background-color: #fff3f8;
}
.priceSectionContent.pink .inner {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.priceSectionContent.green {
  background-color: #f6fff5;
}
.priceSectionContent.green .inner {
  border-top: 2px solid #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
}
.priceSectionContent .inner {
  width: 90%;
  margin: 0 auto;
  padding: 2.5rem 0 3.125rem;
}
.priceSectionContent h3,
.priceSectionContent h4 {
  font-family: "Cormorant Infant", serif;
  font-size: 1.25rem;
  text-align: center;
  background-color: #fff;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 1rem 0 0.75rem;
  position: relative;
  line-height: 1;
}
.priceSectionContent h3::before, .priceSectionContent h3::after,
.priceSectionContent h4::before,
.priceSectionContent h4::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
  background-size: 6px 6px;
  background-repeat: repeat-x;
}
.priceSectionContent h3::before,
.priceSectionContent h4::before {
  top: -1px;
}
.priceSectionContent h3::after,
.priceSectionContent h4::after {
  bottom: -1px;
}
.priceSectionContent p {
  margin: 2.5rem 0 0;
}
.priceSectionContent p span {
  color: #bc0000;
}
.priceSectionTable {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto 1.875rem;
}
.priceSectionTable dt,
.priceSectionTable dd {
  padding: 0.75rem 1rem;
  border: 1px solid #e6e6e6;
  font-weight: 600;
}
.priceSectionTable dt {
  width: 45%;
  text-align: center;
  background-color: #fff3f8;
  font-size: 1.25rem;
}
.priceSectionTable dd {
  width: 55%;
  background-color: #fff;
  font-size: 1.375rem;
}
.priceSectionPlan {
  margin: 3.75rem 0 2.5rem;
  text-align: center;
}
.priceSectionPlan h3 {
  font-size: 1.4375rem;
  padding: 0 0 0.625rem;
  position: relative;
  font-weight: 500;
  letter-spacing: 1px;
  z-index: 2;
}
.priceSectionPlan h3::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 5%;
  width: 20%;
  height: 50px;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100%;
  z-index: -1;
}
.priceSectionPlan h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 65%;
  background: #fff7ef;
  z-index: -1;
}
.priceSectionPlan h3.no1::before {
  background-image: url(../images/p_no1.svg);
}
.priceSectionPlan h3.no2::before {
  background-image: url(../images/p_no2.svg);
  left: 0;
}
.priceSectionPlan h3.no2::after {
  left: 6%;
  width: 88%;
}
.priceSectionPlan h3.no3::before {
  background-image: url(../images/p_no3.svg);
  left: 5%;
}
.priceSectionPlan h3.no3::after {
  left: 14%;
  width: 68%;
}
.priceSectionPlan p {
  font-size: 1.5625rem;
  font-weight: 500;
  letter-spacing: 1px;
}

@media screen and (min-width: 768px) {
  .priceContainer {
    margin: 0 auto 3.125rem;
  }
}
@media screen and (min-width: 1025px) {
  .priceContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    max-width: 950px;
    width: 90%;
  }
  .priceSection {
    width: 46%;
    box-shadow: 0 0 10px rgba(51, 51, 51, 0.1);
    background-color: #fff;
    padding: 3.125rem 1.25rem 2.5rem;
  }
  .priceSectionContent .inner.group1 {
    min-height: 660px;
  }
  .priceSectionContent .inner.group2, .priceSectionContent .inner.group3 {
    min-height: 530px;
  }
  .priceSectionPlan {
    margin: 3.75rem auto 1.125rem;
  }
  .price .notesList {
    max-width: 540px;
    margin: 0 auto;
  }
}
/* post page common style */
.postSection {
  margin: 5rem auto 0;
  padding: 0 1rem;
}
.postSection.single .newsTitle,
.postSection.single .blogTitle {
  padding: 0 0 1rem;
  border-bottom: 1px solid #333;
  line-height: 1.5;
}
.postSection.single .blogTitle {
  font-size: 1.125rem;
}
.postSection.single .postInner {
  padding: 1.25rem 0.625rem;
  background-color: rgba(255, 255, 255, 0.8);
}
.postSection.single .postInner a {
  display: inline;
  color: #009245;
  border-bottom: 1px solid #009245;
}
.postSection.single .postInner img {
  margin: 1.25rem 0;
  max-width: 500px;
}
.postSection.single .postInner .blogImg {
  height: 12.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  margin: 0 0 1.875rem;
}
.post.blog .blogImg {
  box-shadow: 0 0 10px #dadada;
}
.post.blog .blogCate {
  background-color: #f6fff5;
}

.news .lowPageHeaderTitle h1 {
  background-size: 75%;
}
.newsList li {
  margin: 0 0 1.25rem;
}
.newsList li a {
  padding: 0.625rem 0;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px dashed #999;
}
.newsTime {
  font-family: "Cormorant Infant", serif;
  font-size: 1.125rem;
}
.newsTitle {
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog .lowPageHeaderTitle h1 {
  background-size: 75%;
}
.blogList li {
  margin: 0 0 1.25rem;
}
.blogList li a {
  min-height: 6.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.blogImg {
  width: 25%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: #fff;
  box-shadow: 0 0 10px #fff;
}
.blogInner {
  width: 70%;
}
.blogTime {
  display: inline;
  font-size: 0.75rem;
  margin: 0 5px 0 0;
}
.blogCate {
  text-transform: uppercase;
  background-color: #fff;
  display: inline-block;
  padding: 5px;
  line-height: 1;
  font-size: 0.75rem;
  letter-spacing: 1px;
}
.blogTitle {
  font-size: 1rem;
  margin: 10px 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.journal .lowPageHeaderTitle h1 {
  background-size: 100%;
}
.journal .lowPageHeaderText {
  text-align: center;
  font-size: 3.4vw;
}
.journal .postSection {
  margin: 3.75rem auto 0;
}
.journalIndex {
  margin: 1.875rem auto 0;
  background-image: url(../images/j_index_SP.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 3.125rem 1rem;
  max-width: 550px;
}
.journalIndexList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.journalIndexList li {
  width: 48%;
  margin: 0 0 1.25rem;
}
.journalIndexList li a {
  padding: 0.625rem 0 1.375rem;
  font-size: 1.75rem;
  font-family: "Cormorant Infant", serif;
  text-align: center;
  letter-spacing: 1px;
  position: relative;
}
.journalIndexList li a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 46%;
  width: 1rem;
  height: 0.625rem;
  background-image: url(../images/j_arrow.svg);
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all ease 0.5s;
}
.journalIndexList li a.active::before {
  content: "花";
  background-image: url(../images/flowerR.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  margin: 0 5px 0 0;
}
.journalIndexList li a.yet {
  color: #777;
  pointer-events: none;
}
.journalList li {
  margin: 0 0 1.875rem;
}
.journalList li a {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0.8125rem 0.625rem;
  color: #fff;
  position: relative;
}
.journalList li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.15);
}
.journalInner {
  border: 2px solid #fff;
  padding: 1.875rem 0 2.5rem;
  position: relative;
}
.journalInner::before {
  content: "Read →";
  color: #fff;
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 1rem;
  font-family: "Cormorant Infant", serif;
  letter-spacing: 1px;
}
.journalCate {
  background-color: #fff;
  color: #333;
  display: inline-block;
  padding: 4px 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.75rem;
  line-height: 1;
}
.journalTime {
  text-align: center;
  width: 30%;
  margin: 0 auto 0.75rem;
  font-family: "Cormorant Infant", serif;
  border-bottom: 1px solid #fff;
  padding: 0 0 5px;
  font-size: 1.125rem;
  line-height: 1;
  text-shadow: 0 0 10px #333;
}
.journalTitle {
  font-family: "Noto Serif JP", serif;
  text-align: center;
  font-size: 1.3125rem;
  text-shadow: 0 0 10px #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navigation {
  margin: 6.25rem auto 0;
  width: 90%;
  max-width: 400px;
}
.navigation h2 {
  display: none;
}
.navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.navigation .nav-links .page-numbers {
  margin: 0 5px;
  font-family: "Noto Serif JP", serif;
  line-height: 1;
  border-bottom: 1px solid transparent;
  padding: 0 2px 2px 2px;
  font-size: 1rem;
}
.navigation .nav-links .prev {
  margin: 0 1.5rem 0 0;
}
.navigation .nav-links .next {
  margin: 0 0 0 1.5rem;
}
.navigation .nav-links .current {
  font-weight: 500;
  border-bottom: 1px solid #333;
}

@media screen and (min-width: 768px) {
  .postSection {
    max-width: 550px;
    padding: 0;
  }
  .postSection.single .postInner {
    padding: 1.875rem 1rem;
  }
  .postSection.single .blogTitle {
    font-size: 1.25rem;
  }
  .news .lowPageHeaderTitle h1 {
    background-size: contain;
  }
  .blog .lowPageHeaderTitle h1 {
    background-size: contain;
  }
  .journal .lowPageHeaderTitle h1 {
    background-size: contain;
  }
  .journal .lowPageHeaderText {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .postSection {
    max-width: 860px;
  }
  .newsTime {
    font-size: 1.25rem;
  }
  .newsTitle {
    font-size: 1.375rem;
  }
  .blogList {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
  }
  .blogList li {
    width: 48%;
  }
  .blogList li a {
    min-height: 120px;
  }
  .blogTime, .blogCate {
    font-size: 0.875rem;
  }
  .blogTitle {
    font-size: 1.1em;
  }
  .journal .postSection {
    max-width: 990px;
    width: 90%;
    margin: 1.875rem auto 0;
  }
  .journalIndex {
    max-width: 860px;
    background-image: url(../images/j_index_PC.png);
    padding: 5rem 0;
  }
  .journalIndexList {
    justify-content: center;
  }
  .journalIndexList li {
    width: 30%;
    margin: 0 0 2.375rem;
  }
  .journalIndexList li a {
    font-size: 1.875rem;
  }
  .journalIndexList li a:hover::after {
    bottom: 0;
  }
  .journalList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .journalList li {
    width: calc((100% - 40px) / 3);
    margin: 0 20px 1.875rem 0;
  }
  .journalList li:nth-child(3n) {
    margin: 0 0 1.875rem;
  }
  .journalTitle {
    font-size: 1.125rem;
  }
  .pagination .nav-links .page-numbers {
    font-size: 1.125rem;
    padding: 0 5px 5px 2px;
  }
}
/* terms page style */
.terms .lowPageHeaderTitle h1 {
  font-size: 11vw;
}
.termsContent {
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.7);
}
.termsContent section {
  margin: 3.125rem auto 0;
}
.termsContent h2 {
  font-weight: 500;
  margin: 0 0 1rem;
  font-size: 1rem;
  padding: 0 0 0.625rem;
  border-bottom: 1px dashed #ddd;
  line-height: 1;
}
.termsContent h3 {
  font-weight: 500;
  padding: 1.5rem 0 0.625rem;
  line-height: 1.5;
}
.termsContent a {
  display: inline;
  border-bottom: 1px solid #009245;
  color: #009245;
}
.termsMsg {
  margin: 3.125rem 0 0;
}

.policy .lowPageHeaderTitle h1 {
  padding: 6.875rem 0 3.125rem;
  font-size: 3.75rem;
}
.policy .lowPageHeaderTitle p {
  margin: -1.625rem 0 0;
}

.wpcf7 .wpcf7-submit:disabled {
  background-color: #eee;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-not-valid-tip {
  color: #bc0000;
  margin: 0.625rem 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border: 2px solid #bc0000;
}

.wpcf7 form .wpcf7-response-output {
  padding: 1.5rem 1rem;
  line-height: 1.5;
}

.wpcf7-select option {
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  .terms .lowPageHeaderTitle h1 {
    font-size: 4rem;
  }
  .termsContent {
    max-width: 860px;
    margin: 0 auto;
    width: 90%;
  }
}
@media screen and (min-width: 1025px) {
  .terms .lowPageHeaderTitle h1 {
    font-size: 4.375rem;
  }
  .termsContent {
    margin: 3.125rem auto 0;
    padding: 1.875rem 1.25rem;
  }
  .termsContent h2 {
    font-size: 1.25rem;
  }
  .termsContent h3 {
    font-size: 1.125rem;
  }
  .policy .lowPageHeaderTitle h1 {
    font-size: 4.375rem;
    padding: 7.5rem 0 2.125rem;
  }
}
/* others page style */
.othersSection {
  margin: 2.5rem auto 7.5rem;
  padding: 0 1rem;
}
.others .bgWhite {
  background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (min-width: 768px) {
  .othersSection {
    max-width: 550px;
    padding: 0;
  }
  .others .bgWhite {
    padding: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .othersSection {
    margin: 5rem auto 9.375rem;
    max-width: 780px;
    width: 52%;
  }
  .others .bgWhite {
    margin: 4rem auto 7.5rem;
  }
}
/* contact page style */
.contact .formItem {
  margin: 0 auto 1.875rem;
}
.contact .formLabel {
  display: block;
  margin: 0 0 0.875rem;
  font-family: "Noto Sans JP", sans-serif;
}
.contact .formLabel span {
  margin: 0 0 0 1rem;
}
.contact .formInput, .contact .formSelect, .contact .formTextarea {
  width: 100%;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  font-size: 1rem;
  border: 1px solid #ddd;
  color: #333;
  border-radius: 5px;
  background: #fff;
}
.contact .formSelect {
  cursor: pointer;
}
.contact .formTextarea {
  line-height: 1.5;
  height: 300px;
}
.contact .formCheckbox {
  display: flex;
  align-items: center;
}
.contact .formCheckbox input {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.contact .formCheckbox a {
  display: inline;
  color: #009245;
  text-decoration: underline;
  margin: 0 5px;
}
.contact .formPrivacy {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.contact .formTitle {
  font-size: 1.4375rem;
  font-family: "Noto Serif JP", serif;
  margin: 1.875rem 0 1.875rem;
  padding: 0 0 0.625rem;
  border-bottom: 1px solid #ddd;
  letter-spacing: 1px;
  line-height: 1;
}
.contact .formTitle:nth-child(n+1) {
  margin: 3.125rem 0 1.875rem;
}
.contact .formNumber {
  font-family: "Cormorant Infant", serif;
  font-size: 1.875rem;
  font-style: italic;
  padding: 0 0.625rem 0 0;
  letter-spacing: 1px;
}
.contact .formText {
  font-size: 0.8125rem;
  padding: 0 0 1rem;
  line-height: 1.5;
}
.contact .formText a {
  display: inline;
  border-bottom: 1px solid #009245;
  color: #009245;
}
.contact .required {
  color: #bc0000;
}
.contact .confirmForm .formLabel {
  margin: 0 0 0.625rem;
  padding: 0 0 5px;
  border-bottom: 1px solid #333;
}
.contact .formConfirm {
  padding: 0 0.625rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

@media screen and (min-width: 1025px) {
  .contact .formItem {
    margin: 0 auto 3.125rem;
  }
  .contact .formLabel {
    font-size: 1.125rem;
    font-weight: 500;
  }
  .contact .formLabel span {
    margin: 0 0 0 10px;
  }
  .contact .formLabel .required {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .contact .formTitle:nth-child(n+1) {
    margin: 4.375rem 0 2.5rem;
  }
  .contact .formText {
    font-size: 0.9375rem;
  }
  .confirm .lowPageHeaderText {
    text-align: center;
  }
}
/* request page style */
.request .lowPageHeaderTitle h1 {
  font-size: 17vw;
}
.request .formLabel {
  position: relative;
  padding: 5px 0 7px 16px;
  background-color: rgba(255, 255, 255, 0.7);
}
.request .formLabel::before {
  content: "";
  width: 3px;
  height: 100%;
  background-color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.request .confirmForm .formLabel {
  border-bottom: none;
  background-color: #fff7ef;
  padding: 5px 1rem;
  font-weight: normal;
}
.request .confirmForm .formConfirm {
  padding: 0 1rem;
  white-space: pre-wrap;
  line-height: 1.5;
}
.request .formCheckbox {
  width: 100%;
  margin: 0 0 1rem;
}
.request .formRadio .wpcf7-list-item {
  margin: 0 0 1rem 1em;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  .request .lowPageHeaderTitle h1 {
    font-size: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .request .lowPageHeaderTitle h1 {
    font-size: 4rem;
  }
}
@media screen and (min-width: 1025px) {
  .request .lowPageHeaderTitle h1 {
    font-size: 4.375rem;
  }
}
@media screen and (min-width: 1800px) {
  .request .lowPageHeaderTitle h1 {
    font-size: 6.25rem;
  }
}
/* common button style */
.linkBtn {
  width: 50%;
  max-width: 380px;
  margin: 3.75rem auto 0;
}
.linkBtn a,
.linkBtn button,
.linkBtn input[type=submit],
.linkBtn input[type=button] {
  border: 1px solid #333;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-size: 1.375rem;
  line-height: 1;
  position: relative;
  padding: 0.6875rem 0;
  background-color: #ffffff;
  overflow: hidden;
  display: block;
  color: #333;
  width: 100%;
  cursor: pointer;
}
.linkBtn a::after,
.linkBtn button::after,
.linkBtn input[type=submit]::after,
.linkBtn input[type=button]::after {
  content: "";
  background-image: url(../images/arrow.svg);
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  top: 38%;
  right: 8%;
}
.linkBtn a::before,
.linkBtn button::before,
.linkBtn input[type=submit]::before,
.linkBtn input[type=button]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(145deg, #ffffff 0%, #ffccea 25%, #f987cb 50%, #ffccea 75%, #ffffff 100%);
  background-size: 200% 200%;
  background-position: 100% 0%;
  transition: background-position 0.3s ease;
}
.linkBtn a:hover,
.linkBtn button:hover,
.linkBtn input[type=submit]:hover,
.linkBtn input[type=button]:hover {
  opacity: 1;
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: 5px 5px 10px rgba(51, 51, 51, 0.3);
}
.linkBtn a:hover::before,
.linkBtn button:hover::before,
.linkBtn input[type=submit]:hover::before,
.linkBtn input[type=button]:hover::before {
  background-position: 0% 100%;
}
.linkBtn input[type=submit],
.linkBtn input[type=button] {
  font-size: 1rem;
  font-family: "Noto Serif JP", serif;
  transition: all ease 0.5s;
}
.linkBtn input[type=submit]:hover,
.linkBtn input[type=button]:hover {
  background-color: #fff;
  border: 1px solid #f987cb;
  box-shadow: 5px 5px 10px rgba(51, 51, 51, 0.1);
}
.linkBtn button {
  font-size: 0.9em;
  font-family: "Noto Serif JP", serif;
  padding: 0.875rem 0;
  width: 100%;
  cursor: pointer;
}
.linkBtn.submitBtn {
  margin: 1.875rem auto 0;
}

.contact .linkBtn a {
  font-size: 0.875rem;
  font-family: "Noto Serif JP", serif;
  padding: 0.875rem 0;
}

.linkBtnLine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.linkBtnLine rect {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.linkBtn a:hover .linkBtnLine rect,
.linkBtn button:hover .linkBtnLine rect,
.linkBtn input[type=submit]:hover .linkBtnLine rect {
  stroke-dashoffset: 0;
}

@media screen and (min-width: 768px) {
  .linkBtn {
    max-width: 210px;
  }
}
@media screen and (min-width: 1025px) {
  .linkBtn {
    margin: 5rem auto 0;
  }
  .linkBtn button,
  .linkBtn input[type=submit] {
    font-size: 1rem;
  }
  .linkBtn a {
    font-size: 1.5rem;
  }
  .contact .linkBtn a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1800px) {
  .linkBtn {
    max-width: 250px;
  }
  .linkBtn button,
  .linkBtn input[type=submit],
  .linkBtn input[type=button] {
    font-size: 1.25rem;
  }
  .linkBtn a {
    font-size: 1.5625rem;
  }
  .contact .linkBtn a {
    font-size: 1.25rem;
  }
}/*# sourceMappingURL=style.css.map */