@charset "UTF-8";
html {
  background:#fff;
  overflow-x:hidden
}
body {
  font-size: 16px;
  color: #666;
  line-height: 200%;
  overflow-x: hidden;
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  background-image: url("/assets_lp/cnt/agent/images/bg.png");
  background-repeat: repeat;
  background-size: 50%;
  background-attachment: fixed;
}
img {
  width:100%
}
a {
  opacity:1;
  transition:all .3s;
  color:#ccc
}
a:hover {
  opacity:.8;
  transition:all .3s
}
.pc_only {
  display:block
}
.sp_only {
  display:none
}
.subtitle {
  width:95%;
  margin: 4rem auto 1rem auto;
}
.mapapi {
  width:85%;
  margin: 2rem auto .5rem auto;
}
.btn a {
  display:block;
  width:85%;
  margin:2rem auto 4rem auto;
  text-align:center;
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem;
}
header .logo-left img{
  width: 80%;
}
header .logo-right{
  font-size: 110%;
  font-weight: bold;
}
#contents {
  width:100%
}
#contents .contents_inner {
  width:600px;
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 10px #999
}
.section_inner {
  margin:0 auto
}
.slider_inner {
  width:600px
}
.slider_card {
  margin: 0 1rem;
}
.slider_card img {
  margin:0 auto;
  width:100%
}
.work p {
  font-size:.8em;
  text-align:center
}
.title {
  width:95%;
  position:relative;
  cursor:pointer;
  font-size:100%;
  font-weight:700;
  padding:8% 3%;
  transition:all .5s ease;
  text-align:center;
  background:#390;
  border-radius:5px;
  margin:20px auto 5px auto;
  color:#fff;
  border:2px solid #fff;
  box-shadow:3px 3px 0 #390
}
.title::before,.title::after {
  position:absolute;
  content:'';
  width:20px;
  height:5px;
  background-color:#fff
}
.title::before {
  top:46%;
  left:15px;
  transform:rotate(0deg)
}
.title::after {
  top:46%;
  left:15px;
  transform:rotate(90deg)
}
.title.close::before {
  transform:rotate(45deg)
}
.title.close::after {
  transform:rotate(-45deg)
}

.tab-container {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.tab-container .tab {
  text-align:center;
  width:50%;
  padding:.8em .8em .5em .8em;
  background:#fff;
  font-weight:700;
  font-size:90%;
  cursor:pointer;
  margin-top: .5rem;
  border-top: 4px solid #ccc;
}
.tab-container .tab:nth-child(1) {
  border-right: 1px solid #ccc;
}
.tab-container .tab:nth-child(3) {
  border-left: 1px solid #ccc;
}
.tab-container .tab img{
  width: 70%;
  text-align: center;
  margin: 0 auto;
}
.tab-container .tab.active {
  cursor:auto;
  border-top: 4px solid #8ec43d;
}
.qacontent-container {
  padding: .5em 0em;
  margin-bottom: 4rem;
}
.qacontent {
  display:none;
}
.qacontent.show {
  display:block
}
.qacontent  .tab_title {
  font-size: 140%;
  color: #666;
  margin: 2rem auto 4rem auto;
  font-weight: bold;
  padding: 1rem;
  width: 90%;
  display: table;
  padding: 1em;
  margin-bottom: 1em;
  position: relative;
  background-color: #fff;
  border:2px solid #8ec43d;
}
.qacontent  .tab_title:before, .qacontent  .tab_title:after	{
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.5em;
  border-top: 1.5em solid #8ec43d;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: '';
  position: absolute;
}
.qacontent  .tab_title:after  {
  bottom: calc( 7px - 1.5em );
  border-top: solid 1.5em #fff;
}
.qacontent  .tab_title span{
  color: #8ec43d;
}
.slick-prev {
  left:2vw;
  top: 38vw;
}
.slick-next {
  right:2vw;
  top: 38vw;
}
.slick-next:before {
  background:url(/assets_lp/cnt/agent/images/next.webp) no-repeat center center;
  background-size:contain;
  animation: anime1 0.8s ease 0s infinite alternate;
  transform-origin:center;
}
.slick-prev:before {
  background:url(/assets_lp/cnt/agent/images/prev.webp) no-repeat center center;
  background-size:contain;
  animation: anime1 0.8s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
  transform: scale(0.7,0.7);
  }
  to {
  transform: scale(1,8, 1.8);
  }
}
.slick-prev,.slick-next {
  width:60px;
  height:60px
}
.slick-prev:before,.slick-next:before {
  font-size:50px
}
.slick-arrow {
  z-index:2
}
.slick-arrow:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:1
}
#formWrap iframe {
  height:950px
}
.slider_inner_item .slick-prev {
  left:2vw;
  top: 10vw;
}
.slider_inner_item .slick-next {
  right:2vw;
  top: 10vw;
}
.slider_inner_item .slick-next:before {
  background:url(/assets_lp/cnt/agent/images/next01.webp) no-repeat center center;
  background-size:contain;
}
.slider_inner_item .slick-prev:before {
  background:url(/assets_lp/cnt/agent/images/prev01.webp) no-repeat center center;
  background-size:contain;
}

.slider_inner_item .slick-prev , .slider_inner_item .slick-next {
  width:30px;
  height:30px
}
.slick-dots li button:before {
  font-size:20px!important;
  margin: 3vw 0;
}

#formWrap01 {
  margin-top: 2rem;
}
div#fix {
  display:none;
}
div#fix.fixed {
  display:none;
  position:fixed;
  bottom:0;
  width:100%;
  box-sizing:border-box;
  background:rgba(0,0,0,.5);
  z-index:100;
  max-width:none
}
div#fix img {
  width:80%;
  float:none;
  max-width:300px;
  margin:4rem auto 1rem auto;
  display:block
}
div#fix.fixed img:hover {
  opacity:.9;
  transition:.5s
}
#consultation {
  margin-top: 4vw;
}
#consultation2 {
  margin-top: 0vw;
}
.fuwafuwa1  {
  animation: floating-y 1.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y  {
  0%  {
    transform: translateY(-10%);
  }
  100%  {
    transform: translateY(10%);
  }
}
footer  {
  background: #333;
  padding-bottom: 3vw;
  margin-top:3vw;
}
footer .footer_inner {
  font-size: 80%;
  color: #ccc;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3vw 0;
}
footer .footer_inner img {
  width: 146px;
}
footer .copy {
  margin: 0 auto;
  border-top: 1px dotted #666;
  font-size: 80%;
  text-align: center;
  color: #888;
  padding: 1vw 0;
}
footer .footer_inner {
  width: 90%;
}
footer .footer_inner p {
  font-size: 80%;
}

/********************
    mapapi
********************/
.mapapi {
  width: 100%;
  margin-bottom:4rem;
}
.mapapi .mapapi_inner{
  width: 580px;
  margin: 0 auto;
}

.mapapi  .mapapi_form {
  margin-bottom: 1rem;
  text-align: center;
  background: #f4d400;
  border-radius: 10px;
  padding: 2vw 0;
  box-shadow: 0 8px 0 #e9af00;
  position: relative;
}
.mapapi .mapapi_form .api_icon{
  width: 80px;
  position: absolute;
  top: -50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mapapi .mapapi_form .blink{
  font-size: 120%;
  color: #0a2300;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
  margin-bottom: .5rem;
}
.mapapi_form input,select{
  flex-grow: 1;
  width: 95%;
  display: block;
  border: 1px solid #ddd;
  padding: 10px ;
  font-size: 150%;
  display: block;
  margin: 0 auto;
}
.mapapi_form .forminner {
  display: block;
  position: relative;
}
.mapapi_form button {
  position: absolute;
  top: 26%;
  left:11.5%;
  padding: 0;
  border: none;
  background: none;
  color: #333;
  font-size: 1rem;
  transition: 0.5s;
  color: #d95440;
}
.mapapi_form .delete {
  position: absolute;
  top: 25%;
  right:4%;
  padding: 0;
  border: none;
  background: none;
  color: #333;
  font-size: 1rem;
  transition: 0.5s;
  color: #666;
}
.mapapi_form input{
  font-size:110%;
  font-weight: bold;
}
.mapapi_form input::placeholder{
  font-size:100%;
  font-weight: normal;
}
.mapapi_form input:focus {
  outline: 0;
  box-shadow: 0 0 5px #e1e1e1, 0 0 10px #e1e1e1, 0 0 15px #e1e1e1;
}
.dli-close-circle {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
}
.dli-close-circle > span {
  width: 52%;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.dli-close-circle > span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
#mapapiresult  {
  margin-top: 10px;
}
.mapitem {
  margin-bottom: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  width:100%;
  margin: 0 auto 20px auto;
  min-height: 140px;
  background: #fff;
  text-align: left;
}
#mapapiresult h4 {
  color: #555;
  font-weight: normal;
  font-size: 90%;
}
/* 親Swiperにスペースをつける */
.swiper {
  position: relative;          /* 相対位置基準を明示 */
  padding-bottom: 40px;        /* ページネーションの高さ分だけ余白を確保 */
}
.swiper-wrapper {
  margin-bottom:30px;
}
/* ページネーション位置調整（絶対配置） */
.swiper-pagination {
  position: absolute;
  bottom:-10px !important; 
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  margin-top:30px !important; 
  height:50px !important;  
}
.nothing {
  background: #eee;
  padding: 10px ;
  width: 100%;
  border-radius: 10px;
  text-align:center;
}
.search-history-list {
  margin: 10px 0;
  padding: 0 15px;
}
.search-history-list li{
  display:inline;
  list-style-type: none;
  color: #555;
  padding: 0 5px;
  text-decoration: underline;
  font-size: 80%;
}
#mapapiresult .areadetail {
  background: #f6f6f6;
  display: block;
  width: 100%;
  color: #666;
  text-shadow: 0 1px 0 #fff;
  padding: .5rem;
  margin-bottom: 10px;
  border-radius: 30px;
  text-align: center;
  font-size: 100%;
  font-weight: bold;
}
#mapapiresult .distdetail {
  color: #ff6600;
  font-weight: bold;
  font-size: 120%;
}
#mapapiresult .iconpin {
  color: #5da7ad;
  font-weight: bold;
}

#mapapiresult .areabtn{
  display:flex;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
}
#mapapiresult .areabtn span{
  color: #e35844;
  letter-spacing: .1rem;
  font-weight: bold;
}
#mapapiresult .areabtn span i{
  color: #fdb400;
}
#mapapiresult .areabtn a{
  display: block;
  margin: 10px auto 0 auto;
  color: #fff;
  text-decoration: none;
  font-size: 100%;
  width: 60%;
  padding: 10px 0;
  text-align: center;
  background: #ffc000;
  font-weight: bold;
  text-shadow: 0 1px 0 #444;

}
#mapapiresult .areabtn .pochibtn{
  background: #e35844;
}
#mapapiresult .areabtn a:hover{
  background: #ffe400;
}
.mapitem .mapiteminfo {
  display: flex;
  margin-top: 20px;
}
.mapitem .mapiteminfo .mapiteminfo_bn{
  width: 40%;
}
.mapitem .mapiteminfo .mapiteminfo_bn img{
  border: 1px solid #ccc;
}
.mapitem .mapiteminfo .mapiteminfo_text{
  margin-left: 10px;
  width: 60%;
}
.mapitem .mapiteminfo .mapiteminfo_text p{
  border-bottom: 1px dotted #ccc;
  padding: 5px 0;
  font-size: 100%;
}
.mapitem .mapiteminfo .mapiteminfo_text p i{
  color: #5da7ad;
}
.mapitem .mapiteminfo .mapiteminfo_text .sample {
  font-size: 80%;
  margin-left: 10px;
}
.mapitem .ince{
  text-align: center;
  font-size: 90%;
  color: #666;
  font-weight: bold;
  margin: 1rem 0 0 0;
}
.mapitem .ince span{
  color: #ffc000;
}
@media (max-width:750px) {
  .pc_only {
    display:none
  }
  .sp_only {
    display:block
  }
  #formWrap iframe {
    height:1000px
  }
  header {
    padding:.5rem;
  }
  header .logo-left img{
    width: 70%;
  }
  header .logo-right{
    font-size: 100%;
  }
  #contents .contents_inner {
    width:100%
  }
  .subtitle {
    width:95%;
  }
  .mapapi {
    width:95%;
  }
  .btn a {
    width:95%;
  }
  .work {
    width:100%
  }
  .qacontent  .tab_title {
    width: 80%;
    font-size: 120%;
  }
  .slider_inner {
    width:100%
  }
  .slick-prev,.slick-next {
    width:50px;
    height:50px
  }
  .btn {
    margin:10vw auto
  }
  .slick-prev {
    left:2vw;
    top: 119vw;
  }
  .slick-next {
    right:2vw;
    top: 119vw;
  }
  /**item slick**/
  .slider_inner_item .slick-prev {
    left:2vw;
    top: 32vw;
  }
  .slider_inner_item .slick-next {
    right:2vw;
    top: 32vw;
  }
  .slider_inner_item .slick-prev , .slider_inner_item .slick-next {
    width:30px;
    height:30px
  }
  .slider_inner_item .slick-next:before {
    background:url(/assets_lp/cnt/agent/images/next01.webp) no-repeat center center;
    background-size:contain
  }
  .slider_inner_item .slick-prev:before {
    background:url(/assets_lp/cnt/agent/images/prev01.webp) no-repeat center center;
    background-size:contain
  }
  .slick-dots li button:before {
    font-size:20px!important;
    margin: 16vw 0;
  }
  footer .footer_inner img {
    width: 50px;
  }
  .tab-container .tab img{
    width: 90%;
  }
  .mapapi{
    margin-top: 30px;
  }
  .mapapi .mapapi_icon{
    width: 320px;
    margin-top: 30px;
  }
  .mapapi .mapapi_inner{
    width: 95%;
    margin: 15px auto 0 auto;
    padding: 0;
  }
  .mapapi  .mapapi_title {
    font-size: 110%;
    margin: 8px auto;
  }
  .mapapi .mapapi_form .api_icon{
    width: 60px;
    top: -45px;
  }
  .mapapi .mapapi_form .blink{
    font-size: 100%;
  }
  .mapapi  .mapapi_form {
    margin-bottom: 30px;
    border-radius: 10px;
    padding: 4vw 5vw;
  }
  .mapapi_form input,select{
    flex-grow: 1;
    width: 100%;
    display: block;
    padding: 1vw 9vw 1vw 7vw;
    border-radius: 20px;
    font-size: 100%;
    margin-top: 10px;
  }
  .mapapi_form button {
    position: absolute;
    top: 1vw;
    left:2vw;
    color: #333;
    font-size: 1rem;
    transition: 0.5s;
    color: #d95440;
  }
  .mapapi_form .delete {
    top: 1.3vw;
    right:2vw;
  }
  .mapitem {
    width:100%;
    padding: 10px;
  }
  .swiper-wrapper {
    margin-bottom:30px !important;
  }
  .search-history-list li{
    font-size: 80%;
  }
  #mapapiresult {
    margin: 0;
    padding: 0;
  }
  #mapapiresult .areadetail {
    max-width: 100%;
  }
  #mapapiresult .areabtn{
    display:block;
  }
  #mapapiresult .areabtn a{
    width: 80%;
  }
  #mapapiresult h4{
    line-height: 140%;
  }
  .mapitem .mapiteminfo {
    display:block;
    margin-top: 10px;
  }
  .mapitem .mapiteminfo .mapiteminfo_bn{
    width: 70%;
    margin: 0 auto;
  }
  .mapitem .mapiteminfo .mapiteminfo_bn a{
    width: 100%;
  }
  .mapitem .mapiteminfo .mapiteminfo_bn img{
    width: 100%;
  }
  .mapitem .mapiteminfo .mapiteminfo_text{
    margin-left: 0px;
    margin-top: 10px;
    width: 100%;
  }
  .mapitem .mapiteminfo .mapiteminfo_text p{
    padding: 5px 0;
    font-size: 80%;
    line-height: 80%;
  }
  .mapitem .mapiteminfo .mapiteminfo_text .sample {
    font-size: 70%;
    margin-left: 0px:
  }
  .mapitem .ince{
    font-size: 80%;
    font-weight: normal;
  }
}