@charset "utf-8";
/* CSS Document */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; font-weight: normal;}
a{text-decoration:none;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal; font-style: normal;}
strong{font-weight: bold;}
ol,ul,li {list-style: none; margin:0;padding:0;}
caption,th {text-align: left;}
h1,h3,h4,h5,h6 {margin:0; padding:0;}
q:before,q:after {content:'';}
abbr,acronym {border: 0;}
img {max-width: 100%;}
table {width: 100%;}
.clear {clear:both;}
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px;}
*{box-sizing: border-box; list-style: none;}
input[type="text"],input[type="tel"],input[type="email"],input[type="reset"],input[type="submit"], textarea {-webkit-appearance: none; border-radius: 0;}

img,canvas,iframe,video,svg{max-width:100%}
img{margin: 0; padding: 0; vertical-align: bottom; max-width: 100%; height: auto;}

.overflow-container{overflow-y:scroll; -webkit-overflow-scrolling:touch;}
a{color: #555; text-decoration: none; transition: all 0.5s ease 0s;}
/*a:hover{opacity: 0.7;}*/

.float-left{float:left;}
.float-right{float:right;}


html{
overflow: auto;
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: /*"Shin Go Light",*/ "游ゴシック Medium", "Yu Gothic Medium", "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;

font-size: 0.9em;
line-height: 1.6;
color:#555;
background: #fff;

-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ex-motion {transform: translate3d(0,0,0);}

/* レイアウト
*************************************************************/
#wrap{
width: 100%;
max-width: 2000px;
margin: 0 auto 100px;
padding: 0;
overflow: hidden;
}

/* フッター
------------------------------------------------------------*/
footer{
width: 100%;
border-top: 1px #000 solid;
margin-top: 1px;
padding-top: 50px;
background-color: #f0f0f0;
}

/* フッター1段目 ナビ */
.foot-nav{
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0 auto 25px;
padding: 0;
font-size: 0.8em;
}
.foot-nav + .foot-nav{margin-bottom: 50px;}
.foot-nav li{margin: 0 2%;}
.foot-nav li a{padding: 5px;}
.foot-nav a:hover{opacity: 0.7;}

/* フッター2段目 SNS Pマーク */
.foot-Second-wrap{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 30px;
padding: 0;
}

/* CONTACTボタン */
.foot-contact{
width: 255px;
height: 60px;
}
.foot-contact a{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 1em;
font-weight: bold;
text-align: center;
line-height: 58px;
background-color: #555;
border: 2px #fff solid;
}
.foot-contact a:hover{
opacity: 0.7;
}
.foot-contact a span{
display: inline-block;
font-size: 1.2em;
vertical-align:text-bottom;
margin-right: 0.5em;
}

/* SNSボタン */
.foot-sns{
width: 255px;
height: 60px;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: 2px #fff solid;
border-left: none;
}

.foot-sns li{
margin: 0 2%;
padding: 0;
font-family: "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 1em;
font-weight: bold;
line-height: 1;
}
.foot-sns li /*a*/{display: block; padding: 5px;}
.foot-sns li /*a*/ span{
font-size: 1.4em;
display: block;
}

.foot-sns i {font-size: 1.3em;}

.foot-sns li a:hover{opacity: 0.7;}

/* Pマーク */
.foot-pmark{
margin: 0;
margin-left: 3%;
padding: 0;
font-size: 0.7em;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.foot-pmark p{
max-width: 170px;
margin-left: 5%;
}
.foot-pmark a:hover{
opacity: 0.7;
}

/* フッター3、4段目 ロゴ、コピーライト */
/* ロゴ */
.foot-logo{
width: 100%;
height: auto;
margin-bottom: 3%;;
text-align: center;
}

.foot-logo img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);

/*max-width: 140px;*/
}

/*@media screen and (max-width: 640px) {
.foot-logo img{max-width: 100px;}
}*/

/* コピーライト */
#copyright{
width: 100%;
color: #fff;
font-size: 0.8rem;
line-height: 3.0;
text-align: center;
background-color: #000;
}



.swiper-container{
margin-top: 3.0em;
}
.swiper-wrapper{
text-align: center;
}
.swiper-wrapper img{
/*width: 75%;*/
text-align: center;
}

.swiper-button-prev,
.swiper-button-next {
  width: 24px !important;
  height: 24px !important;
  margin-top: -10px;
}

/* トップページ
*************************************************************/

/* トップページ コンテンツ
------------------------------------------------------------*/
#stage-1{
width: 100%;
height: 100%;
min-height: 100vh;
display: table;
margin: 0 auto;
padding: 3% 0 0;
}

.center_middle{
display: table-cell;
width: 100%;
margin: 0 auto;
padding: 0;
vertical-align: middle;
}

@-moz-document url-prefix() {
#stage-1{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
margin: 0 auto;
padding: 0;
}
}

/* メインヘッド */
#header{
width: 100%;
margin: 0 auto;
padding: 0;
}

.head-nav{
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
margin: 0 0 50px;
padding: 0;
font-size: 1.2em;
list-style-type: none;
line-height: 1;
}
.head-nav img{
/*vertical-align: middle;*/
margin: 0;
padding: 0;
}
/*.head-nav h1 img{max-width: 140px;}

@media screen and (max-width: 640px) {
.head-nav h1 img{max-width: 70px;}
}*/

.head-nav li{margin: 0 1.3%;}
.head-nav li:first-child {
margin: 0;
margin-left: 20px;
margin-right: auto;
}
.head-nav li:last-child{z-index: 99999999999;}

.head-nav li a {padding: 5px;}
.head-nav a:hover{opacity: 0.7;}


.recruit-btn a{
display: block;
width: 100%;
height: 100%;
padding: 0.8em !important;
border: 1px solid #aaa;
transition: all 0.8s ease 0s;
}



/* ヒーローイメージ */
.hero-wrap{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
.hero-wrap img{
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
}

#animation_container {
width: 100%;
max-width: 2000px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:auto;
padding:0;
}

#canvas{
max-width: 2000px;
padding: 4% 10%;
}


/* hello
------------------------------------------------------------*/
#hello-bg{
background-image: url("../img/hello-bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 70px;
padding-top: 380px;
padding-bottom: 150px;
}

.hello{
position: relative;
width: 50%;
min-width: 300px;
margin: 0 auto;
padding: 0;
}

.hello p{
font-size: 1.2em;
line-height: 2.4;
text-align: justify;
}

.hello .btn{
position: absolute;
bottom: -3.0em;
right: 0;
}
.hello .btn a{
color: #4b84bd;
border: 2px #4b84bd solid;
font-weight: normal;
}

.hello .btn a:hover{
color: #fff;
background-color: #4B84BD;
font-weight: bold;
transform: scale(1.1);
}


/* work
------------------------------------------------------------*/
#work-bg{
background-image: url("../img/work-bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 70px;
padding-top: 300px;
}

#stage-3,#stage-4,#stage-5{
position: relative;
height: auto;
padding-top: 60%;
}

.work-cont-l {
width: 35%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.work-cont-r {
width: 35%;
height: auto;
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
.work-cont-wrap{
position: relative;
}
.work-cont-wrap::before{
display: block;
content: '';
padding-top: 100%;
}
.work-cont-inner{
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 9%;
color: #fff;
background-color: #4b84bd;
z-index: 100;
display: flex;
}
.work-cont-r .work-cont-inner{
display: flex;
justify-content: flex-end;
text-align: left;
}

.text-wrap{width: 85%;}

.work-cont-inner h2{
font-family: helvetica, arial, sans-serif;
font-size: 5.0vw;
font-weight: bold;
line-height: 1;
margin-bottom: 0.1vw;
}
.work-cont-inner h2 span{margin-left: 0.3em;}
.work-cont-inner h4, .work-cont-inner p.h2-kana {
display: block;
font-size: 1.6vw;
font-weight: normal;
line-height: 1.2;
}
.work-cont-inner p:not(.h2-kana){
font-size: 1.1vw;
line-height: 2.0;
margin-top: 2.4vw;
text-align: justify;
}

.work-cont-r h2, .work-cont-r h4, .work-cont-r p.h2-kana{
display: flex;
justify-content: flex-end;
margin-left: -200px; 
}

/* 背景画像 */
.work-img-l{
position: absolute;
top:0;
right: 20%;
left:0;
text-align: left;
z-index: 1;
}

.work-img-r{
position: absolute;
top:0;
right:0;
left: 20%;
text-align: right;
z-index: 1;
}

/* 画像大きく */
figure {
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}
figure img {
width: 100%;
height: 100%;
transition: .3s;
}
figure img:hover {
transform: scale(1.02);
}


/* latest news
------------------------------------------------------------*/
#latestnews-wrap{
background-image: url("../img/latestnews-bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center 70px;
padding-top: 35vh;
}

#stage-6{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

/* 更新情報 */
.news-wrap{
position: relative;
width: 100%;
max-width: 348px;
margin: 0;
padding: 0;
}
.news-wrap::after {
content: "";
display: block;
padding-top: 100%; /* ここを100％にすることで正方形になる */
}
.news-cont{
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 3%;
color: #fff;
background-color: #000;
display: flex;
}

.news-text-wrap{width: 100%; margin: 0 auto;}
.news-cont h2{font-family: "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif; font-size: 1.6em; color: #4b84bd;}
.news{width: 100%; margin: 0; margin-top: 20px; padding: 0;}
.news li{}
.news li:nth-child(odd){font-size: 1.0em;}
.news li:nth-child(even){font-size: 0.8em; border-bottom: 1px #fff dashed; margin-bottom: 1.8em; padding-left: 1.3em; text-indent: -1.3em;}
.news li:nth-child(even)::before{content: '▶ ';}
.news li a{color: #4b84bd; font-weight: bold;}
.news li a:hover{color: #fff; text-decoration: underline;}
.news-cont .btn{position: absolute; bottom: 6%; right: 5%;}
.news-cont .btn a:hover{
color: #000;
background-color: #fff;
font-weight: bold;
transform: scale(1.1);
}

/* リクルートバナー */
.recruitbanner-wrap{
width: 100%;
max-width: 348px;
margin: 0;
padding: 0;
}
.recruit-banner{}
.recruit-banner img{width: 100%; min-width: 348px; max-width: 348px; height: auto; /*border: 1px solid #8DCF0C;*/}
.recruit-banner a:hover{opacity: 0.7;}


@media screen and (max-width:640px){
.recruitbanner-wrap {
margin-bottom: 2.0em;	
}
}

/* スポンサー */
.support-banner-wrap{
max-width: 348px;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.support-img{position: relative;}

.support-img img{
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.4);
width: 100%; 
min-width: 348px;
max-width: 348px; 
height: auto;
}
.support-img a:hover{opacity: 0.7;}

.support-img::before {
position: absolute;
top: 0;
right: 7px;
text-align: right;
font-size: 1.2em;
content: "\f39c";
font-family: ionicons;
color: #fff;
}

.avispa-support-img::before {
position: absolute;
top: 0;
right: 7px;
text-align: right;
font-size: 1.2em;
content: "\f39c";
font-family: ionicons;
color: #c0c0c0;
}

@media screen and (max-width:640px){
.support-img::before {
color: #c0c0c0;
}
}

.recruitwidget-wrap{
width: 100%;
max-width: 1150px;
margin: 4em auto 0;
padding: 2em;
background-color: #f0f0f0;
}
.recruitwidget-wrap #engage-contributions-widget-wrapper{
width: 100%!important;
max-width: 500px;
margin: 0 auto;
}


/* コンテンツページ
*************************************************************/
#contents-wrap{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
display: flex;
position: relative;
}

#main{
width: 80%;
max-width: -webkit-calc(100% - 200px);
max-width: calc(100% - 200px);
margin-left: 5%;
margin-right: 2%;
padding: 150px 0;
}

#sideber{
width: 15%;
min-width: 200px;

padding: 50px 0;
margin-left: 1%;
border-right: 1px #000 solid;
position: relative;
display: flex;
align-items: center;
}

.sidenav-wrap{
width: 100%;
max-width: 200px;
position: absolute;
top: 300px;
}

.side-nav{width: 100%;}
.side-nav li{margin: 30px 0;}
.side-nav li a{
padding: 2% 0;
font-size: 1.0em;
font-weight: bold;
display: flex;
align-items: center;
text-align: left;
white-space: nowrap;
}
.side-nav li a span{margin-left: 0.3em;}

.side-nav li a::after {
display: block;
content: "";
width: 0;
margin-left: 1.0em;
border-top: 1px solid #aaa;
transition: .4s;
}

.side-nav li a:hover {color: #aaa;}
.side-nav li a:hover::after {width: 100%;}

.side-nav li a:active,.side-nav li a:focus {color: #4b84bd; }
.side-nav li a:active::after,.side-nav li a:focus::after {width: 100%; border-color: #000;}


#contents-wrap section{margin-bottom: 10em;}
#contents-wrap section:last-child{margin-bottom: 0;}
#contents-wrap article{margin-top: 2em;}

/*#contents-wrap h1{
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
font-weight: bold;
color: #f0f0f0;
}*/
/*#contents-wrap h2{
font-size: 2.0em;
font-weight: bold;
text-align: center;
padding: 15px 0;
margin-bottom: 2em;
color: #555;
}*/
#contents-wrap h1{
display: none;
}
#contents-wrap h2 {
font-family: helvetica, arial, "游ゴシック Medium", "Yu Gothic Medium", "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size: 2.8em;
font-weight: bold;
margin-bottom: 1.4em;
color: #4b84bd;
line-height: 1.2;
}
#contents-wrap h2 span{
font-size: 0.5em;
font-weight: bold;
color: #555;
display: block;
}
#contents-wrap h3{
font-size: 1.4em;
font-weight: bold;
margin-bottom: 0.3em;
}
#contents-wrap h4{
font-size: 1.1em;
font-weight: bold;
display: inline-block;
}
#contents-wrap h5{
font-size: 0.9em;
font-weight: bold;
margin-bottom: 0.7em;
}
#contents-wrap p{
font-size: 1.0em;
margin-bottom: 0.7em;
line-height: 2.0;
}





/* ABOUT US
------------------------------------------------------------*/
.mintyo{
font-family: /*"游明朝", YuMincho,*/ "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: bold;
color: #4b84bd;
}

/* 企業理念 */
#philosophy{
}
.philosophy-cont{
width: 100%;
margin: 0 auto ;
text-align: center;
}
#contents-wrap .philosophy-cont h3{
display: block;
margin-bottom: 0.7em;
color: #555;
line-height: 1.4;
}
.philosophy-cont p{
text-align: left;
}
.philosophy-cont h3{
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
padding: 0 10%;
}
.philosophy-cont h3 img{
width: 100%;
max-width: 594px;
height: auto;
}

/* 取組み事例 */
#practical-example{
}
.culture-cont{
display: flex;
width: 100%;
margin: 1% 0;
}
.culture-cont-l{
width: 86%;
margin-right: 2%;
}
.culture-cont-r{
width: 12%;
}
.culture-cont-r img{
width: 100%;
height: auto;
}

/* 代表メッセージ */
#message{
}
.message-wrap{
text-align: justify;
}
.message-wrap p:last-child{
text-align: right;
}
.message-text{

}
.message-img{
width: auto;
height: auto;
float: center;
margin: 0 0 3% 0;
/*border: solid 0.5px #D8D7D7;*/
/*box-shadow: 0 3px 4px rgba(0, 0, 0, 0.24);*/
}
.message-img img{
width: 100%;
height: 100%;
}
@media screen and (max-width:800px){
.message-img{
	width: 100% !important;
	}
}
/*object-fit: cover;
object-position: 70% 10%;*/

@media screen and (max-width:800px){
#content {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}

.masseage-ceo{
text-align: right;
font-weight: bold;
}

#message .mintyo{
font-family: /*"游明朝", YuMincho,*/ "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: bold;
color: #555;
}

/* 会社概要 */
#outline{
}
.outline-table{
width: 100%;
margin: 0 auto;
}
.outline-table th{
width: 15%;
margin: 0;
padding: 15px 0.5em;
vertical-align: top;
border-bottom: 1px #aaa solid;
}
.outline-table td{
margin: 0;
padding: 15px 0.5em;
line-height: 1.8;
border-bottom: 1px #aaa solid;
}

.temporary-link a{
display: inline-block;
max-width: 17em;
text-decoration: underline;
font-size: 0.8em;
}
.temporary-link :hover{
opacity: 0.7;
text-decoration: none;
}

@media screen and (max-width: 980px) {
.temporary-link a{
display: block;
max-width: 20em;
margin-bottom: 0.8em;
}
.temporary-link br{display: none;}
}


/* 沿革 */
#history{
margin: 0 auto;
padding: 0;
}

.history-table {
width: 100%;
margin: 10px auto;
overflow: hidden;
position: relative;
}
.history-table th {
/*float: left;*/
width: 158px;
clear: both;
padding: 10px 60px 20px 0;
text-align: right;
position: relative;
vertical-align: top;
}
.history-table td {
/*float: left;*/
padding: 10px 0 20px 20px;
word-break: keep-all;
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
.history-table:before {
content: "";
width: 1px;
position: absolute;
border-left: 2.0px solid #aaa;
top: 18px;
bottom: 0;
left: 138px;
}
.history-table th:before {
content: "";
width: 60px;
position: absolute;
border-top: 2px solid #aaa;
top: 20px;
right: -10px;
}
.history-table th:after {
content: "";
width: 4px;
height: 4px;
background: #fff;
border: 4px solid #4b84bd;
position: absolute;
border-radius: 50%;
top: 15px;
right: 13px;
}


/* Access */
#access{
}

#access dl{
position: relative;
width: 80%;
margin: 30px auto;
}
/*#access dl:first-of-type{
width: 52%;
margin: 20px auto;
}*/
#access dt{
display: inline-block;
width: 100px;
font-size: 1.0em;
font-weight: bold;
vertical-align: top;
line-height: 2.0;
}
#access dd{
display: inline-block;
margin-left: 2%;
line-height: 2.2;
}

.btn-work{
position: absolute;
bottom: 0.3em;
right: 0%;
line-height: 1.6;
}
.btn-work a{
display: block;
width: 100%;
margin: 0;
padding: 2px 15px;
font-family: "Century Gothic", Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 0.8rem;
text-align: center;
color: #aaa;
border: 2px #aaa solid;
transition: .3s;
}
.btn-work a:hover{
color: #fff;
background-color: #aaa;
font-weight: bold;
transform: scale(1.1);
}

.btn-work a span::after {
	content: "\f39c";
	font-family: ionicons;
	margin-left: 0.5em;
}

#mymap {
min-height: 150px;
min-width: 150px;
height: 400px;
width: 100%;
margin: 1% 0;
}
#mymap .infoTitle { }
#mymap .infoWebsite { }
#mymap .infoEmail { }
#mymap .infoTelephone { }
#mymap .infoDescription { }


/* Business area */
#business-area{
position: relative;
width: 100%;
height: auto;
}
#business-area:before {
content: "";
display: block;
padding-top: 67%;
}

.businessarea-text{
width: 55%;
position: absolute;
top: -30px;
left: 0;
z-index: 11;
}
.businessarea-img{
width: 100%;
max-width: 935px;
height: auto;
position: absolute;
top: 20%;
left: 0;
z-index: 10;
}



/* WORK
------------------------------------------------------------*/
/*.work-layout{
display: flex;
width: 100%;
}

/*.work-layout-l{
width: 70%;
}

.work-layout-r{
width: 30%;
margin-left: 3%;
text-align: right;
}

.work-layout-r img{
width: 100%;
height: auto;
}

.brief{
font-size: 1.1em;
margin-bottom: 7em;
}*/
.salespromotion-img{
	margin: 1.0em 0;
}

.work-layout-wrap{
    display: flex;
    width: 100%;
	flex-wrap: wrap;
    justify-content: space-between;
	}
.work-layout-list{
	margin: 0 0 25px;
	width: calc( 100% / 2 - 1em );
	/*align-items: center;*/
	border: solid #4B84BD thin;
    border-bottom: solid 10px #4B84BD;
	border-radius: 0 0 6px 6px;
	padding-bottom: 2.0em;
}
@media screen and (max-width: 800px) {
	div.work-layout-list {
		display: flex;
		flex-direction: column;
	    width: 100%!important;
	}
}


/*.work-layout-list{
	margin: 25px 0;
	width: 45%;
	align-items: center;
	box-shadow:2px 3px 12px -1px #c2c4c1;
    border-bottom: solid 10px #4B84BD;
	border-radius: 6px;
	padding-bottom: 2.0em;
}*/
.work-layout-title {
    width: 100%;
	height: auto;
	padding: 0.5em;
	margin-bottom: 1.0em;
	color: #fff;
	background: #4B84BD;
    text-align: left;
	font-size: 1.3em;
	font-weight: bold;
}
@media screen and (max-width: 800px) {
	.work-layout-title {
	margin-bottom: 0em;
	font-size: 1.1em;
	}
}
.work-layout-img{
	text-align: center;
	max-width: 350px;
	padding: 0 1em;
	margin: 1.5em auto;
	box-sizing: border-box;
}
.work-layout-img img{
    width: 100%;
    max-width: 350px;
}

.work-layout-text{
	margin: 0em 0.7em;
	padding-top: 1.7em;
    border-top: 1px solid #ccc;
}

@media screen and (max-width: 980px) {
.work-layout-list{
    margin: 0 0 30px;
	width: calc( 100% / 2 - 0.5em );
    padding-bottom: 1.0em;
}
.work-layout-img{
	width: 100%;
	margin: 0em auto 1.5em;
    padding: 0 0.em;
}
.work-layout-text{
	margin: 0em 0.7em;
	padding-top: 1em;
}
}
@media screen and (max-width: 800px) {
.work-layout-list{
    margin: 0 0 20px;
	width: 100%;
    padding-bottom: 1.2em;
}
.work-layout-img{
	margin: 1.0em auto;
    padding: 0 1em;
}
.work-layout-text{
	margin: 0em 1em;
	padding-top: 1em;
}
}

/* CREATIVE
------------------------------------------------------------*/
.design-service-wrap{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: 100%;
}
.design-service-cont{
width: calc(100% / 3 - 10px);
color: #4b84bd;
}

.design-service-icon{
position: relative;
width: 135px;
height: 135px;
margin: 0 auto 1em;
border-radius: 50%;
background: #4b84bd;
}
.design-service-icon img {
width : 80px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.design-service-cont h3{
font-size: 1.0rem!important;
margin: 0.5em!important;
text-align: center;
}
.design-service-list{
height: 14em;
padding: 0.7em;
border: 1px solid;
}

@media screen and (max-width: 980px) {
.design-service-icon{
width: 100px;
height: 100px;
}
.design-service-icon img {width : 60px;}
}
@media screen and (max-width: 800px) {
.design-service-wrap{
display: block;
width: 100%;
}
.design-service-cont{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 3em;
}
/*.design-service-cont-reverse{
flex-direction: row-reverse;
}*/
.design-service-icon-wrap{
flex-basis: 100px; 
margin-right: 2em;
}
/*.design-service-cont-reverse .design-service-icon-wrap{
margin-right: 0;
margin-left: 2em;
}*/
.design-service-list{flex-basis: 100%;}
}

.design-works-grid{
width: 100%;
margin: 0 auto;

display: flex;
flex-wrap: wrap;

display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 2em;
}
.design-works-grid li{
flex-basis: 23%;
/*text-align: center;*/
}
@media all and (-ms-high-contrast: none){
.design-works-grid li{ margin: 0 1% 1.3em; }
}


/*.design-works-grid li p{
margin: 0!important;
text-align: center;
line-height: inherit!important;
}
.design-works-grid li h3{
margin: 0!important;
margin-top: 0.7em!important;
font-size: 1.0em!important;
text-align: center;
}*/
/*.design-works-grid li h3, .design-works-grid li p{
display: inline-block;
margin: 0 auto;
text-align: left;
}*/

.design-works-grid .popup-modal h3, .design-works-grid .popup-modal p, .inline-modal h3, .inline-modal p, .iframe-modal h3, .iframe-modal p {
display: block;
/*display: inline-block;*/
margin: 0!important;
margin-bottom: 0.3em!important;
font-size: 1.0em!important;
text-align: center;
/*text-align: left;*/
line-height: 1.2!important;
}
.design-works-grid .popup-modal p span, .inline-modal p span, .iframe-modal p span{
margin: 0;
padding: 0;
margin-right: 0.3em;
font-size: 1.1em;
}


.design-works-grid li img {
/*width: 100%;
height: 190px;
object-fit: cover;*/
/*margin: 2px 0;*/
/*border: 1px solid #eee;*/
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
display:flex;
align-items: center;
}

.design-works-grid li:hover img {opacity: 0.7;}

.design-works-grid li figure {
position: relative;
overflow: hidden;
}
.design-works-grid li figure img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
object-fit: cover;
object-position: center top;
border: 1px solid #efefef;
}
.design-works-grid li figure img.design-works-grid-contain {
object-fit: contain;
}
.design-works-grid .popup-modal figure, .inline-modal .image, .iframe-modal .youtube{
margin-bottom: 1em!important;
}

.design-works-grid li figure:before {
content: '';
display: block;
padding-top: 100%;
}
.design-works-grid li figure:before {padding-top: 75%;}
/*.design-works-grid li figure:before {padding-top: 66.66%;}*/

.mfp-container {
margin: auto;
padding: 30px 8px!important;
max-width: 800px;
right: 0;
}
.inline-modal .mfp-close {
right: 0 !important;
}

@media screen and (max-width: 800px) {
.design-works-grid{
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.design-works-grid .popup-modal h3, .design-works-grid .popup-modal p, .inline-modal h3, .inline-modal p{
font-size: 0.9em!important;
}
}

.design-flow-cont{
padding: 0.7em;
border: 1px solid #4b84bd;

}
.design-flow-cont h3{
font-size: 1em!important;
color: #4b84bd;

}
.design-flow-cont p{
margin-bottom: 0;
line-height: 1.6!important;
}

.design-flow-triangle{
display: block;
width: 0;
height: 0;
margin: 1.6em auto 0;
border-top: 20px solid #4b84bd;
border-right: 40px solid transparent;
border-bottom: 20px solid transparent;
border-left: 40px solid transparent;
}


/* ボタン */
.design-btn{
width: 100%;
max-width: 500px;
margin: 3em auto!important;
text-align: center;
border: 1px solid;
}
.design-btn a{
display: block;
width: 100%;
margin: 0 auto;
padding: 0.7em;
font-size: 1em;
/*color: #fff!important;
background-color: #0b318f;
border-radius: 3px;
box-sizing: border-box;*/
}
.design-btn a::after {
content:"▶";
padding-left: 0.3em;
}


/* RECRUIT
------------------------------------------------------------*/
.recruit-top-wrap{
display: flex;
justify-content: center;
font-size: 1.6em;
}

.recruit-top-cont{
position: relative;
width: 35%;
height: auto;
margin: 3%;
text-align: center;
}
.recruit-top-cont::before{
display: block;
content: '';
padding-top: 100%;
}
.recruit-top-inner{
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 40% 3%;
background-color: #4b84bd;
z-index: 100;
}
.recruit-top-inner a{
width: 100%;
height: 100%;
color: #fff;
display: block;
}


#recruit:first-of-type{margin-bottom: 4em;}

.recruit-requirements{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
text-align: left;
font-size: 0.9em;
border-collapse: collapse;
border-left: 5px #4b84bd solid;
}
.recruit-requirements dt{
width: 130px;
padding: 0.8em 1em;
font-weight: bold;
border: 1px #aaa solid;
border-top-width: 0;
border-right-width: 0;
}
.recruit-requirements dd{
width: calc(100% - 130px);
padding: 0.8em 1em;
border: 1px #aaa solid;
border-top-width: 0;
}
.recruit-requirements dt:first-of-type, .recruit-requirements dd:first-of-type{
border-top: 1px solid #aaa; 
}

.recruit-workarea{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 1.0em;
}
.recruit-workarea li{
flex-basis: calc(100% / 3 - 0.8em);

font-weight: bold;
margin-bottom: 1em;
text-align: center;
}
.recruit-workarea li a{
width: 100%;
display: block;
padding: 0.8em 1em;
color: #fff !important;
background-color: #4b84bd;
border-radius: 3px;
}
.recruit-workarea li a:hover {text-decoration: none !important;}

.recruit-special-banner p{
font-size: 1.2em !important;
margin-top: 0.5em;
text-align: center;
line-height: 1.4 !important;
}
.recruit-special-banner a{opacity: 1;}
.recruit-special-banner a:hover{opacity: 0.7;}

#job-staff a{
    text-decoration: none;
    color: #00A0DA;/*色*/
}
#job-staff a:hover {text-decoration: underline;}


.recruit-entrybtn{
width: 100%;
margin: 3.0em auto 1.0em;
padding: 0;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.recruit-entrybtn span{
font-size: 1.2em;
display: inline;
margin: 0 0.3em;
}
.recruit-entrybtn a{
display: block;
width: 100%;
padding: 10px;
color: #4B84BD;
background-color: #fff;
border: 2px #4b84bd solid;
border-radius: 5px;
}
.recruit-entrybtn a:hover{
color: #fff;
background: #4b84bd;
border: 2px #fff solid;
border-radius: 5px;
}

.entry-link a{
padding: 5px 10px;
color: #fff;
background: #4b84bd;
border-radius: 2px;
}
.entry-link span{
display: inline;
margin: 0 0.3em;
}
.entry-link :hover, .recruit-workarea :hover{
opacity: 0.7;
}

.recruit-text p{text-align: center;}

/*.recruit-floatmenu{
width: 260px;
height: auto;
position: fixed;
bottom: 0;
right: 0;
padding: 0.8em;
text-align: center;
border: 2px #4b84bd solid;
border-top-width: 15px;
background-color: #fff;
z-index: 99999
}
.recruit-floatmenu h2{
font-size: 1.4em !important;
margin: 0 !important;
text-align: center;
}
.recruit-floatmenu p{
line-height: 1.2 !important;
text-align: left;
}

.entry-btn{
width: 100%;
margin: 0.8em 0 1.0em;
padding: 0;
font-size: 1.0em;
}
.entry-btn a{
display: block;
width: 100%;
padding: 5px;
color: #fff;
background: #4b84bd;
border-radius: 3px;
}*/

/* CONTACT
------------------------------------------------------------*/
/* お問い合わせ */
.contact-tel{
font-size: 1.1em;
line-height: 2.0;
margin-bottom: 1.4em;
}
 
 /* お問い合わせフォーム */
.form-wrap{width:100%; margin:0 auto;}
.form{width:100%; margin:0 auto 30px;}
.form span{font-size: 1.2em; margin-left: 0.2em;}
 
.form-text{
width:100%;
margin:0 auto 10px;
padding:5px;
font-size:1.0em;
color:#555;
border:solid 1px #ccc;
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
transition: all .5s;
}

.form-select {
display: flex;
justify-content: flex-start;
align-items: baseline;
flex-wrap: wrap;
width: 100%;
margin:10px auto;
}
.form-select li{
margin-right: 15px;
}
.form-select li:first-child{
margin-right: 30px;
}
.form-select li select{
width:100%;
margin:0 auto 10px;
padding:5px;
font-size:1.0em;
color:#555;
border:solid 1px #ccc;
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
transition: all .5s;
}

.form-select2 {
display: flex;
justify-content: flex-start;
align-items: baseline;
flex-wrap: wrap;
width: 100%;
margin:10px auto;

}
.form-select2 li{
margin-right: 15px;
font-size: 0.9em;
}
.form-select2 li:first-child{
width: 100%;
margin-bottom: 0.5em;
font-size: 1em;
}

/* プレースホルダーの色 */
input::-webkit-input-placeholder { color: #aaa; }
input::-moz-placeholder { color: #aaa; }
/*入力時の背景色*/
input:focus, select:focus, textarea:focus {
border:solid 1px #4b84bd;
box-shadow: 0 0 7px #4b84bd;
}

/* 必須 */
.requisite ::after {
content: "必須";
margin-left: 0.5em;
padding: 2px 3px 1px;
font-size: 0.7em;
color: #fff;
vertical-align: middle;
background-color: #B41E21;
border-radius: 0;
line-height: 1.0;
}

/* 同意するボタン */
.check {font-size: 1.2em; text-align: center;}
.check input[type="checkbox"]{margin-right: 0.5em;}

/* 確認ボタン */
.form-wrap input[type="submit"]{
display: block;
width: 100%;
margin: 3% auto;
padding: 1.5% 5%;
font-size: 18px;
font-weight:bold;
text-decoration:none;
text-align:center;
color: #fff;
background-color: #4b84bd;
border:none;
box-shadow: 1px 2px 7.7px 2.3px rgba(105, 105, 105, 0.27);
}
.form-wrap input[type="submit"]:hover {
opacity: 0.7;
}
/* 送信ボタン - 押せないとき */
.form-wrap input[type="submit"][disabled] {
background: #999;
color: #fff;
cursor: default;
}
.form-wrap input[type="submit"][disabled]:hover {
opacity: inherit;
}

.g-recaptcha-wrap{
width: 100%;
margin: 0 auto;
text-align: center;
}

/* Privacy Policy
------------------------------------------------------------*/
#contents-wrap #privacypolicy h2{
font-size: 1.3em;
color: inherit;
}
#contents-wrap #privacypolicy h3{
font-size: 1.1em;
margin-top: 1.2em;
}
#contents-wrap #privacypolicy h4 span{font-size: 1.0em; font-weight: normal;}
#contents-wrap #privacypolicy p{line-height: 1.6;}

#contents-wrap #privacypolicy p a, #contents-wrap #privacypolicy dl a{border-bottom: 1px solid;}
#contents-wrap #privacypolicy p a:hover, #contents-wrap #privacypolicy dl a:hover{border-bottom: none;}

#privacypolicy ul{}
#privacypolicy li{
list-style: inside;
padding-left: 1.0em; 
text-indent: -1.0em; 
}

#privacypolicy dl{
margin-top: 2.4em;
}
#privacypolicy p + dl{
margin-top: 0;
}
#privacypolicy dt{
font-weight: bold;
padding-left: 1.0em; 
text-indent: -1.0em;
margin-top: 1.2em;
}
#privacypolicy dd{margin-top: 0.4em;}

.pp-window{
height:350px;
margin: 0.7em 0 2em;
padding: 2% 2%;
overflow:auto;
border: 1px #ccc solid;
}

.pp-bg{
background-color: #f0f0f0;
margin: 1.2em 0;
padding: 0.7em 1em 1em;
}

.pp-window h4{
font-size: 0.8em;
}

#privacypolicy .pp-bg h3:nth-child(1){margin: 0;}

#privacypolicy .pp-bg p:last-child{margin: 0;}

/*制作内容スライダー*/
.works-slider-container {
  margin: 0 auto;
  max-width: 566px;
  width: 100%;
  position: relative; 
}

.works-slider-container img {
  margin-bottom: 0.8em;
}
	
.works-slider-container .slick-track {
  display: flex;
  align-items: center;
}

.works-slider-container .slide-arrow {
  background-color: transparent;
  position: absolute;
  top: 49.4%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0.8;
}

.works-slider-container .prev-arrow {
  border-bottom: 30px solid transparent;
  border-left: 0;
  border-right: 30px solid #CBCBCB;
  border-top: 30px solid transparent;
  left: -1%;
}

.works-slider-container .next-arrow {
  border-bottom: 30px solid transparent;
  border-left: 30px solid #CBCBCB;
  border-right: 0;
  border-top: 30px solid transparent;
  right: -1%; 
}

.works-slider-container .prev-arrow:hover {
  border-right-color: #f0f0f0;
}

.works-slider-container .next-arrow:hover {
  border-left-color: #f0f0f0;
}

.works-slider-container .slick-dots li {
  margin: 0 0.4em !important;
}

.works-slider-container .slick-dots button {
  padding: 0 !important;
  color: transparent !important;
  height: 3px !important;
  background: #5d5d5d !important;
  opacity: 0.8;
}

.works-slider-container .slick-dots .slick-active button {
  background: #fff !important; 
  width: 25px !important;
  margin-left: -2.5px!important;
}
	
.works-slider-container .slick-dots li button:before{
  content: ''!important;
}

@media screen and (max-width: 640px) {
.works-slider-container .prev-arrow {
  border-bottom: 25px solid transparent;
  border-right: 25px solid #CBCBCB;
  border-top: 25px solid transparent;
}
.works-slider-container .next-arrow {
  border-bottom: 25px solid transparent;
  border-left: 25px solid #CBCBCB;
  border-top: 25px solid transparent;
}
}

@media screen and (max-width: 480px) {
.works-slider-container .prev-arrow {
  border-bottom: 20px solid transparent;
  border-right: 20px solid #CBCBCB;
  border-top: 20px solid transparent;
}
.works-slider-container .next-arrow {
  border-bottom: 20px solid transparent;
  border-left: 20px solid #CBCBCB;
  border-top: 20px solid transparent;
}
  .works-slider-container .slide-arrow {
  top: 49.1%;
}
  .works-slider-container .slick-dots li {
  margin: 0 0.2em !important;
}
  .works-slider-container .slick-dots button {
    width: 15px !important;
    height: 2px !important; 
  }
  .works-slider-container .slick-dots .slick-active button {
    width: 18.8px !important; 
    margin-left: -2px !important; 
  }
}


@media screen and (min-width: 2000px) {
/* トップページ
*************************************************************/
/* work
------------------------------------------------------------*/
.work-cont-inner h2{font-size: 100px;}
.work-cont-inner h4, .work-cont-inner p.h2-kana {font-size: 32px;}
.work-cont-inner p:not(.h2-kana){font-size: 22px; margin-top: 2.4em;}
}



@media screen and (min-width: 1200px) {
/* トップページ
*************************************************************/
/* hello
------------------------------------------------------------*/
.hello p{font-size: 1.3em;}
}


@media screen and (max-width: 1060px) {
/* トップページ
*************************************************************/
/* hello
------------------------------------------------------------*/
#hello-bg{background-attachment: scroll;}
.hello{width: 70%;}

/* work
------------------------------------------------------------*/
#work-bg{background-attachment: scroll;}

.work-cont-inner p:not(.h2-kana){
font-size: 1.2vw;
line-height: 1.8;
margin-top: 1.6vw;
}

/* latest news
------------------------------------------------------------*/
#latestnews-wrap{background-attachment: scroll; padding-top: 25vh;}

#stage-6{justify-content: center;}

.news-wrap{width: 348px; margin: 20px;}
.recruitbanner-wrap{width: 348px; margin: 20px;}
.support-banner-wrap {
    width: 776px;
    max-width: inherit;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
.support-img{margin: 20px;}
/*box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);*/

/* コンテンツページ
*************************************************************/
/* Aboutus
------------------------------------------------------------*/
/* 会社概要 */
.outline-table th{width: 18%;}
/* Access */
#access dl{width: 100%;}

/*#access dl:first-of-type{width: 100%;}*/

/* Business area */
#business-area{position: static;}
#business-area:before {padding-top: 0%;}

.businessarea-text{width: 100%; position: static;}
.businessarea-img{position: static;}
}


@media screen and (max-width: 980px) {

#wrap{margin: 0 auto 5%;}

/* トップページ
*************************************************************/
/* work
------------------------------------------------------------*/
#stage-3,#stage-4,#stage-5{padding-top: 75%;}

.work-cont-l,.work-cont-r{width: 43%;}

.work-cont-inner h2{font-size: 6.0vw;}
.work-cont-inner h4 {font-size: 1.8vw; line-height: 1.6;}
.work-cont-inner p:not(.h2-kana){font-size: 1.4vw; margin-top: 1.4vw;}

/* 背景画像 */
.work-img-l{right: 5%;}
.work-img-r{left: 5%; text-align: right;}

/* latest news
------------------------------------------------------------*/
#latestnews-wrap{background-size: 94%;}


/* コンテンツページ
*************************************************************/
/* Aboutus
------------------------------------------------------------*/
/* 企業理念 */
.culture-cont-l{width: 73%; margin-right: 2%;}
.culture-cont-r{width: 25%;}
}


@media screen and (max-width: 800px) {
/* フッター
------------------------------------------------------------*/
footer{padding-top: 5%;}

/* フッター1段目 ナビ */
.foot-nav{flex-wrap: wrap; margin: 0 auto;}
.foot-nav + .foot-nav{margin-bottom: 5%;}
.foot-nav li{margin: 2% 4%;}

/* フッター2段目 SNS Pマーク */
.foot-Second-wrap{flex-wrap: wrap; margin: 0 0 5%;}

.foot-contact a{font-weight: normal;}
.foot-sns li{font-weight: normal;}

/* Pマーク */
.foot-pmark{
width: 100%;
margin-top: 3%;
margin-left: 0%;
}

/* トップページ
*************************************************************/
/* トップページ コンテンツ
------------------------------------------------------------*/
#stage-1{display: block; padding: 10% 0 0;}

@-moz-document url-prefix() { #stage-1{display: block;}}

.head-nav{margin: 0 0 20px;}

/* hello
------------------------------------------------------------*/
.hello{width: 90%;}
.hello p{font-size: 1.0em;}

/* work
------------------------------------------------------------*/
#stage-3,#stage-4,#stage-5{padding-top: 75%;}

.work-cont-l,.work-cont-r{min-width: 320px; }

.text-wrap{width: 95%;}
.work-cont-inner h2{font-size: 3.0em;}
.work-cont-inner h4, .work-cont-inner p.h2-kana {font-size: 1.2em; line-height: 1.4;}
.work-cont-inner p:not(.h2-kana){font-size: 0.8em; line-height: 1.8;}

/* latest news
------------------------------------------------------------*/
#stage-6{
padding: 0 5%;
display: block;
text-align: center;
}

/* 更新情報 */
.news-wrap{
width: 100%;
max-width: inherit;
margin: 0 auto;
}
.news-wrap::after {display: inherit; padding-top: 0%;}

.news-cont{position: static; padding: 3% 5% 15%;}
.news li{text-align: left;}

/* リクルートバナー */
.recruitbanner-wrap{
display: inline-block;
width: 48%;
max-width: inherit;
margin: 5% 3% 0 0;
}
.recruit-banner img{min-width: inherit; max-width: inherit;}

/* スポンサー */
.support-banner-wrap{
display: inline-block;
width: 48%;
max-width: inherit;
}
.support-img{margin: 20px 0 0;}
.support-img img{min-width: inherit; max-width: inherit;}
	
@media screen and (max-width: 800px){
.support-img{margin: 5.6% 0 0;}
}
/*@media screen and (max-width: 640px){
.recruit-banner img{margin-bottom: 1.5em;}
.support-img img{margin-bottom: 1.5em;}
}*/

/* エンゲージ */
.recruitwidget-wrap{
margin: 2em auto 0;
padding: 1.5em;
}


/* コンテンツページ
*************************************************************/
#main{padding: 100px 0;}

.sidenav-wrap{top: 80px;}
.side-nav li{margin: 20px 0;}

#contents-wrap section{margin-bottom: 5em;}
#contents-wrap article{margin-top: 1.6em;}

#contents-wrap h2{font-size: 2.4em; margin-bottom: 1.0em;}


/* ABOUT US
------------------------------------------------------------*/
/* 代表メッセージ */
.message-img{width: 250px;}

/* 取組み事例 */
.culture-cont{align-items: center;}

/* 会社概要 */
.outline-table{border: 1px #aaa solid; border-bottom: 0;}
.outline-table th{
width: 100%;
padding: 10px 0.5em;
display: block;
background-color: #f0f0f0;
}
.outline-table td{padding: 10px 0.5em; display: block;}

/* 沿革 */
.history-table th {width: 155px;}

.history-table:before {left: 128px;}
.history-table th:before {
content: "";
width: 30px;
position: absolute;
border-top: 2px solid #aaa;
top: 20px;
right: 11px;
}
.history-table th:after {
content: "";
width: 4px;
height: 4px;
background: #fff;
border: 4px solid #4b84bd;
position: absolute;
border-radius: 50%;
top: 15px;
right: 20px;
}
.history-table td {padding: 10px 0 20px 5px;}

/* Business area */
#business-area:before {display: none; padding-top: 0;}

/* Access */
#access dl{margin: 2em auto;}
/*#access dl:first-of-type{margin: 0px auto 1em;}*/

.btn-work{bottom: -1em;}

#mymap {min-height: 100px; height: 250px;}


/* WORK
------------------------------------------------------------*/
.work-layout{display: block;}
.work-layout-l{width: 100%;}
.work-layout-r{
width: 100%;
margin-left: 0;
text-align: center;
}
.work-layout-r img{
height: 270px;
object-fit:cover;
object-position: 0 40%;
}

.brief{margin-bottom: 2.4em;}
	



/* recruit
------------------------------------------------------------*/
.recruit-special-banner p{
font-size: 1.0em !important;
}


/* CONTACT
------------------------------------------------------------*/
/* お問い合わせフォーム */
/* 確認ボタン */
.form-wrap input[type="submit"]{margin: 5% auto 0;}
}


@media screen and (max-width: 640px) {
#wrap{padding:12% 0 0;}

/* フッター
------------------------------------------------------------*/
.foot-nav li{margin: 2%;}

/* CONTACTボタン */
.foot-contact{width: 92%;}

/* SNSボタン */
.foot-sns{
width: 92%;
margin-top: 2%;
border-left: 2px #fff solid;
}

/* トップページ
*************************************************************/
/* トップページ コンテンツ
------------------------------------------------------------*/
#stage-1{
height: auto;
min-height: inherit;
padding: 5% 0 0;
}

/* メインヘッド */
#header{
padding: 1% 0;
position: fixed;
top:0;
left: 0;
right: 0;
background-color: #fff;
z-index: 999999;
}

.head-nav{margin: 0;}
.head-nav li{margin: 0 1.5%;}
.head-nav li:first-child {margin-left: 2%;}
.head-nav li:nth-child(2), .head-nav li:nth-child(3), .head-nav li:nth-child(4), .head-nav li:nth-child(5){display: none;}

/* ヒーローイメージ */
#canvas{padding: 0 1%;}
.hero-wrap img{height: 350px; object-fit: cover;}

/* hello
------------------------------------------------------------*/
#hello-bg{background-size: 94% auto; padding-top: 270px;}

/* work
------------------------------------------------------------*/
#work-bg{background-size: 94% auto;/**/ padding-top: 230px;}

#stage-3,#stage-4,#stage-5{padding-top: 10%;}

.work-cont-l,.work-cont-r {width: 70%; top:15%;}

.work-cont-wrap{padding-bottom: 40px;}
.work-cont-wrap::before{padding-top: 65%;}
.work-cont-inner{
padding: 5%;
background-color: rgba(55, 118, 182, 0.9);
display: block;
}
.work-cont-r .work-cont-inner{display: block;}

.text-wrap{width: 100%;}

.work-cont-inner h2{font-size: 2.4em;}
.work-cont-inner p{margin-top: 1.0em;}

.work-cont-r h2,.work-cont-r h4{display: block; margin-left: 0;}

/* 背景画像 */
.work-img-l{position: relative; right: 0;}
.work-img-r{position: relative;
left: 0;
text-align: left;
}

figure img {height: 450px; object-fit: cover;}
figure img:hover {transform: none;}
.work-img-l figure img{object-position: top left;}
.work-img-r figure img{object-position: top right;}

/* latest news
------------------------------------------------------------*/
#latestnews-wrap{padding-top: 200px;}

/* リクルートバナー */
.recruitbanner-wrap{width: 100%; margin: 5% 0 0;}

/* スポンサー */
.support-banner-wrap{width: 100%;
magin-bottom: 3.0em}
.support-img{margin: 5% 0;}

/* エンゲージ */
.recruitwidget-wrap{
margin: 0 auto 0;
padding: 0.5em;
}


/* コンテンツページ
*************************************************************/
#main{
width: 100%;
max-width: inherit;
margin-left: 0;
margin-right: 0;
padding: 100px 3%;
}
#sideber{display: none;}

#contents-wrap h2{font-size: 2.0em; margin-bottom: 1.0em;}
#contents-wrap h3{font-size: 1.2em;}

/* ABOUT US
------------------------------------------------------------*/
/* 代表メッセージ */
.message-img{
width: 100%;
height: 100%;
float: none;
margin: 0 0 1em;
}


/* 沿革 */
.history-table th {
float: none;
width: 25%;
min-width: 119px;
padding: 2% 1%;
text-align: left;
vertical-align: top;
border-bottom: 1px #aaa solid;
}
.history-table td {
float: none;
padding: 2% 1%;
vertical-align: top;
border-bottom: 1px #aaa solid;
}
.history-table td span{display: inline;}
.history-table:before, .history-table th:before, .history-table th:after{display: none;}
.history-table br {
margin-bottom: 30px;
}

/* Access */
#access dl{margin: 40px auto;}
#access dd{display: block;margin-left: 0;}


/* WORK
------------------------------------------------------------*/
.work-layout-r img{height: 230px;}
	
.sliderArea {
max-width: 100%;
margin: 0 auto;
padding: 0 25px;
}
.sliderArea.w300 {
max-width: 300px;
}
.slick-slide {
margin: 0 5px;
}
.slick-slide img {
width: 100%;
height: auto;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
color: white;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 10px;
line-height: 20px;

position: absolute;
top: 0;
left: 0;

width: 20px;
height: 20px;

content: '●';
text-align: center;

opacity: .25;
color: gray;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: white;
}

.slick-arrow {
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
padding: 0;
width: 20px;
height: 38px;
color: transparent;
z-index: 1;
transition: opacity 0.5s;
z-index: 1;
}
.slick-arrow:hover {
opacity: 0.7;
}
.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
width: 26px;
height: 26px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}

.slick-next {
right: 26px;
}
.slick-next::after {
right: 4px;
transform: rotate(45deg);
}

.slick-prev {
left: 26px;
}
.slick-prev::after {
left: 4px;
transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
.slick-next::after,
.slick-prev::after {
width: 10px;
height: 10px;
}
.slick-next {
right: 8px;
}
.slick-prev {
left: 8px;
}
.slick-next::after {
right: 2px;
}
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: 1;
}
.slick-current {
opacity: 1;
}
.thumb {
margin: 20px 0 0;
}
.thumb .slick-slide {
cursor: pointer;
}
.thumb .slick-slide:hover {
opacity: .7;
}

h3 > .ion-videocamera,
h3 > .ion-android-desktop,
h3 > .ion-android-color-palette {
  margin-right: 0.2em;
}

/* RECRUIT
------------------------------------------------------------*/
.recruit-requirements{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
text-align: left;
font-size: 0.9em;
border-collapse: collapse;
border-left: none;/**/
border-top: 5px #4b84bd solid;/**/
}
.recruit-requirements dt{
flex-basis: 100%;/**/
padding: 0.5em 0.8em;/**/
font-weight: bold;
border: 1px #aaa solid;
border-top-width: 0;
border-right-width: 1px;/**/
background-color: #f0f0f0;/**/
}
.recruit-requirements dd{
width: 100%;
padding: 0.5em 0.8em;/**/
border: 1px #aaa solid;
border-top-width: 0;
}
.recruit-requirements dt:first-of-type, .recruit-requirements dd:first-of-type{
border-top-width: 0; 
}


/* CONTACT
------------------------------------------------------------*/
 /* お問い合わせフォーム */
.form-select li:first-child{
width: 100%;
margin-bottom: 0.5em;
}

/* 同意するボタン */
.check {font-size: 1.2em; text-align: center;}
.check input[type="checkbox"]{margin-right: 0.5em;}

/* 確認ボタン */
.form-wrap input[type="submit"]{width: 100%; margin: 8% auto 0;}


/* Privacy Policy
------------------------------------------------------------*/
.pp-window{height:250px;}
}


@media screen and (max-width: 360px) {

/* フッター
------------------------------------------------------------*/
.foot-nav li{margin: 1%;}


/* トップページ
*************************************************************/
.work-cont-l,.work-cont-r{width: 100%;}
.work-cont-wrap{padding-bottom: 0px;}
.work-cont-wrap::before{padding-top: 75%;}

.work-cont-inner h2{font-size: 2.0em;}
.work-cont-inner h4, .work-cont-inner p.h2-kana{font-size: 1.0em;}
.work-cont-inner p:not(.h2-kana){font-size: 0.8em;}


/* コンテンツページ
*************************************************************/
#contents-wrap section{margin-bottom: 5em;}
#contents-wrap article{margin-top: 1.6em;}

#contents-wrap h2{font-size: 1.8em;}
#contents-wrap h3{font-size: 1.1em;}
#contents-wrap h4{font-weight: normal;}
}

@media screen and (min-width: 801px){	
/*.br-980 { display:none; }
.br-800 { display:none; }
.br-640 { display:none; }
.br-480 { display:none; }
.br-360 { display:none; }*/
.br-pc { display:block; }
}
@media screen and (min-width:801px) and (max-width: 980px){	
/*.br-800 { display:none; }
.br-640 { display:none; }
.br-480 { display:none; }
.br-360 { display:none; }
.br-pc { display:none; }*/
.br-980 { display:block; }
}
@media screen and (min-width:641px) and (max-width: 800px){	
/*.br-pc { display:none; }
.br-980 { display:none; }
.br-640 { display:none; }
.br-480 { display:none; }
.br-360 { display:none; }*/
.br-800 { display:block; }
}
@media screen and (min-width:481px) and (max-width: 640px){	
/*.br-pc { display:none; }
.br-980 { display:none; }
.br-800 { display:none; }
.br-480 { display:none; }
.br-360 { display:none; }*/
.br-640 { display:block; }
}
@media screen and (min-width:361px) and (max-width: 480px) {
/*.br-pc { display:none; }
.br-980 { display:none; }
.br-800 { display:none; }
.br-640 { display:none; }
.br-360 { display:none; }*/
.br-480 { display:block; }
}
@media screen and (max-width: 360px) {
/*.br-pc { display:none; }
.br-980 { display:none; }
.br-800 { display:none; }
.br-640 { display:none; }
.br-480 { display:none; }*/
.br-360 { display:block; }
}

/*pp-link
------------------------------------------------------------*/
.pp-link a:link{ color:#0000FF; }
.pp-link a:visited { color:#6600FF; } 
.pp-link a:hover { color:#555; } 
.pp-link a { text-decoration: underline; }
.pp-link { margin:10px 0 0 0 }