body {
  font-feature-settings: "palt"; }

header {
  position: relative;
  width: 100%; }
  header h1 {
    position: absolute;
    left: 5%;
    top: 5%;
    z-index: 11;
    width: 120px;
    padding-top: 3%;
    display: none; }
  header p {
    position: absolute;
    left: 4%;
    top: 5%;
    z-index: 11;
    width: 25px;
    padding-top: 3%; }
  header h2 {
    display: none; }

footer {
  position: relative;
  font-family: urw-din, sans-serif;
  padding: 2% 8% 2% 8%;
  background: #9cb0a7;
  color: #fff; }
  footer h2 {
    width: 12%;
    margin-bottom: 2%; }
  footer .copy {
    font-size: 0.8vw; }
  footer .wf {
    width: 10%;
    position: absolute;
    right: 8%;
    bottom: 17%; }
  footer nav {
    width: 25%;
    font-size: 0.8vw;
    letter-spacing: 1px;
    position: absolute;
    right: 8%;
    top: 25%; }
    footer nav ul {
      display: flex;
      justify-content: space-between; }
  footer .sns {
    width: 7%;
    margin-bottom: 2%; }
    footer .sns ul {
      display: flex;
      justify-content: space-between; }
    footer .sns li {
      width: 28%; }

main {
  background: url("../img/new/bg.webp") repeat-y top center;
  background-size: 100%;
  padding-bottom: 5%; }

#mainVisual {
  position: relative;
  overflow: hidden;
  z-index: 10;
  width: 100%;
  height: 100vh;
  overflow: hidden; }
  #mainVisual h2 {
    color: #fff;
    font-weight: 700;
    font-size: 1.9vw;
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.3; }
    #mainVisual h2 span {
      display: block;
      font-size: 0.8vw;
      margin-bottom: 2%; }
    #mainVisual h2 b {
      display: block;
      padding-top: 2%; }
  #mainVisual ul {
    display: flex;
    height: 100vh; }
    #mainVisual ul li {
      width: 50%;
      overflow: hidden;
      position: relative;
      height: 100vh;
      background-color: black; }
      #mainVisual ul li a dl {
        text-align: center;
        color: #fff;
        font-weight: 700;
        font-size: 1.1vw;
        width: 50%;
        position: absolute;
        bottom: 12%;
        left: 25%; }
        #mainVisual ul li a dl dt {
          margin-bottom: 8%;
          width: 80%;
          margin: 0 auto 8% auto; }
        #mainVisual ul li a dl dd {
          margin-bottom: 8%; }
        #mainVisual ul li a dl .link {
          font-family: urw-din, sans-serif;
          font-size: 0.8vw;
          font-weight: 500;
          border-radius: 100px;
          background: #603813;
          width: 60%;
          padding: 3% 0;
          margin: 0 auto; }
      #mainVisual ul li .new {
        display: block;
        background: #2e85bc;
        width: 30%;
        text-align: center;
        font-family: urw-din, sans-serif;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        padding: 2% 0;
        font-size: 0.9vw;
        margin: 0 auto 2% auto; }
    #mainVisual ul li:nth-child(3) a {
      display: block;
      height: 100vh;
      background: url("../img/new/mv_cokagea.webp") no-repeat center center;
      background-size: cover; }
      #mainVisual ul li:nth-child(3) a dl .link {
        background: #2e85bc; }
    #mainVisual ul li:nth-child(1) {
      background: #9cb0a7;
      width: 26%;
      z-index: 3; }
    #mainVisual ul li:nth-child(2) {
      background: #000;
      width: 37%;
      z-index: 2; }
      #mainVisual ul li:nth-child(2) a {
        display: block;
        height: 100vh;
        background: url("../img/new/mv_cokagen.webp") no-repeat center center;
        background-size: cover;
        position: relative; }
    #mainVisual ul li:nth-child(3) {
      background: #000;
      width: 37%;
      z-index: 1; }

#concept {
  padding: 5% 0 10% 0; }
  #concept h3 {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 2.0vw;
    margin-bottom: 3%;
    margin-left: 5%; }
  #concept h4 {
    font-weight: 700;
    text-align: center;
    font-weight: 700;
    font-size: 2.4vw;
    letter-spacing: 4px; }

#story {
  background: url("../img/common/bg1.webp") repeat-y top center;
  background-size: 100%;
  padding: 8% 0; }
  #story h3 {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 2.0vw;
    margin-left: 5%;
    margin-bottom: 3%; }
  #story ul {
    width: 80%;
    margin: 0 auto 0% auto; }
    #story ul li {
      background: #fff;
      padding: 3% 5%;
      margin-bottom: 5%;
      box-shadow: 5px 5px 13px -8px #777777;
      position: relative; }
      #story ul li a {
        display: block;
        display: flex;
        justify-content: space-between; }
      #story ul li .pht {
        width: 35%; }
      #story ul li .txt {
        width: 60%;
        font-size: 1.0vw; }
        #story ul li .txt .icn {
          background: #57a6d8;
          width: 12%;
          text-align: center;
          color: #fff;
          font-size: 1.0vw;
          margin-bottom: 2%;
          font-family: urw-din, sans-serif; }
        #story ul li .txt h4 {
          font-size: 1.6vw;
          margin-bottom: 2%; }
      #story ul li .no {
        background: #57a6d8;
        padding: 0.8%;
        color: #fff;
        font-size: 1.0vw;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        font-family: urw-din, sans-serif; }
    #story ul li:last-child {
      margin-bottom: 0; }

#topics {
  background: rgba(255, 255, 255, 0.5);
  padding: 5% 0 2% 0;
  margin-bottom: 10%; }
  #topics .warp {
    width: 80%;
    margin: 0 auto 5% auto; }
  #topics h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 1.8vw;
    margin-bottom: 1%; }
  #topics ul {
    display: flex;
    justify-content: space-between; }
    #topics ul li {
      width: 30%; }
      #topics ul li img {
        margin-bottom: 1%; }

#fablic {
  width: 80%;
  margin: 0 auto 5% auto; }
  #fablic h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 1.8vw;
    margin-bottom: 10%; }
  #fablic .txt {
    font-size: 0.8vw; }
  #fablic .pht2 {
    padding: 5% 0; }
  #fablic ul li {
    overflow: hidden;
    margin-bottom: 10%; }
    #fablic ul li dl dt {
      font-size: 2.4vw;
      font-feature-settings: "palt";
      letter-spacing: 3px;
      font-weight: 600; }
    #fablic ul li dl dd {
      margin-bottom: 5%; }
    #fablic ul li dl span {
      font-size: 0.8vw; }
    #fablic ul li dl b {
      font-weight: 900;
      background: linear-gradient(transparent 60%, #ffdcad 60%); }
  #fablic ul li:nth-child(1) div:nth-child(1) {
    width: 50%;
    float: right; }
  #fablic ul li:nth-child(1) div:nth-child(2) {
    width: 45%;
    float: left; }
  #fablic ul li:nth-child(1) .pht2 {
    width: 90%;
    margin: 0 auto; }
  #fablic ul li:nth-child(1) dt {
    margin-bottom: 3%; }
  #fablic ul li:nth-child(1) dd {
    line-height: 2; }
  #fablic ul li:nth-child(2) div:nth-child(1) {
    width: 50%;
    float: left; }
  #fablic ul li:nth-child(2) div:nth-child(2) {
    width: 45%;
    float: right; }
  #fablic ul li:nth-child(2) dl {
    padding-top: 10%; }
  #fablic ul li:nth-child(2) .pht2 {
    width: 90%;
    margin: 0 auto; }
  #fablic ul li:nth-child(2) dt {
    margin-bottom: 3%; }
  #fablic ul li:nth-child(2) dd {
    line-height: 2; }
  #fablic ul li:nth-child(3) div:nth-child(1) {
    width: 50%;
    float: left; }
  #fablic ul li:nth-child(3) div:nth-child(2) {
    width: 45%;
    float: right; }
  #fablic ul li:nth-child(3) dl {
    padding-top: 10%; }
  #fablic ul li:nth-child(3) dt {
    margin-bottom: 3%; }
  #fablic ul li:nth-child(3) dd {
    line-height: 2; }

#brand {
  width: 80%;
  margin: 0 auto 5% auto; }
  #brand h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 1.8vw;
    margin-bottom: 1%; }
  #brand ul {
    display: flex;
    height: 50vh; }
    #brand ul li {
      width: 50%;
      overflow: hidden;
      position: relative;
      height: 50vh;
      background-color: black; }
      #brand ul li .new {
        font-family: urw-din, sans-serif;
        font-size: 0.8vw;
        position: absolute;
        right: 0;
        top: 0;
        background: #57a5d7;
        text-align: center;
        width: 10%;
        padding: 1% 0;
        color: #fff;
        font-weight: 700; }
      #brand ul li a dl {
        text-align: center;
        color: #fff;
        font-weight: 700;
        font-size: 0.8vw;
        width: 35%;
        position: absolute;
        bottom: 8%;
        right: 8%; }
        #brand ul li a dl dt {
          margin-bottom: 4%; }
        #brand ul li a dl dd {
          margin-bottom: 4%; }
        #brand ul li a dl .link {
          font-family: urw-din, sans-serif;
          font-size: 0.8vw;
          font-weight: 500;
          border-radius: 100px;
          width: 60%;
          padding: 3% 0;
          margin: 0 auto; }
    #brand ul li:nth-child(1) {
      background: #000;
      width: 50%; }
      #brand ul li:nth-child(1) a {
        display: block;
        height: 50vh;
        background: url("../img/new/bnr_cokagen.webp") no-repeat center center;
        background-size: cover;
        position: relative; }
      #brand ul li:nth-child(1) .link {
        background: #603813; }
    #brand ul li:nth-child(2) {
      background: #000;
      width: 50%; }
      #brand ul li:nth-child(2) a {
        display: block;
        height: 50vh;
        background: url("../img/new/bnr_cokagea.webp") no-repeat center center;
        background-size: cover; }
        #brand ul li:nth-child(2) a dl .link {
          background: #2e85bc; }