@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@media screen and (max-width: 599px) {
  .pc {
    /* 599px以下のとき */
    display: none;
  }
}

@media screen and (min-width: 600px) {
  .sp {
    /* 600px以上のとき */
    display: none;
  }
}

@media screen and (max-width: 599px) {
  img {
    /* 599px以下のとき */
    max-width: 100%;
    height: auto;
    width: auto;
  }
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl {
  /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
  /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
}

a img {
  /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
  border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
  color: #42413C;
  text-decoration: underline;
  /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}

a:visited {
  color: #6E6C64;
  text-decoration: underline;
}

a:hover, a:active, a:focus {
  /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
  text-decoration: none;
}

p {
  margin: 10px 0 0 0;
}

.red {
  color: #F00;
}

.orange {
  color: #F60;
}

.blue {
  color: #36C;
}

.green {
  color: #009933;
}

.grey {
  color: gray;
}

.sitecolor {
  color: #0074ff;
}

.small85 {
  font-size: 85%;
}

.large11 {
  font-size: 1.1em;
}

.large12 {
  font-size: 1.2em;
}

.large14 {
  font-size: 1.4em;
}

.large18 {
  font-size: 1.8em;
}

.strong {
  font-weight: bold;
}

.tolist, .tolist02 {
  text-align: right;
  margin-top: 10px;
  margin: 0 auto;
}

@media screen and (max-width: 599px) {
  .tolist, .tolist02 {
    /* 599px以下のとき */
    width: 340px;
  }
}

@media screen and (min-width: 600px) {
  .tolist, .tolist02 {
    /* 600px以上のとき */
    width: 1000px;
  }
}

.tolist02 {
  width: 100%;
}

.pdfarea {
  width: 90%;
  padding: 15px 10px;
  font-size: 0.9em;
  text-align: left;
  border: 1px #ccc solid;
  margin: 0 auto;
  margin-top: 20px;
}

.link:after, .link-b:after {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  font-weight: 900;
  color: #F00;
  margin: -5px 0 0 5px;
  font-size: 1.2em;
}

.link-b:after {
  color: #000;
}

.pdf:after {
  font-family: "Font Awesome 5 Free";
  content: "\f15c";
  font-weight: 400;
  color: #F00;
  margin: -5px 0 0 5px;
  font-size: 1.2em;
}

/* ~~ その他の float/clear クラス ~~ */
.fltrt {
  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
  float: right;
  margin-left: 8px;
}

.fltlft {
  /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
  float: left;
  margin-right: 8px;
}

.clearfloat {
  /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}

.kana {
  ime-mode: active;
}

.rome {
  ime-mode: disabled;
}

.lh20 {
  line-height: 2em;
}

.lh25 {
  line-height: 2.5em;
}

.imgarea {
  width: 100%;
  text-align: center;
  font-size: 1.0em;
}

.imgarea02 {
  width: 49%;
  text-align: center;
  font-size: 1.0em;
  float: left;
}

.imgarea03 {
  width: 33%;
  text-align: center;
  font-size: 0.9em;
  float: left;
  margin-top: 20px;
}

.imgarea img, .imgarea02 img, .imgarea03 img {
  padding: 10px 0;
}

/* square */
.square:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c8";
  font-weight: 900;
  margin: -5px 8px 0 5px;
  color: #0074ff;
}

.shadow01 {
  -webkit-box-shadow: 0 10px 8px -6px #8d8c8c;
  box-shadow: 0 10px 8px -6px #8d8c8c;
}

.shadow02 {
  display: inline-block;
  position: relative;
  padding: 6px;
  -webkit-box-shadow: 0 2px 6px #999;
          box-shadow: 0 2px 6px #999;
  background-color: #fff;
  margin-bottom: 20px;
}

.shadow02 img {
  padding: 0;
}

.zoom, .zoom08 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.zoom:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.zoom08:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.gray {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.gray:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.opacity {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.opacity:hover {
  opacity: .5;
}

.e-flash:hover {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 599px) {
  html {
    /* 599px以下のとき */
    position: relative;
    overflow-x: hidden;
  }
}

body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
  color: #000;
  width: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background: url("./images/body_bk.jpg") left top repeat;
}

@media screen and (max-width: 600px) {
  body {
    min-width: 360px;
  }
}

@media screen and (min-width: 599px) {
  body {
    min-width: 920px;
  }
}

@media screen and (max-width: 599px) {
  body {
    /* 600px以上のとき */
    position: relative;
    left: 0;
    overflow-x: hidden;
  }
}

/* ドロワーメニュー */
.ul_open_h {
  background: #b2dbda;
  color: #000;
  margin: 0;
  padding: 0;
  list-style: none;
  top: 0;
  height: 100%;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  overflow-y: scroll;
  position: fixed;
  z-index: 50;
  padding-top: 50px;
}

.ul_open_h li {
  padding: 7px;
  width: 220px;
  border-bottom: 1px #333 solid;
  font-size: 0.85em;
}

.ul_open_h li.bottom {
  margin-bottom: 100px;
}

.ul_open_h li a:link {
  color: #000;
  text-decoration: underline;
  /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}

.ul_open_h li a:visited {
  color: #000;
  text-decoration: underline;
}

.open-sub {
  margin: 0 0 0 20px;
  list-style-position: inside;
  list-style-type: disc;
}

.open-sub li {
  font-size: 1.0em;
  border-bottom: none;
  padding-top: 5px;
  line-height: 1.7em;
}

.dmenu {
  padding: 0 0 0 10px;
}

.open-1 {
  right: -100%;
}

.open-1.active {
  right: 0px;
}

.move-1.on.btn {
  position: fixed;
  right: 25px;
  top: 10px;
}

.btn {
  position: absolute;
  /*    background: #fff; */
  width: 40px;
  height: 40px;
  z-index: 90;
}

@media screen and (min-width: 600px) {
  .btn {
    /* 600px以上のとき */
    top: 80px;
    right: 15px;
  }
}

@media screen and (max-width: 599px) {
  .btn {
    /* 600px以上のとき */
    top: 53px;
    left: 308px;
  }
}

.btn:before, .btn:after, .btn span {
  display: block;
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}

.btn span {
  height: 5px;
  background-color: #999;
  top: calc(50% - 1.5px);
}

.btn:before {
  content: "";
  top: calc(25% - 5px);
  border-top: 5px solid #999;
}

.btn:after {
  content: "";
  bottom: calc(25% - 5px);
  border-top: 5px solid #999;
}

.btn.on span {
  display: none;
}

.btn.on:before {
  top: calc(50% - 1.8px);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.btn.on:after {
  bottom: calc(50% - 1.8px);
  -webkit-transform: rotate(-315deg);
  transform: rotate(-315deg);
}

#headwrap {
  width: 100%;
  position: relative;
}

@media screen and (max-width: 600px) {
  #headwrap {
    min-width: 360px;
  }
}

@media screen and (min-width: 599px) {
  #headwrap {
    min-width: 920px;
  }
}

@media screen and (min-width: 600px) {
  #headwrap {
    /* 600px以上のとき */
    height: 180px;
    background-color: #fff;
  }
}

@media screen and (max-width: 599px) {
  #headwrap {
    /* 600px以上のとき */
    height: 110px;
    background-color: #fff;
  }
}

.hcopywrap {
  width: 100%;
  background-color: #def1fb;
  height: 20px;
  text-align: center;
  padding: 5px 0;
}

@media screen and (max-width: 600px) {
  .hcopywrap {
    min-width: 360px;
  }
}

@media screen and (min-width: 599px) {
  .hcopywrap {
    min-width: 920px;
  }
}

.hcopywrap .hcopyarea {
  height: 30px;
  text-align: center;
  font-size: 11px;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .hcopywrap .hcopyarea {
    width: 360px;
  }
}

@media screen and (min-width: 599px) {
  .hcopywrap .hcopyarea {
    width: 920px;
  }
}

#headarea {
  margin: 0 auto;
  height: auto;
  position: relative;
}

@media screen and (max-width: 600px) {
  #headarea {
    width: 360px;
  }
}

@media screen and (min-width: 599px) {
  #headarea {
    width: 920px;
  }
}

@media screen and (min-width: 600px) {
  #headarea {
    /* 600px以上のとき */
    min-height: 150px;
  }
}

@media screen and (max-width: 599px) {
  #headarea {
    /* 600px以下のとき */
    min-height: 110px;
  }
}

@media screen and (min-width: 600px) {
  #headarea img.h-logo {
    /* 600px以上のとき */
    position: absolute;
    top: 25px;
    left: 9px;
  }
}

@media screen and (max-width: 599px) {
  #headarea img.h-logo {
    /* 600px以下のとき */
    position: absolute;
    top: 55px;
    left: 21px;
  }
}

@media screen and (min-width: 600px) {
  #headarea img.h-copy {
    /* 600px以上のとき */
    position: absolute;
    top: 40px;
    right: 9px;
  }
}

@media screen and (max-width: 599px) {
  #headarea img.h-copy {
    /* 600px以下のとき */
    position: absolute;
    top: 16px;
    left: 40px;
  }
}

@media screen and (min-width: 600px) {
  #headarea img.h-menu {
    /* 600px以上のとき */
    position: absolute;
    top: 125px;
    right: 8px;
  }
}

@media screen and (max-width: 599px) {
  #headarea img.h-menu {
    /* 600px以上のとき */
    position: absolute;
    top: 93px;
    left: 308px;
  }
}

#headarea ul.h-navi {
  position: absolute;
  top: 110px;
  left: 350px;
  list-style-type: none;
}

#headarea ul.h-navi li {
  float: left;
  border-left: 1px #000 solid;
  padding: 2px 10px;
}

#topwrap {
  width: 100%;
  text-align: center;
  display: block;
  position: relative;
}

@media screen and (min-width: 600px) {
  #topwrap {
    /* 600px以上のとき */
    background: url("./images/header_bk.png") center top no-repeat;
    height: 600px;
  }
}

@media screen and (max-width: 599px) {
  #topwrap {
    /* 600px以上のとき */
    background: url("./images/header_bk_s.png") center top no-repeat;
    height: 233px;
  }
}

.toparea {
  text-align: center;
  margin: 0 auto;
  display: block;
  position: relative;
}

@media screen and (max-width: 600px) {
  .toparea {
    width: 360px;
  }
}

@media screen and (min-width: 599px) {
  .toparea {
    width: 920px;
  }
}

@media screen and (min-width: 600px) {
  .toparea {
    /* 600px以上のとき */
    height: 600px;
  }
}

@media screen and (max-width: 599px) {
  .toparea {
    /* 600px以上のとき */
    height: 233px;
  }
}

@media screen and (min-width: 600px) {
  .toparea .m-copy {
    /* 600px以上のとき */
    position: absolute;
    top: 64px;
    left: 10px;
  }
}

@media screen and (max-width: 599px) {
  .toparea .m-copy {
    /* 600px以下のとき */
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
  }
}

@media screen and (min-width: 600px) {
  .toparea .m-form {
    /* 600px以上のとき */
    position: absolute;
    top: 270px;
    left: 125px;
  }
}

@media screen and (max-width: 599px) {
  .toparea .m-form {
    /* 600px以下のとき */
    position: relative;
    margin: 0 auto;
    margin-top: 5px;
  }
}

/* main area */
main {
  width: 100%;
  min-height: 300px;
  background-color: #def1fb;
}

/* top page */
#marea {
  margin: 0 auto;
  padding-top: 10px;
  position: relative;
  padding: 0 0 50px 0;
  text-align: center;
  min-height: 100px;
}

@media screen and (max-width: 600px) {
  #marea {
    width: 360px;
  }
}

@media screen and (min-width: 599px) {
  #marea {
    width: 920px;
  }
}

.plush {
  min-height: 500px;
}

.area01 {
  margin: 0 auto;
}

@media screen and (min-width: 600px) {
  .area01 {
    /* 600px以上のとき */
    width: 900px;
    padding-top: 30px;
  }
}

@media screen and (max-width: 599px) {
  .area01 {
    /* 600px以下のとき */
    width: 360px;
    background-color: #fff;
    padding: 10px 0;
  }
}

@media screen and (min-width: 600px) {
  .area01 img {
    /* 600px以上のとき */
    float: left;
    margin-left: 5px;
  }
}

@media screen and (max-width: 599px) {
  .area01 img {
    /* 600px以下のとき */
    margin: 5px 0 5px 0;
  }
}

@media screen and (min-width: 600px) {
  .nayami {
    /* 600px以上のとき */
    margin: 60px 0;
  }
}

@media screen and (max-width: 599px) {
  .nayami {
    /* 600px以下のとき */
    margin: 10px 0;
  }
}

.area02, .area03, .area04 {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .area02, .area03, .area04 {
    /* 600px以上のとき */
    width: 900px;
    background: url("./images/area02_bk.png") no-repeat;
    margin-top: 30px;
    height: 1273px;
  }
}

@media screen and (max-width: 599px) {
  .area02, .area03, .area04 {
    /* 600px以下のとき */
    width: 360px;
    background: url("./images/area02_bk_s.png") no-repeat;
    margin-top: 10px;
    height: 770px;
  }
}

.area02 .fukidashi, .area03 .fukidashi, .area04 .fukidashi {
  font-weight: 700;
}

@media screen and (min-width: 600px) {
  .area02 .fukidashi, .area03 .fukidashi, .area04 .fukidashi {
    /* 600px以上のとき */
    padding-top: 85px;
    font-size: 38px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .fukidashi, .area03 .fukidashi, .area04 .fukidashi {
    /* 600px以下のとき */
    padding-top: 32px;
    font-size: 20px;
  }
}

.area02 .nara, .area03 .nara, .area04 .nara {
  color: #fff;
  font-weight: 700;
}

@media screen and (min-width: 600px) {
  .area02 .nara, .area03 .nara, .area04 .nara {
    /* 600px以上のとき */
    margin-top: 360px;
    font-size: 40px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .nara, .area03 .nara, .area04 .nara {
    /* 600px以下のとき */
    margin-top: 152px;
    font-size: 19px;
  }
}

.area02 .nara .n-small, .area03 .nara .n-small, .area04 .nara .n-small {
  font-weight: 400;
  display: inline-block;
  vertical-align: 0.3em;
}

@media screen and (min-width: 600px) {
  .area02 .nara .n-small, .area03 .nara .n-small, .area04 .nara .n-small {
    /* 600px以上のとき */
    font-size: 25px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .nara .n-small, .area03 .nara .n-small, .area04 .nara .n-small {
    /* 600px以下のとき */
    font-size: 12px;
  }
}

.area02 .warea, .area03 .warea, .area04 .warea {
  width: 100%;
  min-height: 300px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}

@media screen and (min-width: 600px) {
  .area02 .warea, .area03 .warea, .area04 .warea {
    /* 600px以上のとき */
    height: 650px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .warea, .area03 .warea, .area04 .warea {
    /* 600px以下のとき */
    height: 500px;
  }
}

.area02 .warea .midashi, .area03 .warea .midashi, .area04 .warea .midashi, .area02 .warea .txt .midashi02, .txt .area02 .warea .midashi02, .area03 .warea .txt .midashi02, .txt .area03 .warea .midashi02, .area04 .warea .txt .midashi02, .txt .area04 .warea .midashi02, .area02 .warea .txt .midashi03, .txt .area02 .warea .midashi03, .area03 .warea .txt .midashi03, .txt .area03 .warea .midashi03, .area04 .warea .txt .midashi03, .txt .area04 .warea .midashi03 {
  color: #e7325c;
  text-align: center;
  font-weight: 700;
  line-height: 1.3em;
}

@media screen and (min-width: 600px) {
  .area02 .warea .midashi, .area03 .warea .midashi, .area04 .warea .midashi, .area02 .warea .txt .midashi02, .txt .area02 .warea .midashi02, .area03 .warea .txt .midashi02, .txt .area03 .warea .midashi02, .area04 .warea .txt .midashi02, .txt .area04 .warea .midashi02, .area02 .warea .txt .midashi03, .txt .area02 .warea .midashi03, .area03 .warea .txt .midashi03, .txt .area03 .warea .midashi03, .area04 .warea .txt .midashi03, .txt .area04 .warea .midashi03 {
    /* 600px以上のとき */
    font-size: 45px;
    margin-top: 40px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .warea .midashi, .area03 .warea .midashi, .area04 .warea .midashi, .area02 .warea .txt .midashi02, .txt .area02 .warea .midashi02, .area03 .warea .txt .midashi02, .txt .area03 .warea .midashi02, .area04 .warea .txt .midashi02, .txt .area04 .warea .midashi02, .area02 .warea .txt .midashi03, .txt .area02 .warea .midashi03, .area03 .warea .txt .midashi03, .txt .area03 .warea .midashi03, .area04 .warea .txt .midashi03, .txt .area04 .warea .midashi03 {
    /* 600px以下のとき */
    font-size: 25px;
    margin: 20px 0;
  }
}

.area02 .warea .w-txt, .area03 .warea .w-txt, .area04 .warea .w-txt {
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  font-size: 26px;
  line-height: 1.3em;
}

@media screen and (min-width: 600px) {
  .area02 .warea .w-txt, .area03 .warea .w-txt, .area04 .warea .w-txt {
    /* 600px以上のとき */
    width: 770px;
    font-size: 42px;
    margin-top: 40px;
  }
}

@media screen and (max-width: 599px) {
  .area02 .warea .w-txt, .area03 .warea .w-txt, .area04 .warea .w-txt {
    /* 600px以下のとき */
    width: 340px;
    font-size: 20px;
    margin-top: 20px;
  }
}

@media screen and (min-width: 600px) {
  .area03 {
    /* 600px以上のとき */
    background: url("./images/area03_bk.png") no-repeat;
    height: 1123px;
  }
}

@media screen and (max-width: 599px) {
  .area03 {
    /* 600px以下のとき */
    background: url("./images/area03_bk_s.png") no-repeat;
  }
}

@media screen and (min-width: 600px) {
  .area03 .warea {
    /* 600px以上のとき */
    height: 500px;
  }
}

@media screen and (max-width: 599px) {
  .area03 .warea {
    /* 600px以下のとき */
  }
}

@media screen and (min-width: 600px) {
  .area04 {
    /* 600px以上のとき */
    background: url("./images/area04_bk.png") no-repeat;
    height: 1123px;
  }
}

@media screen and (max-width: 599px) {
  .area04 {
    /* 600px以下のとき */
    background: url("./images/area04_bk_s.png") no-repeat;
    height: 570px;
  }
}

@media screen and (min-width: 600px) {
  .area04 .warea {
    /* 600px以上のとき */
    background: url("./images/wtxt_bk.png") right bottom no-repeat;
    background-color: #fff;
    height: 500px;
  }
}

@media screen and (max-width: 599px) {
  .area04 .warea {
    /* 600px以下のとき */
    background: url("./images/wtxt_bk_s.png") right bottom no-repeat;
    background-color: #fff;
    height: 300px;
  }
}

@media screen and (min-width: 600px) {
  .area04 .warea .w-txt {
    /* 600px以上のとき */
    margin: 20px 0 0 65px;
    width: 520px;
  }
}

@media screen and (max-width: 599px) {
  .area04 .warea .w-txt {
    /* 600px以下のとき */
    margin: 20px 0 0 20px;
    width: 200px;
  }
}

@media screen and (min-width: 600px) {
  .toform, .toflow {
    /* 600px以上のとき */
    margin-top: 50px;
  }
}

@media screen and (max-width: 599px) {
  .toform, .toflow {
    /* 600px以下のとき */
    margin-top: 10px;
  }
}

.maparea {
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 600px) {
  .maparea {
    /* 600px以上のとき */
    width: 900px;
    margin-top: 50px;
    background-color: #fff;
    min-height: 900px;
  }
}

@media screen and (max-width: 599px) {
  .maparea {
    /* 600px以下のとき */
    width: 360px;
    margin-top: 10px;
    min-height: 600px;
  }
}

.maparea .cover {
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 5px #0074ff solid;
}

@media screen and (min-width: 600px) {
  .maparea .cover {
    /* 600px以上のとき */
    font-size: 45px;
    margin-top: 50px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .cover {
    /* 600px以下のとき */
    font-size: 30px;
    margin-top: 10px;
  }
}

.maparea .mtxt01 {
  position: absolute;
  text-align: left;
}

@media screen and (min-width: 600px) {
  .maparea .mtxt01 {
    /* 600px以上のとき */
    font-size: 30px;
    top: 100px;
    left: 40px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .mtxt01 {
    /* 600px以下のとき */
    font-size: 16px;
    top: 110px;
    left: 10px;
  }
}

.maparea .mtxt02 {
  position: absolute;
}

@media screen and (min-width: 600px) {
  .maparea .mtxt02 {
    /* 600px以上のとき */
    font-size: 30px;
    top: 530px;
    left: 5px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .mtxt02 {
    /* 600px以下のとき */
    font-size: 16px;
    top: 300px;
    left: 5px;
  }
}

.maparea .telarea01, .maparea .telarea02, .maparea .telarea03 {
  margin: 0 auto;
  text-align: left;
  line-height: 2.0em;
}

@media screen and (min-width: 600px) {
  .maparea .telarea01, .maparea .telarea02, .maparea .telarea03 {
    /* 600px以上のとき */
    width: 880px;
    margin-top: 70px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .telarea01, .maparea .telarea02, .maparea .telarea03 {
    /* 600px以下のとき */
    width: 340px;
    margin-top: 50px;
    margin-bottom: 20px;
    height: 100px;
  }
}

.maparea .telarea01 img, .maparea .telarea02 img, .maparea .telarea03 img {
  margin: 0 10px 0 0;
}

@media screen and (max-width: 599px) {
  .maparea .telarea01 img, .maparea .telarea02 img, .maparea .telarea03 img {
    /* 600px以下のとき */
    width: 60px;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media screen and (max-width: 599px) {
  .maparea .telarea01 div, .maparea .telarea02 div, .maparea .telarea03 div {
    /* 600px以下のとき */
    width: 270px;
    float: left;
  }
}

.maparea .telarea01 .no, .maparea .telarea02 .no, .maparea .telarea03 .no {
  font-weight: 700;
}

@media screen and (min-width: 600px) {
  .maparea .telarea01 .no, .maparea .telarea02 .no, .maparea .telarea03 .no {
    /* 600px以上のとき */
    font-size: 40px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .telarea01 .no, .maparea .telarea02 .no, .maparea .telarea03 .no {
    /* 600px以下のとき */
    font-size: 30px;
    line-height: 1.0em;
    display: inline-block;
  }
}

.maparea .telarea01 .fax, .maparea .telarea02 .fax, .maparea .telarea03 .fax {
  font-weight: 700;
}

@media screen and (max-width: 599px) {
  .maparea .telarea01 .fax, .maparea .telarea02 .fax, .maparea .telarea03 .fax {
    /* 600px以下のとき */
    font-size: 26px;
  }
}

@media screen and (min-width: 600px) {
  .maparea .telarea01 .addr, .maparea .telarea02 .addr, .maparea .telarea03 .addr {
    /* 600px以上のとき */
    font-size: 26px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .telarea01 .addr, .maparea .telarea02 .addr, .maparea .telarea03 .addr {
    /* 600px以下のとき */
    font-size: 14px;
    line-height: 1.2em;
    display: inline-block;
  }
}

.maparea .telarea02 {
  margin-top: 20px;
}

.maparea .telarea03 {
  margin-top: 20px;
}

@media screen and (min-width: 600px) {
  .maparea .telarea03 .addr {
    /* 600px以上のとき */
    font-size: 24px;
  }
}

@media screen and (max-width: 599px) {
  .maparea .telarea03 .addr {
    /* 600px以下のとき */
    font-size: 14px;
  }
}

#subarea {
  min-height: 500px;
  background-color: #fff;
}

@media screen and (min-width: 600px) {
  #subarea {
    /* 600px以上のとき */
    width: 900px;
    margin: 0 auto;
    padding-top: 10px;
  }
}

@media screen and (max-width: 599px) {
  #subarea {
    /* 599px以下のとき */
    width: 360px;
    margin: 0 auto;
  }
}

.maparea02 {
  background-color: #fff;
  min-height: 100px;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
}

@media screen and (min-width: 600px) {
  .maparea02 {
    /* 600px以上のとき */
    width: 600px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 599px) {
  .maparea02 {
    /* 600px以下のとき */
    width: 320px;
    margin: 0 auto;
  }
}

.maparea02 .telarea01, .maparea02 .maparea .telarea02, .maparea .maparea02 .telarea02, .maparea02 .maparea .telarea03, .maparea .maparea02 .telarea03 {
  margin: 0 auto;
  margin-top: 10px;
  text-align: left;
  line-height: 2.0em;
}

.maparea02 .telarea01 img, .maparea02 .maparea .telarea02 img, .maparea .maparea02 .telarea02 img, .maparea02 .maparea .telarea03 img, .maparea .maparea02 .telarea03 img {
  margin: 0 20px 0 0;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (min-width: 600px) {
  .maparea02 .telarea01 img, .maparea02 .maparea .telarea02 img, .maparea .maparea02 .telarea02 img, .maparea02 .maparea .telarea03 img, .maparea .maparea02 .telarea03 img {
    /* 600px以上のとき */
    width: 80px;
  }
}

@media screen and (max-width: 599px) {
  .maparea02 .telarea01 img, .maparea02 .maparea .telarea02 img, .maparea .maparea02 .telarea02 img, .maparea02 .maparea .telarea03 img, .maparea .maparea02 .telarea03 img {
    /* 600px以下のとき */
    width: 60px;
  }
}

.maparea02 .telarea01 .no, .maparea02 .maparea .telarea02 .no, .maparea .maparea02 .telarea02 .no, .maparea02 .maparea .telarea03 .no, .maparea .maparea02 .telarea03 .no {
  font-weight: 700;
  line-height: 1.5em;
}

@media screen and (min-width: 600px) {
  .maparea02 .telarea01 .no, .maparea02 .maparea .telarea02 .no, .maparea .maparea02 .telarea02 .no, .maparea02 .maparea .telarea03 .no, .maparea .maparea02 .telarea03 .no {
    /* 600px以上のとき */
    font-size: 36px;
  }
}

@media screen and (max-width: 599px) {
  .maparea02 .telarea01 .no, .maparea02 .maparea .telarea02 .no, .maparea .maparea02 .telarea02 .no, .maparea02 .maparea .telarea03 .no, .maparea .maparea02 .telarea03 .no {
    /* 600px以下のとき */
    font-size: 28px;
  }
}

/* mail */
.formarea {
  padding-bottom: 30px;
}

@media screen and (min-width: 600px) {
  .formarea {
    /* 600px以上のとき */
    width: 800px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 599px) {
  .formarea {
    /* 600px以下のとき */
    width: 320px;
    margin: 0 auto;
  }
}

.hissu {
  display: inline-block;
  padding: 3px;
  background-color: #FD080C;
  color: #fff;
  min-width: 30px;
  width: auto;
  font-size: 0.8em;
  border-radius: 5px;
  text-align: center;
}

form {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

form ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

form dl {
  margin: 0 0 0.25em 0;
  clear: both;
  display: inline-block;
  margin: 0 auto;
  list-style-type: none;
}

@media screen and (min-width: 600px) {
  form dl {
    /* 600px以上のとき */
    width: 800px;
  }
}

@media screen and (max-width: 599px) {
  form dl {
    /* 600px以下のとき */
    width: 320px;
  }
}

form dt {
  width: 100%;
  font-size: 20px;
  text-align: left;
  margin-bottom: 0.5em;
}

@media screen and (min-width: 600px) {
  dt.r {
    /* 600px以上のとき */
    width: 30%;
    float: left;
  }
}

form dd {
  font-size: 20px;
  text-align: left;
  display: block;
}

@media screen and (min-width: 600px) {
  form dd {
    /* 600px以上のとき */
    width: 700px;
    margin: 0 0 2em 50px;
  }
}

@media screen and (max-width: 599px) {
  form dd {
    /* 600px以下のとき */
    width: 320px;
    margin: 0 0 2em 10px;
  }
}

@media screen and (min-width: 600px) {
  dd.r {
    /* 600px以上のとき */
    width: 68%;
    float: left;
    margin: 0 0 2em 5px;
  }
}

label {
  margin: 0 0 0.5em 0;
  font-size: pxtoem(16, 16);
}

input {
  margin: 0 0 0.5em 0;
  border: 1px solid grey;
  padding: 6px 10px;
  color: dark_grey;
  font-size: 18px;
}

textarea {
  border: 1px solid grey;
  padding: 6px 10px;
  width: 100%;
  color: dark_grey;
  font-size: 20px;
}

select {
  min-width: 320px;
  margin: 5px 0px;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

@media screen and (min-width: 600px) {
  .fsize30 {
    /* 600px以上のとき */
    font-size: 30px;
  }
}

@media screen and (max-width: 599px) {
  .fsize30 {
    /* 600px以下のとき */
    font-size: 24px;
  }
}

h1 {
  margin-top: 10px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 5px #0074ff solid;
}

@media screen and (min-width: 600px) {
  h1 {
    /* 600px以上のとき */
    font-size: 40px;
  }
}

@media screen and (max-width: 599px) {
  h1 {
    /* 600px以下のとき */
    font-size: 30px;
  }
}

h1 div {
  margin-left: 0.5em;
  text-align: left;
}

h2.m01, h2.m02, h2.m03 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 2.5em;
  text-align: left;
}

@media screen and (min-width: 600px) {
  h2.m01, h2.m02, h2.m03 {
    /* 600px以上のとき */
    width: 400px;
    margin: 40px 0 20px 50px;
  }
}

@media screen and (max-width: 599px) {
  h2.m01, h2.m02, h2.m03 {
    /* 599px以下のとき */
    width: 320px;
    /* 幅指定 */
    margin: 20px 0 20px 10px;
  }
}

h2.m01:after, h2.m02:after, h2.m03:after {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: '';
  width: 50px;
  height: 4px;
  background-color: #0074ff;
}

h2.m02:after {
  background-color: red;
}

h2.m03:after {
  background-color: green;
}

h3 {
  width: 800px;
  text-align: left;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  border-bottom: 3px #ccc dotted;
}

.txt {
  margin: 0 auto;
  line-height: 1.8em;
  text-align: left;
  margin-bottom: 50px;
}

@media screen and (max-width: 599px) {
  .txt {
    /* 599px以下のとき */
    width: 340px;
    font-size: 20px;
  }
}

@media screen and (min-width: 600px) {
  .txt {
    /* 600px以上のとき */
    width: 800px;
    font-size: 18px;
  }
}

@media screen and (min-width: 600px) {
  .txt .midashi, .txt .midashi02, .txt .midashi03 {
    /* 600px以上のとき */
    margin: -70px 0 0 120px;
    font-size: 30px;
  }
}

@media screen and (max-width: 599px) {
  .txt .midashi, .txt .midashi02, .txt .midashi03 {
    /* 599px以下のとき */
    margin: -60px 0 0 90px;
    font-size: 24px;
  }
}

@media screen and (max-width: 599px) {
  .txt .midashi02 {
    /* 599px以下のとき */
    margin: -75px 0 0 90px;
  }
}

@media screen and (min-width: 600px) {
  .txt .midashi03 {
    /* 600px以上のとき */
    margin: -90px 0 0 120px;
  }
}

@media screen and (max-width: 599px) {
  .txt .midashi03 {
    /* 599px以下のとき */
    margin: -90px 0 0 90px;
  }
}

/* ~~ フッター ~~ */
#fwrap {
  width: 100%;
  display: block;
  text-align: center;
  padding-bottom: 20px;
  background-color: #0074ff;
}

#fwrap .footarea {
  position: relative;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  #fwrap .footarea {
    width: 360px;
  }
}

@media screen and (min-width: 599px) {
  #fwrap .footarea {
    width: 920px;
  }
}

@media screen and (min-width: 600px) {
  #fwrap .footarea {
    /* 600px以上のとき */
    min-height: 180px;
  }
}

@media screen and (max-width: 599px) {
  #fwrap .footarea {
    min-height: 200px;
  }
}

@media screen and (min-width: 600px) {
  #fwrap .footarea .f-logo {
    /* 600px以上のとき */
    position: absolute;
    top: 67px;
    left: 64px;
  }
}

@media screen and (max-width: 599px) {
  #fwrap .footarea .f-logo {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

.farea {
  text-align: center;
  position: relative;
}

@media screen and (min-width: 600px) {
  .farea {
    /* 600px以上のとき */
    width: 500px;
    float: right;
  }
}

@media screen and (max-width: 599px) {
  .farea {
    width: 360px;
  }
}

.farea div.fmenu {
  text-align: left;
  display: block;
  min-height: 200px;
  height: auto;
  float: right;
  min-width: 150px;
  color: #fff;
}

@media screen and (min-width: 600px) {
  .farea div.fmenu {
    /* 600px以上のとき */
    margin: 20px 100px 0 20px;
  }
}

@media screen and (max-width: 599px) {
  .farea div.fmenu {
    margin: 0px 100px 0 20px;
  }
}

.farea div.fmenu a:link {
  color: #fff;
}

.farea div.fmenu a:visited {
  color: #fff;
}

.farea div.fmenu .ftitle {
  font-size: 0.9em;
  margin: 0 0 0 0;
  width: 100%;
  padding: 5px 0;
}

.farea div.fmenu .ftitle:before {
  margin: -5px 0 0 5px;
  font-size: 1.0em;
  font-weight: 900;
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  content: "\f0c8";
}

.farea div.fmenu .ftitle2 {
  font-size: 0.9em;
  margin: 0 0 5px 0;
  width: 100%;
  padding: 5px 0;
}
/*# sourceMappingURL=style.css.map */