@charset "UTF-8";

.floatingMessage {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: 1600px;
  z-index: 1;
  font-size: 25vw;
  line-height: 1;
  pointer-events: none;
  color: #ececec;
}
.lnav-02 .floatingMessage { height: 1700px; }
.lnav-03 .floatingMessage { height: 1790px; }
.lnav-04 .floatingMessage { height: 1650px; }

@media only screen and (max-width: 1500px) {
.lnav-01 .floatingMessage { height: 1550px; }
.lnav-02 .floatingMessage { height: 1700px; }
.lnav-04 .floatingMessage { height: 1650px; }
}
@media only screen and (max-width: 1300px) {
.lnav-01 .floatingMessage { height: 1500px; }
.lnav-02 .floatingMessage { height: 1650px; }
.lnav-03 .floatingMessage { height: 1810px; }
.lnav-04 .floatingMessage { height: 1530px; }
}

.floatingMessage p {
  position: absolute;
  overflow: hidden;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.floatingMessage p span {
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  padding-left: 80px;
  display: inline-block;
}

h2.h201 {
  padding: 30px 0px 0;
  text-align: left;
  margin-bottom: 30px;
  font-weight: bold;
}
h2.h201 .en {
  color: #ff490f;
  font-size: 90px;
  line-height: 1.1;
  display: block;
}
h2.h201 .jp {
  color: #000;
  font-size: 40px;
  line-height: 1.2;
  margin-top: 20px;
  display: block;
}

@media only screen and (max-width: 782px) {
  main { padding-bottom: 0px; }
  h2.h201 {
    padding: 25px 0;
    text-align: center;
  }
  h2.h201 .en {
    font-size: 55px;
  }
  h2.h201 .jp {
    font-size: 30px;
  }
}

@media only screen and (max-width: 500px) {
  h2.h201 .en {
    font-size: 11vw;
  }
  h2.h201 .jp {
    font-size: 6vw;
  }
}


#businessSection {
  height: 730px;
  background: url("../img/home/bg_town@2x.jpg") no-repeat calc(50% + 123px) top / auto 100%;
  box-sizing: border-box;
  border-top: #eee 1px solid;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
#businessSection::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0, 0.01);
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 50%);
  background: -o-linear-gradient(bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 50%);
  background: linear-gradient(to top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 50%);
}
#businessSection ul {
  position: absolute;
  width: 1530px;
  height: 100%;
  left: calc(50% + 123px);
  top: 50%;
  z-index: 2;
}
#businessSection ul li {
  position: absolute;
}
#businessSection ul li a .en {
  color: #ff490f;
  font-style: normal;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}
#businessSection ul li a .jp { color: #000; font-weight: bold; line-height: 1.1; margin-top: 5px;}
#businessSection ul li a {
  background: url("../img/home/hukidashiShaow@2x.png") no-repeat center 50% / 100% auto;
  width: 255px;
  height: 169px;
  margin: calc(-255px / 2) 0 0 calc(-169px / 2);
  padding: 17px 22px 17px 14px;
  box-sizing: border-box;
  /*width: 221px;
  height: 133px;
  background: url("../img/home/hukidashi@2x.png") no-repeat center 50% / 221px 133px;*/
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  transition: all 0.5s ease;
}
#businessSection ul li a:hover {
  background-size: 105% auto;
}
#businessSection ul li:nth-child(1) {
  left: -2%;
  top: 0%;
}
#businessSection ul li:nth-child(2) {
  left: -17%;
  top: -19%;
}
#businessSection ul li:nth-child(3) {
  left: -35%;
  top: -4%;
}
#businessSection ul li:nth-child(4) {
  left: -22%;
  top: 28%;
}
@media only screen and (min-width: 783px) {
  #businessSection ul li.current a {
    background: url("../img/business/hukidashiShaow.png") no-repeat center 50% / 100% auto;
    width: 330px;
    height: 204px;
    margin: calc(-330px / 2) 0 0 calc(-204px / 2);
    padding: 17px 22px 17px 14px;
  }
  #businessSection ul li.current a .en { color: #fff;font-size: 26px;}
  #businessSection ul li.current:nth-child(1) {
    left: -5%;
    top: 5%;
  }
  #businessSection ul li.current:nth-child(2) {
    left: -17%;
    top: -19%;
  }
  #businessSection ul li.current:nth-child(3) {
    left: -37%;
    top: 0%;
  }
  #businessSection ul li.current:nth-child(4) {
    left: -18%;
    top: 26%;
  }
}

@media only screen and (max-width: 782px) {
  #businessSection {
    height: auto;
    background: none;
    border-top: #eee 1px solid;
  }
  #businessSection ul {
    position: relative;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
  }
  #businessSection ul li {
    position: relative;
    width: 50%;
    background: #b6ceb6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
  }
  #businessSection ul li:nth-child(2),
  #businessSection ul li:nth-child(3){ background: #a7bca7;}
  #businessSection ul li.current { background: #ff490f !important;}

  #businessSection ul li a .en {
    color: #000;
    font-style: normal;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0;
    display: block;
    font-weight: bold;
  }
  #businessSection ul li.current a .en {color: #fff;}
  #businessSection ul li a .jp { color: #fff; font-size: 12px; font-weight: bold; line-height: 1.1; margin-top: 3px;display: block;}
  #businessSection ul li a {
    display: flex;
    
    background-image: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    /*width: 221px;
    height: 133px;
    background: url("../img/home/hukidashi@2x.png") no-repeat center 50% / 221px 133px;*/
    text-align: center;
    justify-content: flex-start;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    transition: all 0.5s ease;
  }
  #businessSection ul li a:hover {
    background-size: 30px auto;
  }

  #businessSection ul li:nth-child(1),
  #businessSection ul li:nth-child(2),
  #businessSection ul li:nth-child(3),
  #businessSection ul li:nth-child(4),
  #businessSection ul li.current:nth-child(1),
  #businessSection ul li.current:nth-child(2),
  #businessSection ul li.current:nth-child(3),
  #businessSection ul li.current:nth-child(4){
    left: auto;
    top: auto;
  }
}

.lnav li .en,
.lnav li .jp br{ display:none;}
.lnav,
.contents {
  margin: 0px auto; width: 1360px; max-width:90%; padding: 20px 0;
  position: relative;
  z-index: 2;
}
.lnav ul {
  display: flex;
  justify-content: center;
}
.lnav li {
  margin: 0 10px;
}
.lnav li a {
  padding: 5px;
  color: #ff490f;
  font-weight: bold;
}
.lnav li.current a {
  border-bottom: #000 3px solid;
}
.contents {
}
.img_text {
  display: flex;
}
.img_text .text {
  width: 55%;
}
.img_text figure {
  width: 45%;
  padding-left: 40px;
  box-sizing: border-box;
}
@media only screen and (max-width: 782px) {
  .contents {
  }
  .img_text {
    flex-direction: column-reverse;
    align-items: center;
  }
  .img_text .text {
    width: auto;
  }
  .img_text figure {
    width: auto;
    padding-left: 0px;
    text-align: center;
  }
  .img_text figure img { max-width: 75%;}

}

.photos {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 60px);
  margin-left: -30px;
}
.photos .set { width: calc(50% - 60px); margin: 80px 30px 0; position: relative;}
.photos .set .num {
  font-style: normal;
  position: absolute;
  left: calc(50% - 40px);
  top: -40px;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-weight: bold;
  z-index: 2;
  font-size: 60px;
  border-radius: 50%;
}
.photos .set figure {
  position: relative;
  z-index: 1;
}
.photos .set h4 { display: flex; align-items: center; margin-top: 2.2rem;letter-spacing: 0;}
.photos .set h4 .en { font-size: 18px;font-style: normal; margin-right: 10px;}
.photos .set h4 .jp { font-size: 32px; color: #ff490f; line-height: 1.2; font-weight: bold;}

@media only screen and (max-width: 782px) {
  .photos {
    display: block;
    width: auto;
    margin-left: 0px;
  }
  .photos .set { width: auto; margin: 60px 0px 0;}
  .photos .set .num {
    left: calc(50% - 25px);
    top: -25px;
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
  .photos .set h4 { margin-top: 1.8rem;}
  .photos .set h4 .en { font-size: 12px;}
  .photos .set h4 .jp { font-size: 20px;}
}

.example {
  margin-top: 80px;
}
.example h4 { text-align: center;}
.example h4 .jp { font-size: 32px; display: block;}
.example h4 .en { font-size: 60px; color: #ff490f; display: block; line-height: 1;}
@media only screen and (max-width: 782px) {
  .example {
    margin-top: 40px;
  }
  .example h4 .jp { font-size: 25px;}
  .example h4 .en { font-size: 40px;}
}

.slider {
  margin: 25px 0 0;
  text-align: center;
}
.slider img {
  width: 1260px;
  max-width: calc(100% - 100px);
  margin: 0 auto;
}

.swiper-slide .line span {
  color: #ff490f;
  position: relative;
  display: inline-block;
}
.swiper-slide .line span::before,
.swiper-slide .line span::after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  top: 50%;
  background-color: #ff490f;
}
.swiper-slide .line span::before { left: -65px;}
.swiper-slide .line span::after { right: -65px;}
.swiper-slide .caption { font-size: 32px; line-height: 1.2; font-weight: bold; margin-top: 10px; margin-bottom: 60px;}


.swiper-button-prev,
.swiper-button-next {
  background: #ff490f;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  color: #fff;
  top: calc(50% - 100px);
}

.swiper-button-prev::after,
.swiper-button-next::after { transform: scale(0.7);}

.slider .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  margin: 0 10px!important;
}
.swiper-pagination-bullet-active {
  background-color: #ff490f;
}

@media only screen and (max-width: 782px) {
  .slider img {
    width: 100%;
    max-width: inherit;
  }

  .swiper-slide .line span {
    color: #ff490f;
    position: relative;
    display: inline-block;
  }
  .swiper-slide .line span::before,
  .swiper-slide .line span::after {
    content: "";
    width: 25px;
    height: 1px;
    position: absolute;
    top: 50%;
    background-color: #ff490f;
  }
  .swiper-slide .line span::before { left: -35px;}
  .swiper-slide .line span::after { right: -35px;}
  .swiper-slide .caption { font-size: 20px; line-height: 1.2; font-weight: bold; margin-top: 10px; margin-bottom: 120px;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 70px;}
  .swiper-button-prev,
  .swiper-button-next {
    background: #ff490f;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
    top: auto;
    bottom: 0px;
  }
  .swiper-button-prev { left: calc(50% - 60px);}
  .swiper-button-next { right: calc(50% - 60px);}
  .swiper-button-prev::after,
  .swiper-button-next::after { transform: scale(0.6);}

}

.flow {
  margin-top: 40px;
  background-color: #ff490f;
  text-align: center;
  padding: 80px 0;
}
.flow .inner1 {
  margin: 0px auto; width: 1360px; max-width:90%; padding: 20px 0;
}
.flow h4 { text-align: center;}
.flow h4 .jp { font-size: 32px; display: block; line-height: 1;}
.flow h4 .en { font-size: 60px; color: #fff; display: block; line-height: 1.3;}
@media only screen and (max-width: 782px) {
  .flow {
    margin-top: 40px;
  }
  .flow h4 .jp { font-size: 25px;}
  .flow h4 .en { font-size: 40px;}
}

.to5 {
  display: flex;
  justify-content: space-between;
}
.to5 dl {
  width: calc(20% - 24px);
  margin-top: 50px;
  position: relative;
}
.to5 dl:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 20px;
  width: 60px;
  height: 60px;
  border: transparent 30px solid;
  border-left: #fff 30px solid;
  box-sizing: border-box;
}
.to5 dl dt .en {
  display: block;
  font-size: 80px;
  font-weight: bold;
  line-height: 1.2;
}
.to5 dl dt .jp {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.to5 dl dd figure {
  
}
.to5 dl dd p {
  color: #fff;
  font-size: 90%;
  line-height: 1.4;
}
@media only screen and (max-width: 782px) {
  .to5 {
    display: block;
  }
  .to5 dl {
    width: auto;
    margin-top: 60px;
  }
  .to5 dl:not(:last-child)::after {
    content: "";
    position: absolute;
    right: auto;
    left: calc(50% - 15px);
    top: auto;
    bottom: -55px;
    width: 30px;
    height: 30px;
    border: transparent 15px solid;
    border-top: #fff 15px solid;
  }
  .to5 dl dt {
    display: flex;
  }
  .to5 dl dt .en {
    font-size: 60px;
    width: 115px;
  }
  .to5 dl dt .jp {
    font-size: 25px;
    height: auto;
    width: calc(100% - 115px);
    text-align: left;
    justify-content: flex-start;
  }
  .to5 dl dd {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .to5 dl dd figure {
    width: 115px;
    text-align: left;
  }
  .to5 dl:nth-child(3) dd figure img { width: 92%;}
  .to5 dl:nth-child(4) dd figure img { width: 92%;}
  .to5 dl dd p {
    width: calc(100% - 115px);
    text-align: left;
    margin-top: 0;
  }
}