@charset "UTF-8";
main div#title { background: url(../img/recruit/main.jpg) center no-repeat; background-size: cover; }

main p#phrase { text-align: center; }
main p#phrase strong { padding: 0 0.5em; background: linear-gradient(transparent 50%, #fff001 0%); font-size: 150%; }
main table { margin-bottom: 32px; width: 100%; border-collapse: collapse; }
main th { padding: 12px 24px; background: #f7f3e7; border: solid 1px #d1ccbe; }
main td { padding: 12px 24px; border: solid 1px #d1ccbe; }
main div.button {}
main div.button a { margin: 0 auto; padding: 6px 20px; width: 50%; background: #e60013; border: solid 2px #e60013; border-radius: 4px; color: #fff; display: flex; justify-content: center; align-items: center; }
main div.button a span {}
main div.button a strong { margin-left: 20px; padding-left: 24px; background-image: url(/img/recruit/tel.svg), url(/img/recruit/telOn.svg); background-position: 0 center; background-repeat: no-repeat; background-size: 20px auto; font-size: 150%; }
main div.button a:hover { background: #fff; color: #e60013; text-decoration: none; }
main div.button a:hover strong { background-image: url(/img/recruit/telOn.svg); }

@media screen and (max-width: 767px) {
main p#phrase strong { font-size: 130%; }
main table { border-top: solid 1px #d1ccbe; }
main th { border-width: 0 1px; display: block; box-sizing: border-box; }
main td { display: block; box-sizing: border-box; }
main div.button a { padding: 10px 20px; width: 100%; text-align: center; display: block; box-sizing: border-box; }
main div.button a span { display: block; }
main div.button a strong { margin-left: 0; padding: 0 24px; line-height: 1.2; }
}