@charset "UTF-8";
/* ========================================================================== */
/* Reset 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, table, 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;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { overflow-y: scroll; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
input, textarea { margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; }
a:focus { outline: none; }
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { min-height: 1px; }
.modal-window { z-index: 10000; display: block; position: fixed; top: 50%; left: 50%; border: 2px solid #666; background-color: #fff; }
#modal-overlay { z-index: 9999; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.4); }
* html .clearfix { height: 1px; }
.both { clear: both; }
.sp { display: block !important; }
.pc { display: none !important; }
@media print, screen and (min-width: 640px) {
  .sp { display: none !important; }
  .pc { display: block !important; }
}

/* Mixin CSS は bone.scss の @import "mixin" から生成済み */
/* 4=25% 5=20% 6=16.6% */
h1, h2, h3, h4, h5, h6 {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}

p, a, td {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}

.gothic {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif !important;
}

.mincho {
  font-family: "ヒラギノ明朝　ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif !important;
}

.block {
  display: block;
}

.center {
  margin: 0px auto;
}

.b-none {
  border: none !important;
  box-shadow: none !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.text-center {
  text-align: center !important;
}

.white {
  color: #fff;
}

.red {
  color: #f00;
}

.blue {
  color: #00f;
}

.black {
  color: #000;
}

.f12p {
  font-size: 12px !important;
}

.f14p {
  font-size: 14px !important;
}

.f16p {
  font-size: 16px !important;
}

.f20p {
  font-size: 20px !important;
}

.f30p {
  font-size: 30px !important;
}

.f40p {
  font-size: 40px !important;
}

.f50p {
  font-size: 50px !important;
}

.fw300 {
  font-weight: 300 !important;
}

.fw500 {
  font-weight: 500 !important;
}

.fw900 {
  font-weight: 900 !important;
}

.x15 {
  font-size: 150% !important;
}

.x20 {
  font-size: 200% !important;
}

@media print, screen and (min-width: 640px) {
  .w20 {
    width: 20% !important;
  }
  .w25 {
    width: 25% !important;
  }
  .w30 {
    width: 30% !important;
  }
  .w33 {
    width: 33% !important;
  }
  .w40 {
    width: 40% !important;
  }
  .w50 {
    width: 50% !important;
  }
  .w60 {
    width: 60% !important;
  }
  .w66 {
    width: 66% !important;
  }
  .w70 {
    width: 70% !important;
  }
  .w75 {
    width: 75% !important;
  }
  .w80 {
    width: 80% !important;
  }
  .w90 {
    width: 90% !important;
  }
  .w95 {
    width: 95% !important;
  }
  .w100 {
    width: 100% !important;
  }
}
.bg_fff {
  background-color: #fff !important;
}

/* □■□■□■□ ログイン画面 □■□■□■□ */
#login ul {
  display: block;
  width: 260px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #666;
}
#login ul li {
  display: block;
  margin: 10px 10px;
}
#login ul li label {
  display: block;
}
#login ul li input {
  width: 100%;
  height: 30px;
  font-size: 16px;
}

/* □■□■□■□ 管理室メニュー □■□■□■□ */
#admin_menu {
  position: fixed;
  display: block;
  width: 200px;
  top: 20px;
  left: 10px;
  z-index: 1000;
}
#admin_menu .title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #444;
  border-radius: 10px;
  opacity: 0.9;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-indent: 20px;
  cursor: pointer;
}
#admin_menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
  background-repeat: no-repeat;
  background-position: 8px 8px;
  background-size: 15px 15px;
  cursor: pointer;
}
#admin_menu a:hover {
  color: #fff;
  text-decoration: none;
}
#admin_menu ul.base {
  display: none;
  width: 100%;
  background-color: #777;
  border-radius: 10px;
  opacity: 0.9;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-indent: 30px;
  border: 1px solid #666;
}
#admin_menu ul.base li {
  min-height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #666;
  font-size: 10px;
  font-weight: 900;
}
#admin_menu ul.base li:last-child {
  border-bottom: none;
}
#admin_menu ul.base li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
#admin_menu ul.base li ul.link {
  display: none;
  box-shadow: none;
  border-radius: none;
  border: none;
}
#admin_menu ul.base li ul.link li {
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
}
#admin_menu ul.base li ul.link li a {
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
  font-weight: 500;
}
#admin_menu ul.base li ul.link li a:hover {
  color: #333;
  text-decoration: none;
}
#admin_menu a.logout {
  background-image: url("../images/set/logout.png");
}

#logoutmsg {
  width: 200px;
  height: 50px;
  margin-left: -100px;
  margin-top: -25px;
  border-radius: 10px;
}
#logoutmsg p {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 50px;
}

/* □■□■□■□ ページトップボタン □■□■□■□ */
#pagetop {
  position: fixed;
  display: block;
  border: 1px solid #666;
  background-color: #06f;
  border-radius: 0px;
  background-image: url("../images/set/pagetop.png");
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 50%;
  opacity: 0.7;
  line-height: 30px;
  text-align: center;
  width: 80px;
  height: 30px;
  bottom: 20px;
  right: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
#pagetop a {
  color: #fff !important;
  text-decoration: none;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 900;
}
#pagetop a:hover {
  color: #000;
  text-decoration: none;
}

table.info {
  display: block;
  table-layout: auto;
  width: 90%;
  margin: 0px auto 20px;
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid #666;
}
table.info tbody {
  display: block;
  width: 100%;
}
table.info tbody tr {
  display: block;
  width: 100%;
}
table.info tbody tr th {
  display: block;
  padding: 10px;
  border: 1px solid #666;
  margin-bottom: 2px;
  background-color: #fce1c7;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}
table.info tbody tr td {
  display: block;
  padding: 10px;
  border: 1px solid #666;
  background-color: #fff;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.8em;
}
@media only screen and (min-width: 640px) {
  table.info tbody tr th {
    display: table-cell;
    width: 30%;
  }
  table.info tbody tr td {
    display: table-cell;
    width: 500px;
  }
}

#zoomPanel {
  width: 100%;
  height: 100%;
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  top: 0px;
  left: 0px;
}
#zoomPanel img.modal-close {
  position: fixed;
  display: block;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
}

@media print, screen and (min-width: 640px) {
  #zoomPanel {
    width: 1000px;
    height: 750px;
    top: 50%;
    left: 50%;
    padding: 10px;
    margin-left: -505px;
    margin-top: -380px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
  #zoomPanel img.modal-close {
    position: absolute;
    display: block;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
  }
}
#imgSelect {
  width: 1000px;
  height: 750px;
  margin-left: -500px;
  margin-top: -375px;
  overflow: scroll;
}
#imgSelect img {
  display: block;
  width: 16%;
  margin-top: 4px;
  margin-left: 0.6%;
  float: left;
}

#tag_edit {
  width: 800px;
  height: 550px;
  margin-left: -400px;
  margin-top: -275px;
  border-radius: 10px;
}
#tag_edit #tagdataset {
  width: 100%;
}
#tag_edit #tagdataset .left {
  display: block;
  float: left;
  width: 38%;
}
#tag_edit #tagdataset .left .imgbox {
  clear: both;
  width: 280px;
  height: 210px;
  border: 1px solid #aaa;
  margin: 15px auto;
}
#tag_edit #tagdataset .left .imgbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
#tag_edit #tagdataset .left label {
  clear: both;
  display: block;
  width: 280px;
  margin: 5px auto;
  font-size: 12px;
  border-bottom: 1px solid #aaa;
}
#tag_edit #tagdataset .left input {
  display: block;
  width: 280px;
  margin: 5px auto 15px;
}
#tag_edit #tagdataset .left button {
  display: block;
  width: 280px;
  margin: 5px auto 15px;
}
#tag_edit #tagdataset .right {
  display: block;
  float: right;
  width: 62%;
}
#tag_edit #tagdataset .right label {
  clear: both;
  display: block;
  width: 93%;
  margin: 5px auto;
  font-size: 12px;
  border-bottom: 1px solid #aaa;
}
#tag_edit #tagdataset .right input {
  display: block;
  width: 93%;
  margin: 5px auto 15px;
}
#tag_edit #tagdataset .right textarea {
  display: block;
  width: 91%;
  height: 420px;
  padding: 1%;
  margin: 5px auto;
  line-height: 1.4em;
}
#tag_edit #tagdataset .right button {
  display: block;
  width: 100px;
  margin: 0px 5px;
  float: right;
}

#new_img {
  width: 280px;
  margin: -150px 0px 0px -150px;
  padding: 10px;
  border-radius: 10px;
}
#new_img p {
  text-decoration: underline;
  box-shadow: none;
  border: none;
  font-size: 16px;
  color: #00f;
}
#new_img input {
  height: 30px;
  font-size: 16px;
  margin: 5px 0px 5px 0px;
}
#new_img .upload {
  padding: 10px;
}
#new_img #progressbar {
  position: absolute;
  margin: 10px;
  width: 500px;
}
#new_img #loading {
  position: absolute;
  left: 50%;
}

form.info_input_css {
  width: 95%;
  margin: 10px auto 50px;
}
form.info_input_css label {
  display: block;
  width: 100%;
  border-bottom: solid 1px #666666;
  margin: 20px 0px 5px;
  font-size: 16px;
  text-indent: 10px;
}
form.info_input_css label.editdate {
  border-bottom: solid 2px #00f;
  font-size: 20px;
}
form.info_input_css input {
  width: 100%;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  text-indent: 5px;
}
form.info_input_css input[type=checkbox] {
  height: 10px;
}
form.info_input_css input.visible {
  display: inline;
  width: 20px;
  height: 15px;
  margin-left: 400px;
  font-size: 11px;
}
form.info_input_css select {
  width: 100%;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  text-indent: 5px;
}
form.info_input_css video {
  width: 100%;
}
form.info_input_css textarea {
  width: 98%;
  height: 100px;
  padding: 1%;
  font-size: 16px;
}

#searchbox {
  width: 95%;
  height: auto;
  padding: 20px 5px 20px 15px;
  margin: 0px auto;
}
#searchbox #input_year, #searchbox #year {
  display: inline;
  margin-top: 15px;
  margin-left: 0px;
}
#searchbox #input_month, #searchbox #month {
  display: inline;
  margin-top: 15px;
}
#searchbox #input_day, #searchbox #day {
  width: 100%;
  height: auto;
  padding: 1px;
  background-color: #FFFFFF;
}
#searchbox table {
  margin-top: 0px;
  margin-left: 3px;
  padding: 0px;
  border: none;
}
#searchbox table td {
  display: block;
  float: left;
  font-size: 10px;
  width: 30px;
  height: 30px;
  padding: 0px;
  border: solid 1px #CCCCCC;
  margin: 1px;
}
#searchbox table td:hover {
  background-color: #DDDDDD;
}
#searchbox table td.saturday label {
  color: #0000FF;
}
#searchbox table td.sunday label {
  color: #FF0000;
}
#searchbox table label.exists {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 17px;
  text-decoration: underline;
  cursor: hand;
}
#searchbox table td label.exists {
  background-color: #00FFFF;
}
#searchbox table td.saturday label.exists {
  background-color: #0000FF;
  color: #FFFFFF;
}
#searchbox table td.sunday label.exists {
  background-color: #FF0000;
  color: #FFFFFF;
}

label#uploadLabel {
  clear: both;
  display: block;
  float: left;
  width: auto;
  height: 30px;
  padding: 10px;
  padding-left: 50px;
  background-image: url("../images/sys_icon/icon_img_video.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin: 30px auto 0px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 900;
  border: none;
  text-indent: 0px;
}

#upload {
  clear: both;
  width: 95%;
  height: 100%;
  padding: 5px;
  padding-left: 8px;
  background-color: #EEEEEE;
  border: solid 1px #000000;
  margin: 10px auto;
}
#upload span#uploadCount {
  display: block;
  float: left;
  width: 95%;
  height: 30px;
  padding: 0px;
  padding-left: 40px;
  background-image: url("../images/sys_icon/icon_img.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  line-height: 30px;
  font-size: 12px;
  margin: 30px auto;
}
#upload span#uploadCount_video {
  display: block;
  float: left;
  width: 95%;
  height: 30px;
  padding: 0px;
  padding-left: 40px;
  background-image: url("../images/sys_icon/icon_video.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  line-height: 30px;
  font-size: 12px;
  margin: 30px auto;
}
#upload button {
  padding: 5px;
  margin: 3px;
  text-indent: 0px;
  width: 130px;
  height: 44px;
}
#upload span {
  clear: both;
  display: block;
  width: 100%;
  margin: 20px auto 10px;
  border-bottom: solid 1px #666;
  font-size: 12px;
}
#upload div.box {
  display: block;
  position: relative;
  float: left;
  padding: 0px;
  margin: 4px;
  text-indent: 0px;
  text-align: center;
  width: 80px;
  height: 80px;
  border: 1px solid #666666;
  background-color: #fff;
}
#upload div.box img {
  clear: both;
  display: block;
  width: 100%;
  height: auto;
  padding: 0px;
  margin: auto auto;
}
#upload div.box img.y {
  width: auto;
  height: 100%;
}
#upload div.box video {
  clear: both;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: auto auto;
}
#upload div.box input {
  display: block;
  position: absolute;
  bottom: 0px;
  padding: 0px;
}

#submit {
  position: fixed;
  left: 0px;
  border: 1px;
  width: 100%;
  padding: 2px;
  background-color: rgba(68, 68, 68, 0.9);
  border-top: 2px solid #666;
  margin: 10px auto 0px;
  bottom: 0px;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
#submit span.err {
  display: block;
  color: #f00;
  font-size: 12px;
  font-weight: 700;
}
#submit input {
  width: 44px;
  height: 44px;
  margin: 5px;
  border-radius: 10px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background-color: #999;
  background-size: 100% 100%;
  text-indent: -9999px;
}
#submit input.add_img {
  background-image: url("../images/sys_icon/icon_add_img.png");
}
#submit input.add_video {
  background-image: url("../images/sys_icon/icon_add_video.png");
}
#submit input.add_comment {
  background-image: url("../images/sys_icon/icon_comment.png");
}
#submit input.add_title {
  background-image: url("../images/sys_icon/icon_add_title.png");
}
#submit input.add_short {
  background-image: url("../images/sys_icon/icon_add_short.png");
}
#submit input.save {
  background-image: url("../images/sys_icon/icon_save.png");
}
#submit input.save_return {
  background-image: url("../images/sys_icon/icon_save_return.png");
}
#submit input.return {
  background-image: url("../images/sys_icon/icon_return.png");
}
#submit input.reload {
  background-image: url("../images/sys_icon/icon_reload.png");
}
#submit input.delete {
  background-image: url("../images/sys_icon/icon_delete.png");
}
#submit input:hover {
  background-color: #eee;
}

@media print, screen and (min-width: 640px) {
  #submit {
    width: 325px;
    left: 10px;
    bottom: 10px;
    border: 2px solid #666;
    border-radius: 10px;
  }
}
#main table.form {
  width: 95%;
  padding: 0px;
  border: solid 1px #666666;
  margin: 10px auto 50px;
}
#main table.form th {
  width: 20%;
  background-color: #ddd;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  border: solid 1px #666666;
  border-right: double 3px #666666;
  padding: 5px;
}
#main table.form td {
  width: 30%;
  height: 40px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  padding: 5px;
  border: solid 1px #666666;
}
#main table.form td input {
  display: block;
  width: 95%;
  height: 15px;
  margin: 5px auto;
  padding: 5px;
}
#main table.form td input[colspan="3"] {
  width: 98%;
}
#main table.form td textarea {
  display: block;
  width: 98%;
  height: 60px;
  margin: 5px auto;
  padding: 5px;
  font-size: 12px;
}
#main table.form td[colspan="3"] {
  width: 80%;
}
#main table.form td.etc {
  text-align: left;
  padding: 10px 20px;
  line-height: 1.4em;
}
#main table.form td.zei {
  text-align: right;
  vertical-align: bottom;
  padding: 10px;
}
#main table.form img {
  display: block;
  width: 220px;
  border: solid 1px #666666;
  margin: 5px auto;
}
#main table.form a img {
  width: 100px;
  margin: 2px;
}
#main table.form tr.visible {
  background-color: #aaa;
}

#main table.list {
  width: 95%;
  padding: 0px;
  border: solid 1px #666666;
  margin: 10px auto 50px;
}
#main table.list th {
  background-color: #ddd;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  border: solid 1px #666666;
  border-right: double 3px #666666;
  padding: 5px;
}
#main table.list th.sn {
  width: 10%;
}
#main table.list th.edit {
  width: 10%;
}
#main table.list th.del {
  width: 10%;
}
#main table.list td {
  height: 40px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  padding: 5px;
  border: solid 1px #666666;
}
#main table.list td[colspan="3"] {
  width: 80%;
}
#main table.list td.etc {
  text-align: left;
  padding: 10px 20px;
  line-height: 1.4em;
}
#main table.list td.zei {
  text-align: right;
  vertical-align: bottom;
  padding: 10px;
}
#main table.list img {
  display: block;
  width: 220px;
  border: solid 1px #666666;
  margin: 5px auto;
}
#main table.list a img {
  width: 100px;
  margin: 2px;
}
#main table.list tr.visible {
  background-color: #aaa;
}

/* □■□■□■□ スマホおよび小型タブレット向けのレイアウトの指定：～640px □■□■□■□ */
html body {
  background-attachment: fixed;
  background-position: center;
  background-size: auto 120%;
  background-repeat: no-repeat;
}
html body div.wrap {
  position: relative;
  width: 100%;
  margin: 0px auto;
}
html body div.inner {
  position: relative;
  width: 100%;
}
@media print, screen and (min-width: 640px) {
  html body div.inner {
    width: 1200px;
    margin: 0px auto;
  }
}
html body h1 {
  width: 100%;
  height: 25px;
  line-height: 25px;
  font-size: 10px;
  font-weight: 900;
}
html body #header {
  position: fixed;
  width: 100%;
  height: 75px;
  overflow: hidden;
  background-image: url("");
  background-size: 300px;
  background-position: right;
  background-repeat: no-repeat;
  background-color: white;
  z-index: 1000;
}
@media print, screen and (min-width: 640px) {
  html body #header {
    height: 90px;
  }
}
html body #header .logo {
  display: block;
  width: 180px;
  height: auto;
  float: left;
}
@media print, screen and (min-width: 640px) {
  html body #header .logo {
    margin-top: 5px;
    width: 250px;
  }
}
html body #header .logo img {
  display: block;
  width: 100%;
}
html body #header p.address {
  padding-top: 8px;
  margin-left: 20px;
  font-size: 12px;
  float: left;
  color: #333;
}
html body #header p.address.num {
  padding-top: 4px;
}
html body #header ul.contacts {
  position: absolute;
  top: 0px;
  right: 0px;
}
html body #header ul.contacts li {
  display: block;
  float: left;
  width: 40px;
  overflow: hidden;
  margin: 0px 0px;
}
@media print, screen and (min-width: 640px) {
  html body #header ul.contacts li {
    width: 200px;
    margin: 0px 10px;
  }
}
html body #header ul.contacts li img {
  display: block;
  width: 100%;
}
html body #header ul.contacts li a {
  display: block;
  width: 100%;
  line-height: 25px;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  text-indent: 30px;
  margin: 0px;
  background-size: 25px;
  background-repeat: no-repeat;
}
html body #header ul.contacts li a:hover {
  opacity: 0.8;
}
html body #header ul.contacts li a.info {
  background-image: url("../images/icon_info.png");
}
html body #header ul.contacts li a.access {
  background-image: url("../images/icon_access.png");
}
html body #header ul.contacts li a.mail {
  background-image: url("../images/icon_mail.png");
}
html body #navigation {
  display: none;
  top: 75px;
  position: fixed;
  width: 100%;
  border-top: 2px solid #f99;
  background-color: white;
  border-bottom: 2px solid #600;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
}
@media print, screen and (min-width: 640px) {
  html body #navigation {
    top: 90px;
    display: block;
  }
}
html body #navigation ul {
  display: block;
  width: 100%;
  margin: 0px auto;
}
@media print, screen and (min-width: 640px) {
  html body #navigation ul {
    width: 1200px;
  }
}
html body #navigation ul li.root {
  display: block;
  width: 100%;
  height: 60px;
}
@media print, screen and (min-width: 640px) {
  html body #navigation ul li.root {
    width: 33.3%;
    float: left;
  }
}
html body #navigation ul li.root a {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 65px;
  text-align: center;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  font-weight: 700;
}
html body #navigation ul li.root a:hover {
  background-image: url("../images/active.png");
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-position: 10px center;
  color: #00f;
}
html body #navigation ul li.root ul {
  display: none;
}
html body #navigation ul li.root ul li {
  display: block;
  float: none;
  background-color: #fff;
  border: solid 1px #666;
  border-top: none;
}
html body #navigation ul li.root ul li a {
  color: #666;
  font-size: 80%;
}
html body #navigation ul li.root ul li a:hover {
  background-image: url("../images/hand.gif");
  background-repeat: no-repeat;
  background-position: 5px 5px;
  color: #00f;
}
html body #page_title {
  padding-top: 75px;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  background-image: url("../images/div_bg.jpg");
  background-color: #aaa;
  background-position: center center;
  z-index: 100;
}
@media print, screen and (min-width: 640px) {
  html body #page_title {
    padding-top: 152px;
  }
}
html body #page_title h2 {
  width: 100%;
  height: 70px;
  line-height: 70px;
  margin: 0px auto;
  background-size: 100% auto;
  font-size: 25px;
  color: #333;
  font-weight: 900;
  text-indent: 2em;
  letter-spacing: 0.3em;
}
@media print, screen and (min-width: 640px) {
  html body #page_title h2 {
    width: 1200px;
    height: 200px;
    line-height: 200px;
    font-size: 35px;
  }
}
html body #contents {
  width: 100%;
  padding-top: 75px;
}
@media print, screen and (min-width: 640px) {
  html body #contents {
    padding-top: 0px;
  }
  html body #contents.index {
    padding-top: 145px;
  }
}
html body #contents div.wrap {
  background-color: white;
}
html body #contents .inner {
  width: 100%;
}
@media print, screen and (min-width: 640px) {
  html body #contents .inner {
    width: 1200px;
    margin: 10px auto;
  }
}
html body #contents .youtube {
  display: block;
  margin: 0px auto;
}
html body #contents #main {
  display: block;
  width: 100%;
  padding-top: 10px;
}
html body #contents #main img {
  display: block;
  margin: 0px auto;
}
html body #contents #main #gmap {
  width: 100%;
  height: 500px;
  margin: 20px 0px;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main #gmap {
    width: 1200px;
    margin: 10px auto;
  }
}
html body #contents #main #gmap p {
  width: 220px;
  font-size: 10px;
  margin: 10px 0px 0px;
}
html body #contents #main h2.title span {
  display: block;
  position: absolute;
  width: 90%;
  height: 30px;
  left: 15%;
  top: 30px;
  line-height: 30px;
  text-indent: 40px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2em;
  background-color: #fff;
  color: #666;
  border-radius: 20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  border: solid 1px #666;
}
html body #contents #main h3 {
  clear: both;
  width: 90%;
  line-height: 60px;
  font-size: 25px;
  letter-spacing: 0.08em;
  margin: 0px auto 0px;
  border-left: 10px solid #66f;
  text-decoration: none;
  padding: 0px 5%;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main h3 {
    width: 1200px;
    font-size: 30px;
    font-weight: 900;
    padding: 40px 5%;
    margin: 40px auto 20px;
  }
}
html body #contents #main div.columns2 {
  width: 90%;
  margin: 10px auto;
}
html body #contents #main div.columns2 .column {
  display: block;
  width: 100%;
  margin: 10px auto;
}
html body #contents #main div.columns2 .column img {
  width: 100%;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main div.columns2 .column {
    width: 47%;
    float: left;
    margin: 10px 1%;
  }
}
html body #contents #main div.columns3 {
  width: 90%;
  margin: 10px auto;
}
html body #contents #main div.columns3 .column {
  display: block;
  width: 100%;
  margin: 10px auto;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main div.columns3 .column {
    width: 31%;
    float: left;
    margin: 10px 1%;
  }
}
html body #contents #main table.kenonsystem {
  margin: 0px auto;
}
html body #contents #main table.kenonsystem tr td {
  text-align: center;
  vertical-align: middle;
}
html body #contents #main table.kenonsystem tr td img {
  display: block;
}
html body #contents #main div.comment {
  width: 95%;
  border: 1px solid #666;
  margin: 30px auto;
  position: relative;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main div.comment {
    width: 90%;
  }
}
html body #contents #main div.comment span {
  display: block;
  width: 100%;
}
html body #contents #main div.comment div {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 200px 200px;
}
html body #contents #main div.comment div img {
  width: 100%;
}
html body #contents #main div.comment div p {
  width: 85%;
  margin: 0px auto 30px;
  padding-bottom: 0px;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main div.comment div p {
    padding-bottom: 0px;
  }
}
html body #contents #main div.comment div p span {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 900;
  text-indent: -1em;
}
html body #contents #main div.comment div p span {
  display: block;
  font-size: 20px;
}
html body #contents #main div.comment div p small {
  display: block;
  margin: 10px ayto 20px;
}
html body #contents #main div.comment div p .red_box {
  display: block;
  background-color: #D37976;
  color: #fff;
  font-size: 25px;
  text-align: center;
  margin: 20px 0px;
}
html body #contents #main div.comment div .price {
  font-family: "ヒラギノ明朝　ProN W6", "HiraMinProN-W6", "HG明朝E", "MS P明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 40px;
  font-weight: 900;
  text-indent: -1em;
  position: absolute;
  font-size: 50px;
  bottom: 10px;
  right: 20px;
}
html body #contents #main div.comment div a:not(.linkbox) {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  margin-left: 50%;
  padding: 0 24px;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: #00f;
  border: 1px solid #66f;
  border-radius: 4px;
  background-color: #fff;
  background-image: url("../images/link_blue.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 12px;
  padding-right: 32px;
  transition: background-color 0.2s, color 0.2s;
}
html body #contents #main div.comment div a:not(.linkbox):hover {
  background-color: #00c;
  background-image: url("../images/link.png");
  color: #fff;
}
html body #contents #main div.comment div a.linkbox {
  display: block;
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  font-weight: 900;
  text-align: center;
  margin-left: -100px;
  background-image: url("../images/link.png");
  background-color: rgba(0, 0, 204, 0.5);
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 15px;
  border: 1px solid #fff;
  color: #fff;
}
html body #contents #main div.comment div a.linkbox:hover {
  background-color: #00c;
}
html body #contents #main div.comment div a.linkbox.style_gray {
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url("../images/link_blue.png");
  border: 1px solid #666;
  color: #333;
}
html body #contents #main div.comment div a.linkbox.style_gray:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
html body #contents #main a.linkbanner {
  display: block;
  width: 100%;
}
html body #contents #main a.linkbanner img {
  display: block;
  width: 100%;
}
html body #contents #main .contact_link, html body #contents #main .online_link {
  display: block;
  width: 300px;
  height: 50px;
  margin: 50px auto;
  line-height: 50px;
  text-decoration: none;
  font-weight: 900;
  text-align: center;
  background-image: url("../images/link_blue.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 15px;
  border: 1px solid #666;
  color: #00f;
}
@media print, screen and (min-width: 640px) {
  html body #contents #main .contact_link, html body #contents #main .online_link {
    width: 60%;
  }
}
html body #contents #main .contact_link:hover, html body #contents #main .online_link:hover {
  background-color: #00c;
  background-image: url("../images/link.png");
  color: #fff;
}
html body #contents #main .online_link {
  background-color: #00c;
  background-image: url("../images/link.png");
  color: #fff;
}
html body #contents #main .online_link:hover {
  background-color: #fff;
  background-image: url("../images/link_blue.png");
  color: #00f;
}
html body #contents #sub {
  display: block;
  width: 100%;
}
html body #contents #sub h3 {
  width: 95%;
  height: 30px;
  line-height: 30px;
  margin: 10px auto 20px;
  font-size: 16px;
  text-indent: 30px;
  color: #fff;
  background-color: #33f;
  border-radius: 20px;
  background-size: 60px;
  background-repeat: no-repeat;
  background-position: 10px -20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
html body #contents #sub h3.topix {
  font-size: 16px;
  height: 30px;
  line-height: 35px;
  margin: 10px auto 0px;
  color: #333;
  background-color: #fff;
  background-image: url("../images/result_pencil.gif");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center left;
  box-shadow: none;
  text-indent: 40px;
}
html body #contents #sub ul.menu {
  width: 90%;
  width: 90%;
  padding: 2%;
  margin: 0px auto 10px;
  border-top: 1px dotted #666;
}
html body #contents #sub ul.menu li {
  border-bottom: 1px dotted #666;
  height: 30px;
  line-height: 30px;
}
html body #contents #sub ul.menu li a {
  display: block;
  width: 100%;
  text-decoration: none;
  text-indent: 10px;
  background-image: url("../images/set/link.gif");
  background-repeat: no-repeat;
  background-position: center right;
}
html body #contents #sub #topix {
  width: 90%;
  padding: 2%;
  margin: 0px auto 10px;
  border: 1px solid #666;
  border-radius: 10px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
html body #contents #sub #topix ul {
  border-top: 1px dotted #666;
}
html body #contents #sub #topix ul li {
  border-bottom: 1px dotted #666;
  line-height: 1.4em;
}
html body #contents #sub #topix ul li span {
  display: block;
}
html body #contents #sub #topix ul li a {
  display: block;
  text-indent: 0px;
  font-size: 12px;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}
html body #contents #sub div.banner {
  width: 94%;
  margin: 10px auto;
}
html body #contents #sub div.banner img {
  display: block;
  width: 100%;
  border: solid 1px #999;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
html body #contents #sub div.banner p {
  padding: 5px;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
html body #contents #sub div.banner p span {
  display: block;
  font-weight: 900;
  color: #00f;
  margin: 10px 0px 5px;
  width: 98%;
  border-bottom: dotted 1px #666;
}
html body #contents #sub div.link {
  float: left;
  width: 48%;
  margin: 1%;
}
html body #footer {
  width: 100%;
  background-color: white;
  border-top: solid 1px #555;
}
html body #footer div.columns2 {
  width: 90%;
  margin: 10px auto;
}
html body #footer div.columns2 .column {
  display: block;
  width: 100%;
  margin: 10px auto;
}
html body #footer div.columns2 .column img {
  width: 100%;
}
@media print, screen and (min-width: 640px) {
  html body #footer div.columns2 .column {
    width: 47%;
    float: left;
    margin: 10px 1%;
  }
}
html body #footer div.columns3 {
  width: 95%;
  margin: 10px auto;
}
html body #footer div.columns3 .column {
  display: block;
  width: 100%;
  margin: 10px auto;
}
html body #footer div.columns3 .column img {
  width: 100%;
}
@media print, screen and (min-width: 640px) {
  html body #footer div.columns3 .column {
    width: 31%;
    float: left;
    margin: 10px 1%;
  }
}
html body #footer ul.menu {
  clear: both;
  display: block;
  padding-top: 20px;
}
@media print, screen and (min-width: 640px) {
  html body #footer ul.menu {
    padding-top: 0px;
    float: left;
    width: 90%;
    margin: 20px auto;
    border-left: 1px #666 solid;
  }
}
html body #footer ul.menu li {
  display: block;
  margin: 10px auto;
}
@media print, screen and (min-width: 640px) {
  html body #footer ul.menu li {
    margin: 0px;
    width: 16.4%;
    height: 30px;
    float: left;
    border-right: 1px #666 solid;
  }
}
html body #footer ul.menu li a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #666;
  width: 100%;
  font-weight: 900;
  height: 30px;
  line-height: 30px;
}
html body #footer ul.menu li a:hover {
  color: #00f;
}
@media print, screen and (min-width: 640px) {
  html body #footer ul.contacts {
    width: 500px;
    float: right;
  }
}
html body #footer ul.contacts li {
  width: 100%;
  display: block;
}
@media print, screen and (min-width: 640px) {
  html body #footer ul.contacts li {
    width: 50%;
    float: left;
  }
}
html body #footer ul.contacts li img {
  display: block;
  width: 100%;
}
html body #footer a.logo {
  display: block;
  float: left;
  width: 100%;
  padding-top: 10px;
}
@media print, screen and (min-width: 640px) {
  html body #footer a.logo {
    margin-left: 25px;
    width: 400px;
  }
}
html body #footer a.logo img {
  display: block;
  width: 100%;
}
html body #footer p.address {
  clear: both;
  float: left;
  color: #666;
  margin: 40px 20px 20px;
  line-height: 1.8em;
  font-size: 12px;
}
@media print, screen and (min-width: 640px) {
  html body #footer p.address {
    margin: 10px;
    margin-left: 80px;
  }
}
html body #footer p.left {
  float: left;
  color: #fff;
  margin-left: 20px;
  margin-top: 25px;
}
@media print, screen and (min-width: 640px) {
  html body #footer p.left {
    margin-left: 50px;
    margin-top: 45px;
  }
}
html body #footer address {
  clear: both;
  width: 100%;
  height: 30px;
  color: #fff;
  background-color: #003366;
  text-align: center;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ　ProN W3", "Hiragino kaku Gothic ProN", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  line-height: 30px;
  vertical-align: middle;
}

/* □■□■□■□ スマートフォン向けのレイアウトの指定 □■□■□■□ */

/* ========================================================================== */
/* Header address */
html body #header .renewal-header__inner{display:grid!important;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;column-gap:28px}
.renewal-header__address{margin:0;padding-left:24px;border-left:1px solid #d7e2e5;color:#536b73;font-size:13px;line-height:1.65}
.renewal-header__telbox{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}.renewal-header__telbox small{margin-bottom:5px;color:#2f8e95;font-size:11px;font-weight:700}.renewal-header__telbox .renewal-tel{font-size:26px!important;line-height:1.15;letter-spacing:.025em}
@media(max-width:900px){html body #header .renewal-header__inner{grid-template-columns:auto 1fr;row-gap:6px;padding:9px 0}.renewal-header__address{grid-column:1/-1;grid-row:2;margin:0;padding:7px 0 0;border-top:1px solid #d7e2e5;border-left:0;font-size:11px;line-height:1.45}.renewal-header__contact{grid-column:2;grid-row:1;justify-self:end}}@media(max-width:760px){html body #header .renewal-header__contact .renewal-tel{display:block!important;font-size:21px!important}html body #header .renewal-header__contact .renewal-button--small{display:none!important}.renewal-header__telbox small{font-size:9px}}@media(max-width:480px){html body #header .renewal-header__inner{column-gap:12px}.renewal-header__telbox .renewal-tel{font-size:19px!important}}

/* Access map */
.access-layout{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.5fr);gap:42px;align-items:center}.access-details h3{margin:0 0 14px!important;padding:0!important;border:0!important;background:none!important;color:#173650!important;font-size:24px!important}.access-details p{font-size:17px}.access-map{height:440px;overflow:hidden;background:#edf5f6;border:1px solid #d7e2e5}.access-map iframe{display:block;width:100%;height:100%;border:0}@media(max-width:760px){.access-layout{grid-template-columns:1fr;gap:25px}.access-map{height:360px}}

/* Phone-only contact and floating call button */
.floating-call{position:fixed;right:22px;bottom:22px;z-index:9990;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;color:#fff!important;background:#e9a035;border:2px solid #fff;border-radius:999px;box-shadow:0 8px 28px rgba(16,44,66,.3);text-decoration:none!important;line-height:1.2;transition:transform .18s ease,background-color .18s ease}
.floating-call:hover,.floating-call:focus-visible{color:#fff!important;background:#d98c20;transform:translateY(-2px)}
.floating-call__icon{display:grid;place-items:center;width:42px;height:42px;background:#fff;color:#173650;border-radius:50%;font-size:23px}
.floating-call__text{display:flex;flex-direction:column}.floating-call__text small{margin-bottom:3px;font-size:11px}.floating-call__text strong{font-size:20px;letter-spacing:.04em}
.renewal-button,.floating-call,.phone-contact__primary{text-shadow:0 1px 2px rgba(16,44,66,.9),0 0 1px rgba(16,44,66,.75)}
#pagetop{right:22px;bottom:108px}
.phone-contact{max-width:850px!important;text-align:center}.phone-contact>p{max-width:720px;margin:0 auto 34px}.phone-contact__primary{display:flex;flex-direction:column;align-items:center;max-width:620px;margin:0 auto;padding:28px 24px;color:#fff!important;background:#e9a035;border-radius:6px;box-shadow:0 12px 34px rgba(23,54,80,.15);text-decoration:none!important}.phone-contact__primary small{font-weight:700}.phone-contact__primary strong{margin:5px 0;font-size:clamp(32px,6vw,50px);line-height:1.2;letter-spacing:.06em}.phone-contact__primary span{font-size:13px}.phone-contact__secondary{max-width:620px;margin:28px auto 0;padding:24px;background:#fff;border:1px solid #d7e2e5}.phone-contact__secondary a{color:#173650;font-size:24px;font-weight:700}.phone-contact__notice{margin:18px 0 0;padding:14px;background:#fff6e8;color:#61461c;border-left:4px solid #e9a035;text-align:left}.phone-contact__notice strong{color:#b56500}
@media(max-width:760px){body{padding-bottom:84px}.floating-call{right:12px;bottom:max(10px,env(safe-area-inset-bottom));left:12px;justify-content:center;padding:10px 15px}.floating-call__icon{width:38px;height:38px}.floating-call__text strong{font-size:19px}#pagetop{right:12px;bottom:calc(88px + env(safe-area-inset-bottom))}.phone-contact__primary{padding:24px 14px}}

/* Hero background slideshow */
html body .renewal-hero{position:relative!important;isolation:isolate;overflow:hidden;background:#173650!important}
html body .renewal-hero__slides,html body .renewal-hero__slide,html body .renewal-hero__overlay{position:absolute;inset:0;margin:0}
html body .renewal-hero__slides{z-index:0}
html body .renewal-hero__slide{opacity:0;transition:opacity 1.6s ease}
html body .renewal-hero__slide.is-active{opacity:1}
html body .renewal-hero__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
html body .renewal-hero__overlay{z-index:1;background:linear-gradient(90deg,rgba(11,39,60,.82) 0%,rgba(11,39,60,.58) 48%,rgba(11,39,60,.32) 100%)}
html body .renewal-hero__content{position:relative;z-index:2}
@media(max-width:760px){html body .renewal-hero__overlay{background:linear-gradient(90deg,rgba(11,39,60,.84),rgba(11,39,60,.5))}html body .renewal-hero__slide img{object-position:center}}
@media(prefers-reduced-motion:reduce){html body .renewal-hero__slide{transition:none}}
html body .renewal-pagehero{position:relative;isolation:isolate;background-image:linear-gradient(90deg,rgba(11,39,60,.9),rgba(11,39,60,.56)),url("../images/ホームページ写真/web/100_0282_no-board.webp");background-position:center 58%;background-size:cover;background-repeat:no-repeat}
html body .renewal-pagehero--contact{background-image:linear-gradient(90deg,rgba(11,39,60,.9),rgba(11,39,60,.5)),url("../images/contact-pagehero-v1.png");background-position:center}
html body .renewal-pagehero--service{background-image:linear-gradient(90deg,rgba(11,39,60,.88),rgba(11,39,60,.45)),url("../images/service-pagehero-v1.png");background-position:center}
html body #company-page-marker+main .renewal-pagehero{background-image:linear-gradient(90deg,rgba(11,39,60,.88),rgba(11,39,60,.42)),url("../images/company-pagehero-v1.png");background-position:center}
html body .renewal-pagehero .renewal-wrap{position:relative;z-index:1}html body .renewal-pagehero h2,html body .renewal-pagehero p{text-shadow:0 2px 4px rgba(5,22,34,.8)}
@media(max-width:760px){html body .renewal-pagehero{background-position:center}}

/* Company logo */
.renewal-brand--logo{display:block!important;line-height:0}
.renewal-brand__logo{display:block;width:clamp(250px,31vw,390px);height:auto}
@media(max-width:760px){.renewal-brand__logo{width:230px}}
@media(max-width:480px){.renewal-brand__logo{width:190px}.renewal-header__contact .renewal-button--small{padding:8px 10px;font-size:12px}}
.renewal-button--spaced{margin-top:30px}
.renewal-card__num{display:block;font-size:clamp(36px,4vw,54px)!important;font-weight:800!important;line-height:1;letter-spacing:.04em;margin-bottom:16px;text-shadow:0 3px 12px rgba(233,160,53,.18)}
.renewal-brand--footer{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center;width:100%!important;padding:18px 24px;background:#fff;border-radius:3px;line-height:1.4!important;text-align:left}.renewal-footer-tagline{display:block;margin:0 0 10px;color:#173650!important;font-size:clamp(16px,2vw,22px);font-weight:700;letter-spacing:.06em}.renewal-footer-logo{display:block;width:min(390px,100%);height:auto}

/* Construction project photography */
.renewal-service__visual{overflow:hidden}
.renewal-service__visual img,.renewal-feature-photo img,.work-card img{display:block;width:100%;height:100%;object-fit:cover}
.renewal-feature-photo{min-height:320px;overflow:hidden;background:#dfe7e8}
.works-intro{max-width:760px;margin:-18px 0 36px}
.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.work-card{display:flex;flex-direction:column;margin:0;background:#fff;box-shadow:0 8px 28px rgba(23,54,80,.1);overflow:hidden}
.work-card img{flex:0 0 auto;height:auto!important;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.work-card:hover img{transform:scale(1.025)}
.work-card figcaption{display:block!important;flex:1 0 auto;min-height:112px;padding:16px 20px 20px;color:#173650!important;background:#fff;font-size:17px;font-weight:700;line-height:1.5;visibility:visible!important;opacity:1!important}
.work-card figcaption span{display:block;margin-bottom:5px;color:#2f8e95;font-size:11px;letter-spacing:.13em}
.work-card figcaption small{display:block!important;margin:10px -20px 0;padding:8px 20px 2px;border-top:1px solid #d7e2e5;background:#f5f9f9;color:#657983!important;font-size:10px;font-weight:700;letter-spacing:.12em;visibility:visible!important}.work-card figcaption strong{display:block!important;margin:0 -20px -20px;padding:2px 20px 16px;min-height:2.4em;background:#f5f9f9;color:#173650!important;font-size:18px!important;font-weight:700;visibility:visible!important;opacity:1!important}
@media(max-width:760px){.works-grid{grid-template-columns:1fr;gap:20px}.works-grid--featured .work-card:nth-child(3){display:none}.renewal-feature-photo{min-height:230px}.works-intro{margin-top:-22px}}

/* Tarumizu Doken renewal design（旧 site-renewal.css を統合）                */
/* ========================================================================== */
:root{--navy:#173650;--teal:#2f8e95;--orange:#e9a035;--ink:#213746;--pale:#edf5f6;--line:#d7e2e5}
html body #header.renewal-header{position:relative!important;width:100%;height:auto!important;min-height:0;overflow:visible;background-image:none;z-index:10}
html body #header.renewal-header .inner{width:min(1120px,calc(100% - 40px));margin:0 auto}
html body #navigation{position:static!important;top:auto!important;display:block!important;width:100%;border:0!important;box-shadow:none!important;z-index:9}
html body #navigation ul.menu{display:flex!important;width:min(1120px,100%)!important;margin:0 auto!important}
html body #navigation ul.menu li.root{display:block!important;float:none!important;width:25%!important;height:auto!important}
html body #navigation ul.menu li.root a{height:auto!important;line-height:1.4!important;background-image:none!important}
html body #navigation ul.menu li.root{background-color:#173650!important;transition:background-color .18s ease}
html body #navigation ul.menu li.root:hover,html body #navigation ul.menu li.root.is-hovered,html body #navigation ul.menu li.root:focus-within{background-color:#fff!important}
html body #navigation ul.menu li.root:hover>a,html body #navigation ul.menu li.root.is-hovered>a,html body #navigation ul.menu li.root:focus-within>a{color:#111!important;background-image:none!important}
html body #contents{padding:72px 0!important}
html body #contents div.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto;background:#fff}
html body #contents #main{float:none;width:100%;margin:0 auto}
html body #contents .inner{width:100%;margin:0 auto}
html body #contents #main .renewal-heading{height:auto;line-height:1.4;text-indent:0;letter-spacing:normal}
.contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:760px){html body #header.renewal-header .inner{width:min(100% - 28px,1120px)}html body #navigation ul.menu li.root a{font-size:11px!important;padding:11px 2px!important}html body #contents{padding:48px 0!important}html body #contents div.wrap{width:min(100% - 28px,1120px)}}
:root{--navy:#173650;--teal:#2f8e95;--orange:#e9a035;--ink:#213746;--pale:#edf5f6;--line:#d7e2e5}*{box-sizing:border-box}body{color:var(--ink);font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",sans-serif;line-height:1.85;background:#fff}a{color:inherit}.inner,.renewal-wrap{width:min(1120px,calc(100% - 40px));margin:auto}.renewal-header{background:#fff;border-top:5px solid var(--navy)}.renewal-header__inner{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}.renewal-brand{display:flex!important;flex-direction:column;text-decoration:none!important;line-height:1.2}.renewal-brand strong{font-size:30px;letter-spacing:.12em;color:var(--navy)}.renewal-brand small{margin-top:7px;font-size:11px;letter-spacing:.18em;color:#647783}.renewal-header__contact{display:flex;align-items:center;gap:22px}.renewal-tel{font-size:19px;font-weight:700;text-decoration:none}.renewal-button{display:inline-flex;align-items:center;justify-content:center;min-width:190px;padding:14px 24px;background:var(--orange);color:#fff!important;text-decoration:none!important;font-weight:700;border:0;border-radius:2px;cursor:pointer}.renewal-button--small{min-width:150px;padding:10px 18px}#navigation{background:var(--navy)!important}#navigation .menu{max-width:1120px;margin:auto;display:flex!important}#navigation .menu li{width:25%!important;border-left:1px solid rgba(255,255,255,.18)}#navigation .menu li:last-child{border-right:1px solid rgba(255,255,255,.18)}#navigation .menu a{display:block!important;padding:15px!important;color:#fff!important;text-align:center!important;text-decoration:none!important}.renewal-hero{min-height:570px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(11,39,60,.9),rgba(11,39,60,.42)),linear-gradient(135deg,#607681,#b8c4c6);color:#fff}.renewal-eyebrow{font-size:14px;letter-spacing:.2em;color:#bce5e6;font-weight:700}.renewal-hero h2{margin:14px 0 22px;font-size:clamp(38px,6vw,72px);line-height:1.25;letter-spacing:.08em}.renewal-hero p{font-size:18px;max-width:670px}.renewal-note{margin-top:28px;padding:12px 18px;border:1px solid rgba(255,255,255,.5);display:inline-block;font-size:13px}.renewal-section{padding:88px 0}.renewal-section--pale{background:var(--pale)}.renewal-heading{margin:0 0 36px!important;padding:0!important;background:none!important;border:0!important;color:var(--navy)!important;font-size:34px!important;line-height:1.4}.renewal-heading small{display:block;color:var(--teal);font-size:13px;letter-spacing:.18em;margin-bottom:8px}.renewal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.renewal-card{background:#fff;border-top:4px solid var(--teal);padding:28px;box-shadow:0 8px 28px rgba(23,54,80,.08)}.renewal-card__num{color:var(--orange);font-size:13px;font-weight:700}.renewal-card h3{margin:8px 0 12px!important;padding:0!important;border:0!important;background:none!important;color:var(--navy)!important;font-size:23px!important}.renewal-card p{margin:0}.renewal-placeholder{min-height:280px;background:linear-gradient(135deg,#dfe7e8,#aebfc2);display:flex;align-items:center;justify-content:center;color:#536b73;font-weight:700;letter-spacing:.1em}.renewal-split{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}.renewal-lead{font-size:20px;font-weight:700;color:var(--navy)}.renewal-link{display:inline-block;margin-top:20px;color:var(--teal);font-weight:700}.renewal-pagehero{padding:80px 0;background:var(--navy);color:#fff}.renewal-pagehero h2{margin:8px 0 0!important;font-size:44px!important}.renewal-pagehero p{margin:10px 0 0}.renewal-list{display:grid;gap:24px}.renewal-service{display:grid;grid-template-columns:260px 1fr;background:#fff;border:1px solid var(--line)}.renewal-service__visual{min-height:210px;background:linear-gradient(135deg,#d9e4e5,#a8bcc0);display:flex;align-items:center;justify-content:center;color:#597078}.renewal-service__body{padding:30px}.renewal-service h3{margin:0 0 10px!important;padding:0!important;background:none!important;border:0!important;color:var(--navy)!important;font-size:25px!important}.renewal-table{width:100%;border-collapse:collapse;background:#fff}.renewal-table th,.renewal-table td{padding:18px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.renewal-table th{width:28%;background:var(--pale);color:var(--navy)}.renewal-form{max-width:780px}.renewal-form li{margin-bottom:24px!important}.renewal-form label{display:block!important;width:auto!important;margin-bottom:7px;font-weight:700;color:var(--navy)}.renewal-form input[type=text],.renewal-form textarea,.renewal-form select{width:100%!important;padding:14px!important;border:1px solid #b9c8cb!important;background:#fff!important;font-size:16px}.renewal-form .submit{width:100%!important;padding:16px!important;background:var(--orange)!important;color:#fff!important;border:0!important;font-weight:700!important}#footer{margin-top:0!important;background:#102c42!important;color:#fff!important}#footer .inner{padding:50px 0!important}.renewal-brand--footer strong,.renewal-brand--footer small{color:#fff}.address{color:#fff!important}#footer .menu a{color:#fff!important}@media(max-width:760px){.renewal-header__inner{min-height:78px}.renewal-brand strong{font-size:22px}.renewal-header__contact .renewal-tel{display:none}.renewal-button--small{min-width:auto;padding:9px 12px;font-size:13px}#navigation .menu a{padding:12px 4px!important;font-size:12px}.renewal-hero{min-height:500px}.renewal-section{padding:60px 0}.renewal-grid,.renewal-split{grid-template-columns:1fr}.renewal-service{grid-template-columns:1fr}.renewal-service__visual{min-height:150px}.renewal-pagehero{padding:55px 0}.renewal-pagehero h2{font-size:34px!important}.renewal-table th,.renewal-table td{display:block;width:100%}.renewal-table th{padding-bottom:7px}.renewal-table td{padding-top:10px}.inner,.renewal-wrap{width:min(100% - 28px,1120px)}}.contact-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}