@charset "UTF-8";
/*!*
 * @url: https://www.afternoon-tea.xyz/
 * @author: RanaDesign
 */

/* iconfont
----------------------------------------------- */

i.ic {
  font-family: 'iconfont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ic-arrow:before {
  content: "";
}
.ic-bag:before {
  content: "";
}
.ic-blank:before {
  content: "";
}
.ic-check:before {
  content: "";
}
.ic-cross:before {
  content: "";
}
.ic-download:before {
  content: "";
}
.ic-facebook:before {
  content: "";
}
.ic-instagram:before {
  content: "";
}
.ic-line:before {
  content: "";
}
.ic-lock:before {
  content: "";
}
.ic-mail:before {
  content: "";
}
.ic-minus:before {
  content: "";
}
.ic-pdf:before {
  content: "";
}
.ic-play:before {
  content: "";
}
.ic-question:before {
  content: "";
}
.ic-search:before {
  content: "";
}
.ic-share:before {
  content: "";
}
.ic-location:before {
  content: "";
}
.ic-zoom:before {
  content: "";
}
.ic-circle-up:before {
  content: "";
}
.ic-circle-right:before {
  content: "";
}
.ic-circle-cross:before {
  content: "";
}
.ic-comment:before {
  content: "";
}
.ic-twitter:before {
  content: "";
}
.ic-youtube:before {
  content: "";
}

/* global
----------------------------------------------- */

#notices-important {
  margin-top: 0;
}

/* teaday
----------------------------------------------- */

#teaday {
  color: #333;
  background-color: #c6e0dc;
  background-position: center top;
  background-repeat: repeat-y;
  overflow: hidden;
}
#teaday h1,
#teaday h2,
#teaday h3 {
  margin: 0;
  padding: 0;
}
#teaday a {
  color: #333;
  cursor: pointer;
}
#teaday img {
  vertical-align: top;
}
#teaday .clear:after {
  content: "."; 
  display: block;
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* loading
----------------------------------------------- */

#teaday-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1;
}
#teaday-loading .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 50px 0 0 0;
  width: 0;
  height: 2px;
  background: #f0f0f0;
  transition: all 0.5s cubic-bezier(0.19,1,0.22,1);
}
#teaday-loading .progress {
  width: 0;
  height: 2px;
  background: #006450;
}

/* start */

#teaday-loading.start .bar {
  margin-left: -100px;
  width: 200px;
}

/* end */

#teaday-loading.end .bar {
  margin-left: 100px;
  width: 0;
}

/* pc
----------------------------------------------- */

@media print, screen and (min-width:768px) {

  /* teaday
  ----------------------------------------------- */
  
  #teaday {
    padding: 0 0 40px;
    background-image: url(/media/images/lp/teaday-171018/background-pc.png);
  }
  #teaday a {
    transition: opacity 0.2s;
  }
  #teaday a:hover {
    opacity: 0.7;
  }
  #teaday .shadow {
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }
  #teaday .sns ul {
    font-size: 0;
    text-align: center;
  }
  #teaday .sns li {
    margin: 0 13px;
    font-size: 40px;
  }
  #teaday .sns li {
    display: inline-block;
  }

  /* header
  ----------------------------------------------- */
  
  #teaday-header {
    position: relative;
    width: 100%;
    height: 534px;
    background: url(/media/images/lp/teaday-171018/header-ky-pc.png) no-repeat center center;
    background-size: cover;
    overflow: hidden;
  }
  #teaday-header h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -132px 0 0 -281px;
    width: 556px;
    height: 234px;
    text-indent: 100%;
    white-space: nowrap;
    background: url(/media/images/lp/teaday-171018/header-title-pc.png) no-repeat left bottom;
    overflow: hidden;
  }
  
  /* ready */
  
  #teaday-header h1.ready {
    background-position: 0 0;
  }

  /* footer
  ----------------------------------------------- */

  #teaday-footer .banner {
    margin: auto;
    padding: 72px 0 0;
    width: 580px;
  }
  #teaday-footer .banner li {
    margin: 48px 0 0;
    background: white;
  }
  #teaday-footer .banner li a {
    display: block;
    border: 4px solid #333;
  }
  #teaday-footer .caution {
    margin: 50px auto 0;
    width: 635px;
  }
  #teaday-footer .caution li {
    padding: 0 0 0 1.5em;
    font-size: 12px;
    text-indent: -1.5em;
    line-height: 21px;
  }
  #teaday-footer .sns {
    margin: 40px 0 0;
  }

  /* nav
  ----------------------------------------------- */

  #teaday-nav {
    position: absolute;
    top: 573px;
    left: 50%;
    margin: 0 0 0 170px;
    padding: 0 0 10px;
    width: 270px;
    background: #fbf6d6;
    z-index: 1;
  }
  #teaday-nav .nav {
    margin: auto;
    padding: 40px 0 0;
    width: 200px;
  }
  #teaday-nav .nav li {
    position: relative;
    padding: 9px 0 9px 35px;
  }
  #teaday-nav .nav li span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    margin: -17px 0 0;
    width: 20px;
    height: 26px;
    font-size: 20px;
    transform: rotate(90deg);
    transition: transform 0.25s;
  }
  #teaday-nav .nav li i {
    color: #333;
  }
  #teaday-nav .nav li:hover span {
    transform: translateY(3px) rotate(90deg);
  }
  #teaday-nav .sns {
    margin: 20px auto 0;
    padding: 12px 0 0;
    width: 210px;
    border-top: 2px solid #000;
  }
  
  /* material
  ----------------------------------------------- */
  
  #teaday .material {
    background-repeat: no-repeat;    
  }
  #teaday .material.m01 {
    width: 315px;
    height: 366px;
    background-image: url(/media/images/lp/teaday-171018/material01.png);
  }
  #teaday .material.m02 {
    width: 368px;
    height: 307px;
    background-image: url(/media/images/lp/teaday-171018/material02.png);
  }
  #teaday .material.m03 {
    width: 235px;
    height: 219px;
    background-image: url(/media/images/lp/teaday-171018/material03.png);
  }
  #teaday .material.m04 {
    width: 255px;
    height: 229px;
    background-image: url(/media/images/lp/teaday-171018/material04.png);
  }
  #teaday .material.m05 {
    width: 228px;
    height: 215px;
    background-image: url(/media/images/lp/teaday-171018/material05.png);
  }
  #teaday .material.m06 {
    width: 252px;
    height: 244px;
    background-image: url(/media/images/lp/teaday-171018/material06.png);
  }
  #teaday .material.m07 {
    width: 391px;
    height: 263px;
    background-image: url(/media/images/lp/teaday-171018/material07.png);
  }
  #teaday .material.m08 {
    width: 272px;
    height: 260px;
    background-image: url(/media/images/lp/teaday-171018/material08.png);
  }

  /* intro
  ----------------------------------------------- */
  
  #teaday-intro {
    position: relative;
    margin: auto;
    width: 900px;
  }
  
  #teaday-intro .message {
    position: relative;
    margin: -63px 25px 0;
    padding: 30px 0 37px;
    width: 560px;
    text-align: center;
    background: white;
    z-index: 1;
  }
  #teaday-intro .message h2 {
    padding: 0 0 10px;
    font-size: 20px;
    line-height: 36px;
  }
  #teaday-intro .message p {
    padding: 12px 0 0;
    font-size: 14px;
    line-height: 24px;
  }
  
  #teaday-intro .card {
    position: relative;
    margin: 36px auto 0;
    padding: 30px 0;
    width: 900px;
    min-height: 400px;
    background: #e48692;
    z-index: 1;
  }
  #teaday-intro .card h3 {
    margin: 0 30px 0 400px;
    text-align: center;
  }
  #teaday-intro .card p {
    margin: 15px 30px 0 400px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-intro .card .caution {
    margin: 15px 30px 0 400px;
    color: #fff;
  }
  #teaday-intro .card .caution li {
    padding: 0 0 0 1.5em;
    font-size: 12px;
    text-indent: -1.5em;
    line-height: 21px;
  }
  #teaday-intro .card .instagram {
    position: relative;
    margin: 20px 30px 0 400px;
    height: 42px;
    background: #fff;
  }
  #teaday-intro .card .instagram:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #e48692 transparent transparent;
  }
  #teaday-intro .card .instagram a {
    display: block;
    padding: 0 0 0 52px;
    color: #006450;
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
  }
  #teaday-intro .card .instagram span {
    position: absolute;
    top: 50%;
  }
  #teaday-intro .card .instagram span:first-child {
    left: 5px;
    margin: -16px 0 0;
  }
  #teaday-intro .card .instagram span:last-child {
    right: 20px;
    margin: -18px 0 0;
    transition: transform 0.25s;
  }
  #teaday-intro .card .instagram span:first-child i {
    font-size: 34px;
  }
  #teaday-intro .card .instagram span:last-child i {
    font-size: 16px;
  }
  #teaday-intro .card .instagram:hover span:last-child {
    transform: translateX(3px);
  }  
  #teaday-intro .card figure {
    position: absolute;
    top: 30px;
    left: 30px;
  }

  /* material */
  
  #teaday-intro .material {
    position: absolute;
    left: 50%;
  }
  #teaday-intro .material.m01 {
    top: 110px;
    margin: 0 0 0 268px;
  }
  #teaday-intro .material.m02 {
    bottom: -158px;
    margin: 0 0 0 -598px;
  }

  /* section
  ----------------------------------------------- */
  
  #teaday section {
    padding: 120px 0 0;
    text-align: center;
  }
  #teaday section .copy {
    margin: 25px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 21px;
  }
  #teaday section .summary {
    position: relative;
    margin: 25px auto 0;
    padding: 10px 0 0;
    width: 650px;
  }
  #teaday section .summary:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -20px;
    width: 40px;
    height: 1px;
    background: #333;
  }
  #teaday section .summary p {
    padding: 15px 0 0;
    font-size: 14px;
    line-height: 24px;
  }
  #teaday section .summary .caution {
    font-size: 12px;
  }

  #teaday section .button {
    display: inline-block;
    position: relative;
    padding: 0 60px 0 40px;
    height: 54px;
    font-size: 16px;
    font-weight: 500;
    line-height: 48px;
    border: 3px solid #333;
    box-sizing: border-box;
    background: #fff;
  }
  #teaday section .button .arrow {
    position: absolute;
    top: 50%;
    right: 35px;
    margin: -21px 0 0;
    font-size: 20px;
    transition: transform 0.25s;
  }
  #teaday section .button:hover .arrow {
    transform: translateX(3px);
  }
  #teaday section .button .blank {
    position: relative;
    top: 3px;
    left: -5px;
  }

  #teaday section .link {
    display: inline-block;
    position: relative;
    padding: 0 22px 0 5px;
    color: #006450;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  #teaday section .link .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -10px 0 0;
    font-size: 18px;
    transition: transform 0.25s;
  }
  #teaday section .link:hover .arrow {
    transform: translateX(3px);
  }
  #teaday section .link .blank {
    position: relative;
    top: 2px;
    left: -5px;
    font-size: 16px;
  }
    
  /* menu
  ----------------------------------------------- */

  #teaday-menu .detail {
    display: inline-block;
    margin: 50px 0 0;
    text-align: center;
    background: #fff;
  }

  #teaday-menu article .base {
    position: relative;
    padding: 55px 0 40px;
    background: #fff;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
    z-index: 1;
  }
  #teaday-menu article .limit {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 5px 20px;
    font-size: 14px;
    font-weight: 500;
    background: #404040;
  }
  #teaday-menu article h3 {
    margin: 0 40px;
    font-size: 18px;
    line-height: 26px;
  }
  #teaday-menu article .price {
    font-size: 14px;
    font-weight: 500;
  }
  #teaday-menu article .body {
    margin: 20px 40px 0;
    font-size: 14px;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-menu article .caution {
    margin: 20px 40px 0;
    padding: 0 0 0 1.5em;
    font-size: 12px;
    text-align: justify;
    text-indent: -1.5em;
    line-height: 21px;
  }
  #teaday-menu article .line {
    margin: 30px 40px 0;
    padding-top: 30px;
    border-top: 1px solid #c7c7c7;
  }
  
  #teaday-menu .column01,
  #teaday-menu .column02 {
    position: relative;
    width: 1000px;
  }
  #teaday-menu .column01 {
    margin: 40px auto 0;
    padding: 30px 0 0;
    min-height: 378px;
  }
  #teaday-menu .column01 .base {
    margin: 0 0 0 20px;
    width: 420px;
  }
  #teaday-menu .column01 figure {
    position: absolute;
    top: 0;
    right: 45px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }
  #teaday-menu .column02 {
    margin: 60px auto 0;
    min-height: 400px;
  }
  #teaday-menu .column02 .base {
    margin: 0 0 0 540px;
    width: 440px;
  }
  #teaday-menu .column02 figure {
    position: absolute;
    top: 55px;
    left: -10px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }

  /* takeout
  ----------------------------------------------- */
  
  #teaday-takeout .detail {
    padding: 35px 0 0;
   }
  #teaday-takeout .detail p {
    display: block;
    margin: 15px 0 0;
    text-align: center;
  }

  #teaday-takeout .summary .new.pc {
    display: block;
    position: absolute;
    top: -210px;
    left: 50%;
    margin: 0 0 0 -485px;
  }
  #teaday-takeout .summary .new.sp {
    display: none;
  }

  #teaday-takeout article .base {
    position: relative;
    padding: 25px 0 35px;
    background: #fff;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
    z-index: 1;
  }
  #teaday-takeout article h3 {
    margin: 0 40px;
    padding: 0 0 25px;
    font-size: 20px;
    line-height: 30px;
    border-bottom: 2px solid #333;
  }
  #teaday-takeout article h3 .en {
    font-size: 14px;
    font-weight: 600;
  }
  #teaday-takeout article .body {
    margin: 20px 40px 0;
    font-size: 14px;
    text-align: left;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-takeout article .spec {
    margin: 5px 40px 0;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    line-height: 21px;
  }
  #teaday-takeout article .more {
    margin: 25px 0 0;
  }
  #teaday-takeout article .paring {
    display: inline-block;
    position: relative;
    margin: 20px 0 0;
    min-height: 122px;
  }
  #teaday-takeout article .paring .label {
    margin: 0 0 0 230px;
    padding: 21px 0 0;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    line-height: 21px;
  }
  #teaday-takeout article .paring .image {
    position: absolute;
    top: 0;
    left: 0;
  }

  #teaday-takeout .column01,
  #teaday-takeout .column02 {
    position: relative;
    width: 1000px;
  }
  #teaday-takeout .column01 {
    margin: 25px auto 0;
    min-height: 500px;
  }
  #teaday-takeout .column01 .base {
    margin: 0 0 0 540px;
    width: 470px;
  }
  #teaday-takeout .column01 figure {
    position: absolute;
    top: 45px;
    left: 12px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }

  #teaday-takeout .column02 {
    margin: 10px auto 0;
    min-height: 485px;
  }
  #teaday-takeout .column02 .base {
    margin: -155px 0 0 -10px;
    width: 470px;
  }
  #teaday-takeout .column02 figure {
    position: absolute;
    top: 195px;
    right: 5px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }
  #teaday-takeout .column02 .paring .label {
    padding: 15px 0 0;
  }
  
  /* howto */
  
  #teaday-takeout .howto {
    position: relative;
    margin: 48px auto 0;
    width: 720px;
    border: 4px solid #333;
    box-sizing: border-box;
  }
  #teaday-takeout .howto h4 {
    padding: 30px 0 35px;
  }
  #teaday-takeout .howto dl {
    position: relative;
    padding: 25px 0;
    border-top: 2px solid #333;
  }
  #teaday-takeout .howto dt {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -14px 0 0;
    width: 237px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
  }
  #teaday-takeout .howto dd {
    position: relative;
    margin: 0 40px 0 237px;
    padding: 10px 0 10px 40px;
    font-size: 14px;
    text-align: justify;
    line-height: 24px;
    border-left: 1px solid #333;
  }
  #teaday-takeout .howto dd ul {
    margin: 10px 0 0;
  }
  #teaday-takeout .howto dd .image {
    display: block;
    position: absolute;
    right: -115px;
    bottom: -90px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }
  #teaday-takeout .howto dd .image img {
    width: auto;
    height: 225px;
  }

  #teaday-takeout .howto .even dt {
    left: auto;
    right: 0;
  }
  #teaday-takeout .howto .even dd {
    margin: 0 237px 0 40px;
    padding: 10px 40px 10px 0;
    border-left: 0;
    border-right: 1px solid #333;
  }

  /* material */
  
  #teaday-takeout .material {
    position: absolute;
    left: 50%;
  }
  #teaday-takeout .material.m03 {
    top: -130px;
    margin: 0 0 0 -465px;
  }

  /* workshop
  ----------------------------------------------- */

  #teaday-workshop {
    position: relative;
  }
  #teaday-workshop article {
    position: relative;
    margin: 75px auto 0;
    width: 1000px;
    z-index: 1;
  }
  #teaday-workshop .inner {
    margin: 0 0 0 170px;
    padding: 0 0 35px;
    width: 700px;
    background: #e3ecbb;
  }
  #teaday-workshop figure {
    position: absolute;
    top: -40px;
    left: 55px;
    width: 400px;
    height: 300px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
    overflow: hidden;
  }
  #teaday-workshop figure img {
    margin: 0 0 0 -10px;
    width: auto;
    height: 300px;
  }
  #teaday-workshop h3 {
    margin: 0 40px 0 325px;
    padding: 30px 0 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
  }
  #teaday-workshop h3 span {
    display: block;
    font-size: 80%;
  }
  #teaday-workshop .point {
    margin: 25px 40px 0 325px;
    padding: 20px 0;
    font-size: 14px;
    text-align: justify;
    line-height: 24px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
  }
  #teaday-workshop .content {
    margin: 0 40px;
    padding: 6px 0 0;
  }
  #teaday-workshop .content p {
    padding: 24px 0 0;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-workshop .content .caution {
    padding: 24px 0 0 12px;
    font-size: 12px;
    text-indent: -12px;
    line-height: 21px;
  }
  #teaday-workshop .detail {
    margin: 30px 0 0;
  }

  /* material */
  
  #teaday-workshop .material {
    position: absolute;
    left: 50%;
  }
  #teaday-workshop .material.m04 {
    bottom: -75px;
    margin: 0 0 0 -505px;
  }

  /* recipe
  ----------------------------------------------- */

  #teaday-recipe {
    position: relative;
  }
  #teaday-recipe article .base {
    position: relative;
    padding: 35px 0 40px;
    background: #fff;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
    z-index: 1;
  }
  #teaday-recipe article h3 {
    margin: 0 40px;
    padding: 0 0 25px;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    border-bottom: 2px solid #333;
  }
  #teaday-recipe article h3 em {
    display: block;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
  }
  #teaday-recipe article p {
    margin: 0 40px;
    padding: 25px 0 0;
    font-size: 14px;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-recipe article ul,
  #teaday-recipe article dl {
    margin: 0 40px;
    padding: 10px 0 0;
  }
  #teaday-recipe article dt {
    padding: 14px 0 0;
    font-size: 16px;
    font-weight: 500;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-recipe article li,
  #teaday-recipe article dd {
    font-size: 14px;
    text-align: justify;
    line-height: 24px;
  }
  #teaday-recipe article ul {
    padding: 20px 0 0;
  }
  #teaday-recipe article li {
    padding: 0 0 0 14px;
    text-indent: -14px;
  }
  #teaday-recipe article dd {
    padding: 5px 0 0;
  }

  #teaday-recipe .column01,
  #teaday-recipe .column02 {
    position: relative;
    width: 1000px;
  }

  #teaday-recipe .column01 {
    margin: 90px auto 0;
    min-height: 405px;
  }
  #teaday-recipe .column01 .base {
    margin: 0 0 0 550px;
    width: 460px;
  }
  #teaday-recipe .column01 figure {
    position: absolute;
    top: -48px;
    left: 20px;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }
  #teaday-recipe .column02 {
    margin: 30px auto 0;
    min-height: 552px;
  }
  #teaday-recipe .column02 .base {
    margin: 0 0 0 -10px;
    width: 460px;
  }
  #teaday-recipe .column02 figure {
    position: absolute;
    top: 127px;
    right: 0;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
  }

  /* material */
  
  #teaday-recipe .material {
    position: absolute;
    left: 50%;
  }
  #teaday-recipe .material.m05 {
    top: 50%;
    margin: -14px 0 0 -35px;
  }
  #teaday-recipe .material.m06 {
    bottom: 0;
    margin: 0 0 -214px 195px;
  }

  /* music
  ----------------------------------------------- */

  #teaday-music {
    position: relative;
  }
  #teaday-music article {
    position: relative;
    z-index: 1;
  }
  #teaday-music article .inner {
    padding: 30px 0 35px;
  }
  #teaday-music article .time {
    margin: 0 40px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
  }
  #teaday-music article h3 {
    margin: 0 39px;
    padding: 0 0 30px;
    font-size: 20px;
    line-height: 30px;
    border-bottom: 2px solid #333;
  }
  #teaday-music article .list {
    margin: 0 40px;
    padding: 20px 0 0;
    font-size: 14px;
    line-height: 24px;
  }
  #teaday-music article h4 {
    margin: 30px 39px 0;
    padding: 25px 0 0;
    font-size: 14px;
    border-top: 2px solid #333;
  }
  #teaday-music article .body {
    margin: 10px 40px 0;
    font-size: 14px;
    text-align: justify;
    line-height: 21px;
  }

  #teaday-music .columns01 {
    margin: 20px auto 0;
    width: 1000px;
  }
  #teaday-music .column01 {
    float: left;
    padding: 28px 0 0;
    width: 480px;
  }
  #teaday-music .column02 {
    float: right;
    width: 480px;
  }
  #teaday-music .column01 .inner {
    background: #f0d1cd;
  }
  #teaday-music .column02 .inner {
    background: #c7dcee;
  }
  
  #teaday-music .columns02 {
    margin: 45px auto 0;
    width: 1000px;
  }
  #teaday-music .columns02 .inner {
    margin: 0 0 0 40px;
    width: 820px;
  }
  #teaday-music .usen {
    float: left;
    width: 330px;
    background: #fff;
  }
  #teaday-music .profile {
    float: right;
    width: 460px;
  }

  #teaday-music .usen {
    padding: 30px 0;
  }
  #teaday-music .usen h4 {
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 21px;
  }
  #teaday-music .usen h4 span {
    font-size: 12px;
  }
  #teaday-music .usen .body {
    margin: 20px 30px 0;
    font-size: 14px;
    text-align: justify;
    line-height: 21px;
  }
  #teaday-music .usen .more {
    margin: 20px 29px 0;
    text-align: left;
  }
  
  #teaday-music .profile {
    margin: 30px 0 0;
    padding: 0 0 40px;
    border: 4px solid #333;
    box-sizing: border-box;
  }
  #teaday-music .profile h4 {
    margin: 0 40px;
    padding: 30px 0 25px;
    font-size: 18px;
    line-height: 30px;
    border-bottom: 2px solid #333;
  }
  #teaday-music .profile figure {
    float: right;
    margin: 0 40px 0 30px;
    padding: 30px 0 0;
  }
  #teaday-music .profile figure figcaption {
    margin: 10px 0 0;
    padding: 0;
    width: 120px;
    color: #666;
    font-size: 11px;
    text-align: left;
    word-break: break-word;
    letter-spacing: 0;
    line-height: 18px;
  }
  #teaday-music .profile .body {
    margin: 25px 40px 0;
    font-size: 14px;
    text-align: justify;
    line-height: 21px;
  }
  #teaday-music .profile .more {
    margin: 15px 40px 0;
    text-align: left;
  }
  #teaday-music .profile a {
    display: inline-block;
    position: relative;
    color: #333;
    font-size: 14px;
    text-align: left;
  }
  #teaday-music .profile a:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: #333;
  }

  /* material */
  
  #teaday-music .material {
    position: absolute;
    left: 50%;
  }
  #teaday-music .material.m07 {
    top: 50%;
    margin: 235px 0 0 165px;
  }
  #teaday-music .material.m08 {
    bottom: 0;
    margin: 0 0 -254px -547px;
  }

  /* modal
  ----------------------------------------------- */

  #teaday-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    overflow: hidden;
    z-index: 100;
  }
  #teaday-modal.on .bg01,
  #teaday-modal.on .bg02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/media/images/lp/teaday-171018/modal-bg.png);
  }
  #teaday-modal .bg01 {
    animation: modalbg01 40s linear forwards;
  }
  #teaday-modal .bg02 {
    animation: modalbg02 20s linear forwards;
  }

  #teaday-modal .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1;
  }  
  #teaday-modal .base {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 50px 0 0 -260px;
    width: 520px;
    color: #fff;
    text-align: center;
    background: #e48692;
  }

  #teaday-modal figure img {
    width: 100%;
    height: auto;
  }
  #teaday-modal .content {
    padding: 10px 0 35px;
  }
  #teaday-modal .content p {
    margin: 15px 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
  }
  #teaday-modal .content p a {
    position: relative;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  #teaday-modal .content p a:hover {
    opacity: 0.7;
  }
  #teaday-modal .content .link {
    padding: 0 30px 0 0;
  }
  #teaday-modal .content .link .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -13px 0 0;
  }
  #teaday-modal .content .close {
    display: inline-block;
    position: relative;
    margin: 10px 0 0;
  }

  #teaday-modal .cross {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 15px 0 0 235px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  #teaday-modal .cross li {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: margin 0.2s, transform 0.2s;
  }
  #teaday-modal .cross li:first-child {
    margin: -14.5px 0 0 -15.5px;
    transform: rotate(45deg);
  }
  #teaday-modal .cross li:last-child {
    margin: -14.5px 0 0 -11.5px;
    transform: rotate(-45deg);
  }
  #teaday-modal .cross:hover li {
    margin: -13px 0 0 -14px;
    transform: rotate(0deg);
  }

  /* ready */
  
  #teaday-modal.ready {
    display: block;
    opacity: 0;
    transition: opacity 0.5s;
  }
  #teaday-modal.ready .base {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s, transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
  }
  #teaday-modal.ready .cross {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.25s 0.5s, transform 0.25s 0.5s;
  }

  /* start */
  
  #teaday-modal.ready.start {
    opacity: 1;
  }
  #teaday-modal.ready.start .base {
    opacity: 1;
    transform: scale(1);
  }
  #teaday-modal.ready.start .cross {
    opacity: 1;
    transform: translateY(0px);
  }

  /* fadein */
  
  #teaday .fadein.ready {
    transform: translateY(50px);
  }

}

/* mobile
----------------------------------------------- */

@media only screen and (max-width:767px) {

  /* teaday
  ----------------------------------------------- */
  
  #teaday {
    padding: 0 0 25px;
    background-image: url(/media/images/lp/teaday-171018/background-sp.png);
    background-size: 960px auto;
  }
  #teaday .shadow {
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
  }
  #teaday .sns ul {
    font-size: 0;
    text-align: center;
  }
  #teaday .sns li {
    margin: 0 10px;
    font-size: 32px;
  }
  #teaday .sns li {
    display: inline-block;
  }

  /* header
  ----------------------------------------------- */
  
  #teaday-header {
    position: relative;
    width: 100%;
    height: 354px;
    background: url(/media/images/lp/teaday-171018/header-ky-sp.png) no-repeat center center;
    background-size: cover;
    overflow: hidden;
  }
  #teaday-header h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -110px;
    width: 221px;
    height: 93px;
    text-indent: 100%;
    white-space: nowrap;
    background: url(/media/images/lp/teaday-171018/header-title.png) no-repeat left bottom;
    background-size: 221px 2790px;
    overflow: hidden;
  }
  #teaday-header h1.ready {
    background-position: 0 0;
  }
  
  /* footer
  ----------------------------------------------- */

  #teaday-footer .banner {
    padding: 136px 0 0;
  }
  #teaday-footer .banner li {
    margin: 24px 0 0;
    text-align: center;
  }
  #teaday-footer .banner li a {
    display: inline-block;
    margin: auto;
    border: 2px solid #333;
  }
  #teaday-footer .banner li img {
    width: 286px;
    height: auto;
  }
  #teaday-footer .caution {
    margin: 35px 15px 0;
  }
  #teaday-footer .caution li {
    padding: 0 0 0 1.5em;
    font-size: 10px;
    text-indent: -1.5em;
    line-height: 17px;
  }
  #teaday-footer .sns {
    margin: 25px 0 0;
  }

  /* nav
  ----------------------------------------------- */

  #teaday-nav {
    position: relative;
    margin: -55px auto 0;
    padding: 15px 0 5px;
    width: 200px;
    background: #fbf6d6;
    z-index: 1;
  }
  #teaday-nav .nav {
    margin: auto;
    width: 150px;
  }
  #teaday-nav .nav li {
    position: relative;
    padding: 10px 0 10px 20px;
  }
  #teaday-nav .nav li img {
    width: auto;
    height: 14px;
  }
  #teaday-nav .nav li span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    margin: -8px 0 0;
    width: 9px;
    height: 14px;
    font-size: 12px;
    transform: rotate(90deg);
  }
  #teaday-nav .nav li i {
    color: #333;
  }
  #teaday-nav .sns {
    margin: 10px auto 0;
    padding: 5px 0 0;
    width: 160px;
    border-top: 1px solid #000;
  }
  
  /* material
  ----------------------------------------------- */
  
  #teaday .material {
    background-repeat: no-repeat;    
  }
  #teaday .material.m01 {
    width: 158px;
    height: 183px;
    background-image: url(/media/images/lp/teaday-171018/material01.png);
    background-size: 158px 183px;
  }
  #teaday .material.m02 {
    width: 185px;
    height: 154px;
    background-image: url(/media/images/lp/teaday-171018/material02.png);
    background-size: 185px 154px;
  }
  #teaday .material.m04 {
    width: 128px;
    height: 115px;
    background-image: url(/media/images/lp/teaday-171018/material04.png);
    background-size: 128px 115px;
  }
  #teaday .material.m05 {
    width: 114px;
    height: 108px;
    background-image: url(/media/images/lp/teaday-171018/material05.png);
    background-size: 114px 108px;
  }
  #teaday .material.m06 {
    width: 126px;
    height: 122px;
    background-image: url(/media/images/lp/teaday-171018/material06.png);
    background-size: 126px 122px;
  }
  #teaday .material.m08 {
    width: 136px;
    height: 130px;
    background-image: url(/media/images/lp/teaday-171018/material08.png);
    background-size: 136px 130px;
  }

  /* intro
  ----------------------------------------------- */
  
  #teaday-intro {
    position: relative;
    margin: 70px 0 0;
  }
  
  #teaday-intro .message {
    position: relative;
    margin: 0 15px;
    padding: 25px 0;
    text-align: center;
    background: white;
    z-index: 1;
  }
  #teaday-intro .message h2 {
    font-size: 14px;
    line-height: 18px;
  }
  #teaday-intro .message p {
    padding: 14px 0 0;
    font-size: 12px;
    line-height: 21px;
  }
  #teaday-intro .message p br {
    display: none;
  }
  #teaday-intro .message p span {
    display: block;
  }

  #teaday-intro .card {
    position: relative;
    margin: 25px 15px 0;
    padding: 0 0 15px;
    background: #e48692;
    z-index: 1;
  }
  #teaday-intro .card h3 {
    text-align: center;
  }
  #teaday-intro .card h3 img {
    width: auto;
    height: 85px;
  }
  #teaday-intro .card p {
    margin: 10px 15px 0;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-intro .card .caution {
    margin: 10px 15px 0;
    color: #fff;
  }
  #teaday-intro .card .caution li {
    padding: 0 0 0 1.5em;
    font-size: 10px;
    text-indent: -1.5em;
    line-height: 17px;
  }
  #teaday-intro .card .instagram {
    position: relative;
    margin: 20px 15px 0;
    height: 30px;
    background: #fff;
  }
  #teaday-intro .card .instagram a {
    display: block;
  }
  #teaday-intro .card .instagram:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #e48692 transparent transparent;
  }
  #teaday-intro .card .instagram a {
    display: block;
    padding: 0 0 0 30px;
    color: #006450;
    font-size: 10px;
    font-weight: 500;
    line-height: 30px;
  }
  #teaday-intro .card .instagram span {
    position: absolute;
    top: 50%;
  }
  #teaday-intro .card .instagram span:first-child {
    left: 5px;
    margin: -10px 0 0;
  }
  #teaday-intro .card .instagram span:last-child {
    right: 8px;
    margin: -12px 0 0;
  }
  #teaday-intro .card .instagram span:first-child i {
    font-size: 20px;
  }
  #teaday-intro .card .instagram span:last-child i {
    font-size: 14px;
  }
  #teaday-intro .card figure {
    padding: 15px;
  }
  #teaday-intro .card figure img {
    width: 100%;
    height: auto;
  }

  /* material */
  
  #teaday-intro .material {
    position: absolute;
  }
  #teaday-intro .material.m01 {
    top: -160px;
    right: 0;
  }
  #teaday-intro .material.m02 {
    left: -45px;
    bottom: -85px;
  }

  /* section
  ----------------------------------------------- */
  
  #teaday section {
    padding: 75px 0 0;
    text-align: center;
  }
  #teaday section h2 img {
    width: auto;
    height: 28px;
  }
  #teaday section .copy {
    margin: 15px 0 0;
    font-size: 12px;
    font-weight: 500;
  }
  #teaday section .summary {
    position: relative;
    margin: 20px 15px 0;
    padding: 0;
  }
  #teaday section .summary:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 0 0 -20px;
    width: 40px;
    height: 1px;
    background: #333;
  }
  #teaday section .summary p {
    padding: 20px 0 0;
    font-size: 11px;
    line-height: 19px;
  }
  #teaday section .summary .caution {
    font-size: 10px;
  }

  #teaday section .button {
    display: inline-block;
    position: relative;
    padding: 0 30px 0 18px;
    height: 37px;
    font-size: 14px;
    font-weight: 500;
    line-height: 33px;
    border: 2px solid #333;
    box-sizing: border-box;
    background: #fff;
  }
  #teaday section .button .arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    margin: -15px 0 0;
    font-size: 16px;
  }
  #teaday section .button .blank {
    position: relative;
    top: 2px;
    left: -5px;
  }

  #teaday section .link {
    display: inline-block;
    position: relative;
    padding: 0 18px 0 0;
    color: #006450;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
  }
  #teaday section .link .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -9px 0 0;
    font-size: 16px;
  }
  #teaday section .link .blank {
    position: relative;
    top: 2px;
    left: -5px;
    font-size: 13px;
  }

  /* menu
  ----------------------------------------------- */

  #teaday #teaday-menu {
    padding: 100px 0 0;
  }
  #teaday-menu .detail {
    display: inline-block;
    margin: 24px 0 0;
    text-align: center;
    background: #fff;
  }

  #teaday-menu article {
    margin: 24px 15px 0;
    padding: 0 0 20px;
    background: white;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
  }
  #teaday-menu article .base {
    position: relative;
    padding: 40px 0 0;
  }
  #teaday-menu article .limit {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    padding: 5px 20px;
    font-size: 11px;
    font-weight: 500;
    background: #404040;
  }
  #teaday-menu article h3 {
    margin: 0 15px;
    font-size: 15px;
    line-height: 21px;
  }
  #teaday-menu article .price {
    font-size: 11px;
    font-weight: 500;
    line-height: 21px;
  }
  #teaday-menu article .body {
    margin: 10px 15px 0;
    font-size: 11px;
    text-align: left;
    line-height: 19px;
  }
  #teaday-menu article .caution {
    margin: 10px 15px 0;
    padding: 0 0 0 1.5em;
    font-size: 10px;
    text-align: justify;
    text-indent: -1.5em;
    line-height: 17px;
  }
  #teaday-menu article .line {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #c7c7c7;
  }
  #teaday-menu article figure img {
    width: 100%;
    height: auto;
  }

  /* takeout
  ----------------------------------------------- */

  #teaday-takeout .detail {
    padding: 12px 0 0;
  }
  #teaday-takeout .detail p {
    display: block;
    margin: 12px 0 0;
    text-align: center;
  }
  
  #teaday-takeout .summary p {
    text-align: left;
  }
  #teaday-takeout .summary br {
    display: none;
  }
  
  #teaday-takeout .summary .new {
    display: block;
    float: left;
    margin: -30px 10px 0 0;
    width: 138px;
    height: 155px;
    background: url(/media/images/lp/teaday-171018/takeout-new-sp.png) no-repeat;
    background-size: 138px 155px;
  }

  #teaday-takeout .summary .new.pc {
    display: none;
  }
  #teaday-takeout .summary .new.sp {
    display: block;
    float: left;
    margin: -30px 10px 0 0;
  }
  #teaday-takeout .summary .new.sp img {
    width: 138px;
    height: auto;
  }

  #teaday-takeout article {
    margin: 24px 15px 0;
    padding: 0 0 20px;
    background: white;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
  }
  #teaday-takeout article .base {
    position: relative;
    padding: 15px 0 0;
  }
  #teaday-takeout article h3 {
    margin: 0 15px;
    padding: 0 0 10px;
    font-size: 15px;
    line-height: 21px;
    border-bottom: 2px solid #333;
  }
  #teaday-takeout article h3 .en {
    font-size: 11px;
    font-weight: 600;
  }
  #teaday-takeout article .body {
    margin: 10px 15px 0;
    font-size: 11px;
    text-align: left;
    line-height: 19px;
  }
  #teaday-takeout article .spec {
    margin: 5px 15px 0;
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    line-height: 17px;
  }
  #teaday-takeout article .more {
    margin: 15px 0 0;
  }
  #teaday-takeout article figure img {
    width: 100%;
    height: auto;
  }
  #teaday-takeout article .paring {
    display: inline-block;
    position: relative;
    margin: 15px 0 0;
  }
  #teaday-takeout article .paring .label {
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    line-height: 15px;
  }
  #teaday-takeout article .paring .label br {
    display: none;
  }
  #teaday-takeout article .paring .label span {
    display: block;
  }
  #teaday-takeout article .paring .image {
    position: absolute;
    top: 0;
    left: 0;
  }

  #teaday-takeout .column01 .paring {
    min-height: 91px;
  }
  #teaday-takeout .column01 .paring .label {
    margin: 0 0 0 175px;
    padding: 15px 0 0;
  }
  #teaday-takeout .column01 .paring .image img {
    width: 184px;
    height: 91px;
  }

  #teaday-takeout .column02 .paring {
    min-height: 85px;
  }
  #teaday-takeout .column02 .paring .label {
    margin: 0 0 0 170px;
    padding: 0;
  }
  #teaday-takeout .column02 .paring .image img {
    width: 180px;
    height: 81px;
  }

  /* howto */

  #teaday-takeout .howto {
    margin: 30px 15px 0;
    border: 3px solid #333;
    box-sizing: border-box;
  }
  #teaday-takeout .howto h4 {
    padding: 15px 0;
  }
  #teaday-takeout .howto h4 img {
    width: auto;
    height: 21px;
  }
  #teaday-takeout .howto dl {
    position: relative;
    padding: 0;
    border-top: 2px solid #333;
  }
  #teaday-takeout .howto dt {
    padding: 20px 0 15px;
    font-size: 15px;
    font-weight: 500;
  }
  #teaday-takeout .howto dd {
    padding: 0 15px 15px;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-takeout .howto dd ul {
    margin: 10px 0 0;
  }
  #teaday-takeout .howto dd .image {
    display: block;
    margin: 15px auto 0;
  }
  #teaday-takeout .howto dd .image img {
    width: 100%;
    height: auto;
  }

  /* workshop
  ----------------------------------------------- */

  #teaday-workshop {
    position: relative;
  }
  #teaday-workshop article {
    position: relative;
    margin: 20px 15px 0;
    z-index: 1;
  }
  #teaday-workshop article .inner {
    padding: 0 0 20px;
    background: #e3ecbb;
  }
  #teaday-workshop figure img {
    width: 100%;
    height: auto;
  }
  #teaday-workshop h3 {
    margin: 15px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
  }
  #teaday-workshop h3 span {
    display: block;
    font-size: 80%;
  }
  #teaday-workshop .point {
    margin: 15px 15px 0;
    padding: 10px 0;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
  }
  #teaday-workshop .content {
    margin: 0 15px;
    padding: 4px 0 0;
  }
  #teaday-workshop .content p {
    padding: 11px 0 0;
    font-size: 11px;
    font-weight: 400;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-workshop .content .caution {
    padding: 17px 0 0 10px;
    font-size: 10px;
    text-indent: -10px;
    line-height: 17px;
  }
  #teaday-workshop .detail {
    margin: 20px 0 0;
  }

  /* material */
  
  #teaday-workshop .material {
    position: absolute;
  }
  #teaday-workshop .material.m04 {
    left: -25px;
    bottom: -90px;
  }

  /* recipe
  ----------------------------------------------- */

  #teaday #teaday-recipe {
    padding: 90px 0 0;
  }
  #teaday-recipe {
    position: relative;
  }
  #teaday-recipe article {
    position: relative;
    margin: 24px 15px 0;
    padding: 0 0 20px;
    background: white;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
  }
  #teaday-recipe article .base {
    padding: 20px 0 0;
  }
  #teaday-recipe article h3 {
    margin: 0 15px;
    padding: 0 0 15px;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    border-bottom: 2px solid #333;
  }
  #teaday-recipe article h3 em {
    display: block;
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    line-height: 20px;
  }
  #teaday-recipe article p {
    margin: 0 15px;
    padding: 15px 0 0;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-recipe article ul,
  #teaday-recipe article dl {
    margin: 0 15px;
  }
  #teaday-recipe article dt {
    padding: 15px 0 0;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
  }
  #teaday-recipe article li,
  #teaday-recipe article dd {
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-recipe article ul {
    padding: 15px 0 0;
  }
  #teaday-recipe article li {
    padding: 0 0 0 11px;
    text-indent: -11px;
  }
  #teaday-recipe article figure img {
    width: 100%;
    height: auto;
  }
  
  #teaday-recipe .column02 {
    margin: 70px 15px 0;
  }

  /* material */
  
  #teaday-recipe .material {
    position: absolute;
  }
  #teaday-recipe .material.m05 {
    top: 50%;
    right: 28px;
    margin: -47px 0 0;
  }
  #teaday-recipe .material.m06 {
    right: -28px;
    bottom: -102px;
    z-index: 1;
  }

  /* music
  ----------------------------------------------- */

  #teaday #teaday-music {
    padding: 90px 0 0;
  }

  #teaday-music {
    position: relative;
  }
  #teaday-music article .inner {
    margin: 24px 15px 0;
    padding: 20px 0;
  }
  #teaday-music article .time {
    margin: 0 15px;
    font-size: 11px;
    line-height: 20px;
  }
  #teaday-music article h3 {
    margin: 5px 15px;
    padding: 0 0 12px;
    font-size: 15px;
    line-height: 21px;
    border-bottom: 2px solid #333;
  }
  #teaday-music article h3 span {
    display: block;
  }
  #teaday-music article .list {
    margin: 12px 15px 0;
    font-size: 11px;
    text-align: left;
    line-height: 19px;
  }
  #teaday-music article h4 {
    margin: 15px 15px 0;
    padding: 15px 0 0;
    font-size: 11px;
    border-top: 2px solid #333;
  }
  #teaday-music article .body {
    margin: 10px 15px 0;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-music .column01 .inner {
    background: #f0d1cd;
  }
  #teaday-music .column02 .inner {
    background: #c7dcee;
  }

  #teaday-music .usen {
    margin: 24px 15px 0;
    padding: 24px 0 20px;
    background: #fff;
  }
  #teaday-music .usen figure img {
    width: auto;
    height: 150px;
  }
  #teaday-music .usen h4 {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 21px;
  }
  #teaday-music .usen h4 span {
    font-size: 11px;
  }
  #teaday-music .usen .body {
    margin: 15px 15px 0;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-music .usen .more {
    margin: 13px 20px 0;
    text-align: left;
  }

  #teaday-music .profile {
    margin: 24px 15px 0;
    padding: 18px 0 30px;
    border: 3px solid #333;
    box-sizing: border-box;
  }
  #teaday-music .profile h4 {
    margin: 0 15px;
    padding: 0 0 15px;
    font-size: 15px;
    border-bottom: 2px solid #333;
  }
  #teaday-music .profile figure {
    float: right;
    margin: 25px 15px 10px 20px;
    background: red;
  }
  #teaday-music .profile figure img {
    width: 100px;
    height: auto;
  }
  #teaday-music .profile figure figcaption {
    margin: 5px 0 0;
    width: 100px;
    font-size: 9px;
    text-align: left;
    line-height: 15px;
  }
  #teaday-music .profile .body {
    margin: 20px 15px 0;
    font-size: 11px;
    text-align: justify;
    line-height: 19px;
  }
  #teaday-music .profile .more {
    margin: 10px 15px 0;
    text-align: left;
  }
  #teaday-music .profile a {
    display: inline-block;
    position: relative;
    color: #333;
    font-size: 11px;
    text-align: left;
  }
  #teaday-music .profile a:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: #333;
  }

  /* material */
  
  #teaday-music .material {
    position: absolute;
  }
  #teaday-music .material.m08 {
    left: -13px;
    bottom: -143px;
  }

  /* modal
  ----------------------------------------------- */

  #teaday-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    overflow: auto;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
  }

  #teaday-modal .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #teaday-modal .base {
    margin: 50px 15px 0;
    color: #fff;
    text-align: center;
    background: #e48692;
  }

  #teaday-modal figure img {
    width: 100%;
    height: auto;
  }
  #teaday-modal .content {
    padding: 10px 0 15px;
  }
  #teaday-modal .content p {
    margin: 5px 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }
  #teaday-modal .content p a {
    position: relative;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  #teaday-modal .content .link {
    padding: 0 23px 0 0;
  }
  #teaday-modal .content .link .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    margin: -9px 0 0;
  }
  #teaday-modal .content .link .arrow img {
    width: auto;
    height: 18px;
  }
  #teaday-modal .content .close {
    display: inline-block;
    position: relative;
  }
  #teaday-modal .content .close img {
    width: auto;
    height: 12px;
  }

  #teaday-modal .cross {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  #teaday-modal .cross li {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #teaday-modal .cross li:first-child {
    margin: -14.5px 0 0 -15.5px;
    transform: rotate(45deg);
  }
  #teaday-modal .cross li:last-child {
    margin: -14.5px 0 0 -11.5px;
    transform: rotate(-45deg);
  }

  /* ready */
  
  #teaday-modal.ready {
    display: block;
    opacity: 0;
    transition: opacity 0.5s;
  }
  #teaday-modal.ready .base {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s, transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
  }
  #teaday-modal.ready .cross {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.25s 0.5s, transform 0.25s 0.5s;
  }

  /* start */
  
  #teaday-modal.ready.start {
    opacity: 1;
  }
  #teaday-modal.ready.start .base {
    opacity: 1;
    transform: scale(1);
  }
  #teaday-modal.ready.start .cross {
    opacity: 1;
    transform: translateY(0px);
  }

}

/* keyframes
----------------------------------------------- */

#teaday .header-pc-start {
  animation: header-pc 5s steps(1) forwards;
}
#teaday .header-sp-start {
  animation: header-sp 5s steps(1) forwards;
}

@keyframes header-pc {
  0% { background-position: 0 -0px; }
  1% { background-position: 0 -234px; }
  2% { background-position: 0 -468px; }
  3% { background-position: 0 -702px; }
  4% { background-position: 0 -936px; }
  5% { background-position: 0 -1170px; }
  6% { background-position: 0 -1404px; }
  7% { background-position: 0 -1638px; }
  8% { background-position: 0 -1872px; }
  9% { background-position: 0 -2106px; }
  10% { background-position: 0 -2340px; }
  11% { background-position: 0 -2574px; }
  12% { background-position: 0 -2808px; }
  13% { background-position: 0 -3042px; }
  14% { background-position: 0 -3276px; }
  15% { background-position: 0 -3510px; }
  16% { background-position: 0 -3744px; }
  17% { background-position: 0 -3978px; }
  18% { background-position: 0 -4212px; }
  19% { background-position: 0 -4446px; }
  20% { background-position: 0 -4680px; }
  21% { background-position: 0 -4914px; }
  22% { background-position: 0 -5148px; }
  23% { background-position: 0 -5382px; }
  24% { background-position: 0 -5616px; }
  25% { background-position: 0 -5850px; }
  26% { background-position: 0 -6084px; }
  27% { background-position: 0 -6318px; }
  28% { background-position: 0 -6552px; }
  29% { background-position: 0 -6786px; }
  100% { background-position: 0 -6786px; }
}
@keyframes header-sp {
  0% { background-position: 0 -0px; }
  1% { background-position: 0 -93px; }
  2% { background-position: 0 -186px; }
  3% { background-position: 0 -279px; }
  4% { background-position: 0 -372px; }
  5% { background-position: 0 -465px; }
  6% { background-position: 0 -558px; }
  7% { background-position: 0 -651px; }
  8% { background-position: 0 -744px; }
  9% { background-position: 0 -837px; }
  10% { background-position: 0 -930px; }
  11% { background-position: 0 -1023px; }
  12% { background-position: 0 -1116px; }
  13% { background-position: 0 -1209px; }
  14% { background-position: 0 -1302px; }
  15% { background-position: 0 -1395px; }
  16% { background-position: 0 -1488px; }
  17% { background-position: 0 -1581px; }
  18% { background-position: 0 -1674px; }
  19% { background-position: 0 -1767px; }
  20% { background-position: 0 -1860px; }
  21% { background-position: 0 -1953px; }
  22% { background-position: 0 -2046px; }
  23% { background-position: 0 -2139px; }
  24% { background-position: 0 -2232px; }
  25% { background-position: 0 -2325px; }
  26% { background-position: 0 -2418px; }
  27% { background-position: 0 -2511px; }
  28% { background-position: 0 -2604px; }
  29% { background-position: 0 -2697px; }
  100% { background-position: 0 -2697px; }
}

@keyframes modalbg01 {
  0% { opacity:0.25; background-position: left -800px; }
  90% { opacity:0.25; background-position: left -10px; }
  100% { opacity:0; background-position: left 0px; }
}
@keyframes modalbg02 {
  0% { opacity:1; background-position: right -800px; }
  90% { opacity:1; background-position: right -10px; }
  100% { opacity:0; background-position: right 0px; }
}

/* slidein */

#teaday .slidein.ready {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#teaday .slidein.ready.start {
  opacity: 1;
  transform: translateY(0px);
}

/* fadein */

#teaday .fadein.ready {
  opacity: 0;
  transition: opacity 1s 0.25s, transform 1s 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#teaday .fadein.ready.start {
  opacity: 1;
  transform: translateY(0px);
}

/* popin */

#teaday .popin.ready {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#teaday .popin.ready.start {
  opacity: 1;
  transform: scale(1);
}

/* rotatein */

#teaday .rotatein.ready {
  opacity: 0;
  transition: opacity 1s 0.25s, transform 1s 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#teaday .rotatein.ready.left {
  transform: rotate(5deg);
}
#teaday .rotatein.ready.right {
  transform: rotate(-5deg);
}
#teaday .rotatein.ready.start {
  opacity: 1;
  transform: rotate(0deg);
}