@charset "UTF-8";
/*
Theme Name:Nalu予約システム
Theme URI:
Description: サロン向け予約管理システム(LINE)
Author:Powerd by NaluSystems,
Version:1.0.0
*/




body.login              {}
#login                  {}
#login h1               {/*ここのWordPressのロゴマークが入っている*/}
#login p.message        {/*ログアウトしました。のメッセージ*/}
#login form#loginform   {/*<input type=text>などのフォーム一式*/}
#login form p.submit                        {/*ログインボタン*/}
#login form p.submit input[type="submit"]   {/*ログインボタン*/}
#login p#nav            {/*パスワードをお忘れですか? のメッセージ*/}

input.form-control{
  color: #333;
  box-shadow: none;
}
select.form-control{
  color: #333;
  box-shadow: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

*::-webkit-scrollbar {
  width: 2px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
}
*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}


body.login-action-lostpassword{

}

body.login-action-lostpassword #login p#nav {
  display: none;
}

body.login-action-lostpassword #login {
    width: 100%;
    max-width: 420px;
    padding: 8% 0 0;
    margin: auto;
}

.copyright{
  padding:30px 0;
  text-align: center;
  font-size: 12px;
}

.copyright .copy{
  color: #999;
}


.alert {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.page-content{
  width: 100%;
  min-height: 768px;
  background-color: #fff;
  padding: 30px 15px;
}

.page-content .container{
  max-width: 1024px;
  margin: auto;
}

.page-content h1{
  font-size: 32px;
  font-weight: bold;
  color: #333;
  padding: 10px 0;
  text-align: center;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;

}

.page-content header{
  position: relative;
  font-size: 14px;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 15px;
}

.page-content.games header{
  background-color: beige;
  border: 3px solid #dede63;
}

.page-content.nurie header{
  background: #f5dcdc;
  border: 3px solid #f18181;
}

.page-content.aura header{
   background: #fff;
   border: 3px solid #231815;
   color:#231815;
}

.page-content header p{
  color: #262626;
  font-size: 13px;
}

.flex-article{
  width: 100%;
  display: block;
  margin-left: 0;
  margin-right: 0;
}

.flex-article:after{
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

.flex-article article:hover{
   opacity: 0.8;
   border: 3px solid #f7f70d;
}

.flex-article figure{
  position: relative;
  width: 100%;
  margin:0 auto;
  padding: 1px;
  text-align: center;
}

.flex-article figure time{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    color: #fff;
    background: #ec7269;
    padding: 3px;
    -moz-border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -o-border-top-left-radius: 3px;
  -ms-border-top-left-radius: 3px;
}

.flex-article figure figcaption{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10px;
    color: #333;
    padding: 1px 5px;
}

.flex-article figure img{
  object-fit: contain;
  width: 120px;
  height: 120px;
}

.flex-article article .title{
  text-align: center;
  font-size: 14px;
  padding: 10px;
  height: 48px;
  cursor: pointer;
  background-color: #f5f5dc;
}

.flex-article article{
  height: 180px;
  text-align: center;
  border: 3px solid #dede63;
  float: left;
  margin: 2% 1%;
  border-radius: 5px;
  padding: 0;
}


.nurie .flex-article article .title{
  background-color:#f5dcdc;
  font-weight: normal;
  font-size: 13px;
  overflow-y: hidden;
}

.nurie .flex-article article.parent{
  position: relative;
}

.nurie .flex-article article.parent .pos{
  position: absolute;
  left:0;
  font-size: 11px;
}

.nurie .flex-article article{
  border: 3px solid #f5dcdc;
}

.game-nav{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  text-align: left;
}

.reg-btn{
  font-size: 14px;
  background-color: #333;
  color: #fff;
  padding:10px 15px;
}


.more{
  display: flex;
  align-items: center;
  width: 130px;
  text-align: center;
  justify-content: space-around;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #eee;
  color: #000;
  font-size: 14px;
}

a.nurie{
    background-color: #00d084;
    color: #fff;
}


a.apps{
  background-color: red;
  color: #fff;
}

.text-center{
  text-align: center;
}

.text-left{
  text-align: left;
}

.text-right{
  text-align: right;
}


.read-content{
  padding: 30px 15px;
  text-align: left;
  font-size: 13px;
  line-height: 2em;
  color: #333;
}




@media screen and (min-width:769px){

    
  .flex-article article{
    width: 18%; 
  }


}


@media screen and (max-width:768px){

    
  .flex-article article{
    width: 23%; 
  }


}


@media screen and (max-width:750px){

  #yoyaku-frame .more,
  #yoyaku-frame a{
    width: 114px;
    font-size: 12px;
  }

  .page-content h1{
    font-size: 24px;
  }

  
  .flex-article article{
    width: 48%;
  }


}





/*******2020****虹色のコンサルテーション******************************************/

#submitbtn{
  margin: auto;
  margin-top: 30px;
  background-color: red;
  color: #fff;
}

#reset{
  margin: auto;
  margin-right: 0;
  background-color: #333;
  color: #fff;
}

.content-shindan{
	padding: 1em 0;
	text-align: center;
	margin:1em auto;
}

.content-shindan .wrap{
	max-width: 900px;
	margin: auto;
	padding: 60px 60px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.content-shindan h2{
	display: flex;
	justify-content: flex-start;
	text-align: center;
  font-size: 1.3em;
  margin: 30px 0;
}
.content-shindan p.h{
	margin-top: 1em;
	margin-bottom: 1em;
}

.content-shindan h2 span{
	margin-right: 2em;
}

.pos-box{
	background-color: #FFEB3B;
	padding: 30px;
	max-width: 550px;
	margin: auto;
}

.touch{
	border: 1px solid transparent;
	max-width: 80px;
	width: 13vw;
}


.touch:hover,
.touch:visited{
	border:1px solid  red;
}

.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
background-color: #fff;
}
.flex-box{
	display:block;
	margin:0 auto;
	max-width:750px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}	

.flex-box li{
 	display: inline-block;
    margin: 10px;
	white-space:nowrap;
	border:3px solid transparent;
}
.flex-box::-webkit-scrollbar {  /* Chrome, Safari 対応 */
   display:none;   
}

.flex-one{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.flex-two{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content:space-between;
	margin: 1em 0;
}

.slider {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	padding: 0 30px;
}

.slider:after{
	content: '';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	width: 100%;
}
.slick-slide {		
	position: relative;
	margin: 1em 0px;
	width: calc(100%/6);
	text-align: center;
	display: inline-grid;
}
.slick-slide .num{font-size: 11px;color: #ddd; position: absolute;top:0;left:0;z-index: 999;}

.slick-slide img {
	max-width: 80px;
	height: auto;
}
.slick-slide a{
	position: relative;
	text-align: center;
	display: block;
	text-align: center;
}

.slider .flickity-prev-next-button.previous,
.slider .flickity-prev-next-button.next{
	background-color: transparent;
}

.slider .flickity-prev-next-button.previous{
	left: -5px;
}
.slider .flickity-prev-next-button.next{
	right: -5px;
}

.b-box{
  padding: 30px 15px;
  background-color: #f5efe0;
}

@media screen and (max-width: 600px) {

	.content-shindan .wrap{
		padding: 30px 15px;
	}

	.content-shindan h2{
		flex-direction: column;
		font-size: 14px;
		text-align: left;
	}

	.content-shindan h2 span{
		font-size: 18px;
		display: block;
		margin-right: auto;
  }

  .page-content h1{
    font-size: 21px;
  }
  
  
  .pos-box{
    padding: 15px;
  }
	
}