@charset "utf-8";
/*全体の設定 */
html, body {width:100%;height:100%}
html {scroll-behavior:smooth;font-size:16px}
body {animation:fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal}
@keyframes fadeIn {0%{opacity:0} 100%{opacity:1}}
@-webkit-keyframes fadeIn{0%{opacity:0} 100%{opacity:1}}

@media (prefers-uced-motion:reduce) {html{scroll-behavior:auto}}
body {
  background-color: #f5f5f5;
  margin: 0; padding: 0;
  font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;
  -webkit-text-size-adjust:none;
  color: #333;
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, form, figure, form { margin: 0px; padding: 0px; font-size: 100%}
ul { list-style-type: none}
ol { padding-left: 20px}
img { border:none; max-width: 100%; height: auto; vertical-align: middle}
table { border-collapse: collapse; font-size: 100%; border-spacing: 0}
iframe { width: 100%}

/*画像設定 */
.img_square { position: relative;  overflow: hidden; width: 150px; height: 150px}
  .img_square img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto}
.img-fit { min-width: 100%; max-width: 1000px}

/*リンク（全般）設定 ----------*/
a { -webkit-transition: 0.5s; transition: 0.5s; text-decoration: none}
a[target="_blank"]{ color:#fc5185;}
/*a[target="_blank"]:after { margin-left: 0.2em; font-size: 80%; font-weight: 300; vertical-align: middle; content: "(外部リンク)";}*/
a[target="_blank"]:after {font-family: "Material Icons";
    margin-left: 0.3em;
    vertical-align: middle;
    content: "\e89e";
}

/*コンテンツ（左右ブロックを囲むブロック） */
#container { margin: 1.5rem; overflow: hidden}

h1 { margin: 0 0 2rem 0; font-weight: normal}
  h1:after { content: ""; display: block; height: 3px; background-color: #FF8C96}
  h1 a { display: inline-block; padding: 0; margin: 0 auto; font-size: 1.1rem; color: #333; text-decoration: none}
  h1 a:before { color: #FF8C96; margin-right: 0.25rem; vertical-align: middle; content: "●"}

/*メインコンテンツ ----------*/
#main { padding-bottom: 30px; overflow: hidden}

/*hタグの設定*/
.headline_h2 { position: relative; margin-bottom: 1rem; padding-left:0.3rem; border-left:0.3rem solid #8E1B3D; font-size: 1.1rem;font-weight:normal; color: #333}
h3 { font-size: 1rem; color:#8E1B3D }
  h3::before { content: "・"; font-size: 0.8rem; margin-right: 0.3em; vertical-align: middle}
h3.nostyle { margin-bottom: 1em;}
h3.nostyle::before {content: none;}
h3.bl_caption {
	background-color: #8E1B3D;
	padding: 0.2em 1em 0.2em 1.2em;
	font-weight: 600;
	font-size: 1rem;
	color: white;
	letter-spacing: 0.2em;
}
h3.bl_caption::before {content: none;}
h4 { padding: 0.2em; border-bottom: 3px double dodgerblue; margin-bottom: 0.8em}
h5 { color: #364f6b; font-size: 1rem}

#main p{margin-top:1em}
#main p:first-child{margin-top:0}
section{margin-top:2em}
section:first-of-type{margin-top:0}

/*swiper */
.swiper-container { max-width: 100%; margin: 0 0 2rem}
.swiper-slide img { display: block; position: relative}
.swiper-slide .imgcaption { display: none}
.swiper-container { position:relative}

/*公開準備中 */
#setup_tp { text-align: center; padding: 4em; min-height: 500px; color: #535353}
#setup_tp .tit { display: block; font-size: 24px}
#setup_tp .tit i { display: block}

/*flexbox */
.flexbox { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap}
.flexbox.flcenter { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
.flexbox .flex_item.set1 { width: 100%}
.flexbox .flex_item.set2 { width: 50%}
.flexbox .flex_item.set3 { width: 33%}
.flexbox .flex_item.padding-haif { width: 50%}

.btn_set { position: relative; display: block; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #fff!important; text-shadow: 0 0 5px rgba(255, 255, 255, 0); transition: 0.4s; width: 75%; margin: 1rem auto 0 auto}
.btn_set.nor{ background: #FF8C96;letter-spacing: 0.1em;}
.btn_set.off { background: #ccc}
.c .btn_set { margin: 0 auto}

/*サブコンテンツ */
#sub { overflow: auto; height: 100%}
#sub a { color: #043842}
#sub p { padding: 10px 20px}

/*メニュー */
nav#menubar { padding-left: 1em}
nav#menubar .tableset caption, nav#menubar .tableset th,
nav#menubar .tableset td { font-size: 70%; padding: 0.4em}
nav#menubar .tableset th { width: 40%}
nav#menubar ul.gnav li { border-bottom: 1px solid #FF8C96}
  nav#menubar ul.gnav li a,
  nav#menubar ul.gnav li span {
    text-decoration: none;
    display: block;
    position: relative;
    letter-spacing: 0.2em;
    line-height: 1.7em;
    padding: 0.5em 1em;
    cursor: pointer;  
  }
  nav#menubar ul.gnav li a { color: #555}
  nav#menubar ul.gnav li a:hover { color: #15b7b9; background-color: #ebfffa}
  nav#menubar ul.gnav li a:before { color: #FF8C96; content: "▶︎"; font-size: 8px; padding-right: 0.1rem}
/*プルダウン*/
ul.gnav li li { height: 0; overflow: hidden; border-bottom: none!important}
ul.gnav li:hover > ul > li { overflow: visible; min-height: 2.5rem; border-top: 1px dotted #15b7b9;}
nav#menubar ul.gnav li.pul .after { display: block; position: relative; color: #8E1B3D}
nav#menubar ul.gnav li.pul .after:after { position: absolute; content: "▼"; font-size: 0.5rem; color: #FF8C96; right: 0.5rem}
nav#menubar ul.gnav li.pul:hover li a:after { position: relative; content: "";}
nav#menubar ul.gnav li.pul a { letter-spacing: -0.01rem}
#menubar .btn[target="_blank"]:after { content: ""}

/*mobile*/
#menubar-s { display: none}
#menubar_hdr { display: none}

/*フッター設定(copyrightが入った最下部ブロック) */
footer { clear: both; width: 96%; padding: 2%; background: #8E1B3D}
#banner #bn_box { align-items: center}
#banner #bn_box a { display: block; flex-grow: 1; padding-top: 2%}
.secretariat { margin: 1em auto 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex}
.secretariat > li { width: 45%; color: white}
.secretariat > li:first-child { padding-right: 5%}
.secretariat > li:last-child { padding-left: 5%}
.secretariat > li .tit {
  border-bottom: 1px solid white;
  padding-bottom: 0.3rem;
  text-align: center;
  font-weight: bold;
}
.secretariat > li p { margin: 0.5em 0; font-size: 0.7rem}
footer small {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  font-size: small;
  color: white;
  font-size: 0.6rem;
}

.topimage{margin-bottom:2em}

/*トップページ内「更新情報・お知らせ」ブロック */
#new dl { overflow: auto; max-height: 250px; padding: 0.3rem 0.8rem; border:1px solid #b3b3b3}
#new dt { float: left; color:#435055; font-size:0.8rem; width: 6rem; padding-top: 0.3em; padding-bottom: 0.3em}
/*記事設定*/
#new dd { padding-left:6rem; padding-top: 0.3em; padding-bottom: 0.3em; border-bottom: 1px solid #ccc}
#new dd:last-child { border:none}

/*テーブル　ta1 */
.tableset *, .tableset *:before, .tableset *:after { -webkit-box-sizing: border-box; box-sizing: border-box}
.tableset { width: 100%; border-collapse: collapse; margin-top: 0.3rem}
.tableset caption {
  background-color: #8E1B3D;
  padding: 0.2em 1em 0.2em 1.2em;
  font-weight: 600;
  font-size: 1rem;
  color: white;
  position: relative;
  text-align: left;
}

.center-left { display: block; position: absolute; top: 0.2em; left: 1em}
.tableset th, .tableset td { padding: 0.8rem; border:1px solid lightslategray; vertical-align: baseline}
.tableset th { width: 14rem; vertical-align: top; background: #eee; color: #444; font-weight: 400; text-align: left}
.tableset.set3 td { width: 33%}
.tableset.set4 td { width: 20%}
.tableset .noset { width:100%}
.tableset .noset th,
.tableset .noset td { border:none; padding: 0.3rem; font-size: 0.8rem;}
.tableset .noset th { max-width: 8rem; background-color:transparent; color: lightslategray}

.cp_table{ margin-top: 2em;}
.cp_table caption{background:#8E1B3D;border-color:#8E1B3D;overflow:hidden;letter-spacing: 0.2em;}
.cp_table caption .theme-tit{letter-spacing:.1em;line-height:1.5em;display:block;font-size:110%;}
.cp_table th,.cp_table td{border-left:none;border-right:none}
.cp_table th{background:none;font-weight:700; font-size:110%;}

/*notes */
.notes { padding: 0.8rem; border:1px solid #364f6b; color: #364f6b; font-size: 0.9rem}
.notes h4 { padding: 0; border-bottom: none; font-size: inherit; margin-bottom: 0}
.notes p{margin-top:0!important; font-size: 0.8rem}
.notes a[target="_blank"] { display: block}

/*外部バナーリンク */
.bannerset { margin: 0 auto}
.bannerset h2 { display: none}
.bannerset .bannerbox {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  flex-wrap: wrap; -ms-flex-wrap: wrap;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.bannerset .bannerbox p { width: 20%}
.bannerset .bannerbox p a { display: block; padding: 0.5em}
.bannerset .bannerbox p a img { width: 100%}

/*ページの上部へ（↑）ボタン ---------- */
#pagetop { clear: both}
#pagetop a { clear: both; display: block; background: #8E1B3D; float: right; text-decoration: none; line-height: 1; padding: 1rem; -webkit-transition: 0.5s; transition: 0.5s; color: white; font-size: 1rem}
/*new icon */
.newicon { color: #f57170; font-size: 0.7rem; line-height: 1.5; margin: 0px 5px; vertical-align: text-top}

/*video */
#video { top: 0; width: 100%; height: 100%; background: #000}

/*パンくず */
.breadcrumb *,
.breadcrumb *:after,
.breadcrumb *:before { -webkit-box-sizing: border-box; box-sizing: border-box}
.breadcrumb { margin: 1em auto; border-radius: 0.5em}
.breadcrumb a { text-decoration: none; color: #364f6b}
.breadcrumb .breadcrumbs { padding-left: 0; margin-top: 0; margin-bottom: 0; list-style: none; display: flex; flex-wrap: wrap}
.breadcrumb li { display: inline-block; position: relative; padding-right: calc(16px + 8px); margin-right: 8px; color: #555}
.breadcrumb li::before{content:"›";width:1em;height:1em;line-height:1;text-align:center;font-size:1em;color:inherit;position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.breadcrumb li:last-child { margin-right: 0; padding-right: 0; color: #555}
.breadcrumb li:last-child::before { content: normal}

/*その他 */
.look {
  background: #333;
  background: rgba(0, 0, 0, 0.6);
  padding: 3px;
  border-radius: 3px;
  color: white;
}
.mt{margin-top:1rem}
.mb { margin-bottom: 1rem}
.clear { clear: both}
ol.ollist { counter-reset: cp_clist; margin-left: 1em}
ol.ollist .ol_item { position: relative; padding-left: 2em; list-style-type: none; margin-top: 0.25em}
ol.ollist .ol_item::before {
  counter-increment: cp_clist;
  content: counter(cp_clist) " ）";
  display: block;
  position: absolute;
  top: 0.1em;
  left: -1em;
  font-weight: bold;
}
p.dan{padding-left: 1em;text-indent: -1em;}

.ind1 { padding-left: 1.2em; text-indent: -1.2em; display: block}
ul.disc { padding: 0em 25px 15px; list-style: disc}
ul.decimal { padding: 0em 25px 15px; list-style: decimal}
ul.kome li{padding-left: 1em;text-indent: -1em;}
ul.kome li:before{content: "※";}
.super { vertical-align: super; font-size: 70%}
.color1 { color: #535353}
.color2 { color: red}
.important_text {position: relative;font-size: 24px;padding: 0.3em;margin-bottom: 1em}
.inline-block{ display: inline-block;}
.borderbox { padding: 1em; border:1px solid #bbb}
.pr { font-size: 10px}
.wl { width: 96%}
.ws { width: 50%}
.c { text-align: center}
.r { text-align: right}
.fr { float: right; margin-left: 2em}
.fl { float: left; margin-right: 2em}
.fs8 { font-size: 80%}
.fs12 { font-size: 120%}
.sh { display: none}
.clearfix::after { content: ""; display: block; clear: both}
div.vid_contents { width: 100%; text-align: center; margin: auto; padding: 0}
video.vid_main { width: 100%; max-width: 920px}

.sub-img span {display:inline-block;}
.sub-img span img{width:100px;height:124px;object-fit:contain;margin-right:10px}


#sub_other{overflow:hidden;width:100%;margin-bottom:1em;}
#sub_other a::after{content:"";}



/*画面幅1025px以上の設定 ----------*/
@media screen and (min-width: 1025px) {
  section{margin-top:4em}
  #column {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #sub {
    -webkit-flex-order: 1;
    -ms-flex-order: 1;
    order: 1;
    width: 21%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  #main { -webkit-flex-order: 2; -ms-flex-order: 2; order: 2; width: 100%; margin-left: 2%; margin-right: 2%}
  .bannerset { max-width: 1200px}
  footer ul { max-width: 1200px}
  br.br_sp{ display: none!important}

  .topimage{
    background: -moz-linear-gradient(left, #000, #8E1B3D);
    background: -webkit-linear-gradient(left, #000, #8E1B3D);
    background: linear-gradient(to right, #000, #8E1B3D);}
  .topimage img{display:block;max-width:800px;margin:auto}
}

/*画面幅1024px以下の設定 ----------*/
@media screen and (max-width: 1024px) {
  body { font-size: 13px}
  .topimage img{display:block;width:100%;margin:auto}

  #container { margin: 0.8rem}
  .headline_h2, .headline_h2 span {font-size:14px}
  #main h3 { font-size:13px}
  .important_text { font-size: 14px}
  .bannerset {padding:0 1em;margin-bottom:2em;}
 
  /*コンテンツ（左右ブロックを囲むブロック）
---------------------------------------------------------------------------*/
  #container #logo { position: absolute; width: 100%; height: 90px; z-index: 3}
  #container #logo a {
    display: block;
    padding: 0.8rem 90px 0 0.8rem;
    height: 50px;
    line-height: 1.5em;
    text-indent: -3%;
    margin: 0 auto;
    letter-spacing: -0.01em;
    font-size: 15px;
  }
  h1:after { display: none}
  #container #column{margin-top:90px; padding: 3%}

  /*サブコンテンツ */
  #sub { position: static; width: auto; height: auto; background: transparent; color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-bottom: 20px}
  #sub a { color: #333}
  #sub .inner { position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%; height: 90px}

  /*メインメニュー */
  #menubar { display: none}
  #menubar-s { display: block; position: absolute; left: 0px; width: 100%; margin-top: 80px; background: #8E1B3D}
  /*メニュー１個ごとの設定*/
  #menubar-s ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #menubar-s ul > li { width: 100%; border-top: 1px solid white; flex-grow: 1}
  #menubar-s ul > li  li { border-top: 1px dotted #cefff1}    
  #menubar-s ul > li a,
  #menubar-s ul > li span { display: block; text-decoration: none; text-align: left; padding: 0.5rem 1rem; color: white}
  #menubar-s ul > li a { color: white}
  #menubar-s ul > li span { color: #cefff1}
  #menubar-s ul > li span:before {  content: "▼"; font-size: 0.5rem; padding-right: 0.3rem}

  /*bar */
  #menubar_hdr { display: block; position: absolute; z-index: 5; top: 18px; right: 2%; width: 30px; border:1px solid #8E1B3D; padding: 12px 10px 5px}
  #menubar_hdr span { display: block; border-top: 3px solid #8E1B3D; margin-bottom: 7px}
}



/*画面幅800px以下の設定 ----------*/
@media screen and (max-width: 800px) {
  /*flexbox*/
  .flexbox .flex_item.set2-tab { width: 50% !important}
  #sub_other{overflow:hidden;padding-top:.5em;padding-bottom:.5em;}
  #sub_other a{display:block;float:left;max-width:calc(100% / 2 - 1em);padding:.25em .5em;}
  #sub_other a[target="_blank"]:after{content:"";}  
}

/*画面幅600px以上（タブレットからの上）設定 ----------*/
@media screen and (min-width: 600px) {
  .sp { display: none}
  br.smp { display: none}
}

/*画面幅599px以下の設定 ----------*/
@media screen and (max-width: 599px) {
  .img-fit { width: 100%}

  /*更新情報 */
  #new dt { float: none; width: auto}
  #new dd { padding-left: 0}

  /*フッター設定(copyrightが入った最下部ブロック) */
  footer { width: 90%; padding: 5%}
  #banner #bn_box a { text-align: center; padding-top: 1em}
  #banner #bn_box a:first-child { padding-top: 0}
  .secretariat { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column}
  .secretariat > li { width: 100%}
  .secretariat > li:first-child { padding-right: 0}
  .secretariat > li:last-child { padding-left: 0}

  /*テーブル　ta1 */
  /*.tableset { margin: 0}*/
  .tableset th, .tableset td { width: 100%; display: block; border-top: none; padding: 0.5em}
  .tableset tr:first-child th { border-top: 1px solid #008DA6}
  .tableset .noset tr:first-child th { border-top: none}
  .tableset.set3 td,
  .tableset.set4 td { display: table-cell !important}
  .tableset.set3 td { width: 33% !important}
  .tableset.set4 td { width: 20% !important}

.cp_table th {background-color: #8e1b3d2e;}

  /*flexbox */
  .flexbox .flex_item.set1-mobile { width: 100% !important}
  .bannerset .bannerbox p { width: 33%}
  .pc { display: none}
  .ws { width: 96%}
  .fr, .fl { float: none; width: 100%; margin: 0 0 20px; text-align: center}
}