@charset "utf-8";
/*
=======================================
  main
=======================================
*/


.main_img img{
	width:100%;
}

.main_img p{
	text-align:center;
	color:#666;
	letter-spacing:0.2rem;
	font-size:80%;
	padding:1rem;
}
@media screen and (max-width: 600px) {
.main_img p{
	letter-spacing:0.1rem;
	font-size:70%;
}
}

/*
=======================================
  massage
=======================================
*/
.massage{
	padding: 4rem 0 6rem;
	text-align:center;
}
.massage h2 {
	padding: 20px 25px;
	position: relative;
	font-size:200%;
	display:inline-block;
	letter-spacing:0.2em;
}
.massage h2::before, .massage h2::after {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
}
.massage h2::before {
	border-left: solid 1px #000;
	border-top: solid 1px #000;
	top: 0;
	left: 0;
}
.massage h2::after {
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
	bottom: 0;
	right: 0;
}
.massage p{
	padding:2.5rem 0;
}
@media screen and (max-width: 600px) {
.massage{
	padding: 2rem 0 4rem;
}
.massage h2 {
	font-size:140%;
	padding: 15px 20px;
}
.massage p{
	padding:1.5rem 0;
	text-align:left;
}
}




/*
=======================================
  concept/profile
=======================================
*/
.concept,
.profile{
	margin-right:15%;
}
.concept h3,
.profile h3{
  float: right;
}
.concept .box,
.profile .box{
	right:0;
}
@media screen and (max-width: 900px) {
.concept,
.profile{
	margin-right:5%;
}	
}


/*
=======================================
  beliet
=======================================
*/
.beliet{
	margin-left: 15%;
}
.beliet h3{
  float: left;
}
.beliet .box{
	left:0;
}

@media screen and (max-width: 900px) {
.beliet{
	margin-left: 5%;
}	
}


/*
=======================================
  concept/beliet/profile　共通
=======================================
*/
.profile,
.concept,
.beliet{
	position:relative;
	width: 85%;
	padding-bottom: 10rem;
	margin-bottom: 2rem;
}
.profile h3,
.concept h3,
.beliet h3{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1.4vw;
  letter-spacing: 0.1em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  width: 6%;
  padding: 0 4% 0 0;
}
@media screen and (max-width:1200px) {
.profile h3,
.concept h3,
.beliet h3{
  font-size: 1.8vw;
  width: 8%;
    padding: 0 2% 0 0;
    line-height: 1.5;
}
}
@media screen and (max-width:900px) {
.profile,
.concept,
.beliet{
	width: 95%;
	margin-bottom: 8rem;
}
.profile h3,
.concept h3,
.beliet h3{
  font-size: 120%;
}
.profile h3,
.concept h3{
	padding: 0;
}
}
@media screen and (max-width:600px) {
.profile,
.concept,
.beliet{
	margin:0 0 5rem;
	padding-bottom: 0;
	width: 100%;
}

.beliet{
	margin-top: 6rem;	
}
}

.profile .box,
.concept .box,
.beliet .box{
	background:#fff;
	opacity: 0.9;
	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 18%);
	padding: 25px;
	position:absolute;
	bottom: 5rem;
}
@media screen and (max-width:900px) {
.profile .box,
.concept .box,
.beliet .box{
	bottom: 0;
}
}
@media screen and (max-width:600px) {
.profile .box,
.concept .box,
.beliet .box{
	position:relative;
	margin:0 5%;
}
}
.profile .images,
.beliet .images,
.concept .images{
	width:90%;
}
@media screen and (max-width: 600px) {
.profile .images,
.beliet .images,
.concept .images{
  width: 100%;
}
.profile h3,
.concept h3,
.beliet h3{
  width: 90%;
  -ms-writing-mode:horizontal-tb;
  writing-mode:horizontal-tb;
	padding:5%;
	float:none;
}
}


.profile .box a,
.concept .box a,
.beliet .box a{
	display:block;
	padding:1rem 50px 0 0;
	text-align:right;
	font-size:120%;
	color:#f0855d;
}


/*矢印が右に移動する*/
.arrow_orange{
    /*矢印と下線の基点とするためrelativeを指定*/
    position: relative;
    /*形状*/
    display: inline-block;
    padding: 0 20px;
    color: #f0855d;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.arrow_orange::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    bottom:-8px;
    right:0;
    /*下線の形状*/    
    width: 230px;
    height: 1px;
  background:#f0855d;
    /*アニメーションの指定*/
    transition: all .3s;
}

.arrow_orange::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
    background:#f0855d;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.arrow_orange:hover::before{
    right:-15px;
}

.arrow_orange:hover::after{
    right:-15px;
}



.profile .decoration_txt,
.beliet .decoration_txt,
.concept .decoration_txt{
	position:absolute;
	top:-50px;
	left:20%;
}
.to_details{
	position:absolute;
	bottom:10px;
	right: 50px;
	z-index:1;
}
@media screen and (max-width: 600px) {
.profile .decoration_txt,
.beliet .decoration_txt,
.concept .decoration_txt,
#gallery .decoration_txt{
	width:140px;
	top:-40px;
}
.profile .decoration_txt,
.beliet .decoration_txt,
.concept .decoration_txt{
	left:10%;
}
.to_details{
	right: 20px;
}
}




/*
=======================================
  event
=======================================
*/


#event{
	background:#f1f3f6;
	padding:5rem 0;
}

#event .bl{
	background:#fff;
	padding: 2rem 5%;
}
#event .bl img{
	width:100%;
}
#event .bl h3{
	font-family: 'Noto Serif JP', serif;
	padding:1rem 0;
}
#event .bl dl{
	border-top:1px solid #222;
	padding:13px 0;
	overflow:hidden;
	margin-right:5%;
}
#event .bl dl:last-child{
	margin:none;
}
#event .bl dt{
	background:#222;
	color:#fff;
	width:45px;
	text-align:center;
	padding:0 0 2px;
	float:left;
}
#event .bl dd{
	margin-left:55px;
	padding:0;
}

#event .soon{
	text-align:center;
    font-size: 150%;
    letter-spacing: 0.1em;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}


@media screen and (max-width: 600px) {
#event{
	padding:3rem 0;
}
}


/*
=======================================
  spec
=======================================
*/


#spec{
	padding:5rem 0;
}
#spec p{
	text-align:center;
	padding-bottom:3rem;
}	
#spec img{
	width:100%;
}
#spec .spec_img{
	overflow:hidden;
}
#spec .spec_img li{
	display: inline-block;
	width:25%;
	float:left;
	position:relative;
	overflow: hidden;
}
#spec .spec_img li img{
	display: block;
	transition-duration: 0.6s;
	width: 100%;
}
#spec .spec_img li img:hover {
transform: scale(1.2);
transition-duration: 0.6s;
opacity:0.7;
}
#spec .spec_img li strong{
	display: block;
	position:absolute;
	background:#fff;
	padding: 10px;
	text-align:center;
	width: 100px;
	bottom:0;
	right:0;
	letter-spacing: 0.2rem;
	font-size: 110%;
	font-weight: 500;
}

#spec p.txt{
	text-align:center;
	padding-top:3rem;
}

@media screen and (max-width: 600px) {
#spec{
	padding:3rem 0;
}
#spec .spec_img li{
	width:50%;
}
}



/*
=======================================
  gallery
=======================================
*/

#gallery{
	background:#f1f3f6;
	padding:5rem 0;
}

#gallery .decoration_txt{
	position:absolute;
	top:-7rem;
	left:0;
}
#gallery p{
	text-align:center;
	padding-bottom:3rem;
}
#gallery .slick-list li a{
	overflow: hidden;
	display:block;
}
#gallery .slick-list li img{
	width:100%;
	display: block;
	transition-duration: 0.6s;
}
#gallery .slick-list li img:hover {
transform: scale(1.2);
transition-duration: 0.6s;
}
#gallery .slick-list li dt{
	padding:20px 0 10px; 
}
#gallery .slick-list li dd{
	padding:10px 0;
}
@media screen and (max-width: 600px) {
#gallery{
	padding:3rem 0;
}
#gallery .decoration_txt{
	top: -4.5rem;
}
}

/*
=======================================
  youtube
=======================================
*/
#youtube{}


#youtube .youtube_logo{
	text-align:center;	
	padding:5rem 0 2rem;
}
#youtube p{
	text-align:center;	
	padding:0 5% 3rem;
}

#youtube iframe{
	width:100%;
}
#youtube .slick-list li{
	margin:0 8px;
}

@media screen and (max-width: 600px) {
#youtube .youtube_logo{
	padding:3rem 0 2rem;
}
}

/*
=======================================
  news
=======================================
*/

#news{
	padding: 8rem 0 10rem;
}
#news .inner_s{
	padding-bottom:5rem;
}
#news .to_details{
	right:0;
}

#news .news_bl{
	border-bottom:1px solid #222;
}
#news dl{
	border-top:1px solid #222;
	padding: 1rem 0;
}
#news dt{
	width:140px;
	padding: 0 0 0 20px;
	float:left;
	overflow:hidden;
}
#news dd{
	margin-left: 140px;
}
#news dd span{
	background:#727171;
	border-radius:3px;
	padding:0 3px 2px;
	color:#fff;
	margin-left: 10px;
	font-size:85%;
	display: inline-block;
}
@media screen and (max-width: 600px) {
#news{
	padding: 4rem 0 6rem;
}
#news .inner_s{
	padding-bottom:4rem;
}
}
@media screen and (max-width: 500px) {
#news dt{
	width:90%;
	padding: 0 0 0 20px;
	float:none;
}
#news dd{
	margin-left:20px;
	padding-top:10px;
}
}


/*
=======================================
  access
=======================================
*/

#access{
	padding-top:1rem;
	overflow:hidden;
}

#access .txt_area{
	float:left;
	width:40%;
}
#access .txt_area h3{
	font-size: 2.3vw;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
}
#access .txt_area p{
	margin:1rem 0 2rem;
}
#access .txt_area a{
	font-size: 2.3vw;
	display: block;
	font-weight: bold;
	line-height:1.3;
}
#access .txt_area a img{
	margin-right:10px;
}
#access .txt_area strong{
	background:#727171;
	padding:5px 20px;
	color:#fff;
	font-size: 1.3vw;
	font-weight:400;
	font-family: 'Noto Serif JP', serif;
}
#access .txt_area .txt_l{
	font-size: 1.3vw;
}
#access iframe{
	width:50%;
	float:right;
}
@media screen and (max-width: 900px) {
#access .txt_area{
	float:none;
	width:100%;
}
#access iframe{
	width:100%;
	float:none;
}
#access .txt_area a,
#access .txt_area h3{
	font-size: 180%;
}
#access .txt_area strong,
#access .txt_area .txt_l{
	font-size: 120%;
}
}

@media screen and (max-width:600px) {
#access{
	padding-top:0;
}
#access iframe{
	height:350px;
}
}




/*
=======================================
  commercial  2024.5.15追記
  .balloon2 を2024.9.11追記
=======================================
*/

#commercial{
	padding: 0 0 6rem;
	margin: 0 auto;
	max-width: 900px;
}

#commercial .balloon1,
#commercial .balloon2{
  position: relative;
  display: block;
  margin: 1.5em auto;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #000;
  font-size: 150%;
  background-size: 40px 40px;
}
#commercial .balloon1{
  background-image: linear-gradient(
    45deg, 
    #ffeb7c 25%,
    #ffe113 25%, #ffe113 50%,
    #ffeb7c 50%, #ffeb7c 75%,
    #ffe113 75%, #ffe113 100%
  );
}
#commercial .balloon2{
  background-image: linear-gradient(
    45deg, 
    #87c357 25%,
    #5cb531 25%, #5cb531 50%,
    #87c357 50%, #87c357 75%,
    #5cb531 75%, #5cb531 100%
  );
}

#commercial .balloon1:before,
#commercial .balloon2:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
}
#commercial .balloon1:before{
  border-top: 15px solid #ffe113;
}
#commercial .balloon2:before{
  border-top: 15px solid #5cb531;
}

#commercial .balloon1 p,
#commercial .balloon2 p{
  position: relative;
  display: inline-block;
  padding: 0 85px;
}

#commercial .balloon1 p:before,
#commercial .balloon2 p:before{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 84px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
#commercial .balloon1 p:after,
#commercial .balloon2 p:after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 84px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#commercial .balloon1 p:before,
#commercial .balloon2 p:before{
  left:0;
}
#commercial .balloon1 p:after,
#commercial .balloon2 p:after{
  right: 0;
}

@media screen and (max-width: 600px) {
#commercial .balloon1,#commercial .balloon2 {
	font-size: 120%;
}
#commercial .balloon1 p:after,
#commercial .balloon2 p:after,
#commercial .balloon1 p:before,
#commercial .balloon2 p:before{
	content:none;
}
#commercial .balloon1 p,
#commercial .balloon2 p{
  padding: 0;
}
}

#commercial .btnn{
	position:relative;
	padding-top: 20px;
}
#commercial a{
	position:absolute;
	bottom:-1.5rem;
	right: 28%;
	background: #ffeb7c;	
	padding:8px 70px 8px 50px;
	font-size: 150%;
	letter-spacing: 0.1em;
	font-family: 'Noto Serif JP', serif;
}
#commercial a:hover{
	background:#ffe113;
}
#commercial a.green{background: #d8e698;}
#commercial a.green:hover{background:#87c357;}

#commercial a::before{
	content: "";
    display: inline-block;
	position: absolute;
	right:20px;
	top:35%;
	height: 17px;
	width: 35px;
    background: url(../lib_img/arrow_right.png) no-repeat right;
    /*アニメーションの指定*/
    transition: all .3s;
}








#commercial a:hover::before{
	right:10px;
}
@media screen and (max-width: 600px) {
#commercial a{
	right:0;
	width:100%;
	padding:5px 0;
	text-align:center;
	font-size: 120%;
}
#commercial a::before{
	top:25%;
	right:10px;
}
}

#commercial video{
	max-width:900px;
	width: 100%;
}


.video{
	aspect-ratio: 16 / 9;
	width:100%;
	max-width:900px;
	margin:auto;
}
.video iframe{
  width: 100%;
  height: 100%;
}