@charset "utf-8";
/* レイアウトのためのCSS */

body{font-family: 'Oswald', sans-serif;text-transform: uppercase;letter-spacing: 0.1em;color: #17A6F4;font-size:1rem;
line-height:1.85;word-wrap: break-word; font-weight: bold;}
ul{margin:0;padding: 0;list-style: none;}
a{color: #17A6F4;text-decoration: none;outline: none;}
img{ max-width:100%; height: auto;}
*{box-sizing: border-box}
/* HEADER */
nav{position: relative;z-index:999;padding:5px 20px;}
/* コンテンツレイアウト */
.contents-outer { position:relative; width:100%; padding: 8% 0; overflow: hidden; max-width:1120px;}
.contents-inner { position:relative; max-width:1120px; text-align:left; margin:0 auto;  }
/* テキストスタイル */
.txt1{color: #17A6F4;font-size:1.2rem;  font-family: monospace;}
.txt-message{color: #17A6F4;font-size:1rem;  font-family: monospace;}
/* タイトルスタイル */
.ttl1{font-size: 2rem;position: absolute; top:50%;left:50%; transform: translate(-50%,-50%); z-index: 999; letter-spacing: 0.1em; width:10em;opacity: 0;/*ローディング画面では透過*/color: #fff;}
.ttl2{line-height: 0.6; font-size: 2.5rem;letter-spacing: 0.2em;}
.ja{ font-size: 1rem; font-weight: bold; letter-spacing: 0.03rem; font-family: monospace;}
.ttl2 .ja {position: relative;display: inline-block;padding: 0 30px; }
.ttl2 .ja:before, .ttl2 .ja:after {content: '';position: absolute;top: 50%;display: inline-block;width: 20px;height: 1px;background-color: #17A6F4;}
.ttl2 .ja:before {left:0;}
.ttl2 .ja:after {right: 0;}
body.appear h1{opacity: 1;}
/* area */
.sp-bottom{ text-align: center;}
/* #left6 .sp-bottom{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
#left6 .sp-bottom p{ margin:0 0 50px 0; letter-spacing: 0.3em; white-space: nowrap;}
#left6 .sp-bottom ul{ display: flex; justify-content: center;}
#left6 .sp-bottom ul li{ margin: 0 10px;}
#left6 .sp-bottom ul img{height:25px;} */
#footer{ position: fixed; bottom:20px; left: 20px;}
/* .link1{color: #17A6F4;} */
.link1 { position: relative; display: inline-block; transition: .3s;}
.exicon { font-weight: bold; font-size: 15px;}
.link1::after { position: absolute; bottom: 0; left: 0; content: ''; width: 0; height: 1px; background-color: #17A6F4; transition: .3s;}
.link1:hover::after { width: 100%;}
.link1:hover { opacity: 0.7; transition: .3s;}
/* スクロールボタン */
#left3 .arrow { position: absolute; padding-top: 70px; bottom: 120px; left: 45%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%);transform: translate(0, -50%); text-decoration: none; margin: auto;}
#left3 .arrow span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1.2px solid #17A6F4; border-bottom: 1.2px solid #17A6F4;-webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; opacity: 0; box-sizing: border-box;}
  #left3 .arrow span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s;  }
  #left3 .arrow span:nth-of-type(2) { top: 16px;-webkit-animation-delay: .15s; animation-delay: .15s;}
  #left3 .arrow span:nth-of-type(3) { top: 32px;-webkit-animation-delay: .3s; animation-delay: .3s;}
  @-webkit-keyframes sdb {
 0% {opacity: 0;}
 50% {opacity: 1;}
 100% {opacity: 0;}
  }
  @keyframes sdb {
 0% {opacity: 0;}
 50% {opacity: 1;}
 100% {opacity: 0;}
  }
  

/* タブレッド表示 */
@media screen and (max-width: 1025px){
    h1{font-size: 1.5rem;}
    h2{font-size: 2rem;letter-spacing: 0.2em;/* margin: 0 0 30px 0; */line-height: 0.6;color: #17A6F4;}
    .ttl1{font-size: 4rem;}
    .ttl2{line-height: 0.7; font-size: 2.5rem;}
    .ja{font-size: 1.2rem;}
    .txt1{font-weight: bold; letter-spacing: 1; font-size: 1.2rem;}
    .txt-message{font-size: 1.1rem;}
    #left6 .sp-bottom{ padding-top: 50%; }
  }

  /* スマホ表示 */
@media screen and (max-width: 600px) {
#footer{bottom:inherit;left: 20px;top:20px;}
.ttl1{font-size: 2rem;}
.ttl2{line-height: 0.7; font-size: 1.5rem;}
.ja{font-size: 1.0rem;}
.txt1{font-weight: bold; letter-spacing: 1; font-size: 0.9rem;}
#left6 .sp-bottom{ padding-top: 50%; }
.txt-message{font-size: 0.7rem; font-weight: bold;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
#left3 .arrow {
    bottom: 0px;
    padding-top: 77px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
   }
  }