@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP&display=swap');

/*
Theme Name:mrp04-child
Template:mrp04
Version: 0.01
*/
/*------------------------
メイン画像の切り替え
------------------------*/
@media screen and (min-width: 769px){	
#mainImg { display:block; }
  .mainimg-sp { display:none; }
}
@media screen and (max-width: 768px){	
#mainImg { display:none; }
  .mainimg-sp { display:block; }
}
/*------------------------
本HPのみのcss
------------------------*/
/*表組み線のみアレンジ*/
.post table, .post table th, .post table td {
	border:none;
}
.post table tr {
	border-bottom:1px solid #29A2C6;
}
.post table th {
	background-color:transparent;
	padding: 20px;
	border-bottom:1px solid #47c2f0;
	font-weight: 700;
}
.post table td{
	background-color:transparent;
	padding: 20px;
	border-bottom:1px solid #8d8d8d;
	font-weight: 700;
}
.post table tr:last-child {
	border-bottom:none;
}
@media screen and (min-width: 769px){	
  .tbl-pc { display:block; }
  .tbl-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .tbl-pc { display:none; }
  .tbl-sp { display:block; }
}
/*------------------------
ロゴ横並びお問い合わせだけ右寄せで色違い
------------------------*/
@media print, screen and (min-width: 1024px){
#header .logo {
    padding-left: 5%;
	padding-top: 10px;
}
	#header .logo img {
    max-height: 150px;
}
	#header-layout {
    padding: 0;
    display: flex;
}
nav#mainNav {
	margin: 0 auto;
    margin-right: 0;
	}
	.panel ul li{
		margin:0;
	}
nav#mainNav ul li {
    padding: 35px 15px 15px;
}
	nav#mainNav ul li#menu-item-92{
		background: #626262;
	}
}
/*------------------------
改行位置の調整
------------------------*/
@media screen and (min-width: 769px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}
/*----------------------
送信ボタンの幅を広げる
----------------------*/
.wpcf7 .linkBtn {
display:block;
}
/*----------------------
問い合わせフォームの必須
----------------------*/
.wpcf7-form .must {
    background: rgba(0,72,152,0);
    color: rgba(0,72,152,1);
    font-size: 1.5rem;
    float: none;
    margin-left: -2px;
    padding: 0;
}
/*------------------------
共通
------------------------*/
@media only screen and (max-width: 640px){
#header-layout {
    padding-bottom: 0px;
}
}
#content {
width: 95%;
margin: 0 auto;
padding:0;
}
.contentbox{
padding:5%;
}
#mainImg {
    padding-bottom: 0px;
}
.home #content {
    padding: 0px;
}
body.mobile #breadcrumb {
margin-top: 0;
}
@media only screen and (min-width: 1024px){
nav#mainNav ul li a {
    padding: 8px 15px 10px 15px;
}}
/*------------------------
テーブルレスポンシブ左寄せ
------------------------*/
@media only screen and (max-width: 640px){
.post table.responsive th, .post table.responsive td {
    text-align: left;
}}
/*------------------------
背景
------------------------*/

/*背景*/
.post{
background:#fff;
margin-bottom:0;
}


/*------------------------
新着情報
------------------------*/
.dateLabel{background-color: rgba(0,10,0,0);}
.postlist {background-color: rgba(255,255,255,0); }
.postlist li {margin:0;}
.front_post_list {
    background: #f2f4f6;
}
@media screen and (min-width: 769px){	
.postlist {
 width: 90%;
 margin: 0 auto;
}
.front_post_list { padding: 5% 10%;}
}
@media screen and (max-width: 768px){	
.postlist {
 width: 85%;
 margin: 0 auto 5%;
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 20%);
}
.front_post_list {padding: 5% 0;}
.postlist .time a { font-size: .8rem;}
.postlist .date {
font-size: .8rem;
padding: 1px;
}
.postlist .ttls a { font-size: .8rem;}
.postlist .ttls {padding: 0;}
.postlist .post_text {width: 100%;}
}
/*新着情報のシャドウの装飾*/
.postlist li {border-bottom: none;}
.postlist .time {
background: #a39e9e;
}
.postlist .date {
color: #a39e9e;
}
.postlist .ttls a {
 color: #626262;
}
.postlist {
padding: 5%;
 background: #fff;
box-shadow: 0 5px 20px 0 rgb(0 0 0 / 20%);
}
h1.title.bottom-loop, h1.title.top-loop{
font-size:calc(24px + (1vw - 4.1px) * 1.0624);
margin-bottom: 2%;
font-family: 'Noto Serif JP', serif;

}
/*------------------------
フォント
------------------------*/
body{
	font-family: 'Noto Sans JP', sans-serif;

}

span.notes{
	font-size:.8rem;
}
h1.title, .post h1 {
    font-size: 1.4rem;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    text-align: center;
    border-bottom: 2px solid #47c2f0;
    display: table;
    margin: 0px auto 3%;
    padding-bottom: 20px;
}
.post p.h1sub {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    color: #DC4B34;
    font-weight: 600;
    line-height: 1;
}
.post h1.h1w{
	color:#fff;
}
.post h2{
}
.post h3{
}
nav#mainNav ul li a b{
	
}
nav#mainNav ul li a span{
	
}
header#h1Header h1.title {
    color: #000000;
    letter-spacing: 0.3em;
    text-shadow: none;
	border-bottom:none;
}
/*------------------------
アイキャッチ
------------------------*/
@media screen and (min-width: 769px){
.eye{
background-size: cover;
width:100%;
height:200px;
	}}
@media screen and (max-width: 768px){
.eye{
background-size: cover;
width:100%;
height:100px;
	}
}
.eye_com{
background-image:url(/wp-content/uploads/eye_shutterstock_760620454.jpg);
background-position:center;
}
.eye_rec{
background-image:url(/wp-content/uploads/eye_shutterstock_1715053840.jpg);
background-position:center;
}
/*------------------------
フレーム
------------------------*/
/*見出し付き一重棒線*/
.linebox{
	border:1px solid #af8f3e;
	padding:5%;
	max-width:960px;
	margin:150px auto;
  position: relative;
}

.linebox h5 {
font-size: 4rem;
    position: absolute;
    right: 0;
    left: 0;
top: 0em;
    margin-left: 1.5rem;
	color:#af8f3e;
	font-family: 'Great Vibes', cursive;
	
}
.linebox span{
  padding: 0 .5em;
  background: #FFF;
}
.linebox .inner{
  padding: 1.2em .5em .5em;
}

/*二重棒線*/
.doubleframe{
	max-width:960px;
	margin:30px auto;
    background: #fff;
    border: 4px #af8f3e solid;
    position: relative;
    z-index: 10;
}
.doubleframe:before{
	content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #af8f3e solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}


/*------------------------
レイアウト
------------------------*/
/*box01　文字だけ*/
.box01{
padding:10% 5%;
}
.box01txt{
line-height: 2;
}
@media print, screen and (min-width: 1024px){
.box01txt{
	padding:0 20% 3%;
	text-align:center;
}}
@media print, screen and (max-width: 1023px){
.box01txt {
    width: 100%;
	text-align:left;
	}
}

/*box02　画像と文字の横並び*/
.box02 .txt {
    margin: 3%;
    padding: 5% 0;
}
@media print, screen and (min-width: 1024px){
.box02 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box02 .txt{	
	width:40%;
}
.box02 .tbl{	
	width:60%;
}
	}

@media print, screen and (max-width: 1023px){
.box02 .photo{
	margin:0 auto;
}
.box02 {
     flex-direction: column;
	display: flex;
	padding:20px;
}
	.order01{
		order: 1;
	}
	.order02{
		order: 2;
	}}

/*偶数のバナー・トピック*/
@media print, screen and (min-width: 1024px){
.setumeibox{
	display: flex;
	justify-content: center;
}
.setumei_inner{
	min-width:432px;
}}
@media print, screen and (max-width: 1023px){
.setumeibox{
    flex-direction: column;
    display: flex;
	margin:0 auto;
	width:432px;
}
}
@media print, screen and (max-width: 470px){
.setumeibox{
    flex-direction: column;
    display: flex;
	width:360px;
}
}

.setumei_inner{
	margin:20px;
	background:#fff;
}
.setumeicap{
	padding:30px;
}

/*------------------------
BTNデザイン
------------------------*/
.btn, a.btn, button.btn {
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
    display: block;
    width: 180px;
    margin: 0 auto;
}

a.btn-gradient {
  font-weight: normal;
  color: #fff;
  border-radius: 0;
	  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ff3c3c),
    color-stop(#ff8100),
    to(#2bc5b7)
  );
  background-image: -webkit-linear-gradient(left, #ff3c3c, #ff8100, #2bc5b7);
  background-image: linear-gradient(90deg,#ff3c3c, #ff8100, #2bc5b7);
}
  
a.btn-gradient:after {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.5s;
  transition: all 0.5s;

background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(40%, #eb0000),
    to(#f79400)
  );
  background-image: -webkit-linear-gradient(left,  #eb0000 40%, #f79400 100%);
  background-image: linear-gradient(90deg,  #eb0000 40%, #f79400 100%);
}


a.btn-gradient span {
    position: relative;
    z-index: 1;
    font-size: 1rem;
}

a.btn-gradient:hover {
  color: #fff;
}

a.btn-gradient:hover:after {
  opacity: 0;
}
/*btn-a*/
.btn-a, a.btn-a, button.btn-a {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
}
a.btn-flat {
    overflow: hidden;
    padding: 0.8rem 2rem;
    color: #5a5a5a;
    border-radius: 0;
    background: #d5d5d5;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 100px;
  height: 100px;

  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-80%) translateY(-25px);
  transform: translateX(-80%) translateY(-25px);

  border-radius: 50%;
    background: #d76363;
}

a.btn-flat:hover:before {
  width: 400px;
  height: 400px;

  -webkit-transform: translateX(-1%) translateY(-175px);

  transform: translateX(-1%) translateY(-175px);
}
.btn-a{
    border: none;
}
/*採用と会社概要*/
.tbl-pc,.tbl-sp{
	margin-bottom:10%;
}
/*TOPバナー*/
.banapic {
    clip-path: polygon(12% 0, 100% 0, 100% 20%, 100% 87%, 84% 100%, 0 100%, 0% 80%, 0 11%);
}
@media screen and (min-width: 769px){
.contentbox.red {
    background: linear-gradient(180deg, #d76363 0%, #d76363 50%, #ffffff 50%, #ffffff 100%);
}
	.flexbox{
	display:flex;
	justify-content:space-evenly;
	flex-wrap:nowrap;
}
.bana{
		width:25vw;
}
}
@media screen and (max-width: 768px){
.contentbox.red {
    background: linear-gradient(45deg, #ffffff 0%, #ffffff 50%, #ef8585 50%, #cb2b2b 100%);
}
.bana{
    width: 90%;
    margin: 0 auto 5%;
    padding: 5%;
}
}

.bana{

}
.banattl {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .3em;
    margin-top: 10px;
}
.back1{
background-image:url(/wp-content/uploads/shutterstock_1253173180.png);
background-position:center;
}
/**/
@media screen and (min-width: 769px){	
.post h1.buz {
font-size: 3rem;
}
}
@media screen and (max-width: 768px){	
.post h1.buz {
font-size: 1.6rem;
}
}
.post h1.buz {
border-bottom: 3px solid #47c2f0;
display: block;
}
.post h1.buz:first-letter {
  color: #47c2f0;
}
.post h2 {
    background: Transparent;
    font-weight: 700;
    border-left: 10px solid #c10000;
    margin-top: 15px;
    margin-bottom: 5px;
}
.contentbox.red2 {
    background: #fff8f8;
}
/**/
/*TOP選ばれる理由*/
@media screen and (min-width: 769px){	
	.flexbox{
	display:flex;
	justify-content:space-evenly;
	flex-wrap:nowrap;
}
.reason{
	width:20vw;
	padding: 2%;
}
}
@media screen and (max-width: 768px){
.reason {
    width: 90%;
    margin: 0 auto 5%;
    padding: 5%;
}
}

.reason{
	text-align:center;
	background:#fff;
}
.reasonttl{
font-size:1.2rem;
font-weight:700;
}
.reasonpic img{
	width:25%;
	border-radius:100vw;
}
/*よくあるご質問*/
@media screen and (min-width: 769px){	
summary.qa_sum {
    padding: 1.5rem 5rem 1.5rem 4.5rem;
    font-size: 1.2rem;
}
.answer {
    padding: 1.5rem 6rem 2rem 4.5rem;
}
}
@media screen and (max-width: 768px){	
summary.qa_sum {
padding: 2rem 4rem 1.5rem 1.5rem;
    font-size: 1rem;
}
.answer {
padding: 1.5rem 2.5rem 2rem 1.5rem;
}
}
.qa_box details:first-of-type summary{
    border-top:1px solid #999;
}
summary.qa_sum {
    font-weight: 500;
    list-style: none;
    position: relative;
    cursor: pointer;
    color: #333;
    border-bottom: 1px solid #999;
}
summary.qa_sum::-webkit-details-marker {
  display: none;
}
summary.qa_sum:hover, details[open] summary.qa_sum {
	transition:background .3s ease;
}

summary.qa_sum::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  transition: transform 0.5s;
  font-size: 30px;
}
details[open] summary.qa_sum::after {
  transform: translateY(-50%) rotate(45deg);
}
details[open] summary.qa_sum{
	border-bottom:none;
}
.answer {
    position: relative;
    border-bottom: 1px solid #999;
	line-height:1.5;
}
details[open] .answer {
  animation: fadein 0.5s ease;
}
@keyframes fadein{
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/**/
.btn5,
a.btn5,
button.btn5 {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
    display: table;
    margin: 50px auto 0;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn--circle {
  width: 140px;
  height: 120px;
  padding: 20px 0 0;
  border-radius: 50%;
  color: #fff;
    background: #b10014;
  -webkit-box-shadow: 0 7px 0 #6c000d;
  box-shadow: 0 7px 0 #6c000d;
}

a.btn--circle i {
  font-size: 150%;
}

.fa-position-bottom {
  position: absolute;
  bottom: 1rem;
  left: calc(50% - 0.5rem);
}

a.btn--circle:hover {
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
  color: #fff;
  -webkit-box-shadow: 0 3px 0 #e53b4e;
  box-shadow: 0 3px 0 #e53b4e;
}
@media screen and (min-width: 769px){
span.target {
font-size: 1.2rem;
}
}
@media screen and (max-width: 768px){
span.target {
font-size: 1rem;
}
}
span.target {
    color: #c10000;
    font-weight: 500;
}
@media print, screen and (max-width: 1024px){
header#h1Header h1.title {
    font-size: 120%;
}}
body.mobile #header .logo .mark {
    background: #fff;
}