/* Same-URL smartphone layout. Desktop look is unchanged above 980px. */

html {
	-webkit-text-size-adjust: 100%;
}

img,
video,
iframe {
	max-width: 100%;
}

#sp-bar,
#sp-drawer {
	display: none;
}

.smp_site,
#spLinkBlockInPc {
	display: none !important;
}

@media screen and (max-width: 980px) {
	#pagebody,
	#header #h1_wrapper h1,
	#header #header_title div,
	#header #unnei div,
	#globalmenu ul,
	#subhead,
	#footercontents div,
	div#footersub div,
	#main .line01,
	#main .h2,
	#main .line02,
	#main table.table,
	#main table.table2,
	#com_toi,
	#com_toi dl#com_syozai,
	#shinchaku,
	#footercontents div dl#footer_syozai {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#header #h1_wrapper h1,
	#header #header_title div,
	#header #unnei div,
	#globalmenu ul,
	#pagebody,
	#footercontents div,
	div#footersub div {
		padding-left: 12px;
		padding-right: 12px;
	}

	#header #header_title img,
	#header #unnei img,
	#globalmenu img,
	#menu img,
	#main img {
		max-width: 100%;
		height: auto !important;
	}

	#main,
	#menu {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0;
		margin-right: 0;
	}

	#main #logs {
		display: flex;
		flex-direction: column;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	#main #diary,
	#main #navigation {
		float: none !important;
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-right: 0 !important;
	}
}

@media screen and (max-width: 767px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	body.sp-nav-open {
		overflow: hidden;
	}

	#header #h1_wrapper {
		display: none;
	}

	#sp-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: #1863ad;
		padding: 10px 12px;
	}

	#sp-logo {
		color: #fff !important;
		text-decoration: none !important;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.3;
	}

	#sp-toggle {
		flex: none;
		min-width: 44px;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 6px;
		background: transparent;
		color: #fff;
		font-size: 14px;
		cursor: pointer;
	}

	#sp-drawer {
		display: none;
		background: #143f6e;
		padding: 8px 0 16px;
	}

	#sp-drawer.is-open {
		display: block;
	}

	#sp-drawer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#sp-drawer a {
		display: block;
		color: #fff !important;
		text-decoration: none !important;
		padding: 12px 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 16px;
	}

	#header #header_title,
	#header #unnei,
	#globalmenu {
		display: none !important;
	}

	#pagebody {
		width: 100% !important;
		padding: 0 12px 24px;
		box-sizing: border-box;
	}

	#header,
	#pagebody,
	#main,
	#menu,
	#footer,
	#main #logs,
	#main #diary,
	#diary .diary,
	#diary .text,
	#diary .text a,
	#diary .text span,
	#diary h3,
	#main a {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	#diary h3,
	#diary .text,
	#diary .text * {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	#diary .text img {
		display: inline-block !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}

	#main img,
	#menu img {
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}

	#diary .text a,
	#diary .text span {
		display: block;
	}

	#main {
		margin-top: 16px;
	}

	#menu {
		margin-top: 24px;
		height: auto !important;
		padding: 12px;
	}

	#menu_oshirase ul,
	#menu_oshirase li,
	#menu_seo ul,
	#menu_etc {
		width: auto !important;
	}

	#main .p,
	#main .p2,
	#main ul.ul,
	#main ol.ol,
	#diary .text {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	#diary .text,
	#main {
		font-size: 16px;
	}

	#main table,
	#diary .text table,
	div#navigation table {
		display: block;
		width: 100% !important;
		max-width: 100%;
		overflow-x: auto;
	}

	#footer {
		margin-top: 32px;
	}

	div#footersub {
		height: auto;
	}

	div#footersub div {
		width: auto !important;
		padding: 8px 12px 28px;
	}

	div#footersub div p.fsub_txt {
		line-height: 1.5;
		padding-right: 0;
	}

	div#footersub div p.pageup {
		position: static;
		text-align: right;
		margin-top: 8px;
	}

	#footercontents div {
		width: auto !important;
		padding: 0 12px;
		box-sizing: border-box;
	}

	#footercontents div ul li {
		display: inline-block;
		white-space: normal;
		margin: 0 8px 8px 0;
	}

	#footercontents div dl#footer_syozai {
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 0 16px !important;
	}

	#footercontents div dl#footer_syozai dt,
	#footercontents div dl#footer_syozai dd {
		float: none !important;
		display: block;
		width: auto !important;
		line-height: 1.5 !important;
		padding: 8px 12px !important;
		text-align: left !important;
	}

	#footercontents .rollover {
		text-align: center;
	}

	#com_toi,
	#com_toi dl.eigyou,
	#com_toi p.mail_btn,
	#com_toi dl#com_syozai {
		position: static !important;
		width: auto !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
	}

	#subhead {
		height: auto !important;
		background-size: cover;
		background-position: center;
		padding: 16px 12px;
	}

	#subhead > p,
	p#kousin,
	p#kensu_update,
	p#kensu_week_bukken,
	p#kensu_bukken,
	p#kensu_mypage_week,
	p#kensu_mypage {
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		margin: 8px 0;
		text-align: left !important;
	}

	#area_map,
	#selectArea,
	#selectArea p.area_text,
	ul#selectarea_syubetu,
	#selectarea_kakaku,
	#selectarea_title,
	#selectarea_madori,
	#selectArea > p,
	#main_area #area_map p.syousai_btn,
	#area_map > input {
		position: static !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 8px 0;
	}

	#selectArea > p input {
		width: 100% !important;
		max-width: 100%;
		height: 44px !important;
		background-size: contain;
	}

	#shinchaku,
	#shinchaku_bukken {
		width: auto !important;
		overflow-x: auto;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	select,
	textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	#page ul,
	#navi ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0 !important;
	}

	ol#pankuzu {
		overflow-wrap: anywhere;
	}

	#sh_area,
	#subhead,
	.ad-gallery,
	.ad-gallery .ad-image-wrapper,
	.ad-gallery .ad-image-wrapper .ad-image,
	.ad-gallery .ad-image-wrapper .ad-image img {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		box-sizing: border-box;
	}

	#subhead {
		background-image: none !important;
		padding: 12px 0 8px;
	}

	.ad-gallery .ad-nav,
	.ad-gallery .ad-controls {
		display: none !important;
	}

	.ad-gallery .ad-image-wrapper {
		overflow: hidden;
	}

	#top_voice,
	#top_voice > div#voice_cont,
	#osusume,
	#osusume_title,
	#osusume_bukken,
	#osusume_tochi,
	#osusume_kodate,
	#osusume_mansyon,
	#osusume_btn,
	#osusume_btn a,
	#shinchaku,
	#shinchaku_bukken,
	#shinchaku_tochi,
	#shinchaku_kodate,
	#shinchaku_mansyon {
		position: static !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		overflow: visible !important;
		box-sizing: border-box;
	}

	#osusume_bukken,
	#shinchaku_bukken {
		display: block;
	}

	#top_voice h2 img,
	#top_voice img,
	#top_voice .text_contents_box img,
	#raiten img,
	#main_area h2 img,
	#osusume img,
	#shinchaku img,
	#com_toi img,
	.ad-gallery img {
		max-width: 100% !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#top_voice h3,
	#top_voice .text_contents_box,
	#top_voice .text_contents_box * {
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100%;
		box-sizing: border-box;
	}

	#top_voice h3 {
		font-size: 15px !important;
		line-height: 1.4 !important;
	}

	#area_map > img,
	#area_map map {
		display: none !important;
	}

	#selectArea h3 {
		display: block !important;
		position: static !important;
		margin: 12px 0 6px;
		font-size: 16px;
		font-weight: bold;
	}

	#selectArea p.area_text {
		display: none !important;
	}

	ul#selectarea_syubetu li {
		width: 50% !important;
		display: inline-block;
		box-sizing: border-box;
	}

	#area_map.sp-areas > label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 4px 12px 8px 0;
		font-size: 16px;
	}

	iframe {
		max-width: 100% !important;
		width: 100% !important;
		height: 220px;
	}
}