@charset "UTF-8";
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　big_title　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*policy*/
.policy_h4 {
padding:1.2em 0;
margin:2.5em 0.5em 1.2em 0.5em;
text-align:center;
background:#216390;
color:#FFF;
}
.policy_h5 {
padding:0.5em 0;
border-bottom:1px solid #eee;
}
.waku {
max-width:800px;
border-radius:10px;
border:solid 2px #216390;
padding:2%;
margin:0 auto;
}
ol.hoshin {
  margin-left: 10px;
  margin-right: 10px;
margin-bottom:30px;
  padding: 0.5em 0.5em 0.5em 2em;
}
ol.hoshin li{
list-style-type:decimal;
  margin-left: 0.3em;
line-height: 1.5;
  padding: 0.5em 0;
}
ol.hoshin li ul li {
list-style-type:disc;
  margin-left: 1em;
line-height: 1;
}

ol.hoshin li ol li {
list-style-type:none;
  padding-left: 1.3em;
text-indent: -1.3em;
line-height: 1;
}

p.policycaution {
font-size:0.9em;
padding:0;
margin:0;
}
.policy_h6 {
background:#216390;
padding:1em;
color:#FFF;
text-align:center;
} 

.second_h3 {
padding: 0.5em;/*文字周りの余白*/
  color: #333;/*文字色*/
  background: #eee;/*背景色*/
  border-left: solid 5px #216390;/*左線（実線 太さ 色）*/
font-size:1.2em;
margin-bottom:1.2em;
}

/* link style
---------------------------- */
a:link {
	color: #216390;
	text-decoration: none;
}
a:visited {
	color: #216390;
	text-decoration: none;
}
a:hover {
	color: #71c5d8;
}

/*---------------------------- */

article.dl-ma {
margin:3em 0 2em;
}

dl.dl-yoko {
	padding:1.2em 0 1.4em 0;
	border-bottom: 1px solid #ccc;
}


dl.dl-yoko dt {
	padding:0 0 0 0.8em;
  font-weight: bold;
}
dl.dl-yoko dd {
padding-left:0.8em;
}
@media screen and (min-width: 768px) {

dl.dl-yoko {
	padding:0.2em 0 0.4em 0;
position: relative;
  border-bottom: 1px solid #ccc;
}

dl.dl-yoko:before {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 18%;
  height: 1px;
  content: '';
  background: #216390;
}

dl.dl-yoko dt {
clear: left;
float: left;
width: 20%;
}
dl.dl-yoko dd { 
display: block;
margin-left:20%;
}
}

dl.dl-policy {
	padding:0.2em 0 0.4em 0;
}
dl.dl-policy dt {
	padding:0 0 0 0.8em;
  font-weight: bold;
float:left;
}
dl.dl-policy dd {
margin-left:100px;
}

.policy_right {
width:250px;
margin:0 0 0 auto;
}


/*--------------------- contact ---------------------*/
.btn-iro {
  color: #000;
  background: #fafafa;
  border-color:  #fafafa;
margin-bottom:1em;
}
.btn-iro:hover {
  background: #216390;
  color: #FFF;
}
.recruit_p {
margin:0.5em 0 1.6em 1.8em;
padding:0 0 0.3em 0.5em;
}


/*kanri layout
----------------------------*/
.F14 {
	font-size:120%;
	line-height:110%
}
.F12 {
	font-size:100%;
	line-height:110%
}
.F10 {
	font-size:80%;
	line-height:110%
}

.kanrinavi {
	margin-top:5px;
	font-size: 80%;
}

#kanrinakami {
	margin:5px 10px 5px 10px;
	text-align:left;
}

table.kanri1{
	border-top:1px solid #666666;
	border-collapse:collapse;
	border-spacing:0;
	background-color:#ffffff;
	empty-cells:show;
	padding-bottom:10px;
}
.kanri1 td{
	border-right:1px solid #666666;
	border-left:1px solid #666666;
	border-bottom:1px solid #666666;
	padding:0.3em 1em;
}

table.kanri2{
	border-spacing:1;
	background-color:#ffffff;
	empty-cells:show;
}
.kanri2 td{
	padding:0.3em 1em;
}
table.kanri3{
	border-spacing:1;
	background-color:#ffffff;
	empty-cells:show;
}
.kanri3 td{
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:none;
	padding:0em 0em;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.service_mn {
display:flex;
flex-wrap: wrap;
margin:50px 0;
padding: 30px;
}
.service_card {
display:block;
  width: 32%;
margin:0 auto;
  background-color: #FFF;
position:relative;
}
.service_card50 {
display:block;
  width: 48%;
margin:0 auto;
  background-color: #FFF;
position:relative;
}

.service_card a,
.service_card50 a {
display:block;
}
.service_card a:hover,
.service_card50 a:hover {
opacity:0.6;
}

@media screen and (max-width: 660px) {
.service_card, .service_card50 {
padding: 5px;
  width: 100%;
}
.image_linkB {
display:none;
}
}
@media screen and (min-width: 660px) {
.image_linkC {
display:none;
}
}


.service_card p,
.service_card50 p  {
position:absolute;
top:42%;
left:50%;
transform: translate(-50%,-50%);
color:#FFF;
font-size:22px;
font-weight:bold;
}
.service_card p.miniP{
font-size:18px;
letter-spacing:-1px;
width:200px;
text-align:center;
}
@media screen and (max-width: 992px) {
.service_card p,
.service_card50 p {
font-size:16px;
}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.service_tl2 {
 background: rgb(33,99,144);
background: linear-gradient(80deg, rgba(33,99,144,1) 0%, rgba(33,99,144,1) 0%, rgba(24,152,222,1) 69%); 
font-size:1.2rem;
color:#FFF;
padding:0.8em 1.5em;
}
.service_detail {
display:flex;
}
.service_detail img:not(.s_sports) {
max-width:350px;
border:solid 5px #216390;
border-radius:30px;
}

@media screen and (max-width: 768px) {
.service_detail {
justify-content: center;
flex-direction:column;
align-items:center;
}
.service_detail .s_sports img {
width:100%;
margin:0 auto;
text-align:center;
}
.service_detail p {
padding:15px 0 20px;
}
.service_detail p {
padding:15px 0 20px;
}
}
.sports_span {
display:block;
margin:0.5em;
}
.s_sports {
margin-top:30px;
}
.service_detail p {
padding:15px 20px;
}
.service_ul {
margin:30px 10px 100px;
border:solid 1px #eee;
border-radius:20px;
padding:2rem;
max-width:600px;
}

.service_ul li {
list-style-type: square;
line-height:1.8;
padding-left:0.8em;
margin-left:1.5em;
}
.service_per_ul {
display:flex;
flex-wrap: wrap;
list-style-type:none;
align-items: stretch;
padding: 0;
margin: 0;
}
.service_per_ul li {
width:50%;
/*box-sizing: border-box;
  flex-grow: 1;
  flex-basis: clamp((100%/2-10px), (597px - 100%) * 596, 100%);*/
}

.service_per_ul li a {
display:block;
text-decoration:none;
padding:8px;
margin:5px;
background:#eee;
}

.service_per_ul li a:hover {
background:#216390;
color:#FFF;
}

.service_per_ul li span {
font-size:12px;
}
@media screen and (max-width: 768px) {
.service_per_ul li span:not(.caution_span, .suppl_span) {
display:none;
}
.service_per_ul li span.suppl_span {
display:block;
}

}

.caution_p {
font-size:12px;
}
.caution_p2 {
font-size:14px;
padding-bottom:0;
margin-bottom:0;
}



#service_corp, #service_roumu, #service_souzoku, #service_sports, #service_car, #service_estate,
#company_aboutus, #company_history, #company_staff {
  padding-top: 130px;
}
#service_personal, #company_greetings {
  padding-top: 250px;
  margin-top: -250px;
}
article .service_tl2:before {
content:"";
display:block;
height:300px;
margin-top:-300px;
visibility:hidden;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　背景斜め　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.bottom_contents {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 30vh;
}

.bottom_contents::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -20%;
  width: 140%;
  height: 100%;
  background:skyblue;
  transform-origin: left center;
  transform: rotate(-10deg);
  z-index: -1;
}
.bottom_contents::after { /* もう一つ擬似要素を追加 */
  content: '';
  position: absolute;
  top: 5%;
  right: -10%;
  width: 120%;
  height: 100%;
  background: #F2E8E4;
  transform-origin: right center;
  transform: rotate(10deg);
  z-index: -2;
}

.bottom_contents_inner {
  width: 60%;
  margin: 0 auto;
  padding: 80px 10px 0px;
  color: #333;
  text-align: center;
}

.second_tl {
font-size:1.5rem;
font-weight:bold;
margin:0 auto;
padding:10px;
width:250px;
text-align:center;
}
.second_tl span {
display:block;
font-size:2.5rem;
font-family:"Arial Black", "Hiragino Sans", sans-serif;
}
.second_tlpolicy {
font-size:1.5rem;
font-weight:bold;
margin:0 auto;
padding:10px;
width:550px;
text-align:center;
}
@media screen and (max-width: 768px) {
.second_tlpolicy {
font-size:1rem;
width:180px;
}
}


@media (width < 1200px) {
.bottom_contents {
height:40vh;
}
}
 
@media (767px <= width < 1180px) { 
.bottom_contents {
height:20vh;
}
.bottom_contents::before {
height:180px;
}
}

@media screen and (max-width: 767px) {
.bottom_contents {
height:15vh;
}
.bottom_contents::before{
  top: 15%;
  left: -30%;
  width: 140%;
}
.bottom_contents_inner {
  padding: 50px 10px 0px;
}
.second_tl {
font-size:1rem;
}
.second_tl span {
font-size:1.5rem;
}
}

.signature {
margin-top:50px;
text-align:right;
}
.signature span {
display:block;
font-size:1.3rem;
}

.staff {
background:skyblue;
margin:1.5rem;
padding:1.2em;
font-size:1.2rem;
text-align:center;
}
.ttl_background3 {
  font-weight: bold;
margin:1.5em 0.5em;
  padding: 0.5em 1em;
  background-color: #4c9ac0;
  color: #fff;
  overflow: hidden;
  position: relative;
text-align:center;
font-size:1.2rem;
}
.ttl_background3::after {
  content: '';
  background-color: #fff;
  opacity: 0.3;
  transform: rotate(-65deg);
  position: absolute;
  bottom: -250px;
  right: -250px;
  width: 300px;
  height: 500px;
}

@media screen and (max-width: 767px) {
.ttl_background3 {
font-size:1rem;
line-height:1.8;
}
}