@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1366px) {
    
    /*page*/
    .page__yield-inner{ max-width: 1024px; }
    .page-breadcrumb{ max-width: 1024px; }
    
    .cont02__concept-page .heading-img{ width: 40%; background-position: 40% 50%; }
    .cont02__concept-page .text-box{ width: 60%; }
    
}

/*=========================================================================================================================*/

@media screen and (max-width:1024px) {
	body.fixed {
		position: fixed;
		width: 100%;
	}
	
	/*段落*/
	.br-sp{ display: block; }
	.br-pc{ display: none; }
    
	/*header*/
	.common-header__right-contents{ display: none; }
    .common-header__tablet-menu{ 
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        align-items: center;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
    }
    .menu-guide-text{  }
	.head-burgermenu{ display: flex; transition: .7s; }
    
	
	/*header-nav-mobile*/
	.header-nav-mobile{
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		margin: 0;
        padding: 80px 15px 15px 15px;
		background: rgba(10,10,10,.8);
		/*background: #151617;*/
		top: 0;
		right: 0;
		/*transform: translateX(100%);*/
        opacity: 0;
        visibility: hidden;
		transition: all 0.6s;
		z-index: 2000;
	}
	.header-nav-mobile.open{
		opacity: 1;
        visibility: visible;
	}
	.fast-navmenu{
		padding: 15px;
		color: #595757;
		font-size: 130%;
        font-weight: 800;
        text-align: center;
        position: relative;
	}
    .fast-navmenu::after{
        content: '';
        width: 20px;
        height: 1px;
        background: #6b6f7b;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
	.fast-navmenu a{ color: #fff; text-decoration: none; }
	.fast-navmenu.pulldown{ position: relative; padding-left: 2.5em; }
	.fast-navmenu.pulldown::before{
		content: '';
		position: absolute;
		top: 45%;
		left: 10px;
		border: 8px solid transparent;
		border-top: 8px solid #666;
		width: 0;
		height: 0;
	}
	.pulldown-btn{
		width: 50px;
		background: #0E7C3D;
	}
	.middle-menu{
		width: 100%;
		background: #595757;
		margin: 0;
		padding: 0;
		display: none;
	}
	.middle-menu li{ list-style: none; }
	.middle-menu li a{ 
		display: block;
		padding: 15px 15px 15px 2em;
		color: #fff;
		border-bottom: 1px solid #666;
		position: relative;
	}
	.middle-menu li a::before{
		content: '';
		position: absolute;
		top: 40%;
		left: 15px;
		border: 5px solid transparent;
		border-left: 5px solid #ccc;
		width: 0;
		height: 0;
	}
	.ex-links{
		width: 95%;
		margin: 30px auto 0;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
	}
	.ex-links .fast-navmenu{ 
		width: 49%;
		background: #ee7523;
		padding: 15px;
		text-align: center;
		border-radius: 5px;
	}
	.ex-links .fast-navmenu:last-child{ background: #e94b19; }
	.ex-links .fast-navmenu a{ color: #fff; }
    
    .comon-header__logo{ margin: 0 auto; background: rgba(255,255,255,.5); padding: 15px; }
    
    
    /*top*/
    #fadeslider{ margin-top: /*-185px*/0; height: 650px; }
    ul.carousel-list li a:hover .left{ opacity: 1; }
    .common_read-morebtn:hover{ color: #fff; }
    .common_read-morebtn:hover::before { transform-origin: right top; transform: scale(0, 1); }
    .common_read-morebtn:hover::after{ background: #fff; }
    
    
    /*page*/
    .page__yield-inner{ max-width: 768px; }
    .page-breadcrumb{ max-width: 768px; }
    
    .cont02__concept-page{ flex-direction: column; }
    
    .menu-table-container .text-box{ padding-right: 30px; }
    .cont02__concept-page .text-box{ width: 100%; padding: 90px 45px; }
    .cont02__concept-page .heading-img{ width: 100%; padding-top: 50%; }
    
    .page__yield-inner.menu-page section.cont-flex-box{ flex-direction: column; }
    .menu-page__dllist-left-container,.menu-page__dllist-right-container{ width: 100%; padding: 0; }
    .menu-page__dllist-right-container{ margin-top: 30px; }
    .menu-page__dllist-left-container::after{ display: none; }
    .page__yield-inner.concept-page .cont02__concept-page p{ padding: 0; letter-spacing: .1em; }
    
    .menu-table-container.cutmenu .text-box::before{ right: 0; }
    .menu-table-container.colormenu .text-box::before{ right: 0; }
    .menu-table-container.permmenu .text-box::before{ right: 0; }
    .menu-table-container.hairsetmenu .text-box::before{ right: 0; }
    .menu-table-container.headspamenu .text-box::before{ right: 0; }
    .menu-table-container.makeupmenu .text-box::before{ right: 0; }
    .menu-table-container.dressingmenu .text-box::before{ right: 0; }
    
    
    ul.item-list.image-list{ padding: 0; }
    ul.item-list.image-list h3.item-name{ font-size: 100%; text-align: left; padding-left: 50px; }
    ul.item-list.image-list h3.item-name span.space{ padding-left: 5px; font-size: 85%; }
    ul.item-list.image-list li h3.item-name::before{ top: 0; left: 18px; }
    ul.item-list.image-list p.read{ line-height: 1.6em; }

	ul.items-list__flex li:hover{ opacity: 1; margin-top: 0; }
    h4.sub-title{ margin-left: 0; }
	
	/* 20240726 */
	.dressing-linkBtn { width: 80%; }
	.dressing-linkBtn a::before { left: 10%; }
	
	.packBox01__flexBox .Box02 { font-size: 1.7rem; }
	
	.dressing-packBox01 .heading01 { font-size: 2.5rem; }
	.dressing-packBox01 .heading02 { font-size: 2.0rem; }
	
	.packBox02__flexBox .Box02 .Box02__item01 { padding: 0.5em; font-size: 1.2rem; }
	.packBox02__flexBox .Box02 .Box02__item03 {
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		border-top: 20px solid #F00;
		margin: 10px auto 0;
	}
	.packBox02__flexBox .Box02 .Box02__item04 { font-size: 3.2rem; }
	
	.packBox03__flexBox .Box02 .Box02__item01 { width: 100%; }
	.packBox03__flexBox .Box02 .Box02__item02 { width: 100%; padding: 0.5em 1em; margin-top: 20px; }

/*=========================================================================================================================*/

@media screen and (max-width:768px) {
    
    body{ font-size: 90%; }
    
    /*top*/
    ul.carousel-list li a{ flex-direction: column; }
    ul.carousel-list li a .left, ul.carousel-list li a .right{ width: 100%; padding: 10px; text-align: center; justify-content: center; }
    ul.carousel-list li a .right p{ text-align: center; }
    
    .top-contents02 section.contents02__whiteback-text-box{ width: 80%; }
    .top-contents03__calendar-container section.contents03__whiteback-text-box{ width: 80%; }
    
    
    /*page*/
    .page__yield-inner{ width: 80%; }
    .page-breadcrumb{ width: 80%; }
    .page__heading-title{ height: 350px; }
    
    ul.concept-page__profile-ulist{ padding: 0; }
    
    .menu-table-container{ flex-direction: column; }
    .menu-table-container .img{ display: none; }
    .menu-table-container .img__tablet-sizing{ display: block; }
    .menu-table-container .text-box{ width: 100%; }
    
    .page__yield-inner.concept-page h2::after { width: 20%; right: -22%; }
    
    section.cont01 .row-cont { flex-direction: column; }
    section.cont01 .row-cont .row-cont__left, section.cont01 .row-cont .row-cont__right { width: 100%; }
    section.cont01 .row-cont .row-cont__right dl.about-page__profile-dlist { margin: 0; margin-top: 30px; }
    
    /*contact*/
    .toi_box01 textarea { max-width: 100%; }
    .toi_box01 input { max-width: 100%; }
    .toi_td1::after { width: 50px; right: -70px; }
    
    /*footer*/
    .common-footer__glo-menu { width: 80%; margin: 0 auto; }
    
    /*202009*/
    h3.category-title::after { width: 100px; right: -110px; }
    ul.item-list.image-list li { width: 50%; }
    .page__yield-inner.menu-page .flex-cont { flex-direction: column; }
    .page__yield-inner.menu-page .flex-cont .text-box { width: 100%; }
	.page__yield-inner.menu-page .flex-cont .img { width: 65%; margin: 0 auto; }
		
	/* 20240726 */
	.dressing-linkBtn a::before { left: 15%; }
	
	.packBox01__flexBox .Box02 { font-size: 1.4rem; }
	
	.dressing-packBox01 .heading01 { font-size: 2.0rem; }
	.dressing-packBox01 .heading02 { font-size: 1.7rem; margin-top: 5px; }
	
	.packBox02__flexBox .Box02 .Box02__item01 { font-size: 1rem; border-radius: 5px; }
	.packBox02__flexBox .Box02 .Box02__item02 { margin-top: 10px; font-size: 1.0rem; }
	.packBox02__flexBox .Box02 .Box02__item04 { font-size: 2.8rem; }
	
	.packBox03__flexBox .Box02 .Box02__item01 .item01__txt02 { margin: 5px 0 0 0; }
	.packBox03__flexBox .Box02 .Box02__item02 { padding: 0.5em; font-size: 1rem; }
	
}

/*=========================================================================================================================*/

@media screen and (max-width:480px) {
	
	h2.Rr { font-size: 1rem; }
	h3.Rr { font-size: 2rem; }
    
    /*header*/
    .common-header__tablet-menu{ padding: 5px; }
    
    /*top*/
    #fadeslider{ height: 320px; margin: 0 auto; }
    
    .top-contents01 h1.contents-title{ margin-bottom: 30px; width: 85%; font-size: 240%; }
    .top-contents02 h1.contents-title{ font-size: 280%; }
    .top-contents03__calendar-container h1.contents-title{ font-size: 280%; }
    .top-contents03__calendar-container section.contents03__whiteback-text-box{ width: 85%; }
    .top-contents03__calendar-container .calendar-cont{ padding: 0 15px; }
    
    ul.carousel-list li a .left{ height: 250px; }
    
    .top-contents02 section.contents02__whiteback-text-box{ padding: 30px 15px; margin: 90px auto; }
    
    .top-contents03 .inner{ flex-direction: column; }
    .top-contents03 .contents03__google-map, .top-contents03 .contents03__add-textbox{ width: 100%; }
    .contents03__google-map{ height: 380px; }
    
    
    /*footer*/
    .common-footer__glo-menu{ flex-direction: column; }
    .common-footer__glo-menu li{ width: 100%; border: none; }
    .common-footer__glo-menu li:last-child{ border: none; }
    
    
    /*page*/
    .page__yield-inner{ width: 90%; font-size: 90%; }
    .page-breadcrumb{ width: 90%; }
    
    .page__heading-title{ height: 200px; }
    .page__heading-title h1 span{ font-size: 200%; }
    
    .common_read-morebtn{ width: auto; max-width: 200px; font-size: 85%; }
    .page__yield-inner h2{ font-size: 300%; }
    dl.about-page__profile-dlist{ margin: 90px auto 0; width: 85%; }
    dl.about-page__profile-dlist dd span{ display: block; }
    
    section.cont01 .row-cont .row-cont__left, section.cont01 .row-cont .row-cont__right{ width: 85%; margin: 0 auto; }
    section.cont01 .row-cont .row-cont__right dl.about-page__profile-dlist{ width: 100%; margin: 0; padding-top: 30px; }
    section.cont01 .row-cont{ flex-direction: column; }
    
    .page__yield-inner h2.menu-heading::after { width: 120px; right: -140px; }
    .menu-table-container .text-box,.page__yield-inner.menu-page section.cont-flex-box { padding: 30px 15px 60px; }
    dl.menu-page__charge-dlist dt { float: none; }
    dl.menu-page__charge-dlist dt span { display: block; }
    dl.menu-page__charge-dlist dd { padding-bottom: 5px; }
    
    .page__yield-inner.concept-page h2 { font-size: 140%; }
    .cont02__concept-page::before { font-size: 330%; }
    .cont02__concept-page .text-box { padding: 60px 15px; }
    
    .toi_box01 { padding: 30px 15px; }
    .toi_td1::after { display: none; }
    
    h3.category-title::after { display: none; }
    
    ul.item-list.image-list li h3.item-name::before { top: 5px; }
    ul.item-list.image-list.four-column li { width: 50%; }
    ul.items-list__flex { padding: 30px 0; width: 100%; }
    .page__yield-inner.menu-page .flex-cont .img { width: 85%; margin: 0 auto; }
    
    h4.tel-head { font-size: 240%; }
    h4.tel-head span.small { }
    
	h3.category-title { font-size: 180%; padding-left: 45px; }
	h3.category-title#wasou::before,
	h3.category-title#hakama::before,
	h3.category-title#shitigosan-kimono::before,
	h3.category-title#shitigosan-hakama::before { width: 40px; height: 40px; top: -5px; }
	
    ul.item-list.image-list h3.item-name { padding-left: 20px; }
    ul.item-list.image-list li h3.item-name::after { width: 5px; height: 5px; border-radius: 2px; border: 2px solid #aeb3bf; left: 5px; }
	.page__yield-inner.menu-items h2 { font-size: 140%; }
	.page__yield-inner p.pick { font-size: 105%; }
    
	/* 20240726 */
	.dressing-linkBtn { width: 100%; margin: 0 auto 30px; }
	.dressing-linkBtn a { padding: 1em; font-size: 1rem; }
	.dressing-linkBtn a::before { top: 18px; left: 10%; width: 10px; height: 10px; }
	
	.packBox01__flexBox .Box02 { font-size: 1rem; }
	
	.dressing-packBox01 .heading01 { font-size: 1.3rem; }
	.dressing-packBox01 .heading02 { font-size: 1.1rem; }
	
	.dressing-packBox02 .packBox02__flexBox { flex-direction: column; margin-top: 20px; }
	
	.packBox02__flexBox .Box01 { width: 50%; }
	.packBox02__flexBox .Box01 img { border-radius: 5px; }
	.packBox02__flexBox .Box02 { width: 90%; margin-top: 15px; }
	
	.packBox02__flexBox .Box02 .Box02__item01 { font-size: 0.85rem; }
	.packBox02__flexBox .Box02 .Box02__item02 { font-size: 0.85rem; }
	.packBox02__flexBox .Box02 .Box02__item02 span { font-size: 0.75rem; }
	.packBox02__flexBox .Box02 .Box02__item04 { font-size: 1.75rem; }
	.packBox02__flexBox .Box02 .Box02__item04 span { font-size: 0.9rem; }
	
	.dressing-packBox03 { margin-bottom: 30px; }
	.packBox03__flexBox .Box02 .Box02__item01 .item01__txt01 { font-size: 1rem; }
	.packBox03__flexBox .Box02 .Box02__item02 { font-size: 0.85rem; text-align: left; }
	.packBox03__flexBox .Box02 .Box02__item02 br { display: none; }
	.packBox03__flexBox .Box02 .Box02__item03 { margin-top: 15px; font-size: 1rem; border-radius: 5px; }
	.packBox03__item04 { margin-top: 20px; font-size: 1rem; }
	
}

/*=========================================================================================================================*/

@media screen and (max-width:364px) {}

/*=========================================================================================================================*/

@media screen and (max-width:320px) {}

/*=========================================================================================================================*/