@charset "utf-8";
/*
Theme Name: 光琳
Version: 1.0
*/

/************************* IOT関連事業_共通 *************************/

img {
	max-width: 100%;
	width: auto;
	height: auto;
	vertical-align: text-bottom;
}

ul.icon_list {
	display: grid;
    grid-template-columns: 100%;
    gap: 15px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

ul.icon_list li {
	position: relative;
    padding: 10px 0 10px 70px;
	text-decoration: underline;
	font-weight: bold;
	line-height: 1.6;
}

ul.icon_list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
}

@media screen and (min-width:1001px) {
	
	ul.icon_list {
		margin-top: 35px;
	}
	
	ul.icon_list li {
		font-size: 25px;
		padding: 10px 0 10px 85px;
	}
	
	ul.icon_list li::before {
		width: 60px;
		height: 60px;
	}
	
}



/************************* スマートフォンサービス「Akuvox」 *************************/

/* 　サービス内容＿概要　 */
.service > div {
	position: relative;
	background-image: url("../images/img_service-main.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.service > div::before {
	content: "";
	display: block;
	padding-top: 83.3949476278%;
}

.service ul.inner {
	display: grid;
    grid-template-columns: 100%;
    gap: 50px;
    margin-top: 60px;
	text-align: center;
    list-style: none;
}

.service ul.inner li {
	position: relative;
}

.service ul.inner li:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
    left: 50%;
    transform: translate(-50%, -100%) rotate(90deg);
    transform-origin: center;
	width: 20px;
	height: 50px;
	background-color: #7f7f7f;
	clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

/* 　サービス内容＿ポイント　 */
.point ol {
	margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: li;
}

.point ol li {
	position: relative;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
}

.point ol li::before {
	content: "POINT.0" counter(li);
	counter-increment: li;
    display: block;
    max-width: 90px;
	margin-bottom: 10px;
    padding: 5px 5px 0px 10px;
	background-color: #b01030;
	clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, 100% 50%, calc(100% - 15px) 100%, 0 100%);
	font-size: 14px;
    font-weight: bold;
	color: #fff; 
}

.point ol li:not(:first-child) {
	margin-top: 20px;
}

.point ol li span {
	display: inline-block;
}

/* 　サービス内容＿ご提供プラン　 */
.plan h4:not(:first-of-type) {
	margin-top: 50px;
}

.plan .inner figure {
	margin-top: 10px;
}

.plan .inner figure figcaption {
    margin-top: 5px;
}

.plan ul.icon_list li:nth-child(1)::before { background-image: url("../images/img_plan03-a.png");}
.plan ul.icon_list li:nth-child(2)::before { background-image: url("../images/img_plan03-b.png");}
.plan ul.icon_list li:nth-child(3)::before { background-image: url("../images/img_plan03-c.png");}

/* 　制作会社・取り扱い会社・販売総代理店　 */
.sponsor ul {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor ul li figure figcaption {
	text-align: center;
}


@media screen and (min-width:1001px) {
	
	.service .inner,
	.function .inner {
		max-width: 1280px;
	}
	
	.service > div::before {
		padding-top: 33.3949476278%;
	}
	
	.service ul.inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 60px;
		margin-top: 80px;
	}
	
	.service ul.inner li:not(:first-child)::before {
		top: 50%;
		left: 0;
		transform: translate(-200%, -50%);
	}
	
	.point ol li {
		padding: 0 0 0 150px;
		font-size: 25px;
		line-height: 1.4;
	}
	
	.point ol li::before {
		position: absolute;
		top: 0;
		left: 0;
		padding: 7px 30px 3px 20px;
		font-size: 16px;
	}
	
	.function .inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 60px;
	}
	
	.plan h4:not(:first-of-type) {
		margin-top: 80px;
	}
	
	.plan .inner figure {
		margin-top: 30px;
	}
	
	.plan .inner figure figcaption {
		margin-top: 10px;
    	text-align: center;
	}

}



/************************* ギガプライズ *************************/

/* 　ギガプライズ＿共通　 */
.feature h4:not(:first-of-type) {
	margin-top: 50px;
}


/* 　ギガプライズ＿サービス提供戸数推移　 */
.feature figure figcaption {
	margin-top: 10px;
}


/* 　ギガプライズ＿Rent Agent　サービス内容　 */
.feature ul.icon_list {
	gap: 20px;
}

.feature ul.icon_list li {
	text-decoration: none;
}

.feature ul.icon_list li::before {
	top: -3px;
	transform: initial;
}

.feature ul.icon_list li h5 {
	font-size: 16px;
	font-weight: bold;
	color: #b01030;
}

.feature ul.icon_list li p {
	margin: 7px 0 0;
	padding-top: 10px;
	border-top: 1px solid #ccc;
	font-size: 14px;
	font-weight: normal;
}

.feature ul.icon_list li:nth-child(1)::before { background-image: url("../images/img_plan03-a.png");}
.feature ul.icon_list li:nth-child(2)::before { background-image: url("../images/img_plan03-b.png");}
.feature ul.icon_list li:nth-child(3)::before { background-image: url("../images/img_plan03-c.png");}
.feature ul.icon_list li:nth-child(4)::before { background-image: url("../images/img_feature04.png");}
.feature ul.icon_list li:nth-child(5)::before { background-image: url("../images/img_feature05.png");}


/* 　ギガプライズ＿保守運用体制について　 */
.feature ul.hosyu_list {
	margin-top: 30px;
	list-style: none;
}

.feature ul.hosyu_list > li {
	display: grid;
	grid-template-columns: 1fr 70%;
	gap: 25px;
	align-items: start;
}

.feature ul.hosyu_list > li:not(:first-child) {
	margin-top: 40px;
}

.feature ul.hosyu_list > li figure {
	text-align: center;
}

.feature ul.hosyu_list > li figure figcaption {
	font-size: 12.8px;
    font-weight: bold;
}

.feature ul.hosyu_list > li ul.icon_list {
	gap: 15px;
	margin: 0;
}

.feature ul.hosyu_list > li ul.icon_list > li {
	padding: 0 0 0 35px
}

.feature ul.hosyu_list > li ul.icon_list > li::before {
	width: 25px;
    height: 25px;
	background-image: url("../images/img_hosyu-check.png");
}

.hosyu-about ol {
	color: #b01030;
    font-weight: bold;
}

.hosyu-about figure {
	margin-top: 30px;
}


@media screen and (min-width:1001px) {
	
	.feature h4:not(:first-of-type) {
		margin-top: 80px;
	}
	
	.feature p.kome {
		margin-top: 30px;
	}
	
	.feature ul.icon_list {
		gap: 25px;
	}
	
	.feature ul.icon_list li h5 {
		font-size: 20px;
	}

	.feature ul.icon_list li p {
		margin: 10px 0 0;
		padding-top: 15px;
		font-size: 16px;
	}
	
	.feature ul.hosyu_list {
		margin-top: 40px;
	}

	.feature ul.hosyu_list > li {
		grid-template-columns: 1fr 75%;
		gap: 50px;
	}
	
	.feature ul.hosyu_list > li:not(:first-child) {
		margin-top: 60px;
	}
	
	.feature ul.hosyu_list > li figure figcaption {
		font-size: 12.8px;
	}
	
	.feature ul.hosyu_list > li ul.icon_list > li {
		padding: 0 0 0 45px;
		font-size: 18px;
	}
	
	.feature ul.hosyu_list > li ul.icon_list > li::before {
		top: 0;
		width: 30px;
		height: 30px;
	}
	
	.hosyu-about > div {
		display: grid;
    	grid-template-columns: 70% 1fr;
	}
	
	.hosyu-about figure {
		margin-top: 40px;
	}
	
}