@charset "utf-8";
/*--------------------------
CSS変数　カラー★
---------------------------*/

/*IEのみ、ブラウザ非対応の表示*/
.for_ie {
display: none;
}
@media all and (-ms-high-contrast: none) {
  /* ここに書く */
.for_ie {
display: block !important;
position: fixed;
background: #F5FCDE;
color: red;
top: 0;
left: 0;
width: 100%;
height: 300px;
padding: 50px 20px;
  }
}

:root {
  /*--main-color: #d7e9e9;*/
  --main-color: #000;
  --second-color: #E8E8E8;
  --third-color: #a0946c;
  --forth-color: #7099a5;
  --fifth-color: rgba(208, 189, 109, 1.00);
  /*--accent-color-one: radial-gradient(circle, rgba(120, 117, 89, 1) 0%, rgba(93, 89, 62, 1) 35%);
  --accent-color-one: #25757f;*/
  --accent-color-one: #16497c;
  /*--accent-color-two: radial-gradient(circle, rgba(202, 197, 161, 1) 0%, rgba(184, 178, 136, 1) 35%);
  --accent-color-two: #d98980;*/
  --accent-color-two: #651421;
  --font-family-mincho: 'Noto Serif JP', "A1明朝", 'A1 Mincho', serif;
  --font-size-honbun: 14px;
  --header-height: auto;
  --footer-height: 80px;
}

@media screen and (max-width: 1024px) {
  :root {
    --header-height: 55px;
  }
}


/*------------------
背景
------------*/

.bg-white {
  background: #FFF;
  color: #000;
}

.bg-slash {
  background: url("../img/cmn/bg-slash.png") repeat;
  background-size: 100%;
  /*padding-bottom: 100px;*/
  text-align: center;
  overflow: hidden;
}

.white-box {
  background: rgba(255, 255, 255, 1);
  color: #000;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
  padding: 50px;
}

.bg-brilliant {
  background: url("../img/cmn/bg-pattern.png");
  background-position: 50%;
  position: relative;
}

.bg-brilliant:after {
  content: '';
  background: var(--main-color);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.75;
}



/*--------------------------
共通で使用するテキスト
---------------------------*/

/*下層ページの紹介文に使用*/
.cmn-title01 {
  text-align: center;
  margin: 60px auto 30px;
  display: block;
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.4em;
  transform: scale(1, 0.83);
  font-family: 'Noto Serif JP', "A1明朝", 'A1 Mincho', serif;
}

.cmn-title01.main-lead {
  margin-top: 30px;
}

.cmn-title01 sup {
  font-size: 10px;
}

.cmn-text01 {
text-align: center !important;
font-size: 16px;
letter-spacing: .12em;
line-height: 2;
text-align: justify;
font-family: var(--font-family-mincho);
}

/*下層ページの各項目タイトルに使用*/
.cmn-title02 {
  font-size: 45px;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: 0.2em;
  margin: 0 0 1em 0;
  position: relative;
}

.cmn-title02-jap {
  font-size: 16px;
  margin-top: 15px;
}

.cmn-title02:after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  height: 1px;
  width: 120%;
  bottom: 0;
  left: 0;
}

/*本文に使用*/
.cmn-text02 {
  font-size: 16px;
  letter-spacing: .12em;
  line-height: 2;
  text-align: justify;
  font-family: var(--font-family-mincho);
}

/*サブコンテンツ内のタイトル*/
.cmn-title03 {
	font-size: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.7);
    margin-bottom: 10px;
	font-family: var(--font-family-mincho);
	border-bottom: 1px solid #999; 
	padding-bottom: 5px;
}

/*ボックスの中や補足説明的な文章に使用*/
.cmn-text03 {
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.8;
  text-align: justify;
  font-family: var(--font-family-mincho);
}

@media screen and (max-width: 768px) {
.cmn-title02 {
  font-size: 7vw;
  }
  .cmn-title02:after {
  width: 100%;
  }
  
}




@media screen and (max-width: 1200px) {
  .title01 {
    font-size: 2.5vw;
  }
  .cmn-text02 {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .title01 {
    font-size: calc(33vw / 750 * 100);
  }
  .cmn-text02 {
    font-size: calc(26vw / 750 * 100);
  }
}

body {
  font-family: Prompt, "Noto Sans JP", "ゴシックMB101 L", "Gothic MB101 Light", sans-serif;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'palt';
  color: #ffffff;
  font-weight: 200;
  background: var(--main-color);
}

.nohover:hover {
  opacity: 1!important;
}

.num {
  font-size: 1.2em;
  display: inline;
}

.font-accent {
  color: var(--accent-color-one);
}


/*------------------------------
SEO対策 h1 
	htmlの構造上、h1はページ上部に必ず入れること。
	cssで下部に移動させるため、.seoでページ全体を囲っている。
--------------------------------*/

.seo {
  display: flex;
  -ms-flex-direction: column;
  /*IE10*/
  -webkit-flex-direction: column;
  /*old webkit browser*/
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-bottom: 80px;
}

.seo * {
  min-height: 0%;
  /*IE11で変なpaddingが入らないように*/
}

h1.lead {
  padding: 10px 10px 20px;
  text-align: left;
  line-height: 1.8em;
  background: var(--accent-color-one);
  /*background:#222;*/
  font-size: 12px;
  order: 2;
  color: #FFF;
}

@media screen and (min-width: 769px) {
  .seo {
    margin: 0;
  }
  h1.lead {
    text-align: center;
    padding: 10px;
  }
}


/*------------------------
PC,TB,SP　★使い分け★
--------------------------*/

.tb-sp {
  display: block !important;
}

.sp-only {
  display: block !important;
}

.pc-tb {
  display: none !important;
}

.pc-only {
  display: none !important;
}

.tb-only {
  display: none !important;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1024px;
  display: block;
}

.wrapper1200 {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1200px;
}

.wrapper1400 {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  max-width: 1400px;
}

.graybg {
  background: #2f3131;
  width: 100%;
  margin: 0;
  height: auto;
  background-attachment: fixed;
}

.bgfloor {
  background: url(../img/cmn/bg_floor.png);
}

.relative {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  box-shadow: 4px 6px 15px -2px #999999;
}

figure {
  position: relative;
}

.small-caption {
font-size: 12px;
padding: 5px;
}
.figure-caption {
  position: absolute;
  color: #FFFFFF;
  /*background: rgba(0, 0, 0, 0.8);*/
  padding: 5px 7px;
  font-size: 12px;
  font-weight: normal;
  bottom: 0;
  left: 0;
  line-height: 1;
}

.figure-caption-right {
  left: auto;
  right: 0;
}

@media screen and (min-width:769px) {
  .tb-sp {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
  .pc-tb {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }
  .tb-only {
    direction: block !important;
  }
}

@media screen and (min-width:1025px) {
  .tb-sp {
    display: none !important;
  }
  .sp-only {
    display: none !important;
  }
  .pc-tb {
    display: block !important;
  }
  .pc-only {
    display: block !important;
  }
  .tb-only {
    display: none !important;
  }
}

header {
  position: fixed;
  width: 100%;
  background: var(--main-color);
  z-index: 98;
  top: 0;
  left: 0;
  height: var(--header-height);
}


/*@media screen and (max-width: 1024px) {
  header {
    height: var(--header-height);
  }
}*/

.gnavpc {
  display: none;
}

.hnavpc {
  display: none;
}

.logo {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 10px 0;
}

.logo img {
  width: 100%;
  height: auto;
}


/*------------------------------------
スマホフッター
--------------------------------------*/

.sp-footer {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  background: rgba(255, 255, 255, 0.95);
  padding-top: 5px;
  font-size: 9px;
  height: var(--footer-height);
}

.sp-footer li {
  width: 50%;
  margin: 2px;
  border: 1px solid #9A9FAF;
  text-align: center;
  padding: 5px;
  letter-spacing: 0;
  color: #9A9FAF;
}

.sp-footer li.reserve {
  border: 1px solid #A4A43D;
  color: #A4A43D;
}

.sp-footer span {
  display: block;
}

.sp-footer img {
  width: 50px;
  margin: auto;
}


/*------------------------
menu sp
--------------------------*/

.menu {
  height: 18px;
  position: absolute;
  right: 20px;
  top: 15px;
  width: 22px;
  z-index: 99;
  /*99*/
  cursor: pointer;
}

.menu__line {
  background: #999;
  display: block;
  height: 2px;
  position: absolute;
  transition: transform .3s;
  width: 100%;
}

.menu__line--center {
  top: 8px;
}

.menu__line--bottom {
  top: 16px;
}

.menu__line--top.active {
  top: 8px;
  background: var(--accent-color-one);
  transform: rotate(45deg);
}

.menu__line--center.active {
  top: 8px;
  transform: rotate(135deg);
  background: var(--accent-color-one);
}

.menu__line--bottom.active {
  top: 8px;
  transform: rotate(135deg);
  background: var(--accent-color-one);
}

@media screen and (min-width: 491px) and (max-width: 1024px) {
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: #FFF;
  }
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: white;
  }
}

@media screen and (min-width: 769px) {
  .logo {
    width: 300px;
  }
}

@media screen and (min-width: 1025px) {
  .menu {
    height: 18px;
    position: absolute;
    left: 20px;
    top: 15px;
    width: 18px;
    z-index: 99;
    text-align: left;
    display: none;
  }
  .menu.menu_appear {
    display: block;
  }
  .menu__line--top.active, .menu__line--center.active, .menu__line--bottom.active {
    background: white;
  }
}


/*------------------------
gnav sp
--------------------------*/

.gnav {
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 98;
  top: 0;
}

.gnav__wrap {
  align-items: center;
  height: calc(100% - 83px);
  position: absolute;
  width: 100%;
  padding-top: 52px;
  z-index: 2;
}

#menu-bar-area2 .menu-bar2 {
  background: #426E86;
  display: block;
}

.gnav__menu, .gnav__menu2 {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  margin: auto;
  justify-content: space-around;
  height: 65%;
  color: #000;
  background: #FFF;
}

.gnav__menu2 {
  height: 35%;
  background: #FFF;
  color: #000;
}

.gnav__menu__item {
  width: 50%;
  height: 25%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.gnav__menu .gnav__menu__item:first-child {
  width: 100%;
}

.gnav__menu2 .gnav__menu__item {
  height: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.gnav__menu__item a {
  padding: 8% 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: .5s;
  font-size: 4vw;
  height: 100%;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.gnav__menu__item a span {
  font-size: 0.8em;
}

@media screen and (min-width: 491px) {
  .gnav__wrap {
    height: 100%;
    overflow-y: scroll;
  }
  .gnav__wrap::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
  }
  .gnav {
    height: 100%;
    width: 200px;
    right: 0;
    left: auto;
  }
  .gnav__wrap {
    background: var(--main-color);
    padding-right: 10px;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .gnav__menu, .gnav__menu2 {
    display: block;
    height: auto;
    margin: 0;
    background: inherit;
  }
  .gnav__menu {
    margin-top: 35px;
  }
  .gnav__menu .gnav__menu__item, .gnav__menu2 .gnav__menu__item, .gnav__menu .gnav__menu__item:first-child {
    width: 90%;
    color: #FFF;
  }
  .gnav__menu2 {
    margin-top: 20px;
  }
  .gnav__menu2 .gnav__menu__item a, .gnav__menu .gnav__menu__item a {
    color: #FFF;
    align-items: flex-start;
    font-size: 13px;
    padding: 10px 0;
  }
  .gnav__menu .gnav__menu__item {
    border-bottom: 1px solid #999;
  }
  .gnav__menu2 .gnav__menu__item a {
    padding: 0;
  }
  .gnav__menu .gnav__menu__item:last-child a {
    border-bottom: none;
  }
  .gnav__menu2 .request, .gnav__menu2 .reserve {
    border: 1px solid #FFF;
    max-width: 100%;
    margin: auto;
    margin-bottom: 15px;
    height: 40px;
    /*background: var(--accent-color-one);*/
  }
  .gnav__menu2 .request, .gnav__menu2 .reserve {
    width: 100%;
    margin-top: 15px;
  }
  .gnav__menu2 .request a, .gnav__menu2 .reserve a {
    color: white;
    transition: .3s;
    align-items: center;
  }
  .gnav__menu2 .request:hover, .gnav__menu2 .reserve:hover {
    background: #CAC5A1;
  }
  /*白い部分*/
  .gnav__menu__item, .gnav__menu2 .gnav__menu__item {
    box-shadow: none;
  }
}


/*------------------------------------
PC版ナビゲーション
--------------------------------------*/

@media screen and (min-width: 1025px) {
  header {
    position: static;
  }
  .pcHeadWrapper {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    overflow: hidden;
    padding: 10px 0;
  }
  .logo {
    height: 100%;
    text-align: center;
    vertical-align: middle;
    float: left;
  }
  .menu-bar-area {
    display: none;
  }
  .menu-bar {
    position: relative;
    display: none;
  }
  .fixed_menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0px;
    transition: all .5s;
    z-index: 100;
    /*background: rgb(184, 178, 136);
    background: linear-gradient(130deg, rgba(184, 178, 136, 1) 0%, rgba(202, 197, 161, 1) 90%);*/
    background: var(--accent-color-one);
    height: 55px;
    width: 200px;
    margin-top: 0px;
    cursor: pointer;
  }
  .fixed_menu.active {
    background: #FFF;
  }
  .fixed_menu:after {
    content: "MENU";
    display: block;
    position: absolute;
    left: 50px;
    top: 17px;
    height: 15px;
    font-family: Georgia, 'Times Negnavw Roman', Times, 'serif';
    color: #fff;
  }
  .fixed_menu a.menu {
    width: 100%;
    height: 50px;
  }
  .menu__line {
    display: block;
    background: #FFF;
  }
  .fixed_menu .menu__line {
    display: block;
    max-width: 20px;
  }
  .hnavpc, .gnavpc {
    display: block;
  }
  .hnavpc a, .gnavpc a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
  }
  .hnavpc .arrow a {
    position: relative;
  }
  .hnavpc .arrow a:before {
    content: "";
    display: inline-block;
    padding-right: 7px;
    height: 8px;
    width: 8px;
    background: url(../img/cmn/icon-hnav-arrow.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 43%;
    left: 0px;
  }
  .hnavpc a {
    height: 35px;
  }
  .gnavpc a {
    margin-bottom: 15px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 200;
  }
  .hnavpc a {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .hnavpc {
    float: right;
    width: 600px;
    height: 100%;
  }
  .hnavpc__menu {
    display: flex;
    justify-content: flex-end;
  }
  .hnavpc__menu li {
    width: 70px;
  }
  .hnavpc__menu li i {
    margin-right: 3px;
  }
  .hnavpc__menu li:hover {
    opacity: 0.5;
  }
  .hnavpc__menu .request, .hnavpc__menu .reserve {
    margin-left: 10px;
    font-size: 13px;
    width: 140px;
    font-weight: normal;
    letter-spacing: 0.05em;
    opacity: 0.9;
    background: var(--accent-color-two);
    border-radius: 3px;
    /*border: 1px solid #B8B288;*/
  }
  .hnavpc__menu .request {
    background: var(--accent-color-one);
  }
  .gnavpc {
    clear: both;
    letter-spacing: 0.1em;
    margin-top: 10px;
    line-height: 1.4;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding-top: 15px;
  }
  .gnavpc__menu {
    width: 100%;
    max-width: 800px;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  .gnavpc__menu li {
    transiton: .5s;
    /* position:relative;
	 ｱﾝﾀﾞｰﾊﾞｰ出したいとき必須*/
    text-align: center;
    display: flex;
  }
  .gnavpc__menu li span {
    font-size: 0.8em;
    font-weight: 100;
  }
  .gnavpc__menu li:hover {
    color: #9D845D;
  }
}


/*------------------------------------
コンタクト
--------------------------------------*/

#contact h2 {
  padding-top: 25px;
  padding-bottom: 10px;
}

.contactArea {
  background-position: center;
  background-size: 100%;
  padding: 10px 0 20px;
  font-size: 2vw;
  /*border-top: 1px solid #BBB;*/
  width: 100%;
  /*max-width: 490px;*/
  text-align: center;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", serif;
  background: #EFEFEF;
  background: var(--main-color);
  z-index: 5;
}

.telArea {
  background: #f2f9cb;
  text-align: center;
  font-size: 1.5em;
  padding-top: 30px;
  padding-bottom: 50px;
  letter-spacing: 0;
}

.toiawase {
  font-size: 1.9em;
  letter-spacing: -0.02em;
  line-height: 1.6em;
}

.telArea h2 {
  font-size: 2.4em;
  margin-bottom: 15px;
  letter-spacing: 0.3em;
}

.tel {
  font-size: 4.5em;
  margin-top: 15px;
}

.teikyu {
  width: 350px;
  margin: auto;
  text-align: center;
}

.gclogo {
  width: 200px;
  margin: 25px auto;
}

.gccopy {
  font-size: 1.2em;
  margin-bottom: 0;
}

@media screen and (min-width: 491px) {
  .contactArea {
    font-size: 10px;
    /*max-width: 600px;*/
    margin-bottom: 0;
    padding-top: 20px;
    margin-top: 0;
  }
}


/*------------------------------------
ページトップ
--------------------------------------*/

div.tothetopfixed {
  display: none;
}

div.tothetopfixed img {
  widht: 48px;
  height: 40px;
}

@media screen and (min-width: 769px) {
  div.tothetopfixed {
    position: fixed;
    right: 5px;
    bottom: 3px;
    z-index: 90;
    width: 40px;
    text-align: right;
    margin-right: auto;
    margin-left: auto;
    display: inline;
  }
}

@media screen and (min-width:491px) {
  div.tothetopfixed {
    right: 15px;
    bottom: 30px;
  }
}


/* ------------------------
pagenavigation
------------------------ */

.pagenavigation-area {
  border-top: 1px solid #AAA;
  border-bottom: 1px solid #AAA;
  height: 137px;
  font-family: Georgia, 'Times New Roman', Times, 'serif';
  font-size: 19px;
  letter-spacing: 0;
  position: static;
}

.pagenavigation-area a {
  color: #999;
}

.pagenavigation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  position: relative;
}

.pagenavigation span {
  display: block;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", sans-serif;
  font-size: 13px;
  color: #DDD;
  margin-top: 10px;
}

.pagenavigation .tothetop, .pagenavigation .left, .pagenavigation .right {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: left;
}

.pagenavigation a {
  width: 100%;
  height: 100%;
}

.pagenavigation .btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 30%;
  align-items: center;
  height: 100%;
}

.pagenavigation .left .btn {
  flex-direction: row-reverse;
}

.pagenavigation li:hover {
  cursor: pointer;
}

.pagenavigation .tothetop, .pagenavigation .left, .pagenavigation .right {
  position: relative;
}

.pagenavigation .left::after {
  content: "";
  background: #AAA;
  width: 1px;
  height: 70%;
  display: block;
  position: absolute;
  top: 20px;
  bottom: 0;
  right: 0;
}

.pagenavigation .tothetop, .pagenavigation .right, .pagenavigation .left {
  position: relative;
  display: inline-block;
  color: #333;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.pagenavigation .tothetop {
  border-bottom: 1px solid #DDD;
}

.pagenavigation .tothetop:before, .pagenavigation .right:before, .pagenavigation .left:before {
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 8px;
  z-index: -1;
  content: '';
  background: url(../img/cmn/pagenavbg.png);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.5s;
  width: 95%;
  margin: auto;
}

.pagenavigation .left:before {
  transform-origin: left top;
}

.pagenavigation .right:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.pagenavigation .left:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}

.pagenavigation .tothetop:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}

.arrow-left, .arrow-right {
  transition: -webkit-transform 0s linear;
  transition: transform 1.3s ease;
  transition: transform 1.3s ease, -webkit-transform 1.3s ease;
}

.pagenavigation .left:hover .arrow-left {
  transition-delay: 0s;
  -webkit-transform: scale(1, 1) translateX(-70px);
  -ms-transform: scale(1, 1) translateX(-70px);
  transform: scale(1, 1) translateX(-70px);
}

.pagenavigation .right:hover .arrow-right {
  transition-delay: 0s;
  -webkit-transform: translateX(70px);
  -ms-transform: translateX(70px);
  transform: translateX(70px);
}

.pagenavigation .tothetop {
  display: none;
}

@media screen and (max-width: 768px) {
  .pagenavigation .btn {
    padding: 0 10%;
  }
  .pagenavigation .tothetop, .pagenavigation .left, .pagenavigation .right {
    height: 50%;
  }
  .pagenavigation {
    display: block;
  }
  .pagenavigation .left::after {
    display: none;
  }
  .pagenavigation .tothetop {
    display: inline-block;
  }
  .pagenavigation .left {
    display: none;
  }
}

.arrow-left, .arrow-right {
  transition: -webkit-transform 0s linear;
  transition: transform 1.3s ease;
  transition: transform 1.3s ease, -webkit-transform 1.3s ease;
}

.pagenavigation .left:hover .arrow-left {
  transition-delay: 0s;
  -webkit-transform: scale(1, 1) translateX(-70px);
  -ms-transform: scale(1, 1) translateX(-70px);
  transform: scale(1, 1) translateX(-70px);
}

.pagenavigation .right:hover .arrow-right {
  transition-delay: 0s;
  -webkit-transform: translateX(70px);
  -ms-transform: translateX(70px);
  transform: translateX(70px);
}

@media screen and (max-width: 768px) {
  .pagenavigation-area {
    height: 274px;
  }
  .pagenavigation {
    display: block;
  }
  .pagenavigation .left::after {
    display: none;
  }
  .pagenavigation .left {
    display: none;
  }
}


/*---------------------------
attention
-----------------------------*/

.attention-area {
  font-size: 11px;
  line-height: 1.8em;
  border-top: 1px solid #888;
  margin-top: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.attention-area ul li{
text-align: left;
}
.attention-area ul li:before{
content: "※";
}
@media screen and (min-width: 769px) {
  .attention-area {
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.attention-mv {
  font-size: 11px;
  line-height: 1.8em;
  width: 90%;
  margin: auto;
  margin-top: 10px;
}


/*---------------------------
バナー
-----------------------------*/

.bnr-big {
  width: 100%;
  max-width: 400px;
  margin: 30px auto;
}

.banner-area ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  margin-bottom: 40px;
  max-width: 800px;

}

.banner-area ul li {
  width: 48%;
}


/*---------------------------
仲介バナー
-----------------------------*/


/*---------------------------
来場・資料請求ボタン
-----------------------------*/

li.gnav__menu__item.request, li.gnav__menu__item.reserve {
  background: var(--accent-color-one);
  color: white;
  /*width: 100%;*/
}

li.gnav__menu__item.reserve {
  background: var(--accent-color-two);
}

.hnavpc__menu .request a, .hnavpc__menu .reserve a {
  color: #FFF;
  font-weight: lighter;
}

.footer-info {
  display: flex;
  justify-content: center;
  margin: auto;
}

.footer-info li {
  width: 30%;
  margin: 40px 10px 0;
}

.footer-info li a {
  display: block;
  font-size: 16px;
  padding: 20px;
  text-align: center;
  background: var(--accent-color-one);
  border-radius: 5px;
  color: white;
}

.footer-info li:last-child a {
  background: var(--accent-color-two);
}

@media screen and (max-width: 1024px) {
  .footer-info li {
    width: 50%;
    margin: 20px 5px 0;
  }
  .footer-info li a {
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .footer-info {
    flex-direction: column;
  }
  .footer-info li {
    width: 100%;
  }
}


/*--------------------------
SLICK サムネイル画像（要JSも修正）
---------------------------*/


.thumnail-gallery .slick-dots {
  position: static;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.thumnail-gallery .slick-dots figcaption {
display: none;
}

.thumnail-gallery .slick-dots li {
  position: static;
  display: inline-block;
  width: calc(100% / 5);
  height: auto;
  margin: 5px 2px;
  padding: 0;
  cursor: pointer;
}

.thumnail-gallery .slick-dots li:first-child {
  margin-left: 0;
}

.thumnail-gallery .slick-dots li:last-child {
  margin-right: 0;
}


/*--------------------------
SLICK 棒風・おしゃれに
---------------------------*/

.slide-line-dots .slick-dots {
  bottom: -50px;
}

.slide-line-dots .slick-dots li {
  margin: 0 4px;
  width: 70px;
  height: 5px;
}

.slide-line-dots .slick-dots li button:before {
  content: "";
  width: 70px;
  height: 10px;
  opacity: 1;
  z-index: 10;
  background: #C9D9D9;
}

.slide-line-dots .slick-dots li.slick-active button:before {
  background: var(--accent-color-one);
}

.slide-line-dots .slick-dots {
  text-align: left;
  bottom: -40px;
}

@media screen and (max-width: 768px) {
  .slide-line-dots .slick-dots li {
    margin: 0 2px;
    width: 50px;
  }
  .slide-line-dots .slick-dots li button:before {
    width: 50px;
  }
  .slide-line-dots .slick-dots {
    padding-left: 15px;
    bottom: -30px;
  }
}


/*--------------------------
SLICK キャプション
---------------------------*/

.inside-caption .slick-slider {
  position: relative;
}

.inside-caption .slick-slider .slide-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5018382352941176) 15%);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: .3s ease;
  text-align: right;
}

.inside-caption .slick-slider .slick-current .slide-caption {
  opacity: 1;
  transition-delay: .5s;
}

.inside-caption .slick-slider .slick-dots .slide-caption {
  display: none;
}

/*--------------------------
スクロールトリガー
---------------------------*/
.js-scroll-trigger {
  transform: translateY(50px);
  opacity: 0;
}

.js-scroll-trigger.is-active {
  opacity: 1;
  transition: 1.5s;
  transform: translateY(0);
  opacity: 1;
}

.js-scroll-trigger.is-active.slow {
  transition: 3s;
}

/*--------------------------
下層ページヘッダータイトル
---------------------------*/

.contents-header-title-area {
  padding-bottom: 45%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.contents-header-title-area .caption{
position: absolute;
right: 5px;
bottom: 5px;
  text-shadow: 0 0 4px rgb(0 0 0 / 80%);
  font-size: 12px;
}

.contents-header-title {
  position: absolute;
  top: 4vw;
  left: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 200;
  letter-spacing: 0.4em;
  line-height: 1em;
  text-shadow: 0 0 4px rgb(0 0 0 / 80%);
}

.contents-header-title span {
  display: inline-block;
  width: 2em;
  border-bottom: 1px solid #fff;
  margin-right: 0.5em;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 80%);
}

#plan-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-plan.jpg");
}

#develop-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-redev.jpg");
}

#access-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-access.jpg");
}

#mr-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-mr.jpg");
}

#location-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-location.jpg");
}
#design-container .contents-header-title-area {
  background-image: url("../img/cmn/mv-design.jpg");
}

@media screen and (max-width: 1024px) {
.contents-header-title-area {
  padding-bottom: 65%;
   }
   
   .contents-header-title {
   font-size: 22px;
   }
  
  #plan-container, #develop-container, #access-container, #mr-container, #location-container,#design-container {
    margin-top: var(--header-height);
  }
}






.contents-link {
  display: flex;
  margin-top: 50px;
}

.contents-link li {
  position: relative;
  background-size: cover;
  width: 50%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  font-family: 'Noto Serif JP', "A1明朝", 'A1 Mincho', serif;
  text-align: center;
  line-height: 1.4em;
  font-size: 26px;
}

.contents-link li:hover:before {
  filter: brightness(0.9);
  cursor: pointer;
}

.contents-link li:before {
  content: "";
  position: absolute;
  background: inherit;
  width: 100%;
  height: 100%;
  filter: brightness(0.56);
  z-index: -1;
}

.contents-link li p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.contents-link p:after {
  content: "";
  background: url("../img/cmn/contents-arrow.png") no-repeat;
  background-size: contain;
  width: 80px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
}

.contents-arrow {
  width: 100px;
  height: auto;
}


/*再開発*/

.link-redev-01 {
  background-image: url("../img/redev/contents-link-01.jpg");
}

.link-redev-02 {
  background-image: url("../img/redev/contents-link-02.jpg");
}


/*アクセス*/

.link-access-01 {
  background-image: url("../img/assetment/access-04-mono.jpg");
}

.link-access-02 {
  background-image: url("../img/assetment/reedev-02-pier.jpg");
}

.link-access-03 {
  background-image: url("../img/assetment/access-01-plain.jpg");
}

.category-title {
  border-bottom: 1px solid #E8E8E8;
  margin: 0 auto 50px;
}