@charset "UTF-8";

#page_header{background-image:url("../img/header_back_pc.webp");}

.w90per{width: 90%;margin: 0 auto;}
.a_blue{display: inline-block;}
.mt100{margin-top: 100px;}
.flexbox-04{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content:flex-start;
  	flex-wrap: wrap;
	width: 91%;
	margin: 0 auto;
	gap: 3%;
	}

.flexbox-04:after{
  content:"";
  display: block;
  width:23%;
}
/* section_01 */


.mt-3per{margin-top: -3%;}

/* section_02 section_04 */
.section_02,.section_04{background-color: #f7f8f8;}
.interview-left{width: 48%;float: left;}
.interview-right{width: 48%;float: right;}
.title-box{position: relative;width: 100%;}
.left-top{position: absolute;width: 20px;}
.right-bottom{position: absolute;width: 20px;bottom:5%;right:0;}
.interview-right h2.interview-title{font-size: 1.6em;color:#0c68ab;padding:2em 2em 2em; }

.interview-ul {
	position:relative;
	display: flex;
	width:100%;
	top: 50px;
    left: 0%;
}
.interview-ul ul {
	width: 46%;
    position:relative;
    display: block;
    justify-content: flex-start;
    align-items: center;
	margin-bottom: 3%;
	margin-right: 2%;
	border-right: solid 1px #9fa0a0;
	padding-right: 2%;
}
.interview-ul ul.last{border-right: none;}
.interview-ul ul li{height: auto; line-height: 1.2em;    font-size:16px;
	display:block;
    padding: 0px 10px 0px;
	transition:all 0.3s;
	color:#231815;
	position: relative;margin-bottom: 2em;}
.interview-ul ul li h3{font-size: 1.4em;color: #0c68ab;padding-bottom: 0.4em;border-bottom: solid 1px #777777;margin-bottom: 0.4em;}
.interview-ul ul li p{padding-left: 1.6em;line-height: 1.6em;text-align: justify;}
.interview-ul ul li img{height: 200px;float: right;}

/* section_03 */
.section_03{}

/* よくある質問CSS */
.faq-item {
  margin-top: 20px;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #666666;
}

.faq-question__wrap {
  position: relative;
  padding: 15px 5px 15px 55px;
  cursor: pointer;
}

.minus-icon {
  position: absolute;
  content: "";
  width: 20px;
  height: 3px;
  background: #0d68a9;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.plus-icon {
  position: absolute;
  content: "";
  width: 20px;
  height: 3px;
  background: #0d68a9;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
}

.plus-icon.active {
  transform: translateY(-50%);
}

.faq-question__title {
  font-weight: bold;
  color: #000000;
  font-size: 1.2em;
	line-height: 1.2em;
  position: relative;
  padding-right: 5%;
}
.faq-question__title::before {
    position: absolute;
    color: #0d68a9;
    content: "Q.";
	font-size: 1.6em;
    top: 10px;
    left: -45px;
    transform: translateY(-50%);
  }

.faq-answer__wrap {
  padding: 10px 25px 10px 25px;
  transition: ease all 0.5s; /* 擬似要素のトランジションを追加 */
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.faq-answer__wrap.active {
  height: auto;
  padding: 10px 25px 10px 25px;
}
.faq-answer__wrap {
  opacity: 0;
  padding: 10px 25px 10px 25px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: ease all 0.7s; /* 擬似要素のトランジションを追加 */
}

.faq-answer__wrap.active {
  opacity: 1;
  padding: 0px 25px 15px 65px;
}

.faq-answer__title {
position: relative;
  font-weight: bold;
  color: #000000;
  font-size: 1.0em;
	text-align: justify;
}
.faq-answer__title::before {
    position: absolute;
    color: #d41819;
    content: "A.";
	font-size: 1.6em;
    top: 10px;
    left: -35px;
    transform: translateY(-50%);
  }






/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width:1000px) {
#page_header{background-image:url("../img/header_back_pc.webp");height: 300px;padding-top:  10%;}
.faq-item {
  margin-top: 20px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #666666;
}	
	}
/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width:640px) {
#page_header{background-image:url("../img/header_back_pc.webp");height: 150px;padding-top:  5%;}
.faq-question__wrap {
  position: relative;
  padding: 15px 35px 15px 55px;
  cursor: pointer;
}
.faq-item {
  margin-top: 20px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #666666;
}	
	
.box-item04{width: 48%;margin:1% 0 3%; }
.interview-left{width: 100%;float: none;}
.interview-right{width: 100%;float: none;}
.left-top{margin-top: 5%;}
.interview-right h2.interview-title{font-size: 1.2em;color:#0c68ab;padding:2em 2em 2em; }
.interview-ul {
	position:relative;
	display: block;
	width:100%;
	top: 50px;
    left: 0%;
}
.interview-ul ul {
	width: 100%;
    position:relative;
    display: block;
    justify-content: flex-start;
    align-items: center;
	margin-bottom: 3%;
	margin-right: 0%;
	border-right: none;
	padding-right: 0%;
}
.interview-ul ul li h3{font-size: 1.2em;color: #0c68ab;padding-bottom: 0.4em;border-bottom: solid 1px #777777;margin-bottom: 0.4em;}
.interview-ul ul li p{padding-left: 0em;line-height: 1.6em;text-align: justify;}
.interview-ul ul li img{height: 200px;float: none;}
.img_center{text-align-last: center;}
}