/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 24 COLUMN */
@import url("samplegrid_24col.css");

/* IMPORT Webiconfont */
@import url("icon.css");

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@900&display=swap');

/* ベース部分 */
body{
position: relative;
background: #FFFFFF;
font-family: sans-serif;
line-height: 150%;
width: 100%;
}

a{
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
color: #0000CC;
text-decoration: none;
}
a:hover{ opacity: 0.5; }

img{ max-width: 100%; height: auto; }

#gotop {
display: block;
width: 60px;
height: 60px;
box-sizing: border-box;
background: #FFF;
border: 1px solid #999;
padding-top: 30px;
text-align: center;
letter-spacing: -1px;
font-size: 85%;
text-decoration: none;
color: #333;
position: fixed;
bottom: 15px;
right: 15px;
border-radius: 0px;
opacity: 0.8;
}
#gotop:before{
content: "";
display: block;
border-top: 2px solid #333;
border-right: 2px solid #333;
width: 25%;
height: 25%;
top: 25%;
left: 0;
right: 0;
margin: auto;
position: absolute;
transform: rotate(-45deg);
}
#gotop a{ color: #666; text-decoration: none; }
#gotop:hover{ opacity: 1; }






/* ヘッダー */
header{
text-align: center;
background-color: #00A33E;
}
header .h-main{
display: flex;
display:  block;
max-width: 1240px;
margin: 0 auto;
justify-content: space-between;
}
header .h-box01{
display: inline-flex;
display: flex;
justify-content: space-between;
padding: 20px;
align-items: center;
margin: 0 15px 0 0;
}
header .h-box02{
display: flex;
align-items: center;
}
header .h-box03{
padding: 0 20px 0 0;
}

header .h-box01 .h-child01{
margin: 0 30px 0 0;
}

header .h-box01 .h-child02{
margin: 0 50px 0 0;
}

.inquiry01{
margin: 0 0 10px;
background-color: #FFF;
height: 24px;
text-align: center;
border-radius: 12px;
font-weight: bold;
}
.inquiry02{white-space: nowrap;}
.inquiry02 img{margin: 0 10px 0 0; }

.tel-number{
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 2.8em;
color: #FFF;
white-space: nowrap;
}
header .h-recruit{display: none;}


/* メイン */
h1{
font-size: 2.5em;
text-align: center;
line-height: 1.3em;
margin: 0 0 20px;
font-weight: 900;
}
h2{
font-size: 1.3em;
text-align: center;
line-height: 1.3em;
margin: 0 0 30px;
}
.midashi {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}


.main{max-width: 1200px; width: 100%; margin: 0 auto;}
.main-p{max-width: 1200px; margin: 0 auto 50px;}
.main h1 br,.main h2 br{display: none;}
.br-sp{display: none;}

.sub-img{
display: flex;
max-width: 1040px;
margin: 0 auto 50px;
padding: 0 20px;
}
.sub-img-box:first-child{
margin: 0 50px 0 0;
}

#ownedmachine {
max-width: 850px;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
}

ul {
width: 100%;
max-width: 414px;
padding: 0 7px;
}



li a{
display: table;
width: 100%;
}

li a span {
height: 40px;
background-image: url("../images/machine_bk.png");
background-position: center right;
background-repeat: no-repeat;
margin: 0 0 15px;
padding: 7px 10px 5px;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 900;
font-size: 1.5em;
color: #000;
width: 100%;
display: block;
overflow: hidden;
}


#ownedsystem {
max-width: 850px;
margin: 0 auto 100px;
}

#ownedsystem ul {
    display: flex;
    justify-content: space-between;
    max-width: unset;
    padding: 0;
}

#ownedsystem ul li {
    width: 100%;
    max-width: 414px;
    padding: 0 7px;
}

#ownedsystem li a span {
height: 70px;
background-image: url("../images/systems_bk_sp.jpg");
display: flex;
background-size: cover;
align-items: center;
justify-content: center;
font-size: 1.8em;
color: #fff;
border: solid 4px #5e9dff;
padding: 7px;
}







/* フッター */
.contact01{
background-color: #E0DAD6;
padding: 15px;
}
.contact01 h1{
color: #006834;
margin: 0 0 5px;
}
.contact01 h2{
font-size: 1em;
margin: 0;
}
.contact02{
display: flex;
justify-content: center;
background-color: #EBE7E5;
padding: 20px;
}
.contact02-child{
display: flex;
justify-content: center;
max-width: 750px;
}
.contact02-box{
display: flex;
align-items: center;
}
.contact02-box:first-child{
margin: 0 100px 0 0;
}
.contact02-box img{
margin: 0 15px 0 0;
}
.contact02-box .contact-tel,.contact02-box .contact-mail{
font-size: 2em;
line-height: 1.2em;
font-weight: 600;
color: #000;
white-space: nowrap;
}
footer{
background-color: #00A33E;
color: #fff;
text-align: center;
}
footer .f-box{
display: flex;
align-items: center;
max-width: 1040px;
padding: 20px;
margin: 0 auto;
}

footer .f-box .f-logo{
display: block;
margin: 0 50px 0 0;
}
.occupation{font-size: 0.8em; margin: 0 0 5px; white-space: nowrap;}
.credit{background-color: #006834; text-align: center; color: #FFFFFF; font-size: 12px;}

footer .f-box .f-address{display: flex;}
footer .f-box .f-address h1{font-size: 1.2em; text-align: left; margin: 0 0 5px;}
footer .f-box .f-address p{font-size: 0.9em; line-height: 1.25em;}
footer .f-box .f-address .address:first-child{margin: 0 50px 0 0;}


/*    1150px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:1150px){
header .h-box02{display: block;}
header .h-box01 .h-child02 {
margin: 0;
text-align: center;
}
}

/*    850px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:850px){
header .h-box02{display: flex;}
header .h-box01{display: block; text-align: center; margin: 0 auto;}
header .h-child03{display: inline-flex; align-items: center; margin-top: 10px;}
.inquiry01{padding: 0 30px; margin: 0 20px 0 0; white-space: nowrap;}
header .h-box03{display: none;}
header .h-recruit{
display: block;
background-color: #FFF;
border-bottom: solid 2px #00A33E;
padding: 10px;
width: 100%;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 600;
font-size: 1.5em;
color: #00A33E;
}
.main h1 br,.main h2 br{display: block;}
}


/*    820px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:820px){
li a span { font-size: 2.7vw;}
}

/*    780px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:780px){
#ownedsystem li a span {font-size: 3.4vw;}
}



/*    768px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:768px){
.sub-img{
display: block;
max-width: 475px;
margin: 0 auto 50px;
padding: 0 20px;
}
.sub-img-box:first-child{
margin: 0 0 20px 0;
}
footer .f-box{display: inline-block; text-align: center;}
footer .f-box .f-logo {display: inline-block; margin: 0 0 10px 0;}
}


/*    679px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:679px){
#ownedmachine {
display: block;
}
ul {
margin: 0 auto;
}

li a span {
background-image: url("../images/machine_bk_sp.png");
font-size: 1.5em;
}

#ownedsystem ul {
    display: flex;
    justify-content: space-between;
    max-width: unset;
    padding: 0;
    display: table;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 414px;
}

#ownedsystem li a span {
    font-size: 1.8em;
}


}


/*    650px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:650px){
.contact02-child{display: block;}
.contact02-box:first-child{margin: 0 0 10px 0;}
header .h-box02{display:inline-block; margin: 0 0 10px;}
header .h-box01 .h-child01 {margin: 0 0 0 0;}
footer .f-box .f-address{display: inline-block;}
footer .f-box .f-address .address:first-child {margin: 0 0 20px 0;}
.pc-sp{display: none;}
}

/*    490px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:490px){
.inquiry01 {display: none;}
h1 {
font-size: 2em;
letter-spacing: -0.5px;
}
h2{font-size: 1em;}
.br-sp{display: block;}
.occupation {font-size: 0.7em; white-space: normal;}
}

/*    400px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:400px){
#ownedsystem li a span {font-size: 7vw;}
}




/*    380px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:380px){
li a span {
font-size: 6vw;
}
}


/*    350px
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media only screen and (max-width:350px){
.pc-sp{display: block;}
}