html,body {width: 100%;}
body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;font-size: 16px;line-height:2;color: #000;margin: 0;-webkit-text-size-adjust: none; }
.content01{
  position: relative;
  width: 100%;
  background: #000 url(images/vi.jpg) no-repeat; 
  background-size: cover; 
}
.content01::after{
  position: absolute;
  content: '';
  left:0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background-color: #e7d6cf;  

  transform: skewY(-2deg);
  transform-origin: bottom left;

}

#head { display: block; width: 95%; margin: auto; padding: 1em 0;}
#head h1 { margin: 0; padding: 0; line-height: 1;}
#head h1 img { max-width: 300px; width: 100%;}
.content01 h2 { display:block; width: 100%; height: 40vw;  font-size: 2.4vw; text-align: center; line-height: 1.4; color: #fff; padding-top: 15%; margin: 0;}
.content02 {
	position: relative;
  width: 100%;
  background-color: #e7d6cf;
  background: url(images/pr01.png) no-repeat left;
   background-size: contain;
}
#cp-inn { display: flex; justify-content: flex-end; width: 90%; margin: auto;  padding: 4em 0 8em 0; font-size: 1.3vw;}
#cp-inn section { width: 60%;}
.content02::after{
  position: absolute;
  content: '';
  left:0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  transform: skewY(-2deg);
transform-origin: bottom left;
  background: #efe3d9 url(images/pr02.png) no-repeat ;
 background-position: right;
   background-size: contain;
}

.content03 {
  width: 100%;
  bottom: -100%;
  background-color: #efe3d9;  
  padding-bottom: 5em;
}

#solution { font-size: 18px; font-weight: bold; display: block; width: 90%; margin: auto; padding: 4em 0; position: relative; z-index: 9999;}
#solution h3 { font-family: "Merriweather", serif; font-size: 60px; line-height: 1.3; font-weight: normal; margin: 0 ; padding: 0;}
#solution h3 span { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: bold; font-size: 18px; padding-left: 1em;}
#solution h4 { font-size: 22px;  margin-bottom: .2em;}
#solution h5 { font-size: 20px; margin-bottom: .5em;}
#solution dl {margin-left: 1.5em;}
#solution dt { line-height: 1.4; font-weight: bold; width: 10em; text-align: center; background: #c18e75; color: #fff; padding: .3em 0; margin-bottom: 1em;}
#solution dd { margin: -3em 0 .8em 0; padding-left: 11em; font-weight: bold;}
.solm {margin-left: 1.5em;}
#ad {background: #fff; display: block;}
#ad-in  {display: flex; width: 90%; margin: auto; padding: 5em 0;}
#ad-in section {flex: 1; margin: 2%;}
#ad h3 { font-family: "Merriweather", serif; font-size: 40px; line-height: 1.3; font-weight: normal; margin: 0 ; padding: 0;}
#ad h3 span { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: bold; font-size: 18px; padding-left: 1em;}
#ad dl {font-size: 18px; font-weight: bold; margin-top: 2em;}
#ad dd { margin: -2em 0 0 0; padding-left: 4em;}
#fooder { display: block; background: #d3afa4;}
#fooder-inner { font-size: 18px; font-weight: bold; width: 90%; display: block; text-align: center; margin: auto; padding: 3em 0;}
@media only screen and (max-width: 900px) {
  #cp-inn { font-size: 16px;}
}
@media only screen and (max-width: 820px) {
  
  #head h1 img { width: 230px;}

.content01::after{
  bottom: 0;
  width: 100%;
  height: auto;
  transform: skewY(0deg); 
  }
  .content02::after{
   transform: skewY(0deg); 
  }
  .content02 { display: block; background:#e7d6cf;}
  .content02::after{ background: none;}
  .content03 {
    width: 100%;
    bottom: 0%;
  background: #efe3d9 url(images/pr02.png) no-repeat ;
   background-position: right top;
     background-size: 50%;
  }
  .content01 h2 { font-size: 14px; padding-top: 8%; }
  .content03 {
    padding-bottom: 1em;
  }
  #cp-inn { font-size: 14px; line-height: 1.8; padding: 1em 0 2em 0;}
  #cp-inn section { width: 100%;}
  #solution { font-size: 14px;}
  #solution h3 { font-size: 40px;}
  #solution h3 span { padding: 0; display: block;}
  #solution h4 { font-size: 18px;}
  #solution h5 { font-size: 16px;}
  #solution dl {margin-left: 0em;}
  #solution dt { width: 8em; }
  #solution dd { padding-left: 9em;}
  .solm {margin-left: 0em;}
  #ad-in  {display: block;  padding: 2em 0;}
  #ad-in section {margin: 0 0 2% 0;}
  #ad h3{ font-size: 40px;}
  #ad h3 span { padding: 0; display: block;}
  #ad dl {font-size: 16px; font-weight: bold; margin-top: 2em;}
  #ad dd { margin: -2em 0 0 0; padding-left: 4em;}
}