@charset "utf-8";
/* レイアウトのためのCSS */

body{
    font-family: 'Sawarabi Gothic', sans-serif;
    color: #000;
    font-size:1rem;
    line-height:1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; 
    word-wrap: break-word;
}
    
_:-ms-lang(x)::-ms-backdrop, body{/*IE11用ハック*/
    overflow-x: hidden;
}
    
@media screen and (max-width:768px) {
    body{
    font-size:0.8rem;
    }
}
    
*{box-sizing: border-box;}
    
.fixed {
    height: 100vh;
}

@media screen and (max-width: 540px){
.fixed {
    padding: 0 60px;
}
}

/* heading */
.heading-block{
    display: flex;
    margin: 0 0 0 0;
    justify-content: center;
    background:rgb(255, 255, 255);
    color:rgb(0, 0, 0)
}

#menu h2,#about h2,#contact h2,#gallery h2{
    letter-spacing:0.2em;
    font-size:2rem;
    margin:25px 0;
}

/* menu */

#menu{
    position:relative;
    margin: 0 0 0 0;
}

#menu section{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

#menu section:nth-of-type(2n){
    flex-direction:row-reverse;
}

#menu .menu-img{
    width:50%;
    height:40vh;
}

#menu .menu-img-detail{
    height:40vh;
}

#menu .menu-pano-detail{
    width: 100%;
    height:40vh;
    border: 0;
    
}

#menu .menu-video-detail{
    width: 100%;
    height:40vh;
}


#menu .menu-content{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align: center;
}

/*#menu section:nth-of-type(1) .menu-img-detail{
    background:url(../img/bg002.jpg) no-repeat center;
    background-size:cover;
}*/

#menu section:nth-of-type(2) .menu-img-detail{
    background:url(../img/bg003.jpg) no-repeat center;
    background-size:cover;
}

/*#menu section:nth-of-type(3) .menu-img-detail{
    background:url(../img/s003.jpg) no-repeat center;
    background-size:cover;
}*/

#menu .menu-content h3{
    font-size:1.2rem;
    margin:0 0 0 1em;
}

#menu .menu-content p{
    height:13em;
    line-height:2.5;
}

@media screen and (max-width:768px) {
#menu .menu-bg{
    background-attachment: inherit;
    }
}

@media screen and (max-width:560px) {
#menu .menu-img,
#menu .menu-content{
    width:100%;
    margin: 0 0 50px 0;
}
}

/* about */

#about .heading-block{
    margin: 0 0 30vh 0;
}

#about .about-list{
    width:50vw;
    margin: 0 auto;
}
    
#about .about-list li{
    border-bottom: 2px solid #000;
    margin:0 0 15px 0;
    padding: 0 0 15px 0;
}
    
#about .about-list dl{
    display: flex;
    justify-content: space-between;
}
    
#about .about-list dt{
    width:30vw;
    padding: 0 0 0 2vw;
    white-space: nowrap;
}
    
#about .about-list dd{
    width:68vw;
}
    
    
@media screen and (max-width:768px) {
    #about{
    padding: 0vh 0 0 0;
    }
    
    #about .about-list{
    width:70vw;
    }
}
    
    /* contact */
    
#contact .fixed{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contact .heading-block{
    margin: 0 0 5vh 0;
}

#contact .tel,
#contact .mail{
    font-size: 2rem; 
    margin: 0 0 1vh 0;
}
    
#contact .mail{
    margin:0 0 6vh 0;
}
    
@media screen and (max-width:768px) {
    #contact .tel,
    #contact .mail{
    font-size: 1.3rem;
    }
}



/*========= 背景色の変化CSS ===============*/

#container {
    animation: bgchange 40s ease infinite;/*変化の時間を変更したい場合は40sの部分を好きな時間に変更*/
    }
    
    @keyframes bgchange{
    0%   {background:white;}/*変化させたい色*/
    10%  {background:#e7ffd3;}/*変化させたい色*/
    20%  {background:#ffc8c8;}/*変化させたい色*/
    30%  {background:#c7e4e9;}/*変化させたい色*/
    40%  {background:#e4ffe8;}/*変化させたい色*/
    50%  {background:#f8e5b2;}/*変化させたい色*/
    60% {background:#e4ffe8;}/*変化させたい色*/
    70% {background:#cbccff;}/*変化させたい色*/
    80% {background:#d5fff1;}/*変化させたい色*/
    90% {background:#f7c7f3;}/*変化させたい色*/
    100% {background:white;}/*変化させたい色*/
    }


a{
    text-decoration: none;
}