@charset "UTF-8";



body, html{
	margin: 0;
	padding: 0;

}

body{
	font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
	
	background-image: url("../RED.png"), url("../BLUE.png"), url("../YELLOW.png"), url("../PINK.png");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: 0% 35%, 100% 55%, 0% 75%,100% 90%;
	background-size: 40%, 40%,40%,40%;
}


/*===========FAQ============*/

.logo{
	margin-top: 3%;
	margin-left: 5%;
	width: 10vw;
}

.yokuaru{
	text-align: center;
	font-size: 1.5vw;
	color: #48483A;
	margin-top: 5%;
	margin-bottom: 2%;
}
.image-title05{
	width: 10vw;
}
/*アコーディオン全体*/
.faq-area{
	list-style: none;
    width: 70%;
    max-width: 2000px;
   margin:0 auto;
}

.faq-area li{
	float: none;
    margin: 15px 0;
	background: #F2F2F2;
}

.faq-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1.5vw;
    font-weight: normal;
	color: #48483A;
   padding: 1% 2% 1% 2%;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    right: 10%;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 10%;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}

.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #ffffff;
  margin:0;
    padding: 1% 2% 1% 2%;
	font-size: 1.5vw;
	color: #48483A;
}

.faq{
	margin-bottom: 5%;
}

.contact{
	text-align: center;
	margin: 5%;
}

.contactbutton{
	margin:3%; 
	width: 35vw;
}
/*===========フッター============*/

.footer{
	font-family: katarine-web, sans-serif;
font-weight: 400;
font-style: normal;
}



/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #FFEB3E;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}



@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
body, html{
	margin: 0;
	padding: 0;

}

body{
	font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 400;
    font-style: normal;
	
	background-image: url("../RED.png"), url("../BLUE.png"), url("../YELLOW.png"), url("../PINK.png");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: 0% 35%, 100% 55%, 0% 75%,100% 90%;
	background-size: 40%, 40%,40%,40%;
}


/*===========FAQ============*/

.logo{
	margin-top: 3%;
	margin-left: 5%;
	width: 20vw;
}

.yokuaru{
	text-align: center;
	font-size: 2vw;
	color: #48483A;
	margin-top: 5%;
	margin-bottom: 2%;
}

.image-title05{
	width: 10vw;
}

/*アコーディオン全体*/
.faq-area{
	list-style: none;
    width: 70%;
    max-width: 2000px;
   margin:0 auto;
}

.faq-area li{
	float: none;
    margin: 15px 0;
	background: #F2F2F2;
}

.faq-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:2.5vw;
    font-weight: normal;
	color: #48483A;
   padding: 1% 2% 1% 2%;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    right: 5%;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    right: 5%;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}

.title.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #ffffff;
  margin:0;
    padding: 1% 2% 1% 2%;
	font-size: 2.5vw;
	color: #48483A;
}

.faq{
	margin-bottom: 5%;
}

.contact{
	text-align: center;
	margin: 5%;
	
}

.contactbutton{
	text-align: center;
	margin:3%; 
	width: 70vw;
}	
	
}