body{
font-weight: normal;
font-family: "Helvetica Neue", "Helvetica", "Arial", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",  sans-serif!important;
color: #313131;
line-height: 1.6 ;
}
html #newcoda,
html #productWeb{
font-size: 62.5%;
}
p{
font-size: 1.0rem;/*1rem = 16px*/
line-height:1.8;
margin-bottom:0;
}
img{
width: 100%;
display: block;
margin: 0 auto;
}
a:hover img{
  opacity: .8;
}
.pc{display: block;}
.sp{display: none;}

/* 共通エリア */
.wrapper{
  box-sizing: border-box;
  max-width: 980px;
  width: 100%;
  padding: 0 20px; 
  margin: 0 auto;
}
.minBox{
  max-width: 700px;
  width: 90%;
  margin: 0 auto;
}
.containerbox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.item02{
  width: 48%;
}
.item03{
  width: 32%;
  margin-bottom: 2%;
}
.mb30{
  margin-bottom: 30px;
}
.textBig{
  font-size: 1.12rem;
  font-weight: bold;
}
.colorRed{
  color: #dc143c;
}
.banner{
  max-width: 700px;
  width: 100%;
  margin: 0 auto 60px;
}

/*タイトル*/
h1,h2{
  font-family: serif;
  text-align: center;
  font-weight: normal;
}
h1{
  position:relative;
  color: #b38848;
  font-size: 2.62rem;/* 42px */
  line-height: 1.2;
  margin-bottom: 20px;
}
h2{
  font-size: 1.37rem;/* 22px */
  margin-bottom: 20px;
}
#whatis h1::before,
#buyflow h1::before,
#faq h1::before,
#salon h1::before{
  content: url(../images/h1_kira01.png);
  display: inline-block;
  max-width: 40px;
  width: 100%;
  height: 40px;
  margin-right: 20px;
}
#whatis h1::after,
#buyflow h1::after,
#faq h1::after,
#salon h1::after{
  content: url(../images/h1_kira02.png);
  display: inline-block;
  max-width: 40px;
  width: 100%;
  height: 40px;
  margin-left: 15px;
}



/*
#buyflow h1 img,
#faq h1 img,
#salon h1 img{
  display: inline-block;
  max-width: 40px;
  width: auto;
  height: auto;
}
.h1_imgLeft{
  margin-left: 20px!important;
}
.h1_imgRight{
  margin-right: 20px!important;
}
*/

/*あきらめていませんか*/
#giveup,
#buyflow{
  box-sizing: border-box;
  background: #fefaf7;
  padding: 60px 20px;
}
#giveup h1{
  margin-bottom: 10px;
}
#giveup h1 img{
  max-width: 644px;
  width: 100%;
}
#giveup h2{
  font-family: serif;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #dc143c;
  margin-top: 40px;
}
#giveup h2 span{
  font-size: 2.0rem;
}
#giveup .item02{
  width: 40%;
}
#giveup .item02:first-child{
  box-sizing: border-box;
  width: 60%;
  padding-right: 40px;
}
#giveup ul{
  list-style: none;
}
#giveup ul li{
  line-height: 1.6;
  text-indent:-1em;
  padding-left:1em;
  margin-bottom: .8em;
}
#giveup ul li::before{
  content: "●";
  color: #dc143c;
  margin-right: 5px;
}

/*ジュネルライフ*/
#life{
  box-sizing: border-box;
  background: #f9f5ed;
  padding: 60px 20px;
}
#faq{
  padding: 60px 0;
}
#life h1 img{
  margin-top: 60px;
}
.gridbox{
  width: 90%;
  column-count: 2;
  column-gap: 0;
  margin: 0 auto;
}
.grid {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 60px;
}
.grid:first-child{
  min-height: 200px;
}
.grid:last-child{
  margin-bottom: 0;
}
.grid p{
  box-sizing: border-box;
  padding: 20px;
}

/*ジュネルとは*/
#whatis{
  box-sizing: border-box;
  padding: 60px 20px;
}
#whatis h3{
  color: #dc143c;
  text-align: center;
  font-size: 1.5rem;/*24px*/
  font-weight: bold;
  margin-bottom: 30px;
}
#whatis h3 span{
  display: block;
  color: #313131;
  font-weight: normal;
  font-size: 1.0rem;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 30px auto 60px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
#whatis dl{
  margin-bottom: 30px;
}
#whatis dt{
  font-size: 1.37rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/*buyflow*/
#buyflow .item02{
  width: 15%;
  margin-bottom: 30px;
}
#buyflow .item02:nth-child(2n){
  width: 85%;
}
#buyflow h3{
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 10px;
}
.circle {
  width: 80px;
  height: 80px;
  background-color: #c8a163;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 2.5rem;
}
#buyflow .containerbox{
  margin-top: 40px;
}
ul.liststyle{
  list-style: none;
}
ul.liststyle li{
  padding-left:1em;
  text-indent:-1em;
  margin-bottom: 1.0em;
}
ul.liststyle li::before{
  content: "● ";
  font-size: 1.12rem;
}

/*faq*/
#faq h3{
  color: #dc143c;
  font-size: 1.12rem;
}
#faq h4{
  font-size: 1.12rem;
  margin-bottom: 10px;
}
#faq .item02{
  box-sizing: border-box;
  background: rgba(220,20,60,.1);
  padding: 20px;
  margin-bottom: 30px;
}
#faq dl{
  display: flex;
  flex-wrap: wrap;
}
#faq dt,
#faq dd{
  box-sizing: border-box;
  padding: 10px;
}
#faq dt{
  width: 15%;
}
#faq dd{
  width: 85%;
}
.faq_iconQ,
.faq_iconA{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 1.5rem;/*24px*/
}
.faq_iconQ{
  background-color: #eea1ab;
}
.faq_iconA{
  background-color: #e13c5c;
}

/*salon*/
#salon{
  box-sizing: border-box;
  padding: 60px 20px;
}
#salon h3{
  font-family: serif;
  font-size: 1.37rem;
  font-weight: bold;
  margin-bottom: 20px;
}
#salon h3 span{
  display: block;
  font-size: 1.25rem;
  font-weight: normal;
}

footer{
  background: #000;
  text-align: center;
  color: #c8a163;
  padding: 40px 0 20px;
}
footer h1 img{
  max-width: 264px;
  margin-bottom: 10px;
}
footer h2{
  color: #c8a163;
  font-size: 1.0rem;
  margin-bottom: 5px;
}
footer img{
  max-width: 30px;
}
footer a:link img{
  display: inline-block;
  margin: 10px;
}
@media (max-width: 750px) {
  .pc{display: none;}
  .sp{display: block;}
  
  h1{
	  font-size: 2.5rem;/* 40px */
  }
  h2{
	  font-size: 1.25rem;/* 20px */
  }
  #giveup{
    padding: 30px 0;
  }
  .item02,
  .item03{
    width: 100%;
  }
  #giveup .item02,
  #giveup .item02:first-child{
    width: 100%;
  }
  #giveup .item02:first-child{
	  padding-right: 0;
  }
  #giveup h2 span{
	  font-size: 1.75rem;
  }
  #life .wrapper{
	  padding: 0;
  }
  .gridbox {
    width: 100%;
    column-count: 1;
    padding: 0;
  }
  .grid{
    margin-bottom: 30px;
  }
  .grid:first-child{
    min-height: 100%;
  }
  .grid p{
    padding: 20px 10px;
  }
  #life h1 img {
    margin-top: 0;
  }
  #whatis .item02,
  #salon .item02{
    margin-bottom: 20px;
  }
  #buyflow .item02,
  #buyflow .item02:nth-child(2n){
    width: 100%;
  }
  #buyflow .item02:nth-child(2n){
    padding-bottom: 30px;
    border-bottom: 1px dotted #333;
  }
  #buyflow .minBox{
	  width: 100%;
  }
  .circle{
    margin: 0 auto;
  }
  #faq{
    padding: 60px 0 30px;
  }
  #faq .item02{
    padding: 10px;
  }
  #salon{
    padding: 30px 20px;
  }

  .banner{
    width: 90%;
    margin: 0 auto 40px;
  }
}