@charset "UTF-8";
/* ----------------------------

  トップページ

  1. PCサイズ（521px以上）
    1.1 ヘッダー

    1.2 main
      1.2.1 アコーディオンメニュー
      1.2.2 スクロールトップボタン
      1.2.3 ページトップ
      1.2.4 ABOUT
      1.2.5 MENU
      1.2.6 INFORMATION
      1.2.7 ACCESS

    1.3 フッター

  2. SPサイズ（520px以下）
    2.1 ヘッダー

    2.2 main
      2.2.1 スマホメニュー
      2.2.2 スクロールトップボタン
      2.2.3 電話番号等の固定表示
      2.2.4 ページトップ
      2.2.5 ABOUT
      2.2.6 MENU
      2.2.7 INFORMATION
      2.2.8 ACCESS

    2.3 フッター

---------------------------- */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Mogra&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Molengo&display=swap");
*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

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

  共通設定

  1. 変数
  2. mixin
  3. フォント設定など

---------------------------- */
/* ---------------------------- */
/* 1. 変数
/* ---------------------------- */
/* ---------------------------- */
/* 2. mixin
/* ---------------------------- */
/* ---------------------------- */
/* 3. フォント設定など
/* ---------------------------- */
@font-face {
  font-family: "Noto Sans JP_r";
  src: url(../font/Noto_Sans_Regular.woff) format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Noto Sans JP_m";
  src: url(../font/Noto_Sans_Medium.woff) format("woff");
  font-weight: 500;
}
body {
  position: relative;
  background-color: #fff;
  color: #222;
  font-size: 14px;
  font-family: "Noto Sans JP_r";
  letter-spacing: 0.05em;
}

img {
  display: block;
}

main {
  position: relative;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 640px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



/* ---------------------------- */
/* 1. PCサイズ
/* ---------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 273px;
  height: 100vh;
  padding: 40px 0;
  text-align: center;
}
header > p {
  font-size: 12px;
  font-family: "Noto Sans JP_m";
  line-height: 1.3;
}
header h1 {
  width: 100%;
  max-width: 130px;
  margin: 40px 0;
}
header h1 img {
  width: 100%;
}
header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 40px 0 0 0;
}
header nav > ul li a {
  position: relative;
  display: block;
  padding: 12px 0 6px;
  font-size: 18px;
  letter-spacing: 1.8px;
  font-family: "Noto Sans JP_r";
  transition: 1s;
}
header nav > ul li a::before {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  width: 100%;
  height: 100%;
}

header nav > ul li a:hover {
  color: #00b3a7;
}

header nav > ul li + li {
  margin: 32px 0 0 0;
}

header nav > div {
  margin: 80px 0 0 0;
  color: #fff;
}

header .sns{
  width: 200px;
  border-radius: 5px;
  border: solid 1px #2d2d2d;
}
header .sns:hover{
  background: #f4f4f4;
}

header .sns a {
  display: flex;
  justify-content: end;
  position: relative;
}

header .sns a span{
position: absolute;
font-family: "Radio Canada", sans-serif;
font-size: 14px;
color: #222;
top: 50%;
left: 10%;
transform : translateY(-50%);
}

header .sns a img{
  margin-left: 120px;
  padding:6px 10px;
  border-left: solid 1px #2d2d2d;
}

header .sns a p{
  font-size: 14px;
}

header > div {
  font-family: "Noto Sans JP_r";
  margin-top: 60px;
  text-align: left;
}

header > div h3 {
  font-size: 16px;
  font-weight: 500;
}

header > div p {
  padding: 8px 0;
  line-height: 1.6;
  font-size: 12px;
}

.header--btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  padding: 12px 25px 12px 57px;
  border-radius: 40px;
  width: 200px;
  height: 48px;
  position: relative;
  font-family: "Noto Sans JP_r";
  transition: 0.3s;
  background-image: linear-gradient(135deg, rgba(0, 223, 184, 1), rgba(0, 179, 148, 1));
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out; /*アニメーションの指定*/
}

.header--btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 58%;
  left: 24px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: no-repeat url("../image/icon/mail.svg");
  background-size: 100%;
  content: "";
}

.header--btn:hover {
  box-shadow: 0 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  background-position: 99% 50%;
}

@media screen and (max-width: 640px) {
  header nav > div ul li:first-child::before {
    width: 15px;
    height: 15px;
    left: 0;
  }
}

header nav > div ul li:last-child::before {
  position: absolute;
  top: 58%;
  left: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: no-repeat url("../image/icon/mail.svg");
  background-size: 100%;
  content: "";
}

@media screen and (max-width: 640px) {
 /* header nav > div ul li:last-child::before {
    width: 15px;
    height: 15px;
    left: 0;
  } */

  header > div {
    display: none;
  }
}
/* header nav > div ul li + li {
  margin: 8px 0 0 0;
} */

@media screen and (max-width: 980px) {
  header {
    width: 200px;
  }
}

/*
*スクロールボタン
 */
#toTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#toTop img {
  width: 14px;
  height: 14px;
  position: relative;
}

#toTop::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #ffffff, transparent);
}

#toTop.show {
  opacity: 1;
  visibility: visible;
}

#toTop.show.fixed {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
#toTop.show:hover {
  opacity: 0.7;
}

/*
*TOP
 */
.top {
  position: relative;
  z-index: -1;
  width: calc(100% - 273px);
  margin: 0 0 0 273px;
  background-image: url(../image/image/hero.webp);
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(100vh - 100px);
  position: relative;
  margin-bottom: 25px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.top:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.55;
  background-image: linear-gradient(109deg, rgba(69, 132, 235, 0.40) 0%, rgba(63, 152, 213, 0.20) 50.52%, rgba(57, 172, 191, 0.10) 100%);
}

.hero__text {
  position: absolute;
  top: 20%;
  left: 12%;
  z-index: 2;
}

.hero__text h1 {
  color: #fff;
  font-size: 56px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 800;
  line-height: 1.5;
}

.hero__text p {
  display: block;
  color: #fff;
  font-size: 20px;
  font-family: "Noto Sans JP_r";
  font-weight: 600;
  text-align: left;
  padding-top: 16px;
}

@media screen and (max-width: 1400px) {
  .hero__text {
    left: 15%;
  }
}

@media screen and (max-width: 1080px) {
  .hero__text {
    top: 120px;
    left: 5%;
  }
}

@media screen and (max-width: 980px) {
  .top {
    width: calc(100% - 200px);
    margin: 0 0 0 200px;
  }
}

@media screen and (max-width: 840px) {
  .hero__text h1 {
    font-size: 40px;
  }
}

@media screen and (max-width: 768px) {
  .top::before {
    width: 100%;
  }
  .hero__text h1 {
    font-size: 36px;
    left: 3px;
  }
  .hero__text p {
    padding: 0 20px 0 0;
  }
}

@media screen and (max-width: 640px) {
  .top {
    height: 500px;
    position: relative;
    background-image: url(../image/image/SP_hero.webp);
  }

  .hero__text {
    top: 80px;
  }

  .hero__text h1 {
    font-size: 28px;
    letter-spacing: 0.03em;
  }

  .hero__text p {
    font-size: 14px;
  }
}

/*
*Mission
 */

.mission {
  width: calc(100% - 273px);
  margin: 50px 0 80px 273px;
}

.mission > div {
  background-color: #fbfaf9;
  max-width: 1040px;
  padding: 50px;
  margin: 0 auto;
  border-radius: 20px;

}

.mission > div h2 {
  color: #222;
  font-size: 12px;
  width: 100%;
  max-width: fit-content;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.mission > div h2::after {
  content: "Mission";
  display: block;
  color: #00b3a7;
  font-size: 36px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 600;
  padding-top: 8px;
}

.mission > div p {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 0 100px 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 2;
  position: relative;
}

.mission > div p::before{
  content: "";
  display: block;
  position: absolute;
  top: 36%;
  left: 5%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
  height: 12px;
  background: no-repeat url("../image/icon/dg_L.svg");
}

.mission > div p::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 48%;
  right: 5%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
  height: 12px;
  background: no-repeat url("../image/icon/dg_R.svg");
}

@media screen and (max-width: 1500px){
.mission > div p::before{
  left: 4%;
}
.mission > div p::after{
  right: 4%;
}
}

@media screen and (max-width: 1080px){
  .mission > div p::before{
    content: none;
  }
   .mission > div p::after{
    content: none;
  }
}

@media screen and (max-width: 980px) {
  .mission {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }
  .mission > div article {
    width: calc((100% - 50px) / 3);
  }
}

@media screen and (max-width: 640px) {
  .mission {
    width: calc(100% - 32px);
    margin: 0px 16px;
    padding: 20px 0;
  }

  .mission > div {
    font-size: 14px;
    padding: 32px 0 0;
  }

  .mission > div h2::after {
    font-size: 32px;
    padding-top: 4px;
  }

  .mission > div p{
    padding: 32px 0 64px 0;
  }
}

@media screen and (min-width: 640px) {
  .br-sp {
    display: none;
  }
  .mission h2 {
    font-size: 32px;
  }
}

/*
*service01
*/

.service01 {
  width: calc(100% - 273px);
  margin: 50px 0 0 273px;
}

.service01 h2 {
  color: #222;
  font-size: 12px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.service01 h2::after {
  content: "Service";
  display: block;
  color: #00b3a7;
  font-size: 36px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 600;
  padding-top: 8px;
}
.service01 p {
  max-width: 1080px;
  margin: 0 auto;
  line-height: 2;
  padding: 32px 20px 60px 20px;
  font-size: 16px;
}

.service__detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.service__detail article {
  width: calc((100% - 100px) / 3);
  max-width: 320px;
}
.service__detail article div {
  position: relative;
  width: 100%;
}
.service__detail article div::before {
  display: block;
  padding: 100% 0 0 0;
  content: "";
}
.service__detail article div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 20px;
}
.service__detail article h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 20px 0;
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP_m";
  line-height: 1.7;
}

@media screen and (max-width: 980px) {
  .service01 {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }
  .service01 > div article {
    width: calc((100% - 50px) / 3);
  }
}

@media screen and (max-width: 768px) {
  .service01 img {
    height: 460px;
  }
  .service__detail article {
    width: calc((100% - 20px) / 3);
  }
  .service__detail article h3 {
    font-size: 16px;
  }
}

@media screen and (max-width: 640px) {
  .service01 {
    width: calc(100% - 32px);
    margin: 0 auto;
  }

  .service01 h2 {
    margin: 40px 0 0 0;
    padding: 0;
  }

  .service01 h2::after {
    font-size: 32px;
    padding-top: 4px;
  }

  .service01 p {
    padding: 30px 0 32px 0;
    font-size: 14px;
  }

  .service__detail {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
  }

  .service01 > div h2 {
    margin: 0 0 20px 0;
  }

  .service__detail article div {
    position: relative;
    width: 50%;
  }

    .service__detail article div img {
    border-radius: 10px;
}

  .service01 > div article {
    width: 100%;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    align-items: center;
  }

  .service__detail article h3 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    margin: 0 0 0 16px;
    width: 80%;
  }

  .service01 > div article + article {
    margin: 24px 0 0 0;
  }
}

/*
*service02
*/

.service02 {
  width: calc(100% - 273px);
  margin: 80px 0 0 273px;
}

.drp > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  padding: 60px 0px;
}

.drp h3 {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  font-family: "Noto Sans JP_m";
  color: #222;
  width: 100%;
  line-height: 1.8;
}

.drp h3::before {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: -10px;
  content: "";
  max-width: 1040px;
  width: 100%;
  border-bottom: 2px solid #edebe8;
  transform: translate(-50%);
}

.drp > div > div {
  width: 100%;
}

.drp h4 {
  color: #00b3a7;
  font-size: 18px;
  font-weight: 800;
  padding-top: 32px;
}

.drp p {
  width: 100%;
  max-width: 434px;
  margin: 24px 0 0 0;
  line-height: 2;
  padding: 0;
}

.drp iframe {
  width: 100%;
  height: 288px;
  padding-left: 20px;
  /* -o-object-fit: cover;
  object-fit: cover; */
}

.service02 > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.service02 > div article {
  width: calc((100% - 100px) / 2);
  max-width: 470px;
}
.service02 > div article div {
  position: relative;
  width: 100%;
}
.service02 > div article div::before {
  display: block;
  padding: 70% 0 0 0;
  content: "";
}
.service02 > div article div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 20px;
}

.service02 > div article h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
  font-size: 18px;
  font-weight: bold;
  font-family: "Noto Sans JP_m";
  color: #00b3a7;
}
.service02 > div article h3 span {
  margin: 3px 0 0 0;
}
.service02 > div article p {
  line-height: 1.8;
}

@media screen and (max-width: 980px) {
  .service02 {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }

    .drp > div {
    flex-direction: column-reverse;
    padding: 8px 0 0 0;
  }

   .drp h4{
    padding-top: 0;
  }

  .drp p{
    margin: 24px 0 24px;
  }

  .drp iframe{
    margin: 0;
    padding-left: 0;
  }

  .drp > div > div {
    width: 100%;
    padding-top: 4%;

  }
  .wrap {
    text-align: center;
  }
}

@media screen and (max-width: 740px){
  .drp iframe{
    width: 100%;
    height: auto;
    min-height: 200px;
  }
}

@media screen and (max-width: 640px) {
  .service02 {
    width: calc(100% - 32px);
    margin: 0 auto;
  }
  .service02 > div {
    flex-direction: column;
    padding: 40px 0 0 0;
  }
  .service02 > div article {
    width: 100%;
    max-width: 100%;
    padding-bottom: 40px;
  }

  .service02 > div article h3 {
    margin: 16px 0;
  }

   .drp p{
    margin: 16px 0 0;
  }
}

/*
*overview
*/
.overview {
  width: calc(100% - 273px);
  margin: 80px 0 0 273px;
}

.overview > div {
  background-color: #fbfaf9;
  max-width: 1040px;
  padding: 50px;
  margin: 0 auto;
  border-radius: 20px;
}

.overview h2 {
  color: #222;
  font-size: 12px;
  width: 100%;
  max-width: fit-content;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.overview h2::after {
  content: "Overview";
  display: block;
  color: #00b3a7;
  font-size: 32px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 600;
  padding-top: 8px;
}
.overview dl {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 0 0;
}
.overview dl > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #dcdcdc;
  font-size: 16px;
  font-family: "Noto Sans JP_m";
}
.overview dl > div dt {
  font-weight: 500;
  width: 30%;
  line-height: 1.6;
}
.overview dl > div dd {
  max-width: 460px;
  line-height: 1.6;
}
.overview dl > div dd span {
  display: inline-block;
  width: 61px;
  margin: 0 0 0 45px;
}
.overview dl > div dd + dd {
  margin: 10px 0 0 0;
}
.overview dl > div:first-child {
  border-top: 3px solid #dcdcdc;
}

@media screen and (max-width: 980px) {
  .overview {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }
}

@media screen and (max-width: 640px) {
  .overview {
    width: calc(100% - 32px);
    margin: 0px 16px;
  }

  .overview > div {
    padding: 40px 16px;
  }

  .overview dl > div {
    flex-direction: column;
    font-size: 14px;
    padding: 10px 0;
  }

  .overview dl > div dt {
    width: 100%;
}

  .overview dl > div dd {
    padding-top: 10px;
  }

  .overview h2::after {
    font-size: 32px;
    padding-top: 4px;
  }
}

/*
*contact
*/

.contact {
  width: calc(100% - 273px);
  margin: 50px 0 0 273px;
}
.contact h2 {
  color: #fff;
  font-size: 12px;
  width: 100%;
  max-width: fit-content;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.contact h2::after {
  content: "Contact";
  display: block;
  color: #00b3a7;
  font-size: 36px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 600;
  padding-top: 8px;
}

.contact > div {
  max-width: 100%;
  padding: 50px 0 70px;
  margin: 0 auto;
  text-align: center;
  background-image: url(../image/image/contact_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.contact > div:after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  background-color: rgba(34, 34, 34, 0.8);
  z-index: -1;
}

.contact > div p {
  padding: 0 0 60px;
  line-height: 2;
  font-size: 16px;
  color: #fff;
}


.btn--contact {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 25px 10px 64px;
  border-radius: 40px;
  position: relative;
  font-family: "Noto Sans JP_r";
  transition: 0.3s;
  border: 1px solid #fff;
  transition: all 0.3s ease-out; /*アニメーションの指定*/
  z-index: 1;
}

.btn--contact::before {
  content: "";
  display: block;
  position: absolute;
  top: 58%;
  left: 24px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: no-repeat url("../image/icon/mail.svg");
  background-size: 100%;
}

.btn--contact:hover {
  box-shadow: 0 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.30);
}

@media screen and (min-width: 1400px){
  .contact div{
      padding: 60px 0 50px;
  }
}

@media screen and (max-width: 980px) {
  .contact {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }
}

@media screen and (max-width: 640px) {
  .contact {
    width: 100%;
    margin: 40px 0 0 0;
  }
  .contact h2 {
    font-size: 12px;
  }

  .contact h2::after {
    font-size: 32px;
  }
  .contact > div p {
    font-size: 14px;
    padding: 40px 0 60px;
  }
}

.footer-address {
  width: calc(100% - 273px);
  margin: 0 0 0 273px;
  padding: 80px 0 40px;
  background-color: #007561;
}

.footer-address > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  max-width: 1080px;
  margin: 20px auto 60px;
  padding: 0 20px;
  color: #fff;
}

.company{
    font-size: 16px;
    font-weight: 700;
  }

.footer-address > div > div:nth-of-type(1) {
  min-width: 344px;
}
.footer-address > div > div:nth-of-type(1) dl {
  width: 100%;
  font-family: "Noto Sans JP_m";
}
.footer-address > div > div:nth-of-type(1) dl div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.footer-address > div > div:nth-of-type(1) dl div dt {
  width: 59px;
  margin: 0 40px 0 0;
  font-weight: unset;
}
.footer-address > div > div:nth-of-type(1) dl div dd {
  line-height: 1.5;
}
.footer-address > div > div:nth-of-type(1) dl div + div {
  margin: 18px 0 0 0;
}
.footer-address > div > div:nth-of-type(1) p {
  margin: 0px 0 24px 0;
  line-height: 1.5;
}
.footer-address > div > div:nth-of-type(1) ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 50px 0 0 0;
}
.footer-address > div > div:nth-of-type(1) ul li {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.footer-address > div > div:nth-of-type(1) ul li + li {
  margin: 0 0 0 50px;
}
.footer-address > div > div:nth-of-type(1) ul li:hover {
  opacity: 0.7;
}
.footer-address > div > div:nth-of-type(2) {
  width: 100%;
  max-width: 550px;
  margin: 0 0 0 20px;
}

.footer--nav ul {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.footer--nav ul li:nth-child(n + 2) {
  padding-left: 40px;
}

@media screen and (max-width: 980px) {
  .footer-address {
    width: calc(100% - 200px);
    margin: 0 0 0 200px;
  }
  .access {
    width: calc(100% - 200px);
    margin: 50px 0 0 200px;
  }
}
@media screen and (max-width: 768px) {
  .footer-address > div > div:nth-of-type(1) {
    width: 60%;
    min-width: unset;
  }
  .footer-address > div > div:nth-of-type(1) dl dt {
    white-space: nowrap;
  }
  .footer-address > div > div:nth-of-type(2) {
    width: 40%;
  }
}

@media screen and (max-width: 640px) {
  .footer-address {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
  }

  .footer-address div {
    flex-direction: column;
    text-align: center;
  }

  .footer-address img {
    width: 112px;
    height: auto;
    margin: 0 auto;
  }

  .footer-address h2 {
    font-size: 26px;
  }



  .footer-address > div > div:nth-of-type(1) {
    width: 100%;
  }

  .footer-address > div > div:nth-of-type(2) {
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
  }

  .footer--nav ul {
    justify-content: center;
    margin-top: 40px;
  }
}

footer {
  width: calc(100% - 273px);
  margin: 0 0 0 273px;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #007561;
}
footer small {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: right;
  color: #fff;
  font-size: 10px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

@media screen and (max-width: 980px) {
  footer {
    width: calc(100% - 200px);
    margin: 0 0 0 200px;
  }

/* ---------------------------- */
/* 1. SPサイズ（520px以下）
/* ---------------------------- */
@media screen and (max-width: 640px) {
  header {
    position: relative;
    width: 100%;
    height: auto;
    padding: 16px 0;
  }
  header > p {
    font-size: 10px;
  }
  header h1 {
    max-width: 98px;
    margin: 3px 0 0 0;
  }
  #open-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 45px;
    height: 58px;
  }
  #open-menu span {
    position: relative;
    width: 23px;
    height: 2px;
    margin: 8px 0;
    background-color: #00b3a7;
  }
  #open-menu span::before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00b3a7;
    content: "";
    top: -8px;
  }
  #open-menu span::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00b3a7;
    content: "";
    bottom: -8px;
  }
  #menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    padding: 60px 0 80px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    max-height: 720px;
}

  #menu #close-menu {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 45px;
    height: 58px;
  }
  #menu #close-menu span {
    position: relative;
    width: 25px;
    height: 2px;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    background-color: #39acbf;
  }
  #menu #close-menu span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    -webkit-transform: rotate(-80deg);
    transform: rotate(-80deg);
    background-color: #39acbf;
    content: "";
  }
  #menu h1 {
    width: 100%;
    max-width: 130px;
  }
  #menu h1 img {
    width: 100%;
  }
  #menu nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    margin: 14% 0;
  }

  #menu nav ul:nth-of-type(1) li a {
    position: relative;
    display: block;
    width: 150px;
    padding: 12px 0 6px;
    font-size: 18px;
    font-family: "Noto Sans JP_r";
    letter-spacing: 1.8px;
    text-align: center;
  }
  #menu nav ul:nth-of-type(1) li a::before {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  #menu nav ul:nth-of-type(1) li a:hover::before {
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  #menu nav ul:nth-of-type(1) li + li {
    margin: 30px 0 0 0;
  }
  #menu nav ul:nth-of-type(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    width: 220px;
  }

  #menu.open {
    opacity: 1;
    visibility: visible;
  }
  #toTop {
    right: 0;
    bottom: 50px;
    width: 37px;
    height: 37px;
  }
  #toTop img {
    width: 11px;
    height: 11px;
  }
  #toTop.show.fixed {
    position: fixed;
    right: 0;
    bottom: 50px;
  }

  .top {
    width: 100%;
    margin: 0 0 40px 0;
    height: 560px;
  }

  .top::before {
    top: -10px;
    width: calc(100% - 10px);
    height: calc(100% - 15px);
    border-radius: 0 0 0 100px;
  }

  .top p {
    margin: 20px 0 0 0;
    font-size: 14px;
  }

  footer {
    width: 100%;
    margin: 0px;
    padding: 0;
  }
  footer small {
    font-size: 10px;
    text-align: center;
    padding: 24px 0;
  }
}