@charset "utf-8";


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #3E3A39; text-decoration: none;}
@media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; width: 100%; height: 100%; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 1.9rem; line-height: 1.4; color: #3E3A39;}
#container { position: relative; width: 100%; overflow: hidden;}
#loading { z-index: 100000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #FFF url("img/common/loading.svg") center center no-repeat;}
#header, .btn, article header h2, #title, #information, .tab, .price, .pagination, .attention, .form dt { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; line-height: 1;}


/*HEADER*/
/*******************************************************************/
#header { display: flex; align-items: center; justify-content: center; height: 75px; background: #000;}
#contactbtn a { display: block; width: 126px; height: 75px; padding-top: 12px; text-align: center; background: url("img/common/contactbtn.svg") center top no-repeat; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1;}
@media only screen and (min-width: 1025px){
#header nav .pc { display: flex;}
#header nav ul { display: flex; align-items: center; margin: 0 40px;}
#header nav li { margin: 0 10px;}
#header nav li a { font-size: 1.2rem; letter-spacing: 0.1em; color: #FFF;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#pagetop { display: none; position: fixed; right: 32px; bottom: 32px; z-index: 500;}
#footer { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; padding: 24px; background: #615A54; color: #FFF;}
#footer address { width: 100%; padding-top: 24px; text-align: center; font-size: 1.4rem; font-style: normal;}
#info { order: -1; margin: 8px 0;}
#info dd { margin-top: 8px; font-size: 2rem; font-weight: 700;}
#info dd.sub { font-size: 1.5rem; font-weight: normal;}
#logomark { margin: 8px 16px;}
#contactus { margin: 8px 0;}
#contactus h3 { margin-bottom: 8px; padding: 4px; text-align: center; border: 1px solid #FFF; font-size: 2.2rem; font-weight: 600;}
#contactus p { font-size: 1.8rem;}
#contactus p img { margin-bottom: 8px;}


/*CONTENTS*/
/*******************************************************************/
#main { max-width: 1240px; margin: 0 auto; padding-bottom: 1px; background: #FFF8A5;}
#main.narrow { max-width: 1024px;}
#main.full { max-width: initial;}
article { position: relative; margin: 0 108px 50px;}
article.bg::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: -1; background-color: #F8F8F8;}
article.border::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: -1; border-top: 5px solid #F8F8F8;}
article header { margin: 0 auto 20px; text-align: center;}
article header h2 { font-size: 2.8rem; letter-spacing: 0.1em; text-indent: 0.1em; font-weight: 500;}
article header.heading h2 { padding: 10px 40px; text-align: left; background: rgb(97,90,84); background: linear-gradient(90deg, rgba(97,90,84,1) 0%, rgba(255,255,255,0) 100%); font-size: 2rem; color: #FFF;}
section { position: relative; max-width: 1200px; margin: 0 auto;}
.narrow header:not(#title), .narrow section { max-width: 800px;}
section + section { margin-top: 56px;}
section h3 { margin-bottom: 20px; font-size: 2.2rem;}
section p, section ul, section ol, section dl, section table { line-height: 1.4;}
section p:not(:last-child) { margin-bottom: 16px;}
figure { position: relative;}
figure img { width: 100%; max-width: initial;}
figcaption { margin-top: 8px; font-size: 1.4rem;}
picture { display: block;}
.center { text-align: center;}
.right { text-align: right;}
.row { display: flex;}
.row > * { flex: 1;}
.btn { margin-top: 16px; text-align: center;}
.btn div { display: inline-block; margin: 16px;}
.btn a { display: inline-block; width: 250px; max-width: 100%; padding: 12px; background: #FFFEEE; border: 1px solid #727171; border-radius: 40px; font-size: 2rem; font-weight: bold; letter-spacing: 0.2em;}
.btn a::after { content: ''; display: inline-block; width: 15px; height: 20px; margin-left: 16px; vertical-align: middle; background: url("img/common/arr.svg") center no-repeat; background-size: contain;}
.btn a:hover { opacity: 1; background-color: #727171; color: #FFF;}
.btn a.jisya:hover { background-color: #00456A; border-color: #00456A;}
.btn a.chuukai:hover { background-color: #561A1E; border-color: #561A1E;}
.btn a:hover::after { background-image: url("img/common/arr_w.svg");}
.fs14 { font-size: 1.4rem;}
.sp { display: none;}
.fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;';}
.fit.contain { object-fit: contain; font-family: 'object-fit: contain; object-position: center;';}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0);} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} }
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0);} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} }
.animated { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
.animated.delay1{-webkit-animation-delay:0.2s;animation-delay:0.2s}
.animated.delay2{-webkit-animation-delay:0.4s;animation-delay:0.4s}
.animated.delay3{-webkit-animation-delay:0.6s;animation-delay:0.6s}
.animated.delay4{-webkit-animation-delay:0.8s;animation-delay:0.8s}
.animated.delay5{-webkit-animation-delay:1s;animation-delay:1s}
.animated.delay6{-webkit-animation-delay:1.2s;animation-delay:1.2s}
.animated.delay7{-webkit-animation-delay:1.4s;animation-delay:1.4s}
.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}
.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}
.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}
.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}


/*TOP*/
#mv { width: 100vw; margin: 0 calc(50% - 50vw) 50px; padding: 0;}
#mv h1 { position: absolute; left: 50%; top: 3vh; transform: translateX(-50%); width: 10%; text-align: center; z-index: 100;}
#mv .swiper-slide { overflow: hidden;}
#mv .swiper-slide .slide-img { width: 100%; padding-top: calc(695 / 1024 * 100%); overflow: hidden;}
#mv .swiper-slide .slide-img img { transform: scale(1); transition: transform 1s linear;}
#mv .swiper-slide-active .slide-img img { transform: scale(1.1); transition: transform 6s linear;}
#mv .swiper-slide .slider-caption { position: absolute; bottom: 10vh; left: 0; width: 100%; text-align: center; z-index: 1; opacity: 0; transition: opacity 1.4s ease-out;}
#mv .swiper-slide-active .slider-caption { opacity: 1;}
#mv .slide-prev, #mv .slide-next { position: absolute; top: calc(50% - 77px); display: block;  width: 82px; height: 144px; background: url("img/top/next.svg") center no-repeat; z-index: 10;}
#mv .slide-next { right: 24%;}
#mv .slide-prev { left: 24%; transform: scaleX(-1);}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 4vh;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { display: inline-block; width: 15px; height: 15px; margin: 0 8px; background: #FFF; opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #FFF8A5;}
#scroll { display: none;}
@media only screen and (max-width: 1240px){
#mv h1 { width: 16%;}
.slide-next { right: 10%!important;}
.slide-prev { left: 10%!important;}
}
@media only screen and (max-width: 768px){
#mv h1 { top: 6vw; width: 30%;}
#mv .swiper-slide .slide-img { height: calc(100vh - 75px); padding-top: 0;}
#mv .swiper-slide .slider-caption { bottom: auto; top: 37vw;}
#mv .slide-prev, #mv .slide-next { display: none;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: auto; top: 32vw;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 8px; height: 8px;}
#scroll { display: block; position: absolute; bottom: 16px; left: 0; width: 100%; text-align: center; z-index: 10;}
}
#property { padding: 32px 0; text-align: center; background: #FFF url("img/top/property_bg.jpg") center top no-repeat; background-size: cover;}
#gallery { padding: 32px 0; text-align: center; background: #FFF url("img/top/gallery_bg.jpg") center top no-repeat; background-size: 100% auto;}
#gallery .btn { margin-top: -60px;}
#information { padding: 32px 0 0; background: #FFF url("img/top/information_bg.jpg") center top no-repeat; background-size: 100% auto;}
.infobox { margin-top: 24px; padding: 24px 48px; background: #DBEFF0;}
.infobox dl { height: 214px; padding: 24px; background: #FFF; font-size: 2rem; font-weight: bold; overflow-y: scroll;}
.infobox dt { clear: left; float: left; text-align: left; padding: 8px 0;}
.infobox dd { padding: 8px 0 8px 120px; border-bottom: 2px dotted #727171;}
#outline { padding: 32px 0; background: #FFF url("img/top/outline_bg.jpg") center top no-repeat; background-size: 100% auto;}
#contact { padding: 32px 40px; background: #FFF url("img/top/outline_bg.jpg") center top no-repeat; background-size: 100% auto;}
#contact .row { align-items: center; text-align: center;}
#contact ul { display: flex; justify-content: space-around; margin-top: 24px; font-size: 1.8rem; line-height: 1;}
#contact ul img { margin-bottom: 16px;}
#contact .map p { font-size: 2rem;}


/*PAGE*/
#title { padding: 30px 0; text-align: center;}
#title h1 { font-size: 2.8rem;}
#title h1.alt { position: relative; display: inline-block; margin-top: 40px; padding: 10px; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%);}
#title h1.alt span { display: block; padding: 16px 80px; background: #3E3A39; color: #FFF;}
#title p { margin: 30px 11.2vw 0; font-size: 2.2rem;}
.tab { margin: 30px 0;}
.tab ul { display: flex; text-align: center; border-bottom: 5px solid #00456A;}
.tab li { display: flex; width: 25%; margin-bottom: -1px; padding: 0 16px;}
.tab li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 8px; background: #96A695; border-radius: 8px 8px 0 0; font-size: 2rem; font-weight: bold; color: #FFF;}
.tab li a span { display: inline-block;}
.tab li a:hover, .tab li a.on { background-color: #00456A; opacity: 1;}
.list { display: flex; margin: 0 -15px;}
.list li { position: relative; width: calc(100% / 3 - 30px); margin: 15px; background: #FFF;}
.list li h2 { min-height: 82px; background: #00456A;}
.list li h2 a { display: flex; align-items: center; min-height: 82px; padding: 8px 20px; font-size: 2.4rem; color: #FFF;}
.list figure { margin: 20px;}
.list figure a { position: relative; display: block; width: 100%; padding-top: calc(200 / 283 * 100%); background: #E6E6E6;}
.list figure figcaption { position: absolute; bottom: 0; left: -20px; display: flex; align-items: center; height: 40px; padding: 0 10px 0  20px; background: #00456A; color: #FFF;}
.list figure figcaption::after { content: ''; position: absolute; bottom: 0; left: 100%; display: block; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 40px; border-color: transparent transparent transparent #00456a;}
.list dl { margin: 0 20px 20px;}
.list dt { margin: 10px 0 5px; padding: 4px; text-align: center; background: #727171; font-size: 1.4rem; color: #FFF;}
.list dd { font-size: 1.8rem;}
.list dd.price { font-size: 2.3rem;}
.list dd.price span { font-size: 4.8rem; font-weight: bold; color: #94252A;}
.list .comingsoon::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #6A6969 url("img/common/comingsoon.svg") center 180px no-repeat; mix-blend-mode: multiply;}
.chuukai .tab ul { border-bottom-color: #561A1E;}
.chuukai .tab li a:hover, .chuukai .tab li a.on, .chuukai .list li h2, .chuukai .list figure figcaption { background-color: #561A1E;}
.chuukai .list figure figcaption::after { border-left-color: #561A1E;}
#slide { width: 100vw; margin: 0 calc(50% - 50vw) 50px; padding: 0;}
#slide .slide-prev, #slide .slide-next { position: absolute; top: calc(50% - 77px); display: block;  width: 82px; height: 144px; background: url("img/common/next.svg") center no-repeat; z-index: 10;}
#slide .slide-next { right: 24%;}
#slide .slide-prev { left: 24%; transform: scaleX(-1);}
.point header { margin-bottom: 0;}
.point h2 { text-align: left;}
.point section { padding: 20px; background: #FFF; font-size: 2.2rem;}
.overview table { width: 100%; border-collapse: collapse; border-top: 1px dotted #231815;}
.overview tr {  border-bottom: 1px dotted #231815;}
.overview th, .overview td { padding: 8px 0;}
.overview th { width: 25%; padding-right: 20px; vertical-align: top; font-weight: normal; text-align-last: justify; text-justify: inter-ideograph; white-space: nowrap;}
.overview th::after { content: '｜';}
.remarks section { padding: 20px; background: #FFF; font-size: 1.4rem;}

.paging { display: flex; justify-content: center; align-items: center; margin-top: 30px; font-weight: bold;}
.nav-numbers { padding: 16px;}
.pagination a { display: inline-block; margin: 2px; padding: 0 8px;}
.pagination a:not(.prev):not(.next):not(.top) { padding: 12px 14px; color: #888;}
.pagination a strong { display: inline-block; width: 21px; height: 21px; text-align: center; background: #1A83DE; border-radius: 50%; color: #FFF;}
.pagination a.prev, .pagination a.next { width: 32px; height: 32px; vertical-align: middle; background: #00456A url("img/common/arr_w.svg") center no-repeat; background-size: 10px auto; text-indent: -9999px; overflow: hidden;}
.pagination a.prev { transform: scaleX(-1);}
.pagination a.top { font-size: 2rem;}
.pagination span { display: inline-block; margin: 2px;}
.pagination span.current { color: #000;}
.screen-reader-text { display: none;}

.pu { display: flex; flex-wrap: wrap; margin: -5px;}
.pu li { width: calc(100% / 6 - 10px); margin: 5px; background: #FFF;}
.pu li a, .pu li span { position: relative; display: block; width: 100%; padding-top: calc(600 / 820 * 100%); background: #FFF; overflow: hidden;}
.more { display: none;}

.outline { margin: 40px 0;}
.outline table { margin: 40px auto;border-collapse: collapse;}
.outline th, .outline td { padding: 8px 0;}
.outline th { width: 25%; padding-right: 20px; text-align: right; vertical-align: top; font-weight: normal; white-space: nowrap;}
.outline th::after { content: '｜'; margin-left: 16px;}
#map { margin: 50px 0;}

.step { display: flex; text-align: center; margin-bottom: 24px;}
.step li { position: relative; flex: 1; display: flex; justify-content: center; align-items: center; height: 48px; margin-right: 24px; background: #EBEBEC;}
.step li::after { content: ''; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 24px 0 24px 20px; border-color: transparent transparent transparent #ebebec;}
.step li.on { background-color: #A31F24; color: #FFF;}
.step li.on::after { border-left-color: #A31F24;}
.attention { margin-top: 16px; color: #FF0000;}
.form dt { padding: 16px 0 8px; text-align: left; font-size: 2.2rem; font-weight: 700; line-height: 1.2;}
.req { font-size: 1.6rem; color: #F00;}
.form label { display: block; margin: 16px 0; cursor: pointer;}
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"] { width: 100%; padding: 10px 16px; background: #FFF; border: 1px solid #3E3A39; vertical-align: middle;}
.form select { min-height: 46px; padding: 10px 16px; background: #FFF; border: 1px solid #3E3A39;}
.form textarea { width: 100%; min-height: 320px; padding: 10px 16px; background: #FFF; border: 1px solid #3E3A39;}
input[type="checkbox"] { display: none;}
input[type="checkbox"] + span { position: relative; display: block; padding-left: 28px;}
input[type="checkbox"] + span::before { content: ''; display: inline-block; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; margin-right: 8px; vertical-align: bottom; border: 1px solid #000;}
input[type="checkbox"] + span::after { content: ''; position: absolute; left: 6px; top: -2px; display: block; width: 12px; height: 20px; border-right: 3px solid #A31F24; border-bottom: 3px solid #A31F24; transform: rotate(45deg); opacity: 0;}
input[type="checkbox"]:checked + span::after { opacity: 1;}
input[type="radio"] { display: none;}
input[type="radio"] + span { position: relative; display: inline-block; margin-right: 24px; padding-left: 28px; vertical-align: bottom;}
input[type="radio"] + span::before, .wpcf7c-conf-hidden + span::before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 16px; height: 16px; background: #FFF; border: 1px solid #DBDBDB; border-radius: 50%;}
input[type="radio"]:checked + span::after, .wpcf7c-conf-hidden + span::after { content: ''; position: absolute; top: -2px; left: -2px; display: block; width: 20px; height: 20px; border: 6px solid #A31F24; border-radius: 50%;}
.submit { margin-top: 40px; text-align: center;}
.submit input[type="submit"] { display: inline-block; width: 100%; max-width: 260px; margin: 0 16px; padding: 16px 32px; background: #727171; font-weight: 700; color: #FFF;}
.submit input[type="submit"].disabled { background: #999;}
.submit input[type="submit"]:not(.disabled):hover { opacity: 0.7;}
.submit input[type="button"] { display: inline-block; width: 100%; max-width: 260px; margin: 0 16px; padding: 16px 32px; background: #999; border-radius: 4px; font-weight: 700; color: #FFF;}
.wpcf7c-conf { background-color: #DDD!important;}
.wpcf7-submit { background-color: #A31F24!important; color: #FFF!important;}
.attention { font-weight: 700; color: #D8382C;}
.privacy { height: 200px; margin: 24px 0; padding: 16px; background: #FFF; border: 1px solid #727171; font-size: 1.6rem; overflow: auto;}
.caution { margin: 30px 0 20px; text-align: center; font-size: 2.6rem; font-weight: bold; color: #E60012;}
.agree { display: block;}
.unit { display: inline-block; margin: 0 4px;}



@media only screen and (max-width: 1024px){
body { font-size: 1.7rem;}
#header { justify-content: space-between; padding: 0 5.6vw;}
#nav { position: fixed; top: 75px; left: -100%; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; height: calc(100vh - 75px); padding: 0 70px; background: rgba(255,255,255,.9); z-index: 500; transition: 1s cubic-bezier(.19,1,.22,1);}
#nav li { padding: 1.6vh; overflow: hidden;}
#nav li a { color: #FFF;}
#open { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; pointer-events: auto;}
#open div { position: relative; width: 24px; height: 17px;}
#open span { position: absolute; left: 0; display: block; width: 24px; height: 1px; background: #FFF; transition: .2s linear;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 7px;}
#open span:nth-child(3) { top: 14px;}
.open #open span:nth-child(1) { top: 7px; transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0;}
.open #open span:nth-child(3) { top: 7px; transform: rotate(-45deg);}
.open #nav { pointer-events: auto; left: 0;}
.open #nav li a { opacity: 1; transform: translateY(0); transition: 2.4s cubic-bezier(.19,1,.22,1);}

#pagetop { right: 16px; width: 50px;}
#footer { flex-direction: column; align-items: center;}
#footer address { clear: both; font-size: 1rem;}
#info { order: 0; margin: 8px 0;}
#info dt { margin: 0 auto 16px; width: 112px; text-align: center;}
#info dd { font-size: 1.3rem;}
#info dd.sub { font-size: 1.1rem;}
#contactus { display: flex; justify-content: space-between;}
#contactus h3 { display: flex; justify-content: center; align-items: center; width: 30%; margin-bottom: 0; font-size: 1.4rem;}
#contactus p { width: 66%; font-size: 1.3rem;}

#main:not(.wide):not(.full) { margin: 0 5.6vw;}
article { position: relative; margin: 0 5.6vw 50px;}
article header h2 { font-size: 2.2rem;}
section + section { margin-top: 80px;}
section p, section dl, section table { line-height: 1.7;}
.row:not(.five) { display: block; margin: 0!important;}
.row:not(.five) > * { width: 100%!important; max-width: 100%!important; margin: 0 0 40px!important;}
.btn div { margin: 0;}
.btn a { width: auto; padding: 8px 16px; font-size: 1.6rem;}
.btn a::after { width: 8px; height: 12px; margin-left: 8px;}
.more { margin-top: 40px;}
.sp { display: block;}
.pc { display: none;}

#property { background-image: url("img/top/property_bg_sp.jpg");}
#gallery { background-image: url("img/top/gallery_bg_sp.jpg"); background-size: cover;}
#gallery .btn { margin-top: 24px;}
#information { background-image: url("img/top/information_bg_sp.jpg");}
.infobox { padding: 16px;}
.infobox dl { padding: 16px; font-size: 1.6rem;}
.infobox dd { padding: 8px 0 8px 100px;}
#outline { background-image: url("img/top/outline_bg_sp.jpg");}
#contact { padding: 32px 0 0; background-image: url("img/top/outline_bg_sp.jpg");}
#contact ul { font-size: 1.4rem;}
#contact li { margin: 0 8px; white-space: nowrap;}
#contact li img { width: 80%;}
#contact .map { padding: 16px;}
#contact .map p { font-size: 1.3rem;}

#title { margin: 0 -5.6vw; padding: 15px 0;}
#title h1 { font-size: 2rem;}
#title p { margin: 15px 11.2vw 0; font-size: 1.4rem;}
.tab li { padding: 0 1px;}
.tab li a { font-size: 2vw; white-space: nowrap; line-height: 1.4;}
.tab li a span { display: block; font-size: 1.4vw; letter-spacing: -0.1em;}
.list { flex-wrap: wrap; margin: 0 -10px;}
.list li { width: calc(100% / 2 - 20px); margin: 10px;}
.list li h2 { min-height: 40px;}
.list li h2 a { min-height: 40px; padding: 8px; font-size: 1.4rem;}
.list figure { margin: 10px;}
.list figure figcaption { left: -10px; height: 16px; padding: 0 0 0 10px; font-size: 1rem;}
.list figure figcaption::after { border-width: 16px 0 0 16px;}
.list dl { margin: 0 10px 10px;}
.list dt { padding: 0 2px; font-size: 1.2rem;}
.list dd { font-size: 1rem;}
.list dd.price { font-size: 1.6rem;}
.list dd.price span { font-size: 2.4rem;}
.list .comingsoon::after { background-position: center 40%; background-size: 60% auto;}
#slide { width: auto; margin: 0 5.6vw 30px;}
#slide .slide-prev, #slide .slide-next { width: 20px; background-size: 20px auto;}
#slide .slide-next { right: 0!important;}
#slide .slide-prev { left: 0!important;}
.point header { margin-bottom: 0;}
.point h2 { text-align: left;}
.point section { font-size: 1.6rem;}
.remarks section { font-size: 1.2rem;}

.paging { display: block; text-align: center;}

.more { display: flex; flex-direction: column; width: 100%; margin: 16px 0 8px; text-align: center;}
.more::after { content: ''; width: 15px; height: 6px; margin: 0 auto; background: url("img/common/more.svg") center bottom no-repeat; cursor: pointer;}
.more.on span { display: none;}
.more.on::after { transform: scaleY(-1);}
.pu li { width: calc(100% / 3 - 10px);}
.pu li:nth-child(n + 4) { display: none;}

.outline { margin: 16px 5.6vw;}
.outline table { font-size: 1.4rem;}
.outline th { padding-right: 10px;}
.outline th::after { margin-left: 10px;}
}






@media print {
#container { width: 1024px;}
}