@charset "UTF-8";

/* ******************  Tablet  *************** */
@media (min-width:600px) and (max-width:959px){



/* ******************  header  *************** */
header #top img.title {
    margin: 20px 0 0 55px;
}

header #bottom {
    width: 100%;
    max-width: 100%;
    height: 10px;
    display: block;
    padding: 0;
    margin: 0 auto;
    background: url(../images/img_home_main_visual_tb.png);
    background-size: cover;
}

/* ******************  container  *************** */
#main_visual {
    width: 100%;
    max-width: 100%;
    height: 190px;
    display: block;
    padding: 0px 0 0;
    margin: 70px 0 0;
    background: unset;
}

.main_visual_inner {
    margin: 0 auto;
    padding:0;
    width: 100%;
    max-height: 200px;
    height: auto;
    max-width: 100%;
    text-align: center;
    position: relative;
    line-height: 1;
}

.main_visual_inner img.tb {
    display: block;
}

.main_visual_inner img.switch {
    display: none;
}

#container {
    margin: 0 auto;
    padding: 30px 20px 10px 20px;
    width:calc(100% - 40px);
    max-width: 100%;
    text-align: center;
    position: relative;
    display: flex;
}

#navigation {
    margin: 0;
    padding: 0;
    width: 180px;
    position: sticky;
    position: -webkit-sticky;
    top: 100px;
    text-align: left;
    height: 340px;
}

#navigation li a {
    width: calc(180px - 41px);
    display: block;
    line-height: 1;
    color: #222;
    font-size: 14px;
    height: 20px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 10px 20px 5px;
    position: relative;
}

#navigation li a.selected {
    width: calc(180px - 41px);
}

body#home dt.box_list {
    width: 140px;
}

body#home dd.box_list {
    width: calc(100% - 145px);
}

#wrapper {
    margin: 0 0 0 30px;
    padding: 0 0 10px 0;
    width: calc(100% - 208px);
    text-align: left;
}

body#home div.box_address {
    width: calc(100% - 30px);
    padding: 30px 0 0 30px;
}

h2.home {
    font-size: 23px;
}

body#home dd.box_address p {
    -webkit-line-clamp: 8;
}

body#home dd.box_address p.right a {
    font-size: 14px;
}



/* ******************  container  *************** */
body#address #container, body#underlayer #container {
    padding: 80px 20px 10px 20px;
    top: 0;
}




/* underlayer */
/* ******************  address  *************** */
body#address section {
    margin: 0px 0 60px 0;
}

body#address div.box_address {
    width: calc(100% - 30px);
    padding: 30px 0 0 30px;
}

body#address h2.address {
    font-size: 23px;
}

body#address dl.box_address {
    width: 100%;
    margin: 0px 0 0px 0;
}

body#address dt.box_address {
    width: 100%;
    margin: 0 0 20px 0;
}

body#address dt.box_address img {
    width: 140px;
    margin: 0 20px 0 0;
    display: inline-block;
}

body#address dt.box_address p {
    width: calc(100% - 160px);
    display: inline-block;
    margin: 0;
}

body#address dd.box_address {
    width: 100%;
    margin: 0;
    display: inline-block;
}



/* ******************  underlayer  *************** */
body#underlayer dt.underlayer_top {
    width: 45px;
    display: inline-block;
    vertical-align: top;
}

body#underlayer dd.underlayer_top {
    margin: 0;
    display: inline-block;
    width: calc(100% - 45px);
    text-align: right;
    float: right;
}

body#underlayer ul.underlayer_top {
    padding: 0;
    width: 100%;
}

body#underlayer ul.underlayer_top li {
    max-height: 30px;
    display: inline-block;
    margin-left:7px;
}

body#underlayer ul.underlayer_top li:first-child {
    margin-left:0;
}

body#underlayer ul.underlayer_top li.overview a, 
body#underlayer ul.underlayer_top li.text a {
    width: auto;
    vertical-align: middle;
}

body#underlayer ul.underlayer_top li.abstract a, 
body#underlayer ul.underlayer_top li.movie a {
    width: 100%;
    vertical-align: middle;
}



body#underlayer ul.underlayer_top li.selected {
    vertical-align: middle;
}


body#underlayer ul.underlayer_top li a br {
    display: none;
}

body#underlayer ul.underlayer_top li a:hover, body#underlayer ul.underlayer_top li a:active {
    background: #fff;
    color: #222222;
    border: 1px solid #eeeeee;
}



footer {
    height: 140px;
}

#footer {
    padding: 45px 0;
    width: 100%;
}

#copyright {
    float: none;
    margin: 0px 0 0 0px;
    padding: 0;
    text-align: center;
    color: #707070;
    font-size: 12px;
    position: absolute;
    bottom: 40px;
    width: 100%;
}

#footer_btn {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

#footer_btn ul {
    margin: 0;
    float: none;
}

}

@media (max-width:615px){
header #top img.logo {
    margin: 10px 10px 0 0;
    width: 45px;
}

header #top img.title {
    margin: 20px auto 0 0px;
    width: auto;
    max-width: 230px;
    min-width: 150px;
    display: inline-block;
    vertical-align: top;
}

}


@media (max-width:740px){
body#underlayer dl.underlayer_top {
    margin: 0px 0 30px 0;
    padding: 0 0 10px;
}

body#underlayer ul.underlayer_top li {
    max-height: 52px;
    display: inline-block;
    margin-left: 7px;
    height: 52px;
    width: 58px;
    min-width: 60px;
}

body#underlayer ul.underlayer_top li:first-child {
    margin-left:0;
}

body#underlayer ul.underlayer_top li.overview a, 
body#underlayer ul.underlayer_top li.text a {
    width: 58px;
    height: 43px;
    vertical-align: top;
    font-size: 14px;
    max-height: 45px;
    padding: 7px 0 0 0;
    min-height: 43px;
    cursor: pointer;
    outline: none;
    line-height: 1.3;
}

body#underlayer ul.underlayer_top li.abstract a, 
body#underlayer ul.underlayer_top li.movie a {
    width: 58px;
    height: 35px;
    vertical-align: top;
    font-size: 14px;
    max-height: 36px;
    padding: 15px 0 0 0;
    min-height: 35px;
}

body#underlayer ul.underlayer_top li.selected {
    width: 60px;
    height: 35px;
    vertical-align: top;
    font-size: 14px;
    max-height: 38px;
    padding: 15px 0 0 0;
    min-height: 35px;
    min-width: 58px;
}

body#underlayer ul.underlayer_top li a br {
    display: none;
}

}