body {
	background: #031d1e;
}

/* -----------------------------------------------------------

   .headlineImg

   --------------------------------------------------------- */

/* guide */
.headlineImgAbout {
	background: url(../images/headline.jpg) bottom right no-repeat;
	background-size: cover;
	/* background: #fff; */
}




/* -----------------------------------------------------------

   #header .navArea ul.navi

   ----------------------------------------------------------- */
#header .navArea ul.navi a.p_access:before {
	background: #ddd;
}

#header .navArea ul.navi a.p_access:hover:before {
	background: transparent;
}



.headlineImgPhotography {
	background: url(../images/staff/t.jpg) center center no-repeat;
	background-size: cover;
}

.headlineImgPhotography_plan01 {
	background: url(../images/photography/h_dress.jpg) bottom center no-repeat;
	background-size: cover;
}

.headlineImgPhotography_plan02 {
	background: url(../images/photography/h_dress.jpg) bottom center no-repeat;
	background-size: cover;
}







/* -------------------------------- 

Primary style

-------------------------------- */

table.tab01 {
	width: 95%;
	font-size: 1.0rem;
	border-collapse: separate;
	border-spacing: 0px 1px;
	margin: 2%;
	padding: 0 3%;

}

table.tab01 img {
	margin: 0;
}

table.tab01 th {
	font-weight: 500;
	padding: 8px 0;
	padding-left: 5px;
	vertical-align: middle;
	text-align: left;
	border-bottom: #999 1px solid;
	/*border-bottom: #999 1px solid;
    color: #fff;*/
}

table.tab01 td {
	padding: 8px 2%;
	text-align: left;
	border-bottom: #09437c 2px solid;
}

table.tab01 td.r1 {
	width: 20%;
	text-align: left;
}

table.tab01 td.r2 {
	width: 75%;
	text-align: left;
}











/* -----------------------------------------------------------


   #w_sub_style

   ----------------------------------------------------------- */

#w_sub_style {
	padding: 50px 5%;
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 800px) {
	#w_sub_style {
		padding: 80px 5%;
	}
}

@media only screen and (max-width: 738px) {
	#w_sub_style {
		padding: 70px 5%;
	}
}

@media only screen and (max-width: 414px) {
	#w_sub_style {
		padding: 60px 5%;
	}
}







/* .imgArea */
#w_sub_style .imgArea {
	float: left;
	width: 45%;
}

#w_sub_style .imgArea img {
	/* padding:2%; */
	/* background: #492a18; */
}

#w_sub_style .imgArea .inner {
	position: relative;
	z-index: 2;
}

#w_sub_style .imgArea .inner:before {
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0px;
	right: 0;
	content: "";
	border: #492a18 1px dotted;
	background: #fefefe;
	z-index: -2;
}

#w_sub_style .imgArea .inner:after {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
	content: "";
	border: #7a5640 1px dotted;
	z-index: 1;
}

/* .txtArea */
#w_sub_style .txtArea {
	float: right;
	width: 55%;
	margin-bottom: 80px;
	padding: 2%;
}

/* ======== table.tableOther ======== */
table.company {
	border-collapse: collapse;
	text-align: left;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 2;
	width: 100%;
}

table.company tr {
	display: block;
}

table.company th {
	display: block;
	width: 100%;
	padding: 5px;
	vertical-align: 0;
}

table.company td {
	display: block;
	width: 100%;
	padding: 5px;
	padding-left: 20px;
	vertical-align: 0;
	border-bottom: #ddd 1px solid;
}

table.company td .linkArea {
	display: blockmargin-top:10px;
	text-align: left;
}

table.company td .linkArea a.btn {
	margin: 0;
}

table.company a {
	color: #153e40;
	padding: 5px 10px;
	font-weight: 600;
	font-size: 16px;
}

table.company a.map:before {
	font-family: 'themify';
	content: "\e693";
	padding-right: 10px;
	font-weight: 100;
}

table.company a.tel:before {
	font-family: 'FontAwesome';
	content: "\f095";
	padding-right: 10px;
	font-weight: 100;
}

table.company a:hover {
	color: #baa20a;
}

/* --- #map_canvas --- */
#map_canvas {
	width: 100%;
	margin-top: 70px;
	height: 400px;
	position: relative;
	z-index: 1;
	border: #ededed 1px solid;
}



@media only screen and (max-width: 950px) {
	table.company th {
		/* width:30%; */
		/* padding:20px; */
	}

	table.company td {
		padding: 20px;
	}
}

@media only screen and (max-width: 800px) {
	table.company {
		font-size: 13px;
	}
}

@media only screen and (max-width: 738px) {
	#w_sub_style .imgArea {
		float: none;
		width: 100%;
	}

	#w_sub_style .txtArea {
		float: none;
		width: 100%;
		margin-top: 25px;
	}

	table.company {
		font-size: 12px;
	}

	/*	#map_canvas { display:none; }*/
}

@media only screen and (max-width: 414px) {
	table.company th {
		width: 100%;
		padding: 15px;
		font-size: 15px;
		font-weight: 600;
	}

	table.company td {
		padding: 15px;
	}
}





/* -----------------------------------------------------------


   #w_about_volunteer

   ----------------------------------------------------------- */

#w_about_volunteer {
	padding: 90px 5%;
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 800px) {
	#w_about_volunteery {
		padding: 80px 5%;
	}
}

@media only screen and (max-width: 738px) {
	#w_about_volunteer {
		padding: 70px 5%;
	}
}

@media only screen and (max-width: 414px) {
	#w_about_volunteer {
		padding: 60px 5%;
	}
}

/* .imgArea */
#w_about_volunteer .imgArea {
	float: left;
	width: 50%;
}

#w_about_volunteer .imgArea .inner {
	position: relative;
	z-index: 2;
}

#w_about_volunteer .imgArea .inner:before {
	position: absolute;
	top: 7px;
	left: 0;
	bottom: 7px;
	right: 0;
	content: "";
	border: #ddd 1px solid;
	background: #fefefe;
	z-index: -2;
}

#w_about_volunteer .imgArea .inner:after {
	position: absolute;
	top: 0;
	left: 7px;
	bottom: 0;
	right: 7px;
	content: "";
	border: #ddd 1px dotted;
	z-index: -2;
}

/* .txtArea */
#w_about_volunteer .txtArea {
	float: right;
	width: 48%;
}

#w_about_volunteer .txtArea h2 {
	color: #999;
	text-align: center;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 5px
}

#w_about_volunteer .txtArea p {
	font-size: 16px;
	border-radius: 5px;
	border: solid 1px #999;
	padding: 10px;
	margin-top: 20px;
}

.txt_c {
	text-align: center;
}



@media only screen and (max-width: 950px) {
	table.volunteer th {
		width: 30%;
		padding: 20px;
	}

	table.volunteer td {
		padding: 20px;
	}
}

@media only screen and (max-width: 800px) {
	table.volunteer {
		font-size: 13px;
	}
}

@media only screen and (max-width: 738px) {
	#w_about_volunteer .imgArea {
		float: none;
		width: 100%;
	}

	#w_about_volunteer .txtArea {
		float: none;
		width: 100%;
		margin-top: 25px;
	}

	table.volunteer {
		font-size: 12px;
	}

	/* #map_canvas { display:none; }*/
}

@media only screen and (max-width: 414px) {
	table.volunteer th {
		width: 30%;
		padding: 15px;
	}

	table.volunteer td {
		padding: 15px;
	}
}


/* -----------------------------------------------------------

   access_map

----------------------------------------------------------- */


.access_map {
	padding: 10px;
	margin: 100px 0 30px 0;
	/*background: #1a1a1a;*/
	/*	background: #fff url(../images/site_bcg04.png);
	color:#fff;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
	background: #f7f7f7;
	border: 1px solid #fff;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 -1px 0 #f2f2f2;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 -1px 0 #f2f2f2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2), 0 -1px 0 #f2f2f2;
}

.parking h3 {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif !important;
	color: #fff !important;
	font-size: 2.5rem !important;
}

.parking .flex {
	display: flex;
	justify-content: space-between;
}

.cnt {
	padding: 0;
}

.parking p {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
}

@media screen and (max-width: 600px) {
	.cnt {
		width: 100%;
		margin-bottom: 1%;
	}

	.parking h3 {
		font-size: 2rem !important;
	}
}

.btn1:after {
	line-height: 45px;
}

#page h3 {
	color: #fff;
	font-size: 24px;
}

#page p {
	/* font-size: 14px; */
}

#catch h3::after,
#instagram h3::after {
	background: #ffcaaa45;
}


#access-wrap {
    padding-top: 70px;
	/* border-top: #d9e3e5 1px solid; */
}

.archive-gift-items .item>.image {
    width: 60%;
    float: left;
    position: relative;
    /* -webkit-border-radius: 100%; */
    /* border-radius: 100%; */
    height: 300px;
}

.archive-gift-items .item>.text {
    float: right;
    width: 40%;
    padding: 20px;
}

.archive-gift-items p {
    font-size: 18px;
    text-align: left;
    margin-bottom: 10px;
}

.archive-gift-items .title:before {
    font-family: 'Font Awesome 6 pro';
    content: "◆";
    left: 1.5em;
    color: #016c6e;
    font-size: 1.2em;
    top: -3px;
    padding-right: 0.5em;
}

@media only screen and (max-width: 900px) {
    .archive-gift-items .item>.text .comment {
        margin-top: 20px;
        padding: 20px 25px 20px 0;
        font-size: 15px;
    }
}

@media only screen and (max-width: 738px) {
    .archive-gift-items .item {
        padding: 45px 0;
    }
}

@media only screen and (max-width: 738px) {
    .archive-gift-items .item>.image {
        margin: 0 auto;
        width: 100%;
        /* max-width: 250px; */
        float: none;
    }
}

@media only screen and (max-width: 738px) {
    .archive-gift-items .item>.text {
        float: none;
        width: 100%;
        margin: 25px 0 0;
        text-align: center;
    }
}

@media only screen and (max-width: 738px) {
    .archive-gift-items .item>.text .comment {
        max-width: 450px;
        padding: 20px 5%;
        margin: 20px auto 0;
        font-size: 13px;
        text-align: left;
    }
}


.archive-gift-items .item>.text .comment {
    padding: 25px 25px;
    /* margin-right: 25px; */
    font-size: 16px;
    line-height: 1.9;
    position: relative;
    z-index: 0;
    background: #f7f7f7;
    z-index: -1;
    -webkit-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
    color: #161616;
}

 /* コンテンツ全体のコンテナ */
        .content-container {
            display: flex; /* Flexboxで横並びにする */
            /* flex-wrap: wrap; */ /* 画面幅が狭くなった時に折り返す */
            align-items: center; /* 垂直方向の中央揃え */
            max-width: 960px; /* コンテンツの最大幅 */
            margin: 0 auto; /* 中央寄せ */
            gap: 40px; /* 画像とテキストの間の隙間 */
            padding: 20px;
            background-color: #fff;
            /* border-radius: 10px; */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* 画像エリアのスタイル */
        .image-area {
            /* flex: 1; */ /* 利用可能なスペースを均等に分配 */
            min-width: 300px; /* 画像エリアの最小幅（これ以上縮まない） */
            text-align: center; /* 画像を中央寄せ */
        }

        .image-area img {
            max-width: 100%; /* 親要素の幅に合わせて縮小 */
            height: auto; /* 縦横比を維持 */
            /* display: block; */ /* 画像の下の余白をなくす */
            border-radius: 8px; /* 画像の角を丸くする */
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
        }

        /* テキストエリア（吹き出し風）のスタイル */
        .text-area {
            /* flex: 2; */ /* 画像エリアの2倍の幅を占める */
            min-width: 300px; /* テキストエリアの最小幅 */
            position: relative; /* 吹き出しの矢印のために必要 */
            background-color: #e5ecec; /* 吹き出しの背景色 */
            border-radius: 15px; /* 吹き出しの角を丸くする */
            padding: 20px 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-size: 14px; /* フォントサイズ */
        }

        /* 吹き出しの矢印 */
        .text-area::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px 20px 15px 0; /* 矢印のサイズと方向 */
            border-color: transparent #e5ecec transparent transparent; /* 矢印の色 */
            left: -20px; /* 矢印の位置 */
            top: 50%; /* 垂直方向の中央 */
            transform: translateY(-50%); /* 垂直方向の調整 */
        }

        /* スマートフォン向け（画面幅768px以下の場合）の調整 */
        @media (max-width: 768px) {
            .content-container {
                flex-direction: column; /* 縦並びにする */
                gap: 30px; /* 縦並び時の隙間 */
            }

            .image-area,
            .text-area {
                width: 100%; /* 幅を100%にする */
                min-width: auto; /* 最小幅の制限を解除 */
            }

            /* スマホ時の吹き出しの矢印位置 */
            .text-area::before {
                border-width: 0 15px 20px 15px; /* 矢印のサイズと方向を上向きに変更 */
                border-color: transparent transparent #e5ecec transparent; /* 矢印の色 */
                left: 50%; /* 水平方向の中央 */
                top: -20px; /* 矢印の位置（吹き出しの上に移動） */
                transform: translateX(-50%); /* 水平方向の調整 */
            }
        }