@charset "utf-8";
/* -------------------------------------------
Auther: design studio tom'sOne
        Tommy Tsutsui
        https://toms1.net/
Last modefied: 16/Oct/2021
------------------------------------------- */

/* -------------------------------------------
  Reset
------------------------------------------- */
html{font-size:62.5%;}body,a,address,header,html,iframe,nav{padding:0;margin:0}address,header,html,iframe,nav{border:0;outline:0}abbr,article,aside,audio,b,canvas,cite,code,del,details,dfn,em,fieldset,figcaption,figure,form,hgroup,i,img,ins,kbd,label,legend,mark,menu,object,pblockquote,pre,q,samp,span,strong,sub,summary,sup,time,var,video{background:0 0;margin:0;padding:0;border:0;outline:0}footer,h1,h2,h3,h4,h5,h6,p,section,small{border:0;outline:0}address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a img,figure{vertical-align:top}abbr[title],dfn[title]{cursor:help}input,select{vertical-align:middle}noscript{margin:0}

/* -------------------------------------------
  Fonts
------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}

#TGTitle, .botCompName { font-family: source-han-serif-japanese, serif; font-weight: 500; font-style: normal; font-feature-settings : "palt"}

.copyright { font-family:  josefin-sans, sans-serif; font-weight: 300}

/* -------------------------------------------
  Common
------------------------------------------- */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium")}
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold}

body {
  position: relative; color: #333; background: #fff; -webkit-text-size-adjust: 100%; font-size: 1em;
  line-height: 1; width: 100%; height: 100%; z-index: 1}

#TGHeader { position: relative}
#TGHeader:before { content: ''; position: absolute; top: 0; left: 0; background: #525252; width: 100%; height: 150px; display: block}

#TGTitle { font-size: 3rem; text-align: center; letter-spacing: .075em; width: 100%; margin: 0 auto; padding-top: 240px}
.lsM05 { letter-spacing: -.05em;}

#TGLName { position: absolute; top: 0; left: 50%; background: url(images/traffic_logo.svg) no-repeat 0 -2px / 150px 150px; width: 150px; height: 150px; margin: 0 0 0 -75px}
#TGLName a { text-indent: 400%; width: 150px; height: 150px; white-space: nowrap; display: block; overflow: hidden}

.TGTSub { color: #0092d2; font-size: 2rem; font-style: normal; margin-top: 18px; display: block}

#BySizuContents { margin-top: 50px}

#BySizuIM { text-align: center; width: 25vw; height: 25vw; margin: 0 auto 45px}
#BySizuIM img { width: 100%; height: auto}

#BySizuContents p { font-size: 1.5rem; line-height: 2; letter-spacing: .075em; width: 52em; margin: 1em auto 0;}

.BSCaution { color: #e40; font-style: normal; font-weight: bold; margin-right: 5px}
.BSCaution > i { font-size: 2rem; vertical-align: -.24em; margin-right: 3px}

footer { background: #555; width: 100%; height: 150px; margin: 70px 0 0; position: relative}

.botCompName, .copyright { position: absolute; left: 0; color: #ddd; font-size: 1.4rem; text-align: center; letter-spacing: .1em; width: 100%; margin: 0; display: block}
.botCompName { top: 53px} .copyright { bottom: 53px}

@media (min-width: 600px) and (max-width: 1080px) and (orientation: portrait) {
  #TGTitle {font-size: 3.8vw; padding-top: 250px} .TGTSub { font-size: 3vw} #BySizuIM { width: 36vw; height: 36vw}}

@media (min-width: 740px) and (max-width: 1080px) and (orientation: portrait) {
  #BySizuContents {min-height: calc(100vh - 200px)} footer { position: fixed; bottom: 0; letter-spacing: 0}}

@media (max-width: 959px) {
  #TGHeader:before { height: 100px} #TGLName { background-size: 100px 100px; width: 100px; height: 100px; margin: 0 0 0 -50px}
  #TGTitle { padding-top: 180px} #TGTitle .spNBlock { letter-spacing: .08em} .TGTSub { font-size: 2.8vw}
  #BySizuContents p { width: auto; padding: 0 5vw;} footer { height: 100px} .botCompName { top: 32px} .copyright { bottom: 32px}}

@media (max-width: 699px) {
  #TGTitle { font-size: 4.25vw; padding-top: 180px} .TGTSub { font-size: 3.3vw} footer { margin-top: 50px}}

@media (max-width: 640px) and (orientation: portrait) { #BySizuIM { width: 45vw; height: 45vw}}

@media (max-width: 559px) {
  #TGTitle { font-size: 4.25vw; padding-top: 180px} .TGTEN { font-size: 1.5rem} .TGGuideWrapp { padding-top: 55px}}

@media (max-width: 520px) {
  #TGTitle { font-size: 2.4rem; letter-spacing: .1em; padding-top: 160px}
  .TGTSub { font-size: 1.8rem} .spNB01 { padding-bottom: 12px; display: block} #BySizuIM { margin-bottom: 35px;} .spLH { line-height: 1.5 !important}}

@media (max-width: 480px) {
  #TGHeader:before { height: 90px} #TGLName { background-size: 90px 90px; width: 90px; height: 90px; margin: 0 0 0 -45px}
  #TGTitle { font-size: 2.4rem; padding-top: 140px} #BySizuIM { width: 55vw; height: 55vw}
  footer { height: 90px} .botCompName { top: 28px; font-size: 1.3rem} .copyright { bottom: 28px; font-size: 1.3rem}}

@media (max-width: 399px) {
  .spNB01 { display: inline} .spNB02 { padding-top: 12px; display: block} .TGTSub { font-size: 1.7rem} #BySizuIM { width: 60vw; height: 60vw}}

@media (min-width: 560px) and (max-width: 719px) and (orientation: landscape) {
  #TGTitle {padding-top: 150px} #BySizuIM { width: 40vw; height: 40vw; margin-bottom: 35px}}

@media (min-width: 720px) and (max-width: 959px) and (orientation: landscape) {
  #TGTitle {padding-top: 170px} .TGTSub { font-size: 2.2rem} #BySizuIM { width: 35vw; height: 35vw; margin-bottom: 35px}}

/* -------------------------------------------
  Text Link
------------------------------------------- */
@media (min-width: 960px) {
.tLink { position: relative; color: #08b; text-decoration: none; display: inline-block}
.tLink:hover { color: #33aec7}
.tLink:after {
  content: ''; position: absolute; bottom: 2px; left: -1px; background: #f57e33;
  width: 6px; height: 1px; display: block; -webkit-transform-origin: top left; transform-origin: top left;
  -webkit-transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s; transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s; }
  .tLink:hover:after { width: 100%; height: 2px}}

@media (max-width: 959px) {
.tLink { position: relative}
.tLink { color: #08b; text-decoration: none; display: inline-block}
.tLink:after { content: ''; position: absolute; bottom: 3px; left: -1px; background: #c9e2f0; width: 100%; height: 1px; display: block}}