@charset "UTF-8";

/* =====================
基本設定
===================== */

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

html {
scroll-behavior: smooth;
}

body {
color: #222;
background-color: #f9f9f9;
font-family: "Noto Sans JP", sans-serif;
font-weight: 300;
}

a {
color: #222;
text-decoration: none;
}

img {
max-width: 100%;
display: block;
}

ul {
list-style: none;
}

h4{
    font-weight: 400;
    padding-bottom: 6px;
}

/* =====================
左固定メニュー
===================== */

.side {
width: 220px;
height: 100vh;
background-color: #fff;
border-right: 1px solid #777;
position: fixed;
top: 0;
left: 0;
}

.side ul {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 26px;
padding-left: 22px;
}

.side a {
font-family: "Cormorant Garamond", serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.2em;
position: relative;
display: inline-block;
padding-left: 8px;
padding-bottom: 4px;
}

/* 下の横線 */
.side a::after {
content: "";
width: 0;
height: 1px;
background-color: #0046ff;
position: absolute;
left: 0;
bottom: 0;
transition: width 0.4s;
}

/* 左の短い縦線 */
.side a::before {
content: "";
width: 4px;
height: 0;
background-color: #0046ff;
position: absolute;
left: 0;
bottom: 0;
}

.side a:hover::before {
height: 36px;
}

.side a:hover::after {
width: 100%;
}


/* =====================
右側メイン
===================== */

main {
margin-left: 220px;
}

/* =====================
FV
===================== */
.fv{
    margin-top: 30px;
}

.fv_img {
width: 100%;
height: calc(100vh - 80px);
margin-right: 30px;    
margin-top: 80px;
position: relative;
overflow: hidden;
}

.fv_img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: right center;
display: block;
}

.fv_profile{
    max-width: 600px;
}

.fv_label {
position: absolute;
top: 100px;
right: 100px;
color: #252525;
font-family: "Cormorant Garamond", serif;
font-size: 90px;
font-weight: 600;
letter-spacing: 0.12em;
}

.fv_text {
padding: 95px 0 90px 75px;
display: flex;
align-items: flex-end;
gap: 70px;
}

.fv_text_inner {
width: 900px;
}


.fv_text h1 {    
margin-left: 40px;
color: #0046ff;
font-family: "Cormorant Garamond", serif;
font-size: 84px;
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.04em;
margin-bottom: 60px;
}

.fv_text h2 {
margin-left: 40px;    
font-size: 30px;
font-weight: 400;
margin-bottom: 15px;
letter-spacing: 0.03em;    
}

.fv_text p {
margin-left: 40px;    
font-size: 17px;
line-height: 1.9;
letter-spacing: 0.06em;
}

/* =====================
セクション共通
===================== */

.section {
padding: 180px 0px 130px;
}

.section_inner {
margin-left: 0px;
width: calc(100% - 40px);
}

.title {
margin-left: 0px;     
display: flex;
align-items: center;
margin-bottom: 65px;
}

.title h2 {
font-family: "Cormorant Garamond", serif;
font-size: 64px;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1;
margin-right: 18px;
}

.title p {
color: #0046ff;
font-size: 15px;
font-weight: 500;
margin-right: 14px;
white-space: nowrap;
}

.line {
width: 100%;
height: 1px;
background-color: #0046ff;
}

/* =====================
Works
===================== */

.works_wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px 80px;
}

.work_img {
width: 95%;
aspect-ratio:4/3;
background-color: #eee8ec;
border: 1px solid #888;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin-bottom: 8px;    
}

.work h3 {
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}

.all_work_overlay h3 {
font-size: 20px;
}

.work p {
font-size: 14px;
line-height: 1.6;
}

.contact{
margin-left: 220px;
}

/* =====================
About
===================== */

.about_illust {
width: 230px;
flex-shrink: 0;
}

.about_illust img {
width: 80%;
height: auto;
display: block;
}

.profile_illust {
width: 300px;
flex-shrink: 0;
}

.profile_illust img {   
margin-left: 30px;    
width: 80%;
height: auto;
display: block;
}



.about_wrap {
margin-top: 100px;    
display: flex;
gap: 70px;
align-items: flex-start;
}

.about_img {   
width: 100%;
max-width: 320px;    
height: 200px;
background-color: #eee8ec;
border: 1px solid #888;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
}

.about_text {
width: 460px;    
}

.about_text h3 {
font-size: 24px;
font-weight: 300;
letter-spacing: 0.2em;
line-height: 1.3;
}

.name_en {
color: #0046ff;
font-family: "Cormorant Garamond", serif;
font-size: 17px;
letter-spacing: 0.22em;
margin-bottom: 20px;
}

.profile {
font-size: 17px;
line-height: 1.9;
}

.viewmore_img_btn {
padding-top: 50px;    
display: block;
width: 230px;
margin: 35px 0 0 auto;
transition: 0.3s;
}

.viewmore_img_btn img {
width: 120%;
display: block;
}

.viewmore_img_btn:hover {
transform: scale(1.06);
}

.viewmore_img_btn:active {
transform: scale(1.1);
}


/* =====================
Skill
===================== */

.skill_box {
background-color: #0037ff;
border-radius: 0 46px 46px 46px;
padding: 55px 70px 60px;
display: flex;
justify-content: space-around;
}

.skill {
text-align: center;
}

.skill_icon {
width: 150px;
height: 150px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.08);
display: flex;
justify-content: center;
align-items: center;
box-shadow:
16px 16px 30px rgba(0, 0, 0, 0.22),
-12px -12px 26px rgba(255, 255, 255, 0.16);
}

.skill_icon_img {
margin-left: 5px;    
width: 70px;
height: 70px;
object-fit: contain;
display: block;
}

.skill h3 {    
color: #fff;    
font-size: 19px;
font-weight: 500;
margin-bottom: 25px;
}

.skill h4 {    
color: #fff;    
font-size: 16px;
font-weight: 400;
margin-bottom: 16px;
line-height: 1.8;    
}

.skill_center{
    text-align: center;
}

.skill p {  
max-width: 300px;    
margin-left: 15px;    
text-align: start;
color: #fff;     
font-size: 16px;
line-height: 1.8;
}

/* =====================
Contact
===================== */

.contact {
background-color: #ddd9dc;
padding: 48px 36px 40px;
position: relative;    
}

.contact h2 {
font-family: "Cormorant Garamond", serif;
font-size: 50px;
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1;
margin-bottom: 14px;
}

.mail a {
font-size: 33px;    
color: #0046ff;
position: relative;
display: inline-block;
padding-bottom: 4px;
}

/* 下線の準備 */
.mail a::after {
content: "";
width: 0;
height: 2px;
background-color: #0046ff;
position: absolute;
left: 0;
bottom: 0;
transition: width 0.6s ease;
}

/* ホバーしたら左から右に線が伸びる */
.mail a:hover::after {
width: 100%;
}

.back_top {
position: absolute;
right: 60px;
bottom: 45px;
width: 120px;
display: block;
transition: 0.3s;
}

.back_top img {
width: 100%;
display: block;
}

.back_top:hover {
transform: scale(1.06);
}

.mail {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.18em;
margin-bottom: 32px;
}

.copy {
font-weight: 400;    
font-size: 17px;
letter-spacing: 0.2em;
}

/* =====================
画像に差し替えるとき用
===================== */
.work_photo {
width: 100%;
height: 170px;
object-fit: cover;
border: 1px solid #888;
margin-bottom: 8px;
}

.about_photo {
width: 285px;
height: 185px;
object-fit: cover;
border: 1px solid #888;
}

.skill_photo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}

/* =====================
About page
===================== */

.about_page{
margin-top: 40px;
}

.about_page,
.profile_page,
.strength_page,
.likes_page {    
padding-left: 70px;
padding-right: 0;
}

.likes_wrap {
display: grid;
    
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 920px;
margin: 60px auto 0;
}

.likes_photo {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}

.likes_photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* 黒い半透明フィルター＋文字 */
.likes_text {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.38);
color: #fff;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

text-align: center;
opacity: 0;
transition: opacity 0.4s ease;
padding: 20px;
}

/* マウスが乗ったら出る */
.likes_photo:hover .likes_text {
opacity: 1;
}

.likes_text p {
font-size: 20px;
letter-spacing: 0.08em;
margin-bottom: 12px;
}

.likes_text span {
font-size: 13px;
line-height: 1.8;
}

.about_first{
    display: flex;
gap: 70px;
margin-left: 40px;
}


.about_first_left {
display: flex;
align-items: center;
gap: 70px;
margin-left: 40px;
}



.about_photo_box .blue_frame {
left: -30px;
top: -25px;
}

.profile_photo_box .blue_frame {
right: -25px;
bottom: -25px;
}



.about_first_text p,
.profile_text p,
.strength_text p {
max-width: 520px;    
font-size: 17px;
line-height: 2;
letter-spacing: 0.08em;
}

/* =====================
Profile
===================== */

.profile_wrap {
margin-left: 0;
padding-right: 0;
width: 100%;
}

.profile_text h3 {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.2em;
margin-bottom: 3px;
}

.profile_name_en {
font-family: "Cormorant Garamond", serif;
font-size: 15px;
letter-spacing: 0.25em;
margin-bottom: 22px;
}

/* =====================
Strength
===================== */
.strength_page{
    background-color: #fefefe;
}

.strength_icon_nav {
display: flex;
justify-content: center;
gap: 70px;
margin-bottom: 80px;
}

.strength_icon_btn {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #222;
}

.strength_icon_btn img {
width: 190px;
object-fit: contain;
display: block;
transition: transform 0.3s ease;
}

.strength_icon_btn:hover img {
transform: scale(1.07);
}

.strength_icon_btn:active img {
transform: scale(0.97);
}

.strength_icon_btn span {
position: relative;
margin-top: 28px;
padding-top: 18px;
font-weight: 500;    
font-size: 20px;
color: #252525;
letter-spacing: 0.18em;
}

.strength_icon_btn span::before {
content: "";
width: 18px;
height: 2px;
background: #2d42ff;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}

/* =========================
下の文章ブロック
========================= */
.strength_detail_wrap {
max-width: 920px;
margin: 0 auto;
border: 2px solid #2d42ff;
}

.strength_detail_item {
display: grid;
grid-template-columns: 180px 1fr;
border-bottom: 2px solid #2d42ff;
scroll-margin-top: 120px;
}

.strength_detail_item:last-child {
border-bottom: none;
}

.strength_left {
padding: 34px 20px 34px 22px;
border-right: 2px solid #2d42ff;
display: flex;
flex-direction: column;
justify-content: center;
}

.strength_left span {
font-size: 28px;
font-weight: 500;
color: #2d42ff;
line-height: 1;
margin-bottom: 10px;
}

.strength_left h3 {
font-size: 22px;
font-weight: 500;
color: #252525;
line-height: 1.6;
}

.strength_right {
padding: 28px 30px;
}

.strength_right p {
font-size: 16px;
font-weight: 300;    
line-height: 2;
color: #252525;
}



/* =====================
Likes
===================== */

.likes_wrap {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-left: 40px;
padding-right: 45px;
}

.likes_photo {
width: calc((90% - 50px) / 3);
aspect-ratio: 1 / 1;
background-color: #ddd;
color: #777;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
}

/* =====================
Works htmlページ
===================== */

.work_detail_page {
margin-bottom: 40px;    
padding: 110px 36px 0;
}

.work_detail_inner {
max-width: 900px;
margin: 0 auto;
}

.work_detail_head {
margin-bottom: 28px;
}

.work_detail_head h1 {    
font-family: "Cormorant Garamond", serif;
font-size: 34px;
font-weight: 600;
letter-spacing: 0.32em;
line-height: 1.2;
}

.work_detail_head h2 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.18em;
margin-top: 6px;
}

.work_meta {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.18em;
line-height: 1.4;
margin-top: 14px;
}

.work_meta a {
color: #0046ff;
position: relative;
display: inline-block;
padding-bottom: 2px;
}

.work_meta a::after {
content: "";
width: 0;
height: 1px;
background-color: #0046ff;
position: absolute;
left: 0;
bottom: 0;
transition: width 0.6s ease;
}

.work_meta a:hover::after {
width: 100%;
}

.work_main_img {
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 38px;
overflow: hidden;
}

.work_main_img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.work_info {
display: grid;
gap: 14px;
margin-bottom: 90px;
}

.work_info_item {
display: flex;
align-items: center;
gap: 22px;
}

.work_info_icon {
width: 24px;
height: 24px;
object-fit: contain;
}

.work_info_text {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.6;
}

.work_text_block {
margin-bottom: 48px;
}

.work_text_block h3 {
font-size: 22px;
font-weight: 400;
letter-spacing: 0.22em;
margin-bottom: 18px;
}

.work_text_block h3 span {    
font-family: "Cormorant Garamond", serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.22em;
margin-left: 14px;
}

.work_text_block p {
font-size: 15px;
line-height: 2;
letter-spacing: 0.08em;
}

.work_design_img {
margin: 24px 0 28px;
}

.work_design_img img {
max-width: 380px;
width: 100%;
height: auto;
}

.work_logo_area {
display: flex;
gap: 28px;
align-items: center;
margin: 40px 0 34px;
}

.work_logo_area img {
width: 120px;
height: auto;
object-fit: contain;
}

.work_illust_area {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 30px;
margin: 36px 0 38px;
}

.work_illust_area img {
width: calc((100% - 60px) / 3);
height: auto;
}

.work_capture_area {
align-items: start;    
display: grid;
grid-template-columns: 1.8fr 1fr;
gap: 42px;
margin: 32px 0 140px;
}

.work_capture_area_text{
    margin-top: 40px;
    font-weight: 400;
    font-size: 22px;
}

.work_capture { 
overflow: visible;
box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2);   
}



.work_capture img {
width: 100%;
height: auto;
object-fit: contain;
object-position: top center;
display: block;
}

/*======================================
　苺バナー実寸サイズ
======================================*/


.banner_728_90{
margin-bottom: 30px;
width: 100%;
max-width: 728px;
height: auto;
}

.banner_300_250{
margin-bottom: 30px;
width: 100%;
max-width: 300px;
height: auto;
}

.banner_160_600{
margin-bottom: 30px;
width: 100%;
max-width: 160px;
height: auto;
}

/* =====================
All Works
===================== */

.all_works {
padding: 20px 36px 120px;
}

.all_work {
display: block;
}

.all_work_img {
width: 100%;
aspect-ratio: 4 / 3;
background-color: #ddd;
overflow: hidden;
position: relative;
}

.all_work_img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.all_work_overlay {
position: absolute;
inset: 0;
background-color: rgba(240, 240, 240, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transition: opacity 0.4s ease;
padding: 20px;
}

.all_work_overlay h3 {
font-size: 14px;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.5;
margin-bottom: 8px;
color: #222;
}

.all_work_overlay p {
font-size: 15px;
font-weight: 300;
letter-spacing: 0.04em;
line-height: 1.5;
color: #222;
}

.all_work:hover .all_work_overlay {
opacity: 1;
}

.all_work:hover .all_work_img img {
transform: scale(1.05);
}

.all_works_inner {
max-width: 900px;
margin: 0 auto;
}

.all_works h2 {
font-family: "Cormorant Garamond", serif;
font-size: 54px;
font-weight: 500;
letter-spacing: 0.16em;
margin-bottom: 90px;
}

.all_works_wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px 80px;
}

.all_work_img {
width: 100%;
aspect-ratio: 4 / 3;
background-color: #ddd;
overflow: hidden;
}

.all_work_img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.all_work h3 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.4;
margin-top: 16px;
}

.all_work p {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.4;
}

.menu_toggle,
.menu_btn {
display: none;
}

/* =====================
Works detail responsive
===================== */


@media screen and (max-width: 768px) {
h2{
    margin-bottom: 30px;
}    
    
.menu_toggle {
display: none;
}

.menu_btn {
display: block;
position: fixed;
top: 8px;
right: 8px;
z-index: 300;

font-family: "Cormorant Garamond", serif;
font-size: 0;
font-weight: 700;
letter-spacing: 0.22em;
color: #252525;
cursor: pointer;
}
    

.menu_btn::after {
content: "MENU";
font-size: 14px;
}

.menu_toggle:checked + .menu_btn::after {
content: "CLOSE";
color: #fff;
}


.side {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;

background-color: #0046ff;
border-right: none;
border-bottom: none;

z-index: 200;

display: flex;
justify-content: center;
align-items: center;

transform: translateX(100%);
transition: transform 0.45s ease;
}

.menu_toggle:checked ~ .side {
transform: translateX(0);
}

.side ul {
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 34px;
padding-left: 0;
}

.side li {
padding: 0;
}

.side li::before {
display: none;
}

.side a {
font-family: "Cormorant Garamond", serif;
font-size: 38px;
font-weight: 600;
letter-spacing: 0.18em;
line-height: 1;
color: #fff;
padding: 0;
}

.side a::before,
.side a::after {
display: none;
}

.side a:hover {
color: rgba(255, 255, 255, 0.68);
}

main {
margin-left: 0;
padding-top: 0;
}

.contact {
margin-left: 0;
}    
    
    
.work_detail_page {
padding: 150px 28px 0;
}

.work_detail_inner,
.all_works_inner {
max-width: 100%;
}

.work_detail_head h1 {
font-size: 28px;
letter-spacing: 0.22em;
}

.work_capture_area {
grid-template-columns: 1fr;
gap: 34px;
}

.work_capture_long,
.work_capture_short {
height: auto;
}

.work_capture img {
height: auto;
}

.all_works {
padding: 40px 28px 80px;
}

.all_works h2 {
font-size: 46px;
margin-bottom: 60px;
}

.all_work h3 {
font-size: 16px;
}    

.all_works_wrap {
gap: 55px 40px;
}
    
.about_first_left {
flex-direction: column;
gap: 45px;
margin-left: 0;
}

.profile_wrap {
margin-left: 0;
padding-right: 0;
width: 100%;
}

.profile_text {
text-align: left;    
max-width: 100%;
}

.profile_illust {
width: 260px;
margin: 0 auto;
}    
}

@media screen and (max-width: 480px) {
.menu_btn {
top: 22px;
right: 20px;
font-size: 13px;
letter-spacing: 0.2em;
}

.side a {
font-size: 30px;
}

.side ul {
gap: 30px;
}

main {
margin-left: 0;
padding-top: 0;
}    
    
.work_detail_page {
padding: 110px 20px 0;
}

.work_detail_head h1 {
font-size: 22px;
letter-spacing: 0.16em;
}

.work_detail_head h2 {
font-size: 15px;
}

.work_info_text {
font-size: 12px;
}

.work_text_block h3 {    
font-size: 19px;
}

.work_text_block h3 span {
display: inline-block;
font-size: 11px;
margin-left: 8px;
}

.work_text_block p {
font-size: 14px;
}

.work_logo_area {
gap: 18px;
}

.work_logo_area img {
width: 90px;
}

.work_illust_area {
flex-direction: column;
align-items: center;
}

.work_illust_area img {
width: 80%;
}

.all_works_wrap {
grid-template-columns: 1fr;
gap: 55px;
}

.all_works h2 {
font-size: 40px;
}
    
.about_first_left {
gap: 36px;
}

.profile_illust {
width: 220px;
}    
}


/* レスポンシブ */
@media screen and (max-width: 768px) {

/* 上固定ナビになった分、メインを下げる */
main {
margin-left: 0;
padding-top: 0;
}
    
.fv_label {
top: 170px;
right: 50px;
font-size: 70px;
}  

.fv_text {
padding: 45px 25px 75px;    
display: block;
}

.fv_text_inner {
width: 100%;
}
  

.fv_text h1 {
margin-left: 0;    
font-size: 52px;
}

.fv_text h2 {
margin-left: 0;     
font-size: 22px;
}

.fv_text p {
margin-left: 0;     
padding-top: 10px;    
font-size: 18px;
}
    
.title h2 {    
font-size: 48px;
}

.title p {
font-size: 13px;
}

.works_wrap {    
grid-template-columns: 1fr;
gap: 80px;
}

.work_img {
width: 80%;
}
    
.about_wrap {
flex-direction: column;
gap: 35px;    
}

.about_img,
.about_photo {
width: 100%;
height: 190px;
}

.about_text {
width: 100%;
}

.skill_box {
flex-direction: column;
gap: 45px;
padding: 48px 28px 56px;
}
    
/* =====================
Contact
===================== */

.contact h2{
font-size: 40px;
margin: 0;    
}

.mail a{
font-size: 18px;    
}

.mail a::after {
content: "";
width: 0;
height: 2px;
background-color: #0046ff;
position: absolute;
left: 0;
bottom: 0;
transition: width 0.6s ease;
} 
 

.about_page,
.profile_page,
.strength_page,
.likes_page {
padding-left: 28px;
padding-right: 28px;
}    

.about_first,
.profile_wrap,
.strength_wrap,
.likes_wrap {
margin-left: 0;
padding-right: 0;
}
    
.about_first_left{
display: flex;
flex-direction: column;
gap: 36px;
margin-left: 0;
width: 100%;
}    

.about_first{
text-align: left;
}    
    

.about_first,
.profile_wrap {
margin-top: 10px;
margin-bottom: 30px;    
flex-direction: column;
}

.profile_wrap {
display: block !important;
width: 100%;
margin-left: 0;
padding-right: 0;
}
    
.profile_text {
text-align: left;    
width: 100%;
max-width: 100%;
}

.profile_text p,
.profile_text .profile {
max-width: 100%;
width: 100%;
}

.profile_illust {
width: 240px;
max-width: 80%;
margin: 20px auto 0;
}

.profile_illust img {
width: 100%;
height: auto;
display: block;
}

.strength_icon_nav {
gap: 40px;
}

.strength_icon_btn img {
width: 130px;
height: 130px;
}

.strength_detail_item {
grid-template-columns: 150px 1fr;
}


.likes_photo {
width: calc((100% - 25px) / 2);
}    
    
.back_top {
size: 40px;    
right: 18px;
bottom: 120px;
width: 100px;
}    
}

@media screen and (max-width: 480px) {

main {
margin-left: 0;
padding-top: 0;
}
    
.fv_label {
top: 110px;
right: 30px;
font-size: 50px;
}     
    
.fv_img {
height: 300px;
}

.fv_text {
padding: 40px 20px 65px;
}

.fv_text h1 {
font-size: 36px;
}

.fv_text h2 {
font-size: 18px;
}

.section {
padding: 44px 0px 64px;
}

.title h2 {
font-size: 42px;
}

.work_img,
.work_photo {
max-width: 300px;    
height: 220px;
}

.contact h2 {
margin: 0;    
font-size: 31px;
}

.copy {
font-size: 13px;
}
    

/* =====================
About レスポンシブ
===================== */
.about_photo_box,
.profile_photo_box,
.about_photo,
.profile_photo {
width: 210px;
height: 210px;
}

.blue_frame {
width: 180px;
height: 180px;
}

.strength_icon_nav {
flex-direction: column;
align-items: center;
gap: 40px;
margin-bottom: 60px;
}

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

.strength_left {
border-right: none;
border-bottom: 2px solid #2d42ff;
padding: 24px 20px;
}

.strength_right {
padding: 22px 20px;
}
    
.likes_photo {
width: 100%;
}
}

/* セクションアニメーション */
.fade_in {
opacity: 0;
transform: translateY(48px);
animation: fadeUp 1.1s ease-out forwards;
animation-timeline: view();
animation-range: entry 20% cover 45%;
}

@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(48px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

/* pageアニメーション */
.page_fade {
opacity: 0;
transform: translateY(32px);
animation: pageFadeUp 0.9s ease-out forwards;
}

@keyframes pageFadeUp {
0% {
opacity: 0;
transform: translateY(32px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}