/*
カンプ読み * 3/4 = 原寸
1024 / 1100 = 0.93
0.69
*/

@font-face
{
font-family: Dejima;
src: url('https://cdn.leafscape.be/dejima-mincho/dejima-mincho_web.woff2')
     format("woff2");
}

html {
    font-size: 16px;
    color: #2d88a5;
}

body {
    background-color: #fcfdef;
    width: 98vw;
    font-family: TsukuARdGothicStd-B, sans-serif;
    margin: 0 auto;
    position: relative;
}

#top-image {
    display: block;
    width: calc(98vw - 50px * 2 * 1024 / 1100);
    height: calc((98vw - 50px * 2 * 1024 / 1100) * 1072 / 1920);
    position: fixed;
    top: calc(50px * 1024 / 1100);
    left: calc(50px * 1024 / 1100);
    /*margin: 0 auto;*/
    z-index: -10;
}

#top-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 8;
}

#top-image img.active {
   z-index: 10;
   opacity: 1.0;
}

#top-image img.last-active {
   z-index: 9;
}

#vertical-copy {
    position: fixed;
    top: calc(50px * 1024 / 1100 + 30px);
    left: calc(50px * 1024 / 1100 + 30px);
    -webkit-animation: animation-hanabi 3s linear;
    animation: animation-v-copy 3s linear;
}

#vertical-copy img {
    width: auto;
    height: auto;
}

@keyframes animation-v-copy {

    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#top-dummy {
    display: block;
    position: relative;
    width: 0;
    height: calc((100vw - 50px * 2 * 1024 / 1100) * 1072 / 1920);
    margin-bottom: -60px;
    top: calc(50px * 1024 / 1100);
    left: calc(50px * 1024 / 1100);
}

#top-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(50px * 1024 / 1100);
    z-index: 1;
    background-color: #fcfdef;
}

#bottom-frame {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(50px * 1024 / 1100);
    z-index: 1;
    background-color: #fcfdef;
}

#right-frame {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: calc(50px * 1024 / 1100);
    z-index: 10;
    background-color: #fcfdef;
}

#left-frame {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: calc(50px * 1024 / 1100);
    z-index: 10;
    background-color: #fcfdef;
}

#left-frame::after {
    display: block;
    writing-mode: vertical-rl;
    content: "(C) 2017, life in kamoike";
    position: absolute;
    top: 50vh;
    left: 8px;
    font-family: TsukuARdGothicStd-E;
}

.main {
    width: 100%;
    background-color: #cedfd9;
    text-align: center;
    padding-bottom: calc(173px * 0.69);
    position: relative;
    z-index: 0;
}

.main img {
    width: calc(100% - 50px * 2 * 1024 / 1100);
    height: auto;
    margin: 0 auto;
}

.main-doc {
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 1024px){
    .main-doc {
        width: 90%;
        margin: 0 auto;
    }
}

p {
    margin: auto;
    max-width: 800px;
    letter-spacing: 1px;
}

.wide p {
    max-width: none;
}

.flex-container.view {
    margin-bottom: 50px;
}

a {
    text-decoration: none;
    color: inherit;
}

h1 {
    font-size: calc(1rem * 29.4 / 20);
    color: #2d88a5;
    margin: 0;
    line-height: 1.0rem;
}

h1 img {
    margin: 50px 0 10px;
}

h2 {
    width: 80%;
    font-family: TsukuARdGothicStd-B;
    font-size: calc(1rem * 32 / 20);
    font-style: normal;
    color: #d2a34b;
    background-color: #cedfd9;
    margin: 46px auto;
}

h2 span.underline {
    border-bottom: dotted 2px #d2a34b;
}

.font-black {
    color: black !important;
}

.align-right {
    text-align: right !important;
}

.margin-2rem-topbottom {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

#flow {
    width: 100%;
    background: none;
    position: relative;
    top: -10rem;
    /*display: flex;*/
    /*align-items: center;*/
    margin: 0 1rem;
}

#flow img {
    width: 80px;
    height: auto;
    margin: 5rem 0 0.5rem 0;
}

#flow h2 {
    width: 13rem;
    background-color: #cedfd9;
    margin: 0 auto;
    padding: 0;
    line-height: 0.2rem;
    z-index: 2;
}

#flow hr {
    width: 90%;
    position: relative;
    top: -0.1rem;
    border:none;
    border-top:2px dotted #2d88a5;
    /*color:#fff;*/
    /*background-color:#cedfd9;*/
    height:2px;
    margin: 0 2rem;
    padding: 0;
    z-index: -1;
}

.flow-list {
    width: calc(973px * 0.69);
    text-align: center;
    vertical-align: middle;
    counter-reset: number;
    line-height: 2rem;
    /*font-size: calc(1rem * 10 / 16);*/
    display: flex;
    align-items: center;
    margin: 2rem auto 0 auto;
    position: relative;
}

.flow-list .todo {
    text-align: center;
    width: 9rem;
    border: 1px solid #2d88a5;
}

.arrow-down {
    width: 27px !important;
    height: auto !important;
    position: absolute;
    left: 5rem;
    top: -1.5rem;
}

.flow-list .number {
    color: white;
    background-color: #2d88a5;
    padding: 0 0.5rem;
    border: #2d88a5 1px solid;
}

.flow-list .comment {
    margin-left: 2rem;
    line-height: 1.2rem;
    text-align: left;
}

.flow-list .center {
    text-align: center;
}

.anchors {
    width: calc(((87px * 4 + 40px * 3) * 2 + 310px)* 0.69);
    background: transparent;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}

.anchors h2 img {
    position: relative;
    width: auto;
    height: auto;
    /*margin: 5rem 0 0.5rem 0;*/
}

.anchors h2 {
    width: calc(320px * 0.69);
    background-color: transparent;
    margin: 0 20px;
}

.margin-information {
    margin-top: 46px;
    margin-bottom: 0;
}

.margin-floor {
    margin-top: calc(173px * 0.69);
    margin-bottom: 46px;
}

.dashed-line {
    width: calc((87px * 4 + 40px * 3) * 0.69);
    height: 0;
    border-top: dashed #2d88a5 2px;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .anchors {
        width: auto;
    }

    .dashed-line {
        width: calc((100% - 310px * 0.69 - 20px * 2) / 2 - 20px);
    }
}

.anchors p {
    margin-top: 2rem;
}

.anchors img.mobile-omit {
    width: calc(773px * 0.69);
    position: absolute;
    left: calc(50% - 773px * 0.45 * 0.69);
    top: calc(-180px);
    z-index: -1;
}

#kamo-face-right {
    width: 100%;
    /*margin: auto;*/
    background: none;
    position: absolute;
    top: calc(100% / 3);
    display: flex;
    align-items: center;
    /*width: 70px;*/
}

#kamo-face-right img {
    width: 70px;
    height: auto;
    margin: 0 0.5rem;
}

#kamo-face-right h2 {
    width: auto;
    margin: 0 0.5rem;
}

.subtitle {
    font-size: calc(1rem * 16 / 20);
    color: #d2a34b;
}

#header-with-logo {
    position: relative;
    padding-top: 40px;
    z-index: 4;
}

#top-logo {
    display: block;
    width: 104px;
    height: 102px;
    margin: 0;
    position: absolute;
    top: 0;
    left: calc(50% - 52px);
    z-index: 1;
}

#mask-half-logo {
    display: block;
    width: 100%;
    height: 51px;
    margin: 0;
    position: absolute;
    top: 51px;
    background-color: #fcfdef;
    z-index: 0;
}

.header-menu {
    position:-webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #fcfdef;
    margin-top: 60px;
    padding-top: 10px;
    /*padding-bottom: -1.5rem;*/
    z-index: 3;
}

#place-holder01 {
    display: flex;
    width: calc(1152px * 0.69);
    margin: 0 auto;
    /*position: absolute;*/
    /*top: 1.0rem;*/
    z-index: 1;
}

/*@media screen and (min-width: 640px) and (max-width: 800px) {*/
    /*#place-holder01 p {*/
        /*font-size: calc(1rem * 10 / 16);*/
    /*}*/
/*}*/

.header-menu-item {
    width: calc(220px * 0.69);
    text-align: center;
    vertical-align: middle;
    margin: 2rem auto 0 auto;
}

.header-menu-item p {
    text-align: center;
}

.header-menu-item a {
    display: inline-block;
}

.header-menu-item:hover {
    color: #a2ccd5;
}

.header-menu-name {
    text-align: center;
    vertical-align: middle;
    margin: 0 auto -4rem auto;
    z-index: 2;
}

.header-menu-name a {
    display: inline-block;
}

.header-menu-name img {
    display: block;
    width: calc(189px * 0.69);
}

.header-menu-item .mobile-omit {
    width: calc(189px * 0.69);
}

.mobile-omit:hover {
    background-color: transparent;
}

img.mobile-omit {
}

.contents {
    position: relative;
    width: calc(1227px *0.69);
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

@media screen and (max-width: 1024px){
    .contents {
        width: 90%;
    }
}

.contents p {
    text-align: left;
}

.contents img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}

.h1-1st {
    background-color: #fcfdef;
}

h1.h1-1st {
    padding-bottom: 0;
    padding-top: 60px;
}

.h1-1st img {
	width: auto;
	height: auto;
	margin-bottom: 10px;
}

img.h1-1st-border {
    width: 100%;
    margin: 0 auto;
}

.h1-2nd {
    background-color: transparent;
}

.h1-2nd img {
    width: auto;
    height: auto;
}

.button {
    display: flex;
    margin: 46px auto;
}

.x5 {
    width: calc(1227px * 0.69);
    margin: auto;
}

.x3 {
    width: calc(800px * 0.69);
}

.x1 {
    width: calc(213px * 0.69);
    margin-bottom: 0;
}

.button p {
    width: 160px;
    color: #fcfdef;
    border-radius: 10px;
    padding: 0.5rem 0;
    margin: 1rem 10px;
    background-color: #2d88a5;
    text-align: center;
}

.button p:hover {
    background-color: cadetblue;
}

@media screen and (max-width: 1024px) {
    .x5 {
        width: calc(100%);
        margin: 0 1rem;
    }

    .button .x5 p {
        margin: 1rem 5px;
    }
}

/*@media screen and (min-width: 640px) and (max-width: 900px) {*/
    /*.button {*/
        /*width: calc(30% * 3);*/
        /*display: flex;*/
        /*margin: auto;*/
    /*}*/

    /*.button p {*/
        /*font-size: calc(1rem * 10 / 16);*/
        /*width: 30%;*/
        /*margin: 0.5rem auto;*/
    /*}*/
/*}*/

.footer {
    width: 100%;
    font-size: calc(1rem * 10 / 16);
    text-align: center;
    background-color: #fcfdef;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}

.footer-image {
    border: 0;
    margin: 0;
    background-color: #cedfd9;
    width: 100%;
}

.footer-image img{
    display: block;
    margin: 0 auto;
    border: 0;
    background-color: #cedfd9;
    width: 100%;
}

.footer-items {
    width: calc(766px * 0.69);
    display: flex;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    padding-top: 46px;
}

.footer-item {
    vertical-align: middle;
    text-align: center;
    margin: 0 0.5rem;
}

.kamo-line {
    width: 100%;
    height: calc(253px * 0.69);
    margin: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.kamo-line img {
    display: block;
    width: calc(1226px * 0.69);
    height: auto;
    margin: auto;
}

img.big-kamo {
    width: calc(773px * 0.69);
    position: absolute;
    left: calc(50% - 773px * 0.45 * 0.69);
    top: -160px;
    z-index: -1;
}

.tel-fax-address {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    margin: 0 auto 0 0;
    text-align: left;
}

.access-box {
    width: calc(1226px * 0.69);
    text-align: left;
    margin: 46px auto 0;
}

@media screen and (max-width: 1024px) {
    .access-box {
        width: 100%;
    }
}

.access-box img {
    display: block;
    width: 100%;
    margin: 23px auto;
}

.access-box p {
    text-align: left;
    color: #d2a34b;
    margin: 0 0 0 calc((87px + 40px) * 0.69);
}

.access-box ul {
    list-style: disc;
    text-align: left;
    color: #2d88a5;
    margin: 0 0 0 calc((87px + 40px) * 0.69);
    padding-left: 1rem;
}

.condition-list {
    list-style: disc;
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    color: #2d88a5;
}

.flex-container {
    display: flex;
    align-items: center;
}

.view {
    width: 100%;
}

.view img {
    width: 50%;
}

.gallery {
    width: calc(466px * 0.69 * 2 + 1rem * 2);
    margin: 0 auto;
}

.gallery-box {
    width: calc(466px * 0.69);
    height: calc(442px * 0.69);
    margin: 1rem;
    text-align: left;
}

.gallery-box .img-box {
    height: calc(262px * 0.69);
    width: auto;
    overflow: hidden;
    position: relative;
}

.gallery-box h3 {
    margin-left: 1rem;
    margin-top: 0;
    color: #796a56;
}

.gallery-box .h3-sports::before {
    content: url("images/sports.png");
    width: calc(47px * 0.69);
    height: auto;
    position: relative;
    bottom: -0.8rem;
    right: 0.5rem;
}

.gallery-box .h3-nature::before {
    content: url("images/nature.png");
    width: calc(47px * 0.69);
    height: auto;
    position: relative;
    bottom: -0.8rem;
    right: 0.5rem;
}

.gallery-box .h3-culture::before {
    content: url("images/culture.png");
    width: calc(47px * 0.69);
    height: auto;
    position: relative;
    bottom: -0.8rem;
    right: 0.5rem;
}

.gallery-box .h3-art::before {
    content: url("images/art.png");
    width: calc(47px * 0.69);
    height: auto;
    position: relative;
    bottom: -0.8rem;
    right: 0.5rem;
}

.gallery-box p {
    font-size: smaller;
}

.spacer-left {
    width: 0;
    margin-left: auto;
}

.spacer-right {
    width: 0;
    margin-right: auto;
}

.spacer-vertical {
    width: 1rem;
    margin: 5rem;
}

.filler-left {
    width: 1rem;
    padding-left: auto;
}

.filler-right {
    width: 1rem;
    padding-right: auto;
}

a.services {
    background: url("images/services.png") no-repeat ;
}

a.flow {
    background: url("images/flow.png") no-repeat ;
}

a.fee{
    background: url("images/fee.png") no-repeat ;
}

a.condition {
    background: url("images/condition.png") no-repeat ;
}

a.link-box {
    position: relative;
    width: calc(207px * 0.69);
    height: calc(256px * 0.69);
    margin: 1rem 1rem calc((173px - 50px) * 0.69);
    background-size: contain !important;
}

a.services:hover {
    background: url("images/services-hover.png") no-repeat;
}

a.flow:hover {
    background: url("images/flow-hover.png") no-repeat ;
}

a.fee:hover{
    background: url("images/fee-hover.png") no-repeat ;
}

a.condition:hover {
    background: url("images/condition-hover.png") no-repeat ;
}

a.link-box:hover {
    color: #a2ccd5;
    background-size: contain !important;
}

.link-box p {
    position: absolute;
    width: calc(200px * 0.69);
    bottom: 0;
    text-align: center;
    vertical-align: bottom;
}

#anchor-services {
    margin-bottom: 46px;
}

.with-anchor {
    position: relative;
}

.with-anchor::after {
    content: url("images/anchor.png");
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.with-anchor:hover {
    background-color: white;
}

.service-box {
    width: 445px;
    height: 200px;
    margin: 0.5rem 20px;
    padding: 30px 40px;
    border-radius: 10px;
    background-color: #fcfdef;
}

.service-box h3 {
    display: block;
    font-size: calc(1rem * 23 / 16);
    color: #2d88a5;
    margin: 10px 0 30px 0;
}

.service-box p {
    display: block;
    margin: 0;
    font-size: calc(1rem * 14 / 16);
}

.service-box img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
}

@media screen and (max-width: 1200px) {
    .service-box {
        width: 300px;
        height: 240px;
    }
}

@media screen and (max-width: 1024px) {
    .service-box {
        width: 250px;
        height: 250px;
    }
}

#call-box {
    width: calc(973px * 0.69);
    display: flex;
    margin: 2rem auto;
    border: solid 1px #2d88a5;
    border-radius: 10px;
    background-color: #fcfdef;
}

#call-box .column-left {
    width: 70%;
}

#call-box .column-right {
    width: 30%;
}

#call-box .button {
    margin: 0;
}

#call-box .button p {
    width: 150px;
}
#call-box p {
    margin: 1rem;
    text-align: left;
}

.with-kamo-left {
    width: 218px;
    height: 180px;
    margin: auto;
    background: url("images/kamo-face-left.png") no-repeat;
    position: relative;
}

.with-kamo-left h2 {
    background: none;
    padding-top: 4rem;
}

.with-kamo-left img {
    position: absolute;
    top: -1rem;
    right: -60%;
}

#all-floors {
    width: 100%;
    display: flex;
    align-items: stretch;
}

#all-floors .column-left {
    text-align: center;
    width: 50%;
    font-size: calc(1rem * 10 / 16);
}

#all-floors p {
    margin: 0;
    padding: 0;
}

#all-floors p.left-upper {
    margin: 2rem 1rem;
    text-align: center;
    color: black;
}

#all-floors .left-lower p {
    text-align: right;
    color: #2d88a5;
    font-size: calc(1rem * 8 / 16);
}

#all-floors .column-right {
    width: 50%;
    margin: 0 1rem;
}

#all-floors .column-right img {
    height: 100%;
    width: auto;
}

.floors p {
    width: 10rem;
    background-color: #caa66b;
}

.floors p:hover {
    background-color: darkorange;
}

.floor-details img {
    margin-top: 46px;
    margin-bottom: 0;
}

.floor-details p {
    border-left: 2px #cfa23c solid;
    padding-left: 1rem;
    text-align: left;
}

.floor-details .flex-container {
    text-align: left;
    width: calc(973px * 0.69);
    margin: 0 auto 0 auto;
    align-items: flex-start;
}

.floor-details h3 {
    color: #cfa23c;
    margin: 1rem;
}

.floor-details .flex-container p {
    border-left: 2px #cfa23c solid;
    padding-left: 1rem;
}

.floor-details .flex-container ul {
    border-left: 2px #cfa23c solid;
    padding-left: 2rem;
}

.floor-details .column-left {
    width: 60%;
    margin-right: calc(167px * 0.69);
}

.floor-details .column-right {
    width: 40%;
}

img.kamo-back {
    position: absolute;
    top: -2rem;
    left: calc(50% - 12rem);
    width: 581px;
}

img.narrow-image {
    width: 70%;
    height: auto;
}

.build-detail {
    margin: 46px 0;
}

.build-detail p {
    text-align: center;
}

#anchor-fee h2 {
    margin-bottom: 0;
    width: 16rem;
}

.fee-list {
    text-align: left;
    margin: auto;
    list-style: none;
    max-width: 750px;
}

.fee-list li {
    margin-top: 30px;
    margin-left: -1rem;
}

.fee-list li::before {
    position: relative;
    left: -0.5rem;
    content: "*";
}

p.calc {
    font-size: calc(1rem * 14 / 16);
    max-width: none;
    text-align: center;
}

span.button {
    display: inline-block;
    width: calc(173px * 0.69);
    color: #fcfdef;
    border-radius: 10px;
    padding: 0.5rem 0;
    margin: 1rem;
    background-color: #2d88a5;
    text-align: center;
}

span.round-box {
    display: inline-block;
    width: 160px;
    color: #2d88a5;
    border-radius: 10px;
    padding: 0.5rem 0;
    margin: 1rem;
    border: 2px solid #2d88a5;
    text-align: center;
    vertical-align: middle;
}

.fee-table {
    border-collapse: collapse;
    text-align: right;
    color: #3e3a39;
    margin: 46px auto 0;
    width: 1000px;
}

@media screen and (max-width: 1024px) {
    .fee-table {
        width: 90%;
        font-size: smaller;
    }
}

.fee-table thead {
    text-align: center;
    vertical-align: middle;
    background-color: #2d88a5;
    width: calc(1227px * 0.69);
}

.fee-table thead td {
    color: #f8f6e8;
    margin: 0;
    border: 1px #fcfdef dotted;
    background-color: #2d88a5;
}

.fee-table tfoot td {
    margin: 0;
    border: none;
    text-align: left;
    color: #2d88a5;
    background-color: #cedfd9;
}

.fee-table td {
    margin: 0;
    border: 1px #2d88a5 dotted;
    padding: 0.5rem;
    width: calc(200px * 0.69);
    background-color: #fcfdef;
}

.fee-table td.head {
    text-align: center;
    width: auto;
}

.fee-table tr:nth-child(odd) {
    color: #2d88a5;
    border-left: none;
    border-right: none;
}

.fee-table tr:nth-child(even) {
    color: #3e3a39;
    border-left: none;
    border-right: none;
}

.fee-table td.r17 {
    text-align: center;
    color: #3e3a39;
}

#floor-map {
    position: relative;
    z-index: 0;
    margin: calc(173px * 0.69) 0 0 0;
}

#image-map-container a {
    display: block;
}

#image-map-container a:hover::before {
    content: "";
    padding: 32px 32px;
    position: absolute;
    top: -8px;
    border: 2px #a2ccd5 solid;
    right: -4px;
}

#image-map-container {
    position: relative;
}

img#image-map {
    width: 90% !important;
}

#image-coffee {
    width: calc(89px * 0.69);
    height: auto;
    position: absolute;
    top: calc(100% * 308 / 1024 * 0.96);
    left: calc(100% * 910 / 1024);
    z-index: 1;
}

#image-bath {
    width: calc(67px * 0.69);
    height: auto;
    position: absolute;
    z-index: 1;
    bottom: calc(100% * 264 / 1024 * 0.96);
    left: calc(100% * 416 / 1024);
}

#floor-map img {
    width: 100%;
    height: auto;
}

#floor-map .flex-container {
    margin-top: 46px;
    margin-bottom: 46px;
}

#floor-map a.link-box {
    margin: 1rem 1rem;
}

a.floor-restaurant {
    background: url("images/icon-restaurant.png") no-repeat;
}

a.floor-restaurant:hover {
    background: url("images/icon-restaurant-hover.png") no-repeat;
}

a.floor-pubbath {
    background: url("images/icon-pubbath.png") no-repeat;
}

a.floor-pubbath:hover {
    background: url("images/icon-pubbath-hover.png") no-repeat;
}

a.floor-room {
    background: url("images/icon-room.png") no-repeat;
}

a.floor-room:hover {
    background: url("images/icon-room-hover.png") no-repeat;
}

#map-holder {
    position: relative;
    width: 920px;
    height: 784px;
    margin: calc(173px * 0.69) auto 46px auto;
}

img.map-base {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 0;
}

img.map-layer-hospital, img.map-layer-shop, img.map-layer-restaurant {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 1;
}

#switch-hospital:checked ~ img.map-layer-hospital {
    display: none;
}

#switch-shop:checked ~ img.map-layer-shop {
    display: none;
}

#switch-restaurant:checked ~ img.map-layer-restaurant {
    display: none;
}

img.map-button-hospital {
    display: block;
    width: calc(151px * 0.69);
    height: auto;
    position: absolute;
    z-index: 2;
    top: 83%;
    left: 39%
}

img.map-button-shop {
    display: block;
    width: calc(151px * 0.69);
    height: auto;
    position: absolute;
    z-index: 2;
    top: 83%;
    right: 0;
}

img.map-button-restaurant {
    display: block;
    width: calc(151px * 0.69);
    height: auto;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
}

@media screen and (max-width: 1024px) {
    #map-holder {
        width: 80vw;
        height: calc(80vw * 718 / (1227 * 0.69));
        margin-left: auto;
        margin-right: auto;
    }

    img.map-button-hospital {
        width: calc(100% / 1227 * 151);
        height: auto;
    }

    img.map-button-shop {
        width: calc(100% / 1227 * 151);
        height: auto;
    }

    img.map-button-restaurant {
        width: calc(100% / 1227 * 151);
        height: auto;
    }
}

#spots {
    width: calc(((87px * 4 + 40px * 3) * 2 + 310px)* 0.69);
    background: transparent;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 1024px) {
    #spots {
        width: 100%;
    }
}

#spots h2 {
    position: relative;
    padding-top: 46px;
    background-color: transparent;
}

#spots h2::before {
    content: url("images/kamo-face-right.png");
    position: relative;
    bottom: -24px;
}

#spots img {
    width: auto;
    height: auto;
}

#spots img.mobile-omit {
    width: calc(773px * 0.69);
    position: absolute;
    left: calc(50% - 773px * 0.45 * 0.69);
    top: -130px;
    z-index: -1;
}

#about-detail {
    width: calc(1227px * 0.69);
    text-align: left;
    margin: 0 auto;
}

#about-detail p {
    max-width: none;
}

#about-detail .column-left {
    width: calc(1100px * 0.69);
}

#about-detail .column-right {
    width: 50%;
    margin-left: 50%;
}

#anchor-condition {
    position: relative;
}

#anchor-condition h2 {
    background-color: transparent;
}

#anchor-condition img.mobile-omit {
    width: calc(289px * 0.69);
    position: absolute;
    left: 520px;
    top: -80px;
    z-index: -1;
}

#anchor-condition ul {
    width: calc(836px * 0.69);
    margin: 0 auto;
}

#table-corporate {
    width: calc(976px * 0.69);
    border-collapse: collapse;
    text-align: left;
    background-color: #fcfdef;
    margin: 0 auto;
}

#table-corporate td {
    border: #2d88a5 1px solid;
    padding: 1.5rem 1rem;
}

#table-corporate td.head {
    background-color: #cedfd9;
}

.margin-ir {
    margin-top: calc(173px * 0.69);
    margin-bottom: 20px;
}

.margin-ir h2 {
    width: 400px;
}

.nav-unshown {
    display: none;
}

.switcher {
    display: none;
}

#google-map {
    display: block;
    margin: 0 auto;
}

#anchor-ir h2 {
    width: 40rem;
}

/* 先頭へ戻る */
.backToTop {
	font-size: 90%;
	margin: 10px 5px 5px 0;
	text-align: right;
}

.backToTop a:link    { text-decoration:none; }
.backToTop a:visited { text-decoration:none; }
.backToTop a:hover   { text-decoration:underline;}
.backToTop a:active  { text-decoration:none; }

#scrolltop {
position: fixed;
bottom: 20px;
right: 20px;
}
}