@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");

html,
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,
sup,
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;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

body {
  line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

nav ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold
}

del {
  text-decoration: line-through
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0
}

input,
select {
  vertical-align: middle
}

*,
*::before,
*::after {
  box-sizing: border-box
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation
}

html {
  font-size: 1.125rem
}

@media screen and (max-width: 768px) {
  html {
    font-size: .875rem
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #fff;
  color: #535353
}

body a {
  text-decoration: none
}

body img {
  vertical-align: bottom
}

body em {
  font-style: normal
}

body li {
  list-style: none
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: normal
}

@media screen and (max-width: 768px) {
  body {
    font-weight: normal
  }
}

.wrap {
  width: 100%;
  overflow: hidden
}

@media screen and (max-width: 1000px) {
  img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  img {
    width: 100%;
    height: auto
  }
}

.cv {
  background-color: #1f4799;
  color: #fff;
  position: relative
}

.cv-floating {
  background-color: #ff6d2d
}

.cv-floating .cv__status .number {
  color: #ff6d2d
}

.cv__status {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  margin: 0 auto;
  padding: 10px 0 20px 80px;
  color: #333;
  font-size: 1.77rem;
  text-align: center
}
.cv.type2 .cv__status {
  padding: 10px 0 20px 140px;
}
@media screen and (max-width: 1000px) {
  .cv__status {
    width: 90vw;
    max-width: none
  }

  .cv__status img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .cv__status {
    max-width: none
  }
}

.cv__status::before {
  background-image: url("../images/cv_status.svg");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: contain;
  width: 6.2rem;
  height: 3rem;
  content: "";
  display: inline-block;
  position: relative;
  bottom: -8px
}

.cv__status-wrap {
  background-image: url("../images/cv2.jpg");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .cv__status-wrap {
    background-image: url("../images/cv2@2x.jpg")
  }
}

.cv__status .number {
  color: #cc2929;
  font-size: 2.66rem
}

.cv__touch {
  width: calc(940px - 40px);
  margin: 0 auto;
  position: relative
}

.cv__touch img {
  position: absolute;
  top: -100px
}
.cv.type2 .cv__touch img {
  left: 35px;
}
.cv__inner {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 30px 11px;
  display: flex;
  justify-content: space-between
}

.cv.type2 .cv__inner  {
  display: block;
}
@media screen and (max-width: 1000px) {
  .cv__inner {
    width: 90vw;
    max-width: none
  }

  .cv__inner img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .cv__inner {
    max-width: none
  }
}

.cv__number {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #feeeb4 0, #ffe38a 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  padding: 0 1vw;
  max-width: 600px
}
.cv.type2 .cv__number{
  text-align: unset;
  margin: 0 auto;
}
.cv__number a {
  transition: all 0.2s ease-in-out
}

.cv__number a:hover {
  opacity: 0.7
}

.cv__number a .number {
  font-size: 3.6rem;
  font-weight: bold;
  color: #cc2929
}

.cv__number a .number::before {
  content: '';
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url("../images/free.webp");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin: 0.5vw 0.5vw 0 0
}

.cv__number a .number::after {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("../images/arrow.webp");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 0.5rem 0.5rem
}

.cv__number a .orange {
  color: #ff6d2d
}

.cv__number a .orange::before {
  background-image: url("../images/free_orange.webp")
}

.cv__number a .orange::after {
  background-image: url("../images/arrow_orange.webp")
}

.cv__text-03 {
  width: 525px;
  margin: 15px auto 0;
}

.cv.type2 .cv__text{
  display: none;
}
.cv__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 20px 0;
  background-color: #dff1f4;
}

.cv__btn {
  width: 350px;
  box-shadow: rgba(0, 0, 0, 0.6) 0 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  transition: .3s;
  position: relative;
}

.cv__btn::before {
  content: "";
  display: inline-block;
  background-image: url(../images/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 17px;
  height: 30px;
  position: absolute;
  top: 51%;
  right: 15px;
  transform: translateY(-50%);
}

.cv__mail {
  padding: 17px 0;
  background: linear-gradient(0deg, #1F4799 0%, #396BC3 100%);
}

.cv__mail-icon img {
  width: 30px;
  margin: 5px 0 0 0;
}

.cv__mail-text {
  font-size: 37px;
  margin-right: 25px;
}


.cv__line {
  padding: 17px 0 16px;
  background: linear-gradient(0deg, #04b842 0%, #0bd06a 100%);
}

.cv__line-icon img {
  width: 31px;
  margin: 7px 0 0;
}

.cv__line-text {
  margin-right: 25px;
}

.cv__line-text img {
  width: 175px;
}

@media screen and (max-width: 768px) {
  .cv__link {
    gap: 3.2vw;
    padding: 4vw 0;
  }

  .cv__btn {
    width: 44.8vw;
    gap: 1.333vw;
    box-shadow: rgba(0, 0, 0, 0.6) 0 0.533vw 0.533vw;
  }

  .cv__btn::before {
    width: 2.667vw;
    height: 4.533vw;
    right: 2.133vw;
  }

  .cv__mail {
    padding: 4.1vw 0 4.35vw;
  }

  .cv__mail-icon img {
    width: 4.8vw;
    margin: 0.533vw 0 0;
  }

  .cv__mail-text {
    font-size: 4.8vw;
    margin-right: 3.467vw;
  }

  .cv__line {
    padding: 4vw 0 3.733vw;
  }

  .cv__line-icon img {
    width: 5.067vw;
    margin: 0.8vw 0 0;
  }

  .cv__line-text {
    margin-right: 4.2vw;
  }

  .cv__line-text img {
    width: 24.333vw;
  }

}

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

  .cv__mail:hover,
  .cv__line:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 1000px) {
  .cv__status {
    padding: 1vw 0 2vw 8vw;
    font-size: 3.2vw
  }

  .cv__status::before {
    width: 6.2rem;
    height: 3rem;
    bottom: -8px
  }

  .cv__status .number {
    font-size: 1.5em
  }

  .cv__touch {
    width: 92vw;
    margin: 0 auto;
    position: relative
  }

  .cv__touch img {
    width: 10vw;
    top: -10vw
  }

  .cv__inner {
    padding: 2vw 0 1.1vw
  }

  .cv__number {
    width: 560px
  }

  .cv__text {
    width: 28vw
  }
}

@media screen and (max-width: 768px) {
  .cv {
    position: relative
  }

  .cv__status {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-style: normal;
    width: 100vw;
    padding: 2vw 5vw 2vw 0;
    color: #535353;
    font-size: 3.5vw;
    text-align: right
  }

  .cv.type2 .cv__status {
    padding: 2vw 7vw 2vw 0;
  }
  .cv__status::before {
    background-image: url("../images/cv_status.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    width: 10vw;
    height: 5vw;
    content: "";
    display: inline-block;
    position: relative;
    bottom: -0.5vw
  }

  .cv__status-wrap {
    background-image: url("../images/sp/cv.jpg");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100vw auto
  }

  .cv__status .number {
    color: #cc2929;
    font-size: 5vw
  }

  .cv__touch {
    width: 10.9vw;
    position: absolute;
    top: 5vw;
    left: 3vw
  }

  .cv__touch img {
    position: static
  }

  .cv__inner {
    width: 100vw;
    padding: 2vw 0 1vw;
    display: block;
    position: relative
  }

  .cv__number {
    padding: 3vw;
    max-width: 85vw;
    margin: 7.467vw auto 1.867vw;
  }

  .cv.type2 .cv__number {
    margin: 7.467vw auto 1.867vw;
  }
  .cv__number a {
    transition: all 0.2s ease-in-out
  }

  .cv__number a:hover {
    opacity: 1
  }

  .cv__number a .number {
    font-size: 8.533vw;
    text-align: center
  }

  .cv__number a .number::before {
    width: 10.667vw;
    height: 10.667vw;
    margin: 0 .5vw -2vw 0
  }

  .cv__number a .number::after {
    width: 8vw;
    height: 8vw
  }

  .cv.type2 .cv__text{
    display: block;
  }
  .cv__text-01 {
    width: 100vw;
    padding: 2vw 0;
    position: absolute;
    top: 0
  }

  .cv__text-01 img {
    width: 100%;
    height: auto
  }

  .cv__text-02 {
    width: 100vw;
    padding: 0.5vw 0 2vw
  }

  .cv__text-02 img {
    width: 100%;
    height: auto
  }
  .cv__text-03{
    display: none;
  }
}

.header__inner {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0
}

@media screen and (max-width: 1000px) {
  .header__inner {
    width: 90vw;
    max-width: none
  }

  .header__inner img {
    width: 95%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .header__inner {
    max-width: none
  }
}

.header__link {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header__mail {
  width: 190px;
  padding: 12px 0 11px;
  background: linear-gradient(0deg, #1F4799 0%, #396BC3 100%);
  box-shadow: rgba(0, 0, 0, 0.6) 0 3px 3px;
  text-align: center;
  transition: .3s;
}

.header__mail {
  font-size: 26px;
  color: #fff;
  font-weight: 700;
}

.header__mail img {
  width: 25px;
  display: block;
  margin: 8px auto 0;
}

.header__line {
  width: 190px;
  padding: 7px 0 6px;
  background: linear-gradient(0deg, #04b842 0%, #0bd06a 100%);
  box-shadow: rgba(0, 0, 0, 0.6) 0 3px 3px;
  text-align: center;
  transition: .3s;
}

.header__line-text img {
  width: 151px;
  margin: 5px auto 0;
}

.header__line-icon img {
  width: 26px;
  display: block;
  margin: 7px auto 0;
}

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

  .header__mail:hover,
  .header__line:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 768px) {
  .header__link {
    gap: 2.667vw;
  }

  .header__mail {
    width: 22.667vw;
    padding: 1.6vw 0 1.067vw;
    box-shadow: rgba(0, 0, 0, 0.6) 0 0.533vw 0.533vw;
  }

  .header__mail {
    font-size: 3.2vw;
  }

  .header__mail img {
    width: 2.933vw;
    margin: 0.8vw auto 0;
  }

  .header__line {
    width: 22.667vw;
    padding: 1.067vw 0 0.533vw;
    box-shadow: rgba(0, 0, 0, 0.6) 0 0.533vw 0.533vw;
  }

  .header__line-text img {
    width: 18.6vw;
    margin: 0.2vw auto 0;
  }

  .header__line-icon img {
    width: 3.2vw;
    margin: 0.8vw auto 0;
  }

}

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

  .header__mail,
  .header__line {
    height: 9vw;
    padding: 0;
    align-content: center;
  }
}


.visual__catch {
  background-image: url("../images/visual.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 645px;
  overflow: hidden;
  position: relative
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .visual__catch {
    background-image: url("../images/visual@2x.webp")
  }
}

.visual__catch-01 {
  width: 940px;
  margin: 0 auto;
  position: relative;
  z-index: 100
}

.visual__catch-02 {
  width: 100%;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 90
}

.visual__catch-02::before {
  background-image: url("../images/visual_catch02_2.webp");
  background-position: left top;
  background-repeat: no-repeat;
  width: 100%;
  height: 645px;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 80
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .visual__catch-02::before {
    background-image: url("../images/visual_catch02_2@2x.webp")
  }
}

.visual__catch-03 {
  width: 940px;
  margin: 0 auto;
  position: relative;
  top: -645px;
  z-index: 50
}

.visual__deals {
  background: #308cf3;
  padding: 20px;
  text-align: center
}

.visual__feature {
  background: linear-gradient(180deg, #fff, #a3d9f9);
  text-align: center
}

@media screen and (max-width: 1000px) {
  .visual__catch {
    width: 100vw;
    height: auto;
    position: relative
  }

  .visual__catch-01 {
    width: auto;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 100
  }

  .visual__catch-02 {
    width: 100%
  }

  .visual__catch-02::before {
    width: 100%;
    height: 56vw
  }

  .visual__catch-03 {
    width: 100%;
    position: absolute;
    top: 0
  }

  .visual__catch img {
    width: 100%;
    height: auto
  }

  .visual__deals {
    padding: 2vw
  }
}

@media screen and (max-width: 768px) {
  .visual__catch {
    background-image: url("../images/sp/visual.webp");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: auto;
    position: relative
  }

  .visual__catch-01 {
    width: auto;
    margin: 0
  }

  .visual__catch-02 {
    width: auto;
    position: absolute;
    top: 0;
    left: 0
  }

  .visual__catch-02::before {
    display: none
  }

  .visual__catch-03 {
    width: auto;
    position: absolute;
    top: 0;
    left: 0
  }
}

.contents__lightblue {
  background-image: url("../images/contents_lightblue.jpg");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .contents__lightblue {
    background-image: url("../images/contents_lightblue@2x.jpg")
  }
}

@media screen and (max-width: 768px) {
  .contents__lightblue {
    background-image: url("../images/sp/contents_lightblue.jpg");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto
  }
}

.contents__darkblue {
  background-image: url("../images/contents_darkblue.jpg");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .contents__darkblue {
    background-image: url("../images/contents_darkblue@2x.jpg")
  }
}

@media screen and (max-width: 768px) {
  .contents__darkblue {
    background-image: url("../images/sp/contents_darkblue.jpg");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto
  }
}

.contents__2tone {
  background-image: url("../images/contents_2tone.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

@media screen and (max-width: 768px) {
  .contents__2tone {
    background-color: #dff1f4;
    background-image: url("../images/sp/contents_2tone.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto
  }
}

.slider {
  padding: 30px 0
}

.slider__heading {
  margin: 0 auto;
  padding: 0 0 30px;
  text-align: center
}

.slider .swiper-container {
  background: #308cf3;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 10px 0
}

.slider .swiper-slide img {
  width: 100%;
  height: auto
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
  .slider .swiper-container {
    overflow: hidden
  }

  .slider .swiper-wrapper {
    display: flex;
    justify-content: space-between
  }

  .slider .swiper-slide {
    width: calc((100% - (10px * 9)) / 8);
    padding: 0 5px
  }
}

@media screen and (max-width: 768px) {
  .slider {
    padding: 0 0 20px
  }

  .slider__heading {
    padding: 0
  }

  .slider .swiper-container {
    padding: 6px 0
  }
}

.campaign {
  background-color: #dff1f4;
  padding: 30px 0;
  text-align: center
}

@media screen and (max-width: 768px) {
  .campaign {
    padding: 0
  }
}

.reason__heading {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 60px 0 0;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .reason__heading {
    width: 90vw;
    max-width: none
  }

  .reason__heading img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .reason__heading {
    max-width: none
  }
}

.reason__box {
  background-color: #308bf2;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 60%;
  width: calc((940px - 60px) / 3);
  margin-bottom: 30px;
  border-radius: 10px
}

.reason__box-wrap {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

@media screen and (max-width: 1000px) {
  .reason__box-wrap {
    width: 90vw;
    max-width: none
  }

  .reason__box-wrap img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .reason__box-wrap {
    max-width: none
  }
}

.reason__box-01 {
  background-image: url("../images/reason01.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-01 {
    background-image: url("../images/reason01@2x.png")
  }
}

.reason__box-01 .heading::before {
  content: "理由1"
}

.reason__box-02 {
  background-image: url("../images/reason02.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-02 {
    background-image: url("../images/reason02@2x.png")
  }
}

.reason__box-02 .heading::before {
  content: "理由2"
}

.reason__box-03 {
  background-image: url("../images/reason03.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-03 {
    background-image: url("../images/reason03@2x.png")
  }
}

.reason__box-03 .heading::before {
  content: "理由3"
}

.reason__box-04 {
  background-image: url("../images/reason04.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-04 {
    background-image: url("../images/reason04@2x.png")
  }
}

.reason__box-04 .heading::before {
  content: "理由4"
}

.reason__box-05 {
  background-image: url("../images/reason05.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-05 {
    background-image: url("../images/reason05@2x.png")
  }
}

.reason__box-05 .heading::before {
  content: "理由5"
}

.reason__box-06 {
  background-image: url("../images/reason06.png")
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .reason__box-06 {
    background-image: url("../images/reason06@2x.png")
  }
}

.reason__box-06 .heading::before {
  content: "理由6"
}

.reason__box .heading,
.reason__box .text {
  line-height: 1.7em
}

.reason__box .heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  padding: 15px 0;
  color: #fffc0a;
  font-size: 1.2rem;
  text-align: center
}

.reason__box .heading::before {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
  width: 30%;
  margin: 0 auto 15px;
  padding: 10px 0;
  border-radius: 10px;
  line-height: 1em;
  color: #308bf2;
  font-size: 0.8rem;
  text-align: center;
  display: block
}

.reason__box .text {
  padding: 0 15px 30px;
  color: #fff
}

@media screen and (max-width: 1000px) {
  .reason__heading {
    padding: 6vw 0 0
  }

  .reason__box {
    width: calc((90vw - 6vw) / 3);
    margin-bottom: 6vw;
    border-radius: 1vw
  }

  .reason__box .heading {
    padding: 1.5vw 0;
    font-size: 1.2rem
  }

  .reason__box .heading::before {
    width: 30%;
    margin: 0 auto 1.5vw;
    padding: 1vw 0;
    border-radius: 1vw;
    line-height: 1em;
    font-size: 0.8rem
  }

  .reason__box .text {
    padding: 0 1.5vw 3vw
  }
}

@media screen and (max-width: 768px) {
  .reason {
    padding: 4vw 0
  }

  .reason__heading {
    width: 100vw;
    padding: 0
  }

  .reason__box {
    background-color: #308bf2;
    background-repeat: no-repeat;
    background-size: auto 40vw;
    width: 90vw;
    margin: 4vw 0 0;
    border-radius: 10px
  }

  .reason__box-wrap {
    display: block
  }

  .reason__box-01 {
    background-image: url("../images/sp/reason01.png");
    background-position: right bottom;
    margin-top: 0
  }

  .reason__box-02 {
    background-image: url("../images/sp/reason02.png");
    background-position: right bottom
  }

  .reason__box-03 {
    background-image: url("../images/sp/reason03.png");
    background-position: left bottom
  }

  .reason__box-04 {
    background-image: url("../images/sp/reason04.png");
    background-position: right bottom
  }

  .reason__box-05 {
    background-image: url("../images/sp/reason05.png");
    background-position: left bottom
  }

  .reason__box-06 {
    background-image: url("../images/sp/reason06.png");
    background-position: right bottom
  }

  .reason__box .heading,
  .reason__box .text {
    line-height: 1.7em
  }

  .reason__box .heading {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-style: normal;
    padding: 4vw 0 2vw;
    color: #fffc0a;
    font-size: 1.2rem;
    text-align: center
  }

  .reason__box .heading::before {
    display: none
  }

  .reason__box .text {
    padding: 0 4vw 8vw;
    color: #fff
  }
}

.price__heading {
  padding: 60px 0;
  text-align: center
}

.price__list {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

@media screen and (max-width: 1000px) {
  .price__list {
    width: 90vw;
    max-width: none
  }

  .price__list img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .price__list {
    max-width: none
  }
}

.price__list-item {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  background: #333;
  width: calc((940px - 60px) / 3);
  border-radius: 10px;
  line-height: 1.7em;
  color: #fff;
  text-align: center;
  font-size: 1.33rem;
  overflow: hidden
}

.price__list-item span {
  padding: 10px;
  display: inline-block
}

.price__list-item04 {
  margin: 30px 30px 0 auto
}

.price__list-item05 {
  margin: 30px auto 0 0
}

.price__list img {
  width: 100%;
  height: auto
}

.price__text {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 30px 0;
  line-height: 1.7em;
  color: black;
  font-size: 0.7rem
}

@media screen and (max-width: 1000px) {
  .price__text {
    width: 90vw;
    max-width: none
  }

  .price__text img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .price__text {
    max-width: none
  }
}

@media screen and (max-width: 1000px) {
  .price__heading {
    padding: 6vw 0
  }

  .price__list-item {
    width: calc((90vw - 6vw) / 3)
  }

  .price__list-item04 {
    margin: 3vw 3vw 0 auto
  }

  .price__list-item05 {
    margin: 3vw auto 0 0
  }

  .price__text {
    padding: 3vw 0;
    line-height: 1.7em
  }
}

@media screen and (max-width: 768px) {
  .price__heading {
    padding: 6vw 0 2vw
  }

  .price__list {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
  }

  .price__list-item {
    width: calc(50% - 2vw);
    height: fit-content;
    margin: 4vw 0 0;
    line-height: 1.7em;
    font-size: 1.2rem
  }

  .price__list-item span {
    padding: 1vw
  }

  .price__text {
    padding: 3vw 0;
    line-height: 1.7em;
    font-size: 0.7rem
  }
}

.merit {
  padding-bottom: 60px
}

.merit__heading {
  padding: 60px 0 20px;
  text-align: center
}

.merit__list {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

@media screen and (max-width: 1000px) {
  .merit__list {
    width: 90vw;
    max-width: none
  }

  .merit__list img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .merit__list {
    max-width: none
  }
}

.merit__list-01 {
  width: 100%;
  padding: 0 0 30px
}

.merit__list-02,
.merit__list-03 {
  width: calc((940px - 30px) / 2)
}

.merit__list img {
  width: 100%;
  height: auto
}

@media screen and (max-width: 1000px) {
  .merit {
    padding-bottom: 6vw
  }

  .merit__heading {
    padding: 6vw 0 2vw
  }

  .merit__list-01 {
    padding: 0 0 3vw
  }

  .merit__list-02,
  .merit__list-03 {
    width: calc((90vw - 3vw) / 2)
  }
}

@media screen and (max-width: 768px) {
  .merit {
    padding: 8vw 0 4vw
  }

  .merit__heading {
    padding: 0 0 2vw
  }

  .merit__list {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between
  }

  .merit__list-01 {
    width: 100%;
    padding: 1vw 0 4vw
  }

  .merit__list-02,
  .merit__list-03 {
    width: calc(50% - 2vw)
  }
}

.flow {
  padding: 0 0 60px
}

.flow__heading {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .flow__heading {
    width: 90vw;
    max-width: none
  }

  .flow__heading img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .flow__heading {
    max-width: none
  }
}

.flow__list {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

@media screen and (max-width: 1000px) {
  .flow__list {
    width: 90vw;
    max-width: none
  }

  .flow__list img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .flow__list {
    max-width: none
  }
}

.flow__list::after {
  content: "";
  width: calc((100% - 60px) / 3);
  display: block
}

.flow__list-item {
  width: calc((100% - 60px) / 3);
  margin: 30px 0 0;
  border-radius: 10px;
  position: relative
}

.flow__list-item::after {
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
  display: block;
  position: absolute;
  top: calc((100% - 20px) / 2);
  left: 100%
}

.flow__list-item01 {
  background: #30d2f2
}

.flow__list-item01::after {
  border-left-color: #30d2f2
}

.flow__list-item02 {
  background: #308bf2
}

.flow__list-item02::after {
  border-left-color: #308bf2
}

.flow__list-item03 {
  background: #245ac9
}

.flow__list-item03::after {
  border-left-color: #245ac9
}

.flow__list-item04 {
  background: #1f4799
}

.flow__list-item04::after {
  border-left-color: #1f4799
}

.flow__list-item05 {
  background: #ff6161;
  width: calc((100% - 60px) / 3*2 + 30px)
}

.flow__list .heading,
.flow__list .text {
  line-height: 1.7em;
  color: #fff
}

.flow__list .heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  padding: 20px 15px 15px;
  font-size: 1.2rem;
  text-align: center
}

.flow__list .text {
  padding: 0 15px 30px
}

.flow__list .image {
  padding: 0 0 30px;
  text-align: center
}

.flow__list .image img {
  max-width: 550px
}

@media screen and (max-width: 1000px) {
  .flow {
    padding: 0 0 6vw
  }

  .flow__heading {
    padding: 1vw 0
  }

  .flow__list-item {
    width: calc((90vw - 6vw) / 3);
    margin: 3vw 0 0;
    border-radius: 1vw
  }

  .flow__list-item::after {
    border-top-width: 2vw;
    border-bottom-width: 2vw;
    border-left-width: 2vw;
    top: calc((100% - 2vw) / 2)
  }

  .flow__list .heading {
    padding: 1.5vw 0;
    font-size: 1.2rem
  }

  .flow__list .text {
    padding: 0 1.5vw 3vw
  }
}

@media screen and (max-width: 768px) {
  .flow {
    padding: 0 0 4vw
  }

  .flow__heading {
    padding: 1vw 0 2vw
  }

  .flow__list {
    display: block
  }

  .flow__list-item {
    width: auto;
    margin: 3vw 0 0;
    border-radius: 1vw
  }

  .flow__list-item::after {
    content: "";
    border-top: 2vw solid transparent;
    border-right: 2vw solid transparent;
    border-left: 2vw solid transparent;
    border-bottom: none;
    display: block;
    position: absolute;
    top: 100%;
    left: calc((100% - 2vw) / 2)
  }

  .flow__list-item01::after {
    border-top-color: #30d2f2
  }

  .flow__list-item02::after {
    border-top-color: #308bf2
  }

  .flow__list-item03::after {
    border-top-color: #245ac9
  }

  .flow__list-item04::after {
    border-top-color: #1f4799
  }

  .flow__list .heading,
  .flow__list .text {
    line-height: 1.7em
  }

  .flow__list .heading {
    padding: 4vw 0 2vw;
    font-size: 1.2rem
  }

  .flow__list .text {
    padding: 0 4vw 8vw
  }
}

.interview {
  padding: 0 0 60px
}

.interview__heading {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .interview__heading {
    width: 90vw;
    max-width: none
  }

  .interview__heading img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .interview__heading {
    max-width: none
  }
}

.interview__box {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 30px;
  border-radius: 10px
}

@media screen and (max-width: 1000px) {
  .interview__box {
    width: 90vw;
    max-width: none
  }

  .interview__box img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .interview__box {
    max-width: none
  }
}

.interview__box-01 {
  margin-top: 0
}

.interview__box .image {
  padding-top: 30px;
  text-align: center
}

.interview__box .text {
  padding: 30px 60px 60px;
  line-height: 1.7em
}

.interview__box .empashis {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  background: linear-gradient(transparent 0%, transparent 10%, #ffd74c 10%, #ffd74c 90%, transparent 90%, transparent 100%)
}

@media screen and (max-width: 1000px) {
  .interview {
    padding: 0 0 6vw
  }

  .interview__heading {
    padding: 6vw 0
  }

  .interview__box {
    margin-top: 3vw;
    border-radius: 1vw
  }

  .interview__box-01 {
    margin-top: 0
  }

  .interview__box .image {
    padding: 3vw 0 0
  }

  .interview__box .text {
    padding: 2vw 6vw 6vw
  }

  .interview__box .empashis {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(transparent 0%, transparent 10%, #ffd74c 10%, #ffd74c 90%, transparent 90%, transparent 100%)
  }
}

@media screen and (max-width: 768px) {
  .interview {
    padding: 4vw 0
  }

  .interview__heading {
    padding: 0
  }

  .interview__box {
    background-color: #fff;
    margin-top: 4vw;
    border-radius: 10px
  }

  .interview__box .image {
    padding: 0
  }

  .interview__box .text {
    padding: 0 4vw 4vw;
    line-height: 1.7em
  }

  .interview__box .empashis {
    background: linear-gradient(transparent 0%, transparent 10%, #ffd74c 10%, #ffd74c 90%, transparent 90%, transparent 100%)
  }
}

.area {
  background-color: #dff1f4;
  padding: 60px 0
}

.area__heading {
  width: 100%;
  max-width: 940px;
  margin: 0 auto 2vw;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .area__heading {
    width: 90vw;
    max-width: none
  }

  .area__heading img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .area__heading {
    max-width: none
  }
}

.area__image {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  text-align: left
}

@media screen and (max-width: 1000px) {
  .area__image {
    width: 90vw;
    max-width: none
  }

  .area__image img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .area__image {
    max-width: none
  }
}

.area__text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  background-color: #fff;
  width: 700px;
  padding: 15px 0;
  border: 1px solid #333;
  border-radius: 100px;
  font-size: 1.33rem;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .area__text {
    width: 90vw;
    max-width: none
  }

  .area__text img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .area__text {
    max-width: none
  }
}

@media screen and (max-width: 1000px) {
  .area {
    padding: 6vw 0
  }

  .area__text {
    width: 70vw;
    padding: 2vw 0
  }
}

@media screen and (max-width: 768px) {
  .area {
    background-color: #dff1f4;
    padding: 4vw 0
  }

  .area__image {
    margin: -1vw auto 2vw
  }

  .area__text {
    background-color: #fff;
    padding: 2vw 0;
    border: 1px solid #333;
    border-radius: 100px;
    font-size: 1rem;
    text-align: center
  }
}

.message {
  padding: 60px 0
}

.message__inner {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  background-color: #fff;
  background-image: url("../images/message_top.png"), url("../images/message_bottom.png"), url("../images/message.png");
  background-position: center top, center bottom, center;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: 100% auto;
  text-align: left
}

@media screen and (max-width: 1000px) {
  .message__inner {
    width: 90vw;
    max-width: none
  }

  .message__inner img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .message__inner {
    max-width: none
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .message__inner {
    background-image: url("../images/message_top@2x.png"), url("../images/message_bottom@2x.png"), url("../images/message@2x.png")
  }
}

.message__heading {
  margin: 0 auto;
  padding: 100px 0 40px;
  text-align: center
}

.message__list {
  padding: 0 60px
}

.message__list .heading,
.message__list .text {
  line-height: 1.7em
}

.message__list .heading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  padding: 0 0 10px;
  font-size: 1.2rem
}

.message__list .text {
  padding: 0 0 40px
}

.message__button {
  width: 940px;
  margin: 0 auto;
  padding: 0 0 80px
}

.message__button a {
  transition: all 0.2s ease-in-out;
  background-color: #ffb93d;
  background: linear-gradient(180deg, #ffb93d, #ff971b);
  width: 50%;
  height: 80px;
  margin: 0 auto;
  border-radius: 10px;
  line-height: 80px;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  display: block;
  position: relative;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}

.message__button a::before {
  background-image: url("../images/arrow.svg");
  background-position: calc(100% - 30px) 50%;
  background-repeat: no-repeat;
  background-size: auto 1em;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2
}

.message__button a:hover {
  opacity: 0.7
}

@media screen and (max-width: 1000px) {
  .message {
    padding: 6vw 0;
    position: relative
  }

  .message__heading {
    padding: 10vw 6vw 4vw
  }

  .message__list {
    padding: 0 6vw
  }

  .message__list .heading {
    padding: 0 0 1vw;
    font-size: 1.2rem
  }

  .message__list .text {
    padding: 0 0 4vw
  }

  .message__button {
    width: 100%;
    padding: 0 0 8vw
  }
}

@media screen and (max-width: 768px) {
  .message {
    padding: 0
  }

  .message__inner {
    background-image: none;
    background: #fff;
    border-image: url("../images/sp/message.png") 120;
    border-style: solid;
    border-width: 40px;
    width: 100vw;
    text-align: left
  }

  .message__heading {
    padding: 0 0 4vw
  }

  .message__list {
    padding: 0
  }

  .message__list .heading,
  .message__list .text {
    line-height: 1.7em
  }

  .message__list .heading {
    padding: 0 0 1vw;
    font-size: 1.2rem
  }

  .message__list .text {
    padding: 0 0 4vw
  }

  .message__button {
    width: 100%;
    padding: 0
  }

  .message__button a {
    height: 10vw;
    line-height: 10vw;
    font-size: 1rem
  }
}

.copyright {
  background-color: #3a3a3a;
  color: #fff;
  padding: 30px 0 237px;
  text-align: center
}

@media screen and (max-width: 1000px) {
  .copyright {
    padding: 3vw 0 23.7vw
  }
}

@media screen and (max-width: 768px) {
  .copyright {
    background-color: #3a3a3a;
    color: #fff;
    padding: 4vw 0 49vw;
    font-size: 0.86rem;
    text-align: center
  }
}

.floating {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200
}

.floating .cv {
  background-color: #ff6d2d
}

.wrap#company {
  min-height: 100vh;
  display: flex;
  flex-flow: column
}

.wrap#company .header {
  height: auto
}

.wrap#company .contents {
  flex: 1 auto
}

.wrap#company .copyright {
  text-align: center
}

@media screen and (max-width: 1000px) {
  .wrap#company .copyright {
    padding: 3vw 0 25vw
  }
}

@media screen and (max-width: 768px) {
  .wrap#company .copyright {
    padding: 4vw 0 44vw
  }
}

.company {
  padding: 120px 0 0
}

.company__heading {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-style: normal;
  width: 700px;
  font-size: 1.22rem
}

@media screen and (max-width: 1000px) {
  .company__heading {
    width: 90vw;
    max-width: none
  }

  .company__heading img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .company__heading {
    max-width: none
  }
}

.company__list {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  width: 700px;
  font-size: 0.8rem;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

@media screen and (max-width: 1000px) {
  .company__list {
    width: 90vw;
    max-width: none
  }

  .company__list img {
    width: 100%;
    height: auto
  }
}

@media screen and (max-width: 768px) {
  .company__list {
    max-width: none
  }
}

.company__list-01,
.company__list-02,
.company__list-03,
.company__list-04,
.company__list-05,
.company__list-06 {
  width: calc(50% - 15px);
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  text-align: left
}

.company__list-01 {
  width: 100%
}

.company__list .heading,
.company__list .text {
  padding-top: 30px
}

.company__list .heading {
  width: calc(7em + 15px)
}

.company__list .text {
  width: calc(100% - (7em + 15px))
}

.company__list-01 .heading,
.company__list-02 .heading,
.company__list-04 .heading,
.company__list-06 .heading {
  width: calc(4em + 15px)
}

.company__list-01 .text,
.company__list-02 .text,
.company__list-04 .text,
.company__list-06 .text {
  width: calc(100% - (4em + 15px))
}

.company__button {
  width: 940px;
  margin: 0 auto;
  padding: 120px 0
}

.company__button a {
  transition: all 0.2s ease-in-out;
  background-color: #ffb93d;
  background: linear-gradient(180deg, #ffb93d, #ff971b);
  width: 50%;
  height: 80px;
  margin: 0 auto;
  border-radius: 10px;
  line-height: 80px;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  position: relative;
  display: block;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}

.company__button a::before {
  background-image: url("../images/arrow.svg");
  background-position: calc(100% - 30px) 50%;
  background-repeat: no-repeat;
  background-size: auto 1em;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2
}

.company__button a:hover {
  opacity: 0.7
}

@media screen and (max-width: 1000px) {
  .company {
    padding: 8vw 0 0
  }

  .company__heading {
    width: 70vw
  }

  .company__list {
    width: 70vw
  }

  .company__list-01,
  .company__list-02,
  .company__list-03,
  .company__list-04,
  .company__list-05,
  .company__list-06 {
    width: calc(50% - 2vw)
  }

  .company__list-01 {
    width: 100%
  }

  .company__list .heading,
  .company__list .text {
    padding-top: 4vw
  }

  .company__list .heading {
    width: calc(7em + 2vw)
  }

  .company__list .text {
    width: calc(100% - (7em + 2vw))
  }

  .company__list-01 .heading,
  .company__list-02 .heading,
  .company__list-04 .heading,
  .company__list-06 .heading {
    width: calc(4em + 2vw)
  }

  .company__list-01 .text,
  .company__list-02 .text,
  .company__list-04 .text,
  .company__list-06 .text {
    width: calc(100% - (4em + 2vw))
  }

  .company__button {
    width: 100%;
    padding: 8vw 0
  }
}

@media screen and (max-width: 768px) {
  .company {
    padding: 8vw 0 0
  }

  .company__heading {
    width: 90vw;
    font-size: 0.86rem
  }

  .company__list {
    width: 90vw;
    font-size: 0.86rem;
    display: block
  }

  .company__list-01,
  .company__list-02,
  .company__list-03,
  .company__list-04,
  .company__list-05,
  .company__list-06 {
    width: auto
  }

  .company__list .heading,
  .company__list .text {
    padding-top: 2vw
  }

  .company__list .heading {
    width: calc(30% - 2vw)
  }

  .company__list .text {
    width: 70%
  }

  .company__button {
    width: 100%;
    padding: 8vw 0
  }

  .company__button a {
    height: 10vw;
    line-height: 10vw;
    font-size: 1rem
  }

  .company__button a::before {
    background-position: calc(100% - 15px) 50%;
    background-size: auto 1em;
    height: 10vw
  }
}
/* company index.html */
.header__text .tel_txt {
  font-size: 3.1rem;
  color: #cc2929;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .header__text .tel_txt {
    font-size: 1.56rem;
  }
}