@charset "UTF-8";
/*sp（なくても良い）*/
@media screen and (max-width: 480px) {}
/*tablet 768px以下*/
@media screen and (max-width: 767px) {}
/*pc 1000px以下*/
@media screen and (max-width: 1000px) {}


.fv-contents{
	position: relative;
	background: url("../img/bg/fv_bg.webp");
	background-size: cover;
	height: 674px;
	padding-top: 25px;
}
.fv-title{
	width: 183px;
	margin: 0px auto 30px; 
}
.fv-title img{
	filter: invert(15%) sepia(6%) saturate(16%) hue-rotate(341deg) brightness(101%) contrast(87%);
}
.fv-catch-box{
	position: relative;
	z-index: 2;
	width: 90%;
	margin: 0px auto; 
}

#fio001{
	position: relative;
	background-color: #E0E0E0;
}
#fio002{
	position: relative;
	z-index: 3;
	background-color: #B6CCE5;
}
#fio002::before{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	display: block;
	width: 100%;
	height: 163px;
	background: url("../img/deco.png");
	background-size: cover;
}
.margin-contents{
	margin: 0px auto;
	padding: 35px 30px;
}
#fio002 .margin-contents{
	position: relative;
	z-index: 2;
	padding: 35px 30px 80px;
}
.deco001{
	position: absolute;
	width: 148px;
	top: -80px;
	right: -80px;
}

.btn-box{
	position: relative;
	display: block;
	width: 100%;
	padding: 9px;
	overflow: hidden;
	background-image: linear-gradient(90deg, #3b5e91, #5b88cb);
}
.btn-box::before{
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: 1;

	/* 中央から縮んだ状態 */
	transform: scaleX(0);
	transform-origin: center;
	opacity: 0;
	filter: blur(8px);

	transition: 
		transform 0.6s cubic-bezier(.22,.61,.36,1),
		opacity 0.4s ease,
		filter 0.6s ease;
}
.btn-box:hover{
	opacity: 1;
}
.btn-box:hover::before{
	transform: scaleX(1.2);
	opacity: 1;
	filter: blur(0px);
}
.btn-box .btn-text{
	position: relative;
	z-index: 2;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff;
	transition: color 0.4s ease;
}
.btn-box .btn-icon{
	position: absolute;
	right: 25px;
	width: 23px;
	top: 15px;
	z-index: 2;
}
.btn-box .btn-icon img{
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(104%) contrast(102%);
}
/* ホバー時：文字と矢印を青に */
.btn-box:hover .btn-text{
	color: #3b5e91;
}

.btn-box:hover .btn-icon img{
	filter: invert(35%) sepia(9%) saturate(2964%) hue-rotate(177deg) brightness(95%) contrast(89%);
}

.item-box002{
	margin-top: 45px;
}
.item-box003{
	margin-top: 25px;
}
.item-box004{
	position: relative;
	margin-top: 28px;
}
.item-box005{
	position: relative;
	margin-top: 33px;
	margin-bottom: 53px;
}

.deco002{
	position: absolute;
	width: 146px;
	bottom: -60px;
	left: -90px;
}


.accordion-wrapper .js-details{
	margin-top: 30px;
}
summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: block;
  /* Safariで表示されるデフォルトの三角形アイコンを非表示にします */
  &::-webkit-details-marker {
    display: none;
  }
	background-image: linear-gradient(90deg, #3b5e91, #5b88cb);
		border-radius: 2px;
}

.summary_inner {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
	font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.icon {
  position: relative;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transition: transform 0.4s;
}
/* 横線（常に表示） */
.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

/* 縦線（＋の縦棒） */
.icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 16px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* 開いたとき（－にする） */
details.is-opened .icon::after {
  opacity: 0; /* 縦棒を消す */
}

/* is-openedクラスが付与されたときのスタイル */
details.is-opened .icon {
  transform: rotate(180deg);
}

/* --------アコーディオンの中身のスタイル-------- */
.content {
  overflow: hidden;
  /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
}

.content_inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
		border: 1px solid #707070;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 23px;
}
.content_inner.last{
	margin-bottom: 0px;
}

.content_inner p{
	font-size: 1.5rem;
  font-weight: 400;
  color: #333333;
}

.text-note{
	font-size: 1.5rem;
  font-weight: 400;
  color: #333333;
	margin-top: 20px;
}

.deco003{
	position: absolute;
	width: 72px;
	top: 200px;
	left: -35px;
}
.deco004{
	position: absolute;
	width: 39px;
	bottom: -45px;
	left: 0px;
}

#fio003 {
	position: relative;
	background-color: #fff;
}

.deco005{
	position: absolute;
	z-index: 3;
	width: 95px;
	top: -45px;
	left: 10px;
}

#fio003 .headtext{
	font-size: 1.6rem;
  font-weight: 600;
  color: #333333;
	text-align: center;
	margin: 0px 0px 25px;
}
.qa-box li{
	margin-bottom: 25px;
}
.qa-box li:last-child{
	margin-bottom: 0px;
}
.qa-box p{
	font-size: 1.5rem;
  font-weight: 400;
  color: #333333;
	text-indent: -2.6rem;
  padding-left: 2.6rem;
}
.qa-box span{
	margin-right: 8px;
	font-size: 1.8rem;
  font-weight: 600;
  color: #333333;
}
.qa-box .question{
	margin-bottom: 10px;
}

#fio004{
	position: relative;
	background-color: #E0E0E0;
}
#fio004 a, #fio004 p{
	font-size: 1.2rem;
  font-weight: 600;
  color: #333333;
}
#fio004 a{
	display: block;
	width: 100%;
	margin-bottom: 8px;
}
#fio004 a.last{
	margin-bottom: 15px;
}


@media screen and (max-width: 500px) {
	.fv-contents{
		padding-top: 95px;
		height: 760px;
	}
	.fv-catch-box{
		    width: 80%;
	}
	.fv-title{
		display: none;
	}
}
@media screen and (max-width: 450px) {
	.fv-catch-box{
		    width: 100%;
	}
}
@media screen and (max-width: 400px) {
		.fv-contents{
		height: 700px;
	}
}