@charset "UTF-8";

/* box1　
---------------------------------------------------------*/
.box1{
    position: relative;
    padding-bottom: 140px;
}
.box1::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/accessmap/abs04.svg")no-repeat bottom center;
    background-size: 100% auto;
    width: 100%;
    height: 200px;
    bottom: -1px;
    left: 0;
    z-index: -1;
}
.box1::after{
    position: absolute;
    display: block;
    content: "";
    background:#fffbc8;
    background-size: 100% auto;
    width: 100%;
    height: calc(100% - 135px);
    bottom: 0;
    left: 0;
    z-index: -2;
}
.box1 .w1370{
    text-align: center;
}
.box1 iframe{
    width: 80%;
    margin: 0 auto;
}
.box1 .abs li{
    position: absolute;
    width:20%;
    max-width: 293px;
}
.box1 .abs li:nth-child(1){
    left: 4%;
    bottom: 30px;
}
.box1 .abs li:nth-child(2){
    right: 4%;
    bottom: 0;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box1{
    padding-bottom: 10vw
}
.box1::after{
    height: calc(100% - 10vw);
}
.box1 iframe{
    width: 90%;
    height: 45vw;
}
.box1 .abs li:nth-child(1){
    left: 2%;
    bottom: 2vw;
}
.box1 .abs li:nth-child(2){
    right: 0;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box1{
    padding-bottom: 15vw;
}
.box1::after{
    height: calc(100% - 8vw);
}
.box1 iframe{
    width: 100%;
    height: 60vw;
}
.box1 .abs li:nth-child(1){
    width:25%;
    left:-1%;
    bottom: -2vw;
}
.box1 .abs li:nth-child(2){
    right:-6%;
    bottom: 0;
    width: 35%;
}
.box1 .com_link1{
    margin-top: .5em;
}
.box1 .com_link1 a {
    padding: 0 1em .8em;
}
}






/* box2
---------------------------------------------------------*/
.box2{
    padding-top: 100px;
    padding-bottom: 140px;
    background: #fff;
    text-align: center;
}
.box2 dl{
    margin-bottom: 70px;
}
.box2 dl dt{
    font-size: min(320%,4.5vw);
    letter-spacing: 0.1em;
    line-height: 1em;
    margin-bottom: 1.3rem;
}
.box2 dl dd address,
.box2 dl dd p{
    display: inline-block;
}
.box2 ul{
    width: 80%;
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}
.box2 ul li{
    border-bottom: dashed #a9a49e 2px;
    text-align: center;
    font-size: min(140%,2.5vw);
    letter-spacing: 0.1em;
    line-height: 1.5em;
    padding-bottom: 60px;
    margin-bottom: 60px;
}
.box2 ul li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.box2 ul li div{
    position: relative;
    width: 23em;
    text-align: left;
    display: inline-block;
    margin: 0 auto;
    padding-left: 3.8em;
    box-sizing: border-box;
}
.box2 ul li div::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/accessmap/abs06.svg")no-repeat top left;
    background-size: 100% auto;
    width: 3.1em;
    height: 3.1em;
    top: 50%;
	transform: translateY(-50%);
    left: 0;
}
.box2 ul li:nth-child(2) div::before{
    background-image: url("../images/accessmap/abs05.svg");
}
.box2 ul li div span{    color: #249e84;}
.box2 ul li:nth-child(2) div span{    color: #279db8;}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box2{
    padding-top: 7vw;
    padding-bottom: 10vw;
}
.box2 dl{
    margin-bottom: 5vw;
}
.box2 dl dt{
    margin-bottom: 1rem;
}
.box2 ul li{
    border-bottom: dashed #a9a49e 1px;
    padding-bottom: 5vw;
    margin-bottom: 5vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box2{
    padding-top: 12vw;
    padding-bottom: 17vw;
}
.box2 dl{
    margin-bottom: 8vw;
}
.box2 dl dt{
    font-size:150%;
    margin-bottom: 1rem;
}
.box2 dl dd address,
.box2 dl dd p{
    font-size:88%;
    display: block;
    line-height: 1.8em;
}
.box2 ul{
    width: 100%;
}
.box2 ul li{
    border-bottom: dashed #a9a49e 1px;
    font-size: 100%;
    letter-spacing: 0.05em;
    padding-bottom: 6vw;
    margin-bottom: 6vw;
}
.box2 ul li div{
    padding-left: 3em;
}
.box2 ul li div::before{
    width: 2.5em;
    height: 2.5em;
}
}







/*box3
---------------------------------------------------------*/
.box3{
    background: #e5f6fa;
    padding: 120px 0;
}
.box3 h4{
    font-size: min(220%,3.3vw);
    letter-spacing: 0.15em;
    line-height: 1em;
    color: #3aadc7;
    margin-bottom: 75px;
    text-align: center;
}
.box3 .flexbox{
    display: flex;
    justify-content: space-between;
    max-width: 1096px;
    margin: 0 auto;
}
.box3 .flexbox > div{
    width: 48.3%;
    background: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    text-align: center;
}
.box3 .flexbox .flex_l{
    position: relative;
    padding: 30px 3.5%;
}
.box3 .flexbox .flex_l::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/accessmap/abs08.svg")no-repeat top right;
    background-size: 100% auto;
    width: 37px;
    height: 49px;
    top: 4%;
    right: 4%;
}
.box3 .flexbox .flex_r{
    position: relative;
    background: #81c8d6;
    padding: 35px 3.5% 30px;
}
.box3 .flexbox .flex_r::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/accessmap/abs07.svg")no-repeat top right;
    background-size: 100% auto;
    width: 20px;
    height: 23px;
    top: 50%;
	transform: translateY(-50%);
    right: 100%;
}
.box3 .flexbox .flex_r dl{
    margin-bottom: 20px;
}
.box3 .flexbox .flex_r dt{
    color: #ffff5c;
    font-size: min(145%,2.4vw);
    letter-spacing: 0.1em;
    line-height: 1em;
    font-weight: bold;
}
.box3 .flexbox .flex_r dt span{
    font-size:210%;
    letter-spacing:normal;
    margin: 0 0.05em 0 0.1em;
}
.box3 .flexbox .flex_r dd{
    font-size: min(115%,1.8vw);
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #fff;
    margin-top: .5em;
    font-weight: bold;
}
.box3 .txt{
    text-align: center;
    font-size: min(125%,2.2vw);
    letter-spacing: 0.15em;
    line-height: 1.5em;
    font-weight: bold;
    margin-top: 45px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box3{
    padding: 9vw 0;
}
.box3 h4{
    margin-bottom: 5vw;
}
.box3 .flexbox > div{
    border-radius: 15px;
}
.box3 .flexbox .flex_l{
    padding: 3vw 1.5% 2vw;
}
.box3 .flexbox .flex_l::before{
    width: 4vw;
    top: 3%;
    right: 3%;
}
.box3 .flexbox .flex_r{
    padding: 3.5vw 3% 2vw;
}
.box3 .flexbox .flex_r::before{
    width: 2vw;
    height: 2.5vw;
}
.box3 .flexbox .flex_r dl{
    margin-bottom: 2vw;
}
.box3 .txt{
    margin-top:3.5vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box3{
    padding: 12vw 0;
}
.box3 h4{
    font-size: 130%;
    letter-spacing: 0.1em;
    margin-bottom: 7vw;
}
.box3 .flexbox{
    display: block;
}
.box3 .flexbox > div{
    width: 100%;
    border-radius: 15px;
}
.box3 .flexbox .flex_l{
    padding: 5% 6% 4%;
    margin-bottom: 8%;
}
.box3 .flexbox .flex_l::before{
    width: 7vw;
    height: 10vw;
}
.box3 .flexbox .flex_r{
    padding: 7% 4% 5%;
}
.box3 .flexbox .flex_r::before{
    background-position: bottom center;
    width: 7vw;
    height: 7vw;
    top: auto;
	transform: translateY(0) rotate(90deg);
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: calc(100% - 2vw);
}
.box3 .flexbox .flex_r dl{
    margin-bottom: 4vw;
}
.box3 .flexbox .flex_r dt{
    font-size: 115%;
}
.box3 .flexbox .flex_r dd{
    font-size: 88%;
    letter-spacing: 0.05em;
}
.box3 .txt{
    font-size: 95%;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    margin-top: 6vw;
}
}






/* box4
---------------------------------------------------------*/
.box4{
    height: 500px;
    background: url("../images/accessmap/img03@2x.jpg")no-repeat center center;
    background-size: cover;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box4{
    height: 33vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box4{
    height: 32vw;
}
}







/*box5
---------------------------------------------------------*/
.box5{
    background: #f3f3e5;
    padding: 120px 0 75px;
    text-align: center;
}
.box5 .com_index2 .ft_brandon{
    color: #cfcfa2;
}
.box5 .timetable{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 80px;
    background: #fff;
    border-radius: 20px;
    padding: 60px 5% 45px;
    box-sizing: border-box;
}
.box5 .timetable .img,
.box5 .timetable ul{
    width: 85%;
    max-width: 650px;
    margin: 0 auto;
}
.box5 .timetable .img{
    position: relative;
}
.box5 .timetable .img::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/accessmap/abs02.svg")no-repeat top left;
    background-size: 100% auto;
    width:36%;
    max-width:235px;
    height:225px;
    left: -11%;
    top: -120px;
}
.box5 .timetable .img img{
    position: relative;
    z-index: 2;
}
.box5 .timetable ul{
    margin-top: 15px;
    text-align: left;
    line-height: 1.6em;
}
.box5 .timetable ul li{
    font-weight: bold;
}
.box5 .timetable .icon-maru1,.box5 .timetable .icon-maru2{color: #feb014;}
.box5 .timetable .icon-star{color: #809494;}
.box5 .timetable ul li span{color: #f68193;}




/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box5{
    padding: 8vw 0 5vw;
}
.box5 .timetable{
    margin: 0 auto 5vw;
    border-radius: 15px;
    padding: 5vw 5% 4vw;
}
.box5 .timetable .img::before{
    left: -11%;
    top: -11.5vw;
}

}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.box5{
    padding: 10vw 0 10vw;
}
.box5 .timetable{
    width: 100%;
    margin: 0 auto 7vw;
    border-radius: 15px;
    padding: 7% 5% 6%;
}
.box5 .timetable .img,
.box5 .timetable ul{
    width: 100%;
}
.box5 .timetable .img::before{
    top: -14vw;
}
.box5 .timetable ul{
    margin-top: 3vw;
    font-size:80%;
}

}