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

@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
	}

	img {
		max-width: 100% !important;
		height: auto;
	}

	.is-sp {
		display: inherit;
	}
	
	.is-pc {
		display: none;
	}
	
	a[href^="tel:"] {
		pointer-events: auto;
	}
	
	input[type="submit"] {
	  appearance: none;
	  -webkit-appearance: none;
	}


	/*-----------------------------
	
	header 
	
	------------------------------*/
	header {padding: 2rem;}
	header .hd-inner h1 {width: 32%;}
	header nav {display: none !important;}
	
	
	#wrapper {
	    position: relative;
	    z-index: 2;
	    padding: 10.7rem 0 10rem;
	    min-height: 100vh;
	}
	
	
	/*-----------------------------
	
	top
	
	------------------------------*/
	body.home {
		background: url("../img/page/top/top-bg.png") no-repeat top;
		background-size:cover;
	}
	.topwrapper {padding-top: 5rem !important;}

	#main-visual {
		position: relative;
		z-index: 3;
		padding: 5rem 0 0;
	}


	.mv-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}
	
	.mv-img {
		flex: 1;
		position: relative;
		width: 90%;
		max-width: 90%;
		flex: none;
	}
	
	.mv-content {
		flex: 1;
		width: 100%;
		max-width: 100%;
		padding-right: 0;
		flex: none;
	}

	.mv-content p {
		font-size: 2.4rem;
		padding-left: 0;
		text-align: center;
	}

	.mv-content h2 {
		font-size: 3.6rem;
		font-weight: 900;
		padding: 0 0 3rem;
		background: url("../img/page/top/main-txt.png") no-repeat;
		background-size: 247px 100px;
		background-position: center;
		text-align: center;
	}
	
	.mv-btn {text-align: center;}
	
	.top-trouble {
		max-width: 100%;
		width: 94%;
		margin: 0 auto 5rem;
		text-align: center;
		position: relative;
		z-index: 3;
		padding-top: 15rem;
	}

	.top-trouble h2 {
		font-size: 2.7rem;
		font-weight: 900;
		margin-bottom: 1rem;
		margin-top: -2rem;
		position: relative;
		z-index: 10;
	}
	
	.top-trouble h2 span {
		position: relative;
		display: inline-block;
		font-size: 3.5rem;
		color: var(--f-color02);
	}
	
	.top-trouble h2 span::before {
		content: "●";
		position: absolute;
		top: -1.2rem;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.2rem;
		letter-spacing:0.5rem;
		color: var(--f-color02);
		white-space: nowrap;
	}
	
	.top-trouble-main {
		width: 80%;
		margin:  0 auto;
		position: relative; z-index: 3;
	}
	
	.top-trouble-left {
		width: 40%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.top-trouble-right {
		width: 40%;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.top-trouble .contat_btn_page {margin-top: 0.2rem;}

	.top-about-inner {
		max-width: 100%;
		width: 94%;
		margin: 0 auto 5rem;
		position: relative;
		z-index: 3;
		flex-wrap: wrap;
	}

	.about-content{width: 100%; margin-bottom: 0;}
	.about-img{width: 100%; margin-bottom: 3rem;}
	.about-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
	}

	.about-content h2 {
		text-align: center;
		font-size: 3rem;
		line-height: 0.9;
		margin-bottom: 2.5rem;
	}

	.about-content h2 span {
		display: block;
		font-size: 8rem;
		color: var(--f-color02);
		margin-left: 0;
	}
	
	.about-content h2 small {
		display: block;
		font-size: 1.9rem;
		font-weight: bold;
		color: var(--f-color02);
		padding-top: 1.5rem;
	}

	.about-content p {
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 2.4;
		margin-bottom: 2rem;
	}
	
	.about-content p br {display: none;}
	.about-content h3 {
		font-size: 2rem;
		font-weight: bold;
		line-height: 2;
		margin-bottom: 2.5rem;
		text-align: center;
	}
	
	.about_btn {
		width: 90%;
		max-width: 90%;
		text-align: center;
		margin: 0 auto;
	}
	
    .about_btn .btn_size2 {
        width: 100%;
        max-width: 100%;
        height: 60px;
    }

	.top-service {
		max-width: 100%;
		width: 94%;
		margin: 0 auto 5rem;
		position: relative;
		z-index: 3;
	}
	
	.top-service ul {flex-wrap: wrap;}
	.top-service ul li + li {margin-top: 3rem;}
	.top-service ul li {
		max-width: 100%;
		width: 100%;
		background-color: var(--bg-color03);
		border: 2px solid var(--bg-color01);
		text-align: center;
		padding: 0 0 3rem;
	}

	.top-service ul li h3 {
		font-size: 2.4rem;
		font-weight: bold;
		line-height: 1.6;
		color: var(--bg-color01);
		margin: 2rem 0 1rem;
	}

	.top-service ul li p {
		font-size: 1.4rem;
		padding: 0 2rem;
		margin-bottom: 2rem;
		text-align: left;
	}

	.top-faq {
		max-width: 100%;
		width: 94%;
	}

	.top-faq a {
		display: block;
		padding: 1rem 0 5rem 2rem;
	}
	
	.top-service h2.page-ttl {line-height: 1;}
	.top-faq h2.page-ttl {margin-bottom: 0;}
	
	.top-service h2.page-ttl span,
	.top-faq h2.page-ttl span {
	    font-size: 8rem;
	}

	.top-faq h3 {
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}
	
	.top-faq p {
		font-size: 1.3rem;
		line-height: 2.2;
	}
	
	.top-faq .faq_left {
		width: 26%;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.top-faq .faq_right {
		width: 26%;
		position: absolute;
		bottom: 0;
		right: 0;
	}
		
	
		

	/*-----------------------------
	
	page-ttl
	
	------------------------------*/
	#page-ttl {
		padding: 5rem 0;
		margin-top: 8rem;
	}
	
	#page-ttl h1 span {font-size: 4rem;}
	#page-ttl h1 {font-size: 1.9rem;}
	h2.page-ttl {
		font-size: 1.9rem;
		margin-bottom: 2.5rem;
	}

	h2.page-ttl span {font-size: 5rem;}





	/*-----------------------------
	
	policy
	
	------------------------------*/
	.policy_area {
		padding: 3rem 0;
	}
	.policy_area h3 {
		font-size: 1.6rem;
		font-weight: bold;
		margin-bottom: 1rem;
	}
	
	p.policy_txt {
		font-size: 1.3rem;
	}


	/*-----------------------------
	
	faq
	
	------------------------------*/
	.faq-container {margin: 5rem auto 10rem;}
	.faq-question {
	  padding: 2.5rem 5rem 2.5rem 2rem;
	  font-size: 1.5rem;
	}
	.faq-icon-q {font-size: 2rem;}
	.faq-answer-content {
	  padding: 2rem 1rem 3rem;
	  line-height: 1.8;
	}

	.faq-answer-content p {font-size: 1.3rem;}
	.faq-answer-content p + p {margin-top: 3rem;}



	/*-----------------------------
	
	btn
	
	------------------------------*/
	.btn_size1 {
		width: 100%;
		max-width: 100%;
		height: 84px;
	}
	
	.btn_size2 {
		width: 80%;
		max-width: 80%;
		height: 60px;
	}
	
	.btn_size3 {
		width: 94%;
		max-width: 94%;
		height: auto;
		padding: 2rem 0;
	}
	
	.btn_size4 {
		width: 94%;
		max-width: 94%;
		height: 60px;
	}
	
	.btn_size5 {
		width: 80%;
		max-width: 80%;
		height: 70px;
	}

	.btn-text {font-size: 1.6rem !important;}
	.btn_size4 .btn-text,
    .btn_size3 .btn-text {font-size: 1.3rem !important;}

	.ar_w::after {
	    width: 14px;
	    height: 12px;
	    background-image: url(../img/common/arrow-white.png);
	}
	
	.btn_size3.btn-skew::after {right: 10px !important;}
	
	
	/*-----------------------------
	
	service
	
	------------------------------*/
	.service ul.service-btn {
		flex-wrap: wrap;
		margin: 3rem 0;
	}
	.service ul.service-btn li {
		width: 100%;
		margin: 0 0 2rem;
	}

	ul.service-contents {}
	ul.service-contents li {
		padding: 4rem 2rem;
	
	}
	ul.service-contents li + li {margin-top: 5rem;}
	ul.service-contents li .service-inner {flex-wrap: wrap;}
	ul.service-contents li .service-img {
		width: 100%;
		order: 2;
	}
	
	ul.service-contents li .service-info {
		width: 100%;
		padding: 0;
		order: 1;
		text-align: center;
		margin-bottom: 2rem;
	}

	ul.service-contents li .service-info h2 {font-size: 2.4rem;}
	ul.service-contents li .service-info p.service-info-txt {font-size: 1.8rem;}
	ul.service-contents li .service-info h3 {font-size: 2rem;}

	ul.service-contents li p.service-txt {
		text-align: left;
		font-size: 1.4rem;
		padding: 2rem 0;
	}
	ul.service-contents li p.service-txt br {display: none;}
	ul.service-contents li .service-list {
		width: 100%;
		margin: 0 auto 4rem;
		padding: 2rem;
	}

	ul.service-contents li .service-list h3 {
		font-size: 2rem;
	}

	ul.service-contents li .service-list .list p {
		width: 100%;
		font-size: 1.4rem;
		padding: 1rem 1.5rem;
	}
	
	ul.service-contents li .service-list .list p + p {margin-top: 1rem;}

	/*-----------------------------
	
	about
	
	------------------------------*/
	.about {padding-top: 3rem;}
	p.message-txt {
		font-size: 1.4rem;
		text-align: left;
	}
	
	p.message-txt br {display: none;}
	h3.message-name {margin-bottom: 5rem;}
	.out-line {margin-top: 5rem;}
	.out-line dl + dl {margin-top: 4rem;}
	.out-line dl dt {
		width: 24%;
		font-size: 1.4rem;
	}
	.out-line dl dd {
		width: 75%;
		font-size: 1.4rem;
	}
	

	/*-----------------------------
	
	sitemap
	
	------------------------------*/
	ul.sitemap_nav {
	  justify-content: flex-start;
	  gap: 3.5rem 0;
	  max-width: 100%;
	  width: 90%;
	  margin: 0 auto;
	  padding: 5rem 0 0;
	}
	ul.sitemap_nav li {width: 50%; text-align: center;}
	ul.sitemap_nav li a {
	  font-size: 1.6rem;
	  font-weight: bold;
	}



	/*-----------------------------
	
	pan / ttl
	
	------------------------------*/
	
	h2.en01-ttl {
		padding-top: 4rem;
		margin-bottom: 1rem;
		text-align: center;
		font-size: 5rem;
	}
	
	h2.en01-ttl + h3 {
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	
	
	h2.en01-ttl + h3 + p {
		font-size: 1.3rem;
		padding: 0 1rem;
		margin-bottom: 3.5rem;
	}




	/*-----------------------------
	
	contact
	
	------------------------------*/
	.contact {margin-top: 3rem;}
	.contact p.contact_txt {
		font-size: 1.4rem;
		margin-bottom: 3rem;
	}

	.contact ul li .th {
		font-size: 1.6rem;
	}
	
	.contact ul {
		max-width: 100%;
		width: 94%;
		margin: 0 auto;
	}

	p.characters-txt {
	    font-size: 1.5rem;
	    text-align: center;
	}
	
	.agree .mwform-checkbox-field-text {
	    font-size: 1.4rem;
	}

	.submit-wrap {
	    display: inline-block;
	    position: relative;
	    width: 90%;
	    height: 62px;
	    text-align: center;
	}
	
	.submit-wrap .btn-skew {
	    font-size: 1.6rem !important;
	}
	
	

	/*-----------------------------
	
	404
	
	------------------------------*/
	body.error404 ul.pan,
	body.thanks  ul.pan{padding-top: 0;}
	body.error404 #wrapper,
	body.thanks #wrapper{
		padding-bottom: 10rem;
		min-height: auto;
	}



	/*-----------------------------
	
	footer
	
	------------------------------*/
	footer {padding: 5rem 0 0;}
	footer h3 {font-size: 1.8rem;}

	footer .contat_btn_footer {
		width: 80%;
		margin: 0 auto 5rem;
	}	
	footer .contat_btn_footer .btn-skew .btn-text {font-size: 2rem;}
	footer .footer-logo {margin-bottom: 2rem;}
	footer p.footer-company span{
		font-size: 1.8rem;
		font-weight: bold;
	}
	
	footer p.footer-company {
		padding: 0 3rem;
		font-size: 1.6rem;
		margin-bottom: 3rem;
	}

	footer ul.footer-nav {
	    max-width: 100%;
		width: 90%;
		margin: 0 auto;
		padding: 0 0 5rem;
	}
	
	footer ul.footer-nav li {
		width: 50%;
		flex-wrap: wrap;
		border-bottom: 1px solid #fff;
	}

	footer ul.footer-nav li a {
		font-size: 1.7rem;
		font-weight: bold;
		padding: 1.5rem 0;
		display: block;
	}


	footer .footer-bottom ul {
		margin-bottom: 1rem;
	}
	footer .footer-bottom ul li {
		margin-right: 0;
		width: 50%;
	}
	footer .footer-bottom ul li a {
		font-size: 1.3rem;
		padding: 0.5rem 0;
		display: block;
	}
	.footer-inner {flex-wrap: wrap;}
	.copyright {
		width: 100%;
		font-size: 1.2rem;
		text-align: center;
	}

	.marquee-text {font-size: 10rem;}
	@keyframes scroll-right {
	  0% {
	    transform: translateX(-50%);
	  }
	  100% {
	    transform: translateX(0%);
	  }
}









}