@charset "UTF-8";
/* CSS Document */
html,body {
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
color:#1a1a1a;
width: 100%;
height: 100%;
}
h3 {
position: relative;
display: inline-block;
padding: 0 55px;
}

h3:before, h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}
h3:before {
  left:0;
}
h3:after {
  right: 0;
}
h4 {
border-bottom: solid 1px black;
text-align: center;
margin:0 auto 2rem auto;
}
h5 {
text-align:center;
background: #1a1a1a;/*背景色*/
padding: 0.5em;
color:#fff;
}
.caption-img {
height:3em;
}
rt {
font-size: 30%;
}
.contact_fixed {
background:#00B900;
}
.contact_fixed:hover {
background-color:#3BFF3B;
text-decoration: none;
}
.contact_fixed span {
color:#fff;
margin:0;
padding:0;
}
.contact_fixed img {
width:20px;
height:auto;
vertical-align: bottom;
margin-bottom:0.25rem;
}
/* Firstview */
#Firstview {
position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
height:100vh;
}
.firstlogo {
z-index: 1000;
position: absolute;
top:50%;
left:50%;
-webkit-transform : translate(-50%,-50%);
 transform : translate(-50%,-50%);
}
.firstlogo img {
width:100%;
}
#background_video {
position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
#video_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../images/video_cover.jpg') no-repeat;
    background-size: cover;
    background-position: center;
}
#video_controls {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

#play img {
    width: 100px;
}
#pause img {
    width: 90px;
}
#pause {
    display: none;
}
#overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url("../images/ami.png");
	background-size: cover;
}

/* About */
#About {
width: 100%;
margin-top:100vh;
}
.aboutimg {
padding:0;
}
.abouttext {
background: #FFF;
padding: 2rem;
display:flex;
align-items: center;
}
/* saigo */
#saigo {
padding:5rem 0;
border-top: dotted 1px black;
}
/* Recommended */
#Recommended {
width:100%;
background: #f0f0f0;
padding:5% 0 0 0;
text-align: center;
}
.spotlightbox {
width:100%;
padding: 0;
margin:0;
display: flex;
flex-wrap: wrap;
list-style: none;
}
.spotthumb {
padding:0;
}
/* Villa */
#Villa {
width:100%;
height:auto;
display:flex;
align-items: center;
}
.villa_details {
text-align: center;
}
/* Access */
#Access {
width:100%;
padding:5rem 0;
height: auto;
position: relative;
text-align: center;
}
.accesstitle {
width:100%;
height:auto;
min-height:50vh;
margin:0;
padding:0;
background: url("../images/accesstitle.jpg") center;
background-size: cover;
text-align: center;
display: flex;
align-items: center;
color:#fff;
}
.accesstitle div {
 margin:0 auto;
}
.access_route {
width:100%;
}
.access_route img {
width:100%;
}
.access_details {
text-align: center;
border-top: dotted 1px black;
padding-top:3rem;
}
.btn-flat-border {
  display: inline-block;
  padding: 0.8em 1.5em;
  text-decoration: none!important;
  color: white;
  background: #111;
  transition: .3s;
}

.btn-flat-border:hover {
background: #FFF;
border: solid 1px #111;
color: #111;
}
/* Address */
#Address {
width:100%;
padding:5rem 0;
background: #f0f0f0;
display: flex;
align-items: center;
}
.addressimg img {
width:100%;
}
/* Link */
#Link {
width:100%;
height:auto;
min-height:30vh;
display: flex;
align-items: center;
text-align: center;
}
#Link a{
color: #1a1a1a;
}
#Link a:hover {
text-decoration: none;
color:#2490D4;
}
#Link ul {
list-style: none;
}
/* Footer */
footer {
width:100%;
height:8vh;
background: #1a1a1a;
color: #FFF;
display: flex;
align-items: center;
}
footer p {
margin: 0 auto;
}
/*md*/
@media screen and ( min-width:992px ) {
.sp {
display: none;
}
html,body {
width:100%;
min-width:1000px;
}
h4 {
width:30vw;
}
h5{
width:30%;
}
.contact_fixed {
width:60px;
height:200px;
padding:15px;
z-index: 1;
position: fixed;
right:0;
top:210px;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
transition: .4s;
}
.contact_fixed div {
display: -webkit-box;
display: -ms-flexbox;
display:flex;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.25rem;
}
.contact_fixed span {
font-size:16px;
}
/* firstview */
.firstlogo {
width:30%;
}
/* firstview */
.firstlogo {
width:30%;
}
/* about */
#About {
height: 100vh;
position: relative;
}
.aboutimg {
position: absolute;
top: 50%;
left:0%;
transform: translateY(-50%);
}
.aboutimg img {
height:70vh;
width:auto;
}
.abouttext {
position: absolute;
width:50%;
top: 50%;
right:0%;
transform: translateY(-50%);
}
.abouttext_box {
width:80%;
}
.villa_introduction {
margin:5rem 0;
}
#Link ul {
display: flex;
justify-content: space-around;
}
}
/*sp*/
@media screen and ( max-width:991px ) {
.pc {
display: none;
}
h2 {
font-size: 2rem;
text-align: center;
}
h4 {
text-align: center;
}
.caption-img {
height:2rem;
display: block;
margin:0 auto;
}
.contact_fixed {
width:70px;
height:70px;
padding:4px;
z-index: 1;
position: fixed;
right:0;
bottom:0;
transition: .4s;
display: flex;
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
align-items: center;
text-align: center;
}
.contact_fixed div {
display: -webkit-box;
display: -ms-flexbox;
display:flex;
flex-direction: column;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_fixed span {
font-size:12px;
}
/* firstview */
.firstlogo {
width:80%;
}
#video_controls {
 display: none;
 }

/* about */
.aboutimg {
width:100%;
margin-top:3%;
}
.aboutimg img {
width:100%;
}
#Link ul {
margin:0 auto;
padding:0;
}
/* saigo */
.saigotext h3 {
width:100%;
text-align: center;
margin:0 auto;
}

/* villa */
.villa_catchphrase {
text-align: center;
}
.villa_introduction {
margin:3rem 0;
}
/* link */
#Link ul li {
margin-bottom:1rem;
}
}
/*Edgeのみ適用*/
@supports (-ms-ime-align: auto) {
    #background_video {
		width:100%;
        height: auto;
    }
}
_:-ms-lang(x)::-ms-backdrop, #background_video {
    width:100%;
	height: auto;
}