@charset "UTF-8";
.container { width: 1100px; margin: 0 auto; }
@media (max-width: 1200px) { .container { width: 100%; padding: 0px 20px; } }

.narrow { width: 770px; margin: 0 auto; }
@media (max-width: 770px) { .narrow { width: 100%; padding: 0px 20px; } }

.pc-only { display: block; }
@media screen and (max-width: 768px) { .pc-only { display: none; } }

.sp-only { display: none; }
@media screen and (max-width: 768px) { .sp-only { display: block; } }

article#page { font-family: "Noto Serif JP", serif; }
article#page .ttl { background: #010002; padding: 2.5rem 0; color: #fff; position: relative; margin-top: 5px; }
article#page .ttl h2 { font-family: "Gilda Display", serif; font-size: 2.4rem; line-height: 1.1; letter-spacing: 0.3rem; }
article#page .ttl h2 span { font-family: "Noto Serif JP", serif; display: block; font-size: 1.2rem; letter-spacing: 0rem; }
article#page .ttl::after { content: ''; border: none; height: calc(100% + 10px); width: 100%; display: inline-block; position: absolute; background: linear-gradient(90deg, #797979 0%, #fff 54%, #c2c2c2 83%, #797979 100%); top: -5px; left: 0; bottom: auto; z-index: -1; }
@media screen and (max-width: 559px) { article#page .ttl h2 { font-size: 2rem; }
  article#page .ttl h2 span { font-size: 1rem; } }

.arrow { position: relative; display: inline-block; padding: 0 0 0 16px; vertical-align: middle; text-decoration: none; font-size: 1rem; }
.arrow::after { position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle; right: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

a.btn { color: #fff; background: #797979; padding: 0.5rem 0; }
a.btn:hover { filter: brightness(1.7); text-decoration: none; transition: 0.3s; }
a.btn.coming { background: #555; color: #ccc; }
a.btn.coming:hover { filter: none; text-decoration: none; }
a.btn.back.arrow::after { right: auto; left: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(225deg); }
a.btn.black { background: #010002; }

#access, #limited, #alphapoint, #view, #limited-login, #concept-design, #outline, #company, #roomplan { padding: 6rem 0; }
@media screen and (max-width: 559px) { #access, #limited, #alphapoint, #view, #limited-login, #concept-design, #outline, #company, #roomplan { padding: 4rem 0; } }

#pageWrap { padding: 60px 0 0; font-family: 'YakuHanMP','Noto Serif JP', serif; }

#pageWrap h2, #pageWrap h3, #pageWrap h4, #pageWrap h5 { font-weight: normal; }

#pageWrap a { transition: 0.3s; }

#pageWrap img { width: 100%; }

#pageWrap a:hover { opacity: 0.6; text-decoration: none; }

.flex-container { display: flex; flex-wrap: wrap; justify-content: space-between; }

.wrapWidth { width: 100%; margin: 0 auto; }

.boxWidth { width: 96%; max-width: 1200px; margin: 0 auto; }

.brSp { display: none; }

#contents-wrap *, #contents-wrap *::after, #contents-wrap *::before { box-sizing: border-box; }

.imgBox { position: relative; }

/*ここから*/
.capImg::after { content: 'image'; position: absolute; font-size: 10px; text-align: right; right: 0.5em; bottom: 0.1em; color: #fff; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 1px 1px 0px rgba(0, 0, 0, 0.5), -1px 1px 0px rgba(0, 0, 0, 0.5), -1px -1px 0px rgba(0, 0, 0, 0.5), 1px -1px 0px rgba(0, 0, 0, 0.5); }

/*ここまで*/
.capdata::after { content: attr(data-caption); }

.capBk::after { color: #000; text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5), 1px 1px 0px rgba(255, 255, 255, 0.5), -1px 1px 0px rgba(255, 255, 255, 0.5), -1px -1px 0px rgba(255, 255, 255, 0.5), 1px -1px 0px rgba(255, 255, 255, 0.5); }

@media screen and (max-width: 1000px) { #pageTit h2 { font-size: 2.7vw; font-size: clamp(20px, 2.7vw, 22px); }
  #pageWrap { padding: 30px 0 0; } }
@media screen and (max-width: 559px) { #pageTit h2 { font-size: 4.8vw; font-size: clamp(17px, 4.8vw, 19px); }
  .brSp { display: inline; } }
#pageWrap { font-family: 'Noto Sans JP', sans-serif; padding: 0; }

/* ここから--*/
.imgBox.capImg::after { content: "image photo"; color: #000; text-shadow: none; }

/*ここまで--*/
#secMain #h2Box { position: absolute; width: 50%; left: 45%; top: 50%; transform: translateY(-50%); }

.iconBox { width: 25%; max-width: 100px; margin: 0 auto; }

.boxWidth { container-type: inline-size; max-width: 1100px; }

#sec01 { background-color: #f5eeee; padding: 5% 0 3%; position: relative; }

#sec01 .titBox h3 { margin: 50px auto; font-size: 4.5cqw; letter-spacing: 0.1em; color: #711b46; }

#sec01 .titBox p.lead { font-size: 2.2cqw; text-align: center; padding-bottom: 2em; }

#sec01 .flex01 > div { width: 48%; align-items: flex-end; }

#sec01 .flex01 > div .imgBox { width: 46%; }

#sec01 .flex01 > div .txtBox { width: 50%; position: relative; }

#sec01 .flex01 > div .txtBox .icoBox { position: absolute; width: 80%; bottom: 100%; left: 10%; }

#sec01 .flex01 > div dt { text-align: center; padding: 0.5em 0; font-size: 2.8cqw; font-weight: 500; }

#sec01 .flex01 > div dd { width: 100%; font-size: 15px; font-size: 1.4cqw; text-align: justify; }

#sec01 .cases { padding: 5% 0; }

#sec01 .cases .flex-container { padding: 3% 0; align-items: center; }

#sec01 .cases h3 { text-align: left; color: #fff; font-size: 2.8cqw; }

#sec01 .cases h3 span { /*	background: #711B46;
background: linear-gradient(0deg, rgba(113, 27, 70, 0) 10%, rgba(113, 27, 70, 1) 10%, rgba(113, 27, 70, 1) 90%, rgba(113, 27, 70, 0) 90%);
	display: inline-block;
	padding: 0em 1em;
	background-size: 0% .8em;
	transition: 0.8s ease;*/ position: relative; z-index: 1; padding: 0 0.5em; }

#sec01 .cases h3 span::after { content: ""; z-index: -1; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #711B46; }

#sec01 .cases h3 span.active::after { width: 100%; transition: 0.6s ease-out; }

#sec01 .cases .flex03 h3 span::after, #sec01 .cases .flex04 h3 span::after { background: #0E2847; }

#sec01 .cases .flex02, #sec01 .cases .flex04 { flex-direction: row-reverse; }

#sec01 .cases dl { padding: 15px; }

#sec01 .cases dt { font-size: 2cqw; font-weight: 500; text-align: left; }

#sec01 .cases dd { font-size: 18px; font-size: 1.7cqw; text-align: justify; padding-top: 1em; }

#sec01 .cases dd .caption { font-size: 12px; }

#sec01 .cases .flex02 .imgBox { width: 47.3%; max-width: 510px; }

#sec01 .cases .flex02 .txtBox { width: 50%; }

#sec01 .cases .flex03 .imgBox { width: 39.1%; max-width: 430px; }

#sec01 .cases .flex03 .txtBox { width: 57%; }

#sec01 .cases .flex04 .imgBox { width: 49.1%; max-width: 540px; }

#sec01 .cases .flex04 .txtBox { width: 47%; }

#sec02, #sec03, #sec04 { background-color: #edf1f9; padding: 180px 0 5% 0; }

#sec02 .whBox, #sec03 .whBox, #sec04 .whBox { background-color: #fff; padding: 120px 50px; position: relative; }

#sec02 .whBox::before, #sec02 .whBox::after, #sec03 .whBox::before, #sec03 .whBox::after, #sec04 .whBox::before, #sec04 .whBox::after { content: ""; position: absolute; width: calc(100% + 40px); height: 8px; left: -20px; bottom: 100%; border-top: #000 solid 1px; border-bottom: #000 solid 1px; }

#sec02 .whBox::after, #sec03 .whBox::after, #sec04 .whBox::after { bottom: auto; top: 100%; }

#sec02 .whBox .icoNum, #sec03 .whBox .icoNum, #sec04 .whBox .icoNum { position: absolute; width: 80px; left: calc(50% - 40px); top: -30px; }

#sec02 .whBox .fig01, #sec03 .whBox .fig01, #sec04 .whBox .fig01 { position: absolute; width: 180px; left: 10%; top: -70px; }

#sec02 .whBox h4, #sec03 .whBox h4, #sec04 .whBox h4 { border: #0e2847 solid 5px; color: #0e2847; background-color: #fff; font-size: 3cqw; padding: 0.8em; position: relative; z-index: 1; line-height: 1.3; }

#sec02 .item01 { padding-top: 5%; flex-direction: row-reverse; max-width: 800px; margin: 0 auto; }

#sec02 .item01 .imgBox { width: 40%; }

#sec02 .item01 dl { width: 56%; }

#sec02 .item01 dt, #sec03 .item01 dt, #sec04 .item01 dt { text-align: left; font-weight: 500; padding-bottom: 1em; font-size: 2.4cqw; }

#sec02 .item01 dd, #sec03 .item01 dd, #sec04 .item01 dd { font-size: 16px; font-size: 1.6cqw; text-align: justify; }

#sec02 .item02, #sec02 .item03 { padding-top: 5%; max-width: 800px; margin: 0 auto; }

#sec02 .item02 h5, #sec02 .item03 h5 { width: 100%; padding: 1em 0; text-align: center; font-size: 2.4cqw; }

#sec02 .item03 { border-left: #0e2847 solid 1px; border-right: #0e2847 solid 1px; padding: 0 3% 3%; margin-top: 100px; position: relative; }

#sec02 .item03::before, #sec02 .item03::after { content: ""; position: absolute; left: 0; top: -20px; width: 100%; height: 5px; background-color: #0e2847; }

#sec02 .item03::after { top: auto; bottom: -20px; }

#sec02 .item04 { max-width: 800px; margin: 0 auto; margin-top: 100px; }

#sec02 .item04 dl { width: 46%; }

#sec02 .item04 dt { text-align: left; font-weight: 500; line-height: 1.2; font-size: 2.4cqw; position: relative; height: 6em; display: flex; justify-content: flex-start; align-items: center; padding-left: 6em; }

#sec02 .item04 dt::before { position: absolute; content: "　"; left: 0; width: 5em; height: 5em; background-image: url("../../images/new_or_used/ico-check.svg"); background-position: left top; background-repeat: no-repeat; background-size: 100%; opacity: 0; transform: scale(2); }

#sec02 .item04 .active dt::before { transition: 0.6s ease-in 0.3s; opacity: 1; transform: scale(1); }

#sec02 .item04 dd { width: 100%; font-size: 16px; font-size: 1.6cqw; text-align: justify; }

#sec02 .ansBox, #sec03 .ansBox { margin-top: 80px; background-color: #fff; padding: 30px; border: #0e2847 solid 5px; position: relative; }

#sec03 .ansBox { border: #711b46 solid 5px; color: #711b46; }

#sec02 .ansBox h3, #sec03 .ansBox h3 { font-size: 2.2cqw; }

#sec02 .ansBox h3 span, #sec03 .ansBox h3 span { font-size: 150%; }

.uLine { font-style: normal; background: #EAD22F; background: linear-gradient(0deg, rgba(234, 210, 47, 0) 10%, #ead22f 10%, #ead22f 30%, rgba(234, 210, 47, 0) 33%); }

#sec02 .ansBox p, #sec03 .ansBox p { font-size: 18px; font-size: 1.8cqw; font-weight: 500; padding-top: 1em; }

#sec02 .ansBox .figBox, #sec03 .ansBox .figBox { position: absolute; width: 15%; bottom: 0; right: 0; }

#sec03, #sec04 { background-color: #f5eeee; }
#sec03 .whBox h4, #sec04 .whBox h4 { border: #711b46 solid 5px; color: #711b46; }

#sec03 .item01 dt, #sec04 .item01 dt { text-align: center; padding-top: 2em; }

#sec03 .item01 dd, #sec04 .item01 dd { font-size: 16px; font-size: 1.6cqw; text-align: center; }

#sec03 .item02, #sec03 .item03, #sec04 .item02, #sec04 .item03 { border-left: #711b46 solid 1px; border-right: #711b46 solid 1px; padding: 0 3% 3%; margin: 0 auto; margin-top: 100px; position: relative; max-width: 900px; }

#sec03 .item02::before, #sec03 .item02::after, #sec03 .item03::before, #sec03 .item03::after, #sec04 .item02::before, #sec04 .item02::after, #sec04 .item03::before, #sec04 .item03::after { content: ""; position: absolute; left: 0; top: -20px; width: 100%; height: 5px; background-color: #711b46; }

#sec03 .item02::after, #sec03 .item03::after, #sec04 .item02::after, #sec04 .item03::after { top: auto; bottom: -20px; }

#sec03 .item02 h5, #sec03 .item03 h5, #sec04 .item02 h5, #sec04 .item03 h5 { width: 100%; padding: 1em 0; text-align: center; font-size: 2.4cqw; color: #711b46; }

#sec03 .item02 p, #sec03 .item03 p, #sec04 .item02 p, #sec04 .item03 p { font-size: 16px; font-size: 1.6cqw; padding-top: 1.5em; color: #711b46; }

#sec03 .item02 h5 span, #sec03 .item03 h5 span, #sec04 .item02 h5 span, #sec04.item03 h5 span { color: #000; }

#sec03 .ansFlex, #sec04 .ansFlex { margin-top: 6%; }

#sec03 .ansFlex > div, #sec04 .ansFlex > div { width: 46%; background-color: #fff; border: #0e2847 solid 5px; padding: 1.5% 3%; position: relative; container-type: inline-size; }

#sec03 .ansFlex > div p, #sec04 .ansFlex > div p { text-align: left; font-size: 5cqw; font-weight: 500; color: #0e2847; }

#sec03 .ansFlex > div p span, #sec04 .ansFlex > div p span { font-size: 140%; }

#sec03 .ansFlex > div .figBox, #sec04 .ansFlex > div .figBox { position: absolute; width: 28%; bottom: -5px; right: 0%; }

#sec03 .ansFlex .rightBox, #sec04 .ansFlex .rightBox { border: #711b46 solid 5px; }

#sec03 .ansFlex .rightBox p, #sec04 .ansFlex .rightBox p { color: #711b46; }

#sec03 .ansFlex .rightBox .figBox, #sec04 .ansFlex .rightBox .figBox { width: 25%; }

#sec03 .result, #sec04 .result { margin-top: 5%; background-image: url("../../images/new_or_used/bg-line.png"); background-position: 0 0; background-size: 3%; padding: 15px; animation-name: bgAni; animation-duration: 20s; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes bgAni { 0% { background-position: 0 0; }
  100% { background-position: 100% 0; } }
#sec03 .result .resBox, #sec04 .result .resBox { background-color: #fff; padding: 0 50px 20px; position: relative; }

#sec03 .result .resBox h4, #sec04 .result .resBox h4 { color: #711b46; font-weight: 500; font-size: 2.8cqw; position: relative; padding: 1em 0; width: 12em; margin: 0 auto; }

#sec03 .result .resBox h4::before, #sec04 .result .resBox h4::before { position: absolute; content: "　"; right: 100%; top: 0.5em; width: 3em; height: 3em; background-image: url(../../images/new_or_used/ico-goal.svg); background-position: left top; background-repeat: no-repeat; background-size: 100%; opacity: 0; transform: scale(3); }

#sec03 .result .resBox h4.active::before, #sec04 .result .resBox h4.active::before { transition: 0.6s ease-in; opacity: 1; transform: scale(1); }

#sec03 .result .resBox p, #sec04 .result .resBox p { font-size: 1.6cqw; text-align: left; padding: 1em; line-height: 2; margin-left: 15%; }

#sec03 .result .resBox p span, #sec04 .result .resBox p span { font-size: 150%; font-weight: 500; color: #711b46; }

#sec03 .result .resBox .figBox, #sec04 .result .resBox .figBox { position: absolute; width: 30%; bottom: 0; right: 8%; }

.h3Box { background-color: #0e2847; padding: 4% 0; }

#h3-02, #h3-03 { background-color: #711b46; }

.h3Box h3 { color: #fff; font-size: 3cqw; line-height: 2; }

.h3Box h3 span { color: #ead22f; }

.f-In { opacity: 0; transform: translateY(50px); }

.f-In.active { transition: 0.6s ease-out; transform: translateY(0px); opacity: 1; }

.kururi { opacity: 0; transform: rotateY(90deg); }

.kururi.active { transition: 0.6s ease-out 0.3s; opacity: 1; transform: rotateY(0deg); }

@media screen and (max-width: 599px) { #sec01 .titBox h3 { margin: 30px auto 15px; font-size: 5.5cqw; }
  #sec01 .titBox p.lead { font-size: 4cqw; text-align: justify; padding: 1em; }
  #sec01 .titBox p.lead br { display: none; }
  #sec01 .flex01 > div { width: 100%; align-items: center; }
  #sec01 .flex01 > div dt { font-size: 4cqw; }
  #sec01 .flex01 > div dd { font-size: 3.8cqw; padding: 0 1em; }
  #sec01 .flex01 > div .txtBox .icoBox { position: static; width: 75%; margin: 20px auto 0; }
  #sec01 .cases .flex02 { /*flex-direction: column-reverse;*/ }
  #sec01 .cases .flex02 .txtBox, #sec01 .cases .flex03 .txtBox, #sec01 .cases .flex04 .txtBox { width: 100%; }
  #sec01 .cases .flex02 .imgBox, #sec01 .cases .flex03 .imgBox, #sec01 .cases .flex04 .imgBox { width: 100%; max-width: 510px; }
  #sec01 .cases h3 { text-align: center; font-size: 5.8cqw; }
  #sec01 .cases dt { font-size: 4.6cqw; text-align: center; }
  #sec01 .cases dd { font-size: 4cqw; text-align: justify; padding-top: 1em; }
  .h3Box h3 { font-size: 4.8cqw; line-height: 2; }
  #sec02 .whBox .fig01, #sec03 .whBox .fig01, #sec04 .whBox .fig01 { position: absolute; width: 36%; left: 30%; top: auto; bottom: 100%; }
  #sec02 .whBox .icoNum, #sec03 .whBox .icoNum, #sec04 .whBox .icoNum { width: 80px; left: calc(50% - 40px); top: -30px; z-index: 2; }
  #sec02 .whBox, #sec03 .whBox, #sec04 .whBox { padding: 90px 20px 30px; }
  #sec02 .whBox h4, #sec03 .whBox h4, #sec04 .whBox h4 { font-size: 5cqw; }
  #sec02 .item01 .imgBox { width: 80%; margin: 20px auto; }
  #sec02 .item01 dl { width: 100%; }
  #sec02 .item01 dt, #sec03 .item01 dt, #sec04 .item01 dt, #sec02 .item02 h5, #sec02 .item03 h5 { text-align: center; font-size: 4.8cqw; }
  #sec02 .item01 dd, #sec03 .item01 dd, #sec04 .item01 dd { font-size: 4cqw; }
  #sec02 .item03, #sec02 .item04 { margin-top: 50px; }
  #sec02 .item04 dl { width: 100%; }
  #sec02 .item04 dt { font-size: 4.8cqw; }
  #sec02 .item04 dd { font-size: 4cqw; }
  #sec02 .ansBox, #sec03 .ansBox { margin-top: 30px; margin-bottom: 50px; padding: 30px 15px; }
  #sec02 .ansBox h3, #sec03 .ansBox h3 { font-size: 4.7cqw; }
  #sec02 .ansBox h3 span, #sec03 .ansBox h3 span { font-size: 140%; }
  .uLine { font-style: normal; background: #EAD22F; background: linear-gradient(0deg, rgba(234, 210, 47, 0) 10%, #ead22f 10%, #ead22f 30%, rgba(234, 210, 47, 0) 33%); }
  #sec02 .ansBox p, #sec03 .ansBox p { text-align: left; font-size: 4cqw; }
  #sec02 .ansBox .figBox, #sec03 .ansBox .figBox { position: absolute; width: 35%; bottom: 0; right: 0; }
  #sec03 .item02 h5, #sec03 .item03 h5, #sec04 .item02 h5, #sec04 .item03 h5 { font-size: 5cqw; }
  #sec03 .item02, #sec03 .item03, #sec04 .item02, #sec04 .item03 { margin-top: 50px; }
  #sec03 .item02 p, #sec03 .item03 p, #sec04 .item02 p, #sec04 .item03 p { font-size: 4cqw; text-align: justify; }
  #sec03 .item02 p br, #sec03 .item03 p br, #sec04 .item02 p br, #sec04 .item03 p br { display: none; }
  #sec03 .ansFlex > div, #sec04 .ansFlex > div { width: 100%; margin-top: 30px; padding: 4% 8%; }
  #sec03 .result, #sec04 .result { margin-top: 50px; background-size: 15%; padding: 15px; margin-bottom: 30px; }
  #sec03 .result .resBox, #sec04 .result .resBox { background-color: #fff; padding: 100px 15px 0px; position: relative; }
  #sec03 .result .resBox h4, #sec04 .result .resBox h4 { font-size: 7cqw; width: 10em; margin: 0 auto; padding: 0; }
  #sec03 .result .resBox h4::before, #sec04 .result .resBox h4::before { position: absolute; content: "　"; right: auto; top: auto; bottom: 110%; left: calc(50% - 2.5em); width: 5em; height: 5em; }
  #sec03 .result .resBox p, #sec04 .result .resBox p { font-size: 4cqw; text-align: center; padding: 1em; line-height: 2; margin-left: 0; }
  #sec03 .result .resBox p span, #sec04 .result .resBox p span { font-size: 150%; font-weight: 500; color: #711b46; }
  #sec03 .result .resBox .figBox, #sec04 .result .resBox .figBox { position: static; width: 80%; margin-left: 10%; } }