/*  star.less  */

body{
  font-family: 'Noto Sans JP','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
}

html{
  scroll-behavior: smooth;
}
/* Take3 Official */

	.fs12{font-size:12px;}
	.fs14{font-size:14px;}
	.fs18{font-size:18px;}
	.fs21{font-size:21px;}
	.fs24{font-size:24px;}
	.fs30{font-size:30px;}
	.clsmall75{font-size:0.75em;}
	.clsmall90{font-size:90%;}

	.clPConly{display:block;}
	.clSPonly{display:none;}
	.clPConly-inline{display:inline;}
	.clSPonly-inline{display:none;}
	.clPConly-inline-block{display:inline-block;}
	.clSPonly-inline-block{display:none;}
	.clflexInner{display:flex;display: -webkit-flex;}

	/*** ボタン矢印 **/
	/***  <a href = ""  class = "clIconLinkAngleRight" >〇〇〇〇〇</a> **/
	.clIconLinkAngleRight{position:relative;}
	.clIconLinkAngleRight:after{content:'\f105';font-family:FontAwesome;position:absolute;right:10px;}

	a:hover img{opacity:0.7;transition: 0.7s;}
	a,a:hover{transition: 0.7s;}
	span.cljp{
		font-size:0.6em;
		line-height:1em;
	}
	.clEntryBtn{
		background: transparent linear-gradient(198deg, #CC151D 0%, #910C12 100%) 0% 0% no-repeat padding-box;
		text-align:center;
/*		padding:10px 0px;*/
		line-height:1;
		transition: 0.7s;
		a{
			color:#fff !important;
			display:block;
			padding:10px 0px;
		}
	}
	.clEntryBtn:hover{
		background: transparent linear-gradient(196deg, #434343 0%, #000000 100%) 0% 0% no-repeat padding-box;
		transition: 0.7s;
	}
	.clBtnMore{
		a{
			display:block;
			padding:10px 0px;
			font-size:20px;
			text-align:right;
			letter-spacing:0.2px;
		}
		a:after{
			content:url("../img/common/arrow01.svg");
			margin-left:10px;
		}
	}

	/****		Header	****/
	header{
		position:fixed;
		top:0px;
		width:100%;
		z-index:2;
	}
	main{
		margin-top:95px;
		position:relative;		/***z-index用***/
		z-index:1;
	}

	.clHeaderWraper{
		background-color:rgba(255,255,255,0.9);
		.clHeaderlogo{
			padding:15px 0px 0px;
			text-align:left;
			.clHeaderlogoInner{
				text-align:center;
				img{max-width:100%;}
				a{
					color:#CC151D !important;
					font-size: 1.2em;
	    		letter-spacing: 0.1em;
	    	}
				a:hover{text-decoration: none;}
			}

		}
		.globalMenu{
			padding:10px 0px;
			text-align:center;
			ul{
					display: flex;
					display: -webkit-flex;
					-webkit-justify-content: flex-end;
    			justify-content: flex-end;
    			list-style: none;
				li{
						padding:10px 15px;
						line-height:1;
						position:relative;
					a{
						font-weight:600;
						color:#333;
						font-size:20px;
					}
					ul{
  					display:none;
  					li{

  					}
					}
				}
				li:hover{
					border-bottom:4px solid #cc151d;
					a{
						text-decoration: none;
					}
					ul{								/**2階層目**/
						display:block;
						position:absolute;
						padding-left:0px;
						top:64px;
				    left: 0px;
				    background-color: #eee;
				    width: 200px;
				    border-bottom:4px solid #cc151d;
				    li{
				    	border-bottom:1px dotted #ccc;
				    	padding:0px;
				    	a{
				    		padding:15px 0px;				    	
								font-weight:400;
								color:#333;
								font-size:15px;
								line-height:1.4;
								display:block;
				    	}
				    }
				    li:hover{
				    	border-bottom:0px;
				    	background-color:#ddd;
				    }
					}
				}
			}
		}

		.clEntryBtnWrap{
			padding:10px 0px 0px;
		}
	}

	@media screen and (max-width: 1200px){
		.clHeaderWraper{
			.globalMenu{
					ul{
						li:hover{	

							ul{								/**2階層目**/
								top:56px;
				    	}
				  	}
					}
			}
		}		
	}

	@media screen and (max-width: 991px){
		.clHeaderWraper{
			.globalMenu{
					ul{
						li:hover{	

							ul{								/**2階層目**/
								top:40px;
				    	}
				  	}
					}
			}
		}		
	}

	/****		Footer	****/

	footer{
		min-height:300px;
		background-image:url("../img/common/bgfooter.jpg");
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center center;
		.clFooterLogo{
			text-align: center;
    	margin: 60px auto 30px;		
    	img{max-width:90%;}
		}
		.clEntryBtn{
			width: 300px;
    	margin: 30px auto 60px;
		}
		.clFooterInfo{
			background-color:#B11219;
			.clFooterInfoInner{
				display: flex;
				display: -webkit-flex;
				-webkit-justify-content: center;
    		justify-content: center;
				p{
					padding:10px 20px;
					a{
						color:#fff !important;
						font-size:18px;
					}
				}
			}
		}
	}


	/****		TOP		****/


	.swiper-wrapper {
	  /* wrapperのサイズを調整 */
/*
	  width: 500px;
	  height: 300px;
*/
	}

	.swiper-slide {
	  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
/*
	  color: #333;
	  width: 500px;
	  height: 500px;
	  text-align: center;
	  line-height: 300px;
*/
	  line-height: 300px;
	}
	.swiper{
		display:none;						/***初期表示時に写真読み込みに時間がかかるため***/
		h1{
			position:absolute;
			bottom:1em;
			left:3em;
			font: normal normal bold 49px/68px 'Noto Sans JP';
			text-shadow: 0px 0px 15px #000000B3;
			color: #FFFFFF;
			z-index:3;
		}

	}
	.swiper.active{display:block;}		/***	JSで表示を制御	***/
	.swiper-wrapper .swiper-slide img{width:125%;}

	.mySwiper2{
		position:relative;
		overflow: hidden;
		.swiper-wrapper {
			width:33%;
			.swiper-slide{

			} 
		}
		.swiper-button-next{right:30px;}
		.swiper-button-prev{left:30px;}
		.swiper-button-next:after{
			content:url("../img/common/arrow_r.svg");
		}
		.swiper-button-prev:after{
			content:url("../img/common/arrow_l.svg");
		}		
	}
	.mySwiper2 .swiper-slide .clImfo,
	.mySwiper2 .swiper-slide .clBtn,
	.mySwiper2 .swiper-slide .clOcc,
	.mySwiper2 .swiper-slide .clImg{line-height:1.2em;}

	.mySwiper2 .swiper-slide .clImfo span.clOcc{
		padding: 3px 10px;
    background-color: #cc151d;
    color: #fff;
    margin-right: 10px;
    font-size: 14px;
	}
	.clCornerImg1{
    position: absolute;
    bottom: 0px;
    z-index: 2;
    left: -160px;	
	}
	.clCornerImg2{
    position: absolute;
    top: 0px;
    z-index: 2;
    right: -160px;	
	}

	.clMessagewrap,.clAboutwrap,.clInterviewwrap,.clSpecialwrap,.clRecruitwrap{
		padding:40px 0px;
		margin:40px auto;
		h2{
			font: italic normal bold 80px/88px Roboto;
			color:#CC151D;
			text-align:center;
			font-size:80px;
			line-height: 1.0;
    	margin-bottom: 0px;
		}
  	p{
			font-size:20px;
			line-height:1.7;
			color:#222;    	
  	}
		p.jp{
			font-size:18px;
			color:#222;
		}		
	}

	.clMessagewrap{
		padding: 80px 0px;
    margin: 0px auto;
		background:url("../img/top/bg02.svg"),url("../img/top/bg01.svg");
		background-repeat:no-repeat,no-repeat;
		background-size:auto,auto;
		background-position:left top,right bottom;
		.clTopMessage{
			display: flex;
			display: -webkit-flex;
	    -webkit-flex-direction: row-reverse;
	    flex-direction: row-reverse;
	    background-color:#fff;
	    .clTopMessageTitle{
	    	width: 50%;
    		text-align: left;
    		padding: 20px;
	    }
	    .clTopMessageBlock{
	    	width:50%;
	    	img{width:100%;}
	    }

		}
		.clBtnMore{
			width:220px;
			margin:40px 0px 0px auto;
			background: transparent linear-gradient(195deg, #434343 0%, #000000 100%) 0% 0% no-repeat padding-box;
			a{
				color:#fff !important;
				text-align:center;
			}
		}
	}

	.clAboutwrap{
		padding: 80px 0px;
    margin: 0px auto;
		background:url("../img/top/bg03.svg"),url("../img/top/bg04.svg");
		background-repeat:no-repeat,no-repeat;
		background-size:250px auto,250px auto;
		background-position:left top,right bottom;

		.clTopAbout{	
			background-color:#fff;
			padding-right:10%;
			.clTopAboutTitle{
				width:100%;
    		text-align: left;
    		padding: 20px;
    		.clflexInner{
    			-webkit-align-items: center;
    			align-items: center;
    			p{
    				padding-top: 30px;
    				padding-left: 30px;
    			}
    		}
    		p.clMess{margin-top:30px;}
			}
			.clTopAboutInner{
				display: flex;
				display: -webkit-flex;
			}
			.clTopAboutBlock{
				width:33.3%;
				.clTopAboutBlockInner{
					position: relative;
					img.overrap{opacity:0;position:absolute;top:0;}
					img{
						width:130%;
						transition: 0.7s;
					}

				}
				.clTopAboutBlockInner:hover{
					img.base,a:hover img{opacity:0;}
					img.overrap,a:hover img.overrap{opacity:1;}
				}

				h3{
					color:#fff;
					position: absolute;
					margin: auto;
					font-size:30px;
				}
			}
			.clTopAboutBlock.blk1{
				margin-top:0px;
				h3{
    			bottom: 45%;
    			left: 50%;
				}
			}
			.clTopAboutBlock.blk2{
				margin-top:80px;
				margin-left:33px;			/**中央画像の位置調整**/
				h3{
    			bottom: 45%;
    			left: 50%;
				}
			}
			.clTopAboutBlock.blk3{
				margin-top:0px;
				h3{
    			bottom: 45%;
    			left: 50%;
				}
			}

		}
		.clBtnMore{
			width:220px;
			position: absolute;
    	bottom: 10px;
    	right: -60px;
			a{
				color:#fff !important;
			}
		}
	}

	.clInterviewwrap{
		background: transparent linear-gradient(180deg, #F8F8F8 0%, #E5E5E5 100%) 0% 0% no-repeat padding-box;
		.clTopInterviewTitle{
			margin-bottom:30px;
			padding:20px;
  		.clflexInner{
  			-webkit-align-items: center;
  			align-items: center;
  			p{
  				padding-top: 30px;
  				padding-left: 30px;
  			}
  		}		
		}
		.clTopInterviewInner{
			.clStaffBlock{
				background-color:#fff;
				img{width:100%;}
				.clImfo{padding:20px 20px 0px;}
				.clBtnMore{
		    	text-align:right;
		    	padding-right:20px;
					a{
						color:#cc151d !important;
						padding:0px;
					}
					a:after{
						content:url("../img/common/arrow01R.svg");
						margin-left:10px;
					}
				}
			}
		}

	}

	.clSpecialwrap{
		.clTopSpecialTitle{
			padding:20px;
			p.jp{text-align:center;}
		}
		.clSpecialBlock{
			max-height: 500px;
    	margin-bottom: 40px;
    	overflow: hidden;
    	position:relative;


    	.clTxtBlock{
		    position: absolute;
		    text-align:center;
		    p,h3{color:#fff;}

    	}

			.clTxtBlockInner{
			    position: relative;
			    z-index: 1;
			    text-align: center;
			    margin: 0 auto;
			    padding:30px;
			    width: 24em;

			}
			.clTxtBlockInner::before{
			    transform: skewX(-12deg);
			    content: "";					/*ボックスを作る*/
			    position: absolute;		/*ポジションで中央に配置*/
			    top: 0; bottom: 0; left: 0; right: 0;
			    z-index: -1;					/* 親要素の後ろに来るように-1 */
			    background: transparent linear-gradient(195deg, #434343 0%, #000000 100%) 0% 0% no-repeat padding-box;
			}

    	a:hover{img{opacitey:0.9;}}
		}

		.clSpecialBlock.blk1{

			background:url("../img/top/bg01.svg");
			background-repeat:no-repeat;
			background-size:auto;
			background-position:right top;
    	.clSpecialBlockInner{
    		position:relative;
    		width:1400px;
    		max-width:100%;
    	}
    	img{max-width:1400px;}
    	.clTxtBlock{
		    top: 40px;
		    right: -100px;
    	}

		}
		.clSpecialBlock.blk2{
			background:url("../img/top/bg02.svg");
			background-repeat:no-repeat;
			background-size:auto;
			background-position:left bottom;
		  text-align: right;
		  .clSpecialBlockInner{
    		position:relative;
    		width:100%;
    		position: relative;
    		width: 1400px;
    		margin-right: 0;
    		margin-left: auto;
    		img{max-width:1400px;}
    	}
    	.clTxtBlock{
		    top: 40px;
		    left:-100px;
    	}

		}

	}
	.clRecruitwrap{
		.clTopRecruitTitle{
			padding:20px;
			p.jp{text-align:center;}
		}
		.clTopRecruitInner{

			ul{
				list-style:none;
				padding-left:0px;
				display: flex;
				display: -webkit-flex;

				li{
					width:25%;
					text-align:center;
					.clTopRecruitBlock{

						.clTopRecruitBlockInner{
							position: relative;
							img.overrap{opacity:0;position:absolute;top:0;}
							img{
								width:100%;
							}

						}
						.clTopRecruitBlockInner:hover{
							img.base{opacity:0;}
							img.overrap{opacity:1;}
						}

						h3{
							color:#fff;
							position: absolute;
							margin: auto;
							font-size:30px;
							top: 45%;
					    right: 0;
					    left: 0;
						}
					}
					a{
						display:block;
						padding:0px;
						font-size:1.4em;
					}
				}
			}
		}
	}

	.cljumptoTop{
		position:fixed;
		right:20px;
		bottom:10px;
		z-index:2;
	
			
			p.toTOP{
				position:relative;
				color:#fff;
				background: transparent linear-gradient(198deg, #CC151D 0%, #910C12 100%) 0% 0% no-repeat padding-box;
				border-radius:50%;
				width: 100%;
		    text-align: center;
		    padding: 40px 33px 20px;
		    font-size: 16px;
			}
			p.toTOP:before{
				position: absolute;
				top: 5px;
				font-family: "Font Awesome 5 Free";
  			content: "\f106";
  			font-weight: 900;
  			font-size: 30px;
  			left: 0;
  			right: 0;
  			margin: auto;
			}
			
		

		a:hover img{opacity:1;}
	}

@media screen and (max-width: 480px){
	.cljumptoTop{
			
			p.toTOP{
				position:relative;
				width: 100%;
		    text-align: center;
		    padding: 25px 22.5px 15px;
		    font-size: 12px;
			}
			p.toTOP:before{
  			font-size: 20px;
  			top: 3px;
			}
	}
}


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

		.clSpecialwrap{
			.clSpecialBlock{
	    	.clTxtBlock{
	    	}
			}

			.clSpecialBlock.blk1{
	    	.clTxtBlock{
	    		right:20px;
	    	}

			}
			.clSpecialBlock.blk2{
	    	.clTxtBlock{
			    left:20px;
	    	}
			}
		}
	}

	@media screen and (max-width: 1200px){
 		
	 	.clHeaderWraper{	
			.globalMenu{
				ul{
					li{
							padding:10px 10px;
						a{
							font-size:16px;
						}
					}
				}
			}
		}

		.clMessagewrap,.clAboutwrap,.clSpecialwrap .clSpecialBlock.blk1,.clSpecialwrap .clSpecialBlock.blk2{
			background:none;
		}

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

		.swiper{
			h1{
				left:3em;
				font: normal normal bold 36px/44px 'Noto Sans JP';
			}
		}

		.clAboutwrap{
			.clTopAbout{
				display: block;
				.clTopAboutBlock{
					width:100%;
					h3{font-size:24px;}
				}
				.clTopAboutBlock.blk1 h3,.clTopAboutBlock.blk2 h3,.clTopAboutBlock.blk3 h3{left:40%;}
			}
			.clBtnMore{
				right:-20px;
			}
		}

	}

	@media screen and (max-width: 991px) and (min-width: 768px) {
 		
	 	.clHeaderWraper{
	 		.clHeaderlogo{
	 			img{max-width:100%;}
	 		}
			.globalMenu{
				ul{
					li{
						.cljp{display:none;}
					}
				}
			}
		}



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

		.swiper{
			h1{
				left:3em;
				font: normal normal bold 30px/40px 'Noto Sans JP';
			}
		}	
	}
	@media screen and (max-width: 480px){

	  /* Take3 Official */
		.clPConly{display:none;}
		.clSPonly{display:block;}
		.clPConly-inline{display:none;}
		.clSPonly-inline{display:inline;}
		.clPConly-inline-block{display:none;}
		.clSPonly-inline-block{display:inline-block;}
		.clflexInner{display:block;}

	body {
		position: relative;
		overflow-x: hidden;
	}
		.swiper{
			h1{
				left:2em;
				font: normal normal bold 27px/38px 'Noto Sans JP';
			}
		}
		.clCornerImg1{
	    left: -210px;	
		}
		.clCornerImg2{
	    right: -210px;	
		}

		/****		Footer	****/

		footer{
			.clFooterInfo{
				.clFooterInfoInner{
					display:block;
					text-align:center;
					padding:20px 0px;
					p{
						padding:10px 20px;
						a{
							color:#fff !important;
							font-size:18px;
						}
					}
				}
			}
		}

		.clMessagewrap,.clAboutwrap,.clInterviewwrap,.clSpecialwrap,.clRecruitwrap{
			h2{
				font-size:42px;
				text-align:left;
			}
	  	p{
				font-size:18px;
				line-height:1.7;
				color:#222;    	
	  	}
			p.jp{
				font-size:16px;
				color:#222;
			}		
		}


		.clMessagewrap{
			background:none;
			padding:20px 0px;
			.clTopMessage{
				display: block;
		    .clTopMessageTitle{
		    	width: 100%;
		    }
		    .clTopMessageBlock{
		    	width:100%;
		    }

			}
			.clBtnMore{
				a{
				}
			}
		}

		.clAboutwrap{
			background:none;
			padding:20px 0px;
			.clTopAbout{
				display: block;
				.clTopAboutTitle{
					width:100%;
					.clflexInner{
						p{
		  				padding-top: 0px;
		  				padding-left: 0px;
		  			}
		  		}
				}
				.clTopAboutInner{
					display:block;

				}
				.clTopAboutBlock{
					width:100%;			
				}
				.clTopAboutBlock.blk1{
					margin-top:40px;
					img{width:100%;}
					h3{left:40%;font-size:20px;}
				}
				.clTopAboutBlock.blk2{
					margin-top:40px;
					margin-left:0px;
					img{width:100%;}
					h3{left:40%;font-size:20px;}
				}
				.clTopAboutBlock.blk3{
					img{width:100%;}
					margin-top:40px;
					h3{left:40%;font-size:20px;}
				}

			}
			.clBtnMore{
				right:20px;
				a{
					font-size:15px;
				}
			}
		}

		.clInterviewwrap{
			padding:0px;
			.clTopInterviewTitle{
				padding:20px;
				.clflexInner{
					p{
	  				padding-top: 0px;
	  				padding-left: 0px;

	  			}
	  			p.jp{text-align:left;}
  			}
			}
			.clTopInterviewInner{
				.clStaffBlock{
					width:50%;
					.clImfo{
						padding:20px 15px 0px;
						p{font-size:16px;}
					}
					.clBtnMore a{font-size:14px;}
				}
			}
		}

		.clSpecialwrap{
			padding:0px;
			.clTopSpecialTitle{
				h2,p.jp{text-align:center;}
			}
			.clSpecialBlock{
				max-height:250px;
				margin-bottom: 40px;
				padding-bottom:80px;
			}
			.clSpecialBlock.blk1, .clSpecialBlock.blk2{
				background-image:none;
				.clSpecialBlockInner{max-width:100%;}
				img{max-height:200px;}
				.clTxtBlock{
					top:auto;
					bottom:-40px;
					right: auto;
    			left: 20px;
					.clTxtBlockInner{
						text-align:left;
						padding:10px 20px;
						width:20em;
						p{margin-bottom:5px;}
						h3{font-size:20px;margin:0px auto;}
					}
				}
			}
		}

		.clRecruitwrap{
			padding:0px;		
			.clTopRecruitTitle{
				h2,p.jp{text-align:center;}
			}

			.clTopRecruitInner{
				ul{
					display: flex;
					display: -webkit-flex;
			    flex-wrap: wrap;
			    -webkit-flex-wrap: wrap;
					li{
						border:1px solid #ccc;
						width:50%;
						text-align:center;
						a{
							display:block;
							padding:0px;
							font-size:1.2em;
						}
						.clTopRecruitBlock{
							h3{font-size:20px;}
						} 
					}
				}
			}
		}

		.mySwiper2{
			.swiper-wrapper {
				width:100%;
			}
			.swiper-button-next{right:20px;}
			.swiper-button-prev{left:20px;}			
			.swiper-button-next:after{
				content:url("../img/common/arrow_r_sp.svg");
			}
			.swiper-button-prev:after{
				content:url("../img/common/arrow_l_sp.svg");
			}

		}



	}