/*
Theme Name: My Portforio Theme
Theme URI: https://portforiov2.sukuyomi.net/
Author: PORTFORIO
Author URI: https://portforiov2.sukuyomi.net/
Description: 2025年5月に作成したポートフォリオになります。
Version: 1.0
*/

@charset "utf-8";

html {
scroll-behavior: smooth;
}
body {
font-family: "Avenir", "Helvetica neue", "Zen Kaku Gothic New", sans-serif;
}
a {
text-decoration: none;
color: #2b2b2b;
}
img {
width: 100%;
}
p {
margin: 0;
padding: 0;
}
ul {
margin: 0;
height: auto;
}
li {
list-style: none;
height: auto;
}
.zen-kaku-gothic-new-light {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 300;
font-style: normal;
}
.zen-kaku-gothic-new-regular {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-style: normal;
}
.zen-kaku-gothic-new-medium {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-style: normal;
}
.zen-kaku-gothic-new-bold {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-style: normal;
}
.zen-kaku-gothic-new-black {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 900;
font-style: normal;
}
.s-header__nav {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.s-header-list {
padding-left: 3rem;
}
.s-header__nav-item {
color: #2b2b2b;
}

.white-text a,
.white-text li {
color: #fdfdfd;
}
.txtwhite {
color: #fdfdfd;
}
.s-header__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index: 9999;
animation: fadeOutOverlay 1.5s ease-out forwards;
}
@keyframes fadeOutOverlay {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.s-mainvisual__bg {
background-image: url(https://portforiov2.sukuyomi.net/wp-content/uploads/2025/05/portforio_main_pc.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
height: 100vh;
position: relative;
z-index: -1;
}
.s-mainvisual__fade-in-text {
opacity: 0;
animation: fadeInText 1s ease-out forwards;
animation-delay: 1s;
}
@keyframes fadeInText {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.s-mainvisual__fade-in-text.delay-1 {
animation-delay: 0.4s;
}
.s-mainvisual__fade-in-text.delay-2 {
animation-delay: 0.8s;
}
.s-mainvisual__fade-in-text.delay-3 {
animation-delay: 1.2s;
}
.s-mainvisual__fade-in-text.delay-4 {
animation-delay: 1.6s;
}
.s-mainvisual__positon {
position: absolute;
top: 20%;
left: 12%;
}
.s-mainvisual__effect {
position: absolute;
top: 26%;
left: 14%;
width: 30%;
z-index: -1;
}
.s-mainvisual__sub-font-text01 {
letter-spacing: 1px;
}
.s-mainvisual__sub-font-text02 {
letter-spacing: 0px;
}
.s-mainvisual__main-fontsize {
font-size: clamp(0.875rem, 0.5539rem + 0.6689vw, 1.125rem);
line-height: 2;
}
.s-mainvisual__main-font {
font-size: max(8.333333333333332vw, 70px);
line-height: 1;
margin: 0;
letter-spacing: 5px;
color: #fdfdfd;
padding-bottom: 5%;
}
.s-mainvisual__sub-font {
color: #fdfdfd;
}
.s-mainvisual__sub-font-text01 {
font-size: max(4.861111111111112vw, 40px);
line-height: 1;
margin: 0;
}
.s-mainvisual__sub-font-text02 {
font-size: max(2.083333333333333vw, 20px);
line-height: 1.5;
margin: 0;
}
.s-pagination-controls {
text-align: center;
}
.s-pagination-controls button {
width: 48px;
height: 48px;
margin: 0 1%;
font-size: clamp(0.9375rem, 0.1348rem + 1.6722vw, 1.5625rem);
font-weight: 800;
border-radius: 50%;
cursor: pointer;
border: none;
background-color: #ffffff;
transition: background-color 0.2s;
opacity: 1;
}
.s-pagination-controls button:hover:not(:disabled) {
opacity: 0.8;
}

.page-number-btn.active {
background-color: #333;
color: #ffffff;
}

.s-mainvisual__scroll {
position: absolute;
top: 16%;
left: 8%;
writing-mode: vertical-rl;
z-index: 3;
}
.s-mainvisual__scroll::before {
animation: s-mainvisual__scroll 2s infinite;
background-color: #2b2b2b;
bottom: -115px;
content: "";
height: 500px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 2px;
z-index: 2;
}
.s-mainvisual__scroll::after {
background-color: #ccc;
bottom: -115px;
content: "";
height: 500px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 2px;
}
@keyframes s-mainvisual__scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}

.s-single-work__scroll {
position: absolute;
top: -0.5%;
left: 8%;
writing-mode: vertical-rl;
z-index: 3;
}
.s-single-work__scroll::before {
animation: s-single-work__scroll 2s infinite;
background-color: #2b2b2b;
bottom: -115px;
content: "";
height: 300px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 2px;
z-index: 2;
}
.s-single-work__scroll::after {
background-color: #ccc;
bottom: -115px;
content: "";
height: 300px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 2px;
}
@keyframes s-single-work__scroll {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}

.s-contents__fade-in-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}

.s-contents__fade-in-scroll.visible {
opacity: 1;
transform: translateY(0);
}

.s-contents__title {
font-size: clamp(2.5rem, 0.8946rem + 3.3445vw, 3.75rem);
line-height: 1.5;
margin: 0;
}
.s-contents__title span {
font-size: clamp(1rem, 0.6789rem + 0.6689vw, 1.25rem);
line-height: 1.5;
padding-left: 3%;
}
.s-contents__title-padding {
padding-top: 5%;
}
.s-contents__about {
font-size: clamp(1.5625rem, 1.1612rem + 0.8361vw, 1.875rem);
line-height: 1.8;
}
.s-contents__about span {
font-size: clamp(1rem, 0.6789rem + 0.6689vw, 1.25rem);
line-height: 1.8;
padding-left: 5%;
}
.s-mainvisual__profile {
box-shadow: 10px 12px 20px 1px #d8d8d8;
border-radius: 20px;
}
.s-contents__image-wrapper {
overflow: hidden;
position: relative;
border-radius: 20px;
}
.zoom-image {
width: 100%;
object-fit: cover;
transition: transform 0.4s ease;
transform: scale(1.15);
height: 100%;
}
.zoom-image:hover {
transform: scale(1.2); /* ホバー時に拡大 */
}
.s-contents__item-title {
font-size: clamp(0.8125rem, 0.5717rem + 0.5017vw, 1rem);
line-height: 1.8;
}
.s-contents__item-date {
font-size: clamp(0.625rem, 0.3842rem + 0.5017vw, 0.8125rem);
line-height: 1.8;
}
.s-contents__section01 {
background: #F9F9F9;
border-radius: 40px 40px 0 0;
margin-top: -3%;
position: relative;
}
.s-contents__section02 {
background: #ffffff;
border-radius: 40px 40px 0 0;
margin-top: -3%;
position: relative;
}
.s-contents__section03 {
background: #2B2B2B;
border-radius: 40px 40px 0 0;
margin-top: -3%;
position: relative;
}

.s-work-contents__section01 {
background: #ffffff;
position: relative;
}
.s-contents__btn {
background: #2B2B2B;
color: #fdfdfd;
font-weight: bold;
padding: 1.4rem 10%;
position: relative;
}
.s-contents__btn::after {
font: var(--fa-font-solid);
content: "\f138";
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%);
transition: all 0.2s ease;
}
.s-contents__btn:hover::after {
right: 8%;
transform: translateY(-50%) translateX(2px);
transition: all 0.2s ease;
}

.s-work-single__main {
padding: 29vh 0 0;
}
.s-work-single__main-title {
position: absolute;
top: -20%;
left: 5%;
font-size: max(5.555555555555555vw, 45px);
filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.4));
}
.s-work-single__main-title p {
line-height: 100%;
font-weight: 800;
color: #030303;
}

.s-work__box {
width: 100%;
height: 55vw;
overflow: hidden;
}
.thumbnail {
width: 100%;
}

.s-footer__section {
background: #F9F9F9;
}
.s-footer__position a {
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%, 0);
background: #F9F9F9;
padding: 3% 6%;
border-radius: 50% / 100% 100% 0 0;
transition: transform 0.2s ease;
}
.s-footer__btn-position {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.2s ease;
}
.s-footer__position a:hover .s-footer__btn-position {
transform: translate(-50%, -10px);
transition: transform 0.2s ease;
}
.s-footer__position i {
font-size: 3vw;
}
.swiperCont {
width: 100%;
margin: 0 auto;
position: relative;
margin: 0 0 5%;
}
.swiper {
width: 100%;
}
.swiper-wrapper {
padding: 0;
height: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
border-radius: 50%;
padding: 30px;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -10%;
top: 40%;
opacity: 0.9;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -10%;
top: 40%;
opacity: 0.9;
}
.swiper-pagination01, .swiper-pagination02 {
padding-top: 30px;
text-align: center;
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 16px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 16px));
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px);
background-color: #FFFFFF;
}
.swiper-pagination-bullet-active {
background-color: #FFFFFF !important;
opacity: 0.9;
}
.swiper-button-next:focus,
.swiper-rtl .swiper-button-prev:focus,
.swiper-button-prev:focus,
.swiper-rtl .swiper-button-next:focus {
outline: none;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-family: "Font Awesome 5 Free";
font-weight: bold;
font-size: 40px;
color: #ffffff;
}
.swiper-button-prev::after {
content: "\f137";
}
.swiper-button-next::after {
content: "\f138";
}

@media screen and (min-width:441px) and (max-width:1024px) {
.s-mainvisual__bg {
background-image: url(http://portforiov2.sukuyomi.net/wp-content/uploads/2025/05/portforio_main_tab-scaled.webp);
}
.s-mainvisual__main-font {
font-size: max(14.322916666666666vw, 70px);
}
.s-mainvisual__sub-font-text01 {
font-size: max(8.463541666666668vw, 40px);
}
.s-mainvisual__sub-font-text02 {
font-size: max(3.2552083333333335vw, 20px);
}
.s-contents__title-padding {
padding-top: 10%;
}
.s-mainvisual__effect {
top: 24%;
left: 15%;
width: 55%;
}
.s-mainvisual__scroll {
top: -5%;
}
.s-mainvisual__scroll::before {
height: 350px;
}
.s-mainvisual__scroll::after {
height: 350px;
}
.s-work-single__main {
padding: 18vh 0 0;
}
.s-contents__btn {
padding: 1rem 10%;
}
.s-work__box {
height: 45vh;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -5%;
top: 30%;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -5%;
top: 30%;
}
}

@media only screen and (max-width:440px) {
.s-mainvisual__bg {
background-image: url(https://portforiov2.sukuyomi.net/wp-content/uploads/2025/05/portforio_main_spv2.webp);
}
.s-mainvisual__positon {
position: absolute;
top: 20%;
left: 7%;
}
.s-mainvisual__effect {
position: absolute;
top: 24%;
left: 11%;
width: 70%;
z-index: -1;
}
.s-mainvisual__scroll {
left: initial;
right: 6%;
}
.s-contents__title-padding {
padding-top: 6rem;
}
.s-contents__btn {
padding: 1.2rem 25%;
}
.s-footer__position a {
top: -36%;
padding: 6% 12%;
}
.s-mainvisual__scroll {
top: 3%;
z-index: 0;
}
.s-mainvisual__scroll::before {
height: 300px;
width: 2px;
}
.s-mainvisual__scroll::after {
height: 300px;
width: 1px;
}
.s-pagination-controls button {
width: 36px;
height: 36px;
}
.s-mainvisual__profile {
border-radius: 0px 20px 20px 0;
}
.s-footer__position a:hover .s-footer__btn-position {
transform: translate(-50%, -5px);
}
.s-footer__position i {
font-size: 6vw;
}
.s-contents__section01 {
border-radius: 15px 15px 0 0;
margin-top: -3%;
}
.s-contents__section02 {
border-radius: 15px 15px 0 0;
margin-top: -3%;
}
.s-contents__section03 {
border-radius: 15px 15px 0 0;
margin-top: -3%;
}
.s-work-single__main {
padding: 32vh 0 0;
}
.s-single-work__scroll {
left: initial;
right: 6%;
}
.s-work__box {
height: 33vh;
}
.hamburger-morph {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
width: 48px;
height: 48px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}

.hamburger-morph__icon {
width: 100%;
height: 100%;
}

.hamburger-morph__line {
fill: none;
stroke: #ffffff;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-morph__line:nth-child(1) {
stroke-dasharray: 60 207;
}

.hamburger-morph__line:nth-child(2) {
stroke-dasharray: 60 60;
}

.hamburger-morph__line:nth-child(3) {
stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}

.nav-morph {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(29, 29, 31, 0.9);
clip-path: circle(0% at calc(100% - 44px) 44px);
transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 900;
}

.nav-morph.active {
clip-path: circle(150% at calc(100% - 44px) 44px);
}

.nav-morph__wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.nav-morph__list {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}

.nav-morph__item {
opacity: 0;
line-height: 100%;
text-align: left;
transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-morph.active .nav-morph__item {
opacity: 1;
transform: translateY(0);
}

.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }

.nav-morph__link {
position: relative;
display: inline-block;
color: #fff;
text-decoration: none;
overflow: hidden;
}

.swiperCont {
width: 100%;
margin: 0 auto;
}
.swiper-pagination01 {
padding-top: 20px;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -8%;
top: 35%;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -8%;
top: 35%;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
padding: 24px;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
font-size: 24px;
}

.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px));
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

}