@charset "UTF-8";
/* ======================================================================================
    Reset
====================================================================================== */
@import url("../font/all.min.css");
#main div, #main span, #main applet, #main object, #main iframe,
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, #main p, #main blockquote, #main pre,
#main a, #main abbr, #main acronym, #main address, #main big, #main cite, #main code,
#main del, #main dfn, #main em, #main img, #main ins, #main kbd, #main q, #main s, #main samp,
#main small, #main strike, #main strong, #main sub, #main sup, #main tt, #main var,
#main b, #main u, #main i, #main center,
#main dl, #main dt, #main dd, #main ol, #main ul, #main li,
#main fieldset, #main form, #main label, #main legend,
#main table, #main caption, #main tbody, #main tfoot, #main thead, #main tr, #main th, #main td,
#main article, #main aside, #main canvas, #main details, #main embed,
#main figure, #main figcaption, #main footer, #main header, #main hgroup,
#main menu, #main nav, #main output, #main ruby, #main section, #main summary,
#main time, #main mark, #main audio, #main video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
#main ol, #main ul {
  list-style-type: none;
}
#main table {
  border-collapse: collapse;
  border-spacing: 0;
}
#main caption, #main th, #main td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
#main q, #main blockquote {
  quotes: none;
}
#main q:before, #main q:after, #main blockquote:before, #main blockquote:after {
  content: "";
  content: none;
}
#main button {
  background: none;
  border: none;
}
#main a {
  text-decoration: none;
}
#main a img {
  border: none;
}
#main img {
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
}
#main article, #main aside, #main details, #main figcaption, #main figure, #main footer, #main header, #main hgroup, #main main, #main menu, #main nav, #main section, #main summary {
  display: block;
}

#main .colonial__nav {
  z-index: 100;
  position: sticky;
  top: 0;
  right: 1em;
  width: 1200px;
  margin: 0 auto;
}
#main .colonial__nav__btn {
  z-index: 2;
  position: absolute;
  right: 1em;
  top: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  padding: 0.5rem;
  background-color: rgba(162, 150, 114, 0.3);
  background: #efebe7 url("../images/bg-beige.png");
}
#main .colonial__nav__btn span,
#main .colonial__nav__btn span::before,
#main .colonial__nav__btn span:after {
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  transition: all 0.5s ease-in-out;
  background: #4E381D;
}
#main .colonial__nav__btn span::before {
  transform: translateY(-8px);
}
#main .colonial__nav__btn span::after {
  transform: translateY(7px);
}
#main .colonial__nav__btn:hover, #main .colonial__nav__btn.j-colonial__nav__active {
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#main .colonial__nav__btn:hover span, #main .colonial__nav__btn.j-colonial__nav__active span {
  transform: translateX(10px);
  background: transparent;
}
#main .colonial__nav__btn:hover span::before, #main .colonial__nav__btn.j-colonial__nav__active span::before {
  transform: rotate(-40deg) translateX(-8px) translateY(-5px);
}
#main .colonial__nav__btn:hover span::after, #main .colonial__nav__btn.j-colonial__nav__active span::after {
  transform: rotate(40deg) translateX(-8px) translateY(6px);
}
#main .colonial__nav__btn:hover {
  opacity: 0.6;
}
#main .colonial__nav__menu {
  z-index: 1;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 30rem;
  background: #efebe7 url("../images/bg-beige.png");
  opacity: 0;
}
#main .colonial__nav__menu.j-colonial__nav__active {
  display: block;
  animation: colonialNav_fadeIn 0.3s ease forwards;
}
@keyframes colonialNav_fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#main .colonial__nav__menu__list {
  background-color: rgba(162, 150, 114, 0.3);
  padding: 5rem 0 2em;
}
#main .colonial__nav__menu__list > li {
  border-bottom: 2px #4E381D solid;
}
#main .colonial__nav__menu__list > li:last-of-type {
  margin-top: 1em;
}
#main .colonial__nav__menu__list > li > a {
  display: block;
  padding: 1em 2em;
  line-height: 1.2em;
}
#main .colonial__nav__menu__list > li > a::after {
  position: absolute;
  right: 0;
  top: calc(50% - 0.5em);
}

/* ////////////////////////////////////////////////////////////////////
    fair style
//////////////////////////////////////////////////////////////////// */
/* ====================================================================
    common
==================================================================== */
#main {
  position: relative;
  font-size: 1.6rem;
  display: block;
  /* ====================================================================
  	fair foot
  ==================================================================== */
}
#main::before {
  z-index: 100;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 5px;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}
#main img {
  max-width: 100%;
  height: auto;
}
#main a {
  color: #4E381D;
}
#main p {
  line-height: 2em;
}
#main .content {
  width: 100%;
  max-width: 1340px;
  margin: auto;
  max-width: 1200px;
}
#main .content::after {
  content: "";
  display: block;
  clear: both;
}
#main .contentThin {
  width: 100%;
  max-width: 1340px;
  margin: auto;
  max-width: 1075px;
}
#main .contentThin::after {
  content: "";
  display: block;
  clear: both;
}
#main .title {
  padding-bottom: 0.75em;
  line-height: 1.2em;
  border-bottom: 2px #4E381D solid;
  text-align: center;
  font-size: 2.4rem;
}
#main .spec, #main .spec--dl {
  margin: 1em auto;
  padding: 1.5em 3em;
  background-color: #EBE2C7;
  font-size: 1.4rem;
}
#main .spec--dl {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
#main .spec--dl > dt {
  width: 100%;
  margin-bottom: 0.5em;
  font-size: 1.2em;
}
#main .spec--dl > dd {
  width: 48%;
}
#main .spec--nobg {
  padding: 1.5em 0;
  font-size: 1.4rem;
  background-color: transparent;
}
#main .spec--ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1.4rem;
  padding: 1em 0;
}
#main .spec--ul > li {
  width: 48%;
}
#main .sr {
  background: #EBE2C7 url("../images/bg-beige.png");
  margin: 5em auto;
  padding: 4em 0;
  line-height: 1em;
  text-align: center;
}
#main .sr > dd {
  margin-top: 2em;
}
#main .link {
  width: 100%;
  max-width: 1340px;
  margin: auto;
  max-width: 1200px;
  margin-top: 1.5em;
  margin-bottom: 2em;
  text-align: right;
  font-size: 1.4rem;
  font-weight: bold;
}
#main .link a {
  display: inline-block;
  line-height: 0;
  color: #4E381D;
}
#main .link a::after {
  display: inline-block;
  margin-left: 0.25em;
  content: "\f101";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
#main .movie {
  background-color: #EBE2C6;
}
#main .movie .wrap {
  width: 500px;
  margin: 0 auto;
}
#main .movie .wrap .youtube {
  background-color: #EBE2C6;
  text-align: center;
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
#main .movie .wrap .youtube iframe {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#main #page-top {
  z-index: 100;
}
#main #sns {
  width: 100%;
  max-width: 1340px;
  margin: auto;
  margin: 3em auto;
}
#main #sns .snsList {
  display: flex;
  justify-content: center;
  align-items: center;
}
#main #sns .snsList li {
  margin: 0 0.5em;
  line-height: 1em;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}
#main #sns .snsList li a {
  display: inline-block;
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
}
#main #sns .snsList li.twitter a {
  background-color: #006dbf;
  color: #fff;
}
#main #sns .snsList li.instagram a {
  background-color: #222;
  color: #fff;
}
#main #showroom {
  width: 100%;
  max-width: 1340px;
  margin: auto;
  margin: 3em auto;
}
#main #showroom h2 {
  padding: 0.5em 0;
  border-top: 1px #A29D95 solid;
  border-bottom: 1px #A29D95 solid;
  text-align: center;
  font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, serif;
  font-weight: normal;
  font-size: 3rem;
  line-height: 1em;
}
@supports (-ms-ime-align: auto) {
  #main #showroom h2 {
    margin-top: 65px;
    /* Edge */
  }
}
#main #showroom #showroomReport {
  width: 100%;
  max-width: 1340px;
  margin: auto;
}
#main #showroom #showroomReport::after {
  content: "";
  display: block;
  clear: both;
}
#main #showroom #showroomReport a {
  display: block;
  width: 80%;
  margin: 4em auto 5em;
}
#main #showroom #showroomList img {
  max-width: 100%;
  height: auto;
}
#main #showroom #showroomList strong {
  font-weight: bold;
}
#main #showroom #showroomList #near-sr-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 2em 2em 0 2em;
}
#main #showroom #showroomList #near-sr-list > * {
  width: 30%;
  margin-right: 5%;
}
#main #showroom #showroomList #near-sr-list > *:nth-of-type(3n) {
  margin-right: 0;
}
#main #showroom #showroomList #area-tab {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 2em 0;
  border-bottom: 1px #A29D95 solid;
}
#main #showroom #showroomList #area-tab li {
  width: 12.5%;
  padding: 1em 0;
  border-right: 1px #fff solid;
  text-align: center;
  font-size: 1.4rem;
}
#main #showroom #showroomList #area-tab li.sel {
  background-color: #A29D95;
  color: #fff;
  font-weight: bold;
}
#main #showroom #showroomList #area-tab li:last-of-type {
  border-right: none;
}
#main #showroom #showroomList #area-tab li:hover {
  background-color: #A29D95;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
#main #showroom #showroomList #sr-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#main #showroom #showroomList #sr-list li {
  width: 20%;
  padding: 0 1% 3em;
}
#main #showroom #showroomList #sr-list li img {
  width: 100%;
  max-width: none;
}

/* ////////////////////////////////////////////////////////////////////
    各ページcss
//////////////////////////////////////////////////////////////////// */
#main.colonial--top .kv {
  background: #EBE2C7 url("../images/bg-beige.png");
}
#main.colonial--top .kv .logo {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
#main.colonial--top .kv .logo img {
  position: absolute;
  left: 0;
  top: 7.5rem;
}
#main.colonial--top .kv .main {
  text-align: center;
  padding: 0 20em;
}
#main.colonial--top .event {
  margin-top: 10em;
}
#main.colonial--top .event > .title {
  width: 38rem;
  margin: 0 auto;
}
#main.colonial--top .event .event50th {
  margin-top: 7em;
  text-align: center;
}
#main.colonial--top .event .event50th .period {
  margin: 2em 0 5em;
}
#main.colonial--top .event .event50th .photo {
  margin-bottom: 3em;
}
#main.colonial--top .event .event50th .eventList {
  margin-top: 5em;
}
#main.colonial--top .event .event50th .eventList > li {
  border-top: 2px #4E381D solid;
  padding: 5em 3em;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 3em;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail > li {
  width: 49%;
  text-align: right;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail > li:nth-of-type(2n) {
  text-align: left;
  margin-left: 2%;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail > li .name {
  display: inline-block;
  padding: 0.5em 4em;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail > li .name_black {
  display: inline-block;
  padding: 0.5em 3em;
}
#main.colonial--top .event .event50th .eventList > li.order .checkdetail > li.notes {
  margin-top: 2em;
  width: 100%;
  text-align: left;
  padding: 0 18em;
}
#main.colonial--top .event .event50th .eventList > li.cf50, #main.colonial--top .event .event50th .eventList > li.cc705 {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
#main.colonial--top .event .event50th .eventList > li.cf50 .text, #main.colonial--top .event .event50th .eventList > li.cc705 .text {
  width: 50%;
  text-align: left;
}
#main.colonial--top .event .event50th .eventList > li.cf50 .text .lead, #main.colonial--top .event .event50th .eventList > li.cc705 .text .lead {
  margin-top: 2em;
}
#main.colonial--top .event .event50th .eventList > li.cf50 .text .notes, #main.colonial--top .event .event50th .eventList > li.cc705 .text .notes {
  margin-top: 1em;
  font-size: 1.4rem;
}
#main.colonial--top .event .event50th .eventList > li.cf50 .photo, #main.colonial--top .event .event50th .eventList > li.cc705 .photo {
  width: 33%;
  margin-right: 10%;
}
#main.colonial--top .reform {
  margin: 10em auto 15em;
  background: #efebe7 url("../images/bg-gray.png");
  padding-top: 5em;
}
#main.colonial--top .reform .reflesh .image {
  margin-top: 5em;
  text-align: center;
}
#main.colonial--top .reform .reflesh .onlineshop {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 4em auto 0;
  text-align: center;
  max-width: 1000px;
}
#main.colonial--top .reform .reflesh .onlineshop > dt {
  width: 100%;
  margin-bottom: 4em;
}
#main.colonial--top .reform .reflesh .onlineshop > dd {
  width: 40%;
  margin: 0 auto;
}
#main.colonial--top .reform .network {
  margin-top: 15em;
  text-align: center;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
#main.colonial--top .reform .network .image {
  margin-top: 5em;
}
#main.colonial--top .reform .network .contact {
  margin-top: 5em;
}

.colonial__content img {
  max-width: 80%;
  height: auto;
}

#main.colonial--history .history {
  text-align: center;
  background: #EBE2C7 url("../images/bg-beige.png");
}
#main.colonial--history .history .logo {
  padding: 2em 0 0 3em;
  width: 1200px;
  margin: 0 auto;
  text-align: left;
}
#main.colonial--history .history .logo img {
  width: 13rem;
  position: fixed;
}
#main.colonial--history .history .title {
  width: 1075px;
  margin: 7em auto 0;
}
#main.colonial--history .history .lead {
  margin: 1em 0 3em;
}
#main.colonial--history .history .episode {
  margin-top: 5em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
#main.colonial--history .history .episode > dt, #main.colonial--history .history .episode > dd {
  width: 960px;
  margin: 0 auto;
}
#main.colonial--history .history .episode > dt {
  margin-top: 5em;
}
#main.colonial--history .history .episode > dd {
  margin-top: 2em;
  text-align: left;
  max-width: 776px;
}
#main.colonial--history .quality {
  margin-top: 10em;
  padding-top: 10em;
  background: #EBE2C7 url("../images/bg-beige.png");
}
#main.colonial--history .quality .title {
  width: 960px;
  margin: 0 auto;
}
#main.colonial--history .quality .lead {
  margin-top: 2em;
  text-align: center;
}
#main.colonial--history .quality .detail {
  margin-top: 3em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
#main.colonial--history .quality .detail > li {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  width: 720px;
  margin: 0 auto 2em;
}
#main.colonial--history .quality .detail > li .photo {
  width: 27%;
}
#main.colonial--history .quality .detail > li .text {
  width: 65%;
}

/*# sourceMappingURL=style.css.map */