@charset "utf-8";

/* variable
---------------------------------------------------------------------------*/
:root {
	--color-main: #006C93;
	--color-main-rgb: 0 108 147;
	--color-sub: #cadfe5;
	--color-border: #a9bdc4;
	--color-hover: #9ccadb;
}

/* base
---------------------------------------------------------------------------*/
#wrapper {
	padding: 0 0 50px 0;
}
.contents {
	padding: 50px 0;
}
.p-device-content img {
	max-width: 100%;
	height: auto;
	pointer-events: none;
}
.p-device-content select {
	padding: 10px 20px;
	border: solid 2px transparent;
	border-radius: 8px;
	background: var(--color-sub);
	color: #808080;
	cursor: pointer;
	transition: border .2s;
}
.p-device-content select:focus {
	border-color: var(--color-sub);
	background: #fff;
}
.p-device-content option {
	color: #263238;
}

/* u-text
---------------------------------------------------------------------------*/
.u-text-color-strong { color: #E55966; }
.u-text-color-note    { color: #afafaf; }

.u-text-link {
	border-bottom: solid 1px currentColor;
	color: #63bcb8;
	transition: .2s;
}
.u-text-link:hover {
	border-bottom-color: transparent;
	color: #63bcb8;
}
.u-text-weight-medium { font-weight: 500; }
.u-text-weight-bold { font-weight: 700; }

.u-text-size-small { font-size: .9em; }
.u-text-size-xsmall { font-size: .8em; }

/* u-align-center
---------------------------------------------------------------------------*/
.u-align-center-xxl {
	text-align: center;
}

/* u-align-right
---------------------------------------------------------------------------*/
.u-align-right-xxl {
	text-align: right;
}

/* u-show
---------------------------------------------------------------------------*/
.u-show-xl,
.u-show-lg,
.u-show-md,
.u-show-sm,
.u-show-xs { display: none; }

@media screen and (max-width: 1399px) {
	.u-show-xl { display: block; }
}
@media screen and (max-width: 1199px) {
	.u-show-lg { display: block; }
}
@media screen and (max-width: 991px) {
	.u-show-md { display: block; }
}
@media screen and (max-width: 767px) {
	.u-show-sm { display: block; }
}
@media screen and (max-width: 575px) {
	.u-show-xs { display: block; }
}

/* u-hide
---------------------------------------------------------------------------*/
.u-hide-xl,
.u-hide-lg,
.u-hide-md,
.u-hide-sm,
.u-hide-xs { display: block; }

@media screen and (max-width: 1399px) {
	.u-hide-xl { display: none; }
}
@media screen and (max-width: 1199px) {
	.u-hide-lg { display: none; }
}
@media screen and (max-width: 991px) {
	.u-hide-md { display: none; }
}
@media screen and (max-width: 767px) {
	.u-hide-sm { display: none; }
}
@media screen and (max-width: 575px) {
	.u-hide-xs { display: none; }
}

/* u-margin-top
---------------------------------------------------------------------------*/
.u-margin-top-5-xxl { margin-top: 5px; }
.u-margin-top-10-xxl { margin-top: 10px; }
.u-margin-top-20-xxl { margin-top: 20px; }
.u-margin-top-30-xxl { margin-top: 30px; }
.u-margin-top-40-xxl { margin-top: 40px; }
.u-margin-top-60-xxl { margin-top: 60px; }
.u-margin-top-80-xxl { margin-top: 80px; }

@media screen and (max-width: 1399px) {
	.u-margin-top-10-xl { margin-top: 10px; }
	.u-margin-top-20-xl { margin-top: 20px; }
	.u-margin-top-40-xl { margin-top: 40px; }
	.u-margin-top-80-xl { margin-top: 80px; }
}
@media screen and (max-width: 1199px) {
	.u-margin-top-10-lg { margin-top: 10px; }
	.u-margin-top-20-lg { margin-top: 20px; }
	.u-margin-top-40-lg { margin-top: 40px; }
	.u-margin-top-80-lg { margin-top: 80px; }
}
@media screen and (max-width: 991px) {
	.u-margin-top-10-md { margin-top: 10px; }
	.u-margin-top-20-md { margin-top: 20px; }
	.u-margin-top-40-md { margin-top: 40px; }
	.u-margin-top-60-md { margin-top: 60px; }
	.u-margin-top-80-md { margin-top: 80px; }
}
@media screen and (max-width: 767px) {
	.u-margin-top-10-sm { margin-top: 10px; }
	.u-margin-top-20-sm { margin-top: 20px; }
	.u-margin-top-40-sm { margin-top: 40px; }
	.u-margin-top-80-sm { margin-top: 80px; }
}
@media screen and (max-width: 575px) {
	.u-margin-top-10-xs { margin-top: 10px; }
	.u-margin-top-20-xs { margin-top: 20px; }
	.u-margin-top-40-xs { margin-top: 40px; }
	.u-margin-top-80-xs { margin-top: 80px; }
}

/* u-margin-bottom
---------------------------------------------------------------------------*/
.u-margin-bottom-5-xxl { margin-bottom: 5px; }
.u-margin-bottom-10-xxl { margin-bottom: 10px; }

/* c-grid[data-grid]
---------------------------------------------------------------------------*/
.c-grid {
	display: grid;
}
.c-grid[data-grid^="2"] { grid-template-columns: repeat(2,1fr); }
.c-grid[data-grid^="4"] { grid-template-columns: repeat(4,1fr); }
.c-grid[data-grid^="6"] { grid-template-columns: repeat(6,1fr); }
.c-grid[data-grid^="10"] { grid-template-columns: repeat(10,1fr); }

@media screen and (max-width: 991px) {
	.c-grid[data-grid*="md-4"] { grid-template-columns: repeat(4,1fr); }
}
@media screen and (max-width: 767px) {
	.c-grid[data-grid*="sm-4"] { grid-template-columns: repeat(4,1fr); }
	.c-grid[data-grid*="sm-6"] { grid-template-columns: repeat(6,1fr); }
	.c-grid[data-grid*="sm-8"] { grid-template-columns: repeat(8,1fr); }
}
@media screen and (max-width: 575px) {
	.c-grid[data-grid*="xs-1"] { grid-template-columns: repeat(1,1fr); }
	.c-grid[data-grid*="xs-2"] { grid-template-columns: repeat(2,1fr); }
}

/* c-grid[data-grid-gap]
---------------------------------------------------------------------------*/
.c-grid[data-grid-gap^="10"] { gap: 10px; }
.c-grid[data-grid-gap^="30"] { gap: 30px; }

/* c-title-secondary
---------------------------------------------------------------------------*/
.c-title-secondary {
	margin: 0 0 30px;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
}

@media screen and (max-width: 991px) {
	.c-title-secondary {
		font-size: 18px;
	}
}

/* c-nav-button
---------------------------------------------------------------------------*/
.c-nav-button {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.c-nav-button__item + .c-nav-button__item {
	padding-left: 20px;
}
.c-nav-button__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	width: 300px;
	margin: 0 auto;
	padding: 12px 10px 12px 25px;
	border-radius: 26px;
	background: #59B4C9;
	color: #fff;
	text-align: center;
	transition: .2s;
}
.c-nav-button__link:hover {
	color: #fff;
	box-shadow: 0 0 10px rgba(38, 50, 56, .25);
}
.c-nav-button__link .material-icons {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.c-nav-button__text {
	font-weight: 500;
}

@media screen and (max-width: 767px) {
	.c-nav-button__item {
		width: 100%;
	}
	.c-nav-button__item + .c-nav-button__item {
		padding-left: 0;
		padding-top: 20px;
	}
}

/* p-device-intro
---------------------------------------------------------------------------*/
.p-device-intro__head {}
.p-device-intro__body {
	background: #fff;
	margin: 40px auto 0;
	padding: 30px 40px;
	border-radius: 30px;
	color: #263238;
	font-size: 15px;
}
.p-device-introDefinition + .p-device-introDefinition {
	margin-top: 1.5em;
}
.p-device-introDefinition__body {
	padding: .5em 0 0 10px;
	font-weight: 400;
}
.p-device-introDefinition__bodyList {
	display: grid;
	gap: 1em;
}
.p-device-introDefinition__bodyList > li {
	display: grid;
	gap: 1em;
	grid-template-columns: 120px auto;
}
.p-device-introDefinition__bodyTitle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2px 1em;
	background: #6AB2CC;
	color: #fff;
	font-size: .9em;
	font-weight: 500;
	text-align: center;
}
@media screen and (max-width: 767px) {
	.p-device-intro__body {
		padding: 20px;
	}
}
@media screen and (max-width: 575px) {
	.p-device-introDefinition__bodyList {
		gap: 1.5em;
	}
	.p-device-introDefinition__bodyList > li {
		grid-template-columns: repeat(1, 1fr);
		gap: .5em;
	}
	.p-device-introDefinition__bodyTitle {
		text-align: left;
	}
}

/* p-device-content
---------------------------------------------------------------------------*/
.p-device-content {}
.p-device-content__area {
	max-width: 840px;
	margin-right: auto;
	margin-left: auto;
}
.p-device-content__area--information {
	max-width: 920px;
}

/* p-device-group
---------------------------------------------------------------------------*/
.p-device-group {
	max-width: 840px;
	margin-right: auto;
	margin-left: auto;
}
.p-device-group__head {
	padding: 20px;
	border-radius: 30px 30px 0 0;
	background: var(--color-main);
	overflow: hidden;
}
.p-device-group__title {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.p-device-group__title .material-icons {
	position: relative;
	top: 7px;
	line-height: 1;
	margin: 0 0 0 .25em;
	color: #e55966;
	font-size: 1.4em;
	transition: .2s;
}
.p-device-group__body {
	padding: 40px;
	border-radius: 0 0 30px 30px;
	background: #fff;
	overflow: hidden;
}
.p-device-group-unit + .p-device-group-unit {
	margin-top: 1.5em;
}
.p-device-group-unit__head {
	margin: 0 0 .5em;
}
.p-device-group-unit__body {
	padding: 0 0 0 10px;
}
/* is-active */
.p-device-group__head.is-active .p-device-group__title .material-icons {
	transform: rotate(-180deg);
}
@media screen and (max-width: 767px) {
	.p-device-group__body {
		padding: 20px;
	}
}

/* p-device-searchUnit
---------------------------------------------------------------------------*/
.p-device-searchUnit + .p-device-searchUnit {
	margin-top: 30px;
	padding-top: 20px;
	border-top: solid 1px var(--color-border);
}
.p-device-searchUnit__head {
	font-size: 18px;
	font-weight: 500;
}
.p-device-searchUnit__head::before {
	content: "\e037";
	position: relative;
	top: 2px;
	line-height: 1;
	margin: 0 0.25em 0 0;
	font-family: 'Material icons';
	color: #e55966;
}
.p-device-searchUnit__body {
	padding: 10px 0 0;
}

/* p-device-searchInput
---------------------------------------------------------------------------*/
.p-device-searchInput {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.p-device-searchInput__box {
	position: relative;
}
.p-device-searchInput__box {
	width: 100%;
}
.p-device-searchInput__boxText {
	padding: 12px 60px 12px 20px;
	border: solid 2px transparent;
	border-radius: 100vh;
	background: var(--color-sub);
	font-size: 16px;
	transition: .2s;
}
.p-device-searchInput__boxText:focus {
	border-color: var(--color-sub);
	background: #fff;
}
.p-device-searchInput__boxText::-webkit-input-placeholder {
	color: #808080;
}
.p-device-searchInput__boxText:-ms-input-placeholder {
	color: #808080;
}
.p-device-searchInput__boxText::-moz-placeholder {
	color: #808080;
}
.p-device-searchInput__boxText::placeholder {
	color: #808080;
}
.p-device-searchInput__boxSubmit {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.p-device-searchInput__boxSubmit .material-icons {
	line-height: 1;
	color: #42a1c6;
	font-size: 40px;
}

/* p-device-searchMenu
---------------------------------------------------------------------------*/
.p-device-searchMenu {}
.p-device-searchMenu__item {}
.p-device-searchMenu__link {
	display: block;
	padding: 5px;
	background: var(--color-sub);
	border: solid 2px var(--color-sub);
	border-radius: 8px;
	font-weight: 500;
	text-align: center;
	transition: .2s ease-out;
}
.p-device-searchMenu__link--invalid {
	pointer-events: none;
	background: #f2f2f2;
	border-color: #f2f2f2;
	color: #ccc;
}
.p-device-searchMenu__link:hover {
	background: var(--color-hover);
	border-color: var(--color-hover);
	color: #263238;
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
}

/* p-device-model
---------------------------------------------------------------------------*/
.p-device-model {
	border-bottom: solid 1px var(--color-border);
}
.p-device-model:first-of-type {
	margin-top: 30px;
	border-top: solid 1px var(--color-border);
}
.p-device-model__content {
	display: grid;
	grid-template-columns: 22% auto;
}
.p-device-model__contentHead {
	padding: 20px;
	background: var(--color-sub);
	text-align: center;
}
.p-device-model__contentBody {
	padding: 20px 30px;
}
.p-device-model__contentTitle {
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
}
@media screen and (max-width: 991px) {
}

/* p-device-model__list
---------------------------------------------------------------------------*/
.p-device-model__list {
	display: flex;
	flex-wrap: wrap;
	margin: -10px 0 0 -30px;
}
.p-device-model__listItem {
	padding: 10px 0 0 30px;
}
.p-device-model__listLink {
	border-bottom: solid 1px currentColor;
	transition: .2s;
}
.p-device-model__listLink:hover {
	border-bottom-color: transparent;
}

/* p-device-information
---------------------------------------------------------------------------*/
.p-device-information + .p-device-information {
	margin-top: 80px;
}
.p-device-information__intro {
	display: flex;
	justify-content: center;
}
.p-device-information__introContent {
	padding: 20px 40px;
	background: #fff;
	border-radius: 30px;
}
.p-device-information__introHead {
	inline-size: fit-content;
	margin-inline: auto;
	font-size: 18px;
}
.p-device-information__introSentence {
	padding: .5em 0 0;
}

.p-device-information__table {
	width: 100%;
	font-size: 15px;
}
.p-device-information__table thead tr {
	background: var(--color-main);
}
.p-device-information__table tbody tr:nth-child(2n+1) {
	background: #fff;
}
.p-device-information__table tbody tr:nth-child(2n) {
	background: #ebf4f7;
}
.p-device-information__table tfoot {
	position: sticky;
	left: 0;
	bottom: 0;
}
.p-device-information__table thead th,
.p-device-information__table tfoot th {
	padding: 10px;
	color: #fff;
	font-weight: 500;
	vertical-align: middle;
}
.p-device-information__table tfoot tr {
	background: #91a6ae;
}
.p-device-information__table th,
.p-device-information__table td {
	border: solid 1px #b5cac8;
}
.p-device-information__table td {
	padding: 15px 20px;
	vertical-align: middle;
}
.p-device-information__table td:nth-child(1) {
	font-weight: 500;
}
.p-device-information__table td:nth-child(n+2):nth-child(-n+4) {
	padding-right: 10px;
	padding-left: 10px;
	font-size: 16px;
	text-align: center;
}
.p-device-information__table thead .p-device-information__tableProductImg,
.p-device-information__table tfoot .p-device-information__tableProductImg {
	padding-right: 4px;
	padding-left: 4px;
}
.p-device-information__tableTextSmall {
	font-size: 14px;
}
@media screen and (max-width: 991px) {
	.p-device-information + .p-device-information {
		margin-top: 60px;
	}
}
@media screen and (max-width: 767px) {
	.p-device-information__scroll {
		overflow-x: scroll;
		padding: 0 0 .5em;
	}
	.p-device-information__table tfoot {
		position: static;
	}
	.p-device-information__table {
		width: 800px;
	}
}
@media screen and (max-width: 575px) {
}

/* p-device-informationSingle
---------------------------------------------------------------------------*/
.p-device-informationSingle {}
.p-device-informationSingle__unit + .p-device-informationSingle__unit {
	padding-top: 30px;
}
@media screen and (max-width: 991px) {
	.p-device-informationSingle__unit + .p-device-informationSingle__unit {
		padding-top: 20px;
	}
}

/* p-sub-nav
---------------------------------------------------------------------------*/
.p-sub-nav {
	max-width: 800px;
	margin: 40px auto 60px;
}
.p-sub-navList {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(5,1fr);
}
.p-sub-navList__link {
	position: relative;
	display: block;
	padding: 10px 30px 10px 20px;
	border: solid 2px var(--color-sub);
	border-radius: 8px;
	background: var(--color-sub);
	overflow: hidden;
	font-weight: 500;
	text-align: center;
	transition: .2s ease-out;
}
.p-sub-navList__link::after {
	content: "\e5cf";
	position: absolute;
	top: 50%;
	right: 10px;
	color: currentColor;
	font-size: 20px;
	font-family: 'Material icons';
	transform: translateY(-50%);
	transition: .2s ease-out;
}
.p-sub-navList__link:hover {
	color: #263238;
	background: var(--color-hover);
	border-color: var(--color-hover);
}
.p-sub-navList__link:hover::after {
	transform: translateY(-40%);
}
@media screen and (max-width: 991px) {
	.p-sub-navList__link {
		font-size: 14px;
	}
}
@media screen and (max-width: 767px) {
	.p-sub-nav {
		margin: 40px auto;
		max-width: 560px;
	}
	.p-sub-navList {
		grid-template-columns: repeat(3,1fr);
	}
}
@media screen and (max-width: 575px) {
	.p-sub-navList {
		grid-template-columns: repeat(2,1fr);
	}
}

/* p-search-resultList
---------------------------------------------------------------------------*/
.p-search-resultList {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 60px;
	row-gap: 15px;
	width: fit-content;
	margin: 0 auto;
}
.p-search-resultList__item {
}
.p-search-resultList__link {
	font-size: 18px;
	font-weight: bold;
}
@media screen and (max-width: 767px) {
	.p-search-resultList__link {
			font-size: 16px;
	}
}
@media screen and (max-width: 575px) {
	.p-search-resultList {
		grid-template-columns: repeat(1,1fr);
		gap: 15px;
	}
}

/* p-device-menu
---------------------------------------------------------------------------*/
.p-device-menu {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
	max-width: 560px;
	margin-right: auto;
	margin-left: auto;
}
.p-device-menu__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: solid 2px var(--color-main);
	background: #fff;
	border-radius: 8px;
	color: var(--color-main);
	text-align: center;
	transition: background .2s, color .2s;
}
.p-device-menu__link--invalid {
	background: var(--color-main);
	color: #fff;
	font-weight: 500;
	pointer-events: none;
}
.p-device-menu__linkIcon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.p-device-menu__link:hover {
	background: var(--color-main);
	color: #fff;
}

@media screen and (max-width: 575px) {
	.p-device-menu {
		max-width: 320px;
		grid-template-columns: repeat(1,1fr);
	}
}