@charset "UTF-8";



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 共通項目 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
*{margin:0;padding:0;text-decoration:none}fieldset{border:0}body{line-height:1.8}body,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,ul{margin:0;padding:0}img{border:0;vertical-align:top}a{text-decoration:none}em{font-style:normal}ul li{list-style-type:none;list-style-image:none}address{font-style:normal}
html{font-size: 62.5%;}
body{font-size: 1.6em;}


/* 文字装飾 */
strong {
	font-weight: bold;
}


ul li {
	list-style:none;	
}


/* box-sizing */ 
* {
	box-sizing: border-box;
}


/* float解除 */
.cbox { 
}
* html .cbox {
	zoom: 100%;
}
*:first-child+html .cbox {
	display: inline-block;
}
.cbox:after {
	content: ""; 
	clear: both; 
	height: 0; 
	display: block; 
	visibility: hidden;
}



/* img */ 
img {
	width: 100%;
	height: auto;
}



/* sp */ 
.sp {
	display: none;
}



/* リンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
a {
	color: #231815;
	text-decoration: none;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}


/* テキスト装飾 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 小文字 */
.cap {
	line-height: 1.5;
	font-size: 1.2rem;
}



/* 横幅 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
body {
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	font-weight: 500;
	color: #000000;
	padding: 0;
	margin: 0;
	letter-spacing: 0.06em;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}



/* フォント */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.en {
	font-family: 'Barlow', sans-serif;
	font-weight: 500;
}




/* flex */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-start {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.flex-end {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	 -ms-flex-direction: row-reverse;
		 flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */


/* main */
#main {
	display: block;
}
.c-inner {
	max-width: 1100px;
	width: 90%;
	margin: 0 auto;
	position: relative;
}



/* c-txt */
.c-txt {
    font-size: 1.6rem;
    line-height: 2em;
    text-align: left;
}



/* グラデーション */
.gr {
    background:linear-gradient(135deg, #640F7E,#1E2891,#640F7E);/*グラデーションを定義*/
	background-size: 300% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 10s ease infinite;
}
@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



/* moreボタン */
a .c-more {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 142px;
    height: 60px;
    position: relative;
}
a .c-more:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #4F7794;
    border-width: 4px 0 4px 12px;
    position: absolute;
    top: 50%;
    right: 22px;
    margin-top: -4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
a .c-more:before {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
a:hover .c-more:before {
    width: 70px;
    height: 70px;
    top: -5px;
    right: -5px;
}
    a .c-more span {
        font-size: 1.4rem;
        line-height: 1;
        color: #fff;
        text-decoration: underline;
    }
    a:hover .c-more span {
        text-decoration: none;
    }


a .c-more.gradation:after {
    border-color: transparent transparent transparent #ffffff;
}
a .c-more.gradation:before {
    background:linear-gradient(135deg, #640F7E,#1E2891,#640F7E);/*グラデーションを定義*/
	background-size: 300% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 10s ease infinite;
}

a .c-more.white:after {
    border-color: transparent transparent transparent #27258F;
}
a .c-more.white:before {
   background: #fff;
}




/* コンタクト追従ボタン */
.c-contact_fixed{
	position: fixed;
	bottom:30px;
	right:30px;
	z-index: 8;
}
.c-contact_fixed a{
	display: block;
	padding: 4px;
	background: transparent;
	border-radius: 50%;
	border: 1px solid #401C88;
}
	.c-contact_fixed a span{
		position: relative;
		display: block;
		width: 240px;
		height: 240px;
		border-radius: 50%;
		background: rgb(100,15,126);
		background: linear-gradient(160deg, rgba(100,15,126,1) 0%, rgba(30,40,145,1) 100%);
		transition: all .4s;
	}
	.c-contact_fixed a:hover span{
		width: 250px;
		height: 250px;
		opacity: 0.8;
	}
		.c-contact_fixed a span div{
			position: absolute;
			top:36%;
			left:50%;
			transform: translate(-50%);
			text-align: center;
			color:#fff;
		}
		.c-contact_fixed a span .en{
			font-size: 4.2rem;
			line-height: 1;
		}
		.c-contact_fixed a span .txt{
			font-size: 1.8rem;
			line-height: 1;
			margin-top: 7px;
            white-space: nowrap;
		}
		.c-contact_fixed a span .tri{
			position: absolute;
			margin-top: 12px;
			left:50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent transparent transparent #fff;
			border-width: 8px 0 8px 24px;
		}





/* お問い合わせエリア */
#c-contact {
    width: 100%;
    background: #4F7794;
}
#c-contact.gr {
    background:linear-gradient(135deg, #640F7E,#1E2891,#640F7E);/*グラデーションを定義*/
	background-size: 300% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 10s ease infinite;
}
    #c-contact .c-inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 400px;
    }
        #c-contact .c-inner .text {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: -webkit-calc(100% - 160px);
            width: calc(100% - 160px);
            color: #fff;
        }
            #c-contact .c-inner .text .headtit {
                padding-right: 60px;
            }
                #c-contact .c-inner .text .headtit h2 {
                    font-size: 5.0rem;
                    font-weight: 600;
                    line-height: 1;
                    margin-bottom: 8px;
                }
                #c-contact .c-inner .text .headtit .jp {
                    font-size: 1.6rem;
                    line-height: 1;
      
}



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

.c-sec{
	padding-top: 150px;
}

/*セクションタイトル*/
.c-titl{
	position: relative;
	text-align: center;
	margin-bottom: 60px;
}
.c-titl.left{
	text-align: left;
}
	.c-titl .en_bg{
		width: 100%;
		font-size: 10rem;
        font-weight: 600;
		letter-spacing: 0;
		color: #F1F4F7;
		line-height: 1;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
	}
	.c-titl .en_bg.white{
		color: #fff;
	}
	.c-titl.subspecies .en_bg{
		color: rgba(255,255,255,0.05);
	}
	.c-titl.left .en_bg{
		text-align: left;
	}
	.c-titl h2{
		position: relative;
		font-size: 3.8rem;
		line-height: 1.5;
		letter-spacing: 0.2rem;
		padding-top: 28px;
		z-index: 1;
	}
	.c-titl.subspecies h2{
        color: #fff;
	}



/*レイアウト01*/
.c-list .c-list-content{
    margin-bottom: 50px;
}
.c-list .c-list-content:last-child{
    margin-bottom: 0px;
}
    .c-list .c-list-content .pht{
        position: relative;
        width: 280px;
    }
        .c-list .c-list-content .pht img{
            width: 100%;
            height: auto;
        }
    .c-list .c-list-content .illust{
        position: relative;
        width: 280px;
        height: 280px;
        background-color: #F7F7F7;
    }
        .c-list .c-list-content .illust img{
            position: absolute;
            right:0;
            width: 316px;
            height: 100%;
            object-fit: contain;
        }
    .c-list .c-list-content .txtarea{
        position: relative;
        width: calc(100% - 310px);
        margin-left: 30px;
        padding-left: 30px;
    }
        .c-list .c-list-content .txtarea .list-number{
            font-weight: 600;
            font-size: 1.2rem;
            line-height: 1;
            letter-spacing: 0.06rem;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            color:#4F7794;
            position: absolute;
            top:0;
            left:0px;
        }
        .c-list .c-list-content .txtarea .list-number.gr_txt{
            color: #3D1D89;
            background:linear-gradient(135deg, #640F7E,#1E2891,#640F7E);
            background-size: 200% 200%;
            animation: bggradient 10s ease infinite;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .c-list .c-list-content .txtarea .ttl{
            font-size: 2.8rem;
            line-height: 1.5;
            font-weight: 600;
            letter-spacing: 0.14rem;
            margin-top: -6px;
        }
            .c-list .c-list-content .txtarea .ttl .yellow{
                color:#E3A700;
            }
        .c-list .c-list-content .txtarea .c-txt{
            margin-top: 20px;
        }


/*レイアウト02*/
.c-list02 .c-list02-content{
    width: 46.5%;
    margin-right: 7%;
    margin-bottom: 60px;
    position: relative;
}
.c-list02 .c-list02-content:nth-child(2n){
    margin-right: 0;
    transform: translateY(-80px)
}
.c-list02 .c-list02-content:nth-child(n+3){
    margin-bottom: 0;
}
    .c-list02 .c-list02-content .list-number{
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1;
        letter-spacing: 0.06rem;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        color:#4F7794;
        position: absolute;
        top:0;
        left:-20px;
    }
    .c-list02 .c-list02-content .list-number.gr_txt{
        color: #3D1D89;
        background:linear-gradient(135deg, #640F7E,#1E2891,#640F7E);
        background-size: 200% 200%;
        animation: bggradient 10s ease infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .c-list02 .c-list02-content .txtarea{
        width: 100%;
        margin-top: 20px;
    }
        .c-list02 .c-list02-content .txtarea .ttl{
            font-size: 2.8rem;
            line-height: 1.5;
            font-weight: 600;
            letter-spacing: 0.14rem;
        }
            .c-list02 .c-list02-content .txtarea .ttl .yellow{
                color:#E3A700;
            }
        .c-list02 .c-list02-content .txtarea .c-txt{
            margin-top: 10px;
        }
            .c-list02 .c-list02-content .txtarea .c-txt span{
                font-size: 1.2rem;
            }



/*レイアウト03*/
#about{
	background-color: #F1F4F7;	
}
.c-about-cntnts .pht{
	width: 42%;
	margin-right: 50px;
}
	.c-about-cntnts .pht img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
.c-about-cntnts .c-txt{
	width: calc(100% - (42% + 50px));
}



/*レイアウト04*/
#clients{
	position: relative;
}
#clients.c-sec{
	padding-top: 90px;
}
	#clients .bg{
		width: 100%;
		height: 430px;
		position: absolute;
		top:0;
		left:0;
		background-color: #F1F4F7;
		z-index: -1	
	}
	#clients .c-inner{
		padding: 45px;
		background-color: #fff;
		box-shadow: 0px 0px 32px -15px #ddd;
		border-radius: 0px;
	}
		#clients .c-txt{
			margin-top: -10px;
			text-align: center;
		}
		#clients .contents img{
			display: block;
			max-width: 845px;
			margin:30px auto 0;
		}


/*レイアウト05*/
#company{
	padding-bottom: 200px;
}
.c-company-info{
	width: 100%;
	border-top: 1px solid #ddd;
	border-collapse: collapse;
    border-spacing: 0;
}
	.c-company-info tr{
		width: 100%;
		border-bottom: 1px solid #ddd;
	}
		.c-company-info tr th,.c-company-info tr td{
			font-size: 1.5rem;
			line-height: 1.6;
			padding: 20px 20px 18px;
		}
		.c-company-info tr td{
			border-left: 1px solid #ddd;
		}

	

	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.c-footer {
    width: 100%;
    padding: 30px 0;
}
    .c-footer .link {
        font-size: 1.2rem;
        line-height: 1;
    }
        .c-footer .link a:hover {
            text-decoration: underline;
        }
	
    .c-footer .copyright {
        font-size: 1.0rem;
        line-height: 1;
        text-align: right;
    }







/* max 1400px */
@media screen and (max-width: 1400px) {
	

}





/* 1024px */
@media screen and (max-width: 1024px) {
	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

/* c-txt */
.c-txt {
    font-size: 1.5rem;
}
	
	
	
/*セクションタイトル*/
.c-titl{
	margin-bottom: 60px;
}
	.c-titl h2{
		font-size: 3.4rem;
		padding-top: 24px;
	}
	.c-titl .en_bg{
		font-size: 8.6rem;
	}	
	
	
/*レイアウト01*/
.c-list .c-list-content .txtarea .ttl{
    font-size: 2.6rem;
    line-height: 1.4;
}
.c-list .c-list-content .txtarea .c-txt{
    margin-top: 15px;
}


/*レイアウト02*/
.c-list02 .c-list02-content .txtarea{
    margin-top: 17px;
}
    .c-list02 .c-list02-content .txtarea .ttl{
        font-size: 2.4rem;
        line-height: 1.4;
    }
    .c-list02 .c-list02-content .txtarea .c-txt{
        margin-top: 6px;
    }
        .c-list02 .c-list02-content .txtarea .c-txt span{
            font-size: 1.0rem;
        }
	

#clients .c-txt {
    text-align: left;
}

/* お問い合わせエリア */
#c-contact .c-inner {
    height: 300px;
}
    #c-contact .c-inner .text {
        padding-right: 40px;
    }
        #c-contact .c-inner .text .headtit {
            padding-right: 40px;
        }
            #c-contact .c-inner .text .headtit h2 {
                font-size: 4.0rem;
                margin-bottom: 10px;
            }
            #c-contact .c-inner .text .headtit .jp {
                font-size: 1.5rem;
            }



}

	







/* max 767px */
@media screen and (max-width: 767px) {


.sp {
	display: block;
}
.pc {
	display: none;
}
	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

/* c-txt */
.c-txt {
    font-size: 1.4rem;
}



/* moreボタン */
a .c-more {
    width: 125px;
    height: 50px;
}
a .c-more:after {
    border-width: 3px 0 3px 9px;
    right: 19px;
    margin-top: -3px;
}
a .c-more:before {
    width: 50px;
    height: 50px;
}
a:hover .c-more:before {
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
}
    a .c-more span {
        font-size: 1.2rem;
    }



/* お問い合わせエリア */
#c-contact .c-inner {
    display: block;
    height: auto;
    padding: 60px 0;
}
    #c-contact .c-inner .text {
        width: 100%;
        display: block;
        padding-right: 0;
        margin-bottom: 40px;
    }
        #c-contact .c-inner .text .headtit {
            padding-right: 0;
            margin-bottom: 30px;
        }
            #c-contact .c-inner .text .headtit h2 {
                font-size: 3.2rem;
                margin-bottom: 10px;
            }
            #c-contact .c-inner .text .headtit .jp {
                font-size: 1.3rem;
            }

	
	
/* コンタクト追従ボタン */
.c-contact_fixed{
	bottom:10px;
	right:10px;
}
	.c-contact_fixed a span{
		width: 100px;
		height: 100px;
	}
	.c-contact_fixed a:hover span{
		width: 100px;
		height: 100px;
	}
		.c-contact_fixed a span .en{
			font-size: 1.6rem;
		}
		.c-contact_fixed a span .txt{
			font-size: 1.0rem;
			margin-top: 4px;
		}
		.c-contact_fixed a span .tri{
			margin-top: 10px;
		}
	
	
	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */

.c-sec{
	padding-top: 60px;
}

/*セクションタイトル*/
.c-titl{
	margin-bottom: 30px;
}
.c-titl.left{
	text-align: left;
}
	.c-titl .en_bg{
		font-size: 4.2rem;
	}
	.c-titl h2{
		font-size: 2.4rem;
		padding-top: 26px;
        line-height: 1.3em;
	}



/*レイアウト01*/
.c-list .c-list-content{
    margin-bottom: 30px;
}
    .c-list .c-list-content .pht{
        overflow: hidden;
        width: 100%;
        height:0;
        padding-bottom: 68%;
    }
    .c-list .c-list-content .illust{
        position: relative;
        width: 100%;
        height: 220px;
    }
        .c-list .c-list-content .illust img{
            position: absolute;
            right:50%;
            transform: translateX(52%);
            width: auto;
            height: 220px;
            object-fit: contain;
        }
    .c-list .c-list-content .txtarea{
        width: 100%;
        margin-left: 0px;
        padding-left: 30px;
        margin-top: 25px;
    }
        .c-list .c-list-content .txtarea .ttl{
            font-size: 2.0rem;
            margin-top: -4px;
        }
        .c-list .c-list-content .txtarea .c-txt{
            margin-top: 8px;
        }


/*レイアウト02*/
.c-list02 .c-list02-content{
    width: 100%;
    margin-right: 0;
    margin-left: 20px;
    margin-bottom: 30px!important;
}
.c-list02 .c-list02-content:nth-child(2n){
    transform: translateY(0px)
}
.c-list02 .c-list02-content:nth-child(n+4){
    margin-bottom: 0!important;
}
    .c-list02 .c-list02-content .list-number{
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1;
        letter-spacing: 0.06rem;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        color:#4F7794;
        position: absolute;
        top:0;
        left:-20px;
    }
    .c-list02 .c-list02-content .txtarea{
        width: 100%;
        margin-top: 15px;
    }
        .c-list02 .c-list02-content .txtarea .ttl{
            font-size: 2.0rem;
            margin-top: 0;
        }
        .c-list02 .c-list02-content .txtarea .c-txt{
            margin-top: 8px;
        }
	
	
/*レイアウト03*/
.c-about-cntnts .pht{
	width: 100%;
	margin-right: 0px;
}
.c-about-cntnts .c-txt{
	width: 100%;
	margin-top: 25px;
}



/*レイアウト04*/
#clients.c-sec{
	padding-top: 50px;
}
	#clients .c-inner{
		padding: 25px;
	}
		#clients .c-txt{
			text-align: left;
		}


/*レイアウト05*/
#company{
	padding-bottom:120px;
}
.c-company-info{
	width: 100%;
	border-top: 1px solid #ddd;
	border-collapse: collapse;
    border-spacing: 0;
}
	.c-company-info tr{
		width: 100%;
		border-bottom: 1px solid #ddd;
	}
		.c-company-info tr th,.c-company-info tr td{
			display: block;
			width: 100%;
			font-size: 1.4rem;
			line-height: 1.5;
			padding: 20px 10px 16px;
		}
		.c-company-info tr th{
			font-size: 1.5rem;
			border-left: none;
			padding: 20px 10px 4px;
		}	
		.c-company-info tr td{
			border-left: none;
			padding: 0px 10px 16px;
		}	
	
	
	

	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.c-footer {
    padding: 30px 0 30px 0;
}
.c-footer .c-inner {
    display: block;
}
    .c-footer .link {
        font-size: 1.1rem;
        line-height: 1;
        text-align: center;
    }
	
    .c-footer .copyright {
        padding-top: 20px;
        text-align: center;
    }



}