@charset "UTF-8";
@import url("global.css");
.anchornavi {
  padding: 35px 0 40px;
  background-color: #f3f3f3;
  margin-bottom: 100px;
}
.anchornavi p {
  text-align: center;
  margin-bottom: 16px;
}
.anchornavi p::before, .anchornavi p::after {
  content: "";
  width: 70px;
  height: 1px;
  background-color: #111;
  display: inline-block;
  margin: 0 15px;
  vertical-align: 6px;
}
.anchornavi #anchornavi {
  display: flex;
  margin: 0 -12px;
}
.anchornavi #anchornavi li {
  width: 33.33333%;
  padding: 0 12px;
  box-sizing: border-box;
}
.anchornavi #anchornavi li a {
  display: block;
  border: #ccc 1px solid;
  background-color: #fff;
  padding: 20px 0;
  text-align: center;
  position: relative;
}
.anchornavi #anchornavi li a span {
  display: block;
  line-height: 1;
}
.anchornavi #anchornavi li a span.ja {
  font-size: 20px;
  margin-bottom: 5px;
}
.anchornavi #anchornavi li a span.en {
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.anchornavi #anchornavi li a::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #62749B transparent transparent transparent;
  position: absolute;
  bottom: 8px;
  left: 50%;
  margin-left: -12px;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}
.anchornavi #anchornavi li a:hover {
  color: #374360;
}
.anchornavi #anchornavi li a:hover::before {
  opacity: 1;
  transform: translateY(15px);
}

.section {
  margin-bottom: 140px;
}
.section .mainblock {
  position: relative;
  padding-top: 90px;
}
.section .mainblock .image {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
}
.section .mainblock .main {
  background-color: #fff;
  padding: 50px 0 20px;
  width: calc( 50% + 70px );
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.section .mainblock .main .en {
  text-align: right;
  font-size: 50px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: 1px #111;
  text-stroke: 1px #111;
  line-height: 1;
  margin-bottom: 40px;
}
.section .mainblock .main .catch {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.section .mainblock .main .title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 60px;
  color: #374360;
}
.section .mainblock .main .title span {
  font-size: .6em;
  letter-spacing: 0;
}
.section .mainblock .main .text {
  text-align: justify;
  font-size: 14px;
}
.section .mainblock .main .text p + p {
  margin-top: 20px;
}
.section .button {
  margin-top: 80px;
}
.section .button a {
  display: block;
  background-color: #374360;
  color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .1em;
  position: relative;
  border-radius: 100px;
}
.section .button a .en {
  font-size: 30px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-text-stroke: 1px #374360;
  text-stroke: 1px #374360;
  line-height: 1;
  position: absolute;
  width: 260px;
  top: -10px;
  left: 50%;
  margin-left: -130px;
}
.section .button a::before, .section .button a::after {
  content: "";
  width: 1px;
  background-color: #374360;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.section .button a::before {
  height: 50px;
  box-shadow: 1px 0 0 #fff;
}
.section .button a::after {
  height: 24px;
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform-origin: left bottom;
}
.section .button a:hover {
  background-color: #62749B;
}
.section .button a:hover::before, .section .button a:hover::after {
  bottom: -50px;
}

#catalog .mainblock .image {
  left: 0;
}
#catalog .mainblock .image .objectfit {
  object-position: center left;
}
#catalog .mainblock .main {
  margin-left: auto;
  padding-left: 80px;
  border-top-left-radius: 30px;
}

#consultation .mainblock .image {
  right: 0;
}
#consultation .mainblock .image .objectfit {
  object-position: center left;
}
#consultation .mainblock .main {
  padding-right: 80px;
  border-top-right-radius: 30px;
}
#consultation ul.point {
  display: flex;
  margin: 80px -10px 0;
}
#consultation ul.point li {
  width: 25%;
  margin: 0 10px;
}
#consultation ul.point li .image {
  position: relative;
  height: 0;
  padding-top: 65%;
}
#consultation ul.point li .image img {
  position: absolute;
  top: 0;
  left: 0;
}
#consultation ul.point li .text {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  margin: -30px 20px 0;
  border-radius: 4px;
  padding: 15px 0 0;
}
#consultation ul.point li .text .number {
  font-size: 60px;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  font-weight: 700;
  color: #fff;
  opacity: .8;
  position: absolute;
  top: -50px;
  left: 0;
  line-height: 1;
}
#consultation ul.point li .text .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
}
#consultation ul.point li .text p:not([class]) {
  line-height: 1.5;
  font-size: 14px;
  text-align: justify;
}
#consultation .access {
  position: relative;
  padding-top: 80px;
  margin-top: 80px;
}
#consultation .access .image {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
#consultation .access .main {
  background-color: #fff;
  border-top-left-radius: 30px;
  position: relative;
  z-index: 2;
  width: calc( 50% + 140px );
  box-sizing: border-box;
  padding-left: 80px;
  margin-left: auto;
}
#consultation .access .main .title {
  text-align: right;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 20px;
}
#consultation .access .main dl dt {
  line-height: 1;
  font-size: 30px;
  font-weight: 700;
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  margin-bottom: 30px;
}
#consultation .access .main dl dt span {
  display: block;
  width: 120px;
  line-height: 0;
  margin-bottom: 5px;
}
#consultation .access .main dl dt span svg * {
  fill: #111;
}
#consultation .access .main dl dd {
  margin-top: 5px;
}
#consultation .access .main dl dd.time {
  font-family: "Poppins", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
#consultation .access .main dl dd.map {
  margin-top: 30px;
  position: relative;
  height: 400px;
}
#consultation .access .main dl dd.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1500px)
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1.5 (1320px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1320px) {
  .section .mainblock .image {
    width: calc( 50% + 50px );
  }
  .section .mainblock .main {
    width: calc( 50% + 60px );
  }

  #catalog .mainblock .image {
    left: -50px;
  }
  #catalog .mainblock .main {
    padding-left: 60px;
  }

  #consultation .mainblock .image {
    right: -50px;
  }
  #consultation .mainblock .image .objectfit {
    object-position: center center;
  }
  #consultation .mainblock .main {
    padding-right: 60px;
  }
  #consultation ul.point {
    margin: 80px -20px 0;
    flex-wrap: wrap;
  }
  #consultation ul.point li {
    width: calc( 50% - 40px );
    margin: 0 20px 40px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .anchornavi {
    margin-bottom: 70px;
  }
  .anchornavi #anchornavi {
    margin: 0 -6px;
  }
  .anchornavi #anchornavi li {
    padding: 0 6px;
  }
  .anchornavi #anchornavi li a {
    display: block;
    border: #ccc 1px solid;
    background-color: #fff;
    padding: 22px 0;
    text-align: center;
    position: relative;
  }
  .anchornavi #anchornavi li a span {
    display: block;
    line-height: 1;
  }
  .anchornavi #anchornavi li a span.ja {
    font-size: 18px;
  }
  .anchornavi #anchornavi li a::before {
    display: none;
  }
  .anchornavi #anchornavi li a:hover {
    color: #111;
  }

  .section {
    margin-bottom: 100px;
  }
  .section .mainblock {
    padding-top: 0;
  }
  .section .mainblock .image {
    position: static;
    width: auto;
    max-width: 600px;
    margin: 0 auto -25px;
  }
  .section .mainblock .main {
    padding: 0;
    width: auto;
    background-color: transparent;
  }
  .section .mainblock .main .en {
    margin-bottom: 30px;
  }
  .section .mainblock .main .catch {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  .section .mainblock .main .title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .section .button {
    margin-top: 60px;
  }
  .section .button a {
    line-height: 60px;
    font-size: 21px;
  }
  .section .button a .en {
    font-size: 24px;
    width: 200px;
    top: -9px;
    margin-left: -100px;
  }
  .section .button a::before, .section .button a::after {
    bottom: -32px;
  }
  .section .button a::before {
    height: 40px;
  }
  .section .button a::after {
    height: 20px;
  }
  .section .button a:hover {
    background-color: #374360;
  }
  .section .button a:hover::before, .section .button a:hover::after {
    bottom: -32px;
  }

  #catalog .mainblock .image {
    left: 0;
  }
  #catalog .mainblock .image .objectfit {
    object-position: center center;
  }
  #catalog .mainblock .main {
    padding-left: 0;
  }

  #consultation .mainblock .image {
    right: 0;
  }
  #consultation .mainblock .main {
    padding-right: 0;
  }
  #consultation ul.point {
    margin: 60px -1.5vw 0;
  }
  #consultation ul.point li {
    width: calc( 50% - 3vw );
    margin: 0 1.5vw 40px;
  }
  #consultation ul.point li .text {
    margin: -30px 12px 0;
  }
  #consultation .access {
    padding-top: 0;
    margin-top: 40px;
  }
  #consultation .access .image {
    width: auto;
    position: static;
    height: 200px;
  }
  #consultation .access .main {
    border-radius: 30px;
    width: auto;
    padding: 30px 30px 0;
    margin: -30px auto 0;
  }
  #consultation .access .main .title {
    font-size: 24px;
  }
  #consultation .access .main dl dt {
    font-size: 30px;
    margin-bottom: 20px;
  }
  #consultation .access .main dl dd {
    margin-top: 0;
  }
  #consultation .access .main dl dd.map {
    margin: 30px 0 0;
    height: 400px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .anchornavi {
    padding: 25px 0 30px;
    margin-bottom: 50px;
  }
  .anchornavi p {
    margin: 0 -10px 16px;
  }
  .anchornavi p::before, .anchornavi p::after {
    width: 30px;
    margin: 0 12px;
    vertical-align: 5px;
  }
  .anchornavi #anchornavi {
    margin: 0 -4px;
  }
  .anchornavi #anchornavi li {
    padding: 0 4px;
  }
  .anchornavi #anchornavi li a {
    padding: 15px 0;
  }
  .anchornavi #anchornavi li a span {
    display: block;
    line-height: 1;
  }
  .anchornavi #anchornavi li a span.ja {
    font-size: calc(85.7% + 6 * (100vw - 360px) / 280);
    margin-bottom: 6px;
    letter-spacing: 0;
  }
  .anchornavi #anchornavi li a span.en {
    font-size: 12px;
  }

  .section {
    margin-bottom: 80px;
  }
  .section .mainblock .image {
    margin: 0 auto -12px;
  }
  .section .mainblock .main .en {
    font-size: 32px;
    margin-bottom: 10px;
  }
  .section .mainblock .main .catch {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .section .mainblock .main .title {
    font-size: calc(107% + 9 * (100vw - 360px) / 280);
    margin-bottom: 30px;
    border-top: #62749B 1px solid;
    border-bottom: #62749B 1px solid;
    padding: 16px 0;
    text-align: center;
  }
  .section .mainblock .main .text {
    text-align: justify;
    font-size: 14px;
  }
  .section .mainblock .main .text p + p {
    margin-top: 20px;
  }
  .section .button {
    margin-top: 40px;
  }
  .section .button a {
    line-height: 52px;
    font-size: 18px;
  }
  .section .button a .en {
    font-size: 21px;
    top: -8px;
  }
  .section .button a::before, .section .button a::after {
    bottom: -25px;
  }
  .section .button a::before {
    height: 32px;
  }
  .section .button a::after {
    height: 16px;
  }

  #consultation ul.point {
    margin: 40px -8px 0;
  }
  #consultation ul.point li {
    width: calc( 50% - 16px );
    margin: 0 8px 20px;
  }
  #consultation ul.point li .text {
    margin: -30px 5px 0;
    padding: 15px 0 0;
  }
  #consultation ul.point li .text .number {
    font-size: 45px;
    top: -38px;
  }
  #consultation ul.point li .text .title {
    font-size: 13px;
    margin-bottom: 12px;
    letter-spacing: 0;
  }
  #consultation ul.point li .text p:not([class]) {
    line-height: 1.5;
    font-size: 11px;
  }
  #consultation .access {
    margin-top: 30px;
  }
  #consultation .access .image {
    height: 160px;
  }
  #consultation .access .main {
    border-radius: 30px;
    padding: 30px 20px 0;
    margin: -30px auto 0;
  }
  #consultation .access .main .title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
  }
  #consultation .access .main dl {
    text-align: center;
  }
  #consultation .access .main dl dt {
    font-size: 30px;
    margin-bottom: 15px;
  }
  #consultation .access .main dl dt span {
    margin: 0 auto 5px;
  }
  #consultation .access .main dl dd.map {
    margin: 25px -20px 0;
    height: 320px;
  }
}