/*  Office Style */
/*  Last Up Dataed 2020.09.14  */

/* =======================================
    OFFICE COMMON STYLE 
======================================= */
#visualArea{
    background-image: url(../office/images/bg_visual_office.jpg);
}
#visualArea h1 span{
    opacity: 0;
}
#visualArea h1 .title{
    animation: title1 1s ease-in 1s forwards;
}
#visualArea div.catch1 p span {
	color: white;
    opacity: 0;
    -webkit-animation: catch1 2s step-start 2s forwards;
            animation: catch1 2s step-start 2s forwards;
}
#visualArea h1 .title2{
    animation: title2 1s ease-in 2s forwards;
}
@keyframes title1 {
    from {opacity: 0;}
    to   {opacity: 1;}
}
@keyframes title2 {
    from {opacity: 0;}
    to   {opacity: 1;}
}
main{
    background: -moz-linear-gradient(bottom left, #F4F4F4, #E8EAEB); 
    background: -webkit-linear-gradient(bottom left, #F4F4F4, #E8EAEB); 
    background:         linear-gradient(to top right, #F4F4F4, #E8EAEB); 
}
main h2{
    font-size: 1.25em; 
    font-weight: 700;
    padding: 0 15px 20px;
    margin: 0 auto 40px;
    text-align: center;
    border-bottom: solid 5px;
    border-image: -moz-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image: -webkit-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image:         linear-gradient(to top right, #007ADC, #00E9B9); 
    border-image-slice: 1;
    display: table;
}
/* SmartPhone */
@media screen and (max-width: 599px){
    #visualArea.office{
        background-image: url(../office/images/bg_visual_office_sm.jpg);
    }
    main h2{
            padding: 0 15px 15px;
            margin: 0 auto 20px;
            border-bottom: solid 3px;
            font-size: 1.125em;
        }
}

/* =======================================
    INDEX 
======================================= */
#officeArea{
    width: 1000px;
    margin: 0 auto;
}
#officeArea section{
    position: relative;
    height: 430px;
    margin-bottom: 50px;
}
#officeArea section:last-child{
    margin-bottom: 0;
}
#officeArea section div{
    width: 380px;
    padding: 40px;
    background: white;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
}
#officeArea section a{
    text-decoration: none;
    color: #444;
    transition-duration: 0.3s;
}
#officeArea h2{
    padding-bottom: 30px;
    margin-bottom: 20px;
    display: block;
}
#officeArea p.link{
    margin: 0 auto;   
}
#officeArea a p.link {
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff;
    text-align: center;
    text-decoration: none;
    width: 260px;
    padding: 10px 20px;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
            transition-property: color;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
#officeArea a p.link:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border: solid 1px #009DBF;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#officeArea a:hover p.link , #officeArea a:focus p.link , #officeArea a:active p.link {
    color: #009DBF;
    cursor: pointer;
}
#officeArea a:hover p.link:before , #officeArea a:focus p.link:before , #officeArea a:active p.link:before {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
}
#officeArea figure{
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 50%;
}
#officeArea figure img{
    width: 100%;
    cursor: pointer;
    transition-duration: 0.3s;
}
#officeArea a:hover figure img{
    opacity: 0.7;
    transition-duration: 0.3s;
}

#officeArea section.second div{
    right: inherit;
    left: 0;
}
#officeArea section.second figure{
    left: inherit;
    right: 0;
}


/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #officeArea{
        width: 100%;
    }
    #officeArea section{
        height: 350px;
    }
    #officeArea section div{
        width: 40%;
    }
    #officeArea figure{
        width: 75%;
    }
    #officeArea figure img{
        width: 70%;
    }
    #officeArea section.second figure{
        text-align: right;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){ 
    #officeArea{
        width: 90%;
    }
    #officeArea section{
        position: inherit;
        height: auto;
        margin-bottom: 50px;
    }
    #officeArea h2{
        padding-bottom: 20px;
        margin-bottom: 20px;
        display: block;
    }
    #officeArea section div{
        width: auto;
        padding: 20px;
        position: inherit;
        z-index: 1;
        right: 0;
        bottom: 0;
    }
    #officeArea a p{
        margin-left: 0;
        margin-right: 0;
    }
    #officeArea a p.link {
        width: 100%;
        padding: 10px 0;
    }
    #officeArea figure{
        position: inherit;
        left: 0;
        top: 0;
        width: 100%;
    }
}

/* =======================================
    MESSAGE 
======================================= */
#messageArea{
    width: 1000px;
    margin: 0 auto; 
}
#messageArea div.greeting{
    position: relative;
    height: 600px;
    margin-bottom: 90px;
}
#messageArea div.message{
    position: absolute;
    right: 0;
    top: 80px;
    z-index: 1;
    width: 450px;
}
#messageArea div.message h2{
    font-weight: 500;
    margin-bottom: 40px;
    padding-bottom: 0;
    border-bottom: solid 0;
    border-image: none; 
    border-image-slice:none;
    display: block;
}
#messageArea div.message p{
}

#messageArea div.message p:last-child{
    margin-bottom: 0;
}
#messageArea div.photo{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 480px;
}
#messageArea div.photo figure{
    margin-bottom: 20px;
}
#messageArea div.photo figure img{
    width: 100%;
}
#messageArea div.photo div{
    margin-left: 80px;
}
#messageArea div.photo p{
    text-align: center;
    margin-bottom: 5px;
}
#messageArea div.photo p.name img{
    width: 40%;
    vertical-align: middle;
    margin-right: 20px;
}
#messageArea div.photo p.name span{   
}
#messageArea div.profile{
    background: white;
    padding: 40px;
    margin-bottom: 40px;
}
#messageArea div.profile h2{
    margin-bottom: 20px;
}
#messageArea div.philosophy{
    padding-bottom: 20px; 
}
#messageArea div.philosophy p{
    text-align: center ;
    line-height: 3;   
}
#messageArea div.philosophy h3{
    margin: 0 auto 20px;
    text-align: center;
    font-weight: 700;
}
@media screen\0 /*IE9-IE11 hack */{
    div.service div.title p{;
        background: none;
    }   
}
#messageArea div.publication ul{
    margin-bottom: 50px;
}
#messageArea div.publication ul:last-child{
    margin-bottom: 0; 
}
#messageArea div.publication ul li{
    border-bottom: solid 2px;
    border-image: -moz-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image: -webkit-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image:         linear-gradient(to top right, #007ADC, #00E9B9); 
    border-image-slice: 1;
    padding-top: 18px;
    padding-bottom: 18px;
    line-height: 1.6;
    font-size: 0.875em;
}
#messageArea div.publication ul li:last-child{
    border-bottom: none; 
}
#messageArea div.philosophy .slogan{
    margin: 0 40px 40px;
    padding: 40px 40px;
    background: -moz-linear-gradient(bottom left, #F4F4F4, #E8EAEB); 
    background: -webkit-linear-gradient(bottom left, #F4F4F4, #E8EAEB); 
    background:         linear-gradient(to top right, #F4F4F4, #E8EAEB); 
}
#messageArea div.philosophy .slogan:last-child{
    margin-bottom: 20px;   
}
#messageArea div.philosophy .slogan dl{
    text-align: center;  
}
#messageArea div.philosophy .slogan dt{
    margin-bottom: 20px;
    font-size: 2em;
}
#messageArea div.philosophy .slogan dd{
    line-height: 1.4;
}
#messageArea div.philosophy ol li{
    width: auto;
    padding-left: 15px;
    margin-bottom: 20px;
    margin-left: 32px;
    line-height: 1.4;
}
#messageArea div.philosophy ol li:first-letter{
    margin-left: -36px;
}
#messageArea div.philosophy ol li:last-child{
    margin-bottom: 0;
    
}


/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #messageArea{
        width: 100%;
    }
    #messageArea div.greeting{
        width: 90%;
        margin: 0 auto;
        height: 550px;
        margin-bottom: 40px;
    }
    #messageArea div.message{
        top: 0;
        width: 45%;
    }
    #messageArea div.photo div{
        width: 60%;
        margin-left: 30px;
    }
    #messageArea div.photo figure img{
        width: 70%;
    }
    #messageArea div.profile{
        width: 90%;
        margin: 0 auto;
        margin-bottom: 40px;
        padding: 40px 0;
    }
    #messageArea div.profile p{
        margin: 0 40px 20px;
    }
    #messageArea div.profile ul{
        margin: 0 40px 40px;
    }
}
/* SmartPhone */
@media screen and (max-width: 599px){
    #messageArea{
        width: 100%;
    }
    #messageArea div.greeting{
        position: inherit;
        height: auto;
        margin-bottom:0;
    }
    #messageArea div.message{
        position: inherit;
        right: inherit;
        top: inherit;
        width: 100%;
        border-top: solid 1px white;
        border-bottom: solid 1px white;
        padding-bottom: 20px;
        padding-top: 20px;
        margin-bottom: 40px;
    }
    #messageArea div.message h2{
        margin-bottom: 20px;
    }
    #messageArea div.photo{
        position: inherit;
        margin-bottom: 40px;
        width: 100%;
    }
    #messageArea div.photo figure img{
        width: 100%;
    }
    #messageArea div.photo div{
        margin-left: 0;
    }
    #messageArea div.profile{
        width: 90%;
        margin: 0 auto;
        padding: 20px 0;
        margin-bottom: 40px;
    }
    #messageArea div.philosophy p{
        letter-spacing: .08em;
        line-height: 2;   
    }
    #messageArea div.philosophy .slogan{
        margin: 0 20px 20px;
        padding: 20px;
    }
    #messageArea div.philosophy .slogan:last-child{
        margin-bottom: 0px;   
    }
    #messageArea div.philosophy .slogan dt{
        font-size: 1.25em;
        font-weight: 700;
    }
    #messageArea div.philosophy ol li{
        padding-left: 10px;
        font-size: 0.875em;
    }
    #messageArea div.publication{
        margin-bottom: 0;
    }
    #messageArea div.publication ul{
        margin-bottom: 50px;
        padding: 0 20px;
    }
    #messageArea div.publication li{
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
}

/* =======================================
    TAX Accountant 
======================================= */
#accountantArea{
    width: 1000px;
    margin: 0 auto;  
}

#accountantArea div.greeting{
    position: relative;
    height: 650px;
    margin-bottom: 90px;
}
#accountantArea div.message{
    position: absolute;
    left: 0;
    top: 130px;
    z-index: 1;
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff; 
    width: 520px;
    padding: 40px;
}
#accountantArea div.message h2{
    margin-bottom: 40px;
    border-bottom: solid 0;
    border-image: none; 
    border-image-slice: 0;
    display: block;
}
#accountantArea div.message p{
    padding-right: 100px;
}

#accountantArea div.message p:last-child{
    margin-bottom: 0;
}
#accountantArea div.photo{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 480px;
}
#accountantArea div.photo figure{
    margin-bottom: 20px;
}
#accountantArea div.photo figure img{
    width: 100%;
}
#accountantArea div.photo div{
    margin-left: 80px;
}
#accountantArea div.photo p{
    text-align: center;
    margin-bottom: 5px;
}
#accountantArea div.photo p.name img{
    width: 40%;
    vertical-align: middle;
    margin-right: 20px;
}
#accountantArea div.photo p.name span{   
}
#accountantArea div.profile{
    background: white;
    padding: 40px;
    margin-bottom: 40px;
}
#accountantArea div.profile h2{
    margin-bottom: 0;
}
#accountantArea div.profile dl {
	overflow: hidden;
	box-sizing: border-box;
    margin-bottom: 0;
}
#accountantArea div.profile dt {
	float: left;
    font-weight: 500;
    width: 220px;
	padding: 22px 0;
	box-sizing: border-box;
    text-align: left;
}
#accountantArea div.profile dd {
	padding: 22px 0;
	box-sizing: border-box;
	padding-left: 220px;
    border-bottom: solid 2px;
    border-image: -moz-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image: -webkit-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image:         linear-gradient(to top right, #007ADC, #00E9B9); 
    border-image-slice: 1;
    line-height: 1.4;
}
#accountantArea div.profile ul{
    display: block;
}
#accountantArea div.profile li{
    width: auto;
    position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
    line-height: 1.4;
}
#accountantArea div.profile li:last-child{
    margin-bottom: 0;
}
#accountantArea div.profile li::before{
    position: absolute;
    left: 0;
    top: 8px;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    background-position: left top;
}
/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #accountantArea{
        width: 100%;
    }
    #accountantArea div.greeting{
        height: 600px;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 40px;
    }
    #accountantArea div.message{
        top: 40px;
        width: 45%;
    }
    #accountantArea div.message h2{
        margin-bottom: 20px;
    }
    #accountantArea div.message p{
        padding-right: 20px;
        margin-bottom: 20px;
    }
    #accountantArea div.photo{
        overflow: hidden;
    }
    #accountantArea div.photo div{
        width: 60%;
        margin-left: 0;
        float: right;
    }
    #accountantArea div.photo figure{
        text-align: right;
    }
    #accountantArea div.photo figure img{
        width: 70%;
    }
    #accountantArea div.profile{
        width: 90%;
        margin: 0 auto;
        margin-bottom: 40px;
        padding: 40px 0;
    }
    #accountantArea div.profile dl {
        margin: 0 20px 0;
    }
    #accountantArea div.profile ul{
        width: 90%;
        margin: 0 auto;
    }
    #accountantArea div.profile li::before{
        top: 6px;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){
    #accountantArea{
        width: 100%;
    }
    #accountantArea div.greeting{
        position: inherit;
        height: 100%;
        margin-bottom: 90px;
    }
    #accountantArea div.message{
        position: inherit;
        left: auto;
        top: auto;
        width: 90%;
        margin: 0 auto;
        padding: 20px 0;
    }
    #accountantArea div.message h2{
        font-size: 1.25em;
        margin-bottom: 20px;
        padding: 0;
    }
    #accountantArea div.message p{
        padding-right: 0;
    }
    #accountantArea div.photo{
        position: inherit;
        right: auto;
        top: 0;
        margin-bottom: 40px;
        width: 100%;
    }
    #accountantArea div.photo figure img{
        width: 100%;
    }
    #accountantArea div.photo div{
        margin-left: 0;
    }
    #accountantArea div.profile{
        margin: 0 auto;
        padding: 20px 0;
        width: 90%;
    }
    #accountantArea div.profile dl:last-child{
        margin-bottom: 0;
    }
    #accountantArea div.profile dl {
        overflow: initial;
        box-sizing:inherit;
        margin: 0 20px 80px;
        font-size: 0.875em;
    }
    #accountantArea div.profile dt {
        float: initial;
        width: auto;
        padding: 0 0 10px;
        box-sizing: initial;
        font-weight: 700;
    }
    #accountantArea div.profile dd {
        box-sizing: initial;
        padding: 0 0 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #CCC;
    }
    #accountantArea div.profile dd:last-child{
        margin-bottom: 0;
    }
    #accountantArea div.profile ul{
        margin: 0 20px;
    }
    #accountantArea div.profile li{
        font-size: 0.875em;
    }
    #accountantArea div.profile li::before{
        position: absolute;
        top: 5px;
    }
}

/* =======================================
    STAFF 
======================================= */
#staffArea{
    width: 1000px;
    margin: 0 auto;
}
#staffArea p.caution{
    display: none;
}
#staffArea p.caution {
    position: relative;
    margin: 1.5em auto;
    padding: 10px 0;
    max-width: 90%;
    color: #555;
    font-size: 16px;
    background: white;
    border-radius: 5px;
}
#staffArea p.caution:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid white;
}
#staffArea p.caution span {
    margin: 0;
    padding: 0 20px;
    display: block;
}
#staffArea ul.staff{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; 
}
#staffArea ul.staff::after{
	content:"";
	display: block;
	width:32%;
}

#staffArea ul.staff li{
    width: 320px;
    height: 400px;
    position: relative;
    margin-bottom: 20px;
}
#staffArea ul.staff figure{
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
    width: 100%;
}
#staffArea ul.staff figure img{
    width: 100%;
}
#staffArea ul.staff .off dl{
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff;
    width: 100%;
    padding:20px 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
}
#staffArea ul.staff .off dt{
    font-size: 1.125em;
    font-weight: 500; 
    margin-bottom: 10px;
    padding: 0 20px;
}
#staffArea ul.staff .off dt span{
    font-size: 0.75em;
    font-weight: 400;
    margin-left: 10px;
}
#staffArea ul.staff .off dd{
    font-size: 0.75em;
    padding: 0 20px;
    line-height: 1.3;
}
#staffArea ul.staff li .off{
	width:320px;
	height:400px;
	position:absolute;
	top:0;
	left:0;
	opacity:1;
	-webkit-transition:	all 0.6s ease;
	transition:		    all 0.6s ease;
    z-index: 2;
}
#staffArea ul.staff li:hover .off {
    opacity:0;	/* マスクを表示しない */
}

#staffArea div.hover {
	width:320px;
	height:400px;
	overflow:hidden;
	margin:0;
	position:relative;
}
#staffArea div.hover div.message{
	width:320px;
	height:400px;
	position:absolute;
	bottom:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background: -moz-linear-gradient(top left, rgba(0,122,220,0.4), rgba(0,233,185,0.8)); 
    background: -webkit-linear-gradient(top left, rgba(0,122,220,0.4), rgba(0,233,185,0.8)); 
    background:         linear-gradient(to bottom right, rgba(0,122,220,0.4), rgba(0,233,185,0.8)); 
	-webkit-transition:	all 0.6s ease;
	transition:		    all 0.6s ease;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}
#staffArea div.hover:hover div.message {
	opacity:1;	/* マスクを表示する */
	padding-bottom:5%;	/* ホバーで上にずらす */
}
#staffArea div.hover div.message dl{
	color:#fff;
}
#staffArea div.hover div.message dt{
    font-weight: 500;
    font-size: 1.125em; 
    padding: 0 20px 20px;
}
#staffArea div.hover div.message dd{
    padding: 0 20px;
    line-height: 2;
    font-size: 0.875em;
}

/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #staffArea{
        width: 90%;
    }
    #staffArea p.caution{
        display: block;
    }
    #staffArea ul.staff li{
        width: 48%;
        height: 100%;
        overflow: hidden;
    }
    #staffArea ul.staff li .off{
        width:100%;
        height:400px;
    }
    #staffArea div.hover {
        width:100%;
        height:400px;
    }
    #staffArea ul.staff li .off figure img,
    #staffArea ul.staff li .hover figure img{
        width:100%;
    }
    #staffArea ul.staff li .off figure,
    #staffArea ul.staff li .hover figure{
        width:100%;
    }
    #staffArea div.hover div.message{
        width:100%;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){
    #staffArea{
        width: 100%;
    }
    #staffArea p.caution{
    display: block;
    }
    #staffArea ul.staff{
        display: inherit;
        width: 90%;
        margin: 0 auto;
    }
    #staffArea ul.staff li{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #staffArea div.hover {
        width:100%;
        height:400px;
    }
    #staffArea ul.staff li .off{
        width:100%;
    }
    #staffArea ul.staff li .off figure img,
    #staffArea ul.staff li .hover figure img{
        width:100%;
    }
    #staffArea ul.staff li .off figure,
    #staffArea ul.staff li .hover figure{
        width:100%;
    }
    #staffArea div.hover div.message{
        width:100%;
    }
}

/* =======================================
    OVERVIEW 
======================================= */
#overviewArea{
    width: 1000px;
    margin: 0 auto;
}
#overviewArea dl {
	overflow: hidden;
	box-sizing: border-box;
    margin-bottom: 80px;
}
#overviewArea dt {
	float: left;
    font-weight: 500;
    width: 250px;
	padding: 22px 0;
	box-sizing: border-box;
    text-align: left;
}
#overviewArea dd {
	padding: 22px 0;
	box-sizing: border-box;
	padding-left: 250px;
    border-bottom: solid 2px;
    border-image: -moz-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image: -webkit-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image:         linear-gradient(to top right, #007ADC, #00E9B9); 
    border-image-slice: 1;
}
#overviewArea dd ul{
    
}
#overviewArea dd li{
    line-height: 1.4;
    margin-bottom: 5px;
    list-style-type: none; /*点を非表示*/
    position: relative; /*基準位置*/
    padding-left: 1em;
}
#overviewArea dd li::before {
    border-radius: 50%; /*丸くする*/
    width: 5px; /*点の幅*/
    height: 5px; /*点の高さ*/
    display: block;
    position: absolute; /*絶対配置*/
    left: 0; /*点の位置*/
    top: 0.6em; /*点の位置*/
    content: "";
    background: #009DBF; /*点の色*/
}
#overviewArea dd a {
    position: relative;
    display: inline-block;
    transition: .3s;
    color: #009DBF;
    text-decoration: none;
    line-height: 1.5;
}
#overviewArea dd a:hover {
    text-decoration: none;
}
#overviewArea dd a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 1px;
    background-color: #009DBF;
    transition: .3s;
}
#overviewArea dd a:hover::after {
    width: 100%;
}
/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #overviewArea{
        width: 100%;
    }
    #overviewArea dl{
        width: 90%;
        margin: 0 auto 40px;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){
    #overviewArea{
        width: 100%;
        margin: 0 auto;
    }
    #overviewArea dl:last-child{
        margin-bottom: 0;
    }
    #overviewArea dl {
        overflow: initial;
        box-sizing:inherit;
        margin: 0 20px 40px;
    }
    #overviewArea dt {
        float: initial;
        width: auto;
        padding: 0 0 10px;
        box-sizing: initial;
        font-weight: 700;
    }
    #overviewArea dd {
        box-sizing: initial;
        padding: 0 0 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #CCC;
        line-height: 1.5;
    }
}


/* =======================================
    ACEESS 
======================================= */
#accessArea{
    width: 1000px;
    margin: 0 auto;
}
#accessArea div.address{
    background: white;
    padding: 20px 40px 40px;
    margin-bottom: 50px;
}
#accessArea div.address dl {
	overflow: hidden;
	box-sizing: border-box;
}
#accessArea div.address dt {
	float: left;
    font-weight: 500;
    width: 220px;
	padding: 22px 0;
	box-sizing: border-box;
    text-align: left;
}
#accessArea div.address dd {
	padding: 22px 0;
	box-sizing: border-box;
	padding-left: 220px;
    border-bottom: solid 2px;
    border-image: -moz-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image: -webkit-linear-gradient(bottom left, #007ADC, #00E9B9); 
    border-image:         linear-gradient(to top right, #007ADC, #00E9B9); 
    border-image-slice: 1;
}
#accessArea div.address dd a {
    position: relative;
    display: inline-block;
    transition: .3s;
    color: #009DBF;
    text-decoration: none;
    line-height: 1.5;
}
#accessArea div.address dd a:hover {
    text-decoration: none;
}
#accessArea div.address dd a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 1px;
    background-color: #009DBF;
    transition: .3s;
}
#accessArea div.address dd a:hover::after {
    width: 100%;
}
#accessArea .map{
    margin-bottom: 0;
    position: relative;
    width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
    height: 0;
    padding-bottom: 56.25%;    /* padding-topでもOK */
    overflow: hidden;
}
#accessArea iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#accessArea p.app{
    margin:20px 10px 0;
    display: none;
}
#accessArea p.app a{
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 10px 40px;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
            transition-property: color;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
#accessArea p.app a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border: solid 1px #009DBF;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#accessArea p.app a:hover , #accessArea p.app a:focus , #accessArea p.app a:active {
    color: #009DBF;
    cursor: pointer;
}
#accessArea p.app a:hover:before , #accessArea p.app a:focus:before , #accessArea p.app a:active:before {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
}
#accessArea div.howto{
    background: white;
    padding: 40px 0 0;
}
#accessArea div.howto div.traffic{
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
}
#accessArea div.howto dl{
    width: 300px;
    min-height: 150px;
    border: solid 1px #E8E8E8;
    background-position: left center;
    background-repeat: no-repeat;
    fill: white;
    position: relative;
    padding:  20px 0 40px;
}
#accessArea div.howto dt{
    text-align: center;
    font-weight: 700;
    margin: 0 0 30px;
}
#accessArea div.howto dt span svg{
    margin-right: 20px;
    width: 40px;
    height: 30px;
    vertical-align: -9px;
}
#accessArea div.howto dl.train dt span svg{
    width: 26px;
    height: 30px;
}
#accessArea div.howto dl.bus dt span svg{
    width: 22px;
    height: 30px;
}
#accessArea div.howto dd{
    padding: 0 20px;
    font-size: 0.875em;
    line-height: 1.8;
}
#accessArea div.howto dd p{
    margin: 0 0 0 -100px;
    width: 200px;
    position: absolute;
    bottom: 20px;
    left: 50%;
}
#accessArea div.howto dd p a{
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
            transition-property: color;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
#accessArea div.howto dd p a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border: solid 1px #009DBF;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#accessArea div.howto p a:hover , #accessArea div.howto p a:focus , #accessArea div.howto p a:active {
    color: #009DBF;
    cursor: pointer;
}
#accessArea div.howto p a:hover:before , #accessArea div.howto p a:focus:before , #accessArea div.howto p a:active:before {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
}
#accessArea div.howto h3{
    margin: 50px 0 20px;
    text-align: center;
    font-weight: 700;
}
#accessArea div.howto iframe{
}
#accessArea p.parking{
    text-align: center;
    margin-bottom: 50px;
}
#accessArea ul.parking{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
}
#accessArea ul.parking li{
    margin-bottom: 20px;
    width: 45%;
}
#accessArea ul.parking li img{
    width: 100%;
}


/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #accessArea{
        width: 100%;
    }
    #accessArea div.howto{
        margin-top: 20px;
        padding-bottom: 20px;
    }
    #accessArea p.app{
        display: block;
    }
    #accessArea ul.parking{
        width: 100%;
    }
    #accessArea p.parking{
        margin: 0 20px 40px;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){
    #accessArea{
        width: 100%;
    }
    #accessArea div.address{
        width: 90%;
        margin: 0 auto 20px;
        padding: 20px 0 5px;
    }
    #accessArea div.address dl {
        overflow: initial;
        box-sizing:inherit;
        margin: 0 20px 80px;
    }
    #accessArea div.address dl:last-child{
        margin-bottom: 0;
    }
    #accessArea div.address dt {
        float: initial;
        width: auto;
        padding: 0 0 10px;
        box-sizing: initial;
        font-weight: 700;
    }
    #accessArea div.address dd {
        box-sizing: initial;
        padding: 0 0 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #CCC;
        line-height: 1.5;
    }
    #accessArea div.howto{
        margin-top: 20px;
        padding-bottom: 20px;
    }
    #accessArea div.howto div.traffic{
        display: initial;
        margin-bottom: 40px;
    }
    #accessArea p.app{
        display: block;
    }
    #accessArea div.howto dl{
        width: 90%;
        min-height: auto;
        padding-bottom: 20px;
        border: solid 1px #E8E8E8;   
        margin:0 auto 20px
    }
    #accessArea div.howto dd p{
        margin: 20px auto 0;
        width: 100%;
        position: inherit;
    }
    #accessArea ul.parking{
        width: 100%;
    }
    #accessArea p.parking{
        margin: 0 20px 40px;
    }
}

/* =======================================
    ALLIANCE
======================================= */
#allianceArea{
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0 20px;
    background: white;
}
#allianceArea ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60px;
}
#allianceArea ul:last-child{
    margin-bottom: 0;  
}
#allianceArea li{
    width: 30%;
    margin: 0 10px 20px;
    font-size: 1.25em; 
    font-weight: 500;
    line-height: 1.5;
    display: flex;
}
#allianceArea li a {
    background: -moz-linear-gradient(top left, #007ADC, #00E9B9); 
    background: -webkit-linear-gradient(top left, #007ADC, #00E9B9); 
    background:         linear-gradient(to bottom right, #007ADC, #00E9B9); 
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    align-self: stretch;
    padding: 25px 20px;
    width: 100%;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
            transition-property: color;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
}
#allianceArea li a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border: solid 1px #009DBF;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
#allianceArea li a:hover , #allianceArea li a:focus , #allianceArea li a:active {
    color: #009DBF;
    cursor: pointer;
}
#allianceArea li a:hover:before , #allianceArea li a:focus:before , #allianceArea li a:active:before {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
}

/* Tablet */
@media screen and (min-width:600px) and ( max-width:1024px) {
    #allianceArea{
        width: 90%;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    #allianceArea ul{
        margin-bottom: 40px;
    }
}

/* SmartPhone */
@media screen and (max-width: 599px){
    #allianceArea{
        width: 100%;
        padding: 20px 0 10px;
    }
    #allianceArea ul{
        display: initial;
        margin-bottom: 40px;
    }
    #allianceArea ul:last-child{
        margin-bottom: 0;  
    }
    #allianceArea li{
        width: 90%;
        margin: 0 auto 20px;
        font-size: 0.875em;
    }
    #allianceArea li a {
        padding: 20px 20px;
    }
}