@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 (min-width: 481px) {
	.pc_none{
		display: none!important;
	}
}
@media screen and (max-width: 480px) {
	.sp_none{
		display: none!important;
	}

}

/*--------------------------------------------------------
★レスポンシブ■コンテンツ部分
--------------------------------------------------------*/
@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.6rem;
		line-height: 1.7;
		letter-spacing: .05em;
		-webkit-text-size-adjust: 100%!important;
		top: 0!important;
	}
	/* layout
	------------------------------ */
	.wrapper{
		max-width: 480px;
		width: 100%;
		padding: 0 5%;
	}
	.wrapper_l {
		max-width: 480px;
		width: 100%;
	}
	.layout_flex{
		display: block;
	}
	/* Common
	------------------------------ */
	a[href*="tel:"] {
		pointer-events: auto;
		cursor: pointer;
	}
	.section_title{
		font-size: 2.4rem;
	}

	/* Header
	------------------------------ */
	header{
		position: relative;
		display: block;
		width: 100%;
	}
	.header_wrapper {
		padding: 15px 0;
	}
	.header_message {
		line-height: 1.4;
		padding: 5px 0;
	}
	.header_logo {
		margin: 3px 0 0 10px;
	}
	.header_logo_mark {
		width: 230px;
		height: 36px;
	}

	/* main_view
	------------------------------ */
	.main_view_inner {
		background: #BC121E;
	}
	.main_view_inner::before {
		width: 33.33%;
		top: -69px;
		clip-path: polygon(0% 100%, 64% 0%, 100% 0%, 100% 100%);
	}
	.main_view_text {
		width: 90%;
		transform: translateY(-7px);
		clip-path: polygon(0% 100%, 5% 0%, 100% 0%, 100% 100%);
		padding: 5px 10px 5px 30px;
	}
	.main_view_area {
		font-size: 2rem;
	}
	.main_view_message {
		font-size: 1.8rem;
	}
	.main_view_title {
		max-width: 100%;
		margin: 60px auto 0;
	}

	/* inquiry
	------------------------------ */
	.inquiry {
		margin-top: 0;
	}
	.inquiry_wrapper {
		position: relative;
		left: 0;
		bottom: 1px;
		background: #BC121E;
		padding: 10px 10px 20px;
	}
	.inquiry_tel  {
		margin-top: 10px;
	}
	.inquiry_message {
		font-size: 1.6rem;
		line-height: 1.4;
		padding: 3px 10px;
		margin-top: 10px;
	}
	.inquiry_call {
		margin-top: 10px;
	}
	
	/* strong
	------------------------------ */
	#strong {
		margin-top: 30px;
	}
	.strong_bg {
		background: url(../images/strong_bg_sp.jpg) no-repeat center center / cover;
	}
	.strong_inner {
		padding: 30px 0;
	}
	.strong_items {
		margin-top: 30px;
	}
	.strong_item {
		max-width: 100%;
		padding: 30px 15px 20px 15px;
		margin-right: 0;
	}
	.strong_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.strong_item_title_icon::before {
		width: 40px;
		height: 50px;
		left: -20px;
		left: -41px;
		top: 35%;
		transform: translate(0,-50%);
	}
	.strong_item_title {
		font-size: 2.2rem;
	}
	.strong_item_text {
		padding-top: 10px;
		margin-top: 10px;
	}

	/* wages
	------------------------------ */
	#wages {
		margin-top: 30px;
	}
	.wages_items {
		margin-top: 40px;
	}
	.wages_item:nth-of-type(n + 3) {
		margin-top: 20px;
	}
	.wages_item_open, .wages_item_exchange, .wages_item_installation,
	.wages_item_servicing, .wages_item_making, .wages_item_locking {
		max-width: 46%;
		margin: auto;
	}
	.wages_alert {
		text-align: left;
		margin-top: 20px;
	}
	.wages_foot_title {
		font-size: 2.4rem;
	}
	.wages_foot {
		margin-top: 20px;
	}
	.wages_foot_message {
		font-size: 2rem;
		line-height: 1.4;
		text-align: left;
		margin-top: 10px;
	}
	.wages_foot_texts {
		text-align: left;
		margin-top: 10px;
	}
	.wages_foot_text {
		margin-top: 5px;
	}

	/* flow
	------------------------------ */
	#flow {
		margin-top: 30px;
	}
	.flow_inner {
		padding: 30px 0;
	}
	.flow_items {
		align-items: flex-start;
		margin-top: 30px;
	}
	.flow_item {
		display: flex;
		max-width: 100%;
	}
	.flow_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.flow_item_pic {
		width: 110px;
	}
	.flow_item_01 .flow_item_pic {
		background: url(../images/flow_pic_02.jpg) no-repeat center center / cover;
	}
	.flow_item_02 .flow_item_pic {
		background: url(../images/flow_pic_03.jpg) no-repeat center center / cover;
	}
	.flow_item_03 .flow_item_pic {
		background: url(../images/flow_pic_06.jpg) no-repeat center center / cover;
	}
	.flow_item_content {
		width: calc(100% - 110px);
	}
	.flow_item_title {
		font-size: 1.6rem;
		line-height: 1.2;
		min-height: auto;
		padding: 10px 10px 10px 37px;
	}
	.flow_item_title::after {
		width: 25px;
		height: 26px;
		left: 7px;	
	}
	.flow_item_text {
		font-size: 1.4rem;
		padding: 5px 10px;
	}

	/* cheap
	------------------------------ */
	.cheap_inner {
		padding: 30px 0;
	}
	.cheap_items {
		margin-top: 30px;
	}
	.cheap_item {
		display: block;
		margin-top: 20px;
	}
	.cheap_item_title {
		font-size: 2rem;
		width: 95%;
		padding: 10px 15px;
	}
	.cheap_item_text {
		width: calc(100% - 55px);
		padding: 10px 15px;
	}
	.cheap_item_line .cheap_item_text {
		padding: 10px 15px;
	}
	.cheap_item_pic {
		max-width: 55px;
		margin-left: auto;
		margin-top: -55px;
		margin-right: 10px;
	}
	.cheap_item_line .cheap_item_text .caution {
		font-size: 1.6rem;
	}
	.parallax--container {
		top: auto;
		bottom: 0;
	}
	.cheap_bg {
		background: url(../images/cheap_bg_sp.jpg) no-repeat center center / cover;
	}

	/* works
	------------------------------ */
	#works {
		margin-top: 30px;
	}
	.works_inner {
		padding: 30px 0;
	}
	.works_subtitle {
		margin-top: 10px;
	}
	.works_subtitle span {
		font-size: 2rem;
		padding: 10px 0;
		z-index: 1;
	}
	.works_subtitle span:before, 
	.works_subtitle span:after {
		height: auto;
		border: 27px solid #BC121E;
	}
	.works_subtitle span:after {
		right: -28px;
		border-right-width: 8px;
		border-right-color: transparent;
	}
	.works_subtitle span:before {
		left: -28px;
		border-left-width: 8px;
		border-left-color: transparent;
		z-index: -1;
	}
	.works_text {
		text-align: left;
		margin-top: 10px;
	}
	.works_slider {
		margin-top: 20px;
	}
	#works .slick-initialized .slick-slide {
		margin: 0;
		padding: 0 20px;
	}
	.works_slide {
		padding: 20px 25px;
	}
	.works_slide_wrapper {
		display: block;
	}
	.works_slide_pic {
		max-width: 100%;
		margin-right: 0;
	}
	.works_slide_title {
		font-size: 2rem;
		margin-top: 10px;
	}
	.works_slide_text {
		font-size: 1.4rem;
		margin-top: 10px;
	}

	/* elected
	------------------------------ */
	.elected_inner {
		padding: 30px 0;
	}
	.elected_bg {
		background: url(../images/elected_bg_sp.jpg) no-repeat center center / cover;
	}
	.elected_items {
		margin-top: 30px;
	}
	.elected_item {
		max-width: 100%;
	}
	.elected_item:first-of-type {
		margin-right: 0;
	}
	.elected_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.elected_item_title {
		font-size: 2.2rem;
		padding: 20px 10px 20px 90px;
	}
	.elected_item_title_clock::before {
		width: 55px;
		height: 68px;
		left: 23px;
	}
	.elected_item_title_note::before {
		width: 57px;
		height: 56px;
		left: 21px;
	}
	.elected_item_title_key::before {
		width: 64px;
		height: 74px;
		left: 14px;
	}
	.elected_item_text {
		padding: 10px 15px;
	}

	/* faq
	------------------------------ */
	#faq {
		margin-top: 30px;
	}
	.faq_lists {
		margin-top: 30px;
	}
	.faq_list {
		margin-top: 20px;
	}
	.faq_list_title {
		position: relative;
	}
	.faq_list_title::before,
	.faq_list_title::after{
		content: "";
		position: absolute;
		display: block;
		background: #fff;
		transition: .35s;
	}
	.faq_list_title::before{
		width: 3px;
		height: 20px;
		top: 18px;
		right: 14px;
		z-index: 1;
	}
	.faq_list_title::after{
		width: 20px;
		height: 3px;
		top: 26px;
		right: 6px;
		z-index: 1;
	}
	.faq_list_title.active::before{
		transform: rotate(90deg);
	}
	.faq_list_title_wrapper {
		padding: 10px 30px 10px 15px;
	}
	.faq_list_title_q {
		font-size: 2.6rem;
		margin-right: 20px;
	}
	.faq_list_title_text {
		font-size: 2rem;
		line-height: 1.4;
		z-index: 1;
	}
	.faq_list_text {
		display: none;
		font-size: 1.8rem;
		min-height: auto;
		padding: 10px 15px;
	}

	/* operation
	------------------------------ */
	#operation {
		margin-top: 30px;
	}
	.operation_inner {
		padding: 30px 0 0;
	}
	.operation_items {
		margin-top: 30px;
	}
	.operation_item {
		width: 100%;
		margin-right: 0;
	}
	.operation_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.operation_item_pic {
		display: block;
		width: 60%;
		margin: auto;
	}
	.operation_item_title_wrapper {
		left: 20%;
		top: 0;
	}
	.operation_item_title {
		width: 92px;
		height: 92px;
	}
	.operation_item_title::before {
		width: 52px;
		height: 64px;
		left: -8px;
		top: -14px;
	}
	.operation_item_title_small {
		font-size: 1.6rem;
	}
	.operation_item_title_large {
		font-size: 1.6rem;
	}
	.operation_item_text {
		padding: 10px 15px;
	}

	/* location
	------------------------------ */
	.location_inner {
		padding: 30px 0;
	}
	.location_items {
		justify-content: space-between;
		margin-top: 30px;
	}
	.location_item {
		width: 48%;
		margin-right: 0;
	}
	.location_item:nth-of-type(n + 3) {
		margin-top: 20px;
	}
	.location_item:last-of-type {
		width: 100%;
	}
	.location_item_title {
		font-size: 1.3rem;
		padding: 10px 5px;
	}
	.location_item_text {
		font-size: 1.4rem;
		padding: 10px 15px;
	}

	/* security
	------------------------------ */
	#security {
		margin-top: 30px;
	}
	.security_items {
		flex-wrap: wrap;
		margin-top: 30px;
	}
	.security_item:nth-of-type(n + 2) {
		margin-top: 35px;
	}
	.security_item_title {
		font-size: 2rem;
		padding: 10px 15px;
	}
	.security_item_title::before {
		width: 54px;
		height: 48px;
		left: 5px;
		top: -25px;
	}
	.security_item_text {
		padding: 10px 15px;
	}

	/* comparison
	------------------------------ */
	#comparison {
		margin-top: 30px;
	}
	.comparison_inner {
		padding: 30px 0;
	}
	.comparison_main {
		width: 835px;
		padding: 15px;
		margin-top: 30px;
	}
	.comparison_list dt {
		font-size: 1.6rem;
		width: 270px;
	}
	.comparison_list dt::after {
		height: 3px;
	}
	.comparison_list .comparison_rescue_pice {
		font-size: 2rem;
	}
	.comparison_list .comparison_rescue_pice .comparison_rescue_pice_from {
		font-size: 1.8rem;
	}
	.comparison_list .comparison_rescue_pice .comparison_rescue_pice_tax {
		font-size: 1.6rem;
	}
	.comparison_list .comparison_rescue_area, 
	.comparison_list .comparison_rescue_time, 
	.comparison_list .comparison_rescue_open, 
	.comparison_list .comparison_rescue_production {
		font-size: 2rem;
	}
	.comparison_list dd {
		font-size: 1.6rem;
	}
	.comparison_list .comparison_rescue_pice, 
	.comparison_list .comparison_rescue_area, 
	.comparison_list .comparison_rescue_time, 
	.comparison_list .comparison_rescue_open, 
	.comparison_list .comparison_rescue_production {
		border-right: 5px solid #BC121E;
		border-left: 5px solid #BC121E;
	}
	.comparison_list dd.comparison_rescue_production {
		border-bottom: 5px solid #BC121E;
	}
	.comparison_foot {
		margin-top: 5px;
	}

	/* support
	------------------------------ */
	.support_inner {
		padding: 30px 0 0;
	}
	#support .section_title {
		padding: 10px 15px;
	}
	#support .section_title::after {
		width: 67px;
		height: 67px;
		left: 16px;
		bottom: -40px;
	}
	.support_wrapper {
		display: block;
		margin-top: 30px;
	}
	.support_content {
		width: 100%;
		margin-top: 0;
	}
	.support_message span {
		font-size: 2rem;
		padding: 10px 15px;
		margin-right: 0;
	}
	.support_tel {
		margin-top: 0;
	}
	.support_tel span {
		font-size: 2rem;
		max-width: 100%;
		padding: 10px 15px 10px 60px;
		margin-right: 0;
		background: #FAFAFA;
	}
	.support_tel span::before {
		left: 15px;
		width: 41px;
		height: 41px;
	}
	.support_feature {
		width: 100%;
	}
	.support_pic {
		max-width: 80%;
		margin: auto;
		transform: translateX(0);
	}

	/* payment
	------------------------------ */
	.payment_inner {
		padding: 30px 0 0;
	}
	.payment_items {
		display: block;
		margin-top: 30px;
	}
	.payment_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.payment_item:first-of-type::after {
		display: none;
	}
	.payment_item_title {
		font-size: 2rem;
		min-height: auto;
		padding: 10px 15px;
	}
	.payment_item_text {
		line-height: 1.4;
		padding: 10px 15px;
	}

	/* recipe
	------------------------------ */
	#recipe {
		margin-top: 30px;
	}
	.recipe_bg {
		background: url(../images/recipe_bg_sp.jpg) no-repeat center center / cover;
	}
	.recipe_inner {
		padding: 30px 0;
	}
	#recipe .section_title span {
		font-size: 4rem;
		vertical-align: -5px;
	}
	.recipe_items {
		margin-top: 40px;
	}
	.recipe_item {
		display: block;
		min-height: auto;
		padding: 10px 15px;
	}
	.recipe_item.recipe_item_handshake {
		padding: 10px 15px;
	}
	.recipe_item:nth-of-type(n + 2) {
		margin-top: 40px;
	}
	.recipe_item::before {
		width: 49px;
		height: 49px;
		left: 50%;
		transform: translateX(-50%);
		top: -26px;
	}
	.recipe_item_icon {
		margin: auto;
	}
	.recipe_item_handshake .recipe_item_icon {
		padding-top: 28px;
	}
	.recipe_item_content {
		margin-top: 10px;
	}
	.recipe_item_title {
		font-size: 2rem;
	}
	.recipe_item_text {
		margin-top: 5px;
	}

	/* method
	------------------------------ */
	.method_inner {
		padding: 30px 0;
	}
	.method_items {
		display: block;
		margin-top: 30px;
	}
	.method_item {
		width: 100%;
		margin-right: 0;
	}
	.method_item:nth-of-type(n + 2) {
		margin-top: 20px;
	}
	.method_item_title {
		font-size: 2rem;
		padding: 10px 15px;
	}

	/* coupon
	------------------------------ */
	.coupon {
		margin-top: 30px;
	}

	/* contact
	------------------------------ */
	#contact {
		margin-top: 30px;
	}
	.contact_inner {
		padding: 30px 0;
	}
	.contact_head_text {
		font-size: 1.8rem;
		margin-top: 10px;
	}
	.contact_main {
		padding: 20px 15px;
		margin-top: 15px;
	}
	.contact_table dt {
		max-width: 100%;
		padding: 10px 15px;
	}
	.contact_table dt .must {
		font-size: 1.2rem;
		width: 60px;
		padding: 3px 0;
	}
	.contact_table dd {
		max-width: 100%;
		padding: 0px 15px 10px;
		margin-top: 0;
	}
	.contact_table dd.contact_radio {
		padding: 0 10px 15px;
	}
	.contact_table dd input {
		font-size: 1.6rem;
		padding: 10px 15px;
	}
	.contact_table dd select {
		font-size: 1.6rem;
	}
	.radio_lists {
		display: block;
	}
	.radio_list {
		margin-right: 0;
	}
	.radio_list:nth-of-type(n + 2) {
		margin-top: 10px;
	}
	.contact_table dd.contact_checkbox {
		padding: 0 10px 15px;
	}
	.checkbox_list:nth-of-type(1n) {
		margin-right: 0;
	}
	.checkbox_list:nth-of-type(n + 3) {
		margin-top: 10px;
	}
	.checkbox_input_label_text {
		font-size: 1.6rem;
	}
	.checkbox_input_dummy_input {
		min-width: 30px;
		height: 30px;
	}
	.privacy_content {
		height: 150px;
		padding: 10px 15px;
		margin-top: 15px;
	}
	.privacy_title {
		font-size: 1.8rem;
	}
	.contact_btn {
		margin-top: 15px;
	}
	.contact_btn button {
		font-size: 1.8rem;
		padding: 10px 15px;
	}

	/* footer
	------------------------------ */
	.footer_inner {
		padding: 15px 0 165px;
		margin-top: 70px;
	}
	.tel_foot {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		background: #BC121E;
	}
	.tel_foot img {
		width: 100%;
		max-height: 97px;
		object-fit: cover;
	}

	/* Page Top
	------------------------------ */
	.pagetop{
		position: fixed;
		-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: 105px;
		right: 5%;
		width: 54px;
		height: 54px;
	}
	.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;
		border-color: #8F131E;
	}
}

