@charset "UTF-8";

/****************************************************************************
    common parts
****************************************************************************/

/* PC/SP/Tabletで表示・非表示
--------------------------------*/
/*SPの時のみに表示*/
.m-sp {
	display: block;
}
@media (min-width:768px){
	.m-sp {
		display: none;
	}
}

/*SPとタブの時に表示*/
.m-sp-tab {
	display: block;
}
@media (min-width:1180px){
	.m-sp-tab {
		display: none;
	}
}

/*PCとタブの時に表示*/
.m-pc-tab {
	display: none;
}
@media (min-width:768px){
	.m-pc-tab {
		display: block;
	}
}

/*PCの時のみに表示*/
.m-pc {
	display: none;
}
@media (min-width:1180px){
	.m-pc {
		display: block;
	}
}


/* box
--------------------------------*/

/* innerモジュール */
.m-inner {
	width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
@media (min-width:768px){
	.m-inner {
		padding-left: 3%;
		padding-right: 3%;
	}
}
@media (min-width:1180px){
	.m-inner {
		padding-left: 0;
		padding-right: 0;
	    width: 1060px;/*90%表示の為変更 1080px*/
		margin: 0 auto;
	}
	.m-inner.small-1020 {
	    width: 1020px;
	}
	
}

/* section */
.m-section {
	padding: 30px 0;
}
@media (min-width:768px){
	.m-section {
		padding: 50px 0;
	}
}
@media (min-width:1180px){
	.m-section {
		padding: 70px 0;
	}
}

/* ボックス */
.m-box {
	padding: 20px 20px;
	border-radius: 10px;
}
.m-box.white {
	background-color: #fff;
}
.m-box.lightblue {
	background-color: #e9f9fd;
}
.m-box.lightgray2 {
	background-color: #f9fafb;
}
@media (min-width:768px){
	.m-box  {
		padding: 40px 40px;
		border-radius: 20px;
	}
}
@media (min-width:1180px){
	.m-box  {
		padding: 60px 80px;
	}
}

/* テキスト関連
--------------------------------*/
.m-txt-en {
	font-family: "Inter", serif;
	font-style: italic;
}
.m-txt-en-hand {
	font-family: "Square Peg", serif;
}
.m-txt-gray {
	color: #767676;
}

.m-txt-R {
	text-align: right;
}
.m-txt-C {
	text-align: center;
}

.m-txt-smaller {
	font-size: .8em;
}



/* リンク関連
--------------------------------*/
a.m-link-txt {
	color: #0150bc;
	text-decoration: underline;
}
a.m-link-txt:hover {
	text-decoration: none;
}

/*外部リンクアイコン
<i class="material-symbols-outlined">ad_group</i>をつける*/
a.m-link-blank i {
	color: #0150bc;
	font-size: 12px;
	margin-left: 3px;
}
@media (min-width:768px){
	a.m-link-blank i {
		font-size: 14px;
	}
}

/* 電話発信（スマホでタップした時だけ電話発信を有効にする）
--------------------------------*/
@media (min-width:768px){
	.m-tel {
		pointer-events: none;
	}
}

/* 背景モジュール
--------------------------------*/
.m-bg-lightgray {
	background-color: #f2f3f5;
}
.m-bg-lightgray-2 {
	background-color: #f9fafb;
}
.m-bg-blue {
	background-color: #0150bc;
}
.m-bg-lightblue {
	background-color: #e9f9fd;
}
.m-bg-white {
	background-color: #fff;
}



/****************************************************************************
 	Material icons
****************************************************************************/
/* Material iconsを利用する */
.material-icons,
.material-icons-outlined {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	/*font-size: 24px;  推奨サイズ */
	display: inline-flex;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	vertical-align: middle;

	/* WebKitブラウザサポート */
	-webkit-font-smoothing: antialiased;
	/* Chrome、Safariサポート */
	text-rendering: optimizeLegibility;

	/* Firefoxサポート */
	-moz-osx-font-smoothing: grayscale;

	/* IEサポート */
	font-feature-settings: 'liga';
}

/****************************************************************************
Material Symbols
****************************************************************************/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/****************************************************************************
 	pagetitle-sec
****************************************************************************/
.m-pagettl-sec {
	padding: 30px 5% 0 5%;
	position: relative;
}
.m-pagettl-sec:before {
	display: block;
	content:"";
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #22c1e5;
}
.m-pagettl-wrap {
	position: relative;
	border-radius: 10px;
	width: 100%;
	height: 140px;
}
.page-news-arc .m-pagettl-sec:before,
.page-video .m-pagettl-sec:before {
	/*画像なしページ*/
	height: 90px;
}
.page-news-arc .m-pagettl-wrap,
.page-video .m-pagettl-wrap {
	/*画像なしページ*/
	height: 60px;
}
.page-product .m-pagettl-wrap {
	background: url("../img/product/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-catalog .m-pagettl-wrap {
	background: url("../img/catalog/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-company .m-pagettl-wrap {
	background: url("../img/company/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-profile .m-pagettl-wrap {
	background: url("../img/company_profile/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-policy .m-pagettl-wrap {
	background: url("../img/company_policy/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-sustainability .m-pagettl-wrap {
	background: url("../img/company_sustainability/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-overseas .m-pagettl-wrap {
	background: url("../img/company_overseas/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-clients .m-pagettl-wrap {
	background: url("../img/company_clients/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-video .m-pagettl-wrap {
	background: none;
}
.page-recruit .m-pagettl-wrap {
	background: url("../img/recruit/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-contact .m-pagettl-wrap {
	background: url("../img/contact/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-news-arc .m-pagettl-wrap {
	background: none;
}
.page-privacy .m-pagettl-wrap {
	background: url("../img/privacy/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-sitepolicy .m-pagettl-wrap {
	background: url("../img/sitepolicy/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-sitemap .m-pagettl-wrap {
	background: url("../img/sitemap/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-kokorozashi .m-pagettl-wrap {
	background: url("../img/kokorozashi/bg_pagettl.jpg") center center no-repeat;
	background-size: cover;
}
.page-404 .m-pagettl-wrap {
	background-color: #e4e6e9;
}
.m-pagettl-wrap .m-inner {
	position: relative;
}
.m-pagettl-text {
	position: absolute;
	top: -25px;
	left: 10px;
	color: #fff;
}
.m-pagettl-text .en {
	font-size: 2.4em;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 1px;
}
.m-pagettl-text .jp {
	font-size: 1em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 1px;
}
@media (min-width:768px){
	.m-pagettl-sec {
		padding: 50px 3% 0 3%;
	}
	.m-pagettl-sec:before {
		height: 180px;
	}
	.m-pagettl-wrap {
		height: 220px;
		border-radius: 20px;
	}
	.page-news-arc .m-pagettl-sec:before,
	.page-video .m-pagettl-sec:before {
		/*画像なしページ*/
		height: 130px;
	}
	.page-news-arc .m-pagettl-wrap,
	.page-video .m-pagettl-wrap {
		/*画像なしページ*/
		height: 80px;
	}
	.m-pagettl-text {
		top: -40px;
		left: 20px;
	}
	.m-pagettl-text .en {
		font-size: 3.8em;
	}
	.m-pagettl-text .jp {
		font-size: 1.2em;
	}
}
@media (min-width:1000px){/*headerのブレイクポイント*/
	.m-pagettl-sec {
		padding: 60px 5% 0 5%;
	}
	.m-pagettl-sec:before {
		height: 250px;
	}
	.m-pagettl-wrap {
		height: 280px;
	}
	.page-news-arc .m-pagettl-sec:before,
	.page-video .m-pagettl-sec:before {
		/*画像なしページ*/
		height: 160px;
	}
	.page-news-arc .m-pagettl-wrap,
	.page-video .m-pagettl-wrap {
		/*画像なしページ*/
		height: 100px;
	}
	.m-pagettl-text {
		top: -60px;
		left: 40px;
	}
	.m-pagettl-text .en {
		font-size: 5.5em;
	}
	.m-pagettl-text .jp {
		font-size: 1.6em;
	}
}
@media (min-width:1400px){
	.m-pagettl-sec:before {
		height: 250px;
	}
	.m-pagettl-wrap {
		width: 1180px;
		margin: 0 auto;
		height: 320px;
	}
	.m-pagettl-text {
		top: -60px;
		left: 0px;
	}
}

/****************************************************************************
 	topic-path
****************************************************************************/
.m-topic-path-sec {
	/*background-color: #fff;*/
	padding: 10px 5%;
	line-height: 1.4;
	text-align: right;
	font-size: 11px;
}
.m-topic-path-sec li {
	display: inline;
}
.m-topic-path-sec li a {
	text-decoration: none;
	color: #6d6d6d;
}
.m-topic-path-sec li a:hover {
	color: #000;
}
.m-topic-path-sec li a:after {
	content: ">";
	color: #6d6d6d;
	padding-right: 5px;
	padding-left: 10px;
}
.m-topic-path-sec li span {
	color: #adacac;
}
@media (min-width:768px) {
	.m-topic-path-sec {
		padding: 25px 3% 5px 3%;
		font-size: 12px;
	}
}
@media (min-width:1300px) {
	.m-topic-path-sec {
		width: 1060px;/*90%表示の為変更 1080px*/
		margin: 0 auto;
		padding: 25px 0 5px 0;
		font-size: 12px;
	}
}




/****************************************************************************
 	title
****************************************************************************/
/*下に青縦ライン、黒文字*/
.m-title-L {
	text-align: center;
	color: #000;
	font-weight: 700;
	line-height: 1.4;
	font-size: 1.5em;
	position: relative;
	padding-bottom: 38px;
	margin-bottom: 1em;
}
.m-title-L:after {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -2px;
	display: block;
	content:"";
	width: 4px;/*6、50*/
	height: 35px;
	background-color: #0150bc;
}
@media (min-width:768px){
	.m-title-L {
		font-size: 2em;
		padding-bottom: 55px;
		margin-bottom: 1em;
	}
	.m-title-L:after {
		margin-left: -2px;
		width: 6px;
		height: 50px;
	}
}
@media (min-width:1180px){
	.m-title-L {
		font-size: 2.6em;
	}
}

/*上に水色グレーライン、黒文字*/
.m-title-M {
	font-weight: 700;
	line-height: 1.4;
	font-size: 1.1em;
	border-top: 5px solid #e2e4e5;
	position: relative;
	margin-bottom: .8em;
	padding-top: .8em;
}
.m-title-M:before {
	position: absolute;
	left: 0;
	top: -5px;
	display: block;
	content:"";
	width: 100px;
	height: 5px;
	background-color: #22c1e5;
}
@media (min-width:768px){
	.m-title-M {
		font-size: 1.4em;
	}
}
@media (min-width:1180px){
	.m-title-M {
		font-size: 1.6em;
		margin-bottom: .8em;
		padding-top: .8em;
	}
	.m-title-M:before {
		width: 190px;
	}
}


/*背景グレー、黒文字*/
.m-title-S {
	background-color: #f7f7f8;
	font-weight: 500;
	line-height: 1.4;
	font-size: 1em;
	margin-bottom: .5em;
	padding: 10px 10px;
}
@media (min-width:768px){
	.m-title-S {
		font-size: 1.1em;
		margin-bottom: .5em;
		padding: 15px 15px;
	}
}
@media (min-width:1180px){
}


/****************************************************************************
 	btn
****************************************************************************/
/* ボタンbase
---------------------*/
a.m-btn {
	position: relative;
	display: block;
	width: 260px;
	padding: 16px 3px;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	margin-left: auto;
	margin-right: auto;
	transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-webkit-transition: 0.25s ease-in-out;
	-o-transition: 0.25s eease-in-out;
}
a.m-btn:hover {
	opacity: .8;
}
/*色分け*/
a.m-btn.lightblue {
	background-color: #22c1e5;
	color: #fff;
}
/*戻る*/
a.m-btn.return {
	padding-left: 15px;
}
a.m-btn.return i {
	position: absolute;
	left: 10px;
	font-size: 24px;
}

@media (min-width:769px){
	a.m-btn {
		width: 280px;
		padding: 18px 3px;
		font-size: 19px;
	}
	/*戻る*/
	a.m-btn.return {
		padding-left: 25px;
	}
	a.m-btn.return i {
		left: 20px;
		font-size: 26px;
	}
}


/****************************************************************************
 	table
****************************************************************************/
table {
	word-break: break-all;
	word-wrap: break-word;
	width: 100%;
	max-width: 100%;
}
table th,
table td {
	word-break: break-word;
}
.m-table-base {
	border-bottom: 1px solid #e1e6e6;
}
.m-table-base th,
.m-table-base td {
	padding: 10px 5px;
	border-top: 1px solid #e1e6e6;
	line-height: 1.4;
	font-size: .85em;
}
.m-table-base th {
	background-color: #f9fafb;
	color: #000;
	width: 30%;
	font-weight: normal;
}
.m-table-base td {
	background-color: #fff;
	color: #767676;
}
@media (min-width:768px){
	.m-table-base th,
	.m-table-base td {
		padding: 15px 20px;
		font-size: .85em;
	}
	.m-table-base th {
		width: 25%;
	}
}
@media (min-width:1180px){
	.m-table-base th,
	.m-table-base td {
		padding: 20px 30px;
		font-size: 1em;
	}
	.m-table-base th {
		width: 20%;
	}	
}



/****************************************************************************
 	ページ内リンク（製品情報以外で）
****************************************************************************/
.m-pagelink-box {
	margin-top: 1.5em;
	background-color: #e9f9fd;
	border-radius: 0 0 20px 0;
	padding: 1em 1em;
}
.m-pagelink-box .list-item {
	display: inline-block;
	list-style-type: none;
	position: relative;
	line-height: 1.4;
	margin-right: 1em;
}
.m-pagelink-box .list-link {
	padding-left: 15px;
	text-decoration: none;
}
.m-pagelink-box .list-link:hover {
	text-decoration: underline;
}
.m-pagelink-box .list-link:before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	margin-top: -5px;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	border-top: 3px solid #22c1e5;
	border-right: 3px solid #22c1e5;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
@media (min-width:768px){
	.m-pagelink-box  {
		padding: 2em 2em;
	}
}
@media (min-width:1180px){
	.m-pagelink-box {
		margin-top: 2.5em;
		border-radius: 0 0 40px 0;
		padding: 2.5em 2.5em;
	}
	.m-pagelink-box .list-item {
		margin-right: 2em;
	}
	.m-pagelink-box .list-link {
		padding-left: 20px;
	}
}

/****************************************************************************
 	管理画面エディタで入力するコンテンツ
****************************************************************************/
/*  管理画面からエディタで入力するコンテンツ
　　wordpressのネイティブCSSが適用されるようにする

.admin-edit
-----------------------------------------------*/
/* ワードプレス固有のCSSクラスの復元 */
.admin-edit .aligncenter { display: block; margin: 0 auto;}

.admin-edit .alignright { float: right; margin: 0 0 10px 20px;}

.admin-edit .alignleft { float: left; margin: 0 20px 10px 0;}

.admin-edit .wp-caption { border: 1px solid #ddd; text-align: left; background-color: #f3f3f3; padding: 5px; border-radius: 3px;}

.admin-edit .wp-caption img { margin: 0; padding: 0; border: 0 none;}

.admin-edit .wp-caption p.wp-caption-text { font-size: 14px; line-height: 1.5; margin: 0; padding: 0;}

/* reset.cssでリセットしたタグの再定義 */

.admin-edit strong { font-weight: bold; }

.admin-edit em { font-style: italic; }

.admin-edit { font-size: 14px; }
.admin-edit h1 {
	font-size: 1.2em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 700;
	background-color: #e9f9fd;
	color: #000;
	padding: .5em .5em;
	margin: 1em 0 .5em 0; 
}
.admin-edit h2 {
	font-size: 1.1em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 600;
	background-color: #f9fafb;
	color: #000;
	padding: .5em .5em;
	margin: 1em 0 .5em 0; 
}
.admin-edit h3 {
	font-size: 1.1em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 600;
	border-bottom: 1px dashed #000;
	padding: .5em .5em;
	margin: 1em 0 .5em 0; 
}
.admin-edit h4 {
	font-size: 1em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 700;
	color: #0150bc;
	margin: 1em 0 .5em 0; 
}
.admin-edit h5 {
	font-size: 1em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 700;
	color: #000;
	margin: 1em 0 .5em 0; 
}
.admin-edit h6 {
	font-size: 1em;
	line-height: 1.4;
	letter-spacing: 1px;
	font-weight: 600;
	color: #000;
	margin: 1em 0 .5em 0; 
}

.admin-edit ul,
.admin-edit ol { padding-left: 20px;}

.admin-edit blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px;}

.admin-edit img { height: auto; width: auto; max-width: 100%;}

.admin-edit table {
	margin: 1em 0;
}
.admin-edit table,
.admin-edit tr,
.admin-edit th,
.admin-edit td {
	border-width: thin;
}
.admin-edit th,
.admin-edit td {
	padding: 5px 5px;
	border: 1px solid #e7e7e7;
	font-size: 1em;
}
/*.admin-edit th {
	background-color: #f5f5f5;
	font-weight: bold;
}*/
.admin-edit a {
	text-decoration: underline;
	color: #0150bc;
}
.admin-edit:after {/*画像など回り込みの解除 clearfix*/
	content: "";
	clear: both; 
	display: block;
}
@media (min-width:768px){
	.admin-edit {
		font-size: 18px;
	}
	.admin-edit th,
	.admin-edit td {
		padding: 15px 30px;
		font-size: 1em;
	}
}


/****************************************************************************
 	pagenavi
****************************************************************************/
/*wp-pagenavi base*/
.wp-pagenavi {
	margin: 4em 0 0 0;
	clear: both;
	text-align:center;
}
.wp-pagenavi a, .wp-pagenavi span {
	color: #4d4d4d;
	background-color: #FFF;
	border: solid 1px #dcdcdc;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color:#FFF; 
	background-color:#0150bc; 
	border-color:#0150bc;
}
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #d2d2d2;
	border-color: #d2d2d2;
	font-weight: bold;
}
.wp-pagenavi span.pages{
	border: 1px solid #d2d2d2;
	background-color: #F5F4F5;
}


/****************************************************************************
    margin top
****************************************************************************/
/*   XXSサイズ
---------------------*/
.m-mt-XXS {
	margin-top: .5em;
}

/*   XSサイズ
---------------------*/
.m-mt-XS {
	margin-top: 1em;
}


/*   Sサイズ
---------------------*/
.m-mt-S {
	margin-top: 2em;
}


/*   Mサイズ
---------------------*/
.m-mt-M {
	margin-top: 3em;
}

/*   Lサイズ
---------------------*/
.m-mt-L {
	margin-top: 4em;
}


/*   XLサイズ
---------------------*/
.m-mt-XL {
	margin-top: 5em;
}