@charset "UTF-8";


/******************* i18n (JA/EN switch) ***********************/
/* 表示言語の切り替え。日本語は /、英語は /en/ の別ページとして出力している。
   非表示側は常に display:none のみを指定し(表示側の display 値には触れない)、
   テーブル内などで display:block 指定がある箇所でも元のレイアウトを保ったまま
   表示/非表示を切り替えられるようにしている */

.lang_switch { display:flex; align-items:center; flex:0 0 auto; }
.lang_switch .lang_btn {
	display:inline-block;
	font-weight:bolder;
	color:#999;
	padding:0 4px;
	cursor:pointer;
}
.lang_switch .lang_btn.active { color:#036eb8; }
.lang_switch .lang_sep { color:#ccc; margin:0 2px; }

/* header_right: ヘッダーのTELの左にJA/EN切替ボタンを配置 */
.hed_right {
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:16px;
}

@media screen and (max-width:64em){
	.hed_right { justify-content:center; padding:10px 0; }
}
/*****************************************************/

/******************* w_section ***********************/
.w_section {
	padding:40px 20px;
}
.w_section h3 {
	font-size:1.4rem;
	font-weight:bold;
}
.w_section p {
	margin: 0 0 40px 0;
	line-height:1.8rem;
}

.w_section .section_title {text-align:center;width:60%;margin:0 auto 40px;}
.w_section .section_title h4 {
	padding:0 0 15px 0;
	font-size:1.2rem;
	font-weight:bolder;
	border-bottom:1px solid #036eb8;
}
.w_section .section_title span {}
@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	.w_section {padding:20px 15px;}
	.w_section h3 {font-size:1.2rem;}
	.w_section p {margin: 0 0 20px 0;font-size:0.8rem;line-height:1.6rem;}
	.w_section img {margin: 0 0 20px 0;}
}
/*****************************************************/

/******************* b_section ***********************/
.b_section {
	padding:40px 20px;
	background-color:#eef7fb;
}
.b_section h3 {
	font-size:1.4rem;
	font-weight:bold;
}
.b_section p {
	margin: 0 0 40px 0;
	line-height:1.8rem;
}


.b_section .section_title {text-align:center;width:60%;margin:0 auto 40px;}
.b_section .section_title h4 {
	padding:0 0 15px 0;
	font-size:1.2rem;
	font-weight:bolder;
	border-bottom:1px solid #036eb8;
}
.b_section .section_title span {}





@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	.b_section {padding:20px 15px;}
	.b_section h3 {font-size:1.2rem;}
	.b_section p {margin: 0 0 20px 0;font-size:0.8rem;line-height:1.6rem;}
	.b_section img {margin: 0 0 20px 0;}
}
/*****************************************************/


/******************* service ***********************/
.service {}

.service_title {
	margin:0 0 20px 0;
}

.service_title h4 {
	padding:0 0 5px 0;
	font-size:1.4rem;
	font-weight:bolder;
	color:#16205f;
	border-bottom:1px solid #036eb8;
}


.service_menu h5 {
	margin:0 10px 20px;
	padding:15px;
	text-align:center;
	font-size:1rem;
	border:1px solid #ccc;
	color: #3272b7;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-khtml-transition: all 0.3s ease;
}
.service_menu h5:hover {
	background-color:#3272b7;
	border:1px solid #ccc;
	color: #fff;
}

.service h6 {
	margin:20px 0 10px;
	font-size:1.2rem;
	font-weight:bold;
	color:#3272b7;
}
.service h6 span {
	margin:0 0 0 15px;
	font-size:1rem;
	font-weight:normal;
	color:#333;
}

.service img {
	width:100%;
}
.service figcaption {
	margin:0 0 30px 0;
}


.service .service_table {
	margin:0 0 30px 0;
	background-color:#f00;
}
.service .service_table thead {}
.service .service_table tbody,
.service .service_table tbody tr,
.service .service_table tbody td {
	padding:20px;
	border:1px solid #ccc;
}
.service .service_table tbody td {
	width:33.3%;
}
.service .service_table tbody td span:before {
    content: url(../img/point.png);
    margin: 10px;
    position: relative;
    top: 0;

}
.service .service_table tbody tr:nth-child(even) { background-color:#fff; }
.service .service_table tbody tr:nth-child(odd) { background-color:#fff; }







/* index用 */
.service .service_box {
	padding: 0 30px;
}

.service .service_box .service_box_inner {
	margin:0 0 20px 0;
	padding:0 0 20px 0;
	border:1px solid #ccc;
	background-color:#fff;
}
.service .service_box .service_box_inner ul {
	margin:15px 20px 0;
	list-style:none;
}

.service .service_box .service_box_inner img {
	margin: 0;
	width:100%;
}
.service .service_box .service_box_inner p {
	width:90%;
	margin: 0 auto;
	margin-top:10px;
	padding:5px;
	text-align:center;
	background-color:#5A8CBC;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-khtml-transition: all 0.3s ease;
	border:1px solid #ccc;
	color:#fff;
	font-size:14px;
}
.service .service_box .service_box_inner p:hover {
	color:#fff;
	background-color:#094D88;
	border:1px solid #BFBFBF;
}

@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	.service .service_box {padding: 0;}
	
	.service .service_table tbody {
		border-top: 1px solid #ccc;
		border-bottom: none;
	}
	.service .service_table tbody tr {
		border:none;
	}
	.service .service_table tbody td {
		width: 100%;
		display: block;
		border-top: none;
		border-left: none;
		border-right: none;
    }
	.service figcaption {
		margin:-20px 0 30px 0;
	}
}

/*****************************************************/



/******************* about ***********************/

.about {}

/* mission */
.about .mission_box {
	padding: 50px 70px;
	background-color:#fffdf6;
	border:1px solid #999;
}
.about .mission_box h5 {
	margin:0 0 30px 0;
	text-align:center;
}
.about .mission_box ul {}
.about .mission_box ul li {
	font-weight:bold;
}
.about .mission_box ul li p {
	font-size:0.9rem;
	font-weight:lighter;
}

/* table */
.about table {border-collapse: collapse;}
.about table tbody {
	background-color:#fff;
}
.about table tbody th {
	width:30%;
	padding:15px 25px;
	text-align:left;
	vertical-align:top;
	font-weight:bold;
	background-color:#fffdf6;
	border:1px solid #ccc;
}
	.about table tbody th span {
		display:block;
		font-weight:lighter;
		font-size:0.9rem;
	}
.about table tbody td {
	width:70%;
	padding:15px 25px;
	background-color:#fff;
	border:1px solid #ccc;
}
	.about table tbody td span {
		margin:0 0 15px 0;
		display:block;
		font-weight:lighter;
		font-size:0.9rem;
		letter-spacing: 2px;
	}
	.about table tbody td span:last-child {
		margin:0;
	}

@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	
	/* mission */
	.about .mission_box {padding:30px;}
	
	/* table */
	.about table tbody {border-bottom: 1px solid #ccc;}
	.about table tbody th {
		display:block;
		width:100%;
		text-align:center;
		border-bottom: none;
	}
	.about table tbody td {
		display:block;
		width:100%;
		border-bottom: none;
	}
}


/*****************************************************/







/******************* group ***********************/

.group {
	padding:0;
	margin:0;
}

.group .comp_title {
	margin: 0 0 80px;
	padding: 0 30px;
	height: 500px;
	background: url(../img/group/comp_bg01.jpg) center bottom no-repeat;
	background-size: cover;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
		.group .comp_title .comp_title_main {
			color: #FFF;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			line-height: 1.75;
			letter-spacing: .1em;
		}
		.group .comp_title .comp_title_main .sub {margin: 0 0 10px; }
		.group .comp_title .comp_title_main h4 {margin: 0 0 40px; }



.group .comp_box {
	margin: 0 0 50px;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
}
	.group .comp_box .left {
		height:180px;
		float:left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 20px;
		width: 33.333333%;
		border-right: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}
	.group .comp_box .left .comp_box_title {
		margin: 0 0 10px;
		font-weight: bold;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		text-align:left;
	}
	.group .comp_box .left .comp_box_title h5 {font-size: 1rem; font-weight:bold; }
	.group .comp_box .left .comp_box_title .img {margin: 0 20px 0 0; }
	.group .comp_box .left p {margin: 0;font-size: 0.8rem; line-height:1.4rem }


	.iryo{margin:0 0 50px;padding:50px 0;background:#F6F5EF}
	.iryo h4{margin:0 0 30px; font-size:16px; text-align:center; font-weight:bolder;}
	.iryo .iryo_box {
		margin:0 80px 60px;
		padding:30px;
		border:1px solid #ccc;
		background-color:#fff;
	}
	.iryo .iryo_box h5 {
		font-size:16px;
		text-align:center;
		font-weight:bold;
	}
	.iryo .iryo_box p {
	}
	.iryo .iryo_box .iryo_bt {
		padding:15px;
		background-color:#EEEEEE;
		border:1px solid #ccc;
		cursor: pointer;
	}
	.iryo .iryo_box .iryo_bt:hover {
		background-color:#ccc;
	}
	.iryo .iryo_box a {
		color:#333;
	}





@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	.group .comp_box .left {
		float:none;
		width: 100%;
		height:auto;
	}
	.iryo .iryo_box {
		margin:0 0 30px;
	}
}



/*****************************************************/





/******************* Contact ***********************/
.contact {}

.contact .formTable {border-collapse: collapse;}
.contact .formTable tbody {
	background-color:#fff;
}
.contact .formTable tbody th {
	width:30%;
	padding:15px 25px;
	text-align:left;
	vertical-align:top;
	font-weight:bold;
	background-color:#eef7fb;
	border:1px solid #ccc;
}
	.contact .formTable th span {
		display:block;
		font-weight:lighter;
		font-size:0.9rem;
	}
.contact .formTable tbody td {
	width:70%;
	padding:15px 25px;
	background-color:#fff;
	border:1px solid #ccc;
}
	.contact .formTable tbody td span {
		margin:0 0 15px 0;
		display:block;
		font-weight:lighter;
		font-size:0.9rem;
		letter-spacing: 2px;
	}
	.contact .formTable tbody td span:last-child {
		margin:0;
	}


.pp_box {}
.pp_box h4 {
	margin:60px 0 0 0;
}
.pp_box p {
	margin:10px 0;
}
.pp_box_inner {
	margin:0 0 30px 0;
	height:150px;
	padding:20px 30px;
	overflow:scroll;
	border:1px solid #ccc;
}
.pp_box_inner p {
	margin:0 0 30px 0;
}

@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	
	
	/* table */
	.contact .formTable tbody {border-bottom: 1px solid #ccc;}
	.contact .formTable tbody th {
		display:block;
		width:100%;
		text-align:center;
		border-bottom: none;
	}
	.contact .formTable tbody td {
		display:block;
		width:100%;
		border-bottom: none;
	}
}



/*****************************************************/




/* header */
header .row {
    display: flex;
}

@media screen and (max-width:64em){
    header .row {
        display: block;
    }
}

header h1 {
	margin:0;
	padding:0 0 15px 0;
}

.hed_tel {
	margin:10px 0 0 0;
	padding:0;
	text-align:right;
	font-size:1.8rem;
	font-weight:bolder;
	color:#4eb6eb;
}
	.hed_tel span {
		margin:0 5px 0 0;
		color:#666;
	}

.hed_add {
	margin:0;
	padding:0;
	font-size:0.8rem;
	text-align:right;
	color:#666;
}


@media screen and (max-width:64em){
	header h1 {text-align:center;}
	.hed_tel {margin:0;font-size:1.4rem;text-align:center;}
		.hed_tel span {}
	.hed_add {margin:0 0 15px 0;text-align:center;}
}
	
@media screen and (max-width:40em){
	header {
		border-bottom:3px solid #036eb8;
	}
	header h1 {padding:15px 0 20px;text-align:center;}
}
	



/******************* group_banner_list ***********************/
/* 3つのバナー画像を同じ縦横比(821x226前後)で統一してもらったので、
   等幅カラムに natural な縦横比のまま表示するだけで幅・高さが揃う
   (トリミングや引き伸ばしは行っていない) */
.group_banner_list {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:nowrap;
	gap:3%;
	width:100%;
}
.group_banner_list a.banner_item {
	position:relative;
	display:block;
	flex:1 1 0;
	min-width:0;
}
.banner_img_wrap {
	position:relative;
	display:block;
}
.banner_img_wrap img {
	display:block;
	width:100%;
	height:auto;
}
/* banner_caption: バナー画像内に焼き込まれていたキャプション文字をテキスト化し、
   ロゴ下の元のキャプション位置に重ねて表示 */
.banner_caption {
	position:absolute;
	left:0;
	right:0;
	top:74%;
	transform:translateY(-50%);
	text-align:center;
	padding:0 8%;
	color:#333;
}
.banner_caption .ja,
.banner_caption .en {
	display:block;
	font-size:0.76rem;
	font-weight:bold;
	line-height:1.4;
}

@media screen and (max-width:40em){
	.group_banner_list {
		flex-direction:column;
		flex-wrap:wrap;
		width:100%;
		gap:15px;
	}
	.group_banner_list a.banner_item {
		flex:1 1 auto;
		width:100%;
	}
	.banner_caption .ja,
	.banner_caption .en {
		font-size:0.8rem;
	}
}
/*****************************************************/

/******************* service thumb_caption (index.html) ***********************/
/* トップページのサービスカード4枚の写真に焼き込まれていたキャプション文字をテキスト化し、
   写真の下部をトリミングした分の位置に重ねて表示 */
.thumb_wrap {
	position:relative;
	display:block;
}
.thumb_wrap img {
	display:block;
	width:100%;
	height:auto;
}
.thumb_caption {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:10px 12px;
	background:rgba(0,0,0,0.55);
	text-align:center;
}
.thumb_caption .ja,
.thumb_caption .en {
	display:block;
	color:#fff;
	font-weight:bold;
	font-size:1.05rem;
	line-height:1.3;
}

/* PC表示限定: 写真の高さを広げ、キャプションの文字サイズと帯の高さを縮小 */
@media screen and (min-width:64.063em){
	.thumb_wrap {
		aspect-ratio: 31 / 16;
	}
	.thumb_wrap img {
		height:100%;
		object-fit:cover;
	}
	.thumb_caption {
		padding:6px 12px;
	}
	.thumb_caption .ja,
	.thumb_caption .en {
		font-size:0.84rem;
	}
}
/*****************************************************/

/******************* match_service_width ***********************/
/* トップページの「ジャパンクオリティ」テキストとバナー行の左右幅を、
   事業内容セクションの service_box (padding:0 30px) に揃えるための余白 */
.match_service_width {
	padding-left:30px;
	padding-right:30px;
}
@media screen and (max-width:40em){
	.match_service_width {
		padding-left:0;
		padding-right:0;
	}
}
/*****************************************************/

/* main_visual */
.main_visual {
	height:350px;
	background:url(../img/visual_bg.jpg) center center no-repeat;
	background-size:cover;
}

.main_visual_body {
	position:relative;
	margin:0 auto;
	max-width:70rem;
	height:100%;
	display:flex;
	align-items:center;
}

.main_visual_body h2 {
	position:relative;
	margin:0;
	z-index:1
}

/* message_box: ヒーロー画像(message.png)をテキスト化したもの。
   元画像の半透明の青い矩形(rgba(46,119,178,0.5))を再現 */
.message_box {
	display:inline-block;
	max-width:100%;
	background-color:rgba(46,119,178,0.5);
	padding:30px 40px;
	text-align:left;
	color:#fff;
}
.message_box .ja {
	display:block;
	font-size:1.375rem;
	font-weight:bold;
	line-height:1.6;
	margin-bottom:10px;
}
.message_box .en {
	display:block;
	font-size:0.95rem;
	font-weight:300;
	line-height:1.7;
}


@media screen and (max-width:64em){
	.main_visual {}
	.main_visual_body {}
	.main_visual_body h2 {}
}

@media screen and (max-width:40em){
	.main_visual {height:250px;}
	.main_visual_body {}
	.main_visual_body h2 {}
	.message_box {padding:16px 20px;}
	.message_box .ja {font-size:1rem; line-height:1.5; margin-bottom:8px;}
	.message_box .en {font-size:0.72rem; line-height:1.5;}
}


/* nav */
nav {border-bottom: 5px solid #036eb8;}
nav .menu {margin:20px 0;text-align:center;}

nav .menu a {
	padding:10px 0;
	font-weight:bolder;
	color:#333;
}
nav .menu li {border-right:1px solid #ccc;}
nav .menu li:last-child {border-right:none;}
nav .menu a span.nav_caption {
	margin:10px 0 0 0;
	font-weight:lighter;
	color:#666;
	font-size:0.8rem;
	display:block;
}
nav .menu a:hover {
	color:#036eb8;
}


/* news */

.news {font-size:0.9rem;margin:0 0 10px 0;}
.news p {margin:0;}
.news .news_day {}
.news .news_day span {
	margin:0 10px 0 0;
	color:#0052cd;
}
.news .news_text {}

@media screen and (max-width:64em){
	.news {margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px dashed #ccc;}
}
	
@media screen and (max-width:40em){
	.news {margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px dashed #ccc;}
	.news .news_day span {
		margin:0 5px 0 0;
	}
}


/* footer */
.footnav {margin:0 0 50px 0;font-size:0.8rem;}
.footnav a {color:#333;}
.footnav a:hover {color:#ccc;}
@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
	.footnav { margin:0 auto 30px; list-style:none; }
	.footnav li { border:1px solid #ccc; margin:0 0 15px; padding:15px; }
}




/* page-top */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

#page-top .move-page-top{
	display: block ;
	background: #333 ;
	width: 60px ;
	height: 50px ;

	color: #fff ;
	line-height: 0px ;
	text-decoration: none ;
	text-align: center ;

	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
}

@media screen and (max-width:64em){
}
	
@media screen and (max-width:40em){
}




/* sp_menu */

/********** sp_menu **********/

#sp_menu {
	display:none;
}
@media screen and (max-width:40em) { 

    #sp_menu { 
        display:block; 
        position:relative; 
		margin:-10px 0 25px 0;
    } 

    #sp_menu .sp_nav { 
        position:absolute; 
        display:none; 
        top:165px; 
        left:0px; 
        width:100%; 
        margin:0 0 10px; 
        box-sizing:border-box; 
        border:6px solid #0284cc; 
        background: #FFF; 
        z-index: 9999; 
    } 

    #sp_menu .sp_nav ul {
		list-style:none;
		margin:0;
		padding:0;
	} 
    #sp_menu .sp_nav ul li { 
        font-size:1.1rem; 
        padding:15px 20px; 
        border-top:1px solid #0284cc; 
        background-image:url(../../img/sp/sp_menu.png); 
        background-repeat:no-repeat; 
        background-position:right 15px center; 
    } 

    #sp_menu .sp_nav ul li a { 
        text-decoration:none; 
        color: #0284cc; 
    } 
	
	.headNvBtn {
		padding:10px;
		background-color:#036eb8;
		text-align:right;
	}
	.headNvBtn img {
		float:right;
	}
	
	.menu_button {
		xposition:absolute;
		xright:10px;
	}

    .menu_button .open{ 
        display: block; 
    } 

    .menu_button .close{ 
        display: none; 
    } 
	
    .menu_button.select .close{ 
        display: block; 
    } 

    .menu_button.select .open{ 
        display: none; 
    } 

}


/******************* contact page ***********************/
.contact_page .contact_lead { margin:0 0 30px 0; font-size:1rem; line-height:1.9; }
.contact_cards { margin-bottom:10px; }
.contact_cards .row { display:flex; flex-wrap:wrap; }
.contact_cards .column { display:flex; }
.contact_card {
	width:100%;
	margin:0 0 20px 0;
	padding:30px 20px 24px;
	text-align:center;
	background:#fff;
	border:1px solid #ccc;
	border-top:3px solid #036eb8;
	box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.contact_card i { display:block; font-size:2.6rem; line-height:1; color:#036eb8; margin-bottom:12px; }
.contact_card h5 { font-size:1.05rem; font-weight:bold; line-height:1.5; margin:0 0 12px 0; }
.contact_card h5 small { display:block; line-height:1.6; margin-top:2px; font-size:.7rem; letter-spacing:2px; color:#999; font-weight:normal; }
.contact_page .contact_card p.contact_value { margin:0; font-size:1.25rem; font-weight:bold; line-height:1.6; }
.contact_page .contact_card p.contact_address { font-size:1rem; }
.contact_card a { color:#036eb8; }
@media screen and (max-width:40em){
	.contact_page .contact_lead { font-size:.85rem; text-align:left; }
	.contact_card { padding:22px 15px 18px; }
	.contact_page .contact_card p.contact_value { font-size:1.1rem; }
	.contact_page iframe { height:300px; }
}

/* 日英別ページ化に伴う補正: 旧構成(日英併記)での余白を維持 */
.about table tbody td span.ja { margin:0 0 15px 0; }