@charset "UTF-8";
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-weight: normal;
  font-style: normal;
}

body {
  padding: 0;
  font-size: 18px;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans Japanese";
  color: #000000;
  position: relative;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.7vw;
  }
}

h1 {
  font-size: min(4.2vw, 50px);
  margin-bottom: 60px;
  color: #000000;
}
h1 span {
  font-size: 26px;
  display: block;
  letter-spacing: 0.1em;
}

h2 {
  font-size: min(2.5vw, 30px);
  color: #000000;
  margin-bottom: 20px;
  font-weight: 500;
}

p {
  font-size: min(2vw, 16px);
  font-weight: 400;
  line-height: 2em;
  margin-bottom: 20px;
}

b {
  font-weight: bold;
}

li {
  list-style: none;
}

a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  opacity: 0.6;
  transition-duration: 0.3s;
}

.txt_blue {
  color: #2586bd;
}

.txt_green {
  color: #24ac82;
}

small {
  font-size: 14px;
}

.cta_btn {
  display: flex;
}

.btn {
  width: min(19.2vw, 230px);
  height: min(5.2vw, 62px);
  text-align: center;
  font-size: min(2vw, 20px);
  font-weight: bold;
  letter-spacing: 0.1em;
  background-color: #fff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .btn {
    width: min(21vw, 230px);
  }
}
.btn.siryo {
  color: #24ac82;
  border: 2px solid #24ac82;
  filter: drop-shadow(4px 4px 0 #24ac82);
  margin-right: 30px;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 768px) {
  .btn.siryo {
    margin-right: 5vw;
  }
}
.btn.siryo::before {
  content: "";
  width: min(2.2vw, 26px);
  height: min(2.2vw, 26px);
  background: url(../images/cta_icon_siryo.png) no-repeat center;
  background-size: contain;
  margin: 2px 0.5vw 0 0;
}
.btn.contact {
  color: #2586bd;
  border: 2px solid #2586bd;
  filter: drop-shadow(4px 4px 0 #2586bd);
}
.btn.contact::before {
  content: "";
  width: min(2.2vw, 26px);
  height: min(2.2vw, 26px);
  background: url(../images/cta_icon_contact.png) no-repeat center;
  background-size: contain;
  margin: 2px 0.8vw 0 0;
}
.btn div {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .btn {
    width: 40vw;
    height: 10vw;
    font-size: 3.58vw;
  }
  .btn.siryo::before {
    content: "";
    width: 4.35vw;
    height: 4.35vw;
    background: url(../images/cta_icon_siryo.png) no-repeat center;
    background-size: contain;
    margin: 2px 1.28vw 0 0;
  }
  .btn.contact::before {
    content: "";
    width: 4.35vw;
    height: 4.35vw;
    background: url(../images/cta_icon_contact.png) no-repeat center;
    background-size: contain;
    margin: 2px 1.28vw 0 0;
  }
}

.box {
  display: flex;
  justify-content: space-between;
}
.box .bx {
  background-color: #fff;
  border-radius: 50px;
  border: 10px solid #b4d2e4;
  padding: min(3vw, 36px);
}
.box .bx h2 {
  text-align: center;
}
.box .bx img {
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
  }
  h1 {
    font-size: 6.4vw;
    margin-bottom: 5.128vw;
  }
  h1 span {
    font-size: 3.7vw;
  }
  h2 {
    font-size: 4.871vw;
    margin-bottom: 3vw;
  }
  small {
    font-size: 2.56vw;
  }
  p {
    font-size: 3.58vw;
    line-height: 1.5;
  }
}
header {
  background: url("../images/kv.jpg") top center no-repeat, url("../images/kv_bg.jpg") top center;
  background-size: auto;
  padding-top: 36px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  header {
    background-size: cover;
  }
}
header .in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  header .in {
    width: 100%;
  }
}
header .in h1 {
  margin-bottom: 0;
}
header .in .logo {
  width: min(21vw, 254px);
  margin-top: -36px;
  margin-left: min(0.5vw, -60px);
}
header .in .logo img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  header .in .logo {
    width: 40vw;
    margin: 0;
    position: absolute;
    top: 0;
    left: 2.564vw;
  }
}
header .in nav {
  height: 40px;
  margin: 0 0 0 auto;
  text-align: right;
  display: flex;
  align-items: center;
}
header .in nav a {
  margin-left: min(1.6vw, 20px);
  font-size: min(1.7vw, 14px);
  font-weight: bold;
  letter-spacing: normal;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  header .in nav a {
    font-size: 1.5vw;
  }
}
header .in nav .btn {
  width: min(14.5vw, 148px);
  height: 40px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  header .in nav .btn {
    width: min(15.5vw, 148px);
  }
}
header .in nav .btn.siryo {
  filter: drop-shadow(2px 2px 0 #24ac82);
  margin-left: min(2.5vw, 30px);
  margin-right: 0;
}
header .in nav .btn.siryo::before {
  content: "";
  width: min(4vw, 18px);
  height: min(4vw, 40px);
  background: url(../images/cta_icon_siryo.png) no-repeat center;
  background-size: contain;
  margin: 3px 0.2vw 0 0;
}
header .in nav .btn.contact {
  filter: drop-shadow(2px 2px 0 #2586bd);
}
header .in nav .btn.contact::before {
  content: "";
  width: min(4vw, 18px);
  height: min(4vw, 40px);
  background: url(../images/cta_icon_contact.png) no-repeat center;
  background-size: contain;
  margin: 0px 0.6vw 0 0;
}
header nav {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
header nav li {
  box-sizing: border-box;
  border-left: 1px solid #000;
  background: #ebecf0;
  width: 33.33333%;
  width: 33.3333333333%;
}
header nav li a {
  display: block;
  padding: 20px;
  width: 100%;
}
header nav li:last-of-type {
  border-right: 1px solid #000;
}
header nav li img.pc {
  display: inline-block;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  header {
    padding-top: 3vw;
  }
  header .in .logo {
    margin-top: -3vw;
  }
}
@media screen and (max-width: 768px) {
  header {
    background: url("../images/kv_sp.jpg") no-repeat center;
    background-size: cover;
  }
  header .in {
    padding: 0;
    width: 90%;
  }
}

.kv {
  height: 380px;
  padding: 56px 0 0;
  position: relative;
}
.kv.in {
  display: block;
}
.kv h1 {
  font-size: min(5.2vw, 62px);
  line-height: 1em;
  font-weight: 500;
}
.kv h1 span {
  display: inline-block;
  letter-spacing: normal;
  font-weight: 500;
}
.kv h1 span.small {
  font-size: min(3vw, 37px);
  letter-spacing: 0.03em;
}
.kv h1 span.txt_blue, .kv h1 span.txt_green {
  font-size: min(5.2vw, 62px);
}
.kv p {
  margin: 20px 0;
  font-size: min(2vw, 20px);
}
.kv small {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .kv {
    height: 37vw;
    padding-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .kv.in {
    width: 84.616vw;
    height: 140vw;
    padding-top: 25.641vw;
  }
  .kv h1 {
    font-size: 9.6vw;
    font-weight: 500;
    text-align: center;
  }
  .kv h1 span {
    font-size: 9.6vw;
  }
  .kv h1 span.small {
    font-size: 6vw;
  }
  .kv h1 span.txt_blue, .kv h1 span.txt_green {
    font-size: 10.2vw;
  }
  .kv .kvtx {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .kv p {
    font-size: 3.58vw;
  }
  .kv small {
    bottom: 20px;
    right: -7%;
  }
}

section {
  padding: 100px 0 100px 0;
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  section {
    padding: 8.4vw 0;
  }
}
@media screen and (max-width: 768px) {
  section {
    padding: 10vw 0;
  }
}

.in {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .in {
    width: 84.616vw;
    margin: 0 auto;
  }
}

.service {
  background: url(../images/bg_content01.jpg) no-repeat center;
  background-size: cover;
  padding-top: 6.4vw;
  margin-bottom: 0;
}
.service .area {
  display: flex;
  justify-content: space-between;
}
.service .area .video_wp {
  width: 36%;
  padding: 0 5%;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .service .area .video_wp {
    padding: 0;
  }
}
.service .area .video_wp .player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.service .area .video_wp .player iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.service .area .text {
  width: 60%;
  margin-bottom: min(8.3vw, 100px);
}
.service .area .text h1 {
  font-size: min(3.1vw, 38px);
  margin-bottom: min(1.2vw, 36px);
  font-weight: 500;
}
.service .area.honin {
  padding: 10px;
  background-image: unset;
  background-color: #d8ebf6;
  text-align: center;
  position: relative;
}
.service .area.honin::after {
  content: "";
  background: url(../images/howto_sankaku.png) no-repeat center;
  width: 9.6vw;
  height: 7.3vw;
  background-size: contain;
  position: absolute;
  bottom: -6.9vw;
  left: 45%;
}
.service .area.honin div {
  width: 40%;
}
.service .area.honin div.left, .service .area.honin div.right {
  padding: 44px 40px;
}
.service .area.honin div.left h2, .service .area.honin div.right h2 {
  font-weight: 500;
  margin-bottom: 40px;
}
.service .area.honin div.left h2 span, .service .area.honin div.right h2 span {
  font-size: 24px;
}
.service .area.honin div .fukidashi {
  display: block;
  width: 100%;
  padding: 8px 0 30px;
  font-size: 24px;
}
.service .area.honin div .fukidashi sup {
  font-size: 14px;
}
.service .area.honin div.left {
  background-color: #fff;
}
.service .area.honin div.left::after {
  content: "";
  background: url(../images/howto_sankaku_white_tb.png) no-repeat center;
  width: 4.6vw;
  height: 8.07vw;
  background-size: contain;
  position: absolute;
  top: 42%;
  right: 49%;
}
.service .area.honin div.left .fukidashi {
  background: url(../images/howto_ttl_haishi.png) no-repeat center;
  background-size: contain;
}
.service .area.honin div.left .fukidashi .red {
  color: #ee2d2d;
}
.service .area.honin div.left figure {
  width: 100%;
}
.service .area.honin div.left figure img {
  width: 100%;
}
.service .area.honin div.left h4 {
  font-weight: 500;
}
.service .area.honin div.right .fukidashi {
  color: #fff;
  background: url(../images/howto_ttl_blue.png) no-repeat top center;
  background-size: contain;
}
.service .area.honin div.right figure {
  padding-bottom: 16px;
  width: 40%;
  margin: 0 auto;
}
.service .area.honin div.right figure img {
  width: 100%;
}
.service .area.honin div h3 {
  font-size: 24px;
  margin: 10px 0 20px;
}
.service .area.honin div .bg_white {
  width: 100%;
  max-width: 436px;
  margin: 0 auto;
  background-color: #fff;
}
.service .area.honin div p {
  margin-top: 10px;
  text-align: left;
}
.service .area.honin div figure {
  margin-bottom: 30px;
}
.service .area.honin ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service .area.honin ul li {
  font-size: 14px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .service .area.honin {
    padding: 10px;
    background-image: unset;
    background-color: #d8ebf6;
  }
  .service .area.honin::after {
    content: "";
    background: url(../images/howto_sankaku.png) no-repeat center;
    width: 10.87vw;
    height: 8.3vw;
    background-size: contain;
    position: absolute;
    bottom: -8.07vw;
    left: 45%;
  }
  .service .area.honin div {
    width: 43%;
  }
  .service .area.honin div.left, .service .area.honin div.right {
    padding: 2.5vw 2.5vw;
  }
  .service .area.honin div.left h2, .service .area.honin div.right h2 {
    font-size: 2.5vw;
    margin-bottom: 3.3vw;
  }
  .service .area.honin div.left h2 span, .service .area.honin div.right h2 span {
    font-size: 2vw;
  }
  .service .area.honin div.left .fukidashi, .service .area.honin div.right .fukidashi {
    padding: 4px 0 2.5vw;
    font-size: 2vw;
  }
  .service .area.honin div.left .fukidashi sup, .service .area.honin div.right .fukidashi sup {
    font-size: 10px;
  }
  .service .area.honin div.left h3, .service .area.honin div.right h3 {
    font-size: 2vw;
    margin-top: 0;
  }
  .service .area.honin div.left {
    background-color: #fff;
  }
  .service .area.honin div.left::after {
    content: "";
    background: url(../images/howto_sankaku_white_tb.png) no-repeat center;
    width: 14.87vw;
    height: 8.07vw;
    background-size: contain;
    position: absolute;
    top: 42%;
    right: 42%;
  }
  .service .area.honin div.left figure {
    margin-bottom: 2.5vw;
  }
  .service .area.honin div.left figure img {
    width: 100%;
  }
  .service .area.honin div.left h4 {
    font-size: 1.9vw;
  }
  .service .area.honin div.right .fukidashi {
    padding: 4px 0 2.8vw;
  }
  .service .area.honin div.right .bg_white {
    width: 93%;
    margin: 0 auto;
    padding: 0;
  }
}
.service small {
  display: block;
  text-align: right;
  margin-top: 10px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .service small.pc {
    display: none;
  }
}
.service small.smp {
  display: none;
}
@media screen and (max-width: 768px) {
  .service small.smp {
    display: block;
  }
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .service small.tb {
    display: block;
  }
}
.service .comment {
  margin-top: 100px;
  display: block;
  text-align: center;
}
.service .comment h2 {
  font-size: min(4.2vw, 50px);
}
.service .comment h2 span {
  font-size: min(2.5vw, 30px);
}
.service .comment h2 span.txt_green {
  font-size: min(4.2vw, 50px);
}
@media screen and (max-width: 768px) {
  .service {
    background: url(../images/bg_service_sp.jpg) no-repeat center;
    background-size: cover;
  }
  .service small.pc {
    display: none;
  }
  .service .area {
    padding-bottom: 10vw;
  }
  .service .area:nth-of-type(1) {
    flex-direction: column-reverse;
  }
  .service .area .video_wp {
    width: 100%;
    padding: 0;
  }
  .service .area .text {
    width: 100%;
    margin-bottom: 0;
  }
  .service .area .text h1 {
    font-size: 5.897vw;
    margin-bottom: 5.128vw;
  }
  .service .area.honin {
    padding: 0;
    display: block;
    background: unset;
    background-color: #d8ebf6;
    padding: 2.05vw;
  }
  .service .area.honin::after {
    content: "";
    background: url(../images/howto_sankaku_sp.png) no-repeat center;
    width: 14.35vw;
    height: 7.69vw;
    background-size: contain;
    position: absolute;
    left: 42%;
    bottom: -7.4vw;
  }
  .service .area.honin div {
    width: 100%;
  }
  .service .area.honin div h3 {
    font-size: 4.1vw;
    margin: 0 0 4.87vw;
  }
  .service .area.honin div.left, .service .area.honin div.right {
    padding: 5.128vw 0;
  }
  .service .area.honin div.left h2, .service .area.honin div.right h2 {
    margin-bottom: 4.358vw;
  }
  .service .area.honin div.left h2 span, .service .area.honin div.right h2 span {
    font-size: 4.358vw;
  }
  .service .area.honin div.left .fukidashi, .service .area.honin div.right .fukidashi {
    padding: 2.3vw 0 0;
    font-size: 4.1vw;
  }
  .service .area.honin div.left .fukidashi sup, .service .area.honin div.right .fukidashi sup {
    font-size: 1.79vw;
  }
  .service .area.honin div.left p, .service .area.honin div.right p {
    width: 85%;
    margin: 0 auto;
  }
  .service .area.honin div.left figure, .service .area.honin div.right figure {
    width: 60%;
    margin: 0 auto;
    padding-bottom: 6.15vw;
  }
  .service .area.honin div.left {
    background-color: #fff;
    position: relative;
    padding-bottom: 8.97vw;
    margin-bottom: 30px;
  }
  .service .area.honin div.left .fukidashi {
    width: 69.23vw;
    height: 12.82vw;
    margin: 0 auto;
  }
  .service .area.honin div.left h3 {
    margin-top: 3%;
  }
  .service .area.honin div.left h4 {
    font-weight: 500;
    margin-bottom: 10px;
  }
  .service .area.honin div.left::after {
    content: "";
    background: url(../images/howto_sankaku_white_sp.png) no-repeat center;
    width: 14.87vw;
    height: 8.07vw;
    background-size: contain;
    position: absolute;
    left: 41%;
    bottom: -7.6vw;
    top: unset;
  }
  .service .area.honin div.left figure {
    width: 70%;
  }
  .service .area.honin div.right {
    padding-top: 4.3vw;
  }
  .service .area.honin div.right h2 {
    margin-bottom: 4.3vw;
  }
  .service .area.honin div.right .fukidashi {
    width: 80vw;
    height: 14.1vw;
    margin: 0 auto;
    padding: 1.8vw 0 0;
  }
  .service .area.honin div.right figure {
    padding-bottom: 6.66vw;
  }
  .service .area.honin div.right figure img {
    width: 100%;
  }
  .service .area.honin div.right .bg_white {
    width: 80vw;
    max-width: unset;
    margin: 0 auto;
  }
  .service .area.honin div.right p {
    padding-top: 4.3vw;
    padding-bottom: 10px;
  }
  .service .area.honin div.right small {
    width: 85%;
    margin: 0 auto;
    -moz-text-align-last: left;
         text-align-last: left;
  }
  .service .comment {
    margin-top: 40px;
  }
  .service .comment h2 {
    font-size: 6.4vw;
  }
  .service .comment h2 span {
    font-size: 4.87vw;
  }
  .service .comment h2 span.txt_green {
    font-size: 6.4vw;
  }
  .service .comment p {
    margin-bottom: 0;
  }
}

.point {
  background: url(../images/bg_point.jpg) no-repeat top center;
  background-size: cover;
  padding-bottom: 60px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .point {
    background-size: auto;
  }
}
.point h1 {
  text-align: center;
}
.point .box {
  margin-bottom: 100px;
}
.point .bx {
  width: 23%;
  border-radius: 60px;
}
.point .bx h2 {
  margin-bottom: 0;
}
.point .bx h2 span {
  font-weight: 500;
}
.point .bx img {
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .point .bx {
    width: 25%;
    padding: 3vw 2vw;
  }
}
.point .tejun {
  text-align: center;
  margin-bottom: 90px;
}
.point .tejun h2 {
  font-size: min(4.2vw, 50px);
}
.point .tejun p {
  margin-bottom: 30px;
}
.point .tejun figure {
  width: 100%;
}
.point .tejun figure img {
  width: 100%;
}
.point .kantan {
  display: flex;
  width: 95%;
}
.point .kantan .text h4 {
  font-size: 38px;
  margin-bottom: 60px;
  font-weight: 500;
}
.point .kantan .text h4 span {
  font-weight: 500;
}
.point .kantan .photo {
  margin: 0 30px;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .point .kantan {
    width: 100%;
  }
  .point .kantan .text h4 {
    font-size: 3.2vw;
    margin-bottom: 5vw;
  }
  .point .kantan .photo {
    width: 100%;
    margin: 0;
  }
  .point .kantan .photo img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .point {
    background: url(../images/bg_point_sp.jpg) no-repeat center;
    background-size: cover;
    padding-bottom: 10vw;
  }
  .point .box {
    display: block;
    margin-bottom: 10vw;
  }
  .point .box .bx {
    width: 50vw;
    margin: 0 auto;
    padding: 6.4vw 7.69vw;
    margin-bottom: 6.4vw;
    border: 1.28vw solid #b4d2e4;
    border-radius: 30px;
  }
  .point .box .bx h2 {
    font-size: 5.384vw;
  }
  .point .box .bx p {
    margin-bottom: 0;
  }
  .point .tejun {
    margin-bottom: 10vw;
  }
  .point .tejun h2 {
    font-size: 6.4vw;
  }
  .point .kantan {
    display: block;
    width: 100%;
  }
  .point .kantan .text h4 {
    font-size: 5.7vw;
    margin-bottom: 6.4vw;
  }
  .point .kantan .photo {
    width: 100%;
    margin: 0;
  }
  .point .kantan .photo img {
    width: 100%;
  }
}

.list {
  background: url(../images/bg_list.jpg) no-repeat top center;
  background-size: cover;
  padding-bottom: 0;
  margin-bottom: 54px;
}
.list h1 {
  font-weight: 500;
  text-align: center;
}
.list .box {
  width: 90%;
  margin: 0 auto;
  flex-wrap: wrap;
}
.list .box .bx {
  width: 22%;
  border: 10px solid #a0d9c7;
  margin-bottom: 36px;
}
.list .box .bx h2 {
  font-size: min(2.5vw, 26px);
  color: #2586bd;
}
.list .box .bx img.smp {
  display: none;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .list {
    margin-bottom: 4.5vw;
  }
  .list .box {
    width: 100%;
  }
  .list .box .bx {
    margin-bottom: 3vw;
  }
  .list .box figure img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .list {
    background: url(../images/bg_list_sp.jpg) no-repeat center;
    background-size: cover;
    padding-bottom: 10vw;
    margin-bottom: 0;
  }
  .list .box {
    display: block;
    width: 100%;
  }
  .list .box .bx {
    width: auto;
    padding: 4.87vw 6.4vw;
    border: 2vw solid #a0d9c7;
    border-radius: 30px;
    margin-bottom: 6.4vw;
  }
  .list .box .bx:nth-of-type(9) {
    margin-bottom: 0;
  }
  .list .box .bx h2 {
    font-size: 4.6vw;
  }
  .list .box .bx p {
    margin-bottom: 0;
  }
  .list .box .bx div {
    display: flex;
    width: 100%;
  }
  .list .box .bx div figure {
    width: 40%;
  }
  .list .box .bx div figure img {
    width: 100%;
  }
  .list .box .bx div figure img.smp {
    display: block;
  }
  .list .box .bx div figure img.pc {
    display: none;
  }
  .list .box .bx div p {
    width: 60%;
  }
}

.cta {
  background-color: #d8ebf6;
  padding: 0;
}
.cta .cta_block {
  margin: 0 auto;
  background: url(../images/bg_cta.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  padding: 40px 0 66px;
}
.cta .cta_block figure {
  margin-bottom: 20px;
}
.cta .cta_block h1 {
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 20px;
}
.cta .cta_block h2 {
  font-size: 16px;
  line-height: 2em;
  font-weight: 400;
  margin-bottom: 60px;
}
.cta .cta_block .cta_btn {
  justify-content: center;
  margin: 0 auto;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .cta .cta_block {
    width: 80%;
    padding: 3.4vw 0 5.5vw;
  }
  .cta .cta_block figure {
    width: 10%;
    margin: 0 auto;
  }
  .cta .cta_block figure img {
    width: 100%;
  }
  .cta .cta_block h1 {
    font-size: 3.2vw;
    margin-bottom: 1.7vw;
  }
  .cta .cta_block h2 {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 768px) {
  .cta .in {
    width: 100%;
  }
  .cta .cta_block {
    width: 100%;
    background: url(../images/bg_cta_sp.png) no-repeat center;
    background-size: contain;
    padding: 6.4vw 0 8.2vw;
  }
  .cta .cta_block figure {
    width: 9.2vw;
    margin: 0 auto 2.3vw;
  }
  .cta .cta_block figure img {
    width: 100%;
  }
  .cta .cta_block h1 {
    font-size: 4.87vw;
    margin-bottom: 2.3vw;
  }
  .cta .cta_block .cta_btn {
    display: inline;
  }
  .cta .cta_block .cta_btn .btn {
    margin: 0 auto;
  }
  .cta .cta_block .cta_btn .siryo {
    margin-bottom: 3.846vw;
  }
  .cta .cta_block h2 {
    font-size: 3.58vw;
    line-height: 1.5em;
    margin-bottom: 7vw;
  }
}

.omakase {
  background: url(../images/bg_omakase.jpg) no-repeat center;
  background-size: cover;
}
.omakase h1 {
  font-weight: 500;
  text-align: center;
}
.omakase h1 span {
  display: inline;
  font-size: 50px;
  font-weight: 500;
}
.omakase figure {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .omakase h1 {
    margin-bottom: 5vw;
  }
  .omakase h1 span {
    font-size: 4.2vw;
  }
  .omakase figure {
    width: 90%;
    margin: 0 auto;
  }
  .omakase figure img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .omakase h1 span {
    font-size: 6.4vw;
  }
}

.security {
  background: url(../images/bg_security.jpg) no-repeat top center;
  background-size: auto;
  text-align: center;
  padding: 90px 0;
}
.security .area {
  margin-bottom: 90px;
}
.security .area .box {
  justify-content: center;
  margin-bottom: 40px;
}
.security .area .box .bx {
  border: none;
  background-color: unset;
  padding: 0;
}
.security .area .box .bx figure {
  margin-bottom: 10px;
}
.security .area .box .bx h2 {
  font-size: 28px;
  margin-bottom: 0;
}
.security .area .box .bx p {
  margin-bottom: 0;
}
.security .donyu h3 {
  font-size: 50px;
  margin-bottom: 24px;
}
.security .donyu p {
  margin-bottom: 60px;
}
.security .donyu figure {
  width: 100%;
}
.security .donyu figure img {
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .security {
    padding: 8.4vw 0;
  }
  .security .area {
    margin-bottom: 8.4vw;
  }
  .security .area .box .bx {
    width: 33%;
  }
  .security .area .box .bx figure {
    width: 100%;
  }
  .security .area .box .bx figure img {
    width: 100%;
  }
  .security .area .box .bx h2 {
    font-size: 2.4vw;
  }
  .security .donyu h3 {
    font-size: 4.2vw;
    margin-bottom: 2.5vw;
  }
  .security .donyu p {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 768px) {
  .security {
    padding: 10vw 0;
    background: url(../images/bg_security_sp.png) no-repeat top center;
    background-size: contain;
  }
  .security .area {
    margin-bottom: 10vw;
  }
  .security .area .box {
    display: block;
    margin-bottom: 7.69vw;
  }
  .security .area .box .bx {
    width: 80%;
    margin: 0 auto;
  }
  .security .area .box .bx figure {
    width: 70%;
    margin: 0 auto;
  }
  .security .area .box .bx figure img {
    width: 100%;
  }
  .security .area .box .bx h2 {
    font-size: 4.5vw;
    margin-bottom: 20px;
  }
  .security .area .box .bx h2:nth-of-type(3) {
    margin-bottom: 0;
  }
  .security .area p {
    -moz-text-align-last: left;
         text-align-last: left;
  }
  .security .donyu h3 {
    font-size: 6.4vw;
    margin-bottom: 4.8vw;
  }
  .security .donyu p {
    margin-bottom: 4.8vw;
  }
}

.flow {
  background: url(../images/bg_donyu.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  padding: 90px 0;
}
.flow h1 {
  margin-bottom: 24px;
}
.flow p {
  margin-bottom: 60px;
}
.flow figure {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .flow {
    padding: 8.4vw 0;
  }
  .flow h1 {
    margin-bottom: 2vw;
  }
  .flow p {
    margin-bottom: 5vw;
  }
  .flow figure {
    width: 100%;
  }
  .flow figure img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .flow {
    background: url(../images/bg_flow_sp.jpg) no-repeat center;
    background-size: cover;
    padding: 10vw 0;
  }
  .flow h1 {
    margin-bottom: 4.8vw;
  }
  .flow p {
    margin-bottom: 7.69vw;
  }
  .flow figure {
    width: 70%;
    margin: 0 auto;
  }
}

.faq {
  padding: 90px 0;
}
.faq h1 {
  text-align: center;
}
.faq .box {
  display: block;
  width: 80%;
  margin: 0 auto;
}
.faq .box .bx {
  margin: 0 auto 20px auto;
  padding: 0;
  border: 10px solid #e5e6e7;
  cursor: pointer;
}
.faq .box .bx .text {
  width: 80%;
  margin: 0 auto;
}
.faq .box .bx .text h2 {
  -moz-text-align-last: left;
       text-align-last: left;
  font-size: min(2.3vw, 20px);
  margin-bottom: 0;
  line-height: 1.5;
  padding: 16px 0 24px;
  position: relative;
}
.faq .box .bx .text h2::before {
  content: "Q";
  font-size: 26px;
  margin-left: -48px;
  margin-right: 26px;
}
.faq .box .bx .text h2::after {
  content: url(../images/icon_qa.png);
  position: absolute;
  top: 26px;
  right: -60px;
}
.faq .box .bx .text h2.active::after {
  transform: rotate(180deg);
}
.faq .box .bx .text .answer {
  display: none;
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .faq {
    padding: 8.4vw 0;
  }
  .faq h1 {
    margin-bottom: 5vw;
  }
  .faq .box {
    width: 100%;
  }
  .faq .box .bx .text h2::after {
    right: -5vw;
  }
}
@media screen and (max-width: 768px) {
  .faq {
    padding: 10vw 0;
  }
  .faq .box {
    width: 100%;
  }
  .faq .box .bx {
    width: 100%;
    border: 1.28vw solid #e5e6e7;
    border-radius: 20px;
  }
  .faq .box .bx:last-child {
    margin-bottom: 0;
  }
  .faq .box .bx .text {
    width: 75%;
  }
  .faq .box .bx .text h2 {
    font-size: 3.84vw;
    line-height: 1.5;
    padding: 2vw 0 3vw;
  }
  .faq .box .bx .text h2::before {
    content: "Q";
    font-size: 5.13vw;
    margin: 0;
    position: absolute;
    top: 3px;
    left: -6vw;
  }
  .faq .box .bx .text h2::after {
    content: "";
    background: url(../images/icon_qa.png) no-repeat center;
    background-size: contain;
    width: 4.48vw;
    height: 3.85vw;
    position: absolute;
    top: 35%;
    right: -10%;
  }
  .faq .box .bx .text h2.active::after {
    transform: rotate(180deg);
  }
}

footer {
  padding: 48px 0;
  background-color: #fff;
}
footer ul {
  text-align: center;
  margin-bottom: 20px;
}
footer ul li {
  font-size: 13px;
  display: inline;
  padding-bottom: 2px;
  border-bottom: 2px solid #e5e6e7;
}
footer p {
  text-align: center;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  footer {
    padding: 6.5vw 0;
  }
  footer ul li {
    font-size: 3.59vw;
  }
  footer p {
    font-size: 3vw;
  }
}

#gotop {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background: url("../images/arrow_gotop.png") no-repeat top;
  background-size: 30px 30px;
  z-index: 100;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #gotop {
    bottom: 2vw;
    right: 2vw;
    background-size: 10vw 10vw;
    width: 10vw;
    height: 10vw;
  }
}

.smp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .smp {
    display: block;
  }
  .pc {
    display: none;
  }
  header nav.pc {
    display: none;
  }
}
/*スマホドロワーメニュー*/
@media screen and (max-width: 768px) {
  header .close {
    display: block;
    width: 45px;
    height: 60px;
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 9999999;
  }
  header .close:before, header .close:after,
header .close span {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: 0.35s ease-in-out;
  }
  header .close span {
    height: 4px;
    background-color: #000;
    top: calc(50% - 1px);
    border-radius: 5px;
  }
  header .close:before {
    content: "";
    top: calc(25% - 2px);
    border-top: 4px solid #000;
    border-radius: 5px;
  }
  header .close:after {
    content: "";
    bottom: calc(25% - 4px);
    border-bottom: 4px solid #000;
    border-radius: 5px;
  }
  header .close.on span {
    display: none;
  }
  header .close.on:before {
    top: calc(50% - 2px);
    transform: rotate(315deg);
  }
  header .close.on:after {
    bottom: calc(50% - 2px);
    transform: rotate(-315deg);
  }
}

@media screen and (max-width: 768px) {
  header .nav {
    display: block;
    width: 100%;
    height: 64.1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background-color: #fff;
    position: absolute;
    position: fixed;
    top: 130px;
    right: 0;
    line-height: 0;
    font-size: 3.589vw;
  }
  header .nav .nav_block {
    display: flex;
    justify-content: center;
    margin-bottom: 3.84vw;
  }
  header .nav .nav_block:nth-of-type(2) {
    margin-bottom: 5.128vw;
  }
  header .nav .nav_block:nth-of-type(3) {
    margin-bottom: 0;
  }
  header .nav p {
    text-align: center;
    margin-bottom: 10px;
  }
  header .nav li:nth-of-type(1) {
    margin-right: 3.84vw;
  }
  header .nav li a {
    width: 37vw;
    height: 10vw;
    color: #000;
    font-size: 3.5vw;
    font-weight: 500;
    display: block;
    position: relative;
    background-color: #fff;
    border: 2px solid #000000;
    border-radius: 6px;
    filter: drop-shadow(4px 4px 0 #000000);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  header .nav li a.siryo {
    margin-right: 0;
  }
}

.award {
  width: 740px;
  margin: 40px auto 0 auto;
}
@media screen and (max-width: 768px) {
  .award {
    width: 90%;
    margin: 4vw auto 0 auto;
  }
}
.award div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .award div {
    margin-bottom: 3vw;
  }
}
.award div img {
  width: 200px;
}
@media screen and (max-width: 768px) {
  .award div img {
    width: 30vw;
  }
}
.award div a {
  text-decoration: underline;
  display: block;
}
.award div a:after {
  content: "";
  background: url(../images/ico_link.png) no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: sub;
}
@media screen and (max-width: 768px) {
  .award div a:after {
    width: 16px;
    height: 16px;
  }
}
.award p {
  text-align: center;
  line-height: 1.8em;
  font-size: 80%;
}
@media screen and (max-width: 768px) {
  .award p {
    margin-bottom: 0;
    text-align: left;
  }
}
/*# sourceMappingURL=style.css.map */