@charset "UTF-8";
/*
//@include linkarrow();
@mixin linkarrow($d:'sp', $c:$monocolor){

    @if $d == 'sp'{

        &:before,
        &:after{
            content: "";
            display: block;
            border-top: 1px solid $c;
            position: absolute;
            z-index: 9;
            top: 50%;
            //right: size(80/-2);
            $right: math.div(80 , -2);
            right: size( $right );
            transform-origin: right bottom;
            //opacity: 0.4;
        }
        &:before{
            width: size(30);
            transform: translateY(-50%) rotate(40deg);
        }
        &:after{
            width: size(80);
            transform: translateY(-50%);
        } 
    }
    @else if $d == 'pc'{

        &:before,
        &:after{
            //right: (96px/-2);
            right: ( math.div(96px , -2) );
        }
        &:before{
            width: 24px;
        }
        &:after{
            width: 96px;
        }
    }
}
*/
/* =================================================
   unique layout
================================================= */
@keyframes motion-attention {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
@keyframes motion-attention2 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes motion-fullpage-fullimg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes waveFlow {
  0% {
    stroke-dashoffset: 1500;
  }
  97% {
    stroke-dashoffset: -1500;
  }
  100% {
    stroke-dashoffset: -1500;
  }
}
#container aside .wave-line,
#container aside .wave-line svg,
#container aside .wave-line path,
#container section .wave-line,
#container section .wave-line svg,
#container section .wave-line path,
#container #footer .wave-line,
#container #footer .wave-line svg,
#container #footer .wave-line path {
  pointer-events: none;
}
#container aside .wave-line,
#container section .wave-line,
#container #footer .wave-line {
  display: none;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5) rotate(-16deg);
  transform-origin: center;
}
#container aside .wave-line svg,
#container section .wave-line svg,
#container #footer .wave-line svg {
  display: block;
  width: 100%;
  height: 120px;
}
#container aside .wave-line path,
#container section .wave-line path,
#container #footer .wave-line path {
  fill: none;
  stroke: hsl(0, 0%, 80%);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  opacity: 1;
}
#container aside.active .wave-line,
#container section.active .wave-line,
#container #footer.active .wave-line {
  display: block;
}
#container aside.active .wave-line path,
#container section.active .wave-line path,
#container #footer.active .wave-line path {
  animation-name: waveFlow;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
}
#container #footer aside.aside_1 {
  padding-top: 16vw;
}
#container {
  /* -------------------------------------
     article
  ------------------------------------- */
}
#container #article {
  padding: 0;
}
#container #article aside.main {
  width: 100%;
  position: relative;
}
#container #article aside.main .inner {
  position: relative;
  z-index: 1;
}
#container #article aside.main {
  /* -------------------------------------
      swiper
  ------------------------------------- */
}
#container #article aside.main #slider_main .swiper-wrapper {
  transition-timing-function: ease-in-out;
}
#container #article aside.main #slider_main .img,
#container #article aside.main #slider_main a.item,
#container #article aside.main #slider_main a.item:link {
  display: block;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
#container #article aside.main #slider_main .swiper-slide {
  height: 100%;
}
#container #article aside.main #slider_main .swiper-slide.swiper-slide-active .wave-line {
  display: block;
}
#container #article aside.main #slider_main .swiper-slide.swiper-slide-active .wave-line path {
  animation-name: waveFlow;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
}
#container #article aside.main .information {
  width: 100%;
  background: #6e6e6e;
  position: relative;
  z-index: 9;
}
#container #article aside.main .information .sw_control {
  display: grid;
  place-items: center;
  height: 16vw;
}
#container #article aside.main .information .sw_control .next,
#container #article aside.main .information .sw_control .prev {
  position: absolute;
  z-index: 10;
  left: 7.4666666667vw;
}
#container #article aside.main .information .sw_control .next:after,
#container #article aside.main .information .sw_control .prev:after {
  content: "";
  display: block;
  width: 1.3333333333vw;
  height: 1.3333333333vw;
  margin: 0 auto;
  transform: rotate(45deg);
}
#container #article aside.main .information .sw_control .next {
  bottom: 4vw;
}
#container #article aside.main .information .sw_control .next:after {
  border-bottom: 1px solid hsl(0, 0%, 100%);
  border-right: 1px solid hsl(0, 0%, 100%);
}
#container #article aside.main .information .sw_control .prev {
  top: 4vw;
}
#container #article aside.main .information .sw_control .prev:after {
  border-top: 1px solid hsl(0, 0%, 100%);
  border-left: 1px solid hsl(0, 0%, 100%);
}
#container #article aside.main .information .swiper {
  transform: translateY(-0.6666666667vw);
}
#container #article aside.main .information .swiper-wrapper {
  transition-timing-function: ease-in-out;
}
#container #article aside.main #slider_information span {
  display: inline;
  font-family: "FOT-筑紫ゴシック Pr5 L", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.05em;
  color: hsl(0, 0%, 100%);
  font-size: 1rem;
}
#container #article aside.main #slider_information a,
#container #article aside.main #slider_information a:link {
  display: block;
  color: hsl(0, 0%, 100%);
  line-height: 1.25;
  width: 100%;
  padding: 0 5.3333333333vw 0 13.3333333333vw;
  box-sizing: border-box;
}
#container #article aside.main #slider_information .item {
  display: block;
  width: 100%;
  height: auto !important;
}
#container #article aside.main {
  /* -------------------------------------
      content
  ------------------------------------- */
}
#container #article aside.main h2.cach {
  position: absolute;
  z-index: 1;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#container #article aside.main h2.cach span {
  display: block;
  writing-mode: tb-rl;
  text-align: center;
  color: hsl(0, 0%, 100%);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.175em;
  font-feature-settings: normal;
}
#container #article aside.main .attention {
  text-align: center;
  color: hsl(0, 0%, 100%);
  font-size: 0.9rem;
  width: max-content;
  position: absolute;
  z-index: 1;
  bottom: 21.3333333333vw;
  left: 50%;
  transform: translateX(-50%);
}
#container #article aside.main .attention span {
  display: grid;
  grid-auto-flow: row;
  justify-content: center;
  row-gap: 2vw;
}
#container #article aside.main .attention span::before, #container #article aside.main .attention span::after {
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  content: "";
  display: block;
  animation-delay: 0s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
#container #article aside.main .attention span::before {
  width: 1px;
  height: 18.6666666667vw;
  border-right: 1px solid hsl(0, 0%, 100%);
  transform-origin: bottom left;
  animation-name: motion-attention;
}
#container #article aside.main .attention span::after {
  align-self: end;
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  border-right: 1px solid hsl(0, 0%, 100%);
  border-bottom: 1px solid hsl(0, 0%, 100%);
  transform: translateX(-0.0666666667vw) rotate(45deg);
  animation-name: motion-attention2;
}
#container #article {
  /* -------------------------------------
     section
  ------------------------------------- */
}
#container #article section {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s;
  transition-timing-function: ease-in-out;
}
#container #article section.active {
  opacity: 1;
}
#container #article section .inner {
  padding: 21.3333333333vw 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#container #article section .content {
  width: 85.3333333333vw;
  margin: 0 auto;
}
#container #article section .content.content_1 {
  position: relative;
  z-index: 1;
}
#container #article section .content h2.content_title span.txt_2 {
  letter-spacing: 0.04em;
}
#container #article section {
  /* -------------------------------------
      swiper
  */
}
#container #article section .sw_control {
  position: relative;
  z-index: 1;
  /* -------------------------------------
      sw-arrow
  */
}
#container #article section .sw_control .sw-arrow {
  width: 5.3333333333vw;
  height: 5.3333333333vw;
  margin: 0;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}
#container #article section .sw_control .sw-arrow:after {
  content: "";
  display: block;
  width: 2.4vw;
  height: 2.4vw;
  margin: 0 auto 0 auto;
  border-top: 1px solid hsl(0, 0%, 0%);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
}
#container #article section .sw_control .sw-arrow:hover {
  opacity: 0.9;
}
#container #article section .sw_control .sw-arrow.prev:after {
  border-left: 1px solid hsl(0, 0%, 0%);
  transform: translate(-50%, -50%) rotate(-45deg);
}
#container #article section .sw_control .sw-arrow.prev {
  left: -3.2vw;
}
#container #article section .sw_control .sw-arrow.next:after {
  border-right: 1px solid hsl(0, 0%, 0%);
  transform: translate(-50%, -50%) rotate(45deg);
}
#container #article section .sw_control .sw-arrow.next {
  right: -3.2vw;
}
#container #article section .sw_control {
  /* -------------------------------------
      swiper-pagination
  */
}
#container #article section .sw_control .swiper-pagination .swiper-pagination-bullet {
  background: #7D7F80;
}
#container #article section .sw_control .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: hsl(0, 0%, 100%);
}
#container #article section .swiper {
  z-index: 1;
}
#container #article section {
  /* -------------------------------------
     common
  */
}
#container #article section ul {
  list-style: none;
}
#container #article section a,
#container #article section a:link {
  position: relative;
}
#container #article section {
  /* -------------------------------------
     content
  */
}
#container #article section.concept .content, #container #article section.designphilosophy .content, #container #article section.lifestory .content, #container #article section.performance-warranty .content, #container #article section.renovation .content, #container #article section.law .content, #container #article section.marketcourt .content {
  width: 100%;
}
#container #article section.concept .content p, #container #article section.designphilosophy .content p, #container #article section.lifestory .content p, #container #article section.performance-warranty .content p, #container #article section.renovation .content p, #container #article section.law .content p, #container #article section.marketcourt .content p {
  font-family: "FOT-筑紫Aオールド明朝 Pr6N L", "Hiragino Mincho ProN", "BIZ UDMincho", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
  font-size: 1rem;
}
#container #article section.concept .content h2,
#container #article section.concept .content p, #container #article section.renovation .content h2,
#container #article section.renovation .content p {
  text-align: center;
}
#container #article section.concept .content .item .float_r, #container #article section.renovation .content .item .float_r {
  margin-top: 16vw;
}
#container #article section.concept {
  padding-bottom: 0;
}
#container #article section.renovation {
  padding-top: 0;
}
#container #article section.renovation .inner {
  padding-top: 0;
}
#container #article section.renovation h2.content_title span.txt_2 {
  margin-bottom: 1em;
}
#container #article section.renovation .content .item .float_l {
  width: 66.6666666667vw;
  margin: 0 auto;
}
#container #article section.renovation .content .link {
  text-align: left;
}
#container #article section.renovation .content .link span {
  width: max-content;
  padding: 0 1em 0.2em;
}
#container #article section {
  /* -------------------------------------
     content2
  */
}
#container #article section.designphilosophy, #container #article section.performance-warranty, #container #article section.law {
  padding: 0;
}
#container #article section.designphilosophy .inner, #container #article section.performance-warranty .inner, #container #article section.law .inner {
  padding: 0;
}
#container #article section.designphilosophy h2, #container #article section.performance-warranty h2, #container #article section.law h2 {
  width: 100%;
}
#container #article section.designphilosophy h2.content_title span.txt_2, #container #article section.performance-warranty h2.content_title span.txt_2, #container #article section.law h2.content_title span.txt_2 {
  margin-bottom: 1em;
}
#container #article section.designphilosophy .content p, #container #article section.performance-warranty .content p, #container #article section.law .content p {
  color: hsl(0, 0%, 100%);
  width: 100%;
}
#container #article section.designphilosophy .content figure, #container #article section.performance-warranty .content figure, #container #article section.law .content figure {
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 0%);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#container #article section.designphilosophy .content .item, #container #article section.performance-warranty .content .item, #container #article section.law .content .item {
  display: grid;
  grid-auto-flow: row;
  place-items: center;
  align-content: center;
  color: hsl(0, 0%, 100%);
  width: 80vw;
  min-height: 100dvh;
  padding: 24vw 0;
  margin: 0 auto;
  box-sizing: border-box;
}
#container #article section.designphilosophy .content .link span, #container #article section.performance-warranty .content .link span, #container #article section.law .content .link span {
  color: hsl(0, 0%, 100%);
  width: max-content;
}
#container #article section.designphilosophy .content .link span:after, #container #article section.performance-warranty .content .link span:after, #container #article section.law .content .link span:after {
  border-top: 1px solid hsl(0, 0%, 100%);
}
#container #article section.designphilosophy .content figure, #container #article section.performance-warranty .content figure {
  clip-path: inset(60%);
  transition: 1s;
  transition-timing-function: ease-in-out;
}
#container #article section.designphilosophy .content .link, #container #article section.performance-warranty .content .link {
  text-align: left;
}
#container #article section.designphilosophy .content .link span, #container #article section.performance-warranty .content .link span {
  padding-right: 1em;
  margin: 0;
}
#container #article section.designphilosophy.active figure, #container #article section.performance-warranty.active figure {
  clip-path: inset(0);
}
#container #article section.designphilosophy.active h2,
#container #article section.designphilosophy.active p,
#container #article section.designphilosophy.active .link, #container #article section.performance-warranty.active h2,
#container #article section.performance-warranty.active p,
#container #article section.performance-warranty.active .link {
  animation-name: motion-fullpage-fullimg;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
#container #article section.designphilosophy.active h2, #container #article section.performance-warranty.active h2 {
  animation-delay: 0.5s;
}
#container #article section.designphilosophy.active p, #container #article section.performance-warranty.active p {
  animation-delay: 0.7s;
}
#container #article section.designphilosophy.active .link, #container #article section.performance-warranty.active .link {
  animation-delay: 0.9s;
}
#container #article section.designphilosophy .content figure img {
  opacity: 0.6;
}
#container #article section.performance-warranty .content figure img {
  opacity: 0.8;
}
#container #article section.performance-warranty .content h2 {
  margin-bottom: 48vw;
}
#container #article section.performance-warranty .content .item {
  align-content: end;
}
#container #article section.law .content figure img {
  opacity: 0.5;
}
#container #article section.law .content h2 {
  text-align: center;
}
#container #article section.law .content h2 span.img {
  width: 28vw;
  margin: 0 auto;
}
#container #article section.law .content h3 {
  grid-row: 1;
  margin-bottom: 2em;
}
#container #article section.law .content h3 span {
  writing-mode: tb-rl;
  letter-spacing: 0.175em;
  font-feature-settings: normal;
  font-size: 1.4rem;
}
#container #article section.law .content p {
  text-align: center;
}
#container #article section.law .content .item {
  display: grid;
  grid-auto-flow: row;
}
#container #article section.law .content .link span {
  padding: 0 2em 0.2em;
}
#container #article section.lifestory, #container #article section.marketcourt {
  padding-top: 0;
}
#container #article section.lifestory .inner, #container #article section.marketcourt .inner {
  padding-top: 0;
}
#container #article section.lifestory h2.content_title span.txt_2, #container #article section.marketcourt h2.content_title span.txt_2 {
  margin-bottom: 1em;
}
#container #article section.lifestory .content .item .float_r, #container #article section.marketcourt .content .item .float_r {
  width: 80vw;
  margin: 10.6666666667vw auto 0;
}
#container #article section.lifestory .content .link, #container #article section.marketcourt .content .link {
  text-align: left;
}
#container #article section.lifestory .content .link span, #container #article section.marketcourt .content .link span {
  justify-content: center;
  color: hsl(0, 0%, 0%);
  font-size: 1rem;
  line-height: 1;
  width: max-content;
  padding-right: 1em;
  margin: 0;
}
#container #article section.marketcourt .content .item .float_l {
  width: 58.6666666667vw;
}
#container #article section {
  /* -------------------------------------
     works
  */
}
#container #article section.works .content {
  width: 133.3333333333vw;
  transform: translateX(5.3333333333vw);
}
#container #article section.works .content figure {
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  overflow: hidden;
}
#container #article section.works .content h3 {
  padding: 0 6vw;
  position: absolute;
  z-index: 1;
  bottom: 4vw;
  left: 0;
}
#container #article section.works .content h3 span {
  display: inline-block;
  color: hsl(0, 0%, 100%);
  font-size: 1rem;
}
#container #article section.works .content .item {
  width: 65.3333333333vw;
}
#container #article section.works .content .item a,
#container #article section.works .content .item a:link {
  height: 100%;
  position: relative;
  z-index: 1;
}
#container #article section.works .content .item.new figure::before {
  flex-shrink: 0;
  content: "NEW";
  display: inline-block;
  font-family: "FOT-筑紫Aオールド明朝 Pr6N L", "Hiragino Mincho ProN", "BIZ UDMincho", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
  letter-spacing: 0.075em;
  text-align: center;
  color: hsl(0, 0%, 0%);
  font-size: 1rem;
  line-height: 1;
  width: max-content;
  height: max-content;
  padding: 0.2em 0.5em;
  margin: 0 1.0666666667vw 0 0;
  background: hsl(0, 0%, 100%);
  transform: translateY(-0.2666666667vw);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
#container #article section.works .link span {
  width: max-content;
  padding: 0 1em 0.2em;
}
#container #article section {
  /* -------------------------------------
     information , column
  */
}
#container #article section.information .inner, #container #article section.column .inner {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100dvh;
}
#container #article section.information h2, #container #article section.column h2 {
  text-align: center;
}
#container #article section.information figure, #container #article section.column figure {
  overflow: hidden;
}
#container #article section.information .content, #container #article section.column .content {
  margin-top: 10.6666666667vw;
}
#container #article section.information .content h3, #container #article section.column .content h3 {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25em;
  align-items: center;
}
#container #article section.information .content h3 span, #container #article section.column .content h3 span {
  font-family: "FOT-筑紫ゴシック Pr5 L", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size: 1rem;
}
#container #article section.information .content h3 span.cata, #container #article section.column .content h3 span.cata {
  white-space: nowrap;
  line-height: 1;
}
#container #article section.information .content h3 span.date, #container #article section.column .content h3 span.date {
  letter-spacing: 0.05em;
  line-height: 1;
}
#container #article section.information .content h3 span.txt, #container #article section.column .content h3 span.txt {
  grid-column: 1/-1;
  margin-top: 0.5em;
}
#container #article section.information .content .item, #container #article section.column .content .item {
  margin: 0 auto 4vw;
}
#container #article section.information .content .item .float_l, #container #article section.column .content .item .float_l {
  width: 25.3333333333vw;
}
#container #article section.information .content .item.new figure, #container #article section.column .content .item.new figure {
  position: relative;
  z-index: 1;
}
#container #article section.information .content .item.new figure::before, #container #article section.column .content .item.new figure::before {
  flex-shrink: 0;
  content: "NEW";
  display: inline-block;
  font-family: "FOT-筑紫Aオールド明朝 Pr6N L", "Hiragino Mincho ProN", "BIZ UDMincho", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "Times New Roman", "メイリオ", Meiryo, serif;
  letter-spacing: 0.075em;
  text-align: center;
  color: hsl(0, 0%, 0%);
  font-size: 1rem;
  line-height: 1;
  width: max-content;
  height: max-content;
  padding: 0.2em 0.5em;
  margin: 0 1.0666666667vw 0 0;
  background: hsl(0, 0%, 100%);
  transform: translateY(-0.2666666667vw);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
#container #article section.information .content h3 span.cata {
  font-family: "FOT-筑紫ゴシック Pr5 D", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0.05em;
}
#container #article section.information .content figure {
  aspect-ratio: 1/1;
}
#container #article section.information .content .item a,
#container #article section.information .content .item a:link {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 4.8vw;
  align-items: center;
}
#container #article section.column .content h3 span {
  font-size: 1rem;
}
#container #article section.column .content h3 span.txt {
  margin-top: 0.5em;
}
#container #article section.column .content figure {
  aspect-ratio: 3/2;
}
#container #article section.column .content .item {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 4.8vw;
  align-items: center;
}

@media screen and (min-width: 768px) {
  /* =================================================
     unique layout
  ================================================= */
  /* -------------------------------------
     header
  ------------------------------------- */
  #container aside .wave-line,
  #container section .wave-line,
  #container #footer .wave-line {
    transform: translate(-50%, -50%) scale(1.5, 2.5) rotate(-8deg);
  }
  #container #footer aside.aside_1 {
    padding-top: 32px;
  }
  #container {
    /* -------------------------------------
       article
    ------------------------------------- */
  }
  #container #article aside.main {
    width: 100%;
    background: hsl(0, 0%, 0%);
  }
  #container #article aside.main .inner {
    display: block;
  }
  #container #article aside.main h2.cach {
    top: auto;
    bottom: 60px;
    left: auto;
    right: 140px;
    transform: none;
  }
  #container #article aside.main h2.cach span {
    writing-mode: horizontal-tb;
    letter-spacing: 0.15em;
    font-size: 1.7rem;
  }
  #container #article aside.main .attention {
    bottom: 40px;
    left: auto;
    right: 40px;
    transform: none;
  }
  #container #article aside.main .attention span {
    row-gap: 8px;
  }
  #container #article aside.main .attention span::before {
    height: 72px;
  }
  #container #article aside.main .attention span::after {
    width: 11px;
    height: 11px;
    transform: translate(0px, -1px) rotate(45deg);
  }
  #container #article aside.main .information {
    padding: 0 48px;
    background: none;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  #container #article aside.main .information .sw_control {
    justify-content: start;
    height: auto;
  }
  #container #article aside.main .information .sw_control .next,
  #container #article aside.main .information .sw_control .prev {
    left: 48px;
    transition: 0.3s;
    cursor: pointer;
  }
  #container #article aside.main .information .sw_control .next:after,
  #container #article aside.main .information .sw_control .prev:after {
    width: 5px;
    height: 5px;
  }
  #container #article aside.main .information .sw_control .next:hover,
  #container #article aside.main .information .sw_control .prev:hover {
    opacity: 0.6;
  }
  #container #article aside.main .information .sw_control .next {
    bottom: -10px;
  }
  #container #article aside.main .information .sw_control .prev {
    top: -10px;
  }
  #container #article aside.main .information .swiper {
    transform: translateY(-1.5px);
  }
  #container #article aside.main #slider_information a,
  #container #article aside.main #slider_information a:link {
    padding: 0 32px 0 24px;
  }
  #container #article aside.main #slider_information .item {
    height: auto !important;
  }
  #container #article {
    /* -------------------------------------
       section
    ------------------------------------- */
  }
  #container #article section {
    width: 100%;
  }
  #container #article section .inner {
    padding: 0;
  }
  #container #article section .content {
    width: 100%;
    position: relative;
    z-index: 1;
    transition: 0.3s;
  }
  #container #article section .content p {
    line-height: 2.5;
  }
  #container #article section .content .item,
  #container #article section .content .link {
    transition: 0.3s;
  }
  #container #article section {
    /* -------------------------------------
        swiper
    */
  }
  #container #article section .sw_control {
    /* -------------------------------------
        sw-arrow
    */
  }
  #container #article section .sw_control .sw-arrow {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  #container #article section .sw_control .sw-arrow:after {
    width: 12px;
    height: 12px;
  }
  #container #article section .sw_control .sw-arrow.next {
    right: -32px;
  }
  #container #article section .sw_control .sw-arrow.prev {
    left: -32px;
  }
  #container #article section {
    /* -------------------------------------
       content
    */
  }
  #container #article section.concept h2.content_title span.txt, #container #article section.designphilosophy h2.content_title span.txt, #container #article section.lifestory h2.content_title span.txt, #container #article section.performance-warranty h2.content_title span.txt, #container #article section.renovation h2.content_title span.txt, #container #article section.law h2.content_title span.txt, #container #article section.marketcourt h2.content_title span.txt {
    grid-row: 2;
  }
  #container #article section.concept .content, #container #article section.designphilosophy .content, #container #article section.lifestory .content, #container #article section.performance-warranty .content, #container #article section.renovation .content, #container #article section.law .content, #container #article section.marketcourt .content {
    width: 100%;
  }
  #container #article section.concept .content .item, #container #article section.designphilosophy .content .item, #container #article section.lifestory .content .item, #container #article section.performance-warranty .content .item, #container #article section.renovation .content .item, #container #article section.law .content .item, #container #article section.marketcourt .content .item {
    margin-bottom: 0;
  }
  #container #article section.concept .content .link span, #container #article section.designphilosophy .content .link span, #container #article section.lifestory .content .link span, #container #article section.performance-warranty .content .link span, #container #article section.renovation .content .link span, #container #article section.law .content .link span, #container #article section.marketcourt .content .link span {
    padding: 0 5em 0.2em 0;
  }
  #container #article section.concept .content h2,
  #container #article section.concept .content p,
  #container #article section.concept .content .link, #container #article section.lifestory .content h2,
  #container #article section.lifestory .content p,
  #container #article section.lifestory .content .link, #container #article section.renovation .content h2,
  #container #article section.renovation .content p,
  #container #article section.renovation .content .link, #container #article section.marketcourt .content h2,
  #container #article section.marketcourt .content p,
  #container #article section.marketcourt .content .link {
    grid-column: 2;
  }
  #container #article section.concept .content h2,
  #container #article section.concept .content p, #container #article section.lifestory .content h2,
  #container #article section.lifestory .content p, #container #article section.renovation .content h2,
  #container #article section.renovation .content p, #container #article section.marketcourt .content h2,
  #container #article section.marketcourt .content p {
    text-align: left;
  }
  #container #article section.concept .content h2.content_title, #container #article section.lifestory .content h2.content_title, #container #article section.renovation .content h2.content_title, #container #article section.marketcourt .content h2.content_title {
    margin-bottom: 20px;
  }
  #container #article section.concept .content figure, #container #article section.lifestory .content figure, #container #article section.renovation .content figure, #container #article section.marketcourt .content figure {
    width: 100%;
  }
  #container #article section.concept .content .item, #container #article section.lifestory .content .item, #container #article section.renovation .content .item, #container #article section.marketcourt .content .item {
    display: grid;
    grid-template-columns: 1fr 40px 300px 30px 0 30px 300px 40px 1fr;
    transition: 0.5s;
  }
  #container #article section.concept .content .item .float_l,
  #container #article section.concept .content .item .float_r, #container #article section.lifestory .content .item .float_l,
  #container #article section.lifestory .content .item .float_r, #container #article section.renovation .content .item .float_l,
  #container #article section.renovation .content .item .float_r, #container #article section.marketcourt .content .item .float_l,
  #container #article section.marketcourt .content .item .float_r {
    grid-row: 1;
  }
  #container #article section.concept .content .item .float_l, #container #article section.lifestory .content .item .float_l, #container #article section.renovation .content .item .float_l {
    align-self: end;
  }
  #container #article section.concept .content .item .float_l {
    grid-column: 6/9;
    padding: 0.5208333333vw 0;
  }
  #container #article section.concept .content .item .float_r {
    grid-column: 1/4;
    min-height: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
  #container #article section.lifestory .content .item .float_l, #container #article section.marketcourt .content .item .float_l {
    grid-column: 1/4;
    min-height: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
  #container #article section.lifestory .content .item .float_r, #container #article section.marketcourt .content .item .float_r {
    grid-column: 6/9;
    width: 100%;
    padding: 0.5208333333vw 0 0;
    margin: 0;
  }
  #container #article section.renovation .content .item .float_l {
    grid-column: 6/-1;
    width: 100%;
    min-height: 0;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  #container #article section.renovation .content .item .float_r {
    grid-column: 3/5;
    width: 100%;
    padding: 0.5208333333vw 0 0;
    margin: 0;
  }
  #container #article section.marketcourt .content .item {
    min-height: 100dvh;
  }
  #container #article section.marketcourt .content .item .float_l,
  #container #article section.marketcourt .content .item .float_r {
    width: 100%;
  }
  #container #article section.marketcourt .content .item .float_r {
    align-self: center;
    margin: 0;
  }
  #container #article section {
    /* -------------------------------------
       content2
    */
  }
  #container #article section.designphilosophy .inner, #container #article section.performance-warranty .inner, #container #article section.law .inner {
    padding: 0;
  }
  #container #article section.designphilosophy h2.content_title, #container #article section.performance-warranty h2.content_title, #container #article section.law h2.content_title {
    margin-bottom: 20px;
  }
  #container #article section.designphilosophy h2.content_title span.txt_2, #container #article section.performance-warranty h2.content_title span.txt_2, #container #article section.law h2.content_title span.txt_2 {
    margin-bottom: 1.25em;
  }
  #container #article section.designphilosophy .content .item, #container #article section.performance-warranty .content .item, #container #article section.law .content .item {
    width: 640px;
    padding: 96px 0 64px;
    transition: 0.3s;
  }
  #container #article section.designphilosophy .content .link span, #container #article section.performance-warranty .content .link span, #container #article section.law .content .link span {
    padding-right: 5em;
  }
  #container #article section.performance-warranty .content h2 {
    margin-bottom: 24px;
  }
  #container #article section.law .content h2 {
    grid-row: 3;
    grid-column: 2;
    align-self: center;
    display: block;
    margin: 0;
  }
  #container #article section.law .content h2 span.img {
    width: 100px;
    margin: 0 auto;
    transition: 0.3s;
  }
  #container #article section.law .content h3 {
    grid-row: 2/4;
    grid-column: 3;
    align-self: start;
    justify-self: end;
    margin: 0;
  }
  #container #article section.law .content h3 span {
    font-size: 1.4rem;
  }
  #container #article section.law .content p {
    grid-row: 3;
    grid-column: 1;
    text-align: left;
    margin: 0 0 1em;
  }
  #container #article section.law .content .item {
    grid-auto-flow: inherit;
    grid-template-rows: 40px 24px 1fr 24px 40px;
    grid-template-columns: 1fr max-content 1fr;
    place-items: end;
    align-items: end;
    width: 720px;
    min-height: 400px;
    padding: 0;
  }
  #container #article section.law .content .link {
    grid-row: 4;
    grid-column: 1;
  }
  #container #article section.law .content .link span {
    padding: 0 5em 0.2em 0;
  }
  #container #article section {
    /* -------------------------------------
       works
    */
  }
  #container #article section.works .content {
    width: 100%;
    transform: translateX(0);
  }
  #container #article section.works .content h3 {
    padding: 0 16px;
    bottom: 16px;
  }
  #container #article section.works .content .item {
    width: 100%;
    margin: 0;
  }
  #container #article section.works .content .item.new figure:before {
    padding: 0.4em 0.5em;
    margin: 0 8px 0 0;
    transform: translateY(-1px);
  }
  #container #article section.works .link {
    margin-top: 32px;
  }
  #container #article section.works .link a,
  #container #article section.works .link a:link {
    width: max-content;
    margin-left: auto;
    margin: 0 80px 0 auto;
  }
  #container #article section.works .link span {
    padding: 0 2em 0.2em 0;
  }
  #container #article section {
    /* -------------------------------------
       information , column
    */
  }
  #container #article section.information h2, #container #article section.column h2 {
    text-align: left;
  }
  #container #article section.information .content, #container #article section.column .content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0;
    column-gap: 16px;
    max-width: 720px;
    margin-top: 0;
  }
  #container #article section.information .content .item, #container #article section.column .content .item {
    display: block;
    width: 100%;
    margin: 0;
  }
  #container #article section.information .content .item a,
  #container #article section.information .content .item a:link, #container #article section.column .content .item a,
  #container #article section.column .content .item a:link {
    display: block;
    column-gap: 0;
  }
  #container #article section.information .content .item .float_l,
  #container #article section.information .content .item .float_r, #container #article section.column .content .item .float_l,
  #container #article section.column .content .item .float_r {
    width: 100%;
  }
  #container #article section.information .content .item .float_r, #container #article section.column .content .item .float_r {
    margin: 16px 0 0;
  }
  #container #article section.information .content .item.new .date:before, #container #article section.column .content .item.new .date:before {
    padding: 0.4em 0.5em;
    margin: 0 8px 0 0;
    transform: translateY(-1px);
    margin: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #container #article section.information .link, #container #article section.column .link {
    max-width: 720px;
    margin-top: 32px;
  }
  #container #article section.information .link a,
  #container #article section.information .link a:link, #container #article section.column .link a,
  #container #article section.column .link a:link {
    width: max-content;
    margin-left: auto;
  }
  #container #article section.information .content figure {
    aspect-ratio: 3/2;
  }
}
@media screen and (min-width: 900px) {
  #container #article section.concept .content .item, #container #article section.renovation .content .item, #container #article section.lifestory .content .item, #container #article section.marketcourt .content .item {
    grid-template-columns: 1fr 40px 300px 30px 60px 30px 300px 40px 1fr;
  }
}
@media screen and (min-width: 1100px) {
  #container #article aside.main h2.cach {
    bottom: 80px;
    right: 156px;
  }
  #container #article aside.main h2.cach span {
    font-size: 2.4rem;
  }
  #container #article aside.main .attention {
    bottom: 32px;
    right: 58px;
  }
  #container #article aside.main .attention span {
    row-gap: 8px;
  }
  #container #article aside.main .attention span::before {
    height: 100px;
  }
  #container #article aside.main .attention span::after {
    width: 12px;
    height: 12px;
    transform: translate(-0.5px, 0px) rotate(45deg);
  }
  #container #article aside.main .information {
    padding: 0 80px;
    bottom: 32px;
  }
  #container #article aside.main .information .sw_control .next,
  #container #article aside.main .information .sw_control .prev {
    left: 80px;
  }
  #container #article aside.main .information .sw_control .next:after,
  #container #article aside.main .information .sw_control .prev:after {
    width: 7px;
    height: 7px;
  }
  #container #article aside.main .information .swiper {
    transform: translateY(-2px);
  }
  #container #article aside.main #slider_information a span,
  #container #article aside.main #slider_information a:link span {
    font-size: 1.1rem;
  }
  #container #article section h2.content_title {
    max-width: 1010px;
    margin: 0 auto 36px;
  }
  #container #article section h2.content_title span.txt {
    font-size: 2.5rem;
  }
  #container #article section h2.content_title span.txt_2 {
    font-size: 1.7rem;
    margin-top: 0.65em;
  }
  #container #article section .link {
    margin: 24px auto 0;
  }
  #container #article section .link span {
    font-size: 1.2rem;
  }
  #container #article section .content p {
    font-size: 1.3rem;
  }
  #container #article section.concept h2.content_title, #container #article section.lifestory h2.content_title, #container #article section.renovation h2.content_title, #container #article section.marketcourt h2.content_title {
    margin-bottom: 32px;
  }
  #container #article section.concept .content p, #container #article section.lifestory .content p, #container #article section.renovation .content p, #container #article section.marketcourt .content p {
    font-size: 1.3rem;
  }
  #container #article section.concept .content .item, #container #article section.lifestory .content .item, #container #article section.renovation .content .item, #container #article section.marketcourt .content .item {
    grid-template-columns: 1fr 54px 400px 54px minmax(48px, 84px) 54px 400px 54px 1fr;
  }
  #container #article section.concept .content .item .float_l {
    padding: 0.5208333333vw 0;
  }
  #container #article section.designphilosophy h2.content_title span.txt_2, #container #article section.performance-warranty h2.content_title span.txt_2, #container #article section.law h2.content_title span.txt_2 {
    margin: 0 0 0.75em;
  }
  #container #article section.designphilosophy .content p, #container #article section.performance-warranty .content p, #container #article section.law .content p {
    font-size: 1.3rem;
  }
  #container #article section.designphilosophy .content .item, #container #article section.performance-warranty .content .item, #container #article section.law .content .item {
    width: 900px;
    padding: 96px 0 64px;
  }
  #container #article section.designphilosophy .content .link span, #container #article section.performance-warranty .content .link span, #container #article section.law .content .link span {
    padding-right: 5em;
  }
  #container #article section.performance-warranty .content h2 {
    margin-bottom: 24px;
  }
  #container #article section.performance-warranty .content .item {
    align-content: center;
  }
  #container #article section.law .content h2 span.img {
    width: 140px;
  }
  #container #article section.law .content h3 span {
    font-size: 2rem;
  }
  #container #article section.law .content p {
    margin: 0 0 1em;
  }
  #container #article section.law .content .item {
    grid-template-rows: 40px 24px 1fr 24px 40px;
    width: 1010px;
    min-height: 560px;
  }
  #container #article section.law .content .link span {
    padding: 0 5em 0.2em 0;
  }
  #container #article section.works .content h3 span {
    font-size: 1.1rem;
  }
  #container #article section.information .content, #container #article section.column .content {
    column-gap: 16px;
    max-width: 1010px;
  }
  #container #article section.information .content h3 span, #container #article section.column .content h3 span {
    font-size: 1.1rem;
  }
  #container #article section.information .content .item .float_r, #container #article section.column .content .item .float_r {
    margin: 16px 0 0;
  }
  #container #article section.information .content .item.new .date:before, #container #article section.column .content .item.new .date:before {
    font-size: 1.1rem;
  }
  #container #article section.information .link, #container #article section.column .link {
    max-width: 1010px;
    margin-top: 32px;
  }
}/*# sourceMappingURL=index.css.map */