@charset "utf-8";

/* -----------------------------------------------------------
    TOP
-------------------------------------------------------------- */
.header.active #top .mv-area::before{
	z-index: 1 !important;
}


/* -----------------------------------------------------------
    Loading
-------------------------------------------------------------- */
/* Loading背景画面設定　*/
#splash {
	/*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	/*
	background: #261E66;
	*/
	text-align: center;

}

/* Loading画像中央配置　*/
#splash-logo {
	/*
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	*/
	position: relative;
	width: 100%;
	height: 100vh;
}
#splash-logo .logo,
#splash-logo .catch,
#splash-logo .person{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#splash-logo .logo {
	top: 22%;
}
#splash-logo .logo img {
	width: 350px;
}
#splash-logo .catch {
}
#splash-logo .catch img {
	width: 90vw;
}
#splash-logo .person {
	top: auto;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	margin: 0 auto;
}
#splash-logo .person img {
	width: 550px;
}


@media screen and (max-width: 768px){
	
	#splash-logo .logo {
		top: 22%;
	}
	#splash-logo .logo img {
		width: 200px;
	}
	#splash-logo .catch img {
		width: 90vw;
	}
	#splash-logo .person img {
		width: 100%;
		min-width: 350px;
		max-width: 600px;
	}
	
}


/*    共通パーツ（ニュース、実績用accordionの元バージョン）
-------------------------------------------------------------- */

.faq-accordion {
	padding: 50px 0 0;
}

.faq-accordion ul {
}

.faq-accordion ul li {
	background: #fff;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
	margin: 0 0 30px;
}
.faq-accordion ul li:last-child {
	margin: 0;
}

.faq-accordion .title {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.5;
	width: 100%;
}

.faq-accordion .quest {
	display: flex;
	position: relative;
	padding: 30px 50px 30px 80px;
	justify-content: space-between;
	width: 100%;
	transition: .5s;
    align-items: center;
}

.faq-accordion .quest::before {
	content: "Q";
    font-size: 2.4rem;
	color: #F0353C;
	display: block;
	position: absolute;
	height: 30px;
	left: 30px;
	top: 30px;
	text-align: center;
	width: 34px;
	font-weight: 600;
}
.faq-accordion .quest:hover {
	cursor: pointer;
	/*
	color: #F0353C;
	*/
}

.faq-accordion .answer {
	display: none;
	padding: 0 50px 40px 80px;
	position: relative;
}
.faq-accordion .answer::before {
	content: "A";
	font-size: 2.4rem;
	color: #0099D9;
	display: block;
	position: absolute;
	height: 30px;
	left: 30px;
    top: 5px;
	text-align: center;
	width: 34px;
	font-weight: 600;
}

.faq-accordion .answer-txt {
	padding: 25px 0 30px 0;
	line-height: 1.8;
}

.faq-accordion .answer-txt a {
	color: #F0353C;
	text-decoration: underline;
}



/*
@media screen and (min-width: 769px){
	.faq-accordion .answer-txt a.answer-tel {
		color: #2a2a29!important;
		text-decoration: none;
	}
}
*/

.faq-accordion .answer-txt a:hover {
	text-decoration: none;
}

.faq-accordion-icon {
	height: 18px;
    margin: 0;
    padding: 0 0 0 0;
    position: relative;
    width: 18px;
	top: 8px;
}

.faq-accordion .faq-section:first-of-type {
	margin: 20px 0 0 0;
}

.faq-info-icon {
	margin: 0 0 0 0;
}

.faq-accordion-icon::before,
.faq-accordion-icon::after {
	background-color: #333;
	content: "";
	height: 2px;
	position: absolute;
	width: 100%;
	transition: all .3s;
}

.faq-accordion-icon::before {
	transform: rotate(0deg);
}

.faq-accordion-icon::after {
	transform: rotate(90deg);
}

.faq-accordion .quest.active .faq-accordion-icon::after {
	transform: rotate(180deg);
}


@media screen and (max-width: 768px){
	
	.faq-area {
		padding: 40px 20px 60px;
		background: url(../img/bg-line2.png) #F3F4F5 no-repeat left top 60px / 150% auto;
	}
	.faq-area .section-catch{
		font-size: 2.8rem;
	}
	
	.faq-accordion {
		padding: 20px 0 0;
	}
	
	.faq-accordion ul li {
		box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
		margin: 0 0 20px;
	}
	
	.faq-accordion ul li a {
		position: relative;
	}

	.faq-accordion ul li a .title {
		font-size: 1.8rem;
		padding: 0 10px 0 0;
	}
	
		
	.faq-accordion .quest {
		padding: 20px 15px 20px 45px;
	}

	.faq-accordion .quest::before {
		font-size: 2rem;
		top: 18px;
		height: 28px;
		line-height: 28px;
		left: 10px;
		width: 25px;
	}

	.faq-accordion .answer {
		padding: 0 15px 30px 45px;
	}

	.faq-accordion .answer::before {
		font-size: 2rem;
		top: 5px;
		height: 28px;
		line-height: 28px;
		left: 10px;
		width: 28px;
	}
	
	.faq-accordion .answer-txt {
		padding: 0 0 20px 0;
		width: 100%;
	}
	
	.faq-accordion-icon {
		width: 16px;
		height: 16px;
		margin: 0 0 0 0;
	}
	
	
}



/*    mv-area
-------------------------------------------------------------- */
.mv-area,
.video_wrapper{
	position: relative;

}
/*
.mv-area:not(.js_active)::before {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	content: "";
	background: url("../img/all.png") no-repeat center bottom 5px / contain;
	width: 100%;
	height: 100%;
	z-index: -1;
}
*/
.video_wrapper:not(.js_active)::before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
	width: 100%;
	height: 100%;
	background: url("../img/all.png") no-repeat center bottom 5px / contain;
}

.video_wrapper > video {
	width: 100%;
}
.mv-area .txt-area{
	/*
	color: #fff;
	position: absolute;
	z-index: 1;
    margin: 0 auto;
    width: fit-content;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	*/
}

.mv-area .txt-area .img{
	text-align: center;
}
.mv-area .txt-area img{
    width: 100%;
	height: auto;
	max-width: 1600px;
	object-fit: cover;
}

.mv-area .txt-area .section-catch{
	font-size: 6.2rem;
	font-weight: 700;
	line-height: 1.3;
}
.mv-area .txt-area .section-catch span.num{
	font-family: 'Barlow', sans-serif;
	font-size: 8.0rem; 
}
.mv-area .txt-area .section-catch span.sp-size{
	display: block;
	font-size: 5rem;
}

.mv-area .slide-txt {
	display: block;
	position: absolute;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
.mv-area .slide-txt.en {
	bottom: 100px;
	background: url("../img/mv-en-txt.png") repeat-x 0 0;
	background-size: 2230px auto;
	height: 128px;
	-moz-animation: loop_en 20s linear infinite;
	animation: loop_en 20s linear infinite;
}
.mv-area .slide-txt.ja {
	bottom: 45px;
	background: url("../img/mv-ja-txt.png") repeat-x 0 0;
	background-size: 1826px auto;
	height: 44px;
	-moz-animation: loop_ja 30s linear infinite;
	animation: loop_ja 30s linear infinite;
}

@keyframes loop_en {
	0% {
		background-position: 0 0;
		}

	100% {
		background-position: -2230px 0;
		}
}
@keyframes loop_ja {
	0% {
		background-position: 0 0;
		}

	100% {
		background-position: -1826px 0;
		}
}

.mv-area .main-image{
	width: 100%;
	line-height: 1;
}
.mv-area .image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.mv-area .image-wrap video {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100vh;
}

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

	/*    mv-area
	-------------------------------------------------------------- */
	.mv-area {
		position: relative;
		margin: 0;
		padding: 60px 0 0;
		/*
		height: calc(100vh - 75px);
		*/
		height: auto;
	}
	/*
	.mv-area::after {
		width: 100%;
	}
	*/
	.mv-area .txt-area{
		/*
		bottom: 270px;
		left: 20px;
		*/
	}
	.mv-area .txt-area .img{
		text-align: center;
	}
	.mv-area .txt-area img{
		width: 100%;
		height: auto;
		max-width: 600px;
	}

	
	.mv-area .txt-area .section-catch{
		font-size: 3.6rem;
		line-height: 1.3;
	}
	.mv-area .txt-area .section-catch span.num{
		font-size: 5.0rem; 
	}
	.mv-area .txt-area .section-catch span.sp-size{
		font-size: 2.7rem;
	}

	.mv-area .slide-txt {
	}
    
	.mv-area .slide-txt.en {
		/*bottom: 100px;*/
		bottom: 170px;
		background-size: 1257px auto;
		height: 72px;
		-moz-animation: loop_en 20s linear infinite;
		animation: loop_en 20s linear infinite;
	}
    
	.mv-area .slide-txt.ja {
		/*bottom: 60px;*/
		bottom: 130px;
		background-size: 1203px auto;
		height: 29px;
		-moz-animation: loop_ja 30s linear infinite;
		animation: loop_ja 30s linear infinite;
	}

	
	.mv-area .main-image{
		/* width: 100%;
		height: 300px;
		position: static;
		left: auto;
		top: auto;
		padding: 0;
        display: none; */
		width: 100%;
	}
	.mv-area .image-wrap {
		height: 300px;
	}
	
	.mv-area .image-wrap video{
		/*
		height: calc(100vh - 75px);
		*/
		height: 100%;
	}
    
}

/*    about-area
-------------------------------------------------------------- */

.about-area{
    margin: 100px auto 0;
}

.about-intro{
    align-items: center;
}

.about-intro .left-box{
    width: 50%;
}

.about-intro .right-box{
    width: 510px;
}
.about-intro .right-box .basic-txt{
	font-size: 1.8rem;
}

.about-intro .right-box .btn-more{
	margin: 30px auto 0 0;
}


.about-catch-sub{
    font: 900 2.8rem 'Noto Sans JP', sans-serif;
    color: #261E66;
    letter-spacing: 1.5px;
    margin: 0 0 10px;
}

.about-catch-main{
    font: 700 2.5rem 'Noto Sans JP', sans-serif;
    color: #fff;
    width: fit-content;
    margin: 0;
	background: #261E66;
	padding: 10px 15px;
}

.about-catch-img{
    display: inline-block;
    overflow: hidden;
    position: relative;
}

/*    about-list modal
-----------------------*/
.about-list{
    margin: 100px auto 0;
}

.about-list ul{
    display: flex;
    justify-content: space-between;
}

.about-modal-btn{
    width: 380px;
	position: relative;
}

.about-modal-btn a{
	display: block;
	border: 2px solid #261E66;
	color: #261E66;
	position: relative;
	
	display: flex;
	align-items: center;
	width: 100%;
	height: 90px;
	transition: 0.3s;
}
.about-modal-btn a:hover{
	background: #261E66;
	border: 2px solid #261E66;
	color: #fff;
	opacity: 1;
}

.about-modal-btn a::before{
    content: "";
    position: absolute;
    background: url("../img/icon-yellow-line.png")no-repeat top center / contain;
    width: 56px;
    height: 47px;
    opacity: 0;
    top: -85px;
    left: -10px;
}
.about-modal-btn a:hover::before{
    opacity: 1;
}

.about-modal-btn a::after{
    background: url("../img/icon-zoom-in.svg") no-repeat center center / contain;
    position: absolute;
    content: "";
    right: 15px;
    bottom: 12px;
    height: 21px;
    width: 21px;
	transition: 0.3s;
}
.about-modal-btn a:hover::after{
    background-image: url("../img/icon-zoom-in-w.svg");
}

.about-list-img{
    background: url("../img/top-about-item01-a.png")no-repeat top center / contain;
    width: 139px;
    height: 147px;
    position: absolute;
    content: "";
    z-index: 1;
    bottom: 0;
    left: 10px;
	transition: 0.3s;
}
.about-list-img.ali02{
    background-image: url("../img/top-about-item02-a.png");
}
.about-list-img.ali03{
    background-image: url("../img/top-about-item03-a.png");
}

.about-modal-btn a:hover .about-list-img{
	/*
    background-image: url("../img/top-about-item01-b.png");
	*/
	transform: scale(1.1);
	transform-origin:center bottom 0;
}
.about-modal-btn a:hover .about-list-img.ali02{
	/*
    background-image: url("../img/top-about-item02-b.png");
	*/
}
.about-modal-btn a:hover .about-list-img.ali03{
	/*
    background-image: url("../img/top-about-item03-b.png");
	*/
}

.about-modal-btn-txt{
    letter-spacing: .5px;
	font-size: 2.2rem;
	font-weight: bold;
	padding: 0 30px 0 160px;
}
.about-modal-btn-txt span{
    font-size: 1.9rem;
}

/*    modal内
-----------------------*/
.about-modal{
	color: #fff;
	text-align: center;
}
.about-modal .title{
	font-size: 9rem;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.2;
	margin: 0 0 30px;
	color: #FFE02D;
}
.about-modal .title span{
	font-size: 2.2rem;
	display: block;
	letter-spacing: .08em;
}
.about-modal .basic-txt{
	font-size: 1.8rem;
}
.about-modal .member-img{
	margin: 0 0 -70px;
}
.about-modal .member-img img{
	width: 600px;
}

/*Youtube*/
.about-modal .movie {
	width: 70%;
	aspect-ratio: 16 / 9;
	line-height: 1;
	margin: 60px auto 20px;
}
.about-modal .movie iframe {
	width: 100%;
	height: 100%;
}


@media screen and (max-width: 768px){
    .about-area{
		margin: 40px auto 0;
        padding: 0 20px;
    }
    
	.about-intro .left-box {
        width: 100%;
    }
    
    .about-intro .right-box {
        width: 100%;
        margin: 25px auto 0;
    }
	.about-intro .right-box .basic-txt{
		font-size: 1.6rem;
	}
	.about-intro .right-box .btn-more{
		margin: 20px auto 80px 0;
		max-width: inherit;
	}
	.about-intro .right-box .btn-more a {
		width: 240px;
	}
    
	/*    about-list modal
    -----------------------*/
    .about-list {
        margin: 55px auto 0;
    }
    
    .about-list ul{
        width: 100%;
    }
    
    .about-list li{
        width: 32%;
        height: 140px;
        min-width: 93px;
    }
    
    .about-catch-main{
        font-size: 2.2rem;
        margin: 5px 0 0;
		padding: 3px 10px 8px;
    }
	
	.about-modal-btn{
		width: auto;
	}

	.about-modal-btn a{
		width: 100%;
        height: 140px;
        padding: 80px 0 0;
        min-width: 93px;
		display: block;
	}
	.about-modal-btn a:hover{
	}
	.about-modal-btn a::before{
		display: none;
	}
	
    .about-list-img {
        width: 100px;
        height: 110px;
        bottom: 70px;
        left: 0px;
        right: 0px;
        margin: 0 auto;
    }
    
    .about-modal-btn a::after{
        right: 6px;
        bottom: 6px;
        height: 12px;
        width: 12px;
    }
    
    .about-modal-btn-txt{
        font-size: 1.8rem;
        text-align: center;
		padding: 0;
    }
    
    .about-modal-btn-txt span{
        font-size: 1.6rem;
    }
	
	/*    modal内
	-----------------------*/
	.about-modal{
	}
	.about-modal .title{
		font-size: 4rem;
		letter-spacing: 0;
		margin: 0 0 20px;
	}
	.about-modal .title span{
		font-size: 1.8rem;
		letter-spacing: 0;
	}
	.about-modal .basic-txt{
		font-size: 1.7rem;
		text-align: left;
	}
	
	/*Youtube*/
	.about-modal .movie {
		width: 100%;
		margin: 30px auto 20px;
	}
	
	
}

/*    service-area
-------------------------------------------------------------- */

.service-area{
    margin: 120px auto 0;
    background-color: #261E66;
}

.service-slide-box{
    position: relative;
    height: 360px;
    width: 100%;
}

.service-intro{
    color: #fff;
    padding: 60px 0 0;
    align-items: start;
}

.service-intro .sec-ttl .en{
    opacity: .1;
    left: -62px;
    top: -35px;
}

.service-intro .left-box{
    font: 900 2.4rem 'Noto Sans JP', sans-serif;
    width: 530px;
}

.service-ttl-wrap{
    position: relative;
    z-index: 2;
}

.service-ttl-wrap ,.service-ttl-wrap-inner{
    display: flex;
    align-items: end;
}

.service-ttl-wrap{
    justify-content: space-between;
    padding: 68px 0 0;
}

.service-ttl-wrap-inner .num{
    font: bold 9rem /.8 'Righteous', sans-serif;
    margin: 0 10px 0 0;
}

.service-ttl-border{
    width: font-content;
    border-bottom: 2px solid #fff;
    padding: 0 2px 7px;
}

.service-ttl-wrap-inner .big{
    font-size: 3rem;
}

.big-ttl{
    font-size: 5.6rem;
    margin: 13px auto 0;
}

.big-ttl span{
    font-size: 8.5rem;
}

.white-bg-txt{
    background-color: #fff;
    padding: 4px 55px 8px;
    font: 600 3.5rem 'Noto Sans JP', sans-serif;
    color: #261E66;
    text-align: center;
    letter-spacing: .8px;
    width: fit-content;
    margin: 25px auto 0 0;
}

/*　元：静止
.ring-bg{
    background: url("../img/top-service-img.png")no-repeat center center / contain;
    width: 540px;
    height: 540px;
}
*/

/*回転*/
.ring-bg{
    width: 540px;
    height: 540px;
	position: relative;
	z-index: 1;
}
.ring-bg::before,
.ring-bg::after{
	content: "";
    position: absolute;
    width: 540px;
    height: 540px;
	left: 0;
	top: 0;
}
.ring-bg::before{
	background: url("../img/top-service-img_en.png") no-repeat center center / contain;
	animation: ring-rotate-anime 20s linear infinite;
	z-index: -1;
}
@keyframes ring-rotate-anime {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}
.ring-bg::after{
	background: url("../img/top-service-img_txt_pc.png") no-repeat center center / contain;
	z-index: 1;
}


.service-txt-list{
    text-align: center;
    width: 275px;
    margin: 0 auto;
    top: 22%;
    position: relative;
}

.service-txt-list li{
    line-height: 2.1;
    border-bottom: 1px solid #ffffff29;
    font-size: 1.6rem;
}

.service-area .sec-ttl{
    margin: 0 0 0;
}

.service-area .character img{
    width: 128px;
    height: 131px;
}

/*    service-list
-----------------------*/
.service-list{
    width: 100%;
    padding: 40px 50px 120px;
	margin: 0 auto;
	max-width: 1500px;
}

.service-list li.img-wrap{
    background-color: #fff;
    width: calc( ( 100% - 80px ) / 3); 
    padding: 60px 0 120px;
    margin: 25px auto 0;
    height: auto;
	
	position: relative;
}

.service-list h4{
    text-align: center;
    color: #261E66;
    font: 600 2rem 'Noto Sans JP', sans-serif;
}

.service-list-txt{
    padding: 0 40px 40px;
    font: 600 1.8rem / 1.7 'Noto Sans JP', sans-serif;
    letter-spacing: .5px;
}

.service-logo{
    width: 100%;
}

.service-logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* btn-more  modal ver. 
for top service-list
-----------------------*/
.service-more-btn{
    height: 50px;
    position: absolute;
    margin: 0 auto;
    width: fit-content;
    right: 0;
    left: 0;
}

.service-list .modal-type label{
    width: 220px;
    height: 50px;
    padding: 0;
    margin: 0 auto;
}

.modal-btn-more {
	text-align: center;
	
	position: absolute;
	bottom: 70px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.modal-btn-more a {
	width: 220px;
    height: 50px;
	font-size: 1.6rem;
	font-weight: 600;
	position: relative;
	text-align: center;
	transition: 0.3s;
	margin: 0 auto;
    border-radius: 50px;
    display: block;
    line-height: 46px;
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.09);
    z-index: 1;
    background: #fff;
    color: #333;
    overflow: hidden;
    border: 2px solid #333;
    letter-spacing: .5px;
}
.modal-btn-more a::after {
    content: "";
    display: block;
    margin: auto;
    position: absolute;
    right: 17px;
    background: url("../img/arrow.png") no-repeat center center / contain;
    width: 13px;
    height: 13px;
    z-index: 21;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 1;
}
/*
.modal-btn-more a:hover::after {
	background: url("../img/icon-zoom-in-w.png") no-repeat left center / contain;
}
*/
.modal-btn-more a:hover {
	opacity: 1;
    background: #FFE02D;
    box-shadow: none;
	transform: translateY(3px);
}

.modal-btn-more a::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	transition: all 0.4s ease;
	background: #FFE02D;
}

.modal-btn-more a:hover::before {
	left: 0;
	width: 100%;
}

/*   service modal-content
-----------------------*/

.service-content-ttl-wrap{
    display: flex;
	/*
    align-items: center;
	*/
    margin: 0 auto 40px;
	position: relative;
}

.ttl-leftspace{
    margin-left: 40px;
}

.service-content-ttl-wrap .cate{
    font: 600 2rem / 1.3 'Noto Sans JP', sans-serif;
	color: #261E66;
	position: absolute;
	left: 300px;
	top: 0;
}

.service-content-img{
    width: 260px;
    height: 190px;
    margin: 0 40px 0 0;
}

.service-content-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-content-ttl{
    width: calc( 100% - 300px);
}
/*
.service-content-ttl .cate{
    font: 600 2rem / 1.3 'Noto Sans JP', sans-serif;
	color: #261E66;
	position: absolute;
	left: 300px;
}
*/

.service-content-ttl h3{
    font: 900 4rem / 1.4 'Noto Sans JP', sans-serif;
	padding: 30px 0 0;
}

.service-content-ttl .catch{
    font-size: 2.4rem;
    line-height: 1.6;
    margin: 15px 0 0;
    font-weight: 600;
}

.service-content-txt{
    line-height: 1.8;
	font-size: 1.7rem;
}

/*   service-detail-area
-----------------------*/

.service-detail-area{
    margin: 45px auto 0;
}

.service-detail-ttl{
    position: relative;
}

.service-detail-ttl::before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #261E66;
    top: 18px;
}

.service-detail-ttl h3{
    font-size: 2.7rem;
    font-weight: bold;
    color: #261E66;
    background-color: #fff;
    padding: 0 15px 0 0;
    position: relative;
    z-index: 2;
    width: fit-content;
	line-height: 1.4;
}

.service-detail-area .basic-txt.intro{
    margin: 20px 0 0;
}

.service-detail-img{
    width: 100%;
    height: 180px;
}
.img-list.ver02 .service-detail-img{
    width: 100%;
    height: 220px;
}
.service-detail-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-list{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 10px auto 0;
}

.img-list li{
    width: 24%;
	margin: 25px 0 0;
}

.img-list.ver02 li{
    width: 32%;
}

.img-list.ver03 li{
    width: 18%;
}

.img-list p{
    text-align: center;
    margin: 10px auto 0;
}

.role-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto 0;
}

.role-list{
    width: calc(100% - 410px);
	order: 1;
}
.role-wrap.rev .role-list{
	order: 2;
}
.role-list li{
    margin: 25px 0 0;
}

/*col3*/
.role-list.col3{
    width: 100%;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}
.role-list.col3 li{
	width: calc((100% - 60px) / 3);
}
/*wide*/
.role-list.wide{
	width: 100%;
}

.role-ttl{
    background-color: #261E66;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 10px 20px;
    /*width: fit-content;*/
    border-left: 6px solid #fd0;
	margin: 0 0 15px;
	font-weight: bold;
}
.role-list .basic-txt{
	line-height: 1.8;
	padding: 0 20px;
}

/*画像*/
.role-graph-img{
    width: 370px;
	order: 2;
	text-align: center;
}
.role-wrap.rev .role-graph-img{
    order: 1;
}
.role-graph-img img{
	width: 100%;
}
.role-graph-img img.logo{
	margin: -30px auto -20px;
	width: 80%;
}
.role-graph-img .txt{
	display: block;
	margin: 0 0 0;
	line-height: 1.6;
	text-align: center;
}

.role-graph-img.flex{
	display: block;
}
.role-graph-img.flex .img{
	margin: 0 auto;
}
.role-graph-img.flex .img.bot{
	margin: 40px 0 0;
}
.role-graph-img.flex .img img.logo{
	width: 70%;
}


/*html用*/
.role-graph{
    width: 370px;
    height: 360px;
    position: relative;
	order: 2;
}

.role-graph .circle{
    width: 200px;
    height: 200px;
    background-color: #261E66BF;
    display: block;
    border-radius: 50%;
    position: absolute;
    border: 2px solid #261E66;
}

.role-graph .circle.c-top{
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.role-graph .circle.c-left{
    left: 0;
    bottom: 0;
}

.role-graph .circle.c-right{
    right: 0;
    bottom: 0;
}

.role-graph .circle p,
.role-graph .triangle p{
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
    width: fit-content;
    left: 0;
    right: 0;
	line-height: 1.3;
}
.role-graph .circle p span,
.role-graph .triangle p span{
	display: block;
	font-size: 1.2rem;
	background: #fff;
	color: #261E66;
	margin: 0 0 10px;
}

.role-graph .triangle{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    display: table;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 65px 100px 65px;
    border-color: transparent transparent #fd0 transparent;
}

.role-graph .triangle p{
    color: #333;
    font-size: 1.9rem;
    white-space: nowrap;
    line-height: 1.3;
	/*
    height: 23px;
	*/
	padding: 30px 0 0;
	font-weight: bold;
}
.role-graph .triangle.s p{
    font-size: 1.4rem;
}

.role-graph .circle.c-top p{
	margin: -10px auto 0;
}

.role-graph .circle.c-left p,
.role-graph .circle.c-right p{
	margin: 5px auto 0;
}

.num-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
	padding: 30px 0 0;
    align-items: stretch;
    flex-wrap: wrap;
}

.num-list li{
    width: 49%;
    text-align: center;
    position: relative;
}

.num-list li::after{
    position: absolute;
    content: "";
    top: 10px;
    width: 100%;
    height: 85%;
    display: block;
    border: 1px solid #261E66;
}

.num-list .w-bg{
    background-color: #fff;
    width: 95%;
    height: 100%;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    padding: 10px 0;
}

.num-txt{
    color: #261E66;
	font-weight: bold;
	line-height: 1.4;
}

.num-em{
    color: #DF0010;
    font: bold 4.5rem 'Noto Sans JP', sans-serif;
}

.num-em span{
    font: bold 5rem / 1.2 'Lato', sans-serif;
}

.num-em .num-big{
    font-size: 7rem;
}


/*feature-box*/
.modal-feature-box{
    width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 30px;
}
.modal-feature-box li{
	width: calc((100% - 30px) / 2);
	margin: 30px 0 0;
	border: 1px #261E66 solid;
}
.modal-feature-box li .title{
	background: #261E66;
    color: #FFE02D;
    font-size: 4rem;
	font-weight: bold;
	padding: 15px;
	line-height: 1.5;
	text-align: center;
}
.modal-feature-box li .title span{
    font-size: 2.4rem;
	margin: 0 5px 0 0;
}
.modal-feature-box li .txt-area{
	background: #fff;
	padding: 30px;
}
/*col3*/
.modal-feature-box.col3 li{
	width: calc((100% - 60px) / 3);
}

/*col4*/
.modal-feature-box.col4 li{
	width: calc((100% - 80px) / 4);
}

/*movie-box*/
.modal-movie-box{
    width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 30px;
}
.modal-movie-box li{
	width: calc((100% - 40px) / 2);
	margin: 40px 0 0;
}
.modal-movie-box li .title{
    font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	margin: 10px 0 0;
}
.modal-movie-box li .title span{
    font-size: 1.4rem;
	display: block;
}
.modal-movie-box li .movie {
	width: 100%;
	aspect-ratio: 16 / 9;
	line-height: 1;
}
.modal-movie-box li .movie iframe {
	width: 100%;
	height: 100%;
}

/*btn*/
.service-modal-btn-wrap{
    margin: 60px auto 80px;
}

.service-modal-btn-wrap .mail-btn{
    margin: 0 auto;
    width: fit-content;
}

.service-modal-btn-wrap .mail-btn a{
    padding: 20px 70px;
    font-size: 2rem;
    overflow: clip;
}

/*---------各サービス微調整---------*/

/*service04*/
.service04 .modal-movie-box li{
    width: 100%;
}

.service04 .modal-movie-box li .movie{
    width: 48%;
    aspect-ratio: 1;
    height: 400px;
}

.service-modal04-img{
    width: 28%;
    height: 400px;
    margin: 0 0 0 30px;
}

.num-list.single {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    align-items: center;
}

.num-list.single li{
    width: 100%;
}

/*service05*/
.service05 .modal-feature-box li .title{
    font-size: 3.6rem;
}

.service05 .service-detail-img img{
    object-fit: contain;
}

/*.pc-reverse{
    flex-direction: column-reverse;
}

.pc-reverse .role-graph-img,.pc-reverse .role-list{
    flex-wrap: wrap;
}*/

.role-wrap.rev.pc-reverse .role-graph-img{
    order: 2;
}

.role-wrap.rev.pc-reverse .role-list {
    order: 1;
}

.service05 .role-graph-img{
    margin: 20px auto 30px;
}

/*service06*/

.modal-movie-box.single li{
    display: flex;
    width: 100%;
}

.modal-movie-box.single .movie{
    width: 510px;
}

.modal-movie-box.single .movie-txt{
    margin: 0 0 0 40px;
    line-height: 2;
}

/*service07*/
.modal-simple-list{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.modal-simple-list li{
    padding: 0 0 0 20px;
    position: relative;
    margin: 10px 0 0;
    width: 50%;
}

.modal-simple-list li span{
    border-bottom: 1.5px solid #FFE02D;
    color: #FFE449;
    margin: 0 5px 0;
    padding: 0 0 2px;
}

.modal-simple-list li::before{
    position: absolute;
    content: "・";
    color: #FFE02D;
    left: 0;
    top: 49%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: 800;
}

.modal-simple-list.bg-b li{
    background: linear-gradient(323deg, rgb(22, 23, 94) 0%, rgb(38, 30, 102) 100%);
    color: #fff;
    padding: 12px 10px 12px 30px;
    border-radius: 5px;
    font-size: 1.8rem;
    width: 100%;
}

.modal-simple-list.bg-b li::before{
    left: 9px;
}

.modal-simple-catch{
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #261E66;
    border-bottom: 3px solid #FFE02D;
    width: fit-content;
    margin: 10px auto 0;
    padding: 0 15px 0 25px;
    letter-spacing: 2px;
}

.underline-deco{
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    color: #261E66;
    width: fit-content;
    margin: 0px auto 10px;
}

/*.underline-deco span{
    border-bottom: 1px solid #FFE02D;
}*/

/*service08*/

/*.service08 .img-list p{
    margin: 0 auto 10px;
    color: #261E66;
    font-weight: bold;
    font-size: 1.8rem;
}*/

.service08 .modal-feature-box li .title{
    line-height: 1.1;
}

.modal-simple-list.wide{
    width: calc( 100% - 350px );
}

.modal-simple-list.wide li{
    padding: 0 0 0 0;
    position: relative;
    margin: 10px 0 0;
    width: 100%;
    display: flex;
}

.modal-simple-list.wide li::before{
    display: none;
}

.modal-simple-list.wide li:first-child{
    margin: 0px 0 0;
}

.simple-list-s-ttl{
    font-weight: 600;
    min-width: 150px;
    display: block;
    color: #261E66;
    background-color: #eee;
    text-align: center;
    border-radius: 5px;
    height: fit-content;
    padding: 3px 0;
    margin: 0 15px 0 0;
}

.modal-simple-list.wide li span {
    border-bottom: 2px solid #FFE02D;
    color: #333;
    margin: 0 3px 0;
    padding: 2px 0 0;
    font-weight: 600;
    font-size: 1.7rem;
}

.service08 .role-graph-img{
    width: 330px;
    height: 220px;
    order: 0;
}

.service08 .role-graph-img img{
    height: 100%;
    object-fit: cover;
}

.service08 .role-ttl{
    margin: 25px 0 15px;
}

.num-em.font-s{
    font-size: 4rem;
}

.num-em.font-s .num-big{
    font-size: 5rem;
}

.other-video-btn{
    display: block;
    margin: 20px auto 0;
    width: fit-content;
}

.other-video-btn a{
    background-color: #261E66;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    border-radius: 5px;
    padding: 15px 44px 15px 25px;
    position: relative;
}

.other-video-btn a::after {
    content: "\f0da";
    font: 500 2.5rem / 1 "FontAwesome";
    color: #FFCC06;
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*service09*/

.service09 .modal-feature-box li .title{
    font-size: 2.4rem;
}

.mf-img{
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.mf-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mf-img.wide{
    width: 100%;
    height: 350px;
}

.service09 .num-em.font-s{
    text-align: center;
    margin: 20px 0 0;
}

.service09 .service-detail-img{
    position: relative;
}

.service09 .service-detail-img::after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    background-color: #FFE02D;
    z-index: -1;
}

.img-list.ver03 p span{
    font-size: 1.4rem;
}

@media screen and (max-width: 768px){
    .service-area{
        margin: 50px auto 0;
    }
    
    .service-slide-box{
        height: 160px;
    }
    
    .service-ttl-wrap{
        padding: 0 0 0;
    }
    
    .ttl-leftspace{
        margin-left: 0;
    }
    
    .service-intro{
        padding: 60px 20px 0;
    }
    
    .service-intro .left-box{
        width: 100%;
        font-size: 1.8rem;
    }
    
    .service-intro .sec-ttl .en{
        left: -27px;
        top: -54px;
    }
    
    .service-ttl-wrap-inner .big {
        font-size: 2.2rem;
    }
    
    .service-ttl-wrap-inner .num{
        font-size: 6.2rem;
        margin: 0 5px 0 0;
    }
    
    .service-area .character{
        position: absolute;
        left: 255px;
    }
    
    .service-area .character img{
        width: 79px;
        height: 81px;
    }
    
    .big-ttl span {
        font-size: 5.1rem;
    }
    
    .service-ttl-border{
        padding: 0 0 7px;
    }
    
    .big-ttl{
        font-size: 3.4rem;
    }
    
    .white-bg-txt {
        padding: 4px 10px 8px;
        font: 800 2.2rem 'Noto Sans JP', sans-serif;
        margin: 12px auto 0 0;
    }
    
	/* 元：静止
    .ring-bg{
        width: 100%;
        height: 100%;
        margin: 25px auto 0;
        padding: 70px 0 55px;
        background: none;
        position: relative;
        min-width: 335px;
    }
    .ring-bg::before{
        background: url("../img/top-service-img-sp.png")no-repeat center center / contain;
        position: absolute;
        width: 100%;
        height: 335px;
        top: 0;
        left: 0;
        content: "";
        margin: 0 auto;
    }
    */
	
	/*回転*/
	.ring-bg{
		/*
		width: 540px;
		height: 540px;
		position: relative;
		z-index: 1;
		*/
		z-index: 2;
		width: 100%;
        height: 100%;
        margin: 25px auto 0;
        padding: 70px 0 55px;
        position: relative;
        min-width: 335px;
	}
	.ring-bg::before,
	.ring-bg::after{
		width: 100%;
        height: 335px;
	}
	.ring-bg::before{
		animation: ring-rotate-anime 20s linear infinite;
	}
	.ring-bg::after{
		background: url("../img/top-service-img_txt_sp.png") no-repeat center center / contain;
	}
	
	
	
    .service-txt-list{
        width: 233px;
    }
    
    .service-txt-list li {
        line-height: 1.9;
        font-size: 1.1rem;
        font-weight: 600;
        font-feature-settings: "palt";
    }
    /*    service-list
    -----------------------*/
    .service-list{
        padding: 15px 20px 50px;
    }
    
    .service-list li.img-wrap{
        width: 100%;
        padding: 30px 0 50px;
        margin: 20px auto 0;
    }
    
    .service-list-txt{
        padding: 0 20px 25px;
        font-size: 2.2rem;
		font-size: 1.6rem;
		font-weight: 500;
        letter-spacing: 0;
        line-height: 1.6;
    }
    
	.modal-btn-more {
		text-align: center;

		position: static;
		bottom: auto;
		left: auto;
		transform: none;
	}

	
	/*   service modal-content
	-----------------------*/

	.service-content-ttl-wrap{
		display: block;
		margin: 0 auto 20px;
	}
	.service-content-ttl-wrap .cate{
		font-size: 1.8rem;
		text-align: center;
		margin: 0 0 0;
		
		position: static;
		left: auto;
		top: auto;
	}
	/*
	.service-content-img{
		width: 240px;
		height: 150px;
		margin: 0 auto;
		text-align: center;
	}
	*/
	.service-content-img{
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}

	.service-content-img img{
	}

	.service-content-ttl{
		width: auto;
	}

	/*
	.service-content-ttl .cate{
		font-size: 1.8rem;
		text-align: center;
		margin: 0 0 5px;
	}
	*/
	.service-content-ttl h3{
		font-size: 3.2rem;
		text-align: center;
		display: none;
	}

	.service-content-ttl .catch{
		font-size: 2.2rem;
		margin: 0 0 0;
		line-height: 1.5;
	}

	.service-content-txt{
		font-size: 1.6rem;
	}

	/*   service-detail-area
	-----------------------*/

	.service-detail-area{
		margin: 30px auto 0;
	}

	.service-detail-ttl{
	}

	.service-detail-ttl::before{
		top: 15px;
	}

	.service-detail-ttl h3{
		font-size: 2.2rem;
		font-weight: bold;
		padding: 0 10px 0 0;
	}
	.service-detail-area .basic-txt.intro{
		margin: 15px 0 0;
	}

	.img-list{
		justify-content: space-between;
		margin: 0 auto 0;
	}
    
    .img-list.ver02{
        justify-content: space-evenly;
    }

	.img-list li,
	.img-list.ver02 li{
		width: calc((100% - 10px) / 2);
		margin: 20px 0 0;
	}

	.service-detail-img,
	.img-list.ver02 .service-detail-img{
		width: 100%;
		height: 120px;
	}

	.service-detail-img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.img-list p{
		margin: 5px auto 0;
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.role-wrap{
		display: block;
		margin: 10px auto 0;
	}

	.role-list{
		width: auto;
		padding: 0 0 0;
	}

	.role-list li{
		margin: 20px 0 0;
	}
	.role-list li:first-child{
		margin-top: 0;
	}

	/*col3*/
	.role-list.col3{
		display: block;
	}
	.role-list.col3 li{
		width: auto;
	}
	
	.role-ttl{
		font-size: 1.8rem;
		letter-spacing: 0;
		padding: 5px 15px;
		width: auto;
		margin: 0 0 10px;
	}
	.role-list .basic-txt{
		padding: 0;
	}

	/*画像*/
	.role-graph-img{
		width: auto;
		text-align: center;
		padding: 10px 0 30px;
	}
	.role-graph-img img{
		max-width: 300px;
	}
	.role-graph-img img.logo{
		margin: -30px auto -20px;
		width: 80%;
	}

	
	.role-graph-img .txt{
	}
	
	.role-graph-img.flex{
		display: flex;
		justify-content: space-between;
	}
	.role-graph-img.flex .img{
		width: 48%;
	}
	.role-graph-img.flex img.logo{
		margin: -10px auto 0;
		width: 90%;
	}
	.role-graph-img.flex .txt{
		line-height: 1.4;
		font-size: 1.4rem;
	}

	.role-graph-img.flex .img.bot{
		margin: 0;
	}
	.role-graph-img.flex .img img{
		width: 90%;
	}
	
	
	/*html用*/
	.role-graph{
		width: 300px;
		height: 280px;
		position: relative;
		margin: 20px auto 30px;
	}

	.role-graph .circle{
		width: 160px;
		height: 160px;
	}

	.role-graph .circle p,
	.role-graph .triangle p{
		font-size: 1.8rem;
		font-weight: bold;
		position: absolute;
		letter-spacing: 0;
	}
	.role-graph .circle.c-top p{
		margin: -10px auto 0;
	}

	.role-graph .circle.c-left p,
	.role-graph .circle.c-right p{
		margin: 5px auto 0;
	}
	
	.role-graph .triangle{
		border-width: 0 50px 80px 50px;
	}

	.role-graph .triangle p{
		font-size: 1.7rem;
		font-weight: bold;
		/*
		height: 23px;
		*/
	}
	
	.num-list{
		display: block;
		padding: 10px 0 0;
	}

	.num-list li{
		width: auto;
	}

	.num-list li::after{
	}

	.num-list .w-bg{
		padding: 16px 0;
	}

	.num-txt{
	}

	.num-em{
		font-size: 2.4rem;
	}
	.num-em span{
		font-size: 2.4rem;
	}

	.num-em .num-big{
		font-size: 4rem;
	}

	
	/*feature-box*/
	.modal-feature-box{
		display: block;
		margin: 0 0 40px;
	}
	.modal-feature-box li,
	.modal-feature-box.col3 li,.modal-feature-box.col4 li{
		width: auto;
		margin: 20px 0 0;
	}
	.modal-feature-box li .title{
		font-size: 3rem;
		padding: 12px;
	}
	.modal-feature-box li .title span{
		font-size: 1.8rem;
		margin: 0 5px 0 0;
	}
	.modal-feature-box li .txt-area{
		padding: 15px;
	}
	.modal-feature-box li .txt-area .basic-txt{
		line-height: 1.7;
		font-size: 1.5rem;
	}

	
	/*movie-box*/
	.modal-movie-box{
		display: block;
		margin: 0 0 40px;
	}
	.modal-movie-box li{
		width: auto;
		margin: 20px 0 0;
	}
	.modal-movie-box li .title{
		font-size: 1.7rem;
		margin: 10px 0 0;
	}
	.modal-movie-box li .title span{
		font-size: 1.4rem;
	}
	
    .modal-movie-box.single li{
        display: block;
    }
    
    .modal-movie-box.single .movie {
        width: 100%;
    }
    
    .modal-movie-box.single .movie-txt {
        margin: 15px 0 0 0;
        line-height: 1.8;
    }
	
	/*btn*/
	.service-modal-btn-wrap{
		margin: 40px auto 50px;
	}

	.service-modal-btn-wrap .mail-btn a{
		padding: 15px 60px;
		font-size: 1.8rem;
	}
    
    /*---------各サービス微調整---------*/

    /*service04*/
    .service04 .modal-movie-box li .movie {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
    
    .service-modal04-img{
        display: none;
    }
    
    .num-list.single{
        width: 100%;
    }
    
    .service04 .modal-movie-box{
        margin: 0 0 10px;
    }
    
    /*service05*/
    .service05 .modal-feature-box li .title {
        font-size: 3rem;
    }
    
    .service05 .img-list{
        justify-content: center;
    }
    
    .service05 .role-graph-img img{
        max-height: 150px;
        object-fit: contain;
    }
    
    .service05 .role-graph-img.big img {
        max-height: 300px;
        margin: 15px auto;
    }
    
    .service05 .role-graph-img {
        margin: 0 auto 0;
        padding: 0 0 0;
    }
    
    /*service06*/
    
    .service06 .modal-movie-box {
        margin: 0 0 0;
    }
    
    /*service07*/
    
    .modal-simple-list.bg-b li{
        padding: 8px 7px 8px 28px;
        font-size: 1.7rem;
    }
    
    .modal-simple-list li span{
        margin: 0 0 0;
    }
    
    .modal-simple-list li{
        margin: 8px 0 0;
        width: 100%;
    }
    
    .modal-simple-list li::before{
        top: 13px;
        font-size: 1.5rem;
    }
    
    .modal-simple-list.bg-b li::before{
        top: 22px;
    }
    
    /*service08*/
    
    .service08 .role-graph-img{
        width: 100%;
    }
    
    .modal-simple-list.wide{
        width: 100%;
    }
    
    .modal-simple-list.wide li{
        display: block;
    }
    
    .simple-list-s-ttl{
        text-align: left;
        padding: 3px 10px;
        font-size: 1.5rem;
        margin: 0 0 8px;
    }
    
    .num-em.font-s {
        font-size: 2.4rem;
    }
    
    .other-video-btn a{
        font-size: 1.8rem;
        text-align: left;
        padding: 10px 40px 10px 20px;
        display: block;
    }
    
    /*service09*/
    .mf-img {
        height: 145px;
        margin: 0 auto;
    }
    
    .service09 .modal-feature-box li .title{
        padding: 5px;
    }
    
    .mf-img.wide{
        height: 150px;
    }
    
    .img-list.ver03 li {
        width: 48%;
        margin: 15px 0 0;
    }
}


/* -----------------------------------------------------------
    動画
-------------------------------------------------------------- */
.cmn-movie-area {
	margin: 0 auto;
	padding: 60px 0 0;
	text-align: center;
}
.cmn-movie {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
}
.cmn-movie iframe {
	width: 100%;
	height: 100%;
}

.cmn-movie-area .section-catch {
	color: #fff;
	margin: 0 0 20px;
	font-size: 4.4rem;
}
.cmn-movie-area .section-catch .yellow-txt {
	font-weight: 900;
}
.cmn-movie-area .thumb img {
	width: 800px;
}

@media screen and (max-width: 768px){
	
	.cmn-movie-area {
		padding: 50px 20px 0;
		width: auto;
	}
	
	.cmn-movie-area .section-catch {
		margin: 0 0 15px;
		font-size: 1.8rem;
	}
	.cmn-movie-area .thumb img {
		width: 100%;
	}

	
}


/*    works-area
-------------------------------------------------------------- */

.works-area-ttl-wrap{
    position: relative;
    color: #fff;
    background-color: #F6F6F6;
}

.works-area .sec-ttl .jp{
    color: #fff;
}

.works-area-ttl-bg{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 600px;
}

.works-area-ttl-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-catch-main{
    font: 700 3.3rem 'Noto Sans JP', sans-serif;
    background-color: #261E66;
    color: #fff;
    padding: 10px 25px;
    width: fit-content;
    margin: 20px 0 0;
}

.works-ttl-txt-wrap{
    padding: 263px 0 0;
    z-index: 2;
    position: relative;
}


/*    works-list
-----------------------*/
.works-list-box{
    background-color: #F6F6F6;
    padding: 20px 0 120px;
}

.works-list li{
    background-color: #fff;
    margin: 20px auto 0;
}

.works-list.faq-accordion .quest{
    padding: 0;
}

.works-list.faq-accordion .quest::before,
.works-list.faq-accordion .answer::before{
    display: none;
}

.works-list a{
    transition: all .3s ease-in-out;
}

.works-list .answer a{
    border-bottom: 1px solid;
}

.works-img{
    overflow: hidden;
    position: relative;
    background: linear-gradient(325deg, rgba(255,0,18,1) 0%, rgba(255,69,13,0.2623249983587185) 55%, rgba(255,250,0,0.2455182756696429) 100%); 
    width: 380px;
    height: 220px;
    transition: all .5s ease-in-out;
}

.works-img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: all .5s ease-in-out;
    object-position: top;
}

.works-list a:hover .works-img img{
    mix-blend-mode: plus-lighter;
}
/*
.works-list a:hover .faq-accordion-icon::before,
.works-list a:hover  .faq-accordion-icon::after{
    background-color: #F0353C;
}
*/
.works-list .faq-accordion-icon{
	width: 22px;
	height: 22px;
	right: 20px;
}

.works-list-qwarp{
    align-items: center;
    width: 100%;
}

.works-cate{
    font: 600 1.7rem 'Noto Sans JP', sans-serif;
    background-color: #261E66;
    color: #fff;
    padding: 3px 7px;
    width: fit-content;
    margin: 0 0 20px;
    transition: all .3s ease-in-out;
}
.works-list a:hover .works-cate{
    background-color: #FFE02D;
	color: #333;
}

.works-list-ttl-wrap{
    margin: 0 0 0 50px;
    width: 700px;
}

.works-list-item-ttl{
    font-weight: 600;
    font-size: 2.8rem;
	line-height: 1.4;
	color: #333;
}
.works-list a:hover .works-list-item-ttl{
	color: #261E66;
}

/*
.faq-accordion .quest:hover .works-list-item-ttl{
    color: #333;
	line-height: 1.4;
}
*/
.works-list.faq-accordion .answer{
    padding: 0 50px 60px 430px;
}

.works-list .basic-txt{
    margin: 0 auto 15px;
}

.works-detail-wrap{ 
}

.works-detail-list ul li{
    box-shadow: none;
    display: flex;
    align-items: center;
    margin: 0 0 6px;
    font-size: 1.48rem;
    line-height: 1.5;
}

.works-detail-cate{
    background-color: #E9E8EB;
    padding: 5px 10px;
    border-radius: 5px;
    min-width: 145px;
    text-align: center;
    display: block;
    margin: 0 12px 0 0;
}

.works-detail-en{
    background-color: #fff;
    padding: 0 10px 0 0;
    width: fit-content;
    z-index: 2;
    position: relative;
    font: 600 1.8rem / 1'Montserrat', sans-serif;
    letter-spacing: .5px;
    margin: 0 auto 20px 0!important;
}

.works-detail-wrap .right-box{
    position: relative;
    color: #DF0010;
    font-size: 2.2rem;
    font-weight: 600;
    width: fit-content;
    line-height: 1.5;
    letter-spacing: .5px;
}

.works-detail-wrap .right-box::before{
    position: absolute;
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    top: 9px;
    background-color: #DF0010;
}

.result-box p{
    margin: 15px 0 0;
}

.works-area .basic-txt span{
    color: #DF0010;
}

.works-detail-list{
    margin: 20px 0 35px;
}

.att-add::before{
    position: absolute;
    content: "※写真はイメージです。";
    color: #b9b9b9;
    bottom: 5px;
    left: 5px;
    font-size: 1.4rem;
}

@media screen and (max-width: 768px){
    .works-area-ttl-bg{
        height: 260px;
    }
    
    .works-ttl-txt-wrap{
        padding: 95px 20px 0;
    }
    
    .works-catch-main{
        font-size: 2rem;
        padding: 5px 12px;
    }
    
    .works-area-ttl-wrap{
        background-color: #fff;
    }
    
    /*    works-list
    -----------------------*/
    .works-list-box{
        background-color: #fff;
        padding: 0 0 0;
    }
    
    .works-img{
        display: none;
    }
    
    .works-cate{
        background-color: #E9E8EB;
        color: #333;
        font: 500 1.4rem 'Noto Sans JP', sans-serif;
        margin: 0 0 12px;
    }
    
    .works-list a:hover .works-cate{
        color: #fff;
    }
    
    .works-list-ttl-wrap {
        margin: 0 0 0 0;
        width: 100%;
    }
    
    .works-list li{
        border-top: 1px solid #ddd;
    }
    
    .works-list .last{
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }
    
    .works-list-item-ttl{
        font-size: 2rem;
        padding: 0 30px 0px 20px;
        line-height: 1.4;
    }
    
    .works-list .faq-accordion-icon{
        width: 25px;
        height: 25px;
        margin: auto 0 0 0;
        padding: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .works-list.faq-accordion .answer {
        padding: 15px 20px 20px 20px;
    }
    
    .works-list .basic-txt{
        line-height: 1.8;
        margin: 15px auto 20px;
    }
    
    .works-detail-list ul li{
        font-size: 1.4rem;
        border-top: none;
        display: block;
    }
    
    .works-img.sp-display{
        display: block;
        width: 100%;
        height: 150px;
    }
    .works-detail-wrap .right-box{
        width: 100%;
        margin: 20px auto 0;
        font-size: 2rem;
    }
    .works-detail-en{
        margin: 0 auto 10px 0;
    }
    
    .works-detail-cate{
        padding: 4px 9px;
        border-radius: 5px;
        text-align: left;
        margin: 10px 0px 5px 0;
    }
    
    .result-box p {
        margin: 10px 0 0;
    }
}

/*    member-area
-------------------------------------------------------------- */

.member-area{
    margin: 130px auto 0;
}

.member-intro{
    display: flex;
    justify-content: flex-end;
    align-items: end;
    flex-wrap: wrap;
	position: relative;
}

.member-area .en{
    z-index: 0;
    left: -75px;
    top: -100px;
    font-size: 14rem;
}

.member-catch{
    font-size: 7.2rem;
    color: #261E66;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 35px;
}

.member-intro .left-box{
    position: relative;
    width: 40%;
    margin: 0 0 50px;
}
.member-intro .left-box .basic-txt{
	text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}

.member-icon{
    position: absolute;
	/*
	top: 60px;
    right: 80px;
    width: 190px;
    height: 186px;
	*/
	top: -80px;
    right: -780px;
    width: 190px;
    height: 186px;
}

.member-intro .right-box{
    width: 60%;
}
.member-intro .right-box .member-img{
	position: absolute;
	right: -50px;
	bottom: 0;
	z-index: -1;
	text-align: right;
}
.member-intro .right-box .member-img img{
	width: 80%;
}

/*    member-list
-----------------------*/
.member-list{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
	margin: 0 auto 60px;
	max-width: 1600px;
}
.member-list li{
	/*
    width: calc( 100% / 6);
	height: 350px;
	*/
	width: calc( 100% / 4);
    height: 300px;
    margin: 0;
    position: relative;
}
.member-name-wrap{
    position: absolute;
    bottom: 15px;
    left: 10px;
}

.member-name-wrap p{
    background-color: #fff;
    padding: 8px 10px;
    width: fit-content;
	transition: 0.3s;
}

.member-name-wrap .name-main{
    font-size: 2.3rem;
    font-weight: 800;
    margin: 0 0 5px;
}

.member-name-wrap .sp-size{
    font-size: 1.45rem;
    font-weight: 600;
}

.member-photo{
    width: 100%;
	/*
    height: 350px;
	*/
	height: 300px;
}

.member-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-list .bgLRextend::before{
    width: 120%;
    height: 145%;
    top: -5px;
    left: -9px;
}


.member-list li a{
	display: block;
	position:relative;
}
.member-list li a:hover{
	opacity: 1;
}
.member-list li a:before{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	background: rgba(38, 30, 102, 1);
	/*
	background: rgba(255, 224, 45, 1);
	*/
	opacity:0;
	transition:0.3s;
}
.member-list li a:after{
	content:"VIEW MORE";
	display:block;
	color:#fff;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	opacity:0;
	z-index:3;
	transition:0.3s;
	font-weight:500;
	letter-spacing:0.2em;
	font-size: 1.4rem;
    white-space: nowrap;
}
.member-list li a:hover:before{
	opacity:0.5;
}
.member-list li a:hover:after{
	opacity:1;
	margin-top:-0.5em;
}

.member-list li a:hover .member-name-wrap p{
	background-color: #261E66;
	color: #fff;
}

/*    readMoreBtn
-----------------------*/

.readMoreBtn {
    text-align: center;
    margin: 60px auto 95px;
    display: none;
}

.readMoreBtn a {
    position: relative;
    display: block;
    font-size: 1.7rem;
    color: #412B21;
    width: 260px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 30px;
    margin: 0 auto;
    line-height: 60px;
}

.btn-more.readMoreBtn a::after{
    background-image: url("../img/plus.svg");
    width: 16px;
    height: 16px;
    top: 16px;
}
/*
.btn-more.readMoreBtn a:hover::after{
    background-image:url("../img/plus-w.svg");
}
*/

/*
.member-list li{
    display: none;
}
*/


.btn-more.readMoreBtn{
    text-align: center;
    margin: 60px auto 100px;
    width: 260px;
    height: 70px;
    font-size: 1.7rem;
}

.btn-more.readMoreBtn a{
    width: 260px;
    height: 60px;
    border-radius: 30px;
    line-height: 57px;
}

@media screen and (max-width: 768px){
    
    .member-area {
        margin: 40px auto 0;
    }
    
    .member-intro .left-box,.member-intro .right-box{
        width: 100%;
    }
    
    .member-intro .left-box{
        margin: 0 0 35px;
        padding: 0 20px;
    }
    
    .member-intro{
        flex-direction: column-reverse;
    }
    
    .member-area .en {
        left: -25px;
        top: -45px;
        font-size: 7rem;
        color: #F3F3F3;
        line-height: 0.9;
    }
    
    .member-catch {
        font-size: 3.4rem;
        line-height: 1.3;
        margin: 0 0 15px;
		position: relative;
		z-index: 2;
    }
    
    .member-area .sec-ttl .jp{
        margin-top: 20px;
    }
    /*
    .member-icon{
        width: 130px;
        height: 127px;
		top: -70px;
		right: 20px;
    }
	*/
	.member-icon{
        width: 120px;
        height: 117px;
		right: 5px;
		top: -50px;
    }
    
	.member-intro .right-box .member-img{
		position: static;
		right: auto;
		bottom: auto;
		text-align: center;
		margin: 0 0 10px;
	}
	.member-intro .right-box .member-img img{
		width: 100%;
	}
	
    
    /*    member-list
    -----------------------*/
    .member-profile{
        display: none;
    }
    
	.member-list {
		margin: 0 0 30px;
	}
	
    .member-list li {
		/*
        width: calc( 100% / 3);
        height: 165px;
		*/
		width: calc( 100% / 2);
        height: 140px;
    }
    
    .member-photo {
		/*
        height: 165px;
		*/
		height: 140px;
    }
    
    .member-name-wrap .name-main {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 5px;
        padding: 5px 7px;
    }
    
    .member-name-wrap{
        bottom: 5px;
        left: 5px;
    }
    
    /*    readMoreBtn
    -----------------------*/
    .btn-more.readMoreBtn{
        margin: 40px auto 60px;
    }
    
	.btn-more.readMoreBtn a{
		margin: 0 auto 0;
        line-height: 46px;
	}
    
    .btn-more.readMoreBtn,.btn-more.readMoreBtn a{
        width: 200px;
        height: 50px;
    }
    
    .btn-more.readMoreBtn a::after{
        width: 13px;
        height: 16px;
    }
    
    .member-list li a::after{
        letter-spacing: 1px;
    }
}


/*    company-area
-------------------------------------------------------------- */

.company-area{
	margin: 100px 0 0;
    padding: 125px 0 0;
    position: relative;
}

.company-img-wrap-s{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}

.company-catch{
    font-size: 4.4rem;
    color: #261E66;
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 20px;
    width: fit-content;
}

.company-area .left-area{
    width: 40%;
}

.company-area .right-area{
    width: 58%;
	position: absolute;
	z-index: -1;
	left: 42%;
	top: 120px;
}

.company-content-wrap{
}

.company-content-txt{
    line-height: 2;
    margin: 0 0 30px;
}

.company-img{
    margin: 0 5px 10px;
}

.company-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-img.ci01{
    width: 360px;
    height: 380px;
}

.company-img.ci02{
    width: 220px;
    height: 210px;
}

.company-img.ci03{
    width: 220px;
    height: 160px;
}

.company-img.ci04{
	/*
    width: 590px;
    height: 295px;
    margin-bottom: 0;
	*/
	width: 100%;
}
.company-img.ci04 img{
	max-height: 500px;
	object-position: center top;
}

.company-area .btn-more{
	margin: 0 auto 0 0;
}


/* --------------table-box-------------- */
.table-box {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #DDDDDD;
    line-height: 1.6;
    font-weight: 400;
}
.table-box tr {
    border-bottom: 1px solid #DDDDDD;
}

.table-box th {
    width: 145px;
    text-align: left;
    vertical-align: top;
    padding: 23px 0 23px 35px;
    position: relative;
    letter-spacing: .8px;
}
/*.table-box th::before {
    display: block;
    content: "\f068";
    font: 500 1.1rem / 1 "FontAwesome";
    color: #0967d8;
    margin: 8px 0 0 0;
    position: absolute;
	left: 20px;
}*/
.table-box .deco_none th::before {
    display: none;
}
.table-box td {
    padding: 23px 0;
}

.table-box .att{
    text-align: right;
}

.table-box .map iframe{
    width: 100%;
    height: 325px;
    border: 0;
    margin-top: 30px;
    border-radius: 20px;
}

.table-box td a{
        color: #333;
    }

.location-list li{
    margin-bottom: 10px;
}

.access-link{
    position: relative;
    margin: 0 0 0 auto;
    width: fit-content;
}

.access-link::before{
    position: absolute;
    content: "\f041";
    display: block;
    top: 3px;
    left: -27px;
    font: 900 2rem / 1 'FontAwesome';
    padding: 0 10px;
    color: #261E66;
}

/* リスト */
.company-area .col-list{
	margin: 0 0 0;
}
.company-area .col-list li{
	line-height: 1.6;
	margin: 5px 0 0;
	padding: 0 0 0 20px;
	position: relative;
	font-size: 1.6rem;
	list-style: none;
}
.company-area .col-list li::before{
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50px;
    content: "";
    background: #31CCBC;
	background: #ccc;
}


@media screen and (max-width: 768px){
    
    .company-area{
		margin: 40px 0 0;
        padding: 50px 0 0;
    }
    
    .company-area .sec-ttl{
        padding: 0 20px 10px;
    }
    
    .company-area .left-area {
        width: auto;
		padding: 0 0 0 20px;
    }
    
    .company-catch{
        font-size: 2.6rem;
        margin: 0 0 15px;
        padding: 0 20px 0 0;
    }
    
    .company-content-txt {
        margin: 0 0 30px;
        padding: 0 20px;
    }
    
    .company-img{
        margin: 0;
    }
    
    .company-img.ci01 {
        width: 59%;
        height: auto;
    }
    
    .company-img-wrap-ss{
        width: 39%;
        display: grid;
    }
    
    .company-img.ci02 {
        width: 100%;
        height: auto;
    }
    
    .company-img.ci03 {
        width: 100%;
        height: auto;
    }
    
    .company-img.ci04 {
        width: 100%;
        height: auto;
		padding: 0 0 20px 0;
    }
    
    .company-area .right-area {
        width: 100%;
    }
    .company-area .right-area{
		width: auto;
		position: static;
		left: auto;
		top: auto;
	}
	
	/* --------------table-box-------------- */
	.table-area{
		width: auto;
        margin: 30px auto 0;
	}
	
    .table-box {
        border-collapse: inherit;
        width: 100%;
        margin: 0 auto;
    }
    .table-box th, .table-box td {
        display: block;
    }
    .table-box th{
        display: block;
        width: 30%;
        padding: 20px 0 20px 20px;
        letter-spacing: 0;
        font-size: 1.5rem;
        margin: 0 10px 0 0;
    }
	.table-box th::before {
		left: 2px;
        font: 400 .8rem / 1 "FontAwesome";
        margin: 10px 0 0 0;
	}
    .table-box td {
        display: block;
        width: 70%;
        padding: 20px 20px 20px 0;
    }
    .table-box tr {
        display: inline-flex;
        width: 100%;
    }
    
    .table-box td a{
        color: #261E66;
        border-bottom: 1px solid;
    }
    
    .table-box .att{
        text-align: left;
    }
    
    .table-box .map{
        position: absolute;
        width: 100%;
    }
    
    .table-box .map iframe {
        height: 200px;
        margin-top: 15px;
        border-radius: 10px;
    }
    
    .company-service-list li{
        margin: 0 0 10px;
    }
    
}



/*    recruit-area
-------------------------------------------------------------- */

.recruit-area{
	padding: 120px 0 120px;
    position: relative;
}

/*
.recruit-area .inner{
	display: flex;
    justify-content: flex-start;
    align-items: center;
}
.recruit-area .inner .l{
	width: 60%;
}
.recruit-area .inner .l .img{
	width: 100%;
}
.recruit-area .inner .r{
	width: 40%;
	padding: 0 0 0 60px;
	margin: -20px 0 0;
}
*/

.recruit-area .inner{
	display: block;
}
.recruit-area .inner .l{
	width: auto;
}
.recruit-area .inner .l .img{
	width: 100%;
}
.recruit-area .inner .r{
	width: auto;
	padding: 0 0 0 0;
	margin: -190px 0 0;
	text-align: center;
}


.recruit-area .section-title-en{
	color: #fff;
	position: relative;
	/*
	margin: 0 0 0 -110px;
	*/
	font-size: 7rem;
	line-height: 1;
	white-space: nowrap;
}
.recruit-area .section-title{
	/*
	margin: -30px 0 20px;
	*/
	margin: 0 0 120px;
	font-size: 2.4rem;
	font-weight: bold;
	color: #fff;
}
.recruit-area .section-catch{
	font-size: 4.3rem;
	line-height: 1.3;
	font-weight: 900;
	color: var(--navy);
	margin: 0 0 10px;
}
.recruit-area .btn-more{
	margin: 40px auto 0;
}

@media screen and (max-width: 768px){
	
	.recruit-area{
		padding: 50px 0 30px;
	}
	.recruit-area .inner{
		display: block;
	}

	.recruit-area .inner .l{
		width: auto;
	}
	.recruit-area .inner .l .img{
		text-align: center;
	}
	.recruit-area .inner .r{
		width: auto;
		padding: 0 20px 0;
		margin: -60px 0 0;
	}
	.recruit-area .section-title-en{
		margin: 0 0 0 0;
		font-size: 3.4rem;
		text-align: center;
	}
	.recruit-area .section-title{
		/*
		margin: -20px 0 15px;
		*/
		margin: 50px 0 15px 0;
		font-size: 2rem;
		font-weight: bold;
		color: var(--navy);
		text-align: left;
	}
	.recruit-area .section-catch{
		font-size: 2.6rem;
		line-height: 1.4;
		margin: 0 0 0;
		text-align: left;
	}
	
	.recruit-area .btn-more{
		margin: 20px auto 0 0;
	}
	
}



/*    news-area
-------------------------------------------------------------- */
.news-area {
    margin: 20px auto 90px;
	position: relative;
}

.news-area .jp{
    font-size: 4rem;
	line-height: 1;
}

.news-area .inner .fs-box{
	display: flex;
	justify-content: space-between;
}
.news-area .title-area {
	width: 290px;
	position: relative;
	z-index: 1;
	margin: 0 0 20px;
}
.news-area .title-area .section-title-en{
	font-size: 1.6rem;
	color: #F0353C;
	font-weight: 600;
	position: unset;
}
.news-area .title-area .sec-catch{
	font-size: 4.4rem;
	display: inline-block;
}
.news-area .title-area .section-title {
	font-size: 1.6rem;
	font-weight: bold;
	padding: 10px 0 30px;
}
.news-area .news-more{
}
.news-area .news-more a{
	font-size: 1.5rem;
}
.news-area .news-more a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	color: #261E66;
}

.news-area .news-list {
	/*
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	*/
	width: calc(100% - 200px);
}
.news-area .news-list li{
	padding: 20px 30px;
    border-bottom: 1px solid #DDDDDD;
}
.news-area .news-list li:first-child{
	margin: 0;
    border-top: 1px solid #DDDDDD;
}
.news-area .news-list li:nth-of-type(n+3){
	display: none;
}
.news-area .date{
	font-family: 'Lato';
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1;
	margin: 0 25px 0 0;
	width: 100px;
	letter-spacing: .05em;
    white-space: nowrap;
	color: #333;
}
.news-area .cate{
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	text-align: center;
	padding: 5px;
	margin: 0 20px 0 0;
	border: 1px #707070 solid;
	width: fit-content;
    white-space: nowrap;
    min-width: 110px;
	color: #333;
}
.news-area .title {
	line-height: 1.5;
}
.news-area .news-list a{
	display: block;
	/*
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	*/
}

.news-list.faq-accordion .quest{
    padding: 0;
    display: flex;
}

.news-list.faq-accordion .quest::before,.faq-accordion .answer::before{
    display: none;
}

.news-list.faq-accordion{
    padding: 0;
}

.news-list.faq-accordion .answer{
    padding: 20px 70px 5px 125px;
	font-weight: 400;
}
.news-list.faq-accordion .answer::before {
	display: none;
}
.news-date-cate-wrap,.quest-pc-flex{
    display: flex;
    align-items: center;
}

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

    .news-area{
		display: block;
		padding: 20px 0 0 20px;
        margin: 0;
    }
	.news-area .title-area {
		width: auto;
		position: relative;
		margin: 0px;
	}
	.news-area .title-area .section-title-en{
		font-size: 1.4rem;
		/* line-height: 1.4; */
		transform: rotate(90deg) translateX(-1em);
		transform-origin: left bottom;
		position: absolute;
		margin: 0px;
		top: 7px;
		left: -32px;
		letter-spacing: 0.05em;
	}
	.news-area .title-area .section-title {
		font-size: 1.6rem;
		padding: 10px 0 25px;
	}
	.news-area .title-area .sec-catch{
		font-size: 3.6rem;
	}
	.news-area .inner .fs-box{
		display: block;
	}
	.news-area .news-more {
		text-align: right;
	}
	.news-area .news-list{
		width: auto;
	}
	.news-area .news-list li{
		display: block;
        margin: 2px 0 0;
        background-color: #f6f6f6;
        border-bottom: none;
        padding: 23px 15px 23px 20px;
	}
    .news-area .news-list li:first-child{
        border-top: none;
    }
	.news-area .news-list a{
		width: 100%;

		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
	}
	.news-area .date{
		margin: 0 8px 0 0;
        width: fit-content;
        font-size: 1.43rem;
        font-feature-settings: "palt";
	}
	.news-area .cate{
		padding: 3px 10px;
		margin: 0 5px 0 0;
		width: auto;
	}
	.news-area .title {
		width: 100%;
		line-height: 1.6;
		margin: 6px 0 0;
        font-size: 1.7rem;
	}
	.news-area .news-more{
		margin: 0 0 0 auto;
		position: absolute;
		top: 60px;
		right: 0px;
	}
    
    .news-area .jp {
        font-size: 3.2rem;
    }
    
    .quest-pc-flex{
        display: block;
    }
    
    .news-list.faq-accordion .answer {
        padding: 13px 20px 0px 0px;
    }

}



/*    blog-area
-------------------------------------------------------------- */
.blog-area {
	padding: 50px 0;
	position: relative;
	background: #f6f6f6;
}
/*
.blog-area::after {
    content: "";
    background: url("../img/illust-watch05.png") center/cover, no-repeat;
    display: inline-block;
    width: 79px;
    height: 158px;
    position: absolute;
    right: calc( ( 100% - 1200px ) / 2 - 80px );
    top: -20px;
}
*/

.blog-area .inner {
    position: relative;
}
/*
.blog-area .inner::after {
    content: "";
    background: url("../img/illust-watch06.png") center/cover, no-repeat;
    display: inline-block;
    width: 106px;
    height: 175px;
    position: absolute;
    left: 153px;
    bottom: -130px;
}
*/

.blog-area .inner .fs-box{
	display: flex;
	justify-content: space-between;
}

.blog-area .title-area {
	/*
    display: flex;
    padding: 0;
    align-items: center;
    gap: 0 50px;
	flex-wrap: wrap;
	*/
    width: 220px;
}
.blog-area .title-area .title-block {
	margin: 0 0 10px;
}
.blog-area .title-area .section-title {
    font-size: 1.8rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1.3;
	color: var(--navy);
}
.blog-area .title-area .section-title-en {
    font-size: 5rem;
    color: var(--navy);
    position: relative;
    margin: 10px 0 0;
    letter-spacing: .2rem;
	font-weight: 700;
}
.blog-area .title-area .txt-block .section-txt {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.7;
}



.blog-area .news-more{
}
.blog-area .news-more a{
	font-size: 1.5rem;
}
.blog-area .news-more a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	color: var(--navy);
}


.blog-area ul.blog-box {
	/*
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 900px;
	*/
	display: flex;
	width: calc(100% - 220px);
}
.blog-area ul li {
	width: calc((100% - 80px) / 3);
	margin: 0 40px 0 0;
}
.blog-area ul li:nth-child(3n){
    margin: 0 0 0 0;
}
.blog-area ul li:nth-of-type(n+4){
	display: none;
}

.blog-area ul li a {
	display: block;
}
.blog-area ul li a:hover{
	opacity: 1;
}

.blog-area .thumb{
    display: flex;
	width: 100%;
    height: 160px;
    justify-content: center;
    align-items: center;
    margin: 0 0 15px;
    overflow: hidden;
    background: #f0f0f0;
	position: relative;
}
.blog-area .thumb img{
    width: 100%;
	height: 100%;
	object-fit: cover;
	transition-duration: 0.3s;
}
.blog-area a:hover .thumb img{
	transform: scale(1.1);
	transition-duration: 0.3s;
}

.blog-area .txt_area{
}

.blog-area .txt_area .date{
    flex-shrink: 0;
    display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
    margin: 0;
	padding: 2px 0 0;
	float: left;
	color: #55423E;
}
.blog-area .txt_area .title{
	font-size: 1.6rem;
	line-height: 1.6;
	clear: both;
	padding: 5px 0 0;
}
.blog-area .txt_area .cate{
	float: right;
    display: inline-block;
	font-size: 1.1rem;
    line-height: 1;
    margin: 0 0 0 5px;
    padding: 4px 5px 3px;
    text-align: center;
    vertical-align: middle;
    min-width: 90px;
	color: #4C4948;
	border: 1px #7C7C84 solid;
}


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

    .blog-area{
		display: block;
		padding: 40px 20px;
    }
    
    .blog-area::after {
        width: 50px;
        height: 101px;
        right: 15px;
        top: 15px;
    }
    
	.blog-area .title-area {
        width: 100%;
        padding: 0 0 30px 0;
    }
    
    .blog-area .title-area .title-block {
        padding: 0;
		margin: 0;
        border-right: none;
        width: 100%;
        display: block;
    }
    
    .blog-area .title-area .section-title {
        font-size: 2.4rem;
    }
    
	.blog-area .title-area .section-title-en {
		font-size: 3rem;
		letter-spacing: .1rem;
		margin: 0;
	}

	/*
	.blog-area .title-area .section-title-en::before {
		left: 0;
		top: 2px;
	}
	*/
	
    .blog-area .title-area .txt-block {
        padding: 20px 0 0;
    }
    
    .blog-area .title-area .txt-block .section-txt {
        font-size: 2.0rem;
    }
	
		
	.blog-area .inner .fs-box{
		display: block;
		position: relative;
	}
	.blog-area .news-more {
		text-align: right;
		position: absolute;
		top: 10px;
		right: 0px;
	}
	.blog-area ul.blog-box {
		display: block;
		margin:  0;
		width: auto;
        padding: 0;
	}
    
    .blog-area .btn-more {
        text-align: left;
    }

	.blog-area ul li {
		width: 100%;
		margin: 0;
	}
    .blog-area ul li:nth-child(3n){
        margin: 0;
    }
	.blog-area ul li:nth-child(n+2){
		margin: 10px 0 0;
	}
	.blog-area ul li:nth-of-type(n+3){
		display: none;
	}
	
	.blog-area ul li a {
		display: flex;
        width: 100%;
        align-items: center;
		padding: 0 0 10px;
		position: relative;
		border-bottom: solid 1px #ddd;
	}
	.blog-area ul li a:after {
		display: block;
		content: "\f105";
		font-family: "FontAwesome";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 0;
		transition: all .5s;
		color: var(--navy);
		font-size: 2.2rem;
		font-weight: 500;
		/*
		position: absolute;
		background: url("../img/arrow.png") no-repeat center center / contain;
		content: "";
		width: 13px;
		height: 13px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		right: 10px;
		transition: all 0.3s ease-in-out;
		*/
	}

	.blog-area .thumb{
		width: 120px;
        height: 80px;
        margin: 0 0 0 0;
		align-items: normal;
	}
    .blog-area a:hover .thumb img{
		transform: scale(1.0);
	}
	.blog-area .thumb img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	
	.blog-area .txt_area{
        flex: 1;
        padding: 0 10px 0 20px;
	}

	.blog-area .txt_area .cate{
		font-size: 1.2rem;
		float: none;
		min-width: inherit;
		padding: 4px 8px 3px;
	}

    .blog-area .txt_area .date{
        font-size: 1.4rem;
		margin: 0 5px 0 0;
    }

    .blog-area .txt_area .title{
        padding: 5px 0 0;
		font-size: 1.6rem;
    }

}


/*    interview-area
-------------------------------------------------------------- */
.interview-area {
	margin: 100px auto 160px;
	padding: 60px 80px;
	position: relative;
	background: var(--yellow);
	background: #F9E685;
	background: url("../img/yellow-bg.jpg") no-repeat center center / cover;
	/*align-items: center;*/
}


.interview-area .interview-wrap {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 30px 0 0;
}
.interview-area .interview-wrap li {
	width: 48%;
}
.interview-area .img-area {
	text-align: center;
}
.interview-area .img-area img {
	width: 100%;
}

/*
.interview-area .txt-area {
	width: auto;
}
.interview-area .img-area {
	
	position: absolute;
	right: 70px;
	top: 60px;
}
.interview-area .img-area img {
	width: 570px;
}
*/

.interview-area .section-title-en{
	font-size: 6rem;
	color: #333;
}
.interview-area .section-title{
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.4;
	color: #333;
}
.interview-area .section-catch{
	font-size: 4.8rem;
	margin: 20px 0 0;
	color: #333;
}
.interview-area .name{
	margin: 20px 0 0;
	line-height: 1.6;
}
.interview-area .name span{
	font-size: 1.8rem;
}

.interview-area .ill{
	position: absolute;
	/*
	left: 400px;
	bottom: -50px;
	*/
	top: -30px;
	right: 100px;
}
.interview-area .ill img{
	width: 130px;
}


@media screen and (max-width: 768px){
	
	.interview-area {
		margin: 0 auto 40px;
		padding: 50px 20px 50px;
		display: block;
	}

	.interview-area .interview-wrap {
		display: block;
		padding: 0;
	}
	.interview-area .interview-wrap li {
		width: auto;
		margin: 30px 0 0;
	}

	/*
	.interview-area .txt-area {
		width: auto;
	}
	.interview-area .img-area {
		width: auto;
		padding: 20px 0 0;
		
		position: static;
		right: auto;
		top: auto;
	}
	.interview-area .img-area img {
		width: 100%;
	}
	*/
	
	.interview-area .section-title-en{
		font-size: 4rem;
	}
	.interview-area .section-title{
		font-size: 2rem;
	}
	.interview-area .section-catch{
		font-size: 3rem;
		margin: 20px 0 0;
	}
	.interview-area .name{
		margin: 10px 0 0;
		font-size: 1.4rem;
	}
	.interview-area .name span{
		font-size: 1.6rem;
	}

	.interview-area .ill{
		right: 10px;
		top: -10px;
		z-index: 1;
	}
	.interview-area .ill img{
		width: 90px;
	}

	
}