@charset "UTF-8";
/* ######################################################################################

　IoTマンション（アルファステイツ博多サウス pageIot.css を流用）

###################################################################################### */

/* ====================================================
  レイアウト土台（博多サイト common.css から必要分のみ移植）
==================================================== */
.p-iot { text-align: center; }
.p-iot .contents { width: 100%; max-width: 1230px; margin: 0 auto; padding: 60px 15px; }
.p-iot .wallBelt { position: relative; padding: 60px 0; overflow: hidden; }
.p-iot .wallBelt.topZero { padding-top: 0; background: #f9fafa; }
.p-iot img { width: auto; max-width: 100%; height: auto; }

@media screen and (max-width: 810px) {
	.p-iot .contents { padding: 40px 15px; }
	.p-iot .wallBelt { padding: 40px 0; }
}

/* ====================================================
  設備一覧
==================================================== */
.p-iot .equipment .equipList {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.p-iot .equipList:before {
	content: "";
	display: block;
	width: 24.5%;
	height: 0;
	order: 1;
}
.p-iot .equipList:after {
	content: "";
	display: block;
	width: 24.5%;
	height: 0;
}
.p-iot .equipList .list {
	width: 24.5%;
	vertical-align: top;
	margin-bottom: 30px;
	border: solid 2px #267f9d;
	padding: 25px 15px 15px;
	background: #fff;
}

.p-iot .equipList .list dt { margin-bottom: 8px; position: relative;}

.p-iot .equipList .list dt i { position: absolute; top: -40px; left: -17px; font-family: 'Noto Sans JP', sans-serif; font-weight: bold;}
.p-iot .equipList .list dt span.typename,
.p-iot .equipList .list dt span.seleop,
.p-iot .equipList .list dt span.noitem {
	padding: 8px 5px;
	line-height: 1;
	color: #fff;
	text-align: left;
	font-size: 13px;
	font-style: normal;
	display: inline-block;
}
.p-iot .equipList .list dt span.noitem { background: #333; padding: 8px 10px;}
.p-iot .equipList .list dt span.typename { background: #267f9d;}
.p-iot .equipList .list dt span.seleop { background: #a5bbcb;}

.p-iot .equipList .list img { width: 100%; height: auto;}
.p-iot .equipment .text { font-size: 14px; line-height: 1.5; text-align: left; margin-top: 10px;}
.p-iot .equipment .text .small { font-size: 11px; display: block;}
.p-iot .equipment .title { font-size: 17px; text-align: left; color: #267f9d;}
.p-iot .equipment .list dt span { font-size: 11px; text-align: right; display: block;}

@media print, screen and (max-width: 809px) {
	.p-iot .equipList .list { width: 100%;}
	.p-iot .equipList .list dt i { text-align: left;}
	.p-iot .equipList .list img { width: 85%; margin: auto;}
}

/* ====================================================
  これからの常識となる、IoTマンションの現在
==================================================== */
.p-iot .iotnow { font-family: 'Noto Sans JP', sans-serif; font-weight: 500; }
.p-iot .iotnow .title {
	background: url("../images/equipment/iot/nowbg.png") top center no-repeat;
	padding: 0 30px 0;
	color: #fff;
	font-weight: bold;
	margin-bottom: 60px;
}
.p-iot .iotnow p { font-size: 110%;}
.p-iot .iotnow p.small { font-size: 80% !important;}
.p-iot .iotnow .title h2 {
	color: #fff;
	font-size: 300%;
}
.p-iot .iotnow .title h3 { font-size: 200%;}

.p-iot .iotnow .research {
	border: solid 2px #366fa1;
	padding: 30px;
	color: #26618c;
	position: relative;
	border-radius: 10px;
}
.p-iot .iotnow .research h4 {
	line-height: 1;
	text-align: center;
	display: inline;
	font-size: 150%;
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	color: #fff;
}
.p-iot .iotnow .research h4 span {
	background: #26618c;
	font-weight: bold;
	border-radius: 50px;
	padding: 10px 20px;
}
.p-iot .iotnow .research .copy {
	position: relative;
}
.p-iot .iotnow .research .copy p {
	font-size: 180%;
	font-weight: bold;
	line-height: 1;
}
.p-iot .iotnow .research .copy p span {
	font-size: 200%;
}
/* 注釈は一段小さく、上のコピーとの間隔を確保 */
.p-iot .iotnow .research .copy .small {
	display: block;
	margin-top: 1.2em;
	font-size: 80%;
}
.p-iot .iotnow .research .copy .remocon {
	position: absolute;
	top: -20px;
	right: 12%;
}
.p-iot .iotnow .research .copy .remocon img { width: 70%; height: auto;}
/* 枠が狭いと right:12% ではコピーに被るため、左右に余白を取ってリモコンを右端の余白内に置く */
@media screen and (min-width: 811px) and (max-width: 1239px) {
	.p-iot .iotnow .research .copy { padding: 0 80px;}
	.p-iot .iotnow .research .copy .remocon { right: 0;}
}

.p-iot .iotnow .research .question ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.p-iot .iotnow .research .question ul li { margin-bottom: 50px;}
.p-iot .iotnow .research .question ul li h5 { font-size: 160%; margin-bottom: 20px;}
.p-iot .iotnow .research .question ul li h5 span { font-size: 180%;}
.p-iot .iotnow .research .question ul li h5 em { font-size: 60%; font-style: normal;}
.p-iot .iotnow .research .question ul li img { margin-bottom: 30px;}

.p-iot .iotnow .research .question ul li dl {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 130%;
	font-weight: bold;
	margin-top: 20px;
}
.p-iot .iotnow .research .question ul li dt {
	font-weight: bold;
	padding: 8px 16px;
	background: #e6f2f7;
	color: #26618c;
	-webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
.p-iot .iotnow .research .question ul li dd {
	font-weight: bold;
	padding: 8px 16px;
	background: #e6f2f7;
}
.p-iot .iotnow .research .question ul li dd span {
	background: #26618c;
	font-weight: bold;
	border-radius: 50px;
	padding: 5px 15px;
	color: #fff;
	margin-right: 8px;
	margin-left: 8px;
}
.p-iot .iotnow .research .question .innflex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
.p-iot .iotnow .research .question .innflex .text,
.p-iot .iotnow .research .question .innflex .img { width: 48%;}
.p-iot .iotnow .research .question ul li.q2,
.p-iot .iotnow .research .question ul li.q3 { width: 48%;}
.p-iot .iotnow .research .question ul li.q2 .text { font-size: 130%; text-align: left;}
.p-iot .iotnow .research .question ul li.q2 .text em { font-style: normal; color: #e98ca0;}
.p-iot .iotnow .research .question ul li.q2 h5 span,
.p-iot .iotnow .research .question ul li.q3 h5 span { display: block;}

.p-iot .iotnow .research .taipa { background: #e6f2f7; padding: 0 40px 40px; margin-bottom: 60px;}
.p-iot .iotnow .research .taipa h5 {
	background: #26618c;
	font-weight: bold;
	padding: 5px 15px;
	color: #fff;
	font-size: 190%;
	margin-bottom: 10px;
}
.p-iot .iotnow .research .taipa p { font-weight: 700;}
.p-iot .iotnow .research .taipa em { font-style: normal; color: #e98ca0; font-size: 160%;}

/* Q4・Q5・Q6 は番号と設問文が詰まるため余白を確保 */
.p-iot .iotnow .research .question.second ul li h5 span { margin-right: 0.3em;}

.p-iot .iotnow .research .question ul li.q4 { text-align: left;}
.p-iot .iotnow .research .question ul li.q4 .text { width: 45%; margin-right: 3%;}

.p-iot .iotnow .research .question ul li.q6 .text,
.p-iot .iotnow .research .question ul li.q6 .img { width: 33%;}
.p-iot .iotnow .research .question ul li.q6 p { font-weight: 700;}
/* Q6は列幅が狭いため、PCでは見出しを小さくして1行に収める */
@media print, screen and (min-width: 811px) {
	.p-iot .iotnow .research .question ul li.q6 h5 { font-size: 120%; white-space: nowrap;}
}
.p-iot .iotnow .research .question ul li.q6 p.bg {
	background: #e6f2f7;
	text-align: center;
	border-radius: 50px;
	width: 90%;
	margin: 10px auto;
	padding: 8px;
}
.p-iot .iotnow .research .question ul li.q6 p.bg em,
.p-iot .iotnow .research .question ul li.q6 p em { color: #e98ca0; font-style: normal;}

.p-iot .iotnow .research .last {
	background: #e6f2f7;
	padding: 40px;
	margin-top: 30px;
	border-radius: 10px;
}
.p-iot .iotnow .research .last h5 { font-size: 200%;}
/* 出典表記は注釈サイズに落とす */
.p-iot .iotnow .research .last h5 span { font-size: 45%; font-weight: normal; white-space: nowrap;}
.p-iot .iotnow .research .last p { font-size: 135%;}
.p-iot .iotnow .research .last p em { font-style: normal; color: #e98ca0;}
/* .flex が折り返した2行目（グラフ）は左寄せになるため、PCでは中央に揃える */
@media print, screen and (min-width: 811px) {
	.p-iot .iotnow .research .last .flex { justify-content: center;}
}

@media screen and (max-width: 810px) {
	.p-iot .iotnow .title { background-repeat: repeat;}
	.p-iot .iotnow .research { width: 95%; margin: auto; padding: 20px;}
	.p-iot .iotnow .research h4 { font-size: 130%;}
	/* SP・タブレット縦は横に置く余白がないため、注釈の下に中央配置 */
	.p-iot .iotnow .research .copy .remocon { position: static; margin-top: 12px;}
	.p-iot .iotnow .research .copy .remocon img { width: 40px;}
	.p-iot .iotnow .research .question ul li dl { display: block;}
	.p-iot .iotnow .research .question ul li dt { width: 100%;}
	.p-iot .iotnow .research .question ul li.q2, .p-iot .iotnow .research .question ul li.q3,
	.p-iot .iotnow .research .question .innflex .text, .p-iot .iotnow .research .question .innflex .img,
	.p-iot .iotnow .research .question ul li.q4 .text,
	.p-iot .iotnow .research .question ul li.q6 .text, .p-iot .iotnow .research .question ul li.q6 .img { width: 100%;}
}

/* end */