/* CSS Document */
#main{
overflow: hidden;
color: #503200;
font-weight: 500;
}
#main article{
display: grid;
grid-gap: clamp(32px, 7.2vw, 48px) 0;
padding: clamp(32px, 7.2vw, 48px) 0;
}
#main article>*>*{
width: var(--wrap);
margin: 0 auto;
}
#main section{
display: grid;
grid-gap: 1em 0;
margin: 0;
}
#main section h3{
color: var(--color-theme);
font-weight: bold;
padding: 0 48px;
}
#main section h3,
#main .iconLabel{
display: grid;
grid-gap: 6px;
grid-template-columns: 24px auto;
}
#main section h3:before,
#main .iconLabel:before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: var(--color-theme);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
justify-self: center;
}
@media (max-width: 575.98px) {
#main section h3{
padding: 0;
}
}
#detailHead {
display: grid;
grid-gap: 10px;
}
#detailHead h2{
font-size: clamp(24px, 3.6vw, 36px);
font-weight: bold;
}
#detailHead h2+p{
text-align: right;
}
#detailHead h2+p span{
font-size: clamp(28px, 3.6vw, 40px);
font-weight: bold;
color: var(--color-theme);
margin-left: 8px;
}
#detailType{
order: -1;
display: flex;
justify-content: space-between;
}
#detailType p{
font-weight: bold;
}
#detailType p+p{
color: #fff;
background: #503200;
border-radius: 9999px;
font-weight: normal;
font-size: 12px;
padding: 2px 10px;
}
#detailType .iconLabel:before {
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
#detailInfo{
display: grid;
grid-gap: 10px;
}
#detailInfo .iconLabel:before {
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
#detailInfoArray{
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 4px;
}
#detailInfoArray dl{
display: flex;
column-gap: 10px;
align-items: center;
}
#detailInfoArray dt{
padding: 2px 4px;
background: rgba(var(--color-theme-rgb), 0.1);
}
#detailProperty{}
#detailProperty ul{
display: flex;
flex-wrap: wrap;
gap: 5px;
}
#detailProperty li{
width: max(calc((100% - 4 * 5px) / 5), 170px);
color: rgba(var(--color-rgb), 0.2);
border: 1px solid currentColor;
border-radius: 2px;
padding: 3px 0;
font-size: 12px;
font-weight: bold;
text-align: center;
display: grid;
align-items: center;
}
#detailProperty li.active{
background: rgba(var(--color-theme-rgb), 0.1);
color: var(--color-theme);
}
@media (max-width: 575.98px) {
#detailHead,
#detailInfo{
grid-gap: 10px;
}
#detailType p+p {
width: fit-content;
padding: 4px 10px;
}
#detailInfoArray dl{
column-gap: 20px;
}
#detailProperty ul{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
#detailProperty li{
width: auto;
}
}
#detailPropertyText>div{
border: 2px solid rgba(var(--color-rgb), 0.2);
border-radius: 2px;
padding: 5px;
margin-top: 5px;
font-size: 12px;
}
#detailPoint{}
#detailPoint div{
background: rgba(var(--color-theme-rgb),0.1);
padding: 32px 48px;
}
#detailPoint span{
font-weight: bold;
margin-bottom: 10px;
display: block;
}
#detailPoint h3:before {
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
@media (max-width: 575.98px) {
#detailPoint div{
padding: 24px;
}
}
#detailPhoto{
display: grid;
grid-gap: 8px;
}
#detailPhoto li img{
width: 100%;
aspect-ratio: 600 / 400;
object-fit: cover;
}
#detailPhotoSlide{
display: grid;
grid-gap: 16px;
}
#detailPhotoSlide li{
margin: 0 clamp(12px, 2.4vw, 16px);
}
#detailPhotoSlide img{
height: clamp(250px, 50vw, 500px);
}
#detailPhotoSlide img+div{
display: flex;
justify-content: space-between;
margin: 10px auto;
}
#detailPhotoSlide .detailPhotoCounter {
background: rgba(var(--color-theme-rgb), 0.1);
padding: 0 8px;
}
#detailPhotoSlide .slick-arrow{
align-self: center;
filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
z-index: 1;
width: clamp(40px, 7.2vw, 50px);
border-radius: 8px;
font-size: 0;
background: var(--color-theme);
}
#detailPhotoSlide .slick-arrow:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(50%, 25px);
aspect-ratio: 1;
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,') center no-repeat;
-webkit-mask-size: contain;
background: currentColor;
transform: translate(-50%, -50%);
}
#detailPhotoSlide .slick-prev:before{
transform: translate(-50%, -50%) scale(-1, 1);
}
@media (min-width: 576px) {
#detailPhotoSlide {
grid-template-columns: auto 1fr auto;
}
}
@media (min-width: 576px) and (max-width:767.98px) {
#detailPhotoSlide img+div{
width: 92%;
}
}
@media (max-width: 575.98px) {
#detailPhotoSlide li img {
height: 55vw;
width: 80vw;
}
#detailPhotoSlide .slick-arrow{
width: 40px;
height: 40px;
min-height: auto;
background: none;
position: absolute;
transform: translateY(-50%);
}
#detailPhotoSlide .slick-arrow:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: min(40%, 20px);
background: #fff;
}
#detailPhotoSlide .slick-prev{
left: 2%;
}
#detailPhotoSlide .slick-next{
right: 2%;
}
}
#detailPhotoSlideNav{
margin-top: clamp(16px, 3.6vw, 24px);
}
#detailPhotoSlideNav li{
margin: 0 10px;
opacity: 0.5;
}
#detailPhotoSlideNav .caption{
display: none;
}
#detailPhotoSlideNav li.slick-current{
opacity: 1;
}
#detailPhotoSlideNav.slick-slider{
display: grid;
}
#detailPhotoSlideNav .slick-list{
grid-area: main;
overflow: visible;
}
@media (min-width: 768px) {
#detailPhotoSlideNav li{
width: min(75vw, 660px);
}
}
#detailPhotoSlide,
#detailPhotoSlideNav{
opacity: 0;
transition: opacity .3s linear;
}
#detailPhotoSlide.slick-initialized,
#detailPhotoSlideNav.slick-initialized{
opacity: 1;
}
#detailMap{
width: 100%;
}
#detailAround{}
#detailAround h3:before {
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
#detailAround ul{
display: grid;
gap: 10px;
}
#detailAround li{
background: rgba(var(--color-theme-rgb),0.1);
padding: 16px;
text-align: center;
min-height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 576px) {
#detailAround ul{
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px) {
#detailAround ul{
grid-template-columns: 1fr 1fr 1fr;
}
}
#detailBody{}
#detailBody h3:before {
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
margin-top: -3px
}
#detailBody>div{
grid-template-columns: 1fr 1fr;
column-gap: 32px;
background: rgba(var(--color-theme-rgb),0.1);
padding: 0 48px;
}
#detailBody a{
color: var(--color-theme);
text-decoration: none;
}
#detailBody dl{
display: grid;
grid-template-columns: 200px 1fr;
}
#detailBody dt,
#detailBody dd{
padding: 32px 0;
border-bottom: 1px solid #d2cdbe;
}
#detailBody dt{
font-weight: bold;
}
#detailBody dd span{
display: inline-block;
margin-right: 16px;
margin-bottom: 8px;
}
#detailBody .noLine>*{
border: none;
}
#detailBody .colSin{
grid-column: 1/3;
}
@media (max-width: 767.98px) {
#detailBody .noLinePc>*{
border-bottom: 1px solid #d2cdbe;
}
}
@media (max-width: 575.98px) {
#detailBody>div{
padding: 0 16px;
/*width: 100%;*/
}
#detailBody dl {
grid-template-columns: 100px 1fr;
}
#detailBody dd {
padding-left: 16px;
}
}
#detailFooter{}
#detailFooter>div{
display: flex;
justify-content: center;
gap: 50px;
margin: 32px auto;
}
#detailFooter>*>*{
width: min(80%, 300px);
display: flex;
gap: 18px;
justify-content: center;
align-items: center;
min-height: 76px;
letter-spacing: 1.25px;
border-radius: 16px;
color: #fff;
}
#detailFooter button{
background: #ff8296;
font-weight: 500;
}
#detailFooter a{
background: #00a0e6;
text-decoration: none;
font-weight: 500;
}
#detailFooter button:before,
#detailFooter a:before{
content: "";
width: 24px;
height: 24px;
background: #fff;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
justify-self: center;
margin-top: 2px;
}
#detailFooter button:before{
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
#detailFooter a:before{
-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,");
}
@media (max-width: 767.98px) {
#detailFooter>div{
flex-direction: column;
}
#detailFooter>*>*{
margin: 0 auto;
display: grid;
grid-template-columns: 24px 135px;
justify-items: center;
}
}
@media (min-width: 768px) {
#detailBody>div {
display: grid;
}
}
/* for lower */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}
@media (max-width: 767.98px) {
/*767px以下*/
}
@media (max-width: 575.98px) {
/*575px以下*/
}
/* Small */
@media (min-width: 576px) {
/*576px以上*/
}
@media (min-width: 576px) and (max-width: 767.98px) {
/*576px～767px*/
}
@media (min-width: 576px) and (max-width: 991.98px) {
/*576px～991px*/
}
@media (min-width: 576px) and (max-width: 1199.98px) {
/*576px～1199px*/
}
@media (min-width: 576px) and (max-width: 1399.98px) {
/*576px～1399px*/
}
/* Medium */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 1399.98px) {
/*768px～1399px*/
}
/* Large */
@media (min-width: 992px) {
/*992px以上*/
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 992px) and (max-width: 1399.98px) {
/*992px～1399px*/
}
/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}
/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}