@charset "utf-8";
/* CSS Document */
/*------------------------------
【1】reset
------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, header, hgroup, menu, nav, section, summary, time, mark, audio, video,p {
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
}
li {
	list-style: none;
}
a,a:hover {
	text-decoration: none;
}
main {
	background: #fff;
	color: #555;
	font-family: noto sans jp, sans-serif;
	line-height: 1.8;
}
.block {
	display: block;
}
@media (min-width: 769px){
.br_sp {
	display: none;	
	}
}
@media (max-width: 768px){
.br_pc {
	display: none;	
	}
}
main article {
	width: 100%;
	margin: 0 auto;
} 
main article h2 {
	color: #ff6472;
	font-size: 20px;
	font-weight: normal;
	text-align: center;
}
main article h2 span {
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 32px;
	letter-spacing: 2px;
	text-shadow: 1px 1px 0 #ffb9c0, -1px -1px 0 #ffb9c0, -1px 1px 0 #ffb9c0, 1px -1px 0 #ffb9c0, 0px 1px 0 #ffb9c0, 0 -1px 0 #ffb9c0, -1px 0 0 #ffb9c0, 1px 0 0 #ffb9c0;
}
@media (max-width: 480px){
main article h2 {
	font-size: 18px;
}
main article h2 span {
	font-size: 1.8rem;
}
}
/*fadein*/
.boxfade {
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s;
  transform: translateY(150px);
}
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/*------------------------------
#kvArea
------------------------------*/ 
@media (min-width: 1025px){
#kvArea h1 {
	margin: 0 auto;
	max-width: 1196px;
}
}
@media (max-width: 1024px){
#kvArea h1 img {
	width: 100%;
}
}
/*------------------------------
#intro
------------------------------*/ 
#intro {
	padding: 100px 0;
}
.catch {
	font-size: 1.3rem;
	text-align: center;
	padding: 40px 0 0;
}
.catch p:first-of-type {
	padding-bottom: 40px;
}
.catch p:nth-of-type(2) {
	color: #ff6472;
	font-size: 130%;
	font-weight: bold;
	padding-bottom: 10px;
}
.catch p:nth-of-type(3) {
	font-size: 80%;
}
.bnr_btn {
	color: #009fbd;
	font-size: 120%;
	margin: 120px auto 0;
	max-width: 980px;
}
.bnr_btn a{
	margin: 0 auto;
	text-align: center;
	display: block;
}
.bnr_btn a img {
	vertical-align: bottom;
	width: 100%;
}
.bnr_btn a:hover {
  transform: scale(0.95,0.95);
}
@media screen and (max-width: 1024px) {
.bnr_btn{
	margin: 10% 3% 0;
}
.bnr_btn a img {
	width: 100%;
}
	}
@media screen and (max-width: 600px) {
#intro {
    padding: 12% 3% 6%;
	}
.catch {
    font-size: 1.1rem;
	}
.catch p:nth-of-type(2) {
	font-size: 120%;
}
.bnr_btn {
	font-size: 105%;
}
}
/*------------------------------
#recommend
------------------------------*/ 
#recommend {
	background: #f5f5f5;
	padding: 130px 0;
}
#recommend ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	max-width: 1152px;
	margin: 40px auto 0;
}
#recommend li {
	width: 45%;	
}
#recommend li a { 
	background: #fff;
	box-shadow: 5px 5px 0 #e8eff1;
	color: #666;
	display: block;
	border-radius: 30px;
	padding: 1.3rem;
	text-align: center;
}
#recommend li a img {
	border-radius: 20px;
	width: 100%;
	margin-bottom: 0.5em;
}
#recommend li a:hover {
  transform: scale(0.98,0.98);
}

@media screen and (max-width: 821px) {
#recommend li a {
    font-size: 0.8rem;
	}
}
@media screen and (max-width: 600px) {
#recommend {
    padding: 12% 3% 8%;
	}
#recommend li {
    width: 90%;
    margin-bottom: 8%;
	}
#recommend li a {
	font-size: 1.0rem;
	text-align: left;
    }
	
}
/*------------------------------
#shops
------------------------------*/ 
#shops {
	background: #ededed;
	padding: 130px 0;
}
#shops li{
	background: #fff;
	border-radius: 20px;
	box-shadow: 3px 2px 4px #ddd;
	color: #333;
	display: flex;
}
#shops li a{
	color: #333;
	display: block;
	padding: 16px;
}
@media screen and (max-width: 600px) {
#shops {
	padding: 12% 3% 6%;
}
#shops li a{
	padding: 3% 4% 3% 0;
	display: flex;
	align-items: center;
	font-size: 0.9rem;
	}
}
/*------------------------------
#present
------------------------------*/ 
#present {
	padding: 130px 0;
}
.columns ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1152px;
    margin: 40px auto 0;
}
.columns li {
	width: 28.5%;	
}	
.columns li a:hover{
	opacity: 0.6;	
}
.columns li img {
	margin-bottom: 0.5em;
	width: 100%;
}
@media screen and (max-width: 1024px) {
.columns ul {
    margin: 40px 20px 0;
}
.columns li {
	width: 30%;	
}
	}
@media screen and (min-width: 601px) {
#present .columns ul {
    border: 2px solid #e8eff1;
    border-radius: 30px;
    padding: 60px 10px;
    background: #f9feff;
    box-shadow: 4px 4px 0px #e8eff1;
}
	}
@media screen and (max-width: 600px) {
#present {
    padding: 12% 3% 2%;
	}
    .columns ul {
        margin: 10% 3% 0;
    }
.columns li {
    width: 100%;
	margin-bottom: 6%;
	display: flex;
	align-items: center;
	font-size: 0.9rem;
}
.columns li:last-child {
	margin-bottom: 12%;
}
.columns li img{
	width: 30%;
	text-align: center;
	margin-bottom: 0;
	margin-right: 0.5em;
}	

}	
	
@media screen and (max-width: 480px) {
#present ul {
    margin: 40px 5px 0;
}
}
/*------------------------------
#fitting
------------------------------*/ 
/* self_wrapのpadding変更　2026/03/10 */
#self_wrap {
  width: 100%;
  padding: 130px 0 80px;
  background: #efecde;
  margin: 0 auto; 
  box-sizing: border-box;
}
#fitting,#reservation {
	max-width: 1152px;
	margin: 0 auto;
}

#membership {
	max-width: 1152px;
	margin: 0 auto;
}


.sec2 section{
	text-align: center;
}
.sec2 section h2 {
	margin-bottom: 40px;
}

.sec2__innar {
	background: #fff;
	max-width: 1100px;
	margin: 0 auto;
	padding: 80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-radius: 30px;
}
.sec2__l {
	width: 45%; 
}
.sec2__r {
	width: 45%;
	margin-left: 10%; 
}

@media (max-width: 1024px){
.sec2__innar {
    margin: 0 auto;
    padding: 10% 5%;
    margin: 0 4%;
}
	}
@media screen and (min-width: 901px) {
.sec2 section{
	width: 900px;
	margin: 0 auto 80px;
	}
}
@media screen and (max-width: 821px) {

#self_wrap {
	padding: 0 0 10%;
}
.sec2__innar {
	padding: 10% 6%;
	margin: 4% 4% 0;
}
.sec2 {
  width: 100%;
  display: block;
  padding: 130px 0 0; 
	} 	
#membership {
    padding: 0 0 16%;
}
	
}

@media screen and (max-width: 768px) {
#fitting,#reservation {
	margin: 0 auto;
}
.sec2__innar {
	display: block;
}
  .sec2__l {
	margin: 0 0 30px;
	width: 100%; } 
}
.sec2__l h2 {
  font-size: 30px;
  line-height: 40px;
  font-weight: bold;
  margin: 0 0 16px;
  text-align: left;
	}
  @media screen and (max-width: 768px) {
	.sec2__l h2 {
	  font-size: 28px;
	  line-height: 36px; }
}
.sec2__l p {
  font-size: 14px;
  line-height: 26px;
  color: #222222;
  margin: 0 0 25px; 
}

@media screen and (max-width: 768px) {
  .sec2__r {
	margin: 0 0 30px;
	width: 100%; }
}
.sec.sec2 img {
    max-width: 100%;
    height: auto;
}
.sec2__r img {
  margin: 0 0 37px;
  display: block; }
	
  @media screen and (max-width: 768px) {
	.sec2__r img {
	  margin: 0 0 30px; } 
}
.sec2__r li {
  padding: 15px 0 15px;
  border-bottom: 1px dotted #222; }
.sec2__r .p1 {
  font-size: 18px;
  color: #ff6472;
  font-weight: bold;
  margin: 0 0 10px; }
.sec2__r .p2 {
  font-size: 14px;
  line-height: 24px;
  color: #333; 
}
  .sec2__r .p2 span {
	font-size: 12px;
	display: block;
	line-height: 20px;
	margin: 5px 0 0; 
}
	
/*------------------------------
#self_wrap,#reservation,#membership
------------------------------*/ 
#reservation h2,#membership h2 {
	font-size: 24px;
	text-align: center;
	color: #ff6472;
	margin-bottom: 40px;
}
#membership p:nth-of-type(3) {
	margin-top: 40px;
}
#self_wrap p {
	font-size: 18px;
}
#self_wrap .cvBtn a{
	color: #fff;
    margin: 60px auto 0;
    padding: 1.0rem 5px;
	text-align: center;
    width: 35%;
    display: block;
    background: #ff6472;
    border-radius: 50px;
    border: 3px solid #ff6472;
}
#self_wrap .cvBtn a:hover {
  transform: scale(0.95,0.95);
}
@media screen and (min-width: 768px) {
  #reservation p,#membership p {
	  font-size: 18px;
	  line-height: 2;
	  text-align: center;
	  white-space: pre;
  } 
#self_wrap .cvBtn a {
    width: 55%;
	}
}
@media screen and (max-width: 768px) {
#self_wrap p.cvBtn {
	text-align: center;
	}
#self_wrap .cvBtn a {
    width: 90%;
	}
#reservation {
    padding: 80px 0;
	}
}

@media screen and (max-width: 600px) {
#self_wrap {
     padding: 6% 3% 12%;
    }
.sec2 {
	padding: 8% 0 0;
    }
.sec2__innar {
	margin: 6% 0 0;
    }
#self_wrap p {
    font-size: 1.0rem;
    text-align: left;
	}
}

@media screen and (max-width: 480px) {
    .sec2__l h2 {
        font-size: 20px;
    }
}	
@media screen and (max-width: 480px) {
#self_wrap .cvBtn a {
        font-size: 4.3vw;
    }
}
}