@charset "utf-8";
/* CSS Document */
.titleBox{
	display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    margin: 2em auto 0 auto;
	max-width: 1400px;
    width: calc(98% - 20px);
}.titleBox h1{
	    display: flex;
    flex-direction: row-reverse;
    padding: 0 10px;
    font-size: 1.2em;
    gap: 20px;
    align-items: center;
	min-width: 300px;
    justify-content: flex-end;
}.titleBox h1 span{
	font-size: 0.8em;
}
.breadcrumb {
	padding: 0 10px;
	font-size: 0.9em;
	width: inherit;
	text-align: left;
}
.breadcrumb ul li {
	display: inline;
	color:rgb(98 134 172);
}.breadcrumb ul li a{
	color:rgb(98 134 172);
	text-decoration: none;
	font-weight: 700
}
.breadcrumb ul li a:after {
	content: "-";
	padding: 0 0.5em;
}.breadcrumb ul li:nth-child(2) a:after {
	content: "●";
	padding: 0 0.5em;
}
#yoyaku .contents .main{
	max-width: 1400px;
    width: calc(98% - 20px);
    margin: auto;
    padding: 2em 0;
    text-align: left;
}
#yoyaku .contents section{
	text-align: center;
}
#yoyaku .contents .inner{
	max-width: 1200px;
    width:calc(94% - 20px);
    margin: auto;
    padding: 2em 0;
    text-align: left;
}
#yoyaku .contents h2,h3,h4{
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    padding: 1em;
    text-align: center;
    font-size: 2.2em;
}
@media screen and (min-width: 769px) {
	.titleBox{
	display: flex;
    justify-content: space-between;
    flex-direction: row;
}
	.breadcrumb {
	text-align: right
}
}
#yoyaku #lead ul{
	display: flex;
	flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}
#yoyaku #lead ul li{
	background: rgba(241,224,197,1.00);
	padding: 10px;
    flex: 1 calc(50% - 40px);
    font-weight: 900;
}
#yoyaku #lead h2{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	font-size: 1.5em;
}
@media screen and (min-width: 769px) {
	#yoyaku #lead h2{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	font-size: 2em;
}#yoyaku #lead ul{
	flex-direction: row;
	gap:30px;
}
	#yoyaku #lead ul li{
	font-size: 1.2em;
}
	}
#about,#faq{
	background:#fff417;
	padding: 2em 0;
}
section#about {
	padding-top: 4em;
}
#about .inner,#faq .inner{
	background:#fff;
	border-radius: 10px;
}
#about h2{
	color:  rgba(0,156,73,1.00);
	margin: -2em auto 1em;
    display: flex;
    flex-direction: column;
	align-items: center;
	font-size: 1.4em;
}
#about h2 img{
	display: block;
	margin-bottom: 1em;
	width: 35vw;
    min-width: 280px;
}
#about h2+p{
	margin: 2em auto;
	width: calc(80% + 20px)
}
#about .inner ul{
	margin: 2em auto;
    width: calc(80% + 20px);
	display: grid;
	grid-template-columns: 1fr ;
	row-gap:20px;
	column-gap:20px;
}#about .inner ul li{
	background: rgba(0,156,73,1.00);
	padding: 1em;
	color: #FFF;
	 display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}#about .inner ul li h3{
	background: rgba(0,156,73,1.00);
	 padding: 0;
	color: #fff417;
    font-weight: 900;
	font-size: 2em;
}#about .parent{
	max-width: 1200px;
    width:calc(92% - 20px);
	margin:2em auto
}#about .parent h3{
	max-width: 1400px;
    width: calc(74% - 20px);
    margin: 0em auto;
    position: relative;
    padding: 2em 10vw 4vw 10vw;
}#about .parent h3::after{
	content: '';
	background: url("../yoyaku/img/parent01.webp");
	background-position: right bottom;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	top: 0;
	display: block;
    height: -webkit-fill-available;
    width: 14vw;
    background-size: contain;
}#about .parent h3::before{
	content: '';
	background: url("../yoyaku/img/parent02.webp");
	background-position: left bottom;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
    top: 0;
    display: block;
    height: -webkit-fill-available;
    width: 10vw;
    background-size: contain;
}#about .parent ul{
	display: flex;
	justify-content: space-between;
	gap:12px;
}#about .parent ul li{
	background: #FFF;
	padding: 1em;
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
	font-size: 1.2em;
	flex: 1 30%;
	    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
#about h4{
	font-size:2em;
	font-weight: 900;
}
#about h4+p{
	font-size: 1.3em;
    margin-bottom: 2em;
}
#faq dl{
	width: calc(90% - 10px);
	margin: auto;
}
@media screen and (min-width: 769px) {
	#about h2{
	margin: -3em auto 1em;
	font-size: 1.6em;
}
	#about .inner ul{
	grid-template-columns: 1fr 1fr ;
}
	#about .inner ul li {
	 font-size: 1.3em;
	}
	#about .inner ul li h3{
	font-size:3em;
	}
	#about .parent ul li{
	font-size: 1.7em;	
	}
}

#work{}
#work ul{
	max-width: 1200px;
	width: calc(75% - 20px);
	margin:0 auto 3em;
	display: flex;
	flex-direction: column;
	gap:10px;
}
#work ul li{
	flex: 1 50%;text-align: justify;
}
#work ul li:last-child{
	text-align: justify;
}
#work ul li h3{
font-size: 1.5em;
    text-align: justify;
    padding: 1em 0;	
}
@media screen and (min-width: 769px) {
	#work ul{
	flex-direction: row;
	gap:30px;
}
}

#price{
	background: rgba(0,156,73,1.00);
	color: #FFF;
	padding: 2em 0;
}#yoyaku .contents #price h2{
	padding: 1em;
	font-size: 1.5em;
}#price p{
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    padding:0.5em;
    text-align: center;
    font-size:1.2em;
	color: #fff417;
	    line-height: 1;
}
#price p span{
	font-size: 2.5em;
	font-weight: 900;
	line-height:0.2;
}
@media screen and (min-width: 769px) {
	#price p{
    font-size: 2.2em;
}
	#price p span{
	font-size: 3.0em;
}
}
#step{
}#step ul{
	
}#step ul li{
	display: flex;
	justify-content: center;
	margin: 1em;
	flex-direction: column
}
#step ul li h3{
        background: #009c49;
        padding: 1em;
        font-size: 1.2em;
        color: #FFF;
}#step ul li p{
	flex-basis: 60%;
        padding: 2em;
        background: #fffdd7;
}
@media screen and (min-width: 769px) {
	#step ul li{
		flex-direction: row;
	}
	#step ul li h3{
		flex-basis: 40%;
        background: #009c49;
        font-size: 1.2em;
}#step ul li p{
	flex-basis: 60%;
}
}

#faq dl dt,#faq dl dd{
	position: relative;
	margin-left: 100px;
}
#faq dl dt{
	font-size: 1.3em;
	font-weight: 900;
	margin-bottom: 1.5em;
	color: #009c49
}
#faq dl dt:before{
	content: '';
	position: absolute;
	left: -80px;
	top:0;
	background: url("../yoyaku/img/Q.webp") no-repeat;
	width: 90px;
    height: 33px;
    background-size: contain;
}
#faq dl dd{
	font-size: 1.2em;
	font-weight: 900;
	margin-bottom: 2.5em;
    margin-left: 130px;
}
#faq dl dd:before{
	content: '';
	position: absolute;
	left: -80px;
	top:0;
	background: url("../yoyaku/img/A.webp") no-repeat;
	width: 90px;
    height: 33px;
    background-size: contain;
}
@media screen and (min-width: 769px) {
	#faq dl {
	font-size: 1.1em;	
	}
}

#massage{
	
}