@charset "utf-8";


#access .contents_mv{
    background-image: url(../img/access/mv_pc.webp);
}

.access_wrap{
    padding: 0 0 5%;
    position: relative;
}
.content_box{
    padding-top: 5%;
}
.content_box .note{
    text-align: right;
    color: var(--light);
    font-size: 1.2rem;
    transform: rotate(0.05deg);
    padding-top: 8px;
}

.access_main_map{
    /* background: var(--light);
    max-width: 1000px; */
    margin: 16px auto 0;
    /* padding: 5%; */
    /* box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1); */
    text-align: center;
}
.access_main_map img{width: 100%;}
.access_main_map_txt{
    transform: rotate(0.05deg);
    text-align: center;
    font-size: 3.6rem;
    font-weight: 600;
    padding-bottom: 16px;
}
.access_main_map_txt span{
    color: var(--d_red);
    font-size: 150%;
}
.access_add_wrap{
    margin: 4% auto 5%;
    max-width: 1000px;
}

.access_add_box .renew{
    color: var(--light);
    background: var(--gra_orange2);
    line-height: 1;
    font-size: 2.4rem;
    font-weight: 600;
    padding: 6px 16px;
    width: fit-content;
    margin-bottom: 16px;
}
.access_add_box .access_add.add1{
    max-width: 560px;
}
.access_add_box .access_add.add2{
    max-width: 640px;
    margin-top: 32px;
}
.access_add_box.box2{
    max-width: 1000px;
    margin: 48px auto 4%;
    display: flex;
    justify-content: center;
    gap: 0 2%;
}
.access_add_area_box{
    flex: 1;
}
.access_add_box.box2 .access_add_area{
    text-align: center;
    transform: rotate(0.05deg);
    color: var(--light);
    font-weight: 600;
    font-size: 3.2rem;
    line-height: 1;
    padding: 12px;
}
.access_add_box.box2 .access_add_area.osaka{
    background: var(--gra_orange);
}
.access_add_box.box2 .access_add_area.kyoto{
    background: var(--gra_blue);
}
.access_add_box.box2 ul{
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
}
.access_add_box.box2 ul:nth-of-type(1){
    border-bottom: 1px solid var(--gray);
}
.access_add_box.box2 li{
    flex-basis: 50%;
}
.access_add_box.box2 li.access_txt_img01 img{width: 235px;}
.access_add_box.box2 li.access_txt_img02 img{width: 220px;}
.access_add_box.box2 li.access_txt_img03 img{width: 222px;}
.access_add_box.box2 li.access_txt_img04 img{width: 236px;}
.access_add_box.box2 li.access_txt_img05 img{width: 222px;}
.access_add_box.box2 li.access_txt_img06 img{width: 240px;}
.access_add_box.box2 li.access_txt_img07 img{width: 227px;}
.access_add_box.box2 li.access_txt_img08 img{width: 190px;}


.shop_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 1%;
    flex-wrap: wrap;
    position: relative;
	margin-top: 30px;
}
.shop_list li{
    flex-basis: 49%;
    margin-bottom: 4%;
    position: relative;
}
.shop_list .access_txt_wrap{
    padding-top: 16px;
    line-height: 1;
}
.shop_list .access_line{
    transform: rotate(0.05deg);
    font-size: 1.6rem;
    font-weight: 600;
}
.shop_list .access_station{
    transform: rotate(0.05deg);
    font-size: 4.2rem;
    font-weight: 600;
}
.shop_list .access_station span{
    color: var(--orange);
    font-size: 130%;
    font-weight: 800;
    letter-spacing: 0px;
}
.shop_list .access_cap{
    transform: rotate(0.05deg);
    font-size: 1.3rem;
    padding-top: 8px;
    font-weight: 500;
}

.train_img_wrap{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0 3%;
    margin-top: 8%;
}
.train_img{
    flex-basis: 50%;
}
.train_img_wrap .access_add_box{
    flex-basis: 47%;
}
.train_img_wrap .renew{
    background: var(--gra_blue);
}
.train_img_wrap .access_add_box .access_add.add1{
    max-width: 90%;
}

.access_wrap.blue{
    background: url(../img/common/bg_dot.svg), var(--gra_lblue);
    padding-bottom: 10%;
    padding-top: 15%;
    color: var(--light);
}
.access_wrap.orange{
    background: url(../img/common/bg_dot.svg), var(--gra_lorange);
    padding-bottom: 30%;
    padding-top: 15%;
    color: var(--dark);
}
.access_wrap.medical{
    padding-bottom: 8%;
}
.access_wrap.train{
    margin-top: 24%;
    padding-bottom: 30%;
}
.main_img{
    max-width: 80%;
    position: relative;
    margin-top: -35%;
}

.human_icon{
    position: absolute;
}
.human_icon.human_icon1{
   right: -20px;
    bottom: -257px;
    width: 17%;
    max-width: 200px;
}
.human_icon.human_icon2{
    right: -31px;
    bottom: -180px;
    max-width: 27%;
}
.human_icon.human_icon3{
   right: -90px;
    bottom: -268px;
    max-width: 20%;
}
.human_icon.human_icon4{
   right: -90px;
    bottom: -240px;
    max-width: 20%;
}
.human_icon.human_icon5{
   right: 0;
    bottom: 0;
    max-width: 32%;
}
.access_wrap h4{
    margin-top: 6%;
    font-size: 8.8rem;
    line-height: .9;
    font-weight: 900;
    transform: rotate(0.05deg);
    display: flex;
    gap: 0 4px;
}
.access_wrap h4 span.big{
    font-size: 222%;
    line-height: .8;
}
.access_wrap.orange h4 span.big{
    color: var(--blue);
}
.access_wrap.blue h4 span.big{
    color: var(--d_red);
}
.access_wrap h4 span.small{}


.content_txt_wrap dt .color{
    font-size: 200%;
    font-weight: 700;
}
.content_txt_wrap dt .color span{
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .2em; /* 縦方向の位置調整 */
}
/* .blue .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--d_red) 20%, transparent 20%); 
}
.orange .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--blue) 20%, transparent 20%); 
} */
.blue .content_txt_wrap dt .color{color: var(--d_red);}
.orange .content_txt_wrap dt .color{color: var(--blue);}


.simulation_wrap{
    margin-top: 5%;
    background: var(--light);
    padding: 5%;
}
.simulation_wrap h5{
    transform: rotate(0.05deg);
    color: var(--orange);
    font-weight: 600;
    font-size: 3.2rem;
}
.simulation_wrap h5 + p{
    transform: rotate(0.05deg);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    padding-top: 16px;
    margin-bottom: 48px;
}
.simulation_ttl{
    transform: rotate(0.05deg);
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 48px;
}
.simulation_box{
    max-width: 900px;
    margin: 4% auto 0;
}
.simulation_area{
    transform: rotate(0.05deg);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    padding: 12px 32px;
    color: var(--light);
    margin-top: 32px;
    margin-bottom: 32px;
}
.simulation_area.start{
    background: var(--gra_orange);
}
.simulation_area.end{
    background: var(--gra_blue);
}

.simulation_txt{
    transform: rotate(0.05deg);
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 700;
    padding: 0 0 24px;
}
.simulation_txt span{
    display: inline-block;
    font-size: 1.6rem;
}
.car_access_map{
    background: var(--light);
    margin: auto;
    padding: 5%;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 5%;
}
.car_access_map img{width: 80%;}
.car_access_txt{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0 3%;
    margin-top: 24px;
}
.car_access_txt li{
    flex: 1;
}
.car_access_txt li:nth-of-type(1) img{width: 90%;}
.car_access_txt li:nth-of-type(2) img{width: 90%;}

.area_ttl{
    transform: rotate(0.05deg);
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    padding: 12px 32px;
    color: var(--light);
    margin-top: 32px;
}
.area_ttl.osaka{background: var(--gra_red);}
.area_ttl.kyoto{background: var(--gra_blue2);}


#car{
    margin-top: -220px;
    padding-top: 220px;
}

@media screen and (max-width: 768px) {

    #car{
    margin-top: 0;
    padding-top: 0;
}

    #access .contents_mv{
    background-image: url(../img/access/mv_sp.webp);
}

.access_wrap{
    padding: 0 0 20%;
    position: relative;
}
.content_box{
    padding-top: 10%;
}

.content_box .note{
    font-size: 0.9rem;
}
.shop_list{
    margin-top: 3%;
}



.content_box .note{
    text-align: right;
    color: var(--light);
    font-size: 1.2rem;
    transform: rotate(0.05deg);
    padding-top: 8px;
}
.access_main_map_txt{
    font-size: 2.4rem;
    line-height: 1.3;
    font-weight: 600;
}

.access_add_wrap{
    margin: 12% auto 6%;
}

.access_add_box .renew{
    font-size: 1.6rem;
}
.access_add_box .access_add.add1{
    max-width: 84%;
}
.access_add_box .access_add.add2{
    max-width: 96%;
    margin-top: 16px;
}
.access_add_box.box2{
    margin: 32px auto 8%;
    display: block;
}
.access_add_box.box2 .access_add_area{
    font-size: 2.4rem;
    padding: 12px;
    margin-bottom: 8px;
    margin-top: 24px;
}
.access_add_box.box2 ul{
    display: block;
    justify-content: space-between;
    padding: 0;
}
.access_add_box.box2 ul:nth-of-type(1){
    border: none;
}
.access_add_box.box2 li{
    border-bottom: 1px solid var(--gray);
    padding: 16px 0;
}

.access_add_box.box2 li.access_txt_img01 img{width: 280px;}
.access_add_box.box2 li.access_txt_img02 img{width: 260px;}
.access_add_box.box2 li.access_txt_img03 img{width: 300px;}
.access_add_box.box2 li.access_txt_img04 img{width: 300px;}
.access_add_box.box2 li.access_txt_img05 img{width: 300px;}
.access_add_box.box2 li.access_txt_img06 img{width: 340px;}
.access_add_box.box2 li.access_txt_img07 img{width: 300px;}
.access_add_box.box2 li.access_txt_img08 img{width: 240px;}


.shop_list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 1%;
    flex-wrap: wrap;
    position: relative;
}
.shop_list li{
    flex-basis: 100%;
    margin-bottom: 4%;
    position: relative;
}
.shop_list.other li{
    flex-basis: 49%;
}
.shop_list .access_txt_wrap{
    padding-top: 16px;
    line-height: 1;
}
.shop_list .access_line{
    transform: rotate(0.05deg);
    font-size: 1.3rem;
    font-weight: 600;
}
.shop_list .access_station{
    transform: rotate(0.05deg);
    font-size: 3.2rem;
    font-weight: 600;
    padding-top: 6px;
}
.shop_list .access_station span{
    color: var(--orange);
    font-size: 160%;
    font-weight: 800;
    letter-spacing: 0px;
    line-height: .7;
}
.shop_list.other .access_station{
    font-size: 2.2rem;
}
.shop_list.other .access_station span{
    font-size: 130%;
}
.shop_list .access_cap{
    transform: rotate(0.05deg);
    font-size: 1.2rem;
    padding-top: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    line-height: 1.3;
}

.train_img_wrap{
    display: block;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0 3%;
    margin-top: 8%;
}
.train_img{
    flex-basis: 50%;
}
.train_img_wrap .access_add_box{
    flex-basis: 47%;
    margin-top: 24px;
}
.train_img_wrap .renew{
    background: var(--gra_blue);
}
.train_img_wrap .access_add_box .access_add.add1{
    max-width: 90%;
}

.access_wrap.blue{
    background: url(../img/common/bg_dot.svg), var(--gra_lblue);
    padding-bottom: 10%;
    padding-top: 15%;
    color: var(--light);
}
.access_wrap.orange{
    background: url(../img/common/bg_dot.svg), var(--gra_lorange);
    padding-bottom: 30%;
    padding-top: 15%;
    color: var(--dark);
}
.access_wrap.medical{
    padding-bottom: 8%;
}
.access_wrap.train{
    margin-top: 24%;
    padding-bottom: 50%;
}
.main_img{
    max-width: 90%;
        position: relative;
        margin-top: -50%;
}

.human_icon{
    position: absolute;
}
.human_icon.human_icon1{
    right: -32px;
        bottom: -111px;
        max-width: 27%;
}
.human_icon.human_icon2{
            right: -31px;
        bottom: -80px;
        max-width: 44%;
}
.human_icon.human_icon3{
   right: -90px;
    bottom: -268px;
    max-width: 20%;
}
.human_icon.human_icon4{
   right: -90px;
    bottom: -240px;
    max-width: 20%;
}
.human_icon.human_icon5{
   right: 0;
    bottom: 0;
    max-width: 32%;
}
.access_wrap h4{
    margin-top: 12%;
    font-size: 5.6rem;
}


.content_txt_wrap dt .color{
    font-size: 200%;
    font-weight: 700;
}
.content_txt_wrap dt .color span{
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .2em; /* 縦方向の位置調整 */
}
/* .blue .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--d_red) 20%, transparent 20%); 
}
.orange .content_txt_wrap dt .color span{
    background-image: radial-gradient(circle at center, var(--blue) 20%, transparent 20%); 
} */
.blue .content_txt_wrap dt .color{color: var(--d_red);}
.orange .content_txt_wrap dt .color{color: var(--blue);}


.simulation_wrap{
    margin-top: 10%;
    padding: 10% 5%;
}
.simulation_wrap h5{
    font-size: 2.0rem;
}
.simulation_wrap h5 + p{
    font-size: 1.3rem;
    padding-top: 12px;
    line-height: 1.8;
    margin-bottom: 24px;
    letter-spacing: 1px;
}
.simulation_ttl{
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 48px;
}
.simulation_box{
    max-width: 900px;
    margin: 4% auto 0;
}
.simulation_area{
    transform: rotate(0.05deg);
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    padding: 12px 32px;
    color: var(--light);
}
/* .osaka .simulation_area{
    background: var(--gra_orange);
}
.kyoto .simulation_area{
    background: var(--gra_blue);
} */

.simulation_img span{
    display: block;
}
.simulation_img img{
    max-width: none;
        width: 320%;
        height: auto;
}

.simulation_txt{
    transform: rotate(0.05deg);
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 700;
    padding: 0 0 32px;
}
.simulation_txt span{
    display: inline-block;
    font-size: 1.2rem;
}
.car_access_map{
    background: var(--light);
    margin: auto;
    padding: 5%;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 5%;
}
.car_access_map img{width: 100%;}
.car_access_txt{
    display: block;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0 3%;
    margin-top: 24px;
}
.car_access_txt li:nth-of-type(1){max-width: 91%;}
.car_access_txt li:nth-of-type(2){max-width: 98%; margin-top: 16px;}


.area_ttl{
    transform: rotate(0.05deg);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 500;
    text-align: center;
    padding: 12px 32px;
    color: var(--light);
    margin-top: 32px;
}

}