@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

/* 上に戻るボタン→#page-top */

/* カラー
#7FB0F4　水色
#977EF5　紫
#F1ACF2　少し濃いめのピンク
#F0D5F2　薄いピンク
 */

/* ドットフォント(アニメーションに使った) */
@font-face {
    font-family: 'DotGothic16';
    src: url(../font/DotGothic16-Regular.ttf);
}

/* 丸いゴシック系　プロフィールとかに使う */
@font-face {
    font-family: 'SawarabiGothic';
    src: url(../font/SawarabiGothic-Regular.ttf);
}

/* 明朝体　レギュラー */
@font-face {
    font-family: 'ZenOldMincho-Regular';
    src: url(../font/ZenOldMincho-Regular.ttf);
}

/* 明朝体　ミディアム　少し太め */
@font-face {
    font-family: 'ZenOldMincho-Medium';
    src: url(../font/ZenOldMincho-Medium.ttf);
}

/* h2など見出しに使うキラキラの文字 */
@font-face {
    font-family: 'KalniaGlaze-VariableFont';
    src: url(../font/KalniaGlaze-VariableFont_wdth\,wght.ttf);
}

.anime {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(90, 86, 251, 1), rgba(255, 193, 230, 1));
}

.anime p {
    font-size: 4vw;
    letter-spacing: -0.1em;
    /* letter-spacingは一文字ずつの半角を調整するプロパティ。
    /* 値は0.1emのように0.1文字辺りが丁度良い。開けすぎに注意。 */
    font-family: 'DotGothic16';
}

.anime p span {
    color: transparent;
}

.anime p span:nth-child(1) {
    animation: writing1 2s forwards;
}
@keyframes writing1 {
    14.2% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(2) {
    animation: writing2 2s forwards;
}
@keyframes writing2 {
    28.4% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(3) {
    animation: writing3 2s forwards;
}
@keyframes writing3 {
    42.6% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(4) {
    animation: writing4 2s forwards;
}
@keyframes writing4 {
    56.8% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(5) {
    animation: writing5 2s forwards;
}
@keyframes writing5 {
    71% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(6) {
    animation: writing6 2s forwards;
}
@keyframes writing6 {
    85.2% { color: #fff;}
    100%  { color: #fff;}
}

.anime p span:nth-child(7) {
    animation: writing7 2s forwards;
}
@keyframes writing7 {
    99.4% { color: #fff;}
    100%  { color: #fff;}
}

/* main {
    background-image: url(../images/pattern\ \(1\).svg);
    background-repeat: repeat-y;
    background-position: center center;
} */

/* 上に戻るボタン */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}

/* アニメーション効かない…？？ */
@keyframes botton-anime {
    0% {
        transform: rotateY(1vw);
    }
    100% {
        transform: rotate3d(-1vw);
    }
}

#page-top a {
    display: block;
    width: 8vw;
    height: 8vw;
    line-height: 8;
    text-align: center;
    background-image: linear-gradient(180deg, rgba(129, 72, 202, 1), rgba(250, 176, 255, 1) 0%, rgba(117, 233, 253, 1));
    text-decoration: none;
    color: #7637ff;
    border-radius: 4vw;
    font-family: 'SawarabiGothic';
    animation: botton-anime 2s infinite alternate-reverse;
}

#page-top a:hover {
    opacity: 0.5;
}
/* 上に戻るボタン終わり */

header {
    position: relative;
    z-index: 10;
    background-attachment: fixed;
    width: 96%;
    padding: 2%;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
}

/* キラキラのアニメーション */
.kirakira {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 1;
    width: 30%;
    
    animation: kirakira1-anime 2s infinite alternate-reverse;
}



@keyframes kirakira1-anime {
    0% {
        transform: translateY(1vw);
    }
    100% {
        transform: translateY(-1vw);
    }
}

/* 左上にある小さめキラキラのアニメーション */
.kirakira2 {
    position: absolute;
    z-index: 5;
    width: 15%;  
    animation: kirakira1-anime2 2s infinite alternate-reverse;
}

.kirakira2 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes kirakira1-anime2 {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

.kirakira3 {
    position: absolute;
    z-index: 5;
    width: 15%;  
    bottom: 2%;
    right: 3%;
    animation: kirakira1-anime3 3s infinite alternate-reverse;
}

.kirakira3 img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes kirakira1-anime3 {
    0% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}
/* 右下キラキラアニメーション終わり */

/* 携帯電話のアニメーション */
.phone {
    position: absolute;
    z-index: -1;
    width: 15%;  
    top: 0%;
    right: 3%;
    animation: phone-anime 2s infinite ease-in-out alternate-reverse;
}

@keyframes phone-anime {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

.phone img {
    width: 100%;
    vertical-align: bottom;
}
/* 携帯電話のアニメーション終わり */

/* ここから文字のアニメーション */
.mozi-header {
    position: absolute;
    z-index: 10;
    margin-top: 2%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    animation: mozi 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.mozi-header img {
    width: 100%;
    vertical-align: bottom;
}

@keyframes mozi {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ここまで文字のアニメーション */

nav {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    align-items: baseline;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav ul li {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
}

nav ul li a {
    display: block;
    text-align: center;
    line-height: 3;
    text-decoration: none;
    color: #2c14e4;
    font-size: 1.3vw;
    transition: 1s;
}

nav ul li a:hover {
    border-radius: 4vw;
    background-image: linear-gradient(180deg, rgba(89, 86, 251, 0.30), rgba(255, 193, 230, 0.30));
    transition: 1s;
}

/* ここから自分の簡潔自己紹介///////////////// */
/* 自己紹介背景の画像 */
section:nth-of-type(1) {
    /* background-image: url(../images/background1-mizuiro.png);
    background-position: center center;
    margin-top: 20%; */
    padding: 10%;
    margin-bottom: 10%;
}

/* プロフィールの親要素の設定 */
.section1-box {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    padding: 2%;
    font-size: 4vw;
    text-align: center;
    letter-spacing: 0.1em;
    color: #717fff;
    text-shadow: 2px 2px #F1ACF2;
    /* border-left: 2px solid #717fff;
    border-bottom: 2px solid #717fff; */
    font-family: 'KalniaGlaze-VariableFont';
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}

.section1-left {
    width: 40%;
    margin-top: 3%;
    margin-right: 10%;
}

.section1-left img {
    width: 100%;
    border-radius: 3vw;
    vertical-align: bottom;
}

.section1-right {
    width: 50%;
}

h3 {
    margin-bottom: 5%;
    letter-spacing: 0.1em;
    font-size: 2vw;
    font-family: 'SawarabiGothic';
    font-weight: 100;
}

h3 span {
    margin-left: 3%;
    font-size: 1vw;
}

.section1-contents {
    margin-top: 10%;
    margin-bottom: 10%;
    letter-spacing: 0.1em;
    color: #680dc3;
    font-family: 'SawarabiGothic';
    font-weight: 100;
}

.section1-contents p {
    font-size: 1.1vw;
    white-space: pre-wrap;
}

.butoon-parents {
    display: flex;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.keki-gif {
    width: 40%;
    margin-top: 3%;
    margin-right: 5%;
}

.keki-gif img {
    width: 100%;
    vertical-align: bottom;
}

.button p {
    position: relative;
    width: fit-content;
    line-height: 6.5;
    /* line-heightが肝か！？ */
    text-align: center;
    width: 10vw;
    height: 10vw;
    border-radius: 5vw;
    list-style-type: none;
    font-size: 1.5vw;
    color: #7637ff;
    background-image: linear-gradient(180deg, rgba(129, 72, 202, 1), rgba(250, 176, 255, 1) 0%, rgba(117, 233, 253, 1))
}

.button p::before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: "";
    width: 0%;
    height: 0.1vw;
    background-color: #988aff;
    transition: 0.5s;
}

.button p:hover::before {
    width: 100%;
    transition: 0.5s;
    /* 疑似要素をwidth: 0%;からwidth: 100%;にするのに一秒かけたアニメーション */
}


/* ここから自分の作品集///////////////////////// */
/* ↓セクション２(webサイトの作品集の大枠)を指定 */
section:nth-of-type(2) {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

h4 {
    position: sticky;
    top: 0;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 2vw;
    color: #e359e8d2;
    letter-spacing: 0.2em;
    background-image: linear-gradient(180deg, rgba(129, 72, 202, 0.3), rgba(250, 176, 255, 0.3) 0%, rgba(117, 233, 253, 0.3));
    font-family: 'ZenOldMincho-Regular';
}

/* ここからwebサイト森彦と税理士法人のサイト */
.works {
    display: flex;
}

.works-website1 {
    width: 45%;
    margin-right: 10%;
}

.works-website1 img {
    width: 100%;
    vertical-align: bottom;
}

.works-website2 {
    width: 45%;
}

.works-website2 img {
    width: 100%;
    vertical-align: bottom;
}

figcaption {
    padding-top: 3%;
    padding-bottom: 3%;
    font-size: 1.5vw;
    color: #6621fb;
    text-shadow: 1px 1px 4px #C5B0DA;
    border-bottom: 1px solid #6621fbb2;
    font-family: 'ZenOldMincho-Regular';
}

figure p {
    margin-top: 3%;
    font-size: 1.2vw;
    color: #6621fb;
    text-shadow: 1px 1px 4px #C5B0DA;
    font-family: 'ZenOldMincho-Regular';
}

.works3 figcaption,.works4 figcaption,.works5 figcaption {
    margin-top: 7%;
}

/* ここまでwebサイト森彦と税理士法人のサイト終わり */

/* ここからキリスト教葬儀サイト */
.works2 {
    display: flex;
    margin-top: 10%;
    margin-bottom: 10%;
}

.works-website3 {
    width: 45%;
    margin-right: 10%;
}

.works-website3 img {
    width: 100%;
    vertical-align: bottom;
}

.works-website4 {
    width: 45%;
}

.works-website4 img {
    width: 100%;
    vertical-align: bottom;
}
/* ここまでキリスト教葬儀サイト */

/* ここからセクション3　バナー(Photoshop)など */
section:nth-of-type(3) {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.works3 {
    display: flex;
    margin-top: 8%;
}

.works-banner {
    width: 45%;
    margin-right: 10%;
}

.works-banner img {
    width: 100%;
    vertical-align: bottom;
}

.works-banner2 {
    width: 45%;
}

.works-banner2 img {
    width: 100%;
    vertical-align: bottom;
}
/* ここまでバナー(Photoshop) */

/* ポスター、GIFアニメーション */
.works4 {
    display: flex;
    margin-top: 15%;
}

.works-poster,.works-clane {
    width: 45%;
    margin-right: 10%;
}

.works-poster img,.works-clane img {
    width: 100%;
    vertical-align: bottom;
}

.works-poster-illusto,.works-gif {
    width: 45%;
}

.works-poster-illusto img,.works-gif img {
    width: 100%;
    vertical-align: bottom;
}



/* グラフィック */
section:nth-of-type(4) {
    width: 80%;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
}

.works5 {
    display: flex;
    margin-top: 8%;
}

.works-wave {
    width: 45%;
    margin-right: 10%;
}

.works-wave img {
    width: 100%;
    vertical-align: bottom;
}

.works-earo {
    width: 45%;
    height: 10vw;
}

.works-earo img {
    width: 100%;
    vertical-align: bottom;
}

.works-earo figcaption {
    margin-top: 17%;
}

.works-gif figcaption {
    margin-top: 50%;
}
/* ポスター、GIFアニメーション終わり */

/* ここまで自分の作品集///////////////////////// */

/* お問い合わせ セクション3部分 */
section:nth-of-type(2) {
    margin-top: 10%;
    margin-bottom: 10%;
}

section:nth-of-type(2) h2 {
    font-size: 1.5vw;
    color: #E359E8;
    text-shadow: 1px 1px 4px #C5B0DA;
    font-family: 'ZenOldMincho-Regular';
}

.mail {
    text-align: center;
    font-size: 3vw;
    font-family: 'KalniaGlaze-VariableFont';
}
/* お問い合わせ終わり　セクション3部分 */


/* フッターの上装飾 */

/* フッターの上装飾 */

/* フッター　著作権表記 */
footer p {
    text-align: center;
    color: #ffffff;
    background-color: #8148CA;
}
/* フッター　著作権表記終わり */