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

	variable

--------------------------------------------------*/
:root {
	--sp-outer-margin: calc((20/375) * 100vw);
	--pc-outer-margin: calc((40/1240) * 100%);
	--pc-inner-margin: calc((40/1160) * 100%);
}


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

	init

--------------------------------------------------*/
* {
	box-sizing: border-box;
}

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

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

	elements
	
--------------------------------------------------*/
h1,
h2 {
	line-height: 1.3;
}

h1 {
	font-size: 400%;
	margin-left: 50px;
	padding-bottom: 2rem;
}

h2 {
	font-size: 200%;
	font-family: "Noto Serif JP", serif;
}

/*h3 {
	font-size: 125%;
}*/

p {
	text-align: justify;
}

img {
	vertical-align: bottom;
}

/*
.lora {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.roboto-regular {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.noto-serif jp-regular {
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
	font-style: normal;
}

.noto-sans jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
*/
/*--------------------------------------------------

	fluid grid

--------------------------------------------------*/
@media screen and (max-width: 900px) {

	.sp_n {
		display: none;
	}
}

@media screen and (min-width: 901px) {

	.pc_n {
		display: none;
	}

	body {
		padding-left: var(--pc-outer-margin);
		padding-right: var(--pc-outer-margin);
	}

}

@media screen and (min-width: 1241px) {

	body {
		padding-left: 0;
		padding-right: 0;
	}

	.wrapper {
		padding-left: 40px;
		padding-right: 40px;
		margin-left: auto;
		margin-right: auto;
	}

	.full {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

}



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

	body
	header
	
--------------------------------------------------*/
body {
	background: #fff;
	color: #333;
	line-height: 1.5;
	letter-spacing: .05em;
	font-family: "Noto Sans JP", sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}



header .wrapper {
	height: 75vh;
	background: url(../image/top_sp.jpg) no-repeat center/cover;
}
.logo {
	font-size: 350%;
	padding-top: 5rem;
	color: #fff;
	padding-left: 10vw;
}

@media screen and (min-width: 901px) {
	header .wrapper h1 #logo {
		font-size: 500%;
	}

	header .wrapper {
		height: 75vh;
		width: 100%;
		background: url(../image/top_pc.jpg) no-repeat center/cover;
	}

}

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

hmb

-------------------------------------------*/
body {

	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
}

@keyframes bugfix {
	from {
		padding: 0;
	}

	to {
		padding: 0;
	}
}

@-webkit-keyframes bugfix {
	from {
		padding: 0;
	}

	to {
		padding: 0;
	}
}

#overlay-button {
	position: absolute;
	right: 2em;
	top: 3em;
	padding: 26px 11px;
	z-index: 5;
	cursor: pointer;
	user-select: none;
}

#overlay-button span {
	height: 4px;
	width: 35px;
	border-radius: 2px;
	background-color: #333;
	position: fixed;
	top: 50px;
	right: 30px;
	display: block;
	transition: all .2s ease-in-out;
}

#overlay-button span:before {
	top: -10px;
	visibility: visible;
}

#overlay-button span:after {
	top: 10px;
}

#overlay-button span:before,
#overlay-button span:after {
	height: 4px;
	width: 35px;
	border-radius: 2px;
	background-color: #333;
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;
}

#overlay-button:hover span,
#overlay-button:hover span:before,
#overlay-button:hover span:after {
	background: #333;
}

input[type=checkbox] {
	display: none;

}

input[type=checkbox]:checked~#overlay {
	visibility: visible;
}

input[type=checkbox]:checked~#overlay-button:hover span,
input[type=checkbox]:checked~#overlay-button span {
	background: transparent;


}

input[type=checkbox]:checked~#overlay-button span:before {
	transform: rotate(45deg) translate(7px, 7px);

}

input[type=checkbox]:checked~#overlay-button span:after {
	transform: rotate(-45deg) translate(7px, -7px);


}

#overlay {
	height: 100vh;
	width: 100vw;
	background: #7BCDCD;
	z-index: 2;
	visibility: hidden;
	position: fixed;
}

/*#overlay.active {}*/

#overlay ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	height: 70vh;
	padding-left: 0;
	list-style-type: none;
}

#overlay ul li {
	padding: 1em;
}

#overlay ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 1.5em;
}

#overlay ul li a:hover {
	color: #000 !important;
}

@media screen and (max-width: 900px) {

	.menu {
		display: none;
	}
}

@media screen and (min-width: 901px) {

	body {
		padding-top: 80px;
	}

	.wrapper input,
	.wrapper label,
	.wrapper #overlay {
		display: none;
	}

	nav ul li {
		text-align: center;
		line-height: 6rem;
	}

	nav ul li a {
		text-decoration: none;
		color: #333;
	}

	nav ul li img {
		padding: 2rem;
	}

	header .wrapper {
		height: 90vh;
		background: url(../image/top_pc.jpg) no-repeat center/cover;
		width: 100%;
	}

	header .wrapper h1 {
		position: relative;
		padding-left: 25vw;
		font-size: 500%;
	}

	.menu {
		width: 23vw;
		background-color: rgba(255, 255, 255, 0.7);
		position: fixed;
		padding-top: 50px;
		height: 100%;
		overflow-y: auto;
		z-index: 100;
	}

	.content {
		width: 77vw;
		margin-right: 0;
		margin-left: auto;
	}

}


@media screen and (min-width: 1241px) {

	header .wrapper {
		padding: 0 40px;
	}

}

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

	main

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

main .content {
	padding-top: 5rem;
}

main .inner {
	margin-top: 5rem;
	padding-top: 5.3rem;
	padding-bottom: 5.3rem;
	background-image: url(../image/l_up.svg);
	background-repeat: no-repeat;
	background-position: right 0;
}

main .reverce {
	margin-top: 5rem;
	padding-top: 5.3rem;
	padding-bottom: 5.3rem;
	background-image: url(../image/r_up.svg);
	background-repeat: no-repeat;
	background-position: left 0;
}

main .tagline {
	padding-left: 10vw;
	padding-right: 10vw;
}

main p {
	padding-left: 10vw;
	padding-right: 10vw;
	font-size: 16px;
	padding-top: 2rem;
	line-height: 2.2rem;
}

main .inner h2 {
	padding-left: 15vw;
	margin-bottom: 20px;
}
/*
main>.inner h2,
main>.inner h2+p {
	text-align: right;
}
*/
main>section h2+p {
	margin-bottom: 3rem;
}

main .inner figure img {
	height: 60vh;
	width: 80vw;
	object-fit: cover;
	border-radius: 10px;
	margin-right: 10vw;
	margin-left: 10vw;
}
/*
main .inner img ::after {
	content:"";
	background: #f0f3f5;
	height: calc(tan(60deg) * 60px / 2);
	width: 60px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
*/
main .reverce h2 {
	padding-left: 15vw;
	margin-bottom: 20px;
}

main .reverce figure img {
	height: 60vh;
	width: 80vw;
	object-fit: cover;
	border-radius: 10px;
	margin-right: 10vw;
	margin-left: 10vw;
}

main .inner a {
	text-decoration: none;
	display: block;
	text-align: right;
	padding-right: 10vw;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	padding-top: 1.5rem;
	position: relative;
	color: #333;
}

main .inner a::after,
main .reverce a::after {
	content: url(../image/viewmore.png);
	vertical-align: -6px;
	margin: 5px;
}

main .reverce a {
	text-decoration: none;
	display: block;
	text-align: right;
	padding-right: 10vw;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	padding-top: 1.5rem;
	color: #333;
}

main .tagline {
	font-size: 22px;
	line-height: 3rem;
	color: #3d998c;
	padding-top: 4rem;
}
@media screen and (min-width: 901px) {
	main p {
		padding-right: 20%;
	}

	main .inner figure img {
		height: 60vh;
		width: 70vw;
		object-fit: cover;
		border-radius: 10px;
		margin: 0;
	}

	main .reverce figure img {
		height: 60vh;
		width: 70vw;
		object-fit: cover;
		border-radius: 10px;
		margin: 0;
	}
	main .reverce figure {
		text-align: right;
	}

}

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

	#news

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

.news {
	padding-top: 5.3rem;
	padding-bottom: 5.3rem;
	padding-left: 10vw;
	padding-right: 10vw;
}

.instagram_link{
	display: flex;
	flex-wrap: wrap;
	margin: 40px auto;
}
.instagram_link a{
	display: none;
}
.instagram-media{
    padding: 0 !important;
    margin: 10px !important;
    width: 80vw !important;
    max-width: 300px !important;
    min-width: initial !important;
}

@media screen and (min-width: 901px) {
.instagram_link{
	justify-content: center;
}

.instagram-media{
    padding: 0 !important;
    margin: 10px !important;
    width: 20vw !important;
    max-width: 320px !important;
    min-width: initial !important;
  }
}
/*--------------------------------------------------

	#inner_inquiry

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

main .inner_inquiry {
	padding-bottom: 5.3rem;
	padding-left: 10vw;
	padding-right: 10vw;
}

main .inner_inquiry h2 {
	padding-top: 12rem;
	padding-bottom: 5.5rem;
}

main .inner_inquiry a {
	display: flex;
	text-decoration: none;
	padding: 3rem 2rem;
	font-size: 14px;
	border: 1px solid #333;
	border-radius: 10px;
	margin-bottom: 2rem;
	justify-content: center;
	align-items: center;
	color: #333;
}

main .inner_inquiry .phone {
	background: url(/image/SVG/phone.svg) no-repeat center;
	background-size: 20%;
}

main .inner_inquiry .mail {
	background: url(/image/SVG/mail.svg) no-repeat center;
	background-size: 20%;
}

main .inner_inquiry .faq {
	background: url(/image/SVG/logo_foot_g.svg) no-repeat center;
	background-size: 20%;
}
/*
.mail_icon{
	position: relative;
	left: 9vw;
	z-index: 1;
}

main .inner_inquiry a p{
	position: relative;
	top: 0px; 
	left: -20vw;
	color: #333;
	z-index: 2;
	padding: 0;
}
*/

@media screen and (min-width: 901px) {
	main .inner_inquiry .inner_content{
		display: flex;
		flex-wrap: wrap;
        justify-content: center;
        align-items: center;
	}

	main .inner_inquiry .inner_content a{
		margin: 10px;
		text-decoration: none;
		color: #333;
	}

	main .inner_inquiry .phone {
		background: url(/image/SVG/phone.svg) no-repeat center;
		background-size: 50%;
	}
	
	main .inner_inquiry .mail {
		background: url(/image/SVG/mail.svg) no-repeat center;
		background-size: 50%;
	}
	main .inner_inquiry .faq {
		background: url(/image/SVG/logo_foot_g.svg) no-repeat center;
		background-size: 30%;
	}
}
/*--------------------------------------------------

	#main_footer

--------------------------------------------------*/
footer {
	background: #7BCDCD;
	color: #fff;
	padding-top: 7rem;
	padding-bottom: 4rem;
	text-align: center;
	margin-top: 5rem;
}

footer a {
	color: #fff;
	text-decoration: none;
	font-style: normal;
}

footer p {
	text-align: center;
	font-style: normal;
	font-size: 14px;
}

footer img {
	padding-bottom: 2rem;
}

footer #inquiry {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

footer .mark img {
	height: 10rem;
}

footer #inquiry {
	display: flex;
	text-decoration: none;
	padding: 2rem;
	font-size: 14px;
	border: 1px solid #fff;
	border-radius: 10px;
	margin: 3rem 25%;
	justify-content: center;
}

footer .icon img {
	height: 5rem;
	width: 3.5rem;
}

@media screen and (min-width: 901px) {
	.footer_columns {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 77vw;
		margin-right: 0;
		margin-left: auto;
	}

	.footer_columns .mark,
	address {
		margin: 20px;
	}

	.footer_columns #inquiry {
		text-decoration: none;
		padding: 2rem;
		font-size: 14px;
		border: 1px none #fff;
		margin: 3rem 20px;
	}

	.icon{
		margin-top: 30px;
		width: 77vw;
		margin-right: 0;
		margin-left: auto;
	}

	footer small{
		padding-left: 23vw;
	}
}

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

child page

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

.no-background .full .wrapper {
	background-image: none;
	height: 10vh;
}

.no-background .full .wrapper h1 {
	font-size: 200%;
	color: #333;
	font-family: "Noto Serif JP", serif;
}

.no-background h1 {
	padding-top: 7rem;
	padding-left: 5vw;
}

.no-background h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6em;
	margin-left: 10vw;
}

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

info

----------------------------*/
.no-background .inner img {
	width: 80vw;
	object-fit: cover;
	height: 46vh;
	border-radius: 10px;
}

.no-background .reverce img {
	width: 80vw;
	object-fit: cover;
	height: 46vh;
	border-radius: 10px;
}

.no-background .inner {
	display: flex;
	flex-direction: column;
	/* 子要素を縦方向に並べる */
	background-image: none;
	margin-top: 0;
}

.no-background .sub_title {
	order: 2;
	/* h2を2番目に表示する */
}

.no-background .inner figure {
	order: 1;
	/* figureを1番目に表示する */
}

.no-background .inner p {
	order: 3;
	padding-top: 0;
}

.no-background main .inner h2 {
	text-align: left;
	padding-top: 3rem;
	padding-bottom: 1.5rem;
	font-size: 150%;
	font-family: "Roboto", sans-serif;
}

.no-background .reverce {
	display: flex;
	flex-direction: column;
	background-image: none;
}

.no-background .reverce figure {
	order: 1;

}

.no-background .reverce p {
	order: 3;
	padding-top: 0;
}

.no-background main .reverce h2 {
	padding-top: 3rem;
	padding-bottom: 1.5rem;
	font-size: 150%;
}

.no-background main h3 {
	padding-left: 10vw;
	font-family: "Noto Sans JP", sans-serif;
	padding-top: 3rem;
	font-size: 1.5rem;
}

.info {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.info h2 {
	text-align-last: left;
	padding-top: 3rem;
	padding-bottom: 1.5rem;
	font-size: 150%;
	padding-left: 10vw;
	padding-right: 10vw;
	font-family: "Noto Sans JP", sans-serif;
}

.info ul li {
	text-align-last: left;
	padding-left: 10vw;
	padding-right: 10vw;
	font-size: 16px;
	padding-top: 1rem;
	line-height: 1.5rem;
}

.info img {
	width: 100vw;
	object-fit: cover;
	height: 46vh;
	border-radius: 10px;
}

@media screen and (min-width: 901px) {
	.no-background .inner img {
		width: 40vw;
		object-fit: cover;
		height: 80vh;
		border-radius: 10px;
	}

	.no-background .reverce img {
		width: 40vw;
		object-fit: cover;
		height: 80vh;
		border-radius: 10px;
	}

	.info img {
		width: 40vw;
		height: 80vh;
		object-fit: cover;
		position: relative;
		left: 20vw;
	}

	.no-background .inner {
		display: grid;
		grid-template-columns: 40% auto;
		grid-template-rows: 25% 25% 25% 25%;
		gap: 10px;
	}

	.no-background .inner figure {
		grid-row: 2/3;
		grid-column: 1/2;
	}

	.no-background .inner h2 {
		grid-row: 2 / 3;
		grid-column: 2 / 3;
	}

	.no-background .content .inner p {
		grid-row: 3 / 4;
		grid-column: 2 / 3;
	}

	.no-background .reverce {
		display: grid;
		grid-template-columns: auto 40%;
		grid-template-rows: 25% 25% 25% 25%;
		gap: 10px;
	}

	.no-background .reverce figure {
		grid-row: 2 / 3;
		grid-column: 2 / 3;
	}

	.no-background .reverce h2 {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
	}

	.no-background .content .reverce p {
		grid-row: 3 / 4;
		grid-column: 1 / 2;
	}
}

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

service

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

.no-background .service {
	display: flex;
	flex-direction: column;
	background-image: none;
	margin-top: 25%;
}

.no-background .service .sub_title {
	order: 2;
}

.no-background .service figure {
	order: 1;
	width: 50%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
}

.no-background .service p {
	order: 3;
	padding-top: 0;
}

.no-background .service img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.no-background main .service h2 {
	padding-left: 10vw;
	padding-top: 3rem;
	padding-bottom: 1.5rem;
	font-size: 100%;
}

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

flow

----------------------------*/
.intro {
	padding-top: 8rem;

}

.flow {
	margin-top: 1rem;
}

.flow_design05 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10vw;
	padding-right: 10vw;
	margin-top: 3rem;
}

.flow05 {
	padding-left: 0;
}

.flow05>li {
	list-style-type: none;
	position: relative;
	padding-left: 50px;
}

.flow05>li:not(:last-child) {
	padding-bottom: 3rem;
}

.flow05>li .icon05 {
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 100vh;
	display: inline-block;
	background: #F8C8B9;
	color: #fff;
	position: absolute;
	left: 0;
}

.flow05>li:not(:last-child)::before {
	content: '';
	background: #c3c3c3;
	width: 4px;
	height: 100%;
	position: absolute;
	top: calc(50% - -30px);
	left: 19px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.flow05>li dl dt {
	font-size: 1.3em;
	font-weight: 600;
	color: #333;
}

.flow05>li dl dd {
	margin-left: 0;
}

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

form

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

form {
	background-color: #fff;
	margin-top: 10%;
	padding-left: 10vw;
	padding-right: 10vw;
	max-width: 1200px;
	width: 100%;
}

.intro a{
	display: inline-block;
	text-decoration: none;
	color: #7BCDCD;
}

.intro .link{
	display: inline-block;
	padding-left: 20%;
}



.no-background .content label {
	display: block;
	margin-bottom: 8px;
	font-family: "Noto Sans JP", sans-serif;
	color: #333;
}

.no-background input,
.no-background textarea,
.no-background select {
	width: 100%;
	padding: 8px;
	margin-bottom: 30px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

textarea {
	resize: vertical;
}

button {
	display: block;
	background-color: #3d998c;
	color: #fff;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-left: 30vw;
	margin-top: 3rem;
}

button:hover {
	background-color: #3d998c;
}

.no-background form a {
	text-decoration: none;
	font-size: .8rem;
	color: #7BCDCD;
}

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

form

----------------------------*/
.faq .flow_design{
	padding-top: 5rem;
}

.flow_design {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10vw;
	padding-right: 10vw;
	margin-top: 3rem;
}

.flow_faq {
	padding-left: 0;
}

.flow_faq>li {
	list-style-type: none;
	position: relative;
	padding-left: 50px;
}

.flow_faq>li:not(:last-child) {
	padding-bottom: 3rem;
}

.flow_faq>li .icon05 {
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 100vh;
	display: inline-block;
	background: #F8C8B9;
	color: #fff;
	position: absolute;
	left: 0;
}

.flow_faq>li dl dt {
	font-size: 1.3em;
	font-weight: 600;
	color: #333;
	padding: 2rem 0;
}

.flow_faq>li dl dd {
	margin-left: 0;
}