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

body {
  background: url(../../img/product/hcb2000/hcb2000_01_obje.png) no-repeat right top;
  background-size: 42% auto;
  color: #606060;
  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';
}

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

.wrap {
    padding-top: 0;
}

.main {
  color: #606060;
}

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

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

#section-01 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#section-01 .logo-top {
  width: 70%;
  max-width: 422px;
  margin-bottom: 5em;
  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:1064px){
body { background-size: 50% auto;}
#section-01 .logo-top { width: 50%; margin: 0 0 2em 1em;}
}

@media screen and (max-width:599px){
body { background-size: 68% auto;}
#section-01 .logo-top { width: 70%; margin: 2.5em 0 2em 1em;}
}

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

#section-02 {
  width: 100%;
  background: url(../../img/product/hcb2000/section-02box_back.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 3em auto;
  text-align:center;
}

.section-02box {
  width: 90%;
  max-width: 1000px;
  display : flex;
  flex-wrap : wrap;
  justify-content:space-between;
  align-items: center;
  margin: 0 auto;
  padding: 5em 0 3.5em 0;
}

.section-02box .section-02box-left {
  width: 30%;
  max-width: 170px;
}

.section-02box .section-02box-middle {
  flex: 1;
  display : flex;
  flex-flow: column;
  justify-content:　center;
  align-items: center;
}

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

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

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

.section-02box .section-02box-right {
  width: 30%;
  max-width: 240px;
}

.section-02box .section-02box-left img,
.section-02box .section-02box-right img {
  width: 100%;
  height: auto;
}

@media screen and (max-width:768px){
#section-02 { margin: 2em auto; padding: 2em 0 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-02 { background-size: cover;}
.section-02box { flex-direction: column; padding: 4em 0 0.5em 0;}
.section-02box .section-02box-left, .section-02box .section-02box-middle, .section-02box .section-02box-right { display:block; width: 100%; margin: 0 auto 1.5em auto; text-align: center;}
.section-02box .section-02box-right { margin: 0 auto;}
#section-02 h2 { font-size: 1.6rem;}
#section-02 p.section-02-sub { font-size: 1.1rem;}
.section-02box .section-02box-left img, .section-02box .section-02box-right img { width: 70%;}
}

/* -----------------------------------
	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 80px auto;
  text-align:center;
}

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

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

#section-03 figure img {
  display:inline-block;
  width: 100%;
  max-width: 700px;
  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 40px auto;}
}

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

#section-04 {
  width: 100%;
  margin: 80px auto 60px 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-icon
----------------------------------- */

#section-icon {
  width: 100%;
  margin-bottom: 60px;
}

#section-icon .icon-cont {
    width: 100%;
	margin: 0 auto 1em auto;
}

#section-icon ul.icon-list {
    width: 94%;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: flex-end;
	margin: 0 auto;
}

#section-icon ul.icon-list li {
    margin: 0 3% 0.8em 0;
}

#section-icon ul.icon-list li:last-child {
  margin-right: 0;
}

#section-icon ul.icon-list li img {
    height: 100px;
    width: auto;
    display: block;
}

#section-icon p {
    width: 92%;
    max-width: 1048px;
	font-size: 0.9em;
    text-align: right;
    margin: 0 auto 2em auto;
}

@media screen and (max-width:1006px){
#section-icon ul.icon-list li img { height: 76px;}
}

@media screen and (max-width:864px){
#section-icon ul.icon-list li { width: 20%;}
#section-icon ul.icon-list li img { height: 80px;}
#section-icon p { text-align: center;}
}

@media screen and (max-width:559px){
#section-icon ul.icon-list li { width: 24%; margin: 0 0 0.8em 0;}
#section-icon ul.icon-list li:nth-of-type(3n) { margin-right: 0;}
#section-icon ul.icon-list li img { height: 60px;}
}

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

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

.section-05-title{
  width: 100%;
  margin: 0 auto;
  text-align:center;
}

.section-05-title p.h2-sub {
  font-size: clamp(18px, 3.8vw, 30px);
  position: relative;
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0 55px;
  text-align: center;
}

.section-05-title p.h2-sub:before, .section-05-title p.h2-sub:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.section-05-title p.h2-sub:before {
  left:0;
}
.section-05-title p.h2-sub:after {
  right: 0;
}

.section-05-title h2{
  position:relative;
  width: 100%;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 auto 2em auto;
  text-align:center;
}

.section-05-title h2 span{
  font-size: clamp(21px, 4.8vw, 34px);
}

.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 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 {
  background: #FFF1F4;
  width: 100%;
  margin: 3em auto 5em auto;
  padding:6em 0 5em;
  text-align:center;
}

#section-06 .inner {
  width: 90%;
  max-width: 1000px;
}

#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: #FFF1F4;
  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 4.5em auto;
  text-align:center;
}

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

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

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

#section-07 ul.howto {
    position: relative;
	top: 1.5em;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin-bottom: 2em;
}

ul.howto li {
    width: 33.33333%;
	max-width: 624px;
}

ul.howto li img {
    width: 100%;
    height: auto;
}

.cution-mark{
    width: 30px;
	padding: 0 6px 1px 0;
}

#section-07 .section-07-cution {
	position: relative;
    width: 90%;
    max-width: 1000px;
	border-top: 4px dotted #80858C;
    margin-top: 2em;
}

#section-07 h2.section-07_h2 {
	position: absolute;
	top: -20px;
	left: -7px;
	width:138px;
	margin-bottom: 1em;
}

#section-07 h2.section-07_h2 img {
	width: 100%;
	height: auto;
}

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

ol {
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  margin-left: 0.8em;
}

ol li {
  position:relative;
  padding: 0 0 0 26px;
  margin: 5px 0 5px 0px;
  font-size:15px;
  line-height: 25px;
  border: dashed 1px transparent;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  vertical-align: top;
}

ol li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 26px;
  height: 26px;
  text-align: center;
  color: #fff;
  line-height:26px;
  background: #606060;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width:1020px){
.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: 20px;}
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%; margin-bottom: 2em;}
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%;}
ul.howto li h3 { font-size: 1.15rem; margin: 0 auto 1em auto;}
ul.howto li { margin: 0 auto; text-align: center;}
ul.howto li img { display:inline-block; width: auto; height: 100%; max-height: 342px;}
}

/* -----------------------------------
	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{
  padding-left: 0.5em;
}

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

@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;}
}