@charset "UTF-8";
/* CSS Document */

#main {
background: rgba(255,255,255,0.85);
}
#main h2 {
display: table;
margin: 0 auto;
background: url("../images/head.gif") no-repeat top center;
}
.head {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.head h1 {
display: grid;
place-items: center;
text-align: center;
}
.head h1 span {
background: #1071b5;
color: #fff;
display: table;
font-size: 0.7em;
line-height: 100%;
letter-spacing: 0;
}
.box {
width: 90%;
max-width: 1024px;
margin: 0 auto;
}
a.btn i {
padding-left: 10px;
}

#about h1 {
background: url("../images/about_l.webp") center right no-repeat;
background-size: 50% auto;
}
#recruit h1 {
background: url("../images/recruit_l2.webp") center right no-repeat;
background-size: 50% auto;
}
#entryH h1 {
background: url("../images/entry_l.webp") center right no-repeat;
background-size: 50% auto;
}
#works h1 {
background: url("../images/works_l.webp") center right no-repeat;
background-size: 50% auto;
}
#news h1 {
background: url("../images/news_l.webp") center right no-repeat;
background-size: 50% auto;
}
#workList ul li h3 {
display: table;
margin: 0 auto;
}
#workList ul li a span {
display: block;
text-align: center;
border: 1px solid #000;
border-radius: 3px;
font-size: 0.8em;
font-weight: 400;
}
.text {
font-size: 1.2em;
padding-bottom: 10px;
}

#entry > div {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
#entry dd input[type="text"], #entry dd input[type="email"], #entry dd textarea {
width: 100%;
box-sizing: border-box;
}
.soy_inquiry_message {
display: table;
margin: 0 auto 20px;
}

.works p img {
padding-bottom: 10px;
}

#newsList ul {
display: table;
margin: 0 auto;
padding-bottom: 50px;
}
#newsList ul li time {
padding-right: 10px;
}
#news .box {
max-width: 640px;
}
.pager ul {
display: flex;
justify-content: center;
}
.pager_item {
display: inline-block;
margin: 0 10px;
}
.pager_item a {
display: block;
position: relative;
text-indent: -99em;
overflow: hiddin;
width: 30px;
height: 30px;
}
.pager_item a:before, .pager_item a:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid #ddd;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.pager_item a:before {
background: #ddd;
transform: scale(0.2);
}
.pager_item a:hover:after {
transform: scale(1.1);
}
.pager_item a.current_page_number:before {
transform: scale(0.5);
}
.pager_item a.current_page_number:after {
transform: scale(0.2);
}

#table table {
width: 100%;
max-width: 800px;
margin:0 auto;
}
#table table th, #table table td{
border: 1px solid #fff;
}
#table table th {
background: #1071b5;
color: #fff;
text-align: center;
vertical-align: middle;
}
#table table td {
background: #dcf1ff;
}
#maps iframe {
width: 100%;
}

#contact {
width: 90%;
max-width: 640px;
margin: 0 auto;
background: #1071b5;
color: #fff;
border-radius: 8px;
box-sizing: border-box;
}
#contact a {
color: #fff;
text-align: center;
display: block;
}
#contact h4 {
text-align: center;
font-weight: bold;
border-bottom: 3px solid #fff;
}
#contact h5 {
text-align: center;
}
#contact p {
display: table;
margin: 0 auto;
}
#contact a.btn {
background: #fff;
color: #1071b5;
}


#voice ul li:nth-last-child(1) {
padding-bottom: 0;
}
#voice ul li p span {
display: block;
padding-top: 10px;
text-align: right;
}

@media screen and (max-width:560px){
#main > section {
padding: 60px 0;	
}
#main h2 {
font-size: 1.8rem;
padding: 20px 0 30px;
background-size: auto 12px;
}
.head h1 {
font-size: 2.2rem;
padding: 40px 50% 40px 0;
letter-spacing: 4px;
}
.head h1 span {
padding: 4px 15px 4px 15px;
}

.image {
padding-top: 30px;
}
	
#workList ul li {
margin-bottom: 36px;
}
#workList ul li:nth-last-child(1) {
margin-bottom: 0;
}
#workList ul li a span {
padding: 8px 0;
margin-top: 20px;
}

#message div p {
padding: 55vw 0 0 0;
font-size: 1.6rem;
line-height: 180%;
}

#table table th, #table table td{
padding: 8px 12px;
font-size: 1.6rem;
display: block;
width: 100%;
box-sizing: border-box;
}
#table table td {
display: grid;
place-items: center;
line-height: 180%;
}
#table table td ul li {
padding-bottom: 8px;
}
#table table td ul li:last-child {
padding-bottom: 0;
}
#maps iframe {
height: 50vh;
}
#contact {
padding: 10px;
}
#contact h4 {
font-size: 2rem;
margin-bottom: 10px;
padding-bottom: 10px;
}
#contact h5 {
font-size: 1.8rem;
padding-bottom: 6px;
}
#contact a {
font-size: 2rem;
margin-bottom: 4px;
}
#contact p {
font-size: 1.4rem;
padding-bottom: 20px;
}

#voice ul li {
padding-bottom: 40px;
}
#voice ul li img {
width: 60%;
display: block;
margin: 0 auto 20px;
}
#voice ul li p {
font-size: 1.6rem;
line-height: 130%;
}
}

@media screen and (min-width:561px){
#workList ul  {
display: flex;
flex-wrap: wrap;
}
#workList ul li a span {
padding: 12px 0;
margin-top: 30px;
}
	
#voice ul li {
padding-bottom: 60px;
display: flex;
justify-content: space-around;
align-items: center;
}
#voice ul li:nth-child(odd) {
flex-direction: row-reverse;
}
}

@media (min-width:561px) and (max-width:1023px){
#main > section {
padding: 80px 0;	
}
#main h2 {
font-size: 2.2rem;
padding: 25px 0 40px;
background-size: auto 15px;
}
.head {
margin-bottom: 30px;
}
.head h1 {
font-size: 3rem;
padding: 120px 50% 120px 0;
letter-spacing: 6px;
}
.head h1 span {
padding: 4px 30px 4px 30px;
}
	
#workList ul li {
width: 48%;
margin-bottom: 30px;
}
#workList ul li:nth-child(odd) {
margin-right: 4%;
}
#workList ul li:nth-last-child(-n+2) {
margin-bottom: 0;
}

#message div p {
padding: 400px 20px 0 20px;
font-size: 1.8rem;
line-height: 150%;
}

#table table th, #table table td{
padding: 14px;
font-size: 1.7rem;
}
#table table th {
width: 100px;
}
#maps iframe {
height: 400px;
}
#contact {
padding: 20px 30px;
}
#contact h4 {
font-size: 2.5rem;
margin-bottom: 16px;
padding-bottom: 16px;
}
#contact h5 {
font-size: 2rem;
padding-bottom: 8px;
}
#contact a {
font-size: 3rem;
margin-bottom: 6px;
}
#contact p {
padding-bottom: 30px;
}

#voice ul li img {
width: 40%;
}
#voice ul li p {
width: 56%;
font-size: 1.8rem;
line-height: 150%;
}
}

@media screen and (max-width:1023px){
#message div p {
background: url("../images/message_s.webp") center top no-repeat;
background-size: 100% auto;
}

#entry dt, #entry dd {
font-size: 16px;
}
#entry dt {
padding-bottom: 10px;
}
#entry dd {
padding-bottom: 20px;
margin-bottom: 24px;
}
#entry dd input[type="text"], #entry dd input[type="email"] {
padding: 6px;
}
#entry dd textarea {
height: 200px;
}
}

@media screen and (min-width:1024px){
#main > section {
padding: 100px 0;	
}
#main h2 {
font-size: 2.8rem;
padding: 30px 0 50px;
background-size: auto 20px;
}
.head {
margin-bottom: 40px;
}
.head h1 {
font-size: 3.2rem;
padding: 150px 50% 150px 0;
letter-spacing: 8px;
}
.head h1 span {
padding: 4px 40px 4px 40px;
}
	
#workList ul li {
width: 32%;
margin-right: 2%;
margin-bottom: 50px;
}
#workList ul li:nth-child(3n) {
margin-right: 0;
}
#workList ul li:nth-last-child(-n+3) {
margin-bottom: 0;
}
#workList ul li img {
padding-bottom: 10px;
}

#message div p {
background: url("../images/message_l.webp") center no-repeat;
background-size: 100% auto;
font-size: 2rem;
line-height: 200%;
padding: 30px 0 20px 50%;
}
#table table th, #table table td{
padding: 16px;
font-size: 1.8rem;
}
#table table th {
width: 120px;
}
#maps iframe {
height: 500px;
}
#contact {
padding: 30px 40px;
}
#contact h4 {
font-size: 3rem;
margin-bottom: 20px;
padding-bottom: 20px;
}
#contact h5 {
font-size: 2.4rem;
padding-bottom: 10px;
}
#contact a {
font-size: 4rem;
margin-bottom: 8px;
}
#contact p {
padding-bottom: 40px;
}
	
#entry dt, #entry dd {
font-size: 1.8rem;
}
#entry dt {
padding-bottom: 10px;
}
#entry dd {
padding-bottom: 30px;
margin-bottom: 40px;
}
#entry dd input[type="text"], #entry dd input[type="email"] {
height: 30px;
padding: 4px;
}
#entry dd textarea {
height: 300px;
}

#voice ul li img {
width: 30%;
}
#voice ul li p {
width: 60%;
font-size: 2rem;
line-height: 200%;
}
}