@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

main {
	position: relative;
	overflow: hidden;
	background: var(--color-base);
}

article .base-width {
	padding-inline: 3%;
}

/* メインビジュアル */

.mainvisual_txt {
	position: absolute;
	left: 8vw;
	top: 7vw;
	z-index: 2;
}

.mainvisual_txt h1 div {
	margin-block: .2em;
}

.mainvisual_txt h1 div img {
	width: 23vw;
	height: auto;
}

.mainvisual_txt h1 span {
	display: block;
	font-size: 5.333vw;
	line-height: 1.4;
	overflow: hidden;
	height: inherit;
}

.mainvisual_txt small {
	display: block;
	margin-block-start: 3rem;
	font-size: 1.6vw;
	overflow: hidden;
}

/* 出現エフェクト */
.mainvisual_txt h1 span i {
	font-style: normal;
	display: block;
	translate: 0 120%;
}

/* メインビジュアル */
.mainvisual_img {
	position: absolute;
	top: 0;
	right: 3%;
	width: 66.666%;
	height: auto;
	max-height: 100%;
	/* height: calc(100vh - 173px);
	max-height: 880px; */
	aspect-ratio: 100 / 88;
	/* background: rgb(255, 214, 255); */
	z-index: 0;
}

.mv01_base {
	position: absolute;
	width: 82%;
	left: 5.8%;
	top: 28.4%;
	z-index: 0;
}

.mainvisual_img span:not(.mv01_base) {
	position: absolute;
	opacity: 0;
	scale:.9;
	translate: 0 3vw;
}

.mv02_solar {
	width: 42.8%;
	left: 55%;
	top: 19%;
	z-index: 1;
}
.mv03_building {
	width: 26.3%;
	left: 32.5%;
	top: 3.18%;
	z-index: 2;
}
.mv04_tower {
	width: 32.2%;
	left: 53%;
	top: 33.5%;
	z-index: 3;
}
.mv05_kitchen {
	width: 39.3%;
	left: 6.4%;
	top: 26.47%;
	z-index: 4;
}
.mv06_human {
	width: 48.2%;
	left: 17.2%;
	top: 53.3%;
	z-index: 5;
}
.mv08_sun {
	width: 16.2%;
	left: 67.5%;
	top: 0%;
	z-index: 7;
}
.mv09_hotcook {
	width: 10.9%;
	left: 18.2%;
	top: 17.84%;
	z-index: 8;
}
.mv10_baloon {
	width: 7.8%;
	left: 85.3%;
	top: 14.3%;
}
.mv11_kikyu {
	width: 8.6%;
	left: 3.1%;
	top: 73.63%;
}
.mv13_cloud1 {
	width: 11%;
	left: 2%;
	top: 7.27%;
}
.mv14_cloud2 {
	width: 25.1%;
	left: 56.2%;
	top: 83.4%;
}
.mv15_bird {
	width: 13.3%;
	left: 4.5%;
	top: 13.6%;
}
.mv16_child {
	width: 17.7%;
	left: 8.8%;
	top: 39.5%;
	z-index: 9;
}

@media screen and (1500px <=width) {
	.mainvisual_img {
		/* width: 66.666%;
		height: auto;
		max-height: 100%; */
	}
}



/* メインビジュアル_商品 */
.mainvisual_product {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 68vw;
}

.mainvisual_product span {
	position: absolute;
	z-index: 2;
	aspect-ratio: 1 / 1;
	opacity: 0;
	scale:.5;
	translate: 0 10vw;
}

/* MV アニメーション */
.mainvisual_product span.mv_aircon {
	width: 11.3vw;
	left: 11.7vw;
	top: 82.2vw;
}
.mainvisual_product span.mv_healsio {
	width: 10vw;
	left: 80vw;
	top: 43.4vw;
}
.mainvisual_product span.mv_hotcook {
	width: 10vw;
	left: 22vw;
	top: 51.2vw;
}
.mainvisual_product span.mv_kuusei {
	width: 10vw;
	left: 71vw;
	top: 90vw;
}
.mainvisual_product span.mv_reizo {
	width: 6.66vw;
	left: 13vw;
	top: 60.8vw;
}
.mainvisual_product span.mv_sentaku {
	width: 8.66vw;
	left: 71.6vw;
	top: 51.2vw;
}
.mainvisual_product span.mv_energy {
	width: 8.66vw;
	left: 81.4vw;
	top: 82vw;
}
.mainvisual_product span.mv_tv {
	width: 6.66vw;
	left: 31vw;
	top: 2vw;
}

/* トップ_about */

.mainvisual_about {
	text-align: center;
	margin-block: 0 25vw;
}

.mainvisual_about div {
	margin-inline: auto;
}

.mainvisual_about div em {
	display: block;
	position: relative;
	font-size: 3.4rem;
	margin-block-end: 7rem;
}

.mainvisual_about div p {
	margin-block-start: 1.8em;
	line-height: 2;
	font-size: 1.8rem;
}

.mainvisual_about div b {
	color: var(--color-point);
	font-weight: 700;
}

/* ウェーブ */
.top_wakuwaku_wrapper {
	position: relative;
	margin-block: 16.66vw;
	background: var(--color-white);
}

.top_wakuwaku_wrapper::before {
	content: "";
	display: block;
	width: 100vw;
	height: 16.66vw;
	position: absolute;
	top: -16.66vw;
	z-index: 1;
	background: url(/aiot/assets/index/images/bg_cloud_top.svg) no-repeat bottom left / cover;
}

.top_wakuwaku_wrapper::after {
	content: "";
	display: block;
	width: 100vw;
	height: 16.66vw;
	position: absolute;
	bottom: -16.66vw;
	z-index: 1;
	background: url(/aiot/assets/index/images/bg_cloud_bottom.svg) no-repeat bottom left / cover;
}

/* ワクワク */
.top_wakuwaku {
	padding-block: 10rem;
}

/* 吹き出し */
.top_wakuwaku_wrapper h2 {
	margin-block-end: 8rem;
	text-align: center;
	font-size: 4rem;
}

.top_wakuwaku_wrapper h2 span {
	position: relative;
	display: grid;
  place-content: center;
  place-items: center;
	height: 60px;
	width: 220px;
	margin-inline: auto;
	margin-block-end: 4rem;
	border-radius: 30px;
	background: var(--color-point);
	color: var(--color-white);
	font-size: 1.4rem;
}

.top_wakuwaku_wrapper h2 span::after {
	content: "";
	position: absolute;
	left: calc(50% - 8px);
	bottom: -14px;
	display: block;
	width: 22px;
	height: 15px;
	background: url(/aiot/assets/common/images/ttl_sippo.svg) no-repeat center center / cover;
}

/* トップカテゴリー */

.wakuwaku_box {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 5%;
	max-width: 990px;
	margin-inline: auto;
}

.wakuwaku_box_txt {
	width: 47.5%;
}

.wakuwaku_box_txt p {
	line-height: 2;
}

.wakuwaku_box_txt b {
	color: var(--color-point);
	font-weight: 700;
}

.wakuwaku_box_txt p:nth-of-type(n+2) {
	margin-top: 2em;
}

.wakuwaku_box_img {
	width: 47.5%;
}

/* ワクワク スライド　Swiperカスタマイズ */
.swiper-pagination-bullet {
	border-radius: 0;
	width: 4rem;
	height: 0.6rem;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 .6rem;
}

.swiper-pagination-bullet-active {
	opacity: var(--swiper-pagination-bullet-opacity, 1);
	background: var(--color-point);
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: -30px;
	left: 0;
	width: 100%;
	text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
	width: 60px;
	height: 60px;
	margin-top: -30px;
	color: var(--color-white);
	background: var(--color-point);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 21px;
  width: 25px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: 1;
	background: var(--color-gray);
}

/* 前への矢印カスタマイズ */
.swiper-button-next,.swiper-rtl .swiper-button-prev {
	right: -30px;
}
.swiper-button-prev::after {
  background-image: url(/aiot/assets/common/images/icon_arrow_prev.svg);
}
/* 次への矢印カスタマイズ */
.swiper-button-prev,.swiper-rtl .swiper-button-next {
	left: -30px;
}
.swiper-button-next::after {
  background-image: url(/aiot/assets/common/images/icon_arrow_next.svg);
}



/* ワクワク１ */
.wakuwaku01 .top_slide {
	position: relative;
	margin-block-start: 6rem;
	border: 1px solid #D9D9D9;
	border-radius: 30px;
	width: 90%;
	margin-inline: auto;
}

.wakuwaku01 .swiper-slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-content: center;
  place-items: center;
	grid-auto-flow: column;
	padding-inline: 30px;
	padding-block: 30px;
}

.wakuwaku01 .swiper-slide div {
	margin-inline: 2em;
}

.wakuwaku01 .swiper-slide small {
	display: block;
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--color-point);
	letter-spacing: .2em;
}

.wakuwaku01 .swiper-slide em {
	display: block;
	margin-block: .7em 1.5em;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.6;
}

.wakuwaku01 .swiper-slide p {
	line-height: 2;
}


/* ワクワク2 */

.wakuwaku02 .wakuwaku_box {
	flex-direction: row-reverse;
}

.wakuwaku02 .top_slide .top_slide {
	margin-block-start: 8rem;
}

.wakuwaku02 .swiper-slide {
	text-align: center;
}

.wakuwaku02 .swiper-slide em {
	position: relative;
	display: block;
	margin-block-end: 1em;
	font-size: 1.8rem;
}

.wakuwaku02 .swiper-slide em::before {
	content: "";
	display: block;
	width: 82px;
	height: 37px;
	margin-inline: auto;
	background: url(/aiot/assets/index/images/icon_connect.svg) no-repeat center center / cover;
}

.wakuwaku02 .swiper-slide small {
	display: none;
}

.wakuwaku02 .swiper-slide p {
	margin-block-start: 1em;
	font-size: 1.4rem;
	text-align: left;
	line-height: 1.6;
}

/* ワクワク3 */

.wakuwaku03 .wakuwaku_box_txt img {
	margin-block-start: 3rem;
}

.wakuwaku03 .wakuwaku_box_img .swiper-slide div {
	display: flex;
	align-items: top;
	margin-block: 2rem;
}

.wakuwaku03 .wakuwaku_box_img .swiper-slide div small {
	display: block;
	color: var(--color-point);
	font-weight: 900;
	letter-spacing: .2em;
	margin-inline-end: 1rem;
}

.wakuwaku03 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
	width: 2.5rem;
	height: 0.4rem;
	margin: 0.4rem;
}


/* --------------- その他 --------------- */

/* タイトル */
.top_ttl_other {
	text-align: center;
}

.top_ttl_other span {
	display: block;
	font-size: 5rem;
	color: var(--color-point);
	font-weight: 700;
}

.top_ttl_other em {
	display: block;
	font-size: 2.4rem;
	font-weight: 500;
	margin-block-start: 1em;
}


/* PRODUCT */

.top_product {
	padding-block-start: 10rem;
}

.top_product .top_product_wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px;
	margin-block: 10rem;
}

.top_product .top_product_wrapper .top_product_item a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding-inline: 6%;
	padding-block: 20px;
	text-align: center;
}

.top_product .top_product_wrapper .top_product_item a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
	border: 1px solid var(--color-point);
	box-sizing: border-box;
}

.top_product .top_product_wrapper .top_product_item a span {
	display: block;
	margin-bottom: 2rem;
}

.top_product .top_product_wrapper .top_product_item a span:nth-of-type(1) img {
	height: 37px;
	width: 100%;
	object-fit: contain;
}

.top_product .top_product_wrapper .top_product_item a span:nth-of-type(2) img {
	height: 150px;
	width: 100%;
	object-fit: contain;
}

.top_product .top_product_wrapper .top_product_item h3 {
	font-size: 1.6rem;
}

.top_product .top_product_wrapper .top_product_item a p {
	margin-top: 1rem;
	text-align: left;
	font-size: 1.4rem;
	line-height: 1.57;
}


/* アプリ */

.link_app {
	padding-block: 10rem;
}

.link_app_qr {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10%;
	margin-block: 10rem;
	margin-inline: auto;
}

.link_app_qr span {
	display: inline-block;
	width: 150px;
}

.link_app_store {
	display: inline-block;
	margin-inline-start: 1em;
}

.link_app_store img {
	height: 60px;
	width: auto;
}

.link_app_store a:hover {
	opacity: 0.6;
}

/* キャプション */

.top_caption .list_caption_disc {
	padding-block: 5rem 10rem;
	border-top: 1px solid var(--color-gray);
}

/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {
	
	/* Productsリンクボックス */
	.top_product .top_product_wrapper .top_product_item a:hover {
		text-decoration: none;
	}
	
	.top_product .top_product_wrapper .top_product_item a:hover:before {
		border: 3px solid var(--color-point);
		border-radius: 15px;
		background: var(--color-sub);
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {

	article .base-width {
		padding-inline: 5%;
	}
	
	/* メインビジュアル */
	.mainvisual_txt {
		left: 5vw;
		top: 3vw;
	}

	.mainvisual_txt h1 div {
		margin-block:0;
	}
	
	.mainvisual_txt h1 div img {
		margin-block-end: .2em;
	}

	.mainvisual_txt h1 span {
		display: inline-block;
		font-size: 10vw;
		margin-inline-end: .2em;
		line-height: 1.3;
	}

	.mainvisual_txt small {
		margin-block-start: 1rem;
		font-size: 5vw;
	}

	.mainvisual_img {
		position: relative;
		width: 100%;
		right: 0;
		margin-block: 45vw 0;

	}
	
	/* メインビジュアル */
	.mainvisual_product {
		margin-block-start: 5rem;
		width: 100vw;
		height: auto;
		font-size: 0;
		text-align: center;
	}
	
	.mainvisual_product span {
		display: inline-block;
		position: relative;
		z-index: 1;
	}
	
	/* MV アニメーション */
	.mainvisual_product span.mv_aircon,
	.mainvisual_product span.mv_healsio,
	.mainvisual_product span.mv_hotcook,
	.mainvisual_product span.mv_kuusei,
	.mainvisual_product span.mv_reizo,
	.mainvisual_product span.mv_sentaku,
	.mainvisual_product span.mv_energy,
	.mainvisual_product span.mv_tv {
		width: 18%;
		margin-inline: 2%;
		margin-block: 1rem;
		left: 0;
		top: 0;
	}

	.mainvisual_product span.mv_tv,
	.mainvisual_product span.mv_healsio,
	.mainvisual_product span.mv_sentaku,
	.mainvisual_product span.mv_aircon {
		top: -30px;
	}
	
	/* トップ_about */
	
	.mainvisual_about {
		margin-block: 5rem 0;
		padding-block-end: 3em;
		font-size: 1.5rem;
		line-height: 1.6;
	}
	
	.mainvisual_about div {
		margin-inline: auto;
	}
	
	.mainvisual_about div em {
		font-size: 2rem;
		margin-block-end: 1em;
		text-align: left;
	}
	
	.mainvisual_about div p {
		text-align: left;
		font-size: 1.5rem;
		margin-block-start: 1em;
		line-height: 1.8;
	}
	

	/* ワクワク */
	.top_wakuwaku {
		padding-block: 8rem 4rem;
	}
	
	/* 吹き出し */
	.top_wakuwaku_wrapper h2 {
		margin-block-end: 4rem;
		font-size: 2rem;
	}
	
	.top_wakuwaku_wrapper h2 span {
		height: 50px;
		width: 200px;
		margin-inline: auto;
		margin-block-end: 3rem;
		border-radius: 30px;
	}

	
	/* トップカテゴリー */
	
	.wakuwaku_box {
		display: block;
	}
	
	.wakuwaku_box_txt {
		width: 100%;
	}

	.wakuwaku_box_txt p {
		font-size: 1.5rem;
		line-height: 1.6;
	}
	
	.wakuwaku_box_txt p:nth-of-type(n+2) {
		margin-top: 1em;
	}
	
	.wakuwaku_box_img {
		width: 100%;
		margin-block-start: 1.5em;
	}
	
	/* ワクワク スライド　Swiperカスタマイズ */
	.top_slide {
		margin-block-start: 3rem;
		position: relative;
		width: 95%;
		margin-inline: auto;
		border: 1px solid #D9D9D9;
		border-radius: 30px;
	}

	.swiper-slide {
		padding-inline: 5%;
		padding-block: 20px;
	}

	.swiper-pagination-bullet {
		border-radius: 0;
		width: 4rem;
		height: 0.6rem;
	}

	.swiper-button-next,
	.swiper-button-prev {
		width: 34px;
		height: 34px;
		margin-top: -17px;
	}
	.swiper-button-prev::after,
	.swiper-button-next::after {
		height: 16px;
		width: 20px;
	}
	
	/* 前への矢印カスタマイズ */
	.swiper-button-next,.swiper-rtl .swiper-button-prev {
		right: -17px;
	}

	/* 次への矢印カスタマイズ */
	.swiper-button-prev,.swiper-rtl .swiper-button-next {
		left: -17px;
	}
	
	
	/* ワクワク１ */
	.wakuwaku01 .top_slide {
		margin-block-start: 3rem;
		width: 95%;
	}
	
	.wakuwaku01 .swiper-slide {
		display: block;
		padding-inline: 20px;
		padding-block: 20px;
	}

	.wakuwaku01 .swiper-slide div {
		width: 90%;
		margin-inline: auto;
	}
	
	.wakuwaku01 .swiper-slide small {
		font-size: 1.5rem;
		margin-block-start: 1em;
	}
	
	.wakuwaku01 .swiper-slide em {
		margin-block: .5em .5em;
		font-size: 1.6rem;
	}


	.wakuwaku01 .swiper-slide p {
		font-size: 1.5rem;
		line-height: 1.6;
	}

	
	
	/* ワクワク2 */
	.wakuwaku02 .swiper-slide em {
		margin-block-end: 0;
	}

	.wakuwaku02 .swiper-slide span {
		display: block;
		width: 80%;
		margin-inline: auto;
	}

	.wakuwaku02 .swiper-slide small {
		display: block;
		font-size: 1.6rem;
		font-weight: 900;
		text-align: left;
		color: var(--color-point);
	}

	.wakuwaku02 .swiper-slide p {
		margin-block-start: 1em;
		font-size: 1.4rem;
		text-align: left;
	}
	
	/* ワクワク3 */
	
	.wakuwaku03 .wakuwaku_box_txt img {
		margin-block-start: 3rem;
	}
	
	.wakuwaku03 .wakuwaku_box_img .swiper-slide div {
		display: block;
		margin-block: 2rem 0;
	}
	
	.wakuwaku03 .wakuwaku_box_img .swiper-slide div small {
		margin-block-end: 1rem;
	}
	
	
	/* --------------- その他 --------------- */
	
	/* タイトル */
	.top_ttl_other span {
		font-size: 3.2rem;
	}
	
	.top_ttl_other em {
		font-size: 1.8rem;
	}
	
	
	/* PRODUCT */
	
	.top_product {
		padding-block-start: 5rem;
	}
	
	.top_product .top_product_wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(47%, 1fr));
		gap: 15px 5%;
		margin-block: 5rem 10rem;
	}
	
	.top_product .top_product_wrapper .top_product_item a {
		padding-inline: 5%;
		padding-block: 15px;
	}
	
	.top_product .top_product_wrapper .top_product_item a span {
		margin-bottom: 1rem;
	}
	
	.top_product .top_product_wrapper .top_product_item a span:nth-of-type(1) img {
		height: 35px;
	}
	
	.top_product .top_product_wrapper .top_product_item a span:nth-of-type(2) img {
		height: auto;
		width: 80%;
	}
	
	.top_product .top_product_wrapper .top_product_item a p {
		margin-top: 1rem;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}
	
	
	/* アプリ */
	
	.link_app {
		padding-block: 5rem 10rem;
	}
	
	.link_app_qr {
		gap: 5%;
		margin-block: 5rem;
		margin-inline: auto;
	}
	
	.link_app_qr span {
		display: none;
	}

	.link_app_qr img {
		height: 50px;
	}
	
	.link_app_store {
		margin-inline-start: 0;
	}

}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {

	/* スライドPC用記述 */

	.wakuwaku02 .top_slide .swiper-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 5%;
		place-content: center;
		place-items: center;
		margin-block-start: 8rem;
	}
	
	.wakuwaku02 .swiper-pagination,
	.wakuwaku02 .swiper-button-prev,
	.wakuwaku02 .swiper-button-next {
		display: none;
	}

}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {

		
}

/* ====================================
	大画面スタイル（1200px～）
===================================== */
@media screen and (1300px <=width) {

}