@charset "utf-8";

@import "reset.css";


/* all
==============================================================*/
body {
}

ul {
  list-style: none;
  padding-left: 0;
}

.wrap input[type=text] {
  margin: 0 3px 3px 0;
  vertical-align: middle;
}


/* contents
==============================================================*/
.wrap {
  /*max-width: 80%;
  min-width: 900px;*/
  margin: 0 auto;
}

/* header
===================================== */
.wrap > header {
  padding: 50px 0;
  background: #3383c2;
  color: #ffffff;
}
.wrap > header a {
  color: #ffffff;
}
.wrap > header .inner {
  width: 48%;
  min-width: 625px;
  margin: 0 auto;
}
.wrap > header h1 {
  margin-bottom: 0.75em;
  font-size: 2.2rem;
  font-weight: normal;
}
.wrap > header h1 + section {
  font-size: 1rem;
  line-height: 1.75rem;
}
.wrap > header h1 + section > h2 {/* 要調整 */
  margin-bottom: 0.5em;
  font-size: 0.875rem;
  font-weight: bold;
}
.wrap > header h1 + section > p:last-child {
  margin-bottom: 0;
}

/* contents
===================================== */
.contentWrap {
  background: #4cafe8;
  padding: 50px 0 90px 0;
}
.contentWrap .contentBlock {
  width: 43%;
  min-width: 590px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30px 40px 40px 40px;
  background: #fff;
  border-radius: 20px;
}


.question-panel {
  margin-bottom: 3rem !important;
}

.question-panel .question {
  margin: 0 1.25rem 1.25em 1.25rem;
}
.question-panel .question + .question:not(.lower) {
  padding-top: 1.25rem;
  border-top: 1px solid #ddd;
}
.question-panel .question.lower {
  padding: 1rem 1.25rem;
  background: #F4F4F4;
}

.question-panel .question .q_label {
  display: block;
  margin: 0 0 1rem 0;
  font-weight: bold;
  vertical-align: top;
}
.question-panel #q_region .q_label,
.question-panel #q_n_p .q_label {
  display: inline-block;
  width: 25%;
  margin-top: 2px;
  margin-bottom: 0;
}

.question-panel .question .q_label + * {
  display: inline-block;
  vertical-align: top;
}
.question-panel .question ul {
  margin-bottom: 0;
}
.question-panel .question ul li {
  margin-bottom: 0.5rem;
}
.question-panel input[type=radio] {
  margin: 0 0.25em 0 0;
}
.question-panel .question label {
  display: inline;
}

/*#q_kitchen_watersaving_A, #q_kitchen_watersaving_C,
#q_shower_watersaving_A, #q_shower_watersaving_B,#q_washbowl_watersaving_C { 
  margin-top: -0.5em;
  padding-left: 10%;
}*/

/*#q_kitchen_watersaving_A .q_label,
#q_kitchen_watersaving_C .q_label,
#q_shower_watersaving_A .q_label,
#q_shower_watersaving_B .q_label,
#q_washbowl_watersaving_C .q_label {
  min-width: 18%;
  padding-top: 1px;
}*/


.graphWrapOuter {
  max-width: 70%;
  margin: 0 auto;
  padding: 70px 0 50px 0;
  background: #fff;
}
.graphWrap {
  max-width: 90%;
  margin: 0 auto 1rem;
}

#graph01 {}
#graph02 {
  width: 80%;
}
#graph03 {}
#graph04 {}

#graph01 canvas, #graph02 canvas, #graph03 canvas, #graph04 canvas {
  /*height: 500px;*/
}


/* footer
===================================== */
.globalFooter {
  padding: 1.5rem 0;
  background: #3383c2;
  color: #ffffff;
  font-size: 0.875rem;
}
.globalFooter a {
 color: #fff;
}
.globalFooter > .inner {
  overflow: hidden;
  max-width: 80%;
  min-width: 800px;
  margin: 0 auto;
}
.globalFooter h1 {
  margin-bottom: 0.25em;
  font-size: 0.875rem;
  font-weight: bold;
}
.globalFooter section {
  padding: 0 0 0.5em 0;
}
.globalFooter .logo {
  float: right;
  width: 15%;
  padding: 0;
  text-align: right;
}
.globalFooter .logo img {
  width: auto;
  max-width: 50%;
}
.globalFooter address,
.globalFooter p {
  margin: 0;
}
.globalFooter span {
  margin-right: 1em;
}
.globalFooter .copyright {
  text-align: center;
}

.footerLink {
 margin: 0 auto 0.25em auto;
 text-align: center;
}
.footerLink li {
 display: inline-block;
 padding: 0 0.75em 0 0.5em;
 line-height: 1.15;
}
.footerLink li:not(:last-child) {
 border-right: 1px solid #fff;
}

/* module
==============================================================*/

.sectionA01 {
  margin: 0 0 2.5rem 0;
}
.sectionB01 {
  margin: 0 auto 1rem auto;
  padding: 1rem 2rem;
  background: #efefef;
  text-align: center;
}

.headingA01 {
  margin: 0 0 1.75rem 0;
  padding: 0.25em 0.75em;
  background: #4cafe8;
  color: #fff;
  font-size: 1.25rem;
  font-weight: normal;
}


.listA01 {
  margin: 0 auto 2.5rem auto;
  text-align: center;
  vertical-align: middle;
}
.listA01 li {
  display: inline-block;
  margin: 0 1rem;
}

.listB01 {
  margin: 0 1rem 2.5rem 1rem;
}
.listB01 > li {
  margin: 0 auto 1.5rem 1.25em;
  text-indent: -1.25em;
  line-height: 1.75;
}

ol.oListA01 {
  list-style: decimal inside;
}


.buttonA01 {
  width: auto;
  min-width: 9em;
  padding: 1em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #3682BE;
  color: rgba(255,255,255, 1);
  font-size: 1.75rem;
  font-weight: normal;
  transition: all 0.3s ease;
}
.buttonA01:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
.buttonB01 {
  width: ;
  padding: 1em 2em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #778899;
  color: rgba(255,255,255, 1);
  font-size: 1.25rem;
  transition: all 0.3s ease;
}
.buttonB01:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
.buttonC01 {
  display: inline-block;
  margin: 0 1rem;
  padding: 1em 1.5em;
  outline: none;
  border: none;
  border-radius: 3px;
  background: #4682B4;
  color: rgba(255,255,255, 1);
  font-size: 1rem;
  line-height: 1.25;
  transition: all 0.3s ease;
  text-decoration: none;
}
.buttonC01:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

.note01 {
  font-size: 0.75em;
  text-align: center;
}


/* ▼タブレット縦以下設定
==============================================================*/

@media screen and (max-width: 900px){
.wrap {
  max-width: 100%;
  min-width: 320px;
  margin: 0 auto;
}
/* header
===================================== */
.wrap > header {
  padding: 30px 0;
}
.wrap > header .inner {
  width: 95%;
  min-width: 300px;
  margin: 0 auto;
}
.wrap > header h1 {
  margin-bottom: 0.6em;
  font-size: 1.75rem;
  font-weight: normal;
}
.wrap > header h1 + section {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* contents
===================================== */
.contentWrap {
  padding: 30px 0 50px 0;
}
.contentWrap .contentBlock {
  width: 90%;
  max-width: 590px;
  min-width: 248px;
  margin: 0 auto;
  padding: 20px 20px 30px 20px;
  border-radius: 20px;
}

.question-panel > h2 {
  font-size: 1.25rem;
}
.question-panel .question {
}

.question-panel #q_region .q_label,
.question-panel #q_n_p .q_label {
  width: 6em;
}
.graphWrapOuter {
  max-width: 95%;
  margin: 0 auto;
  padding: 40px 0 30px 0;
}
.graphWrap {
  max-width: 100%;
  margin: 0 auto 1.25rem;
}

#graph01 {}
#graph02 {
  width: 90%;
  max-width: 100%;
}
.graphWrapOuter > .sectionB01 {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.graphWrapOuter > .sectionB01 > .buttonC01 {
  display: block;
  margin: 0.5rem auto 0 auto;
  max-width: 220px;
}

/* footer
===================================== */

.globalFooter {
  line-height: 1.4;
}
.globalFooter > .inner {
  max-width: 95%;
  min-width: 320px;
  margin: 0 auto;
}
.globalFooter .logo {
  float: none;
  width: auto;
  padding: 6px 0;
  text-align: center;
}
.globalFooter .logo img {
  width: 50px;
  max-width: 25%;
}
.globalFooter span {
  display: inline-block;
  margin-right: 0.75em;
}
.globalFooter .copyright {
  line-height: 1.25;
}

/* module
==============================================================*/

.listB01 {
  margin-right: 0;
  margin-left: 0;
  font-size: 0.875rem;
}
.listB01 > li {
  margin: 0 auto 1.5rem 1.25em;
  text-indent: -1.25em;
  line-height: 1.5;
}


}
/* ▲タブレット縦以下設定 */

/* ▼スマホ縦設定
==============================================================*/

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

/* header
===================================== */
.wrap > header {
  padding: 20px 0;
}
.wrap > header .inner {
}
.wrap > header h1 {
  margin-bottom: 0.5em;
  font-size: 1.35rem;
  font-weight: normal;
  line-height: 1.4;
}
.wrap > header h1 + section {
  font-size: 0.9rem;
  line-height: 1.4rem;
}


}
/* ▲スマホ縦設定 */


/* parts */
.mb00 { margin-bottom: 0px !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}

.mt-10 { margin-top: -10px !important;}
.mt-20 { margin-top: -20px !important;}
.mt-30 { margin-top: -30px !important;}

.fs12 { font-size: 12px !important;}
.fs14 { font-size: 14px !important;}

.alignC { text-align: center !important;}

/*
 デフォルト設定
*/


#q_e_rtd02,
#q_jis, 
#q_pipe_diameter,
#q_kitchen_watersaving_A, 
#q_kitchen_watersaving_C, 
#q_shower_watersaving_A, 
#q_shower_watersaving_B, 
#q_washbowl_watersaving_C,
#q_pipe_diameter ul li:nth-child(3),
.graphWrapOuter
 { display: none;}