@charset "UTF-8"; /* Reset style */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-size: 62.5%; background-color: #F2F6F4; } @media (max-width: 768px) { html { font-size: 54.6%; } } body { /*max-width: 1280px;*/ width: 100%; margin: 0 auto; overflow-x: hidden; font-family: "Noto Sans JP", sans-serif; color: #000000; background-color: #F2F6F4; } img { width: 100%; } .inner { max-width: 1000px; width: 100%; margin: 0 auto; } @media (max-width: 1000px) { .inner { padding: 0 3%; } } a:hover { opacity: 0.8; } .br-sp_1100 { display: none; } @media (max-width: 1100px) { .br-sp_1100 { display: block; } } @media (max-width: 930px) { .br-sp_1100 { display: none; } } @media (max-width: 500px) { .br-sp_1100 { display: block; } } .br-sp_1000 { display: none; } @media (max-width: 1000px) { .br-sp_1000 { display: block; } } @media (max-width: 750px) { .br-sp_1000 { display: none; } } .br-sp_960 { display: none; } @media (max-width: 960px) { .br-sp_960 { display: block; } } @media (max-width: 768px) { .br-sp_960 { display: none; } } .br-sp_750 { display: none; } @media (max-width: 750px) { .br-sp_750 { display: block; } } .br-sp_620 { display: none; } @media (max-width: 620px) { .br-sp_620 { display: block; } } @media (max-width: 480px) { .br-sp_620 { display: none; } } .br-sp_550 { display: none; } @media (max-width: 550px) { .br-sp_550 { display: block; } } .br-sp_480 { display: none; } @media (max-width: 480px) { .br-sp_480 { display: block; } } .br-sp_400 { display: none; } @media (max-width: 1250px) { .br-sp_400 { display: block; } } @media (max-width: 750px) { .br-sp_400 { display: none; } } @media (max-width: 400px) { .br-sp_400 { display: block; } } .br-sp_750 { display: none; } @media (max-width: 750px) { .br-sp_750 { display: block; } } /* =================================================================== アコーディオン */ #accordion .accordion-btn { width: -moz-fit-content; width: fit-content; margin: 2rem auto; position: relative; cursor: pointer; } #accordion .accordion-btn-text { font-size: 1.2rem; text-align: center; color: #408E90; } @media (max-width: 750px) { #accordion .accordion-btn-text { font-size: 18px; } } #accordion .accordion-btn .toggle { display: none; } #accordion .accordion-btn .close-text { display: none; } #accordion .accordion-btn .switch { display: block; } #accordion .accordion-btn-arrow { width: 1.3rem; height: 1.3rem; border-bottom: 0.3px solid rgba(64, 142, 144, 0.5019607843); border-right: 0.3px solid rgba(64, 142, 144, 0.5019607843); position: absolute; left: 50%; bottom: -1.5rem; transform: rotate(45deg) translate(-50%, 0); } #accordion .accordion-btn .up { top: -0.5rem; transform: rotate(225deg) translate(50%, -20%); } /* ================================================================== アニメーション */ .fade_up-trigger { opacity: 0; } .fadeUp { animation: fade_up 2s ease forwards; } @keyframes fade_up { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } .fade_left-trigger { opacity: 0; } .fadeLeft { animation: fade_left 2s ease forwards; } @keyframes fade_left { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } .fade_right-trigger { opacity: 0; } .fadeRight { animation: fade_right 2s ease forwards; } @keyframes fade_right { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } /* ================================================================ コンタクト */ #contact { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); max-width: 1280px; width: 100%; z-index: 10; } @media (max-width: 768px) { #contact { top: 6%; } } @media (max-width: 500px) { #contact { top: 7%; } } #contact .contact { max-width: 1280px; width: 98%; display: flex; justify-content: end; } @media (max-width: 1280px) { #contact .contact { width: 97vw; } } @media (max-width: 768px) { #contact .contact { width: 96vw; } } @media (max-width: 500px) { #contact .contact { width: 96vw; } } @media (max-width: 400px) { #contact .contact { width: 96vw; } } #contact .contact a { display: block; width: 12.3rem; height: auto; } @media (max-width: 750px) { #contact .contact a { width: 30vw; margin-right: 2%; } } @media (max-width: 500px) { #contact .contact a { width: 25vw; margin-right: 2%; } } /* ================================================================ 魅力 */ #charm { padding: 0 0.5rem 7.5rem 0.5rem; border-bottom: 0.5px solid #408E90; } @media (max-width: 766px) { #charm { margin-top: 5%; padding-bottom: 4rem; border-bottom: 0.5px solid #000; } } @media (max-width: 480px) { #charm { border-bottom: none; } } #charm .charm ul { display: flex; justify-content: center; } @media (max-width: 768px) { #charm .charm ul { flex-direction: column; } } #charm .charm ul li { width: 33%; margin: 4rem 0; border-right: 0.5px solid #000; text-align: center; } @media (max-width: 768px) { #charm .charm ul li { width: 100%; } } @media (max-width: 768px) { #charm .charm ul li { border-right: none; border-bottom: none; padding-bottom: 2rem; margin: 0 0 2rem 0; } } #charm .charm ul li .charm-ttl { display: block; width: 100%; margin: 0 auto; line-height: 1em; } @media (max-width: 750px) { #charm .charm ul li .charm-ttl { border-top: 0.5px solid #000; padding-top: 30px; } } #charm .charm ul li .charm-ttl .ttl1 { width: 4.8rem; margin-bottom: 2.5rem; } @media (max-width: 750px) { #charm .charm ul li .charm-ttl .ttl1 { width: 12.6vw; } } #charm .charm ul li .charm-ttl .ttl2 { width: 6.4rem; margin-bottom: 0.9rem; } @media (max-width: 750px) { #charm .charm ul li .charm-ttl .ttl2 { width: 17vw; margin-top: 2rem; } } #charm .charm ul li .charm-ttl .ttl3 { width: 5.7rem; margin-bottom: 1.7rem; } @media (max-width: 750px) { #charm .charm ul li .charm-ttl .ttl3 { width: 15vw; margin-top: 2rem; } } @media (max-width: 750px) { #charm .charm ul li .charm-ttl1 { margin-top: 50px; } } #charm .charm ul li .charm-text1 { font-size: 1.7rem; line-height: 1.2em; /*font-weight: bold;*/ margin-bottom: 1.3rem; } @media (max-width: 750px) { #charm .charm ul li .charm-text1 { font-size: 30px; } } @media (max-width: 450px) { #charm .charm ul li .charm-text1 { font-size: 20px; } } #charm .charm ul li .charm-text2 { font-size: 3.45rem; line-height: 1em; font-weight: bold; margin-bottom: 1.3rem; } @media (max-width: 750px) { #charm .charm ul li .charm-text2 { font-size: 60px; margin-bottom: 20px; } } @media (max-width: 450px) { #charm .charm ul li .charm-text2 { font-size: 40px; margin-bottom: 20px; } } #charm .charm ul li .zen { position: relative; width: -moz-fit-content; width: fit-content; display: block; margin-left: auto; margin-right: auto; } #charm .charm ul li .zen::before { content: "全邸"; font-size: 1.5rem; writing-mode: vertical-rl; top: 0; left: 0; width: -moz-fit-content; width: fit-content; position: absolute; transform: translate(-80%, 15%); } @media (max-width: 750px) { #charm .charm ul li .zen::before { font-size: 20px; transform: translate(-90%, 30%); } } @media (max-width: 450px) { #charm .charm ul li .zen::before { font-size: 16px; transform: translate(-90%, 25%); } } #charm .charm ul li .charm-text3 { font-size: 1.2rem; line-height: 1em; /*font-weight: bold;*/ } @media (max-width: 750px) { #charm .charm ul li .charm-text3 { font-size: 18px; } } @media (max-width: 480px) { #charm .charm ul li .charm-text3 { font-size: 12px; } } #charm .charm ul li .charm-img { display: block; width: 23.2rem; height: auto; margin: 0 auto; } @media (max-width: 800px) { #charm .charm ul li .charm-img { width: 20rem; } } @media (max-width: 750px) { #charm .charm ul li .charm-img { width: 80%; } } #charm .charm ul li:nth-child(1) { border-left: 0.5px solid #000; } @media (max-width: 768px) { #charm .charm ul li:nth-child(1) { border-left: none; } } @media (max-width: 750px) { #charm .charm ul .charm-li3 { border-bottom: 0.5px solid #000; } } #charm .charm .charm-address { text-align: center; font-size: 1.7rem; font-weight: bold; margin-bottom: 2rem; } @media (max-width: 750px) { #charm .charm .charm-address { margin-top: 8vw; } } #charm .charm .charm-info { display: flex; justify-content: center; align-items: center; gap: 1.5rem; } @media (max-width: 800px) { #charm .charm .charm-info { flex-direction: column; gap: 0.5rem; } } #charm .charm .charm-info .charm-info-left { font-size: 2.22rem; color: #fff; background-color: #000; padding: 1rem 2.7rem; border-radius: 5rem; } @media (max-width: 600px) { #charm .charm .charm-info .charm-info-left { font-size: 1.8rem; } } @media (max-width: 450px) { #charm .charm .charm-info .charm-info-left { font-size: 1.4rem; } } #charm .charm .charm-info .charm-info-right { font-size: 4.86rem; line-height: 1.2em; font-weight: bold; text-align: center; } @media (max-width: 750px) { #charm .charm .charm-info .charm-info-right { font-size: 60px; margin-top: 3%; } } @media (max-width: 450px) { #charm .charm .charm-info .charm-info-right { font-size: 32px; } } /* ================================================================ ニュース */ #news { padding-bottom: 0 0.5rem 5rem 0.5rem; border-bottom: 0.5px solid #408E90; } #news .news { display: flex; gap: 6rem; } @media (max-width: 900px) { #news .news { flex-direction: column; justify-content: center; gap: 2.5rem; } } #news .news .news-left .news-left-img { display: block; width: 7.5rem; margin: 6rem 0 1.5rem 0; } @media (max-width: 900px) { #news .news .news-left .news-left-img { margin: 6rem auto 1.5rem auto; } } @media (max-width: 750px) { #news .news .news-left .news-left-img { width: 25%; } } #news .news .news-left .news-left-new { font-size: 1.3rem; color: #408E90; } @media (max-width: 900px) { #news .news .news-left .news-left-new { text-align: center; } } @media (max-width: 750px) { #news .news .news-left .news-left-new { font-size: 23px; } } @media (max-width: 450px) { #news .news .news-left .news-left-new { font-size: 16px; } } #news .news .news-right { width: 80%; margin-top: 6rem; } @media (max-width: 900px) { #news .news .news-right { margin: 0 auto; width: 100%; /*text-align: center;*/ padding: 0 5%; } } #news .news .news-right .news-dl { font-size: 1.7rem; line-height: 1.6em; } #news .news .news-right .news-dl .news-date { width: 10%; display: inline-block; color: #408E90; margin: 0 2.8rem 2.8rem 0; vertical-align: top; } @media (max-width: 900px) { #news .news .news-right .news-dl .news-date { display: flex; justify-content: left; width: 100%; margin: 0 0 0.5rem 0; } } #news .news .news-right .news-dl .news-news { width: 85%; display: inline-block; /*text-overflow: ellipsis; overflow: hidden; white-space: nowrap;*/ } @media (max-width: 900px) { #news .news .news-right .news-dl .news-news { margin: 0 0 2rem 0; } } @media (max-width: 750px) { #news .news .news-right .news-dl .news-news { width: 100%; margin-bottom: 3vw; } } #news .news-more { display: none; } @media (max-width: 900px) { #news .news-more .news-left { display: none; } } #news .news-more .news-left .news-left-img { margin-top: 0; opacity: 0; } #news .news-more .news-left .news-left-new { opacity: 0; } #news .news-more .news-right { margin-top: 0; } #news .switch { display: flex; } #life { padding: 10rem 0 6rem 0; } @media (max-width: 750px) { #life { padding: 30% 0; } } @media (max-width: 480px) { #life { padding-bottom: 0; } } #life .life-lead_sentence p { width: -moz-fit-content; width: fit-content; margin: 0 auto; font-size: 2.1rem; text-align: center; color: #408E90; font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; line-height: 2.5em; letter-spacing: 0.05em; } @media (max-width: 750px) { #life .life-lead_sentence p { position: relative; } } @media (max-width: 480px) { #life .life-lead_sentence p { letter-spacing: 0px; font-size: 14px; } } #life .life-lead_sentence .life-message-parts2 { display: none; } @media (max-width: 750px) { #life .life-lead_sentence .life-message-parts2 { display: block; width: 28.6vw; position: absolute; top: -70%; left: 0; } } @media (max-width: 550px) { #life .life-lead_sentence .life-message-parts2 { top: -30%; left: 0; } } @media (max-width: 480px) { #life .life-lead_sentence .life-message-parts2 { top: -22%; left: 8%; } } #life .life-message { max-width: 1280px; margin-left: auto; margin-right: auto; position: relative; width: 100%; height: 75rem; margin-top: 6vw; } @media (min-width: 1280px) { #life .life-message { margin-top: 6rem; } } @media (max-width: 950px) { #life .life-message { height: 85rem; } } @media (max-width: 820px) { #life .life-message { height: 95rem; } } @media (max-width: 768px) { #life .life-message { height: 75rem; } } @media (max-width: 650px) { #life .life-message { height: auto; } } #life .life-message-img { width: 69.5rem; position: absolute; top: 0; right: 5%; vertical-align: top; } @media (max-width: 1000px) { #life .life-message-img { width: 69vw; -o-object-fit: cover; object-fit: cover; -o-object-position: right; object-position: right; } } @media (max-width: 750px) { #life .life-message-img { width: 100vw; height: 60vw; position: static; -o-object-position: 50% 100%; object-position: 50% 100%; padding: 0; } } #life .life-message-textbox { background-color: #fff; padding: 4.5rem 5.5rem; font-size: 1.7rem; color: #408E90; line-height: 2.5em; width: 55.3rem; position: absolute; top: 20rem; left: 5%; } @media (max-width: 1000px) { #life .life-message-textbox { width: 55vw; } } @media (max-width: 750px) { #life .life-message-textbox { top: 10rem; padding: 3rem 4rem; width: 100%; position: static; } } @media (max-width: 650px) { #life .life-message-textbox { width: 100%; position: static; margin-top: 3rem; } } @media (max-width: 480px) { #life .life-message-textbox { margin-top: 0; font-size: 11px; } } #life .life-message-textbox2 { position: relative; } #life .life-message-textbox2 .life-message-parts { position: absolute; top: 0; left: 0; width: 21.5rem; transform: translate(-45%, -80%); } @media (max-width: 1100px) { #life .life-message-textbox2 .life-message-parts { transform: translate(-25%, -85%); } } @media (max-width: 1000px) { #life .life-message-textbox2 .life-message-parts { transform: translate(-35%, -80%); } } @media (max-width: 750px) { #life .life-message-textbox2 .life-message-parts { display: none; } } /* ========================================================================== アバウト */ #about { background-color: #000; color: #fff; text-align: center; padding: 8rem 0; } @media (max-width: 768px) { #about { padding: 4rem 0; } } #about .about-ttl img { display: block; width: 8.5rem; margin: 0 auto 1.95vw auto; } @media (min-width: 1280px) { #about .about-ttl img { margin: 0 auto 2.5rem auto; } } @media (max-width: 750px) { #about .about-ttl img { margin: 20vw auto 8vw auto; width: 21.6vw; } } @media (max-width: 480px) { #about .about-ttl img { margin-top: 4.1vw; margin-bottom: 4.1vw; } } #about .about-subttl { font-size: 1.7rem; margin-bottom: 5.85vw; } @media (min-width: 1280px) { #about .about-subttl { margin-bottom: 7.5rem; } } @media (max-width: 750px) { #about .about-subttl { font-size: 23px; } } @media (max-width: 480px) { #about .about-subttl { font-size: 12px; margin-bottom: 10vw; } } #about .about-img { width: 23.2rem; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #about .about-img { margin-bottom: 6rem; } } @media (max-width: 480px) { #about .about-img { margin-bottom: 10vw; } } #about .about-text { font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; } #about .about-text1 { font-size: 2rem; margin-bottom: 2.34vw; } @media (min-width: 1280px) { #about .about-text1 { margin-bottom: 3rem; } } @media (max-width: 500px) { #about .about-text1 { font-size: 12px; } } #about .about-text2 { font-size: 3.4rem; } @media (max-width: 500px) { #about .about-text2 { font-size: 20px; } } .about-visual { background-color: #000; vertical-align: top; } /* secTopics */ .secTopics{ margin: 40px auto 0; text-align: center; } .secTopics .txtTopicsTop{ text-align: center; font-size: 20px; line-height: 1.5; letter-spacing: 1.0px; } .secTopics .topicsListBox{ letter-spacing: 1px; display: flex; justify-content: space-between; align-items: stretch; gap: 0 30px; margin: 0 auto; } .secTopics .imgTopics{ padding-top: 34.63%; width: 52.34%; } .secTopics .topicsList{ display: flex; justify-content: center; align-items: flex-start; color: #000; background: #fff; width: calc((100% - 30px) / 2); } .secTopics .topicsList .txtBox{ padding: 12px; text-align: left; flex: 1; } .secTopics .txtTopics{ font-size: 14px; line-height: 1.57; margin-top: 5px; text-align: left; } .secTopics .titTopics{ font-size: 15px; line-height: 1.5; letter-spacing: 1.5px; } @media (max-width: 1000px) { .secTopics .topicsList { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .secTopics .imgTopics { padding-top: 66.88%; width: 100%; margin: 0 auto; } } @media only screen and (max-width:767px){ .secTopics{ margin: 0 auto; padding: 30px 0 0; } .secTopics .txtTopicsTop{ font-size: 3.5vw; letter-spacing: 0.5px; } .secTopics .topicsList .txtBox { margin-left: 0; text-align: left; padding: 8px; } .secTopics .topicsListBox { font-size: 18px; letter-spacing: 1px; display: flex; justify-content: center; line-height: 1.4; gap: 0; } .secTopics .topicsList { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 48%; } .secTopics .topicsList:nth-child(2) { margin-left: 4%; } .secTopics .titTopics { font-size: 14px; letter-spacing: 0.5px; } .secTopics .txtTopics { font-size: 12px; line-height: 1.5; margin-top: 5px; text-align: left; font-weight: 400; } } .secTopics .imgCover{ position:relative; } .secTopics .imgCover img{ width:100%; height:100%; position:absolute; top:0; left:0; object-fit: cover; } /* =============================================================================== 理由 */ #reason { background-color: #000; color: #fff; padding: 10rem 0 6rem 0; } @media (max-width: 768px) { #reason { padding: 5% 0 3% 0; } } #reason .reason-ttlbox { width: -moz-fit-content; width: fit-content; margin: 0 auto; text-align: center; } #reason .reason-ttlbox .reason-ttl { margin-bottom: 2.5rem; } #reason .reason-ttlbox .reason-ttl img { width: 18.6rem; } @media (max-width: 750px) { #reason .reason-ttlbox .reason-ttl img { width: 40%; margin-top: 60px; } } #reason .reason-ttlbox .reason-subttl { color: #ABCD03; font-size: 1.5rem; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #reason .reason-ttlbox .reason-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #reason .reason-ttlbox .reason-subttl { font-size: 20px; } } @media (max-width: 450px) { #reason .reason-ttlbox .reason-subttl { font-size: 12px; margin-bottom: 10vw; } } @media (max-width: 480px) { #reason .reasonbox { padding: 0 15%; } } #reason .reasonbox ul { display: flex; justify-content: center; /*padding: 0 10.93vw;*/ gap: 3.9vw; } @media (min-width: 1280px) { #reason .reasonbox ul { /*padding: 0 14rem;*/ gap: 5rem; } } @media (max-width: 1125px) { #reason .reasonbox ul { /*padding: 0 7vw;*/ } } @media (max-width: 880px) { #reason .reasonbox ul { flex-direction: column; gap: 3.4vw; } } #reason .reasonbox ul .reason-0 { width: 33%; } @media (max-width: 880px) { #reason .reasonbox ul .reason-0 { width: 100%; } } @media (max-width: 480px) { #reason .reasonbox ul .reason-0 { margin-bottom: 15vw; } } #reason .reasonbox ul .reason-0-ttl { text-align: center; font-size: 2.3rem; color: #ABCD03; /*font-weight: bold;*/ font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; margin-bottom: 1.95vw; } @media (min-width: 1280px) { #reason .reasonbox ul .reason-0-ttl { margin-bottom: 2.5rem; } } @media (max-width: 1000px) { #reason .reasonbox ul .reason-0-ttl { font-size: 2rem; } } @media (max-width: 750px) { #reason .reasonbox ul .reason-0-ttl { font-size: 5.46vw; margin-bottom: 30px; } } @media (max-width: 450px) { #reason .reasonbox ul .reason-0-ttl { font-size: 22px; margin-bottom: 3%; } } @media (max-width: 750px) { #reason .reasonbox ul .reason-0-img { width: 500px; display: block; margin-right: auto; margin-left: auto; } } #reason .reasonbox ul .reason-0 .explanation-ttl { text-align: center; font-size: 1.9rem; margin: 2.18vw 0; } @media (min-width: 1280px) { #reason .reasonbox ul .reason-0 .explanation-ttl { margin: 2.8rem 0; } } @media (max-width: 750px) { #reason .reasonbox ul .reason-0 .explanation-ttl { font-size: 32px; } } @media (max-width: 450px) { #reason .reasonbox ul .reason-0 .explanation-ttl { font-size: 18px; margin: 5vw 0; } } #reason .reasonbox ul .reason-0 .explanation-text { font-size: 1.5rem; } @media (max-width: 750px) { #reason .reasonbox ul .reason-0 .explanation-text { width: 500px; font-size: 21px; display: block; margin: 0 auto; } } @media (max-width: 550px) { #reason .reasonbox ul .reason-0 .explanation-text { width: -moz-fit-content; width: fit-content; font-size: 11px; } } /* ======================================================================= パフォーマンス */ #performance { background-color: #000; padding: 4.68vw 0 11.71vw 0; } @media (min-width: 1280px) { #performance { padding: 6rem 0 15rem 0; } } @media (max-width: 480px) { #performance { padding: 12.5vw 5% 3.12vw; } } #performance .performance .performance-ttlbox { width: -moz-fit-content; width: fit-content; margin: 0 auto; } #performance .performance .performance-ttlbox .performance-ttl { margin-bottom: 2.5rem; } #performance .performance .performance-ttlbox .performance-ttl img { width: 31.9rem; } @media (max-width: 750px) { #performance .performance .performance-ttlbox .performance-ttl img { width: 70%; display: block; margin: 50px auto 0 auto; } } #performance .performance .performance-ttlbox .performance-subttl { color: #ABCD03; font-size: 1.5rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #performance .performance .performance-ttlbox .performance-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #performance .performance .performance-ttlbox .performance-subttl { font-size: 20px; } } @media (max-width: 480px) { #performance .performance .performance-ttlbox .performance-subttl { font-size: 12px; margin-bottom: 8vw; } } #performance .performance-box1 { display: flex; justify-content: space-between; gap: 2.73vw; margin-bottom: 5vw; } @media (min-width: 1280px) { #performance .performance-box1 { gap: 3.5rem; margin-bottom: 6.5rem; } } @media (max-width: 768px) { #performance .performance-box1 { flex-direction: column; justify-content: center; } } #performance .performance-box1-img { position: relative; width: 35%; } @media (max-width: 750px) { #performance .performance-box1-img { margin: 0 auto; width: 70%; } } #performance .performance-box1-img .box1-pop { display: none; width: 6.8rem; position: absolute; top: -20%; left: 15%; } @media (max-width: 750px) { #performance .performance-box1-img .box1-pop { top: -30%; left: 15%; display: none; } } @media (max-width: 700px) { #performance .performance-box1-img .box1-pop { width: 5rem; top: -20%; left: 5%; } } @media (max-width: 550px) { #performance .performance-box1-img .box1-pop { top: -30%; left: 8%; } } @media (max-width: 450px) { #performance .performance-box1-img .box1-pop { width: 4rem; top: -30%; left: 10%; } } #performance .performance-box1-text { color: #fff; width: 60%; font-size: 1.7rem; line-height: 1.7em; } @media (max-width: 750px) { #performance .performance-box1-text { width: 100%; display: block; margin: 0 auto; font-size: 20px; } } @media (max-width: 480px) { #performance .performance-box1-text { font-size: 11px; margin-top: 5vw; } } #performance .performance-box2 ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } @media (max-width: 750px) { #performance .performance-box2 ul { gap: 30px; } } #performance .performance-box2 ul li { width: 32%; padding: 4.5rem 0 1.5rem 0; } @media (max-width: 750px) { #performance .performance-box2 ul li { width: 100%; } } @media (max-width: 450px) { #performance .performance-box2 ul li { width: 95%; } } #performance .performance-box2 ul li .performance-box2-ttl { text-align: center; font-size: 1.6rem; font-weight: bold; margin: 1.5rem 0; } @media (max-width: 750px) { #performance .performance-box2 ul li .performance-box2-ttl { font-size: 30px; } } @media (max-width: 480px) { #performance .performance-box2 ul li .performance-box2-ttl { font-size: 14px; } } #performance .performance-box2 ul li .performance-box2-text { padding: 0 1.5rem 0 1.5rem; } @media (max-width: 750px) { #performance .performance-box2 ul li .performance-box2-text { font-size: 23px; font-weight: 600; padding: 0 5%; } } @media (max-width: 480px) { #performance .performance-box2 ul li .performance-box2-text { font-size: 12px; } } #performance .performance-box2 ul .li-bg1 { background-color: #F5F5F5; } #performance .performance-box2 ul .li-bg2 { background-color: #fff; } /* ======================================================================= コンセプト */ #concept { padding: 10% 0; background-color: #F2F6F4; } #concept .concept .concept-ttl { width: -moz-fit-content; width: fit-content; margin: 0 auto; } #concept .concept .concept-ttl img { width: 11.2rem; } @media (max-width: 750px) { #concept .concept .concept-ttl img { width: 75%; text-align: center; display: block; margin: 0 auto; } } @media (max-width: 480px) { #concept .concept .concept-ttl img { width: 50%; margin-top: 10vw; } } #concept .concept .concept-subttl { font-size: 1.7rem; text-align: center; /*color: #ABCD03;*/ margin-bottom: 2.34vw; } @media (min-width: 1280px) { #concept .concept .concept-subttl { margin-bottom: 3rem; } } @media (max-width: 750px) { #concept .concept .concept-subttl { font-size: 23px; } } @media (max-width: 480px) { #concept .concept .concept-subttl { font-size: 12px; } } #concept .concept .concept-text { font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 6rem; } @media (max-width: 750px) { #concept .concept .concept-text { font-size: 22px; width: 80%; margin: 7% auto; } } @media (max-width: 480px) { #concept .concept .concept-text { font-size: 16px; line-height: 2em; } } #concept .concept-select ul { display: flex; justify-self: center; /*@media (max-width: 750px) { .concept-select-li { display: flex; flex-direction: column; } .concept-select-li:nth-child(1) { order: 2; } .concept-select-li:nth-child(2) { order: 0; } .concept-select-li:nth-child(3) { order: 1; } }*/ } #concept .concept-select ul .concept-select-li-img { width: 47rem; } @media (max-width: 750px) { #concept .concept-select ul .concept-select-li-img { width: 95%; display: block; margin: 0 auto; } } #concept .concept-select ul .concept-select-li-or { width: -moz-fit-content; width: fit-content; font-size: 3.1rem; color: #408E90; text-align: center; display: block; margin: 11rem auto; } @media (max-width: 750px) { #concept .concept-select ul .concept-select-li-or { margin: 30px auto; } } @media (max-width: 450px) { #concept .concept-select ul .concept-select-li-or { font-size: 16px; margin: 20px auto; } } #concept .concept-select ul .concept-select-li-tag { width: 9.5rem; display: block; margin: 3rem auto 0 auto; } @media (max-width: 750px) { #concept .concept-select ul .concept-select-li-tag { width: 50%; } } #concept .concept-select ul .concept-select-li-ttl { display: block; line-height: 2rem; } #concept .concept-select ul .concept-select-li .ttl_a { width: 26.4rem; margin: 3.5rem auto; } @media (max-width: 480px) { #concept .concept-select ul .concept-select-li .ttl_a { width: 80%; line-height: 30px; padding: 0 0; } } #concept .concept-select ul .concept-select-li .ttl_b { width: 16.7rem; margin: 3rem auto; } @media (max-width: 480px) { #concept .concept-select ul .concept-select-li .ttl_b { width: 60%; line-height: 30px; } } #concept .concept-select ul .concept-select-li-text { text-align: center; font-size: 1.7rem; } @media (max-width: 750px) { #concept .concept-select ul .concept-select-li-text { font-size: 17px; height: 6vh; } } @media (max-width: 450px) { #concept .concept-select ul .concept-select-li-text { font-size: 14px; } } #concept .concept-select ul .concept-select-li-more { display: block; width: -moz-fit-content; width: fit-content; margin: 4.5rem auto; } #concept .concept-select ul .concept-select-li-more img { width: 15.7rem; } @media (max-width: 750px) { #concept .concept-select ul .concept-select-li-more img { width: 70%; display: block; margin: 0 auto; } } #concept .concept1-tag { width: 11.7rem; display: block; margin: 6.7rem auto 0 auto; } @media (max-width: 750px) { #concept .concept1-tag { width: 24%; } } @media (max-width: 480px) { #concept .concept1-tag { margin-top: 5vw; } } #concept .concept1-ttl { display: block; max-width: 350px; width: 50%; margin: 4rem auto; } @media (max-width: 750px) { #concept .concept1-visual { display: none; } } #concept .concept1-visual_sp { display: none; } @media (max-width: 750px) { #concept .concept1-visual_sp { display: block; } } #concept .concept1 .concept1-theme { text-align: center; font-size: 2.3rem; color: #408E90; margin: 10rem 0 5rem 0; } @media (max-width: 750px) { #concept .concept1 .concept1-theme { font-size: 27px; } } @media (max-width: 450px) { #concept .concept1 .concept1-theme { font-size: 16px; margin-top: 10vw; margin-bottom: 2vw; } } #concept .concept1-box { display: flex; justify-content: space-between; } @media (max-width: 750px) { #concept .concept1-box { flex-direction: column; } } #concept .concept1-box .concept1-left { width: 38%; } @media (max-width: 750px) { #concept .concept1-box .concept1-left { width: 100%; } } #concept .concept1-box .concept1-left .concept1-left-text { font-size: 1.7rem; color: #408E90; line-height: 2em; } @media (max-width: 750px) { #concept .concept1-box .concept1-left .concept1-left-text { font-size: 20px; } } @media (max-width: 450px) { #concept .concept1-box .concept1-left .concept1-left-text { font-size: 12px; padding: 0 5%; } } #concept .concept1-box .concept1-right { width: 56%; } @media (max-width: 750px) { #concept .concept1-box .concept1-right { width: 80%; display: block; margin: 60px auto; } } @media (max-width: 480px) { #concept .concept1-box .concept1-right { margin: 7% auto 0 auto; } } #concept .concept2-tag { width: 11.7rem; display: block; margin: 6.7rem auto 0 auto; } @media (max-width: 750px) { #concept .concept2-tag { width: 25%; } } #concept .concept2-ttl { display: block; width: 24.1rem; margin: 4rem auto; } @media (max-width: 750px) { #concept .concept2-ttl { width: 50%; } } @media (max-width: 750px) { #concept .concept2-visual { display: none; } } #concept .concept2-visual_sp { display: none; } @media (max-width: 750px) { #concept .concept2-visual_sp { display: block; } } #concept .concept2-theme { text-align: center; font-size: 2.3rem; color: #408E90; margin: 10rem 0 5rem 0; } @media (max-width: 750px) { #concept .concept2-theme { font-size: 27px; } } @media (max-width: 450px) { #concept .concept2-theme { font-size: 16px; margin: 10vw 0 2vw 0; } } #concept .concept2-box { display: flex; justify-content: space-between; flex-direction: row-reverse; } @media (max-width: 750px) { #concept .concept2-box { flex-direction: column; } } #concept .concept2-box .concept2-left { width: 38%; } @media (max-width: 750px) { #concept .concept2-box .concept2-left { width: 100%; } } #concept .concept2-box .concept2-left .concept2-left-text { font-size: 1.7rem; color: #408E90; line-height: 2em; } @media (max-width: 750px) { #concept .concept2-box .concept2-left .concept2-left-text { font-size: 20px; } } @media (max-width: 450px) { #concept .concept2-box .concept2-left .concept2-left-text { font-size: 12px; padding: 0 5%; } } #concept .concept2-box .concept2-right { width: 56%; } @media (max-width: 750px) { #concept .concept2-box .concept2-right { width: 80%; display: block; margin: 60px auto; } } @media (max-width: 480px) { #concept .concept2-box .concept2-right { margin: 10% auto 0 auto; } } #concept .concept-info { width: 40rem; display: block; padding-top: 13rem; margin: 0 auto 3rem auto; } @media (max-width: 750px) { #concept .concept-info { width: 65%; padding-top: 5%; } } @media (max-width: 480px) { #concept .concept-info { padding-top: 10vw; } } /* =============================================================================== ゼロ */ #zero { background-color: #fff; padding: 15rem 0; } @media (max-width: 480px) { #zero { padding: 20vw 0 10vw 0; } } #zero .zero .zero-ttl { width: 33.5rem; display: block; padding-top: 0; margin: 0 auto 3rem auto; } @media (max-width: 750px) { #zero .zero .zero-ttl { width: 65%; padding-top: 0px; padding-bottom: 20px; } } @media (max-width: 480px) { #zero .zero .zero-ttl { width: 50%; padding-bottom: 0; } } #zero .zero .zero-imgbox { margin-bottom: 12rem; } @media (max-width: 750px) { #zero .zero .zero-imgbox { margin-bottom: 60px; } } @media (max-width: 480px) { #zero .zero .zero-imgbox { margin-bottom: 8vw; } } #zero .zero .zero-imgbox ul { display: flex; justify-content: center; } @media (max-width: 750px) { #zero .zero .zero-imgbox ul { flex-wrap: wrap; } } #zero .zero .zero-imgbox ul li { width: 20%; -o-object-fit: cover; object-fit: cover; } #zero .zero .zero-imgbox ul li img { vertical-align: top; } @media (max-width: 750px) { #zero .zero .zero-imgbox ul .zero-li1 { order: 0; width: 33.3%; } } @media (max-width: 750px) { #zero .zero .zero-imgbox ul .zero-li2 { order: 1; width: 33.3%; } } @media (max-width: 750px) { #zero .zero .zero-imgbox ul .zero-li3 { order: 3; width: 50%; } } @media (max-width: 750px) { #zero .zero .zero-imgbox ul .zero-li4 { order: 2; width: 33.3%; } } @media (max-width: 750px) { #zero .zero .zero-imgbox ul .zero-li5 { order: 4; width: 50%; } } #zero .zero .zero-theme { font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif; color: #408E90; text-align: center; } #zero .zero .zero-theme .zero-theme-ttl { font-size: 2.6rem; } @media (max-width: 750px) { #zero .zero .zero-theme .zero-theme-ttl { font-size: 27px; } } @media (max-width: 480px) { #zero .zero .zero-theme .zero-theme-ttl { font-size: 16px; } } #zero .zero .zero-theme .zero-theme-text { font-size: 1.7rem; line-height: 2em; margin: 6rem 0; } @media (max-width: 750px) { #zero .zero .zero-theme .zero-theme-text { font-size: 21px; } } @media (max-width: 480px) { #zero .zero .zero-theme .zero-theme-text { margin-top: 5vw; font-size: 12px; } } #zero .zero .zero-charm ul { display: flex; justify-content: center; gap: 6rem; } @media (max-width: 750px) { #zero .zero .zero-charm ul { flex-direction: column; } } #zero .zero .zero-charm ul li { width: 30%; } @media (max-width: 750px) { #zero .zero .zero-charm ul li { width: 70%; margin: 0 auto; } } #zero .zero .zero-charm ul li .zero-charm-li-ttl { height: 3.2rem; display: block; width: auto; margin: 3rem auto; } @media (max-width: 750px) { #zero .zero .zero-charm ul li .zero-charm-li-ttl { height: 100%; } } @media (max-width: 480px) { #zero .zero .zero-charm ul li .zero-charm-li-ttl { width: 50%; } } #zero .zero .zero-charm ul li .zero-charm-li-text { font-size: 1.5rem; line-height: 2em; } @media (max-width: 750px) { #zero .zero .zero-charm ul li .zero-charm-li-text { font-size: 20px; } } @media (max-width: 480px) { #zero .zero .zero-charm ul li .zero-charm-li-text { font-size: 12px; } } /* =========================================================================== ゼロ2 */ #zero_2 { padding: 10rem 0 15rem 0; } @media (max-width: 750px) { #zero_2 { padding: 10% 0; } } #zero_2 .zero_2 .zero_2-ttl { margin-bottom: 1.5rem; } #zero_2 .zero_2 .zero_2-ttl img { width: 17rem; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-ttl img { width: 50%; margin-bottom: 60px; } } @media (max-width: 480px) { #zero_2 .zero_2 .zero_2-ttl img { width: 40%; margin-bottom: 0; margin-top: 5vw; } } #zero_2 .zero_2 .zero_2-box { display: flex; justify-content: space-between; position: relative; margin-bottom: 10rem; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-box { flex-direction: column; } } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-box { margin-bottom: 10%; } } #zero_2 .zero_2 .zero_2-box .zero_2-left { width: 50%; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-box .zero_2-left { width: 100%; line-height: 3.5em; } } #zero_2 .zero_2 .zero_2-box .zero_2-left-theme { font-size: 2.3rem; color: #408E90; margin-bottom: 1.5rem; } @media (max-width: 450px) { #zero_2 .zero_2 .zero_2-box .zero_2-left-theme { font-size: 16px; margin-bottom: 5vw; } } #zero_2 .zero_2 .zero_2-box .zero_2-left-text { font-size: 1.7rem; line-height: 2em; color: #408E90; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-box .zero_2-left-text { margin-top: 100%; } } @media (max-width: 450px) { #zero_2 .zero_2 .zero_2-box .zero_2-left-text { margin-top: 100%; font-size: 12px; } } #zero_2 .zero_2 .zero_2-box .zero_2-right { width: 45%; position: relative; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-box .zero_2-right { width: 100%; position: absolute; top: 23%; } } @media (max-width: 450px) { #zero_2 .zero_2 .zero_2-box .zero_2-right { width: 100%; position: absolute; top: 23%; } } @media (max-width: 355px) { #zero_2 .zero_2 .zero_2-box .zero_2-right { width: 100%; position: absolute; top: 34%; } } #zero_2 .zero_2 .zero_2-box .zero_2-right p { font-size: 1.2rem; font-weight: bold; position: absolute; top: 1rem; right: 1rem; } @media (max-width: 750px) { #zero_2 .zero_2 .zero-img_pc { display: none; } } #zero_2 .zero_2 .zero-img_sp { display: none; } @media (max-width: 750px) { #zero_2 .zero_2 .zero-img_sp { display: block; } } #zero_2 .zero_2 .zero_2-text { font-size: 1.9rem; text-align: center; color: #408E90; margin: 6rem 0 0 0; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-text { font-size: 28px; } } @media (max-width: 450px) { #zero_2 .zero_2 .zero_2-text { font-size: 16px; } } #zero_2 .zero_2 .zero_2-imgbox ul { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-imgbox ul { flex-direction: column; } } #zero_2 .zero_2 .zero_2-imgbox ul li:nth-child(1), #zero_2 .zero_2 .zero_2-imgbox ul li:nth-child(2) { width: 48%; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-imgbox ul li:nth-child(1), #zero_2 .zero_2 .zero_2-imgbox ul li:nth-child(2) { width: 100%; } } #zero_2 .zero_2 .zero_2-imgbox ul li:nth-child(3) { width: 100%; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-imgbox ul .car-pc { display: none; } } #zero_2 .zero_2 .zero_2-imgbox ul .car-sp { display: none; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-imgbox ul .car-sp { display: block; margin: 8% 0; } } #zero_2 .zero_2 .zero_2-info { width: 40rem; display: block; margin: 3rem auto; } @media (max-width: 750px) { #zero_2 .zero_2 .zero_2-info { width: 70%; } } /* ============================================================================ 間取り */ #plan { background-color: #fff; padding: 6rem 0; } #plan .plan-ttl { width: 20%; max-width: 122px; margin: 6rem auto 2rem auto; } #plan .plan-subttl { font-size: 1.7rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #plan .plan-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #plan .plan-subttl { font-size: 22px; } } #plan .plan-theme { text-align: center; font-size: 2.3rem; color: #408E90; margin: 5rem 0; font-weight: bold; } @media (max-width: 750px) { #plan .plan-theme { font-size: 27px; } } @media (max-width: 450px) { #plan .plan-theme { font-size: 16px; margin: 10vw 0 2vw 0; } } #plan .plan-visual_2 { display: block; width: 60%; margin: 3rem auto; } #plan .plan-list ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3rem; padding: 0 8%; } #plan .plan-list ul li { width: 48%; margin-bottom: 4rem; } @media (max-width: 930px) { #plan .plan-list ul li { width: 98%; margin: 0 auto 4rem auto; } } #plan .plan-li-1 { display: flex; align-items: center; } #plan .plan-li-1 img { width: 8rem; margin: 1.5rem 1.5rem 1.5em 0; } #plan .plan-li-1 p { font-size: 1.6rem; } #plan .plan-li-2 p { font-size: 2rem; margin: 0 1.5rem 1.5rem 0; } #plan .plan-li-2 p span { font-size: 1.4rem; } #plan .plan-li-3 p { font-size: 1.4rem; margin: 0 0 1.5rem 0; } #plan .plan-li-4 { display: flex; align-items: center; } #plan .plan-li-4 p { font-size: 1.4rem; color: #408E90; } #plan .plan-li-4 .p4-2 { font-size: 4rem; } #plan .plan-li-4 .p4-1-1 { font-size: 1rem; text-align: end; } #plan .plan-li-4 .p4-1-2 { font-size: 1.8rem; } #plan .plan-detail { margin-top: 3rem; width: 40rem; display: block; margin-left: auto; margin-right: auto; cursor: pointer; } #plan .plan-detail:hover { opacity: 0.8; } #plan .plan-info { margin-top: 4rem; width: 40rem; display: block; margin-left: auto; margin-right: auto; } /*間取り・モーダル*/ /*モーダル外枠*/ #plan .plan-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff80; z-index: 30; cursor: pointer; } /*JSの切り替えクラス*/ #plan .plan-modal.open { display: block; } /*モーダル内のコンテンツ*/ #plan .plan-modal .plan-modal-box { width: 80%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*モーダル内の画像*/ #plan .plan-modal .plan-modal-img { display: block; vertical-align: top; position: relative; cursor: pointer; } /*モーダル内のテキスト*/ #plan .plan-modal .plan-modal-text { font-size: 14px; background-color: #408E90; color:#fff; padding: 1.5rem 1rem; transform: translateY(-5px); cursor: pointer; } /*モーダルは表示後どこをクリックしても閉じる仕様にしております*/ /*間取り・モーダルここまで*/ /* ============================================================================ ロケーション */ #location { /*background-color: #fff;*/ padding: 0 0 10rem 0; } @media (max-width: 480px) { #location { padding: 15vw 0; } } #location .location { border-top: 0.5px solid #000; padding-top: 15rem; } #location .location .location-ttlbox .location-ttl { width: -moz-fit-content; width: fit-content; margin: 0 auto 2rem auto; } #location .location .location-ttlbox .location-ttl img { width: 11.1rem; } @media (max-width: 750px) { #location .location .location-ttlbox .location-ttl img { width: 95%; display: block; margin: 0 auto; } } @media (max-width: 480px) { #location .location .location-ttlbox .location-ttl img { width: 60%; } } #location .location .location-ttlbox .location-subttl { font-size: 1.7rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #location .location .location-ttlbox .location-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #location .location .location-ttlbox .location-subttl { font-size: 22px; } } #location .location .location-top { display: flex; justify-content: space-between; margin-bottom: 10rem; position: relative; } @media (max-width: 750px) { #location .location .location-top { flex-direction: column-reverse; } } #location .location .location-top-left { width: 50%; box-sizing: border-box; } @media (max-width: 750px) { #location .location .location-top-left { width: 100%; position: absolute; top: 27%; } } @media (max-width: 450px) { #location .location .location-top-left { width: 100%; position: absolute; top: 30%; } } #location .location .location-top-left ul { display: flex; flex-wrap: wrap; } @media (max-width: 1000px) { #location .location .location-top-left ul li { width: 48%; } } @media (max-width: 750px) { #location .location .location-top-left ul li { width: 50%; } } #location .location .location-top-left ul li img { width: 23.5rem; height: 18.1rem; -o-object-fit: cover; object-fit: cover; vertical-align: top; } @media (max-width: 750px) { #location .location .location-top-left ul li img { width: 100%; height: 40vw; } } #location .location .location-top-right { width: 48%; } @media (max-width: 1000px) { #location .location .location-top-right { width: 48%; } } @media (max-width: 750px) { #location .location .location-top-right { width: 100%; } } #location .location .location-top-right-ttl { width: 22.3rem; margin-top: 5rem; margin-bottom: 1.5rem; } @media (max-width: 750px) { #location .location .location-top-right-ttl { width: 50%; margin-bottom: 60px; } } @media (max-width: 480px) { #location .location .location-top-right-ttl { margin-bottom: 5vw; } } #location .location .location-top-right-subttl { font-size: 2.3rem; /*font-weight: bold;*/ color: #408E90; margin-bottom: 1.5rem; } @media (max-width: 750px) { #location .location .location-top-right-subttl { font-size: 28px; margin: 6% 0; } } @media (max-width: 450px) { #location .location .location-top-right-subttl { font-size: 16px; margin-bottom: 0; } } #location .location .location-top-right-text { color: #408E90; line-height: 2em; font-size: 1.7rem; } @media (max-width: 750px) { #location .location .location-top-right-text { margin-top: 100%; font-size: 21px; } } @media (max-width: 480px) { #location .location .location-top-right-text { font-size: 12px; } } #location .location .location-map { width: 70%; margin: 0 auto; } @media (max-width: 750px) { #location .location .location-map { width: 100%; } } #location .location .location-map a:nth-child(2) { width: 20rem; display: block; margin: 6rem auto; } @media (max-width: 750px) { #location .location .location-map a:nth-child(2) { width: 60%; } } #location .gallery ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } @media (max-width: 900px) { #location .gallery ul { flex-direction: column; } } #location .gallery ul li { color: #408E90; font-size: 1.5rem; line-height: 1.8em; width: 45%; } @media (max-width: 900px) { #location .gallery ul li { width: 100%; font-size: 17px; } } @media (max-width: 480px) { #location .gallery ul li { font-size: 12px; } } #location .gallery ul li .gallery-text { width: 80%; } #location .gallery ul .gallery-li_1 { width: 47%; padding-top: 6rem; } @media (max-width: 900px) { #location .gallery ul .gallery-li_1 { width: 100%; order: 0; } } #location .gallery ul .gallery-li_2 { position: relative; width: 48%; } @media (max-width: 900px) { #location .gallery ul .gallery-li_2 { width: 100%; margin-top: 20px; order: 1; } } #location .gallery ul .gallery-li_2 img { width: 27.2rem; } @media (max-width: 900px) { #location .gallery ul .gallery-li_2 img { width: 60%; } } #location .gallery ul .gallery-li_2 .gallery-li_2-1 { display: flex; align-items: center; /*transform: translateX(-5rem);*/ } #location .gallery ul .gallery-li_2 .gallery-li_2-2 { display: flex; align-items: center; flex-direction: row-reverse; margin-top: -5rem; } #location .gallery ul .gallery-li_3 { display: flex; flex-direction: row-reverse; align-items: center; transform: translateX(5rem); gap: 2rem; } @media (max-width: 900px) { #location .gallery ul .gallery-li_3 { width: 100%; order: 3; margin-top: 8%; justify-content: left; } } @media (max-width: 750px) { #location .gallery ul .gallery-li_3 { transform: translateX(0rem); } } #location .gallery ul .gallery-li_3 img { width: 26.6rem; transform: translateY(-3rem); } @media (max-width: 750px) { #location .gallery ul .gallery-li_3 img { width: 60%; } } #location .gallery ul .gallery-li_3 .gallery-text { width: 100%; } #location .gallery ul .gallery-li_4 { width: 45%; } @media (max-width: 900px) { #location .gallery ul .gallery-li_4 { width: 90%; order: 2; margin-top: 8%; } } #location .gallery ul .gallery-li_4 .gallery-text { width: 60%; display: block; margin-left: auto; } @media (max-width: 900px) { #location .gallery ul .gallery-li_4 .gallery-text { margin: 0; } } #location .gallery ul .gallery-li_5 { width: 40%; } @media (max-width: 900px) { #location .gallery ul .gallery-li_5 { width: 90%; order: 4; } } #location .gallery ul .gallery-li_6 { display: flex; align-items: center; transform: translate(-40%, 30%); } @media (max-width: 900px) { #location .gallery ul .gallery-li_6 { width: 100%; order: 5; } } #location .gallery ul .gallery-li_6 img { width: 23.2rem; margin-right: 2rem; } @media (max-width: 900px) { #location .gallery ul .gallery-li_6 img { width: 60%; } } #location .institution { margin-top: 10rem; } #location .institution ul { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 5%; } @media (max-width: 750px) { #location .institution ul { padding: 0 5%; } } #location .institution ul li { width: 30%; font-size: 1.6rem; margin-bottom: 3rem; } @media (max-width: 750px) { #location .institution ul li { width: 45%; } } #location .institution ul li img { width: 100%; } #location .institution ul li div { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0.5rem 1rem; } @media (max-width: 480px) { #location .institution ul li div { font-size: 8px; } } #location .institution ul li div .ins::before { content: "■"; } #location .institution ul .last-ch { width: 65%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 5%; } @media (max-width: 750px) { #location .institution ul .last-ch { width: 100%; } } #location .institution ul .last-ch div { width: 46%; } /* ============================================================================= アクセス */ #access { padding: 10rem 0; background-color: #fff; } #access .access-ttlbox .access-ttl { width: -moz-fit-content; width: fit-content; margin: 0 auto; } #access .access-ttlbox .access-ttl img { width: 9rem; } @media (max-width: 750px) { #access .access-ttlbox .access-ttl img { width: 95%; display: block; margin: 0 auto 10% 0; } } @media (max-width: 480px) { #access .access-ttlbox .access-ttl img { width: 50%; margin: 0 auto; } } #access .access-ttlbox .access-subttl { font-size: 1.7rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #access .access-ttlbox .access-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #access .access-ttlbox .access-subttl { font-size: 22px; } } @media (max-width: 480px) { #access .access-ttlbox .access-subttl { font-size: 14px; margin-top: 5vw; } } #access .access-visual { position: relative; margin-bottom: 6rem; } @media (max-width: 750px) { #access .access-visual { display: flex; flex-direction: column-reverse; } } #access .access-visual p { color: #408E90; font-size: 2rem; font-weight: bold; position: absolute; top: 0; left: 0; } @media (max-width: 750px) { #access .access-visual p { position: static; text-align: center; font-size: 27px; margin-bottom: 60px; } } @media (max-width: 450px) { #access .access-visual p { position: static; text-align: center; font-size: 16px; margin-bottom: 6%; } } #access .access .access-imgsp { display: none; } @media (max-width: 750px) { #access .access .access-imgsp { display: block; width: 60%; margin: 0 auto 10% auto; } } #access .access-list ul { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 750px) { #access .access-list ul { flex-direction: column; } } #access .access-list ul li { display: block; width: 30%; height: 7rem; border-top: 0.5px solid #000; } @media (max-width: 750px) { #access .access-list ul li { width: 90%; border-top: none; } } #access .access-list ul li .access-list-div { height: 80px; display: flex; justify-content: space-between; align-items: end; font-size: 2.4rem; border-bottom: 0.5px solid #000; padding-bottom: 1rem; } @media (max-width: 750px) { #access .access-list ul li .access-list-div { border-bottom: none; border-top: 0.5px solid #000; height: 117px; } } #access .access-list ul li .access-list-div p { line-height: 2.2em; display: block; } @media (max-width: 1010px) { #access .access-list ul li .access-list-div p { font-size: 18px; } } @media (max-width: 810px) { #access .access-list ul li .access-list-div p { font-size: 16px; } } @media (max-width: 750px) { #access .access-list ul li .access-list-div p { font-size: 46px; } } @media (max-width: 750px) and (max-width: 645px) { #access .access-list ul li .access-list-div p { font-size: 40px; } } @media (max-width: 750px) and (max-width: 555px) { #access .access-list ul li .access-list-div p { font-size: 32px; } } @media (max-width: 750px) and (max-width: 460px) { #access .access-list ul li .access-list-div p { font-size: 5.8vw; } } #access .access-list ul li .access-list-div p span { font-size: 4rem; color: #408E90; } @media (max-width: 750px) { #access .access-list ul li .access-list-div p span { font-size: 60px; } } @media (max-width: 645px) { #access .access-list ul li .access-list-div p span { font-size: 50px; } } #access .access-list ul li .access-list-div .note { font-size: 1.1rem; line-height: 1.5em; padding-bottom: 4rem; } @media (max-width: 750px) { #access .access-list ul li .access-list-div .note { margin-top: 5%; } } @media (max-width: 480px) { #access .access-list ul li .access-list-div .note { margin: 0; } } #access .access-list ul li .access-list-div .change p { line-height: 1.4em; } #access .access-list ul li .access-list-div .change .small { font-size: 0.9rem; } @media (max-width: 750px) { #access .access-list ul .access-li1 { margin-bottom: 310px; } } @media (max-width: 750px) { #access .access-list ul .access-li2 { margin-bottom: 310px; } } #access .access-info { margin-top: 20%; width: 40rem; display: block; margin-left: auto; margin-right: auto; } @media (max-width: 1280px) { #access .access-info { margin-top: 30%; } } @media (max-width: 750px) { #access .access-info { margin-top: 50%; width: 60%; } } @media (max-width: 600px) { #access .access-info { margin-top: 65%; } } @media (max-width: 480px) { #access .access-info { margin-top: 75%; } } @media (max-width: 400px) { #access .access-info { margin-top: 85%; } } @media (max-width: 350px) { #access .access-info { margin-top: 95%; } } /*====================================================================== 再開発 */ #redevelopment { background-color: #408E90; color: #fff; padding: 10rem 0; } #redevelopment .redeve-ttlbox .redeve-ttl { width: 20rem; display: block; margin: 0 auto; } @media (max-width: 750px) { #redevelopment .redeve-ttlbox .redeve-ttl { width: 50%; } } #redevelopment .redeve-ttlbox .redeve-subttl { font-size: 1.7rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #redevelopment .redeve-ttlbox .redeve-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #redevelopment .redeve-ttlbox .redeve-subttl { font-size: 23px; } } @media (max-width: 480px) { #redevelopment .redeve-ttlbox .redeve-subttl { font-size: 14px; } } #redevelopment .redeve-box { margin-bottom: 10rem; } #redevelopment .redeve-box-ttl { font-size: 2.4rem; text-align: center; font-weight: bold; margin-bottom: 6rem; } @media (max-width: 750px) { #redevelopment .redeve-box-ttl { font-size: 26px; } } @media (max-width: 480px) { #redevelopment .redeve-box-ttl { font-size: 16px; margin-bottom: 5vw; } } #redevelopment .redeve-box-ttl span { color: #FFF67F; } #redevelopment .redeve-box-text { font-size: 1.7rem; line-height: 2.5em; margin-bottom: 3rem; } @media (max-width: 750px) { #redevelopment .redeve-box-text { font-size: 18px; } } @media (max-width: 480px) { #redevelopment .redeve-box-text { font-size: 12px; } } #redevelopment .redeve-box2 { margin-bottom: 0; } /*========================================================================== 大谷田ライフスタイル */ #lifestyle .lifestyle { padding: 10rem 0; border-bottom: 0.5px solid #408E90; } @media (max-width: 750px) { #lifestyle .lifestyle { max-width: 750px; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; } } #lifestyle .lifestyle-ttl { width: -moz-fit-content; width: fit-content; margin: 0 auto 3rem auto; } #lifestyle .lifestyle-ttl img { width: 45.6rem; } #lifestyle .lifestyle-imgbox { position: relative; } @media (max-width: 750px) { #lifestyle .lifestyle-imgbox { display: flex; flex-direction: column; width: 200%; padding: 0 10%; } } #lifestyle .lifestyle-imgbox img { margin-bottom: 3rem; } #lifestyle .lifestyle-imgbox .lifestyle-img { display: none; position: absolute; top: 15%; left: 15%; } @media (max-width: 750px) { #lifestyle .lifestyle-imgbox .lifestyle-img { display: block; width: 20%; } } /* ============================================================================ 品質 */ #quality .quality-ttlbox h2 { width: -moz-fit-content; width: fit-content; margin: 6rem auto 3rem auto; } #quality .quality-ttlbox h2 img { width: 10.6rem; } @media (max-width: 750px) { #quality .quality-ttlbox h2 img { width: 200px; display: block; } } @media (max-width: 480px) { #quality .quality-ttlbox h2 img { width: 80%; margin: 0 auto; } } #quality .quality-subttl { font-size: 1.7rem; text-align: center; margin-bottom: 4.68vw; } @media (min-width: 1280px) { #quality .quality-subttl { margin-bottom: 6rem; } } @media (max-width: 750px) { #quality .quality-subttl { font-size: 23px; } } @media (max-width: 450px) { #quality .quality-subttl { font-size: 14px; margin-bottom: 10vw; } } #quality .quality-box-ttl { width: 26.2rem; margin-bottom: 1.5rem; } @media (max-width: 750px) { #quality .quality-box-ttl { width: 55%; margin-bottom: 60px; } } @media (max-width: 480px) { #quality .quality-box-ttl { width: 45%; margin-bottom: 0; } } #quality .quality-box { display: flex; justify-content: space-between; position: relative; padding-bottom: 6rem; } @media (max-width: 750px) { #quality .quality-box { flex-direction: column; } } #quality .quality-box-left { width: 45%; } @media (max-width: 750px) { #quality .quality-box-left { width: 100%; } } #quality .quality-box-left-theme { font-size: 2.3rem; /*font-weight: bold;*/ color: #408E90; margin-bottom: 1.5rem; } @media (max-width: 750px) { #quality .quality-box-left-theme { font-size: 28px; margin: 6% 0; } } @media (max-width: 450px) { #quality .quality-box-left-theme { font-size: 16px; } } #quality .quality-box-left-text { font-size: 1.7rem; color: #408E90; line-height: 2.2em; } @media (max-width: 750px) { #quality .quality-box-left-text { font-size: 18px; margin-top: 90vw; } } @media (max-width: 450px) { #quality .quality-box-left-text { font-size: 12px; margin-top: 100vw; } } #quality .quality-box-right { width: 45%; } @media (max-width: 750px) { #quality .quality-box-right { width: 100%; position: absolute; top: 18vh; left: 0; } } @media (max-width: 480px) { #quality .quality-box-right { top: 12%; } } #quality .quality-box-right img { -o-object-fit: cover; object-fit: cover; } #quality .quality-box2 { background-color: #fff; padding: 6rem 10%; } #quality .quality-box2 img { margin: 1rem 0; } #quality .quality-box2-ttl { color: #408E90; font-size: 2.3rem; /*font-weight: bold;*/ text-align: center; padding: 0 0 6rem 0; } @media (max-width: 480px) { #quality .quality-box2-ttl { font-size: 14px; } } #quality .quality-box2-imgbox { display: flex; justify-content: center; align-items: end; gap: 3rem; padding: 2.5rem; } @media (max-width: 750px) { #quality .quality-box2-imgbox { flex-direction: column; } } @media (max-width: 480px) { #quality .quality-box2-imgbox { padding: 0; } } #quality .quality-box2-imgbox .img1 { width: 45%; } @media (max-width: 750px) { #quality .quality-box2-imgbox .img1 { width: 100%; } } #quality .quality-box2-imgbox .img2 { width: 55%; } @media (max-width: 750px) { #quality .quality-box2-imgbox .img2 { width: 100%; } } @media (max-width: 750px) { #quality .quality-box2 .quality-imgpc { display: none; } } #quality .quality-box2 .quality-imgsp { display: none; } @media (max-width: 750px) { #quality .quality-box2 .quality-imgsp { display: block; } } #quality .quality-box3 { display: flex; justify-content: space-between; padding: 6rem 0; } @media (max-width: 750px) { #quality .quality-box3 { flex-direction: column; } } #quality .quality-box3 img { width: 30%; } @media (max-width: 750px) { #quality .quality-box3 img { width: 90%; display: block; margin: 10px auto; } } /* ====================================================== ヘッダー */ #header { padding: 0 2%; background-image: url("images/area_mainvisual.jpg"); background-repeat: no-repeat; width: 100%; background-position: left bottom; height: 60.62vw; background-size: cover; } @media (min-width: 1280px) { #header { height: 77.6rem; } } @media (max-width: 1000px) { #header { height: 597px; background-size: cover; background-position: center; } } @media (max-width: 750px) { #header { height: 180vw; background-image: url("images/mainvisual_sp.jpg"); } } #header .header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 20; max-width: 1280px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; } #header .header .header-left .header-logo { display: block; width: 31.6rem; padding: 1rem; } @media (max-width: 750px) { #header .header .header-left .header-logo { width: 55vw; } } #header .header .header-right ul { display: flex; align-items: center; /*.btn-switch { .ham1 { transform: rotate(45deg) translate(10%, 10%); transform-origin: 0 0; } .ham2 { display: none; } .ham3 { transform: rotate(-45deg) translate(10%, 10%); transform-origin: 0 0; } }*/ } #header .header .header-right ul li { padding: 2rem 0; } @media (max-width: 850px) { #header .header .header-right ul .header-tel { display: none; } } #header .header .header-right ul .header-tel a { display: flex; align-items: center; padding: 0.6rem 1.4rem; margin-right: 0.8rem; color: #408E90; border: 1px solid #408E90; border-radius: 2rem; background-color: #FFFFFF; } #header .header .header-right ul .header-tel a .header-tel-img { width: 1.4rem; height: 1.6rem; margin-right: 0.5rem; } #header .header .header-right ul .header-tel a .header-tel-phone { font-size: 1.7rem; margin-right: 1rem; } #header .header .header-right ul .header-tel a .header-tel-time { font-size: 0.9rem; margin-right: 1rem; } #header .header .header-right ul .header-info a { display: flex; align-items: center; background-color: #408E90; border-radius: 2rem; color: #fff; padding: 1.5rem; margin-right: 1.7rem; } #header .header .header-right ul .header-info a .header-info-img { width: 1.8rem; height: 1.4rem; margin: 0 0.5rem; } #header .header .header-right ul .header-info a .header-info-text { font-size: 1.2rem; line-height: 1em; } @media (max-width: 850px) { #header .header .header-right ul .header-info { display: none; } } #header .header .header-right ul .header-insta a { display: block; width: 2.3rem; height: 2.3rem; margin-right: 2.2rem; } @media (max-width: 750px) { #header .header .header-right ul .header-insta { display: none; } } #header .header .header-right ul .hamburger-btn { width: 2.3rem; height: 2.3rem; padding: 0; position: relative; box-sizing: border-box; z-index: 16; cursor: pointer; margin-right: 3rem; } @media (max-width: 750px) { #header .header .header-right ul .hamburger-btn { width: 55px; height: 41px; } } @media (max-width: 500px) { #header .header .header-right ul .hamburger-btn { width: 30px; height: 30px; } } #header .header .header-right ul .hamburger-btn .ham-line { width: 2.3rem; height: 0.15rem; background-color: #000; margin: 1.2rem 0; position: absolute; right: 0px; } @media (max-width: 750px) { #header .header .header-right ul .hamburger-btn .ham-line { width: 30px; height: 2.5px; } } @media (max-width: 500px) { #header .header .header-right ul .hamburger-btn .ham-line { width: 30px; } } #header .header .header-right ul .hamburger-btn .ham1 { top: -40%; } @media (max-width: 750px) { #header .header .header-right ul .hamburger-btn .ham1 { top: 40%; } } #header .header .header-right ul .hamburger-btn .ham2 { top: 5%; } @media (max-width: 750px) { #header .header .header-right ul .hamburger-btn .ham2 { top: 70%; } } #header .header .header-right ul .hamburger-btn .ham3 { bottom: -50%; } @media (max-width: 500px) { #header .header .header-right ul .hamburger-btn .ham3 { top: 100%; } } #header .header .header-right ul .toggle .ham-line { background-color: #fff; } #header .header .header-right ul .toggle .ham1 { transform: rotate(45deg) translate(30%, 30%); transform-origin: 0 0; } @media (max-width: 750px) { #header .header .header-right ul .toggle .ham1 { transform: rotate(45deg) translate(20%, 270%); } } @media (max-width: 500px) { #header .header .header-right ul .toggle .ham1 { transform: rotate(45deg) translate(10%, 270%); } } #header .header .header-right ul .toggle .ham2 { display: none; } #header .header .header-right ul .toggle .ham3 { transform: rotate(-45deg) translate(10%, 10%); transform-origin: 0 0; } @media (max-width: 750px) { #header .header .header-right ul .toggle .ham3 { transform: rotate(-45deg) translate(-30%, 50%); } } @media (max-width: 500px) { #header .header .header-right ul .toggle .ham3 { transform: rotate(-45deg) translate(-30%, 50%); } } #header .mainvisual-ttl { position: absolute; top: 100px; left: 50%; transform: translate(-40%, 0); width: 58.3rem; } @media (min-width: 1280px) { #header .mainvisual-ttl { top: 100px; transform: translate(-40%, 0); } } @media (max-width: 750px) { #header .mainvisual-ttl { display: none; } } #header .mainvisual-ttl_sp { display: none; } @media (max-width: 750px) { #header .mainvisual-ttl_sp { display: block; position: absolute; top: 50%; left: 47%; transform: translate(-45%, -30%); width: 80vw; } } @media (max-width: 600px) { #header .mainvisual-ttl_sp { top: 40%; } } @media (max-width: 490px) { #header .mainvisual-ttl_sp { top: 35%; } } @media (max-width: 420px) { #header .mainvisual-ttl_sp { top: 35%; } } @media (max-width: 360px) { #header .mainvisual-ttl_sp { top: 25%; } } /* ==================================================================== SPメニュー*/ #sp-menu { position: fixed; top: 0; right: 0; z-index: 15; max-width: 1280px; width: 100%; transition: all .5s; } @media (max-width: 750px) { #sp-menu { max-width: 750px; } } #sp-menu .sp-menu { background-color: #408E90; color: #fff; width: 100%; } #sp-menu .sp-menu-logo { padding: 20px; } #sp-menu .sp-menu-logo a { display: block; width: 31.6rem; } #sp-menu .sp-menu-list { width: 80%; margin: 5% auto; display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 930px) { #sp-menu .sp-menu-list { width: 99%; } } @media (max-width: 750px) { #sp-menu .sp-menu-list { flex-direction: column; } } #sp-menu .sp-menu-list dl { width: 50%; } @media (max-width: 750px) { #sp-menu .sp-menu-list dl { width: 90%; margin: 0 auto; } } #sp-menu .sp-menu-list dl a { display: flex; align-items: center; position: relative; } #sp-menu .sp-menu-list dl a dt, #sp-menu .sp-menu-list dl a dd { line-height: 20px; padding: 30px 0; border-top: 0.5px #fff solid; } #sp-menu .sp-menu-list dl a dt { width: 35%; font-size: 16px; } #sp-menu .sp-menu-list dl a dd { width: 60%; font-size: 12px; } #sp-menu .sp-menu-list dl a .last-border { border-bottom: 0.5px solid #fff; } @media (max-width: 750px) { #sp-menu .sp-menu-list dl a .last-border2 { border-bottom: none; } } #sp-menu .sp-menu-list dl a .sp-arrow { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 8px; } #sp-menu .sp-menu-info { display: flex; align-items: center; justify-content: center; width: 70%; margin: 0 auto; padding: 0 0 12.5% 0; } @media (max-width: 750px) { #sp-menu .sp-menu-info { flex-wrap: wrap; width: 90%; justify-content: left; gap: 5%; } } @media (max-width: 750px) { #sp-menu .sp-menu-info-li { width: 45%; margin-bottom: 5%; } } #sp-menu .sp-menu-info-li a { display: block; width: 80%; } @media (max-width: 750px) { #sp-menu .sp-menu-info-li a { width: 100%; } } @media (max-width: 750px) { #sp-menu .sp-menu-info-li a .sp-menu-pc { display: none; } } #sp-menu .sp-menu-info-li a .sp-menu-sp { display: none; } @media (max-width: 750px) { #sp-menu .sp-menu-info-li a .sp-menu-sp { display: block; } } .sp-open { transform: translateY(-100%); opacity: 0; } /* ======================================================================== フッターコンタクト */ #footer-contact { padding: 6rem 0 3rem 0; background-color: #fff; } #footer-contact .contact h2 { font-size: 4.3rem; text-align: center; color: #408E90; } @media (max-width: 750px) { #footer-contact .contact h2 { font-size: 42px; } } #footer-contact .contact-box { display: flex; justify-content: center; gap: 5rem; } #footer-contact .contact-box a { width: 22rem; padding: 2rem 0; } @media (max-width: 750px) { #footer-contact .contact-box a { width: 40%; } } #footer-contact .contact .contact-insta { width: 8rem; display: block; margin: 0 auto; } @media (max-width: 750px) { #footer-contact .contact .contact-insta { width: 20%; } } /*====================================================================== フッター */ #footer { background-color: #333; padding: 3rem 0; } #footer .footer .footer-top { display: flex; justify-content: space-between; border-bottom: 0.5px solid #fff; padding-bottom: 3rem; } @media (max-width: 800px) { #footer .footer .footer-top { flex-direction: column; } } #footer .footer .footer-top .footer-ttl { width: 23.7rem; } @media (max-width: 800px) { #footer .footer .footer-top .footer-ttl { width: 50%; display: block; margin: 0 auto; } } #footer .footer .footer-top .footer-logo { display: block; width: 28.3rem; margin: 1rem 0; } @media (max-width: 800px) { #footer .footer .footer-top .footer-logo { width: 60%; margin: 3% auto; } } #footer .footer .footer-top .footer-address { width: 29rem; } @media (max-width: 800px) { #footer .footer .footer-top .footer-address { width: 60%; display: block; margin: 0 auto 1% auto; } } #footer .footer .footer-top .footer-right img { display: block; } #footer .footer .footer-top .footer-right-ttl { width: 32.2rem; margin-bottom: 2rem; } @media (max-width: 800px) { #footer .footer .footer-top .footer-right-ttl { width: 75%; display: block; margin: 0 auto; text-align: center; margin-top: 20px; } } #footer .footer .footer-top .footer-right-box { display: flex; align-items: start; gap: 1rem; } @media (max-width: 800px) { #footer .footer .footer-top .footer-right-box { justify-content: center; gap: 3%; width: 80%; margin: 0 auto; } } #footer .footer .footer-top .footer-right-box img { width: 22rem; } @media (max-width: 800px) { #footer .footer .footer-top .footer-right-box img { width: 100%; } } #footer .footer .footer-under { font-size: 1.7rem; color: #fff; text-align: center; padding: 3rem 0; } #footer .footer .footer-under-box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10%; padding-bottom: 3rem; } @media (max-width: 800px) { #footer .footer .footer-under-box { flex-wrap: wrap; gap: 8%; } } #footer .footer .footer-under-box div { width: 10%; margin: 0 auto; } @media (max-width: 800px) { #footer .footer .footer-under-box div { width: -moz-fit-content; width: fit-content; } } @media (max-width: 480px) { #footer .footer .footer-under-box div { width: 45%; margin: 0 auto; } } #footer .footer .footer-under-box div a { width: 100%; margin: 0 auto; display: block; text-align: center; } #footer .footer .footer-under-box div a img { width: 100%; margin: 0 auto; } @media (max-width: 800px) { #footer .footer .footer-under-box div a img { width: 10%; margin-bottom: 5%; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-shop1 { width: 32.4vw; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-shop2 { width: 25.7vw; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-shop3 { width: 27.4vw; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-shop4 { width: 23.3vw; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-shop5 { width: 28.1vw; } } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-undersp { width: 28.1vw; } } #footer .footer .footer-under-box div .footer-undersp { display: none; } @media (max-width: 800px) { #footer .footer .footer-under-box div .footer-undersp { display: block; opacity: 0; } } #footer .footer .footer-copy { font-size: 1.4rem; color: #fff; padding-top: 3rem; border-top: 0.5px solid #000; text-align: center; } @media (max-width: 750px) { #footer .footer .footer-copy { font-size: 12px; } }/*# sourceMappingURL=style.css.map */ @media (min-width: 750px) { #header .header .header-right ul .hamburger-btn .ham2 { top: -2%; } #header .header .header-right ul .hamburger-btn .ham3 { bottom: -48%; } #header .header .header-right ul .toggle .ham1 { transform: rotate(45deg) translate(0, 270%); } #header .header .header-right ul .toggle .ham3 { transform: rotate(-45deg) translate(-25%, 50%); } #header .header .header-right ul .hamburger-btn .ham-line { width: 2.9rem; height: 0.15rem; margin: 1.2rem 0; position: absolute; } } @media (max-width: 750px) { #location .location .location-ttlbox .location-subttl { font-size: 14px; } } @media (max-width: 500px) { #header .header .header-right ul .toggle .ham1 { transform: rotate(45deg) translate(0, 270%); } #header .header .header-right ul .toggle .ham3 { transform: rotate(-45deg) translate(-34%, 50%); } } #sp-menu .sp-menu-list dl a dt, #sp-menu .sp-menu-list dl a dd { line-height: 20px; padding: 12px 0; border-top: 0.5px #fff solid; } #sp-menu .sp-menu-list { width: 95%; margin: 2% auto 6%; display: flex; justify-content: space-between; flex-wrap: wrap; } element.style { } #concept .concept2-theme { font-weight: bold; } #concept .concept1 .concept1-theme { font-weight: bold; } #zero_2 .zero_2 .zero_2-box .zero_2-left-theme { font-weight: bold; } #quality .quality-box-left-theme { font-weight: bold; } #quality .quality-box2-ttl { font-weight: bold; } #location .location .location-top-right-subttl { font-weight: bold; }