@charset "utf-8";

/* 共通
------------------------------------------------------------*/

/* トップページ */
#top_catch {
margin: 2rem auto 3rem auto;
width: 98rem;
clear: both;
}
.top_cnt {
width: 88rem;
margin: 0 auto;
color: #000;
font-size: 1.6rem;
}
#top_icon {
width: 76rem;
margin: 6rem auto;
display: flex;
justify-content: space-between;
}
#top_icon a {
display: block;
width: 7rem;
text-align: center;
transition: 0.3s;
}
#top_icon p {
font-size: 1.3rem;
margin-top: 1.6rem;
}
#icc1 {
color: #4a8598;
}
#icc2 {
color: #95bb85;
}
#icc3 {
color: #fdd45f;
}
#icc4 {
color: #a3722e;
}
#icc5 {
color: #dd762b;
}
#news {
width: 88rem;
margin: 0 auto;
}
#news h2 {
color: #fdd45f;
background: url(../img/top/back_read1.png) no-repeat;
background-position: 0 0.8rem;
width: 21rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#news p {
font-size: 1.2rem;
line-height: 2.2rem;
width: 60rem;
margin-bottom: 2rem;
}
#top_ftr {
width: 98rem;
margin: 5rem auto;
}
#top_about {
width: 88rem;
margin: 0 auto;
}
#top_about h2 {
color: #fdd45f;
background: url(../img/top/back_read2.png) no-repeat;
background-position: 0 0.8rem;
width: 26.7rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#top_about p {
background: url(../img/logo_ftr.png) no-repeat;
background-position: 0 1em;
padding-left: 19rem;
}
.btn_ani {
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
margin: 10px 0 0 0;
}
.btn_ani:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}

/* メニュー */
.price {
border-bottom: 0.2rem solid #fbc932;
padding-bottom: 1.6rem;
margin-bottom: 3rem;
}
.price:last-child {
border-bottom: none;
}
.price div {
padding: 1rem 3rem 0 4.8rem;
}
.price h2 {
color: #000;
font-size: 1.8rem;
font-weight: bold;
background: url(../img/menu/back_menu.png) no-repeat;
background-position: 0 0.4rem;
padding-left: 5rem;
}
#main_pr {
background: url(../img/menu/logo_menu.png) no-repeat;
background-position: 64rem 0;
}
.tb_price {
text-align: center;
font-size: 1.6rem;
margin: 1rem 0;
line-height: 2.2rem;
}
.tb_price th {
padding: 0 1rem;
color: #fbc932;
}
.tb_price td {
padding: 0 1rem;
}
.tblf {
text-align: left;
}

/* 採用情報 */
#rec_h {
font-size: 2.2rem;
margin: 4rem 0;
font-weight: bold;
color: #000;
}
#rec_tb {
width: 100%;
}
#rec_tb th {
vertical-align: top;
width: 14%;
text-align: left;
font-weight: normal;
padding: 1rem 0;
color: #000;
}
#rec_tb td {
vertical-align: top;
padding: 1rem 0;
}

/* サロン */
#salon {
overflow: hidden;
}
#salon img {
float: left;
}
#salon div {
float: right;
width: 60rem;
}
#salon div h2 {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
#salon div p {
margin-bottom: 1.4rem;
line-height: 2rem;
}
#salon div em {
display: block;
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 0.4rem;
padding-top: 1rem;
}
.street {
height: 24rem;
margin: 3rem 0;
background: #ccc;
}

/* お問い合わせ */
#policy {
background: #f5f5f5;
padding:20px;
color:#333;
margin: 40px 0;
}
#policy h3 {
font-size: 18px;
}

/* ヘアケア・美容用品 */
#item {
width: 90rem;
display: flex;
flex-wrap: wrap;
margin: 0 auto 4rem auto;
}
#item article {
width: 28rem;
padding: 1rem 1rem 1.6rem 1rem;
border: 0.1rem solid #ccc;
margin: 0 1rem 2rem 1rem;
}
#item article img {
width: 25.8rem;
height: 20rem;
object-fit: cover;
}
#item article h3 {
font-size: 1.6rem;
line-height: 2.2rem;
color: #000;
font-weight: bold;
margin: 1.4rem 0;
}
#item article small {
font-size: 1.2rem;
margin-bottom: 2rem;
line-height: 1.6rem;
display: block;
font-weight: bold;
}
#item article p {
font-size: 1.2rem;
line-height: 1.6rem;
}
.item_p {
text-align: center;
margin-bottom: 3rem;
display: block;
}


/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 980px) {



}

/* タブレトット用
------------------------------------------------------------*/
@media only screen and (min-width: 641px) and (max-width: 979px) {

/* トップページ */
#top_catch {
margin: 2rem auto 3rem auto;
width: 100%;
overflow: hidden;
clear: both;
}
.top_cnt {
width: 100%;
padding: 0 2rem;
color: #000;
font-size: 1.6rem;
line-height: 3rem;
}
#top_icon {
width: 100%;
padding: 0 2rem;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 6rem 0 3rem 0;
}
#top_icon a {
display: block;
width: 20%;
margin-bottom: 3rem;
text-align: center;
transition: 0.3s;
}
#top_icon p {
font-size: 1.4rem;
margin-top: 1.6rem;
}
#news {
width: 100%;
padding: 0 2rem;
}
#news h2 {
color: #fdd45f;
background: url(../img/top/back_read1.png) no-repeat;
background-position: 0 0.6rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#news p {
width: 100%;
font-size: 1.2rem;
line-height: 2.2rem;
margin-bottom: 2rem;
}
#top_ftr {
width: 100%;
margin: 5rem 0;
overflow: hidden;
}
#top_about {
width: 100%;
padding: 0 2rem;
}
#top_about h2 {
color: #fdd45f;
background: url(../img/top/back_read2.png) no-repeat;
background-position: 0 0.6rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#top_about p {
background: url(../img/logo_ftr.png) no-repeat;
background-position: 0 1em;
padding: 5.6rem 0 0 0;
}


}


/* スマートフォン用
------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

/* トップページ */
#top_catch {
margin: 2rem auto 3rem auto;
width: 100%;
overflow: hidden;
clear: both;
}
.top_cnt {
width: 100%;
padding: 0 2rem;
color: #000;
font-size: 1.6rem;
line-height: 3rem;
}
#top_icon {
width: 100%;
padding: 0 2rem;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 6rem 0 3rem 0;
}
#top_icon a {
display: block;
width: 50%;
margin-bottom: 3rem;
text-align: center;
transition: 0.3s;
}
#top_icon p {
font-size: 1.4rem;
margin-top: 1.6rem;
}
#news {
width: 100%;
padding: 0 2rem;
}
#news h2 {
color: #fdd45f;
background: url(../img/top/back_read1.png) no-repeat;
background-position: 0 0.6rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#news p {
width: 100%;
font-size: 1.2rem;
line-height: 2.2rem;
margin-bottom: 2rem;
}
#top_ftr {
width: 100%;
margin: 5rem 0;
overflow: hidden;
}
#top_about {
width: 100%;
padding: 0 2rem;
}
#top_about h2 {
color: #fdd45f;
background: url(../img/top/back_read2.png) no-repeat;
background-position: 0 0.6rem;
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem
}
#top_about p {
background: url(../img/logo_ftr.png) no-repeat;
background-position: 0 1em;
padding: 5.6rem 0 0 0;
}

}