@charset "utf-8";
/* CSS Document */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
margin: 0;
padding: 0;
font-size: 17px;
background-image: url(../img/bg.jpg);
background-repeat: repeat-x,repeat-y;
background-size: cover;
background-color: #ffffff;
color: #520909;

  font-family: "Noto Serif JP", sans-serif;
	

}

body::before {
background-image: url(../img/bg.jpg);
background-image:center;
content: "";
position:fixed;
top: 0;
left: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100vh;
}
@media screen and (min-width: 768px) {
body::before {
}}

#wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}

a {
color:#fff;
text-decoration:underline; /*下線*/
transition: color .3s; /*ふわっと変化*/
}
a:hover {
    text-decoration: none; 
	transition: color .3s; /*ふわっと変化*/
}


header {
	  background-attachment: fixed;
  background-size: 100vw;
  background-position: center;

}

footer {
	background-image: url(../img/foot_bg.png);
background-position: top;
color: #FFF;
}


html,body{
  height: 100%;/*高さを100%にして描画エリアをとる*/
}


img {
	max-width:100%;
	height: auto;/*高さ自動*/
}



/* 表示出し分け用 */
._sp {
  display: block; }
  @media screen and (min-width: 768px) {
    ._sp {
      display: none; } }

._pc {
  display: none; }
  @media screen and (min-width: 768px) {
    ._pc {
      display: block; } }

.title {
  text-align: center;
  padding: 0.5em;
 }
.title h1 {
font-size: 24px;
}

.main {
  text-align: center;
  padding: 1em 15em 1em 15em; /*距離　上　右　下　左*/
 }
@media screen and (max-width: 768px) {
.main {
  padding: 1em 0 1em 0; /*距離　上　右　下　左*/
}}
.main p{
  text-align: left;
 }
@media screen and (max-width: 768px) {
.main p{
  text-align: center;
 }} /*PCでは左、SPでは中央*/

/*KV*/
.kv {
  position: relative;

}
.kbg {
 width: 100%;
  height: auto;
  bottom: 0%;
z-index:1;
}

.shita {
  position: absolute;
  right: 0%;/*28%*/
  bottom: 0px;
 width: 100%;/*46%*/
}

.cha {
  position: absolute;
  right: 41.7%;
  bottom:12%;
 width: 16.5%;
}
.goro {
  position: absolute;
  left: 27%;
  bottom: 4%;
 width: 22%;
}
.kyo {
  position: absolute;
  right: 32.5%;
  bottom: 19%;
 width: 16%;
}
.yakumo {
  position: absolute;
  left: 32%;
  bottom: 43%;
 width: 19%;
}
.oto {
  position: absolute;
  right: 31%;
  bottom: 37%;
 width: 25%;
}
.to {
  position: absolute;
  right: 42%;
  top: 1%;
 width: 17%;
}
.ktop {
  position: absolute;
  left: 0%;
  bottom: 0%;
 width: 100%;

}
.logo {
  position: absolute;
  right: 40.5%;
  bottom: 16.8%;
 width: 20%;/*16%*/

}
.sw {
  position: absolute;
  left: 0%;
  top: 0%;
 width: 20%;
}


@media screen and (max-width: 768px) {
.shita {
  position: absolute;
  right: 0%;/*-7%*/
  bottom: 0px;
 width: 100%;/*116%*/
}
.cha {
  position: absolute;
  right: 27%;
  bottom: 13%;
 width: 45%;
}
.goro {
  position: absolute;
  left: -7%;
  bottom: 7%;
 width: 62%;
}
.kyo {
  position: absolute;
  right: 2%;
  bottom: 22%;
 width: 42%;
}
.yakumo {
  position: absolute;
  left: 13px;
  bottom: 43%;
 width: 49%;
}
.oto {
  position: absolute;
  right: 0px;
  bottom: 39%;
 width: 63%;
}
.to {
  position: absolute;
  right: 32%;
  top: 3%;
 width: 41%;
}
.ktop {
  position: absolute;
  left: 0%;
  bottom: 0%;
 width: 100%;

}

.sw {
  position: absolute;
  left: 0%;
  top: 0%;
 width: 35%;

} 
.logo {
  position: absolute;
  right: 32%; /*32*/
  bottom: 5.7%;
 width: 36.2%;

}

}
	  
	  
	  
	 
.kvtext {
  position: absolute;
  bottom: 0%;
  left: 49.4%;
  transform: translate(-50%, -50%);
}
.kv h1{
  text-align: center;
  color: #fff;
font-size: 2vw;
text-shadow: 0 0 10px red,0 0 15px red;
}
.kvtext2 {
  position: absolute;
  bottom: 35.5%;
  left: 49.1%;
  transform: translate(-50%, -50%);
}
.kv h2{
  text-align: center;
  color: #fff;
font-size: 1vw;
text-shadow: 0 0 10px red,0 0 15px red;
}

  @media screen and (max-width: 768px) {
.kvtext {
  bottom: -2%;
  left: 50%;
}

.kv h1{
font-size: 3vw;

}

.kvtext2 {
  bottom: 18%;
  left: 49.2%;
}

.kv h2{
font-size: 2.5vw;

}}




/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}




/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}



/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}


/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}


/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}




/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}


/** 3分割 ----------------------------------------------------------*/


div.product_middle {
  background-repeat: repeat-y;
	  width: 100%;
}
div.product_top, div.product_bottom {
  height: 55px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
div.product_top, div.product_bottom {
  height: 30px;
  }
}

/* 100 */
div.product div.product_top, div.product_100 div.product_bottom, div.product div.product_middle {
  width: 100%;
}
div.product div.product_top {
  background-image: url("../img/f_top.png");
	background-size: 100%;
}
div.product div.product_middle {
  background-image: url("../img/f_.png");
	background-size: 100%;
}
div.product div.product_bottom {
  background-image: url("../img/f_bottom.png");;
	background-size: 100%;
	background-position: bottom;	
}

.product
{margin-top: 50px;}
.product_text h2
{
color: #fff;
font-size: /*11pt*/0.9em;
margin-left: 20px;}
.product_text h3
{
color: #fff;
font-size: /*11pt*/1.2em;
margin-left: 20px;
margin-right: 20px;}

.sw_pr
{
font-size: 10pt;
margin-left: 20px;
margin-right: 20px;}

@media (max-width: 768px) {

.sw_pr{
font-size: 9pt;
}}

dl {
margin-top: 11px;
}
.sw_pr
	dt {
color: #e4c675;
margin-top: 4px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #e4c675;}
.sw_pr
dd {
color: #fff;
margin-top: 4px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #e4c675;
}

@media (min-width: 768px) {
.sw_pr
dl {
  display: flex;
  flex-wrap: wrap;
margin-top: 10px;}
.sw_pr
	dt {
  width: 30%;
color: #e4c675;
margin-top: 10px;
	padding-bottom: 10px;}
.sw_pr
dd {
width: 70%;
color: #fff;
margin-top: 10px;
	padding-bottom: 10px;
}

}


/*シェア*/
.sns_t {
width: 300px;
height: 150px;
background-image: url(../img/sns.png);
background-size: 100%;
margin: 30px auto;            /* 中央寄せ */
}
.sns_t p
{
padding-top: 15px; 
text-align: center;
color: #FFF;
font-size: 11pt;  }

.sns_t img {
margin: 25px 0 30px;
width: 70px;
height: auto;
padding: 2px 10px 7px 10px;
}

@media (max-width: 768px) {
.sns_t img {
margin: 10px 0;
width: 35px;
height: auto;
padding: 2px 5px ;
}
.product_text {text-align: center;
}

}


@media (max-width: 768px) {
.sns_t {
width: 160px;
height: 80px;

}}

@media (max-width: 768px) {
.sns_t p {
padding-top: 10px; 
font-size: 7pt;  }
}　




/*footer*/
.ftl {
margin-bottom:  0px;
	width: 100%;
}
.ftl img{

width: 100%;
}
.box {
	max-width: 768px;
    margin:  0 auto;            /* 中央寄せ */
}
@media (max-width: 768px) {
.box {
	width: 100%;
  }
}

.att {
	margin: 10px;
	font-size: 8pt;
}
@media (max-width: 768px) {
.att {
	margin: 20px;
	font-size: 6pt;
  }
}

.att p{
	font-size: 7pt;
}
@media (max-width: 768px) {
.att p{
	font-size: 5pt;
  }
}

.fotter_b
{
background-color: #000;
color: #fff;
margin-bottom: 0;
	font-size: 6pt;
}

.banner2 img
{
width: auto;
height: 30px;
margin: 17px 10px 7px 10px;}
@media (max-width: 768px) {
.banner2 img {
height: 16px;
margin: 7px 10px;}
}

.fotter_b p
{margin: 5px 10px;
padding-bottom: 10px;}

.table_link {
padding: 0 5em 0 5em;
}
div.link_t {
 border: 5px solid #555555;
 border-radius: 10px;
 display: inline-block;
 width: 100%;
 background-color:rgba(255,255,255,0.9);
}



/*foot banner*/
.banner {
  justify-content: space-between;
  width: 156px;
  margin: auto;
  height:  auto;
  border: 3px solid #000;
background-color: #000;
  color: #fff;
  text-decoration: none;
border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;

}

figure {
  width: 150px;
  height: 50px;
  margin: 0;
  overflow: hidden;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

figure img {
  width: 150px;
  height: 50px;
  transition: .4s;

}

a:hover figure img {
    transform: scale(1.3);

}

a:hover {
  text-decoration: underline;

}


.banner
dl {
}
.banner
dt {
color: #e4c675;
}
.banner
dd {
text-align: center;
color: #fff;
	margin: 5px;
}


.banner_list{
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap:         wrap;
padding: 20px;
}

@media (max-width: 768px) {
.banner_list{
  align-items: center;
  justify-content: center;

  }
}


.banner_list li
{list-style:none;
	margin-top: 10px;
}
.banner_list ul
{padding-left:0;
}



/*banner*/

.btn {  text-align: center;
}

.btn img{
	width: 200px;
}

.pc {
  display: inherit;
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: inherit;
  }
}





/*topジャンプ*/
/*リンクの形状*/
#page-top img{
width: 130px;}
@media (max-width: 768px) {
#page-top img{
width: 100px;}
}


/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 2%;
	bottom:2%;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}



/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.9s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(500px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.9s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(500px);
  }
}


/**/
.cs {
font-weight: bold;
letter-spacing: 0.3em; line-height: 1.5;
font-size: 2.4em;
font-family: "ヒラギノ明朝 ProN W3", "游明朝", YuMincho, "Hiragino Mincho ProN W3","noto serif CJK", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;/**/
text-shadow:1px 1px 1px #f5f0e3,0px 0px 5px #f5f0e3, 1px 1px 15px #f5f0e3;
  text-align: center;
  color: #fff;
}

@media only screen and (min-width: 580px) {
	.is-sp{
		display: none!important;
	}	}


.mini{
font-size: 80%;}



.footerlanguage {
  background: #441111;
  color: #fff;
  font-size: 90%;
  padding: 1em;
  text-align: center; }