@charset "UTF-8";
/* LESS Document */

/* 変数ファイルインポート */
@import "variable.less";


/* ローディング */
#loading{
	font-family: 'Montserrat', sans-serif;
    z-index:9999;
    animation: loading 1.4s ease-in-out forwards;
    animation-iteration-count:1;
    opacity: 1;
    position: absolute;
    height: 0px;
    width: 67px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    color:#000;
    font-size: 17px;
}
#loading img{
    opacity: 1;
    width:100%;
    margin-left:2px;
    height:auto;
    position: relative;
    animation: 0.4s loading-svg 0.8s ease-in-out forwards;
    animation-iteration-count:1;
}

@keyframes loading-svg{
    0% {opacity:1;bottom:0px;}
    100% {opacity:0;bottom:15px;}
}

@keyframes loading{
    0% {opacity:0;bottom:90px;}
    40% {opacity:1;bottom:120px;}
    70% {opacity:1;bottom:120px;}
    100% {opacity:0;bottom:210px;display:none;}
}

#loading::after{
	content: '';
	height:4px;
	width: 70px;
    display: block;
	position: absolute;
    animation: loading_bar_back 1.2s ease-in-out forwards;
    top:34px;
    left:0;
    right:0;
    margin:auto;
	-webkit-transform-origin:  left;
	-moz-transform-origin:  left;
	-ms-transform-origin: left;
	-o-transform-origin: left;
	transform-origin:   left;
	-moz-transition:all 0.2s;
    -o-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	transition:all 0.2s;
    background:#ccc;
}
#loading::before{
	content: '';
	height:4px;
	width: 70px;
    display: block;
	position: absolute;
    animation: loading_bar 1.2s ease-in-out forwards;
    top:34px;
    left:0;
    right:0;
    margin:auto;
	-webkit-transform-origin:  left;
	-moz-transform-origin:  left;
	-ms-transform-origin: left;
	-o-transform-origin: left;
	transform-origin:   left;
	-moz-transition:all 0.2s;
    -o-transition:all 0.2s;
    -webkit-transition:all 0.2s;
	transition:all 0.2s;
    background:#ca0012;
    z-index: 9999;
}

@keyframes loading_bar{
    0% {
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        opacity:0;top:45px}
    50% {top:34px;
        opacity:1;}
    90% {
	-ms-transform: scaleX(1);
	-webkit-transform: scaleX(1);
	transform: scaleX(1);}
}
@keyframes loading_bar_back{
    0% {
        opacity:0;
        top:45px}
    50% {top:34px;
        opacity:1;}
    90% {
        opacity:1;}
}

/* トップページ */

#topimage::before {
    content:"";
    position: absolute;
    display: block;
	width: 100%;
	height: calc(~"100vh - @{navHeight}"); /* Lessコンパイル用 */;
    background-color:#ffffff;
    z-index: 9998;
    animation: topimage-anim 0.5s ease-in-out forwards;
    animation-delay:1.5s;
    -webkit-animation-delay: 1.5s;
    animation-iteration-count:1;
}

@keyframes topimage-anim {
    0% {right: 0;}
    100% {right: -100vw;}
}


#topimage {
	width: 100%;
    margin-top:0px;
    height: calc(~"100vh - @{navHeight}"); /* Lessコンパイル用 */;
	position: relative;
	background:rgba(92,79,79,0.46);
	background-image:url(../image/topimage01.jpg);
	background-size:cover;
	text-align: center;
    overflow: hidden;
    color:#ffffff;
}
#topimage_nest {
	background-color:rgba(0,0,0,0.20);
	width: 100%;
    height: 100%;
}

#topimage #main_copy{
	position: absolute;
    width: 100%;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 1;
}

#topimage #main_copy strong{
	font-size: 30px;
	font-weight: 500;
	/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
}
#topimage #main_copy h2{
	font-size: 70px;
	margin: 8px 0;
	/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
	font-weight: 500;
    line-height: 130px;
}
#topimage #main_copy h3{
	font-weight: 400;
	font-size: 20px;
	/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
}

#topimage #main_copy strong{
	font-size: 32px;
    line-height: 1;
}


/* トップスクロールダウン */


#top_scroll{
	position: absolute;
    display: block;
	height: calc(~"100vh - 250px"); /* Lessコンパイル用 */;
    top:30px;
    width:60px;
	right:0px;
	margin:auto;
    box-sizing: border-box;
    background-image: url("../top-img/scroll_color.png");
	 background-repeat:repeat-y;
	 background-position-y:0;
	 background-position-x:center;
    overflow: visible;
}


#top_scroll img{
	position: absolute;
    margin:auto;
    left:0;
    right:0;
    bottom:-100px;
}



.move{
	 -webkit-animation: bgscroll 120s linear infinite;
	 animation: bgscroll 120s linear infinite;
}
 
@-webkit-keyframes bgscroll {
 0% {background-position: 0px;}
 100% {background-position-y: 4000px;}
}

@keyframes bgscroll {
 0% {background-position-y: 0px;}
 100% {background-position-y: 4000px;}
}



/* 左揃 見出し*/

.left_headline{
	font-size: 17px;
	font-weight: 500;
    color:#ca0012;
    margin-bottom:35px;
	line-height: 1;
}

.left_headline span{
    display: inline-block;
    font-family: din-condensed, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    margin-right:20px;
    letter-spacing: 5px;
    margin-bottom:35px;
}


.left_headline::after{
    content: "";
    position: relative;
    display: block;
    width:55px;
    height:3px;
    background-color:#ca0012;
}


/* 中央揃 見出し*/
	
.center_headline{
    text-align: center;
    color:  #ca0012;
    font-size: 17px;
    letter-spacing: 3px;
    padding-left:3px;
    font-weight: 500;
    margin-bottom:48px;
}
.center_headline::before{
    display: block;
    color:  #ca0012;
    font-family: din-condensed, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    padding-left:5px;
    letter-spacing: 5px;
    line-height: 1;
}


/* 私たちについて */
#aboutus{
	   line-height: 1.8;
    
        h4{
        font-size: 36px;
        line-height: 52px;
        font-weight: 500;
        color:#000;
        }

        p{
        font-size:15px; 
        line-height: 35px;
        margin-top:0;
        margin-bottom:0;
        }
}


/* トップ 事業案内 */

#service .center_headline::before{
    content: "SERVICE";
}

#service section{
    position: relative;
    max-width:1150px;
    margin:auto;
    color:#ffffff;
    text-align: center;
	margin-top: 48px;
	padding-bottom: 15px;
}


#service section div img{
    width:79px;
    height:79px;
}

#service section #printing,
#service section #web,
#service section #video{
	position: relative;
	margin-top: 43px;
	width:510px;
    height:510px;
	background: #fff;
	padding: 40px 40px;
    box-sizing: border-box;
    opacity: 0;
    z-index:100;
}

#service section #printing{
	float: right;
    background-color: #f18700;
	right:0px;
}
#service section #web{
	float: left;
    background-color: #009e96;
	left:0px;
}
#service section #video{
	float: right;
    background-color: #0064be;
	right:0px;
}


#service section .fadeInSlant{
    animation: fadeInSlant 1.25s ease forwards;
	-webkit-animation-delay:0.3s;
	animation-delay:0.3s;
    transform-origin: 50% 0% 0px;
    transform: matrix3d(0.996195, 0, 0.0871557, -0.000217889, 0.00759612, 0.996195, -0.0868241, 0.00021706, -0.0868241, 0.0871557, 0.992404, -0.00248101, 0, 90, 0, 1);
}

@-webkit-keyframes fadeInSlant {
 0% { opacity: 0;  }
 100% { opacity: 1;
    transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
}
@keyframes fadeInSlant {
 0% { opacity: 0; }
 100% { opacity: 1;
    transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
}



#service section .button01{
    position: absolute;
    bottom:40px;
    left:0;
    right:0;
    margin:auto;
    max-width:100%;
    width:300px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
}

#service h4{
    font-size:42px;
    line-height: 52px;
    letter-spacing: 5px;
    padding-left:5px;
    font-weight:normal;
    margin-top:10px;
    color:#fff;
}

#service section h4::after{
    font-family: din-condensed, sans-serif;
    font-style: normal;
    font-weight: 400;
	color:#000000;
	font-size:28px;
	margin:0;
	padding:0;
	display:block;
    line-height: 1;
	margin-left: 3px;
    letter-spacing: 2px;
	padding-left:2px;
    margin-top:5px;
    margin-bottom:18px;
}
#service section #printing h4::after{
	content: "PRINTING" ;
}
#service section #web h4::after{
	content: "WEB PLANNING" ;
}
#service section #video h4::after{
	content: "VIDEO" ;
}


#service h5{
	font-size:21px;
    line-height: 29px;
	font-weight: normal;
}

#service section p{
	width:100%;
	text-align: justify;
    font-size: 15px;
    margin-top:12px;
}

#service section .service_image{
	position:absolute;
	z-index:1;
}
#service section #printing + .service_image{
	left:25px;
}
#service section #web + .service_image{
	right:25px;
}
#service section #video + .service_image{
	left:25px;
}



.fadeIn {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 visibility: visible !important;
}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;  }
 100% { opacity: 1; }
}
@keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 1; }
}

.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.25s;
 -ms-animation-duration:1.25s;
 animation-duration:1.25s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(40px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.25s;
 -ms-animation-duration:1.25s;
 animation-duration:1.25s;
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 -o-animation-timing-function: ease;
 -ms-animation-timing-function: ease;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(-40px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) ; }
}

.fadeInTop {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.25s;
 -ms-animation-duration:1.25s;
 animation-duration:1.25s;
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 -o-animation-timing-function: ease;
 -ms-animation-timing-function: ease;
 -webkit-animation-name: fadeInTop;
 animation-name: fadeInTop;
 visibility: visible !important;
}
@-webkit-keyframes fadeInTop {
 0% { opacity: 0; -webkit-transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInTop {
 0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


.fadeInBottom {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.25s;
 -ms-animation-duration:1.25s;
 animation-duration:1.25s;
 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
 -o-animation-timing-function: ease;
 -ms-animation-timing-function: ease;
 -webkit-animation-name: fadeInBottom;
 animation-name: fadeInBottom;
 visibility: visible !important;
}
@-webkit-keyframes fadeInBottom {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInBottom {
 0% { opacity: 0; 
     -webkit-transform: translateY(30px); 
     -ms-transform: translateY(30px); 
     transform: translateY(30px) ; }
 100% { opacity: 1; 
     -webkit-transform: translateX(0); 
     -ms-transform: translateX(0); 
     transform: translateX(0); }
}


.InLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.25s;
 -ms-animation-duration:1.25s;
 animation-duration:1.25s;
 -webkit-animation-name: InLeft;
 animation-name: InLeft;
 visibility: visible !important;
}
@-webkit-keyframes InLeft {
 0% {  	-webkit-transform: scaleX(0); }
 100% {  -webkit-transform: scaleX(1); }
}
@keyframes InLeft {
 0% { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); }
 100% {  -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
}


/* トップ ブログ */


#blog {
    margin-bottom:5em;
    a{
        text-decoration: none;
        color:#000;
    }
}

#blog .flex{
    justify-content:space-between;
}

#blog .flex article{
    width:30%;
    margin-bottom:20px;
	border:0;
}
#blog dl .image{
    height:230px;
    text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
    background-position: center;
	background-size: auto 100%;
    margin-bottom:15px;
    transition:all 0.25s ease-out;
}
#blog dl .image:hover{
	background-size: auto 110%;
}

#blog dl:hover .date{
    color:@keyColor;
}

#blog dl .date{
    font-family: din-condensed, sans-serif;
    font-size: 26px;
    display: inline-block;
    margin-right:8px;
    vertical-align: top;
    line-height: 1;
}
#blog dl .category{
    display: inline-block;
    vertical-align: top;
}

.category b,
.category a{
    font-weight: 300;
    display: inline-block;
    padding:4px 10px;
    border-radius: 2px;
    line-height:1;
    font-size: 15px;
    text-decoration: none;
}

.category .category_business{
    background-color:#298ac1;
    color:#ffffff;
}
.category .category_products{
    background-color:#80a53f;
    color:#ffffff;
}
.category .category_results{
    background-color:#FF6347;
    color:#ffffff;
}
.category .category_media{
    background-color:#bf9d42;
    color:#ffffff;
}
.category .category_printing{
    background-color:#ff797f;
    color:#ffffff;
}
.category .category_info{
    color:@keyColor;
    border: solid 1px @keyColor;
}


#blog dl .title{
    font-size: 17px;
    margin-top: 6px;
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
}
#blog dl .content{
    text-align: justify;
}

.list_link{
    display: flex;
    justify-content: flex-end;
}


/* トップ ニュース */

#news article{
    margin-bottom:30px;
 
}
    
#news dl{
    display: flex;
        border-bottom:1px solid #ddd;
        padding:10px 0 ;
        width:100%;
        transition:all 0.25s;
        text-decoration: none;
    
    a{
       text-decoration: none;
        color:#000;
        transition: @keyFrame;
    }
}

#news dl:hover{
     background-color: #f5f5f5; 
}



#news dl dt,
#news dl dd{
    line-height: 48px;
}

#news dl > .date{
    font-family: din-condensed, sans-serif;
    font-size: 26px;
    padding-right:16px;
    padding-left:0.5rem;
}

#news dl > .category b{
    display: inline-block;
    color:#ca0012;
    border:solid 1px #ca0012;
    border-radius: 2px;
    line-height: 1;
    padding:4px 8px;
	transition:all 0.25s ;
}
#news dl > .title{
    font-size: 16px;
    padding-left:22px;
    padding-right:0.5rem;
}


 #news a:hover b{
	color:#fff;
    background:#ca0012;
	transition:all 0.25s ease;
}

/* トップ ブログ ニュース 共通 */
 #blog dl:hover .date,
 #news dl:hover .date{
	color:@keyColor;
	transition:all 0.25s ease;
}



/* トップ トピックス */

#topics{
    max-width: @keyWidth;
    margin:auto;
    margin-bottom: 20px;
}
#topics .center_headline::before{
    content: "TOPICS";
}


#topics{
    
    ul{
          margin-right: -2.5%;
          margin-left: -2.5%;
        li{
            margin:2.5%;
            flex:0 0 45%;
            padding:0;
            display: flex;
            
            .thumb{
                flex:0 0 225px;
                background-color:#fff;
                height:160px;
                display: flex;
                align-items: center;
                padding:25px;
                box-sizing: border-box;
                    img{
                        
                    }
            }
            
            .txt{
                padding-left:25px;
            }
            p{
                margin-top:0.5rem;
            }
            
                h5{
                    font-size:20px;
                    font-weight: 500;
                    margin-bottom:0.3rem;

                    a,a:link,a:visited,a:hover,a:active{
                     color:@keyColor;
                     text-decoration: none;
                    }
                }
        }
    }
    
}


/* トップ ここまで */



/* 下層ページ ヘッダー */


#printing_page .page_title,
#web_page .page_title,
#video_page .page_title,
#blog_page .page_title,
#news_page .page_title{
	padding-top:@gridSpace;
	padding-bottom:@gridSpace;
}

#service_page .page_title{
	background-image: url(../service/image/title_bg.jpg);
}
#printing_page .page_title{
	background-image: url(../service/printing/image/title_bg.jpg);
}
#web_page .page_title{
	background-image: url(../service/web/image/title_bg.jpg);
}
#video_page .page_title{
	background-image: url(../service/video/image/title_bg.jpg);
}
#corporate_page .page_title{
	background-image: url(../corporate/image/title_bg.jpg);
}

#message_page .page_title{
	background-image: url(../corporate/message/image/title_bg.jpg);
}

#profile_page .page_title{
	background-image: url(../corporate/profile/image/title_bg.jpg);
}
#history_page .page_title{
	background-image: url(../corporate/history/image/title_bg.jpg);
}

#csr_page .page_title{
	background-image: url(../corporate/csr/image/title_bg.jpg);
}

#organization_page .page_title{
	background-image: url(../corporate/organization/image/title_bg.jpg);
}

#access_page .page_title{
	background-image: url(../corporate/access/image/title_bg.jpg);
}

#group_page .page_title{
	background-image: url(../group/image/title_bg.jpg);
}

#contact_page .page_title{
	background-image: url("../image/contact_title.jpg");
}

#blog_page .page_title{
	background-image: url("../image/blog_title.jpg");
}

#news_page .page_title{
	background-image: url("../image/news_title.jpg");
}


#service_page .page_title h2::after{
	content: 'SERVICE';
}
#printing_page .page_title h2::after{
	content: 'PRINTING';
}

#web_page .page_title h2::after{
	content: 'WEB PLANNING';
}
#video_page .page_title h2::after{
	content: 'VIDEO';
}


#corporate_page .page_title h2::after{
	content: 'CORPORATE';
}
#message_page .page_title h2::after{
	content: 'MESSAGE';
}

#profile_page .page_title h2::after{
	content: 'PROFILE';
}

#history_page .page_title h2::after{
	content: 'HISTORY';
}
#access_page .page_title h2::after{
	content: 'ACCESS';
}
#organization_page .page_title h2::after{
	content: 'ORGANIZATION';
}
#csr_page .page_title h2::after{
	content: 'CSR INFORMATION';
}
#group_page .page_title h2::after{
	content: 'GROUP COMPANY';
}

#contact_page .page_title h2::after{
	content: 'CONTACT';
}

#blog_page .page_title h2::after{
	content: 'BLOG';
}

#news_page .page_title h2::after{
	content: 'NEWS';
}



/* 事業案内ページ */
#service_page .outline h3{
    color:@keyColor;
}

#service_intro article{
    display: flex;
    padding:60px;
    box-sizing: border-box;
    margin-bottom:30px;
    background-color: #fff;
    border: 0;
}
#service_intro article .image{
    width:50%;
}

#service_intro article .text{
    width:50%;
}


#service_intro article h4{
    font-size:42px;
    letter-spacing: 5px;
    font-weight: 300;
    line-height: 1.15;
}



#service_intro article .text img{
    width:79px;
    height:79px;
    float: left;
    margin-right:15px;
}

#service_intro article h4::after{
    font-family: din-condensed, sans-serif;
	font-size:28px;
    line-height: 1;
    letter-spacing: 2px;
    margin-top:5px;
    margin-bottom:20px;
    text-indent: 2px;
    display: block;
}

#service_intro h4{
    color: #000000;
}
#service_intro article.intro_printing h4::after{
	content: "PRINTING" ;
    color: #f18700;
}
#service_intro article.intro_web h4::after{
	content: "WEB PLANNING" ;
    color: #009e96;
}
#service_intro article.intro_video h4::after{
	content: "VIDEO" ;
    color: #0064be;
}


#service_intro article .text ul{
    display: flex;
    flex-wrap: wrap;
}

#service_intro article .text ul li{
    background:#e6e6e6;
    border-radius: 3px;
    margin-right:5px;
    margin-bottom:5px;
    padding:0px 8px;
    font-size: 90%;
    line-height:2;
}

#service_intro article h5{
    font-size:21px;
    margin-top:20px;
    line-height: 1.5;
}
#service_intro article p{
    margin-bottom:1.75rem;
    text-align: justify;
}

#service_intro .button01{
    position: relative;
    text-align: center;
    margin:auto;
    max-width:100%;
    width:300px;
}

#service_intro .intro_printing .button01{
    background:#f18700;
}
#service_intro .intro_printing .button01:hover{
    background:#f06d00;
}
#service_intro .intro_web .button01{
    background:#009e96;
}
#service_intro .intro_web .button01:hover{
    background:#008d96;
}
#service_intro .intro_video .button01{
    background:#0064be;
}
#service_intro .intro_video .button01:hover{
    background:#004bbe;
}


/* 下層共通 */



/* テーブルリスト */
.table{
    padding-left:@gridSpace;
    padding-right:@gridSpace;
    margin-bottom:-2em;
    
    dt{
        border-bottom:2px solid @keyColor;
        font-weight: 500;
    }
    dd{
        border-bottom:2px solid #dddddd;
    }
    dt,dd{
        padding-left:0.5rem;
        padding-bottom: 2em;
        margin-bottom:2em;
    }
}

/* ボックスリスト */
ul.box{
        padding:0 1%;
    
     > li{
         background-color:#f3f3f3;
         margin:1%;
         flex:0 0 48%;
         padding:30px;
         
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         align-content: flex-start;
         
         h4{
             font-weight: 500;
             font-size:25px;
             color:@keyColor;
         }
         ul{
             display: flex;
             li{
                margin-right:1em; 
             }
             li:before{
                 content:"●";
                 color:#ccc;
             }
         }
         .thumb{
             flex:0 0 90px;
             padding-right:1.25em;
         }
         .title{
         }
         .text{
             margin-top:1.25em;
             flex:0 0 100%;
         }
      }
}


/* テキスト関連 */

.outline h3{
    color:@keyColor;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.lead{
    font-size:115%;
    margin-bottom: @gridSpace - 20;
}


/* 印刷事業 */

@printingColor: #f18700;


#printing_page{
    .outline h3{
    color:@printingColor;
    }
    h4{
        color:@printingColor;
    }
    
    nav#menu{
        background:@printingColor;
    }
    
    .light_bg{
    background: #fef3e5 !important;
    }
    .title01:before,
    .title01:after{
    background:@printingColor;
    }
    
}

#product{
    h4{
        font-size:18px;
        margin-top:1rem;
        text-align: center;
    }
    p{
        margin-top:0.5rem;
    }
}

#machinery{
    ul{
        li + li{
            margin-top:1rem;
        }
        li:before{
            content:"● ";
            color:@printingColor;
        }
        li{
            border-bottom: 1px dashed #aaa;
            padding-bottom:1rem;
        }
    }
}


/* ウェブ制作 */

@webColor: #009e96;

#web_page nav#menu{
    background:@webColor;
}

#web_page .light_bg{
    background: #edf8f8 !important;
}

#web_page .outline h3{
    color:@webColor;
}

#web_page .outline div{
    align-self:auto;
}


#web_page .worry{
    text-align: center;
}
#web_page .worry h3{
    color:@webColor;
    font-size: 32px;
    line-height: 3;
    margin-top:5px;
}

#web_page .worry ul{;
    border-top:2px solid #ddd;
    max-width:800px;
    margin: auto;
    margin-top:20px;
}
#web_page .worry ul li{
    line-height: 1;
    padding:25px 30px;
    padding-left:80px;
    border-bottom:2px solid #ddd;
    text-align: left;
    font-size:17px;
    font-weight: 400;
  background-image: url("../service/web/image/check.png");
    background-repeat: no-repeat;
    background-position:center left 30px;
}

#web_page .title01:before{
    background:@webColor;
}
#web_page .title01:after{
    background:@webColor;
}
#web_page h4.title02{
    color:@webColor;
}
#webplan{
    padding-top:40px;
    position: relative;
}
#webplan:before{
    position: absolute;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 50px 0 50px;
    border-color: #ffffff transparent transparent transparent;
    top:0;
    left:0;
    right:0;
    margin:auto;
}

.plan_list{
    padding:0 @gridSpace / 3;
}
.plan_list .col-4{
    padding:10px;
}

.plan_list article{
    background:#ffffff;
    padding:20px;
    text-align: center;
}
.plan_list img{
    width:auto;
    height:55px;
    margin: 10px;
}
.plan_list h5{
    color:@webColor;
    font-size:25px;
}
.plan_list dl {
    height:160px;
}
.plan_list dl dt{
    font-size:16px;
    font-weight: 500;
    padding-top: 5px;
    padding-bottom: 15px;
}
.plan_list dl dd{
    text-align: left;
    background-image: url("../service/web/image/check.png");
    background-repeat: no-repeat;
    background-position:top 3px left 0px;
    background-size:auto 16px;
    padding-left:21px;
    font-size:14px;
    padding-bottom:5px;
}
.plan_list h6{
    background:@webColor;
    font-size:16px;
    color:#fff;
    padding:0.75em 0;
    margin:0;
    position: relative;
    overflow: hidden;
}
.plan_list h6:before{
    position: absolute;
    background: linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.0));
    transform: rotate(-20deg);
    width:250px;
    height: 30px;
    left:-50px;
    top:-15px;
    content: "";
}



#webstep{
        display: flex;
        height:auto;
    
    dl{
        flex: 25%;
        display: flex; 
        flex-direction: column;
        
        dt{
            padding:20px 30px;
            color:#fff;
            background-color: rgba(0,158,150,1.00);
            font-size:1.3rem;
            font-weight: 500;
            
            span{
                display: block;
                font-size:0.8rem;
                padding-bottom:5px;
            }
        }
        dd{
            padding:30px;
            background-color: rgba(189,230,228,1.00);
            height:100%;
            text-align: left;
            position: relative;
            padding-bottom:120px;
            
            ul{
                margin-bottom:15px;
                list-style-type: disc;
                list-style-position: outside;
                margin-left:20px;
                
                    li{
                    font-size: 1.1rem;
                    font-weight: 500;
                        color:#ca0012;
                    }
            }
            img{
                position:absolute;
                bottom:0;
                left:0;
                right:0;
                margin: auto;
                height:auto;
                margin-bottom:30px;
                max-height:86px;
                max-width:90px;
            }
        }
        
    }
        dl:nth-child(1) dt{
            background-color: rgba(0,158,150,0.7);
        }
        dl:nth-child(2) dt{
            background-color: rgba(0,158,150,0.8);
        }
        dl:nth-child(3) dt{
            background-color: rgba(0,158,150,0.9);
        }
    
        dl:not(:last-child) dd:after{
            content:"";
            display:block;
            width:0;
            height:0;
            position: absolute;
            right:-16px;
            top:0;
            bottom:0;
            margin: auto;
            border-style: solid;
            border-width: 30px 0 30px 25px;
	        border-color: transparent transparent transparent rgba(0,158,150,1.00);
            z-index: 2;
        }
    
        dl:nth-child(1) dd{
            background-color: rgba(189,230,228,0.4);
        }
        dl:nth-child(2) dd{
            background-color: rgba(189,230,228,0.6);
        }
        dl:nth-child(3) dd{
            background-color: rgba(189,230,228,0.8);
        }
}



#webprice,
#movieprice{
            background-color: #f3f3f3;
            padding:@rowSpace @gridSpace;
            margin-top: @rowSpace;
        
        h4{
            font-size:28px;
            color:@webColor;
            margin-bottom:20px;
            line-height: 1;
        }

            table{
                width:100%;
                text-align:left;
                    
                tr{
                    
                    th,td{border:1px solid #b4b4b4;
                        padding:8px 10px;
                    }
                    th{background: #818181;
                    color:#ffffff;}
                    td:first-child{background: #f9f9f9; font-weight: 500;}
                    td{background: #ffffff;}
                    
                 }
            } 
  
}

#movieprice{
    table.example{
            background-color:none;
        th{
            background-color:@videoColor;
            border:0;
        } 
        td{
            border-left:0;
            border-right:0;
            background:none !important;
        }
        td:first-child{color: @videoColor; font-weight: 600;}
        td:last-child{ font-weight: 500;}
        
        
        tr:last-child td:last-child{ color:red;}
    }
}



/* 動画制作 */


@videoColor: #0064be;

#video_page {

    .light_bg{
            background: #edf4fa !important;
    }
    nav#menu{
    background:@videoColor;
     }
    
    .outline h3{
    color:@videoColor;
    }
    
    h4{
        color:@videoColor;
    }
    .title01:before,
    .title01:after{
        background:@videoColor;
    }
}

#sinage{
    h5{
        font-size: 1.4rem;
       color:@videoColor;
        color:#fff;
        background:@videoColor;
        padding-left:1rem;
        padding-right:1rem;
        position: relative;
        display: inline-block;
        line-height :40px;
        margin-top:@vSpace;
    }
    h5:before{
        position: absolute;
        content: "";
        margin:auto;
        right:-15px;
        bottom:0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 40px 0 0 15px;
        border-color: transparent transparent transparent @videoColor;
    }
    hr{
        margin: auto;
        width:100%;
        height: 0;
        border:0;
        border-bottom:2px solid @videoColor;
        margin-bottom:2rem;
    }

    dl{
        dt{
            background-position: left top;
            background-size: 58px 58px;
            height: 58px;
            line-height: 50px;
            background-repeat: no-repeat;
            padding-left:calc(58px + 15px);
            color: @videoColor;
            font-weight: 600;
            font-size:1.25rem;
            position: relative;
            margin-top:2rem;
            margin-bottom:0.5rem;
        }
        
        dt:after{
            content: "";
            position: absolute;
	        width: calc(~"100% - 58px"); /* Lessコンパイル用 */;
            height:2px;
            left:58px;
            bottom:10px;
            background-color:#ccc;
        }
        
        dt.info{
            background-image: url("../service/video/image/info.svg");
        }
        dt.sale{
            
            background-image: url("../service/video/image/sale.svg");
        }
        dt.ad{
            
            background-image: url("../service/video/image/ad.svg");
        }
        dt.event{
            
            background-image: url("../service/video/image/event.svg");
        }
        dd{
            padding-left:calc(58px + 15px);
            text-align:justify;
            margin-bottom:0.5rem;
        }
    }
    
        h6{
            color:@videoColor;
            font-size:1.3rem;
            font-weight: 500;
            margin-bottom:0.5rem;
        }
    b{
        font-size:1.05rem;
    }
}


#whitepaper{
    .download{
        text-align: center;
        
        article{
        background-color:#f3f3f3;
            height: 100%;
            padding:@vSpace / 2;
            box-sizing: border-box;
            
                h6{
                     font-size: 1.1rem;
                    font-weight: 500;
                    margin-top:1rem;
                    margin-bottom:1rem;
                }
        }
    }
}

/* 会社案内 */


#corporate_menu{
    ul{
          margin-right: -1.5%;
          margin-left: -1.5%;
        li{
            background-color:#fff;
            margin:1.5%;
            flex:0 0 47%;
            padding:0;
            display: flex;
            align-items: center;
            
            
            .thumb{
                flex:0 0 145px;
            }
            
            .txt{
                padding-left:25px;
            }
            p{
                margin-top:0.5rem;
            }
            
                h4{
                    font-size:20px;
                    font-weight: 500;
                    margin-bottom:0.3rem;

                    a,a:link,a:visited,a:hover,a:active{
                     color:@keyColor;
                     text-decoration: none;
                    }
                }
        }
    }
    
}

/* 代表挨拶 */
#message_page{
    
    h3{
        margin-bottom:1rem;
    }
    h4{
        font-size: 20px;
        font-weight: 400;
        margin-bottom:2.5rem;
        color:#000;
    }
}

/* 有資格者紹介*/

#lisence{
    
    .title{
        flex:0 0 100%;
    }
    h4{
        background: #fff;
        padding:5px 25px;
        border-left:6px solid @keyColor ;
    }
}




/* 関連会社 */

#group{
    
    .row > div:not(:last-child){
        margin-bottom:5rem;
    }
    
    h4{
        font-size:1.2rem;
        margin-bottom: 0.5rem;
    }
    h5{
        font-weight: 500;
        text-align: justify;
        margin-bottom:1rem;
    }
    .logo{
        height:90px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom:20px;
        
        img{
        }
    }
    iframe{
        width:100%;
        height:380px;
        margin-top:1.5rem;
    }
    
}




/* アクセス */

#access_page{
    iframe{
        width:100%;
    }
}


/* 採用情報*/


/* ブログ */
.news + .news{
    border-top:3px solid #e6e6e6;
    margin-top: @vSpace;
    padding-top: @vSpace;
}

.newshead p{
    margin-top: 0;
    font-size: 30px;
    font-family: din-condensed, sans-serif;
}
.newshead p + p{
    margin-bottom: 1em;
    line-height: 1;
}

.newstitle{
    font-size: 26px;
    text-align: left;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 1rem;
    margin-bottom: 40px;
    line-height: 1.5;
    
    a{
        color:#000;
        text-decoration: none;
    }
}
.wp-post-image{
    margin-bottom: 1.5em;
}

.news_content{
    font-size: 16px;
    line-height: 1.6;
    
    p  + p{
        margin-top:1.5rem;
    }
}

#sidebar {
        h5 {
          background: #fff;
          padding: 0 0.8rem;
          padding-bottom: 0.5rem;
          font-weight: 600;
          border-bottom: 1px solid #e0e0e0;
          font-size: 16px;
        }
        ul {
          margin-bottom: 3em;
            
          li {
          line-height: 1.5;
          border-bottom: 1px solid #e0e0e0;
              span{
                line-height: 1;
                  display: block;
                  font-size:20px;
                  padding-bottom:0.5rem;
                    font-family: din-condensed, sans-serif;
              }
                a {
                  display: block;
                  font-size: 15px;
                  text-align: justify;
                  padding: 1.25rem 0.8rem;
                  color:#000;
                }
                a:link {
                    text-decoration: none;
                    color:#000;
                }
                a:visited {
                    color:#000;
                }
                a:hover,a:active {
                    background: #f3f3f3;
                    color:#000;
                }
            }
        }
}


/* 問い合わせフォーム */
#contact_page h3{
	font-size:16px;
	margin-bottom:@gridSpace / 2;
}
input,select,textarea{
	outline:none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  font-size: 110%;
  border: 2px solid #dddde1;
  background: #ffffff;
  padding:0 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width:100%;
  height:42px;
  box-sizing:border-box;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
    margin-top:0.5rem;
}
.wpcf7-form-control-wrap{
    display: block;
    margin-bottom:2rem;
}

.wpcf7-submit{
      color: #ffffff;
    background-color:#888;
    border:0;
    margin:auto;
    width:420px;
    max-width:100%;
    font-size:18px;
    cursor: pointer;
    transition: @keyFrame;
    height: 70px;
  border-radius: 35px;
}
.wpcf7-submit:hover{
    background-color:@keyColor;
}
.required{
    display:inline-block;
    background-color:@keyColor;
    color:#ffffff;
    padding:5px 6px;
    font-size: 13px;
    border-radius: 3px;
    line-height: 1;
}
select {
	color: #28C76F;
	border-color: #28C76F;
}
textarea {
  padding:10px 10px;
  height:auto;
  width:100%;
}
textarea:focus,
input:focus{
	border-color: #28C76F;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.hissu {
    color: #ffffff;
    font-weight: bold;
    font-size: 90%;
    background-color: #ff0000;
    display: inline-block;
    margin-top: 2px;
    margin-left: 12px;
    padding: 0px 5px 0px 5px;
}
#privacy_check {
	text-align: center;
	background-color: #D6F8F0;
	padding: 20px;
	margin-top: 30px;
}

.error{
	color: #ee0000;
	font-size: 120%;
	margin-bottom:30px;
}
.error_bg{
	background-color: #FFD9D9 !important;
}




/* 組み込みフォーム */

form.form1{
	margin:30px auto 20px auto;
	max-width:480px;
	text-align: center;
}
form.form1 button{
	outline: 0;
	margin-top:5px;
}
form.form1 input,
form.form1 textarea,
form.form1 select{
	text-align: left;
	display: block;
	margin-bottom:15px;
}
form.form1 textarea{
	height:100px;
}
form.form1 select{
}




/* CSRページ */
#labor_statement{
    .labor_ttl{
        margin-top: 5px;
    }
    
    .labor_p{
        margin-left: 13px;
        margin-bottom: 8px;
    }
}