@charset "UTF-8";
/* CSS Document */
section {overflow: hidden;}
#billboard {position: relative;}
#billboard .container:nth-child(1) {position: relative;}
#billboard .container:nth-child(1) p {color: #fff;font-size: 200%;text-shadow: 0 0 25px #123b66,0 0 25px #123b66;writing-mode: tb;white-space: nowrap;letter-spacing: 0.1em;position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%,-50%);opacity: 0;}
#billboard .container:nth-child(1) p span {display: inline-block;}
#billboard .container:nth-child(1) p span:nth-of-type(1) {transform: translateX(4px);}
#billboard .container:nth-child(1) p span:nth-of-type(2) {transform: translateX(4px);}
#billboard .container:nth-child(1) figure {height: 43.5vw;overflow: hidden;}
#billboard .container:nth-child(1) figure figcaption {left: 0;right: auto;opacity: 0;}
#billboard .container:nth-child(1) figure img {width: 110%;height: 110%;object-fit: cover;position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%,-50%);opacity: 0;}
#billboard .container:nth-child(2) {text-align: center;padding: 3em 5em 2em;position: absolute;top: 50%;right: 0;z-index: 1;transform: translateY(-50%);}
#billboard .container:nth-child(2) > * {opacity: 0;}
#billboard .container:nth-child(2)::after {display: block;content: '';width: 0;height: 100%;background: rgba(255,255,255,0.9);position: absolute;top: 0;left: 0;z-index: -1;opacity: 1;}
#billboard .container:nth-child(2) p:nth-of-type(1) {font-size: 225%;font-weight: bold;max-width: 9.5em;margin: 0 auto;border-top: 1px solid var(--color-black1);border-bottom: 1px solid var(--color-black1);}
#billboard .container:nth-child(2) p:nth-of-type(1) span:nth-child(1) {font-weight: inherit;}
#billboard .container:nth-child(2) p:nth-of-type(1) span:nth-child(2) {font-size: 90%;}
#billboard .container:nth-child(2) h1 {margin-top: 0.25em;}
#billboard .container:nth-child(2) h1 span {display: block;}
#billboard .container:nth-child(2) h1 span:nth-child(1) {font-size: 250%;}
#billboard .container:nth-child(2) h1 span:nth-child(2) {font-size: 225%;line-height: 1;letter-spacing: 0.05em;}
#billboard .container:nth-child(2) h1 span:nth-child(2) ruby {display: block;}
#billboard .container:nth-child(2) h1 span:nth-child(2) ruby rb {display: block;font-size: 44%;letter-spacing: 0.1em;margin: 0.75em auto 0;max-width: 12.5em;position: relative;}
#billboard .container:nth-child(2) h1 span:nth-child(2) ruby rb::after {display: block;content: '';width: 100%;height: 1px;background: linear-gradient(to right,#444 23%,transparent 23%,transparent 77%,#444 77%);position: absolute;left: 0;bottom: 0.5em;z-index: 0;}
#billboard .container:nth-child(2) p:nth-of-type(2) {font-size: 150%;margin-top: 2em;}
#billboard .container:nth-child(2) p:nth-of-type(2) ruby rt {font-size: 58%;}
body.loaded #billboard .container:nth-child(1) p {transition: 1s ease-out 1.6s;opacity: 1;}
body.loaded #billboard .container:nth-child(1) figure img {width: 102%;height: 102%;transition: 2s ease-out 0.4s;opacity: 1;}
body.loaded #billboard .container:nth-child(1) figure figcaption {transition: 1s ease-out 0.8s;opacity: 1;}
body.loaded #billboard .container:nth-child(2)::after {width: 100%;transition: 0.6s ease-out 2.5s;}
body.loaded #billboard .container:nth-child(2) div {transition: 1s ease-out 3s;opacity: 1;}
#lead {padding: 5em 0;background: var(--color-braun2);}
#lead .container:nth-child(1) {text-align: center;}
#lead .container:nth-child(1) p:nth-of-type(1) {color: var(--color-braun1);font-size: 150%;}
#lead .container:nth-child(1) p:nth-of-type(1)::after {display: block;content: '';width: 3.25em;height: 1px;margin: 1em auto;background: #444;}
#lead .container:nth-child(1) h2 {font-size: 250%;letter-spacing: 0.05em;}
#lead .container:nth-child(1) h2 small {font-size: 60%;display: block;letter-spacing: 0;margin-bottom: 0.25em;}
#lead .container:nth-child(1) h2 span {font-size: 112.5%;}
#lead .container:nth-child(1) h2 img {width: 70%;max-width: 300px;margin: 0.5em auto 0;}
#lead .container:nth-child(1) p:nth-of-type(2) {line-height: 2.25;margin-top: 3em;}
#lead .container:nth-child(2) {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-top: 5em;padding: 1.5em;background: linear-gradient(135deg,#664a3c,#43291c);}
#lead .container:nth-child(2) figure {width: 52%;padding-top: 29.2%;position: relative;}
#lead .container:nth-child(2) figure iframe {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
#lead .container:nth-child(2) div {width: 42%;}
#lead .container:nth-child(2) div p {color: #fff;}
#lead .container:nth-child(2) div p:nth-child(1) {font-size: 150%;}
#lead .container:nth-child(2) div p:nth-child(2) {line-height: 2;margin-top: 1.5em;}
#intro {position: relative;}
#intro .container > p {color: #fff;font-size: 225%;line-height: 1.72;letter-spacing: 0.1em;width: 90%;max-width: 1400px;position: absolute;top: 2em;left: 50%;right: 0;z-index: 1;transform: translateX(-50%);}
#intro .container div {color: #fff;padding: 4em 5em;background: rgba(0,0,0,0.5);position: absolute;right: 0;bottom: 0;z-index: 1;}
#intro .container div h2 {font-size: 150%;}
#intro .container div p {line-height: 2.25;margin-top: 1.5em;}
#intro .container figure {height: 43vw;overflow: hidden;}
#intro .container figure figcaption {left: 0;right: auto;}
#intro .container figure img {height: 116%;object-fit: cover;}
#feature .container h2 {color: var(--color-braun1);font-size: 187.5%;letter-spacing: 0.05em;text-align: center;}
#feature .container h2::after {display: block;content: attr(data-title);font-size: 40%;font-family: "Inter", sans-serif;}
#feature .container:nth-child(1) {margin-top: 4em;}
#feature .container:nth-child(1) ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 2em -1.5em 0;}
#feature .container:nth-child(1) ul li {display: flex;flex-wrap: wrap;justify-content: space-between;width: calc(50% - 3em);margin: 1.5em;}
#feature .container:nth-child(1) ul li p {width: 100%;}
#feature .container:nth-child(1) ul li p:nth-child(1) {color: #fff;font-size: 112.5%;text-align: center;line-height: 1.75;height: 1.75em;background: var(--color-braun3);}
#feature .container:nth-child(1) ul li p:nth-child(2) {margin-top: 1em;}
#feature .container:nth-child(1) ul li p:nth-child(2) span {color: var(--color-red1);}
#feature .container:nth-child(1) ul li p:nth-child(2) small {font-size: 10px;}
#feature .container:nth-child(1) ul li figure {display: flex;margin-top: 2em;max-width: 567px;}
#feature .container:nth-child(1) ul li figure figcaption {padding: 0;background: transparent;position: absolute;left: 0;right: 0;bottom: 0;z-index: 100;}
#feature .container:nth-child(1) ul li figure figcaption span {display: block;color: #fff;font-size: 10px;line-height: 1;padding: 0.3em 0.5em 0.28em;background: rgba(0, 0, 0, 0.5);position: absolute;right: 0;bottom: 0;z-index: 1;}
#feature .container:nth-child(1) ul li:nth-child(1) figure figcaption span:nth-child(2) {right: 34.7%;}
#feature .container:nth-child(1) ul li:nth-child(1) figure figcaption span:nth-child(3) {right: 61.3%;}
#feature .container:nth-child(1) ul li:nth-child(4) figure figcaption span:nth-child(2) {right: 50.3%;}
#feature .container:nth-child(2) {margin: 4em 0;}
#feature .container:nth-child(2) div {width: 90%;max-width: 880px;margin: 2em auto 0;}
#feature .container:nth-child(2) div p {text-indent: 2em;}
#feature .container:nth-child(2) div p small {font-size: 10px;}
#feature .container:nth-child(2) div figure {margin-top: 1em;}
#model .container:nth-child(1) figure {position: relative;padding-top: 56.21%;}
#model .container:nth-child(1) figure iframe {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
#model .container:nth-child(1) figure:nth-child(2) {margin-top: 2em;}
#model .container:nth-child(2) {padding: 4em 0 16em;margin-top: 4em;background: var(--color-braun4);}
#model .container:nth-child(2) > div {display: flex;flex-wrap: wrap;justify-content: space-between;}
#model .container:nth-child(2) > div div {width: 46%;}
#model .container:nth-child(2) .point h2,
#model .container:nth-child(2) .concept h2 {color: #fff;font-size: 187.5%;letter-spacing: 0.2em;opacity: 0.4;}
#model .container:nth-child(2) .concept p {color: #fff;line-height: 2.25;letter-spacing: 0.1em;margin-top: 2em;}
#model .container:nth-child(2) .concept p span {color: var(--color-yellow1);}
#model .container:nth-child(2) .point dl {display: flex;flex-wrap: wrap;justify-content: flex-start;margin-top: 2em;}
#model .container:nth-child(2) .point dl dt,
#model .container:nth-child(2) .point dl dd {margin-bottom: 1em;}
#model .container:nth-child(2) .point dl dt {color: var(--color-braun4);line-height: 1.75;text-align: center;width: 10.5em;background: #eae5da;border-radius: 2em;}
#model .container:nth-child(2) .point dl dd {color: #fff;margin-left: 1em;}
#model .container:nth-child(3) {max-width: 1200px;margin: -15em auto 0;}
#experience .container:nth-child(1) {position: relative;}
#experience .container:nth-child(1) > p {color: #fff;font-size: 225%;line-height: 1.72;letter-spacing: 0.1em;text-align: right;text-shadow: 0 0 25px #000,0 0 25px #000,0 0 25px #000,0 0 25px #000;width: 90%;max-width: 1400px;position: absolute;top: 2em;left: 50%;z-index: 1;transform: translateX(-50%);}
#experience .container:nth-child(1) div {color: #fff;padding: 4em 5em;background: rgba(0,0,0,0.5);position: absolute;left: 0;bottom: 0;z-index: 1;}
#experience .container:nth-child(1) div h2 {font-size: 150%;}
#experience .container:nth-child(1) div p {line-height: 2.25;margin-top: 1.5em;}
#experience .container:nth-child(1) figure {height: 43vw;overflow: hidden;}
#experience .container:nth-child(1) figure img {height: 116%;object-fit: cover;}
#experience .container:nth-child(2) {padding: 5em 0;background: var(--color-braun2);}
#experience .container:nth-child(2) .box {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#experience .container:nth-child(2) .box .img {width: 55%;position: relative;}
#experience .container:nth-child(2) .box .img p {display: inline-block;font-size: 150%;padding: 0.2em 1em;background: #fff;position: absolute;top: 3em;z-index: 1;}
#experience .container:nth-child(2) .box .txt {width: 45%;}
#experience .container:nth-child(2) .box .txt h2 {font-size: 125%;letter-spacing: 0.05em;line-height: 1.75;padding-top: 6em;}
#experience .container:nth-child(2) .box .txt h2::after {display: block;content: '';width: 100%;height: 1px;margin: 1em 0;background: #333;}
#experience .container:nth-child(2) .box .txt p {line-height: 1.75;}
#experience .container:nth-child(2) .box .txt p span {color: var(--color-red1);}
#experience .container:nth-child(2) .box01 .img p {right: 0;transform: translateX(86%);}
#experience .container:nth-child(2) .box01 .txt {padding-left: 4em;}
#experience .container:nth-child(2) .box02 {flex-direction: row-reverse;margin-top: 5em;}
#experience .container:nth-child(2) .box02 .img p {padding: 0.2em 2em;left: 0;transform: translateX(-86%);}
#experience .container:nth-child(2) .box02 .txt {padding-right: 4em;}
#experience .container:nth-child(2) > a {width: 90%;}
#history .container:nth-child(1) {text-align: center;padding: 5em 0;}
#history .container:nth-child(1) h2 {font-size: 187.5%;letter-spacing: 0.05em;}
#history .container:nth-child(1) p {line-height: 2.25;margin-top: 3em;}
#history .container:nth-child(2) {padding-bottom: 5em;}
#history .container:nth-child(2) h2 {color: #fff;font-size: 125%;letter-spacing: 0.05em;text-align: center;padding: 0.2em 0.2em 0.25em;background: var(--color-braun1);}
#history .container:nth-child(2) > p {text-align: center;line-height: 2.25;margin-top: 2em;}
#history .container:nth-child(2) ul {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 2em 0 5em;}
#history .container:nth-child(2) ul li {text-align: center;width: 33%;padding: 2em 3em;background: linear-gradient(to right,#f6f3ec,#e8e0cf);}
#history .container:nth-child(2) ul li p:nth-child(1) {color: var(--color-braun1);font-size: 125%;}
#history .container:nth-child(2) ul li p:nth-child(1)::after {display: block;content: '';width: 100%;height: 1px;margin: 0.75em 0;background: #333;}
#history .container:nth-child(2) ul li p:nth-child(2) {line-height: 1.75;}
#history .container:nth-child(2) .box {display: grid;grid-template-columns: 1fr 1.4fr;grid-template-rows: 1fr 1fr;margin-top: 2em;}
#history .container:nth-child(2) .box figure {position: relative;}
#history .container:nth-child(2) .box figure:nth-child(1) {grid-column: 1 / 2;grid-row: 1 / 2;}
#history .container:nth-child(2) .box figure:nth-child(2) {grid-column: 1 / 2;grid-row: 2 / 3;}
#history .container:nth-child(2) .box figure:nth-child(3) {grid-column: 2 / 3;grid-row: 1 / 3;}
#history .container:nth-child(2) .box figure img {width: 100%;height: 100%;object-fit: cover;}
@media only screen and (max-width: 1500px) {
  #billboard .container:nth-child(2) {padding: 1.25em 0;background: url("../img/index/bg01_pc.webp") no-repeat center/cover;position: relative;transform: none;}
  #billboard .container:nth-child(2)::after {display: block;content: '';width: 100%;height: 100%;background: rgba(0,0,0,0.2);position: absolute;top: 0;left: 0;}  
  #billboard .container:nth-child(2) div {display: grid;grid-template-columns: 40% 60%;grid-template-rows: 60% 40%;gap: 0;color: #fff;max-width: 950px;margin: 0 auto;position: relative;z-index: 1;}
  #billboard .container:nth-child(2) div::after {display: block;content: '';width: 1px;height: 90%;background: rgba(255,255,255,0.6);position: absolute;top: 5%;left: 39%;z-index: 1;}
  #billboard .container:nth-child(2) p:nth-of-type(1) {grid-row: 1 / 3;grid-column: 1 / 2;font-size: 350%;border: none;position: relative;}
  #billboard .container:nth-child(2) h1 {grid-row: 1 / 2;grid-column: 2 / 3;line-height: 1;position: relative;}
  #billboard .container:nth-child(2) h1 span:nth-child(2) ruby,
  #billboard .container:nth-child(2) h1 span {display: inline;}
  #billboard .container:nth-child(2) h1 span:nth-child(2) ruby {position: relative;}
  #billboard .container:nth-child(2) h1 span:nth-child(2) ruby rb {font-size: 35%;max-width: 100%;margin: 0;position: absolute;left: 0;right: 0;bottom: calc(100% - 0.25em);}
  #billboard .container:nth-child(2) h1 span:nth-child(2) ruby rb::after {display: none;}
  #billboard .container:nth-child(2) p:nth-of-type(2) {grid-row: 2 / 3;grid-column: 2 / 3;font-size: 125%;line-height: 1;margin: 0;}
  #billboard .container:nth-child(2) div {opacity: 1;}
  #intro .container div {padding: 2em 3em;}
  #intro .container > p {font-size: 175%;}
  #intro .container div h2 {font-size: 137.5%;}
  #intro .container div p {line-height: 2;margin-top: 1em;}
  #model .container:nth-child(2) .concept {width: 40%;}
  #model .container:nth-child(2) .point {width: 55%;}
  #experience .container:nth-child(1) div {padding: 2em 3em;}
  #experience .container:nth-child(1) > p {font-size: 175%;}
  #experience .container:nth-child(1) div h2 {font-size: 137.5%;}
  #experience .container:nth-child(1) div p {line-height: 2;margin-top: 1em;}
}
@media only screen and (max-width: 1300px) {
  #lead .container:nth-child(2) div {width: 45%;}
  #lead .container:nth-child(2) div p:nth-child(1) {font-size: 137.5%;}
  #lead .container:nth-child(2) div p:nth-child(2) {line-height: 2;margin-top: 1em;}
  #model .container:nth-child(2) {text-align: center;}  
  #model .container:nth-child(2) .concept {width: 100%;}
  #model .container:nth-child(2) .point {width: 100%;max-width: 630px;margin: 4em auto 0;}
  #experience .container:nth-child(2) .box .img p {font-size: 137.5%;top: 1.5em;}
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  body {font-size: 1.4vw;}
  #lead .container:nth-child(2) {font-size: 1.4vw;}
  #model .container:nth-child(2) .point {max-width: 58vw;}
}
@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
  #billboard h2 {width: 90%;}
  #billboard .container:nth-child(1) p {font-size: 150%;top: 38%;letter-spacing: 0.2em;}
  #billboard .container:nth-child(1) p span:nth-of-type(1) {transform: translateX(0);}
  #billboard .container:nth-child(1) figure {height: 140vw;}
  #billboard .container:nth-child(2) {padding: 1em 0 1.25em;}
  #billboard .container:nth-child(2) div {display: block;}
  #billboard .container:nth-child(2) div::after {display: none;}  
  #billboard .container:nth-child(2) p:nth-of-type(1) {font-size: 225%;padding: 0;border: none;}
  #billboard .container:nth-child(2) h1 span:nth-child(1) {font-size: 150%;}
  #billboard .container:nth-child(2) h1 span:nth-child(2) {font-size: 225%;font-weight: 500;letter-spacing: 0;}
  #billboard .container:nth-child(2) h1 span:nth-child(2) ruby rb {font-size: 40%;bottom: calc(100% - 0.7em);}
  #billboard .container:nth-child(2) p:nth-of-type(2) {font-size: 100%;margin-top: 0.5em;}
  #lead {padding: 2em 0 0;}
  #lead .container:nth-child(1) p:nth-of-type(1) {font-size: 137.5%;}
  #lead .container:nth-child(1) h2 {font-size: 175%;}
  #lead .container:nth-child(1) h2 small {font-size: 60%;}
  #lead .container:nth-child(1) p:nth-of-type(2) {line-height: 2;margin-top: 1.5em;}
  #lead .container:nth-child(2) {width: 100%;margin-top: 2em;padding: 5vw;}
  #lead .container:nth-child(2) figure {width: 100%;padding-top: 56.21%;}
  #lead .container:nth-child(2) div {width: 100%;margin-top: 1.5em;}
  #lead .container:nth-child(2) div p:nth-child(2) {margin-top: 1em;}
  #intro .container > p {font-size: 150%;line-height: 1.5;top: 1.5em;}
  #intro .container div {padding: 5vw 5vw 7vw;background: transparent;}
  #intro .container div h2 {font-size: 125%;}
  #intro .container figure {height: 140vw;}  
  #feature .container:nth-child(1) {margin-top: 2em;}
  #feature .container:nth-child(1) ul {margin: 1.5em 0 0;}
  #feature .container:nth-child(1) ul li {margin: 0;width: 100%;}
  #feature .container:nth-child(1) ul li + li {margin-top: 3em;}
  #feature .container:nth-child(1) ul li figure {margin-top: 1em;max-width: 100%;}
  #feature .container:nth-child(2) {margin: 3em 0;}
  #model .container:nth-child(1) figure:nth-child(1) {padding-top: 115%;} 
  #model .container:nth-child(1) figure:nth-child(2) {margin-top: 1em;}
  #model .container:nth-child(2) {padding: 3em 0 7em;margin-top: 2em;}
  #model .container:nth-child(2) .point h2,
  #model .container:nth-child(2) .concept h2 {font-size: 175%;letter-spacing: 0.15em;}
  #model .container:nth-child(2) .concept p {line-height: 2;margin-top: 1em;}
  #model .container:nth-child(2) .point {margin-top: 2em;}
  #model .container:nth-child(2) .point dl dt {margin-bottom: 0.5em;}
  #model .container:nth-child(2) .point dl dd {text-align: left;margin: 0 0 1.5em 0;}
  #model .container:nth-child(3) {margin: -7em -10vw 0 -11vw;}
  #experience .container:nth-child(1) > p {font-size: 150%;line-height: 1.5;text-shadow: 0 0 15px #123b66,0 0 15px #123b66,0 0 15px #123b66,0 0 15px #123b66,0 0 15px #123b66;top: 1.5em;left: 50%;right: auto;transform: translateX(-50%);}
  #experience .container:nth-child(1) div {padding: 5vw 5vw 7vw;}
  #experience .container:nth-child(1) div h2 {font-size: 125%;}
  #experience .container:nth-child(1) figure {height: 140vw;}  
  #experience .container:nth-child(2) {padding: 3em 0;}
  #experience .container:nth-child(2) .box .img {width: 100%;}
  #experience .container:nth-child(2) .box .img p {font-size: 131.25%;font-weight: 600;line-height: 1.25;padding: 0.5em 0.75em !important;top: 1em;transform: none;}
  #experience .container:nth-child(2) .box .txt {padding: 1em 0 0;width: 100%;}
  #experience .container:nth-child(2) .box .txt h2 {padding-top: 0;}
  #experience .container:nth-child(2) .box .txt h2::after {margin: 0.5em 0;}
  #experience .container:nth-child(2) .box02 {margin-top: 2em;}
  #experience .container:nth-child(2) > a {margin-top: 1.5em;}
  #history .container:nth-child(1) {padding: 3em 0;}
  #history .container:nth-child(1) h2 {font-size: 137.5%;}
  #history .container:nth-child(1) p {line-height: 2;white-space: nowrap;margin-top: 1.5em;}
  #history .container:nth-child(2) {padding-bottom: 3em;}
  #history .container:nth-child(2) > p {white-space: nowrap;margin-top: 1.5em;}
  #history .container:nth-child(2) ul {margin: 1.5em 0 3em;}
  #history .container:nth-child(2) ul li {width: 100%;padding: 5vw;}
  #history .container:nth-child(2) ul li + li {margin-top: 1em;}
  #history .container:nth-child(2) .box {display: block;}
  #history .container:nth-child(2) > a {margin-top: 2em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}