@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@700&display=swap');
/* 外部フォント不可の場合は置き換えてください */

body{
 margin: 0;
 padding: 0;
 -webkit-font-smoothing: subpixel-antialiased;
}
.wrapper{
 width: 1000px;
 margin: auto;
}

header{
 background: linear-gradient(to left, #d2446a, #ae1837);
 padding: 1em 0;
}
header h1{
 margin: 0;
 font-family: serif;
 color: #ffffff;
}
header p.subtitle{
 margin: 0;
 font-family: sans-serif;
 color: #ffffff;
}

footer{
 padding: 1em 0;
 background: #3a3a3a;
 text-align: center;
 color: #ffffff;
}

/* ヘッダー下 */
div.topimg{
 margin: 70px auto 50px;
 text-align: center;
}
div.message{
 background: url("../img/round.png") no-repeat top center;
 text-align: center;
 min-height: 200px;
}
div.message p.title{
 margin: 0 auto;
 font-family: 'Archivo Narrow', sans-serif;
 font-size: 3em;
 letter-spacing: 0.1em;
}
div.message p.lh02{
 line-height: 2em; 
}

div#howto{
 background: url("../img/howto_wall.png") no-repeat top center;
 min-height: 914px;
}
div.howtoWP{
 position: relative;
}
div.howtologo{
 position: absolute;
 left: -5px;
 top: 50px;
}
div.howtoillust{
 position: absolute;
 right: -5px;
 top: 50px;
}
div.howtobox{
 position: absolute;
 top: 80px;
 left: 50%;
 transform: translate(-50%, 0);
}

.wb{
 background: #ffffff;
 padding: 10px 20px;
 border-radius: 10px;
}
div.apply{
 position: relative;
 display: inline-block;
 font-family: sans-serif;
 font-weight: bold;
 font-size: 2em;
 color: #FFFFFF;
}
div.apply::before {
 content: "";
 width: 100%;
 height: 30%;
 position: absolute;
 top: 55%;
 left: 0;
 background: linear-gradient(45deg, transparent 0%, #39b54a 0% 70%, transparent 90%);
 z-index: -1;
}
p.applyTxt{
 color: #FFFFFF;
 padding: 1em 0;
 line-height: 2em;
}
p.applyTxt i{
 color: #fcee21;
 font-style: normal;
}

ul.links{
 list-style: none;
 display: flex;
 justify-content: space-between;
 padding: 0;
}
ul.links li{
 display: inline-block;
}
a.arrow{
 position: relative;
 display: inline-block;
 padding: 0 0 0 1.5em;
 color: #ae1837;
 vertical-align: middle;
 text-decoration: none;
 font-size: 1.6em;
 font-weight: bold;
 font-family: sans-serif;
}
a.arrow::before,
a.arrow::after{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 content: "";
 vertical-align: middle;
}
a.triangle::before{
 width: 1.2em;
 height: 1.2em;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background: #ae1837;
}
a.triangle::after{
 left: 0.3em;
 box-sizing: border-box;
 width: 0.2em;
 height: 0.2em;
 border: 0.4em solid transparent;
 border-left: 0.7em solid #fff;
}

/* 連絡方法 */
div.reception{
 padding: 1em 0;
 text-align: center;
}
div.contact{
 margin-bottom: 1em;
}
div.contact img{
 vertical-align: bottom;
}
p.notes{
 color: #FFFFFF;
 font-size: 0.8em;
}

div.inquiry_link{
 margin: 130px auto;
 text-align: center;
 font-size: 1.5em;
 font-family: sans-serif;
}
div.inquiry_link .button {
 display: inline-block;
 width: 280px;
 height: 60px;
 text-align: center;
 text-decoration: none;
 line-height: 66px;
 outline: none;
 background-color: #333;
 color: #ffffff;
 border-radius: 50px;
}
div.inquiry_link .button:hover {
 background-color: #ae1837;
}
div.inquiry_link .button::before,
div.inquiry_link .button::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
}
div.inquiry_link .button,
div.inquiry_link .button::before,
div.inquiry_link .button::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}

/* 大枠 */
div.apartment{
 padding-top: 100px;
}
ul.apartmentTitle{
 list-style: none;
 width: 100%;
}
ul.apartmentTitle li{
 display: inline-block;
}
li.apname{
 border-left: solid 7px;
 padding-left: 10px;
 font-size: 2em;
 font-weight: bold;
 font-family: sans-serif;
 line-height: 1em;
}
.blR{
 border-left-color: #ae1837!important;
}
.blG{
 border-left-color: #39b54a!important;
}
li.apbox{
 padding: 4px 10px;
 margin: 0 1em;
 border-radius: 10px;
 color: #ffffff;
 font-size: 1.4em;
 font-weight: bold;
 font-family: sans-serif;
 vertical-align: text-bottom;
}
.bR{
 background: #ae1837;
}
.bG{
 background: #39b54a;
}
li.rent{
 font-size: 3em;
 font-weight: bold;
 font-family: sans-serif;
 font-style: normal;
 line-height: 0.8em;
 vertical-align: text-bottom;
 }
.wsR{
 color: #ae1837;
}
.wsG{
 color: #39b54a;
}

/* 中枠 */
div.apartmentLeft{
 display: inline-block;
 width: 418px;
 vertical-align: top;
}
div.apartmentRight{
 display: inline-block;
 width: 560px;
 vertical-align: top;
}

/* 詳細 */
table.apartment-data {
 margin: 0;
 border-collapse:collapse;
 font-size: 0.8em;
}
.tbR{
 border: #ae1837 solid 1px;
}
.tbG{
 border: #39b54a solid 1px;
}
table.apartment-data tr.bbR {
 border-bottom: #ae1837 solid 1px;
}
table.apartment-data tr.bbG {
 border-bottom: #39b54a solid 1px;
}
table.apartment-data th{
 width: 79px;
 padding: 10px;
}
table.apartment-data th.thR {
 background: linear-gradient(to left, #d2446a, #ae1837);
 color: #fff;
}
table.apartment-data th.thG {
 background: linear-gradient(to left, #39b54a, #8cc63f);
 color: #fff;
}
table.apartment-data td {
  padding: 10px;
}
table.apartment-data td.tdhalf{
 width: 150px !important;
}

/* 写真 */
div.gallery{
 margin: 0;
}
div.gallery ul{
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 padding: 0;
}
div.gallery li{
 width: 150px;
 height: 110px;
 overflow: hidden;
 text-align: center;
 margin: 0 5px 10px;
}
div.gallery li img{
 height:100%;
}

/* 動画・紹介 */
div.view{
 text-align: center;
}
div.movie, div.camera{
 display: inline-block;
 position: relative;
 margin: 20px;
}
div.viewtitle{
 position: absolute;
 top: 0;
 left: -40px;
}
div.viewtube{
 margin: 70px 0 20px;
}

/* アクセス */
div.access{
 margin: 150px 0 100px;
}
div.acR{
 background: linear-gradient(to left, #d2446a, #ae1837);
}
div.acG{
 background: linear-gradient(to left, #39b54a, #8cc63f);
}
iframe.gmap{
 display: block;
 margin: auto;
 padding: 50px 0;
 width: 930px;
 height: 570px;
 border: none;
}

/* その他賃貸 */
div.rental{
padding-bottom: 150px;
}

/* タブ */
.tab-title{
 width: 90%;
 margin: 150px auto 0;
 font-family: sans-serif;
 font-weight: bold;
 font-size: 2em;
 color: #ae1837;
 border-left: solid 7px;
 padding-left: 10px;
 border-left-color: #ae1837;
}
.tab-group{
 display: flex;
 justify-content: center;
 width: 90%;
 margin: 100px auto 0;
 padding: 0;
}
.tab{
 flex-grow: 1;
 padding:5px;
 list-style:none;
 text-align:center;
 cursor:pointer;
 border-bottom: #ae1837 solid 1px;
}
.panel{
 display:none;
}
.tab.is-active{
 background: linear-gradient(to left, #d2446a, #ae1837);
 color:#FFF;
 transition: all 0.2s ease-out;
}
.panel.is-show{
 display:block;
}
#tab-G .tab{
 border-bottom: #8cc63f solid 1px!important;
}
#tab-G .tab.is-active{
 background: linear-gradient(to left, #39b54a, #8cc63f)!important;
}
#tab-G .tab-title{
 color: #39b54a!important;
 border-left-color: #39b54a!important;
}

/* PAGE TOP */
.pagetop{
 position:fixed;
 bottom:5px;
 right:5px;
}
.pagetop a{
 display:block;
 padding:15px;
 background:rgba(255,255,255,0.85);
 border-radius:20px;
 height: 20px;
}
.pagetop a:hover{
  background:rgba(0,0,0,0.40);}
.pagetop-arrow{
 width: 30px;
 height: 30px;
 border: 5px solid;
 border-color: #565656 #565656 transparent transparent;
 transform: rotate(-45deg);
}