@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; } }

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

.brSp { display: none; }

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

#pageWrap { text-align: left; padding: 0; }
#pageWrap img { width: 100%; }
#pageWrap a { transition: 0.3s; }

#titWrap { background-color: rgba(126, 171, 220, 0.5); padding: 5% 0 8%; }

#titWrap #titBox { width: 90%; }

.boxWidth { container-type: inline-size; }

.pageNav { background-color: #f6f8fa; padding: 1.2em 0; }

.pageNav a { width: calc(100% / 3); display: flex; justify-content: center; align-items: center; text-align: center; border-left: #6fa5e9 solid 1px; border-right: #6fa5e9 solid 1px; color: #000; height: 3em; line-height: 1.3; position: relative; font-size: 13px; font-size: 1.7cqw; font-size: clamp(13px, 1.7cqw, 16px); }

.pageNav a:nth-child(2) { border: none; }

.pageNav a:hover, .page01 .pageNav a:nth-child(1), .page02 .pageNav a:nth-child(2), .page03 .pageNav a:nth-child(3) { background-color: #4b90ca; color: #fff; }

.uLine.active { background-size: 100% .8em; }

.uLine { background: #fff06e; background: linear-gradient(180deg, rgba(255, 240, 110, 0) 0%, #fff06e 20%, rgba(255, 240, 110, 0) 100%); background-repeat: no-repeat; background-size: 0% .8em; background-position: 0 1em; transition: all 1.5s ease 1s; font-weight: 700; background-position: 0 .8em; }

#secNext .btNext { display: flex; justify-content: center; align-items: center; padding: 30px 0; }

#secNext .btNext p { font-size: 21px; font-size: 1.7cqw; font-size: clamp(13px, 2.8cqw, 21px); padding-right: 2em; }

#secNext .btNext a { padding: 0; width: 190px; position: relative; text-align: center; }

#secNext .btNext a img { width: 50%; }

#secNext .btNext a::before, #secNext .btNext a::after { content: ""; position: absolute; left: 0; width: 18px; height: 100%; background-image: url("../../images/jukatsu/kakko.svg"); background-position: center center; background-size: 100%; background-repeat: no-repeat; transform: translateX(80%); transition: 0.3s ease-out; }

#secNext .btNext a::after { background-image: url("../../images/jukatsu/kakkoR.svg"); left: auto; right: 0; transform: translateX(-80%); }

#secNext .btNext a:hover { opacity: 1; filter: hue-rotate(62deg) drop-shadow(0px 2px 4px rgba(0, 97, 216, 0.6)); transform: scale(1.1); }

#secNext .btNext a:hover::before, #secNext .btNext a:hover::after { transform: translateX(0%) scaleY(1.5); }

.pointBox { padding: 3%; }

.pointBox .point { width: 20%; margin: 0 auto; max-width: 90px; }

.pointBox h3 { font-size: 32px; font-size: 3cqw; color: #4b90ca; text-align: center; padding: 1em 0; }

.boxWrap { width: calc(96% - 10px); border: #777 solid 1px; padding: 3%; background-color: #fff; position: relative; margin-bottom: 5%; }

.boxWrap::after { content: ""; position: absolute; width: 100%; height: 100%; top: 10px; left: 10px; border: #777 solid 1px; z-index: -1; }

.boxWrap .dlWrap { max-width: 1000px; margin: 0 auto; }

dd { font-size: 16px; font-size: 1.8cqw; font-size: clamp(14px, 1.8cqw, 20px); line-height: 2; padding: 2em 0; }

.boxWrap .dotBox { width: 100%; background-image: url("../../images/jukatsu/bg-dot.png"); background-size: cover; height: auto; padding: 20px 0; margin-top: 30px; }

.boxWrap .dotBox h4 { font-size: 24px; font-size: 2.8cqw; line-height: 1.3; text-align: center; }

@media screen and (max-width: 599px) { .pageNav a { width: 100%; color: #000; height: 3.8em; border: none; font-size: clamp(14px, 4cqw, 16px); }
  .pageNav a::after { content: "＞"; position: absolute; right: 3%; }
  .pageNav a:nth-child(2) { border-top: #6fa5e9 solid 1px; border-bottom: #6fa5e9 solid 1px; }
  .pointBox .point { width: 30%; }
  .pointBox h3 { font-size: 18px; font-size: 6.4cqw; }
  .boxWrap { margin-bottom: 30px; }
  .boxWrap .dotBox h4 { font-size: 18px; font-size: 5.8cqw; }
  #secNext .btNext { display: block; justify-content: center; align-items: center; padding: 30px 0; }
  #secNext .btNext p { text-align: center; font-size: clamp(13px, 3.8cqw, 24px); font-size: 4.8cqw; padding-right: 0em; }
  #secNext .btNext a { padding: 0; display: block; width: 190px; margin: 20px auto 0; position: relative; text-align: center; }
  #secNext .btNext a img { width: 40%; }
  dd { width: 95%; text-align: justify; margin-left: auto; margin-right: auto; }
  .boxWrap .dotBox { margin-top: 0px; } }
/*===========page01=========*/
.page01 .sec { padding: 3% 0; }

.page01 .sec h3 { /*font-size: 40px;
font-size: 3vw;*/ line-height: 1.4; letter-spacing: 0.05em; text-align: center; position: relative; padding: 0.5em 0; margin-bottom: 5%; font-size: 3.2cqw; }

.page01 .sec h3 .txtL { font-size: 140%; }

.page01 .sec h3::after { content: "　"; position: absolute; width: 3em; height: 2px; background-color: #4b90ca; left: 50%; bottom: 0; transform: translateX(-50%); }

.page01 .sec .flex { flex-direction: row-reverse; align-items: center; }

.page01 .sec .flex dl { width: 62%; }

.page01 .sec .flex dt { font-size: 32px; font-size: 2.4cqw; font-size: clamp(18px, 2.4cqw, 32px); color: #4b90ca; padding-bottom: 1em; }

.page01 .sec .flex dd { font-size: 16px; font-size: 1.5cqw; font-size: clamp(15px, 1.5cqw, 20px); line-height: 2; text-align: justify; }

.page01 .sec .flex .imgBox { width: 35%; }

@media screen and (max-width: 959px) { .page01 .sec h3 { /*font-size: 40px;
font-size: 3vw;*/ line-height: 1.4; letter-spacing: 0.05em; text-align: center; position: relative; padding: 0.5em 0; margin-bottom: 5%; font-size: 4.0cqw; }
  .page01 .sec h3 .txtL { font-size: 140%; }
  .page01 .sec .flex dl { width: 90%; margin: 0 auto; }
  .page01 .sec .flex dt { text-align: center; }
  .page01 .sec .flex .imgBox { width: 80%; max-width: 300px; margin: 0 auto 20px; } }
@media screen and (max-width: 599px) { .page01 .sec h3 { font-size: 5.8cqw; }
  .brSp { display: inline; }
  .page01 .sec .flex dt { font-size: 16px; font-size: clamp(17px, 5cqw, 21px); }
  .page01 .sec .flex dd { font-size: 13px; font-size: clamp(14px, 4.4cqw, 16px); } }
/*===========page02=========*/
.page02 #sec02 .dlWrap dl { width: 64%; }

.page02 #sec02 .dlWrap .imgBox { width: 33%; }

.page02 #sec03 .imgWrap .img01 { width: 42%; }

.page02 #sec03 .imgWrap .img02 { width: 57%; }

@media screen and (max-width: 959px) { .page02 #sec02 .dlWrap dl { width: 100%; margin: 0 auto; }
  .page02 #sec02 .dlWrap .imgBox { width: 80%; max-width: 300px; margin: 0 auto 20px; }
  .page02 #sec03 .imgWrap { display: block; }
  .page02 #sec03 .imgWrap .img01 { width: 100%; max-width: 380px; margin: 0 auto 20px; }
  .page02 #sec03 .imgWrap .img02 { width: 100%; max-width: 500px; margin: 0 auto 20px; } }
/*===========page03=========*/
.page03 #sec01 .dlWrap dl { width: 64%; }

.page03 #sec01 .dlWrap .imgBox { width: 33%; }

.page03 #sec05 .logo01 { width: 40%; }

.page03 #sec05 .logo02 { width: 50%; }

@media screen and (max-width: 959px) { .page03 #sec01 .dlWrap dl { width: 100%; }
  .page03 #sec01 .dlWrap .imgBox { width: 80%; max-width: 300px; margin: 0 auto 20px; } }
@media screen and (max-width: 599px) { .page03 #sec05 { display: block; }
  .page03 #sec05 .logo01 { width: 70%; max-width: 260px; margin: 10px auto; }
  .page03 #sec05 .logo02 { width: 86%; max-width: 320px; margin: 10px auto; } }