@charset "UTF-8";
/* CSS Document */
     /*リセットCSS*/
     .container, .container section, .container figure, div, .container img, .container table, .container ul, .container ol, .container a, .container p, .container h2, .container h3, .container h4 {
        width: 100%;
        margin: 0;
       padding: 0;
         transition: .5s ;
         font-weight: normal;
     }
      ul, ol {
         list-style-type: none;
         padding: 0;
     }
  figcaption {
        width: 100%;
        margin: 0;
       padding: 0;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}
     /*ここまでリセットCSS*/
	
/*ここからデザインCSS*/
	
	/*コンテナ・画像*/
		.container, .container img {
			width:100%;
			max-width: 1000px;
			margin: 0 auto;
		}	



	/*商品並び*/
		/*２並び*/
    		.blue-button {
            max-width: 350px;
            background-color: #54C7D6;
            border-radius: 10px;
            margin: 2vw auto;
            box-shadow: 8px 8px 8px rgb(0 0 0 / 25%);
            line-height: 3.5em;
            display: block;
		}
    
   .blue-button a:before {
        content: '▼';
       font-size: .7em;
       color: #54C7D6;
       background-color: #fff;
       border-radius: 100px;
       padding: .3vw .3vw 0;
       margin-right: .5vw;
       vertical-align: top;
    }
    
		.blue-button a {
			display: block;
			width: 100%;
			padding: 2vh 0;
			font-size: 2.5em;
			color:#fff;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		}
		.blue-button a:visited {
			color:#fff;
		}
           .blue-button:hover {
        opacity: .7;
    }
    
    .price {
        font-size: 2.5em;
        padding-bottom: .2vw;
        display: block;
        margin: 0 auto;
      text-align: center;
    text-decoration: underline;
    text-underline-offset: 20%;
    }
.container  .price-grp {
        width:90%;
        display: block;
        margin: 0 auto 5%;
		}
    .price-grp .set {
        font-size: 1.5em;
        margin: 0 auto;
        text-align: center;
    }
    
    	/*キャプションつき画像*/
	.container .caption, .container .caption2 {
		margin: 0 auto;
		font-size: 2em;
        line-height: 1.3em;
		padding: .8vw 0;
        vertical-align: top;
	}
     .midashi1 .caption {
         position: absolute;
         color: #fff;
         text-shadow:  0 0 1em #999, 0 0 0.2em #999;
         display: block;
         width: 100%;
         text-align: center;
        top: 10%;
        }
    .container .caption span {
        font-weight: bold;
        width: 85%;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

        .container .caption h3 {
        text-align: left;
            font-size: .9em;
            margin: 0;
            line-height: 1.15em;
    }
    

	.set50 {
		width: 49%;
		display: inline-block;
        text-align: left;
        vertical-align: middle;
        margin: 0;
	}
    
    .set30 {
		width: 29%;
		display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 2.5vw 0;
	}
    .set70 {
		width: 69%;
		display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 2.5vw 0;
	}

     .container .caption100 {
        width:100%;
         text-align: center;
         font-size: 1em;
         margin-bottom: 5%;
    }

	
	/*サブ見出し*/
        .container .category:before, .container .category2:before {
           content: '';
            width: 90px;
            height: 90px ;
            margin: 0 -50px 0 0;
            background-color: #BAC7B5;
            border-radius: 10px;
           display: inline-block;
            vertical-align: middle;
        }

   .container .category2:before {
            background-color: #EDB8A4;
        }

       .container .category, .container .category2 {
           font-size: 3em;
           margin: 5% auto 0;
           width: 90%;
        }
    
	.subcategory img {
		margin: 0 auto;
	}		
  .subcategory .caption2 .size, .subcategory .caption2 .table {
               padding: 5% 2%;
       margin: 5% auto;
       background-color: #EFF4F6;
       border-radius: 20px;
    }
      .subcategory .caption2 .cap-about {
          padding-bottom: 5%;
margin-bottom: 5%;
          border-bottom: 1px dashed #4D4D4D;
    }
    .subcategory .caption2 {
        width: 90%;
            margin: 0 auto;
    }

    .subtitle {
        background-color: #008BB0;
        padding: 3vw;
        border-radius:  10px;
        color: #fff;
        font-size: 2.5em;
        font-weight: normal;
        display: inline-block;
    }
    
  
	
/*見出しセクションGRP*/
	 .container .midashi1 {
		max-width: 900px;
         height: 500px;
		margin: 0 auto;
        position: relative;
        background: url("https://peaceup.itembox.design/item/common/img/bedding-info01.jpg") no-repeat;
        background-size: 100%;
	}
      .container .midashi1  h1:before {
          content: '防災用';
          font-size: .8em;
          width: 150px;
          display: inline-block;
          text-align: right;
         line-height: 1em;
        }
      .container .midashi1  h1 {
        position: absolute;
        width: 100%;
        top: 10%;
          text-align: center;
          color: #fff;
         text-shadow:  0 0 1em #999, 0 0 0.2em #999;
          font-size: 4em;
          z-index: 2;
          margin: 8% auto 0;
    }
        
       .container .midashi1  h1 span {
          font-size: 1.8em;
         line-height: 1em;
          position: relative;
           top: 20%;
           z-index: -1;
    }

    
    
	 .container .midashi2 {
		margin: 60px 0;
	}
    .container .midashi2  h2 {
		margin: 5% auto 0;        
        line-height: 1.8em;
        text-align: center;
        font-size: 3em;
	}

   .container .midashi2 .caption {
        padding: 5% 2%;
       margin: 0 auto;
       background: 15% / contain repeat-y url("https://peaceup.itembox.design/item/common/img/bedding-linebk.png") #EFF4F6;
       border-radius: 20px;
       width: 90%;
    }
	 .container .midashi2 p {
		max-width: 900px;
		margin: 0 auto;
	}
	 .container .midashi3 {
		margin: 0 auto 10%;
        	}
   .container .midashi2 .midashi3:not( :last-child) {
        border-bottom: 4px dotted #ddd;
	}
    

    
/*hr*/	
	.Line {
            border: 1px solid #ebebeb;
            
	}	
	
	.to-index {
		margin: 0 auto;
		width: 35%;
	}
    

	
/*PC*/
	@media screen and (min-width:710px) {
				
    .set70 {
		width: 67%;
		display: inline-block;
        vertical-align: top;
        padding-top: 2vw;
	}
        
        .sp {
            display: none;
        }
        .price-grp {
            font-size: .8em;
        }
        
	}
    
/*tab*/
	@media screen and (max-width:711px) and (min-width:540px) {
        .price {
            font-size:  1.5em;
        }
        .set50 {
            width:49%;
        }
        .blue-button {
            max-width: 300px;
        }
         .blue-button a {
            font-size:1.5em;
             padding: 1% 0;
        }
        .blue-button a:before {
           font-size: .7em;
           border-radius: 100px;
           padding: .3vw .3vw 0;
        }
            .set70 {
		width: 66%;
    }

  
  .container .midashi1 {
      height: auto;
      min-height: 300px;
	}        
        
        .container .midashi1 .caption {
                font-size:4.8vw;
        }
        .container .midashi1 h1 {
            font-size: 9vw;
            left: -2vw;
        }
        .container .midashi2 h2{
            font-size: 7vw;
        }     
        .container .midashi2 .caption,  .container .midashi2 .caption2 {
            font-size: 4vw;
        }
        
        
  }
    
/*SP*/
	@media screen and (max-width:539px) {
        
            .container .midashi1 .caption {
                font-size:4.8vw;
                top:10vw;
            }    
              .container .caption h4 {
                font-size:1.5em;
            }    

        .set50 {
            width: 100%;
            display: inline-block;
        }   
        
      .container .caption100  {
                margin-bottom: 10vh;
        }


    .container .caption2 {
        margin: 2vw auto ;
		font-size: 1.5em;
        line-height: 1.3em;
		padding: 0;
        color: #4C4C4C;
        vertical-align: top;
    }
    
        .subcategory {
        margin: 0 auto;     
        }
        .subcategory .caption2 .cap-about {
            font-size: 6vw;
        }
        
       .price {
           font-size: 1.5em;
           margin: 0;
           padding: 0;
          display:block;
           text-align: center;
       border-bottom:0;
        }
        .price-grp {
        margin: 0 auto 5vw;
        padding:1vw;
		}

   .blue-button {
            border-radius: 10px;
            margin: 5vw auto 15vw;
            box-shadow: 0px 8px 8px rgb(0 0 0 / 25%);
       width: 100;
            display: block;
         }
       .blue-button a:before {
           font-size: .8em;
           border-radius: 100px;
           padding: .3vw .3vw 0;
        }
        .blue-button a {
            font-size:1.5em;
        }
.container .midashi1 {
        height: 51vw;
	}

.container .midashi1  h1 span {
          font-size: 15vw;
         line-height: 15vw;
    }       
.container .midashi1  h1 {
            width: 100%;
            top:15vw;
            margin: 1.5vw auto;
            text-align: center;
          font-size: 8vw;
        }
.container .midashi1 h1:before {
    width: 15vw;
        }
        
.container .midashi2 h2 {
    margin: 5% auto;
    line-height: 10vw;
    text-align: center;
    font-size: 10vw;
}
    .container .midashi2 .caption {
        background-size: 30%;
        font-size: 6vw;
    }
        .container .midashi2 {
        margin-top: 0;
        }
       .container .midashi2 .size {
            font-size: 6vw;    
        }

    
        .container .category:before, .container .category2:before {
            width: 20vw;
            height: 20vw;
            margin-right: -18vw;
        }

        .container .category, .container .category2 {
            margin-bottom: 4vw;
            text-align: center;
              font-size: 7.5vw;
        }
        .sp {
            display: block;
        }
        
}
    
	footer {
		margin-bottom: 80px;
	}
    
    .container .blue-button:hover {
        opacity: .5;
    }
    
.container {
    color: #4D4D4D;
        font-family: 'HG丸ｺﾞｼｯｸM-PRO','HGMaruGothicMPRO','ヒラギノ丸ゴ Pro W4','ヒラギノ丸ゴ Pro','ヒラギノ丸ゴ Pro',sans-serif;
            width: 100%;
        max-width: 860px;
        margin: 0 auto;
             transition: .5s ;
}