@charset "UTF-8";

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

/* 英語の装飾文字 */
@font-face {
    font-family: Gloock-Regular;
    src: url(../font/Gloock-Regular.ttf);
}

/* 韓国語の文字 */
@font-face {
    font-family: NotoSerifKR-Regular;
    src: url(../font/NotoSerifKR-Regular.ttf);
}

/* 文中に使う英語 */
@font-face {
    font-family: FiraSans-Medium;
    src: url(../font/FiraSans-Medium.ttf);
}

/* 日本語 */
@font-face {
    font-family: IBMPlexSansJP-Regular;
    src: url(../font/IBMPlexSansJP-Regular.ttf);
}

html {
    scrollbar-gutter: stable;
}

body {
    font-family: IBMPlexSansJP-Regular;
    background-color: #F6FAF5;
    font-size: 1.7vw;
    color: #2C2319;
}

/* ヘッダー */
/* ハンバーガーメニュー */
nav.NavMenu{
    display: none;
}

.Toggle {
    display: none;
}
/* ハンバーガーメニュー終了 */

header {
    position: relative;
    width: 100%;
    height: 50vw;
    margin-bottom: 10vw;
    overflow: hidden;
}

/* メインビジュアルの上下の装飾文字 */
.text-decoration-1 {
    position: absolute;
    top: 0;
    left: -4%;
    font-size: 12vw;
    font-family: Gloock-Regular;
    letter-spacing: 0.3em;
    transform: rotate(180deg);
    color: rgba(171, 186, 169, 0.4);
    z-index: 2;
}

.text-decoration-1 p {
    line-height: 0.7;
    margin: 0;
}

.text-decoration-2 {
    position: absolute;
    bottom: 0;
    left: -1.5%;
    font-size: 12vw;
    font-family: Gloock-Regular;
    letter-spacing: 0.3em;
    z-index: 2;
    color: rgba(171, 186, 169, 0.4);
}

.text-decoration-2 p {
    line-height: 0.7;
    margin: 0;
}
/* メインビジュアルの上下の装飾文字 終了 */

/* グローバルナビゲーション */
.header-flex {
    position: fixed;
    top: 0;
    left: 10%;
    display: flex;
    align-items: center;
    width: 80%;
    padding: 1%;
    border: 1px;
    border-radius: 1vw;
    background-color: rgba(62, 69, 62, 0.7);
    z-index: 6;
}

.header-flex h1 {
    width: 30%;
}

.header-flex h1 a img {
    display: block;
    width: 100%;
}

.header-flex nav {
    width: 60%;
    margin-left: auto;
}

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

.header-flex nav ul li {
    width: calc( 100% / 3 );
}

.header-flex nav ul li a {
    position: relative;
    display: block;
    line-height: 2;
    text-align: center;
    text-decoration: none;
    font-size: 2.2vw;
    font-family: FiraSans-Medium;
    letter-spacing: 0.1em;
    color: #fff;
}

.header-flex nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background-color: #fff;

    transform: scaleX(0);
    transform-origin: left;
    transition: 0.3s;
}

/* グローバルナビゲーション 終了 */

/* メインビジュアル */
.header-title {
    position: absolute;
    top: 45%;
    width: 100%;
    z-index: 5;
}

.header-title h2 {
    font-size: 6vw;
    text-align: center;
    text-shadow: 1px 1px 8px #033;
    letter-spacing: 0.1em;
    font-family: FiraSans-Medium;
    color: #fff;
}

.main-visual {
    position: absolute;
    top: 6%;
    right: 0;
    width: 100%;
    z-index: 1;
}

.main-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(246, 250, 245, 1) 0%,
        rgba(246, 250, 245, 0.8) 8%,
        rgba(246, 250, 245, 0) 25%,
        rgba(246, 250, 245, 0) 75%,
        rgba(246, 250, 245, 0.8) 92%,
        rgba(246, 250, 245, 1) 100%
    );
}

.main-visual img {
    width: 100%;
    vertical-align: bottom;
}
/* メインビジュアル 終了 */

/* 韓国語 */
.text-KR {
    position: absolute;
    bottom: 6%;
    width: 100%;
    z-index: 3;
}

.text-KR p {
    text-align: center;
    font-family: NotoSerifKR-Regular;
    color: #2C2319;
}
/* 韓国語 終了 */
/* ヘッダー 終了 */

/* メイン */
main {
    width: 78%;
    padding: 1%;
    margin-left: auto;
    margin-right: auto;
}

.about-section,.works-section {
    margin-bottom: 10vw;
}
/* メイン 終了 */

/* アバウト */
.relative-box {
    position: relative;
    top: 0;
    left: 0;
    height: 160vw;
}

.h3-background {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10vw;
    letter-spacing: 0.3em;
    font-family: Gloock-Regular;
    /* ① 背景にグラデーションを設定 */
    background: linear-gradient(90deg, #A5C9C1, #F6FAF5);
    
    /* ② 背景を文字の形にくり抜く（プレフィックス付きも併記） */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* ③ 元の文字色を透明にして、背景のグラデーションを透けさせる */
    -webkit-text-fill-color: transparent;
    color: transparent; 
    z-index: 0;
}

.about-section h3 {
    position: absolute;
    top: 1em;
    font-size: 4vw;
    z-index: 1;
    color: #033;
}

.Profile-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.profile_picture {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 30%;
}

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

.Profile-box table {
    width: 100%;
    margin-bottom: 6%;
    border-collapse: collapse; 
    line-height: 3;
}

.Profile-box table caption {
    font-size: 3vw;
    line-height: 2;
    letter-spacing: 0.1em;
    font-family: FiraSans-Medium;
    color: #033;
}

.Profile-box table tr {
    border-bottom: 1px solid #A5C9C1;
}

.Profile-box table tr th {
    font-weight: normal;
    text-align: left;
    color: #033;
}

.Profile-box table tr th span {
    font-size: 1.2vw;
}

.self-introduction-box {
    margin-bottom: 4%;
}

.self-introduction-box p {
    line-height: 1.7;
    text-indent: 1em;
    text-align: justify;
    letter-spacing: 0.1em;
    white-space: pre-wrap;
}

.self-introduction-box p span::before {
    content: "　";
}

.skill-box h4 {
    font-size: 3vw;
    line-height: 2;
    letter-spacing: 0.1em;
    font-family: FiraSans-Medium;
    color: #033;
}

.skill-flex {
    display: flex;
}

.skill-flex .skill-card {
    width: calc( 94% / 4 );
    margin-bottom: 6%;
}

.skill-flex .skill-card:nth-of-type(1),
.skill-flex .skill-card:nth-of-type(2),
.skill-flex .skill-card:nth-of-type(3) {
    margin-right: 2%;
}

.skill-flex .skill-card div {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}

.skill-flex .skill-card div img {
    width: 100%;
}

.skill-flex .skill-card h5 {
    font-size: 1.4vw;
    text-align: center;
    margin-bottom: 2%;
    letter-spacing: 0.1em;
    color: #033;
}

.skill-flex .skill-card p {
    letter-spacing: 0.1em;
}

.interests-box p {
    text-indent: 1em;
    line-height: 1.7;
} 

/* アバウト 終了 */

/* ワークス */
.attention {
    text-indent: 1em;
    margin-top: 2%;
    margin-bottom: 2%;
    line-height: 1.7;
}

.attention::before {
    content: "※";
}

.attention span::before {
    content: "＞";
    font-size: 1vw;
    padding: 0.3%;
    border: 1px;
    border-radius: 2px;
    color: #fff;
    background-color: #E83929;
}


.works-flex {
    display: flex;
    margin-bottom: 2%;
}

.works-card {
    width: calc( 95% / 3 );
    border: 2px solid #fff;
    border-radius: 1vw;
    box-shadow: 1px 1px 15px #fff;
    transition: 0.3s;
}

.works-card:nth-of-type(1),
.works-card:nth-of-type(2) {
    margin-right: 2%;
}

.works-card a {
    text-decoration: none;
}

.works-card a div {
    width: 92%;
    margin: 4%;
}

.works-card a div img {
    width: 100%;
    height: 12vw;
    vertical-align: bottom;
    object-fit: contain;
    transition: 0.3s;
}

.works-card a p {
    text-align: center;
    margin-bottom: 4%;
    color: #2C2319;
    transition: 0.3s;
}

.h3-box {
    position: relative;
    width: 100%;
    height: 12vw;
}

.h3-box p {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10vw;
    letter-spacing: 0.3em;
    font-family: Gloock-Regular;
    background: linear-gradient(90deg, #A5C9C1, #F6FAF5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
    z-index: 0;
}

.h3-box h3 {
    position: absolute;
    top: 1em;
    font-size: 4vw;
    z-index: 1;
    color: #033;
}

.web-site-box,.illustrator-box {
    margin-bottom: 10%;
}

.works-section h4 {
    font-size: 3vw;
    line-height: 2;
    letter-spacing: 0.1em;
    font-family: FiraSans-Medium;
    color: #033;
}

/* モーダル */
.wrap {
    width: calc( 95% / 3 );
    transition: 0.3s;
}

.wrap:first-of-type,
.wrap:nth-of-type(2) {
    margin-right: 2%;
}

.button-open {
    display: block;
    margin: 0 auto;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 1vw;
    box-shadow: 1px 1px 15px #fff;
    cursor: pointer;
    background-color: #F6FAF5;
    transition: 0.3s;
}

.button-open div {
    width: 92%;
    margin: 4%;
}

.button-open div img {
    width: 100%;
    height: 12vw;
    vertical-align: bottom;
    object-fit: contain;
    transition: 0.3s;
}

.button-open p {
    text-align: center;
    margin-bottom: 4%;
    color: #2C2319;
    transition: 0.3s;
}

/* モーダルウィンドウ */
.modal-window {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 80%;          
    height: 130vw;        
    background-color: #F6FAF5;
    border-radius: 1vw;
    z-index: 11;
    padding: 16%;
}

/* 閉じるボタン */
.button-close {
  position: absolute;
  top: 4%;
  right: 9%;
  width: fit-content;
  border: none;
  background-color: #F6FAF5;
  color: #2C2319;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5%;
  font-family: FiraSans-Medium; 
}

.button-close p::after {
    content: "✕";
    width: 2%;
    height: 1em;
    margin-left: 5%;
}

.modal-window {
    display: none;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 80%;          
    height: 130vw;        
    background-color: #F6FAF5;
    border-radius: 1vw;
    z-index: 11;
    padding: 8%;
}

/* モーダルの中身 */
.modal-window-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110vw;
    flex-direction: column;
}

.modal-window-img {
    width: 100%;
    margin-right: 0%;
}

.modal-window-img img {
    width: 100%;
    height: 50vw;
    margin: 0%;
    object-fit: contain;
    vertical-align: bottom;
}

.modal-window-definition {
    width: 100%;
}

.modal-window-definition table {
    margin-top: 4%;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.modal-window-definition table caption {
    margin-bottom: 0.5em;
    font-size: 3vw;
    line-height: 2;
    font-family: FiraSans-Medium;
    color: #033;
}

.modal-window-definition table tr {
    font-size: 1.7vw;
    line-height: 1.7;
}

.modal-window-definition table tr th {
    width: 20%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    color: #033;
    border-bottom: 1px solid #033;
}

.modal-window-definition table tr td {
    width: 75%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    border-bottom: 1px solid #033;
}

.pre-wrap {
    white-space: pre-wrap;
}

.modal-window-definition-concept {
    list-style-type: none;
}

.modal-window-definition-concept li {
    margin-bottom: 0.5em;
}

.modal-window-definition-concept li::before {
    content: "✔";
    color: #033;
}

.tab_box {
    width: 100%;
    display: flex;
    flex-direction: column;
 }
 
.btn_area {
    display: flex;
    margin-right: 0%;
}


.tab_btn {
    display: flex;
    align-items: center;
    justify-self: center;
    width: 4em;
    height: 4em;
    border: 1px solid #A5C9C1;
    border-radius: 100px;
    margin-bottom: 1vw;
    margin-right: 4%;
    cursor: pointer;
    color: #033;
}

.tab_btn p {
    width: 100%;
    text-align: center;
}

.tab_btn.active {
    background-color: #A5C9C1;
}

.tab_panel {
    display:none;
}


.tab_panel.active {
    display:block;
}

.max-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110vw;
}

.max-box img {
    width: 100%;
    height: 70vw;
    object-fit: contain;
    vertical-align: bottom;
}
/* モーダルの中身終了 */

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* 表示領域外へはスクロールさせない */
.no_scroll {
    overflow: hidden;
}
/* アバウト終了 */

/* コンタクト */
.contact-annotation {
    text-align: center;
    line-height: 1.7;
    margin-bottom: 3%;
}

/* 全体のレイアウト */
.email-container {
    position: relative; /* メッセージの位置基準 */
    display: flex;
    align-items: center;
    width: 50%;
    padding: 1%;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    font-size: 2vw;
    border-radius: 1px;
    border-radius: 10vw;
    background-color: #fff;
}

.email-container button {
    font-size: 1.2vw;
    width: 20%;
    border: 1px;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 5vw;
    color: #fff;
    margin-left: auto;
    background-color: #033;
}

.email-container #email {
    width: 80%;
    text-align: center;
}

/* メッセージの初期スタイル（透明で隠しておく） */
.toast {
    position: absolute;
    top: -3vw; /* 画面の横幅を基準にした位置（スマホとPCでズレやすいので注意） */
    left: 15vw;
    background-color: #033;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(5px); /* 出現時に少し上に動かすアニメーション用 */
}

/* 表示された時のスタイル */
.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* コンタクト終了 */

/* フッター */
footer {
    background-color: #A5C9C1;
}

footer p {
    text-align: center;
    line-height: 3;
    font-size: 1.4vw;
    padding-top: 1%;
    padding-bottom: 1%;
    color: #033;
}
/* フッター終了 */