@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-contact h1 {
		position: relative;
		z-index: 10;
	}

	header .hd-contact .hd-tel,
	header .hd-contact .hd-line,
	header .hd-info nav {display: none;}

	#page-ttl {
		padding: 10rem 0 10rem;
		margin: 0 0 1.5rem;
		background-position: left center;
	}

	#page-ttl h2 {
		font-size: 1.8rem;
		font-weight: 500;
	}

	#page-ttl h2 span {
		font-size: 6rem;
	}
	
	#page-ttl h2.sp_ttl span{font-size: 3.6rem;}

	#pan {
		margin: 0 1rem 5rem;
	}
	#pan,
	#pan a{
		font-size: 1.2rem;
		font-weight: 500;
	}
	
	h2.ttl span{
		font-size: 2.6rem;
	}
	h2.ttl-en {line-height: 1.6;}
	h2.ttl-en .en-main {font-size: 3rem;}
	h2.ttl-en .jp {font-size: 1.4rem; padding-left: 1rem;}
	h2.ttl-en .en-sub {
		font-size: 4rem;
		margin-left: 0;
	}
	
	body.single #main-contents {background: #F7F7F6;}

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

	top

	------------------------------*/	
	#main-fv {
		padding: 0;
		text-align: center;
		height: 80vh;
		margin: 0;
	}
	
	#main-fv::before {
	    height: 80vh;
	}
	
	.video {
	    width: 100%;
	    height: 80vh;
	}
	
	#main-fv h2 {
		font-size: 4rem;
		font-weight: normal;
		text-transform: uppercase;
		line-height: 1.8;
		top: 50%;
	}
	
	#main-fv h2 .main-line1 {
		width: 80%;
		margin: 0 auto;
		position: relative;
	}
	
	#main-fv h2 .main-line1::before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 12rem;
        width: 5rem;
        height: 2px;
		background-image: url(../img/page/top/line.svg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	
	#main-fv h2 .main-line1 {padding-left: 10rem;}
	#main-fv h2 .main-line2 {padding-right: 4rem;}
	#main-fv h2 .main-line3 {padding-left: 4rem;}
	
	/*-----------------------------

	top-about

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

	.top-about {
		max-width: 90%;
		width: 90%;
		margin: 5rem auto;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 5rem;
	}

	.top-about .top-about-img {
		width: 60%;
		max-width: 60%;
		margin: 0 auto 2rem 10rem;
		text-align: center;
	}

	.top-about .top-about-info {
		width: 100%;
		max-width: 100%;
	}

	.top-about .top-about-info h3 {
		font-size: 2.4rem;
		margin-bottom: 1rem;
		text-align: center;
	}
	.top-about .top-about-info p {
		font-size: 1.4rem;
		line-height: 2;
		margin-bottom: 3rem;
	}
	
	.top-about .top-about-info .top-about-name {text-align: center;}


	.top-features {
		background: url("../img/page/top/bg-01.jpg") repeat-y top left;
		background-size: 80% auto;
		padding: 10rem 0;
		margin-bottom: 7.5rem;
	}

	.top-features ul.features-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 3rem 0;
	}

	.top-features ul.features-list li:nth-child(even) {
		margin-top: 0;
	}

	.top-features ul.features-list li .parisienne{font-size: 3rem;}
	.top-features ul.features-list li h3 {font-size: 1.6rem;}
	.top-features ul.features-list li p {
		font-size: 1.3rem;
		line-height: 2;
	}

	.features-inner {position: relative;}
	.features-inner .circle {
		width: 30%;
		position: absolute;
		top: -5rem;
		left: -1rem;
	}

	.features-slide .swiper-slide {font-size: 4.5rem;}
	.top-gallery {
		padding: 5rem 3rem;
		margin: 0 0 5rem;
	}

	.top-gallery ul.gallery-list {
		gap: 3rem 1rem;
		margin-bottom: 2rem;
	}
	
	.top-gallery ul.gallery-list li img {width: 100%;}
	
	.top-gallery ul.gallery01 li:first-child {width: 60%;}
	.top-gallery ul.gallery01 li:last-child {width: 36%; padding-right: 0;}
	
	.top-gallery ul.gallery02 li:first-child {text-align: right; width: 30%;}
	.top-gallery ul.gallery02 li:last-child {width: 65%;}	
	
	.top-gallery ul.gallery03 li:first-child {width: 55%;}
	.top-gallery ul.gallery03 li:last-child {text-align: left; width: 40%;}


	.gallery-inner .circle {
		width: 40%;
		position: absolute;
		top: -6rem;
		right: -2rem;
	}
	
	.top-gallery {	position: inherit;}
	
	.top-gallery .more {
		position: inherit;
		bottom: 0;
		right: 0;
		text-align: center;
	}
	.more a {font-size: 1.6rem;}

	.btn {width: 100%;}
	.btn a {
		display: block;
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-size: 1.6rem;
	}


	.instagram-area{
		padding: 0 3rem 5rem;
		position: relative;
	}

	.instagram-area:before {
		content: "";
		background: #F0EFEE;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 180px;
		display: block;
	}

	.instagram-area h2.ttl {text-align: center;}
	.top-news-area{padding: 0 3rem 5rem;}

	.top-news-inner {
		flex-wrap: wrap;
	}

	.top-news-inner .top-news-cat {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2rem;
	}

	.top-news-inner .top-news-article {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		margin-bottom: 3rem;
	}


	.top-news-inner .top-news-cat ul{
		margin-bottom: 3rem !important;
	}
	
	.top-news-inner .top-news-cat ul li {}

	.top-news-inner .top-news-cat ul li + li {margin-top: 2rem;}
	.top-news-inner .top-news-cat ul li a {
		display: block;
		font-size: 2rem;
		padding-bottom: 1rem;
		border-bottom: 2px solid #B4ADA9;
	}

	.top-news-inner .top-news-cat .btn {
		width: 100%;
		margin: inherit;
	}

	.top-news-inner .top-news-article ul li a {
		display: block;
		padding: 2.5rem 0;
		border-bottom: 1px solid #CCCCCC;
	}

	.top-news-inner .top-news-article ul li h3 {
		font-size: 1.6rem;
		margin-bottom: 2rem;
	}

	.top-news-inner .top-news-article ul li dl dt {margin-right: 3rem;}
	.top-news-inner .top-news-article ul li dl dt,
	.top-news-inner .top-news-article ul li dl dd {
		font-size: 1.4rem;
		letter-spacing: 0.1rem;
	}


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

	business

	------------------------------*/
	.business-inner {
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
		padding: 1rem;
		margin-left: 0;
	}

	.business-area {padding: 0 2rem;}
	.business-area h2.business-ttl {
		font-size: 2.6rem;
		line-height: 1.8;
		margin-bottom: 4rem;
		text-align: center;
	}
	
	.business-area p.business-txt {
		font-size: 1.4rem;
		line-height: 2.8;
		margin-bottom: 5rem;
		text-align: left;
	}

	.business-slide-area {
		margin-bottom: 5em;
	}
	
	.business-reason {
		margin-bottom: 5em;
	}

	.business-reason ul.reason-list {}
	.business-reason ul.reason-list li {
		padding: 2rem;
	}

	.business-reason ul.reason-list li + li {margin-top: 1.5rem;}
	.business-reason ul.reason-list li .reason-inner {flex-wrap: wrap;}
	.business-reason ul.reason-list li .reason-inner .reason-img {
		width: 100%;
		max-width: 100%;
		margin-bottom: 3rem;
	}

	.business-reason ul.reason-list li .reason-inner .reason-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}	

	.business-reason .reason-ttl {display: none;}
	.business-reason ul.reason-list li .reason-inner .reason-info .num {
		font-size: 1.6rem;
		margin-bottom: 2rem;
	}
	
	.business-reason ul.reason-list li .reason-inner .reason-info h3 {
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	.business-reason ul.reason-list li .reason-inner .reason-info p.reason-txt {
		font-size: 1.3rem;
		line-height: 2;
	}
	
	
	.business-pattern {margin-bottom: 5rem;}
	.business-pattern .pattern-inner {
		max-width: 100%;
		width: 100%;
		margin: 0 auto;
	}

	.business-pattern .pattern-inner .main-pattern {
		max-width: 100%;
		width: 100%;
		flex-wrap: wrap;
		align-items: flex-end;
		margin: 0 auto 3rem;
	}

	.main-pattern .main-visual {
		width: 100%;
		max-width: 100%;
	}

	.main-pattern .main-text-area {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}

	.main-pattern .main-text-area .num {
		font-size: 10rem;
	}

	.main-pattern .main-text-area .pattern-box {
		background: #F0EFEE;
		padding: 3rem;
		margin-top: -5rem;
	}

	ul.thumbnails-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 2rem;
	}

	ul.thumbnails-list li img{
		width: 100%;
		height: 140px;
		object-fit: cover;
	}

	
	.business-case {margin-bottom: 5rem;}
	.business-case ul {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 5rem 5rem;
		padding: 2rem;
	}

	.business-case ul li h3 {font-size: 1.8rem;}
	.business-case ul li p {
		padding: 2rem;
		font-size: 1.3rem;
	}

	.business-prices {margin-bottom: 5rem;}
	.business-prices ul.prices-list {}
	.business-prices ul.prices-list li {padding: 2rem;}

	.business-prices ul.prices-list li + li {margin-top: 1.5rem;}
	.business-prices ul.prices-list li .prices-inner {flex-wrap: wrap;}
	.business-prices ul.prices-list li .prices-inner .prices-img {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2rem;
	}

	.business-prices ul.prices-list li .prices-inner .prices-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}

	.business-prices ul.prices-list li .prices-inner .prices-info h3 {
		font-size: 1.6rem;
	}

	.business-prices ul.prices-list li .prices-inner .prices-info dl {}
	.business-prices ul.prices-list li .prices-inner .prices-info dl dt,
	.business-prices ul.prices-list li .prices-inner .prices-info dl dd {
		font-size: 1.6rem;
	}
	
	/*-----------------------------

	news-area

	------------------------------*/
	.news-area {
		box-sizing: border-box;
		max-width: 90%;
		width: 90%;
		margin: 0 auto;
	}

	.news-area ul.news-cat {
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 5rem;
	}
	
	.news-area ul.news-cat li {
		width: 48%;
		max-width: 48;
		margin: 0;
		text-align: center;
		margin-bottom: 3rem;
	}
	
	.news-area ul.news-cat li a {
		display: block;
		font-size: 1.6rem;
	}

	.news-area .news-list ul li {}
	.news-area .news-list ul li a {
		display: block;
		padding: 3.5rem 0;
	}

	.news-area .news-list ul li h3 {
		font-size: 1.6rem;
		margin-bottom: 2rem;
	}
	
	
	/*--news-single--*/
	.news-area-single {
		padding-bottom: 5rem;
	}
	h2#blog-ttl{
		font-size: 20px;
	}

	ul#blog-cate li{
		font-size: 12px;
	}

	p#blog-time{
		padding: 10px 0px 30px;
		font-size: 14px;
	}

	#blog-contents{
		padding: 30px 30px 10px 30px;
	}

	#blog-contents h3{
		margin: 50px 0px 20px;
		font-size: 18px;
	}

	#blog-contents h4{
		margin: 50px 0px 20px;
		font-size: 16px;
	}

	#blog-contents p{
		font-size: 14px;
		margin-bottom: 50px;
	}

	#pagination a.arrow{
		font-size: 14px;
	}

	#pagination{
		padding: 30px 0px 0;
	}

	#pagination a#back{
		width: 150px;
		font-size: 14px;
		line-height: 50px;
		margin: 0px 20px;
	}
	
	/*-----------------------------

	service

	------------------------------*/
	.service-area {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.service-area .service-img {
		/*width: 100%;
		max-width: 100%;
		padding: 3rem;
		margin-bottom: 1rem;*/
		display: none;
	}
	
	.service-area .service-list {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}
	
	.service-area .service-img h2 {
		font-size: 1.2rem;
	}
	
	.service-area .service-img h2 span {
		display: block;
		font-size: 2rem;
	}
	
	.service-area .service-img img {margin-bottom: 2rem;}
	.service-area .service-img p {
		font-size: 1.2rem;
		line-height: 2;
	}

	.service-area .service-list ol li dl dd h3 {
		font-size: 1.4rem;
	}
	
	.service-area .service-list ol li dl dd h3 span {
		font-size: 2rem;
	}
	
	.service-area .service-list ol li a{padding: 3rem 0; }



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

	contact

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

	.contact-area {
		max-width: 90%;
		width: 90%;
		margin: 0 auto;
	}

	.contact-area .contact-info {
		padding-bottom: 5rem;
		margin-bottom: 5rem;
	}

	.contact-area .form {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	.contact-area .contact-tel {
		text-align: center;
	}

	.contact-area .contact-tel span {
		font-size: 4rem;
		padding-left: 0rem;
	}

	.contact-area .contact-tel::before {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 40%;
	  transform: translateY(-40%);
	  left: 2rem;
	}

	.contact-area .contact-tel small {
		font-size: 1.6rem;
		padding-left: 0;
	}

	.contact-area .contact-line {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.contact-area .line-qr {
		width: 30%;
		max-width: 30%;
	}
	.contact-area .line-info {
		width: 70%;
		max-width: 70%;
		padding: 1em 0 0 3rem;
	}

	.contact-area .line-info p {
		font-size: 1.4rem;
		font-weight: 500;
		margin-bottom: 1rem;
	}

	.contact-area .line-info .line-btn {
		width: 100%;
	}

	.contact-area .line-info .line-btn a {
		display: block;
		text-align: center;
		font-size: 1.6rem;
		height: 50px;
		line-height: 50px;
	}
	
	.contact-form table {
		width: 100%;
		max-width: 100%;
		margin:  0 auto;
	}
	
	.submit_btn {
	    padding-top: 2rem;
	}

	.wpcf7-submit {
	    width: 100%;
	}
	
	
	
	
	
	
	/*-----------------------------

	footer

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

	.access-area {
		padding: 5rem 2rem;
	}
	.access-area .inner {
		align-items: center;
		flex-wrap: wrap;
	}
	.access-area .access-info {margin-bottom: 3rem;}
	.access-area .access-info,
	.access-area .access-img{
		width: 100rem;
		max-width: 100%;
	}

	.access-area .access-info dl {}
	.access-area .access-info dl + dl {margin-top: 2rem;}
	.access-area .access-info dl dt {
		width: 32rem;
		font-size: 1.2rem;
	}

	.access-area .access-info dl dd {
		width: 68rem;
		font-size: 1.2rem;
	}

	.map-area iframe {
		width: 100%;
		height: 240px;
		vertical-align: bottom;
	}


	footer {
		padding: 7rem 3rem 3rem;
		text-align: center;
	}

	footer ul {
		flex-wrap: wrap;
		margin-bottom: 5rem;
	}
	
	footer ul li {
		width: 100%;
		padding-right: 0;
		text-align: left;
	}

	footer ul li a {
		display: block;
		width: 100%;
		padding: 2rem 1rem;
		font-size: 1.6rem;
		border-bottom: 1px solid #fff;
	}

	footer ul li a:hover {opacity: 0.5;}

	footer .hd-line {
		width: 100%;
		text-align: center;
		margin: 0 auto 4rem;
	}

	footer .hd-line a {
		display: block;
		width: 100%;
		height: 70px;
		line-height: 70px;
		font-size: 1.6rem;
		border: 1px solid #fff;
	}

	footer .hd-line a:hover {
		background: #00C300;
	}

	footer .instagram {
		position: absolute;
		bottom: 5rem;
		right: 3rem;
	}

	footer .copyright {
		font-size: 1.2rem;
		padding-top: 3rem;
	}

	
	




}