@charset "UTF-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                       */
/* Copyright (C) Kiyonobu Horita @ WEBPLUS Inc.                 */
/*--------------------------------------------------------------*/


/* ========================================================

　header

=========================================================== */

.papertube-types header .container {
    top: 53%;
}

.papertube-types header h2 {
    height: 6.0rem;
    margin-left: -2.0rem;
    padding-left: 6.0rem;
    background: url("../images/papertubes/eyecatch_papertube.png") right center no-repeat;
    background-size: auto 6.0rem;
    color: rgba(255, 255, 255, 1.0);
    font-weight: 300;
    text-shadow: none;
    text-align: left;
    line-height: 5.5rem;
}

@media only screen and (min-width: 576px) {

    .papertube-types header h2 {
        margin-left: -15.0rem;
        padding-left: 20.0rem;
    }

}

@media only screen and (min-width: 768px) {

    .papertube-types header .container {
        top: 55.5%;
    }

    .papertube-types header h2 {
        margin-left: -20.0rem;
        margin-right: 5%;
        padding-left: 25.0rem;
    }

}

@media only screen and (min-width: 992px) {

    .papertube-types header h2 {
        height: 8.0rem;
        padding-left: 30.0rem;
        background-size: auto 8.0rem;
        font-size: 4.0rem;
        line-height: 7.5rem;
    }

}

@media only screen and (min-width: 1200px) {

    .papertube-types header h2 {
        height: 9.0rem;
        margin-left: -200%;
        padding-left: 0;
        padding-right: 75.5rem;
        background-size: auto 9.0rem;
        text-align: right;
        line-height: 8.5rem;
    }

}

/*　スクロールボタン
----------------------------------------------------------- */
#scrollNavi {
    margin-top: 5.0rem;
    text-align: center;
}

#scrollNavi ul {
    display: block;
    list-style: none;
}

#scrollNavi li {
    display: inline-block;
}

#scrollNavi ul:nth-child(1) li:nth-child(-n+3) {
    margin-bottom: 1.5rem;
}

#scrollNavi img {
    width: 3.0rem;
    height: auto;
    margin-right: 1.75rem;
}

#scrollNavi ul:nth-child(2) li:nth-child(2) img {
    margin-right: 0.25rem;
}

#scrollNavi a {
    display: block;
    width: 14.0rem;
    height: 4.0rem;
    padding: 0 0.5rem;
    border-radius: 2.0rem;
    background-color: rgba(240, 125, 50, 1.0);
    color: rgba(255, 255, 255, 1.0);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 3.4rem;
    -webkit-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#scrollNavi ul:nth-child(2) li:nth-child(2) a {
    letter-spacing: -0.1rem;
}

#scrollNavi a:hover {
    background-color: rgba(240, 125, 50, 0.7);
}

#scrollNavi a img {
    border-radius: 50%;
    background-color: rgba(240, 125, 50, 1.0);
    -webkit-transform: rotateZ(0deg);
    -ms-transform: rotate(0deg);
    transform: rotateZ(0deg);
    -webkit-transition: transform 1.0s ease-in-out;
    -o-transition: transform 1.0s ease-in-out;
    -webkit-transition: -webkit-transform 1.0s ease-in-out;
    transition: -webkit-transform 1.0s ease-in-out;
    transition: transform 1.0s ease-in-out;
    transition: transform 1.0s ease-in-out, -webkit-transform 1.0s ease-in-out;
}

#scrollNavi a:hover img {
    background-color: rgba(240, 125, 50, 0.7);
    opacity: 1.0;
    -webkit-transform: rotateZ(360deg);
    -ms-transform: rotate(360deg);
    transform: rotateZ(360deg);
}

/* 平巻紙管のボタンカラー */
#scrollNavi ul:nth-child(2) li:nth-child(1) a {
    background-color: rgba(0, 150, 80, 1.0);
}

#scrollNavi ul:nth-child(2) li:nth-child(1) a:hover {
    background-color: rgba(0, 150, 80, 0.7);
}

#scrollNavi ul:nth-child(2) li:nth-child(1) a img {
    background-color: rgba(0, 150, 80, 1.0);
}

#scrollNavi ul:nth-child(2) li:nth-child(1) a:hover img {
    background-color: rgba(0, 150, 80, 0.7);
}

/* リサイクル紙管のボタンカラー */
#scrollNavi ul:nth-child(2) li:nth-child(2) a {
    background-color: rgba(195, 205, 35, 1.0);
}

#scrollNavi ul:nth-child(2) li:nth-child(2) a:hover {
    background-color: rgba(195, 205, 35, 0.7);
}

#scrollNavi ul:nth-child(2) li:nth-child(2) a img {
    background-color: rgba(195, 205, 35, 1.0);
}

#scrollNavi ul:nth-child(2) li:nth-child(2) a:hover img {
    background-color: rgba(195, 205, 35, 0.7);
}

/*　コンテンツ部
----------------------------------------------------------- */
/* タイトル */
#papertubeTypes h2 {
    padding-bottom: 0.5rem;
    font-size: 2.4rem;
}

/* border */
#papertubeTypes aside {
    max-width: 28.0rem;
    height: 0.5rem;
    margin-bottom: 1.0rem;
    border-radius: 0.25rem;
    background-color: rgba(240, 125, 50, 1.0);
}

/* 平巻紙管のborderカラー */
#papertubeTypes #blk04 aside {
    background-color: rgba(0, 150, 80, 1.0);
}

/* リサイクル紙管のborderカラー */
#papertubeTypes #blk05 aside {
    background-color: rgba(195, 205, 35, 1.0);
}

/* 写真 */
#papertubeTypes div[id^="blk"] figure {
    text-align: center;
}

#papertubeTypes div[id^="blk"] figure img {
    width: 100%;
    max-width: 45.0rem;
    height: auto;
    margin: 0 auto;
}

/* テキスト */
#papertubeTypes p {
    line-height: 2.8rem;
    text-align: justify;
}

/* スペック */
#papertubeTypes dt {
    margin-top: 2.0rem;
    font-size: 1.8rem;
    font-weight: 400;
}

#papertubeTypes dd {
    margin-left: 1.0rem;
    margin-bottom: 0;
}

/* 接合紙管のしくみ */
#plot .inner {
    padding: 1.0rem 1.5rem;
    border: 0.5rem solid rgba(195, 205, 210, 1.0);
    font-size: 1.5rem;
}

#plot h3 {
    font-size: 2.2rem;
}

#plot figure {
    margin: 0;
    margin-bottom: 1.0rem;
    text-align: center;
}

#plot img {
    margin: 0 auto;
    max-width: 25.0rem;
}

#plot p {
    line-height: 2.4rem;
}

@media only screen and (min-width: 375px) {

    /*　紙管の種類
    ----------------------------------------------------------- */
    #scrollNavi img {
        margin-right: 2.5rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(2) img {
        margin-right: 0.75rem;
    }

    #scrollNavi a {
        width: 17.0rem;
        font-size: 1.7rem;
    }

}

@media only screen and (min-width: 576px) {

    /*　紙管の種類
    ----------------------------------------------------------- */
    #scrollNavi ul:nth-child(1) li:nth-child(-n+3) {
        margin-bottom: 1.5rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(1) {
        margin-right: 3.0vw;
    }

    #scrollNavi img {
        margin-right: 2.25rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(2) img {
        margin-right: 0.5rem;
    }

    #scrollNavi a {
        width: 16.5rem;
    }

}

@media only screen and (min-width: 768px) {

    /*　紙管の種類
    ----------------------------------------------------------- */
    #scrollNavi ul:nth-child(1) li:nth-child(-n+3) {
        margin-bottom: 2.0rem;
    }

    #scrollNavi img {
        width: 4.5rem;
        margin-right: 2.75rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(2) img {
        margin-right: 0.75rem;
    }

    #scrollNavi a {
        width: 22.0rem;
        height: 6.0rem;
        padding: 0 0.75rem;
        border-radius: 3.0rem;
        font-size: 2.0rem;
        font-weight: 300;
        line-height: 6.0rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(2) a {
        letter-spacing: inherit;
    }

    /* 写真 */
    #papertubeTypes div[id^="blk"] figure {
        text-align: inherit;
    }

    #papertubeTypes #blk02 figure,
    #papertubeTypes #blk04 figure {
        text-align: right;
    }

    /* 接合紙管のしくみ */
    #plot .inner {
        padding: 1.0rem 2.0rem;
    }

    #plot figure {
        width: 40%;
        margin-right: 4.0rem;
        margin-bottom: 0;
    }

    #plot p {
        width: 60%;
    }

}

@media only screen and (min-width: 992px) {

    /*　紙管の種類
    ----------------------------------------------------------- */
    #scrollNavi ul:nth-child(1) li:nth-child(-n+3) {
        margin-bottom: 3.0rem;
    }

    #scrollNavi li:nth-child(1),
    #scrollNavi li:nth-child(2),
    #scrollNavi li:nth-child(4) {
        margin-right: 3.0rem;
    }

    #scrollNavi img {
        margin-right: 4.0rem;
    }

    #scrollNavi ul:nth-child(2) li:nth-child(2) img {
        margin-right: 1.5rem;
    }

    #scrollNavi a {
        width: 25.0rem;
        font-size: 2.2rem;
    }

    /* 写真とテキストの間の余白 */
    #papertubeTypes #blk01 .col-md-7,
    #papertubeTypes #blk03 .col-md-7,
    #papertubeTypes #blk05 .col-md-7 {
        padding-left: 5.0rem;
    }

    #papertubeTypes #blk02 .col-md-7,
    #papertubeTypes #blk04 .col-md-7 {
        padding-right: 5.0rem;
    }

    /* 接合紙管のしくみ */
    #plot .inner {
        padding: 2.0rem 3.0rem;
    }

    #plot p {
        padding-left: 2.0rem;
    }

}

@media only screen and (min-width: 1200px) {

    /*　紙管の種類
    ----------------------------------------------------------- */
    #scrollNavi li:nth-child(1),
    #scrollNavi li:nth-child(2),
    #scrollNavi li:nth-child(4) {
        margin-right: 4.0rem;
    }

    /* 接合紙管のしくみ */
    #plot .inner {
        padding: 2.0rem 3.5rem;
    }

    #plot figure {
        margin-left: 4.0rem;
    }

    #plot p {
        padding-left: 3.5rem;
    }

    /* 1200px以上で表示エリアを800pxに調整 */
    #plot > div {
        padding-left: 7.5rem;
        padding-right: 7.5rem;
    }

}



/* ---- End of file --------------------------------------- */