@charset "UTF-8";

/* 共通設定 */
:root {
    --main-color: #FAFAFF;
    --blu-color: #375d97;
    --org-color: #FB6542;
    --yel-color: #FFBB00;
    --grn-color: #3F681C;
}

html {
    font-size: 100%;
    max-width: 1920px;
    min-width: 375px;
    margin: auto;
    scroll-behavior: smooth;
}

body {
    font-family: filmotype-keynote, helvetica-lt-pro, zen-kaku-gothic-new, zen-maru-gothic, all-round-gothic, sans-serif;
    color: black;
    background-color: #FAFAFF;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol,
li {
    list-style-type: none;
}


/* コンテンツ制御 */
.wrapper {
    max-width: 768px;
    width: 90%;
    margin: 0 auto;
}

/* フォント制御 */
.font_fil,
h1::before {
    font-family: filmotype-keynote, sans-serif;
}

.font_hel,
.mainvisual p::after {
    font-family: helvetica-lt-pro, sans-serif;
    font-weight: 300;
}

.font_kaku {
    font-family: zen-kaku-gothic-new, sans-serif;
}

.font_maru {
    font-family: zen-maru-gothic, sans-serif;
    font-weight: 100;
    font-size: clamp(1rem, 0.757rem + 1.036vw, 2rem);
    letter-spacing: 0.5em;
    line-height: 1.7;
    writing-mode: vertical-rl;
}

.font_rd {
    text-transform: uppercase;
    font-family: all-round-gothic, sans-serif;
    font-weight: 200;
    font-style: italic;
    border-bottom: 1px solid rgb(0, 0, 0, 0.5);
    width: fit-content;
}

/* ヘッダー */
.header_bar {
    background-color: var(--org-color);
    width: 100%;
    max-width: 1920px;
    height: clamp(3.75rem, 2.385rem + 5.825vw, 9.375rem);
    padding: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 999;
}

h1 {
    font-size: clamp(0.75rem, 0.356rem + 1.683vw, 2.375rem);
    color: var(--main-color);
    position: relative;
    top: clamp(0.75rem, 0.856rem + -0.453vw, 0.313rem);
    right: 20px;
}

h1::before {
    display: inline-block;
    content: "Takayuki";
    font-size: clamp(2.625rem, 1.745rem + 3.754vw, 6.25rem);
    transform: rotate(-9deg);
    position: relative;
    top: -10px;
    right: -35px;
}

/* ハンバーガーボタン */
.ham_btn {
    width: clamp(2.813rem, 1.978rem + 3.56vw, 6.25rem);
    height: clamp(2.813rem, 1.978rem + 3.56vw, 6.25rem);
    background-color: var(--yel-color);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ham_btn span,
.ham_btn span::before,
.ham_btn span::after {
    width: clamp(1.313rem, 0.903rem + 1.748vw, 3rem);
    height: 3px;
    background-color: var(--main-color);
    border-radius: 30px;
    display: block;
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
}

.ham_btn span::before {
    top: 9px;
}

.ham_btn span::after {
    top: -9px;
}

.ham_btn.open span {
    background-color: transparent;
}

.ham_btn.open span::before {
    top: 0;
    transform: rotate(45deg);
}

.ham_btn.open span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ハンバーガーメニュー */
.ham_menu {
    width: 100vw;
    max-width: 768px;
    height: 100vh;
    position: fixed;
    transform: translateX(200%);
    transition: 0.3s ease-in-out;
    color: var(--main-color);
    background-color: var(--yel-color);
    display: flex;
    flex-direction: column;
    z-index: 998;
    padding-top: 20%;
}

.ham_menu.open {
    transform: translateX(0%);
}

.ham_title {
    text-align: center;
    font-size: clamp(5rem, 1.413rem + 15.306vw, 8.75rem);
    margin-bottom: 5%;
}

.ham_menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10%;
}

.ham_li_menu a {
    background-color: var(--org-color);
}

.ham_li_about a {
    background-color: var(--grn-color);
}

.ham_li_works a {
    background-color: var(--blu-color);
}

.ham_li_menu a::before {
    content: "ホーム";
}

.ham_li_about a::before {
    content: "わたしについて";
}

.ham_li_works a::before {
    content: "作品集";
}

.ham_li_menu a::before,
.ham_list li:nth-of-type(2) ::before,
.ham_list li:nth-of-type(3) ::before {
    display: block;
    font-size: clamp(0.875rem, 0.516rem + 1.531vw, 1.25rem);
}

.ham_list a {
    display: inline-block;
    width: clamp(10rem, 0.074rem + 42.353vw, 21.25rem);
    height: clamp(3.125rem, 1.331rem + 7.653vw, 5rem);
    border-radius: clamp(1.875rem, 0.000rem + 8vw, 4rem);
    font-size: clamp(0.75rem, -0.027rem + 3.316vw, 1.563rem);
    text-align: center;
    padding-top: clamp(0.375rem, 0.540rem + -0.706vw, 0.188rem);
    margin: 10% auto;
}

.ham_sns {
    display: flex;
    height: fit-content;
    gap: 30%;
}

.ham_sns a img {
    width: clamp(2.5rem, 0.108rem + 10.204vw, 5rem);
}

.ham_robot img:nth-child(1) {
    width: clamp(6.25rem, 0.018rem + 26.588vw, 13.313rem);
    height: clamp(3.25rem, 0.051rem + 13.647vw, 6.875rem);
    right: clamp(6.25rem, -0.368rem + 28.235vw, 13.75rem);
    bottom: clamp(10.125rem, 8.029rem + 8.941vw, 12.5rem);
    margin-bottom: 40%;
    animation: welcome 2s infinite;
}

.ham_robot img:nth-child(2) {
    width: clamp(5.625rem, 0.000rem + 24vw, 12rem);
    height: clamp(6.813rem, 0.029rem + 28.941vw, 14.5rem);
    object-fit: cover;
    animation: robot 2s linear infinite;
}

@keyframes welcome {

    0%,
    100% {
        transform: translate(5px, 5px);
        transform: rotate(10deg);
    }

    50% {
        transform: translate(-5px, -5px);
        transform: rotate(-10deg);
    }
}

@keyframes robot {

    0%,
    100% {
        transform: translate(0, 5px);
    }

    50% {
        transform: translate(-0, -5px);
    }
}

.ham_btm {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 5%;
}

/* フッター */
footer {
    height: clamp(9.375rem, 7.100rem + 9.709vw, 18.75rem);
    background-color: var(--blu-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(0.938rem, 0.862rem + 0.324vw, 1.25rem) 0;
}

footer h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--main-color);
    font-weight: 100;
    font-size: clamp(0.5rem, 0.333rem + 0.712vw, 1.188rem);
}

footer h2::before {
    content: "Contact";
    font-family: "Helvetica";
    font-weight: 300;
    font-size: clamp(1.25rem, 0.825rem + 1.812vw, 3rem);
}

.mail_box {
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(18.75rem, 13.744rem + 21.359vw, 39.375rem);
    height: clamp(1.875rem, 1.374rem + 2.136vw, 3.938rem);
    border-radius: 50px;
    margin: auto;
    color: var(--blu-color);
    gap: 5%;
    font-size: clamp(0.938rem, 0.695rem + 1.036vw, 1.938rem);
}

.link_btn_footer {
    width: clamp(0.938rem, 0.710rem + 0.971vw, 1.875rem);
    height: clamp(0.938rem, 0.710rem + 0.971vw, 1.875rem);
    stroke-width: 3;
}

.fot_sns {
    display: flex;
    width: 50%;
    gap: 8%;
}

.fot_sns a img {
    width: clamp(1.25rem, 0.795rem + 1.942vw, 3.125rem);
    display: block;
}

.copy_right {
    text-transform: uppercase;
    color: var(--main-color);
    font-size: clamp(0.5rem, 0.333rem + 0.712vw, 1.188rem);
    font-weight: lighter;
}

.copy_right span {
    text-transform: lowercase;
}

.footer_btm {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 3%;
}

/* トップページ */
/* メインビジュアル */
video {
    width: 100%;
}

.mainvisual {
    position: relative;
    height: fit-content;
    overflow: hidden;
}

.mainvisual p {
    font-size: clamp(6.25rem, 5.567rem + 2.913vw, 9.063rem);
    transform: rotate(-9deg);
    color: var(--main-color);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    
}

.mainvisual p::after {
    font-size: clamp(1.75rem, 1.538rem + 0.906vw, 2.625rem);
    transform: rotate(9deg);
    content: "portfolio";
    position: relative;
    top: -40px;
    left: clamp(5rem, 2.608rem + 10.204vw, 7.5rem);

}

.visual_scroll_icon span {
    background-color: var(--main-color);
    display: block;
    width: clamp(6.25rem, -11.641rem + 76.336vw, 25rem);
    height: 1px;
    transform: rotate(90deg);
    position: absolute;
}

.visual_scroll {
    color: var(--main-color);
}

.visual_scroll_icon {
    display: flex;
    justify-content: center;
    position: relative;
    bottom: clamp(5rem, -5.138rem + 43.257vw, 15.625rem);
}

.visual_scroll_icon,
.scroll_sp_img_icon span {
    animation: scroll 3s infinite;
}

@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, 50px);
    }

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

/* about */
.main_text {
    font-size: clamp(2.063rem, 1.805rem + 1.1vw, 3.125rem);
}

.aboutme_text {
    width: 100%;
    display: flex;
    justify-content: center;
}

.about_img {
    display: flex;
}

.about_img :nth-child(1) {
    width: clamp(7.875rem, 4.841rem + 12.945vw, 20.375rem);
}

.about_img :nth-child(2) {
    width: clamp(3.25rem, -5.592rem + 18.421vw, 9.375rem);
    object-fit: cover;
    position: absolute;
    transform: rotate(-20deg);
}

.about_text {
    width: clamp(15.625rem, 12.288rem + 14.239vw, 29.375rem);
}

.about_text p {
    font-size: clamp(0.688rem, 0.642rem + 0.194vw, 0.875rem);
    line-height: 2;
}

.about_name p:nth-child(1) {
    font-size: clamp(1.125rem, 1.004rem + 0.518vw, 1.625rem);
    letter-spacing: 0.1875rem;
}

.about_name p:nth-child(2) {
    font-size: clamp(0.625rem, 0.382rem + 1.036vw, 1.625rem);
}

.about_name {
    display: flex;
    align-items: baseline;
    width: clamp(15.625rem, 12.288rem + 14.239vw, 29.375rem);
    justify-content: center;
    gap: 10%;
}

.about_more_btn {
    width: clamp(4.375rem, 3.617rem + 3.236vw, 7.5rem);
}

.about_view_text {
    color: var(--blu-color);
    font-size: clamp(0.75rem, 0.568rem + 0.777vw, 1.5rem);
    width: 100%;
}

.about_view,
.work_view_btn {
    gap: 5%;
    display: flex;
    align-items: center;
    margin-bottom: 5%;
}

.about_view {
    margin-left: auto;
}

.about {
    width: clamp(23.438rem, 19.266rem + 17.799vw, 40.625rem);
    height: clamp(50rem, 32.063rem + 76.531vw, 68.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin: auto;
}

/* works */
.works {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 50px;
}

.works h2 {
    margin: 15% 0 10% 0;
}

.web_bg_img p,
.gf_bg_img p {
    font-size: clamp(1.5rem, 1.348rem + 0.647vw, 2.125rem);
    text-transform: uppercase;
}

.web_bg_img p {
    color: var(--org-color);
    text-shadow: 0 0 5px var(--org-color);
}

.gf_bg_img p {
    color: var(--yel-color);
    text-shadow: 0 0 5px var(--yel-color);
}

.web_bg_img,
.gf_bg_img {
    height: clamp(6.25rem, 5.492rem + 3.236vw, 9.375rem);
    background-position: center center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.web_bg_img {
    background-image: url(../img/bar_briend.webp);
}

.gf_bg_img {
    background-image: url(../img/gf_main_briend.webp);
}

.work_card {
    width: 90%;
    height: fit-content;
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    margin: 0 auto 5%;
}

.work_card a {
    width: fit-content;
}

.work_card img {
    object-fit: cover;
}

.work_tag,
.web_work_list dd {
    font-size: clamp(0.625rem, 0.446rem + 0.763vw, 0.813rem);
    line-height: 2.5;
}



.work_tag,
.work_view_btn p {
    color: var(--blu-color);
}

.work_view_btn p {
    font-size: clamp(0.75rem, 0.511rem + 1.018vw, 1rem);
    width: 100px;
}

.web_work_list dt {
    font-size: clamp(0.938rem, 0.639rem + 1.272vw, 1.25rem);
}

.work_card_icon {
    width: clamp(1.875rem, 0.682rem + 5.089vw, 3.125rem);
}

.work_card img,
.web_work_list dt,
.web_work_list dd {
    padding-bottom: 10px;
}

.gf_grid img {
    aspect-ratio: 4/3;
}


/* アバウトページ */
/* about */

.profile img {
    width: clamp(18.75rem, 14.199rem + 19.417vw, 37.5rem);
    border-radius: 20px;
}

.profile h2,
.profile_about h2,
.profile_strange h2 {
    margin: 30px;
}

.pf_name p:nth-child(1) {
    font-size: clamp(0.875rem, 0.663rem + 0.906vw, 1.75rem);
}

.pf_name p:nth-child(2) {
    font-size: clamp(0.625rem, 0.428rem + 0.841vw, 1.438rem);
}

.pf_name {
    display: flex;
    align-items: baseline;
    gap: 5%;
    margin-bottom: 20px;
}

.pf_desc {
    font-size: clamp(0.688rem, 0.581rem + 0.453vw, 1.125rem);
    line-height: 1.7;
}

.about_desc_text {
    padding: 0 10%;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(6.25rem, 5.492rem + 3.236vw, 9.375rem);
}

/* skills */
.profile_under {
    padding: 0 10%;
}


.profile_about,
.profile_strange {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile_about img {
    height: clamp(2.5rem, 1.590rem + 3.883vw, 6.25rem);
}

.resize_icon {
    margin-right: clamp(0.625rem, 0.397rem + 0.971vw, 1.563rem);
    ;
}

.skills_title p:nth-child(1) {
    font-size: clamp(0.625rem, 0.397rem + 0.971vw, 1.563rem);
    font-weight: 400;
}

.skills_title p:nth-child(2) {
    font-size: clamp(0.5rem, 0.394rem + 0.453vw, 0.938rem);
    color: var(--blu-color);
}

.skills_title {
    display: flex;
    align-items: baseline;
    gap: 5%;
}

.skills_list dd p {
    font-size: clamp(0.563rem, 0.396rem + 0.712vw, 1.25rem);
    line-height: 1.7;
}

.skills_list {
    display: flex;
    align-items: center;
    gap: 3%;
    width: 100%;
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
    padding-bottom: 3%;
    margin-bottom: 10%;
}

/* strange */
.profile_strange dt {
    width: clamp(5rem, 3.331rem + 7.12vw, 11.875rem);
    height: clamp(5rem, 3.331rem + 7.12vw, 11.875rem);
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ci_yel {
    background-color: var(--yel-color);
}

.ci_grn {
    background-color: var(--grn-color);
}

.ci_org {
    background-color: var(--org-color);
}

.ci_blu {
    background-color: var(--blu-color);
}

.profile_strange dt p {
    color: var(--main-color);
}

.profile_strange dt p:nth-child(1) {
    font-size: clamp(0.5rem, 0.288rem + 0.906vw, 1.375rem);
}

.profile_strange dt p:nth-child(2) {
    font-size: clamp(1rem, 0.666rem + 1.424vw, 2.375rem);
}

.profile_strange dd p {
    font-size: clamp(0.563rem, 0.396rem + 0.712vw, 1.25rem);
    line-height: 1.7;
}

.profile_strange dd {
    width: 65%;
}

.profile_strange dl {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5%;
    width: 100%;
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
    padding-bottom: 3%;
    margin-bottom: 10%;
}

.profile_strange dl:nth-child(3),
.profile_strange dl:nth-child(5) {
    flex-direction: row-reverse;
}

.profile_strange {
    margin-bottom: 50px;
}

/* ワークスページ */
/* works */
.works h2 {
    margin-bottom: 0;
}

.works_title p {
    font-size: clamp(0.875rem, 0.556rem + 1.359vw, 2.188rem);
    line-height: 2;
}

.works_title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(15.625rem, 11.833rem + 16.181vw, 31.25rem);
    height: clamp(4.75rem, 3.096rem + 7.055vw, 11.563rem);
    transition: opacity 0.3s, display 0.3s allow-discrete;
    opacity: 1;
}

.wrks_top {
    margin-top: 15%;
    margin-bottom: 5%;
    height: clamp(10rem, 6.359rem + 15.534vw, 25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: auto;
    padding-left: 5%;
}

.web_grid.web_remove,
.gf_grid.gf_remove {
    display: none;
    opacity: 0;
    transition: opacity 0.3s, display 0.3s allow-discrete;
}

.works,
.web_grid,
.gf_grid {
    transition: opacity 0.3s, display 0.3s allow-discrete;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

.strong_text {
    border-bottom: 1px solid rgb(55, 93, 151, 0.3);
    width: fit-content;
    font-weight: bold;
    color: var(--blu-color);
    transition: opacity 0.3s, display 0.3s allow-discrete;
    opacity: 1;
}


/* 各ワークスページ */
/* メインビジュアル */
.works_top_visual {
    display: flex;
    justify-content: center;
    padding-top: clamp(3.75rem, 2.385rem + 5.825vw, 9.375rem);
    margin-bottom: 5%;
}

.works_top_visual img,
.works_under_img,
.works_center_visual_gf img {
    width: 90%;
}

/* 説明文 */
.work_page_tag,
.works_top_link p {
    color: var(--blu-color);
}

.work_page_tag {
    font-size: clamp(0.75rem, 0.507rem + 1.036vw, 1.75rem);
}

.top_work_text dd,
.works_top_link p {
    font-size: clamp(0.688rem, 0.581rem + 0.453vw, 1.125rem);
    line-height: 2;
    width: 100%;
}

.works_top_link p {
    white-space: nowrap;
}

.top_work_text dt {
    font-size: clamp(0.875rem, 0.663rem + 0.906vw, 1.75rem);
    margin: 2% 0;
}

.works_weblink {
    width: clamp(1.875rem, 1.268rem + 2.589vw, 4.375rem);
    stroke-width: 1;
}

.works_top_link {
    display: flex;
    align-items: center;
    gap: 5%;
    margin: 5% 0;
    width: fit-content;
}

.works_top_desc {
    width: 90%;
    margin: 0 auto;
}

/* webdesign_センターのイメージ画像 */
.works_center_visual {
    width: 90%;
    height: clamp(6.25rem, 4.733rem + 6.472vw, 12.5rem);
    object-fit: cover;
    margin: 0 auto;
}

/* 中央の説明文 */
.works_center_desc dt {
    font-size: clamp(0.875rem, 0.663rem + 0.906vw, 1.75rem);
    font-weight: 500;
}

.works_center_desc dd {
    font-size: clamp(0.688rem, 0.581rem + 0.453vw, 1.125rem);
}

.work_tool div p:first-child {
    font-weight: 500;
}

.work_concept dd {
    line-height: 2;
}

.work_time div {
    display: flex;
    justify-content: space-between;
}

.work_tool img {
    width: clamp(1.563rem, 1.335rem + 0.971vw, 2.5rem);
}

.work_tool dd {
    display: flex;
    align-items: center;
    gap: 4%;
}

.works_center_desc dl {
    padding-bottom: 5%;
    margin-bottom: 5%;
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}

.works_center_desc {
    width: 90%;
    margin: 0 auto;
}

.work_tool dd,
.works_center_desc dt {
    margin-bottom: 4%;
}

.work_time_text {
    margin-bottom: 3%;
}


/* ページスクロールビュ */
.scrool_sp {
    width: clamp(12.5rem, 11.742rem + 3.236vw, 15.625rem);
    height: clamp(23.75rem, 22.309rem + 6.149vw, 29.688rem);
    overflow: auto;
    scrollbar-color: var(--blu-color);
    scrollbar-width: thin;
    border-radius: 20px;
    margin-left: 38px;
}

.sp_card1 {
    border: clamp(0.313rem, 0.237rem + 0.324vw, 0.625rem) solid var(--yel-color);
}

.sp_card2 {
    border: clamp(0.313rem, 0.237rem + 0.324vw, 0.625rem) solid var(--grn-color);
}

.sp_card3 {
    border: clamp(0.313rem, 0.237rem + 0.324vw, 0.625rem) solid var(--org-color);
}

.sp_card4 {
    border: clamp(0.313rem, 0.237rem + 0.324vw, 0.625rem) solid var(--blu-color);
}

.works_sp_preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    margin: 5% 0;
    width: 100%;
}

.scroll_sp_img_icon span {
    background-color: rgb(0, 0, 0);
    display: block;
    width: 1px;
    height: clamp(15.625rem, 14.715rem + 3.883vw, 19.375rem);
    margin-top: 50%;
    position: relative;
}

.scroll_sp_img_icon span::after {
    display: block;
    content: "";
    background-color: rgb(0, 0, 0);
    display: block;
    width: 10px;
    height: 1px;
    position: absolute;
    bottom: 3px;
    left: -1px;
    transform: rotate(-45deg);
}

.works_under_img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10% 0;
}

/* backとnext */
.move_arrow {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1300px;
    margin: 5% auto;
}

.move_arrow p {
    color: var(--blu-color);
    font-size: clamp(0.75rem, 0.174rem + 2.46vw, 3.125rem);
}

.move_arrow span {
    display: block;
    width: clamp(1.688rem, 0.413rem + 5.437vw, 6.938rem);
    height: 1px;
    background-color: var(--blu-color);
    position: relative;
}

.arrow_back::before {
    content: "";
    position: absolute;
    width: clamp(0.438rem, 0.316rem + 0.518vw, 0.938rem);
    height: 1px;
    background-color: var(--blu-color);
    transform: rotate(-30deg);
    transform-origin: left;

}

.arrow_next span::before {
    content: "";
    position: absolute;
    width: clamp(0.438rem, 0.316rem + 0.518vw, 0.938rem);
    height: 1px;
    background-color: var(--blu-color);
    transform: rotate(30deg);
    transform-origin: right;
    right: 0;
}

.arrow_first,
.arrow_last {
    visibility: hidden;
}

/* ワークスグラフィック専用 */

.works_center_visual_gf {
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}

/* ホバー */
a {
    transition: 0.2s ease-in-out;
}

a:hover {
    transition: 0.3s ease-in-out;
    transform: scale(1.05);
    opacity: 0.5;
}


.ham_list a:hover {
    opacity: 1;
}

.header_bar a {
    transition: none;
}

.header_bar a:hover {
    transform: none;
    opacity: 1;
}

.arrow_back:hover {
    transform: translateX(-10px);
}

.arrow_next:hover {
    transform: translateX(10px);
}

/* ページスクロールアニメーション */
.fade_in {
    opacity: 0;
    transition: 1s ease-in-out;
    filter: blur(20px);
    transform: translateY(50px);
}

.fade_in.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* トップへ戻る */
.btn_top {
    position: fixed;
    bottom: 3vh;
    right: 0;
    width: clamp(5rem, 4.697rem + 1.294vw, 6.25rem);
    max-width: 100px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2;
}

.btn_top.show {
    opacity: 1;
    visibility: visible;
}




/* メディアクエリ */
@media (min-width:768px) {
    main {
        max-width: 1300px;
        margin: 0 auto;
    }

    /* ハンバーガーメニュー */
    .ham_title {
        font-size: clamp(2.5rem, 0.000rem + 5.208vw, 6.25rem);
    }

    .ham_menu {
        width: 25vw;
        height: fit-content;
        padding-top: clamp(6.25rem, 3.750rem + 5.208vw, 10rem);
        transform: translateX(0%);
        left: 100%;
        border-radius: 0 0 0 clamp(0.313rem, -0.104rem + 0.868vw, 0.938rem);
        ;
    }

    .ham_menu.open {
        left: 0;
        margin-left: 75vw;
    }

    .ham_list a {
        display: inline-block;
        width: clamp(8.125rem, 5.208rem + 6.076vw, 12.5rem);
        height: clamp(2.188rem, 1.354rem + 1.736vw, 3.438rem);
        font-size: clamp(0.563rem, 0.438rem + 0.26vw, 0.75rem);
        text-align: center;
        margin: 10% auto;
    }

    .ham_li_menu a::before,
    .ham_list li:nth-of-type(2) ::before,
    .ham_list li:nth-of-type(3) ::before {
        font-size: clamp(0.625rem, 0.458rem + 0.347vw, 0.875rem);
    }

    .ham_robot img:nth-child(1) {
        width: clamp(3.125rem, 1.042rem + 4.34vw, 6.25rem);
        height: clamp(3.125rem, 1.042rem + 4.34vw, 6.25rem);
        right: clamp(6.25rem, -0.368rem + 28.235vw, 13.75rem);
        bottom: clamp(10.125rem, 8.029rem + 8.941vw, 12.5rem);
    }

    .ham_robot img:nth-child(2) {
        width: clamp(1.875rem, -1.042rem + 6.076vw, 6.25rem);
        height: clamp(3.125rem, 0.208rem + 6.076vw, 7.5rem);
    }

    .ham_sns a img {
        width: clamp(1.25rem, -0.417rem + 3.472vw, 3.75rem);
        height: clamp(1.25rem, -0.417rem + 3.472vw, 3.75rem);
    }

    /* メインビジュアル */
    .top_visual {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: clamp(3.75rem, 2.385rem + 5.825vw, 9.375rem);
    }

    video {
        width: 50vw;
        max-width: 650px;
    }

    .about {
        padding: 0;
        height: clamp(42.688rem, -0.440rem + 89.85vw, 72.563rem);
        width: 50vw;
        max-width: 650px;
    }

    .visual_scroll_icon {
        display: none;
    }

    /* about */
    .main_text {
        font-size: clamp(1.563rem, -0.242rem + 3.759vw, 2.813rem);
    }

    .font_maru {
        font-size: clamp(0.813rem, -0.180rem + 2.068vw, 1.5rem);
    }

    .about_img :nth-child(1) {
        width: clamp(8.188rem, -2.730rem + 22.744vw, 15.75rem);
    }

    .about_name p:nth-child(1) {
        font-size: clamp(1rem, 0.278rem + 1.504vw, 1.5rem);
    }

    .about_name p:nth-child(2) {
        font-size: clamp(0.688rem, 0.056rem + 1.316vw, 1.125rem);
    }

    /* works */
    .web_grid,
    .gf_grid {
        display: flex;
        justify-content: center;
        gap: 5%;
        width: 90%;
    }

    .work_card_icon {
        width: clamp(2.188rem, 1.563rem + 1.302vw, 3.125rem);
    }

    .work_view_btn p {
        font-size: clamp(0.75rem, 0.542rem + 0.434vw, 1.063rem);
    }

    .gf_grid .work_card {
        height: clamp(18.75rem, 6.250rem + 26.042vw, 37.5rem);
    }

    .web_work_list dt {
        font-size: clamp(0.875rem, 0.208rem + 1.389vw, 1.875rem);
    }

    .work_tag,
    .web_work_list dd {
        font-size: clamp(0.563rem, 0.188rem + 0.781vw, 1.125rem);
    }

    /* アバウトページ */
    .profile,
    .profile_under {
        justify-content: center;
        max-width: 1300px;
    }

    .profile {
        flex-direction: row;
        gap: 5%;
        padding-top: clamp(15.625rem, 11.458rem + 8.681vw, 21.875rem);
        align-items: normal;
    }

    .profile h2 {
        position: absolute;
        top: clamp(7.5rem, 4.583rem + 6.076vw, 11.875rem);
    }

    .profile_under {
        display: flex;
        gap: 5%;
        margin: 10% 0;
    }

    .about_desc_text {
        padding: 0 5% 0 0;
    }

    .about_pf_img {
        margin-left: 5%;
        object-fit: cover;
    }

    .profile_under {
        padding: 0 5%;
    }

    /* ワークスページ */

    .web_column,
    .gf_column {
        flex-direction: column;
    }

    .works_column_fix {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: start;
        padding-top: calc(clamp(3.75rem, 2.385rem + 5.825vw, 9.375rem) + 100px);
        max-width: 1300px;
        width: 90%;
    }

    .works_column_fix .work_card {
        height: fit-content;
        margin-bottom: 15%;
        width: clamp(21.563rem, 2.938rem + 38.802vw, 49.5rem);
        margin: 0 0 10% auto;
    }

    .wrks_top {
        position: fixed;
        left: 10%;
        margin-top: 0;
    }

    .profile_strange {
        width: 80%;
    }


    /* 各ワークスページ */

    .scroll_card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 70%;
        margin: 10% auto;
    }

    .scroll_card_3 {
        grid-template-columns: 1fr;
    }


}




@media (min-width:1200px) {
    .scroll_card {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        width: 100%;
    }

    .scroll_card_2 {
        width: 0;
        justify-content: center;
    }

    .scroll_card_3 {
        grid-template-columns: 1fr;
        width: 100%;
    }

}