@charset "utf-8";

/* *******   色変数の定義   ******* */
:root{
  /* *******   共通   ******* */
	/* 全体の背景色 */
	--body-background-color:rgb(240 240 240);
	/* ヘッダー領域の背景色 */
	--header-background-color:rgb(240 240 240);
	/* ヘッダー領域の表示幅 */
	--w-container-width:100%;
	--container-width:90%;
	/* ヘッダー領域の高さ */
	--header-height:50px;
	
	/* 企業理念背景色 */
	--rinen-background-color:rgb(255 255 255 / 0%);
	/* 会社概要背景色 */
	--company-info-background-color:rgb(251 251 251 / 73%);
	/* 企業理念、会社概要、アクセス文字サイズ */
	--text-font-size:30px;
	/* 企業理念、会社概要、アクセス文字の左側のライン設定 */
	--text-border-left:solid 7px rgba(70 190 255);
	/* 企業理念、会社概要、アクセス文字のアンダーライン設定 */
	--text-border-bottom:solid 2px rgba(70 190 255);
	/* neture文字イメージ横幅サイズ */
	--img-nature-width:45%;
	/* neture文字イメージ図左からの位置 */
	--img-nature-left:4vw;
	/* 企業理念文言表示幅 */
	--text-rinen-width:80%;
	/* 企業理念文言フォントサイズ */
	--text-rinen-size:18px;

	/* フッター領域の背景色 */
	--footer-background-color:rgb(240 240 240);
}

body{
	margin:0;
	background-color:var(--body-background-color);
	font-family:sans-serif;
	/* 背景画像 */
	/* background-image: url(image/head_office.png); */
    /* background-repeat: no-repeat; */
    /* background-position: bottom; */
    /* background-size: cover;/* 全体に画像を引き延ばす */ */
}

/* 全てのイメージをブロックボックスにする⇒画像下の余白が無くなる */
img{
  display:block;
}

h1,h2,h3,h4,h5,h6,p,a{
  margin:0;
}

ul{
    list-style-type:none;/*ulのドットを消す*/
}

header{
	height:var(--header-height);/* ヘッダー領域の高さ指定⇒必須 */
	background-color:var(--header-background-color);
	position:sticky;/*ヘッダーがスクロールしないようにする*/
	top:0;/*ヘッダーの位置を上から0pxに固定*/
	z-index:10;/*ヘッダーが上層にくるようにする*/
}

.w-container{
	/* width:var(--w-container-width); */
	/*表示する幅を指定*/
	margin:auto;/*widthの表示幅に合わせた左右の余白が入る*/
}

.header-container{
	display:flex;/*アイテムを横に分ける*/
	justify-content:space-between;/*余白をもって等間隔に配置*/
	align-items:center;
	/* height:55px; */
	/*iframeの縦スクロールバーが表示されないようにする*/
}

.header-iframe{
	display:block;
	width:100%;
	height:var(--header-height);/* ヘッダー領域の高さ指定⇒必須 */
	margin:0;
	/*iframeの縦スクロールバーが表示されないようにする*/
	border:0;
}

main{
  display:grid;
  background-color:rgb(255 255 255);
  /* margin:10px; */
}

/* #############リンクの文字設定############## */
a:link, a:visited, a:hover, a:active {
	color: rgb(5 ,5 ,255);/* リンク文字の色 */
}
a{
	/* text-decoration:none; */
	/* リンク文字の下線表示しない */
}

/* ************************************************* */
/* *************   company.html   ****************** */
/* ************************************************* */

/* ヘッダーからフッターまで⇒w-containerと同じ領域 */
.company-info{
/*   height:100%; */
	background-color:var(--company-info-background-color);
	z-index:1;
	padding:10px;
	justify-items:center;
}
/* 企業理念領域、会社概要領域、アクセス領域共通設定div */
.content-container{
  /* padding:20px; */
	width:var(--container-width);
	/* width:90%; */
	justify-items:center;
}
/* 企業理念の文字設定 */
.content-container h2{
	font-size:var(--text-font-size);
	margin: 10px 20px 10px 20px;
	border-left :var(--text-border-left);
	border-bottom: var(--text-border-bottom);
	padding: 10px 20px 10px 20px;
	/* justify-content:center; */
	/* width:var(--container-width); */
	width:100%;
	/* margin-left:1%; */
}
/* 企業理念文字の下から理念文章末尾までのdiv */
.explanation-container{
  padding:20px; 
}
/* 企業理念のneture...イメージ設定 */
.explanation-container img{
	padding-bottom:20px;
	margin-left:var(--img-nature-left);
	width:var(--img-nature-width);
}
/* 企業理念のneture...イメージ設定 */
.explanation-container p{
	/* padding-bottom:20px; */
	width:var(--text-rinen-width);
	font-size:var(--text-rinen-size);
}
/* 企業理念の文言をセンターへ配置 */
.text-rinen{
	justify-items:center;
}
/* 企業理念の文字から理念文章末尾までのdiv */
.company-mission{
  /* display:block; */
  background-color:var(--rinen-background-color);
  /* padding:20px;   */
}
.company-summary{
	/* display:block; */
	/* width:100%; */
}

/* アクセス領域の設定 */
.access-container{
  padding:20px;
	/* margin:0; */
	width:var(--container-width);
	width:100%;
}
/* 会社概要、沿革、アクセス領域の表の共通設定 */
table {
  border-collapse: collapse;
/*   border: solid 1px black; */
  /* width:100%; */
}
table tr{
	/* display:flex; */
	/* width:100%; */
  /* border: solid 1px black; */
}
.summary-tr{
	/* width:100%; */
  /* border: solid 1px black; */
}
/* テーブル縦領域の設定 */
table th{
	/* display:flex; */
  padding:10px;
  /* width:100%; */
	width:17%;
  border: solid 1px black;
  text-align:left;
	/* font-size:15px; */
}
/* テーブル横領域の設定 */
.summary-th{
	/* width:10%; */
}
table td{
 	/* display:block; */
 padding:10px;
  /* width:100%; */
  width:90vw;
  border: solid 1px black;
}
.summary-td{
	/* width:90vw; */
}
.access-container table{
	display:block;
	/* width:100%; */
	padding:20px;
}
/* テーブル縦領域の設定 */
th.a{
  padding:10px;
  width:10%;
  text-align:center;
}
/* テーブル横領域の設定 */
td.b{
	padding:10px;
	width:30%;
	justify-items:center;
}
/* テーブル横領域の設定 */
td.c{
  padding:10px;
  /* width:auto; */
	width:80vw;
}
/* アクセスの写真設定 */
.img-company-office{
  /* width:100%; */
	height:250px;
	width:100%;
	max-width:350px;
	object-fit:cover;
	object-position:50% 60%;
}
/* アクセスの地図領域の設定 */
.company-map{
  height:250px;
  width:100%;
}
#pagetop{
	text-align:right
}

/* 仙台工場の電話番号をCSSで隠す */
#toggle {
	display: none;
  }
  #toggle + .label::after {
	content: "仙台工場の電話番号はこちらをクリック";
	color: blue;
  }
  #toggle:checked + .label::after {
	content: "TEL:0228-38-3000";
	color: black;
  }
  .label {
	cursor: pointer;
  }


/* ************************************************* */
/* *************    footer.html   ****************** */
/* ************************************************* */
footer{
	background-color:var(--footer-background-color);
  z-index:10;/*ヘッダーが上層にくるようにする*/
	height:200px;
}

.footer-container{
	/* height:150px; */
}

.footer-iframe{
  display:block;
  width:100%;
	height:245px;
  border:0;
}


/* モバイル時の設定 */
@media(max-width:768px){
	nav{
	    /* display:none; */
	}
	header{
		height:90px;/* ヘッダーの高さ変更(header-iframeも同じ値に) */
	}
	.header-iframe{
		height:90px;/* ヘッダーの高さ変更 */
	}
	footer{
		height:550px;
	}
	.footer-container{
	}
	.footer-iframe{
		height:550px;
	}

  table th, td{
    display:block;
    /* border: solid 1px black; */
  }

  table th{
    width:100%;
    text-align:center;
    border: solid 1px black;
/*     margin:0px; */
  }
  table td{
    width:100%;
    border: solid 1px black;
/*     text-align:center; */
  }
  th.a,td.b,td.c{
    width:100%;
}