@charset "UTF-8";
/*
Theme Name: XeoryExtensionChild
Theme URI: https://xeory.jp/extension
Template: xeory_extension
Description: Xeory拡張子テーマ
Author: バズ部
Author URI: https://bazubu.com/
Version: 1.0.0
*/

/* Web Site Color Setting */
/*********** 10.main_bg ***********/

body.home #main_visual {
  background-color: #fff !important;
  background-image: -webkit-linear-gradient(bottom right, #fff, #fff);
  background-image: linear-gradient(to top left, #fff, #fff);
  color: #fff;
  text-align: center;
}

body.home .front-loop h2 {
    text-align: center;
    padding: 24px 0;
    margin: 0;
    border-bottom: 1px solid #000426;
    font-size: 24px;
}
/*********** 11.header ***********/
body #header {
    background: #000426 !important;
    }

#gnav {
    background-color: #000426;
    }

#gnav ul li a {
    background-color: #000426;
    }

#gnav ul li a:hover,
#gnav ul li a:focus {
    background-color: #fff;
    }

#gnav ul li.current-menu-item a {
    background: #000426;
    }

#header-fnav-area #header-fnav-btn a {
    background-color: #000426;
    }

#header-nav-btn a {
    background-color:#fff;
    }

@media (max-width: 767px) {

#header-nav-btn a {
    background-color: #fff;
    }
    
}

/*********** 12.ribon ***********/
/* トップページ：クローズアップ記事・サービス記事の色変更 */

body.home .front-main-cont .front-cont-header {
    background-color: #000426;
    }

body.home #front-contents .c_number {
    background-color: #000426;
    }

body.home #front-contents h3 {
    color: #000426;
    }

body.home #front-service .front-service-inner h3 {
    color: #000426;
    }

.c_btn .btn {
    background-color:#009fb7 !important;
    color:#fff !important;
    }

body.home .front-main-cont .tri-border span {
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-left: 56px solid transparent;
    border-right: 56px solid transparent;
    border-top: 18px solid #000426;
}

/*********** 13.footer ***********/

#footer {
    border-top:solid 8px #000426 !important;
    }

#footer #footer-brand-area {
    border-bottom: 1px solid #000426;
    }

#footer .footer-01 {
    background-color:#000426;
    }

#footer .footer-02 {
    background-color:#000426;
    }

/*01  roading logo animeation  ロゴ設定CSS */

/*********** 01.animeation ***********/
.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.items{
	padding: 40px 0;
   padding-top: 40px;
   padding-right: 0px;
   padding-bottom: 40px;
   padding-left: 0px;
}

.item{
	width: 32%;
	height: 100%;
	background: #fff;
	opacity: 1;
	overflow: hidden;
	position: relative;
}

.item p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.item img {
  width: 100%;
  }

.item .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
}
.item .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.item:hover2 .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

@media screen and (max-width: 960px) {
	
	.items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
	.item {
	width: 50%;
	height: 100%;
	}
}

/*********** 02.animeation ***********/

.hover figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.hover figure:hover img {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
}

/*********** 03.animeation ***********/

.logo_move {
 width: 100vw;
 height: 100vh;
 background-color: #fff;
 position: relative;
}
 
.logo_move svg {
 display: block;
 width: auto;
 position: absolute;
 top: 50%;
 left: 50%;
  -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
 
.anime {
 width: 100vw;
 height: 100vh;
 background-color: #cb5151;
 position: relative;
}
 
.anime img {
 display: block;
 width: auto;
 position: absolute;
 top: 50%;
 left: 50%;
  -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}

/* svglogo_backgroud_image css
   ----------------------------- */
.bgsvg {
    width: 100vw;
    height: 100vh;
    background: #000;
    animation: bgAnime 1s linear 1.8s forwards;
}

@keyframes bgAnime {
0%{
    opacity: 1;
}
99%{
    opacity: 0;
}
100%{
    opacity: 0;
    display: none;
}
}

/*********** 04.footercustom ***********/
#header #header-sns .feedly_icon {
    display: none;
}


/*********** 05.colorcustom ***********/
/* お問い合せの色変更 */

#front-contact .c_box {
    background-color:#fff !important;
    }

#front-contact label {
    color:#000 !important;
    }

/* トップページ：クローズアップ記事の修正（画面幅991px以下） */

@media (max-width: 991px) {
    
body.home #front-contents .front-cont-header {
    margin-bottom: 0px !important;
    }
    
}

@media (max-width: 991px) {
    
body.home #front-service .front-cont-header {
    margin-bottom:30px !important;
    } 

body.home #front-service .front-service-inner .c_box {
    padding-top:10px;
    }
    
body.home #front-service .front-service-inner .c_box:first-child {
    border-bottom:solid 1px #ababab;
    } 
    
body.home #front-service .front-service-inner .c_box h3 {
    margin-top: 5px;
    font-size:25px;
    } 
    
body.home #front-service .front-service-inner .c_box .c_text br {
    display:none;
    }