@charset "UTF-8";
#single-top {
  text-align: left;
  padding-top: 40px;
  /*top スクロールアニメーション*/ }
  #single-top h6 {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 10px;
    font-size: 1.2rem;
    color: #fff;
    background: #333;
    border-radius: 10px; }
  #single-top h1 {
    font-family: "a-otf-ryumin-pr6n",serif;
    font-size: 4.0rem;
    position: relative;
    margin-top: 20px; }
    @media screen and (max-width: 800px) {
      #single-top h1 {
        font-size: 3.2rem; } }
    @media screen and (max-width: 500px) {
      #single-top h1 {
        font-size: 2.6rem; } }
  #single-top a {
    text-decoration: none;
    color: #333;
    border-bottom: solid #333 1px; }
    @media screen and (max-width: 500px) {
      #single-top a {
        font-size: 1.4rem; } }
    #single-top a .yazirushi {
      padding-left: 20px;
      width: 35px; }
      @media screen and (max-width: 800px) {
        #single-top a .yazirushi {
          padding-left: 10px;
          width: 24px; } }
  #single-top .detail {
    list-style: none;
    font-size: 1.4rem;
    padding: 20px 0 40px;
    color: #8F8E8E; }
    @media screen and (max-width: 800px) {
      #single-top .detail {
        font-size: 1.2rem; } }
    @media screen and (max-width: 500px) {
      #single-top .detail {
        padding: 20px 0; } }
    #single-top .detail .title {
      color: #333;
      font-weight: 400;
      margin-right: 10px; }
      @media screen and (max-width: 500px) {
        #single-top .detail .title {
          display: block; } }
  #single-top .gallary-img {
    margin: 0 auto;
    width: 100%;
    height: 50vh;
    object-fit: cover; }
    @media screen and (max-width: 500px) {
      #single-top .gallary-img {
        height: 40vh; } }
  #single-top .top__scroll {
    position: absolute;
    left: 50%;
    bottom: 0px;
    height: 50px;
    /*全体の高さ*/ }
    #single-top .top__scroll span {
      /*描画位置*/
      position: absolute;
      left: -15px;
      top: -15px;
      /*テキストの形状*/
      color: #333;
      font-size: 1.2rem;
      letter-spacing: 0.05em; }
    #single-top .top__scroll:after {
      content: "";
      /*描画位置*/
      position: absolute;
      top: 0;
      /*線の形状*/
      width: 1px;
      height: 30px;
      background: #333;
      /*線の動き1.4秒かけて動く。永遠にループ*/
      animation: pathmove 1.4s ease-in-out infinite;
      opacity: 0; }
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0; }
  30% {
    height: 30px;
    opacity: 1; }
  100% {
    height: 0;
    top: 50px;
    opacity: 0; } }
/*single_read*/
@media screen and (max-width: 1050px) {
  #single_read {
    height: 100%; } }
@media screen and (max-width: 800px) {
  #single_read {
    height: auto; } }
@media screen and (max-width: 1050px) {
  #single_read .single_read-pc {
    display: none; } }
#single_read .single_read-pc .read__content-wrapper {
  display: flex;
  height: 100vh;
  align-items: center; }
  #single_read .single_read-pc .read__content-wrapper .read__discription {
    flex-basis: 70%; }
    #single_read .single_read-pc .read__content-wrapper .read__discription .catch-copy {
      font-family: "a-otf-ryumin-pr6n",serif;
      font-size: 4.6rem; }
      @media screen and (max-width: 1050px) {
        #single_read .single_read-pc .read__content-wrapper .read__discription .catch-copy {
          font-size: 4.4rem; } }
    #single_read .single_read-pc .read__content-wrapper .read__discription .discription {
      margin-top: 30px; }
  #single_read .single_read-pc .read__content-wrapper .read__img {
    flex-basis: 30%;
    padding-left: 60px;
    position: relative;
    /*ポップアップimg 位置等それぞれ調整*/
    /*kirameki*/
    /*すぐ食べ*/ }
    #single_read .single_read-pc .read__content-wrapper .read__img .read__img-bg {
      overflow: hidden;
      height: 40vh;
      width: 30vw;
      object-fit: cover;
      border-radius: 0 30px; }
    #single_read .single_read-pc .read__content-wrapper .read__img .bg-kirameki {
      /*kirameki　bg　明るさ調整*/
      filter: brightness(50%) drop-shadow(10px 10px 20px rgba(3, 3, 3, 0.3)); }
    #single_read .single_read-pc .read__content-wrapper .read__img .bg-pecore, #single_read .single_read-pc .read__content-wrapper .read__img .bg-sugutabe {
      /*kirameki&すぐ食べ　bg　明るさ調整*/
      filter: drop-shadow(10px 10px 20px rgba(3, 3, 3, 0.3)); }
    #single_read .single_read-pc .read__content-wrapper .read__img .fadeUp {
      animation-name: fadeUpAnime;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      opacity: 0; }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
    #single_read .single_read-pc .read__content-wrapper .read__img .read__img-popup-kirameki {
      opacity: 0;
      filter: brightness(120%) drop-shadow(10px 20px 30px rgba(3, 3, 3, 0.5));
      width: 48%;
      position: absolute;
      right: 17%;
      top: -4%; }
      @media screen and (max-width: 500px) {
        #single_read .single_read-pc .read__content-wrapper .read__img .read__img-popup-kirameki {
          width: 38%; } }
    #single_read .single_read-pc .read__content-wrapper .read__img .read__img-popup-sugutabe {
      opacity: 0;
      filter: brightness(100%) drop-shadow(10px 20px 30px rgba(3, 3, 3, 0.2));
      width: 70%;
      position: absolute;
      right: 8%;
      top: 20%; }
#single_read .single_read-mobile {
  display: none;
  /*kirameki・すぐ食べ img margin調整*/ }
  @media screen and (max-width: 1050px) {
    #single_read .single_read-mobile {
      display: block;
      height: 100%; } }
  #single_read .single_read-mobile .catch-copy {
    font-family: "a-otf-ryumin-pr6n",serif;
    font-size: 4.0rem; }
    @media screen and (max-width: 600px) {
      #single_read .single_read-mobile .catch-copy {
        font-size: 3.2rem; } }
  #single_read .single_read-mobile .discription {
    margin-top: 20px; }
  #single_read .single_read-mobile .read__img {
    margin: 20px 0;
    position: relative;
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    /*kirmeki*/
    /*sugutabe*/ }
    #single_read .single_read-mobile .read__img .read__img-bg {
      overflow: hidden;
      height: 40vh;
      width: 100%;
      object-fit: cover;
      border-radius: 0 30px; }
      @media screen and (max-width: 500px) {
        #single_read .single_read-mobile .read__img .read__img-bg {
          height: 30vh; } }
    #single_read .single_read-mobile .read__img .bg-kirameki {
      /*kirameki　bg　明るさ調整*/
      filter: brightness(50%) drop-shadow(10px 10px 20px rgba(3, 3, 3, 0.3)); }
    #single_read .single_read-mobile .read__img .bg-pecore, #single_read .single_read-mobile .read__img .bg-sugutabe {
      /*kirameki・すぐ食べ　bg　明るさ調整*/
      filter: drop-shadow(10px 10px 10px rgba(3, 3, 3, 0.2)); }
    #single_read .single_read-mobile .read__img .fadeUp {
      animation-name: fadeUpAnime;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      opacity: 0; }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
    #single_read .single_read-mobile .read__img .read__img-popup-kirameki {
      opacity: 0;
      filter: brightness(120%) drop-shadow(10px 20px 30px rgba(3, 3, 3, 0.5));
      width: 20%;
      position: absolute;
      right: 37%;
      top: -10%; }
      @media screen and (max-width: 800px) {
        #single_read .single_read-mobile .read__img .read__img-popup-kirameki {
          width: 28%; } }
      @media screen and (max-width: 500px) {
        #single_read .single_read-mobile .read__img .read__img-popup-kirameki {
          width: 30%; } }
    #single_read .single_read-mobile .read__img .read__img-popup-sugutabe {
      opacity: 0;
      filter: brightness(120%) drop-shadow(10px 20px 30px rgba(3, 3, 3, 0.5));
      width: 30%;
      position: absolute;
      right: 33%;
      top: -10%; }
      @media screen and (max-width: 1050px) {
        #single_read .single_read-mobile .read__img .read__img-popup-sugutabe {
          width: 40%;
          ight: 29%;
          top: 0%; } }
      @media screen and (max-width: 800px) {
        #single_read .single_read-mobile .read__img .read__img-popup-sugutabe {
          width: 50%;
          right: 25%;
          top: 14%; } }
  #single_read .single_read-mobile .img-1 {
    margin: 60px 0; }

#single_detaile {
  height: 100%;
  /*target諸々削除*/
  /*degin-camp pc・mobile*/ }
  #single_detaile .detaile_wrapper {
    display: flex;
    margin-bottom: 120px;
    justify-content: space-between;
    align-items: flex-start; }
    #single_detaile .detaile_wrapper:nth-child(4) {
      margin-bottom: 0; }
    @media screen and (max-width: 1100px) {
      #single_detaile .detaile_wrapper {
        display: block; } }
    @media screen and (max-width: 600px) {
      #single_detaile .detaile_wrapper {
        margin-bottom: 100px; } }
    #single_detaile .detaile_wrapper .single-title {
      display: flex;
      padding-bottom: 6px;
      border-bottom: 1px solid #333;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
      width: 400px; }
      @media screen and (max-width: 600px) {
        #single_detaile .detaile_wrapper .single-title {
          width: 100%; } }
      #single_detaile .detaile_wrapper .single-title .title {
        display: flex;
        align-items: center; }
        #single_detaile .detaile_wrapper .single-title .title img {
          width: 20px;
          height: 100%; }
        #single_detaile .detaile_wrapper .single-title .title h4 {
          font-size: 3.2rem; }
          @media screen and (max-width: 800px) {
            #single_detaile .detaile_wrapper .single-title .title h4 {
              font-size: 2.4rem; } }
      #single_detaile .detaile_wrapper .single-title .katakana {
        color: #8d8d8d; }
        @media screen and (max-width: 800px) {
          #single_detaile .detaile_wrapper .single-title .katakana {
            font-size: 1.2rem; } }
    #single_detaile .detaile_wrapper .detaile-discription {
      flex-basis: 70%;
      margin-left: 40px; }
      @media screen and (max-width: 1100px) {
        #single_detaile .detaile_wrapper .detaile-discription {
          margin-left: 0px; } }
      #single_detaile .detaile_wrapper .detaile-discription .detaile-discription__read {
        margin-bottom: 40px; }
      #single_detaile .detaile_wrapper .detaile-discription h4 {
        color: #6C6B6B;
        font-size: 2.4rem;
        margin-bottom: 20px; }
      #single_detaile .detaile_wrapper .detaile-discription h5 {
        color: #6C6B6B;
        font-size: 2.0rem; }
      #single_detaile .detaile_wrapper .detaile-discription .section__hoshino {
        color: #4C81C1; }
      #single_detaile .detaile_wrapper .detaile-discription ul {
        list-style-position: inside; }
        #single_detaile .detaile_wrapper .detaile-discription ul li {
          margin-bottom: 10px; }
      #single_detaile .detaile_wrapper .detaile-discription p {
        line-height: 1.5;
        margin-bottom: 40px; }
        @media screen and (max-width: 800px) {
          #single_detaile .detaile_wrapper .detaile-discription p {
            font-size: 20px; } }
      #single_detaile .detaile_wrapper .detaile-discription img {
        width: 100%;
        margin: 20px 0; }
      #single_detaile .detaile_wrapper .detaile-discription .color-bar {
        filter: drop-shadow(10px 10px 20px rgba(3, 3, 3, 0.2)); }
  #single_detaile .five, #single_detaile .six {
    /*ターゲット・デザインカンプ（pc・mb)横並び解除*/
    display: block; }
  #single_detaile .six {
    margin-bottom: 0;
    /*デザインカンプ（mb）margin-bottom削除*/ }
  #single_detaile .one {
    /*ターゲット下余白調整*/
    margin-bottom: 80px; }
    #single_detaile .one .single-title {
      /*タイトル下余白付与*/
      margin-bottom: 40px; }
  #single_detaile .single_degin-pc, #single_detaile .single_degin-mobile {
    height: 100%;
    display: flex; }
    #single_detaile .single_degin-pc .single_degin-camp, #single_detaile .single_degin-mobile .single_degin-camp {
      position: relative;
      background: #fff;
      width: 100%; }
      #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper {
        display: flex;
        padding: 60px; }
        @media screen and (max-width: 800px) {
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper {
            padding: 40px; } }
        @media screen and (max-width: 600px) {
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper {
            padding: 30px 20px; } }
        #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img {
          flex-basis: 50%;
          /*mobile1〇〇→横2行　mobile2〇〇→横3行 余白の付け方が違う*/ }
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-pc__one, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-pc__one {
            margin-right: 50px; }
            @media screen and (max-width: 800px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-pc__one, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-pc__one {
                margin-right: 20px; } }
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile1__one, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile1__one {
            /*横2列　1個目の要素右に余白*/
            margin-right: 50px; }
            @media screen and (max-width: 800px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile1__one, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile1__one {
                margin-right: 20px; } }
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile2__two, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile2__two {
            /*横３列　2個目(真ん中)の要素左右に余白*/
            margin: 0 30px; }
            @media screen and (max-width: 800px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile2__two, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img.img-mobile2__two {
                margin: 0 20px; } }
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img p, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img p {
            font-size: 1.4rem;
            margin-bottom: 10px; }
            @media screen and (max-width: 800px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img p, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img p {
                font-size: 1.2rem; } }
            @media screen and (max-width: 500px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img p, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img p {
                font-size: 1.0rem; } }
          #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img img, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img img {
            width: 100%;
            filter: drop-shadow(10px 20px 20px rgba(3, 3, 3, 0.3)); }
            @media screen and (max-width: 800px) {
              #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .content-img img, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .content-img img {
                filter: drop-shadow(10px 15px 10px rgba(3, 3, 3, 0.15)); } }
        #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .design-camp__pc, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .design-camp__pc {
          flex-basis: 70%; }
        #single_detaile .single_degin-pc .single_degin-camp .design-camp__content-wrapper .design-camp__mobile, #single_detaile .single_degin-mobile .single_degin-camp .design-camp__content-wrapper .design-camp__mobile {
          flex-basis: 30%; }

.button-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 60px; }
  .button-wrapper .button-link {
    text-align: center;
    text-decoration: none;
    transition: .3s;
    border-radius: 50px; }
    .button-wrapper .button-link:first-child {
      margin-right: 40px; }
    .button-wrapper .button-link .button-text {
      font-size: 2.0rem;
      font-family: "canto-pen",serif; }
      @media screen and (max-width: 600px) {
        .button-wrapper .button-link .button-text {
          font-size: 1.6rem; } }
  .button-wrapper .bg-extend-left {
    padding: 10px 20px;
    border: 2px solid #333;
    color: #333;
    overflow: hidden;
    position: relative;
    z-index: 1; }
    .button-wrapper .bg-extend-left:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: #9ABF68;
      position: absolute;
      left: -100%;
      top: 0;
      transition: .4s;
      z-index: -1; }
  .button-wrapper .bg-extend-left:hover::before {
    left: 0; }