@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}



/* <!-- ページ内リンク（同じページ内で違うところにとぶリンク）の設定は
         まずクリックさせるaタグにhref属性の値に＃id名（このid名も英単語）を
         記述し、リンク先の要素にid属性でaタグの＃id名と全く同じ英単語で命名する。-->
        <a href="#page">ここをクリックすると</a>
        <p id="page">ここにとぶ</p> */
        
/* header部分 */
body {
    width: 100%;
}

header {
    width: 96%;
    display: flex;
    margin-top: 1vw;
    padding: 2%;
}

.parent1 {
    display: flex;
    width: 20%;
    padding: 1vw;
    text-align: center;
    background-color: blue;
}
h1 {
    width: 90%;
    font-size: 2vw;
    color: #fff;
}
header img {
    width: 10%;
    vertical-align: bottom;
}
nav {
    width: 50%;
    margin-left: 30%;
}
nav ul {
    display: flex;
    list-style: none;  
    margin-right: 5%;
}
nav ul li {
    width: 20%;
}
nav ul li a {
    display: block;
    line-height: 3;
    text-align: center;
    text-decoration: none;
    color: #202020;
    font-size: 1.2vw;
    transition : 1s;
}
nav ul li a:hover {
    transition : 1s;
    color: blue;
    background-color: lightblue;
}

/*  main　section（1） */
main section:nth-of-type(1) {
    background-color: #ddeef5;
    margin-top: 1vw;
    height: 33vw;
}
.parent2 {
    display: flex;
    width: 100%;
}
main section:nth-of-type(1) img {
    width: 50%;
    margin-top: 4vw;
    vertical-align: bottom;
}
.parent3 {
    display: flex;
    width: 80%;
    height: 10vw;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;
}
.parent3 h2 {
    font-size: 2vw;
}
.child {
    width: calc(100%/3);
    padding-top: 3%;
    padding-bottom: 3%;
    border-radius: 20px;
    text-align: center;
    background-color: lightblue;
}
.child :hover {
    color: red;
}

.child:nth-of-type(2) {
    margin-left: 5%;
    margin-right: 5%;
}
.child a {
    text-decoration: none;
}
.child p a {
    font-size: 1.2vw;
    margin-bottom: 2vw;
}

/*  main　section（2） */
main section:nth-of-type(2) {
    width: 100%;
    background-color: aquamarine;
}
main section:nth-of-type(2) h2 {
    text-align: center;
    font-size: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: yellow;
}
.imagesbox {
    width: 100%;
}
.imagesbox img {
    width: 100%;
    vertical-align: bottom;
}


/*  main　section（3） */
main section:nth-of-type(3) {
    width: 100%;
}
main section:nth-of-type(3) h2 {
    text-align: center;
    font-size: 2vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: yellow;
}
.imagesbox2 {
    width: 100%;
}
.imagesbox2 img {
    width: 100%;
    vertical-align: bottom;
}
.parent-works {
    background-color: #ddeef5;
}
.parent-works ul {
    display: flex;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
   
}
.parent-works ul li {
    width: 20%;
    height: 3vw;
    font-size: 2vw;
    list-style: none;
    text-align: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2%;
    margin-right: 2%;
    padding-top: 3%;
    padding-bottom: 3%;
    border-radius: 14%;
    background-color: lightblue;  
}
.parent-works ul li a {
    text-decoration: none;
}
.parent-works ul li a:hover {
    color: red;
}


/*  main　section（4） */
main section:nth-of-type(4) {
    background-color: #fff;
}
main section:nth-of-type(4) h2 {
    font-size: 2vw;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: yellow;
}
.sigoto1 {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}
.sigoto1 a img {
    width: 100%;
    vertical-align: bottom;
}
.sigoto2 {
    display: flex;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.sigoto2 img {
    width: 100%;
    vertical-align: bottom;
}

/* フッター部分 */
footer {
    width: 100%;
}
footer h2 {
    width: 100%;
    height: 3vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
    background-color: #ddeef5;


}
.flex-containar {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}  
.footer-leftbox {
    width: 50%;
    margin-top: 1vw;
    margin-left: 1vw;
}

.flex-containar ul {
    width: 30%;
    margin-top: 1vw;
    margin-left: 20%;
    list-style: none;
} 

.flex-containar ul li a {
    display: block;
    font-size: 1.2vw;
    line-height: 2.2;
    text-decoration: none;
    color: #202020;
    transition: 1s;
}
.flex-containar ul li a:hover {
    color: blue;
    background-color: lightblue;
    transition: 1s;
}

.footer-logobox {
    display: flex;
}
.footer-logobox img {
    width: 8%;
    vertical-align: bottom;
}
.footer-logobox p {
    font-size: 2vw;
}
.footer-addressbox {
    margin-top: 1vw;   
}
.footer-addressbox address {
    font-size: 1.2vw;
    font-style: normal;
}
.footer-leftbox i {
    font-size: 2.6vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
}  

.copy {
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%; 
    text-align: center;
    background-color: #ddeef5;
    color: #202020;
}