@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------
	kilim
------------------------------------------------------------*/
#pagePath a {
    margin-right: 3px;
    display: inline-block;
	color: #5D5A5A;
}
.content {
	width: 920px;
}
.maintop {
	width: auto;
	padding-top: 66px;
	color: #8B0000;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
	}
.topTxt_2 {
	margin: 30px 0px 60px;
	text-align: center;
	font-size: 2.2rem;
	line-height: 1.94;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
	}
.des_Box_top {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 20px auto 100px;
}
.i_2d {
	width: 260px;
	padding: 55px 0px 0px 0px;
}
.i_2d_2 {
	width: 240px;
	padding: 5px 0px 0px 0px;
}
.i_2d_3 {
	width: 260px;
	padding: 45px 0px 0px 0px;
}
.i_2d_4 {
	width: 240px;
	padding: 20px 0px 0px 0px;
}

/*.i_top {
	margin-bottom: 50px;
	text-align: center;
}
.i_top img {
	width: 800px;
}
.i_top {
    position: relative;
    z-index: 1; 
}
.i_top:before {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 	70%;
    left: 10%;
    transform: translate(-50%, -50%); 
    border-radius: 70px;
    background-color: rgba(252 250 161 / 38%);
    content: '';
    z-index: -1; 
}
.i_top:after  {
    width: 800px;
    height: 360px;
    position: absolute;
    top: 10%; 
    left: 93%;
    transform: translate(-50%, -50%); 
    border-radius: 70px;
    background-color: rgba(75, 112, 170, 0.15);;
    content: '';
    z-index: -1;
}*/
.des_Box {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 100px auto 30px;
}
.des_Box_mp {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 50px auto 30px;
	width: 800px;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.des_Box_mp_2 {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 50px auto 30px;
	width: 920px;
}
.des_Box_mp_5 {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 50px auto 30px;
	width: 800px;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.d_movieBox {
	width: 800px;
	margin: 50px auto 30px;
}
.movieBox {
    /* 親要素の幅を決める (例: 100%または固定値) */
    width: 100%; /* 例として親要素の幅を80%に設定 */
    max-width: 800px; /* 最大幅を設定 */
    
    /* 縦横比を16:9（一般的な動画の比率）に固定 */
    position: relative;
    padding-top: 56.25%; /* 9 / 16 * 100 = 56.25% */
    height: 0;
	margin: auto;
}
.movieBox iframe {
    /* 親要素のサイズに合わせて広げる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.photo_1 {
	width: 45%;
}
.text_1 {
	width: 50%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.photo_2 {
	width: 35%;
}
.text_2 {
	width: 60%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.photo_df_f_01 {
	width: 45%;
}
.text_df_f_01 {
	width: 51%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.photo_df_f_02 {
	width: 45%;
}
.text_df_f_02 {
	width: 50%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.photo_df_b_02 {
	width: 50%;
}
.text_df_b_02 {
	width: 45%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.des_Box_mp_c_01 {
	width: 800px;
	margin: auto;
	text-align: right;
}
.photo_df_c_01 {
	width: 75%;
}
.des_Box_mp_3 {
	display: flex; /* 要素を横並びにする */
 	justify-content: space-between; /* 要素間に均等なスペースを空ける */
	margin: 50px auto 30px;
	width: 920px;
}
.photo_df_f_03_1 {
	width: 435px;
}
.photo_df_f_03_2 {
	width: 435px;
	display: flex;
	flex-direction: column;
    justify-content: space-between;
}
.df_im_list {
	margin: 100px auto 130px;
}
.photo_3 {
	width: 45%;
}
.text_3 {
	width: 50%;
	font-size: 1.4rem;
	line-height: 1.94;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.d_text {
	font-weight: 600;
	font-size: 30px;
}
.d_text_1 {
	font-weight: 600;
	font-size: 30px;
}
.d_text_1_s {
	font-weight: 500;
	margin-bottom: 10px;
	font-size: 25px;
}
.d_text_2 {
	font-weight: 500;
	margin-bottom: 20px;
	font-size: 21px;
}
/*.text_photo {
	/*display: flex;*/
.d_img_3 {
	width: 250px;
	padding-left: 283px;
}
.des_pro {
	margin-top: 100px;
}
.d_rogo {
	text-align: center;
	margin: auto;
}
.d_rogo img {
	height: 100px;
}
.d_text_1 {
	font-weight: 600;
	font-size: 30px;
	text-align: center;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
}
.galNavi {
    width: 80%;
 	margin: 40px auto 100px;
	border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
	text-align: center;
	white-space: nowrap;
		overflow: scroll;
	}
.galNavi li {
		display:inline-block;
	}
.galNavi ul{
		display: inline-flex;
		text-align: center;
	}
.galNavi .ganaviList a {
		padding: 15px 15px 10px 5px;
		color: #E60012;
		font-size: 1.3rem;
		display: flex;
		font-family: "yu-mincho-pr6",sans-serif;
	}
.df_f_photo {
		margin: auto;
		width: 350px;	
		display: flex;
		justify-content: center;
}
.acc_t {
	margin: 60px 60px 40px;
	font-family: ｍｓ 明朝, ms mincho, ヒラギノ明朝 pro w3, hiragino mincho pro, serif;
	text-align: left;
	font-size: 1.4rem;
	line-height: 1.94;
}
.lighting_s {
	margin-bottom: 34px;
    display: flex;
    flex-wrap: wrap;
	align-content: center;
	align-items: center;
}
.lighting_s li {
	margin: 20px;
    width: 250px;
	text-align: center;
	
	
}
.lighting_s li span {
	font-size: 25px;
}
.lighting_i {
	margin-bottom: 20px;
}

/* ギャラリーコンテナのスタイル */
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin-top: 50px;
}
.image-item {
	width: 100%; /* モバイルでの幅 */ /* デスクトップでの最大幅 */
	position: relative; /* オーバーレイテキストの配置基準 */
	overflow: hidden; /* 拡大した画像がはみ出さないように隠す */
	cursor: pointer;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.image-item:hover {
	transform: translateY(-5px); /* ホバーで少し浮き上がる */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* 画像自体のスタイル */
.image-item img {
	width: 250px;
	height: 250px;
	display: block; /* 画像の下にできる余白をなくす */
	object-fit: cover; /* 画像の比率を保ちつつコンテナに収まるようにする */
	transition: transform 0.3s ease-in-out; /* 変化を滑らかにするためのトランジション */
}
/* ホバー時の画像拡大 */
.image-item:hover img {
	transform: scale(1.05); /* 1.05倍に拡大 */
}

/* ホバー時のオーバーレイテキスト */
.overlay-text {
	position: absolute;
	top: 0; /* 画像全体に被せる */
	left: 0;
	width: 100%;
	height: 100%; /* 画像全体に被せる */
	background-color: rgba(255, 255, 255, 0.8); /* 半透明の黒背景 */
	color: black;
	font-size: 15px; /* テキストサイズを少し大きく */
	display: flex; /* テキストを中央に配置するためにflexboxを使用 */
	flex-direction: column;
	align-items: center; /* 垂直方向中央寄せ */
	justify-content: center; /* 水平方向中央寄せ */
	opacity: 0; /* 最初は透明で隠しておく */
	transition: opacity 0.3s ease-in-out; /* 透明度の変化を滑らかに */
	box-sizing: border-box; /* paddingを含めた幅を100%にする */
	padding: 1rem; /* テキストが端に寄りすぎないようにパディングを追加 */
	text-align: center; /* 中央揃え */
}
.overlay-text span {
	font-size: 12px;
}

/* ホバー時にテキストを表示 */
.image-item:hover .overlay-text {
	opacity: 1; /* ホバー時に表示 */
}

        /* --- モーダルウィンドウのスタイル --- */
        .modal {
            display: none; /* 最初は非表示 */
            position: fixed; /* 画面全体を覆う */
            z-index: 1000; /* 他の要素より手前に表示 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* コンテンツがはみ出た場合にスクロール可能にする */
            background-color: rgba(0, 0, 0, 0.9); /* 黒い半透明の背景 */
            flex-direction: column; /* 要素を縦に並べる */
            justify-content: space-between; /* 縦方向の中央寄せ */
            align-items: center; /* 横方向の中央寄せ */
            animation: fadeIn 0.3s forwards; /* フェードインアニメーション */
        }

        .modal.active {
            display: flex; /* アクティブ時に表示 */
        }

        .modal-content {
            margin: 30px auto; /* 縦横中央寄せのため */
            display: block;
            max-width: 100%; /* 画像の最大幅 */
            max-height: 70vh; /* 画像の最大高さ（ビューポートの高さの85%） */
            object-fit: contain; /* アスペクト比を維持して表示 */
            box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.3); /* 影 */
            animation: zoomIn 0.3s forwards; /* ズームインアニメーション */
        }

        #caption {
          	color: #e2e8f0; /* 薄いグレーのテキスト */
            font-size: 20px;
            text-align: center;
            max-width: 100%;
			margin-bottom: 190px;
			padding: 0px 100px
        }

#caption span {
	font-size: 12px;
}

        .close-button {
            position: absolute;
            top: 1.5rem; /* 24px */
            right: 2rem; /* 32px */
            color: #f1f1f1;
            font-size: 2.5rem; /* 40px */
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
            z-index: 1001; /* 常に最前面に */
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-button:hover,
        .close-button:focus {
            color: #cbd5e1; /* ホバーで少し明るく */
            background-color: rgba(0, 0, 0, 0.7);
            text-decoration: none;
        }

        /* モーダル表示時のアニメーション */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes zoomIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* レスポンシブデザインの調整 */
       /* @media (min-width: 640px) { /* sm breakpoint */
            /*.image-item {
                width: calc(50% - 0.75rem); /* 2列表示 */
           /* }
        }*/

        /*@media (min-width: 768px) { /* md breakpoint */
           /* .image-item {
                width: calc(33.333% - 1rem); /* 3列表示 */
           /* }
        }*/

        @media (min-width: 1024px) { /* lg breakpoint */
            .image-item {
                width: 250px;
				margin:  0px 25px 60px;
            }
        }


    
@media all and (max-width: 767px) {
#main {
        margin-bottom: 0px;
    }
.content {
		width: auto;
	}	
.d_text_1 {
		margin-top: 60px;
	}	
.des_Box {
		flex-direction: column;
		width: auto;
	}	
.photo_2 {
		width: 100%;
	}
.text_2 {
		width: auto;
        margin: auto;
	}
.d_text {
		margin-top: 20px;
	}
.i_2d {
		padding-top: 30px;
		width: auto;
	}
.i_2d_2 {
		padding-top: 30px;
		width: auto;
	}
.i_2d_4 {
		padding-top: 30px;
		width: auto;
	}
.des_Box_mp {
		flex-direction: column;
		width: 90%;
		margin: 80px auto;
	}	
.des_Box_mp_2 {
		flex-direction: column;
		width: auto;
		margin: 80px auto 30px;
	}	
.text_df_f_02{
		width: auto;
	    margin-bottom: 20px;
	}
.photo_df_f_02{
		width: 100%;
	}
.photo_df_f_01{
		width: 100%;
		margin-bottom: 20px;
	}
.photo_df_f_01_3{
		width: 100%;
		margin-top: 20px;
		margin-bottom: 80px;
	}

.text_df_f_01{
		width: 100%;
	}
.des_Box_mp_3 {
		flex-direction: column;
		width: auto;
		margin-bottom: 0;
	}
.photo_df_f_03_1{
		width: 100%;
		padding-bottom: 10px;
	}
.photo_df_f_03_2 {
		flex-direction: column;
		width: auto;
	}
.des_Box_mp_2_2 {
		margin: -80px auto -40px;
	}
.photo_df_f_03_2_2 {
		margin: 0px auto 10px;
	}
.des_Box_mp_5 {
		flex-direction: column;
		width: auto;
		margin: -60px auto 30px;
	}	
.c_m_01 {
		margin-bottom: -50px;
	}
.c_m_02 {
		margin-bottom: 10px;
	}
.c_m_03 {
		margin-top: 10px;
	}
.c_m_04 {
		margin-top: 20px;
	}
.c_m_05 {
		margin-bottom: 20px;
	}
.c_m_06 {
		margin-top: 20px;
	}
.c_m_07 {
		margin-top: 0px;
	}
.c_m_08 {
		width: 90%;
		margin: auto
	}

}
@media all and (max-width: 374px) {
}