@charset "UTF-8";

/* base
------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figCaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

address, article, aside, figure, figCaption, footer, header, hgroup, hr, legend, menu, nav, section, summary {
    display: block;
}

ul, ol {
    list-style-type: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a img {
    border: none;
}

img {
    vertical-align: bottom;
    max-width: 100%;
}

mark {
    background: none;
}

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
}

.cf {
    min-height: 1px;
    zoom: 1;
}

/* style
------------------------------------------*/

body{
    background-color: #fff5f8;
    font-family: YuGothic, 'Yu Gothic medium', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
	line-height: 1.5em;
}

header{
    padding-top: 10px;
	position: fixed;
	top: 0;
	width: 100%;
	background: linear-gradient(90deg, rgba(254, 244, 244, 1), rgba(254, 244, 244, 0.3)) ,url("/newface2026/img/head.jpg");
	background-position: center 10%;
	background-repeat: no-repeat;
	height: 100px;
	z-index: 10;
}

main{
    max-width: 1200px;
    margin: 0 auto;
    color: #2b2b2b;
	margin-top: 250px;
}

h1{
	font-family: 'Montserrat', sans-serif;;
	font-size: 3em;
	text-align: center;
	line-height: 2em;
}

h1 a{
	text-decoration: none;
	color: #2b2b2b;
	text-shadow: 2px 2px 10px #f3f3f3 ,
				-2px 2px 10px #f3f3f3 ,
				2px -2px 10px #f3f3f3 ,
				-2px -2px 10px #f3f3f3;
}

h2{
	font-size: 2em;
	color: #f86690;
	padding: 1rem 2rem;
	border-top: 3px solid #f86690;
	background: #f3f3f3;
	margin: 3em 0 1.5em;
}

nav{
	background: #f86690;
}

nav ul{
	display: flex;
	justify-content: space-around;
	max-width: 1200px;
	margin: 0 auto;
	border-left: 1px solid #f3f3f3;
}

nav ul li{
	position: relative;
	width: 25%;
	text-align: center;
}

nav ul li{
	border-right: 1px solid #f3f3f3;
}

nav ul li a{
	text-decoration: none;
	display: block;
	color: #f3f3f3;
	width: 100%;
	padding: 10px 0;
	transition: all .3s;
}

nav ul li a:hover{
	background: #f3f3f3;
	color: #f86690;
	font-weight: bold;
}

.outline{
	display: flex;
	width: 700px;
	margin: 0 auto;
}

.outline-left, .outline-right{
	width: 50%;
	background: #f3f3f3;
	border: 1px solid #595857;
	padding: 20px 0;
}

.outline-left table{
	margin: 0 auto;
	width: 100%;
}

.outline-left table th{
	width: 33.3%;
}

.outline-left table th a{
	text-decoration: none;
	color: #f86690;
}

.outline-left table th a:hover{
	opacity: .5;
}

.outline-left table td{
	padding: 8px;
}

.outline-right{
	border-left: none;
}

.outline-right h3{
	margin-left: 20px;
}

.outline-right ol{
	margin: 0 auto;
	width: fit-content;
	margin-top: 30px;
}

.ceremony_content p{
	margin-bottom: 40px;
	line-height: 1.5em;
	font-family: 'Klee One', cursive;
}

.ceremony_content .date{
	margin-bottom: 0;
}

.ceremony_content .president{
	padding: 0;
	text-align: right;
}

.ceremony_img{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.ceremony_img li{
    margin-bottom: 15px;
}

.ceremony_img li a img{
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
	transition: all .3s;
}

.ceremony_img li a:hover img{
	transform: translateY(-10px);
	box-shadow: 11px 11px 15px 0px rgba(0, 0, 0, 0.8);
}

.group_photo{
	margin-bottom: 40px;
}

.group_photo a img{
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
	transition: all .3s;
}

.group_photo a:hover img{
	transform: translateY(-10px);
	box-shadow: 11px 11px 15px 0px rgba(0, 0, 0, 0.8);
}

.newface_container section{
    margin-bottom: 40px;
}

.department-general, .department-area{
	margin: 70px 0 20px;
	position: relative;
	padding: 1rem 2rem;
	font-size: 2em;
	border-top: 3px solid #f86690;
	color: #2b2b2b;
}

.department-general::before, .department-area::before{
	font-size: 15px;
	position: absolute;
	top: -30px;
	left: -3px;
	height: 30px;
	padding: 0 1em;
	content: '総合職';
	color: #fff;
	border-radius: 10px 10px 0 0;
	background: #f86690;
}

.department-general::before{
	content: '総合職';
}

.department-area::before{
	content: 'エリア総合職';
}

.department span{
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	padding: 13px 20px;
	color: #f3f3f3;
	border-radius: 0 10px 10px 20px;
	background: #f86690;
}

.newface{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	font-family: 'Klee One', cursive;
}

.newface-profile{
	width: 29.5%;
	margin: 10px auto;
	padding: 0 20px;
}

.newface-profile figure img{
	border: 2px solid #f86690;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

/*モーダルウィンドウに関する設定*/

.hide-area{
	display: none;
	padding: 50px;
}

.hide-area div{
	display: flex;
}

.name{
	font-size: 20px;
	position: relative;
	margin-left: 50px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #595857;
}

.name::before{
	position: absolute;
	left: -50px;
	top: 7px;
	content: '氏　名';
	font-size: 10px;
	background: #f86690;
	color: #f3f3f3;
	padding: 0 0.5em;
}

.school{
	font-size: 12px;
	position: relative;
	margin-left: 50px;
	border-bottom: 1px dashed #595857;
}

.school::before{
	position: absolute;
	content: '出身校';
	left: -50px;
	font-size: 10px;
	background: #f86690;
	color: #f3f3f3;
	padding: 0 0.5em;
}

.profile_content li{
	padding: 10px 0;
	font-size: 14px;
}

.profile_content li+li{
	border-top: 1px dashed #595857;
}

.profile_content span{
	background: #f86690;
	color: #f3f3f3;
	padding: 0 7px;
	float: left;
}

.profile_content p{
	padding-left: 2em;
	text-align: justify;
}

.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before,
.modaal-gallery-control:focus:after, 
.modaal-gallery-control:focus:before, 
.modaal-gallery-control:hover:after, 
.modaal-gallery-control:hover:before{
  background:#f86690;
}

.modal-profile{
	display: flex;
}

.modal-profile-inner{
	margin-left: 50px;
	font-family: 'Klee One', cursive;
}

.modal-profile-inner h4{
	font-size: 2em;
}

.born-place{
	margin: 20px 0;
	color: #949495;
}

footer{
    background: #f86690;
	color: #fff;
	margin-top: 100px;
	padding: 20px;
	text-align: center;
}



.fuji_img{
    vertical-align: middle;
    padding-bottom: 3.1px;
}

@media screen and (max-width:1000px){
	h1{
		font-size: 1.5em;
	}
	
	header{
		width: 100vw;
	}
	
	nav ul{
		width: 100%;
		flex-wrap: wrap;
	}
	
	nav ul li{
		width: 33%;
	}
	
	nav ul li > nav ul li{
		border-top: 1px solid #f3f3f3;
	}
	
	.half-btn{
		width: 49.7%;
		border-top: 1px solid #f3f3f3;
	}
	
	main{
		margin-top: 200px;
	}
}

@media screen and (max-width:768px){
	main{
		margin-top: 100px;
		padding: 10px;
	}
	
	.outline{
		display: block;
		width: 100%;
	}
	
	.outline-left, .outline-right{
		width: 100%;
	}
	
	.outline-right{
		border-top: none;
		border-left: 1px solid #595857;
	}
	
	.clerical, .civil, .architec, .electric, .area-civil{
		margin-top: 50px;
	}
}

@media screen and (max-width:600px){
	.newface-profile{
		width: 100%;
	}
}

@media print{
	header{
		position: relative;
	}
	
	.main{
		width: 172mm;
	}
	
	section{
		break-inside: avoid;
		padding-top: 5mm;
	}
	
	.newface-profile{
		break-inside: avoid;
		padding-top: 1mm;
	}
	
	
}