@charset "UTF-8"; #main-content img{ width: 100%; height: auto; } #main-content .section-location{ max-width: 1400px; padding: 120px 5% 0; margin: 0 auto; } #main-content .en-ttl{ font-size: 24px; line-height: 1.5; font-family: 'YakuHanMP', 'EB Garamond', 'Cormorant Garamond', 'Lora', 'Noto Serif JP', serif; color: #ada076; letter-spacing: 0.2em; font-weight: normal; padding-bottom: 60px; display: flex; display: -ms-flex; align-items: center; } #main-content .en-ttl:before, #main-content .en-ttl:after{ content: ""; height: 1px; flex: 1; background-color: #ada076; } #main-content .en-ttl .word{ position: relative; padding: 0 1em; } #main-content .en-ttl .word::before, #main-content .en-ttl .word::after{ content: ""; position: absolute; top: 50%; height: 30px; width: 1px; background-color: #ada076; transform: translateY(-50%); } #main-content .en-ttl .word::before{ left: 0; } #main-content .en-ttl .word::after{ right: 0; } #main-content .section-location .location{ overflow: hidden; } #main-content .section-location .location .copy{ font-size: 24px; line-height: 1.5; color: #231815; text-align: center; } #main-content .section-location .location .photo-list{ position: relative; max-width: 1400px; margin: 50px auto 0; text-align: left; } #main-content .section-location .location .photo-list .item01{ position: relative; width: 100%; } #main-content .section-location .location .photo-list .item02{ position: relative; width: 63.5714%; margin-top: 1px; } #main-content .section-location .location .photo-list .item03{ position: absolute; width: 12.1429%; left: 0; top: 1px; margin: 100.3571% 0 0 63.5714%; } #main-content .section-location .location .photo-list .item04{ position: absolute; width: 24.2857%; right: 0; top: 1px; margin-top: 100.3571%; } #main-content .section-location .location .photo-list .item05{ position: absolute; width: 36.4286%; right: 0; bottom: 0; } #main-content .section-location .location .photo-list .item02::before, #main-content .section-location .location .photo-list .item03::before{ content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #ffffff; } #main-content .section-location .location .photo-list .item05::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #ffffff; } #main-content .section-location .location .photo-list .item .caption{ position: absolute; left: 0; bottom: 0; padding: 2px 7px; background-color: rgba(0,0,0,0.8); color: #ffffff; } #main-content .section-location .lifeinfo{ overflow: hidden; margin-top: 100px; } #main-content .section-location .lifeinfo .copy{ font-size: 24px; line-height: 1.5; color: #231815; text-align: center; } #main-content .section-location .lifeinfo .map-body{ position: relative;position: relative; max-width: 1400px; margin: 50px auto 0; text-align: left; } #main-content .section-location .lifeinfo .map-body .compass{ position: absolute; left: 10px; top: 10px; width: 77px; z-index: 10; pointer-events: none; } #main-content .section-location .lifeinfo .map-body .toast{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: rgba(65,65,65,0.95); z-index: 10; max-width: 240px; width: 50%; padding: 20px 0; border-radius: 10px; pointer-events: none; transition: opacity 1s; } #main-content .section-location .lifeinfo .map-body.active .toast{ opacity: 0; } #main-content .section-location .lifeinfo .map-body .toast .icon{ width: 30%; margin: 0 auto; } #main-content .section-location .lifeinfo .map-body .toast .txt{ font-size: 14px; line-height: 1.4285; color: #ffffff; text-align: center; margin-top: 10px; } #main-content .section-location .lifeinfo .map-body .map{ overflow: scroll; padding-top: 45.7142%; position: relative; width: 100%; } #main-content .section-location .lifeinfo .map-body .map::-webkit-scrollbar{ width: 5px; height: 5px; } #main-content .section-location .lifeinfo .map-body .map::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.5); } #main-content .section-location .lifeinfo .map-body .map::-webkit-scrollbar-track{ background: #ffffff; } #main-content .section-location .lifeinfo .map-body .map img{ position: absolute; left: 0; top: 0; /*pointer-events: none;*/ width: 171.4286%; max-width: none; } #main-content .section-location .lifeinfo .map-caption{ max-width: 1100px; margin: 20px auto 0; border: 1px solid #e8e8e8; } #main-content .section-location .lifeinfo .map-caption .head{ text-align: center; background-color: #b5a04a; color: #ffffff; font-size: 16px; line-height: 1.5; padding: 5px 0; } #main-content .section-location .lifeinfo .map-caption .list-item{ display: flex; display: -ms-flex; justify-content: center; padding: 15px; } #main-content .section-location .lifeinfo .map-caption .list-item .item{ vertical-align: middle; line-height: 1.5; } #main-content .section-location .lifeinfo .map-caption .list-item .item:nth-child(n+2){ margin-left: 20px; } #main-content .section-location .lifeinfo .map-caption .list-item .item .icon{ display: inline-block; vertical-align: middle; width: 27px; padding-right: 0.2em; } #main-content .section-location .lifeinfo .photo-list{ max-width: 1100px; margin: 50px auto 0; display: grid; column-gap: 2.5454%; row-gap: 40px; grid-template-columns: repeat(4, 1fr); } #main-content .section-location .lifeinfo .photo-list .item01{ grid-column: 1 / 3; grid-row: 1 / 3; } #main-content .section-location .lifeinfo .photo-list .item .name{ font-size: 16px; line-height: 1.3; color: #333333; margin-top: 5px; } #main-content .section-location .lifeinfo .photo-list .item .txt{ line-height: 1.5714; margin-top: 5px; } #main-content .section-location .lifeinfo .photo-list .item .info{ font-size: 12px; line-height: 1.5; margin-top: 5px; } #main-content .section-location .lifeinfo .news{ max-width: 1100px; margin: 80px auto 0; position: relative; background-color: #eeebe2; padding-bottom: 70px; } #main-content .section-location .lifeinfo .news .bubble{ position: absolute; left: 0; top: 0; width: 87px; } #main-content .section-location .lifeinfo .news .copy{ padding: 50px 0; } #main-content .section-location .lifeinfo .news .split-view{ display: flex; display: -ms-flex; justify-content: space-between; flex-direction: row-reverse; width: 90.9091%; margin: 0 auto; } #main-content .section-location .lifeinfo .news .split-view+.split-view{ margin-top: 60px; } #main-content .section-location .lifeinfo .news .split-view .photo-body{ width: 48%; } #main-content .section-location .lifeinfo .news .split-view .photo-body .name{ font-size: 16px; line-height: 1.2; color: #b5a04a; } #main-content .section-location .lifeinfo .news .split-view .photo-body .name .distance{ color: #666666; } #main-content .section-location .lifeinfo .news .split-view .txt-body{ width: 48%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .ttl{ display: flex; display: -ms-flex; font-weight: normal; align-items: center; } #main-content .section-location .lifeinfo .news .split-view .txt-body .ttl .num{ width: 7.879%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .ttl .txt-body{ flex: 1; margin-left: 1%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .ttl .txt-body .word{ display: block; font-size: 22px; line-height: 1.2; color: #b5a04a; } #main-content .section-location .lifeinfo .news .split-view .txt-body > .txt{ margin-top: 10px; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split{ display: flex; display: -ms-flex; justify-content: space-between; margin-top: 20px; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split .l-body{ width: 56.25%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split .r-body{ flex: 1; margin-left: 2%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split .r-body .note{ margin-top: 10px; border: 1px solid #b5a04a; padding: 10px; } #main-content .section-location .lifeinfo .news .photo-split{ display: flex; display: -ms-flex; justify-content: space-between; width: 90.9091%; margin: 50px auto 0; } #main-content .section-location .lifeinfo .news .photo-split .item{ width: 30%; } #main-content .section-location .lifeinfo .news .photo-split .item .name{ font-size: 16px; line-height: 1.2; color: #b5a04a; margin-top: 5px; } /*--レスポンシブ追加プロパティ--------------------------------------*/ @media screen and (max-width: 1112px){ /*1112px以下のcss*/ } @media screen and (max-width: 768px){ /*768px以下のcss*/ #main-content .en-ttl{ font-size: 4.8vw; padding-bottom: 7%; } #main-content .section-location{ padding: 10% 5% 0; } #main-content .section-location .location .copy{ font-size: 5vw; } #main-content .section-location .location .photo-list{ margin: 5% auto 0; } #main-content .section-location .location .photo-list .item01{ position: relative; width: 100%; } #main-content .section-location .location .photo-list .item02{ position: relative; width: 100%; margin-top: 1px; } #main-content .section-location .location .photo-list .item03{ position: relative; width: 33.3335%; left: 0; top: 1px; margin: 0 0 0; } #main-content .section-location .location .photo-list .item04{ position: absolute; width: 66.6665%; right: 0; top: 2px; margin-top: 170.2317%; } #main-content .section-location .location .photo-list .item05{ position: relative; width: 100%; right: auto; bottom: auto; margin-top: 1px; } #main-content .section-location .location .photo-list .item img{ width: 100%; height: auto; } #main-content .section-location .location .photo-list .item02::before{ display: none; } #main-content .section-location .lifeinfo{ margin-top: 15%; } #main-content .section-location .lifeinfo .copy{ font-size: 5vw; } #main-content .section-location .lifeinfo .map-body{ margin-top: 10%; } #main-content .section-location .lifeinfo .map-body .compass{ max-width: 77px; width: 12%; } #main-content .section-location .lifeinfo .map-body .toast{ padding: 10px 0; } #main-content .section-location .lifeinfo .map-body .toast .icon{ width: 20%; } #main-content .section-location .lifeinfo .map-body .toast .txt{ font-size: 12px; } #main-content .section-location .lifeinfo .map-body .map{ padding-top: 100%; } #main-content .section-location .lifeinfo .map-body .map img{ width: 300%; max-width: none; } #main-content .section-location .lifeinfo .map-caption{ margin: 5% auto 0; } #main-content .section-location .lifeinfo .map-caption .head{ font-size: 14px; } #main-content .section-location .lifeinfo .map-caption .list-item{ flex-wrap: wrap; justify-content: flex-start; } #main-content .section-location .lifeinfo .map-caption .list-item .item{ width: 25%; } #main-content .section-location .lifeinfo .map-caption .list-item .item:nth-child(n+2){ margin-left: 0; } #main-content .section-location .lifeinfo .map-caption .list-item .item:nth-child(n+5){ margin-top: 10px; } #main-content .section-location .lifeinfo .photo-list{ margin-top: 10%; row-gap: 40px; grid-template-columns: repeat(2, 1fr); } #main-content .section-location .lifeinfo .photo-list .item .name{ font-size: 14px; } #main-content .section-location .lifeinfo .news{ margin-top: 10%; padding-bottom: 10%; } #main-content .section-location .lifeinfo .news .bubble{ max-width: 87px; width: 20%; } #main-content .section-location .lifeinfo .news .copy{ padding: 50px 0; } #main-content .section-location .lifeinfo .news .split-view{ display: block; } #main-content .section-location .lifeinfo .news .split-view+.split-view{ margin-top: 15%; } #main-content .section-location .lifeinfo .news .split-view .photo-body{ width: 100%; } #main-content .section-location .lifeinfo .news .split-view .photo-body .name{ font-size: 14px; } #main-content .section-location .lifeinfo .news .split-view .txt-body{ width: 100%; margin-top: 10px; } #main-content .section-location .lifeinfo .news .split-view .txt-body .ttl .txt-body .word{ font-size: 18px; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split{ display: block; margin-top: 5%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split .l-body{ width: 100%; } #main-content .section-location .lifeinfo .news .split-view .txt-body .inner-split .r-body{ margin: 5px 0 0; } #main-content .section-location .lifeinfo .news .photo-split{ margin: 5% auto 0; flex-wrap: wrap; justify-content: flex-start; } #main-content .section-location .lifeinfo .news .photo-split .item{ width: 48%; } #main-content .section-location .lifeinfo .news .photo-split .item:nth-child(2n+2){ margin-left: 4%; } #main-content .section-location .lifeinfo .news .photo-split .item:nth-child(n+3){ margin-top: 5%; } #main-content .section-location .lifeinfo .news .photo-split .item .name{ font-size: 14px; } } @media screen and (max-width: 480px){ /*480px以下のcss*/ #main-content .section-location .lifeinfo .map-caption .list-item .item{ width: 33.333%; } #main-content .section-location .lifeinfo .map-caption .list-item .item:nth-child(n+4){ margin-top: 10px; } }