/* CSS Document */

body{
	letter-spacing: 1px;
	font-family: "Noto Sans JP", sans-serif;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}

main{
/*	overflow: hidden;*/
}

li{
	list-style:none;
}


a{
	text-decoration: none;
	color: inherit;
}

img{
	width: 100%;
}



/*電話失効設定1000px*/
a[href*="tel:"] {
	pointer-events: none;
}
@media only screen and (max-width: 1000px) {
	a[href*="tel:"] {
		pointer-events: initial;
	}
}

/*電話失効設定1050px　///　*/



/* main-area*/


.main-area{
	margin: auto;
	padding: 150px 5vw;
	display: flex;
	flex-direction: row;
	gap: 5vw;
	max-width: 1360px;
	align-items: flex-start;
}

@media(max-width: 1560px){
	
	.main-area{
		max-width: 1300px;
		padding: 120px 80px;
		gap: 80px;
	}
	
}

@media(max-width: 1200px){
    .main-area {
        gap: 50px;
	}
}

@media(max-width: 1000px){

	.main-area {
		flex-direction: column;
		padding: 80px 20px;
		align-items: center;
		gap: 30px;
	}

}

@media(max-width: 600px){
    .main-area {
		padding: 50px 20px;
	}

}

/* main-area //*/

.contact-btn-wrap{
	position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
	display: flex;
	flex-direction: column;
	gap:20px;
	z-index: 6;
}

.contact-btn a{
	display: block;
	width: 60px;
	aspect-ratio: 1/4;
}


.contact-btn a:hover{
	opacity: 0.85;
}

.contact-btn-tel a{
	background: url("../img/tel-vertical.png") no-repeat;
	background-size: cover;
}

.contact-btn-insta a{
	background: url("../img/insta-vertical.png") no-repeat;
	background-size: cover;
}


@media(max-width:1200px){
	
	.contact-btn a {
    	width: 50px;
	}
	
	.contact-btn-wrap {
    	gap: 10px;
	}
	
}



@media(max-width:1000px){
	
	.contact-btn-wrap{
		display: none;
	}
	
	
	
}

/* wave */

.wave-wh{
	display: block;
	background: url("../img/wave.png") no-repeat;
	background-size: 100% 100%;
}

.wave{
	position: absolute;
	width: 100%;
	height: 45px;
	z-index: 3;
	bottom: -20px;
	left: 0;
}


/*　main-title　*/


.main-title-box{
    display: flex;
    min-width: 360px;
    background: url(../img/title-bk/concept.png) center no-repeat;
    background-size: contain;
    aspect-ratio: 47 / 35;
    padding: 40px 0 0 40px;
    justify-content: center;
    align-items: center;
	position: relative;
    left: -20px;
}

.main-title-box::before{
	position: absolute;
	content: '';
	display: block;
	background: url("../img/pink-fl.png");
	background-size: cover;
	width:80px;
	aspect-ratio: 1/1;
	right: -30px;
	top:0;
	z-index: -1;
}


.main-title {
	position: relative;
}


.main-title h3 p{
	font-family: "Noto Sans JP", sans-serif;
	margin-left: 40px;
	font-size: 2.5rem;
	color: #BA8D7D;
	text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff; 
}


@media(max-width:1200px){
	
	.main-title-box {
    	min-width: 300px;
		padding: 40px 0 0 0;
	}
	
	.main-title h3 p {
    	margin-left: 0;
		font-size: 2rem;
	}
	
	
	
	.main-title-box::before {
		max-width: 60px;
        top: 30px;
        right: -20px;
    	width: 15vw;
	}
	
}

@media(max-width:1000px){
    
	.main-title-box {
		left: -0;
	}
	
}




@media(max-width:500px){

    .main-title-box {
		min-width: 80%;
	}
	
	.main-title-box::before {
        right:0;
    }
}

/*　main-title　///*/



/* sp-title */

.sp-title{
	display: block;
	background: url("../img/title-bk/features.png");
	background-size: cover;
	width: 570px;
	aspect-ratio: 7/3;
	position: relative;
	margin: auto;
}


.sp-title::before{
	display: block;
	content: '';
	position: absolute;
	width: 80px;
	background: url("../img/pink-fl.png");
	background-size: cover;
	aspect-ratio: 1/1;
	left: 0;
	top:30px;
	transform: scale(-1,1);
}

.sp-title h3 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.sp-title h3 p{
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.5rem;
	color: #DBA783;
}

@media(max-width: 1000px){
	
	.sp-title {
    	width: 450px;
	}
	
	.sp-title h3  {
		bottom: -5vw;
		right: inherit;
		left: 50%;
		transform: translateX(-50%);
		
	}
	
	.sp-title h3 p {
    	font-size: 2rem;
	}
	
}


@media(max-width: 600px){
	
	.sp-title {
        width: 100%;
    }
	
	
	.sp-title::before {
		width: 11vw;
		top: 0;
		transform: scale(-1, 1);
	}
	
	.sp-title h3 {
		width: 100%;
        text-align: center;
		bottom: -10vw;
	}
	
	.sp-title h3 p {
		letter-spacing: 1px;
        font-size: max(7vw, 2rem);
	}
	
}

/* sp-title ///*/



/* main-text */



.main-text {
	width:100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}


.main-text h4{
	font-size: 2rem;
	font-family: "Noto Sans JP", sans-serif;
}

.main-text h5{
	color: #666;
	font-size: 1.5rem;
	font-family: "Noto Sans JP", sans-serif;
}


.main-text p{
	font-size: 1.15rem;
	line-height: 1.75;
	letter-spacing:-0.01rem;
}



.main-text p span{
	font-weight: 300;
}

.dot-word {
	position: relative;
	display: inline-block;
	margin: 0;
	letter-spacing: -3px;
}

.dot-word::before {
  content: '';
  position: absolute;
  top: -5px; /* 丸の縦位置調整（必要に応じて調整） */
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #444;
  border-radius: 50%;
}


@media(max-width:1560px){
	
	.main-text p {
		font-size: 1.05rem;
		line-height: 1.75;
		letter-spacing: 0rem;
	}
	
}



@media(max-width:1200px){
	
	.main-text {
		gap: 10px;
	}
	
	.main-text h4 {
    	font-size: 1.75rem;
	}
	
	
}




@media (max-width: 1000px) {
    .main-text p {
		font-size: 1rem;
	}
	
	.dot-word::before {
    	width: 3px;
		height: 3px;
	}
	
	.main-text h4 {
        font-size: 1.5rem;
    }
	
	.main-text h5 {
    	font-size: 1.3rem;
	}
	
}


@media (min-width: 601px) {

	.br-600px{
		display: none;
	}
}

@media (max-width: 600px) {
    .main-text p {
		font-size: 0.95rem;
	}
	
	
	.main-text h4 {
        font-size: 1.25rem;
	}
}


/* main-text ///*/

.text-brown{
	font-weight: 600;
	color: #662A17;
}


/* fv & footer dec */


.fv-dec{
	display: block;
	position: absolute;
	width: 25vw;
	aspect-ratio: 1/1;
	z-index: 3;
}

.r-t {
	background: url("../img/bubble-right.png") no-repeat;
	background-size: cover;
	right: 0;
	top:0;
}


.l-b {
	background: url("../img/bubble-left.png") no-repeat;
	background-size: cover;
	left: 0;
	bottom:0;
}



@media (max-width: 600px) {
	
	.fv-dec{
		width: 40vw;
	}
	
}
	

/* fv & footer dec //*/