@charset "UTF-8";

html {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.02rem;
}

body {
  color: #000;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
}

/* メインビジュアル */

.mv-wrapper {
  width: 100%;
}

.mv-img {
  display: block;
}

.mv-img-sp {
  display: none;
}

.mv-img img,
.mv-img-sp img {
  width: 100%;
}

.mv-area {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
  padding: 0 40px;
}

.title-box {
  padding-top: 80px;
  margin-bottom: 230px;
  margin-left: auto;
  width: 46vw;
}

.title-box p {
  font-size: 2.4vw;
  width: 29.2vw;
  padding: 0 10px;
}

h3 {
  font-size: 3vw;
  font-weight: 300;
  width: 46.15vw;
  padding: 0 10px;
  margin-top: 20px;
}

.point-block {
  display: flex;
  justify-content: flex-end;
  height: 860px;
  padding-bottom: 30px;
  align-items: flex-end;
}

.point-circle {
  position: relative;
  margin-left: 65px;
  display: flex;
  align-items: center;
}

.point-circle::after {
  content: "";
  display: block;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: #FFFDC3;
  position: relative;
}

.circle-inner {
  position: absolute;
  text-align: center;
  width: 350px;
  z-index: 1;
}

.point-sub {
  font-size: 2.6vw;
}

.point-people {
  font-size: 3.1vw;
  color: #E56D8B;
}

.point-annotation {
  font-weight: 500;
}

.point-accession {
  font-size: 1.1vw;
  margin-top: 30px;
}

.point-free {
  font-size: 4vw;
  color: #E56D8B;
}

/* 共通調整 */
.mincho {
  font-family: "ヒラギノ明朝 ProN W6", serif;
}

.feature-wrapper,
.recommend-wrapper,
.graph-wrapper,
.price-area,
.membership-wrapper,
.marriage-wrapper,
.staff-wrapper,
.privacy-wrapper {
  padding: 80px 0;
}

.service-wrapper,
.price-wrapper,
.marriage-area {
  padding-top: 80px;
}

.sub-head-1,
.sub-head-2,
.sub-head-3,
.sub-head-4,
.sub-head-5,
.sub-head-6,
.sub-head-7,
.sub-head-8,
.sub-head-9 {
  font-size: 2.5vw;
  font-weight: 500;
  margin: 0 auto;
}

.sub-head-1::after,
.sub-head-2::after,
.sub-head-3::after,
.sub-head-4::after,
.sub-head-5::after,
.sub-head-6::after,
.sub-head-7::after,
.sub-head-8::after,
.sub-head-9::after {
  content: "";
  display: block;
  padding-top: 5px;
  border-bottom: solid 1px #19BAB5;
}

/* 特徴 */

.feature-area {
  margin: 0 auto;
}

.sub-head-1 {
  width: 24vw;
  padding-bottom: 80px;
}

.sub-head-1::after {
  width: 23.7vw;
}

.feature-block-space {
  display: flex;
  justify-content: space-between;
}

.feature-block {
  max-width: 493px;
  width: calc(100% / 3);
}

.feature-box {
  height: 443px;
  background-color: #F7F7F7;
  border: solid 5px #DBDADA;
  border-radius: 8px;
}

.feature-box-inner {
  text-align: center;
  padding: 27px 2.25vw;
}

.feature-box-inner img {
  padding-top: 20px;
  width: 100%;
}

.feature-sub {
  font-size: 2.1vw;
  font-weight: 400;
}

.feature-text {
  font-size: 1.2vw;
  text-align: justify;
  padding-top: 20px;
}

.left-space {
  margin-left: 2vw;
}

/* おすすめ */

.sub-head-2 {
  width: 55vw;
  padding-bottom: 10px;
}

.sub-head-2::after {
  padding-top: 5px;
}

.recommend-wrapper {
  background-color: rgba(25, 186, 181, 0.1);
}

.recommend-text {
  font-size: 1.6vw;
  text-align: center;
  margin-bottom: 90px;
}

.recommend-block {
  display: flex;
  justify-content: space-between;
}

.recommend-box {
  background-color: #fff;
  border: solid 2px #19BAB5;
  border-radius: 8px;
  height: 168px;
  max-width: 488px;
  width: calc(100% / 3);
}

.recommend-box-inner {
  text-align: center;
  height: 168px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.recommend-box-inner span {
  background-color: #FFF505;
}

.recommend-box-inner p {
  font-size: 1.6vw;
  font-weight: 500;
}

.lower-row {
  margin-top: 40px;
}

.recommend-block-sp {
  display: none;
}

/* 成婚者特徴 */

.graph-area {
  text-align: center;
}

.graph-area img {
  max-width: 890px;
  width: 100%;
}

/* サービス */

.sub-head-4 {
  width: 29vw;
  padding-bottom: 80px;
}

.service-block {
  display: flex;
  justify-content: space-between;
}

.service-block img {
  width: 26.5vw;
}

.service-text {
  max-width: 760px;
  margin-left: 5vw;
}

.service-sub {
  font-size: 2.4vw;
  font-weight: 500;
  color: #19BAB5;
  margin-bottom: 40px;
}

.service-explanation {
  font-size: 1.4vw;
  text-align: justify;
}

.service-explanation span {
  background-color: #FFF505;
}

.bg-color {
  background-color: rgba(25, 186, 181, 0.1);
}

.service-area {
  padding: 80px 0;
}

/* プラン料金 */

.sub-head-5 {
  width: 15vw;
}

.price-area {
  color: #707070;
}

.price-sub {
  font-size: 2vw;
  font-weight: 400;
  margin: 0 auto;
}

.price-block {
  padding-top: 40px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.price-sub::after {
  content: "";
  display: block;
  padding-top: 5px;
  border-bottom: solid 1px #707070;
}

.price-block dl {
  display: flex;
  border-bottom: 1px dotted #707070;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-weight: 300;
  width: 27.2vw;
  align-items: center;
}

.price-block dt {
  margin-right: 20px;
  font-size: 1.5vw;
  font-weight: 400;
  color: #19BAB5;
  display: flex;
  justify-content: space-around;
  width: 13vw;
}

.price-block dd {
  text-align: center;
  width: 13vw;
}

dl dt,
dl dd {
  display: inline-block;
}

.price-inner-left {
  width: 27.2vw;
}

.price-text {
  font-size: 2vw;
  font-weight: 500;
}

.price-tax {
  font-size: 1.5vw;
}

.price-title {
  width: 35vw;
  padding: 10px;
  background-color: #FFF4C6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-title-p {
  width: 35vw;
  padding: 10px;
  background-color: #19BAB5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-title p {
  font-size: 1.6vw;
  font-weight: 400;
  color: #000;
}

.price-title-p p {
  font-size: 1.6vw;
  font-weight: 400;
  color: #fff;
}

.price-box {
  width: 35vw;
  padding: 20px 2vw;
  background-color: #FEF7D8;
}

.price-box-p {
  width: 35vw;
  padding: 20px 2vw;
  background-color: #fff;
}

.price-box p {
  width: 35vw;
  padding: 20px 2vw;
}

.price-box p,
.price-box-p p {
  font-size: 1.45vw;
  width: 33vw;
  margin: 0 auto;
}

/* 入会に必要な書類 */

.price-center-sub {
  font-size: 2vw;
  font-weight: 400;
  text-align: center;
  margin-bottom: 80px;
}

.price-center-sub::after {
  content: "";
  display: block;
  padding-top: 5px;
  border-bottom: solid 1px #707070;
}

.item-block {
  display: flex;
  justify-content: space-between;
}

.item-block dl {
  display: flex;
  border-bottom: 1px dotted #707070;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 34vw;
  align-items: center;
  justify-content: center;
}

.item-block dt {
  margin-right: 20px;
  font-size: 1.5vw;
  font-weight: 400;
  color: #19BAB5;
  display: flex;
  width: 13vw;
}

.item-block dd {
  width: 22vw;
}

.item-inner-left {
  margin-right: 1vw;
}

.item-text {
  font-size: 1.25vw;
}

/* 入会条件 */

.terms-area {
  padding-bottom: 80px;
  color: #707070;
}

.terms-text {
  font-size: 1.5vw;
  width: 46vw;
  margin: 0 auto;
}

/* オプション */

.option-price {
  font-size: 1.5vw;
  font-weight: 400;
}

.option-tax {
  font-size: 1vw;
  font-weight: 400;
}

.option-block {
  display: flex;
  justify-content: space-between;
}

.option-block dl {
  display: flex;
  border-bottom: 1px dotted #707070;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 34vw;
  align-items: center;
  justify-content: center;
}

.option-block dt {
  margin-right: 20px;
  font-size: 1.5vw;
  font-weight: 400;
  color: #19BAB5;
  display: flex;
  width: 30vw;
}

.option-block dd {
  width: 22vw;
  text-align: center;
}

/* 入会までの流れ */

.sub-head-6 {
  width: 18vw;
  padding-bottom: 80px;
}

.flow-number {
  background-color: #19BAB5;
  width: 4.5vw;
}

.member-flow {
  padding-bottom: 10px;
}

.flow-number p {
  font-size: 5vw;
  text-align: center;
  font-family: 'Oswald',
    sans-serif;
  color: #fff;
}

.flow-upper-row {
  display: flex;
  justify-content: space-between;
}

.flow-title {
  display: flex;
  width: 40vw;
  align-items: flex-end;
}

.flow-text {
  margin-right: 11.2vw;
}

.flow-sub {
  font-size: 2.3vw;
  font-weight: 500;
  margin-left: 10px;
  color: #19BAB5;
}

.flow-explanation {
  font-size: 2vw;
  width: 40vw;
  margin-left: 5vw;
}

.flow-guide {
  display: flex;
}

.flow-block img {
  width: 22.8vw;
  margin-bottom: auto;
}

.flow-form-link {
  display: flex;
  justify-content: space-around;
  width: 95%;
  margin-left: auto;
  margin-top: 15px;
  border: solid 1px #707070;
}

.flow-arrow-1 {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 550px;
  margin-top: 25px;
  position: relative;
}

.flow-arrow-1::after {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 40px;
  position: absolute;
  transform: rotate(30deg) translate(23px, 25px);
  top: 87%;
  left: 1%;
}

.flow-arrow-2 {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 455px;
  margin-top: 25px;
  position: relative;
}

.flow-arrow-2::after {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 40px;
  position: absolute;
  transform: rotate(30deg) translate(23px, 25px);
  top: 85%;
  left: 1%;
}

.flow-arrow-3 {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 230px;
  margin-top: 25px;
  position: relative;
}

.flow-arrow-3::after {
  display: block;
  content: "";
  border-left: solid 2px #19BAB5;
  height: 40px;
  position: absolute;
  transform: rotate(30deg) translate(23px, 25px);
  top: 70%;
  left: 1%;
}

.hide {
  display: none;
}

/* 結婚までの流れ */

.sub-head-7 {
  width: 17.5vw;
  padding-bottom: 40px;
}

.sub-head-bottom {
  text-align: center;
  font-size: 1.6vw;
}

.flow-map {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-map-number {
  background-color: #19BAB5;
  width: 5vw;
}

.flow-map-number p {
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 1.8vw;
}

.flow-map-action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5vw;
  height: 474px;
  border: solid 1px #707070;
}

.flow-map-action p {
  writing-mode: vertical-rl;
  font-size: 2.5vw;
  font-weight: 400;
}

.flow-map-triangle {
  width: 0;
  height: 0;
  border-left: 30px solid #19BAB5;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  margin: 0 2vw;
}

.marriage-block {
  margin-bottom: 40px;
}

.marriage-sub {
  font-size: 2.5vw;
  color: #19BAB5;
  font-weight: 500;
  padding-bottom: 10px;
}

.marriage-sub span {
  font-size: 4vw;
  margin: 0 0.5vw;
}

.marriage-text {
  font-size: 1.5vw;
}

.down-triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 40px solid #19BAB5;
}

/* スタッフ紹介 */

.sub-head-8 {
  width: 15vw;
  padding-bottom: 80px;
}

.sub-head-bottom {
  text-align: center;
  font-size: 1.6vw;
}

.staff-block {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin-bottom: 160px;
}

.staff-img {
  margin: 0 4.5vw;
  z-index: 1;
}

.staff-img img {
  width: 17.15vw;
}

.staff-text {
  width: 45vw;
}

.staff-text::after {
  content: "";
  display: block;
  border: solid 1px #707070;
  width: 75vw;
  height: 250px;
  position: absolute;
  transform: translate(15px, -40px);
  top: 50%;
  left: 0%;
}

.staff-info-box {
  display: flex;
  text-align: center;
  margin-bottom: 60px;
}

.staff-support-box {
  display: flex;
  text-align: center;
  margin-bottom: 35px;
}

.staff-info-box p,
.staff-support-box p {
  font-size: 1.3vw;
}

.staff-role {
  background-color: #19BAB5;
  width: 9.25vw;
  z-index: 1;
}

.staff-role p {
  color: #fff;
}

.staff-role-support {
  background-color: #19BAB5;
  width: 11.5vw;
  z-index: 1;
}

.staff-role-support p {
  color: #fff;
}

.staff-name {
  border: solid 1px #19BAB5;
  background-color: #fff;
  width: 9.25vw;
  z-index: 1;
}

.staff-bio p {
  font-size: 1.5vw;
  color: #707070;
}

.staff-support-bio p {
  font-size: 1.4vw;
  color: #707070;
}

.staff-name img {
  border-style: none;
  width: 5.5vw;
  margin-top: 5px;
}

/* 個人情報保護方針 */

.sub-head-9 {
  width: 20vw;
  padding-bottom: 50px;
}

.date {
  text-align: right;
  font-size: 1.5vw;
  padding-bottom: 80px;
}

.clause {
  font-size: 1.5vw;
}

.clause span {
  color: #19BAB5;
}

@media screen and (min-width:1643px) {

  .item-block dl {
    width: 33vw;
  }

}

@media screen and (max-width:1500px) {

  .staff-text::after {
    height: 200px;
    transform: translate(50px, -40px);
  }

}

@media screen and (max-width:1366px) {

  .title-box {
    padding-top: 100px;
    margin-bottom: 220px;
  }

  .title-box p {
    font-size: 2.5vw;
  }

  h3 {
    font-size: 3.2vw;
    margin-top: 10px;
  }

  .circle-inner {
    width: 250px;
  }

  .point-circle {
    margin-left: 40px;
  }

  .point-circle::after {
    width: 250px;
    height: 250px;
  }

  .point-accession {
    margin-top: 20px;
  }

  .feature-wrapper,
  .recommend-wrapper,
  .graph-wrapper,
  .service-area,
  .price-area,
  .membership-wrapper,
  .marriage-wrapper,
  .staff-wrapper,
  .privacy-wrappper {
    padding: 60px 0;
  }

  .service-wrapper,
  .price-wrapper,
  .marriage-area {
    padding-top: 60px;
  }

  .sub-head-1,
  .sub-head-3,
  .sub-head-4,
  .sub-head-6,
  .sub-head-8,
  .date {
    padding-bottom: 60px;
  }

  .sub-head-9 {
    padding-bottom: 30px;
  }
  .date {
    padding-bottom: 40px;
  }

  .sub-head-6 {
    padding-bottom: 30px;
  }

  .feature-box {
    height: 340px;
    border: solid 2px #DBDADA;
  }

  .feature-text {
    padding-top: 15px;
  }

  .lower-row {
    margin-top: 30px;
  }

  .recommend-text {
    margin-bottom: 70px;
  }

  .service-sub {
    margin-bottom: 30px;
  }

  .price-text {
    font-size: 2vw;
  }

  .price-tax {
    font-size: 1.25vw;
  }

  dl,
  dd {
    margin-bottom: 10px;
  }

  .price-center-sub {
    margin-bottom: 60px;
  }

  .terms-area {
    padding-bottom: 60px;
  }

  .flow-arrow-1 {
    height: 440px;
    margin-top: 20px;
  }

  .flow-arrow-1::after {
    transform: rotate(30deg) translate(23px, 24px);
    top: 84%;
    left: 1%;
  }

  .flow-arrow-2 {
    height: 315px;
    margin-top: 20px;
  }

  .flow-arrow-2::after {
    height: 30px;
    transform: rotate(30deg) translate(22px, 28px);
    top: 81%;
    left: 2%;
  }

  .flow-arrow-3 {
    height: 165px;
    margin-top: 20px;
  }

  .flow-arrow-3::after {
    height: 30px;
    transform: rotate(30deg) translate(21px, 25px);
    top: 63%;
    left: 1%;
  }

  .flow-map-action {
    height: 360px;
  }

  .flow-map-triangle {
    border-left: 25px solid #19BAB5;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

  .marriage-block {
    margin-bottom: 30px;
  }

  .down-triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 35px solid #19BAB5;
  }

  .staff-block {
    margin-bottom: 100px;
  }

  .staff-info-box {
    margin-bottom: 40px;
  }

  .staff-support-box {
    margin-bottom: 20px;
  }

  .staff-text::after {
    height: 170px;
    transform: translate(45px, -20px);
    top: 50%;
    left: 0%;
  }

  .staff-name {
    height: 25px;
  }

  .staff-name img {
    margin-top: 0;
    margin-bottom: 4px;
  }
}

@media screen and (max-width:1000px) {
  .title-box {
    padding-top: 80px;
  }

  .title-box {
    margin-bottom: 290px;
  }

  .feature-wrapper,
  .recommend-wrapper,
  .graph-wrapper,
  .service-area,
  .price-area,
  .membership-wrapper,
  .marriage-wrapper,
  .staff-wrapper {
    padding: 40px 0;
  }

  .service-wrapper,
  .price-wrapper,
  .marriage-area {
    padding-top: 40px;
  }

  .sub-head-1,
  .sub-head-3,
  .sub-head-4,
  .sub-head-6,
  .sub-head-8 {
    padding-bottom: 40px;
  }

  .sub-head-6 {
    padding-bottom: 20px;
  }

  .circle-inner {
    width: 200px;
  }

  .point-circle::after {
    width: 200px;
    height: 200px;
  }

  .point-annotation {
    font-size: 2vw;
  }

  .feature-box-inner {
    padding: 15px 2.25vw;
  }

  .feature-box {
    height: 250px;
  }

  .feature-text {
    padding-top: 10px;
  }

  .lower-row {
    margin-top: 20px;
  }

  .recommend-box,
  .recommend-box-inner {
    height: 130px;
  }

  .recommend-box,
  .feature-box {
    border-radius: 4px;
  }

  .recommend-text {
    margin-bottom: 50px;
  }

  .service-sub {
    margin-bottom: 20px;
  }

  dl,
  dd {
    margin-bottom: 5px;
  }

  .price-center-sub {
    margin-bottom: 40px;
  }

  .terms-area {
    padding-bottom: 40px;
  }

  .flow-arrow-1 {
    height: 300px;
    margin-top: 10px;
  }

  .flow-arrow-1::after {
    height: 30px;
    transform: rotate(30deg) translate(21px, 25px);
    top: 80%;
    left: 1%;
  }

  .flow-arrow-2 {
    height: 190px;
    margin-top: 10px;
  }

  .flow-arrow-2::after {
    height: 30px;
    transform: rotate(30deg) translate(21px, 25px);
    top: 68%;
    left: 1%;
  }

  .flow-arrow-3 {
    height: 130px;
    margin-top: 10px;
  }

  .flow-arrow-3::after {
    height: 30px;
    transform: rotate(30deg) translate(21px, 25px);
    top: 54%;
    left: 1%;
  }

  .flow-map-action {
    height: 250px;
  }

  .flow-map-triangle {
    border-left: 20px solid #19BAB5;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

  .marriage-block {
    margin-bottom: 20px;
  }

  .down-triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 23px solid #19BAB5;
  }

  .staff-block {
    margin-bottom: 70px;
  }

  .staff-info-box {
    margin-bottom: 20px;
  }

  .staff-support-box {
    margin-bottom: 5px;
  }

  .staff-text::after {
    height: 110px;
    transform: translate(30px, -5px);
    top: 50%;
    left: 0%;
  }

  .staff-name {
    height: 19px;
  }

  .staff-name img {
    margin-top: 0;
    margin-bottom: 9px;
  }

}

@media screen and (max-width:768px) {

  /* FV */
  .mv-img {
    display: none;
  }

  .mv-img-sp {
    display: none;
    display: block;
  }

  .title-box {
    width: 75%;
    margin-bottom: 235px;
  }

  .title-box p {
    font-size: 1.2rem;
    width: 100%;
  }

  h3 {
    font-size: 1.8rem;
    width: 100%;
  }

  .sub-head-1,
  .sub-head-2,
  .sub-head-3,
  .sub-head-4,
  .sub-head-5,
  .sub-head-6,
  .sub-head-7,
  .sub-head-8,
  .sub-head-9 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 auto;
  }

  .sub-head-1 {
    width: 14.25rem;
  }

  .sub-head-1::after {
    width: 14.25rem;
  }

  /* 特徴 */

  .feature-block-space {
    display: block;
  }

  .feature-block {
    width: 100%;
    margin: 0 auto;
  }

  .feature-box {
    height: 385px;
  }

  .feature-sub {
    font-size: 1rem;
  }

  .feature-text {
    font-size: 0.75rem;
  }

  .left-space {
    margin-top: 2rem;
  }

  /* おすすめ */

  .sub-head-2 {
    width: 90%;
  }

  .recommend-text {
    font-size: 0.75rem;
  }

  .recommend-block {
    display: none;
  }

  .recommend-block-sp {
    display: flex;
  }

  .recommend-box {
    width: 100%;
    margin: 5px;
  }

  .recommend-box-inner p {
    font-size: 0.65rem;
  }
  

  /* サービス */

  .service-wrapper {
    padding-top: 80px;
  }

  .sub-head-4 {
    width: 12rem;
    text-align: center;
  }

  .service-block {
    display: block;
    text-align: center;
  }

  .service-block img {
    width: 100%;
  }

  .service-text {
    margin-left: 0;
  }

  .service-sub {
    font-size: 5vw;
  }

  .service-explanation {
    font-size: 0.75rem;
  }

  /* 料金とプラン */

  .sub-head-5 {
    width: 9rem;
    padding-top: 40px;
  }

  .price-sub,
  .price-center-sub {
    text-align: center;
    font-size: 4vw;
  }

  .price-block,
  .item-block,
  .item-block dl,
  .option-block {
    display: block;
  }

  .price-inner-left,
  .price-block dl,
  .price-block dt,
  .price-title,
  .price-box,
  .price-title-p,
  .price-box-p,
  .item-block dl,
  .item-block dd,
  .option-block dl {
    width: 100%;
  }

  .option-block dt {
    width: 50%;
  }

  .price-block dt,
  .price-title p,
  .price-text,
  .item-block dt,
  .option-block dt,
  .option-price {
    font-size: 3vw;
  }

  .price-block dd {
    width: 100%;
    display: block;
  }

  .item-block dt {
    width: 100%;
    margin-right: 0;
  }

  .price-box p,
  .price-box-p p {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 2.5vw;
  }

  .item-text,
  .terms-text {
    width: 100%;
    font-size: 2.5vw;
  }

  .item-text br,
  .item-block dt br{
    display: none;
  }

  .item-inner-left {
    margin-right: 0;
  }

  .terms-text {
    font-size: 2.5vw;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* 入会の流れ */

  .sub-head-6 {
    width: 10.5rem;
    padding-top: 40px;
  }

  .flow-title {
    width: 100%;
  }

  .flow-sub {
    font-size: 4.5vw;
    margin-left: 2.75vw;
  }

  .flow-upper-row {
    display: block;
  }

  .flow-block img {
    width: 90%;
    position: right;
    margin-left: 7vw;
  }

  .flow-explanation {
    font-size: 3vw;
    margin-left: 8vw;
    margin-bottom: 10px;
    width: 100%;
  }

  .tell-block {
    padding: 20px 10px;
    border: solid 1px #707070;
    width: 100%;
  }

  .number-text {
    font-size: 5.5vw;
  }

  .time-text {
    font-size: 3vw;
  }

  .flow-form-link {
    display: block;
    justify-content: space-around;
    width: 90%;
    margin-left: 7vw;
    border: none;
  }

  .line-block-sp img {
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .line-block-sp {
    width: 100%;
    padding: 20px 10px;
    border: solid 1px #707070;
  }

  .flow-arrow-1 {
    height: 950px;
  }

  .flow-arrow-1::after {
    top: 93.5%;
  }

  .flow-arrow-2 {
    height: 630px;
  }

  .flow-arrow-2::after {
    top: 90%;
  }

  .flow-arrow-3 {
    height: 540px;
  }

  .flow-arrow-3::after {
    top: 89%;
  }

  /* 結婚までの流れ */

  .sub-head-7 {
    width: 10.5rem;
    padding: 40px 0;
  }

  .sub-head-bottom {
    font-size: 2.5vw;
  }

  .flow-map {
    display: block;
  }

  .flow-map-block {
    display: flex;
  }

  .flow-map-number br {
    display: none;
  }

  .flow-map-action p {
    writing-mode: horizontal-tb;
  }

  .flow-map-triangle {
    transform: rotate(90deg);
    margin-left: 57%;
  }

  .flow-map-number {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flow-map-action {
    height: 50px;
    width: 100%;
  }

  .flow-map-action p {
    font-size: 4vw;
  }

  .flow-map-number p {
    font-size: 3vw;
  }

  .marriage-sub  {
    font-size: 4vw;
  }

  .marriage-text {
    font-size: 2vw;
  }

  /* スタッフ */

  .sub-head-8 {
    width: 9rem;
    padding-top: 40px;
  }

  .staff-block {
    display: block;
  }

  .staff-img img {
    width: 100%;
  }

  .staff-text {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
  }

  .staff-role {
    width: 7rem;
  }

  .staff-role-support {
    width: 9rem;
  }

  .staff-role-support p {
    font-size: 1rem;
  }

  .staff-info-box p,
  .staff-support-box p {
    font-size: 0.9rem;
  }

  .staff-bio,.staff-support-bio {
    margin: 0 auto;
  }

  .staff-support-bio p {
    font-size: 0.9rem;
    position: relative;
  }

  .staff-name {
    width: 6rem;
  }

  .staff-text::after {
    height: 172px;
    width: 21.5rem;
    transform: translate(-50px, 50px);
    top: 61%;
    left: 18%;
  }

  .staff-bio p,.staff-support-bio{
    font-size: 1rem;
    border: solid 1px #707070;
    padding: 20px 40px;
  }

  .staff-text::after {
    display: none;
  }

  .staff-info-box {
    margin-bottom: 10px;
  }

  .staff-name {
    height: 30px;
  }

  .staff-name img {
    width: 4rem;
    margin-bottom: 1px;
  }

  .sub-head-9 {
    width: 12rem;
    padding: 40px 0;
  }


}


@media screen and (max-width:699px) {

  .point-sub {
    font-size: 1rem;
  }

  .point-people {
    font-size: 1.1rem;
  }

  .point-annotation {
    font-size: 0.75rem;
  }

  .point-free {
    font-size: 1.5rem;
  }

  .title-box {
    margin-bottom: 250px;
  }

  .circle-inner {
    width: 160px;
  }

  .point-circle::after {
    width: 160px;
    height: 160px;
  }


}

@media screen and (max-width:596px) {

  .flow-arrow-2 {
    height: 570px;
  }

  .flow-arrow-2::after {
    top: 89%;
  }

  .flow-arrow-3 {
    height: 490px;
  }

  .flow-arrow-3::after {
    top: 87%;
  }

}

@media screen and (max-width:568px) {

  .flow-arrow-1 {
    height: 880px;
  }

  .flow-arrow-1::after {
    top: 93%;
  }

  .flow-arrow-2 {
    height: 490px;
  }

  .flow-arrow-2::after {
    top: 88%;
  }

  .flow-arrow-3 {
    height: 420px;
  }

  .flow-arrow-3::after {
    top: 86%;
  }

}

@media screen and (max-width:414px) {

  .point-block {
    display: block;
  }

  .point-circle {
    margin-left: 0;
    justify-content: center;
    margin: 10px;
  }

  .title-box {
    width: 100%;
    margin-bottom: 80px;
  }

  .mv-wrapper {
    background-position: right 73% bottom 10%;
  }

  .lower-row {
    margin-top: 5px;
  }

  .feature-box {
    height: 300px;
  }

  .flow-arrow-1 {
    height: 800px;
  }

  .flow-arrow-1::after {
    top: 92.5%;
  }

  .flow-arrow-2 {
    height: 365px;
  }

  .flow-arrow-2::after {
    top: 84%;
  }

  .flow-arrow-3 {
    height: 315px;
  }

  .flow-arrow-3::after {
    top: 81%;
  }

}