@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: 0.95em;
	
background-image: url(../img/bg_0.jpg);
background-image:center;

color: #520909;
font-family: "Noto Serif JP", sans-serif;
}
/**/
body::before {
/*background-image: url(../img/bg_0.jpg);
background-image:center;*/
	background: linear-gradient(0deg,#000, transparent);/*990000*/
content: "";
position:fixed;
top: 0;
left: 0;
z-index: -10;
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; } }



.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;
}

.ktop {
  position: absolute;
  left: 0%;
  bottom: 0%;
 width: 100%;

}
.logo {
  position: absolute;
  right: 43.5%;
  bottom: 40%;
 width: 15%;/*16%*/

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


@media screen and (max-width: 768px) {
.ktop {
  position: absolute;
  left: 0%;
  bottom: 0%;
 width: 100%;

}

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

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

}

}
	  
.so {
	background: linear-gradient(45deg,transparent,#b80000, transparent);
padding: 1em 0.8em; /*background:#990000;*/}

.cho{
	transform: scale(0.9, 1);
	letter-spacing: 0.03em;
	margin: 0.2em;
}
  
	 
.kvtext {
  position: absolute;
  bottom: 4%;
  left: 49.4%;
  transform: translate(-50%, -50%);
}
.kv h1{
	text-align: center;
	color: #fff;
	font-size: 1.8em;
	letter-spacing: 0.15em;
	text-shadow: 0 0 10px #6daa98,0 0 15px #6daa98;
}

.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: 10%;
  left: 50%;
}
	  .cho{font-size: 1.2em;}
}




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

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

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.9s;
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:1.8s;
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:1.8s;
  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;
}







/** ----------------------------------------------------------*/


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 margin-left: 20px;*/0.9em;
}
.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;
	text-align: left;
}

@media (max-width: 768px) {

.sw_pr{
font-size: 9pt;
		text-align: center;
}}

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

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

}




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

width: 100%;
}
.box {
	max-width: 860px;
    margin:  0 auto;            /* 中央寄せ */
	text-align: center;
}
.box p {color: #ccc;
	font-size: .8em;
}
@media (max-width: 768px) {
.box {
	width: 100%;
	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: #585858;	/*656b69 3f4342*/	
color: #fff;
margin-bottom: 0;
	font-size: 8pt;
}

.banner2 img
{
width: auto;
height: 40px;
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: 100px;
 filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.9));
}
@media (max-width: 768px) {
#page-top img{
width: 60px;}
}


/*リンクを右下に固定*/
#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(300px);
  }
  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(300px);
  }
}


/**/
.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;
	}	}

@media screen and (max-width:768px){
	.is-pc{
		display: none!important;
	}
}

.mini{
font-size: 80%;}



.footerlanguage {/*border-bottom: 1px solid #a52a2a;*/
	background: #990000;
	color: #fff;
	font-size: 90%;
	padding: 1em;
	z-index: 10;
	text-align: center; }

.title_te {
  text-align: center;
  padding: 0.5em;
 }
.title_te h1 {
font-size: 2.4em;
color: #b80000;
transform: scale(0.9, 1);
}

/* 外枠の定義 */
.image-container {
  position: relative; /* 子要素の基準位置になる */
  display: inline-block; /* 画像のサイズに幅を合わせる */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block; /* 画像下の余白（隙間）を消す */
}

/* 上に載せるテキストの定義 */
.text-overlay {
  position: absolute;
  top: 50%;           /* 上から50%の位置 */
  left: 50%;          /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 真ん中に中央揃え */
  
  color: #ffffff;     /* 文字色 */
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* 視認性を高める文字影 */
}

.ns_point{color: #ccc;
	font-size:1.2em;
	background-image: url(../img/bg.jpg);
}
.ns_point02{
	color: #ccc;
	background-image: url(../img/bg.jpg);
	padding: 1em 0.8em;
}


.ns_point h1{  
font-weight: bold;
line-height: 1.2;
font-size: /*11ptcolor: #6daa98;b80000*/1.8em;
}



.color_r{color: #dc0013;}

.color_g{color: #6daa98;}
.color_w{color: #fff;}