.homebtn:hover {
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
-moz-opacity:0.8;
-khtml-opacity: 0.8;
}

#page01 #article, #page01 #aside {border:2px solid #009eb0;}
#page01 #sub_color_box, #page01 #aside {background-color:#009eb0;}


#page02 #article, #page02 #aside {border:2px solid #db8597;}
#page02 #sub_color_box, #page02 #aside {background-color:#db8597;}


#page03 #article, #page03 #aside {border:2px solid #2f91cf;}
#page03 #sub_color_box, #page03 #aside {background-color:#2f91cf;}


#page04 #article, #page04 #aside {border:2px solid #41210f;}
#page04 #sub_color_box, #page04 #aside {background-color:#41210f;}


#page05 #article, #page05 #aside {border:2px solid #f8b62b;}
#page05 #sub_color_box, #page05 #aside {background-color:#f8b62b;}


#page06 #article, #page06 #aside {border:2px solid #ba7b48;}
#page06 #sub_color_box, #page06 #aside {background-color:#ba7b48;}


#page07 #article, #page07 #aside {border:2px solid #973b23;}
#page07 #sub_color_box, #page07 #aside {background-color:#973b23;}


#page08 #article, #page08 #aside {border:2px solid #96366c;}
#page08 #sub_color_box, #page08 #aside {background-color:#96366c;}


#page09 #article, #page09 #aside {border:2px solid #548530;}
#page09 #sub_color_box, #page09 #aside {background-color:#548530;}


#page10 #article, #page10 #aside {border:2px solid #ec6f60;}
#page10 #sub_color_box, #page10 #aside {background-color:#ec6f60;}

@media screen and (min-width: 769px) {
/* PC用のスタイル */
body {
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/toppage_bg.gif);
	background-position:center top;
	background-repeat:no-repeat;
}

#wrapper {
	width:960px;
	margin:0 auto;
	position:relative;
}
#header {
	width:960px;
	height:165px;
	margin-bottom:15px;
	float:left;
}
#header h1 {
	position:absolute;
	top:100px;left:0px;
}
#header .karaku img {
	width:180px;
	height:65px;
}

#contents {
	width:960px;
	float:left;
}
#content_left {
	width:780px;
	float:left;
	margin-bottom:0px;
}

.left_box {
	width:780px;
	float:left;
	margin-bottom:10px;
	position:relative;
}

/* サブページ用スタイル */

#article {
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#article p{
	text-align:justify;
	margin:0 25px 60px 20px;
	line-height:1.5em;
	clear:both;

}

#sub_color_box {
	width:165px;
	height:165px;
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/subkaraku.png);
	background-position:center top;
	background-repeat:no-repeat;
	float:left;
	margin-left:30px;
	position:relative;
	}
	
#sub_color_box span{
	width:165px;
	text-align:center;
	color:#fff;
	position:absolute;
	left:0;bottom:0;	
	}

#article h1 {
	height:425px;
	float:right;
	font-size:180%;
	margin-top:80px;
	margin-right:40px;
	line-height:150%;		
	-webkit-writing-mode: vertical-rl; /* webkit */
	writing-mode: tb-rl; /* IE */
	direction:ltr; /* the base direction (reading order) for text content. default:ltr */
}

#aside {
	text-align:center;
	color:#fff;
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#aside img {
	margin:3px 3px 0 0;	
}
#aside h4 {
	text-align:justify;
	font-size:120%;
	line-height:1.5em;
	margin:0 5px 5px 5px;
}
#aside p {
	text-align:justify;
	line-height:1.5em;
	margin:5px 7px 5px 5px;
}


/* ナビゲーション用スタイル */

#content_right {
	width:180px;
	float:right;
	margin-bottom:20px;
}
#nav {
	width:180px;
	height:570px;
	float:left;
}

#logo {
	float:right;
	margin:0 15px 15px 0;
}
#logo img {
	width:150px;
	height:135px;
}

#nav ul {
	margin-top:20px;
	margin-left:15px;
}

#nav li {
	margin-bottom:20px;
}

ul#inq_link {
	margin-top:40px;
}

#nav p {
	margin-top:30px;
	margin-left:15px;	
}

#nav p strong {
	font-size:110%;	
}

#nav p span#telno {
	font-size:135%;	
}

#footer {
	width:960px;
	height:20px;
	float:left;
	margin-bottom:20px;
	text-indent:15px;
	}
}

@media screen and (max-width: 768px) {
/* タブレット用のスタイル */
body {
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/toppage_bg_tab.gif);
	background-position:center top;
	background-repeat:no-repeat;
}

#wrapper {
	width:628px;
	margin:0 auto;
}
#header {
	width:628px;
	height:80px;
	margin-bottom:15px;
	float:left;
}
#header h1 {
	position:absolute;
	top:35px;left:15px;
}
#header .karaku img {
	width:120px;
	height:42px;
}

#contents {
	width:628px;
	float:left;
}
#content_left {
	width:470px;
	float:left;
}

.left_box {
	width:470px;
	float:left;
	margin-bottom:10px;
}


/* サブページ用スタイル */

#article {
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#article p{
	text-align:justify;
	margin:0 25px 60px 20px;
	line-height:1.5em;
	clear:both;

}

#sub_color_box {
	width:165px;
	height:165px;
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/subkaraku.png);
	background-position:center top;
	background-repeat:no-repeat;
	float:left;
	margin-left:30px;
	position:relative;
	}
	
#sub_color_box span{
	width:165px;
	text-align:center;
	color:#fff;
	position:absolute;
	left:0;bottom:0;	
	}

#article h1 {
	height:425px;
	float:right;
	font-size:180%;
	margin-top:80px;
	margin-right:40px;
	line-height:150%;		
	-webkit-writing-mode: vertical-rl; /* webkit */
	writing-mode: tb-rl; /* IE */
	direction:ltr; /* the base direction (reading order) for text content. default:ltr */
}

#aside {
	text-align:center;
	color:#fff;
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#aside img {
	margin:3px 3px 0 0;	
}
#aside h4 {
	text-align:justify;
	font-size:120%;
	line-height:1.5em;
	margin:0 5px 5px 5px;
}
#aside p {
	text-align:justify;
	line-height:1.5em;
	margin:5px 7px 5px 5px;
}


/* ナビゲーション用スタイル */

#content_right {
	width:158px;
	float:right;
	margin-bottom:20px;
}
#nav {
	width:158px;
	height:750px;
	float:left;
}

#logo {
	float:right;
	margin:0 15px 15px 0;
}

#logo img {
	width:150px;
	height:135px;
}

#nav ul {
	margin-top:20px;
	margin-left:0;
}

#nav li {
	margin-bottom:20px;
}
ul#inq_link {
	margin-top:40px;
}

#nav p {
	margin-top:30px;
	margin-left:0;	
}

#nav p strong {
	font-size:110%;	
}

#nav p span#telno {
	font-size:135%;	
}
#footer {
	width:728px;
	height:20px;
	float:left;
	margin-bottom:20px;
	text-indent:15px;
}
}
@media screen and (max-width: 620px) {
/* スマートフォン用のスタイル */
body {
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/toppage_bg_phn.gif);
	background-position:center top;
	background-repeat:no-repeat;
}

#wrapper {
	width:620px;
}
#header {
	width:100%;
	height:80px;
	margin-bottom:10px;
	float:left;
}
#header h1 {
	position:absolute;
	top:35px;left:15px;
}
#header .karaku img {
	width:120px;
	height:42px;
}

#contents {
	width:100%;
	float:left;
	margin-bottom:10px;
}
#content_left {
	width:100%;
	float:left;
	margin-bottom:10px;
}
.left_box {
	float:left;
	width: 100%;
	margin-bottom:0px;
}



/* サブページ用スタイル */

#article {
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#article p{
	text-align:justify;
	margin:0 25px 60px 20px;
	line-height:1.5em;
	clear:both;

}

#sub_color_box {
	width:165px;
	height:165px;
	background-image:url(http://www.ka-raku.co.jp/wp-content/uploads/2014/05/subkaraku.png);
	background-position:center top;
	background-repeat:no-repeat;
	float:left;
	margin-left:30px;
	position:relative;
	}
	
#sub_color_box span{
	width:165px;
	text-align:center;
	color:#fff;
	position:absolute;
	left:0;bottom:0;	
	}

#article h1 {
	height:425px;
	float:right;
	font-size:180%;
	margin-top:80px;
	margin-right:40px;
	line-height:150%;		
	-webkit-writing-mode: vertical-rl; /* webkit */
	writing-mode: tb-rl; /* IE */
	direction:ltr; /* the base direction (reading order) for text content. default:ltr */
}

#aside {
	text-align:center;
	color:#fff;
	margin-top:5px;
	width:375px;
	height:780px;
	float:left;
}

#aside img {
	margin:3px 3px 0 0;	
}
#aside h4 {
	text-align:justify;
	font-size:120%;
	line-height:1.5em;
	margin:0 5px 5px 5px;
}
#aside p {
	text-align:justify;
	line-height:1.5em;
	margin:5px 7px 5px 5px;
}

/* ナビゲーション用スタイル */

#content_right {
	width:100%;
	float:left;
	margin-bottom:0px;
}
#nav {
	width:100%;
	height:200px;
	float:left;
	margin-bottom:10px;
}

#logo { 
	display:none;
}

#nav ul {
	margin-top:20px;
	margin-left:15px;
}

#nav li {
	float:left;
	margin-bottom:20px;
	margin-right:10px;
}

ul#inq_link {
	clear:both;
	margin-top:40px;
}

#nav p {
	clear:both;
	margin-top:30px;
	margin-left:15px;	
}

#nav p strong {
	font-size:110%;	
}

#nav p span#telno {
	font-size:165%;	
}

#footer {
	clear:both;
	width:100%;
	height:20px;
	float:left;
	margin-top:20px;
	margin-left:20px;
	margin-bottom:20px;
}
}