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

body {
	font-size: 20px;
	line-height: 2;/*行間*/
	margin: 0px;
	padding: 0px;
	color:#300;
	font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	-webkit-text-size-adjust: 100%;
	background-color: #FFF;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form{margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
textarea,select,input[type="text"],input[type="checkbox"],input[type="radio"],input[type="button"],input[type="submit"]{font-size: 100%;}
h1,h2,h3,h4,#menubar {font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ";}


/*ヘッダー*/
header {
    position: relative;
    padding: 35px 0 0 0px;
	margin:0 auto;
	height: 480px;
	background-image:url(images/hitoik_wall.jpg);
	/*background-position:right 70% bottom 0%;*/
	background-position: 50% 90%;
	background-repeat:no-repeat;
}
h2 {
	font-size:140%;
	font-weight:bold;
	text-align:center;
}
.logo {
	text-align:center;
}
.main {
	padding: 40px 20px;
}
section {
	padding: 30px 0;
}
.sp {
  display: none;
}
.inner{
  width: auto;
  padding: 0;
  margin: 25px;
}
#copyright {
	text-align:center;
	margin:20px;
	width: auto;
	font-size:80%;
}

.read {
	margin:20px;
	text-align:center;
}
.read_title {
	font-size:140%;
	font-weight:bold;
	padding-bottom:20px;
}
.read_text {
	font-size:90%;
	padding-bottom:10px;
}
.read_text2 {
	font-size: 70%;
	padding-bottom:10px;
}

@media only screen and (max-width: 520px) {
	header {
	  padding: 0;
	  margin: 0;
	  height: 400px;
	}
	.logo img{
	  width: 100%;
	  text-align:center;
	}
	
	h2 {
	  font-size:100%;
	}
	.read_title {
	  font-size:100%;
	}
	.read_text {
	  font-size:80%;
	}
	.read_text2 {
		font-size: 60%;
		padding-bottom:10px;
	}
	.imglogo {
	  width: 60%;
	  text-align:center;
	  margin: auto;
	}
}
@media screen and (min-width: 560px) {
.sp-br {
display: none;
}
}

/*テーブル　会社概要*/
.table01 {
	margin: auto;
	font-size:80%;
	max-width:800px;
	width:100%;
}

.table01 th,
.table01 td {
  margin:0;
  padding: 14px;
  border-bottom: 1px solid #300;
}

.table01 th {
  width: 20%;
}

.table01 td {
	padding-left: 50px;
	margin-right: 50px
}

/* テーブル　会社概要　sp用 */
@media only screen and (max-width: 520px) {
/* スクリーンサイズが520px以下の場合に適用 */
	.table01 {
	  width:90%;
	}
	.table01 th,
	.table01 td {
	  display: block;
	}
	.table01 th {
	  width:auto;
	  text-align:center;
	}
	
	.table01 td {
	  width:auto;
	  margin: 10px 0;
	  padding:0px;
	}
}

/*テーブル　知動考アイコン*/

/*listブロック
---------------------------------------------------------------------------*/
/*listブロック設定*/
.list {
	overflow: hidden;position: relative;
/*	box-shadow: 0px 0px 5px rgba(0,0,0,0.3) inset;	ボックスの影。右へ、下へ、ぼかす範囲。0,0,0は黒の事で0.3は透明度30%の事。insetは内側に向かう影。*/
	margin: 0 2% 30px;	/*上、左右、下へのボックスの外に空けるスペース*/
	background: #fff;	/*背景色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	padding: 2px;	/*ボックス内の余白*/
}
/*.list a {
	overflow: hidden;text-decoration: none;display: block;
}*/
/*h4タグ設定*/
.list h4 {
	padding: 0;border: none;
	font-size: 200%;	/*文字サイズ*/
	color: #2b3f7f;		/*文字色*/
	line-height: 1.2em;
	/*height: 1em;overflow: hidden;	１行を超えた部分は非表示になる*/
	margin-bottom: 0.5em;
}
/*段落タグ設定*/
.list p {
	font-size:90%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.8;
	overflow: hidden;
}
/*figure画像の設定*/
.imgset {
	margin: auto;	/*上、右、下、左への画像の外側にとるスペース*/
	padding: 0;
	text-align:center;
}
/*figure画像の右側回り込みの設定*/
.list figure img.fr {
	width: 30%;		/*画像幅*/
	float: right;	/*右に回り込み*/
	margin: 0 0 0 4%;	/*上、右、下、左への画像の外側にとるスペース*/
}
/*figure画像の左側回り込みの設定*/
.list figure img.fl {
	width: 30%;		/*画像幅*/
	float: left;	/*左に回り込み*/
	margin: 0 4% 0 0;	/*上、右、下、左への画像の外側にとるスペース*/
}

/*2カラム利用時--------------------------------------------*/
.c2 .list {
	float: left;	/*左に回り込み*/
	padding: 3%;	/*ボックス内の余白の上書き*/
	width: 40%;		/*幅*/
}
/*h4タグ*/
.c2 .list h4 {
	font-size: 130%;
}
/*p段落タグ*/
.c2 .list p {
	height: 5.4em;	/*上の「.list p」の「1.8」×「表示させたい行数」を設定。5.4だと3行分になる。*/
}
/*3カラム利用時--------------------------------------------*/
.c3 { 
	max-width:960px;
    width: 100%;
	margin: 0 auto;
}
.c3 .list {
	/*margin:10px 20px;*/
	float: left;	/*左に回り込み*/
	padding: 2%;	/*ボックス内の余白の上書き*/
	width: 25.3%;	/*幅*/
}
/*h4タグ*/
.c3 .list h4 {
	font-size: 110%;
}
/*p段落タグ*/
.c3 .list p {
	font-size: 70%;
	height: 10.8em;	/*上の「.list p」の「1.8」×「表示させたい行数」を設定。10.8だと6行分になる。*/
}
/*右下の「→」マークを少し小さく設定しなおす*/
.c3 .list a::before {
	width: 20px;
	line-height: 20px;
	font-size: 12px;
}

 /*listブロック（※２カラムも３カラムと１列レイアウトと同じように設定しなおす）
---------------------------------------------------------------------------*/
/* スクリーンサイズが960px以下の場合に適用
@media only screen and (max-width: 960px) {
.c3 .list {
	width: calc(100% / 3);  100%幅を3で割るという指定
}
} */
@media only screen and (max-width: 520px) {
/* スクリーンサイズが520px以下の場合に適用 */
	.c3 { 
	width: 90%; 
	margin: 0 auto;
	}
/*listブロック設定*/
	.list {
		margin: 0 !important;
		padding: 4% !important;
		float: none !important;
		width: auto !important;
		box-shadow: none;
	}
	.list:last-of-type {
		margin-bottom: 20px !important;
	}
	/*h4タグ設定*/
	.list h4 {
		font-size: 150% !important;
	}
	/*段落タグ設定*/
	.list p {
		font-size: 70% !important;
		line-height: 1.8 !important;
		height: auto !important;
	}
	/*figure画像の右側回り込みの設定*/
	.list figure img.fr {
		width: 100%;		/*画像幅*/
		float: right;	/*右に回り込み*/
		margin: 0 0 0 4%;	/*上、右、下、左への画像の外側にとるスペース*/
	}
	/*figure画像の左側回り込みの設定*/
	.list figure img.fl {
		width: 100%;		/*画像幅*/
		float: left;	/*左に回り込み*/
		margin: 0 4% 0 0;	/*上、右、下、左への画像の外側にとるスペース*/
	}
}


/*会社案内のアイコン*/
.icon_company {
  position: relative;
/*  padding: 0 0 0 40px;*/
}
.icon_add::after {
  position: absolute;
  top: -10px;
  left: 70px;
  content: url(images/hitoik_icon1.jpg);
}
.icon_tel::after {
  position: absolute;
  top: -10px;
  left: 60px;
  content: url(images/hitoik_icon2.jpg);
}
.icon_director::after {
  position: absolute;
  top: -10px;
  left: 75px;
  content: url(images/hitoik_icon3.jpg);
}
.icon_url::after {
  position: absolute;
  top: -10px;
  left: 60px;
  content: url(images/hitoik_icon4.jpg);
}
.icon_established::after {
  position: absolute;
  top: -10px;
  left: 55px;
  content: url(images/hitoik_icon5.jpg);
}

@media only screen and (max-width: 520px) {
/* スクリーンサイズが520px以下の場合に適用 */
	.icon_add::after {
	  left: 70px;
	}
	.icon_tel::after {
	  left: 60px;
	}
	.icon_director::after {
	  left: 70px;
	}
	.icon_url::after {
	  left: 70px;
	}
	.icon_established::after {
	  left: 60px;
	}

}
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
.cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
	max-width:960px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
 /*   justify-content: space-between;*/
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
.cardlayout-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}
.cardtext {
	font-size:70%;
    padding: 4px;
}
/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.8em;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}


/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
 /*   width: 100%;*/
}

/* 画面幅520px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 520px) {
	.cardlayout-wrap {
/*		width: 960px;*/
		margin:auto;
	}
    .card-list {
        margin: 0;
       /* width: calc(100% / 2);  100%幅を2で割るという指定 */
        width: calc(100% / 4);  /*100%幅を4で割るという指定 */
    }
	
	.card-figure {
		margin: 0 auto;
		padding: 0;
	}
	.cardtext {
		font-size:70%;
	}
}
/* 画面幅960px以上の場合カードレイアウトを3カラムで配置
@media all and (min-width: 960px) {
    .card-list {
        width: calc(100% / 4); /* 100%幅を4で割るという指定
    }
*/    
/* 最後の行が4列より少ない場合左寄せにレイアウトさせる
    .cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(100% / 4);
    } 
}
 */
/*協賛企業*/
.block-grid {
  width: auto;
  overflow: hidden;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.block-grid li {
  display: inline-block;
  vertical-align: top;
  margin: 0 1% 30px;
  padding: 0;
	text-align:center;
}
.block-grid a {
  text-decoration: none;
  font-size: 1.6em;
}

.block-grid-1-2-3 li img {
	width: 78%;
}
/* 画面幅480px以上の場合カードレイアウトを2カラムで配置 */
@media (min-width: 520px){
  .block-grid-1-2-3 li {
    width: 48%;
  }
  .block-grid-1-2-3 li:nth-child(2n+1) {
    clear: both;
  }
}
@media (min-width: 960px){
  .block-grid-1-2-3 li {
    width: 31.3333%;
  }
  .block-grid-1-2-3 li:nth-child(2n+1) {
    clear: none;
  }
  .block-grid-1-2-3 li:nth-child(3n+1) {
    clear: both;
  }
}
/*ハンバーガーアイコン*/
.btn-burger {
    cursor: pointer;
    display: block;
    width: 56px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 10px;
	background-color:#300;
}

/*ハンバーガーアイコンを作る三本線*/
.icon, .icon:before, .icon:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px; /*線の太さ*/
    width: 35px; /*線の長さ*/
    border-radius: 2px;
    display: block;
    content: '';
    cursor: pointer;
    margin: auto;
	background-color:#FFF;
}

/*三本線の間隔*/
.icon:before {
  top: 12px;
}
.icon:after {
  top: -20px;
}

/*チェックボックス非表示*/
.nav-toggle {
    display: none;
}

/*中身*/
.nav {
    background-color: #fff;
    
}
.nav-list a {
    display: block;
    text-decoration: none;
    color: #300;
    border-bottom: 1px solid #300;
}
.nav-list a:hover {
    border-bottom: 3px solid #300;
	font-weight:bold;
}

.nav-list {
    list-style: none;
    display: none;
    margin: 0;
}

.nav-list li {
    padding: 30px;
	font-size:80%;
}

.nav-toggle:checked ~ .nav .nav-list {
    display: block;
}

/* --------------------------------------------------
  幅768px以上のスタイル指定
-------------------------------------------------- */
@media screen and (min-width: 520px) {
/* ハンバーガーボタン */
.btn-burger {
    display: none;  /*768px以上では使用しない */
}
.nav-toggle:checked ~ .nav .nav-list {
    display: none;
}
.nav {
    height: 75px;
	background-color:transparent;
}
.nav-list {
    display: flex;
    justify-content: center;
    height: 75px;
    align-items: center;
}
.nav-list {
}
.nav-list li:not(:last-child) {
}

}