/* COMMON STYLE LIST ------------------------------------------------------

 01. LAYOUT

 02. HEADER

 03. KEY VISUAL

 04. NAVIGATION
     02-1. BREAD NAVIGATION
     02-2. UTILITY MENU for HEADER FOOTER	ユーティリティーメニューは共通スタイル

 05. COMMONS								ファイル添付スタイル

 06. FOOTER

 07. MEDIAQUERY for HORIZONTALNAVI			横置きメニュー　PC、タブレット用

 08. MEDIAQUERY for TABLET

 09. MEDIAQUERY for BIG SP & SMALL TABLET

 10. MEDIAQUERY for SMARTPHONE

-------------------------------------------------------------------- */



/* 01. LAYOUT
-------------------------------------------------------------------- */
body{
	min-width:320px;
	position:relative;
}

body, input, select, textarea{
	font-family:Meiryo, Verdana, Arial, sans-serif;
	word-break:break-strict;
	-webkit-text-size-adjust:100%; /* For iPhone , iPad */
}

header[role=banner]{
	position:relative;
	width:100%;
}

header .inner{
	margin:0 auto;
}

header .inner:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html header .inner             { zoom: 1; }
*:first-child+html header .inner { zoom: 1; }

.wrapper{
	margin:0 auto;
}

.wrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html .wrapper             { zoom: 1; }
*:first-child+html .wrapper { zoom: 1; }

nav[role=navigation]{
	width:100%;
}

.container{
	width:100%;
}

.second .secondMenu{ /* 下層PCは2カラムに */
	float:left;
	margin:2em 0 3em;
	width:20%;
}

.second .container{
	padding-top:1.5em;
	float:right;
	width:75%;
}

section[role=main]{
	margin:0 0 1em;
}

section[role=main]:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html section[role=main]             { zoom: 1; }
*:first-child+html section[role=main] { zoom: 1; }

footer[role=contentinfo]{
	position:relative;
	width:100%;
	clear:both;
	min-height:50px;
}

footer[role=contentinfo] .inner{
	margin:0 auto;
}



/* 02. HEADER
-------------------------------------------------------------------- */
header[role=banner] .inner{
	letter-spacing:-0.4em;
}

header[role=banner] .inner h1,
header[role=banner] .inner nav{
	width:49.5%;
	display:inline-block;
	*display:inline;
	*zoom:1;
	letter-spacing:normal;
	vertical-align:middle;
}

header[role=banner] .inner h1{
	margin-top:10px;
}

header[role=banner] .inner nav{
	text-align:right;
}

ul.spHeader{ /* for SP */
	display:none;
}



/* 03. KEY VISUAL
-------------------------------------------------------------------- */
.KV{
	position:relative;
	width:100%;
}

.KV img{
	max-width:100%;
  height:auto;
}



/* 04. NAVIGATION
-------------------------------------------------------------------- */

/* 02-1. BREAD NAVIGATION */
nav.breadNav{
	margin:1em 0;
}

nav.breadNav ul{
	font-size:0.75em;
	letter-spacing:-0.4em;
}

nav.breadNav ul li{
	display:inline-block;
	*display:inline;
	*zoom:1;
	letter-spacing:normal;
}

nav.breadNav ul li:first-child{
	margin-left:-1em;
}

nav.breadNav ul span:before{
	margin:0 0.5em;
	content:">";
}

nav.breadNav ul span.home:before{
	content:"";
}

/* 02-2. UTILITY MENU for HEADER FOOTER */
ul.languages{
	display:none;
}

nav.utility ul li{
	display:inline-block;
	*display:inline;
	*zoom:1;
	letter-spacing:normal;
	vertical-align:middle;
	line-height:80%;
}

nav.utility .utilNav{
	padding:0.5em 0 1em;
	display:block;
	width:100%;
	font-size:0.75em;
	line-height:120%;
}

nav.utility .utilNav li{
	margin:1em 0 0 0;
}

nav.utility li.search,
nav.utility li.languages{
	padding:0.5em 0;
}

nav.utility li span{
	font-size:0.65em;
}

nav.utility li.search input[type=text]{
	padding:0 3px;
	width:110px;
	border:1px solid #CCC;
}

nav.utility li.totop{
	position:fixed;
	bottom:10px;
	right:10px;
	text-align:right;
	width:auto;
}



/* 05. COMMONS
-------------------------------------------------------------------- */

input.clpg-searchbox-button{
	background:url(../img/icon/search.png) no-repeat;
	border:none;
	width:30px;
	height:25px;
	text-indent:-9999px;
	cursor:pointer;
}

.clpg-page-content img{
	max-width:100%;
	height:auto;
}

.clpg-page-content table p,
.clpg-page-content table ul{
	font-size:1em;
}

.clpg-page-content table th,
.clpg-page-content table td,
.clpg-page-content table caption{
	word-wrap:break-word;
}

/* ATTACHMENT FILES */
.clpg-page-content .attachment{
	margin:1em 0;
	padding:0.3em 1em;
	border:1px solid #CCC;
}

.clpg-page-content .attachment a{
	display:block;
	padding-left:1.5em;
}

/* FORM SET */

.clpg-form-container label{
	display:inline-block;
	*display:inline;
	*zoom:1;
}

.clpg-form-container input[type=text],
.clpg-form-container textarea{
	border:1px solid #CCC;
}

.clpg-form-container input[type=checkbox],
.clpg-form-container input[type=radio]{
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin-right:0.2em;
}

.clpg-form-container .consentArea{
	margin:1em 0;
	padding:0.5em;
}

.clpg-form-container .consentArea p.checkbox{
	text-align:center;
	padding:0.5em 0;
	font-size:1em;
}


input.clpg-form-text-w30			{ width:10%; height:2em; }
input.clpg-form-text-w60			{ margin:0 3px; width:20%; height:2em; }
input.clpg-form-text-w60:first-child{ margin:0 3px 0 0; }
input.clpg-form-text-w90			{ width:30%; height:2em; }
input.clpg-form-text-w120			{ width:40%; height:2em; }
input.clpg-form-text-w150			{ width:40%; height:2em; }
input.clpg-form-text-w180			{ width:60%; height:2em; }
input.clpg-form-text-w240			{ width:70%; height:2em; }
input.clpg-form-text-w300			{ width:80%; height:2em; }
input.clpg-form-text-w360			{ width:90%; height:2em; }
input.clpg-form-text-w420			{ width:95%; height:2em; }
input.clpg-form-text-default		{ height:2em; }

textarea.clpg-form-textarea-w400h35	{ width:95%; height:35px; }
textarea.clpg-form-textarea-w400h50	{ width:95%; height:50px; }
textarea.clpg-form-textarea-w400h70	{ width:95%; height:70px; }
textarea.clpg-form-textarea-w400h100{ width:95%; height:100px; }
textarea.clpg-form-textarea-w470h100{ width:95%; height:100px; }
textarea.clpg-form-textarea-w400h150{ width:95%; height:150px; }
textarea.clpg-form-textarea-w440h150{ width:95%; height:150px; }
textarea.clpg-form-textarea-w470h200{ width:95%; height:200px; }
textarea.clpg-form-textarea-w525h360{ width:95%; height:360px; }
textarea.clpg-form-textarea-default	{  }


nav.paging{
	margin:1em 0;
	text-align:center;
}

nav.paging ul{
	margin:0;
	letter-spacing:-0.4em;
}

nav.paging ul li{
	margin:10px 0;
	padding:10px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	letter-spacing:normal;
	background:none;
}


/* SEARCH RESULT */
.clpg-search-container .searchBox{
	padding:1em;
	text-align:center;
	border:1px solid #CCC;
}

.clpg-search-container .searchBox input.clpg-searchbox-input{
	padding:0.4em;
	width:70%;
	border:1px solid #CCC;
	background:#FFFDDC;
}

.clpg-search-container h3 span{
	margin-left:2em;
	display:inline-block;
	*display:inline;
	*zoom:1;
	font-size:0.8em;
}



/* 06. FOOTER
-------------------------------------------------------------------- */
.wrapper .bannerArea,
.wrapper .snsArea{
	clear:both;
}

nav.utility.footer li.search{ /* forSP */
	display:none;
}

footer[role=contentinfo]{
	padding-bottom:20px;
}

footer[role=contentinfo] p.copyright{
	font-size:0.8em;
	text-align:center;
}

footer[role=contentinfo] .bannerArea,
footer[role=contentinfo] .snsArea{
	display:none;
}

footer[role=contentinfo] .utilNav.header{
	display:none;
}



/* 07. MEDIAQUERY for HORIZONTALNAVI
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) {

	nav[role=navigation] ul.global{
		margin:0 auto;
		letter-spacing:-0.4em;
	}

	nav[role=navigation] ul.global li{
		position: relative;
		display:inline-block;
		*display:inline;
		*zoom:1;
		letter-spacing:normal;
	}

	nav[role=navigation] ul.global li a {
		display: block;
		margin: 0;
	}

	nav[role=navigation] ul.global ul.child,
	nav[role=navigation] ul.global ul.grandchild{
		display:none;
	}

}



/* 08. MEDIAQUERY for TABLET
-------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}



/* 09. MEDIAQUERY for BIG SP SMALL TABLET
-------------------------------------------------------------------- */
@media only screen and (min-width: 481px) and (max-width: 767px) {

	.clpg-form-container table th,
	.clpg-form-container table td{
		border:none;
	}

	.clpg-form-container table td{
	}

	.clpg-form-container table{
		margin:0 auto!important;
	}

	.clpg-form-container table th,
	.clpg-form-container table td{
		display:block!important;
	}

	.clpg-form-container table td{
		margin-bottom:1em;
	}
}



/* 10. MEDIAQUERY for SMARTPHONE
-------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

	ul.spHeader{
		display:block;
		padding:5px 0;
		width:100%;
		height:50px;
		letter-spacing:-0.4em;
	}

	ul.spHeader li{
		display:inline-block;
		*display:inline;
		*zoom:1;
		letter-spacing:normal;
		vertical-align:top;
	}
	ul.spHeader li.language{
		padding:2%;
		width:21%;
	}
	ul.spHeader li.search{
		padding:2%;
		width:61%;
	}
	ul.spHeader li.spmenu{
		position:absolute;
		top:15px;
		right:20px;
	}

	ul.spHeader li.spmenu li{
		position:relative;
		height:25px;
		width:25px;
	}

	ul.spHeader li.search input.clpg-searchbox-input{
		width:70%;
	}

	.wrapper{
		width:100%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;

		-webkit-flex-direction:row;
		-moz-flex-direction:row;
		-ms-flex-direction:row;
		-o-flex-direction:row;
		flex-direction:row;

		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;

		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
		justify-content: space-between;
	}

	.container{
		order:1;
		float:none;
    padding:0 1em;
		width:100%!important;
		font-size:1em;
	}

	.second .secondMenu{
		order:2;
		margin:0;
		display:block!important;
		float:none!important;
		width:100%!important;
	}

	.wrapper .snsArea,
	.wrapper .bannerArea{
		display:none;
	}

	header[role=banner] .inner h1{
		margin:0;
		padding-left:10px;
		line-height:10%;
	}

	header[role=banner] .inner h1 img{
		width:80%;
		height:auto;
	}

	header[role=banner] nav.utility{
		display:none;
	}

	nav[role=navigation]{
		display:none;
		margin:0;
		padding:0;
		position:absolute;
		z-index:1000;
		width:70%;
		top:40px;
		right:20px;
		background:#FFF;
	}

	nav[role=navigation] li{
		width:100%;
	}

	.clpg-form-container table th,
	.clpg-form-container table td{
		border:none;
	}

	.clpg-form-container table td{
	}

	.clpg-form-container table{
		margin:0 auto!important;
	}

	.clpg-form-container table th,
	.clpg-form-container table td{
		display:block!important;
	}

	.clpg-form-container table td{
		margin-bottom:1em;
	}

	.wrapper .bannerArea,
	.wrapper .snsArea{
		display:none;
	}

	footer[role=contentinfo] .bannerArea,
	footer[role=contentinfo] .snsArea{
		display:block;
	}

	footer[role=contentinfo] .search{
		margin:0.5em 0;
	}

	footer[role=contentinfo] .inner{
		width:90%;
	}

	nav.utility.footer li span{
		font-size:0.8em;
		display:block;
	}

	nav.utility.footer li.search{
		display:block;
		padding:0.5em 0;
		width:100%;
		text-align:center;
		background:#F3F3F3;
	}

	nav.utility.footer li.search input[type=text]{
		padding:5px;
		width:60%;
	}

	nav.utility.footer ul li.utilNav{
		padding:0;
		display:block;
	}

	nav.utility.footer ul li.utilNav ul{
		text-align:left;
	}

	nav.utility.footer a{
		display:list-item;
	}

	nav.utility.footer ul li.utilNav ul li{
		margin-left:0;
		width:90%;
	}

}