@charset "UTF-8";


/* <<<<<<<<<<<<<<<<<<<< header >>>>>>>>>>>>>>>>>>>> */

header {
}
#header-wrap {
	width: 90%;
    max-width: 1000px;
	height: 72px;	
	margin: 0 auto;
	box-sizing: border-box;
}
.header-logo {
	position: relative;
	float: left;
	width: auto;
	height: 100%;
}
.header-logo img {
	position: absolute;   
	top: 0;
	bottom: 0;  
	width: 230px;
	height: 40px;   
	margin: auto 0;   
	z-index: 100; /* リンク領域を前面に出してリンク可能にするため */
}
/* ----------ボックス固定 背景イメージ---------- */
/* （高さauto ※コンテンツの量に応じて高さ固定） */
.bg-boxfixed-auto {
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ640px ※ボックスの高さ固定） */
.bg-boxfixed-640 {
	height: 640px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ520px ※ボックスの高さ固定 トップページ） */
.bg-boxfixed-520 {
	height: 520px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ480px ※ボックスの高さ固定 トップページ） */
.bg-boxfixed-480 {
	height: 480px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ400px ※ボックスの高さ固定） */
.bg-boxfixed-400 {
	height: 400px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ300px ※ボックスの高さ固定） */
.bg-boxfixed-320 {
	height: 320px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ200px ※ボックスの高さ固定） */
.bg-boxfixed-200 {
	height: 200px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: cover; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* ----------画像の高さ固定 背景イメージ---------- */
/* （高さ600px ※画像の高さ固定） */
.bg-imgfixed-600 {
	height: 600px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: auto 600px; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ500px ※画像の高さ固定） */
.bg-imgfixed-500 {
	height: 500px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: auto 500px; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* （高さ500px ※画像の高さ固定） */
.bg-imgfixed-400 {
	height: 400px;
	background-position: center center; /* 画像を常に天地左右の中央に配置 */  
	background-repeat: no-repeat; /* 画像をタイル状に繰り返し表示しない */
	background-size: auto 400px; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-color: linear-gradient(#f0f1f2, #FFF); /* 背景画像が読み込まれる前に表示される背景のカラー */
}
/* ----------メインキャッチの上下中央配置---------- */
.catch-box {
	position: relative;
	width: 90%;    
    max-width: 1000px;
	height: 100%;
	margin: 0 auto;
}
.catch-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%) ;
	-webkit-transform: translateY(-50%) ;
    max-width: 60%;
}
/* ----------幅50% 縦480px メインキャッチの上下中央右寄せ配置---------- */
.left-catch-box {
    position: relative;    
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
	height: 480px;
}
.left-catch {
    position: absolute; 
	top: 50%;
	left: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
	width: 50%;
	border-radius: 8px;
}
/* ----------幅50% 縦480px メインキャッチの上下中央配置---------- */
.centar-catch-box {
    position: relative;    
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
	height: 480px;
}
.centar-catch {
    position: absolute; 
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	width: 50%;
	border-radius: 8px;
}
/* ----------幅50% 縦480px メインキャッチの上下中央配置---------- */
.centar-catch-box {
    position: relative;    
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
	height: 480px;
}
.centar-catch {
    position: absolute; 
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	width: 50%;
	border-radius: 8px;
}
/* ----------メインキャッチの上下左右中央配置---------- */
/*対応ブラウザに注意*/
.top-catch-box {
    display: flex;
    justify-content: center;   
    -webkit-box-pack: center;  
    -webkit-justify-content: center;   
    -ms-flex-pack: center;
    align-items: center;  
}
/* ----------パンくずリスト---------- */
.breadcrumb-wrap {
	font-size: 0.875rem;
}
.breadcrumb-box {  
    width: 90%;
    max-width: 1000px;   
	margin: 0 auto;  
	padding: 0.8125rem 0;   
}
.breadcrumb-wrap ol {
    padding-left: 0;
}
.breadcrumb-wrap li {
	display: inline-block;
}
.icon-home { 
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	margin-bottom: -2px; /* ----------アイコンの縦ラインの位置調整---------- */
	background-image: url(../images/home.png);
	background-size: contain;
}
/* 矢印（>）アイコン */
.icon-breadcrumb {
    content: '';
    display: inline-block;
	width: 4px;
	height: 4px;
	margin: -1px 8px 0 8px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg);
	vertical-align: middle;
}
/* 現在のページをリンク無効に（現在のページはリンクさせたくないが、Googleの構造化データをチェックするルールが変更され、現在のページにも item="name" が必要となりaタグをつけなければならない） */
a.disabled {
    pointer-events: none;
    color: #000;
}

/* <<<<<<<<<<<<<<<<<<<< contents >>>>>>>>>>>>>>>>>>>> */

section {
}
/* ----------コンテンツ全体を囲む幅広のボックス　　←　今のところ、ブログだけで使用　---------- */
.contents-wrap-wide {
	width: 90%;
	max-width: 1200px;   
    margin: 0 auto;
	padding: 6rem 0;
    box-sizing: border-box;  
}
/* ----------コンテンツ全体を囲む標準のボックス---------- */
.contents-wrap {
	width: 90%;
	max-width: 1000px;   
    margin: 0 auto;
	padding: 6rem 0;
    box-sizing: border-box;  
}
/* ----------横幅を狭くしたいとき、contents-wrap内に配置するボックス---------- */
.contents-wrap-narrow {
    width: 75%;    
	margin: 0 auto;   
    box-sizing: border-box;
}
/* ----------新着情報の指定---------- */
.news {
    padding: 1rem 0;  
    border-bottom: 1px solid #e3e3e3;      
}
.news-sub {
    float: left;
    width: 248px;
}
.news-main {
    float: left;
    width: 100%;
    margin-left: -248px;
    padding-left: 248px;
    box-sizing: border-box;
}
.news-group {
    float: left;
    padding: 0.1rem;
    width: 100px;
    border: 1px solid #e3e3e3;
    background-color: #f4f5f6;
    font-size: 0.75rem;
    text-align: center;
}
.news-group-strong {
    float: left;
    padding: 0.1rem;
    width: 100px;
    border: 1px solid #b92d3c;
    background-color: #fae6e6;
    color: #b92d3c;
    font-size: 0.75rem;
    text-align: center;
}
.news-date {
    float: left;
    margin: 0 1rem;
    width: 110px; 
    font-size: 0.875rem;
}
.news-title {
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    font-weight: normal;
    font-size: 2rem;
    border-bottom: 1px solid #e3e3e3;
}
.news-date-pub {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    text-align: right;
}
.news-text {
}
/* ----------よくある質問と回答の指定---------- */
.faq-contents dd p,
.faq-contents dd ul li{
    padding: 0 1.5rem; 
    font-size: 0.875rem;
}
.faq-contents dd ol li {
    padding-right: 1.5rem;
    margin-left: 1.5rem;
    font-size: 0.875rem;
}
/* ----------アップデートプログラムダウンロードの指定---------- */
.download-wrap {
    margin-bottom: 2rem;
}
.download-title {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #e3e3e3;
    background-color: #f4f5f6;
    font-size: 1rem;
}
.download-subtitle {
    margin: 2rem 0 1rem 0;
    border-bottom: 1px dotted #e3e3e3;
    font-weight: bold;
}
.download-contents {
    padding: 0 1rem; 
    font-size: 0.875rem;
}
/* ----------テーブルの指定---------- */
/*（標準テーブル）*/
table {
	width: 100%;
	border-top: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
	border-collapse: collapse;
    /* 横幅をウィンドウサイズに収める設定 */
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}
table th,td {
	padding: 1rem;
	border-left: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	font-size: 0.875rem;
}
table th {
	background-color: #ebebeb;   
	/*white-space: nowrap;*/  /* 改行させない指定 */   
}
table td {
	background-color: #FFFFFF;
}
table table td {
	padding: 0.5rem;
	font-size: 0.75rem;
}
table tbody th {
	background-color: #f0f0f0;
}
/*（標準テーブル-文字をすべて上揃えにする）*/
.t-vat th,
.t-vat td {
	vertical-align: top;
}
/*（コンパクトテーブル）*/
.compact-t th,
.compact-t td {
	padding: 0.5rem;
	font-size: 0.75rem;
}
/*（下線だけのシンプルなテーブル ※新着や会社情報など）*/
.simple-t {
	width: 100%;
	border-top: none;
	border-right: none;
}
.simple-t tr {
	width: 100%;
	border-bottom: 1px solid #e3e3e3;
}
.simple-t th,
.simple-t td {
	border-left: none;
	border-bottom: none;
	font-size: 0.875rem;
}
.simple-t th {
	width: 24%;
	margin-right: 4%;	
	background-color: #FFF;
	text-align: left;
}
.simple-t td {
	width: 72%;
}
/* ----------正方形矢印アイコン付きのリスト--------- */
ul li.arrow-icon {
    position: relative;
}
ul li.arrow-icon::after,
ul li.arrow-icon::before {
    display: block;
    content: '';
    position: absolute;
}
ul li.arrow-icon p {
    padding-left: 2.5em;
}
ul li.arrow-icon::after {   
    top: 0.125em; 
    left: 0;
    width: 1.5em;
    height: 1.5em;
    background-color: #004bc8;
    border-radius: 3px;
}
ul li.arrow-icon::before {
    z-index: 2;  
    top: 0.5214em;
    left: 0.3125em; 
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* ----------コンテンツ内の横並びメニュー（横並びの項目2つ/3つ）--------- */
ul.sbs-2 {    
    display:table;  
    width: 100%;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    border-left: 1px solid #e3e3e3;
}
ul.sbs-2 li {
    display:table-cell;
    float: left;    
    width: 50%;
    background-color: #f4f5f6; 
    text-align: center;
    vertical-align: top;
    border-right: 1px solid #e3e3e3;
    box-sizing: border-box;
} 
ul.sbs-2 li a {
    display: block;
    padding: 1rem;
    color: #000;
    text-decoration: none;
} 
ul.sbs-2 li a:hover {
	background-color: #FFF;
} 
ul.sbs-3 {    
    display:table;  
    width: 100%;
    border-left: 1px solid #e3e3e3;
}
ul.sbs-3 li {
    display:table-cell;
    float: left;    
    width: 33.333%;
    background-color: #f4f5f6; 
    text-align: center;
    vertical-align: top;
    border-right: 1px solid #e3e3e3;
    box-sizing: border-box;   
} 
ul.sbs-3 li a {
    display: block;    
    padding: 1rem;   
    color: #000;
    text-decoration: none;
} 
ul.sbs-3 li a:hover {
	background-color: #FFF;
} 
ul.sbs-3 li:first-child,
ul.sbs-3 li:nth-child(2),
ul.sbs-3 li:nth-child(3) {    
    border-bottom: 1px solid #e3e3e3;   
}
/*（matchbox.jsでメニューの縦幅を文字の行数に合わせて揃えるための指定）*/
.sbs-menu {
}

/* ----------コンテンツ内のアコーディオンメニュー（コンテンツの高さを指定しなければならない）--------- */
#accordion {
}
.accordionlist dt {
    display:block;
    padding: 1rem 1rem 0 ;
    cursor :pointer;
}
.accordionlist dt .title {   
	float: left;
    max-width: 80%;
    font-weight: bold;  
    padding-bottom: 1rem; 
}
.accordionlist dd {
    display:none;
	padding:0 1rem 1rem;    
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 32px;
	height: 32px;
	float: right;   
    margin-left: 1rem;
}
.accordion_icon span {
	position: absolute;
    width: 50%;  
	height: 4px;
    background-color: #b92d3c;
}
.accordion_icon span:nth-of-type(1) {
    top: 8px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {    
    top: 8px;
    -webkit-transform: rotate(90deg);
	transform: rotate(90deg);    
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 8px;
    -webkit-transform: rotate(180deg);
	transform: rotate(180deg);    
}

/* ----------問い合わせ---------- */
#contact-wrap {
	height: 216px;
	margin: 6rem 0;
	background-color: #FFF;
	display: inline-block;
	vertical-align: bottom; /* インライン要素の下余白を消す設定 */
}
#contact-box {
	float: left;
	padding: 2rem;
	text-align: left;	
}
#contact-box h2 {
	margin-bottom: 0.5rem;
}
#contact-image-box {
	float: right;
}
#contact-image-box img {
	height: 216px;
}
.contact-btn {
}
.contact-btn a {
	display: block;
	width: 440px;
	line-height: 1.5;
	margin-top: 1rem;
	padding: 0.75rem;   
	border-radius: 4px;   
	background-color: #004bc8;
	color: #FFF;
	text-align: center;
    transition: 0.3s;
}
.contact-btn a:hover {
	background-color: #2963c4;
	text-decoration: none;
}
.contact-btn p {
/*	font-weight: bold;*/
	font-size: 1.5rem;  
}
/* ----------問い合わせフォーム---------- */
.error {
	background-color: #fae6e6;
}
.submit {
	padding: 1rem;
	margin: 1rem auto;
	border: 1px solid #999;    
	background-color: #F0F0F0;
    font-size: 1rem;
	cursor: pointer;
}
.submit:disabled {
    cursor: not-allowed;
}
/* ----------会社概要の地図---------- */
#map-box {
	position: relative;
	padding-bottom: 61.8%;
	height: 0;
	overflow: hidden;
	width: 100%;
}
#map-box iframe,
#map-box object,
#map-box embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ----------サイトマップ---------- */
#sitemap {
}
#sitemap li {
    display: inline-block;
    width: 25%;
    margin-right: 6%;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    vertical-align: top;
}
#sitemap li a {
    color: #000;
}
#sitemap li a:hover {
    color: #999;
    text-decoration: none;
}


/* <<<<<<<<<<<<<<<<<<<< footer >>>>>>>>>>>>>>>>>>>> */

footer {
	background-color: #283c5f;
}
/* ----------メニュー---------- */
#footermenu-wrap {
		padding: 3rem 0;
}
#footermenu {
	width: 90%;
	max-width: 1000px;   
    margin: 0 auto 2rem;
}
.footermenu-box {
	float:left;
	width: 18.4%; /* 4つ横並びの場合（ここを変更するときはmargin-rightも調整） */
	margin-right: 2%;
}
.footermenu-box:last-child {
	margin-right: 0;
}
.footermenu-box li {
	padding: 0.25rem 0;
	font-size: 0.75rem;
}
.footermenu-box li:first-child {
	margin-bottom: 0.5rem;
	color: #FFF;
	font-size: 0.875rem;
}
.footermenu-box li a {
	display: inline-block; /* 文字部分だけにリンクさせる設定 */
    color: #6491be;
}
.footermenu-box li a:hover {
	color: #6491be;
}
.init-right::before { /* 横矢印 */
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-right: 2px solid #6491be;
    border-bottom: 2px solid #6491be;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	vertical-align: middle;
}
/* ----------サブメニュー---------- */
#footermenu-sub {
	padding: 0 2rem;
	font-size: 0.875rem;
    text-align: center;
}
#footermenu-sub li {
	display: inline-block;
	list-style: none;
	margin-bottom: 0.5rem; /* 行折り返し時の文字間調整 */
	padding: 0 1rem;
	border-right: solid 1px #e3e3e3;
}
#footermenu-sub li:last-child {
	border-right: none;
}
#footermenu-sub li a,
#footermenu-sub li a:hover {
	color: #FFF;
}
/* ----------コピーライト---------- */
#copyright{
	padding: 3rem;	
	background-color: #FFF;
}
.corp-info {
	margin: 0 auto 1rem;
	font-size: 0.75rem;
}
.corp-logo {
}
.corp-logo img {
	width: 60px;
	height: 60px;
	margin: 0 auto 1rem;	
}
.corp-add {
	margin-bottom: 1rem;
	text-align: center;
}
.pmark {
	max-width: 400px;
	margin: 0 auto;
}
.pmark img {
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 1rem;
}

/* #################### レスポンシブデザイン設定 #################### */

/* <<<<<<<<<<<<<<<<<<<< 960px未満 >>>>>>>>>>>>>>>>>>>> */

@media screen and (max-width: 959px) {
    
.bg-boxfixed-400 {
	height: 320px;
}
.subimage-wide {
	height: 320px;
}
.bg-imgfixed-600 {  
	height: 400px;   
	background-size: auto 400px;
}     
.contents-wrap-narrow {
	width: 100%;
}
.left-catch {
    top: auto;
    bottom: 16px;	
	left: 0;
	right: 0;
    transform: translate(0, 0); 
    -webkit-transform: translate(0, 0);
    width: auto;
}		
.top-catch-box {
    align-items: flex-end; 
  
}
#contact-wrap {
	width: 85%;
	height: auto;
}
#contact-box {
	box-sizing: border-box;
	width: 100%;
}
#contact-box h2 {
	text-align: center;
	font-size: 1.5rem;
}
#contact-box p {
	text-align: center;
}
#contact-image-box {
	display: none;
}
.contact-btn a {
	margin: 1rem auto 0;
	box-sizing: border-box;
	width: 100%;
} 
ul.sbs-3 {
    border-bottom: none;
}    
ul.sbs-3 li {    
    width: 50%;    
}
ul.sbs-3 li:first-child,
ul.sbs-3 li:nth-child(2),
ul.sbs-3 li:nth-child(3),
ul.sbs-3 li:nth-child(4) {    
    border-bottom: 1px solid #e3e3e3;   
} 
#map-box {
	padding-bottom: 61.8%;
	width: 100%;
}
.footermenu-box {
	float: none;
	width: 100%;
	margin: 1rem 0 0;
}
.footermenu-box:first-child {
	margin-top: 0;
}
.footermenu-box li {
	padding: 0.625rem 0;
	border-bottom: solid 1px #6491be;
}
.footermenu-box li:first-child {
	margin-bottom: 0;
}
.footermenu-box li a {
	display: block; /* 行全体にリンクさせる設定 */
}
/* ----------サイトマップ---------- */
#sitemap li {
    width: 40%;
    margin-right: 5%;
}    
    
}

/* <<<<<<<<<<<<<<<<<<<< 560px未満 >>>>>>>>>>>>>>>>>>>> */

@media screen and (max-width: 559px) {

#header-wrap {
	height: 64px;
}
.header-logo img {
	width: 184px;
	height: 32px;
}
.subimage-wide {
	height: 240px;
}
/* ----------サイトマップ---------- */
#sitemap li {
    width: 100%;
    margin-right: 0;
}    
	
}