@charset "utf-8";

#slider1 {
background: url("../img/top/slide1.webp") no-repeat;
background-size: cover;
}
#slider2 {
background: url("../img/top/slide2.webp") no-repeat;
background-size: cover;
}
#slider3 {
background: url("../img/top/slide3.webp") no-repeat;
background-size: cover;
}

/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 1025px) {

#top_hdr {
height: 70vh;
}
#top_hdr section {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 70vh;
}
.bx-wrapper, .bxslider {
height: 70vh;
}
.bxslider > div {
width: 100%;
height: 100%;
}
#prolo {
text-align: center;
margin-bottom: 8rem;
}
#prolo h2 {
display: inline-block;
border: 0.1rem solid #ccc;
padding: 0.4rem 5rem;
font-size: 1.8rem;
margin-bottom: 3rem;
}
#prolo p {
margin-bottom: 3rem;
}
#prolo ul {
width: 46rem;
margin: 0 auto 3rem auto;
text-align: left;
}
#category {
display: grid;
grid-template-columns: 1fr 1fr;
}
#category article {
position: relative;
z-index: 1;
}
#category article a {
position: absolute;
display: block;
text-align: center;
color: #fff;
font-family: "M PLUS 1p", sans-serif;
font-weight: 400;
font-size: 1.8rem;
background: rgba(35,24,21,0.6);
width: 18rem;
padding: 3rem 0;
z-index: 2;
transition: 0.3s;
}
#category article a:hover {
background: rgba(35,24,21,1);
text-decoration: none;
width: 20rem;
}
#cate1 {
bottom: 0;
right: 0;
}
#cate2 {
bottom: 0;
left: 0;
}
#cate3 {
top: 0;
right: 0;
}
#cate4 {
top: 0;
left: 0;
}
#three {
background: #a2a2a2;
padding: 10rem 3rem 3rem 0;
text-align: right;
margin-bottom: 8rem;
}
#three img {
width: 15rem;
}
#gyo {
width: 90rem;
margin: 0 auto 8rem auto;
}
#gyo h3 {
font-size: 2rem;
margin-bottom: 3rem;
font-weight: bold;
}
#gyo dt {
font-weight: bold;
}
#gyo dd {
margin-bottom: 2rem;
}

/* Works */
#hdr_works {
background: url("../img/works/hdr_works.webp") no-repeat center/cover;
}
#pan {
margin: -5rem 0 8rem 0;
text-align: center;
}
#pan li {
padding: 0 1rem;
line-height: 1;
display: inline-block;
border-right: 0.1rem solid #000;
}
#pan li:last-child {
border-right: none;
}
#pan li a:link {
color: #000;
}
#pan li a:visited {
color: #000;
}
#pan li a:hover {
color: #000;
}
#pan li a:active {
color: #000;
}
.wks_t {
width: 104rem;
margin: 0 auto;
}
#wks_cate {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
#wks_cate h3 {
background: rgba(35,24,21,0.6);
color: #fff;
text-align: center;
padding: 1rem 0;
margin-bottom: 14rem;
}
#wks_cate article:nth-child(2) h3, #wks_cate article:nth-child(4) h3 {
background: rgba(35,24,21,0.5);
}
.wks_box {
width: 100rem;
margin: 0 auto 8rem auto;
}
.wks_box h2 {
font-size: 3rem;
margin-bottom: 3rem;
text-align: center;
}
.wks_box > div {
margin-bottom: 3rem;
}
.wks_box p {
text-align: center;
margin-bottom: 3rem;
}
.wks_box table {
width: 80%;
margin: 0 auto;
}
.wks_box td {
width: 33.3%;
}
.works1, .works2 {
width: 90%;
margin: 0 auto 10rem auto;
display: grid;
}
.works1 {
gap: 0.8rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.works2 {
gap: 0.2rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
margin-bottom: 0.2rem;
}
.wks_mini {
margin-bottom: 0.6rem;
}
.eks2_end {
margin-bottom: 10rem;
}
#wks_tb2 {
width: 50%;
}
#wks_tb2 td {
width: 50%;
}

/* About */
#hdr_about {
background: url("../img/about/hdr_about.webp") no-repeat center/cover;
}
#yur {
width: 51.4rem;
margin: 0 auto 8rem auto;
}
#ab_read {
position: relative;
text-align: center;
font-size: 2.6rem;
padding-bottom: 1rem;
border-bottom: 0.4rem solid #a2a2a2;
margin-bottom: 5rem;
}
#ab_read span {
content: url("../img/about/read_back.webp");
position: absolute;
bottom: 0.6rem;
right: 5rem;
display: block;
width: 7.5rem;
}
#ab_tb {
width: 80rem;
margin: 0 auto 8rem auto;
}
#ab_tb table {
border-collapse: collapse;
width: 100%;
}
#ab_tb th, #ab_tb td {
vertical-align: top;
padding: 1rem 0;
}
#ab_tb th {
text-align: left;
width: 24%;
}
#map {
height: 30rem;
margin-bottom: 8rem;
}

/* Contact */
#hdr_contact {
background: url("../img/contact/hdr_contact.webp") no-repeat center/cover;
}
#m_wrap {
width: 100rem;
margin: 0 auto;
}
#m_wrap table {
width: 100%;
border-collapse: collapse;
}
#m_wrap th, #m_wrap td {
padding: 2rem 1rem;
vertical-align: top;
}
#m_wrap th {
text-align: left;
width: 30%;
font-size: 1.8rem;
font-weight: normal;
}
#m_wrap input[type="text"], #m_wrap input[type="email"], #m_wrap textarea {
background: #eee;
border: none;
padding: 1rem;
}
#m_wrap input[type="button"], #m_wrap input[type="submit"] {
margin-bottom: 10rem;
}
#m_kaisya, #m_busyo, #m_name, #m_kana, #m_email, #m_emailcheck, #m_add, #m_naiyo {
width: 100%;
}
#m_naiyo {
height: 20rem;
}
#pol {
text-align: center;
font-size: 2.8rem;
margin: 10rem 0 3rem 0;
font-family: "游ゴシック","YuGothic";
}
#policy {
margin-bottom: 8rem;
height: 30rem;
overflow-y: scroll;
border: 0.1rem solid #ccc;
padding: 3rem;
font-family: "游ゴシック","YuGothic";
}
#policy h3 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
#policy p {
margin-bottom: 3rem;
}
.error_messe {
color: #ff0000;
margin: 1rem 0;
}

}

/* タブレット用　縦向き
------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 1024px) {

#top_hdr {
height: 70vh;
}
#top_hdr section {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 70vh;
}
.bx-wrapper, .bxslider {
height: 70vh;
}
.bxslider > div {
width: 100%;
height: 100%;
}
#prolo {
text-align: center;
margin-bottom: 8rem;
padding: 0 2rem;
}
#prolo h2 {
display: inline-block;
border: 0.1rem solid #ccc;
padding: 0.4rem 5rem;
font-size: 1.8rem;
margin-bottom: 3rem;
}
#prolo p {
margin-bottom: 3rem;
}
#prolo ul {
width: 40rem;
margin: 0 auto 3rem auto;
text-align: left;
}
#category {
display: grid;
grid-template-columns: 1fr 1fr;
}
#category article {
position: relative;
z-index: 1;
}
#category article a {
position: absolute;
display: block;
text-align: center;
color: #fff;
font-family: "M PLUS 1p", sans-serif;
font-weight: 400;
font-size: 1.8rem;
background: rgba(35,24,21,0.6);
width: 18rem;
padding: 3rem 0;
z-index: 2;
transition: 0.3s;
}
#category article a:hover {
background: rgba(35,24,21,1);
text-decoration: none;
width: 20rem;
}
#cate1 {
bottom: 0;
right: 0;
}
#cate2 {
bottom: 0;
left: 0;
}
#cate3 {
top: 0;
right: 0;
}
#cate4 {
top: 0;
left: 0;
}
#three {
background: #a2a2a2;
padding: 10rem 3rem 3rem 0;
text-align: right;
margin-bottom: 8rem;
}
#three img {
width: 15rem;
}
#gyo {
padding: 0 2rem;
margin: 0 auto 8rem auto;
}
#gyo h3 {
font-size: 2rem;
margin-bottom: 3rem;
font-weight: bold;
}
#gyo dt {
font-weight: bold;
}
#gyo dd {
margin-bottom: 2rem;
}

/* Works */
#hdr_works {
background: url("../img/works/hdr_works.webp") no-repeat center/cover;
}
#pan {
margin: -5rem 0 8rem 0;
text-align: center;
}
#pan li {
padding: 0 1rem;
line-height: 1;
display: inline-block;
border-right: 0.1rem solid #000;
}
#pan li:last-child {
border-right: none;
}
#pan li a:link {
color: #000;
}
#pan li a:visited {
color: #000;
}
#pan li a:hover {
color: #000;
}
#pan li a:active {
color: #000;
}
#wks_cate {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
#wks_cate h3 {
background: rgba(35,24,21,0.6);
color: #fff;
text-align: center;
padding: 1rem 0;
margin-bottom: 14rem;
}
#wks_cate article:nth-child(2) h3, #wks_cate article:nth-child(4) h3 {
background: rgba(35,24,21,0.5);
}
.wks_box {
padding: 0 2rem;
margin: 0 auto 8rem auto;
}
.wks_box h2 {
font-size: 3rem;
margin-bottom: 3rem;
text-align: center;
}
.wks_box > div {
margin-bottom: 3rem;
}
.wks_box p {
text-align: center;
margin-bottom: 3rem;
}
.wks_box table {
width: 80%;
margin: 0 auto;
}
.wks_box td {
width: 33.3%;
}
.works1, .works2 {
width: 90%;
margin: 0 auto 10rem auto;
display: grid;
}
.works1 {
gap: 0.8rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.works2 {
gap: 0.2rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
margin-bottom: 0.2rem;
}
.wks_mini {
margin-bottom: 0.6rem;
}
.eks2_end {
margin-bottom: 10rem;
}
#wks_tb2 {
width: 50%;
}
#wks_tb2 td {
width: 50%;
}

/* About */
#hdr_about {
background: url("../img/about/hdr_about.webp") no-repeat center/cover;
}
#yur {
width: 51.4rem;
margin: 0 auto 8rem auto;
}
#ab_read {
position: relative;
text-align: center;
font-size: 2.6rem;
padding-bottom: 1rem;
border-bottom: 0.4rem solid #a2a2a2;
margin-bottom: 5rem;
}
#ab_read span {
content: url("../img/about/read_back.webp");
position: absolute;
bottom: 0.6rem;
right: 5rem;
display: block;
width: 7.5rem;
}
#ab_tb {
width: 80rem;
margin: 0 auto 8rem auto;
}
#ab_tb table {
border-collapse: collapse;
width: 100%;
}
#ab_tb th, #ab_tb td {
vertical-align: top;
padding: 1rem 0;
}
#ab_tb th {
text-align: left;
width: 24%;
}
#map {
height: 30rem;
margin-bottom: 8rem;
}

/* Contact */
#hdr_contact {
background: url("../img/contact/hdr_contact.webp") no-repeat center/cover;
}
#m_wrap {
padding: 0 2rem;
margin: 0 auto;
}
#m_wrap table {
width: 100%;
border-collapse: collapse;
}
#m_wrap th, #m_wrap td {
padding: 2rem 1rem;
vertical-align: top;
}
#m_wrap th {
text-align: left;
width: 30%;
font-size: 1.8rem;
font-weight: normal;
}
#m_wrap input[type="text"], #m_wrap input[type="email"], #m_wrap textarea {
background: #eee;
border: none;
padding: 1rem;
}
#m_wrap input[type="button"], #m_wrap input[type="submit"] {
margin-bottom: 10rem;
}
#m_kaisya, #m_busyo, #m_name, #m_kana, #m_email, #m_emailcheck, #m_add, #m_naiyo {
width: 100%;
}
#m_naiyo {
height: 20rem;
}
#pol {
text-align: center;
font-size: 2.8rem;
margin: 10rem 0 3rem 0;
font-family: "游ゴシック","YuGothic";
}
#policy {
margin-bottom: 8rem;
height: 30rem;
overflow-y: scroll;
border: 0.1rem solid #ccc;
padding: 3rem;
font-family: "游ゴシック","YuGothic";
}
#policy h3 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
#policy p {
margin-bottom: 3rem;
}
.error_messe {
color: #ff0000;
margin: 1rem 0;
}

}


/* スマートフォン用
------------------------------------------------------------*/
@media only screen and (max-width: 599px) {

#top_hdr {
height: 70vh;
}
#top_hdr section {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 70vh;
}
.bx-wrapper, .bxslider {
height: 70vh;
}
.bxslider > div {
width: 100%;
height: 100%;
}
#prolo {
margin-bottom: 8rem;
padding:  0 2rem;
}
#prolo h2 {
width: 28rem;
border: 0.1rem solid #ccc;
padding: 0.4rem 0;
font-size: 1.8rem;
margin: 0 auto 3rem auto;
text-align: center;
}
#prolo p {
margin-bottom: 3rem;
}
#prolo ul {
width: 40rem;
margin: 0 auto 3rem auto;
text-align: left;
}
#category article {
position: relative;
z-index: 1;
}
#category article a {
position: absolute;
display: block;
text-align: center;
color: #fff;
font-family: "M PLUS 1p", sans-serif;
font-weight: 400;
font-size: 1.8rem;
background: rgba(35,24,21,0.6);
width: 18rem;
padding: 3rem 0;
z-index: 2;
transition: 0.3s;
}
#category article a:hover {
background: rgba(35,24,21,1);
text-decoration: none;
width: 20rem;
}
#cate1 {
bottom: 0;
right: 0;
}
#cate2 {
bottom: 0;
left: 0;
}
#cate3 {
bottom: 0;
right: 0;
}
#cate4 {
bottom: 0;
left: 0;
}
#three {
background: #a2a2a2;
padding: 10rem 3rem 3rem 0;
text-align: right;
margin-bottom: 8rem;
}
#three img {
width: 10rem;
}
#gyo {
padding: 0 2rem;
margin: 0 auto 8rem auto;
}
#gyo h3 {
font-size: 2rem;
margin-bottom: 3rem;
font-weight: bold;
}
#gyo dt {
font-weight: bold;
}
#gyo dd {
margin-bottom: 2rem;
}

/* Works */
#hdr_works {
background: url("../img/works/hdr_works.webp") no-repeat center/cover;
}
#pan {
margin: -5rem 0 8rem 0;
text-align: center;
}
#pan li {
padding: 0 1rem;
line-height: 1;
display: inline-block;
border-right: 0.1rem solid #000;
}
#pan li:last-child {
border-right: none;
}
#pan li a:link {
color: #000;
}
#pan li a:visited {
color: #000;
}
#pan li a:hover {
color: #000;
}
#pan li a:active {
color: #000;
}
#wks_cate {
display: grid;
grid-template-columns: 1fr 1fr;
}
#wks_cate h3 {
background: rgba(35,24,21,0.6);
color: #fff;
text-align: center;
padding: 1rem 0;
}
#wks_cate article:nth-child(2) h3, #wks_cate article:nth-child(4) h3 {
background: rgba(35,24,21,0.5);
}
.wks_box {
padding: 0 2rem;
margin: 0 auto 8rem auto;
}
.wks_box h2 {
font-size: 3rem;
margin-bottom: 3rem;
text-align: center;
}
.wks_box > div {
margin-bottom: 3rem;
}
.wks_box p {
margin-bottom: 3rem;
}
.wks_box table {
width: 100%;
margin: 0 auto;
}
.wks_box td {
display: block;
text-align: center;
padding: 1rem 0;
}
.wks_box td {
border-bottom: 0.1rem solid #ddd;
}
.works1, .works2 {
padding: 0 2rem;
margin: 0 auto 10rem auto;
display: grid;
}
.works1 {
gap: 0.8rem;
grid-template-columns: 1fr 1fr;
}
.works2 {
gap: 0.8rem;
grid-template-columns: 1fr 1fr;
margin-bottom: 0.2rem;
}
.wks_mini {
margin-bottom: 0.6rem;
}
.eks2_end {
margin-bottom: 10rem;
}
#wks_tb2 {
width: 100%;
}
#wks_tb2 td {
border-bottom: 0.1rem solid #ddd;
}

/* About */
#hdr_about {
background: url("../img/about/hdr_about.webp") no-repeat center/cover;
}
#yur {
padding: 0 2rem;
margin: 0 auto 8rem auto;
}
#ab_read {
position: relative;
text-align: center;
font-size: 2.6rem;
padding-bottom: 1rem;
border-bottom: 0.4rem solid #a2a2a2;
margin-bottom: 5rem;
}
#ab_read span {
display: none;
}
#ab_tb {
width: 94%;
margin: 0 auto 8rem auto;
}
#ab_tb table {
border-collapse: collapse;
width: 100%;
}
#ab_tb th, #ab_tb td {
vertical-align: top;
padding: 2rem 0;
display: block;
}
#ab_tb th {
text-align: left;
padding-bottom: 0;
}
#ab_tb td {
border-bottom: 0.1rem solid #ddd;
}
#map {
height: 30rem;
margin-bottom: 8rem;
}

/* Contact */
#hdr_contact {
background: url("../img/contact/hdr_contact.webp") no-repeat center/cover;
}
#m_wrap {
padding: 0 2rem;
margin: 0 auto;
}
#m_wrap table {
width: 100%;
border-collapse: collapse;
}
#m_wrap th, #m_wrap td {
padding: 1rem 1rem;
display: block;
}
#m_wrap th {
text-align: left;
padding-bottom: 0;
font-size: 1.8rem;
font-weight: normal;
}
#m_wrap td {
border-bottom: 0.1rem solid #ccc;
}
#m_wrap input[type="text"], #m_wrap input[type="email"], #m_wrap textarea {
background: #eee;
border: none;
padding: 1rem;
}
#m_wrap input[type="button"], #m_wrap input[type="submit"] {
margin-bottom: 10rem;
margin-top: 3rem;
}
#m_kaisya, #m_busyo, #m_name, #m_kana, #m_email, #m_emailcheck, #m_add, #m_naiyo {
width: 100%;
}
#m_naiyo {
height: 20rem;
}
#pol {
text-align: center;
font-size: 2rem;
margin: 10rem 0 3rem 0;
font-family: "游ゴシック","YuGothic";
}
#policy {
margin-bottom: 8rem;
height: 30rem;
overflow-y: scroll;
border: 0.1rem solid #ccc;
padding: 3rem;
font-family: "游ゴシック","YuGothic";
}
#policy h3 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
#policy p {
margin-bottom: 3rem;
}
.error_messe {
color: #ff0000;
margin: 1rem 0;
}

}