@charset "utf-8";

/* 全体 */
html {
	font-size: 62.5%;
}

body {
	font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0px;
	padding: 0px;
	border: 0px;
	font-size: 1.6rem;
	line-height: 1.8;
	word-wrap: break-word;
	word-break: break-all;
}

.hide {
	display: none;
}


dl {
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
}

dl dt {
	background: #f5f5f5;
	padding: 5px;
	width: 150px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 0;
	box-sizing: border-box;
	font-weight: bold;
	letter-spacing: 1px;
}

dl dd {
	background: #fff;
	padding: 5px;
	width: calc(100% - 150px);
	border-bottom: 1px solid #ccc;
	margin: 0;
	box-sizing: border-box;
}

.linkBtn {
	display: flex;
	justify-content: center;
}

.linkBtn a {
	display: block;
	background-color: #417586;
	text-decoration: none;
	color: #FFF;
	font-size: 114%;
	padding: 20px 25px;
	border-radius: 100px;
	box-shadow: 0 4px 0 #245260;
}

.linkBtn a:hover {
	transform: translateY(4px);
	box-shadow: none;
}


/* ヘッダ */


/* フッタ */
.footer {
	display: flex;
	justify-content: space-between;
	margin-bottom: 100px;
}

.footer .addtxt p {
	margin: 0;
}

.footer .addtxt p strong {
	font-size: 114%;
	display: block;
}

.btn3col {
	display: flex;
	column-gap: 15px;
}

.btn3col>div {
	width: 190px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

.btn3col>div p {
	font-size: 90%;
	display: flex;
	width: 100%;
	justify-content: center;
	height: auto;
	margin-top: 0;
}

.btn3col>div a {
	display: flex;
	width: 190px;
	background-color: #417586;
	height: 190px;
	border-radius: 100%;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #FFF;
	box-shadow: 0 4px 0 #245260;
}

.btn3col>div a:hover {
	transform: translateY(4px);
	box-shadow: none;
}

.btn3col>div .external_link_text {
	display: none;
}

.cptxt {
	text-align: center;
	font-size: 90%;
}


/* メイン */
#container {
	width: 980px;
	margin: 0 auto;
}

#container img {
	max-width: 100%;
	height: auto;
}

/* スライドショー */
.topVisual {
	width: 100%;
	height: 708px;
	background-position: center center;
	background-size: cover;
	display: flex;
	/* align-items: center; */
	/* justify-content: center; */
	overflow: hidden;
}

.topVisual h1 {
	margin: 140px 0 0 50px;
	width: 480px;
}

/* 入居募集 */
.boshu {
	display: flex;
	margin-bottom: 100px;
	position: relative;
}

.manshitsu {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #0000005c;
}

#container .manshitsu img {
	width: 320px;
	height: auto;
}


.boshu .ph {
	background-image: url(/img/oka/001.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: #d0e5f0;
}

.boshu>div {
	flex: 0 0 45%;
}

.boshu .txt {
	background-color: #edebeb;
	padding: 20px 30px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 55%;
}

.boshu .txt h2 {
	display: flex;
	justify-content: center;
	margin-top: 0;
}

.boshu .txt dl {
	margin: 0;
}


/* おおさかのおかの */
.osakanoOka {
	margin-bottom: 160px;
}

.osakanoOka .col2 {
	display: flex;
	justify-content: center;
	column-gap: 100px;
	margin-bottom: 160px;
}

.osakanoOka .col2 .tit img {
	width: 28px;
}

.osakanoOka .col2 .txt {
	display: flex;
	align-items: center;
	text-align: center;
}


.img001 {
	margin-bottom: 100px;
}

/* 動画 */
.douga {
	margin-bottom: 200px;
}

.douga video {
	width: 100%;
}


/* おすすめ */
.osusumeWrap {
	margin-bottom: 100px;
}

.osusumeWrap h2 {
	text-align: center;
	margin-bottom: 50px;
}

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

.osusume>div {
	flex: 0 0 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 24px;
}

.osusume>div h3 {
	font-size: 130%;
}

.susume1 h3 {
	color: #076db1;
}

.susume2 h3 {
	color: #e15f09;
}

.susume3 h3 {
	color: #8d9606;
}

.osusume>div img {
	border-radius: 100%;
}

/* 取り組み */
.torikumi {
	margin-bottom: 66px;
}

.torikumi .ph2 {
	display: flex;
	column-gap: 20px;
	margin-top: 32px;
}

/* 働きたい */
.hatarakiTai {
	display: flex;
	justify-content: space-around;
	margin-bottom: 50px;
	align-items: center;
}

.tai1 {
	flex: 0 0 40%;
	font-size: 120%;
}

.tai2 {
	flex: 0 0 35%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	row-gap: 15px;
}

.tai2 h2 {
	color: #e15f09;
}

.tai2 img {
	width: 180px;
	border-radius: 100%;
}


/* 間取り */
.madori {
	display: flex;
	margin-bottom: 100px;
	column-gap: 80px;
}

.madori div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* 写真6枚表示 */
.ph6 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 20px;
}

.ph6 span {
	flex: 0 0 32%;
}

.satsuei {
	text-align: right;
	margin-bottom: 50px;
}


/* 入居者選考 */
.yotei {
	margin-bottom: 200px;
}

.yotei.yotei h2 {
	text-align: center;
	margin-bottom: 37px;
}


/* 大坂住宅 */
.osakaJutaku {
	margin-bottom: 200px;
}

.osakaJutaku .ph8 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 14px;
	margin-top: 100px;
}

.osakaJutaku .honbun {
	margin-top: 100px;
}

.osakaJutaku .ph8 span {
	flex: 0 0 24%;
}


/* マップ　詳細 */
.shosai {
	margin-bottom: 160px;
}


/* お問い合わせ　ご意見 */
.toiawase {
	margin-bottom: 160px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.toiawase p {
	margin-bottom: 56px;
}

/* SNSボタン */
.sns_button_wrap {
	margin-top: 30px;
}

.sns_button_wrap>div {
	display: inline-block;
	vertical-align: top;
}

.sns_button_tw .external_link_text {
	display: none;
}

/* Google Mapを囲う要素 */
.gmap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%;
	/* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.gaikanPh {
	display: flex;
	margin-bottom: 100px;
}

.gaikanPh .yajirushi {
	width: 90px;
	background-image: url(/img/oka/arrow.png);
	background-repeat: no-repeat;
	background-position: bottom 130px center;
	background-size: 65%;
}


/* スマホ */
@media only screen and (max-width: 765px) {
	dl dt {
		width: 100%;
		border-right: none;
	}

	dl dd {
		width: 100%;
	}

	#container {
		width: calc(100% - 30px);
	}

	.topVisual {
		height: 536px;
		width: calc(100% + 30px);
		margin-left: -15px;
		margin-bottom: 20px;
	}

	.topVisual h1 {
		margin: 77px 0 0 10px;
		width: 240px;
	}

	.footer {
		flex-direction: column;
		margin-bottom: 50px;
	}

	.footer .addtxt p strong {
		display: flex;
		justify-content: center;
	}

	.btn3col {
		flex-wrap: wrap;
		row-gap: 15px;
		margin-top: 50px;
	}

	.btn3col>div {
		width: 100%;
	}

	.btn3col>div a {
		width: 100%;
		height: auto;
		border-radius: 100px;
		padding: 8px 0;
	}

	.btn3col>div p {
		margin-bottom: 5px;
	}

	.btn3col>div p br {
		display: none;
	}

	.osakaJutaku {
		margin-bottom: 140px;
	}

	.osakaJutaku .honbun {
		margin-top: 30px;
	}

	.osakaJutaku .ph8 {
		margin-top: 35px;
	}

	.osakaJutaku .ph8 span {
		flex: 0 0 48%;
	}

	.hatarakiTai {
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	.tai1 {
		flex: 0 0 100%;
		font-size: 100%;
	}

	.tai2 {
		flex: 0 0 100%;
		display: none;
	}

	.madori {
		margin-bottom: 66px;
		flex-wrap: wrap;
	}

	.madori div {
		flex-wrap: wrap-reverse;
	}

	.yotei {
		margin-bottom: 140px;
	}

	.yotei img {
		margin-bottom: 50px;
	}

	.torikumi .ph2 {
		flex-wrap: wrap;
		row-gap: 20px;
	}

	.osusumeWrap {
		margin-bottom: 5px;
	}

	.osusumeWrap h2 {
		margin-bottom: 30px;
	}

	.osusume {
		flex-wrap: wrap;
	}

	.osusume>div {
		flex: 0 0 100%;
		row-gap: 0;
	}

	.osusume>div img {
		width: 230px;
	}

	.douga {
		margin-bottom: 110px;
	}

	.torikumi {
		margin-bottom: 110px;
	}

	.osakanoOka {
		margin-bottom: 40px;
	}

	.osakanoOka .col2 {
		flex-wrap: wrap;
		row-gap: 40px;
		margin-bottom: 110px;
	}

	.osakanoOka .col2 .txt {
		text-align: left;
	}

	.osakanoOka .col2 .tit img {
		display: none;
	}

	.osakanoOka .col2 .tit {
		background-image: url(/img/oka/txt_002.gif);
		height: 40px;
		background-size: contain;
		content: "";
		width: 310px;
		display: block;
		background-position: center;
		background-repeat: no-repeat;
	}

	.boshu {
		flex-wrap: wrap;
	}

	.boshu>div {
		flex: 0 0 100%;
	}

	.boshu .txt {
		padding: 20px 8px;
		flex: 0 0 100%;
	}

	.boshu .txt p {
		margin-bottom: 30px;
	}

	div.boshu div.ph img {
		width: 100%;
		height: 200px !important;
		object-fit: cover;
	}

	.shosai {
		margin-bottom: 100px;
	}

	.toiawase p {
		margin-bottom: 24px;
	}

	.gaikanPh {
		flex-wrap: wrap;
		margin-bottom: 40px;
	}

	.gaikanPh>* {
		margin-bottom: 10px;
	}

	.gaikanPh .yajirushi {
		width: 100%;
		background-position: center;
		background-size: 40px;
		height: 40px;
		transform: rotateZ(90deg);
		margin-bottom: 0;
	}

	.gaikanPh>div:nth-child(3) h2 {
		margin-top: 0;
	}

	.photo6 {
		margin-bottom: 88px;
	}
	.photo6 h2 {
		line-height: 1.4;
	}
	.photo6 h2 span {
		display: block;
		font-size: 0.7em;
		text-align: right;
	}

	#container .manshitsu img {
		width: 240px;
		height: auto;
	}

}