@charset "utf-8";
.line{ margin-bottom: 65px; }
.safety .title_style01{ letter-spacing: 0.08em; text-align: left; }
.imgbox{ width: 100%; margin-left:auto; margin-right:auto; display: flex; justify-content: space-between;max-width: 990px; }

.bgcolor{background:#f0f1f5;width: 100%; 
  max-width: 1500px; margin-left:auto; margin-right:auto;}
.contentwrap{ width: 100%; box-sizing: border-box; background: #fff; }
.contentwrap h3 .subtitle{ letter-spacing: 0.05em; padding-left: 5px; font-weight: 500;
   	font-family:'YakuHanJP','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 }

 #sloganwarp p,#select p,
.contentwrap p,#support p, #improvement p{ line-height: 2.2em; letter-spacing: 0.165em;}

.steptitle,#stepnav li a span,
#pointbox dt,.pointarea li::before,
#point5 dt{ font-family: "YakuHanMP","Zen Old Mincho", serif; }

#stepwrap.bgcolor{position: relative;}
#stepnav { margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap;
    max-width: 1200px; width: 100%;  position: absolute; left: 0; }

#stepnav li:not(:last-child) a::after{top: 50%;
 content: "";
position: absolute;
display: block;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%); }

#stepnav li a{ max-width: 220px; width: 100%; line-height: 1em; font-weight: 500;
  background-color: #1e2b5a; color: #fff; display: inline-block; text-align: center; position: relative; box-sizing: border-box;}
#stepnav li a span{ line-height: 1.4em; font-weight: 400;}


.steptitle,#pointbox dt{ 
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
}

.steptitle{ display: block;margin-bottom: 5px;  color: #878b9e;letter-spacing: 0.09em;}
.steptitle span{ padding-left:3px }


#pointbox ul, 
#pointbox .noticetxt{ max-width: 720px; margin-left: auto; margin-right: auto;}
#pointbox li{ font-size: 1.6rem;font-weight: 500;
   border-radius: 50%; background-color: #1e2b5a; 
   position: relative;
  text-align: center; }
  
#pointbox li p{position: absolute; 
display: inline-block; line-height: 1.4em;  color: #fff;
  left: 0;  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;}
#pointbox li p sup{ font-size: 0.6em;padding-left: 2px;line-height: 1.9em; position: absolute; }

#hygieneimg{ margin-bottom: 40px; max-width: 1060px;  display: flex; 
  justify-content: space-between; margin-left: auto; margin-right: auto;  
}



.pointarea{ counter-reset: num; }
.pointarea li{  letter-spacing: 0.05em; 
  background-color: #f4f5f9; position: relative;
display: flex;  justify-content: space-between;align-items: center; }

.pointarea li::before{ line-height: 1.45;
  font-weight: 500; letter-spacing: 0.05em; color:#7887ca;
  content: counter(num);
    counter-increment: num;
    position: absolute;
    transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%); }
.pointarea li:not(:last-child){ margin-bottom: 20px; }

.pointarea li figure{max-width: 180px; }


/*checkbox-----------------------------*/
.checkbox, .checkbox li{ border-color:#1e2b5a; border-style: solid;
border-collapse: separate;
  border-spacing:0; box-sizing: border-box; }


/*table*/

tbody,
tr,td,th {border-color:#1e2b5a; border-style: solid; box-sizing: border-box;
  border-collapse: separate;
  border-spacing:0; box-sizing: border-box;}

table{ border:#1e2b5a; border-style: solid;border-width:1px 0 0 1px;  width: 100%; }

.check th{padding: 0 0.5%; }
.check td{ line-height: 1.7em;}

th{/* width: 4.55%; padding:0 0.5%; */text-align: center; background-color: #f4f5f8; }
th,td{ border-width:0 1px 0 0; vertical-align: middle; }
tr{  border-width:0 0 1px 0; }
td{ /*width: 45.5%; padding:12px 50px 12px 20px;*/ letter-spacing: 0.05em;}

tr img{ max-width: 23px; width: 100%;vertical-align: middle; }

#point5 dt{ background-color: #8f95a5; color:#fff; text-align: center; display: inline-block;}
#point5 tr:last-child{ border-width:0; }
#point5 tr:last-child th,
#point5 tr:last-child td{ border-width:0 1px 1px 0;}

#select p{line-height: 2.2em; letter-spacing: 0.17em;}

#support #contactbox{  display: flex; justify-content: space-between;}
#support #contactbox ul,#support #contactbox dl{box-sizing: border-box;}

#support #contactbox dl{padding: 35px ; letter-spacing: 0.13em; flex-wrap: wrap; align-items: center;}
#support #contactbox dt,#support #contactbox dd{ width: 100%; }

.link_style01 { max-width: 450px; }
#improvement figure{ margin-left: auto; margin-right: auto; max-width: 480px;}


/* SP -----------------------------------------------------------*/
@media screen and (max-width: 640px) {
.bgcolor{ padding-top:12%; margin-bottom: 20%; }
.contentwrap{ padding:5% 6% 8%; margin-bottom: 10%; } 
.contentwrap h3{ font-size: 4.8vw; margin-bottom: 5%; }


#sloganwarp p, .contentwrap .noticetxt,#quality p, #select p,
#support p, #improvement p ,.contentwrap p{  line-height: 1.8em; font-size: 3.6vw; }
.contentwrap h3 .subtitle{ letter-spacing: 0.1em; font-size: 3vw; line-height: 1.8em; }
#sloganwarp p, .contentwrap .noticetxt,#quality p, #select p{ letter-spacing: 0.2em;}
 #improvement p{letter-spacing: 0.25px;}
#support p{ letter-spacing: 0.25px; margin-bottom: 10%;}

.contentwrap p{ letter-spacing: 0.1px;}
.contentwrap p .txt{ letter-spacing: -0.3px; }
 #sloganwarp p,#select p,
.contentwrap p,#improvement p{ margin-bottom: 6%;}
#stepwrap.bgcolor {padding-top: 45%; }
.bgcolor .rapperfix{ width: 94%; }
#stepnav{ top:-50vw }
#stepnav li a{ padding: 5% 0 8%; font-size: 2.7vw;}
#stepnav li a::after{right: -1.3vw;
    border-top: 1vw solid transparent;
    border-left: 2vw solid #1e2b5a;
    border-bottom: 1vw solid transparent;}
#stepnav li a span{font-size: 2.9vw;}
#stepnav li a span span{font-size: 3.6vw; padding-left: 2%;}

#stepnav li{ width: 22.5%; margin-bottom: 3%;}
#stepnav li:not(:nth-child(4n)){ margin-right: 3%; }

.steptitle,#pointbox dt{font-size:4.6vw; margin-bottom: 3%;}
.steptitle span { font-size: 5.8vw; }
#pointbox dt{ line-height: 1.6em; }
.imgbox{ margin-top:6%; }
.imgbox li:first-child{ margin-right: 3%; }
.bgcolor{padding-bottom: 6%;margin: 0 3% 19%; width: 94%;}
#process{ margin-bottom: 12%; }
#pointbox { margin-top: 10%; }

#quality{ margin-bottom: 20%; }
#quality.txtcenter{ text-align: left; }
#quality p{ margin-bottom: 10%; letter-spacing: 0.2px;}

#pointbox ul{ width: 69%; flex-wrap: wrap;}
#pointbox li{ width: 25vw; height:25vw;}
#pointbox li p{ font-size: 3.2vw; width :25vw;}
#pointbox li:first-child,#pointbox li:nth-child(2){ margin-bottom: 8%; }
#pointbox .noticetxt { font-size: 0.7em;  text-align: center;}
#pointbox .imgbox{ margin-bottom: 4%; }

.pointarea li{ flex-wrap: wrap; padding:14% 6% 9%;  font-size: 3.5vw; line-height: 1.7em; }
.pointarea li::before{ left: 6%;  font-size: 5.9vw; }
.pointarea li:first-child::before{ top:23%;}
.pointarea li:nth-child(2)::before{ top:17%; }
.pointarea li:last-child::before{ top:14%;}
.check{ width: 96%; margin-left: auto; margin-right: auto;}
#point5 .check{ width: 100%; }
.check tr{ width: 100%; }
.check tr img{ max-width: 3vw; }
.check th{ width: 4.5%; }
.check td{width: 44%; padding: 4% 5%; font-size: 3.45vw;  letter-spacing: -0.2px;}
#point4.pointarea li p{ line-height: 1.6em; letter-spacing: 0.3px; margin-bottom: 2%; }
#point4.pointarea li{ justify-content: center; }
#point4.pointarea li::before{ top:10% }
#point4.pointarea li:nth-child(2)::before{ top:11% }
#point4.pointarea li figure{ margin-top: 5%; }

#hygieneimg{ flex-wrap: wrap; display: flex !important;}
figure.tab{ display: none; }

#hygieneimg li:first-child,#hygieneimg li:nth-child(2),
#hygieneimg li:last-child figure{ width: 48%; }

#hygieneimg li:last-child{ display: flex; justify-content: space-between; }
#hygieneimg li:first-child figure:first-child { margin-bottom: 7%; }

#hygieneimg li:first-child ,
#hygieneimg li:nth-child(2) { margin-bottom: 3%; }

#point5 dt{padding:0 3% 0.5%; margin-bottom: 5%; font-size: 4vw;}

 #select p{letter-spacing: 0.2px;}


.safety .title_style01{ margin-bottom: 8%;letter-spacing:0.29px; }
#improvement figure{ width: 76%; margin-bottom: 12%; }
.link_style01{ width: 86%;}
.link_style01 a span{ letter-spacing: 0;font-size: 3.6vw; }



#support #contactbox{ margin-bottom: 7%;}
#support #contactbox dl{ padding:4% 6%; }
#support #contactbox li:first-child br { display:block;}
#support #contactbox ul { flex-wrap:inherit;}
#support #contactbox li:first-child { width: 38%;  }
#support #contactbox li:last-child { width: 62%; letter-spacing: 0.04em; }
#support #contactbox ul, #support #contactbox dl { padding: 3% 5%;  }
#support .imgbox { margin-top: 10%; }
}



/* PC: tab-----------------------------------------------------------*/
@media screen and (min-width: 641px) {
.bgcolor{ padding-top:120px; margin-bottom: 125px; }
.contentwrap h3{ font-size: 3.6rem; margin-bottom: 50px; }

.contentwrap h3 .subtitle,
#sloganwarp p, .contentwrap .noticetxt,#quality p, #select p,
.contentwrap p,#support p, #improvement p{ font-size: 1.7rem; }

 #sloganwarp p,#select p,
.contentwrap p, #improvement p{ margin-bottom: 40px;}
#point5 p,#support p{margin-bottom: 65px;}

#stepwrap.bgcolor{ padding-top:195px; }
#stepnav {justify-content: center; top: -230px;}
#stepnav li a{ padding:8px 0px 15px; }
#stepnav li a::after{right: -15px;
border-top: 12px solid transparent;
border-left: 15px solid #1e2b5a; 
border-bottom: 12px solid transparent;}
#stepnav li a span span{ font-size: 2.2rem; }


.steptitle,#pointbox dt{font-size: 2.4rem;}
.steptitle span{ font-size: 3rem; }
.imgbox{ margin-top:30px; }
.safety #quality .title_style01{ text-align: center; }
.bgcolor{padding-bottom: 95px; margin-bottom: 125px;}
#pointbox { margin-top: 70px; }

#process{ margin-bottom: 110px; }

#quality{ margin-bottom: 170px; }
#quality p{line-height: 2.2em; letter-spacing: 0.159em; margin-bottom: 70px;}
#pointbox .imgbox{ margin-bottom: 22px; }
#pointbox .noticetxt{ font-size: 0.9em; }
figure.tab{margin-bottom: 40px;display: block;}

.pointarea li{ padding:26px 20px 26px 65px;  font-size: 1.8rem; line-height: 1.8em; }
.pointarea li::before{ left:30px; top:35px; font-size: 3.6rem; }
.pointarea li figure{margin-left: 20px; }

#point4.pointarea li::before{ top:45% }
#point4.pointarea li p{ margin-bottom: 0; }

.check tbody{ display: flex; flex-wrap: wrap; }
.check tr{ width: 50%; }


.check td{ width: 44%;padding-top:12px ; padding-bottom: 12px; padding-left: 20px;}


#point5 dt{padding:4px 22px; margin-bottom: 15px; font-size: 2.1rem;}

/*#hygieneimg li:first-child figure:first-child,
#hygieneimg li:last-child figure:first-child{ margin-bottom: 25px; }*/
#hygieneimg li:nth-child(2){margin-right: 15px; margin-left: 15px;}

#support #contactbox dt{margin-right: inherit;}
#improvement { margin-bottom: 85px; }
}

/*
@media screen and (min-width: 1277px){
#hygieneimg li:first-child figure:first-child ,
#hygieneimg li:last-child figure:first-child {margin-bottom: 26px;}
}

@media screen and (max-width: 1276px) and (min-width: 1101px){
#hygieneimg li:first-child figure:first-child ,
#hygieneimg li:last-child figure:first-child {margin-bottom: 16vw;}
}*/


@media screen and (min-width: 1235px){
#point3 .check tr:nth-child(2) th,
#point3 .check tr:nth-child(2) td{  height: 106px;}
#point3 .check tr:nth-child(4) th,#point3 .check tr:nth-child(6) th{  height: 51px;}
}
@media screen and (max-width: 1234px) and (min-width: 1101px) {
#point3 .check tr:nth-child(2) th,
#point3 .check tr:nth-child(2) td{  height: 133px;}
#point3 .check tr:nth-child(4) th,#point3 .check tr:nth-child(6) th{  height: 78px;}
}

@media screen and (min-width: 1101px) {
.contentwrap{ padding:47px 50px 125px; margin-bottom: 50px; } 
#stepnav li{width: 18.7%; margin-right: 12px; margin-bottom: 15px;}

#stepnav li a:hover{ background-color: #0080cf; }
#stepnav li a:hover::after{ border-left: 15px solid #0080cf;}
#process,#quality,#select,
#step1,#step2,#step3,#step4,#step5,
#step6,#step7,#step8,#step9,#step10{ margin-top: -100px; padding-top: 100px; }

#pointbox li{ width: 156px; height:156px;}
#pointbox li p{  width :156px;}

#hygieneimg li:first-child figure,
#hygieneimg li:last-child figure{max-height: 190px; height: 16.5vw;}


#support #contactbox {  margin-left: auto;  margin-right: auto; max-width: 1100px;}
#support #contactbox ul{ width: 58.5%; }
#support #contactbox li:first-child { max-width: 124px; width: 30%; }
#support .telnum{ width:63.5%; }
#support #contactbox dl{ width: 38%; }

#support .link_style01 {  margin-top: inherit; margin-bottom: 70px; }
.check td{  padding-right:50px ; }
.check th{ width: 4%; }

}

@media screen and (max-width: 1100px) and (min-width: 971px) {
#point3 .check tr:nth-child(2) th{ height: 132px; }
#point3 .check tr:nth-child(4) th,
#point3 .check tr:nth-child(6) th,
#point3 .check tr:nth-child(7) th,#point3 .check tr:nth-child(8) th{ height: 78px; }
}

@media screen and (max-width: 970px) and (min-width: 641px) {
#point3 .check tr:nth-child(1) th,
#point3 .check tr:nth-child(2) th{ height: 215px; }
#point3 .check tr:nth-child(4) th,
#point3 .check tr:nth-child(6) th,
#point3 .check tr:nth-child(7) th,#point3 .check tr:nth-child(8) th{ height: 106px; }
}
@media screen and (max-width: 1100px) and (min-width: 641px) {
.contentwrap{ padding:4% 5% 12%; margin-bottom: 5%; } 

#stepnav li{width: 17%; margin-right: 3%; margin-bottom: 3%;}
#stepnav li a{ font-size: 0.9em; }

.imgbox li:not(:last-child){ margin-right: 3%;}
#pointbox ul{ max-width: 540px; }

#pointbox li{ width: 118px; height:118px;}
#pointbox li p{  width :118px;}
#support #contactbox{ margin-bottom: 4%;}
.check th{ width: 8%; }
.check td{  padding-right:20px ; }
#point4.pointarea li p{ line-height: 1.6em;width: 80%; }

#hygieneimg li:first-child figure,
#hygieneimg li:last-child figure{ height: 103px; }

#point5 .check td{ letter-spacing: 0.2px; }
}


/* PC: -----------------------------------------------------------*/
@media screen and (max-width: 1100px) {

.imgbox li:first-child img{max-width: 521px; width: 100%; }
#support #contactbox{flex-wrap: wrap; }
#support #contactbox ul, #support #contactbox dl{ width: 100%; }
}