@import url("https://use.typekit.net/dfq1lzd.css");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
.qua {
  font-family: "quayside", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body, header, div, applet, object, iframe, input[type=file], h1, h2, h3, h4, h5, h6, p, select, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-family: "Zen Kaku Gothic New", sans-serif !important;
}
body, html {
  overflow-x: hidden;
  background: #f2e5d6 !important;
}
body:after {
  display: none !important;
}
body.fixed {
  position: fixed;
}
#fade {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #f2e5d6 !important;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999 !important; /* #loaderより少ない値を入れて下さい */
}
#fade .opening {
  position: fixed;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  width: 200px;
}
@media only screen and (max-width: 768px) {
  #fade .opening {
    width: 150px;
    left: 47.5%;
  }
}
#progressBarWrap {
  width: 100% !important;
  height: 2px;
  background-color: #FFF;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  max-width: 200px;
}
#progressBar {
  width: 0;
  height: 3px;
  background-color: #a67c52;
  z-index: 99999;
}
#loader {
  width: 23px;
  height: 23px;
  position: fixed;
  _position: absolute; /* IE6対策 */
  top: 50%;
  left: 50%;
  margin-top: -10px; /* heightの半分のマイナス値 */
  margin-left: -10px; /* widthの半分のマイナス値 */
  z-index: 99999999; /* #fadeより多い値を入れて下さい */
}
#progressTxt {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -12px; /* heightの半分のマイナス値 */
  margin-left: -20px; /* widthの半分のマイナス値 */
  z-index: 99999999; /* #fadeより多い値を入れて下さい */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #333;
  display: none;
  letter-spacing: 3px;
  font-style: italic;
}
#main-visual {
  text-align: center;
  min-height: 100vh;
  margin-bottom: 50px;
}
#main-visual p.mv img {
  height: 60vh;
  width: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
@media only screen and (max-width: 768px) {
  #main-visual p.mv img {
    height: 50vh;
    object-position: center bottom;
  }
}
#main-visual .pics {
  margin: -200px auto 280px auto;
  max-width: 940px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  #main-visual .pics {
    margin: -70px auto 120px auto;
  }
}
#main-visual .pics img {
  width: 100%;
}
#main-visual .pics .kv1 {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(50px);
  transition: all .5s ease-in-out;
}
#main-visual .pics .kv2 {
  position: absolute;
  left: 19%;
  top: 50px;
  transition-delay: .75s;
}
#main-visual .pics .kv3 {
  position: absolute;
  left: 39.5%;
  top: 0;
  transition-delay: .5s;
}
#main-visual .pics .kv4 {
  position: absolute;
  left: 61%;
  top: 50px;
  transition-delay: 0.25s;
}
#main-visual .pics .kv5 {
  position: absolute;
  right: 0;
  top: 0;
  transition-delay: 1s;
}
#main-visual .pics p {
  opacity: 0;
  transform: translateY(50px);
  transition: all .5s ease-in-out;
}
@media only screen and (max-width: 768px) {
  #main-visual .pics p {
    width: 20%;
  }
  #main-visual .pics .kv2 {
    top: 95px;
  }
  #main-visual .pics .kv4 {
    top: 20px;
  }
}
#main-visual .pics.finish p {
  transform: translateY(0);
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  #main-visual p:nth-child(2) {
    margin: -70px auto 0 auto;
  }
}
#main-visual h1 {
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}
#main-visual h1 span {
  display: block;
  transition: 2.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(100%);
  transition-delay: 1.5s;
}
#main-visual h1.finish span {
  transform: translateY(0) !important;
}
@media only screen and (max-width: 768px) {
  #main-visual h1 {
    max-width: 200px;
  }
}
#main-visual h1 + p {
  font-size: 24px;
  font-weight: 500;
  margin: 25px 0 0 0;
  opacity: 0;
  transition: all 1s ease-in-out 1s;
  transition-delay: 2.25s;
}
#main-visual h1.finish + p {
  opacity: 1;
}
#main-visual h1 + p + i {
  opacity: 0;
  transition: all 1s ease-in-out 3s;
  transition-delay: 2.75s;
}
#main-visual h1.finish + p + i {
  opacity: 1;
}
@media only screen and (max-width: 768px) {
  #main-visual h1 + p {
    margin: 10px 20px 0 20px;
    font-size: 20px;
  }
}
#main-visual i {
  width: 38px;
  margin: 25px auto 0 auto;
  display: block;
  animation: sc 1s linear infinite;
  position: relative;
  top: 0;
}
@media only screen and (max-width: 768px) {
  #main-visual i {
    width: 26px;
  }
}
@keyframes sc {
  0% {
    top: 0;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}
section#concept, section#keyword, section#lineup {
  min-height: 100vh;
  width: 100%;
  position: relative;
}
@media only screen and (max-height: 800px) {
  section#lineup {
    padding: 10vh 0 0 0 !important;
  }
}
@media only screen and (max-width: 768px) {
  section#concept, section#keyword, section#lineup {
    min-height: 100vh;
    height: auto;
    padding: 10vh 0;
  }
  section#keyword {
    box-sizing: content-box;
  }
}
/* 蜈ｱ騾� fixed 繝代ロ繝ｫ繧ｹ繧ｿ繧､繝ｫ */
.custom .top, .custom .up, .custom .bottom, .custom .left, .custom .right {
  position: fixed;
  width: 100%;
  transition: all 0.5s ease-in-out;
  text-align: center;
  padding: 5px;
  opacity: 0;
}
/* 蜈ｱ騾� fixed 繝代ロ繝ｫ繧ｹ繧ｿ繧､繝ｫ */
.custom2 .left, .custom2 .right {
  position: absolute;
  height: 100vh;
  transition: all 0.5s ease-in-out;
  text-align: center;
  padding: 5px;
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .custom2 .left, .custom2 .right {
    height: auto !important;
    min-height: 100%;
  }
}
/* .top 縺ｨ .up 蜈ｱ騾壹せ繧ｿ繧､繝ｫ */
.custom .top, .custom .up {
  top: -45px;
  left: 0;
  background: #633128;
}
.bk {
  line-height: 0;
}
/* .bottom 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
.custom .bottom {
  bottom: -35px;
  left: 0;
  height: 35px;
  background: #2f3a60;
}
/* .left 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
.custom .left, .custom2 .left {
  top: 0;
  left: -35px;
  height: 100%;
  width: 35px;
  background: #633128;
}
/* .right 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
.custom .right, .custom2 .right {
  top: 0;
  right: -35px;
  height: 100%;
  width: 35px;
  background: #2f3a60;
}
/* 繧｢繧ｯ繝�ぅ繝匁凾縺ｫ陦ｨ遉ｺ縺輔ｌ繧九ヱ繝阪Ν */
.custom.active .top, .custom.active .up {
  top: 51px;
  opacity: 1;
  z-index: 2;
}
.custom.active .bottom {
  bottom: 0;
  opacity: 1;
  z-index: 3;
}
.custom.active .left, .custom2.active .left {
  left: 0;
  opacity: 1;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
	.custom.active .top, .custom.active .up {
		top:45px;
	}
  /* .left 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
  .custom .left, .custom2 .left {
    left: -20px;
    width: 20px;
  }
  /* .right 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
  .custom .right, .custom2 .right {
    right: -20px;
    width: 20px;
  }
  .custom.active .left {
    display: none;
  }
}
.custom.active .right, .custom2.active .right {
  right: 0;
  opacity: 1;
  z-index: 4;
}
@media only screen and (max-width: 768px) {
  .custom.active .right {
    display: none;
  }
}
/* 繝�く繧ｹ繝亥�騾壹せ繧ｿ繧､繝ｫ */
.custom .top p, .custom .up p, .custom .left p, .custom .right p {
  color: #FFF;
}
/* 蟾ｦ繝ｻ蜿ｳ繝�く繧ｹ繝� 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
.custom .left p, .custom .right p {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  width: 200px;
}
.custom .left p {
  transform: rotate(-90deg);
  left: -85px;
}
.custom .right p {
  transform: rotate(90deg);
  left: -85px;
}
/* 蜈ｱ騾壹ヵ繧ｩ繝ｳ繝郁｣�｣ｾ */
.custom .left p span, .custom .right p span, .custom2 .left p span, .custom2 .right p span {
  font-family: "quayside", sans-serif !important;
  font-size: 20px;
  margin-left: 10px;
}
/* 蟾ｦ繝ｻ蜿ｳ繝�く繧ｹ繝� 蝗ｺ譛峨せ繧ｿ繧､繝ｫ */
.custom2 .left p, .custom2 .right p {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  color: #FFF;
  width: 200px;
}
.custom2 .left p {
  transform: rotate(-90deg);
  left: -85px;
}
.custom2 .right p {
  transform: rotate(90deg);
  left: -80px;
}
.custom .marquee {
  animation: ten 1s linear infinite;
}
@keyframes ten {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .75;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 768px) {
  .custom .left p span, .custom .right p span, .custom2 .left p span, .custom2 .right p span {
    font-size: 16px;
  }
  .custom2 .left p, .custom2 .right p {
    left: -90px;
  }
  .custom .top {
    height: 35px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .custom .marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 7.5s linear infinite;
  }
  .custom .marquee p {
    display: inline-block;
    margin: 0;
    padding-right: 1rem; /* 間隔を調整 */
    font-weight: 900 !important;
			font-size: 14px;
  }
  .custom .marquee p.sp {
    display: inline-block !important;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50.5%);
  }
}
.title-coco {
  font-family: "quayside", sans-serif !important;
  font-size: 50px;
  font-weight: 500;
  margin: 0 0 5vh 0;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .title-coco {
    font-size: 32px;
    text-align: center;
  }
}
.title-coco:after {
  content: "";
  display: block;
  width: 25px;
  height: 5px;
  background: #333;
}
@media only screen and (max-width: 768px) {
  .title-coco:after {
    margin: 0 auto;
    height: 3px;
  }
}
.title-coco.centre {
  text-align: center;
}
.title-coco.centre:after {
  margin: 0 auto;
}
.title-coco.centre + p {
  text-align: center;
}
section .inside.row {
  max-width: 1200px;
}
section .inside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1024px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 100px;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  section .inside {
    padding: 0 55px;
    display: block;
  }
}
section .inside.row {
  flex-direction: row-reverse;
}
section .inside > .text-box {
  width: 49%;
}
section .inside > .pic-box {
  width: 47%;
}
@media only screen and (max-width: 768px) {
  section .inside > .text-box {
    width: auto;
  }
  section .inside > .pic-box {
    width: 80%;
    margin: 20px auto 0 auto;
  }
}
section .inside > div p {
  line-height: 2;
  font-size: 20px;
  letter-spacing: 0.015em;
}
@media only screen and (max-width: 768px) {
  section .inside > div p {
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
  }
}
section .inside > div p:not(:last-child) {
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
  section .inside > div p:not(:last-child) {
    margin-bottom: 10px;
  }
}
section .inside > div em {
  font-size: 53px;
  font-weight: bold;
  display: block;
  font-family: "Zen Maru Gothic", sans-serif !important;
}
@media only screen and (max-width: 768px) {
  section .inside > div em {
    font-size: 26px;
  }
}
section .inside > div em.darkbrown {
  color: #633128;
}
section .inside > div em.darkblue {
  color: #2f3a60;
}
#story section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  position: relative;
}
#story section#contents0 {
  flex: 0 0 100vw;
  /*margin-left: 5vw;*/
}
#story {
  display: flex;
  width: fit-content;
  height: 100vh;
  flex-direction: row;
  white-space: nowrap;
}
#story section:not(:first-child) {
  flex: 0 0 auto;
}
.pic1, .pic2, .pic3, .pic4, .pic5 {
  cursor: pointer;
  position: absolute;
}
.pic1.ver1 {
  bottom: 20px;
  left: 53%;
  width: 35%;
}
.pic1.ver1-2 {
  top: 33%;
  left: 12.5%;
  width: 14%;
}
@media only screen and (max-width: 768px) {
	#story section{
		margin-top:0;
	}
  .pic1.ver1 {
    bottom:0;
    left: 52%;
    width: 34%;
  }
  .pic1.ver1-2 {
    top: 50%;
    left: 12%;
    width: 14%;
  }
}
.pic2.ver1 {
  bottom: 15px;
  right: 13%;
  width: 40%;
}
.pic2.ver2 {
  top: 32%;
  left: 2%;
  width: 27%;
}
@media only screen and (max-width: 768px) {
  .pic2.ver1 {
    bottom: 15px;
    right: 13%;
    width: 41%;
  }
  .pic2.ver2 {
    top: 49%;
    left: 2%;
    width: 27%;
  }
}
.pic3 {
  bottom: calc(11% + 20px);
  left: 17%;
  width: 62%;
}
@media only screen and (max-width: 768px) {
  .pic3 {
    bottom: calc(7% + 20px);
    left: 16%;
    width: 66%;
  }
}
.pic4.ver1 {
  bottom: 15px;
  left: -4%;
  width: 65%;
}
.pic4.ver2 {
  top: 19%;
  right: 10%;
  width: 20%;
}
@media only screen and (max-width: 768px) {
  .pic4.ver2 {
    top: 37%;
    right: 10%;
    width: 20%;
  }
}
.pic5.ver1 {
  bottom: 22%;
  right: 6.5%;
  width: 18%;
}
.pic5.ver2 {
  bottom: 1%;
  left: 8%;
  width: 47%;
}
@media only screen and (max-width: 768px) {
  .pic5.ver1 {
    bottom: 16%;
    right: 6.5%;
    width: 17%;
  }
  .pic5.ver2 {
    bottom: 0;
  }
}
.group1:hover .ver1, .group1:hover .ver1-2, .group2:hover .ver1, .group2:hover .ver2, .group3:hover .pic3, .group4:hover .ver1, .group4:hover .ver2, .group5:hover .ver1, .group5:hover .ver2 {
  transform: scale(1.1);
}
#modal .pic1, #modal .pic2, #modal .pic3, #modal .pic4, #modal .pic5 {
  position: static;
  transform: translate(0, 0);
  width: auto;
}
#story section:not(:first-child) img.bk {
    height: calc(100vh - 51px);
    margin-top: 51px;
}
@media only screen and (max-width: 768px) {
  #story section:not(:first-child) img.bk {
    height: calc(100vh - 175px);
    margin-top: 175px;
  }
}
#scrollAmountBar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 35px;
  background: #a67c52;
  width: 0%;
  z-index: 100;
}
#modal:before {
  content: "";
  transition: all .5s ease-in-out;
  background: rgba(0, 0, 0, 0);
}
#modal.active:before {
  content: "";
  background: rgba(0, 0, 0, .8);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
#modal > div {
  position: fixed;
  top: 0;
  right: 0;
  width: 80vw;
  height: 100dvh;
  box-sizing: border-box;
  background: white;
  transform: translateX(100%);
  transition: transform 0.4s ease;
     z-index: 99999;
  padding: 20px;
  max-width: 1500px;
  border-radius: 50px 0 0 0;
}
@media only screen and (max-width: 768px) {
  #modal > div {
    padding-right: 0;
    width: 90vw;
  }
}
#modal > div.active {
  transform: translateX(0%);
}
#modal > div i {
  position: absolute;
  font-size: 300px;
  font-family: "Oswald", sans-serif !important;
  letter-spacing: 0;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  #modal > div i {
    left: auto !important;
    bottom: auto !important;
    right: 0 !important;
    top: -50px !important;
    font-size: 150px;
  }
}
#modal > div .txt {
  width: 48%;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
}
@media only screen and (max-width: 768px) {
  #modal > div .txt {
    width: auto;
    display: block;
    padding-right: 20px;
    padding-top: 100px;
    height: auto;
  }
}
#modal > div .txt h2 span {
  font-size: 38px;
  font-weight: 700;
  background: #FFF;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  padding: 5px;
	color: #333;
}
#modal > div .txt h2 {
  margin-bottom: 25px;
}
#modal > div .txt p {
  line-height: 1.8;
}
#modal > div .pager {
  position: absolute;
  bottom: 50px;
  left: 50px;
}
@media only screen and (max-width: 768px) {
  #modal > div .txt p {
    line-height: 1.7;
  }
  #modal > div .txt h2 span {
    font-size: 20px;
  }
  #modal > div .pager {
    position: static;
  }
}
html.modal-open {
  overflow: hidden;
}
#modal > div i {
  color: #E6E7E8;
  mix-blend-mode: multiply;
	font-style: normal;
}
/*------------------1------------------------*/
#modal > div.contents1-modal {
  background: #FFFBC4;
}
#modal > div.contents1-modal button {
  color: #D6C52B;
}
#modal > div.contents1-modal .close {
  background: #F4D892;
}
#modal > div.contents1-modal i {
  left: 40%;
  bottom: 20px;
  z-index: -1;
}
#modal > div.contents1-modal .modal1-1 {
  position: absolute;
  left: 50%;
  top: 100px;
  width: 20%;
}
#modal > div.contents1-modal .modal1-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
}
@media only screen and (max-width: 768px) {
  #modal > div.contents1-modal .modal1-1 {
    position: static;
    width:100px;
  }
  #modal > div.contents1-modal .modal1-2 {
    width: 200px;
    bottom: -180px;
  }
}
/*------------------2------------------------*/
#modal > div.contents2-modal {
  background: #E8F5FA;
}
#modal > div.contents2-modal button {
  color: #8AA7B7;
}
#modal > div.contents2-modal .close {
  background: #C3E1EA;
}
#modal > div.contents2-modal i {
  left: 50%;
  bottom: 50%;
  z-index: -1;
	font-style: normal;
}
#modal > div.contents2-modal .modal2-1 {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 20%;
  z-index: 9;
}
#modal > div.contents2-modal .modal2-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 33%;
  z-index: 10;
}
@media only screen and (max-width: 768px) {
  #modal > div.contents2-modal .modal2-1 {
    position: static;
    width:100px;
    margin-top: -50px;
  }
  #modal > div.contents2-modal .modal2-2 {
    width: 200px;
    bottom: -135px;
  }
}
/*------------------3------------------------*/
#modal > div.contents3-modal {
  background: #E1EFD5;
}
#modal > div.contents3-modal button {
  color: #A3B293;
}
#modal > div.contents3-modal .close {
  background: #BCCCAC;
}
#modal > div.contents3-modal i {
  right: 0;
  bottom: 0;
  z-index: -1;
}
#modal > div.contents3-modal .modal3-1 {
  position: absolute;
  right: 0;
  top: 20%;
  width: 35%;
}
#modal > div.contents3-modal .modal3-2 {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 28%;
}
@media only screen and (max-width: 768px) {
  #modal > div.contents3-modal .modal3-1 {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  #modal > div.contents3-modal .modal3-2 {
    width: 150px;
    float: left;
    left: 0;
    top: 0;
  }
}
/*------------------4------------------------*/
#modal > div.contents4-modal {
  background: #fce9f2;
}
#modal > div.contents4-modal button {
  color: #f489c1;
}
#modal > div.contents4-modal .close {
  background: #f7bfdc;
}
#modal > div.contents4-modal i {
  right: 0;
  bottom: 0;
  z-index: -1;
}
#modal > div.contents4-modal .modal4-1 {
  position: absolute;
  right: 14%;
  bottom: 10%;
  width: 37%;
  z-index: 99;
}
#modal > div.contents4-modal .modal4-2 {
  position: absolute;
  right: 3%;
  bottom: 45%;
  width: 12%;
}
@media only screen and (max-width: 768px) {
  #modal > div.contents4-modal .modal4-1 {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  #modal > div.contents4-modal .modal4-2 {
    width: 150px;
    float: left;
    left: 0;
    top: 10%;
    right: auto;
    bottom: auto;
  }
}
/*------------------5------------------------*/
#modal > div.contents5-modal {
  background: #cfd1c9;
}
#modal > div.contents5-modal button {
  color: #a0aa75;
}
#modal > div.contents5-modal .close {
  background: #bec6a3;
}
#modal > div.contents5-modal i {
  left: 50%;
  bottom: 50%;
  z-index: -1;
}
#modal > div.contents5-modal .modal5-1 {
  position: absolute;
  right: 0;
  bottom: 32%;
  width: 16%;
  z-index: 9;
}
#modal > div.contents5-modal .modal5-2 {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 45%;
}
@media only screen and (max-width: 768px) {
  #modal > div.contents5-modal .modal5-1 {
    position: static;
    width: 69px;
    margin-top: -9vw;
    float: right;
  }
  #modal > div.contents5-modal .modal5-2 {
    width: 200px;
    bottom: -125px;
    left: 0;
  }
}
#left-box {
  width: 300px;
  font-size: 12px;
  border: solid 1px #ccc;
  padding: 25px;
  background: #f9f9f9;
  overflow: hidden; /*float隗｣髯､*/
}
#left-box .space {
  float: left; /*逕ｻ蜒上�菴咲ｽｮ繧貞承荳九↓縺励◆縺��ｴ蜷医�right*/
  height: 5.3em /*逕ｻ蜒丈ｸ翫�菴咏區縺ｮ鬮倥＆*/
}
#left-box .img {
  float: left; /*逕ｻ蜒上�菴咲ｽｮ繧貞承荳九↓縺励◆縺��ｴ蜷医�right*/
  clear: both; /*.space縺ｮfloat隗｣髯､*/
  margin: 1.2em 1.2em 0 0; /*逕ｻ蜒上�蜻ｨ繧翫�菴咏區*/
}
@media only screen and (max-width: 768px) {
  .polygon-wrap {
    height: 100%;
  }
  .polygon-wrap p {
    position: relative;
  }
  .space-1 {
    float: right;
  }
  .space-2 {
    float: right;
  }
  .space-5 {
    float: right;
  }
  .polygon-1 {
    clear: both;
    height: 300px;
    width: 200px;
    float: right;
    margin: 0;
    shape-outside: polygon(nonzero, 25% 5%, 35% 10%, 45% 15%, 55% 25%, 60% 35%, 70% 45%, 75% 60%, 80% 75%, 60% 90%, 40% 95%, 25% 85%, 15% 70%, 10% 50%, 15% 30%, 20% 15%);
  }
  .polygon-2 {
    clear: both;
    height: 240px;
    width: 220px;
    float: right;
    margin: 0;
    shape-outside: polygon(0% 15%, 10% 5%, 25% 0%, 40% 5%, 50% 15%, 60% 10%, 75% 25%, 95% 50%, 90% 70%, 75% 85%, 60% 90%, 45% 100%, 30% 95%, 15% 80%, 5% 65%, 0% 50%);
    clip-path: polygon(0% 15%, 10% 5%, 25% 0%, 40% 5%, 50% 15%, 60% 10%, 75% 25%, 95% 50%, 90% 70%, 75% 85%, 60% 90%, 45% 100%, 30% 95%, 15% 80%, 5% 65%, 0% 50%);
  }
  .polygon-3 {
    height: 350px;
    width: 92%;
    float: left;
    margin: 0;
    shape-outside: polygon(nonzero, 20% 0%, 40% 0%, 50% 10%, 60% 25%, 60% 40%, 70% 50%, 65% 65%, 55% 75%, 50% 90%, 35% 100%, 20% 100%, 10% 90%, 10% 70%, 5% 50%, 10% 30%, 15% 15%);
  }
  .polygon-4 {
    height: 350px;
    width: 92%;
    float: left;
    margin: 0;
    shape-outside: polygon(nonzero, 20% 0%, 40% 0%, 50% 10%, 60% 25%, 60% 40%, 70% 50%, 65% 65%, 55% 75%, 50% 90%, 35% 100%, 20% 100%, 10% 90%, 10% 70%, 5% 50%, 10% 30%, 15% 15%);
  }
  .polygon-5 {
    clear: both;
    height: 189px;
    width: 200px;
    float: left;
    margin: 0;
    shape-outside: polygon(nonzero, 10% 95%, 5% 70%, 0% 40%, 10% 20%, 30% 5%, 45% 0%, 65% 10%, 70% 25%, 80% 40%, 90% 50%, 100% 55%, 100% 75%, 85% 90%, 60% 100%, 40% 95%, 25% 100%);
  }
}
/*------------------4------------------------*/
/*------------------5------------------------*/
.contents-m {
  padding: 50px;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .contents-m {
    padding: 0;
    overflow-y: scroll;
    height: 85dvh;
  }
}
#modal button {
  padding: 5px 15px;
  margin: 10px;
  background: none;
  border: none;
  font-family: "Oswald", sans-serif;
}
@media only screen and (max-width: 768px) {
  #modal button {
    margin: 10px 5px;
  }
}
.close {
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #333;
  font-weight: bold;
	color: #333 !important;
}
@media only screen and (max-width: 768px) {
  .close {
    position: fixed;
    right: auto;
    left: 20px;
    width: 45px;
    height: 45px;
    font-size: 25px;
  }
}
#modal .active {
  background: #FFF;
}
#contents1 {
  background: url("../inc/kokonoie/img/kv.jpg") no-repeat;
}
#lineup {
  display: flex;
  justify-content: center;
  align-items: center;
}
#lineup ul {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
  max-width: 1200px;
  box-sizing: border-box;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  #lineup {
    display: block;
  }
  #lineup h2 + p {
    margin-bottom: 15px;
  }
  #lineup ul {
    display: block;
    padding: 0 40px;
  }
}
#lineup ul > li {
  width: 48%;
}
@media only screen and (max-width: 768px) {
  #lineup ul > li {
    width: auto;
  }
}
#lineup ul li h3 {
  text-align: center;
  width: 90px;
  margin: 0 auto;
  line-height: 0;
  position: relative;
  left: 45px;
}
@media only screen and (max-width: 768px) {
  #lineup ul li h3 {
    display: none;
  }
}
#lineup ul > li > ul {
  display: block;
  padding: 0;
}
#lineup ul > li > ul li {
  width: auto;
  position: relative;
}
#lineup ul > li > ul li:not(:last-child) {
  margin-bottom: 20px;
}
#lineup ul > li > ul li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: #f8f2ea;
  border-radius: 20px;
}
#lineup ul > li > ul li a .pic {
  width: 22%;
  margin: 10px;
}
#lineup ul > li > ul li a .txt {
  width: 77%;
  margin: 20px 0 0 0;
}
#lineup ul > li > ul li a .txt > p:first-child {
  margin-right: 10px;
}
#lineup ul > li > ul li > p {
  text-align: right;
}
@media only screen and (max-width: 768px) {
  #lineup ul > li > ul li a {
    border-radius: 10px;
    align-items: center;
  }
  #lineup > ul {
    margin-top: 15px;
  }
  #lineup ul > li > ul {
    position: relative;
  }
  #lineup ul > li > ul.one-ldk:before {
    content: "";
    height: 100%;
    width: 25px;
    background: #633128;
    display: block;
    position: absolute;
    left: -40px;
    top: 0;
  }
  #lineup ul > li > ul.one-ldk:after {
    content: "1LDK";
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    left: -40px;
    color: #FFF;
    transform: translateY(-50%) rotate(180deg);
    font-family: "quayside", sans-serif !important;
  }
  #lineup ul > li > ul.two-ldk:before {
    content: "";
    height: 100%;
    width: 25px;
    background: #2f3a60;
    display: block;
    position: absolute;
    right: -40px;
    top: 0;
  }
  #lineup ul > li > ul.two-ldk:after {
    content: "2LDK";
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    right: -40px;
    color: #FFF;
    transform: translateY(-50%);
    font-family: "quayside", sans-serif !important;
  }
  #lineup ul > li > ul li:not(:last-child) {
    margin-bottom: 15px;
  }
  #lineup ul > li:first-child > ul li {
    margin-bottom: 15px;
  }
  #lineup ul > li > ul li > p {
    display: none;
  }
}
#lineup ul > li:nth-child(1) > ul li a {
  border: 2px solid #633128;
}
#lineup ul > li:nth-child(2) > ul li a {
  border: 2px solid #2f3a60;
}
@media only screen and (max-width: 768px) {
  #lineup ul > li > ul li a p {
    line-height: 1.5;
  }
}
#lineup ul > li:nth-child(1) > ul li p.more {
  background: #633128;
}
#lineup ul > li:nth-child(2) > ul li p.more {
  background: #2f3a60;
}
#lineup ul > li > ul li p.more {
  color: #FFF;
  width: fit-content;
  padding: 5px 10px;
  font-size: 14px;
  margin: 10px 0 0 auto;
  border-radius: 10px 0 19px 0;
}
@media only screen and (max-width: 768px) {
  #lineup ul > li > ul li p.more {
    border-radius: 7px 0;
  }
}
/*===============================*/
.modal-overlay.ver1 {
  background: rgba(99, 49, 40, 1)
}
.textarea.ver1:after {
  content: "";
  position: fixed;
  display: block;
  left: calc(50% + 382px);
  top: 0;
  width: 70px;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: rgba(99, 49, 40, 1);
}
.textarea.ver2:after {
  content: "";
  position: fixed;
  display: block;
  left: calc(50% + 382px);
  top: 0;
  width: 70px;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: rgba(47, 58, 96, 1);
}
@media only screen and (max-width: 768px) {
  .textarea.ver1:after, .textarea.ver2:after {
    left: auto;
    right: 0;
    width: 95px;
  }
}
.modal-overlay.ver1 {
  background: rgba(99, 49, 40, 1);
}
.modal-overlay.ver2 {
  background: rgba(47, 58, 96, 1);
}
.modal-open {
  text-decoration: none !important;
}
p.closemodal {
  position: fixed;
  background: none;
  left: calc(50% + 434px);
  color: #FFF;
  z-index: 999;
  top: -2px !important;
}
@media only screen and (max-width: 768px) {
  p.closemodal {
    left: auto;
    right: 0;
  }
}
p.closemodal a {
  color: #FFF;
  font-size: 40px;
}
p.closemodal a:hover {
  color: #FFF !important;
}
.textarea .title-m {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.textarea .title-m .pic {
  width: 30%;
}
.textarea .title-m .txt {
  width: 65%;
}
@media only screen and (max-width: 768px) {
  .textarea .title-m {
    display: block;
  }
  .textarea .title-m .pic {
    width: 50%;
    margin: 0 auto;
  }
  .textarea .title-m .txt {
    width: auto;
  }
}
.textarea .title-m .txt h2 {
  text-align: center;
  color: #a67c52;
  font-size: 20px;
  font-weight: 900;
}
.textarea .title-m .txt h2 span {
  font-size: 60px;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 900;
  border-bottom: 2px solid #a67c52;
  color: #a67c52;
  padding-bottom: 10px;
  display: block;
  margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
  .textarea .title-m .txt h2 {
    font-size: 15px;
    margin-bottom: 25px;
  }
  .textarea .title-m .txt h2 span {
    font-size: 36px;
    letter-spacing: 0;
    line-height: 1;
  }
}
.dots-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.dots-wrap li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #f2e5d6;
  border-radius: 50%;
  cursor: pointer;
}
.dots-wrap li:hover, .dots-wrap li.slick-active {
  background: #a67c52;
}
.dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
.textarea h3.modal-title {
  font-family: "quayside", sans-serif !important;
  font-size: 50px;
  text-align: center;
  color: #a67c52;
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  .textarea h3.modal-title {
    font-size: 32px;
    letter-spacing: 0;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 25px !important;
  }
}
h3.modal-title:before {
  display: none;
}
.textarea article:not(:last-child) {
  margin-bottom: 25px;
}
.textarea article p {
  text-align: center;
  line-height: 2;
}
.textarea article .zu {
  display: flex;
  justify-content: center
}
.textarea article .zu > p {
  width: 48%;
}
.textarea article .zu > p:nth-child(2) {
  margin-left: 4%;
}
@media only screen and (max-width: 768px) {
  .textarea article .zu {
    display: block;
  }
  .textarea article .zu > p {
    width: auto;
  }
  .textarea article .zu > p:nth-child(2) {
    margin-left: 0;
  }
}
.textarea article table {
  border-top: 1px solid #EEE;
  border-bottom: 1px solid #EEE;
  width: 100%;
}
.textarea article table td {
  padding: 20px;
}
@media only screen and (max-width: 768px) {
  .textarea article table td {
    padding: 10px;
    font-size: 13px;
  }
}
.textarea article table td:first-child {
  text-align: right;
}
.textarea article table tr:first-child td {
  padding-bottom: 0;
}
.textarea article table tr:nth-child(2) td {
  padding-top: 0;
}
.button_area ul {
  display: flex;
  justify-content: space-between;
}
.button_area ul li {
  width: 48%;
  border: 2px solid #D54C68;
  height: 95px;
}
@media only screen and (max-width: 768px) {
  .button_area ul {
    display: block;
  }
  .button_area ul li {
    width: 100%;
    height: 65px;
  }
}
.button_area ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  letter-spacing: .05rem;
  position: relative;
  font-weight: bold;
  padding-left: 20px;
	color: #333;
}
@media only screen and (max-width: 768px) {
  .button_area ul li a {
    font-size: 16px;
  }
}
.button_area ul li:first-child a:before {
  content: "";
  background: url(https://www.acehome.co.jp/wp/wp-content/themes/acehome_themes/inc/flathouse/img/line-up/catalog.png) no-repeat;
  width: 28px;
  height: 38px;
  background-size: 100%;
  position: absolute;
  left: 14%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.button_area ul li:last-child a:before {
  content: "";
  background: url(https://www.acehome.co.jp/wp/wp-content/themes/acehome_themes/inc/flathouse/img/line-up/home.png) no-repeat;
  width: 38px;
  height: 37px;
  background-size: contain;
  position: absolute;
  left: 8%;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .button_area ul li:first-child {
    margin-bottom: 15px;
  }
  .button_area ul li:first-child a:before {
    width: 20px;
    height: 25px;
    left: 17%;
  }
  .button_area ul li:last-child a:before {
    width: 30px;
    height: 27px;
    left: 10%;
  }
}
#contents0 {
  position: relative;
}
#contents0 .main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
}
#contents0 .up {
  content: "";
  width: 0;
  height: 7px;
  display: block;
  background: #000;
  background-size: cover;
  margin-bottom: 5vh;
  transition: all .5s ease-in-out;
}
#contents0 .up:before {
  content: "";
  width: 0;
  height: 2px;
  display: block;
  background: #000;
  background-size: cover;
  position: relative;
  top: 15px;
}
#contents0 .down {
  content: "";
  width: 0;
  height: 7px;
  display: block;
  background: #000;
  background-size: cover;
  margin-top: 5vh;
  transition: all .5s ease-in-out;
  position: absolute;
  right: 0;
}
#contents0 .down:before {
  content: "";
  width: 0;
  height: 2px;
  display: block;
  background: #000;
  background-size: cover;
  position: relative;
  top: -10px;
}
.active #contents0 .up, .active #contents0 .up:before, .active #contents0 .down, .active #contents0 .down:before {
  width: 100%;
}
#contents0 .main-pic1 {
  position: absolute;
  top: 13%;
  left: 12%;
  width: 15vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
#contents0 .main-pic2 {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 29vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
#contents0 .main-pic3 {
  position: absolute;
  top: 9%;
  right: -3%;
  width: 23vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
#contents0 .main-pic4 {
  position: absolute;
  bottom: 8%;
  right: 11%;
  width: 15vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
#contents0 .main-pic5 {
  position: absolute;
  top: 17%;
  left: 47%;
  width: 5vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
#contents0 .main-pic6 {
  position: absolute;
  bottom: 4%;
  left: 47%;
  width: 17vw;
  opacity: 0;
  transition: all .5s ease-in-out;
}
@media only screen and (max-width: 768px) {
  #contents0 .main-pic1 {
    left: 5%;
    width: 35vw;
  }
  #contents0 .main-pic2 {
    left:0;
    width: 45vw;
			bottom:5%;
  }
  #contents0 .main-pic3 {
            right: -20px;
    width: 40vw;
top:15%;
  }
  #contents0 .main-pic4 {
    right: 0;
    width: 30vw;
    bottom: 5%;
  }
  #contents0 .main-pic5 {
    top: 16%;
    left: 45%;
    width: 13vw;
  }
  #contents0 .main-pic6 {
    bottom: 3%;
    left: 44%;
    width: 26vw;
  }
}
.active #contents0 .main-pic1, .active #contents0 .main-pic2, .active #contents0 .main-pic3, .active #contents0 .main-pic4, .active #contents0 .main-pic5, .active #contents0 .main-pic6 {
  opacity: 1;
  z-index: 9;
}
#contents0 .main ul {
  display: flex;
  position: relative;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
	#contents0 .main{
		z-index: 10;
	}
  #contents0 .up, #contents0 .down {
    display: none;
  }
  #contents0 .main ul {
    display: block;
  }
}
#contents0 .main ul li {
  line-height: .75;
  text-align: center;
}
#contents0 .main ul li span {
  display: block;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateY(100%);
  font-weight: 900;
  padding: 10px;
}
#contents0 .main ul li span.small {
  font-family: "Roboto", sans-serif !important;
  font-style: italic;
  padding: 10px;
  font-size: 3vw;
}
@media only screen and (max-width: 768px) {
  #contents0 .main ul li:first-child {
    margin-bottom: 20px;
  }
  #contents0 .main ul li span.small {
    font-size: 24px;
    padding: 0;
    line-height: 1;
  }
}
@media only screen and (min-width: 1600px) {
  #contents0 .main ul li span.small {
    font-size: 60px;
  }
}
#contents0 .main ul li:nth-child(1) span.small {
  color: #633128;
}
#contents0 .main ul li:nth-child(2) span.small {
  color: #2F3A60;
}
#contents0 .main ul li span.big {
  font-size: 12vw;
  font-family: "quayside", sans-serif !important;
  color: #FFF;
  padding: 20px;
  margin-top: -30px;
}
@media only screen and (max-width: 768px) {
  #contents0 .main ul li span.big {
    font-size: 90px;
    padding: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-top: 0;
  }
}
@media only screen and (min-width: 1600px) {
  #contents0 .main ul li span.big {
    font-size: 165px;
  }
}
#contents0 .main ul li:nth-child(1) span.big {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #633128;
}
#contents0 .main ul li:nth-child(2) span.big {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #2F3A60;
}
.active #contents0 .main ul li span {
  transform: translateY(0);
}
#contents0 .main ul li em {
  overflow: hidden;
  display: block;
  font-weight: bold;
}
.page-top, #fixedBtnSpArea {
  display: none !important;
}
.custom-sp {
  display: none;
  transition: all .3s ease-in-out;
}
@media only screen and (max-width: 768px) {
  #contents0 .main ul li:nth-child(1) span.big {
    -webkit-text-stroke-width: 2px;
  }
  #contents0 .main ul li:nth-child(2) span.big {
    -webkit-text-stroke-width: 2px;
  }
	#contents0 .main ul li span{
						letter-spacing: 0;
	}
	#contents0 .main ul li em:nth-child(2){
		margin-top: -10px;
	}
  .custom-sp {
    display: block;
    opacity: 0;
  }
  .custom-sp.on-on {
    opacity: 1;
  }
}
.fixed-element {
  position: fixed;
  top: 100px; /* 螂ｽ縺阪↑菴咲ｽｮ縺ｫ隱ｿ謨ｴ */
  left: 50vw;
  transform: translateX(-50%);
  z-index: 9;
}
.fixed-element ul {
  display: flex;
  position: relative;
  justify-content: center;
}
.fixed-element ul li {
  line-height: .75;
  text-align: center;
}
.fixed-element ul li:first-child {
  margin-right: 15px;
}
.fixed-element ul li span {
  display: block;
  font-weight: 900;
}
.fixed-element ul li span.small {
  font-family: "Roboto", sans-serif !important;
  font-style: italic;
  font-size: 16px;
}
.fixed-element ul li:nth-child(1) span.small {
  color: #633128;
}
.fixed-element ul li:nth-child(2) span.small {
  color: #2F3A60;
}
.fixed-element ul li span.big {
  font-size: 50px;
  font-family: "quayside", sans-serif !important;
  line-height: .7;
  letter-spacing: 0.05em;
}
.fixed-element ul li:nth-child(1) span.big {
  color: #633128;
}
.fixed-element ul li:nth-child(2) span.big {
  color: #2F3A60;
}
.fixed-element ul li em {
  line-height: .7;
}
#kokonoie p {
  font-weight: bold !important;
}
#kokonoie i,#kokonoie em{
	font-style: normal !important;
}
@media only screen and (max-width: 768px) {
	#kokonoie p {
		font-size: 14px;
	}
}
.marquee1, .marquee2 {
  will-change: transform;
}