/*-------------------------------
---#op-animation
-------------------------------*/

body {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

#body-inner,
header .inner {
  overflow-y: scroll;
}

body.show,
body.show #body-inner,
body.show header .inner {
  overflow-y: visible;
}

#op-animation {
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color:#fff;
  overflow-x: hidden;
  overflow-y: hidden;
}

#op-animation.hidden {
  display: none;
}

#animation_container {
  position:absolute;
  margin: auto;
  width: 100% !important;
  height: 100% !important;
	left:-100%;right:-100%;
  top:-100%;bottom:-100%;
}

#canvas {
  width: 100% !important;
  height: auto !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: block;
}

#dom_overlay_container {
  pointer-events:none;
  overflow:hidden;
  width: 100%;
  height:100%;
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
}


/*-------------------------------
---.hero
-------------------------------*/

.hero {
  position: relative;
  margin-bottom: 90px;
}

.hero .text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.hero .text h2.num {
  font-size: 2rem;
}

.hero .text h3.title {
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  margin-top: 60px;
  margin-bottom: 60px;
}

.hero .text h3.title span {
  display: inline-block;
}

.hero .text p {
  font-size: 2rem;
  letter-spacing: 0.05em;
}

.hero .scroll {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  line-height: 1;
  font-size: 1.3rem;
  text-shadow: 0px 2px 4px #00000080;
}

.hero .scroll::after {
  content: '\f107';
  font-size: 1.8em;
}


/*-------------------------------
---.outline
-------------------------------*/

.outline {
  margin-bottom: 120px;
}

.outline h3.title {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.outline .text {
  font-size: 1.4rem;
  line-height: 2.5;
}


/*-------------------------------
---.feature
-------------------------------*/
/*-------------------------------
---.review
-------------------------------*/

.feature {
  grid-row-gap: 120px;
  margin-bottom: 120px;
}

.review {
  margin-bottom: 120px;
}

.feature .contents {
  grid-template-columns: repeat(2, 1fr);
}

.feature .contents .text {
  position: relative;
  padding: 60px 100px;
}

.review .contents .text {
  margin-bottom: 120px;
}

.feature .contents .text .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
  width: 100%;
  height: 100%;
}

.feature .contents .text .bg[data-disabled*="d"] {
  display: none;
}

.feature .contents .text .bg[data-position^="r"] {
  justify-content: right;
}

.feature .contents .text .bg[data-position^="c"] {
  justify-content: center;
}

.feature .contents .text .bg[data-position^="l"] {
  justify-content: left;
}

.feature .contents .text .bg[data-position$="t"] {
  align-items: start;
}

.feature .contents .text .bg[data-position$="c"] {
  align-items: center;
}

.feature .contents .text .bg[data-position$="b"] {
  align-items: end;
}

.feature .contents .text .bg[data-size="s"] img {
  width: 35%;
}

.feature .contents .text .bg[data-size="l"] img {
  width: 100%;
}

.contents .text h4.title {
  font-size: 2.8rem;
  margin-bottom: 60px;
}

.contents .text .body {
  font-size: 1.4rem;
  line-height: 2.5;
}

.contents .text .body > * + * {
  margin-top: 2em;
}

.contents .text .body dt {
  font-size: 1.5rem;
  font-weight: 500;
}

.feature .contents:nth-child(odd) .images {
  order: -1;
}

.contents .images .grid {
  grid-gap: 1px;
}

.contents .images .gallery {
  grid-template-columns: 1fr;
}

.contents .images .layout[data-layout="single"] {
  grid-template-columns: 1fr;
}

.contents .images .layout[data-layout="dual1"] {
  grid-template-columns: repeat(2, 1fr);
}

.contents .images .layout[data-layout="dual2"] {
  grid-template-columns: 2fr 1fr;
}

.contents .images .layout[data-layout="dual3"] {
  grid-template-columns: 1fr 2fr;
}

.contents .images .layout[data-layout="multi1"],
.contents .images .layout[data-layout="multi2"],
.contents .images .layout[data-layout="multi9"] {
  grid-template-columns: repeat(2, 1fr);
}

.contents .images .layout[data-layout="multi3"],
.contents .images .layout[data-layout="multi4"],
.contents .images .layout[data-layout="multi5"],
.contents .images .layout[data-layout="multi6"],
.contents .images .layout[data-layout="multi7"],
.contents .images .layout[data-layout="multi8"] {
  grid-template-columns: repeat(3, 1fr);
}

.contents .images .layout[data-layout="multi1"] {
  grid-template-areas:  "a b"
                        "a c";
}

.contents .images .layout[data-layout="multi2"] {
  grid-template-areas:  "a c"
                        "b c";
}

.contents .images .layout[data-layout="multi3"] {
  grid-template-areas:  "a a b"
                        "a a c";
}

.contents .images .layout[data-layout="multi4"] {
  grid-template-areas:  "a c c"
                        "b c c";
}

.contents .images .layout[data-layout="multi5"] {
  grid-template-areas:  "a a d"
                        "b c d";
}

.contents .images .layout[data-layout="multi6"] {
  grid-template-areas:  "a b b"
                        "a c d";
}

.contents .images .layout[data-layout="multi7"] {
  grid-template-areas:  "a b d"
                        "c c d";
}

.contents .images .layout[data-layout="multi8"] {
  grid-template-areas:  "a b c"
                        "a d d";
}

.contents .images .layout[data-layout="multi9"] {
  grid-template-areas:  "a c"
                        "b d";
}

.contents .images .layout[data-layout="multi1"] figure:nth-child(1),
.contents .images .layout[data-layout="multi2"] figure:nth-child(1),
.contents .images .layout[data-layout="multi3"] figure:nth-child(1),
.contents .images .layout[data-layout="multi4"] figure:nth-child(1),
.contents .images .layout[data-layout="multi5"] figure:nth-child(1),
.contents .images .layout[data-layout="multi6"] figure:nth-child(1),
.contents .images .layout[data-layout="multi7"] figure:nth-child(1),
.contents .images .layout[data-layout="multi8"] figure:nth-child(1),
.contents .images .layout[data-layout="multi9"] figure:nth-child(1) {
  grid-area: a;
}

.contents .images .layout[data-layout="multi1"] figure:nth-child(2),
.contents .images .layout[data-layout="multi2"] figure:nth-child(2),
.contents .images .layout[data-layout="multi3"] figure:nth-child(2),
.contents .images .layout[data-layout="multi4"] figure:nth-child(2),
.contents .images .layout[data-layout="multi5"] figure:nth-child(2),
.contents .images .layout[data-layout="multi6"] figure:nth-child(2),
.contents .images .layout[data-layout="multi7"] figure:nth-child(2),
.contents .images .layout[data-layout="multi8"] figure:nth-child(2),
.contents .images .layout[data-layout="multi9"] figure:nth-child(2) {
  grid-area: b;
}

.contents .images .layout[data-layout="multi1"] figure:nth-child(3),
.contents .images .layout[data-layout="multi2"] figure:nth-child(3),
.contents .images .layout[data-layout="multi3"] figure:nth-child(3),
.contents .images .layout[data-layout="multi4"] figure:nth-child(3),
.contents .images .layout[data-layout="multi5"] figure:nth-child(3),
.contents .images .layout[data-layout="multi6"] figure:nth-child(3),
.contents .images .layout[data-layout="multi7"] figure:nth-child(3),
.contents .images .layout[data-layout="multi8"] figure:nth-child(3),
.contents .images .layout[data-layout="multi9"] figure:nth-child(3) {
  grid-area: c;
}

.contents .images .layout[data-layout="multi5"] figure:nth-child(4),
.contents .images .layout[data-layout="multi6"] figure:nth-child(4),
.contents .images .layout[data-layout="multi7"] figure:nth-child(4),
.contents .images .layout[data-layout="multi8"] figure:nth-child(4),
.contents .images .layout[data-layout="multi9"] figure:nth-child(4) {
  grid-area: d;
}

.contents .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contents .images figure {
  position: relative;
}

.contents .images figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(0,0,0,.5);
  font-size: 1.4rem;
  line-height: 1;
  justify-content: center;
  align-items: center;
}

.contents .images .captions {
  color: #808080;
  font-size: 1.2rem;
  margin: 0 10px;
}

.contents .images .captions .block {
  margin-left: 1em;
}


/*-------------------------------
---#other-storys
-------------------------------*/

#other-storys {
  margin-bottom: 120px;
}

#other-storys .title {
  font-size: 3.6rem;
  margin-bottom: 60px;
}

#other-storys .contents {
  grid-template-columns: repeat(2, max-content);
  justify-content: space-around;
  grid-column-gap: 20px;
}

#other-storys .item {
  grid-template-columns: 175px 1fr;
  grid-gap: 30px;
  align-items: center;
}

#other-storys .item .num {
  border: 1px solid #3c3c3c;
}

#other-storys .item .title {
  max-width: 11em;
  font-size: 1.8rem;
  line-height: 1.25;
  margin-top: 20px;
  margin-bottom: 20px;
}

#other-storys .item .title span {
  display: inline-block;
}

#other-storys .item .next {
  display: flex;
  column-gap: 1em;
  align-items: center;
}

#other-storys .item .next::after {
  content: '\f105';
}

#other-storys .item img {
  -webkit-transition:	all 0.3s ease-out;
  transition:	all 0.3s ease-out;
}

#other-storys .item:hover img {
  transform: scale(0.95);
}