@charset "UTF-8";

/*----------------------------------------
 全体
----------------------------------------*/

html,body{
height: 100%;
}

html{
font-size: 62.5%;
}

body{
font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif !important;
color: #333;
-webkit-text-size-adjust: 100%;
word-wrap: break-word;
word-break: break-all;
min-height: 100vh;
font-weight: 400;
}

*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.page img{
width: 100%;
height: auto;
flex-shrink: 0;
vertical-align: bottom;
-webkit-backface-visibility: hidden;
}

.page a img:hover{
opacity: 0.7;
transition: 0.5s;
}

div,
a,
p,
img{
min-height: 0%; /* IE11設定 */
}


/*----------------------------------------
 header
----------------------------------------*/

#header{
height:60px;
border-bottom:none;
}

#global{
position:absolute;
top:60px;
border-top:none;
}


#global ul{
width: 100% !important;
background-color: #fff;
}

#global li,
#global li:after{
 transition: .5s;
}

#global li a {
    padding: 2px 10px;
    font-size: 14px;
    transition: .5s;
}

#global li a span {
    font-size: 10px;
padding: 3px 0 0 0;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
}

#global li:hover {
    background: #f7f7f7
}

#global li:hover::after, #global li.current::after {
    background: #948144;
}

#global li.linkno,
#footer .link li.linkno{
pointer-events: none;
color: #ccc;
}

#global-sp li.linkno,
#global li.linkno{
pointer-events: none;
opacity: 0.3;
}

#header .header-box1{
width: 100% !important;
height:60px !important;
}

#header #header-cv li.textlink a {
    color: #000;
}
#header #header-cv li.textlink a span {
    padding-left: 10px;
}
#header #header-cv li.textlink a span::before {
    border-left: 4px solid #dcdcdc;
}

#header .header-box1 #siteId img {
margin-left: 20px;
}


/*----------------------------------------
 section
----------------------------------------*/

.inner-l {
width: 100%;
max-width: 1024px;
}



/*----------------------------------------
 page
----------------------------------------*/

.page{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
overflow: hidden;
}

.page_inner{
width: 100%;
max-width: 1024px;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

/*----------------------------------------
 headline
----------------------------------------*/

.page h3 {
width: 100%;
font-size: 2rem;
font-weight: 400;
display: inline-block;
}

.page h4 {
width: 100%;
font-size: 1.8rem;
font-weight: 400;
display: inline-block;
}

.page h5 {
width: 100%;
font-size: 1.2rem;
font-weight: 400;
display: inline-block;
}

.page p {
width: 100%;
font-size: 1.5rem;
font-weight: 400;
}

sup.top {
font-size: 50%;
vertical-align: top;
}

sup.bottom {
font-size: 50%;
vertical-align: bottom;
}

/*----------------------------------------
 main_title
----------------------------------------*/

.main_title{
width: 100%;
padding: 0 0;
margin: 0 0;
display: block;
position: relative;
line-height: 0;
}

.main_title span{
font-size: 1rem;
line-height: 1;
width: 100%;
position: absolute;
bottom: 10px;
right: 0;
}

.main_title img{
width: 100%;
height: auto;
}

#page-title {
    margin-bottom: 40px;
    padding: 30px 0;
    background: #908b7b;
    background: -moz-linear-gradient(0deg, rgba(212,205,180,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(212,205,180,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(0deg, rgba(212,205,180,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d4cdb4', endColorstr='#fffffff', GradientType=0);
    text-align: center;
    line-height: 1
}

#page-title .box {
    display: inline-block;
    width: 500px;
    padding: 18px 0;
    background: none;
}

#page-title h1 {
    font-size: 34px;
    font-weight: 500;
    letter-spacing: .1em;
    text-shadow: none;
}


.plan-title{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #142832;
padding: 60px 0;
}



.plan-title .plan-title_box {
width: 100%;
max-width: 1024px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.plan-title h1 {
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 34px;
letter-spacing: .1em;
text-shadow: none;
color: #fff;
margin: 0 0;
padding: 0 0;
position: relative;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}

.plan-title h1 img{
width: 100%;
height: auto;
flex-shrink: 0;
vertical-align: bottom;
-webkit-backface-visibility: hidden;
}

.plan-title h1 span.type{
width: 40%;
display: block;
}

.plan-title h1 a{
width: 30%;
display: block;
transition : all 0.5s ease 0s;
}

.plan-title h1 a:hover{
opacity: 0.7;
}

.plan-title h1 a img {
width: 90% !important;
}

.plan-title_line{
width: 100%;
border-top: 3px solid #c8a17c;
display: flex;
justify-content: center;
align-items: flex-start;
background-color: #472A2B;
}

.plan-title_line_b{
background-color: #15372F;
}

.plan-title_line_c{
background-color: #334764;
}

.plan-title_line_d{
background-color: #4b3613;
}

.plan-title_triangle {
background: #c8a17c;
height: calc(tan(40deg) * 40px / 2);
width: 40px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/*----------------------------------------
 title
----------------------------------------*/

.page h2.title {
width: 100%;
font-size: 3.5rem;
line-height: 1.5;
font-weight: 400;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
letter-spacing: 0.1em;
text-align: center;
}

.page h2.title span.en {
width: 100%;
font-size: 7rem;
line-height: 1.5;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
text-align: center;
display: block;
margin: 0 0 30px 0;
}

.page h2.title img {
display: block;
}

.page h2.title2 {
width: 100%;
font-size: 2.3rem;
line-height: 1.5;
font-weight: 400;
padding: 15px;
font-style: normal;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
letter-spacing: 0.1em;
text-align: center;
}

.page h2.title2 span.en {
width: 100%;
font-size: 7rem;
line-height: 1.5;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
text-align: center;
display: block;
}

.page h3.title{
font-size: 2.5rem;
margin-bottom: 50px;
}

.page h3.title span{
font-size: 3rem;
color: #910426;
display: block;
}

.page p.title {
width: 100%;
font-size: 1.6rem;
display: block;
line-height: 2;
}



/*----------------------------------------
 main_v
----------------------------------------*/

.main_v{
position: relative;
width: 100%;
overflow: hidden;
}

.main_v:before{
content: "";
display: block;
padding-top: 56.25%;
}


#kv .kv-slide {
    max-width: 100%;
    margin: 0 auto
}

#kv {
width: 100%;
display: block;
position: relative;
background-color: #000;
}

#kv:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

video#opv {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
height: 100%;
  vertical-align: bottom;
z-index: 7000;
}

#main_v video {
display: none;
  object-fit: cover;
  width: 100%;
height: 100%;
  vertical-align: bottom;
}


.skip{
display: none;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 7100;
background-color: #fff;
border: 1px solid #c8a17c;
text-align: center;
padding: 5px 20px;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
line-height: 1.5;
cursor: pointer;
color: #c8a17c;
}

.skip:hover{
background-color: #c8a17c;
color: #fff;
transition : all 0.5s ease 0s;
}


/*----------------------------------------
 lead
----------------------------------------*/

.lead{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: #142832;
}

.lead_inner{
width: 100%;
max-width: 1024px;
padding: 30px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.lead_inner img{
width: 100%;
}

.lead02{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: rgb(116,22,26);
background: linear-gradient(-45deg, rgba(116,22,26,1) 50%, rgba(35,24,21,1) 100%);
}

.lead02_inner{
width: 100%;
max-width: 1024px;
padding: 30px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.lead02_inner img{
width: 80%;
}

/*----------------------------------------
 top
----------------------------------------*/

.top_special{
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
background: linear-gradient(180deg, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%),
  url(../img/top/top_bg01.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.top_special_inner{
width: 100%;
max-width: 1024px;
padding: 80px 0;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}


.top_special h2{
text-align: center;
padding: 80px 0 40px 0;
font-size: 2rem;
letter-spacing: 5px;
font-weight: 500;
}

.top_special h2 span{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 2px;
font-size: 5rem;
line-height: 1;
color: #948144;
display: block;
}

.special_slide{
width: 100%;
}

.special_slide img{
padding: 20px;
}

.special_slide .slide-arrow {
position: absolute;
width: 30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition : all 0.5s ease 0s;
}

.special_slide .slide-arrow img {
width: 100%;
opacity: 1 !important;
display: block;
padding: 0;
}

.special_slide .prev-arrow {
left: -50px;
}

.special_slide .next-arrow {
right: -50px;
}

.special_slide .slick-dots{
bottom: -10px;
}

.special_slide .slick-dots li{
width:20px!important;
}

.special_slide .slick-dots li button{
cursor: pointer;
}

.special_slide .slick-dots li button:before{
font-size:15px !important;
color: #948144;
opacity: 0.3;
}

.slick-dots li.slick-active button:before {
opacity: 1;
}



.top_contents{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
background-color: #142832;
color: #fff;
}

.top_contents_inner{
width: 100%;
max-width: 1024px;
padding: 0 0 80px 0;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.top_contents_img{
width: 100%;
position: relative;
top: -50px;
margin-bottom: -50px;
}

.top_contents_img img{
width: 100%;
height: auto;
}

.top_contents h2{
text-align: center;
padding: 80px 0 40px 0;
font-size: 4rem;
letter-spacing: 7px;
font-weight: 200;
}

.top_contents p{
text-align: center;
font-size: 1.5rem;
line-height: 2;
}

#top-nav-block {
margin-bottom: 0;
padding: 80px 0;
background: linear-gradient(180deg, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%),
  url(../img/top/top_bg01.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

.nav-block_bg{
background: none !important;
padding: 0 0 0 0 !important;
}

#top-nav-block li {
margin: 0 0 80px 0;
}

#top-nav-block li a {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 0;
}

#top-nav-block li .pict {
position: static;
float: left;
margin-top: 0;
width: 65%;
line-height: 0;
}

#top-nav-block li .pict::before {
display: none;
}

#top-nav-block li .body {
    float: left;
    width: 35%;
    margin-top: 0;
padding: 0 0 0 30px;
    box-sizing: border-box;
}

#top-nav-block li:nth-child(even) .body {
    float: left;
    padding: 0 30px 0 0;
    text-align: left;
}

#top-nav-block li .body h2 {
font-size: 30px;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
line-height: 1.7;
}

#top-nav-block li .body h2 span {
color: #000;
}

#top-nav-block li .body p {
line-height: 1.7;
letter-spacing: 0.1em
}

#top-nav-block li .body .more {
    display: inline-block;
    padding: 10px 40px;
    font-size: 15px;
    border: 1px solid #948144;
    color: #948144;
    transition: .5s;
width: 100%;
text-align: center;
margin: 10px 0 0 0;
position: relative;
}

#top-nav-block li .body .more:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 1px solid #948144;
  border-right: 1px solid #948144;
  transform: rotate(45deg);
  box-sizing: border-box;
}

#top-nav-block li a:hover .more {
    background: #948144;
}

#top-nav-block li a:hover .more:after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}


.top_info{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
width: 100%;
margin: 40px 0;
}

.top_info p{
align-items: center;
color: #948144;
padding: 10px 0;
line-height: 1;
font-size: 1.7rem;
}

.top_info h2{
font-size: 4.5rem;
line-height: 1;
font-weight: 400;
width: 100%;
margin-bottom: 15px;
letter-spacing: 3px;
text-align: center;
display: flex;
align-items: center;
color: #948144;
}

.top_info h2:before,
.top_info h2:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #948144;
}

.top_info h2:before {
    margin-right: 2rem;
}

.top_info h2:after {
    margin-left: 2rem;
}

.top_info_sub{
position: relative;
top: -10px;
margin-bottom: -10px;
}

.index #footer-btn,
.map #footer-btn,
.outline #footer-btn,
.zeh-m #footer-btn,
.modelroom #footer-btn,
.plan #footer-btn,
.special_life #footer-btn,
.special_merit #footer-btn,
.special_voice #footer-btn,
.brand #footer-btn,
.safety #footer-btn{
display: none !important;
}

.index #pagetop,
.map #pagetop,
.outline #pagetop,
.zeh-m #pagetop,
.modelroom #pagetop,
.plan #pagetop,
.special_life #pagetop,
.special_merit #pagetop,
.special_voice #pagetop,
.brand #pagetop,
.safety #pagetop{
display: none !important;
}

.index #pagetops,
.map #pagetops,
.outline #pagetops,
.zeh-m #pagetops,
.modelroom #pagetops,
.plan #pagetops,
.special_life #pagetops,
.special_merit #pagetops,
.special_voice #pagetops,
.brand #pagetops,
.safety #pagetops{
text-align: right;
width: 100%;
}


/*----------------------------------------
 concept
----------------------------------------*/

.concept_bg{
background: linear-gradient(180deg, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%),
  url(../img/concept/concept_bg01.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
}

.concept_bg2{
background-color: #142832;
background-image: url(../img/concept/concept03.jpg);
background-position: top right;
background-repeat: no-repeat;
background-size: 80%;
padding: 80px 0;
}

.concept_bg3{
background-color: #142832;
padding: 80px 0;
}

.concept_bg4{
background-color: #fff;
padding: 80px 0;
}


.concept_info{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
width: 100%;
margin: 40px 0;
}

.concept_info p{
text-align: center;
font-size: 2rem;
}

.concept_info h2{
font-size: 4.5rem;
line-height: 1;
font-weight: 400;
width: 100%;
margin-bottom: 15px;
letter-spacing: 3px;
text-align: center;
display: flex;
align-items: center;
color: #948144;
}

.concept_info h2:before,
.concept_info h2:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #948144;
}

.concept_info h2:before {
    margin-right: 2rem;
}

.concept_info h2:after {
    margin-left: 2rem;
}

/*----------------------------------------
 location
----------------------------------------*/

.location_bg{
background-color: #142832;
padding: 80px 0;
}

.location_bg2{
background-color: #fff;
background-image: url(../img/location/access_bg01.png);
background-position: top left;
background-repeat: no-repeat;
background-size: 80%;
padding: 80px 0;
}

.location_bg3{
background-image: url(../img/location/access_bg02.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: 100%;
padding: 0 0 80px 0;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}

.location_bg4{
background-image: url(../img/location/access_bg03.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: 100%;
padding: 0 0 80px 0;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}

.location_bg5{
background-color: #fff;
padding: 80px 0;
}

.page h3.location_text {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
height: 60px;
font-size: 1.8rem;
}

.page h3.location_text span {
display: inline;
width: 40px;
margin-right: 5px;
}

.location_on{
width: 100%;
position: relative;
}

.location_off{
width: 100%;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap-reverse;
}

.location_on_item{
width: 50%;
position: absolute;
right: 0;
top: 40px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-direction: column;
}

.location_off_item{
width: 50%;
position: absolute;
left: 0;
top: 40px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}

.location_box_left{
width: 50%;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: wrap;
}

.location_box_left_h{
padding-top: 200px;
}

.location_box_right{
width: 50%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 40px 0 0 40px;
}

.location_box_inner{
width: 100%;
max-width: 512px;
padding: 0 20px 0 0;
}

.location_box_inner_text{
width: 100%;
display: flex;
align-items: flex-start;
}

.location_box_inner_text img{
width: 7%;
padding-right: 20px;
}


.page h3.location_sub {
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
color: #948144;
font-size: 3rem;
text-align: center;
}

.location_list{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.info-list dt {
    border-bottom: none;
background-color: #f0f0f0;
padding: 5px 10px;
margin-bottom: 10px;
}

.info-list li:nth-child(even) {
    background: #fff;
}

.info-list li .name {
width: 70%;
}
.info-list li .time {
width: 30%;
}


/*----------------------------------------
 zeh-m
----------------------------------------*/

.zeh_bg{
background: linear-gradient(90deg, rgba(210,210,210,1) 0%, rgba(255,255,255,1) 50%, rgba(210,210,210,1) 100%);
padding: 80px 0;
}

.zeh_bg2{
background: linear-gradient(90deg, rgba(226,243,231,1) 0%, rgba(255,255,255,1) 50%, rgba(226,243,231,1) 100%);
padding: 80px 0;
}

.zeh_bg_color{
background: linear-gradient(90deg, rgba(2,18,3,1) 0%, rgba(43,125,34,1) 50%, rgba(2,18,3,1) 100%);
}

.zeh_bg_color2{
background: linear-gradient(90deg, rgba(226,243,231,1) 0%, rgba(255,255,255,1) 50%, rgba(226,243,231,1) 100%) !important;
}

.zeh_line{
border-bottom: 1px solid #005e3c;
}

.zeh_nav{
width: 100%;
margin: 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.zeh_nav li{
width: 33.333333%;
border-left: 1px solid #005e3c;
text-align: center;
font-size: 1.5rem;
}

.zeh_nav li:last-child{
border-right: 1px solid #005e3c;
}

.zeh_nav li a{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
padding: 10px;
}

.zeh_nav li span{
font-size: 2rem;
color: #005e3c;
display: block;
margin: 0 0 10px 0;
}

.zeh_nav li a .down_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #005e3c;
  line-height: 1;
  width: 20px;
  height: 20px;
  border: 1px solid #005e3c;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.zeh_nav li a .down_arrow_box{
opacity: 0;
transition : all 0.5s ease 0s;
}

.zeh_nav li a.actives .down_arrow_box{
opacity: 1;
}

.zeh_nav li a:hover .down_arrow_box{
animation: fluffy 2s ease-in-out infinite;
opacity: 1;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}


.zeh_info{
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
text-align: center;
width: 100%;
margin: 40px 0;
}


.zeh_info p.sub_title{
font-size: 4.5rem;
line-height: 1;
font-weight: 400;
width: 100%;
letter-spacing: 3px;
text-align: center;
display: flex;
align-items: center;
color: #005e3c;
}

.zeh_info p.sub_title:before,
.zeh_info p.sub_title:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #005e3c;
}

.zeh_info p.sub_title:before {
    margin-right: 2rem;
}

.zeh_info p.sub_title:after {
    margin-left: 2rem;
}

.zeh_info p.sub_title span{
font-size: 1.8rem !important;
line-height: 1;
border: 1px solid #005e3c;
border-radius: 5px;
padding: 5px;
margin: 0 0 0 20px;
}

.anchor{
display: block;
padding-top: -100px;
margin-top: 100px;
}

.anchor2{
display: block;
padding-top: -420px;
margin-top: 420px;
}

.anchor3{
display: block;
padding-top: -1450px;
margin-top: 1450px;
}

h4.lh_01{
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

.zeh_point {
position: absolute;
top: -10px;
left: -10px;
width: 20%;
}

/*----------------------------------------
 plan
----------------------------------------*/

.plan_bg{
background-color: #142832;
padding: 80px 0;
}

.plan_bg2{
background-color: #142832;
}

.plan_bg3{
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(71,42,43,1) 100%);
padding: 80px 0 0 0;
}

.plan_bg4{
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(21, 55, 47, 1) 100%);
padding: 80px 0 0 0;
}

.plan_bg5{
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(51, 71, 100, 1) 100%);
padding: 80px 0 0 0;
}

.plan_bg6{
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(75, 54, 19, 1) 100%);
padding: 80px 0 0 0;
}

.select_btn{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
top: -30px;
margin-bottom: -30px;
}

.select_btn2{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}

.select_btn img,
.select_btn2 img{
width: 30%;
cursor: pointer;
}

.select_box {
display: none;
}

.btn_close{
display: none;
}


.plan_bg2_wrap{
width: 100%;
background-image: url(../img/plan/plan_bg02.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 80px 0 0 0;
display: flex;
justify-content: center;
align-items: flex-end;
}

.plan_ms{
width: 50%;
}

.view_box{
width: 100%;
margin: 80px 0;
position: relative;
}

.view_box ul{
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1024px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
z-index: 1;
}

.view_box ul li{
cursor: pointer;
padding: 5px 30px;
color: #948144;
background-color: #fff;
border: 1px solid #948144;
border-width: 1px 0 1px 1px;
font-size: 1.5rem;
transition : all 0.5s ease 0s;
}

.view_box ul li:last-child{
border-width: 1px 1px 1px 1px;
}

.view_box ul li:hover,
.view_box ul li.actives{
color: #fff;
background-color: #948144;
}


.panel-list {
width: 100%;
}

.panel-item {
display: none;
width: 100%;
}

.panel-item.actives {
display: block;
animation: panel-show .9s ease-in-out forwards;
}

@keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.plan_box{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
text-align: center;
width: 100%;
margin: 40px 0;
}

.plan_point {
position: absolute;
top: -10px;
left: -10px;
width: 25%;
}

.plan_area{
font-size: 2.5rem !important;
font-weight: 200 !important;
text-align: center;
}

.plan_area span{
font-size: 5rem !important;
font-family: "adobe-garamond-pro", serif;
font-style: normal;
margin: 0 5px;
}

.plan_area2{
font-size: 2rem !important;
font-weight: 200 !important;
text-align: center;
}

.plan_nav{
width: 100%;
background-color: #001620;
margin: 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.plan_nav li{
width: 25%;
border: 1px solid #c8a17c;
border-width: 1px 0 1px 1px;
}

.plan_nav li:last-child{
border-width: 1px 1px 1px 1px;
}

.plan_nav li a{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2rem;
line-height: 1;
padding: 15px 10px;
transition : all 0.5s ease 0s;
font-family: "adobe-garamond-pro", serif;
font-style: normal;
font-weight: 400;
}

.plan_nav li a:hover,
.plan_nav li a.actives{
background-color: #c8a17c;
}

.plan_box h3{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
line-height: 1.5;
font-size: 1.8rem;
text-align: left;
margin: 0 0 10px 0;
}

.plan_num{
font-size: 1.6rem;
line-height: 1 !important;
color: #142832;
background-color: #c8a17c;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 3px;
margin: 0 10px 0 0;
}

.houi{
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}

.houi img{
width: 10%;
}

.hanrei {
font-size: 1.2rem;
letter-spacing: 0;
line-height: 1.5;
text-align: center;
color: #fff;
}

.hanrei span {
font-size: 1.2rem;
margin: 0 5px 0 0;
}

.hanrei img {
margin: 0 5px;
width: 30px;
height: 10px;
position: relative;
top: -5px;
}

a.plan_btn {
width: 30%;
padding: 15px 15px;
font-size: 1.7rem;
background-color: #fff;
border: 1px solid #c8a17c;
color: #c8a17c;
text-align: center;
display: block;
transition: all 0.5s ease 0s;
margin: 40px 0 0 0;
}

a.plan_btn:hover {
opacity: 0.7;
background-color: #c8a17c;
color: #fff;
}

/*----------------------------------------
 modelroom
----------------------------------------*/

.modelroom_bg{
padding: 80px 0;
}

.modelroom_bg2{
background-color: #142832;
}

.modelroom_bg3{
padding: 80px 0;
}

.modelroom_text01{
background-color: #000;
color: #fff;
padding: 5px 20px;
font-size: 2rem;
position: absolute;
top: 40px;
right: 0;
}

.modelroom_text02{
background-color: #000;
color: #fff;
padding: 5px 20px;
font-size: 2rem;
position: absolute;
bottom: 40px;
left: 0;
}

.modelroom_wrap{
width: 100%;
padding: 80px 0 0 0;
}

.modelroom_wrap2{
width: 100%;
padding: 80px 0 0 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.modelroom_wrap3{
width: 100%;
padding: 80px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.modelroom_item_01{
width: 100%;
display: flex;
justify-content: flex-end;
}

.modelroom_img_01{
width: 100%;
}

.modelroom_box_01{
width: 50%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
bottom: -10px;
right: -10%;
z-index: -1;
}


.modelroom_item_02{
width: 100%;
display: flex;
justify-content: flex-start;
}

.modelroom_img_02{
width: 100%;
}

.modelroom_box_02{
width: 30%;
height: 70%;
background-color: #dcdcdc;
position: absolute;
bottom: -10px;
left: 20%;
z-index: -1;
}


.modelroom_item_03{
width: 100%;
display: flex;
justify-content: flex-start;
}

.modelroom_img_03{
width: 100%;
}

.modelroom_box_03{
width: 70%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
bottom: 100px;
right: -20%;
z-index: -1;
}

.modelroom_item_04{
width: 100%;
display: flex;
justify-content: flex-end;
}

.modelroom_img_04{
width: 100%;
}

.modelroom_box_04{
width: 30%;
height: 70%;
background-color: #dcdcdc;
position: absolute;
bottom: 50px;
left: -20%;
z-index: -1;
}

.modelroom_item_05{
width: 45%;
display: flex;
justify-content: flex-start;
}

.modelroom_img_05{
width: 100%;
}

.modelroom_box_05{
width: 70%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
bottom: 100px;
right: -40%;
z-index: -1;
}

.modelroom_item_06{
width: 45%;
display: flex;
justify-content: flex-end;
}

.modelroom_img_06{
width: 100%;
}

.modelroom_box_06{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
bottom: 0;
left: -20%;
z-index: -1;
}


.modelroom_item_07{
width: 100%;
display: flex;
justify-content: center;
}

.modelroom_img_07{
width: 100%;
}

.modelroom_box_07{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
bottom: 0;
left: -20%;
z-index: -1;
}


.modelroom_item_08{
width: 45%;
display: flex;
justify-content: flex-start;
}

.modelroom_img_08{
width: 100%;
}

.modelroom_box_08{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
top: 20%;
right: -20%;
z-index: -1;
}

.modelroom_item_09{
width: 45%;
display: flex;
justify-content: center;
}

.modelroom_img_09{
width: 100%;
}

.modelroom_box_09{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
top: 20%;
right: 0;
z-index: -1;
}


.modelroom_item_10{
width: 45%;
display: flex;
justify-content: flex-end;
}

.modelroom_img_10{
width: 100%;
display: flex;
justify-content: flex-end;
}

.modelroom_box_10{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
top: -10%;
left: -20%;
z-index: -1;
}


.modelroom_item_11{
width: 45%;
display: flex;
justify-content: flex-end;
}

.modelroom_img_11{
width: 100%;
display: flex;
justify-content: flex-end;
}

.modelroom_box_11{
width: 45%;
height: 50%;
background-color: #dcdcdc;
position: absolute;
top: 40%;
left: -30%;
z-index: -1;
}



.modelroom_item_text_left{
background-color: #000;
color: #fff;
padding: 5px 20px;
font-size: 1.6rem;
position: absolute;
bottom: 0;
left: 0;
}

.modelroom_item_text_right{
background-color: #000;
color: #fff;
padding: 5px 20px;
font-size: 1.6rem;
position: absolute;
bottom: 0;
right: 0;
}

/*----------------------------------------
 safety
----------------------------------------*/

.safety_bg{
padding: 80px 0 0 0;
}


.safety_nav{
width: 100%;
margin: 80px 0 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: stretch;
}

.safety_nav li{
text-align: center;
font-size: 1.5rem;
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
}

.safety_nav li a{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}


.safety_nav li p{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
line-height: 1.2;
margin: 0 0 0 0;
border-left: 1px solid #000;
text-align: center;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 5px 20px;
}

.safety_nav li:last-child p{
border-right: 1px solid #000;
}

.safety_nav li a .down_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #948144;
  line-height: 1;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.safety_nav li a .down_arrow_box{
opacity: 0;
transition : all 0.5s ease 0s;
position: relative;
top: -10px;
margin-bottom: -10px;
}

.safety_nav li a.actives .down_arrow_box{
opacity: 1;
}

.safety_nav li a:hover .down_arrow_box{
animation: fluffy 2s ease-in-out infinite;
opacity: 1;
}

.safety_box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.safety_title{
width: 100%;
font-size: 1.8rem !important;
text-align: center;
margin: 0 0 40px 0;
}

.safety_title span{
display: flex;
align-items: center;
width: 100%;
font-size: 2rem;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
color: #948144;
margin: 0 0 10px 0;
}

.safety_title span:before,
.safety_title span:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #948144;
}

.safety_title span:before {
    margin-right: 1rem;
}

.safety_title span:after {
    margin-left: 1rem;
}

.safety .anchor_01{
display: block;
padding-top: -80px;
margin-top: 80px;
}

.safety .anchor_02,
.safety .anchor_03,
.safety .anchor_04,
.safety .anchor_05,
.safety .anchor_06,
.safety .anchor_07{
display: block;
padding-top: 80px;
margin-top: -80px;
}

/*----------------------------------------
 brand
----------------------------------------*/

.brand_bg{
padding: 80px 0;
}

.brand_box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.brand_box ul{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
margin: 40px 0;
}

.brand_box ul li{
border-top: 1px solid #948144;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.brand_box p.year{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
line-height: 1;
margin: 0 0 5px 0;
color: #e4dfd0;
}

.his_mov{
cursor: pointer;
position: relative;
width: 100%;
transition : all 0.5s ease 0s;
}

.his_mov span{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
color: #ccc;
font-size: 2rem;
}



/*----------------------------------------
 special_voice
----------------------------------------*/

.voice_bg{
padding: 0 0 80px 0;
}

.voice_box{
width: 100%;
background-color: #e8f3f2;
padding: 80px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.voice_box h2{
color: #00796b;
}

.voice_box h2 span{
font-size: 1.7rem;
color: #333;
display: block;
margin: 0 0 10px 0;
}

.voice_nav{
width: 100%;
max-width: 1024px;
margin: 80px 0 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.voice_nav li{
width: 25%;
border-left: 1px solid #003a16;
text-align: center;
font-size: 1.5rem;
}

.voice_nav li:last-child{
border-right: 1px solid #003a16;
}

.voice_nav li p{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 3rem;
margin: 0 0 5px 0;
color: #003a16;
}

.voice_nav li a{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
padding: 10px;
}

.voice_nav li a span{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 5rem;
color: #003a16;
display: block;
margin: 0 0 5px 0;
line-height: 1;
}

.voice_nav li a .down_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #003a16;
  line-height: 1;
  width: 20px;
  height: 20px;
  border: 1px solid #003a16;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.voice_nav li a .down_arrow_box{
opacity: 0;
transition : all 0.5s ease 0s;
}

.voice_nav li a.actives .down_arrow_box{
opacity: 1;
}

.voice_nav li a:hover .down_arrow_box{
animation: fluffy 2s ease-in-out infinite;
opacity: 1;
}

.voice_title{
width: 100%;
display: flex;
justify-content: center;
background-color: #003a16;
padding: 20px 0;
}

.voice_faq{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin: 0 0 60px 0;
}

.voice_faq p.faq{
width: 100%;
display: block;
padding: 5px 0;
line-height: 2;
font-size: 1.7rem;
position: relative;
}

.voice_faq p.faq_ans:before{
content: '';
display: inline-block;
width: 80px;
height: 80px;
background-image: url('../img/special_voice/voice_A.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 0;
left: -30px;
}

.special_voice h3 {
width: 100%;
font-size: 1.7rem;
font-weight: 400;
line-height: 2;
display: inline-block;
padding: 10px 0;
margin: 0 0 40px 0;
position: relative;
}

.special_voice h3:before {
content: '';
display: inline-block;
width: 80px;
height: 80px;
background-image: url('../img/special_voice/voice_Q.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 0;
left: -30px;
}

.special_voice h3 span {
font-size: 3rem;
display: block;
color: #003a16;
margin: 0 0 5px 0;
letter-spacing: 2px;
}

.special_voice .anchor_01{
display: block;
padding-top: -180px;
margin-top: 180px;
}


.special_voice .anchor_02,
.special_voice .anchor_03,
.special_voice .anchor_04{
display: block;
padding-top: 80px;
margin-top: -80px;
}

/*----------------------------------------
 special_life
----------------------------------------*/

.life_bg{
padding: 0 0 80px 0;
}

.life_nav{
width: 100%;
margin: 80px 0 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.life_nav li{
width: 25%;
border-left: 1px solid #948144;
text-align: center;
font-size: 1.5rem;
}

.life_nav li:last-child{
border-right: 1px solid #948144;
}

.life_nav li p{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 2rem;
margin: 0 0 5px 0;
}

.life_nav li a{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
padding: 10px;
}

.life_nav li a span{
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
font-size: 4rem;
letter-spacing: 0.1em;
color: #948144;
display: block;
margin: 0 0 5px 0;
line-height: 1;
}

.life_nav li a .down_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #948144;
  line-height: 1;
  width: 20px;
  height: 20px;
  border: 1px solid #948144;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.life_nav li a .down_arrow_box{
opacity: 0;
transition : all 0.5s ease 0s;
}

.life_nav li a.actives .down_arrow_box{
opacity: 1;
}

.life_nav li a:hover .down_arrow_box{
animation: fluffy 2s ease-in-out infinite;
opacity: 1;
}

.life_box{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}

.life_point{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
padding: 15px 0 0 20px;
margin: 40px 0;
}

.life_point ul{
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
margin: 0 0 20px 0;
padding: 0 20px 0 0;
}

.life_point ul li{
width: 100%;
margin: 0 0 5px 0;
}

.life_point_BG_01 ul li:before {
content: '●';
margin-right: 5px;
color: #ef8c90;
}

.life_point_BG_01{
background-color: #fce8e9;
}

.life_point_CL_01{
color: #ef8c90;
}

.life_point_BG_02 ul li:before {
content: '●';
margin-right: 5px;
color: #46b89d;
}

.life_point_BG_02{
background-color: #daf1eb;
}

.life_point_CL_02{
color: #46b89d;
}

.life_point_BG_03 ul li:before {
content: '●';
margin-right: 5px;
color: #678fca;
}

.life_point_BG_03{
background-color: #e1e9f4;
}

.life_point_CL_03{
color: #678fca;
}

.life_point_BG_04 ul li:before {
content: '●';
margin-right: 5px;
color: #f8b53f;
}

.life_point_BG_04{
background-color: #fef0d9;
}

.life_point_CL_04{
color: #f8b53f;
}

.life_point p{
font-size: 2rem;
margin: 0 0 10px 0;
}

.life_point_btn{
width: 100%;
display: flex;
justify-content: flex-end;
position: relative;
}

.life_point_btn a{
width: 50%;
background-color: #948144;
color: #fff;
padding: 10px 20px 10px 40px;
display: block;
letter-spacing: 0 !important;
transition : all 0.5s ease 0s;
clip-path:polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}

.life_point_btn a:hover{
background-color: #615429;
color: #fff;
}


.life_point_btn a:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.special_life .anchor_01,
.special_life .anchor_02,
.special_life .anchor_03,
.special_life .anchor_04{
display: block;
padding-top: 80px;
margin-top: -80px;
}

/*----------------------------------------
 special_merit
----------------------------------------*/

.merit_bg{
background: linear-gradient(180deg, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 100%),
  url(../img/special_merit/merit_bg02.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding: 0 0 80px 0;
}

.merit_bg2{
background-color: #fff;
padding: 80px 0;
}

.merit_nav{
width: 100%;
margin: 40px 0;
padding: 0 0;
list-style: none;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}

.merit_nav li{
width: 20%;
border-left: 1px solid #948144;
text-align: center;
font-size: 1.5rem;
}

.merit_nav li:last-child{
border-right: 1px solid #948144;
}

.merit_nav li a{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
padding: 10px 5px;
}

.merit_nav li span{
font-size: 2rem;
letter-spacing: 0 !important;
color: #948144;
display: block;
margin: 0 0 10px 0;
}

.merit_nav li a .down_arrow {
  display: inline-block;
  vertical-align: middle;
  color: #948144;
  line-height: 1;
  width: 20px;
  height: 20px;
  border: 1px solid #948144;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.merit_nav li a .down_arrow_box{
opacity: 0;
transition : all 0.5s ease 0s;
}

.merit_nav li a.actives .down_arrow_box{
opacity: 1;
}

.merit_nav li a:hover .down_arrow_box{
animation: fluffy 2s ease-in-out infinite;
opacity: 1;
}

.special_merit .anchor_01{
display: block;
padding-top: 110px;
margin-top: -110px;
}

.special_merit .anchor_02{
display: block;
padding-top: -250px;
margin-top: 250px;
}

.special_merit .anchor_03{
display: block;
padding-top: -330px;
margin-top: 330px;
}

.special_merit .anchor_04{
display: block;
padding-top: 110px;
margin-top: -110px;
}

.special_merit .anchor_05{
display: block;
padding-top: -180px;
margin-top: 180px;
}

/*----------------------------------------
 map
----------------------------------------*/

.map_box {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 80%;
padding: 40px;
}

.map_btn{
display: block;
width: 40%;
margin: 0 2%;
background-color: #fff;
border: 1px solid #948144;
padding: 10px 40px;
color: #948144 !important;
position: relative;
text-align: center;
transition : all 0.5s ease 0s;
font-size: 18px;
}

.map_btn:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 1px solid #948144;
  border-right: 1px solid #948144;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.map_btn:hover{
background-color: #948144;
color: #fff !important;
}

.map_btn:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}


/*----------------------------------------
 brand
----------------------------------------*/


/*----------------------------------------
 contact
----------------------------------------*/

#contact {
background-color: #142832;
color: #fff;
}

#contact .contact-sub {
    font-size: 1.4rem;
}


/*----------------------------------------
 footer
----------------------------------------*/

#pagetop {
    background: #ffffff;
    text-align: right;
padding: 0 0 20px 0;
}

#footer-btn {
    padding: 20px 0;
    background: #ffffff;
    border-top: none;
    text-align: center
}



/*----------------------------------------
 ボタン
----------------------------------------*/

.info_btn{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 1024px;
margin: 0 0 40px 0;
}

.info_btn .btn{
width: 60%;
padding: 17px 10px 15px 10px;
display: block;
text-align: center;
letter-spacing: 3px;
font-size: 2.2rem;
line-height: 1.2;
color: #fff;
}

.info_btn .btn span{
display: block;
font-size: 1.3rem;
}

.info_btn .btn.request{
background: linear-gradient(-45deg, rgba(35,24,21,1) 0%, rgba(116,22,26,1) 50%, rgba(35,24,21,1) 100%);
}

.info_btn .btn.reserve{
background: linear-gradient(-45deg, rgba(109,74,36,1) 0%, rgba(169,142,69,1) 50%, rgba(109,74,36,1) 100%);
}

/*----------------------------------------
cap
----------------------------------------*/

.cap {
position: relative;
top: -15px;
right: 0;
font-size: 1rem !important;
line-height: 1 !important;
margin-bottom: -10px;
padding: 0 5px;
letter-spacing: 0 !important;
}

.cap2{
font-size: 1rem !important;
padding: 0 5px;
letter-spacing: 0 !important;
}

/*----------------------------------------
 note
----------------------------------------*/

.note {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
padding: 30px 0;
background: #fff;
}

.note_inner {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 1024px;
}

.note p {
font-size: 1rem;
color: #666;
line-height: 1.2;
padding: 5px;
width: 100%;
display: inline-block;
letter-spacing: 0 !important;
text-align: left;
}

.note p span {
margin: 0 5px;
}

.note_p {
font-size: 1rem !important;
letter-spacing: 0 !important;
line-height: 1.2;
padding: 5px;
}

/*----------------------------------------
 その他
----------------------------------------*/

.linkno{
pointer-events: none;
}


.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}

.modal_bg{
background: rgba(0, 0, 0, 0.7);
height: 100vh;
position: absolute;
width: 100%;
}

.modal_content{
width: 100%;
max-width: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.modal_content iframe{
border: 2px solid #000;
}

.md_close_btn{
padding: 10px 20px;
font-size: 1.7rem;
letter-spacing: 2px;
line-height: 1;
background-color: #fff;
border: 2px solid #c8a17c;
color: #c8a17c !important;
margin: 10px 0 0 0;
transition : all 0.5s ease 0s;
}

.md_close_btn:hover{
background-color: #c8a17c;
border: 2px solid #c8a17c;
color: #fff !important;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}



/*----------------------------------------
 pc/sp
----------------------------------------*/

.pc{
display: block;
}

.sp{
display: none;
}

/*----------------------------------------
 animation
----------------------------------------*/


.imgleft {
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 100% 0 0);
transform: translateZ(0);
backface-visibility: hidden;
}

.imgleft.actives {
clip-path: inset(0 0 0 0);
}

.imgright {
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 0 0 100%);
transform: translateZ(0);
backface-visibility: hidden;
}

.imgright.actives {
clip-path: inset(0 0 0 0);
}



.fadeinup{
opacity: 0;
transform: translateY(30px);
}

.fadeinup.actives{
animation: 1s FadeINUP ease-in-out forwards;
}

@keyframes FadeINUP{
0%{
opacity: 0;
transform: translateY(30px);
filter: blur(20px);
}

100%{
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}

.fadein{
overflow: hidden;
opacity: 0;
}

.fadein.actives{
animation: 1s FadeIN ease-out forwards;
}

@keyframes FadeIN{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

.fadeindown{
opacity: 0;
transform: translateY(-30px);
}

.fadeindown.actives{
animation: 1s FadeINDOWN ease-in-out forwards;
}

@keyframes FadeINDOWN{
0%{
opacity: 0;
transform: translateY(-30px);
filter: blur(20px);
}

100%{
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}

.actives.AD_-2{
animation-delay: 0.2s !important;
}

.actives.AD_-3{
animation-delay: 0.3s !important;
}

.actives.AD_-4{
animation-delay: 0.4s !important;
}

.actives.AD_-5{
animation-delay: 0.5s !important;
}

.actives.AD_-6{
animation-delay: 0.6s !important;
}

.actives.AD_-7{
animation-delay: 0.7s !important;
}

.actives.AD_-8{
animation-delay: 0.8s !important;
}

.actives.AD_-9{
animation-delay: 0.9s !important;
}

.actives.AD_1{
animation-delay: 1s !important;
}

.actives.AD_1-1{
animation-delay: 1.1s !important;
}

.actives.AD_1-2{
animation-delay: 1.2s !important;
}

.actives.AD_1-3{
animation-delay: 1.3s !important;
}

.actives.AD_1-4{
animation-delay: 1.4s !important;
}

.actives.AD_1-5{
animation-delay: 1.5s !important;
}

.actives.AD_1-6{
animation-delay: 1.6s !important;
}

.actives.AD_1-7{
animation-delay: 1.7s !important;
}

.actives.AD_1-8{
animation-delay: 1.8s !important;
}

.actives.AD_1-9{
animation-delay: 1.9s !important;
}

.actives.AD_2{
animation-delay: 2s !important;
}