@charset "UTF-8";

/* -----------------------------------------------
 *  	         base style setting
 * ----------------------------------------------- */

/* =========== base =========== */
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  color: #000000;
	background-color:#faf8f3;
  word-wrap: break-word;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: "Noto Sans JP", "メイリオ", "Meiryo", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.6;

  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
		opacity:0;
}
@media only screen and (max-width: 48em) {
  body {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

article,
aside,
figure,
figcaption,
details,
footer,
header,
hgroup,
nav,
section,
summary,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
}

ul,
input {
  padding: 0;
}

article,
aside,
figure,
figcaption,
details,
footer,
header,
hgroup,
nav,
section,
summary,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
th,
td {
  box-sizing: border-box;
}

address{font-style:normal;}

article,
aside,
figure,
figcaption,
details,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

img {
  width: 100%;
  width: 100%\9;
  border: none;
  vertical-align: middle;
}

svg{width:100%;}

a {
	color:#000;
	text-decoration: underline;
	}
a:hover {
	text-decoration:none;
	}
a:visited {
	color:#000;
	}

/* clearfix */
.clearfix:after {
  display: block;
  visibility: hidden; 
  clear: both;
  height: 0;
  content: "";
}
/* =========== youtube setting =========== */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.19%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* =========== Loading =========== */
div#loading{
	position: fixed;
	width:100%;
	height:100vh;
	background-color:#000;
	z-index:10000;
	}
div#loading img{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:25px;
	height:25px;
	}
/* =========== Loading =========== */


/* =========== backToTop =========== */
div#backToTop{
	position:fixed;
	bottom:3%;
	right:3%;
	width:40px;
	height:40px;
	border:solid 1px #000000;
	background:url(/common/img/backtotop_off.png) no-repeat center center;
	background-size:cover;
	cursor:pointer;
	z-index:99999;
	}
div#backToTop:hover{
	opacity:0.6;
	transition:0.6s;
	background:url(/common/img/backtotop_on.png) no-repeat center center;
	background-size:cover;
	}


/* ========== openningArea ========== */

article.openning_area{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	z-index:10000;
	background-color:#faf8f3;
	}
div.opening_bg{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100vh;
	background:url(/top/img/openning_bg.jpg) no-repeat;
	background-size:cover;
	background-position:right bottom;
	z-index:10001;
	opacity:0;
	}
div.opening_inner{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10002;
	}
svg.svg_openning_logo{
	display:block;
	height:60px;
	width:100px;
	padding:50px 0 0 30px;
	margin:0 0 50px 0;
	opacity:0;
	}
svg.svg_lth_big{
	display:block;
	fill:none;
	height:250px;
	width:650px;
	padding:0 0 0 30px;
	margin:0 0 50px 0;
	opacity:1;
	stroke:#000;
	stroke-width:0.5px;
  stroke-dasharray: 500;
	stroke-dashoffset: 500;
	}
p.openning_message1{
	font-size:1.6em;
	font-size:16px;
	margin:0 0 50px 0;
	padding:0 0 0 30px;
	font-family:'Roboto Condensed', sans-serif;
	opacity:0;
	}
p.openning_message2{
	font-size:1.6em;
	font-size:16px;
	padding:0 0 0 30px;
	opacity:0;
	}
div.click_to_go{
	position:absolute;
	bottom:100px;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	padding:10px 50px;
	width: 180px;
	cursor:pointer;
	z-index:99999;
	opacity:0;
	background-color:#000;
	border:solid 2px #000000;
	}
div.click_to_go p{
	font-size:1.8em;
	font-size:18px;
	line-height:1;
	letter-spacing:1px;
	color:#ffffff;
	font-weight:bold;
	font-family:'Roboto Condensed', sans-serif;
	}
/* hover */
div.click_to_go:hover{
	background-color: transparent;
	border:solid 2px #000000;
	transition:0.3s;
	}
div.click_to_go:hover p{
	color:#000000;
	transition:0.3s;
	}
/* 768px */
@media only screen and (max-width: 48em) {
div.opening_bg{
	background:url(/top/img/openning_bg.jpg) no-repeat;
	background-size:cover;
	background-position:right bottom;
	}
div.opening_inner{
	position:absolute;
	top:0;
	left:0;
	width:96%;
	}
svg.svg_openning_logo{
	display:block;
	height: auto;
	width:80px;
	padding:50px 0 0 30px;
	margin:0 0 10px 0;
	opacity:0;
	}
svg.svg_lth_big{
	height:200px;
	width:450px;
	padding:0 0 0 30px;
	margin:0 0 50px 0;
	}
p.openning_message1{
	font-size:1.4em;
	font-size:14px;
	margin:0 0 50px 0;
	padding:0 0 0 30px;
	}
p.openning_message2{
	font-size:1.2em;
	font-size:12px;
	padding:0 0 0 30px;
	}
div.click_to_go{
	position:absolute;
	bottom:20px;
	left:0;
	right:0;
	margin:auto;
	cursor:pointer;
	z-index:10010;
	opacity:0;
	}
}
/* 480px */
@media only screen and (max-width: 30em) {
div.opening_bg{
	background:url(/top/img/openning_bg480.jpg) no-repeat;
	background-size:cover;
	background-position:right bottom;
	}
div.opening_inner{
	position:absolute;
	top:0;
	left:0;
	width:98%;
	}
svg.svg_openning_logo{
	display:block;
	height: auto;
	width:60px;
	height:80px;
	padding:5px 0 0 10px;
	margin:0 0 0 0;
	opacity:0;
	}
svg.svg_lth_big{
	height:130px;
	width:300px;
	padding:0 0 0 10px;
	margin:0 0 20px 0;
	}
p.openning_message1{
	font-size:1.2em;
	font-size:12px;
	margin:0 0 20px 0;
	padding:0 0 0 10px;
	}
p.openning_message2{
	font-size:0.9em;
	font-size:9px;
	padding:0 0 0 10px;
	}
div.click_to_go{
	position:absolute;
	bottom:60px;
	left:0;
	right:0;
	margin:auto;
	cursor:pointer;
	z-index:10010;
	opacity:0;
	}
}

/* =========== pageBase =========== */
div.base_area {
  position: relative;
  margin:0;
  padding:0;
  min-width: 320px;
  width: 100%;
}
/* =========== pageBase =========== */


/* =========== mainArea =========== */
div.main_area {
	position:relative;
  margin:0;
  padding:0;
}
/* =========== mainArea =========== */


/* =========== headerArea =========== */
header.header_area_pc{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:800;
	border-bottom:#d8d6d5 1px solid;
	background-color:#faf8f3;
	}

/* 全幅border */
div.header_box_pc{
	border-bottom:#d8d6d5 1px solid;
	}
	
/* inner+limiti960 */
div.header_box_pc_inner{
	position:relative;
	margin:0 auto;
	}

/* sns_nav */
nav.sns_nav_pc{
	height:40px;
	width:100%;
	padding-top:10px;
	}
ul.sns_nav_list{
	float:right;
	list-style:none;
	}
ul.sns_nav_list li{
	float:left;
	width:30px;
	height:30px;
	margin-right:5px;
	}
ul.sns_nav_list li:last-child{
	margin-right:0px;
	}
ul.sns_nav_list li a{
	display:block;
	line-height:0;
	}
svg.svg_facebook{
	width:30px;
	height:30px;
	fill:#666969;/* #324F86 */
	}
svg.svg_instagram{
	width:30px;
	height:30px;
	fill:#666969;
	}
svg.svg_facebook:hover,svg.svg_instagram:hover{
	opacity:0.6;
	transition:0.8s;
	}

	
/* headerlogo & copy */
div.head_logocopy{
	position:relative;
	width:100%;
	margin-bottom:20px;
	}
h1.header_logo{
	margin:0 auto;
	width:80px;
	height:65px;
	transition:0.6s;
	}
h1.header_logo a{
	display:block;
	margin:0;
	padding:0;
	}
h1.header_logo svg.svg_head_logo{
	width:80px;
	height:65px;
	}
p.header_copy{
	position:absolute;
	bottom:0;
	right:0;
	font-size:0.9em;
	font-size:9px;
	line-height:1;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:bold;
	letter-spacing:2px;
	}
/* スクロール時に小さくなる場合 */
div.head_logocopy.is_scroll{
	margin-bottom:0px;
	}
h1.header_logo.is_scroll{
	transition:0.6s;
	transform:scale(0.8, 0.8)!important; 
	-webkit-transform:scale(0.8, 0.8)!important;  
  -moz-transform:scale(0.8, 0.8)!important;
	}
h1.header_logo.is_scroll svg.svg_head_logo{
	transform:scale(0.8, 0.8)!important; 
	-webkit-transform:scale(0.8, 0.8)!important;  
  -moz-transform:scale(0.8, 0.8)!important;
	}
p.header_copy.is_scroll{
	bottom:15px;
	right:0;
	font-size:0.5em;
	font-size:5px;
	}	
	
/* hover */
h1.header_logo svg.svg_head_logo:hover{
	fill:#666;
	transition:0.6s;
	}
	


/* gNav_pc */
nav.gnav_pc{
	margin:0 auto;
	}
ul.gnav_list_pc{
	width:100%;
	margin:0 auto;
	}
ul.gnav_list_pc li{
	display:block;
	float:left;
	width:calc(100% / 7);
	margin:0;
	padding:0;
	text-align:center;
	}
ul.gnav_list_pc li a{
	position:relative;
	display:inline-block;
	width:100%;
	margin:0;
	padding:18px 0;
	font-size:1.4em;
	font-size:14px;
	line-height:1;
	text-decoration:none;
	font-weight:lighter;
	letter-spacing:1px;
	font-family:'Abril Fatface', cursive!important;
	}
ul.gnav_list_pc li a:after{
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
	right:0;
	margin:auto;
  width: 65%;
  height: 2px;
  background-color: #000000;
          transform: scaleX(0);
  		-ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
 			    transition: all .3s ease;
  -webkit-transition: all .3s ease;
	}
ul.gnav_list_pc li a:hover:after{
  				transform: scaleX(1);
      -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
	}
/* 768px */
@media only screen and (max-width: 48em) {
header.header_area_pc{
	display:none;
	}
}

/* localnav */
nav.local_nav_area{
	display:none;
	background-color:;
	border-top: #d8d6d5 1px solid;
	padding:0;
	}
ul.lnav_list{
	display:none;
	margin:0 auto;
	list-style:none;
	}
ul.lnav_list li{
	display:inline-block;
	margin:0 18px 0 0;
	padding:0 0 0 18px;
	background: url(../svg/svg_allow01_right.svg) no-repeat left center;
	background-size:10px 10px;
	}
ul.lnav_list li a{
	display:block;
	padding:6px 0;
	font-size:1.4em;
	font-size:14px;
	text-decoration:none;
	font-weight: lighter;
	font-family:'Abril Fatface', cursive;
	}
/* hover */	
ul.lnav_list li:hover{
	opacity:0.6;
	transition:0.6s;
	}
	
/* localNav 出し分け設定 */
/* bodyにclass has_local_navがある場合領域表示 */
body.has_local_nav nav.local_nav_area{display:block;}
/* bodyにid aboutBodyがある場合lnavAbout表示 */
body#aboutBody ul#lnavAbout{display:block;}
body#businessBody ul#lnavBusiness{display:block;}
body#recruitBody ul#lnavRecruit{display:block;}
body#developBody ul#lnavDevelop{display:block;}



/* ====== headerAreaMB ======= */
header.header_area_mb{
	display:none;
	z-index:999;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:3% 0;
	background-color:#faf8f3;
	}
header.header_area_mb.is_scroll{
	padding:1% 0!important;
	transition:0.6s;
	}
/* 768px */
@media only screen and (max-width: 48em) {
header.header_area_mb{
	display: block;
	}
}

div.mb_hidden_box{
	display:none;
	position: fixed;
	width:100%;
	background-color:#faf8f3;
	}
	
nav.gnav_mb{
	}
ul.gnav_list_mb{
	list-style:none;
	text-align:center;
	}
ul.gnav_list_mb li{
	padding:0;
	font-size:1.6em;
	font-size:16px;
	border-bottom:solid 1px #d8d6d5;
	}
ul.gnav_list_mb li a{
	display:block;
	width:100%;
	height:100%;
	padding:5% 0;
	text-decoration:none;
	font-family:'Abril Fatface', cursive;
	}

/* sns用サブリスト */
ul.gnav_list_mb li > ul.gnav_list_mb_sub{
	margin:0 auto;
	padding:10px 0 5px 0;
	}
ul.gnav_list_mb li > ul.gnav_list_mb_sub li{
	display:inline-block;
	border:none;
	}
ul.gnav_list_mb li > ul.gnav_list_mb_sub li:first-child{
	margin-right:10px;
	}

/* ボタンとその動き */
#navBTN{
  display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:10%;
  width: 32px;
  height: 36px;
  margin: auto;
	padding:0;
  border:none;
	line-height:0;
}
#navBTN:hover{
	background-color:#faf8f3;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 0;
	bottom:0;
  left: 0;
  width: 32px;
  height: 5px;
  margin: auto;
  background: #1c0500;
  transition: 0.2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 5px;
  background: #1c0500;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -14px;
}
#panel-btn-icon:after{
  margin-top: 10px;
}

/* 閉じた後 */
#navBTN .close{
  background: transparent;
}
#navBTN .close:before, #navBTN .close:after{
  margin-top: 0;
}
#navBTN .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#navBTN .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

span.mobile_menu{
	display:block;
	position:absolute;
	bottom:-10px;
	width:35px;
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:0.8em;
	font-size:8px;
	color:#000;
	letter-spacing:0.6px;
	}
.ui-button-text-only .ui-button-text{
	padding:0 !important;
	}

/* =========== headerArea =========== */




/* =========== contentArea =========== */
div.content_area {
  position: relative;
	width:100%;
	margin:0;
	padding:0 0 8% 0;
}
div.content_area_inner {
  position: relative;
	width:100%;
	margin:0 auto;
	padding:0;
}

/* 960px */
@media only screen and (max-width: 60em) {
div.content_area {
	width:100%;
	margin:0 auto;
}
}
/* 480px */
@media only screen and (max-width: 30em) {
div.content_area {
}
}
/* =========== contentArea =========== */


/* breadcrumb_list */
section.breadcrumb_list{
	padding:3% 0 0 0;
	}
section.breadcrumb_list > ul{
	margin:0 auto;
	list-style:none;
	}
section.breadcrumb_list > ul li{
	display:inline-block;
	}


/* =========== footerArea =========== */
footer.footer_area {
	position:relative;
	width:100%;
  margin:0;
  padding:0;
	text-align:left;
}

div.footer_area_inner{
	margin:0 auto;
	padding:20px 0;
}

nav.footer_nav{
	text-align:left;
	}
ul.footer_nav_list{
	text-align:center;
	}
ul.footer_nav_list li{
	display:inline-block;
	margin-right:40px;
	}
ul.footer_nav_list li:last-child{
	margin-right:0px;
	}
ul.footer_nav_list li a{
	font-size:1.2em;
	font-size:12px;
	text-decoration:none;
	}
ul.footer_nav_list li a:hover{
	}

/* footer_copy */
small.footer_copy{
	font-size:1.2em;
	font-size:12px;
	}
	
/* 960px */
@media only screen and (max-width: 60em) {
div.footer_area_inner {
	width:98%;
	margin:0 auto;
}
}
/* 480px */
@media only screen and (max-width: 30em) {
div.content_area {
}
}
/* =========== footerArea =========== */




/* =========== asideArea =========== */
/* brandLogo 中身のリストはcompornent */
aside.aside_brand_logo{
	padding:2% 0;
	background-color:#faf8f3;
	border-top:solid #d8d6d5 1px;
	}
/* 480px aside内のみ、logo_sectを480以下でアコーディオン化 */
@media only screen and (max-width: 30em) {
aside.aside_brand_logo section.brand_logo_sect{
	display:none;
}

h3.bland_accordion_btn{
	background-image:url(/common/img/accordion_plus.png);
	background-repeat: no-repeat;
	background-size:15px 15px;
	background-position:center right 20px;
	}
h3.bland_accordion_btn.accordion_close{
	background-image:url(/common/img/accordion_plus.png);
	}
h3.bland_accordion_btn.accordion_open{
	background-image:url(/common/img/accordion_minus.png)!important;
	}

/* contentArea内に存在する場合は無し */
.in_content_area h3.bland_accordion_btn{
	background-image: none !important;
	}
}


/* contact */
aside.aside_contact{
	}
article.contact_arti{
	margin:0 0 10% 0;
	padding:30px;
	background-color:#faf8f3 ;
	border:solid #d8d6d5  1px;
	}
article.contact_arti div.contact_left{
	float:left;
	width:50%;
	border-right:solid #000 2px;
	}
article.contact_arti div.contact_right{
	float:left;
	width:50%;
	padding:10px 0 0 0;
	}

/* 600px */
@media only screen and (max-width: 37.5em) {
/* contact */
aside.aside_contact{
	}
article.contact_arti{
	padding:30px 20px;
	background-color:#faf8f3;
	}
article.contact_arti div.contact_left{
	float:none;
	width:100%;
	border-right:none;
	border-bottom:solid #000 2px;
	}
article.contact_arti div.contact_right{
	float:none;
	width:100%;
	}
}
/* =========== asideArea =========== */






/* =========== fullwidth_type =========== */
/* 背景白_上下ボーダー */
.fullwidth_typeA{
	width:100%;
	background-color:#faf8f3 ;
	border-top:#d8d6d5 1px solid;
	border-bottom:#d8d6d5 1px solid;
	}
/* 背景ベージュ_上下ボーダー */
.fullwidth_typeB{
	width:100%;
	background-color:#faf8f3;
	border-top:#d8d6d5 1px solid;
	border-bottom:#d8d6d5 1px solid;
	}
/* 背景ベージュ_ボーダー無し */
.fullwidth_typeC{
	width:100%;
	background-color:#faf8f3;
	}

/* =========== inner_type =========== */
.inner_typeA{
	position:relative;
	margin:0 auto;
	padding:20px 0;	
	}
/* 960px */
@media only screen and (max-width: 60em) {
.inner_typeA{ width:98%;}
}

/* typeB backWhite */
.inner_typeB{
	position:relative;
	margin:0 auto;
	padding:20px 0;
	background-color:#FFF;	
	}
/* 960px */
@media only screen and (max-width: 60em) {
.inner_typeB{ width:98%;}
}


/* =========== WidthLimit =========== */
.limit1600{max-width:1600px;}
.limit1400{max-width:1400px;}
.limit1200{max-width:1200px;}
.limit1024{max-width:1024px;}
.limit960{max-width:960px;}
.limit768{max-width:768px;}
.limit480{max-width:480px;}

.limited{width:96%;}

@media only screen and (max-width: 60em) {
	.limit960{width:96%;}
}


/* ==============modalSetting============== */
#mdOverlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:#000000;
	z-index:1000;
	}
#mdClose{
	position:fixed;
	top:10px;
	right:10px;
	width:50px;
	height:50px;
	background: url(/common/img/md_close.png) no-repeat;
	background-size:cover;
	cursor:pointer;
	z-index:9999;
	}
#mdWindow{
	display:none;
	position: relative;
	width:98%;
	max-width:960px;
	height: auto;
	margin:50px auto 50px auto;
	padding:20px 0 50px 0;
	z-index:1001;
	background-color:#faf8f3;
	}
.md_inner{
	max-width:960px;
	width:70%;
	height: auto;
	margin:0 auto;
	}
div.modal_txt_box1{
	margin:0 0 5% 0;;
	padding:20px;
	background-color:#FFF;
	}
@media only screen and (max-width: 48em) {
.md_inner{
	width:96%;
	}
}

/* ==============modalSlideSetting============== */
.bx-wrapper{
	margin-bottom:3% !important;
	border:none !important;
	background:none !important;
	box-shadow:none !important;
	}



/* 1400px */
@media only screen and (max-width: 87.5em) {
}
/* 1024px */
@media only screen and (max-width: 64em) {
}
/* 960px */
@media only screen and (max-width: 60em) {
}
/* 768px */
@media only screen and (max-width: 48em) {
}
/* 720px */
@media only screen and (max-width: 45em) {
}
/* 600px */
@media only screen and (max-width: 37.5em) {
}
/* 480px */
@media only screen and (max-width: 30em) {
}
/* 320px */
@media only screen and (max-width: 20em) {
}