@charset "UTF-8";
/* top.css */

#hero {
  position: relative;
  background: #FED501;
  overflow: hidden;
  width: 100%;
}
.hero-right {
  position: relative;
  background-color: #f2f2f4;
  overflow: hidden;
}
.hero-right-bg {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -20px;
}
.hero-mask {
  position: absolute;
  top: 0;
  left: 0;
  background: #FED501;
  height: 100%;
  width: 100%;
  transition: left .4s cubic-bezier(0.77,0,0.175,1);
}
.hero-copy, .hero-txt {
  font-weight: bold;
}
@media (max-width: 768px) {
  #hero h2 {
    font-size: 1.8em;
    text-align: center;
  }
  .hero-left {
    text-align: center;
    padding: 20px 4vw;
  }
  .hero-right { padding: 20px 4vw 70px;}
  .hero-right-bg { width: 100%; transform: translateX(-100%);}
  .hero-right-bg img {
    height: 100px;
    width: auto;
    max-width: inherit;
  }
  .hero-right-inner {
    position: relative;
    z-index: 2;
  }
  .hero-copy {
    font-size: 1.2em;
    text-align: center;
    margin: 0 -4vw 10px;
  }
  .hero-copy span { font-size: 1.4em;}
  section:not(#hero) h2 {
    text-align: center;
  }
  section:not(#hero) h2 span {
    font-size: 2.5em;
    letter-spacing: 0.05em;
  }
  section:not(#hero) h2 strong {
    font-size: 1.3em;
    font-feature-settings : "palt";
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
  }
  .hero-mask { z-index: 2;}
}
@media (min-width: 769px) {
  #hero { display: flex;}
  .hero-left,
  .hero-right {
    flex: 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    line-height: 2.5;
    /* text-align: center; */
    height: 458px;
  }
  .hero-right-bg {
    transform: translateX(-50%);
  }
  #hero h2 {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
  }
  #hero h2 span {
    display: block;
  }
  section:not(#hero) h2 span {
    font-size: 80px;
    line-height: 90px;
    letter-spacing: 0.05em;
  }
  section:not(#hero) h2 strong {
    font-size: 32px;
    font-feature-settings : "palt";
    line-height: 1;
    letter-spacing: 0.05em;
    margin-top: 8px;
    padding-left: 4px;
  }
  h2 strong { margin-left: -5px;}
  .hero-copy {
    font-size: 28px;/*32*/
    transform: translateY(-16px);/*32*/
  }
  .hero-copy span { font-size: 48px;}/*50*/
  .hero-txt { transform: translateY(-24px);}
}


/* concept */
.concept-item-ttl {
  font-size: 1.2em;
}
.concept-item::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 24px 0 0;
  border-color: #fed501 transparent transparent transparent;
}
@media (max-width: 768px) {
  #concept {
    display: flex;
    flex-direction: column;
    padding: 50px 4vw 0;
  }
  .concept-visual {
    background: #f2f2f4;
    order: 1;
    margin: 30px -4vw 0;
    padding: 25px 0;
    text-align: center;
  }
  .concept-visual img {
    height: auto;
    width: 80vw;
  }
  .concept-heading {
    order: 0;
  }
  .concept-lead { text-align: center;}
  .concept-contents {
    background: #f8f6f4;
    order: 2;
    margin: 0 -4vw;
    padding: 30px 4vw 70px;
  }
  .concept-item {
    position: relative;
    background: #fff;
    box-shadow: 0 5px 7px rgba(0,0,0,0.1);
    padding: 20px;
  }
  .concept-item + .concept-item { margin-top: 25px;}
  .concept-item-ttl {
    font-size: 1.5em;
  }
  .concept-item-txt {
    font-size: 14px;
    text-align: justify;
  }
}
@media (min-width: 769px) {
  #concept {
    background: linear-gradient(transparent 0%, transparent 50%, #F8F6F4 50%, #F8F6F4 100%);
    position: relative;
    /* padding: 160px 0 0; */
  }
  .concept-visual {
    background: url(/img/_hero.jpg) no-repeat center center;
    background-size: cover;
    height: 600px;
    /* margin-left: auto; */
    padding-top: 96px;
    padding-left: calc(50% + 128px);
    /* transition-delay: 1s; */
    /* text-align: center; */
    width: 100%;
  }
  .concept-heading {
    position: absolute;
    color: #fff;
    /* top: 280px; */
    top: 130px;
    /* left: 0;
    right: 0;
    text-align: center; */
    /* left: calc(50% - 570px); */
    left: calc(50% - 520px);
  }
  .concept-lead {
    font-size: 18px;
    margin-top: 48px;
    padding-left: 5px;
  }
  .concept-contents {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto -160px;
    width: 1140px;
  }
  .concept-item {
    position: relative;
    background: #fff;
    box-shadow: 0 7px 7px rgba(0,0,0,0.1);
    margin: 2%;
    padding: 42px 40px 50px;
    transform: translateY(-160px);
    width: 30%;
  }
  .concept-item:first-child,
  .concept-item:nth-child(4n) {
    margin-left: 0;
  }
  .concept-item-ttl {
    font-size: 30px;
    letter-spacing: 0.01em;
    margin-bottom: 5px;
  }
  .concept-item-txt {
    text-align: justify;
    text-justify: inter-ideograph;
  }
}

/* service */
#service {
  position: relative;
  overflow: hidden;
}
#service h3 {
  font-size: 1.5em;
  margin-bottom: 0.8em;
}
#service h4 {
  font-size: 1.2em;
  margin: 1.2em 0 0.4em;
}
#service h4 span {
  background: linear-gradient(transparent 0%, transparent 65%, #FED501 65%, #FED501 100%);
}
.service-contents-2 ul {
  margin-left: 1.5em;
}
.service-ttl {
  /* background: linear-gradient(transparent 0%, transparent 70%, #fff 70%, #fff 100%); */
  line-height: 1.3;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}
.service-bg-city {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
}
@media (max-width: 768px) {
  #service { padding: 50px 4vw 120px;}
  .service-bg-city {
    height: 120px;
    overflow: hidden;
  }
  .service-bg-city img {
    height: 120px;
    width: auto;
    max-width: inherit;
    position: absolute;
    top: 0;
    right: 0;
  }
  #service p {
    font-size: 14px;
    text-align: justify;
  }
  .service-box {
    background: #FED501;
    margin-top: 25px;
    padding: 20px;
  }
  .service-ttl {
    font-size: 18px !important;
  }
  .service-block {
    margin-top: 40px;
  }
}
@media (min-width: 769px) {
  .picture-1 {
    /* background: url(../img/visual_service.jpg) no-repeat center bottom; */
    /* background: url(../img/vis_service.jpg) no-repeat center bottom; */
    background: url(../img/pic.jpg) no-repeat center bottom;
    background-attachment: fixed;
    background-size: cover;
    height: 560px;
  }
  .service-box:nth-child(2),
  .service-box:nth-child(5) { transition-delay: 0.3s;}
  .service-box:nth-child(3),
  .service-box:nth-child(6) { transition-delay: 0.6s;}
  #service {
    padding: 104px 0 184px;
    margin: 0 auto;
    width: 1140px;
  }
  .service-heading {
    display: flex;
    align-items: center;
  }
  .service-heading p:last-child {
    padding-top: 32px;
    padding-left: 64px;
  }
  .service-lead {
    font-size: 18px;
  }
  .service-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 24px;
    width: 100%;
  }
  .service-box {
    position: relative;
    background: #fed501;
    /* flex: 0 30%; */
    width: 30%;
    margin-top: 40px;
    /* margin-left: 5%; */
    padding: 32px 32px 40px;
  }
  .service-box.is-full-width {
    width: 100%;
  }
  .service-box::after {
    border: 1px solid #000;
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    height: calc(100% - 24px);
    width: calc(100% - 24px);
  }
  /* .service-box:first-child,
  .service-box:nth-child(4n) {
    margin-left: 0;
  } */
  .service-ttl {
    font-size: 17px;
  }
  .service-box span {
    font-size: 14px;
  }
  #service h3 {
    font-size: 1.8em;
  }
  .service-contents-2 {
    display: flex;
    justify-content: space-between;
    margin-top: 96px;
    padding-bottom: 200px;
  }
  .service-block {
    flex: 0 48%;
  }
}


/* company */
#company {
  background: #fed501;
  padding: 50px 4vw 60px;
}
#company h3 {
  font-size: 1.5em;
  padding-bottom: 0.5em;
  text-align: center;
}
@media (max-width: 768px) {
  .company-contents > div {
    margin-top: 30px;
  }
  .company-contents dl + dl {
    margin-top: 10px;
  }
  .company-contents dt {
    padding: 0.5em;
  }
  .company-contents dd {
    background: rgba(255,255,255,0.4);
    border-radius: 5px;
    padding: 0.5em;
  }
}
@media (min-width: 769px) {
  #company { padding: 104px 0;}
  #company h3 {
    font-size: 24px;
  }
  .company-heading {
    text-align: center;
  }
  .company-contents {
    display: flex;
    justify-content: space-between;
    margin: 64px auto 0;
    width: 1140px;
  }
  .company-contents > div {
    flex: 0 48.5%;
  }
  .company-box {
    border: 1px solid #000;
  }
  .company-contents dl {
    display: flex;
  }
  .company-contents dl + dl {
    border-top: 1px solid #000;
  }
  .company-contents dt, dd {
    padding: 16px;
  }
  .company-contents dt {
    flex: 0 150px;
  }
  .company-contents dd {
    background: rgba(255,255,255,0.4);
    /* background: #f2f2f4; */
    flex: 1;
  }
  #map { height: 480px;}
}
#map { position: relative;}
#map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}