/*----------------------------- LOCAL NAVI -------------------------------*/ .local-nav { position: relative; z-index: 2; } .local-nav nav { width: 60%; } .local-nav nav ul { width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; } .local-nav nav ul div, .local-nav nav ul li { min-height: 0%; } .local-nav nav ul li { margin-right: 8%; margin-top: 8px; } .local-nav nav ul li:nth-of-type(3n), .local-nav nav ul li:last-of-type { margin-right: 0; } .local-nav nav ul li a { display: block; width: 100%; text-align: left; line-height: 1.2; color: #9fa0a0; padding-bottom: 0.4rem; transition: .4s all; position: relative; } .local-nav nav ul li a::before { content: ""; display: block; min-width: 112%; height: 2px; background-color: #000; position: absolute; left: 0; bottom: 0; opacity: 0; pointer-events: none; } .local-nav nav ul li a .en { font-size: min(3.5vw, 3.2rem); letter-spacing: 0.1em; font-weight: 100; } .local-nav nav ul li.current a, .local-nav nav ul li a:hover { color: #000; } .local-nav nav ul li.current a::before, .local-nav nav ul li a:hover::before { opacity: 1; } .local-nav nav ul li:last-of-type a::before { min-width: 100%; } @media screen and (max-width: 960px) { .local-nav nav { width: 56%; } .local-nav nav ul li:nth-of-type(2n) { margin-right: 0; } .local-nav nav ul li:nth-of-type(3n) { margin-right: 8%; } } @media screen and (max-width: 600px) { .local-nav nav ul { display: block; } .local-nav nav ul li { margin-right: 0; } .local-nav nav ul li a { padding-bottom: 2px; } .local-nav nav ul li a::before { min-width: 100%; } .local-nav nav ul li a .en { font-size: min(5.4vw, 20px); } .local-nav nav ul li.current + li { padding-top: 4px; } } /*----------------------------- contents -------------------------------*/ .cont-section-container { padding-top: 12rem; } @media screen and (max-width: 764px) { .cont-section-container { padding-top: 8rem; } } .cate-mv { text-align: center; margin: 4rem auto; position: relative; } .cate-mv .cate-ttl { width: 100%; max-width: 1056px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; } .cate-mv .cate-ttl p { width: calc((480/1056)*100%); max-width: 480px; margin: 0 0 0 auto; } .cate-mv .image { max-height: 480px; overflow-y: hidden; } .cate-mv .image .img { height: 100%; } .cate-mv .image .img img { object-fit: cover; object-position: center top; } @media screen and (max-width: 1056px) { .cate-mv { margin: 2.4rem auto; } } @media screen and (max-width: 864px) { .cate-mv .cate-ttl p { width: calc((480/960)*100%); } } @media screen and (max-width: 600px) { .cate-mv { margin: 24px auto; } .cate-mv .cate-ttl p { width: calc((480/744)*100%); } } .intro { margin-bottom: 4rem; } @media screen and (max-width: 600px) { .intro { margin-bottom: 24px; } } .facility-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .facility-wrap div, .facility-wrap li { min-height: 0%; } .facility-wrap > .facility-container { width: 46%; } @media screen and (max-width: 600px) { .facility-wrap > .facility-container { width: 100%; } } .facility-container { padding-top: 4rem; } .facility-container .facility-image { margin-bottom: 4px; } .facility-container .facility-image .wappen { width: calc((167/650)*100%); min-width: 167px; position: absolute; right: -2.4rem; top: -2.4rem; } .facility-container .facility-image .wappen.posi-left { right: auto; left: -2.4rem; } .facility-container .facility-name { font-size: clamp(14px, 1.6vw, 16px); text-align: left; line-height: 1.28; } .facility-container .facility-name sup { font-size: x-small; vertical-align: text-top; line-height: 1.6; } .facility-container .facility-distance { font-size: 12px; } .facility-container .lead { font-size: clamp(13px, 1.5vw, 1.5rem); } .facility-container .note-area { margin-top: 0; } @media screen and (max-width: 1024px) { .facility-container .facility-image .wappen { min-width: 144px; } } @media screen and (max-width: 864px) { .facility-container .facility-image .wappen { min-width: 104px; } } @media screen and (max-width: 600px) { .facility-container { padding-top: 24px; } } .column-area { background-color: #e9eeea; padding: 12rem 0 8rem; margin-top: 5.6rem; } .column-area .column-wrap { background-image: linear-gradient(to right, #e9eeea 0%, #e9eeea 7%, #fff 7%, #fff 100%); } .column-area .column-wrap.to-left { background-image: linear-gradient(to left, #e9eeea 0%, #e9eeea 7%, #fff 7%, #fff 100%); } .column-area .column-wrap + .column-wrap { margin-top: 16rem; } .column-area .column { background-color: #fff; padding: 4rem 4.5455%; position: relative; } .column-area .column .column-head { margin-bottom: 2.4rem; position: relative; } .column-area .column .column-head img { position: absolute; } .column-area .column .maincopy { font-size: clamp(19px, 3vw, 2.8rem); } @media screen and (max-width: 864px) { .column-area .column-wrap + .column-wrap { margin-top: 12rem; } .column-area .column { padding: 4rem 0 4rem 6%; } .column-area .to-left .column { padding: 4rem 6% 4rem 0; } } @media screen and (max-width: 600px) { .column-area { padding: 64px 0 40px; } .column-area .column-wrap + .column-wrap { margin-top: 8rem; } .column-area .column { padding-left: 8%; } .column-area .column .column-head { margin-bottom: 0; } .column-area .to-left .column { padding-right: 8%; } } .summary { width: 100%; max-width: 600px; margin: auto; background-color: #e9eeea; padding: 1.6rem 2.4rem; margin-bottom: 4rem; } .summary .copy { text-align: center; } @media screen and (max-width: 600px) { .summary { max-width: initial; padding: 16px; margin-bottom: 24px; } } .map-container .fig .img { margin: 0; } @media screen and (max-width: 600px) { .map-container + .note-area { margin-top: 0; } } #Shopping .cate-mv .cate-ttl { top: calc(((114/284)*64%)* -1); } #Shopping .facility-wrap .tenant-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 1.6rem; } #Shopping .facility-wrap .tenant-list div, #Shopping .facility-wrap .tenant-list li { min-height: 0%; } #Shopping .facility-wrap .tenant-list .image-photo { width: 40%; max-width: 310px; } #Shopping .facility-wrap .tenant-list .text-box { width: 56%; } #Shopping .facility-wrap .tenant-list .head { font-size: clamp(13px, 1.4vw, 14px); text-align: left; line-height: 1.2; padding-bottom: 4px; margin-bottom: 6px; border-bottom: thin solid #424242; } #Shopping .facility-wrap .tenant-list .shop-list > li { font-family: "Helvetica Neue", "Helvetica","Yu Gothic", 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif; font-weight: normal; font-size: clamp(12px, 1.4vw, 13px); text-align: left; line-height: 1.2; margin-bottom: 4px; } #Shopping .facility-wrap #ShonanMallFILL { width: 100%; display: grid; grid-template-columns: 1fr 0.9fr; gap: 0 5%; } #Shopping .facility-wrap #ShonanMallFILL .facility-name { grid-column-start: 1; } #Shopping .facility-wrap #ShonanMallFILL .tenant-logo { grid-row-start: 1; grid-row-end: 3; grid-column-start: 2; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list { grid-column: span 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin-top: 0; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list div, #Shopping .facility-wrap #ShonanMallFILL .tenant-list li { min-height: 0%; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list::after { content: none; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li { width: 30%; margin-top: 2.4rem; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li .label { font-size: clamp(13px, 1.6vw, 16px); color: #fff; text-align: center; line-height: 1.2; padding: 4px; margin: 4px 0; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(1) .label { background-color: #5a3e52; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(2) .label { background-color: #a47710; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(3) .label { background-color: #066679; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(4) .label { background-color: #435224; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(5) .label { background-color: #8e6075; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li:nth-of-type(6) .label { background-color: #8a8106; } #Shopping .facility-wrap #ShonanMallFILL .note-area { grid-column: span 2; } #Shopping .column-area .column-wrap .column { display: grid; } #Shopping .column-area .column-wrap:nth-of-type(1) .column { grid-template-columns: 0.8fr 1fr; gap: 0 5%; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head { grid-column: span 2; width: calc((588/1056)*100%); max-width: 588px; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head img { aspect-ratio: 588 / 104; transform: translateY(-105%); } #Shopping .column-area .column-wrap:nth-of-type(1) .column .image { grid-row: span 2; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .facility-wrap { grid-column: span 2; margin-top: 1.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .facility-wrap div, #Shopping .column-area .column-wrap:nth-of-type(1) .column .facility-wrap li { min-height: 0%; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .facility-wrap .facility-container { width: 30%; padding-top: 1.6rem; } #Shopping .column-area .column-wrap:nth-of-type(2) .column { grid-template-columns: 0.81fr 1fr; gap: 0 4%; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head, #Shopping .column-area .column-wrap:nth-of-type(2) .column .maincopy, #Shopping .column-area .column-wrap:nth-of-type(2) .column .lead, #Shopping .column-area .column-wrap:nth-of-type(2) .column .note-area { grid-column: span 2; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head { width: calc((485/1056)*100%); max-width: 485px; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head img { aspect-ratio: 485/ 106; transform: translateY(-118%); } #Shopping .column-area .column-wrap:nth-of-type(2) .column .lead { margin-bottom: 4rem; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container { margin-bottom: 1.6rem; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .fig { margin-bottom: 4px; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend li { display: inline-block; margin-right: 1rem; width: auto; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend li:last-of-type { margin-right: 0; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend li:nth-of-type(1) .label { background-color: #45b035; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend li:nth-of-type(2) .label { background-color: #ef858c; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend li:nth-of-type(3) .label { background-color: #226cad; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .map-container .legend .label { display: inline-block; width: 2rem; aspect-ratio: 2/1; margin-right: 4px; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .img1 { grid-row: span 2; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .img1 .img { height: 100%; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .img1 .img img { height: 100%; object-fit: cover; object-position: center bottom; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .note-area { margin-top: 0; } @media screen and (max-width: 1024px) { #Shopping .cate-mv .cate-ttl { top: calc(((114/284)*80%)* -1); } #Shopping .column-area .column-wrap:nth-of-type(1) .column { grid-template-columns: 1fr 0.64fr; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head img { transform: translateY(-115%); } #Shopping .column-area .column-wrap:nth-of-type(1) .column .image { grid-row: span 1; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .maincopy { align-self: flex-end; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .lead { grid-column: span 2; margin-top: 2.4rem; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head img { transform: translateY(-128%); } } @media screen and (max-width: 864px) { #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head img { transform: translateY(-125%); } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head img { transform: translateY(-138%); } } @media screen and (max-width: 600px) { #Shopping .cate-mv .cate-ttl { top: calc(((114/284)*64%)* -1); } #Shopping .facility-wrap #ShonanMallFILL { display: block; } #Shopping .facility-wrap #ShonanMallFILL .tenant-logo { grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; margin-top: 16px; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list { grid-column: span 1; } #Shopping .facility-wrap #ShonanMallFILL .tenant-list > li { width: 46%; } #Shopping .column-area .column-wrap .column { display: block; } #Shopping .column-area .column-wrap:nth-of-type(1) .column { padding-top: 3rem; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head { width: calc((588/750)*100%); } #Shopping .column-area .column-wrap:nth-of-type(1) .column .column-head img { transform: translateY(-125%); } #Shopping .column-area .column-wrap:nth-of-type(1) .column .image { margin-bottom: 2.4rem; } #Shopping .column-area .column-wrap:nth-of-type(1) .column .facility-wrap .facility-container { width: 48%; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head { width: calc((485/750)*100%); margin-left: auto; margin-right: 0; } #Shopping .column-area .column-wrap:nth-of-type(2) .column .column-head img { transform: translateY(-158%); } #Shopping .column-area .column-wrap:nth-of-type(2) .column .img1 { margin-bottom: 1.6rem; } } #Active .cate-mv .cate-ttl { top: calc(((107/284)*64%)* -1); } #Active .intro { margin-bottom: 0; } #Active .faci-active { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Active .faci-active div, #Active .faci-active li { min-height: 0%; } #Active .faci-active .facility-container { width: 48%; } #Active .faci-active .facility-container .facility-image .img .label { width: calc((204/650)*100%); position: absolute; top: 1rem; right: 1rem; } #Active .column-area .column-wrap .column { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5%; } #Active .column-area .column-wrap .column .column-head { grid-column: span 2; width: calc((280/1056)*100%); max-width: 280px; } #Active .column-area .column-wrap .column .column-head img { aspect-ratio: 280 / 106; transform: translateY(-120%); } #Active .column-area .column-wrap .column .lead { grid-column-start: 1; } #Active .column-area .column-wrap .column .map-container { grid-column-start: 2; grid-row-start: 2; grid-row-end: 4; } #Active .column-area .column-wrap .column .facility-wrap { width: 96%; max-width: 1024px; margin: auto; grid-column: span 2; } #Active .column-area .column-wrap .column .facility-wrap .area-container { display: grid; grid-template-columns: 1fr 0.435fr; gap: 0 2%; padding-top: 4rem; } #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head { grid-column: span 2; display: flex; justify-content: center; align-items: center; } #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head .txt { display: block; font-size: clamp(14px, 18vw, 2rem); text-align: center; line-height: 1.2; } #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head::before, #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head::after { content: ""; display: block; height: 1px; flex-grow: 1; background-color: #666; } #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head::before { margin-right: 1rem; } #Active .column-area .column-wrap .column .facility-wrap .area-container .area-head::after { margin-left: 1rem; } #Active .column-area .column-wrap .column .facility-wrap .area-container .facility-container { width: 100%; padding-top: 1.6rem; } #Active .column-area .column-wrap .column .facility-wrap .area-container .facility-container:first-of-type { grid-row: span 2; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-last-of-type(2) { grid-template-columns: 0.435fr 1fr; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-last-of-type(2) .area-head { order: 1; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-last-of-type(2) .facility-container:nth-of-type(1) { order: 3; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-last-of-type(2) .facility-container:nth-of-type(2) { order: 2; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-last-of-type(2) .facility-container:nth-of-type(3) { order: 4; } @media screen and (max-width: 1024px) { #Active .cate-mv .cate-ttl { top: calc(((107/284)*88%)* -1); } #Active .column-area .column-wrap .column { grid-template-columns: 0.88fr 1fr; gap: 0 2%; } #Active .column-area .column-wrap .column .maincopy { align-self: flex-end; } #Active .column-area .column-wrap .column .lead { grid-column: span 2; margin-top: 2.4rem; } #Active .column-area .column-wrap .column .map-container { grid-row-end: 3; } } @media screen and (max-width: 864px) { #Active .column-area .column-wrap .column .column-head img { transform: translateY(-80%); } } @media screen and (max-width: 600px) { #Active .cate-mv .cate-ttl { top: calc(((107/284)*64%)* -1); } #Active .faci-active .facility-container { width: 100%; } #Active .column-area .column-wrap .column { display: block; } #Active .column-area .column-wrap .column .column-head { width: calc((280/750)*100%); } #Active .column-area .column-wrap .column .column-head img { transform: translateY(-144%); } #Active .column-area .column-wrap .column .map-container { margin-top: 24px; container-type: inline-size; } #Active .column-area .column-wrap .column .map-container .fig { width: 100vw; margin-inline: calc(50% - 50cqi); padding-left: 8.75cqi; transform: translateX(-17.5cqi); overflow-x: hidden; } #Active .column-area .column-wrap .column .facility-wrap { width: 100%; } #Active .column-area .column-wrap .column .facility-wrap .area-container { grid-template-columns: 1fr 1fr; padding-top: 24px; } #Active .column-area .column-wrap .column .facility-wrap .area-container .facility-container { padding-top: 8px; } #Active .column-area .column-wrap .column .facility-wrap .area-container .facility-container:first-of-type { grid-column: span 2; grid-row: span 1; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-of-type(2) { grid-template-columns: 1fr 1fr; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-of-type(2) .facility-container:nth-of-type(1) { order: 2; } #Active .column-area .column-wrap .column .facility-wrap .area-container:nth-of-type(2) .facility-container:nth-of-type(2) { order: 3; } } #Relax .cate-mv .cate-ttl { top: calc(((152/284)*64%)* -1); } #Relax .intro { margin-bottom: 0; } #Relax .nature-icon-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; margin-top: 1.6rem; } #Relax .nature-icon-list div, #Relax .nature-icon-list li { min-height: 0%; } #Relax .nature-icon-list li { width: calc((90/750)*100%); max-width: 90px; margin-right: 4px; margin-bottom: 4px; } #Relax .nature-icon-list li:last-of-type { margin-right: 0; } #Relax .facility-wrap .facility-container { width: 48%; } #Relax .facility-wrap #Kugenuma { display: grid; grid-template-columns: 1fr 0.5fr; gap: 0 3%; } #Relax .facility-wrap #Kugenuma .facility-image { grid-column: span 2; } #Relax .facility-wrap #Kugenuma .images { grid-column-start: 2; grid-row-start: 2; grid-row-end: 6; } #Relax .facility-wrap #Kugenuma .images .image + .image { margin-top: 4px; } #Relax .facility-wrap #Kugenuma .head { border: thin solid #424242; border-width: 1px 0; padding: 6px 4px; margin: 16px 0 4px; text-align: center; line-height: 1.2; } #Relax .facility-wrap #Kugenuma .head .txt { font-size: clamp(14px, 1.5vw, 1.5rem); } #Relax .facility-wrap #Kugenuma .lead { grid-column-start: 1; } #Relax .column-area .column-wrap .column { display: grid; grid-template-columns: 0.8fr 1fr; gap: 0 4%; } #Relax .column-area .column-wrap .column .column-head { grid-column: span 2; width: calc((430/1056)*100%); max-width: 430px; } #Relax .column-area .column-wrap .column .column-head img { aspect-ratio: 430 / 48; transform: translateY(-130%); } #Relax .column-area .column-wrap .column .lead { grid-column-start: 1; } #Relax .column-area .column-wrap .column .map-container { grid-column-start: 2; grid-row-start: 2; grid-row-end: 4; } #Relax .column-area .column-wrap .column .facility-wrap { grid-column: span 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Relax .column-area .column-wrap .column .facility-wrap div, #Relax .column-area .column-wrap .column .facility-wrap li { min-height: 0%; } #Relax .column-area .column-wrap .column .facility-wrap .facility-container { width: 47%; padding-bottom: 12px; border-bottom: thin solid #666; } #Relax .column-area .column-wrap .column .facility-wrap .facility-container:nth-last-of-type(-n+2) { border-bottom: none; } #Relax .column-area .column-wrap .column .facility-wrap .facility-container .lead { font-size: clamp(13px, 1.5vw, 1.5rem); margin-top: 16px; } @media screen and (max-width: 1024px) { #Relax .column-area .column-wrap .column .column-head img { transform: translateY(-160%); } } @media screen and (max-width: 600px) { #Relax .facility-wrap { display: block; } #Relax .facility-wrap .facility-container { width: 100%; } #Relax .column-area .column-wrap .column { display: block; } #Relax .column-area .column-wrap .column .column-head { width: calc((430/750)*100%); } #Relax .column-area .column-wrap .column .column-head img { transform: translateY(-216%); } #Relax .column-area .column-wrap .column .map-container { margin: 2.4rem auto 0.8rem; } #Relax .column-area .column-wrap .column .facility-wrap { display: block; } #Relax .column-area .column-wrap .column .facility-wrap .facility-container { width: 100%; } #Relax .column-area .column-wrap .column .facility-wrap .facility-container:nth-last-of-type(2) { border-bottom: thin solid #666; } } #Peaceful .cate-mv .cate-ttl { top: calc(((194/284)*64%)* -1); } #Peaceful .ranking { max-width: 640px; margin: auto auto 4rem; } #Peaceful .ranking figure { margin: 0; } #Peaceful .graph { max-width: 960px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Peaceful .graph div, #Peaceful .graph li { min-height: 0%; } #Peaceful .graph figure { margin: 0; } #Peaceful .graph .fig { width: 47%; } #Peaceful .graph .fig:nth-of-type(1) { width: calc((652/674)*47%); } #Peaceful .list1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 3%; padding-top: 1.6rem; } #Peaceful .list1 .facility-container { width: 100%; padding-top: 0; } #Peaceful .list1 .facility-container:nth-of-type(1) { padding: 1.6rem 0; grid-column: span 4; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3%; } #Peaceful .list1 .facility-container:nth-of-type(1) .facility-image { grid-row: span 6; } #Peaceful .list1 .facility-container:nth-of-type(1) .services { margin-top: 4%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Peaceful .list1 .facility-container:nth-of-type(1) .services div, #Peaceful .list1 .facility-container:nth-of-type(1) .services li { min-height: 0%; } #Peaceful .list1 .facility-container:nth-of-type(1) .services li { width: 49%; border: thin solid #647868; padding: 8px; margin-bottom: 2%; display: flex; justify-content: center; align-items: center; } #Peaceful .list1 .facility-container:nth-of-type(1) .services li p { font-size: clamp(14px, 1.5vw, 1.5rem); color: #647868; line-height: 1.28; text-align: center; } #Peaceful .list1 .facility-container:nth-of-type(1) .services li.etc { margin-top: -1%; width: 100%; font-size: clamp(12px, 1.4vw, 1.4rem); justify-content: flex-end; color: #647868; line-height: 1.2; padding: 0; border: none; } #Peaceful .list1 .facility-container:nth-of-type(1) .linkbtn a { background-color: #647868; padding: 6px; text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; transition: all .4s; } #Peaceful .list1 .facility-container:nth-of-type(1) .linkbtn a p { font-size: clamp(15px, 1.6vw, 1.6rem); color: #fff; line-height: 1.28; text-align: center; } #Peaceful .list1 .facility-container:nth-of-type(1) .linkbtn a:hover { background-color: #99a39b; filter: brightness(104%); } #Peaceful .list1 .facility-container:nth-of-type(1) .linkbtn a:hover p { color: #375b3d; } #Peaceful .list1 .facility-container:nth-of-type(2) { grid-column: span 2; grid-row: span 2; } #Peaceful .list1 .facility-container:nth-of-type(2) .facility-image { height: calc(100% - (2em * 2.24)); } #Peaceful .list1 .facility-container:nth-of-type(2) .facility-image .img { height: 100%; } #Peaceful .list1 .facility-container:nth-of-type(2) .facility-image .img img { height: 100%; object-fit: cover; object-position: 27% bottom; } #Peaceful .column-area .column-wrap .column .column-head { width: calc((298/1056)*100%); max-width: 298px; } #Peaceful .column-area .column-wrap .column .column-head img { aspect-ratio: 298 / 107; transform: translateY(-120%); } #Peaceful .column-area .column-wrap .column .list2 .facility-container { width: 32%; } #Peaceful .column-area .column-wrap .column .list2 .facility-container:nth-last-of-type(-n+2) { width: 47%; } #Peaceful .column-area .column-wrap .column .list2 .facility-container .facility-image .wappen { width: calc((152/650)*100%); min-width: 152px; } @media screen and (max-width: 1200px) { #Peaceful .cate-mv .cate-ttl { top: calc(((194/284)*76%)* -1); } } @media screen and (max-width: 1024px) { #Peaceful .cate-mv .cate-ttl { top: calc(((194/284)*82%)* -1); } #Peaceful .column-area .column-wrap .column .column-head img { transform: translateY(-130%); } #Peaceful .column-area .column-wrap .column .list2 .facility-container .facility-image .wappen { min-width: 128px; } } @media screen and (max-width: 864px) { #Peaceful .cate-mv .cate-ttl { top: calc(((194/284)*88%)* -1); } #Peaceful .list1 .facility-container:nth-of-type(1) .services { margin-top: 3%; } #Peaceful .list1 .facility-container:nth-of-type(1) .services li { padding: 6px 8px; } #Peaceful .column-area .column-wrap .column .list2 .facility-container .facility-image .wappen { min-width: 96px; } } @media screen and (max-width: 600px) { #Peaceful .cate-mv .cate-ttl { top: calc(((194/284)*64%)* -1); } #Peaceful .ranking .note-area { margin-top: 0; } #Peaceful .graph { display: block; } #Peaceful .graph .fig { width: 100% !important; } #Peaceful .graph .fig + .fig { margin-top: 4rem; } #Peaceful .list1 { grid-template-columns: repeat(2, 1fr); column-gap: 5%; } #Peaceful .list1 .facility-container:nth-of-type(1) { grid-column: span 2; display: block; } #Peaceful .list1 .facility-container:nth-of-type(2) .facility-image { height: auto; } #Peaceful .column-area .column-wrap .column .column-head { width: calc((298/750)*100%); } #Peaceful .column-area .column-wrap .column .column-head img { transform: translateY(-152%); } #Peaceful .column-area .column-wrap .column .list2 .facility-container { width: 47%; } #Peaceful .column-area .column-wrap .column .list2 .facility-container:nth-last-of-type(-n+2) { width: 100%; } } #Education .cate-mv .cate-ttl { top: calc(((124/284)*64%)* -1); } #Education .list1 .facility-container { width: 32%; } #Education .list1 .facility-container:nth-of-type(-n+2) { width: 47.5%; } #Education .list1 .facility-container:nth-of-type(1) { display: grid; grid-template-columns: 1fr 0.48fr; gap: 0 2%; } #Education .list1 .facility-container:nth-of-type(1) .facility-image { grid-column: span 2; } #Education .list1 .facility-container:nth-of-type(1) .sub-img { grid-row: span 4; } #Education .list1 .facility-container:nth-of-type(1) .lead { margin-top: 1.6rem; } #Education .column-area .column-wrap .column { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #Education .column-area .column-wrap .column div, #Education .column-area .column-wrap .column li { min-height: 0%; } #Education .column-area .column-wrap .column .column-head { width: calc((476/1056)*100%); max-width: 476px; } #Education .column-area .column-wrap .column .column-head img { aspect-ratio: 476 / 48; transform: translateY(-148%); } #Education .column-area .column-wrap .column .maincopy, #Education .column-area .column-wrap .column .lead { width: 100%; } #Education .column-area .column-wrap .column .facility-wrap { padding-top: 1.6rem; width: 36%; } #Education .column-area .column-wrap .column .facility-wrap .facility-container { width: 100%; padding-top: 2.4rem; } #Education .column-area .column-wrap .column .map-container { padding-top: 4rem; width: 60%; } @media screen and (max-width: 1024px) { #Education .cate-mv .cate-ttl { top: calc(((124/284)*80%)* -1); } } @media screen and (max-width: 600px) { #Education .cate-mv .cate-ttl { top: calc(((124/284)*64%)* -1); } #Education .list1 .facility-container { width: 47%; } #Education .list1 .facility-container:nth-of-type(-n+2) { width: 100%; } #Education .column-area .column-wrap .column { display: block; } #Education .column-area .column-wrap .column .column-head { width: calc((476/750)*100%); } #Education .column-area .column-wrap .column .column-head img { transform: translateY(-214%); } #Education .column-area .column-wrap .column .facility-wrap { padding-top: 0; width: 100%; } #Education .column-area .column-wrap .column .facility-wrap .facility-container { width: 47%; padding-top: 2.4rem; } #Education .column-area .column-wrap .column .map-container { padding-top: 2.4rem; width: 100%; } } /*----------------------------- LIFE INFORMATION -------------------------------*/ #Lifeinfo { margin: auto; padding-top: 8rem; --Tab01-color: #6e2410; --Tab02-color: #684761; --Tab03-color: #2b5e7c; --Tab04-color: #cb8f3b; --Tab05-color: #9c9463; --Tab06-color: #684d19; --Tab07-color: #688226; } #Lifeinfo .section-title { margin: auto; text-align: center; letter-spacing: 0.05em; } #Lifeinfo .section-title .en { font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; text-align: center; font-size: clamp(18px, 2vw, 2.8rem); } #Lifeinfo p.en-name { font-size: 3rem; text-align: center; } #Lifeinfo h5 { padding: 6px 0; color: #fff; font-size: 15px; font-feature-settings: "palt"; letter-spacing: 0.2em; text-align: center; margin-bottom: 10px; } #Lifeinfo ul, #Lifeinfo li { padding: 0; list-style: none; } #Lifeinfo .how { text-align: center; } #Lifeinfo .mapblock_wrap { margin: 0 auto 1%; } #Lifeinfo #mNav { margin: auto; } #Lifeinfo #mNav ul { display: flex; justify-content: space-between; flex-flow: row wrap; margin-top: 40px; } #Lifeinfo #mNav li { width: calc(96% / 7); padding: 6px; border: thin solid; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; transition: background-color 0.4s; } #Lifeinfo #mNav li p { font-size: clamp(13px, 1.2vw, 1.4rem); font-feature-settings: "palt"; text-align: center; letter-spacing: 0.05em; line-height: 1.2; } #Lifeinfo #mNav li.active p, #Lifeinfo #mNav li:hover p { color: #fff !important; } #Lifeinfo #mNav li#liTab01 { border-color: var(--Tab01-color); } #Lifeinfo #mNav li#liTab01 p { color: var(--Tab01-color); } #Lifeinfo #mNav li#liTab01.active, #Lifeinfo #mNav li#liTab01:hover { background-color: var(--Tab01-color); } #Lifeinfo #mNav li#liTab02 { border-color: var(--Tab02-color); } #Lifeinfo #mNav li#liTab02 p { color: var(--Tab02-color); } #Lifeinfo #mNav li#liTab02.active, #Lifeinfo #mNav li#liTab02:hover { background-color: var(--Tab02-color); } #Lifeinfo #mNav li#liTab03 { border-color: var(--Tab03-color); } #Lifeinfo #mNav li#liTab03 p { color: var(--Tab03-color); } #Lifeinfo #mNav li#liTab03.active, #Lifeinfo #mNav li#liTab03:hover { background-color: var(--Tab03-color); } #Lifeinfo #mNav li#liTab04 { border-color: var(--Tab04-color); } #Lifeinfo #mNav li#liTab04 p { color: var(--Tab04-color); } #Lifeinfo #mNav li#liTab04.active, #Lifeinfo #mNav li#liTab04:hover { background-color: var(--Tab04-color); } #Lifeinfo #mNav li#liTab05 { border-color: var(--Tab05-color); } #Lifeinfo #mNav li#liTab05 p { color: var(--Tab05-color); } #Lifeinfo #mNav li#liTab05.active, #Lifeinfo #mNav li#liTab05:hover { background-color: var(--Tab05-color); } #Lifeinfo #mNav li#liTab06 { border-color: var(--Tab06-color); } #Lifeinfo #mNav li#liTab06 p { color: var(--Tab06-color); } #Lifeinfo #mNav li#liTab06.active, #Lifeinfo #mNav li#liTab06:hover { background-color: var(--Tab06-color); } #Lifeinfo #mNav li#liTab07 { border-color: var(--Tab07-color); } #Lifeinfo #mNav li#liTab07 p { color: var(--Tab07-color); } #Lifeinfo #mNav li#liTab07.active, #Lifeinfo #mNav li#liTab07:hover { background-color: var(--Tab07-color); } #Lifeinfo #mWrap { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto; margin-top: 3rem; height: 560px; font-feature-settings: "palt"; } #Lifeinfo #mWrap li { position: relative; border-bottom: 1px solid #ddd; padding: 0.6rem 0 0.6rem 36px; } #Lifeinfo #mWrap li .num { color: #fff !important; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 24px; aspect-ratio: 1/1; text-align: center; font-size: clamp(12px, 2vw, 16px); padding: 0; } #Lifeinfo #mWrap li .num.empty { display: none; } #Lifeinfo #mWrap li:first-child { border-top: 1px solid #ddd; } #Lifeinfo #mWrap .txt { font-size: clamp(12px, 1.3vw, 1.3rem); text-align: left; line-height: 1.2; } #Lifeinfo #mWrap .txt01 { display: block; margin-bottom: 4px; } #Lifeinfo #mWrap .txt02 { display: block; } #Lifeinfo #lctMap { height: 100%; margin-right: 40%; background: #9aa; } #Lifeinfo #mSide { position: absolute; top: 0; right: 0; width: 37%; height: 100%; } #Lifeinfo #mSide .sideWrap { width: 100%; height: 100%; padding-left: 1em; overflow-y: auto; position: absolute; top: 0; right: 0; } #Lifeinfo #mSide .sideWrap a { text-decoration: none; color: #111; padding: 2px 0; display: block; overflow: hidden; } #Lifeinfo #mSide .sideWrap.active { display: block; } #Lifeinfo #mSide .sideWrap#side01 h5 { background-color: var(--Tab01-color); } #Lifeinfo #mSide .sideWrap#side01 li .num { background-color: var(--Tab01-color); } #Lifeinfo #mSide .sideWrap#side02 h5 { background-color: var(--Tab02-color); } #Lifeinfo #mSide .sideWrap#side02 li .num { background-color: var(--Tab02-color); } #Lifeinfo #mSide .sideWrap#side03 h5 { background-color: var(--Tab03-color); } #Lifeinfo #mSide .sideWrap#side03 li .num { background-color: var(--Tab03-color); } #Lifeinfo #mSide .sideWrap#side04 h5 { background-color: var(--Tab04-color); } #Lifeinfo #mSide .sideWrap#side04 li .num { background-color: var(--Tab04-color); } #Lifeinfo #mSide .sideWrap#side05 h5 { background-color: var(--Tab05-color); } #Lifeinfo #mSide .sideWrap#side05 li .num { background-color: var(--Tab05-color); } #Lifeinfo #mSide .sideWrap#side06 h5 { background-color: var(--Tab06-color); } #Lifeinfo #mSide .sideWrap#side06 li .num { background-color: var(--Tab06-color); } #Lifeinfo #mSide .sideWrap#side07 h5 { background-color: var(--Tab07-color); } #Lifeinfo #mSide .sideWrap#side07 li .num { background-color: var(--Tab07-color); } @media screen and (max-width: 864px) { #Lifeinfo #mNav li { width: calc(98% / 3); margin-bottom: 1%; } #Lifeinfo #mWrap { height: auto; } #Lifeinfo #mWrap li { padding: 8px 0 8px 32px; } #Lifeinfo #lctMap { height: 600px; margin-right: 0; margin-bottom: 20px; } #Lifeinfo #mSide { position: relative; width: 100%; height: auto; } #Lifeinfo #mSide .sideWrap { position: static; height: auto; padding-left: 0; } } @media screen and (max-width: 768px) { #Lifeinfo .how { font-size: 0.8rem; } #Lifeinfo #mNav li { width: calc(98% / 2); } #Lifeinfo #lctMap { height: 320px; } } /*----------------------------- childcare -------------------------------*/ .childcare header .gnav_container, .childcare .txtNav, .childcare .headerbody .menu { display: none !important; } .childcare #main .image-container { width: calc((650/750)*100%); margin: auto; } .childcare .childcare-service-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding: 4%; } .childcare .childcare-service-list div, .childcare .childcare-service-list li { min-height: 0%; } .childcare .childcare-service-list li { width: 32%; padding: 2% 1.6%; margin-bottom: 2%; border: thin solid #808080; } .childcare .childcare-service-list li .cc-service-head { font-size: clamp(15px, 1.6vw, 1.6rem); text-align: left; line-height: 1.28; color: #647868; margin-bottom: 1.6rem; padding-left: 1.6rem; position: relative; } .childcare .childcare-service-list li .cc-service-head::before { content: ""; display: inline-block; width: 1.3rem; aspect-ratio: 1/1; background-color: #647868; position: absolute; left: 0; top: 0.128em; } .childcare .childcare-service-list li .lead { font-size: clamp(14px, 1.5vw, 1.5rem); } .childcare .childcare-service-list li dl { margin-top: 1.6rem; } .childcare .childcare-service-list li dl dt, .childcare .childcare-service-list li dl dd { font-family: "Helvetica Neue", "Helvetica","Yu Gothic", 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif; font-weight: normal; font-size: clamp(12px, 1.3vw, 1.3rem); color: #647868; text-align: left; line-height: 1.44; } .childcare .childcare-service-list li dl dd + dt { margin-top: 1.2rem; } .childcare .note-area { margin-top: 0; } .childcare .btn_container { padding-bottom: 3rem; } @media screen and (max-width: 864px) { .childcare #main .image-container { padding-top: 4rem; } } @media screen and (max-width: 600px) { .childcare #main .image-container { width: 100%; padding-top: 0; } .childcare .childcare-service-list { width: 84%; padding: 4% 0 0; margin: auto; } .childcare .childcare-service-list li { width: 100%; padding: 4% 0 5%; border-width: 0 0 1px; } }