@charset "utf-8";
html {
max-width: 1200px;
touch-action: manipulation;
margin-right: auto;
margin-left : auto;
overflow-x: hidden;
background-color: #000000;
}
body{
font-family: 'M PLUS 1p', sans-serif;
font-weight:bold;
background-color: #333333;
color: #FFFFFF;
}
header{
position: relative;
background-image: url("images/白背景.jpeg");
background-size: cover;
box-shadow: 0px 3px 6px #00000029;
}
#title img{
max-height: 300px;
}
footer{
background-color: black;
color: white;
font-size: 14px;
text-align: center;
margin-top: 8px;
}
#description{
position: absolute;
width: calc(100% - 4px);
background-color: #11172F;
text-align: left;
letter-spacing: 0px;
color: #FFFFFF;
font-size: 10px;
line-height: 20px;
padding-left: 3px;
}
#description span{
margin-left: 4px;
}
#bottom{
position: fixed;
bottom: 8px;
left: 8px;
max-width: calc(100% - 16px);
width: 584px;
}
.filter_fieldset{
margin-bottom: 8px;
}
h1{
height: 36px;
color: #FFFFFF;
font-size: 24px;
margin: 0;
text-align: center;
background: linear-gradient(270deg, #11172F 0%, #2B435B 100%);
z-index: 5;
}
.h1_area{
margin-bottom: 0px;
height: 36px;
}
h2{
color: #FFFFFF;
font-size: 18px;
margin-top: 8px;
margin-bottom: 0px;
padding-left: 8px;
}
h3{
font-size: 14px;
margin-top: 8px;
margin-bottom: 0px;
}
h4{
font-size: 14px;
position: relative;
left: 16px;
margin: 8px 0 0 0;
padding: 0 8px 0 8px;
min-width: 120px;
width: fit-content;
background: #CBDCFF;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
a{
color:#526EE1;
}
a:hover{
opacity: 0.7;
}
span{
display: inline-block;
}
div.box{
background: #FFFFFF;
box-shadow: 0px 3px 6px #00000029;
font-size: 14px;
}
button{
display: block;
height: 100%;
width: 100%;
font-size: 12px;
font-weight: bold;
background: #fff;
border: 1px solid #b6b6b6;
border-radius: 3px;
margin-left: 8px;
}
table{
width: 100%;
border-collapse:collapse;
border: double;
}
th,td{
text-align: center;
flex:1;
border: 1px solid #b6b6b6;
font-size: 14px;
}
th.caption {
border: double;
font-size: 14px;
}
td.caption {
white-space: nowrap;
}
th.name,td.name {
white-space: nowrap;
width: 10px;
}
td a{
color: #FFFFFF;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
img.red {
filter: sepia(100%) saturate(300%) hue-rotate(300deg);
}
img.blue {
filter: sepia(100%) saturate(300%) hue-rotate(180deg);
}
input[type=number] {
width: 80px;
text-align: right;
}
.center{
text-align: center;
}
.left{
text-align: left;
padding-left: 8px;
}
.right{
text-align: right;
padding-right: 8px;
}
.blue{
color: blue;
}
.red{
color: red;
}
group + group {
margin-top: 0px;
}
.inline {
display: flex;
overflow: hidden;
}
.tab{
width: 100%;
height: 30px;
display: flex;
}
.tab_label{
top: 0;
left: 0;
font-size: 14px;
width: 100%;
height: calc(100% - 2px);
background: #fff;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
border: 1px solid #b6b6b6;
border-radius: 3px;
}
.filter_selected {
background: #d81b60;
color: #fff;
}
#filter_details{
font-size: 14px;
text-align: center;
margin-top: 8px;
}
#filter_details_area{
display: none;
}
.selected {
background: #d81b60;
color: #fff;
}
.disabled {
background: grey;
}
input[type=radio],input[type=checkbox]{
display: none;
}
input[type=checkbox].edit{
display: initial;
}
/* 
input:checked + label {
background: #d81b60;
color: #fff;
}
 */
.submit_invalid{
pointer-events: none;
}
.visibility_hidden{
visibility: hidden;
}
.button_red{
background: #d81b60;
color: #fff;
font-size: 20px;
}
.submit{
height: 60px;
background: #d81b60;
color: #fff;
font-size: 20px;
}
.reset{
height: 60px;
font-size: 20px;
}
.flex{
display: flex;
}
.flex1{
flex: 1;
}
.flex2{
flex: 2;
}
.flex3{
flex: 3;
}
.h60{
height: 60px;
}
.hide{
display: none;
}
#check_area{
width: 400px;
}
.list_item:nth-child(odd){
background: #FFFFFF;
}
.list_item:nth-child(even){
background: #F5F5F5;
}
p{
font-size: 14px;
margin: 8px;
padding: 8px;
box-shadow: 0px 3px 6px #00000029;
}

/* figo */
.titlelogo_salon{
height: 15px;
}
.titlelogo_figo{
height: 20px;
}

/* モーダル */
.modal{
display: none;
height: 100vh;
width: 100%;
max-width: 600px;
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
.modal_bg{
background: rgba(0,0,0,0.8);
height: 100vh;
width: 100%;
position: fixed;
}
.modal_content{
background: #fff;
color: #000000;
left: 50%;
padding: 8px;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
max-width: 80%;
max-height: 80%;
overflow-x: hidden;
overflow-y: auto;
}

/* menu */
.nav_area{
position:relative;
height: 40px;
}
nav{
padding-top: 8px;
padding-bottom: 8px;
background-color: white;
z-index: 10;
box-shadow: 0px 3px 6px #00000029;
}
nav ul{
display: flex;
margin: 0;
padding: 0;
z-index: 10;
}
nav li{
position: relative;
list-style: none;
flex: 1;
height: 24px;
line-height: 24px;
font-size: 14px;
white-space: nowrap;
display:flex;
justify-content:center;
}
nav li:not(:last-child){
border-right:2px solid #ddd;
}
nav a{
display: block;
height: 100%;
width: 100%;
color: #333;
text-decoration: none;
text-align: center;
}
nav a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
nav a:hover{
color:darkred;
border-bottom:2px solid darkred;
}
nav li ul{
display: block;
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding-top: 8px;
width: 100%;
}
nav li ul li{
overflow: hidden;
width: 100%;
height: 0;
border-right: 0;
white-space: nowrap;
display:flex;
justify-content:center;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
box-shadow: 0px 3px 6px #00000029;
}
nav li ul li a{
color: #333;
}
nav li:hover ul li{
overflow: visible;
height: 24px;
background-color: white;
padding-top: 8px;
padding-bottom: 8px;
border-right: 0;
border-top: 2px solid #ddd;
}
.breadcrumb_area {
min-height: 39px;
}
.breadcrumb {
margin: 0;
padding: 8px;
list-style: none;
background-color: #F9F9F9;
z-index: 5;
}
.breadcrumb li {
display: inline;
list-style: none;
font-size: 12px;
}
.breadcrumb li:after {
content: '>';
color: #555;
}
.breadcrumb li:last-child:after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
}
.fixed {
position: fixed;
top: 0;
width: calc(100% - 16px);
max-width: 1184px;
}
.fixed_breadcrumb {
position: fixed;
top: 40px;
width: calc(100% - 328px);
max-width: 872px;
}
.fixed_h1 {
position: fixed;
top: 79px;
margin-top: 0;
width: calc(100% - 312px);
max-width: 888px;
}

/* side */
/* NEWS */
.news_list{
padding: 8px;
border-bottom: 2px solid #ddd;
}
.news_list:last-child{
border-bottom: none;
}
.news_timestamp{
color: #999999;
font-size: 12px;
}
.news_icon{
left: 0;
top: 0;
bottom: 0;
margin: auto;
width: 30px;
height: auto;
transform: rotate(-90deg);
}
.news_caption{
position: relative;
padding-left: 30px;
line-height: 24px;
font-size: 12px;
}
/* データベース一覧 */
.databese_list{
position: relative;
padding: 8px;
}
.preparation{
color: #999999;
text-decoration: line-through;
line-height: 24px;
}
.coming_soon{
color: #FF7474;
font-size: 10px;
line-height: 24px;
position: absolute;
right: 8px;
}
/* その他 */
.othrs_list{
position: relative;
padding: 8px;
}

/* 光らせる */
.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* フェードイン */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/* レスポンシブ */
.responsive{
width: calc(50% - 2px);
}
@media (max-width: 1039px) {
#title img{
max-height: 150px;
}
.responsive{
width: calc(100% - 2px);
}
}
@media (max-width: 839px) {
.fixed_breadcrumb {
width: calc(100% - 32px);
}
.fixed_h1 {
width: calc(100% - 16px);
}
}
@media (max-width: 639px) {
nav li{
font-size: 12px;
}
}