@charset "utf-8";
/* CSS Document */
#adminMinBox,
#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer{
  position: relative;
  z-index: 100;
}
.tss_footer{
  background: url(../img/ph_bodybg.png) center center;
  background-size: cover;
}


img{max-width: 100%;}
.boru_body{
  position: relative;
  padding: 0 16px;
}

.boru_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../img/ph_bodybg.png) center top no-repeat;
  background-size: cover;
}

.boru_wrap{
  position: relative;
  max-width: 1200px;
  margin: auto;
  padding: 0 14px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.16);
  z-index: 75;
}



.boru_top{
  position: relative;
  padding-top: 48px;
}
.boru_keyvisual{
  position: relative;
  margin-bottom: 104px;
  text-align: center;
}
.boru_keyvisual p{
  position: absolute;
  right: 136px;
  bottom: 4px;
}
.boru_title{
  position: absolute;
  left: calc(50% - 345px);
  bottom: -88px;
}
.boru_photos{position: absolute;}
.boru_photos img{
  border-radius: 15px;
  border: 3px solid #FFFFFF;
}
.boru_p1{
  top: 32px;
  left: -60px;
}
.boru_p2{
  top: 40px;
  right: -32px;
}
.boru_p3{
  top: 412px;
  left: -96px;
}
.boru_torecipe{
  position: absolute;
  top: 360px;
  right: 40px;
}

.boru_torecipe img{
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 3s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
}

@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}


.boru_blocknet{
  max-width: 980px;
  margin: 0 auto 20px;
}
.boru_blocknet h2{
  height: 30px;
  margin-bottom: 18px;
  text-align: center;
  background: url(../img/ph_bodybg.png) center center no-repeat;
  padding-top: 2px;
}
.boru_blocknet ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 40px;
}
.boru_blocknet ul::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 18px;
  background: url(../img/ph_bodybg.png) center center;
  background-size: cover;
}
.boru_blocknet ul li{
  position: relative;
  padding-left: 10px;
}
.boru_blocknet ul li p{
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: bold;
}
.boru_blocknet ul li::before{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: url(../img/ph_bodybg.png) center center;
  background-size: cover;
}

.boru_appearance{margin-bottom: 32px;}
.boru_appearance h2{
  text-align: center;
  line-height: 1.875;
  font-size: 1.75rem;
  font-weight: bold;
}
.boru_appearance p{
  text-align: center;
  font-size: 1.75rem;
  font-weight: bold;
}
.boru_appearance p span{font-size: 1.375rem;}


.boru_detail{
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.boru_detail p{
  margin-bottom: 12px;
  line-height: 1.5rem;
}
.boru_photobox{
  margin-bottom: 24px;
  text-align: center;
  position: relative;
}
.boru_photobox::before,
.boru_photobox::after{
  content: "";
  display: block;
  position: absolute;
  top:20%;
  height: 400px;
  width: 400px;
  background:url( "../img/ph_bg.jpg") no-repeat;
  z-index: -1;
}
.boru_photobox::before{right: -380px;}
.boru_photobox::after{left: -190px;}

.boru_detail p.boru_bld{
  text-align: center;
  font-weight: bold;
}
.boru_detail p.boru_svgtxt{text-align: center;}



.boru_recipe{
  max-width: 980px;
  margin: 0 auto 40px;
  padding: 16px;
  background: url(../img/ph_bodybg2.png) center top repeat-x;
  background-size: auto 164px;
}
.boru_recipe h2{
  margin-bottom: 12px;
  text-align: center;
}
.boru_recipe ul{
  display: flex;
  justify-content: center;
  gap: 0 24px;
}
.boru_recipe ul li{width: 280px;}
.boru_recipe ul li a{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 10px;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.boru_recipe ul li a img{transition: all 0.2s linear;}
.boru_recipe ul li a div{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  margin: auto 0 0;
  padding: 24px 4px 4px;
  border-radius: 0px 0px 10px 10px;
  background: linear-gradient(rgba(227, 70, 0, 0) 0%, rgba(227, 151, 0, 0.48) 44.35%, #ffbd67 100%);
}
.boru_recipe ul li a div p{
  line-height: 1.25;
  padding: 4px 0;
  text-align: center;
  font-weight: bold;
  font-size: 0.875rem;
  color: #775134;
  border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, 0.71) 0%, #fff 100%);
}
.boru_recipe_detail{
  width: 100%;
  max-width: 980px;
  margin:auto;
  line-height: 1.6;
  padding-bottom: 3em;
}
.boru_recipe_detail:last-of-type{padding-bottom: 6em;}
.boru_recipe_detail h3{
  font-weight: bold;
  font-size: clamp(1rem, 0.833rem + 0.56vw, 1.25rem)/*16-20 480-1200*/;
  line-height: 1.4;
  text-align: left;
  color: #000;
  border-top:2px solid #FFF;
  border-image: url("../img/hr.jpg") 27 / 2px 0 0 0 / 2px 0 0 0  round;
  padding: 16px 16px 16px 0;
}
.boru_recipe_detail > div{
  display: flex;
  gap:4.5%;
}
.boru_recipe_ph{margin-bottom: 1em;}
.boru_recipe_nametxt{font-size: 0.875rem;}
.boru_recipe_detail .boru_recipe_name h5{
  width: 100%;
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 100%),url(../img/hr2.jpg);
  background-repeat: repeat-x;
  background-position: right center;
  font-weight: bold;
  font-size: 0.875rem;
  color: #6d6d6d;
  margin-bottom: 1em;
}
.boru_recipe_detail .boru_recipe_name div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.boru_recipe_detail .boru_recipe_name div p:first-of-type{max-width:74px;}
.boru_recipe_detail .boru_recipe_name div p:last-of-type{
  width:calc(100% - 90px);
  font-size: 0.75rem;
}

.boru_recipe_detail h4{
  font-weight: bold;
  font-size: clamp(1rem, 0.833rem + 0.56vw, 1.25rem)/*16-20 480-1200*/;
  text-align: left;
  color: #ec31a2;
}
.boru_recipe_detail dl,
.boru_recipe_detail ul{font-size: 0.875rem;}
.boru_recipe_detail dl dt{font-weight: bold;}
.boru_recipe_detail dl dd,
.boru_recipe_detail li{margin-bottom: 1em;}

.boru_recipe_detail > div > div{width: 100%;}
.boru_recipe_detail > div > div:first-of-type,
.boru_recipe_detail > div > div:last-of-type{max-width: 340px;}
.boru_recipe_detail > div > div:nth-of-type(2){max-width: 244px;}

.boru_cloud{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}
.boru_cloud div{
  position: absolute;
  animation: cloud 10s ease-in-out infinite;
}
.boru_cloud div img{
  width: 100%;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}
.boru_cld1{
  top: 27px;
  left: calc(50% - 895px);
  width: 114px;
}
.boru_cld2{
  top: 200px;
  left: calc(50% - 790px);
  width: 105px;
}
.boru_cld3{
  top: 340px;
  left: calc(50% - 725px);
  width: 208px;
}
.boru_cld4{
  top: 423px;
  left: calc(50% - 914px);
  width: 150px;
}
.boru_cld5{
  top: 683px;
  left: calc(50% - 793px);
  width: 114px;
}
.boru_cld6{
  top: 27px;
  right: calc(50% - 846px);
  width: 114px;
}
.boru_cld7{
  top: 237px;
  right: calc(50% - 749px);
  width: 94px;
}
.boru_cld8{
  top: 319px;
  right: calc(50% - 787px);
  width: 240px;
}
.boru_cld9{
  top: 392px;
  right: calc(50% - 933px);
  width: 98px;
}
.boru_cld10{
  top: 640px;
  right: calc(50% - 831px);
  width: 114px;
}
@keyframes cloud {
  0%{transform: scale(1);}
  35%{transform: scale(1);}
  50%{transform: scale(1.2);}
  75%{transform: scale(0.9);}
  100%{transform: scale(1);}
}
.boru_cloud div.boru_dly1{animation-delay: 0.5s;}
.boru_cloud div.boru_dly2{animation-delay: 1s;}
.boru_cloud div.boru_dly3{animation-delay: 1.5s;}
.boru_cloud div.boru_dly4{animation-delay: 2s;}
.boru_cloud div.boru_dly5{animation-delay: 2.5s;}
.boru_cloud div.boru_dly6{animation-delay: 3s;}
.boru_cloud div.boru_dly7{animation-delay: 3.5s;}
.boru_cloud div.boru_dly8{animation-delay: 4s;}
.boru_cloud div.boru_dly9{animation-delay: 4.5s;}
.boru_cloud div.boru_dly10{animation-delay: 5s;}








@media screen and (min-width:801px){
  .boru_torecipe a:hover{opacity: 0.5;}
  .boru_recipe ul li a:hover img{transform: scale(1.2);}

  .tss_gotop a:hover{opacity: 0.5;}
}





@media screen and (max-width:1250px){/*1200 + 32 + 17*/
  .boru_keyvisual picture img{width: 77.7vw;}
  .boru_keyvisual p{
    width: 13.4vw;
    right: 10.8vw;
  }
  .boru_title{
    width: 55.2vw;
    left: calc(50% - 27.6vw);
  }
  .boru_photos{width: 27.68vw;}
  .boru_p1{top: 2.5vw;}
  .boru_p2{top: 3.2vw;}
  .boru_p3{top: 33vw;}
  .boru_torecipe{
    top: 28.8vw;
    right: 3.2vw;
    width: 18.64vw;
  }
  
  .boru_recipe_detail > div {
    gap: 3%;
    flex-wrap: wrap;
  }
  .boru_recipe_detail > div > div{width: auto;}
  .boru_recipe_detail > div > div:first-of-type{padding-bottom: 1em;}
  .boru_recipe_detail > div > div:first-of-type,
  .boru_recipe_detail > div > div:nth-of-type(2){max-width: 48%;}
  .boru_recipe_detail > div > div:last-of-type{max-width: 100%;}
  
}
@media screen and (max-width:800px){
  .boru_wrap{padding-bottom: calc(17.5vw + 40px);}


  .boru_keyvisual{margin-bottom: 34.7vw;}
  .boru_keyvisual picture img{width: 100%;}
  .boru_keyvisual p{
    width: 27.2vw;
    right: 4px;
    bottom: 0;
  }
  .boru_title{
    width: 80vw;
    bottom: -30.4vw;
    left: calc(50% - 42vw);
  }
  .boru_photos{width: 26.6vw;}
  .boru_p1{left: -32px;}
  .boru_p3{
    top: 40vw;
    left: -32px;
  }
  .boru_torecipe{
    top: 29.8vw;
    right: -32px;
    width: 25.6vw;
  }


  .boru_blocknet ul{
    gap: 10px 0;
    width: calc(100% + 28px);
    margin-left: -14px;
    padding: 0 12px;
  }
  .boru_blocknet ul li:nth-of-type(odd){width: 42%;}
  .boru_blocknet ul li:nth-of-type(even){width: 58%;}
  .boru_blocknet ul li p{font-size: 0.875rem;}
  .boru_blocknet ul li span{font-size: 0.75rem;}


  .boru_appearance{margin-bottom: 24px;}
  .boru_appearance h2{font-size: 1rem;}
  .boru_appearance p{
    line-height: 1.25;
    font-size: 1.25rem;
  }
  .boru_appearance p span{
    display: block;
    font-size: 1rem;
  }


  .boru_detail p{font-size: 0.875rem;}
  .boru_detail p.boru_bld{font-size: 1rem;}
  .boru_detail p.boru_bld span{display: block;}


  .boru_recipe{
    padding: 16px 8px;
    background-size: cover;
  }
  .boru_recipe ul{display: block;}
  .boru_recipe ul li{width: 100%;}
  .boru_recipe ul li:nth-last-of-type(n+2){margin-bottom: 8px;}
  .boru_recipe ul li a{
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
  }
  .boru_recipe ul li a > p{width: 31%;}
  .boru_recipe ul li a img{border-radius: 6px;}
  .boru_recipe ul li a div{
    position: static;
    width: 69%;
    margin: 0;
    padding: 12px;
    background: none;
  }
  .boru_recipe ul li a div p{
    padding: 0;
    text-align: left;
    background: none;
  }
  .boru_recipe ul li a div p br{display: none;}
}


@media screen and (max-width:480px){
  .boru_photobox::before,
  .boru_photobox::after{
    height: 30vw;
    width: 30vw;
  }
  .boru_photobox::before{right: -33vw;}
  .boru_photobox::after{left: -33vw;}
  
  .boru_recipe_detail > div > div:first-of-type, .boru_recipe_detail > div > div:nth-of-type(2) {
    max-width: 100%;
  }
  .boru_recipe_ph:last-of-type{margin-bottom: 0;}
  
}