/***************************************
style.css
***************************************/
/**=======================
main
==========================
header
==========================
01.content
==========================
02.sec01
==========================
03.sec02
==========================
04.sec03
==========================
05.sec04
==========================
06.sec05
==========================
07.sec06
==========================
08.sec07
==========================
09.sec08
==========================
footer
=======================**/
/**=======================
main
=======================**/
body{
  font-family: 'source-han-serif-japanese',"Sawarabi Mincho",'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ Ｐ明朝','MS PMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','游明朝体+36ポかな','YuMincho +36p Kana',serif;
  font-size: 16px;
  line-height: 1.8em;
  font-weight: 500;
}
#container{
  	overflow: hidden;
}
a{text-decoration: none;}
h1{
  margin: 0;
  padding: 0;
}
h1 img{
height: 100%;
max-height: 80px;
width: auto;
}

h2{
  margin: 0;
}
.lg-t16{
  font-size: 16px;
}
.lg-t18{
  font-size: 18px;
}
.lg-t24{
  font-size: 24px;
}
.lg-t30{
  font-size: 30px;
}
.marker{
  background-color: #fbf207;
}
.line-y{
  background: linear-gradient(transparent 50%, #fbf207 20%);
      line-height: 2em;
      text-align: center;
}
.mid{
  vertical-align: middle;
}
.tsp{letter-spacing:2px}
.bold{
  font-weight: bold;
}

.gold{
  color: #c0740c;
}

.btn01{}
.clear{clear: both;}



#sec02 h2.h2-s,
#sec03 h2.h2-s,
#sec04 h2.h2-s,
#sec07 h2.h2-s,
#sec08 h2.h2-s{
  background-image: url("../../img/collagen/title_bg_line.png"),url("../../img/collagen/title_bg01.svg");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding: 24px 0;
  color: #fff;
  margin: 0 0 50px 0;
  font-size: 180%;
letter-spacing: 5px;
}
#sec05 h2.h2-m{
  background-image: url("../../img/collagen/title_bg_line.png"),url("../../img/collagen/title_bg02.svg");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding: 24px 0;
  color: #fff;
      margin: 0 0 50px 0;
}
#sec06 h2.h2-l{
  background-image: url("../../img/collagen/title_bg_line.png"),url("../../img/collagen/title_bg03.svg");
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding: 24px 0;
  color: #fff;
    margin: 0 0 50px 0;
}
.h2-l{}

@media all and (max-width:999px) {
  .sp-none{
    display: none;
  }
  #sec01 h2,
  #sec02 h2,
  #sec03 h2,
  #sec04 h2,
  #sec05 h2,
  #sec06 h2,
  #sec07 h2,
  #sec08 h2{
    background-size: contain;
  }
  #sec06 h2.h2-l{
    font-size: 19px;
  }
  #sec07 h2.h2-s{
        margin: 0 0 20px 0;
  }
  .mb90{
    margin-bottom:90px !important;
  }
}
@media all and (min-width:1000px) {
  .pc-none{
    display: none;
  }
  #sec01 h2{
    margin: 110px 0 0 0;
    position: relative;
    width: 100%;
    height: 650px;
  }
  .mb90{
    margin-bottom:90px !important;
  }
}
/**=======================
header & footer
=======================**/
#header li {
  list-style: none;
}

#header a {
  color: #000;
  text-decoration: none;
}

#header {
  font-size: 1.2rem;
  font-weight: 900;
  width: 100%;
  text-align: center;
  position: fixed;
  z-index: 999999;
}

.sp-hd-logo{
  float: left;
  width: auto;
  height: 50px;
}

#nav-btn {
  display: none;
  outline: none;
}

.menu ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 80px;
}
.menu ul li {
  padding: 0 20px;
  transition: all 0.5s;
}
.menu ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
}
.menu ul li a:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
}
.menu ul li a:hover::after {
  transform: scale(1, 1);
}
.menu ul li a.noline:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 0);
  transform-origin: left top;
  transition: transform 0.3s;
}
.menu ul li a.noline:hover::after {
  transform: scale(0, 0);
}
@media screen and (max-width: 999px) {
  .button-wrap{
    background: rgba(255, 255, 255, 0.6);
    display: block;
    width: 60px;
    height: 48px;
    float: right;
  }
  #nav-btn {
    display: block;
    position: fixed;
    z-index: 11;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
  }

  .hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 25px;
  }
  .hamburger .bdr {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #000;
    transition: all 0.5s;
  }
  .hamburger .bdr:nth-child(1) {
    top: 0;
  }
  .hamburger .bdr:nth-child(2) {
    top: 10px;
  }
  .hamburger .bdr:nth-child(3) {
    bottom: 0;
  }
  .hamburger.is-active .bdr {
    background: #000;
  }
  .hamburger.is-active .bdr:nth-child(1) {
    transform: translateY(20px) rotate(-45deg);
    top: -10px;
  }
  .hamburger.is-active .bdr:nth-child(2) {
    opacity: 0;
  }
  .hamburger.is-active .bdr:nth-child(3) {
    transform: translateY(-20px) rotate(45deg);
    top: 29px;
  }

  .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    padding-top: 70px;
    text-align: left;
    font-size: 13px;
    z-index: 1;
    transform: translateX(80%);
    transition: 0.4s all;
  }
  .menu ul {
    display: block;
    width: 80%;
    line-height: 70px;
    background: none;
    color: #000;
    text-align: center;
    font-size: 18px;
  }
  .menu ul li {
    transition: all 0.5s;
  }
  .menu ul li:hover {
    background: #fff;
  }
  .menu ul li a:after {
    display: none;
  }

  .nav-open .menu {
    transform: translateX(0);
    background-color: #FFF;
  }
  .nav-open #contents {
    transform: translateX(-80%);
  }
}
@media screen and (min-width: 1000px) {
  .menu{
    background: rgba(255, 255, 255, 0.6);
  }
  .menu ul {
    width: 905px;
    margin: 0 auto;
        padding: 0;
  }
}


/**=======================
01.content
=======================**/
.cont{
  background-image: url("../../img/collagen/cont_bg01.jpg");
  max-width: 1920px;
  margin: 0 auto;
  background-position: top center;
  background-repeat: no-repeat;
}
.cont a{
text-align: center;
display: block;
max-height: 437px;
overflow: hidden;
}

@media all and (max-width:999px) {
  .cont a img{
    width: 100%;
    padding: 8px 0 0 0;
  }
  p {
    width: 90%;
    margin: 10px auto;
  }
  h3 {width: 90%;
       margin: 20px auto 20px auto;
     }
     .purchasebnr{
       margin:-30px 0 36px 0;
     }
}
@media all and (min-width:1000px){
  .purchasebnr{
    margin:-30px 0 50px 0;
  }
}
/**=======================
02.sec01
=======================**/
#sec01{
  background-image: url("../../img/collagen/sec01_bg01.jpg");
  max-width: 1920px;
  margin: 0 auto;
  background-position: top center;
  background-repeat: no-repeat;
}
#sec01 h2{
  display: inline-block;
}

#sec01 .mv_sp img.mv{
  padding: 0;
}

#sec01 h3{
  max-width: 1920px;
  margin:0 auto;
}
#sec01 h3 img{
  margin-top: -128px;
  max-width: 100%;
  width: 100%;
}
.sec01-box01{
  display: block;
  text-align: center;
      margin: 0 0 50px 0;
}
.sec01-box01-img{}
.sec01-box03{
text-align: center;
}


@media all and (max-width:999px) {/*sp*/
  #sec01 h2{
    margin: 50px 0 0 0;
  }
  #sec01 h2 img,
  .sec01-box03 img{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  #sec01{
      background-size: cover;
  }

  .sec01-box01{
    margin:0;
  }
  .sec01-box01 img{
    width: 40%;
  }

#sec01 h3 img {
    margin-top: -50px;
    max-width: 100%;
    width: 100%;
}
#sec01 .mv_sp img.title {
  width: 100%;
      margin-top: 20px;
      min-width: 280px;
      margin-bottom: -25px;
}
}

@media all and (min-width:1000px) {
  #sec01{
    height: 1550px;
  }
  .sec01-box03{
  margin: -60px 0 0 0;
}

/*.sec01-box01 h2 img{
  width: 100%;
  position: relative;
  margin-top: 120px;
}

img.sec01-box01-img{
  position: absolute;
      top: 28%;
      right: 17%;
  }*/
  #sec01 .mv_sp img.title{
    width: 65%;
    margin-top: 50px;
  }

  }/*pc*/

@media all and (min-width:1000px){
  .sec01-box01 h2 img{
    width: auto;
    position: absolute;
    top: 0;
    max-width: 1600px;
    overflow: hidden;
    left: 50%;
    margin-left: -800px;
    min-height: 672px;
    margin-top:25px;
  }

  img.sec01-box01-img{
    position: absolute;
    top: 35%;
    right: 27%;
    }
}
/**=======================
03.sec02
=======================**/
#sec02{
  max-width: 1920px;
}
#sec02 h3{
  clear: both;
  text-align: center;
}
.sec02-box01{
  max-width: 960px;
  margin: 0 auto;
}

.sec02-box02-01{
  background-image: url("../../img/collagen/sec02_bg01.svg");
  background-repeat: no-repeat;
  background-position: right;
      background-size: contain;
}
.sec02-box02-02{
  background-image: url("../../img/collagen/sec02_bg02.svg");
  background-repeat: no-repeat;
  background-position: left;
  margin: 0 0 60px 0;
      background-size: contain;
}
.mar80{
  margin-top: -80px;
}

.sec02-box03{
  max-width: 960px;
  margin: 0 auto;
}
.sec02-box03-text{
  margin-bottom: 150px;
}



@media all and (max-width:999px) {
  .sec02-box03{
    width: 100%;
    overflow: hidden;
    margin-top: -50px;
  }
  .sec02-box01 img{
    width: 100%;
  }
  img.sec02-box03-img01{
    width: 100%;
    float: none !important;
  }
  img.sec02-box03-img02{
    width: 90%;
    margin-left:5%;
  }
  img.sec02-box03-img03{
    width: 90%;
    margin-left:5%;
  }
  img.sec02-box03-img04{
    width: 100%;
  }
  .sec02-box02-01{
    background-size: contain;
    background-position: bottom left;
    margin: 0 0 40px 0;
  }
  .sec02-box02-02{
    background-size: contain;
    background-position: bottom right;
  }
 .sec02-box03 h3 img{
   width: 95%;
   margin: 0px auto;
 }
}

@media all and (min-width:1000px) {
  #sec02{
    margin: -500px auto 0 auto;
    padding-top:80px;
  }
  .sec02-box01 img{
  float: right;
  -webkit-shape-outside: polygon(nonzero,82px 318px, -2px 317px, -9px 137px, 135px 104px, 141px 23px, 210px 6px, 561px 0px, 561px 406px, 110px 404px);
  shape-outside: polygon(82px 318px, -2px 317px, -9px 137px, 135px 104px, 141px 23px, 210px 6px, 561px 0px, 561px 406px, 110px 404px);
  margin-right: -70px;
  padding-left: 40px;
}
  img.sec02-box03-img01{
    float: right;
    -webkit-shape-outside: polygon(nonzero,46px 196px, 105px -9px, 531px -2px, 515px 378px, 76px 372px);
    shape-outside: polygon(46px 196px, 105px -9px, 531px -2px, 515px 378px, 76px 372px);
    margin-top: -64px;
  margin-right: -80px;
  }
  img.sec02-box03-img02{
    float: left;
    width: 45%;
    padding-right: 5%;
  }
  img.sec02-box03-img03{
    float: right;
    width: 40%;
    padding-left: 5%;
    padding-right: 6%;
    padding-top: 8px;

  }
  img.sec02-box03-img04{
    float: left;
    width: 40%;
    padding: 0px 6%;
    margin-top: -30px;
  }

  .pt40{
    padding-top:40px;
  }
  .sec02-box02-01{
    margin: 0 0 80px 0;
  }
}

@media all and (max-width:999px){
  h2.h2-s{
    padding: 8px 0 !important;
    margin: 20px auto !important;
    font-size:1.3em !important;
  }
  h2.h2-m{
    padding: 5px 0 !important;
    margin: 20px auto !important;
    font-size: 95%;
}
h2.h2-l{
  padding: 5px 0 !important;
  margin: 20px auto !important;
  font-size: 90% !important;
}
}
/**=======================
04.sec03
=======================**/
#sec03{
  background-color: #f4f8ff;
      padding: 60px 0 120px 0;
}
#sec03 h4{
  border-bottom: 4px solid #edb308;
width: 166px;
margin: 50px auto 20px auto;
padding: 0 0 4px 0;
}

.sec03-box01-wrap{
  background-image: url(../../img/collagen/sec03_bg01.png);
  background-repeat: no-repeat;
  height: 450px;
  background-position: right;
  max-width: 1400px;
  margin: 0 auto;
}
.sec03-box01{
  max-width: 960px;
  margin: 0 auto;
  height: 100%;
}
.sec03-box01 p{
  max-width: 650px;
}

.sec03-box02{
  max-width: 720px;
margin: 0 auto;
text-align: center;
}
.sec03-box02-box{
margin: 0 auto 10px auto;
    position: relative;
    line-height: 1.4;
}
.sec03-box02-box img{
  float: left;
}
.sec03-about {
    width: 100%;
    font-size: 14px;
}
.sec03-name{
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic','メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  text-align: left;
margin: 13px 0 0 0px;
position: absolute;
font-size: 12px;
}


.sec03-box02-box p{
  float: left;
}

.sec03-box03{
  max-width: 960px;
    margin: 40px auto 0 auto;
}
.sec03-box03{
  background: #fff;
padding: 1px 20px 10px 20px;
box-sizing: border-box;
}
.sec03-box03 img{
      margin: 0 20px 20px 10px;
}
@media all and (max-width:999px) {
  .sec03-about {
    padding: 0px 0 0 88px;
    text-align: left;
    box-sizing: border-box;
    margin-top: -10px;
  }
.sec03-box02{
  text-align: left;
      margin-top: 90px;
  }
  .sec03-box01-wrap{
    height: auto;
    background-position: bottom;
  }
  .sec03-box02-box{
    width: 100%;
    padding: 4px 0;
  }
  .sec03-name{
  left: 90px;
  }
  .sec03-box02-box img{
    margin: 8px 10px 8px 20px;
  }
  .sec03-box02-metax{
    color: #f4f8ff;
    background: #4fb3e7;

  }
  .sec03-box02-aquatitan{
    background: #c8d8ef;

  }
  .sec03-box02-aquatitan .sec03-name{
    color: #152879;
  }
  .sec03-box02-aquagold{
    background: #fef2b8;

  }
  .sec03-box02-aquagold .sec03-name{
    color: #80714d;
  }
  .sec03-box02-aquasilve{
    background: #e6e6e6;

  }
  .sec03-box02-aquapalladium{
    background: #b6b6b6;

  }
  .sec03-box02-aquaplatinum{
    background: #cad7df;

  }
  .sec03-box03{
    width: 90%;
        border-radius: 5px;
        padding-bottom: 30px;
  }
  .sec03-box03 img {
    width: 90%;
}
  #sec03 h4{
    width: 60%;
    text-align: center;
  }
  #sec03{
    padding-bottom: 50px;
}
}
@media all and (min-width:1000px) {
  #sec03{
    padding-top:80px;
  }
  .sec03-box02-box{
    width: 635px;
  }
  .sec03-about{
    margin: 15px 0 0 0px;
    left: 240px;
    position: absolute;
    font-size: 13px;
        text-align: left;
  }
  .sec03-name{
    left: 110px;
    top: 5px;
  }
  .sec03-box02-box img{
    margin: 8px 10px 8px 40px;
  }
  .sec03-box02-metax{
    background-image: url("../../img/collagen/sec03_bg02.png");
    background-repeat: no-repeat;
    color: #f4f8ff;
    background-size: contain;
    margin: 20px auto 10px;
  }
  .sec03-box02-aquatitan{
    background-image: url("../../img/collagen/sec03_bg03.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto;
  }
  .sec03-box02-aquatitan .sec03-name{
    color: #152879;
  }
  .sec03-box02-aquagold{
    background-image: url("../../img/collagen/sec03_bg04.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto;
  }
  .sec03-box02-aquagold .sec03-name{
    color: #80714d;
  }
  .sec03-box02-aquasilve{
    background-image: url("../../img/collagen/sec03_bg05.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto;
  }
  .sec03-box02-aquapalladium{
    background-image: url("../../img/collagen/sec03_bg06.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto;
  }
  .sec03-box02-aquaplatinum{
    background-image: url("../../img/collagen/sec03_bg07.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto 20px auto;
  }
}

@media all and (max-width:999px) {
  .sec03-box01{
    background: rgba(255,255,255,0.5);
  }

  p.sec03-name{
    left: 30%;
  }

  p.sec03-about{
    margin-left: 6%;
    width: 85%;
    margin-top: -30px;
    }
}
/**=======================
05.sec04
=======================**/
#sec04{
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0 40px 0;
}

.sec04-mainimg{
  text-align: center;
}
.sec04-box01-wrap{
  text-align: center;
}
.sec04-box01-wrap img{
  width: 100%;
}
.sec04-box02{
  box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.18);
  border-radius: 20px;
  padding: 40px;
  max-width: 960px;
  box-sizing: border-box;
}

.sec04-box02 h3{
  background: url(../../img/collagen/sec04_line01.svg) bottom repeat-x;
  background-size: 654px;
  padding-bottom: 19px;
  margin: 0 0 10px 0;
  color: #a9002b;
}
.note-box{
  background: url(http://dgreen-check.com/ivva/lp/img/sec04_line02.svg) bottom repeat-x;
  padding-bottom: 3px;
}

.sec04-box02-text{
  background: url("../../img/collagen/sec04_line02.svg") bottom repeat-x;
  background-size: auto;
    padding-bottom: 12px;
    display: inline;
    line-height: 2.5em;
}

.sec04-box03{
  max-width: 960px;
font-size: 14px;
line-height: 1.5em;
margin: 0 auto;
}

@media all and (max-width:999px) {

  .sec04-mainimg{
    width: 100%;
  }
  .sec04-box02 h3{
    margin: 0 auto 15px;
        padding-bottom: 10px;
  }
  .sec04-box02{
    margin: 40px 20px 0 20px;
    padding: 5%;
  }
  .sec04-box02-text{
    padding-bottom: 6px;
    line-height: 1.75em;
}
.note-box{
    margin: 0 20px 20px 20px;
}
  }

@media all and (min-width:1000px) {
  #sec04{
    padding-top:80px;
  }
  .sec04-box01-wrap{
    max-width: 24%;
    float: left;
  }
  .sec04-box02-text-wrap{
    max-width: 73%;
    float: left;
    margin-left: 3%;
  }
  .sec04-box02{
    margin: 40px auto 0 auto;
  }
}
/**=======================
06.sec05
=======================**/
#sec05{
  background-image: url("../../img/collagen/sec05_bg01.gif");
  padding: 80px 0 90px 0;
}
.sec05-wrap img{
display: block;
margin: 0 auto;
}
@media all and (max-width:999px) {
  #sec05{
    padding: 20px 0 50px;
  }
  .sec05-wrap img{
    width: 100%;
  }
}
@media all and (min-width:1000px) {}
/**=======================
07.sec06
=======================**/
#sec06{
  padding: 90px 0 90px 0;
}
.sec06-box01 img{
  display: block;
  margin: 0 auto 50px auto;
}
.sec06-box02 img{
  display: block;
  margin: 0 auto;
}
.yt{
}
.yt iframe{
  border-left:3px solid #755619;
  border-right:3px solid #e9d18e;
  display: block;
  margin: 0 auto;

}

.yt iframe:before,
.yt iframe:after {
  content:"";
  display:block;
  height:3px;
  width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#755619), to(#e9d18e));
	background:-moz-linear-gradient(left, #755619, #e9d18e);
	background:linear-gradient(left, #755619, #e9d18e);
}

@media all and (max-width:999px) {
  .sec06-box02 img{
    width: 100%;
  }
  .yt{
  position:relative;
  width:100%;
  padding-top:56.25%;
  }
  .yt iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    border: none;
  }
}
@media all and (min-width:1000px) {}
/**=======================
08.sec07
=======================**/
#sec07{
  padding: 0;
}
.sec07-box01{
  max-width: 840px;
}

.sec07-box01 p{
  float: left;
  text-align: center;
}

.sec07-box02{
  max-width: 814px;
  margin: 0 auto;
}

.sec07-box02 h3 img{
  margin: 0 15px -18px 0;
}
.sec07-box02 dl{
  border: 1px solid #dfc1c1;
  padding: 0;
  margin:12px 0px 10px 40px !important;
}
.sec07-box02 li{
  list-style: none;
  padding: 12px 16px 10px 70px !important;
  min-height: 30px;
  line-height: 1.8em;
}
.sec07-box02 li:nth-child(odd){
	background: #ffefef;
  position: relative;
}
.sec07-box02 li:nth-child(odd):before {
  content: url("../../img/collagen/sec06_icon02.svg");
  position: absolute;
  top: 5px;
  left: 15px;
}

.sec07-box02 li:nth-child(even){
border-bottom: 1px solid #dfc1c1;
position: relative;
}
.sec07-box02 li:nth-child(even):before {
  content: url("../../img/collagen/sec06_icon03.svg");
  position: absolute;
  top: 5px;
  left: 15px;
}

span.smallnum{
  font-size:80%;
}
a.faqlink{
  color:red;
  text-decoration: underline;
}
a.faqlink:hover{
  text-decoration: underline;
}
@media all and (max-width:999px) {
  .sec07-box01 img.sec07-box01-right,
  .sec07-box01 img.sec07-box01-left{
    width: 50%;
  }
  .sec07-box01 p{
    margin-top: 10px;
        text-align: left;
    margin: 34px 20px 0 20px;
    }
    .sec07-box01 img.sec07-box01-right{
      float: left;
      margin-top: 0;
    }
    .sec07-box01 img.sec07-box01-left{
      float: left;
      margin-top: 0;
    }
    .sec07-box02 h3{
      text-align: center;
      margin: 0 auto 10px auto;
    }
    .sec07-box01{
      margin: 0 auto 40px auto;
    }
}
@media all and (min-width:1000px) {
  #sec07{
    padding-top:80px;
  }
  .sec07-box01 p{
    width: 420px;
    margin-top: 50px;
    margin: 34px 0 0 0;
  }
  .sec07-box01 img.sec07-box01-right{
    float: left;
    margin-top: -20px;
  }
  .sec07-box01 img.sec07-box01-left{
    float: left;
    margin-top: -20px;
  }
  .sec07-box02 h3{
    text-align: center;
    margin: 0 auto -15px;
  }
  .sec07-box01{
    margin: 0 auto 40px auto;
  }
}

/*Q&A*/
.accordionbox{
	margin: 10px auto 40px;
	padding: 20px;
}
.accordionlist dt{
    border-top: 1px solid #dfc1c1;
  background: #ffefef;
  position: relative;
}
.accordionlist dt .title p:before{
  content: url("../../img/collagen/sec06_icon02.svg");
  position: absolute;
  top: 10px;
  left: 15px;
}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
    padding-left: 10px;
	float: left;
  width:90%;
}
.accordionlist dd{
  display:none;
	background: #fff;
	padding:20px 0 20px 0;
  position:relative;
  margin: 0 0 0 15px;
}
.accordionlist dd:before{
    content: url("../../img/collagen/sec06_icon03.svg");
    position: absolute;
    top: 14px;
}
.answer{
  padding-left: 30px;
}
.accordinonlist dd p{
  margin: 0px;
padding: 0px 35px;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
}
.accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #F88789;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 15px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 15px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 13px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
dt.clearfix:after{
  display: block;
  clear: both;
  content: "";
}
.clearfix:after{
  display: block;
  clear: both;
  content: "";
}
@media all and (max-width:340px){
.title p{
  margin-left: 12%;
}
}


/**=======================
09.sec08
=======================**/
#sec08{

    background-image:url("../../img/collagen/sec07_bg04.jpg");
    background-repeat: no-repeat,repeat;
    background-position: top center;
    margin-top:60px;
}
.sec08-box01-wrap{
    padding: 0 0 20px 0;
}
.sec08-box01{
  max-width: 880px;
  margin: 0 auto;
}
.sec08-box01 h3{
  margin: 0;
}
.sec08-box01-left{
  max-width: 125px;
  float: left;
  width: 13%;
  margin-right: 3%;
}
.sec08-box01-right{
  float: right;
  max-width: 742px;
  width: 84%;
}

.sec08-box02-wrap{
  /*background-image: url("../../img/collagen/sec07_bg02.jpg");*/
  background-repeat: no-repeat;
}
.sec08-box02{
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom:100px;
}
.sab{
  color: #aa002b;
  font-size: 20px;
}



.sec08-box02-wrap{
  /*background-image: url("../../img/collagen/sec07_bg04.jpg");*/
  background-repeat: no-repeat;
  padding: 30px 0 0 0;
}
.sec08-box03{
  max-width: 770px;
  margin: 0 auto;
}
@media all and (max-width:999px) {
#sec08{
  background-image: url(../../img/collagen/sec07_bg04.jpg);
background-repeat: no-repeat,repeat;
padding: 50px 0 0 0;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}

.sec08-box02{
  max-width: 1000px;
margin: 0 auto;
padding-bottom: 250px;
}
.sec08-box02-left{
  width: 85% !important;
    float: none;
    margin: -25px auto;
}
  .sec08-box02-right img{
    width: 100%;
  }
  .sec08-box01 h3 img{width: 100%;}
  .sec08-box02-left img{
    width: 100%;
  }
  .sec08-box01-right{
    width: 100%;
  }
.sec08-box03-wrap{
  margin-top:-232px;
}

}

@media all and (min-width:1000px) {
.sec08-wrap{
  padding-top:80px;
}
.sec08-box02-left{
  max-width: 383px;
float: left;
}
.sec08-box02-right p{
  text-align: center;
  font-size: 24px;
      margin: -30px 0 0 0;
}

}

/**=======================
09.sec09
=======================**/
.sec09-box01{
  max-width: 880px;
  margin: 50px auto;
  font-size: 14px;
  line-height: 1.8em;
}



/**=======================
footer
=======================**/
footer{
  /*background-image: url(../../img/collagen/sec07_bg04.jpg);
      background-repeat: repeat;*/
      padding: 500px 0 20px 0;
      text-align: center;
      background-position: center bottom;
          margin-top: -480px;
}
footer p{
  margin-left:65px;
}
footer a{
  padding: 0 70px 0 50px;
}

footer a.footerlink{
  color:#000;
}

.copyright{
  text-align: center;
}

.copyright{
  text-align: center;
}

a.totop{
  scroll-behavior: smooth;
}


@media all and (min-width:1000px){
.title p {
  margin-left:10%;
}
.answer p{
  margin: 0px;
padding: 0px 30px;
}


.arrow{
  text-align: center;
      font-size: 220%;
      font-weight: bold;
      letter-spacing: 0px;
      padding-bottom: 40px;
}

.arrow img{
  max-width: 145px;
  margin: -15px 0 40px 0;
}
.sec03-box02-box img.logo{
  width: 50px;
}

.sec08-box02-right{
  position: relative;
}
.sec08-box02-right img.floatR{
  position: absolute;
  right: -10px;
}
}


@media all and (max-width:999px){


  .arrow{
    width: 90%;
    margin: 40px auto;
    font-size: 140%;
    text-align: center;
  }

  .arrow img{
    width: 25%;
    margin: 5px 0 20px;
  }

.sec02-box03-text {
      margin-bottom: 30px;
  }
  img.sec02-box03-img02, img.sec02-box03-img03, img.sec02-box03-img04{
    float: none;
    width: 90%;
    padding: 0;
    display: block;
    margin: 0 auto;
  }

.sec07-box02 dl{
    margin: 0 !important;
}

dl.accordionlist dt .title{
  padding-left: 35px;
  float: left;
  width: 90%;
  padding: 12px 0 12px 13%;
  box-sizing: border-box;
}

dl.accordionlist dt .title p:before{
  content: url("../../img/collagen/sec06_icon02.svg");
  position: absolute;
  top: 25%;
  left: 12px;
}
dl.accordionlist dd:before{
  content: url("../../img/collagen/sec06_icon03.svg");
    position: absolute;
    top: 30%;
}
p.accordion_icon{
  position: relative;
  width: 10%;
  height: 0px;
  float: right;
  margin-right: 5px;
  margin: 40px 0;
}

.title p{
  width: 80%;
margin: 0 auto;
}

.answer p{
  width: 80%;
margin-top: 1px;
margin-left: 11%;
}

.accordion_icon span:nth-of-type(1) {
    top: 25%;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 25%;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

#sec07{
  padding:0;
}
#sec08 h2.h2-s{
  font-size:1em !important;
}
.sec08-box01-left{
  float: none;
  width: 100%;
  max-width: 1000px;
}
.sec08-box01-left img{
  height: 200px;
  margin: 0 auto;
  display: block;
}
.sec08-box01-right h3{
      margin: 20px auto;
}
.sec08-box02-left img{
  width: 85%;
margin: 0 auto;
display: block;
}
.sec08-box02-right p{
  text-align: center;
    font-size: 16px;
    margin: -30px 0 0 0;
    width: 100%;
}
.sec08-box02-right h3 img{
  width: 80%;
margin: 50px auto;
display: block;
}
img.floatR{
  position: static !important;
  padding-top: 25px;
}
footer{
padding: 600px 0 20px 0;
text-align: center;
margin-top: -500px;
}

footer a{
      padding: 0px 15px 0 15px;
}
footer p{
  margin:0;
  width:100%;
}
}