@charset "utf-8";
/* CSS Document */

/* 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;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

img {
	max-width: 100%;
  height: auto;
}
/* /CSSリセット */

/* default */
body {
	font-family : "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	color: #000;
  overflow-x: clip;
}

a:link, a:visited {
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: underline;
}
.rollover {/* ロールオーバー用 */}
.png_bg {/* 透過png用 */}

a:hover img {
	opacity : 0.7;
	filter: alpha(opacity=70);
}

.flexbox {display: -ms-flexbox; display: -webkit-box; display: flex; flex-wrap: wrap; align-items: top; justify-content: space-between;}
.flexbox.mid {align-items: center;}
.flexbox.center {justify-content: center;}
.flexbox.reverse {flex-direction: row-reverse;}

.flL {float: left;}
.flR {float: right;}

.taL {text-align: left;}
.taC {text-align: center;}
.taR {text-align: right;}

.rel {position: relative;}

.pc-only {display: block;}
.sp-only {display: none;}
.pc-block {display: block;}
.sp-block {display: none;}
.pc-inline {display: inline;}
.sp-inline {display: none;}

@media screen and (max-width: 767px){
	.pc-only {display: none !important;}
	.sp-only {display: block;}
	.pc-block {display: none !important;}
	.sp-block {display: block;}
	.pc-inline {display: none !important;}
	.sp-inline {display: inline;}
	.pc-hidden {display: block;}
}
/* /default */

/* common */
.tcol-red {
  color: #e60012;
}

h3 {
  font-size: calc(100vw * (45 / 1920));
  letter-spacing: -0.02em;
  line-height: calc(100vw * (54 / 1920));
  border-bottom: 1px solid #4D4D4D;
  padding-bottom: calc(100vw * (9 / 1920));
  margin-bottom: calc(100vw * (60 / 1920));
}
ul.contact-form + h3 {
  margin-top: calc(100vw * (110 / 1920));
}

h4 {
  font-size: calc(100vw * (26 / 1920));
  letter-spacing: -0.01em;
  line-height: calc(100vw * (31 / 1920));
  color: #e60012;
  margin-bottom: calc(100vw * (7 / 1920));
}
.form-remarks {
  margin-top: calc(100vw * (40 / 1920));
}
.form-remarks h4 {
  display: flex;
  align-items: center;
}
ul.caution + h4 {
  margin-top: calc(100vw * (30 / 1920));
}

.boder-none {
  border: none !important;
}

@media screen and (max-width: 767px){
  h3 {
    font-size: calc(100vw*(22.5 / 375));
    line-height: calc(100vw*(27 / 375));
    padding-bottom: calc(100vw*(4.5 / 375));
    margin-bottom: calc(100vw*(20 / 375));
  }

  h4 {
    font-size: calc(100vw*(18 / 375));
    line-height: calc(100vw*(27 / 375));
    margin-bottom: calc(100vw*(5 / 375));
  }
}
/* /common */

/* header */
header {
  padding: calc(100vw * (40 / 1920)) ;
  background: #D3DCE0;
}
header h2 {
  text-align: center;
  font-size: calc(100vw * (72 / 1920));
  line-height: calc(100vw * (86 / 1920));
}

@media screen and (max-width: 767px){
  header {
    padding: calc(100vw * (20 / 375)) ;
  }
  header h2 {
    font-size: calc(100vw*(24 / 375));
    line-height: calc(100vw*(36 / 375));
  }
}
/* /header */

/* form */
#formWrap {
	width: calc(100vw * (1320 / 1920));
	margin: 0 auto;
  padding: calc(100vw * (55 / 1920)) 0 calc(100vw * (255 / 1920));
}
.attention {
  font-weight: 500;
  font-size: calc(100vw * (27 / 1920));
  letter-spacing: -0.05em;
  line-height: calc(100vw * (45 / 1920));
  margin-bottom: calc(100vw * (86 / 1920));
}
input, select {
  width: calc(100vw * (420 / 1920));
  font-size: calc(100vw * (27 / 1920));
  line-height: calc(100vw * (32 / 1920));
  text-align: left;
  padding: calc(100vw * (13 / 1920)) calc(100vw * (30 / 1920));
  background-color: #FFF8EE;
  border: 1px solid #9E9E9F;
  box-sizing: border-box;
}
select {
  appearance: none;
  background-image: url(../img/arrow-bottom-select.svg);
  background-size: calc(100vw * (18 / 1920)) calc(100vw * (9 / 1920));
  background-position: right calc(100vw * (21 / 1920)) center;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:has(option[value=""]:checked) {
  color: #b3b3b3;
}
select:not(:has(option[value=""]:checked)) {
  background-color: #FFF;
}
input[type="text"]:not(:placeholder-shown), input[type="tel"]:not(:placeholder-shown), input[type="email"]:not(:placeholder-shown) {
  background-color: #FFF;
}
select option {
  color: #000;
}
select option[value=""] {
  color: #b3b3b3;
}
.form-short {
  width: calc(100vw * (270 / 1920));
}
.form-long {
  width: calc(100vw * (870 / 1920));
}
label br + input, label br + select, label input + p, label select + p {
  margin-top: calc(100vw * (10 / 1920));
}
label {
  font-size: calc(100vw * (26 / 1920));
  line-height: calc(100vw * (31 / 1920));
  margin-top: calc(100vw * (5 / 1920));
  margin-bottom: calc(100vw * (15 / 1920));
}
input + label {
  margin-left: calc(100vw * (5 / 1920));
}
ul.contact-form {
  padding: calc(100vw * (60 / 1920)) 0;
  border-bottom: 1px solid #4D4D4D;
}
h3 + ul.contact-form {
  padding-top: 0;
}
ul.contact-form li {
  margin-bottom: calc(100vw * (40 / 1920));
}
ul.contact-form li:last-of-type {
  margin-bottom: 0;
}
ul.contact-form li.flexbox {
  justify-content: flex-start;
}
ul.contact-form li p.contact-form-label {
  width: calc(100vw * (450 / 1920));
}
ul.contact-form li p.contact-form-label.flexbox {
  justify-content: flex-start;
  align-items: flex-start;
}
ul.contact-form li .contact-form-control {
}
ul.contact-form li .contact-form-control .form-group {
}
ul.contact-form li .contact-form-control .form-group.flexbox {
  justify-content: flex-start;
  gap: calc(100vw * (30 / 1920));
}
ul.contact-form li .contact-form-control .form-group + .form-group {
  margin-top: calc(100vw * (20 / 1920));
}
ul.contact-form li .contact-form-control.contact-form-checkbox .form-group + .form-group {
  margin-top: calc(100vw * (5 / 1920));
 }
ul.contact-form li .contact-form-control .form-group p {
  font-size: calc(100vw * (26 / 1920));
  line-height: calc(100vw * (31 / 1920));
}
.label-required {
  background: #e60012;
  font-size: calc(100vw * (27 / 1920));
  line-height: calc(100vw * (36 / 1920));
  color: #fff;
  padding: calc(100vw * (4.5 / 1920)) calc(100vw * (25.5 / 1920));
  display: inline-block;
  margin-right: calc(100vw * (29 / 1920));
}
ul.caution {
  font-size: calc(100vw * (20 / 1920));
  letter-spacing: -0.03em;
  line-height: calc(100vw * (31.5 / 1920));
}
ul.caution li {
  text-indent: -1em;
  padding-left: 1em;
}
input[type="checkbox"], input[type="radio"] {
  /*width: inherit;*/
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.checkbox-text, .radio-text {
  cursor: pointer;
  display: inline-block;
  padding: 5px 0 5px 32px;
  position: relative;
}
input[type=checkbox]:checked + .checkbox-text::after,
input[type=radio]:checked + .radio-text::after {
  opacity: 1;
}
.checkbox-text::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  border: 1px solid #777;
}
.checkbox-text::after {
  content: "";
  display: block;
  width: 6px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: rotate(35deg) skewY(16deg) translateY(-50%);
  transform-origin: center right;
  border-right: 2px solid #e60012;
  border-bottom: 2px solid #e60012;
  opacity: 0;
}
.radio-text::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #777;
  border-radius: 50%;
}
.radio-text::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0;
}
input[type="submit"] {
  width: calc(100vw * (510 / 1920));
  height: calc(100vw * (90 / 1920));
  background: #ffdc64;
  color: #000;
  border-radius: 50px;
  border: none;
  font-size: calc(100vw * (27 / 1920));
  letter-spacing: -0.06em;
  line-height: calc(100vw * (32 / 1920));
  cursor: pointer;
  text-align: center;
}
input[type="submit"]:disabled {
  background: #B3B3B3;
  cursor: inherit;
}
input[type="button"] {
  width: calc(100vw*(340 / 1920));
  height: calc(100vw*(90 / 1920));
  background: #B3B3B3;
  border-radius: 50px;
  border: none;
  font-size: calc(100vw*(27 / 1920));
  letter-spacing: -0.06em;
  line-height: calc(100vw*(32 / 1920));
  cursor: pointer;
  text-align: center;
}
input[type="submit"] + input[type="button"] {
  margin-left: calc(100vw*(40 / 1920));
}

@media screen and (max-width: 767px) {
  #formWrap {
    width: 95%;
    margin: 0 auto;
    padding: calc(100vw * (20 / 375)) 0 calc(100vw * (80 / 375));
  }
  .attention {
    font-size: calc(100vw*(13.5 / 375));
    line-height: calc(100vw*(22.5 / 375));
    margin-bottom: calc(100vw*(20 / 375));
  }

  ul.contact-form {
    padding: calc(100vw * (40 / 375)) 0;
  }
  ul.contact-form li {
    margin-bottom: calc(100vw * (20 / 375));
  }
  ul.contact-form li.flexbox {
    gap: calc(100vw * (10 / 375));
  }
  ul.contact-form li p.contact-form-label {
    width: 100%;
  }
  ul.contact-form li .contact-form-control {
    width: 100%;
  }
  ul.contact-form li .contact-form-control .form-group.flexbox {
    gap: calc(100vw*(15 / 375));
  }
  input, select {
    width: 100%;
    font-size: calc(100vw*(16 / 375));
    line-height: calc(100vw*(16 / 375));
    padding: calc(100vw*(6.5 / 375)) calc(100vw*(15 / 375));
  }
  select {
    background-size: calc(100vw*(12 / 375)) calc(100vw*(6 / 375));
    background-position: right calc(100vw*(10 / 375)) center;
  }
  label {
    font-size: calc(100vw*(16 / 375));
    line-height: calc(100vw*(16 / 375));
    margin-top: calc(100vw*(5 / 375));
    margin-bottom: calc(100vw*(7.5 / 375));
  }
  .label-required {
    font-size: calc(100vw*(14 / 375));
    line-height: calc(100vw*(18 / 375));
    padding: calc(100vw*(3 / 375)) calc(100vw*(13 / 375));
    margin-right: calc(100vw*(5 / 375));
  }
  label br + input, label br + select, label input + p, label select + p {
    margin-top: calc(100vw * (5 / 375));
  }
  .form-short {
    width: calc(100vw * (105 / 375));
  }
  .form-long {
    width: 100%;
  }
  ul.contact-form li .contact-form-control .form-group + .form-group {
    margin-top: calc(100vw * (10 / 375));
  }
  ul.contact-form li .contact-form-control .form-group p {
    font-size: calc(100vw*(16 / 375));
    line-height: calc(100vw*(24 / 375));
  }
  ul.contact-form li .contact-form-control.contact-form-checkbox .form-group + .form-group {
   margin-top: calc(100vw * (10 / 375)); 
  }

  .form-remarks {
    margin-top: calc(100vw * (20 / 375));
  }
  .form-remarks h4 {
    cursor: pointer;
  }
  .form-remarks h4::after {
    content: "▼";
    margin-left: calc(100vw * (10 / 375));
    font-size: calc(100vw * (12 / 375));
  }
  .form-remarks h4.is-open::after {
    content: "▲";
  }
  .form-remarks h4::after {
  }
  ul.caution {
    font-size: calc(100vw*(14 / 375));
    line-height: calc(100vw*(21 / 375));
    display: none;
  }
  ul.caution + h4 {
    margin-top: calc(100vw * (15 / 375));
  }
  input[type="submit"] {
    width: calc(100vw*(300 / 375));
    height: calc(100vw*(60 / 375));
    font-size: calc(100vw*(18 / 375));
    line-height: calc(100vw*(36 / 375));
  }
  input[type="button"] {
    width: calc(100vw*(200 / 375));
    height: calc(100vw*(60 / 375));
    font-size: calc(100vw*(18 / 375));
    line-height: calc(100vw*(36 / 375));
  }
  input[type="submit"] + input[type="button"] {
    margin-top: calc(100vw*(20 / 375));
    margin-left: 0;
  }
}

/* 予約内容の確認 */
table.formTable{
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
}
table.formTable td,table.formTable th{
	border: 1px solid #9E9E9F;
	font-size: calc(100vw*(27 / 1920));
  font-weight: normal;
  padding: calc(100vw*(13 / 1920)) calc(100vw*(30 / 1920));
}
table.formTable th{
	width: 30%;
	font-weight: normal;
	background: #FFF8EE;
	text-align: left;
}
table.formTable + p.taC {
  margin-top: calc(100vw * (105 / 1920));
}

@media screen and (max-width: 767px) {
  table.formTable th, table.formTable td {
    width: auto;
    display: block;
    font-size: calc(100vw*(16 / 375));
    padding: calc(100vw*(6.5 / 375)) calc(100vw*(15 / 375));
  }
  table.formTable th {
    margin-top: calc(100vw * (10 / 375));
    border-bottom: 0;
  }
  table.formTable + p.taC {
    margin-top: calc(100vw * (50 / 375));
  }
}

/* エラー画面 */
.error_messe {
  font-size: calc(100vw*(21 / 1920));
  letter-spacing: -0.03em;
  line-height: calc(100vw*(42 / 1920));
}
h4 + .error_messe {
  margin-top: calc(100vw*(20 / 1920));
}

@media screen and (max-width: 767px) {
  .error_messe {
    font-size: calc(100vw*(14 / 375));
    line-height: calc(100vw*(21 / 375));
  }
  h4 + .error_messe {
    margin-top: calc(100vw*(10 / 375));
  }
}

/* 来場予約の確定 */
.reserve-complete {
  margin-top: calc(100vw*(125 / 1920));
  margin-bottom: calc(100vw*(85 / 1920));
  font-size: calc(100vw*(45 / 1920));
  line-height: calc(100vw*(66 / 1920));
  color: #000;
}
.reserve-number {
  font-size: calc(100vw*(36 / 1920));
  line-height: calc(100vw*(43 / 1920));
  color: #000;
  padding: calc(100vw*(20 / 1920)) 0 calc(100vw*(40 / 1920));
  border-top: 1px solid #9E9E9F;
  border-bottom: 1px solid #9E9E9F;
}
.reserve-number-span {
  color: #e60012;
}
.reserve-mail-send {
  margin-top: calc(100vw*(40 / 1920));
  margin-bottom: calc(100vw*(103 / 1920));
  font-size: calc(100vw*(26 / 1920));
  line-height: calc(100vw*(50 / 1920));
  color: #000;
}
.to-toppage {
  width: calc(100vw*(510 / 1920));
  height: calc(100vw*(90 / 1920));
  background: #ffdc64;
  border-radius: 50px;
  border: none;
  font-size: calc(100vw*(27 / 1920));
  letter-spacing: -0.06em;
  line-height: calc(100vw*(32 / 1920));
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.to-toppage:link, .to-toppage:visited {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .reserve-complete {
    margin-top: calc(100vw*(20 / 375));
    margin-bottom: calc(100vw*(40 / 375));
    font-size: calc(100vw*(20 / 375));
    line-height: calc(100vw*(30 / 375));
  }
  .reserve-number {
    font-size: calc(100vw*(18 / 375));
    line-height: calc(100vw*(21.5 / 375));
    padding: calc(100vw*(10 / 375)) 0 calc(100vw*(20 / 375));
  }
  .reserve-mail-send {
    margin-top: calc(100vw*(20 / 375));
    margin-bottom: calc(100vw*(50 / 375));
    font-size: calc(100vw*(14 / 375));
    line-height: calc(100vw*(25 / 375));
  }
  .to-toppage {
    width: calc(100vw*(300 / 375));
    height: calc(100vw*(60 / 375));
    font-size: calc(100vw*(18 / 375));
    line-height: calc(100vw*(36 / 375));
  }
}
/* form */

/* しばた東新町住宅祭LP（広伸様制作分） */
/* common */
.wrap{
	width:1200px!important;
	max-width:1200px!important;
	text-align:center;
	padding:0;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 75em) {
  .wrap{
    width:100%!important;
    max-width:100%!important;
  }
}

.type_pc{
	display:block;
}
.type_mb{
	display:none;
}
.type_mb-xs{
	display:none;
}
.type_mb-xsdis{
	display:inline-block;
}

@media screen and (max-width: 36em) {
  .type_pc{
    display:none;
  }
  .type_mb{
    display:block;
  }
}
@media screen and (max-width: 33.75em) {
  .type_mb-xsdis{
    display:none;
  }
}
@media screen and (max-width: 25em) {
  .type_mb-xs{
    display:block;
  }
}
/* common */

/* header */
#navi_cont{
	width:100%;
	background-color:#6b8e23;
  position: -webkit-sticky;
  position:         sticky;
  top: 0;
  z-index:900;
  margin-top:-2px;
}
#navi_cont img.top_logo{
	float:left;
	margin:0 0 0 10px;
	padding-top:6px;
  box-sizing: border-box; /* 調整のため追加 */
}

#navi_cont .wrap{
  height: 60px; /* 調整のため追加 */
}
div.barger-m {
	top:-1px;
	float:right;
	clear:  both; 
	display:block;
	width:60px;
	height:60px;
	background-color:#000;
	text-align:center;
}
.barger-m label{
	margin-bottom:0;
  margin:0; /* 調整のため追加 */
}

.drawer_hidden {
  display: none;
}
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 6px;
  width: 40px;
  border-radius: 6px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}
.drawer_open span:before {
  bottom: 15px;
}
.drawer_open span:after {
  top: 15px;
}
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* 調整のため追加 */
.top_logo_link:hover img {
  opacity: 1;
}
/* /調整のため追加 */
@media screen and (max-width: 48em) {
  #navi_cont img.top_logo{
    height:44px;
  }
  #navi_cont img.top_logo{
    margin:4px 0 0 10px;
  }
  #navi_cont .wrap{
    height: 50px; /* 調整のため追加 */
  }
  div.barger-m {
    width:50px;
    height:50px;
  }
  .drawer_open {
    height: 50px;
    width: 50px;
  }
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    height: 5px;
    width: 30px;
    border-radius: 5px;
  }
  .drawer_open span:before {
    bottom: 13px;
  }
  .drawer_open span:after {
    top: 13px;
  }
}
@media screen and (max-width: 36em) {
  #navi_cont img.top_logo{
    height:35px;
    }
  #navi_cont img.top_logo{
    margin:2px 0 0 10px;
  }
  #navi_cont .wrap{
    height: 40px; /* 調整のため追加 */
  }
  div.barger-m {
    width:40px;
    height:40px;
  }
  .drawer_open {
    height: 40px;
    width: 40px;
  }
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    height: 4px;
    width: 25px;
    border-radius: 4px;
  }
  .drawer_open span:before {
    bottom: 10px;
  }
  .drawer_open span:after {
    top: 10px;
  }
}

.nav_content {
  position: relative;
  width:300px;
  top:0;
  left: 100vw;
  z-index: 99;
  background: #000;
  color: #fff!important;
  transition: .5s;
  padding:30px 30px 20px 30px;
  box-sizing: border-box; /* 調整のため追加 */
}
.nav_content a,
.nav_content a:link,
.nav_content a:visited,
.nav_content a:hover,
.nav_content a:active{
  color: #fff!important;
}
/* 調整のため追加 */
.nav_content a {
  text-decoration: none;
}
.nav_content a:hover {
  text-decoration: underline;
}
/* /調整のため追加 */
.nav_list {
  list-style: none;
	font-size:1.2em;
	line-height:2em;
	text-align:left;
	margin-bottom:0;
}
.nav_list ul{
	margin-left:1.5em;
  list-style: none;
}
#drawer_input:checked ~ .nav_content {
  top:0;
  left: calc( 100% - 300px);
}
/* header */

/* footer */
.site-footer {
	border-top: 1px solid #eee;
}

.site-footer .wrap {
	padding-bottom: 1.5em;
	padding-top: 2em;
}

@media screen and (min-width: 30em) {
  .site-footer {
		font-size: 16px;
		font-size: 1rem;
	}
}

@media screen and (min-width: 48em) {
  .site-footer {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.6;
		margin-top: 3em;
	}

	.site-footer .widget-column.footer-widget-1 {
		float: left;
		width: 36%;
	}

	.site-footer .widget-column.footer-widget-2 {
		float: right;
		width: 58%;
	}
}

@media print {
  .site-footer {
		padding: 0;
	}
}

footer#colophon{
	background-color:#efefef;
	color:#333;
}
footer#colophon .wrap{
	width:720px!important;
	position: relative;
}

footer#colophon img.f_logo{
	width:400px;
	position: absolute;
	top:50px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
footer#colophon div.sns{
	margin:200px auto 0;
	display:block;
}

div.sns{
  width:300px;
  display:inline-block;
  margin-top:150px!important;
}
.snsbtniti2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  max-width: 150px;
  margin: 0 auto 0;
}

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

.snsbtniti2 li {
  flex: 0 0 50%;
  text-align: center!important;
}

.flowbtn8 {
  font-family: 'Noto Sans Japaneses', sans-serif;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 35px;
  border-radius: 50%;
  transition: .5s;
  text-decoration: none;
  color:#fff!important;
  box-sizing: border-box; /* 調整のため追加 */
}

.flowbtn8 i {
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.flowbtn8 i.fa-brands.fa-instagram{
  font-size: 45px;
}

.flowbtn8:hover {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}
.my_instagram2{
  background-color:#555;
}
.my_instagram2:hover {
  border: solid 1px #c6529a;
  background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}
.my_facebook2 {
  background-color:#555;
}
.my_facebook2:hover {
  border: solid 1px #1877f2;
  background-color: #1877f2;
}

@media screen and (max-width: 48em) {
  div.sns{
    width:200px;
    display:inline-block;
    margin-top:100px!important;
  }
}
@media screen and (max-width: 36em) {
  div.sns{
    width:150px;
    display:inline-block;
    margin-top:50px!important;
  }
  .flowbtn8 {
    width: 40px;
    height: 40px;
    font-size: 23px;
  }
  .flowbtn8 i.fa-brands.fa-instagram{
    font-size: 30px;
  }
}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas {
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  line-height: 1;
  text-align: center;
  text-rendering: auto;
  width: var(--fa-width, 1.25em);
}
.fa-brands, .fa-classic.fa-brands, .fab {
  --fa-family: var(--fa-family-brands);
  --fa-style: 400;
}
.fa-instagram {
  --fa: "\f16d";
}
.fa-facebook-f {
  --fa: "\f39e";
}
:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before {
  content: var(--fa) / "";
}

footer#colophon p{
  margin-bottom:0;
}
footer#colophon p.f_title{
	clear:both;
	display:inline-block;
	margin-top:20px;
	margin-bottom:20px;
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:1.0em;
	clear:both;
  padding: 0.3em 40px;
  text-align: center;
  background-color:#888;
  color:#fff;
}

footer#colophon div.footer-box{
  display:inline-block;
}


footer#colophon div.f_left-box,
footer#colophon div.f_right-box{
  float:left;
  display:inline-block;
  margin:0 20px;
}


footer#colophon p.f_co{
	font-size:1.4em;
	font-weight: 600;
}
footer#colophon p.f_add{
	font-size:1.2em;
}

footer#colophon p.f_tel{
	font-size:1.2em;
	margin-bottom:1em
}
footer#colophon p.f_tel2{
	font-family: din-2014, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size:2.4em;
	margin-bottom:3em;
}

footer#colophon p.f_co2{
	font-size:1.0em;
}
/* 調整のため追加 */
footer#colophon p.f_co2 a {
  color: #222;
  text-decoration: none;
}
footer#colophon p.f_co2 a:hover {
  text-decoration: underline;
}
/* /調整のため追加 */

footer#colophon #site_info2{
  display-block;
  margin-top:3em;
}

@media screen and (max-width: 48em) {
  footer#colophon img.f_logo{
    width:300px;
    position: absolute;
    top:30px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  footer#colophon div.f_left-box,
  footer#colophon div.f_right-box{
  float:none;
  display:block;
  margin:0 20px;
  }
}

@media screen and (max-width: 36em) {
  footer#colophon img.f_logo{
    width:200px;
    position: absolute;
    top:20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  footer#colophon p.f_co{
    font-size:1.2em;
    font-weight: 600;
  }
  footer#colophon p.f_add{
    font-size:1.0em;
  }

  footer#colophon p.f_tel{
    font-size:1.0em;
    margin-bottom:1em
  }
  footer#colophon p.f_co2{
    font-size:0.8em;
  }

  footer#colophon #site_info2{
    font-size:0.7em;
  }
}
/* footer */
/* /しばた東新町住宅祭LP（広伸様制作分） */