GPSウォッチや地図アプリなどで表示・ナビゲーションを活用する方法は下記の2通りございます。
①ガーミン社のGPSウォッチに直接取り込む
- スマホアプリ（GARMIN Connect）またはWEBサイトより、デバイスに送信
- GPSウォッチでナビゲーション
※Garmin Connectへのサインインが必要です
②GPSウォッチや地図アプリなどへ取り込む
- WEBサイトよりGPXデータをダウンロード
- お好みのデバイスや地図アプリへ取込み
/* -------------------------------
トップコンテンツ
------------------------------- */
.home .main #container.innerBox {
box-shadow: 0px 0px 4px rgb(0 0 0 / 10%);
margin-top: 20px;
margin-bottom: 30px;
position: relative;
background-color: #E83429;
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/top_bg.png);
background-repeat: repeat;
background-size: contain;
padding: 25px 20px;
box-sizing: border-box;
}
.home .content {
position: relative;
background: #fff;
padding: 0 25px 20px;
border-radius: 40px;
margin: 0;
}
@media (max-width:767px) {
.home .main #container.innerBox {
margin-top: 10px;
padding: 20px 10px !important;
}
.home .content {
position: relative;
background: #fff;
padding: 0 10px 20px !important;
border-radius: 20px;
}
}
.top_contents {
position: relative;
background: #fff;
padding: 0;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
border-radius: 40px;
}
.top_contents:before {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/img-runners01.png);
position: absolute;
bottom: -130px;
right: -60px;
z-index: 1;
transform: scale(0.8);
}
.top_contents h4, .top_contents h2 {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 130% !important;
}
.top_contents .colwrap_main {
padding: 0 30px;
align-items: center;
}
.top_contents .colwrap_main p {
font-size: 1.15em;
margin-bottom: 0;
}
.top_contents .colwrap_main .txt {
width: 60%;
}
.top_contents .colwrap_main .img {
width: 35%;
margin: 0 3%;
box-sizing: border-box;
}
.top_contents .topCatch {
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/top_lead_bg.png);
background-repeat: no-repeat;
background-size: auto;
}
.top_contents .topCatch .colwrap_inner {
justify-content: center;
align-items: center;
}
.top_contents .topCatch .colwrap_inner figure {
width: 70%;
margin: 2% 0 0 3%;
}
.top_contents .topCatch .colwrap_inner .txt {
font-size: 1.15em;
}
.top_contents .topCatch .colwrap_inner .tl {
font-size: 2.3em;
color: #fff;
font-weight: bold;
padding: 3px 0 0 60px;
margin-bottom: 50px;
}
.top_contents .topCatch .colwrap_inner .btn a {
position: relative;
border: solid 1px #ec8e7d;
display: inline-block;
padding: 20px 20px 18px 70px;
width: 380px;
box-sizing: border-box;
color: #e26663;
background: #fff;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
}
.top_contents .topCatch .colwrap_inner .btn a:before {
content: '';
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-torii.png);
position: absolute;
top: 9px;
left: 8px;
width: 45px;
height: 39px;
}
.top_contents .topCatch .colwrap_inner .btn a .fa-chevron-right:before {
content: "\f054";
position: absolute;
right: 10px;
top: 22px;
}
.top_contents .topCatch .colwrap_inner .btn a:hover {
border: solid 1px #ec8e7d;
background: #FFF;
color: #EA5455;
transition:0.5s;
}
.top_contents .colwrap_top_entry {
justify-content: center;
align-items: center;
}
.top_contents .colwrap_top_entry div {
width: 45%;
}
.top_contents .colwrap_top_entry div .btn {
font-size: 1.5em;
width: 90%;
}
.top_contents .syumoku {
width: 75%;
margin: 50px 0;
}
@media (max-width: 659px) {
.content table.sp-tr-mb0 tbody tr {
margin-bottom: 0px !important;
}
}
@media (max-width:767px) {
.top_contents {
/*padding: 0 10px 50px;*/
border-radius: 15px;
}
.top_contents:before {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/img-runners01.png);
position: absolute;
bottom: -105px;
right: -120px;
z-index: 1;
transform: scale(0.5);
display: none;
}
.top_contents .topCatch {
background-size: contain;
}
.content [class^=colwrap_] {
flex-wrap: wrap;
}
.top_contents .topCatch .colwrap_inner .txt {
font-size: 1.15em;
padding: 10px;
}
.top_contents .topCatch .colwrap_inner figure {
width: 90%;
margin: 0;
}
.top_contents .topCatch .colwrap_inner .tl {
font-size: 1.65em;
color: #fff;
font-weight: bold;
padding: 5px 0 0 25px;
margin-bottom: 30px;
}
.top_contents .topCatch .colwrap_inner .btn a {
position: relative;
border: solid 1px #ec8e7d;
display: inline-block;
padding: 20px 20px 18px 60px;
width: 100%;
box-sizing: border-box;
color: #e26663;
background: #fff;
text-decoration: none;
font-size: 1em;
font-weight: bold;
}
.top_contents .topCatch .colwrap_inner .btn a:before {
content: '';
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-torii.png);
position: absolute;
top: 9px;
left: 8px;
width: 45px;
height: 39px;
}
.top_contents .topCatch .colwrap_inner .btn a .fa-chevron-right:before {
content: "\f054";
position: absolute;
right: 10px;
top: 22px;
}
.top_contents .topCatch .colwrap_inner .btn a:hover {
border: solid 1px #ec8e7d;
background: #FFF;
color: #EA5455;
transition:0.5s;
}
.top_contents .colwrap_top_entry {
display: block;
}
.top_contents .colwrap_top_entry div .btn {
font-size: 1.3em;
}
.top_contents .colwrap_main {
padding: 0 10px !important;
margin-bottom: 50px !important;
}
.top_contents .colwrap_main {
padding: 0 20px;
margin-bottom: 50px;
align-items: center;
}
.top_contents .column-reverse {
flex-direction: column-reverse;
}
.top_contents .colwrap_main .img {
margin: 0 !important;
}
.top_contents .colwrap_main .txt {
margin: 5px 0;
}
.top_contents .syumoku {
width: 100%;
margin: 40px 0 20px;
}
}
@media screen and (min-width:768px) and (max-width:1024px){
.top_contents .pop_text {
margin: 3.5% 2% 2% !important;
}
.top_contents .colwrap_main {
padding: 0 20px;
align-items: center;
margin-bottom: 50px;
}
.top_contents:before {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/img-runners01.png);
position: absolute;
bottom: -100px;
right: -90px;
z-index: 1;
transform: scale(0.6);
}
}
.top_contents .pop_text {
position: relative;
display: block;
margin: 8% 5% 5%;
font-size: 2em;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: #c00e12;
}
/*.width-50 {
width: 50%;
}
.fs135em {
font-size: 1.35em !important;
}*/
.top_contents .pop_text:before,
.top_contents .pop_text:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 38px;
height: 2px;
background-color: #c00e12;
}
.top_contents .pop_text:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.top_contents .pop_text:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.top_contents .pop_text:before {
left:0;
}
.top_contents .pop_text:after {
right: 0;
}
@media (max-width: 768px){
.top_contents .pop_text {
font-size: 1.25em !important;
line-height: 1.2em !important;
margin: 0 0 1.5% !important;
}
/*.width-50 {
width: 100%;
margin: 0 auto 15px !important;
}*/
.top_contents .pop_text:after {
right: -9px;
}
.top_contents .pop_text:before {
left: -9px;
}
}
#container.innerBox {
box-shadow: none;
}
@media (min-width: 970px){
.home .container {
padding: 0;
}
}
.content .colwrap_top_entry {
justify-content: center;
align-items: center;
}
.content .colwrap_top_entry div {
width: 45%;
}
.content .colwrap_top_entry div .btn {
font-size: 1.5em;
width: 90%;
}
@media (max-width:768px) {
.content .colwrap_top_entry {
display: block;
}
.content .colwrap_top_entry div .btn {
font-size: 1.3em;
}
}
/*-----トップページリンクバナーエリア-----*/
.content .colwrap_top_linkbanner{
margin-top:50px;
}
.content .colwrap_top_linkbanner div:nth-child(odd){
width:35%;
margin-right:5%;
}
.content .colwrap_top_linkbanner div:nth-child(even){
width:35%;
margin-left:5%;
}
@media (max-width:767px){
.content .colwrap_top_linkbanner{
margin-top:0;
margin-bottom:10px;
}
.content .colwrap_top_linkbanner div:nth-child(odd),
.content .colwrap_top_linkbanner div:nth-child(even){
width:75% !important;
margin:0 auto 20px;
}
}
/*-----足祭りリンクボタン-----*/
.btn_footfes{
display: inline-block;
background-color:#fff;
border:1px solid #d9121a;
box-sizing: border-box;
border-radius:3px;
margin-top: 5px;
}
.btn_footfes a{
display:block;
padding:3px 6px 1px;
text-decoration: none;
color:#d9121a;
border-bottom:none;
}
.btn_footfes:hover,
.btn_footfes a:hover{
opacity:0.7;
}
/* -------------------------------
背景
------------------------------- */
#wrap {
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/bg-mian-full.png?);
background-repeat: repeat;
background-position: top center;
background-size: auto;
background-color:#2f2047;
}
@media screen and (max-width: 1219px) {
#wrap {
background-size: 130%;
}
}
#topMainBnr{
background-color:#2f2047;
}
#wrap #gMenu .menu > li a{
border-style: solid;
border-width: 1px;
}
/* -------------------------------
reset
------------------------------- */
@media (max-width: 768px){
.content.wide {
width: auto;
}
}
p,th,td,ul li,dt,dd{
line-height:155% !important;
font-size:14px;
color:#222;
}
@media screen and (min-width:415px){
p,th,td,li,dt,dd{
line-height:170% !important;
}
}
.content p{
padding: 0px;
}
.content dt {
margin-bottom: 0;
}
.content dd {
margin: 0px 0px 20px;
}
#panList {
margin: 8px 0 5px;
}
#panList *{
color: #fff !important;
}
.iconBox {
background-color: #c00;
}
a {
color: #c00;
border-bottom: dotted 1px;
text-decoration: none;
}
.content .infoList ul li .infoTxt a {
border-bottom: none;
}
#siteBottom a {
border-bottom: none;
}
/* -------------------------------
ヘッダー設定
------------------------------- */
#header #site-title a img,
.no-margin #header #site-title a img{
width: 100%;
max-height: 100%;
min-height: auto;
display: block;
margin: auto;
}
.no-margin #header .innerBox {
padding: 10px 0;
}
/* -------------------------------
凡用
------------------------------- */
.pt0 {padding-top: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50{margin-top:50px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.ml0 {margin-left: 0 !important;}
.ml15 {margin-left: 15px !important;}
.ml25 {margin-left: 25px !important;}
.pd0 {padding: 0 !important }
.disp-ilb{display:inline-block!important;}
.fw-b {font-weight: bold !important;}
.fw-n {font-weight: normal !important;}
.s_color{color:#474747 !important;}
.fs085em {font-size: 85%;}
.fs09em {font-size: 90%;}
.fs11em {font-size: 110%;}
.fs12em {font-size: 120%;}
.fs13em {font-size: 130%;}
.fs14em {font-size: 140%;}
.fs15em {font-size: 150%;}
@media (max-width: 414px){
.sp_fs085em {font-size: 85% !important;}
.sp_fs09em {font-size: 90% !important;}
.sp_fs11em {font-size: 110% !important;}
.sp_fs12em {font-size: 120% !important;}
.sp_fs13em {font-size: 130% !important;}
.sp_fs14em {font-size: 140% !important;}
.sp_fs15em {font-size: 150% !important;}
}
.txt-c {text-align: center !important;}
.txt-r {text-align: right !important;}
.txt-l {text-align: left !important;}
.fl-r { float: right; !important;}
.fl-l { float: left; !important;}
@media (max-width:767px) {
.fl-r,.fl-l { float: none; !important;}
}}
.blue{color:#0069c2 !important;}
.bg_blue{background:#0069c2 !important;}
.water{color:#0ba4f5 !important;}
.bg_water{background:#0ba4f5 !important;}
.yellow{color:#fff500 !important;}
.bg_yellow{background:#fff500 !important;}
.red{color:#c00 !important;}
.s_red{color:#f00 !important;}
.marker {
background: linear-gradient(transparent 50%, yellow 50%);
display: inline;
}
.sp {display:none;}
.pc {display:block;}
@media (max-width: 659px){
.sp {display:block;}
.pc {display:none;}
}
/*--flex--*/
.content [class^=colwrap_]{
display:flex;
/*flex-wrap:wrap;*/
justify-content:center;
align-items: flex-start;
}
@media screen and (max-width:767px){
.content [class^=colwrap_] div{
width: 100% !important;
margin:15px auto;
}
}
.flex-center {
display: flex;
justify-content: center;
margin: 0px 0px 20px 0;
}
@media (max-width:767px) {
.flex-center {
display: block !important;
margin-left: 0 !important;
}
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*google map&Youtube*/
.emb {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}
.emb iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border:1px !important;
}*/
/* -------------------------------
リスト
------------------------------- */
.content ul[class*="-list"],
.content ul[class*="-list"] > li {
list-style-type: none !important;
}
.content ul[class*="-list"] > li {
margin-bottom: 5px;
position: relative;
/*padding-left: 1.25rem;*/
padding-left: 1rem;
}
.content ul[class*="-list"] > li:before {
position: absolute;
left: 0;
}
.content ul.dot-list > li:before {
content: "\0030FB";
font-weight: bold;
}
.content ul.reference-list {
font-size: 95%;
}
.content ul.reference-list > li:before {
content: "\00203B";
padding-right: 0.45rem;
}
/*dl-lists*/
.content dl[class*="dl-list"] {
line-height: 1.5;
margin-bottom: 0.5rem;
}
.content dl[class*="dl-list"] > dt, .content dl[class*="dl-list"] > dd {
position: relative;
/*padding: 0 0 0 1.5rem;*/
padding: 0 0 0 1.2rem;
margin-bottom: 0.25rem;
}
.content dl[class*="dl-list"] > dd + dt {
margin-top: 0.75rem;
}
.content dl[class*="dl-list"] > dt:before {
position: absolute;
top: 0;
left: 0;
padding-left: 0.25rem;
}
.content dl[class*="dl-list"] > dd:before {
position: absolute;
top: 0;
left: 0;
padding-left: 0.25rem;
}
.content dl.dl-list--dt__dot > dt:before {
content: "\0030FB";
font-weight: bold;
}
.content dl.dl-list--dd__dot > dd:before {
content: "\002022";
font-weight: bold;
padding-left: 0.5rem;
}
.content dl.dl-list--dd__kome dd {
font-size: 95%;
}
.content dl.dl-list--dd__kome > dd:before {
content: "\00203B";
padding-left: 0.5rem;
}
.content dl.dl-list--dt__circle > dt:before {
content: "●";
font-weight: bold;
}
.content .list_none_ul li{
list-style-type:none !important;
text-indent:-1em;
padding-left:0;
}
.content .caution_ul{
margin-left:5px;
margin-bottom: 0;
}
.content .caution_ul li{
list-style-type: none;
font-size:0.95em;
padding-left: 1em;
text-indent: -1em;
margin-bottom:5px;
}
/* -------------------------------
リンクボタン
------------------------------- */
p.btn {
width: 90%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
border: 1px solid #c00;
border-radius: 50px;
color: #c00;
font-weight: bold;
text-align: center;
}
p.btn a {
display: block;
text-decoration: none;
color: #c00;
box-sizing: border-box;
border-bottom: none;
}
p.btn:hover {
background-color: #c00;
transition:0.5s;
}
p.btn:hover a {
color: #fff;
}
@media screen and (min-width: 641px) {
p.btn {
font-size: 1.5rem;
}
p.btn a {
padding: 14px 10px 10px;
font-size: 0.8em;
}
}
@media screen and (max-width: 640px) {
p.btn {
font-size: 4vw;
}
p.btn a {
padding: 5%;
}
}
/*リンク無効*/
/*.btn-nolink {
position: relative;
}
.btn-nolink,
.btn-nolink a {
pointer-events: none;
cursor: default;
position: relative;
}
.btn-nolink:before {
content: '';
position: absolute;
background: #000;
display: block;
width: 100%;
height: 100%;
opacity: 0.6;
border-radius: 50px;
}
.btn-nolink:after {
content: "準備中";
position: absolute;
font-size: 17px;
color: #fff;
font-weight: bold;
display: block;
opacity: 1;
left: 50%;
top: 45%;
text-align: center;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
margin: auto;
right: 0;
bottom: 0;
}*/
/* -------------------------------
エントリーボタン無効
------------------------------- */
#entryBtn li.btn-nolink .first {
margin-right: 0;
}
#entryBtn li.btn-nolink {
position: relative;
}
@media (min-width: 661px) {
#entryBtn li.btn-nolink {
float: left;
width: 48% !important;
margin-right: 2% !important;
}
#entryBtn li.btn-nolink:nth-of-type(even) {
float: right !important;
margin-right: 0 !important;
}
}
@media (max-width: 660px) {
#entryBtn li.btn-nolink {
display: block;
margin-bottom: 4%;
}
}
#entryBtn li.btn-nolink a:hover {
opacity: 1;
}
#entryBtn li.btn-nolink a:before {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000000;
opacity: 0.55;
border-radius: 5px;
}
#entryBtn li.comingsoon a:after {
content: "準備中";
font-size: 140%;
color: white;
/*font-weight: bold;*/
letter-spacing: 0.25em;
padding-left: 0.125em;
position: absolute;
display: block;
opacity: 1;
left: 50%;
top: 53%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
#entryBtn li.end a:after {
content: "エントリー受付終了";
font-size: 130%;
color: white;
font-weight: bold;
letter-spacing: 0.25em;
padding-left: 0.125em;
position: absolute;
display: block;
opacity: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
#entryBtn li.btn-nolink a {
pointer-events: none;
cursor: default;
}
#entryBtn li.btn-nolink a:hover {
opacity: 1;
}
/* -------------------------------
メニュータブ
------------------------------- */
#gMenu .menu li a:hover,
#gMenu .menu li a:hover,
#gMenu .menu li.current_page_item > a,
#gMenu .menu li.current-menu-ancestor > a,
#gMenu .menu li.current-page-ancestor > a,
#gMenu .menu li.current_page_ancestor > a {
background-color: #FBFDEB;
color:#000;
opacity: 1;
}
#gMenu .menu li{
font-size:14px !important;
}
@media screen and (min-width: 768px){
#wrap #gMenu .menu > li {
position: relative;
width: calc(99.99% / 7);
box-sizing: border-box;
}
#wrap #gMenu .menu > li a {
box-sizing: border-box;
min-height: 4em;
padding: 0;
}
#wrap #gMenu .menu > li a strong {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
width: 100%;
}
}
@media (min-width: 768px){
#gMenu .menu li a {
margin:7px 0;
}
#gMenu .menu li ul,
#gMenu .menu li ul li {
width: 100%;
}
ul.sub-menu li a{
text-align: center !important;
padding: 15px 0 !important;
}
}
@media (max-width: 767px){
#gMenu .menu,
.menu-mobile-vertical #gMenu ul li ul li,
.sidr ul li ul li{
font-size:14px;
}
.menu-mobile-vertical #gMenu .assistive-text {
background-color:#2e2147;
border-radius: 3px;
border-style: solid;
border-width: 1px;
}
ul.sub-menu li a{
padding-left:2em !important;
}
}
#gMenu .assistive-text span {
padding: 18px 0px;
font-size:20px;
}
#mobileui{
border-radius:0;
}
#mobileui a.button{
width: 50px;
height: 47px;
}
.sidr #sidr-id-menuber{
background:#014099;
}
/* -------------------------------
開催要項
------------------------------- */
#content table.main-table {
border-top: 0px solid #ccc;
text-align: left;
font-size: 100%;
}
#content table.main-table th {
margin-right: 0px;
border: none;
font-weight: bold;
}
#content table.main-table th,
#content table.main-table td {
margin-right: 0px;
border: none;
border-bottom:1px dotted #c00;
text-align: left;
}
#content table.main-table td {
padding: 20px;
}
#content table.main-table th {
background-color: transparent;
padding: 20px 50px 20px 0;
}
#content th.no_line,
#content td.no_line {
border: 0px !important;
}
@media screen and (max-width:679px) {
#content table.main-table th,
#content table.main-table td {
display: block;
padding: 10px !important;
border: 1px dotted #c00;
}
#content table.main-table th {
border-bottom: none;
background: #F5F0F0;
text-align: center;
}
}
/* -------------------------------
entry
------------------------------- */
.content .entry-box {
background: #f4f0f3;
}
.entry-box {
padding: 8px;
}
/*--feetable--*/
.content table.fee-table th,
.content table.fee-table td {
/*font-size: 13px;*/
}
.content table.fee-table th {
font-weight: bold;
}
@media (min-width: 660px) {
.content table.fee-table th,
.content table.fee-table td {
border: dotted 1px #c00;
padding: 10px;
border-left: none;
border-right: none;
vertical-align: middle;
text-align: center;
}
.content table.fee-table thead th {
background-color: #c00;
color: #fff;
}
.content table.fee-table thead th:last-of-type {
/*border-right-color: #0B57a5;*/
}
.content table.fee-table tbody th {
white-space: normal;
background-color:#f5f0f0;
color: #444;
}
}
@media (max-width: 659px) {
.content table.fee-table thead {
display: none;
}
.content table.fee-table,
.content table.fee-table tbody,
.content table.fee-table tbody tr,
.content table.fee-table tbody tr th,
.content table.fee-table tbody tr td {
display: block;
border: none;
}
.content table.fee-table tbody tr {
margin-bottom: 20px;
}
.content table.fee-table tbody tr th {
border-color: #c00;
background-color:#f5f0f0;
color: #444;
white-space: normal;
}
.content table.fee-table tbody tr td:before {
content: attr(cellhead);
float: left;
font-weight: bold;
color: #c00;
}
.content table.fee-table tbody tr td {
text-align: right;
border-bottom: 1px dotted #c00;
}
.content table.fee-table tbody tr td:last-of-type {
border-bottom: none;
}
}
h3.tl_entry {
border-bottom: 2px solid #c00;
padding: 7px 5px 6px 60px;
margin: 40px 0px 20px;
font-size: 1.5em;
}
h3.tl_entry:before {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-torii.png);
border-left-color: #fff;
}
h3.tl_entry:after {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-run.png);
position: absolute;
top: 0;
right: 5px;
}
.entry-box .inBox #entryBtn {
flex-wrap: nowrap;
justify-content: center;
}
.entry-box .inBox #entryBtn a.btnGreen {
height: auto;
}
@media (min-width: 576px){
.entry-box .inBox #entryBtn li {
width: 97%;
padding: 0 !important;
margin: 0.5%;
box-sizing: border-box;
}
.entry-box .inBox #entryBtn li.realfinish {
width: 50%;
}
}
.entry-box .inBox ul.eny_alt li {
font-size: 0.9em;
}
@media (max-width:767px) {
.entry-box .inBox #entryBtn {
flex-direction: column;
}
h3.sp-fs {
font-size: 1.15em;
}
h3.sp-fs-12em {
font-size: 1.2em;
}
}
/* -------------------------------
参加方法
------------------------------- */
.content .flowBox > dl > dt {
margin-bottom: 20px;
}
.content .flowBox > dl > dt:after {
clear: both;
content: "";
display: block;
height: 5px;
}
.content .flowBox .iconBox {
float: left;
margin-right: 8px;
text-align: center;
}
.content .flowBox .feCaption {
line-height: 140%;
display: block;
float: left;
width: calc(100% - 80px);
}
.content .flowBox > dl > dd > h4 {
padding: 10px;
}
.label-gray {
background: #ececec;
/*padding: 3px 10px;*/
padding:3px;
margin: 2px 5px;
border-radius: 5px;
color: #111;
white-space: nowrap
}
.content [class^="col2"] .col2-blk {
display: inline-block;
list-style-type: none !important;
width: 47.5% !important;
padding: 0 !important;
}
.content [class^="col2"] .col2-blk:nth-child(odd) {
margin-right: 0.5%;
}
.content [class^="col2"] .col2-blk:nth-child(even) {
margin-left: 0.5%;
}
@media screen and (max-width: 660px) {
.content .col2-spbreak .col2-blk {
margin:0 auto 3.5%;
margin-right: auto !important;
margin-left: auto !important;
width: 100% !important;
}
}
.app-links > li > a {
display: block;
color: #FFF;
text-align: center;
padding: 15px 10px;
font-size: 16px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
text-decoration: none;
max-width: 260px;
background-color: #ddd;
}
.app-links li.app-links__Apple > a span {
display: block;
background: url('https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/app-store.png') right center no-repeat;
padding-right: 160px;
color: #000;
font-size: 12px;
}
.app-links li.app-links__Google > a span {
display: block;
background: url('https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/google-play.png') right center no-repeat;
padding-right: 160px;
color: #000;
font-size: 12px;
}
@media (min-width: 660px) {
.app-links {
display: flex;
justify-content: center;
}
.app-links > li {
margin: 15px;
display: inline-block;
}
}
@media (max-width: 659px) {
.app-links > li {
display: block;
margin: 30px auto;
}
.app-links > li > a {
margin: auto;
}
}
/*--GPSウォッチ連携方法（GPSウォッチでの計測者のみ）--*/
.content [class^="col5"] {
text-align: left;
}
.content [class^="col5"] .col5-blk{
display: block;
list-style-type: none !important;
padding: 0 !important;
}
.content [class^="col5"] .col5-blk:nth-child(odd){
float: left;
width:25%;
margin:0.5%;
}
.content [class^="col5"] .col5-blk:nth-child(even){
float: left;
width:10%;
margin:0.5%;
}
.content [class^="col5"]:after {
content: '';
clear: both;
display: block;
}
@media screen and (max-width:414px) {
.content .col5-spbreak .col5-blk:nth-child(odd) {
margin:0 auto 1%;
float: none !important;
width:60%;
}
.content .col5-spbreak .col5-blk:nth-child(even){
margin:0 auto 1%;
float:none !important;
width:15%;
transform: rotate(90deg);
}
}
.tatta_flex_fig {
display: flex;
align-items: flex-start;
justify-content: space-evenly;
}
.tatta_flex_fig img:nth-child(odd) {
width: 450px;
margin-top: 8px;
}
.tatta_flex_fig img:nth-child(even) {
width: 500px;
}
@media (max-width:767px) {
.tatta_flex_fig {
display: block;
}
.tatta_flex_fig img:nth-child(odd) {
width: 89%;
margin-top: 0;
margin: 0 auto 5%;
}
}
/* -------------------------------
参加特典
------------------------------- */
h2.sanka {
padding: 1.1rem 2rem 0.6rem;
border-left: 6px double #014099;
color: #014099;
border-right: 6px double #014099;
background: #fff500;
text-align: left;
border-bottom: none;
}
.content .colwrap_prize {
justify-content: space-around;
align-items: flex-start;
}
.content .colwrap_prize figure {
width: 40%;
}
@media (max-width:767px) {
.content .colwrap_prize {
flex-direction: column;
}
.content .colwrap_prize figure {
width: 100%;
}
}
.img-comingsoon,
.content .colwrap_prize figure .cs {
background: #efefef;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
color: #aaa;
margin-top: 30px;
}
/* -------------------------------
服部天神宮とは
------------------------------- */
#hattori_about {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#hattori_about h3 {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.page-id-1305 #container {
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/bg.png);
background-repeat: repeat-y;
background-position: top center;
background-size: contain;
box-shadow: 0px 3px 20px 0px #cc00002b !important;
/*padding: 0 !important;*/
border-radius: 20px;
box-sizing: border-box;
background-color: #fffef4;
}
#hattori_about .tl_about {
background: #c00;
padding: 25px 30px 22px;
margin: 15px 0px 15px;
font-size: 2em;
text-align: center;
color: #fff;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
position: relative;
}
#hattori_about .tl_about:before {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/tl_left.png);
position: absolute;
top: 4px;
left: 5px;
}
#hattori_about .tl_about:after {
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/07/tl_right.png);
position: absolute;
top: 4px;
right: 5px;
}
@media (max-width:767px) {
.page-id-1305 #container {
padding: 10px 5px;
}
#hattori_about .inner {
padding: 0 10px !important;
}
#hattori_about .inner .colwrap_lead,
#hattori_about .inner .colwrap_photo,
#hattori_about .inner .colwrap_map {
display: block;
}
#hattori_about .inner .colwrap_photo figure:nth-child(odd) {
margin-right: 0;
margin-bottom: 2%;
}
#hattori_about .inner .colwrap_photo figure:nth-child(even) {
margin-left: 0;
}
#hattori_about .tl_about {
padding: 18px 20px 14px;
margin: 20px 0px 20px;
font-size: 1.3em;
}
}
#hattori_about .inner {
padding: 30px 20px 0;
}
#hattori_about .inner .colwrap_lead {
align-items: flex-end;
}
#hattori_about .inner .colwrap_lead .txt {
margin-right: 5%;
line-height: 1.8;
font-size: 1.15em;
}
#hattori_about .inner .colwrap_lead .btn a {
position: relative;
background-image: linear-gradient( 135deg, #FEB692 10%, #EA5455 100%);
border: solid 1px #ec8e7d;
display: inline-block;
padding: 24px 20px 20px;
width: 200px;
color: #fff;
text-decoration: none;
font-size: 1.2em;
}
#hattori_about .inner .colwrap_lead .btn a i {
position: absolute;
right: 15px;
}
#hattori_about .inner .colwrap_lead .btn a:hover {
border: solid 1px #ec8e7d;
background: #FFF;
color: #EA5455;
transition:0.5s;
}
#hattori_about .inner .colwrap_photo {
margin: 40px 0 50px;
}
#hattori_about .inner .colwrap_photo figure:nth-child(odd) {
margin-right: 1.5%;
}
#hattori_about .inner .colwrap_photo figure:nth-child(even) {
margin-left: 1.5%;
}
#hattori_about .inner .colwrap_map {
justify-content: flex-start;
align-items: flex-start;
}
#hattori_about .inner .colwrap_map .google-maps {
width: 75%;
margin-right: 2%;
}
#hattori_about .inner .colwrap_map .google-maps iframe {
width: 100%;
}
.colwrap_ashimamori,
.kigan {
font-size: 1.1em;
line-height: 1.5;
}
.colwrap_ashimamori figure {
margin-right: 1%;
}
.colwrap_ashimamori figure:last-child {
margin-right: 0;
}
@media (max-width:767px) {
.colwrap_ashimamori {
display: block !important;
}
.colwrap_ashimamori figure {
margin-right: 0;
margin-bottom: 2%;
}
#hattori_about .tl_entry {
font-size: 1.25em;
padding: 7px 5px 6px 50px;
}
#hattori_about .inner .colwrap_photo figure:nth-child(odd),
#hattori_about .inner .colwrap_photo figure:nth-child(even) {
margin-right: 0 !important;
margin-left: 0 !important;
}
}
.flex-control-nav li a,
.flex-direction-nav li a{
color:unset !important;
border: none !important;
}
.recommend_course{margin-bottom:100px;}
@media screen and (max-width:767px){
.content .recommend_course_intro,
.recommend_course{margin-bottom:50px;}
}
.flexwrap_2col{
display:flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom:30px;
}
/*- - - - - 北田さん紹介 - - - - -*/
.content .recommend_course_intro .lead{
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2022/08/waku.jpg);
background-repeat: repeat;
padding: 15px 15px 3px;
box-sizing: border-box;
border-radius: 6px;
margin-bottom: 20px;
}
.content .recommend_course_intro .lead h4 span{
font-size:0.8em;
}
.content .recommend_course_intro .lead h4{
font-size:2em;
text-align:center;
line-height:160%;
margin-top:0;
padding:15px 10px;
border-radius:6px;
color:#f00;
background-color:#fff1e9;
}
@media screen and (max-width:767px){
.content .recommend_course_intro .lead h4 span{
font-size:0.9em;
display: inline-block;
margin-bottom:10px;
}
.content .recommend_course_intro .lead h4{
font-size:1.35em;
line-height:135%;
}
}
.content .recommend_course_intro .flexwrap_2col .left{
width:70%;
}
.content .recommend_course_intro .flexwrap_2col .right{
width:28%;
margin-left:2%;
}
@media screen and (max-width:767px){
.content .recommend_course_intro .flexwrap_2col .left{
width:100%;
}
.content .recommend_course_intro .flexwrap_2col .right{
width:70%;
text-align: center;
}
}
/*- - - - - 各おすすめコース - - - - -*/
.recommend_course{
margin-bottom:100px;}
.content .recommend_course .flexwrap_2col div:nth-child(odd){
width:38%;
position:relative;
}
.content .recommend_course .flexwrap_2col div:nth-child(odd):after{
content:;
font-size:1.35em;
font-weight:bold;
position: absolute;
background-color:#fff202;
box-shadow:2px 2px #000;
color:#2f2047;
padding:20px;
border-radius:50%;
top:-10px;
left:5px;
transform: rotate(-10deg);
}
.content .recommend_course .flexwrap_2col .distance01:after{content :"32.4km";}
.content .recommend_course .flexwrap_2col .distance02:after{content :"17.3km";}
.content .recommend_course .flexwrap_2col .distance03:after{content :"19.1km";}
.content .recommend_course .flexwrap_2col .distance04:after{content :"16.1km";}
.content .recommend_course .flexwrap_2col .distance05:after{content :"16.4km";}
.content .recommend_course .flexwrap_2col .distance06:after{content :"39.8km \A D+1370m";white-space: pre;text-align: center;}
.content .recommend_course .flexwrap_2col .distance07:after{content :"47.2km";}
.content .recommend_course .flexwrap_2col .distance08:after{content :"50.5km \A D+1680m";white-space: pre;text-align: center;}
.content .recommend_course .flexwrap_2col div:nth-child(even){
width:60%;
margin-left:2%;
}
@media screen and (max-width:767px){
.flexwrap_2col{
margin-bottom:0;
}
.content .recommend_course .flexwrap_2col div:nth-child(odd){
width:100%;
max-width:600px;
text-align: center;
margin:0 auto 15px;
}
.content .recommend_course .flexwrap_2col div:nth-child(even){
width:100%;
margin:0 auto 15px;
}
}
/*- - - - - 見出し - - - - -*/
.content .recommend_course h4{
position:relative;
font-size:1.6em;
line-height: 140%;
text-indent: -1em;
padding-left: 1em;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:2px solid #c00;
}
.content .recommend_course h4 span{
color:#c00;
}
.content .recommend_course h4:after{
content: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-run.png);
position: absolute;
padding-left: 1.5em;
bottom: 0;
}
@media screen and (max-width:767px){
.content .recommend_course h4{
font-size:1.35em;
}
}
/*- - - - - スタート・スポット - - - - -*/
.content .recommend_course dl{
margin-top:20px;
font-size:0.9em;
}
.content .recommend_course dl dt{
float:left;
font-size:0.9em;
width:5em;
margin-right:0.5em;
padding-bottom:0;
margin-bottom:12px;
text-align:center;
color:#fff;
border-radius:4px;
background-color:#086000;
display:inline-block;
padding: 2px 4px 1px;
}
.content .recommend_course dl dd{
margin-bottom:15px;
overflow: hidden;
}
/*- - - - - コースのボタン - - - - -*/
.content .recommend_course .btn{
background-color: #5bb520;
border:none;
border-bottom:3px solid #428516;
border-radius: 6px;
border-radius:30px;
font-size:1.2em;
text-align: center;
margin:0 auto;
width:50%;
}
.content .recommend_course .btn a{
display:block;
font-size:1.1em;
padding:10px;
color:#fff;
text-decoration: none;
}
.content .recommend_course .btn:hover{
opacity: 0.7;
}
@media screen and (max-width:767px){
.content .recommend_course .btn a{
font-size:1em;
}
.content .recommend_course .btn{
width:90%;
}
}
.content .recommend_course hr{
border-top:1px dotted #a00;
}
h4.ttl-movie{
color: #fff !important;
font-size: 1.25rem !important;
width: 560px;
background: #c00;
padding: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.movie{
padding: 15px;
}
.mile-label{
display: inline-flex;
align-items: center;
justify-content: center;
background: #c00;
color:#fff;
font-weight: bold;
font-size: 16pt;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
.btn-torii a {
position: relative;
border: solid 1px #ec8e7d;
display: inline-block;
padding: 20px 20px 18px 70px;
width: 560px;
margin: 15px;
box-sizing: border-box;
color: #e26663;
background: #fff;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
}
.btn-torii a:before {
content: '';
background-image: url(https://running-event.jp/hattori-miles/2023/wp-content/uploads/2023/07/icn-torii.png);
position: absolute;
top: 9px;
left: 8px;
width: 45px;
height: 39px;
}
.btn-torii a .fa-chevron-right:before {
content: "\f054";
position: absolute;
right: 10px;
top: 22px;
}
@media screen and (max-width: 767px) {
h4.ttl-movie{
width: 100%;
}
.btn-torii a{
width: 100%;
margin: 0;
}
.movie iframe{
width: 100% !important;
height: auto !important;
}
}
.mb10b{
display: inline-block;
margin-bottom: 10px;
}
.content #post-864 .colwrap_prize figure .cs{
height: 367px !important;
}
/* リアルフィニッシュの部 */
.content .day_sanka {
border: dotted 5px #e99;
padding: 25px;
overflow: hidden;
margin-top: 30px;
background: #fefeea;
}
MENU
GPXデータダウンロード方法はこちら
- HOME »
- GPXデータダウンロード方法はこちら
