@charset "UTF-8";


body {
transition-property:width, height, left, top, bottom, right, margin, padding, font-size, margin-top, img;
transition-duration:0.5s;
padding: 0 0 0 0;

}

/************************************

faq

************************************/

.pattern_bg {
width: 100%;
height: auto;
padding: 0 0 40px 0;
margin: 0 0 0 0;
}


.faq_bg {
width: 90%;
height: auto;
margin: 0 auto;
background-color: #fff;
padding: 20px 0 20px 0;

}

.faq_section {
width: 100%;
max-width: 1120px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
background-color: #ffffff;
}

/*--------------------------------------

見出し PC
  
--------------------------------------*/

.faq_title {
width: 100%;
height: auto;
text-align: center;
margin: 30px 0 40px 0;
}

.faq_title img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}

.faq_title span {
color:#353535;
font-size: 1.5em;
font-weight: 600;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 0 0;
}

/*--------------------------------------

faq PC
  
--------------------------------------*/


#faq{
    margin:0 0 30px 0;
}

#faq h2{
    text-align: center;
    margin:0 0 10px 0;
}


#faq h2 span.bgLRextend::before{
    background:#353535;
}

.faq-bg{
    position: relative;
    height: 55vh;
    background:url("../img/pict_05.jpg") no-repeat center;
    background-size:cover;
    margin: 0 0 200px 25%;
	
}

.faq-bg::after{
    content:'';
    position: absolute;
    top:20%;
    left:-32%;
    width:100%;
    height:55vh;
    background:#f0e4cb;
    z-index: -1;
}

@media screen and (max-width:780px) {


/*--------------------------------------

section faq TB
  
--------------------------------------*/

.pattern_bg {
width: 100%;
height: auto;
padding: 0 0 40px 0;
margin: -30px 0 0 0;
}


.faq_bg {
width: 90%;
height: auto;
margin: 0 auto;
background-color: #fff;
padding: 20px 0 20px 0;

}

.faq_section {
width: 90%;
max-width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
background-color: #ffffff;
}

/*--------------------------------------

見出し TB
  
--------------------------------------*/


.faq_title {
width: 100%;
height: auto;
text-align: center;
margin: 30px 0 40px 0;
}

.faq_title img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}

.faq_title span {
color:#353535;
font-size: 1.5em;
font-weight: 600;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 0 0;
}


/*--------------------------------------

faq TB
  
--------------------------------------*/

.faq-bg,
.faq-bg::after{
    height:35vh;
}

.box p {
font-size: 1.2em;
line-height: 1.5;
}
}



@media screen and (max-width:599px) {

/*--------------------------------------

section faq SP
  
--------------------------------------*/

.pattern_bg {
width: 100%;
height: auto;
padding: 0 0 40px 0;
margin: -20px 0 0 0;
}


.faq_bg {
width: 100%;
height: auto;
margin: 0 auto;
background-color: #fff;
padding: 20px 0 20px 0;

}

.faq_section {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
background-color: #ffffff;
}

/*--------------------------------------

見出し SP
  
--------------------------------------*/


.faq_title {
width: 100%;
height: auto;
text-align: center;
margin: 30px 0 40px 0;
}

.faq_title img {
width: 100px;
height: auto;
display: block;
margin: 0 auto;
}

.faq_title span {
color:#353535;
font-size: 1.4em;
font-weight: 600;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 0 0;
}

/*--------------------------------------

faq SP
  
--------------------------------------*/

#faq{
    margin:0 0 40px 0;
}
    
#faq h2{
 margin: 0 0 50px 0;   
}
    
.faq-bg{
    margin:0 0 100px 25%;
}

.faq-bg,
.faq-bg::after{
    height:20vh;
} 
}

.faq_q {
	font-weight: bold;
	color:#ffffff;
	background-color:#009bdb;
	padding:3px 10px 5px 10px;
	border-radius:100%;
	}

.faq_a {
	font-weight: bold;
	color:#ffffff;
	background-color:#009bdb;
	padding:3px 10px 4px 11px;
	border-radius:100%;
	line-height:3.0;
	}

.box p {
font-size: 1.0em;
line-height: 1.5;
}

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

.accordion-area li{
    margin: 10px 0;
}

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

.title {
    position: relative;
    cursor: pointer;
    font-size:1.2em;
				line-height: 2.0;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

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

}

/*　closeというクラスがついたら形状変化　*/

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

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

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #fafafa;
  margin:0 3% 3% 3%;
    padding: 3%;
}


/*--------------------------------------

カラーをつけたい時に使う
  
--------------------------------------*/

.color_navy {
color:#009bdb;
}

.color_navy a {
color:#009bdb;
}

.color_navy a:hover {
text-decoration: underline;
}


/* ******************************
	可視範囲にスクロールした時のアニメーション
****************************** */


	
/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
	/*transition-delay:0.1s;*/
    }