@charset "utf-8";


/* header&footer:rgb(2, 59, 133)
moji:#4B4B4B */


*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

a {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Kiwi Maru', serif;
  font-family: 'Montserrat', sans-serif;

  /* background-color: rgb(179, 210, 244); */
  width: 100%;
  overflow-x: hidden;
  color: #4B4B4B;
  /* 固定background-imageここから */
  background-color: #D3E7EC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.3'%3E%3Cpath fill='%23c2dce8' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23afcfe5' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%239cbfe4' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%2387abe3' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%237192E4' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%238da8e9' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23aabeef' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23c6d3f4' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23e3e9fa' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFFFFF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  /* 固定background-imageここまで */
}

/* -------最初のアニメーション -------*/
.title {
  background-color: #ccc;
  /* background-color: rgb(32, 32, 43); */

  color: #fff;
  font-size: 7rem;
  font-weight: bold;
  position: fixed;
  /* positionのfixed absoluteは幅がなくなる */
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 99999;
  /*位置指定 ↓文字を真ん中にする */
  /* display: flex;
    justify-content: center;
    align-items: center; */
  animation: titleanime 3.5s forwards;
}

@keyframes titleanime {
  0% {
    background-color: #ccc;
  }

  32%,
  88% {
    opacity: 1;
    background-color: rgb(33, 33, 68);
  }

  99% {
    /* opacity: 1; */
    z-index: 99999;
  }

  100% {
    opacity: 0;
    z-index: -1;
    /* 消えた時はｚーｉｎｄｅｘで次のホバーがきかない（ただ透明にしただけだから） */
  }
}

.title p {
  /* background-color:#00f; */
  position: absolute;

  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  /* 位置指定　ｐ要素の高さの半分だけY軸を軸に上げた */
  animation: titlep 2.8s forwards;
}

@keyframes titlep {
  0% {
    top: 50%;
    left: 50%;
  }

  50% {
    top: 50%;
    left: 50%;
    /* 高さ全部を上に隠す */
  }

  80% {
    opacity: 1;
  }

  100% {
    top: 50%;
    left: 100%;
    opacity: 0;
    /* 高さ全部を上に隠す */
  }
}

/* -------ここまで最初のアニメーション -------*/

/*//////////////////// header */
header {
  /* position: relative; */
  width: 100%;
  padding: 1rem 0 0;
}

.header_container {
  width: 95%;
  height: 13%;
  margin: 0 auto;
  padding: 1.5rem 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 9999;
  /* transition: all .3s forwards; */

}

/* ヘッダーがscrollしたら小さくなるのをしたい */
/* .header_container.small {
  animation: small .3s;
}

@keyframes small {
  to {
    height: 10%;

  }
} */

header h1 {
  width: 43%;
  /* padding: 1rem; */
  filter: drop-shadow(1px 1px 3px #111);
}

header h1 img {
  width: 24%;
  margin: 0 5% 0;
  object-fit: contain;
}

.icon {
  width: 16%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 61px);
  justify-content: space-between;
  margin-left: 23rem;
}

.icon img,
.icon svg {
  display: block;
  width: 90%;
  object-fit: contain;
}

.st0 {
  transition: all .3s ease;
  filter: drop-shadow(1px 1px 18px #ccc);
}

.facebook:hover .st0 {
  fill: #1877f2;
}

.line:hover .st0 {
  fill: #00B900;
}

.youtube:hover .st0 {
  fill: #c4302b;
}



.hbbtn {
  width: 33px;
  height: 33px;
  position: relative;
  z-index: 9999;
}

.hbbtn span {
  display: block;
  background-color: rgb(2, 59, 133);
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0.25rem;
  border-radius: 1rem;
}

.hbbtn::before,
.hbbtn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.24rem;
  background-color: rgb(2, 59, 133);
  border-radius: 1rem;
  transition: all 0.3 ease;
}

.hbbtn::before {
  top: 5%;
}

.hbbtn::after {
  top: 91%;
}

/* hbbtnクリック(remove) */
.hbbtn span {
  animation: btnanime01 .3s ease forwards;
}

@keyframes btnanime01 {
  100% {
    opacity: 1;
  }
}

.hbbtn::before {
  animation: btnanime02 .3s ease both;
}

@keyframes btnanime02 {

  100% {
    top: 5%;
    /* left: 18px; */
    /* transform: translateY(0) rotate(0deg); */
    transform: translateY(-0px) rotate(180deg);
  }
}

.hbbtn::after {
  animation: btnanime03 .3s ease both;
}

@keyframes btnanime03 {
  100% {
    top: 91%;
    /* transform: translateY(0) rotate(0deg); */
    transform: translateY(0px) rotate(-180deg);
  }
}


/* hbbtnクリックしたらclassList.add */
.hbbtn.active span {
  animation: btnanime1 .3s ease forwards;
}

@keyframes btnanime1 {
  100% {
    opacity: 0;
  }
}

.hbbtn.active::before {
  animation: btnanime2 .3s ease both;
}

@keyframes btnanime2 {

  100% {
    top: 25%;
    /* left: 18px; */
    transform: translateY(6px) rotate(-135deg);
  }
}

.hbbtn.active::after {
  animation: btnanime3 .3s ease both;
}

@keyframes btnanime3 {
  100% {
    top: 61%;
    /* left: 18px; */
    transform: translateY(-6px) rotate(135deg);
  }
}



.hbmn {
  position: fixed;
  width: 33%;
  height: 100vh;
  top: 0;
  right: -50%;
  padding: 8rem 0 0;
  background-color: #fffe;
  transition: all .7s ease;
  color: rgb(2, 59, 133);
  z-index: 9990;
}

.hbmn.open {
  right: 0;
}

.hbmn ul {
  list-style: none;

}

.hbmn ul,
.hbmn dl {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}

.hbmn ul li a {
  display: block;
  padding: .5rem;
  text-decoration: none;
  color: rgb(2, 59, 133);
  font-weight: bold;
  transition: all 0.3s ease;
}

.hbmn ul li a:hover {
  color: rgb(105, 167, 247);
  /* color: #4B4B4B; */
}

.hbmn dl dt {
  font-weight: bold;
  padding: .3rem;
}

.hbmn dl dd {
  padding: .3rem;
}

.hbmn dl dd:first-of-type {
  font-size: 2.4rem;
  font-weight: bold;
}

.hbmn dl dd:last-of-type {
  width: 18%;
  margin: 0 auto;
}


/*//////////////////// main */


/*//////////////////// 共通h3 */
#about h3,
#history h3,
#macine h3,
#access h3 {
  font-size: 4rem;
  line-height: .8;
  text-shadow: 5px 2px 3px #ccc;
  /* transform: translateX(-130%); */
}

/* .movetitle h3.move {
  animation: move .5s ease forwards;
}

@keyframes move {
  100% {
    transform: translateX(0);
  }
} */

#about h3 span,
#history h3 span,
#macine h3 span,
#access h3 span {
  font-size: 1.5rem;
  padding-left: 11rem;
  letter-spacing: 1.3;
  position: relative;
}

#about h3 span::before,
#history h3 span::before,
#macine h3 span::before,
#access h3 span::before {
  content: '';
  position: absolute;
  top: -7%;
  right: 0;
  width: 43%;
  height: .1rem;
  border-radius: 3rem;
  background-color: #4B4B4B;
}

/*//////////////////// top */
main {
  width: 100%;
  overflow: hidden;

}

#top {
  width: 100%;
  height: calc(100vh - 13%);
  /* position: relative; */
}

#top h2 {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: calc(100vh - 13%);
  /* height: 30vh; */
  top: 0;
  left: 0;
  font-size: 2.5rem;
  letter-spacing: 1.1;
  text-align: center;
  padding: 21% 43% 0 0;
  text-shadow: 1.3px 1.3px 1px #eee;
  z-index: 55;
  color: #081b3e;
}

#top h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: -32%;
  background: url(../img/topbg00.png) no-repeat top/contain;
  opacity: 0.3;
  transform: scale(0.8);
  animation: kaiten 24s linear infinite;

}

@keyframes kaiten {
  0% {
    transform: scale(1.5) rotate(0deg);
  }

  100% {
    transform: scale(1.5) rotate(360deg);
  }
}

#top h2 span {
  font-size: 1.1rem;

}

#top .swiper {
  margin: 7% 0 0 43%;
  width: 55%;
  /* height: calc(100vh - 7%); */
}


/*#top .swiper-slide {*/
/*スライド要素の幅と高さを調整*/
/* width: 88%;
   padding: 1rem 0 1rem 0;
  height: calc(100vh - 7%);
}  */

#top .swiper-slide img {
  object-fit: contain;
  display: block;
  width: 90%;
  margin: 0 auto;
}



/*//////////////////// Info */

.info {
  width: 80%;
  margin: 0 auto;
  padding: 24rem 0 11rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.info div {
  width: 43%;
  margin: 0 auto;
  line-height: 2.4;
}

.info02 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

/*//////////////////// about */

#about {
  margin: 11rem 0 21rem;
}

.aboutwrap {
  background-color: rgba(82, 105, 139, 0.7);
  width: 100%;
  color: #eee;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 1rem;
}

h3 {
  width: 80%;
  margin: 0 auto;
  padding: 3rem 0;
}

.outline {
  width: 40%;
  margin: 0 auto;
  padding: 3rem 0;
  min-width: 500px;
}

.item-flex {
  display: grid;
  grid-template-columns: 0.5fr 2fr;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0 0.5rem;
}

.company-outline__dd {
  font-size: 0.9rem;
  line-height: 2.1;
}


/*//////////////////// history*/
#history {
  padding: 1rem 0 15rem;
  width: 75%;
  margin: 0 auto;

}

.historywrap {
  display: flex;
  position: relative;
  background-color: #fff3;
  padding: 1rem;
  border-radius: 3rem;
}


/* nobiru */
#history .tate {
  height: 0%;
  /* background-color: #297ce8aa; */
  background: linear-gradient(243deg, rgba(161, 181, 196, 1) 15%, rgba(149, 193, 232, 1) 39%, rgba(85, 152, 231, 1) 66%, rgba(60, 87, 204, 1) 83%, rgba(33, 36, 209, 0.768032212885154) 95%);
  border-radius: 3rem;
  position: absolute;
  top: 0;
  left: 31%;
  width: 1rem;
  max-height: 100%;
  opacity: 0.5;
}

#history dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: center;
  align-items: center;
}

#history dl dt {
  font-size: 2.4rem;
  line-height: 2.4;
  font-weight: bold;
  text-align: right;
  height: 5rem;
  padding: 0 5rem 0 0;
}



/*//////////////////// macine */
#macine {
  padding: 0 0 11rem 0;
  /* overflow: hidden; */
}

#macine h3,
#macine p {
  width: 80%;
  margin: 1rem auto;

}

/* ////////macineanimation////// */
/* https://b-risk.jp/blog/2022/04/swiper/ */
/* https://b-risk.jp/wp/wp-content/themes/brisk/sample/entry/20220425/dl/06.html */
.l-inner {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
}

.l-section .l-inner {
  padding: 3rem 0;
}

[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
}


.movemacine .swiper {
  overflow: visible;
}

.movemacine .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.movemacine .swiper-slide {
  /* width: -webkit-max-content;
  width: -moz-max-content;
   width: max-content; 
  width: 30%; */
  transition: all 0.3s ease;
  padding: 3rem 0 0;
  background-color: #d9e8fcaa;
  border-radius: 5rem;
}

.movemacine .swiper-slide:hover {
  transform: translateY(-16px);
}

.movemacine .slide {
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  margin: 0 auto;
}

.movemacine .slide-media {
  padding-top: 77%;
  width: 90%;
  margin: 0 auto;
}


.movemacine .slide-content {
  width: 90%;
  padding: 1rem;
  margin: 0 auto;
}

.movemacine .slide-title {
  width: 100%;
  overflow: hidden;
  height: 8rem;
  /* text-align: center; */

}

@media only screen and (max-width: 1024px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  .l-inner {
    padding: 0 4rem;
  }

  .pc {
    display: none !important;
  }
}

@media only screen and (max-width: 599px) {
  html {
    font-size: 50%;
  }

  .pc-tab {
    display: none !important;
  }

  .movemacine .slide {
    width: 24rem;
  }
}

@media only screen and (min-width: 1025px) {
  .tab-sp {
    display: none !important;
  }


  .movemacine .slide {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .movemacine .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .movemacine .swiper:hover .slide:not(:hover) {
    opacity: 0.5;
    transition: all 0.3s ease;
  }
}

@media only screen and (min-width: 600px) {
  .sp {
    display: none !important;
  }
}






/* ////////YUYAKAanimation//////// */
.bganime {
  width: 100%;
  height: 24vh;
  background: url(../img/bgrogo00.png) top/contain;
  background-repeat: space;
  animation: rogoanime 18s linear infinite;
  transform: translateX(100%) translateY(-3rem);
}

@keyframes rogoanime {
  /* 0% {
    transform: translateX(100%) translateY(-1.1rem);
  } */

  100% {
    transform: translateX(-100%)translateY(-3rem);
  }
}

.bganime img {
  display: block;
  width: 100%;
  opacity: 0.5;
  filter: drop-shadow(1px 3px 3px #fff);
  object-fit: contain;
}

/*//////////////////// access */
#access {
  width: 80%;
  margin: 0 auto;
  padding: 3rem 0 0 0;
}

#access p {
  padding: 3rem 0 0;
  line-height: 3;
}

#map {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0 5rem;
}

#map iframe {
  width: 100%;
  height: 24em;
  filter: grayscale(32%);
}

/*//////////////////// footer */
footer {
  width: 100%;
  /* background-color: #4B4B4B33; */
  background-color: rgba(82, 105, 139, 0.7);
  padding: 7rem 0 0;
  /* color: rgb(2, 59, 133); */
  color: #eee;
  /* font-weight: bold; */
}

.footerwrap {
  width: 70%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: center;
}

.footerrogo {
  margin-right: 32%;
  text-align: center;
  filter: drop-shadow(1px 1px 3px #111);
}

.footernav {
  padding: 1rem 0 5rem 0;
}

.footernav address,
.footernav tel,
.footernav p {
  margin: 1rem;
  font-size: 1.1rem;
}

.footernav tel {
  font-size: 1.8rem;
}

.footernav p:first-of-type {
  font-size: 2.3rem;
}

footer p small {
  display: block;
  width: 100%;
  text-align: right;
}


/* ////////////870 /////////////*/

@media (max-width: 870px) {
  header h1 {
    width: 77%;
  }

  #top {
    margin: 5%;
  }

  #top h2 {
    padding: 25% 32% 0 0;
  }

  #top h2::after {
    animation: none;
    top: 55%;
    transform: scale(.8);
    transform-origin: center;
  }

  .icon {
    position: fixed;
    width: 35%;
    padding: 1.8rem 1rem 3.5rem;
    height: 11%;
    bottom: 0;
    right: 3%;
    background-color: #fffa;
    border-radius: 50% 50% 0 0;
  }

  /* .icon a {
     transform: translateY(-1rem); 
  }*/

  .facebook.st0 {
    fill: #1877f2;
  }

  .line .st0 {
    fill: #00B900;
  }

  .youtube .st0 {
    fill: #c4302b;
  }

  .hbmn {
    /* padding: 3rem 0 0; */
    width: 100%;
    right: -100%;
  }

  .hbmn ul li a {
    padding: 1rem;
  }

  /* .hbmn ul li a:hover {
    color: rgb(2, 59, 133);
}*/



  #top .swiper {
    margin: 32% 0 0 0%;
    width: 100%;
    /* margin: 7% 0 0 35%;
    width: 55%; */
    /* height: calc(100vh - 7%); */
  }

  /* ///////info-830 ////////*/
  body {
    overflow-x: hidden;
    font-size: 16px;
  }

  .info div {
    width: 77%;
  }

  .info02 {
    width: 50%;
  }

  /* ///////about-830 ////////*/
  .aboutwrap dl:nth-of-type(2) {
    width: 70%;
  }

  /* ///////history-830 ////////*/
  /* .historywrap {
    height: 700px;
    overflow-y: scroll;
    overscroll-behavior: contain;

  } */
  #history .tate {
    left: 1%;
    width: 31%;
    opacity: 0.3;
  }

  /* ///////macine-830 ////////*/
  .bganime {
    height: 11vh;
  }

  /* .product li:hover {
    transform: translateY(0);
    transition: none;
  } */
}


/* ////////////426 /////////////*/


@media (max-width: 426px) {
  body {
    overflow-x: hidden;
    /* font-size: 16px; */
  }

  .title {
    font-size: 43px;
    font-weight: bold;
  }

  .icon {
    width: 100%;
    padding: 1rem 1rem 1.1rem;
    height: 8%;
    right: 0;
    background-color: rgba(220, 230, 245, 0.7);
    border-radius: 0 0 0 0;
    justify-content: right;
    gap: 1.1em;
  }

  .icon::after {
    content: 'ご相談\Aください！';
    white-space: pre;
    position: absolute;
    top: 0;
    width: 50%;
    height: 2rem;
    /* line-height: 2; */
    padding: 0.3rem 0 0 0.5rem;
    color: #777;
    font-size: 1rem;
  }

  .icon a {
    transform: translateY(-.5rem);
    width: 80%;
  }

  .hbmn {
    padding: 11rem 0 0;
  }

  #about h3 span,
  #history h3 span,
  #macine h3 span,
  #access h3 span {
    padding-left: 7rem;
  }



  #top h2 {
    padding: 43% 24% 0 0;
    font-size: 2.5rem;
  }

  .info {
    padding: 18rem 0 11rem;
  }

  .info div {
    width: 100%;
    line-height: 1.3;
  }

  .info div h2,
  .info02 h2 {
    padding: 1rem;
  }

  .info02 {
    width: 70%;
  }

  .aboutwrap {
    font-size: 1rem;
  }

  .outline {
    width: 90%;
    margin: 0 auto;
    padding: 3rem 1rem;
    min-width: 300px;
  }

  .item-flex {
    grid-template-columns: 1fr 2.4fr;
    grid-template-columns: repeat(auto-fit, 300px);
  }

  .company-outline__dt {
    font-weight: bold;
    padding: 0.5rem 0;
  }

  .company-outline__dd {
    font-size: 1rem;
  }

  #history {
    width: 90%;
  }


  #history .tate {
    width: 24%;
  }

  #history dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, 100%);
  }

  #history dl dt {
    font-size: 2.4rem;
    text-align: left;
  }

  .historywrap dl dd {
    font-size: 1.5rem;
  }

  #access {
    width: 93%;
  }

  footer {
    padding: 7rem 0 5rem;
  }

  .footerwrap {
    grid-template-columns: repeat(auto-fit, 300px);
  }

  .footerrogo {
    width: 55%;
    margin: 0 auto;
  }

  .footernav {
    text-align: center;
  }

}