/* tags
----------------------------------------------- */

ul{}
ul li{}

ul.nav{ overflow:hidden;}
ul.nav li{ float:left;}

.cell{ overflow:hidden; display:inline-block;}
.cell_l,
.cell_r{ height:30px; line-height:1;}
.cell_l{ float:left;}
.cell_r{ float:right; margin-left:10px;}

input:-webkit-autofill,
input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        background: #fff;
}

dl.list{ overflow:hidden; position:relative; border-bottom:solid 1px #999; margin-bottom:17px; padding:2px 0 18px 0;}
dl.list dt{ position:absolute; top:2px; left:0; width:200px; font-size:1.1em; line-height:1.6;}
dl.list dd{ padding-left:220px; line-height:1.4;}

	.listArea dl:last-child{ border-bottom:0 !important; margin-bottom:0;}
	
	dl.list dt .category2{ display:inline-block; border:solid 1px #cb0000; color:#cb0000; border-radius:10px; line-height:1 !important; min-width:75px; padding:3px 0 1px 0px; margin:0 0 0 10px; text-align:center; font-size:0.75em; font-weight:600; position:absolute; top:2px; right:0;}
	dl.list dt .category2 a{ text-decoration:none;}
	dl.list dd a{ display:block; line-height:21px; color:#333333 !important; text-decoration:none;}
	
	
dl.list dt .cell{ width:100%;}
dl.list dt .cell_l,
dl.list dt .cell_r{ height:20px; line-height:1;}
dl.list dt .date{ display:inline-block; font-size:1rem;
position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);}
  
dl.list dt .cat{ display:block; box-sizing:border-box; font-size:0.75rem; width: 8.5em; font-weight:600; color:#cb0000;border:solid 1px #cb0000; text-align:center; padding:1px 15px;border-radius:9px; 
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;

position: relative;
  top:calc( 50% - 0px);

  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);}
  
  
  #news dl.list dt .cell_r{ margin-left: 3px;}
  .touchDevice #news dl.list dt .cell_r{ margin-left: 10px;}
  
  dl.list.blog dt .cat{ color:#000;border-color: #000;}}
  
  
  dl.list dt .cat a{ text-decoration:none;}
  
	
.nav a{ text-decoration:none; color:#333333 !important;}


.categories { margin-bottom:40px; border-bottom:solid 1px #cb0000; padding:0 0 15px 0; position:relative;}
.categories li{ display:inline-block;   padding:0px; margin:0 10px 0 10px; text-align:center; font-size:0.8em; font-weight:600; }
	.categories li a{ text-decoration:none !important;color:#333; display:inline-block; padding:0 20px 0px 20px;} 
	
.categories li.active a{ color:#cb0000;text-decoration:underline; border-bottom:solid 1px #cb0000; }

a.deactive{ pointer-events: none !important; cursor: default !important;}


::placeholder {
  color: #ccc;
}
/* 旧Edge対応 */
::-ms-input-placeholder {
  color: #ccc;
}
/* IE対応 */
:-ms-input-placeholder {
  color: #ccc;
}



/* class
----------------------------------------------- */
.globalInner{ width:900px; margin:auto;  position:relative;}


.limit{ max-width:1200px; margin:auto;}

.bgColor{ background-color:#f1f1f1;}

dl.box{ text-align:center; display:inline-block; width:320px;}
dl.box dt{ height:200px; margin-bottom:10px;}
dl.box dd{}
dl.box dd h3{ margin-bottom:0px; font-weight:600; font-size:1.5rem; }
dl.box dd h3 a{ text-decoration:none;pointer-events:none; color:#333333; }
dl.box dd .more a{ display:inline-block; position:relative; top:10px; color:#cb0000 !important;}
dl.box dd .more a:after{ content:'>'; display:inline-block; padding-left:3px;}

.box2col{text-align:center; }
.box2col dl.box:nth-child(odd){ }         
.box2col dl.box:nth-child(even){ }
		  
.box3col{
	display: flex;
  justify-content: space-between;
}
.box3col dl{ width: 30%; margin:0 auto 0px auto;}
.box3col dl.box:nth-of-type(2) { margin:0 2% 0px 2%; }     


.tate{
	-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}


div dl.line{ border-top:solid 1px #cb0000; position:relative; padding:0.5em 0 0.5em 0;}
div dl.line:last-child{border-bottom:solid 1px #cb0000; }
div dl.line dt{ width:130px; position:absolute; top:0.5em; left:0; padding:0 20px;}
div dl.line dd{ padding-left:130px;}



.infoArea{ text-align:center;padding-bottom:100px;}
.infoArea p{ margin-bottom:40px; color: #999;}

.contactBtn{ width:350px; height:80px; margin:0 auto 20px auto; text-align:center;}
.contactBtn a{ display:block; height:80px;white-space:nowrap;border:solid 1px #cb0000;}
.contactBtn a span{display:inline-block; width: 260px; line-height:80px; padding-left:52px; position:relative;font-size:1.25rem; margin:auto;}
.contactBtn a span:before{ content:''; display:inline-block; position:absolute; top:22px; left:0px; width:36px; height:32px; background:url(./img/common/arrow_btn.png) no-repeat; background-size:contain;}


.contactBtn a:hover span:before{ background:url(./img/common/arrow_btn_white.png) no-repeat; background-size:contain;}

.backBtn{ width:350px; height:80px; margin:0 auto 20px auto; text-align:center;}
.backBtn a{ display:block; height:80px;white-space:nowrap;border:solid 1px #cb0000;}
.backBtn a span{display:inline-block;width: 260px; line-height:80px; padding-left:52px; position:relative;font-size:1.25rem;}
.backBtn a span:before{ content:''; display:inline-block; position:absolute; top:22px; left:0px; width:36px; height:32px; background:url(./img/common/arrow_back_btn.png) no-repeat; background-size:contain;}

.backBtn a:hover span:before{ background:url(./img/common/arrow_back_btn_white.png) no-repeat; background-size:contain;}


.contactBtn a,
.backBtn a{
		-moz-transition: -moz-all 250ms ease-out;
    -webkit-transition: -webkit-all 250ms ease-out;
    -o-transition: -o-all 250ms ease-out;
    -ms-transition: -ms-all 250ms ease-out;
    transition: all 250ms ease-out;
	}

.contactBtn a:hover,
.backBtn a:hover{background-color:#cb0000; color:#fff !important;}

nav.set2{ overflow: hidden; width: 730px; margin: auto;}
nav.set2 .backBtn{ float: left;}
nav.set2 .contactBtn{ float: right;}



.parallax{ overflow:hidden; position:relative;}



#pageTop{ position:fixed; right:30px; bottom:30px; z-index:500; width:80px; height:80px; border-radius:50%; background-color:#cb0000; cursor:pointer; opacity:0;pointer-events:none;transition: all 200ms cubic-bezier(.50,.0,.50,1);}
#pageTop.active{ opacity:1; cursor:pointer;pointer-events:auto;}
#pageTop.active:hover{ background-color:#de0000;}
#pageTop hr{ width:20px; height:0; border-bottom:solid 2px #fff;}
#pageTop hr:nth-of-type(1){
	position:absolute;
	top:50%;
	left:50%;
	margin:-3px 0 0 -17px;
	transform: rotate(-45deg);
}

#pageTop hr:nth-of-type(2){
	position:absolute;
	top:50%;
	right:50%;
	margin:-3px -17px 0 0;
	transform: rotate(45deg);
}

/* header
----------------------------------------------- */
.siteHeader{}

.siteHeader h1{ display:inline-block; width:300px; height:40px; position:relative; top:31px; line-height:0;}
	.siteHeader h1 img{ width:100%; height:auto;}

.siteHeader ul.menu{ position:relative; top:30px; float:right; text-align:center; font-size:1.1rem; }
.siteHeader ul.menu li{ display:block; float:left; margin-right:30px; position:relative; cursor:pointer;}
.siteHeader ul.menu li:last-child{ margin-right:0;}



.siteHeader ul.menu li a{ line-height:46px; display:block; white-space:nowrap; color:#999 !important; text-decoration:none;}
.siteHeader ul.menu li a:hover{ color:#333 !important; }

	.siteHeader ul.menu li:hover ul{ display:block;}
	.siteHeader ul.menu ul{ border-top:solid 2px #cb0000; width:140px; position:absolute; top:46px; left:0; display:none;font-size:1rem;}
	.siteHeader ul.menu ul li{ width:100%;border-bottom:solid 1px #9fa0a0;}
	.siteHeader ul.menu ul li a{ width:100%;background-color:#efefef;}

	.siteHeader ul.menu li:nth-of-type(3) ul{ left:-30px;}
	
.siteHeader ul.menu li a.deactive{ pointer-events: none !important; cursor: default !important;color: #e1e1e1 !important;}








.fixedMenuClose{ display:none; position:absolute; top:25px; right:30px; width:50px; height:50px; cursor:pointer; background-color:transparent;}

	.fixedMenuClose.active{ }
	.fixedMenuClose hr{width:50px; height:3px; background-color:#c9caca; border:0; }
	.fixedMenuClose hr:nth-of-type(1) { position:absolute; top:24px; left:1px;transform: rotate(-45deg);}
	.fixedMenuClose hr:nth-of-type(2) { position:absolute; top:24px; left:1px;transform: rotate(45deg);}
	.fixedMenuClose:hover hr{ background-color:#333;}

.fixedMenu ul.fixedMenuList{ text-align:center; display:block !important; position:relative; top:0; left:0; overflow:hidden;}
.fixedMenu ul.fixedMenuList > li{ margin-bottom:0px; padding:0; display:block !important; height:auto;font-size:1.5rem; position:relative;}


.fixedMenu ul.fixedMenuList a{ display:block; text-align:center !important; text-decoration:none; color:#fff !important; text-decoration:none; border-bottom:solid 2px #fff; line-height:0; padding:0; margin:0; height:auto;}
.fixedMenu ul.fixedMenuList a:not(.nolink):hover{ color:#fefefe !important; }

.fixedMenu ul.fixedMenuList a div { display:table; margin:auto;}
.fixedMenu ul.fixedMenuList a span{ margin:auto; display:table-cell; height:120px; vertical-align:middle; position:relative;}

.fixedMenu ul.fixedMenuList ul { background-color:#f2f2f2; overflow:hidden; position:relative;}
.fixedMenu ul.fixedMenuList ul:before{ content:''; display:block; position:absolute; top:20px; left:50%; margin-left:-1px; width:2px; height:80px; background:#999;}
.fixedMenu ul.fixedMenuList ul li{ width:50%; float:left;}
.fixedMenu ul.fixedMenuList ul a{ color:#999 !important;font-size:0.8em;}
.fixedMenu ul.fixedMenuList ul a:hover div span{ color:#999 !important;}

.fixedMenu ul.fixedMenuList ul a.deactive{ pointer-events: none !important; cursor: default !important;color: #e1e1e1 !important;}

.fixedMenu ul.fixedMenuList > li.harf{ width:50%; float:left; font-size:0.8em;}
.fixedMenu ul.fixedMenuList > li.harf a{ border-bottom:0 !important;}
.fixedMenu ul.fixedMenuList > li.harf a span{ line-height:1.5;}

.fixedMenu ul.fixedMenuList > li.harf a.deactive{ opacity: .25;}

.fixedMenu ul.fixedMenuList > li.login:before{ content:''; display:block; position:absolute; top:20px; left:100%; margin-left:1px; width:2px; height:80px; background:#fff;}
.fixedMenu ul.fixedMenuList > li.login div span{ padding-left:50px;}
.fixedMenu ul.fixedMenuList > li.login div span:before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 0px;
	margin-top:-20px;
    background: url(./img/common/icon_login_white.svg) center center no-repeat;
    background-size: contain;
}


.fixedMenu div.sns{ padding-top:40px;}
.fixedMenu div.sns a{
	display: block;
	margin:auto;
    width: 40px;
    height: 40px;
    background: url(./img/common/icon_facebook_white.svg) center center no-repeat;
    background-size: contain;
	text-indent:-999px;
	overflow:hidden;
}





/* footer
----------------------------------------------- */

footer#globalFooter{color:#999; min-height:350px;} 
footer#globalFooter .logo{ position:absolute; top:50px; left:0; width:83px; height:150px; background:url(./img/common/logo_2.svg) center top no-repeat; background-size:contain;}



footer#globalFooter ul{}
footer#globalFooter ul li{ margin-bottom:5px; line-height:1.5;}
footer#globalFooter ul li a{ white-space:nowrap; color:#999 !important;}
footer#globalFooter ul li a:hover{ color:#333 !important; }
footer#globalFooter ul li a.nolink:hover{ color:inherit !important;}
footer#globalFooter ul li a.deactive{color:#d6d6d6 !important;}

footer#globalFooter ul.menu{position:absolute; top:50px; left:200px;  font-size:1.05em;}
footer#globalFooter ul.menu > li:nth-of-type(4){position:absolute; top:0px; left:250px; }
footer#globalFooter ul.menu > li a:before{ content:'＞'; display:inline-block; padding-right:0px;}

footer#globalFooter ul.menu ul{ padding-top:5px; padding-left:1em; font-size:0.9em;}
footer#globalFooter ul.menu ul li{ margin-bottom:5px;}
footer#globalFooter ul.menu ul li a:before{ content:'・' !important;padding-right:0 !important;}

footer#globalFooter .info{ position:absolute; top:50px; right:0; width:auto; white-space:nowrap;}

footer#globalFooter .info a{ font-size: 0.8em;}

footer#globalFooter a,
footer#globalFooter a:link,
footer#globalFooter a:active{    color: #999 !important;}

footer#globalFooter a:hover{  color: #333 !important;}

/* side
----------------------------------------------- */

#sideFixRight,
#sideFixLeft{ display:table; width:40px; height:590px; text-align:center; vertical-align:middle; line-height:0; padding:0;}

#sideFixRight .inner,
#sideFixLeft .inner{ width:40px !important; height:590px; vertical-align:middle; color:#999 !important;  font-size:1.1rem; margin:0:}

#sideFixRight{ position:fixed; right:-60px; top:50%; z-index:100; margin-top:-275px; letter-spacing:0.2em;}
#sideFixLeft{ position:fixed; left:-60px; top:50%; z-index:100; margin-top:-275px; width:40px;}

#sideFixRight:before{ content:''; display:block; width:40px; height:590px; position:absolute; top:0; left:0; z-index:-1; background-color:#fff; opacity:.2;}

#sideFixRight,
#sideFixLeft{transition: all 500ms cubic-bezier(.50,.0,.50,1); opacity:0;}

#sideFixLeft .inner{ padding-top:230px;}

#sideFixRight .inner{border-right:solid 1px #999; border-left:solid 1px #999;display:table-cell; }
#sideFixRight .ask{  line-height:38px; padding-bottom:10px; letter-spacing:0.1em; font-size:1.05rem;}
#sideFixRight .tel{ line-height:35px; padding-bottom:20px;}
#sideFixRight .login{ line-height:38px; position:relative;  padding-top:30px; border-top:solid 1px #999;letter-spacing:0;}

#sideFixRight a{ color:#999 !important}

#sideFixRight .login a{ padding-top:30px; color:#999 !important;}
#sideFixRight .login a:before{ content:''; display:inline-block; width:20px; height:20px; border-radius:50%; overflow:hidden; position:absolute; top:30px; left:10px;background:url(./img/common/icon_login.svg) center center no-repeat #999999; background-size:contain;}
#sideFixRight .login a.deactive{ opacity:.25;}

#sideFixLeft .sns{ width:40px; height:40px;  border-radius:50%; margin-bottom:40px; text-indent:-999px; overflow:hidden;background:url(./img/common/icon_facebook.svg) center center no-repeat #999999; background-size:contain;}
#sideFixLeft .sns a{ display:block; height:40px;}
#sideFixLeft .copyright{ padding-top:3px; font-size:0.9rem;    transform: rotate(90deg); white-space:nowrap;}


#sideFixRight.visible{ position:fixed; right:50px; top:50%; opacity:1;}

#sideFixLeft.visible{ position:fixed; left:50px; top:50%; opacity:1;}


/* section
----------------------------------------------- */

section{ position:relative; min-height:200px;  padding:0;}


section .globalInner{ padding:40px 0;min-height:200px; width:90%; margin:auto; max-width:900px; text-align:center;}

section.contents .globalInner{max-width:900px; margin:auto;}

section.full{ max-width:inherit !important; }
section.full .globalInner{}
section.fullH .globalInner{ padding:0;}

section  header{ text-align:center;margin-bottom:0px; line-height:1.2; vertical-align:middle;}
section  header h2{display:inline-block;font-size:2.5rem; line-height:1.8; font-weight:600 }


section h3.title{ text-align:center; display:inline-block; min-width:300px; margin:auto auto 15px auto; font-size:1.7rem; line-height:1; padding:30px 0 20px 0}
section h3.title .sub{ display:block; font-size:0.7em; padding-top:40px; position:relative;}
section h3.title .sub:before{ display:block; content:''; ;background:url(./img/common/maker_line.png) center center no-repeat;  width:100%; height:40px; position:absolute; top:0; left:0;}


section .text{ text-align:left; width:660px; margin:0 auto 0 auto; position:relative;}

section .contents{ text-align:left; width:600px; margin:0 auto 0 auto; position:relative;}


section#mainVisual{}
section#mainVisual header,
section#mainVisual header .photo{ width:100%; height:500px; position:relative; overflow:hidden;}

section#mainVisual header .photo:before{
	content:'';
	display:block;
	width:0px;
	height:0px;
	line-height:0;
	opacity:.01;
}

section#mainVisual header .photo{ position:absolute; top:0; left:0; z-index:1;}
section#mainVisual header .photo .moveTarget{ width:100%; height:auto;transition: all 100ms linear; transform: translate(0px,0px); left:0 !important; margin-left:0 !important;}
section#mainVisual header h2{ padding-top:210px; color:#fff; position:relative; z-index:5;font-weight:600 !important;}
section#mainVisual header h2:after{ content:''; display:inline-block; width:38px; height:38px; position:absolute; top:280px; left:50%; z-index:5; margin-left:-19px; background:url(./img/common/logo_frame.svg) center center no-repeat; background-size:contain;}

section#mainVisual h3{}
section#mainVisual h3 .yomi{}






/* article
----------------------------------------------- */





/* top
----------------------------------------------- */

body#top #mainVisual{ min-height:900px; padding:60px 0 120px 0;}



body#top #mainVisual .frame{width:975px; height:975px; opacity:0; transition: all 500ms cubic-bezier(.50,.0,.50,1);margin:auto; position:relative; overflow:hidden;}

body#top #mainVisual .frame .unit{width:975px; height:975px;margin:auto; position:relative;  border-radius:50%; overflow:hidden;-webkit-transform:perspective(0);transform:perspective(0);}

body#top #mainVisual .frame.show{ opacity:1;}
body#top #mainVisual .frame.noAnim{ transition: all 0ms cubic-bezier(.50,.0,.50,1) !important;}

body#top #mainVisual .frame ul{ position:relative; z-index:5;}
body#top #mainVisual .frame ul li{ overflow:hidden;}

body#top #mainVisual .frame ul li.corner{ width:135px; height:135px; background-color:#fff}
body#top #mainVisual .frame ul li.tb{ width:470px; height:220px; }
body#top #mainVisual .frame ul li.side{ width:220px; height:470px;}
body#top #mainVisual .frame ul li.center{ width:470px; height:470px;}

body#top #mainVisual .frame ul li#fmt{ position:absolute; top:33px; left:253px;}
body#top #mainVisual .frame ul li#fml{ position:absolute; top:253px; left:33px;}
body#top #mainVisual .frame ul li#fmc{ position:absolute; top:253px; left:253px;}
body#top #mainVisual .frame ul li#fmr{ position:absolute; top:253px; left:723px;}
body#top #mainVisual .frame ul li#fmb{ position:absolute; top:723px; left:253px;}




body#top #mainVisual .frame ul li .photo{ position:absolute; top:0; left:0; z-index:1; width:100%; height:inherit;}
body#top #mainVisual .frame ul li .photo .moveTarget{ width:100%; height:auto;transform: translate3d(0px,0px,0px);}


body#top #mainVisual .frame ul li#fmc:after{
	content:'';
	display:block;
	width:70%;
	padding-top:70%;
	position:absolute;
	top:15%;
	left:15%;
	z-index:100;
	background:url(./img/top/beyond_the_printing.svg) center center no-repeat;
	background-size:contain;
}



body#top #mainVisual .frame .frameMask{width:976px; height:976px; position:absolute; top:0px; left:0px; z-index:10; opacity:1;}

body#top section#news .globalInner{ text-align:left !important;}
body#top section#news header{ text-align:left; margin-bottom:15px;}

body#top section#news header h2{ display:inline-block;font-size:1.3rem; font-weight:600;}
body#top section#news header .more{ display:inline-block;font-size:1.3rem; margin:0 20px; padding:0 20px; border-left:solid 1px #333333; border-right:solid 1px #333333;}
body#top section#news header .more a{ text-decoration:none; color:#333333 !important; font-size: 0.78em;}

body#top section#link dl.box dt{ overflow:hidden;}
body#top section#link dl.box dt a{ display:block; padding-top:62.5%;}
body#top section#link dl.box:nth-of-type(1) dt{background:url(./img/top/about_photo.jpg) center center no-repeat; background-size:cover;}
body#top section#link dl.box:nth-of-type(2) dt{background:url(./img/top/works_photo.jpg) center center no-repeat; background-size:cover;}
body#top section#link dl.box:nth-of-type(3) dt{background:url(./img/top/amazing_web.jpg) center center no-repeat; background-size:cover;}





/* about
----------------------------------------------- */

body#about section{}

body#about section#mainVisual header .photo{
 background:url(./img/about/photo_1.jpg) center center no-repeat; background-size:cover;
}

body#about section#mainVisual header .photo:before{
 background:url(./img/about/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}

body#about section#mainVisual header .photo img{ display:none;}

body#about section .text{ position:relative; z-index:5;}
body#about section .text .beyond{ padding-top:30px; margin-bottom:80px; text-align:center;}

body#about section h2.markTitle{ position:relative; font-size:2.3rem; line-height:55px; font-weight:600; margin:0 0 50px -110px; margin-top:-95px;}


section#sakaime{}
section#sakaime header,
section#sakaime header .photo{ width:100%; height:500px; position:relative; overflow:hidden; background:url(./img/about/photo_2.jpg) center center no-repeat; background-size:cover;
}

section#sakaime header .photo:before{  background:url(./img/about/photo_2_sp.jpg) center center no-repeat; background-size:cover;
}



section#sakaime header:after{ content:''; display:block; position:absolute; top:-1px; left:0; z-index:2; width:100%; height:42px;background:url(./img/parts/header_cover_left.svg) 0 0 no-repeat; background-size:auto 100%;}
section#sakaime header h2{ }

section.message{ overflow:hidden; position:relative; margin-bottom:80px; }
html:not(.touchDevice) body section.message{font-size:1.1em;}

section.message .globalInner{ padding:0; text-align:left;}
section.message .left{ float:left;}
section.message .right{ float:right;}
section.message h4{color:#cb0000;margin-bottom:35px; line-height:1;}
html:not(.touchDevice) body section.message h4{ font-size:1.5em;}

section.message .photo .image{ border-radius:30px;}
section.message .photo .caption{display:block; font-size:0.7em;}

section#message_1{}
section#message_1 .photo .image{background:url(./img/about/message_1.jpg) center center no-repeat; background-size:cover; width:100%; padding-top:155%;}
section#message_1 .left{ width:50%;}
section#message_1 .right{ width:calc(50% - 50px);}

section#message_2{padding-bottom:35px; }
section#message_2 .globalInner{ }
section#message_2 .photo .image{background:url(./img/about/message_2.jpg) center center no-repeat; background-size:cover; width:100%; padding-top:155%;}
section#message_2 .right{ width:50%;}

section#message_2 .left{width:calc(50% - 50px);}


section#message_3{}
section#message_3 .photo .image{background:url(./img/about/message_3.jpg) center center no-repeat; background-size:cover; width:100%; padding-top:117%;}
section#message_3 .left{ width:50%;  margin-bottom:80px;}

section#message_3 .right{width:calc(50% - 50px); margin-bottom:80px;}
section#message_3  .globalInner{}
section#message_3  .globalInner:after{ content:''; display:block; width:100%; padding-top:40%; clear:both;background:url(./img/about/message_bottom.jpg) center center no-repeat; background-size:cover; border-radius:30px;}




section#message{}
section#message header{ width:100%; height:auto !important; padding-top:50px; margin-bottom:0 !important;}
section#message header h2{}

section#message dl.box{ width:650px; margin:auto; overflow:hidden; position:relative;  text-align:left;}

section#message dl.box dt{ width:225px; height:360px; float:left;line-height:1;background:url(./img/about/profile.jpg) center center no-repeat; background-size:cover; border-radius:30px; overflow:hidden; margin-bottom:20px;} 

section#message dl.box dd{ width:calc(100% - 260px); float:right; line-height:1.2;}
section#message dl.box dd span{ display:inline; padding:0; margin:0; }
section#message dl.box dd span:nth-of-type(1){ font-size:1.1em; line-height:1.2; }
section#message dl.box dd span:nth-of-type(2){ font-size:0.85em; line-height:1.2; }
section#message dl.box dd span:nth-of-type(3){display:inline-block; font-size:1.3em; padding-top:10px; margin-bottom:30px;}
 
 


section#message dl.box dd.profile{ padding-top:50px;}

section#message dl.box dd.profile h4{ color:#cb0000; border-bottom:solid 1px #cb0000; padding-bottom:10px; font-size:1.3em; margin-bottom:20px;}
section#message dl.box dd.profile p{line-height:1.8;}



/* company
----------------------------------------------- */

body#company section{}
body#contact_send section#mainVisual header .photo,
body#company section#mainVisual header .photo{
 background:url(./img/company/photo_1.jpg) center center no-repeat; background-size:cover;
}
body#contact_send section#mainVisual header .photo:before,
body#company section#mainVisual header .photo:before{
 background:url(./img/company/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}

body#company section .text{ position:relative; z-index:5;}

body#company #profile .contents{ padding-bottom:50px;}

body#company #history .contents{ padding-bottom:180px;}
body#company #history dl.line{ }
body#company #history dl.line:last-child{}
body#company #history dl.line dt{ width:230px; white-space:nowrap;}
body#company #history dl.line dd{ padding-left:230px;}

.telLink{  pointer-events:none;  color: #333333 !important;    text-decoration: none !important;}

body#company #access .contents{ text-align:center; padding-bottom:60px;}
body#company #access .map{width:100%; height:400px; overflow-y:hidden;}
body#company #access #gmap{line-height:0; width:100%; height:400px; overflow:hidden;}
body#company #access iframe{ margin:0 !important; vertical-align:auto !important; line-height:0; width:100%; height:550px; overflow:hidden;}




body#company #contact{ min-height: 1200px;}
body#company #contact .contents{ text-align:center; width:auto;}
body#company #contact  .formRead{ margin-bottom: 5em;}
.touchDevice body#company #contact  .formRead{ font-size: 0.6em;}

body#company #contact .tel{ font-size:3.8rem; padding:30px 0;}
body#company #contact .tel a{ text-decoration:none; color:inherit;pointer-events:none;}
body#company #contact span.sub{ font-size:1rem; line-height:2; display:inline-block; margin-bottom:80px;}






form.wpcf7-form .wpcf7-response-output{ opacity: 0; transition: all 1000ms ease 3000ms;}
form.wpcf7-form .wpcf7-mail-sent-ok{ border: 0 !important;}

form.wpcf7-form.sent{}
form.wpcf7-form.sent .wpcf7-response-output.wpcf7-mail-sent-ok{opacity: 1; }


/* boxList
----------------------------------------------- */
.boxList{ clear:both; overflow:hidden; position:relative; padding-top:30px;}
.boxList article.box{position:relative; width:calc(33.333% - 50px);margin:0 75px 75px 0; float:left; text-align:left;}
.boxList article.box:nth-of-type(3n){ margin-right:0;}

.boxList article.box dl dt{ background-color:#fff; width:100%; height:0;  padding-top:100%; margin-bottom:10px;}

.boxList article.box dl dt a{ display:block; width:100%; padding-top:100%; position:absolute; top:0; left:0;}

.boxList article.box dl dd{}



.boxList article.box dl .cell{ width:100%;}
.boxList article.box dl .date{ display:inline-block; font-size:1rem;
position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);}
.boxList article.box dl .cat{ display:inline-block; font-size:0.75rem; font-weight:600; color:#cb0000;border:solid 1px #cb0000; text-align:center; padding:1px 15px;border-radius:9px; 
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;

line-height: 1.2em;
position: relative;
  top: calc(50% - 2px);
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);}
  
  	body#blog .boxList article.box dl .cat{color:#000;border-color: #000;}}
	
	
.boxList article.box dl .cat a{ text-decoration:none;}
.boxList article.box dl .description{ clear:both; padding-top:5px; line-height:1.6;}
.boxList article.box dl .description a{ color:inherit; text-decoration:none;}



article.detail{ }
article.detail img:not(.no_resize){ width:100%; height:auto;}
article.detail dl dt{ background-color:#fff; width:100%; height:auto; margin-bottom:30px; display:block !important;}


article.detail dl dd{ padding:0 10%;}



article.detail dl .date{display:inline-block; font-size:1rem;
position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  line-height:1;
  
  }
article.detail dl .date.onlySP{ display:none;}
article.detail dl .cat{ margin-left:10px;  display:inline-block; font-size:0.75rem; font-weight:600; color:#cb0000;border:solid 1px #cb0000; text-align:center; padding:1px 15px;border-radius:9px; 
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;

line-height: 1.2em;
position: relative;
  top:calc(50% - 2px);
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  }
  
  	body#blog article.detail dl .cat{color:#000;border-color: #000;}
	
	body#service article.detail dl .cat{ display:none;}
	
article.detail dl h4{ padding:10px 0px 0 0px; font-size:1.4rem;  line-height:1.4; margin-bottom:15px;text-align:center; }
article.detail dl .entryBody {text-align:left; }


article.detail .share{ padding:50px 0 50px 0; text-align:center; line-height:0;}
article.detail .share .fb-like{ display:inline-block; vertical-align:bottom;}
article.detail .share .twitter{ display:inline-block; vertical-align:bottom;}



/* news
----------------------------------------------- */
body#news section#mainVisual header .photo{
	background:url(./img/news/photo_1.jpg) center center no-repeat; background-size:cover;
}

body#news section#mainVisual header .photo:before{
	background:url(./img/news/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}

/* blog
----------------------------------------------- */
body#blog section#mainVisual header .photo{
	background:url(./img/blog/photo_1.jpg) center center no-repeat; background-size:cover;
}

body#blog section#mainVisual header .photo:before{
	background:url(./img/blog/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}


/* printing
----------------------------------------------- */
body#printing section#mainVisual header .photo{
	background:url(./img/service/photo_1.jpg) center center no-repeat; background-size:cover;
}
body#printing section#mainVisual header .photo:before{
	background:url(./img/service/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}
body#printing .boxList article.box dl .cat{ display:none;}

/* amazing web
----------------------------------------------- */
body#amazing_web section#mainVisual header .photo{
	background:url(./img/service/photo_1.jpg) center center no-repeat; background-size:cover;
}
body#amazing_web section#mainVisual header .photo:before{
	background:url(./img/service/photo_1_sp.jpg) center center no-repeat; background-size:cover;
}
body#amazing_web .boxList article.box dl .cat{ display:none;}









.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    grid-gap: 50px;
    padding: 0;
    margin: auto;
}



article.formArea{}

article.formArea .btnArea{ display: inline-block; position: relative; cursor: pointer;}

article.formArea .btnArea{ width:350px; height:80px; margin:0 2em 2em 2em; text-align:center;}
article.formArea .btnArea a{ display:block; height:80px;white-space:nowrap;border:solid 1px #cb0000;}
article.formArea .btnArea a span{display:inline-block; width: 260px; line-height:80px; padding-left:52px; position:relative;font-size:1.25rem; margin:auto;}
article.formArea .btnArea a span:before{ content:''; display:inline-block; position:absolute; top:22px; left:0px; width:36px; height:32px; background:url(./img/common/arrow_btn.png) no-repeat; background-size:contain;}


article.formArea .btnArea a:hover span:before,
article.formArea .btnArea.submitHideBtn:hover a span:before{ background:url(./img/common/arrow_btn_white.png) no-repeat; background-size:contain;}

article.formArea .btnArea.backBtn{ width:350px; height:80px; margin:0 auto 20px auto; text-align:center;}
article.formArea .btnArea.backBtn a{ display:block; height:80px;white-space:nowrap;border:solid 1px #afafaf; color: #afafaf;}
article.formArea .btnArea.backBtn a span{display:inline-block;width: 260px; line-height:80px; padding-left:52px; position:relative;font-size:1.25rem;}
article.formArea .btnArea.backBtn a span:before{ content:''; display:inline-block; position:absolute; top:22px; left:0px; width:36px; height:32px; background:url(./img/common/arrow_back_btn_gray.png) no-repeat; background-size:contain;}

article.formArea .btnArea.backBtn a:hover span:before{ background:url(./img/common/arrow_back_btn_white.png) no-repeat; background-size:contain;}


article.formArea .btnArea a{
		-moz-transition: -moz-all 250ms ease-out;
    -webkit-transition: -webkit-all 250ms ease-out;
    -o-transition: -o-all 250ms ease-out;
    -ms-transition: -ms-all 250ms ease-out;
    transition: all 250ms ease-out;
	}

article.formArea .btnArea a:hover,
article.formArea .btnArea.submitHideBtn:hover a{background-color:#cb0000; color:#fff !important;}
article.formArea .btnArea.backBtn a:hover{background-color:#afafaf; color:#fff !important;}

article.formArea .btnArea input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;border-color: #fff;}

.touchDevice article.formArea .formTable input,
.touchDevice article.formArea .formTable textarea{ font-size: 22px !important;}


article.formArea .hissuRead{ text-align: left;color: #cb0000; padding-left: 1rem;    margin-bottom: 4rem;}

article.formArea .formTable{grid-template-columns: 16em 1fr; grid-gap: 0; border-top: solid 1px; text-align: left;}

article.formArea .formTable .hissuMark{ color: #cb0000;}

article.formArea .formTable .gridItem{ border-bottom: solid 1px; padding: 0.5rem 0;}
article.formArea .formTable dt.gridItem{ padding-right: 1rem; padding-left: 1rem;padding-top: 1.3rem;}
article.formArea .formTable dd.gridItem{padding-right: 2rem; position: relative;}

article.formArea .formTable .gridItem.inputArea{padding: 1rem 0;}



article.formArea .formTable dt + dd { font-size: 0.8em; line-height: 2.2rem;}
article.formArea .formTable dd:nth-of-type(1) {}
article.formArea .formTable .inputText{ width: 100%; padding: 0.5em; border: solid 1px var(--color-key); border-bottom-color: var(--color-gray-light); border-right-color: var(--color-gray-light); box-sizing: border-box;}
article.formArea .formTable .inputTextArea{ height: 20em;}

article.formArea .formTable .inputText,
article.formArea .formTable .inputTextArea,
article.formArea  .checkMessage{ font-size: 1rem; color: #000;
	    font-family:YakuHanJP,"Poppins", 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: var(--font-weight-normal);
}

article.formArea .formTable .inputText.errors,
article.formArea .formTable .inputTextArea.errors{ border: solid 1px #c00;}

article.formArea .formTable span.msg{ display: inline-block; padding-top: 0.2em; font-size: 0.8em; color: #c00;}

article.formArea.input_step_2{ display: none;}

article.formArea.input_step_2 .formTable .inputText,
article.formArea.input_step_2 .formTable .inputTextArea{ pointer-events: none; border: 0; height: auto;}

article.formArea.input_step_2 .formTable .inputTextArea{ position: absolute; top: 0; height: 0; visibility: hidden; display: none;
}
article.formArea.input_step_2  .checkMessage{ padding: 0.5em;}

article.formArea.input_step_2 .formTable dd.gridItem{ min-height: 30px;}





span.wpcf7-list-item.deactive { display: inline-block; pointer-events: none; opacity: 0.3 !important; }
.ajax-loader{ position: absolute; top: 0; opacity: 0;}

.confirmMessage{ margin-bottom: 60px;padding-top: 0em; border-top:solid 0px var(--color-key); }
.confirmMessage h5{    font-size: 2.5rem;    margin-bottom: 0.5rem; line-height: 1.3;}
.confirmMessage p{font-size: 0.9rem;}
	.touchDevice .confirmMessage p{font-size: 0.6rem;}
.formThankYou{ text-align: center; padding-top: 5rem;}
.formThankYou h5{     font-size: 2.5rem;    margin-bottom: 0.5rem; line-height: 1.3;}
.formThankYou p.jp{font-size: 0.9rem;margin-bottom: 60px;}


article.formArea.input_step_2 dd.gridItem{ }
article.formArea.input_step_2 .wpcf7-form-control-wrap{}

.spanCheck{ margin-bottom: 5em;}
.touchDevice .spanCheck{margin-bottom: 1em;}}
.spanCheck .wpcf7-form-control-wrap.acceptance-spam{  position: absolute; width: 100%; height: auto; display: block;}
.spanCheck .wpcf7-form-control-wrap.wpcf7-acceptance{ display: block;}
article.formArea.input_step_2 .wpcf7-not-valid-tip{ position: absolute; top: 50%;transform: translate(-50%,-150%);
    display: inline-block;
    width: auto;padding: 0; text-align: center; pointer-events: none;     color: #cb0000;
    
    white-space: nowrap;}

.wpcf7-acceptance{ display: block; text-align: center;}

.wpcf7-acceptance .wpcf7-list-item{ display: inline-block; width: auto; text-align: center; margin: auto;}
.wpcf7-acceptance .wpcf7-list-item input{}
.wpcf7-acceptance .wpcf7-list-item:after{ content: '入力内容をご確認のうえチェックを入れてください。'; display: inline-block; line-height: 1; margin-left: 0.5em; white-space: nowrap; transform: translate(0,-20%);}

.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] { pointer-events: none;}

.input_step_2 .inputArea input{ background: transparent !important;}
		
		
			
		
.card {
  -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
  animation: cardEnter 0.75s ease-in-out 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  max-width: 250px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  margin: 20px auto;
  opacity: 0;
}



.spanCheck .wpcf7-form-control-wrap{ position: relative !important; text-align: center; }
.spanCheck .wpcf7-form-control-wrap .wpcf7-form-control{text-align: center;}

.spanCheck .wpcf7-response-output.wpcf7-validation-errors{ display: block;}



.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item-label{ display: none;}


.spanCheck .wpcf7-form-control-wrap .wpcf7-list-item input2,
.spanCheck .wpcf7-form-control-wrap .errors input2{ position: absolute; top: 0.4em; left: -2.4em;}
.spanCheck .wpcf7-form-control-wrap .spanCheck_t{display: inline-block; text-align: left; }
.spanCheck .wpcf7-form-control-wrap .spanCheck_t1{ }

.touchDevice .wpcf7-acceptance .wpcf7-list-item{ text-align: left !important; padding-left: 2rem; position: relative !important;}
	.touchDevice .wpcf7-acceptance .wpcf7-list-item:after{content: '入力内容をご確認のうえ\Aチェックを入れてください。';	white-space: pre ;    transform: translate(0,0%); line-height: 1.4; font-size: 1.0rem;}
.touchDevice .wpcf7-acceptance .wpcf7-list-item input{ position: absolute; left: 0; top: 50%; transform: translate(0,-100%) scale(2.5);}


article.formArea.input_step_finish{ display: none; padding-top: 3rem;}