/**
 * 基本
----------------------------------------------------------------*/
a{ color:rgb(0,166,194); }
body{
	font-family:"Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	min-width:1024px;
	font-size:14px;
	line-height:24px;
	color:rgb(20,30,40);
}
main{
	min-height:400px;
	padding-bottom:80px;
}
@media screen and (max-width: 768px){
	body{
		min-width:768px;
		font-size:24px;
		line-height:40px;
	}
}

/**
 * 共通
----------------------------------------------------------------*/
p{ text-align:justify; }
table{ width:100%; }
img{ display:block; max-width:100%; margin:0 auto; }
@media screen and (max-width: 768px){
	img{
		max-width:100%;
		height:auto;
	}
}
.r{ text-align:right; }
.c{ text-align:center; }

/* 分岐 */
.sp{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
}

/* 余白 */
.hmargin{
	margin-right:40px !important;
	margin-left:40px !important;
}
.vmargin{
	margin-top:40px !important;
	margin-bottom:40px !important;
}

/* 基準枠 */
.base{
	max-width:1024px;
	margin:0 auto;
}
.narrow{
	max-width:768px;
	margin:0 auto;
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* 水平線 */
hr{
	display:block;
	background: scroll repeat-x center center;
	height:24px;
	margin:20px 0;
}

/* GoogleMaps */
.gm > iframe{ height:400px; }

/* ボタン */
.buttons{ text-align:center; }
.button{
	font-size:120%;
	font-weight:bold;
	background:rgb(0,166,194);
	color:white;
	padding:20px;
	text-align:center;
	width:300px;
	display:inline-block;
	border:none;
	margin:40px auto;
	cursor:pointer;
	transition:background .2s;
}
.button.hover{ background:rgb(-128,121,163); }

/* テーブル */
.table,
.table th,
.table td{ border:1px solid #ccc; }
.table th,
.table td{ padding:4px 10px; }
.table th{
	font-weight:normal;
	color:white;
	background:rgb(0,166,194);
	max-width:200px;
}

/* 中見出し */
.h2{
	background:url("./../image/article/tochinavi/interface/h2_bg.png") scroll no-repeat center center / cover;
	margin-bottom:40px;
}
@media screen and (max-width: 768px){
	.h2{ background-image:url("./../image/article/tochinavi/interface/h2_bg_sp.png"); }
}

/* 小見出し */
.h3{
	font-weight:bold;
	font-size:160%;
	color:white;
	background:rgb(0,166,194);
	padding:10px 20px;
	text-align:center;
	margin:20px;
}
.h3_alone{
	padding:20px;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	background:rgb(0,166,194);
	margin:20px auto;
	border-radius:2em;
	color:white;
	box-sizing:border-box;
	max-width:728px;
}
@media screen and (max-width: 768px){
	.h3_alone{ margin:20px; }
}

/* 文章 */
.summary{
	text-align:center;
	padding:20px;
	font-size:16px;
}

/* 単一セクション */
.section{ margin:20px; }

/* 三連セクション */
.section3 h3,
.section3 h4,
.section3 h5,
.section3 h6{
	font-weight:bold;
	font-size:140%;
	margin-bottom:10px;
}
.section3 img{ margin-bottom:10px; }

/* お問い合わせボックス */
.contactbox{ justify-content:center !important; }
.contactbox > div{ max-width:360px; }
.contactbox > div > a{ display:inline-block; }
.contactbox > :last-child > a{
	background:rgb(255,150,60);
	transition:background .2s;
	border-radius:4px;
}
.contactbox > :last-child > a.hover{ background:rgb(255,97,-38); }

/**
 * ヘッダー
----------------------------------------------------------------*/
/* 大見出し */
#h1{
	background:rgb(0,166,194);
	color:white;
	padding:4px 20px;
	text-align:center;
}

/* ヘッドカード */
#logo{
	width:190px;
	display:block;
	transition:opacity .2s;
}
#logo.hover{ opacity:.7; }
#tel{
	width:250px;
	display:block;
	margin:20px 10px;
	transition:opacity .2s;
}
#tel.hover{ opacity:.7; }
#contact{
	width:210px;
	background:rgb(255,150,60);
	border-radius:4px;
	display:block;
	margin:20px 10px;
	transition:background .2s;
}
#contact.hover{ background:rgb(255,97,-38); }
#hcard > .flex{ justify-content:space-between; }
@media screen and (max-width: 768px){
	#hcard > .flex > .flex{
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		flex-direction:row;
		background:white;
		z-index:1000;
	}
	#tel{
		width:50%;
		margin:0;
	}
	#contact{
		width:50%;
		margin:0;
		border-radius:0;
	}
	#logo{
		margin:0 auto;
	}
}

/* グローバルナビゲーション */
#gnav{ padding:20px 0; }
#gnav > ul > li:not(:first-child) > a{ border-left:1px solid rgb(20,30,40); }
#gnav > ul > li > a{
	display:block;
	transition:background .2s;
}
#gnav > ul > li > a.hover{ background:#f5f5f5; }
@media screen and (max-width: 768px){
	#gnav{ display:none; }
}

/* メインビジュアル */
#mvis{ background:url("./../image/article/tochinavi/index/mvis_bg.png") scroll no-repeat center center / cover; }
@media screen and (max-width: 768px){
	#mvis{ background-image:url("./../image/article/tochinavi/index/mvis_bg_sp.png"); }
}

/**
 * コンテンツ
----------------------------------------------------------------*/
#article > section{ margin:20px 0 60px; }
#article > section:last-child{ margin-bottom:0; }
#pagename{
	text-align:center;
	font-size:200%;
	line-height:1.5;
	font-weight:bold;
	padding:60px 20px;
	background:rgb(229,246,248);
}

/**
 * フッター
----------------------------------------------------------------*/
#footcard{
	background:rgb(229,246,248);
	padding:0 20px;
}
#cr{
	background:rgb(0,166,194);
	color:white;
	text-align:center;
	padding:10px;
}
@media screen and (max-width: 768px){
	#cr{ padding-bottom:146px; }
}

/**
 * スポット
----------------------------------------------------------------*/
/* 不動産を売る：売却・買取査定の流れ */
#flow > li > :first-child{ width:25%; }
#flow > li > :last-child{ width:75%; }
#flow > li{ border:1px solid #ccc; }
#flow > li > div > h4{
	font-size:160%;
	color:rgb(0,166,194);
	margin-bottom:10px;
}
@media screen and (max-width: 768px){
	#flow > li > :first-child,
	#flow > li > :last-child{ width:auto; }
}

/* 店舗情報：土地ナビの強み */
#usp > section > h4{
	font-size:140%;
	color:rgb(0,166,194);
	padding-bottom:10px;
}

/* 物件リスト */
.estatelist > section > div{
	display:flex;
	flex-wrap:wrap;
	padding:10px;
	justify-content:center;
}
.estatelist > section > div > section{
	width:33.3333%;
	max-width:400px;
	margin-bottom:40px;
}
.estatelist > section > div > section > a{
	display:block;
	margin:10px;
	background:rgb(229,246,248);
	border-radius:10px;
	height:100%;
	box-sizing:border-box;
	color:rgb(20,30,40);
	transition:background .2s;
}
.estatelist > section > div > section > a.hover{ background:rgb(255,244,235); }
.estatelist > section > div > section > a > header{
	padding:10px;
	background:rgb(0,166,194);
	color:white;
	border-radius:10px 10px 0 0;
	position:relative;
	transition:background .2s;
}
.estatelist > section > div > section > a.hover > header{ background:rgb(255,150,60); }
.estatelist > section > div > section > a > header > .label{
	position:absolute;
	top:-10px;
	left:-5px;
	border:1px solid rgb(0,166,194);
	color:rgb(0,166,194);
	background:white;
	padding:4px 16px;
	border-radius:1em;
	font-weight:bold;
	font-size:120%;
	transition:border-colo .2s, color .2s;
}
.estatelist > section > div > section > a.hover > header > .label{
	border-color:rgb(255,150,60);
	color:rgb(255,150,60);
}
.estatelist > section > div > section > a > header > date{
	text-align:right;
	display:block;
	border-bottom:1px solid white;
	margin-bottom:10px;
}
.estatelist > section > div > section > a > header > h3{
	font-size:120%;
	font-weight:bold;
	padding-bottom:6px;
	line-height:1.6;
}
.estatelist > section > div > section > a > header > h3 > span{
	background:rgb(255,150,60);
	color:white;
	border-radius:4px;
	display:inline-block;
	padding:0 10px;
	font-size:14px;
	transition:background .2s, color .2s;
}
.estatelist > section > div > section > a.hover > header > h3 > span{
	background:white;
	color:rgb(255,150,60);
}
.estatelist > section > div > section > a > header > h3 > small{
	display:block;
	font-size:14px;
	margin-top:6px;
}
.estatelist > section > div > section > a > div{ padding:20px 10px; }
.estatelist table{ margin:10px 0; }
.estatelist th,
.estatelist td{
	border-bottom:1px solid rgb(20,30,40);
	vertical-align:top;
	padding:4px;
	line-height:1.5;
}
.estatelist th{ min-width:70px; }
.estatelist .big{
	font-size:180%;
	font-weight:bold;
	padding:4px 0;
	display:inline-block;
}
.estatelist s{ display:block; }
@media screen and (max-width: 768px){
	.estatelist > section > div{ justify-content:left; }
	.estatelist > section > div > section{
		max-width:none;
		width:50%;
	}
	.estatelist > section > div > section.dummy{ display:none; }
	.estatelist > section > div > section > a > div{ line-height:1.5; }
	.estatelist > section > div > section > a > header > h3 > span,
	.estatelist > section > div > section > a > header > h3 > small,
	.estatelist > section > div > section > a > div > p,
	.estatelist th,
	.estatelist td{ font-size:20px; }
	.estatelist th{ min-width:100px; }
}

/* 物件情報 */
#spot_estate > header{
	background:rgb(0,166,194);
	color:white;
	border-radius:10px;
	padding:20px;
	position:relative;
	margin:40px;
}
#spot_estate > header > .label{
	position:absolute;
	top:-10px;
	left:-5px;
	border:1px solid rgb(0,166,194);
	color:rgb(0,166,194);
	background:white;
	padding:4px 16px;
	border-radius:1em;
	font-weight:bold;
	font-size:120%;
	transition:border-colo .2s, color .2s;
}
#spot_estate > header > date{
	text-align:right;
	display:block;
	border-bottom:1px solid white;
	margin-bottom:10px;
}
#spot_estate > header > h1{
	font-size:30px;
	font-weight:bold;
	line-height:1.4;
}
#spot_estate > header > h1 > span{
	background:rgb(255,150,60);
	color:white;
	border-radius:4px;
	display:inline-block;
	padding:0 10px;
	font-size:14px;
}
#spot_estate > header > h1 > small{
	display:block;
	font-size:18px;
	margin-top:6px;
}
#spot_estate > div > .gallery > h2{
	margin:0 40px;
	padding-left:10px;
	font-size:120%;
	border-left:6px solid rgb(0,166,194);
}
#spot_estate > div > .gallery > ul{
	display:flex;
	flex-wrap:wrap;
	padding:10px 30px;
	margin-bottom:20px;
}
#spot_estate > div > .gallery > ul > li{
	display:block;
	width:25%;
	padding:10px;
	box-sizing:border-box;
}
#spot_estate > div > .gallery > ul > li > a{
	display:block;
	transition:opacity .2s;
}
#spot_estate > div > .gallery > ul > li > a.hover{ opacity:.6; }
#spot_estate .basic > p{ padding:20px 0; }
#spot_estate .estate_h2{
	padding-left:10px;
	font-size:120%;
	border-left:6px solid rgb(0,166,194);
}
#spot_estate .basic table{ margin:10px 0; }
#spot_estate .basic th{
	text-align:right;
	min-width:70px;
}
#spot_estate .basic th,
#spot_estate .basic td{
	padding:10px;
	line-height:1.5;
	border:none;
}
#spot_estate .basic tr:nth-child(odd) > *{ background:rgb(229,246,248); }
#spot_estate .basic tr:nth-child(even) > *{ background:rgb(247,252,253); }
#spot_estate .big{
	font-size:180%;
	font-weight:bold;
	color:rgb(0,166,194);
}
#spot_estate .details table,
#spot_estate .details th,
#spot_estate .details td{
	padding:4px;
	border:1px solid #ccc;
}
#spot_estate .details th{
	background:#f5f5f5;
	min-width:80px;
}
@media screen and (max-width: 768px){
	#spot_estate > div > .gallery > ul > li{ width:50%; }
	#spot_estate > header > h1{ font-size:40px; }
	#spot_estate > header > h1 > span,
	#spot_estate > header > h1 > small{ font-size:30px; }
	#spot_estate .basic > p,
	#spot_estate .basic th,
	#spot_estate .basic td,
	#spot_estate .details th,
	#spot_estate .details td{ font-size:20px; }
}
@media screen and (max-width: 768px){
	
}

/**
 * メールフォーム
----------------------------------------------------------------*/
/* テーブル */
.form > table,
.form > table th,
.form > table td{ border:1px solid #ccc; }
.form > table th,
.form > table td{ padding:10px; }
.form > table th{ background:rgb(178,228,236); }
@media screen and (max-width: 768px){
	.form > table th{ width:300px; }
}

/* フォーム */
.form{ padding:0 20px; }
.form .req > th::before{
	content:'必須';
	display:inline-block;
	color:white;
	background:#f15a24;
	padding:2px 6px;
	margin-right:4px;
	font-size:80%;
	line-height:1.2;
}
.form input[type="text"],
.form input[type="email"],
.form textarea{
	font-size:100%;
	padding:4px;
	border:1px solid #ccc;
	box-sizing:border-box;
}
.form input[type="radio"]{ font-size:110%; }
.form input[type="radio"] + span{ padding-right:10px; }
.form textarea{
	width:100%;
	height:120px;
}
.form input[type="submit"]{
	font-size:120%;
	font-weight:bold;
	background:rgb(0,166,194);
	color:white;
	padding:20px;
	text-align:center;
	width:300px;
	display:inline-block;
	border:none;
	margin:40px auto;
	cursor:pointer;
	transition:background .2s;
	line-height:inherit;
}
.form input[type="submit"].hover{ background:rgb(-128,121,163); }
@media screen and (max-width: 768px){
	.form input[type="text"],
	.form input[type="email"]{ width:100%; }
}