@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: #ff9a74; }
.kaoritatsu_cont_inr { background: url(/static/images/kaoritatsu_crunky/bg_side.png) repeat-y left top, url(/static/images/kaoritatsu_crunky/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 #e23322; 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 #e23322; 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 #e23322; padding: 10px 0; margin: 0 auto 2vw; text-align: center; }
.lineup_cont > p { text-align: center; font-weight: 900; font-size: 25px; margin: 0 auto 2vw;}
.lineup_cont > p:last-of-type { margin: 3vw auto 2vw auto;}
.lineup_cont ul { display: flex; flex-wrap: wrap; gap: 4vw 4vw; text-align: left; }
.lineup_cont ul:last-of-type { justify-content: center;}
.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 #e23322; 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 .maguro:before { background: #df0013; }
.lineup_cont ul li .torisasami:before { background: #e45d01; }
.lineup_cont ul li .hotate:before { background: #0158a7; }
.lineup_cont ul li .maguro_bushi:before { background: #0097dc; }
.lineup_cont ul li .kokusan_madai:before { background: #e38e00; }
.lineup_cont ul li .hon_maguro:before { background: #201615; }
.lineup_cont ul li .kuroge_wagyu:before { background: #6f2d2f; }
.lineup_cont ul li .ika:before { background: #89ba3c; }
.lineup_cont ul li .kani:before { background: #ebcf02; }
.lineup_cont ul li .amaebi:before { background: #d52d6f; }
.lineup_cont ul li .salmon:before { background: #e3695a; }
.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: #e23322; 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; }

@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); }

}

@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; }
  /* .item .item_inr:before { top: -120px; left: -5vw; width: 100px; height: 100px; } */
  .item h3 { font-size: 20px; }
  .item p { font-size: 16px; }
  .point { display: block; padding: 10vw 5vw; }
  .point:before { width: 100px; height: 100px; }
  .point .point_inr { width: 100%; padding: 0 0 5vw; text-align: left; }
  .point h3 { font-size: 20px; }
  .point p { font-size: 16px; }
  .lineup_cont { padding: 10vw 5vw; }
  /* .lineup_cont:before { width: 100px; height: 100px; } */
  .lineup_cont h2 { margin: 0 auto 5vw;}
  .lineup_cont > p { font-size: 16px; margin: 0 auto 6vw;}
  .lineup_cont > p:last-of-type { margin: 5vw auto;}
  .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; }

}