@charset "utf-8";
/* CSS Document */
/*ルールページ固有*/

.pages_title img{
    width: 35%;
}
.page_header_sp_pnly{
    display:none;
}
.page_header_pc_only{
    display:block;
}
.grandprix_logo{
	width: 45%;
	position: absolute;
	top: 10px;
	left: calc(50% - 300px);
}




#contents .page_title{
    position: static;
    width: 100%;
    display: flex;
    margin: 0 auto;
    text-align: center;
    /*padding: 30px 0;*/
    margin: 80px 0;
    flex-wrap:wrap;
    transform: none;
}
#contents .page_title img{
    display: block;
    width: 100%;
    max-width: 313px;
    margin: 0 auto;
}
@media screen and (max-width: 767px){
    #contents .page_title{
        margin: 50px 0;
    }
    #contents .page_title img {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
}
#contents .sections {
    width: 100%;
    margin: 0 auto;
    height: auto;
    background-color: transparent;
}


#section1 ul{
	list-style: none;
}
#section1 li{
	font-size: 22px;
	line-height: 1.2em;
}

._contents{
padding:40px;
background:url(../images/bg_img.png);
background-size:cover;
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
padding: 0 10%;
}

.access_box{
    width:100%;
    background-color:#ffffffe8;
    margin:0 auto;
    padding:4px 3%;
}

@media (max-width:768px){
	._contents{
		padding: 0;
	}
}

:root{
  --navy:#0b2250; --deep:#0a1f44; --blue:#12427a; --accent:#1f6fb8;
  --gold:#c9a24a; --red:#e5204a; --pink:#fde6eb; --light:#e8f1fa;
  --line:#d5e0ec; --text:#1b2a3f; --muted:#5a6b82;
}

*{box-sizing:border-box}
div._contents {margin:0;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;color:var(--text);line-height:1.7}
div._contents img{max-width:100%;}
div._contents a{color:inherit;text-decoration:none}
div._contents .wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* header */
.header{background:var(--deep);color:#fff}
.header .wrap{display:flex;align-items:center;gap:28px;height:60px;max-width:1000px}
.brand{line-height:1.2}
.brand small{display:block;font-size:11px;letter-spacing:.05em}
.brand b{font-size:18px;font-style:italic;letter-spacing:.02em}
.brand b span{font-size:11px;font-style:normal;font-weight:400;margin-left:6px}
.nav{display:flex;gap:22px;font-size:12px;margin-left:auto}
.nav a{padding:20px 0 16px;border-bottom:3px solid transparent}
.nav a.on{border-color:var(--gold)}
.menu{display:none;margin-left:auto;font-size:9px;text-align:center;background:none;border:0;color:#fff}
.menu i{display:block;width:20px;height:2px;background:#fff;margin:3px auto}

/* hero */
.hero{position:relative;color:#fff;background:var(--navy) url(../access/images/photos/hero_pc.svg) center/cover;min-height:255px}
.hero .wrap{padding-top:34px;padding-bottom:26px}
.hero h1{margin:0;font-size:44px;line-height:1.2;letter-spacing:.06em}
.hero h2{margin:4px 0 14px;font-size:22px;font-weight:700;letter-spacing:.06em}
.hero p{margin:0;font-size:13px;max-width:620px}
.gp{position:absolute;right:28px;top:50px;text-align:right;font-style:italic;font-weight:900;color:var(--gold);line-height:1}
.gp strong{display:block;font-size:34px;letter-spacing:-.02em;text-shadow:0 2px 6px #0008}
.gp span{display:block;font-size:12px;color:#fff;margin-top:4px;font-weight:700}

/* section */
.sec{/*padding:10px 0 10px;*/border-bottom:0 solid var(--line)}
.sec{
    background: white;
    margin: 10px 0;
    padding: 4px;
    border-radius: 10px;
}
.sec:last-of-type{border-bottom:0}
.sec > summary,.sec > .head{list-style:none;display:flex;align-items:center;gap:10px;cursor:default}
.sec > summary::-webkit-details-marker{display:none}
.badge{width:30px;height:30px;flex:none}
.ico{width:34px;height:34px;flex:none}
.sec h2{height: auto;margin:0;font-size:19px;line-height:1.3;justify-content: flex-start;}
.lead{margin:0 auto;font-size:1rem;color:var(--muted);padding:0 1rem;}
.tog{display:none;margin-left:auto;width:16px;height:16px}
.body{padding-top:6px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.card{border:1px solid var(--line);border-radius:6px;background:#fff;padding:14px 6px 8px;text-align:center;box-shadow:0 1px 3px #1b2a3f14;display:flex;flex-direction:column;align-items:center;gap:4px}
.card img{height:34px}
.card b{font-size:0.9rem;line-height:1.3}
.card small{font-size: 0.7rem;color:var(--accent);line-height:1.3;min-height:26px}
.card .chev{width:10px;height:10px;margin-top:auto}

/* shuttle */
.shuttles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.shuttle{border:1px solid var(--line);border-radius:6px;overflow:hidden;text-align:center;background:#fff}
.shuttle header{background:var(--light);padding:10px 4px 8px}
.shuttle header img{height:30px;margin:0 auto 2px}
.shuttle header b{font-size:15px}
.shuttle .t{padding:8px 4px 4px}
.shuttle .t small{display:block;font-size:10px;color:var(--muted)}
.shuttle .t strong{display:block;font-size:15px;line-height:1.5}
.shuttle .bus{height:24px;margin:6px auto 12px}

/* alert */
.alert{display:grid;grid-template-columns:310px 1fr;border:1px solid #f3a9b8;border-radius:6px;overflow:hidden;background:#fff}
.alert .l{background:var(--red);color:#fff;padding:20px;display:flex;gap:14px;align-items:center;font-size:20px;font-weight:700;line-height:1.5}
.alert .l img{width:42px;flex:none}
.alert .r{padding:12px 16px;font-size:12.5px;display:grid;grid-template-columns:1fr 160px;gap:6px 16px}
.alert .r p{margin:0 0 8px}
.alert .hl{background:var(--red);color:#fff;border-radius:4px;padding:6px 10px;margin:0 0 8px}
.alert .ph{grid-column:2;grid-row:1 / span 3;text-align:center;font-size:10px;font-weight:700}
.alert .ph img{border-radius:4px;margin-bottom:2px;width:100%}
.btn{display:inline-block;border-radius:4px;font-weight:700;font-size:12px;padding:6px 14px}
.btn.red{background:var(--red);color:#fff}
.btn.navy{background:var(--navy);color:#fff}
.btn.line{border:1.5px solid var(--navy);color:var(--navy);background:#fff}
.alert .btn{justify-self:end;grid-column:2;align-self:end}

.band{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--pink);border:1px solid #f7b6c3;border-radius:4px;padding:6px 10px;color:var(--red);font-size:12px;font-weight:700}
.band .btn{padding:4px 10px}

/* car */
.car{display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:start}
.car p{margin:0 0 6px;font-size:12.5px}
.car .photo{border-radius:4px;overflow:hidden;width:100%}
.chips{display:grid;grid-template-columns:repeat(6,auto);gap:8px;margin-top:14px}
.chips a{border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:6px;background:#fff}
.chips a img{width:8px}

/* map */
/*.mapbox{display:grid;grid-template-columns:1fr 470px;gap:20px;align-items:center}*/
.mapbox{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:center;
}
.mapbox h3{margin:0 0 6px;font-size:17px}
.mapbox p{margin:0 0 12px;font-size:1rem}
.mapwrap{position:relative;border-radius:4px;overflow:hidden}
.mapwrap span{position:absolute;left:52%;top:42%;font-size:11px;font-weight:700;color:var(--red)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.mapwrap{
    border-radius:4px;
    overflow:hidden;
}

.mapwrap iframe{
    display:block;
    width:100%;
    height:350px;
    border:0;
}
@media (max-width:767px){
    .lead {
        padding: 0;
    }
    .mapbox{
        display:block;
    }

    .mapwrap{
        margin-top:20px;
    }

    .mapwrap iframe{
        height:300px;
    }

}

/* table */
table{width:100%;border-collapse:collapse;font-size:0.9rem;border:1px solid var(--line)}
th{background:var(--light);text-align:left;padding:5px 12px;font-size:0.9rem}
td{padding:4px 12px;border-top:1px solid var(--line)}
.tbl{margin-left:40px}


.accordion-content{
    display:none;
}

.accordion-content.open{
    display:table-row;
}

.accordion-content td{
    background:#f8f8f8;
    padding:20px;
}

.accordion-toggle::after{
    content:" ▼";
    font-size:10px;
}

.accordion-toggle.active::after{
    content:" ▲";
}
.access-title{
    background:#000;
    color:#d0ae36;
    text-align:center;
    padding:10px;
    font-weight:bold;
}

.access-title span{
    display:block;
}

.access-place{
    text-align:center;
    padding:10px;
    font-weight:bold;
    font-size:1rem;
}

.access-info{
    text-align:center;
    padding:20px 0;
    font-size:1.2rem;
    font-weight:bold;
}
.service-time{
    text-align:center;
    font-weight:bold;
    font-size:1.2rem;
    /*margin:20px 0 30px;*/
}
.departure-list{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    list-style:none;
    padding:0;
    margin:0 0 30px;
    width:100%;
}
.departure-list{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}
.departure-list_3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.departure-list li{
    text-align:center;
    font-size:1rem;
    font-weight:bold;
}

.access-note{
    border-top:1px solid #d0ae36;
    padding-top:15px;
}

.important{
    color:#d00;
    font-weight:bold;
}

.station-wrap{
    display:flex;
    gap:30px;
}

.station-box{
    flex:1;
}

.station-box h4{
    margin-bottom:15px;
    padding:5px 10px;
    background:#d1af39;
}

.departure-list{
    list-style:none;
    padding:0;
    margin:0;
}

.departure-list li{
    margin:5px 0;
}
.bus-timetable img{
    display:block;
    width:100%;
    height:auto;
    margin-bottom:30px;
}

.special-info{
    line-height:1.8;
    font-size: 1rem;
}
.special-info p{
    margin-bottom:15px;
}
.text-link{
    color:#004ea2;
    font-weight:bold;
    text-decoration:none;
}

.text-link:hover{
    text-decoration:underline;
}
.bus-detail{
    display:none;
    margin-top:15px;
}

.bus-detail.open{
    display:block;
}
.bus-toggle{
    font-weight:bold;
    text-decoration:none;
}
.bus-toggle.active{
    color:#c00;
}

.special-bus-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.special-bus-table th,
.special-bus-table td{
    border:1px solid #ccc;
    padding:8px;
}

.special-bus-table th{
    background:#fff200;
}

.return-detail{
    display:none;
    margin-top:15px;
}

.return-detail.open{
    display:block;
}

.return-image{
    width:100%;
    height:auto;
    display:block;
}
@media (max-width:768px){

    .accordion-content td{
        padding:8px;
    }

    .station-wrap{
        display:block;
    }

    .station-box{
        margin-bottom:30px;
    }

    .departure-list{
        grid-template-columns:repeat(2,1fr);
    }

}

footer{background:var(--deep);color:#fff;margin-top:20px;border-top:4px solid var(--gold)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;height:96px}
footer small{display:block;font-size:11px}
footer b{font-size:20px;font-style:italic}
footer a{font-size:10px;text-align:center;letter-spacing:.1em}
footer a img{width:12px;margin:0 auto 2px;filter:invert(1)}

/* 3番: PCでは番号バッジのみ注意枠に重ねる */
details.warn{position:relative}
details.warn > summary{position:absolute;left:-6px;top:10px;z-index:2}
details.warn h2,details.warn .tog{display:none}
details.warn .body{padding-top:0}

/* ---- スマホ ---- */
@media (max-width:767px){
  .wrap{padding:0 14px}
  .header .wrap{height:56px}
  .nav{display:none}
  .menu{display:block}
  .hero{background-image:url(../access/images/photos/hero_sp.svg);min-height:0}
  .hero .wrap{padding-top:26px;padding-bottom:140px}
  .hero h1{font-size:30px}
  .hero h2{font-size:15px}
  .hero p{font-size:11.5px}
  .gp{position:absolute;right:auto;left:0;right:0;bottom:22px;top:auto;text-align:center}
  .gp strong{font-size:26px}
  .cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .card small{font-size:9px}
  .card b{font-size:12px}
  .lead{margin-left:0}
  .sec{padding:10px 0;border:0}
  details.sec{border:1px solid var(--line);border-radius:6px;margin:10px 0;padding:0 12px;box-shadow:0 1px 3px #1b2a3f14}
  details.sec > summary{padding:12px 0;cursor:pointer}
  details.sec[open] > summary{border-bottom:0}
  details.sec h2{font-size:15px}
  .tog{display:block}
  details[open] .tog.plus,details:not([open]) .tog.up{display:none}
  details.warn{background:#fff;border-color:#f3a9b8}
  details.warn > summary{position:static}
  details.warn h2{display:block;color:var(--red)}
  details.warn .tog{display:block}
  details.warn[open] .tog.plus,details.warn:not([open]) .tog.up{display:none}
  .alert{margin-bottom:12px}
  .shuttles{grid-template-columns:repeat(2,1fr)}
  .alert{grid-template-columns:1fr}
  .alert .l{font-size:17px}
  .alert .r{grid-template-columns:1fr}
  .alert .ph{grid-column:1;grid-row:auto;max-width:200px;margin:0 auto}
  .alert .btn{grid-column:1}
  .car{grid-template-columns:1fr}
  .chips{grid-template-columns:repeat(2,1fr)}
  .mapbox{grid-template-columns:1fr}
  .tbl{margin-left:0;overflow-x:auto}
   table{
        font-size:0.9rem;
    }
    th,
    td{
        padding:3px;
    }
  footer .wrap{height:90px}
}


.pc_only{
	display:block;
}
.sp_only{
	display:none;
}

/* ---- スマホ ---- */
@media (max-width:767px){
    .pc_only{
	display:none
    }
    .sp_only{
	display:block;
    }
}