@charset "UTF-8";
/*======================================
common
/*======================================*/
.title-EN h1 {
  text-align: center;
  font-size: 200%;
}
/*======================================
FV
/*======================================*/
.front-img {
  position: relative;
  top: 0;
  right: 0;
  height: auto;
  width: 100%;
}
.front-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: scale(1.2);
}
@media screen and (min-width:768px) {
  #front header {
    min-height: 675px;
  }
} /*END query*/
@media screen and (orientation: portrait) {
  #front-bgFixd {
    background: url(../img/front-header-SP.jpg) no-repeat center;
    background-size: cover;
  }
  #services-bgFixd {
    background: url(../img/front-bg-SP.jpg) no-repeat center;
    background-size: cover;
  }
}
@media screen and (orientation: landscape) {
  #front-bgFixd {
    background: url(../img/front-header-PC.jpg) no-repeat center bottom;
    background-size: cover;
  }
  #services-bgFixd {
    background: url(../img/front-bg-PC.jpg) no-repeat center;
    background-size: cover;
  }
}
/*======================================
PRblock
/*======================================*/
#PRblock {
  position: relative;
}
#PRblock .img {
  position: absolute;
  width: 53%;
  margin-top: -2.5em;
  right: -3.5rem;
}
#PRblock .txt {
  font-size: 90%;
}
#PRblock .txt h1 {
  text-align: left;
  font-size: 210%;
  letter-spacing: 6px;
  margin-bottom: .7em;
}
#PRblock .txt h1 i {
  font-size: 80%;
}
#PRblock .txt h2 {
  text-align: left;
  font-size: 100%;
  line-height: 2em;
  letter-spacing: 5px;
}
#PRblock .desc {
  display: block;
}
#PRblock .desc p {
  line-height: 2em;
  letter-spacing: 3px;
}
#PRblock .desc p:not(:last-of-type) {
  margin-bottom: 1em;
}
/*======================================
#news
/*======================================*/
#news h1 {
  text-align: left;
  font-size: 150%;
  margin-bottom: .5em;
}
#news .loop {
  text-align: left;
}
#news .loop p {
  width: 8em;
  line-height: 1.4em;
}
#news .loop h2 {
  flex: 1;
  line-height: 1.4em;
}
#news .loop li:not(:last-of-type) {
  margin-bottom: .5em;
}
/*======================================
#services
/*======================================*/
#services .lede p {
  text-align: center;
  font-size: 110%;
  letter-spacing: 4px;
}
#services .lede p strong {
  display: block;
  font-size: 140%;
  line-height: 1.5em;
  letter-spacing: 8px;
  margin-bottom: .5em;
}
#services .menu {
  text-align: center;
}
#services .menu p {
  text-align: center;
  font-size: 110%;
  letter-spacing: 5px;
}
#services .menu ul {
  margin-top: 1.5em;
}
#services .menu li {
  background: rgba(15, 20, 75, .8);
  border: 1px solid rgba(205, 180, 135, .8);
  padding: 1.5em;
}
#services .menu li:not(:last-of-type) {
  margin-bottom: 1em;
}
#services .menu li h3 {
  font-size: 150%;
  margin-bottom: .5em;
}
#services .menu li p {
  font-size: 100%;
  letter-spacing: 3px;
}
#services .menu li aside {
  font-size: 80%;
  margin-top: .7em;
}
#services .crossover p {
  text-align: center;
  margin-top: 1.5em;
  font-size: 120%;
  letter-spacing: 5px;
}
/* info --------------*/
#services .info .title h2 {
  text-align: center;
  font-size: 150%;
  letter-spacing: 8px;
  line-height: 1.6em;
  margin-bottom: .6em;
}
#services .info .title p {
  text-align: center;
  font-size: 120%;
  line-height: 1.6em;
  letter-spacing: 6px;
}
#services .info img {
  width: calc(100%/3);
}
#services .needs-list dl {
  display: inline-block;
  text-align: center;
}
#services .needs-list dl:not(:last-of-type) {
  margin-bottom: 4em;
}
#services .needs-list dt {
  position: relative;
  font-size: 150%;
  line-height: 1.5em;
  letter-spacing: 6px;
  padding-bottom: 1.2em;
  margin-bottom: .7em;
}
#services .needs-list dt::before {
  position: absolute;
  content: "";
  width: 40%;
  height: 3px;
  background-color: #fff;
  opacity: .3;
  bottom: .5em;
  left: 50%;
  margin-left: -20%;
}
#services .needs-list dd {
  position: relative;
  text-align: justify;
  font-size: 110%;
  letter-spacing: 5px;
  line-height: 1.6em;
  padding-left: 1.7em;
}
#services .needs-list dd:not(:last-of-type) {
  margin-bottom: .7em;
}
#services .needs-list dd:before {
  position: absolute;
  content: "";
  margin: 0;
  background: url(../../../asset/img/icon-check.png) no-repeat center;
  background-size: 100%;
  width: 1.5em;
  height: 1.5em;
  left: 0;
  top: 0;
}
/*======================================
point
/*======================================*/
#point .title h1 span {
  display: block;
  font-size: 80%;
  letter-spacing: 8px;
  margin-top: .8em;
}
#point ol li .desc {
  display: block;
  text-align: center;
  padding: 2em 0;
  width: 90%;
  margin: 0 auto;
}
#point ol li .desc h2 {
  font-size: 150%;
  letter-spacing: 8px;
}
#point ol li .desc h2 em {
  display: inline-block;
  transform: skew(-10deg);
  font-size: 160%;
  margin-left: 2px;
}
#point ol li .desc h3 {
  font-size: 160%;
  letter-spacing: 5px;
  margin: .5em 0;
}
#point ol li .desc p {
  text-align: center;
  font-size: 100%;
  letter-spacing: 3px;
}
#point ol li:last-of-type .desc {
  padding-bottom: 0;
}
/*======================================
profile
/*======================================*/
#profile .name img {
  width: 50%;
}
#profile .name img:first-of-type {
  transform: scale(1.2);
}
#profile .desc {
  display: block;
}
#profile .desc h3 {
  font-size: 200%;
  margin-bottom: 1em;
  line-height: 1.3em;
}
#profile .desc h3 span {
  display: block;
  font-size: 70%;
}
#profile .desc p.serif-M {
  text-align: center;
  font-size: 110%;
}
#profile .desc dt {
  text-align: left;
  font-size: 130%;
  margin: 1.5em 0 .5em;
}
#profile .desc dd {
  text-align: justify;
  line-height: 1.6em;
}
#profile .desc .journey img {
  width: 70%;
  margin: 2em auto;
}
/*======================================
message
/*======================================*/
#message {
  text-align: center;
}
#message p {
  font-size: 105%;
  line-height: 1.8em;
}
#message p:not(:last-of-type) {
  margin-bottom: 1.3em;
}
#message .name {
  text-align: center;
  font-size: 120%;
}
#message .name span {
  display: block;
  font-size: 120%;
}
/*======================================
voice
/*======================================*/
#voice {
  overflow: hidden;
}
/*list*/
.slider-voice li.slick-slide {
  position: relative;
  text-align: justify;
  align-items: stretch;
  margin: 0 .5em;
  transition: all .3s ease;
  height: auto;
}
#voice .slider-voice .text {
  background: #fff;
  padding: 1em;
  border-radius: 1em;
}
#voice .slider-voice .text h3 {
  font-size: 4.5vw;
  line-height: 1.4em;
  margin-bottom: .5em;
}
#voice .slider-voice .text p {
  font-size: 85%;
  line-height: 1.6em;
}
/* .slider-voice */
#voice aside {
  text-align: center;
}
/*======================================
slick
/*======================================*/
.slider-voice li.slick-slide {
  opacity: .6;
}
.slider-voice li.slick-active {
  opacity: 1;
}
.slider-voice li.slick-slide:hover {
  transition: all 0.3s ease;
  transform: translate(0, -10px);
}
.slider-voice .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
.slick-list {
  overflow: inherit !important;
}
.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}
.slick-dots {
  position: static !important;
  bottom: auto !important;
  top: 100% !important;
  padding: 2em 50px !important;
}
.slick-dots li {
  margin: 0 2px !important;
}
.slick-dots li button:before {
  font-size: 12px !important;
  top: 6px;
  color: rgba(120, 170, 115, 1) !important;
}
.slick-prev, .slick-next {
  position: absolute;
  display: block;
  font-size: 0;
  line-height: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  top: calc(100% - 35px) !important;
  z-index: 999;
}
.slick-prev, .slick-next {
  width: 50px !important;
  height: 50px !important;
}
.slick-prev {
  left: 0 !important;
}
.slick-next {
  right: 0 !important;
}
.slick-prev:before, .slick-next:before {
  position: absolute;
  display: block;
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  border-top: 3px solid rgba(120, 170, 115, 1);
  border-left: 3px solid rgba(120, 170, 115, 1);
  top: calc(50% - 25px/2);
  opacity: 1;
  transition: all .3s ease;
}
.slick-prev:hover:before, .slick-next:hover:before {
  opacity: .8;
  transition: all .3s ease;
}
.slick-prev:before {
  left: 40%;
  transform: rotate(-45deg);
}
.slick-next:before {
  right: 40%;
  transform: rotate(135deg);
}