@charset "utf-8";

.center{
	text-align: center
}

/* ************************************************ 
*	#topsection
* ************************************************ */	

#topsection{
	margin: 0 auto;
	text-align: center;
	padding: 0 0 1em
}

#topsection h2{}
#slide_wrap{overflow: hidden}

@media  (min-width: 768px) {
	#topsection{width: 98%;}
	#slide_wrap{
	margin: 0 auto;
	width: 96%;
	max-width: 1360px;
	}

}	


/*　トリミングする外側の枠　*/
.trim {
    overflow: hidden;
    height: 40vh;/* トリミングしたい枠の高さ */
    position: relative;
    margin-bottom: 1em;
    border: solid 3px #000047;
}

@media (max-width: 767px) {
	.trim{height: 30vh;/* トリミングしたい枠の高さ */}
}	





/* 中央に合わせて、リサイズせずに、はみ出た分をトリミング */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.title-border {
display: flex;
align-items: center;
color: #000047;
text-align: center;
margin-bottom: 3em
}
.title-border:before,
.title-border:after {
border-top: 3px solid #000047;
content: "";
flex-grow: 1;
}
.title-border:before {margin-right: 1em}
.title-border:after {margin-left: 1em}

.title-border h2{font-size: 2em}
.title-border h2 span{
	display: block;
	font-size: .6em
}

/* ************************************************ 
*	#menu
* ************************************************ */
#menu{padding: 0 0 3em}

.menu_bg{
	background-color: #f2f2f2;
	position: relative;
	margin: 0 auto
}
#menu .menu_bg:after{
   content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #f2f2f2 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

#menu h2{
	margin-bottom: 1em;font-size: 1.6em;
	letter-spacing: 0
}


#menu ul{width: 98%;max-width: 1360px;margin: 0 auto 0}
#menu ul li{
	margin: 0 1% 1em;background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow:1px 1px 6px #ccc;
	-moz-box-shadow:1px 1px 6px #ccc;
	box-shadow: 1px 1px 6px #ccc;
	position: relative;
}

@media (max-width: 767px) {
	#menu h2{margin: 0 1em 1em;text-align: left;font-size: 1.5em;}
	#menu h2 br{display: none}
	#menu ul{padding-bottom: 1em}
	#menu ul li{flex-basis: 48%;}
	.menu_bg{padding: 2em 0 0;}
}	

@media  (min-width: 768px) {
	#menu ul li{flex-basis: 31.3%;}
	.menu_bg{padding: 3em 0;}
}	

#menu ul li img{width: 100%;height: auto}

#menu .pname{position: relative;}
#menu .pname::before {
    content: "";
    top: -4px;
    left: -4px;
    border-bottom: 4em solid transparent;
    border-left: 4em solid #e4016e; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 2;
}
#menu .pname .no{
	display: block;
	position: absolute;
	left: 5px;
	top: 2px;
	font-size: 20px;
	color: #fff;
	z-index: 5}
#menu .pname dl{padding: 1em}
#menu .pname dt{
	margin: 1em auto 0.5em;
	font-size: 1.2em;
	letter-spacing: 0
}
#menu .pname dt span{
	display: block;
	font-size: 2em;
	font-weight: 600;
	color: #002763;
	margin-bottom: .5em}
#menu .pname dd{
	margin: 0 auto;
}

#menu .pname dd span{
	display: block;
	margin: 0.5em;
}

#menu #main_contact{padding-top: 4em;}
#menu #contact_title{margin: 0 auto}
#menu #contact_title h3{position:relative;}

#menu .marker_yellow_hoso{
	font-size: 1.2em;
	background: linear-gradient(transparent 60%, #ffff66 60%);
}

#menu .staff_i{margin-bottom: -3px;display: block}

#menu #contact_info{margin: 0 auto;}

#menu #contact_info a{
	
	text-align: center;
	font-family: azo-sans-web, sans-serif;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 1.5em 1em 1em;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #ff9215;
	color: #fff;
}


#menu #contact_info a span{
	text-align: center;
	display: block;
}


#menu #contact_info a span:before{
	font-family: sns;
	content: "\e915";
	margin-right: 0.3em;
	font-weight: normal
	}
	

@media (max-width: 767px) {
	#menu{padding: 0 0 1em}
	#menu #contact_title{align-items: baseline}
	#menu #contact_title h3{margin-bottom: 1em}
	#menu #contact_title .staff_i{width: 30%;margin: 0 auto}
	#menu #main_contact h3{text-align: left;font-size: 1.4em;}
	#menu #main_contact h3 br{display: none}
	#menu #contact_info {font-size: 1.3em;margin-bottom: .3em}
	#menu #contact_info a{font-size: 1em;padding: 1em;}
	#menu #contact_info a span{font-size: 30px;}
}	

@media (min-width: 768px) {
	#menu #contact_title{width: 86%;align-items: center}
	#menu #contact_title h3{font-size: 1.8em;width: 78%;}
	#menu #contact_title .staff_i{width: 20%}
	#menu #contact_info{width: 90%;}
	#menu #contact_info a{font-size: 1.4em;padding: 1em;}
	#menu #contact_info a span{font-size: 50px;}
}	

@media (min-width: 1240px) {
	#menu #contact_title h3{font-size: 2.5em;}
	}
/* ************************************************ 
*	#company
* ************************************************ */

#company{padding: 3em 0 0}
#company h2 {}

.kigyobox{
	border-collapse: collapse;
	width: 100%;
}

@media  (min-width: 769px){
	table.kigyobox{width: 70%;margin: 0 auto;}
}

.kigyobox th,
.kigyobox td{
	text-align: left;
	padding: 1.2em 1em;
	border-bottom: 2px dotted rgba(226, 226, 226, 1);
	background: rgba(255, 255, 255, 0);
	font-size: 1.1em
}


.kigyobox th{
	width: 20%;
	text-align: left;
	vertical-align: middle;

}

.kigyobox tr:first-child th{
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-left-radius: 8px;
	position: relative;
}

.kigyobox tr:first-child td{
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	border-top-right-radius: 8px;
	position: relative;
}

.kigyobox tr:last-child th{
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-left-radius: 8px;
	position: relative;
}

.kigyobox tr:last-child td{
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	border-bottom-right-radius: 8px;
	position: relative;
}


@media  (min-width: 0px) and (max-width: 480px) {
	.kigyobox th,.kigyobox td{
		display: block;
		width: 100%;
		text-align:center;
		border-bottom: none}
	.kigyobox td{border: none;padding: 1em 1.5em 1.5em;}
	.kigyobox th{
		font-weight: bold;
		border: none;
		padding: 1em 0 0}
	
	.kigyobox th span{
		border-top: 2px dotted rgba(226, 226, 226, 1);
		border-bottom: 2px dotted rgba(226, 226, 226, 1);
		display: block;
		padding: .5em;
		margin: 0 1em
	}
}


@media  (min-width:481px) and (max-width: 768px)  {
	.kigyobox th{
		width: 25%;
		text-align: center}
}


/* ************************************************ 
*	#kanren
* ************************************************ */

#kanren{margin-top: 5em;
	padding: 0 0 7em
}

#kanren ul{
	margin: 0 auto;
}

#kanren .aff_company{
	border: solid 1px #000047;
	flex-basis: 32%;
	margin: 0 .5% 1em;
	text-align: center;
	padding: 1em;
	box-shadow: 3px 3px #f2f2f2;
}

#kanren .aff_company h3{
	border-bottom: solid 1px #000047;
	padding: 0.5em 0;
	font-weight: bold;
}


@media (max-width: 480px) {
	#kanren{padding: 0 0 4em}
}	






/* ************************************************ 
*	#form
* ************************************************ */
#contact{
	background-color:#f5f5ef;
	padding: 1em 0 3em;	
}


#contact h2{
	font-size: 2em;text-align: center;
	letter-spacing: 0;
	position: relative;
	background: #000047;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	color: #fff;
	max-width: 500px;
	margin:-2em auto 1em;
	padding: .5em
}
#contact h2:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 71, 0);
	border-top-color: #000047;
	border-width: 6px;
	margin-left: -6px;
}

#contact ul{margin-bottom: 1em}

#contact li{}


@media (max-width: 480px) {
#contact h2{font-size: 1.5em;margin:-2em 1em 1em;}
}	






#contact_form{
	max-width: 900px;
	margin: 0 auto
}


#thanks{}