/* PC、スマホ共通スタイル */
/* ヘッダーやフッターとarticleの隙間をなくす */
* {
    margin:0;
    padding:0;
    }

body{
    font-family:"Noto Sans JP",sans-serif;
}
p{
    font-size:15px;
}
/* PCのスタイル */
/* 横幅設定 */
/* 最小幅は960pxに設定 */
body{
    min-width:960px;
    margin: 0 auto;
}

/* ハンバーガーメニュー */
#menu-sp{
    position:fixed;
    top:0;
    right:0;
    padding:0;
    width:85px;
    height:60px;
    z-index:101;

/* フェードインアニメーション */
        animation-name:fadeInAnime;
        animation-duration:5s;
        animation-fill-mode:forwards;
        opacity:0;
        }
            
        @keyframes fadeInAnime{
            from {
            opacity: 0;
            }
            
            to {
            opacity: 1;
            }
}
/* スマホ用ナビゲーションの表示切替 */
/* 初期状態、レイアウトと非表示設定 */
#nav-sp{
    background-color:#44B0B0;
    position:fixed;
    right:0;
    top:0px;
    height:100%;
    width: 30%;
    display:none;
    z-index:102;
}
/* ×ボタン */
#close{
    position:absolute;
    top:5px;
    right:5px;
}
/* ナビゲーションメニュー用ロゴ */
#logo-sp{
    margin:80px 0 30 px 20px;
}
/* ナビゲーションのリンクの装飾設定 */
#nav-sp>a{
    display:block;
}
#nav-sp>a:link{
    color:#ffffff;
}
#nav-sp > a:visited{
    color:#ffffff;
}
#nav-sp > a:hover{
    color:#038363;
    text-decoration:underline;
}
#nav-sp>a:active{
    color:#ffffff;
}
#nav-sp>.menu{
    text-decoration:none;
    display:block;
    margin:0 20px;
    height:55px;
    font-size:20px;
    background-repeat:no-repeat;
    background-position:right top;
}

/* メインビジュアル */
.fc-pc{
    display:block;
}
.fv-sp{
    display:none;
}
.arrow{
    display:none;
}

#main-visual{
   position:relative;
   z-index:100;
}

#main-visual>img{
    width:100%;
        /* フェードインアニメーション */
    animation-name:fadeInAnime;
    animation-duration:5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }


.contents{
    width:1000px;
    margin:0 auto;
}

.contents>img{
    margin-bottom:22px;
}


h2{
font-family: sans-serif;
color:#BCBCBC;
text-shadow: 0 0 #000, 1px 1px 2px #eee;
font-size:64px;
}

h3{
    font-size:27px;
}

#skills{
    margin-top:130px;
}
#skills-flex{
    width:100%;
    display:flex;
    justify-content: space-between;
}
#skills-flex > div {
    position:relative;
     width: 312px;
     height:400px; 
    background-color: #44B0B0;
}
#skills-flex>div>h3{
    text-align:center;
    color:#FFFFFF;

}
#skills-flex>div>p{
    text-align:center;
    color:#FFFFFF;
    margin-top:50px;
}
#skills-flex>div>div{

    text-align:center;
    color:#FFFFFF;
}
#skills-flex>div>img{
    display:block;
    margin:0 auto;
    margin-top:30px;   
}
#skills-flex>.hearing>img{
     width: 150px; 
     text-align: center;
}
#skills-flex>.design>img{
    width: 150px;  
    text-align: center;
} 

#skills-flex>.coding>img{
    width: 150px;  
}

#message1{
    font-size:20px;
}

/* 下からふわっとフェードイン */
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}



/*archieve */
#archieve{
    margin-top:130px;
}
/* 外枠 */
#archieve>div{
    display:flex;
    justify-content: space-between;
}
/* 左のカラム */
#archieve-left{
    margin:0px 0px 0px 0px ;
}
/* 右のカラム */
#archieve-right{
    margin:0px 0px 0px 0px;
}
/* 画像＋説明の枠 */
#archieve-left>div{
position:relative;
width: 458px; 
height:417px;
margin:0px 0px 70px 0px;
background-color: #44B0B0;
}

#archieve-right>div{
    position:relative;
    width: 458px; 
    height:417px; 
    margin:0px 0px 70px 0px;
    background-color: #44B0B0;
}
/* 画像 */
.archieve-photo{
    display: block;
    width:398px;
    height:322px;
    margin: 10px auto;
    padding:28px;
    position: relative;
    object-fit:cover;
    object-position: 5% 0;
}
/* フォーカス時、写真の色暗くしたい */
.dark-cover {
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
  }
  
  .dark-cover:hover {
    filter: brightness(0.7)
  }


/* 商品説明 */
.archieve-explain{
    position:absolute;
    color:#ffffff;
    left:0;
    top:350px;
    margin:0 40px;
    padding:10px;
}

/* 説明文の見出し */
.archieve-explain>h3{
    font-size:20px;
    margin:5px 0 5px 0;
}
/* 説明文 */
.archieve-explain>p{
    font-size:14px;
    margin:0;
}

/* ABOUT */
#about{
    margin-top:60px;
}
#about>div{
    display:flex;
    background-color:#44B0B0 ;
}
#about1{
    padding:38px;

}
#aboutphoto1>img{
    width:448px; 
}
#aboutprofile{
    padding-left:31px;
}
#aboutprofile>p{
    font-family: sans-serif;
    font-size:24px;
    color:#FFFFFF;
    
}
#about2{
    margin-top:25px;
    padding:38px;
}
#aboutphoto2>img{
    /* width:448px; */
    width:100%;
    padding-left:35px;
}


#aboutme>p{
    font-family: sans-serif;
    font-size:24px;
    color:#FFFFFF;
}

/* aboutmoreのセクション*/
#aboutmore-title{
    margin-top:130px;
}

#aboutmorepage{
    position:relative;
}

#aboutmorepage>img{
    width:100%;
    position:relative;
    z-index: 11;
    vertical-align: top;
}

#card>a>img{
    width:20%;    
    position:absolute;
    z-index: 12;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
     text-align: center;
     box-shadow: 5px 5px rgb(35, 35, 35);
    }

    
#card>a>img:hover {
    box-shadow: none;
    transform: translate(-48%,-48%);
    transition: all 0.2s;
    }


/* お問い合わせ */
#contact{
    margin-top:130px;
}
#contact>div>p{
    font-family: sans-serif;
    font-size:24px;
    text-align:center;
}

#contact>div>img{
    text-align:center;
    position:absolute;
    top:209px;
    left:329px;
}
.block-center{
    text-decoration:none;
    width: 332px;
    height: 78px;
    box-sizing: border-box;
    display: block;
    background: url(images/contact-arrow2.png);
    background-repeat: no-repeat;
    background-position: 0 80%;
    border: 5px solid #E5E5E5;
    border-radius:25px;
    color: #393636;
    font-size: 15px;
    text-align: center;
    line-height: 78px; 
    margin: 0 auto 5vh;
}

.block-center:hover{
        background-position: 40% 80%;
        transition: 0.5s;
}

/* aboutmore.html */

.am_page_bg>img{
    width:100%;
    object-fit: cover;
    object-position: 0% 0%;
    vertical-align:bottom;
}

.am_text_bg{
    position:absolute;
    background-color:rgba(255,255,255,0.81);
    width:calc(687vw/1539*100);
    margin-left:calc(114vw/1539*100);
    padding:11px calc(68vw/1539*100) 20px calc(17vw/1539*100);
    top:10vh;
}
.am_text_title{
    color:#000000;
    font-size:calc(32vw/1539*100);
    margin-top:11px;
    margin-bottom:0px;
    padding:0;
}
.am_text_text{
    color: #000000;
    font-size:calc(24vw/1539*100);
    margin-bottom:5vh;
}
.am_text_text_part{
    display:block;
    margin-top:1em;
}



/* フッター */

footer {
    background-color: #0d0d0d;
    text-align: right;
    padding: 33px 80px 33px 80px;
  }


#footer-link > a:link{
    text-decoration:none;
    margin:10px;
    font-family: sans-serif;
    font-size:24px;
}
#footer-link > a:link{
    color:#ffffff;
}
#footer-link > a:visited{
    color:#ffffff;
}
#footer-link > a:hover{
    color:#ffffff;
    text-decoration:underline;
}
#footer-link > a:active{
    color:#ffffff;
}





/* ====================
スマートフォン用のスタイル 
=========================*/
@media screen and (max-width:768px){
   
   /* ハンバーガーメニュー */
#menu-sp{
    width:calc(50vw/392*100);
    height:auto;
}
.fv-pc{
    display:none;
}
.fv-sp{
    display:block;
}
.arrow{
    display:flex;
    justify-content:center;
    margin-top:30px;
}

.arrow-picture{
    width:70px;
    /* フェードインアニメーション */
        animation-name:fadeInAnime;
        animation-duration:1s;
        animation-delay: 3s;
        animation-fill-mode:forwards;
        opacity:0; 
        @keyframes fadeInAnime{
        from {
            opacity: 0;
           }
         
        to {
            opacity: 1;
           }
         }
}

    body{
        min-width:initial;
    }
    #skills-flex{
        width:100%;
        display:block;
        justify-content: space-between;
    }
    #skills-flex > div {
        position:relative;
        width: 312px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        background-color: #44B0B0;
    }
    .skills-image{
        padding-top:20px;
    }
    .skills-one{
        padding-bottom:20px;
    }

    #about>div{
        display:block;
        background-color:#44B0B0 ;
    }
    #aboutphoto1>img{
        width:100%;
    }
    #aboutphoto2>img{
        width:100%;
        padding-left:0;
    }

    .contents{
        width:100%;
        margin:0 auto;
    }
    

    #archieve>div{
        display:block;
        justify-content: space-between;
    }


/* 画像＋説明の枠 */
#archieve-left>div{
    position:relative;
    width: 100%; 
    height:417px;
    margin:0px 0px 70px 0px;
    background-color: #44B0B0;
    }

#archieve-right>div{
    position:relative;
    width: 100%; 
    height:417px; 
    margin:0px 0px 70px 0px;
    background-color: #44B0B0;

}
.archieve-photo{
    display: block;
    width:80%;
    height:322px;
    margin: 10px auto;
    padding:28px;
    position: relative;
}
.sub-title{
    width:auto;
    height:40px;
}


.am_page_bg>img{
    width:100%;
    height:600px;
    object-fit:cover;
    object-position:100% 50%;
    vertical-align:bottom;
}
.am_text_bg{
    width:85%;
    top:5vh;
    padding:5px;
}   

.am_text_title{
    font-size:22px;
}
.am_text_text{
    font-size:16px;
}


}