@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

}
/**/
body.postid-2493 .post *{
	width: initial;
	height: initial;

}

.container .scrollable-div {
    width: 100%;      /* 幅の設定 */
    height: 350px;     /* 高さの設定 */
    font-size:18px;
    overflow-y: scroll; /* 縦方向のスクロールを有効化 */
    border: 2px solid black; /* 枠線の追加（オプション） */
    margin: 10px　5px 10px 0px;
    padding: 5px;
    line-height: 1.2;
}
.container .scrollable-div ul{
    margin: 15px auto 15px auto;
    line-height: 1.2;
}
.container .scrollable-div span{

    font-size:18px;
    margin:5px 10px 5px 10px;
    line-height: 1.1;
}
.tcontainer{
 
  display: flex;
  /*align-items:flex-start;*/ /* 縦方向の配置を上揃えに設定 */
  justify-content: center; /* 横方向の配置を中央揃えに設定 */
}


.div-datetime{
	margin: 0px;
	padding: 5px 0px 0px 0px;
}
.div-datetime{
    display: flex;
	align-items: center; 
}
.div-datetime span{
	font-size: 16px;
}
.div-datetime input{
    width:190px;
    height:35px;
    font-size:16px;
    margin: 0px 5px;
    padding: 2px;
    cursor: pointer;
}
.div-datetime input#datepicker{
    width:190px;
    cursor: pointer;
    text-align: center;
}
.div-datetime button{
    width:60px;
    height:32px;
    color:white;
    background-color: #245EC2;
    font-size:16px;
    margin: 0px 2px;
	padding: 2px;
	cursor: pointer;
    border: 1px solid #11223F;
    border-radius: 8px;
}

.div-datetime button:hover {
    background-color: #6084C3;
}
.div-datetime button#prevDay{
    width:60px;
	cursor: pointer;
}
.div-datetime button#nextDay{
    width:70px;
	cursor: pointer;
}
.div-datetime button#today{
    width:130px;
	cursor: pointer;
}
/*/////////////////////////////////////////////////////////*/
.full-width-image-container {
    width: 100%; /* divタグを画面幅いっぱいに */
    overflow: hidden; /* 画像がdivをはみ出した場合に隠す */
    position: relative; /* ポジショニングコンテキストを設定 */
    
}

.full-width-image-container img {
    width: 100%; /* 画像をdivの幅に合わせる */
    height: auto; /* 高さを自動調整してアスペクト比を維持 */
	filter: brightness(0.8);
}
.image-with-text {
    position: relative; /* ポジショニングコンテキストを設定 */
    width: 100%; /* 画像を画面幅いっぱいに */
	
}

.image-with-text img {
    width: 100%; /* 画像をdivの幅に合わせる */
    height: auto; /* 高さを自動調整してアスペクト比を維持 */
	filter: brightness(0.8);
}
.overlay-text2 {
    position: absolute; /* テキストを絶対位置で指定 */
	min-width: 350px; /* 必要に応じて調整 */
    white-space: nowrap; /* 折り返しを防止 */
    top: 1%;  /* テキストを上から10%の位置に */
    left: 53%; /* テキストを水平方向の中心に */
    transform: translateX(-53%); /* テキストを水平方向に中央に配置 */
    color: white; /* テキストの色を指定 */
	font-size:23px;
    /* その他のスタイリング（フォントサイズ、フォントファミリーなど） */
}
.overlay-text {
    position: absolute; /* テキストを絶対位置で指定 */
	min-width: 350px; /* 必要に応じて調整 */
    white-space: nowrap; /* 折り返しを防止 */
    top: 25%;  /* テキストを垂直方向の中心に */
    left: 50%; /* テキストを水平方向の中心に */
    transform: translateX(-50%); /* テキストを正確に中央に配置 */
    color: white; /* テキストの色を指定 */
	font-size:30px;
	text-align: center;
    /* その他のスタイリング（フォントサイズ、フォントファミリーなど） */
}
.overlay-text1 {
    position: absolute; /* テキストを絶対位置で指定 */
	min-width: 350px; /* 必要に応じて調整 */
    white-space: nowrap; /* 折り返しを防止 */
    top: 45%;  /* テキストを垂直方向の中心に */
    left: 50%; /* テキストを水平方向の中心に */
    transform: translateX(-50%); /* テキストを正確に中央に配置 */
    color: white; /* テキストの色を指定 */
	font-size:25px;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(74,74,74,0.50); /* 影を追加 */
    /* その他のスタイリング（フォントサイズ、フォントファミリーなど） */
}
.overlay-text3{
    position: absolute; /* テキストを絶対位置で指定 */
	min-width: 350px; /* 必要に応じて調整 */
    white-space: nowrap; /* 折り返しを防止 */
    top: 80%;  /* テキストを垂直方向の中心に */
    left: 50%; /* テキストを水平方向の中心に */
    transform: translateX(-50%); /* テキストを正確に中央に配置 */
    color: white; /* テキストの色を指定 */
	font-size:25px;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(74,74,74,0.50); /* 影を追加 */
    /* その他のスタイリング（フォントサイズ、フォントファミリーなど） */
}
#campanetext span {
   background-color: #FFFFFF; /* 背景色 */
   color: #FF0000;           /* 文字色 */
   border-radius: 5px;     /* 角丸 */
border:solid 1px #B5250C;
   padding: 2px;            /* 内側の余白 */
}
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0 0;
  text-align: center;

}
.radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;

}

.radio-inline__label {
    display: inline-block;
    padding: 0.8rem 1rem;
    margin-right: 15px;

    border-radius: 8px;
    transition: all .3s;

}

.radio-inline__input:checked + .radio-inline__label {
    background: #FF6028;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}

.radio-inline__input:focus + .radio-inline__label {
    outline-color: #3B1100;
    outline-offset: -2px;
    outline-style: auto;
    outline-width: 5px;
}

/*********************************************/
#popup-container{
    width:90%;
}
.grecaptcha-badge { visibility: hidden; }

.liff-checkin span{
	font-size:20px;
    margin:10px 5px 10px 5px;
    line-height: 1.15; 
}
.liff-checkin label{
	font-size:20px;
    margin: 10px 5px 10px 5px;
}
.liff-checkin radio{
	font-size:20px;
    margin: 10px 5px 10px 5px;
}
.liff-checkin{
	width: 95%;
}
.liff-checkin .scrollable-div {
    width: 100%;      /* 幅の設定 */
    height: 350px;     /* 高さの設定 */
    font-size:18px;
    overflow-y: scroll; /* 縦方向のスクロールを有効化 */
    border: 2px solid black; /* 枠線の追加（オプション） */
    margin: 10px　5px 10px 0px;
    padding: 5px;
    line-height: 1.2;
}
.liff-checkin .scrollable-div ul{
    margin: 15px auto 15px auto;
    line-height: 1.2;
}
.liff-checkin .scrollable-div span{

    font-size:18px;
    margin:5px 10px 5px 10px;
    line-height: 1.1;
}
.liff-checkin input{
	font-size:20px;
    border: 2px solid #000000;
    margin: 5px 5px 5px 5px;
	display: flex;
}
.liff-checkin h2{
	font-size:24px;
	color:white;
    background-color: #EB6900;
    align-items: center;
	justify-content:center;
	display:flex;
    padding: 5px 5px 5px 5px;
	margin: 5px auto 10px auto;
}
.liff-checkin h3{
	font-size:20px;
    background-color: #E1E1E1;
    align-items: center;
	justify-content:center;
	display:flex;
	margin: 10px 5px 10px 5px;
	
    padding: 5px 5px 5px 5px;
}
.liff-checkin h5{
	font-size:15px;
    align-items: center;
	justify-content:center;
    /*background-color: #E1E1E1;

	display:flex;
	margin: 10px 5px 10px 5px;
	
    padding: 5px 5px 5px 5px;*/
}
.liff-checkin button{
	font-size:20px;
	width:100%;
    padding: 10px 5px 10px 5px;
    margin: 10px 5px 10px 5px;
	 align-items: center; 
	justify-content:center;
	display:flex;
}
.liff-checkin2 button{
	font-size:20px;
	width:100%;
    padding: 10px 5px 10px 5px;
    margin: 0px auto 0px auto;
	 align-items: center; 
	justify-content:center;
	display:flex;
}
/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){

.status-icon-checkin {
    font-size: 10pt!important;
    margin-right: 5px!important;
	padding: 6px;
}
.status-icon-non-checkin { /*チェックインアイコン 未チェックイン*/
    font-size: 10pt!important;
    margin-right: 5px!important;
	padding: 6px;
}
.status-icon-karute-link {
    font-size: 11pt!important; /* アイコンのサイズ */
    display:flex!important;
    justify-content: center!important; /* 水平方向の中央揃え */
    align-items: center!important; /* 垂直方向の中央揃え */
    height: 85px!important;
    width:100px!important;
    margin-left: 3px!important;
}

.inquiry-hanrei th{
    width:180px!important;
}
.hanrei-hyou{
    display: block;
    width: 380px!important;
}
.uketuke_container{
    margin:0px!important;
    padding: 2px!important;
}
 .reservation-details2{
    width: 240px!important;
	white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
}
.reservation-tag2 {
width: 390px!important;
    
}
.reservation-tag2 h2 {
    font-size: 14px!important;


}

.reservation-tag2 p {
	font-size: 12px!important;
}
    .inquiry th,.inquiry td {
         display:block;
         width:100%!important;
         border-top:none!important;
         -webkit-box-sizing:border-box!important;
         -moz-box-sizing:border-box!important;
         box-sizing:border-box!important;
    }
	.inquiry5 th,.inquiry5 td{
         display:block;
         width:100%!important;
         border-top:none!important;
         -webkit-box-sizing:border-box!important;
         -moz-box-sizing:border-box!important;
         box-sizing:border-box!important;		
	}
    .inq2 th,.inq2 td{
         display:flex;
    }
    .inq2 .haveto,.inq2 .any{
        font-size:12px;
    }
    .inq2 {
        font-size:12px;
    }
    .inquiry tr:first-child th{
         border-top:1px solid #d7d7d7!important;
    }
	.inquiry5 tr:first-child th{
         border-top:1px solid #d7d7d7!important;
    }
    /* 必須・任意のサイズ調整 */	
    .inquiry .haveto,.inquiry .any {	
        font-size:12px;
    }
	/* 必須・任意のサイズ調整 */	
    .inquiry5 .haveto,.inquiry5 .any {	
        font-size:12px;
    }
    #collapsible {
        display: block;
    }
    #content00 {
        display: none;
    
    }
}

#content00 {
    display: block;
    
}
#collapsible {
    display: block;
}
/*見出し欄*/
.inquiry th{

 text-align:left;
 font-size:13pt;
 color:#FFFFFF;
 padding-right:5px;
 width:20%;
    min-width: 200px;
 background: #0f2350;
 border:solid 1px #d7d7d7;
	vertical-align: top;
}
/*見出し欄*/
.inquiry6 td{
	background-color: #FFFFFF;
	border:none;
}

.inquiry5 th{

 text-align:left;
 font-size:16pt;
 color:#FFFFFF;
 padding-right:5px;
 width:200px;
 background: #0f2350;
 border:solid 1px #d7d7d7;
	vertical-align: top;
}
/*通常欄*/
.inquiry5 td{
 background: #FFFFFF;   
 font-size:16pt;
 border:solid 1px #797979;	
}
.inquiry5 textarea{
 
 font-size:16pt;

}
/*見出し欄*/
.inquiry2 th{

 text-align:left;
 font-size:13pt;
 color:#FFFFFF;
 padding-right:5px;
 width:30%;
 background: #0f2350;
 border:solid 1px #d7d7d7;
	vertical-align: top;
}
/*通常欄*/
.inquiry2 td{
 background: #FAFAFA;   
 font-size:13pt;
 border:solid 1px #A4A5A8;	
}
/*通常欄*/
.inquiry td{

  align-items: flex-start; /* 縦方向の配置を上揃えに設定 */
  /* 横方向の配置を中央揃えに設定 */
 font-size:13pt;
 border:solid 1px #d7d7d7;	
    
}
.inq2 th{

    text-align:left;
 font-size:13pt;
 color:#FFFFFF;
 padding-right:5px;
 width:20%;
 background:#0f2350;
 border:solid 1px #d7d7d7;
}
.div-container {
    display: flex;
    font-size:20px;
   /* justify-content:center;*/
     align-items: center; 
}
.div-container span{
    display: flex;
    font-size:16px;
   /* justify-content:center;*/
     align-items: center; 
}
.div-container2{
	    display: flex;
 
    /*justify-content:center;*/
     align-items: center; 
}
.div-container3{
	    display: flex;
 
}
.highlighted-date {
    background-color: #1D36FF !important; /* 特定の日付の背景色を設定 */
    color: white !important; /* テキストの色を設定 */
    
}

.div-container3{
	    display: flex;
 
    justify-content:center;
     align-items: center; 
}
.div-container4{
	display: flex;
	font-size:12pt;
    
     align-items: center; 
}
#nav_prev{
	    display: flex;
 
    justify-content:center;
     align-items: center; 
}
#nav_prev button{
    font-size:18px;
    margin: 4px;
    padding:4px;
}
.inq2 td{
   
     font-size:13pt;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
.frontdesk-text{
	font-size:16px;
	margin:3px;
	line-height: 1.3; /* 行間を狭く */
}
#itukoro{
    display:none;
}
/**********************************************************************/
.tab-wrap{
    margin-bottom: 20px;
}
.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tab{
    flex-grow: 1;
    background: #0f2350;
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 0 5px;
    padding: 14px 0 12px;
    text-align: center;
    transition: 0.1s;
    vertical-align: bottom;
    line-height: 1.1; /* 行間を狭く */
}
.panel-group{
    min-height:100px;
    border:solid 1px #0f2350;
    border-top: 8px solid #274a78;
    padding: 10px;
}
.panel{
    display:none;
}
.tab.is-active{
    color:#FFF;
    transition: 0.1s;
    /*opacity: 0.7;*/
    /*padding-bottom: 30px;*/
    background-color: brown;
    line-height: 1.1; /* 行間を狭く */
}
.panel.is-show{
    display:block;
}

@media screen and (max-width:480px) { 
.tab{
    padding: 10px 0 7px!important;
}
.tab.is-active{
    /*padding-bottom: 15px;*/
}
}
/**************************************************************************/
/*必須の調整*/
.haveto{
	
 font-size:10px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
.haveto2{
 font-size:11px;
 padding:3px;
 background:#FD5959;
 color:#fff;
 border-radius:3px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any2{
 font-size:11px;
 padding:3px;
 background:#8479FF;
 color:#fff;
 border-radius:3px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist{
 display:block;
	  padding: 10px 20px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
	  padding: 10px 20px;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#FF8736;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
} 
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#FF8736;
}
/*送信ボタンのデザイン変更*/
#formbtn2{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#35C9FF;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
} 
/*送信ボタンマウスホバー時*/
#formbtn2:hover{
 background:#fff;
 color:#35C9FF;
}
/*送信ボタンのデザイン変更*/
#formbtn3{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#FF8736;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
} 
/*送信ボタンマウスホバー時*/
#formbtn3:hover{
 background:#fff;
 color:#FF8736;
}
/*ラジオボタンを縦並び指定*/
.radio2{
	font-size: 15px;
	
}

.entry-title {
display: none;
}
.verticallist2 .wpcf7-list-item {
  display: block;
  padding: 10px 20px;
}

.footer_tb td{
	background:#0f2350;
	border:none;
	
	
	
}
.customer_link{
	display: flex;
    align-items: center; /* 中央揃えにする */
    border: 1px solid black;
    width: 300px; /* 幅を調整 */
    padding: 10px;
    margin: 0px;
 /*   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ /* 影を追加 */
    background-color: #9AE4FF; /* 背景色を水色に指定 */
	font-size: 11pt;

}
.customer_link p {
    margin: 8px 0 5px 0;
    color: #000000;
  /*  line-height: 1.2;  行間を狭く */
	align: left;
	font-size: 18px;
	vertical-align: middle;
}
.content a {
    text-decoration: none;
}
.hanrei-hyou{
    width: 500px;
}
.inquiry-hanrei th{
    text-align:left;
    font-size:11pt;
    color:#FFFFFF;
    padding-right:5px;
    width:200px;
    background:#09318C;
    border:solid 1px #888888;
}
.inquiry-hanrei td{
    background-color:#D5E0FC ;
    font-size:11pt;
    border:solid 1px #464646;	
}
.div-container-hanrei {
    display: flex;
    font-size:11pt;
   /* justify-content:center;*/
     align-items: center; 
}
.div-container-hanrei span{
    display: flex;
    font-size:11pt;
   /* justify-content:center;*/
     align-items: center; 
}
.reservation-tag {
	display: flex;
    align-items: center; /* 中央揃えにする */
    border: 1px solid black;
    width: 330px; /* 幅を調整 */
    padding: 10px;
    margin: 2px 10px 2px 10px;
    /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);*/ /* 影を追加 */
    background-color: #FFFB9A; /* 背景色を黄色に指定 */
	font-size: 11pt;border-radius:5px;
}
.reservation-tag2 {
	display: flex;
	flex-direction: row;
    align-items: center; /* 中央揃えにする */
    /*border: 1px solid black;*/
    width: 520px; 
    /*padding: 5px 5px 0 5px;*/
    margin:2px 10px 2px 10px;
    text-decoration: none;
    /*background-color:;  背景色を黄色に指定 */
	/*font-size: 8px;*/
    
}
.reservation-details2{
    border: 1px solid black;
    background-color: #FFFB9A;
    padding: 7px 0px 7px 10px;
    margin: auto auto auto 2px;
    border-radius:5px;
    width: 350px;
    cursor: pointer;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reservation-tag2 h2 {
    font-size: 16px;
    margin:  0 0 4px 0;
    color: #000;
    line-height: 1.3; /* 行間を狭く */

}

.reservation-tag2 p {
    margin: 8px 0 7px 0;
    color: #000;
    line-height: 1.2; /* 行間を狭く */
	align: left;
	font-size: 14px;
	vertical-align: middle;
}
.karte_hearing_sheet,.karte_customer_info,.karte_customer_history,.karte_signature_info{
	width:1100px;
	margin: 20px auto;
	font-size: 20px;
	
}
.closebutton{
	font-size: 13pt;
	/*height:40px;*/
	margin: 30px auto;
	padding: 10px;
	display: block;
}
.status-icon2 {
    font-size: 14pt; /* アイコンのサイズ */
	margin-left: 5px;
    margin-right: 10px; /* 右側の余白 */
    /* 必要に応じて他のスタイルを追加 */
	background:#FF3A3A;
	padding:6px;
	color:#fff;

}
.status-icon-checkin {
    font-size: 13pt; /* アイコンのサイズ */
    margin: 2px 10px 2px 5px;
    /* 必要に応じて他のスタイルを追加 */
	background:#FF3A3A;
	padding:6px;
	color:#fff;
border: 1px solid #650000;
     border-radius:3px;
}
.status-icon-karute-link {
   /* width: 90px;
    height: 60px;*/
    font-size: 11pt; /* アイコンのサイズ */
    margin: auto;
    /* 必要に応じて他のスタイルを追加 */
	background:#AF6C00;
	padding: 12px 2px 12px 2px;
	color:#fff;
    border: 1px solid #985E00;
    border-radius:7px;
    vertical-align: middle;
    cursor: pointer;
}
.status-icon-non-checkin { /*チェックインアイコン 未チェックイン*/
    font-size: 13pt; /* アイコンのサイズ */
    margin: 2px 10px 2px 5px;
    /* 必要に応じて他のスタイルを追加 */
	background:#3A50FF;
	padding:6px;
	color:#fff;
    border: 1px solid #000F8D;
     border-radius:3px;
}
.status-icon {
    font-size: 20pt; /* アイコンのサイズ */
	margin-left: 5px;
    margin-right: 15px; /* 右側の余白 */
    /* 必要に応じて他のスタイルを追加 */
	background:#FF3A3A;
	padding:8px;
	color:#fff;

}
.no-status-icon {
    font-size: 20pt; /* アイコンのサイズ */
	margin-left: 5px;
    margin-right: 15px; /* 右側の余白 */
    /* 必要に応じて他のスタイルを追加 */
	/*background:#FF3A3A;*/
	padding:8px;
	color:#fff;

}
.reservation-tag h2 {
    font-size: 20px;
    margin:  0 0 4px 0;
    color: #000;
    line-height: 1.4; /* 行間を狭く */
}

.reservation-tag p {
    margin: 8px 0 4px 0;
    color: #000;
    line-height: 1.2; /* 行間を狭く */
	align: left;
	font-size: 18px;
	vertical-align: middle;
}
.tantouicon{
 font-size:9px;
 padding:4px;
 background:#3C3C3C;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;

 vertical-align: middle;

}
.customer_female{
 font-size:9px;
 padding: 4px 5px 4px 5px;
 background:#FC85C6;
 color:#fff;
 border-radius:2px;
 margin: 5px 5px 5px 0;
 position:relative;

 vertical-align: middle;
 border: 1px solid #FB4EAD;

}
.customer_male{
 font-size:9px;
 padding: 4px 5px 4px 5px;
 background:#57B3FF;
 color:#fff;
 border-radius:2px;
 margin: 5px 5px 5px 0;
 position:relative;

 vertical-align: middle;
border: 1px solid #1595FF;

}

.kozin-simei{
 font-size:8px;
 padding: 2px 4px 3px 4px;
 background:#001FD7;
 color:#fff;
 border-radius:2px;
 margin: 2px 5px 4px 0px;
 position:relative;

 vertical-align: middle;
border: 1px solid #000C57;
}
.free{
 font-size:8px;
 padding: 2px 4px 3px 4px;
 background:#7E7C7C;
 color:#fff;
 border-radius:2px;
 margin: 2px 5px 4px 0px;
 position:relative;

 vertical-align: middle;
border: 1px solid #383737;
}
.danzyo-simei{
 font-size:8px;
padding: 3px 4px 3px 4px;
 background:#00D703;
 color:#fff;
 border-radius:2px;
 margin: 2px 5px 4px 0px;
 position:relative;

 vertical-align: middle;
border: 1px solid #006B01;
}
.newcustomer{
 font-size:9px;
 padding: 4px 5px 4px 5px;
 background:#FF6565;
 color:#fff;
 border-radius:2px;
 margin: 5px 5px 5px 0;
 position:relative;
 bottom:1px;
 vertical-align: middle;
 border: 1px solid #FF1616;
}
.repeatcustomer{
 font-size:9px;
 padding: 4px 5px 4px 5px;
 background:#FF6565;
 color:#fff;
 border-radius:2px;
 margin: 5px 5px 5px 0;

 position:relative;
 bottom:1px;
 vertical-align: middle;
 border: 1px solid #FF1616;
}
#center-container2 {
    /*display:flex;
    justify-content: center;
	flex-direction:column; 
    align-items: center;

    padding: 0px 0px;
    margin: 0px;
	width:100%;*/
}
#center-container2 a{
       text-decoration: none;
}

.center-container {
    display: flex;
    justify-content: center;
	    flex-direction: column; /* ここを変更して縦方向に並べる */
    align-items: center;

    padding: 0;
    margin: 0;
}
.custom-pagination a {
    font-size: 16px; /* フォントサイズの変更 */
    padding: 5px 10px; /* パディングの追加 */
    /* その他のスタイル */
}
@media screen and (max-width: 500px) {
#popup-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 430px; /* 必要に応じて調整 */
    height: 90%; /* 必要に応じて調整 */
    overflow-y: auto; /* 縦方向のスクロールを有効にする */
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    background: white;
    z-index: 1000;
	max-height: 90vh; /* ビューポートの高さの90%まで */
    max-width: 90vw; /* ビューポートの幅の90%まで */
}
}
#popup-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 800px; /* 必要に応じて調整 */
    height: 90%; /* 必要に応じて調整 */
    overflow-y: auto; /* 縦方向のスクロールを有効にする */
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    background: white;
    z-index: 1000;
	max-height: 90vh; /* ビューポートの高さの90%まで */
    max-width: 90vw; /* ビューポートの幅の90%まで */
}
.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots {
  border: none;
background-color: transparent;
  /*追加*/
  margin: 0;
    padding-left: 2px;
    padding-right: 2px;
}
#pagerlinks {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 0px;
    margin-right: 0px;
    width:100%;
    
}
a.page-numbers,
span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #0f5474;
  background-color: #fff;
  border: 1px solid #0f5474;
  width: 40px;
  height: 40px;
  /*border-radius: 50%;*/
  /*追加*/
  margin: 0 8px;
}
.page-numbers.current {
  color: #fff;
  background-color: #0f5474;
  border: 1px solid #0f5474;
}


#loading-icon {
  display: none; /* 最初は非表示にします */
  position: fixed; /* 画面に固定します */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 背景を暗くします */
  z-index: 1000; /* 他の要素の上に表示されるようにします */

  justify-content: center; /* 水平方向の中央に配置 */
  align-items: center; /* 垂直方向の中央に配置 */
}
#loading-wrap{
  display: none; /* 最初は非表示にします */
  position: fixed; /* 画面に固定します */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 背景を暗くします */
  z-index: 1000; /* 他の要素の上に表示されるようにします */
  justify-content: center; /* 水平方向の中央に配置 */
  align-items: center; /* 垂直方向の中央に配置 */

}


.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
 vertical-align:middle;
}
/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}
/* Hide Loading Block */
.loading {
  opacity: 0;
  visibility: visible;
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


.user-info {
	margin-left: auto;
    margin-right: 0;
    display: block; /* 必要に応じて */
    width: 150px; /* または特定の幅 */
	
    position:static;
    top: 5px;
    right: 50px;
   /* */
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
	/*width: 150px;*/
	height: 100px;
}

.user-info .username {
    margin-right: 15px;
	font-size: 14px;
}

.user-info .logout-button{
    background-color: #ff4d4d;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 3px;
	font-size: 14px;
}


.user-info .logout-button:hover{
    background-color: #ff3333;
}
.inv-recaptcha-holder{
margin-top:70px;
margin-bottom: 50px;
}
.uketuke_container{
   margin: 0 30px;
}


#canvasContainer {
    position: relative;
	overflow-y: scroll;
	margin: 20px auto;

}
#signatureArea{
	overflow: hidden;
    margin: 0 auto;
	padding: 10px;
}
#signatureCanvas{
    border: 3px solid #000;
}
#otukareerror,#kegaerror,#signatureerror{
	font-size:14px;
	color:#FF0004;
	
}
#myCanvas {
    border: 1px solid #ccc;
}
#clearCanvas{
    width:120px;
    height:40px;
    font-size:15px;
    margin: 10px 10px 0px 0px;
    
}
.submitCanvas{
    width:180px;
    height:40px;
    font-size:18px;
    margin: 10px 10px 0px 0px;
  background: #2a4df4;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  　cursor: pointer;
    border-width: 0px;
    cursor: pointer;
}
.backButton{
    width:180px;
    height:40px;
    font-size:18px;
    margin: 10px 10px 0px 0px;
  background: #7C7C7C;
  color: #000000;
  font-weight: bold;
  border-radius: 8px;
  　cursor: pointer;
    border-width: 0px;
    cursor: pointer;
}
#transferDrawing{
    width:150px;
    height:30px;
    font-size:20px;
    margin: 10px 10px 0px 0px;
}
.mensekiText{
    font-size:18pt;
   	width: 100%; /* ページの幅に合わせて拡張 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
	margin: 10px;
    padding: 10px; /* テキストエリアの内側の余白 */
    border: 2px solid #3F3F3F; /* ボーダーのスタイル */
    line-height: 1.3; /* 行間を狭く */
	resize: none;
}
.sigText {
    font-size: 32px;
}
.container {
    width: 85%; /* コンテナの幅を85%に設定 */
    margin: 20px auto; /* 左右のマージンを自動に設定し、中央に配置 */
}
/*.container span{
    font-size: 18px;
}
.container p{
    font-size: 18px;
}*/
/*span p #itu {
    margin-left: 60px;
}*/

.container textarea{
	font-size:12pt;
   	width: 100%; /* ページの幅に合わせて拡張 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
	margin: 0px;
    padding: 5px; /* テキストエリアの内側の余白 */
    border: 2px solid #3F3F3F; /* ボーダーのスタイル */
    line-height: 1.2; /* 行間を狭く */
}	
.div-container2{
    display: flex;
    font-size:12pt;
    /*justify-content:center;*/
    align-items: center; 
}

@media (max-width: 500px){
   /* span p #itu {
    margin-left: 60px;
    }*/

    .container {
        width: 90%; /* コンテナの幅を85%に設定 */
        margin: 0px auto; /* 左右のマージンを自動に設定し、中央に配置 */
    }   
   /* .container span{ 
        width:100%;
	    font-size:15px;
        line-height: 0.9; 
        margin: 5px auto;
        padding: 5px; 
    }*/
    .container textarea{
    	font-size:15px;
       	width: 100%; /* ページの幅に合わせて拡張 */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
    	margin: 0px;
        padding: 5px; /* テキストエリアの内側の余白 */
        border: 2px solid #3F3F3F; /* ボーダーのスタイル */
        line-height: 1.2; /* 行間を狭く */
    }	
}