body {
  font-size: 3.0vw;
  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: fixed;
    right: 5%;
    top: 2%;
    z-index: 13;
    width: 28px;
    padding-top: 3%; }
  header h2 {
    background: #9cb0a7;
    width: 100%;
    padding: 2% 18% 4% 5%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    color: #fff;
    font-weight: 700;
    font-size: 4.6vw;
    display: flex;
    justify-content: space-between;
    line-height: 1.3; }
    header h2 span {
      display: block;
      font-size: 2.2vw;
      margin-bottom: 0%; }
    header h2 b {
      display: block;
      padding-top: 2%; }
    header h2 div:first-child {
      width: 45%;
      padding-top: 4%;
      letter-spacing: 0; }
    header h2 div:last-child {
      width: 54%; }

footer {
  position: relative;
  padding: 8% 5%;
  background: #9cb0a7;
  color: #fff; }
  footer h2 {
    width: 40%;
    margin-bottom: 5%; }
  footer .copy {
    font-size: 2.6vw; }
  footer .wf {
    width: 35%;
    position: absolute;
    right: 5%;
    bottom: 9.5%; }
  footer nav {
    margin-bottom: 5%; }
    footer nav ul li {
      margin-bottom: 2%; }
  footer .sns {
    width: 30%;
    margin-bottom: 5%; }
    footer .sns ul {
      display: flex;
      justify-content: space-between; }
    footer .sns li {
      width: 28%; }

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

#mainVisual {
  position: relative;
  overflow: hidden;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10%;
  padding-top: 18%; }
  #mainVisual h2 {
    color: #fff;
    font-weight: 700;
    font-size: 5.0vw;
    display: flex;
    justify-content: space-between;
    width: 90%; }
    #mainVisual h2 span {
      display: block;
      font-size: 2.2vw;
      margin-bottom: 1%; }
    #mainVisual h2 b {
      display: block;
      padding-top: 2%; }
    #mainVisual h2 div:first-child {
      width: 45%;
      padding-top: 4%; }
    #mainVisual h2 div:last-child {
      width: 54%; }
  #mainVisual ul li {
    overflow: hidden;
    position: relative;
    background-color: black; }
    #mainVisual ul li a dl {
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 3.2vw;
      width: 54%;
      position: absolute;
      bottom: 5%;
      left: 23%; }
      #mainVisual ul li a dl dt {
        margin-bottom: 4%;
        width: 70%;
        margin: 0 auto 4% auto; }
      #mainVisual ul li a dl dd {
        margin-bottom: 4%; }
      #mainVisual ul li a dl .link {
        text-align: center;
        font-family: urw-din, sans-serif;
        font-size: 2.6vw;
        font-weight: 500;
        border-radius: 100px;
        background: #603813;
        width: 60%;
        padding: 4% 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: 2.4vw;
      margin: 0 auto 1% auto; }
  #mainVisual ul li:nth-child(1) {
    background: #9cb0a7;
    width: 100%;
    padding: 0% 5% 0% 5%;
    height: 14%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none; }
    #mainVisual ul li:nth-child(1) h2 {
      position: absolute;
      top: 49%;
      left: 50%;
      transform: translate(-50%, -50%); }
  #mainVisual ul li:nth-child(2) {
    background: #000;
    height: 40vh; }
    #mainVisual ul li:nth-child(2) a {
      display: block;
      height: 40vh;
      background: url("../img/new/mv_cokagen.webp") no-repeat center center;
      background-size: cover;
      position: relative; }
  #mainVisual ul li:nth-child(3) {
    background: #000;
    height: 40vh; }
    #mainVisual ul li:nth-child(3) a {
      display: block;
      height: 40vh;
      background: url("../img/new/mv_cokagea.webp") no-repeat center center;
      background-size: cover;
      position: relative; }
      #mainVisual ul li:nth-child(3) a dl .link {
        background: #2e85bc; }

#concept {
  padding: 10% 0 15% 0;
  overflow: hidden; }
  #concept h3 {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 4.8vw;
    margin-bottom: 8%;
    text-align: center; }
  #concept h4 {
    font-weight: 700;
    text-align: center;
    font-weight: 700;
    font-size: 4.4vw;
    letter-spacing: 4px; }

#story {
  background: url("../img/common/bg1.webp") repeat-y top center;
  background-size: 100%;
  padding: 15% 0; }
  #story h3 {
    font-family: urw-din, sans-serif;
    font-weight: 400;
    font-size: 4.8vw;
    margin-bottom: 8%;
    text-align: center; }
  #story ul {
    width: 90%;
    margin: 0 auto 0% auto; }
    #story ul li {
      background: #fff;
      padding: 8%;
      margin-bottom: 8%;
      box-shadow: 5px 5px 13px -8px #777777;
      position: relative; }
      #story ul li .pht {
        width: 100%;
        margin-bottom: 5%; }
      #story ul li .txt {
        width: 100%;
        font-size: 2.8vw; }
        #story ul li .txt .icn {
          background: #57a6d8;
          width: 24%;
          text-align: center;
          color: #fff;
          font-size: 3.0vw;
          margin-bottom: 2%;
          font-family: urw-din, sans-serif; }
        #story ul li .txt h4 {
          font-size: 4.6vw;
          margin-bottom: 2%; }
      #story ul li .no {
        background: #57a6d8;
        padding: 3%;
        color: #fff;
        font-size: 3.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 {
  width: 84%;
  margin: 0 auto 10% auto; }
  #topics h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 4.8vw;
    margin-bottom: 2%; }
  #topics ul li {
    margin-bottom: 10%; }

#fablic {
  margin: 0 auto 5% auto; }
  #fablic h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 4.8vw;
    margin-bottom: 3%; }
  #fablic .txt {
    font-size: 2.5vw;
    letter-spacing: 0; }
  #fablic .pht2 {
    padding: 5% 0; }
  #fablic ul li {
    overflow: hidden;
    margin-bottom: 15%; }
    #fablic ul li dl dt {
      font-size: 5.6vw;
      font-feature-settings: "palt";
      letter-spacing: 1px;
      font-weight: 600; }
    #fablic ul li dl dd {
      margin-bottom: 8%; }
    #fablic ul li dl span {
      font-size: 2.6vw; }
    #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) {
    margin-bottom: 10%; }
  #fablic ul li:nth-child(1) div:nth-child(2) {
    width: 84%;
    margin: 0 auto 5%; }
  #fablic ul li:nth-child(1) dl dt {
    margin-bottom: 5%; }
  #fablic ul li:nth-child(1) .pht2 {
    width: 100%;
    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(2) {
    width: 84%;
    margin: 0 auto; }
  #fablic ul li:nth-child(2) dl {
    padding-top: 10%; }
  #fablic ul li:nth-child(2) .pht2 {
    width: 100%;
    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: 84%;
    margin: 0 auto; }
  #fablic ul li:nth-child(3) div:nth-child(2) {
    width: 84%;
    margin: 0 auto; }
  #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: 84%;
  margin: 0 auto 5% auto; }
  #brand h2 {
    font-family: urw-din, sans-serif;
    font-weight: 600;
    font-size: 4.8vw;
    margin-bottom: 1%; }
  #brand ul li {
    width: 100%;
    margin-bottom: 5%;
    overflow: hidden;
    position: relative;
    height: 30vh;
    background-color: black; }
    #brand ul li .new {
      font-family: urw-din, sans-serif;
      font-size: 2.6vw;
      position: absolute;
      left: 0;
      top: 0;
      background: #57a5d7;
      text-align: center;
      width: 15%;
      padding: 1% 0;
      color: #fff;
      font-weight: 700; }
    #brand ul li a dl {
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 2.4vw;
      width: 50%;
      position: absolute;
      bottom: 8%;
      right: 4%; }
      #brand ul li a dl dt {
        margin-bottom: 4%;
        width: 70%;
        margin: 0 auto 4% auto; }
      #brand ul li a dl dd {
        margin-bottom: 4%; }
      #brand ul li a dl .link {
        font-family: urw-din, sans-serif;
        font-size: 2.4vw;
        font-weight: 500;
        border-radius: 100px;
        width: 60%;
        padding: 3% 0;
        margin: 0 auto; }
  #brand ul li:nth-child(1) {
    background: #000;
    width: 100%; }
    #brand ul li:nth-child(1) a {
      display: block;
      height: 30vh;
      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: 100%; }
    #brand ul li:nth-child(2) a {
      display: block;
      height: 30vh;
      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; }