@charset "UTF-8";

*{ margin: 0; padding: 0;}
a { text-decoration: none;}
ul,ol { list-style: none;}
img { vertical-align: middle;}

img { max-width: 100%;}/* フルードイメージ */

/* link */
a,
a:link{
    text-decoration: none;
    color: #000;}
a:visited{
    color: #000;}
a:hover{
    text-decoration: none;
    color: #016efc;}

/* HTML　group */
html {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
    font-size : 87%; /* 14px */
    line-height : 1.5;}

/* h1-h6　group */    
h1 {
    font-size : 3em; /*48px */
    line-height : 1; /*48px */
    margin-bottom : 0.5em }
h2 {
    font-size : 2.25em;/*36px */
    line-height : 1.3333; /*48px */
    margin-bottom : 0.6667em }
h3 {
    font-size : 1.5em; /*24px */
    line-height : 1; /*24px */
    margin-bottom : 1em }
header h2,h4,h5,h6 {
    font-size : 1em; /*16px */
    line-height : 1.5; /*24px */
    margin-bottom : 1.5em } 

/*  group end*/
body{background: #fff;}
.container{ 
    max-width: 1366px;
    margin: 0 auto;
    border: solid 1px #ccc; }


/* header =====================================================*/
header{/* グラデーション背景 */   
    background: linear-gradient(to bottom, #f8e2e2, #92f3f5);}

.header-bg{/* 魚アイコンpng */
    /* background: url(../images/魚アイコン\(単色\).png), url(../images/魚アイコン\(単色02\).png); */
    background: url(../images/fish1.png), url(../images/fish2.png);
    background-repeat: no-repeat;
    box-sizing: 190px 90px, 40px 20px;
    background-position: 0 0, 100% 5%;}
    /* background-blend-mode: lighten; */

nav{ width: 100%;}
nav ul{ 
    display: flex;
    justify-content: center;}
nav li{ padding:  5% 3% 3%;}

.mainvisual{ 
    /* border: solid blue; */
    position: relative;}

.visualbox{ 
    padding: 0 5%;}
.mainleft, .mainright{ width: 100%;}
.logo{ padding: 10% 0 5%;}
.maincomment{ font-size : 1.2em;}
.visual-bottom{
    width: 100%;
    height: 100%;
    background-image: url(../images/visual-bottom.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 88%;
    left: 0;}

/* main ========================================================= */
main{ background-color: #fff;}
.main-container{ 
    /* max-width: 1280px; */
    padding: 0 6% 10%;
    margin: 0 auto; }
.main-container section h2{ text-align: center;}
.main-container section h2 img{
     width: 100%;
     padding: 25% 0 5% 0;}

/* profile------------------- */

/* 足跡png */
/* .main-container{
    background: url(../images/pro-footprints.png);
    background-repeat: no-repeat;
    box-sizing: 190px 90px;
    background-position: 0% 0%;} */
.profile-l img{ width: 70%; display: block; margin: 0 auto;}
.profile-l p{
    margin: 10% auto;
    width: 70%;
    line-height : 1.5; /*24px */
    padding: 5%;
    border: solid 1px #CCC;}
/* .profile-r{
    background: url(../images/魚アイコン\(単色02\).png);
    background-repeat: no-repeat;
    box-sizing:  40px 20px;
    background-position: 100% 0%;}     */
.profile-r .pro-address,
.profile-r .pro-career{ margin:3% 5% 5%;}
.profile-r img{ width: 300px; margin-bottom: 5%;
    padding-top: 18%;}
.pro-career img{ width: 300px;
    padding: 5% 0;}
/* career------------------ */
.pro-career{
    background: url(../images/pro-bg-id.png);/* 身分証png*/
    background-repeat: no-repeat;
    background-size:280px 237px; /* 横幅の値　高さの値;   */                                     
    background-position: 100% 100%;}  
.pro-career ul dt{ font-weight:bold;}
.pro-career ul dd{ padding: 2% 2%;}

/* skill------------------- */
.pro-skill img{ width: 300px;
    padding-top: 20%;}
.skill-box{
    display: flex;
    flex-wrap: wrap;
    gap:calc((800px - 80px * 9) / 8);}
.skill-icon{ width: 80px; }
.pro-skill-box ul{
    list-style-type: disc;/* ・に戻す */
    line-height : 1.5; /*24px */
    padding: 4%;
    padding-left: 7%;
    border: solid 1px #CCC;}

/* website etc--------------------- */

.website-boxs{width: 100%;}
.web-box{
    margin-bottom: 10%;
    padding: 10% 3%;
    border: solid 1px #ccc;
}

.web-subject{
    font-size: 1em; 
    /* font-weight:bold;  */
    margin: 5% 0 3%;}
.web-text{
    display: flex;
    margin-bottom: 5px;}
.web-text p{ 
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 0 2px;
    margin-right: 7px;}


/* footer ========================================================= */
footer{/* グラデーション背景 */   
    background: linear-gradient(to bottom, #92f3f5, #f8e2e2);
    height: 400px;
    }

.footer-container-top{
    width: 100%;
    height: 100%;
    background-image: url(../images/visual-footer-top.png);
    background-repeat: no-repeat;
    background-position: 0% 0%;} 

/* bannerページ ========================================================= */    
.bn-conteiner{
    display: flex;
    flex-wrap: wrap;
    margin-top: 8%;
}
.bn-box{ padding: 3%;
    margin: 0 auto;
    text-align: center;}
.bn-box p{ padding: 5%;}
.bn-comment{ 
    width: 100%;
    font-size: 120%;
    font-weight:bold;
    text-align: center;
    padding: 15% 8%;}



/* PC ========================================================= */

@media screen and ( min-width : 768px){
/* header */
html { font-size : 1em; }/* 16px */
.visualbox{ display: flex;}
.mainleft, .mainright{ width: 50%;}
.maincomment{ font-size : 1.5em;}
.visual-bottom{ top: 80%;}

/* main*/
.main-container section h2 img{ 
    width: 60%;
    padding: 12% 0 5% 0;}
.profile-box{ display: flex;
    margin-left: 5%;}
.profile-l{ width: 45%; }
.profile-l img{ width: 100%;}
.profile-l p{ width: 90%;}
.profile-r{ width: 55%; padding-left: 3%; }
.profile-r img{ padding-top: 8%;}
.pro-career { padding: 0 6%;}
.pro-career img{ padding: 2% 0 5%;}

.website-boxs{ display: flex; flex-wrap: wrap;}
.web-box{
    margin: 0 auto;
    width: 40%;
    padding: 5% 2% 3%;
    margin-bottom: 8%;}
.pro-skill,
.pro-skill-box { margin-left: 4% ;}
.pro-skill img{ padding-top: 10%;}
.pro-skill-box ul{
    margin: 5% 0;
    width: 85%;}
.bn-comment{ 
    font-size: 2em;
    font-weight:bold;
    padding: 2% 0 3% 8%;}

}

/* ここから時間差フェードインアニメーション =========================*/

/* 0.1秒間かけ上から下にてフェードイン 【ロゴ】*/
.fadeIn100ms {
    animation-name: fadeIn100ms;
    animation-delay: 100ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn100ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 0.4秒間かけて下から上にフェードイン【ペンギン】 */
.fadeIn400ms {
    animation-name: fadeIn400ms;
    animation-delay: 400ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn400ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 0.5秒間かけて右から左にフェードイン【未使用】 */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* 0.6秒間かけて左から右フェードイン【テキスト】 */
.fadeIn600ms {
    animation-name: fadeIn600ms;
    animation-delay: 600ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}
@keyframes fadeIn600ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* ここからタイプライタアニメーション =========================*/

.line-1{/*対象のテキスト*/
    /* position: absolute; */
    top: 50%; 
    width: 30%; 
    /* width: 24em; */
    margin: 0 auto;
    /* border-right: 2px solid rgba(255,255,255,.75); */
    font-size: 90%;
    /* text-align: center; */
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}
 
.typewriter-a{/*1行目アニメ-1秒後から始める*/
  animation: typewriter 4s steps(44) 1s 1 normal both, /* 1S後から始める */
 blinkTextCursor 500ms steps(44) infinite normal;
}

.typewriter-b{/*2行目アニメ-55秒後から始める*/
    animation: typewriter 4s steps(44) 5s 1 normal both, /* 5S後から始める */
   blinkTextCursor 500ms steps(44) infinite normal;
  }
@keyframes typewriter{/*タイプライターライクなアニメーション*/
  from{width: 0;}
  to{width: 24em;}
}

/* 各ページのスクロールしたら表示されるフェードイン ==============*/

.fadeIn {
    transform: translate3d(0, -10px, 0);
    transition: 1s;
    opacity: 0;
}

.fadeIn.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}


/* TOPにもどるCSS=================================================*/
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: #9fe8f5;
opacity: 0.7;
border: solid 1px #ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}

.pagetop_arrow {
height: 10px;
width: 10px;
border-top: 2px solid #555;
border-right: 2px solid #555;
transform: translateY(20%) rotate(-45deg);
}
  /* TOPにもどる ここまで*/