/* ------------------------------------------
  全体・共通
------------------------------------------ */

.contents-main,
.contents-main p {
   color: #842A0C;
   line-height: 2em;
   position: relative;
}

main {
   padding-top: 50px;
}

.contents-main {
   background-color: #EFFFDA;
   background-image: url(../img/line-lace.png);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100%;
   padding: 50px;
   position: relative;
}

.contents-main::after {
   display: block;
   position: absolute;
   content: "";
   bottom: 0;
   left: 0;
   width: 100%;
   height: 56px;
   background-image: url(../img/line-lace-btm.png);
   background-repeat: no-repeat;
   background-position: center top;
   background-size: 100%;
}

.contents-main p {
   margin-bottom: 30px;
}

.contents-main b {
   font-weight: bold;
}

.contents-main a:link,
.contents-main a:visited {
   color: #E56620;
   text-decoration: underline;
}

.contents-main a:hover {
   color: #C67605;
   text-decoration: none;
}

.link-icon {
   position: relative;
   padding-right: 20px;
   /* アイコン画像の幅に合わせて調整 */
   display: inline-block;
   vertical-align: middle;
}

.link-icon::after {
   content: "";
   display: block;
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   /* アイコン画像の幅に合わせて調整 */
   height: 14px;
   /* 必要に応じて高さも調整 */
   background-image: url('../img/icon-link.svg');
   /* アイコン画像のパス */
   background-size: contain;
   background-repeat: no-repeat;
   pointer-events: none;
}

.link-icon:hover {
   opacity: 0.8;
}

.btn-buy {
   width: 327px;
   display: block;
   margin: 0 auto;
}

.font-l {
   font-size: 20px;
}

.font-red {
   color: #CE2A2D;
}

@media screen and (max-width: 599px) {
   main {
      padding-top: 0;
   }

   .contents-main {
      background-size: 120%;
   }

   .contents-main::after {
      background-size: 120%;
      height: 9vw;
   }

   .btn-buy {
      width: 90%;
   }

   .font-l {
      font-size: 1.2em;
   }

   .contents-main p {
      margin-bottom: 20px;
   }
}



/* ------------------------------------------
  info
------------------------------------------ */

.info-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 70px;
   padding-top: 40px;
}

.info-lead {
   font-size: 1.5rem;
   width: auto;
}

.info-img {
   width: 35%;
}

.info-lead {
   width: 55%;
   line-height: 2.2em;
   font-size: 1.2em;
}

.info-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media screen and (max-width: 599px) {
   .info-container {
      flex-direction: column;
   }

   .info-lead {
      width: 90%;
      margin-bottom: 30px;
   }

   .info-img {
      width: 60%;
   }
}



/* ------------------------------------------
  美味しさの秘密
------------------------------------------ */

.scone-info {
   background-color: #fff;
   padding: 50px 30px;
   border-radius: 15px;
   margin-bottom: 40px;
}

.scone-title {
   font-size: 1.8em;
   font-weight: bold;
   color: #E56620;
   text-align: center;
   margin-bottom: 30px;
   line-height: 1.6em;
}

.butter_milk-list {
   display: flex;
   justify-content: space-between;
}

.butter_milk-item {
   width: 48%;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

.butter_milk-itemname {
   font-size: 1em;
   font-weight: bold;
   margin-bottom: 10px;
   line-height: 1.4em !important;
}

.butter_milk-img {
   width: 40%;
}

.butter_milk-img img {
   width: 100%;
   display: block;
}

.butter_milk-text {
   width: 60%;
   text-align: center;
}

.hokkaido47-text {
   width: 65%;
   margin-left: -10%;
}

@media screen and (max-width: 599px) {
   .scone-title {
      font-size: 1.6em;
      margin-bottom: 20px;
   }

   .scone-info {
      padding: 30px 20px;
   }

   .butter_milk-list {
      flex-direction: column;
   }

   .butter_milk-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
   }

   .butter_milk-img img {
      width: 90%;
      margin: 0 auto;
   }

   .butter_milk-itemname {
      font-size: 1.2em;
   }
}




/* ------------------------------------------
  商品紹介
------------------------------------------ */

.scone-itemlist {
   width: 85%;
   margin: 0 auto 150px;
}

.scone-item {
   margin-bottom: 70px;
}

.scone-item-h3 {
   font-weight: bold;
}

.scone-item-img {
   width: 100%;
   margin: 0 auto;
}

.scone-item-img img {
   display: block;
   width: 100%;
}

.creamteaset .scone-item-img {
   width: 80%;
   position: relative;
   margin-bottom: 30px;
}

.creamteaset .scone-item-img .notice-onimg {
   position: absolute;
   bottom: 10px;
   right: 0;
   left: 0;
   margin: auto;
   text-align: center;
   font-size: 0.8em;
   line-height: 1.6em;
}

.osusume-list {
   margin-bottom: 30px;
}

.osusume-list li {
   list-style-type: disc;
   margin-left: 1em;
   font-weight: bold;
   font-size: 1.2em;
}

.creamteaset p.catch {
   text-align: center;
   font-size: 1.2em;
   border: 7px solid #E56620;
   padding: 10px 20px;
   border-radius: 10px;
   margin-bottom: 30px;
}


@media screen and (max-width: 599px) {
   .scone-itemlist {
      width: 100%;
      margin: 0 auto 150px;
   }

   .creamteaset .scone-item-img {
      width: 100%;
   }

   .creamteaset p.catch .font-l {
      font-size: 1.5em;
   }
}




/* ------------------------------------------
  アレンジ
------------------------------------------ */

.recipe {
   background-color: #fff;
   padding: 50px 40px;
   border-radius: 15px;
   margin-bottom: 40px;
   position: relative;
}

.title-recipe {
   position: absolute;
   top: -60px;
   right: 0;
   left: -5%;
   margin: auto;
   width: 110%;
}

.recipe-list {
   padding-top: 10px;
}

.recipe-item {
   padding-bottom: 20px;
   margin-bottom: 40px;
   background-image: url(../img/line-dash.svg);
   background-repeat: no-repeat;
   background-position: bottom 0 center;
   background-size: 100%;
}

.recipe-item-head {
   display: flex;
   align-items: end;
   justify-content: space-around;
   margin-bottom: 30px;
}

.recipe-item-head h2 {
   font-size: 1.4em;
   color: #E56620;
   font-weight: bold;
   text-align: center;
}

.recipe-item-title {
   width: 45%;
}

.recipe-item-title-icon {
   width: 130px;
   margin: 0 auto 15px;
   display: block;
}

.recipe-item-img {
   width: 50%;
}


@media screen and (max-width: 599px) {
   .recipe {
      padding: 50px 15px 30px;
      margin-bottom: 40px;
   }

   .title-recipe {
      width: 105%;
      left: -2.5%;
      top: -28px;
   }

   .recipe-item-head {
      flex-direction: column;
      margin-bottom: 20px;
   }

   .recipe-sandwich .recipe-item-head {
      flex-direction: column-reverse;
   }

   .recipe-item-title,
   .recipe-item-img {
      width: 100%;
   }

   .recipe-item-title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
   }

   .recipe-item-title-icon {
      width: 30%;
      margin: 0 20px 0 0;
   }

   .recipe-item-head h2 {
      text-align: left;
      font-size: 1.5em;
      line-height: 1.6em;
   }
}