@charset "UTF-8";
#contents img { width: 100%; height: auto; line-height: 0; vertical-align: middle; }
@media screen and (max-width: 700px) { #contents .js-scrollable { padding-bottom: 8px; }
  #contents .js-scrollable > img { width: auto; } }

.compact-cont { padding: 8rem 0 4rem; }
.compact-cont .cont-head { position: relative; }
.compact-cont .cont-head .point-ttl { width: 40%; max-width: 400px; margin: 0 auto; padding: 4px 8px; font-size: 2.8rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border: 3px solid #fff; }
.compact-cont .cont-body > .inner { padding-top: 2.4rem; }
.compact-cont .cont-body .midashi { font-size: 3.2rem; color: #7c5271; margin-bottom: 2.4rem; }
.compact-cont .cont-body .midashi-sub { font-size: 2rem; text-align: center; line-height: 1.6; letter-spacing: 0.1em; padding: 8px; margin-bottom: 2.4rem; }
.compact-cont .cont-body .midashi-sub .em { font-size: 120%; font-weight: 600; color: #7c5271; }
.compact-cont .cont-body .p-cont { margin: 4.8rem auto 0; }
.compact-cont .cont-body .result { margin-top: 4.8rem; padding: 0 16px; text-align: center; border: thin solid #7c5271; border-width: 0 1px 0 1px; }
.compact-cont .cont-body .result .lead { font-size: 2rem; line-height: 2; }
.compact-cont .cont-body .result .lead .em { display: inline-block; font-size: 144%; color: #7c5271; font-weight: 600; line-height: 1.6; }
@media screen and (max-width: 700px) { .compact-cont { padding: 8rem 0 0; }
  .compact-cont .cont-head .point-ttl { font-size: 3rem; }
  .compact-cont .cont-body > .inner { padding-top: 2rem; }
  .compact-cont .cont-body .midashi { font-size: 2.5rem; margin-bottom: 1.5rem; }
  .compact-cont .cont-body .p-cont { margin-top: 2.5rem; }
  .compact-cont .cont-body .result { margin-top: 2.5rem; }
  .compact-cont .cont-body .result .lead .em { line-height: 1.28; margin-top: 4px; } }

@media screen and (max-width: 700px) { .top-main .page-name { width: 100%; background-color: rgba(255, 255, 255, 0.8); padding: 8px; top: auto; bottom: 8%; transform: translateX(-50%); } }

.intro .inner { padding-bottom: 2rem; }
@media screen and (max-width: 700px) { .intro .inner { padding-bottom: 0; }
  .intro .lead.head-lead { text-align: left; } }

.local-nav { padding-top: 6.4rem; }
.local-nav .head { font-family: "cormorant", serif; font-weight: 300; font-style: normal; text-align: center; font-size: 2.4rem; color: #7c5271; line-height: 1.2; margin-bottom: 2.4rem; }
.local-nav .point-menu { margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2px; }
.local-nav .point-menu li a { display: block; padding: 8px; transition: .4s all; position: relative; }
.local-nav .point-menu li a::before { position: absolute; content: ''; width: 12px; height: 12px; right: 12px; top: 50%; translate: 0 -50%; border: 1px solid #666; border-width: 0 1px 1px 0; rotate: 45deg; }
.local-nav .point-menu li a:hover { filter: brightness(106%); }
.local-nav .point-menu li.p01 a { background-color: #d5cabe; }
.local-nav .point-menu li.p02 a { background-color: #fddf9e; }
.local-nav .point-menu li.p03 a { background-color: #f9ccc3; }
.local-nav .point-menu li.p04 a { background-color: #bcd5b9; }
@media screen and (max-width: 1024px) { .local-nav .point-menu li a::before { width: 10px; height: 10px; right: 10px; } }
@media screen and (max-width: 834px) { .local-nav .point-menu li a::before { width: 8px; height: 8px; right: 8px; } }
@media screen and (max-width: 700px) { .local-nav .point-menu { grid-template-columns: repeat(2, 1fr); } }

#Point01 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #f3f0ec 50%, #f3f0ec 100%); }
#Point01 .cont-head .point-ttl { background-color: #d5cabe; }
#Point01 .cont-body { background-color: #f3f0ec; }
#Point01 .cont-body .midashi-sub { background-color: #d5cabe; }
#Point01 .cont-body .cont1 { max-width: 860px; }
@media screen and (max-width: 700px) { #Point01 .cont1 .fig .js-scrollable > img { height: 240px; } }

#Point02 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #fff8e9 50%, #fff8e9 100%); }
#Point02 .cont-head .point-ttl { background-color: #fddf9e; }
#Point02 .cont-body { background-color: #fff8e9; }
#Point02 .cont-body .midashi-sub { background-color: #fddf9e; }
#Point02 .cont-body .cont1 .simulation { margin-top: 4rem; }
#Point02 .cont-body .cont1 .simulation .sim-head { padding: 8px; text-align: center; }
#Point02 .cont-body .cont1 .simulation .sim-head p { font-size: 2rem; text-align: center; line-height: 1.28; }
#Point02 .cont-body .cont1 .simulation .sim-body { padding: 2.4rem; background-color: #fff; border: thin solid; }
#Point02 .cont-body .cont1 .simulation .sim-body .prerequisites { display: flex; justify-content: space-between; align-items: stretch; }
#Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li { width: 40%; background-color: #eae2e7; padding: 6px; }
#Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li p { font-size: 2rem; text-align: center; line-height: 1.2; }
#Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li p .digit { font-size: 144%; margin: 0 4px; }
#Point02 .cont-body .cont1 .simulation .sim-body .fig { padding: 4rem 0 0; display: grid; grid-template-columns: 7fr 2fr; grid-column-gap: 4%; align-items: center; }
#Point02 .cont-body .cont1 .sim1 .sim-head { background-color: #f4e3a4; }
#Point02 .cont-body .cont1 .sim1 .sim-body { border-color: #f4e3a4; }
#Point02 .cont-body .cont1 .sim2 .sim-head { background-color: #f3e8c5; }
#Point02 .cont-body .cont1 .sim2 .sim-body { border-color: #f3e8c5; }
#Point02 .cont-body .cont1 .result .lead .em { margin-left: 4px; margin-right: 4px; }
#Point02 .cont-body .cont2 { background-color: #fff; padding: 3.2rem; }
#Point02 .cont-body .cont2 > .lead .em { font-weight: 600; color: #7c5271; background-color: #fff8e9; padding: 2px; margin: 0 2px; }
#Point02 .cont-body .cont2 .item-list { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2.4rem; }
#Point02 .cont-body .cont2 .item-list .item-box { background-color: #feefd0; background-color: #eae2e7; padding: 2rem; display: grid; grid-template-rows: subgrid; grid-row: span 2; grid-row-gap: 0; }
#Point02 .cont-body .cont2 .item-list .item-name { font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; color: #7c5271; font-size: 1.8rem; font-weight: bold; text-align: center; line-height: 1.44; margin-bottom: 12px; }
#Point02 .cont-body .cont2 .item-list .lead { font-size: 1.3rem; line-height: 1.6; }
@media screen and (max-width: 700px) { #Point02 .cont-body .cont1 .simulation { margin-top: 4rem; }
  #Point02 .cont-body .cont1 .simulation .sim-head { padding: 8px; text-align: center; }
  #Point02 .cont-body .cont1 .simulation .sim-head p { font-size: 2rem; text-align: center; line-height: 1.28; }
  #Point02 .cont-body .cont1 .simulation .sim-body .prerequisites { display: block; }
  #Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li { width: 100%; }
  #Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li + li { margin-top: 8px; }
  #Point02 .cont-body .cont1 .simulation .sim-body .prerequisites li p { font-size: 2.5rem; }
  #Point02 .cont-body .cont1 .simulation .sim-body .fig { display: block; }
  #Point02 .cont-body .cont1 .simulation .sim-body .fig .fig1 .js-scrollable > img { height: 240px; }
  #Point02 .cont-body .cont1 .simulation .sim-body .fig .fig2 { width: 80%; margin: 16px auto 0; }
  #Point02 .cont-body .cont2 { margin-top: 4rem; }
  #Point02 .cont-body .cont2 .item-list { grid-template-columns: repeat(2, 1fr); grid-column-gap: 1rem; }
  #Point02 .cont-body .cont2 .item-list .item-box { padding: 1.5rem; }
  #Point02 .cont-body .cont2 .item-list .item-box:first-of-type { grid-column: span 2; }
  #Point02 .cont-body .cont2 .item-list .item-name { font-size: 1.75rem; margin-bottom: 4px; } }

#Point03 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #fef3f1 50%, #fef3f1 100%); }
#Point03 .cont-head .point-ttl { background-color: #f9ccc3; }
#Point03 .cont-body { background-color: #fef3f1; }
#Point03 .cont-body .midashi-sub { background-color: #f9ccc3; }
#Point03 .cont-body .cont1 { max-width: 860px; }
#Point03 .cont-body .case-container .case-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 2.79069767%; }
#Point03 .cont-body .case-container .case-wrap { display: grid; grid-template-rows: subgrid; grid-row: span 6; grid-row-gap: 0; }
#Point03 .cont-body .case-container .bubble { background-color: #fff; padding-bottom: 8px; border-bottom: thin solid #d8bcd1; text-align: center; line-height: 1.44; position: relative; }
#Point03 .cont-body .case-container .bubble::before, #Point03 .cont-body .case-container .bubble::after { content: ""; display: block; aspect-ratio: 1/1; clip-path: polygon(0 0, 100% 0, 50% 100%); position: absolute; }
#Point03 .cont-body .case-container .bubble::before { width: 1.2rem; background-color: #d8bcd1; right: 2rem; bottom: -1.2rem; z-index: 2; }
#Point03 .cont-body .case-container .bubble::after { width: 0.9rem; background-color: #fff; right: 2.15rem; bottom: -0.9rem; z-index: 3; }
#Point03 .cont-body .case-container .bubble .en { color: #7c5271; font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 2rem; }
#Point03 .cont-body .case-container .bubble .en .digit { font-family: "joly-headline", serif; font-weight: 400; font-style: normal; font-size: 104%; margin-left: 4px; }
#Point03 .cont-body .case-container .bubble .ja { font-size: 2rem; }
#Point03 .cont-body .case-container .case-title { background-color: #f9d0c3; padding: 2px 8px 8px; text-align: center; }
#Point03 .cont-body .case-container .case-title .text { font-size: 2rem; font-weight: 600; line-height: 1.28; color: #7c5271; }
#Point03 .cont-body .case-container .case-title .text .note { color: #000; }
#Point03 .cont-body .case-container .case-title.title2 { margin-top: -0.8rem; background-color: #7c5271; }
#Point03 .cont-body .case-container .case-title.title2 .text { color: #fff; }
#Point03 .cont-body .case-container .case-title.title2 .text .note { color: #fff; }
#Point03 .cont-body .case-container .arrow { width: 3.2rem; height: calc(3.2rem / 2); clip-path: polygon(0 0, 100% 0, 50% 100%); margin: 0.8rem auto 0; }
#Point03 .cont-body .case-container .arrow.arrow1 { background-color: #7c5271; }
#Point03 .cont-body .case-container .arrow.arrow2 { background-color: #7c5271; }
#Point03 .cont-body .case-container .result { border: none; margin-top: auto; }
#Point03 .cont-body .case-container .result .case-title { padding-top: 8px; background-color: #fff; }
#Point03 .cont-body .case-container .result .case-title .text { color: #7c5271; }
#Point03 .cont-body .case-container .result .case-title .text .note { color: #000; }
#Point03 .cont-body .case-container .icon-or { width: 16%; max-width: 64px; aspect-ratio: 1/1; border-radius: 50vh; background-color: #7c5271; display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
#Point03 .cont-body .case-container .icon-or .en { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 4rem; text-align: center; line-height: 1.2; color: #fff; }
#Point03 .cont-body .case-container .result-container { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 4rem; position: relative; }
#Point03 .cont-body .case-container .result-container .icon-or { width: 32%; max-width: 80px; }
#Point03 .cont-body .case-container .result-container .icon-or .en { font-size: min(5.5vw, 6.4rem); }
#Point03 .cont-body .link-btn-container { padding-top: 4rem; }
#Point03 .cont-body .link-btn-container .btn { width: 100%; max-width: 360px; margin: 8px auto 0; }
#Point03 .cont-body .link-btn-container .btn a { display: block; width: 100%; padding: 12px 8px 10px; text-align: center; line-height: 1.28; background: linear-gradient(90deg, #7c5271 0%, #7c5271 56%, #d8bcd1 100%); border: thin solid #d8bcd1; transition: .4s all; position: relative; }
#Point03 .cont-body .link-btn-container .btn a::before { content: ""; display: block; width: 1.2rem; aspect-ratio: 1/1; border: thin solid #fff; border-width: 1px 1px 0 0; position: absolute; right: 2rem; top: 45%; transform: rotate(45deg) translateY(-50%); }
#Point03 .cont-body .link-btn-container .btn a .en { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 2.4rem; color: #fff; }
#Point03 .cont-body .link-btn-container .btn a:hover { background: linear-gradient(90deg, #7c5271 0%, #7c5271 100%); }
@media screen and (max-width: 700px) { #Point03 .cont-body .case-container .case-list { grid-template-columns: 1fr; }
  #Point03 .cont-body .case-container .bubble::before { width: 24px; bottom: -24px; }
  #Point03 .cont-body .case-container .bubble::after { width: 21px; bottom: -20.5px; }
  #Point03 .cont-body .case-container .bubble .en { font-size: 2.5rem; }
  #Point03 .cont-body .case-container .bubble .ja { font-size: 2.5rem; }
  #Point03 .cont-body .case-container .case-title .text { font-size: 2.5rem; }
  #Point03 .cont-body .case-container .case-title .text .note { font-size: 14px; }
  #Point03 .cont-body .case-container .case-title.title2 { margin-top: 0; }
  #Point03 .cont-body .case-container .arrow { width: 40px; height: calc(40px / 2); }
  #Point03 .cont-body .case-container .sp { margin-top: 4.5rem; }
  #Point03 .cont-body .case-container .sp .result { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; }
  #Point03 .cont-body .case-container .sp .result .image { grid-column: span 2; position: relative; }
  #Point03 .cont-body .case-container .sp .result .image .img .note:first-of-type { right: auto; left: 6px; }
  #Point03 .cont-body .case-container .sp .result .image .icon-or .en { font-size: min(11vw, 6.4rem); }
  #Point03 .cont-body .case-container .sp .result .case-title { border-right: thin solid #ccc; }
  #Point03 .cont-body .case-container .sp .result .case-title:last-of-type { border-right: none; }
  #Point03 .cont-body .link-btn-container .lead { line-height: 1.6; }
  #Point03 .cont-body .link-btn-container .btn a::before { width: 12px; }
  #Point03 .cont-body .link-btn-container .btn a .en { font-size: 3rem; } }

#Point04 .cont-head { background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #eaf2e9 50%, #eaf2e9 100%); }
#Point04 .cont-head .point-ttl { background-color: #bcd5b9; }
#Point04 .cont-body { background-color: #eaf2e9; }
#Point04 .cont-body .midashi-sub { background-color: #bcd5b9; }
#Point04 .item-list-wrap { background-color: #fff; }
#Point04 .category-ttl { padding: 6px 12px; background-color: #bcd5b9; display: flex; justify-content: space-between; align-items: center; }
#Point04 .category-ttl p { line-height: 1.2; }
#Point04 .category-ttl p.en { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 2.4rem; text-align: left; }
#Point04 .category-ttl p.ja { font-size: 1.4rem; text-align: right; }
#Point04 .item-list { padding: 2.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2rem 3.63636364%; }
#Point04 .item-list .item-list { padding: 0; }
#Point04 .item-list .item-box { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; }
#Point04 .item-list .span2 { grid-column: span 2; }
#Point04 .item-list .span3 { grid-column: span 3; }
#Point04 .item-list .span4 { grid-column: span 4; }
#Point04 .item-list .item-name { font-size: 1.5rem; text-align: left; line-height: 1.28; padding-top: 8px; }
#Point04 .item-list .item-name.name-l { padding: 4px; border: thin solid #7c5271; text-align: center; color: #7c5271; margin-bottom: 1.6rem; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1.7rem; }
#Point04 .item-list .text { padding-top: 6px; margin-top: 4px; border-top: thin dashed #808080; }
#Point04 .item-list .lead { font-size: 1.3rem; line-height: 1.6; }
#Point04 .item-list .kv { align-self: stretch; }
#Point04 .item-list .kv .img { height: 100%; }
#Point04 .item-list .kv .img img { height: 100%; object-fit: cover; }
#Point04 .item-list .kv .img .note.en { font-family: "cormorant", serif; font-weight: 300; font-style: normal; font-size: 2rem; bottom: 0.4rem; }
#Point04 #Kitchen .kv { grid-row: span 6; }
#Point04 #Kitchen #stove { grid-row: span 2; grid-column-start: 3; grid-column-end: 5; }
#Point04 #Powderroom .kv { grid-row: span 5; grid-column-start: 3; grid-column-end: 5; }
#Point04 #Powderroom #three-sided-mirror { grid-row-start: 1; }
#Point04 #Powderroom #three-sided-mirror .item-list { grid-template-columns: auto 46.24505929%; }
#Point04 #Powderroom #three-sided-mirror .item-list > .image { grid-row: span 3; }
#Point04 #Security #tebra-key .item-list .fig { grid-row: span 3; align-self: center; }
#Point04 #Security #tebra-key .item-list .fig .logo { width: 16%; max-width: 72px; aspect-ratio: 1/1; position: absolute; right: 0; top: 0; }
#Point04 #Security #tebra-key .item-list .item-box .text { display: flex; flex-flow: column-reverse; }
#Point04 #Security #tebra-key .item-list .item-box .text .image { margin-top: 1.2rem; }
#Point04 #Security #postaku .overview { align-self: center; }
#Point04 #Security #postaku .overview .item-name { text-align: center; }
#Point04 #Security #postaku .overview .item-name img { max-width: 160px; }
#Point04 #Security #postaku .overview .text { margin-top: 8px; display: flex; flex-flow: column-reverse; }
#Point04 #Security #postaku .overview .text .image { margin-top: 12px; }
#Point04 #Security #postaku .about-postaku .copy { font-size: 1.6rem; text-align: center; line-height: 1.44; }
#Point04 #Security #postaku .about-postaku .block { margin-top: 0.8rem; display: grid; grid-template-columns: 24% 20% 56%; gap: 0; align-items: stretch; }
#Point04 #Security #postaku .about-postaku .block .item-name, #Point04 #Security #postaku .about-postaku .block .text { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#Point04 #Security #postaku .about-postaku .block .item-name { background-color: #7c5271; color: #fff; text-align: center; padding: 8px; }
#Point04 #Security #postaku .about-postaku .block .image { height: 100%; }
#Point04 #Security #postaku .about-postaku .block .image .img { height: 100%; }
#Point04 #Security #postaku .about-postaku .block .image .img img { height: 100%; object-fit: cover; }
#Point04 #Security #postaku .about-postaku .block .text { border: thin solid #ccc; border-left: none; margin-top: 0; padding: 8px 2.4rem; }
#Point04 #Security #postaku .about-postaku .block .text .copy { padding-bottom: 2px; margin-bottom: 4px; border-bottom: thin dashed #808080; }
@media screen and (max-width: 700px) { #Point04 .item-list { grid-template-columns: repeat(2, 1fr); grid-column-gap: 5%; }
  #Point04 .item-list .span3, #Point04 .item-list .span4 { grid-column: span 2; }
  #Point04 .item-list .item-name { font-size: 14px; }
  #Point04 .item-list .lead { font-size: 13px; line-height: 1.44; }
  #Point04 .item-list .kv { display: block !important; grid-column: span 2 !important; grid-row: span 1 !important; max-height: 400px; }
  #Point04 #Kitchen #stove { grid-column-start: 1; grid-column-end: 3; }
  #Point04 #Powderroom #three-sided-mirror { grid-row-start: 2; }
  #Point04 #Security #tebra-key .item-list { grid-row-gap: 1rem; }
  #Point04 #Security #tebra-key .item-list .fig { grid-row: span 1; padding-top: 1.6rem; }
  #Point04 #Security #tebra-key .item-list .fig .js-scrollable > img { height: 256px; }
  #Point04 #Security #tebra-key .item-list .fig .logo { width: 18%; right: auto; left: 0; }
  #Point04 #Security #tebra-key .item-list .item-box { grid-column: span 2; }
  #Point04 #Security #tebra-key .item-list .item-box .text { display: block; }
  #Point04 #Security #tebra-key .item-list .item-box .text .image { float: right; margin-left: 4px; margin-bottom: 3px; margin-top: 0; width: 40%; }
  #Point04 #Security #postaku .overview { grid-column: span 2; }
  #Point04 #Security #postaku .overview .item-name img { width: 40%; }
  #Point04 #Security #postaku .overview .text { margin-top: 8px; display: block; }
  #Point04 #Security #postaku .overview .text .image { float: right; margin: 4px 0 3px 6px; width: 40%; }
  #Point04 #Security #postaku .about-postaku .copy { font-size: 2rem; }
  #Point04 #Security #postaku .about-postaku .block { grid-template-columns: 32% 68%; }
  #Point04 #Security #postaku .about-postaku .block .item-name { display: block; grid-column: span 2; }
  #Point04 #Security #postaku .about-postaku .block .text { border-top: none; }
  #Point04 #Security #postaku .about-postaku .block .text .copy { font-size: 14px; } }