*,
*:before,
*:after {
  box-sizing: border-box;
}

a {
	color: #777; 
	
}

a:hover {; 
	background-color: #eee; 
}

body {
  animation: fadein 1.5s forwards;
}

/* なめらかに表示 */
@keyframes fadein {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}


footer p {
  color     : #555;
  font-size :0.7rem;
  text-align : center;
}

.headline {
  font-weight  : bold;
  padding      : 0.25em 0.5em;
  color        : #777; 
  border-left  : solid 5px #89c4ff;
  border-bottom: solid 1px #89c4ff;
}

.headline2 {
  font-weight     : bold;
  padding         : 0.25em 0.5em;
  color           : #777; 
  border-left     : solid 5px #89c4ff;
  background-color: #add6ff;
}

/* iPhone用inputリセット */
button {
  //border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  //border: none;
  box-sizing: border-box;
  cursor: pointer;
}

.label_red {
  font-size        : 0.8rem;
  font-weight      : bold;
  color            : #C01825;
  background-color : #FDD9D9;
  padding          : 2px 15px;
  border-radius    : 5px;
  margin           : 5px;
}

.label_yallow {
  font-size        : 0.8rem;
  font-weight      : bold;
  color            : #775F00;
  background-color : #EFEDBC;
  padding          : 2px 15px;
  border-radius    : 5px;
  margin           : 5px;
}

.label_blue {
  font-size        : 0.8rem;
  font-weight      : bold;
  color            : #1e50a2;
  background-color : #bce2e8;
  padding          : 2px 15px;
  border-radius    : 5px;
  margin           : 5px;
}

.label_green {
  font-size        : 0.8rem;
  font-weight      : bold;
  color            : #006400;
  background-color : #90ee90;
  padding          : 2px 15px;
  border-radius    : 5px;
  margin           : 5px;
}

.label_glay {
  font-size        : 0.8rem;
  font-weight      : bold;
  color            : #777;
  background-color : #C0C0C0;
  padding          : 2px 15px;
  border-radius    : 5px;
  margin           : 5px;
}

.index_div{

    position     : relative;
    border-radius: 8px;
    border       : solid 3px #808080;
    margin       : 0.5em 0.5em 2em 2em;
    padding      : 10px;
}

.btn_sp {
    font-size       : 1.0em;
    padding         : 3px 5px;
    margin          : 2px;
    width:200px;
    height:120px;
    background-color: #2E668C;
    color           : #ffffff;
    border-style    : none;
    border-radius   : 5px;
    box-shadow      : 1px 1px 1px 1px #666;
    -moz-box-shadow : 1px 1px 1px 1px #666;
    -webkit-box-shadow: 1px 1px 1px 1px #666;
}

.btn_menu {
    font-size       : 1.0em;
    padding         : 10px 5px;
    margin          : 2px;
    background-color: #2E668C;
    color           : #ffffff;
    border-style    : none;
    border-radius   : 5px;
    box-shadow      : 1px 1px 1px 1px #666;
    -moz-box-shadow : 1px 1px 1px 1px #666;
    -webkit-box-shadow: 1px 1px 1px 1px #666;
}

.btn {
    font-size       : 1.0em;
    padding         : 3px 5px;
    margin          : 2px;
    background-color: #2E668C;
    color           : #ffffff;
    border-style    : none;
    border-radius   : 5px;
    box-shadow      : 1px 1px 1px 1px #666;
    -moz-box-shadow : 1px 1px 1px 1px #666;
    -webkit-box-shadow: 1px 1px 1px 1px #666;
}

.btn:hover {
    background      : #fff;
    color           : #2E668C;
    transition      : all 0.2s ease;
}

.btn:active {
    background-color: #fff;
    color           : #777;
    transform       : scale(.95);
}


.btn_disabled {
    font-size       : 1.0em;
    padding         : 3px 5px;
    margin          : 2px;
    background-color: #C0C0C0;
    color           : #ffffff;
    disabled        : true;
    border-style    : none;
    border-radius   : 5px;
    box-shadow      : 1px 1px 1px 1px #666;
    -moz-box-shadow : 1px 1px 1px 1px #666;
    -webkit-box-shadow: 1px 1px 1px 1px #666;
}

.btn_attention {
    font-size       : 1.0em;
    padding         : 3px 5px;
    margin          : 2px;
    background-color: #ff9500;
    color           : #ffffff;
    border-style    : none;
    border-radius   : 5px;
    font-family     : 'Noto Sans JP', sans-serif;
    font-weight     : bold;
    box-shadow      : 1px 1px 1px 1px #666;
    -moz-box-shadow : 1px 1px 1px 1px #666;
    -webkit-box-shadow: 1px 1px 1px 1px #666;
}

.btn-frame {
    justify-content: center;
    padding         : 5px 10px;
    margin          : 2px;
    margin          : 1px;
    font-family     : 'Noto Sans JP', sans-serif;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #2589d0;
    color :#fff;
    font-size: 0.9em;
   
}

.btn-frame:hover {
    background      : #afeeee;
    color           : #2589d0;
    transition      : all 0.2s ease;
}


.btn-frame:active {
    background-color: #fff;
    color           : #777;
    transform       : scale(.95);
}


.btn-slim {
    justify-content: center;
    padding          : 5px 10px;
    font-family      : 'Noto Sans JP', sans-serif;
    border           : none;
    border-radius    : 5px;
    background-color : #2589d0;
    color            :#fff;
    font-size        : 0.9em;
}

.btn-slim:hover {
    background      : #afeeee;
    color           : #2589d0;
    transition      : all 0.2s ease;
}


.btn-slim:active {
    background-color: #fff;
    color           : #777;
    transform       : scale(.95);
}



.btn-frame_green {
    justify-content: center;
    padding         : 5px 10px;
    margin          : 2px;
    margin          : 1px;
    font-family     : 'Noto Sans JP', sans-serif;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color:#00947a;
    color :#fff;
    font-size: 0.9em;
   
}

.btn-frame_green:hover {
    background-color: #d6ffd6;
    color           : #00947a;
    transition      : all 0.2s ease;
}


.btn-frame_green:active {
    background-color: #fff;
    color           : #777;
    transform       : scale(.95);
}


.bg_readonly{
	
	background-color : #faebd7  !important;
	
}


/*--- ボタン標準 ---*/
.btn_close {
    font-weight     : bold;
    font-size       : 1.0em;
    max-width       : 300px;
    text-align      : center;
    padding         : 5px 10px;
    margin          : 5px;
    background-color: #2E668C;
    color           : #ffffff;
    border          : 2px solid #2E668C;
    border-radius   : 15px;
}

.btn_close:hover {
    background   : #fff;
    color        : #2E668C;
    transition   : all 0.2s ease;
}

.btn_close:active {
    background-color: #fff;
    color           : #777;
    transform       : scale(.95);
}



.menubtn_sel {
	text-align  : center;
	width       : 100%;
	padding     : 30px 20px ;
	margin-right: 5px;
	color       : #fff;
	background  : #aaa;
}

.menubtn {
	text-align  : center;
	width       : 100%;
	padding     : 30px 20px ;
	margin-right: 5px;
	color       : #888;
	background  : #fff;
	transition  : 0.3s;
}

.menubtn:hover{
	color      : #333;
	background : #eee;
	box-shadow : 5px 5px 0px 0 rgb(60, 194, 235);
}

.frm0 {
  // システム自動設定フィールド（青背景）
  height: 1rem;
  font-size: 0.8rem;
  border :2px solid #aaa;
  margin :1px 0px 0px 0px;
  padding:2px 2px 4px 4px;
  border-radius:3px;
  box-sizing: border-box;
  background-color:#dbedff;
}

.frm1 {
  // 任意フィールド
  height: 1rem;
  font-size: 0.8rem;
  border :1px solid #aaa;
  margin :1px 0px 1px 0px;
  padding:2px 2px 4px 4px;
  border-radius:3px;
  box-sizing: border-box;
  background-color:#ffffe0;
}

.frm2 {
  // 必須フィールド（赤背景）
  height: 1rem;
  font-size: 0.8rem;
  border :1px solid #aaa;
  margin :1px 0px 1px 0px;
  padding:2px 2px 4px 4px;
  border-radius:3px;
  box-sizing: border-box;
  background-color:#ffbcbc;
}

.frm3 {
  // 特殊フィールド（フレーム無し）
  height: 1rem;
  font-size: 0.8rem;
  border :0px solid #FFF;
  margin :0px 0px 0px 0px;
  padding:2px 2px 4px 4px;
  box-sizing: border-box;
  background-color:#FFFFFF;
}

.loading {
  display: table;
  width:   100%;
  height:  100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index:100;
}

.loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url(./img/ajax-loader.gif) center center no-repeat;

}

.successMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url(./img/arrival.png) center center no-repeat;
}

.kakomi-box2 {
 margin : 1em auto;
 padding: 0.5em;
 display : inline-block;
 color: #666; /* 文字色 */
 background-color: #f7f7f7; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}

.fixed00{
  position: sticky;
  left: 0;
  top: 0;
  color: #fff;
  background: #333;
  z-index: 100;
  font-size  : 0.8em;
  &:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}

.fixed01{
  position: sticky;
  left: 0;
  color: #fff;
  background: #333;
  z-index: 10;
  font-size  : 0.8em;
  &:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}

.fixed02{
  position   : sticky;
  top        : 0;
  text-align : center;
  color      : #fff;
  background : #333;
  font-size  : 0.9em;
  z-index: 5;
  &:before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}

.label {
	display: none;
}

.pclabel{
	font-size :1em;
	display: block;
}


.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #555;
  display: block;
  order: -1;
}


.tab-label {
	color: White;
	background: LightGray;
	margin-right: 5px;
	padding: 3px 12px;
	order: -1;
	border-radius: 5px 5px 0 0;
}
.tab-content {
	width: 100%;
	display: none;
}
.tab-switch:checked+.tab-label {
	background: #555;
}
.tab-switch:checked+.tab-label+.tab-content {
	display: block;
}
.tab-switch {
	display: none;
}

.vertical-tab-wrap {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.vertical-tab-label {
  width: 150px;
  color: White;
  background: LightGray;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  border-radius: 4px 0 0 4px;
  margin: 5px -1px 5px 1px;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  float:left;
}
.vertical-tab-content {
  display:none;
}
/* アクティブなタブ */
.vertical-tab-switch:checked+.vertical-tab-label {
  background: #555;
  border-right-color: White;
}
.vertical-tab-switch:checked+.vertical-tab-label+.vertical-tab-content {
  width: calc(100% - 150px); /* - ボタン幅 */
  height: 100%;
  padding: 15px;
  border-left: 1px solid Gray;
  display:block;
}
/* ラジオボタン非表示 */
.vertical-tab-switch {
  display: none;
}






.breadcrumb {
  margin-bottom: 10px;
  margin-left : 0px;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  padding: 5px;
  white-space: nowrap;
  list-style: none;
}

.breadcrumb li:after {
  content: '>';
  padding: 5px;
  color: #72a1f7;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  border-radius: 10px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  padding: 5px;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

.pankzu {
  font-size:0.8em;
  color: #C0C0C0;
}
.pankzu a {
  display: inline-block;
  font-size:0.7em;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  padding: 2px 10px;
}

/* ラジオボタン02 */
input[type=radio] {
    display: none;
}
.radio02 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding   : 0px 5px 0px 26px;
    position: relative;
    width: auto;
}
.radio02::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio02::after {
    background: #ff6347;
    border-radius: 50%;
    content: '';
    display: block;
    height: 8px;
    left: 10px;
    margin-top: -3px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 8px;
}
input[type=radio]:checked + .radio02::before {
    border-color: #666;
}
input[type=radio]:checked + .radio02::after {
    opacity: 1;
}


.FromLabel{
  width          : 100%;
  max-width      : 248px;
  letter-spacing : 0.05em;
  font-size      : 0.7rem;
  font-weight    : bold;
  color          : #555;
  margin         : 10px 3px 3px 3px; /*上 右 下 左*/
}

.FormLabelRequired {
  border-radius : 6px;
  margin-right  : 10px;
  padding       : 5px 4px;
  display       : inline-block;
  text-align    : center;
  background    : #5bc8ac;
  color         : #fff;
  font-size     : 0.7rem;
  font-weight   : bold;
  letter-spacing : 0.05em;
}

.FormItemInput_picker {
  border        : 1px solid #ddd;
  border-radius : 3px;
  padding-left  : 5px;
  padding-right : 5px;
  height        : 1.8rem;
  flex          : 1;
  width         : calc(100% - 1rem - 15px);
  background    : #eaedf2;
  font-size     : 0.8rem;
  font-weight   : bold;
  color         : #555;
  font-family   : 'Noto Sans JP', sans-serif;
}

.FormItemInput {
  border        : 1px solid #ddd;
  border-radius : 3px;
  padding-left  : 5px;
  padding-right : 5px;
  height        : 1.8rem;
  flex          : 1;
  width         : calc(100% - 1rem - 15px);
  background    : #eaedf2;
  font-size     : 0.8rem;
  font-weight   : bold;
  color         : #555;
  font-family   : 'Noto Sans JP', sans-serif;
}

.FormItemInput_spreadsheet {
  border        : none;
  padding-left  : 5px;
  padding-right : 5px;
  height        : 1.8rem;
  flex          : 1;
  width         : calc(100% - 1rem - 15px);
  background    : #eaedf2;
  font-size     : 0.8rem;
  font-weight   : bold;
  color         : #555;
  font-family   : 'Noto Sans JP', sans-serif;
}


.Com_Text{
  font-size     : 0.8rem;
  font-weight   : bold;
  color         : #555;
  font-family   : 'Noto Sans JP', sans-serif;

}

.Com_Nowrap{
  white-space   : nowrap;
}

.popupwindow-001 {
    position        : relative;
    max-width       : 1150px;
    height          : 85vh;
    margin          : 0 auto;
    padding         : calc(1em + 25px) 10px 10px;
    border          : 2px solid #5f8db4;
    border-radius   : 5px;
    overflow-y      : auto;
    overflow-x      : hidden;
    background-color: #fff;
}

.popupwindow_title {
    position: absolute;
    top   : 0;
    left  : 0;
    width : 100%;
    padding     : 5px;
    color       : #fff; 
    height      : 30px;
    background-color: #5f8db4;
    font-size     : 0.8rem;
    font-weight   : bold;
    font-family   : 'Noto Sans JP', sans-serif;
}

.popupwindow-001 p {
    margin: 0px;
    padding: 0px;
}


.toggle-button-004 {
    display      : flex;
    align-items  : center;
    position     : relative;
    width        : 150px;
    height       : 40px;
    border-radius: 40px;
    box-sizing   : content-box;
    border       :1px solid #777;
    background-color: #90ee90;
    cursor       : pointer;
    transition   : background-color .4s;
}

.toggle-button-004:has(:checked) {
    background-color: #ffe5e5;
}

.toggle-button-004::before {
    position: absolute;
    left: 5px;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: #006400;
    content: '';
    transition: left .4s;
}

.toggle-button-004:has(:checked)::before {
    left: 100px;
    background-color: #ff8d8d;
}

.toggle-button-004::after {
    position: absolute;
    left: 23px;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    font-size : .9em;
    content   : '有効';
    transition: left .4s;

}

.toggle-button-004:has(:checked)::after {
    left       : 118px ;
    font-size  : 0.9rem;
    color      : #fff;
    font-family: "Font Awesome 5 Free";
    content: '\f070';
    white-space   : nowrap;
}

.toggle-button-004 input {
    display: none;
}

.spmenustyle{
	display :none;
}

.btn-menu{
	display :none;
}

.nav_smartphone {
	display :none;
}

.c-header {
  z-index: 9;
  align-items: center;
  background-color: #eee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}


.container {
    width: calc( 100% - ( 20px * 2 ) );
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}


.cp_navi04 ul.topnav {
  display        : flex;
  width          : 100%;
  margin         : 0;
  padding        : 0;
  background     : #fff;
  list-style-type: none;
}

.cp_navi04 ul.topnav li {
  width          : calc(100% / 5);
}

.cp_navi04 ul.topnav li a {
  display         : block;
  text-align      : center;
  padding         : 24px 26px;
  text-decoration : none;
  color           : #555;
  font-size       : 0.75rem;
  font-weight     : bold;
  border-radius   : 2px;
  cursor          : default;
  white-space     : nowrap;
}

.cp_navi04 ul.topnav li a:hover:not(.active) {
  background-color     : #ffa500;
  color                : #fff;
  cursor               : pointer;
  transition           : 0.8s;

}

.cp_navi04 ul.topnav li a.active {
  text-decoration       : underline  2px;
  text-underline-offset : 0.8em;
  
}


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

	.btn-menu{
	  display    : inline-block;
	  border     : 1px solid #999;
	  background : #555;;
	  color      : #fff;
	  padding    : 10px 5px;
	  font-size  : 0.9rem;
	  cursor     : pointer;
	  line-height: 1;
	}
	 
	/* メニュー */
	.nav_smartphone {
	  display    : inline-block;
	  background: #0bd;
	  position: absolute;
	  z-index: 1;
	  top: 3.125rem;
	  right: 0;
	  overflow-x: hidden;
	  text-align: center;
	  width: 0;
	  transition: .5s;
	}

	/* メニューを開いた時 */
	nav.open-menu {
	  width: 100%;
	}

	.spmenustyle{
		display   : block;
	}
	
	.spmenustyle li {
		display   : inline-block;
		border    : none;
		width     : 300px;
		font-size : 0.8rem;
		text-align: left;
		padding   : 8px 3px;
	}

	.tap:active{
		background-color : #fff;
		color            : #000;
		transition       : 0.2s;
	}


	.spmenustyle li ul li {
		border-bottom : 1px solid #fff;
		display   : inline-block;
		width     : 250px;
		font-size : 0.8rem;
		text-align: left;
		padding   : 8px 3px;
	}
	
	.spmenustyle li ul li:active{
		background-color : #fff;
		color            : #000;
		transition       : 0.2s;
	}

	.pcmenustyle{
		display :none;
	}

	.index_div{

	    position     : relative;
	    border-radius: 8px;
	    border       : solid 3px #808080;
	    margin       : 1em 0.1em 0.5em 0.5em;
	    padding      : 5px;
	}

	.btn {
	    font-size       : 0.9em;
	    padding         : 5px 3px;
	    margin          : 2px;
	    background-color: #da6046;
	    color           : #ffffff;
	    border-style    : none;
	    border-radius   : 5px;
	    box-shadow      : 1px 1px 1px 1px #666;
	    -moz-box-shadow : 1px 1px 1px 1px #666;
	    -webkit-box-shadow: 1px 1px 1px 1px #666;
	}

	.btn_menu {
	    font-size       : 1.0em;
	    padding         : 5px 5px;
	    background-color: #da6046;
	    color           : #ffffff;
	    border-style    : none;
	    border-radius   : 5px;
	    box-shadow      : 1px 1px 1px 1px #666;
	    -moz-box-shadow : 1px 1px 1px 1px #666;
	    -webkit-box-shadow: 1px 1px 1px 1px #666;
	}

	.modal_window {
	    top : 50;
	    left: 10;
	    margin: 0 0 0 0;
	    width : calc(100% - 20px);
	    height: calc(100% - 100px);
	    text-align: center;
	    display: block;
	    background: #F0F0F0;
	    position: absolute;
	    z-index: 10;
	}
	
	.label {
		display      :inline;
		font-size    :0.7em;
		font-weight  :bold;
	}
	
	.pclabel{
		display:none;
	}
	
}