@media print {
#mainimage {
height: 200px;
}
#mainimage h1 {
margin: 0 0 0 0;
}
#mainimage h1 img {
max-width: 400px;
width: 100%;
}
#service {
margin: 20px auto 0 auto;
width: 100%;
}
#news {
margin: 20px auto 0 auto;
}
#news .body {
width: 100%;
text-align: left;
margin: 0px auto 0 auto;
padding: 20px 0 20px 0;
}
}

#mainimage {
position: relative;
background-image: url("../image/top/mainimage.jpg");
background-size: cover;
background-position: center center;
display: grid;
place-content: center;
height: 500px;
z-index: 1;
}
#mainimage h1 {
margin: 0 0 0 30vw;
}
#mainimage h1 img {
max-width: 788px;
width: 100%;
}
#top {
margin: 0px auto 0 auto;
width: 100%;
text-align: left;
}
#top h3 {
font-size: clamp(1.125rem, 0.554rem + 1.43vw, 1.625rem);
line-height: 1em;
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 350;
padding: 0em 0 0em 0.5em;
position: relative;
}
#top h3:before {
content: "";
background-color: #039d85;
width: 4px;
height: 1.5vw;
padding: 0;
display: block;
position: absolute;
left: 0;
top: 2px;
}

#service {
margin: 130px auto 0 auto;
width: 80%;
text-align: left;
}
#service ul {
margin: 50px auto 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#service ul li {
width: 23%;
max-width: 26.6vw;
transition: all .3s ease-out;
}
#service ul li a {
display: block;
text-decoration: none;
color: #686868;
box-sizing: border-box;
overflow: hidden;
transition: all .3s ease-out;
}
#service ul li img {
width: 100%;
height: auto;
box-sizing: border-box;
border: 1px solid #cccccc;
}
#service ul li h4 {
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 700;
color: #000;
font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
line-height: 1.5em;
padding: 0.5em 0 0.7em 0;
}
#service ul li p {
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 500;
font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
line-height: 1.5em;
}
#service ul li a:hover,
#service ul li a:hover h4{
text-decoration: underline;
color: #039d85;
}
#service ul li a:hover img {
opacity: 0.7;
/*transform: scale(1.1);
transition: all .3s ease-out;*/
}

#news {
background-color: #f7f7f7;
margin: 130px auto 0 auto;
}
#news .body {
width: 80%;
text-align: left;
margin: 0px auto 0 auto;
padding: 50px 0 70px 0;
}
#news .body dl {
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 500;
font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
line-height: 1.5em;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
max-width: 1200px;
padding: 3em 0 2em 0;
}
#news .body dt {
color: #686868;
width: 200px;
margin-bottom: 1.5em;
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 500;
font-size: clamp(0.813rem, 0.767rem + 0.23vw, 0.938rem);
line-height: 1.5em;
}
#news .body dd {
color: #494949;
width: 1000px;
margin-bottom: 1.5em;
}
#news .body dd a {
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 500;
font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
line-height: 1.5em;
text-decoration: none;
color: #494949;
}
#news .body dd a:hover {
text-decoration: underline;
color: #222BD0;;
}
#news .body .type1,
#news .body .type2,
#news .body .type3 {
font-size: 13px;
line-height: 1em;
color: #FFF;
display: inline-block;
position: relative;
padding: 0.2em 0.8em 0.3em 0.8em;
margin-left: 1em;
top: -2px;
}
#news .body .type1 {
background-color: #039d85;
}
#news .body .type2 {
background-color: #888888;
}
#news .body .type3 {
background-color: #36A2CA;
}

#news p.bt {
font-family: source-han-sans-jp-variable, sans-serif;
font-variation-settings: "wght" 350;
font-style: normal;
font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
line-height: 1.5em;
width: 360px;
margin: 0px auto 0 auto;
height: auto;
}
#news p.bt a {
color: #FFF;
background-color: #039d85;
display: block;
text-align: center;
text-decoration: none;
padding: 0.6em 0 0.7em 0;
position: relative;
}
#news p.bt a:after {
content: '';
box-sizing: border-box;
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #aaaaaa;
transform: rotate(45deg);
top: 38%;
right: 4%;
}
#news p.bt a:hover {
background-color: #5a5755;
}
#news p.bt a:hover:after {
right: 3%;
border-color: #FFF;
}

#aboutus {
margin: 130px auto 100px auto;
width: 80%;
text-align: left;
}
#aboutus ul {
margin: 70px auto 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#aboutus ul li {
width: 48%;
max-width: 48%;
text-align: center;
position: relative;
transition: all .3s ease-out;
background-size: cover;
display: block;
overflow: hidden;
}
#aboutus ul li a {
font-size: clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
line-height: 1.5em;
color: #FFF;
text-decoration: none;
width: 100%;
height: 10vw;
display: grid;
place-content: center;
position: relative;
z-index: 15;
overflow: hidden;
background-position: center center;
}
#aboutus ul li.bt1 a {
background-image: url("../image/top/aboutus_p1.jpg");
}
#aboutus ul li.bt2 a {
background-image: url("../image/top/aboutus_p2.jpg");
}
#aboutus ul li:hover a {
opacity: 1;
transform: scale(1.1);
}