@charset "UTF-8";

body {
  font-family: "Noto Sans CJK JP",'Noto Sans JP', sans-serif;
  /* font-family: 'Noto Sans JP', sans-serif; */

}


/* --- ヘッダー --- */
header {
  height: 93px;
  width: 100%;
  margin-bottom: 16px;
  /* background-color: rgb(86, 174, 206); */
}

.container {
	max-width: 343px;
  margin: 0 auto;
  color: #333333;
}

.header-logo {
  height: 60px;
  width: 337.5px;
  margin: 16px  auto 16px;
  /* display: block; */
}
/* ヘッダーは固定で大丈夫 */





/* --- メイン --- */
  .main {
    width: 91.46%;
      /* mainのhは後に566から608に修正 */
    height: 608px;
    margin: 0 auto;
    /* background-color: rgb(124, 221, 143); */
    text-align: center;
    /* background-color: rgb(45, 172, 128); */
  }


  .vertical {
    height: 524px;
    writing-mode: vertical-rl;
    margin: 0 auto;
    padding: 0;
    letter-spacing: 0.57em;
    animation-duration:2s; 
    /* 停止するまでにアニメーション周期が再生される回数を指定 */
    animation-iteration-count: 1;
    /* CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定 */
    animation-fill-mode: forwards;
    z-index: 1;
  }

  _:lang(x)::-moz-placeholder, .vertical {
    padding-left: 164px;
  }

  /* @-moz-document url-prefix() {
    .vertical {
      padding-left: 164px;
    } */

  @keyframes sample01 {
    0% {
    opacity: 1;
    transform: translateY(0px);
    }
    100% {
    opacity:0;
    transform: translateY(300px);
    } 
    }
  /* 400くらいで */


  .main ul {
    margin-top: 24px;
  }

  .main ul li {
    margin-bottom: 55.46px;
    cursor: pointer;
    /* このマージンボトムは検証見ながらmainのhが566になるように１ずつずらして調整しました。 */
  }

  .main ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 68px;
    /* border-bottom: 1px solid #000; */
  }

  .main a :hover{
    /* transition: 0.5s; */
    opacity: 0.5;
  }


    /* --- トップ --- */
      .top {
        width: 100%;
        height: 608px;
        margin: 0 auto;
        /* position: relative; */
      }

      .top-title {
        height: 524px;
        width: 100%;
        /* background-color: rgb(20, 46, 127); */
      }

    /* --- メニュー --- */
      .menu-title {
        font-size: 16px;
        font-weight: bold;
        padding-top: 8px;
        padding-bottom: 16px;
        border-bottom: 1px solid #000;
        color: #000;
      }
      /* 縦書きのボーダーボトムを消すため */
      .vertical {
        border-bottom: 0px solid #000;
        /* position: static; */
      }

      .menu-under-button {
        height: 24px;
        /* margin-top: 22px; */
        padding-top: 22px;
        border-top: 1px solid #000;
      }

      .icon-button {
        border-top: 0px;
        padding-top: 0px;
        position: relative;
        top: 0px;
        /* background-color: rgb(147, 22, 74); */
        background-color: #fff;
        /* padding-bottom: 10px; */
        height: 30px;
      }

      .yohaku {
        height: 24px;
        background-color: #fff;
        position: relative;
      }

      /* --- グラフィックデザイン --- */
      .graphicDesign ul {
        text-align: left;
      }

      .graphicDesign ul li {
        /* display: block; */
        /* margin-bottom: 0; */
        margin-bottom: 32px;
      }

      .graphicDesign ul  li:last-child {
        padding-bottom: 60px;
        /* border-bottom: 0px solid #000; */
      }

      .graphicDesign p {
        line-height: 24px;
      }

      .yen {
        float: right;
      }

      .g5-li {
        display: flex;
        width: 100%;
      }

      .g5-li-left {
        flex: 4 0;
      }

      /* .g5-li p {
        flex: 1 1;
      } */

      .g5-li-yen {
        text-align: right;
        flex: 3 0;
      }

      .g-kome {
        text-align: left;
        line-height: 24px;
      }

      /* --- 印刷物 --- */
      .printed ul {
        text-align: left;
      }

      .printed ul li {
        margin-bottom: 10px;
      }

      .printed p {
        line-height: 24px;
      }

      .printed ul  li:last-child {
        padding-bottom: 8px;
        /* border-bottom: 0px solid #000; */
      }
      
      /* --- webデザイン --- */
      .webDesign ul {
        text-align: left;
      }

      .webDesign ul li {
        margin-bottom: 10px;
      }

      .webDesign p {
        line-height: 24px;
      }

      .webDesign ul  li:last-child {
        padding-bottom: 230px;
        /* border-bottom: 0px solid #000; */
      }

      
      /* --- アニメーション --- */
      .animation ul {
        text-align: left;
      }

      .animation p {
        line-height: 24px;
      }

      .animation ul  li:last-child {
        padding-bottom: 312px;
        /* border-bottom: 0px solid #000; */
      }

      /* --- HAGURUMAレンタル --- */
      .hagurumaLental ul {
        text-align: left;
      }

      .hagurumaLental p {
        line-height: 24px;
      }

      .hagurumaLental ul  li:last-child {
        padding-bottom: 236px;
        /* border-bottom: 0px solid #000; */
      }




      /* --- お問い合わせ --- */
      .inquiry h2 {
        font-weight: bold;
        line-height: 24px;
        margin-top: 331px;
      }


      .sns-icons {
        display: flex;
        justify-content: center;
        margin: 48px 0 52px 0;
      }

      .sns-icons > div {
        flex: 0 0 20%;
      }


      .inquiry ul li {
        margin-right: auto;
      }

      

      









/* --- non-top --- */
.non-top {
  display: none;
}


/* --- icon-button --- */
.icon-button {
  height: 60px;
  margin: 0;
  /* z-index: 100; */
}

.animation-button:hover {
  animation: 3s linear infinite rotation1;
  /* animation: 1s linear infinite rotation1; */
}
@keyframes rotation1 {
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

/* --- footer --- */
footer {
  height: 72px;
  /* height: 137px; */
  /* background-color: rgb(223, 139, 61); */
  background-color: #fff;
  /* margin-top: 42px; */
  text-align: center;
  position: relative;
  top: 0px;
  /* padding-top: 10px; */
  /* margin-top: auto; */
}

footer p {
  font-size: 16px;
  font-weight: bold;
}

footer small {
  font-size: 12px;
  display: block;
  margin-top: 16px;
}