@charset "UTF-8";

/*=========================================
基本設定
想定端末　一般的なAndroid のportrait 横幅360
=========================================*/


figure#title{
padding-left: 20px;
}

figure#title img{
height: 40px;
}

article{
padding: 50px 0px;
}

article h1{
margin: 0px auto;
width: 300px;
padding: 20px 0px;
font-size: 2rem;
font-weight: 700;
text-align: center;
}

article section{
margin: 0px auto 30px;
width: 300px;
}

article section div{
display: flex;
}

article section p{
font-size: 1.6rem;
line-height: 1.5;
}



.toi{
background-color: #CCA533;
color: #FFFFFF;
min-height: 80px;
width: 300px;
align-items: center;
border-radius: 10px;
cursor: pointer;
}

.toi p{
width: 200px;
}

article aside.open,.close{
display: block;
width: 22px;
height: 22px;
margin-left: 10px;
background-color: #FFFFFF;
border-radius: 50%;
}


aside.open::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-right: solid 1px #707070;
	border-bottom: solid 1px #707070;
	transform: rotate(45deg);
	position: relative;
	top: 5px;
	left: 6px;
}

aside.close::before{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 1px #707070;
	border-left: solid 1px #707070;
	transform: rotate(45deg);
	position: relative;
	top: 8px;
	left: 6px;
}

.kotae{
width: 288px;
border: 1px #CCA533 solid;
border-top: none;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 20px 10px 0px 0px;
position: relative;
top: -10px;
background-color: #FFFFFF;
}

.hide{
display: none;
}


.dou img{
height: 40px;
padding: 0px 8px;
}

.dou p{
width: 230px;
margin: 0px;

}

.toi img{
height: 40px;
padding: 0px 10px;
}

/*=========================================
想定端末　iPhone12 のportrait 横幅390px
=========================================*/
@media screen and (min-width:390px){



}
/*iPhone12 のportrait 横幅390px　ここまで*/





/*
ここまでスマホ縦（portrait）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからスマホ横（landscape）
*/

/*=========================================
想定端末　一般的なAndroid のlandscape 横幅429以上
=========================================*/
@media screen and (min-width:429px){



}
/*一般的なAndroid のlandscape 横幅429以上　ここまで*/

/*=========================================
想定端末　iPhoneX,11pro のlandscape 横幅812以上　※カメラの出っ張りが左右にくる
=========================================*/
@media screen and (min-width:812px){





}
/*iPhoneX,11pro のlandscape 横幅812以上　※カメラの出っ張りが左右にくる　ここまで*/


/*
ここまでスマホ横（landscape）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからタブレット縦（portrait）
*/

/*=========================================
想定端末　iPad 9.7 のportrait 横幅768以上かつ高さ429以上
=========================================*/
@media screen and (min-width:768px) and (min-height:429px){

	
figure#title{
padding-left: 50px;
}
	
article h1{
width: 550px;
padding: 40px 0px;
font-size: 3rem;
}
	
	
article section{
width: 550px;
}
	
.toi{
width: 550px;
}

.toi p{
width: 370px;
}
	
article aside.open,.close{
width: 55px;
height: 55px;
background-color: #FFFFFF;
border-radius: 50%;
}

aside.open::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border-right: solid 3px #707070;
	border-bottom: solid 3px #707070;
	transform: rotate(45deg);
	position: relative;
	top: 15px;
	left: 17px;
}
	
aside.close::before{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border-top: solid 3px #707070;
	border-left: solid 3px #707070;
	transform: rotate(45deg);
	position: relative;
	top: 22px;
	left: 18px;
}
	

.kotae{
width: 548px;
padding: 20px 0px;
}
	

.dou p{
width: 400px;
margin: 0px;
}

.dou img{
padding: 0px 28px;
}

.toi img{
padding: 0px 30px;
}

	


}
/*iPad 9.7 のportrait 横幅768以上かつ高さ429以上 ここまで*/

/*=========================================
想定端末　
iPad pro 12.9 のportrait 横幅1024以上
(iPad 9.7 のlandscape 横幅1024以上)
=========================================*/
@media screen and (min-width:1024px){




}
/*iPad pro 12.9 のportrait 横幅1024以上 ここまで*/

/*
ここまでタブレット縦（portrait）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからタブレット横（landscape）
*/

/*=========================================
想定端末　
iPad 9.7 のlandscape 横幅1024以上
=========================================*/
@media screen and (min-width:1024px) and (orientation:landscape){






}
/*iPad 9.7 のlandscape 横幅1024以上　ここまで*/

/*
ここまでタブレット横（landscape）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここからPC ※マウスがある
*/

/*=========================================
想定端末　
PC　横幅1367以上 ※マウスがある
=========================================*/
@media screen and (min-width:1367px){

article{
padding-bottom: 200px;
}
	
figure#title{
padding-left: 100px;
}

	
	
article section{
margin: 0px auto 60px;
width: 780px;
}
	
.toi{
width: 780px;
}

.toi p{
width: 600px;
}

.kotae{
width: 778px;
}

	
.dou p{
width: 500px;
}
	

	
	
	
	
	
}
/*PC　横幅1367以上 ※マウスがある　ここまで*/

/*=========================================
想定端末　
PC　横幅1921以上 ※マウスがある
=========================================*/
@media screen and (min-width:1921px){
	
}