/*----------------------------------
Responsive Site
CSS Template
Provided by Teresa Sakuma Kazuko
-----------------------------------*/

@charset "utf-8";


/*----------------------------------
Reset All--start
-----------------------------------*/
html,body,header,footer,div,p,h1,h2,h3,h4,ul,li,{
 margin: 0px;
 padding: 0;
}


/*----------------------------------
Body
-----------------------------------*/
body{
 max-width: 980px;
 margin: 0 auto;
 padding: 0;
 background-color: #ffffff;
 font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	background-color: none;
}

/*----------------------------------
Header
-----------------------------------*/
#header{
 margin: 0;
 background-color: #c0c0c0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c0c0c0));
 font-size: 16px;
 color: #575757;
 text-align: center;
}

.ad{
	margin: 0;
	padding: 0.5em;
	text-align: center;
}

/*----------------------------------
Heading
-----------------------------------*/
h1{
 margin: 0;
	padding: 0.5em;
 line-height: 25px;
 background-color: #c0c0c0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c0c0c0));
 font-size: 16px;
 color: #575757;
 text-align: left;
 padding-left: 1.5em;
}

h2{
 margin:0.5em 0;
	padding: 0.5em;
 font-weight: bold;
 font-size: 18px;
 text-align: center;
 color: #575757 ;
 background-color: #c0c0c0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c0c0c0));
}

h3{

}

.dp{color: deeppink;}

/*---------------------------
Nav
-----------------------------*/
nav {
 margin: 0;
 padding: 0;
 width: 100%;
}

nav h3 {
 margin: 0;
 padding: 0.5em;
 font-size: 16px;
 text-align: center;
 color:#575757;
 background-color: #c0c0c0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c0c0c0));
	border-radius: 13px 13px 0 0;
}


/*----------------------------------
Menu btn
（under800）
-----------------------------------*/
.togmenu {
    margin: 0;
	display:none;
}
.menubtn {
 margin-top: 0;
 text-align: right;
	padding: 16px 18px;
	color:#575757;
	font-weight: bold;
    background-color: #c0c0c0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c0c0c0));
}
#menu ul {
	margin: 0;
	padding: 0;
	background-color: #d4d4d4;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d4d4d4));
}
#menu li {
 margin: 0;
	list-style: none;
	border-top: 2px solid #fff;
	width: 16%;
}
#menu li a {
 margin: 0;
	text-align: center;
	padding: 16px 20px;
	display:block;
	text-decoration:none;
	color: #6d6d6d;
	font-weight: bold;
 border-bottom: solid 2px #c0c0c0;
 background-color: #eaeaea;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaeaea));
}

@media only screen and (min-width: 800px) {
	.menubtn {
		display:none;
	}
	.togmenu {
		display:block;
	}
	#menu li {
		display: inline-block;
		border:none;
	}
}

@media screen and (max-width: 768px){
	#menu li {
		display: inline-block;
		border:none;
		width: 100%;
	}
	#menu li a {
		text-align: right;
}
}
/*----------------------------------
Contents（Text）
-----------------------------------*/
section{
	margin: 0;
	background-color: white;
}

article{
	margin: 0;
	padding: 0.5em;
}

.text-box{
margin: 0.5em;
padding: 0;
}

.text-box p{
	font-size: 16px;
	padding: 0.25em;
}

.msg-box{
 margin:0.25em 0.25em 1em;
	padding: 0 0.5em;
 background-color: #ffffff;
 font-size: 16px;
 font: #646464;
 border-radius:20px;
 -webkit-border-radius:13px;
 -moz-border-radius: 13px;
	border: 1px dotted #c0c0c0;
}

.msg-box p{
	padding: 0 0.5em;
}

.ranking{
	margin: 0 0 1em;
	padding: 0;
	border-bottom: 1px solid #c0c0c0;
}

.ranking h3{
	margin: 0;
 padding: 1em;
	text-align: center;
	color: black;
	font-size: 16px; 
	border-radius: 8px 8px 0 0;
	background-color: #f4dee9;
}

.como{
	margin: 0;
	padding: 0.5em;
 color: #3c2d0f;
 text-align: center;
}

.como p{
	margin: 0;
	padding: 0;
}

.photo{
	margin: 0;
	padding: 0;
	text-align: center;
}

.photo p{
	margin: 0 0 0 0.5em;
	padding: 1em;
	font-weight: bold;
}

.bc3{
	   padding-left: 0.25em;
    color: #f503c6;
    text-shadow: 2px 2px 2px #b4739d;
    font-size: 18px;
}

.info{
	margin: 0;
	padding: 0 0.5em;
}

.u-l{
	border-bottom: 2px dotted #f009a9;
	font-weight: bold;
}


/*---------------------------
Font color
-----------------------------*/
.black{
 color: #000000;
}
 
.white{
 color: #ffffff;
}

.red{
 color:#ff0000;
}

.blue{
 color: #0000ff;
}

.pink{
 color: #ff0080;
}

.blown{
 color: #3b1f0d;
}

.orange{
 color: #ff8040;
}

.green{
 color: #00ff00;
}

.yellow{
 color: #ffff00;
}

.big{
	border-bottom: 2px dotted #fa0c96;
}

/*---------------------------
Font size & weight
-----------------------------*/
.font-10{
 font-size: 10px;
}

.font-12{
 font-size: 12px;
}

.font-14{
 font-size: 14px;
}

.font-16{
 font-size: 16px;
}
 
.font-18{
 font-size: 18px;
}

.font-24{
 font-size: 24px;
}

.b{
 font-weight: bold;
}

/*---------------------------
Font size
-----------------------------*/
.bkgrd1{
 background-color: #ffe9ec;
}

.bkgrd2{
 background-image: url("../img/kabegami1.png");
} 

.bc{
	background-color: hotpink;
}

/*---------------------------
img 
-----------------------------*/
.header{
 margin-top: 0;
 margin-bottom: 0;
}

.l-img{
 float: left; 
	margin: 0 1em 1em 1em;
}

.r-img{
 margin-right: 2em;
 margin-bottom: 2em;
}

.clear{
 clear: both;
}

.modules li p.thumb img {
  max-width: 100% !important;
  height: auto !important;
}


/*---------------------------
breadcrumb list
-----------------------------*/
p.pankuzu{
 font-size: 12px;
 text-align: left;
 padding-left: 10px;
}


/*---------------------------
Navi Menu (accordion)
-----------------------------*/
@font-face {
	font-family: 'Typicons';
	src: url('../fonts/typicons-regular-webfont.eot');
	src: url('../fonts/typicons-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/typicons-regular-webfont.woff') format('woff'),
		url('../fonts/typicons-regular-webfont.ttf') format('truetype'),
		url('../fonts/typicons-regular-webfont.svg#TypiconsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

#accordion{
  margin: 0;
  padding: 0;
  border-top: 3px solid #c0c0c0;
  border-bottom: 3px solid #c0c0c0;
  list-style: none;
  line-height: 1;
  background-color: #dbdbdb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dbdbdb));
}
#accordion > li{
  margin: 0;
  padding: 0;
  border-right: 1px solid #c0c0c0;
  border-left: 1px solid #c0c0c0;
  display: block;
  list-style: none;
  text-align: left;
}
#accordion li a{
  margin-top: 0;
  padding: 15px 45px;
  display: block;
  position:relative;
  color: #808080;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #c0c0c0;
  border-top: 1px solid #c0c0c0;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
  background-color: #ededed;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ededed));
}
#accordion > li:first-child > a{
  border-top: 0px;
}
#accordion > li a:before {
  position: absolute;
  top: 50%;
  left: 15px;
  font: 24px/100% 'Typicons';
  content: "5";
  color: #c0c0c0;
  margin-top: -10px;
  text-shadow: 1px 1px 0px rgba(255,255,255,.7);
}
#accordion li a:hover{
  padding-left: 80px;
  color: #ffffff;
  background: rgba(0,0,0,.1);
  border-top-color: #c0c0c0;
  margin: 0;
  text-decoration: none;
  font-weight: bold;
}
.arrow{
  position:absolute;
  top:50%;
  right: 30px;
  width: 30px;
  height: 20px;
  line-height: 1;
  text-shadow: 0 -1px 0px rgba(0,0,0,.3);
  margin-top: -10px;
  color: #f267ae;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
.arrow:before{
}
#accordion li > a:hover .arrow{
  color: #e4601b;
}
.rotate {
  color:#a3718f;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#accordion li ul {
  list-style: none;
  background: #ffffff;
  margin: 0;
}
#accordion li ul li a{
  position:relative;
  background: none;
  line-height: 1;
  padding: 15px 70px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #c0c0c0;
}
#accordion li ul li a:before {
  position: absolute;
  top: 50%;
  left:45px;
  content: "\0022";
  font:16px/100% 'Typicons';
  color: #c0c0c0;
  margin-top: -8px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
#accordion li ul li:first-child a{
  border-top: 0px;
  box-shadow: 0 7px 7px -7px rgba(0,0,0,.5) inset;
}
#accordion li ul li:last-child a{
  border-bottom: 1px solid #c0c0c0;
}
#accordion li ul li a:hover{
  padding-left: 80px;
  background: #e6e6e6;
  border-top-color: #c0c0c0;
}


/*---------------------------
footer
-----------------------------*/
footer{
 line-height: 35px;
 background-color: #ffffff;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#ffffff));
 font-size: 12px;
 color: #808080;
 text-align: center;
}

footer a{
 text-decoration: none;
 color: #808080;
}


/*---------------------------
Device
-----------------------------*/

@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
}

@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
}

@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
}


@media screen and (max-width:375px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
}

/*------------------ＥＮＤ-----------------*/