@charset "UTF-8";
/*$btn-request-off-color:*/
/*#9e7013*/
/*#BD8617;*/
/*$btn-request-on-color:#db9b1a;*/
/*$btn-reserve-off-color:#9c9e73;
$btn-reserve-on-color:#b5b886;*/
/**header{
       @media screen and (max-width:$bp04){
       background-color: #ffffff00;
           box-shadow: none;
    } 
}**/
@media screen and (max-width: 600px) {
  .contents {
    padding-top: 0 !important; } }

.sec-flex {
  display: flex;
  flex-wrap: wrap; }

.midashi {
  text-align: center; }

.lead.center {
  margin-top: 2rem;
  text-align: center; }
.lead.left {
  margin-top: 2rem;
  text-align: left; }

.concept-merit {
  margin-top: 2rem;
  text-align: center; }
  .concept-merit img {
    max-width: 760px;
    width: 100%;
    height: auto; }
  @media screen and (max-width: 600px) {
    .concept-merit {
      margin-top: 1.5rem;
      padding: 0rem 8% 1rem; }
      .concept-merit img {
        max-width: 500px; } }

.concept01 {
  justify-content: space-between; }
  .concept01 .copy {
    width: 65%; }
    .concept01 .copy .midashi {
      text-align: left; }
    .concept01 .copy .lead {
      margin-top: 2rem; }
  .concept01 .img {
    width: 30%; }
  .concept01 .note {
    margin-top: 2rem;
    width: 100%; }
  @media screen and (max-width: 768px) {
    .concept01 .copy {
      width: 100%; }
      .concept01 .copy .midashi {
        text-align: center; }
    .concept01 .img {
      width: 100%;
      margin-top: 2rem;
      text-align: center; }
      .concept01 .img img {
        width: 90%;
        max-width: 400px; } }

.map01 {
  margin: auto;
  max-width: 860px; }

.map02 {
  margin: auto;
  max-width: 960px; }
  .map02 .note {
    text-align: right;
    margin-top: 1rem; }

.image-compare-copy {
  background: #807b7b;
  text-align: center;
  margin: auto;
  max-width: 960px;
  box-sizing: border-box;
  padding: 0.5rem 5%;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff; }

.concept00 {
  justify-content: space-between; }
  .concept00 .copy {
    width: 50%; }
    .concept00 .copy .midashi {
      text-align: left; }
    .concept00 .copy .lead {
      margin-top: 2rem; }
    .concept00 .copy .img {
      width: 100%;
      margin-top: 2rem; }
  .concept00 .photo {
    width: 45%;
    margin-top: 2rem; }
    .concept00 .photo .img:nth-child(1) {
      margin-bottom: 1rem; }
  .concept00 .note {
    margin-top: 2rem;
    width: 100%; }
  @media screen and (max-width: 768px) {
    .concept00 .copy {
      width: 100%; }
      .concept00 .copy .midashi {
        text-align: center; }
    .concept00 .photo {
      width: 100%;
      margin-top: 2rem;
      text-align: center; }
      .concept00 .photo img {
        width: 100%; } }

.concept02 {
  justify-content: space-between; }
  .concept02 .copy {
    width: 50%; }
    .concept02 .copy .midashi {
      text-align: left; }
    .concept02 .copy .lead {
      margin-top: 2rem; }
  .concept02 .img {
    width: 45%; }
  .concept02 .note {
    margin-top: 2rem;
    width: 100%; }
  @media screen and (max-width: 768px) {
    .concept02 .copy {
      width: 100%; }
      .concept02 .copy .midashi {
        text-align: center; }
    .concept02 .img {
      width: 100%;
      margin-top: 2rem;
      text-align: center; }
      .concept02 .img img {
        width: 100%;
        max-width: 500px; } }

.concept03 {
  justify-content: space-between; }
  .concept03 .copy {
    width: 35%;
    order: 2; }
    .concept03 .copy .midashi {
      text-align: left; }
    .concept03 .copy .lead {
      margin-top: 2rem; }
  .concept03 .img {
    width: 60%;
    order: 1; }
  @media screen and (max-width: 768px) {
    .concept03 .copy {
      width: 100%;
      order: 1; }
      .concept03 .copy .midashi {
        text-align: center; }
    .concept03 .img {
      width: 100%;
      margin-top: 2rem;
      text-align: center;
      order: 2; }
      .concept03 .img img {
        width: 100%;
        max-width: 500px; } }

.conce-list01,
.conce-list02 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem 0 0rem; }
  .conce-list01 li,
  .conce-list02 li {
    width: 23%;
    margin-top: 2rem; }
    .conce-list01 li.img .cercle,
    .conce-list02 li.img .cercle {
      position: absolute;
      z-index: 1;
      width: 40%;
      height: auto;
      max-width: 90px;
      top: 0;
      right: 0;
      transform: translateX(20%) translateY(-20%); }
  @media screen and (max-width: 768px) {
    .conce-list01 li,
    .conce-list02 li {
      width: 47%; } }

.conce-list03 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1rem 0 0rem;
  margin: auto;
  max-width: 800px; }
  .conce-list03 li {
    /**width: 18%;**/
    width: 31%;
    margin-top: 2rem; }
    .conce-list03 li.img .cercle {
      position: absolute;
      z-index: 1;
      width: 40%;
      height: auto;
      max-width: 90px;
      top: 0;
      right: 0;
      transform: translateX(20%) translateY(-20%); }
  @media screen and (max-width: 768px) {
    .conce-list03 li {
      width: 47%; } }

.concept04 {
  justify-content: space-between; }
  .concept04 .copy {
    width: 50%; }
    .concept04 .copy .midashi {
      text-align: left; }
    .concept04 .copy .lead {
      margin-top: 2rem; }
  .concept04 .img {
    width: 45%; }
  .concept04 .note {
    margin-top: 2rem;
    width: 100%; }
  @media screen and (max-width: 768px) {
    .concept04 .copy {
      width: 100%; }
      .concept04 .copy .midashi {
        text-align: center; }
    .concept04 .img {
      width: 100%;
      margin-top: 2rem;
      text-align: center; }
      .concept04 .img img {
        width: 100%;
        max-width: 500px; } }

.tav-map .note {
  text-align: right;
  margin-top: 1rem; }

/*タブ切り替え全体のスタイル*/
.tabs {
  margin: auto;
  margin-top: 0rem;
  width: 90%; }

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #595656;
  background-color: #eee;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #595656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease; }

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none; }

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding-top: 1rem;
  clear: both;
  overflow: hidden; }

/*選択されているタブのコンテンツのみを表示*/
#before:checked ~ #before_content,
#after:checked ~ #after_content {
  display: block; }

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #595656;
  color: #fff; }