/*==============================*/
/*max-width: 620px              */
/*==============================*/

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

.nl:before {
content: '\A';
white-space: pre;
}

h3 {
font-size: 1.2em;
padding: 1.3rem 2rem 1.3rem 90px;
}

h3:before {
top: -150%;
left: -100px;
width: 190px;
height: 250%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}

h3:after {
display: none;
}

h3 span {
font-size: 2.5em;
padding-left: 10px;
}

/*ヘッダー*/
#header {
min-width: initial;
}

#header-inner {
background-position: 20px 5px;
background-size: 70px;
}

#header-menu {
width: 100%;
margin-left: 0;
margin-top: 30px;
}

#header-message{
width: 100%;
text-align: center;
font-size: 1.2em;
padding-left: 50px;
}

#header-menu ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

#header-menu ul li {
width: 14%;
list-style: none;
border-top: none;
border-left: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}

#header-menu ul li#sp-menu-label {
border-top: 1px solid #ffffff;
}

#header-menu ul li a {
height: auto;
text-align: center;
}

/*コンテナー・コンテンツ*/
#container {
margin-top: 180px;
}

#container-inner {
min-width: initial;
margin: auto;
}

#contents {
width: 94%;
margin: auto;
}

.contents-inner {
width: 96%;
margin: 0 2%;
}

/*バナー*/
#banner-list ul li {
width: 98%;
margin-bottom: 30px;
}

#banner-list ul li img {
width: 100%;
max-width: 450px;
}

#banner-list ul li div.comment {
width: 66%;
}

#banner-list li#logomark {
order: -2;
}

#banner-list li#logomark img {
width: auto;
}

/*フッター*/
#footer {
min-width: initial;
}

#footer-logo {
background-position: 2% 10px;
padding-left: 25%;
background-size: 20% auto;
}

#footer-menu {
width: 98%;
text-align: center;
}

#footer-menu ul {
margin-left: 10%;
}

/*モーダルウィンドウ*/
.modal_content {
max-width: 96%;
max-height: 96%;
}



/*--------------------------*/
/*トップページ              */
/*--------------------------*/
#fp {
background-image: url(img/fp-bg.jpg);
position: relative;
width: 100%;
height: auto;
min-width: initial;
min-height: initial;
}

#fp-inner {
padding-top: 30px;
}

#fp-logo {
width: 55%;
}

#fp-menu {
margin-left: -15%;
margin-right: 5%;
width: 55%;
}

#fp-title {
width: 90%;
margin: 30px 5% 0 5%;
}

#fp-message {
width: 90%;
margin: 0 5% 30px 5%;
}

#fp-menu ul li {
text-align: right;
font-size: 1.2em;
line-height: 2em;
}

#fp-menu ul li:nth-child(1) {
margin-right: 6em;
}
#fp-menu ul li:nth-child(2) {
margin-right: 2em;
}
#fp-menu ul li:nth-child(3) {
margin-right: 1em;
}
#fp-menu ul li:nth-child(4) {
margin-right: 0em;
}
#fp-menu ul li:nth-child(5) {
margin-right: 1em;
}
#fp-menu ul li:nth-child(6) {
margin-right: 2em;
}
#fp-menu ul li:nth-child(7) {
margin-right: 1.5em;
}
#fp-menu ul li:nth-child(8) {
margin-right: 6em;
}

#fp-scroll {
margin: auto;
}

#area1,
#area2,
#area3,
#area4 {
}

#top-area img {
width: 200%;
}

.comment-inner p {
font-size: 1em;
}

#area1 .comment,
#area2 .comment,
#area3 .comment,
#area4 .comment {
top: 50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
}

#area1 .comment {
width: 96%;
}

#area1 .comment:after {
content: '';
position: absolute;
width: calc(100vw * 0.8);
}

/*サービス案内ページ*/
.case-list {
width: 100%;
margin-left: 0;
}

.case-list div {
width: 80%;
}

.case-list button {
width: 80%;
margin: 10% 0;
}

.case-list img {
width: 100%;
max-width: 100%;
height: 100%;
object-fit:cover;
}

/*会社概要ページ*/
table.info {
width: 98%;
}

table.info th {
background-color: #367782;
color: #ffffff;
}

table.info th,
table.info td {
width: 90%;
display: block;
vertical-align: middle;
padding: 15px 5%;
}

#info-photo img {
width: 90%;
margin: 10px 0;
}

.gaikou img,
.kiso img {
max-width: 96%;
margin: 10px 2%;
}

/*採用情報ページ*/
table.recruit {
width: 98%;
}

table.recruit th {
background-color: #367782;
color: #ffffff;
}

table.recruit th,
table.recruit td {
width: 90%;
display: block;
vertical-align: middle;
padding: 15px 5%;
}

/*外構工事ページ*/
ul.check {
margin: 0 2%;
}

ul.check li {
font-size: 1em;
}

ul.list {
margin :0 2%;
}

/*問い合わせフォーム*/
table#contactform  {
width: 90%;
margin-left: 5%;
}

table#contactform  th {
width: 93%;
display: block;
}

table#contactform  td {
width: 93%;
display: block;
}

table#contactform input,
table#contactform textarea {
width: 90%;
}

/*==============================*/
/*max-width: 520px              */
/*==============================*/
@media screen and (max-width: 520px) {
h1 {
font-size: 0.7em;
}

#header-message{
width: 100%;
text-align: center;
padding-top: 70px;
padding-left: 0;
font-size: 1.1em;
}

#header #header-menu ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}

#header #header-menu ul li {
width: 50%;
}

#header #header-menu ul li#sp-menu-label {
display: block;
}

#header #header-menu ul li:not(#sp-menu-label) {
display: none;
}

#header.open {
height: 100%;
padding-bottom: 20px;
}

#header.open #header-inner {
height: 100%;
}

#header.open #header-menu ul li:not(#sp-menu-label) {
display: block;
}

#fp-menu {
margin-left: -30%;
margin-right: 5%;
width: 70%;
}

#header-inner {
background-position: center 5px;
background-size: 60px;
height: 160px;
}

#header-menu {
width: 100%;
padding: 0;
margin-top: 5px;
}
}