@charset "UTF-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/
*/

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;

	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」
	http://www.alistapart.com/articles/responsive-web-design

	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 94%;
	padding-left: 1.82%;
	padding-right: 1.82%;
	line-height: 2em;
	font-size: 14px;
	text-align: justify;
	color: #1c1b15;
	letter-spacing: 0em;
	background-color: #FFFFFF;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.8625%;
	padding-right: 1.8625%;
	font-size: 14px;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 83.3%;
	max-width: 900px;
	padding-left: 4%;
	padding-right: 4%;
	margin: auto;
	font-size: 15px;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	/* widthはもともと100%だった。 */
	width:79%;
		max-width: 705px;
	display: block;
}
#LayoutDiv2 {
	  width: 18.5%;
    float: right;
  	max-width: 187px;
}
}






/* メニューについて */
	#nav
		{
			width: 100%;
			position: static;
			margin: 0;
			z-index:2;


		}

			#nav > a
			{
	display: none;
	text-decoration: none;
			}

			#nav li
			{
	position: relative;
			}
				#nav li a
				{
					color: #fff;
					display: block;
						text-decoration: none;
						z-index:1;
				}
				#nav li a:active
				{
					background-color: #d6cfc7 !important;
						text-decoration: none;
						z-index:1;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #efa585;
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
				z-index:1;
			}

			/* first level */

			#nav > ul
			{
	height: 2.3em; /* 60 */
	background-color: ;
	z-index:1;
			}
				#nav > ul > li
				{
				margin-right:0.2%;
					width: 18.1%;
					height: 100%;
					float: left;
					    border-radius: 2px;        /* CSS3草案 */
    -webkit-border-radius: 2px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 2px;   /* Firefox用 */
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 1em; /* 24 */
						line-height: 2.2em; /* 60 (24) */
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 0px solid #ffffff;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							background-color: #d13f30;
						}


				/* second level */

				#nav li ul
				{

					background-color: #6b92b3;
					display: none;
					position: absolute;
					top: 100%;
					margin-left: 1px;
					margin-right: -25px;/* もともとは1px */
					font-size: 90%;
					z-index:1;

				}
					#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
						#nav li ul a
						{
							font-size: 1em; /* 20 */
							color: #4d4d4d;
							border-bottom: 1px solid #ffffff;
                            line-height: 1.2em;
							padding: 0.7em  0.8em  0.7em  0.8em; /* 15 (20) */
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
	background-color: #d6cfc7;
							}


		@media only screen and ( max-width: 62.5em ) /* 1000 */
		{
			#nav
			{
				width: 100%;
				position: static;
				margin: 0;
			}
		}


		@media only screen and ( max-width: 40em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}

			#nav
			{
				position: relative;
				top: auto;
				left: auto;
			}
				#nav > a
				{
	width: 0; /* 50 */
	height: 3.125em; /* 50 */
	text-align: left;
	text-indent: ;
	background-color: ;
	position: relative;
	text-decoration: none;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 1.8px solid #fff;
						/*top: 35%;
						left: 22%;
						right: 22%;
						content: '';*/
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				z-index: 1;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #ffffff;
						}


				/* second level */

				#nav li ul
				{
					position: relative;
					z-index: 1;
					padding: 1em 1em 0em 1em; /* 20 */
					padding-top: 0;
				}
		}




@media screen and (max-width: 768px){
.none {display: none;}
}


@media screen and (max-width: 480px){
.none2 {display: none;}
}



.sidebar {
	font-size: 90%;
	margin-left: 1em;
	width: 90%;
	font-weight: 500;
}

.pc-side-nav-fixed {
	top:5%;
	position: fixed;

}


/*トップへ戻るボタン*/
.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:40px;
  height:60px;
  text-align:center;
  line-height:22px;
  /*border-radius:30px;*/
  padding-top:30px;
  box-sizing:border-box;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
  opacity:0.7;
  color:#0C090A;
}

/*layout*/
.wrapper {
  position:relative;
}
body {
  color:#333;
  font-size:18px;
  line-height:1.8em;
  letter-spacing:0.05em;
}
.header {
  height:40px;
  line-height:40px;
  text-align:center;
  background-color:#eed;
}
.contents {
  margin:40px 40px 60px 40px;
}
.footer {
  height:200px;
  line-height:200px;
  text-align:center;
  background-color:#eed;
}


/*図の影*/
.panel {
border:1px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.1) 0px 0px 3px 1px;
-webkit-box-shadow:rgba(122, 122, 122, 0.1) 0px 0px 3px 1px;
-moz-box-shadow:rgba(122, 122, 122, 0.1) 0px 0px 3px 1px;
}



/*進む＆もどるボタン*/
.square_btn{
    position: relative;
    display: inline-block;
    font-weight: 500;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #ea4d3c;/*#e96963*/
    background: #ECECEC;
    transition: .3s;
	padding-bottom:0.3em;
  }

.square_btn:hover {
    background: #e96963;
    color: white;

}



/*補足*/

.hosoku{
	border:1px solid #ea4d3c;
	padding:0.3em 1.5em 1em 1.5em;
	margin-bottom:2.4em;
	margin-top:2.4em;
	}


.square_lab{
display: inline-block;
font-size:120%;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #ea4d3c;/*左線*/ color: #ea4d3c;/*文字色*/ font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}


.square_button {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF;
	transition: .4s;
	background-color: #333333;
}
.square_button:hover {
background: #e96963;
}



/*選択色*/
::selection {
    color: #ea4d3c;
}
::-moz-selection {
    color: #ea4d3c;
}