/*------------------------------------------------------*/
/* 0.全体 */
/*------------------------------------------------------*/
body {-webkit-print-color-adjust: exact;}
.crisis-water{
  max-width: 1000px;
  margin: 30px auto 0;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/*各項目の見出し共通*/
h3{
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 25px;
  color: white;
  width: 8em;
  background-color: steelblue;
  margin: 1.5em 0 .5em;
  padding: 0.1em .75em 0.15em;
  border-radius: 20px;
}

/*------------------------------------------------------*/
/* 1.タイトル */
/*------------------------------------------------------*/
.page-title{
  display: grid;
  grid-template-rows:auto auto;
  grid-template-columns:auto;
	border-bottom: 2px solid lightgray;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  margin-bottom: 1.5em;
}

.page-title > p{
	text-align: left;
	margin-bottom: 0;
	font-size: 1.5em;
}
.page-title > h2{
  text-align: center;
  font-size: 2.75em;
  margin: 5px 5px 10px 5px;
}

/*------------------------------------------------------*/
/* 2.概要 */
/*------------------------------------------------------*/
.summary{}

.summary > .point{
  display: grid;
  grid-template-rows:auto auto auto;
  grid-template-columns:3fr 2fr 1fr 1fr 2fr;
}

.summary > .point > img{
  grid-area:1/1/4/2;
  height: 300px;
  margin: 0 auto 0;
}
.summary > .point > p{
  grid-area:1/2/2/6;
  margin: 0;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  color:steelblue;
}
.summary > .point > .cloud{
  grid-area:2/2/2/3;
  background-color: #86A8E8;
}
.summary > .point > .cost{
  grid-area:2/3/3/5;
  background-color: #FFD158;
}
.summary > .point > .cold{
  grid-area:2/5/3/6;
  background-color: #4ABDFF;
}
.summary > .point > .space{
  grid-area:3/2/4/4;
  background-color: #5ECF76;
}
.summary > .point > .mente{
  grid-area:3/4/4/6;
  background-color: #FF6767;
}

.summary > .point > div{
  display: grid;
  grid-template-rows:auto;
  grid-template-columns:60px auto;

  width: 200px;
  height: 75px;
  margin: 1em auto;
  border-radius: 20px;
}
.summary > .point > div:nth-of-type(4),
.summary > .point > div:nth-of-type(5){
  width: 300px;
}

.summary > .point > * > img{
  height: 50px;
  margin: auto auto auto 1em;
}
.summary > .point > * > p{
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin: 0;
  color: white;

  line-height:1.12em;
}

/*概要文*/
.summary > p{
  margin: 0 1em 0;
  font-size: 1.5em;
}

/*新機能*/
.summary > .new-features > ul{
  margin: 1em auto 0;
}
.summary > .new-features > ul > li{
  font-size: 1.5em;
  font-weight: bold;
  list-style: none;
}


/*------------------------------------------------------*/
/* 3.構成 */
/*------------------------------------------------------*/
.concept{}

.concept > img{
  display: block;
  width: 80%;
  margin: 0 auto 0;
}
.concept > .point{
  display: grid;
  grid-template-rows:auto;
  grid-template-columns:auto auto auto;
  margin: 0 0 1.5em;
  padding: 0 5em 0;
}
.concept > .point > h4{
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;    /* 上下中央 */

  font-size: 1.5em;
  width: 10em;
  height: 2.5em;
  color: white;
  background-color: steelblue;
  margin: 0 1em;
  border-radius: 10px;
}

.concept > p{
  margin: 0 1em 0;
  font-size: 1.25em;
}
/*------------------------------------------------------*/
/* 4.機器仕様 */
/*------------------------------------------------------*/
.spec{}
/*表の大枠*/
table.spec{
  font-size: 1.1em;
  width: 75%;
  table-layout: fixed; 
  border-collapse: collapse;
  margin: 0 0 0 2em;
}
/*表の1列目*/
table.spec td:nth-child(1) {width: 30%;}
/*表の2列目*/
table.spec td:nth-child(2) {width: 70%;}

/*表の各列*/
table.spec td {
  border: solid 1px black;
  padding: 0.25em 0.5em;
}
table.spec td:nth-child(1){
  text-align: center;
}

/*項目（奇数）*/
table tr:nth-child(odd) {
  background-color: #fff;
}
/*項目（偶数）*/
table tr:nth-child(even) {
  background-color: #dff;
}

/*表内の箇条書き*/
table.spec ul{ margin: 0; padding: 0;}
table.spec li{ list-style: none;}


/*------------------------------------------------------*/
/* 5.表示画面例 */
/*------------------------------------------------------*/
.disp{}

.disp > img{
  display: block;
  width: 80%;
  margin: 0 auto 0;
}

/********************************************************/
/* スマホ版 */
/********************************************************/
@media only screen and (min-width: 320px) and (max-width: 568px){
  /*------------------------------------------------------*/
  /* 0.全体 */
  /*------------------------------------------------------*/
  .crisis-water{
    max-width: 97%;
    margin:auto 5%;
  }
  h3{
    font-size: 1em;
    margin: 1.5em 0 .5em;
    padding: .25em .75em;
  }

  /*------------------------------------------------------*/
  /* 1.タイトル */
  /*------------------------------------------------------*/

  .page-title > p{
    margin: 1em auto 0.5em 0;
    font-size: 1em;
    justify-content: left;
  }

  .page-title > h2{
    font-size: 1.75em;
    margin: 0 auto 0;
    text-align: center;
  }
  /*------------------------------------------------------*/
  /* 2.概要 */
  /*------------------------------------------------------*/
  .summary{}
  .summary > .point{
    display: grid;
    grid-template-rows:auto auto auto auto auto auto auto;
    grid-template-columns:auto;
  } 

  .summary > .point > img{
    grid-area:2/1/3/2;
    width: 30%;
    height: auto;
  }
  .summary > .point > p{
    grid-area:1/1/2/2;
    margin: 0;
    font-size: 1.25em;
  }
  .summary > .point > .cloud{ grid-area:3/1/4/2;}
  .summary > .point > .cost{  grid-area:4/1/5/2;}
  .summary > .point > .cold{  grid-area:5/1/6/2;}
  .summary > .point > .space{  grid-area:6/1/7/2;}
  .summary > .point > .mente{  grid-area:7/1/8/2;}

  .summary > .point > div{
    display: grid;
    grid-template-rows:auto;
    grid-template-columns:auto;

    width: 80%;
    height: 1.5em;
    margin: 0 auto 0.5em;
    padding: 0.25em 0 0.25em;
    border-radius: 10px;
  }
  .summary > .point > div:nth-of-type(4),
  .summary > .point > div:nth-of-type(5){
    width: 80%;
  }

  .summary > .point > * > img{ display: none;}
  .summary > .point > * > p{
    font-size: 1em;
    line-height:1em;
  }
  .summary > .point > * > p > br{
    display: none;
  }

  /*概要文*/
  .summary > p{
    font-size: 0.75em;
    width: 100%;
    margin: 0;
  }

  /*新機能*/
  .summary > .new-features > ul{
    margin: 0.5em auto 0;
    padding: 0;
  }
.summary > .new-features > ul > li{
  font-size: 0.75em;
}


  /*------------------------------------------------------*/
  /* 3.構成 */
  /*------------------------------------------------------*/
  .concept{}
  .concept > img{
  	width: 100%;
  	margin: 0 auto;
  }

  .concept > .point{
    display: grid;
    grid-template-rows:auto auto auto;
    grid-template-columns:auto;
    width: 100%;
    margin: 0 0 0.5em;
    padding: 0;
  }

  .concept > .point > h4{
    font-size: 1em;
    width: 80%;
    height: 1.5em;
    margin: 0 auto 0.5em;
    padding: 0.25em 0 0.25em;
  }

  .concept > p{
    margin: 0;
    font-size: 0.75em;
  }



  /*------------------------------------------------------*/
  /* 4.機器仕様 */
  /*------------------------------------------------------*/
  .spec{}
  /*表の大枠*/
  table.spec{
    font-size: 0.75em;
    width: 100%;
    margin: 0;
  }

  /*------------------------------------------------------*/
  /* 5.表示画面例 */
  /*------------------------------------------------------*/
  .disp{}
  .disp > img{
  	width: 90%;
  	margin: 0 auto;
  }
}