@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Zen+Old+Mincho&display=swap');
*, *::before, *::after {
  box-sizing: border-box;
}

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

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

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

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

input, button, textarea, select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  position: relative;
  -webkit-overflow-scrolling: touch;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

img {
  width: 100%;
}

a {
  text-decoration: none;
}

body {
  color: #232f5b;
  font-family: "Zen Old Mincho", serif;
}

a {
  color: #232f5b;
}

.pc {
  display: block;
}
.tab{
  display: none;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 1600px){
  .tab{
    display: block;
  }
  .no-tab{
    display: none;
  }
  #scene05 .box02 .text-area{
    right: 11% !important;
  }
  #scene10 .position{
    text-align: right;
  }
  #scene10 .flex-box{
    max-width: 1600px;
  }
  #scene10 .flex-box .text-area{
    transform: translateX(50%);
    /* left: 63%; */
    right: 17% !important;
    z-index: 3;
  }
  #scene10 .price-area{
    margin-right: 0 !important;
  }
  #scene10 .box03 .link-area{
    left: -6% !important;
    transform: translateX(-50%);
  }
}
.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp ,.sp.no-tab{
    display: block;
  }
  .tab, .no-tab{
  display: none;
  }
}

.mask {
  display: block;
  width: 100%;
  height: 100%;
  background: #eae8dd;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
}

.flex-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .flex-box {
    flex-direction: column;
  }
}

/* アニメーション*/
.zoom-in01 {
  animation-name: zoom-in01;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
  opacity: 0;
}

@keyframes zoom-in01 {
  0% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.zoom-in02 {
  animation-name: zoom-in02;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
  opacity: 0;
}

@keyframes zoom-in02 {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fade {
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
  opacity: 0;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.fadein {
  opacity: 0;
}

.fadein.active {
  animation-name: fadein;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
  opacity: 0;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slide-up {
  opacity: 0;
}
.slide-up.active {
  animation-name: slide-up;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
}
@media (max-width: 768px) {
  .slide-up.active{
  animation-delay: 0s;
  }
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-left {
  opacity: 0;
}
.slide-left.active {
  animation-name: slide-left;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform;
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.img-wrap {
  overflow: hidden;
  position: relative;
}
.img-wrap:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.img-wrap.active:before {
  animation: img-wrap 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.6s;
  background: #fff;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.img-wrap.active:after {
  animation: img-wrap2 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1s;
  background: rgba(234, 232, 221, 0.6);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}
@keyframes img-wrap2 {
  100% {
    transform: translateX(100%);
  }
}
/* header*/
#header {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2560/1650;
  overflow: hidden;
}
@media (max-width: 768px) {
  #header {
    aspect-ratio: inherit;
  }
}
#header .photo-wrapper .photo01 {
  position: absolute;
  top: 8.9%;
  left: 19.25%;
  width: 60.546875%;
  animation-delay: 1.4s;
}
@media (max-width: 768px) {
  #header .photo-wrapper .photo01 {
    position: relative;
    top: 0;
    left: 0;
    width: 44.0625%;
    margin: 0 0 auto auto;
  }
}
#header .photo-wrapper .photo02 {
  position: absolute;
  top: 4.8%;
  left: 0;
  width: 6.171875%;
  animation-delay: 0.2s;
}
@media (max-width: 768px) {
  #header .photo-wrapper .photo02 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 17% auto 0;
  }
}
#header .photo-wrapper .photo03 {
  position: absolute;
  top: 48%;
  left: 0;
  width: 6.7578125%;
  animation-delay: 0.6s;
}
@media (max-width: 768px) {
  #header .photo-wrapper .photo03 {
    top: 16%;
    width: 15.15625%;
  }
}
#header .photo-wrapper .photo04 {
  position: absolute;
  bottom: 0;
  left: 6%;
  width: 18.671875%;
  animation-delay: 0.5s;
}
@media (max-width: 768px) {
  #header .photo-wrapper .photo04 {
    width: 34.0625%;
  }
}
#header .photo-wrapper .photo05 {
  position: absolute;
  top: 0;
  right: 0;
  width: 28.828125%;
  animation-delay: 0.8s;
}
@media (max-width: 768px) {
  #header .photo-wrapper .photo05 {
    top: 18%;
    right: 8%;
    width: 14.21875%;
  }
}
#header .photo-wrapper .photo06 {
  position: absolute;
  top: 33.2%;
  right: 5.4%;
  width: 8.75%;
  animation-delay: 1s;
}
#header .photo-wrapper .photo07 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 17.34375%;
  animation-delay: 0.4s;
}
#header .photo-wrapper .mask {
  height: calc(100% + 100px);
}
#header .title01 {
  position: absolute;
  top: 14.8%;
  left: 7%;
  width: 29.8046875%;
  animation-delay: 1.2s;
}
@media (max-width: 768px) {
  #header .title01 {
    top: 5%;
    width: 56.953125%;
  }
}
#header .title02 {
  position: absolute;
  bottom: 7%;
  right: 12.25%;
  width: 28.742188%;
}
@media (max-width: 768px) {
  #header .title02 {
    position: relative;
    bottom: 0;
    right: 0;
    width: 54.21875%;
    margin: 1% 2% 0 auto;
  }
}
#header .title03 {
  position: absolute;
  top: 52.5%;
  left: 10.5%;
  width: 0.8%;
}
@media (max-width: 768px) {
  #header .title03 {
    position: relative;
    top: 0;
    left: 0;
    width: 24.296875%;
    margin: 2% 6% 3% auto;
  }
}
@media (max-width: 768px) {
  #header .photo06 {
    width: 14.609375%;
    margin: 0 6% 0 auto;
  }
}

/* leade*/
.lead-span {
  display: block;
  height: 100px;
  width: 100%;
  background: #eae8dd;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  .lead-span {
    height: 7rem;
  }
}

.lead {
  position: relative;
  padding-bottom: 12.5rem;
  text-align: center;
  background: #eae8dd;
  mix-blend-mode: multiply;
}
.lead .lead01, .lead .lead02, .lead .lead03 {
  width: 59.765625%;
  min-width: 700px;
  margin: auto;
}
@media (max-width: 768px) {
  .lead .lead01, .lead .lead02, .lead .lead03 {
    width: 85.9375%;
    min-width: inherit;
    padding-bottom: 6.25rem;
  }
}
.lead .lead01 {
  animation-delay: 0s;
}
.lead .lead02 {
  position: absolute;
  top: -1%;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  animation-delay: 0.6s;
}
.lead .lead03 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.2s;
}
.lead .text-wrapper {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .lead .text-wrapper {
    width: 96%;
  }
}
.lead .text-wrapper .inner {
  animation-delay: 1.8s;
}
.lead .text-wrapper .inner .title {
  width: 44%;
  margin: auto;
}
@media (max-width: 768px) {
  .lead .text-wrapper .inner .title {
    width: 50.3125%;
    margin-top: -19%;
  }
}
.lead .text-wrapper .inner .text {
  margin-top: 1.625rem;
  font-size: clamp(15px, 1.2vw, 22px);
  letter-spacing: 1px;
  line-height: 2.2;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .lead .text-wrapper .inner .text {
    margin-top: 0%;
  }
}
.lead .text-wrapper .inner .text-bold {
  margin-top: 1rem;
  font-size: clamp(17px, 2.3vw, 28px);
  letter-spacing: 1px;
  line-height: 1.8;
}
@media (max-width: 768px) {
  .lead .text-wrapper .inner .text-bold {
    margin-top: 0;
    letter-spacing: 0.01rem;
  }
}
.lead .line{
  display: block;
  width: 1px;
  height: 14rem;
  background: #000;
  position: absolute;
  bottom: 4vw;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.8s;
}
@media (max-width: 768px) {
  .lead .line{
    bottom: 40px;
    height: 120px;
    animation-delay: 1s;
  }
}
/* item共通*/
.item-wrapper {
  padding-top: 1.25rem;
  background-color: #eae8dd;
}
.item-wrapper .item-box {
  padding-bottom: 200px;
}
@media (max-width: 768px) {
  .item-wrapper .item-box {
    padding-bottom: 20%;
  }
}
.item-wrapper .number {
  width: auto;
  height: clamp(100px, 10vw, 300px);
}
.item-wrapper .talk-box {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
}
@media (max-width: 768px) {
  .item-wrapper .talk-box {
    margin-bottom: 6%;
  }
}
.item-wrapper .talk-box .icon {
  width: max(60px, 4.75vw);
  height: auto;
  margin: 0 1.25rem;
}
@media (max-width: 768px) {
  .item-wrapper .talk-box .icon {
    width: 16vw;
    margin: 0 2%;
  }
}
.item-wrapper .talk-box .text {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 2;
  letter-spacing: 0.2rem;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .item-wrapper .talk-box .text {
    letter-spacing: 0.08rem;
  }
}
.item-wrapper .talk-box-l {
  justify-content: flex-start;
}
.item-wrapper .talk-box-r {
  justify-content: flex-end;
  text-align: right;
}
.item-wrapper .popup-area {
  position: relative;
  overflow: hidden;
}
.item-wrapper .plus-mark-r {
  position: absolute;
  bottom: 2%;
  right: 3%;
  width: 2.2vw;
}
@media (max-width: 768px) {
  .item-wrapper .plus-mark-r {
    width: 9vw;
  }
}
.item-wrapper .plus-mark-l {
  position: absolute;
  bottom: 2%;
  left: 3%;
  width: 2.2vw;
}
@media (max-width: 768px) {
  .item-wrapper .plus-mark-l {
    width: 9vw;
  }
}
.item-wrapper .bgi {
  mix-blend-mode: multiply;
}

/* リンク*/
.link-area {
  width: 23.125rem;
  margin-top: 0.625rem;
  font-family: "Yu Mincho", "游明朝", "YuMincho", "游明朝体", serif;
  font-size: 0.9375rem;
  text-align: left;
}
@media (max-width: 768px) {
  .link-area {
    width: 88% !important;
    margin: 3% auto 6%;
  }
}
.link-area a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.6s ease-in-out;
}
.link-area a:not(:last-child) {
  margin-bottom: 0.25em;
}
.link-area a:hover{
  opacity: 0.6;
}
.link-area a .item {
  width: 62%;
  text-align: left;
  font-size: 0.875rem;
}
@media (max-width: 768px) {
  .link-area a .item {
    width: 54%;
  }
}
.link-area a .price {
  width: 26%;
  text-align: right;
}
@media (max-width: 768px) {
  .link-area a .price {
    width: 42%;
  }
}
.link-area a .price span {
  display: inline-block;
  margin: 0 3%;
  font-size: 0.625rem;
}
.link-area a .detail {
  padding: 0.25em 0.5em;
  border: 1px solid #232f5b;
  text-align: center;
  font-size: 0.625rem;
  font-family: Arial, Helvetica, sans-serif;
}
.link-area .title {
  margin-top: 1em;
}
.link-area .comingsoon{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #232f5b;
  font-size: 0.875rem;
}
.link-area .comingsoon .detail{
  padding: 0.25em 0.5em;
  text-align: right;
  font-size: 0.725rem;
  font-family: Arial, Helvetica, sans-serif;
}

/* ポップアップ */
.remodal {
  width: 100% !important;
  max-width: inherit !important;
  height: 98% !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  .remodal {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .remodal-wrapper {
    padding: 0 !important;
  }
}

.remodal-overlay {
  background: #eae8dd !important;
}

.remodal .flex-box {
  justify-content: center;
  align-items: flex-end;
  width: 86%;
}
@media (max-width: 768px) {
  .remodal .flex-box {
    width: 100%;
  }
}

.remodal .flex-box-reverse {
  margin: 0 0 0 auto;
}

.remodal .photo-area {
  display: block;
  width: 56%;
  height: 90vh;
  margin: auto;
}
@media (max-width: 768px) {
  .remodal .photo-area {
    padding-top: 20%;
    width: 100%;
    /* height: max-content; */
  }
}

.remodal .photo-area img {
  height: 100%;
  width: auto;
  margin: 0 0 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.remodal .flex-box-reverse .photo-area img {
  margin: 0 auto 0 0;
}

.remodal .text-area {
  width: 34%;
}
@media (max-width: 768px) {
  .remodal .text-area {
    width: 100%;
    padding-bottom: 5vh;
  }
}

.remodal .text-area .mainitem-area {
  margin-bottom: 0.5em;
}

.remodal .remodal-close {
  position: absolute;
  top: 3%;
  right: 2%;
  left: inherit;
  width: 30px;
  cursor: pointer;
  z-index: 1;
}

.remodal-close:before {
  display: none !important;
}

/*scene01*/
#scene01 {
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  #scene01 .box01 {
    flex-direction: column-reverse;
  }
}
#scene01 .box01 .left-box {
  position: relative;
  padding-top: 3%;
  width: 36.9140625%;
  z-index: 1;
}
@media (max-width: 768px) {
  #scene01 .box01 .left-box {
    width: 100%;
  }
}
#scene01 .box01 .right-box {
  width: 39.453125%;
  min-width:  380px;
  margin-left: -3%;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box {
    width: 100%;
    margin: auto;
    min-width: auto;
  }
}
#scene01 .box01 .right-box .number {
  margin: 0 0 6.25rem auto;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box .number {
    margin: 0 6% 12% auto;
  }
}
#scene01 .box01 .right-box .talk-box {
  position: relative;
  width: 97.0297029703%;
  z-index: 2;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box .talk-box {
    width: 96%;
    margin: 0 auto 6%;
  }
}
#scene01 .box01 .right-box .talk-box:nth-of-type(1) {
  margin-left: -5%;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box .talk-box:nth-of-type(1) {
    margin-left: 0;
  }
}
#scene01 .box01 .right-box .talk-box:nth-of-type(3) {
  margin-left: 20%;
  margin-bottom: 6.25rem;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box .talk-box:nth-of-type(3) {
    margin-left: 0;
    margin-bottom: 3%;
  }
}
#scene01 .box01 .right-box .popup-area {
  width: 93.5643564356%;
}
@media (max-width: 768px) {
  #scene01 .box01 .right-box .popup-area {
    width: 100%;
  }
}
#scene01 .bg01 {
  width: 38.59375%;
  padding-top: 2%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene01 .bg01 {
    width: 77%;
  }
}
#scene01 .box02 {
  position: relative;
  justify-content: flex-end;
  z-index: 2;
}
#scene01 .box02 .left-box {
  width: 39.0625%;
  margin-top: 10%;
  min-width: 420px;
}
@media (max-width: 768px) {
  #scene01 .box02 .left-box {
    width: 100%;
    min-width: auto;
  }
}
#scene01 .box02 .left-box .talk-box:nth-of-type(3) {
  margin-right: 10%;
}
@media (max-width: 768px) {
  #scene01 .box02 .left-box .talk-box:nth-of-type(3) {
    margin-right: auto;
  }
}
#scene01 .box02 .right-box {
  width: 44.0625%;
  margin-top: -1%;
}
@media (max-width: 768px) {
  #scene01 .box02 .right-box {
    width: 88%;
    margin: 0 0 0 auto;
  }
}
#scene01 .box03 {
  align-items: flex-end;
  margin-top: -6%;
}
@media (max-width: 768px) {
  #scene01 .box03 {
    width: 100%;
    margin-top: 3%;
  }
}
#scene01 .box03 .left-box {
  width: 36.5625%;
  margin-left: 5%;
}
@media (max-width: 768px) {
  #scene01 .box03 .left-box {
    width: 73%;
    margin: 0 auto 0 0;
  }
}
#scene01 .box03 .right-box {
  margin-left: 2%;
}
@media (max-width: 768px) {
  #scene01 .box03 .right-box {
    width: 100%;
    margin: 0 auto;
  }
}
#scene01 .bg02 {
  width: 28.3203125%;
  margin-left: 12%;
  padding-top: 8%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene01 .bg02 {
    width: 49%;
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  #scene01 .box04 {
    margin-top: -30%;
  }
}
#scene01 .box04 .talk-box-r {
  margin: -12% 14% 1% auto;
}
@media (max-width: 768px) {
  #scene01 .box04 .talk-box-r {
    margin: 0 auto 8%;
  }
}
#scene01 .box04 .photo {
  position: relative;
  width: 40.78125%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene01 .box04 .photo {
    width: 81%;
  }
}
#scene01 .box04 .photo span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene01 .box04 .photo img {
  position: relative;
  z-index: 4;
}
#scene01 .box04 .talk-box-l {
  margin: 3% auto 1% 24%;
}
@media (max-width: 768px) {
  #scene01 .box04 .talk-box-l {
    margin: 4% auto 0 0;
  }
}

/*scene02*/

#scene02 .number {
  margin: 0 auto 0 12%;
}
@media (max-width: 768px) {
  #scene02 .number {
    margin-left: 6%;
  }
}
#scene02 .bg01 {
  position: relative;
  width: 25.859375%;
  margin: -2% auto 0 10%;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene02 .bg01 {
    width: 51%;
    margin-left: 0;
  }
}
#scene02 .talk-box-r {
  margin: -4% 11% 2% auto;
}
@media (max-width: 768px) {
  #scene02 .talk-box-r {
    margin: 6% auto;
  }
}
#scene02 .popup-area01 {
  width: 61.015625%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene02 .popup-area01 {
    width: 100%;
  }
}
#scene02 .talk-box-l {
  margin: 3% auto 0 14%;
}
@media (max-width: 768px) {
  #scene02 .talk-box-l {
    margin: 3% auto;
  }
}
#scene02 .bg02 {
  position: relative;
  width: 32.65625%;
  margin: -6% 0 0 auto;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene02 .bg02 {
    width: 65%;
    margin-top: 0;
  }
}
#scene02 .popup-area02 {
  position: relative;
  width: 46.953125%;
  margin: -12% auto 0;
}
@media (max-width: 768px) {
  #scene02 .popup-area02 {
    width: 94%;
    margin-left: 0;
  }
}
#scene02 .popup-area02 span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene02 .popup-area02 .popup {
  position: relative;
  z-index: 4;
}
#scene02 .box01 {
  margin: 0 auto 0 26.5%;
}
@media (max-width: 768px) {
  #scene02 .box01 {
    margin: 0 auto;
  }
}

/*scene03*/
#scene03{
  position: relative;
}
#scene03 .number {
  margin: 13% 20% 0 auto;
}
@media (max-width: 768px) {
  #scene03 .number {
    margin-right: 10%;
    margin-top: 34%;
  }
}
#scene03 .bg01 {
  position: absolute;
  width: 33.4375%;
  margin: -12% auto 0 14%;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene03 .bg01 {
    width: 67%;
    margin: -34% auto 0 6%;
  }
}
#scene03 .talk-area01 .talk-box-l {
  margin: 4% auto 0 22%;
}
@media (max-width: 768px) {
  #scene03 .talk-area01 .talk-box-l {
    margin: 6% auto 6% 0;
  }
}
#scene03 .talk-area01 .talk-box-r {
  margin: 0 22% 3% auto;
}
@media (max-width: 768px) {
  #scene03 .talk-area01 .talk-box-r {
    margin: 6% 0 6% auto;
  }
}
#scene03 .popup-area {
  width: 39.0234375%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene03 .popup-area {
    width: 86%;
  }
}
#scene03 .link-area.flex-box {
  justify-content: space-between;
  width: 39.0234375%;
  min-width: 760px;
  margin: 1% auto 10%;
}
@media (max-width: 768px) {
  #scene03 .link-area.flex-box {
    width: 88%;
    min-width: inherit;
  }
}
#scene03 .link-area.flex-box > div {
  width: 48%;
  min-width: 380px;
  margin: 0 1%;
}
@media (max-width: 768px) {
  #scene03 .link-area.flex-box > div {
    width: 100%;
    min-width: inherit;
    margin: 0;
  }
}
#scene03 .link-area.flex-box > div .item {
  width: 59%;
}
#scene03 .link-area.flex-box > div .price {
  width: 33%;
}
#scene03 .link-area .title{
  margin-top: 0;
}
@media (max-width: 768px) {
  #scene03 .link-area .title {
    margin-top: 1em;
  }
}
#scene03 .photo02 {
  width: 39.0234375%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene03 .photo02 {
    width: 86%;
  }
}
#scene03 .talk-area02 .talk-box-r {
  margin: 0 22% 0 auto;
}
@media (max-width: 768px) {
  #scene03 .talk-area02 .talk-box-r {
    margin: 6% auto 0 0;
  }
}
#scene03 .talk-area02 .talk-box-l {
  margin: 0 auto 0 22%;
}
@media (max-width: 768px) {
  #scene03 .talk-area02 .talk-box-l {
    margin: 0 0 3% auto;
  }
}

/*scene04*/
#scene04 {
  padding-bottom: 80px;
}
#scene04 .number {
  margin: 0 auto 6% 20%;
}
@media (max-width: 768px) {
  #scene04 .number {
    margin: 0 auto 0 6%;
  }
}
#scene04 .talk-box {
  width: 62.5%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene04 .talk-box {
    width: 100%;
    margin: 0 auto;
    padding-top: 12%;
  }
}
#scene04 .bg01 {
  position: relative;
  width: 41.015625%;
  margin: -12% 18% 5% auto;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene04 .bg01 {
    width: 70%;
    margin: -36% 0 6% auto;
  }
}
#scene04 .bg02 {
  position: relative;
  width: 26.5625%;
  margin: 0 auto 0 20%;
  z-index: 1;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene04 .bg02 {
    width: 45%;
    margin-left: 8%;
  }
}
@media (max-width: 768px) {
  #scene04 .talk-area02 {
    padding: 6% 0;
  }
}
@media (max-width: 768px) {
  #scene04 .talk-area02 .talk-box {
    padding-top: 0;
  }
}
#scene04 .box01 {
  position: relative;
  margin: -6% auto 10% 4%;
}
@media (max-width: 768px) {
  #scene04 .box01 {
    margin-left: auto;
  }
}
#scene04 .box01 .popup-area01 {
  position: relative;
  width: 45.5078125%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene04 .box01 .popup-area01 {
    width: 100%;
  }
}
#scene04 .box01 .popup-area01 span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene04 .box01 .popup-area01 .popup {
  position: relative;
  z-index: 4;
}
#scene04 .box01 .text-area .link-area {
  position: absolute;
  bottom: -6%;
  left: 8.5%;
  z-index: 6;
  left: 19%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  #scene04 .box01 .text-area .link-area {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }
}
#scene04 .photo01 {
  width: 36.40625%;
  margin: 4% auto 2%;
}
@media (max-width: 768px) {
  #scene04 .photo01 {
    width: 73%;
    margin: 4% 0 0 auto;
  }
}

/*scene05*/
#scene05 {
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  #scene05 .number {
    margin: 0 10% 5% auto;
  }
}
@media (max-width: 768px) {
  #scene05 .box01 {
    flex-direction: column-reverse;
  }
}
#scene05 .box01 .left-box {
  position: relative;
  width: 40.859375%;
  padding-top: 2%;
  z-index: 1;
}
@media (max-width: 768px) {
  #scene05 .box01 .left-box {
    width: 100%;
  }
}
#scene05 .box01 .right-box {
  width: 28.59375%;
}
#scene05 .box01 .right-box .number {
  margin: 0 16% 11.25rem auto;
}
#scene05 .box01 .right-box .talk-box {
  position: relative;
  width: 93.5643564356%;
  z-index: 2;
}
#scene05 .box01 .right-box .talk-box:nth-of-type(1) {
  margin-left: 6%;
}
#scene05 .box01 .right-box .talk-box:nth-of-type(2) {
  margin-left: -8%;
  margin-bottom: 11.25rem;
}
#scene05 .box01 .right-box .popup-area {
  width: 93.5643564356%;
  margin-left: -8%;
}
#scene05 .bg01 {
  width: 111.2021857923%;
  margin-left: 16%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene05 .bg01 {
    width: 73%;
    margin: 6% 0 10% auto;
  }
}
#scene05 .box02 {
  position: relative;
}
#scene05 .box02 .popup-area {
  position: relative;
  width: 44.9609375%;
  margin: -5% auto 0;
}
@media (max-width: 768px) {
  #scene05 .box02 .popup-area {
    width: 100%;
    margin: 6% auto;
  }
}
#scene05 .box02 .popup-area span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene05 .box02 .popup-area .popup {
  position: relative;
  z-index: 4;
}
#scene05 .box02 .text-area {
  position: absolute;
  bottom: 2%;
  right: 13.5%;
  z-index: 4;
}
@media (max-width: 768px) {
  #scene05 .box02 .text-area {
    position: relative;
    bottom: auto;
    right: auto;
  }
}
#scene05 .talk-area {
  width: 65.46875%;
  margin: 2% auto 0;
}
@media (max-width: 768px) {
  #scene05 .talk-area {
    width: 100%;
    margin: 3% auto;
  }
}
#scene05 .talk-area .talk-box {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #scene05 .talk-area02 .talk-box {
    margin-bottom: 6%;
  }
}
#scene05 .text-area.tab a,
#scene10 .text-area.tab a{
  flex-direction: column;
}
#scene05 .text-area.tab .item,
#scene10 .text-area.tab .item{
  width: 100%;
  margin-bottom: 0.25em;
  text-align: right;
}
#scene05 .price-area,
#scene10 .price-area{
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end !important;
  width: 100%;
  margin-bottom: 0.5em;
}
#scene05 .price-area .price,
#scene10 .price-area .price{
  width: 50%;
  text-align: right;
}

/*scene06*/
#scene06 {
  margin-bottom: 180px;
}
@media (max-width: 768px) {
  #scene06 {
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  #scene06 .number {
    margin: 0 auto 3% 6%;
  }
}
#scene06 .flex-box {
  position: relative;
  align-items: stretch;
  margin-right: 16%;
}
@media (max-width: 768px) {
  #scene06 .flex-box {
    margin: 0 auto;
  }
}
#scene06 .flex-box .popup-area {
  width: 37.5%;
  margin: 2% 2% 0;
}
@media (max-width: 768px) {
  #scene06 .flex-box .popup-area {
    width: 92%;
    margin: 2% auto 0;
  }
}
#scene06 .flex-box .text-area {
  position: absolute;
  bottom: 0;
  left: 94%;
  right: -30%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  #scene06 .flex-box .text-area {
    position: relative;
    bottom: auto;
    right: auto;
    transform: none;
    left: auto;
  }
}
#scene06 .talk-area {
  width: 58.59375%;
  margin: 2% auto 0;
}
@media (max-width: 768px) {
  #scene06 .talk-area {
    width: 100%;
    margin-top: 6%;
  }
}
#scene06 .talk-area .talk-box {
  margin-bottom: 0;
}
#scene06 .text-area01 .link-area{
  width: 17.5rem;
}
#scene06 .text-area01 .link-area a .price{
  width: 36%;
}
/*scene07*/
#scene07 {
  margin-top: -2%;
  padding-top: 2%;
  padding-bottom: 3%;
}
@media (max-width: 768px) {
  #scene07 {
    padding-top: 10%;
  }
}
#scene07 .box01 {
  justify-content: flex-start;
  align-items: stretch;
}
@media (max-width: 768px) {
  #scene07 .box01 {
    flex-direction: column-reverse;
  }
}
#scene07 .box01 .left-box {
  position: relative;
  width: 48.8671875%;
}
@media (max-width: 768px) {
  #scene07 .box01 .left-box {
    width: 92%;
  }
}
#scene07 .box01 .left-box span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene07 .box01 .left-box .popup {
  position: relative;
  z-index: 4;
}
#scene07 .box01 .right-box {
  position: relative;
  width: 39.6484375%;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box {
    width: 100%;
  }
}
#scene07 .box01 .right-box .bg01 {
  width: 68.6699507389%;
  position: absolute;
  top: -22%;
  left: -17%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box .bg01 {
    top: 10%;
    left: auto;
    right: 0;
    width: 60%;
  }
}
#scene07 .box01 .right-box .number {
  margin: -3% 6% 30% auto;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box .number {
    margin: -10% 6% 30% auto;
  }
}
#scene07 .box01 .right-box .talk-box-r {
  position: relative;
  margin-right: 3%;
  z-index: 5;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box .talk-box-r {
    margin: auto;
  }
}
#scene07 .box01 .right-box .talk-box-l {
  margin-left: 10%;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box .talk-box-l {
    margin: 0 auto 6%;
  }
}
#scene07 .box01 .right-box .link-area {
  position: absolute;
  bottom: 0;
  left: 3%;
}
@media (max-width: 768px) {
  #scene07 .box01 .right-box .link-area {
    position: relative;
    left: auto;
  }
}
#scene07 .bg02 {
  width: 31.5234375%;
  margin: 3% 16% 0 auto;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene07 .bg02 {
    width: 54%;
    margin-right: 6%;
  }
}
@media (max-width: 768px) {
  #scene07 .popup-area {
    width: 92%;
    margin-bottom: 3%;
  }
}

/*scene08*/
@media (max-width: 768px) {
  #scene08 .number {
    position: relative;
    margin: -6% auto -6% 6%;
    z-index: 6;
  }
}
#scene08 .flex-box {
  justify-content: center;
  position: relative;
}
#scene08 .flex-box .number {
  position: absolute;
  top: 6%;
  left: 18%;
  z-index: 2;
}
#scene08 .flex-box .popup-area {
  width: 53.90625%;
}
@media (max-width: 768px) {
  #scene08 .flex-box .popup-area {
    width: 100%;
  }
}
#scene08 .flex-box .link-area {
  position: absolute;
  bottom: 3%;
  left: 30%;
  right: -50%;
  z-index: 2;
  transform: translateX(-50%);
  z-index: 2;
}
@media (max-width: 768px) {
  #scene08 .flex-box .link-area {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    right: auto;
  }
}
#scene08 .talk-area {
  width: 62.5%;
  margin: 2% auto 0;
}
@media (max-width: 768px) {
  #scene08 .talk-area {
    width: 100%;
    margin-bottom: 3%;
  }
}
#scene08 .talk-area .talk-box {
  margin-bottom: 0;
}

/*scene09*/
#scene09 {
  position: relative;
  padding-bottom: 240px;
}
@media (max-width: 768px) {
  #scene09 {
    padding-bottom: 24%;
  }
}
@media (max-width: 768px) {
  #scene09 .number {
    margin: 0 6% 12% auto;
  }
}
#scene09 .bg01 {
  position: absolute;
  top: -3%;
  left: 0;
  width: 30.7421875%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene09 .bg01 {
    width: 62%;
    top: 3%;
  }
}
#scene09 .box01 .left-box {
  position: relative;
  width: 37.1484375%;
  padding-top: 10%;
}
@media (max-width: 768px) {
  #scene09 .box01 .left-box {
    width: 92%;
    margin: 0 0 6% auto;
  }
}
#scene09 .box01 .left-box span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
#scene09 .box01 .left-box .popup {
  position: relative;
  z-index: 4;
}
#scene09 .box01 .right-box {
  width: 36.5234375%;
  margin-left: 3%;
}
@media (max-width: 768px) {
  #scene09 .box01 .right-box {
    width: 100%;
    margin-left: auto;
  }
}
#scene09 .box01 .right-box .number {
  margin: 3% 0 16% auto;
}
@media (max-width: 768px) {
  #scene09 .talk-box-l {
    margin-bottom: 0;
  }
}
#scene09 .box02 {
  align-items: flex-end;
  padding-top: 2%;
}
#scene09 .box02 .left-box {
  margin-right: 3%;
}
@media (max-width: 768px) {
  #scene09 .box02 .left-box {
    width: 100%;
    margin-right: auto;
  }
}
#scene09 .box02 .right-box {
  width: 49.8046875%;
}
@media (max-width: 768px) {
  #scene09 .box02 .right-box {
    width: 100%;
  }
}
#scene09 .talk-area {
  width: 100%;
  margin: auto;
}

/*scene10*/
#scene10 {
  position: relative;
  padding-bottom: 80px;
}
#scene10 .bg01 {
  position: absolute;
  top: -1.5%;
  right: 10%;
  width: 28.515625%;
}
@media (max-width: 768px) {
  #scene10 .bg01 {
    width: 57%;
    right: 0;
    top: 2%;
  }
}
#scene10 .flex-box {
  position: relative;
  align-items: stretch;
  margin-right: 10%;
}
@media (max-width: 768px) {
  #scene10 .flex-box {
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 768px) {
  #scene10 .flex-box .number {
    margin: 0 auto 12% 6%;
  }
}
#scene10 .flex-box .popup-area {
  width: 44.859375%;
  margin: 8% 2% 0;
}
@media (max-width: 768px) {
  #scene10 .flex-box .popup-area {
    width: 92%;
    margin: 8% auto 3% 0;
  }
}
#scene10 .flex-box .text-area {
  position: absolute;
  bottom: 0;
  right: -5%;
  transform: translateX(50%);
  /* left: 63%; */
  right: 8%;
}
@media (max-width: 768px) {
  #scene10 .flex-box .text-area {
    position: relative;
    right: auto;
    transform: none;
  }
}
#scene10 .talk-area01 {
  width: 58.59375%;
  margin: 2% auto 0;
}
@media (max-width: 768px) {
  #scene10 .talk-area01 {
    width: 100%;
    margin-bottom: 6%;
  }
}
#scene10 .talk-area01 .talk-box {
  margin-bottom: 0;
}
#scene10 .talk-area02 {
  position: relative;
  width: 38.28125%;
  z-index: 4;
}
@media (max-width: 768px) {
  #scene10 .talk-area02 {
    width: 100%;
  }
}
#scene10 .talk-area02 .talk-box {
  margin-bottom: 0;
}
#scene10 .box01 {
  justify-content: center;
  align-items: flex-end;
  margin: 3% auto 6% 6%;
}
@media (max-width: 768px) {
  #scene10 .box01 {
    flex-direction: column-reverse;
    width: 100%;
    margin: 0 auto;
  }
}
#scene10 .box01 .photo01 {
  width: 41.71875%;
}
@media (max-width: 768px) {
  #scene10 .box01 .photo01 {
    width: 83%;
    margin: 0 0 6% auto;
  }
}
#scene10 .box01 .talk-area02 {
  margin-right: -5%;
  margin-bottom: 3%;
}
@media (max-width: 768px) {
  #scene10 .box01 .talk-area02 {
    margin-right: auto;
  }
}
#scene10 .photo02 {
  width: 22.34375%;
  margin: 0 auto 3%;
}
@media (max-width: 768px) {
  #scene10 .photo02 {
    width: 47%;
    margin: 0 auto 6% 10%;
  }
}
#scene10 .photo02 .photo {
  margin-left: -8%;
}
@media (max-width: 768px) {
  #scene10 .photo02 .photo {
    margin-left: auto;
  }
}
#scene10 .box02 {
  justify-content: center;
  align-items: center;
  margin: auto;
}
#scene10 .box02 .photo03 {
  width: 31.9233838787%;
  margin-left: 12%;
}
#scene10 .box02 .talk-area02 {
  margin-right: -10%;
  margin-bottom: 3%;
}
@media (max-width: 768px) {
  #scene10 .box02 .talk-area02 {
    margin-right: auto;
  }
}
#scene10 .bg02 {
  width: 25.46875%;
  margin-left: 12%;
  mix-blend-mode: multiply;
}
@media (max-width: 768px) {
  #scene10 .bg02 {
    width: 50%;
    margin-left: 0;
  }
}
#scene10 .box03 {
  position: relative;
  width: 45.4296875%;
  margin: -10% auto 0;
}
@media (max-width: 768px) {
  #scene10 .box03 {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #scene10 .box03 .popup-area {
    width: 91%;
    margin: 0 0 6% auto;
  }
}
#scene10 .box03 .link-area {
  position: absolute;
  bottom: 2%;
  left: -20%;
}
@media (max-width: 768px) {
  #scene10 .box03 .link-area {
    position: relative;
    bottom: auto;
    left: auto;
  }
}
#scene10 .box04 {
  align-items: flex-start;
  margin: 3% auto;
}
#scene10 .box04 .photo {
  width: 26.6796875%;
}
@media (max-width: 768px) {
  #scene10 .box04 .photo {
    width: 50%;
    margin: 6% auto 6% 6%;
  }
}
#scene10 .box04 .talk-area {
  width: 34.0234375%;
  margin-top: 6%;
}
@media (max-width: 768px) {
  #scene10 .box04 .talk-area {
    width: 100%;
  }
}
#scene10 .box04 .talk-area .talk-box {
  margin-bottom: 3%;
}
#scene10 .box04 .talk-area .talk-box:nth-of-type(1) {
  margin-left: 6%;
}
@media (max-width: 768px) {
  #scene10 .box04 .talk-area .talk-box:nth-of-type(1) {
    margin-left: auto;
  }
}
#scene10 .box04 .talk-area .talk-box:nth-of-type(2) {
  margin-bottom: 30%;
}
@media (max-width: 768px) {
  #scene10 .box04 .talk-area .talk-box:nth-of-type(2) {
    margin-bottom: 16%;
  }
}
@media (max-width: 768px) {
  #scene10 .photo03 {
    width: 65%;
    margin: 0 6% 6% auto;
  }
}
#scene10 .photo05 {
  width: 73.5546875%;
  margin: auto;
}
@media (max-width: 768px) {
  #scene10 .photo05 {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #scene10 .talk-area01 .talk-box {
    margin-bottom: 3%;
  }
}

.sns-block {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: #eae8dd;
}
@media (max-width: 768px) {
  .sns-block {
    padding-bottom: 3%;
  }
}
.sns-block a {
  margin: 0 0.75%;
  transition: 0.6s ease-in-out;
}
@media (max-width: 768px) {
  .sns-block a{
    margin: 0 3%;
  }
}

.sns-block a:hover {
  opacity: 0.6;
  transition: 0.6s ease-in-out;
}

.sns-block img {
  width: 28px;
  margin: auto;
  padding: 0 1%;
}

.footer {
  position: relative;
  padding: 2% 0 1% 0;
  text-align: center;
  letter-spacing: 0.3em;
  background-color: #eae8dd;
}

.f-ow {
  width: 100px;
  margin: auto;
}

.footer_copyright {
  font-family: "Helvetica", serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 24px 0 0;
}

#pagetop {
  position: fixed;
  right: 15px;
  bottom: 20px;
  width: 35px;
  z-index: 99;
}

/* ナビ */
#nav {
  position: fixed;
  flex-direction: column;
  align-items: flex-end;
  right: 1%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 5%;
  margin: 0 auto;
  padding: 0;
  z-index: 99;
}
#nav .flex-box{
  width: 3.75vw;
  flex-direction: row-reverse;
}
#nav .flex-box .nav-line02{
  margin-top: 4em;
}
#nav .nav-text {
  width: 25%;
  min-width: 70px;
  margin: 0 0 0 auto;
}
#nav .nav-number{
  position: relative;
  display: inline-block;
}
#nav .nav-number {
  margin: 0 0.25em;
}
#nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  color: #232f5b;
  font-size: clamp(14px, 2vw, 24px);
  font-family: 'EB Garamond', serif;
}
#nav a span{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: clamp(14px, 0.8vw, 16px);
  font-family: "Zen Old Mincho", serif;
}
#nav .nav-number a::after {
  content: "";
  display: inline-block;
  width: 80%;
  height: 80%;
  background: transparent;
  position: absolute;
  top: 20%;
  left: 10%;
}
#nav .nav-number a.current::after{
  background: rgba(35,47,91, 0.2);
}
@media (max-width: 768px) {
  .footer{
    padding-bottom: 30%;
  }
  #nav{
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    background: #eae8dd;
    position: fixed;
    bottom: 0;
    transition: 0.5s;
  }
  #nav .flex-box{
    width: 100%;
    display: inline-block;
  }
  #nav .nav-line01 .nav-number:nth-of-type(2){
    margin-right: 5em;
  }
  #nav .nav-line01 .nav-number:nth-of-type(3){
    margin-right: 1.075em;
  }
   #nav .nav-line02 .nav-number:nth-of-type(4){
    margin-right: 1em;
  }
  #nav a{
    position: relative;
    flex-direction: row;
    font-size: 1.2rem;
  }
  #nav a span{
    -ms-writing-mode: inherit;
    writing-mode: inherit;
    margin-left: 0.2em;
  }
  #nav .number{
    display: inline-block;
  }
  #nav .nav-number a::after {
    left: 22%;
  }
  #nav .number{
    margin: 0 1em 0.25em;
  }
  #nav .flex-box .nav-line02{
    margin-top: 0;
  }
  #pagetop{
    bottom: 60px;
    width: 30px;
  }
  .accordion{
    text-align: center;
  }
  .accordion-link {
    position: relative;
    display: inline-block;
    padding-top: 0.5em;
    margin-bottom: 6%;
  }
  .accordion-text {
    display: inline-block;
    padding-right: 2em;
    color: #232f5b;
    border-bottom: 1px solid #232f5b;
    text-decoration: none;
    transition: all .2s ease 0s;
    font-size: 1rem;
  }
  .accordion-text.close .icon-plus:after {
    display: none;
  }
  .accordion-text .icon-plus:before {
    width: 16px;
    height: 1px;
    position: absolute;
    top: 1.15em;
    right: 0;
    color: #232f5b;
    background-color: currentColor;
    content: '';
  }
  .accordion-text .icon-plus:after {
    width: 16px;
    height: 1px;
    position: absolute;
    top: 1.15em;
    right: 0;
    color: #232f5b;
    background-color: currentColor;
    content: '';
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}