@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------
 
    whole
 
---------------------------------------------------- */
body {
	font-size:12px;
	color:#626262;
	line-height:150%;
	background:url(../images/bg.png) repeat;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
a {
	color:#00b4ff;
}
a:active {
	color:#F99;
}
#wrapper {
	margin:10px auto;
	width:1000px;
}
#container {
	width:750px;
	margin:0 auto;
	float:left;

}
#maincontents {
	margin-top:0;
	background-color:#FFF !important;
}
/* ----------------------------------------------------
 
    header
 
---------------------------------------------------- */
#header {
	margin-right:auto;
	margin-left:auto;
	margin-bottom:30px;
	height:35px;
	background-color:#000;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
#header2 {
	margin-right:auto;
	margin-left:auto;
	margin-bottom:30px;
	height:35px;
	background-color:#000;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
#header2 h1 {
	padding:15px 0px 0 0;
	color:#CCC;
	font-size:10px;
	text-align:right;
	float:right;
}
#header h1 {
	padding:10px;
	margin-bottom:5px;
	float:left;
}
#header h2 {
	padding:15px 0px 0 0;
	color:#CCC;
	font-size:10px;
	text-align:right;
	float:right;
}
#logo {
	padding:10px;
	margin-bottom:5px;
	float:left;
}
#mainimg {
	position:relative;
	margin-bottom:20px;
}
/* ----------------------------------------------------
 
    lcontents
 
---------------------------------------------------- */
#sidemenu {
	margin-right:20px;
	width:180px;
	float:right;
	

}
#sidemenu li {
	line-height:2.2;
}
#sidemenu li a {
	display:inline;
	color:#333;
	padding:10px 3px 10px 20px;
	position:relative;
	text-decoration:none;
}
#sidemenu li a:active {
	color:#F99;
	position:relative;
	top:1px;
	left:1px;
}

#sidemenu2 {
	width:180px;
	margin-top:20px;
	margin-right:20px;
	float:right;
	
}
#sidemenu2 li {
	line-height:2.2;
}
#sidemenu2 li a {
	display:inline;
	color:#333;
	padding:10px 3px 10px 20px;
	position:relative;
	text-decoration:none;
}
#sidemenu2 li a:active {
	color:#F99;
}
.menuimg {
	margin-bottom:15px;
}
.listimg {
	margin:0 0 0 -15px;
	padding:0 8px 0 0;
	position:relative;
	top:3px;
}
.no-border {
	border-bottom:none !important;
}
.border-solid {
	border-bottom:#000 solid 1px !important;
}
/* ----------------------------------------------------
 
    footer
 
---------------------------------------------------- */

#footer {
	position:relative;
	left:8px;
}
#footermain {
	height:315px;
	margin:0 auto;
}
#description {
	padding:5px 10px 5px 10px;
	font-size:10px;
	line-height:1.3;
	color:#666;
	text-align:center;
}
#copyright {
	width:100%;
	padding:4px 3px 3px 0px;
	height:20px;
	margin-bottom:0;
	background-color:#000;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
	font-size:11px;
	color:#CCC;
	text-align:center;
}
/* ----------------------------------------------------
 
    under
 
---------------------------------------------------- */	
#kiso_contents {
	width:750px;
	margin:auto;
}
#kiso_contents a:active {
	position:relative;
	top:1px;
	left:1px;
}
.kiso_contents_block {
	font-size:14px;
	line-height:150%;
	padding:20px;
	border:#CCC solid 1px;
	margin-bottom:20px;
}
.kiso_contents_block h2 {
	height:30px;
	font-size:20px;
	font-weight:bold;
	color:#f18a8a;
	padding:15px 5px 5px 20px;
	background:url(../images/h2.png);
	background-repeat:no-repeat;
}
.kiso_contents_block h3 {
	height:25px;
	font-size:20px;
	font-weight:bold;
	color:#F99;
	padding:10px 5px 5px 0;
	margin:20px auto;
	border-bottom:double 3px #CCC;
	border-top:double 3px #CCC;
	font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.kiso_contents_block h4 {
	height:20px;
	font-size:16px;
	font-weight:bold;
	color:#999;
	margin:10px 0 10px 0;
	padding:2px 5px 2px 10px;
	border-bottom: 1px dotted;
	border-left:#F99 5px solid;
	font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.kiso_contents_block h5 {
	margin-top:20px;
	border-bottom:2px #F99 solid;
	width:80%;
	font-size:16px;
}
.kiso_contents_block h5 a {
	text-decoration:none;
}
.kiso_contents_block .border {
	border:#CCC dashed 1px;
	padding:10px;
	margin:10px 0;
}
.kiso_contents_block .border2 {
	border-top:#CCC solid 1px;
	padding-top:20px;
}
.kiso_contents_block ul {
	padding:15px 30px;
}
.kiso_contents_block .look{
	padding-left:5%;
	margin-bottom:5%;
	}
button {
	width: auto;
	padding:0;
	margin:5px;
	background:none;
	border:0;
	font-size:0;
	line-height:0;
	overflow:visible;
	cursor:pointer;
}

/* ----------------------------------------------------
 
    etc
 
---------------------------------------------------- */
#pagetop {
	margin-right:10px;
	height:90px;
}
#pagetop a:active {
	position:relative;
	top:2px;
}
#pan {
	padding:0 0 10px 0;
	color:#626262;
	font-size:12px;
	line-height:150%;
}
#pan img {
	width:16px;
	height:16px;
	position:relative;
	top:2px;
	right:3px;
}
#pan a {
	text-decoration:underline;
	color:#96F;
}
#pan a:active {
	color:#fc5b90;
	text-decoration:underline;
	position:relative;
	top:1px;
	left:1px;
}
.txt-img {
	margin:5px 10px;
}
.txt-img a:active {
	opacity:0.7;
	filter: alpha(opacity=70);
}
/* ----------------------------------------------------
 
    uranai
 
---------------------------------------------------- */

.uranai_title {
	font-size:16px;
	margin:0 0 10px 0;
	border-bottom:2px #F99 solid;
}
.uranai_title a {
	text-decoration:none;
}
.uranai_box {
	padding:15px 5px;
	margin:15px 0;
	border:#F99 solid 2px;
	border-radius:8px;
	background-color:#fffcf2;
}
.more {
	text-align:right;
}
/* ----------------------------------------------------
 
    text
 
---------------------------------------------------- */
.mp {
	color:#00b4ff;
	font-size:20px;
	line-height:120%;
	font-weight:bold;
}
.mb {
	font-size:15px;
	font-weight:bold;
	text-align:left;
}
.mb a {
	color:#00b4ff;
	text-decoration:underline;
}
.mb a:active {
	color:#f5588a;
}
.bgy {
	background:#ffffdd;
}
.rb {
	color:#F36;
	font-weight:bold;
}
.sp {
	color:#f5588a;
	font-weight:bold;
	font-size:24px;
	text-align:center;
	line-height: 1.5;
}
.new {
	color:#FF4E81
}
/* ----------------------------------------------------
 
    ad
 
---------------------------------------------------- */

#ad1  {
	margin-left:0px;
	margin-bottom:15px;
	text-align:center;
}
#ad2 {
	margin-left:0;
	float:left;
}
#ad3 {float:right;
	
}




/* ----------------------------------------------------
 
    responsive
 
---------------------------------------------------- */


 @media screen and (min-width: 901px) and (max-width: 980px) {
#header {
	width:100%;
	margin:0 auto;
}
#header h1 {
	padding:5px;
	float:left;
}
#kiso_contents {
	width:100%;
	float:left;
}
.kiso_contents_block h2 {
	height:50px;
	font-size:20px;
	font-weight:bold;
	color:#f18a8a;
	padding:15px 5px 5px 20px;
}
#logo {
	padding:10px;
	margin-bottom:5px;
	float:left;
}

#mainimg {
	position:relative;
	width:100%;
	left:0;
	margin-bottom:10px;
}
#wrapper {
	width:100%;
	margin:auto;
}
#container {
	width:75%;
	margin:5px 10px 5px 10px;
	float:left;
	background-color:#FFF;
}
#sidemenu {
	margin-right:0px;
	width:180px;
	float:right;

}
#sidemenu2 {
	width:180px;
	margin-top:20px;
	margin-right:0px;
	float:right;
	
}
#footer {
	width:100%;
	position:relative;
	left:0px;
}
#footermain {
	width:100%;
	height:315px;
	margin:0 auto;
}
#ad1  {
	margin-left:0px;
}
#ad2 {
	margin-left:0;
	float:left;
}
#ad3 {float:right;
	
}

}
 @media screen and (min-width: 643px) and (max-width: 900px) {
#header {
	width:100%;
	margin:0 auto 10px;
}
#header h1 {
	padding:5px;
	float:left;
}
#logo {
	padding:5px;
	float:left;
}
#mainimg {
	position:relative;
	width:100%;
	left:0;
	margin-bottom:10px;
}
#wrapper {
	width:100%;
	margin:auto;
}
#container {
	width:95%;
	margin:5px 10px 5px 10px;
}
.kiso_contents_block h2 {
	height:30px;
	padding:15px 5px 5px 20px;
}
#kiso_contents {
	width:100%;
	margin:auto;
}

#sidemenu {
	float:left;
	width:200px;
	margin-left:100px;
	margin-top:30px;
}
#sidemenu2 {
	float:right;
	width:180px;
	margin-right:100px;
	margin-top:30px;
}
#footer {
	width:100%;
	position:relative;
	left:0px;
}
#footermain {
	width:100%;
	height:315px;
	margin:0 auto;
}
#ad1, #ad2 {
	margin-left:0;
}

}
 @media screen and (min-width: 361px) and (max-width: 642px) {
#header {
	width:100%;
	margin:0 auto;
}
#mainimg {
	position:relative;
	width:100%;
	left:0;
	margin-bottom:10px;
}
#wrapper {
	width:100%;
	margin:auto;
	position:relative;
}
#container {
	width:96%;
	margin:5px 10px 5px 10px;
}
.kiso_contents_block h2 {
	height:50px;
	padding:10px 5px 5px 20px;
	background:url(../images/h2.png);
	background-repeat:no-repeat;
	font-size:16px;
	line-height:1.2;
}
.kiso_contents_block h3 {
	height:40px;
}
.kiso_contents_block h4 {
	height:40px;
}

#sidemenu {
	width:180px;
	position:relative;
	bottom:-21px;
	left:-90px;
	margin-bottom:405px;
}
#sidemenu2 {
	margin-top:0;
	float:none;
	width:180px;
	position:absolute;
	bottom:350px;
	left:50px;
}
#sidemenu li {
	border-bottom:#705d34 dashed 1px;
}
#sidemenu li a {
	display:block;
	padding:10px 5px 10px 30px;
	position:relative;
	text-decoration:none;
}
#footer {
	width:100%;
	position:relative;
	left:0px;
}
#footermain {
	width:100%;
	height:315px;
	margin:0 auto;
}
#copyright {
	width:99%;
	padding:15px 2px 2px 2px;
	height:34px;
	margin-bottom:0;
	font-size:10px;
	line-height:1.2;
}
#kiso_contents {
	width:100%;
	margin:auto;
}
.no-border {
	border-bottom:none !important;
}
.border-solid {
	border-bottom:#bdc1a3 solid 1px !important;
}
#ad1{
	margin-left:0;
}

#ad2{margin-left:40px;

}

#ad3 {
	position:absolute;
	bottom:81px;
	float:none;
	margin-left:40px;
}

}
 @media screen and (max-width: 360px) {
#header {
	width:100%;
	margin:0 auto 10px;
}
#mainimg {
	position:relative;
	width:100%;
	left:0;
	margin-bottom:10px;
}
#wrapper {
	width:100%;
	margin:auto;
	position:relative;
}
#container {
	width:98%;
	margin:5px 10px 5px 5px;
}
.kiso_contents_block {
	font-size:14px;
	line-height:150%;
	background:none;
	padding:8px;
	border:none;
	border:#CCC solid 1px;
	margin-bottom:20px;
	margin-bottom:20px;
}
.kiso_contents_block h3 {
	font-size:16px;
	padding:10px 0 10px 0;
	height:40px;
}
.kiso_contents_block h4 {
	height:40px;
	font-size:16px;
	margin-top:30px;
	margin-bottom:15px;
	border-bottom: 1px dotted;
}
.kiso_contents_block h5 {
	margin-top:20px;
	border-bottom:2px #F99 solid;
	width:100%;
	font-size:14px;
}
#footer {
	width:100%;
	position:relative;
	left:0px;
}
#footermain {
	width:100%;
	height:315px;
	margin:0 auto;
}
#copyright {
	width:99%;
	padding:5px 2px 2px 2px;
	height:34px;
	margin-bottom:0;
	font-size:10px;
	line-height:1.4;
}

#kiso_contents {
	width:100%;
	margin:auto;
}

#sidemenu {
	width:180px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
	bottom:-16px;
	left:-80px;
	margin-bottom:500px;
}
#sidemenu2 {
	width:180px;
	margin:50px auto;
	float:none;
	position:absolute;
	bottom:406px;
	left:70px;
}
#sidemenu li {
	border-bottom:#705d34 dashed 1px;
	display:block;
}
#sidemenu li a {
	display:block;
	padding:10px 5px 10px 20px;
	position:relative;
}
.no-border {
	border-bottom:none !important;
}
.border-solid {
	border-bottom:#bdc1a3 solid 1px !important;
}

#ad1, #ad2 {
	margin-left:0;
}
#ad3 {
	position:absolute;
	bottom:190px;
}
#myEle {
	position: fixed;
	margin: 10px auto;
	background-color: #FFFFFF;
}

}

a:active img {
	-ms-filter: "alpha( opacity=60 )";
	background: none !important;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.form_css{border: 3px #F6CEEC solid;
    border-radius: 20px;
    text-align: center;
    padding: 20px;
	margin:auto;}

details summary span {
    color: #999;
	font-weight:bold;
}
summary {
	display: block;
	outline: none;
	height:20px;
	font-size:16px;
	font-weight:bold;
	color:#999;
	margin:10px 0 10px 0;
	padding:2px 5px 2px 10px;
	border-bottom: 1px dotted;
	border-left:#F99 5px solid;
	font-family:"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
 
summary::-webkit-details-marker{
	display:none;
}
summary:before {/*矢印アイコンを付与*/
  display: inline-block;
  content: "›";
  color: #999;
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
  transition: all 300ms ease;
}
 

/*答え部分が開いている場合の処理*/
details[open] summary {
  transition: all 300ms ease;
}
details[open] p {
  animation: openDetail 400ms ease;
  background: #f9f9f9;
}
details[open] summary::before {
  transform: rotate(90deg);
}

/*details[open] .uranai_category{
	color:black ;	
}*/