@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

/* headerここから↓ */
body {
    font-size: 1.6vw;
}
header {
    /* 違うところ
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
    */   
    margin-top: 2vw;
}
h1 {
     /* 違うところ 
    width: 15%;から25％
    中央寄せ bottomつける*/
    width: 25%; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vw;   
}
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);消す*/
    
    /* 追加　中央寄せ */
    text-align: center;
}
nav ul li a {
    display: block;
    text-align: center;
    line-height: 3;
    text-decoration: none; 
    color: #202020;
    /* 違うところ
    文字サイズ1.1から2.0へ
    線付ける */
    font-size: 2.0vw;
    border: 1px solid #cdcccc;
      
    /* 違うところ追加　色付きのホバー効果 */
    transition: 1s;
    background-color: #FFF;
}
/* 違うところ　追加　色つきのホバー効果 */
nav ul li a:hover {
    color: blue;
    background-color: lightblue;
    transition: 1s;
}
/* 違うところ
前のホバー効果消す */

.sns {
    /* 違うところ width: 5%;*/
    text-align: center;
    color: #202020;    
}
.sns a {
 /* 違うところ size2から4*/ 
    font-size: 4vw;   
}
.sns i {
    vertical-align: bottom; 
}
/* headerここまで↑ */

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

.top {
    width: 100%;
    /* 違うところ height: 100vhから50からの25vhへ*/
    height: 25vh;
    margin-top: 2vw; 
    background-image: url(../images/mv_02.jpg);  
    vertical-align: bottom;
    background-repeat: repeat-x;
    /* 違うところ sizeをcontainからcoverへ;*/
    /* 理由 cover*/
    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--------------------------------- */
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: 100vhから50vhからの30vh*/
    height: 30vh;
    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;
    margin-top: 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%;から25％*/    
    width: 25%;
    margin-bottom: 2vw;
}
address {
    margin-bottom: 2vw;
}
address p {
    font-style: normal;
    /* 違うところ size追加*/
    font-size: 2.0vw;
}

.parent-box {
    display: flex;

    width: 100%;
    align-items: baseline;
    margin-bottom: 2vw;
}
/* ---------------- */
.parent-box ul {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-left: 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;
    /* 違うところ文字サイズ1.1から1.2へ */
    font-size: 1.2vw;
    
/*  ホバー効果 */
    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;から1.5vw*/    
    font-size: 1.5vw;
}
.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ここまで↑ */