@charset "utf-8";
/* CSS Document */


#KabiGekiWrap {
  width: 100%;
  padding: 0 0 10% 0;
  margin: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
/*--以下　Adobe Font 要素---------------*/
.HeiseiMaruGothicStdW8 {
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 800;
  font-style: normal;
	line-height: 1.5em;
}
.HeiseiMaruGothicStdW4 {
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
	line-height: 1.8em;
}
/*-----------------*/
.w100p {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.w1006 {
  max-width: 1006px;
  margin: 0 auto;
  text-align: center;
}
.w1000 {
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
  clear: both;
  overflow: hidden
}
.w806 {
  max-width: 806px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden
}
.w392 {
  max-width: 392px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden
}
.w260 {
  max-width: 260px;
  padding: 0;
  margin: 5% auto;
  overflow: hidden;
}
.img100 img {
	width: 100%
}
.img392w img {
	width: 392px
}
.imgShadow img {
	box-shadow: 5px 5px 0 0 #000;
	overflow: visible;
}


.bgTile {
	background: url("img/bg_tile-repeat.jpg") center top;
	padding-bottom: 5%
} 

.subMidashi {
    font-size: 22px;
    position: relative;
    overflow: hidden;
    padding: 2% 2rem 2% 130px;
    color: #fff;
}

.subMidashi:before {
    position: absolute;
    top: -67px;
    left: -126px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.subMidashi img {
	width: 20px
}

.subMidashi span {
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 0;
    -webkit-transform: translate(0px, 50%);
    display: block;
    padding-top: 3px;
    padding-left: 16px;
    font-size: 33px;
    font-weight: bold;
}
.HighLight {
	background-color: #FFCC00;
}
.RedText {
	color: #D32D2D;
	font-weight: bold;
}

.GrayText {
	color: #9D9D9D;
	font-weight: bold;
}



.pc-only {
  display: block;
}
.tb-only {
  display: none;
}
.sp-only {
  display: none;
}
a.pageLink {
    display: block;
    padding-top: 140px;
    margin-top: -140px;
}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
.pc-only {
  display: none;
}
.tb-only {
  display: block;
}
  .sp-only {
    display:  none;
  }
	
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.none_waku {display: none}
  .pc-only {
    display: none;
  }
.tb-only {
  display: none;
}
  .sp-only {
    display: block;
  }
}
/*===========================
ヘッダー要素
===========================*/
.KabiGekiHeader {
  width: 100%;
}
.HeaderImgWrap {
	width: 100%;
	background: url("img/fv_pc.jpg") no-repeat center top;
	background-size: contain;
	padding-top: 55.75%;
}


@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.HeaderImgWrap {
	width: 100%;
	background: url("img/fv_sp.jpg") no-repeat center top;
	background-size: contain;
	padding-top: 110.8%;
}
}

/*===========================
section01要素 
===========================*/
.section01 {
	width: 100%;
	border: 3px solid #000;
	background-color: #fff;
	box-shadow: 5px 5px 0 0 #000;
	margin: 5% 0;
	padding: 5% 10%;
	box-sizing: border-box;
}
p.Sec01TitleImg {
	width: 360px;
	margin: 0 auto;
}
.HeaderText {
    font-size: 17px;
    line-height: 1.8em;
    margin: 39px 0px;
}
ul.bnrList {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul.bnrList li {
	width: 32%;
}
ul.bnrList li img {
	width: 100%;
}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
	.section01 {
		width: 95%;
		margin: 5% 3% 5% 2%;
		padding: 3%;
	}
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
	.section01 {
		width: 95%;
		margin: 5% 3% 5% 2%;
		padding: 5% 5%;
		box-sizing: border-box;
	}
p.Sec01TitleImg {
	width:90%;
	margin: 0 auto;
}
	.HeaderText{
		text-align: left;
	}
ul.bnrList li {
	width: 100%;
}
}


/*===========================
section02・03 共通要素 
===========================*/

.section02, .section03 {
	width: 100%;
	border: 3px solid #000;
	background-color: #fff;
	box-shadow: 5px 5px 0 0 #000;
	margin: 15% 0 0;
	padding: 5% 10%;
	box-sizing: border-box;
	position: relative;
}
.SecHeaderTitle  {
    position: absolute;
    width: 328px;
    height: 0;
    font-size: 26px;
    line-height: 10px;
    border: 3px solid #000;
    margin: 0 auto;
    padding: 31px 0;
    box-sizing: border-box;
    top: -68px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
}
.WhatText {
	width: 392px;
	margin: 5% auto 4%;
	font-size: 16px;
	text-align: left;
	line-height: 1.8em;
}
ul.img2narabi01 {
  max-width: 392px;
	margin: 3% auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.img2narabi02 {
  max-width: 392px;
	margin: 14% auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.img2narabi01 li,
ul.img2narabi02 li {
	width: 48%;
}

ul.img2narabi01 li img,
ul.img2narabi02 li img {
	width: 100%;
	display: block;
}


.w392 {
	position: relative;
}
p.ballon01,
p.ballon02 {
	position: absolute;
}
p.ballon01 {
    top: -103px;
    left: 125px;
}

p.ballon02 {
    top: -62px;
    right: 121px;
}
.text22s {
	font-size: 22px;
}
.arrowText01 {
	margin-bottom: 12px;
}
.arrowText02 {
    margin-bottom: 30px;
    margin-top: 79px;
}
.TextPadding4p {
	padding: 4% 0
}




@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
	
	.section02, .section03 {
		width: 95%;
		margin: 100px 3% 5% 2%;
		padding: 5% 3%;
	}
	
ul.img2narabi02 {
  max-width: 100%;
	margin: 14% auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.img2narabi02 li {
	width: 48%;
}

ul.img2narabi02 li img {
	width: 100%;
	display: block;
}
.text22s {
	font-size: 2.5vw;
}
	
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
	.section02, .section03 {
		width: 95%;
		margin: 100px 3% 5% 2%;
		padding: 5% 3%;
	}
	
	
.SecHeaderTitle  {
    width: 80%;
    height: 0;
    font-size:6vw;
    line-height: 10px;
    border: 3px solid #000;
    margin: 0 auto;
    padding: 31px 0;
    box-sizing: border-box;
    top: -68px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
}
	
	
ul.img2narabi01 {
  width: 100%;
	margin: 3% auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.img2narabi01 li {
	width: 80%;
	margin:0 auto 3%;
}

ul.img2narabi01 li img {
	width: 100%;
	display: block;
	padding: 0 auto;
}
	
	
ul.img2narabi02 {
 width: 100%;
	margin: 14% auto 5%;
  display: contents;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.img2narabi02 li {
	width: 100%;
	padding-top: 6%;
}
ul.img2narabi02 li.spCssRight {
	margin: 0
}

ul.img2narabi02 li.spCssLeft {
	margin: 0;
	padding-top:3%;
}

ul.img2narabi02 li img {
	width: 100%;
	display: block;
}
p.ballon01,
p.ballon02 {
	width: 70%;
}
p.ballon01 img,
p.ballon02 img {
	width: 100%;
}
p.ballon01 {
    top: 0%;
    left: -37%;
    -webkit-transform: translate(50%, 0px);
}

p.ballon02 {
    top: 43%;
    right: 35%;
    -webkit-transform: translate(50%, 0px);
}
.arrowText01 {
	margin-bottom: 12px;
	margin-top: 20%;
}
.text22s {
	font-size: 4.5vw;
}
}

/*===========================
section02要素 
===========================*/

.title_aka {
    background-color: #333333;
}

.title_aka:before {
    background: #CD2933;
}

.title_aka span {
    color: #fff;
}
.arrow_red {
    position: relative;
    padding: 0;
	top: 60px;
}
.arrow_red::before {
    content: "";
    position: absolute;
    top: -56px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    border: 41px solid transparent;
    border-top: 37px solid #CD2933;
}


.wakuRd {
	border: 2px solid #CD2933;
}
.wakuRd img {
	width: 100%;
}
.redBg {
	background: url("img/bg_akakabi.png") no-repeat center top;
	background-size: cover;
	color: #fff;
}
.HighLightRed {
	background-color: #D52D2D;
	padding: 1%;
	color: #fff;
}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.sub02MidashiSp {
    font-size: 4.5vw;
    position: relative;
    overflow: hidden;
    padding: 1% 0 2%;
    color: #fff;
}
	.sub02MidashiSp img {
		width: 8%
	}
}


/*===========================
section03要素 
===========================*/



.arrow_black {
    position: relative;
    padding: 0;
}
.arrow_black::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    border: 41px solid transparent;
    border-top: 37px solid #000;
}
.title_kuro {
	background-color: #333333;
}

.title_kuro:before {
  background: #9D9D9D;
}

.title_kuro span {
  color: #fff;
}

.grayBg {
	background: url("img/bg_kurokabi.png") no-repeat center top;
	background-size: cover;
	color: #fff;
}

.wakuBlk {
	border: 2px solid #A2A2A2;
}
.HighLightGray {
	background-color: #333;
	padding: 1%;
	color: #fff;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/

	
.sub03MidashiSp {
    font-size: 4.5vw;
    position: relative;
    overflow: hidden;
    padding: 2% 0 2%;
    color: #fff;
	line-height: 1em;
	font-weight: bold;
}
	.sub03MidashiSp img {
		width: 8%
	}
}

/*===========================
section04・05・06 共通要素 
===========================*/
.title_lineup {
  padding: 1.5rem 0 1rem;
  border-top: 6px double #000;
  border-bottom: 6px double #000;
	margin: 5% 0;
}
p.LineUpTitle01 {
	font-size: 18px
}
p.LineUpTitle02 {
	font-size: 30px
}




.point {
  position: relative;
  padding: 1.5rem 2rem calc(1rem + 10px);
	position: relative;
	margin-bottom: 3%;
}

.point:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px dashed #000;
    box-sizing: border-box;
}
.extention::before {
  content: ''; /*何も入れない*/
  display: inline-block; /*忘れずに！*/
	margin-right: 7px;
	background: url("img/icon-exclamation.png") no-repeat center center;
	width: 18px;
	height: 18px;
	background-size: contain;
  vertical-align: middle;
}

.section04,
.section05,
.section06 {
	width: 100%;
	background-color: #fff;
	margin: 12% 0 0;
	padding: 12% 10% 0;
	box-sizing: border-box;	
	position: relative;
	text-align: center;
}
.kabiLogo {
	position: absolute;
    top: -140px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
}
.pointLogo {
	position: absolute;
    top: -28px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
}
ul.PlaceBox{
width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	margin: 3% 0;
	font-weight: bold;
	padding: 3% 0;
}
ul.PlaceBox li {
	width: 32%;
	box-sizing: border-box;
	height: 63px;
	line-height: 60px;
	margin-bottom: 2%;
	text-align: center
}





ul.ItemList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	margin: 5% auto;
}

ul.ItemList li {
	padding: 2%;
	box-sizing: border-box;
	background: url("img/bg_tile.jpg") no-repeat center center;
	background-size: cover
}
ul.ItemList li img {
	width: 80%
}
.itemInfo {
	background-color: #fff;
	padding: 4% 2% 3%
}
.ItemName {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5em;
}

p.addCart {
  width: 100%;
    margin: 4% auto 0;
  color: #fff;
  padding: 12px 0 !important;
  font-size: 15px;
    box-sizing: border-box;
}
p.addCart:before {
  content: ''; /*何も入れない*/
  display: inline-block; /*忘れずに！*/
	margin-right: 7px;
  font-family: 'Material Icons';
  content: "shopping_cart";
  vertical-align: middle;
}
p.addCart a {
	color: #fff;
	text-decoration: none;
}
p.addCart a:hover {
	text-decoration: underline;
}


@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
.title_lineup {
		width: 95%;
	margin: 80px auto 20px
	}
.point {
  padding: 1.5rem 1rem calc(1rem + 10px);
		text-align: left;
}
	.w95p {
		width: 95%;
		margin: auto;
	}
	
	
.section04,
.section05,
.section06 {
		width: 95%;
		margin: 130px 3% 5% 2%;
		padding: 110px 3% 0;
	}
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.title_lineup {
		width: 95%;
    margin: 12% auto 5%;
	}
.point {
  padding: 1.5rem 1rem calc(1rem + 10px);
		text-align: left;
}
	.w95p {
		width: 95%;
		margin: auto;
	}
	
.section04,
.section05,
.section06 {
		width: 95%;
		margin: 130px 3% 5% 2%;
		padding: 110px 3% 0;
	}

.ItemName {
	font-size: 2.5vw;
	font-weight: bold;
	line-height: 1.5em;
}
p.addCart {
	font-size: 2.8vw
}
	
	

.point {
  padding: 1.5rem 1rem calc(1rem + 10px);
		text-align: left;
}
	
}







/*===========================
section04要素 
===========================*/
.section04 {
	border-top: 53px solid #D52D2D;
	border-bottom: 3px solid #D52D2D;
	border-right: 3px solid #D52D2D;
	border-left: 3px solid #D52D2D;
	box-shadow: 5px 5px 0 0 #D52D2D;
}

.pointBgAka {
  background: #F7D6D6;
}

.title_akakabi {
   background-color:#E92737;
  background-image:
    radial-gradient(#C90717 50%, transparent 30%);
  background-size: 10px 10px;
}

.title_akakabi:before {
  background: #FFCC00;
}

ul.AkaBorder li {
	border: 2px solid #D52D2D;
	color: #D52D2D
}



ul.ItemListAka {
	width: 530px;
	
}
ul.ItemListAka li {
	width: 49%;
}
.InfoAka {
	border-top: 3px solid #D52D2D;
}
.MoreInfoAka {
	background-color: #D52D2D;
}
.BtnAka {
  background-color: #D52D2D;}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	

ul.ItemListAka {
	width: 100%
}
ul.ItemListAka li {
	width: 49%;
}
}



/*===========================
section05要素 
===========================*/

.section05 {
	border-top: 53px solid #333333;
	border-bottom: 3px solid #333333;
	border-right: 3px solid #333333;
	border-left: 3px solid #333333;
	box-shadow: 5px 5px 0 0 #333333;
}

.pointBgKuro {
  background: #D7D7D7;
}

ul.KuroBorder li {
	border: 2px solid #333333;
	color: #333
}


.title_kurokabi {
   background-color:#525252;
  background-image:
    radial-gradient(#323232 50%, transparent 30%);
  background-size: 10px 10px;
}

.title_kurokabi:before {
  background: #FFCC00;
}
.InfoKuro {
	border-top: 3px solid #333333;
}



ul.ItemListKuro {
	width: 100%;
	
}
ul.ItemListKuro li {
	width: 32%;
	margin-bottom: 5%;
}

.MoreInfoKuro {
	background-color: #333333;
}
.none_waku {
	background-color: #fff !important;
	background-image: none !important;
}

.BtnKuro {
  background-color: #333333;
}



@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
ul.ItemListKuro {
	width: 100%;
	
}
ul.ItemListKuro li {
	width: 49%;
	margin-bottom: 5%;
}

}

/*===========================
section06要素 
===========================*/
	.PointText  {
	transform: rotate(-3deg);
    font-size: 25px;
    background: url(img/bg_Yellow.png) no-repeat center center;
    background-size: cover;
    width: 404px;
    padding: 23px 0px;
    margin: 10% auto 0;
    color: #15378E;
    text-shadow: 1px 1px #fff;
}
 

ul.AoBorder li {
	border: 2px solid #15378E;
	color: #15378E
}
.section06 {
	border-top: 53px solid #15378E;
	border-bottom: 3px solid #15378E;
	border-right: 3px solid #15378E;
	border-left: 3px solid #15378E;
	box-shadow: 5px 5px 0 0 #15378E;
}

.pointBgAo {
  background: #D3D9EA;
}


ul.AoBorder li {
	border: 2px solid #15378E;
	color: #333
}


.title_aokabi {
   background-color:#38559F;
  background-image:
    radial-gradient(#18357F 50%, transparent 30%);
  background-size: 10px 10px;
}

.title_aokabi:before {
  background: #FFCC00;
}
.InfoAo {
	border-top: 3px solid #15378E;
}



ul.ItemListAo {
	width: 100%;
	
}
ul.ItemListAo li {
	width: 32%;
	margin-bottom: 5%;
}




.MoreInfoAo {
	background-color: #15378E;
}
.BtnAo {
  background-color: #15378E;
}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
	.PointText  {
	    transform: rotate(-3deg);
    font-size: 22px;
    background: url(img/bg_Yellow.png) no-repeat center center;
    background-size: cover;
    width: 53%;
    padding: 17px 0px;
    margin: 10% auto 0;
    color: #15378E;
    text-shadow: 1px 1px #fff;
	}
	
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
ul.ItemListAo {
	width: 100%;
	
}
ul.ItemListAo li {
	width: 49%;
	margin-bottom: 5%;
}
	.margin50p {
		margin-right: auto;
		margin-left: auto;
	}
	
	.PointText  {
		transform: rotate(-3deg);
    font-size: 5vw;
    background: url(img/bg_Yellow.png) no-repeat center center;
    background-size: cover;
    width: 77%;
    padding: 3% 0;
    margin: 10% auto 0;
    color: #15378E;
    text-shadow: 1px 1px #fff;
}
 
}