@charset "UTF-8";
/******************
	CSS Document 
	top用css
*******************/
html { font-size: 62.5%; }
.a{
	width: 80px;
	height: 80px;
	background-color: #550001;
	transition-duration : 1s;
	transition-timing-function : linear;
}
.a:hover{
	width: 0px;
	height: 0px;
}
h2{
	font-weight: 600;
}
/***************
	#top-img
****************/

/*トップ画像
#top-img{
	width: 100%;
	background-image: url("../image/013.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 360px;
}
#top-img img{
	
}
*/
.top-text-area{
	position: relative;
}
.top-text{
	
}
/*****************
	fade in アニメーション
*****************/
.fade-box{
	width: 100%;
	height: 560px;
	overflow: hidden;
	position: relative;
}
.fade-in{
	z-index: 10;
	opacity: 0;
	width: 100%;
	height: 640px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 30s 0s infinite;
	animation: anime 30s 0s infinite;
	background-image: url("../image/g03.jpg");
}
.fade-in:nth-of-type(2){
	-webkit-animation-delay:6s;
	animation-delay: 6s;
	background-image: url("../image/g04.jpg");
}
.fade-in:nth-of-type(3){
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
	background-image: url("https://manabell.biz/wp/wp-content/uploads/2025/03/DSC04127-scaled.jpg");
}
.fade-in:nth-of-type(4){
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
	background-image: url("../image/g06.jpg");
}
.fade-in:nth-of-type(5){
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
	background-image: url("../image/g01.jpg");
}

@keyframes anime{
	0%{
		opacity: 0;
	}
	8%{
		opacity: 1;
	}
	17%{
		opacity: 1;
	}
	25%{
		opacity: 0;
		transform: scale(1.1);
		z-index: 9;
	}
	100%{opacity: 0}
}
/***************
.about-article
****************/
#about-box{
	background-image:url("../image/background.jpg");
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: -2;
}
#about-box::before{
	background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
	z-index: -1;
}
.about-article{
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #ffffff;
	padding-top: 128px;
	padding-bottom: 128px;
}
.about-article h2{
	font-size: 3.2rem;
	font-weight: 600;
}
.about-article p{
	padding: 16px;
	line-height: 3.2rem;
	font-size: 1.8rem;
}
.about-article p span{
	position: relative;
}
.about-article p span::after{
	content: "";
	position: absolute;
	height: 8px;
	bottom: -3px;
	left: 0;
	width: 100%;
	background-color:rgba(218,43,46,0.73);
	z-index: -1;
}
/*****************
	#News-box
*****************/
#news-box{
	background-color: #f1f1f1;
	width: 100%;
	margin: 0 auto;
	padding: 24px 16px 56px;
}
.news {
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
}
.news h2{
	text-align: center;
}
/*****************
	information
*******************/
#information img{
	width: 100%; 
}
.slide a{
	margin: 16px
}
#information p{
	font-size: 1.8rem;
	line-height: 2rem;
	padding: 1.6rem;
}
#information ul {
   margin:0;
   padding:0;
   list-style:none;
}

/*#information li {
   padding:15px 0 15px 7em;
   text-indent: -7em;
   border-bottom:1px solid #ddd;
}
*/
#information .info li{
	font-size: 1.6rem;
	font-weight: 600;
}
/*#information li span {
   display:inline-block;
   width:7em;
   text-indent:0;
   color: #708f9c;
	font-weight: 600;
}

#information li a {
   text-decoration:none;
   color:#000;
}*/
/******************
	お問い合せ
********************/
.tel-text{
	background-color: #C70F00;
	color: #f1f1f1;
	padding: 16px 24px;
	display: inline-block;
	margin: 0;
}
.tel{
	display: inline-block;
	padding: 16px 24px;
	border-bottom: 3px solid #C70F00;
	margin: 0;
	font-size: 2.1rem;
	font-weight: 500;
}
.mail-text{
	background-color: #002948;
	color: #f1f1f1;
	padding: 16px 24px;
	display: inline-block;
	margin: 0;
}
.mail{
	display: inline-block;
	padding: 16px 24px;
	border-bottom: 3px solid #002948;
	margin: 0;
	font-size: 2.1rem;
	font-weight: 500;
	color: #012936;
}


/*****************
	ピックアップ
*****************/
.pick-article{
	background-color: #f1f1f1;
	width: 100%;
}
#pick-box{
	width: 100%;
	margin: 0 auto;
	text-align: center;
	max-width: 960px;
	padding-top: 32px;
	padding-bottom: 48px;
}
#pick-box table{
	margin-top: 40px;
	margin-bottom: 64px;
}
#pick-box tbody{
	border: 2px solid #DBDADA;
	width: 100%;
	max-width: 960px;
	display: block;
	margin: 0 auto;
}
#pick-box tbody tr{
	border-bottom: 1px solid #DBDADA;
	padding: 24px;
}
#pick-box tbody tr th{
	border-right: 1px solid #DBDADA;
	padding: 24px;
	font-size: 16px;
	font-weight: 600;
}
#pick-box tbody tr td{
	border-right: 1px solid #DBDADA;
	padding: 24px;
	font-size: 32px;
	font-weight: 600;
}
.pick{
	padding: 24px 16px;
}
.pick h3{
	font-weight: 600;
	font-size: 2.1rem;
	color: #0D2752;
	}
.pick p{
	text-align: left;
	padding-left:8px;
	line-height: 2.4rem;
}
.pick img{
	display: block;
	margin: 0 auto;
}
.btn-description{
	margin-top: 14px;
	display: inline-block;
  	padding: 0.5em 1em;
  	text-decoration: none;
	border-left: 4px solid #ff7c5c;
	color: #ff7c5c;
	font-weight: 600;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-description:active{
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
 	transform: translateY(2px);
}
/****************
	ブログ
*****************/
.blog-area{
		width: 100%;
		margin: 0 auto;
		max-width: 960px;
		padding: 16px;
		padding-top: 64px;
		padding-bottom: 64px;
	}
.blog-area h2{
	text-align: center;
}
.post-meta{
	padding-top: 12px;
}
.post-date{
	font-weight: 600;
}
.blog_tittle{
	font-weight: 600;
	font-size: 2.1rem;
	color: #0D2752;
}
.blog-contents{
    padding-bottom:32px;
	}
.blog-img a img{
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*よくある質問*/
/* FAQセクション全体のスタイル */
.faq-section {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    color: #333;
}

/* タイトルの装飾（サイトの他セクションと統一） */
.faq-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    color: #2c3e50;
    position: relative;
    padding-bottom: 15px;
}

.faq-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #007bff; /* マナベル塾のアクセントブルー */
}

.faq-container {
    border-top: 1px solid #eee;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-item details {
    padding: 20px 0;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    outline: none;
    padding-right: 30px;
    position: relative;
}

/* デフォルトの矢印を消す */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* 独自のプラス/マイナスアイコン */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 5px;
    font-size: 24px;
    color: #007bff;
    transition: transform 0.3s ease;
}

.faq-item details[open] summary::after {
    content: '−';
    transform: rotate(180deg);
}

/* 回答の装飾 */
.faq-answer {
    margin-top: 15px;
    line-height: 1.8;
    color: #555;
    padding-left: 25px;
    border-left: 3px solid #007bff;
}

.faq-q-prefix {
    color: #007bff;
    margin-right: 15px;
    font-weight: 900;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .faq-title { font-size: 24px; }
    .faq-item summary { font-size: 16px; }
}
@media screen and (min-width:769px){
	#top-img{
/*	background-image: url("../image/013-1.jpg");*/
	margin-top: 0;
	height: 640px;
}
	.pick{
		float: left;
		width: 33.3333%;
		padding: 24px 16px;
	}
	.pick-box::after{
		clear: both;
		content: "";
		display: block;
	}
	
	.garrely-box{
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.garrely-img{
		float: left;
		width: 25%;
		height: 100%;
		overflow: hidden;
	}
	.garrely-img img{
		-moz-transition: -moz-transform 0.5s linear;
		-webkit-transition: -webkit-transform 0.5s linear;
		-o-transition: -o-transform 0.5s linear;
		-ms-transition: -ms-transform 0.5s linear;
		transition: transform 0.5s linear;
	}
	.garrely-img img:hover{
		-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	}
	.garrely-box::after{
		clear: both;
		content: "";
		display: block;
	}
	/*****************
		ブログ
	*****************/
	
	
	.blog-contents{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.blog-box{
		padding: 16px;
	}
}