@charset "utf-8";
/*
Theme Name: AP01
Description: AP01
Theme URI: NOT
Author: FLOAT
Version: 1.0.0
*/

/*  BODY
----------------------------------------------------------- */  

html, body {
    background-color: transparent; /* htmlタグにも透明設定 */
}

body {
	font-family:'Futo Go B101 JIS2004 AP';
	font-weight: bold;
	font-style: normal;
    font-size: 26px;
    line-height: 2.4;
    color: #000;
	margin: 0 auto;
	/* letter-spacing: 0.03em;*/
	font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* macOSユーザーに対してフォントを滑らかに表示 */
}
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}
::selection {
    background: #faf0e6; /* ハイライトの背景色 */
    color: #000; /* 選択されたテキストの色 */
}
.palt {
	font-feature-settings: "palt";
}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
.clearfix{
	zoom: 1; /* for IE6/7 */
}
.clear{
	clear:both;
}

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

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

	body {
		font-size: 18px;
    }
	.pc {
        display: none!important;
    }
    .sp {
        display: block!important;
    }
}

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

    .tb {
        display: none!important;
    }
}

img {
    max-width: 100%;
	height: auto;
	vertical-align:top;
}
a {
	text-decoration: none;
	color: #000;
}
.ule {
	text-decoration: underline;
	color: #000;
}
a img:hover {
	opacity: 0.8;
	color: #fff;
}
ul {
    list-style: none;
}
#main {
	word-break:break-all;
}
iframe {
	max-width: 100%;
	margin: 0 0 -3% 0;
}
hr {
  border: 1px solid #000000;
  margin: 20px 0;
}
.left {
	float: left;
}
.right {
	float: right;
}
a.anchor {
    display: block;
    padding-top: 130px;
    margin-top: -130px;
}
.wraper {
    width: 100%;
	/* margin: 0 auto 3% auto; */
    margin: 0 auto;
	overflow: hidden;
}
.w01 {
    width: 100%;
	padding: 10% 20%;
	padding: 10% 28%;
}
.w100 {
	width: 100%;
	height: auto;
}
.w70 {
	width: 70%;
	margin: 0 10px 50px 20px;
    padding: 2%;
	float: left;
}
.w80 img{
	width: 80%;
	text-align:center;
}

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

	.wraper {
    	width: 100%;
		margin: 0 auto 10% auto;
    	padding: 0 0;
    }
	a.anchor {
		display: block;
		padding-top: 80px;
		margin-top: -80px;
	}
	.w01 {
		width: 100%;
		padding: 30% 6% 10% 6%;
	}
}

/* header ページャー
----------------------------------------------------------- */  

#header {
	width: 100%;
    margin-top: 0px;  
	background: #fff;
}
#header .logo {
	width: 100%;
	text-align: left;
	padding: 0 0;
	position: fixed;
	z-index: 200;
}
#header .logo img {
	width: 28%;
	height: auto;
}
#header h1 {
	display: none;
	text-align:center;
	margin: 0;
}
#next {
    font-size: 85%;
    font-weight: lighter;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.pager {
	width: 100%;
	margin: 20px 0 20px 0;
	text-align:center;
}

@media screen and (max-width: 1024px) {
	
	#header .logo {
		width: 100%;
		text-align: left;
		padding: 0 0;
	}
	#header .logo img{
		width: 75%;
		height: auto;
	}
	.wraper1 {
    	padding: 0 4%;	
    }
}


/*  コンテンツ
----------------------------------------------------------- */

.works-slider {
    width: 100%;
    position: relative;
    cursor: pointer; /* ポインターを表示 */
	padding: 0 0.75% 0.75% 0.75%; /* デフォルト（中間の投稿） */
}
.works-slider .slick-slide {
    overflow: hidden; /* はみ出しを防ぐ */
}
.works-slider .slick-slide img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* なめらかに拡大 */
}
.works-slider .slick-slide:hover img {  
}
.slide-item {
    position: relative;
    overflow: hidden;
    text-align: center;
}
.slide-image {
    width: 100%;
    height: auto;
    position: relative;
}
.slide-hover-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%; /* 下部40%をホバー領域に指定 */
    z-index: 2;
    background: transparent;
    pointer-events: auto; /* ← これがオフだとホバー検知されない */
}
.slide-image,
.slide-hover-area {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48cGF0aCBkPSJNMTgsNi40bDE4LDE4LTE4LDE4IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 10 10, auto;
}
.slide-content {
    position: absolute;
    font-size: 22px;
    text-align: left;
	line-height: 1.8;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 1.0);
    color: #000;
    padding: 2% 2% 0.8% 2%;
    opacity: 0;
    transition: opacity 0.3s ease; /* 表示/非表示時のアニメーション */
    pointer-events: none;
    visibility: visible; /* ← ここを変更 */
	display: flex;
    flex-direction: column; /* 縦方向に揃える */
    justify-content: flex-end; /* 下揃え */
}
.slide-hover-area:hover + .slide-content {
    opacity: 1;
    pointer-events: auto;
}
.slide-hover-area,
.slide-content {
    transition: opacity 0.3s ease;
}
.works-list {
    width: 100%;
    margin: 0.75% auto 0 auto;
}
.post-item {
}
.post-item:last-child .works-slider {
    padding: 0 0.75%;
	margin-bottom: 50px;
}
.post-content {
    text-align: center;
}
.post-title {
}
.post-overview {
}
.category-label {
	position: absolute;
    top: 0.5%;
    left: 2%;
    color: #fff;
    mix-blend-mode: difference;
    font-size: 22px;
    z-index: 10;
}

/* タッチデバイス（iPad含む）では100% */
@media (hover: none) and (pointer: coarse) {
    .slide-hover-area {
        height: 100%;
    }
}
@media screen and (max-width: 1365px) {
	
	.slide-hover-area {
		 /* height: 100%; 55% */
		}
}
@media screen and (max-width: 1024px) {
	
	.works-slider {
		padding: 0 2% 2% 2%; /* デフォルト（中間の投稿） */
	}
	.works-slider .slick-slide img {
        width: 100%; /* 横幅を親に合わせる */
        height: 100%; /* 高さも横幅に合わせる */
        aspect-ratio: 4 / 5; 
        object-fit: cover; /* 画像を中央に切り取り */
    }
	.slide-content {
		height: auto;
		font-size: 22px;
		line-height: 1.7;
		padding: 3%;
		opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.slide-hover-area:active + .slide-content {
        opacity: 1;
        visibility: visible;
    }
	.post-item {
	}
	.post-item:last-child .works-slider {
		padding: 0% 2% 0 2%;
		margin-bottom: 0;
	}
	.slide-title {
		padding-top: 0;
	}
	.works-list {
		width: 100%;
		margin: 2% auto 0 auto;
	}
	.slide-hover-area {
		height: 100%;  /* 55% */
	}
	.category-label {
		font-size: 22px;
		top: 0%;
        left: 1.5%;
	}
}

@media screen and (max-width: 768px) {
	
	.works-slider {
		padding: 0 2% 2% 2%; /* デフォルト（中間の投稿） */
	}
	.works-slider .slick-slide img {
        width: 100%; /* 横幅を親に合わせる */
        height: 100%; /* 高さも横幅に合わせる */
        aspect-ratio: 4 / 5; 
        object-fit: cover; /* 画像を中央に切り取り */
    }
	.slide-content {
		height: auto;
		font-size: 16px;
		line-height: 1.7;
		padding: 3%;
		opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.slide-hover-area:active + .slide-content {
        opacity: 1;
        visibility: visible;
    }
	.post-item {
	}
	.post-item:last-child .works-slider {
		padding: 0% 2% 0 2%;
		margin-bottom: 0;
	}
	.slide-title {
		padding-top: 0;
	}
	.works-list {
		width: 100%;
		margin: 2% auto 0 auto;
	}
	.slide-hover-area {
		height: 100%;  /* 55% */
	}
	.category-label {
		font-size: 16px;
        left: 10px;
	}
}



/* footer ALL
----------------------------------------------------------- */

#footer {
    width: 100%;
    overflow: hidden;
    display: flex; /* 横並びに配置 */
    align-items: center; /* 縦方向に中央揃え */
    justify-content: space-between; /* 左右に配置 */
    background: #fff; /* フッターの背景色 */
    padding: 0 0; /* 余白をリセット */
    position: fixed; /* フッターを固定表示 */
    bottom: 0;
    z-index: 1110; /* 他の要素より前面に表示 */
    height: 50px; /* 全体の高さを統一 */
}
.footer-toggle {
    display: flex;
    justify-content: center;
    align-items: center; /* ← ここで中央揃え */
    font-size: 22px;
    height: 100%; /* 高さを維持 */
    /* line-height: 50px; */
    /* background: #fff; */
    color: #000;
    cursor: pointer;
    border: none;
    z-index: 1100;
}
.footer-toggle .ap-icon {
    height: 1em;     /* 22px 相当 */
    width: auto;
    display: block;  /* 余分な隙間を防ぐ */
}
.footer-toggle:hover {
    /* background: #e0e0e0; ホバー時の背景色 */
    box-shadow: none; /* ホバー時の影を削除 */
}
.fixed-title {
    position: fixed;
    left: 0;
    /* bottom: 0;*/
    width: 100%;
    /* background: #fff; */
    font-size: 22px;
    /* line-height: 50px; */
    text-align: center;
    z-index: 1200;
    pointer-events: none;
}
.fixed-title {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.fixed-title span {
    display: block;
    color: #000;
}
.accordion-content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: height 0.3s ease;
	overflow: scroll;
    padding-bottom: 50px;
    z-index: 200;
}
.accordion-inner {
    /* padding: 0 2% 0 2%; */
}




@media screen and (max-width: 1024px) {
	
	#footer {
		height: 60px;
        padding: 0 5%; /* スマホ用の余白調整 */
    }
    .footer-toggle {
        line-height: 60px;
		font-size: 22px;
    }
	.fixed-title {
		flex: 3;
		letter-spacing: 0.03em;
		font-feature-settings: "palt";
		font-size: 22px;
		line-height: inherit;
    }
	.accordion-content {
		bottom: 0;
		overflow: scroll;
		padding-bottom: 0;
	}
	.accordion-inner {
        margin: 2% 3% 50px 3%;
        height: auto;
	}
}

@media screen and (max-width: 768px) {
	
	#footer {
		height: 45px;
        padding: 0 5%; /* スマホ用の余白調整 */
    }
    .footer-toggle {
        line-height: 45px;
		font-size: 16px;
    }
	.fixed-title {
		flex: 3;
		letter-spacing: 0.03em;
		font-feature-settings: "palt";
		font-size: 16px;
		line-height: inherit;
    }
	.accordion-content {
		bottom: 0;
		overflow: scroll;
		padding-bottom: 0;
	}
	.accordion-inner {
        margin: 2% 5% 50px 5%;
        height: auto;
	}
}



/* footer AP
----------------------------------------------------------- */

#toggle-ap {
	/* flex: 1; */
    min-width: 50px;
    position: relative;
    left: 3%;
    margin-left: 0;
}
.about-wrapper {
	display: flex;
    overflow: hidden;
    overflow-y: auto;
	line-height: 1.8;
}
.about-left {
	width: 50%;
    height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    font-size: 22px;
    left: 0;
    z-index: 1;
    /* padding-top: 120px; */
	padding-bottom: 40px;
}
.about-left ::-webkit-scrollbar { 
	display: none;
	scrollbar-width: none;
}
.about-left .content-center {
    text-align: center; /* テキスト中央揃え */
}
.about-right {
	width: 47%;
	/* height: 100vh; */
    height: 95vh;
    overflow-y: auto;
    font-size: 22px;
    position: relative;
    margin-left: 50%;
}

.about-right .scroll-content {
    /* padding: 0 0 25vh 0; */
    margin-bottom: 20%;
	padding: 0 0;
	text-align: justify;/* 両端揃え */
}
.about-right::-webkit-scrollbar { 
	display: none;
	scrollbar-width: none;
}


@media screen and (max-width: 1024px) {
	
	#toggle-ap {
		text-align: left;
		font-feature-settings: "palt";
        flex: 1;
        min-width: 50px;
		position: absolute;
        margin-left: 0;
    }
	.about-wrapper {
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
        height: calc(var(--vh) * 100); /* JSで更新 */
        min-height: 100vh;
		overflow: scroll;
    }
    .about-right {
		order: 2; /* 下に配置 */
		width: 100%;
		height: auto;
        display: block;
        position: relative;
        margin: 0 auto;
        overflow: initial;
		padding-top: 8vh;
		font-size: 22px;
    }
    .about-left {
		order: 1; /* 上に配置 */
		width: 100%;
		height: auto;
		display: block;
        position: relative;
		overflow: initial;
		margin: 10vh auto 0 auto;
		font-size: 22px;
    }
	.about-left .content-center {
		text-align: left;
	}
}

@media screen and (max-width: 768px) {
	
	#toggle-ap {
		text-align: left;
		font-feature-settings: "palt";
        flex: 1;
        min-width: 50px;
		position: absolute;
        margin-left: 1%;
    }
	.about-wrapper {
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
        height: calc(var(--vh) * 100); /* JSで更新 */
        min-height: 100vh;
		overflow: scroll;
    }
    .about-right {
		order: 2; /* 下に配置 */
		width: 100%;
		height: auto;
        display: block;
        position: relative;
        margin: 0 auto;
        overflow: initial;
		padding-top: 8vh;
		font-size: 16px;
    }
    .about-left {
		order: 1; /* 上に配置 */
		width: 100%;
		height: auto;
		display: block;
        position: relative;
		overflow: initial;
		margin: 10vh auto 0 auto;
		font-size: 16px;
    }
	.about-left .content-center {
		text-align: left;
	}
}


/* NEWS
----------------------------------------------------------- */  

#accordion-news {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    /* overflow: hidden; ← これを削除 or 無効化 */
    z-index: 1000; /* 他の要素より前面に */
    transition: height 0.3s ease-in-out; /* スムーズに開閉 */
}
#accordion-news.open {
    height: 100vh;
    display: block;
}
.news-wrapper.open {
    bottom: 0; /* 画面下からスライド */
}
.news-wrapper.open {
    height: 100vh;
}
.news-wrapper.open {
    bottom: 0;
}
.news-button {
    position: fixed;
	top: 22px;
    right: 32px;
    padding: 10px 15px;
    z-index: 1000;
	font-size: 20px;
    border: 1px solid #000;
    cursor: pointer;
    color: #000;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.news-button:hover {
}
.news-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0; /* 初期状態 */
    background: #fff;
    overflow: hidden;
    transition: height 0.3s ease-in-out; /* APと同じスムーズな開閉 */
    z-index: 1000;
}
.news-left {
    display: flex;
    justify-content: center;
    position: absolute;
	font-size: 20px;
	text-align: center;
    width: 70%;
    height: 80vh;
	margin-left: 55%;
    padding: 5% 7.5% 5% 5%;
    left: 0;
	z-index: 110;
}
.news-right {
	position: relative;
	font-size: 20px;
    width: 70%;
    height: 100vh;
    overflow-y: auto;
	margin-left: 55%;
    padding: 5% 7.5% 5% 5%;
	z-index: 110;
}
.news-title-wrapper {
    text-align: center;
    position: fixed;
    bottom: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
.news-container {
    position: relative;
    width: 100%;
    height: 97vh;
    overflow-y: auto;
}
.news-item {
	display: flex;
    align-items: flex-start;
    width: 100%;
	overflow: visible;
}
.news-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.news-item:last-child {
	margin-bottom: 30vh;
}
.news-item-title {
    font-size: 1em;
    margin: 0;
}
.news-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.news-content .news-item-content {
    display: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.news-content .news-item-content.active {
    display: block;
    opacity: 1;
}

.news-body {
    position: relative;
    /* top: 12vh; ← 削除する */
    padding-top: 0;
    font-size: 22px;
    display: flex;
    align-items: flex-start;
    gap: 4%;
    width: 58.5%;
    margin: 0 0 5% auto;
}

.news-title {
    position: sticky;
    width: 30%;
    top: 12vh;/* 20vh */
	padding-top: 0;
    text-align: center;
	/* line-height: 1.9; */
    /* padding-bottom: 2%; */
    z-index: 10;
	transition: opacity 0.3s ease-in-out;
}
.news-content {
    width: 61%;
    /* padding: 20px; */
	text-align: justify;/* 両端揃え */
}
.news-tit {
	/* line-height: 2; */
    /* padding-top: 0.25%; */
    padding-bottom: 0.25%;
}
.news_tbx {
    position: relative;
	display: flex;
    justify-content: center;
    align-items: center;
	top: 50vh;
    font-size: 20px;
    text-align: center;
    width: 25%;
    height: 100vh;
    margin-left: 45%;
    z-index: 110;
}
.news_hbx {
	position: relative;
    width: 65%;
    height: 100vh;
    font-size: 20px;
    overflow-y: auto;
    /* margin-left: 55%; */
    padding: 5% 7.5% 5% 5%;
    z-index: 110;
}
/* タイトルを50vhに固定 */
.news-title-wrapper {
    position: sticky;
    width: 100%;
    top: 250px;
    /* tranform: translateY(-50%); */
    text-align: center;
    z-index: 10;
}
/* タイトルが次の本文と交差するタイミングで移動 */
.news-item:last-child .news-title-wrapper {
    top: 250px;
    /* transform: translateY(-50%); */
}


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

	.news-button {
		font-size: 22px;
		top: 22px;
		right: 22px;
	}
	#accordion-news {
		padding-top: 0;
		/*padding-top: 5vh;*/
	}
	.news-container {
	}
	.news-item {
		padding: 0;
	}
    .news-item:first-child {
        padding-top: 12vh;
    }
    .news-item:last-child {
        margin-bottom: 15vh;
    }
    .news-wrapper {
        flex-direction: column;
        height: 100vh;
    }
	.news-header {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
        position: sticky;
        top: 0;
        background: #fff;
        padding: 10px;
        z-index: 10;
    }
    .news-title {
        width: 25%;
		top: 12vh;
        font-size: 16px;
        text-align: left;
		line-height: 1.7;
		padding-left: 4%;
    }
	.news-body {
		width: 100%;
        top: 0;
        font-size: 16px;
        line-height: 1.8;
        position: relative;
        /* margin: 0 auto 15% 0;*/
		margin: 0 auto 7% 0;
        padding: 0 0;
	}
	.news-content {
		width: 68%;
	}
	.news-right {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		padding: 0;
		position: relative;
		margin-left: 0;
	}
	.news_tbx {
		top: 0;
		height: auto;
		margin-left: 0;
	}
	.news_hbx {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		padding: 0;
		position: relative;
		margin-left: 0;
	}
	.news-item:last-child .news-title-wrapper {
		top: 75px;
		transform: translateY(-50%);
	}
	.news-title-wrapper {
		top: 75px;
        /* display: none;*/
    }
}



@media screen and (max-width: 768px) {
	
	.news-button {
		font-size: 16px;
        top: 16px;
        right: 16px;
	}
	.news-container {
        height: 97vh;
        overflow-y: auto; /* ← scroll → auto に変更してスクロール安定化 */
        -webkit-overflow-scrolling: touch;
        position: relative;
        min-height: 0; /* Safariでstickyが効かない場合に必要 */
    }
	.news-title {
        width: 25%;
		top: 12vh;
        font-size: 16px;
        text-align: left;
		line-height: 1.7;
		padding-left: 4%;
    }
	.news-body {
		width: 100%;
        top: 0;
        font-size: 16px;
        line-height: 1.8;
        position: relative;
        /* margin: 0 auto 15% 0;*/
		margin: 0 auto 7% 0;
        padding: 0 0;
	}
}


/* footer WORKS
----------------------------------------------------------- */

#toggle-works {
	/* flex: 1; */
    min-width: 50px;
    position: relative;
    right: 1%;
    margin-right: 2%;
}
#works-list {
    padding-top: 2%;
}
.work-item a {
    display: flex;
    flex-direction: column;
}
.work-item .title {
    order: 1; /* 通常は先頭 */
}
.work-item .meta {
    order: 2; /* 通常は後 */
}
#works-list .work-item a {
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    font-size: 22px;
    line-height: 1.8;
}
#works-list .work-item a .category {
    color: #000;
    flex: 1; /* カテゴリーを柔軟に配置 */
    text-align: center;
}
#works-list .work-item a .title {
    color: #000;
    text-align: center; /* タイトルを中央揃え */
    flex: 3; /* タイトルに広いスペースを割り当て */
}
#works-list .work-item a .year {
    color: #000;
    flex: 1; /* 年に柔軟なスペースを割り当て */
    text-align: center;
	margin-left: -0.1em;
}
.work-item {
  position: relative;
  list-style: none;	
}
.work-item a {
  display: flex;
  justify-content: center; /* タイトルを中央に */
  align-items: center;
  position: relative;
  padding-right: 140px; /* 右端スペース */
  text-decoration: none;
  color: inherit;
}
.work-item .title {
  font-weight: bold;
  text-align: center;
  z-index: 1;
}
.work-item .meta {
  position: absolute;
  right: 3%;
  font-size: 1em;
  color: #666;
  white-space: nowrap;
}
.work-item .category {
  margin-right: -0.1em;/* margin-right: 0.5em */
	
}
.works-content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: height 0.3s ease;
	overflow: scroll;
    padding-bottom: 50px;
    z-index: 200;
}
.works-inner {
    /* padding: 0 2% 0 2%; */
}

@media screen and (max-width: 1024px) {
	
	#toggle-works {
        text-align: left;
		font-feature-settings: "palt";
        flex: 1;
        min-width: 50px;
		position: absolute;
        margin-left: 0;
	}
	.works-content {
		bottom: 0;
		overflow: scroll;
		padding-bottom: 0;
	}
	#accordion-works {
		padding-bottom: 0;
	}
	.works-inner {
        margin: 2% 3% 50px 5%;
        height: auto;
	}
	.work-item a {
		display: flex;
		flex-direction: column;
	}
	.work-item .title {
		order: 1; /* 通常は先頭 */
	}
	.work-item .meta {
		order: 2; /* 通常は後 */
	}
	.work-item .meta {
		position: absolute;
		right: 0;
		font-size: 22px;
		color: #666;
		white-space: nowrap;
	}
	.work-item .category {
		margin-right: 0;/* margin-right: 0.5em */
		margin-right: -0.1em;
	}
	.works-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0;
		background: #fff;
		transition: height 0.3s ease;
		overflow: scroll;
		padding-bottom: 50px;
		z-index: 200;
	}
	.works-inner {
		/* padding: 0 2% 0 2%; */
	}
	#works-list {
		padding-top: 0;
	}
	#works-list .work-item a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		font-size: 18px;
		line-height: 1.8;
	}
	#works-list .work-item a .category {
		color: #000;
		flex: 1; /* カテゴリーを柔軟に配置 */
		text-align: center;
	}
	#works-list .work-item a .title {
		color: #000;
		text-align: center; /* タイトルを中央揃え */
		flex: 3; /* タイトルに広いスペースを割り当て */
		font-size: 22px;
	}
	#works-list .work-item a .year {
		color: #000;
		flex: 1; /* 年に柔軟なスペースを割り当て */
		text-align: center;
		margin-left: -0.1em;
	}
	.work-item {
		margin-bottom: 0.2em;/* 0.5em */
	}
}

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

	#toggle-works {
        flex: 1;
        min-width: 50px;
		position: absolute;
        margin-right: 4%;
	}
	.works-content {
		bottom: 0;
		overflow: scroll;
		padding-bottom: 0;
	}
	#accordion-works {
		padding-bottom: 10%;
	}
	.works-inner {
        margin: 2% 5% 50px 5%;
        height: auto;
	}
	#works-list {
		padding-top: 2%;
	}
	#works-list .work-item a {
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        font-size: 16px;
        line-height: 1.5;
		line-height: 1;
    }
    #works-list .work-item a .category,
    #works-list .work-item a .title,
    #works-list .work-item a .year {
        width: 100%; /* 各要素がフル幅を取る */
        text-align: right; /* スマホでは右揃え */
		font-size: 16px;
		line-height: 1.3; /* 1.7 */
		/* margin-left: -0.1em; */
    }
    #works-list .work-item a .title {
        margin: 0; /* タイトル間の余白を追加 */
		margin-top: 4px;	
    }
	.work-item {
		margin-bottom: 0.8em;/* 0.5em */
	}
	.work-item a {
		display: block; 
		padding-right: 0;
		text-align: center; 
	}
	.work-item .category {
		margin-right: -0.1em;/* margin-right: 0.5em */
	}
	.work-item a .year {
		margin-left: -0.1em;
    }
	.work-item .meta {
		position: static;
		margin-top: 4px;
		font-size: 1em;
		color: #666;
	}
	.work-item .title {
		display: block;
		font-weight: bold;
		text-align: center;
		margin-bottom: 4px;
	}
	.work-item .title {
        order: 2;
    }
    .work-item .meta {
        order: 1;
    }
}




.close-button {
    position: fixed;
    top: 22px;
    right: 32px;
    font-size: 20px;
    padding: 10px 15px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: transparent;
    color: #000;
    cursor: pointer;
    text-align: center;
    z-index: 2000;

    /* ▼ 初期表示を完全に防ぐための重要ポイント */
    /* display: none !important;         初期は表示しない */
    opacity: 1 !important;            /* 完全に透明 */
    pointer-events: none !important;  /* クリック等も無効 */
    transition: none !important;      /* チカッ・ふわっと防止 */
}

.close-button:hover {
    background-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 1024px) {
    .close-button {
        font-size: 22px;
        top: 26px;
        right: 26px;
    }
}

@media screen and (max-width: 768px) {
    .close-button {
        font-size: 16px;
        top: 16px;
        right: 16px;
    }
}






/* ABOUT */
.team-member {
	/* line-height: 1; */
}
.member-photo {
    width: 50%;
    aspect-ratio: 4 / 3;
    margin: 0;
}
.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.member-info {
    width: 100%;
    margin: 0;
    /* line-height: 1.8; */
	font-feature-settings: "palt";
}

@media screen and (max-width: 1024px) {
	
    .member-photo {
        width: 100%;
    }
    .member-info {
        width: 100%;
        /* margin-top: 1em; */
    }
}

/*  マージン / テキスト
----------------------------------------------------------- */ 

.m_b2p {
	margin-bottom: 2%;
}
.m_t5p {
	margin-top: 5%;
}
.m_b5p {
	margin-bottom: 5%;
}
.m_t10p {
	margin-top: 10%;
}
.m_b10p {
	margin-bottom: 10%;
}
.m_t20p {
	margin-top: 20%;
}
.m_b20p {
	margin-bottom: 20%;
}
.m_t30p {
	margin-top: 30%;
}
.m_b30p {
	margin-bottom: 30%;
}
.m_t40p {
	margin-top: 40%;
}
.m_b40p {
	margin-bottom: 40%;
}
.m_lr10p {
	margin: 0 10%;
}
.p_lr10p {
	padding: 0 10%;
}
.p_t10p {
	padding: 10% 0 0 0;
}
.bold {
	font-weight: bold;
}
.cent {
	text-align:center;
}

/* fadein
---------------------------------------------------- */
.fadein {
	opacity : 0;
	transform: translateY(20px);
	transition: all 1s;
}

/*  トップへ戻るボタン
----------------------------------------------------------- */ 

#re-top {
	position:fixed; /*画面に固定*/
	bottom:0%; /*画面下へ*/
	right:0%; /*画面右へ*/
	z-index:10; /*レイヤー順序を上に*/
	background-color:transparent; /*領域の背景色（透明）*/
}
.re-topB {
	position:relative;
	display:block; 
	background-color:rgba(0,0,0,0.3); /*丸ボタンの色*/
	color:rgb(255,255,255); /*三角と文字色*/
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:50px;
	height:50px;
	text-align:center;
	line-height:20px;
	padding-top:30px;
}
.re-topB:before {
	font-family: FontAwesome;
	content:'\f106';
	position:absolute;
	top:15px;
	left:2px;
	width:100%;
	text-align:center;
	font-size:40px;
}


.tap-instruction {
    display: none; /* デフォルトは非表示（PC用） */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    width: 80%;
    max-width: 220px;
}
.tap-instruction.show {
    opacity: 1;
}
.tap-instruction img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@media screen and (max-width: 768px) {
    .tap-instruction {
        display: block;  /* スマホでは表示 */
        width: 100%;
        max-width: 220px;
    }
}