@charset "UTF-8";

@font-face {
    font-family: "Poppins-Thin";
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}

@font-face {
    font-family: "Poppins-Bold";
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}

@font-face {
    font-family: "MPLUSRounded1c-Regular";
    src: url(../fonts/M_PLUS_Rounded_1c/MPLUSRounded1c-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: #fcfcef;
}

img {
    width: 100%;
    height: 100%;
}

/* スクロールイベント1 */
.fadeUp1{
    animation: 0.7s boya forwards ease-out;
}
    
@keyframes boya{
    0% {opacity: 0.3; filter:blur(20px);}
    100% {opacity: 1; filter:blur(0px);}
}   


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger1{
    opacity: 0.3;
    filter:blur(20px);
}

/* スクロールイベント2 */
.fadeUp2{
    animation: 1.5s kuru forwards,0.8s deka forwards;
    animation-delay: 0.5s;
    opacity: 0;
}
    
@keyframes kuru {
    0%{rotate: 0deg;}
    100%{rotate: 360deg;}
}
@keyframes deka {
    0%{opacity: 0; transform: scale(8);}
    100%{opacity: 1; transform: scale(1);}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* .fadeUpTrigger2  {
    opacity: 0;
} */
    
/* ヘッダー */
header .header_bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 42vw;
    margin: 0 auto;
    overflow: hidden;
}

header .header_bg .animeBox {
    width: 25%;
    margin: 0 auto 0;
}

header .header_bg .animeBox .kiraBox {
    display: flex;
    justify-content: space-around;
    height: 14vw;
    margin: 0 auto;
}

header .header_bg .animeBox .kiraBox img {
    width: 18%;
    animation: 0.8s katamuku forwards ease-in;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes katamuku {
    0%{opacity: 0; transform: rotate(0deg)scale(0.1);;}
    30%{transform: rotate(40deg)scale(0.1);}
    60%{transform: rotate(45deg) scale(1.2);}
    80%{opacity: 1; transform: rotate(-15deg); }
    90%{opacity: 1; transform: rotate(-5deg);}
    100%{opacity: 1; transform: rotate(0deg) scale(1);;}
}

header .header_bg .animeBox .kiraBox img:nth-of-type(2) {
    animation-delay: 1.4s;
}
header .header_bg .animeBox .kiraBox img:nth-of-type(3) {
    animation-delay: 1.6s;
}
header .header_bg .animeBox:nth-of-type(2) .kiraBox img:nth-of-type(1) {
    animation-delay: 1.8s;
}
header .header_bg .animeBox:nth-of-type(2) .kiraBox img:nth-of-type(2) {
    animation-delay: 2s;
}
header .header_bg .animeBox:nth-of-type(2) .kiraBox img:nth-of-type(3) {
    animation-delay: 2.2s;
}

header .header_bg .azarashi {
    animation: 1.2s hane forwards ease-in;
    animation-delay: 0.7s;
    transform: translateY(-220%);
    transform-origin: bottom;
}

header .header_bg .animeBox:nth-of-type(2) .azarashi {
    animation-delay: 0.9s;
}

header .header_bg h1 {
    width: fit-content;
    height: 30vw;
    margin: 0 auto;
    animation: 1.2s hane forwards ease-in;
    animation-delay: 0.5s;
    transform: translateY(-120%);
    transform-origin: bottom;
    position: relative;
}
@keyframes hane {
    0% {transform: translateY(-120%) scaleY(1.2) scaleX(0.8);}    
    15% {transform: translateY(0%);}
    20% {transform: translateY(0%) scaleY(0.9) scaleX(1.2);} 
    30% {transform: translateY(-20%);}
    40% {transform: translateY(-15%) scaleY(1.1) scaleX(0.9); }
    50% {transform: translateY(0%);}
    55% {transform: translateY(0%) scaleY(0.9) scaleX(1.1);} 
    70% {transform: translateY(-10%);}
    80% {transform: translateY(-5%) scaleY(1.03) scaleX(0.97);}
    85% {transform: translateY(0%);}
    90% {transform: translateY(0%) scaleY(0.98) scaleX(1.02);}
    100% {transform: translateY(0%) scaleY(1) scaleX(1);}
}

header .header_bg h1:before {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 48%;
    width: 2vw;
    height: 2vw;
    border-left: 0.1vw solid #333;
    border-bottom: 0.1vw solid #333;
    rotate: -45deg;
    animation: boya 1s forwards,sage 2s infinite linear;
    animation-delay: 3s;
    opacity:0;
}

@keyframes sage {
    0%{top: 100%; opacity: 0;}
    30% {opacity: 1;}
    80% {opacity: 1;}
    100%{top: 110%; opacity: 0;}
}

header nav {
    width: 80%;
    margin: 2vw auto 0;
}

header nav ul {
    display: flex;
    justify-content: space-around;
}

header nav ul li {
    list-style-type: none;
}

header nav ul li a {
    display: block;
    color: #333;
    letter-spacing: 0.1vw;
    font-size: 2vw;
    font-family: "Poppins-Thin";
    font-weight: 600;
    text-decoration: none;
}

header nav ul li a:hover {
    text-decoration: underline;
}

header nav ul li a::before {
    margin-right: 0.3vw;
    margin-bottom: 0.5vw;
    display: inline-block;
    vertical-align: middle;
    content: '';
    background-image: url(../images/kira.svg);
    background-size: cover;
    width: 2.5vw;
    height: 2.5vw;
}

header nav ul li a:hover::before {
    animation: kuru 1s infinite ,deka 1s infinite;
}

/* 波線 */
.waveLine {
    width: 80%;
    margin: 2vw auto 4vw;
}

.mainSection {
    width: 70%;
    margin: 8vw auto;
}

.mainSection .title_flexBox {
    display: flex;
    width: fit-content;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 1.5vw 0;
    position: relative;
}

.mainSection h2 {
    text-align: center;
    letter-spacing: 0.2vw;
    color: #333;
    font-size: 4vw;
    font-family: "Poppins-Thin";
}

.mainSection .title_flexBox img {
    width: 5vw;
    position: absolute;
    top: 0%;
    left: -43%;
}

.subSection {
    margin: 5vw 0 12vw;
}

.subSection .title_flexBox {
    display: flex;
    padding: 0;
    margin: 0 auto 0 0;
    width: 15vw;
    position: relative;
}

.subSection .title_flexBox img {
    width: 3vw;
    height: 3vw;
    position: absolute;
    top: 15%;
    left: -20%;
}

.subSection h3 {
    padding: 0.5vw;
    letter-spacing: 0.2vw;
    color: #333;
    font-size: 2.5vw;
    font-family: "Poppins-Thin";
}


/* プロフィール */
.prof_flexBox {
    display: flex;
    margin: 3vw auto;
    width: 100%;
    animation-delay: 0.5s;
}

/* 自画像 */
.prof_flexBox div {
    width: 40%;
    margin-top: 1vw;
    height: fit-content;
}

.prof_flexBox section {
    margin: auto 0 auto 5vw;
    color: #333;
    font-size: 0.98vw;
    font-family: "MPLUSRounded1c-Regular";
}

.prof_flexBox section p {
    width: fit-content;
    margin-bottom: 1.1vw;
    white-space: pre-wrap;
    letter-spacing: 0.1vw;
}

.prof_flexBox section p:last-of-type {
    padding: 0.4vw 1vw;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    line-height: 2.5vw;
    background-color: honeydew;
}

.prof_flexBox section p span {
    margin-right: 0.2vw;
    font-weight: 600;
}

.to_pagetop {
    position: sticky;
    bottom: 0;
}
.to_pagetop a {
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 1.5vw;
    font-family: "Poppins-Thin";
}

/* スキル */
.skill_flexBox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    margin: 4vw auto;
    height: 24vw;
    width: 100%;
    gap: 4vw 7vw;
    animation-delay: 0.5s;
}

.soft_flexBox {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 45%;
    height: 40%;
}

/* ソフトの枠 */
.soft_flexBox div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7vw;
    border: 0.1vw solid #333;
    border-radius: 1vw;
    background-color: transparent;
    box-shadow: 0.5vw 0.5vw 0 #b9b9b3;
}


/* ソフトの名前 */
.soft_flexBox div:nth-child(1) p {
    width: 7vw;
    white-space: pre-wrap;
    text-align: center;
    color: #333;
    font-size: 3.2vw;
    font-family: "Poppins-Bold";
    vertical-align: bottom;
}

.soft_flexBox div:nth-child(1) p span {
    font-size: 4vw;
    
}

/* HTML,CSS */
.soft_flexBox:nth-child(3) div:nth-child(1) p{
    font-size: 2vw;
    line-height: 1.3;
}
/* JQuery */
.soft_flexBox:nth-child(4) div:nth-child(1) p {
    font-size: 1.6vw;

}

/* ソフトの文章 */
.soft_flexBox div:nth-child(2){
    margin-left: 2vw;
    color: #333;
    line-height: 2vw;
    letter-spacing: 0.1vw;
    font-size: 0.98vw;
    font-family: "MPLUSRounded1c-Regular";
}

.soft_flexBox div:nth-child(2) h4 {
    font-size: 1.1vw;
    width: fit-content;
    padding: 0 0.2vw;
    
}

.soft_flexBox div:nth-child(2) p {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    white-space: pre-wrap;
    padding: 0.3vw;
    margin-top: 0.3vw; 
    line-height: 2.3vw;
    background-color: honeydew;
}

/* その他のソフト */
.anotherSoft {
    width: fit-content;
    margin: 0 auto 15vw;
    color: #333;
    letter-spacing: 0.1vw;
    font-size: 0.98vw;
    font-family: "MPLUSRounded1c-Regular";
}

.anotherSoft p {
    margin-top: 2vw;
}

.anotherSoft span {
    font-weight: 600;
    margin-right: 0.5vw;
}

/* web */

.web_flexBox {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 20vw;
    margin: 5vw 0 3vw;
    text-align: center;
    animation-delay: 0.5s;
}

.web_flexBox::after {
    content: '';
    display: block;
    width: 20vw;
}

.web_flexBox .tab_btn {
    width: 17.2vw;
    margin-bottom: auto;
    position: relative;
    cursor: pointer;
    color: #333;
    display: block;
    text-decoration: none;
}

.web_flexBox .tab_btn:nth-of-type(even){
    margin-left: 17.3vw;
}

.web_flexBox .tab_btn:hover {
    text-decoration: underline;
}

.web_flexBox .tab_btn.active .web_content .web_image {
    border: #333 0.1vw solid;
}


.web_flexBox .tab_btn.active::before {
    content: '';
    display: block;
    position: absolute;
    top: 108%;
    left: 50%;
    width: 0vw;
    height: 3.5vw;
    border-left: 0.2vw dashed #999;
}
.web_flexBox .tab_btn.active::after {
    content: '';
    display: block;
    position: absolute;
    top: 108%;
    left: 50%;
    width: 5vw;
    height: 3.5vw;
    background-color: #fcfcef;
    animation: nobi 1.7s infinite linear;
    transform-origin: bottom;
}

@keyframes nobi {
    0% {transform: scaleY(100%);}
    100% {transform: scaleY(0%);}
}

.web_content .web_image {
    width: 17.2vw;
    height: 10vw;
    border-radius: 1vw;
    overflow: hidden;
    border: #333 0.1vw dashed;
}

.web_content .web_image img {
    height: fit-content;
    transition: 0.3s;
}

.web_content:hover .web_image img {
    scale: 1.1;
}


.web_content p {
    margin-top: 1vw;
    padding: 1vw 0;
    text-align: center;
    color: #333;
    letter-spacing: 0.1vw;
    font-size: 0.98vw;
    font-family: "MPLUSRounded1c-Regular";
}

.panel_area {
    padding: 2vw 0;
}

/* タブ切り替え */
.tab_panel {
    padding: 3vw;
    border: 0.1vw solid #333;
    border-radius: 1vw;
    display:none;
}

.tab_panel.active {
    display:block;
    animation: .7s boya forwards;
}

/* webサイト概要 */
.webOverview {
    width: 100%;
    height: fit-content;
}

.webOverview h4 {
    margin: 0 0 2vw;
    letter-spacing: 0.1vw;
    font-weight: 200;
    font-size: 1.2vw;
    font-family: "MPLUSRounded1c-Regular";
}

.webOverview_flexBox {
    display: flex;
    justify-content: space-around;
    margin-bottom: 3vw;
}

.webOverview_flexBox img {
    width: 70%;
}

.webOverview_flexBox img:nth-child(2) {
    width: 24.6%;
}

.webOverview p {
    width: fit-content;
    margin-top: 1vw;
    white-space: pre-wrap;
    color: #333;
    line-height: 2.5vw;
    letter-spacing: 0.1vw;
    font-size: 0.98vw;
    font-family: "MPLUSRounded1c-Regular";
}

.webOverview .explanation {
    margin-top: 2vw;

}

.webOverview .explanation p {
    padding: 0.4vw 0;
    display: inline;
    line-height: 2.5vw;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-color: honeydew;
}

.webOverview p span {
    font-weight: 600;
}

.Poptrip_logo {
    padding: 2vw 1vw 0;
    margin-bottom: -2vw;
    width: 50%;
    background-color: #fcfcef;
    
}

.webOverview a {
    width: fit-content;
    display: block;
    font-family: "MPLUSRounded1c-Regular";
    color: #333;
    text-decoration: none;
}

.webOverview a:first-of-type {
    margin: 3vw auto;
    padding: 1vw 2vw;
    letter-spacing: 0.1vw;
    font-size: 2vw;
    border: 0.1vw solid #333;
    border-radius: 2vw;
    box-shadow: 0.3vw 0.3vw 0 #333;
    background-color: #ffe3fe;
    transition: 0.3s;
}

.webOverview a:first-of-type:hover {
    scale: 1.1;
    transition: 0.3s;
}

.webOverview a:last-of-type {
    margin: 0 1vw 0 auto;
    font-size: 1.5vw;
}

.webOverview a:last-of-type:hover {
    text-decoration: underline;
}


/* Graphic */
.graphic_flexBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 6vw auto;
    gap: 6vw;
    text-align: center;
}

/* 左に寄せる */
.graphic_flexBox::after {
    content: '';
    display: block;
    width: 18vw;
}

.graphic_flexBox a {
    color: #333;
    display: block;
    text-decoration: none;
}

.graphic_content {
    transition: 0.3s;
}

.graphic_content:hover {
    transition: 0.3s;
    scale: 1.1;
}

.graphic_content .graphic_image {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3vw;
    overflow: hidden;
    transition: 0.3s;
}

.graphic_content:hover .graphic_image {
    border-radius: 0vw;
    transition: 0.3s;

}

/* ポスター */
.graphic_content .poster {
    width: 18vw;
    height: 25vw;
}

/* バナー */
.graphic_content .banner {
    width: 18vw;
    height: 15vw;
}
.graphic_content .graphic_image img {
    object-fit: cover;
    transition: 0.3s;
}


.graphic_content p {
    margin-top: 1vw;
    color: #333;
    letter-spacing: 0.1vw;
    font-size: 1.2vw;
    font-family: "MPLUSRounded1c-Regular";
}

.waveLine + p {
    margin: 9vw 0;
    text-align: center;
    color: #333;
    letter-spacing: 0.1vw;
    font-size: 1.5vw;
    font-family: "MPLUSRounded1c-Regular";
}

/* フッター */
footer {
    margin: 0 auto 5vw;
}

footer p {
    color: #333;
    text-align: center;
    letter-spacing: 0.1vw;
    font-size: 1.2vw;
    font-family: "MPLUSRounded1c-Regular";
}