@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

/* headerここから↓ */
body {
    font-size: 1.6vw;
}
header {
    display: flex;
    width: 90%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
}
h1 {
    width: 15%;    
}
h1 a {
    
}
h1 a img {
    width: 100%;
    height: 2.4vw;
    vertical-align: bottom;
}
/* ナビゲーション */
nav {
    margin-left: 10%;
    width: 70%;
}
nav ul {
    display: flex;
    list-style-type: none;
}
nav ul li {
    width: calc(100%/6);
}
nav ul li a {
    display: block;
    text-align: center;
    line-height: 3;
    text-decoration: none; 
    color: #202020;
    font-size: 1.1vw;
   
    /*  ホバー効果 */
    padding-bottom: 3px; /* テキストと下線の間隔 */
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
    /*  ホバー効果 */       
}
nav ul li a:hover {
    color: blue;
    
    /*  ホバー効果 */
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 1px; /* 下線の横幅を100%にする */
    /*  ホバー効果 */
}
.sns {
    width: 5%;
    text-align: center;
    color: #202020;    
}
.sns a {
    font-size: 2vw;   
}
.sns i {
    vertical-align: bottom; 
}
/* headerここまで↑ */

/* メインビジュアル部分 */

.top {
    width: 100%;
    height: 100vh;
    margin-top: 2vw; 
    background-image: url(../images/mv_02.jpg);  
    vertical-align: bottom;
    background-repeat: repeat-x;
    background-size: contain;
}
/* 値のcoverは、背景画像の縦横比を保持したまま要素を覆いつくすように
    表示してくれるが、背景画像が見切れてしまうのが弱点
    （今回は下が見切れている） */
    /* 値にcontainを使うと、背景画像の縦横比を保持したまま全体を
    表示してくれるが、要素内にスペースができてしまうのが弱点。
    ※背景画像をうまく切り抜くor要素の縦横のサイズ調整を
    すると、cover、containの弱点もカバーできる。 */

.top h2 {
    white-space: pre-wrap;
    font-size: 5vw;
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
}

main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
section {    
    margin-top: 3vw;
    margin-bottom: 2vw
}
h2 {
    font-size: 4vw;
    margin-bottom: 1vw;
      
}
h2 a {
    text-decoration: none;
    color: blue; 
}
/* ページtop戻るボタン */
.page-top a img {
    width: 7%;
    vertical-align: bottom;
    margin-left: 93%; 
} 

/* section（ABOUT）ここから↓ */
.about-photo {
    width: 100%;
    /* height: ここは100vwではなく80vhにする; */
    height: 80vh;
    margin-top: 1vw;
    background-image: url(../images/projects_title_01.jpg);
    background-repeat: no-repeat;
    background-size: contain;

}
.about-photo p {
    white-space: pre-wrap;
    color: #fff;
}

h3 {
    font-size: 2vw;
}
.setumei p{
    white-space: pre-wrap;
    margin-top: 1vw;  
    
}
/* sectionここまで↑ */



/* footerここから↓ */

footer {
    width: 90%;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vw;
    border-top: 1px solid #cdcccc;
}
footer h2 {
    color: #202020;
}
footer h2 a {
    display: block;   
}
footer h2 a img {
    width: 20%;
    margin-bottom: 2vw;
}
address {
    margin-bottom: 2vw;
}
address p {
    font-style: normal;
}
.parent-box {
    display: flex;

    width: 100%;
    align-items: baseline;
    margin-bottom: 2vw;
}
/* ---------------- */
.parent-box ul {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.parent-box ul li {
    width: calc(100%/7);
    list-style-type: none;
        
}
.parent-box ul li a {
    display: block;
    line-height: 2vw;  
    text-align: center;
    padding-top: 1vw; 
    padding-bottom: 1vw;
    text-decoration: none;
    font-size: 1.1vw;
    
/*  ホバー効果 */
    padding-bottom: 3px; /* テキストと下線の間隔 */
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: bottom right; /* 下線の初期位置 */
    background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
    transition: background-size 0.3s;
    /*  ホバー効果 */      
}
.parent-box ul li a:hover {
    
    /*  ホバー効果 */
    background-position: bottom left; /* 下線のホバー時位置 */
    background-size: 100% 1px; /* 下線の横幅を100%にする */
    /*  ホバー効果 */
}
/* --------------------- */

.child-sns {
    width: 8%;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 2%;
    list-style: 3;
    color: #202020;
    
}
.child-sns a {
    text-align: right;
}
.child-sns i {
    font-size: 2vw;
}
.copyright {
    display: flex;
    border-top:1px solid #cdcccc;
    padding-top: 1%;
    padding-bottom: 1%;
}
.copyright p {
    font-size: 1vw;
}
.copyright p a {
    
}
.copyright p:nth-of-type(1) {   
    width: 15%;
    
}
.copyright p:nth-of-type(2) {
    width: 20%;
    
}
.copyright p:nth-of-type(3) {
    width: 40%;
    margin-left: 25%;
    text-align: right;
}

/* footerここまで↑ */