@charset "utf-8";

/* -------------------------------------------------
    クリエイティブ
----------------------------------------------------*/
.creative-contents-wrap {
    margin-top: 50px;
}

/* ---------- クリエイティブ Box --------- */
.creative-box {
    position: relative;
    padding: 60px 25px;
    margin: auto;
    max-width: 1200px;
}

.creative-box__center {
    padding: 60px 20px;
    margin: auto;
    max-width: 900px;
}

.creative-box__title {
    font-size: 2.4em;
    font-feature-settings: "palt";
    padding: 10px 0 30px 0;
}

.creative-box__copy {
    font-size: 1.3em;
    line-height: 1.8;
    color: #fff;
    padding: 10px 0;
    font-feature-settings: "palt";
}

.creative-box__img {
    width: 50%;
}

.creative-box__text {
    display: block;
    width: 45%;
}

.creative-box__left .creative-box__text {
    margin-left: 5%;
}

.creative-box__right .creative-box__text {
    margin-right: 5%;
}

#creative-box__last .page-contents-wrap {
    padding: 50px 0;
}

/* ---------- クリエイティブ Box - チェックボックス ---------- */
.creative-box__role {
    margin-top: 30px;
}

.creative-box__check {
    width: 48%;
    margin: 0 2% 2% 0;
}

#creative-box__one .creative-box__check {
    color: rgba(42, 135, 211, 1);
}

#creative-box__two .creative-box__check {
    color: rgba(250, 180, 56, 1);
}

#creative-box__three .creative-box__check {
    color: rgba(32, 164, 137, 1);
}

#creative-box__four .creative-box__check {
    color: rgba(243, 81, 127, 1);
}

/* ---------- クリエイティブ Box - 背景画像 ---------- */
.creative-box-wrap {
    width: 100%;
    display: block;
}

#creative-box__one {
    background: linear-gradient(-90deg, rgba(42, 135, 211, .85), rgba(42, 135, 211, .9), rgba(42, 135, 211, .3)),
        url('../img/creative/creative-bg-01-1500x500.jpg');
    background-position: left center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
}

#creative-box__two {
    background: linear-gradient(-90deg, rgba(250, 180, 56, 0.3), rgba(250, 180, 56, .9), rgba(250, 180, 56, .85)),
        url('../img/creative/creative-bg-02-1500x500.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

#creative-box__three {
    background: linear-gradient(-90deg, rgba(32, 164, 137, .85), rgba(32, 164, 137, .9), rgba(32, 164, 137, .3)),
        url('../img/creative/creative-bg-03-1500x500.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

#creative-box__four {
    background: linear-gradient(-90deg, rgba(243, 81, 127, 0.3), rgba(243, 81, 127, .9), rgba(243, 81, 127, .85)),
        url('../img/creative/creative-bg-04-1500x500.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#creative-box__last {
    background: linear-gradient(rgba(25, 173, 222, .6), rgba(25, 173, 222, 1)),
        url('../img/creative/creative-bg-04-1500x500.jpg');
    background-position: right center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* ---------- クリエイティブ 見出しアイコン --------- */
.font-icon {
    font-size: 1.4em;
    margin-right: 10px;
}

/* ---------- クリエイティブ 明朝コピー --------- */
.creative__copy {
    margin: auto;
    display: block;
    font-size: 3em;
    font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-feature-settings: "palt";
    color: #666666;
    letter-spacing: 2px;
    line-height: 1.4;
}

/* ----- タイトルエリア（背景画像含む） ----- */
.creative__title {
    padding-top: 100px;
    padding-bottom: 10px;
    background-image: url('../img/creative_movie/slider_creative-movie.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


.printing__title {
    padding-top: 100px;
    padding-bottom: 10px;
    background-image: url('../img/creative/headimg_printing.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.web__title {
    padding-top: 100px;
    padding-bottom: 10px;
    background-image: url('../img/creative/headimg_web.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
    position: relative;
}


.package__title {
    padding-top: 100px;
    padding-bottom: 10px;
    background-image: url('../img/creative/headimg_package.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
    position: relative;
}




/* -------------------------------------------------
    クリエイティブ一覧
----------------------------------------------------*/

/* ---------- 会社情報一覧 ヘッダーイメージエリア ----------*/
.creative-head {
    background: linear-gradient(-45deg, rgba(42, 135, 211, .5), rgba(149, 155, 211, .9)),
        url('../img/corporate/corporate_head_img_bg.jpg');
}

/* -------------------------------------------------
    クリエイティブ - 印刷媒体
----------------------------------------------------*/
/* ----- サイズ関係 -----*/
#Media .page-contents-wrap {}

.media__box {
    width: 48.5%;
    margin-bottom: 30px;
}

.media__box--left {
    margin-right: 1%;
}

.media__box--right {
    margin-left: 1%;
}

.media__box_three {

    margin-bottom: 30px;
}


/* ----- テキスト関係 -----*/
.media__box__title {

    font-size: 1.5em;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
}

.media__box__title .fa {
    padding-right: 8px;
}

.media__box__text {
    margin-top: 20px;
}

.media__list__circle {
    position: relative;
    margin-left: 20px;
    font-size: 1.1em;
}

.media__list__circle:before {
    content: '●';
    position: absolute;
    left: -20px;
    color: #2a87d3;
}



.facility-box__text-area {
    margin-top: 35px;
}


.marketer {
    margin: 5rem auto 0rem auto;
    border: 1px solid #aaa;
    padding: 5rem 5rem 2rem 5rem;

}



.marketing-expart {
    margin: 5rem auto 0rem auto;

}





/* ---------- 工場・設備一覧 明朝コピー --------- */
.facility__copy {
    display: block;
    padding: 0 0 0 20px;
    font-size: 3em;
    font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
    font-weight: normal;
    font-feature-settings: "palt";
    letter-spacing: 1px;
    color: #666666;
    line-height: 1.4;
    border-left: solid 5px #2a87d3;
}






.offset-print_title {
    color: #111;
    line-height: 1.4;
    font-size: 2.4rem;
    margin-bottom: 5rem;
    font-weight: 500;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
}




.offset-print {
    margin-bottom: 10rem;
    border: 1px solid #ccc;
    padding: 1rem 10rem 5rem 10rem;
    position: relative;

    transition: all 0.3s ease-in-out;
    overflow: visible;
}





/*線の設定*/
.offset-print::before,
.offset-print::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    border: solid #aaa;
    width: 150px;
    height: 150px;
    /*アニメーションの指定*/
    transition: all 0.3s ease-in-out;
}

/*線の位置と形状*/
.offset-print::before {
    top: 8px;
    left: -10px;
    border-width: 1px 0 0 1px;
}

/*線の位置と形状*/
.offset-print::after {
    bottom: 8px;
    right: -10px;
    border-width: 0 1px 1px 0;
}





.flow__title {
    color: #292e33;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 3rem;
}

.flow__title--en {
    font-size: 3.6rem;
    font-style: oblique 45deg;
}


.flow__title--en:first-letter {
    color: #2a87d3;
    padding: .5rem;
}





.flow__title--ja {
    color: #2a87d3;
    font-size: 1.4rem;
}

.flow__strength--wrapper {
    padding: 40px 0;
}

.flow__strength--icon {
    position: relative;
    width: 100%;
    height: 160px;
}

.flow__strength--icon span {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border: 2px solid #7f8b96;
    border-radius: 80px;
    color: #7f8b96;
    font-size: 6rem;
    background: #fff;
}

.flow__strength--icon span i {
    font-size: 8rem;
}

.flow__strength--icon span i.fa {
    font-size: 5.5rem;
}


/*線の設定
.flow__strength--icon span:before {
    position: absolute;
    top: 50%;
    left: -120px;
    width: 120px;
    height: 2px;
    background: #7f8b96;
    content: "";
}
*/



.flow__strength--icon.icon02 span:before {
    left: 158px;
}

.flow__strength--icon.icon02 span {
    right: auto;
    left: 0;
}



.flow__strength--icon {
    position: relative;
}

.flow__strength--icon span {}

.flow__strength--icon.flow_one span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "1";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;
}




.flow__strength_one,
.flow__strength_two,
.flow__strength_three,
.flow__strength_four,
.flow__strength_five,
.flow__strength_six,
.flow__strength_seven {
    position: relative;
    display: block;
}



.flow__strength_two::after {
    content: '';
    position: absolute;
    left: 20%;
    top: -110px;
    /*四角形を傾けます*/
    transform: skewY(-17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;


    background: rgba(127, 139, 150, .4);

    z-index: -1;
}


.flow__strength_three::after {
    content: '';
    position: absolute;
    left: 20%;
    bottom: 140px;
    /*四角形を傾けます*/
    transform: skewY(17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;
    background: rgba(127, 139, 150, .4);

    z-index: -1;
}



.flow__strength_four::after {
    content: '';
    position: absolute;
    left: 20%;
    top: -110px;
    /*四角形を傾けます*/
    transform: skewY(-17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;
    background: rgba(127, 139, 150, .4);
    z-index: -1;
}



.flow__strength_five::after {
    content: '';
    position: absolute;
    left: 20%;
    bottom: 140px;
    /*四角形を傾けます*/
    transform: skewY(17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;
    background: rgba(127, 139, 150, .4);
    z-index: -1;
}


.flow__strength_six::after {
    content: '';
    position: absolute;
    left: 20%;
    top: -110px;
    /*四角形を傾けます*/
    transform: skewY(-17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;
    background: rgba(127, 139, 150, .4);
    z-index: -1;
}


.flow__strength_seven::after {
    content: '';
    position: absolute;
    left: 20%;
    bottom: 140px;
    /*四角形を傾けます*/
    transform: skewY(17deg);
    transform-origin: top right;

    width: 60%;
    height: 2px;
    background: rgba(127, 139, 150, .4);
    z-index: -1;
}








.flow__strength--icon.flow_two span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "2";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;

}

.flow__strength--icon.flow_three span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "3";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;

}

.flow__strength--icon.flow_four span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "4";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;

}

.flow__strength--icon.flow_five span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "5";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;
}



.flow__strength--icon.flow_six span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "6";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;

}

.flow__strength--icon.flow_seven span::after {
    position: absolute;
    bottom: 0px;
    right: -15px;
    content: "7";
    color: rgba(42, 135, 211, 1);
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    border: 1px solid #7f8b96;
    width: 5rem;
    height: 5rem;
    line-height: 1.5;
    text-align: center;
    background: #fff;
    border-radius: 2.5rem;

}



.flow__strength--cnt h4 {
    font-size: 2.2rem;
    font-weight: 600;
}

.flow__strength--cnt h4 span {
    margin-left: 1rem;
    display: inline-block;
}


.flow__strength--cnt i {
    float: left;
    font-size: 48px;
}


.flow__strength--cnt {}



.print_foot_bnr .kuwashiku__btn {
    display: inline-block;
    margin-bottom: 5rem;
}


.factory-box {
    border: 1px solid #ccc;
    padding: 3rem 3rem 0rem 3rem;
    margin-bottom: 10rem !important;
    background: #f7f9f9;
}

h3.factory_title {
    line-height: 1.4;
    font-size: 2.4rem;
    font-weight: 200;
    padding-bottom: 1rem;
}


.dtp-contact-box {
    border: 1px solid #ccc;
    padding: 3rem 3rem 0rem 3rem;
    margin-bottom: 5rem;
    background: #f7f9f9;
}


.archive-box {
    margin-bottom: 5rem;
}


#web-works {

    margin-bottom: 5rem;

}





.entry .web-works_title h2 {
    color: #111;
    font-size: 1.8em;
    margin-top: 2em;
    margin-bottom: 1rem;
    font-weight: 400;
    background: none;
    padding: 0;
}




.design-archive-wrap {
    margin-bottom: 10rem;
}


.archive-title-lead {

    color: #333;
    font-size: 13px;
    line-height: 1.1;

}


.web-info-wrap {
    margin-top: 5rem;
}


.works-name-wrap h3 {
    margin-bottom: 0;
}

h3.works-name a {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    line-height: 1.1;

}

.cat-tag a {
    font-size: 10px;
    display: inline-block;
    text-decoration: none;
    color: #555;
    border: solid 1px #aaa;
    padding: 0 5px;
    border-radius: 3px;
}


#design-archive {
    margin-top: 4rem;
    border-top: 1px dotted #666;
    padding-top: 4rem;
}

.flow_one span {
    background-image: url('../img/creative/flow_icon01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.flow_two span {
    background-image: url('../img/creative/flow_icon02.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.flow_three span {
    background-image: url('../img/creative/flow_icon03.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.flow_four span {
    background-image: url('../img/creative/flow_icon04.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.flow_five span {
    background-image: url('../img/creative/flow_icon05.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.flow_six span {
    background-image: url('../img/creative/flow_icon06.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.flow_seven span {
    background-image: url('../img/creative/flow_icon07.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}



/* -------------------------------------------------
    クリエイティブ - 動画制作
----------------------------------------------------*/
/* ----- タイトルエリア（背景画像含む） ----- */
.creative-movie__title {
    padding-top: 65px;
    padding-bottom: 10px;
    background-image: url('../img/creative_movie/headimg_movie.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
}

.Movie__contents {
    padding: 70px 0;
}

/* ---------- 動画制作アイコンエリア ----------*/
.Movie-IconArea__box {
    width: 25%;
}

.Movie-IconArea__box--1,
.Movie-IconArea__box--2,
.Movie-IconArea__box--3 {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
}

.Movie-IconArea__box--4 {
    border: solid 1px #ddd;
}

.Movie-IconArea__box--5,
.Movie-IconArea__box--6,
.Movie-IconArea__box--7 {
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
}

.Movie-IconArea__box--8 {
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

/* ---------- 動画についてのお問い合わせ ---------- */
.Movie__contact {
    background: url('../img/creative_movie/movie_img_contact.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    padding: 60px 0;
}

.Movie__contact__title {
    font-size: 2.2em;
}



/* ---------- youtube 埋め込みレスポンシブ化 ---------- */

.movarea {
    width: 70%;
    margin: 0 auto 0 auto;
}

.movwrap {
    width: 100%;
    margin: 0;
    height: 0;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}

.movwrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.text-center {
    text-align: center !important;
}


.movebnr {
    text-align: center;

}


.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    margin-bottom: 10px;
}

.videowrapper iframe {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;
    border: none;
}





/* -------------------------------------------------
    クリエイティブ - 包装印刷
----------------------------------------------------*/


.bnr_package {
    max-width: 220px;
    margin: 0 auto;
}



.package_longimgarea {
    position: relative;
    margin-bottom: 13rem;
    display: flex;
    width: 100%;
}



.package_longimg {
    width: 90%;
}

.package_longimg-right {
    width: 90%;
    margin-left: auto;
}



.package_longimgLeftText {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: -5rem;

    background: #fff;
    padding: 1rem 3rem;
    width: calc(420px + 8vw);
    border-radius: 2rem;
}


.package_longimgRightText {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -5rem;

    background: #fff;
    padding: 1rem 3rem;
    width: calc(420px + 8vw);
    border-radius: 2rem;
}


#nealpeter {
    padding-top: 3rem;
    position: relative;
    margin-bottom: 10rem;
}


.nealpeter_text {

    position: relative;
}

.nealpeter_text:before {
    position: absolute;
    top: 23px;
    right: 0;
    left: -6px;
    z-index: -1;
    display: block;
    margin-left: -5.91716%;
    width: 100vw;
    height: 100vw;
    background-color: #fff;
    content: "";
}

.packline {

    border: 1px solid #111;
}



.coffee_link {
    margin-top:2rem;
}
.coffee_link a {
    border: 3px double #048ce2;
    font-size:2rem;
    padding:2rem;
    font-weight:700;
    text-align:right;
}

.coffee_link a:hover {
    border: 3px double #048ce2;
    background:#048ce2;
    color:#fff;
    
}


.voc_area {
    display: flex;
    gap: 0 3rem;
}


.sqts {
    width:100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}






/* -------------------------------------------------
    @メディアクエリ 1200px以下
----------------------------------------------------*/
@media (max-width: 1200px) {

    .offset-print {
        padding: 0rem 1rem 5rem 1rem;
    }

}




/* -------------------------------------------------
    メディアクエリ　991px 以下
----------------------------------------------------*/

@media (min-width: 769px) {

    .nealpeter_text:before {
        top: -25%;
        right: auto;
        left: 20%;
        margin: 0;
        padding-top: 0;
        width: 77.5vw;
        height: 140%;
        background-color: #f5f5f5;


    }



}


@media (max-width: 991px) {

    .facility__copy {
        font-size: 2.7em;
    }


    .movarea {
        width: 80%;
    }



    .litxt {
        width: 100%;
    }


    .package_longimgarea {
        margin-bottom: 8rem;
        display: block;
    }

    .package_longimg {
        width: 100%;
    }


    .package_longimg-right {
        width: 100%;
    }

    .package_longimgLeftText,
    .package_longimgRightText {
        position: relative;
        left: 0;
        bottom: 0rem;
        padding: 0rem;
        width: 100%;
        background: none;
    }



    .bnr_package {
        margin-left: 0;
    }

    .flow__strength--icon {
        height: 140px;
    }

    .flow__strength--icon span {
        width: 120px;
        height: 120px;
        font-size: 2.4rem;
    }

    .flow__strength--icon span:before {
        position: static;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        background: #fff;
        content: "";
    }




    .flow__strength--icon.flow_one span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;
    }

    .flow__strength--icon.flow_two span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;

    }

    .flow__strength--icon.flow_three span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;

    }

    .flow__strength--icon.flow_four span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;

    }

    .flow__strength--icon.flow_five span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;
    }



    .flow__strength--icon.flow_six span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;

    }

    .flow__strength--icon.flow_seven span::after {
        font-size: 2rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.8;
        text-align: center;
        background: #fff;
        border-radius: 2rem;

    }




    .flow__strength_two::after {
        left: 10%;
        top: -120px;
        transform: skewY(-22deg);

        width: 80%;
    }


    .flow__strength_three::after {
        left: 10%;
        bottom: 120px;
        transform: skewY(22deg);

        width: 80%;
    }



    .flow__strength_four::after {
        left: 10%;
        top: -120px;
        transform: skewY(-21deg);

        width: 80%;
    }



    .flow__strength_five::after {
        left: 10%;
        bottom: 115px;
        transform: skewY(22deg);

        width: 80%;
    }


    .flow__strength_six::after {
        left: 10%;
        top: -120px;
        transform: skewY(-21deg);

        width: 80%;
    }


    .flow__strength_seven::after {
        left: 10%;
        bottom: 115px;
        transform: skewY(22deg);

        width: 80%;
    }





}




@media (max-width: 768px) {
    .longimgarea {
        padding: 0 6.94444%;
    }



}


/* -------------------------------------------------
    @メディアクエリ 767px以下
----------------------------------------------------*/
@media (max-width: 767px) {

    /* ---------- クリエイティブ Box --------- */
    .creative-box {
        position: relative;
        padding: 30px 40px;
    }

    .creative-box__center {
        padding: 30px 40px;
        margin: auto;
    }

    .creative-box__img {
        width: 100%;
    }

    .creative-box__text {
        display: block;
        width: 100%;
    }

    .creative-box__title {
        font-size: 2em;
        line-height: 1.5;
        font-feature-settings: "palt";
        padding: 15px 0 10px 0;
    }

    .creative-box__copy {
        font-size: 1.3em;
        padding: 5px 0;
    }

    .creative-box__left .creative-box__text {
        margin-left: 0;
    }

    .creative-box__right .creative-box__text {
        margin-right: 0;
    }

    .creative-box__check {
        font-size: 1.2em;
    }

    /* ---------- クリエイティブ Box - 背景画像 ---------- */
    #creative-box__one {
        background: rgba(42, 135, 211, 1);
    }

    #creative-box__two {
        background: rgba(250, 180, 56, 1);
    }

    #creative-box__three {
        background: rgba(32, 164, 137, 1);
    }

    #creative-box__four {
        background: rgba(243, 81, 127, 1);
    }

    /* -------------------------------------------------
    クリエイティブ - 印刷媒体
    ----------------------------------------------------*/
    .media__box {
        width: 100%;
    }

    .media__box--left {
        margin-right: 0;
    }

    .media__box--right {
        margin-left: 0;
    }

    .media__box_three {
        width: 100%;
    }


    /* -------------------------------------------------
    クリエイティブ - 動画制作
    ----------------------------------------------------*/
    /* ---------- 動画についてのお問い合わせ ---------- */
    .Movie__contact__title {
        font-size: 2em;
    }

    .Movie__contents {
        padding: 40px 0;
    }



    /* -------------------------------------------------
    クリエイティブ - WEB
    ----------------------------------------------------*/

    .flow__strength_two::after,
    .flow__strength_three::after,
    .flow__strength_four::after,
    .flow__strength_five::after,
    .flow__strength_six::after,
    .flow__strength_seven::after {
        background: none;
    }




}






/* -------------------------------------------------
    @メディアクエリ 575px以下
----------------------------------------------------*/
@media (max-width: 575px) {
    .flow__strength--icon span {
        right: 0;
        left: 0;
        margin: auto;
    }

    .flow__strength--icon.icon02 span {
        right: 0;
        left: 0;
        margin: auto;
    }


}




/* -------------------------------------------------
    @メディアクエリ 574px以下
----------------------------------------------------*/
@media (max-width: 574px) {
    .creative-box {
        position: relative;
        padding: 30px 15px;
    }

    .creative-box__center {
        padding: 30px 15px;
        margin: auto;
    }

    .creative-box__text .flex-box-between {
        display: block;
    }

    .creative-box__role {
        margin-top: 20px;
    }

    .creative-box__check {
        width: 100%;
        min-width: 100%;
        font-size: 1.25em;
        margin: 3% 0;
    }

    .facility__copy {
        font-size: 1.7em !important;
    }


    /* -------------------------------------------------
    クリエイティブ - 印刷媒体
    ----------------------------------------------------*/
    .media__list__circle {
        font-size: 1em;
    }

    /* -------------------------------------------------
    クリエイティブ - 動画制作
    ----------------------------------------------------*/
    .Movie-IconArea__box {
        width: 50%;
    }

    .Movie-IconArea__box--1,
    .Movie-IconArea__box--3,
    .Movie-IconArea__box--5 {
        border-top: solid 1px #ddd;
        border-left: solid 1px #ddd;
        border-bottom: none;
    }

    .Movie-IconArea__box--7 {
        border-top: solid 1px #ddd;
        border-left: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }

    .Movie-IconArea__box--2,
    .Movie-IconArea__box--4,
    .Movie-IconArea__box--6 {
        border-top: solid 1px #ddd;
        border-right: solid 1px #ddd;
        border-bottom: none;
    }

    .Movie-IconArea__box--8 {
        border-bottom: solid 1px #ddd;
        border-top: solid 1px #ddd;
        border-right: solid 1px #ddd;
    }
}







/* -------------------------------------------------
	制作実績
----------------------------------------------------*/
.products-title__icon {
    display: block;
    margin: auto;
    width: 130px;
}

.products-title__copy {
    display: block;
    margin: 30px auto;
    width: 303px;
}

.products__item__wrap {
    margin-top: 50px;
}

.products__item a {
    border-style: none !important;
    outline: none !important;
}

/*----- Flex アイテム -----*/
.products__item {
    width: 30%;
    margin: 0 auto 30px auto;
}

.products__item__photo {
    display: block;
    margin: auto;
}

.products__item__cap {
    font-size: 1.6rem;
    color: #111;
    margin: 20px auto 0 auto;
}

.products__item__spec {
    margin: 25px 20px;
    padding: 12px;
    display: block;
    color: #888;
    border: solid 1px #aaa;
}

.products__item__spec ul {
    margin: 0 !important;
    padding-left: 0 !important;
}

/* -------------------------------------------------
	@メディアクエリ 992px以上 〜 1199px以下
----------------------------------------------------*/
@media (max-width:1199px) and (min-width:992px) {

    /*----- Flex アイテム -----*/
    .products__item {
        width: 27%;
        margin: 0 auto 50px auto;
    }

    .products__item__cap {
        font-size: 1.8rem;
    }

    .products__item__spec {
        margin: 25px 0 0 0;
        padding: 10px;
    }

    .products__item__spec li {
        font-size: 1.3rem;
        line-height: 1.5;
    }
}

/* -------------------------------------------------
	@メディアクエリ 768px以上 〜 991px以下
----------------------------------------------------*/
@media (max-width:991px) and (min-width:768px) {

    /*----- Flex アイテム -----*/
    .products__item {
        width: 27%;
        margin: 0 auto 40px auto;
    }

    .products__item__photo {
        display: block;
        margin: auto;
    }

    .products__item__cap {
        font-size: 1.4rem;
    }

    .products__item__spec {
        margin: 15px 0 0 0;
        padding: 10px;
    }

    .products__item__spec li {
        font-size: 1.15rem;
        line-height: 1.5;
    }
}

/* -------------------------------------------------
	@メディアクエリ 481px以上 〜 767px以下
----------------------------------------------------*/
@media (max-width:767px) and (min-width:481px) {

    /*----- Flex アイテム -----*/
    .products__item {
        width: 45%;
        margin: 0 auto 30px auto;
    }

    .products__item__photo {
        display: block;
        margin: auto;
    }

    .products__item__cap {
        font-size: 1.7rem;
    }

    .products__item__spec {
        margin: 15px 0 0 0;
        padding: 10px;
    }

    .products__item__spec li {
        font-size: 1.25rem;
        line-height: 1.5;
    }
}

/* -------------------------------------------------
	@メディアクエリ 480px以下
----------------------------------------------------*/
@media (max-width: 480px) {
    .products-title__icon {
        display: block;
        margin: auto;
        width: 140px;
    }

    .products-title__copy {
        display: block;
        margin: 30px auto;
        width: 80% !important;
    }

    .products__item__wrap {
        margin-top: 50px;
    }

    /*----- Flex アイテム -----*/
    .products__item {
        width: 100%;
        margin: 0 auto 15px auto !important;
    }

    .products__item__photo {
        display: block;
        margin: auto;
    }

    .products__item__cap {
        font-size: 1.6rem;
        
        margin: 20px auto 0 auto;
    }

    .products__item__spec {
        margin: 20px 10px;
        padding: 10px;
    }

    .products__item__spec ul {
        padding-left: 20px;
    }

    .products__item__spec li {
        font-size: 1.4rem;
        line-height: 1.5;
    }


    .coffee_link a {
        font-size:1.8rem;
        padding:2rem 1.8rem;
    }



}