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


/* Reset ---------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
margin:0; padding:0; border:0; font-size:12px; font-style:inherit; vertical-align:baseline;
}
a img{
border:none;
}

img.imglink {
	vertical-align:auto;
	}


/* Layout ---------------------------------- */

html,body {
	
}

body {
	color: #000;
	font-family:Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
	text-align: left;
	line-height: 1.6;
	background-color:#FFF;
}

.corazon {
	width: 999px;
	margin:0 auto;
}

.head {
	width: 999px;
	height:85px;
	overflow:hidden;
}

.content {
	position:relative;
	width: 999px;
	height: 687px;
	overflow:hidden;
	background-repeat: no-repeat; /* PCではリピートさせない */
	background-position: left top; /* 左上に配置 */
	background-color: rgba(255, 255, 255, 0.3); /* 30%の白を画像の上に重ねる */
	background-blend-mode: lighten; /* 背景画像と上の白をブレンドして薄く見せる */
}

.cntntW {
	position:relative;
	width: 643px;
	height: 640px;
	background-image:url(file:///C|/Users/Izumi%20Morisaki/img/w.png);
	background-repeat:no-repeat;
	background-position:left top;
	margin-top: 17px;
	margin-left: 178px;
	overflow:hidden;
}

.cntntW2 {
	position:relative;
	width: 600px;
	height: 600px;
	margin-left: 38px;
	margin-top: 12px;
	overflow:auto;
}	

.cntntW2 h2 {
	margin-top: 20px;
}


.cntnt {
	width: 831px;
	float:right;
	text-align: left;
	overflow: hidden;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

p.linklist {
	line-height:1.7;
	}

p.linklist span{
	font-size:0.85em;
	}


/* NAVI ---------------------------------- */

/* PC表示ではハンバーガーボタンを非表示にする */
#hamburger {
	display: none;
}

.navig {
	margin: 30px 0 0 15px;
	overflow:hidden;
	}

.logo {
	position:relative;
	float:left;
	}

.nvg {
	position:relative;
	float:left;
	}

.fb {
	position:relative;
	float:right;
	}



/* FOOT ---------------------------------- */
.foot {
	width: 999px;
	height: 50px;
	text-align:right;
	}
div#footleft {
	float: left;
    }
	.clearLeft{  
    clear:left;  
}

/* CONTENT ---------------------------------- */



.section_mr{
	width: 570px;
	height: 600px;
	}

.section_mr h2{
	padding:10px 0 30px 0;
	}


/* COMPANY ---------------------------------- */

.comp {
	width:572px;
	border-bottom:dotted #888 thin;
	overflow: hidden;
	}

p._left {
	float:left;
	width:100px;
	padding:6px 0 6px 0;
	} 

p._right {
	float:right;
	width:440px;
	padding:6px 0 6px 0;
	} 


/* SERVICE ---------------------------------- */

.comp_service {
	width:572px;
	border-bottom:dotted #888 thin;
	overflow: hidden;
	}

p._comp_service_left {
	float:left;
	width:270px;
	padding:6px 0 6px 0;
	} 

p._comp_service_right {
	float:right;
	width:270px;
	padding:6px 0 6px 0;
	} 

/* MESSAGE ---------------------------------- */

p.message {
	line-height:2;
	} 

.comp_message {
	display: inline-block;
	margin-right: 10px;
	width: 200px;
	vertical-align: bottom;
	}

/* CREDO ---------------------------------- */

.comp_credo {
	display: inline-block;
	margin-right: 10px;
	width: 288px;
	vertical-align: top;
	}


/* BRAND ---------------------------------- */


ul.brand {
	list-style:none;
	margin-top:-30px;
	overflow:hidden;
}
ul.brand li {
	width:154px;
	display:block;
	margin-top:170px;
	margin-left:80px;
	margin-right:20px;
	float:left;
	overflow: hidden;
	text-align:center;
}
ul.brand li img {
	margin-bottom: 5px;
	}
ul.brand li.tp {
	margin-left:20px;
}


/* RECRUIT ---------------------------------- */


ul.recruit {
	list-style-type:disc;
	list-style:outside;
}

ul.recruit li {
	margin-left: 1.5em;
}


a.recruit {
  color: #fff;
  background: #C40003;
  padding: 5px 15px;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
}

a.recruit:visited{
	color: #fff;
}


/* COMMON---------------------------------- */

img {
	border: 0;
}

/* text link */

a {
	color: #000;
	text-decoration: none; /* アンダーラインを非表示に変更 */
	cursor: pointer; /* カーソルをポインター（指のマーク）にする指定 */
}

a:link {
	text-decoration: none; /* アンダーラインを非表示に変更 */
}

a:visited {
	color: #666;
	text-decoration: none; /* 訪問済みのリンクもアンダーラインを非表示 */
}

a:hover {
	color: #000;
	text-decoration: none;
	opacity: 0.7; /* 【おすすめ】ホバー時に文字を少しフワッと薄くする（透明度70%） */
}

/* 自動検出された電話番号・住所などのリンク装飾を無効化する */
a[href^="tel:"],
a[href^="sms:"],
a[x-apple-data-detectors] {
	color: inherit !important; /* 親要素の文字色を引き継ぐ */
	text-decoration: none !important; /* 下線を消す */
	cursor: default; /* 指マーク（ポインター）にならないようにする */
}


/* =========================================================
   スマートフォン用表示CSS（レスポンシブ対応）
   ========================================================= */
@media screen and (max-width: 768px) {

	/* 12pxの固定指定を解除し、スマホ標準の読みやすいサイズ（16px）に上書き */
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
		font-size: 16px; 
	}
	
	/* 画像が画面幅からはみ出さないように調整 */
	img {
		max-width: 100%;
		height: auto;
		overflow: visible; /* 見切れないようにhiddenを解除 */
		background-repeat: repeat; /* 背景柄をリピートさせる */
	}

	/* レイアウトの固定幅と高さ制限を解除 */
	.corazon,
	.head,
	.content,
	.foot {
		width: 100%;
		height: auto;
	}

	/* コンテンツエリアの調整（PC用背景画像の無効化と余白調整、背景画像を繰り返し表示） */
	.cntntW {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 15px;
		box-sizing: border-box;

		/* 背景を繰り返し表示させるための追記 */
		background-repeat: repeat-y !important; /* 背景画像を縦横に繰り返す（縦のみの場合は repeat-y とします） */
		background-position: left top;
		
		/* ※もしスマホ画面幅に合わせて柄のサイズを調整したい場合は、以下のコメントアウトを外してください */
		background-size: 100% auto;
	}

	.cntntW2 {
		width: 100%;
		height: auto;
		margin: 0;
		overflow: visible; /* スクロールバーが出ないようにする */
	}

	.cntnt {
		width: 100%;
		float: none;
	}

	/* ヘッダー・ナビゲーション周り */
	.navig {
		display: flex;
		flex-wrap: wrap; /* メニューが開いた時に下に落とす設定 */
		justify-content: space-between; /* 両端揃え（ロゴを左、ボタンを右に自動配置） */
		align-items: center; /* 縦の高さを中央でピタッと揃える魔法のコード */
		margin: 15px 10px;
	}

	.logo {
		float: none;
		display: block;
		margin: 0;
	}

	/* ▼ ハンバーガーボタンのスタイル ▼ */
	#hamburger {
		display: block;
		position: relative; /* absoluteからrelativeに変更 */
		/* top: 5px; と right: 5px; は削除します */
		width: 30px;
		height: 24px;
		cursor: pointer;
		z-index: 9999;
	}

	/* 三本線のデザイン */
	#hamburger span {
		display: block;
		position: absolute;
		width: 100%;
		height: 3px;
		background-color: #333; /* 線の色（黒グレー） */
		border-radius: 2px;
		transition: all 0.3s ease-in-out; /* アニメーションの動き */
	}

	#hamburger span:nth-child(1) { top: 0; }
	#hamburger span:nth-child(2) { top: 10px; }
	#hamburger span:nth-child(3) { top: 20px; }

	/* ボタンが押されたとき（✕マークに変形） */
	#hamburger.active span:nth-child(1) {
		top: 10px;
		transform: rotate(45deg);
	}
	#hamburger.active span:nth-child(2) {
		opacity: 0; /* 真ん中の線を消す */
	}
	#hamburger.active span:nth-child(3) {
		top: 10px;
		transform: rotate(-45deg);
	}

	/* ▼ グローバルナビ（開閉するメニュー本体） ▼ */
	.nvg {
		display: none; /* スマホの初期状態では隠しておく */
		float: none;
		width: 100%;
		margin: 20px 0 0 0;
		padding: 15px 0;
		background-color: rgba(255, 255, 255, 0.95); /* 半透明の白背景を敷く */
		text-align: center;
	}

	/* メニューの各画像ボタンを縦に並べる */
	.nvg a {
		display: block;
		margin: 15px auto;
	}
	
	/* fb（フッターのSNS）の調整 */
	.fb {
		float: none;
		display: block;
		margin: 10px auto;
		text-align: center;
	}

	/* セクション領域の固定幅解除 */
	.section_mr {
		width: 100%;
		height: auto;
	}

	/* 会社概要（横並びを解除し縦積みに） */
	.comp {
		width: 100%;
	}

	p._left, 
	p._right {
		float: none;
		width: 100%;
		padding: 5px 0;
	}

	/* 事業内容（横並びを解除し縦積みに） */
	.comp_service {
		width: 100%;
	}

	p._comp_service_left, 
	p._comp_service_right {
		float: none;
		width: 100%;
		padding: 5px 0;
	}

	/* メッセージ・CREDO */
	.comp_message,
	.comp_credo {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	/* ブランド一覧（横並びを解除し縦積みに） */
	ul.brand {
		margin-top: 0;
	}

	ul.brand li,
	ul.brand li.tp {
		float: none;
		display: block;
		width: 100%;
		margin: 20px auto;
		text-align: center;
	}

	/* フッターの調整 */
	div#footleft {
		float: none;
		text-align: center;
		margin-bottom: 10px;
	}

	.foot {
		height: auto;
		text-align: center;
		padding: 20px 0;
	}
}