@charset "utf-8";

#container { width: 80%; margin: 100px auto 50px; }
h2 { text-align: center; padding-bottom: 10px; }
.title { color: #000; font-size: 1.2em; font-weight: bold; text-align: left;  width: 80%; padding: 4px 1em 2px; margin: 0 auto; box-sizing: border-box; border-radius: 3px; background: #e0e0e0; }
.title:first-child { margin: 0 auto 30px; }
.title:not(:first-child) { margin: 30px auto; }
br.only_sp { display: none; }

/* ------------------------------
G-Security
------------------------------ */
div#g-securityLogo a { opacity: 1; transition: 0.5s; }
div#g-securityLogo a:hover { opacity: 0.3; }
#g-security { width: 80%; margin: 0 auto; }
#g-securityLogo { width: 300px; margin: 0 auto; }
#g-security section { margin: 50px 0 25px; }
#g-security .g-securityTitle { font-size: 1.2rem; font-weight: bold; }
#g-security .sec02 ul li { display: flex; padding: 1rem 0; }
#g-security .sec02 .listTitle { font-size: 1.1rem; font-weight: bold; }
#g-security .sec02 .listTitle span { color: rgb(0, 160, 233); font-size: 2rem; }
#g-security .sec03 { width: 100%; margin: 0 auto; }
#g-security .sec03 ul { display: flex; }
#g-security .sec03 ul img { width: 100%; max-width: 100%; height: auto; }
.g-securityImg { width: 100%; margin: 50px auto; }
.g-securityImg img { width: 100%; max-width: 100%; height: auto; }

/* ------------------------------
求人広告事業
------------------------------ */
#job section { width: 80%; margin: 0 auto; }
#job_ads ul { overflow: hidden; }
#job_ads ul li:nth-child(1), #job_ads ul li:nth-child(2) { margin-top: 100px; height: 280px; }
#job_ads ul li:nth-child(3), #job_ads ul li:nth-child(4) { margin-top: 100px; height: 300px; }
#job_ads ul li:nth-child(5) { margin-top: 100px; height: 400px; }
#job_ads ul li:nth-child(even) { float: right; width: 44%; }
#job_ads ul li:nth-child(odd) { float: left; width: 44%; }
#job_ads ul li p:nth-child(2) { padding-top: 10px; }
#job_ads ul li p:last-child { padding-top: 10px; }
#job_ads ul li a { color: #66f; }
#job_ads ul li img { border-radius: 12px; }

/* ------------------------------
コンシュマープロモーション
------------------------------ */
#consumer_promotion section { width: 80%; margin: 0 auto; }
#consumer_promotion section img { width: 100%; max-width: 100%; height: auto; }
#consumer_promotion section dt { font-weight: bold; margin-top: 20px; border-bottom: 1px dotted #aaa; }
#consumer_promotion section dt:not(:first-child) { margin-top: 20px; }

/* ------------------------------
アプリ作成事業
------------------------------ */
#application img { max-width: 100%; height: auto; }
#application section { width: 80%; margin: 0 auto; }
#application section:not(:nth-child(2)) { margin-top: 100px; }
#application section div:first-child { font-size: 1.6em; text-align: center; margin-bottom: 20px; }
/* section_1 */
#section_1 ul { overflow: hidden; }
#section_1 ul:not(:nth-child(2)) { margin-top: 50px; }
#section_1 ul:nth-child(even) li:first-child { float: left; width: 49%; }
#section_1 ul:nth-child(even) li:last-child { float: right; width: 49%; }
#section_1 ul:nth-child(odd) li:first-child { float: right; width: 49%; }
#section_1 ul:nth-child(odd) li:last-child { float: left; width: 49%; }
#section_1 ul:nth-child(even) li:last-child { margin-left: 2%; }
#section_1 dl dt { font-size: 1.4em; border-bottom: 2px dotted #aaf; }
#section_1 dl dt span { color: #aaf; font-weight: bold; font-size: 1.4em; padding-right: 10px; }
#section_1 dl dd:nth-child(2) { padding: 10px; margin-top: 10px; border-radius: 6px; background: #ddf; }
#section_1 dl dd:last-child { padding-top: 10px; }
/* section_2 */
#section_2 { text-align: center; }
#section_2 img { display: block; margin: 30px auto 10px; }
#section_2 p:last-child { font-size: 0.8em; }
/* section_3 */
#section_3 #gyoushu { overflow: hidden; }
#section_3 #gyoushu img { float: left; width: 14.28571%; }
#section_3 p { text-align: center; }
#section_3 p:nth-child(3) { width: 90%; margin: 30px auto; }

/* ------------------------------
キャッシュレス事業
------------------------------ */
#cashless section { width: 80%; margin: 0 auto; }
#cashless img { display: block; width: 70%; max-width: 100%; height: auto; margin: 30px auto; }
#cashless section #quote::after { content: "（出典）・内閣府「2015年度国民経済計算年報」"; display: block; font-size: 0.8em; text-align: right; width: 50%; margin: 0 auto 20px; }
#cashless section #quote::after img { display: block; width: 100%; max-width: 100%; height: auto; margin-bottom: 0; }
#cashless section #quote img { margin-bottom: 0; }
#cashless section dl { margin-top: 30px; }
#cashless section dt { font-weight: bold; border-bottom: 1px dotted #aaa; }
#cashless section dt:not(:first-child) { margin-top: 10px; }
#cashless section dt:nth-child(1)::before { content: "1."; font-size: 1.4em; padding-right: 10px; }
#cashless section dt:nth-child(3)::before { content: "2."; font-size: 1.4em; padding-right: 10px; }
#cashless section dt:nth-child(5)::before { content: "3."; font-size: 1.4em; padding-right: 10px; }
#cashless section dt:nth-child(7)::before { content: "4."; font-size: 1.4em; padding-right: 10px; }
#cashless section dt:nth-child(9)::before { content: "5."; font-size: 1.4em; padding-right: 10px; }

/* ------------------------------
会社情報
------------------------------ */
.smallBr { display: none; }
#about table { font-size: 0.96em; margin: 0 auto; border-collapse: collapse; border: 1px solid #aaa; }
#about table th, #about table td { padding: 10px 1em; border: 1px solid #aaa; }
#about table th { text-align: left; }
#about table td span { display: block; }
#about table td span:not(:last-child) { margin-bottom: 6px; }
.access {  color: #fff; font-size: 1.2em; font-weight: bold; text-align: left; padding: 4px 1em 2px; margin-bottom: 20px; border-radius: 3px; background: #00aaff;  }
.googlemap { width: 660px; margin: 0 auto 50px; }

/* ------------------------------
採用情報
------------------------------ */
#recruit table { font-size: 0.96em; width: 70%; margin: 0 auto; border-collapse: collapse; border: 1px solid #aaa; }
#recruit table th, #recruit table td { text-align: left; padding: 10px 1em; border: 1px solid #aaa; }
#recruit table th { width: 17%; }
#recruit table td { width: 83%; }
/* ------------------------------
福利厚生
------------------------------ */
#welfare dl { width: 70%; margin: 0 auto; }
#welfare dl dt { font-size: 1.1em; font-weight: bold; border-bottom: 1px dotted #aaa; }
#welfare dl dt dd { padding: 6px 0 0 0; }
#welfare dl dt:not(:first-child) { margin-top: 20px; }
#welfare dl span { font-size: 0.9em; font-weight: normal; padding-left: 10px; }

/* ------------------------------
プライバシーポリシー
------------------------------ */
#privacy_policy section dl { width: 80%; margin: 0 auto; }
#privacy_policy section dl dt { font-weight: bold; padding-top: 16px; }

@media screen and (max-width: 1280px) {
	.title { width: 100%; }
	/* ------------------------------
	G-Security
	------------------------------ */
	#g-security { width: 100%; }

	/* ------------------------------
	アプリ作成事業
	------------------------------ */
	#application section { width: 100%; }
	/* ------------------------------
	コンシュマープロモーション
	------------------------------ */
	#consumer_promotion section { width: 100%; }
	/* ------------------------------
	キャッシュレス事業
	------------------------------ */
	#cashless section { width: 100%; }
	/* ------------------------------
	採用情報
	------------------------------ */
	#recruit table { width: 100%; }
}
@media screen and (max-width: 1024px) {
	#container { width: 90%; margin: 50px auto; }
	/* ------------------------------
	キャッシュレス事業
	------------------------------ */
	#cashless section #type { overflow: visible; }
	#cashless section #type dl { float: none; width: 100%; }
	#cashless section #type dl:nth-child(even) { padding-left: 0; }
	#cashless section #type dl:nth-child(n+3) { padding-top: 0; }
	/* ------------------------------
	求人広告事業
	------------------------------ */
		#job_ads ul li { margin-top: 50px; }
	#job_ads ul li:nth-child(1), #job_ads ul li:nth-child(2) { height: 330px; }
	#job_ads ul li:nth-child(3), #job_ads ul li:nth-child(4) { height: 350px; }
	#job_ads ul li:nth-child(5) { height: 450px; }
	/* ------------------------------
	採用情報
	------------------------------ */
	#recruit table th { width: 20%; }
	#recruit table td { width: 80%; }
	/* ------------------------------
	福利厚生
	------------------------------ */
	#welfare dl { width: 100%; }
}
@media screen and (max-width: 812px) {
	#container { width: 96%; margin: 30px auto; }
	/* ------------------------------
	アプリ作成事業
	------------------------------ */
	/* section_1 */
	#section_1 ul:nth-child(even) li:first-child { width: 29%; }
	#section_1 ul:nth-child(even) li:last-child { width: 69%; }
	#section_1 ul:nth-child(odd) li:first-child { width: 29%; }
	#section_1 ul:nth-child(odd) li:last-child { width: 69%; }
	/* ------------------------------
	キャッシュレス事業
	------------------------------ */
	#cashless div.sec_title { width: 100%; }
	#cashless img { width: 50%; }
	#cashless section p { width: 100%; }
	#cashless section #type { width: 100%; }
	#cashless section dl { width: 100%; }
	/* ------------------------------
	求人広告事業
	------------------------------ */
	#job section { width: 90%; }
	#job_ads ul li:nth-child(even) { width: 48%; }
	#job_ads ul li:nth-child(odd) { width: 48%; }
}
@media screen and (max-width: 667px) {
	/* ------------------------------
	G-Security
	------------------------------ */
	#g-security .sec02 ul li { flex-direction: column; padding: 2rem 0; width: 98%; margin: 0 auto; }
	#g-security .sec02 ul li img { display: block; width: 50%; margin: 0 auto; }

	/* ------------------------------
	アプリ作成事業
	------------------------------ */
	#application section div:first-child { font-size: 1.4em; }
	#section_1 dl dt { font-size: 1.2em; }
	#section_1 dl dt span { font-size: 1.2em; }
	#section_1 ul { overflow: visible; }
	#section_1 ul:nth-child(even) li:first-child { float: none; width: 50%; margin: 0 auto; }
	#section_1 ul:nth-child(even) li:last-child { float: none; width: 100%; }
	#section_1 ul:nth-child(odd) li:first-child { float: none; width: 50%; margin: 0 auto; }
	#section_1 ul:nth-child(odd) li:last-child { float: none; width: 100%; }
	/* ------------------------------
	会社情報
	------------------------------ */
	.googlemap { position: relative; padding-bottom: 45.45%; width: 100%; height: auto; }
	.googlemap iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
	/* ------------------------------
	採用情報
	------------------------------ */
	#recruit table th { width: 24%; }
	#recruit table td { width: 76%; }
}
@media screen and (max-width: 414px) {
	#container { font-size: 0.9rem; width: 98%; margin: 30px auto; }
	br.only_sp { display: block; }
	/* ------------------------------
	G-Security
	------------------------------ */
	#g-security .sec03 ul { flex-direction: column; }
	
	/* ------------------------------
	アプリ作成事業
	------------------------------ */
	#section_1 ul { overflow: visible; width: 96%; margin: 0 auto; }
	#section_1 ul:nth-child(even) li:first-child,
	#section_1 ul:nth-child(even) li:last-child,
	#section_1 ul:nth-child(odd) li:first-child,
	#section_1 ul:nth-child(odd) li:last-child
	 { float: none; width: 96%; }
	#section_1 ul:nth-child(even) li:last-child { margin-left: 0; }
	#application section div:first-child { font-size: 1.4em; }
	#section_1 dl dt { font-size: 1.2em; }
	#section_1 dl dt span { font-size: 1.2em; }
	/* ------------------------------
	求人広告事業
	------------------------------ */
	#job_ads ul { overflow: visible; }
	/* #job_ads ul li { height: auto; } */
	#job_ads ul li:nth-child(1), #job_ads ul li:nth-child(2) { margin-top: 50px; }
	#job_ads ul li:nth-child(3), #job_ads ul li:nth-child(4) { margin-top: 50px; }
	#job_ads ul li:nth-child(5) { margin-top: 50px; }
	#job_ads ul li:nth-child(even) { float: none; width: 100%; }
	#job_ads ul li:nth-child(odd) { float: none; width: 100%; }
	/* ------------------------------
	コンシュマープロモーション
	------------------------------ */
	#consumer_promotion section { font-size: 0.86em; }
	/* ------------------------------
	キャッシュレス事業
	------------------------------ */
	#cashless section { font-size: 0.86em; }
	#cashless img { width: 100%; }
	/* ------------------------------
	会社情報
	------------------------------ */
	.smallBr { display: block; }
	#about table { width: 96%; }
	#about table th, #about table td { font-size: 0.9em; display: block; width: 100%; }
	#about table th { background: #ddd; }
	/* ------------------------------
	採用情報
	------------------------------ */
	#recruit table th, #recruit table td { display: block; width: 100%; }
	#recruit table th { background: #ddd; }
	/* ------------------------------
	福利厚生
	------------------------------ */
	#welfare dl span { display: block; }
}