@charset "UTF-8"; /* CSS Document */ /* ページごとの個別スタイルを記述 */ /* 共通SALES（TOP、分譲地を探す以外） */ #salesBox ul {display:flex; flex-wrap:wrap; justify-content:flex-start; align-items: end; } #salesBox ul li { flex-grow:0; flex-shrink:1; flex-basis:calc( ( 100% - 40px ) / 3.01 ); margin:0 20px 20px 0; } #salesBox ul li:nth-of-type(3n) { margin: 0 0 20px 0; } #salesBox ul .defaultDisplay { display:block; } #salesBox ul .addDisplay { display:none; } #salesBox ul .addDisplay.active { display:block; } .salesBox { background:#fff; height:100%; padding:0 0 30px 0; box-sizing:border-box; position: relative; word-break: break-all;} .salesBox figure img { width: 100%; height: auto; } .salesBox figure.price_down { margin-bottom: 20px;} .salesBox .estateName{ font-size: 16px; font-weight:normal;} .salesBox .estateAddress{ font-size: 22px; color:#049840; font-weight: bold;line-height: 1.1; margin: 0 0 0.5em 0; font-feature-settings: "palt";} .salesBox .textBox { padding:30px 30px 80px 30px; display:flex; flex-wrap:wrap; justify-content:space-between; min-height: 200px; } .salesBox .textBox .logoBox { flex-grow:0; flex-shrink:1; flex-basis:60px; } .salesBox .textBox .specBox { flex-grow:0; flex-shrink:1; flex-basis:calc(100% - 70px); line-height:1; } .salesBox .textBox .titleBox { flex-grow:0; flex-shrink:1; flex-basis:100%; } .salesBox .estateLink { width:calc(100% - 60px); left: 30px; bottom: 30px; position: absolute;} .salesBtn.active { display:block; } .salesBtn { display:none; position:absolute; top:100%; width:30em; left:calc(50% - 15em) ; box-sizing:border-box; padding:1.5em 0; text-align:center; background:#e0f1f7; color:#000; font-weight:bold; cursor:pointer; line-height:1; font-size:14px; } .salesBtn i { position:absolute; width:1em; bottom:0.5em; left:calc(50% - 0.5em); } @media screen and (max-width:767px) { #salesBox ul li { flex-basis:calc( (100% - 10px ) / 2.01 ); margin: 0 10px 10px 0; } #salesBox ul li:nth-of-type(3n) { margin: 0 10px 10px 0; } #salesBox ul li:nth-of-type(2n) { margin: 0 0 10px 0; } .salesBox .estateName{ font-size: 3vw; } .salesBox .estateAddress{ font-size: 4vw;} .salesBox .textBox { padding:10px 10px 60px 10px; display:flex; flex-wrap:wrap; justify-content:space-between; min-height:auto; } .salesBox .textBox .logoBox { flex-grow:0; flex-shrink:1; flex-basis:30%; margin-bottom:10px; } .salesBox .textBox .specBox { flex-grow:0; flex-shrink:1; flex-basis:100%; } .salesBox .estateLink { width:calc(100% - 10px); /* width: 100%; */ left: 5px; bottom: 10px;} } /* MIHAMA VOICE ミハマボイス */ #mihamaVoice {} #subColumn { } .sideMenu { margin:0 0 40px 0 } .sideMenu a { color:#bb3614; text-decoration:none; } .subMenuTitle { font-size:18px; font-weight:bold; background:#f6f6f6; padding:0.5em 1.5em 0.5em 0.5em; color:#bb3614; margin:0 0 1em 0; position:relative; } .subMenuTitle.active .fa-minus-square { display:none; } .subMenuTitle .fa-minus-square { display:none; } .subMenuTitle.active .fa-plus-square { display:none; } .subMenuTitle .fa-plus-square { display:none; } @media screen and (max-width:767px) { /* MIHAMAVOICE */ .sideMenu { margin:0 0 10px 0 } .subMenuTitle.active .fa-minus-square { display:block; right:0.5em; top:0.5em; position:absolute; } .subMenuTitle .fa-minus-square { display:none; } .subMenuTitle.active .fa-plus-square { display:none; } .subMenuTitle .fa-plus-square { display:block; right:0.5em; top:0.5em; position:absolute; } #estateLink { display:none ;} #estateLink.active { display:block; } #categoryLink { display:none; } #categoryLink.active { display:block; } #mihamaVoiceBox > ul li { flex-basis:100%; } } .subMenuLink { } .categoryLink li { margin:0 0 0.5em 0; padding:0 0 0 1em; } .categoryLink li a { font-size:16px; } #mihamavoice .btnBox, #information .btnBox{ padding:40px 0 0 0; width:100%; max-width:380px; margin:0 auto; } #mihamavoice .btnBox .flexBox li , #information .btnBox .flexBox li{ flex-basis:160px; } #mihamavoice .btnBox .flexBox li.nextLink , #information .btnBox .flexBox li.nextLink{ flex-basis:40px; margin:0 0 0 10px; } #mihamavoice .btnBox .flexBox li.prevLink , #information .btnBox .flexBox li.prevLink{ flex-basis:40px; margin:0 10px 0 0; } #mihamavoice .btnBox .flexBox li a.readMoreBtn , #information .btnBox .flexBox li a.readMoreBtn{ width:100%; text-align:center; } #mihamavoice .btnBox .flexBox li a.readMoreBtn i , #information .btnBox .flexBox li a.readMoreBtn{ margin:0; } /* 240403追加 */ .blogArticle .basicSubTitle { font-size: clamp(20px,3.6vw,28px); font-weight: bold; padding:0;} .blogArticle .basicSubTitle::before{ content:none;} .blogArticle .date_list { margin:3em auto 0; display: block; text-align:center;} .blogArticle .date_list p{ display: inline-block; text-align:left; font-size: clamp(15px,1.25vw,24px); font-weight:bold; margin:0; line-height: 1.5;} .blogArticle .btn_reserve{ margin: 0 auto; text-align:center; margin:60px 0 100px;} @media screen and (max-width:767px) { /* 240403追加 */ .blogArticle .btn_reserve{ margin: 0 auto; text-align:center; margin:30px 0 50px;} } .blogArticle .telBox{ text-align:center; margin:2em 0 3em; padding: 40px 10px; border: 1px solid #333; text-align: center; font-size: clamp(16px,2.8vw,22px);} .blogArticle .telBox p{line-height: 1.5;} .blogArticle .telBox .telNo a{ text-decoration: none; color: #333; font-size: clamp(20px,6.5vw,50px); font-weight: bold; } .blogArticle .telBox .time{ font-size: clamp(16px,2.3vw,18px); margin-top: 1em;} /* /240403追加 */ .blogArticle .alignright { float:right; margin:1em 0 1em 1em; } .blogArticle .alignleft { float:left; margin:1em 1em 1em 0; } .blogArticle .aligncenter { margin:1em auto 1em auto; display:block; } .blogArticle .alignnone { margin:1em 0 1em ; } .blogArticle .wp-caption-text { font-size:12px; text-align:center; } .blogArticle .wp-caption { width:auto !important; max-width:100%; box-sizing:border-box; padding:10px; background:#f1f1f1; text-align:center; } .blogArticle .alignnone img { margin:0 auto; display:block; } .blogArticle blockquote { display:block; background:#f1f1f1; padding:1em 1em 1em calc(2em + 4px); margin:1em 0; position:relative; } .blogArticle blockquote::before { content:''; display:block; background:#bb3614; width:4px; height:calc( 100% - 2em ); top: 1em; left:1em; position:absolute; } .blogArticle blockquote p { margin:0; } .blogArticle p { margin:1em 0; word-break:break-all; } .blogArticle iframe {max-width: 100%;} /* LINK リンク集 */ #link .flexBox { justify-content:flex-start; } #link .flexBox .supportLink { flex-basis:140px; margin:0 10px 10px 0; } #link .flexBox .supportLink span { display:block; } @media screen and (max-width:767px) { /* LINK */ #link .flexBox { justify-content:space-between; } #link .flexBox .supportLink { flex-basis:calc( ( 100% - 10px ) / 3 ); margin:0 0 10px 0; } #link .flexBox .supportLink img { width:100%; height:auto; } #link .flexBox .supportLink a { display:block; } } /* RECOMMEND 詳細ページ*/ .recommendSpec { margin:0 0 40px 0; } .recommendSpec .thumbLogo { flex-basis:80px ; } .recommendSpec .thumbLogo a { display:block; box-sizing:border-box; border:#ccc solid 1px; } .recommendSpec .textBox { flex-basis:calc(100% - 100px); } .recommendSpec .textBox dl dt { flex-basis:120px; margin:0 0 5px 0; font-size:14px; font-weight:bold; } .recommendSpec .textBox dl dd { flex-basis:calc(50% - 130px); margin:0 0 5px 0; font-size:14px; } .recommendSpec .textBox dl dd.row1 { flex-basis:calc(100% - 130px); } .recommendSpec .textBox dl dt .cellBox { box-sizing:border-box; padding:0.25em; border-right:#ccc dotted 1px; display:block; height:100%; } .recommendSpec .textBox dl dd .cellBox { box-sizing:border-box; padding:0.25em; display:block; height:100%; } .recommendSpec .textBox dl dd .price { } .recommendSpec .textBox dl dd .price b { color:#bb3614; font-size:150%;} .recommendSpec.area{ margin: 0 auto 40px auto; max-width: 800px;} .recommendSpec.area .textBox{ margin:0 auto;} .recommendSpec.area .textBox dt,.recommendSpec.area .textBox dd{ font-size: 16px;} .recommendPoint { margin:0 0 40px 0; } .recommendPoint ul li { flex-basis:calc( ( 100% - 30px ) / 3 ); } #recommend .pointBox { } #recommend .pointBox figure {margin:0 0 10px 0; } #recommend .pointBox h4 { font-size:18px; font-weight:bold; padding:0 0 0 1em; position:relative; color:#333; margin:0 0 0.5em 0; } #recommend .pointBox h4::before { content:'●'; position:absolute; left:0; top:0; color:#333; display:inline-block; } #recommend .pointBox p { font-size:14px; line-height:1.5em; } #recommend .specialBnr{ max-width: 800px; margin: 0 auto 40px;} .recommendPlus { width: 100%; max-width:820px; text-align: center; margin: 0 auto 60px auto;} #recommend .estatePrice { color: #bb3614;} #recommend .estatePrice .sub { color: #333;} #recommend .linkBox{ flex-direction: column; row-gap: 15px;} #recommend .linkBox .recommendLink { box-sizing: border-box; display: block; max-width: 480px; width: 100%; background: #333; padding: 1em 1em 1em calc(1em + 40px ); line-height: 1.2; font-size: 24px; position: relative; margin: 0 auto; background: #f1f1f1; color: #333; text-decoration: none;} #recommend .linkBox .recommendLink.special{ padding: 1em;} #recommend .linkBox .recommendLink .logo { width: 30px; position: absolute ; margin: 0 10px 0 0; left: 1em; top:50%; transform: translateY(-50%);} #recommend .linkBox .recommendLink .text { text-align: left;} .recommendMovieBox { position:relative; padding:56.25% 0 0 0; box-sizing:border-box; border:#ccc solid 1px; margin: 0 auto 40px auto;} .recommendMovieBox.oldStyle { padding:75% 0 0 0; } .recommendMovieBox iframe { width:100%; height:100%; position:absolute; left:0; top:0; } .panoramaMapBox { text-align:center; margin:0 auto 40px auto; width:100%; } .cvBnr { display: block; margin: 0 auto 40px auto; width: 100%; max-width: 480px;} .house_title { text-align: center; font-size: 40px; font-weight: bold; margin-bottom: 50px;} @media screen and (max-width:767px) { /* RECOMMEND 詳細ページ*/ .recommendSpec { justify-content:center; } .recommendSpec .thumbLogo { } .recommendSpec .textBox { flex-basis:100%; } .recommendSpec .textBox dl dt { flex-basis:100%; } .recommendSpec .textBox dl dt .cellBox { border-right:none; border-bottom:#ccc dotted 1px; } .recommendSpec .textBox dl dd { flex-basis:100% !important; } .recommendPoint ul li { flex-basis:calc( ( 100% - 20px ) / 2 ); margin: 0 0 20px 0; } #recommend #salesBox ul li { flex-basis: 100%; margin: 0 0 50px 0;} .house_title { font-size: 5.5vw; margin-bottom: 20px; line-height: 1.5;} .recommendLink { font-size: 3vw;} } /* REALESTATE */ .estateSpec { margin:0 0 40px 0; } .estateSpec dt { flex-basis:15%; margin:0 0 1px 0; } .estateSpec dd { flex-basis:35%; margin:0 0 1px 0; } .estateSpec dt span { display:block; box-sizing:border-box; height:100%; padding:1em; font-size:14px; text-align:left; border-right:#ccc solid 1px; background:#fafafa; } .estateSpec dd span { display:block; box-sizing:border-box; height:100%; padding:1em; font-size:14px; text-align:left; } @media screen and (max-width:767px) { /* REALESTATE */ .estateSpec dt { flex-basis:10em; } .estateSpec dd { flex-basis:calc(100% - 10em); } } .estatePhotoBox { } .estatePhotoBox img { display:block; height:auto; max-height:800px; margin:0 auto; } .mapContent { margin:0 0 80px 0; } .mapContent h4 { font-size:18px; font-weight:bold; margin:0 0 1em 0; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0;} .changePrice { text-align: center; width: 100%; max-width: 820px; margin: 0 auto 40px auto} /* VISUAL TITLE */ .visualTitle { background:url(../img/common/title_common.jpg) center center / cover no-repeat; } #outline .visualTitle, #company .visualTitle, #achievement .visualTitle, #history .visualTitle, #csr .visualTitle, #business .visualTitle { background:url(../img/outline/title_outline_01.jpg) center center / cover no-repeat; } #gallery .visualTitle { background:url(../img/gallery/title_gallery_01.jpg) center center / cover no-repeat; } #knowledge_01 .visualTitle { background:url(../img/knowledge/title_knowledge01_01.jpg) center center / cover no-repeat; } #knowledge_02 .visualTitle { background:url(../img/knowledge/title_knowledge02_01.jpg) center center / cover no-repeat; } #knowledge_03 .visualTitle { background:url(../img/knowledge/title_knowledge03_01.jpg) center center / cover no-repeat; } #knowledge_04 .visualTitle { background:url(../img/knowledge/title_knowledge04_01.jpg) center center / cover no-repeat; } #house .visualTitle, #freeplan .visualTitle, #gva .visualTitle, #guarantee .visualTitle, #jio .visualTitle, #facility .visualTitle, #afterservice .visualTitle { background:url(../img/house/title_house_01.jpg) center center / cover no-repeat; } #eco .visualTitle, #double .visualTitle , #economy_ecology .visualTitle , #solar .visualTitle { background:url(../img/eco/title_eco_01.jpg) center center / cover no-repeat; } #gallery .visualTitle { background:url(../img/gallery/title_gallery_01.jpg) center center / cover no-repeat; } #mihamavoice .visualTitle { background:url(../img/mihamavoice/title_mihamavoice_01.jpg) center center / cover no-repeat; } #voice .visualTitle { background:url(../img/voice/title_voice_01.jpg) center center / cover no-repeat; } #recommend .visualTitle { background:url(../img/recommend/title_recommend_01.jpg) center center / cover no-repeat; } #introduce .visualTitle { background:url(../img/introduce/title_introduce_01.jpg) center center / cover no-repeat; } #kids_design .visualTitle { background:url(../img/kidsdesign/title_kidsdesign_01.jpg) center center / cover no-repeat; } #nation .visualTitle { background:url(../img/kidsdesign/title_kidsdesign_02.jpg) center center / cover no-repeat; } #castle .visualTitle { background:url(../img/kidsdesign/title_kidsdesign_03.jpg) center center / cover no-repeat; } #building .visualTitle { background:url(../img/building/title_building_01.jpg) center center / cover no-repeat; } /* GALLERY PAGE */ .galleryBox { margin:0 0 40px 0; } .galleryBox ul { display:flex; flex-wrap:wrap; justify-content:flex-start; } .galleryBox ul li { display:block; flex-grow:0; flex-shrink:1; flex-basis:calc( ( 100% - 50px ) / 6 ); margin:0 10px 10px 0; } .galleryBox ul li:nth-of-type(6n) { margin:0 0 10px 0 ; } .galleryBox ul li figure { display:block; } .galleryBox ul li figure img { box-sizing:border-box; border:#ccc solid 1px; width:100%; height:auto; } .galleryBox ul li figure figcaption { display:block; text-align:right; font-size:10px; } @media screen and (max-width:767px) { /* */ .galleryBox ul li { flex-basis:calc( ( 100% - 30px ) / 4 ); } .galleryBox ul li:nth-of-type(6n) { margin:0 10px 0 0; } .galleryBox ul li:nth-of-type(4n) { margin:0 0 10px 0; } } @media screen and (max-width:480px) { .galleryBox ul li { flex-basis:calc( ( 100% - 30px ) / 2 ); } } #gallery .sliderBox { padding:0 0 40px 0; position:relative; } #gallery .swiper-container { padding-bottom:40px; } #gallery .swiper-slide { text-align:center; } #gallery .swiper-slide figure { position:relative; display:block; padding: 66.66% 0 0 0; overflow: hidden; background: #f1f1f1; } #gallery .swiper-slide figure figcaption { position:absolute; display:inline-block; left:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; font-size:12px; box-sizing:border-box; padding:0.25em 0.5em; line-height:1; text-align:left; } #gallery .swiper-slide img { display:block; position: absolute; left: 50%; top:50%; width: auto; max-width: 100%; height: auto ; max-height: 100%; transform: translateX(-50%) translateY(-50%); } #gallery .swiper-container-horizontal > .swiper-pagination-bullets { bottom:0px; } /* OUTLINE */ .outlineBusinessImage { background:#f7f9fa; padding:2em; font-size:16px; margin:0 auto 80px auto; } .outlineBusinessImage figcaption { text-align:right; display:block; padding:2em 0 0 0; } .outlineAchievement .photoBox { flex-basis:55%; } .outlineAchievement .textBox { flex-basis:40%; } #company .basicStyleTable tbody tr th { width:15em; } #csr .flexBox .photoBox , #csr .flexBox .textBox { flex-basis:calc(50% - 20px ); } #history .flexBox .photoBox { flex-basis:calc(30% - 20px ); } #history .flexBox .textBox { flex-basis:calc(70% - 20px ); } #business .flexBox .photoBox { flex-basis:calc(30% - 20px ); } #business .flexBox .textBox { flex-basis:calc(70% - 20px ); } #group .flexBox .photoBox , #group .flexBox .textBox { flex-basis:calc(50% - 20px ); } /* ROOM PLANS */ #plan .flexBox li { flex-basis:calc( ( 100% - 40px ) / 3 ); } #plan .num { display:inlie-block; margin:0 0.5em 0 0; color:#bb3614; font-weight:bold; } #plan figure .num { left: 1px; top:1px; line-height: 1; background: rgba(255,255,255,0.9); padding: 5px; z-index: 2;} #plan .btnBox { padding:40px 0 0 0; width:100%; max-width:380px; margin:0 auto; } #plan .btnBox .flexBox li { flex-basis:160px; } #plan .btnBox .flexBox li.nextLink { flex-basis:40px; margin:0 0 0 10px; } #plan .btnBox .flexBox li.prevLink { flex-basis:40px; margin:0 10px 0 0; } #plan .btnBox .flexBox li a.readMoreBtn { width:100%; text-align:center; } #plan .btnBox .flexBox li a.readMoreBtn i { margin:0; } #plan .planBox { padding: 20px 0;} #plan .planBox h4 { font-size: 16px; font-weight: bold;} #plan .planBox .category { font-size: 14px;} #plan .planBox .floor { font-size: 12px; } .tagCloud { display: block; padding: 20px; box-sizing: border-box; border: #ccc solid 1px; margin: 0 auto 40px auto; font-size: 20px;} .tagCloud a { color: #333; text-decoration: none; display: inline-block; margin: 0 5px; line-height: 1;} @media screen and (min-width:768px) { .tagCloud a:hover { color: #d44a01; text-decoration: none;} } .tagCloud a::before { content: '#'; margin: 0 5px 0 0; display: inline-block;} #commonContent + .tagCloud { margin: 40px auto 40px auto; } #planGallery li { display:block; flex-grow:0; flex-shrink:1; flex-basis:calc( ( 100% - 50px ) / 3 ); margin:0 10px 40px 0; } #planGallery li:nth-of-type(3n) { margin:0 0 40px 0 ; } #planGallery li figure { display:block; box-sizing: border-box; border: #ccc solid 1px; position: relative; padding: 100% 0 0 0;} #planGallery li figure figcaption { display:block; text-align:right; font-size:10px; } #plan .salesBox { padding: 0 0 50px 0;} #plan .salesBox .estateLink { bottom: 0;} @media screen and (max-width:767px) { /* TOP YouTube */ #top_youtube ul{ margin-bottom: 15px;} #top_youtube .readMoreBox{ margin-top: 40px;} #top_youtube .swiper-button-prev,#top_youtube .swiper-button-next{ width: 30px; height: 30px; background-size: 30px 30px; top: 40%; margin-top: -15px; ;} #top_youtube li a{ font-weight: normal;} #top_youtube .swiper-button-next, #top_youtube .swiper-container-rtl .swiper-button-prev { right: -5px; transform: none;} #top_youtube .swiper-button-prev, #top_youtube .swiper-container-rtl .swiper-button-next { left: -5px; transform: none;} #topicsBox ul li { flex-basis:100%; } #topicsBox ul li .panelLink .panelText { display:none; } } /* KIDS DESIGN キッズデザインコンセプト */ #nation .flexBox .photoBox , #nation .flexBox .textBox { flex-basis:calc( 50% - 20px ); } #castle .flexBox .photoBox { flex-basis:calc( ( 100% - 40px ) / 3 ); } @media screen and (max-width:767px) { /* KIDS DESIGN キッズデザインコンセプト */ #nation .flexBox .photoBox , #nation .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #castle .flexBox .photoBox { flex-basis:calc( ( 100% - 10px ) / 2 ); } } /* SNS POLICY SNSポリシー */ #sns .snsBox { margin:0 0 20px 0; padding:20px 0; border-top:#ccc dotted 1px; border-bottom:#ccc dotted 1px; } #sns .snsBox ul { } #sns .snsBox ul li { display:inline-block; font-size:14px; margin:0 0.5em 0 0.5em; vertical-align:middle; line-height:1; } #sns .snsBox ul li i { font-size:24px; margin:0 5px 0 0; vertical-align:middle; line-height:1; } #sns .noteBox { border:#ccc solid 1px; box-sizing:border-box; padding:2em ; font-size:14px; margin:0 0 1em 0; } #sns .noteBox dl { display:flex; flex-wrap:wrap; justify-content:space-between; } #sns .noteBox dl dt { flex-grow:0; flex-shrink:1; flex-basis:10em; margin:0 0 0.5em 0; font-weight:bold; } #sns .noteBox dl dd { flex-grow:0; flex-shrink:1; flex-basis:calc( 100% - 11em ); margin:0 0 0.5em 0; } /* SEARCH 分譲地を探す */ #estateMap { width:100%; height:50vh; margin:0 auto 40px auto; } #search .categoryBox{ padding: 15px 0 0;} #search .categoryBox h5{ margin-bottom: 0; text-align: center; margin-bottom: 1.5em; font-size:clamp(18px, 1.76vw, 20px); font-weight: bold; } #search .categoryBox h5 span{ display: block; margin-top: 10px; font-size: 10px; font-weight: normal; } #search .categoryBox .basicLargeText{ margin-bottom: 0; text-decoration: underline; text-underline-offset: 5px;} #search .categoryBox ul{ column-gap: 10px; display: flex; flex-wrap: wrap; justify-content: center; margin: 15px 0;} #search .categoryBox ul li{ font-size: clamp(14px, 1.41vw, 16px); background: #fff; color: #009944; padding: 5px 15px; border-radius: 4px; border: 1px solid #009944; margin-bottom: 10px;} #search .categoryBox ul.viewAll{ justify-content: center; } #search .categoryBox ul.viewAll li{ margin: 0;} #search .categoryBox a{ color: #009944; text-decoration: none;} #search .categoryBox ul li:hover{ cursor: pointer; color:#fff; background: #009944;} #search .categoryBox li:hover a{ cursor: pointer; color:#fff;} .searchBox .textBox { flex-basis:calc(100% - 200px)} .searchBox .textBox br { display: none;} #search .orderChange { text-align: right; margin: 0 0 40px 0; padding: 10px; background: #f1f1f1;} #search .orderChange select { background-color: white; border: thin solid blue; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; margin: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } #search .orderChange select.classic { background-image: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; } #search .orderChange select.classic:focus { background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; border-color: grey; outline: 0; } #search .orderChange select.round { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#ddd 70%, transparent 72%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em; background-size: 5px 5px, 5px 5px, 1.5em 1.5em; background-repeat: no-repeat; } #search .orderChange select.round:focus { background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), radial-gradient(gray 70%, transparent 72%); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - .5em) .5em; background-size: 5px 5px, 5px 5px, 1.5em 1.5em; background-repeat: no-repeat; border-color: green; outline: 0; } select.minimal { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; } select.minimal:focus { background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border-color: green; outline: 0; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #333; } #search .searchBox .estateAddress .sizeStrong { font-size: 18px; } #search .searchBox .strongBg { background: #FFFFAA;} .salesBox__points .searchFeatureDefault{ font-size: clamp(12px, 2.2vw, 17px); } #search .salesBox { border:1px solid rgba(86,112,100,0.18); border-radius:8px; } /* エリアから探す */ #search .searchAreaFilter{ margin-bottom: 40px;} #search .searchAreaFilter__list{ justify-content: flex-start; gap: 1.25%;} #search .searchAreaFilter__list li{ box-sizing: border-box; width: 15.6%; align-items: stretch;} #search .searchAreaFilter__list li a{ display: block; font-size: clamp( 14px , 2.3vw , 18px); border: 1px solid #9aaf9d; text-align: center; padding: 1em 0.5em; text-decoration: none; color: #507162; flex-grow: 1;} #search .searchAreaFilter__list li a:hover , #search .searchAreaFilter__list li a.active{ background: #507162; color: #fff;} @media screen and (max-width:767px) { /* ROOM PLANS */ #plan .flexBox li { flex-basis:100%; margin:0 0 20px 0; } .tagCloud { font-size: 3vw; } .searchBox { justify-content: center;} .searchBox .logoBox { flex-basis:100%; margin: 0 0 10px 0;} .searchBox .logoBox img { width: 100%; height: auto;} .searchBox .textBox { flex-basis:100%; } #search .searchAreaFilter__list{ gap: 10px 1.3%;} #search .searchAreaFilter__list li{ width: 32.41%;} } /* PREMIUM プレミアムエディション分譲地 */ #premium .btn{ display: block; width: 100%; padding: 1em 0; border-radius: 5px; color: #fff; font-size: clamp( 18px , 2.5vw, 25px); text-align: center; text-decoration: none; font-weight: bold;} #premium .btn:hover{ opacity: 0.7;} #premium #commonContent { max-width: 1130px; margin: 0 auto;} #premium .box:not(:first-of-type){ padding-top: clamp( 60px , 8.84vw, 100px) ;} #premium .subnav{ justify-content: center; gap: 15px;} #premium .subnav a{ display: block; box-sizing: border-box; min-width: 148.5px; padding: 13px 10px; text-decoration: none; color: #333; border: 1px solid #333; font-size: 15px; text-align: center;} #premium .subnav a:hover{ background: #333; color:#fff;} #premium .premium_subtit{ position: relative; font-size: clamp( 18px , 2.4vw, 26px); font-weight: bold; text-align: center; margin-bottom: clamp( 30px , 4.4vw, 50px);} #premium .list_tit{ margin-bottom: 0.5em; color: #567064; font-weight: bold; font-size: clamp( 18px , 1.85vw, 21px);} #premium .border_list{ border-bottom: 1px solid #98B09B; padding: 1em 0; font-size: clamp( 14px , 1.6vw, 18px); line-height: 1.5;} #premium .house_image{ text-align: center;} #premium .house_image img{ max-height: 800px;} #premium .property_info{ font-size: clamp( 18px , 2.4vw, 26px); align-items: baseline; margin-top: clamp( 20px, 5.3vw ,50px); gap: 20px; line-height: 1.5;} #premium .property_info h4 { text-indent: -4em; padding-left: 4em;} #premium .property_info .name { font-size: clamp( 20px , 2.9vw, 33px); font-weight: bold; } #premium .property_info .price{ font-size: clamp( 25px , 4.7vw, 54px); color: #bb3614; font-weight: bold; } #premium .visualTitle {background: url(/assets/img/premium/title_premium_01.jpg) center center / cover no-repeat; line-height: 1.5;} #premium #commonInfoBox { border: #6DB94F solid 1px; box-sizing: border-box; margin-bottom: clamp(60px, 8.84vw, 100px);} #premium #commonInfoBox h3 { text-align: center; font-size: 20px; color: #fff; background: #6DB94F; padding: 25px 0 20px; letter-spacing: 0.08em;} #premium #commonInfoBox h3 .info_subtit { font-size: 0.6em; margin-top: 10px;} @media screen and (max-width:768px) { #premium .subnav{ gap: 10px;} #premium .subnav li{ flex-basis: calc((100% - 15px)/2);} #premium #commonInfoBox h3::before{ padding-bottom: 0;} #premium #commonInfoBox h3 { padding: 0 0 10px; margin-top: 0;} } #premium .swiper-wrapper li{ width: 100%; text-align: center;} #premium .swiper-wrapper li figure{ position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 100 / 58.8; overflow: hidden;} #premium .location .swiper-wrapper li figure{ aspect-ratio: 558 / 318;} #premium .swiper-wrapper li figure > a[data-fancybox]{ display: block; width: 100%; height: 100%; cursor: zoom-in;} #premium .swiper-wrapper li figure > a[data-fancybox] img{ display: block; position: static; width: 100%; height: 100%; object-fit: cover;} #premium .swiper-wrapper li figcaption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 40px 15px 15px; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: left; z-index: 2; box-sizing: border-box;} #premium .swiper-wrapper li figcaption.caption_close { display: none;} #premium .swiper-wrapper li figcaption .close.caption_button { position: absolute; top: 50%; right: 15px; left: auto; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 5px;} #premium .swiper-wrapper li figcaption::after:hover{ cursor: pointer;} #premium .slider-thumbnail .swiper-wrapper { display: flex; flex-wrap: wrap; transition: opacity .5s; justify-content: flex-start;} #premium .slider-thumbnail .swiper-slide { opacity: .5; flex-basis: calc((100% - 140px)/8); margin:20px 20px 0 0 ; flex-grow: 0; flex-shrink: 1;} #premium .slider-thumbnail .swiper-slide:nth-of-type(8n){ margin-right: 0;} #premium .slider-thumbnail .swiper-slide-thumb-active { opacity: 1;} #premium .swiper-button-prev{ background: url(/assets/img/premium/prev.png); background-size: contain; left: 18px; width:48px; height:48px; margin-top: -24px;} #premium .swiper-button-next { background: url(/assets/img/premium/next.png); background-size: contain; right: 18px; width:48px; height:48px; margin-top: -24px;} #premium .contact_list{ margin-bottom: clamp( 60px , 8.84vw, 100px) ; justify-content: center; gap: 40px; } #premium .contact_list li{ max-width: 464px; width: 100%;} #premium .contact_list li:nth-of-type(1) a{ background: #bb3614;} #premium .contact_list li:nth-of-type(2) a{ background: #009944;} #premium .event .premium_subtit::before,#premium .point .premium_subtit::before{ position: absolute; content: ""; display: block; background: url(/assets/img/premium/point_icon.png); width: 60px; height: 86px; left: 50%; transform: translateX(calc(-50% - 100px)); top: -20px; background-size: contain;} #premium .event .premium_subtit,#premium .point .premium_subtit{ background: #C5D9A6; font-size: clamp( 25px , 3vw , 34px); padding: 1em 0; margin-bottom: 0;} #premium .event .point_txt,#premium .point .point_txt{ background: #E6F2D6; padding: 1.8em; line-height: 1.8; font-size: clamp( 16px , 2vw , 18px);} #premium .event .btn{ max-width: 464px; margin: 30px auto 0; background: #8da790;} #premium .event .premium_subtit{ background: #8da790; color: #fff;} #premium .event .premium_subtit::before { background: url(/assets/img/premium/calender_icon.png) no-repeat; background-size: contain; width: 53px; height: 54px; top:15px; transform: translateX(calc(-50% - 140px)); } #premium .event .event_txt>p{ font-weight: bold; font-size: 18px;} #premium .event .event_box{ background: #E6F2D6; padding: 1.8em; line-height: 1.8; font-size: clamp( 16px , 2vw , 18px);} #premium .map{ margin-bottom: 40px; padding: 53.33% 0 0; position: relative; overflow: hidden; width: 100%; height: 100%; text-align: center;} #premium .induction{ display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px;} #premium .induction img{ display: block; margin: 0 auto;} #premium .map iframe{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);} #premium .access_detail .list{ flex-basis: calc(( 100% - 10px) /2); line-height: 1.8;} @media screen and (min-width:768px) { #premium .location .swiper-button-prev { left: 10px; width: 30px; height: 30px;} #premium .location .swiper-button-next{ right: 10px; width: 30px; height: 30px;} } #premium .location_listBox{ margin-top: 30px;} #premium .location_list .list{ flex-basis: calc(( 100% - 10px) /2); line-height: 1.8;} #premium .land_img , #premium .map_img , #premium .floor .floor_img{ padding: 40px; border: 1px solid #333000; text-align: center; } #premium .land .land_img img , #premium .floor .floor_img img{ object-fit: cover; width: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #premium .floor .specBox{ margin-top: 50px;} #premium .floor .swiper-wrapper li .map_img{ padding: 0;} #premium .floor .swiper-wrapper li .map_img a{ position: absolute; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%);} #premium .floor .swiper-wrapper li .map_img img{ object-fit: cover; box-sizing: border-box; } #premium .floor .spec.floor_size{ flex-basis:29%;} #premium .floor .spec.land_area{ flex-basis:36%;} #premium .floor .spec.site_area{ flex-basis:35%;} #premium .floor .spec dt{ display: flex; align-items: center; box-sizing: border-box; background: #ddf5e2; font-size: clamp(15px, 1.59vw, 18px); font-weight: bold; padding:15px 30px; width:40%;} #premium .floor .spec dd{ display: flex; align-items: center; font-size:15px; box-sizing: border-box; padding:15px 30px; width: 60%; font-size:clamp(14px, 1.41vw, 15px); line-height: 1.8;} #premium .outline dl{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 20px 0;} #premium .outline .item{ border-bottom: #98B09B solid 1px; flex-basis: 50%;} #premium .outline .item:nth-of-type(2n + 1):last-of-type{ flex-basis:100%;} #premium .outline .item:nth-of-type(1){ border-top: #98B09B solid 1px;} #premium .outline dt{ background: #E9F0D7; flex-grow: 0; flex-shrink: 1; flex-basis: 8em; text-align: left; display: block; font-weight: bold; font-size: 18px; padding: 1em 0.5em;} #premium .outline dl dt > span { display: block; box-sizing: border-box; } #premium .outline dl dd { flex-grow: 0; flex-shrink: 1; flex-basis: calc(100% - 12em); text-align: left; display: block; font-size: 15px; padding: 1em 0.5em; } #premium .outline dl dd > span { display: block; box-sizing: border-box; max-width: calc(100% - 5px); } @media screen and (max-width:767px) { /* PREMIUM */ #premium .swiper-horizontal{ touch-action: auto;} #premium .swiper-zoom-container { touch-action: none;} #premium .swiper-wrapper li figcaption{ padding: 5px 5px 5px 20px; font-size: 11px;} #premium .swiper-wrapper li figcaption .close{ transform: scale(0.8); left: -5px; top: -5px;} #premium .slider-thumbnail .swiper-slide { flex-basis: calc((100% - 40px)/5); margin:10px 10px 0 0 ; } #premium .slider-thumbnail .swiper-slide:nth-of-type(8n){ margin-right: 10px;} #premium .slider-thumbnail .swiper-slide:nth-of-type(5n){ margin-right: 0;} #premium .swiper-button-prev,#premium .swiper-button-next{ width:25px; height:25px; margin-top: -12.5px;} #premium .swiper-button-next { right: 5px;} #premium .swiper-button-prev { left: 5px;} #premium .contact_list{ gap: 15px; } #premium .access_detail .list p{ flex-basis: 100%;} #premium .floor .spec dt{ padding: 10px; width:30%;} #premium .floor .spec dd{ width: 70%;} #premium .land_img , #premium .map_img{ padding: 10px;} #premium .location_list .list{ flex-basis: 100%;} #premium .floor .swiper-wrapper li .map_img img{ padding: 10px; } #premium .floor .specBox{ margin-top: 20px;} #premium .floor .spec:nth-of-type(1),#premium .floor .spec:nth-of-type(2),#premium .floor .spec:nth-of-type(3){ flex-basis:100%; margin-bottom: 10px;} #premium .floor .swiper-button-next { top: 25%; right: 5px;} #premium .floor .swiper-button-prev { top: 25%; left: 5px;} #premium .outline .item{ flex-basis: 100%;} #premium .outline dl dt{ background: none; flex-basis: 7em; flex-grow: 0; flex-shrink: 1; font-weight: bold; ;box-shadow: none; font-size: 15px; font-size: 15px; padding: 15px 0;} #premium .outline dl dt > span { border-right: none; } #premium .outline dl dd { flex-basis: calc(100% - 8em); font-size: 14px; padding: 15px 0;} #premium .event .premium_subtit::before{ width: 40px; height: 41px; transform: translateX(calc(-50% - 120px));} } /* MPEのモーダルのスタイル */ #premium #image-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 99999; cursor: pointer; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } #premium .modal-content { position: relative; max-width: 90vw; max-height: 90vh; margin: auto; cursor: default; display: flex; flex-direction: column; align-items: center; } #premium #modal-img { width: auto; height: auto; max-width: 100%; max-height: 85vh; object-fit: contain; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); background: #fff;} #premium .js-modal-close.modal-close-btn { position: absolute; top: -40px; right: 0; color: #ffffff; font-size: 36px; line-height: 1; font-weight: bold; cursor: pointer; user-select: none; transition: opacity 0.2s ease; } #premium .js-modal-close.modal-close-btn:hover { opacity: 0.7; } @media screen and (max-width: 768px) { #premium #image-modal { padding: 10px; } #premium .js-modal-close.modal-close-btn { top: -45px; right: 5px; font-size: 40px; } } /* KNOWLEDGE 住まいの支援制度 */ #knowledge02_term figure:nth-of-type(1) { flex-basis:55%; } #knowledge02_term .commentBox { box-sizing:border-box; position:relative; border:#f1e5e3 solid 2px; border-radius:10px; padding:7.5%; } #knowledge02_term .commentBox::after { content:''; display:block; width:30px; height:30px; border-right:#f1e5e3 solid 2px; border-top:#f1e5e3 solid 2px; transform:rotate(45deg); right:-15px; top:calc(50% - 15px); position:absolute; box-sizing:border-box; background:#fff; } #knowledge02_term figure:nth-of-type(2) { flex-basis:38.33%; } #knowledge02_point figure {flex-basis:calc( ( 100% - 40px ) / 3 ); } /* INFORMATION */ .basicSubNavi ul { margin: 0 0 2em 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start;} .basicSubNavi ul::after{ content: ""; display: block; width: 20%; height: 0; } .basicSubNavi ul li{ flex-basis:calc(( 100% - 50px)/5); text-align: center; margin-right:0; background: #fff;} .basicSubNavi ul li a{ border: 1px solid #333;} .basicSubNavi ul li a::before{ display: none;} .basicSubNavi ul li a:hover,.basicSubNavi ul li a.active{ background: #ca4714; color: #fff; font-weight: bold; border:#ca4714;} .basicSubTitle{ text-align: center; font-size:clamp( 28px, 6.25vw ,48px); padding-left: 0;} .basicSubTitle::before { display: none; } #infoList li { flex-basis:calc(50% - 20px ); } #infoList li:not(:last-of-type){ padding-bottom: 35px;} .infoListBox { } .infoListBox a { display:flex; flex-wrap:wrap; justify-content:space-between; color:#333; text-decoration:none;} .infoListBox .textBox .categoryLabel { display: inline-block; padding: 0.25em 0.5em; color: #333; font-size: 12px; background: #bb3614; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2; border: 1px solid #333;} .infoListBox .textBox { flex-basis:calc(100% - 200px ); align-self:center; } .infoListBox .thumbnailBox { flex-basis:180px; margin:0; align-self: flex-start;} .infoListBox .textBox { flex-basis:calc(100% - 200px ); align-self:center; } .infoListBox .thumbnailBox img{ width: 100%;} .infoListBox .textBox .titleBox { font-size: 180%; margin: 0 0 0 0;} /* INFORMATION-イベント・キャンペーン情報一覧ページ*/ section[id$="infodetail"] #infoList li:not(:first-of-type){ border-top: 1px solid #333; padding-top: 35px;} section[id$="infodetail"] .infoListBox .linkBox{ display: flex; flex-wrap: wrap;} section[id$="infodetail"] .infoListBox .linkBox .thumbnailBox{ flex-basis: 23.5%;} section[id$="infodetail"] .infoListBox .linkBox .dateBox{ position:relative; box-sizing: border-box; width: 24.9%; padding: 0 20px;} section[id$="infodetail"] .infoListBox .linkBox .period_Box{ width: 51.5%;} section[id$="infodetail"] .infoListBox .linkBox .period_Box .categoryLabel { font-size: 18px; transform: none; } section[id$="infodetail"] .infoListBox .textBox{ flex-basis: auto;} section[id$="infodetail"] .infoListBox .textBox .timeStamp{ position: absolute; top: 50%;transform: translateY(-50%); font-size:clamp( 16px,1.6vw,20px); font-weight: bold } section[id$="infodetail"] .infoListBox .textBox .timeStamp span.week{ border: 1px solid #333; border-radius:50%; width: 28px; height: 28px; line-height: 28px; text-align: center; font-size: 15px; vertical-align: 4px;} section[id$="infodetail"] .infoListBox .textBox .timeStamp span.month, section[id$="infodetail"] .infoListBox .textBox .timeStamp span.day{ font-size:clamp( 20px,2.5vw,30px); font-weight: bold; } section[id$="infodetail"] .infoListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:180%; color:#bb3614; font-weight:bold; } section[id$="infodetail"] .infoListBox .textBox .titleBox { font-size:180%; font-weight: bold; margin:0 0 0 0; display: block; color:#333; line-height: 1.5;} section[id$="infodetail"] .infoListBox .period_Box { margin-top: 2em;} section[id$="infodetail"] .infoListBox .period_Box p{ color: #333;} section[id$="infodetail"] .infoListBox .period_Box .count_down_Box { display: inline-block;} section[id$="infodetail"] .infoListBox .period_Box .count_down_Box p{ font-size: 18px; color: #fff; } section[id$="infodetail"] .infoListBox .textBox .categoryLabel { display: inline-block; padding: 0.5em ; color: #333; font-weight: bold; font-size: 16px; transform: translateY(-1px); border:1px solid #333; background: none; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2;} /* イベント・キャンペーン情報の日付表示 */ section[id$="infodetail"] .dateBox .timeStamp { font-weight:normal; line-height:1.5; margin:0; display:inline-block; letter-spacing: 0.08em; } section[id$="infodetail"] .dateBox .timeStamp span.week{ display: inline-block; margin-left:0.5em; box-sizing: border-box; width: 28px; height: 28px; line-height: 28px; font-size: 15px; font-weight: normal; text-align: center; border: 1px solid #000; border-radius:50%; vertical-align: 4px;} section[id$="infodetail"] .dateBox .timeStamp span.sat{ background: #376db5; color: #fff; border:none;} section[id$="infodetail"] .dateBox .timeStamp span.sun{ background: #c21818; color: #fff; border:none;} section[id$="infodetail"] .dateBox .timeStamp span.month, .timeStamp span.day{ border:none; font-weight: normal;} section[id$="infodetail"] .period_Box .count_down_Box p{ color:#fff; font-size: 16px; padding:0.5em; text-align:center; display: inline-block; line-height: 1.2;} section[id$="infodetail"] .period_Box .count_down_Box .days_left{ background: #e97200; padding: 0.3em 0.5em; transform: translateY(2px); } section[id$="infodetail"] .period_Box .count_down_Box .days_left span{ font-size: 26px;} section[id$="infodetail"] .period_Box .count_down_Box .until_today{ background: #c21818; font-weight: bold;} section[id$="infodetail"] .period_Box .count_down_Box .in_session{ background: #c21818; font-weight: bold;} section[id$="infodetail"] .period_Box .count_down_Box .end{ background: #212464;} section[id$="infodetail"] .infoListBox .textBox .categoryLabel { display: inline-block; padding: 0.5em ; color: #000; font-weight: bold; font-size: 16px; transform: translateY(-1px); border:1px solid #000; background: none; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2;} @media screen and (max-width:767px) { /* INFORMATION */ .basicSubNavi ul { gap: inherit; justify-content: space-between;} .basicSubNavi ul li{ flex-basis:calc(( 100% - 10px)/2); text-align: center; margin-bottom:10px;} .infoListBox .thumbnailBox { flex-basis:100%; margin: 0 0 10px 0;} .infoListBox .textBox { flex-basis:100%; } .infoListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:150%; color:#bb3614; font-weight:bold; } .infoListBox .textBox .titleBox { font-size:150%; margin:0 0 0 0; } #infoList li { flex-basis:calc(50% - 10px ); } } @media screen and (max-width:767px) { /* INFORMATION イベント情報・キャンペーン情報一覧*/ section[id$="infodetail"] #infoList li:not(:first-of-type){ border-top: none;} section[id$="infodetail"] .infoListBox .linkBox .thumbnailBox { flex-basis: 100%; margin-bottom: 15px;} section[id$="infodetail"] .infoListBox .linkBox .dateBox{ padding: 0 0 10px; width: 100%;} section[id$="infodetail"] .infoListBox .linkBox .period_Box { width: 100%; } section[id$="infodetail"] .infoListBox .linkBox .period_Box .categoryLabel, section[id$="infodetail"] .infoListBox .textBox .timeStamp, section[id$="infodetail"] .infoListBox .textBox .timeStamp span.day{ position: static; transform: none; font-size: 15px; font-weight: normal;} section[id$="infodetail"] .infoListBox .textBox .timeStamp span.month, #event .infoListBox .textBox .timeStamp span.day { font-size: 15px; font-weight: normal;} section[id$="infodetail"] .infoListBox .textBox .timeStamp span.week{ font-size: 10px; width: 17px; height: 17px; line-height: 17px; vertical-align: 2px; margin-left: 0.2em; letter-spacing: 0;} section[id$="infodetail"] .infoListBox .textBox .categoryLabel { font-size: 15px;} section[id$="infodetail"] .infoListBox .period_Box { margin-top: 0;} section[id$="infodetail"] .infoListBox .period_Box .count_down_Box p{ font-size: 15px; } section[id$="infodetail"] .infoListBox .textBox .titleBox{ font-size: 20px; margin-bottom: 10px;} } /* MIHAMA VOICE */ #mihamavoiceList li { margin:0 0 40px 0; flex-basis:100%; } .mihamavoiceListBox { } .mihamavoiceListBox a { display:flex; flex-wrap:wrap; justify-content:space-between; color:#333; text-decoration:none;} .mihamavoiceListBox .thumbnailBox { flex-basis:180px; margin:0; align-self: flex-start;} .mihamavoiceListBox .textBox { flex-basis:calc(100% - 200px ); align-self:center; line-height: 1.2;} .mihamavoiceListBox .textBox .timeStamp{ margin-top: 0.5em;} .mihamavoiceListBox .textBox .categoryLabel { display: inlinxe-block; padding: 0.25em 0.5em; color: #fff; font-size: 12px; background: #bb3614; margin: 0 0.25em 0.25em 0 !important; line-height: 1.7;} .mihamavoiceListBox .textBox .categoryLabel a { color: #fff;} .mihamavoiceListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:180%; color:#bb3614; font-weight:bold; } .mihamavoiceListBox .textBox .titleBox { font-size:180%; margin:0 0 0 0; } @media screen and (max-width:767px) { /* MIHAMAVOICE */ .mihamavoiceListBox .thumbnailBox { flex-basis:100%; margin: 0 0 10px 0; } .mihamavoiceListBox .textBox { flex-basis:100%; } .mihamavoiceListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:150%; color:#bb3614; font-weight:bold; } .mihamavoiceListBox .textBox .titleBox { font-size:150%; margin:0 0 0 0; } #mihamavoiceList li { flex-basis:calc(50% - 10px ); } #top_works .swiper-button-prev,#top_works .swiper-button-next{ width: 30px; height: 30px; background-size: 30px 30px; top: 40%; margin-top: -15px; ;} #top_works li a{ font-weight: normal;} #top_works .swiper-button-next, #top_works .swiper-container-rtl .swiper-button-prev { right: -15px;} #top_works .swiper-button-prev, #top_works .swiper-container-rtl .swiper-button-next { left: -15px;} } /* VOICE お客様の声 */ #voiceList li { margin:0 0 40px 0; flex-basis:calc(50% - 20px ); } .voiceListBox { } .voiceListBox a { display:flex; flex-wrap:wrap; justify-content:space-between; color:#333; text-decoration:none;} .voiceListBox .thumbnailBox { flex-basis:180px; margin:0; align-self: flex-start;} .voiceListBox .textBox { flex-basis:calc(100% - 200px ); align-self:center; } .voiceListBox .textBox .categoryLabel { display: inline-block; padding: 0.25em 0.5em; color: #fff; font-size: 12px; background: #bb3614; margin: 0 0.25em 0.25em 0 !important; line-height: 1.2;} .voiceListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:180%; color:#bb3614; font-weight:bold; } .voiceListBox .textBox .titleBox { font-size:180%; margin:0 0 0 0; } .faq { margin:0 auto 40px auto; } .faq .voiceBox2 p { margin: 0 0 2em 0;} .faq .voiceBox2 > .photoBox { margin:0 0 40px 0; } .faq .voiceBox2 { width:100%; max-width:800px; margin:0 auto; font-size:16px; line-height:2em;} .faq .voiceBox2 h4.bukken{ position: relative;} .faq .voiceBox2 h4 span{ font-size: 24px; letter-spacing: 0.15em; color: #8fc31f; padding: 12px 0; display: block; border-bottom: 1px dashed #8fc31f; line-height: 1.4em;} .faq .voiceBox2 h4.bukken span{ padding: 17px 0 7px;} .faq .voiceBox2 h4 span.bukken_name{ position: absolute; left: 70px; top: 0; font-size: 12px; letter-spacing: inherit; padding: 0; border-bottom: none; line-height: 1em;} .faq .voiceBoxInner .textBox, .faq .voiceBoxInner .photoBox4{ float: none; width: 100%;} .faq .voiceBox2 li:not(.blocks-gallery-item):nth-child(n+2){ margin-top: 40px;} .faq .voiceBox2 li div{ font-size: 16px; background: no-repeat 0 0; padding-left: 50px;} .faq .voiceBox2 li div p{ font-size: 16px; min-height: 40px; padding-top: 5px;} .faq .voiceBox2 .txtQ{ background-image: url(../img/voice/icon_faq_q.png); margin:0 0 1em 0;} .faq .voiceBox2 .txtQ p{ color: #8fc31f;font-weight: bold;} .faq .voiceBox2 .txtA{ background-image: url(../img/voice/icon_faq_a.png); margin:0 0 1em 0;} .faq .voiceBox2 .txtA p{ color: #ea4e6b;} .faq .voiceBox2 .txtA p b{background: linear-gradient(transparent 50%, yellow 50%);} .voiceContent .flexBox .textBox { flex-basis:calc(50% - 20px ); margin:0 0 40px 0; } .voiceContent .flexBox .photoBox, .faq .flexBox .photoBox { flex-basis:calc(50% - 20px ); margin:0 0 40px 0; } @media screen and (max-width:767px) { /* CUSTOMER VOICE */ .voiceListBox .thumbnailBox { flex-basis:180px; } .voiceListBox .textBox { flex-basis:calc(100% - 200px ); align-self:center; } .voiceListBox .textBox .initialBox { display:inline-block; margin:0 0.5em 0 0; font-size:150%; color:#bb3614; font-weight:bold; } .voiceListBox .textBox .titleBox { font-size:150%; margin:0 0 0 0; } #voiceList li { flex-basis:100%; } .voiceContent .flexBox .textBox, .voiceContent .flexBox .photoBox, .faq .flexBox .photoBox { flex-basis:100%; } } .messageBox { width:100%; max-width:640px; margin:0 auto 60px auto; background:#f1f1f1; padding:20px 20px; box-sizing:border-box; } .messageBox ul li:not(:last-of-type) { margin:0 0 10px 0; } .faq .readMoreBtn , .voiceContent .readMoreBtn { } #voice .btnBox { padding:40px 0 0 0; width:100%; max-width:380px; margin:0 auto; } #voice .btnBox .flexBox li { flex-basis:160px; } #voice .btnBox .flexBox li.nextLink { flex-basis:40px; margin:0 0 0 10px; } #voice .btnBox .flexBox li.prevLink { flex-basis:40px; margin:0 10px 0 0; } #voice .btnBox .flexBox li a.readMoreBtn { width:100%; text-align:center; } #voice .btnBox .flexBox li a.readMoreBtn i { margin:0; } .articlePhoto { display:block; margin:10px 0; } .articlePhoto img { display:block; width:100%; height:auto; } .articlePhoto figcaption { display:block; font-size:10px; line-height:1.2em; padding:0.25em 0; } /* ECO 省エネ・エコ */ #solar .flexBox .textBox { flex-basis:calc(70% - 20px); } #solar .flexBox .photoBox { flex-basis:calc(30% - 20px); } #double .flexBox .textBox { flex-basis:calc(50% - 20px); } #double .flexBox .photoBox { flex-basis:calc(50% - 20px); } #economy_ecology .flexBox .textBox { flex-basis:calc(70% - 20px); } #economy_ecology .flexBox .ledBox { flex-basis:calc( ( 100% - 20px ) / 3 ); } #economy_ecology .flexBox .photoBox { flex-basis:calc(30% - 20px); } #economy_ecology .flexBox .evBox { flex-basis:calc(50% - 10px); } @media screen and (max-width:767px) { /* ECO 省エネ・エコ */ #solar .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #solar .flexBox .photoBox { flex-basis:100%; margin: 0 0 20px 0; } #double .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #double .flexBox .photoBox { flex-basis:100%; margin: 0 0 20px 0; } #economy_ecology .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #economy_ecology .flexBox .photoBox { flex-basis:100%; margin: 0 0 20px 0; } #economy_ecology .flexBox .evBox { flex-basis:100%; margin: 0 0 20px 0; } } #double #after11Year .flexBox .photoBox:nth-of-type(1) { flex-basis:26.75%;} #double #after11Year .flexBox .photoBox:nth-of-type(2) { flex-basis:36.25%;} #double #after11Year .flexBox .photoBox:nth-of-type(3) { flex-basis:35.75%;} #double #after11Year .flexBox .photoBox:nth-of-type(4) { flex-basis:100%;} /* HOUSE ミハマの家づくり */ #freeplan .swiper-button-prev, #freeplan .swiper-button-next { margin-top:calc(26.66% + 22px) !important; top:0 !important; } #freeplan .flexBox .photoBox { flex-basis:calc(30% - 20px); } #freeplan .flexBox .textBox { flex-basis:calc(70% - 20px); align-self:center; } #freeplan .swiper-slide { background:#fff; } #gva .flexBox .photoBox { flex-basis:calc(50% - 20px); } #gva .flexBox .textBox { flex-basis:calc(50% - 20px); } #gva .flexBox .basicTable { flex-basis:calc(50% - 20px); } #gva .noteBox2 {border:#bb3614 solid 1px; padding:2em; box-sizing:border-box; } #guarantee #guaranteePrice .photoBox { flex-basis:calc( ( 100% - 20px ) / 3 ); } #guarantee .flexBox .photoBox { flex-basis:calc(30% - 20px); } #guarantee .flexBox .textBox { flex-basis:calc(70% - 20px); } #jio .flexBox .photoBox { flex-basis:calc(50% - 20px); } #jio .flexBox .textBox { flex-basis:calc(50% - 20px); } #facility .flexBox .photoBox { flex-basis:calc(50% - 20px); } #facility .flexBox .textBox { flex-basis:calc(50% - 20px); } @media screen and (max-width:767px) { /* HOUSE */ #freeplan .flexBox .photoBox, #freeplan .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #gva .flexBox .photoBox, #gva .flexBox .textBox, #gva .flexBox .basicTable{ flex-basis:100%; margin: 0 0 20px 0; } #guarantee .flexBox .photoBox, #guarantee .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #guarantee #guaranteePrice .photoBox { flex-basis:100%; margin: 0 0 20px 0;} #guarantee #guaranteePrice .photoBox figcaption { text-align: center; } #jio .flexBox .photoBox, #jio .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #facility .flexBox .photoBox, #facility .flexBox .textBox { flex-basis:100%; margin: 0 0 20px 0; } #facility .textBox .flexBox .photoBox { flex-basis:calc( ( 100% - 10px ) / 2 );} #afterservice .basicTable {overflow: auto; height: 50vh;} #afterservice .basicTable table { width: 300%;font-size:12px; } } #achievement .textBox .imgBox { width: 100px; float: right; margin: 0 0 10px 10px;} @media screen and (max-width:767px) { /* OUTLINE */ .outlineAchievement .photoBox, .outlineAchievement .textBox { flex-basis:100%; margin:0 0 20px 0; } #csr .flexBox .photoBox , #csr .flexBox .textBox { flex-basis:100%; margin:0 0 20px 0; } #group .flexBox .photoBox , #group .flexBox .textBox { flex-basis:100%; margin:0 0 20px 0; } #history .flexBox .photoBox { flex-basis:100%; margin:0 0 20px 0; } #history .flexBox .textBox { flex-basis:100%; margin:0 0 20px 0; } #business .flexBox .photoBox { flex-basis:100%; margin:0 0 20px 0; } #business .flexBox .textBox { flex-basis:100%; margin:0 0 20px 0; } #achievement .textBox .imgBox { float: none; margin: 0 auto 10px auto; width: 40%;} #company .basicStyleTable table { display: block; float: note; width: 100%;} #company .basicStyleTable thead {display: block; float: note; width: 100%; } #company .basicStyleTable tbody { display: block; float: note; width: 100%;} #company .basicStyleTable tfoot { display: block; float: note; width: 100%;} #company .basicStyleTable tr:not(:last-of-type) td { border-bottom:#ccc dotted 1px; } #company .basicStyleTable tr:not(:last-of-type) th { border-bottom:#ccc dotted 1px; } #company .basicStyleTable tr { display: block; float: none; width: 100%;} #company .basicStyleTable tbody tr th { display: block; float: note; width: 100%; padding: 1em; } #company .basicStyleTable tbody tr td { display: block; float: note; width: 100%; padding: 1em; } } /* SITEMAP サイトマップ */ #sitemapLink { font-size:16px; display:block; } #sitemapLink ul { padding:0 0 0 1.5em; } #sitemapLink ul li { margin:0 0 0.5em 0 } #sitemapLink ul li a { position:relative; padding:0 0 0 1.5em; line-height:1; color:#bb3614; text-decoration:none; } @media screen and (min-width:768px) { #sitemapLink ul li a:hover { color:#ccc ; text-decoration:none; } } #sitemapLink ul li i { position:absolute; left:0; top:0; } #sitemapLink ul li ul { margin:0.5em 0 0 0; } #sitemapLink ul li ul li { display:inline-block; margin:0 1em 0.5em 0; vertical-align:top; } #sitemapLink ul li ul li a { padding:0; } #sitemapLink ul li ul li a::before { content:'◆'; display:inline-block; } /* INTRODUCE CAMPAIGN */ .ribbon1 { display: inline-block; position: relative; text-align: center; line-height:1; padding: 1em 5em; font-size: 18px; background:url(/assets/img/introduce/bg_introduce_01.png) center center / 100% auto no-repeat; color: #FFF; box-sizing: border-box; font-family: 'BIZ UDPGothic', sans-serif; } #introduceBox { box-sizing:border-box; padding:35px; border:#f8ebe7 solid 2px; border-radius:4px; } #introduceBox .introduceTitle { background:#bb3614; text-align:center; color:#fff;} #introduceBox .flexBox .photoBox { flex-basis:30%; } #introduceBox .flexBox .textBox { flex-basis:calc( 70% - 20px ); } #introduce .visualTitle { text-align:center; } #introduce .visualTitle p { font-size:12px; display:block; padding:2em 0 0 0; line-height:2em; } #introduceBox2 .pointBox { flex-basis:calc( ( 100% - 20px ) / 2 ); background:#f7f9fa; } #introduceBox2 .textBox { position:relative; padding:30px; } #introduce .contactBtn { background:#bb3614; color:#fff; text-align:center; font-size:20px; line-height:1; padding:1.5em 0; width:100%; max-width:480px; margin:0 auto; text-decoration:none; display:block; } /* INTRODUCE キャンペーン 2020.07.06〜 */ #introduce_2 { background: #fff4db url("/assets/img/introduce2/bg_introduce.png"); margin-bottom: 20px} .introduceTitle { background: url("/assets/img/introduce2/title_introduce_01.png") center top / auto 752px no-repeat; min-height: 752px; text-align: center; box-sizing: border-box; padding: 100px 0 0 0; margin: 0 auto 80px auto;} .introduceTitle h2 { margin: 0 auto 40px auto;} .introduceTitle p { color: #fff;} #introduce_2 .localNavi { margin: 0 0 50px 0; } #introduce_2 .localNavi ul { width: 100%; max-width: 752px; margin: 0 auto;} #introduce_2 .localNavi ul li { flex-basis: calc( ( 100% - 24px ) / 2); } #introduce_2 .localNavi ul li a { display: block; background: #fff; border: #f18266 solid 2px; border-radius: 5px; color: #f18266; font-weight: bold; text-decoration: none; text-align: center; line-height: 1.2; box-sizing: border-box; padding: 0.75em 0.25em; font-size: 20px;} #introduce_2 .localNavi ul li a:hover, #introduce_2 .localNavi ul li a.active { background: #f18266; color: #fff; text-decoration: none;} #introduce_2 .modal{ position: fixed; z-index: 100;} #introduce_2 .modal-content{ background: none; width: 90%; max-width: none;} #introduce_2 .modal-content .close{ position: static; width: 100%; display: block; transform: none; color: #fff;} #introduce_2 .modal-content .close::before, #introduce_2 .modal-content .close::after{ content: none;} #introduce_2 h3 { background: #ffeaba; color: #f18266; text-align: center; padding: 2em 0; font-size: 32px; position: relative; overflow: visible; font-weight: bold;} #introduce_2 h3#rabbit::before { display: block; position: absolute; left: 50%; transform: translateX(-16em) translateY(-50%); top:50%; content: ''; background: url("/assets/img/introduce2/img_introduce_01.png"); width:151px; height: 244px;} #introduce_2 h3#frog::before { display: block; position: absolute; left: 50%; transform: translateX(16em) translateY(-50%); top:50%; content: ''; background: url("/assets/img/introduce2/img_introduce_01_b.png"); width:169px; height: 174px;} #introduce_2 #illust01::before { display: block; content: ''; background: url("/assets/img/introduce2/img_introduce_02.png") center top; z-index: 1; width: 319px; height: 143px; position: absolute; right:0; top:-143px;} #introduce_2 #illust02::before { display: block; content: ''; background: url("/assets/img/introduce2/img_introduce_04.png") center top; z-index: 1; width: 217px; height: 153px; position: absolute; left:0; top:-153px;} #introduce_2 #QA { } #introduce_2 #QA dl { position: relative; overflow: visible;} #introduce_2 #QA dl::before { z-index: 1; display: block; content: ''; background: url("/assets/img/introduce2/img_introduce_09.png") center bottom / contain no-repeat; width: 143px; height: 138px; bottom:100%; right:-10px; position: absolute;} #introduce_2 #QA dl dt { display: block; position: relative; font-size: 14px; padding: 1em 1em 1em 4em; background: #fff;} #introduce_2 #QA dl dt span { position: absolute; left: 1em; top:50%; transform: translateY(-50%); color: #94c85c; font-size: 150%;font-family: 'Marko One', serif;} #introduce_2 #QA dl dd {display: block; position: relative; font-size: 14px; padding: 1em 1em 1em 4em; } #introduce_2 #QA dl dd span { position: absolute; left: 1em; top:50%; transform: translateY(-50%); color: #bb3614; font-size: 150%;font-family: 'Marko One', serif;} .fontMarkoOne { font-family: 'Marko One', serif;} .giftContent { } .giftContent .smallTitle { color: #94c85c; text-align: center; margin: 0 0 1em 0; position: relative; z-index: 2; font-size: 20px;} .giftContent .smallTitle b { font-size: 150%; font-weight: normal;} .giftContent h4 { font-size: 48px; text-align: center; line-height: 1.2; margin: 0 0 0.5em 0; position: relative; z-index: 2; font-weight: bold;} .giftBox { background: #fff; padding: 40px; position: relative; overflow: visible;} .giftBox:not(#presentFlow) h5, .giftBox:not(#closing) h5{ margin-bottom: 1.5em; font-size: 16px; text-align: center;} #presentFlow h5 { font-size: 20px; color:#94c85c; text-align: center;} #presentFlow h5 b { font-size: 150%; font-weight: normal} #presentFlow .flexChild { flex-basis: calc( ( 100% - 40px ) / 3); background: #fff; border-radius: 5px;} @media screen and (max-width:767px) { /* INTRODUCE */ .introduceTitle { background: #f18266 url("/assets/img/introduce2/title_introduce_01.png") center top / auto 80% no-repeat; min-height: inherit; text-align: center; box-sizing: border-box; padding: 5% 0 2% 0; margin: 0 auto 80px auto;} .introduceTitle h2 { margin: 0 auto 5% auto; width: 75%;} .introduceTitle p { color: #fff; font-size: 3vw;} #introduce_2 .localNavi ul li a { font-size: 3vw;} #introduce_2 h3 { font-size: 4vw;} #introduce_2 h3#rabbit::before { display: block; position: absolute; left: 50%; transform: translateX(-12em) translateY(-50%); top:50%; content: ''; background: url("/assets/img/introduce2/img_introduce_01.png") center center / contain no-repeat; width:75px; height: 122px;} #introduce_2 h3#frog::before { display: block; position: absolute; left: 50%; transform: translateX(12em) translateY(-50%); top:50%; content: ''; background: url("/assets/img/introduce2/img_introduce_01_b.png") center center / contain no-repeat; width:85px; height: 67px;} .smallTitle {text-shadow: 1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff; } .giftContent h4 { font-size: 5vw; text-shadow: 1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff,1px 1px 2px #fff;} #introduce_2 .modal-content{ width: 90%;} #introduce_2 #illust01 { padding: 20px 20px 180px 20px;} #introduce_2 #illust01::before { top:auto; bottom: 0; right:50%; transform: translateX(50%);} #introduce_2 #illust02 { padding: 20px 20px 180px 20px;} #introduce_2 #illust02::before { top:auto; bottom: 0; left:50%; transform: translateX(-50%);} #introduce_2 .giftBox.Box02 #closing h5{ font-size:16px;} #introduce_2 .giftBox.Box02 #closing h5 span{ display: block; margin-bottom:20px;} #presentFlow .flexChild { flex-basis: 100%; margin: 0 0 20px 0;} } .giftBox p a { color: #bb3614; text-decoration: underline;} .giftBox p a:hover { color: #ccc; text-decoration: none;} .giftBox h5.borderTitle { border-bottom: #ccc solid 1px; padding: 0 0 0.5em 0; margin: 0 0 1em 0; text-align: center; font-size: 14px; font-weight: bold;} .giftBox.Box02 #closing h5{ font-size:20px; margin-bottom: 1.5em; text-align: center;} .giftBox.Box02 h5 img{ vertical-align: middle;} .giftBox .closing_table{ text-align: center;} .giftBox figure { text-align: center;} .introduceForm a { display: block; background: #dc431c; color: #fff; text-decoration: none; text-align: center; width: 100%; max-width: 480px; font-size: 24px; padding: 1em 0; box-sizing: border-box; border-radius: 5px; margin: 0 auto;} .introduceForm a:hover { background: #ccc; text-decoration: none; color: #fff;} /* MANAGEMENT */ #entry .contactBtn { background:#bb3614; color:#fff; text-align:center; font-size:20px; line-height:1; padding:1.5em 0; width:100%; max-width:480px; margin:0 auto; text-decoration:none; display:block; } #howto .flexBox .photoBox { flex-basis:calc(50% - 20px ); } #howto .flexBox .textBox { flex-basis:calc(50% - 20px ); } #step .flexBox .photoBox { flex-basis:calc(30% - 20px ); } #step .flexBox .textBox { flex-basis:calc(70% - 20px ); } #stepBox .photoBox figure { padding:20px; } @media screen and (max-width:767px) { /* MANAGEMENT */ #step .flexBox .photoBox { flex-basis:100%; } #step .flexBox .textBox { flex-basis:100%; margin:0 0 20px 0; } #stepBox .photoBox { display:flex; flex-wrap:wrap; justify-content:space-between; } #stepBox .photoBox figure { padding:0; flex-shrink:1; flex-basis:calc(50% - 10px); margin:0 0 20px 0; } } /* PLANSALE プラン販売 */ #plansale { } .plansaleTitle { margin: 0 auto 126px auto; position: relative;} .plansaleTitle h2.fitTitle { width: 100%; height: auto;} .plansaleTitle h2.fitTitle img { width: 100%; height: auto;} .plansaleTitle a { display: block; width: calc(100% - 40px ); max-width: 480px; box-sizing: border-box; padding: 1em 0; margin: 0 auto; line-height: 1.2; font-size: 24px; color: #fff; text-align: center; background: #dc431c; border-radius: 5px; text-decoration: none; z-index: 3;} .plansaleTitle .chara { position: absolute; right:15%; bottom:0px; width: 18.29%; transform: translateY(19%); min-width: 360px; pointer-events: none;} #plansale h3 { font-size: 48px; text-align: center; line-height: 1.2; color: #534c4a; margin: 0 auto 1em auto;} #plansale h3 .sub { display: block; text-align: center; font-size: 20px; color: #3195bf; line-height: 1.2; margin: 0 auto 1em auto;} #plansale .fontAbel { font-family: 'BIZ UDPGothic', sans-serif;} #plansale .flowBox h4 { font-size: 30px; line-height: 1.2; padding: 10px 0; text-align: center; color: #fff; font-weight: bold;} #normalFlow { border: #534c4a solid 2px;; } #normalFlow h4 { background: #534c4a; } #plansaleFlow { border: #1589d2 solid 2px; } #plansaleFlow h4 { background: #1589d2; } #plansale .flowBox ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 30px; box-sizing: border-box;} #plansale .flowBox ul li { flex-basis: calc( ( 100% - 140px) / 8 ); margin: 0 20px 0 0; display: block; position: relative;} #plansale .flowBox ul li:last-of-type { margin: 0;} #plansale .flowBox ul li:after { position: absolute; right:-10px; top:50%; transform: translateX(50%) translateY(-50%); content: ''; width: 6px; height: 24px; background: linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #dc431c 50.5%) no-repeat top left/100% 50%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #dc431c 50.5%) no-repeat bottom right/100% 50%; display: block;} #plansale .flowBox ul li:last-of-type:after { display: none;} #plansale #merit ul { display: flex; flex-wrap: wrap; justify-content: space-between;} #plansale #merit ul li { flex-basis: calc( ( 100% - 30px ) / 3 ); margin: 0 0 20px 0;} #plansaleEstate { background: url("../img/plansale/bg_plansale_02.png") center center / 128px 128px repeat;} #plansaleEstate h3 { background: #1589d2; color: #fff; padding: 20px 10px;} #plansaleEstate #plansaleEstateList { padding: 0 0 40px 0;} #plansaleEstate #plansaleEstateList li { flex-basis: calc( ( 100% - 20px ) / 2); position: relative; background: #fff; margin: 0 0 20px 0; overflow: visible;} #plansaleEstate #plansaleEstateList li .dpower { width: 58px; height: 62px; background: url("../img/plansale/icon_plansale_02.png") center center / 100% 100% no-repeat; line-height: 1; position: absolute; top:0; right: 0; transform: translateX(25%) translateY(-25%);} #plansaleEstate #plansaleEstateList li .estateBox { height: 100%; position: relative; box-sizing: border-box; padding: 0 0 90px 0;} #plansaleEstate #plansaleEstateList li .estateBox .imgSlider { margin: 0 auto 40px auto:} #plansaleEstate #plansaleEstateList li .estateBox .imgBox { position: relative; cursor: pointer;} #plansaleEstate #plansaleEstateList li .estateBox .imgBox i { color: rgba(255,255,255,1); position: absolute; right: 5px; bottom:5px; font-size: 20px; padding: 5px; background: rgba(0,0,0,0.2); pointer-events: none;} #plansaleEstate #plansaleEstateList li .estateBox .imgBox .dpower { width: 58px; height: 62px; background: url("../img/plansale/icon_plansale_02.png") center center / 100% 100% no-repeat; line-height: 1; position: absolute; top:10px; right:10px;} #plansaleEstate #plansaleEstateList li .estateBox .bx-wrapper .bx-pager, #plansaleEstate #plansaleEstateList li .estateBox .bx-wrapper .bx-controls-auto { bottom: 10px;} #plansaleEstate #plansaleEstateList li .estateBox .specBox { padding: 20px 30px;} #plansaleEstate #plansaleEstateList li .estateBox .specBox .estateName { position: relative; padding: 0 0 0 90px; min-height: 70px; margin: 0 0 20px 0;} #plansaleEstate #plansaleEstateList li .estateBox .specBox .estateName .logoBox { width: 70px; position: absolute; left: 0; top: 0; box-sizing: border-box; border: #ccc solid 1px;} #plansaleEstate #plansaleEstateList li .estateBox .specBox .estateName .name {display: block; font-weight: bold; font-size: 24px; margin: 0 0 10px 0;} #plansaleEstate #plansaleEstateList li .estateBox .specBox .estateName .address { display: block; font-size: 16px; font-weight: normal;} #plansaleEstate #plansaleEstateList li .estateBox .specBox ul { } #plansaleEstate #plansaleEstateList li .estateBox .specBox ul li { font-size: 16px; display: block; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: #ccc dotted 1px;} #plansaleEstate #plansaleEstateList li .estateBox .specBox ul li b { color: #dc431c; font-weight: bold; font-size: 120%;} #plansaleEstate #plansaleEstateList li .estateBox .moreLink { display: block; width: calc( 100% - 40px ); max-width: 380px; margin: 0 auto; background: #dc431c; border-radius: 5px; text-decoration: none; color: #fff; font-size: 20px; text-align: center; line-height: 1.2; padding: 1em 0; position: absolute; left: 50%; bottom:25px; transform: translateX(-50%);} #plansaleEstate #plansaleEstateList li .estateBox .bx-wrapper .bx-pager.bx-default-pager a:hover, #plansaleEstate #plansaleEstateList li .estateBox .bx-wrapper .bx-pager.bx-default-pager a.active, #plansaleEstate #plansaleEstateList li .estateBox .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #bb3614;} @media screen and (max-width:767px) { /* PLANSALE */ .plansaleTitle .chara { min-width: 240px;} #plansale h3 { font-size: 6vw;} #plansale p.alignCenter { text-align: left;} #plansale p br { display: none; } #plansale .flowBox ul li { flex-basis: calc( ( 100% - 60px) / 4 ); margin: 0 20px 20px 0; } #plansale .flowBox ul li:nth-of-type(4n), #plansale .flowBox ul li:last-of-type { margin: 0 0 20px 0;} #plansaleEstate #plansaleEstateList li { flex-basis: 100%;} #plansale #merit ul { justify-content: space-between;} #plansale #merit ul li { flex-basis: calc( ( 100% - 20px ) / 2 ); margin: 0 0 20px 0;} } #zoomModalWrapper { display: none; width: 100%; height: 100%; position: fixed; left: 0; top:0; background: rgba(0,0,0,0.9); cursor: pointer; z-index: 100000000;} #zoomModalWrapper #zoom { position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); width: calc(100% - 40px); max-width: 1148px; } #zoomModalWrapper.active { display: block;} #zoomModalWrapper i { font-size: 20px; position: absolute; right:5px; top:5px; color: #fff;} #zoomModalWrapper #zoom img:nth-of-type(2) { display: none;} /* SITE MAP サイトマップ */ #siteMap { font-size: 18px;} #siteMap ul.sitemap01 { background: url("../img/sitemap/img_sitemap_01.jpg") center center / cover no-repeat;} #siteMap ul.sitemap02 { background: url("../img/sitemap/img_sitemap_02.jpg") center center / cover no-repeat;} #siteMap ul.sitemap03 { background: url("../img/sitemap/img_sitemap_03.jpg") center center / cover no-repeat;} #siteMap ul.sitemap04 { background: url("../img/sitemap/img_sitemap_04.jpg") center center / cover no-repeat;} #siteMap ul.sitemap05 { background: url("../img/sitemap/img_sitemap_05.jpg") center center / cover no-repeat;} #siteMap ul.sitemap06 { background: url("../img/sitemap/img_sitemap_06.jpg") center center / cover no-repeat;} #siteMap ul.sitemap07 { background: url("../img/sitemap/img_sitemap_07.jpg") center center / cover no-repeat;} #siteMap ul.sitemap08 { background: url("../img/sitemap/img_sitemap_08.jpg") center center / cover no-repeat;} #siteMap ul.sitemap09 { background: url("../img/sitemap/img_sitemap_09.jpg") center center / cover no-repeat;} #siteMap ul.sitemap10 { background: url("../img/sitemap/img_sitemap_10.jpg") center center / cover no-repeat;} #siteMap ul.sitemap11 { background: url("../img/sitemap/img_sitemap_11.jpg") center center / cover no-repeat;} #siteMap ul.sitemap12 { background: url("../img/sitemap/img_sitemap_12.jpg") center center / cover no-repeat;} #siteMap ul.sitemap13 { background: url("../img/sitemap/img_sitemap_13.jpg") center center / cover no-repeat;} #siteMap ul.sitemap14 { background: url("../img/sitemap/img_sitemap_14.jpg") center center / cover no-repeat;} #siteMap ul.sitemap15 { background: url("../img/sitemap/img_sitemap_15.jpg") center center / cover no-repeat;} #siteMap ul.sitemap16 { background: url("../img/sitemap/img_sitemap_16.jpg") center center / cover no-repeat;} #siteMap ul.sitemap17 { background: url("../img/sitemap/img_sitemap_17.jpg") center center / cover no-repeat;} #siteMap ul.sitemap18 { background: url("../img/sitemap/img_sitemap_18.jpg") center center / cover no-repeat;} #siteMap ul.sitemap19 { background: url("../img/sitemap/img_sitemap_19.jpg") center center / cover no-repeat;} #siteMap ul.sitemap20 { background: url("../img/sitemap/img_sitemap_19.jpg") center center / cover no-repeat;} #siteMap > ul { display: block; padding: 3em 1.5em; position: relative; text-align: center; margin: 0 0 1px 0;} #siteMap > ul:nth-of-type(odd)::before { display: block; width: 100%; height: 100%; content: ''; position: absolute; left: 0; top:0; background: linear-gradient(to right, rgba(0,0,0,0.5) ,rgba(0,0,0,0.9)); z-index: 1;} #siteMap > ul:nth-of-type(even)::before { display: block; width: 100%; height: 100%; content: ''; position: absolute; left: 0; top:0; background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.5)); z-index: 1;} #siteMap > ul ul { display: block; padding: 1em 0;} #siteMap ul li { display: inline-block; position: relative; z-index: 2;} @media screen and (max-width:767px) { /* SITE MAP */ #siteMap ul li { display: block; margin: 0 0 10px 0;} } #siteMap a { display: block; color: #fff; text-decoration: none;} /* BUILDING 新社屋への移転のお知らせ */ #building .flexBox .textBox { flex-basis:calc( 60% - 10px ); } #building .flexBox .photoBox { flex-basis:calc( 40% - 10px ); } /* MIHAMAVOICE EVENT FORM */ .eventForm { font-feature-settings: "palt";} .eventForm h4 { background: #f17f22; color: #fff; display: block;font-size: 16px;font-weight: normal;text-align: center;padding: 10px;margin: 20px 0;} .eventForm .formBox { margin: 0 0 20px 0; font-size: 16px; } .eventForm .formBox h5 { font-display: block; color: #333; border-bottom: #333 solid 1px; padding: 0 0 0.25em 0; margin: 0 0 1em 0;} .eventForm .formBox ul li { display: inline-block; position: relative; padding: 0 0 0 1.2em; margin: 0 1em 1em 0; } .eventForm .formBox ul li input[type="radio"], .eventForm .formBox ul li input[type="checkbox"]{ position: absolute; left: 0; top:50%; transform: translateY(-50%);} .eventForm .formBox ul li label { display: inline-block; cursor: pointer;} .eventForm .formBox input[type="text"], .eventForm .formBox input[type="tel"], .eventForm .formBox input[type="email"] { display: inline-block; box-sizing: border-box; padding: 0.5em; border: #ccc solid 1px; border-radius: 0.5em; outline: none; box-shadow: none; max-width: 100%; position: relative;} .eventForm .formBox input[type="text"].block, .eventForm .formBox input[type="tel"].block, .eventForm .formBox input[type="email"].block { display: block; width: 100%;} .eventForm .formBox textarea { display: block; width: 100%; box-sizing: border-box; padding: 0.5em; border: #ccc solid 1px; border-radius: 0.5em; outline:none; box-shadow: none; resize: vertical;} .eventForm .submitBtn { display: block; width: 240px; background: #bb3614; margin: 0 auto; outline:none; padding: 1em 0; text-align: center; color: #fff; cursor: pointer; font-size: 18px; border: none; transition: all 0.5s linear 0s;} .eventForm .submitBtn:hover { color: #fff; background: #ccc; } .eventForm .formBox h5 .require { color: #bb3614; font-weight: bold; margin: 0 0 0 1em} /* MIHAMAVOICE 埋め込みイベント予約フォーム */ table.formTable{ width:100%; margin:0 auto 40px; border-collapse:collapse; font-size: 14px;} table.formTable span{ font-size: 12px;} table.formTable th,table.formTable td{ border:1px solid #ccc; padding:10px;} table.formTable th{ width:240px; font-weight:normal; background:#fff1e5; text-align:left; font-feature-settings: "palt";} table.formTable tr.place ul { max-width: 680px;} table.formTable tr.place ul li{ float: left; width: 50%; margin: 5px 0;} table.formTable tr.place ul li:nth-of-type(odd) { clear: both;} table.formTable tr.place ul li.wp_include_box { width:auto; flex-basis: calc( ( 100% - 10px ) / 2); margin: 5px 0; position: relative;} table.formTable tr.place ul li.wp_include_box.fb100 { width:auto; flex-basis: 100%;} table.formTable tr.place ul li.wp_include_box label { padding: 0; box-sizing: border-box; cursor: pointer; border: #ccc solid 1px; overflow: hidden; border-radius: 5px;} table.formTable tr.place ul li.wp_include_box input:checked + label { box-shadow: 0 0 5px 5px rgba(255,144,0,0.2); border: #fff solid 1px; } table.formTable tr.place ul li.wp_include_box input { display: none; } table.formTable tr.place ul li.wp_include_box label figure { position: relative; width: 100%; margin: 0 0 0 0; font-size: 16px;} table.formTable tr.place ul li.wp_include_box label figure .icon { display: none;} table.formTable tr.place ul li.wp_include_box input:checked + label figure:after { position: absolute; left: 0; top:0; background: rgba(255,144,0,0.8); width: 100%; height: 100%; z-index: 2; content: ''; display: block;} table.formTable tr.place ul li.wp_include_box input:checked + label figure .icon { display: block; position: absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); width: 40px; height: 40px; z-index: 3;} table.formTable tr.place ul li.wp_include_box label figure img { width: 100%; height: auto;} table.formTable tr.place ul li.wp_include_box p { display: block; padding: 10px;text-align: center;} table.formTable tr.place ul li.wp_include_box .text { display: block; padding: 10px;text-align: center; font-size: 90%;} table.formTable tr.place ul li.wp_include_box input:checked + label p { color: #ff9900;} /* table.formTable tr.place ul li:nth-child(n+4){ margin-top: 10px;} */ table.formTable tr.place ul li label { display: block; padding: 0 0 0 1.5em; position: relative; font-feature-settings: "palt";} table.formTable tr.place ul li label input { position: absolute; left: 0; top:0; } table.formTable tr.place, table.formTable tr td { width: calc( 100% - 240px ); font-feature-settings: "palt";} table.formTable tr td.form_address:nth-child(n+2) p{ margin-top: 0;} table.formTable tr td .formSub{ display: inline-block; text-align: center; width: 2em; margin-right: 5px} table.formTable tr td.form_address .prefecture{ display: block; margin: 15px 0} table.formTable tr td.form_address .formSub{ width: 4em;} table.formTable tr td.form_address .at_add{margin-top: 10px;} table.formTable tr td textarea { max-width: 678px;} table.formTable tr td textarea.comment{ width: 100%; } table.formTable tr td h5 { margin: 10px 0 10px 0; font-size: 16px;} table.formTable tr td > label { display: inline-block; margin: 0.5em 1em 0.5em 0; position: relative; padding: 0 0 0 1.5em;} table.formTable tr td > label input[type=checkbox] { position: absolute; left: 0; top:50%; transform: translateY(-50%);} table.formTable tr td > label input[type=radio] { position: absolute; left: 0; top:50%; transform: translateY(-50%);} .remark::after { color: red; content: "※"; } table.formTable tr td.namae li { flex-basis: 50%;} table.formTable tr td.namae li .spBlock { padding: 0 0 0 3em; display: block; position: relative;} table.formTable tr td.namae li .spBlock p { position: absolute; left: 0.5em; top:50%; width: 2em; text-align: center; display: inline-block; transform: translateY(-50%);} table.formTable tr td.namae li input { width: 100%;} table.formTable input[type="text"], table.formTable input[type="email"] { max-width: 100%; padding: 0.5em; box-sizing: border-box;} table.formTable textarea { width: 100%; padding: 0.5em; box-sizing: border-box;} table.formTable tr td .ui-datepicker-trigger { vertical-align: middle; cursor: pointer} @media screen and (max-width:767px) { /* BUILDING 新社屋への移転のお知らせ */ #building .flexBox .textBox { flex-basis:100%; order:2; } #building .flexBox .photoBox { flex-basis:100%; order:1; margin:0 auto 20px auto; } .eventForm { } #formWrap{ padding: 10px;} table.formTable { display:block; } table.formTable tr { display:block; } table.formTable tr.place { width: 100%; } table.formTable tr.place ul { max-width: none; } table.formTable tbody { display:block; } table.formTable tr th{ font-weight:normal; background:#fff1e5; text-align:left; margin-bottom: 10px; display: block; width: 100%;} table.formTable tr th, table.formTable tr td{ border: none; display: block; width: 100%; box-sizing: border-box} table.formTable tr td{ margin-bottom: 20px; } td .spBlock{ margin-top: 20px;} td .spBlock:first-child{ margin-top: 0;} input#image-btn { width: 100%; padding:17.30% 0 0 0; height: auto; box-sizing: border-box; } } /* WORKS 実績一覧 */ #works_list #worksContent{ max-width: 1130px;} #works_list .categoryBox{ background: #f7f7f7; margin-bottom: 70px; padding:30px 25px;} #works_list h4{ text-align: center; font-size:clamp(18px, 1.76vw, 20px); font-weight: bold; } #works_list h4 span{ display: block; margin-top: 10px; font-size: 10px; font-weight: normal; } #works_list .categoryBox ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 25px;} #works_list .categoryBox ul li{ margin-right: 20px; font-size: clamp(14px, 1.41vw, 16px); background: #fff; color: #009944; padding: 5px 15px; border-radius: 4px; border: 1px solid #009944; margin-bottom: 10px;} #works_list .categoryBox a{ color: #009944; text-decoration: none;} #works_list .categoryBox ul li:hover{ cursor: pointer; color:#fff; background: #009944;} #works_list .categoryBox li:hover a{ cursor: pointer; color:#fff;} #works_list .worksBox{ display: flex; flex-wrap: wrap; justify-content: space-between;} #works_list .worksBox::before { content: ""; display: block; width: 23.672%; height: 0; order:1;} #works_list .worksBox::after { content: ""; display: block; width: 23.672%; height: 0;} #works_list .worksBox li{ flex-basis: calc((100% - 60px)/4); margin-bottom: 55px;} #works_list .worksBox li .name a{ display: inline-block; font-size: clamp(14px, 1.41vw, 16px); margin: 15px 0 10px; text-decoration: none; color:#333;} #works_list .worksBox li .category li{ display: inline-block; margin: 0 0.5em 0 0; color: #009944; font-size: clamp(10px, 1.06vw, 12px);} @media screen and (max-width:767px) { /* WORKS 実績一覧 */ #works_list .categoryBox{ margin: 0 calc(50% - 50vw) 50px; padding: 30px calc(50vw - 50%);} #works_list .categoryBox ul li{ margin-right: 10px; background: #fff; padding: 5px 10px;} #works_list .worksBox li{ flex-basis: calc((100% - 20px)/2); margin-bottom: 25px;} #works_list .worksBox li h4{ margin: 7px 0 3px;} #works_list .worksBox li .name a{ margin: 10px 0 5px;} } #works_list .pageNation{ background: #f6f6f6;} #works_list .pageNation ul{ text-align: center; padding:25px 0;} #works_list .pageNation ul li{ background: #333; color:#fff; display: inline-block;} #works_list .pageNation ul li.pages,#works_list .pageNation ul li.extend{ padding:0.5em;} #works_list .pageNation ul li a{ color:#fff; text-decoration: none; display: inline-block; padding:0.5em; } #works_list .pageNation ul li a:hover{ background: #BB3614;} #works_list .cvBnr{ margin-top:100px; } #works_list .cvBnr p{ background: #bb3614; max-width: 380px; margin: 0 auto;} #works_list .cvBnr p:hover{ transition: filter 0.5s linear 0s; filter: contrast(150%);} #works_list .cvBnr p a{ color:#fff; font-size:clamp(18px, 2.2vw, 25px); display: inline-block; width: 100%; padding:25px 0 32px; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-align: center;} /* WORKS 実績 */ #works .visualTitle {background: url(/assets/img/works/title_works_01.jpg) center center / cover no-repeat;} #works #commonContent { max-width: 1130px; margin: 0 auto;} #works .swiper-wrapper li{ width: 100%;} #works .slider-thumbnail .swiper-wrapper { display: flex; flex-wrap: wrap; transition: opacity .5s; justify-content: flex-start;} #works .slider-thumbnail .swiper-slide { opacity: .5; flex-basis: calc((100% - 140px)/8); margin:20px 20px 0 0 ; flex-grow: 0; flex-shrink: 1;} #works .slider-thumbnail .swiper-slide:nth-of-type(8n){ margin-right: 0;} #works .slider-thumbnail .swiper-slide-thumb-active { opacity: 1;} #works .swiper-button-prev{ background: url(/assets/img/works/prev.png); background-size: contain; left: 18px; width:48px; height:48px; margin-top: -24px;} #works .swiper-button-next { background: url(/assets/img/works/next.png); background-size: contain; right: 18px; width:48px; height:48px; margin-top: -24px;} #works .spec_container{ margin-top:90px;} #works .spec_container h4{ font-size:clamp(20px, 2.6vw, 30px); margin-bottom:45px; font-weight: bold;} #works .spec_container .category ul{ display: flex; margin-bottom:20px;} #works .spec_container .category ul li{ margin-right:0.5em; } #works .spec_container .category ul li a{ font-size: clamp(14px, 1.59vw, 18px); color: #009944; text-decoration: none;} #works .spec_container dl dt{ display: flex; align-items: center; box-sizing: border-box; background: #ddf5e2; font-size: clamp(15px, 1.59vw, 18px); font-weight: bold; padding:15px 30px; width:15%;} #works .spec_container dl dd{ box-sizing: border-box; padding:15px 30px; width: calc(100% - 15%); font-size:clamp(14px, 1.41vw, 15px); line-height: 1.8;} #works .spec_container dl .specBox{ width: 100%; margin-bottom:20px;} #works .spec_container dl .specBox dd{ display: flex; align-items: center; width:18%; font-size:15px;} #works .map_container{ margin-top:80px;} #works .map_container h4{ font-size:clamp(18px, 2.3vw, 26px); text-align: center; font-weight: bold; margin-bottom:30px;} #works .map_container .map{ border: 1px solid #333; padding: 40px;} #works .map_container .map{ text-align: center;} #works .movie_container { max-width: 863px; margin: 0 auto; margin-top:95px} #works .movie_container .youtube { position: relative; width: 100%; padding-top: 56.25%;} #works .movie_container .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%;} #works .cvBnr{ margin-top:100px; } #works .cvBnr p{ background: #bb3614; max-width: 380px; margin: 0 auto;} #works .cvBnr p:hover{ transition: filter 0.5s linear 0s; filter: contrast(150%);} #works .cvBnr p a{ color:#fff; font-size:clamp(18px, 2.2vw, 25px); display: inline-block; width: 100%; padding:25px 0 32px; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-align: center;} @media screen and (max-width:767px) { /* WORKS 実績 */ #works .swiper-wrapper li{ margin-top:5px;} #works .slider-thumbnail .swiper-slide { flex-basis: calc((100% - 40px)/5); margin:10px 10px 0 0 ; } #works .slider-thumbnail .swiper-slide:nth-of-type(8n){ margin-right: 10px;} #works .slider-thumbnail .swiper-slide:nth-of-type(5n){ margin-right: 0;} #works .swiper-button-prev,#works .swiper-button-next{ width:25px; height:25px; margin-top: -12.5px;} #works .spec_container{ margin-top:35px;} #works .spec_container h4{ margin-bottom:25px;} #works .spec_container .category ul{ display: block; margin-bottom:10px;} #works .spec_container dl{ display: blocks;} #works .spec_container dl dt{ padding:15px 25px; width: 100%; margin-bottom: 15px;} #works .spec_container dl dd{ padding:15px 0px; margin-bottom: 15px; width: 100%;} #works .spec_container dl .specBox{ width: 100%; margin-bottom:0;} #works .spec_container dl .specBox dt{ width: 39%;} #works .spec_container dl .specBox dd{ width: calc(100% - 39%); padding-left: 25px;} #works .spec_container dl .explainBox dt{ margin-bottom:0;} #works .spec_container dl .explainBox dt span{ display: inline-block; margin: 0 auto;} #works .spec_container dl .explainBox dd{ margin-top:0;} #works .map_container{ margin-top:65px;} #works .map_container h4{ margin-bottom:20px;} #works .map_container .map{ padding: 15px;} #works .movie_container { max-width: 863px; margin: 0 auto; margin-top:60px} #works .cvBnr{ margin-top:73px; } } /* Youtube一覧 */ #youtube_list .youtubeBox::after{ content: ""; display: block; width: 33%; height: 0;} #youtube_list li{ flex-basis: calc((100% - 60px)/3); margin: 0 20px 20px 0;} #youtube_list .movie_container { max-width: 863px; margin: 0 auto; } #youtube_list .movie_container .youtube { position: relative; width: 100%; padding-top: 56.25%;} #youtube_list .movie_container .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%;} #youtube_list .movie_container .estateName { font-size: 16px; font-weight: normal;} #youtube_list .txtBox { padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } #youtube_list .txtBox h4{ line-height: 1.2;} @media screen and (max-width:767px) { /* Youtube一覧 */ #youtube_list ul li{ flex-basis: 100%;} } /* TOP CONTACT */ & #top_contact{ padding-bottom: 100px;} @media screen and (max-width:767px) { /* TOP FOOTER SP BUNNER */ & #page__top #footerSpBnr{ opacity: 0; transform: translate(0,0); transition: all .5s;} & #page__top #footerSpBnr.show{ display: block; opacity: 1; transform: translate(0,0); transition: all .5s;} } & #contact_group .contentTitle{ font-family: 'BIZ UDPGothic', sans-serif; font-weight: 500; text-align: center;letter-spacing: 0.1em;} & #contact_group .contentTitle::after{ margin: 0 auto;} & #contact_group ul::after{ content: ""; display: block; flex-basis: 31.26%; height: 0;} & #contact_group ul{ gap: 28px;} & #contact_group ul li{ box-sizing: border-box; flex-basis: calc((100% - 56px) / 3); border: 1px solid #ccc; padding: 20px 5px; text-align: center; border-radius: 6px;} & #contact_group ul li:hover{ background: #e5f1e9;} & #contact_group ul li figure{ margin: 0 auto;} & #contact_group ul li p{ margin: 0 auto; font-size: 18px; font-weight: 500; margin-top: 1em; color: #333;} & #contact_group ul li a{ font-family: 'BIZ UDPGothic', sans-serif; text-decoration: none;} & #contact_group ul li p span{ display: inline-block;} & #contact_group ul li p i{ display: inline-block;} @media screen and (max-width:767px) { /* TOP CONTACT */ & #contact_group{ padding-bottom: 50px;} & #contact_group ul{ gap: 15px;} & #contact_group ul li{ flex-basis: calc( ( 100% - 15px ) / 2); padding: 1em; display: flex; justify-content: center; align-items: center;} & #contact_group ul li figure{ max-width: 46px;} & #contact_group ul li p{ font-size: 12px; line-height: 1.2;} & #contact_group ul li.sell p{ margin-top: 0.25em;} & #contact_group ul li p span{ position: relative; display: inline-block; margin-right: 1em;} & #top_contact ul li p i{ position: absolute; right: -15px; top: 50%; transform: translateY(-50%);} } /* よくあるご質問 */ #yokuaru{ & .faq__item { border-top: 1px solid #9AAF9D;} & .faq__item:last-child { border-bottom: 1px solid #9AAF9D;} & .faq__item summary::-webkit-details-marker { display: none;} & .faq__item summary { list-style: none;} & .faq__header { display: flex; justify-content: space-between; align-items: flex-start; padding: 2.5rem 0; cursor: pointer; outline: none; transition: background-color 0.2s ease;} & .faq__header-left { display: flex; align-items: flex-start; gap: 16px; align-items: center; flex: 1; padding-right: 20px;} & .faq__body { display: none; align-items: flex-start; gap: 16px; padding: 1.5rem 0 2.5rem 0;} & .faq__title { font-size: clamp( 18px , 2.8vw ,22px); width: 76%; line-height: 1.5; letter-spacing: 0.1em;} & .faq__text { line-height: 1.5; margin: 0; padding-right: 50px; font-size: clamp( 14px , 2vw , 16px); letter-spacing: 0.1em;} & .faq__badge { display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 2rem; font-weight: bold; flex-shrink: 0; } & .faq__badge--q { background-color: #507162;} & .faq__badge--a { background-color: #BB3614;} & .faq__toggle { position: relative; right: 40px; width: 32px; height: 32px; border: 1.5px solid #507162; border-radius: 50%; flex-shrink: 0;} & .faq__toggle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 1.5px; background-color: #507162; } & .faq__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.5px; height: 14px; background-color: #507162; transition: transform 0.3s ease, opacity 0.3s ease;} & .faq__item.is-active .faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0;} @media screen and (min-width: 768px) { & .faq__header:hover { background-color: #e5f1e9;} } @media screen and (max-width: 768px) { & .faq__header-left { align-items: flex-start;} & .faq__badge { margin-top: 0.1em; width: 26px; height: 26px; border-radius: 50%; font-size: 1rem; } } }