@charset "utf-8";

/***************************************************************************
*
* Studio Integrate
*
***************************************************************************/

#header #main{
	background-image: url('../images/grit/main.jpg');
	background-position: top center;
}

@media(min-width: 769px){
	#header .headerBar .mainMenu .menu > li:nth-child(4) > a:before{
		width: 100%;
	}
}

/*.areaStaff*/
.areaStaff{

}
.areaStaff .boxWrapper{

}
.areaStaff .boxWrapper .boxStaff{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
	padding: 0 20px;
}
.areaStaff .boxWrapper .boxStaff:last-child{
	margin-bottom: 0;
}
.areaStaff .boxWrapper .boxStaff .staffPhoto{
	width: 500px;
	height: 300px;
	overflow: hidden;
	background: #dedede;
}
.areaStaff .boxWrapper .boxStaff .staffPhoto img{
	width: 100%;
}
.areaStaff .boxWrapper .boxStaff .staffContent{
	width: 500px;
	text-align: center;
}
.areaStaff .boxWrapper .boxStaff .staffContent .staffName{
	border-bottom: 1px solid #808080;
}
.areaStaff .boxWrapper .boxStaff .staffContent .staffName .ja{
	font-size: 20px;
	margin-bottom: 3px;
}
.areaStaff .boxWrapper .boxStaff .staffContent .staffName .en{
	font-size: 12px;
	margin-bottom: 18px;
}
.areaStaff .boxWrapper .boxStaff .staffContent .role .en{
	font-size: 12px;
	margin-top: 17px;
    margin-bottom: 5px;
}
.staffPhotofull{
    margin-top: 30px;
}


/*.areaCompany*/
.areaCompany{

}
.areaCompany .boxWrapper{

}
.areaCompany .boxWrapper .boxCompany{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
	padding: 0 20px;
}
.areaCompany .boxWrapper .boxCompany .companyMap{
	width: 500px;
}
.areaCompany .boxWrapper .boxCompany .companyMap iframe{
	width: 100%;
	height: 300px;
}
.areaCompany .boxWrapper .boxCompany .companyContent{
	width: 500px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .title{
	font-size: 20px;
	padding-left: 12px;
	padding-bottom: 2px;
	border-bottom: 1px solid #808080;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table{
    margin-top: 16px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table tr th,
.areaCompany .boxWrapper .boxCompany .companyContent .table tr td{
	font-size: 16px;
	padding-bottom: 11px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table tr.address th{
	vertical-align: top;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table tr.address th,
.areaCompany .boxWrapper .boxCompany .companyContent .table tr.address td{
	padding-bottom: 6px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table tr th{
	font-weight: normal;
	text-align: left;
	padding-left: 12px;
	width: 39.6%;
}
.areaCompany .boxWrapper .boxCompany .companyContent .table tr td{
	line-height: 1.75;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn{
	text-align: center;
    margin: 5px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn a{
	font-size: 14px;
	display: inline-block;
	color: #fff;
	background: #333333;
	width: 90px;
	padding: 8px 0;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn_line{
	text-align: center;
    margin: 5px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn_line a{
	font-size: 14px;
	display: inline-block;
	color: #fff;
	background: #3DC51B;
	width: 90px;
	padding: 8px 0;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn_insta{
	text-align: center;
    margin: 5px;
}
.areaCompany .boxWrapper .boxCompany .companyContent .btn_insta a{
	font-size: 14px;
	display: inline-block;
	color: #fff;
	background: #A44AB4;
	width: 90px;
	padding: 8px 0;
}

@media(min-width: 769px){
	.areaStaff{
		padding-bottom: 6px;
	}
	.areaStaff .boxWrapper .boxStaff .staffContent{
		transform: translateY(-4px);
	}
	.areaStaff .boxWrapper .boxStaff:nth-child(even),
	.areaCompany .boxWrapper .boxCompany:nth-child(even){
		flex-direction: row-reverse;
	}
	.areaCompany .boxWrapper .boxCompany .companyContent{
		transform: translateY(-5px);
	}
	.areaCompany .boxWrapper .boxCompany .companyContent .table tr td a:hover{
		text-decoration: underline;
	}
}

@media(max-width: 768px){
	.areaStaff .boxWrapper .boxStaff,
	.areaCompany .boxWrapper .boxCompany{
		display: block;
		margin-top: 22px;
	}

	.areaStaff .boxWrapper .boxStaff .staffPhoto,
	.areaCompany .boxWrapper .boxCompany .companyMap iframe{
		height: 189px;
	}

	.areaStaff .boxWrapper .boxStaff .staffPhoto,
	.areaStaff .boxWrapper .boxStaff .staffContent,
	.areaCompany .boxWrapper .boxCompany .companyMap,
	.areaCompany .boxWrapper .boxCompany .companyContent{
		width: 100%;
	}
    
    .companyContent{
        margin-bottom: 10px;
    }

	.areaStaff .boxWrapper .boxStaff .staffContent,
	.areaCompany .boxWrapper .boxCompany .companyContent{
		margin-top: 16px;
	}
	.areaCompany .boxWrapper .boxCompany .companyContent .table tr th{
		width: 32%;
	}
}

/*.areaSchedule*/
.areaSchedule .wrapSchedule{
	width: 1060px;
	margin: 0 auto;
}
.areaSchedule .wrapSchedule .scheduleTitle{
	font-size: 20px;
    margin-top: 20px;
	margin-bottom: 3px;
}
.areaSchedule .wrapSchedule .tableone{
	margin-bottom: 10px;
}
.areaSchedule .wrapSchedule .tableone tr{
	border: 1px solid #999999;
}
.areaSchedule .wrapSchedule .tableone th{
	width: 177px;
	border: 1px solid #999999;
	font-size: 18px;
	font-weight: 400;
	background: #e6e6e6;
	padding: 11px 22px;
}
.areaSchedule .wrapSchedule .tableone td{
	border: 1px solid #999999;
	padding: 11px 22px 9px;
}
.areaSchedule .wrapSchedule .tableone td .label{
	font-size: 15px;
	color: #fff;
	text-align: center;
	background: #c7b299;
	font-weight: 300;
	padding: 4px 0;
	margin-bottom: 5px;
	letter-spacing: 0.8px;
}
.areaSchedule .wrapSchedule .tableone td .label.blue{
	background: #0071bc;
}
.areaSchedule .wrapSchedule .tableone td .label.orange{
	background: #f15a24;
}
.areaSchedule .wrapSchedule .tableone td .label.pink{
	background: #B46F9C;
}
.areaSchedule .wrapSchedule .tableone td .label.red{
	background: #AB1D20;
}
.areaSchedule .wrapSchedule .tableone td .label.brown{
	background: #700709;
}
.areaSchedule .wrapSchedule .tableone td .label.purple{
	background: #7D4BA8;
}
.areaSchedule .wrapSchedule .tableone td .label.green{
	background: #3A8743;
}
.areaSchedule .wrapSchedule .tableone td .label.yellow{
	background: #BFA628;
}
.areaSchedule .wrapSchedule .tableone td .label.sky{
	background: #5D96DB;
}
.areaSchedule .wrapSchedule .tableone td .label.tarco{
	background: #35CFB9;
}



.areaSchedule .wrapSchedule .tableone td .time{
	color: #333333;
	text-align: center;
	font-size: 16px;
	letter-spacing: 1px;
}


.areaSchedule .wrapSchedule .wrapTable.mgb{
	margin-bottom: 23px;
}
.areaSchedule .wrapSchedule .tableTwo{

}
.areaSchedule .wrapSchedule .tableTwo tr{
	border: 1px solid #999999;
}
.areaSchedule .wrapSchedule .tableTwo th{
	width: 152px;
	border: 1px solid #999999;
	font-size: 17px;
	font-weight: 300;
	background: #666666;
	color: #fff;
	padding: 11.5px 0 13.5px;
	letter-spacing: 1px;
}
.areaSchedule .wrapSchedule .tableTwo tr th:nth-child(1){
	width: 157px;
	letter-spacing: 1px;
}
.areaSchedule .wrapSchedule .tableTwo td{
	border: 1px solid #999999;
    padding: 8px 13px 5px 12px;
    /* height: 80px;*/
    vertical-align: top;
}
.grit{
	text-align: center;
	font-size: 16px;
    color: #4C4C4C;
	line-height: 1.2;
	margin-top: 1px;
    background-color: #C7C7C7;
}
.studio{
	text-align: center;
	font-size: 16px;
    color: #BC6E0C;
	line-height: 1.2;
	margin-top: 1px;
    background-color: #EBCE8F;
}
.under{
	border-bottom: 3px solid #999999 !important;
}

.areaSchedule .wrapSchedule .tableTwo td .date{
	font-size: 18px;
	text-align: right;
	line-height: 1.2;
}
.areaSchedule .wrapSchedule .tableTwo td .closing{
	font-size: 16px;
	color: #fff;
	text-align: center;
	background: #c1272d;
	font-weight: 300;
	padding: 2px 0 4px;
	margin-top: 8px;
}
.areaSchedule .wrapSchedule .tableTwo td .label{
	font-size: 15px;
	color: #fff;
	text-align: center;
	background: #c7b299;
	font-weight: 300;
	padding: 4px 0;
	margin-bottom: 5px;
	letter-spacing: 0.8px;
}
.areaSchedule .wrapSchedule .tableTwo td .label.blue{
	background: #0071bc;
}
.areaSchedule .wrapSchedule .tableTwo td .label.orange{
	background: #f15a24;
}
.areaSchedule .wrapSchedule .tableTwo td .label.pink{
	background: #B46F9C;
}
.areaSchedule .wrapSchedule .tableTwo td .label.red{
	background: #AB1D20;
}
.areaSchedule .wrapSchedule .tableTwo td .label.brown{
	background: #700709;
}
.areaSchedule .wrapSchedule .tableTwo td .label.purple{
	background: #7D4BA8;
}
.areaSchedule .wrapSchedule .tableTwo td .label.green{
	background: #3A8743;
}
.areaSchedule .wrapSchedule .tableTwo td .label.yellow{
	background: #BFA628;
}
.areaSchedule .wrapSchedule .tableTwo td .label.tarco{
	background: #35CFB9;
}

.areaSchedule .wrapSchedule .tableTwo td .time{
	text-align: center;
	font-size: 16px;
	line-height: 1.4;
	margin-top: 1px;
}
.areaSchedule .wrapSchedule .tableTwo td .time .tnum{
	letter-spacing: 1px;
}
.areaSchedule .wrapSchedule .tableTwo td .time.blue{
	color: #0071bc;
}
.areaSchedule .wrapSchedule .tableTwo td .time.orange{
	color: #f15a24;
}
.areaSchedule .wrapSchedule .tableTwo td .time.green{
	color: #1E8C1C;
}
.areaSchedule .wrapSchedule .tableTwo td .time.purple{
	color: #7D4BA8;
}
.areaSchedule .wrapSchedule .tableTwo td .time.yellow{
	color: #BFA628;
}
.areaSchedule .wrapSchedule .tableTwo td .time.pink{
	color: #B46F9C;
}
.areaSchedule .wrapSchedule .tableTwo td .time.brown{
	color: #700709;
}
.areaSchedule .wrapSchedule .tableTwo td .time.red{
	color: #B3090C;
}
.areaSchedule .wrapSchedule .tableTwo td .time.sky{
	color: #5D96DB;
}
.areaSchedule .wrapSchedule .tableTwo td .time.tarco{
	color: #35CFB9;
}

.areaSchedule.area {
	padding-bottom: 54px;
}

.txt_blue{
    color: #0071bc;
}
.txt_orange{
	color: #f15a24;
}
.txt_green{
	color: #1E8C1C;
}
.txt_purple{
	color: #7D4BA8;
}
.txt_yellow{
	color: #BFA628;
}
.txt_pink{
	color: #B46F9C;
}
.txt_brown{
	color: #700709;
}
.txt_red{
	color: #B3090C;
}
.txt_sky{
	color: #5D96DB;
}
.txt_tarco{
	color: #35CFB9;
}



/*AREAFAQ*/
.areaFAQ .areaTitle {
	margin-bottom: 23px;
}
.areaFAQ .btnContact {
	text-align: center;
}
.areaFAQ .btnContact a {
	display: inline-block;
	width: 350px;
	font-size: 20px;
	color: #333;
	border: 1px solid #808080;
	border-radius: 17px;
	padding: 14px 0;
	transition: all 250ms linear;
}
.areaFAQ .btnContactLine {
	text-align: center;
}
.areaFAQ .btnContactLine a {
	display: inline-block;
	width: 350px;
	font-size: 20px;
	color: #fff;
	border: 1px solid #3DC51B;
	border-radius: 17px;
    background-color: #3DC51B;
	padding: 14px 0;
	transition: all 250ms linear;
    margin-bottom: 15px;
}
.areaFAQ .btnContactLine a:hover {
	color: #3DC51B;
	border: 1px solid #3DC51B;
	border-radius: 17px;
    background-color: #FFF;
}
.areaFAQ .faqList {
	max-width: 1060px;
	margin: 0 auto 52.5px;
}
.areaFAQ .faqList li {
}
.areaFAQ .faqList li + li {
	margin-top: 23px;
}
.areaFAQ .faqList li .quest {
	font-size: 20px;
	border-bottom: 2px dotted rgba(153,153,153,0.5);
	margin-bottom: 8px;
	padding-bottom: 3px;
	padding-left: 43px;
	text-indent: -40px;
}
.areaFAQ .faqList li .quest .textQ {
	font-size: 30px;
	vertical-align: -1px;
	color: #C1272D;
	margin-right: 11px;
}
.areaFAQ .faqList li .answer {
	font-size: 16px;
	letter-spacing: 0.3px;
	padding-left: 43px;
	text-indent: -40px;
	line-height: 1.1;
}
.areaFAQ .faqList li .answer .textA {
	font-size: 30px;
	vertical-align: -1px;
	color: #2E3192;
	margin-right: 11px;
	letter-spacing: 0;
}
/*AREAFAQ*/
#content {
    padding-bottom: 144px;
}
.area {
	padding-bottom: 0;
}
@media (min-width: 769px) {
	.areaFAQ .btnContact a:hover {
		background: #333333;
		color: #fff;
	}
}
@media(max-width: 768px){
	/*AREASCHEDULE*/
	.areaSchedule .wrapSchedule{
		width: 100%;
	}
	.areaSchedule .wrapSchedule .scheduleTitle{
		font-size: 18px;
	}
	.areaSchedule .wrapSchedule .tableone th{
		font-size: 16px;
	}
	.areaSchedule .wrapSchedule .tableone td .label{
		font-size: 14px;
	}
	.areaSchedule .wrapSchedule .tableone td .time{
		font-size: 14px;
	}
	.areaSchedule .wrapSchedule .tableTwo{
		width: 836px;
	}
	.areaSchedule .wrapSchedule .tableTwo th,.areaSchedule .wrapSchedule .tableTwo td .date{
		font-size: 16px;
	}
	.areaSchedule .wrapSchedule .tableTwo td .closing{
		font-size: 14px;
	}
	.areaSchedule .wrapSchedule .tableTwo td .time{
		font-size: 14px;
	}
	.areaSchedule .wrapSchedule .wrapTable{
		width: 100%;
		overflow-x: auto;
		margin-bottom: 23px;
	}
	.areaSchedule .wrapSchedule .tableone{
		width: 1070px;
		margin-bottom: 0;
	}
	.areaSchedule.area {
		padding-bottom: 0;
	}
	/*AREASCHEDULE*/

	.area {
	}
	/*AREAFAQ*/
	.areaFAQ {
		margin-bottom: 0;
		padding-bottom: 55px;
	}
	.areaFAQ .faqList {
		margin-bottom: 30px;
	}
	.areaFAQ .faqList li .quest {
	    font-size: 16px;
	    padding-left: 35px;
	    text-indent: -33px;
	    line-height: 1.1;
	    padding-bottom: 10px;
	}
	.areaFAQ .faqList li .quest .textQ {
	    font-size: 28px;
	    margin-right: 5px;
	    font-weight: normal;
	}
	.areaFAQ .faqList li .answer {
	    font-size: 14px;
	    padding-left: 36px;
	    text-indent: -32px;
	    line-height: 1.5;
	}
	.areaFAQ .faqList li .answer .textA {
	    font-size: 28px;
	    margin-right: 5px;
	    line-height: 1;
	}
	.areaFAQ .btnContact a {
	    width: 300px;
	    font-size: 16px;
	    border-radius: 12px;
	    padding: 10px 0;
	}
	.areaFAQ .btnContactLine a {
	    width: 300px;
	    font-size: 16px;
	    border-radius: 12px;
	    padding: 10px 0;
	}
	/*AREAFAQ*/

}

.listPhoto1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px;
}

.listPhoto1 li {
    height: 70px;
    margin-right: 40px;
    width: calc(100%/4 - 36px);
}

.listPhoto1 li:nth-child(4n) {
    margin-right: 0;
}

.listPhoto1 li img {
    width: 100%;
    /* height: 100%; */
    object-position: center;
    object-fit: cover;
}

.listPhoto1 li .title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 22px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    font-weight: normal;
    padding: 4px 0 3px;
}

.listPhoto1 li .btn {
    text-align: center;
    margin-top: 10px;
}

.listPhoto1 li .btn a {
    display: inline-block;
    text-align: center;
    color: #fff;
    background: #333333;
    width: 140px;
    padding: 5px 0 4px;
}

.listPhoto1More {
    flex-wrap: wrap;
}

.listPhoto1More .photo {
    position: relative;
    background: #dedede;
}

.listPhoto1More li {
    background: none;
    height: auto;
    width: calc(100%/3 - 37px);
    margin-bottom: 50px;
}

@media(max-width: 768px){
    .listPhoto1 {
        display: block;
    }

    .listPhoto1 li {
        width: 30%;
        margin-right: 2%;
        margin-bottom: 5px;
        float: left;
    }
    .listPhoto1 li:nth-child(4n) {
        margin-right: 2%;
    }
}