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

/* リセット定義 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

body {
	line-height: 1;
	font-size: 100%;
	color: #3c3c3c;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", verdana, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {display: block;}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* リセット定義ここまで */

#wrapper {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* 画像の切り替え */
.pc {display: block !important;}
.sp {display: none !important;}

/* 改行の切り替え */
.br-pc {display:block;}
.br-sp {display:none;}
.br-tb {display: none;}

@media screen and (min-width:600px) and (max-width:979px) {
/* 改行の切り替え */
.br-pc {display:none;}
.br-sp {display:none;}
}

@media screen and (max-width:599px) {
/* 画像の切り替え */
.pc {display: none !important;}
.sp {display: block !important;}
	
/* 改行の切り替え */
.br-pc {display:none;}
.br-sp {display:block;}
}

/*-------------------- 【 共通 】ヘッダー -------------------*/

/* ヘッダー */
.header {
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
	background-color: #fff;
	position: relative;
}

.header_wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* グローバルメニュー */
.grobalMenu {
	display: flex;
	justify-content: space-between;
}

.grobalMenu li {
	margin: 0;
	padding: 0 0 0 100px;
	text-align: center;
}

/* メニュー 日本語 */
.grobalMenu li a {
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	color: #4d76a3;
	transition: 0.3s ease-in-out;
}

.grobalMenu li a:hover {
	color: #c0e4f9;
}

/* メニュー 英語 */
.menu_nihongo {
	font-size: 0.8em;
	font-weight: normal;
}

/* ロゴ 画像 */
.logo img {
	width: 80%;
	height: auto;
	margin: 0;
}

@media screen and (min-width:600px) and (max-width:979px) {
	
/* グローバルメニュー */
.grobalMenu {
	display: none;
}
	
.grobalMenu li {
	padding: 0;
}

/* ロゴ */
.logo {
	position: fixed;
	z-index: 100;
	top: 15px;
}
}

@media screen and (max-width:599px) {
	
/* グローバルメニュー */
.grobalMenu {
	display: none;
}
	
.grobalMenu li {
	padding: 0;
}
	
/* ロゴ */
.logo {
	position: fixed;
	z-index: 100;
	top: 15px;
}
}

/*---------------- 【 TOP 】メインビジュアル ----------------*/

/* メインビジュアル PC表示*/
.main_visual_pc {
	width: 100%;
	display: block;
	background: url(../img/main_visual_pc.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	margin-top: -94px;
}

/* メインビジュアルのテキスト */
.main_visual_txt {
	width: 90%;
	margin: 0 auto;
}

/* テキストの画像 */
.main_visual_txt h1 img {
	width: 568px;
	height: 142px;
	top: 13%;
	left: 5%;
	position: absolute;
	z-index: 0;
}

/* テキストの画像 */
.main_visual_txt h2 img {
	width: 250px;
	top: 4%;
	left: 5%;
	position: absolute;
	z-index: 0;
}

/* メインビジュアル SP表示 */
.main_visual_sp {
	display: none;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* メインビジュアル PC表示*/	
.main_visual_pc {
	margin-top: -20px;
}	
	
/* メインビジュアルのテキスト */
.main_visual_txt {
	width: 90%;
}
	
/* テキストの画像 */
.main_visual_txt h2 img {
	width: 200px;
	top: 4%;
	left: 5%;
	position: absolute;
	z-index: 0;
}
}

@media screen and (max-width:599px) {
/* メインビジュアル PC表示*/
.main_visual_pc {
	display: none;
}

/* メインビジュアル SP表示*/
.main_visual_sp {
	display: block;
	width: 100%;
	margin: 0 auto;
}
	
.main_visual_sp div h1 img {
	margin: 70px auto 0 auto;
	z-index: 0;
}
	
/* テキストの画像 */
.main_visual_sp div h2 img {
	width: 165px;
	margin: 90px auto 0 auto;
	position: absolute;
	z-index: 1;
	top: 15px;
	left: 10px;
}
}

/*---------------- 【 共通 】タイトル ----------------*/

/* タイトル */
.title {
	width: 100%;
	margin: 130px auto 25px auto;
	text-align: center;
}

/* タイトル名 */
.title h2 {
	margin: 0 auto;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 2px;
	color: #4d76a3;
}

/* 英文字のルビ */
.title p {
	margin: 5px auto;
	font-size: 1em;
	font-weight: bold;
	color: #4d76a3;
}

#Business {
	display: block;
  	height: 3rem;
 	 margin-top: -3rem;
  	content: "";
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 見出しタイトル */
.title {
	width: 100%;
}
	
#Business {
	display: block;
  	height: 8rem;
 	 margin-top: -8rem;
  	content: "";
}
}

@media screen and (max-width:599px) {
/* 見出しタイトル */
.title {
	width: 100%;
	margin: 65px auto 25px auto;
}
	
/* 見出し */
.title h2 {
	font-size: 1.5em;
}

/* 英文字のルビ */
.title p {
	font-size: 0.85em;
}
	
#Business {
	display: block;
  	height: 8rem;
 	 margin-top: -8rem;
  	content: "";
}
}

/*---------------- 【 共通 】コンテンツエリアの背景 ----------------*/

/* コンテンツエリアの背景画像*/
.content {
	width: 100%;
	margin: 0 auto;
	padding-top: 40px;
	background: url(../img/background.jpg);
	background-repeat: repeat;	
}

@media screen and (max-width:599px) {
/* コンテンツエリアの背景画像*/
.content {
	padding-top: 30px;
}	
}

/*--------- 【 共通 】コンテンツエリア  見出し下部のテキスト ---------*/

/* テキストエリア*/
.content_txt {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

/* 見出し */
.content_txt h2 {
	margin: 0 auto 20px auto;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1.4em;
	color: #4d76a3;
}

/* テキスト */
.content_txt p {
	margin: 0 auto;
	line-height: 1.65em;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* テキストエリア*/
.content_txt {
	width: 90%;
}
	
/* 見出し */
.content_txt h2 {
	font-size: 1.6em;
}
}

@media screen and (max-width:599px) {
/* テキストエリア*/
.content_txt {
	width: 90%;
}
	
/* 見出し */
.content_txt h2 {
	font-size: 1.2em;
	line-height: 1.5em;
}
	
/* テキスト */
.content_txt p {
	font-size: 0.8em;
}
}

/*--------------------- 【 TOP 】カテゴリー ---------------------*/

/* カテゴリーボックスエリア */
.category_box {
	width: 90%;
	margin: 40px auto 0 auto;
}

.category_box_warp {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.category_box_warp li {
	width: 25%;
}

/* カテゴリーボックス画像 */
.category_box_warp li a img {
	width: 100%;
	margin: 0 auto;
}

.category_box_warp li a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.category_box_warp li a:hover {
	opacity: 0.7;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* カテゴリーボックスエリア */
.category_box {
	width: 100%;
}
}

@media screen and (max-width:599px) {
/* カテゴリーボックスエリア */
.category_box {
	width: 95%;
	margin: 40px auto;
}

.category_box_warp {
	width: 100%;	
}
	
.category_box_warp li {
	width: 50%;
}
	
/* カテゴリーボックス画像 */
.category_box_warp li a img {
	width: 100%;
	margin: 0 auto;
}
}

/*------------- 【 共通 】ボタン メールフォーム・Tel  -------------*/

/* ボタン メールフォーム・Tel */	
.btn_mail_tel {
	width: 90%;
	margin: 100px auto 120px auto;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

/* ボタン メールフォーム */
.btn_mail {
	width: 50%;
	margin: 0 auto;
}

/* 画像 */
.btn_mail img {
	width: 75%;
	margin: 0 auto;
}

.btn_mail a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.btn_mail a:hover {
	opacity: 0.7;
}

/* ボタン Tel */
.btn_tel {
	width: 50%;
	margin: 0 auto;
}

.btn_tel a {
	text-decoration: none;
	transition: 0.3s ease-in-out;
	display: block;
}

/* ホバー時 */
.btn_tel a:hover {
	opacity: 0.7;
}

/* 画像 */
.btn_tel img {
	width: 75%;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* ボタン メールフォーム・Tel */	
.btn_mail_tel {
	width: 95%;
}

/* ボタン メールフォーム */
.btn_mail {
	width: 100%;
	margin: 0 auto;
}
	
/* 画像 */
.btn_mail img {
	width: 95%;
	margin: 0 auto;
}
	
/* ボタン Tel */
.btn_tel {
	width: 100%;
}
	
/* 画像 */
.btn_tel img {
	width: 95%;
	margin: 0 auto;
}
}

@media screen and (max-width:599px) {
/* ボタン メールフォーム・Tel */	
.btn_mail_tel {
	width: 90%;
	margin: 50px auto 70px auto;
	display: block;
}
	
/* ボタン メールフォーム */
.btn_mail {
	width: 100%;
	margin: 0 auto 20px auto;
}
	
/* 画像 */
.btn_mail img {
	width: 100%;
}
	
/* ボタン Tel */
.btn_tel {
	width: 100%;
}

/* 画像 */
.btn_tel img {
	width: 100%;
}
}

/*---------------- 【 共通 】フッター ----------------*/

/* フッター */
.footer {
	width: 100%;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	background-color: #4d76a3;
}

.copy_wright {
	margin: 0 auto;
	font-size: 0.7em;
	color: #fff;
}

/*------------- 【 共通 】会社情報フッター  -------------*/

/* 会社情報フッターエリア */
.company_footer {
	width: 90%;
	margin: 80px auto;
	display: flex;
	justify-content: space-between;
}

/* 左 会社情報・フッターエリア */
.left_footer {
	width: 50%;
	margin-left: 5%;
}

/* 右 会社情報・フッターエリア */
.right_footer {
	width: 50%;
}

/* ロゴ画像 */
.logo_footer img {
	width: 50%;
	height: auto;
}

/* 会社住所 */
.address_footer {
	width: 100%;
	margin: 20px auto 10px auto;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1.4em;
}

/* TEL FAX */
.tel_fax_footer {
	width: 100%;
	margin: 0 auto;
	font-size: 1.06em;
	font-weight: bold;
	color: #4d76a3;
}

/* サイトコンテンツ */
.site_contents {
	width: 100%;
	margin: 0 auto 0 5%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.site_contents li {
	width: 33.333%;
	margin-bottom: 15px;
}

/* リストテキスト */
.site_contents li a {
	font-size: 0.7em;
	font-weight: bold;
	line-height: 2em;
	text-decoration: none;
	color: #3c3c3c;	
}

/* ホバー時 */
.site_contents li a:hover {		
	border-bottom: 1px solid #3c3c3c;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* 会社情報・フッターエリア */
.company_footer {
	width: 95%;
	display: block;
}

/* 左 会社情報・フッターエリア */
.left_footer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}	

/* ロゴエリア */
.logo_footer {
	width: 95%;
	margin: 0 auto;
}	
		
/* ロゴ画像 */
.logo_footer img {
	width: 35%;
	margin: 0 auto;
}

/* 会社住所 */
.address_footer {
	margin: 20px auto 10px auto;
}
	
/* TEL FAX */
.tel_fax_footer {
	font-size: 0.95em;
}
	
/* サイトコンテンツ */
.site_contents {
	display: none;
}
}

@media screen and (max-width:599px) {
/* 会社情報・フッターエリア */
.company_footer {
	width: 95%;
	margin: 60px auto;
	display: block;
}

/* 左 会社情報・フッターエリア */
.left_footer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}	

/* ロゴエリア */
.logo_footer {
	width: 95%;
	margin: 0 auto;
}	
		
/* ロゴ画像 */
.logo_footer img {
	width: 65%;
	margin: 0 auto;
}

/* 会社住所 */
.address_footer {
	margin: 20px auto 10px auto;
}
	
/* TEL FAX */
.tel_fax_footer {
	font-size: 0.95em;
}
		
/* サイトコンテンツ */
.site_contents {
	display: none;
}
}

/*---------------- 【 共通 】ページトップ ----------------*/

/* ページトップ */
.pagetop {
	width: 90%;
	margin: 0 auto 40px auto;
}

/* ページトップ 画像 */
.pagetop img {
	width: 8%;
	height: auto;
	margin: 0 auto;
}

@media screen and (min-width:600px) and (max-width:979px) {
/* ページトップ */
.pagetop {
	width: 95%;
}
	
/* ページトップ 画像 */
.pagetop img {
	width: 12%;
	margin: 0 auto;
}	
}

@media screen and (max-width:599px) {
/* ページトップ */
.pagetop {
	width: 95%;
	margin: 0 auto 20px auto;
}
	
/* ページトップ 画像 */
.pagetop img {
	width: 15%;
	margin: 0 auto;
}
}