/* ====================================
	+ construct +
====================================== */

b { color:#c51; }
hr { background-color:#222; }

/* ====================================
	+ link +
====================================== */

a{ text-decoration:none; color:#630; }
article a{ text-decoration:underline; }

/* ====================================
	+ rayout +
====================================== */

/* ALL */
body { background:url('../images/bodyBack.png'); color:#042; font-size:11pt; letter-spacing:0.08em; }
header{ background:url('../images/headerBackLight.png'); border-bottom:3px solid orange; overflow:hidden; }
#container{ padding-bottom:70px; }
#footer{ height:40px; }

/* PC */
@media screen and (min-width:769px){
	#container{ width:1024px; margin:auto; overflow:hidden; }
}
/* SP */
@media screen and (max-width:768px){
	#container{ width:100%; }
}
/* ====================================
	+ header +
====================================== */
/* ALL */
/* head line */
#head_line{ padding:3px 30px; background:#310; }
#head_line span{ font-size:smaller; color:#663; }

/* logo */
#title{  }
h1{ position:relative; top:50%; width:270px; height:64px; background:url('../images/header_logo.png'); }

#tel_info{ position:relative; }
#tel_info img{ display:block; }
#tel_info img:first-child{ padding-bottom:5px; border-bottom:1px dotted white; }

/* menu */
#menu_space{  }
#menu_space ul{  }
#menu_space li{  }
#menu_space li a{  }

#menu_space a{ display:block; height:25px; color:#042; }
#menu_space a:hover{ background:rgba(255,130,0,0.8); color:#fff; }

/* PC */
@media screen and (min-width:769px){
	/* logo */
	#title{ padding:20px 30px; overflow:hidden; float:left; }
	h1{ float:left; margin-right:30px; vertical-align:middle; }

	/* menu */
	#menu_space{ position:relative; float:left; }
	#menu_space ul{ position:relative; top:50px; overflow:hidden; }
	#menu_space li{ position:relative; float:left; margin-left:20px; }
	#menu_space li a{ width:110px; height:110px; line-height:110px; text-align:center; vertical-align:middle; font-weight:bold; background:rgba(255,255,255,0.8); border-radius:50%; }

	#menu_space a{ display:block; height:25px; color:#042; }
	#menu_space a:hover{ background:rgba(255,130,0,0.8); color:#fff; }
}
/* SP */
@media screen and (max-width:768px){
	/* logo */
	#title{ width:auto; padding:auto; margin:auto; }

	/* menu */
	#menu_space{ position:relative; }
	#menu_space ul{ position:relative; }
	#menu_space li{ position:relative; padding:1px;  }
	#menu_space li a{ width:100%; height:50px; line-height:50px; text-align:center; vertical-align:middle; font-weight:bold; background:rgba(255,255,255,0.8); }

	#menu_space a{ display:block; height:25px; color:#042; }
	#menu_space a:hover{ background:rgba(255,130,0,0.8); color:#fff; }
}
/* ====================================
	+ column +
====================================== */

/* PC */
@media screen and (min-width:769px){
	#leftSide{ float:left; width:224px; }
	#rightSide{ float:right; width:800px; }
}
/* SP */
@media screen and (max-width:768px){
	#leftSide{  }
	#rightSide{ width:95%; margin:auto; }
}

/* ====================================
	+ section +
====================================== */

.slider{ width:100%; height:300px; background:white; margin:auto; }

/* ====================================
	+ article +
====================================== */

article{ padding:0px 0px; }

h2{ position:relative; margin:10px 0px; padding:20px; border-radius:10px; background:#eb60b8; font-size:larger; font-weight:bold; color:#fff; }
h2 .tony{ position:absolute; top:-60px; right:20px; height:80px; width:42px; background:url('../images/tony.png'); z-index:9999; }
h3{ font-size:x-large; padding:5px 10px; margin:10px 0; color:#5bab57; font-weight:bold; border-bottom:1px solid #5bab57; }
h3:before{ content:'\f06c \0020'; font-family: FontAwesome; }
h4{ font-weight:bold; font-size:larger; color:#5bab57; }

.floatBox{ overflow:hidden; }
.floatBox img{ float:left; margin-right:20px; border:#888 solid 1px; }

/* ====================================
	+ table +
====================================== */

table{ margin:20px auto; width:100%; border:2px #5bab57 solid; border-collapse: collapse; }
table th{ background:#bedeb6; }
table td{ background:#f8f8ff; }
table th,td{ padding:20px; border:1px #5bab57 solid; min-width:50px; text-align:center; }

/* PC */
@media screen and (min-width:769px){
	table{ margin:20px auto; width:100%; border:2px #5bab57 solid; border-collapse: collapse; }
	table th{ background:#bedeb6; }
	table td{ background:#f8f8ff; }
	table th,td{ padding:20px; border:1px #5bab57 solid; min-width:50px; text-align:center; }
}
/* SP */
@media screen and (max-width:768px){
	table{ margin:20px auto; width:100%; border:2px #5bab57 solid; border-collapse: collapse; }
	table th{ background:#bedeb6; }
	table td{ background:#f8f8ff; }
	table th,td{ padding:20px; border:1px #5bab57 solid; min-width:50px; text-align:center; }
}

/* ====================================
	+ list +
====================================== */
ul{ list-style:none; }
ul li{ margin:5px;  }
ul.profile,ul.list{ display:inline-block; margin:10px 0; padding:10px; border-radius:10px; border:2px solid #5bab57; }
ul.list{ padding-left:25px; list-style:disc; }


/* PC */
@media screen and (min-width:769px){
}
/* SP */
@media screen and (max-width:768px){
}

/* ====================================
	+ sidebar +
====================================== */

#leftSide img{ display:block; width:200px; height:200px; margin:10px; border:1px solid #888; }


/* Twitter */
#twitter h2{	padding-bottom:5px; border-bottom:4px double #aaa; position:relative; margin-top:10px;
		width:100%; height:54px; background:url("../images/twitter.gif") no-repeat;  }
#twitter_box{ position:relative; margin-top:10px; height:370px; }

/* YOUTUBE */
#youtube h2{	padding-bottom:5px; border-bottom:4px double #aaa; position:relative; margin-top:40px;
		width:100%; height:54px; background:url("../images/movie.gif") no-repeat;  }
#youtube iframe{ margin:10px 0; }

/* ====================================
	+ pages +
====================================== */

#current_navi{ margin:10px 0; font-size:smaller; }
#page_title{ background:rgba(100,240,50,0.5); width:100%; padding:50px 20px; text-align:center; font-size:xx-large; }
#page_title span{ letter-spacing:0.51em; }

.totop{ text-align:right; margin:10px 0; }
.totop a{ font-size:smaller; background:white; padding:3px 5px; border:1px solid #665; border-radius:30px; text-decoration:none; }
.totop a:hover{ background:pink; }

/* ====================================
	+ access +
====================================== */

.access ul li{ margin:5px 0 5px 2em; list-style-type:decimal; }
.access iframe{ width:100%; height:450px; }
/* ====================================
	+ care +
====================================== */

.link_button{ display:flex; margin:10px 0; }
.link_button a{ display:block; width:50%; margin:5px; height:300px; line-height:300px; text-align:center; color:#eb60b8; background:pink; border-radius:30px; text-decoration:none; }
.link_button a:hover{ color:white; background:#eb60b8; }
.link_button a span{ font-size:large; }

/* ====================================
	+ goods +
====================================== */

#item_list{ border-bottom:4px double #222; }
#item_list th{ color:#c51; }
#item_list td.item_img{  }
#item_list td{  }

/* combo */
ul.navigation li{ background:url("../images/mark.gif") no-repeat; text-indent:15px; }
ul.navigation li a{ font-family:Arial; font-size:11px; }

/* ====================================
	+ blog +
====================================== */

#blog table{ width:auto; margin:auto; }
#blog table img{ margin:20px; }

/* ====================================
	+ form +
====================================== */

.form{ background:#cc9; border:#333 solid 1px; color:#111; }
select{ background:#cc9; border:#333 solid 1px; color:#111; }
.button:hover{ background:#c51; }

/* ====================================
	+ contact +
====================================== */

.mailform_finish{ margin:50px; text-align:center; }
.form_check dd{ border-color:#222; }

/* ====================================
	+ footer +
====================================== */

#footer{ text-align:center; padding-top:30px; background:#310; color:#663;}