@charset "utf-8";

/*-----
全体
-----*/
#bousai{
    text-align: center;
    font-size: 1em;
    font-feature-settings: "palt";
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
	max-width: 720px;
	margin: 0 auto;
}
#bousai .contents01,#bousai .contents02 {
    font-size: 1.2em;
}
#bousai p{
    margin-bottom: 0;
}
#bousai .notice{
    font-size: 0.8em;
}
#bousai .list_icon >li::before{
    content: '□';
/*    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("image/list_icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;*/
    padding-right: 0.2em;
    color: #333333;
}
/*#bousai .list_icon > li {
  background: url("image/list_icon.png")no-repeat left 0.2em;
  padding: 0.15em 0;
  background-size: 1.4em auto;
  -webkit-background-size: 1.4em auto;
  -moz-background-size: 1.4em auto;
  -o-background-size: 1.4em auto;
  -ms-background-size: 1.4em auto;
  padding-left: 1.8em;
}*/

/*-----
災害への「備え」チェックリスト
-----*/
#bousai .title_box{
    padding: 3em 0;
}
#bousai .list_box_01{
    margin-top: 2em;
}
/*-----
非常用持ち出し袋 contents01
-----*/

#bousai .contents01 {
    background-color: #ebf2da;
    position: relative;
    margin-top: 4em;
    padding: 5em 2em 2em 2em;
}
/*リスト*/
#bousai .list_box_01 ,#bousai .list_box_02 {
    border: 1px solid;
    text-align: left;
    padding: 3em 2em;
    position: relative
}

/*必要に応じて*/
 #bousai .contents01 .list_box_02 {
    margin-top: 3em;
}
/*-----
備蓄品 contents02
------*/

#bousai .contents02 {
    background-color: #fffcf1;
    position: relative;
    margin-top: 7em;
    padding: 5em 2em 2em 2em;
}

/*人数分用意しましょう　リスト３行目*/
#bousai .contents02 .list_icon>li:nth-child(3)::before{
    display: none;
}

#bousai .contents02 .list_icon>li:nth-child(3) {
    padding-left: 1em;
}

/*ローリングストックという備え方*/
#bousai .contents02 .list_box_02{
    border: none;
    text-align: center;
}
#bousai .contents02 .contents02_text_02 {
    padding-bottom: 2em;
    width: 80%;
}

/*-----
キャッチコピー contents03
-----*/

#bousai .contents03{
    padding: 3em 0;
}
#bousai .catch_copy {
    font-size: 3em;
    padding-bottom: 1em;
    color: #f7524c;
    font-weight: bold;
}
/*-----
画像の位置
------*/

/*非常用持ち出し袋画像の位置*/
.contents01_text {
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: -4%;
}

/*避難の際に持ち出すもの画像の位置*/
#bousai .list_box_text_1 {
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: -3%;
}
/*必要に応じて画像の位置*/
#bousai .list_box_text_2 {
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: -7%;
}
/*備蓄品画像の位置*/
#bousai .contents02_title {
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: -4%;
}

/*人数分用意しましょう画像の位置*/
#bousai .contents02_text{
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: -8%;
}

/*インクルード------------------------------------------*/
	/*一商品余白調整 */
	#bousai .c-panel{
		margin-bottom: 1rem;
		background-color: #fffae9;/*背景色変更*/
		padding: 5%;/*余白調整*/
		position: relative;
		padding: 3%;
		text-align: left;
	}	

		/*商品のまとめ（余白確保）*/
		#bousai .item_wrapper{
			margin-bottom: 15%;
		}
		#bousai .item_wrapper.item_wrapper_last{
			margin-bottom: 5%;

		}
	#bousai .c-panel:not(:has(~ .c-panel)) {
		margin-bottom: 0;
	}
	/*テキストエリア*/	
	#bousai .c-panel__body {
		margin-top: 0px;
		max-width: 70%;
		margin-left: 20px;
	}
/*商品説明をなしに*/
		#bousai .c-panel__desc {
    display: none;
}


	/*商品画像の位置*/
	#bousai .c-panel__header {
		box-sizing: border-box;
		width: 145px;
	}
	/*商品画像の大きさ*/
	#bousai .c-panel__header__image {
		width: 100%;
		border: 5px solid #FFF;
		background-color: #fff;
	}
	/*価格（余白確保してボタンに被るのを回避、並び方調整など）*/
	#bousai .c-panel__price-wrapper {
		margin-bottom: 4rem;
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		column-gap:1rem;
    --space: 3px;
	}
	

	#bousai .c-panel__desc{
		margin-bottom: 4.9rem;
	}
	/*割引率*/
	#bousai .c-panel__discount .badge.badge-red.c-label-discount{
		font-size: 1.4rem;
	}
	/*ボタン位置*/	
	#bousai .c-panel__action {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	/*商品とテキストを横並びに*/
	#bousai .c-panel__link{
		display: flex;
	}
	#cp_end .cp_list .c-panel{
		background-color: #fff3f4;
	}

@media screen and (max-width: 768px) {

	#bousai{
		max-width: 100%;
	}

	#bousai .title_box{
		padding: 2em 1em;
	}
	#bousai .contents01{
		padding: 2em 1em 1em 1em;
		margin-top: 2em;
	}
	#bousai .list_box_01 ,
	#bousai .list_box_02{
		padding: 2em 1em;
	}
	#bousai .contents02{
		margin-top: 3em;
		padding: 2em 1em 1em 1em;
	}
	#bousai .contents02 .contents02_text_02{
		padding-bottom: 1em;
		width: 100%;
	}
	#bousai .contents03{
		padding: 1.5em 0;
	}
	#bousai .catch_copy { font-size: 1.5em;}
	.contents01_text{
		top: -2%;
		width: 80%;
	}
	#bousai .list_box_text_1{
		top: -2%;
		width: 70%;

	}
	#bousai .list_box_text_2{
		top: -5%;
		width: 40%;
	}

	#bousai .contents02_title{
		top: -3%;
		width: 75%;
	}
	#bousai .contents02_text{
		top: -6%;
		width: 70%;
	}

	#bousai .display_hybrid .display_matrix li {
		width: 50%;
	}

	/*インクルード------------------------------------------*/
	/*商品のまとめ（余白確保）*/
	#bousai .item_wrapper {
		width: 92vw;
		margin: 5% auto 20%;
		/* margin-top: 8%; */
	}
	/*一商品*/		
	#bousai .c-panel {
		padding: 4% 3%;
	}
	/*商品画像*/
	#bousai .c-panel__header {
		width: 110px;
	}
	/*タイトル余白調整*/
	#bousai .item_title {
		margin-bottom: 3%;
	}

	/*テキスト領域*/
	#bousai .c-panel__body {
		max-width: 63%;
		margin-left: 1.2rem;
	}
	/*商品名*/	
	#bousai .c-panel__name {
		font-size: 1.4rem;
	}	
	/*ボタン*/
	#bousai .btn-sm,
	#bousai .more_btn .btn.btn-sm.btn-outline-primary{
		font-size: 1.4rem;
	}

	/*価格下に余白確保（ボタンに被るのを回避）*/		
	#bousai .c-panel__price-wrapper {
		margin-bottom: 3.9rem;
	}	


	/*割引率+期日のdiv*/
	#bousai .c-panel__discount {
		flex-basis: 100%;/*（回り込み回避）*/
		--price-space: 2px;
	}
	/*割引率*/
	#bousai .c-panel__discount .badge.badge-red.c-label-discount {
		padding: 3px 5px;
	}
	
}