@charset "UTF-8";

/* =========================================================
   Usuki city Common CSS
========================================================= */
/* Reset CSS */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

/* elements
----------------------------------------------- */
body {
  width: 100%;
  margin: 0;
  color: #333;
  /*font-size: 105%;*/
  font-weight: normal;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'メイリオ', 'Meiryo', 'Meiryo UI', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Roboto', 'Droid Sans', sans-serif;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto !important;
  border: 0;
  vertical-align: bottom;
}

img.external {
  margin: 0 0.25em;
  vertical-align: middle;
}

.maps img,
#map_canvas img,
#canvas img {
  max-width: none;
}

p img {
  margin: 0 20px 20px 20px;
}

/* 20210726 */
.surveyForm p img {
  width: 100% !important;
  height: auto !important;
}

em {
  font-style: oblique;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  font-size: 95%;
}

rp,
rt {
  font-size: 80%;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: outside;
  list-style-type: none;
}

ol {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

li {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

a {
  background-color: transparent;
  color: #1d3994;
}

a:visited {
  background-color: transparent;
  color: #8232a0;
}

a:hover {
  background-color: transparent;
  text-decoration: none;
  color: #be1e32;
}

a:focus {}

a[name] {
  color: #000;
  text-decoration: none;
}

a img:hover {
  opacity: 0.9;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* clearfix
----------------------------------------------- */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* File Icons.
----------------------------------------------- */
.iconFile,
.iconDefault {
  min-height: 16px;
  padding-left: 22px;
  background-image: url("/_common/images/icons/default.png");
  background-repeat: no-repeat;
}

.iconBmp {
  background-image: url("/_common/images/icons/bmp.png");
}

.iconCsv,
.iconTxt {
  background-image: url("/_common/images/icons/default.png");
}

.iconDoc,
.iconDocx {
  background-image: url("/_common/images/icons/doc.png");
}

.iconGif {
  background-image: url("/_common/images/icons/gif.png");
}

.iconJpg,
.iconJpe,
.iconJpeg {
  background-image: url("/_common/images/icons/jpg.png");
}

.iconJtd {
  background-image: url("/_common/images/icons/jtd.png");
}

.iconLzh {
  background-image: url("/_common/images/icons/lzh.png");
}

.iconPdf {
  background-image: url("/_common/images/icons/pdf.png");
}

.iconPng {
  background-image: url("/_common/images/icons/png.png");
}

.iconPpt,
.iconPptx {
  background-image: url("/_common/images/icons/ppt.png");
}

.iconXls,
.iconXlsx {
  background-image: url("/_common/images/icons/xls.png");
}

.iconZip {
  background-image: url("/_common/images/icons/zip.png");
}

/* CKEditor templates
----------------------------------------------- */
.temp1,
.temp2 {
  clear: both;
  margin-bottom: 30px;
  margin-right: 10px;
  margin-left: 10px;
}

.temp1 .thumb {
  float: left;
  margin-right: 30px;
}

.temp2 .thumb {
  float: right;
  margin-left: 30px;
}

@media screen and (max-width: 768px) {
  .temp1 .thumb {
    float: none;
    text-align: center;
    margin: 0 auto 30px auto;
  }

  .temp2 .thumb {
    float: none;
    text-align: center;
    margin: 0 auto 30px auto;
  }
}

/* 画像が左でテキスト右 テキストは回り込まない */
.temp3 {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.temp3 .left_photo {
  float: left;
  margin-right: 10px;
}

.temp3 .right_text {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .temp3 .left_photo {
    float: none;
    margin-bottom: 20px;
  }
}

/* 画像が右でテキスト左 テキストは回り込まない */
.temp4 {
  margin-right: 10px;
  margin-bottom: 20px
}

.temp4 .right_photo {
  float: right;
  margin-left: 10px;
}

.temp4 .left_text {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .temp4 .right_photo {
    float: none;
    text-align: center;
    margin: 0 auto 20px auto;
  }
}

/* 画像の下にテキスト付き（DL DT DD） */
/* 2個並び 3個並び　4個並び */
.temp5,
.temp6,
.temp7 {
  text-align: center;
  margin: 30px auto 30px auto;
}

.temp5 dl,
.temp6 dl,
.temp7 dl {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 30px 10px;
}

.temp5 dl dt,
.temp6 dl dt,
.temp7 dl dt {
  margin-bottom: 5px;
  text-align: center;
}

.temp5 dl dd,
.temp6 dl dd,
.temp7 dl dd {
  text-align: center;
}

/* 画像のみの横並び */
/* 2個並び 3個並び　4個並び */
.temp8,
.temp9,
.temp10 {
  text-align: center;
  margin: 30px auto 30px auto;
}

.temp8 div,
.temp9 div,
.temp10 div {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 10px 10px;
}

/* 画像が左でテキスト右 画像キャプション入り */
.temp11 {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.temp11 .left_photo {
  float: left;
  margin-right: 10px;
}

.temp11 .left_photo p {
  text-align: center;
  padding-top: 5px;
  font-size: 90%;
}

.temp11 .right_text {
  overflow: hidden;

}

@media screen and (max-width: 768px) {
  .temp11 .left_photo {
    float: none;
    margin-right: 0;
  }
}

/* 画像が右でテキスト左 画像キャプション入り */
.temp12 {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px
}

.temp12 .right_photo {
  float: right;
  margin-left: 10px;
}

.temp12 .right_photo p {
  text-align: center;
  padding-top: 5px;
  font-size: 90%;
}

/*
.temp12 .left_text {
    overflow: hidden;
}
*/
/* ２段カラム */
.temp13 {
  margin: 0 10px 20px 10px;
}

.temp13 .left17 {
  float: left;
  width: 47%;
}

.temp13 .right17 {
  float: right;
  width: 47%;
}

/* 回り込み解除 */
.temp14 {
  clear: both;
  border: none;
}

.temp15 {
  width: 95%;
  font-size: 95%;
  line-height: 1.5em;
  margin: 0 auto 20px auto;
}

.temp15 .cnt_left {
  color: #2b2b2b;
  text-align: center;
  white-space: nowrap;
  padding: 0.5em 1em 0.5em 1em;
  background-color: #e8ece9;
  border: 1px solid #d4d9d6;
  border-radius: 3px 3px 0 0;
}

.temp15 .cnt_right {
  padding: 0.7em 1em 0.7em 1em;
  border-radius: 0 0 3px 3px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #d4d9d6;
}

/* Q&A */
.qa_temp_question {
  background-color: #F8CDCF;
  width: 100%;
  background-image: url("../images/icon/Q.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-sizing: border-box;
}

.qa_temp_question p {
  padding-left: 50px;
  margin: 0 !important;
}

.qa_temp_answer {
  width: 100%;
  background-image: url("../images/icon/A.png");
  background-repeat: no-repeat;
  background-position: 10px top;
  padding: 0 10px 10px 10px;
  margin-bottom: 50px;
  box-sizing: border-box;
}

.qa_temp_answer h2,
.qa_temp_answer h3,
.qa_temp_answer h4,
.qa_temp_answer h5,
.qa_temp_answer h6 {
  margin: 0 0 20px 50px !important;
}

.qa_temp_answer p {
  padding-left: 50px;
  margin: 0 0 15px 0 !important;
}

/* 市議会 */
.giin_table {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 40px 10px !important;
  border: none !important;
}

.giin_table th,
.giin_table td {
  text-align: center;
}

.giin_table th {
  font-size: 82%;
  white-space: nowrap;
  background-color: #f8f4e6 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.giin_table td {
  width: 200px;
}

.giin_photo td img {
  margin: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
}

.giin_name th,
.giin_photo th,
.giin_kaiha th {
  letter-spacing: 1em;
  text-indent: 1em;
}

.giin_syozoku th {
  font-size: 75%;
}

.giin_syozoku td {
  font-size: 85%;
  line-height: 1.5em;
  height: 80px;
}

.giin_ruby {
  font-size: 80%;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.giin_kanji {
  font-size: 110%;
  padding-top: 0 !important;
  border-top: none !important;
}

.giin_mail th {
  font-size: 65%;
}

.giin_mail td {
  font-size: 70%;
  word-wrap: break-word;
}

.giin_website th {
  font-size: 70%;
}

.giin_website td {
  font-size: 50%;
  line-height: 1.2em;
}

@media screen and (max-width: 768px) {
  .giin_table {
    width: 90%;
  }

  .giin_table th {
    width: 20%;
  }

  .giin_table td {
    width: 80%;
  }
}

/* Box内のdivを横並びにする。 */
.multiple_column_box {
  margin-bottom: 40px;
  display: table;
}

.multiple_column_box div {
  display: table-cell;
  width: auto;
}

.multiple_column_box div img {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto 20px auto;
}

@media screen and (max-width: 768px) {
  .multiple_column_box div {
    display: block;
    width: auto;
  }
}

/* CKEditorメニュー画像の中寄せ */
.naka {
  width: auto;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

/* 空き家バンク画像左寄せ （ツールメニューから設定できるスタイル） */
.akiya_image {
  width: 30%;
  float: left;
  text-align: center;
}

.akiya_image img {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
  .akiya_image {
    width: 90% !important;
    float: none;
  }
}

/* table内中央ぞろえ */
.td_center {
  text-align: center;
}

/* 汎用フロート */
.inline_div {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 25px;
  margin-left: 25px;
}

.inline_div p {
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 5px;
  margin-left: 0;
}

.inline_div img {
  margin: 0;
  padding: 0;
  display: block;
}

/* 汎用dl */
.float-dl {
  margin-bottom: 30px;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  padding: 0;
  margin-top: 0;
}

.float-dl dt img {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

.float-dl dd p {
  text-align: center;
}

/* kanko */
#omotenashi {
  margin-bottom: 30px;
  list-style: none;
}

#omotenashi li {
  margin-bottom: 15px;
}

#omotenashi li img {
  vertical-align: middle;
  padding: 0;
  margin-top: 0;
  margin-right: 15px;
  margin-bottom: 0;
  margin-left: 0;
}

/* adobeReader download
----------------------------------------------- */
.adobeReader {
  background-color: #f2f2f2;
  background-repeat: no-repeat;
  background-position: 30px center;
  background-image: url("../images/Get_Adobe_Reader.png");
  padding: 10px 20px 10px 250px;
  border-radius: 5px;
  margin-bottom: 40px;
}

.adobeReader p {
  font-size: 80%;
  line-height: 1.6em;
  margin-bottom: 0;
}

.adobeReader a {
  font-size: 80%;
}

@media screen and (max-width: 768px) {
  .adobeReader {
    background-repeat: no-repeat;
    background-position: center 10px;
    background-image: url("../images/Get_Adobe_Reader.png");
    padding: 55px 10px 10px 10px;
    margin: 0 0 40px 10px;
  }

  .adobeReader p {
    margin: 0 !important;
  }

  .adobeReader a {
    text-align: center;
  }
}

/* more
---------------------- */
.more a {
  display: inline-block;
  float: right;
  padding: 0 0 0 16px;
  /*background: url("../images/ic-list.png") left 0.5em no-repeat;*/
}

.more::after {
  content: "";
  display: table;
  clear: both;
}

/* pagination
---------------------- */
.pagination {
  margin: 20px 0;
  text-align: center;
}

.upperPagination {
  margin-top: 0;
  margin-bottom: 20px;
}

.pagination a,
.pagination em,
.pagination span {
  display: inline-block;
  padding: 0 6px;
  vertical-align: middle;
}

.pagination .current {
  font-size: 150%;
  font-weight: bold;
  padding: 0 3px;
}

/* ////////////////////  Layout //////////////////// */
.text-beginning::after {
  content: "";
  display: table;
  clear: both;
}

/* footer bottom  */
#top_wrapper,
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex: 1 1 auto;
}

/* ////////////////////　総合トップ背景画像　////////////////////  */
#top_wrapper #container {
	width: auto;
	min-width: 1000px;
	min-height: 100vh;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;/* 位置調整 */
	background-size: contain;
	background-color: #c9ea9d;
	background-image: url("../images/ajisai2026.jpg");
	position: relative;
}
#top_wrapper #container::after {
    content: "妙顕寺　あじさい"; /* 改行\A */
    white-space: pre;
    color: rgba(255, 255, 255, 1);
    font-size: 0.95rem;
    line-height: 1.4em;
    position: absolute;
    right: 32px;
    top: 64px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 768px) {
  #top_wrapper #container {
    min-width: 100%;
    background-position: center top;
    /* 位置調整 */
  }
  #top_wrapper #container::after {
    font-size: 0.62rem;
    left: 4px;
    top: 42px;
  }
}

#main {
  width: 1000px;
  margin: 0 auto 40px;
}

.bg_photo_information {
  display: inline-block;
  color: #fff;
  font-size: 90%;
  line-height: 1.5em;
  /*
  background-color: rgba(0,0,0,0.6);
  padding: 0.3em 0.6em;
  */
  margin: 0 0 2em 3em;
  border-radius: 3px;
}

.bg_photo_information span {
  font-size: 90%;
}

@media screen and (max-width: 768px) {
  .bg_photo_information {
    margin: 0 1em 2em 1em;
  }
}

/* //////////////////// header //////////////////// */
#header {
  min-width: 1000px;
  margin-bottom: 20px;
}

#header,
#header_kanko {
  background-image: linear-gradient(180deg, rgba(19, 128, 197, 1.00) 0%, rgba(24, 142, 210, 1.00) 99.86%);
  background-color: #188ED2;
}

#top_header {
  /* margin-bottom: 30px; 20200203 BackUp */
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  #top_header {
    margin-bottom: 55px;
  }
}

#top_header_logo {
  text-align: center;
}

#top_logo {
  width: 280px;
  padding-top: 45px;
  margin: 0 auto;
}

/*
#top_logo h1 a {
  display: block;
    width: 279px;
    height: 116px;
    background-image: url("../images/top_logo.png");
    background-repeat: no-repeat;
    background-position: left top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
*/
#top_logo h1 a {
  display: block;
  width: 280px;
  height: 116px;
  background-image: url("../images/Usuki_city_Logo.svg");
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

#contents_head {
  width: 50%;
  margin: 20px auto 30px auto;
}

#header_inner {
  width: 1000px;
  min-width: 1000px;
  margin: 0 auto;
}

#header_logo {
  float: left;
  padding-top: 13px;
}

#header_logo h1 a {
  display: block;
  width: 206px;
  height: 77px;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: left top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin: 0 auto;
}

.logo_caption {
  color: #ffffff;
  font-size: 65%;
  margin-left: 90px;

}

#header_navi_area {
  float: right;
  width: 700px;
}

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

  #header,
  #header_inner {
    min-width: 100%;
  }

  #header_inner {
    position: relative;
  }

  #top_header_logo {
    margin-bottom: 30px;
  }

  #top_logo {
    width: 200px;
    padding-top: 20px;
  }

  #top_logo h1 a {
    display: block;
    width: 200px;
    height: 88px;
    background-image: url("../images/Usuki_city_Logo_mobile.svg");
    background-repeat: no-repeat;
    background-position: left center;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin: 0 auto;
  }

  #header_logo {
    float: none;
    padding-top: 0;
  }

  #header_logo h1 a {
    display: block;
    width: 233px;
    height: 65px;
    background-image: url("../images/logo_mobile.svg");
    background-repeat: no-repeat;
    background-position: left center;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin-left: 20px;
  }
}

/* //////////////////// 総合トップ　メニュー　//////////////////// */
#top_nav {
  display: flex;
  justify-content: space-around;
  width: 1100px;
  margin: 0 auto 50px auto;
}

#nav_linkbox_shimin,
#nav_linkbox_kanko,
#nav_linkbox_furusato,
#nav_linkbox_iju,
#nav_linkbox_jigyosya {
  position: relative;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

#nav_linkbox_shimin h2,
#nav_linkbox_kanko h2,
#nav_linkbox_furusato h2,
#nav_linkbox_iju h2,
#nav_linkbox_jigyosya h2 {
  height: 110px;
  display: table;
  padding: 0 !important;
  margin: 0 !important;
}

#nav_linkbox_shimin h2 a,
#nav_linkbox_kanko h2 a,
#nav_linkbox_furusato h2 a,
#nav_linkbox_iju h2 a,
#nav_linkbox_jigyosya h2 a {
  color: #2b2b2b;
  text-decoration: none;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 110px;
  margin: 0 auto;
  transition: 0.3s;
}

#nav_linkbox_shimin a:hover,
#nav_linkbox_kanko a:hover,
#nav_linkbox_furusato a:hover,
#nav_linkbox_jigyosya a:hover,
#nav_linkbox_iju a:hover {
  background-color: rgba(255, 255, 255, 0.7);

  border-radius: 4px;
}

/* 市民向け */
#nav_linkbox_shimin h2 {
  font-size: 180%;
}

/* 観光 */
#nav_linkbox_kanko h2 {
  font-size: 180%;
}

/* ふるさと納税 */
#nav_linkbox_furusato h2 {
  font-size: 170%;
}

/* 移住・定住 */
#nav_linkbox_iju h2 {
  font-size: 170%;
}

#nav_linkbox_iju a span {
  display: block;
  font-size: 95%;
  margin-top: 0.1em;
}

/* 事業者向け */
#nav_linkbox_jigyosya h2 {
  font-size: 175%;
}

/* Mark */
#nav_linkbox_shimin::after {
  content: ' ';
  position: absolute;
  border-top: 8px solid #0abb56;
  border-right: 8px solid #0abb56;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  right: 5px;
  top: 5px;
}

#nav_linkbox_kanko::after {
  content: ' ';
  position: absolute;
  border-top: 8px solid #d66a35;
  border-right: 8px solid #d66a35;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  right: 5px;
  top: 5px;
}

#nav_linkbox_furusato::after {
  content: ' ';
  position: absolute;
  border-top: 8px solid #8d6449;
  border-right: 8px solid #8d6449;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  right: 5px;
  top: 5px;
}

#nav_linkbox_iju::after {
  content: ' ';
  position: absolute;
  border-top: 8px solid #0094c8;
  border-right: 8px solid #0094c8;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  right: 5px;
  top: 5px;
}

#nav_linkbox_jigyosya::after {
  content: ' ';
  position: absolute;
  border-top: 8px solid #20425f;
  border-right: 8px solid #20425f;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
  right: 5px;
  top: 5px;
}

@media screen and (max-width: 768px) {
  #top_nav {
    width: auto;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  #nav_linkbox_shimin,
  #nav_linkbox_kanko,
  #nav_linkbox_furusato,
  #nav_linkbox_iju,
  #nav_linkbox_jigyosya {
    width: 44%;
    height: auto;
    margin-bottom: 20px;
  }

  #nav_linkbox_shimin h2,
  #nav_linkbox_kanko h2,
  #nav_linkbox_furusato h2,
  #nav_linkbox_iju h2,
  #nav_linkbox_jigyosya h2 {
    height: 90px;
  }

  #nav_linkbox_shimin h2 a,
  #nav_linkbox_kanko h2 a,
  #nav_linkbox_furusato h2 a,
  #nav_linkbox_iju h2 a,
  #nav_linkbox_jigyosya h2 a {
    height: auto;
  }

  /* Font Size */
  #nav_linkbox_shimin h2,
  #nav_linkbox_kanko h2 {
    font-size: 170%;
    padding-top: 10px;
    margin-bottom: 10px;
  }

  #nav_linkbox_furusato h2 {
    font-size: 130%;
    padding-top: 10px;
    margin-bottom: 10px;
  }

  #nav_linkbox_iju h2 {
    font-size: 140%;
    padding-top: 10px;
    margin-bottom: 10px;
  }

  #nav_linkbox_jigyosya h2 {
    font-size: 140%;
    padding-top: 10px;
    margin-bottom: 10px;
  }

  #nav_linkbox_shimin p,
  #nav_linkbox_kanko p,
  #nav_linkbox_furusato p,
  #nav_linkbox_iju p {
    font-size: 85%;
    margin: 0 10px 10px 10px;
  }
}

/* ライブカメラ　臼杵の紹介　facebook */
#camera_sns_area {
  display: flex;
  justify-content: space-around;
  width: 1000px;
  /* margin:0px auto 100px auto;  20200203 BackUp */
  margin: 0 auto 30px auto;
}

@media screen and (max-width: 768px) {
  #camera_sns_area {
    width: auto;
    flex-direction: column;
  }
}

/* ライブカメラ */
.live_camera {
  color: #ffffff;
  width: 236px;
  height: 80px;
  margin: 0 auto;
  background-color: #434343;
  border-radius: 40px;
  background-image: url("../images/icon/livecamera.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  margin-bottom: 40px;
}

.live_camera:hover {
  background-color: #666666;
}

.live_camera a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.live_camera a h2 {
  font-size: 140%;
  padding-top: 14px;
  margin: 0 0 10px 70px;
}

.live_camera a p {
  font-size: 72%;
  margin: 0 0 0 75px;
}

/* 臼杵市の紹介ボタン */
.usuki_introduction {
  position: relative;
  color: #ffffff;
  width: 236px;
  height: 80px;
  margin: 0 auto;
  background-color: #25b7c0;
  border-radius: 40px;
  background-image: url("../images/icon/introduction.png");
  background-repeat: no-repeat;
  background-position: 20px center;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  margin-bottom: 40px;
}

.usuki_introduction:hover {
  background-color: #188ED2;
}

.usuki_introduction a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.usuki_introduction a h2 {
  font-size: 140%;
  padding-top: 14px;
  margin: 0 0 9px 80px;
}

.usuki_introduction a p {
  font-size: 80%;
  margin: 0 0 0 80px;
}

/* 公式facebook */
.usuki_facebook {
  position: relative;
  color: #ffffff;
  width: 236px;
  height: 80px;
  margin: 0 auto;
  background-color: #4267b2;
  border-radius: 40px;
  background-image: url("../images/icon/facebook.png");
  background-repeat: no-repeat;
  background-position: 25px center;
  border: 2px solid #ffffff;

  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  margin-bottom: 40px;
}

.usuki_facebook:hover {
  background-color: #577BC4;
}

.usuki_facebook a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.usuki_facebook a h2 {
  font-size: 150%;
  padding-top: 25px;
  margin: 0 0 9px 90px;
}

.usuki_facebook a p {
  font-size: 80%;
  margin: 0 0 0 80px;
}

/* facebookが外部リンクの場合 */
.usuki_facebook .external {
  position: absolute;
  right: 15px;
  top: 15px;
}

/* 公式LINE */
.usuki_line {
  position: relative;
  color: #ffffff;
  width: 236px;
  height: 80px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 40px;
  background-image: url("../images/icon/line_logo.svg");
  background-repeat: no-repeat;
  background-position: 25px center;
  border: 2px solid #ffffff;

  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
  margin-bottom: 40px;
}

.usuki_line:hover {
  background-color: #C7FBB5;
}

.usuki_line a {
  text-decoration: none;
  display: block;
}

.usuki_line a h2 {
  color: #00B900;
  font-size: 150%;
  padding-top: 25px;
  margin: 0 0 9px 100px;
}

.usuki_line a p {
  font-size: 80%;
  margin: 0 0 0 80px;
}

/* facebookが外部リンクの場合 */
.usuki_line .external {
  position: absolute;
  right: 15px;
  top: 15px;
}

/* ***************************************

    Google検索　総合トップ

*************************************** */
#top_search_box {
  width: 600px;
  margin: 0 auto 50px auto;
  vertical-align: middle;
}

#top_search_box input.gsc-input {
  vertical-align: middle;
  outline: none;
  /* アクティブ時のアウトラインを非表示 */
  padding: 0 !important;
}

#top_search_box .gsib_b {
  height: auto !important;
}

#top_search_box .gsib_a {
  padding: 8px 0 8px 48px !important;
}

#top_search_box form.gsc-search-box {
  margin: 0 !important;
}

@media screen and (max-width: 900px) {
  #top_search_box {
    width: 90%;
    margin-bottom: 40px;
  }
}

/* ***************************************

    Google検索　コンテンツページ

*************************************** */
#search_link_box {
  margin-bottom: 13px;
}

#search_box {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  padding-top: 10px;
}

#search_box form.gsc-search-box {
  margin: 0 !important;
}

#search_box .gsc-input {
  height: auto !important;
  outline: none;
  /* アクティブ時のアウトラインを非表示 */
  vertical-align: middle;
}

#search_box .gsc-input-box {
  /*background-color: #ffffff;*/
  border: 1px solid #2b2b2b;
}

#search_box .gsib_a {
  padding: 3px 10px 3px 48px !important;
}

#search_box .gsib_b {
  height: auto !important;
}

@media screen and (max-width: 900px) {
  #search_box {
    display: block;
    width: 90%;
    margin: 0 auto 8px auto;
  }
}

/***** Google検索　コンテンツページ終わり *****/

/* サイトマップ　｜　お問合せ */
.header_link {
  display: inline-block;
  vertical-align: middle;
  width: 28%;
  text-align: right;
}

.sitemap_linkbtn {
  font-size: 80%;
  color: #ffffff;
  padding-right: 1em;
  margin-right: 1em;
  border-right: 1px solid #cccccc;
}

.contact_linkbtn {
  font-size: 80%;
  color: #ffffff;
}

a.sitemap_linkbtn:visited,
a.contact_linkbtn:visited {
  color: #fff;
}

@media screen and (max-width: 900px) {
  .header_link {
    display: block;
    width: auto;
    text-align: center;
  }
}

/* //////////////////// Global Navi //////////////////// */
/* Toggle(Button) */
#nav_toggle {
  display: none;
  position: absolute;
  /*to body*/
  right: 30px;
  top: 15px;
  width: 30px;
  height: 25px;
  cursor: pointer;
}

#tglmenu_title {
  font-size: 13px;
  font-weight: bold;
  position: absolute;
  top: 43px;
  right: 20px;
  color: #2b2b2b;
  display: none;
}

#nav_toggle div {
  position: relative;
}

#nav_toggle span {
  display: block;
  position: absolute;
  /*to div*/
  width: 100%;
  border-bottom: solid 3px #2b2b2b;
  transition: .35s ease-in-out;
}

#nav_toggle span:nth-child(1) {
  top: 0;
}

#nav_toggle span:nth-child(2) {
  top: 11px;
}

#nav_toggle span:nth-child(3) {
  top: 22px;
}

#global_navi ul {
  width: 100%;
  display: flex;
}

#global_navi ul li {
  width: calc(100% / 6);
}

#global_navi ul li a {
  display: block;
  color: #111111;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  background-color: #f7f7f7;
  transition: 0.3s;
}

#global_navi ul li a:hover {
  color: #ffffff;
}

#gnavi_top a {
  border-bottom: 5px solid #666666;
  background-image: url("../images/gnavi_line.png");
  background-repeat: no-repeat;
  background-position: right center;
  border-top-left-radius: 5px;
}

#gnavi_shimin a {
  border-bottom: 5px solid #0abb56;
  background-image: url("../images/gnavi_line.png");
  background-repeat: no-repeat;
  background-position: right center;
}

#gnavi_kanko a {
  border-bottom: 5px solid #d66a35;
  background-image: url("../images/gnavi_line.png");
  background-repeat: no-repeat;
  background-position: right center;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

#gnavi_furusato a {
  border-bottom: 5px solid #8d6449;
  background-image: url("../images/gnavi_line.png");
  background-repeat: no-repeat;
  background-position: right center;
  font-size: 94%;
}

#gnavi_iju a {
  border-bottom: 5px solid #00a1e9;
  font-size: 94%;
}

#gnavi_jigyosya a {
  border-bottom: 5px solid #20425f;
  font-size: 94%;
  border-top-right-radius: 5px;
}

#gnavi_top a:hover {
  background-color: #666666;
}

#gnavi_shimin a:hover {
  background-color: #0abb56;
}

#gnavi_kanko a:hover {
  background-color: #d66a35;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

#gnavi_furusato a:hover {
  background-color: #8d6449;
}

#gnavi_iju a:hover {
  background-color: #00a1e9;
}

#gnavi_jigyosya a:hover {
  background-color: #20425f;
}

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

  /* Toggle(Button) */
  #nav_toggle {
    display: block;
  }

  #tglmenu_title {
    display: block;
  }

  .openNav #nav_toggle span:nth-child(1) {
    top: 11px;
    transform: rotate(-45deg)
  }

  .openNav #nav_toggle span:nth-child(2),
  .openNav #nav_toggle span:nth-child(3) {
    top: 11px;
    transform: rotate(45deg)
  }

  #header_navi_area {
    position: absolute;
    right: 0;
    left: -764px;
    /*通常時はビュー外*/
    width: 100%;
    padding: 0;
    transition: .5s ease-in-out;
    background-color: #188ED2;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4);
    z-index: 300;
  }

  .openNav #header_navi_area {
    transform: translateX(764px);
  }

  #global_navi {
    width: 100%;
  }

  #global_navi ul {
    width: auto;
    height: auto;
    margin: 0;

    flex-direction: column;
  }

  #global_navi ul li {
    width: 100%;
    height: auto;
    margin: 0;
  }

  #global_navi ul li a {
    color: #161616;
    font-size: 110%;
    background-color: #ffffff;
    width: 100%;
    height: auto;
    line-height: 50px;
  }

  #global_navi ul li a:hover {
    background-color: #188ED2;
    color: #ffffff;
  }

  #gnavi_top a {
    border-top-left-radius: inherit;
  }

  #gnavi_iju a {
    border-top-right-radius: inherit;
  }
}

/* //////////////////// footer //////////////////// */
#footer {
  width: 100%;
  min-width: 1000px;
  background-color: #188ED2;
  background-image: url("../images/footer_map.png");
  background-repeat: no-repeat;
  background-position: right top;
}

.footer_address {
  width: 1000px;
  padding-top: 20px;
  margin: 0 auto 20px auto;
}

.footer_add_logo {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 47px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-image: url("../images/footer_logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  margin-right: 20px;
}

.footer_address address {
  display: inline-block;
  vertical-align: top;
  color: #ffffff;
  font-size: 80%;
}

#footer address {
  font-style: normal;
  line-height: 1.8em;
}

.f_address_dl {
  color: #ffffff;
}

.f_address_dl dt {
  min-width: 5em;
  float: left;
}

.f_address_dl dd {
  margin-left: 5em;
}

.f_address_dl dd span {
  margin-left: 1em;
}

/* footer Navi */
.footer_navi {
  padding-top: 20px;
}

.footer_navi ul {
  display: flex;

  flex-flow: row wrap;
  justify-content: flex-start;
  width: 1000px;
  margin: 0 auto 10px auto;
}

.footer_navi ul li a {
  color: #ffffff;
  font-size: 90%;
  padding: 0 1em;
  border-right: 1px solid #fefefe;
}

.footer_navi ul li:first-child a {
  border-left: 1px solid #fefefe;
}

.footer_navi ul li a:hover {
  color: #ffea00;
}

/* copyright
---------------------- */
.copyright {
  text-align: center;
  color: #ffffff;
  padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
  #footer {
    width: auto;
    min-width: 100%;
  }

  /* footer navi */
  .footer_navi ul {
    justify-content: flex-start;
    width: auto;
    margin: 0 2em 30px 2em;
    line-height: 2em;
  }

  .footer_navi ul li {
    margin-right: 1em;
  }

  .footer_navi ul li:first-child a {
    border-left: none;
  }

  /* footer address */
  .footer_address address {
    display: block;
    line-height: 1.7em;
    margin: 0 15px;
  }

  .footer_add_logo {
    display: block;
    vertical-align: top;
    width: 155px;
    height: 50px;
    overflow: hidden;
    text-indent: 100%;
    line-height: 1.4em;
    white-space: nowrap;
    background-image: url("../images/footer_logo_mobile.svg");
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0 0 10px 20px;
  }

  .f_address_dl dd span {
    margin-left: 0;
    display: block;
  }
}

/* page-top
---------------------- */
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 5px;
  background-color: rgba(102, 102, 102, 0.9);
  z-index: 9999;
}

#pageTop a {
  display: block;
  padding: 46px 8px 8px;
  background: url("../images/ic-pagetop.png") no-repeat center 18px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 80%;
}

#pageTop:hover {
  background-color: rgba(102, 102, 102, 0.8);
}

/* //////////////////// accessibility-tool　////////////////////　*/
#accessibilityTool {
  background-color: #eee;
  font-size: 90%;
}

#accessibilityTool .pieceBody {
  max-width: 1000px;
  margin: 0 auto;
}

.esc_text {
  float: left;
  line-height: 40px;
}

#accessibilityTool .tools {
  float: right;
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.font_size_box,
.back_color_box,
#readspeaker_button1,
#google_translate_element {
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #999999;
}

#accessibilityTool .tools div ul,
#accessibilityTool .tools div ul li,
#accessibilityTool .tools div p {
  display: inline-block;
  vertical-align: middle;
}

/* 文字サイズ */
.font_size_title {
  margin-right: 5px;
}

#fontLarge,
#fontMiddle,
#fontSmall {
  color: #2b2b2b;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 90%;
  padding: 4px 6px;
  margin: 0 1px;

  border-radius: 5px;
  border: 1px solid #666666;
}

/* 背景色 */
.back_color_title {
  margin-right: 5px;
}

#themeBlack,
#themeBlue,
#themeWhite {
  font-size: 90%;
  text-decoration: none;
  padding: 4px 6px;
  margin: 0 1px;

  border-radius: 5px;
  border: 1px solid #666666;
}

#themeBlack {
  color: #ffffff;
  background-color: #333333;
}

#themeBlue {
  color: #ffffff;
  background-color: #071AC8;
}

#themeWhite {
  color: #2b2b2b;
  background-color: #ffffff;
}

/* ReadSpeaker */
#readspeaker_button1 {
  display: inline-block;
  /*margin-right: 5px;*/
  margin-bottom: 0;
  padding-bottom: 0;
  /*padding-right: 5px;*/
  border-right: 1px solid #b3b3b3;
}

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

  .tools .font_size_box,
  .tools .back_color_box {
    display: none !important;
  }

  #google_translate_element {
    margin-right: 10px;
  }
}

/* //////////////////// breadCrumbs　//////////////////// */
#breadCrumbs::after {
  content: "";
  clear: both;
  display: block;
}

#breadCrumbs {
  margin-bottom: 15px;
}

#breadCrumbs ol {
  list-style: none;
  line-height: 1.8em;
}

#breadCrumbs li {
  list-style: none;
}

#breadCrumbs li {
  display: inline-block;
}

#breadCrumbs li:not(:first-child)::before {
  content: ">";
  margin: 0 5px;
}

/* 読み込み後JSにて表示させる */
#breadCrumbs {
  display: none;
}

#open_bred {
  font-size: 65%;
  width: 12em;
  padding: 2px;
  background-color: #eaeea2;
  text-align: center;
  margin-bottom: 5px;
  border-radius: 3px;
  cursor: pointer;
}

#open_bred:hover {
  color: #ffffff;
  background-color: #9cbb1c;
}

@media screen and (max-width: 900px) {
  #breadCrumbs {
    padding: 0 10px;
  }
}

/* ////////////////////////////////////////////////////////////

  市民向けトップ

//////////////////////////////////////////////////////////// */
/* 各タイトル */
.shimin_h2 {
  font-size: 140%;
  border-bottom: 5px solid #dcdddd;
  padding: 5px;
  margin-bottom: 30px;
}

.shimin_h2 span {
  font-size: 80%;
}

/* 混雑状況と定住支援のWrapper */
.for_citizens {
  display: flex;
  justify-content: space-around;
}

@media screen and (max-width: 768px) {
  .for_citizens {
    flex-direction: column;
  }
}

/* 20210416市民課窓口混雑状況のご案内  */
.madoguchi_info {
  text-align: center;
  box-sizing: border-box;
  width: 37%;
  max-width: 480px;
  margin: 0 auto 32px auto;
}

.madoguchi_info a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  background-color: #153884;
  color: #fff;
  font-size: 140%;
  text-decoration: none;
  line-height: 1.4em;
  border-radius: 10px;
  background-image: linear-gradient(180deg, rgba(21, 56, 132, 1.00) 0%, rgba(22, 17, 109, 1.00) 99.75%);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

.madoguchi_info a:hover {
  font-weight: bold;
  background-image: linear-gradient(180deg, rgba(22, 17, 109, 1.00) 0%, rgba(21, 56, 132, 1.00) 100%);
}

@media screen and (max-width: 768px) {
  .madoguchi_info {
    width: 90%;
    max-width: inherit;
  }

  .madoguchi_info a {
    font-size: 120%;
  }
}

/* 20210908 市民向け定住支援バナー */
.shimin_teijusien_top {
  width: 37%;
  margin: 0 auto 32px auto;
}

.shimin_teijusien_top a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 56px;
  color: #fff;
  font-size: 1.25rem;
  text-decoration: none;
  text-align: center;
  background-color: #EA8000;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

.shimin_teijusien_top a span {
  font-size: 0.9rem;
  display: block;
  padding-top: 0.2em;
}

.shimin_teijusien_top a:hover {
  background-color: #f6ad49;
}

@media screen and (max-width: 768px) {
  .shimin_teijusien_top {
    width: 90%;
  }
}

/* 臼杵の紹介 */
#city_info {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto 32px auto;
}

#ci_bousai,
#ci_about,
#ci_shigikai,
#ci_hall,
#ci_event,
#ci_mayor {
  width: 15.5%;
  height: 240px;
}

#ci_bousai a,
#ci_about a,
#ci_shigikai a,
#ci_hall a,
#ci_event a,
#ci_mayor a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #ffffff;

  border-radius: 4px;
  transition: 0.3s;
}


/* 防災ボタン */
#ci_bousai a {
  background-color: #b7282e;
  background-image: url("../images/icon/bousai.png");
  background-repeat: no-repeat;
  background-position: center 40px;
}

#ci_bousai a:hover {
  opacity: 0.9;
  background-color: #CF7677;
}

#ci_bousai h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 140px;
}

#ci_bousai ul {
  font-size: 77%;
  line-height: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2em;
}

/* 臼杵の紹介ボタン */

#ci_about a {
  background-color: #25b7c0;
  /* ケンブリッジブルー */
  background-image: url("../images/icon/about_usuki.jpg");
  background-repeat: no-repeat;
  background-position: center 40px;
}

#ci_about a:hover {
  opacity: 0.85;
  background-color: #82cddd;
}

#ci_about h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 140px;
}

#ci_about ul {
  font-size: 77%;
  line-height: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2em;
}

/* 市役所情報ボタン */
#ci_hall a {
  background-color: #25b7c0;
  /* ケンブリッジブルー */
  background-image: url("../images/icon/about_city_hall.png");
  background-repeat: no-repeat;
  background-position: center 40px;
}

#ci_hall a:hover {
  opacity: 0.85;
  background-color: #82cddd;
}

#ci_hall h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 140px;
}

#ci_hall ul {
  font-size: 77%;
  line-height: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2em;
}

/* 臼杵市議会ボタン */
#ci_shigikai a {
  background-color: #25b7c0;
  /* ケンブリッジブルー */
  background-image: url("../images/icon/about_shigikai.jpg");
  background-repeat: no-repeat;
  background-position: center 40px;
}

#ci_shigikai a:hover {
  opacity: 0.85;
  background-color: #82cddd;
}

#ci_shigikai h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 140px;
}

#ci_shigikai ul {
  font-size: 77%;
  line-height: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2em;
}

/* イベント情報ボタン */
#ci_event a {
  background-color: #25b7c0;
  /* ケンブリッジブルー */
  background-image: url("../images/icon/about_event.jpg");
  background-repeat: no-repeat;
  background-position: center 40px;
}

#ci_event a:hover {
  opacity: 0.85;
  background-color: #82cddd;
}

#ci_event h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 140px;
}

#ci_event ul {
  font-size: 77%;
  line-height: 1.5em;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 2em;
}

/* ようこそ市長室へボタン */
#ci_mayor a {
  background-color: #25b7c0;
  /* ケンブリッジブルー */
  background-image: url("../images/icon/about_mayor_nishioka.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

#ci_mayor a:hover {
  opacity: 0.85;
  background-color: #82cddd;
}

#ci_mayor h2 {
  font-size: 120%;
  text-align: center;
  padding-top: 4px;
  line-height: 1.1em;
}

#ci_mayor h2 span {
  font-size: 80%;
}

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

  body,
  #wrapper,
  #container,
  #header,
  #header_inner,
  #main,
  #content,
  #footer,
  .footer_address {
    width: auto;
  }

  #content {
    padding: 0 10px;
  }

  #city_info,
  #life_event ul,
  #kurashi_info ul {
    width: auto;
    justify-content: space-around;
  }

  #city_info,
  #life_event ul,
  #kurashi_info ul {
    flex-wrap: wrap;
  }

  #city_info ul {
    margin-left: 2em;
  }

  #ci_bousai,
  #ci_about,
  #ci_shigikai,
  #ci_hall,
  #ci_event,
  #ci_mayor {
    width: 45%;
    height: 250px;
    margin-bottom: 20px;
  }

  .shimin_h2 span {
    font-size: 70%;
  }
}

/* //////////////////// いざというとき //////////////////// */
#urgency {
  padding: 10px 20px 30px 20px;
  background-color: #efefef;
  margin-bottom: 50px;

  border-radius: 5px;
}

#urgency h2 {
  font-size: 140%;
  color: #202f55;
  border-bottom: 4px solid #202f55;
  margin-bottom: 30px;
}

#urgency ul {
  line-height: 2em;
  margin: 0 1em;
}

#urgency ul li {
  display: inline-block;
  background-image: url("../images/icon/emergency_icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 30px;
  margin-right: 3em;
}

/* //////////////////// バナー //////////////////// */
.top_banner_area {
  display: flex;
  width: 1000px;
  margin: 0 auto 50px auto;
}

.shigikai_btn,
.usuki_channel,
.usuki_project,
.usukideai,
.usukinojimono,
.honmamon_btn {
  width: 180px;
  height: 72px;
  margin-right: 24px;
}

.shigikai_btn a {
  display: block;
  width: 180px;
  line-height: 72px;
  text-decoration: none;
  font-size: 120%;
  color: #ffffff;
  text-align: center;
  background-image: url("../images/button/gikai_btn.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

.shigikai_btn a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .top_banner_area {
    width: auto;
    flex-direction: column;
  }

  .usuki_project,
  .usuki_channel,
  .usukideai,
  .shigikai_btn,
  .usukinojimono,
  .honmamon_btn {
    margin: 0 auto 20px auto;
  }
}

/* ////////////////////さくらマラソン2020//////////////////// */
.sakura_marathon {
  width: 570px;
  height: 80px;
  margin: 0 auto 50px auto;
}

@media screen and (max-width: 768px) {
  .sakura_marathon {
    width: auto;
  }

  .sakura_marathon img {
    width: 100%;
    height: auto;
  }
}

/* ///////////////////////// ライフイベント ///////////////////////// */
#life_event * {
  box-sizing: border-box;
}

#life_event {
  margin-bottom: 50px;
}

.life_event_list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0 auto 25px auto;
}

.life_event_item {
  text-align: center;
  height: 120px;
}

.life_event_item>a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #333333;
  font-size: 120%;
  line-height: 1.3em;
  background-color: #fbfaf5;
  padding-top: 10px;
  transition: 0.3s;
  border: 1px solid #b28c6e;
}

.life_event_item>a:hover {
  color: #ff0000;
  font-size: 140%;
  background-color: #fff3b8;
  border: 1px solid #b4866b;
}

@media screen and (max-width: 768px) {
  .life_event_list {
    grid-template-columns: repeat(3, 1fr);
    margin: 0 16px 25px 16px;
  }
}

@media screen and (max-width: 600px) {
  .life_event_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 8px 25px 8px;
  }
}

#le_munu01>a {
  background-image: url("../images/icon/life_hikkoshi.png");
  background-repeat: no-repeat;
  background-position: center 58px;
}

#le_munu02>a {
  background-image: url("../images/icon/life_kekkon.png");
  background-repeat: no-repeat;
  background-position: center 49px;
}

#le_munu04>a {
  font-size: 105%;
  padding-top: 12px;
  background-image: url("../images/icon/life_kosodate.png");
  background-repeat: no-repeat;
  background-position: center 58px;
}

#le_munu04>a:hover {
  font-size: 115%;
}

@media screen and (max-width: 768px) {
  #le_munu04>a {
    font-size: 100%;
  }
}

#le_munu05>a {
  background-image: url("../images/icon/life_nyugaku.png");
  background-repeat: no-repeat;
  background-position: center 58px;
}

#le_munu06>a {
  background-image: url("../images/icon/life_house.png");
  background-repeat: no-repeat;
  background-position: center 60px;
}

#le_munu07>a {
  background-image: url("../images/icon/life_byoki.png");
  background-repeat: no-repeat;
  background-position: center 50px;
}

#le_munu08>a {
  background-image: url("../images/icon/life_kaigo.png");
  background-repeat: no-repeat;
  background-position: center 51px;

}

#le_munu09>a {
  background-image: url("../images/icon/life_shibou.png");
  background-repeat: no-repeat;
  background-position: center 55px;
}

/* 20211025 市民向けトップライフイベントサブメニュー */
#le_munu01 .le_preview,
#le_munu02 .le_preview,
#le_munu03 .le_preview,
#le_munu04 .le_preview,
#le_munu05 .le_preview,
#le_munu06 .le_preview {
  top: 120px;
}

#le_munu07 .le_preview,
#le_munu08 .le_preview,
#le_munu09 .le_preview {
  top: 270px;
}

.le_preview {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #574436;
  transition: all 0.7s ease 0s;
  border-bottom: 2px solid #fff;
  border-radius: 5px;
  border-top: 2px solid #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

.life_event_item:hover .le_preview {
  opacity: 1;
  pointer-events: inherit;
}

.le_preview ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0.8em 0.4em;
}

.le_preview ul li {
  color: #fff;
  text-align: left;
  width: 23%;
  margin: 0 1% 0.3em 1%;
}

.le_preview ul li a {
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0.15em 0;
}

.le_preview ul li a:hover {
  color: #11DFEC;
}

.le_preview ul li a::before {
  content: "・";
}

@media screen and (max-width: 768px) {
  .le_preview {
    display: none;
  }
}

/* ///////////////////////// くらしの情報 ////////////////////////// */
#kurashi_info * {
  box-sizing: border-box;
}

#kurashi_info {
  margin-bottom: 50px
}

.kj_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  margin: 0 auto 25px auto;
  position: relative;
}

.kj_item {
  text-align: center;
  height: 120px;
}

@media screen and (max-width: 768px) {
  .kj_list {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 16px 25px 16px;
  }

  .kj_item {
    height: 135px;
  }
}

@media screen and (max-width: 480px) {
  .kj_list {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    margin: 0 8px 25px 8px;
  }

  .kj_item {
    height: 135px;
  }
}


.kj_item>a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: #3cb37a;
  border-radius: 4px;
  transition: 0.3s;
}

.kj_item>a:hover {
	background-color: #228356;
}

#kj_munu01 h3 {
	font-size: 120%;
	line-height: 1.4em;
	padding-top: 6px;
	letter-spacing: 0.8em;
	text-indent: 0.8em;
}

#kj_munu01 p {
	font-size: 85%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu02 h3 {
  font-size: 120%;
  line-height: 1.4em;
  padding-top: 6px;
}

#kj_munu02 p {
	font-size: 75%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu03 h3 {
  font-size: 110%;
  line-height: 1.4em;
  padding-top: 6px;
}

#kj_munu03 p {
	font-size: 85%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu04 h3 {
  font-size: 120%;
  line-height: 1.4em;
  padding-top: 6px;
}

#kj_munu04 p {
	font-size: 85%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu05 h3 {
  font-size: 110%;
  line-height: 1.2em;
  padding-top: 6px;
}

#kj_munu05 p {
	font-size: 85%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 45px;
}

#kj_munu06 h3 {
  font-size: 120%;
  line-height: 1.4em;
  padding-top: 6px;
  letter-spacing: 0.8em;
  text-indent: 0.8em;
}

#kj_munu06 p {
	font-size: 70%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu07 h3 {
  font-size: 120%;
  line-height: 1.4em;
  padding-top: 6px;
  letter-spacing: 0.8em;
  text-indent: 0.8em;
}

#kj_munu07 p {
	font-size: 85%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu08 h3 {
  font-size: 120%;
  line-height: 1.4em;
  padding-top: 6px;
}

#kj_munu08 p {
	font-size: 70%;
	line-height: 1.3em;
	padding: 0 7px;
	margin-top: 60px;
}

#kj_munu01>a {
  background-image: url("../images/icon/kurashi_icon_01.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu02>a {
  background-image: url("../images/icon/kurashi_icon_02.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu03>a {
  background-image: url("../images/icon/kurashi_icon_03.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu04>a {
  background-image: url("../images/icon/kurashi_icon_04.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu05>a {
  background-image: url("../images/icon/kurashi_icon_05.png");
  background-repeat: no-repeat;
  background-position: center 43px;
}

#kj_munu06>a {
  background-image: url("../images/icon/kurashi_icon_06.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu07>a {
  background-image: url("../images/icon/kurashi_icon_07.png");
  background-repeat: no-repeat;
  background-position: center center;
}

#kj_munu08>a {
  background-image: url("../images/icon/kurashi_icon_08.png");
  background-repeat: no-repeat;
  background-position: center center;
}

/* 20211025 市民向けトップ暮らしの情報サブメニュー */
#kj_munu01 .kj_preview,
#kj_munu02 .kj_preview,
#kj_munu03 .kj_preview,
#kj_munu04 .kj_preview {
  top: 120px;
}

#kj_munu05 .kj_preview,
#kj_munu06 .kj_preview,
#kj_munu07 .kj_preview,
#kj_munu08 .kj_preview {
  top: 270px;
}

.kj_preview {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #186641;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 5px;
  transition: all 0.4s ease 0s;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

.kj_item:hover .kj_preview {
  opacity: 1;
  pointer-events: inherit;
}

.kj_preview ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0.8em 0.4em;
}

.kj_preview ul li {
  color: #fff;
  text-align: left;
  width: 23%;
  margin: 0 1% 0.3em 1%;
}

.kj_preview ul li a {
  display: inline-block;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.kj_preview ul li a:hover {
  color: #74D5A7;
}

.kj_preview ul li a::before {
  content: "・";
}

@media screen and (max-width: 768px) {
  #kj_munu03 h3 {
    font-size: 90%;
  }

  #kj_munu03 p {
    font-size: 80%;
    margin-top: 68px;
  }

  #kj_munu04 p {
    font-size: 80%;
    margin-top: 60px;
  }

  #kj_munu05 p {
    font-size: 70%;
    margin-top: 55px;
  }

  #kj_munu07 p {
    font-size: 77%;
    margin-top: 70px;
  }

  .kj_preview {
    display: none;
  }
}


/* //////////////////// 市政情報 //////////////////// */
#shisei_info {
  margin-bottom: 50px;
}

#shisei_info ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
  width: 1000px;
  margin: 0 0 25px 0;
}

#shisei_info ul li {
  color: #9b72b0;
  width: 205px;
  min-height: 20px;
  background-image: url("../images/icon/shisei_list_icon.png");
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 25px;
  margin-left: 20px;
  margin-bottom: 30px;
}

#shisei_info ul li a {}

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

  #shisei_info ul {
    width: auto;

    justify-content: space-around;
  }

  #shisei_info ul li {
    width: 40%;
  }
}


/* //////////////////// よく使う項目 //////////////////// */
#useful {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 25px auto;
  margin-bottom: 70px;
}

#useful div {
  width: 28%;
  padding: 10px;
}

#useful div h3 {
  text-align: center;
  margin-bottom: 20px;
}

#useful div ul li {
  margin-bottom: 20px;
}

#useful div ul li a {
  display: block;
  text-decoration: none;
  background-color: #eebbcb;
  padding: 10px 10px 10px 15px;
}

#useful div ul li a:hover {
  background-color: #F1DCE2;
}

@media screen and (max-width: 768px) {
  #useful {
    width: auto;
    justify-content: space-around;
  }

  #useful div {
    width: 80%;
    margin: 0 auto;
  }
}

/* //////////////////// 広告バナー　////////////////////  */
.koukoku_banner_box {
  margin-bottom: 50px;
}

.bannerImages {
  width: 1000px;
  margin: 0 auto 0 auto;
}

.bannerImages li {
  width: 180px;
  height: 70px;
  float: left;
  margin-bottom: 15px;
  margin-right: 25px;
  background-color: #666666;
}

.bannerImages li:nth-child(5),
.bannerImages li:nth-child(10) {
  margin-right: 0;
}

.ad_banner {
  width: 180px;
  height: 70px;
  float: left;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
  .bannerImages {
    width: auto;
  }

  .ad_banner,
  .bannerImages li,
  .bannerImages li:nth-child(5),
  .bannerImages li:nth-child(10) {
    float: none;
    margin: 0 auto 15px auto;
  }
}

/* //////////////////////////////////////// ふるさと納税 //////////////////////////////////////// */
/* OLD */
.furusato_image {
  height: 450px;
  width: 100%;
  background-image: url("../images/furusato/furusato_image.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 20px;
}

.furusato_image {
  animation: furusato_fadeIn 1.5s ease 0s 1 normal;
}

@keyframes furusato_fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes furusato_fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media screen and (max-width: 768px) {
  .furusato_image {
    height: 250px;
    width: 100%;
    background-image: url("../images/furusato/furusato_image.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: inherit;
    margin-bottom: 20px;
  }
}

/* 2022年7月5日　スライドショー版 */
.furusato_visual {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

/* ふるさと納税文字 */
.furusato_slide_logo {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  aspect-ratio: 5.5 / 1;
  width: 40%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1% 2%;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 10;
}

.furusato_slide_logo img {
  display: block;
  width: 88%;
  height: auto;
  margin: 0 auto;
}

.furusato_slider .slick-slide {
  height: 550px !important;
  /* slick.cssを上書き */
}

.furusato_slider .slick-dots {
  bottom: -40px !important;
  /* slick-theme.cssを上書き */
}

.furusato_visual .slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* slick コントール部分 */
.furusato_visual .dot-class {
  width: 1000px;
  margin: 0 auto;
}

.furusato_visual #slide-controll {
  position: relative;
  top: -15px;
  text-align: right;
  width: 1000px;
  margin: 0 auto;
}

.furusato_visual .dot-class>li {
  display: inline-block;
  position: relative;
  z-index: 20;
}

.furusato_visual .dot-class>li>button {
  background-color: #b3b3b3;
  border: medium none;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.furusato_visual .dot-class>li.slick-active>button {
  background-color: #25b7c0;
}

.furusato_visual #slide-controll>button {
  width: 60px;
  line-height: 24px;
  cursor: pointer;
}

.furusato_visual #slide-controll>#startBtn {
  font-size: 70%;
  margin: 0 10px 0 0;
  background-color: #efefef;
}

.furusato_visual #slide-controll>#startBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

.furusato_visual #slide-controll>#stopBtn {
  background-color: #efefef;

  font-size: 70%;
}

.furusato_visual #slide-controll>#stopBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

.fs_001 {
  width: 100%;
  height: 100%;
  background-image: url("../images/furusato/slide/furusato_slide001.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.fs_002 {
  width: 100%;
  height: 100%;
  background-image: url("../images/furusato/slide/furusato_slide002.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.fs_003 {
  width: 100%;
  height: 100%;
  background-image: url("../images/furusato/slide/furusato_slide003.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.fs_004 {
  width: 100%;
  height: 100%;
  background-image: url("../images/furusato/slide/furusato_slide004.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.fs_005 {
  width: 100%;
  height: 100%;
  background-image: url("../images/furusato/slide/furusato_slide005.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* キャプション部分 */
.fs_001 span,
.fs_002 span,
.fs_003 span,
.fs_004 span,
.fs_005 span {
  position: absolute;
  right: 5%;
  bottom: 5%;
  font-size: 1.3rem;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.05em;
}

.fs_001 span {
  color: #fff;
}

.fs_002 span {
  color: #fff;
}

.fs_003 span {
  color: #161616;
}

.fs_004 span {
  color: #000;
}

.fs_005 span {
  color: #fff;
}

@media screen and (min-width: 769px) {

  .fs_001,
  .fs_002,
  .fs_003,
  .fs_004,
  .fs_005 {
    height: 550px;
  }
}

@media screen and (max-width: 768px) {
  .furusato_slider .slick-slide {
    height: 200px !important;
  }

  .furusato_visual #slide-controll {
    padding: 0 10px;
    width: auto;
  }

  #slide-controll,
  .furusato_visual .dot-class {
    width: auto;
    padding: 0 10px;
  }

  /* 文字 */
  .furusato_slide_logo {
    top: 25%;
    width: 60%;
  }

  .furusato_slide_logo img {
    width: 88%;
  }

  .fs_001,
  .fs_002,
  .fs_003,
  .fs_004,
  .fs_005 {
    height: 200px;
  }

  .fs_001 span,
  .fs_002 span,
  .fs_003 span,
  .fs_004 span,
  .fs_005 span {
    font-size: 1.1rem;
  }
}

/* END slick コントール部分 */

/* /////////////////////////////　図書館トップ　/////////////////////////////// */
.library_top_image {
  width: 1000px;
  margin: 0 auto 60px auto;
  position: relative;
}

/* slick コントール部分 */
.dot-class {
  width: 1000px;
  margin: 0 auto;
}

.library_top_image #slide-controll {
  position: absolute;
  right: 0;
  bottom: -15px;
  text-align: right;
  width: 1000px;
  margin: 0 auto;
}

.library_top_image .dot-class>li {
  display: inline-block;
  position: relative;
  z-index: 20;
}

.library_top_image .dot-class>li>button {
  background-color: #b3b3b3;
  border: medium none;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.library_top_image .dot-class>li.slick-active>button {
  background-color: #25b7c0;
}

.library_top_image #slide-controll>button {
  width: 60px;
  line-height: 24px;
  cursor: pointer;
}

.library_top_image #slide-controll>#startBtn {
  font-size: 70%;
  margin: 0 10px 0 0;
  background-color: #efefef;
}

.library_top_image #slide-controll>#startBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

.library_top_image #slide-controll>#stopBtn {
  background-color: #efefef;

  font-size: 70%;
}

.library_top_image #slide-controll>#stopBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .library_top_image {
    width: auto;
    height: auto;
  }

  .library_top_image .dot-class,
  .library_top_image #slide-controll {
    padding: 0 10px;
    width: auto;
  }
}

/* END slick コントール部分 */

/* /////////////////////////////　観光トップ　/////////////////////////////// */
.key_visual {
  position: relative;
  height: 640px;
  margin-bottom: 60px;
}

.kanko_slider {
  height: 640px;
}

.kanko_slider .slick-slide {
  height: 640px !important;
  /* slick.cssを上書き */
}

.kanko_slider .slick-dots {
  bottom: -40px !important;
  /* slick-theme.cssを上書き */
}

/* slick コントール部分 */
.key_visual .dot-class {
  width: 1000px;
  margin: 0 auto;
}

.key_visual #slide-controll {
  position: relative;
  top: -20px;
  text-align: right;
  width: 1000px;
  margin: 0 auto;
}

.key_visual .dot-class>li {
  display: inline-block;
  position: relative;
  z-index: 9999;
}

.key_visual .dot-class>li>button {
  background-color: #b3b3b3;
  border: medium none;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.key_visual .dot-class>li.slick-active>button {
  background-color: #25b7c0;
}

.key_visual #slide-controll>button {
  width: 60px;
  line-height: 24px;
  cursor: pointer;
}

.key_visual #slide-controll>#startBtn {
  font-size: 70%;
  margin: 0 10px 0 0;
  background-color: #efefef;
}

.key_visual #slide-controll>#startBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

.key_visual #slide-controll>#stopBtn {
  background-color: #efefef;

  font-size: 70%;
}

.key_visual #slide-controll>#stopBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .key_visual #slide-controll {
    padding: 0 10px;
    width: auto;
  }

  #slide-controll,
  .key_visual .dot-class {
    width: auto;
    padding: 0 10px;
  }
}

/* END slick コントール部分 */

.u-suki-mark {
  position: absolute;
  top: 31px;
  right: 10%;
  margin: auto;
  width: 240px;
  height: 240px;
  background-image: url("../images/u-suki.png");
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  animation: u-mark 1s ease-out 0s 1 normal;
}

.u-suki-mark img {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.ks_001 {
  width: 100%;
  height: 100%;
  background-image: url("../images/slider/slide001.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.ks_002 {
  width: 100%;
  height: 100%;
  background-image: url("../images/slider/slide002.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.ks_003 {
  width: 100%;
  height: 100%;
  background-image: url("../images/slider/slide003.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.ks_004 {
  width: 100%;
  height: 100%;
  background-image: url("../images/slider/slide004.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

@keyframes u-mark {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@-webkit-keyframes u-mark {
  0% {
    opacity: 0;
    transform: scale(0.65, 0.65);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@media screen and (min-width: 769px) {

  .ks_001,
  .ks_002,
  .ks_003,
  .ks_004 {
    height: 640px;
  }
}

@media screen and (max-width: 768px) {
  .key_visual {
    height: 480px;
  }

  .kanko_slider {
    height: 480px;
  }

  .kanko_slider .slick-slide {
    height: 480px !important;
    /* slick.cssを上書き */
  }

  .ks_001,
  .ks_002,
  .ks_003,
  .ks_004 {
    height: 480px;
  }

  .u-suki-mark {
    width: 200px;
    height: 200px;
    background-image: url("../images/u-suki.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
}

/* 観光カテゴリボタン　*/
.kanko_cat_title {
  width: 503px;
  height: 66px;
  margin: 0 auto 30px auto;
}

.kanko_cat_title h2 {
  display: block;
  width: 503px;
  height: 66px;
  background-image: url("../images/kanko/kanko_cat_title.png");
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-size: contain;
}

.kanko_cat_option {
  text-align: center;
  margin-bottom: 30px;
}

.kanko_catbtn_box ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 25px auto;
  /* フェードイン */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

.kanko_catbtn_box ul li {
  text-align: center;
  width: 160px;
  height: 160px;
  margin-bottom: 30px;
  border: 2px solid #999999;
}

.kanko_catbtn_box ul li a {
  display: block;
  color: #2b2b2b;
  font-size: 140%;
  text-decoration: none;
  padding-top: 10px;
  width: 100%;
  height: 150px;
  transition: 0.3s;
}

.kanko_catbtn_box ul li a:hover {
  color: #ff0000;
  background-color: #efefef;
}

#kanko_cat01 a {
  background-image: url("../images/kanko/kanko_catbtn01.png");
  background-repeat: no-repeat;
  background-position: center 60%;
}

#kanko_cat02 a {
  background-image: url("../images/kanko/kanko_catbtn02.png");
  background-repeat: no-repeat;
  background-position: center 60%;
}

#kanko_cat03 a {
  background-image: url("../images/kanko/kanko_catbtn03.png");
  background-repeat: no-repeat;
  background-position: center 60%;
}

#kanko_cat04 a {
  background-image: url("../images/kanko/kanko_catbtn04.png");
  background-repeat: no-repeat;
  background-position: center 60%;
}

#kanko_cat05 a {
  background-image: url("../images/kanko/kanko_catbtn05.png");
  background-repeat: no-repeat;
  background-position: center 60%;
}

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

  .kanko_catbtn_box ul {
    width: auto;
    justify-content: space-around;
  }

  .kanko_cat_title {
    width: 90%;
    height: 60px;
    margin: 0 auto 30px auto;
  }

  .kanko_cat_title h2 {
    display: block;
    width: 100%;
    height: auto;
    background-image: url("../images/kanko/kanko_cat_title.png");
    background-repeat: no-repeat;
    background-position: center top;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
}

/* 20210906 臼杵市観光協会バナー */
.banner_kyoukai {
  background-color: #fffb64;
  width: 70%;
  height: 86px;
  margin: 0 auto 40px auto;
  /* フェードイン */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

.banner_kyoukai a {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../images/kanko/banner_kyoukai.svg");
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.banner_kyoukai a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .banner_kyoukai {
    width: 90%;
    height: 68px;
    margin: 0 auto 32px auto;
  }

  .banner_kyoukai a {
    background-size: 90%;
  }
}

/* 英語ブログリンク */
.english_info_link {
  width: 70%;
  margin: 0 auto 50px auto;
  /* フェードイン */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

.english_info_link a {
  display: block;
  width: auto;
  line-height: 80px;
  color: #664128;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 190%;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background-color: #f8e58c;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-image: url("../images/kanko/samurai.png");
  background-size: contain;
  border: 3px solid #8d6449;
  border-radius: 5px;
  padding-left: 35px;
}

.english_info_link a:hover {
  color: #ff0000;
  background-color: #F4DB65;
}

.english_info_link a .external {
  display: none;
}

@media screen and (max-width: 768px) {
  .english_info_link {
    width: 90%;
    margin: 0 auto 30px auto;
  }

  .english_info_link a {
    font-size: 130%;
    line-height: 1em;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url("../images/kanko/samurai.png");
    padding: 10px 10px 10px 40px;
  }
}

/* 20210906 */
.see_kanko {
  margin: -20px 1em 50px 1.5em;
}

/* 歴史・国宝・先哲 */
.culture_area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 25px auto;
  /* フェードイン */
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}

.culture_area a {
  text-decoration: none;
}

.culture_area a .external {
  display: none;
}

.culture_title {
  display: block;
  font-size: 110%;
  color: #161616;
  padding: 8px 0 5px 0;
  margin-left: 100px;
}

.culture_txt {
  display: block;
  font-size: 80%;
  color: #333333;
  line-height: 1.4em;
  margin-left: 100px;
}

.rekishi_box {
  width: 30%;
  height: 100px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(194, 228, 233, 1.00) 100%);
  border: 1px solid #dcc9a9;
}

.rekishi_box a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/rekishi.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-position: 10px 10px;
  border: 1px solid #dcc9a9;
}

.kokuhou_box {
  width: 30%;
  height: 100px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(220, 212, 179, 1.00) 100%);
  background-repeat: no-repeat;
  background-position: left top;
  border: 1px solid #dcc9a9;
}

.kokuhou_box a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/kokuhou.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-position: 10px 10px;
  border: 1px solid #dcc9a9;
}

.sentetsu_box {
  width: 30%;
  height: 100px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(232, 212, 210, 1.00) 100%);
  background-repeat: no-repeat;
  background-position: left top;
  border: 1px solid #dcc9a9;
}

.sentetsu_box a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/sentetsu.jpg");
  background-repeat: no-repeat;
  background-position: 10px 10px;
  border: 1px solid #dcc9a9;
}

.rekishi_box a:hover,
.kokuhou_box a:hover,
.sentetsu_box a:hover {
  background-color: #333333;
}

a:hover .culture_title,
a:hover .culture_txt {
  color: #ffffff;
}

@media screen and (max-width: 768px) {
  .culture_area {
    width: auto;
    flex-direction: column;
  }

  .rekishi_box,
  .kokuhou_box,
  .sentetsu_box {
    width: 80%;
    margin: 0 auto 10px auto;
  }
}


/* 観光リンクボタン */
.k_linkbtn_area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 25px auto;
}

.k_linkbtn_area a {
  text-decoration: none;
}

.k_linkbtn_area a .external {
  display: none;
}

.klink_title {
  display: block;
  font-size: 110%;
  color: #161616;
  padding: 6px 0;
  margin-left: 85px;
}

.klink_txt {
  display: block;
  font-size: 75%;
  color: #555555;
  line-height: 1.4em;
  margin-left: 85px;
}

.k_linkbtn01,
.k_linkbtn02,
.k_linkbtn03,
.k_linkbtn04,
.k_linkbtn05,
.k_linkbtn06,
.k_linkbtn07,
.k_linkbtn08,
.k_linkbtn09 {
  width: 28%;
  padding: 5px 1%;
  margin-bottom: 30px;
  border: 1px solid #999999;
}

.k_linkbtn01 a:hover,
.k_linkbtn02 a:hover,
.k_linkbtn03 a:hover,
.k_linkbtn04 a:hover,
.k_linkbtn05 a:hover,
.k_linkbtn06 a:hover,
.k_linkbtn07 a:hover,
.k_linkbtn08 a:hover,
.k_linkbtn09 a:hover {
  opacity: 0.75;
}

.k_linkbtn01 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn01.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn02 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn02.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn03 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn03.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn04 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn04.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn05 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn05.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn06 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn06.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn07 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn07.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn08 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn08.png");
  background-repeat: no-repeat;
  background-position: left center;
}

.k_linkbtn09 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/k_linkbtn09.png");
  background-repeat: no-repeat;
  background-position: left center;
}

@media screen and (max-width: 768px) {
  .k_linkbtn_area {
    width: auto;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .k_linkbtn01,
  .k_linkbtn02,
  .k_linkbtn03,
  .k_linkbtn04,
  .k_linkbtn05,
  .k_linkbtn06,
  .k_linkbtn07,
  .k_linkbtn08,
  .k_linkbtn09 {
    width: 80%;
    margin: 0 auto 15px auto;
  }
}

/* バナー（プラザ・石仏） */
.shisetsu_banner_area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 30px auto;
}

.kanko_plaza_link {
  width: 480px;
  height: 180px;
  background-color: #ffffff;
}

.kanko_plaza_link a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/banner_plaza.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  transition: 0.3s;
}

.kanko_plaza_link a:hover {
  opacity: 0.75;
}

.usuki_sekibutsu_link {
  width: 480px;
  height: 180px;
  background-color: #ffffff;
}

.usuki_sekibutsu_link a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/kanko/banner_sekibutsu.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  transition: 0.3s;
}

.usuki_sekibutsu_link a:hover {
  opacity: 0.75;
}

@media screen and (max-width: 768px) {
  .shisetsu_banner_area {
    width: auto;
    flex-direction: column;
  }

  .kanko_plaza_link,
  .usuki_sekibutsu_link {
    width: 80%;
    height: 130px;
    margin: 0 auto 15px auto;
  }

  .kanko_plaza_link a,
  .usuki_sekibutsu_link a {
    background-size: contain;
  }
}

/* 観光バナー */
.kanko_banner_area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 1000px;
  padding: 30px 0;
  margin: 0 auto 30px auto;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.banner_kichiyomu {
  width: 242px;
  height: 66px;
}

.banner_kichiyomu a {
  display: block;
  width: 242px;
  height: 66px;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url("../images/kanko/banner_kichiyomu.png");
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/*
.banner_green {
  width: 242px;
  height: 66px;
}
.banner_green a {
    display: block;
    width: 242px;
    height: 66px;
    background-repeat: no-repeat;
    background-position: left top;
    background-image: url("../images/kanko/banner_green.jpg");
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
*/

.banner_kichiyomu a:hover,
.banner_green a:hover {
  opacity: 0.75;
}

@media screen and (max-width: 768px) {
  .kanko_banner_area {
    width: auto;
    flex-direction: column;
  }

  .banner_kichiyomu,
  .banner_green {
    margin: 0 auto 15px auto;
  }
}

/* 観光戦略・観光ビデオ */
.pr_banner_area {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  width: 1000px;
  margin: 0 auto 70px auto;
}

.pr_banner_item {
  aspect-ratio: 4.5 / 1;
}

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

.doutaichosa {
  display: grid;
  place-content: center;
  height: 100%;
  color: #c82c55;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-decoration: none;
  border: 4px solid #c82c55;
  background-color: #F9E3E8;
  box-sizing: border-box;
  border-radius: 8px;
}

.pr_banner_item a:hover {
  opacity: 0.80;
}

@media screen and (max-width: 768px) {
  .pr_banner_area {
    display: block;
    width: 100%;
  }

  .pr_banner_item {
    width: 80%;
    margin: 0 auto 16px auto;
  }
}

/* 観光記事リンク */
.kanko_docs_link_area .contentGpCategoryCategoryType {
  display: flex;
  flex-wrap: wrap;
}

.kanko_docs_link_area .categoryTypeKanko {
  box-sizing: border-box;
  width: 31.3%;
  padding: 10px;
  margin: 0 1% 12px 1%;
  border: 1px solid #999999;

  border-radius: 6px;
}

.kanko_docs_link_area .categoryTypeKanko h2 a {
  display: block;
  font-size: 70%;
  background-image: url("../images/category_icon.gif");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}

.kanko_docs_link_area .categoryTypeKanko:hover {
  background-color: #f8f4e6;
}

@media screen and (max-width: 768px) {
  .kanko_docs_link_area .contentGpCategoryCategoryType {
    width: auto;
    flex-direction: column;
  }

  .kanko_docs_link_area .categoryTypeKanko {
    width: 90%;
    margin: 0 auto 12px auto;
  }
}

/* ///////////////////////////// 防災ページ //////////////////////////////// */
.bousai_contents {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 25px auto;
}

/* 最終行端数調整用 */
.bousai_contents::after {
  content: "";
  display: block;
  width: 30%;
}

.bousai_btnbox {
  width: 30%;
  margin-bottom: 30px;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: 0.5s;
}

.bousai_btnbox a {
  color: #333333;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}

.bousai_btnbox:hover {
  background-color: #666666;
}

.bousai_btnbox a:hover {
  color: #ffffff;
}

.bousai_btnbox:hover .b_title {
  background-color: #000000;
}

.b_icon {
  width: 89px;
  height: 90px;
  margin: 0 auto 20px auto;
  background-color: #ebe9e9;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4);
}

.b_title {
  font-weight: bold;
  text-align: center;
  background-color: #f7f7f7;
  border: 1px solid #aaaaaa;
  padding: 5px;
  margin: 0 10px 10px 10px;
}

.b_txt {
  font-size: 90%;
  margin: 0 15px;
  text-align: justify;
  text-justify: inter-ideograph;
  /* IE */
}

.kasai_bousai h2 {
  color: #ffffff;
  font-size: 140%;
  line-height: 1.2em;
  margin: 50px 0 30px 0;
  background-color: #D22C25;
  padding: 8px 20px 8px 20px;
  border-radius: 3px;

}

@media screen and (max-width: 768px) {
  .bousai_contents {
    width: auto;
    justify-content: space-around;
  }

  .bousai_btnbox {
    width: 47%;
  }

  /* 最終行端数調整用 */
  .bousai_contents::after {
    content: "";
    display: block;
    width: 47%;
  }
}

/* ********************************************************

      移住・定住ページ

******************************************************** */
.iju_key_visual {
  width: 1000px;
  height: 380px;
  margin: 0 auto 50px auto;
}

.iju_key_visual img {
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.27);
}

.iju_category_area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 1000px;
  margin: 50px auto 70px auto;

}

/* 20210908 市民向け定住支援バナー */
.shimin_teiju_sien {
  width: 370px;
  margin: 0 auto;
}

.shimin_teiju_sien a {
  display: block;
  color: #fff;
  font-size: 1.9rem;
  text-decoration: none;
  text-align: center;
  line-height: 80px;
  background-color: #EA8000;
  border-radius: 8px;
  text-shadow: 0 2px #C36A00;
  border: 3px solid #CD6300;
}

.shimin_teiju_sien a:hover {
  background-color: #F89217;
}

@media screen and (max-width: 768px) {
  .shimin_teiju_sien {
    width: 90%;
    margin: 0 auto;
  }
}

/* ******** 住む　******** */
.iju_sumu {
  width: 450px;
  margin-bottom: 30px;
  position: relative;
  padding: 10px;
  background: repeating-linear-gradient(-45deg, #9AC140, #9AC140 4px, #80B221 3px, #80B221 8px);
  border-radius: 10px;
}

.sumu_title {
  color: #ffffff;
  font-size: 170%;
  font-weight: bold;
  line-height: 1;
  margin: 0 10px 5px 10px !important;
  text-shadow: 0 2px 3px #506A15;
}

.sumu_title span {
  font-size: 150%;
}

.iju_sumu .iju_link_title {
  color: #308A01;
}

.iju_sumu ul li a:hover {
  background-color: #C8DC9A;
}

/* ******** 育てる　******** */
.iju_sodateru {
  width: 450px;
  margin-bottom: 30px;
  position: relative;
  padding: 10px;
  background: repeating-linear-gradient(-45deg, #FDAB7B, #FDAB7B 4px, #FD965C 3px, #FD965C 8px);
  border-radius: 10px;
}

.sodateru_title {
  color: #ffffff;
  font-size: 170%;
  font-weight: bold;
  line-height: 1;
  margin: 0 10px 5px 10px !important;
  text-shadow: 0 2px 3px #A75423;
}

.sodateru_title span {
  font-size: 150%;
}

.iju_sodateru .iju_link_title {
  color: #FF6E26;
}

.iju_sodateru ul li a:hover {
  background-color: #FDD0B6;
}

/* ******** 働く　******** */
.iju_hataraku {
  width: 450px;
  margin-bottom: 30px;
  position: relative;
  padding: 10px;
  background: repeating-linear-gradient(-45deg, #9ECEFC, #9ECEFC 4px, #83C0F9 3px, #83C0F9 8px);
  border-radius: 10px;
}

.hataraku_title {
  color: #ffffff;
  font-size: 170%;
  font-weight: bold;
  line-height: 1;
  margin: 0 10px 5px 10px !important;
  text-shadow: 0 2px 3px #226EB4;
}

.hataraku_title span {
  font-size: 150%;
}

.iju_hataraku .iju_link_title {
  color: #1888F3;
}

.iju_hataraku ul li a:hover {
  background-color: #BBDBFB;
}

/* ******** 楽しむ　******** */
.iju_tanoshimu {
  width: 450px;
  margin-bottom: 30px;
  position: relative;
  padding: 10px;
  background: repeating-linear-gradient(-45deg, #FCB6F9, #FCB6F9 4px, #FBA4F8 3px, #FBA4F8 8px);
  border-radius: 10px;
}

.tanoshimu_title {
  color: #ffffff;
  font-size: 170%;
  font-weight: bold;
  line-height: 1;
  margin: 0 10px 5px 10px !important;
  text-shadow: 0 2px 3px #AD15A8;
}

.tanoshimu_title span {
  font-size: 150%;
}

.iju_tanoshimu .iju_link_title {
  color: #EF72EB;
}

.iju_tanoshimu ul li a:hover {
  background-color: #FAD4F8;
}

/* ******** 共通　******** */
.iju_inner {
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) inset;
  padding: 10px;
}

.iju_inner p {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3em !important;
}

.iju_inner ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style-type: none !important;
}

.iju_inner ul li {
  background-color: #f5f5f5;
  border: 1px solid #999999;
  margin-bottom: 10px;
  position: relative;
  /* external icon position */
}

.iju_inner ul li a {
  display: block;
  text-decoration: none;
  padding: 5px 10px;
}

.iju_inner ul li .external {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.iju_caption {
  display: block;
  color: #2b2b2b;
  font-size: 100%;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 3px;
}

.iju_link_title {
  display: block;
  font-size: 140%;
  text-align: center;
  line-height: 1.2em;
}

.iju_link_title span {
  font-size: 80%;
}

.iju_sodateru .iju_inner {
  /*  min-height: 512px;*/
}

@media screen and (max-width: 768px) {
  .iju_key_visual {
    width: 100%;
    height: auto;
  }

  .iju_category_area {
    flex-direction: column;
    width: auto;
  }

  .iju_sumu,
  .iju_sodateru,
  .iju_hataraku,
  .iju_tanoshimu {
    width: 90%;
    margin: 0 auto 30px auto;
  }

  .iju_link_title {
    font-size: 130%;
  }

  .iju_caption {
    font-size: 90%;
  }
}

/* //////////////////// 給食　//////////////////// */
/* クッキング教室 */
#cokking_wrap {
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
}

#cokking_wrap dl {
  display: inline-block;
  width: 200px;
  vertical-align: top;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
}

#cokking_wrap dl dd {
  padding: 0;
  text-align: left;
  margin-top: 7px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 野津親子料理教室 */
#oyako_cokking_wrap {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  border-bottom-width: 2px;
  border-bottom-style: dotted;
  border-bottom-color: #CCC;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
}

#oyako_cokking_wrap dl {
  display: inline-block;
  width: 250px;
  vertical-align: top;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
}

#oyako_cokking_wrap dl dd {
  padding: 0;
  text-align: left;
  margin-top: 7px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

#oyako_cokking_wrap dl dd img {
  margin-bottom: 0;
}

.oyako_photobox {
  border-top-width: 2px;
  border-top-style: dotted;
  border-top-color: #CCC;
  margin-top: 10px;
  padding-top: 20px;
}

.oyako_photobox img {
  width: 230px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-left: 5px;
}

.oyako_p {
  clear: both;
}

/* 超人シェフのスーパー給食 */
.super_kyusyoku div {
  display: inline-block;
  vertical-align: top;
  width: 232px;
  margin-bottom: 20px;
  margin-right: 7px;
  margin-left: 7px;
  padding-bottom: 10px;
  border-bottom-width: 2px;
}

.super_kyusyoku div img {
  display: block;
  width: 230px;
  padding: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 5px;
  margin-left: 0;
  border: 1px solid #CCC;
}

.super_kyusyoku div p {
  margin: 0;
  padding: 0;
}

/* //////////////////////////////// 総合トップの新着情報　////////////////////////////// */
/* タブ */
#recentTopTab {
  margin-bottom: 50px;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#recentTopTab .content {
  background-color: rgba(255, 255, 255, 0.9);
}

#recentTopTab .tabs ul {
  display: flex;
  flex-wrap: nowrap;
}

#recentTopTab .tabs li {
  flex-grow: 1;
  flex-basis: 0;
  /* Default Color
  background-color: rgba(37,183,192,0.9);
  */
  background-color: rgba(38, 73, 157, 0.9);
  margin-left: 2px;
  margin-right: 2px;
  /* Default Color
    border-top: 2px solid #25b7c0;
    border-left: 2px solid #25b7c0;
    border-right: 2px solid #25b7c0;
  */
  border-top: 2px solid #00afcc;
  border-left: 2px solid #00afcc;
  border-right: 2px solid #00afcc;
}

#recentTopTab .tabs li a {
  display: block;
  padding: 15px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

/* Current tab */
#recentTopTab .tabs li.current {
  background-color: rgba(255, 255, 255, 0.9);
}

#recentTopTab .tabs li.current a {
  color: #2b2b2b;
}

/* 新着一覧リスト */
#recentTopTab .wrapper {
  font-size: 90%;
}

#recentTopTab .content {
  margin-bottom: 10px;
  padding: 20px 10px 10px 10px;
}

#recentTopTab .content li {
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #d7d7d7;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("../images/icon/news_arrow.png");
}

#recentTopTab .content li .publish_date {
  display: inline-block;
  width: 120px;
  margin-right: 1em;
}

#recentTopTab .content li .title_link {
  display: inline-block;
}

/* RSS Atom 一覧 */
#recentTopTab .links {
  position: relative;
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #cccccc;
  border-radius: 6px;
}

#recentTopTab .feed {
  position: absolute;
  top: 10px;
  left: 10px;
}

#recentTopTab ul.feed {
  padding: 0 0 0 26px;
  background: url("../images/ic-rss.gif") left center no-repeat;
}

#recentTopTab .feed li {
  display: inline-block;
}

#recentTopTab .feed li:first-child {
  margin-right: 6px;
}

@media screen and (max-width: 768px) {
  #recentTopTab {
    width: auto;
  }
}

/* //////////////////////////////// 市民トップの新着情報　////////////////////////////// */
/* タブ */
#recentDocsTab {
  margin-bottom: 50px;
}

#recentDocsTab .tabs ul {
  display: flex;
  flex-wrap: nowrap;
}

#recentDocsTab .tabs li {
  flex-grow: 1;
  flex-basis: 0;
  background-color: #25b7c0;
  margin-left: 2px;
  margin-right: 2px;
  border-top: 2px solid #25b7c0;
  border-left: 2px solid #25b7c0;
  border-right: 2px solid #25b7c0;
}

#recentDocsTab .tabs li a {
  display: block;
  padding: 15px 10px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

/* Current tab */
#recentDocsTab .tabs li.current {
  background-color: rgba(255, 255, 255, 0.9);
}

#recentDocsTab .tabs li.current a {
  color: #2b2b2b;
}

/* 新着一覧リスト */
#recentDocsTab .wrapper {
  font-size: 90%;
}

#recentDocsTab .content {
  margin-bottom: 10px;
  padding: 20px 10px 10px 10px;
}

#recentDocsTab .content li {
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #d7d7d7;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("../images/icon/news_arrow.png");
}

#recentDocsTab .content li .publish_date {
  display: inline-block;
  width: 120px;
  margin-right: 1em;
}

#recentDocsTab .content li .title_link {
  display: inline-block;
}

/* RSS Atom 一覧 */
#recentDocsTab .links {
  position: relative;
  padding: 10px 15px;
  border: 2px solid #cccccc;
  border-radius: 6px;
}

#recentDocsTab .feed {
  position: absolute;
  top: 10px;
  left: 10px;
}

#recentDocsTab ul.feed {
  padding: 0 0 0 26px;
  background: url("../images/ic-rss.gif") left center no-repeat;
}

#recentDocsTab .feed li {
  display: inline-block;
}

#recentDocsTab .feed li:first-child {
  margin-right: 6px;
}

/* =========================================================
   eventcalendar ミニカレンダー
========================================================= */
#calendar {
  margin: 0 auto;
  max-width: 300px;
}

#calendar .pieceContainer {
  padding: 10px;
  background-color: #0172c0;
}

#calendar .pieceHeader h2 {
  min-height: 0;
  margin: 0 0 5px;
  padding: 0;
  background-color: transparent;
  color: #fff;
  text-align: center;
}

#calendar .pieceHeader h2::before {
  display: none;
}

#calendar .pieceBody {
  padding: 3px 10px 0;
  border-radius: 5px;
  background-color: #fff;
}

#calendar .pieceBody h3 {
  padding: 5px 0;
  font-weight: bold;
  text-align: center;
}

#calendar .pieceBody table {
  width: 100%;
  margin: 0 auto;
  border: none;
  border-color: transparent;
}

#calendar .pieceBody th,
#calendar .pieceBody td {
  height: 30px;
  border: none;
  text-align: center;
  vertical-align: bottom;
}

#calendar .pieceBody table a {
  display: block;
}

#calendar .pieceBody .sat {
  background-color: #dff6fe;
  color: #3366ff;
}

#calendar .pieceBody .sun,
#calendar .pieceBody .holiday {
  background-color: #ffe6f1;
  color: #e00;
}

#calendar .pieceBody table .prevMonth,
#calendar .pieceBody table .nextMonth {
  color: #ccc;
}

#calendar .pieceBody .pagination {
  margin: 0;
  padding: 10px 0;
  color: #333;
}

@media screen and (max-width: 768px) {
  #calendar {
    max-width: 100%;
  }
}

/* =========================================================
   todaysEvent
========================================================= */
#simple_tabs {
  display: flex;
  flex-wrap: nowrap;
}

#simple_tabs li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 8px 4px 7px;
  border-top: 1px solid #7ac9eb;
  border-right: 1px solid #7ac9eb;
  border-bottom: 1px solid #0172c0;
  background: linear-gradient(to bottom, #fff, #dbf3fc);
  color: #333;
  font-weight: bold;
  text-align: center;
}

#simple_tabs li:first-child {
  border-left: 1px solid #7ac9eb;
}

#simple_tabs li.current {
  padding-top: 7px;
  border-top: 2px solid #0172c0;
  border-bottom: 0;
  background: linear-gradient(to bottom, #dbf3fc, #fff);
}

#simple_tabs li:not(.current) {
  cursor: pointer;
}

#simple_tabs li:first-child.current {
  border-left: 1px solid #0172c0;
}

#simple_tabs li:last-child.current {
  border-right: 1px solid #0172c0;
}

#simple_tab_panels>div {
  padding: 10px;
  border-style: solid;
  border-width: 0 1px 1px;
  border-color: #0172c0;
}

#simple_tab_panels li {
  padding: 0 0 0 16px;
  background: url("../images/ic-list.png") left 0.5em no-repeat;
}

#simple_tab_panels li:not(:last-child) {
  margin: 0 0 5px;
}

/* =========================================================
   back
========================================================= */
.back {
  display: block;
  width: 140px;
  margin: 0 auto 15px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #fff, #f2f2f2);
}

.back:hover {
  background: linear-gradient(to bottom, #f2f2f2, #fff);
}

.back a {
  display: block;
  padding: 6px 0 4px;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  color: #333;
  font-size: 100%;
  text-align: center;
  text-decoration: none;
}

/* =========================================================
   navi-content
========================================================= */
/* contentGnavMenuItems(index)
----------------------------------------------- */
.contentGnavMenuItems section {
  margin: 0 0 20px;
}

.contentGnavMenuItems h2 {
  border: 1px solid #7ac9eb;
  border-radius: 5px;
  font-size: 100%;
  font-weight: normal;
  background: linear-gradient(to bottom, #fff, #dbf3fc);
}

.contentGnavMenuItems h2:hover {
  background: linear-gradient(to bottom, #dbf3fc, #fff);
}

.contentGnavMenuItems a {
  display: block;
  padding: 8px 15px 6px 32px;
  border-radius: 5px;
  background: url("../images/ic-list.png") no-repeat 16px center;
}

/* contentGnavMenuItem
----------------------------------------------- */
.contentGnavMenuItem {
  display: flex;
  flex-wrap: wrap;
}

.contentGnavMenuItem section {
  width: calc((100% - 40px) / 3);
  margin: 0 0 24px;
}

.contentGnavMenuItem section:not(:nth-child(3n+3)) {
  margin-right: 20px;
}

.contentGnavMenuItem h2 {
  margin: 0 0 12px;
  border: 1px solid #7ac9eb;
  border-radius: 5px;
  font-size: 100%;
  font-weight: normal;
  background: linear-gradient(to bottom, #fff, #dbf3fc);
}

.contentGnavMenuItem h2:hover {
  background: linear-gradient(to bottom, #dbf3fc, #fff);
}

.contentGnavMenuItem h2>a {
  display: block;
  padding: 8px 15px 6px 32px;
  border-radius: 5px;
  background: url("../images/ic-list.png") no-repeat 16px center;
}

.contentGnavMenuItem nav ul {
  padding: 0 18px;
}

.contentGnavMenuItem nav li {
  margin: 0 0 5px;
  padding: 0 0 0 16px;
  background: url("../images/ic-list.png") left 0.5em no-repeat;
}

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

  .contentGnavMenuItem section,
  .contentGnavMenuItem section:not(:nth-child(3n+3)) {
    width: calc((100% - 20px) / 2);
    margin-right: 0;
  }

  .contentGnavMenuItem section:not(:nth-child(even)) {
    margin-right: 20px;
  }
}

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

  .contentGnavMenuItem section,
  .contentGnavMenuItem section:not(:nth-child(3n+3)) {
    width: 100%;
    margin-right: 0;
  }
}

/* //////////////////////////////////////// カテゴリレイアウト　//////////////////////////////////////// */
.contentGpCategory {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 50px auto;
}

/* 最終行端数調整用 */
.contentGpCategory::after {
  content: "";
  display: block;
  width: 30%;
}

/* 20190903 ↓ちあぽーと変更のため不要 */
.contentGpCategory section {
  width: 30%;
  margin-bottom: 40px;
}

.contentGpCategory section h2 {
  font-size: 115%;
  font-weight: normal;
  text-align: center;
  line-height: 1.4em;
  padding: 10px 10px;
  margin-bottom: 22px;
  background-color: #009b9f;
  border-radius: 4px;
}

.contentGpCategory section h2 a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

.contentGpCategory section h2 a:hover {
  color: #ff0000;
  text-decoration: underline;
}

.contentGpCategory section h2 a[href^="/"]::after {
  content: "Link ↗︎";
  font-size: 60%;
  margin-left: 4px;
}

.contentGpCategory section ul {
  line-height: 1.4em;
  margin: 0 5px;
}

.contentGpCategory section ul li {
  margin-bottom: 12px;
  background-image: url("../images/category_icon.gif");
  background-repeat: no-repeat;
  background-position: left 2px;
  padding-left: 25px;
}

@media screen and (max-width: 1024px) {
  .contentGpCategory {
    width: auto;
  }

  .contentGpCategory section {
    width: 45%;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .contentGpCategory {
    width: auto;
    flex-direction: column;
  }

  .contentGpCategory section {
    width: 90%;
    margin: 0 auto 40px auto;
  }
}

/* //////////////////////////////////////// 新カテゴリレイアウト　//////////////////////////////////////// */
#recentDocs {
  margin-bottom: 40px;
  border: 1px solid #cccccc;
  padding-bottom: 20px;
}

#recentDocs ul {
  list-style-type: disc;
  list-style-position: outside;
  line-height: 1.9em;
  margin-left: 3em;
}

#recentDocs h2 {
  font-size: 125%;
  line-height: 1.2em;
  background-color: #fbdac8;
  padding: 7px 1em;
  margin-bottom: 15px;
}

/*カテゴリページ新着枠高さ制限*/
#recentDocs .pieceBody {
  max-height: 300px;
  overflow-y: scroll;
}

@media screen and (max-width: 768px) {
  #recentDocs .pieceBody {
    max-height: 160px;
    overflow-y: scroll;
  }
}

#docCategoryList .level2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 50px auto;
}

#docCategoryList .level2 .category {
  width: 30%;
  margin-bottom: 20px;
}

/* 最終行端数調整用 */
#docCategoryList .level2::after {
  content: "";
  display: block;
  width: 30%;
}

#docCategoryList section h3 {
  font-size: 115%;
  font-weight: normal;
  text-align: center;
  line-height: 1.4em;
  padding: 10px 10px;
  margin-bottom: 22px;
  background-color: #009b9f;
  border-radius: 4px;
}

/* 見出しリンクありの場合 */
#docCategoryList section h3 a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

#docCategoryList section h3 a:hover {
  color: #ff0000;
  text-decoration: underline;
}

#docCategoryList section h3 a[href^="/"]::after {
  content: url("../images/icon/link_icon.png");
  margin-left: 10px;
}

#docCategoryList section ul {
  line-height: 1.4em;
}

#docCategoryList section ul li {
  margin-bottom: 12px;
  background-image: url("../images/category_icon.gif");
  background-repeat: no-repeat;
  background-position: left 2px;
  padding-left: 25px;
}

@media screen and (max-width: 768px) {
  #docCategoryList .level2 {
    flex-direction: column;
    width: auto;
    margin: 0 auto 50px auto;
  }

  #docCategoryList .level2 .category {
    width: 90%;
    margin: 0 auto 40px auto;
  }
}


/* 上位カテゴリ一覧用 */
#docCategoryList ul {
  line-height: 1.4em;
}

#docCategoryList ul li {
  margin-bottom: 12px;
  background-image: url("../images/category_icon.gif");
  background-repeat: no-repeat;
  background-position: left 2px;
  padding-left: 25px;
}

/* ////////////////////////////// お問合せフォーム　////////////////////////////// */
.contact_form_linkbtn a:hover img {
  opacity: 0.75;
}

/* surveyForms(index)
　お問合せクッションページ：surveyForms
　お問合せフォームページ　：surveyForm
----------------------------------------------- */
.surveyForms .core-title .name a {
  color: #003f8e;
  display: block;
  text-align: center;
  text-decoration: none;
  width: 35%;
  padding: 10px 20px;
  margin: 30px auto 30px auto;
  border: 2px solid #003f8e;
  border-radius: 6px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(222, 245, 250, 1.00) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.surveyForms .core-title .name a:hover {
  color: #d70035;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 1.00) 0%, rgba(222, 245, 250, 1.00) 100%);
}

.surveyForm input,
.surveyForm textarea {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"
}

.surveyForm h2 {
  color: #ffffff;
  font-size: 140%;
  line-height: 1.2em;
  margin: 50px 0 30px 0;
  background-color: #006eb0;
  padding: 8px 20px 8px 20px;
  border-radius: 3px;
}

.surveyForms p,
.surveyForm p {
  line-height: 1.8em;
  margin: 0 1.5em 1.5em 1.5em;
}

.surveyForms ul,
.surveyForms ol,
.surveyForm ul,
.surveyForm ol {
  line-height: 2em;
  margin-bottom: 2em;
  padding-left: 4em;
}

.surveyForms ul,
.surveyForm ul {
  list-style-type: disc;
}

.surveyForms ul ul,
.surveyForm ul ul {
  list-style-type: circle;
  margin-bottom: 0;
}

.surveyForms ol,
.surveyForm ol {
  list-style-type: decimal;
}

/* surveyForm(form)
----------------------------------------------- */
.surveyForm {
  margin-bottom: 70px;
}

.questions {
  width: 90%;
  margin: 0 auto;
}

.question {
  margin: 0 0 20px;
}

/* 20251118画像認証用 */
#new_survey_form_answer>.question {
  width: 90%;
  margin: 0 auto 56px auto;
}

#new_survey_form_answer>.question .question_content {
  border-left: none;
  background-color: #fff;
  font-weight: normal;
  min-height: 0;
  font-size: 110%;
  color: #2b2b2b;
  padding: 0 0 10px 0;
  margin: 30px 0 15px 0;
  border-bottom: 3px solid #00a3a7;
}

#new_survey_form_answer #captchaForm .reload a,
#new_survey_form_answer #captchaForm .talk a {
  padding: 2px;
}

#new_survey_form_answer #captchaForm #captcha {
  width: 6em;
  padding: 2px;
  margin-bottom: 8px;
}

.questions>.question .question_content {
  min-height: 0;
  font-size: 110%;
  color: #2b2b2b;
  padding-bottom: 10px;
  margin: 30px 0 15px 0;
  border-bottom: 3px solid #00a3a7;
}

.questions>.question legend.question_content {
  width: 100%;
}

.question_content .note {
  font-size: 75%;
  color: #e00;
}

input,
textarea {
  max-width: 100%;
}

.answer_content {
  line-height: 1.6em;
  word-break: break-all;
  padding: 0 1em;
}

.answer_content input {
  padding: 5px;
}

.answer_content textarea {
  padding: 5px;
  margin-bottom: 10px;
}

.answer_content label {
  margin-right: 1em;
}

.answer_content input[type=radio],
.answer_content input[type=checkbox] {
  display: inline-block;
  float: left;
  margin-right: 6px;
  margin-top: 6px;
}

.answer_content label {
  display: block;
}

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

/* captcha
---------------------- */
.new_survey_form_answer>.question .question_content {
  margin: 0 0 12px;
  padding: 5px 0 3px 12px;
  border-left: 5px solid #0172c0;
  background-color: #edf6fb;
  font-size: 110%;
  font-weight: bold;
}

.captchaForm .image {
  margin: 0 0 15px;
}

.captchaForm img {
  padding: 5px;
  border: 1px solid #b3b3b3;
}

.captchaForm .reload,
.captchaForm .talk {
  display: inline-block;
  width: 140px;
  margin: 0 0 15px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #fff, #f2f2f2);
}

.captchaForm .reload:hover,
.captchaForm .talk:hover {
  background: linear-gradient(to bottom, #f2f2f2, #fff);
}

.captchaForm .reload {
  margin-right: 5px;
}

.captchaForm .reload a,
.captchaForm .talk a {
  display: block;
  padding: 6px 0 4px;
  border: 1px solid #b3b3b3;
  border-radius: 3px;
  color: #333;
  font-size: 100%;
  text-align: center;
  text-decoration: none;
}

.captchaForm .field input {
  padding: 5px;
}

/* submit
---------------------- */
.surveyForm .submit {
  text-align: center;
}

.surveyForm .submit input {
  padding: 8px 30px 6px;
  border: 2px solid #00a3a7;
  border-radius: 3px;
  background: linear-gradient(to bottom, #fff, #dbf3fc);
  font-size: 110%;
  color: #333;
}

.surveyForm .submit input:last-child {
  margin-left: 10px;
}

.surveyForm .submit input:hover {
  background: linear-gradient(to bottom, #dbf3fc, #fff);
  cursor: pointer;
}

/* error
---------------------- */
#errorExplanation {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #e00;
}

#new_survey_form_answer #errorExplanation h2 {
  padding: 0 0 4px 15px;
  border-radius: 4px;
  background-color: #fff;
  color: #e00;
}

#new_survey_form_answer #errorExplanation p {
  margin-left: 15px;
}

#new_survey_form_answer #errorExplanation ul {
  list-style-type: disc;
  margin-left: 30px;
}

#new_survey_form_answer #errorExplanation li {
  color: #e00;
}

/* //////////////////////////////////////// カレンダー //////////////////////////////////////// */
/* カレンダータイプ切り替えタブ */
.eventType_btn {
  padding-top: 30px;
}

.eventType_btn ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;
  align-items: stretch;
  width: 1000px;
  margin: 0 auto 10px auto;
  border-bottom: 5px solid #188ed2;
}

.eventType_btn ul li {
  width: 30%;
  min-height: 50px;
}

.eventType_btn ul li a {
  display: block;
  text-align: center;
  line-height: 40px;
  height: 100%;
  border: 2px solid #188ed2;
  border-width: 2px 2px 0 2px;
  border-color: #188ed2;
  border-style: solid;
  border-radius: 6px 6px 0 0;
}

.calendarEvents,
.calendarMonthlyEvents {
  padding-top: 30px;
}

@media screen and (max-width: 768px) {
  .eventType_btn ul {
    width: auto;
  }

  .eventType_btn ul li {
    width: 30%;
  }

  .eventType_btn ul li a {
    font-size: 80%;
    line-height: 1.4em;
  }
}

.calendarEvents h2 {
  margin: 0 0 12px;
  padding: 0;
  min-height: 0;
  background-color: transparent;
  border-bottom: 2px solid #0172c0;
  color: #0172c0;
}

.calendar_caption {
  padding-top: 15px;
}

.cal_caption_text {
  font-size: 70%;
  text-align: right;
  margin-bottom: 7px;
}

/* ******* カテゴリーリスト ******* */
#calendarCategoryList ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;
  width: 1000px;
  margin: 0 auto 10px auto;
}

#calendarCategoryList ul li a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: 85%;
  text-align: center;
  width: 130px;
  padding: 7px;
  margin: 30px 10px;

  border-radius: 3px;
  transition: 0.3s;
}

#calendarCategoryList ul li.event a {
  background-color: #49b4e6;
}

#calendarCategoryList ul li.koza a {
  background-color: #EE7E4D;
}

#calendarCategoryList ul li.bunka a {
  background-color: #886DAD;
}

#calendarCategoryList ul li.sports a {
  background-color: #53B96F;
}

#calendarCategoryList ul li.sodan a {
  background-color: #F19CA7;
}

#calendarCategoryList ul li.other a {
  background-color: #AAAAB0;
}

#calendarCategoryList ul li.event a:hover,
#calendarCategoryList ul li.koza a:hover,
#calendarCategoryList ul li.bunka a:hover,
#calendarCategoryList ul li.sports a:hover,
#calendarCategoryList ul li.sodan a:hover,
#calendarCategoryList ul li.other a:hover {
  background-color: #e8383d;
}

@media screen and (max-width: 768px) {
  #calendarCategoryList ul {
    width: auto;
  }

  #calendarCategoryList ul li a {
    margin: 8px;
  }

  .cal_caption_text {
    font-size: 65%;
    text-align: left;
    margin-bottom: 7px;
  }
}

/* ******* カレンダー形式 ******* */
.calendarCalendarEvents table td:first-child::before {
  display: block;
  float: left;
  height: 100px;
  content: "";
}

.calendarCalendarEvents table {
  width: 100%;
  font-size: 75%;
  border-color: #b3b3b3;
}

.calendarCalendarEvents table th,
.calendarCalendarEvents table td {
  padding: 7px;
  border: 1px solid #00a3a7;
  width: 14%;
}

.calendarCalendarEvents table th {
  color: #ffffff;
  font-size: 120%;
  font-weight: normal;
  background-color: #00a3a7;
}

.calendarCalendarEvents .date {
  font-size: 160%;
  font-weight: bold;
  margin-bottom: 10px;
}

.calendarCalendarEvents table td ul li {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 2px dotted #b8b8b8;
}

/*土曜日*/
.calendarCalendarEvents table td.sat .date {
  color: #0081D6;
}

/*日曜日*/
.calendarCalendarEvents table td.sun .date {
  color: #ff0000;
}

/*祭日*/
.calendarCalendarEvents table td ul .holiday {
  color: #ff0000 !important;
  font-weight: bold;
}

/* 前後月の数字 */
.calendarCalendarEvents table td.prevMonth .date,
.calendarCalendarEvents table td.prevMonth ul,
.calendarCalendarEvents table td.nextMonth .date,
.calendarCalendarEvents table td.nextMonth ul {
  color: #cccccc !important;
}

/* ******* リスト式レンダー ******* */
.calendarMonthlyEvents table {
  width: 100%;
  font-size: 75%;
  border-color: #b3b3b3;
}

.calendarMonthlyEvents table th,
.calendarMonthlyEvents table td {
  padding: 7px;
  border: 1px solid #00a3a7;
}

.calendarMonthlyEvents table th {
  color: #ffffff;
  font-weight: normal;
  background-color: #25b7c0;
  vertical-align: middle;
}

.calendarMonthlyEvents table td {
  line-height: 1.7em;
}

.calendarMonthlyEvents table td.category {
  font-size: 80%;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.calendarMonthlyEvents table td hr {
  display: none;
}

.calendarMonthlyEvents table td.category span {
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 3px;
}

.calendarMonthlyEvents table td.category span.event {
  background-color: #49b4e6;
}

.calendarMonthlyEvents table td.category span.koza {
  background-color: #EE7E4D;
}

.calendarMonthlyEvents table td.category span.bunka {
  background-color: #886DAD;
}

.calendarMonthlyEvents table td.category span.sports {
  background-color: #53B96F;
}

.calendarMonthlyEvents table td.category span.sodan {
  background-color: #F19CA7;
}

.calendarMonthlyEvents table td.category span.other {
  background-color: #AAAAB0;
}

/* ******* Today ******** */
.calendarTodayEvents table {
  width: 100%;
  font-size: 75%;
  border-color: #b3b3b3;
}

.calendarTodayEvents table th,
.calendarTodayEvents table td {
  padding: 7px;
  border: 1px solid #00a3a7;
}

.calendarTodayEvents table th {
  color: #ffffff;
  font-weight: normal;
  background-color: #25b7c0;
  vertical-align: middle;
}

.calendarTodayEvents table td {
  line-height: 1.7em;
}

.calendarTodayEvents table td.title_link {
  font-weight: bold;
}

/* =========================================================
   tags
========================================================= */
/* contentTagTag
----------------------------------------------- */
.contentTagTag h2 {
  margin: 0 0 12px;
  padding: 0;
  min-height: 0;
  background-color: transparent;
  border-bottom: 2px solid #0172c0;
  color: #0172c0;
}

.dir-tags #contentBody ul,
.contentTagTag ul {
  margin: 0 0 20px;
}

.dir-tags #contentBody li,
.contentTagTag li {
  margin: 0 0 5px;
  padding: 0 0 0 16px;
  background: url("../images/ic-list.png") left 0.5em no-repeat;
}

/* =========================================================
   docs
========================================================= */
/* 新着一覧ページ ------------------------------------------- */
.contentGpArticleDocs h2.date {
  color: #0172c0;
  font-size: 100%;
  min-height: 0;
  background-color: #a0d8ef;
  padding: 7px 10px;
  margin: 0 15px 15px 15px;
  border-radius: 3px;
}

.contentGpArticleDocs .docs ul {
  font-size: 90%;
  margin: 0 0 25px 3em;
  list-style-position: outside;
  list-style-type: disc;
}

.contentGpArticleDocs li {
  margin-bottom: 0.7em;
}

/* 公開日・更新日　表示------------------------ */
.contentGpArticleDoc {
  margin: 0 0 40px;
}

.contentGpArticleDoc .date {
  margin: 0 0 20px;
  text-align: right;
  font-size: 90%;
}

.contentGpArticleDoc .date p {
  margin: 0;
}

.contentGpArticleDoc .body {
  margin: 0 0 40px;
}

.contentGpArticleDoc .date .publishedAt {
  display: none;
}

.doc_content .contentGpArticleDoc .date .publishedAt {
  display: inherit;
}

/***************************　見出し・各タグ ****************************/
/* 見出し1 */
#pageTitle {
  margin: 0 0 20px;
}

#pageTitle h1 {
  position: relative;
  padding: 12px 15px 12px 25px;
  border-top: 3px solid #25b7c0;
  border-bottom: 3px solid #25b7c0;
  background-color: #F5FBFD;
  font-size: 160%;
  line-height: 1.4em;
}

#pageTitle h1::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 8px;
  height: 28px;
  border-left: 8px solid #25b7c0;
}

.cke_editable h2,
.contentGpArticleDoc h2 {
  color: #ffffff;
  font-size: 140%;
  line-height: 1.2em;
  margin: 50px 0 30px 0;
  background-color: #006eb0;
  padding: 8px 20px 8px 20px;
  border-radius: 3px;
}

.cke_editable h3,
.contentGpArticleDoc h3 {
  color: #2b2b2b;
  margin: 50px 0 30px 0;
  padding: 0 10px 7px 20px;
  text-align: left;
  font-size: 140%;
  line-height: 1.2em;
  font-weight: bold;
  border-bottom: 3px solid #161616;
}

.cke_editable h4,
.contentGpArticleDoc h4 {
  margin: 40px 10px 15px 10px;
  padding: 7px 20px;
  color: #2b2b2b;
  font-size: 125%;
  line-height: 1.2em;
  font-weight: bold;
  background-color: #fff3b8;
  border-radius: 4px;
}

.cke_editable h5,
.contentGpArticleDoc h5 {
  margin: 40px 15px 30px 15px;
  padding: 5px 13px;
  color: #2b2b2b;
  font-size: 110%;
  line-height: 1.2em;
  font-weight: bold;
  border-left: 6px solid #006eb0;
  border-bottom: 1px solid #cccccc;
}

.cke_editable h6,
.contentGpArticleDoc h6 {
  margin: 40px 15px 30px 15px;
  padding: 8px 15px;
  color: #2b2b2b;
  font-size: 110%;
  line-height: 1.2em;
  font-weight: bold;
}

/* Text */
.cke_editable p,
.contentGpArticleDoc p {
  line-height: 1.8em;
  margin: 0 1.5em 1.5em 1.5em;
}

.cke_editable .temp7 p,
.cke_editable .adobeReader p,
.contentGpArticleDoc .temp7 p,
.contentGpArticleDoc .adobeReader p {
  margin: 0;
}

.cke_editable ul,
.cke_editable ol,
.contentGpArticleDoc ul,
.contentGpArticleDoc ol {
  line-height: 2em;
  margin-bottom: 2em;
  padding-left: 4em;
}

.cke_editable ul,
.contentGpArticleDoc ul {
  list-style-type: disc;
}

.cke_editable ul ul,
.contentGpArticleDoc ul ul {
  list-style-type: circle;
  margin-bottom: 0;
}

.cke_editable ol,
.contentGpArticleDoc ol {
  list-style-type: decimal;
}

/* Table */
.cke_editable table,
.contentGpArticleDoc table {
  border: 1px solid #b3b3b3;
  margin-bottom: 50px;
}

.cke_editable table th,
.cke_editable table td,
.contentGpArticleDoc table th,
.contentGpArticleDoc table td {
  padding: 10px;
  border: 1px solid #b3b3b3;
  vertical-align: middle;
  line-height: 1.6em;
}

.cke_editable table th,
.contentGpArticleDoc table th {
  text-align: center;
  font-weight: normal;
}

.cke_editable th,
.contentGpArticleDoc th {
  background-color: #F5FBFD;
}

.cke_editable table caption,
.contentGpArticleDoc table caption {
  font-size: 105%;
  text-align: left;
  margin-bottom: 8px;
}

.cke_editable table p,
.contentGpArticleDoc table p {
  margin: 0 !important;
}

.cke_editable table ul,
.cke_editable table ol,
.contentGpArticleDoc table ul,
.contentGpArticleDoc table ol {
  padding: 0 0 0 1.5em !important;
  margin: 0 !important;
}

.scroll_table {
  margin: 0 20px;
}

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

  .cke_editable p,
  .contentGpArticleDoc p {
    margin: 0 1em 1em;
  }

  .cke_editable ul,
  .cke_editable ol,
  .contentGpArticleDoc ul,
  .contentGpArticleDoc ol {
    padding-left: 2em;
  }

  .cke_editable video,
  .cke_editable audio,
  .contentGpArticleDoc video,
  .contentGpArticleDoc audio {
    width: 100%;
    height: auto;
  }

  .scroll_table {
    overflow-x: scroll;
    white-space: nowrap;
    margin-bottom: 20px;
  }

  .scroll_table::before {
    content: "表は横にスクロールして見ることができます。";
    font-size: 90%;
    line-height: 35px;
  }

  .scroll_table::-webkit-scrollbar {
    height: 10px;
  }

  /*バーの太さ*/
  .scroll_table::-webkit-scrollbar-track {
    background: #dddddd;
  }

  /*バーの背景色*/
  .scroll_table::-webkit-scrollbar-thumb {
    background: #25b7c0;
  }

  /*バーの色*/
  .cke_editable p iframe,
  .contentGpArticleDoc p iframe {
    width: 97%;
  }

  .cke_editable iframe,
  .contentGpArticleDoc iframe {
    width: 97%;
  }
}

.cke_editable .map,
.cke_editable .rels,
.cke_editable .tags,
.contentGpArticleDoc .map,
.contentGpArticleDoc .rels,
.contentGpArticleDoc .tags {
  margin-bottom: 30px;
}

.cke_editable .maps h2,
.cke_editable .rels h2,
.cke_editable .tags h2,
.contentGpArticleDoc .maps h2,
.contentGpArticleDoc .rels h2,
.contentGpArticleDoc .tags h2 {
  margin: 0 0 10px;
  padding: 7px 0 4px 16px;
  border: none;
  background-color: #91d0eb;
  font-size: 100%;
  font-weight: bold;
  color: #333;
}

.cke_editable .maps h3,
.contentGpArticleDoc .maps h3 {
  margin: 0 0 12px;
  padding: 0;
  border-style: none none solid;
  border-width: 0 0 2px;
  border-color: #ccc;
  background-color: transparent;
  font-size: 100%;
  font-weight: bold;
  color: #333;
}

/* お問合せ先署名 */
.cke_editable .inquiry,
.contentGpArticleDoc .inquiry {
  margin: 0 0 30px;
}

.cke_editable address,
.contentGpArticleDoc address {
  padding: 8px 15px;
  border-style: none solid solid;
  border-width: 0 1px 1px;
  border-color: #f5b2ac;
  font-style: normal;
}

.cke_editable .inquiry h2,
.contentGpArticleDoc .inquiry h2 {
  color: #3f312b;
  background-color: #f5b2ac;
  font-size: 100%;
  margin: 0;
  padding: 7px 0 4px 16px;
  border-radius: 0;
  border-left: 0;
}

.inquiry address .section {
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

.inquiry address .tel {
  display: inline-block;
  vertical-align: middle;
}

/* 下部住所表示 */
.contact_area {
  padding: 10px 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.contact_area span {
  font-size: 90%;
  margin-right: 2em;
}

.contact_area p {
  font-size: 85%;
  line-height: 1.8em;
}

.contact_area ul {
  line-height: 1.8em;
}

@media screen and (max-width: 768px) {
  .contact_area span {
    display: block;
  }
}

/* contentPage(index)
----------------------------------------------- */
.contentPage {
  margin: 0 0 40px;
}

.contentPage .date {
  margin: 0 0 20px;
  text-align: right;
}

.contentPage .date p {
  margin: 0;
}

.contentPage .body {
  margin: 0 0 40px;
}

.contentPage h2 {
  margin: 1.5em 0 12px;
  padding: 0;
  min-height: 0;
  background-color: transparent;
  border-bottom: 2px solid #0172c0;
  color: #0172c0;
}

.contentPage h3 {
  margin: 1.2em 0 12px;
  padding: 5px 0 3px 12px;
  border-left: 5px solid #0172c0;
  background-color: #edf6fb;
  font-size: 110%;
  font-weight: bold;
}

.contentPage h4 {
  margin: 1em 0 12px;
  padding: 5px 0 3px 12px;
  border-bottom: 1px solid #0172c0;
  border-left: 5px solid #0172c0;
  font-size: 100%;
  font-weight: bold;
}

.contentPage h5 {
  margin: 1em 0 12px;
  padding: 5px 0 3px 12px;
  border-left: 5px solid #0172c0;
  font-size: 100%;
  font-weight: bold;
}

.contentPage h6 {
  margin: 1em 0 12px;
  font-size: 100%;
  font-weight: bold;
  color: #0172c0;
}

.contentPage table {
  margin-bottom: 30px;
  border: 1px solid #b3b3b3;
}

.contentPage table th,
.contentPage table td {
  padding: 6px 10px;
  border: 1px solid #b3b3b3;
  text-align: center;
}

.contentPage th {
  background-color: #edf6fb;
}

.contentPage ul,
.contentPage ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

.contentPage ul {
  list-style-type: disc;
}

.contentPage ol {
  list-style-type: decimal;
}

.contentPage .inquiry {
  margin: 0 0 30px;
}

.contentPage .inquiry h2 {
  margin: 0;
  padding: 7px 0 4px 16px;
  border: none;
  background-color: #ccc;
  font-size: 100%;
  font-weight: bold;
  color: #333;
}

.contentPage address {
  padding: 16px;
  border-style: none solid solid;
  border-width: 0 1px 1px;
  border-color: #ccc;
  font-style: normal;
}

.contentPage address .section {
  font-weight: bold;
}

/* =========================================================
   広報うすき一覧用
========================================================= */
#articleCategoryImages .docs li {
  float: left;
  width: 175px;
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
}

li .image img {
  height: 170px;
  width: 120px;
  background-color: #ffffff;
  background-position: 0 0;
  border: 1px solid #cccccc;
  display: block;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.docs li .title {
  font-size: 12px;
}

/* 広報うすき詳細ページ */
.kouhou_preview {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0 auto 50px auto;
}

.kouhou_thumb {
  width: 250px;
  margin-bottom: 30px;
}

.kouhou_thumb img {
  display: block;
  width: 250px;
  height: auto;
  border: 1px solid #dedede;
}

.kouhou_table {
  width: 65%;
  padding: 0;
}

.kouhou_table caption {
  margin-bottom: 10px;
}

.kouhou_table th {
  white-space: nowrap;
}

.kouhou_table td {
  text-align: left;
}

@media screen and (max-width: 768px) {
  .kouhou_preview {
    flex-direction: column;
  }

  .kouhou_thumb {
    width: 250px;
    margin: 0 auto 50px auto;
  }

  .kouhou_table {
    width: 100%;
  }
}

/* =========================================================
   ふるさと再発見
========================================================= */
.rediscovery_img {
  margin-bottom: 30px;
  margin-left: 70px;
}

.rediscovery_img img {
  display: block;
  border: 1px solid #CCC;
  background-color: #FFF;
  padding: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.rediscovery_dl {
  line-height: 1.8em;
  margin-right: 30px;
  margin-left: 30px;
}

.rediscovery_dl dt {
  float: left;
  color: #1e50a2;
  font-weight: bold;
  margin-bottom: 5px;
  background-image: url("./images/furusato_arrow.gif");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 13px;
}

.rediscovery_dl dd {
  padding-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #999;
  margin-bottom: 5px;
  padding-left: 4em;
  padding-right: 10px;
}

/* 市章 */
#sisyo_image {
  background-image: url("../images/shisyou.png");
  background-repeat: no-repeat;
  background-position: left top;
  height: 250px;
  width: 300px;
  margin: 0 auto 30px auto;
  text-indent: -9999px;
  display: block;
}

/* 防災カメラ */
.cam_data {
  width: 640px;
  margin: 0 auto 30px auto;
}

.camera_category {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0 auto 30px auto;
  padding: 0 !important;
}

.camera_category li {
  width: 40%;
  list-style: none;
  list-style-position: inherit;
}

.camera_category li a {
  display: block;
  text-align: center;
  line-height: 50px;
  background-color: #f5f5f5;
  border: 3px solid #999999;
  border-radius: 12px;
}

.camera_category li a:hover,
.camera_category li a.active_cam {
  background-color: #FFF5A6;
}

.bottom_cam {
  margin-top: 70px;
  margin-bottom: 70px;
}

.cam_message {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 360px;
}

@media screen and (max-width: 768px) {
  .cam_data {
    width: 95%;
    height: auto;
  }

  .cam_data img {
    height: auto !important;
  }

  .camera_category li {
    width: 45%;
  }

  .cam_message {
    height: 160px;
  }
}

/* =========================================================
   sitemap
========================================================= */
.sitemap {
  line-height: 1.6em;
}

ul.level1 {
  border-bottom: 1px dotted #888;
}

ul.sitemap li.level1 {
  padding: 8px 0;
  border-top: 1px dotted #aaa;
}

ul.sitemap li.level1 a {
  padding-left: 10px;
}

ul.sitemap ul.level2 {
  margin-top: 5px;
  padding: 10px 0 10px 30px;
  border-top: 1px dotted #888;
}

ul.sitemap ul.level2 ul {
  padding: 10px 0 10px 30px;
}

a.level2 {
  display: block;
  padding: 5px;
  margin-bottom: 15px;
  border-left: 6px solid #188ED2;
  border-bottom: 1px solid #188ED2;
}

a.level3 {
  display: block;
  background-color: #efefef;
  padding: 4px 10px;
  margin-bottom: 10px;
}

li.level4,
li.level5,
li.level6,
li.level7 {
  background-image: url("../images/category_icon.gif");
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 15px;
}

ul.sitemap li.inquiry {
  margin: 0;
  border-bottom: 0;
}

@media screen and (max-width: 768px) {
  ul.sitemap ul.level2 {
    padding: 10px 0 10px 10px;
  }

  ul.sitemap ul.level2 ul {
    padding: 10px 0 10px 10px;
  }
}

/* 献立メニュー */
.info_syou {
  color: #310102;
  background-color: #FDF5FF;
  padding-top: 2px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  border: 1px solid #c7b692;
}

.info_tyuu {
  color: #310102;
  background-color: #e9fdff;
  padding-top: 2px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  border: 1px solid #c7b692;
}

.mokuhyou {
  font-size: 120%;
  color: #F60;
  font-weight: bold;
}

#notsu_kondate_table,
#usuki_kondate_table {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 5px;
  font-size: 90%;
  text-align: center;
}

#notsu_kondate_table th,
#usuki_kondate_table th {
  color: #310102;
  background-color: #eadab2;
  width: 20%;
  border-top-width: 2px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #c7b692;
  border-right-color: #c7b692;
  border-bottom-color: #c7b692;
  border-left-color: #c7b692;
}

#notsu_kondate_table td,
#usuki_kondate_table td {
  margin: 0;
  padding-top: 5px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 3px;
  border: 1px solid #c7b692;
}

#notsu_kondate_table td img,
#usuki_kondate_table td img {
  padding: 0;
  display: block;
  height: auto;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  max-width: 140px;
  max-height: 140px;
  -ms-interpolation-mode: bicubic;
}

.date_tr {
  font-size: 18px;
  font-weight: bold;
}

.calp {
  font-size: 90%;
  background-color: #fd9228;
  color: #ffffff;
  font-weight: bold;
}

.remarks {
  font-weight: bold;
  color: #F60;
}

.k_menu {
  color: #310102;
}

.chugaku {
  background-color: #E9FDFF;
}

.syougaku {
  background-color: #FDF5FF;
}

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

  .remarks,
  .photo_area,
  .k_menu {
    background-color: #FFF;
  }

  #notsu_kondate_table,
  #usuki_kondate_table {
    overflow: scroll;
  }

  #notsu_kondate_table img,
  #usuki_kondate_table img {
    width: auto;
  }

  .calp {
    font-size: 90%;
    background-color: #fd9228;
    color: #ffffff;
    font-weight: bold;
  }
}

/* ************************************************

  災害時モード

************************************************* */
/* 災害時モード表示 */
#emergency_wrapper {
  flex: 1 1 auto;
  background-color: #cccccc;
}

#emergency_wrapper p,
#emergency_wrapper ul {
  line-height: 1.8em;
}

#emergencyMode p {
  background-color: #11114f;
  text-align: center;
  font-size: 130%;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  padding: 10px 20px;
  margin: 0 auto;
}

/* 緊急アナウンス */
#emergency_announce {
  background-color: #fff;
  width: 1000px;
  margin: 0 auto 30px auto;
  border: 2px solid #E50202;
}

#emergency_announce h2 {
  font-size: 140%;
  color: #FFF;
  text-align: center;
  background-color: #E50202;
  padding: 10px;
}

.announce_inner {
  padding: 1em 1.5em 1.5em 1.5em;
  line-height: 1.5em;
  max-height: 400px;
  overflow-y: auto;
}

/* 防災無線連携 */
.bousai_musen {
  padding: 5px 15px;
  margin-top: 1em;
  margin-bottom: 2em;
  border: 2px solid #ccc;
}

.bousai_musen_date {
  font-size: 85%;
  color: #666;
}

.bousai_musen_title {
  font-size: 130%;
  font-weight: bold;
  color: #E50202;
  line-height: 1.4em;
  margin-bottom: 0 !important;
}

.announce_inner p,
.bousai_musen_text {
  line-height: 1.8em;
  margin-bottom: 1em;
}

/* 災害・被災情報 */
#emergencyRecent {
  width: 1000px;
  margin: 0 auto 70px auto;
}

#emergencyRecent .pieceContainer {
  border: 2px solid #000000;
  background-color: #FFF;
}

#emergencyRecent .pieceHeader {
  padding: 8px 15px;
  background-color: #fee600;
  text-align: center;
}

#emergencyRecent .pieceHeader h2 {
  font-size: 140%;
  color: #000000;
}

#emergencyRecent .pieceBody {
  padding: 8px 15px;
}

#emergencyRecent ul {
  list-style-type: disc;
  margin-left: 1em;
  list-style-position: outside;
}

#emergencyRecent ul li .publish_date {
  font-size: 90%;
  line-height: 1.8em;
  margin-right: 2em;
  width: 12em;
  display: inline-block;
}

#emergencyRecent ul li .title_link {
  font-size: 90%;
}


/* 緊急情報リンク */
.emergency_menu {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto 70px auto;
}

.emergency_cat {
  width: 23%;
  background-color: #f5f5f5;
  border: 2px solid #D80202;
  margin-bottom: 10px;
}

.emergency_menu h2 {
  font-size: 110%;
  color: #FFF;
  background-color: #E70202;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

.emergency_menu ul {
  padding-right: 7px;
  padding-left: 7px;
}

.emergency_menu ul li {
  font-size: 95%;
  background-image: url("../images/icon/emergency_link_icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 18px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #C0C0C0;
}

@media screen and (max-width: 765px) {
  #emergencyMode p {
    width: auto;
  }

  #emergencyRecent {
    width: 90%;
    margin: 0 auto 70px auto;
  }

  #emergencyRecent ul li .publish_date {
    font-size: 90%;
    margin-right: 0;
    width: auto;
    display: block;
  }

  .emergency_menu {
    width: auto;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .emergency_cat {
    width: 80%;
    margin: 0 auto 10px auto;
  }

  #emergency_announce {
    width: 90%;
    margin: 0 auto 30px auto;
  }

  #emergencyRecentDocsTab .pieceBody {
    width: 90%;
    margin: 0 auto 30px auto;
  }
}

/* //////////////////////////////////////// サーラ・デ・うすき //////////////////////////////////////// */
#sala_home {
  background-repeat: no-repeat;
  background-image: url("../images/sala/top_image.jpg");
  background-position: center top;
}

#sala_toph2 {
  width: 100%;
  height: 250px;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-image: url("../images/sala/top_image.jpg");
  background-position: center top;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sala_home #recentDocs {
  margin: 0 10px 40px 10px;
}

#sala_home #recentDocs .pieceHeader h2 {
  border: none;
  margin-bottom: 0;
  font-size: 115%;
  font-weight: bold;
}

#sala_home #recentDocs ul {
  list-style: none;
  padding-top: 15px;
  margin: 0 20px 0 20px;
}

#sala_home p {
  line-height: 1.8em;
  margin: 0 1.5em 1.5em 1.5em;
}

/* サーラ独自 */
#sala_home #recentDocsSala {
  margin: 0 10px 40px 10px;
}

#recentDocsSala .pieceHeader {
  border: 1px solid #aaa;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background-image: url("./images/bg-tab-on.gif");
  background-position: left top;
  background-repeat: repeat-x;
  position: relative;
}

#sala_home #recentDocsSala .pieceBody {
  padding: 0 15px 15px 15px;
  border: 1px solid #aaaaaa;
  border-top: none;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #F96;
  padding-top: 15px;
}

#recentDocsSala .pieceBody li {
  margin-bottom: 3px;
  padding-left: 12px;
  background-image: url("../base/images/ic-list02.gif");
  background-position: 0 5px;
  background-repeat: no-repeat
}

#sala_home #recentDocsSala .pieceHeader h2 {
  padding: 8px 5px 8px 15px;
  border: none;
  margin-bottom: 0;
  font-size: 115%;
  font-weight: bold;
}

#sala_home #recentDocsSala ul {
  list-style: none;
  margin: 0 20px 0 20px;
}

.sala_h3 {
  font-size: 150% !important;
  background-repeat: repeat;
  background-image: url("../images/sala/sala_h2.png");
  background-position: left top;
  border: none !important;
  color: #ffffff !important;
  font-weight: normal !important;
  padding: 6px 15px 6px 15px !important;
  margin: 0 10px 30px 10px !important;
}

.sala_h4 {
  color: #ffffff;
  font-weight: normal;
  background-color: #8d6449;
  padding: 5px 15px 5px 15px !important;
  margin: 0 15px 20px 15px !important;
  border: none !important;

  border-radius: 3px;

}

.sala_home_txt {
  color: #48372c;
  margin: 0;
  font-size: 105%;
}

.hometxt_time {
  font-size: 120%;
}

.hometxt_tel {
  font-size: 180%;
  font-weight: bold;
}

.hometxt_parking {
  margin: 0 10px 40px 10px !important;
}

.sala_topinfo {
  text-align: center;
}

#topbtn_box {
  width: 1000px;
  height: 160px;
  margin: 0 auto 60px auto;
  font-size: 0;
  text-align: center;
}

#topbtn_box a:hover {
  opacity: 0.8;
}

#topbtn_food {
  width: 160px;
  height: 160px;
  display: inline-block;
  margin-right: 50px;
  font-size: 100%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

#topbtn_food a {
  width: 160px;
  height: 160px;
  display: block;
  background-image: url("../images/sala/topbtn_food.png");
  background-position: left top;
}

#topbtn_challenge {
  width: 160px;
  height: 160px;
  display: inline-block;
  margin-right: 50px;
  font-size: 100%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

#topbtn_challenge a {
  width: 160px;
  height: 160px;
  display: block;
  background-image: url("../images/sala/topbtn_challenge.png");
  background-position: left top;
}

#topbtn_ikoi {
  width: 160px;
  height: 160px;
  display: inline-block;
  font-size: 100%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

#topbtn_ikoi a {
  width: 160px;
  height: 160px;
  display: block;
  background-image: url("../images/sala/topbtn_ikoi.png");
  background-position: left top;
}

.sala_detailbtn {
  text-align: right;
  margin: 0 20px 20px 20px;
}

.sala_detailbtn a {
  background-color: #2ca9e1;
  color: #ffffff;
  font-size: 110%;
  text-decoration: none;
  padding: 7px 25px !important;
  border-radius: 3px;
}

.sala_detailbtn a:hover {
  background-color: #74C9EF;
}

.sala_fmap {
  text-align: center;
  margin-bottom: 60px;
}

#sala_toplogo {
  font-size: 220%;
  text-align: center;
  font-weight: bold;
  margin-bottom: 40px;
}

.sala_navi {
  width: 998px;
  margin: 0 auto 50px auto !important;
  list-style: none !important;
  padding: 0 !important;
  border-left: 1px solid #9E9478;
}

.sala_navi li {
  float: left;
  width: 198px;
  height: 40px;
  border-top: 1px solid #9E9478;
  border-bottom: 1px solid #9E9478;
  border-right: 1px solid #9E9478;
  margin: 0 !important;
}

.sala_navi li a {
  display: block;
  text-align: center;
  width: 198px;
  height: 40px;
  line-height: 40px;
  color: #4a3a27;
  font-size: 105%;
  font-weight: bold;
  text-decoration: none;
}

.sala_navi li a:hover,
.sala_active {
  background-color: #ded6b9;
}

#food_title,
#shisetsu_title,
#usuroku_title,
#challenge_title,
#ikoi_title {
  text-align: center;
  width: 100%;
  line-height: 50px;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
  background-color: none !important;
  border: none !important;

  border-radius: 3px;
}

#food_title {
  background-color: #53351d !important;
}

#shisetsu_title {
  background-color: #d55e1e !important;
}

#usuroku_title {
  background-color: #7da82b;
}

#challenge_title {
  background-color: #d35c1e;
}

#ikoi_title {}

.guide {
  background-color: #e45e32;
  color: #ffffff;
  padding: 10px 20px;

  border-radius: 6px;
  margin: 0 10px 30px 10px;
}

.guide p {
  margin: 0;
}

.guide_l {
  text-align: center;
  font-size: 130%;
  margin-bottom: 10px !important;
}

/* こだわりの食 */
#uoshin_box {
  border: 5px solid #D3381C;
}

#porto_box {
  border: 5px solid #b09b78;
}

#rosetta_box {
  border: 5px solid #007b43;
}

.usuroku_linkbtn {
  text-align: right;
  margin-bottom: 20px;
}

.usuroku_linkbtn a {
  background-color: #2ca9e1;
  color: #ffffff;
  font-size: 110%;
  text-decoration: none;
  padding: 7px 25px !important;

  border-radius: 3px;
}

.usuroku_linkbtn a:hover {
  background-color: #74C9EF;
}

#uoshin_box,
#porto_box,
#rosetta_box {
  border-radius: 6px;
  padding: 10px 20px;
  margin: 0 10px 40px 10px;
}

#uoshin_box p,
#porto_box p,
#rosetta_box p {
  margin: 0 0 15px 0;
}

.shop_infoarea {
  margin-bottom: 30px;
  padding: 10px;
}

.shop_h3 {
  font-size: 130%;
  padding: 0 !important;
  margin: 15px 0 20px 0 !important;
  background-color: inherit !important;
  border: none !important;
}

.shopname_l {
  font-size: 200%;
  margin-left: 0.5em;
}

.shopname_lr {
  font-size: 200%;
  margin-right: 0.5em;
}

.shop_info {
  width: 345px;
  background-color: #e7e3d4;
  padding: 15px;
  float: left;
  margin: 0 10px 10px 0;

  border-radius: 6px;
}

.shop_info dl {
  margin: 0 !important;
}

.shop_info dl dt {
  width: 6em;
  float: left;
}

.shop_info dl dd {
  margin-left: 6em;
}

.shop_info p {
  margin: 0 !important;
}

.shop_image {
  width: 285px;
  float: right;
  margin: 0;
}

.shop_image img {
  width: 285px;
  margin: 0 0 10px 0 !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

/* おしらせの黒板 */
.open_info {
  background-color: #3c6450;
  padding: 10px 25px 5px 15px;
  border-radius: 3px;
}

.open_info dl {
  margin: 0 !important;
}

.open_info dl dt {
  color: #ffffff;
  width: 200px;
  float: left;
}

.open_info dl dd {
  color: #ffffff;
  margin-left: 200px;
}

/* 臼六ラボ */
.usuroku_text {
  font-size: 150%;
  text-align: center;
}

.usuroku_table {
  width: 94%;
}

.usuroku_table th,
.usuroku_table td {}

.usuroku_table th {
  color: #2b2b2b;
  background-color: #D9C9BD;
  vertical-align: middle;
  white-space: nowrap;
}

.usuroku_table img {
  margin: 0;
}

.usuroku_td_title {
  white-space: nowrap;
  font-size: 105%;
  font-weight: bold;
  color: #a84200;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* チャレンジ */
#usuroku_box,
#tsumami_box {
  border-radius: 6px;
  padding: 10px 20px 20px 20px;
  margin: 0 10px 40px 10px;
}

#usuroku_box {
  border: 5px solid #d75d08;
}

#tsumami_box {
  border: 5px solid #f7c114;
}

.machine_title {
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px 5px 10px;
  background-color: #f1bf99;
  border-radius: 3px;
}

.machine_box {
  border-top: 7px solid #DCDDDD;
  padding: 20px 0 10px 0;
}

.machine_text {
  width: 440px;
  float: left;
}

.machine_text p {
  margin: 0 0 10px 0;
}

.machine_image {
  float: right;
  width: 480px;
}

.machine_image img {
  width: 220px;
  margin: 0 0 10px 20px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.machine_dl {
  margin: 0 !important;
  background-color: #dcdddd;
  padding: 15px 15px 5px 15px;
  border-radius: 3px;
}

.machine_dl dt {
  width: 6em;
  float: left;
  margin: 0;
}

.machine_dl dd {
  margin-left: 6em;
  margin: 0;
}

.fst_l {
  font-size: 130%;
  color: #F07100;
}

.challenge_box {
  width: 160px;
  border: 2px solid #965036;
  border-radius: 6px;

  display: inline-block;
  vertical-align: top;
  margin: 0 5px 20px 5px;
}

.challenge_title {
  background-color: #965036;
  color: #ffffff;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.challenge_photo {
  width: 120px;
  margin: 0 auto 10px auto;
}

.challenge_photo img {
  margin: 0;
}

.challenge_text {
  margin: 0 5px 5px 5px;
  font-size: 90%;
  height: 6em;
}

/* まちなか憩いの場 */
.ikoi_info {
  background-color: #dcdddd;
  padding: 10px 15px 10px 15px;
  margin: 0 10px 30px 10px !important;
  border-radius: 3px;
}

.ikoi_box {
  text-align: center;
}

.ikoi_box img {
  margin: 0 5px 30px 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.gmap_sala {
  width: 640px;
  margin: 0 auto 40px auto !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.sala_accessmap {
  width: 640px;
  margin: 0 auto 40px auto !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.sala_accessmap img {
  width: 640px;
  height: 398px;
  margin: 0;
}

.sala_contact {
  line-height: 30px;
  font-size: 120%;
}

.sala_contact dt {
  width: 8em;
  float: left;
  color: #ffffff;
  font-weight: normal !important;
  text-align: center;
  background-color: #88765A;
  border: 2px solid #88765A;
}

.sala_contact dd {
  margin-left: 8em;
  border: 2px solid #88765A;
  padding-left: 9em;
}

/* ////////////////////////////////////////　サーラデうすき @media　//////////////////////////////////////// */
@media screen and (max-width: 768px) {
  #sala_home {
    background-repeat: no-repeat;
    background-image: url("../images/sala/top_image.jpg");
    background-position: center top;
    background-size: contain;
    padding-top: 110px;
  }

  #sala_toph2 {
    display: none;
  }

  #sala_toplogo {
    font-size: 130%;
  }

  #topbtn_box {
    width: 160px;
    height: auto;
    margin-bottom: 20px;
  }

  #topbtn_food,
  #topbtn_challenge,
  #topbtn_ikoi {
    margin-bottom: 20px;
  }

  .sala_navi {
    width: 100%;
    border: 1px solid #9E9478;
  }

  .sala_navi li {
    float: none;
    width: 100%;
    height: 40px;
  }

  .sala_navi li a {
    width: 100%;
    height: 40px;
  }

  #food_title,
  #shisetsu_title,
  #usuroku_title,
  #challenge_title,
  #ikoi_title {
    width: 100%;
  }

  .shop_info {
    width: auto;
  }

  .shop_image {
    width: auto;
    float: none;
  }

  .shop_image img {
    width: 100%;
  }

  .shopname_l,
  .shopname_lr {
    font-size: 130%;
    display: block;
    line-height: 1.2em;
    margin-bottom: 8px;
  }

  /* おしらせの黒板 */
  .open_info dl dt {
    width: auto;
    float: none;
  }

  .open_info dl dd {
    color: #ffffff;
    margin-left: 0;
  }

  .sala_fmap img {
    width: 90%;
  }

  .gmap_sala {
    width: 90%;
    height: auto;
  }

  .gmap_sala iframe {
    width: 100%;
  }

  .machine_image {
    float: none;
    width: auto;
  }

  .machine_image img {
    width: 100%;
    margin: 0 0 10px 0 !important;
  }

  .machine_text {
    width: auto;
    float: none;
  }

  .machine_dl dt {
    width: auto;
    float: none;
  }

  .machine_dl dd {
    margin-left: 0;
  }

  .sala_contact {
    margin: 0 5px 20px 5px !important;
    line-height: inherit;
    font-size: 110%;
  }

  .sala_contact dt {
    width: 100%;
    float: none;
    color: #ffffff;
    font-weight: normal !important;
    text-align: center;
    background-color: #88765A;
    border: 2px solid #88765A;
    margin: 0 !important;
  }

  .sala_contact dd {
    width: 100%;
    text-align: center;
    margin: 0 !important;
    border: 2px solid #88765A;
    padding: 7px 0;
  }

  .sala_accessmap {
    width: 90%;
  }

  .sala_accessmap img {
    width: 100%;
    height: auto;
  }
}

/* ////////////////////////////////////////////////////////////

      うすきの地もの

//////////////////////////////////////////////////////////// */
.uskjmn_topimage {
  margin-bottom: 40px;
}

#usukinojimono {
  margin-bottom: 90px;
}

#usukinojimono h2 {
  /*font-family: "Hannari";*/
  font-family: "Sawarabi Mincho";
  font-size: 170%;
  letter-spacing: 0.05em;
  padding-bottom: 0.4em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  color: #000;
  border-bottom: 5px solid #d4dbd8;
  position: relative;
}

#usukinojimono h2::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #aeaa99;
  bottom: -5px;
  width: 30%;
}

#usukinojimono #recentDocs h2 {
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
  background-color: #d4dbd8;
}

#usukinojimono #recentDocs h2::after {
  display: none;
}

#usukinojimono #recentDocs ul {
  margin-left: 3em;
  margin-bottom: 0;
  list-style-type: disc;
  list-style-position: outside;
  line-height: 1.9em;
}

#usukinojimono h3 {
  color: #615D40;
  font-size: 140%;
  margin: 1em 0 1em 1em;
}

#usukinojimono p {
  font-family: "M PLUS Rounded 1c";
  letter-spacing: 0.03em;
  line-height: 1.8em;
  margin-bottom: 1.5em;
}

#usukinojimono ul {
  font-family: "M PLUS Rounded 1c";
  letter-spacing: 0.03em;
  line-height: 1.8em;
  margin-left: 3em;
  margin-bottom: 2em;
  list-style-type: disc;
  list-style-position: outside;
}

.rinen_list li {
  list-style: none;
  background-image: url("../images/usukinojimono/list_no_icon.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 33px;
  margin-bottom: 0.3em;
}

/* 20210528 */
.jimono_intro {
  display: flex;
  justify-content: space-between;
}

.jimono_mark {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jimono_intro_text {
  width: 70%;
}

/* パンフレット */
.jimono_pamphlet_area {
  width: 80%;
  padding: 5% 10%;
  margin: 0 auto 60px auto;
  background-color: #2b2b2b;
  display: flex;
  justify-content: space-between;
}

.pamphlet_box {
  width: 40%;
  text-align: center;
  background-color: #fff;
  padding: 20px 20px 0 20px;
  border: 1px solid #F3D98C;
}

.pamphlet_image {
  margin-bottom: 20px;
}

.pamphlet_image img {
  width: auto;
  height: auto;
  max-height: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pamphlet_link {
  font-size: 80%;
}

.frstnz_banner a img {
  display: block;
  width: 400px;
  height: 100px;
  margin: 0 auto 30px auto;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 768px) {
  .jimono_pamphlet_area {
    flex-direction: column;
  }

  .pamphlet_box {
    width: 80%;
    margin: 0 auto 30px auto;
  }

  .frstnz_banner a img {
    width: 90%;
    height: auto;
  }

  .rinen_list {
    margin-left: 1em !important;
  }

  /* 20210528 */
  .jimono_intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .jimono_mark {
    width: auto;
    margin: 0 auto 30px auto;
  }

  .jimono_intro_text {
    width: 100%;
  }
}

/* うすきの地もの　お問合せ先署名 */

.jimono_inquiry {
  margin: 0 0 30px;
}

.jimono_inquiry address {
  padding: 8px 15px;
  border-style: none solid solid;
  border-width: 0 1px 1px;
  border-color: #f5b2ac;
  font-style: normal;
}

.jimono_inquiry h2 {
  color: #3f312b;
  background-color: #f5b2ac;
  font-size: 100%;
  margin: 0;
  padding: 7px 0 4px 16px;
  border-radius: 0;
  border-left: 0;
}

.jimono_inquiry address .section {
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

.jimono_inquiry address .tel {
  display: inline-block;
  vertical-align: middle;
}

/* 2020 アズレージョの壁画 */
.azulejo_topimage {
  margin-bottom: 60px;
}

.azulejo_thumbnail {
  width: 310px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .azulejo_thumbnail {
    display: block;
    width: 85%;
    height: auto;
    margin: 0 auto 30px auto;
  }
}

/* ////////////////////　2020 コロナウィルス トップページバナー ////////////////////　*/
.corona_virus_area {
  text-align: center;
  box-sizing: border-box;
  width: 60%;
  max-width: 750px;
  margin: 0 auto 30px auto;
  background-color: #f7f7f7;
  border: 4px solid #c30023;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

.corona_virus_area h2 {
  font-size: 220%;
  font-weight: bold;
}

.corona_virus_area a {
  display: block;
  color: #121212;
  text-decoration: none;
  padding: 0.5em;
}

.corona_virus_area a:hover {
  color: #c30023;
}

.corona_virus_area a:hover .virus_caution {
  color: #000;
}

.corona_virus_area p {
  font-size: 150%;
  font-family: Arial, Helvetica, sans-serif;
}

.virus_caution {
  font-size: 1.2rem;
  font-weight: bold;
  color: #E60009;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カテゴリページのタイトル */
.corona_virus_cat_title {
  color: #c30023;
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto 50px auto;
  background-color: #f7f7f7;
  border: 5px solid #c30023;
  padding: 2em;
}

.corona_virus_cat_title h2 {
  font-size: 220%;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.corona_virus_cat_title p {
  font-size: 160%;
  font-family: Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 768px) {
  .corona_virus_area {
    width: 85%;
  }

  .corona_virus_area a {
    padding: 1em;
  }

  .corona_virus_area h2 {
    font-size: 140%;
  }

  .corona_virus_area p {
    font-size: 90%;
  }

  /*カテゴリページのタイトル*/
  .corona_virus_cat_title {
    padding: 1em 0.5em;
  }

  .corona_virus_cat_title h2 {
    font-size: 125%;
  }

  .corona_virus_cat_title p {
    font-size: 110%;
  }
}

/* 20210212 コロナワクチン接種　トップページバナー */
.corona_virus_vaccine {
  text-align: center;
  box-sizing: border-box;
  width: 60%;
  max-width: 750px;
  margin: 0 auto 30px auto;
  background-color: #664EC1;
  border: 4px solid #664EC1;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

.corona_virus_vaccine a {
  display: block;
  text-decoration: none;
  padding: 0.3em 0.25em;
}

.corona_virus_vaccine a:hover {
  background-color: #fff;
}

.corona_virus_vaccine a:hover .vinfo_title {
  color: #664EC1;
}

.corona_virus_vaccine a:hover .vinfo {
  color: #E60009;
}

.vinfo_title {
  color: #fff;
  font-size: 180%;
  font-weight: bold;
  line-height: 1.4em;
}

.vinfo {
  color: #FFF800;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.vinfo_message {
  font-size: 140%;
}

.vinf_msg_small {
  font-size: 110%;
}

@media screen and (max-width: 768px) {
  .corona_virus_vaccine {
    width: 85%;
    max-width: inherit;
  }

  .corona_virus_vaccine a {
    font-size: 100%;
  }

  .vinfo {
    flex-direction: column;
    align-items: center;
  }

  .vinfo_message {
    font-size: 100%;
  }

  .vinf_msg_small {
    font-size: 80%;
  }
}

/* //////////////////// ワクチンバナー接種ページ内バナー //////////////////// */
.vaccination_area * {
  box-sizing: border-box;
}

.vaccination_area {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto 24px auto;
}

.vaccine_1st2nd,
.vaccine_children,
.vaccine_3rd,
.vaccine_4th {
  width: 40%;
  margin-bottom: 24px;
}

/* ********** ワクチン１・２回目 ********** */
.vaccine_1st2nd a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 1.7rem;
  height: 100px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.2em;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
  background-color: #0078e8;
  border: 4px solid #2A94F6;
}

.vaccine_1st2nd a span {
  font-size: 1.4rem;
}

.vaccine_1st2nd a:hover {
  background-color: #2A94F6;
  border: 4px solid #0078e8;
}

/* **********  小児接種  ********** */
.vaccine_children * {
  box-sizing: border-box;
}

.vaccine_children a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100px;
  font-size: 1.7rem;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  background-color: #2eb815;
  border: 4px solid #65dd50;
}

.vaccine_children a:hover {
  background-color: #65dd50;
  border: 4px solid #2eb815;
}

.vaccine_children a span {
  font-size: 1.4rem;
}

/* **********  ワクチン3回目接種  ********** */
.vaccine_3rd * {
  box-sizing: border-box;
}

.vaccine_3rd a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 1.7rem;
  height: 100px;
  text-decoration: none;
  line-height: 1.2em;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  background-color: #E67D00;
  border: 4px solid #f6ad49;
}

.vaccine_3rd a span {
  font-size: 1.4rem;
}

.vaccine_3rd a:hover {
  background-color: #f6ad49;
  border: 4px solid #f08300;
}

/* **********  ワクチン4回目接種  ********** */
.vaccine_4th * {
  box-sizing: border-box;
}

.vaccine_4th a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 1.7rem;
  height: 100px;
  text-decoration: none;
  line-height: 1.2em;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  background-color: #7f4ddc;
  border: 4px solid #af90e9;
}

.vaccine_4th a span {
  font-size: 1.4rem;
}

.vaccine_4th a:hover {
  background-color: #af90e9;
  border: 4px solid #7f4ddc;
}

@media screen and (max-width: 768px) {
  .vaccination_area {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  .vaccine_1st2nd {
    width: 90%;
    margin: 0 auto 20px auto;
  }

  .vaccine_children {
    width: 90%;
    margin: 0 auto 20px auto;
  }

  .vaccine_3rd {
    width: 90%;
    margin: 0 auto 20px auto;
  }

  .vaccine_3rd a {
    height: auto;
    padding: 10px;
  }

  .vaccine_4th {
    width: 90%;
    margin: 0 auto 20px auto;
  }
}

/* IE11対策 */
@media all and (-ms-high-contrast:none) {
  .vaccine_3rd a {
    display: block;
    padding: 0 4px;
  }

  .vaccine3rd_title {
    display: block;
    text-align: center;
  }
}

/* **********　もったいないバンクバナー　***********　*/
.mottainai_vaccine * {
  box-sizing: border-box;
}

.mottainai_vaccine {
  margin: 0 auto 56px auto;
}

.mottainai_vaccine a {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  padding: 0.7em 1em;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  background-color: #e05e72;
  border: 4px solid #ec9ea9;
}

.mottainai_vaccine a:hover {
  background-color: #ec9ea9;
  border: 4px solid #e05e72;
}

.mottainai_title {
  font-size: 1.6rem;
  margin-bottom: 0.3em;
}

.mottainai_text {
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .mottainai_vaccine {
    width: 90%;
  }

  .mottainai_title {
    font-size: 1.3rem;
  }

  .mottainai_text {
    font-size: 0.85rem;
    line-height: 1.3em;
  }
}

/* ********** 3回目接種ページ内フォームへのバナー ********** */
.mottainai_form_link {
  text-align: center;
  margin: 2em;
}

.mottainai_form_link a {
  display: inline-block;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  padding: 0.7em 1.4em;
  border-radius: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
  background-color: #e05e72;
  border: 4px solid #ec9ea9;
}

.mottainai_form_link a:hover {
  background-color: #ec9ea9;
  border: 4px solid #e05e72;
}

/* 20200507 コロナウイルス 支援バナー */
.corona_virus_shien {
  text-align: center;
  box-sizing: border-box;
  width: 70%;
  max-width: 750px;
  margin: 0 auto 40px auto;
  background-color: #f7f7f7;
  border: 4px solid #c30023;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.corona_virus_shien a {
  display: block;
  background-color: #c30023;
  color: #fff;
  font-size: 180%;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.4em;
  padding: 0.3em 0.25em;
}

.corona_virus_shien a:hover {
  background-color: #fff;
  color: #c30023;
}

@media screen and (max-width: 768px) {
  .corona_virus_shien {
    width: 85%;
    max-width: inherit;
  }

  .corona_virus_shien a {
    font-size: 130%;
  }
}

/* 20220401　3回目12才から17才可能になりました */
.third_12to17 {
  text-align: center;
  margin-bottom: 40px;
}

.third_12to17 a {
  display: inline-block;
  color: #fff;
  font-size: 1.25rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.6em;
  background-color: #E64B00;
  padding: 0.3em 1.5em;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  border-bottom: 5px solid #C43800;
}

.third_12to17 a span {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
}

.third_12to17 a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 768px) {
  .third_12to17 a {
    font-size: 1rem;
  }

  .third_12to17 a span {
    font-size: 1.2rem;
  }
}

/* コロナワクチン接種予約サイトバナー */
.vaccine_system_banner {
  text-align: center;
  margin: 3em auto !important;
}

.vaccine_system_banner a {
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  padding: 1em 1.5em;
  background-color: #38b48b;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-bottom: 4px solid #1B8461;
}

.vaccine_system_banner a:hover {
  background-color: #1B8461;
}

@media screen and (max-width: 768px) {
  .vaccine_system_banner {
    width: 90%;
  }
}

/* 20210719 ワクチン接種1・２回目接種ページ内バナー */
.btn1959_area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 70%;
  margin: 0 auto 40px auto;
}

.vaccine_individual {
  width: 250px;
}

.vaccine_group {
  width: 250px;
}

.vaccine_individual a,
.vaccine_group a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  text-decoration: none;
  color: #fff;
  height: 76px;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
}

.vaccine_individual a {
  background-color: #605DB3;
}

.vaccine_group a {
  background-color: #068B66;
}

.vaccine_individual a:hover {
  color: #605DB3;
  background-color: #f2f2f2;
  border-color: #605DB3;
}

.vaccine_group a:hover {
  color: #068B66;
  background-color: #f2f2f2;
  border-color: #068B66;
}

.mottainai_form {
  width: 300px;
  margin: 0 auto 30px auto;
}

.mottainai_form a {
  color: #fff;
  display: block;
  text-align: center;
  font-size: 1.4rem;
  text-decoration: none;
  background-color: #3eb370;
  padding: 0.5em;
  border-radius: 8px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.mottainai_form a:hover {
  background-color: #68be8d;
}

@media screen and (max-width: 768px) {
  .vaccine_individual {
    margin-bottom: 20px;
  }
}

/* コロナワクチン接種基礎疾患インターネット申請ボタン */
.kisosikkan {
  text-align: center;
  margin: 3em auto !important;
}

.kisosikkan a {
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  padding: 1em 1.5em;
  background-color: #EF6E81;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-bottom: 4px solid #D34D62;
}

.kisosikkan a:hover {
  background-color: #EE8998;
}

@media screen and (max-width: 768px) {
  .kisosikkan {
    width: 90%;
  }
}

/* 20210816 臼杵食文化創造都市 */
.shokubunka_bnr {
  text-align: center;
  box-sizing: border-box;
  width: 35%;
  max-width: 480px;
  margin: 0 auto 30px auto;
}

.shokubunka_bnr a {
  display: block;
  color: #fff;
  text-decoration: none;
  /*    background-color: #BA9332; 当初の色 */
  background-color: #382700;
  padding: 12px;
  line-height: 1;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.shokubunka_bnr a:hover {
  /*    background-color: #D3AC4B;*/
  background-color: #5E4201;
}

.shoku_ja {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.2em;
}

.shoku_en {
  font-size: 1rem;
  display: block;
}

@media screen and (max-width: 768px) {
  .shokubunka_bnr {
    width: 85%;
  }
}

/* 食文化ページ内　公式サイトリンクバナー */
.shokubunka_hp_bnr {
  width: 50%;
  margin: 0 auto 40px auto;
}

.shokubunka_hp_bnr a {
  display: block;
}

.shokubunka_hp_bnr a img {
  width: 100%;
  height: auto;
  border: 5px solid #2b2b2b;
  border-radius: 6px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
  .shokubunka_hp_bnr {
    width: 70%;
  }
}

/* 20240801臼杵市施行20周年記念事業 */
.anniversary20 {
  text-align: center;
  box-sizing: border-box;
  width: 35%;
  max-width: 480px;
  margin: 0 auto 32px auto;
}

.anniversary20 a {
  display: block;
  color: #000;
  font-size: 150%;
  text-decoration: none;
  line-height: 1.4em;
  padding: 0.5em 0.25em;
  border-radius: 10px;
  background-color: #9FD8FF;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}

.anniversary20 a:hover {
  /*    opacity: 0.7;*/
  font-weight: bold;
  color: #fff;
  background-color: #3386D0;
}

@media screen and (max-width: 768px) {
  .anniversary20 {
    width: 85%;
    max-width: inherit;
  }

  .anniversary20 a {
    font-size: 120%;
  }
}

/* 20250801パークゴルフ＆のつテラス横並び用 */
.golf_terrace_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .golf_terrace_wrapper {
    display: block;
  }
}

/* 20240621パークゴルフ */
.park_golf {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 32px auto;
}

.park_golf a {
  display: block;
  background-color: #DFC900;
  color: #000;
  font-size: 150%;
  text-decoration: none;
  line-height: 1.4em;
  padding: 0.5em 0.25em;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(180deg, rgba(255, 232, 22, 1.00) 0.83%, rgba(223, 201, 0, 1.00) 100%);
  transition: all 0.5s;
}

.park_golf a:hover {
  font-weight: bold;
  background-color: #F8DF01;
  background-image: linear-gradient(180deg, rgba(223, 201, 0, 1.00) 0.83%, rgba(255, 232, 22, 1.00) 100%);
}

@media screen and (max-width: 768px) {
  .park_golf {
    width: 85%;
    max-width: inherit;
  }

  .park_golf a {
    font-size: 120%;
  }
}

/* 20250602のつてらす */
.notsu_terrace {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 32px auto;
}

.notsu_terrace a {
  background-color: #72bc4d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  text-decoration: none;
  font-size: 1.625rem;
  line-height: 1.4em;
  padding: 0.45em 0.25em;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.4s;
}

.notsu_terrace a:hover {
  font-weight: bold;
  background-color: #8ADB61;
}

.tasedai {
  font-size: 1.125rem;
  margin-right: 1em;
}

.notsu_trc {
  letter-spacing: 0.1em;
  text-indent: 0.05em;
}

@media screen and (max-width: 768px) {
  .notsu_terrace {
    width: 85%;
    max-width: inherit;
  }

  .notsu_terrace a {
    font-size: 1.4rem;
  }

  .tasedai {
    font-size: 0.875rem;
    margin-right: 1em;
  }
}

/* 20250801職員採用試験バナー */
.saiyo_reiwa8 {
  max-width: 480px;
  margin: 0 auto 40px auto;
}

.saiyo_reiwa8 a {
  background-color: #FFAFCF;
  display: grid;
  place-content: center;
  color: #000;
  text-decoration: none;
  font-size: 1.625rem;
  line-height: 1.4em;
  padding: 0.45em 0.25em;
  border-radius: 10px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.4s;
}

.saiyo_reiwa8 a:hover {
  font-weight: bold;
  background-color: #FFC4DB;
}

@media screen and (max-width: 768px) {
  .saiyo_reiwa8 {
    width: 85%;
    max-width: inherit;
  }

  .saiyo_reiwa8 a {
    font-size: 120%;
  }
}


/* 20241204令和６年臼杵市八町大路火災義援金 */
.saigai_wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.hachicho_gienkin a {
  box-sizing: border-box;
  text-align: center;
  display: grid;
  place-content: center;
  color: #EF0000;
  font-size: 150%;
  text-decoration: none;
  background-color: #F5F2E8;
  margin: 0 16px;
  width: 18em;
  height: 70px;
  border: 3px solid #EF0000;
  border-radius: 8px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}

.hachicho_gienkin a:hover {
  font-weight: bold;
}

/* 20240816地震への備えの再確認 */
.earthquake_preparedness a {
  box-sizing: border-box;
  text-align: center;
  display: grid;
  place-content: center;
  color: #FFFFFF;
  font-size: 150%;
  text-decoration: none;
  background-color: #e2041b;
  margin: 0 16px;
  width: 18em;
  height: 70px;
  border-radius: 8px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}

.earthquake_preparedness a:hover {
  font-weight: bold;
  background-color: #C50014;
}

@media screen and (max-width: 768px) {
  .saigai_wrapper {
    display: block;
  }

  .hachicho_gienkin a,
  .earthquake_preparedness a {
    font-size: 115%;
    width: 17em;
    height: 60px;
    margin: 0 auto 24px auto;
  }
}

/* 20200527 うすき丸５つの約束 */
.usukimaru_area {
  width: 70%;
  height: auto;
  margin: 0 auto 40px auto;
}

.usukimaru {
  width: 100%;
  /*横幅いっぱいにwidthを指定*/
  padding-bottom: 70.57%;
  /*高さをpaddingで指定(16:9)*/
  height: 0;
  /*高さはpaddingで指定するためheightは0に*/
  position: relative;
  background-image: url("../images/usukimaru.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.challenge_ship,
.relation_ship,
.friend_ship,
.follower_ship,
.partner_ship {
  position: absolute;
}

/* 1 */
.challenge_ship {
  width: 21%;
  height: 30%;
  top: 31%;
  left: 7.5%;
}

/* 2 */
.relation_ship {
  width: 22%;
  height: 30%;
  top: 63%;
  left: 22%;
}

/* 3 */
.friend_ship {
  width: 22%;
  height: 32%;
  top: 28%;
  left: 38%;
}

/* 4 */
.follower_ship {
  width: 22%;
  height: 32%;
  top: 64.5%;
  left: 50%;
}

/* 5 */
.partner_ship {
  width: 22%;
  height: 32%;
  top: 45%;
  left: 72%;
}

.challenge_ship a,
.relation_ship a,
.friend_ship a,
.follower_ship a,
.partner_ship a {
  color: #ff0000;
  font-weight: bold;
  letter-spacing: -0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-indent: -9999px;
  text-shadow: 1px 2px 1px rgba(255, 255, 255, 1);
}

.challenge_ship a:hover,
.relation_ship a:hover,
.friend_ship a:hover,
.follower_ship a:hover,
.partner_ship a:hover {
  text-indent: inherit;
}

@media screen and (max-width: 768px) {
  .usukimaru_area {
    width: 94%;
  }
}

/* 2020年6月22日追加　フォームへのリンクボタン */
.online_form_btn {
  width: 30%;
  margin: 40px 20px 50px 40px;
}

.online_form_btn a {
  color: #000;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #028760;
  border-radius: 6px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(204, 248, 233, 1.00) 100%);

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.online_form_btn a:hover {
  color: #d70035;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 1.00) 0%, rgba(223, 253, 243, 1.00) 100%);
}

@media screen and (max-width: 768px) {
  .online_form_btn {
    width: 94%;
    margin: 40px auto 50px auto;
  }
}

#page-docs-2014020700374-index .updatedAt,
#page-docs-2014020700398-index .updatedAt {
  display: none;
}

/*  20200929 国勢調査 */
.kokuchou {
  width: 365px;
  height: 180px;
  margin: 0 auto 50px auto;
  background-color: #037b60;
}

.kokuchou a {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.kokuchou a img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .kokuchou {
    width: 85%;
    height: auto;
  }
}

.btm40 {
  margin-bottom: 40px;
}

/* 20210624 臼杵市行財政活性化推進委員会委員の応募フォームボタン */
.kasseika_form {
  text-align: center;
  margin: 60px auto !important;
}

.kasseika_form a {
  font-size: 1.4rem;
  color: #fff;
  text-decoration: none;
  background-color: #1e50a2;
  padding: 0.5em 1.5em;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.kasseika_form a:hover {
  background-color: #223a70;
}

@media screen and (max-width: 768px) {
  .kasseika_form a {
    display: block;
    font-size: 1rem;
    line-height: 1.4em !important;
  }
}


.general_btn {
  text-align: center;
  margin: 40px auto 64px auto !important;
}

.general_btn a {
  display: inline-block;
  color: #fff;
  font-size: 1.1rem;
  background-color: #2E68C5;
  text-decoration: none;
  line-height: 1.4em !important;
  padding: 0.5em 1.5em;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(180deg, rgba(66, 131, 235, 1.00) 0%, rgba(46, 104, 197, 1.00) 99.89%);
}

.general_btn a:hover {
  opacity: 0.8;
}

/* ********** 2023年4月事業者向け *********** */
.business_person {
  box-sizing: border-box;
  margin-bottom: 64px;
}

.bp_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

.bp_list>li {
  width: 23%;
  margin-bottom: 32px;
}

.bp_list>li>a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.15rem;
  text-decoration: none;
  background-color: #0b4362;
  padding: 2em 0.2em;
  border-radius: 3px;
  box-shadow: 0 3px 0 #ddd;
  transition: 0.3s;
}

.bp_list>li>a:hover {
  background-color: #5d6f79;
}

/* サブメニューHover有りの場合
.bp_preview {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #7b8c95;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
    border-radius: 5px;
    padding: 0.5em 1em;
    transition: all 0.4s ease 0s;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}
.bp_list li:hover .bp_preview {
  opacity: 1;
  pointer-events: inherit;
}
.bp_preview ul {
    display: flex;
    flex-wrap: wrap;
    list-style-position: outside;
    list-style: disc!important;
}
.bp_preview ul li {
  color: #fff;
  text-align: left;
  width: 22%;
}
.bp_preview ul li a {
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.bp_preview ul li a:hover {
    color: #74D5A7;
}
 */

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

  .bp_list>li {
    width: 48%;
    margin-bottom: 16px;
  }

  .bp_list>li>a {
    font-size: 0.95rem;
  }
}

#sns .pieceBody {
  display: flex;
  align-items: center;
}

.twitter-wrapper {
  margin-right: 3px;
  line-height: 1;
}


/* 2024年8月20日　パークゴルフスライドショー版 */
.park_golf_visual {
  position: relative;
  width: 1000px;
  margin: 0 auto 20px auto;
}

.park_golf_slider .slick-dots {
  bottom: -40px !important;
  /* slick-theme.cssを上書き */
}

.park_golf_visual .slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* slick コントール部分 */
.park_golf_visual .dot-class {
  width: 1000px;
  margin: 0 auto;
}

.park_golf_visual #slide-controll {
  position: relative;
  top: -15px;
  text-align: right;
  width: 1000px;
  margin: 0 auto;
}

.park_golf_visual .dot-class>li {
  display: inline-block;
  position: relative;
  z-index: 20;
}

.park_golf_visual .dot-class>li>button {
  background-color: #b3b3b3;
  border: medium none;
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}

.park_golf_visual .dot-class>li.slick-active>button {
  background-color: #25b7c0;
}

.park_golf_visual #slide-controll>button {
  width: 60px;
  line-height: 24px;
  cursor: pointer;
}

.park_golf_visual #slide-controll>#startBtn {
  font-size: 70%;
  margin: 0 10px 0 0;
  background-color: #efefef;
}

.park_golf_visual #slide-controll>#startBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

.park_golf_visual #slide-controll>#stopBtn {
  background-color: #efefef;
  font-size: 70%;
}

.park_golf_visual #slide-controll>#stopBtn.current {
  background-color: #25b7c0;
  color: #fff;
}

/* タイトル文字 */
.pg_001 span {
  position: absolute;
  left: 10%;
  top: 12%;
  color: #fff;
  font-size: clamp(1.5rem, 0.773rem + 3.64vw, 3.5rem);
  font-weight: bold;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.05em;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 0.5em 0.8em;
}

@media screen and (max-width: 768px) {
  .park_golf_visual {
    width: 100%;
  }

  .park_golf_slider .slick-slide {
    aspect-ratio: 1.714 / 1;
  }

  .park_golf_visual #slide-controll {
    padding: 0 10px;
    width: auto;
  }

  .park_golf_visual .dot-class {
    width: auto;
    padding: 0 10px;
  }
}

/* END Park Golf slick */

/* 20250623英語ブログにNEWを付ける */
.english_info_link {
  position: relative;
}

.new-mark {
  position: absolute;
  top: -24px;
  right: 8px;
  background: #ff0000;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 50px;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.4;
  }
}

/* 20260511開庁時間変更のお知らせ */
.office_hours {
  position: fixed;
  top: 15%;
  right: 24px;
  width: 190px;
  background-color: #fff;
  padding: 24px 16px 16px 16px;
  z-index: 1;
  border-radius: 8px;
  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.7s ease;
}

.office_hours.is-move {
  transform: translateY(-20px);
}

.office_hours a {
  display: block;
  text-decoration: none;
}

.office_hours h2 {
  color: rgba(209, 0, 0, 1.00);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2em;
  text-align: center;
  margin-bottom: 8px;
}

.office_hours p {
  font-size: 0.813rem;
  line-height: 1.7em;
}

.notice_close {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  background: none;
  border: none;
  position: absolute;
  top: 4px;
  right: 6px;
}

.notice_close:hover::before {
  content: "閉じる";
  color: #555;
  font-size: 0.75rem;
  margin-right: 0.2em
}

@media (max-width: 768px) {
  .office_hours {
    top: inherit;
    left: 10px;
    right: 0;
    bottom: 10px;
  }
}