/* 
	Custom Stylesheet

	Last Updated : 24/02/03

	(C) PEOPLUS Studio, All rights reserved.
	https://peoplus.studio/
*/

	/**
	 * Common Styles
	 */
	details {
		margin:5px 0 10px;
	}
	details > summary {
		border: #588FF9 1px solid;
		border-radius: 5px;
		background: #FFFFFF;
		color: #599FF9;
		padding: 10px;
		outline: 0;
		border-radius: 5px;
		cursor: pointer;
		transition: background 0.3s;
		text-align: left;
		font-weight: bold;
	}
	details > summary::-webkit-details-marker {
		border: #588FF9 1px solid;
		border-radius: 5px;
		background: #FFFFFF;
		color: #FFFFFF;
		background-size: contain;
		transform: rotate3d(0, 0, 1, 90deg);
		transition: transform 0.25s;
	}
	details[open] > summary::-webkit-details-marker {
		transform: rotate3d(0, 0, 1, 180deg);
	}
	details[open] > summary {
		background: #588FF9;
		color: #FFFFFF;
	}
	details[open] > summary ~ * {
		animation: ppstudio-animation-reveal 0.3s;
	}
	details[open] > .description-contents {
		border: #588FF9 1px solid;
		background: #2952A1;
		color: #FFFFFF;
		margin: 5px 0 10px;
		padding: 5px 10px;
		line-height: 25px;
		border-radius: 5px;
	}
	details[open] > .description-contents > .description-version-control {
		margin-top: 10px;
	}

	@keyframes ppstudio-animation-reveal {
		from { opacity:0; transform:translate3d(0, -30px, 0); }
		to { opacity:1; transform:translate3d(0, 0, 0); }
	}

	/**
	 * Index
	 */
	article.banner-main.system-series-5::before {
		content: "";
		position: absolute;
		height: 25rem;
		width: 100%;
		background-image: url('../images/logos/peoplus_system_logo_img.png');
		background-size: 10rem;
		background-repeat: no-repeat;
		background-position: 90% 50%;
	}

	/**
	 * Main Banner
	 */
	article.banner-main.system-series-6 {
		position: relative;
	}
	@media (min-width: 551px) { /* 1024px */
		article.banner-main.system-series-6::before {
			content: "";
			position: absolute;
			height: 25rem;
			width: 100%;
			background-image: url('../images/banners/2022/peoplus_system_series_6_main_banner_img.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-attachment: scroll;
			background-position: 50% 5%;
			display: inline-block;
			opacity: 0;

			animation: fadeinMoveToTop 1.5s forwards;
			-moz-animation: fadeinMoveToTop 1.5s forwards; /* Firefox */
			-webkit-animation: fadeinMoveToTop 1.5s forwards; /* Safari and Chrome */
			-o-animation: fadeinMoveToTop 1.5s forwards; /* Opera */
		}
		article.banner-main.system-series-6 > div.items-center {
			opacity: 0;
			animation: fadein 1.5s 1s forwards;
			-moz-animation: fadein 1.5s 1s forwards; /* Firefox */
			-webkit-animation: fadein 1.5s 1s forwards; /* Safari and Chrome */
			-o-animation: fadein 1.5s 1s forwards; /* Opera */
		}
	}
	@media (max-width: 550px) { /* 1024px */
		article.banner-main.system-series-6::before {
			content: "";
			position: absolute;
			height: 25rem;
			width: 100%;
			background-image: url('../images/banners/2022/peoplus_system_series_6_main_banner_mobile_img.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-attachment: scroll;
			background-position: center bottom;
			display: inline-block;
			opacity: 0;

			animation: fadeinMoveToBottomMore 1.5s forwards;
			-moz-animation: fadeinMoveToBottomMore 1.5s forwards; /* Firefox */
			-webkit-animation: fadeinMoveToBottomMore 1.5s forwards; /* Safari and Chrome */
			-o-animation: fadeinMoveToBottomMore 1.5s forwards; /* Opera */
		}
		article.banner-main.system-series-6 > div.items-center {
			opacity: 0;
			animation: fadein 1.5s 1s forwards;
			-moz-animation: fadein 1.5s 1s forwards; /* Firefox */
			-webkit-animation: fadein 1.5s 1s forwards; /* Safari and Chrome */
			-o-animation: fadein 1.5s 1s forwards; /* Opera */
		}
	}

	article.banner-main.universe-launch {
		position: relative;
	}
	@media (min-width: 551px) { /* 1024px */
		article.banner-main.universe-launch::before {
			content: "";
			position: absolute;
			height: 25rem;
			width: 100%;
			background-image: url('../images/banners/2023/peoplus_universe_main_banner_img.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-attachment: scroll;
			background-position: 50% 5%;
			display: inline-block;
			opacity: 0;

			animation: fadeinMoveToTop 1.5s forwards;
			-moz-animation: fadeinMoveToTop 1.5s forwards; /* Firefox */
			-webkit-animation: fadeinMoveToTop 1.5s forwards; /* Safari and Chrome */
			-o-animation: fadeinMoveToTop 1.5s forwards; /* Opera */
		}
		article.banner-main.universe-launch > div.items-center {
			opacity: 0;
			animation: fadein 1.5s 1s forwards;
			-moz-animation: fadein 1.5s 1s forwards; /* Firefox */
			-webkit-animation: fadein 1.5s 1s forwards; /* Safari and Chrome */
			-o-animation: fadein 1.5s 1s forwards; /* Opera */
		}
	}
	@media (max-width: 550px) { /* 1024px */
		article.banner-main.universe-launch::before {
			content: "";
			position: absolute;
			height: 25rem;
			width: 100%;
			background-image: url('../images/banners/2023/peoplus_universe_main_banner_mobile_img.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-attachment: scroll;
			background-position: center bottom;
			display: inline-block;
			opacity: 0;

			animation: fadeinMoveToBottomMore 1.5s forwards;
			-moz-animation: fadeinMoveToBottomMore 1.5s forwards; /* Firefox */
			-webkit-animation: fadeinMoveToBottomMore 1.5s forwards; /* Safari and Chrome */
			-o-animation: fadeinMoveToBottomMore 1.5s forwards; /* Opera */
		}
		article.banner-main.universe-launch > div.items-center {
			opacity: 0;
			animation: fadein 1.5s 1s forwards;
			-moz-animation: fadein 1.5s 1s forwards; /* Firefox */
			-webkit-animation: fadein 1.5s 1s forwards; /* Safari and Chrome */
			-o-animation: fadein 1.5s 1s forwards; /* Opera */
		}
	}

	/**
	 * Sub Banner
	 */
	 div.banner-major.instant{
        background: #FFFFFF;
	}
	div.banner-major.suite{
        background: linear-gradient(to right, #FFFF00, #EEAE00);
        background-size: 150% 150%;
	}

	div.banner-major.account {
		background: linear-gradient(to right, #588FF9, #2952A1);
	}

	article.banner-large.belief-in-quality {
		background-image: none;
	}

	article.banner-large.belief-in-quality::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../images/banners/peoplus_belief_for_quality_bg_img.png');
		background-size: 105%;
		background-repeat: no-repeat;
		background-position: center;
		display: inline-block;
		opacity: 0.75;
	}

	article.banner-large.belief-in-quality::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 20rem;
		height: 100%;
		background-image: url('../images/banners/peoplus_belief_for_quality_hand_img.png');
		background-size: 20rem;
		background-repeat: no-repeat;
		background-position: -5.5rem 6rem;
		display: inline-block;
	}

	div.banner-middle.design::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: linear-gradient(to right, #588FF9, #2952A1, #D03A3A, #7CC623, #E4CC00);
		display: inline-block;
	}

	@media (max-width: 767px) { /* 1024px */
		article.banner-main.system-series-5::before,
		article.banner-large.belief-in-quality::after {
			content: "";
			display: none;

			opacity: 0.0;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		article.banner-large.belief-in-quality {
			background-image: url('../images/banners/peoplus_belief_for_quality_bg_img.png');
			background-size: 105%;
			background-repeat: no-repeat;
			background-position: center;
		}

		article.banner-large.belief-in-quality::before {
			background-image: url('../images/banners/peoplus_belief_for_quality_hand_img.png');
			background-size: 20rem;
			background-repeat: no-repeat;
			background-position: -8rem 8rem;

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
	}

	/**
	 * Service Use Policy
	 */
	article.mission::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: linear-gradient(to right, #588FF9, #2952A1, #D03A3A, #7CC623, #E4CC00);
		display: inline-block;
	}

	article.mission div.special-text {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	@media (max-width: 767px) { /* 1024px */
		article.mission div.special-text {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}

	/**
	 * About
	 */
	article div.family {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	article div.family > div.family-item {
		margin-bottom: 1%;
		width: 49.5%;
		height: 100%;
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		justify-content: flex-start;
	}

	article div.family > div.family-item > div.profile-image {
		margin-right: 0.5rem;
		width: 30%;
		height: 225px;
		min-width: 110px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		box-sizing: border-box;
	}

	article div.family > div.family-item > div.ments {
		text-align: left;
	}

	@media (max-width: 767px) { /* 1024px */
		article div.family {
			flex-direction: column;
			justify-content: none;
		}
		article div.family > div.family-item {
			margin-bottom: 0.5rem;
			width: 100%;
		}
		article div.family > div.family-item > div.profile-image {
			width: 110px;
			background-size: 100%;
		}
	}

	/**
	 * Service Part
	 */
	article.service-section {
		min-height: 25rem;
		width: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center right;
	}

	article.service-section > .items-center > .section-margin-left {
		margin-left: 3rem;
	}

	article.service-section > .items-center > .section-margin-left > .section-margin-title {
		margin-top: 1rem;
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	article.service-section.account-section-1 {
		background-image: url('../images/services/account/peoplus_account_section_1_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.account-section-2 {
		background-image: url('../images/services/account/peoplus_account_section_2_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.account-section-3 {
		background-image: url('../images/services/account/peoplus_account_section_3_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.account-section-4 {
		background-image: url('../images/services/account/peoplus_account_section_4_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.account-section-5 {
		background-image: url('../images/services/account/peoplus_account_section_5_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}
	
	article.service-section.system-section-ver5-1 {
		background-image: url('../images/services/system/peoplus_system_ver5_section_1_img.png');
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.system-section-ver5-2 {
		background-color: #1e1e1e;
		background-image: url('../images/services/system/peoplus_system_ver5_section_2_img.png');
		background-size: 55%;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.system-section-ver5-3 {
		background-image: url('../images/services/system/peoplus_system_ver5_section_3_img.png');
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.system-section-ver5-4 {
		background-image: url('../images/services/system/peoplus_system_ver5_section_4_img.png');
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.system-section-ver6-1 {
		background-image: url('../images/services/system/peoplus_system_ver6_section_1_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.system-section-ver6-2 {
		background-color: #1e1e1e;
		background-image: url('../images/services/system/peoplus_system_ver6_section_2_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.system-section-ver6-3 {
		background-image: url('../images/services/system/peoplus_system_ver6_section_3_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.system-section-ver6-4 {
		background-image: url('../images/services/system/peoplus_system_ver6_section_4_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.system-section-ver6-5 {
		background-image: url('../images/services/system/peoplus_system_ver6_section_5_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.banner-main.universe::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: linear-gradient(to right, #588FF9, #2952A1, #D03A3A, #7CC623, #E4CC00);
		display: inline-block;
	}

	article.service-section.universe-section-1 {
		background-image: url('../images/services/universe/peoplus_universe_section_1_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.universe-section-2 {
		background-image: url('../images/services/universe/peoplus_universe_section_2_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center right;
	}

	article.service-section.universe-section-3 {
		background-image: url('../images/services/universe/peoplus_universe_section_3_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.universe-section-4 {
		background-image: url('../images/services/universe/peoplus_universe_section_4_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	article.service-section.universe-section-5 {
		background-image: url('../images/services/universe/peoplus_universe_section_5_img.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 100% 50%;
	}

	@media (max-width: 767px) { /* 1024px */
		article.service-section {
			min-height: 10rem;
			width: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: top right;
		}

		article.service-section > .items-center > .section-margin-left {
			margin-left: 1rem;
		}

		article.service-section > .items-center > .section-margin-left > .section-margin-title {
			margin-top: 1rem;
			font-size: 1.25rem;
			line-height: 1.75rem;
		}

		article.service-section > .items-center > .section-margin-left > .section-margin-description {
			margin-top: 1.5rem;
		}

		article.service-section.account-section-1 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.account-section-2 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
		
		article.service-section.account-section-3 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.account-section-4 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}

		article.service-section.account-section-5 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}

		article.service-section.system-section-ver5-1 {
			background-color: #FFFFFF;
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: top right;
		}
	
		article.service-section.system-section-ver5-2 {
			background-color: #1E1E1E;
			background-size: 45%;
			background-repeat: no-repeat;
			background-position: top right;
		}
		
		article.service-section.system-section-ver5-3 {
			background-color: #FFFFFF;
			background-size: 45%;
			background-repeat: no-repeat;
			background-position: top right;
		}
	
		article.service-section.system-section-ver5-4 {
			background-color: #FFFFFF;
			background-size: 45%;
			background-repeat: no-repeat;
			background-position: top right;
		}

		article.service-section.system-section-ver6-1 {
			padding-top: 40%;
			background-color: #FFFFFF;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.system-section-ver6-2 {
			padding-top: 40%;
			background-color: #1E1E1E;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
		
		article.service-section.system-section-ver6-3 {
			padding-top: 40%;
			background-color: #588FF9;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.system-section-ver6-4 {
			padding-top: 40%;
			background-color: #FFFFFF;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}

		article.service-section.system-section-ver6-5 {
			padding-top: 40%;
			background-color: #FFFFFF;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}

		article.service-section.universe-section-1 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.universe-section-2 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
		
		article.service-section.universe-section-3 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	
		article.service-section.universe-section-4 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}

		article.service-section.universe-section-5 {
			padding-top: 40%;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center 7.5%;
		}
	}

	/**
	 * Policy Contents
	 */
	article.policy ul.contents {
		margin: 0;
		padding: 0;
		list-style: none;
		display: inherit;
	}

	article.policy ul.contents > li {
		padding: inherit;
		margin-right: 0.5rem;
		text-align: center;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		display: inline-block;
	}

	article.policy ul.contents > li.divider-right {
		position: inherit;
		padding-right: 0.75rem;
		border-right: 1px solid #D1D8E4;
		border-right-width: 0.1rem;
	}

	article.policy ul.contents > li > a {
		color: #2952A1;
		font-weight: bold;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	article.policy ul.contents > li > a:hover {
		color: #588FF9;
		font-weight: bold;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}