﻿@charset "utf-8";

/* Base Start */

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

article,aside,details,figcaption,figure,footer,header,menu,nav,section {
	display:block;
}

img {
  border:0;
  vertical-align:top;
}

em,address {
	font-style:normal;
}

body {
	text-align:center;
	background-color: #ede6da;
	color:#333;
	font-family:'小塚ゴシック Pro','Kozuka Gothic Pro',"游ゴシック体",YuGothic,"YuGothic M","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
	font-size:100%;
}

.mincho {
	font-family:'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

a {
	text-decoration:none;
	color:#333;
	outline:none;
}

a:hover {
	text-decoration:underline;
}

#anc-all-wrap {
	width:100%;
	overflow:hidden;
}

/* Base End */

/* Clearfix Start */

.clearfix::after {
	content:"";
	display:block;
	clear:both;
}

/* Clearfix End */

/* Header Start */

#upper {
  position: relative;
}

#upper>img {
  z-index: 1;
  width: 100%;
  height: auto;
}

#header {
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#header strong {
  position: absolute;
  left: 30px;
  top: 0;
  width: 192px;
  height: 143px;
}

#header strong a {
  display: flex;
  justify-content: center;
  background-color: #f90;
  border-radius: 0 0 16px 16px;
  width: 100%;
  height: 100%;
}

#header strong a span {
  padding-top: 16px;
}

.h1-base {
  position: absolute;
  left: 0;
  top: 143px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  width: 100%;
  height: calc(100% - 143px);
  text-align: left;
}

.h1-base h1 {
  color:#fff;
  line-height: 0;
  font-size: 0;
}

.h1-base h1 em {
	display: block;
	line-height: 100%;
	font-family:'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size: 18px;
}

.h1-base h1 big {
	display: block;
	padding: 8px 0 24px 0;
	line-height: 126%;
	font-size: 56px;
}

.h1-base h1 small {
	display: block;
	line-height: 100%;
	font-size: 18px;
}

.h1-base h1 small span {
  display: inline-block;
}

@media only screen and (max-width : 1009px) {
    
}

@media screen and (min-width : 768px) and (max-width : 1009px) {
  #header strong {
    left: 22px;
    height: 133px;
  }
  
  .h1-base {
    top: 133px;
    padding: 0 22px;
    height: calc(100% - 133px);
  }

	.h1-base h1 em,
  .h1-base h1 small {
    font-size: 16px;
  }

  .h1-base h1 big {
    padding: 6px 0 18px 0;
    font-size: 42px;
  }
}

@media only screen and (max-width : 767px) {
  #header strong {
    left: 15px;
    height: 123px;
  }
  
  .h1-base {
    top: 123px;
    padding: 0 15px;
    height: calc(100% - 123px);
  }

	.h1-base h1 em,
  .h1-base h1 small {
    font-size: 14px;
  }

  .h1-base h1 big {
    padding: 4px 0 12px 0;
    font-size: 28px;
  }
}

/* Header End */

/* Main Start */

#contents {
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 1004px;
}

.white50 {
  background-color: rgba(255, 255, 255, .5);
}

.h2-flower {
  padding-left: 3px;
  color: #600;
  line-height: 140%;
  font-size: 33px;
  letter-spacing: 3px;
}

.h2-flower::before {
  margin: 0 auto 16px;
  display: block;
  width: 139px;
  height: 17px;
  content: url(../rental_space/images/bg_h3_flower.png);
}

.h3-flower {
  padding-left: 3px;
  line-height: 140%;
  font-size: 30px;
  letter-spacing: 3px;
}

.h3-flower::before {
  margin: 0 auto 24px;
  display: block;
  width: 139px;
  height: 17px;
  content: url(../rental_space/images/bg_h3_flower.png);
}

.h3-flower small {
  display: block;
  padding: 56px 0 48px 0;
  color: #4a332a;
  line-height: 140%;
  font-size: 18px;
}

.h3-flower small em {
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

.h3-flower small em::before {
  position: absolute;
  left: 0;
  top: calc(50% - 2px);
  display: block;
  border-right: 1px solid #4a332a;
  width: 24px;
  height: 24px;
  transform: rotate(-45deg);
  content: "";
}

.h3-flower small em::after {
  position: absolute;
  right: 0;
  top: calc(50% - 2px);
  display: block;
  border-left: 1px solid #4a332a;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
  content: "";
}

.h3-flower small em span {
  display: inline-block;
}

@media only screen and (max-width : 1009px) {
  .container {
    width: 90%;
  }
}

@media screen and (min-width : 768px) and (max-width : 1009px) {
  .h2-flower {
    font-size: 27px;
  }

  .h3-flower {
    font-size: 25px;
  }
}

@media only screen and (max-width : 767px) {
  .h2-flower {
    font-size: 21px;
  }

  .h3-flower {
    font-size: 20px;
  }
}

/* Main End */

/* Footer Start */

.lower {
  background-color: #4a362a;
}

#footer {
  margin: 0 auto;
  padding-bottom: 116px;
  width: 90%;
  color: #fff;
}

#footer h3 {
  padding: 96px 0 48px 0;
  line-height: 120%;
  font-size: 45px;
}

#footer h3 span {
  display: inline-block;
}

#footer ul {
  padding-top: 36px;
}

.two-contact {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  list-style: none;
}

.two-contact li {
  margin: 0 9px 12px;
  width: 100%;
  max-width: 346px;
}

.two-contact li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 69px;
  line-height: 100%;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.two-contact li:first-child a {
  background-color: #f90;
}

.two-contact li:last-child a {
  background-color: #900;
}

.two-contact li a::before {
  position: absolute;
  left: 52px;
  top: calc(50% - 5px);
  display: block;
  background: url(../rental_space/images/bg_arrow.png) no-repeat;
  background-size: 6px 10px;
  width: 6px;
  height: 10px;
  content: "";
}

.two-contact li a:hover {
  opacity: .8;
}

#footer em {
  display: block;
  padding: 32px 0 16px 0;
  line-height: 100%;
  font-size: 30px;
}

#footer em span {
  position: relative;
  display: inline-block;
  padding-left: 50px;
}

#footer em span::before {
  position: absolute;
  left: 0;
  top: calc(50% - 17px);
  display: block;
  background: url(../rental_space/images/icon_tel.png) no-repeat;
  background-size: 35px 34px;
  width: 35px;
  height: 34px;
  content: "";
}

#footer small {
  display: block;
  padding-bottom: 20px;
  line-height: 120%;
  font-size: 13px;
  font-weight: bold;
}

#footer p {
  line-height: 120%;
  font-size: 16px;
  font-weight: bold;
}

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

}

@media screen and (min-width : 768px) and (max-width : 1009px) {
  #footer {
    padding-bottom: 87px;
  }

  #footer h3 {
    padding: 72px 0 36px 0;
    font-size: 39px;
  }

  #footer ul {
    padding-top: 27px;
  }

  #footer em {
    padding: 24px 0 12px 0;
  }

  #footer small {
    padding-bottom: 15px;
  }
}

@media only screen and (max-width : 767px) {
  #footer {
    padding-bottom: 58px;
  }

  #footer h3 {
    padding: 48px 0 24px 0;
    font-size: 33px;
  }

  #footer ul {
    padding-top: 18px;
  }

  .two-contact li a {
    font-size: 18px;
  }

  .two-contact li a::before {
    left: 12px;
  }

  #footer em {
    padding: 16px 0 8px 0;
  }

  #footer small {
    padding-bottom: 10px;
  }
}

/* Footer End */

/* Top Page (index.html) Start */

.contents-top {
  padding: 36px 0 64px 0;
}

.purpose {
  padding: 48px 0;
}

.purpose dl {
  display: flex;
  align-items: center;
}

.purpose dl dt {
  flex-shrink: 0;
  width: 591px;
}

.purpose dl dt img {
  max-width: 100%;
  height: auto;
}

.purpose dl dd {
  order: -1;
  flex-grow: 1;
  padding: 0 32px;
}

.purpose dl dd p {
  padding-bottom: 40px;
  color: #4a332a;
  line-height: 180%;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.purpose dl dd ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.purpose dl dd ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4a332a;
  border-radius: 24px;
  color: #fff;
  margin: 10px 10px 0 10px;
  width: 182px;
  height: 48px;
  line-height: 100%;
  font-size: 15px;
  font-weight: bold;
}

.outline {
  padding-top: 80px;
}

.outline h3 {
  margin-bottom: 48px;
}

.frame-box {
  padding: 32px 0;
  border: 2px solid rgba(102, 51, 0, .37);
  background-color: rgba(255, 255, 255, .37);
}

.outline ul {
  margin: 0 32px;
  list-style: none;
}

.outline ul li {
  padding: 20px 4px;
}

.outline ul li+li {
  border-top: 1px solid #ccc;
}

.outline ul li dl {
  display: flex;
  line-height: 140%;
  color: #4a332a;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.outline ul li dl dt {
  flex-shrink: 0;
  width: 7em;
}

.outline ul li dl dd {
  flex-grow: 1;
}

.outline ul li dl dd span {
  display: inline-block;
}

.recommend {
  padding-top: 132px;
}

.recommend h3 {
  margin-bottom: 28px;
}

.recommend ul {
  list-style: none;
}

.recommend ul li {
  padding: 40px 0;
}

.recommend ul li:nth-child(odd) {
  background-color: rgba(255, 255, 255, .62);
}

.recommend ul li:nth-child(even) {
  background-color: rgba(244, 239, 232, .71);
}

.recommend dl {
  display: flex;
  align-items: center;
}

.recommend dl dt {
  flex-shrink: 0;
  width: 240px;
}

.recommend dl dt div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: 240px;
  height: 230px;
}

.recommend ul li:nth-child(odd) dl dt div {
  background-color: #4a332a;
}

.recommend ul li:nth-child(even) dl dt div {
  background-color: #935f39;
}

.recommend dl dt div em {
  display: inline-block;
}

.recommend dl dt div em span {
  display: block;
  padding-bottom: 28px;
}

.recommend dl dt div em strong {
  display: block;
  color: #fff;
  line-height: 120%;
  font-size: 18px;
}

.recommend dl dd {
  flex-grow: 1;
  margin-left: 76px;
  text-align: left;
}

.recommend dl dd h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #4a332a;
  color: #4a332a;
  width: 150px;
  height: 25px;
  line-height: 100%;
  font-size: 14px;
}

.recommend dl dd h4:not(:first-of-type) {
  margin-top: 20px;
}

.recommend dl dd p {
  padding-top: 12px;
  color: #4a332a;
  line-height: 140%;
  font-size: 14px;
  font-weight: bold;
}

.space {
  padding-top: 92px;
}

.space h3 {
  margin-bottom: 40px;
}

.space ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
}

.space ul li {
  padding: 20px;
}

.space ul li dl {
  width: 100%;
  max-width: 425px;
}

.space ul li dl dt img {
  max-width: 100%;
  height: auto;
}

.space ul li dl dd h4 {
  padding: 16px 0 24px 0;
  line-height: 100%;
  font-size: 18px;
}

.space ul li dl dd p {
  line-height: 120%;
  font-size: 16px;
  text-align: left;
}

.space ul li dl dd strong {
  display: block;
  padding-top: 12px;
  color: #c00;
  line-height: 120%;
  font-size: 14px;
  text-align: left;
}

.plan-ex {
  padding-top: 112px;
}

.plan-ex h3 {
  margin-bottom: 44px;
}

.plan-ex div {
  padding: 88px 0 80px 0;
}

.plan-ex ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
}

.plan-ex ul li {
  padding: 0 10px 20px 10px;
}

.plan-ex ul li dl {
  width: 100%;
  max-width: 336px;
}

.plan-ex ul li dl dt img {
  max-width: 100%;
  height: auto;
}

.plan-ex ul li dl dd h4 {
  padding: 16px 0 20px 0;
  line-height: 100%;
  font-size: 18px;
}

.plan-ex ul li dl dd em {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: #4a332a;
  color: #fff;
  width: 150px;
  height: 30px;
  line-height: 100%;
  font-size: 14px;
  font-weight: bold;
}

.plan-ex ul li dl dd strong {
  display: block;
  padding: 16px 0 12px 0;
  color: #f60;
  line-height: 100%;
}

.plan-ex ul li dl dd p {
  line-height: 120%;
  font-size: 16px;
}

.price-list {
  padding-top: 92px;
}

.scroll_div {
	margin:0 32px;
	padding-bottom:1px;
  color: #4a332a;
	height:auto;
	overflow-x:auto;
	overflow-y:visible;
  font-weight: bold;
  white-space: nowrap;
}

.scroll_div table {
	width:100%;
}

.scroll_div table,
.scroll_div table tr,
.scroll_div table th,
.scroll_div table td {
	border-collapse:collapse;
}

.scroll_div table tr {
  border-bottom: 1px solid #ccc;
}

.scroll_div table thead th {
  padding: 16px 10px;
  line-height: 140%;
  font-size: 14px;
}

.scroll_div table tbody th {
  padding: 8px;
  width: 166px;
}

.scroll_div table tbody th span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(204, 204, 204, .4);
  width: 150px;
  height: 42px;
  line-height: 100%;
  font-size: 14px;
}

.scroll_div table tbody tr:nth-child(n+5) th span {
  background-color: rgba(153, 0, 0, .1);
}

.scroll_div table tbody td {
  line-height: 100%;
  font-size: 18px;
}

.scroll_div table tbody td.option {
  line-height: 140%;
  font-size: 14px;
}

.scroll_div table tbody td.option span {
  display: block;
  padding-top: 20px;
}

.price-list b {
  display: block;
  padding: 32px 32px 0 32px;
  color: #4a332a;
  line-height: 140%;
  font-size: 16px;
}

.price-list ul {
  padding: 64px 0 32px 0;
}

.price-list big {
  display: block;
  padding-bottom: 16px;
  line-height: 120%;
  font-size: 18px;
  font-weight: bold;
}

.price-list strong {
  display: block;
  padding-left: 4px;
  color: #900;
  line-height: 120%;
  font-size: 24px;
  letter-spacing: 4px;
}

.price-list b span,
.price-list big span,
.price-list strong span {
  display: inline-block;
}

.proposal {
  padding: 140px 0 164px 0;
}

.proposal h3 {
  margin-bottom: 56px;
}

.proposal h3 span {
  display: inline-block;
}

.proposal dl {
  margin: 0 auto;
  width: 100%;
  max-width: 842px;
}

.proposal dl dt img {
  max-width: 100%;
  height: auto;
}

.proposal dl dd p {
  padding-top: 44px;
  color: #4a332a;
  line-height: 160%;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.proposal dl dd p span {
  display: block;
  padding-top: 24px;
}

@media only screen and (max-width : 1009px) {
  .purpose dl {
    flex-direction: column;
  }
  
  .purpose dl dt {
    width: 100%;
  }
  
  .purpose dl dd {
    order: 0;
    margin-top: 28px;
  }
}

@media screen and (min-width : 768px) and (max-width : 1009px) {
  .contents-top {
    padding: 27px 0 48px 0;
  }
  
  .purpose {
    padding: 36px 0;
  }

  .purpose dl dt,
  .purpose dl dd {
    padding: 0 24px;
  }
  
  .purpose dl dd p {
    padding-bottom: 30px;
  }

  .outline {
    padding-top: 60px;
  }
  
  .outline h3 {
    margin-bottom: 36px;
  }
  
  .frame-box {
    padding: 24px 0;
  }
  
  .outline ul {
    margin: 0 24px;
  }
  
  .outline ul li {
    padding: 15px 2px;
  }

  .recommend {
    padding-top: 99px;
  }
  
  .recommend h3 {
    margin-bottom: 21px;
  }
  
  .recommend ul li {
    padding: 30px 0;
  }
  
  .recommend dl dd {
    margin-left: 38px;
  }
  
  .recommend dl dd h4:not(:first-of-type) {
    margin-top: 15px;
  }
  
  .recommend dl dd p {
    padding-top: 9px;
  }

  .space {
    padding-top: 69px;
  }
  
  .space h3 {
    margin-bottom: 30px;
  }
  
  .space ul li {
    padding: 18px;
  }
  
  .space ul li dl dd h4 {
    padding: 12px 0 18px 0;
  }
  
  .space ul li dl dd strong {
    padding-top: 9px;
  }

  .plan-ex {
    padding-top: 84px;
  }
  
  .plan-ex h3 {
    margin-bottom: 33px;
  }
  
  .plan-ex div {
    padding: 66px 0 60px 0;
  }

  .price-list {
    padding-top: 69px;
  }
  
  .scroll_div {
  	margin:0 24px;
  }
  
  .scroll_div table thead th {
    padding: 12px 6px;
  }
  
  .scroll_div table tbody th {
    width: 151px;
  }
  
  .scroll_div table tbody th span {
    width: 135px;
  }
  
  .scroll_div table tbody td.option span {
    padding-top: 15px;
  }
  
  .price-list b {
    padding: 24px 24px 0 24px;
  }
  
  .price-list ul {
    padding: 48px 0 24px 0;
  }
  
  .price-list big {
    padding-bottom: 12px;
  }

  .proposal {
    padding: 105px 0 123px 0;
  }
  
  .proposal h3 {
    margin-bottom: 42px;
  }
  
  .proposal dl dd p {
    padding-top: 33px;
  }
  
  .proposal dl dd p span {
    padding-top: 18px;
  }
}

@media only screen and (max-width : 767px) {
  .contents-top {
    padding: 18px 0 32px 0;
  }
  
  .purpose {
    padding: 24px 0;
  }
  
  .purpose dl dt,
  .purpose dl dd {
    padding: 0 16px;
  }
  
  .purpose dl dd p {
    padding-bottom: 20px;
  }

  .outline {
    padding-top: 40px;
  }
  
  .outline h3 {
    margin-bottom: 24px;
  }
  
  .frame-box {
    padding: 16px 0;
  }
  
  .outline ul {
    margin: 0 16px;
  }
  
  .outline ul li {
    padding: 16px 0;
  }

  .recommend {
    padding-top: 66px;
  }
  
  .recommend h3 {
    margin-bottom: 14px;
  }
  
  .recommend ul li {
    padding: 20px 0;
  }
  
  .recommend dl {
    flex-direction: column;
  }

  .recommend dl dt {
    width: 100%;
  }

  .recommend dl dt div {
    margin: 0 auto;
  }

  .recommend dl dd {
    margin-left: 0;
    padding-top: 20px;
  }
  
  .recommend dl dd h4:not(:first-of-type) {
    margin-top: 10px;
  }
  
  .recommend dl dd p {
    padding-top: 6px;
  }

  .space {
    padding-top: 46px;
  }
  
  .space h3 {
    margin-bottom: 20px;
  }
  
  .space ul li {
    padding: 16px;
  }
  
  .space ul li dl dd h4 {
    padding: 8px 0 12px 0;
  }
  
  .space ul li dl dd strong {
    padding-top: 6px;
  }

  .plan-ex {
    padding-top: 56px;
  }
  
  .plan-ex h3 {
    margin-bottom: 22px;
  }
  
  .plan-ex div {
    padding: 44px 0 40px 0;
  }

  .price-list {
    padding-top: 46px;
  }
  
  .scroll_div {
  	margin:0 16px;
  }
  
  .scroll_div table thead th {
    padding: 8px 4px;
  }
  
  .scroll_div table tbody th {
    width: 136px;
  }
  
  .scroll_div table tbody th span {
    width: 120px;
  }
  
  .scroll_div table tbody td.option span {
    padding-top: 10px;
  }
  
  .price-list b {
    padding: 16px 16px 0 16px;
  }
  
  .price-list ul {
    padding: 32px 0 16px 0;
  }
  
  .price-list big {
    padding-bottom: 8px;
  }

  .proposal {
    padding: 70px 0 82px 0;
  }
  
  .proposal h3 {
    margin-bottom: 28px;
  }
  
  .proposal dl dd p {
    padding-top: 22px;
  }
  
  .proposal dl dd p span {
    padding-top: 12px;
  }
}

/* Top Page (index.html) End */
