@charset "UTF-8";
@import url("https://use.typekit.net/ewa4mji.css");

:root {
--font-base: 'neue-haas-grotesk-display', "Helvetica", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
--main-text: #000;
}

html {
font-family: var(--font-base);
font-size: 12px;
line-height: 1.75;
font-feature-settings: "pkna" 1;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
text-align: justify;
text-justify: inter-character;
margin: 0;
padding: 0;
height: 100%;
}

body {
max-width: 100%;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
}

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

a {
color: var(--main-text);
text-decoration: none;
transition: opacity 0.25s ease;
}

a:hover {
opacity: .75;
}

li {
list-style: none;
}

/* --- Layout Components --- */



/*↓ロゴ左寄せver.*/
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 75px;
padding: 0 12.5px; 
box-sizing: border-box;
z-index: 1000;
}

.header_ttl {
position: static;
transform: none;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.0125em;
margin: 0;
}

.burger-btn {
all: unset;
cursor: pointer;
width: 50px;
height: 50px;
position: relative;
display: block;
z-index: 1002;
}

/* humbergar_bar */
.bar {
width: 50px;
height: .75px;
background-color: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bar_top {
transform: translate(-50%, -2.5px);
}

.bar_bottom {
transform: translate(-50%, 2.5px);
}

.burger-btn.close .bar_top {
transform: translate(-50%, 0) rotate(7.5deg);
}

.burger-btn.close .bar_bottom {
transform: translate(-50%, 0) rotate(-7.5deg);
}

.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 999;
visibility: hidden;
opacity: 0;
transition: opacity .5s ease;
}

.nav-wrapper.fade {
visibility: visible;
opacity: 1;
}

/* humbergar_modal_inline */
.nav-wrapper {      
visibility: hidden;    
opacity: 0;
width: 100%;      
height: 100vh;   
position: fixed;      
top: 0;      
left: 0;
z-index: 999;
transition: opacity .5s ease, visibility .5s;
}    

.header-nav {        
width: 100%;        
height: 100%;  
background-color: #fff;  
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 75px 15px 0 15px; 
box-sizing: border-box;
}   

.nav-list {
margin: 0;
padding: 0;
list-style: none;
}  

.nav-item {
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.0125em;
margin-top: 17.5px;
}

.nav-item_icon{
width: 12px;
margin-top: 17.5px;
}

.nav-item a, .own-item a {
display: inline-block;
transition: opacity .5s;
}

.nav-wrapper.fade {
visibility: visible;
opacity: 1;
}

/* archive */
#archive {
padding-top: 100px;
width: 100%;
}

#archive a{
opacity: 1;
}

.tate, .yoko {
width: 90%;
max-width: 1000px;
margin: 0 auto 50px;
padding: 0;
overflow: hidden;
cursor: pointer;
}

.tate img, .yoko img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
transition: transform 0.5s ease-out;
aspect-ratio: auto; 
}

.tate:hover img, .yoko:hover img {
transform: scale(1.025); 
}

[id^="md"] {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}

/* 表示された時のアニメーション */
.md-overlay, .md-contents {
animation: modalFadeIn 0.5s ease forwards;
}

@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}



#about {
display: flex;
align-items: center;
min-height: 100vh;
width: 100%;
padding: 100px 5%;
box-sizing: border-box;
}

.me {
width: 100%;
max-width: 90%;
margin: 0 auto;
}

.about-content {
font-size: 11px;
line-height: 1.75;
letter-spacing: 0.025em;
margin-bottom: 25px;
}

/* 言語切り替えの設定 */
[lang="en"] { display: none; }
body.en-mode [lang="ja"] { display: none; }
body.en-mode [lang="en"] { display: block; }

/* ボタンの見た目 */
.lang-switch {
}

.lang-switch button {
font-family: var(--font-base);
font-size: 11px;
letter-spacing: 0.025em;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #ccc;
transition: color 0.5s;
}

.lang-switch button.active {
color: #000;
font-weight: 500;
}

/*
#about{
font-family: var(--font-base);
font-size: 12px;
line-height: 1.75;
font-feature-settings: "pkna" 1;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
text-align: justify;
text-justify: inter-character;
letter-spacing: .025em;
width: 90%;
margin: 0 auto;
padding-top: 90px;
}

[lang="en"] {
display: none;
}


body.en-mode [lang="ja"] {
display: none;
}
body.en-mode [lang="en"] {
display: block;
}

.lang-switch button {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-base);
font-size: 11px;
color: #ccc;
padding: 0;
}
.lang-switch button.active {
color: #000;
font-weight: 500;
}
*/




@media screen and (min-width: 768px) and (max-width: 1024px) {
.header {
height: 100px;
padding: 0 25px; 
}

.header_ttl {
font-size: 1.25rem;
}

/* humbergar_bar */
.bar {
width: 75px;
height: .75px;
transform: translate(-50%, -50%);
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.bar_top {
transform: translate(-50%, -2.5px);
}

.bar_bottom {
transform: translate(-50%, 2.5px);
}

.burger-btn.close .bar_top {
transform: translate(-50%, 0) rotate(7.5deg);
}

.burger-btn.close .bar_bottom {
transform: translate(-50%, 0) rotate(-7.5deg);
}

.header-nav {        
padding: 75px 37.5px 0 37.5px; 
}   

.nav-item {
font-size: 1.125rem;
margin-top: 17.5px;
}

.nav-item_icon{
width: 13.75px;
margin-top: 17.5px;
}

/* archive */
#archive {
padding-top: 150px;
}

.tate, .yoko {
width: 87.5%;
max-width: 1000px;
margin: 0 auto 100px;
padding: 0;
overflow: hidden;
cursor: pointer;
}

[id^="md"] {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
	
#about {
display: flex;
align-items: center;
min-height: 100vh;
width: 100%;
padding: 100px 0%;
box-sizing: border-box;
}

.me {
width: 100%;
max-width: 90%;
margin: 0 auto;
}

.about-content {
font-size: 1.125rem;
line-height: 1.75;
letter-spacing: 0.025em;
margin-bottom: 37.5px;
}

/* 言語切り替えの設定 */
[lang="en"] { display: none; }
body.en-mode [lang="ja"] { display: none; }
body.en-mode [lang="en"] { display: block; }

/* ボタンの見た目 */
.lang-switch {
font-size: 1.125rem;
letter-spacing: 0.025em;
}

.lang-switch button {
font-family: var(--font-base);
letter-spacing: 0.025em;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #ccc;
transition: color 0.5s;
}

.lang-switch button.active {
color: #000;
font-weight: 500;
}
}





@media screen and (min-width: 1025px) {
/*↓ロゴ左寄せver.*/
.header {
height: 75px;
padding: 0 25px; 
}

.header_ttl {
font-size: 1rem;
}

.burger-btn {
width: 75px;
height: 75px;
}

.bar {
width: 75px;
height: .75px;
}

.header-nav {        
padding: 62.5px 25px 0 25px; 
}   

.nav-item {
font-size: 1rem;
margin-top: 16.5px;
}

.nav-item_icon{
width: 12px;
margin-top: 16.5px;
}

/* archive */
#archive {
padding-top: 150px;
width: 100%;
}

#archive a{
opacity: 1;
}

.tate, .yoko {
width: 90%;
max-width: 1000px;
}

#about {
display: flex;
align-items: center;
min-height: 100vh;
width: 100%;
padding: 100px 0;
box-sizing: border-box;
}

.me {
width: 100%;
max-width: 37.5%;
margin: 0 auto;
}

.about-content {
font-size: 1.125rem;
letter-spacing: 0.025em;
margin-bottom: 25px;
}

/* 言語切り替えの設定 */
[lang="en"] { display: none; }
body.en-mode [lang="ja"] { display: none; }
body.en-mode [lang="en"] { display: block; }

/* ボタンの見た目 */
.lang-switch {
font-size: 1.125rem;
letter-spacing: 0.025em;
}

.lang-switch button {
font-family: var(--font-base);
letter-spacing: 0.025em;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: #ccc;
transition: color 0.5s;
}

.lang-switch button.active {
color: #000;
font-weight: 500;
}
}



.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
.tb{
	display: none !important;
}

@media only screen and (max-width: 768px) {
.pc {
    display: none !important;
}
.sp {
    display: none !important;
}
.tb{
	display: block !important;
}
}


@media only screen and (max-width: 450px) {
.pc {
    display: none !important;
}
.sp {
    display: block !important;
}
.tb{
	display: none !important;
}
}