@charset "utf-8";

/* android対策 */
p { background-image: url(../images/pix.gif); }

/*--------------------------------------------------------
★レスポンシブ■タブレット対応
--------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	/* layout */
	html{
		width: 1280px;
	}
	body {
		width: 1280px;
	}
}
@media screen and (max-width: 1499px) {
	.header_pc .wrapper_1500 {
		width: 100%;
		min-width: auto;
	}
	.header_left, .header_right {
		display: none;
	}
	
	body header #gnav {
		width: 720px;
	}
}
@media screen and (max-width: 1400px) {
	.wrapper_1500 {
		width: 1250px;
		margin: 0 auto;
	}
	.index01_left {
		margin-right: 50px;
	}
}

/*--------------------------------------------------------
★レスポンシブ■スマホ表示切替ボタン
--------------------------------------------------------*/
@media screen and (max-width: 480px) {
	a#btnSP{
		display: none;
	}
	a#btnPC{
		position: fixed;
		display: block;
		width: auto;
		height: auto;
		font-size: 12px;
		padding: 10px 20px;
		box-sizing: border-box;
		border: 2px solid #005dcc;
		background-color: #FFF;
		color: #005dcc;
		font-weight: 600;
		text-decoration: none;
		line-height: 1em;
		margin-top: 4px;
		left: 5%;
		bottom: 20px;
		z-index: 2;
	}
}
@media screen and (min-width: 481px) {
	.switch_btn{
		display: none;
		height: 0;
	}
	a#btnSP{
		display: none;
	}
	a#btnPC{
		display: none;
	}
}

@media screen and (min-width:1021px) {
	.switch_btn{
		display: block;
		height: auto;
	}
	a#btnPC{
		display: none;
	}
	a#btnSP{
		position: fixed;
		display: block!important;
		width: 300px;
		height: auto;
		z-index: 100;
		font-size: 24px;
		padding: 8px;
		text-align: center;
		border-radius: 20px;
		background-color: #005dcc;
		box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
		color: #FFF;
		text-decoration: none;
		bottom: 40px;
		left: 15px;
		z-index: 99999999!important;
	}
}
@media screen and (min-width: 1023px) {
	.switch_btn{
		display: none;
		height: 0;
	}
	a#btnSP{
		display: none;
	}
	a#btnPC{
		display: none;
	}
}
/*--------------------------------------------------------
★レスポンシブ■ヘッダ部分
--------------------------------------------------------*/
@media screen and (min-width: 481px) {
	.pc_none{
		display: none!important;
	}
}
@media screen and (max-width: 480px) {
	body header {
		height: 50px;
	}
	.sp_none{
		display: none!important;
	}
	/* スマホ用メニュー */
	.sp_header {
		display: flex;
		width: 100%;
		height: 50px;
		position: fixed;
		top: 0;
		z-index: 300;
		background-color: #ffffff;
		box-shadow: 0 0 4px rgb(0 0 0 / 50%);
	}
	.sp_header_logo a {
		font-size: 0;
		position: relative;
		display: block;
		width: 210px;
		height: 35px;
		font-size: 0;
		margin-top: 8px;
		margin-left: 10px;
		background: url(../images/logo.svg) no-repeat center center;
		background-size: contain;
	}
	body #rd_header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 50px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10000;
		-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	}
	body #rd_header #rd_gnav {
		display: block;
		width: 50px;
		height: 50px;
		list-style: none;
		padding: 0;
		position: relative;
	}
	body #rd_header #rd_gnav li a {
		position: relative;
		font-size: 10px;
		width: 100%;
		color: #ffffff;
		display: inline-block;
		list-style: none;
		letter-spacing: 0;
		padding: 36px 0 0px;
		background-color: #005dcc;
		text-align: center;
	}
	body #panel-btn-icon {
		position: absolute;
		content: "";
		display: block;
		width: 25px;
		height: 2px;
		left: 12px;
		top: 13px;
		background: #ffffff;
		transition: .2s;
		-webkit-transition: .2s;
	}
	body #panel-btn-icon:before, body #panel-btn-icon:after {
		position: absolute;
		content: "";
		background: #ffffff !important;
		display: block;
		height: 2px;
		width: 25px;
		left: 0;
		top: 17px;
		transition: .3s;
		-webkit-transition: .3s;
	}
	body #panel-btn-icon:before {
		margin-top: -8px;
	}
	body #panel-btn-icon:after {
		margin-top: 1px;
	}
	body #panel-btn .close {
		background: transparent;
	}
	body #panel-btn .close:before, body #panel-btn .close:after {
		background: #ffffff !important;
		margin-top: -8px;
	}
	body #panel-btn .close:after {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	body #panel-btn .close:before {
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
		width: 25px;
	}
	body #panel {
		display: none;
		margin: 0;
		padding: 0 0 247px;
		position: absolute;
		text-align: left;
		top: 50px;
		width: 100%;
		z-index: 1000;
		height: 100vh;
		background-color: rgba(0,0,0,.3);
	}
	body #panel li {
		background: #ffffff;
		padding: 0 15px;
	}
	body #panel li a {
		border-bottom: 1px solid #005dcc;
		color: #000000;
		display: block;
		font-size: 14px;
		line-height: 100%;
		padding: 17px 5% 18px;
		position: relative;
		text-decoration: none;
		width: 90%;
	}
	body #panel li a:hover {
		background: #005dcc;
		color: #ffffff;
	}
	body .dropdown {
		right: 0;
		position: absolute;
		top: 0;
		width: 70%;
		height: 100vh;
		background: #ffffff;
	}
	body .dropdown li {
		padding: 0
	}
	body header.clone-nav {
		height: 50px;
	}
}

/*--------------------------------------------------------
★レスポンシブ■コンテンツ部分
--------------------------------------------------------*/
@media screen and (max-width: 480px) {
	html{
		max-width: 480px;
		width: 100%;
		overflow-x: hidden;
		-webkit-text-size-adjust: 100%!important;
	}
	body {
		max-width: 480px;
		min-width: 320px;
		width: 100%;
		overflow-x: hidden!important;
		font-size: 1.4rem;
		line-height: 1.7;
		letter-spacing: .05em;
		-webkit-text-size-adjust: 100%!important;
		top: 0!important;
	}
	/* layout
	------------------------------ */
	.wrapper{
		max-width: 480px;
		width: 90%;
		margin: 0 auto;
		padding: 0 5%;
	}
	.wrapper_1500 {
		max-width: 480px;
		width: 90%;
		margin: 0 auto;
		padding: 0 5%;
	}
	/* Common
	------------------------------ */
	.fl_l,.fl_r{
		display: block;
		float: none;
	}
	.float::before,
	.float::after{
		content: " ";
		display: block;
		clear: both;
	}
	.btn {
		display: block;
		height: 60px;
		line-height: 58px;
		margin: auto;
		max-width: 100%;
	}
	.btn::after {
		width: 60px;
		height: 60px;
		right: -28px;
	}
	.flex{
		display: block;
	}
	.caution{
		font-size: 1.4rem;
		line-height: 1.7;
	}
	.tel{
		max-width: 260px;
		width: 100%;
		height: 22px;
	}
	a[href*="tel:"] {
		pointer-events: auto;
		cursor: pointer;
	}
	h2 {
		font-size: 26px;
	}
	/* index
	------------------------------ */
	/* top_catch slider */
	.top_slider {
		height: 350px;
	}
	.slider01 {
		background-image: url(../images/sp_slider01.jpg);
	}
	.slider02 {
		background-image: url(../images/sp_slider02.jpg);
		background-position: bottom;
	}
	.slider03 {
		background-image: url(../images/sp_slider03.jpg);
	}
	.slider01 .wrapper p::before, .slider02 .wrapper p::before, .slider03 .wrapper p::before {
		width: 70%;
		height: 55px;
		top: 120px;
	}
	body .slick-dots{
		max-width: 480px;
		width: 90%;
		margin: 0 auto;
		padding: 0 5%;
		bottom: 150px;
	}
	body .slick-dots li {
		width: 50px;
		height: 3px;
	}
	body .slick-dots li button {
		width: 50px;
		height: 3px;
	}
	body .slick-dots li button:before {
		width: 50px;
		height: 3px;
	}
	/* index01 */
	.index01_bg {
		padding: 50px 0 50px;
	}
	.index01_left {
		width: 100%;
		margin-right: 0;
	}
	.index01_left_text {
		line-height: 2;
		margin-top: 20px;
	}
	.index01_btn {
		margin-top: 30px;
	}
	.index01_right {
		display: flex;
	}
	.index01_right_img {
		width: 50%;
	}
	.index01_right_img:nth-of-type(1n) {
		margin-top: 30px;
	}
	/* //index01 */
	/* index02 */
	#index02 h2 {
		text-shadow: 1px 1px 3px #ffffff, -1px -1px 3px #ffffff,
					-1px 1px 3px #ffffff, 1px -1px 3px #ffffff,
					0px 1px 3px #ffffff,  0 -1px 3px #ffffff,
					-1px 0 3px #ffffff, 1px 0 3px #ffffff;
	}
	#index02 .h2_en {
		color: #ffffff;
	}
	.index02_bg {
		padding: 50px 0;
		background-image: url(../images/index02_bg_sp.jpg);
		background-size: cover;
	}
	.index02_flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0;
	}
	.index02_content {
		width: 48%;
		margin-top: 20px;
	}
	.index02_content_text {
		margin-top: 5px;
	}
	.index02_btn {
		margin-top: 30px;
	}
	/* //index02 */
	/* index03 */
	.index03_bg {
		padding: 50px 0;
	}
	.index03_flex {
		margin-top: 20px;
	}
	.index03_content {
		width: 100%;
	}
	.index03_content:nth-of-type(n+1) {
		margin-top: 20px;
	}
	.index03_content_texts {
		padding: 5%;
	}
	.cat_flex {
		display: flex;
		justify-content: flex-start;
	}
	/* //index03 */
	/* index04 */
	.index04_bg {
		padding: 50px 0;
	}
	.index04_left {
		width: 100%;
		margin-right: 0;
	}
	.index04_left_text {
		margin-top: 20px;
	}
	.index04_right {
		width: 100%;
		margin-top: 30px;
		margin-bottom: 0;
	}
	.index04_btn {
		margin-top: 30px;
	}
	/* //index04 */
	/* index05 */
	.index05_bg {
		padding: 50px 0 0;
	}
	.index05_left_flex {
		flex-wrap: wrap;
		padding: 3% 5%;
	}
	.index05_left {
		width: 100%;
		margin-top: 20px;
	}
	.index05_left_day {
		margin-top: 5px;
		margin-right: 15px;
	}
	.index05_left_cat {
		margin-right: 0;
		padding: 6px 10px 5px;
	}
	.index05_left_title {
		width: 100%;
	}
	.index05_btn {
		margin-top: 30px;
	}
	.index05_btn .btn {
		margin-right: auto;
	}
	/* sub
	------------------------------ */
	.main_title {
		height: 250px;
	}
	.main_title::before {
		height: 250px;
	}
	.main_title .flex {
		height: 250px;
	}
	.sub_h1 {
		font-size: 38px;
		height: 250px;
		display: flex;
		align-items: center;
	}
	.h2_en {
		font-size: 12px;
		padding-bottom: 15px;
	}
	#services .footer_bnr,#company .footer_bnr,
	#recruit .footer_bnr,#contact .footer_bg {
		margin-top: 50px;
	}
	/* services.html
	------------------------------ */
	#services .main_title {
		background-image: url(../images/maintitle_services_sp.jpg);
	}
	#services01 h2, #services02 h2 {
		margin-top: 50px;
	}
	.services_left {
		width: 100%;
	}
	.services_left h3 {
		font-size: 24px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 25px;
	}
	.services_left h3::before {
		width: 20px;
		height: 20px;
		left: 0;
		top: 5px;
	}
	.services_left_text {
		margin-top: 10px;
	}
	.services_right {
		width: 100%;
		margin-top: 15px;
	}
	.services_flex01, .services_flex02, .services_flex03 {
		margin-top: 30px;
	}
	.services_pics {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0;
	}
	.services_pic {
		width: 48%;
		margin-top: 4%;
	}
	.services02_text {
		margin-top: 30px;
	}
	#services02 .services_flex {
		margin-top: 30px;
	}
	/* company.html
	------------------------------ */
	#company .main_title {
		background-image: url(../images/maintitle_company_sp.jpg);
	}
	#company01 h2, #company02 h2, #company03 h2, #company04 h2 {
		margin-top: 50px;
	}
	#company01 h3 {
		font-size: 24px;
		margin-top: 30px;
	}
	.company01_text {
		margin-top: 10px;
	}
	.company01_name {
		margin-top: 15px;
	}
	.company01_name .webfont {
		font-size: 22px;
		vertical-align: -4px;
	}
	.company02_pics {
		display: flex;
		margin-top: 30px;
	}
	.company02_pic {
		width: 48%;
	}
	#company02 table {
		margin-top: 30px;
	}
	table tr th, table tr td {
		display: block;
		width: 100%;
		padding: 3% 5%;
	}
	#company03 table {
		margin-top: 30px;
	}
	.company04_text {
		margin-top: 20px;
	}
	.company04_map {
		margin-top: 20px;
	}
	.company04_map iframe {
		width: 100%;
		height: 300px;
	}
	/* recruit.html
	------------------------------ */
	#recruit .main_title {
		background-image: url(../images/maintitle_recruit_sp.jpg);
	}
	.recruit01_bg {
		padding: 50px 0;
	}
	#recruit01 h3 {
		font-size: 24px;
		margin-top: 30px;
	}
	.recruit01_text {
		margin-top: 10px;
	}
	.recruit02_contents {
		margin-top: 30px;
	}
	.recruit02_content {
		width: 100%;
		margin-top: 30px;
	}
	.recruit02_content h3 {
		font-size: 24px;
		padding-bottom: 10px;
		padding-left: 50px;
		margin-bottom: 10px;
	}
	.recruit02_content h3::before {
		width: 40px;
		height: 40px;
		left: 0;
		top: -2px;
	}
	#recruit03 h2, #recruit04 h2 {
		margin-top: 50px;
	}
	#recruit03 h3 {
		font-size: 24px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 25px;
		margin-top: 30px;
	}
	#recruit03 h3::before {
		width: 20px;
		height: 20px;
		left: 0;
		top: 5px;
	}
	#recruit03 table {
		margin-top: 10px;
	}
	#recruit04 table {
		margin-top: 10px;
	}
	.recruit04_text {
		margin-top: 30px;
	}
	#recruit04 table .date_menu td input {
		width: 100%;
	}
	.info_menu input:nth-of-type(2) {
		width: 100%;
	}
	#recruit04 table tr td, 
	#contact02 table tr td {
		padding: 3% 5%;
	}
	#recruit04 table .textarea02 td, 
	#contact02 table .textarea02 td {
		padding: 4% 5%;
	}
	#recruit04 table .textarea02 td textarea, 
	#contact02 table .textarea02 td textarea {
		vertical-align: top;
	}
	#privacy_policy {
		height: 150px;
		margin-top: 20px;
		padding: 5%;
	}
	.privacy_title {
		font-size: 18px;
		letter-spacing: 2.4px;
	}
	.contact_btn .btn {
		margin-top: 30px;
	}
	/* contact.html
	------------------------------ */
	#contact .main_title {
		background-image: url(../images/maintitle_contact_sp.jpg);
	}
	.contact01_text {
		margin-top: 50px;
	}
	#contact01 h2, #contact02 h2 {
		margin-top: 50px;
	}
	#contact01 .tel {
		margin-top: 30px;
	}
	.contact01_day {
		width: 100%;
		margin-top: 10px;
		padding: 2% 3%;
	}
	.contact02_text {
		margin-top: 30px;
	}

	/* footer
	------------------------------ */
	.footer_top .wrapper {
		width: 100%;
		padding: 0;
	}
	.footer_bnr {
		margin-top: 50px;
		background-image: none;
		background-color: #005dcc;
	}
	.footer_bnr_right {
		width: 100%;
		height: auto;
		padding: 20px 5%;
	}
	.footer_bnr_right_day {
		font-size: 13px;
		letter-spacing: 0;
		padding-bottom: 20px;
		margin-top: 5px;
		margin-bottom: 20px;
	}
	.footer_bnr_right_btn .btn {
		width: 250px;
		font-size: 14px;
		margin-left: auto;
		text-align: left;
		padding-left: 36px;
	}
	.footer_bnr_right_btn .btn::before {
		left: 8px;
		top: 22px;
	}
	.footer_bnr_right_btn .btn::after {
		right: -26px;
	}
	.footer_bg {
		padding: 50px 0;
	}
	.footer_logo {
		width: 100%;
		height: 48px;
	}
	footer small {
		padding: 20px 0 80px;
	}

	/* Breadcrumb
	------------------------------ */
	.breadcrumbs{
		height: auto;
		font-size: 1.2rem;
		margin: 0 auto;
		padding: 20px 0;
	}
	.breadcrumbs span{
		letter-spacing: .1em;
	}
	/* Page Top
	------------------------------ */
	.pagetop{
		position: fixed;
		bottom: 110px;
		right: 20px;
		width: 60px;
		height: 60px;
		-webkit-transition: all .4s;
		-moz-transition: all .4s;
		-ms-transition: all .4s;
		-o-transition: all .4s;
		transition: all .4s;
		opacity: 0;
		z-index: 10;
		box-sizing: border-box;
	}
	.pagetop.show{
		opacity: 1;
		bottom: 20px;
		right: 5%;
		width: 50px;
		height: 50px;
	}
	.pagetop span{
		position: relative;
		display: block;
		font-size: 0;
		line-height: 0;
	}
	.pagetop::before{
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		transform: rotate(45deg);
		background: none;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 21px;
		transition: .25s;
	}
	.pagetop:hover::before{
		width: 20px;
	}

}