@charset "UTF-8";


/* # =================================================================
   # 共通タイトル
   # ================================================================= */
.main-title{
	font-size:30px;
	font-weight:700;
	color:var(--color-blue);
	line-height:1.2em;
	text-align:center;
	text-transform: capitalize;
	margin-bottom:50px;
}

.title-no{
	font-size:120px;
	line-height:.6;
	font-weight:700;
	color:var(--color-white);
	padding-bottom:30px;
}

.title-txt{
	font-size:30px;
	line-height:1.5em;
	font-weight:700;
	color:var(--color-white);
}

.title-txt span{
	display:block;
	font-size:20px;
}


.txt-c-blue{
color:var(--color-blue);
}

.txt-c-bk{
	color:var(--color-bk);
}

.txt-c-wh{
	color:var(--color-white);
}

.txt-c-base{
	color:var(--color-base);
}

.txt-bold{
	font-weight:700;
}

.txt-box{
	width:100%;
	line-height:2rem;
	text-align:left;
}

.catch-txt{
	font-size:25px;
	line-height:1.5em;
	font-weight:700;
}

.catch-txt span{
	display:block;
	color:var(--color-blue);
	padding-top:15px;
}

.sub-title{
	font-size:20px;
	line-height:1.5em;
	font-weight:700;
	text-align:left;
	position: relative;
	padding-left: 12px;
}
.sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
}


@media screen and (max-width:599px){
.main-title span{font-size:28px;}
.title-no{font-size:80px;}
.title-txt{font-size:25px;}
.title-txt span{font-size:16px;}
.catch-txt{font-size:20px;}
}


/* # =================================================================
   # 共通背景
   # ================================================================= */

.bg-gray{background-color:var(--color-gray5);}
.bg-blue{background-color:var(--color-blue);}

/* # =================================================================
   # タイトルbg 共通
   # ================================================================= */

.title-top-bg{
	background-repeat: no-repeat;
	background-size: cover;
	padding:150px 0
}

.title-top-bg-w{
	background-repeat: no-repeat;
	background-size: cover;
	padding:55vw 0 0 0
}

@media screen and (max-width:599px){
	.title-top-bg{padding:80px 0;}
}

/* # =================================================================
   # 共通画像
   # ================================================================= */
.img-box img{width:100%;}


/* # =================================================================
   # ファーストビュー
   # ================================================================= */

.fv-area {
	position: relative;
	width:100%;
	overflow:hidden;
}


.fv-bg{
	position:absolute;
	top:0;
	background-image: url(../img/nayami_bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
	height:45%;
	z-index:-1;
}

.head-logo{
	width:90%;
	max-width:1400px;
	padding:30px;
	text-align:left;
	position:absolute;
	top:0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}	

.head-logo img {
	width: 150px;
}

.fv-box {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	padding:100px 0 50px 0;
}

.fv-title{text-align:center;margin-bottom:30px;}
.fv-title img{width:60%;max-width:1000px;}

.fv-img-btm{
	text-align:center;
}
.fv-img-btm img{width: 90%;max-width:1200px;}

.fv-box .btn-box{width:450px;margin-top:30px;}


@media screen and (max-width: 768px) {
	.fv-title img{width:80%;}
	.fv-bg{height:40%;}
	.fv-img-btm{padding:0 0 0 0;}
}


@media screen and (max-width: 599px) {
	.head-logo{width:95%;padding:20px 0;}	
	.head-logo img {width: 100px;}
	.fv-title img{width:90%;}
	.fv-box .btn-box{width:90%;}
	.fv-img-btm img{width: 80%;}
}



/* # =================================================================
   # nayami
   # ================================================================= */

.nayami-top{
	background-image: url(../img/nayami_bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


#nayami .flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	list-style-type: none;
}

#nayami .gap1{row-gap:1em;}

#nayami .flex li {
  position: relative;
  font-size:18px;
  font-weight:800;
  color:var(--color-bk);
  text-align:left;
  line-height: 1.5em;
  width:49%;
  background-color:var(--color-white);
  padding:15px 20px 15px 50px;
  border:solid 1px #e6f0f1;
  border-radius:5em;
}


#nayami .flex li::before,
#nayami .flex li::after {
    position: absolute;
    top: 50%;
    height: 1em;
    content: '';
}
#nayami .flex li::before {
    left: 15px;
    transform: translateY(-50%);
    width: 1em;
    border: 1px solid var(--color-blue);
}
#nayami .flex li::after {
    left: 1.2em;
    transform: translateY(-75%) rotate(45deg);
    width: 0.5em;
    border-bottom: 3px solid var(--color-blue);
    border-right: 3px solid var(--color-blue);
}

#nayami .flex-item{
	width:48.5%;
	color:var(--color-white);
	background-color:var(--color-green);
	border-radius:15px;
	text-align:center;
	display: flex;
	flex-direction: column;
}

#nayami .imgbox{margin-top: 40px;}
#nayami .imgbox img{width:50%;}

#nayami .img-box1 img{width:80%;}


@media screen and (max-width:900px){
	#nayami .flex li {width:100%;}
	#nayami .gap1{row-gap:10px;}
	#nayami .imgbox img{width:80%;}
	#nayami .img-box1 img{width:100%;}
}


/* # =================================================================
   # project
   # ================================================================= */

#project .title-top{
	background-image: url(../img/1_bg.webp);
	background-position: bottom;
	position: relative;
}

#project .title-top2{
	background-image: url(../img/1_bg2.webp);
	background-position: top;
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top:150px;
}

#project .title-no-w{
	position: absolute;
	bottom:0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size:120px;
	line-height:.6;
	font-weight:700;
	color:var(--color-white);
}

#project .catch-box{
	font-size:35px;
	line-height:1.5em;
	font-weight:700;
	text-align:center;
}

#project .txt-box span{
	color:var(--color-blue);
	font-weight:700;
}

#project .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}

#project .flex-row{row-gap:3em;}

#project .flex-item{width:48%;}

#project .flex-item-sub1{
	width:100px;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color:var(--color-bk);
	border-radius:1em 0 0 1em;
	color:var(--color-white);
	font-size:12px;
	font-weight:700;
	padding:10px;
}
#project .flex-item-sub2{
	flex:1;
	background-color:var(--color-gray5);
	border-radius:0 1em 1em 0;
	padding:10px;
	font-size:14px;
	font-weight:700;
	text-align:left;
}

#project .flex-item-img{
	margin-bottom:15px;
}

#project .flex-item-img img{
	width:100%;
}

#project .flex-txt-box{padding:0 1em;}

#project .flex-item-subt{
	display: flex;
	align-items: center;
	font-size:12px;
	font-weight:700;
	text-align:left;
	margin:20px 0 5px 0;
}

#project .flex-item-subt:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: var(--color-bk);
}
#project .flex-item-subt:after {
	margin-left: 1rem;
}


#project .flex-item-txt{
	font-size:14px;
	line-height:1.5em;
	text-align:left;
}

#project .flex-item-txt ul{list-style:decimal;padding-left:1.5em;}


#project .img-box1 img{width:100%;}
#project .img-box2 img{width:50%;}

.project-ul{
	list-style: none;
}

.project-ul li{
	text-align:left;
	padding:5px 0;
	border-top:solid 1px var(--color-gray4);
}

.project-ul li:first-child{
	border: none;
	padding-top:0;
}

.project-content{
	display:block;
	line-height:180%;
	text-align:left;
	margin-left:150px;
}

.project-ul li p{font-weight:Bold;}

.project-name{float:left;font-weight:Bold;line-height:180%;}




@media screen and (max-width:768px){
	#project .title-top2{padding-top:100px;}
	#project .flex-item{width:100%;}
	#project .img-box1 img{width:70%;}
	#project .img-box2 img{width:85%;}
	.project-name{float:none;display:block;padding-bottom:5px;}
	.project-content{margin-left:0;}
}



/* # =================================================================
   # about
   # ================================================================= */
#about .title-top{
	background-image: url(../img/2_bg.webp);
	background-position: bottom;
	position: relative;
}

#about .title-no-w{
	position: absolute;
	bottom:0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size:120px;
	line-height:.6;
	font-weight:700;
	color:var(--color-white);
}

#about .catch-box{
	font-size:35px;
	line-height:1.5em;
	font-weight:700;
	text-align:center;
}

#about .txt-box span{
	color:var(--color-blue);
	font-weight:700;
}

#about .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}

#about .flex-item{
	width:49%;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color:var(--color-gray5);
	border-radius:1em;
	text-align:center;
	padding:1em;
}

#about .flex-item-txt{
	color:var(--color-bk);
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
}

#about .flex-item-txt span{
	color:var(--color-blue);
}

#about .img-box1 img{width:450px;}
#about .img-box2 img{width:450px;}
#about .img-box3 img{width:100%;}

@media screen and (max-width:768px){
	#about .flex-item{width:100%;justify-content: start;text-align:left;}
}

@media screen and (max-width:768px){
	#about .img-box1 img{width:80%;}
	#about .img-box2 img{width:70%;}
}

/* # =================================================================
   # program
   # ================================================================= */
#program .title-top{
	background-image: url(../img/3_bg.webp);
	position: relative;
}

#program .title-no-w{
	position: absolute;
	bottom:0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size:120px;
	line-height:.6;
	font-weight:700;
	color:var(--color-gray5);
}

#program .main-title span{
	display:block;
	font-size:18px;
}

#program .txt-box-bg{
	background-color:var(--color-white);
	border-radius:1em;
	padding:1.5em;
}

#program .txt-box{
	font-size:25px;
	line-height:1.5em;
	font-weight:700;
	text-align:center;
}

#program .txt-box span{
	color:var(--color-blue);
}

#program .txt-box img{width:100%; padding:30px 0}


#program .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1.5em;
}

#program .flex_last::after {
	display: block;
	content:"";
	width:32%;
}

#program .flex-item{width:32%;background-color:var(--color-white);border-radius:1em;}

#program .flex-item-img{position:relative;}
#program .flex-item-img img{
	width:100%;
	border-radius:1em 1em 0 0;
}

#program .flex-item-cat{
	position:absolute;
	bottom:0;
	width:150px;
	background-color:var(--color-blue);
	font-size:12px;
	color:var(--color-white);
	text-align:center;
	padding:3px 0;
}

#program .flex-txt-box{padding:1.5em;}

#program .flex-item-title{
	font-size:20px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	margin-bottom:10px;
}
#program .flex-item-txt{
	font-size:14px;
	text-align:left;
	line-height:1.5em;
}

#program .flex-item-subt{
	display: flex;
	align-items: center;
	font-size:10px;
	font-weight:700;
	text-align:left;
	margin:20px 0 5px 0;
}

#program .flex-item-subt:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: var(--color-bk);
}
#program .flex-item-subt:after {
	margin-left: 1rem;
}



/*-------スマホ表示-------------*/

@media screen and (max-width:768px){
	#program .flex_last::after {display: block;content:"";width:48%;}
	#program .flex-item{width:48%;}
}

@media screen and (max-width:599px){
	#program .title-no-w{font-size:80px;}
	#program .flex{row-gap:1em;}
	#program .flex-txt-box{padding:1em;}
	#program .flex-item-title{font-size:18px;}
}

/* # =================================================================
   # menus
   # ================================================================= */
   
#menus .title-top{
	background-image: url(../img/4_bg.webp);
}

#menus .txt-box span{
	font-size:18px;
	color:var(--color-blue);
	font-weight:700;
}


#menus .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}

#menus .flex-item{
	width:32%;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1.5em;
}

#menus .flex-item2{
	width:49%;
	background-color:var(--color-base);
	border-radius:1em;
	color:var(--color-bk);
	font-size:14px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1.5em;
}

#menus .flex-item2 span{
	display:block;
	font-size:20px;
	line-height:1.2em;
	text-align:center;
}


#menus .flex-item3{
	width:32%;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:14px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	padding:1.5em;
}

#menus .flex-item3 span{
	display:block;
	font-size:18px;
	line-height:1.2em;
	text-align:center;
	padding-bottom:15px;
}



@media screen and (max-width:768px){
	#menus .flex-item{width:100%;}
	#menus .flex-item2{width:100%;}
	#menus .flex-item3{width:100%;}
}




/* # =================================================================
   # snsai
   # ================================================================= */
   
#snsai .title-top{
	background-image: url(../img/5_bg.webp);
}

#snsai .txt-box span{
	font-size:18px;
	color:var(--color-blue);
	font-weight:700;
}

#snsai .catch-txt{text-align:center;}

#snsai .catch-txt span{
	display:block;
	font-size:40px;
	line-height:1.5em;
	color:var(--color-blue);
	padding:15px 0;
}

#snsai .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}


#snsai .flex-item{
	width:49%;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:14px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
	padding:1.5em;
}

#snsai .flex-item span{
	display:block;
	font-size:18px;
	line-height:1.2em;
	text-align:center;
	padding-bottom:15px;
}

#snsai .icon-img{text-align:center;}
#snsai .icon-img img{width:80px;}


@media screen and (max-width:768px){
	#snsai .flex-item{width:100%;}
}

@media screen and (max-width:599px){
	#snsai .catch-txt span{font-size:25px;}
}

/* # =================================================================
   # hikaku
   # ================================================================= */
   
#hikaku .title-top{
	background-image: url(../img/6_bg.webp);
}

#hikaku .txt-box span{
	font-size:18px;
	color:var(--color-blue);
	font-weight:700;
}

#hikaku .catch-txt{text-align:center;}

#hikaku .catch-txt span{
	display:block;
	font-size:40px;
	line-height:1.5em;
	color:var(--color-blue);
	padding-top:15px;
}

#hikaku .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}


#hikaku .flex-item{
	width:32%;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1em;
}

#hikaku .icon-img{text-align:center;}
#hikaku .icon-img img{width:80px;}


@media screen and (max-width:768px){
	#hikaku .flex-item{width:100%;justify-content: start;text-align:left;}
}

@media screen and (max-width:599px){
	#hikaku .catch-txt span{font-size:25px;}
}


/* # =================================================================
   # jirei
   # ================================================================= */
   
#jirei .title-top{
	background-image: url(../img/7_bg.webp);
}

#jirei .txt-box span{
	font-size:18px;
	color:var(--color-blue);
	font-weight:700;
}

#jirei .catch-txt{text-align:center;}

#jirei .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}


#jirei .flex-item{
	width:32%;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1em;
}


@media screen and (max-width:768px){
	#jirei .flex-item{width:100%;justify-content: start;text-align:left;}
}

@media screen and (max-width:599px){
	#jirei .catch-txt{text-align:left;}
}


/* # =================================================================
   # sponser
   # ================================================================= */
   
#sponser .title-top{
	background-image: url(../img/8_bg.webp);
}

#sponser .txt-box span{
	font-size:18px;
	color:var(--color-blue);
	font-weight:700;
}

#sponser .catch-txt{text-align:center;}

#sponser .flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
	row-gap:1em;
}


#sponser .flex-item{
	width:32%;
	display: flex;
	align-items:center;
	justify-content: center;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1em;
}

#sponser .flex-item2{
	width:32%;
	background-color:var(--color-blue);
	border-radius:1em;
	color:var(--color-white);
	font-size:14px;
	font-weight:700;
	line-height:1.5em;
	text-align:center;
	padding:1em;
}

#sponser .flex-item2 span{
	display:block;
	font-size:25px;
	padding-top:10px;
}

@media screen and (max-width:768px){
	#sponser .flex-item{width:100%;justify-content: start;text-align:left;}
	#sponser .flex-item2{width:100%;}
}

@media screen and (max-width:599px){
	#sponser .catch-txt{text-align:left;}
}


/* # =================================================================
   # merit
   # ================================================================= */
   
#merit .title-top{
	background-image: url(../img/9_bg.webp);
}

#merit .title-txt{
	font-size:40px;
	line-height:1em;
	font-weight:700;
	color:var(--color-white);
}

#merit .txt-box span{
	display:block;
	font-size:20px;
	color:var(--color-blue);
	font-weight:700;
}

#merit .txt-box img{width:85%;padding:20px 0;}

#merit .catch-txt{text-align:center;}

/*-------スマホ表示-------------*/

@media screen and (max-width:768px){
	#merit .flex_last::after {display: block;content:"";width:48%;}
	#merit .flex-item{width:48%;}
	#merit .txt-box img{width:100%;}
}

@media screen and (max-width:599px){
	#merit .catch-txt{text-align:left;}
}


/* # =================================================================
   # faq
   # ================================================================= */
   
.faq-block{
border-bottom:dotted 1px var(--color-gray4);
padding-bottom:5px;
margin-bottom:5px;
}


#faq .table__list-label:first-letter{
 font-size: 28px;
 font-weight: 600;
 margin-right: 0.5em;
}

#faq .table__list-label:first-letter{color: var(--color-blue);}

#faq .quest{
	text-indent: -1.7em;
	padding-left:2em;
	padding-right:40px;
	padding-bottom:10px;
	padding-top:10px;
	font-size:18px;
	line-height:150%;
	text-align:left;
	font-weight: Bold;
}

#faq .answer{
	font-size:16px;
	color: var(--color-blue);
	text-align:left;
	padding: 0 3em 25px 3em;
	line-height:180%;
}

#faq .answer span{font-weight: 700;}

#faq .answer a{color:var(--color-red);}

#faq .answer ul{list-style: square;text-indent: 0;padding-left:20px;}

#faq .btn{
	display:block;
	background-image: url(../img/i_mail_btn.svg);
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: left 5px center;
	font-size:14px;
	font-weight:800;
	text-align:center;
	padding:10px 15px 10px 35px;
	background-color: var(--color-white);
	border:solid 1px var(--color-gray1);
	color: var(--color-gray1) !important;
	transition: all .5s;
	text-decoration:none;
	line-height:1;
	width:200px;
	border-radius:50px;
	text-indent: 0;
	margin-top:20px;
}


#faq .btn:hover{
	background-image: url(../img/i_mail_green_btn.svg);
	background-position: left 5px center;
	color: var(--color-green) !important;
	border:solid 1px var(--color-green);
	text-decoration:none;
}



@media screen and (max-width:599px){
	#faq .quest{
		text-indent: -1.8em;
		padding-left:2em;
		font-size:18px;
	}
	#faq .answer{font-size:16px;}
}


/* # =================================================================
   # FAQ アコーディオン設定
   # ================================================================= */

.table__list-check{
    display: none;
}

/*カラム見出し */
.table__list-label {
	width: 100%;
	display: block;
	padding: 10px;
	color: var(--color-gray1);
	font-display: swap;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
}


.table__list-label:after{
    content: '';
    display: block;
    line-height: 16px;
    padding: 0;
    position: absolute;
    right: 20px;
   top: 40%;
   transform: translateY(-40%);
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
	border-bottom: solid 1px var(--color-gray1);
	border-right: solid 1px var(--color-gray1);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
}
.table__list-content {
	width: 100%;
    display: block;
    height: 0;
    opacity: 0;
	margin-top: 0px;
 	margin-bottom: 0px;
   padding: 0px 0 0px 0;
    transition: .5s;
    visibility: hidden;
}
.table__list-check:checked + .table__list-label:after{
    content: '×';
    position: absolute;
    right: 25px;
    top: 30%;
   transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    font-size: 30px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-gray1);
	border-bottom: none;
	border-right: none;
}
.table__list-check:checked + .table__list-label + .table__list-content{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}