@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: 0 2rem;}
	header nav {display: none;}
	header h1 {width: 50%;}

	
	/*-----------------------------

	TOP

	------------------------------*/

	#main-fv {
	  height: 50svh;
	}

	#main-fv .fv-content {
	  top: 10%;
	  left: 24px;
	  right: 24px;
	}

	#main-fv h2 {
	  font-size: 2.2rem;
	  line-height: 1.3;
	  margin-bottom: 1.2rem;
	}

	#main-fv p {
	  font-size: 1.4rem;
	  line-height: 1.4;
	}

	
	#works p.txt {font-size: 1.4rem;}
	.works-section {padding-bottom: 10rem;}
	.works-slider .card-info .num {
		font-size: 4rem;
	}
	
	.works-slider .card-info h3.title {
		margin: 1rem 0 1rem;
	}

	
	dl.works-concept {
		padding-top: 5rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	dl.works-concept dt {
		width: 100%;
		font-size: 4rem;
		text-align: center;
		color: var(--color-g);
		letter-spacing: 0.05em;
		border-right: none;
		border-bottom: 1px solid #A17923;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}


	dl.works-concept dd {
		width: 100%;
		font-size: 1.6rem;
		letter-spacing: 0%;
		line-height: 1.8;
		padding-left: 0;
	}

	.swiper-button-prev {
		left: 0px !important;
	}
	
	.swiper-button-prev,
	.swiper-button-next {
		width: 40px !important;
		height: 40px !important;
		top: 62% !important;
	}

	.swiper-button-prev::before {
		transform: translate(-50%, -50%) rotate(-45deg);
		left: calc(50% + 3px);
	}

	.swiper-button-next {
		right: 0px !important;
	}

	.swiper-button-next::before {
		transform: translate(-50%, -50%) rotate(135deg);
		left: calc(50% - 3px);
	}

	
	.about-section {padding-bottom: 10rem;}
	.about-section .inner {
		margin: 0 auto;
		padding: 0 20px;
	}

	.about-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0;
	}


	.about-section .about-media {
		width: 100%;
		flex-shrink: 0;
	}

	.about-section .about-img {
		width: 100%;
		height: 300px;
		display: block;
		object-fit: cover;
	}

	.about-section .about-title-group h2 {
	  	padding-top: 4.5rem !important;
	  	margin-bottom: 2.4rem;
		text-align: center;
	}


	.about-lead {
	  	font-size: 3.8rem;
		justify-content: center;
	  	flex-wrap: wrap;
	  	gap: 0.1em;
	  	line-height: 1.1;
	  	margin-bottom: 2rem;
		text-align: center;
	}

	.about-text-group p {
		padding: 0 2rem;
		line-height: 1.8;
	}

	.about-text-group p.lead-text {
	  font-size: 1.6rem;
	}

	.about-text-group p.body-text {
	  font-size: 1.8rem;
	}


	.style-item {
		width: 200px;
		height: 310px;
		margin-right: 40px;
		flex-shrink: 0;
	}

	.service-section {padding-bottom: 10rem;}
	.service-section::before {
	  	background-position: top right;
	  	background-size: cover;
	}

	.service-list {
	  	margin-top: 4rem;
	}

	.service-item {
	  	flex-direction: column-reverse;
	  	padding-bottom: 6rem;
	}

	.service-item:nth-child(even) {
	  	flex-direction: column-reverse;
	}

	.service-content {
	  	width: 90%;
	  	height: auto;
	  	margin: -5rem auto 0;
	  	padding: 3rem 2rem;
	  	background-size: cover;
		position: relative;
		z-index: 5;
	}

	.service-item:nth-child(even) .service-content {
	  	margin-left: auto;
		margin-right: auto;
	  	padding-left: 2rem;
	}

	.service-content .en-ttl {
	  	font-size: 3.2rem;
	  	line-height: 1.2;
	}

	.service-content .jp-ttl {
	  	font-size: 1.4rem;
	  	margin-bottom: 0;
	}

	.service-content .desc {
	  	font-size: 1.4rem;
	  	line-height: 1.7;
	}

	.service-img {
	  	width: 100%;
	  	margin-bottom: 1.5rem;
	}

	.service-bg {display: none;}
	.story-section {
			margin-top: 0;
	}

	.story-section .story-area {
		font-family: var(--font-family-shi);
		text-align: left;
		color: var(--color-w);
		flex-wrap: wrap;
		gap: 3rem;
		padding: 1rem 0 10rem;
	}

	.story-section .story-area p {font-size: 1.4rem;;}
	.story-section .story-area h3 {font-size: 2rem;}

	.story-section .story-area dl {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.story-section .story-area dl dt {
		width: 100%;
		text-align: center;
		line-height: 44px;
		padding: 0 1rem;
		margin-bottom: 1rem;
		font-size: 3rem;
		background-color: var(--background-color-g);
	}

	.story-section .story-area dl dd {
		width: 100%;
		font-size: 1.8rem;
		padding-left: 0;
		text-align: center;
	}
	
	.flow-section {
		padding-bottom: 10rem;
	}
	
	ol.flow-step {
	  display: flex;
	  grid-template-columns: none;
	  gap: 1.5rem;
	  overflow-x: auto;
	  scroll-snap-type: x mandatory;
	  -webkit-overflow-scrolling: touch;
	  padding-bottom: 1.5rem;
	}

	ol.flow-step li {
	  flex: 0 0 65%;
	  min-width: auto;
	  min-height: auto;
	  scroll-snap-align: start;
	  padding: 2rem 1.5rem;
	}

	ol.flow-step li span.num {
		font-family: var(--font-family-bebas);
		font-size: 5rem;
		color: var(--color-g);
	}

	ol.flow-step li h3 {
		font-size: 1.4rem;
		font-weight: 500;
		margin-bottom: 2rem;
	}

	ol.flow-step li .icon {
		width: 7rem;
		margin: 0 auto 2rem;
	}

	ol.flow-step li p {
		font-size: 1.4rem;
	}
	

	.price-inner {
		max-width: 777px;
		width: 100%;
	}

	.price-inner dl {margin-bottom: 2.3rem;}
	.price-inner dl dt {
		font-size: 2rem;
	}
	.price-inner dl dd {
		font-size: 5rem;
		height: 100px;
		line-height: 100px;
	}
	
	.price-inner p {font-size: 1.4rem;	}

	
	.our-style-section h3 {font-size: 3rem;}

	
	
	
	
	/*-----------------------------

	footer

	------------------------------*/

	footer {
		padding: 4rem 0 6rem;
	}
	footer .footer-logo {
		text-align: center;
		margin-bottom: 2rem;
	}
	footer ul.sns-icon {
		display: flex;
		justify-content: center;
		margin-bottom: 3.3rem;
	}

	footer ul.sns-icon li {
		margin: 0 1rem;
	}


	footer ul.footer-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2rem 1rem;
		margin-bottom: 5.2rem;
	}
	
	footer ul.footer-nav li {
		width: 48%;
		text-align: center;
		border-bottom: 1px solid #fff;
		padding-bottom: 1rem;
	}
	
	footer ul.footer-nav li:last-child {
		width: 100%;
		border-bottom: none;
	}
	
	footer ul.footer-nav li:last-child a {
		padding: 1rem 0;
		display: block;
		width: 100%;
		text-align: center;
		background-color: var(--background-color-g);
	}

	footer .footer-bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	footer .footer-bottom,
	footer .footer-bottom a {
		color: var(--color-w);
	}

	footer .footer-bottom a {
		font-size: 1.2rem;
	}

	footer .footer-bottom a:hover {color: var(--color-g);}
	footer .footer-bottom small {
		width: 100%;
		display: block;
		font-size: 1.2rem;
		margin-left: 0;
		text-align: center;
		padding-top: 1rem;
	}	

	
	
	
	.contact-section {
		background: url("../img/page/top/contact-bg.webp") no-repeat center;
		background-size: cover;
	  	padding-bottom: 6rem;
	}

	.contact-section h2 {
	  padding-top: 6rem;
	}

	.contact-section .inner {
	  	position: relative;
	  	top: auto;
	  	left: auto;
	  	right: auto;
	  	padding: 0 20px;
		text-align: center;
	}

	.contact-section .contact-img {
	  display: none;
	}


	.contact-section h3 {
	  font-size: 1.8rem;
	  margin-bottom: 1.2rem;
	}

	.contact-section p {
	  font-size: 1.4rem;
	  line-height: 1.8;
	}

	.contact-section .btn {
	  position: relative;
	  bottom: auto;
	  right: auto;
	  margin-top: 3rem;
	}

	.pagetop {
		position: fixed;
		bottom: 3%;
		right: 0;
		z-index: 15;

	}


	
	
	
	
	
	
	
	
	
	
	/*-----------------------------

	common

	------------------------------*/
	h2.ttl {
		padding-top: 5.5rem !important;
		font-size: 5rem;
	}

	p.txt {
		padding-top: 1rem;
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	ul.pan {
		padding-bottom: 3rem;
	}

	ul.pan li {margin-right: 0.3rem;}
	ul.pan li,
	ul.pan li a{
		font-size: 1.3rem;
		color: var(--color-g);
	}
	
	.btn {
		font-family: var(--font-family-bebas);
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}

	/*-----------------------------

	page-contens

	------------------------------*/
	.page-contens {padding-bottom: 10rem;}

	.contact-form {
		background-color: var(--background-color-w);
		border-radius: 20px;
		padding: 3rem 0 6rem;
	}

	.contact-body p.submitbtn {
		width: 90%;
		margin: 2rem auto 0;
	}

	.thanks-page {padding: 3rem 3rem 6rem}
	.thanks-page h2 {
		font-size: 2.6rem;
	}

	.thanks-page p {
		font-size: 1.4rem;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	


}