@charset "utf-8";

.head_info h1{
	position: relative;
}
.head_info h1::before{
	content:"アクセス/ロケーション｜東京都足立区の新築分譲マンション「パレステージ北千住Ⅱ」公式HP。東京メトロ千代田線・日比谷線「北千住」駅徒歩8分。";
	display: inline-block;
    font-size: 10px;
}
.sub_head {
	background-image: url(../img/access_location/subhead.jpg);
	background-position: center;
	background-size: cover;
}
.scroll_be {
	display: none;
}
.scroll{
    display: none;
}

.ttl_big{
    font-size: 40px;
}

@media screen and (max-width:750px){
.ttl_big{
    font-size: 28px;
}
}

/* カレントメニュー */
.h_links ul li.access_location::before {
    width: 100%;
    transition: 0.3s;
}
.footer_sitemap ul li.access_location a {
    background: #1b233e;
    color: #fff;
}
.hummenu ul li.access_location {
    border-bottom: 1px solid #fff;
}


/* access */
.bg_ac{
    background-color: #000;
    color: #c9bc9c;
    padding: 80px 0;
}

.item_img_cap{
    position: absolute;
    font-size: 10px;
    bottom: 0;
    right: 0;
    color: #fff;
    padding: 2px;
    background: rgba(0, 0, 0, 0.6);
}

.ac_img_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 40px auto 0;
}

.ac_img_item{
    position: relative;
    width: 33%;
    max-width: 330px;
}


/* line */
.line_area{
    margin: 80px auto;
    background-color: #fff;
}
.line_item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.line_item:not(:last-child){
    margin-bottom: 40px;
}
.line_ttl{
    width: 15%;
}
.line_img{
    width: 82%;
}
.line_hanrei{
    margin: 20px auto 20px;
}

/* air */
.air_ttl {
    font-size: 28px;
    margin: auto;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    padding: 10px;
    border: 1px solid #a48b78;
    background: rgba(164, 139, 120, 0.3);
    margin-bottom: 20px;
}

.air_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 40px auto 0;
}

.air_flex_item{
    position: relative;
    width: 33%;
    max-width: 330px;
}

.air_flex_ttl{
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
    padding: 5px;
    background: #a48b78;
    color: #fff;
    margin-bottom: 20px;
}

.air_flex_box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.air_flex02{
    display: flex;
    width: 100%;
    margin-top: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.air_flex02_item{
    display: flex;
    justify-content: center;
    width: 48%;
    align-items: center;
}
.air_flex02_item:last-of-type{
    margin-top: 20px;
}

.air_flex_item01{
    max-width: 660px;
    width: 66%;
    justify-content: space-between;
}

.air_flex_item02{
    width: 70%;
}

.air_flex_item02 p{
    line-height: 1.5em;
}

.mt20{
    margin-top: 20px;
}

.air_flex_item03{
    width: 28%;
    /* display: flex; */
    justify-content: space-between;
    /* margin-top: 20px; */
    max-width: 184px;
}

.air_flex_item03 div{
    width: 100%;
    max-width: 320px;
}

.air_flex_item03 div:nth-of-type(n+2){
    margin-top: 10px;
}

.air_flex02_item p:first-of-type{
    padding: 5px;
    border: #a48b78 1px solid;
    width: 48%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.air_flex02_item p:last-of-type{
    width: 80%;
    text-align: center;
    line-height: 1;
}

.air_flex02_item p span{
    font-size: 10px;
}

.air_flex .cap{
    margin-top: 10px;
}


@media screen and (max-width:1100px){
    .air_ttl {
        font-size: 24px;
    }


.air_flex02{
    flex-wrap: wrap;
}

.air_flex02_item{
    width: 100%;
}

.air_flex02_item p:first-of-type{
    width: 28%;
}

.air_flex02_item p:last-of-type{
    width: 48%;
}

.air_flex02_item:not(:first-of-type){
    margin-top: 10px;
}
}

@media screen and (max-width:750px){
    .line_hanrei{
        max-width: 450px;
    }
}


@media screen and (max-width:650px){
.bg_ac{
    padding: 60px 0;
}


.ac_img_item {
    width: 100%;
}

.ac_img_item:not(:first-of-type){
    margin-top: 20px;
}

.air_ttl{
    font-size: 18px;
}

.air_flex{
    justify-content: center;
    margin: 0 auto;
}


.air_flex_item {
    width: 100%;
    margin-top: 20px;
}

.air_flex_item01{
    width: 100%;
}

.air_flex_ttl{
    font-size: 16px;
    margin-top: 40px;
}

.air_flex_item02{
    font-size: 14px;
    width: 100%;
}

.air_flex_item03{
    margin-top: 20px;
    width: 100%;
    margin: 20px auto 0;
    display: flex;
    max-width: 500px;
    justify-content: center;
    gap: 10px;
}

.air_flex_item03 div{
    width: 48%;
    max-width: initial;
}

.air_flex_item03 div:nth-of-type(n+2){
    margin-top: 0;
}


    .line_ttl {
        width: 36%;
    }
    .line_img {
        width: 60%;
    }
    .ac_tain_map_img{
        overflow-x: scroll;
    }
    .ac_tain_map_img img{
        min-width: 670px;
        height: auto;
        padding-bottom: 10px;
    }
    .ac_tain_map_img.small img{
        min-width: 600px;
    }


    .scroll {
        position: relative;
        color: #333;
        padding: 10px 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
    }

    .scroll::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #333;
    }

    .scroll::after {
        content: "";
        position: absolute;
        bottom: -4px;
        width: 8px;
        height: 8px;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        transform: rotate(45deg);
    }

    .scroll::before {
        animation: arrowlong01 2s ease infinite;
    }

    .scroll::after {
        animation: arrowlong02 2s ease infinite;
    }

    @keyframes arrowlong01 {
        0% {
            width: 0;
            opacity: 0
        }
        20% {
            width: 0;
            opacity: 1
        }
        80% {
            width: 105%;
            opacity: 1
        }
        100% {
            width: 105%;
            opacity: 0
        }
    }

    @keyframes arrowlong02 {
        0% {
            left: 0;
            opacity: 0
        }
        20% {
            left: 0;
            opacity: 1
        }
        80% {
            left: 103%;
            opacity: 1
        }
        100% {
            left: 103%;
            opacity: 0
        }
    }


}


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


/* location */
.mt80{
    margin-top: 80px;
}

.mb40{
    margin-bottom: 40px;
}

.bg_location{
    padding: 80px 20px;
}

.bg_location02 {
    padding: 0 20px 80px;
}

.sec_ttl span{
    font-size: 0.8em;
}

.loc_img{
    width: 100%;
    max-width: 1000px;
    position: relative;
}

.loc_img .item_img_cap{
    left: 0;
    right: initial;
}

.loc_img.hanabi_img{
    width: 100vw;
    max-width: 1920px;
    margin: 0 auto;
}

.hanabi_ttl{
    position: absolute;
    top: 15%;
    right: 8%;
    color: #fff;
    text-align: right;
}

.loc_flex_box01{
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1040px;
    padding: 0 20px;
    margin: 0 auto;
}

.loc_flex_item_l{
    width: 60%;
    max-width: 600px;
    margin-top: 40px;
    font-size: 14px;
    line-height: 1.5em;
}

.loc_flex_item_l .cap{
    margin-top: 10px;
}

.loc_flex_item_r{
    width: 30%;
    max-width: 300px;
}

.loc_flex_item_r .cap{
    margin-top: 10px;
}

.loc_flex_item_r div{
    position: relative;
    bottom: 40%;
    right: 10%;
}

.loc_flex_box02{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.loc_flex_box02_item01{
    width: 60%;
    max-width: 600px;
    background: url(../img/access_location/loc_img03.jpg) no-repeat;
    background-size: cover;
}

.loc_flex_box02_item02{
    width: 40%;
    max-width: 400px;
    background-color: #6d709b;
    color: #fff;
    padding: 20px;
}

.loc_flex_box02 .sec_ttl{
    font-size: 18px;
}

.loc_flex_box02 .sec_lead{
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    text-align: justify;
}

.loc_flex_box02_item03{
    max-width: 360px;
    width: 100%;
    margin: 10px auto 0;
}

.loc_flex_box03{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* border: #000 1px solid; */
}

.loc_flex_box03_item01{
    width: 57%;
    max-width: 570px;
    border-top: #000 1px solid;
    border-left: #000 1px solid;
}

.loc_flex_box03_item01:nth-of-type(5){
    border-bottom: #000 1px solid;
}

.loc_flex_box03_item02{
    width: 43%;
    max-width: 430px;
    border-right: #000 1px solid;
    border-left: #000 1px solid;
    border-top: #000 1px solid;
}

.loc_flex_box03_item02:last-of-type{
    border-bottom: #000 1px solid;
}

.loc_flex_box03_item01 div{
    width: 100%;
    max-width: 569px;
}

.loc_flex_box03_item02 div{
    width: 100%;
    max-width: 427px;
}

.syou_img{
    max-width: 278px;
}

.ac_box{
    margin-top: -60px;
}

.rank01{
    background-color: #e8e0dd;
}
.rank02{
    background-color: #ede2d8;
}
.rank03{
    background-color: #efe9d9;
}
.rank04{
    background-color: #e5dad8;
}
.rank05{
    background-color: #efe3db;
}
.rank06{
    background-color: #e6e4de;
}

@media screen and (max-width:750px){
    .ac_box {
        margin-top: -20px;
    }
}

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

.mt80{
    margin-top: 60px;
}

.bg_location {
    padding: 60px 20px;
}

.bg_location02 {
    padding: 0 20px 60px;
}

.loc_flex_box02{
    margin-top: 20px;
}

.loc_flex_box02_item01{
    width: 100%;
    height: 250px;
    background-position-y: bottom;
}
.loc_flex_box02_item02{
    width: 100%;
    max-width: initial;
}

.loc_flex_box01{
    margin-top: 20px;
}

.loc_flex_item_l{
    margin-top: 0;
    font-size: 12px;
}

.loc_flex_item_r{
    width: 38%;
}

.loc_flex_item_r div{
    right: 0;
}

.syou_img{
    max-width: none;
}

.ac_box {
    margin-top: -40px;
}

}

@media screen and (max-width:400px){
    .ac_box {
        margin-top: 0px;
    }

}

/* location02 */
.mt60{
    margin-top: 60px;
}

.ttl02{
    font-size: 20px;
}

.lead02{
    font-size: 14px;
}

.loc_bg_green{
    background-color: rgba(0, 162, 154);
    padding-top: 80px;
}

.loc_green_box {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    height: 440px;
    padding: 20px;
    line-height: 1.5em;
    max-width: 310px;
}

.loc_green_box p{
    z-index: 1;
    position: relative;
}

.loc_green_box p:first-of-type{
    font-size: 22px;
    margin-bottom: 20px;
}

.loc_green_box p:nth-of-type(2){
    font-size: 14px;
    margin-bottom: 20px;
}

.loc_green_box p:last-of-type{
    font-size: 13px;
    text-align: justify;
}

.bg_green{
    content: '';
    background-color: rgba(0, 162, 154, 0.95);
    mix-blend-mode: multiply;
    width: 80%;
    height: 490px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 310px;
    transform: translate(-50%, -50%);
}

.loc_flex_box04{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 40px;
}

.loc_flex_box04_item01{
    width: 32%;
    max-width: 320px;
}

.loc_flex_box04_item02{
    width: 100%;
    padding: 20px;
    border: #000 1px solid;
    line-height: 1.2em;
    background: #fff;
}

.loc_flex_num{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}

.loc_flex_num p:first-of-type{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius:50%;
    width: 20px;
    height: 20px;
    color: #fff;
    margin-right: 0.2em;
}

.loc_flex_box04_item03{
    font-size: 14px;
    text-align: justify;
    line-height: 1.5em;
    margin-bottom: 10px;
}

@media screen and (max-width:650px){
.loc_bg_green{
    padding-top: 60px;
}

.loc_flex_box03{
    max-width: 500px;
    margin: 0 auto;
    border: #000 1px solid;
}

.loc_flex_box03_item01{
    width: 100%;
    border: none;
}

.loc_flex_box03_item01:not(:first-of-type){
    border-top: #000 1px solid;
}

.loc_flex_box03_item02{
    width: 100%;
    max-width: initial;
    border-left: 0;
    border-right: 0;
}

.loc_flex_box03_item02 div{
    max-width: 374px;
    margin: 0 auto;
    width: min(374px, 69.26vw);
}

.loc_flex_box03_item02:last-of-type{
    border-bottom: 0;
    border-top: 0;
}

.mt60{
    margin-top: 40px;
}

.loc_flex_num{
    font-size: 14px;
}

.loc_flex_box04_item03{
    font-size: 12px;
}

.bg_green{
    display: none;
}

.loc_green_box_sp {
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 20px;
    line-height: 1.5em;
    /* max-width: 500px; */
    background-color: rgba(0, 162, 154);
    margin-bottom: 20px;
    border: #fff 1px solid;
}

.loc_green_box_sp p:first-of-type{
    font-size: 18px;
    margin-bottom: 20px;
}

.loc_green_box_sp p:nth-of-type(2){
    font-size: 14px;
    margin-bottom: 20px;
}

.loc_green_box_sp p:last-of-type{
    font-size: 13px;
    text-align: justify;
}

}

/*  gourmet */
.lifeinfo_ttl_img{
    max-width: 500px;
    width: 100%;
    margin-bottom: 20px;
}

.lifeinfo_flex_box{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 40px;
}

.lifeinfo_flex_item01{
    width: 30%;
    font-size: 16px;
    line-height: 1.5em;
    margin-top: 40px;
}

.lifeinfo_flex_item01 .sec_lead{
    text-align: left;
}

.lifeinfo_flex_item02{
    width: 64%;
    max-width: 640px;
}

.map02_box{
    overflow-x: scroll;
    position: initial;
}

.cap_info{
    margin-top: 40px;
}

.loc_flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.loc_flex::after{
    content: "";
    width: 32%;
}

.loc_flex_item_col3{
	width: 32%;
}

.loc_flex_item_col3:nth-of-type(n+4){
	margin-top: 80px;
}

.loc_flex_item_name {
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-bottom: #c9caca 4px dotted;
    padding-bottom: 1em;
}

.loc_flex_item_min{
    font-size: 10px;
    margin-bottom: 1em;
}
.loc_flex_item_lead {
    font-size: 13px;
    text-align: justify;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.loc_flex_item_img{
    position: relative;
}

.loc_flex_item_img01{
    position: absolute;
    top: 70%;
    right: 0;
    max-width: 220px;
    /* filter: drop-shadow(2px 4px 6px black); */
}
.loc_flex_item_col3:nth-of-type(n+4) .loc_flex_item_img01{
    position: absolute;
    top: 55%;
    right: 0;
}

@media screen and (max-width:1000px){
.loc_flex_item_img01{
    width: 60%;
}
}

@media screen and (max-width:750px){
    .lifeinfo_flex_box{
        justify-content: center;
    }

    .lifeinfo_flex_item01{
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    .lifeinfo_ttl_img{
        max-width: 300px;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    
    .loc_flex_box04_item01 {
        width: 49%;
        max-width: initial;
    }
    
    .loc_flex_box04_item01:nth-of-type(n+3) {
        margin-top: 20px;
    }
}

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

.lifeinfo_flex_item02{
    width: 100%;
}

.lifeinfo_ttl_img{
    max-width: 250px;
}

.lifeinfo_flex_box{
    margin-bottom: 20px;
}

.loc_flex_box04 {
    justify-content: center;
}

.loc_flex_box04_item01 {
    width: 100%;
    max-width: 500px;
}

.loc_flex_box04_item01:not(:first-of-type) {
    margin-top: 20px;
}

.loc_flex_item_img01{
    /* max-width: 120px; */
    width: 57%;
}

.loc_flex_item_col3:nth-of-type(n+4) .loc_flex_item_img01 {
    top: 70%;
    right: 0;
}

.loc_flex_item_min{
    margin-bottom: 0;
}

.map02_box img{
    width: 100%;
    min-width: 580px;
    display: block;
}
.design_map_separate {
    min-width: 580px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    pointer-events: none;
}
.scroll_separate > li {
    width: calc(100% / 7);
    height: 100%;
}

}

/* lifeinfo */
.bg_info{
    background-color: #ebe5db;
}

.sec_ttl .ttl_info{
    font-size: 22px;
}

.loc_flex_item_col4 {
    width: 19%;
}

.lifeinfo_img{
	margin-bottom: 60px;
}
.lifeinfo_img .loc_flex_item_col2:nth-of-type(n + 3){
	margin-top: 40px;
}

.bg_info .lifeinfo_img{
	margin-bottom: 40px;
}
.bg_info .lifeinfo_img .loc_flex_item_col3:nth-of-type(n + 4) {
	margin-top: 40px;
}
.loc_flex_item_img{
	margin-bottom: 10px;
}

.loc_flex_item_col4:nth-child(n + 6) {
    margin-top: 20px;
}

.lifeinfo_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.lifeinfo_flex_item{
    width: 48%;
}
dt{
    font-weight: unset;
}
.lifeinfo_ttl{
    color: #fff;
    background: #604c3f;
    text-align: center;
    margin-bottom: 10px;
    padding: 0.3em;
    font-size: 14px;
}
.lifeinfo_list dt {
    float: left;
    font-size: 13px;
    clear: both;
}
.lifeinfo_list dd {
    text-align: right;
    font-size: 13px;
    display: flex;
    align-items: center;
    padding-left: 5px;
}
.lifeinfo_list dd::before {
    content: "";
    flex-grow: 1;
    border-top: 1px dashed #000;
    display: block;
    margin-right: .4em;
}

.lifeinfo_flex_item .lifeinfo_item:not(:last-child){
    margin-bottom: 20px;
}

.lifeinfo_map{
    margin-bottom: 40px;
}

.lifeinfo_list dt,
.lifeinfo_list dd {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 2.4em;
}

.sec_bg{
    padding: 80px 0;
}

.kitasenju_map{
    margin-bottom: 40px;
}

.loc_flex_item_flex{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.loc_flex_item_flex_img{
    width: 46%;
    max-width: 220px;
}
.loc_flex_item_flex_text{
    width: 50%;
}

.bg_info .loc_flex_item_name {
    font-size: 12px;
    border: 0;
    padding: 0;
    margin: 0;
}

.lifeinfo_cap{
    font-size: 10px;
    margin-bottom: 0.5em;
}

.bg_info .cap{
    margin-top: 40px;
}


@media screen and (max-width:1000px){
    .lifeinfo_list dt {
        font-size: 12px;
    }
    .lifeinfo_list dd {
        font-size: 12px;
    }
	.loc_flex_item_name {
		font-size: 13px;
	}
	.loc_flex_item_lead {
		font-size: 12px;
	}
	.lifeinfo_img {
		margin-bottom: 60px;
	}
    .loc_ttl_en {
        font-size: 38px;
    }
}
@media screen and (max-width:768px){
    .loc_flex_item_col4 {
        width: 32%;
    }
    .loc_flex_item_col4:nth-child(n + 4){
        margin-top: 30px;
    }
}

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

    .lifeinfo_flex_item01 .sec_lead{
        text-align: center;
    }

}

@media screen and (max-width:650px){
	.lifeinfo_img {
		margin-bottom: 40px;
	}

    .sec_ttl .ttl_info{
        font-size: 18px;
    }

    .lifeinfo_flex_item{
        width: 100%;
        margin-bottom: 20px;
    }
    .lifeinfo_flex_item:last-child{
        margin-bottom: 0;
    }
    .lifeinfo_box{
        max-width: 500px;
        margin: 40px auto 0px;
    }
    .lifeinfo_ttl {
        font-size: 13px;
    }
	.loc_flex_item_col3 {
		width: 48%;
	}
	.loc_flex_item_col2{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	.lifeinfo_img .loc_flex_item_col2:nth-of-type(n + 2){
		margin-top: 30px;
	}
	.lifeinfo_img .loc_flex_item_col3:nth-child(n + 3) {
		margin-top: 30px;
	}
	.loc_main_img_text .loc_flex_item_col3{
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	.loc_main_img_text .loc_flex_item_col3:not(:first-child){
		margin-top: 20px;
	}
    .loc_flex_item_col4:nth-child(n + 3){
        margin-top: 30px;
    }
    .loc_flex_item_col4 {
        width: 48%;
    }
    .loc_ttl_en {
        font-size: 32px;
    }

    


    .lifeinfo_cap{
    margin-bottom: 1em;
    }

    .bg_info .lifeinfo_img{
        margin-bottom: 40px;
    }

    .lifeinfo_img.lifeinfo_img01{
        margin-bottom: 60px;
    }

    .sec_bg{
        padding: 60px 0;
    }
}

@media screen and (max-width:550px){
    .line_area {
        margin-bottom: 60px;
    }
    .loc_flex_item_name {
        font-size: 12px;
    }
}

@media screen and (max-width:550px){
    .lifeinfo_img.lifeinfo_img01{
        margin-bottom: 40px;
    }

}