@charset "utf-8";
/*↓↓↓↓↓共通設定↓↓↓↓↓*/
body {
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
  margin: 0;
  color: #4b493a;
  text-align: center;
  font-size: 1;
}
body > h1 {
  display: none;
}
body .page-title{
  width: 400px;
}
header {
  position: fixed;
  z-index: 10;
  width: 100%;
  top: 0;
  height: 70px;
  background: #efefef url(../img/header_mon.png);
  background-size: 42%;
  background-repeat: repeat-x;
  background-position: center center;
}
header .wrap {
  margin: 0 auto;
  height: 100%;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}
header>h1{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
header h1 img{
  height: 30px;
}
header .abs-img{
  height: 40px;
  cursor: pointer;
}
header input[type="radio"] {
  display: none;
}
footer {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  width: 100%;
  bottom: 0;
  height: 40px;
  background: #efefef url(../img/footer_mon.png);
  background-size: 40%;
  background-repeat: repeat-x;
  background-position: center center;
}
footer small {
  font-size: 0.8em;
}
/* 共通のアイコンエフェクト */
.socialEffect__link {
  margin: .3em;
  display: block;
    float: left;
    
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  transition: transform ease-out 0.2s;
}

.socialEffect__box li {
  display: inline-block;
}


/* インスタ用アイコン設定 */
.icon-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-instagram {
  display: inline-block;
  color: #fff;
}
.icon-instagram:hover {
  background: radial-gradient(
      circle farthest-corner at 32% 106%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 10%,
      rgb(250, 145, 55) 28%,
      rgb(235, 65, 65) 42%,
      transparent 82%
    ),
    linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(0.9);
}
/*↓↓↓↓↓ページネーション用↓↓↓↓↓*/
.pagenation {
  padding: 20px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.pagenation li {
  list-style-type: none;
  margin-bottom: 20px;
}
.pagenation a {
  display: block;
  height: 10px;
  border: 1px solid #595757;
  width: 10px;
}
.pagenation a.active {
  background: #595757;
}
/*↑↑↑↑↑ページネーション用↑↑↑↑↑*/
/*↑↑↑↑↑共通設定↑↑↑↑↑*/
/*↓↓↓↓↓スライドメニュー↓↓↓↓↓*/
.togglemenu {
  height: 100vh;
  background-color: #cacaca;
  position: fixed;
  z-index: 15;
  margin: 0;
  opacity: .98;
  top: 0;
  width: 70vw;
}
.togglemenu label {
  cursor: pointer;
  position: absolute;
  top: 20px;
  height: 30px;
  width: 30px;
}
.togglemenu label img {
  height: 30px;
}
.togglemenu p{
  margin-top: 40px;
}
.togglemenu h1 {
  margin-top: 15vh;
}
.about {
  right: -70vw;
  transition: .5s;
}
.about label {
  left: 20px;
}
.about h1 img {
  width: 120px;
}
.greeting {
  left: -70vw;
  transition: .5s;
}
.greeting label {
  right: 20px;
}
.greeting .representative{
  width: 150px;
}
.greeting .g-wrap{
  width: 80%;
  margin: 0 auto;
}
.greeting .g-wrap img{
  width: 30%;
}
  #aboutswt:checked + .about {
  right: 0;
}
#greetingswt:checked + .greeting {
  left: 0;
}
/*↑↑↑↑↑スライドメニュー↑↑↑↑↑*/

/*↓↓↓↓↓メインコンテンツ↓↓↓↓↓*/
main .bus {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: 70vh;
  pointer-events: none;
  z-index: 1;
  transition: .5s;
}
main p {
  margin: .5em 0;
  font-weight: bold;
}
main .st{
  width: 60px;
  height: auto;
}
main img:not(.bus):not(.landscape):not(.page-title):not(.st) {
  display: block;
  position: absolute;
  height: 70vh;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
main .page4 img {
  top: 18%;
}
main .page1,main .page3{
  background-color: #d0fcff;
}
main .page2,main .page4{
  background-color: #d9efff;
}
#top main article {
  height: 100vh;
  position: relative;
}
body:not(#top) main article{
  min-height: 100vh;
}
main article h1 {
  margin: 0;
}
main article > div:nth-of-type(1) {
  font-size: 2em;
  padding-top: 15vh;
}
main article > div:nth-of-type(2) {
  font-size: 1em;
  padding-top: 40vh;
  line-height: 1.7em;
}
main article table{
  font-weight: bold;
  margin: 0 auto;
  border-collapse: collapse;
}
main article table td{
  border: 1px solid #000;
  padding: 5px 20px;
  text-align: left;
}
main .page4 a{
  color: #fff;
}
main .toform{
  display: inline-block;
  padding: 5px 50px;
  border-radius: 50px;
  background-color: #86b5dd;
  cursor: pointer;
  line-height: 1.2em;
  margin-top: 20px;
}
main .toform:hover{
  background-color: #6dade3;
}
.effect-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s;
}
.effect-scroll {
  opacity: 1;
  transform: translateY(0);
}
/*↑↑↑↑↑メインコンテンツ↑↑↑↑↑*/
/*↓↓↓↓↓ランドスケープ画面用↓↓↓↓↓*/
#landscape{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: #595757;
}
#landscape img{
  position: absolute;
  height: auto;
  width: 15vw;
  top: 15vh;
  left: calc(50% - (15vw / 2));
  animation: mobileroll 3s infinite;
}
#landscape p{
  color: #cacaca;
  position: absolute;
  top: calc(70vh + 1em);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
/*↑↑↑↑↑ランドスケープ画面用↑↑↑↑↑*/


@media screen and (max-width:800px) {
  header{
    background-size: 150%;
  }
  header h1 img{
    height: auto;
    width: 200px;
  }
  body {
    font-size: 0.875em;
  }
  body .page-title{
    width: 300px;
  }
  header .wrap {
    width: 90vw;
  }
  header .abs-img{
    height: 30px;
  }
  main .st{
    width: 40px;
  }
  .greeting .g-wrap{
    width: 90%;
  }
  .greeting .g-wrap img{
    width: 45%;
  }
  footer{
    background-size: 150%;
  }
  /*↓↓↓↓↓ページネーション用↓↓↓↓↓*/
  .pagenation {
    padding: 5px;
  }
  .pagenation li {
    margin-bottom: 10px;
  }
  .pagenation a {
    height: 6px;
    width: 6px;
  }
  /*↑↑↑↑↑ページネーション用↑↑↑↑↑*/
  #top main img:not(.landscape):not(.page-title):not(.st) {
    height: 40vh;
    padding-top: 10vh;
  }
  main article > div:nth-of-type(1){
    padding-top: 16vh;
  }
  main article div:nth-of-type(2) {
    padding-top: 26vh;
  }
  main .toform{
    margin-top: 30px;
  }
}




/*ランドスケープ用のアニメーション*/
@keyframes mobileroll{
  0%{
    transform:rotate(90deg);
  }
  10%{
    transform:rotate(90deg);
  }
  40%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(0);
  }
}