@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
/*
Name: 東京マラソン2023 メトロで追っかけ応援団
Version: 1.1.0
Updated: 2023.02.27
Smartphone first layout
*/
/*------------------------------------------------------------
Reset
------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, amp-img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0;  font-size: 100%; font-style: normal; font-weight: normal; vertical-align: baseline; background: transparent;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;} 
li {list-style: none;}
img {width: 100%; height: auto; vertical-align: middle;}
a {margin: 0; padding: 0; vertical-align: baseline; background: transparent; word-break: break-all;}
a:focus {-moz-outline-style: none; outline: none;}
/*------------------------------------------------------------
Base
------------------------------------------------------------*/
*{overflow-wrap: break-word;}
html {width: 100%; background-color: #ffffff; font-size: 100%; -webkit-text-size-adjust: 1em; -ms-text-size-adjust: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-kerning: normal; font-kerning: normal;}
body {width: 100%; background-color: #ffffff; font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; font-weight: 400; line-height: 1; color: #000000; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body.navi_open {position: fixed; top: 0; left: 0; width: 100%; height: 100vh;}
a {text-decoration: none; transition: all 0.3s;}
a:hover {opacity: 0.75;}
/* -----------------------------------------------------
Page Body
----------------------------------------------------- */
#page_body {font-size: 14px;}
/* -----------------------------------------------------
Header
----------------------------------------------------- */
header {background-color: #fff; padding: 10px;}
header .hdr_wrap {display:-webkit-box; display:-ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
header .hdr_wrap div {width: 33.33%;}
header .hdr_wrap img {height: 50px; width: auto;}
header .hdr_wrap .hdr_icn {text-align: left;}
header .hdr_wrap .hdr_logo {text-align: center;}
header .hdr_wrap .hdr_btn {text-align: right;}
header .hdr_wrap .hdr_btn .btn_menu {display: inline-block; cursor: pointer; width: 50px; background-color: #519bad; border-radius: 4px;}
header .hdr_wrap .hdr_btn.active .btn_menu {background-color: #31707f;}
header #hdr_navi {z-index:100; position: fixed; top: 0; right: -120%; width: 100%; height: calc(100% - 70px); margin-top: 70px; overflow: auto; -webkit-overflow-scrolling: touch; transition: all 0.6s;}
header #hdr_navi.active {right: 0; background: rgba(175,225,237,0.8);}
header #hdr_navi ul.navi_list {background-color: #ddeff3;}
header #hdr_navi ul.navi_list li {font-size: 1em; border-bottom: 1px solid #024b80;}
header #hdr_navi ul.navi_list li.subttl {display: block; padding: 22px; font-weight: 700; color: #000;}
header #hdr_navi ul.navi_list li.second_link {padding-left: 20px;}
header #hdr_navi ul.navi_list li a {display: block; padding: 22px 22px 22px 36px; font-weight: 700; color: #034372; background: url(../img/icn_link.svg) left 22px top 51% no-repeat; background-size: 7px auto;}
header #hdr_navi .btn_close {text-align: center; cursor: pointer; font-size: 1em; padding: 22px; border-bottom: 1px solid #c5c5c5;}
header #hdr_navi .btn_close .icn {background: url(../img/icn_link2.svg) right 0 top 51% no-repeat; background-size: 11px auto; padding-right: 20px;}
/* -----------------------------------------------------
Page Title
----------------------------------------------------- */
.page_ttl {position: relative; background-color: #00aad4;}
.page_ttl .photo_copyright {position: absolute; bottom: 3px; right: 10px; color: #fff; font-size: 0.6em; text-align: right;}
/* -----------------------------------------------------
Page Main
----------------------------------------------------- */
#page_main {background-color: #00aad4; padding: 20px 15px;}
#page_main .page_main_inr {max-width: 600px; margin: 0 auto;}

/* -----------------------------------------------------
Banner
----------------------------------------------------- */
#top_bnr {background-color: #fff; padding: 20px 15px 40px; width: calc(100% - 30px); margin: 0 auto;}
#top_bnr ul {display:-webkit-box; display:-ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#top_bnr ul li {width: 100px;}
#top_bnr ul li a {position: relative; display: block; height: 110px; border: 1px solid #000; border-radius: 10px; display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center;}
#top_bnr ul li a .bnr_inr {width: 100%;}
#top_bnr ul li a .txt {position: absolute; width: 100%; bottom: 16px; font-size: 0.7em; color: #010101; line-height: 1.4;}
#top_bnr ul li a .pic {margin: -28px 0 0;}
#top_bnr ul li a .pic_tokyometro img {width: 80px;}
#top_bnr ul li a .pic_metro_app img {width: 42px;}
#top_bnr ul li a .pic_tokyomarathon img {width: 80px;}
#top_bnr .logo01 {width: 280px; margin: 0 auto; padding: 10px 0 0;}
/* -----------------------------------------------------
Footer
----------------------------------------------------- */
footer {position: relative; padding: 20px;}
footer small {font-size: 0.7em;}
footer .icn_go_top {position: absolute; bottom: 70px; right: 15px; width: 35px;}
.toppage footer {border-top: 1px solid #034372;}

/* ====================================================== Media Querie
〜599px SP
----------------------------------------------------- */
		@media screen and (max-width: 599px) {
.sp_none {display: none;}
		}
/* ====================================================== Media Querie
〜320px SP small size
----------------------------------------------------- */
		@media screen and (max-width: 320px) {

/* Banner ----------------------------------------------------- */
#top_bnr {padding-bottom: 70px; }
#top_bnr ul li {width: 30%;}
#top_bnr ul li a .pic_tokyometro img,
#top_bnr ul li a .pic_metro_app img,
#top_bnr ul li a .pic_tokyomarathon img {width: 90%;}
		}
/* ====================================================== Media Querie
〜1099px TB
----------------------------------------------------- */
		@media screen and (min-width: 600px) and (max-width: 1099px) {
.tb_none {display: none;}

/* Banner ----------------------------------------------------- */
#top_bnr {padding: 30px 0; width: auto;}
#top_bnr ul {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#top_bnr ul li {width: 170px; padding-bottom: 0; padding-left: 20px;}
#top_bnr ul li:nth-of-type(1) {padding-left: 0;}
#top_bnr ul li a {height: 150px;}
#top_bnr ul li a .txt {bottom: 20px; font-size: 0.9em;}
#top_bnr ul li a .pic {margin: -30px 0 0;}
#top_bnr ul li a .pic_tokyometro img {width: 108px;}
#top_bnr ul li a .pic_metro_app img {width: 58px;}
#top_bnr ul li a .pic_tokyomarathon img {width: 105px;}
#top_bnr .logo01 {padding: 20px 0 0;}
		}
/* ====================================================== Media Querie
1100px〜 PC
----------------------------------------------------- */
		@media screen and (min-width: 1100px) {
.pc_none {display: none;}
/* Page Body ----------------------------------------------------- */
#page_body {font-size: 20px;}
/* Header ----------------------------------------------------- */
header {padding: 18px;}
header .hdr_wrap {height: 70px;}
header .hdr_wrap img {height: 70px; width: auto;}
header .hdr_wrap .hdr_btn .btn_menu {width: 70px;}
header #hdr_navi {height: calc(100% - 95px); margin-top: 95px;}
header #hdr_navi ul.navi_list li {font-size: 0.8em;}
header #hdr_navi ul.navi_list li a {padding: 20px 36px;}
header #hdr_navi .btn_close {font-size: 0.8em;}
/* Page Main ----------------------------------------------------- */
#page_main {padding: 25px;}
#page_main .page_main_inr {max-width: 800px;}
/* Banner ----------------------------------------------------- */
#top_bnr {padding: 40px 0; width: auto;}
#top_bnr ul {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#top_bnr ul li {width: 180px; padding-bottom: 0; padding-left: 20px;}
#top_bnr ul li:nth-of-type(1) {padding-left: 0;}
#top_bnr ul li a {height: 150px;}
#top_bnr ul li a .txt {bottom: 20px;}
#top_bnr ul li a .pic {margin: -36px 0 0;}
#top_bnr ul li a .pic_tokyometro img {width: 108px;}
#top_bnr ul li a .pic_metro_app img {width: 58px;}
#top_bnr ul li a .pic_tokyomarathon img {width: 105px;}
#top_bnr .logo01 {padding: 20px 0 0;}
/* Footer ----------------------------------------------------- */
footer {padding: 45px 0; text-align: center;}
footer .icn_go_top {position: absolute; bottom: 140px; right: 25px; width: 70px;}
		}

/* -----------------------------------------------------
Fade In
----------------------------------------------------- */
.fade_in {transition: 0.8s; opacity: 0;}
.fade_in.is-inview {transition-delay: 0.05s; opacity: 1;}

.toppage .fade_in {transition: 0.8s; opacity: 0; height: 0;}
.toppage .fade_in.is-inview {transition-delay: 0.05s; opacity: 1; height: auto;}
.toppage .fade_in02 {height: 0;}
.toppage .fade_in02.is-inview {transition-delay: 1.7s; opacity: 1; height: auto;}
/* -----------------------------------------------------
Slide In
----------------------------------------------------- */
.toppage .slide_in01 {transition: 0.5s; transform: translateX(-90%);}
.toppage .slide_in01.is-inview {transform: translateX(0%);}
.toppage .slide_in02 {transition: 0.5s; transform: translateX(-90%);}
.toppage .slide_in02.is-inview {transition-delay: 0.5s; transform: translateX(0%);}
.toppage .slide_in03 {transition: 0.5s; transform: translateX(-90%);}
.toppage .slide_in03.is-inview {transition-delay: 1s; transform: translateX(0%);}
.toppage .slide_in04 {transition: 0.5s; transform: translateX(-90%);}
.toppage .slide_in04.is-inview {transition-delay: 1.5s; transform: translateX(0%);}

/*2024*/
#coming_soon {
  background: url("../img/bg_comingsoon_pc.jpg") center top no-repeat #01aad5;
  background-size: 100% auto;
  text-align: center;
  color: #fff;
  padding: calc(100vw / ( 1100 / 225 )) 0 calc(100vw / ( 1100 / 115 ));
}
#coming_soon .coming_soon_ttl {
  font-weight: bold;
  margin-bottom: 1.5em;
  font-size: calc(100vw / ( 1100 / 60 ));
}
#coming_soon .coming_soon_txt {
  line-height: 1.5;
  font-size: calc(100vw / ( 1100 / 30 ));
}
@media screen and (min-width: 1100px) {
  #coming_soon {
    background-size: 1100px auto;
    padding: 225px 0 115px;
  }
  #coming_soon .coming_soon_ttl {
    font-size: 3.0em;
  }
  #coming_soon .coming_soon_txt {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 599px) {
  #coming_soon {
    background: url("../img/bg_comingsoon_sp.jpg") center top no-repeat #01b3df;
    background-size: 100% auto;
    padding: calc(100vw / ( 750 / 165 )) 0 calc(100vw / ( 750 / 85 ));
  }
  #coming_soon .coming_soon_ttl {
    font-size: calc(100vw / ( 750 / 48 ));
  }
  #coming_soon .coming_soon_txt {
    font-size: calc(100vw / ( 750 / 28 ));
  }
}