/* ページ全体に関わるcss */
* {
  padding: 0;
  margin: 0;
    /*全ページのフォント指定*/
  /* font-family: "BIZ UDPゴシック","BIZ UDPGothic"; */
  /* font-family: "Arial"; */
  /* font-family: "Yu Gothic"; */
  /* font-family: "Comic Sans MS", "Script"; */
  /* font-family:"ゴシック体", sans-serif; */     /*デフォルト*/
  font-family: "明朝体", serif;
  line-height: 0.95;

}

html {
  text-align: center;
  scroll-behavior: smooth;
}

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

body {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5;
  margin: 0;
}

/* テーブル内のデータのフォント指定（計画書閲覧） */


/* ヘッダー */
.header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  height: 40px;
}

/* ロゴ */
.logo {
  flex-shrink: 0;
  height: 100%;
  padding: 5px 0;
}

img.logo_img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

/* 各種情報 */
.various_information {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 48vw;
  height: 60px;
}

.upper_tier {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 50%;
}

.lower_tier {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 50%;
}

.has_closing_month,
.no_closing_month,
.plan_name, 
.user_name,
.log_in_out,
.plan_select {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  border-left: 1px solid #ddd;
  height: 100%;
  border-collapse: collapse;
}

.has_closing_month,
.no_closing_month {
  border-top: 1px solid #ddd;
}

.plan_name, 
.user_name {
  border-top: 1px solid #ddd;
}

.log_in_out,
.user_name {
  border-right: 1px solid #ddd;
}



.has_closing_month {
  width: 45%;
}

.plan_name {
  width: 35%;
}

.no_closing_month {
  width: 25%;
}
 
.user_name,
.log_in_out,
.plan_select {
  width: 25%;
}

.log_in_out a,
.plan_select a,
.color_years,
.color_plan {
  color: red;
}

.log_in_out a,
.plan_select a{
  text-decoration: none;
}

.log_in_out a:hover {
  color: rgba(255, 0, 0, 0.500);
}

/* グローバルナビ */
.gnavi_wrap {
  width: 100%;
  position: relative;
}

.gnavi_lists {
  display: flex;
  padding: 0;
}

.gnavi_list {
  flex: 1;
  height: 40px;
  background-color: #334453;
  position: relative;
  transition: all .3s;
  list-style: none;
  text-align: center;
}

.gnavi_list:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s;
}

.gnavi_list:hover::before,
.gnavi_list:hover {
  background-color: #0071BB;
}

.gnavi_list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: all .3s;
}

.gnavi_list:hover a {
  color: #fff;
}

.gnavi_list a img {
  object-fit: contain;
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

/* グローバルナビ　ドロップダウンメニュー */
.dropdown_lists {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #004d80;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease; /* アニメーションの設定 */
}

.gnavi_list:hover .dropdown_lists {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown_list {
  height: 40px;
  transition: all .3s;
  position: relative;
}

.dropdown_list:not(:first-child)::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #3492d1;
  position: absolute;
  top: 0;
  left: 0;
}

.dropdown_list:hover {
  background-color: #334453;
}

.dropdown_list a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding: 0 20px;
}

.dropdown_list a::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  right: 15px;
  top: calc(50% - 5px);
}

.current {
  background-color: #3492d1;
}