@charset "utf-8";
*{
	padding:0;
 	margin:0;
}
h1,h2,h3{
	font-size:100%;
}

img{
	vertical-aligh:bottom;
}
body{
    font-size: clamp(14px, 1.03vw, 18px);
    line-height: 1.8;
    white-space: nowrap;
}

/*google_font*/
.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
/**/

#wrap{
	width:100%;
	background-color:#fff;
}

/*fadein*/
.fade-in{
	opacity:0;
	transition:opacity 1.3s ease-in-out;
}
.fade-in.show{
	opacity:1;
}
/**/

/* slideinLeft*/
.slideinLeft {
    transform: translateX(-20px);
    transition: transform 1s ease-out;
}
.slideinLeft.show {
    transform: translateX(0);
}
/**/

/* slideinRight*/
.slideinRight {
    transform: translateX(20px);
    transition: transform 1s ease-out;
}
.slideinRight.show {
    transform: translateX(0);
}
/**/


h1{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background-image:url("image/pc_top_img.webp");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	aspect-ratio: 1280 / 621;
	margin-bottom:20px;
}

#president-text{
	text-align:center;
	background-color:#e7f7f7;
	position:relative;
	padding:0 5%;
}

/*逆三角形*/
#president-text::after{
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);
    background-color: #e7f7f7;
	left: 0;
    bottom:0;
	transform: translateY(59px);
}
/**/

#president-text h3{
	font-size: clamp(20px, 1.56vw, 40px);
	font-weight:normal;
	padding-top:100px;
	margin-bottom:50px;
}

#president{
	font-size: clamp(16px, 1.15vw, 26px);
	padding-bottom:100px;
	margin:50px 0 100px;
}

#joint{
	text-align:center;
	padding:0 5%;
}

#joint h3{
	font-size: clamp(18px, 1.5vw, 32px);
	font-weight:normal;
	padding-top:70px;
	margin-bottom:30px;
}

#joint p{
	margin-bottom:120px;
}

main{
	padding:0 10% 100px;
	background-image:linear-gradient(#fff, #ddf0fb, #78c9d8);
}

h2{
	font-size: clamp(28px, 3.65vw, 72px);
	margin:0;
	font-weight:normal;
	color:#bec9cc;
}

#recruit-text{
	font-size: clamp(12px, 1.01vw, 18px);
	margin-top:-2%;
}

h4{
	font-size: clamp(16px, 1.04vw, 24px);
	font-weight:normal;
	margin:50px 0 20px;
}

#space{
	margin-top:200px;
	margin-top:10.0vw;
}

.flex-box{
	display:flex;
	justify-content:center;
	gap:0 15%;
	margin-bottom:80px;
}

.slideinLeft,.slideinRight{
	width:40%;
	padding:0 40px;
}

.recruit-img img {
    width: 130%;
    height: auto;
    display: block;
}

h5{
	font-size: clamp(18px, 1.93vw, 36px);
	font-weight:normal;
	margin-bottom:5px;
}

.conditions{
	display:flex;
	justify-content:center;
	gap:0 8%;
	padding-top:40px;
	font-size: clamp(10px, 0.9vw, 16px);
	text-align:center;
	margin-top:-2%;
}

.conditions img{
	width:4vw;
	height:4vw;
}

.salary,.time,.holiday{
	dispaly:block;
}

table{
	width:100%;
}

th{
	width:30%;
	font-size: clamp(14px, 1.04vw, 22px);
	font-weight:normal;
	color:#fff;
	background-color:#1c3c4c;
	padding:5px;
}

.catch-copy{
	font-size: clamp(18px, 1.8vw, 34px);
	text-align:center;
}

.button{
	width:40%;
	margin:20px auto 20px;
	padding:5px;
	text-align:center;
	background-color:#1c3c4c;
}

.button a{
	font-size: clamp(16px, 1.5vw, 26px);
	text-decoration:none;
}

.button a:link{
	color:#fff;
}

.button a:visited{
	color:#fff;
}

.button a:hover{
	opacity:0.5;
}

#banner{
	text-align:center;
}

#banner-smaph{
	display:none;
}

#banner img{
	width:60%;
	margin:90px auto;
}

#banner a:hover{
	opacity:0.7;
}

#contact{
	color:#fff;
	text-align:center;
	padding:150px 0;
	background-color:#1c3c4c;
}

#contact-heading{
	font-size: clamp(28px, 3.5vw, 60px);
	letter-spacing:5px;
	letter-spacing:0.3vw;
}

#contact-subheading{
	font-size: clamp(14px, 1.5vw, 22px);
	margin-bottom:35px;
}

#contact-button{
	width:13%;
	margin:20px auto 0;
	padding:5px 0;
	border:1px solid #fff;
}

#contact-button-text{
	font-size: clamp(14px, 1.04vw, 20px);
}

#contact-button-text:link{
	text-decoration:none;
	color:#fff;
}

#contact-button-text:visited{
	color:#fff;
}

#contact-button-text:hover{
	opacity:0.4;
}

#contact-button-text::after{
	content: "";
	display: inline-block;
	width: 1.5vw;  
	height: 1.5vw;
	background-image: url("image/pen_logo.webp");
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 0.5vw;
	margin-top:-2%;
	vertical-align: middle;
}

footer{
	display:flex;
	justify-content:space-between;
	margin:10px 0 20px;
	padding:0 2%;
}

footer p{
	font-size: clamp(14px, 1.2vw, 22px);
	font-weight:bold;
}

footer address{
	font-style: normal;
}

footer a:link{
	color:#1c3c4c;
}

footer a:visited{	
	color:#1c3c4c;
}

footer a:hover{
	opacity:0.5;
}

#back-to-top{
	font-size: clamp(16px, 1.5vw, 26px);
}

/*tablet*/
@media screen and (max-width: 960px){	
	body{
		white-space:normal;
	}
		
	.smaph-br{
		display:block;
	}
	
	#president-text{
		text-align:left;
		padding-left:10%;
	}

	#president-text h3{
        font-size: clamp(22px, 3.65vw, 34px);
		line-height:2.2;
	}
	
	#smaph-president{
        font-size: clamp(16px, 1.15vw, 22px);
		line-height:1.8;
	}

	#president{
        font-size: clamp(18px, 1.8vw, 28px);
		padding-bottom:100px;
		margin-bottom:18vh;
	}
	
	#joint{
		text-align:center;
	}

	#joint h3{
        font-size: clamp(20px, 1.8vw, 30px);
		padding-top:10vh;
		margin-bottom:5vh;
	}

	#joint p{
        font-size: clamp(16px, 1.04vw, 20px);
		margin-bottom:12vh;
	}
	
	h4{
		margin-top:20px;
	}

	.flex-box{
		display:flex;
		flex-direction:column;
		align-items:center;
	}

	.slideinLeft,.slideinRight{
		width:90%;
		padding:0;
	}

	.recruit-img img {
		width: 100%;
		margin-bottom:30px;
	}
	
	.conditions img{
		width:8vw;
		height:8vw;
	}
	
	/*縦組みの時の上下の順番*/
	.order-box{
		display: flex;
		flex-direction: column;
	}
	
	.order-box1{
		order:2;
	}
	
	.order-box2{
		order:1;
	}
	/**/

	#banner img{
		width:70%;
		margin:30px auto;
	}
	
	#contact-button{
		white-space:nowrap;
	}
	
	#contact-button-text::after{
	width: 2.2vw;  
	height: 2.2vw;
	margin-top:-6%;
	}		
	
	#banner img{
		margin:5vh auto;
	}
	
	#contact{
		padding:30vh 0;
	}
}
/**/

/*smaph*/
@media screen and (max-width: 480px){		
	#president-text h3{
		font-size: clamp(20px, 1.56vw, 32px);
	}
	
	#smaph-president{
        font-size: clamp(12px, 1.03vw, 20px);
		line-height:1.8;
	}

	#president{
		font-size: clamp(14px, 1.04vw, 22px);
	}

	#joint h3{
		font-size: clamp(20px, 1.56vw, 32px);
	}
	
	#joint p{
        font-size: clamp(12px, 1.03vw, 20px);
	}

	h2{
		font-size: clamp(28px, 3.65vw, 40px);
	}

	#recruit-text{
        font-size: clamp(8px, 0.95vw, 20px);
	}
	
	.slideinLeft,.slideinRight{
		width:100%;
		padding:0;
	}
	
	h4{
		font-size: clamp(14px, 1.04vw, 26px);
	}

	h5{
		font-size: clamp(18px, 1.5vw, 28px);
	}

	.conditions{
		font-size: clamp(10px, 0.8vw, 18px);
		white-space:nowrap;
	}
	
	.conditions img{
		width:10vw;
		height:10vw;
	}
	
	th{
		font-size: clamp(14px, 1.04vw, 26px);
	}
	
	td{
		font-size: clamp(11px, 0.9vw, 22px);
	}

	.catch-copy{
		font-size: clamp(15px, 1.3vw, 30px);
	}

	.button a{
		font-size: clamp(18px, 1.5vw, 28px);
	}
	
	#banner-pc{
		display:none;
	}
	
	#banner-smaph{
		display:block;
	}
	
	#banner img{
		width:80%;
		margin:10px auto;
	}

	#contact-heading{
		font-size: clamp(26px, 3.5vw, 40px);
	}

	#contact-subheading{
		font-size: clamp(15px, 1.3vw, 22px);
	}

	#contact p{
		font-size: clamp(12px, 1.0vw, 26px);
	}
	
	#contact-button-text{
		font-size: clamp(12px, 0.95vw, 18px);
	}
	
	#contact-button-text::after{
	width: 3.8vw;  
	height: 3.8vw;
	margin-top:-6%;
	}

	footer p{
		font-size: clamp(12px, 0.93vw, 22px);
	}

	footer address{
		font-size: clamp(10px, 0.9vw, 20px);
	}
	footer a{
		font-size: clamp(12px, 0.93vw, 22px);
	}
	
	#back-to-top{
		font-size: clamp(14px, 1.04vw, 22px);
	}
}
/**/
	
/*button size*/
@media screen and (max-width: 800px){
	.button{
		width:60%;
	}
	
	#contact-button{
		width:20%;
	}
	
	#contact-button-text::after{
	width: 3.0vw;  
	height: 3.0vw;
	margin-top:-6%;
	}		
}
	
@media screen and (max-width: 520px){
	.button{
		width:90%;
	}
	
	#contact-button{
		width:25%;
	}		
} 
/**/

/*topimg size*/
/*tablet*/
@media screen and (max-width: 960px){
	h1{
		background-image:url("image/tablet_top_img.webp");
		aspect-ratio: 3 / 4;
	}
}
/**/
/*smaph SE*/
@media screen and (max-width: 360px){
	h1{
		background-image:url("image/smaph_se_top_img.webp");
		aspect-ratio: 9 / 16;
	}
}
/**/
/*smaph iPhone6~15,Android*/	
@media screen and (max-width: 428px){
	h1{
		background-image:url("image/smaph_615a_top_img.webp");
		aspect-ratio: 9 / 19.5;
	}
}
/**/
/*smaph Big Android*/	
@media screen and (max-width: 480px){
	h1{
		background-image:url("image/smaph_android_top_img.webp");
		aspect-ratio: 9 / 20;
	}
}
/**/
/**/