@charset "UTF-8";
/* CSS Document */
a{text-decoration: none;}
a:hover{text-decoration: underline;}
a:link{color: #CBF4F6;}
a:visited{color: #CBF4F6;}
html,body{height:100vh;}
html{
	background-color: #19191A;
	color:#ffffff;}
.prof1,.prof2,.topic1,.topic2,.topic3,.accordion-open,.subt,.awd{
	font-family: ten-mincho,serif;
	font-weight: 400;
	font-style: normal;
}

.prof1,.prof2,.topic1,.topic2,.topic3,.accordion-open{
	padding: 6px 0px;
	border-bottom: 1px solid #9A9A9A;
	vertical-align: text-top;
}

.awd{
	color: darkgoldenrod;
}

.subt{
	text-align: center;
	font-size:12px;
}

#profile,#topic{
	text-align: center;
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;}
#topic{
	margin-bottom: 10px;
}
#container {
	max-width: 760px;
	margin: 0 auto;
}
#top-bg	{
	width: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("top1.jpg");
	height: 100vh;}
#top-block{
	margin: auto auto;
	padding: 3vh 0px 0px 15px;
	}
#top-menu{
	margin: 0px 0px 0px 0px;
}
.footer{
	margin: 20px auto 30px auto;
	padding-top: 10px;
	font-size:10px;
	color: #999999;
	border-top:4px solid #AAA;
}



/* phone */
@media screen and (max-width: 428px){
img{
	max-width:700px;}
#top-menu img{
	max-width: 47px;}
#top-menu img{
	margin: 0px 0px 4px 0px;}
#top-pro img{
	max-width: 72px;}
#top-pro img{
	margin: 0px 0px 0px 0px;}
#profile,#topic{
	font-size: 30px;height: 40px;
	border-bottom: 1px solid #FFFFFF;
	width: 95%;}
.prof1,.topic1{
	width:10%}
.prof1,.prof2,.topic1,.topic2,.topic3{
	font-size:12px;}
.topic2{width: 85%;}
.awd{
	font-size: 8px;}

label{
display:block;
float:left;
width:95%;
}
.pro-t{
	width: 95%;}
.subt{
	text-align: center;
	font-size:12px;}
}

/* PC */
@media screen and (min-width: 750px){
img{
	max-width:350px;}
#top-block{
	width:80%;}
#top-menu img{
	max-width: 84px;}
#top-menu img{
	margin: 0px 0px 17px 0px;}
#top-pro img{
	max-width: 135px;}
#top-pro img{
	margin: 15px 0px 0px 0px;}
#profile,#topic{
	font-size: 30px;height: 40px;
	border-bottom: 1px solid #FFFFFF;}
.prof1,.topic1{
	width: 8%;}
.topic2{width: 77%;}
.topic3{
	text-align: right;
	width: :15%;}
.awd{
	font-size:12px;}
.subt{
	text-align: center;
	font-size:15px;}


}
/*------------------------------

ここからアコーディオンのCSS

------------------------------*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

.accordion {
	width: 100％;
	max-width: 100%;
}

/* チェックボックスを非表示にする */
.accordion-hidden{
	display: none;
}

/* Question部分 */
.accordion-open {
	display: block;
	padding: 20px 0px;
	background: #;
	cursor: pointer;
	margin: 5px 0;
	text-align: center;
	letter-spacing: 2px;
	border: 1px solid #AAAAAA;
}

.accordion-open:hover{
	background: #656565;
}

/* Answer部分は最初は表示しない */
.accordion-close {
	display: block;
	height: 0;
	overflow: hidden;
	padding: 0;
	opacity: 0;
	transition: 1s;/* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったらAnswer部分を表示 */
.accordion-hidden:checked + .accordion-open + .accordion-close {
	height: auto;
	opacity: 1;
	padding: 10px 0px;
}