@charset "utf-8";

/* -------------------------------
   BASE
------------------------------- */

body {
	-webkit-text-size-adjust: 100%;
}
#wrap {
	width:100%;
	min-width:320px;
	overflow:hidden;
}
.pc {
	display:none;
}
.spNL:before {
	content: "\A" ;
	white-space: pre ;
}
img {
	max-width:100%;
	width:auto;
	max-height:100%;
	height:auto;
}

.btn a{
	min-width:240px;
	padding:10px 20px;
}

/* -------------------------------
   header
------------------------------- */

.head{
	text-align:center;
	padding:10px 0 30px;
}

.head .logo{
	margin-bottom:20px;
}

.head .logo p{
	padding:5px 0px;
	font-size:10px;
	font-weight:bold;
}

/* -------------------------------
   footer
------------------------------- */

.footer{
	text-align:center;
	font-size:10px;
	padding:20px;
	border-top:solid 2px #EAEAEA;
}

.footer div{
	margin-bottom:10px;
}


/* -------------------------------
   home
------------------------------- */

#mainVisual{
	padding:20px 0 0;
}

#mainVisual dl{
	margin:10px 20px 20px;
}

#mainVisual dt{
	padding:5px;
	font-size:18px;
	margin-bottom:10px;
}

#mainVisual dd{
	font-size:18px;
}

.otherZadankai{
	margin-left:20px;
	margin-right:20px;
}

#opening{
	margin-top:40px;
	padding:0 20px;
}

#opening h2{
	font-size:20px;
	padding:20px 20px;
	margin:0 -20px 20px;
}

#opening > p{
	margin-bottom:20px;
}

#opening .index{
	margin:30px 0;
}

#opening .index dt,
#opening div.index h3{
	font-size:16px;
	padding:10px 30px;
	margin:-20px auto 0;
}

#opening .index dd,
#opening div.index ul li{
	border-bottom:dotted 1px #ccc;
	text-align:left;
}

#opening .index dd:last-child,
#opening div.index ul li:last-child{
	border:none;
}

#opening .index dd a,
#opening div.index ul li a{
	display:block;
	padding:15px 10px;
}

#opening .index dd a:before,
#opening div.index ul li a:before{
    display: inline-block;
	margin-right:10px;
    width: 8px;
    height: 8px; 
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    -webkit-transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    content: "";
}

#opening .introduce h3{
	font-size:16px;
}

#opening .introduce ul{
	margin:20px 10px 0;
	font-size:0;
}

#opening .introduce li{
	width:49%;
	margin:0 2% 20px 0;
}

#opening .introduce li:nth-child(2n){
	margin-right:0;
}

#opening .introduce ul li figure{
	padding:10px 0 0;
}

#opening .introduce ul li figure img{
	height:70px;
	width:auto;
}

.sec{
	padding:0 20px;
	margin-top:40px;
}

.secHead {
	margin-bottom:30px;
}

.secHead figure{
	text-align: center;
	margin-bottom:20px;
}

.secHead figure img{
	max-width:70%;
}

.secHead figure img:not(:last-child){
	margin-bottom:20px;
}

.sec .secTit{
	font-size:20px;
	padding:20px 20px;
	margin:0 -20px 20px;
}

.sec .subTit{
	font-size:18px;
	margin-bottom:20px;
	padding:20px 0;
}

.sec .titWrap figure{
	text-align:center;
}

.sec .titWrap figure img{
	max-width:70%;
}

.sec .secTopTxt{
	margin-bottom:20px;
}

.use{
	margin-top:30px;
}

.talk.noperson{
	margin-bottom:40px;
}

.talk li{
	margin-top:20px;
}

.talk li .comment{
	padding:20px;
}

.talk li .comment:after{
	left:70px;
}

.talk li .person{
	font-size:14px;
}

.talk li .person img{
	height:60px;
	width:auto;
}

.talk li .person .multiple:before{
	left:70px;
}

.note{
	margin-top:20px;
}

.note h3{
	padding:15px;
	font-size:16px;
	margin-bottom:20px;
}

.note .btn{
	margin-top:15px;
}

.note .showDesk section:not(:last-child){
	margin-bottom:30px;
}

.note .showDesk section h4{
	margin-bottom:10px;
}

.note .showDesk section h4 img{
	max-width:60%;
}

.note .showDesk section figure img{
	max-width:70%;
}

.recommendChair .chairContent{
	margin:30px 0;
}

.recommendChair .chairContent .txt{
	padding-bottom: 26px
}

.recommendChair .chairContent .txt:after{
	content:"";
	display: block;
	border-top:16px solid #CBD0D5;
	border-left:21px solid transparent;
	border-right:21px solid transparent;
	position: absolute;
	left:50%;
	bottom:0;
	margin-left:-21px;
}

.recommendChair .chairContent ul{
	text-align: center;
	display: flex;
	margin-top:10px;
}

.recommendChair .chairContent ul li{
	flex-grow: 1;
}


#gender #study{
	margin-top:30px;
}

#chair .talk .item{
	max-width:300px;
}

#chair .talk .item:before{
    display: block;
	position:absolute;
	left:50%;
	top:-40px;
	margin-left:-6px;
    width: 12px;
    height: 12px; 
    border-top: 5px solid #CBD0D5;
    border-right: 5px solid #CBD0D5;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    -webkit-transition: all 0.4s cubic-bezier(.17,.67,.54,.93);
    content: "";
}

#chair .note figure{
	max-width:259px;
	margin:0 auto 10px;
}

#hope .note figure{
	margin-bottom:20px;
}

#hope .note .detail .item li{
	font-size:14px;
	max-width:42%;
	text-align:center;
	display:inline-block;
}

#hope .note .detail .item li:last-child{
	float:right	;
}

#hope .note .detail .item li:first-child:before{
	right:-61px;
	top:61px;
}

#hope .note .detail .item li:first-child:after{
	right:-52px;
	top:52px;
}

#after{
	padding:20px 40px;
	margin:40px -20px 0;
}

#after h2{
	font-size:20px;
	margin-bottom:20px;
}

#after .afterTop{
	margin-bottom:20px;
}

#after .afterTop figure{
	margin-top:10px;
}

#after .afterTop figure img{
	max-width:48%;
}

#after .message h3{
	font-size:16px;
}