@charset "utf-8";

/* *****************************
 * 色調
 * ベース：藍色（あいいろ）#00367B
 * 薄色：水色鼠（みずいろねず）#E0EDF1
 *パターン：秘色（ひそく・ひしょく）#00708E
 * **************************** */

/* *****************************
 * 基本要素スタイル
 * **************************** */
*{
    /* 意図しない横幅が出ないように画面幅で強制改行を有効にする */
    /* word-break: break-all; */

	/* 単語単位改行 */
    word-break:break-word;
	
	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

a {
	/* タグ区切り毎に改行
	word-break: keep-all;
	*/
	
	color:#000;
}

html {
/*
	margin: 0px;
	padding: 0px;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 13pt;
*/
	--fs-default: var(--fs-130);

	font-style: normal;
	line-height: normal;
	font-weight: normal;
	/*text-align: center;*/
}

header, nav, article, aside, section, footer {
	margin: 0em;
	padding:0em;
}

/*
img {
	max-width:100%;
	height: auto;
	object-fit: cover;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
	color: #B83503;
}

small {
	font-weight: normal;
}
*/

/* *****************************
 * CIスタイル
 * **************************** */
:root {
	--col-ci1: 0,54,123;
	--col-ci2: 224,231,239;
}

.bg-col-ci1 {
	--bg-col:var(--col-ci1);
}
.bg-col-ci2 {
	--bg-col:var(--col-ci2);
}

.hover-col-ci1:hover {
	--bg-col:var(--col-ci1);
	--ft-col:var(--col-white);	
}

/* ****************************** *
 * テーブル
 * ****************************** */

table, td, th {
	border:#ccc 1px solid;
}

table th {
	background-color:#eee;
}

/* *****************************
 * 印刷メディア用
 * **************************** */
@media print{
	/* 印刷しないクラス */
	.noprint {
		display:none;
	}
}

/* *****************************
 * 汎用クラス
 * **************************** */


/* 自身を示す */
.me {
	font-size: larger;
	font-weight: bold;
}

/* *****************************
 * システムクラス
 * **************************** */

/* OKの場合 */
.complete {
	margin:1em;
	padding:1em;
	
	border:#666 solid 1px;

	border-radius: 0.5em;
}

/* *****************************
 * 装飾クラス
 * **************************** */

.mark {
	padding:0.2rem;
	border:1px solid rgb(var(--bd-col));
	overflow: hidden;
	border-radius: var(--radius);
}

/* お知らせ */
.mark.info {
	color:#FFF;
	background:#3C0;
}

/* 取り組み */
.initiatives {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#09F;
}

/* 地域貢献 */
.contributions {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#F90;
}

/* 時事 */
.events {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#999;
}

/* *****************************
 * 商品関連 
 * **************************** */

.col-item {
    --col: 14rem;
}

/* *****************************
 * ヘッダ 
 * **************************** */

header p {
	margin: 0.2em 0em;
	padding: 0em;
	
	font-size: 14pt;
}


/*
header > nav {
    position:relative;
}

header > nav:before {
    content: "";
    position: absolute;
    padding: 0;
    margin: 0;
    background-color: rgb(var(--bg-col));
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translate(-50%,0);
    z-index: -1;
}
*/

/* *****************************
 * main
 * **************************** */

main {
	text-align: left;	
}

main h1 {
	padding-top:3rem;	
	padding-bottom:2rem;
}


/* *****************************
 * フッタ
 * **************************** */
footer {
	margin: 2em 0em 0em 0em;
	padding: 0em;
	display:block;
	
	clear:both;
	
	text-align:center;
	
}

footer address {
	margin: 0em;
	padding: 1em;
	font-style:normal;
	line-height: 1.5em;
	color:#fff;
	background-color:#00367B;
	/*
	border-top-width: 1em;
	border-top-style: solid;
	border-top-color: #5E6634;
	*/
}

footer address a {
	margin: 0em;
	padding: 0em;
	line-height: 1.5em;
	font-size: larger;
	color: #FFF;
}

footer ul {
	margin:0em;
	padding: 0em;
	list-style-type: none;
	text-align:center;
}

footer li {
	margin: 0em;
	padding: 0em;
	display:inline-block;
}

footer li a {
	margin: 0em;
	padding: 1em;
	color: #666;
	display:inline-block;
}

footer li a:hover {
	text-decoration:underline;
	color: #fff;
	background:#00367B;
	opacity:70%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	footer address {
		font-size: 10pt;
	}
}

/* *****************************
 * Facebook対応
 * **************************** */
.fb-page {
	width:290px;
	height:300px;
}

.fb-like-box {
	width:290px;
	height:300px;
}

/* ****************************** *
 * コンテンツ（ページ内容）
 * ****************************** */
/*
.content {
	margin: 0em;
	padding: 0em 1vw;
	text-align:left;
}
*/

.content .splash:before {
    content:"";
    display: block;
    padding-top: 40%; /* 高さを幅の75%に固定 */
}

/* ****************************** *
 * コンテンツ：標準見出し
 * ****************************** */
 

/* ****************************** *
 * コンテンツ：マップ
 * ****************************** */
.content .map {
	position: relative;
    width: 100%;
}

.content .map::before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}

.content .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ****************************** *
 * コンテンツ：連絡先
 * ****************************** */
.content .contact p {
	/* 単語内の禁則処理はせず、要素毎に改行 */
	word-break: keep-all;
}

/* ****************************** *
 * コンテンツ：業務内容
 * ****************************** */


/* ****************************** *
 * 全体校正(最後に配置)
 * ****************************** */
@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	header {
		margin-left:calc((100% - 1240px) / 2);
		margin-right:calc((100% - 1240px) / 2);
	}
	main {
		/* viewクラス直下の属性にスタイル適用 */
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
	footer ul {
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
}