@charset "utf-8";
/* =============================================================================
	/company_page/sp/css/construction.css
	スマートフォン向けWEBページの構造を定義する。
============================================================================= */

/*  ============================================================================
	共通定義
	ページでよく使われる部品を定義する
	ul,liについては上部メニューで利用している都合上list-styleはnoneに設定
============================================================================= */
html {
	font-size:			18px;
}
body {
	max-width:			1200px;
	min-width:			320px;
	margin:				0px auto;
	font-family:  "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";
	font-size:			100%;
}
img {
	max-width:				100%;
	height:					auto;
}
ul {
	text-align:				left;
	list-style:				none;
	padding:				0px;
	margin:					0px;
}
li {
	list-style:				none;
}
h1 {
	font-size:				150%;
}
h2 {
	font-size:				120%;
	margin-top:				8px;
	margin-bottom:			8px;
	padding:				0px;
}
h3 {
	font-size:				100%;
	margin-top:				6px;
	margin-bottom:			6px;
	padding:				0px;
}
/* aタグはボタンや各種機能でも利用するため、リンクの下線・色を変更*/
a {
	text-decoration:		none;
	font-size:				100%;
	color:#000;
}
/* 通常のリンクとしては以下のスタイルを別途適用する。 */
.a-link{
	text-decoration:	underline;
	/* color: hsl(90, 60%, 40%);*/
	color: hsl(50, 100%, 30%);
}

/*文章内でリンクであることを強調する場合に使用する*/
.default-link-style {
	text-decoration:		underline;
	font-size:				100%;
	color:hsl(90, 60%, 40%);;
}
p {
	font-size:				100%;
}
/* 横並びに項目を配置する際に入れ物として配置する。 */
.box-container {
	display:					flex;
	display:					-moz-flex;
	display:					-o-flex;
	display:					-webkit-flex;
	display:					-ms-flex;
	flex-direction:				row;
	-mox-flex-direction:		row;
	-o-flex-direction:			row;
	-webkit-flex-direction:		row;
	-ms-flex-direction:			row;

	align-items:				center;
}

/*  ============================================================================
	メニュー定義
	サイト内の各ページに遷移するリンクについてのデザインを定義する。
============================================================================= */



/* アコーディオンメニューのボックス全体 */
/*画面幅が狭い(680px以下)場合に表示*/
@media (max-width:680px) {
	/* 改修中 */
	.accbox{ /*アコーディオンメニュー全体の入れ物*/
		border: 2px solid #FFF;
	}
	.accContents > a , accContents > a:visited{
		display:block;
		color:black;
	}
	.accContents > a:hover, .accContents label:hover{
		background: hsl(90, 60%, 20%);
		transition: all 0.3s;
	}
	.accContainer{ /*アコーディオンメニューとして実装する部分の入れ物*/
		width:100%;
		background-color:#FFF;
	}
	.accContainer *{
		font-size:24px;
	}
	.accLabel {
		display:block;
	}
	.menuTop{
		background:hsl(90, 60%, 20%);
	}
	.accLabel::before{
		content:"";
		height:8px;
		width:8px;
		position:absolute;
		border-top: 3px solid hsl(90, 60%, 20%);
		border-right: 3px solid hsl(90, 60%, 20%);
		margin-top:8px;
		right:20px;
		-webkit-transform: rotate(45deg);
		transform: rotate(135deg);
		transition: all 0.3s;
	}
	.accContents{ /*アコーディオンメニューの中身*/
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform: translateZ(0);
		transition: all 0.3s;
		height: 0;
		overflow: hidden;
	}
	.accCheckBox {
		display: none;
	}
	.accCheckBox:checked + .accLabel + .accContents{
		height: auto;
		padding:8px ;
		transition: all 0.3s;
	}

	.accCheckBox:checked + .accLabel::before{
		transform: rotate(-45deg);
		transition: all 0.3s;
	}
	.accItem + .accItem{
		border-top: 2px solid hsl(90, 60%, 20%);
	}
}

@media (max-width:680px) {
	.pullDownMenu{display: none;}
}

@media (min-width:680px) {
	/* 改修中… */
	.pullDownMenu {
		position: relative;
		width: 100%;
		height:40px;
	}
	.pullDownMenu > li {
		float: left;
		width: 20%; /* グローバルナビ5つの場合 */
		height: 40px;
		line-height: 40px;
		background:hsl(90, 60%, 70%);
		font-size:18px;
		text-align: center;
	}
	.pullDownMenu > li a {
		display: block;
		color: #000;
	}
	.pullDownMenu > li a:hover {
		background: hsl(90, 60%, 80%);
	}
	.menuSingle + .menuSingle{
		border-left:2px solid #FFF;
		box-sizing: border-box;
	}
	ul.menuScondLevel {
		visibility: hidden;
		opacity: 0;
		z-index: 1;
	}
	.pullDownMenu > li:hover {
		background: hsl(90, 60%, 70%);
	}
	.menuScondLevel li {
		border-top: 2px solid #ffffff;
		text-align: center;
	}
	.menuScondLevel li a:hover {
		background: hsl(90, 60%, 80%);
	}
	/* 下矢印 */
	.init-bottom:after {
		content: '';
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0 0 5px 15px;
		border-right: 3px solid hsl(90, 60%, 30%);
		border-bottom: 3px solid hsl(90, 60%, 30%);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.pullDownMenu > li.menuSingle {
		position: relative;
	}

	li.menuSingle ul.menuScondLevel {
		position: absolute;
		top: 40px;
		width: 100%;
		background: hsl(90, 60%, 60%);
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}
	li.menuSingle:hover ul.menuScondLevel {
		top: 40px;
		visibility: visible;
		opacity: 1;
	}
}
@media (min-width:680px){
	.accContainer{display: none;}
}

/*  ============================================================================
	コンテンツエリア定義
	ページの中心となるコンテンツ部分の構造を定義する

============================================================================= */

/* コンテンツ表示欄の左右分割定義 */
.contents_container{
	display: flex;
}
/*ページのサブ領域　重要度が低い内容やバナーを掲載する
　ページの横幅のサイズが小さいときには表示を消す      */
.side_contents{
	width: 240px;
	margin-right:8px;
	padding: 8px;
	font-size:12px;
}
@media (max-width:840px) {
	.side_contents{display: none;}
}
.bottom_contents{
	display:none;
}
@media (max-width:840px){
	.bottom_contents{display:block;}
}

/*ページのメイン領域*/
.main_contents{
	flex:1;
	padding : 8px;
	font-size: 14px;
}
.contents_box + img{
	margin-top :8px;
}
.contents_box{
	padding:4px;
	background-color: #FFF;
	border-color: #BBB;
	box-shadow: 2px 2px 2px rgba(160, 160, 160, 0.5);
}
.contents_box + .contents_box{
	margin-top:8px;
}

/*背景を除いたページ全体のコンテンツ定義*/
#contents {
	padding-top:4px;
	padding-bottom:4px;
}

/* トップ画像全般 */
#top_graph {
	display:		block;
	position:		relative;
	text-align:		center;
	padding-top:	5px;
	padding-bottom:	5px;
	width:100%;
	height:auto;
}
#top_graph img{
	/*height:280px;*/
	height:auto;
}

/* トップ画像のリンク*/
#now_graph {
	/* position:relative;*/
	position:absolute;
	margin-left:auto;
	margin-right:auto;
}

@media all and (-ms-high-contrast: none){
	/* IEの不具合対策用 */
	#now_graph {
		display:none;
	}
}

#next_graph{
	box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}

/* トップ画像スライダー用のCSS */
.slider { 
	width:94%;
	margin: 0 auto;
}
.slider img {
	width:100%;
	height:auto;
}
.slider .slick-slide{
	margin:0 15px;
}
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 6px solid hsl(90, 60%, 60%);/*矢印の色*/
    border-right: 6px solid hsl(90, 60%, 60%);/*矢印の色*/
    height: 15px;
    width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -2.0%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -2.0%;
    transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
	margin:0px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:16px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ebebeb;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
    background:hsl(90, 60%, 60%);/*ドットボタンの現在地表示の色*/
}



/*  ページ右側の一番先頭に来るリンク
	個人利用者・事業主の訪問者を振り分ける */
.top_link{
	display:flex;
	justify-content:space-between;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.top_link_block{
	position:relative;
	background:rgb(255,255,255);
	/* box-shadow: 2px 2px 2px rgba(160, 160, 160, 0.5); */
	border: 1px solid #BBB;
	margin-bottom: 3px;
}
.top_link_block_title {
	width: 100%;
	padding: 5px;
	font-size:1.2em;
	border-bottom:1px solid #BBB;
	box-sizing: border-box;
}
.top_link_block_text{
	padding-bottom:1.9em;
}
.top_link_block_image {
	padding:5px;
	text-align: center;
}

.top_link_block_footer {
	position: absolute;
	right:0;
	bottom:0;
	text-align: center;
}

/*横幅が681px以上*/
@media (min-width:681px){
	.top_link{
		flex-direction: row;
	}
	.top_link_block{
		display:block;
		width:49%;
	}
	/*リンク内の要素（ヘッダー・画像・テキスト）は縦並び*/
	.top_link_block_title{
		width:100%;
	}
	.top_link_block_text{
		width:100%;
	}

	.top_link_blick_image{
		display:block;
	}
	.top_link_block_image img{
		width:100%;
		object-fit:cover;
	}
}
/*横幅が680以下*/
@media (max-width:680px){
	.top_link{
		flex-direction: column;
	}
	.top_link_block{
		display:flex;
		flex-direction: row;
		width:100%;
	}
	/*リンク内の要素（ヘッダー・テキスト）は横並び
	  画像は非表示
	*/
	.top_link_block_title{
		width: 30%;
	}
	.top_link_block_text{
		width: 70%;
	}
	.top_link_block_image{
		display:none;
	}
	.top_link_block_image img{
		width:120px;
		height:120px;
		object-fit:cover;
	}
}
.top_link_block_footer a {
	color: white;
	font-size: 1.5em;
  }

/* リンクごとに色を変更する */
.customer_all {
	background:hsl(96, 50%, 40%);
	color:hsl(0,100%,100%);
	font-weight: bold;
}
.customer_setagaya {
	background:hsl(214, 50%, 40%);
	color:hsl(0,100%,100%);
	font-weight: bold;
}

/* 横幅に合わせて列数を切り替えるコンテナ */
.flex_card_container{
	display:flex;
	flex-wrap: wrap;
	width:100%;
	justify-content: space-between;
	gap: 10px 0px;
}
.flex_card{
	width:100%;

}
@media (max-width:680px){
	.flex_card{width:100%;}
}
@media (min-width:681px){
	.flex_card{width:49.5%;}
}
.card_image{
	display:flex;
	justify-content: center;
}
.card_image img{
	height:160px;
}

.flex_padding{
	/* margin:8px; */
	padding:4px;
	background-color: hsl(50, 100%, 95%);
	/*box-shadow: 2px 2px 2px rgba(160, 160, 160, 0.5);*/
	border: 1px solid #BBB;
}

.card_title{
	background-color: hsl(50, 100%, 60%);
	color:hsl(0, 0%, 20%);
	font-weight: bold;
	padding-left: 1em;
}


/* トップリンクの下に位置するお知らせ欄 */
.notice_container{
	width:100%;
}
.notice_item{
	padding:8px;
}
.notice_image{
	width: 100%;
	height:auto;
}
.notice_text{
	text-decoration: underline;
}



/*  テーブル項目の書式	*/
.table_info {
	width:					100%;
	margin:					5px auto;
	background-color:		#FFFFFF;
}

.td_head {
	width:				25%;
	border: 2px solid hsl(55, 60%, 60%);
	padding:			0.5em;
	font-weight: bold;
	background:			hsl(55, 80%, 80%);
}

.td_odd {
	width:				75%;
	text-align:			center;
	border: 2px solid hsl(55, 60%, 80%);
	padding:			0.5em;
	background-color:	white;
}

.simpleTable {
	width:100%;
	margin:5px auto;
	background-color:white;
}
.simpleTable td {
	border: 2px solid hsl(55, 60%, 60%);
	background-color:white;
}
.simpleTableHeader td {
	background-color:hsl(55, 80%, 80%);

}



/* 横幅680px以下で表示を切り替えるクラス */
@media (max-width:680px){
	.forSP{
		display:block;
	}
	.forPC{
		display:none;
	}
}
@media (min-width:681px){
	.forSP{
		display:none;
	}
	.forPC{
		display:block;
	}
}

/*
	シンプルなリスト
*/
.simpleListContainer {
	margin-left:24px;
}
.simpleList {
	list-style:circle;
}
.simpleList > .simpleList {
	margin-left:24px;
}

/*
	主にファイルの一覧を表示するためのリスト
*/
.fileList {
	background-color:#FFF;
	border: 1px solid hsl(50, 90%, 40%);
	padding:10px;
}
.fileListTitle{
	margin-bottom:16px;
	border-bottom:4px solid hsl(50, 90%, 40%);
	font-size: 18px;
	font-weight: bold;
	color:hsl(50, 100%, 30%);
	position:relative;
}
.fileListItem {
	background-image: url("../image/pdf_32.png");
	background-position: top left;
	background-repeat: no-repeat;
	height:48px;
	background-size:  auto 48px;
	padding-left: 60px;
	line-height:48px;
	margin-top:8px;
	padding-bottom:8px;
	border-bottom: 1px dotted hsl(50, 90%, 40%);
}
.fileListItem + .fileListItem::before{
	content:"";
	width:100%;
	height:3px;
	border-top: 2px solid hsl(50, 90%, 40%);
}
/*
	各ページで共有するシンプルなコンテンツ表示領域
*/
.simpleContents {
	background:#FFF;
	padding:8px;
}

/*	GoogleMAPの表示領域				*/
/*	（企業情報ページなどに利用）	*/
#maps{
	margin-left:auto;
	margin-right:auto;
	width:90%;
	height:400px;
	padding:	10px
}

/* お知らせの表示領域 */
#iframe {
	font-size:				100%;
}

/* =============================================================================
    フッターエリア定義
    主にお問い合わせページに配置するフォーム部品などを配置する。
============================================================================= */
#footer {
	display:				block;
	height:auto;
}
#footer_link{
	display:flex;
	padding:16px;
	justify-content: space-around;
	flex-wrap:wrap;
	gap:8px;
}

#footer_credit{
	height:auto;
	text-align: center;
	padding:16px;
}
#footer a{
	color: #FFF;
	font-weight: bold;
}

/* =============================================================================
    その他定義
	ページ内に常に表示するボタンやリンクなどの定義
	
============================================================================= */
.flexList {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items: center;
	gap:10px;
	flex-wrap: wrap;
}
.flexItem {
	width:240px;
	height:80px;
	display:flex;
	box-sizing: border-box;
	border: 2px solid #CCC;
}
.flexItem a{
	display:flex;
	justify-content: start;
}
.flexItemImage {
	width:80px;
	position:relative;
}
.flexItemImage img{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:60px;
}
.flexItemText{
	width:140px;
	height:60px;
	padding:10px;
	text-align: center;
	line-height: 60px;
	font-size:24px;
	font-weight: bold;
	color:#000;
}


/* =============================================================================
    その他定義
	ページ内に常に表示するボタンやリンクなどの定義
	
============================================================================= */
#page_top {
	position:			fixed;
	right:				0px;
	bottom:				0px;
	z-index:			9999;
}
#page_top a {
	display:			block;
	margin:				8px 8px 8px 8px;
	padding:			4px 4px 4px 4px;
	width:				80px;
	height:				80px;
	text-align:			center;
}
#page_top a {
	font-size:				400%;
	font-weight:			bold;
	color:					#FFF;
	border-radius:			50%;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}