@charset "utf-8";
/*------ コロナ禍の渡航要件　タイトル -------*/
.covid_ttl {
  position: relative;
  color: rgba(91, 92, 118, 1.0);
  font-size: 25px;
  font-weight: bold;
  padding: 15px 0 25px;
  text-align: center;
  margin: 1.5em 0;
}
.covid_ttl:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 160px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(91, 92, 118, 1.0);
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.covid_ttl span {
  font-size: 20px;
  display: block;
}
/*----- タブのデザイン -----*/
.tab {
  list-style: none;
  border-bottom: 1px solid #ccc;
  display: block;
}
.tab_list {
  display: none;
}
.tab-item {
  border: 1px solid transparent;
  border-bottom: none;
  display: inline-block;
  margin: 0 0 -1px;
  border-radius: 4px 4px 0 0;
}
.tab-item:hover {
  border-color: #ccc;
}
.tab-item a {
  display: block;
  padding: 10px 15px;
}
.tab-item.active {
  border-color: #ccc;
  background-color: #fff;
}
.tab-item.active a {
  color: #606c76;
}
/*----- コロナ渡航の情報　大枠 -----*/
.covid_content {
  margin: 5% 4% 0%;
}
/*----- タブの中身を納める　大枠 -----*/
.tab-content {
  padding: 2%;
}
/*----- 各タブの中身のデザイン　active=0 -----*/
p.short-title {
  font-weight: bold;
  font-size: 1.2rem;
}
.list0 {
  margin: 4% 0;
  list-style-position: inside;
  background: rgba(91, 92, 118, 0.3);
  box-shadow: 0px 0px 0px 10px rgba(91, 92, 118, 0.3); /*線の外側*/
  border: dashed 2px rgba(91, 92, 118, 1.0); /*破線*/
  border-radius: 9px;
  margin-left: 5px; /*はみ出ないように調整*/
  margin-right: 5px; /*はみ出ないように調整*/
  padding: 0.8em;
}
.list0 li {
  line-height: 1.5;
  padding: 0.5em 0;
}
p.comment {
  margin-bottom: 15px;
}
.comment em {
  font-weight: bold;
  font-size: 1.1rem;
  font-style: normal;
  background: rgba(91, 92, 118, 0.2);
  border-radius: 5px;
  padding: 0px 8px;
}
/*----- 旅行契約の補足情報 -----*/
.box1 {
  position: relative;
  margin: 3em 0;
  padding: 1.1em 1em;
  border: solid 3px rgba(91, 92, 118, 1.0);
  border-radius: 8px;
}
.box1 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: rgba(91, 92, 118, 1.0);
  font-weight: bold;
}
.box1 p {
  margin-bottom: 15px;
  padding: 0;
}
/*-----　代表の思いコメント -----*/
.box2 {
  margin: 3em 0;
  background: rgba(91, 92, 118, 0.1);
}
.box2 .box-title {
  font-size: 1.2em;
  background: rgba(91, 92, 118, 1.0);
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 5px 5px 0 0;
}
.box2 p {
  padding: 20px 20px 10px;
  margin: 0;
}
/*----- 各タブの中身のデザイン　active=1 -----*/
.box1 ul {
  list-style-position: inside;
  list-style-type: square;
  color: rgba(91, 92, 118, 1.0);
}
.box1 ul li {
  margin-bottom: 15px;
  padding: 0;
}
.box1 ul li span {
  color: #4d4d4d;
}
/*----　モルディブ情報収集リンクのタイトル　----*/
.ror-link {
  padding: 5px 5px 5px 40px;
  margin: 5% 4% 4% 0%;
  font-size: 1.1rem;
  font-weight: bold;
  position: relative;
}
.ror-link:before {
  background-color: rgba(91, 92, 118, 1.0); /* 左側の線の色 */
  border-radius: 5px;
  content: '';
  position: absolute;
  top: 0;
  left: 3px; /* 左端からの位置 */
  width: 5px; /* 左側の線の幅 */
  height: 100%;
}
.ror-link:after {
  background-color: rgba(91, 92, 118, 0.4); /* 右側の線の色 */
  border-radius: 5px;
  content: '';
  position: absolute;
  top: 0;
  left: 12px; /* 左端からの位置 */
  width: 5px; /* 右側の線の幅 */
  height: 100%;
}
.box3 {
  margin: 8% 0%;
}
.box3 ul li {
  list-style: none;
  margin-bottom: 15px;
}
/*----- 各タブの中身のデザイン　active=3 -----*/
.tab3-pane ul {
  margin: 6% 0%;
}
.tab3-pane ul li {
  list-style: none;
  list-style-position: inside;
  margin-bottom: 40px;
}
.tab3-pane ul li a {
  padding: 10px 10px 10px 50px;
  display: block;
  border-bottom: 1px dotted rgba(91, 92, 118, 0.7);
  position: relative;
}
.tab3-pane ul li a:hover {
  background: rgba(91, 92, 118, 0.5);
}
.tab3-pane ul li a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 10px; /*アイコンの位置*/
  top: 10px; /*アイコンの位置*/
  color: rgba(91, 92, 118, 1.0); /*アイコン色*/
}
.tab3-pane p {
  margin: 8px;
}
.tab3-pane ul li a.enqtab {
  background: rgba(91, 92, 118, 0.7);
  border-radius: 3px;
  color: #fff;
}
.tab3-pane ul li a.enqtab:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 10px; /*アイコンの位置*/
  top: 10px; /*アイコンの位置*/
  color: #fff;
}
/*----- 各タブの中身のデザイン　active=4 -----*/
.tab3-pane ul li .instab {
  background: rgba(91, 92, 118, 0.7);
  border-radius: 3px;
  color: #fff;
}
.tab3-pane ul li a.instab:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 10px; /*アイコンの位置*/
  top: 10px; /*アイコンの位置*/
  color: #fff;
}
.box3 ol {
  list-style: none;
}
.box3 ol li {
  margin-bottom: 30px;
}
.sonpo {
  font-size: 0.4rem;
  color: rgba(91, 92, 118, 1.0);
  font-weight: bold;
}
/*-----　各タブの中身のデザイン　active=5 -----*/
.box4 {
  margin: 3em 0;
  background: rgba(91, 92, 118, 0.1);
}
.box4 .box-title {
  font-size: 1.2em;
  background: rgba(91, 92, 118, 1.0);
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box4 p {
  padding: 15px 20px 0px;
  margin: 0;
}
p.roundtrip {
  cursor: pointer;
  border-bottom: 1px dotted rgba(91, 92, 118, 0.5);
  padding: 15px 15px 15px 50px;
  margin: 0;
  border-radius: 5px 5px 0px 0px;
  position: relative;
  display: block;
}
p.roundtrip:hover {
  background: rgba(91, 92, 118, 0.5);
}
p.empha {
  background: rgba(91, 92, 118, 1.0);
  color: #fff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
p.roundtrip:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 15px; /*アイコンの位置*/
  top: 15px; /*アイコンの位置*/
  color: rgba(91, 92, 118, 1.0); /*アイコン色*/
}
p.roundtrip.empha:after {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute; /*絶対位置*/
  font-size: 1em; /*サイズ*/
  left: 15px; /*アイコンの位置*/
  top: 15px; /*アイコンの位置*/
  color: #fff;
}
.simple {
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
}
.center {
  text-align: center;
}
/*----　フィジー情報収集リンクのタイトル　----*/
.nan-link {
  padding: 5px 5px 5px 40px;
  margin: 5% 4% 4% 0%;
  font-size: 1.1rem;
  font-weight: bold;
  position: relative;
}
.nan-link:before {
  background-color: rgba(91, 92, 118, 1.0); /* 左側の線の色 */
  border-radius: 5px;
  content: '';
  position: absolute;
  top: 0;
  left: 3px; /* 左端からの位置 */
  width: 5px; /* 左側の線の幅 */
  height: 100%;
}
.nan-link:after {
  background-color: rgba(91, 92, 118, 0.4); /* 右側の線の色 */
  border-radius: 5px;
  content: '';
  position: absolute;
  top: 0;
  left: 12px; /* 左端からの位置 */
  width: 5px; /* 右側の線の幅 */
  height: 100%;
}
/*----- 新着ニュース　文章の背景 -----*/
.newinfo {
  padding: 0.5rem 1rem 0rem 1rem;
}
/* モバイル版
------------------------------- */
@media (max-width: 600px) {
  .tab-pane p {
    font-size: 0.88rem;
  }
  /*改行*/
  .css_br:after {
    content: "　";
    white-space: pre;
  }
  /*------ コロナ禍の渡航要件　タイトル -------*/
  .covid_ttl {
    color: rgba(91, 92, 118, 1.0);
    font-size: 18px;
    padding: 10px 0 15px;
    margin: 2.0em 0;
  }
  .covid_ttl:before {
    width: 130px;
    height: 70px;
    border: 1px solid rgba(91, 92, 118, 1.0);
    border-left-color: transparent;
    border-right-color: transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .covid_ttl span {
    font-size: 15px;
  }
  /*----- コロナ渡航の情報　大枠 -----*/
  .covid_content {
    margin: 8% 0% 0%;
  }
  /*----- タブのデザイン -----*/
  .tab {
    display: none;
  }
  .tab_list {
    display: block;
  }
  /*----- 各タブの中身のデザイン　active=0 -----*/
  p.short-title {
    font-size: 0.95rem;
  }
  .list0 {
    margin: 8% 0;
    border: dashed 1px rgba(91, 92, 118, 1.0); /*破線*/
    border-radius: 5px;
    margin-left: 5px; /*はみ出ないように調整*/
    margin-right: 5px; /*はみ出ないように調整*/
    padding: 0.5em;
  }
  .list0 li {
    line-height: 1.7;
    padding: 0.8em 0;
    font-size: 0.88rem;
  }
  p.comment {
    margin-bottom: 20px;
    font-size: 0.88rem;
    line-height: 1.7;
  }
  .comment em {
    font-size: 0.90rem;
    padding: 1px 5px;
  }
  /*----- 旅行契約の補足情報 -----*/
  .box1 {
    border: solid 2px rgba(91, 92, 118, 1.0);
    border-radius: 5px;
  }
  .box1 .box-title {
    line-height: 1;
    font-size: 15px;
  }
  .box1 p {
    font-size: 0.88rem;
    line-height: 1.7;
  }
  .box1 span {
    font-size: 0.88rem;
    line-height: 1.7;
  }
  /*-----　代表の思いコメント -----*/
  .box2 .box-title {
    font-size: 13px;
    padding: 7px;
  }
  .box2 p {
    padding: 15px;
    font-size: 0.88rem;
    line-height: 1.7;
  }
  /*----- レスポンシブ対応のセレクトボックス -----*/
  select {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
    display: block;
    width: 100%;
    padding: 10px;
    height: 42px;
    outline: none;
  }
  select:focus {
    border-color: rgba(91, 92, 118, 1.0);
  }
  select.minimal {
    background-image: linear-gradient(45deg, transparent 50%, #ccc 50%), linear-gradient(135deg, #ccc 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px), calc(100% - 2.5em) 0.7em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
  }
  select.minimal:focus {
    background-image: linear-gradient(45deg, rgba(91, 92, 118, 1.0) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, rgba(91, 92, 118, 1.0) 50%), linear-gradient(to right, rgba(91, 92, 118, 1.0), rgba(91, 92, 118, 1.0));
    background-position: calc(100% - 15px) 1.1em, calc(100% - 20px) 1.1em, calc(100% - 2.5em) 0.7em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    border-color: rgba(91, 92, 118, 1.0);
    outline: 0;
  }
  .select-box {
    margin-top: 11%;
    margin-bottom: 8%;
    color: #4d4d4d;
    font-size: 0.9rem;
    padding-left: 15px;
  }
  option.active {
    background-color: rgba(130, 130, 130, 0.3);
    cursor: default;
    display: none;
  }
  /*----- タブの中身を納める　大枠 -----*/
  .tab-content {
    padding: 0%;
  }
  /*----　モルディブ情報収集リンクのタイトル　----*/
  .ror-link {
    padding: 5px 5px 5px 30px;
    margin: 3% 1% 5% 2%;
    font-size: 0.97rem;
  }
  .ror-link:before {
    left: 0px; /* 左端からの位置 */
    width: 3px; /* 左側の線の幅 */
  }
  .ror-link:after {
    left: 9px; /* 左端からの位置 */
    width: 3px; /* 右側の線の幅 */
  }
  .box3 {
    margin: 11% 0%;
  }
  .box3 ul li {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 25px;
  }
  .box3 ol li {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 25px;
  }
  /*----- 各タブの中身のデザイン　active=3 -----*/
  .tab3-pane ul {
    margin: 8% 0% 25%;
  }
  .tab3-pane ul li {
    margin-bottom: 35px;
  }
  .tab3-pane ul li a {
    padding: 7px 7px 7px 40px;
    font-size: 0.88rem;
  }
  .tab3-pane ul li a:before {
    font-size: 0.88rem; /*サイズ*/
    left: 12px; /*アイコンの位置*/
    top: 7px; /*アイコンの位置*/
  }
  .tab3-pane ul li a.enqtab:after {
    font-size: 0.88rem; /*サイズ*/
    left: 12px; /*アイコンの位置*/
    top: 7px; /*アイコンの位置*/
  }
  .tab3-pane ul li a.instab:after {
    font-size: 0.88rem; /*サイズ*/
    left: 12px; /*アイコンの位置*/
    top: 7px; /*アイコンの位置*/
  }
  .tab3-pane p {
    line-height: 1.7;
  }
  /*----　フィジー情報収集リンクのタイトル　----*/
  .nan-link {
    padding: 0px 5px 10px 30px;
    margin: 3% 1% 5% 1%;
    font-size: 0.95rem;
  }
  .nan-link:before {
    left: 0px; /* 左端からの位置 */
    width: 3px; /* 左側の線の幅 */
    height: 80%;
  }
  .nan-link:after {
    left: 9px; /* 左端からの位置 */
    width: 3px; /* 右側の線の幅 */
    height: 80%;
  }
  /*----- active=5 -----*/
  p.roundtrip {
    padding: 10px 10px 10px 50px;
  }
  p.roundtrip:before {
    font-size: 0.85em;
    left: 15px; /*アイコンの位置*/
    top: 13px; /*アイコンの位置*/
  }
  p.roundtrip.empha:after {
    font-size: 0.85em;
    left: 15px; /*アイコンの位置*/
    top: 13px; /*アイコンの位置*/
  }
}