@charset "UTF-8";
.access_item_flsbwp {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#udaccs_menu {
margin-top: 50px;
}
#udaccs_menu .ttl26 {
padding-bottom: 20px;
margin-bottom: 8px;
border-bottom: solid 1px #d4d4d4;
font-size: 2.0rem;
font-weight: bold;
}
#udaccs_menu .ttl26 i {
    width: 28px;
    height: 25px;
    margin-right: 14px;
    vertical-align: -6px;
}
.udaccs_menu_ul {
display: flex;
flex-wrap: wrap;
}
.udaccs_menu_ul li {
width: calc((100% - 60px) / 4);
margin: 0 20px 16px 0;
}
.udaccs_menu_ul li:nth-child(4n) {
    margin-right: 0px;
}
.udaccs_menu_ul .ahover_ul {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 4px;
    height: 40px;
    letter-spacing: 0em;
}
/* 市外からのアクセス ------------------------- */
#acshigai_outline_wrap {
background-image: url("/asset/img/access/shigai_map02.png");
background-repeat: no-repeat;
background-size: 650px 704px;
background-position: left 10px;
padding-bottom: 70px;
}
#acshigai_outline_wrap.mgn_b70 {
margin-bottom: 0;
}
#acshigai_oltxt_con {
width: 590px;
margin: 0 0 0 auto;
}
.acshigai_item_wrap h2 {
font-size: 2.0rem;
color: #ad9276;
font-weight: bold;
line-height: 1;
padding: 14px 20px;
border: solid 1px #ad9276;
margin-bottom: 14px;
}
#acshigai_frtokyo .acshigai_item_con:not(:last-child), 
#acshigai_frdounai .acshigai_item_con, 
#acshigai_fraomoriot .acshigai_item_con {
padding-bottom: 16px;
border-bottom: solid 1px #d4d4d4;
}
.acshigai_item_con,
.acfrspot_item_con {
padding-top: 16px;
}
.acshigai_item_ol {
display: flex;
justify-content: space-between;
height: 56px;
align-items: center;
margin-bottom: 12px;
}
.acshigai_tpt {
width: 110px;
background-image: url("../img/access/arrow_time_86x16.svgz");
background-repeat: no-repeat;
background-size: 86px 16px;
background-position: 12px center;
padding-left: 12px;
}
.acshigai_tpt span {
display: block;
width: 56px;
height: 56px;
background-color: #c9b6a4;
border-radius: 8px;
position: relative;
}
.acshigai_tpt span i {
width: 32px;
height: 32px;
margin-right: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.acshigai_hub {
color: #fff;
line-height: 1.4;
text-align: center;
flex-grow: 1;
height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
}
.acshigai_item_ol .acshigai_hub:first-child {
background-color: #3c3c3c;
}
.acshigai_item_ol .acshigai_hub:last-child {
background-color: #ad9276;
}
.acshigai_item_con dt, 
.acfrspot_item_con dt {
font-weight: bold;
font-size: 1.5rem;
letter-spacing: 0em;
}
.acshigai_item_con dt:first-letter {
color: #ad9276;
}
.acshigai_item_con dt span, 
.acfrspot_item_con dt span {
font-weight: normal;
font-size: 1.4rem;
}
.acshigai_item_con dd a, 
.acfrspot_item_con dd a {
color: #2ea7e0;
letter-spacing: 0em;
}
#acshigai_frdounai .acshigai_item_con {
width: 514px;
}
#acshigai_fraomoriot {
display: flex;
justify-content: space-between;
}
#acshigai_fraomori, 
#acshigai_frother {
width: 514px;
}
/* 主要スポットへのアクセス
※恵山、南茅部、函館近郊へのアクセスページとの共通css含む ------------------------- */
#acfrspot_map {
margin-bottom: 30px;
}
.acfrspot_item_wrap h2 {
font-size: 2.0rem;
padding-bottom: 12px;
border-bottom: solid 1px #ad9276;
margin-bottom: 14px;
}
.acfrspot_item_con {
padding-bottom: 10px;
border-bottom: solid 1px #d4d4d4;
}
#access-spot .acfrspot_item_con {
width: 514px;
}
.acfrspot_item_ol {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
background-color: #ad9276;
font-size: 1.6rem;
font-weight: bold;
line-height: 56px;
padding: 0 10px 0 26px;
margin-bottom: 12px;
}
.acfrspot_tpt {
display: flex;
justify-content: flex-end;
}
.acfrspot_tpt span {
display: block;
width: 36px;
height: 36px;
background-color: #c9b6a4;
border-radius: 5px;
margin-left: 8px;
position: relative;
}
.acfrspot_tpt span i {
width: 22px;
height: 22px;
margin-right: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.acfrspot_item_con dl {
display: flex;
justify-content: space-between;
}
.acfrspot_item_con dd {
text-align: right;
}
#acfrspot_frferry h3 {
font-size: 1.8rem;
color: #ad9276;
font-weight: bold;
line-height: 1;
padding: 14px 20px;
border: solid 1px #ad9276;
}
#acfrspot_frferry h2 {
font-size: 2.0rem;
padding-bottom: 12px;
border-bottom: solid 1px #ad9276;
margin-bottom: 30px;
}
.acfrspot_exlink {
background-color: #f9f7f5;
margin-top: 30px;
padding: 8px 20px;
}
.acfrspot_exlink a {
color: #2ea7e0;
line-height: 1;
}
/* 主な交通手段・お役立ち情報 ------------------------- */
#acguide_ticket_wrap {
    position: relative;
    padding: 50px;
}
#acguide_ticket_wrap h2 {
font-size: 2.2rem;
line-height: 1;
padding-left: 50px;
margin-bottom: 28px;
}
/* タブメニュー ---- */
#acguide_tab_outer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tab-label {
background-color: #f5f1ed;
font-weight: bold;
font-size: 1.6rem;
text-align: center;
position: relative;
padding: 10px 8px;
cursor: pointer;
width: calc( ( 100% - 18px ) / 4 );
order:-1;
line-height: 1.4;
transition-property: all;
transition-duration: 0.4s;
margin-bottom: 10px;
}
.tab-label:first-of-type,
.tab-label:nth-of-type(2){
padding-top: 20px;
}
.tab-label i {
width: 12px;
height: 12px;
margin-right: 0px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.tab-label:hover {
background-color: #2ea7e0;
color: #fff;
opacity: 1;
}
.tab-label i::before {
content: url(/asset/img/common/icon_udarrow_12x12_3c3c3c.svgz);
}
.tab-label:hover i::before {
content: url(/asset/img/common/icon_udarrow_10x10_fff.svgz);
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
background-color: #2ea7e0;
color: #fff;
}
.tab-switch:checked+.tab-label i::before {
content: url(/asset/img/common/icon_udarrow_10x10_fff.svgz);
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 0 40px 40px;
  opacity: 1;
  transition: .5s opacity;
  border:solid 1px #2ea7e0;
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
.acguide_tabitem {
display: flex;
justify-content: space-between;
padding-top: 40px;
}
.acguide_tabitem:not(:last-child) {
border-bottom: solid 1px #d4d4d4;
padding-bottom: 34px
}
.acguide_tabitem .img_wrap {
display: block;
width: 200px;
}
.acgdtab_txtwrap {
width: 760px;
font-size: 1.5rem;
}
.acgdtab_txtwrap a {
color: #2ea7e0;
}
.acgdtab_txtwrap h3 {
font-size: 2.0rem;
margin-bottom: 12px;
}
.acgdtab_txtc {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: dotted 1px #d4d4d4;
}
.acgdtab_note {
display: block;
margin-top: 14px;
padding-top: 14px;
border-top: dotted 1px #d4d4d4;
}
.acgdtab_txtwrap dl {
display: flex;
justify-content: flex-start;
}
.acgdtab_txtwrap dt {
font-weight: bold;
width: 100px;
}
.acgdtab_txtwrap dd {
width: calc( 100% - 100px );
}
.acgdtab_tkcon {
border: solid 1px #a04242;
padding: 30px;
background-color: #f9f7f5;
margin-bottom: 30px;
}
.acgdtab_tkcon p {
color: #a04242;
font-weight: bold;
margin-bottom: 12px;
}
.acgdtab_tkcon h4 {
color: #fff;
font-size: 1.8rem;
margin-bottom: 18px;
background-color: #a04242;
line-height: 1;
padding: 12px;
}
.acgdtab_tkcon dt {
color: #a04242;
}
/* 交通機関紹介・駐車場 ---- */
#acguide_vehicle_wrap h2,
#acguide_parking_wrap h2 {
position: relative;
font-size: 2.4rem;
margin-bottom: 40px;
}
#acguide_vehicle_wrap h2::after,
#acguide_parking_wrap h2::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -6px;
width: 100px;
height: 2px;
background-color: #2ea7e0;
}
.acguide_vehicle_con h3 {
display:flex;
line-height: 1;
font-size: 2.0rem;
color: #ad9276;
background-color: #f5f1ed;
height: 60px;
line-height: 60px;
}
.acguide_vehicle_con h3 span {
display:block;
width: 60px;
height: 60px;
margin-right: 20px;
background-color: #ad9276;
position: relative;
}
.acguide_vehicle_con h3 span i {
width: 28px;
height: 28px;
margin-right: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.acguide_veh_item {
display: flex;
justify-content: space-between;
position: relative;
}
.acguide_veh_item .img_wrap {
width: 300px;
display: block;
}
.acguide_veh_item .img_wrap img {
height: auto;
}
.acguide_veh_item .txt_wrap {
width: 740px;
padding: 40px 0px 0px 40px;
font-size: 1.5rem;
position: relative;
}
.acguide_veh_item .txt_wrap h4 {
font-size: 1.6rem;
margin-bottom: 12px;
}
.acguide_veh_item .txt_wrap::before {
content: url(/asset/img/common/bracketsplus_2px60x60.svgz);
position: absolute;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
}
.acguide_veh_link {
display: block;
width: 740px;
background-color: #f9f7f5;
padding: 6px 14px;
text-align: right;
position: absolute;
left: 0px;
bottom: 0px;
}
.acguide_veh_link a {
color: #2ea7e0;
}
#acguide_bus_wrap .acguide_veh_item:not(:first-child), 
#acguide_rentacycle_wrap .acguide_veh_item:not(:first-child) {
padding-top: 40px;
margin-top: 40px;
border-top: solid 1px #d4d4d4;
}
.acguide_bplist_con {
margin-top: 70px;
}
.acguide_mds {
font-size: 1.8rem;
color: #ad9276;
line-height: 1;
background-color: #f5f1ed;
padding: 16px;
margin-bottom: 40px;
}
.acguide_bplist, 
.acguide_pklist {
display: flex;
flex-wrap: wrap;
border-top: solid 1px #d4d4d4;
}
.acguide_bplist li {
width: 50%;
display: flex;
align-items: center;
border-bottom: solid 1px #d4d4d4;
}
#acguide_taxi_wrap .acguide_bplist li,
#acguide_rentacar_wrap .acguide_bplist li {
width: 100%;
}
.acguide_bplist li a {
display: block;
width: 68%;
padding: 14px 0px 14px 24px;
font-size: 1.5rem;
font-weight: bold;
}
.acguide_bplist li i {
margin-right: 14px;
}
.acguide_bplist li i::before {
content: url(/asset/img/common/icon_exlink_14x14_2ea7e0.svgz);
}
.acguide_bplist  li div {
width: 32%;
padding: 14px 24px;
text-align: right;
}
#acguide_pmap {
margin-bottom: 30px;
}
.acguide_pklist li {
width: 50%;
display: flex;
align-items: center;
border-bottom: solid 1px #d4d4d4;
}
.acguide_pklist li a {
display: block;
width: 100%;
font-size: 1.5rem;
padding: 14px 24px;
position: relative;
font-weight: bold;
}
.acguide_pklist li a div {
display: flex;
}
.acguide_pklist li a i {
display: block;
width: 14px;
height: 14px;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.acguide_pklist li span {
display: block;
width: 26px;
height: 26px;
border-radius: 13px;
color: #fff;
text-align: center;
line-height: 26px;
margin-right: 14px;
font-family: "din-2014-narrow",sans-serif;
letter-spacing: 0em;
}
#acguide_pklist_ekimae li span {
background-color: #a12b56;
}
#acguide_pklist_goryokaku li span {
background-color: #ffa900;
}
#acguide_pklist_yunokawa li span {
background-color: #5c8c00;
}