@charset "utf-8";

/* モニター768px以下の時のスタイル */
@media screen and (max-width: 768px) {
    header, nav, #breadcrumb,#graphic, #contents, footer {
        margin: 0 auto;
        width: 95%; /* 画面幅の95%に */
    }
img {
	width: 100%;
}

/* ヘッダー */
header h1 {
    text-align: center;
    /* ロゴの画像サイズに合わせて調整 */
    width: 50%; /* ロゴもレスポンシブに */
    margin: 0 auto;
    padding: 10px 0 15px 0; /* 下余白を調整 */
}
header h1 img {
    max-width: 100%;
    height: auto;
}

#graphic {
	box-sizing: border-box;
	height: auto;
	padding-top: 10px;
}
#graphic ul li {
	box-sizing: border-box;
	width: 100%;
}
#graphic ul li img {
	max-width: 100%;
	width: 100%;
}

/* ナビゲーション */
nav ul {
	margin: 0;
	list-style-type: none;
	overflow: hidden;
    width: 100%; /* 親要素(nav)の幅に合わせる */
    padding-left: 0; /* 念のためリセット */
}
nav ul li {
	float: left;
	box-sizing: border-box;
	width: 50%; /* 2列表示 */
}
/* 各liのボーダーを汎用的に設定 */
nav ul li:nth-child(odd) { /* 1番目と3番目の項目 */
    border-right: 1px solid #ffffff;
}
nav ul li:nth-child(1),
nav ul li:nth-child(2) { /* 1番目と2番目の項目 */
    border-bottom: 1px solid #ffffff;
}

/* navのaタグのスタイル */
nav ul li a {
	height: 44px; /* 高さ固定 */
	padding-top: 0; /* 上パディングリセット */
	background: #2D2D2D none;
	color: #f3f2e9;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	line-height: 44px; /* heightと同じにして垂直中央揃え */
    display: flex; /* flexboxを使って中央寄せ */
    justify-content: center;
    align-items: center;
}
/* 各liの個別の背景画像を上書きするための修正 */
nav ul li#nav_photography a,
nav ul li#nav_newstag a,
nav ul li#nav_biography a,
nav ul li#nav_contact a {
    background-image: none !important; 
}

/* hover時や現在ページ時のスタイルも同様に修正 */
nav ul li a:hover,
#photography #nav_photography a,
#newstag #nav_newstag a,
#biography #nav_biography a,
#contact #nav_contact a {
	background-color: #6c5f45;
	color: #f3f2e9;
    background-image: none !important;
}
/* メインコンテンツエリア */
#main {
	width: 100%; /* #main を親要素の幅に合わせる */
	float: none; /* float解除 */
}
#main h2{
    margin: 30px 0 0 0;
    padding: 0;
    font-size: 112.5%;
}
#sub {
	margin: 40px 0 0 0;
	float: none; /* float解除 */
    width: 100%; /* 幅を親に合わせる */
}

/* ニュースリストの調整 */
#news ul{
    padding-left: 0%;
}
#news ul li {
    width: auto; /* 幅をautoにすることで親要素の幅に追従 */
	float: none; /* float解除 */
    padding: 20px 10px; /* 左右のパディングを調整 */
    text-indent: 0; /* text-indentリセット */
    text-align: left; /* テキストを左寄せ */
}
#news ul li time {
    display: block; /* 日付をブロック要素にして改行 */
    width: auto; /* 幅をautoに */
    margin-bottom: 5px; /* 日付とテキストの間に余白 */
}

/* 共通 */
#maingallery {
    width: 100%;
}

/* photographyページ共通のh1 */
#maingallery h1, #news h1 { /* news h1も追加 */
    padding: 20px 10px; /* 左右のパディングを調整 */
    font-size: 1.2em; /* フォントサイズを調整 */
    text-align: center; /* 中央寄せ */
    background-image: none; /* 背景画像を解除または調整 */
    margin: 0;
}
#main h1 { /* photography以外のメインコンテンツのh1も調整 */
    padding: 20px 10px;
    font-size: 1.2em;
    text-align: center;
    background-image: none;
    margin: 0 0 20px 0;
}
#maingallery h2, .photospace h2 {
    font-size: 1.2em; /* フォントサイズを調整 */
}

    /* スライダー */
.slider-wrapper {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    touch-action: auto !important;
}

.slider-container {
    width: 100% !important;
    margin: 20px auto 40px auto;
    overflow: hidden;
    touch-action: auto !important;
}

.slider-item {
    min-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-basis: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}

.slider-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    -webkit-user-drag: none;
    user-drag: none;
}

/* ナビ */
.swiper-button-prev,
.swiper-button-next {
    padding: 15px 15px;
    --swiper-navigation-size: 15px !important;
    top: calc(50% - 15px) !important;
}

/* photospace */
.photospace {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around; /* 均等に配置 */
    width: 100%; /* 親要素（#maingalleryの100%）に合わせる */
    padding: 0 5px; /* 左右に少し余白 */
    box-sizing: border-box;
}
.photo {
    width: calc(50% - 10px); /* 2列表示で間に10px程度の余白 */
	padding: 5px 0; /* 上下のパディングを調整 */
	margin-bottom: 10px;
	box-sizing: border-box;
    /* transition: opacity 0.4s ease; はstyle.cssで定義されているので不要 */
}
/* スマホ縦持ちなど、さらに狭い場合は1列表示にすることも検討 */
/*
@media screen and (max-width: 320px) {
    .photo {
        width: 100%;
    }
}
*/
.thumbnail {
	width: 100%; /* 親要素.photoの幅に合わせる */
	height: auto;
}
/* Biography */
.biographyimage img {
    width: 100%;
    height: auto;
}

/* Contactフォーム */
 form p {
        display: block;
        width: 100%;
    }
    input[type="text"], input[type="email"], textarea {
        width: 100%; /* スマホ幅いっぱい */
    }

/* フッター */
footer {
	padding-top: 30px;
    text-align: center; /* 中央寄せ */
}
#pagetop, #copyright {
    float: none; /* float解除 */
    display: block; /* ブロック要素に */
    margin: 5px auto; /* 中央寄せ */
}
#pagetop a{
    display: block;
    padding: 0;
}

/* パンくずリスト */
#breadcrumb ul {
    list-style-type: none;
    margin: 0;
	padding-top: 5px;
    text-align: left;
    font-size: 0.9em;
}
#breadcrumb ul li {
    display: inline;
    margin-right: 5px;
}

/* その他の既存スタイル調整 */
.bnr_inner a p img {
    max-width: 100%;
    height: auto;
}
.concept_box {
    margin-bottom: 20px;
}
.image_right, .image_left {
    float: none; /* float解除 */
    margin: 10px auto; /* 中央寄せ */
    max-width: 90%; /* 画像を親要素に収める */
    height: auto;
    display: block;
}
table {
    width: 100%; /* テーブルの幅を100%に */
    display: block; /* スマホでスクロール可能にするため */
    overflow-x: auto; /* 必要に応じて横スクロール */
    -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
}
table th, table td {
    padding: 10px; /* パディングを調整 */
    font-size: 0.9em; /* フォントサイズを調整 */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}
form p {
    margin-bottom: 15px; /* マージンを調整 */
}
input[type="text"], input[type="email"], textarea {
    width: calc(100% - 20px); /* 親要素の幅に合わせて調整（パディング分を引く） */
    box-sizing: border-box;
    padding: 8px; /* パディングを追加 */
}
textarea {
    height: 80px; /* 高さを調整 */
}