@charset "UTF-8";
ol, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* -------------------------
　　　　　HEADER
  ------------------------ */
#Header {
  position: relative;
  transition: all 400ms; }

#Header .big_box {
	z-index: 0;
	height: 100vh;
}
/*pcスライドタイトル*/
@media only screen and (max-width: 896px) {
  #Header .big_box {
	height: auto;
 } }
#Header .big_box .overlay {
	display: block;
	height: 100vh;
	/*background-image: radial-gradient(rgba(71, 61, 51, 0.8) 20%, transparent 60%);*//*←PCのスライドを黒く網掛けする*/
	background-size: 3px 3px;
 }
/*スマホスライドタイトル*/
@media only screen and (max-width: 896px) {
#Header .big_box .overlay {
	height: auto;
} }
/*pc文字大*/
#Header .big_box .copy_container {
	position: absolute;
	top: 45%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align: center; 
	color: #fff;
	font-size:30px;
	font-weight: bold;
}
/*スマホ文字大*/
@media only screen and (max-width: 896px) {
#Header .big_box .copy_container {
	top: 41%;
	color: #fff;
	font-size:20px;
	font-weight: bold;
} }
/*pcsubタイトル*/
#Header .big_box .copy_container .copy {
	display: block;
	/*width: 567px;
	height: 45px;*/
	margin: 40px 20px 0px 20px;
	color: #fff;
	font-size:16px;
}

/*スマホスsubタイトル*/
@media only screen and (max-width: 896px) {
  #Header .big_box .copy_container .copy {
	width: 90%;
	height: auto;
	margin: 0 auto;
	color: #fff;
	margin: 40px 20px 0px 20px;
	font-size:14px;
 } }
/* -------------------------
　　　　　TOP
  ------------------------*/
.bx-wrapper {
	max-width: 2500px !important;
}

.bx-wrapper .bx-viewport {
  box-sizing: border-box;
  box-shadow: none;
  border: none; }

/* -------------------------
　　　　　Story
  ------------------------ */
* {
  box-sizing: border-box; }
/*--------------------------------
topのスライダー
--------------------------------*/
.mv_slider__list {
	width: 100%;
	height: 660px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#Header .big_box {
	height: 660px;
}

#Header .big_box .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 660px;
  z-index: 2; }

#Header .big_box .copy_container, #Header .big_box .scroll {
  z-index: 3; }

#Header .navigation_container {
  z-index: 9; }

.bx-wrapper .bx-viewport {
  left: 0; }

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
  bottom: -24px; }

.bx-wrapper .bx-pager.bx-default-pager a {
  width: 32px;
  height: 2px;
  border-radius: 0;
  background: #ece1d8;
  margin-left: 8px;
  margin-right: 8px; }

 .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
 background: #32281e;
}

@media only screen and (max-width: 896px) {
  #Header .big_box .copy_container {
    left: 0;
    right: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  #Header .big_box .copy_container .copy {
    width: 80%; }
  .mv_slider__list {
    height: 370px; }
  #Header .big_box {
    height: 370px; }
  #Header .big_box .overlay {
    height: 370px;
    background-image: none;
    /*background: rgba(71, 61, 51, 0.85);*//*←スマホのスライドを黒く網掛けする*/
}
  .bx-wrapper .bx-pager.bx-default-pager a {
    width: 30px;
    margin-left: 4px;
    margin-right: 4px;
} }
/*-------------------------------
メイン画像
-------------------------------*/
img.miniimage { display: none; }   /* ※1 */

/* ▼表示領域が896px以上の場合 */
@media (min-width: 896px) {
   img.miniimage { display: none; }  /* miniを非表示 */
   img.bigimage  { display: block; } /* bigを表示 */
}
/* ▼表示領域が896px未満の場合 */
@media (max-width: 895px) {
   img.miniimage { display: block; } /* miniを表示 */
   img.bigimage  { display: none; }  /* bigを非表示 */
}

.resizeimage img { width: 100%; }   /* ※2 */
/*-------------------------------
※1：メディアクエリの記述方法を解釈できないブラウザで、大小両方の画像が同時に表示されてしまうのを防ぐために、最初に mini.jpg側を非表示にする記述を加えています。
※2：画像サイズが表示領域（ブラウザのウインドウ幅や画面幅）に合わせて変化するように、画像の横幅を100％にしています。
-------------------------------*/

/* スマートフォン用CSS */
@media screen and (max-width: 1200px) {
/*-------------------------------
画面配置幅
-------------------------------*/
.frame1200 {
	width: 100%;	  /*全体の幅を指定する*/ 
	margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
	text-align: center;   /*全体を真ん中揃えにする。*/
}}
/* PC用CSS */
@media screen and (min-width: 1200px) {
/*-------------------------------
画面配置幅
-------------------------------*/
.frame1200 {
	width: 1200px;	  /*全体の幅を指定する*/ 
	margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
	text-align: center;   /*全体を真ん中揃えにする。*/
}}