@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap");

@charset "UTF-8";
/* Variables
****************************************************************************/
/* Media Queries
****************************************************************************/
/* Utilities
****************************************************************************/
/*clearfix*/
/* set some element's line-height to 1em because of adjust text margin */
/*set fontfamily noto 700*/
/*set fontfamily*/
/*---------------------------------------------------------
font
---------------------------------------------------------*/
/*---------------------------------------------------------
function
---------------------------------------------------------*/
/*---------------------------------------------------------
common
---------------------------------------------------------*/
.main-wrapper {
  background-color: #fff;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif; }
  .main-wrapper img {
    width: 100%; }
  .main-wrapper .res-pc {
    display: inline !important; }
    @media only screen and (max-width: 767px) {
      .main-wrapper .res-pc {
        display: none !important; } }
  .main-wrapper .res-sp {
    display: none !important; }
    @media only screen and (max-width: 767px) {
      .main-wrapper .res-sp {
        display: inline !important; } }
  .main-wrapper * {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }

/*---------------------------------------------------------
mv
---------------------------------------------------------*/
#mv {
  position: relative;
  background-color: #000; }
  #mv #mv-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden; }
    #mv #mv-box:before {
      position: absolute;
      display: block;
      content: " ";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1; }
    #mv #mv-box iframe {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: 100%;
      height: 200%; }

/*---------------------------------------------------------
slogan
---------------------------------------------------------*/
#slogan {
  padding-top: 60px; }
  @media print, screen and (min-width: 768px) {
    #slogan {
      padding-top: 120px; } }
  #slogan #slogan-title {
    width: min( 73.6vw, 276px);
    margin: 0 auto; }
    @media print, screen and (min-width: 768px) {
      #slogan #slogan-title {
        width: 461px; } }
  #slogan #slogan-logo {
    width: 96px;
    margin: 15px auto 0; }
    @media print, screen and (min-width: 768px) {
      #slogan #slogan-logo {
        width: 190px;
        margin-top: 30px; } }
  #slogan #slogan-txt {
    margin-top: 35px; }
    @media print, screen and (min-width: 768px) {
      #slogan #slogan-txt {
        margin-top: 50px; } }
    #slogan #slogan-txt p {
      font-size: min( 4vw, 15px);
      line-height: 2.08333;
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      text-align: center;
      -webkit-font-smoothing: auto; }
      @media print, screen and (min-width: 768px) {
        #slogan #slogan-txt p {
          font-size: 20px;
          line-height: 2.1; } }
      #slogan #slogan-txt p:nth-of-type(n+2) {
        margin-top: 25px; }
        @media print, screen and (min-width: 768px) {
          #slogan #slogan-txt p:nth-of-type(n+2) {
            margin-top: 50px; } }

/*---------------------------------------------------------
youtube
---------------------------------------------------------*/
#youtube {
  margin-top: 55px;
  padding: 0 15px; }
  @media print, screen and (min-width: 768px) {
    #youtube {
      width: 600px;
      margin: 135px auto 0; } }
  #youtube #youtube-title {
    width: 277px;
    width: min( 85.33333vw, 320px);
    margin: 0 auto; }
    @media print, screen and (min-width: 768px) {
      #youtube #youtube-title {
        width: 554px; } }
  #youtube #tab-contents {
    margin-top: 13px;
    transition: opacity 0.3s, height 0.3s; }
    @media print, screen and (min-width: 768px) {
      #youtube #tab-contents {
        margin-top: 25px; } }
  #youtube .tab-box {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    height: 0;
    min-height: 0;
    overflow: hidden;
    transition: opacity 0.3s 0.15s; }
    #youtube .tab-box.open {
      opacity: 1;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      height: auto; }
  #youtube .cbox-pct {
    position: relative; }
    #youtube .cbox-pct .ic-play {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: 56px; }
      @media print, screen and (min-width: 768px) {
        #youtube .cbox-pct .ic-play {
          width: 75px; } }
  #youtube #tab-menu {
    margin-top: 5px; }
    @media print, screen and (min-width: 768px) {
      #youtube #tab-menu {
        margin-top: 10px; } }
    #youtube #tab-menu ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      #youtube #tab-menu ul li {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: calc( (100% - 5px) / 2);
        height: 35px;
        border: 1px solid #000;
        font-size: min( 3.46667vw, 13px);
        cursor: pointer; }
        @media print, screen and (min-width: 768px) {
          #youtube #tab-menu ul li {
            width: calc( (100% - 10px) / 2);
            height: 55px;
            font-size: 14px; } }
        #youtube #tab-menu ul li:before {
          position: absolute;
          display: block;
          content: " ";
          background-color: #000;
          width: 16px;
          height: 1px;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          right: 0; }
        #youtube #tab-menu ul li.on {
          background-color: #000;
          color: #fff; }
          #youtube #tab-menu ul li.on:before {
            background-color: #fff; }

/*---------------------------------------------------------
lyric
---------------------------------------------------------*/
#lyric {
  margin-top: 40px;
  margin-top: 60px;
  text-align: center;
  font-family: 'Noto Serif JP', serif; }
  @media print, screen and (min-width: 768px) {
    #lyric {
      margin-top: 85px; } }
  #lyric #lyric-title {
    font-size: min( 7.46667vw, 28px);
    font-weight: 600;
    letter-spacing: 0.1em; }
    @media print, screen and (min-width: 768px) {
      #lyric #lyric-title {
        font-size: 24px; } }
    #lyric #lyric-title small {
      display: block;
      font-size: 60%;
      font-weight: 400; }
      @media print, screen and (min-width: 768px) {
        #lyric #lyric-title small {
          font-size: 13px; } }
  #lyric #lyric-txt {
    margin-top: 25px; }
    @media print, screen and (min-width: 768px) {
      #lyric #lyric-txt {
        margin-top: 35px; } }
    #lyric #lyric-txt p {
      font-size: 10px;
      font-size: min( 4.26667vw, 16px);
      line-height: 3.05;
      letter-spacing: 0.15em; }
      @media print, screen and (min-width: 768px) {
        #lyric #lyric-txt p {
          font-size: 15px;
          line-height: 3.06667; } }

/*---------------------------------------------------------
profile
---------------------------------------------------------*/
#profile {
  margin-top: 50px;
  padding: 0 15px 60px; }
  @media print, screen and (min-width: 768px) {
    #profile {
      padding: 0 20px 120px;
      max-width: 1000px;
      margin: 90px auto 0; } }
  #profile #profile-box {
    border: 1px solid #000;
    padding: 20px; }
    @media print, screen and (min-width: 768px) {
      #profile #profile-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
        padding: 40px; } }
    @media print, screen and (min-width: 768px) {
      #profile #profile-box #profile-txt {
        width: 51.2%;
        margin-left: 2.85714%; } }
    #profile #profile-box #profile-txt ._title {
      margin-top: 15px;
      font-size: min( 5.33333vw, 20px);
      font-weight: bold; }
      @media print, screen and (min-width: 768px) {
        #profile #profile-box #profile-txt ._title {
          margin-top: 0;
          font-size: 20px; } }
    #profile #profile-box #profile-txt p {
      margin-top: 10px;
      font-size: min( 3.73333vw, 14px);
      line-height: 2.16667; }
      @media print, screen and (min-width: 768px) {
        #profile #profile-box #profile-txt p {
          margin-top: 15px;
          font-size: 14px;
          line-height: 2; } }
    @media print, screen and (min-width: 768px) {
      #profile #profile-box #profile-img {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1; } }
    #profile #profile-box #profile-img dl {
      margin-top: 15px; }
      @media print, screen and (min-width: 768px) {
        #profile #profile-box #profile-img dl {
          margin-top: 20px; } }
      #profile #profile-box #profile-img dl dt {
        font-size: min( 3.73333vw, 14px);
        font-weight: bold; }
        @media print, screen and (min-width: 768px) {
          #profile #profile-box #profile-img dl dt {
            font-size: 12px; } }
      #profile #profile-box #profile-img dl dd {
        margin-top: 10px; }
        @media print, screen and (min-width: 768px) {
          #profile #profile-box #profile-img dl dd {
            margin-top: 10px; } }
        #profile #profile-box #profile-img dl dd ul li {
          font-size: min( 3.2vw, 12px);
          line-height: 1.4; }
          @media print, screen and (min-width: 768px) {
            #profile #profile-box #profile-img dl dd ul li {
              font-size: 12px;
              line-height: 1.66667; } }
          #profile #profile-box #profile-img dl dd ul li:nth-child(n+2) {
            margin-top: 1em; }
            @media print, screen and (min-width: 768px) {
              #profile #profile-box #profile-img dl dd ul li:nth-child(n+2) {
                margin-top: 0; } }
          #profile #profile-box #profile-img dl dd ul li a {
            display: block; }
            @media print, screen and (min-width: 768px) {
              #profile #profile-box #profile-img dl dd ul li a {
                display: inline; } }
            #profile #profile-box #profile-img dl dd ul li a:after {
              display: inline-block;
              content: " ";
              background: url(/coffee/slogan/img/icon-blank.gif) no-repeat center center/contain;
              width: 0.84848em;
              height: 0.84848em;
              margin-left: 0.5em; }

/*---------------------------------------------------------
twitter
---------------------------------------------------------*/
#twitter {
  background-color: #eeeeee;
  padding: 50px 15px; }
  @media print, screen and (min-width: 768px) {
    #twitter {
      padding: 100px 0; } }
  #twitter #twitter-title {
    width: 24px;
    margin: 0 auto; }
    @media print, screen and (min-width: 768px) {
      #twitter #twitter-title {
        width: 39px; } }
  #twitter #twitter-box {
    margin: 25px auto 0;
    height: 400px;
    overflow: auto; }
    @media print, screen and (min-width: 768px) {
      #twitter #twitter-box {
        margin-top: 40px;
        width: 700px;
        height: 700px; } }

/*---------------------------------------------------------
f_logo
---------------------------------------------------------*/
#f_logo {
  padding: 50px 0; }
  @media print, screen and (min-width: 768px) {
    #f_logo {
      padding: 100px 0; } }
  #f_logo #f_logo-img {
    width: 81px;
    margin: 0 auto; }
    @media print, screen and (min-width: 768px) {
      #f_logo #f_logo-img {
        width: 122px; } }