@charset "utf-8";

body {
font-family: 'Noto Sans JP', sans-serif;
color:#031430;
margin:0;
font-size:16px;

display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100svh;
}
h1,h2,h3,h4{
margin:0;
line-height:140%;
}
p{
margin:0 0 1em;
}
article > div{
box-sizing:border-box;
}
a{
text-decoration:none;
}
ul{
margin:0;
padding:0;
list-style:none;
}
dd{
margin-left:0;
}
select{
appearance: none;
border: 1px solid #000;
border-radius: 0px;
padding:5px;
background:#fff;
color:#000;
margin-right:1em;
margin-bottom:10px;
}
input[type="text"]{
box-sizing:border-box;
border:1px solid #000;
border-radius:0;
padding:5px;
margin-right:1em
}
input.right::placeholder{
text-align:right;
}
textarea{
box-sizing:border-box;
width:100%;
height:4em;
}
label{
margin-left:10px;
}
footer{
padding:20px 0;
text-align:center;
background:#031430;
}
footer img{
margin-bottom:20px;
}
footer small{
display:block;
color:#fff;
}

#navi ul{
display:flex;
justify-content: space-between;
gap:20px;
}
#navi li{
background:#031430;
border-radius:10px;
width:25%;
}
#navi li a{
display:block;
text-align:center;
color:#fff;

padding:20px 0;
font-size:20px;
}

#gaiyo2{
background:#f7f7f7;
}
#profile {
background:#f7f7f7;
}
#banner ul{
display:flex;
justify-content: center;
gap:20px;
flex-wrap: wrap;
}
#banner li{
width:32%;
}


/* PC */
@media screen and (min-width:600px) {
.pc {
display: block;
}
.sp {
display: none;
}
article > div{
width:1000px;
margin:0 auto;
padding:50px 0;
}
article > div img{
width:100%;
}

footer img{
width:429px;
}
footer small{
font-size:12px;
}

div#mv{
height:1080px;
background: #ebf1f1 url( "../img/mv.jpg" ) top center / 1920px 1080px no-repeat;
}




} /* end:PC */


@media screen and (orientation: landscape) and (max-width: 960px) {
.pc {
display: none;
}
.sp {
display: block;
}
article > div{
width:100%;
margin:0 auto;
padding:100px 0;
}
div#mv{
height:auto;
background:none;
}
#mv img{
width:100%;
}

} /* end:landscape */


/* SP */
@media screen and (max-width:599px) {
.pc {
display: none;
}
.sp {
display: block;
}
#navi ul{
gap:10px;
flex-wrap:wrap;
}
#navi li{
width:48%;
}
#navi li a{
padding:10px 0;
font-size:16px;
}
article > div{
padding:40px 20px !important;
}
article > div img{
width:100%;
}
footer img{
width:250px;
margin-bottom:10px;
}
footer small{
font-size:12px;
}
#mv img{
width:100%;
}
#banner ul{
gap:10px;
}
#banner li{
width:40%;
}



} /* end:SP */