@charset "utf-8";
.bg_kaoritatsu { width: 100%; }
.bg_kaoritatsu img { width: 100%; }
.bg_kaoritatsu * { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important; color: #333; }
.bg_cont { background: #B4E4A3; }
.kaoritatsu_cont_inr { background: url(/static/images/kaoritatsu_crunky_dog/bg_side.png) repeat-y left top, url(/static/images/kaoritatsu_crunky_dog/bg_side.png) repeat-y right bottom; background-size: 200px 925px; position: relative; }
.message_cont { }
.concept { max-width: calc(1000px + 20vw); padding: 5vw 10vw; margin: 0 auto; }
.concept .concept_inr { padding: 0 0 20px; }
.concept h2 { font-size: 30px; padding: 0 0 20px; text-align: center; }
.concept p { font-size: 24px; line-height: 1.75; text-align: center; }
.concept p br:nth-of-type(1) { display: none; }
.concept .thumb { width: 600px; text-align: center; margin: 0 auto; }
.item { position: relative; max-width: calc(1000px + 20vw); padding: 5vw 10vw; margin: 0 auto; display: flex; align-items: center; }
/* .item:before { position: absolute; bottom: 0; right: 5vw; display: block; content: ''; width: 150px; height: 150px; background: url(/static/images/kaoritatsu_crunky/bg_point.png) no-repeat; background-size: contain; } */
.item .item_inr { width: calc( 100% - 350px ); padding: 0 0 0 5vw; position: relative; }
/* .item .item_inr:before { position: absolute; top: -200px;left: 5vw; display: block; content: ''; width: 150px; height: 150px; background: url(/static/images/kaoritatsu_crunky/bg_item.png) no-repeat; background-size: contain; } */
.item h3 { display: inline-block; font-size: 24px; padding: 0 0 10px; margin: 0 auto 10px; border-bottom: 2px solid #129800; text-align: left; }
.item p { font-size: 20px; line-height: 1.75; text-align: left; }
.item .thumb { width: 350px; text-align: center; margin: 0 auto; }
.point { position: relative; max-width: calc(1000px + 20vw); padding: 5vw 10vw 0; margin: 0 auto; display: flex; align-items: center; overflow: hidden; }
.point .point_inr { width: calc( 100% - 400px ); padding: 0 5vw 0 0; text-align: right; }
.point h3 { display: inline-block; font-size: 24px; padding: 0 0 10px; margin: 0 auto 10px; border-bottom: 2px solid #129800; text-align: right; }
.point p { font-size: 20px; line-height: 1.75; text-align: right; }
.point .thumb { width: 400px; text-align: center; margin: 0 auto -100px; }

.lineup_cont { position: relative; max-width: calc( 800px + 20vw); padding: 5vw; margin: 0 auto; text-align: center; }
/* .lineup_cont:before { position: absolute; top: -50px; left: 0; display: block; content: ''; width: 150px; height: 150px; background: url(/static/images/kaoritatsu_crunky/bg_lineup.png) no-repeat; background-size: contain; } */
.lineup_cont h2 { display: inline-block; font-size: 30px; border-bottom: 2px solid #129800; padding: 10px 0; margin: 0 auto 2vw; text-align: center; }
.lineup_cont > p { text-align: center; font-weight: 900; font-size: 25px; padding: 0 0 2vw;}
.lineup_cont > p.title { padding: 10vw 0 2vw; }
.lineup_cont ul { display: flex; flex-wrap: wrap; gap: 4vw 4vw; text-align: left; padding: 0; }
.lineup_cont ul li { width: calc( 33% - 4vw ); }
.lineup_cont ul li > a { display: block; text-decoration: none; transition: all .3s;}
.lineup_cont ul li > a:hover { opacity: .7;}
.lineup_cont ul li h4 { font-size: 16px; padding: 5px 0; border-bottom: 2px solid #129800; margin: 0 auto 20px; text-align: center; }
.lineup_cont ul li .thumb { text-align: center; margin-bottom: 10px;  }
.lineup_cont ul li img { width: 100%; }
.lineup_cont ul li p { position: relative; line-height: 20px; padding: 10px 0 10px 25px; font-size: 15px; }
.lineup_cont ul li p:before { position: absolute; left: 0; top: 10px; content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; }
.lineup_cont ul li .chicken:before { background: #129441; }
.lineup_cont ul li .beef:before { background: #FF0000; }
.lineup_cont ul li .vegetables:before { background: #FFFF00; }
.lineup_cont ul li .cheese:before { background: #FFBF00; }
.lineup_cont .link_btn { text-align: center; margin: 5vw auto; }
.lineup_cont .link_btn a { position: relative; display: inline-block; font-size: 18px; line-height: 30px; font-weight: bold; color: #fff; background: #129800; padding: 10px 50px; border-radius: 10px; text-decoration: none; transition: all 0.3s; }
.lineup_cont .link_btn a:after { content: ''; width: 6px; height: 6px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 23px; right: 20px; border-radius: 1px; transition: all 0.3s; }
.lineup_cont .link_btn a:hover { opacity: 0.8; }
.lineup_cont .link_btn a:hover:after { right: 17px; }

.category_link { display: flex; flex-wrap: wrap; padding: 20px 0; }
.category_link dl { width: 50%; padding: 0 10px; }
.category_link a { text-decoration: none; }
.category_link dt img { height: 200px; width: auto; }
.category_link dd { padding: 10px 0 0; }
br.sp_show { display: none; }


@media screen and (max-width:1080px) {
  .concept { padding: 5vw; }
  .concept h2 { font-size: 24px; }
  .concept p { font-size: 18px; }
  .item { padding: 5vw; }
  .item:before { width: 120px; height: 120px; }
  .item .item_inr { width: calc( 100% - 200px ); padding: 0 0 0 5vw; }
  .item .item_inr:before { top: -150px; width: 120px; height: 120px; }
  .item .thumb { width: 200px; }
  .point { padding: 5vw; }
  .point:before { width: 120px; height: 120px; }
  .point .point_inr { width: calc( 100% - 300px ); }
  .point .thumb { width: 300px; }
  .lineup_cont { padding: 5vw; }
  .lineup_cont:before { width: 120px; height: 120px; }
  .lineup_cont h2 { font-size: 24px; }
  .lineup_cont ul { gap: 4vw 6vw; }
  .lineup_cont ul li { width: calc(( 100% / 3 ) - 4vw); }
  .category_link dt img { height: 180px; width: auto; }

}

@media screen and (max-width:767px) {
  .concept { padding: 10vw 5vw; }
  .concept h2 { font-size: 20px; }
  .concept p { font-size: 15px; }
  .concept p br:nth-of-type(1) { display: block; }
  .concept .thumb { width: 100%; }
  .item { display: block; padding: 10vw 5vw; }
  .item:before { top: -50px; width: 100px; height: 100px; }
  .item .item_inr { width: 100%; padding: 5vw 0 0; text-align: center; }
  /* .item .item_inr:before { top: -120px; left: -5vw; width: 100px; height: 100px; } */
  .item h3 { font-size: 20px; text-align: center; }
  .item p { font-size: 16px; text-align: center; }
  .point { display: block; padding: 10vw 5vw; }
  .point:before { width: 100px; height: 100px; }
  .point .point_inr { width: 100%; padding: 0 0 5vw; text-align: center; }
  .point h3 { font-size: 20px; text-align: center; }
  .point p { font-size: 16px; text-align: center; }
  .lineup_cont { padding: 10vw 5vw; }
  /* .lineup_cont:before { width: 100px; height: 100px; } */
  .lineup_cont h2 { margin: 5vw auto;}
  .lineup_cont > p { font-size: 16px; }
  .lineup_cont > p.title { font-size: 20px; padding: 20vw 0 5vw; }
  .lineup_cont ul { gap: 6vw 6vw; }
  .lineup_cont ul li { width: 100%; }
  .lineup_cont ul li h4 { font-size: 16px;}
  .lineup_cont ul li .thumb { padding: 0 30px; }
  .lineup_cont ul li p { font-size: 14px; line-height: 18px; padding: 5px 0 5px 45px; }
  .lineup_cont ul li p:before { top: 7px; left: 30px; width: 12px; height: 12px; }

  .category_link dl { width: 50%; padding: 10px; }
  .category_link dt img { height: 150px; width: auto; }
  br.sp_show { display: block; }

}