﻿@charset "utf-8";
/***  メインビジュアル　フェード  ***/

#top01,
#top02,
#top03,
#top04,
#top05,
#top06,
#top07,
#top08 {
  width: 94%;
  margin: 0 auto;
  text-align: left;
  padding: 1.5em 0;
}

.top_slid00 {
  width: 98%;
  margin: 0 auto;
}

/*=========================
	メインコンテンツここから
==========================*/
.padding-top-100 {
  padding-top: 100px;
}
.kumo_bg img {
  width: 100%;
}

.top_bg {
  background: #e7f5f7;
}

.back_DFF2F7_top4 {
  background: linear-gradient(transparent 4em, #dff2f7 0 4em);
}

.mainasu_01 {
  margin: -6.5em auto 0;
}
.mainasu_02 {
  margin: -3em auto 0;
}
.mainasu_03 {
  margin: -4em auto 0;
}
.mainasu_04 {
  margin: -2em auto 0;
}

.mainasu_06 {
  margin: -2.5em auto 0;
}
.mainasu_07 {
  margin: -5em auto 0;
}
.mainasu_08 {
  margin: -3em auto 0;
}

.mainasu_09 {
  margin: -1em auto 0;
}

.mainasu_10 {
  margin: 0 auto 0;
}

.top01_01bnr_block > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  justify-content: center;
}
.top01_01bnr_block > ul > li {
  /* 1600*/
  width: 31.33333%;
  max-width: 170px;
  margin: 0.1em 1% 1em;
}

.top01_01bnr_block > ul > li a {
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
}

.top01_00 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.top01_00 > ul > li {
  width: 48%;
  margin: 0 1% 0.5em;
}

.top01_04_lp_btn {
  position: absolute;
  bottom: 1rem;
  left: 2%;
  z-index: 3;
  max-width: 500px;
  width: 95%;
}

.top01_04_lp_btn > div {
  max-width: 500px;
  margin: 0 auto;
}

.top01_04_lp > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.top01_04_lp > ul > li {
  width: 100%;
  margin: 0 0 1em;
}

.lp01_01 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.lp01_01 > ul > li {
  width: 49%;
  margin: 0 0.5% 3em;
  box-sizing: border-box;
  background: #ffffff;
  padding: 1em 0.3em;
  border-radius: 20px;
  box-sizing: border-box;
  border: 4px solid #e7f5f7;
  box-shadow: 0 4px #e7f5f7;
}

.top01_04 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.top01_04 > ul > li {
  /*442 1380*/
  width: 49%;
  margin: 0 0.5% 3em;
  box-sizing: border-box;
  background: #ffffff;
  padding: 1em 0.3em;
  border-radius: 20px;
  box-sizing: border-box;
  border: 4px solid #e7f5f7;
  box-shadow: 0 4px #e7f5f7;
}
.top01_04title {
  text-align: center;
  margin: -2em 0 0 0;
  position: relative;
  z-index: 2;
}
.top01_04title h3 {
  display: inline-block;
  background: #ff8212;
  color: #ffffff;
  border: 4px solid #ff8212;
  border-radius: 100px;
  padding: 0.3em 1em;
}

.top01_04kikan span {
  background: #e6e6e6;
  color: #171c61;
  border-radius: 50px;
  padding: 0.1em 1em;
  box-sizing: border-box;
}

.top01_04block {
  position: relative;
  z-index: 1;
  margin: -1.5em 0 0 0;
}

.top01_04block > dl > dt {
  /*414 155*/
  width: 45.5%;
}
.top01_04block > dl > dd {
  width: 50.5%;
  margin: 0 0 0 4%;
}

.top01_04fee {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
}

.top01_04nebi {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: #c1272d;
}

.top01_04text {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
}

.top01_04off {
  text-align: center;
  background: #fc550b;
  color: #ffffff;
  border-radius: 10px;
  line-height: 0;
  font-weight: bold;
  padding: 0.1em 0.5em 0.4em;
  margin: 0 3% 0 0;
  box-sizing: border-box;
}
.top01_04off_mai {
  margin-top: -0.5em;
}

.top01_04btn a,
.top01_04btn_02 a,
.top01_04btn p,
.menu01_01btn a {
  display: block;
  width: 100%;
  padding: 0.7em;
  box-sizing: border-box;
  border-radius: 50px;
  background: #fc550b;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px #c42a00;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  position: relative;
}
.top01_04btn a:hover,
.menu01_01btn a:hover {
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  box-shadow: 0 1px #c42a00;
}

.top01_04btn a span,
.top01_04btn p span,
.menu01_01btn a span {
  position: relative;
  padding: 0 0 0 1.3em;
  display: inline-block;
  line-height: 1.4;
}
.menu01_01btn a span {
  position: relative;
  padding: 0 3em 0 2em;
  display: inline-block;
}

.top01_04btn a span::before,
.top01_04btn p span::before,
.menu01_01btn a span::before {
  content: "";
  position: absolute;
  background: url("../img/common/icon_zoom.svg") no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 3px;
  transform: translate(-50%, -50%);
}

.top01_04btn_02 a:hover {
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  box-shadow: 0 1px #c42a00;
}

.menu01_01btn a span::before {
  content: "";
  position: absolute;
  background: url("../img/cms/menu_arrow.svg") no-repeat;
  background-size: contain;
  width: 20px;
  height: 11px;
  top: 50%;
  right: -1em;
  left: auto;
  transform: translate(-50%, -50%);
}

.top04_01 {
  width: 100%;
  margin: -0.2em auto 0;
}

.top04_02 {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 2em;
}

.top04_01title {
  position: relative;
  padding: 0 0 1em 0;
}
.top04_01title::after {
  content: "";
  background: none;
  background-size: contain;
  width: 100px;
  height: 116px;
  position: absolute;
  top: 20%;
  left: 2em;
  transform: translate(-50%, -50%);
}
.top04_01cate > ul > li,
.top04_02cate > ul > li {
  padding: 0 0.1em 0.1em;
  display: inline-block;
}
.top04_01cate > ul > li a,
.top04_02cate > ul > li a,
.top03_02cate > ul > li a,
.top03_02cate > ul > li span,
.top04_02cate > ul > li span {
  display: inline-block;
  background: #ffe780;
  border: #ffe780 1px solid;
  padding: 0.4em 1.2em;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 50px;
  box-sizing: border-box;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.top04_02cate > ul > li a,
.top04_02cate > ul > li span {
  background: #ffe896;
  border: #ffe896 1px solid;
  color: #231815;
}
.top03_02cate > ul > li {
  display: inline-block;
  margin: 0.1em;
}
.top03_02cate > ul > li a,
.top03_02cate > ul > li span {
  line-height: 1.2;
  background: #e6e6e6;
  border: #e6e6e6 1px solid;
  color: #666666;
}

.top03_02cate > ul > li a:hover {
  background: #666666;
  border: #666666 1px solid;
  color: #e6e6e6;
}

.top04_01cate > ul > li a:hover {
  background: #ffffff;
  color: #fbb03b;
}
.top04_02cate > ul > li a:hover {
  background: #ffffff;
  color: #171c61;
}

.top04_01 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
.top04_01 > ul > li:nth-child(1) {
  width: 100%;
}
.top04_01 > ul > li:nth-child(2) {
  width: 0;
  display: none;
}

.top04_01more {
  margin: -1.5em 1em 0 0;
}
.top04_01more a {
  color: #ffffff;
  background: #171c61;
  border-radius: 50px;
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding: 0.5em 4em 0.5em 2em;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.top04_01more a::before {
  content: "";
  background: url("../img/common/icon_arrow_FFF.svg") no-repeat;
  background-size: contain;
  width: 12px;
  height: 11px;
  position: absolute;
  top: 50%;
  right: 1.3em;
  transform: translate(-50%, -50%);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.top04_01more a:hover::before {
  right: 1.1em;
}

.top04_02 > ul,
.top04_02 > ul > li > dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.top04_02 > ul > li {
  width: 100%;
  padding: 0 0 1em 0;
  box-sizing: border-box;
}

.top04_02 > ul > li > dl > dt {
  width: 43%;
  margin: 0 2% 0 0;
}
.top04_02 > ul > li > dl > dd {
  width: 55%;
}

.top_hojyo_bnr {
  width: 100%;
  margin: 0 auto;
}

.top02_01 {
  margin: -2.2em 0 0 0;
}

.top02_01 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.top02_01 > ul > li {
  width: 90%;
  margin: 2em 5% 0;
  border: #ffded7 6px solid;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 25px;
  position: relative;
}

.top02_01num {
  /*99 385*/
  width: 46%;
  margin: -1em auto 1em;
}
.top02_01text {
  width: 90%;
  margin: 2em auto;
}

.top02_01icon {
  width: 40%;
  margin: 2em auto;
}

.top01_05btn a {
  max-width: 520px;
  width: 90%;
  margin: 0 auto;
  display: block;
  background: #fc550b;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding: 1em 2em 1em 1em;
  box-sizing: border-box;
  border-radius: 100px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.top01_05btn a::after {
  content: "";
  background: url("../img/common/icon_arrow_FFF.svg") no-repeat;
  background-size: contain;
  width: 15px;
  height: 14px;
  position: absolute;
  top: 50%;
  right: 2em;
  transform: translate(-50%, -50%);
}

.top01_05plan {
  max-width: 780px;
  margin: 0 auto;
}

.top03_01block {
  position: relative;
  margin: -3.5em 0 0 0;
}
.top03_01text {
  width: 70%;
  margin: 0 0 0 30%;
}
.top03_01img {
  width: 28%;
  max-width: 120px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.top03_01 > ul {
  display: flex; /*フレックボックス宣言*/
  flex-wrap: wrap; /*折り返しあり*/
  width: 100%; /*親要素100％*/
}

.top03_01 > ul > li {
  /*318 1380*/
  width: 48%;
  margin: 0 1% 1.5em;
  box-sizing: border-box;
  position: relative;
}
.top03_01 > ul > li a {
  display: block;
  padding: 0;
  background: #ffffff;
  border: #ffffff 4px solid;
  box-shadow: 0 5px #fc550b;
  border-radius: 20px;
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.case_block .top03_01 > ul > li a {
  border: #e7f5f7 4px solid;
  box-shadow: none;
}

.top03_01 > ul > li a:hover {
  -ms-transform: translateY(3px);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  box-shadow: 0 2px #fe3908;
}

.case_block .top03_01 > ul > li a:hover {
  box-shadow: none;
}

.top03_02text,
.top03_02fee {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.top03_01tag > ul {
  padding: 0.5em 0;
  line-height: 1.4;
}
.top03_01tag > ul > li {
  display: inline-block;
  padding: 0 1em 0 0;
  color: #f15a24;
}

.top03_01tag > ul > li::before {
  content: "#";
  color: #f15a24;
}

.top03_01tag > ul > li a {
  color: #f15a24;
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.top03_01tag > ul > li a:hover {
  color: #000000;
}

.top03_02text {
  /*border-radius: 20px 20px 0 0;*/
  border-radius: 20px;
  background: #ffffff;
  padding: 0.5em;
  box-sizing: border-box;
}

.top03_02fee {
  background: #fdd23e;
  padding: 0.5em 1em 1em 1em;
  box-sizing: border-box;
  border-radius: 0 0 20px 20px;
}

.top03_04 {
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 2em 1em;
  box-sizing: border-box;
}

.top03_04 ul {
  display: inline;
}
.top03_04 ul li {
  display: inline-block;
  margin: 0.3em 0.1em;
  font-weight: bold;
}

.top03_04menu li a {
  border-radius: 50px;
  text-decoration: none;
  padding: 0.2em 2em;
  color: #666666;
  background: #e6e6e6;
  border: #e6e6e6 1px solid;
  display: inline-block;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.top03_04area li a {
  border-radius: 50px;
  text-decoration: none;
  padding: 0.2em 2em;
  color: #ffffff;
  background: #002f74;
  border: #002f74 1px solid;
  display: inline-block;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.top03_04menu li a:hover {
  color: #e6e6e6;
  background: #666666;
}
.top03_04area li a:hover {
  color: #002f74;
  background: #ffffff;
}

.top05_01 {
  width: 70%;
  margin: 0 auto;
}

.top05_01 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
}

.top05_01 > ul > li {
  width: 100%;
  margin: 0 0 0.5em;
}

.top06_00 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.top06_00 > ul > li {
  width: 100%;
  margin: 0 0 2em;
}

.top06_01 {
  width: 96%;
  margin: 0 auto;
}
.top06_01 > ul > li {
  padding: 0 0 0.5em 0;
}

.top06_01address,
.top06_01tel,
.top06_01tel_hon,
.top06_01address_FFF,
.top06_01tel_FFF,
.top06_01tel_FFF_hon {
  position: relative;
  padding: 0 0 0 2.5em;
}

.top06_01address::before,
.top06_01tel::before,
.top06_01tel_hon::before,
.top06_01address_FFF::before,
.top06_01tel_FFF::before,
.top06_01tel_FFF_hon::before {
  position: absolute;
  content: "";
  background: url("../img/common/icon_map.svg") no-repeat;
  background-size: contain;
  width: 20px;
  height: 27px;
  top: 50%;
  left: 1em;
  transform: translate(-50%, -50%);
}
.top06_01tel::before {
  background: url("../img/common/icon_tel.svg") no-repeat;
  background-size: contain;
  width: 33px;
  height: 22px;
}
.top06_01tel_hon::before {
  background: url("../img/common/icon_tel_hon.svg") no-repeat;
  background-size: contain;
  width: 25px;
  height: 27px;
}

.top06_01address_FFF::before {
  background: url("../img/common/icon_map_FFF.svg") no-repeat;
  background-size: contain;
  width: 17px;
  height: 23px;
}
.top06_01tel_FFF::before {
  background: url("../img/common/icon_tel_FFF.svg") no-repeat;
  background-size: contain;
  width: 28px;
  height: 18px;
}
.top06_01tel_FFF_hon::before {
  background: url("../img/common/icon_tel_hon_FFF.svg") no-repeat;
  background-size: contain;
  width: 25px;
  height: 27px;
}

.top06_02 > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.top06_02 > ul > li {
  width: 90%;
  margin: 0 5% 1em 0;
}

.top07_01 {
  width: 96%;
  margin: 0 auto;
}

/*========================
	マップ
========================*/

.map_block {
  position: relative;
  padding-bottom: 56.9%; /* 100/横*縦*/
  height: 0;
  overflow: hidden;
  border-radius: 20px;
}
.map_block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube_block {
  position: relative;
  padding-bottom: 56.9%; /* 100/横*縦*/
  height: 0;
  overflow: hidden;
}
.youtube_block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width: 768px) {
  /***  メインビジュアル　フェード  ***/
  #top01,
  #top02,
  #top03,
  #top04,
  #top05,
  #top06,
  #top07,
  #top08 {
    width: 96%;
  }

  .mainasu_01 {
    margin: -16em auto 0;
  }
  .mainasu_02 {
    margin: -4em auto 0;
  }
  .mainasu_03 {
    margin: -7em auto 0;
  }
  .mainasu_04 {
    margin: -2em auto 0;
  }
  .mainasu_06 {
    margin: -3.5em auto 0;
  }

  .mainasu_08 {
    margin: -8em auto 0;
  }

  .mainasu_09 {
    margin: -2em auto 0;
  }
  /*============================
	メインコンテンツ
=============================*/

  .mainasu_01 {
    margin: -10em auto 0;
  }
  .back_DFF2F7_top4 {
    background: linear-gradient(transparent 9em, #dff2f7 0 9em);
  }
  .top01_01bnr_block > ul {
    margin: 0;
  }

  .top_hojyo_bnr {
    width: 71%;
    margin: 0 auto;
  }

  .top01_01bnr_block > ul > li {
    /* 1600*/
    width: 15%;
    margin: 0.1em 0.5%;
  }

  .top01_00 > ul > li {
    width: 32.33333%;
    margin: 0 0.5% 0.5em;
  }

  .top01_04_lp_btn {
    position: absolute;
    bottom: 1rem;
    left: 2%;
    z-index: 3;
    max-width: 500px;
    width: 95%;
  }

  .top01_04_lp > ul > li {
    width: 49%;
    margin: 0 0.5% 0.5em;
  }

  .top01_04 > ul > li {
    /*442 1380*/
    width: 48%;
    margin: 0 1% 3em 1%;
    padding: 1em 0.7em;
    box-sizing: border-box;
  }

  .top01_04text {
    padding: 0 0 0.2em 0;
  }

  .lp01_01 > ul > li {
    width: 42.92%;
    margin: 0 1%;
  }

  .top02_01 > ul > li {
    width: 31.66666%;
    margin: 2em 0.8%;
  }
  .top02_01num {
    /*99 385*/
    width: 55%;
    margin: -1.5em auto 1em;
  }

  .top02_01text {
    width: 96%;
    margin: 2em auto;
  }

  .top03_01 > ul > li {
    /*318 1380*/
    width: 31%;
    margin: 0 1% 2.5em;
  }
  .top03_01text {
    width: 60%;
    margin: 0 0 0 24%;
  }

  .top03_01new {
    top: -1.5em;
  }
  .top03_01tenji {
    top: 0.7em;
    left: 0.7em;
  }

  .top03_02fee {
    padding: 1em 0.5em;
  }

  .top03_03 > ul > li {
    width: 32%;
    margin: 0 1%;
  }

  .top03_04 {
    width: 80%;
    padding: 2em;
  }
  .top04_01 {
    width: 90%;
  }

  .top04_01title {
    padding: 0 0 0 5em;
  }
  .top04_01title::after {
    content: "";
    background: url("../img/top/top_04.svg") no-repeat;
    background-size: contain;
    width: 100px;
    height: 116px;
    position: absolute;
    top: 20%;
    left: 2em;
    transform: translate(-50%, -50%);
  }

  .top04_01 > ul > li:nth-child(1) {
    width: 70%;
  }
  .top04_01 > ul > li:nth-child(2) {
    width: 30%;
    display: block;
  }

  .top04_02 > ul > li {
    width: 50%;
    padding: 0 2%;
  }
  .top04_02 > ul > li {
    border-right: #171c61 3px dotted;
  }
  .top04_02 > ul > li:last-child {
    border-right: none;
  }

  .top05_01 {
    width: 100%;
  }

  .top05_01 > ul > li {
    width: 32.72%;
    margin: 0 0.3% 1em;
  }

  .top06_00 > ul > li {
    width: 50%;
  }

  .top06_01 {
    width: 87.3333%;
  }
  .top06_02 > ul > li {
    width: 40%;
    margin: 0 1%;
  }

  /*========================
	マップ
========================*/

  .map_block {
    position: relative;
    padding-bottom: 100%; /* 100/横*縦*/
    height: 0;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  #top01,
  #top02,
  #top03,
  #top04,
  #top05,
  #top06,
  #top07,
  #top08 {
    width: 1200px;
    padding: 40px 0;
  }

  /*============================
	メインコンテンツ
=============================*/

  .mainasu_07 {
    margin: -7em auto 0;
  }

  .top01_04 > ul > li {
    /*350 1200*/
    width: 32.333333333%;
    margin: 0 0.5% 3em;
  }
  .top01_04_top .top01_04 > ul > li {
    /*350 1200*/
    width: 23%;
    margin: 0 1% 3em;
  }

  .top03_01 > ul > li {
    /*318 1380*/
    width: 23.1%;
    margin: 0 0.95% 2.5em;
  }
}

/*=================================================================================*/
/** 1600px以上 padding: ;PCサイズ画面 **/
@media (min-width: 1024px) {
  .top01_04_lp_btn {
    position: absolute;
    bottom: 2rem;
    left: 7%;
    z-index: 3;
    max-width: 500px;
    width: 95%;
  }
}

@media (min-width: 1300px) {
  .mainasu_01 {
    margin: -20em auto 0;
  }
  .mainasu_02 {
    margin: -9em auto 0;
  }
  .back_DFF2F7_top4 {
    background: linear-gradient(transparent 15em, #dff2f7 0 15em);
  }

  /**** メインコンテンツ　****/

  /*============================
	メインコンテンツ
=============================*/
}

@media (min-width: 1440px) {
  .top01_04_lp_btn {
    position: absolute;
    bottom: 2rem;
    left: 15%;
    z-index: 3;
    max-width: 500px;
    width: 95%;
  }
}

@media (min-width: 1750px) {
  .top01_04 > ul > li {
    /*350 1200*/
    width: 29.166666%;
    margin: 0 1% 3em;
  }

  .top03_01block {
    position: relative;
    margin: -8em 0 0 0;
  }
  .top03_01img {
    width: auto;
    max-width: 249px;
    position: absolute;
    top: -2em;
    bottom: auto;
    left: 0;
  }

  .top01_04_lp {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}
