@charset "utf-8";

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

/* メインコンテンツ */
#main_cnt {
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 10;
background: #000;
color: #fff;
}
header#tphdr {
position: relative;
width: 100vw;
height: 100vh;
background: url("../img/top/back_last.webp") no-repeat center;
background-size: cover;
padding: 5rem 0 0 5rem;
}
header#tphdr div#top_logo {
position: absolute;
top: 5rem;
left: 5rem;
animation-name: main_logo;
animation-duration: 0.9s;
animation-fill-mode: both;
width: 50rem;
z-index: 10;
}
#top_tgl {
animation-name: main_logo;
animation-duration: 0.9s;
animation-fill-mode: both;
z-index: 9999;
}
#logo_center {
position: absolute;
width: 74.4rem;
height: 32.9rem;
top: calc(50% - 16.5rem);
left: calc(50% - 37.2rem);
z-index: 5;
}
header#tphdr div#top_logo img {
max-width: 100%;
height: auto;
}
@keyframes main_logo {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

/* topブロック1 */
#top_block1 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block1.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block1 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > div:first-child > div {
position: absolute;
top: 8rem;
left: 5rem;
width: 60%;
}
#top_block1 > div:first-child > div img {
max-width: 100%;
}
#top_block1 > div:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 19%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
#top_block1 > article div {
width: 100%;
padding: 0 10rem;
}
#top_block1 > article h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block1 > article h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block1 > article p {
font-size: 1.8vh;
line-height: 5vh;
font-weight: bold;
}

/* topブロック2 */
#top_block2 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block2.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block2 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block2 > div:first-child > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 6rem 3rem 0 3rem;
}
#top_block2 > div:first-child > div img {
max-width: 100%;
}
#top_block2 > article:nth-child(2) {
position: absolute;
top: 15rem;
left: 10rem;
width: 30%;
z-index: 3;
}
#top_block2 > article:nth-child(2) h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
line-height: 9vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block2 > article:nth-child(2) h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block2 > article:last-child {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
}
#top_block2 > article:last-child > div a {
display: flex;
align-items: flex-end;
padding: 2rem;
transition: 0.5s;
}
#top_block2 > article:last-child > div a:link {
color: #fff;
transition: 0.5s;
text-decoration: none;
}
#top_block2 > article:last-child > div a:visited {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a:hover {
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border: 0.5rem solid #e70013;
text-decoration: none;
}
#top_block2 > article:last-child > div a:active {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a h4 {
font-weight: bold;
text-shadow: 0.2rem 0.2rem 0 #000;
font-size: 1.0vw;
}

/* タイルbox1 */
#top_block2 > article:last-child > div:first-child {
position: absolute;
top: 0;
right: 66%;
width: 23%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:first-child div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox2 */
#top_block2 > article:last-child > div:nth-child(2) {
position: absolute;
top: 0;
right: 39%;
width: 27%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(2) a {
background: url("../img/top/tileback_1.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox3 */
#top_block2 > article:last-child > div:nth-child(3) {
position: absolute;
top: 0;
right: 0%;
width: 39%;
height: 40%;
padding: 2% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(3) a {
background: url("../img/top/tileback_2.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox4 */
#top_block2 > article:last-child > div:nth-child(4) {
position: absolute;
top: 23%;
right: 73%;
width: 23%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(4) a {
background: url("../img/top/tileback_3.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox5 */
#top_block2 > article:last-child > div:nth-child(5) {
position: absolute;
top: 23%;
right: 39%;
width: 33%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(5) a {
background: url("../img/top/tileback_4.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox6 */
#top_block2 > article:last-child > div:nth-child(6) {
position: absolute;
top: 40%;
right: 0;
width: 39%;
height: 20%;
padding: 1% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(6) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox7 */
#top_block2 > article:last-child > div:nth-child(7) {
position: absolute;
top: 60%;
right: 58%;
width: 42%;
height: 14%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(7) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox8 */
#top_block2 > article:last-child > div:nth-child(8) {
position: absolute;
bottom: 0;
right: 72%;
width: 25%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(8) a {
background: url("../img/top/tileback_5.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox9 */
#top_block2 > article:last-child > div:nth-child(9) {
position: absolute;
bottom: 0;
right: 58%;
width: 14%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(9) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox10 */
#top_block2 > article:last-child > div:nth-child(10) {
position: absolute;
bottom: 0;
right: 39%;
width: 19%;
height: 40%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(10) a {
background: url("../img/top/tileback_6.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox11 */
#top_block2 > article:last-child > div:nth-child(11) {
position: absolute;
bottom: 0;
right: 0;
width: 39%;
height: 40%;
padding: 1% 2% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(11) a {
background: url("../img/top/tileback_7.png") no-repeat center;
background-size: cover;
height: 100%;
}

#insta {
background: #2f2f2f;
padding: 8rem 0;
}
#insta > div:first-child {
text-align: center;
margin-bottom: 5rem;
}
#insta > div:last-child {
width: 100rem;
margin: 0 auto;
}

#logo_tsc {
position: absolute;
bottom: 2rem;
left: 5rem;
}

/* 会社案内 */
#hdr_company {
background: url("../img/company/hdr_company.png") no-repeat center;
background-size: cover;
}
#cnt_company h3 {
text-align: center;
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_company h3 img {
margin-right: 1rem;
}
#cnt_company p {
margin-bottom: 5rem;
padding: 0 5rem;
font-size: 1.6rem;
line-height: 3.2rem;
}
#cnt_company table {
width: 60%;
margin: 0 auto 8rem auto;
font-size: 1.6rem;
}
#cnt_company th {
text-align: left;
}
#cnt_company th, #cnt_company td {
vertical-align: top;
padding: 2rem 0;
}
#cnt_company td {
padding-left: 2rem;
}
#cnt_company > div {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_company h4 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 2rem;
}
#cnt_company > div.map {
display: block;
height: 30rem;
}

/* 業務案内 */
#hdr_about {
background: url("../img/about/hdr_about.png") no-repeat center;
background-size: cover;
}
#cnt_about > p {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 10rem;
}
#cnt_about > article {
display: flex;
justify-content: space-between;
margin-bottom: 10rem;
}
#cnt_about > article figure {
margin-right: 5rem;
}
#cnt_about > article > div {
width: 100%;
}
#cnt_about > article > div h3 {
background:  rgba(255,255,255,0.8) url("../img/about/back_h.png") no-repeat;
background-position: right 0;
height: 4rem;
padding: 0.5rem 3rem;
font-size: 3rem;
line-height: 3rem;
font-weight: bold;
color: #000;
margin-bottom: 5rem;
}
#cnt_about > article > div p {
line-height: 3.2rem;
font-size: 1.6rem;
margin-bottom: 5rem;
}
#cnt_about > article > div a {
color: #fff;
text-decoration: none;
}
#cnt_about > article > div a:hover {
opacity: 0.7;
}
#cnt_about > article > div > div img {
vertical-align: -0.5rem;
margin-right: 2rem;
}

/* 施工実績 */
#hdr_works {
background: url("../img/works/hdr_works.png") no-repeat center;
background-size: cover;
}
#cnt_works h3 {
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_works > div {
display: flex;
flex-wrap: wrap;
}
#cnt_works > div article {
margin: 0 5rem 5rem 0;
text-align: center;
}
#cnt_works > div article figure {
margin-bottom: 2rem;
}
#cnt_works > div article figure img {
width: 30rem;
height: 22.5rem;
object-fit: cover;
transition: 0.3s;
}
#cnt_works > div article figure img:hover {
opacity: 0.7;
transition: 0.3s;
}
#cnt_works > div article:nth-child(3n) {
margin-right: 0;
}
#cnt_works > div article h4, #cnt_works > div article h5 {
font-size: 1.6rem;
font-weight: bold;
}

/* 施工実績-詳細 */
header#hdr_works_single {
background: #000;
height: 30vh;
}
header#hdr_works_single h1 {
bottom: 8rem;
}
header#hdr_works_single h2 {
bottom: 4rem;
}
.cct_slider {
margin-bottom: 5rem;
}
.cct_slider img {
width: 100rem;
height: 75rem;
object-fit: cover;
transition: 0.3s;
}
.cct_thumb {
display: flex;
flex-wrap: wrap;
}
.cct_thumb img {
width: 12.5rem;
height: 9.4rem;
object-fit: cover;
}
.cct_slider img:hover, .cct_thumb img:hover {
opacity: 0.7;
transition: 0.3s;
}
#cnt_works_single h3 {
font-size: 2rem;
font-weight: bold;
margin: 5rem 0;
}

/* 特集 */
#hdr_special {
background: url("../img/special/hdr_special.png") no-repeat center;
background-size: cover;
}
#cnt_special h3, #cnt_renovation h3, #cnt_construction h3 {
background: #3d3a39 url("../img/special/back_h.png") no-repeat;
color: #fff;
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
padding: 0.5rem 4rem 0.5rem 6rem;
margin-bottom: 6rem;
}
#cnt_special > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3rem;
margin: 5rem 0;
}
#cnt_special > ul li {
list-style: square;
margin: 0 0 2rem 3rem;
}
#cnt_special > h4 {
font-size: 1.8rem;
line-height: 2rem;
font-weight: bold;
margin: 5rem 0 3rem 0;
}
#cnt_special > h5 {
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
margin: 5rem 0;
}
#twobox_ssp {
display: flex;
justify-content: space-between;
}
#twobox_ssp article {
width: 48%;
margin: 2rem 0;
}
#twobox_ssp article figure {
margin-bottom: 2rem;
}
#ctbox {
width: 90%;
padding: 2rem;
font-weight: bold;
border: 0.2rem solid #3d3a39;
margin: 2rem auto !important;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox {
margin-bottom: 8rem;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox figure {
margin-bottom: 2rem;
}

/* リノベーション */
#hdr_renovation {
background: url("../img/renovation/hdr_renovation.png") no-repeat center;
background-size: cover;
}
#cnt_renovation > p:nth-child(2), #cnt_construction > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 3rem;
}
#cnt_renovation > article:nth-child(3) {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_renovation h4, #cnt_construction h4, #cnt_mail h4 {
font-size: 1.8rem;
padding-bottom: 0.6rem;
border-bottom: 0.4rem solid #3d3a39;
margin-bottom: 3rem;
font-weight: bold;
}
#cnt_renovation table {
width: 80%;
margin: 0 auto 5rem auto;
font-size: 1.8rem;
font-weight: bold;
}
#cnt_renovation table td {
width: 50%;
padding: 1rem 0;
}
#reno_p {
width: 90%;
padding: 3rem 2rem;
text-align: center;
border: 0.2rem solid #3d3a39;
margin: 2rem auto;
font-size: 2.4rem;
line-height: 3rem;
}
#rrp {
font-size: 1.8rem;
font-weight: bold;
line-height: 3.4rem;
margin: 4rem 0 1rem 0;
}

/* 建築工事一式 */
#hdr_construction {
background: url("../img/construction/hdr_construction.png") no-repeat center;
background-size: cover;
}
#cnt_construction > div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#cnt_construction > div article {
margin-bottom: 5rem;
}
#cnt_construction > div article h5 {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 1rem;
}

/* お問い合わせ */
#cnt_mail > p:nth-child(2) {
margin-bottom: 5rem;
}
#cnt_mail table {
width: 100%;
color: #000;
margin-bottom: 5rem;
}
#cnt_mail table th, #cnt_mail table td {
padding: 2rem;
vertical-align: top;
border: 0.1rem solid #ccc;
background: #ededed;
}
#cnt_mail table th {
width: 30%;
text-align: left;
}
.star {
color: #ff0000;
margin-left: 0.6rem;
font-size: 1.2rem;
}
.submit {
text-align: center;
}
.submit input {
cursor: pointer;
}
#name, #kana, #kaisya {
width: 80%;
}
#email, #emailcheck, #message, #address {
width: 100%;
}
#tel0, #tel1, #tel2, #fax0, #fax1, #fax2, #zip1 {
width: 8rem;
}
#zip0 {
width: 5rem;
}
#wrap_mail h4 {
background: #008cd6;
text-align: center;
padding: 0.8rem 0;
margin-bottom: 2rem;
}
#policy {
border: 0.1rem solid #ccc;
padding: 2rem;
height: 20rem;
overflow: auto;
}
#policy p {
margin-bottom: 3rem;
}
#wrap_mail > div:last-child p:last-child {
margin-bottom: 0;
}
.minh {
min-height: 50rem;
}
.ERR {
color: #ff0000;
}

}

/* タブレット用　横向き
------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {

/* メインコンテンツ */
#main_cnt {
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 10;
background: #000;
color: #fff;
overflow-y: auto;
overflow-x: hidden;
}
header#tphdr {
position: relative;
width: 100vw;
height: 100vh;
background: url("../img/top/back_last.webp") no-repeat center;
background-size: cover;
padding: 5rem 0 0 5rem;
}
header#tphdr div#top_logo {
position: absolute;
top: 5rem;
left: 5rem;
width: 50rem;
z-index: 10;
}
#top_tgl {
z-index: 9999;
}
#logo_center {
position: absolute;
width: 74.4rem;
height: 32.9rem;
top: calc(50% - 16.5rem);
left: calc(50% - 37.2rem);
z-index: 5;
}
header#tphdr div#top_logo img {
max-width: 100%;
height: auto;
}

/* topブロック1 */
#top_block1 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block1.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block1 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > div:first-child > div {
position: absolute;
top: 8rem;
left: 5rem;
width: 60%;
}
#top_block1 > div:first-child > div img {
max-width: 100%;
}
#top_block1 > div:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 19%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
#top_block1 > article div {
width: 100%;
padding: 0 10rem;
}
#top_block1 > article h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block1 > article h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block1 > article p {
font-size: 1.8vh;
line-height: 5vh;
font-weight: bold;
}

/* topブロック2 */
#top_block2 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block2.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block2 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block2 > div:first-child > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 6rem 3rem 0 3rem;
}
#top_block2 > div:first-child > div img {
max-width: 100%;
}
#top_block2 > article:nth-child(2) {
position: absolute;
top: 15rem;
left: 10rem;
width: 30%;
z-index: 3;
}
#top_block2 > article:nth-child(2) h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
line-height: 9vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block2 > article:nth-child(2) h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block2 > article:last-child {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
}
#top_block2 > article:last-child > div a {
display: flex;
align-items: flex-end;
padding: 2rem;
transition: 0.5s;
}
#top_block2 > article:last-child > div a:link {
color: #fff;
transition: 0.5s;
text-decoration: none;
}
#top_block2 > article:last-child > div a:visited {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a:hover {
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border: 0.5rem solid #e70013;
text-decoration: none;
}
#top_block2 > article:last-child > div a:active {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a h4 {
font-weight: bold;
text-shadow: 0.2rem 0.2rem 0 #000;
font-size: 1.0vw;
}

/* タイルbox1 */
#top_block2 > article:last-child > div:first-child {
position: absolute;
top: 0;
right: 66%;
width: 23%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:first-child div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox2 */
#top_block2 > article:last-child > div:nth-child(2) {
position: absolute;
top: 0;
right: 39%;
width: 27%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(2) a {
background: url("../img/top/tileback_1.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox3 */
#top_block2 > article:last-child > div:nth-child(3) {
position: absolute;
top: 0;
right: 0%;
width: 39%;
height: 40%;
padding: 2% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(3) a {
background: url("../img/top/tileback_2.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox4 */
#top_block2 > article:last-child > div:nth-child(4) {
position: absolute;
top: 23%;
right: 73%;
width: 23%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(4) a {
background: url("../img/top/tileback_3.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox5 */
#top_block2 > article:last-child > div:nth-child(5) {
position: absolute;
top: 23%;
right: 39%;
width: 33%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(5) a {
background: url("../img/top/tileback_4.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox6 */
#top_block2 > article:last-child > div:nth-child(6) {
position: absolute;
top: 40%;
right: 0;
width: 39%;
height: 20%;
padding: 1% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(6) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox7 */
#top_block2 > article:last-child > div:nth-child(7) {
position: absolute;
top: 60%;
right: 58%;
width: 42%;
height: 14%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(7) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox8 */
#top_block2 > article:last-child > div:nth-child(8) {
position: absolute;
bottom: 0;
right: 72%;
width: 25%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(8) a {
background: url("../img/top/tileback_5.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox9 */
#top_block2 > article:last-child > div:nth-child(9) {
position: absolute;
bottom: 0;
right: 58%;
width: 14%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(9) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox10 */
#top_block2 > article:last-child > div:nth-child(10) {
position: absolute;
bottom: 0;
right: 39%;
width: 19%;
height: 40%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(10) a {
background: url("../img/top/tileback_6.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox11 */
#top_block2 > article:last-child > div:nth-child(11) {
position: absolute;
bottom: 0;
right: 0;
width: 39%;
height: 40%;
padding: 1% 2% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(11) a {
background: url("../img/top/tileback_7.png") no-repeat center;
background-size: cover;
height: 100%;
}

#insta {
background: #2f2f2f;
padding: 8rem 0;
}
#insta > div:first-child {
text-align: center;
margin-bottom: 5rem;
}
#insta > div:last-child {
display: flex;
margin: 0 auto;
}

/* 会社案内 */
#hdr_company {
background: url("../img/company/hdr_company.png") no-repeat center;
background-size: cover;
}
#cnt_company h3 {
text-align: center;
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_company h3 img {
margin-right: 1rem;
}
#cnt_company p {
margin-bottom: 5rem;
padding: 0 5rem;
font-size: 1.6rem;
line-height: 3.2rem;
}
#cnt_company table {
width: 80%;
margin: 0 auto 8rem auto;
font-size: 1.6rem;
}
#cnt_company th {
text-align: left;
}
#cnt_company th, #cnt_company td {
vertical-align: top;
padding: 2rem 0;
}
#cnt_company td {
padding-left: 2rem;
}
#cnt_company > div {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_company > div figure {
width: 32%;
}
#cnt_company h4 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 2rem;
}
#cnt_company > div.map {
display: block;
height: 30rem;
}

/* 業務案内 */
#hdr_about {
background: url("../img/about/hdr_about.png") no-repeat center;
background-size: cover;
}
#cnt_about > p {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 10rem;
}
#cnt_about > article {
display: flex;
justify-content: space-between;
margin-bottom: 10rem;
}
#cnt_about > article figure {
margin-right: 5rem;
}
#cnt_about > article > div {
width: 100%;
}
#cnt_about > article > div h3 {
background:  rgba(255,255,255,0.8) url("../img/about/back_h.png") no-repeat;
background-position: right 0;
height: 4rem;
padding: 0.5rem 3rem;
font-size: 3rem;
line-height: 3rem;
font-weight: bold;
color: #000;
margin-bottom: 5rem;
}
#cnt_about > article > div p {
line-height: 3.2rem;
font-size: 1.6rem;
margin-bottom: 5rem;
}
#cnt_about > article > div a {
color: #fff;
text-decoration: none;
}
#cnt_about > article > div a:hover {
opacity: 0.7;
}
#cnt_about > article > div > div img {
vertical-align: -0.5rem;
margin-right: 2rem;
}

/* 施工実績 */
#hdr_works {
background: url("../img/works/hdr_works.png") no-repeat center;
background-size: cover;
}
#cnt_works h3 {
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_works > div {
display: flex;
flex-wrap: wrap;
}
#cnt_works > div article {
margin: 0 5rem 5rem 0;
text-align: center;
}
#cnt_works > div article figure {
margin-bottom: 2rem;
}
#cnt_works > div article figure img {
max-width: 100%;
transition: 0.3s;
}
#cnt_works > div article figure img:hover {
opacity: 0.7;
transition: 0.3s;
}
#cnt_works > div article:nth-child(3n) {
margin-right: 0;
}
#cnt_works > div article h4, #cnt_works > div article h5 {
font-size: 1.6rem;
font-weight: bold;
}

/* 施工実績-詳細 */
header#hdr_works_single {
background: #000;
height: 30vh;
}
header#hdr_works_single h1 {
bottom: 8rem;
}
header#hdr_works_single h2 {
bottom: 4rem;
}
.cct_slider {
margin-bottom: 5rem;
}
.cct_slider img {
width: 100rem;
height: 75rem;
object-fit: cover;
}
.cct_thumb {
display: flex;
flex-wrap: wrap;
width: 87.5rem;
margin: 0 auto;
}
.cct_thumb img {
width: 12.5rem;
height: 9.4rem;
object-fit: cover;
}
#cnt_works_single h3 {
font-size: 2rem;
font-weight: bold;
margin: 5rem 0;
}

/* 特集 */
#hdr_special {
background: url("../img/special/hdr_special.png") no-repeat center;
background-size: cover;
}
#cnt_special h3, #cnt_renovation h3, #cnt_construction h3 {
background: #3d3a39 url("../img/special/back_h.png") no-repeat;
color: #fff;
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
padding: 0.5rem 4rem 0.5rem 6rem;
margin-bottom: 6rem;
}
#cnt_special > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3rem;
margin: 5rem 0;
}
#cnt_special > ul li {
list-style: square;
margin: 0 0 2rem 3rem;
}
#cnt_special > h4 {
font-size: 1.8rem;
line-height: 2rem;
font-weight: bold;
margin: 5rem 0 3rem 0;
}
#cnt_special > h5 {
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
margin: 5rem 0;
}
#twobox_ssp {
display: flex;
justify-content: space-between;
}
#twobox_ssp article {
width: 48%;
margin: 2rem 0;
}
#twobox_ssp article figure {
margin-bottom: 2rem;
}
#ctbox {
width: 90%;
padding: 2rem;
font-weight: bold;
border: 0.2rem solid #3d3a39;
margin: 2rem auto !important;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox {
margin-bottom: 8rem;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox figure {
margin-bottom: 2rem;
}

/* リノベーション */
#hdr_renovation {
background: url("../img/renovation/hdr_renovation.png") no-repeat center;
background-size: cover;
}
#cnt_renovation > p:nth-child(2), #cnt_construction > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 3rem;
}
#cnt_renovation > article:nth-child(3) {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_renovation h4, #cnt_construction h4, #cnt_mail h4 {
font-size: 1.8rem;
padding-bottom: 0.6rem;
border-bottom: 0.4rem solid #3d3a39;
margin-bottom: 3rem;
font-weight: bold;
}
#cnt_renovation table {
width: 80%;
margin: 0 auto 5rem auto;
font-size: 1.8rem;
font-weight: bold;
}
#cnt_renovation table td {
width: 50%;
padding: 1rem 0;
}
#reno_p {
width: 90%;
padding: 3rem 2rem;
text-align: center;
border: 0.2rem solid #3d3a39;
margin: 2rem auto;
font-size: 2.4rem;
line-height: 3rem;
}
#rrp {
font-size: 1.8rem;
font-weight: bold;
line-height: 3.4rem;
margin: 4rem 0 1rem 0;
}

/* 建築工事一式 */
#hdr_construction {
background: url("../img/construction/hdr_construction.png") no-repeat center;
background-size: cover;
}
#cnt_construction > div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#cnt_construction > div article {
margin-bottom: 5rem;
}
#cnt_construction > div article h5 {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 1rem;
}

/* お問い合わせ */
#cnt_mail > p:nth-child(2) {
margin-bottom: 5rem;
}
#cnt_mail table {
width: 100%;
color: #000;
margin-bottom: 5rem;
}
#cnt_mail table th, #cnt_mail table td {
padding: 2rem;
vertical-align: top;
border: 0.1rem solid #ccc;
background: #ededed;
}
#cnt_mail table th {
width: 30%;
text-align: left;
}
.star {
color: #ff0000;
margin-left: 0.6rem;
font-size: 1.2rem;
}
.submit {
text-align: center;
}
.submit input {
cursor: pointer;
}
#name, #kana, #kaisya {
width: 80%;
}
#email, #emailcheck, #message, #address {
width: 100%;
}
#tel0, #tel1, #tel2, #fax0, #fax1, #fax2, #zip1 {
width: 8rem;
}
#zip0 {
width: 5rem;
}
#wrap_mail h4 {
background: #008cd6;
text-align: center;
padding: 0.8rem 0;
margin-bottom: 2rem;
}
#policy {
border: 0.1rem solid #ccc;
padding: 2rem;
height: 20rem;
overflow: auto;
}
#policy p {
margin-bottom: 3rem;
}
#wrap_mail > div:last-child p:last-child {
margin-bottom: 0;
}
.minh {
min-height: 50rem;
}
.ERR {
color: #ff0000;
}

}

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

#new_op {
display: none;
}

/* box 1個目 */
#first_box {
display: none;
}

/* box 2個目 */
#second_box {
display: none;
}

/* メインコンテンツ */
#main_cnt {
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 10;
background: #000;
color: #fff;
overflow-y: auto;
overflow-x: hidden;
}
header#tphdr {
position: relative;
width: 100vw;
height: 100vh;
background: url("../img/top/back_last.webp") no-repeat center;
background-size: cover;
padding: 5rem 0 0 5rem;
}
header#tphdr div#top_logo {
position: absolute;
top: 5rem;
left: 5rem;
width: 50rem;
z-index: 10;
}
#top_tgl {
z-index: 9999;
}
#logo_center {
position: absolute;
width: 74.4rem;
height: 32.9rem;
top: calc(50% - 16.5rem);
left: calc(50% - 37.2rem);
z-index: 5;
}
header#tphdr div#top_logo img {
max-width: 100%;
height: auto;
}

/* topブロック1 */
#top_block1 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block1.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block1 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > div:first-child > div {
position: absolute;
top: 8rem;
left: 5rem;
width: 60%;
}
#top_block1 > div:first-child > div img {
max-width: 100%;
}
#top_block1 > div:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 19%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
#top_block1 > article div {
width: 100%;
padding: 0 10rem;
}
#top_block1 > article h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block1 > article h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block1 > article p {
font-size: 1.8vh;
line-height: 5vh;
font-weight: bold;
}

/* topブロック2 */
#top_block2 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block2.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block2 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 22%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block2 > div:first-child > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 6rem 3rem 0 3rem;
}
#top_block2 > div:first-child > div img {
max-width: 100%;
}
#top_block2 > article:nth-child(2) {
position: absolute;
top: 15rem;
left: 10rem;
width: 30%;
z-index: 3;
}
#top_block2 > article:nth-child(2) h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
line-height: 9vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block2 > article:nth-child(2) h3 {
font-family: arial;
font-weight: bold;
font-size: 3.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block2 > article:last-child {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
}
#top_block2 > article:last-child > div a {
display: flex;
align-items: flex-end;
padding: 2rem;
transition: 0.5s;
}
#top_block2 > article:last-child > div a:link {
color: #fff;
transition: 0.5s;
text-decoration: none;
}
#top_block2 > article:last-child > div a:visited {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a:hover {
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border: 0.5rem solid #e70013;
text-decoration: none;
}
#top_block2 > article:last-child > div a:active {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a h4 {
font-weight: bold;
text-shadow: 0.2rem 0.2rem 0 #000;
font-size: 1.0vw;
}

/* タイルbox1 */
#top_block2 > article:last-child > div:first-child {
position: absolute;
top: 0;
right: 66%;
width: 23%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:first-child div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox2 */
#top_block2 > article:last-child > div:nth-child(2) {
position: absolute;
top: 0;
right: 39%;
width: 27%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(2) a {
background: url("../img/top/tileback_1.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox3 */
#top_block2 > article:last-child > div:nth-child(3) {
position: absolute;
top: 0;
right: 0%;
width: 39%;
height: 40%;
padding: 2% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(3) a {
background: url("../img/top/tileback_2.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox4 */
#top_block2 > article:last-child > div:nth-child(4) {
position: absolute;
top: 23%;
right: 73%;
width: 23%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(4) a {
background: url("../img/top/tileback_3.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox5 */
#top_block2 > article:last-child > div:nth-child(5) {
position: absolute;
top: 23%;
right: 39%;
width: 33%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(5) a {
background: url("../img/top/tileback_4.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox6 */
#top_block2 > article:last-child > div:nth-child(6) {
position: absolute;
top: 40%;
right: 0;
width: 39%;
height: 20%;
padding: 1% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(6) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox7 */
#top_block2 > article:last-child > div:nth-child(7) {
position: absolute;
top: 60%;
right: 58%;
width: 42%;
height: 14%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(7) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox8 */
#top_block2 > article:last-child > div:nth-child(8) {
position: absolute;
bottom: 0;
right: 72%;
width: 25%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(8) a {
background: url("../img/top/tileback_5.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox9 */
#top_block2 > article:last-child > div:nth-child(9) {
position: absolute;
bottom: 0;
right: 58%;
width: 14%;
height: 26%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(9) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox10 */
#top_block2 > article:last-child > div:nth-child(10) {
position: absolute;
bottom: 0;
right: 39%;
width: 19%;
height: 40%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(10) a {
background: url("../img/top/tileback_6.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox11 */
#top_block2 > article:last-child > div:nth-child(11) {
position: absolute;
bottom: 0;
right: 0;
width: 39%;
height: 40%;
padding: 1% 2% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(11) a {
background: url("../img/top/tileback_7.png") no-repeat center;
background-size: cover;
height: 100%;
}

#insta {
background: #2f2f2f;
padding: 8rem 0;
}
#insta > div:first-child {
text-align: center;
margin-bottom: 5rem;
}
#insta > div:last-child {
padding: 0 2rem;
margin: 0 auto;
display: flex;
}

#logo_tsc {
position: absolute;
bottom: 2rem;
left: 5rem;
}

/* 会社案内 */
#hdr_company {
background: url("../img/company/hdr_company.png") no-repeat center;
background-size: cover;
}
#cnt_company h3 {
text-align: center;
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_company h3 img {
margin-right: 1rem;
}
#cnt_company p {
margin-bottom: 5rem;
padding: 0 5rem;
font-size: 1.6rem;
line-height: 3.2rem;
}
#cnt_company table {
width: 90%;
margin: 0 auto 8rem auto;
font-size: 1.6rem;
}
#cnt_company th {
text-align: left;
}
#cnt_company th, #cnt_company td {
vertical-align: top;
padding: 2rem 0;
}
#cnt_company td {
padding-left: 2rem;
}
#cnt_company > div {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_company > div figure {
width: 32%;
}
#cnt_company h4 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 2rem;
}
#cnt_company > div.map {
display: block;
height: 30rem;
}

/* 業務案内 */
#hdr_about {
background: url("../img/about/hdr_about.png") no-repeat center;
background-size: cover;
}
#cnt_about > p {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 10rem;
}
#cnt_about > article {
display: flex;
justify-content: space-between;
margin-bottom: 10rem;
}
#cnt_about > article figure {
margin-right: 5rem;
}
#cnt_about > article > div {
width: 100%;
}
#cnt_about > article > div h3 {
background:  rgba(255,255,255,0.8) url("../img/about/back_h.png") no-repeat;
background-position: right 0;
height: 4rem;
padding: 0.5rem 3rem;
font-size: 3rem;
line-height: 3rem;
font-weight: bold;
color: #000;
margin-bottom: 5rem;
}
#cnt_about > article > div p {
line-height: 3.2rem;
font-size: 1.6rem;
margin-bottom: 5rem;
}
#cnt_about > article > div a {
color: #fff;
text-decoration: none;
}
#cnt_about > article > div a:hover {
opacity: 0.7;
}
#cnt_about > article > div > div img {
vertical-align: -0.5rem;
margin-right: 2rem;
}

/* 施工実績 */
#hdr_works {
background: url("../img/works/hdr_works.png") no-repeat center;
background-size: cover;
}
#cnt_works h3 {
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_works > div {
display: flex;
flex-wrap: wrap;
width: 70rem;
margin: 0 auto;
}
#cnt_works > div article {
margin: 0 2rem 5rem 0;
text-align: center;
}
#cnt_works > div article figure {
width: 22rem;
margin-bottom: 2rem;
}
#cnt_works > div article:nth-child(3n) {
margin-right: 0;
}
#cnt_works > div article figure img {
width: 22rem;
height: 16.5rem;
object-fit: cover;
max-width: 100%;
transition: 0.3s;
}
#cnt_works > div article figure img:hover {
opacity: 0.7;
transition: 0.3s;
}
#cnt_works > div article:nth-child(3n) {
margin-right: 0;
}
#cnt_works > div article h4, #cnt_works > div article h5 {
font-size: 1.6rem;
font-weight: bold;
}

/* 施工実績-詳細 */
header#hdr_works_single {
background: #000;
height: 30vh;
}
header#hdr_works_single h1 {
bottom: 8rem;
}
header#hdr_works_single h2 {
bottom: 4rem;
}
.cct_slider {
margin-bottom: 5rem;
}
.cct_slider img {
width: 100rem;
height: 75rem;
object-fit: cover;
}
.cct_thumb {
display: flex;
flex-wrap: wrap;
width: 62.5rem;
margin: 0 auto;
}
.cct_thumb img {
width: 12.5rem;
height: 9.4rem;
object-fit: cover;
}
#cnt_works_single h3 {
font-size: 2rem;
font-weight: bold;
margin: 5rem 0;
}

/* 特集 */
#hdr_special {
background: url("../img/special/hdr_special.png") no-repeat center;
background-size: cover;
}
#cnt_special h3, #cnt_renovation h3, #cnt_construction h3 {
background: #3d3a39 url("../img/special/back_h.png") no-repeat;
color: #fff;
font-size: 1.8rem;
line-height: 3rem;
font-weight: bold;
padding: 0.5rem 4rem 0.5rem 6rem;
margin-bottom: 6rem;
}
#cnt_special > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3rem;
margin: 5rem 0;
}
#cnt_special > ul li {
list-style: square;
margin: 0 0 2rem 3rem;
}
#cnt_special > h4 {
font-size: 1.8rem;
line-height: 2rem;
font-weight: bold;
margin: 5rem 0 3rem 0;
}
#cnt_special > h5 {
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
margin: 5rem 0;
}
#twobox_ssp {
display: flex;
justify-content: space-between;
}
#twobox_ssp article {
width: 48%;
margin: 2rem 0;
}
#twobox_ssp article figure {
margin-bottom: 2rem;
}
#ctbox {
width: 90%;
padding: 2rem;
font-weight: bold;
border: 0.2rem solid #3d3a39;
margin: 2rem auto !important;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox {
margin-bottom: 8rem;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox figure {
margin-bottom: 2rem;
}

/* リノベーション */
#hdr_renovation {
background: url("../img/renovation/hdr_renovation.png") no-repeat center;
background-size: cover;
}
#cnt_renovation > p:nth-child(2), #cnt_construction > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 3rem;
}
#cnt_renovation > article:nth-child(3) {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_renovation h4, #cnt_construction h4, #cnt_mail h4 {
font-size: 1.8rem;
padding-bottom: 0.6rem;
border-bottom: 0.4rem solid #3d3a39;
margin-bottom: 3rem;
font-weight: bold;
}
#cnt_renovation table {
width: 80%;
margin: 0 auto 5rem auto;
font-size: 1.8rem;
font-weight: bold;
}
#cnt_renovation table td {
width: 50%;
padding: 1rem 0;
}
#reno_p {
width: 90%;
padding: 3rem 2rem;
text-align: center;
border: 0.2rem solid #3d3a39;
margin: 2rem auto;
font-size: 2.4rem;
line-height: 3rem;
}
#rrp {
font-size: 1.8rem;
font-weight: bold;
line-height: 3.4rem;
margin: 4rem 0 1rem 0;
}

/* 建築工事一式 */
#hdr_construction {
background: url("../img/construction/hdr_construction.png") no-repeat center;
background-size: cover;
}
#cnt_construction > div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#cnt_construction > div article {
width: 48%;
margin-bottom: 5rem;
}
#cnt_construction > div article h5 {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 1rem;
}

/* お問い合わせ */
#cnt_mail > p:nth-child(2) {
margin-bottom: 5rem;
}
#cnt_mail table {
width: 100%;
color: #000;
margin-bottom: 5rem;
}
#cnt_mail table th, #cnt_mail table td {
padding: 2rem;
vertical-align: top;
border: 0.1rem solid #ccc;
background: #ededed;
}
#cnt_mail table th {
width: 30%;
text-align: left;
}
.star {
color: #ff0000;
margin-left: 0.6rem;
font-size: 1.2rem;
}
.submit {
text-align: center;
}
.submit input {
cursor: pointer;
}
#name, #kana, #kaisya {
width: 80%;
}
#email, #emailcheck, #message, #address {
width: 100%;
}
#tel0, #tel1, #tel2, #fax0, #fax1, #fax2, #zip1 {
width: 8rem;
}
#zip0 {
width: 5rem;
}
#wrap_mail h4 {
background: #008cd6;
text-align: center;
padding: 0.8rem 0;
margin-bottom: 2rem;
}
#policy {
border: 0.1rem solid #ccc;
padding: 2rem;
height: 20rem;
overflow: auto;
}
#policy p {
margin-bottom: 3rem;
}
#wrap_mail > div:last-child p:last-child {
margin-bottom: 0;
}
.minh {
min-height: 50rem;
}
.ERR {
color: #ff0000;
}

}


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

/* メインコンテンツ */
#main_cnt {
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 10;
background: #000;
color: #fff;
overflow-y: auto;
overflow-x: hidden;
}
header#tphdr {
position: relative;
width: 100vw;
height: 50vh;
background: url("../img/top/back_last.webp") no-repeat center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
header#tphdr div#top_logo {
width: 50vh;
z-index: 10;
}
#top_tgl {
z-index: 9999;
}
#logo_center {
display: none;
}
header#tphdr div#top_logo img {
max-width: 100%;
height: auto;
}

/* topブロック1 */
#top_block1 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block1.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block1 > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 2;
}
#top_block1 > div:first-child > div {
position: absolute;
top: 3rem;
left: 3rem;
width: 10rem;
}
#top_block1 > div:first-child > div img {
max-width: 100%;
}
#top_block1 > div:nth-child(2) {
display: none;
}
#top_block1 > article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
#top_block1 > article div {
width: 100%;
padding: 0 3rem;
}
#top_block1 > article h2 {
font-family: arial;
font-weight: bold;
font-size: 7.4vh;
color: #fff;
margin-bottom: 4vh;
}
#top_block1 > article h3 {
font-family: arial;
font-weight: bold;
font-size: 2.6vh;
color: rgba(255,255,255,0.7);
margin-bottom: 5vh;
}
#top_block1 > article p {
font-size: 1.8vh;
line-height: 5vh;
font-weight: bold;
}

/* topブロック2 */
#top_block2 {
position: relative;
height: 100vh;
background: url("../img/top/bacl_block2.png") no-repeat center;
background-size: cover;
z-index: 1;
}
#top_block2 > div:first-child {
display: none;
}
#top_block2 > div:first-child > div {
display: none;
}
#top_block2 > article:nth-child(2) {
display: none;
}
#top_block2 > article:last-child {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 100;
}
#top_block2 > article:last-child > div a {
display: flex;
align-items: flex-end;
padding: 2rem;
transition: 0.5s;
}
#top_block2 > article:last-child > div a:link {
color: #fff;
transition: 0.5s;
text-decoration: none;
}
#top_block2 > article:last-child > div a:visited {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a:hover {
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border: 0.5rem solid #e70013;
text-decoration: none;
}
#top_block2 > article:last-child > div a:active {
color: #fff;
text-decoration: none;
}
#top_block2 > article:last-child > div a h4 {
font-weight: bold;
text-shadow: 0.2rem 0.2rem 0 #000;
font-size: 1.6vh;
}

/* タイルbox1 */
#top_block2 > article:last-child > div:first-child {
position: absolute;
top: 0;
left: 0%;
width: 33%;
height: 23%;
padding: 2% 1% 1% 2%;
}
#top_block2 > article:last-child > div:first-child div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox2 */
#top_block2 > article:last-child > div:nth-child(2) {
position: absolute;
top: 0;
left: 33%;
width: 33%;
height: 23%;
padding: 2% 1% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(2) a {
background: url("../img/top/tileback_1.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox3 */
#top_block2 > article:last-child > div:nth-child(3) {
position: absolute;
top: 0;
right: 0%;
width: 34%;
height: 40%;
padding: 2% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(3) a {
background: url("../img/top/tileback_2.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox4 */
#top_block2 > article:last-child > div:nth-child(4) {
position: absolute;
top: 23%;
left: 0%;
width: 33%;
height: 37%;
padding: 1% 1% 1% 2%;
}
#top_block2 > article:last-child > div:nth-child(4) a {
background: url("../img/top/tileback_3.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox5 */
#top_block2 > article:last-child > div:nth-child(5) {
position: absolute;
top: 23%;
right: 34%;
width: 33%;
height: 37%;
padding: 1%;
}
#top_block2 > article:last-child > div:nth-child(5) a {
background: url("../img/top/tileback_4.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox6 */
#top_block2 > article:last-child > div:nth-child(6) {
position: absolute;
top: 40%;
right: 0;
width: 34%;
height: 20%;
padding: 1% 2% 1% 1%;
}
#top_block2 > article:last-child > div:nth-child(6) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox7 */
#top_block2 > article:last-child > div:nth-child(7) {
position: absolute;
top: 60%;
left: 0%;
width: 33%;
height: 14%;
padding: 1% 1% 1% 2%;
}
#top_block2 > article:last-child > div:nth-child(7) div {
width: 100%;
height: 100%;
background: #636363;
opacity: 0.8;
}

/* タイルbox8 */
#top_block2 > article:last-child > div:nth-child(8) {
position: absolute;
bottom: 0;
left: 0%;
width: 33%;
height: 26%;
padding: 1% 1% 2% 2%;
}
#top_block2 > article:last-child > div:nth-child(8) a {
background: url("../img/top/tileback_5.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox9 */
#top_block2 > article:last-child > div:nth-child(9) {
display: none;
}

/* タイルbox10 */
#top_block2 > article:last-child > div:nth-child(10) {
position: absolute;
bottom: 0;
right: 34%;
width: 33%;
height: 40%;
padding: 1% 1% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(10) a {
background: url("../img/top/tileback_6.png") no-repeat center;
background-size: cover;
height: 100%;
}

/* タイルbox11 */
#top_block2 > article:last-child > div:nth-child(11) {
position: absolute;
bottom: 0;
right: 0;
width: 34%;
height: 40%;
padding: 1% 2% 2% 1%;
}
#top_block2 > article:last-child > div:nth-child(11) a {
background: url("../img/top/tileback_7.png") no-repeat center;
background-size: cover;
height: 100%;
}

#insta {
background: #2f2f2f;
padding: 8rem 0 0 0;
}
#insta > div:first-child {
text-align: center;
margin-bottom: 5rem;
}
#insta > div:first-child img {
width: 5rem;
height: auto;
}
#insta > div:last-child {
padding: 0 1rem;
display: flex;
justify-content: space-between;
}

#logo_tsc {
position: absolute;
bottom: 2rem;
left: 2rem;
}
#logo_tsc div {
width: 40%;
}
#logo_tsc div img {
max-width: 100%;
height: auto;
}
#logo_tsc h3 {
font-size: 1.1rem;
}

/* 会社案内 */
#hdr_company {
background: url("../img/company/hdr_company.png") no-repeat center;
background-size: cover;
}
#cnt_company h3 {
text-align: center;
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 3rem;
}
#cnt_company h3 img {
margin-right: 1rem;
}
#cnt_company p {
margin-bottom: 5rem;
padding: 0 1rem;
font-size: 1.6rem;
line-height: 3.2rem;
}
#cnt_company table {
width: 100%;
margin: 0 auto 8rem auto;
font-size: 1.4rem;
line-height: 2.4rem;
}
#cnt_company th {
text-align: left;
padding-top: 1rem;
}
#cnt_company th, #cnt_company td {
vertical-align: top;
display: block;
}
#cnt_company td {
border-bottom: 0.1rem dotted #aaa;
padding: 1rem 0;
}
#cnt_company > div {
text-align: center;
margin-bottom: 8rem;
}
#cnt_company > div img {
margin-bottom: 1rem;
}
#cnt_company h4 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 2rem;
}
#cnt_company > div.map {
display: block;
height: 30rem;
}

/* 業務案内 */
#hdr_about {
background: url("../img/about/hdr_about.png") no-repeat center;
background-size: cover;
}
#cnt_about > p {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 5rem;
}
#cnt_about > article {
margin-bottom: 10rem;
}
#cnt_about > article figure {
width: 60%;
margin: 0 auto 2rem auto;
}
#cnt_about > article figure img {
max-width: 100%;
}
#cnt_about > article > div {
width: 100%;
}
#cnt_about > article > div h3 {
background:  rgba(255,255,255,0.8) url("../img/about/back_h.png") no-repeat;
background-position: right 0;
height: 4rem;
padding: 0.5rem 3rem;
font-size: 2rem;
line-height: 3rem;
font-weight: bold;
color: #000;
margin-bottom: 2rem;
}
#cnt_about > article > div p {
line-height: 3rem;
font-size: 1.4rem;
margin-bottom: 5rem;
}
#cnt_about > article > div a {
color: #fff;
text-decoration: none;
}
#cnt_about > article > div a:hover {
opacity: 0.7;
}
#cnt_about > article > div > div img {
vertical-align: -0.5rem;
margin-right: 2rem;
}

/* 施工実績 */
#hdr_works {
background: url("../img/works/hdr_works.png") no-repeat center;
background-size: cover;
}
#cnt_works h3 {
font-size: 2rem;
font-weight: bold;
border-bottom: 0.5rem solid #3d3a39;
padding-bottom: 1rem;
margin-bottom: 5rem;
}
#cnt_works > div {
display: flex;
flex-wrap: wrap;
width: 32rem;
margin: 0 auto;
}
#cnt_works > div article {
width: 15rem;
margin: 0 2rem 2rem 0;
text-align: center;
}
#cnt_works > div article:nth-child(2n) {
margin-right: 0;
}
#cnt_works > div article figure {
margin-bottom: 2rem;
}
#cnt_works > div article figure img {
width: 15rem;
height: 11.3rem;
object-fit: cover;
transition: 0.3s;
}
#cnt_works > div article figure img:hover {
opacity: 0.7;
transition: 0.3s;
}
#cnt_works > div article:nth-child(2n) {
margin-right: 0;
}
#cnt_works > div article h4, #cnt_works > div article h5 {
font-size: 1.4rem;
font-weight: bold;
}

/* 施工実績-詳細 */
header#hdr_works_single {
background: #000;
height: 30vh;
}
header#hdr_works_single h1 {
bottom: 8rem;
}
header#hdr_works_single h2 {
bottom: 4rem;
}
#cnt_works_single img {
max-width: 100%;
}
.cct_slider {
margin-bottom: 2rem;
text-align: center;
}
.cct_slider img {
width: 30rem;
height: 22.5rem;
object-fit: cover;
}
.cct_thumb {
display: flex;
flex-wrap: wrap;
width: 28.8rem;
margin: 0 auto;
}
.cct_thumb img {
width: 7rem;
height: 5.3rem;
object-fit: cover;
margin: 0.1rem;
}
#cnt_works_single h3 {
font-size: 2rem;
font-weight: bold;
margin: 5rem 0;
}

/* 特集 */
#hdr_special {
background: url("../img/special/hdr_special.png") no-repeat center;
background-size: cover;
}
#cnt_special img {
max-width: 100%;
}
#cnt_special h3, #cnt_renovation h3, #cnt_construction h3 {
background: #3d3a39 url("../img/special/back_h.png") no-repeat;
color: #fff;
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: bold;
padding: 0.5rem 2rem 0.5rem 5rem;
margin-bottom: 3rem;
}
#cnt_special > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3rem;
margin: 5rem 0;
}
#cnt_special > ul li {
list-style: square;
margin: 0 0 2rem 3rem;
}
#cnt_special > h4 {
font-size: 1.8rem;
line-height: 2rem;
font-weight: bold;
margin: 5rem 0 3rem 0;
}
#cnt_special > h5 {
font-size: 1.8rem;
line-height: 3rem;
font-weight: bold;
margin: 5rem 0;
}
#twobox_ssp {
display: flex;
justify-content: space-between;
}
#twobox_ssp article {
width: 48%;
margin: 2rem 0;
}
#twobox_ssp article figure {
margin-bottom: 2rem;
}
#ctbox {
padding: 2rem;
font-weight: bold;
border: 0.2rem solid #3d3a39;
margin: 2rem auto !important;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox {
margin-bottom: 8rem;
font-size: 1.6rem;
line-height: 3rem;
}
.spbox figure {
margin-bottom: 2rem;
}
.spbox p {
font-size: 1.5rem;
line-height: 2.5rem;
}

/* リノベーション */
#hdr_renovation {
background: url("../img/renovation/hdr_renovation.png") no-repeat center;
background-size: cover;
}
#cnt_renovation img {
max-width: 100%;
height: auto;
}
#cnt_renovation > p:nth-child(2), #cnt_construction > p:nth-child(2) {
font-size: 1.6rem;
line-height: 3.2rem;
margin-bottom: 3rem;
}
#cnt_renovation > article:nth-child(3) {
display: flex;
justify-content: space-between;
margin-bottom: 8rem;
}
#cnt_renovation > article:nth-child(3) figure {

}
#cnt_renovation h4, #cnt_construction h4, #cnt_mail h4 {
font-size: 1.5rem;
padding-bottom: 0.6rem;
border-bottom: 0.4rem solid #3d3a39;
margin-bottom: 3rem;
font-weight: bold;
}
#cnt_renovation table {
width: 100%;
margin: 0 auto 5rem auto;
font-size: 1.4rem;
font-weight: bold;
}
#cnt_renovation table td {
width: 100%;
padding: 1rem 0;
display: block;
}
#reno_p {
padding: 3rem 2rem;
text-align: center;
border: 0.2rem solid #3d3a39;
margin: 2rem auto;
font-size: 2.2rem;
line-height: 3rem;
}
#rrp {
font-size: 1.6rem;
font-weight: bold;
line-height: 3.4rem;
margin: 4rem 0 1rem 0;
}

/* 建築工事一式 */
#hdr_construction {
background: url("../img/construction/hdr_construction.png") no-repeat center;
background-size: cover;
}
#cnt_construction > div img {
max-width: 100%;
}
#cnt_construction > div article {
margin-bottom: 5rem;
}
#cnt_construction > div article h5 {
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 1rem;
}

/* お問い合わせ */
#cnt_mail > p:nth-child(2) {
margin-bottom: 5rem;
}
#cnt_mail table {
width: 100%;
color: #000;
margin-bottom: 5rem;
}
#cnt_mail table th, #cnt_mail table td {
padding: 1rem 2rem;
vertical-align: top;
border: 0.1rem solid #ccc;
background: #ededed;
display: block;
}
#cnt_mail table th {
text-align: left;
border-bottom: none;
}
.star {
color: #ff0000;
margin-left: 0.6rem;
font-size: 1.2rem;
}
.submit {
text-align: center;
}
.submit input {
cursor: pointer;
}
#name, #kana, #kaisya {
width: 100%;
}
#email, #emailcheck, #message, #address {
width: 100%;
}
#tel0, #tel1, #tel2, #fax0, #fax1, #fax2, #zip1 {
width: 8rem;
}
#zip0 {
width: 5rem;
}
#wrap_mail h4 {
background: #008cd6;
text-align: center;
padding: 0.8rem 0;
margin-bottom: 2rem;
}
#policy {
border: 0.1rem solid #ccc;
padding: 2rem;
height: 20rem;
overflow: auto;
}
#policy p {
margin-bottom: 3rem;
}
#wrap_mail > div:last-child p:last-child {
margin-bottom: 0;
}
.minh {
min-height: 50rem;
}
.ERR {
color: #ff0000;
}

}