@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *						style_ticty.css
 *
 *-------------------------------------------------------------*/

	/* ---------- ---------- ---------- ---------- ----------
	 *					common
	 * ---------- ---------- ---------- ---------- ---------- */
	 	body						{ color: #5e686f; font-size: 16px; font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic ProN', "Noto Sans JP", 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
		#mainContents_TCiTY .bold						{ font-weight: 600; }
		#mainContents_TCiTY .contentsBox				{ line-height: 1.7; }

		.colOrange					{ color: #ff9100; }
		.colBule					{ color: #025297; }
		.colBule-title				{ color: #003067; }
		.colWhite-title				{ color: #fff; }

		.fontFutura					{ font-family: Futura, 'Hind', 'Century Gothic';}

		.title h3					{ font-size: 220%; }
		.title h3.fontFutura		{ font-size: 235%; }
		.title-bgSet				{ text-align: center; padding-top: 30px; max-width: 800px; margin: 0 auto; }
		.title-bgSet.lightblue		{ background:url("./../images/title-bgSet-lightblue.png") no-repeat center top; }
		.title-bgSet.white			{ background:url("./../images/title-bgSet-white.png") no-repeat center top; }
		.title-bgSet.blue			{ background:url("./../images/title-bgSet-blue.png") no-repeat center top; }



		.title-bgSet h3				{ margin-bottom: -12px; }
		.title-bgSet span			{ font-size: 95%; }
		.title-bgSet .title-texts	{ margin: 39px 0 60px; text-align: left; }


		section.double				{ border: solid 1px #025297; outline: solid 3px #025297; outline-offset: 4px; padding: 60px 100px 130px; }

		.num-functions				{ background-color: #025297; color: #fff; box-sizing: border-box; text-align: center; flex-shrink: 0; }


	
	/* ---------- ---------- ---------- ---------- ----------
	 *					topArea
	 * ---------- ---------- ---------- ---------- ---------- */
		/* topArea */
		#topArea					{ text-align: center; clear: both; position: relative; color: #fff; padding: 90px 0; height: 720px; box-sizing: border-box; }
		#topArea::before			{ content: ""; background:url("./../images/top_img_720.png") no-repeat center top; background-size: cover; width: 100%; height: 720px; position: fixed; top: 0; left: 0; z-index: -1; }
		#topArea #topLead			{ position: fixed; width: 100%; z-index: -1; }		

		#topArea #mainCatch			{ font-size: 52px; line-height: 1.1; letter-spacing: 0.06em; font-weight: 600; }
		#topArea #mainCatch span	{ font-size: 39px; display: inline-block; vertical-align: middle; margin-bottom: 14px; }
		#topArea #mainLogoArea		{ max-width: 700px; background: #fff; margin: 25px auto 40px; padding: 36px 0 54px; box-shadow: 0 0 17px #fff; }
		#topArea #mainLogoArea img	{ width: 50%; }


		@media (min-width:959px) and (min-height: 960px) {
			#topArea					{ padding: 120px 0; height: 960px; }
			#topArea::before			{ background:url("./../images/top_img.png") no-repeat center top; background-size: cover; height: 960px; }

			#topArea #mainCatch			{ font-size: 66px; line-height: 1.3; }
			#topArea #mainLogoArea		{ max-width: 782px; margin: 30px auto 50px; padding: 50px 0 78px; }
			#topArea #subCatch			{ font-size: 125%; line-height: 1.7; }
			#topArea #mainLogoArea img	{ width: auto; }
		}
		


	/* ---------- ---------- ---------- ---------- ----------
	 *					meritArea
	 * ---------- ---------- ---------- ---------- ---------- */
		/* meritArea */
		#meritArea						{ background:url("./../images/merit.png") no-repeat center top; background-size: cover;text-align: center; clear: both; position: relative; padding: 120px 40px; }
		#meritArea .title.colOrange > *	{ font-weight: bold; line-height: 1.6; }
		#meritArea .title.colOrange p	{ font-size: 153%; }


		#meritLead								{ width: calc(985px + 23px); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; }
		#meritLead	.meritSet					{ width: 310px; margin-right: 23px; margin-bottom: 23px; }
		#meritLead	.meritSet .num-merit		{ height: 0; width: 130px; box-sizing: border-box; border-bottom: 26px solid #ff9100; border-right: 10px solid transparent; border-left: 10px solid transparent; color: #fff; line-height: 29px; text-align: center; font-size: 18px; font-weight: 600; font-family: Futura, 'Century Gothic'; letter-spacing: 0.5px; }
		#meritLead .meritSet p.colBule			{ background-color: #fff; border: 2px solid #ff9100; box-sizing: border-box;  padding: 10px; min-height: 130px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; line-height: 1.5; }
		#meritLead .meritSet p.colBule span.bold{ font-size: 123%; }
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					functionsArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	/* double */
		#functionsArea							{ background-color: #fff; padding: 30px; }
		#functionsLead							{ display: flex; justify-content: space-between; max-width: 1095px; margin: 0 auto; }
		#functionsLead section:nth-child(odd)	{ margin-top: 35px; }
		#functionsLead section img				{ box-shadow: 0 0 17px #b2b2b2; margin: 0 20px; }

		.item									{ display: flex; box-sizing: border-box; margin-bottom: 35px; }
		.item div								{ margin-top: -7px; }

		#functionsLead .item .num-functions		{ width: 47px; height: 47px; font-size: 190%; margin-right: 20px; }

		#functionsLead .item div				{ max-width: 215px; }
		#functionsLead .item div p				{ font-size: 130%; margin-bottom: 5px; }


		/* functions-child */
		.functions-child						{ background-color: #fff; }
		.functions-child section				{ padding: 80px 20px 80px; display: flex; justify-content: space-between;max-width: 1095px; margin: 0 auto; box-sizing: border-box; }
		.functions-child:first-child section	{ margin-top: -10px; }

		.functions-child:nth-child(even)		{ background-color: #e6e6e6; }
		.functions-child .item .num-functions	{ width: 65px; height: 65px; font-size: 270%; margin-right: 23px; }
		.functions-child .item p.colBule 		{ font-size: 210%; margin-bottom: -5px; }
		.functions-child article p.colBule 		{ font-size: 118%; }
		.functions-child .functions-child-left	{ max-width: 540px; margin-right: 40px; }
		.functions-child .functions-child-left .item div	{ margin-top: -12px; }
		.functions-child .functions-child-left article	{ margin-bottom: 30px; font-size: 98%; }
		.functions-child .functions-child-left article:last-child	{ margin-bottom: 0; }

		.functions-child .functions-child-right	{ display: flex; flex-wrap: wrap; align-items: center; }


	/* ---------- ---------- ---------- ---------- ----------
	 *				specificationsArea
	 * ---------- ---------- ---------- ---------- ---------- */
		#specificationsArea						{ background-color: #fff; padding: 30px; }
		#specificationsArea table				{ max-width: 800px; margin: 60px auto 0; }
		#specificationsArea table th			{ min-width: 225px; font-size: 110%; }
		#specificationsArea table				{ border-width: 1px 0 0 0; }
		#specificationsArea table th,
		#specificationsArea table td			{ border-width: 0 0 1px 0; }


	/* ---------- ---------- ---------- ---------- ----------
	 *				worksArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#worksArea								{ background-color: #b4d8ff; padding: 85px 0 0; overflow: hidden; }


		/* アコーディオン */
		.accordion_header .accordion-btn			{ margin: 60px auto 110px; position: relative; display: block; cursor: pointer; width: 356px; background-color: #fff; }
		.accordion_header .accordion-btn:hover		{ opacity: 0.8; -webkit-transition: all .3s; transition: all .3s; }
		.accordion_header .accordion-btn span		{ color: #000; font-size: 110%; padding: 20px; display: inline-block; }

		.accordion_header .accordion-btn:after		{ color: #025297; content:"▼"; position: absolute; right: 20px; bottom: 15px; font-size: 150%; }
		.accordion_header .accordion-btn.accordionBtnOpen::after { content:'▲'; }

		.ac-container							{ display: none; }
		.ac-container div.ac-small				{ position: relative; background-color: #c5defc;  padding-bottom: 130px; padding-top: 20px; }
		.ac-container div.ac-small	p.url		{ font-size: 93%; }
		.ac-container div.ac-small	p.url a		{ text-decoration: none; }
		.ac-container div.ac-small	p.url a:hover		{ opacity: 0.8; }

		.ac-container div.ac-small section		{ background-color: #fff; width: 800px; margin: 20px auto 30px; padding: 50px 40px; box-sizing: border-box; }
		.ac-container div.ac-small h4			{ color: #000; font-size: 140%; }
		#worksArea article.works-qa				{ margin-top: 30px; }
		#worksArea article.works-qa p			{ font-size: 110%; margin-bottom: 15px; }
		#worksArea section dl					{ display: block; overflow: hidden; font-size: 95%; }
		#worksArea section dt					{ float: left; width: 3em; margin-bottom: 5px; }
		#worksArea section dd					{ margin: 0 0 5px 3em; }
		
		#worksArea p.end-message				{ font-size: 110%; margin-top: 50px; }

		#worksArea .works-btn					{ font-size: 110%; background:linear-gradient(to right,#2e7cc5, #0e4284); max-width: 500px; margin: 0 auto; text-align: center; cursor: pointer; padding: 13px; box-sizing: border-box; }
		#worksArea .works-btn a					{ color: #fff; text-decoration: none; }
		



/*-------------------------------------------------------------
 *
 *						style_ticty.css(ver.SP)
 *
 *-------------------------------------------------------------*/

 @media screen and ( max-width:1100px ) {

	/* ---------- ---------- ---------- ---------- ----------
	 *					meritArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#meritLead								{ width: 100%; }
	 	#meritLead .meritSet					{ width: calc(100% / 3 - 23px); }

	/* ---------- ---------- ---------- ---------- ----------
	 *					functionsArea
	 * ---------- ---------- ---------- ---------- ---------- */
		section.double							{ padding: 60px 20px 130px; }
		#functionsLead section img				{ width: 80%; }




 }

 @media screen and ( max-width:959px ) {
	/* ---------- ---------- ---------- ---------- ----------
	 *					topArea
	 * ---------- ---------- ---------- ---------- ---------- */
		#topArea 									{ padding: 90px 0; height: 750px; }
		#topArea::before							{ height: 750px; }
		#topArea #mainCatch							{ font-size: 56px; }
		#topArea #mainLogoArea						{ max-width: 682px; padding: 30px 0 48px; }
		#topArea #mainLogoArea img					{ width: 40%; }
		#topArea #subCatch							{ font-size: 115%; }

 }

 @media screen and ( max-width:900px ) {

	/* ---------- ---------- ---------- ---------- ----------
	 *				worksArea
	 * ---------- ---------- ---------- ---------- ---------- */

		.ac-container div.ac-small section			{ width: 100%; }

 }



	
 @media screen and ( max-width:767px ) {
		body									{ font-size: 88%; }
		.title h3								{ font-size: 162%; }
		.title h3.fontFutura					{ font-size: 174%; }
		.title-bgSet							{ padding-top: 15px; background-size: contain!important; }
		.title-bgSet h3							{ margin-bottom: -6px; }
		.title-bgSet span						{ font-size: 100%; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					topArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#topArea								{ height: 570px; padding: 50px 0; }
	 	#topArea::before						{ background: url(./../images/top_img_sp.png) no-repeat center top; background-size: cover; }
		#topArea #mainCatch						{ font-size: 29px; }
		#topArea #mainCatch span				{ font-size: 19px; margin-bottom: 5px; }
		#topArea #subCatch						{ font-size: 90%; max-width: 250px; margin: 0 auto; text-align: left; }
	 	#topArea #mainLogoArea 					{ margin: 25px auto 35px; padding: 20px 0 28px; max-width: 300px; }
		#topArea #mainLogoArea img				{ width: 175px; }


	/* ---------- ---------- ---------- ---------- ----------
	 *					meritArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#meritArea								{ padding: 54px 30px 50px; }
	 	#meritArea .title.colOrange p			{ font-size: 120%; }
	 	#meritLead								{ display: block; margin-top: 20px; }
		#meritLead .meritSet					{ max-width: 250px; width: 100%; margin: 0 auto 23px; }
		#meritLead .meritSet .num-merit			{ font-size: 15px; width: 100px; border-bottom-width: 20px; line-height: 23px; }
		#meritLead .meritSet p.colBule span.bold{ font-size: 114%; }
		#meritLead .meritSet p.colBule			{ min-height: 105px; }
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					functionsArea
	 * ---------- ---------- ---------- ---------- ---------- */
		section.double							{ padding: 30px 20px 40px; }

		#functionsLead							{ flex-direction: column; }
		#functionsLead section:nth-child(odd)	{ margin-top: 0; }
		#functionsLead section:first-child		{ order: 2; }
		#functionsLead section:nth-child(2)		{ order: 1; text-align: center; }
		#functionsLead section:nth-child(3)		{ order: 3; }
		#functionsLead section img				{ margin-bottom: 20px; }
		#functionsLead .item					{ margin-top: 25px; margin-bottom: 0; }
		#functionsLead .item .num-functions		{ width: 35px; height: 35px; line-height: 1.7; font-size: 160%; }
		#functionsLead .item div		   		{ width: 100%; max-width: initial; }
		#functionsLead .item div p				{ font-size: 120%; margin-bottom: 0; }

		/* functions-child */
		.functions-child section				{ display: block; padding: 40px 20px 80px; }
		.functions-child .item .num-functions	{ width: 51px; height: 51px; line-height: 1.6; font-size: 250%; }
		.functions-child .functions-child-left .item div	{ margin-top: -9px; }
		.functions-child .item p.colBule		{ font-size: 190%; }
		.functions-child .functions-child-left	{ margin-right: 0; margin-bottom: 50px; max-width: initial; width: 100%; }
		.functions-child .functions-child-right { display: block; text-align: center; }
		.functions-child article p.colBule		{ margin-bottom: 5px; }


	/* ---------- ---------- ---------- ---------- ----------
	 *				specificationsArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#specificationsArea table				{ margin: 30px auto 0; }
		#specificationsArea table th,
		#specificationsArea table td			{ display: block; }
		#specificationsArea table th			{ border-width: 0; font-size: 118%; padding-bottom: 0; }


	/* ---------- ---------- ---------- ---------- ----------
	 *				worksArea
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#worksArea								{ padding: 40px 0 0; }
		.accordion_header						{ margin: 0 45px; }
		.accordion_header .accordion-btn		{ width: 100%; margin: 40px auto 60px; }
		.accordion_header .accordion-btn img	{ width: 100%; }
		.ac-container div.ac-small				{ padding-bottom: 70px; }
	 	.ac-container div.ac-small section		{ background-color: #c5defc; padding: 0px 20px; }
		#worksArea section dl					{ font-size: 105%; }
		#worksArea article.works-qa p,
		#worksArea p.end-message				{ font-size: 115%; }
		#worksArea .works-btn					{ width: 250px; padding: 7px; }



 }


@media screen and ( max-width:520px ) {

	.functions-child .functions-child-right img	{ width: 100%; }

 }

@media screen and ( max-width:400px ) {

	#topArea::before							{ background-size: contain; }

}


@media screen and ( max-width:375px ) {

	.functions-child .functions-child-right img	{ width: 100%; }
}

@media screen and ( max-width:320px ) {

}