@charset "UTF-8";
/*画面全体の設定*/
body,
html {
  font-family: "M PLUS 1", sans-serif !important;
    color: #1C1C1C;
    height: 100%;
    letter-spacing: 2px;
    font-size: 16px;
    max-width: 1980px;
    max-height: 1080px;
}
/* * {outline: 1px solid magenta;} */

#PCmode {
    display: block;
}
#SPmode {
    display: none;
}
/* footer -----------------------------------------------------------------------*/
footer {
  position: relative;
  background-color: #fff;
  color: #707070;
  font-weight: 700!important;
  padding-top: 210px!important;
  letter-spacing: 0;
  line-height: 110%;
}
.style-480 {
  display: none;
}
.footer-outer {
  max-width: 300px;
  margin: auto;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;

}
.footer-outer span {
  font-size: 16px;
  margin-left: 4px;
}
.footer-logo {
  width: 80%;
  max-width: 160px;
  margin: auto;
}
.footer-link_title {
  text-align: left;
  font-size: 14px;
  margin-top: 18px;
}
.footer-link {
  display: flex;
  justify-content: center;
  gap: 22px;  
  font-size: 12px;
}
.footer-inn001 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.footer-map {
  position: absolute;
  bottom: 110px;
  right: min(400 / 1980 * 100vw, 400px);
}
.f-map {
  width: 300px;
}
.f-pin {
  width: 64px;
  position: absolute;
  left: 90px;
  bottom: 50px;
}
.bottom-copy {
  background-color: #646464;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.bottom-copy p {
  max-width: 1600px;
  margin: auto;
  padding: 0 20px;
}

/*========= メインビュー ===============*/
/* hero-vew -----------------------------------------------------------------------*/
#hero-vew {
  position: relative;
  height: 100vh;
}
.hero-vew-style {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.back-square {
  z-index: 0;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  top: -50px;
  right: 0;
  margin-bottom: -1200px;
  background: rgb(228,228,228);
  background: linear-gradient(180deg, rgba(228,228,228,1) 0%, rgba(228,228,228,0.30015756302521013) 70%, rgba(228,228,228,0) 100%);
  height: 1250px;
  max-width: 900px;
  width: 60%;
}
.Scontainer {
  z-index: 888;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  /* margin: 0 auto; */
}
.Scontainer a:hover {
  opacity: 1;
}
.chevron {
  position: absolute;
  width: 56px; /* 以前の2倍 */
  height: 16px; 
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #b8b8b8;
}
.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}
.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(60px);
  }
  67% {
    opacity: 1;
    transform: translateY(80px);
  }
  100% {
    opacity: 0;
    transform: translateY(110px) scale3d(0.5, 0.5, 0.5);
  }
}
@keyframes pulse {
  to {
    opacity: 1;
  }
}

/*========= 名刺エリア ===============*/
/* about -----------------------------------------------------------------------*/
#about {
  height: 100vh;
  display: flex;
  align-items: center;
  /* background-image: url(../images/backbj002.jpg);
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover; */
  /* background-repeat: no-repeat; */
  position: relative;
}
.about-style {
  width: 100%;
  height: auto;
  padding: 0 20px;
}
.card-style {
  background-color: #FFFFFF;
  margin-left: clamp(50px, 15vw, 250px);
  padding-top: clamp(80px, 10vw, 115px);
  padding-right: 50px;
  padding-bottom: clamp(60px, 10vw, 120px);
  padding-left: clamp(60px, 10vw, 80px);
  box-sizing: border-box;
  position: relative;
  max-width: 960px;
  font-weight: 700;
  line-height: 1.7;
  box-shadow: 0px 0px 14px -9px #777777;
  border-radius: 2.5px;
}
.card-style_detail {
  font-size: clamp(14px, 2.5vw, 16px);
  margin-top: 60px;
  padding-left: 40px;
  letter-spacing: 1px;
}
.card-style h3 {
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.35;
}
.card-style_mark {
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 700;
  margin-top: 20px;
  color: #fff;
}
.card-style_mark .inn {
  background: rgb(253,173,35);
  background: linear-gradient(90deg, rgba(253,173,35,1) 0%, rgba(253,190,35,1) 60%, rgba(253,201,35,1) 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #fff;
    padding: 1px 6px;
}
.card-style_line {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: calc( 100% - 30px );
  background: rgb(253,173,35);
  background: linear-gradient(180deg, rgba(253,173,35,1) 0%, rgba(253,175,35,1) 70%, rgba(253,197,35,1) 100%);
}
@media only screen and (max-width: 900px) {
  .card-style {
    width: 90%;
    margin: 0 auto;
  }
  .card-style_detail {
    margin-top: 30px;
    padding-left: 0px;
  }
}
/*========= 横に流れる領域 ===============*/
/* side-scroll -----------------------------------------------------------------------*/
/* 共通 */
.section {
  width: 100%;
  padding: 100px 0;
}
.container {
  width: 100%;
  /* width: 80%; */
  /* max-width: 900px; */
  margin: 0 auto;
}

.heading {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* タイトル */
.title {
  padding: 200px 0 20px;
  font-size: 52px;
  text-align: center;
}

/* 普通のセクション */
.normal-text {
  font-size: 20px;
  letter-spacing: 0.08em;
  margin-top: 60px;
}

/* 横スクロールセクション */
.side-scroll {
  /* background-color: #1b1717; */
  background-image: url(../images/back001.jpeg);
  background-color:rgba(255,255,255,0.8);
  background-blend-mode:lighten;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-scroll-heading {
  color: #eeebdd;
}

.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

.side-scroll-list {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 60px;
  left: 0;
}

.side-scroll-item {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 260px;
  height: 420px;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
}

.Lbus-outer {
  width: 80vw;
}
.side-back {
  background-color: #FDAD23;
  height: 160px;
  position: relative;
  z-index: -1;
  top: 220px;
}
.bus-outer {
  width: 200px;
  height: 280px;
  padding: 10px;
  box-sizing: border-box;
}
.bus-inn001 {
  width: 140px;
  height: 140px;
  padding: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;/*背景色*/
  box-shadow: 0px 0px 10px -7px #777777;
}
.bus-inn001 img {
  width: 100%;
}
.bus-inn002 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}




/*========= カードエリア ===============*/
/* card-vew -----------------------------------------------------------------------*/
#card-vew {
  height: 100vh;
  padding: 80px 0;
  background-image: url(../images/back002.jpeg);
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* .card-vew-inn {
  width: 70%;
  max-width: 1000px;
  margin: auto;
  position: relative;
} */
/* カードエリア */
.cardSwiper {
  max-width: 400px;
  width: min(250 / 320 * 100vw, 360px);
  max-height: 600px;
  margin-left: 0;
  margin-right: auto;
}
.cardSwiper-inn {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 35px 40px;
  box-sizing: border-box;
}
.cardSwiper-vew {
  position: relative;
  /* width: 300px; */
  width: min(230 / 320 * 100vw, 280px);
  height: min(230 / 320 * 100vw, 280px);
  /* height: 300px; */
  border-radius: 5px 5px 5px 0;
  overflow: hidden;
}
.cardSwiper-vew img {
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
}
.cardSwiper-title {
  width: 50%;
  padding: 15px 0;
}
.cardSwiper-vew span {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 5px;
  height: 26px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #636363;
}
.cardSwiper-content {
  color: #3B3B3B;
  font-size: 14px;
  text-align: left;
  line-height: 1.7;
  letter-spacing: 0;
}
.card-vew-inn {
  width: 70%;
  max-width: 1000px;
  margin: auto;
  position: relative;
}
.swiper.cardSwiper {
  overflow: visible;
  margin-left: 160px;
  margin-right: auto;
}
.cardSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-color: #D5D4D4;
}
.cardSwiper .swiper-slide:hover{
  opacity: 1;
}
.cardSwiper .swiper-slide-active {
  background-color: #fff;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.card-button a {
  position: absolute;
  bottom: 30px;
  right: 60px;
  overflow: hidden;
  width: 10em;
  height: 1em;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #eee;
  color: #fff;
  font-size: 16px;
  background-color: #FBA03C;
  padding: 5px;
  transition: ease .2s;
}

.card-button a span {
  position: relative;
  z-index: 3;
  color: #fff;
}

.card-button a:hover span{
  color: #eb6100;
}

.bgleft:before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 2;
background-color: #fff;
border-right: 5px solid #eb6100;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}
#PCmode .card-vew-inn {
  max-width: 1200px;
  height: 100%;
  margin-left: clamp(50px, 7vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* スクロールダウンの位置 */
.swipe {
  position: absolute;
  right: -20px;
  top: 60%;
  z-index: 10;
}
.swipe span {
  font-weight: 700;
}
/* 線のアニメーション部分 */
.swipe::before {
  animation: swipe 2s infinite;
  background-color: #000;
  bottom: -10px;
  content: "";
  height: 3px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 100px;
}
/* 線のアニメーション */
@keyframes swipe {
  0% {
    transform: scale(0, 1);
    transform-origin: left center;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: left center;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: right center;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: right center;
  }
}

/* company *//* company *//* company */
.company-style {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  font-weight: 500;
}
.company-style h3 {
  text-align: center;
  font-weight: 700;
  font-size: 25px;
  margin: 40px auto;
}
.company-style-inn {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  /* gap: 10px; */
  gap: 100px;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  letter-spacing: 1px;

}
.company-map {
  width: 100%;
  max-width: 420px;
}
.company-map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 400;
  border: 0;
}
.company-data {
  max-width: 440px;
  width: 100%;
}
.company_table {
  padding: 20px;
}
.company_table tr {
  border-bottom: 0.5px solid #ccc;
}
.company_table tr:nth-last-child(1) {
  border-bottom: none;
}
.company_table td {
  padding: 24px 10px 10px;
  font-size: 14px;
  line-height: 170%;
}
.company_table th {
  font-weight: 500;
  margin-left: 20px;
  padding: 24px 10px 10px 10px;
  text-align: left;
}
.td-style:nth-child(2)  {
  margin-top: 16px;
}
.td-mark{
  font-size: 1.1em;
  line-height: 110%;
}
.style-1000 {
  display: none;
}
@media screen and ( max-width: 1000px) {
  .style-1000 {
    display: block;
  }
.company-style-inn {
  gap: 20px;
  justify-content: space-around;
}
.company_table {
    line-height: 120%;
}
.td-mark {
    margin-top: 6px;
}
.company_table {
    width: 100%;
}
.td-style:nth-child(2)  {
    margin-top: 24px;
}
.company_table,
.company_table tr,
.company_table td,
.company_table th {
    display: flex;
    flex-direction: column;
}
.company_table th {
    width:auto;
    padding: 14px 10px 4px;
    margin-left: 0;
}
.company_table td {
    font-size: 14px;
    line-height: 160%;
    padding: 0 0 8px 20px;
}
.company_table {
    padding: 0;
}
}
@media screen and (max-width: 768px) {
  .company-style-inn {
    flex-direction: column;
    gap: 60px;
  }
}


#gallery {
  height: 100vh;
  max-height: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/back002.jpeg);
  background-position: bottom;
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover;
  background-repeat: no-repeat;
}
.gallerySwiper {
  width: 80%;
  margin: auto;
  overflow: hidden;
}