/*基本CSS*/
*{
margin:0;
padding:0;
box-sizing: border-box;
color:#2b0602;
}

/*header*/
header{
  padding-bottom: 20px;
}

ul{
list-style:none;
}

#gnav ul{
  display: flex;
  justify-content:right;
  padding:40px 10px 20px;
}

header a{
  margin:0 15px;
}

/*nail design.html用*/
main a{
  margin:0 15px;
}

#nailgnav1 ul{
  display:flex;
  justify-content:center;
  padding:40px 10px 20px;
}

#nailgnav2 ul{
  display:flex;
  justify-content:center;
  padding-bottom: 40px;
}
/*nail design.html用*/

.title{
width:19%;
margin:0 auto;
}

/*contents*/
.container{
width:1180px;
margin:0 auto;
}

a{
  font-weight:600;
  /*margin:0 15px;*/
}

a:hover{
  color:#20b2aa;
}

h1{
font-size:34px;
color:#8f8236;
}

p{
  padding-bottom:12px;
  margin:10px 0;
}

span{
font-size:1.2em;
padding:0 5px;
color:#77065b;
}

section{
  padding:60px 0;
}

section h2, h1 .txcenter{
text-align:center;
margin-bottom: 60px;
font-size:1.6em;
}

section h3{
  font-size: 1.2em;
  padding:10px;
  color:#77065b;
}

header,footer{
  background-color:#fff;
}

#sec1,#sec3{
  background-color:#fdf5e9;
}

#sec2{
  background-color:#d1defc;
}

.concept{
  display:flex;
  flex-wrap:wrap;
}

.concept img{
  width:50%;
  border-radius:50px;
}

.concept-text{
  width:50%;
  padding:30px;
}

.concept-text p{
  padding:20px;
}

.item-box-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
/*item-box4つ並ぶ時は「justify-content:space-between;」*/

.item-boxtop{
  background-color:#e9f1ff;
  width:250px;
  padding:15px;
  margin:10px 0;
  border-radius:15px;
}

.item-box{
  background-color:#e9f1ff;
  width:250px;
  padding:15px;
  margin:10px 0;
  border-radius:15px;
}

.item-boxtop h3{
  text-align:center;
}

.item-box h3{
  text-align:center;
}

.item-boxtop img{
  width:100%;
  height:160px;
}

.item-box img{
  width:100%;
  height:160px;
}

.item-boxtop p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

.item-box p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

.btn{
  background-color:#e9f1ff;
  display:block;
  width:150px;
  padding:15px 20px;
  border-radius:15px;
  box-shadow:6px 6px 10px 0 rgba(0,0,0,.4);
  margin:50px auto 0;
  text-align:center;
}

.shop-info th{
width: 20%;
text-align: left;
padding:5px 30px;
}

.shop-info td{
width: 80%;
}

iframe{
  width:100%;
}

/*footer*/
footer{
  padding:60px 0;
  text-align: center;
}

footer ul{
  display:flex;
  justify-content:center;
  padding:20px;
}

.footer-nav a{
  margin:0 15px;
}

#pagetop{
position:fixed;
bottom:30px;
right:50px;
}

#pagetop img{
  width:50px;
}

.line img{
  width:10%;
}

/*nail designページのCSS*/
#item-sec1{
  background: url(images/salonroom/6.jpg);
  background-size: cover;
  background-position:center;
  height:600px;
  position: relative;
  text-align:center;
  backdrop-filter:blur(3px);
}

#item-sec1::before{
position: absolute;
z-index:0;
top:0;
left:0;
right:0;
bottom:0;
content:"";
display: block;
background-color: rgba(253,254,255,0.3);
}

#item-sec1 .main-ttl{
  position:inherit;
  z-index: 2;
}

#item-sec1 p strong{
  font-size:5em;
  color:#77065b;
}

#item-sec1 h3{
  padding-top:50px;
  color: #000000;
}

#item-sec2 h3{
  font-size: medium;
  color: #8f8236;
}

#item-sec3 h3{
  font-size: medium;
  color: #8f8236;
}

#item-sec4 h3{
  font-size: medium;
  color: #8f8236;
}

#item-sec5 h3{
  font-size: medium;
  color: #8f8236;
}

#item-sec2 p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

#item-sec3 p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

#item-sec4 p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

#item-sec5 p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

#item-sec2{
  background-color: #d1defc;
}

#item-sec4{
  background-color: #d1defc;}

.item-list{
  background-color:#fdf5e9;
}

.item-box2{
  background-color:#fadcdc;
  width:250px;
  padding:15px;
  margin:10px 0;
  border-radius:15px;
}

.item-box2 h3{
  text-align:center;
}

.item-box2 img{
  width:100%;
  height:160px;
}

.item-box2 p{
  font-size: 0.9em;
  padding:5px;
  text-align:center;
}

.clearfix{
width:50%;
}

.clearfix h2{
 color:#77065b;
 font-size: 1.4em;
 margin-bottom: 20px;
 text-align: left;
}

.new img{
width: 10%;
padding-left: 20px;
padding-bottom: 15px;
}

.new{
  display:flex;
  align-items:center;
}



/* menuページのCSS */
.menu{
  border-collapse:collapse;
  margin:0 auto;
}

.menu th{
  width:45%;
  padding:15px 10px;
  border:1px solid #c5cec4;
}

.menu td{
  width:20%;
  padding:15px 10pc;
  border:1px solid #c5cec4
}

.table-title{
  font-size:1.4em;
  text-align:center;
}

.menu-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.menu-flex img{
  width:30%;
}

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
margin-top:50px;
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%; /* ボタン3つ並びへ */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn2 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 75px;/* 背景横幅 */
height: 65px; /* 背景高さ */
font-size: 30px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn2 i {
position: relative;
top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn2 div {
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn2:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}
/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn2 i.fa-brands.fa-instagram,.flowbtn2 i.fa-brands.fa-amazon {
font-size: 35px;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/*レスポンシブ*/
/* タブレットCSS */
@media(max-width:820px){
  .container{
    width:90%;
  }
  .title img{
    width:100%;
  }
  .item-boxtop{
    width:48%;
    margin:10px auto;
  }
  .item-boxtop img{
    width:100%;
    height:80%;
  }
  .item-box{
    width:48%;
    margin:10px auto;
  }
  .item-box img{
    width:100%;
    height:80%;
  }
  .item-box2{
    width:48%;
    margin:10px auto;
  }
  .item-box2 img{
    width:100%;
    height:80%;
  }
  .clearfix{
    width:100%;
  }
  .clearfix h2{
    color:#77065b;
    font-size:1.4em;
    margin-bottom:10px;
  }

}



/* スマホCSS */
@media(max-width:640px){
  #sec1 h1{
    text-align:center;
  }
  #sec1 h2{
    padding-top: 30px;
  }
  .title{
    width:200px;
    text-align:center;
    padding:20px 0;
  }
  #gnav ul{
    justify-content:center;
  }
  .concept img{
    width:100%;
  }
  .concept-text{
    width:100%;
    padding:20px 0;
  }
  .concept p{
    width:100%;
  }
  .item-boxtop{
  width:100%;
  }
  .item-boxtop img{
    width:100%;
    height:100%;
  }
  .item-box{
    width:100%;
  }
  .item-box img{
    width:100%;
    height:80%;
  }
  .item-box2{
    width:100%;
  }
  .item-box2 img{
    width:100%;
    height:80%;
  }
  .info{
    font-size: .9em;
  }

  footer{
    padding:30px 0;
  }
  footer ul{
    padding:5px 5px 20px 10px;
  }
  .footer-nav li{
    padding-right:0 ;
  }
  .footer-nav a{
    font-size:.8em;
    margin:0 5px;
    padding:2px;
  }
  #pagetop img{
    display:none;
  }

  .new img{
  width: 20%;
  }

  .menu tr{
    width:100%;
  }
}