@import url(//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap&subset=japanese);

body {
  font-family:'Roboto','Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',sans-serif;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2, h3 {
  font-family: 'Noto Sans JP';
}

@media screen and (min-width: 837px) {
ul.buy_drop-down-items4 li:nth-child(4),ul.buy_drop-down-items4 li:nth-child(8) { border-right:1px solid black;}
}

/* -----------------------------------
	main
----------------------------------- */

.wrap {
    padding-top: 0;
}

.main {
  color: #84919E;
}

.inner {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* -----------------------------------
	section-01
----------------------------------- */

#section-01 {
  background: url(../../img/product/hdg1000/hdg1000_01_obje.png) no-repeat right top;
  background-size: 38% auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#section-01 .logo-top {
  width: 70%;
  max-width: 422px;
  margin-bottom: 4em;
  padding-top: 2em;
}

#section-01 h1,
#section-01 figure {
  width: 100%;
}

#section-01 .logo-top img,
#section-01 h1 img,
#section-01 figure img {
  display:inline-block;
  width: 100%;
  height:auto;
}

@media screen and (max-width:768px){
#section-01 .logo-top { width: 75%; margin: 0 0 3em 1em;}
}

/* -----------------------------------
	section-02
----------------------------------- */

#section-02 {
  width: 100%;
  background: #D0E6EC;
  margin: 3em auto;
  padding: 3em 0;
  text-align:center;
}

#section-02 .logo-hibino {
  max-width: 79px;
  position: absolute;
  top: 0;
  left:0;
}

#section-02 .logo-hibino img {
  width: 100%;
  height: auto;
}

#section-02 h2 {
  font-size: 2rem;
  letter-spacing: .05em;
  font-weight: 500;
  margin: 0 auto 1em auto;
  text-align:center;
}

#section-02 p {
  font-size: 1rem;
  margin: 0 auto;
  text-align:center;
}

#section-02 p.section-02-sub {
  font-size: 1.3rem;
}

@media screen and (max-width:768px){
#section-02 { margin: 2em auto; padding: 3em 0;}
#section-02 .logo-hibino { width:100%; position: static; margin: 0 auto 2em auto; text-align:center;}
#section-02 .logo-hibino img { width:90px; height:auto; display: inline-block; }
#section-02 h2 { font-size: 6.2vw;}
#section-02 p.section-08-sub { font-size: 4.2vw;}
#section-02 p.section-02-sub { font-size: 1.1rem;}
}

/* -----------------------------------
	section-03
----------------------------------- */

#section-03 {
  width: 88%;
  margin: 3em auto;
  padding: 3.5em 0 1em 0;
  text-align:center;
}

#section-03 h1 {
  width: 90%;
  margin: 0 auto 100px auto;
  text-align:center;
}

#section-03 figure {
  width: 90%;
  margin: 0 auto 40px auto;
  text-align:center;
}

#section-03 h1 img {
  display:inline-block;
  width: 100%;
  max-width: 255px;
  height:auto;
}

#section-03 figure img {
  display:inline-block;
  width: 100%;
  max-width: 340px;
  height:auto;
}

@media screen and (max-width:559px){
#section-03 { width: 90%; margin: 3em auto;}
#section-03 h1 { width: 100%; margin: 0 auto 4em auto;}
#section-03 h1 img { width: 65%;}
#section-03 figure { width: 70%; margin: 0 auto;}
}

/* -----------------------------------
	section-04
----------------------------------- */

#section-04 {
  width: 100%;
  margin: 80px auto;
  text-align:center;
}

#section-04 figure {
  width: 100%;
}

#section-04 figure img {
  display:inline-block;
  width: 100%;
  height:auto;
}

@media screen and (max-width:559px){
#section-04 { margin:0 auto 40px auto;}
#section-04 figure { width: 100%; margin: 60px auto 0 auto;}
}

/* -----------------------------------
	section-05
----------------------------------- */

#section-05{
  width: 90%;
  max-width:1291px;
  margin: 0 auto 20px auto;
  text-align:center;
}

.section-05-title{
  width: 100%;
  margin-bottom:40px;
}

.section-05-title h2{
  position:relative;
  width: 100%;
  font-size:1.3rem;
  font-weight: 400;
  line-height: 2;
  margin: 0 auto 3em auto;
  text-align:center;
  z-index:2;
}

.section-05-title figure {
  position:relative;
  width: 100%;
  margin: 0 auto;
  text-align:center;
  z-index:1;
}

.section-05-title figure img{
  display:inline-block;
  width:100%;
  max-width:656px;
  height:auto;
}

.section-05-test {
  width: 100%;
  max-width: 603px;
  margin:0 auto;
  text-align:center;
}

ul.section-05-test-img {
  width: 100%;
  max-width: 603px;
  margin:0 auto;
  text-align:center;
}

ul.section-05-test-img li {
  display:inline-block;
}

ul.section-05-test-img li:nth-child(1) { max-width: 295px;}
ul.section-05-test-img li:nth-child(2) { max-width: 263px;margin-left:40px;}

ul.section-05-test-img li img {
  width: 100%;
  height:auto;
}

ul.section-05-test-cution li {
  font-size:12px;
  margin-bottom:2px;
  padding-left:1em;
  text-indent:-1em;
}

hr{
  clear:both;
  border:none;
  border-top:solid 1px #84919E;
  height:1px;
  color:#FFFFFF;
  margin:70px auto;
}

.item-list {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin:0 auto;
  text-align:center;
}
.item {
  width: 47.8%;
  max-width: 430px;
  box-sizing: border-box;
  margin-bottom:50px;
}
.item h3 {
  font-size:20px;
  font-weight:500;
  margin-bottom:16px;
}
.item p {
  font-size:16px;
  line-height:1.6;
  text-align:left;
}
.item-image {
  position: relative;
  margin-bottom: 1.5em;
}
.item-image img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.gradeup {
  position: absolute;
  right: -20px;
  bottom: -47px;
  width: 26% !important;
  max-width: 99px;
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width:559px){
#section-05{margin: 0 auto 30px auto;}
.section-05-title {margin-bottom: 30px;}
.section-05-title h2{ font-size:18px;}
.section-05-title p{font-size:12px; margin: 0 auto 30px auto;}
.section-05-title p img{ width: 80%;}
.section-05-title figure { width: 88%; margin-bottom:30px;}
ul.section-05-test-img { width: 80%; text-align:left;}
ul.section-05-test-img li { display:block;}
ul.section-05-test-img li:last-child { margin:30px 0 15px 0;}
ul.section-05-test-img li:nth-child(2) { margin-left:0;}
.item-list { width:92%;margin: 0 auto;flex-direction: column;}
.item { width: 100%; margin-bottom:30px;}
.item h3 { font-size:18px;line-height:1.4;}
.item p { font-size:14px;}
}

/* -----------------------------------
	section-06
----------------------------------- */

#section-06 {
  width: 100%;
  margin: 3em auto 5em auto;
  text-align:center;
}

#section-06 h2 {
  font-size: 2rem;
  letter-spacing: .05em;
  font-weight: 500;
  margin: 0 auto 1em auto;
  text-align:center;
}

#section-06 h2 span.underepen {
  background: linear-gradient(transparent 50%, #F2E190 0%);
  line-height: 1.3em;
}

#section-06 p {
  font-size: 1.3rem;
  margin: 0 auto;
  text-align:center;
}

#section-06 p.section-06-cution {
  font-size: 0.8rem;
  text-indent: -1em;
  margin-top:1.5em;
  padding-left: 1em;
}

#section-06 .test {
  margin-bottom: 5em;
}

#section-06 .test figure {
  width: 80%;
  max-width: 232px;
  margin:0 auto 2.5em auto;
  text-align:center;
}

#section-06 .texture {
  width: 90%;
  max-width: 730px;
  margin:0 auto;
  text-align:center;
}

#section-06 .mt2em {
  margin-top: 2em;
}

#section-06 img {
  display:inline-block;
  width: 100%;
  height:auto;
}

@media screen and (max-width:768px){
#section-06 { margin: 0 auto 2em auto; padding: 0 0 3em 0;}
#section-06 h2 { font-size: 4.8vw;}
#section-06 p { font-size: 1rem;}
#section-06 p.section-06-cution { font-size: 3.5vw;}
#section-06 .test figure { width: 58%;}
#section-06 .texture picture { width: 80%;
  max-width: 730px;
  margin:0 auto 2.5em auto;
  text-align:center;
}
}

/* -----------------------------------
	section-07
----------------------------------- */

#section-07 {
  width: 100%;
  background: #D0E6EC;
  margin: 3em auto;
  padding: 6em 0;
  text-align:center;
}

#section-07 h2 {
  position: relative;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1em;
}

#section-07 h2.size {
  margin: 0 auto 2em auto;
  text-align:center;
}

#section-07 figure.size-photo {
  margin: 0 auto 4em auto;
  text-align:center;
}

#section-07 figure.size-photo {
  width: 90%;
  max-width: 450px;
}

#section-07 figure.size-photo img {
  width: 100%;
  height: auto;
}

#section-07 .inner-w {
  background: #FFF;
  border-radius: 10px;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2em;
  box-sizing: border-box;
}

#section-07 ul.howto {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:0 auto;
  padding-left: 0;
  gap: 60px;
}

ul.howto li {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}

ul.howto li:nth-of-type(1) {
  width: 25%;
}
ul.howto li:nth-of-type(2) {
  width: 37%;
}
ul.howto li:nth-of-type(3) {
  width: 25%;
}

ul.howto li dl {
  position: relative;
}

ul.howto li:not(:first-child) dl::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  border-top: 2px solid #84919E;
  border-right: 2px solid #84919E;
  position: absolute;
  top: calc(50% - 20px);
  left: -70px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.howto li dl dt {
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 1.5em;
  text-align: center;
}

ul.howto li dl dd {
  font-size: 1.3rem;
  font-weight:500;
  margin: 0 auto 1em auto;
  text-align: center;
}

ul.howto li figure img {
  width: auto;
  max-height: 298px;
}

#section-07 .section-07-cution {
  width: 100%;
  background-image : linear-gradient(to right, #84919E 4px, transparent 4px);
  background-size: 12px 4px;
  background-repeat: repeat-x;
  background-position: left top;
  margin-top: 3em;
}

#section-07 .section-07-cution h3 {
  font-weight: 500;
  margin-bottom: 0.8em;
  padding-top: 3em;
}

@media screen and (max-width:1020px){
.howto  { gap: 20px;}
.howto > li { max-width: unset; display: block;}
.howto > li:not(:first-child) dl::before { display: none;}
ul.howto li h3 { font-size: 2.2vw; margin: 0 auto 1.8em auto;}
}

@media screen and (max-width:768px){
#section-07 { margin: 3em auto;}
#section-07 .inner-w { padding-bottom: 0;}
#section-07 h2 { margin-bottom: 1em;}
#section-07 .section-07-cution { width: 90%;}
#section-07 ul.howto { width: 100%; display: flex; flex-direction: column; gap: 50px;}
ul.howto li:nth-of-type(1) { width: 100%;}
ul.howto li:nth-of-type(2) { width: 100%;}
ul.howto li:nth-of-type(3) { width: 100%;}
ul.howto li:not(:first-child) dl::before { display: none;}
ul.howto li:not(:last-child) dl::after { content: "";
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  border-top: 2px solid #84919E;
  border-right: 2px solid #84919E;
  position: absolute;
  bottom: -30px;
  right: 0;
  left: 0;
  margin: 0 auto;
  transform: rotate(135deg);}
ul.howto li dl dt { -ms-flex-preferred-size: 20%; flex-basis: 100%;}
ul.howto li figure { margin: 0 auto; text-align:center;}
ul.howto li { width: 100%; margin-bottom:2em;}
ul.howto li h3 { font-size: 1.15rem; margin: 0 auto 1em auto;}
ul.howto li p { font-size: 0.9rem;}
}

/* -----------------------------------
	section-08
----------------------------------- */

.spec {
  width: 90%;
  max-width: 1000px;
  margin: 3em auto 0 auto;
}

.spec figure {
  max-width: 860px;
  margin: 70px auto 45px auto;
  text-align:center;
}

.spec figure img {
  width: 100%;
  height:auto;
}

ul.spec-sub{
  width:100%;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  margin-bottom:20px;
}

ul.spec-sub img{
  max-width:100%;
  height:auto;
}

.spec-sub li:first-child{ margin-right: 4%;}
.spec-sub li:last-child{ margin-left: auto;}

dl.dl-spec dt {
  width: 10em;
}

dl.dl-spec dd {
  width: calc(100% - 10em);
}

dl.dl-spec {
  border-bottom: 1px solid #84919E;
}

dl.dl-spec dt,
dl.dl-spec dd {
  border-top: 1px solid #84919E;
}

dl.dl-spec dd:after{
  display: block;
  content: "";
  clear: both;
  text-align: justify;
  text-justify: inter-ideograph; /* IEで必要 */
  text-justify: inter-character; /* Firefoxで必要 */
}

dl.spec table.jan{
  border-collapse:collapse;
  border-spacing:0;
  empty-cells:show;
}

.jan th{
  font-weight:normal;
  width:7.5em;
}

.jan td::before{
  content: ":";
  padding-right:5px;
}

@media screen and (max-width:559px){
.spec figure {width: 90%; max-width:750px; margin: 40px auto;}
.spec-sub{flex-direction: column;-webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center;}
.spec-sub li { margin: 0 auto;text-align:center;}
.spec-sub li:first-child {margin-right: auto;}
.spec-sub img{display:inline-block;padding-top:20px;}
}