@charset "utf-8";
/*　エコパックページ用 pf-clbulk_**.css追加css　*/
/* -------------------------------------- ページ内リンク位置調整 */
#top{
  margin-top: 0;
  padding-top: 0;
}
#item24, #item12 {
  margin-top: -70px;
  padding-top: 70px;
}
/* -------------------------------------- パンくずリスト .path */
nav.path {
  padding: 0;
}
nav.path ul {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 2vw;
}
nav.path li {
  font-size: .8em;
  white-space: nowrap;
}
nav.path li::after {
  content: "\03e";
  padding: 0 .5em;
}
nav.path li:last-child::after {
  content: "";
}
/* -------------------------------------- 共通パーツ調整 */
.eco_lp .fix_head {
  background-image: -webkit-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
}
/* -------------------------------------- エコパックキャッチ .eco-catch */
.eco-catch {
  padding: 0;
  background-image: url("../clsc-img/all/eco_catch.jpg");
  background-repeat: no-repeat;
  background-position: right -10vw top;
  background-size: contain;
}
.eco-catch h2.img-ttl {
  padding-top: 40vw;
  background-image: url("../clsc-img/all/eco_catch-ttl.png");
  background-position: left top;
}
/* -------------------------------------- エコパックについて .about-eco */
.about-eco h2 {
  padding-left: .5em;
  color: #20b068;
  border-left: 5px solid #20b068;
}
.about-eco h3 {
  padding: 14vw 0 0 22vw;
  color: #301d0c;
  background-image: url("../clsc-img/all/eco_q-list-icon.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 20vw;
  border-bottom: 2px solid #301d0c;
}
.about-eco h3:nth-of-type(4) {
  padding-top: 6vw;
}
.about-eco ol {
  margin: 1.5em auto;
}
.about-eco .minbox img {
  display: block;
  width: 50vw;
  margin: 0 auto;
}
/* -------------------------------------- DVDオンライン選択ボタン .dvd-olbox */
.dvd-olbox .vlbtn {
  position: relative;
}
.dvd-olbox .vlbtn a, 
.dvd-olbox .vlbtn .buybtn {
  display: block;
  min-height: 15vw;
  margin-bottom: 1em;
  color: #430c00;
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.2;
  background-color: #faffef;
  background-repeat: no-repeat;
  border: 1px solid #430c00;
  border-radius: .5em; 
  position: relative;
}
.dvd-olbox .vlbtn.both .buybtn {
  width: 100%;
  height: 20vw;
}
.dvd-olbox .vlbtn.dvd .buybtn {
  width: 100%;
  height: 15vw;
}
.dvd-olbox .vlbtn.both a, 
.dvd-olbox .vlbtn.both .buybtn {
  padding: .5em 40vw .5em 1em;
  background-image: url("../clsc-img/all/eco_btn_dvd-ol_img.png");
  background-size: auto 14vw;
  background-position: right 9vw bottom 1vw;
}
.dvd-olbox .vlbtn.dvd a,
.dvd-olbox .vlbtn.dvd .buybtn {
  padding: .5em 30vw .5em 1em;
  background-image: url("../clsc-img/all/eco_btn_dvd_img.png");
  background-size: auto 12vw;
  background-position: right 14vw bottom 1vw;
}
/*.dvd-olbox .vlbtn a::before, */
.dvd-olbox .vlbtn::before {
  content: "";
  width: 5vw;
  height: 5vw;
  border-top: 1px solid #430c00;
  border-right: 1px solid #430c00;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  z-index: 10;
}
.dvd-olbox .vlbtn a .txt_sm {
  display: block;
  padding-right: 2em;
  text-align: right;
  font-weight: normal;
}
.dvd-olbox .vlbtn .btntxt {
  display: block;
  width: 60%;
  font-size: .9em;
  font-weight: bold;
  line-height: 1.2;
  position: absolute;
  left: 4vw;
  top: 2vw;
  z-index: 10;
  pointer-events: none;
}
.dvd-olbox .vlbtn .btn-price {
  display: block;
  width: 22vw;
  font-size: .8em;
  position: absolute;
  right: 44vw;
  bottom: 2vw;
  z-index: 10;
  pointer-events: none;
}
.dvd-olbox .vlbtn.dvd .btn-price {
  right: 34vw;
}
/* ----------------------------------------------------------------------------------------------------------------------------- */
/*　PCレイアウトここから　*/
/* ----------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 481px) {
/* -------------------------------------- パンくずリスト .path */
nav.path {
  width: 980px;
  margin: 0 auto;
  padding: 1em 0 0;
}
nav.path ul {
  margin: 0;
}
/* -------------------------------------- ページ内リンク位置調整 */
#item24, #item12 {
  margin-top: 0;
  padding-top: 0;
}
/* -------------------------------------- 共通パーツ調整 */
.fix_head {
  background-image: none;
}
.eco_lp header {
  background-image: -webkit-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(3,121,84,1.00) 0%,rgba(2,103,59,1.00) 100%);
}
/* -------------------------------------- エコパックキャッチ .eco-catch */
.eco-catch {
  background-image: url("../clsc-img/all/eco_catch.jpg");
  background-repeat: no-repeat;
  background-position: right calc(50% - 250px) top;
  background-size: 480px 320px;
}
.eco-catch .full-w {
  padding: 0;
}
.eco-catch h2.img-ttl {
  padding-top: 320px;
  background-image: url("../clsc-img/all/eco_catch-ttl.png");
  background-position: left top;
  background-size: 600px 320px;
}
/* -------------------------------------- エコパックについて .about-eco */
.about-eco {
  width: 750px;
  margin: 0 auto;
}
.about-eco h2 {
  /*padding-left: .5em;
  color: #20b068;*/
  font-size: 3.2rem;
  border-left: 10px solid #20b068;
}
.about-eco h3 {
  width: 720px;
  margin: 0 auto 1em;
  padding: 82px 0 0 140px;
  font-size: 3rem;
  /*color: #301d0c;
  background-image: url("../clsc-img/all/eco_q-list-icon.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  border-bottom: 2px solid #301d0c;*/
  background-size: 120px 120px;
}
.about-eco h3:nth-of-type(4) {
  padding-top: 82px;
}
.about-eco li {
  margin-bottom: 1em;
  overflow: hidden;
}
.about-eco h4 {
  width: 340px;
  margin-bottom: 3em;
  float: left;
}
.about-eco .minbox img {
  width: 290px;
  display: inline;
  margin: 0 0 0 1em;
  float: right;
}
.about-eco .minbox p.mt-nega {
  margin-top: -170px;
}
.about-eco .clear {
  margin-top: 30px;
}
/* -------------------------------------- DVDオンライン選択ボタン .dvd-olbox */
.dvd-olbox {
  width: 800px;
  margin: 60px auto;
}
.kouhan_lp .dvd-olbox {
  width: 800px;
  margin: 60px auto 30px;
}
.dvd-olbox .vlbtn a, 
.dvd-olbox .vlbtn .buybtn {
  width: 800px;
  min-height: 100px;
  margin-bottom: 30px;
  font-size: 3rem;
  text-align: left;
  border: 2px solid #430c00;
  border-radius: 10px; 
}
.dvd-olbox .vlbtn.both .buybtn {
  width: 800px;
  height: 106px;
}
.dvd-olbox .vlbtn.dvd .buybtn {
  width: 800px;
  height: 100px;
}
.dvd-olbox .vlbtn.both a, 
.dvd-olbox .vlbtn.both .buybtn {
  padding: .5em 350px .5em 1em;
  background-image: url("../clsc-img/all/eco_btn_dvd-ol_img.png");
  background-size: 260px 100px;
  background-position: right 80px bottom;
}
.dvd-olbox .vlbtn.dvd a, 
.dvd-olbox .vlbtn.dvd .buybtn {
  padding: 1em 240px 1em 1em;
  background-image: url("../clsc-img/all/eco_btn_dvd_img.png");
  background-size: 120px 80px;
  background-position: right 120px bottom 5px;
}
/*.dvd-olbox .vlbtn a::before,*/ 
.dvd-olbox .vlbtn::before {
  content: "";
  width: 30px;
  height: 30px;
  border-top: 2px solid #430c00;
  border-right: 2px solid #430c00;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: .5s;
}
/*.dvd-olbox .vlbtn a:hover::before, */
.dvd-olbox .vlbtn:hover::before {
  right: 20px;
}
.dvd-olbox .vlbtn:hover {
  opacity: .8;
}
.dvd-olbox .vlbtn a .txt_sm {
  display: inline-block;
  padding-right: 0;
  text-align: right;
  font-weight: normal;
}
.dvd-olbox .vlbtn .btntxt {
  display: block;
  width: 420px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  position: absolute;
  left: 30px;
  top: 15px;
  z-index: 10;
  pointer-events: none;
}
.dvd-olbox .vlbtn.dvd .btntxt {
  top: 30px;
}
.dvd-olbox .vlbtn .btn-price {
  display: block;
  width: 130px;
  font-size: 2.4rem;
  position: absolute;
  right: 370px;
  bottom: 18px;
  z-index: 10;
}
.dvd-olbox .vlbtn.dvd .btn-price {
  right: 240px;
  bottom: 30px;
}

}