@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*
	
	IPA フォントライセンスv1.0
	-------------------------------------------------------------------------------
	"ipag" licensed under the IPA Font License Agreement v1.0
	http://ipafont.ipa.go.jp/old/ipafont/download.html（配布元のURL）
	http://ipafont.ipa.go.jp/（IPAフォントのURL）
	http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）

*/

@font-face {
		font-family: "ipag";
		src: url("../../font/ipa/ipag.woff2") format('woff2'),
				 url("../../font/ipa/ipag.woff")  format('woff'),
				 url("../../font/ipa/ipag.ttf")   format('truetype');
				font-weight: 400;
	}

@font-face {
		font-family: "bebas";
		src: url("../../font/bebas/bebas_font.woff2") format('woff2'),
				 url("../../font/bebas/bebas_font.woff")  format('woff'),
				 url("../../font/bebas/bebas_font.ttf")   format('truetype');
				
	}




/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 
html,
body { height:100%; }

html{}
body { min-width: 1024px; height:auto; margin-right: 0 !important; background:#fff;}

body *{/* border:1px solid #000000; background:rgba(000,000,000,0.1)*/}



/* フォントの指定 */
body,input,select,textarea {
	font-family:"ipag","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000; font-size:15px; line-height:1.8; letter-spacing:0.05em;}

/* フォントの指定 */
a {color:#000; text-decoration: none;}
p {text-align: justify; text-justify:inter-ideograph;}


.case h2 span,
.work h2 span,
.work h3 span,
.company h2 span,
.company h3,
.company b
{ font-family: "bebas",sans-serif;
	letter-spacing: 0.01em;
	font-weight: 400;
}

.work h2,
.work h3 span,
.company h2
{ color: #2f5166;}





/*-------------------------------------------------

	header

--------------------------------------------------*/

.header	{ padding-top: 99px;}
.header .logo { position: relative;}
.header .logo * { display: block; position: absolute; top: 0; left: 0;}
.header .logo,
.header .logo * { width: 270px; height: 44px; margin: 0 auto 196px; text-indent: -9999px;}
.header .logo span { background: url(../img/share/rogo.png) no-repeat;}

.header .title { width: 90%; max-width: 1121px; margin: 0 auto 60px;}
.header .title img { display: block; width: 100%;}

.header p:nth-of-type(2) { margin-bottom: 75px; font-size: 17px; letter-spacing: .15em; text-align: center;}

.header .slider { overflow: hidden; width: 100%; margin-bottom: 123px;}
.header .slider li img { display: block; width: 100%; margin: 0 auto;}


/*-------------------------------------------------

	contents

--------------------------------------------------*/

.contents { position: relative;}

/*--Nav-----------------------------------------*/
.nav { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 53px; background: rgba(0,0,0,0.4);}
.nav ul { width: 420px; margin: 0 80px 0 auto;}
.nav ul li { display: inline-block; margin: 0 17px; line-height: 53px;}
.nav ul li a { display: block; color: #fff;}

.fixed { position: fixed; top: 0; left: 0; z-index: 2;}

/*--About-----------------------------------------*/
.about { padding: 190px 0 114px; background: url(../img/share/about_back.jpg) no-repeat;}
.about .inner { overflow: hidden; width: 960px; margin: 0 auto;}
.about .inner h2 { margin-bottom: 108px;}
.about .inner .text_wrap { margin-bottom: 60px; padding-left: 195px; font-size: 21px; color: #fff;}
.about .inner .text_wrap p { margin-bottom: 76px;}
.about .inner .text_wrap p:nth-of-type(1) { line-height: 2.6em;}
.about .inner .text_wrap p:nth-of-type(2) { line-height: 2.095em;}
.about .inner .profile { overflow: hidden; width: 385px; margin: 0 0 0 auto; color: #fff;}
.about .inner .profile>img { display: block; float: right; padding-left: 40px;}
.about .inner .profile .text_profile { padding-top: 20px;}
.about .inner .profile .text_profile p { overflow: hidden; text-align: right;}
.about .inner .profile .text_profile p:nth-of-type(1) { font-size: 20px;}



/*--Case-------------------------------------------------------------------*/
.case { padding: 150px 0; background: #2f5166;}
.case h2 { margin-bottom: 92px; text-align: center; font-size: 16px; font-weight: normal; color: #fff;}
.case h2 span { display: block; font-size: 52px;}
.case .inner { width: 960px; margin: 0 auto;}
.case .inner ul {display: flex; flex-wrap: wrap;}
.case .inner ul li { width: 160px;}
.case .inner ul li a { display: block; position: relative;}
.case .inner ul li a span { opacity: 0; display: block; position: absolute; top: 0; left: 0;}



/*--Work-------------------------------------------------------------------*/
.work { padding: 155px 0 110px; background: rgba(98,146,150,0.2);}
.work h2 { margin-bottom: 92px; text-align: center; font-size: 16px; font-weight: normal;}
.work h2 span { display: block; font-size: 52px;}

.work .inner { overflow: hidden; width: 100%; max-width: 1142px; margin: 0 auto;}
.work .inner .category { float: left; width: 33.33%; max-width: 350px; min-height: 470px; margin: 0 1.34%; background: #fff;}
.work .inner .category .photo { display: block; margin-bottom: 44px;}
.work .inner .category .photo img { display: block; width: 100%;}
.work .inner .category h3 { margin-bottom: 15px; font-size: 18px; font-weight: normal;text-align: center;}
.work .inner .category h3 span { padding-right: 10px; font-size: 25px; vertical-align: sub;}
.work .inner .category p { width: 250px; margin: 0 auto; line-height: 1.6;}
@media screen and (max-width: 1160px) {
.work .inner .category { width: 31.2%; margin: 0 1%;}

}


/*--Company-------------------------------------------------------------------*/
.company { padding: 142px 0 168px;}
.company h2 { margin-bottom: 92px; text-align: center; font-size: 16px; font-weight: normal;}
.company h2 span { display: block; font-size: 52px;}
.company .inner { overflow: hidden; width: 946px; margin: 0 auto;}
.company .inner h3 { margin-bottom: 15px; font-size: 35px;}
.company .inner .l_box { float: left; width: 472px;}
.company .inner .l_box .company_detail { margin-bottom: 52px;}
.company .inner .l_box .company_detail table th { width: 138px; font-weight: normal;}
.company .inner .l_box .company_detail table td { padding-bottom: 10px;}

.company .inner .l_box .access h3 { margin-bottom: 6px;}
.company .inner .l_box .access > p { margin-bottom: 12px;}
.company .inner .l_box .access > p span { display: inline-block; width: 108px; height: 34px; margin-right: 14px; text-align: center; line-height: 34px; color: #fff; background: #000;}
.company .inner .l_box .access > p b { padding-left: 14px; font-size: 37px; font-weight: normal;vertical-align: sub;}
.company .inner .l_box .access .map p { margin-bottom: 10px;}
.company .inner .l_box .access .map iframe { width: 100%; height: 280px;}

.company .inner .r_box { float: right; width: 382px;}
.company .inner .r_box .sns p { margin-bottom: 36px; font-size: 14px;}
.company .inner .r_box .sns p a { display: block; width: 210px; height: 45px; margin-top: 8px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 45px; text-align: center; color: #fff; background: #3a5999;}
.company .inner .r_box .sns p span { display: inline-block; padding-left: 37px; background: url(../img/share/facebook_icon.png) left center no-repeat;}



/*-------------------------------------------------

	footer

--------------------------------------------------*/
.footer p { padding-bottom: 15px; font-size: 13px; text-align: center;}



/*-------------------------------------------------

	Page_link

--------------------------------------------------*/
.top_btn { position: fixed; right: 80px; bottom: 50px; z-index: 3; width: 56px; height: 55px;}
.top_btn a { display: block;}
.top_btn a img { display: block; margin: 0 auto; padding-top: 1em;}