@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	clear: both;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		12;
	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: 98%;
	padding-left: 1%;
	padding-right: 1%;
}

.wid80 {width:90%; margin:0 auto; margin-top:10px; margin-bottom:10px;}

#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #286482;
	min-height: 25px;
}
#header02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #32465f;
	padding: 10px 0;
}

#header_box_left {float:left; width:50%; display:block; clear:both;
}

#header_box_right {float:left; width:45%; margin-left:5%; display:block; clear:none;
}
.title_wrap {
	clear: both;
	float: left;
	margin-left: 0;
	width: 65.5172%;
	display: block;
}
#searchbox {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#search {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#calender {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#search_narrow {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#tenpo_info {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#price_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #781a1c;
	color: #fff;
	padding: 20px 0;
}
#footerlogo {
	clear: both;
	float: right;
	margin-left: 0;
	width: 150px;
	display: block;
	text-align: right;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding-bottom: 20px;
	background-color:#FAE6B4;
}
#header_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom: 0px;
}

#header02_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#header02_left h1 {
	color:#fff;
	font-weight:600;
	font-size:120%;
	margin:0;
}
	
#header02_right {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}

#header_mypage_menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header_mypage_title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	color: #fff;
}
#header_mypage_title h1 { font-size:160%;}

#header_mypage_button {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	color: #fff;
	text-align: right;
	margin-top: 10px;
}

#header_name { color:#fff; font-size:110%; font-weight:600; display:block; padding:5px 0; text-align:right;}

.search_subject { clear: both; float: left; margin-left: 0; width: 50.5172%; display: block;}

#calender01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#calender02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#tenpo_info_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#tenpo_info_right {
	clear: both;
	float: left;
	margin-left: 0;
	width: 80%;
	display: block;
	padding: 0 10%;
}

iframe,.fbcomments,.fb_iframe_widget,.fb_iframe_widget[style],.fb_iframe_widget iframe[style],.fbcomments iframe[style],.fb_iframe_widget span {
    width: 100% !important;
}

#pricebox_left {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#pricebox_right {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#smart_bottombox { margin-bottom:5px; display:block;}
.footer_nav{display:block;}
#smart_bottomleft {
	display:table-cell;
	vartical-align:middle;
    clear: both;
    float: left;
    margin-left: 0;
    width: 33%;
    display: block;
}

#smart_bottomcenter {
	display:table-cell;
    clear: none;
    float: left;
    margin-left: 0.5%;
    width: 33%;
    display: block;
}

#smart_bottomright {
	display:table-cell;
    clear: none;
    float: left;
    margin-left: 0.5%;
    width: 33%;
    display: block;
}

.harfbox_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.harfbox_right {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


.faqbox { 
    padding:1% 2%;
	margin-bottom:1%;
	border-bottom: 1px dotted #999;
}

.mypage_button_left {float:left; display:block; clear:both;}
.mypage_button_right{float:right; display:block; clear:none; margin:0;}

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

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 95%;
	padding-left: 0.775%;
	padding-right: 0.775%;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.title_wrap {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#searchbox {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#search {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#calender {
	clear: both;
	float: right;
	margin-left: 1.6949%;
	width: 66.1016%;
	display: block;
}
#search_narrow {
	clear: none;
	float: right;
	width: 32.2033%;
	display: block;
}
#tenpo_info {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#price_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footerlogo {
	clear: both;
	float: right;
	margin-left: 0;
	width: 150px;
	display: block;
}
#content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	position: relative;
}
#header_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header02_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 57.6271%;
	display: block;
}
#header02_left h1 {
	color:#fff;
	font-weight:700;
	font-size:150%;
	margin:0;
}
#header02_right {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 40.6779%;
	display: block;
	text-align:right;
}
#header_name02 {
	color: #fff;
	font-weight: 700;
	font-size: 120%;
	width: 64%;
	float: left;
	margin-top: 5px;
}
.search_subject { clear: both; float: left; margin-left: 0; width: 74.5762%; display: block;}
#calender01 { clear: both; float: left; margin-left: 0; width: 49.1525%; display: block;}
#calender02 { clear: none; float: left; margin-left: 1.6949%; width: 49.1525%; display: block;}
#tenpo_info_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49%;
	display: block;
}
#tenpo_info_right {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 49%;
	display: block;
	padding: 0;
}
#pricebox_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#pricebox_right {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottomleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottomcenter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottomright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottombox { margin-bottom:5px; display:none !important;}
.footer_nav{display:none;}
.harfbox_left{clear: both;float: left;margin-left: 0;width: 49.1525%;display: block;}
.harfbox_right{clear: none;float: left;margin-left: 1.6949%;width: 49.1525%;display: block;}


}

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

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 95%;
	max-width: 900px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}

.wid80 {width:80%; margin:0 auto; margin-top:10px; margin-bottom:10px;}

#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#header_box_left {float:none; width:inherit; display:block; clear:none;}

#header_box_right {float:none; width:100%; margin-left:0%; display:block; clear:none;
}


#header_mypage_menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 8%;
	display: block;
	margin-top:0.5%;
}
#header_mypage_title {
	clear: none;
	float: left;
	margin-left: 0;
	width: 52%;
	display: block;
	color:#fff;
	margin-top:0;
}
#header_mypage_button {
	clear: none;
	float: right;
	margin-left: 0;
	width: 43%;
	display: block;
	text-align: right;
	color: #fff;
	margin-top: 2%;
}
.title_wrap {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#searchbox {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#search {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#calender {
	clear: both;
	float: right;
	margin-left: 2.0408%;
	width: 59.1836%;
	display: block;
}
#search_narrow {
	clear: none;
	float: right;
	width: 38.7755%;
	display: block;
}
#tenpo_info {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#price_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footerlogo {
	clear: both;
	float: right;
	margin-left: 0;
	width: 200px;
	display: block;
}
#content {
	clear: both;
	float: none;
	margin: auto;
	width: 100%;
	display: block;
width:100%;
padding-bottom:3%;
}

#header_box {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#header02_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 38.7755%;
	display: block;
}
#header02_right {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 59.1836%;
	display: block;
}

#header_button {
	width: 34%;
	margin-left: 2%;
	text-align: right;
	float: right;
}

.search_subject {
	clear: both;
	float: left;
	margin-left: 0;
	width: 69.5918%;
	display: block;
}
#search_button {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	text-align: right;
}
#calender01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.9795%;
	display: block;
}
#calender02 {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 48.9795%;
	display: block;
}
#calender01_bottom {
	clear: both;
	margin-top: 5px;
	margin-left: 0px;
	margin-bottom: 5px;
	padding: 5px;
	display: block;
}
#calender02_bottom {
	clear: both;
	margin-bottom: 5px;
	width: 100%;
	text-align: right;
	display: block;
}
#calender02_bottom_pre {
	float: left;
	text-align: right;
}
#calender02_bottom_next {
	float: right;
	margin-left: 10px;
	text-align: right;
}
#tenpo_info_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49%;
	display: block;
}
#tenpo_info_right {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 49%;
	display: block;
}
#pricebox_left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.9795%;
	display: block;
}
#pricebox_right {
	clear: none;
	float: left;
	margin-left: 2.0408%;
	width: 48.9795%;
	display: block;
}
#smart_bottomleft {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottomcenter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottomright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#smart_bottombox { margin-bottom:5px; display:none !important;}
.footer_nav{display:none;}
.harfbox_left{clear: both;float: left;margin-left: 0;width: 48.9795%;display: block;}
.harfbox_right{clear: none;float: left;margin-left: 2.0408%;width: 48.9795%;display: block;}

.mypage_buttonbok {
	display: block;
	clear: both;
	margin-top: 2%;
	margin-bottom: 10px;
}
}