@charset "UTF-8";

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
}
.section_main {
  max-width: 1400px;
  margin: 0 auto;
}
.section_about{
  text-align: center;
}
.section_about h2{
  font-size: 2.5em;
  padding: 4rem 0 0;
  margin-bottom: .6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.45;
}
.section_about p{
  text-align: left;
  line-height:1.87;
  margin-bottom: 2em;
}
.aboutbox{
  width: 570px;
  margin: 0 auto;
}
.aboutwater{
  margin: 5em auto .8em;
}
.section_index{
  max-width: 1280px;
  margin: 0 auto;
}
.section_index h2{
  font-size: 2.2em;
  padding: 4rem 0 0;
  margin-bottom: 1em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
}
.title-border {
  display: flex;
  align-items: center;
}
.title-border:before,
.title-border:after {
  border-top: 3px solid;
  content: "";
  border-color: #00A3EA;
  flex-grow: 1;
}
.title-border:before {
  margin-right: 1em;
}
.title-border:after {
  margin-left: 1em;
}
.index_hr {
  border-top: 2px solid;
  border-color: #00A3EA;
  margin-bottom: 1em;
}
.index_button{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2rem ;
  row-gap:1rem;/* 行と行の間(縦方向)の余白 */
  margin: 1.7em 0 2.8em;
}
.button01 a {
  border-radius: 0.6em;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  width: 225px;
  padding: 20px 0 25px;
  color: #FFF;
  transition: 0.3s ease-in-out;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  line-height:1.22;
  background: #00A3EA;
}
.button01 a:hover {
  background: #00A3EA;
  opacity: 0.8;
}
.section_contents{
  text-align: center;
}
.section_contents img{
  max-width: 100%;
}
.box01{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 4em auto 3em;
}
.box01R{
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  margin: 4em auto 3em;
}
.box01R2{
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
  margin: 4em auto 1em;
}
.item01-1{
  max-width: 510px;
  padding:  0 12px;
}
.item01-2{
  max-width: 510px;
  padding:  0 8px;
}
.item01-2 h2{
  font-size: 2.2em;
  margin-bottom: 0.8em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
  text-align: center;
}
.item01-2 p{
  font-size: 1.1em;
  line-height:1.5;
  text-align: left;
  margin:  0 25px;
}
.item02-1{
  width: 510px;
  margin:  0 1em;
}
.item02-2{
  width: 510px;
  margin:  0 1em;
}
.item03-1{
  max-width: 440px;
}
.item03-1 h2{
  font-size: 2.6em;
  margin-bottom: 2rem;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.45;
  text-align: center;
}
.item03-1 h3{
  font-size: 1.6em;
  margin-bottom: 0.8rem;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.47;
  text-align: center;
}
.item03-1 p{
  font-size: 1.0em;
  line-height:1.5;
  text-align: left;
  margin:  0 2.5rem 1.5rem;
}
.item03-2{
  max-width: 610px;
}
.item04-1{
  width: 612px;
  margin: 0 0 .5em 0;
}
.item04-2{
  max-width: 415px;
  padding: 0 0 0 1.6em;
  margin: 0 0 .5em;
}
.item04-2 h2{
  font-size: 2.0em;
  margin-bottom: 0.8em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
  text-align: center;
}
.item04-2-p1{
  font-size: 1.0em;
  line-height:1.5;
  text-align: left;
  margin:  0 1rem .5em 1.8em;
}
.item04-2-p2{
  font-size: 0.9em;
  line-height:1.71;
  text-align: left;
  margin:  0 1rem 1em 1.8em;
}
.item04-2-p3{
  font-size: 0.9em;
  line-height:1.71;
  text-align: center;
  margin:  0 1rem 1em 1.8em;
}
.item05{
  max-width: 840px;
}
.item05 h2{
  font-size: 2.0em;
  margin-bottom: 0.6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
  text-align: center;
}
 .item05 p{
  font-size: 1.1em;
  line-height:1.5;
  text-align: left;
  margin:  0 25px;
}
 .item06-1{
  width: 400px;
  padding:  10px 15px 0;
}
 .item06-2{
  max-width: 380px;
  padding: 25px 20px 0 0;
}
.item06-2 p{
  font-size: 0.9em;
  font-weight: 500;
  line-height:1.9;
  text-align: left;
}
.item07-1{
  width: 400px;
  padding: 10px 14px 0;
}
.item07-2{
  max-width: 380px;
  padding:  25px 20px 0 0;
}
.item07-2 p{
  font-size: 0.9em;
  font-weight: 500;
  line-height:1.9;
  text-align: left;
}
.box03{
  border: 5px solid #00A3EA;
  border-radius: 10px;
  position: relative;
  max-width: 1000px;
  margin: 4em auto 3em;
}
.box03 h2{
  font-size: 2.2em;
  margin: 1.3em auto 0.6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
  text-align: center;
}
.box03 h3{
  font-size: 2.2em;
  margin: .1rem .5rem;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
  text-align: left;
}
.box03 h4{
  font-size: 1.3em;
  margin: 2rem auto 1rem;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.45;
  text-align: center;
}
.box03-inner{
  max-width: 885px;
  background: #F2FBFF;
  margin: 3em auto 2em;
  padding: 0.2rem 0;
}
.box03-inner-text{
  font-size: 0.9em;
  margin-bottom: 2em;
}
.box03-inner2{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 761px;
  background: #FFFFFF;
  margin: 0 auto 1em;
}
.box03-inner2-text{
  font-size: 1em;
  font-weight: 500;
  line-height:1.9;
  text-align: left;
  max-width: 330px;
  margin: 4.2em 1em;
}
.box03-inner2-img{
  width: 355px;
  margin: 1em .5em;
}
.box04-1{
  position: relative;
  max-width: 1000px;
  margin: 5em auto 3em;
}
.box04-1 img{
  margin: 2em auto 0.5em;
}
.box04-1 p{
  text-align: left;
  font-size: 0.9em;
  line-height:1.71;
  margin: 1em auto 2em;
}
.box04-2{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 4em auto 2em;
  max-width: 800px;
}
.box04-text{
  font-size: 0.9em;
  line-height:1.71;
  text-align: left;
  margin: 1em 2em 2em;
  max-width: 800px;
}
.box04-title{
  width: 796px;
}
.temp{
  font-size: 1.4em;
}
.cels{
  font-size: 1.14em;
}
.three{
  max-width: 864px;
  border: 3px solid #00A3EA;
  border-radius: 30px;
  background: #F2FBFF;
  position: relative;
  margin: 1em auto 1em;
}
.section_practice{
  text-align: center;
  background: url("/product/bottle/515pj/images/practice_back.jpg") ;
  max-width: 100%;
  background-repeat:no-repeat;
  background-position : center top;
  background-size:  cover;
  padding-bottom:7%;
}
.section_practice h2{
  font-size: 2.2em;
  margin: 1em auto 1.5em;
  color: #00A3EA;
  font-weight: 900;
  line-height:1.45;
  background: #F2FBFF;
  border-radius: 30px;
  max-width: 930px;
  padding: 0.2rem 0;
}
.section_practice h3{
  font-size: 2.2em;
  margin: 0.6em auto 0.6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
}
.section_practice p{
  font-size: 1.3em;
  margin: .5em auto .5em;
  font-weight: 500;
  line-height:1.8;
}
.practice-box{
  border: 10px solid #00A3EA;
  border-radius: 30px;
  position: relative;
  max-width: 1000px;
  margin: 4em auto 3em;
  padding: 2rem 0;
  background: rgba(255,255,255,0.9);
}
.practice-boxtitle{
  margin: 2.5em auto 1em;
  width: 640px;
}
.practice-box img{
  margin: .5em auto 1em;
}
.practice02{
  width: 848px;
  margin: 0 2em ;
}
.practice03{
  width: 813px;
  margin: 0 2em ;
}
.section_heat1{
  text-align: center;
  background: url("/product/bottle/515pj/images/heat1_back.jpg") ;
  max-width: 100%;
  background-repeat:no-repeat;
  background-position : center;
  padding-bottom:2%;
  padding-top:3%;
}
.heat1-box{
  max-width: 730px;
  margin: 1em auto 1em;
  padding: 2rem 0;
}
.section_heat1 h3{
  font-size: 2.2em;
  margin: 0.6em auto 0.6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
}
.section_heat1 p{
  font-size: 1.0em;
  text-align: left;
  margin: .5em auto .5em;
  font-weight: 500;
  line-height:1.8;
}
.section_heat1 a{
  color: blue;
}
.section_heat1 a:hover{
  text-decoration: underline
}
.inyou{
  font-size: 0.8em;
  margin-top: 1em;
}
.inyou2{
  font-size: 0.8em;
  margin: 1em 0 0 3rem;
  text-align: left;
}
.heat1-box span{
  color: #DB0606;
  font-weight: 500;
}
.section_heat2{
  margin: 0 auto 1em;
  background: #F2FBFF;
  max-width: 920px;
  padding:1rem 2rem 1rem;
  text-align: center;
}
.section_heat2 h3{
  font-size: 2.0em;
  margin: .6em auto .6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
}
.section_heat2 a{
  color: blue;
}
.section_heat2 a:hover{
  text-decoration: underline
}
.heat_table th{
  padding: 1.3rem 1.5rem 1rem;
  vertical-align: top;
}
.heat_table td{
  text-align: left;
  padding: 1rem 2.0rem 1rem;
  line-height:1.9;
}
.heat_table h4{
  width:182px;
  background: #00A3EA;
  border-radius: 30px;
  color: #FFFFFF;
  font-size: 1.1em;
}
.section_heat3{
  text-align: center;
  background: url("/product/bottle/515pj/images/heat3_back.jpg") ;
  max-width: 960px;
  background-repeat:no-repeat;
  background-position : center;
  padding-top:3%;
  padding-bottom:3%;
  margin: 0 auto 5em;
}
.section_heat3 h3{
  font-size: 2.0em;
  margin: 0 auto .6em;
  color: #00A3EA;
  font-weight: bold;
  line-height:1.46;
}
.section_heat3-txt{
  margin: 0 1em 0 6em;
  font-weight: 500;
  text-align: left;
}
.heat3-flex{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 1.2em 2.5em 1em 1.5em;
}
.flex-item {
  width: 280px;
}
.heat3-box{
  border: 5px solid #00A3EA;
  border-radius: 20px;
  position: relative;
  width: 280px;
  height: 315px;
  margin: 1.5em auto 1em;
  background: #FFFFFF;;
}
.heat3-box h4{
  position: absolute;
  right: 0;
  left: 0;
  top: -1.4em;
  font-size: 1.25em;
  font-weight: bold;
  line-height:1.45;
}
.heat3-box span{
  padding: 0.4em 1.2em;
  background: #00A3EA;
  color: #FFF;
  display: inline-block;
  border-radius: 30px;
  width: 182px;
}
.heat3-box .inner{
  padding: 1.8em 1em .5em;
  text-align: left;
  color: #818181;
  font-size: 1.1em;
  line-height:1.55;
}
.heat3-title{
  width: 796px;
  margin: 0 auto;
}
.longurl{word-break: break-all;}
.pc { display: block !important; }
.sp { display: none !important; }
/*PCでは無効（改行しない）*/
.smbr{
    display: none;
}

 /*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 768px) {
 .wrapper {
   margin-bottom: 50px;
 }
 .section_about h2{
   font-size: 1.8em;
   margin-bottom: 0.5em;
 }
 .aboutbox{
   max-width: 100%;
   margin: 0 auto;
   padding:0 .5em;
 }
 .section_index h2{
   font-size: 1.8em;
 }
 .index_button{
   margin: 1.7em 0 2.5em;
 }
 .button01 a {
   width: 180px;
   padding: 1em 0 1.3em;
   font-size: 1em;
 }
 .item01-1 {
   display: none !important;
 }
 .item01-2 {
   max-width: 100%;
   margin: 0 .5em;
   padding:  0;
   text-align: center;
 }
 .item01-2 h2{
   font-size: 1.8em;
   margin: 0 .5em .8em;
 }
 .item01-2 p{
   margin:  0 .5em;
 }
 .item02-1 {
   width: 100%;
   margin: 0 .5em;
   text-align: center;
 }
 .item02-2 {
   width: 100%;
   margin: 2rem .5em 0;
   text-align: center;
 }
 .item03-1 {
   max-width: 100%;
   margin: 0 .5em;
 }
 .item03-1 h2{
   font-size: 2.2em;
 }
 .item03-1 h3{
   font-size: 1.8em;
 }
 .item03-2 {
   width: 100%;
   margin: 0 .5em;
 }
 .index_hrSP {
   border-top: 2px solid;
   border-color: #00A3EA;
   width: 95%;
   margin: 0 auto 1em;
 }
 .item04-1 {
   width: 100%;
   margin: 0 .5em;
 }
 .item04-2 {
   max-width: 100%;
   margin: 0 .5em;
   padding: 0;
 }
 .item04-2 h2{
   font-size: 1.8em;
 }
 .item04-2-p1{
  margin:  0 .5rem .5em;
}
 .item05 h2{
   font-size: 1.8em;
 }
 .item06-1{
   max-width: 400px;
   padding:  0.5em 1em 0.5em;
 }
 .item06-2{
   max-width: 659px;
   padding:  0.5em 1em 0.5em;
 }
 .item07-1{
   width: 400px;
   padding:  0.5em 1em 0.5em;
 }
 .item07-2{
   max-width: 659px;
   padding:  0.5em 1em 0.5em;
 }
 .box03{
   max-width: 680px;
   margin: 3em auto 2em;
 }
 .box03 h2{
   font-size: 1.8em;
 }
 .box03-inner{
   max-width: 680px;
   background: #F2FBFF;
   margin: 2em 1em 1em;
   padding: 0.2rem 0;
 }
 .box03-inner2{
   max-width: 680px;
   margin: 0 1.5em .5em;
 }
 .box03-inner2-text{
   max-width: 489px;
   margin: 1em 1em;
 }
 .box03-inner2-img{
   max-width: 489px;
   margin: 1em .5em;
 }
 .box03-titleSP{
   margin: 1em 1.5em 1em;
 }
 .box04-1{
   position: relative;
   max-width: 680px;
   margin: 3em auto 2em;
 }
 .box04-1 p{
   margin: 2em 1em 1em;
 }
 .box04-2{
   margin: 3em auto 2em;
   max-width: 680px;
 }
 .box04-titleSP{
   width: 680px;
 }
 .section_practice{
   max-width: 680px;
   padding-bottom:5%;
   margin: 0 auto;
 }
 .section_practice h2{
   font-size: 1.8em;
   max-width: 680px;
   padding: 0.5em .5em;
 }
.section_practice h3{
   font-size: 1.8em;
 }
 .section_practice img{
   padding: 0.2em 1em;
 }
 .section_practice h3{
   font-size: 1.8em;
   margin: 0.4em auto 0.4em;
 }
 .section_practice p{
   margin: .4em auto .4em;
 }
 .practice-box{
   max-width: 680px;
   margin: 3em auto 2em;
   padding: 2rem 0.5em;
 }
 .practice-boxtitle{
   margin: 2.5em 1em 1em;
 }
 .section_heat1{
   max-width: 680px;
   margin: 0 auto;
 }
 .section_heat1 h3{
   font-size: 1.8em;
 }
 .section_heat2{
   margin: 0 auto 1em;
   background: #F2FBFF;
   max-width: 680px;
   padding:1rem 2rem 1rem;
   text-align: center;
   margin: 0 auto 1em;
 }
 .section_heat2 h3{
   font-size: 1.8em;
 }
 .heat_tableSP {
   margin: 0 auto;
 }
 .heat_tableSP h4{
   text-align: center;
   width:182px;
   background: #00A3EA;
   border-radius: 30px;
   color: #FFFFFF;
   font-size: 1.3em;
   margin: 1.5em auto 1em;
 }
 .heat_tableSP p{
   font-size: 1em;
   text-align: left;
   margin: .5em auto .5em;
   font-weight: 400;
   line-height:1.8;
 }
 .section_heat3SP{
   text-align: center;
   background: url("/product/bottle/515pj/images/heat3_backSP.jpg") ;
   max-width: 960px;
   background-repeat:no-repeat;
   background-position : top;
   background-size: cover;
   padding-top:3%;
   padding-bottom:3%;
   margin: 0 auto 5em;
 }
.section_heat3SP h3{
   font-size: 1.8em;
   margin: 0 auto .6em;
   color: #00A3EA;
   font-weight: bold;
   line-height:1.46;
 }
 .section_heat3SP p{
   margin: 0 1em;
   font-weight: 500;
   text-align: left;
 }
 .heat3-boxSP{
   border: 5px solid #00A3EA;
   border-radius: 20px;
   position: relative;
   width: 90%;
   margin: 3em auto 2em;
   background: #FFFFFF;;
 }
 .heat3-boxSP h4{
   position: absolute;
   right: 0;
   left: 0;
   top: -1.4em;
   font-size: 1.25em;
   font-weight: bold;
   line-height:1.45;
 }
 .heat3-boxSP span{
   padding: 0.4em 1.2em;
   background: #00A3EA;
   color: #FFF;
   display: inline-block;
   border-radius: 30px;
   width: 182px;
 }
 .heat3-boxSP .inner{
   padding: 1.8em 1em .5em;
   text-align: left;
   color: #818181;
   font-size: 0.9em;
   line-height:1.55;
 }
 .heat3tableSP td:nth-of-type(1){
   width: 45%;
 }
 .heat3tableSP td:nth-of-type(2){
   width: 55%;
 }
 .heat3-titleSP{
   max-width: 602px;
   margin: 0 auto;
   padding: 0 1em;
 }
 .inyou3{
   font-size: 0.8em;
   margin: 3em 0 4em;
 }
 .pc { display: none !important; }
 .sp { display: block !important; }
 /*スマートフォンのみ有効（改行する）*/
 .smbr{
   display: block;
 }
}

@media screen and (max-width: 480px) {
  .warpper {
    padding: 0 1em;
  }
  .section_about h2,
  .box03 h2,
  .item01-2 h2,
  .item03-1 h3,
  .item04-2 h2,
  .section_practice h2,
  .section_practice h3,
  .section_heat3SP h3 {
    font-size: 1.4em;
  }
  .section_heat2 h3 {
    font-size: 1.2em;
  }
  .section_practice p {
    font-size: 0.9em;
  }

 .index_button{
   margin: 1.5em 0 2.2em;
  }
 .button01 a {
    width: 150px;
    padding: 1em 0 1.2em;
    font-size: 0.9em;
 }
}