/*************************************************
 lower.css
**************************************************/
/* フォント指定 */
@font-face {
	font-family: 'shippori';
	src: url(../fonts/ShipporiGothicB2-Bold.ttf) format("ttf");
}
body {
	/* font-family: shippori; */
}


/*******************************
 詳細ページ
********************************/
/* コンテンツ */
.page #main { padding-left: .5rem; padding-right: .5rem;}
.page div.wrap:has(p.locus) { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem 0; font-size: .9em;}
.page .contents .article { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem .5rem; border: 1px var(--theme-color) solid; border-radius: calc(16 * var(--rem));}

.page .contents .article h1 { font-size: 2.25em; margin: 0 .5rem .3em; padding: .2em .5em .3em; border-bottom: 4px solid var(--sub-color-01);}
.page .contents .article h2 { border: 1px solid var(--sub-color-01);}
.page .contents .article h3 { margin-bottom: .3em;}
.page .contents .article .txtbox { padding: 0 1rem;}
.page .contents .article .txtbox ul > li:before { background-color: var(--sub-color-01);}

.page .contents .article h1 + p.right { margin-right: 1rem;}

@media (width < 768px) {
	.page .contents .article h1 { font-size: calc(2.25em * .7);}
}
@media (width < 576px) {
    .page .contents .article h1 { font-size: calc(2.25em * .6);}
}

@media (width < 576px) {
    .page .contents .article { padding-left: 0; padding-right: 0;}
}

/* section */
.section { margin-top: 2.5em; padding: 0 1rem; inline-size: 100%; wwwtext-spacing-trim: trim-start; font-size: var(--txtbox-font-size);}
.section h2 {
	position: relative;
	inline-size: 100%;
	margin-block-end: var(--space-16);
	padding-inline: var(--space-16);
	padding-block: var(--space-12);
	/* style */
	background: var(--heading-h2-bg-color);
	border: 1px solid var(--sub-color-01);
	border-radius: var(--heading-h2-border-radius);
	color: var(--heading-h2-text-color);
	/* typography */
	font-size: var(--heading-h3-font-size);
	font-weight: var(--heading-h2-font-weight);
	line-height: var(--heading-h2-line-height);
	letter-spacing: var(--heading-h2-letter-spacing);
}

/* file section */
.section .file_list { margin-bottom: 2em;}
.acrobat { display: flex;  align-items: center; justify-content: flex-start; padding: 0 .5rem; font-size: .9em; background-color: rgba(255,255,255,.75);}
.acrobat .icon { margin: 1rem .5rem; text-align: center;}
.acrobat .icon a { display: inline-block;}
.acrobat img { max-width: 100%; height: auto;}

@media (width < 768px) {
	.acrobat { flex-wrap: wrap;}
	.acrobat .icon { margin-bottom: 0; width: 100%;}
}

/* info section */
.section.info_section p { padding-left: .5em;}

/* form section */
.section fieldset { margin-top: 1em; padding-left: 1.5em; padding-right: 1.5em; border: none;}
.section legend { margin-left: -1em; font-size: 1.1em;}

@media (width < 768px) {
	.section h2 { font-size: calc(var(--heading-h2-font-size) * 0.7);}
	.section:not(h1, h2, h3, h4, h5, h6) { font-size: calc(var(--txtbox-font-size) * 0.89);}
}
@media (width < 576px) {
	.section h2 { font-size: calc(var(--heading--font-size-h2) * 0.84);}
	.section fieldset { padding-left: .5em; padding-right: .5em;}
	.section legend { margin-left: -.5em; font-size: 1em;}
}


/*******************************
 一覧ページ
********************************/
/* menu_section */
.menu_section {}
.menu_section .menu { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
.menu_section .menu li { display: flex; flex-wrap: wrap; width: calc(50% - 2rem); height: auto; margin: 1rem;}
.menu_section .menu a {
	display: flex; align-items:center; width: 100%; min-height: 3em; padding: .5em 2.5rem .5em .5em;
	font-size: 1.6em; color: var(--font-color); text-decoration: none;
	background: url(../img/icon-arrow-right.png) right .75rem center no-repeat rgba(255,255,255,.5);
	box-shadow: inset 0 0 0 3px var(--sub-color-01);
	transition-duration: .3s;
	}
.menu_section .menu a:hover,
.menu_section .menu a:focus { background-color: rgba(255,255,255,1);}
.menu_section .menu .font_comment { display: flex; justify-content: flex-end; align-items: center; width: 100%; padding: .2em .4em; color: var(--white-color); background-color: var(--sub-color-01);}
@media (width < 768px) {
	.menu_section .menu li { width: calc(100% - 2rem); margin: .5rem 1rem }
	.menu_section .menu a { min-height: 2.5em; font-size: 1.4em;}
	.menu_section .menu .font_comment { font-size: .9em;}
}
@media (width < 576px) {
	.menu_section .menu a { min-height: 2em; font-size: 1.2em;}
}

/*******************************
 物件ページ
********************************/
/*物件写真*/
.contents .more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;}
.contents .more li { width: calc(50% - 1rem); margin: .5rem; padding: 0; overflow: hidden; }
.contents .more li:before { display: none;}
.contents .more li:nth-child(n+3) { margin: 0 .5rem;}
.contents .more li.view:nth-child(n+3) { margin-top: .5rem; margin-bottom: .5rem;}
.contents .more li:nth-child(n+3) img { opacity: 0; transition-duration: .6s;}
.contents .more li.view:nth-child(n+3) img { opacity: 1;}
.contents .more li p { margin-bottom: .3em; padding: .5em; text-align: center;}

/*写真開閉ボタン*/
.more_bt { display: flex; justify-content: center;}
.more_bt a {
	display: block; margin: 0 0 3em; padding: .3em 1.5em .3em;
	color: var(--white-color); font-size: var(--font-size-19); text-decoration: none;
	border-radius: 3em; box-shadow: inset 0 0 0 2px var(--sub-color-01);
	background-color: var(--nav-toggle-background-color);
	transition-duration: .15s;
}
.more_bt a:hover,
.more_bt a:focus { background-color: var(--sub-color-03);}

/*基本情報*/
.basic_info { display: flex; flex-wrap: wrap; margin: 0; padding: 0;}
.basic_info dt,
.basic_info dd { padding: .2em .5em; margin: 0;}
.basic_info dt {
	position: relative;
	width: calc(7.5em - 6px); margin: 3px; margin-bottom: .5em; padding-left: .75em;
}
.basic_info dt::before { position: absolute; display: block; content: ""; left: 0px; top: .2em; height: 1.7em; width: 5px; background-color: var(--theme-color);}
.basic_info dd {
	width: calc((50% - 7.5em) - 6px); margin: 3px; margin-bottom: .5em;
	background-color: rgba(255,255,255,.5);
}
.basic_info dd:has(ul) { padding-left: 0;}
.basic_info dd ul:last-child { margin-bottom: 0;}

@media (width < 768px) {
	.basic_info dt { width: calc(8em - 6px);}
	.basic_info dd { width: calc((100% - 8em) - 6px);}
}