@charset "utf-8";

body{background:#f4f1e9;}
.allwrap{
    /*
    overflow: hidden;
    */
}

#hasei_main{
    height: 870px;
}
#hasei_main .img_area img {
    filter: blur(0);
}

@media screen and (max-width :800px ){
    #hasei_main{height: 550px;}  
    #hasei_main .img_area{padding-top: 355px;}
    #hasei_main span{display:none;}
}
/* ==========================================================================
	intro
========================================================================== */
.intro {
    position: relative;
    padding-top: 10vw;
    margin-bottom: 8vw;
}
.intro .fst {
    position: relative;
    padding-left: 6.66vw;
    box-sizing:border-box;
}
.intro .fst .img_area {
    position: relative;
    width: 62.5%;
    margin-left: 37.5%;
    border-radius:5px 0 0 5px;
    overflow: hidden;
    max-height:1000px;
    min-height:700px;
}

.intro .fst .img_area:before{
    content:"";
    display: block;
    padding-top: 88.3%;
}
.intro .tit_area {
    position: absolute;
    left: 8vw;
    top: 5.33vw;
    z-index:20;
}
.intro h2 {
    position: relative;
}
.intro h2 span {
    display:inline-block;
    width:auto;
    margin-bottom: 10px;
    background:#fff;
    font-size: 38px;
    font-size: var(--fz38);
    line-height: 2.15;
    padding:0 20px;
    font-weight: 500;
}
.intro .enb {
    display: block;
    margin-top: 40px;
    font-size: 14px;
    font-size: var(--fz14);
    text-transform: uppercase;
    line-height: 2.42;
    letter-spacing: 0.35em;
}

.intro .snd {
    position: relative;
    background:#fff;
    z-index:20;
}
.intro .snd:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: -14vw;
    width: 56vw;
    height:14vw;
    background:#fff;
    z-index:1;
}
.intro .snd:after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: -0.2vw;
    width: 100%;
    height: 8.2vw;
    background:#f4f1e9;
    z-index:1;
}
.intro .inr {
    position: relative;
    width: calc(100% - 13.3vw);
    box-sizing: border-box;
    margin:0 auto;
    z-index: 10;
}
.intro .snd p{
    position: relative;
    width: 44%;
    font-size: 18px;
    font-size: var(--fz18);
    line-height: 2.44;
    font-weight: 500;
    z-index:10;
}
.intro .inr p:first-child{
    position: relative;
    transform: translateY(-90px);
    margin-bottom: -90px;
    z-index:10;
}
.intro .inr .img_area {
    position: absolute;
    width: 43.07%;
    max-width: 650px;
    right: 0;
    bottom:90px;
    overflow: hidden;
    border-radius:5px;
}

.intro .inr .img_area:before{
     content:"";
    display: block;
    padding-top: 53.57%;
}

.intro .inr02 {
    position: relative;
    -js-display: flex;
    display:-webkit-box;
    display: -webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 8vw 6.66vw 0 0 ;
    box-sizing:border-box;
    z-index:20;
    
}
.intro .inr02 .img_area {
    position: relative;
    width: 52.8%;
    min-height:650px;
    overflow: hidden;
    border-radius:5px;
}
.intro .inr02 .img_area:before{
     content:"";
    display: block;
    padding-top: 91.89%;
}
.intro .inr02 p {
    width: 40%;
}
@media screen and (max-width :1000px ){
    .intro .inr p {
        width: 100%;
    }
    .intro .inr p:first-child{
        
        position: relative;
        transform: translateY(0);
        margin-bottom: 0;
        z-index: 10;
        padding-top: 40px;
    }
    .intro .inr .img_area{
        
        position: relative;
        width: 80%;
        right: 0;
        bottom: 0;
        overflow: hidden;
        border-radius: 5px;
        margin: 30px auto 0;
    }
}


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

    .intro {
        padding-top: 18.75vw;
        margin-bottom: 20vw;
    }
    .intro:before{
        content:"";
        display: block;
        width: 37.5%;
        height: 450px;
        background:#ebe5d5;
        position: absolute;
        left: 0;
        top: 56vw;
        z-index:1;
        border-radius:0 5px 5px 0;
    }
    .intro:after{
        content:"";
        display: block;
        width: 37.5%;
        height: 625px;
        background:#ebe5d5;
        position: absolute;
        right: 0;
        bottom:-20vw;
        z-index:1;
        border-radius:5px 0 0 5px;
    }
    .intro .fst {
        padding-left: 0;
    }
    .intro .fst .img_area {
        position: relative;
        width: 80%;
        margin-left: 20%;
        max-height:1000px;
        min-height:100px;
    }

    .intro .tit_area {
        position:relative;
        left: 0;
        top: 0;
        z-index:20;
        padding:25vw 0 25vw 40%;
        box-sizing:border-box;
    }
    .intro h2 {
        position: absolute;
        left: 10vw;
        top: -155px;
        width: 200px;
        width: clamp(150px,16vw,200px);
        height:600px;
        align-items: flex-start;
        transform: translateX(min(20px,1.3vw));
        position: absolute;
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: row-reverse;
    }
    .intro h2 span {
        writing-mode: vertical-rl;
        font-feature-settings: normal;
        vertical-align: top;
        display: inline-block;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -o-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        letter-spacing: 0.05em;
        margin-bottom: 0;
        padding: 12px 0 0;
        font-size: 21px;
        font-size: var(--fz21);
    }
    .intro h2 span:nth-child(3){
        padding-bottom: 12px;
    }
    .intro .enb {
        display: block;
        margin-top: 0;
        font-size: 10px;
        line-height: 2.7;
        letter-spacing: 0.35em;
    }
    
    

    .intro .snd {
        background:none;
    }
    .intro .snd:before,
    .intro .snd:after{
        display:none;
    }
    .intro .inr {
        width: 82%;
        box-sizing: border-box;
        margin:0 auto;
        z-index: 10;
    }
    .intro .snd p{
        width: 100%;
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
    }
    .intro .inr p:first-child{
        padding-top: 0;
    }

    .intro .inr02 {
        display: block;
        padding: 0;
        width: 82%;
        margin:0 auto;

    }
    .intro .inr02 .img_area {
        position: relative;
        width: 100%;
        min-height:10px;
        margin:50px auto;
    }
    .intro .inr02 .img_area:before{
        padding-top: 93.75%;
    }
    .intro .inr02 p {
        width: 100%;
    }
    
}

/* ==========================================================================
	w_box
========================================================================== */
.w_box {
    position: relative;
    width: calc(100% - 6.66vw);
    margin-top: 4vw;
    margin-left: 6.66vw;
    background:#fff;
    border-radius:10px 0 0 10px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding:9.8vw 6.66vw 10vw;
    box-sizing:border-box;
    margin-bottom: 4vw;
}
.w_box.box02{
    margin-top: 0;
    margin-bottom: 10vw;
}
.w_box .tit_area {
    position: sticky;
    top: 50px;
    width: 110px;
    height: 480px;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.w_box .tit_area h2{
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 500;
    line-height: 1.94;
}

.w_box .text_area{
    position: relative;
    width: 80%;
    padding-right: 3.33vw;
    max-width:calc(100% - 220px);
    box-sizing:border-box;
}
.w_box.box01 ul{
    margin-bottom: 80px;
}
.w_box.box01 ul li{
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding:38px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #e7e4dd;
}

.w_box.box01 ul li:first-child{
    padding-top: 0;
}
.w_box.box01 ul li p{
    font-size: 18px;
    font-size: var(--fz18);
    font-weight: 500;
    width: 140px;
}
.w_box.box01 ul li p:last-child{
    width: calc(100% - 140px);
}
.w_box .link_box {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    margin-top: 50px;
}
.w_box .link_box .img_area{
    position: relative;
    width: 37%;
    min-width:260px;
}
.w_box .link_box .img_area img{
    border-radius:5px;
}
.w_box .link_box .link_txt{
    position: relative;
    width: 57.6%;
    max-width:calc(100% - 285px);
    padding-top: 5px;
}

.w_box .link_box .link_txt a{
    position: relative;
    display: inline-block;
    padding-left: 40px;
    margin-bottom: 30px;
    box-sizing:border-box;
}
.w_box .link_box .link_txt a:before{
    content:"";
    display: block;
    position: absolute;
    left:0;
    top: 3px;
    width: 20px;
    height: 18px;
    background:url(../image/about/link_icon.png);
    background-size:cover;
}
.w_box .link_box .link_txt a span{
    display:inline-block;
    position: relative;
    font-size: 18px;
    font-size: var(--fz18);
    font-weight: 500;
    color:var(--base-text-color);
    transition: color 0.4s var(--easeOutQuad);
}
.w_box .link_box .link_txt a:hover span{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}
.w_box .link_box .link_txt a span:before{
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 1px;
    left:0;
    bottom:-8px;
    background:var(--base-text-color);
    z-index: 5;
    transition: width 0.4s var(--easeOutQuad);
}
.w_box .link_box .link_txt a span:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-8px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.w_box .link_box .link_txt a:hover span:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}
    
.w_box .link_box .link_txt p {
    font-size: 15px;
    font-size: var(--fz15);
    font-weight: 500;
    line-height: 2.13;
}


.w_box .access-map {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius:5px;
    overflow: hidden;
}

.w_box .access-map iframe {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    margin:auto;
    left: 0;
}
.w_box .map-txt {
    position: relative;
    margin-top:28px;
    padding-right: 250px;
    margin-bottom: 8.6vw;
}
.w_box .map-txt p {
    font-size: 15px;
    font-size: var(--fz15);
    line-height: 2.13;
}
.w_box .map-txt a {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 220px;
    height: 60px;
    border:1px solid #ebe5d5;
    box-sizing:border-box;
    border-radius:30px;
}

.w_box .map-txt a:hover{
    background:var(--base-link-color);
    border-color:var(--base-link-color);
}
.w_box .map-txt a span {
    position: relative;
    display:inline-block;
    font-size: 16px;
    font-weight: 500;
    color:var(--base-link-color);
    padding-left: 20px;
    transition: color 0.4s var(--easeOutQuad);
}
.w_box .map-txt a:hover span{
    color:#fff;
} 
.w_box .map-txt a span:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 13px;
    height: 16px;
    background-image: url(../image/common/menu_s_link_icon02.png);
    background-size: cover;
    transition: background 0.4s var(--easeOutQuad);
}
.w_box .map-txt a:hover span:before{
    background-image: url(../image/common/menu_s_link_icon02_af.png);
    transition: background 0.4s var(--easeOutQuad);
}

.w_box.box02 h3{
    position: relative;
    padding-left: 65px;
    font-size: 20px;
    font-size: var(--fz20);
    font-weight: 500;
    margin-bottom: 42px;
} 
.w_box.box02 h3:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-size:cover;
}
.w_box.box02 h3.car:before{
    width: 30px;
    height: 24px;
    background-image:url(../image/about/car_icon.png);    
}
.w_box.box02 h3.air:before{
    top:-4px;
    width: 31px;
    height: 29px;
    background-image:url(../image/about/air_icon.png);    
}
.w_box.box02 h3.bus:before{
    top:-4px;
    width: 28px;
    height: 28px;
    background-image:url(../image/about/bus_icon.png);    
}
.w_box .b_txt {
    display: block;
    padding:32px 10px;
    box-sizing:border-box;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2;
    margin-bottom: 6.66vw;
    border-top:1px solid #e7e4dd;
    border-bottom:1px solid #e7e4dd;
}
.w_box.box02 ul {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    border-top:1px solid #e7e4dd;
    margin-bottom: 8.6vw;
}
.w_box.box02 ul:last-child {
    margin-bottom: 0;
}
.w_box.box02 ul li {
    border-bottom:1px solid #e7e4dd;
    width: 200px;
    padding:32px 10px;
    box-sizing:border-box;
}
.w_box.box02 ul li:nth-child(2n){
    width: calc(100% - 200px);
}
.w_box.box02 ul p {
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2;
    font-weight: 500;
}

.w_box.box02 ul p {
    margin-bottom: 26px;
}

.w_box.box02 ul p:last-child{
    margin-bottom: 0;
}
.w_box.box02 ul a{
    position: relative;
     display:inline-block;   
    padding-left: 32px;
    box-sizing:border-box;
    margin-bottom: 16px;
}
.w_box.box02 ul a:before{
    content:"";
    display: block;
    position: absolute;
    left:0;
    top: 3px;
    width: 20px;
    height: 18px;
    background:url(../image/about/link_icon.png);
    background-size:cover;
}
.w_box.box02 ul a span{
    display:inline-block;
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    font-weight: 500;
    color:var(--base-link-color);
}

.w_box.box02 ul a:hover{
    opacity:.7;
}
.w_box.box02 ul a span:after{
    content:"";
    display: block;
    position: absolute;
    width:100%;
    height: 1px;
    left:0;
    bottom:-8px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
    

@media screen and (max-width :1200px ){
    
    .w_box .text_area{padding-right: 0;}
    
}

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

    .w_box .link_box .img_area{
        position: relative;
        width: 100%;
        margin-bottom: 23px;
        min-width:260px;
    }
    .w_box .link_box .link_txt{
        width: 100%;
        max-width:100%;
    }   

    .w_box .map-txt {
        margin-top:28px;
        padding-right: 0;
        margin-bottom: 8.6vw;
    }
    .w_box .map-txt a {
        position: relative;
        right: auto;
        top:auto;
        margin-top: 20px;
    }
}


@media screen and (max-width :800px ){
    .w_box {
        width: 100%;
        margin:16vw auto 0;
        background:#fff;
        border-radius:0;
        display: block;
        padding:18.125vw 6.25vw 6.25vw;
        border-bottom:1px solid #f4f1e9;
    }
    .w_box.box02{
        margin:0 auto 0;
        padding-top: 16vw;
    }
    .w_box .tit_area {
        position:relative;
        top: auto;
        width: 100%;
        height: auto;
        display: block;
        text-align: center;
        margin-bottom: 18.75vw;
    }

    .w_box .tit_area h2{
        display: block;
        font-size: 26px;
        font-size: var(--fz26);
    }

    .w_box .text_area{
        position: relative;
        width: 100%;
        padding-right: 0;
        max-width:100%;
    }
    .w_box.box01 ul{
        margin-bottom: 12.5vw;
    }
    .w_box.box01 ul li{
        padding:25px 15px;
    }

    .w_box.box01 ul li:first-child{
        padding-top: 25px;
        border-top: 1px solid #e7e4dd;
    }
    .w_box.box01 ul li p{
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 1.6666;
        width: 110px;
    }
    .w_box.box01 ul li p:last-child{
        width: calc(100% - 110px);
    }
    .w_box .link_box {
        display: block;
        width: 91.4%;
        margin:0 auto 40px;
    }
    .w_box .link_box .link_txt a{
        margin-bottom: 28px;
    }
    .w_box .link_box .link_txt a span{
        font-size: 17px;
        font-size: var(--fz17);
    }
    .w_box .link_box .link_txt p {
        display: block;
        font-size: 14px;
        font-size: var(--fz14);
        line-height: 1.85;
    }


    .w_box .access-map {
        height: 250px;
        height:calmp(250px,62.5vw,350px);
    }

    .w_box .access-map iframe{
        
        height: calc(100% + 360px);
    }
    .w_box .map-txt {
        position: relative;
        margin-top:30px;
        margin-bottom: 14.5vw;
    }
    .w_box .map-txt p {
        font-size: 14px;
        font-size: var(--fz14);
        line-height: 1.75;
    }
    .w_box .map-txt a {
        width: 100%;
        height: 50px;
        border-radius:25px;
    }
    .w_box .map-txt a span {
        font-size: 14px;
        padding-left: 15px;
    }
    .w_box .map-txt a span:before{
        top: 0;
        left: -5px;
        width: 13px;
        height: 16px;
    }

    .w_box.box02 h3{
        padding-left: 50px;
        font-size: 19px;
        font-size: var(--fz19);
        font-weight: 500;
        margin-bottom: 21px;
    } 
    .w_box .b_txt {
        display: block;
        padding:31px 0;
        font-size: 15px;
        font-size: var(--fz16);
        line-height: 2;
        margin-bottom: 13.75vw;
        border-top:1px solid #e7e4dd;
        border-bottom:1px solid #e7e4dd;
    }
    .w_box.box02 ul {
        margin-bottom: 13.75vw;
    }
    .w_box.box02 ul li {
        border-bottom:none;
        width: 100%;
        padding:35px 10px 0;
        box-sizing:border-box;
    }
    .w_box.box02 ul li:nth-child(2n){
        width:100%;
        padding:12px 10px 35px;
        border-bottom:1px solid #e7e4dd;
    }
    .w_box.box02 ul li:last-child{
        border-bottom:none;
    }
    .w_box.box02 ul p {
        font-size: 15px;
        font-size: var(--fz15);
    }

    .w_box.box02 ul p {
        margin-bottom: 12px;
    }

    .w_box.box02 ul p:last-child{
        margin-bottom: 0;
    }
    .w_box.box02 ul a{
        padding-left: 40px;
        margin-bottom: 12px;
    }
    .w_box.box02 ul a span{
        font-size: 16px;
        font-size: var(--fz17);
    }
    
    
}