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

.container img {
    font-size: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}
/*ここまでリセットCSS*/
	
/*ここからデザインCSS*/
	
	/*コンテナ・画像*/
		.container, .container img {
			width:100%;
			max-width: 1000px;
			margin: 0 auto;
		}	



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

        .container .caption h3 {
        text-align: left;
            font-size: .9em;
            margin: 0;
            line-height: 1.15em;
    }
    
    .container .caption2 {
		font-size: 2em;
        line-height: 1.3em;
		padding-bottom: .8vw;
        color: #141414;
        vertical-align: top;
    }

	.set50 {
		width: 49%;
		display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 2.5vw 0;
        padding: 0 .56vw;
	}
    .set50 img {
        width: 50%;
    }
    
    .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;
    }

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

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

       .container .category, .container .category2 {
           font-size: 2.5em;
           margin: 3vw;
        }
    
	.subcategory img {
		margin: 0 auto;
	}		

    .subtitle {
        background-color: #008BB0;
        padding: 3vw;
        border-radius:  10px;
        color: #fff;
        font-size: 2.5em;
        font-weight: normal;
        display: inline-block;
    }
    
    .table {
        width: 80%;
        border-radius: 30px;
        border-collapse: separate;
       background-color: #FCF6F5;
        padding: 3vw 0;
        margin: 2vw auto;
    }
   .table th {
        width: 100%;
        font-weight: bold;
        text-align: left;
        background-color: #FCF6F5;
    }
    
    .table tr:nth-child(odd) {
        background-color: #fff;
    }
    .table tr td:first-child {
                 padding-left: 1.5vw;
    }
    .table tr td {
         padding-top: .5vw;
        font-size: .8em;
    }
    
     .table .w85 {
        width: 90%;
    }
    .table .w15 {
        width: 10%;
    }
	
/*見出しセクションGRP*/
	 .container .midashi1 {
		max-width: 900px;
		margin: 0 auto;
        position: relative;
        background: url("https://peaceup.itembox.design/item/common/img/office-info01.jpg") no-repeat;
        background-size: 100%;
        height: 42vw;
	}
      .container .midashi1  h1 {
        position: absolute;
        z-index: 100;
        top: 2vw;
        right: 3vw;
      width: 250px;
      height: 250px;
      background-color: #fff;
      border-radius: 10%;
      display: inline-block;
          text-align: center;
        
    }
       .container .midashi1  h1 span {
          font-size: 1.8em;
         line-height: 1.8em;
          position: relative;
           top: 20%;
         letter-spacing: .164em;
    }
        .example {
        margin: 0;
        bottom: 13vw;
        position: absolute;
    }
    
    .example .bamen {
        background-color: #fff;
        border-radius: 100px;
        width: 150px;
    height:150px; 
        margin: 1.5vw 1.25vw;
        display: inline-block;
        position: relative;
        line-height: 3em;
        left: 2vw;
    }
    .example .bamen p {
         color: #141414;
        width: 98%;
        font-weight: bold;
        font-size:1.5em;
        position: absolute;
        top: 35%;
        text-align: center;
        margin: 0 auto;
    }
    
    
	 .container .midashi2 {
		margin: 60px 0;
	}
     .container .midashi2:after {
		content: '';
            display: block;
            width: 100%;
            height: 5vw;
        background:  url("https://peaceup.itembox.design/item/common/img/line-colorful.png") 0 50% repeat-x;
        background-size: cover;
	}
    .container .midashi2  h2 {
      width: 200px;
      height: 200px;
      background-color: #D9CBC9;
      border-radius: 10%;
    border: 2px solid #fff;
        box-shadow: 2vw 2vw 0 #D9CBC9, -2vw -2vw 0 #D9CBC9, 2vw -2vw 0 #D9CBC9,-2vw 2vw 0 #D9CBC9;
		margin: 10vw auto 5vw;        
        font-size: 2em;
        line-height: 1.8em;
        text-align: center;
	}
    .container .midashi2:not(:last-child)  h2 span {
         position: relative;
           top: 20%;
    }
    
      .container .midashi2:last-child  h2 span {
         position: relative;
           top: 8%;
    }
    .container .midashi2 .a4about {
        margin-bottom: 8vw;
    }

	 .container .midashi2 p {
		max-width: 900px;
		margin: 0 auto;
	}
	 .container .midashi3 {
		margin: 40px 0;
        padding: 2vw 0 6vw;
        	}
   .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;
        }

        
	}
    
/*tab*/
	@media screen and (max-width:1187px) and (min-width:710px) {
        .price {
            font-size:  1.8em;
        }
        .set50 {
            width:49%;
        }
         .green-button a {
            font-size:2em;
        }
        .green-button a:before {
           font-size: .7em;
           border-radius: 100px;
           padding: .3vw .3vw 0;
        }
            .set70 {
		width: 66%;
    }
        .example {
         margin: 0 auto;
        top: .5vw;
        position: absolute;
    }
        
.example .bamen {
        width: 20vw;
        height:20vw;
        margin: .3vw;
        top: 35vw;
        left: 3vw;
    }
    .example .bamen p {
        width: 98%;
        font-weight: bold;
        font-size:3vw;
        line-height: 7vw;
        }
  container .midashi1 {
        height: 82vw;
	}      
        
  }
    
/*SP*/
	@media screen and (max-width:709px) {
        
            .container .caption {
                font-size:1.5em;
            }    
              .container .caption h4 {
                font-size:1.5em;
            }    

        .set50 {
            width: 100%;
            display: inline-block;
        }   
     .table {
        width: 100%;
         border-radius: 10px;
         padding: 8vw 0;
    }
   .table .w85 {
        width: 85%;
    }
    .table .w15 {
        width: 15%;
    }

    .container .caption2 {
        margin: 2vw auto ;
		font-size: 1.5em;
        line-height: 1.3em;
		padding: 0;
        color: #4C4C4C;
        vertical-align: top;
    }
    
        .subcategory {
        margin: 0 auto;     
        }
       .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;
		}

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

.container .midashi1  h1 span {
          font-size: 8vw;
         line-height: 8vw;
    }       
.container .midashi1  h1 {
            width: 80vw;
            height: 15vw;
            border-radius: 10px;
           left: 3vw;
            display: block;
            margin: 1.5vw auto;
            text-align: center;
    
        }

        .example {
         margin: 0 auto;
        top: .5vw;
        position: absolute;
    }
        
.example .bamen {
     width: 29vw;
    height: 29vw;
    margin: .2vw;
        top: 25vw;
    left: 3vw;
    background-color: rgba(255,255,255,0.7)
    }
    .example .bamen p {
        width: 98%;
        font-weight: bold;
        font-size:5vw;
        line-height: 7vw;
        top: 11vw;
        }

        
.benri {
			padding: 2% 0;
   }
        
  .benri li.contents h2 {
        font-size: 9vw;
           display: inline-block;
          margin-top: -1vw;
            width: 80%;
            position: relative;
            left: 15%;
    }
  .benri li.contents h2:before {
       display: none;
        }
   .benri li.contents:before {
		    content: '！';
			color: #F64713;
			font-weight: bold;
			text-align: center;
			padding:1vw;
            margin-bottom: 5vw;
			top: 0;
            margin-right: 2vw;
			border:4px solid #F64713;
			border-radius: 10%;
           display: inline-block;
            position: absolute;
      	}
    
        .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: 8vw;
        }
        .sp {
            display: block;
        }

        
        
  .youtube-frame .youtube-width {
            height: 54vw; 
        }
        
}
    
	footer {
		margin-bottom: 80px;
	}
body {
font-family: sans-serif;
}