@charset "utf-8";
/* CSS Document */


#all {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}



@media screen and (min-device-width: 480px) {
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-device-width: 480px) {
  .br-pc { display:none; }
  .br-sp { display:block; }
}


/* パソコンで見たときは"pc"のclassがついたp画像が表示される */
.pc {  margin:0 auto; display:block !important;}
.sp { display: none !important;}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media screen and (max-width: 640px) {
.pc { display: none !important;}
.sp { display: block !important;}}


/* ---------- HEAD------------ */

.title {
 margin: 0 auto;
}



p.title {
  color: #fff;
  font-size: 43px;
  margin: 20px;
}




.date{
  color: #bdac6f;
  margin: 30px;
  font-size: 30px;
}




.setsumei {
  background: #711e13;
  text-align: center;
  padding: 5%;
}



.price {
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  line-height: 2em;
}




p.bun {
  color: #fff;
  font-size: 23px;
  line-height: 2em;
}






/* --- 全体のBOX定義 -------------------------- */
.head {
  position   : relative;
  max-width  : 940px;
  height     : 486px;
  margin     : auto;
  overflow   : hidden;
  text-align: center;
}

/* --- 背景の指定 -------------- */
.head .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 12s infinite;   /* 4画像 × 各3s = 12s */
}

/* --- 段差で背景画像のアニメーションを実行----- */
.head .src1 {
  background-image : url(img/back3.jpg);
  background-size: 100%;
}
.head .src2 {
  background-image : url(img/back2.jpg);
  background-size: 100%;
  animation-delay  : 3s;
}
.head .src3 {
  background-image : url(img/back1.jpg);
  background-size: 100%;
  animation-delay  : 6s;
}
.head .src4 {
  background-image : url(img/back4.jpg);
  background-size: 100%;
  animation-delay  : 9s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

.moji{
  position   : relative;
  display    : block;

}

.moji img{
  padding: 100px;
}
/* ----------ICHIREI--- */


.ichirei{
  background: linear-gradient(#711e13,#ae301f,#ae301f,#ae301f,#ae301f,#ae301f,#711e13);
  text-align: center;
  padding: 50px;
}

.xxx {
  width: 669px;
  display: table;
  background: #711e13;
  padding: 19px;
  margin: 20px auto 30px auto;
  vertical-align: middle;
}

figure {
  vertical-align: middle;
}

.eximg {
  width: 35%;
  float: left;
}



.detail {
  color: #fff;
  font-size: 24px;
  padding-top: 3%;
}


p .detail{
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}




.clear{
  clear: both;
}



/* -----MOUSHIKOMI---- */


.moushikomi {
  background: #711e13;
  text-align: center;
  padding: 30px;
}



.number {
  width: 669px;
  color: #bdac6f;
  font-size: 25px;
  margin: 10px auto 10px auto;
}




figure.mo {
  padding: 50px;
  margin: 0 auto 10px auto;
}



.mo img {
  text-align: center;
  width: 85%;

}

.gold {
  font-weight: bold;
  color:#bdac6f;
  
}

figcaption {
  width: 669px;
  color: #fff;
  font-size: 17px;
  text-align: left;
  margin: 0 auto;
  text-align: justify;
}

.caution {
  color: #f4d926;
  font-size: 17px;
  text-align: left;
  margin: 0 auto;
  text-align: justify;
}



hr {
  margin: 0 auto;
  width: 669px;
  height: 1px;
  background-color: #c1a7a4;
  border:none;
}


/* -----------CHUI--------- */



.chui {
  background: linear-gradient(#711e13,#ae301f);
  text-align: left;
  padding: 50px 110px 110px 110px;
  color: #fff;
  font-size: 17px;
}


.list {
  width: 669px;
  padding: 30px;
  border: solid 1px #bdac6f;
}



.c_title {
  color: #bdac6f;
  font-weight:bold;
  font-size: 20px;
  margin-top: 8px;
}



.c_sub {
  color: #ffff;
  font-weight:bold;
  font-size: 18px;
}



.li {
  line-height:1.5em;
}





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

/* -----------HEAD----- */
.title {
  margin: 0 auto;
}



p.title {
  color: #fff;
  font-size: 28px;
  margin: 0 15px;
}




.date{
  color: #bdac6f;
  margin: 5px;
  font-size: 17px;
}




.setsumei {
  background: #711e13;
  text-align: center;
  padding: 5%;
}



.price {
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  line-height: 2em;
}




p.bun {
  color: #fff;
  font-size: 15px;
  line-height: 2em;
}



/* ---------背景切り替わり設定--------- */


/* --- 全体のBOX定義 ------------------------ */
.head {
  position   : relative;
  width  : 100%;
  height: auto;
  margin     : auto;
  overflow   : hidden;
  text-align: center;
}

/* --- 背景の指定 -------------------- */
.head .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 12s infinite;   /* 4画像 × 各3s = 12s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.head .src1 {
  background-image : url(img/back3_sp.jpg);
  background-size: 100%;
}
.head .src2 {
  background-image : url(img/back2_sp.jpg);
  background-size: 100%;
  animation-delay  : 3s;
}
.head .src3 {
  background-image : url(img/back1_sp.jpg);
  background-size: 100%;
  animation-delay  : 6s;
}
.head .src4 {
  background-image : url(img/back4_sp.jpg);
  background-size: 100%;
  animation-delay  : 9s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 1; }
 100% { opacity: 0; }
}

.moji{
  position   : relative;
  display    : block;
}

.moji img{
  width: 80%;
  padding: 90px 0 90px 0;
}

/* -----------ICHIREI------------ */


.ichirei{
  background: linear-gradient(#711e13,#ae301f,#ae301f,#ae301f,#ae301f,#ae301f,#711e13);
  text-align: center;
  padding: 10px;
  margin: 0 auto;
}

.xxx {
  width:88%;
  display: table;
  background: #711e13;
  padding: 7px;
  margin: 10px auto 20px auto;
  vertical-align: middle;
}

figure {
  vertical-align: middle;
}

.eximg {
  width: 100%;
}



.detail {
  color: #fff;
  font-size: 16px;
  padding-bottom: 5px;
}


p .detail{
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}




.clear{
  clear: both;
}



/* ---------MOUSHIKOMI---------- */


.moushikomi {
  background: #711e13;
  text-align: center;
  padding: 10px;
}



.number {
  width: 100%;
  color: #bdac6f;
  font-size: 25px;
  margin: 10px auto 10px auto;
}




figure.mo {
  padding: 10px;
  margin: 0 auto 10px auto;
}



.mo img {
  text-align: center;
  width: 100%;

}

.gold {
  font-size: 18px;
  font-weight: bold;
  color:#bdac6f; 
}

figcaption {
  width: 100%;
  color: #fff;
  font-size: 15px;
  text-align: left;
  margin: 0 auto;
  text-align: justify;
}


hr {
  margin: 0 auto;
  width: 90%;
  height: 1px;
  background-color: #c1a7a4;
  border:none;
}



.caution {
  color: #f4d926;
  font-size: 15px;
  text-align: left;
  margin: 0 auto;
  text-align: justify;
}


/* ---------CHUI--------- */



.chui {
  text-align: left;
  padding: 10px 10px 30px 10px;
  color: #fff;
  font-size: 14px;
}


.list {
  width: 90%;
  padding: 10px;
 margin: 0 auto;
  border: solid 1px #bdac6f;
}



.c_title {
  color: #bdac6f;
  font-weight:bold;
  font-size: 20px;
  margin-top: 8px;
}



.c_sub {
  color: #fff;
  font-weight:bold;
  font-size: 16px;
}



article li {
 color: #fff;
 line-height: 1.5em;
}

}