@import url(http://fonts.googleapis.com/css?family=M+PLUS+1p);

body{
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, Helvetica, sans-serif !important;
	height:100%;
	overflow:hidden;
}

.mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}

	.only_mb{
		display:none;
	}

#header {
	background-color: #FFFFFF;
	border-top-width: 2px;
	border-top: none;
	border-bottom: 1px solid #948f8e;
}

#header a,
#header_logo .logo a {
	color: #009c6f;
	color: #3a459a;
}
/*#header_image {
	width: auto;
height: 290px;
    height: 330px;
}*/
.caption p.rich_font {
    font-family: "Hiragino Kaku Gothic Pro", "HiraKakuProN", "ヒラギノ角ゴ", "メイリオ", sans-serif;
    font-weight: bold;
    text-shadow: black 0px 0px 0px, black 0px 3px 10px, black 0px 0px 0px, #898989 3px 3px 15px;
    color: #fff;
    letter-spacing: 2px;
}
.header_inner{
	min-height: 80px;
}
.fix_top.header_fix #header {
	/*border-bottom: 1px solid rgba(137,137,137,0.9) !important;*/
    /*background-color: rgba(137,137,137,0.9) !important;*/
    border-bottom: 0px !important;
    background-color: rgba(225,225,225,1) !important;
}
.cart_icon {
    float: right;
    padding-top: 17px;
    padding-left: 10px;
}
.cart_icon a {
	display: block;
}
.fix_top.header_fix #header .cart_icon {
    padding-top: 13px;
}
#logo_text .logo a {
	display: flex;
	align-items: center;
}

#logo_text .logo a img {
	max-width: 60px;
	margin-right: 10px;
}

/*#global_menu ul > li:after {
	content: '';
	position: absolute;
	width: 0;
	height: 1px;
	left: 0;
	bottom: 0;
	transition: all .3s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	background-color: #3A459A;
}

#global_menu ul > li:hover:after {
	width: 100%;
}*/

#global_menu > ul > li > a {
    height: 70px;
    line-height: 70px;
    font-weight: bold;
}

#global_menu > ul > li > a:hover {
	color: #3a459a !important;
	color: #009c6f !important;
}

#header_slider {
	max-width: 100%;
	/*margin-top: 30px;
	margin-bottom: 30px;
	background-image: url(/wp-content/uploads/2020/09/bg.jpg);
	padding-top: 10px;
	padding-bottom: 10px;*/
}

/*#header_slider:after{
	content: '';
	background-image: url(/wp-content/uploads/2020/09/staff.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	bottom: 0;
	z-index: 1;
	text-align: center;
	left: 0;
	right: 0;
	padding-top: 18%;
}

#header_slider img {
	display: block;
	width: 90%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}*/

.video_box {
	width: 102%;
	height:80vh;
	overflow:hidden;
	position: relative;
}

video {
  position: absolute;
  top: 54%;
  left: 49%;
    min-width: 100%;
  min-height: 109%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:0;
}


#header_slider .item1 .caption .headline { font-size:30px; text-shadow:1px 1px 1px #009c6f; color:#898989 }
#header_slider .item1 .caption .catchphrase { font-size:14px; text-shadow:1px 1px 1px #009c6f; color:#898989; margin-top:10px; }


p{
	color:#333;
}

.sec{
}

.sec h1{
	font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
	letter-spacing:0.1em;
	font-size:78px;
	font-weight:100;
	text-align:center;
	color:#3451A2;
	    margin-bottom: 60px;
		margin-top:60px;
}

.sec h1 span{
	display:block;
	font-size:26px;
	color:#959495;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing:0.1em;
	font-weight:bold;
	margin-top:10px;
}


@media screen and (max-width:991px) {
  #header_slider .item1 .caption .headline { font-size:20px; }
  #header_slider .item1 .caption .catchphrase { font-size:12px; }
}


#header_slider .item:nth-of-type(n+2) {
	display: block;
}

#header_slider .caption > :nth-child(-n+3) {
	opacity: 1;
}

.fix_top.header_fix #header_logo .logo a {
	display: flex;
	align-items: center;
}

.fix_top.header_fix #header_logo img {
	    width: 90%;
	margin-right: 10px;
}

.fix_top.header_fix #global_menu > ul > li > a {
}

.home #main_col {
	background: #fff;
	width: 100%;
	position: relative;
	/*z-index: 10;*/
}
.top_description {
	font-size:17px;
	color: #3e3a39;
}

/* コンテンツビルダー */
.box_list { width:100%; position:relative;}
.box-sizer { width:25%; }
.box_list .box {
  float:left; position:relative; width:25%; overflow:hidden; background:#000;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.box_list .box2 { width:50%; }
.box_list .box:before { content:""; display:block; padding-top:200%; }
.box_list .box2:before { padding-top:65%; }

.box_list .box_inner { position:absolute; top:0; left:0; bottom:0; right:0; }
.box_list .box_inner .content { padding:0 calc(100% * 50 / 363); position:absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); /*transform: skewY(5deg)*/;
}

.box_list { color:#fff; /*transform: skewY(-5deg);*/}
.box_list a { color:#fff; }

/* リンクボタン */
/*.box_list*/ .link_button a { text-decoration:none; color:#fff; margin:30px 0 0 0; display:inline-block; background:#000; height:45px; line-height:45px; font-size:14px; width:170px; text-align:center; }
.box_list .link_button a:hover { opacity:0.8; color:#fff; }
.home .link_button a:hover{
	background: #595757;
    color: #fff;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* 最新の投稿・お知らせ */
.box_list .catch { line-height:1.7; margin:0 0 15.3px 0; font-size: 18px; font-weight: 400; }
.box_list .index_recent_post li { line-height:180%; font-size:12px; margin:0 0 18px 0; }
.box_list .index_recent_post li:last-child { margin:0; }
.box_list .index_recent_post li a { display:block; font-size: 14px; line-height:1.7; }
.box_list .index_recent_post li a:hover { text-decoration:none; }
.box_list .index_recent_post .date { font-size:11px; color:#aaa; }

/* コンテンツボックス */
.box_list .headline { position:absolute; top:0px; left:0px; width:100px; height:100px; line-height:100px; text-align:center; background:rgba(0,0,0,0.3); font-weight: 400; font-size: 14px; }
.box_list .desc p { line-height:2.2; font-size:14px; }
.box_list .image_box a {
  display:block; width:100%; height:100%; background:rgba(0,0,0,0.3);
  -webkit-transition:background-color 0.5s ease; -moz-transition:background-color 0.5s ease; -o-transition:background-color 0.5s ease; transition:background-color 0.5s ease;
}
.box_list .image_box a:hover { background:rgba(0,0,0,0); }
.box_list .image_box .image_content { display:block; width:100%; height:100%; }
.box_list .image_box img { display:none; }

@media only screen and (max-width:1199px) {
	.box_list .headline { width:80px; height:80px; line-height:80px; font-size:14px; }
	.box-sizer { width:50%; }
	.box_list .box { width:50%; }
	.box_list .box2 { width:100%; }
	.box_list .box_inner .content { padding:0 30px; }
	.box_list .headline { left:0; right:0; margin:auto;  }
	.box_list .link_button { text-align:center; }
	.box_list .box:before { padding-top:120%; }
	.box_list .box:before { padding-top:120%; }
	.box_list .box2:before { padding-top:100%; }
}

/* ----------------------------------------------------------------------
 制作実績一覧
---------------------------------------------------------------------- */
.work_list { width:100%; position:relative; margin-top:-100px; margin-bottom:100px;  transform: skewY(-5deg); background-color: #fff;}
.work_list .box {
  float:left; position:relative; width:25%; overflow:hidden;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.work_list .box:before { content:""; display:block; padding-top:100%; }

.work_list .box_inner { position:absolute; top:0; left:0; bottom:0; right:0; margin:-3px; }
.work_list .box_inner .content { position:relative; width:100%; height:100%; height:-webkit-calc(100% + 1px); height:-moz-calc(100% + 1px); height:calc(100% + 1px); background:#000; }

/* カテゴリー */
.work_list .category { position:absolute; top:0px; left:0px; z-index:10; }
.work_list .category a { background:#423A9C; color:#fff; font-size:12px; padding:0 20px; height:30px; line-height:30px; display:none; text-decoration:none; }
.work_list .category a:first-child { display:block; }
.work_list .category a:hover { opacity:0.8; color:#fff; }

/* タイトル */
.work_list .title {
  position:absolute; bottom:0px; left:0px; z-index:10; width:100%; font-weight:normal; font-size:14px; line-height:1.6;
  -webkit-transform: translate3d(0,101%,0); transform: translate3d(0,101%,0);
  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;
}
.work_list .title a {
  display:block; width:100%; background:#008038; opacity:0.8; color:#fff; padding:15.8px; text-decoration:none;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
.work_list .content:hover .title { -webkit-transform: translate3d(0,1px,0); transform: translate3d(0,1px,0); }

/* 画像 */
.work_list .image { position:absolute; display:block; width:auto; height:100%; top:0px; left:0px; }
.work_list .image img {
  display:block; width:auto; width:-webkit-calc(100% + 1px); width:-moz-calc(100% + 1px); width:calc(100% + 1px); height:100%;
  opacity:0.8; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;
  -webkit-backface-visibility: hidden;
}
.work_list .content:hover img { opacity:1; }

.footer_headline {
	margin-bottom: 9px;
}

.footer_headline a {
	color: #423A9C;
}

#footer_widget .footer_inner {
	display: flex;
}

.footer_inner .widget_custom_html {
	margin-right: 0;
	text-align: center;
}

/*トップのお問い合わせ*/
.contact_box{
	max-width:900px;
	margin:auto;
	padding:10%;
}

.contact_box h2{
    color: #000000;
    font-size: 24px;
    margin-bottom: 30px;
	text-align:center;
}

.contact_box .text_box{
	display:flex;
	justify-content:center;
	flex-wrap:no-wrap;
	align-items:center;
	
}

.contact_box .text_box p{
	position:relative;
	padding-bottom:5px;
	font-family: 'M+ Type-1 (general-j) Regular';
	font-size:14px;
	margin-right:40px;
	margin-top:15px;
}

.contact_box .text_box p span {
  display: block;
  width: 110%;
  height: 2px;
  background-color: #000;
  position: absolute;
  bottom:0;
  transform: scale(0, 1);
transform-origin: top left;
animation: arrow01 5s ease-in-out infinite forwards;
}

@keyframes arrow01 {
    0% { transform: scale(0, 1); }
    30% { transform: scale(0, 1); }
    40% { transform: scale(1, 1); }
    85% { transform: scale(1, 1); opacity: 1;}
    90% { transform: scale(1, 1); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 0; }
}

.contact_box .text_box p span::after {
content: "";
display: block;
width: 8px;
height: 15px;
border-right: 2px solid #000;
transform: rotate(-45deg) scale(1, 0);
transform-origin: right bottom;
position: absolute;
bottom: 2px;
right: 1px;
animation: arrow02 5s ease-in-out infinite forwards;
}

@keyframes arrow02 {
    0% { transform: rotate(-45deg) scale(1, 0); }
45% { transform: rotate(-45deg) scale(1, 0); }
55% { transform: rotate(-45deg) scale(1, 1); }
    85% { transform: rotate(-45deg) scale(1, 1); opacity: 1;}
    90% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
    100% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
}

.contact_box .text_box .link_button a{
	margin:0;
	width:100%;
}

.sns_box{
	width:55px;
	height:auto;
	margin:30px auto;
}
.sns_box img{
	max-width:100%;
	height:auto;
}

#bread_crumb ul {
	max-width: none;
    padding: 0 5%;
}

/*お知らせ*/
#main_col.news_list {
    padding: 0 5%;
}
#main_col.news_list #left_col {
	margin: auto;
	float: none;
}
#main_col.news_list #recent_news li:first-child {
    border-top: 1px solid #ddd;
}
#main_col.news_list .page_navi {
	text-align: center;
}
#main_col.news_list .page_navi ul{
	text-align: center;
    display: block;
    border-left: none;
}
/* レスポンシブ */
@media screen and (max-width: 1279px) {
	#header_slider {
		width: 100%;
	}
	.cart_icon {
	    padding-top: 13px;
	    padding-left: 0;
	    padding-right: 22px;
	}
	.cart_icon a {
	    width: 30px;
	}
	.cart_icon a img {
	    width: 100%;
    }
}
@media screen and (max-width: 1024px) {
	#global_menu > ul > li > a {
    height: 94px;
    line-height: 94px;
    font-weight: bold;
}
#global_menu a, #global_menu > ul > li > a {
    font-size: 2.3rem;
}
}
@media screen and (max-width: 960px) {
.sec h1{
	font-size:4rem;
}
}
@media screen and (max-width:768px) {
		#global_menu > ul > li > a {
    height: 65px;
    line-height: 65px;
    font-weight: bold;
}
#global_menu a, #global_menu > ul > li > a {
    font-size: 1.3rem;
}
}
@media screen and (min-width:768px) {
	.slick-slider .slick-list {
		height: 80vh !important;
	}

	#header_slider .caption {
		top: 40%;
		width: 35%;
		right: 4%;
		left: auto;
	}
}

@media screen and (max-width:767px) {
	.home #main_col {
		width: auto;
		margin: 0 auto;
		padding: 0;
		background: #fff;
		position: relative;
		z-index: 10;
	}
	

}


@media only screen and (max-width: 991px) {
	.header_inner {
		min-height: 60px;
	}

	#header_logo img {
		max-height: 50px;
	}

	.mobile_fix_top.header_fix #header {
		background-color: #bbbbbb;
	}
	
	a.menu_button:before {
		color: #fff;
	}
}

/* コンテンツビルダー */
@media screen and (max-width:767px) {
  .box-sizer { width:100%; }
  .box_list .box { width:100%; }
  .box_list .box2 { width:100%; }
  .box_list .box:before { display:none; }
  .box_list .box2:before { display:none; }
  .box_list .box_inner { position:relative; top:0; left:0; bottom:0; right:0; }
  .box_list .box_inner .content {
    padding:30px;
    position:relative; top:0; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);
  }
  .index_recent_post .box_inner .content { padding:100px 30px 80px; }
  .content_box .box_inner .content { padding:50px 30px; }
  .box_list .image_box a, .box_list .image_box .image_content { height:500px; background:none; }
  .box_list .headline { width:70px; height:70px; line-height:70px; font-size:12px; }
	.box_list .link_button a { font-size:12px; }
	.box_list .catch { line-height:1.4; margin-bottom:13px; }
}
@media screen and (max-width:767px) {
  .box_list .image_box a, .box_list .image_box .image_content { height:350px; }
  
}




/* ----------------------------------------------------------------------
 制作実績一覧
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	.work_list .box { width:50%; }
	/*.work_list .title { -webkit-transform: translate3d(0,1px,0); transform: translate3d(0,1px,0); }*/
	.work_list .title, .work_list .content:hover .title { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
	.work_list .box { margin-top:-1px; }
	.work_list .title a { background:#008038; opacity:0.8; padding:10.8px; }
	.work_list .image img { opacity:1; }
	.work_list .category a { width:100px; height:30px; line-height:30px; padding:0; text-align:center; }
}

@media only screen and (max-width: 560px){
	#main_col{
		padding:0;
	}
	
	#header_logo img{
    width: 75% !important;
    height: auto !important;
    max-height: none !important;
	margin-top:5px;
}
	
	.sec h1 {
    font-size: 2.5rem;
	}
	
	.sec h1 span{
		font-size:1.5rem;
	}
	
.footer_contents{
	flex-wrap:wrap;
}

.footer_logo_img {
    width: 100%;
}

.footer_menu {
    width: 100%;
}

.footer_menu ul{
	width:40%;
}

ul#newsList li > div{
	margin:auto;
}


}

@media screen and (max-width:560px) {
	.only_mb{
		display:block;
	}
	
}

@media screen and (max-width:550px) {
  .work_list .box { width:100%; }
}
@media screen and (max-width: 414px){
		#global_menu a, #global_menu > ul > li > a {
    font-size: 1.5rem;
}
#global_menu > ul > li > a {
    height: 60px;
    line-height: 60px;
    font-weight: bold;
}
#global_menu > ul > li> a > img {
    width: 46px;
    margin-top: 7px;
}
}
@media screen and (max-width:375px) {
	.sec h1 {
    font-size: 35px;
	margin-bottom: 35px;
    margin-top: 35px;
}
#global_menu > ul > li > a {
    height: 54px;
    line-height: 54px;
}
#global_menu > ul > li> a > img {
    width: 46px;
    margin-top: 4px;
}
}
@media screen and (max-width:360px) {
#global_menu > ul > li > a {
    height: 51px;
    line-height: 51px;
    font-weight: bold;
}
}
@media screen and (max-width:320px) {
#global_menu > ul > li > a {
    height: 45px;
    line-height: 45px;
    font-weight: bold;
}
#global_menu > ul > li> a > img {
    width: 30px;
    margin-top: 7px;
}
#global_menu a, #global_menu > ul > li > a {
    font-size: 1rem;
}
}