@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
img,abbr,acronym,fieldset{border:0;}
body{
	font: 13px "Shippori Mincho B1", serif, Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 200;
	-webkit-text-size-adjust:100%;
	color: #000;
}

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

a:hover, .active{
  border-bottom: solid 0px #000;
}

.under1 {
  border-bottom: solid 2px #000;
      line-height: 1.2;
}
.under2{
  border-bottom: solid 1px #000;
}
.text2{
	font-size: 10.5px;
}
a:active, a:focus,input:active, input:focus{outline:0;}
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全体の設定 */
html {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

body {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
}

/* スクロールバーを細くする */
html::-webkit-scrollbar {
    width: 3px;
}

html::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

html::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* ヘッダーとメニュー */
header {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1000px;
    z-index: 10;
	letter-spacing: 0.1em;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 10px 0;
}

nav ul li {
    font-size: 15px;
	margin-top:10px;

}

/* menu----------------------------------------------------------------------- */

/* タイトルを左端に固定 */
.title {
    margin-right: auto; /* 右側のメニューとの間隔を最大化 */
}

/* メニューアイテムの調整 */
.menu-item {
    margin-left: 35px; /* メニュー間の間隔 */
}

/* メニュー全体を右寄せにするためのコンテナ */
nav ul {
    display: flex;
    align-items: center;
}

/* works, news, cv を右側に寄せる */
.works,
.news,
.cv,
.insta {
    position: relative;
}

/* works を右端から20%（約200px）離れた位置に */
.ex {
    margin-right: 1vw; /* 右端から20%離す（間隔調整込み） */
}

/* news と cv を均等に配置 */
.work {
    margin-right: 1vw; /* cv との間隔 */
}

.cv{
	    margin-right: 1vw; /* cv との間隔 */
}
.insta{
	    position: relative;
}


/* 動画埋め込み -------------------------------------------------------*/

/* メインコンテンツ -------------------------------------------------------*/
main {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.snap-item {
    width: 100%;
    max-width: 1000px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding-top: 50px; /* headerの高さ分を確保 */
    box-sizing: border-box;
}

/* デバッグ用背景色（確認後削除可） */
.snap-item:nth-child(odd) {
    background-color: ;
}

.snap-item:nth-child(even) {
    background-color: ;
}

/* 画像とキャプションのコンテナ */
.image-container {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-container img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    max-height: calc(85vh - 50px);
    object-fit: contain;
}

.caption {
     padding: 10px 0 0 0;
    text-align: left;
    color: #000;
    width: 100%;
    background: transparent;
    flex-shrink: 0;
    position: relative;
}

.caption p {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.caption p a{
	  border-bottom: none;
	      font-size: 12px;
}

/* Swiperスライダー */
.swiper-container {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    position: relative;
}

.swiper {
    width: 100%;
    max-width: 1000px;
/*	height: min(667px, calc(100vh - 150px));*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Swiperのデフォルト矢印を無効化 */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
}

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

.swiper-slide img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    max-height: min(667px, calc(100vh - 100px));
    object-fit: contain;
}

/* ナビゲーション矢印 */
.swiper-button-prev,
.swiper-button-next {
    color: #000 !important;
    width: 40px !important;
    height: 40px !important;
    position: absolute !important;
    top: 48.5% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin-top: 0 !important; /* Swiperデフォルトのマージンを上書き */
	
}

.swiper-button-prev {
    left: -50px !important; /* スライダーの左外側 */
}

.swiper-button-next {
    right: -50px !important; /* スライダーの右外側 */
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 20px !important;
}

/* カウンター */
.swiper-counter {
    font-size: 12px;
    color: #000;
    position: absolute;
    right: 0;
    top: 0;
}

.swiper-slide img {
    width: 100%;
    height: auto; /* 高さを自動調整 */
    max-height: min(80vh, 667px); /* 画面の高さに応じて制限 */
    object-fit: contain; /* 画像のアスペクト比を保持 */
}
.image-container img {
    width: 100%;
    height: auto; /* 高さを自動調整 */
    max-height: min(80vh, 850px); /* 画面の高さに応じて制限 */
    object-fit: contain; /* 画像のアスペクト比を保持 */
}
.snap-item {
    width: 100%;
    max-width: 1000px;
    height: auto; /* 固定の高さを解除 */
    min-height: 100vh; /* 最低限の高さを確保 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding-top: 50px;
    box-sizing: border-box;
}
    .swiper-container {
        margin-bottom: 60px; /* 間隔を広げる */
    }
/*-------------------- cv------------------------------------------------------------- */
.content{
		line-height: 2.0;
	letter-spacing: 0.12em;	
	padding:15vh 0 0 15vw ; 
	max-width:1000px;
}

	.bio{
		position: relative;
		left: 45px;
	}
/*-------------------- iframe------------------------------------------------------------- */	
iframe {
    width: 100%;
    max-width: 1000px;
    height: auto;
    aspect-ratio: 16 / 9; /* アスペクト比を維持 */
    border: none;
    max-height: 80vh; /* 画像と同じようにビューポートの高さに制限 */
    object-fit: contain; /* アスペクト比を保ちつつ収まるように */
}
/*-------------------- レスポンシブ対応--------------------------------------------------- */
@media (max-width: 1090px) {
	
    .swiper-button-prev {
        left: 1vw !important; /* レスポンシブ時は内側に */
    }

    .swiper-button-next {
        right: 1vw !important; /* レスポンシブ時は内側に */
    }

.swiper-button-prev,
.swiper-button-next {
    top: 50% !important;
	width: 3.5vw !important;
    height: 10vw !important;
	opacity:40%;
}	

	.bio{
		width:90%;
	}	
@media (min-width: 1001px) {
    iframe {
        max-height: 80vh; /* 縦幅が狭い場合にビューポートに収まる */
        object-fit: contain;
    }
	
}	
@media (max-width: 1000px) {
    body, header {
        width: 93vw;
    }

    html {
        scroll-snap-type: none; 
    }

	.content{
	width:1000px;
		max-width:100%;
			padding:160px 0 0 10vw ; 
	}

    .image-container, .swiper-container, .swiper-slide {
        width: 100%;
        height: auto;
    }
    .image-container img,
    .swiper-slide img {
        width: 100%;
        height: auto; /* 高さを自動に */
        max-height: 70vh; /* 画面が小さい場合に調整 */
    }
    .image-container img, .swiper-slide img {   
    max-height: 750px; 
    }

    .swiper {
        height: auto; /* Swiperの高さも自動に */
        max-height: none; /* 固定の高さを解除 */
    }
    .swiper-slide img {
        height: 66vw; /* 66vwを解除 */
    }
    .caption {
        padding: 1vw 0 0 0; /* キャプションの余白も調整 */
        margin-bottom: 3.5vw;
    }
.swiper-button-prev,
.swiper-button-next {
    top: 47% !important;
}	
    .swiper-container {
        margin-bottom: 3.5vw;
    }
    .snap-item {
        min-height: 66vw; /* 必要に応じて最小の高さを設定（例: ビューポート高さの50%） */
        height: auto;
       margin: 0 0 4vw 0; 
    }



    .image-container iframe {
        width: 100%;
        max-width: 100%;
		max-height: 70vw;

    }

    iframe {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 700px) {
.works {
    margin-right: 2%; /* 右端から20%離す（間隔調整込み） */
}

/* news と cv を均等に配置 */
.news {
    margin-right: 1%; /* cv との間隔 */
}
    .snap-item {
        margin: 0 0 2vw 0; /* さらに間隔を狭める */
    }
    .swiper-container {
        margin-bottom: 2vw;
    }

    .caption {
        margin-bottom: 0;
    }
.menu-item {
    margin-left: 3vw; /* メニュー間の間隔 */
}	

	
@media (max-width: 650px) {
.swiper-button-prev,
.swiper-button-next {
    top: 52% !important;
}
.content{
	width:1000px;
	max-width:100%;
	padding:160px 0 50px 1vw;
}
header {
	letter-spacing: 0.05em;
}
nav ul li {
    font-size: 15px;
}	
	.ex {
		margin-right: 1vw; 
	}
	.work {
		margin-right: 1vw;
	}
	.cv{
			margin-right: 1vw;
	}	


@media (max-width: 400px) {
.swiper-button-prev,
.swiper-button-next {
    top: 52% !important;
}	

@media (max-width: 380px) {
nav ul li {
    font-size: 12px;
}	

}