@charset "UTF-8"; #main-content .feature{ text-align: center; } #main-content .feature .row{ border-bottom: 1px solid #927d3f; padding-bottom: 10px; margin-bottom: 10px; } #main-content .feature .row01 .copy{ display: flex; display: -ms-flex; justify-content: center; align-items: center; font-size: 52px; line-height: 0.8; letter-spacing: 0.2em; color: #927d3f; } #main-content .feature .row01 .copy .word01{ padding-left: 0.2em; } #main-content .feature .row01 .copy .word02{ font-size: 40%; line-height: 1.2; letter-spacing: 0; } #main-content .feature .row01 .copy .word03{ padding-left: 0.2em; } #main-content .feature .row02{ display: flex; display: -ms-flex; justify-content: center; align-items: center; } #main-content .feature .row02 .area, #main-content .feature .row02 .copy{ font-size: 30px; line-height: 0.8; letter-spacing: 0.2em; color: #927d3f; } #main-content .feature .row02 .copy{ margin-left: 1em; } #main-content .feature .row02 .copy sub{ font-size: 40%; color: #140700; letter-spacing: 0; } #main-content .feature .caption{ color: #c5b99d; } #main-content .plan-navi-section{ } #main-content .plan-navi-section .ttl{ font-size: 24px; line-height: 1.2; position: relative; color: #86774f; text-align: center; font-weight: normal; } #main-content .plan-navi{ margin: 70px auto 0; display: flex; display: -ms-flex; justify-content: space-between; } #main-content .plan-navi .navi{ width: 47.4373%; } #main-content .lifestyle{ margin-top: 50px; } #main-content .lifestyle .intro{ } #main-content .lifestyle .intro .head{ font-size: 36px; line-height: 1.75; position: relative; color: #140700; text-align: center; font-weight: normal; letter-spacing: 0.2em; } #main-content .lifestyle .intro .copy{ font-size: 20px; line-height: 1.75; position: relative; color: #84713e; text-align: center; } #main-content .lifestyle .split-view{ display: flex; display: -ms-flex; justify-content: center; margin-top: 50px; } /*#main-content .lifestyle .split-view .bubble{ background-color: #c5b99d; width: 150px; height: 150px; display: flex; display: -ms-flex; justify-content: center; align-items: center; text-align: center; border-radius: 50%; color: #ffffff; font-size: 17px; line-height: 1.5; }*/ #main-content .lifestyle .split-view .txt-body{ max-width: 500px; padding-right: 30px; } #main-content .lifestyle .split-view .txt-body .en{ font-family: 'EB Garamond','Cormorant Garamond', serif; font-size: 14px; line-height: 1.5; color: #140700; } #main-content .lifestyle .split-view .txt-body .copy{ font-size: 20px; line-height: 1.5; color: #847856; font-weight: normal; } #main-content .lifestyle .split-view .txt-body .txt{ font-size: 16px; margin-top: 10px; } #main-content .lifestyle .split-view .txt-body .logo-body{ display: flex; display: -ms-flex; align-items: center; margin-top: 20px; border: solid #927d3f; border-width: 1px 0; padding: 15px 0; } #main-content .lifestyle .split-view .txt-body .logo-body .inner-txt{ flex: 1; padding-left: 20px; } #main-content .lifestyle .split-view .plan{ max-width: 357px; } #main-content .concierge{ background-color: #c5b99d; padding: 20px; margin-top: 50px; } #main-content .concierge .ttl{ font-size: 24px; line-height: 1.2; position: relative; color: #ffffff; text-align: center; font-weight: normal; } #main-content .concierge .en{ font-family: 'EB Garamond','Cormorant Garamond', serif; font-size: 14px; line-height: 1.5; color: #927d3f; text-align: center; } #main-content .concierge .txt{ color: #ffffff; margin-top: 10px; text-align: center; } #main-content .concierge .list-item{ display: flex; display: -ms-flex; justify-content: space-between; margin-top: 10px; } #main-content .concierge .list-item .item{ width: 24%; position: relative; } #main-content .concierge .list-item .item .caption{ position: absolute; right: 0; bottom: 0; padding: 2px 7px; z-index: 10; background-color: rgba(255,255,255,0.8); } #main-content .concierge .list-item+.caption{ color: #333333; } /*--レスポンシブ追加プロパティ--------------------------------------*/ @media screen and (max-width: 1112px){ /*1112px以下のcss*/ } @media screen and (max-width: 768px){ /*768px以下のcss*/ #main-content .feature .row01 .copy{ font-size: 6.77vw; } #main-content .feature .row02 .area, #main-content .feature .row02 .copy{ font-size: 3.90vw; } #main-content .feature .caption{ text-align: left; } #main-content .plan-navi-section .ttl{ font-size: 20px; line-height: 1.5; } #main-content .plan-navi{ margin-top: 5%; } #main-content .lifestyle .intro{ } #main-content .lifestyle .intro .head{ font-size: 26px; letter-spacing: 0; } #main-content .lifestyle .intro .copy{ font-size: 18px; } #main-content .lifestyle{ margin-top: 10%; } #main-content .lifestyle .ttl{ font-size: 20px; } #main-content .lifestyle .split-view{ display: block; margin-top: 10%; } #main-content .lifestyle .split-view .bubble{ font-size: 16px; margin: 0 auto; } #main-content .lifestyle .split-view .txt-body{ padding: 0; max-width: none; } #main-content .lifestyle .split-view .txt-body .txt{ font-size: 14px; } #main-content .lifestyle .split-view .txt-body .logo-body{ margin-top: 5%; } #main-content .lifestyle .split-view .plan{ margin: 5% auto 0; } #main-content .concierge{ padding: 7% 5%; margin-top: 7%; } #main-content .concierge .ttl{ font-size: 20px; } #main-content .concierge .list-item{ flex-wrap: wrap; } #main-content .concierge .list-item .item{ width: 48%; position: relative; } #main-content .concierge .list-item .item:nth-child(n+3){ margin-top: 4%; } #main-content .concierge .list-item .item img{ width: 100%; height: auto; } } @media screen and (max-width: 480px){ /*480px以下のcss*/ #main-content .feature .row01{ margin: 0; padding-bottom: 10px; } #main-content .feature .row01 .copy{ font-size: 8vw; letter-spacing: 0.1em; } #main-content .feature .row01 .copy .word01{ padding-left: 0.1em; } #main-content .feature .row01 .copy .word03{ padding-left: 0.1em; } #main-content .feature .row02{ display: block; padding: 0; } #main-content .feature .row02 .area, #main-content .feature .row02 .copy{ font-size: 22px; line-height: 1.2; padding: 10px 0; } #main-content .feature .row02 .copy{ border-top: 1px solid #927d3f; margin-left: 0; } }