@import url("https://fonts.googleapis.com/css2?family=Coiny&display=swap");
body {
  margin: 0; }

.yyi {
  color: #ababab;
  font-family: "Yu Gothic", "YuGothic", 'Noto Sans JP', sans-serif; }
  @media only screen and (max-width: 767px) {
    .yyi {
      font-size: 0.8em; } }
  @media only screen and (min-width: 768px) {
    .yyi {
      font-size: 1em; } }
  .yyi__header {
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0; }
  .yyi__item-image {
    position: relative;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .yyi__item-image {
        padding: 60px 0; } }
    @media only screen and (min-width: 768px) {
      .yyi__item-image {
        padding: 50px 0; } }
    .yyi__item-image img {
      box-shadow: 0 0 30px 10px #fff;
      position: relative;
      vertical-align: bottom;
      z-index: 2; }
      @media only screen and (max-width: 767px) {
        .yyi__item-image img {
          width: 90%; } }
      @media only screen and (min-width: 768px) {
        .yyi__item-image img {
          width: 100%;
          max-width: 800px; } }
  .yyi__bg-item-image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(8px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1; }
    .yyi__bg-item-image--burger {
      background-image: url(../img/header_burger.png); }
  @media only screen and (max-width: 767px) {
    .yyi__item-spec {
      margin: 60px auto; } }
  @media only screen and (min-width: 768px) {
    .yyi__item-spec {
      margin: 80px auto; } }
  .yyi__item-name {
    color: rgba(0, 0, 0, 0);
    font-family: "Coiny", cursive;
    letter-spacing: 5px;
    margin: 0 auto 20px auto;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .yyi__item-name {
        font-size: 1.8rem;
        line-height: 2.4rem;
        width: calc(100% - 10px); } }
    @media only screen and (min-width: 768px) {
      .yyi__item-name {
        font-size: 3rem; } }
    .yyi__item-name--burger {
      text-shadow: -2px -1px #70bbd4, 2px 1px #ece470; }
  .yyi__item-price {
    color: #bebebe;
    font-family: "Coiny", cursive;
    margin: 0 auto;
    text-align: center; }
    @media only screen and (max-width: 767px) {
      .yyi__item-price {
        font-size: 1.3rem; } }
    @media only screen and (min-width: 768px) {
      .yyi__item-price {
        font-size: 1.8rem; } }
  .yyi__catch {
    box-sizing: border-box;
    position: relative; }
    @media only screen and (max-width: 767px) {
      .yyi__catch {
        line-height: 2;
        margin: 0 auto 0 2.5rem;
        padding: 2rem 2.5rem 2rem 2rem;
        width: calc(100% - 4rem); } }
    @media only screen and (min-width: 768px) {
      .yyi__catch {
        margin: 0 auto;
        padding: 2rem;
        width: calc(100% - 20px);
        max-width: 600px; } }
    .yyi__catch::before, .yyi__catch::after {
      border-radius: 30px;
      box-sizing: border-box;
      content: "";
      display: block;
      height: 100%; }
      @media only screen and (max-width: 767px) {
        .yyi__catch::before, .yyi__catch::after {
          position: absolute;
          width: calc(100% - 20px); } }
      @media only screen and (min-width: 768px) {
        .yyi__catch::before, .yyi__catch::after {
          position: absolute;
          width: 100%; } }
    .yyi__catch::before {
      border: 3px solid #ece470; }
      @media only screen and (max-width: 767px) {
        .yyi__catch::before {
          top: 0.5rem;
          left: 0.3rem; } }
      @media only screen and (min-width: 768px) {
        .yyi__catch::before {
          top: 0.5rem;
          left: 0.5rem; } }
    .yyi__catch::after {
      border: 3px solid #70bbd4; }
      @media only screen and (max-width: 767px) {
        .yyi__catch::after {
          top: -0.5rem;
          left: -0.3rem; } }
      @media only screen and (min-width: 768px) {
        .yyi__catch::after {
          top: -0.5rem;
          left: -0.5rem; } }
    .yyi__catch p {
      text-align: center; }
      @media only screen and (max-width: 767px) {
        .yyi__catch p {
          font-size: 1.1rem; } }
      @media only screen and (min-width: 768px) {
        .yyi__catch p {
          font-size: 1.3rem; } }
  .yyi__twitter {
    text-align: center;
    width: calc(100% - 20px); }
    @media only screen and (max-width: 767px) {
      .yyi__twitter {
        margin: 60px auto; } }
    @media only screen and (min-width: 768px) {
      .yyi__twitter {
        display: flex;
        margin: 80px auto;
        max-width: 800px; } }
  .yyi__twitter-head {
    font-weight: 600;
    letter-spacing: 0.1rem;
    margin: 0; }
    @media only screen and (max-width: 767px) {
      .yyi__twitter-head {
        font-size: 1.3rem; } }
    @media only screen and (min-width: 768px) {
      .yyi__twitter-head {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        font-size: 2rem;
        justify-content: flex-end;
        padding: 0 6rem 0 0;
        text-align: right;
        width: calc(100% - 400px); } }
    .yyi__twitter-head::before {
      font-family: "Font Awesome 5 Brands";
      content: '\f099';
      font-weight: 900;
      position: relative;
      top: -1px; }
      @media only screen and (max-width: 767px) {
        .yyi__twitter-head::before {
          font-size: 1.1rem;
          margin-right: 2px; } }
      @media only screen and (min-width: 768px) {
        .yyi__twitter-head::before {
          font-size: 1.6rem;
          margin-right: 10px; } }
  @media only screen and (max-width: 767px) {
    .yyi__twitter-timeline {
      margin: 20px auto 0 auto;
      width: 100%;
      max-width: 300px; } }
  @media only screen and (min-width: 768px) {
    .yyi__twitter-timeline {
      height: 300px;
      width: 400px; } }