@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
 font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-feature-settings : "palt" 1;
 margin: 0;  padding: 0;
 color: #000;
 -webkit-text-size-adjust: 100%;
 text-align: center;
 }
a {
 text-decoration: none;
  color: #000;
 }
a:hover { color: ; }


h1 {
 font-size: 150%;
 color: #333;
 font-family: "游明朝", "Yu Mincho";
 }
h2 {
 font-size: 110%;
 }
h3 {
 font-size: 100%;
 padding: 0;
 margin: 30px 0 0 0;
 }

nav {
 position: fixed;
 top: 55px;
 right: 0;
 z-index: 100;
 margin: 0;
 padding: 0;
 text-align: left;
 }
nav ul li a {
 width: 25px;
 display: block;
 background: #8FBC8F;
 padding: 40px 15px;
 color: #FFF;
 -webkit-writing-mode: vertical-lr;
 -ms-writing-mode: tb-lr;
 writing-mode: vertical-lr;
 }
ul {list-style-type:none;}

nav ul li a:hover {
 background: #2F4F4F;
 }


/*
nav2 {
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 position: fixed;
 top: 350;
 right: 0;
 z-index: 10;
 text-align: left;
 }
nav2 ul li a {
 display: block;
 margin-right: 15px;
 color: #000;
 }
*/










header {
 background: url(../img/header-img.jpg) no-repeat center center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 140px;
 margin: 0;
 text-align: left;
 padding: 30px;
 }



.pagetop {
 display: none;
 position: fixed;
 bottom: 0;
 right: 0;
 width: 60px;
 height: 60px;
 background: #8FBC8F;
 z-index: 100;
 }

.pagetop a {
 display: block;
 width: 15px;
 height: 15px;
 background: transparent;
 border-top: 2px solid #FFF;
 border-left: 2px solid #FFF;
 transform: rotate(45deg);
 margin: 25px auto;
 }

.pagetop a:hover {
 opacity : 0.5;
 }





.top-page {
 background: url(../img/top-img1.jpg) no-repeat center center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

.top-container {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 700px;
 }

.top-logo {
 width: 300px;
 }

.top-about {
 background: url(../img/top-about-img.png) no-repeat left top; 
 }

.about-flexbox {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 450px;
 }

.about-text {
 text-align: left;
 width: 400px;
 }

dl {
 text-align: left;
 }
dt { 
  float: left;
  margin: 0 0 1em 0;
  width: 5em;
  border-left: solid 4px #8FBC8F;
  padding-left: 6px;
 }

dd {
 margin: 0 0 1em 0;
 }

.top-caption {
 background: #f1eae2;
 }

.caption-flexbox {
 display: flex;
 justify-content: center;
 align-items: center;
 }

.top-contact {
 border: solid 1px #555;
 padding: 30px;
 margin: 100px 50px;
 width: 240px;
 }

.top-work {
 border: solid 1px #555;
 padding: 30px;
 margin: 100px 50px;
 width: 240px;
 }

.top-contact:hover, .top-work:hover {
 border: solid 1px #d5bfaa;
 transition: 0.5s;
 background: #f8f4f1;
 }

.caption-text {
 text-align: left;
 }
.top-icon {
 color: #2F4F4F;
 }

.bottom-img {
 background: url(../img/bottom-img.jpg) no-repeat center center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 300px;
 }

footer {
 background: #2F4F4F;
 color: #FFF;
 font-size: 85%;
 padding: 10px 10px 10px 10px;
 }

/*施工例ページ*/
.work-wrap {
 max-width: 1200px;
 margin: 100px auto;
 }

.work-wrap2 {
 max-width: 1000px;
 margin: 100px auto;
 }


.work-flexbox {
 display: flex;
 flex-wrap: wrap;
 }

.work-item {
 padding: 6px;
 }

figure {
 position: relative;
 overflow: hidden;
 width: 300px;
 height: 300px;
 object-fit: cover;
 }

figcaption {
 position: absolute;
 bottom: -60px;
 left: 0;
 z-index: 2;
 width: 100%;
 height: 140px;
 background: rgba(47,79,79,.7);
 -webkit-transition: .3s;
 transition: .3s;
 color: #FFF;
 }
figure:hover figcaption {
 bottom: 0;
 }

figcaption h2 { margin: 15px 0 0 0; }


.more {
 display: block;
 font-size: 200%;
 padding-top: 25px;
 }




/*問い合わせページ*/
.contact-wrap {
 max-width: 580px;
 margin: 100px auto;
 text-align: left;
 padding: 0 15px;
 }
.contact-wrap p {
 margin-top: 30px;
 }

input, textarea {
 font-family : inherit;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: solid 1px #777;
 border-radius: 3px;
 width: 100%;
 }
input, textarea {
 padding: 10px;
 font-size: 16px;
 width: 100%;
 }

input[type="button"] {
 width: 100%;
 color: #FFF;
 font-weight: bold;
 background-color: #2F4F4F;
 border: solid 1px #FFF;
 padding: 10px;
 margin-top: 20px;
 }

input[type="button"]:hover {
 background-color: #8FBC8F;
 transition: 0.3s;
 }

input:required, input:invalid	{
 background-image: url(../img/caution.png);
 background-repeat: no-repeat;
 background-position: right center;
 }

input:valid {
 background-image: none;
 }

label span {
 color: #ff0000;
 }

input:focus, textarea:focus {
 outline: solid 3px rgba(47, 79, 79, 0.5);
 }

.click_back {
 width: 95%;
 text-align: center;
 font-weight: bold;
 background-color: #2F4F4F;
 border: solid 1px #FFF;
 padding: 10px;
 margin-top: 20px;
 border-radius: 3px;
 }

.click_back a { color: #FFF; }

.click_back:hover {
 background-color: #8FBC8F;
 transition: 0.3s;
 }



@media only screen and (max-width:1100px) { 
nav {
 top: 25px;
 }


						}


@media screen and (min-width:801px) { 
.mobile-footer {
 display: none;
 }
						}



@media only screen and (max-width:800px) { 

nav {
 display: none;
 }

footer {
 padding: 10px 10px 70px 10px;
 }

.mobile-footer {
 display: flex;
 justify-content: space-around;
 height: 55px;
 padding: 0 0 0 0;
 width: 100%;
 position: fixed;
 bottom: 0; 
 z-index: 90;
 background: rgba(255, 255, 255, 0.9);
 font-size: 20px;
 border-top: 1px solid #8FBC8F;
 }
.mb_footer {
 align-self: center;
 }

.mb_footer:last-child {
 padding-right: 70px;
 }


.mb_footer span {
 display: block;
 font-size: 12px;
 margin: 0;
 padding: 0;
 }
.pagetop {
 width: 55px;
 height: 55px;
 }


.caption-flexbox {
 flex-direction: column-reverse;
 }
.top-contact, .top-work {
 margin: 50px 50px;
 }


.top-container {
 min-height: 300px;
 }

.top-logo {
 width: 150px;
 }

.top-about {
 background: url(../img/top-about-img2.png) no-repeat left top; 
 }

.about-flexbox {
 flex-direction: column-reverse;
 padding: 30px 0;
 }

.about-text {
 width: 300px;
 padding: 0 30px;
 text-align: center;
 }



dt, dd { 
 clear: both;
 margin: 0 0 1em 1em;
 }


.work-flexbox {
 justify-content: center;
 }



						}