@charset "UTF-8";

p {
	margin-left:30px;
	font-size:1.2em;
}

body {
	margin: 0;
	background-color: #FAF9F6;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/*-- ヘッダー --*/
.h_container{
	display: flex; /*中央揃えにはこれが必要*/
	align-items: center; /* 縦方向中央揃え */
	justify-content: center; /* 横方向中央揃え */
	height: 54px;
	background-color:#085661;
	color:#f0f0f0;
	border-bottom: solid 3px #BF6A7A; /*下線を引く*/
}

h1 {
	font-size: 24px;
	letter-spacing: 0.1em;
	margin-left: 0.2em;
}

/*-- メイン --*/
.m_container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	/*background-color:pink;*/
}

/*-- パンくずリスト --*/
.pankuzu_area {

}

.pankuzu_area ol {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	margin-right:10px;
	padding: 0;
	list-style: none;
}

.pankuzu_area li {
	font-size: 13px;
}

.pankuzu_area a {
	display: block;
	padding: 0 10px;
	color: #668099;
	text-decoration: none;
}

.pankuzu_area a::after {
	margin-left: 10px;
	content: ">";
	opacity: 0.3;
}

.pankuzu_area a:hover {
	color:#ccc;
}

/*-- コンテンツ --*/
.contents_area {
	margin-top:40px;
}

.form1 {
  border: 1px solid #ccc; /*フォームの囲み枠*/
  padding: 10px;
  width:300px; /*幅を指定しないとmargin:0 autoは効かない*/
  margin:0 auto; /*フォーム全体を中央に配置*/
  background-color:#F0F0DC;
}

.form1 .item {
  display: block;
  overflow: hidden;
  margin-bottom: 10px; /*inputの行間*/
}

.form1 .item.no-label {
  padding: 10px 0px 5px 40px; /*40pxはボタンの左側の空き*/
}

.form1 .item .label {
  float: left;
  padding: 5px 5px 5px 65px; /*65pxはラベルの左側の空き*/
  margin:0;
}

.form1 .item input[type=text],input[type=color]{
  display: block;
  margin-left: 160px; /*カラーピッカーの左をそろえる*/
}

.form1 .item input[type=text]{
  display: block;
  margin-left: 160px; /*入力欄の左をそろえる*/
  width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius:3px;
  box-sizing: border-box;
}

input[type=reset], input[type=submit] {
  border: none;
  outline: none;
  line-height: 30px;
  width: 100px;
  text-align: center;
  color: #fff;
  background-color: #696;
  border-radius:3px;
  cursor:pointer;
  box-sizing: content-box;
}

input[type=submit]{
	margin-left:3px;
}

input[type=reset]:hover, input[type=submit]:hover {
	opacity: 0.8;         /* カーソルで透明に */
}

/*-- ページトップに戻る --*/
.pagetop_area {
	text-align:right;
	padding-top:20px;
	padding-bottom: 20px;
}

.pagetop_area a{
	margin-right:10px;
	font-size:13px;
	color:#668099;
	text-decoration: none;
}

.pagetop_area a:hover{
	color:#ccc;
}

/*-- フッター --*/
.f_container {
	color: #fff;
	background-color:#7A8D94;
	padding: 15px;
}

.copyright {
	margin-top: 0;
	margin-bottom: 0;
	text-align:center;
	font-size: 12px;
}

/*-- パソコンの画面では --*/
@media (min-width: 600px) {  
	.h_container {
		height: 70px;
	}

	h1 {
		font-size: 36px;
	}
}