@charset "UTF-8";
body
{
	background: #CDB9AE;
	color: #333;
	font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height:2em;
	font-size: 16px;
	/* background: url(../images/binding-dark.png)#84D8D8; */
	/* background: #ddd; */
}
*
{
	margin:0;
	padding: 0;
}
.Head 
{
	width: 100%;
	margin: auto;
	padding: 0;
	clear: both;
	background-color: #76797E;
	margin-bottom: 10px;
	padding-bottom: 5px;
	/* box-shadow: 0 0 5px #000000 inset; */
	min-width: 1000px;
	/* border-bottom: 5px solid #7ED3CC; */
	/* background: url(../images/arches.png)rgb(208, 129, 0); */
}
.wapper
{
	width: 1000px;
	/* background-color: #eee; */
	margin: auto;
}
.wapper:after
{
	content: "";
	display: block;
	clear: both;
}
p
{
	padding: 0;
	padding-left: 20px;
	padding-right: 20px;

	margin: 0;
}
h1
{
font-size: 20px;
padding: 0;

width: 100%;margin: auto;min-width: 1000px;text-align: center;padding-top: 13px;padding-bottom: 10px;}
h1 a
{

padding: 10px 0 10px 0;

color: #fff;

clear: both;

text-decoration: none;

margin: auto;

/* transition: all .5s ease-in-out; */

word-wrap:break-word;
}
h1 a:hover
{
/* box-shadow: 0 0 5px #000 inset; */
text-decoration: underline;
color: #fff;
}

h2
{
	color: #000;
	text-decoration: none;
	padding: 0 ;
	margin: 0;
}
h3
{
	color: #BCAE8B;
	text-decoration: none;
	padding: 0 ;
	margin: 0;
	font-size: 15px;
	/* background-color: #BDDA02; */
	margin-top: 10px;
	padding-left: 20px;
	clear: both;
	/* box-shadow: 0 0 5px #000 inset; */
	/* border-bottom: 3px solid #BDDA02; */
}
a
{
	color: red;
	text-decoration: none;
}
a:hover
{
	/* color: #FF8A00; */
	text-decoration: underline;
}
/*======================style title======================*/
h2  {
    text-align: left;
    position: relative;
    padding: 10px;
    text-align: center;
    padding-left: 35px;
    clear: both;
    background: linear-gradient(to bottom, rgb(178, 181, 186) 0%, rgb(205, 185, 174) 100%);
    color: #fff;
} 
h2:before {
    /* content: ""; */
    position: absolute;
    top: 3px;
    left: 5px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    /* border-radius: 99px; */
}
h2:after {
    /* content: ""; */
    position: absolute;
    top: 25px;
    left: 5px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent;
    border-color: rgba(255, 255, 255, 0.56);
    /* border-radius: 99px; */
}/*======================style title======================*/
/*=============================menu=============================*/
.Menu-joins-style
{
width: 100%;
margin: auto;
margin-top: -8px;
min-width: 1000px;
margin-bottom: 2px;
background: #BEDAE5;}
.Menu-joins-style ul
{
	padding: 0px;
	list-style: none;
	text-align: center;
	background-color: #C5A598;
	border-top: 6px solid #B99293;
	/* border-top-left-radius: 50% 17px; */
	/* border-top-right-radius: 50% 17px; */
}
.Menu-joins-style ul li
{
display: inline-block;
}
.Menu-joins-style ul li a
{
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
font-size: 13px;}
.Menu-joins-style ul li a:hover
{
background-color: #B99293;
color: #fff;
/* box-shadow: 0 0 5px #000 inset; */
}

/*Style 'show menu' label button and hide it by default*/
.joins-style-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #CDB9AE;
	text-align: left;
	padding: 10px 0;
	display: none;
	text-indent: 10px;
	border-bottom: 3px solid #000;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;

}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;

}
label
{
	transition: all .5s ease-in-out;
}
label:hover
{
	box-shadow: 0 0 5px #000 inset;
}

/*=============================menu=============================*/



/*====================media&img==================================*/
.top-images
{
width: 1000px;
margin: auto;
padding: 0;
}
.top-images img
{
	width: 100%;
	box-shadow: 0 0 5px #000;
}
.box-joins-style-main img
{
	width:40% ;
	box-shadow: 0 0 5px #000;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.img-joins-style-1
{
	width: 41%;
	box-shadow: 0 0 5px #000;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
.img-joins-style-2
{
	width: 98%;
	box-shadow: 0 0 5px #000;
	border-left: 0;
	margin-top: 6px;
	margin-left: 5px;
}
.img-joins-style-3
{
	width: 100%;
	box-shadow: 0 0 5px #000;
	border-left: 0;
}
.img-joins-style-4
{
	width: 100%;
	box-shadow: 0 0 5px #000;
}
.img-joins-style-responsive
{
	width:100% ;
	box-shadow: 0 0 5px #000;
}
/*====================media&img==================================*/


/*======================block & frame======================*/
.main
{
clear: both;
padding: 0;
margin: 0;
}
.main:after
{
	content: "";
	clear: both;
	display: block;
}
.Frames-joins-style
{
clear: both;
margin-bottom: 20px;
}
.Frames-joins-style:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style-1
{
width: 100%;
padding: 0;
margin: 0;
}
.box-joins-style-1:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style-2
{
width: 49%;
padding: 0;
margin: 0;
margin-right: 20px;float: left;}
.box-joins-style-2:first-child
{
	margin-left: 0;
}
.box-joins-style-2:nth-child(2)
{
	margin-right: 0;
}
.box-joins-style-2:nth-child(3)
{

}
.box-joins-style-2:nth-child(4)
{
	margin-right: 0;
}
.box-joins-style-2:nth-child(5)
{

}
.box-joins-style-3
{
width: 32%;
padding: 0;
margin: 0;
float: left;margin-right: 20px;}
.box-joins-style-3:first-child
{
	margin-left: 0;
}
.box-joins-style-3:nth-child(2)
{

}
.box-joins-style-3:nth-child(3)
{
	margin-right: 0;
}
.box-joins-style-3:nth-child(4)
{

}
.box-joins-style-3:nth-child(5)
{

}
.box-joins-style-4
{
width: 23%;
padding: 0;
margin: 0;
float: left;margin-right: 26px;}
.box-joins-style-4:first-child
{
	margin-left: 0;
}
.box-joins-style-4:nth-child(2)
{

}
.box-joins-style-4:nth-child(3)
{

}
.box-joins-style-4:nth-child(4)
{
margin-right: 0;
}
.box-joins-style-4:nth-child(5)
{

}
.box-joins-style-main
{
width: 100%;
padding: 0;
margin: 0;
}
.box-joins-style-links
{
width: 100%;
padding: 0;
margin: 0;
}
.box-joins-style-main:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style
{
box-shadow: 0 0 5px #000;
margin-bottom: 20px;
background-color: #fff;
padding-bottom: 20px;
padding-top: 7px;/* border-radius: 8px; *//* border-top: 5px solid #FF8A00; */}
.box-joins-style:after
{
		content: "";
		display: block;
		clear: both;
}
p.links-joins-style a
{
padding: 7px 20px 7px 20px;
/* float: left; */
color: #fff;
background-color: #F6C1A3;
text-decoration: none;
margin: 10px;
clear: both;/* margin-left: -20px; */}
p.links-joins-style a:hover
{
	text-decoration: none;
	color: #fff;
	background-color: #BCAE8B;
	box-shadow: 0 0 5px #000 inset;
}
.box-joins-style-links
{
	list-style: none;
}
.box-joins-style-links ul
{
	list-style: none;
	padding: 10px;
}
.box-joins-style-links ul li
{
	
border-bottom: 1px solid #ddd;
}
/*======================block & frame======================*/


.Foot 
{
	padding-top: 7px;
	padding-bottom: 10px;
	background-color: #76797E;
	color: #333;
	margin: auto;
	width: 100%;
	height: auto;
	text-align: center;
	word-wrap: break-word;
	/* box-shadow: 0 0 5px #000 inset; */
	margin-bottom: -7px;
	border-top: 2px solid #fff;
}
.Foot  a
{
	color: white;
	text-decoration: none;
}
.Foot  a:hover
{
	/* color: #FF8A00; */
	text-decoration: underline;
}





.social
{
	width: 400px;
	text-align: center;
	margin: auto; 
}
.pocket-btn
{
	margin-top: 2px;
}







@media screen and (max-width: 480px){
body
{
	/* background-color: #eee; */
}
.wapper
{
	width: 90%;
	max-width: 480px;
	margin-top: 20px;
}
.Head 
{
	min-width: inherit;
	border-bottom: none;
	}

h1
{
	width: 100%;
	min-width: inherit;
	text-align: center;
}
h1 a
{
		min-width: inherit;
	width: 100%;
	position: relative;
	margin: 0;
}
.top-images
{
width: 100%;
margin: auto;
max-width: 480px;
}
.top-images img {
    width: 100%;
    box-shadow: 0 0 5px #000;
    border-radius: 0px;
}
.box-joins-style-main img,.img-joins-style-1,.img-joins-style-2,.img-joins-style-3,.img-joins-style-4
{
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}
/*=============================menu=============================*/
.Menu-joins-style
{
width: 100%;
max-width: 480px;
margin: auto;
min-width: inherit;
position: relative;
margin-top: 15px;}

.Menu-joins-style ul
{
	padding: 0;	
list-style: none;
text-align: center;
background-color: transparent;
}
.Menu-joins-style ul li
{
	display: inline;
	width: 100%;
}
.Menu-joins-style ul li a
{
color: #fff;
text-decoration: none;
padding: 5px;
background-color: #CDB9AE;
/* box-shadow: 0 0 1px #000; */
/*margin-bottom: 5px;*/
/*margin-top: 5px;   */
}
.Menu-joins-style ul li a:hover
{
background-color: #B99293;
color: #fff;
/* box-shadow: 0 0 5px #000 inset; */
}

.joins-style-menu
{
	width: 100%;
	max-width: 480px;
}
/*Make dropdown links appear inline*/
	.Menu-joins-style ul {
		position: static;
		display: none;
		margin: 0;
		transition: all .5s ease-in-out;
	}

	/*Display 'show menu' link*/
	.joins-style-menu {
		display:block;
		margin-top: -10px;
		/* transition: all .5s ease-in-out; */
		border-bottom: none;
	}
label:after {
    content: "";
    background: url('../images/nav.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
}
/*=============================menu=============================*/



/*======================block & frame======================*/
.main
{
clear: both;
padding: 0;
margin: 0;
}
.main:after
{
	content: "";
	clear: both;
	display: block;
}
.Frames-joins-style
{
clear: both;
margin-bottom: 20px;
}
.Frames-joins-style:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style-1
{
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.box-joins-style-1:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style-2
{
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.box-joins-style-2:first-child
{
	margin-left: 0;
}
.box-joins-style-2:nth-child(2)
{
	margin-right: 0;
}
.box-joins-style-2:nth-child(3)
{

}
.box-joins-style-2:nth-child(4)
{
	margin-right: 0;
}
.box-joins-style-2:nth-child(5)
{

}
.box-joins-style-3
{
width: 100%;
padding: 0;
margin: 0;
clear: both;
float: none;}
.box-joins-style-3:first-child
{
	margin-left: 0;
}
.box-joins-style-3:nth-child(2)
{

}
.box-joins-style-3:nth-child(3)
{
	margin-right: 0;
}
.box-joins-style-3:nth-child(4)
{

}
.box-joins-style-3:nth-child(5)
{

}
.box-joins-style-4
{
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.box-joins-style-4:first-child
{
	margin-left: 0;
}
.box-joins-style-4:nth-child(2)
{

}
.box-joins-style-4:nth-child(3)
{

}
.box-joins-style-4:nth-child(4)
{
margin-right: 0;
}
.box-joins-style-4:nth-child(5)
{

}
.box-joins-style-main
{
width: 100%;
padding: 0;
margin: 0;
clear: both;
}
.box-joins-style-main:after
{
	content: "";
	display: block;
	clear: both;
}
.box-joins-style
{
box-shadow: 0 0 5px #000;
margin-bottom: 20px;
background-color: #fff;
padding-bottom: 20px;
padding-top: 0px;border-radius: 0 0 10px 10px;}
.box-joins-style:after
{
		content: "";
		display: block;
		clear: both;
}
p.links-joins-style a
{
padding: 5px 15px;
/* float: none; */
color: #fff;

background-color: #F6C1A3;
text-decoration: none;
margin: 10px;
}
p.links-joins-style a:hover
{
	text-decoration: none;

	color: #fff;
	background-color: #FF8A00;
	box-shadow: 0 0 5px #000 inset;
}
/*======================block & frame======================*/


.Foot 
{
width: 100%;
}
.social
{
	width: 100%;
	text-align: center;
	margin: auto; 
}
}

li.first {
    background: #B99293;
}