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

/*********************
よくいただくご質問
**********************/
#que{
	margin-top:7rem;
}
#que h3{
	color:#EB0100;
	font-size:2.6rem;
	margin-top:1.5em;
	margin-bottom:0.8em;
}
#que dl{
	margin-bottom:3.5rem;
}
#que dl dt{
	font-size:2.2rem;
	padding:0.7em;
	background-color:#f1eee9;
	border-bottom:1px solid #d5d5d5;
	
}
#que h3 + dl dt{
	border-top:1px solid #EB0100;
}
#que dl.tool{
	border-top:1px solid #EB0100;
}
#que dl li{
	padding:1em;
	position:relative;
	border-bottom:1px solid #d5d5d5;
	cursor:pointer;

}
#que dl li:focus{
  border:solid 1px;
}
#que dl li .que{
	padding-left:2.8em;
	text-indent:-2.8em;
	padding-right:1.5em;
}
#que dl li .que span{
	color:#EB0100;
	display:inline-block;
	width:2.8em;
	text-indent:0px;
}
#que dl li .answer{
	display:none;
	transition-duration:0s;
	margin-top:1em;
}
#que dl li .answer{
	display:none;
	transition-duration:0s;
	margin-top:1em;
}
#que dl li .btn {
    width: 1.65em;
	height:1.65em;
    margin: 0 auto;
    text-align: center;
    font-size: 1.4rem;
    padding-top: 0.1rem;
    background-color: #e0e0e0;
    transition-duration: 0.3s;
    text-indent: -10000px;
    position: absolute;
    right: 1em;
    top: 1.2em;
    color: #2f2f2f;
}
#que dl li .btn:before, #que dl li .btn:after {
    position: absolute;
    top: 50%;
    left: 0.85em;
    margin-top: -0.1em;
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 1em;
    border-top: 0.2em solid #3c3c3c;
    transform: translateX(-50%);
    transition-duration: 0.3s;
}
#que dl li .btn.close:after {
    top: 50%;
    left: -0.05em;
    margin-top: -0.6em;
    transform: rotate(90deg);
}


#check{
	margin:5rem 0;
	text-align:center;
}
#check div{
	display:inline-block;
	position:relative;
	border-top:1px solid #d5ceca;
	border-bottom:1px solid #d5ceca;
	padding:1em 1em 1em 2em;
}
#check table td{
	font-size:1.4rem;
	color:#ff0909;
	position:relative;
	padding:0.3em 1em 0.3em 1.5em;
	text-align:left;
}
#check table td:before{
	position:absolute;
	width:1em;
	height:0.85em;
	content:"";
	left:0px;
	top:0.6em;
	background:url(../img/icon_check.gif) 0 0/contain no-repeat;
}
#check div .arrow{
	font-size:0px;
	position:absolute;
	width:100%;
	text-align:center;
	left:0px;
	bottom:-21px;
}

/*********************
カルビー・スナックスクール事務局からのお知らせ
**********************/
#news_common .announce{
    color:black;
}
#news_common p.announce > a{
    text-decoration: underline;
}

#news_common p.announce:nth-child(n+3){
  border-top: 1px solid #ccc9c9;
  padding: 1em 0 0 0;
  margin-top:1em;
}
/*********************
カルビー・スナックスクール事務局
**********************/
#office{
	background-color:#f1eee9;
	padding:2rem;
}
#office .ttl{
	font-size:2.2rem;
	text-align:center;
	padding:0.5em 0 0.5em 0;
}
#office .flex{
	justify-content:center;
}
#office .flex p {
	margin:0 1.5rem;
  text-align: center;
}
#office .flex p a{
	background-color:#FFF;
	font-size:4rem;
	line-height:1;
	padding:0.3em 0.3em 0.3em 1.5em;
	display:inline-block;
	position:relative;
}
#office .flex .tel{
	pointer-events:none;
}
#office .flex .tel a:before{
	content:"";
	position:absolute;
	left:0.4em;
	top:50%;
	background:url(../../top/img/icon_tel.png) 0 0/contain no-repeat;
	width:0.85em;
	height:0.875em;
	margin-top:-0.4375em;
}
#office .flex .fax{
	pointer-events:none;
}
#office .flex .fax a:before{
	content:"";
	position:absolute;
	left:0.4em;
	top:50%;
	background:url(../../top/img/icon_fax.png) 0 0/contain no-repeat;
	width:0.85em;
	height:0.875em;
	margin-top:-0.4375em;
}
#office .flex p .caption{
	font-size:1.4rem;
	margin-top:0.5em;
	display:block;
  text-align:center;
}



/*********************
いただいたお声
**********************/
#voice{
	margin-top:5rem;
}
#voice ul{
	border-top:1px solid #d5ceca;
}
#voice li{
	padding:1em 1em 1em 3.5em;
	border-bottom:1px solid #d5ceca;
	background:url(../img/icon_voice.gif) 1em 1em /1.6875em no-repeat;
}
/*********************
実施までの流れ
**********************/
#flow{
	margin-top:5rem;
	margin-bottom:5rem;
}
#flow ul{
	border-top:1px solid #f17700;
}
#flow ul li{
	border:1px solid #f17700;
	border-top:none;
	font-size:1.8rem;
	padding:1.2em;
	position:relative;
}
#flow ul li:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    bottom: -0.3em;
	margin-left:-0.15em;
    left:50%;
    width: 1em;
    height: 1em;
    border-top: 0.4em solid #ff0a0a;
    border-right: 0.4em solid #ff0a0a;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#flow ul li:last-child:after {
	display:none;
}
#flow ul li .ttl{
	display:inline-block;
	color:#FFF;
	background-color:#f17700;
	line-height:1;
	font-size:2rem;
	padding:0.4em 0.8em;
	margin-bottom:0.7em;
}
#flow ul.caption {
    border-top: none;
	margin-top:1.5em;
}
#flow ul.caption li {
    border: none;
    border-top: none;
    font-size: 1.4rem;
    padding: 0em;
	padding-left:1em;
	text-indent:-1em;
}
#flow ul.caption li:after{
	display:none;
}


/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1150px){
#office .flex p a {
    font-size: 3.36vw;
}	

#office .flex p .caption{
font-size: 1.3vw;
}
  
  
}





/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width:767px){
	
/*********************
よくいただくご質問
**********************/
#que{
	margin-top:5rem;
}
#que dl li .btn {
    right:0em;
}

/*********************
カルビー・スナックスクール事務局
**********************/
#office{
	padding-top:0.5em;
}
#office .ttl {
    font-size: 2.2rem;
    text-align: center;
    padding: 0.5em 0 0.5em 0;
}
#office .flex p {
    margin: 0 0rem;
}
#office .flex .tel{
	pointer-events:auto;
	margin-bottom:2rem;
}
#office .flex p a {
    font-size: 3.5rem;
}




#check div .arrow {
    bottom: -5vw;
}
#check div .arrow img{
	width:10%;
}
#check table td {
	display:block;
}


}