@charset 'UTF-8';
/*
Theme Name: koujimachi Hotel Design
Description: ホテル様向けシステムデザインテーマ
Version: 1.0
Author: developer
Author URI: https://koujimachi
*/

/*
=======================================
COLORS
======================================= */


:root {
    /* Color */
    --light-grey: #ccc;
    --grey: #666;
    --dark-grey: #707070;
    --green: #7bba93;
    --dark-blue: #39565C;
    --white: #fff;
    --pale-yellow: #F9F9F4;
    --light-dark-grey:rgb(204, 204, 204);
    --border-solid-color:#d4d8dd;
    --theme-color-1:linear-gradient(to bottom,rgba(25, 25, 112, 1), rgba(65, 105, 225, 1));
    --theme-color-2:linear-gradient(to bottom, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1));
    /*--theme-color-3:linear-gradient(to bottom, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));*/
    --theme-color-3:#3bb68b;
    --content-theme-color:#e8f0fe;


    --btn-color-blue:#007bff;
    --custom-black:#424242;
    --custom-white:#e7f1fd;
    --custom-green:#1db78B;


    /* Font/Space Size */
    --font-sm: .5rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.625rem;

    /* Border Radius Size */
    --round-sm: 6px;
    --round-md: 10px;
    --round-lg: 50%;

    /* Box shadow color  */
    --boxShadow-01: 0 2.5rem 2rem hsl(0 0% 0% / 20%);
    --boxShadow-02:0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    --boxShadow-03:0 2px 5px 1px #d1d3d6;
    --boxShadow-04:rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;/*最新版*/

    /*custom kuc*/
    --kuc-readonly-table-header-3-width: 80px;
    --kuc-readonly-table-header-5-width: 220px;
    --kuc-readonly-table-header-7-width: 150px;
    --kuc-readonly-table-header-8-width: 59px;
    --kuc-readonly-table-header-9-width: 250px;
    --kuc-readonly-table-header-18-width: 80px;

    /*tbody > tr css styling*/
    .kuc-readonly-table-1-17-1__table__body > tr:nth-child(even) {
        /* ここに適用したいスタイル */
        background-color: #f0f0f0; /* 例：背景色を薄いグレーにする */
    }
}


/*
=======================================
GENERAL STYLING
================================================ */
body {
	
    font-family: 'Noto Sans JP', sans-serif, Poppins;
    background: var(--content-theme-color);
}

/*
=======================================
COMMON
================================================ */
a{
    color:#0E3050;
    cursor: pointer;
    text-decoration-line: none;
}
a:hover{
    opacity: 0.8;
}
p {
    line-height: 1.7;
}
li{
    list-style-type: none;
}
img,
iframe {
    max-width: 100%;
}

/*
=======================================
LAYOUT
================================================ */
.contents-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    min-height:100vh;
}




/**
========================================
サイドメニューバー
========================================
**/
.sidebar-Wrap{
    display: flex;
    flex-shrink: 0;
    background-color: #eff1f4;
    height:100%;
    width:230px;
    
}
/* 属性によってデザインカラーを設定する */
[data-manager]{/* 管理者 */
    background: var(--theme-color-1);
}
[data-customer]{/* 寄稿者 */
    background: var(--theme-color-2);
}
[data-therapist]{/* 購読者 */
    background: var(--theme-color-3);
}


.sidebar {
    position: fixed; /* 画面に対して固定 */
    top: 0; /* 画面の上端に固定 */
    left: 0; /* 画面の左端に固定 */
    width: 230px; /* sidebar-Wrapと同じ幅に設定 */
    height: 100vh;
    overflow-y: auto; /* sidebarの内容が画面を超えた場合にスクロール */
    box-sizing: border-box; /* paddingやborderをwidth/heightに含める */
    padding: 20px; /* 例として内側の余白 */
    background-color: #f9f9f9; /* sidebarの背景色 */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* 例として影 */
}



.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar nav ul li a {
    display: flex;
    align-items: flex-end;
    padding: 15px;
    text-decoration: none;
    color: #ffffff;
    font-size: 17px;
    font-weight: none;    
}
.sidebar nav ul li.active{
    background-color: black;
}
.sidebar nav ul li a:hover {
    background-color: #ddd;
    color:black;
}
.sidebar nav li a .material-icons {
    margin-right: 8px; /* アイコンとテキストの間の余白 */
    vertical-align: middle; /* アイコンを垂直方向の中央に配置 */
    font-size: 20px;
    color: var(--custom-black);
    background-color: white;
    border-radius: 40px;
    padding:2px;
}


.user-info {
    padding: 20px;
    border-bottom: .3px solid var(--border-solid-color);
    display: flex;
    flex-direction: column; /* これを追加 */
    align-items: center;   /* 中央寄せにする場合 */
    

}

.user-avatar {
    margin-right: 0; /* 横並びの時に使っていたマージンは不要になるので0に */
    margin-bottom: 10px; /* アイコンとテキストの間にスペース */
}

.user-avatar img {
    border-radius: 50%;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.user-details {
    text-align: center; /* テキストを中央寄せにする場合 */
}

.user-details .user-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff
}

/*
メニューバーの背景色
*/

.current-page{
    background-color: orange;
}


/* 
========================================
メインコンテンツ
========================================
*/
.main-content {
    width:98%;
    height:800px;
    flex-grow: 1;
    padding: 0px auto;
    margin-left:1rem;
}

/*
================================================
ヘッダー
================================================ */
.main-header{
    display:flex;
    height:3.0rem;
    justify-content: space-between;
    align-items:center;
    border-bottom:.5px solid var(--border-solid-color);/*アンダーラインを指定*/
}


.header-SiteName{
    margin-left:20px;
    color:var(--btn-color-blue);
    font-feature-settings: "palt";
    font-family: futura-pt, sans-serif;
    font-kerning: auto;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1;
}
/*空白用の要素*/
.spacer-div{
    margin-top:3rem;
}
/*項目のタイトル*/
.section__Title{
    font-feature-settings: "palt";
    font-family: futura-pt, sans-serif;
    font-kerning: auto;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom:.5px;
    text-align: left;
}


/**
=======================================
/front-page
=======================================
**/


/**
=======================================
member content
=======================================
**/
.member__menu__wrapper{
    width:80%;
    height:auto;
    margin: 0 auto;
    padding:10px;
    padding-top:3rem;
}
.member__menu__Title{
    font-feature-settings: "palt";
    font-family: futura-pt, sans-serif;
    font-kerning: auto;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom:1rem;
    text-align: left;
}


.member__menu__card__container {
    display: flex; /* Flexboxを使って横並びにする */
    justify-content: space-between; /* カードを中央に配置 */
    flex-wrap: wrap; /* 画面幅が狭くなった時に折り返す */
    gap: 20px; /* カード間のスペース */
    max-width: 100%; /* コンテナの最大幅を設定（任意） */
    margin: 0 auto; /* 中央寄せ */
}

/* 各カードのスタイル */
.member__menu__card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box; /* paddingとborderをwidthに含める */
    text-align: center;
    display: flex; /* カード内の要素を縦方向に配置するためにFlexboxを使用 */
    flex-direction: column; /* 要素を縦に並べる */
    justify-content: space-between; /* カード内の要素を上下に均等配置 */
    width: 290px; /* カードの最小幅を設定（スマホ表示対策） */
    height:200px;
    border:none;
}
.member__menu__card > i{
    font-size:100px;
}
.member__menu__card h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}


/* ボタンのスタイル */
.btn {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

/**
=======================================
news content
=======================================
**/


.news__wrapper{
    width:80%;
    height:auto;
    margin: 0 auto;
    padding:10px;
    
}
.news__wrapper > h1{
    text-align: center;
    font-weight: 900;
    font-size: 35px;
    color: #0079D2;
}
.news__Title{
    font-feature-settings: "palt";
    font-family: futura-pt, sans-serif;
    font-kerning: auto;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -.015em;
    margin-bottom:1rem;
    text-align: left;
}
.news__body{
    margin: 0 0 1.2rem;

    border-radius: 4px;
}
.news__body > h2{
    color:black;
}
.news__list .news__listItem{
    width: 100%;
    height:5rem;
    color: #333940;
    background-color: #fff;
    border:none;
    margin-bottom:1rem;
    border-radius: 4px;
}

.news__listItem > a{
    display: flex;
    padding: 1.5rem;
    transition: background-color 0.2s linear;
    flex-direction: center;
    justify-content: left;
    font-weight:bold;
    align-items: center;
    
}
.news__listItem > a:link{
text-decoration: none;
}
.news__listItem > a:hover{
    color:var(--btn-color-blue);
}

/*日付*/
.news__listItemsDate{
    font-size:19px;
    min-width: 7rem;
    vertical-align: top;    
}
.news__listItemsType{
    margin-right:1rem;
    padding:3px  12px;
    background-color: #0079D2;
    color:white;
    border-radius: 40px;
}
/*タイトル*/
.news__listItemsTitle{
    font-size:19px;
    width:350px;
}
/**
    
=======================================
請求書ページ
=======================================
**/
/*

*/
.w-full{
    width:80%;
    
    border:1px solid var(--border-solid-color);
    border-collapse: collapse;/*隣接するボーダーを1つに*/
}


.w-full th{
    border:1px solid var(--border-solid-color);
    padding:15px;  
    text-align: left;
    background-color:#3498DB;
    color:#fff;
}


.w-full td{
    border:1px solid var(--border-solid-color);
    padding:15px;
    background-color: #fff;
    
}


.w-full .download__link{
    background-color:#0079D2;
    color:white;
    padding:8px 12px;
    border-radius:2px;
}

/*
=======================================
本数表画面のスタイル
=======================================
*/
.container_wrapper{
    display: flex;
    align-items:flex-end;
    box-shadow: var(--boxShadow-02);
    padding:10px 0px;
    background-color: white;
    border-radius: 4px;
    width:630px;
}

.table-container{
    font-size: 10px;
    border-collapse: collapse;
}
.table-container tr{
    height:40px;
    font-weight:normal;
}
.table-container th{
    background-color: #3498DB;
    color:white;
    font-weight:normal;
    padding:4px 12px;
}
.table-container td{
    border:1px solid #e3e7e8;
    text-align: center;
}
/*オブション*/
.options-class{
    margin-right:12px;
    height:40px;
}
.container_main{
    box-shadow: var(--boxShadow-02);
    padding:10px;
    margin-top:10px;
    background-color: white;
    border-radius: 4px;    
    width:1650px;
}
.kuc-readonly-table-1-17-1__table{
    font-size:10px;
}

details{
    width:500px;
    background-color: #fff;
    padding:10px 20px;
    margin:10px auto;
}
#search-form-wrapper{
    border: 0.5px solid var(--border-solid-color);
    padding: 8px 15px;
    width:500px;
    background-color: #fff;
}
.search-form >label{
    font-weight: bold;
}

#search-form-select{
    width:335px;
    height:40px;
    border:1px solid var(--border-solid-color);
    margin: 10px auto;
    padding:2px 12px;
    font-size: 15px;
}

.search-form-btn {
    padding: 0.55rem 3rem;
    background: var(--btn-color-blue);
    color: var(--white);
}
.search-form-btn:hover{
    background-color: #202223;
    opacity: 0.8;
}


/**
=======================================
/report
=======================================
**/

.highcharts-credits{
    display:none;
}
.graph__container {
    width: auto;
    background-color: #fff;
    padding:10px 20px 10px 0px;
}
.select__year__month{
    display: flex;
    width:200px;
    align-items: left;
}
.select__year__month > select{
    padding:6px 12px;
    border:.5px solid var(--border-solid-color);
    margin-right:10px;
    background-color: #fff;
}
/*
分析用のグラフ　=> 必要な数のグラフを見てサイズ調整

*/
.chart-object{
    width:98%;
    height:400px;
    padding:30px;
    box-shadow: var(--boxShadow-03);
}


/*
 * 
=======================================
固定ページのCSS 
========================================
* 
/* Home */
.home-wrapper{
    width:100%;
    height:auto;
}
.home-inside-box{
    width:100%;
    margin:0 auto;
    background-color: var(--custom-white);
    border:1px solid var(--border-solid-color);
}

/**
=======================================
table
===========================================
**/
.pageContainer__Mu7oB{
    min-width: 1056px;
    padding: 10px 16px;
    margin:5px;
    color: #333;
    background-color:white;
    border: solid 1px var(--border-solid-color);
}

.table__VKhA7{
    width: 100%;
    background-color: #ffffff;

    border-radius: 4px 4px 0 0;   
}


.table__VKhA7 thead tr th{
    padding: 4px;
    background-color: #e7f1fd;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;    
}
.table__VKhA7 thead tr th{
    font-size: 10px;
}

.table__VKhA7 th + th {
    border-left: solid 1px var(--border-solid-color);
}
.table__VKhA7 tbody tr td .column{
    background-color: #ffffff;
}

.table__VKhA7 tbody{
    background-color: #ffffff;
}

.facilityName__Td,.menuName__Td{
    font-size:10px;
}


/*TDのデータの中身の指定*/
.align__Center{
text-align: center;
}
.align__Right{
text-align: right;
}

/**
=======================================
404ページ
============================================
**/
.page404{
    position: fixed;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    text-align: center; /* テキストを中央揃えにする場合 */
}

.page404-index{
    margin:0 auto;
    font-size:150px;
    color:#333;  
    letter-spacing: 10px;
}


.page404-home{
    font-size: 20px;
    padding:6px 12px;
    border-radius: 4px;
    background-color: var(--theme-color);
    color:var(--custom-white);
    text-decoration: none;
}
.page404-home:visited{
    color:white;
}




/*
================================================
footer 
================================================
*/

footer{
    width:100%;
    height:10rem;
    background-color: red;
}

/*
FORM
フォームのカスタマイズ
================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    border: 1px solid var(--light-grey);
    padding: .5rem;
}




/*
--------------ここ⁠⁠⁠⁠⁠⁠⁠から下がスマホなどのサイズ-------------------
*/
/*
MEDIUM SIZE
600pxのサイズ
================================================ */
@media(min-width: 600px){


}



/*
1000px以上
================================================ */
@media(min-width: 1000px){
    .home .post-list,
    .archive .post-list,
    .search .post-list {
        grid-template-columns: repeat(3, 1fr);
    }
}