@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Link Setting [Common]                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */


a{
	text-decoration: none;
	color: #333;
}
a:link {
}
a:visited {
}
a:active{
}
a:hover {
	color: #A4C520;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   List Setting [Common]                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ul,ol */
ul,ol{
}
/* dl */
dl{}
    dl dt{
    }
    dl dd{
    }


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*     [トップページ&共通部分]                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/*topheader*/
.TopHeaderArea{
	background: #465266;
	width: 100%;
}
.HeaderText{
	color: #fff;
	text-align: left;
	padding: 10px 0;
	font-size: 0.87em;
}

/* MainImageArea */
.MainImageArea{
	margin-bottom: 50px;
	background: #212F47 url("../images/bg_mainimage.jpg") no-repeat center center;
}
    .MainImageArea .WideWidthSetter{
      position: relative;
	  max-width: 1100px;
	  margin: 0 auto;
    }
    .MainImageArea #video{
      position: absolute;
      z-index: 75;
      height: 100%;
	  width: 100%;
	  margin: 0 auto;
    }
    .MainImageArea #buttonbar{
      position: absolute;
	  right: 0;
      bottom: 10%;
      z-index: 100;
      margin: 0!important;
      text-align: right;
    }
    .MainImageArea #buttonbar button{
      color: #000;
      font-weight:bold;
      background: #fff;
      border: none;
      cursor: pointer;
      padding: 5px 15px;
    }
    .MainImageArea .bxslider{
      position: absolute;
      z-index: 50;
    }


/* content
--------------------------------------------------- */

.TopPage .BlockHeader{
  margin-top: 55px;
  margin-bottom: 55px;
}
    .TopPage .BlockHeader .FloatRight{
      padding-top: 25px;
    }
    .TopPage .BlockHeader .FloatRight p{
      display: inline-block;
    }
    .TopPage .BlockHeader .FloatRight p:first-child{
      margin-right: 40px;
    }
	.TopPage .BlockHeader .FloatRight p .iconName{
	  font-size: 24px;
	  display: inline-block;
	  padding-right: 10px;
    }
		.TopPage .BlockHeader .FloatRight p a{
		  display: flex;
		  align-items: center;
		  height: 36px;
		}
		.TopPage .BlockHeader .FloatRight p a:hover{
		  text-decoration-line: none;
		  color: #A4C520!important;
		}

/* nav */
.TopPage .NavigationArea{
  background-color: #333;
  width: 100%;
  margin-bottom: 55px;
}
    .TopPage .NavigationArea ul{
	}
        .TopPage .NavigationArea ul li{
          width: 20%;
          float:left;
          text-align: center;
        }
            .TopPage .NavigationArea ul li a{
              display: block;
              border-right: #fff solid 1px;
              padding: 12px 0;
			  color: #fff;
            }
            .TopPage .NavigationArea ul li:first-child a{
              border-left: #fff solid 1px;
            }
            .TopPage .NavigationArea ul li a:hover{
              background-color: #A4C520;
			  text-decoration-line: none;
			  color: #333;
			}

.TopPage .NewsArea{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 55px;
  padding: 0 5%;
}
    .TopPage .NewsArea .Oshirase{
	  width: 50%;
      border-right: 1px solid #555;
    }
        .TopPage .NewsArea .Oshirase .inner{
          padding-right: 25px;
        }
    .TopPage .NewsArea .Enterprise{
	  width: 50%;
    }
        .TopPage .NewsArea .Enterprise .inner{
          padding-left: 25px;
        }
            .TopPage .NewsArea h2{
              font-size: 130%;
              margin-bottom: 1em;
            }
            .TopPage .NewsArea ul{
              list-style: none;
            }
                .TopPage .NewsArea ul li{
                  display: table;
                  margin-bottom: 1em;
                  font-size: 90%;
                  font-weight: bold;
                  color: #333;
                }
                .TopPage .NewsArea ul li:last-child{
                  margin-bottom: 0;
                }
					.TopPage .NewsArea ul li a:hover{
						text-decoration-line: underline;
					}
                    .TopPage .NewsArea ul li span{
                      display: table-cell;
                    }
                    .TopPage .NewsArea ul li span.Date,
                    .TopPage .NewsArea ul li span.Category{
                      white-space: nowrap;
					  padding-right: 1em;
                    }
                    .TopPage .NewsArea ul li span.Date{
                      width: 5em;
                      letter-spacing: -0.5px;
                    }
                    .TopPage .NewsArea ul li span.Category{
                      width: 5em;
					  color: #0069AA;
                    }

/* footer
--------------------------------------------------- */

.FooterDivision{
  color: #fff;
  letter-spacing: 0.5px;
  background-color: #465266;
  text-align: center;
  padding: 60px 0 30px;
}
    .FooterDivision h2{
      margin-bottom: 30px;
    }
    .FooterDivision address{
      font-size: 87.5%;
      line-height: 1.8;
      /*margin-bottom: 45px;*/ 
      margin-bottom: 20px;
    }
    .FooterDivision .SubMenu{
      font-size: 87.5%;
      margin-bottom: 20px;
    }
        .FooterDivision .SubMenu a{
          display: inline-block;
          border-radius: 1em;
          background: #212F47;
          padding: 2px 1.5em;
		  color: #fff;
        }
        .FooterDivision .SubMenu a:hover{
          text-decoration: none;
          box-shadow: 0 0 5px 0 rgba(255,255,255,0.5);
        }
    .FooterDivision address .Contact .Tel{
      margin-right: 1em;
    }
    .FooterDivision .Copyright{
      font-size: 65%;
      font-family: Lucida Grande,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    }
        .FooterDivision .Copyright span{
          font-family: Meiryo, sans-serif;
        }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　下層ページ共通スタイル　　　　　           */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

.child_header{
	width: 100%;
	background-color: #465266;
	margin-bottom: 20px;
}
	.child_header img{
		height: 48px;
	}
	.child_header .childHeader1 .HeaderText{
		padding: 10px 0;
		color: #fff;
	}
	.child_header .childHeader2{
		padding-bottom: 10px;
		justify-content: space-between;
		align-items: flex-end;
	}
	.child_header .NavigationArea{}
		.child_header .NavigationArea ul{
			margin-left: 3%;
			justify-content: flex-end;
			align-items: flex-end;
		}
		.child_header .NavigationArea ul li{
			padding-left: 6%;
			color: #fff;
		}
		.child_header .NavigationArea ul li a.flex{
			vertical-align: middle;
		}
		.child_header .NavigationArea ul li a .iconName{
			padding-right: 5px;
		}
		.child_header .NavigationArea ul li a .material-icons{
			font-size: 1em;
		}
		.child_header .NavigationArea ul li a{
			position: relative;
			display: block;
			font-size: 0.87em;
			color: #fff;
			white-space: nowrap;
		}
		.child_header .NavigationArea ul li a:hover{
			background-color: inherit;
			text-decoration-line: none;
			color: #A4C520!important;
		}
		/*ホバー時の下線アニメーション*/
		.child_header .NavigationArea ul li a::after {
			content: '';
			/*絶対配置で線の位置を決める*/
			position: absolute;
			bottom: -8px;
			left: 0;
			/*線の形状*/
			width: 100%;
			height: 2px;
			background: #A4C520;
			/*アニメーションの指定*/
			transition: all .3s;
			transform: scale(0, 1);/*X方向0、Y方向1*/
			transform-origin: center top;/*上部中央基点*/
		}
		/*現在地とhoverの設定*/
		.child_header .NavigationArea ul li a:hover::after {
			transform: scale(1, 1);/*X方向にスケール拡大*/
		}

/*article*/
article .pankuzu{
	font-size: 0.87em;
	margin-bottom: 50px;
	line-height: 1.2;
}
article .pankuzu .flex{
	align-items: center;
	flex-wrap: wrap;
}
	article .pankuzu a{
		line-height: 1;
	}
	article .pankuzu a .material-symbols-sharp{
		margin-right: 0.5em;
		font-size: 1.1em;
		vertical-align: middle;
	}
	article .pankuzu .pPadding{
		padding: 0 0.8em;
	}
article h1.ttl{
	font-size: 2.5em;
	margin-bottom: 50px;
}
article h1.ttl .eng,
article section h2 span{
	font-size: 1rem;
	padding-left: 20px;
}
article section{
	margin-bottom: 70px;
}
article section h2{
	font-size: 1.5em;
	border-bottom: 1px solid #333;
	margin-bottom: 30px;
}
article table{
	border-collapse: collapse;
	width: 100%;
}
article table tr th,
article table tr td{
	padding: 10px 20px;
}
article .tb tr{
	border-bottom: 1px solid #bbb;	
}
article .tb tr th,
article .tb2 thead tr th{
	background-color: #DBE6F1;
}
article .tb2 tr{
	border: solid 1px #bbb;
}
article .tb2 tr th,
article .tb2 tr td{
	border-right: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
}
article .tb2 tbody tr th{
	width: 15%;
	vertical-align: top;
}
article .tb2 tbody tr td:first-of-type{
	width: 20%;
}
article .col tr td{
	padding: 0.5em 0;
}
article .col tr td:first-of-type{
	width: 100px;
}
article section tr td a img.icon_blank,
article section tr td a img.icon_link{
	height: 0.8em;
	vertical-align: middle;
	padding-left: 0.6em;
	padding-bottom: 2px;
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　組合情報ページ　　　　　           */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#GuildInfo .greeting img{
	width: 107px;
	height: 100%;
	margin-right: 5%;
}
#GuildInfo .greeting p{
	line-height: 1.8em;
}
#GuildInfo .greeting p:first-of-type{
	margin-bottom: 20px;
}
#GuildInfo .greeting p:last-of-type{
	text-align: right;
}
#GuildInfo article section .tb tr td img{
	margin-right: 3em;
}
#GuildInfo article section .tb tr td .flex{
	align-items: center;
}
#GuildInfo article section .tb tr td figcaption{
	vertical-align: middle;
}
#GuildInfo article .col tr td:is(:nth-of-type(1), :nth-of-type(3)){
	width: 100px;
}
#GuildInfo article .col tr td:is(:nth-of-type(2), :nth-of-type(4)){
	width: calc(50% - 100px);
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　　　沿革ページ　　　　　           */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#History article{
	margin-bottom: 70px;
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　　　組織図ページ　　　　　        */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#Organization h1.ttl{
	margin-bottom: 0;
}
#Organization #chart{
	max-width: 100%;
	margin: 0 auto 50px auto;
	display: block;
}
#Organization .job{
	margin-bottom: 30px;
	font-size: 0.87em;
}
#Organization .job ul li{
	padding-top: 0.5em;
}
#Organization .backToChart{
	text-align: right;
}
#Organization .backToChart a{
	margin-top: 20px;
	padding: 0.5em 3em;
	background-color: #465266;
	color: #fff;
	border-radius: 10px;
	display: inline-block;
	font-size: 0.87em;
}
#Organization h2 .h2Detail{
	font-weight: 400;
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　組合員一覧ページ　　　　　        */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#members article section h2{
	vertical-align: baseline;
	font-family: "MS Serif", "New York", "serif";
	font-size: 1em;
}
#members article section h2 span{
	font-size: 2em;
	padding-right: 10px;
	padding-left: 0;
}
#members article .Gsearch h3{
	margin-bottom: 10px;
}
#members article .Gsearch ul{
	margin-bottom: 70px;
	flex-wrap: wrap;
}
#members article .Gsearch ul li{
	font-size: 2em;
	font-family: "MS Serif", "New York", "serif";
	border: 1px solid #777;
	background-color: #A4C520;
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 10px;
}
#members article .Gsearch ul li a{
	display: inline-block;
	padding: 0 10px;
	width: 54px;
	box-sizing: border-box;
	text-align: center;
}
#members article .Gsearch ul li a:hover{
	color: #333;
	opacity: 0.5;
}
#members article .col tr td:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(4), :nth-of-type(5)){
	width: 100px;
}
#members article .col tr td:is(:nth-of-type(3), :nth-of-type(6)){
	width: calc(50% - 200px);
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　活動紹介ページ　　　　　　        */
/* ++++++++++++++++++++++++++++++++++++++++++ */
#activity article{
	margin-bottom: 70px;
}
#activity article .PageWidthSetter .marginB{
	margin-bottom: 30px;
}
#activity article .PageWidthSetter p:first-child{
	font-size: 1.2em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: bold;
	background:linear-gradient(transparent 70%, #FFFF00 0%);
	display: inline;
}
#activity article ul li{
	border-bottom: solid 1px #465266;
	margin-bottom: 40px;
	padding-bottom: 10px;
}
#activity article ul li time{
	font-size: 0.87em;
	padding-right: 10px;
}
#activity article ul li h2{
	line-height: 1;
	margin-bottom: 15px;
	background-color: #A4C520;
	padding: 5px 10px;
	display: inline-block;
	font-weight: 400;
	font-size: 0.87em;
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　　　各社ページ　　　　　　        */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#takumi article .PageWidthSetter .secFlex{
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 30px;
}
#takumi article .PageWidthSetter h1{
	margin-bottom: 0;
	line-height: 1em;
}
#takumi article .PageWidthSetter .update{
	font-size: 0.8em;
	line-height: 1em;
}
#takumi .contact{
	margin-bottom: 50px;
}
#takumi .contact a{
	padding: 10px 20px;
	border: solid 1px #333;
	background-color: #A4C520;
}
#takumi .contact a:hover{
	color: #333;
	opacity: 0.5;
}
#takumi #company img{
	max-width: 100%;
}
#takumi #company .toMap a{
	padding-left: 30px;
}
#takumi #company .material-icons{
	font-size: 1.2em;
	vertical-align: -4px;
	padding-left: 10px;
}
#takumi #factory .flex{
	align-items: flex-start;
}
#takumi #factory .marginBottom{
	margin-bottom: 30px;
}
#takumi #factory .tb{
	margin-right: 20px;
	width: 50%;
}
#takumi #factory .tb.capacity{
	width: 100%;
}
#takumi #factory .tb.capacity tr th,
#takumi #factory .tb.capacity tr td{
	width: 50%;
}
#takumi #factory tr th{
	width: 50%;
}
#takumi #factory img{
	width: 400px;
	max-width: 100%;
}
#takumi h3{
	padding: 5px 10px;
	border-top: 3px dotted #A4C520;
	border-bottom: 3px dotted #A4C520;
	display: inline-block;
	margin-bottom: 2em;
}
#takumi .tb caption,
#takumi h4{
    margin-bottom: 1em;
    font-weight: bold;
	font-size: 1em;
	text-align: left;
}
#takumi .tb caption::before,
#takumi h4::before{
    content: '';
    border-left: 10px ridge #A4C520;
    margin-right: 0.5em;
}
#takumi #pr .wrapper{
	margin-bottom: 50px;
}
#takumi #pr .wrapper img.boss{
	margin-bottom: 20px;
	display: block;
	width: 240px;
}
#takumi #pr .name{
	font-size: 1.5em;
	letter-spacing: 0.5em;
	font-weight: bold;
}
#takumi .message{
	background-color: #DBE6F1;
	padding: 0.3em 1em;
	margin-bottom: 1em;
	border-bottom: 2px solid #465266;
	font-weight: bold;
	position: relative;
    display: inline-block;
}
#takumi .message::before,
#takumi .message::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#takumi .message::before {
    border: solid 12px transparent;
    border-top: solid 12px #465266;
}
#takumi .message::after {
    border: solid 14px transparent;
    border-top: solid 14px #DBE6F1;
    margin-top: -5px;
}
#takumi .message p{
    margin: 0;
    padding: 0;
}
#takumi #pr p{
	margin-bottom: 20px;
	display: block;
}
#takumi .h4wrapper{
	margin-bottom: 30px;
}
#takumi .h4wrapper:nth-child(2){
	display: block;
}
#takumi .h4wrapper p .department{
	font-size: 0.5em;
	letter-spacing: normal;
}
#takumi .wrapper .h4wrapper img{
	width: 150px;
}

/* ++++++++++++++++++++++++++++++++++++++++++ */
/*    　　　　　　サイトマップページ　　　　　　      */
/* ++++++++++++++++++++++++++++++++++++++++++ */

#siteMap .flex.site{
	margin-bottom: 50px;
	justify-content: space-between;
}
#siteMap .flexItem{
	width: 33%;
}
#siteMap .flexItem h2{
	margin-bottom: 20px;
	border-left: 5px ridge #A4C520;
	padding-left: 10px;
}
#siteMap .flexItem ul{
	margin-bottom: 30px;
}
#siteMap .flexItem ul li{
	margin-left: 15px;
}
#siteMap .flexItem ul li a{
	padding-bottom: 10px;
	display: block;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   タブレット向けスタイル（1024ｐｘまで）           */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

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

/*ロゴ、コンタクト、ログインエリア*/
.BlockHeader{}
	.TopPage .BlockHeader .FloatLeft,
	.TopPage .BlockHeader .FloatRight{
	  text-align: center;
	  width: 100%;
    }
	.TopPage .BlockHeader .FloatRight p{
		  color: #4C6CA4;
	}
	.material-icons.md-36{
		font-size: 24px;
	}
/* news */	
.TopPage .NewsArea{
	display: block;
	}
	.TopPage .NewsArea.PageWidthSetter{
		padding: 0 5%;
	}
    .TopPage .NewsArea .Oshirase,
	.TopPage .NewsArea .Enterprise{
		width: 100%;
		border-right: none;
    }
	.TopPage .NewsArea .Oshirase .inner{
		padding-right: 0;
		margin-bottom: 30px;
	}
	.TopPage .NewsArea .Enterprise .inner{
		padding-left: 0;
	}
	
/*下層ページ用*/
/*ヘッダー*/
	.child_header{
		position: relative;
	}
	.child_header nav{
		position: fixed;
		right: -320px; /* 右から出てくる */
		top: 0;
		width: 300px; /* スマホに収まるサイズ */
		height: 100vh;
		padding-top: 50px;
		background-color: #fff;
		transition: all .6s;
		z-index: 200;
		overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}
	.child_header .hamburger {
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 40px; /* クリックしやすい幅 */
		height: 40px; /* クリックしやすい高さ */
		cursor: pointer;
		z-index: 300;
	 }
	.child_header .hamburger_border {
		position: absolute;
		left: 11px;
		width: 20px;
		height: 2px;
		background-color: #fff;
		transition: all .6s;
	 }
	 .child_header .hamburger_border_top {
		top: 14px;
	 }
	 .child_header .hamburger_border_center {
		top: 20px;
	 }
	  .child_header .hamburger_border_bottom {
		top: 26px;
	 }
	  .child_header .black_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: #333;
		opacity: 0;
		visibility: hidden;
		transition: all .6s;
		cursor: pointer;
	 }

  /* 表示された時用のCSS */
	.child_header.nav-open .NavigationArea {
		right: 0;
	}
	.child_header.nav-open .NavigationArea ul{
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}
	.child_header.nav-open .NavigationArea ul .logo2{
		margin-top: 30px;
	}
	.child_header.nav-open .NavigationArea ul li a{
		border-bottom: none;
		color: #333;
		padding-top: 1em;
		font-size: 1em;
	}
		/*ホバー時の下線アニメーション*/
		.child_header .NavigationArea ul li a::after {
			left: 0;
			/*線の形状*/
			width: 100%;
			/*アニメーションの指定*/
			transform-origin: left top;/*上部中央基点*/
		}
		/*現在地とhoverの設定*/
		.child_header .NavigationArea ul li a:hover::after {
			transform: scale(1, 1);/*X方向にスケール拡大*/
		}
	.child_header.nav-open .black_bg {
		opacity: .8;
		visibility: visible;
	}
	.child_header.nav-open .hamburger{
		top: 10px;
	}
	.child_header.nav-open .hamburger_border {
		background-color: #333;
	 }
	.child_header.nav-open .hamburger_border_top {
		transform: rotate(45deg);
		top: 20px;
	}
	.child_header.nav-open .hamburger_border_center {
		width: 0;
		left: 50%;
	}
	.child_header.nav-open .hamburger_border_bottom {
		transform: rotate(-45deg);
		top: 20px;
	}

/* 下層ページ-article */
	article .tb tr{
		border-bottom: none;
	}
	article .tb tr th,
	article .tb tr td,
	article .tb2 tbody tr th,
	article .tb2 tbody tr td{
		width: 100%;
		display: block;
		box-sizing: border-box;
	}
	article section .tb tr td:nth-of-type(2){
		padding-top: 0;
	}
	article section .tb tr td.dName{
		border-bottom: 1px solid #bbb;
	}
	article section .flex.col_none{
		display: block;
	}
    article thead{
    	display: none;
    }
	article .tb2 tbody tr th{
		width: 100%;
		background-color: #DBE6F1;
		border-right: none;
	}
	article .tb2 tbody tr td:first-of-type{
		width: 100%;
		padding: 1em 2em 1em 8em;
		position: relative;
		border: none;
	}
	article .tb2 tbody tr td:last-of-type{
		padding: 0 2em 1em 8em;
		position: relative;
		border: none;
	}
	article .tb2 tbody tr td::before {
		content: attr(data-label);
		position: absolute;
		left: 2em;
	}
	article .col tr.flex{
		flex-wrap: wrap;
	}
	/*組合情報ページ*/
	#GuildInfo article .col tr td:is(:nth-of-type(2), :nth-of-type(4)){
		width: calc(100% - 100px);
	}
	
	/*組合員一覧ページ*/
	#members article .col tr.flex td:is(:nth-of-type(3), :nth-of-type(6)){
		width: calc(100% - 200px);
	}
	
	/*各社ページ*/
	#takumi #factory .flex{
		flex-direction: column;
		align-items: flex-start;
	}
	#takumi #factory .tb,
	#takumi #factory tr th{
		width: 100%;
	}
	#takumi #factory .tb.capacity .flex{
		flex-wrap: wrap;
		box-sizing: border-box;
		margin-bottom: 0;
		flex-direction: row;
		justify-content: flex-start;
	}
	#takumi #factory .tb.capacity tr th{
		width: 100px;
		border-bottom: solid 1px #bbb;
	}
	#takumi #factory .tb.capacity tr td{
		width: calc(100%-100px);
		border-bottom: solid 1px #bbb;
		text-align: left;
	}
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   スマートフォン向けスタイル（599ｐｘまで）           */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

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

	/* トップページnav */
	.TopPage .NavigationArea .PageWidthSetter {
		padding: 0;
	}
	.TopPage .NavigationArea ul li{
		width: 100%;
		float: none;
		margin: 0 auto;
		border-bottom: #fff solid 1px;
	}
	.TopPage .NavigationArea ul li:last-of-type {
		border-bottom: none;
	}
		.TopPage .NavigationArea ul li a{
			border: none;
        }
		.TopPage .NavigationArea ul li:first-child a {
    		border: none;
		}
	/*下層ページ*/
	article h1.ttl span{
		display: block;
	}
	article h1.ttl span.eng{
		vertical-align: top;
		padding-left: 0;
	}
	article .greeting .flex{
		display: inline-block;
	}
	article .greeting img{
		margin: 0 auto 2em auto;
	}
	
	/*組合員一覧ページ*/
	#members article .col tr.flex{
		flex-wrap: wrap;
	}
	#members article .col tr.flex td:is(:nth-of-type(2), :nth-of-type(5)){
		width: calc(100% - 100px);
	}
	#members article .col tr.flex td:is(:nth-of-type(3), :nth-of-type(6)){
		width:100%;
		border-bottom: 1px solid #DBE6F1;
		font-size: 1.2em;
		margin-bottom: 1.5em;
		padding-top: 0;
	}
	
	/*各社ページ*/
	#takumi article .PageWidthSetter .flex{
		flex-direction: column;
		align-items: flex-start;
	}
	#takumi article .PageWidthSetter .ttl{
		margin-bottom: 10px;
	}
	/*サイトマップページ*/
	#siteMap .flex.site{
		flex-direction: column;
	}
	#siteMap .flexItem{
		width: 100%;
	}
}