@charset "UTF-8";
/*
メインタイトル
サブタイトル
セクションタイトル
サブセクションタイトル
小見出し
注釈タイトル
*/
:root {
--darkblue: #363742;
--gray: #f4f3f3;
}
/**mixin**/
/* フェードインの中身 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* アクセシビリティ：ユーザーが動きを減らす設定ならアニメ無効 */
@media (prefers-reduced-motion: reduce) {
.are-tab-switch-content.is-active {
animation: none;
}
}
/*============================================== TOPスライド ==============================================*/
div.hero-slide-wrap {
position: relative;
}
div.hero-slide-wrap div.hero-slide {
overflow: hidden;
}
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.06);
}
}
div.hero-slide-wrap div.hero-slide .swiper-slide-active .swiper-img,
div.hero-slide-wrap div.hero-slide .swiper-slide-duplicate-active .swiper-img,
div.hero-slide-wrap div.hero-slide .swiper-slide-prev .swiper-img {
animation: zoomUp 7s linear 0s normal both;
}
div.hero-slide-wrap div.hero-slide .swiper-slide img {
height: auto;
width: 100%;
}
div.hero-slide-wrap div.hero-slide div.swiper-txt {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
div.hero-slide-wrap div.swiper-slide {
position: relative;
}
div.hero-slide-wrap div.swiper-slide p {
display: inline-block;
position: absolute;
color: #fff;
line-height: 1.4em;
font-size: 8.26vw;
z-index: 8;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p {
font-size: 2.72vw;
line-height: 1.6em;
font-weight: 500;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt01 {
top: 79vw;
left: 19vw;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt01 {
left: 16.6vw;
top: auto;
bottom: 13vw;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt02 {
top: 79vw;
left: 19vw;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt02 {
top: auto;
left: auto;
right: 12vw;
bottom: 15vw;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt02 {
right: 12vw;
bottom: 13vw;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt02 {
right: 5vw;
bottom: 12vw;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt03 {
top: 79vw;
left: 19vw;
text-shadow: 0 0 5px rgb(0, 0, 0);
text-align: center;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt03 {
left: 5vw;
top: 4vw;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt04 {
top: 79vw;
left: 19vw;
text-align: right;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt04 {
top: auto;
left: auto;
right: 7vw;
bottom: 15vw;
text-align: right;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt04 {
line-height: 1.2em;
right: 7vw;
bottom: 14vw;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt04 {
right: 6vw;
bottom: 11vw;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt05 {
top: 79vw;
left: 19vw;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt05 {
top: auto;
left: 5vw;
bottom: 11vw;
}
}
div.hero-slide-wrap div.swiper-slide p.hero-txt06 {
top: 79vw;
left: 19vw;
text-align: right;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap div.swiper-slide p.hero-txt06 {
left: auto;
right: 5vw;
top: 15vw;
}
}
div.hero-slide-wrap a.link-box {
display: block;
position: absolute;
width: 86%;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: #fff;
z-index: 2;
padding: 1vw;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box {
width: 250px;
padding: 2px;
left: auto;
right: 25px;
bottom: 25px;
}
div.hero-slide-wrap a.link-box:hover {
opacity: 0.7;
transition: all 0.4s;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box {
width: 350px;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap a.link-box {
width: 441px;
right: 50px;
}
}
div.hero-slide-wrap a.link-box p.category {
position: absolute;
top: 1vw;
left: 1vw;
background-color: #0075c1;
width: 22vw;
height: 22vw;
color: #fff;
padding: 0 0 0 1.6vw;
box-sizing: border-box;
clip-path: polygon(0 0, 0% 100%, 100% 0);
z-index: 2;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box p.category {
width: 60px;
height: 60px;
font-size: 11px;
top: 2px;
left: 2px;
padding: 0 0 0 7px;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box p.category {
width: 70px;
height: 70px;
font-size: 12px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner {
position: relative;
padding: 5%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 5%;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner {
padding: 3%;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner {
padding: 4%;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img {
width: 43%;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img {
width: 90px;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img {
width: 110px;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img {
width: 140px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img img {
-o-object-fit: cover;
object-fit: cover;
height: 24vw;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img img {
height: 75px;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.link-img img {
height: 90px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap {
width: 43%;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap {
width: 100px;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap {
width: 150px;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap {
width: 210px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap h3 {
font-size: 4.8vw;
margin-bottom: 0.6em;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap h3 {
font-size: 15px;
line-height: 1.2em;
margin-bottom: 0.6em;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap h3 {
font-size: 17px;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap h3 {
font-size: 20px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap p {
font-size: 3.2vw;
line-height: 1.5em;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap p {
font-size: 10px;
}
}
@media screen and (min-width: 1000px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap p {
font-size: 11px;
}
}
@media screen and (min-width: 1280px) {
div.hero-slide-wrap a.link-box div.link-box-inner div.txt-wrap p {
font-size: 12px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner .arrow {
width: 7vw;
height: 7vw;
right: 2%;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner .arrow {
width: 23px;
height: 23px;
}
}
div.hero-slide-wrap a.link-box div.link-box-inner .arrow::after {
border: 1.2vw solid transparent;
border-left: 1.6vw solid #fff;
}
@media screen and (min-width: 768px) {
div.hero-slide-wrap a.link-box div.link-box-inner .arrow::after {
border: 4px solid transparent;
border-left: 6px solid #fff;
}
}
/*============================================== campain ==============================================*/
div.campain-cont-wrap {
background: var(--gray);
padding-top: 15%;
}
@media screen and (min-width: 768px) {
div.campain-cont-wrap {
padding-top: 80px;
}
}
div.campain-cont-wrap h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
margin-bottom: 8vw;
}
@media screen and (min-width: 1280px) {
div.campain-cont-wrap h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
div.campain-cont-wrap h2.sub-title {
margin-bottom: 40px;
}
}
div.campain-cont-wrap h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
div.campain-cont-wrap h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
div.campain-cont-wrap h2.sub-title span.ja {
display: block;
font-weight: 400;
}
div.campain-cont-wrap div.campain-slide-wrap div.campain-slide-card {
width: 80%;
}
@media screen and (min-width: 768px) {
div.campain-cont-wrap div.campain-slide-wrap div.campain-slide-card {
width: 28%;
}
}
@media screen and (min-width: 1280px) {
div.campain-cont-wrap div.campain-slide-wrap div.campain-slide-card {
width: 20%;
}
}
/*campain-cont-wrap*/
/*============================================== search ==============================================*/
section.search {
background: var(--gray);
padding-top: 15%;
padding-bottom: 15%;
/*h2.sub-title{*/
/*div.area-tab-wrap*/
/*are-tab-switch-content*/
/*recommend-cont-wrap*/
}
@media screen and (min-width: 768px) {
section.search {
padding-top: 80px;
padding-bottom: 80px;
}
}
section.search h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
margin-bottom: 3%;
}
@media screen and (min-width: 1280px) {
section.search h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.search h2.sub-title {
margin-bottom: 25px;
}
}
section.search h2.sub-title span.line {
display: block;
width: 32px;
height: 1px;
background: #333;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
section.search h2.sub-title span.sub-title-txt {
display: inline-block;
padding-left: 36px;
font-weight: 400;
}
section.search h2.sub-title:nth-of-type(2) {
margin-top: 10%;
}
@media screen and (min-width: 768px) {
section.search h2.sub-title:nth-of-type(2) {
margin-top: 60px;
}
}
section.search div.area-tab-wrap {
width: 86%;
margin: 0 auto;
position: relative;
background: #FFF;
}
@media screen and (min-width: 1280px) {
section.search div.area-tab-wrap {
width: 74%;
max-width: 1200px;
}
}
section.search div.area-tab-wrap div.area-tab-switching {
display: flex;
flex-wrap: wrap;
border: solid 5px #b8c0bf;
border-right: none;
color: #000;
}
section.search div.area-tab-wrap div.area-tab-switching button.tab-switching {
width: 33.3333333333%;
padding: 6px 0;
border-right: solid 5px #b8c0bf;
color: #000;
}
@media screen and (min-width: 768px) {
section.search div.area-tab-wrap div.area-tab-switching button.tab-switching {
font-size: 18px;
padding: 12px 0;
font-weight: bold;
}
section.search div.area-tab-wrap div.area-tab-switching button.tab-switching:hover {
background: var(--darkblue);
color: #FFF;
transition: all 0.4s;
}
}
section.search div.area-tab-wrap div.area-tab-switching button.tab-switching[aria-selected=true] {
background: var(--darkblue);
color: #FFF;
}
section.search div.are-tab-switch-content {
display: none;
/*div.tenji-cont-wrap*/
/**************イベントの突貫***************/
/*bunjo-link-list*/
/*to-all-btn*/
/*swipperの矢印**/
}
section.search div.are-tab-switch-content.is-active {
display: block;
animation: fadeIn 240ms ease both;
}
section.search div.are-tab-switch-content div.tab-cont-wrap {
padding-top: 5%;
padding-bottom: 6%;
/*div.tenji-map-wrap*/
/*tenji-list-wrap*/
/*****************************分譲のタブ切り替えのcssを残しています。*****************************/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap {
width: 94%;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 35px;
display: flex;
align-items: flex-start;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter {
position: relative;
width: 68%;
margin: 0 auto;
/*button*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter {
width: 34%;
margin: 0;
margin-left: 1.2%;
}
}
@media screen and (min-width: 768px) and (min-width: 1280px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter {
margin-left: 2%;
}
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter:hover button {
opacity: 0.4;
transition: all 0.4s;
/* &[aria-checked="true"] {
opacity: 0.4;
transition: all 0.4s;
}*/
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter:hover button:hover {
opacity: 1;
transition: all 0.4s;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button {
display: block;
position: absolute;
opacity: 0.4;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button[aria-checked=true] {
opacity: 1;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button {
opacity: 0.4;
/* &:hover{
opacity: 0.6;
transition: all 0.4s;
}*/
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button[aria-checked=true] {
opacity: 1;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-hyougo {
width: 38.2%;
left: 0;
top: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-kyoto {
width: 34%;
left: 30%;
top: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-osaka {
width: 23%;
left: 41%;
top: 33%;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-shiga {
width: 32.8%;
right: 0;
top: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-nara {
width: 25.8%;
right: 6.8%;
top: 33%;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .map-filter button.map-wakayama {
width: 29.4%;
left: 35%;
bottom: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap {
position: relative;
/*tenji-list-slide-wrap*/
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap[data-region] {
display: none;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap[data-region].is-active {
display: block;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
border: 6px solid transparent;
border-bottom: 18px solid #B8C0BF;
transform: translate(-50%, -100%);
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap {
width: 59%;
margin-left: 5%;
position: relative;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 30px;
left: 0;
border: 12px solid transparent;
border-right: 36px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
@media screen and (min-width: 1280px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap {
width: 56%;
margin-left: 8%;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap::before {
top: 30px;
left: 0;
border: 20px solid transparent;
border-right: 58px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap div.inner-list-slide-wrap {
position: relative;
margin-top: 10%;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap div.inner-list-slide-wrap {
margin-top: 0;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box {
max-height: 32vh;
overflow-y: scroll;
border: solid 1px #B8C0BF;
/*.tenji-list*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box {
max-height: 400px;
border: solid 2px #B8C0BF;
}
}
@media screen and (min-width: 1000px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box {
max-height: 500px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list {
width: 82%;
margin: 0 auto;
margin-top: 10%;
/*.tenji-list-inner*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list {
width: 86%;
margin: 0 auto;
margin-top: 5%;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box {
display: flex;
flex-wrap: wrap;
margin-bottom: 10%;
/*div.tenji-list-inner-cont*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box {
margin-bottom: 30px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.event-link {
display: flex;
flex-wrap: wrap;
height: auto;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.event-link {
margin-bottom: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.event-link:hover {
transition: all 0.4s;
opacity: 0.4;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.event-link:hover .list-inner-image img {
transition: all 0.4s;
transform: scale(1.1);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .list-inner-image {
width: 46%;
overflow: hidden;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .list-inner-image {
/* width: 100%;*/
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .list-inner-image img {
/*
width: 100%;
height: 100%;
object-fit: cover;
*/
width: 100%;
aspect-ratio: 210/135; /* 7:4 と同じ */
-o-object-fit: cover;
object-fit: cover; /* or contain */
height: auto;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont {
width: 50%;
margin-left: 3%;
/*div.tenji-link-wrap{*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont {
/* margin-left: 0;
width: 100%;*/
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont h3.event-list-title,
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont h3.tenji-list-title {
line-height: 1.4em;
padding-bottom: 1em;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont h3.event-list-title,
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont h3.tenji-list-title {
min-height: 4em;
display: flex;
align-items: center;
padding-bottom: 0;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt,
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.tenji-list-txt {
display: none;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt,
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.tenji-list-txt {
font-size: 12px;
display: block;
line-height: 1.4em;
min-height: 3.6em;
padding-bottom: 1em;
}
}
@media screen and (min-width: 1000px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt,
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.tenji-list-txt {
padding-bottom: 1em;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt {
font-size: 3vw;
line-height: 1.4em;
display: block;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt {
font-size: 12px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont p.event-list-txt span {
display: inline-block;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle {
display: block;
text-align: center;
background: #e7e9eb;
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle {
font-size: 12px;
line-height: 1em;
padding: 6px 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle:hover {
background: #333;
color: #FFF;
opacity: 1;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle:hover span.arrow {
width: 1.2em;
height: 1.2em;
background: #FFF;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle:hover span.arrow::after {
border: 2px solid transparent;
border-left: 4px solid #333;
transform: translate(-25%, -50%);
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle span.arrow {
width: 1em;
height: 1em;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-shingle span.arrow::after {
border: 2px solid transparent;
border-left: 4px solid #FFF;
transform: translate(-25%, -50%);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact {
display: none;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact {
display: block;
font-size: 11px;
line-height: 1em;
padding: 5px 0em 5px 0em;
border: solid 1px #0075c1;
text-align: center;
}
}
@media screen and (min-width: 768px) and (min-width: 1000px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact {
font-size: 11px;
}
}
@media screen and (min-width: 768px) and (min-width: 1280px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact:hover {
background: #FFF;
color: #0075c1;
border: solid 1px #0075c1;
opacity: 1;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact:hover span.txt {
font-weight: 600;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact:hover span.arrow {
width: 1.2em;
height: 1.2em;
background: #0075c1;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact:hover span.arrow::after {
border: 2px solid transparent;
border-left: 4px solid #FFF;
transform: translate(-25%, -50%);
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact span.txt {
font-weight: 600;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact span.arrow {
width: 1em;
height: 1em;
background: #FFF;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box .inner-cont-box-txt-cont div.tenji-link-wrap a.tenji-link-to-contact span.arrow::after {
border: 2px solid transparent;
border-left: 4px solid #0075c1;
transform: translate(-25%, -50%);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box div.event-icon-wrap {
width: 100%;
margin-top: 0.6em;
display: flex;
justify-content: space-between;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box div.event-icon-wrap div.event-icon {
width: 49%;
text-align: center;
font-size: 3.4vw;
background: var(--gray);
border: solid 1px #9e9998;
border-radius: 5px;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box div.event-icon-wrap div.event-icon {
font-size: 12px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.tenji-link-to-contact {
display: block;
margin: 0 auto;
margin-top: 3%;
color: #FFF;
background: #0075c1;
padding: 5px 3em 5px 1em;
border-radius: 5px;
position: relative;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box ul.inner-cont-list li.inner-cont-box a.tenji-link-to-contact {
display: none;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap {
position: relative;
/*bunjo-link-list*/
/*****************************分譲のタブ切り替えのcssを残しています。*****************************/
/*bunjo-swich-cont*/
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
border: 6px solid transparent;
border-bottom: 18px solid #B8C0BF;
transform: translate(-50%, -100%);
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap {
width: 59%;
margin-left: 5%;
position: relative;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 30px;
left: 0;
border: 12px solid transparent;
border-right: 36px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
@media screen and (min-width: 1280px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap {
width: 56%;
margin-left: 8%;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap::before {
top: 30px;
left: 0;
border: 20px solid transparent;
border-right: 58px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list {
margin-top: 10%;
border: solid 1px #B8C0BF;
position: relative;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list {
margin-top: 0;
min-height: 260px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul {
width: 82%;
margin: 0 auto;
padding: 10% 0;
/*li*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul {
width: 86%;
padding: 0;
margin-top: 5%;
margin-bottom: 5%;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li {
margin-bottom: 5%;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li:last-child {
margin-bottom: 0;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a {
display: block;
font-weight: 600;
background: #E7E9EB;
position: relative;
padding: 5%;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a {
padding: 3% 5%;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a:hover {
background: var(--darkblue);
color: #FFF;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a:hover span.arrow {
background: #FFF;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a:hover span.arrow::after {
border-left: 5px solid var(--darkblue);
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a span.arrow {
width: 1.2em;
height: 1.2em;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-link-list ul li a span.arrow::after {
border: 4px solid transparent;
border-left: 5px solid #FFF;
transform: translate(-15%, -45%);
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap .bunjo-swich-cont {
display: none;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap .bunjo-swich-cont.is-active {
display: block;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box {
display: flex;
flex-wrap: wrap;
border-bottom: solid 1px var(--darkblue);
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box button.bunjo-list-swhich {
width: 44%;
background: #dedee0;
margin-right: 1%;
padding: 4% 0 3% 0;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box button.bunjo-list-swhich {
max-width: 165px;
padding: 15px 0 10px 0;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box button.bunjo-list-swhich span {
display: inline-block;
font-size: 1.3em;
line-height: 1em;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box button.bunjo-list-swhich span {
font-size: 18px;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap div.bunjo-list-swich-box button.bunjo-list-swhich.is-active {
background: var(--darkblue);
color: #FFF;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list {
margin-left: 2em;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list {
margin-top: 1.4em;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list li,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list li {
line-height: 2.4em;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list li a,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list li a {
display: block;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list li a,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list li a {
font-size: 18px;
font-weight: 600;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list li a:hover,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list li a:hover {
transition: all 0.4s;
opacity: 0.6;
}
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-jutaku-list li a span.dots,
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap ul.bunjo-list li a span.dots {
display: inline-block;
border: 4px solid transparent;
border-left: 6px solid #333;
transform: translate(0, -25%);
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap[data-region] {
display: none;
}
section.search div.are-tab-switch-content div.tab-cont-wrap .bunjo-list-wrap[data-region].is-active {
display: block;
}
section.search div.are-tab-switch-content div.event-list-wrap {
position: relative;
}
section.search div.are-tab-switch-content div.event-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
border: 6px solid transparent;
border-bottom: 18px solid #B8C0BF;
transform: translate(-50%, -100%);
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.event-list-wrap {
width: 59%;
margin-left: 5%;
position: relative;
}
section.search div.are-tab-switch-content div.event-list-wrap::before {
display: block;
content: "";
position: absolute;
top: 30px;
left: 0;
border: 12px solid transparent;
border-right: 36px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
@media screen and (min-width: 1280px) {
section.search div.are-tab-switch-content div.event-list-wrap {
width: 56%;
margin-left: 8%;
}
section.search div.are-tab-switch-content div.event-list-wrap::before {
top: 30px;
left: 0;
border: 20px solid transparent;
border-right: 58px solid #B8C0BF;
transform: translate(-100%, 0%);
}
}
section.search div.are-tab-switch-content div.event-link-list {
margin-top: 10%;
border: solid 1px #B8C0BF;
position: relative;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.event-link-list {
margin-top: 0;
/* min-height: 260px;*/
}
}
section.search div.are-tab-switch-content div.event-link-list ul {
width: 82%;
margin: 0 auto;
padding: 10% 0;
/*li*/
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.event-link-list ul {
width: 86%;
padding: 0;
margin-top: 5%;
margin-bottom: 5%;
}
}
section.search div.are-tab-switch-content div.event-link-list ul li {
margin-bottom: 5%;
}
section.search div.are-tab-switch-content div.event-link-list ul li:last-child {
margin-bottom: 0;
}
section.search div.are-tab-switch-content div.event-link-list ul li a {
display: block;
font-weight: 600;
background: #E7E9EB;
position: relative;
padding: 5%;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.event-link-list ul li a {
padding: 3% 5%;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.event-link-list ul li a:hover {
background: var(--darkblue);
color: #FFF;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.event-link-list ul li a:hover span.arrow {
background: #FFF;
}
section.search div.are-tab-switch-content div.event-link-list ul li a:hover span.arrow::after {
border-left: 5px solid var(--darkblue);
}
section.search div.are-tab-switch-content div.event-link-list ul li a span.arrow {
width: 1.2em;
height: 1.2em;
}
section.search div.are-tab-switch-content div.event-link-list ul li a span.arrow::after {
border: 4px solid transparent;
border-left: 5px solid #FFF;
transform: translate(-15%, -45%);
}
}
section.search div.are-tab-switch-content div.to-all-btn {
text-align: right;
margin-top: 4%;
}
section.search div.are-tab-switch-content div.to-all-btn a {
display: inline-block;
font-weight: 600;
line-height: 1em;
padding-right: 2em;
position: relative;
margin-right: 1em;
}
@media screen and (min-width: 768px) {
section.search div.are-tab-switch-content div.to-all-btn a {
margin-right: 0;
}
section.search div.are-tab-switch-content div.to-all-btn a:hover {
opacity: 0.6;
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.to-all-btn a:hover span.arrow {
transform: translate(0, -50%) scale(1.2);
transition: all 0.4s;
}
section.search div.are-tab-switch-content div.to-all-btn a:hover span.arrow::after {
transform: translate(-20%, -50%) scale(1.2);
}
}
section.search div.are-tab-switch-content div.to-all-btn a span.arrow {
width: 1.2em;
height: 1.2em;
transform: translate(0, -50%);
}
section.search div.are-tab-switch-content div.to-all-btn a span.arrow::after {
border: 3px solid transparent;
border-left: 4px solid #FFF;
}
section.search div.are-tab-switch-content .swiper-button-next {
background: #333;
width: 20px;
height: 50px;
right: -40px;
}
section.search div.are-tab-switch-content .swiper-button-next::after {
content: " ";
display: block;
position: absolute;
top: 50%;
right: 0;
border: 4px solid transparent;
border-left: 6px solid #FFF;
transform: translate(-50%, -50%);
}
section.search div.are-tab-switch-content .swiper-button-prev {
background: #333;
width: 20px;
height: 50px;
left: -40px;
}
section.search div.are-tab-switch-content .swiper-button-prev::after {
content: " ";
display: block;
position: absolute;
top: 50%;
left: 40%;
border: 4px solid transparent;
border-right: 6px solid #FFF;
transform: translate(-50%, -50%);
}
section.search h3.section-title {
width: 86%;
font-size: 1.2em;
text-align: center;
margin: 0 auto;
padding: 2% 0;
background: var(--darkblue);
color: #FFF;
border: solid 5px #b8c0bf;
}
@media screen and (min-width: 768px) {
section.search h3.section-title {
font-size: 18px;
padding: 8px 0;
}
}
@media screen and (min-width: 1280px) {
section.search h3.section-title {
width: 74%;
max-width: 1200px;
}
}
section.search div.recommend-cont-wrap {
width: 86%;
margin: 0 auto;
padding-bottom: 6%;
background: #FFF;
/*recommend-slider-wrap*/
/*to-all-btn*/
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap {
padding-bottom: 35px;
}
}
@media screen and (min-width: 1280px) {
section.search div.recommend-cont-wrap {
width: 74%;
max-width: 1200px;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap {
max-height: 420px;
padding-top: 5%;
overflow-y: scroll;
position: relative;
/* 右・左の位置 */
/* アイコンは疑似要素でシンプルな矢印（SVGや画像に差し替えてもOK） */
/*recommend-slider*/
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap {
max-height: none;
padding-top: 0;
padding-bottom: 20px;
overflow: visible;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next,
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-prev {
width: 20px;
height: 50px;
background: #333;
display: none;
cursor: pointer;
z-index: 5; /* スライドより前に */
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next,
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-prev {
display: block;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next {
right: 10px;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-prev {
left: 10px;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next::before,
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-prev::before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 0px;
border: 5px solid transparent;
border-right: 8px solid #FFF;
transform: translate(-50%, -50%);
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next::before {
border: 5px solid transparent;
border-left: 8px solid #FFF;
right: -5px;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-next.swiper-button-disabled,
section.search div.recommend-cont-wrap .recommend-slider-wrap .recommend-prev.swiper-button-disabled {
opacity: 0.4; /* 半透明に */
pointer-events: none; /* クリックも無効化（任意） */
transition: opacity 0.3s ease;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider {
width: 90%;
margin: 0 auto;
padding-top: 3%;
position: relative;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider .recomend-list-inner-image {
width: 100%;
aspect-ratio: 1024/455;
overflow: hidden;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider .recomend-list-inner-image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
display: block;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul li.recomend-cont-slide-wrap {
margin-top: 12%;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul li.recomend-cont-slide-wrap:first-child {
margin-top: 0;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul li.recomend-cont-slide-wrap {
margin-bottom: 0;
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul li a {
transition: all 0.6s;
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul li a:hover {
opacity: 0.6;
transition: all 0.6s;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider h3.recomend-list-title {
font-size: 1.2em;
letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider h3.recomend-list-title {
font-size: 16px;
line-height: 1.4em;
padding-top: 10px;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider p.recomend-list-txt {
line-height: 1.5em;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider p.recomend-list-txt {
font-size: 12px;
margin-top: 10px;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul.recomend-category-wrap {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul.recomend-category-wrap {
display: block;
margin-top: 10PX;
}
}
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul.recomend-category-wrap li {
font-family: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
width: 49%;
margin-top: 3%;
/* margin-bottom: 10%;*/
padding: 5px;
line-height: 1.2em;
text-align: center;
border-radius: 5px;
background: #f4f3f3;
border: solid 1px #cbc9c9;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap .recommend-slider-wrap div.recommend-slider ul.recomend-category-wrap li {
width: 80%;
font-size: 14px;
margin-top: 0;
margin-bottom: 10PX;
}
}
section.search div.recommend-cont-wrap div.to-all-btn {
display: block;
text-align: right;
margin-top: 4%;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap div.to-all-btn {
width: 90%;
margin: 0 auto;
}
}
section.search div.recommend-cont-wrap div.to-all-btn a {
display: inline-block;
font-weight: 600;
line-height: 1em;
padding-right: 2em;
position: relative;
margin-right: 1em;
}
@media screen and (min-width: 768px) {
section.search div.recommend-cont-wrap div.to-all-btn a {
margin-right: 0;
}
section.search div.recommend-cont-wrap div.to-all-btn a:hover {
opacity: 0.6;
transition: all 0.4s;
}
section.search div.recommend-cont-wrap div.to-all-btn a:hover span.arrow {
transform: translate(0, -50%) scale(1.2);
transition: all 0.4s;
}
section.search div.recommend-cont-wrap div.to-all-btn a:hover span.arrow::after {
transform: translate(-20%, -50%) scale(1.2);
}
}
section.search div.recommend-cont-wrap div.to-all-btn a span.arrow {
width: 1.2em;
height: 1.2em;
transform: translate(0, -50%);
}
section.search div.recommend-cont-wrap div.to-all-btn a span.arrow::after {
border: 3px solid transparent;
border-left: 4px solid #FFF;
}
/*section.search*/
/*
@media (max-width: 768px) {
section.search div.are-tab-switch-content div.tab-cont-wrap .inner-cont-list-wrap .inner-list-slide-box .inner-cont-list .inner-cont-box{
width: 100%!important;
}
}
*/
@media (max-width: 768px) {
div.recommend-slider .recommend-list-wrap.swiper-wrapper {
display: block;
}
}
section.townplan {
padding: 20vw 0;
/*townplan-tab-btn-wrap*/
/*div.bnr-unitedheim*/
}
@media screen and (min-width: 768px) {
section.townplan {
padding: 100px 0;
}
}
section.townplan h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
margin-bottom: 8vw;
}
@media screen and (min-width: 1280px) {
section.townplan h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.townplan h2.sub-title {
margin-bottom: 60px;
}
}
section.townplan h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.townplan h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
section.townplan h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.townplan div.townplan-tab-btn-wrap {
width: 86%;
margin: 0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
border-left: solid 5px #b8c0bf;
border-bottom: solid 5px #b8c0bf;
margin-bottom: 15vw;
}
@media screen and (min-width: 1280px) {
section.townplan div.townplan-tab-btn-wrap {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.townplan div.townplan-tab-btn-wrap {
margin-bottom: 70px;
}
}
section.townplan div.townplan-tab-btn-wrap button {
width: 33.3333333333%;
display: flex;
align-items: center;
justify-content: center;
border: solid 5px #b8c0bf;
border-left: none;
border-bottom: none;
font-size: 4.8vw;
font-weight: bold;
padding: 0.3em 0;
color: #000;
}
@media screen and (min-width: 768px) {
section.townplan div.townplan-tab-btn-wrap button {
width: 14.2857142857%;
font-size: 18px;
transition: all 0.4s;
}
section.townplan div.townplan-tab-btn-wrap button:hover {
background: var(--darkblue);
color: #FFF;
transition: all 0.4s;
}
}
section.townplan div.townplan-tab-btn-wrap button.all-btn {
width: 100%;
border-bottom: none;
}
@media screen and (min-width: 768px) {
section.townplan div.townplan-tab-btn-wrap button.all-btn {
width: 14.2857142857%;
}
}
section.townplan div.townplan-tab-btn-wrap button.is-active {
background: var(--darkblue);
color: #fff;
}
section.townplan .townplan-tab-switch-content {
width: 86%;
margin: 0 auto;
position: relative;
}
@media screen and (min-width: 1280px) {
section.townplan .townplan-tab-switch-content {
width: 74%;
max-width: 1200px;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap {
/*.townplan-list{*/
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list {
/*.townplan-list-cont{*/
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list {
display: flex;
flex-wrap: wrap;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont {
margin-bottom: 12vw;
/*townplan-txt*/
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont {
width: calc((100% - 60px) / 3);
margin-left: 30px;
margin-bottom: 43px;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont:nth-child(3n+1) {
margin-left: 0;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont a:hover {
opacity: 0.6;
transition: all 0.6s;
}
}
@media screen and (min-width: 1000px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont {
width: calc((100% - 60px) / 4);
margin-left: 20px;
margin-bottom: 43px;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont:nth-child(3n+1) {
margin-left: 20px;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont:nth-child(4n+1) {
margin-left: 0;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont div.townplan-image {
margin-bottom: 5vw;
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont div.townplan-image {
margin-bottom: 14px;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont div.townplan-image img {
width: 100%;
height: auto;
aspect-ratio: 37/32;
-o-object-fit: cover;
object-fit: cover; /* 画像が枠外にはみ出る場合にトリミング */
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont div.townplan-image img {
width: 100%;
height: auto;
aspect-ratio: 37/32;
-o-object-fit: cover;
object-fit: cover; /* 必要に応じて contain に変更可能 */
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont h3 {
font-size: 4.53vw;
margin-bottom: 0.6em;
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont h3 {
font-size: 17px;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont p.townplan-txt {
font-size: 3.2vw;
font-weight: 500;
letter-spacing: 0.2em;
line-height: 1.2em;
margin-bottom: 1.6em;
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont p.townplan-txt {
font-size: 12px;
}
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont p.townplan-txt .townplan-txt-inner {
display: block;
padding-left: 1.2em;
position: relative;
margin-bottom: 0.6em;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont p.townplan-txt .townplan-txt-inner::after {
content: "";
display: block;
position: absolute;
top: 0.6em;
background: #000;
left: 0;
width: 0.8em;
height: 1px;
}
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont ul.townplan-category-list li {
display: inline-block;
background: var(--gray);
border: solid 1px #d5d0cf;
font-size: 3.73vw;
line-height: 1.2em;
border-radius: 0.6em;
padding: 0.23em 0.8em;
font-weight: 500;
margin-right: 0.4em;
margin-bottom: 0.4em;
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont ul.townplan-category-list li {
font-size: 12px;
}
}
@media screen and (min-width: 1000px) {
section.townplan .townplan-tab-switch-content .townplan-list-wrap .townplan-list .townplan-list-cont ul.townplan-category-list li {
font-size: 14px;
}
}
section.townplan .townplan-tab-switch-content .townplan-more-btn {
border: solid 1px #443a38;
display: block;
width: 100%;
font-weight: bold;
font-family: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
letter-spacing: 0.1em;
font-size: 4.26vw;
padding: 0.8em 0;
color: #000;
}
@media screen and (min-width: 768px) {
section.townplan .townplan-tab-switch-content .townplan-more-btn {
font-size: 16px;
padding: 1em 0;
}
section.townplan .townplan-tab-switch-content .townplan-more-btn:hover {
background: var(--darkblue);
color: #FFF;
transition: all 0.4s;
}
}
section.townplan div.bnr-unitedheim {
width: 86%;
margin: 0 auto;
position: relative;
margin-top: 20vw;
}
@media screen and (min-width: 1280px) {
section.townplan div.bnr-unitedheim {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.townplan div.bnr-unitedheim {
width: 68%;
max-width: 860px;
margin-top: 50px;
}
section.townplan div.bnr-unitedheim a {
transition: all 0.4s;
}
section.townplan div.bnr-unitedheim a:hover {
opacity: 0.6;
transition: all 0.4s;
}
}
/*section.townplan*/
@keyframes lightcurtain-ani {
100% {
left: 100%;
}
}
section.design {
padding: 10% 0 15% 0;
/**/
/**/
/*.sec03-inner02*/
}
section.design h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
margin-bottom: 10%;
}
@media screen and (min-width: 1280px) {
section.design h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
section.design h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.design h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
section.design h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.design h3.section-title {
width: 86%;
margin: 0 auto;
position: relative;
font-weight: 400;
position: relative;
line-height: 1em;
margin-bottom: 10%;
}
@media screen and (min-width: 1280px) {
section.design h3.section-title {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.design h3.section-title {
margin-bottom: 50px;
}
}
section.design h3.section-title::before {
content: " ";
display: block;
width: 100%;
height: 1px;
background: var(--darkblue);
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
section.design h3.section-title span.bg-white {
display: inline-block;
position: relative;
background: #FFF;
padding-left: 35px;
padding-right: 1em;
}
section.design h3.section-title span.bg-white span.icon {
display: block;
width: 26px;
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
section.design h3.section-title span.bg-white span.ja {
font-weight: 400;
}
section.design .design-inner01 a.roomtour-btn {
display: block;
width: 86%;
margin: 0 auto;
position: relative;
background: var(--darkblue);
position: relative;
padding-top: 35%;
padding-bottom: 28%;
margin-bottom: 15%;
/* div.more-read */
}
@media screen and (min-width: 1280px) {
section.design .design-inner01 a.roomtour-btn {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn {
position: relative;
padding-top: 7%;
padding-bottom: 5%;
margin-bottom: 0;
overflow: hidden;
}
section.design .design-inner01 a.roomtour-btn::before {
position: absolute;
content: "";
top: 0;
left: -120%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.design .design-inner01 a.roomtour-btn:hover {
opacity: 0.9;
transition: all 0.8s;
}
section.design .design-inner01 a.roomtour-btn:hover::before {
animation: lightcurtain-ani 0.8s ease-out;
}
section.design .design-inner01 a.roomtour-btn:hover div.roomtour-img {
width: 40%;
transition: all 0.4s;
}
section.design .design-inner01 a.roomtour-btn:hover p {
transform: translate(8%, 0);
transition: all 0.4s;
}
section.design .design-inner01 a.roomtour-btn:hover div.more-read {
padding-right: 40px;
bottom: 50%;
transform: translate(20%, 50%);
transition: all 0.4s;
}
}
section.design .design-inner01 a.roomtour-btn div.roomtour-img {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn div.roomtour-img {
width: 34.5%;
transition: all 0.4s;
}
}
section.design .design-inner01 a.roomtour-btn p {
width: 88%;
margin: 0 auto;
color: #FFF;
padding-top: 0%;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn p {
width: 100%;
padding-left: 35%;
transition: all 0.4s;
}
}
section.design .design-inner01 a.roomtour-btn p span.en {
display: block;
font-size: 10vw;
font-weight: 100;
opacity: 0.6;
font-family: "YakuHanJP", "Zen Kaku Gothic Antique", sans-serif;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn p span.en {
font-size: 42px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner01 a.roomtour-btn p span.en {
font-size: 64px;
}
}
section.design .design-inner01 a.roomtour-btn p span.ja {
display: block;
font-weight: 600;
font-size: 5.4vw;
padding-top: 2%;
font-weight: 500;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn p span.ja {
font-size: 20px;
padding-top: 10px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner01 a.roomtour-btn p span.ja {
font-size: 25px;
padding-top: 30px;
}
}
section.design .design-inner01 a.roomtour-btn div.more-read {
position: absolute;
right: 5%;
bottom: 10%;
padding-right: 40px;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn div.more-read {
bottom: 50%;
transform: translate(0, 50%);
transition: all 0.4s;
}
}
section.design .design-inner01 a.roomtour-btn div.more-read span {
display: block;
color: #FFF;
}
@media screen and (min-width: 768px) {
section.design .design-inner01 a.roomtour-btn div.more-read span {
font-size: 13px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner01 a.roomtour-btn div.more-read span {
font-size: 13px;
}
}
@media screen and (min-width: 1280px) {
section.design .design-inner01 a.roomtour-btn div.more-read span {
font-size: 18px;
}
}
section.design .design-inner01 a.roomtour-btn div.more-read span.arrow {
width: 28px;
height: 28px;
background: #FFF;
}
section.design .design-inner01 a.roomtour-btn div.more-read span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
section.design .design-inner02 {
margin-top: 5%;
/*div.sec03-inner02-box*/
}
section.design .design-inner02 div.sec03-inner02-box {
width: 86%;
margin: 0 auto;
/*ul.photo-list-wrap*/
}
@media screen and (min-width: 1280px) {
section.design .design-inner02 div.sec03-inner02-box {
width: 74%;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*li.photo-list*/
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list {
width: 49%;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a {
display: block;
background: var(--darkblue);
color: #FFF;
padding-bottom: 10%;
position: relative;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a {
overflow: hidden;
padding-bottom: 5%;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a::before {
position: absolute;
content: "";
top: 0;
left: -140%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a:hover {
opacity: 0.9;
transition: all 0.8s;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a:hover::before {
animation: lightcurtain-ani 0.6s ease-out;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a:hover div.photo-list-img img {
transform: scale(1.1);
transition: all 0.4s;
opacity: 0.6;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.photo-list-img {
overflow: hidden;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.photo-list-img img {
transition: all 0.4s;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p {
padding: 8% 8% 0% 8%;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.en {
display: block;
font-size: 6vw;
font-family: "YakuHanJP", "Zen Kaku Gothic Antique", sans-serif;
font-weight: 100;
opacity: 0.6;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.en {
font-size: 36px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.en {
font-size: 46px;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.ja {
display: block;
font-weight: 600;
font-size: 5vw;
padding-top: 2%;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.ja {
font-size: 18px;
line-height: 1em;
padding-top: 15px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.ja {
font-size: 25px;
padding-top: 25px;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a p span.ja span.small-txt {
font-size: 0.6em;
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more {
width: 85%;
margin-left: 10%;
position: relative;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more {
width: auto;
position: absolute;
margin-left: 0;
padding-right: 40px;
right: 5%;
bottom: 4%;
transform: translate(0, 0%);
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more {
width: auto;
position: absolute;
margin-left: 0;
padding-right: 40px;
right: 5%;
bottom: 15%;
transform: translate(0, 0%);
}
}
@media screen and (min-width: 1280px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more {
bottom: 13%;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span {
font-size: 0.94em;
letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span {
font-size: 11px;
}
}
@media screen and (min-width: 1000px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span {
font-size: 13px;
}
}
@media screen and (min-width: 1280px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span {
font-size: 16px;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span.arrow {
width: 28px;
height: 28px;
background: #FFF;
}
@media screen and (min-width: 768px) {
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span.arrow {
top: 46%;
}
}
section.design .design-inner02 div.sec03-inner02-box ul.photo-list-wrap li.photo-list a div.read-more span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
/*section.sec03*/
/*============================================== LINE UP 商品ラインナップ ==============================================*/
section.series {
background: var(--gray);
width: 100%;
overflow: hidden;
padding: 20vw 0;
/**/
/*series-list*/
/*to-all-btn*/
}
@media screen and (min-width: 768px) {
section.series {
padding: 5% 0;
width: 86%;
margin: 0 auto;
position: relative;
}
}
@media screen and (min-width: 768px) and (min-width: 1280px) {
section.series {
width: 74%;
max-width: 1200px;
}
}
section.series h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
text-align: center;
}
@media screen and (min-width: 1280px) {
section.series h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
section.series h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.series h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
section.series h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.series h3.series-title {
width: 86%;
margin: 0 auto;
text-align: center;
margin-top: 8%;
margin-bottom: 4%;
}
@media screen and (min-width: 768px) {
section.series h3.series-title {
font-size: 18px;
margin-top: 20px;
margin-bottom: 45px;
}
}
@media screen and (min-width: 1000px) {
section.series h3.series-title {
font-size: 22px;
margin-top: 45px;
}
}
@media screen and (min-width: 1280px) {
section.series h3.series-title {
width: 74%;
}
}
section.series h3.series-title a {
display: block;
text-align: center;
background: var(--darkblue);
color: #FFF;
position: relative;
padding: 3% 0;
}
@media screen and (min-width: 768px) {
section.series h3.series-title a {
padding: 10px 0;
overflow: hidden;
}
section.series h3.series-title a::before {
position: absolute;
content: "";
top: 0;
left: -140%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.series h3.series-title a:hover {
opacity: 0.8;
transition: all 0.8s;
transition-duration: 0.4s;
}
section.series h3.series-title a:hover::before {
animation: lightcurtain-ani 1.2s ease-out;
}
}
@media screen and (min-width: 1000px) {
section.series h3.series-title a {
padding: 15px 0;
}
}
section.series h3.series-title a span.arrow {
width: 24px;
height: 24px;
background: #FFF;
}
section.series h3.series-title a span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
section.series div.series-list-wrap {
width: 98%;
margin-left: auto;
overflow-x: scroll;
}
@media screen and (min-width: 768px) {
section.series div.series-list-wrap {
overflow-x: visible;
width: 86%;
margin: auto;
}
}
@media screen and (min-width: 1280px) {
section.series div.series-list-wrap {
width: 74%;
}
}
section.series ul.series-list {
width: 243%;
padding-right: 5%;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
section.series ul.series-list {
width: 100%;
gap: 5%;
padding: 0;
}
}
section.series ul.series-list li {
width: 30%;
margin-left: 3.3333333333%;
}
@media screen and (min-width: 768px) {
section.series ul.series-list li {
margin: 0;
/* margin-bottom: 50px;*/
}
section.series ul.series-list li a {
transition: all 0.4s;
}
section.series ul.series-list li a:hover {
opacity: 0.6;
transition: all 0.4s;
}
}
section.series ul.series-list div.series-img {
position: relative;
}
@media screen and (min-width: 768px) {
section.series ul.series-list div.series-img span.series-ratio-box {
aspect-ratio: 272/175; /* ←ここで比率を固定 */
width: 100%;
overflow: hidden;
}
}
section.series ul.series-list div.series-img img {
-o-object-fit: cover;
object-fit: cover;
height: 40vw;
}
@media screen and (min-width: 768px) {
section.series ul.series-list div.series-img img {
width: 100%;
height: 100%;
}
}
section.series ul.series-list div.series-img span.series-category {
position: absolute;
top: 0;
left: 0;
color: #fff;
padding: 0 1em;
}
section.series ul.series-list div.series-img span.series-category.iron {
background: #616d85;
}
section.series ul.series-list div.series-img span.series-category.wood {
background: #89715c;
}
section.series ul.series-list div.series-logo img {
-o-object-fit: contain;
object-fit: contain;
height: 15vw;
margin-top: 3vw;
}
@media screen and (min-width: 768px) {
section.series ul.series-list div.series-logo img {
height: 70px;
margin-top: 15px;
}
}
section.series div.to-all-btn {
display: block;
text-align: right;
margin-top: 4%;
}
@media screen and (min-width: 768px) {
section.series div.to-all-btn {
width: 87%;
margin: 0 auto;
}
}
@media screen and (min-width: 1280px) {
section.series div.to-all-btn {
width: 74%;
}
}
section.series div.to-all-btn a {
display: inline-block;
font-size: 0.8em;
line-height: 1em;
padding-right: 2em;
position: relative;
margin-right: 1em;
}
@media screen and (min-width: 768px) {
section.series div.to-all-btn a {
margin-right: 0;
}
section.series div.to-all-btn a:hover {
opacity: 0.6;
transition: all 0.4s;
}
section.series div.to-all-btn a:hover span.arrow {
transform: translate(0, -50%) scale(1.2);
transition: all 0.4s;
}
section.series div.to-all-btn a:hover span.arrow::after {
transform: translate(-20%, -50%) scale(1.2);
}
}
section.series div.to-all-btn a span.arrow {
width: 1.2em;
height: 1.2em;
transform: translate(0, -50%);
}
section.series div.to-all-btn a span.arrow::after {
border: 3px solid transparent;
border-left: 4px solid #FFF;
}
/*section.series{*/
/*============================================== ABOUT US セキスイハイムの家づくり ==============================================*/
section.about {
padding: 15vw 0 0;
}
@media screen and (min-width: 768px) {
section.about {
padding: 150px 0 0;
}
}
section.about div.about-cont-wrap {
padding: 15vw 0;
position: relative;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap {
padding: 100px 0;
}
}
section.about div.about-cont-wrap::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: all 0.3s;
}
section.about div.about-cont-wrap.about-features-open::after {
opacity: 1;
background: url(../../img/top/about-bg01_sp.jpg) no-repeat center top;
background-size: cover;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap.about-features-open::after {
background: url(../../img/top/about-bg01_pc.jpg) no-repeat center top;
}
}
section.about div.about-cont-wrap.about-factory-open::after {
opacity: 1;
background: url(../../img/top/about-bg02_sp.jpg) no-repeat center top;
background-size: cover;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap.about-factory-open::after {
background: url(../../img/top/about-bg02_pc.jpg) no-repeat center top;
}
}
section.about div.about-cont-wrap.about-performance-open::after {
opacity: 1;
background: url(../../img/top/about-bg03_sp.jpg) no-repeat center top;
background-size: cover;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap.about-performance-open::after {
background: url(../../img/top/about-bg03_pc.jpg) no-repeat center top;
}
}
section.about div.about-cont-wrap.about-housebuilding-open::after {
opacity: 1;
background: url(../../img/top/about-bg04_sp.jpg) no-repeat center top;
background-size: cover;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap.about-housebuilding-open::after {
background: url(../../img/top/about-bg04_pc.jpg) no-repeat center top;
}
}
section.about div.about-cont-wrap.about-support-open::after {
opacity: 1;
background: url(../../img/top/about-bg05_sp.jpg) no-repeat center top;
background-size: cover;
}
@media screen and (min-width: 768px) {
section.about div.about-cont-wrap.about-support-open::after {
background: url(../../img/top/about-bg05_pc.jpg) no-repeat center top;
}
}
section.about div.about-cont {
width: 86%;
margin: 0 auto;
position: relative;
/**/
/*div.about-switch-card{*/
}
@media screen and (min-width: 1280px) {
section.about div.about-cont {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.about div.about-cont {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
}
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-cont-inner01 {
width: 230px;
}
}
@media screen and (min-width: 1000px) {
section.about div.about-cont div.about-cont-inner01 {
width: 320px;
}
}
@media screen and (min-width: 1280px) {
section.about div.about-cont div.about-cont-inner01 {
width: 358px;
}
}
section.about div.about-cont div.about-cont-inner02 {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-cont-inner02 {
width: calc(100% - 230px);
}
}
@media screen and (min-width: 1000px) {
section.about div.about-cont div.about-cont-inner02 {
width: calc(100% - 320px);
}
}
@media screen and (min-width: 1280px) {
section.about div.about-cont div.about-cont-inner02 {
width: calc(100% - 358px);
}
}
section.about div.about-cont h2.sub-title {
color: #fff;
margin-bottom: 7vw;
}
section.about div.about-cont h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.about div.about-cont h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
section.about div.about-cont h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.about div.about-cont div.about-change-btn {
color: #fff;
position: relative;
z-index: 0;
margin-bottom: 7vw;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn {
margin: 0;
}
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li {
margin-bottom: 1em;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a {
color: #fff;
padding-left: 3em;
letter-spacing: 0;
position: relative;
text-align: left;
font-size: 4.6vw;
display: block;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a {
display: inline-block;
font-size: 14px;
padding-left: 1.6em;
letter-spacing: 0.14em;
transition: all 0.3s;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active, section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a:hover {
/*
transform: scale(1.1);
opacity: 0.6;
transition: all 0.4s;
*/
color: var(--darkblue);
transition: all 0.3s;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active::after, section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a:hover::after {
width: 100%;
height: 100%;
background: #FFF;
left: 0;
top: 0;
transition: all 0.3s;
z-index: -1;
}
}
@media screen and (min-width: 1000px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a {
font-size: 18px;
}
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active span.line {
display: block;
transition: all 0.5s ease;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active span.line {
transform: translate(105%, 0) scaleX(1);
transform-origin: left;
}
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active span.line::after {
transition: all 0.1s linear;
transform: scaleX(1);
transform-origin: right;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a.active span.line::before {
transition: all 0.6s 0.1s ease;
transform: scaleY(1);
transform-origin: top;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a::after {
content: "";
display: block;
position: absolute;
background: #fff;
position: absolute;
top: 0.4em;
left: 1.4em;
width: 3.4vw;
height: 3.4vw;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a::after {
left: 0;
top: 0.42em;
width: 13px;
height: 10px;
transition: all 0.3s;
}
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line {
position: absolute;
pointer-events: none;
top: 3.4vw;
left: 0;
box-sizing: border-box;
width: 1.6em;
height: 70vw;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::after, section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::before {
content: "";
display: block;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::after, section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::before {
content: none;
}
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::after {
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: right;
}
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line::before {
height: 100%;
width: 1px;
transform: scaleY(0);
transform-origin: top;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-change-btn ul.about-change-btn-list li a span.line {
display: block;
border: none;
width: 200%;
height: 1em;
background: #fff;
top: 0.2em;
left: auto;
right: 0;
transform: translate(105%, 0) scaleX(0);
transform-origin: left;
}
}
section.about div.about-cont div.about-switch-card {
background: #FFF;
padding: 5% 0 10%;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card {
padding: 43px 0;
}
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-card-img {
width: 58%;
}
}
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box {
background: var(--gray);
padding: 5% 8%;
height: 41vw;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box {
width: 42%;
height: auto;
padding: 7% 4%;
}
}
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box p {
font-size: 5.33vw;
letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box p {
font-size: 20px;
}
}
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box p span {
border-bottom: solid 1px #000;
}
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box h3 {
font-size: 7.2vw;
font-weight: 500;
line-height: 1.4em;
letter-spacing: 0.1em;
margin-top: 0.4em;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box h3 {
font-size: 2vw;
}
}
@media screen and (min-width: 1280px) {
section.about div.about-cont div.about-switch-card div.about-switch-card-inner div.about-title-box h3 {
font-size: 27px;
}
}
section.about div.about-cont div.about-switch-card div.about-txt-box {
padding: 5% 8% 0 8%;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-txt-box {
padding: 30px 8% 0 8%;
}
}
@media screen and (min-width: 1000px) {
section.about div.about-cont div.about-switch-card div.about-txt-box {
padding: 45px 8% 0 8%;
}
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-txt-box p {
height: 5em;
font-size: 1.7vw;
}
}
@media screen and (min-width: 1000px) {
section.about div.about-cont div.about-switch-card div.about-txt-box p {
font-size: 16px;
}
}
@media screen and (min-width: 1280px) {
section.about div.about-cont div.about-switch-card div.about-txt-box p {
height: 3.6em;
}
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn {
display: block;
background: var(--darkblue);
color: #FFF;
position: relative;
padding: 3% 0 3% 4%;
margin: 6vw auto 0;
width: 55%;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn {
width: 180px;
margin: 35px auto 0;
padding: 10px 0 10px 20px;
font-size: 18px;
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn::before {
position: absolute;
content: "";
top: 0;
left: -140%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn:hover {
opacity: 0.8;
transition: all 0.6s;
transition-duration: 0.2s;
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn:hover::before {
animation: lightcurtain-ani 0.6s ease-out;
}
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn span.arrow {
width: 24px;
height: 24px;
background: #FFF;
right: 8%;
}
@media screen and (min-width: 768px) {
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn span.arrow {
right: 15px;
}
}
section.about div.about-cont div.about-switch-card div.about-txt-box a.about-link-btn span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
/*section.about{*/
/*============================================== 土地活用・賃貸経営 ==============================================*/
section.tochikatsu {
padding: 30vw 0;
overflow: hidden;
}
@media screen and (min-width: 768px) {
section.tochikatsu {
padding: 140px 0;
}
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap {
background-color: var(--gray);
width: 86%;
margin: 0 auto;
padding: 10vw 0;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap {
width: 70%;
padding: 54px 0;
}
}
@media screen and (min-width: 1280px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap {
width: 50%;
}
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 {
text-align: center;
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span {
display: block;
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.ja {
font-size: 11.2vw;
line-height: 1.3em;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.ja {
font-size: 36px;
}
}
@media screen and (min-width: 1000px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.ja {
font-size: 42px;
}
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.ja span {
display: none;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.ja span {
display: inline-block;
}
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.en {
margin-top: 1em;
font-size: 4vw;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap h2 span.en {
font-size: 15px;
}
}
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap p {
text-align: center;
font-size: 4.8vw;
line-height: 1.8em;
margin-top: 1em;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap p {
font-size: 16px;
}
}
@media screen and (min-width: 1000px) {
section.tochikatsu div.tochikatsu-cont-wrap div.txt-wrap p {
font-size: 18px;
}
}
section.tochikatsu div.top-tochikatsu-slide div.swiper-wrapper {
transition-timing-function: linear;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.top-tochikatsu-slide div.swiper-wrapper div.swiper-slide {
width: 50%;
}
}
section.tochikatsu div.link-wrap {
background-color: var(--gray);
padding: 10vw 0;
}
@media screen and (min-width: 768px) {
section.tochikatsu div.link-wrap {
width: 70%;
margin: auto;
padding: 0;
}
}
@media screen and (min-width: 1280px) {
section.tochikatsu div.link-wrap {
width: 50%;
}
}
section.tochikatsu a {
display: block;
background: var(--darkblue);
color: #FFF;
position: relative;
padding: 3% 0;
margin: 0;
width: 80%;
font-weight: 600;
text-align: center;
margin: auto;
}
@media screen and (min-width: 768px) {
section.tochikatsu a {
width: 282px;
margin: 30px auto;
padding: 10px 0;
font-size: 18px;
overflow: hidden;
}
section.tochikatsu a::before {
position: absolute;
content: "";
top: 0;
left: -140%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.tochikatsu a:hover {
opacity: 0.8;
transition: all 0.6s;
transition-duration: 0.2s;
}
section.tochikatsu a:hover::before {
animation: lightcurtain-ani 0.6s ease-out;
}
}
section.tochikatsu a span.arrow {
width: 24px;
height: 24px;
background: #FFF;
}
@media screen and (min-width: 768px) {
section.tochikatsu a span.arrow {
right: 15px;
}
}
section.tochikatsu a span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
/*============================================== CONTENTS 各種コンテンツ ==============================================*/
section.other-contents {
padding: 15% 0;
background-color: var(--gray);
overflow: hidden;
/**/
}
@media screen and (min-width: 768px) {
section.other-contents {
padding: 70px 0;
}
}
section.other-contents h2.sub-title {
width: 86%;
margin: 0 auto;
position: relative;
}
@media screen and (min-width: 1280px) {
section.other-contents h2.sub-title {
width: 74%;
max-width: 1200px;
}
}
section.other-contents h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.other-contents h2.sub-title span.en {
font-size: 40px;
letter-spacing: 0.08em;
}
}
section.other-contents h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.other-contents div.top-contents-slide-wrap {
position: relative;
padding: 0 0 15vw;
width: 86%;
margin: 0 auto;
position: relative;
margin-top: 5%;
/*div.top-contents-slide{*/
}
@media screen and (min-width: 1280px) {
section.other-contents div.top-contents-slide-wrap {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap {
padding: 0;
margin-top: 35px;
}
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-wrapper {
justify-content: space-between;
}
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide {
width: 31%;
}
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide a {
display: block;
background: #fff;
padding: 1.4% 1.4% 0 1.4%;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide a {
padding: 5px 5px 0 5px;
transition: all 0.4s;
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide a:hover {
opacity: 0.6;
transition: all 0.4s;
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide a:hover div.txt-wrap span.arrow {
transition: all 0.4s;
transform: translate(0, -45%) scale(1.3);
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide a:hover div.txt-wrap span.arrow::after {
transform: translate(-20%, -50%) scale(1.3);
transition: all 0.4s;
}
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap {
position: relative;
padding: 0 5%;
box-sizing: border-box;
height: 19vw;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap {
height: 75px;
transition: all 0.4s;
}
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap h3 {
font-size: 4.8vw;
font-weight: 500;
line-height: 1.4em;
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap h3 {
font-size: 1.8vw;
}
}
@media screen and (min-width: 1000px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap h3 {
font-size: 18px;
}
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap .arrow {
width: 17px;
height: 17px;
transition: all 0.4s;
}
section.other-contents div.top-contents-slide-wrap div.top-contents-slide div.swiper-slide div.txt-wrap .arrow::after {
border: 2px solid transparent;
border-left: 4px solid #fff;
transition: all 0.4s;
}
}
section.other-contents div.top-contents-slide-wrap div.contents-slide-next,
section.other-contents div.top-contents-slide-wrap div.contents-slide-prev {
display: block;
width: 2em;
height: 2em;
background: #333;
border-radius: 50%;
position: absolute;
bottom: 2%;
left: 0;
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.contents-slide-next,
section.other-contents div.top-contents-slide-wrap div.contents-slide-prev {
display: none;
}
}
section.other-contents div.top-contents-slide-wrap div.contents-slide-next::after,
section.other-contents div.top-contents-slide-wrap div.contents-slide-prev::after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 60%;
border: 4px solid transparent;
border-right: 6px solid #FFF;
transform: translate(50%, -50%);
}
section.other-contents div.top-contents-slide-wrap div.contents-slide-next {
left: auto;
right: 0;
}
section.other-contents div.top-contents-slide-wrap div.contents-slide-next::after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 0;
border: 4px solid transparent;
border-left: 6px solid #FFF;
transform: translate(-50%, -50%);
}
section.other-contents div.top-contents-slide-wrap div.swiper-button-prev, section.other-contents div.top-contents-slide-wrap div.swiper-button-next {
bottom: 0;
top: auto;
transform: translate(0);
width: 7vw;
height: 7vw;
}
@media screen and (min-width: 768px) {
section.other-contents div.top-contents-slide-wrap div.swiper-button-prev, section.other-contents div.top-contents-slide-wrap div.swiper-button-next {
display: none;
}
}
section.other-contents div.top-contents-slide-wrap div.swiper-button-prev::after, section.other-contents div.top-contents-slide-wrap div.swiper-button-next::after {
border: 1.2vw solid transparent;
border-left: 1.6vw solid #FFF;
}
section.other-contents div.top-contents-slide-wrap div.swiper-button-prev {
left: 0;
/* transform: rotate(180deg);*/
}
section.other-contents div.top-contents-slide-wrap div.swiper-button-next {
right: 0;
}
/*============================================== NEWS 新着情報 ==============================================*/
section.news {
padding: 30vw 0 0;
overflow: hidden;
}
@media screen and (min-width: 768px) {
section.news {
padding: 125px 0 0;
}
}
section.news div.news-cont-wrap {
width: 86%;
margin: 0 auto;
position: relative;
}
@media screen and (min-width: 1280px) {
section.news div.news-cont-wrap {
width: 74%;
max-width: 1200px;
}
}
@media screen and (min-width: 1000px) {
section.news div.news-cont-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
section.news div.title-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/**/
}
@media screen and (min-width: 1000px) {
section.news div.title-wrap {
display: block;
width: 228px;
}
}
section.news div.title-wrap h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.news div.title-wrap h2.sub-title span.en {
font-size: 40px;
}
}
section.news div.title-wrap h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.news div.title-wrap a.read-more {
display: inline-block;
padding-right: 2em;
font-weight: bold;
position: relative;
}
@media screen and (min-width: 768px) {
section.news div.title-wrap a.read-more {
font-size: 13px;
margin-top: 65px;
padding-right: 2.6em;
transition: all 0.4s;
}
section.news div.title-wrap a.read-more:hover {
transform: scale(1.1);
transition: all 0.4s;
opacity: 0.6;
}
}
@media screen and (min-width: 768px) {
section.news div.title-wrap a.read-more .arrow {
width: 23px;
height: 23px;
transition: all 0.4s;
}
section.news div.title-wrap a.read-more .arrow::after {
border: 3px solid transparent;
border-left: 5px solid #fff;
}
}
@media screen and (min-width: 768px) {
section.news ul {
margin-top: 30px;
}
}
@media screen and (min-width: 1000px) {
section.news ul {
width: calc(100% - 230px);
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
section.news ul li:first-child a {
padding-top: 0;
}
}
section.news ul li a {
display: block;
padding: 8vw 0;
border-bottom: solid 1px #938e8c;
}
@media screen and (min-width: 768px) {
section.news ul li a {
padding: 30px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
section.news ul li a:hover {
opacity: 0.6;
transition: all 0.4s;
}
}
section.news ul li a time {
font-size: 4.26vw;
line-height: 1.2em;
margin-right: 1em;
}
@media screen and (min-width: 768px) {
section.news ul li a time {
font-size: 16px;
line-height: 1.8em;
width: 80px;
margin: 0;
}
}
@media screen and (min-width: 1000px) {
section.news ul li a time {
font-size: 18px;
}
}
section.news ul li a span.category {
display: inline-block;
font-size: 2.92vw;
font-weight: 500;
background-color: var(--darkblue);
color: #fff;
line-height: 1.2em;
padding: 0.4em 1em;
box-sizing: border-box;
vertical-align: 0.14em;
text-align: center;
}
@media screen and (min-width: 768px) {
section.news ul li a span.category {
font-size: 13px;
width: 80px;
margin: 0 20px;
vertical-align: 0em;
margin-top: 0.4em;
}
}
section.news ul li a p {
font-size: 4.26vw;
font-weight: 500;
line-height: 1.8em;
margin-top: 1em;
}
@media screen and (min-width: 768px) {
section.news ul li a p {
font-size: 16px;
width: calc(100% - 105px - 110px);
margin: 0;
}
}
@media screen and (min-width: 1000px) {
section.news ul li a p {
font-size: 18px;
}
}
/*============================================== OWNER SUPPORT オーナーサポート ==============================================*/
section.ownersupport {
padding: 30vw 0;
overflow: hidden;
}
@media screen and (min-width: 768px) {
section.ownersupport {
padding: 100px 0;
}
}
@media screen and (min-width: 768px) {
section.ownersupport div.ownersupport-cont-wrap {
width: 86%;
margin: 0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
@media screen and (min-width: 768px) and (min-width: 1280px) {
section.ownersupport div.ownersupport-cont-wrap {
width: 74%;
max-width: 1200px;
}
}
section.ownersupport div.title-wrap {
background-color: var(--gray);
padding: 10vw 7vw 12vw;
box-sizing: border-box;
width: 70%;
position: relative;
z-index: 0;
/**/
}
@media screen and (min-width: 768px) {
section.ownersupport div.title-wrap {
width: 51%;
padding: 50px 5%;
}
}
section.ownersupport div.title-wrap::after {
content: "";
background-color: var(--gray);
display: block;
position: absolute;
bottom: 0;
left: 0;
transform: translate(0, 99%);
width: 100%;
height: 31vw;
z-index: -1;
}
@media screen and (min-width: 768px) {
section.ownersupport div.title-wrap::after {
content: none;
}
}
section.ownersupport div.title-wrap h2.sub-title span.en {
font-size: 10.6vw;
}
@media screen and (min-width: 768px) {
section.ownersupport div.title-wrap h2.sub-title span.en {
font-size: 40px;
}
}
section.ownersupport div.title-wrap h2.sub-title span.ja {
display: block;
font-weight: 400;
}
section.ownersupport div.title-wrap a {
display: block;
background: var(--darkblue);
color: #FFF;
position: relative;
padding: 3% 0 3% 8%;
margin: 6vw 0 0;
width: 80%;
font-weight: 600;
}
@media screen and (min-width: 768px) {
section.ownersupport div.title-wrap a {
width: 180px;
margin: 30px 0 0;
padding: 10px 0 10px 4%;
font-size: 18px;
overflow: hidden;
}
section.ownersupport div.title-wrap a::before {
position: absolute;
content: "";
top: 0;
left: -140%;
width: 100%;
height: 100%;
transform: skewX(-30deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
section.ownersupport div.title-wrap a:hover {
opacity: 0.8;
transition: all 0.6s;
transition-duration: 0.4s;
}
section.ownersupport div.title-wrap a:hover::before {
animation: lightcurtain-ani 0.6s ease-out;
}
}
section.ownersupport div.title-wrap a span.arrow {
width: 24px;
height: 24px;
background: #FFF;
}
@media screen and (min-width: 768px) {
section.ownersupport div.title-wrap a span.arrow {
right: 15px;
}
}
section.ownersupport div.title-wrap a span.arrow::after {
border: 4px solid transparent;
border-left: 6px solid var(--darkblue);
}
section.ownersupport div.ownersupport-img {
width: 93%;
margin: 0 0 0 auto;
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
section.ownersupport div.ownersupport-img {
width: 49%;
margin: 0;
}
}/*# sourceMappingURL=style.css.map */