@charset "UTF-8";
/* CSS Document */
#main_img{ background: url("../../access/img/tit.jpg") no-repeat center center;background-size: cover;}
#cnav { justify-content: center;}
#cnav li { margin:0 15px; width:350px; border:1px solid;}
#cnav li a{ display: block; font-size:18px; padding:10px 0; text-align: center; }

#lead_col h2 span.wbr { display: block;}

@media screen and (max-width: 600px) {
                    #cnav { flex-direction: column; }
                    #cnav li { margin:0 auto 10px auto; width:250px; }
}
/*---------------------------------------------------
common
------------------------------------------------------ */
section { padding:40px 0;}
section:not(#lead_col) h2 { font-size:46px; margin:50px auto 30px ;}
section:not(#lead_col) h2::before {background: radial-gradient(circle farthest-side, #2a2b2b, #2a2b2b 30%, transparent 30%, transparent);
                      background-size: 8px 8px; 
                      content: ""; display: inline-block; height: 8px; position: absolute; top:-50px; left:50%; margin-left:-31px; width: 63px;
                      -webkit-transform: rotate(90deg);transform: rotate(90deg);}
section h3 {font-size:36px; margin-bottom:80px; position: relative; text-align: center; width:100%;}
section h3::after { content:""; display: block; height:10px; width:28px; position: absolute; left:50%; bottom:-20px; margin-left:-14px; 
                    background:url("../../access/img/h_bg.png"); background-size:28px auto;}
a.map-link { display: block;}
a.map-link::after {content:""; display: block; background:#2a2b2b; height:1px; width:100%;}

@media screen and (max-width: 600px) {
                    section:not(#lead_col) h2 { font-size:30px; margin:25px auto 15px ;}
                    section h3 {font-size:30px; margin-bottom:30px;}
}

/*---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { margin:0 auto; width:1200px;}
#sec1 .box_map { margin-top:-150px; position: relative; min-height:700px;}
#sec1 .box_map address { margin:0 0 30px 0; position: relative; top:200px; z-index: 5;}
#sec1 .box_map address .tel-link { font-size:20px;}
#sec1 .box_map address small { font-size:13px;}
#sec1 .box_map a.map-link { font-size:20px; margin-top:30px; padding-left:30px; position: relative; width:245px;}
#sec1 .box_map a.map-link::before { content:""; display: block; height:42px; width:28px; 
                    background:url("../../access/img/ico_marker.svg"); background-size:28px auto; position:absolute; left:0; top:0;}
#sec1 .box_map img.map { position: absolute; z-index: 4; left:0 ;top:0; }

@media screen and (max-width: 600px) {
                    #sec1 { width:90%;}
                    #sec1 .box_map { margin:0 0 50px; min-height:0;}
                    #sec1 .box_map img.map { position: relative; max-width:140% ;margin-left:-30%; }
                    #sec1 .box_map address { margin:0 0 15px 0; top:0;}
                    #sec1 .box_map address small { display: block;}
                    #sec1 .box_map a.map-link { font-size:18px;}
}

.box_route { display: flex; flex-wrap: wrap; padding-bottom:100px; }
.route { position: relative; width:20%;}
.route ul { position: relative;}
.route ul::before { content:""; width:1px; background:#2a2b2b; position: absolute; left:5%; top:0;}
.route .point{ position: relative;}
.route .point::before {content:""; background:#2a2b2b; border-radius: 50%; width:10px; height:10px; margin:0 10px 0 3%; display: inline-block; }
.route .point2 { background:url("../img/paper05.png"); font-size:20px; padding:10px 0; text-align: center;}
.route .time { padding:15px 0 15px 20px;}
.route .time2 { border-left:1px solid; padding:30px 0 30px 40px; margin-left:50%;}
.route .time2 li { margin-bottom:15px;}
.route .time2 li { list-style:disc;}
.route .time2 li span { font-size:12px;}
.route .time2 li:nth-of-type(1) span { display: block;}

.route .goal { background:url("../img/paper06.jpg"); font-size:20px; padding:10px 0; text-align: center;}
.route h4 { font-size:20px;}
.route .acc_tit { display: block;}
@media screen and (max-width: 600px) {
                        .box_route { flex-direction: column;}
                        .route { margin-bottom:10px; width:100%;}
                        .route ul::before { content:none;}
                        .route .time,
                        .route .point{ border-left:1px solid; margin-left:5%;}
                        .route .point::before { margin:0 15px 0 -2%;}
                        .route .time2 { padding:30px 0 30px 40px; margin-left:5%;}
                        .route .point2,
                        .route .goal { padding:5px 0; font-size:16px;}
                        .route .acc_tit{ border:0; border-bottom:1px solid #ccc; border-color:#ccc; margin:10px 0 0; width:100%;}
                        .route .acc_tit.active { background:#eee; border:1px solid #ccc; width:100%;}
}

#r_car .route ul { min-height:890px;}
#r_car .route ul::before { height:650px; }
#r_car .route ul+p { position: relative; text-align: center;}
#r_car .route ul+p::before { content:""; display:inline-block; height:22px; width:22px; margin-right:7px;
                    background:url("../../access/img/ico_rout.svg"); background-size: 22px auto; }
#r_car .route ul+p::after { content:""; display: block; height:1px; width:70%; background:#2a2b2b; position: absolute; left:15%; bottom:-5px;}
#r_car .route .point2 { position:absolute; top:650px;}
#r_car .route .time2{ position:absolute; top:710px;}
#r_car .route .goal{ position:absolute; top:800px; text-align: center;}
#r_car .route:nth-of-type(1) .time{ padding-top:300px;}
#r_car .route:nth-of-type(2) .time { padding:23px 0 23px 20px;}
#r_car .route:nth-of-type(3) .time,
#r_car .route:nth-of-type(4) .time{ padding:120px 0 120px 20px;}

@media screen and (max-width: 600px) {
                        #r_car .route ul { min-height:0;}
                        #r_car .route ul::before { height:auto; }
                        #r_car .route ul+p { margin:20px 0 70px;}   
                        #r_car .route .point2 ,
                        #r_car .route .time2,
                        #r_car .route .goal{ position:relative; top:0;}
                        #r_car .route:nth-of-type(1) .time,
                        #r_car .route:nth-of-type(2) .time,
                        #r_car .route:nth-of-type(3) .time,
                        #r_car .route:nth-of-type(4) .time{ padding:15px 0 15px 20px;}
}

#r_trans .route>ul { min-height:550px;}
#r_trans .route>ul::before { height:250px; }
#r_trans .route .time { padding:23px 0 23px 20px;}
#r_trans .route:nth-of-type(1) .time,
#r_trans .route:nth-of-type(4) .time{ padding-top:85px;}
#r_trans .route .point2 { position:absolute; top:250px;}
#r_trans .route .time2{ position:absolute; top:310px;}
#r_trans .route .goal{ position:absolute; top:500px; text-align: center;}

@media screen and (max-width: 600px) {
                        #r_trans .route>ul { min-height:0;}
                        #r_trans .route>ul::before { height:auto; }
                        #r_trans .route .time { padding:15px 0 15px 20px;}
                        #r_trans .route:nth-of-type(1) .time,
                        #r_trans .route:nth-of-type(4) .time{ padding-top:15px;}
                        #r_trans .route .point2,
                        #r_trans .route .time2,
                        #r_trans .route .goal{ position:relative; top:0;}
                        #r_trans .route .goal { margin-bottom:70px;}
}

#r_car .route:nth-of-type(n+2) .point2,
#r_car .route:nth-of-type(n+2) .time2,
#r_car .route:nth-of-type(n+2) .goal,
#r_trans .route:nth-of-type(n+2) .point2,
#r_trans .route:nth-of-type(n+2) .time2,
#r_trans .route:nth-of-type(n+2) .goal{ display: none;}

#r_car .route:nth-of-type(1) .point2,
#r_car .route:nth-of-type(1) .goal,
#r_trans .route:nth-of-type(1) .point2,
#r_trans .route:nth-of-type(1) .goal{ width:1200px;}

#r_car .route:nth-of-type(1) .time2{ width:600px; margin-left:600px; }
#r_trans .route:nth-of-type(1) .time2{ width:800px; margin-left:400px; }

@media screen and (max-width: 600px) {
                        #r_car .route:nth-of-type(n+2) .point2,
                        #r_car .route:nth-of-type(n+2) .time2,
                        #r_car .route:nth-of-type(n+2) .goal,
                        #r_trans .route:nth-of-type(n+2) .point2,
                        #r_trans .route:nth-of-type(n+2) .time2,
                        #r_trans .route:nth-of-type(n+2) .goal{ display: block;}
                        #r_car .route:nth-of-type(1) .point2,
                        #r_car .route:nth-of-type(1) .goal,
                        #r_trans .route:nth-of-type(1) .point2,
                        #r_trans .route:nth-of-type(1) .goal{ width:100%;}
                        #r_car .route:nth-of-type(1) .time2{ width:auto; margin-left:5%; }
                        #r_trans .route:nth-of-type(1) .time2{ width:auto; margin-left:5%; }
}

#sec1 .marker { display: flex; margin:0 auto 35px; width:1000px;}
#sec1 .marker::before { left:0; top:15px;}
#sec1 .marker dt { font-size:20px; padding-left:40px; width:30%; }
#sec1 .marker dd { width:70%;}
#sec1 .marker dd li { margin-bottom:10px;}
#sec1 .marker dd li span { display: inline-block;width:30%;}
#sec1 .marker+ul { margin:0 auto; padding-top:50px; width:1000px;}
#sec1 .marker+ul li { margin-bottom:10px;}

@media screen and (max-width: 600px) {
                        #sec1 .marker {flex-direction: column; margin:0 auto 35px; width:90%;}
                        #sec1 .marker dt { padding-left:40px; width:100%; }
                        #sec1 .marker dd { width:100%;}
                        #sec1 .marker dd li { padding-left:5%;}
                        #sec1 .marker dd li span { display: inline-block; width:100%;}
                        #sec1 .marker dd li span::before {content:""; background:#b88402; border-radius: 50%; width:10px; height:10px; margin:0 10px 0 3%; display: inline-block;}
                        #sec1 .marker dd p { font-size:14px;}
                        #sec1 .marker+ul { font-size:14px; padding-top:0; width:90%;}
}


/*---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 { margin:50px auto; width:1200px;}
#sec2>ul { display: flex; flex-wrap: wrap;}
#sec2>ul>li {padding-bottom:30px; width:575px;}
#sec2>ul>li:nth-of-type(even) { margin-left:50px;}
#sec2>ul li dt { font-size:24px; text-align: center; padding:15px 0;}
#sec2>ul li dd p { padding:0 20px;}
#sec2>ul li dd ul { display: flex;justify-content: center; margin:30px auto; width:100%; }
#sec2>ul li dd li {line-height: 33px; font-size:12px; margin-right:30px; position: relative; width:auto; box-sizing: border-box;}
#sec2>ul li dd li span { font-size:13px;}
#sec2>ul li dd li::after { content:""; display: block; background:#2a2b2b; height:1px; width:100%;}
#sec2 .route-time { font-size:18px;}
#sec2 .route-time img { margin:0 15px 8px 0; width:20px;}
#sec2 .route-time img.ico_walk { margin-right:20px; width:18px;}
#sec2 .map-link a,
#sec2 .site-link a { padding-left:25px; }
#sec2 .map-link a::before,
#sec2 .site-link a::before { content:""; display: block; position: absolute; left:0; top:0; }
#sec2 .map-link a::before { background:url("../../access/img/ico_marker.svg")no-repeat; background-size:18px auto; height:30px; width:18px; }
#sec2 .site-link a::before { background:url("../../access/img/ico_site.svg")no-repeat; background-size:18px auto; height:18px; width:18px; top:8px; }
.bnr-link { margin:50px 0; text-align: center;}
.bnr-link a { display: inline-block; width:410px;}

@media screen and (max-width: 600px) {
                         #sec2 { margin:10px auto; width:90%;}
                         #sec2>ul { flex-direction: column;}
                         #sec2>ul>li {padding-bottom:30px; width:100%;}
                         #sec2>ul>li:nth-of-type(even) { margin-left:0;}
                         #sec2>ul li dt { font-size:22px;}
                         #sec2>ul li dd ul { flex-direction: column; margin:10px auto 30px auto; width:200px; }
                         #sec2>ul li dd li {  margin:0 0 10px 0; width:100%; text-align: center;}
                         #sec2 .map-link a,
                         #sec2 .site-link a { padding-left:0; }
                         #sec2 .map-link a::before,
                         #sec2 .site-link a::before {line-height: 1; display: inline-block; margin-right:15px; position:relative;}
                         #sec2 .map-link a::before { top:10px;}
                         .bnr-link a { width:90%;}
}
@media screen and (max-width: 321px) {
                        #sec2>ul li dt .wbr { display: block;}
}