@charset "utf-8";
#all {
    width: 105%;
    font-family:  "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック", "MS P Gothic",Verdana,Arial, Helvetica, sans-serif;
    background-color: #000000;
    color: #FFFFFF;	
	overflow: hidden;
	margin-top: -8px;
	margin-left: -8px;
}

.wrap {
     overflow: hidden;
 }

#all header {
    background-color: #000000;
    text-align: center;
    z-index: 9998;
}

#all a{
	text-decoration: none;
	color: #FFFFFF;
}

img[src="../img/footerlogo.png"] {
  max-width: 200px;
}



/* pc　768px以上 */
@media only screen and (min-width: 768px), print {
  header img{
    margin-top: 30px;
  }
}

/*ヘッダーの高さの分下を下げる*/
#contents{
   margin-top:-40px;/*headerの高さが100pxの場合*/
   padding-top:40px;
}


@media screen and (max-width: 767px){
footer {
	height: 180vw;
    color: #fff;
    background: url(../img/footersp.gif) no-repeat center top;
    background-size: cover;
    line-height: 1.6;
}
}

@media screen and (max-width: 767px){
footer .flogo {
    width: 200px;
    margin-bottom: 30px;
}
}


@media screen and (min-width: 768px), print{
footer {
    width: 100%;
    min-width: 768px;
    height: 1000px;
    color: #fff;
    background: url(../img/footerpc.gif) no-repeat center top;
    padding: 120px 0 40px;
    line-height: 1.6;
}
}


@media screen and (min-width: 656px), print{
footer .footer-Box {
    width: 100%;
	maX-width: 1000px;
    margin: 0 auto;
    font-size: 0.875em;
}
}

@media screen and (min-width: 656px), print{
footer .f-link-Box {
    width: 650px;
    float: left;
}
}

@media screen and (min-width: 656px), print{
footer .f-link-Box .f-home-link {
    margin-bottom: 30px;
    letter-spacing: 1px;
}
	}



@media screen and (min-width: 656px), print{
footer .f-link-l {
    float: left;
    width: 150px;
    margin-right: 20px;
}
}


@media screen and (min-width: 656px), print{
footer .f-link-Box .parent {
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
	list-style: none;
}
}

@media screen and (min-width: 656px), print{
footer .f-link-Box .child {
    font-size: 14px;
    letter-spacing: 1.5px;
}
}


@media screen and (min-width: 656px), print{
footer .f-link-c {
    float: left;
    width: 150px;
    margin-right: 40px;
}
}

@media screen and (min-width: 656px), print{
footer .f-link-r {
    float: left;
    width: 150px;
}
}

@media screen and (min-width: 656px), print{
footer .f-con-Box {
    width: 280px;
    float: left;
    padding-top: 60px;
    letter-spacing: 1.8px;
	margin-left: 30px;
}
}

@media screen and (min-width: 656px), print{
footer .f-con-Box .list1 {
    float: left;
    margin-right: 20px;
}	
}	
	

	
h3 {
    text-align: center;
    font-size: x-large;
    font-weight: 700;
    font-family: 'Arial Black','Arial Rounded MT Bold','Avenir-Black',sans-serif;
}

body main table , td{
    border: none;
    font-family: alfa-slab-one;
    font-weight: 400;
}



@media only screen and (max-width: 999px){
  img{
    width: 100%;
    height: auto;
	vertical-align: bottom;
  }
}
/* pc　768px以上 */
@media only screen and (min-width: 1000px), print {
  img{
    width: auto;
    height: auto;
	vertical-align: bottom;
  }
}

/*========================
　smartphone　bottom menu
　========================*/


.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:70px;/*高さ*/
    margin:0;
    padding:0;
    background-color:#000000;/*背景色*/

    border-top:2px solid #808080;/*バーの上の線*/
    border-bottom:2px solid #808080;/*バーの下の線*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:25%;
	color: #9C1517;/*アイコン＆文字の色*/
    background-color:#000000;/*背景色*/
    list-style-type:none;
    text-align:center;
	padding-top: 10px;
    padding-bottom: 5px;
    line-height: 10px;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
	color: #9C1517;/*アイコン＆文字の色*/
	padding-bottom: 5px;
    line-height: 10px;
    text-decoration: none;
}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}


/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*展開メニューの文字サイズ*/
        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;}

/*PC表示の際はボトムメニューは表示しない*/
@media(min-width: 768px){
    .bottom-menu{display:none; }
}

/*スマホの時だけ*/
@media(max-width: 767px){ 

/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{
    margin-bottom: 100px;
    width: 100%;
}
}
    
/*スマホ以外*/
/*上部メニュー固定の時の内部リンクのズレ解消*/
@media(min-width: 768px){
@-webkit-keyframes modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}
:target {
    -webkit-animation: modify 0.1s;
    animation: modify 0.1s;}
}

/*スマホ以外→終わり*/ 

/*=== article window ===*/
.article-area{
    background-image: url(../img/ita1.jpg);
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 0px;
    text-align: center;
}
.article-box{
    box-sizing:border-box;
    width:30%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover; 
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}

/*=== smartphone １列表示 ===*/
@media(max-width: 767px){
.article-container {
    width: 100%;
    flex-direction:column;/*縦に表示*/
    justify-content:center;
    padding:10px;}
.article-box {
    width: 100%;
    padding:0px;
    margin:5px 0;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/
	/*フッターのおすすめ用*/
	
/*ここから会社概要の名前のデザイン*/	
h2 {
    position: relative;
    padding: 0.5em;
    background-color: #969491;
    color: white;
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
	}
/*会社概要のデザイン*/

/*ここから概要詳細のデザイン*/

.tbl-r02 th {
    background-color: #2F3336;
    border: solid 1px #ccc;
    color: #fff;
    padding: 10px;
	
}
.tbl-r02 td {
　border: solid 1px #ccc;
  padding: 10px;
}

.tbl-r02 td a{
    color: #000000;
    text-decoration: none;　
    font-size: 12px;
} 
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/*ここまで概要のテーブルデザイン*/

/*ここから採用のデザイン*/

.cp_table *, .cp_table *:before, .cp_table *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_table {
    width: 100%;
    border-collapse: collapse;
}
.cp_table th, .cp_table  td {
    padding: 10px;
    border: 1px solid #dddddd;
}
.cp_table th {
	width: 30%;
	text-align: left;
	background: #f4f4f4;
}
@media only screen and (max-width:480px) {
	.cp_table {
		margin: 0;
	}
	.cp_table th, .cp_table td {
		width: 100%;
		display: block;
		border-top: none;
	}
	.cp_table tr:first-child th {
		border-top: 1px solid #dddddd;
	}
}
/*ここまで採用のデザイン*/
/*採用の小見出し*/
h4 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h4:before, h4:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px white;
  border-bottom: solid 1px white;
}

h4:before {
  left:0;
}
h4:after {
  right: 0;
}
/*ここまで採用の小見出し*/

/*採用の吹き出し*/
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/************************************
** 2カラムギャラリーデザイン （レスポンシブ）
************************************/

/* 親要素 */
.gallery2 {
	display: table;
	width:100%;
	margin-bottom: 30px;
 	margin: 0 auto;
 	border-collapse: separate;  
 	border-spacing: 8px 0; 
}

/* 左右ボックス */
.gallery2 .collist-box {
   display: table-cell;
   width: 50%;
	padding-left: 5px;
   padding-right: 5px;
}


/* ボックス枠 */
.gallery2 .waku {
	border: 1px solid #aaa;
	border-radius: 4px;
}

.gallery2 .collist-thumb {
   width: 100%;
   height: auto;
	text-align:center;
	margin-top:5px;
}


/* テキスト部分 */
.gallery2 .collist-text {
   display: block;
   font-weight: 600;	
   font-size: 10px;
	margin:10px 8px;
	text-align:center;
} 


.gallery2 .collist-text a {
    color: #000000;
    text-decoration: none;
}

/* lineup太字テキスト部分 */
.gallery2 .collist-text1 {
    display: block;
    font-weight: 600;	
    font-size: 20px;
    padding-right: 20px;
    padding-top: 20px;
} 

.gallery2 .collist-text1 a {
    color: #000000;
    text-decoration: none;
}

/*ここまで2カラムデザイン*/
/*黒のラインに白字の見出し*/
h5 {
    background-color: #000507;/*背景色*/
	padding: 0.5 }
h5 a{
    color: #FFFFFF;
    text-decoration: none;
}
/*ここまで黒ラインに白字*/

/*写真と写真に隙間*/
div.sukima img {
margin: 2px 2px 2px 2px;
}


/*画像の上に画像と文字*/
.kasane {
  position: relative;
  }

.kasane p {/*pタグを画像の真ん中に*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
  color: white;/*文字色*/
  font-size: 15px;/*文字サイズ*/
  text-align:center;/*pタグ内で更に中央寄せ*/
  font-family: 'Quicksand',sans-serif;
  }

.kasane p img {/*アイコンに対して*/
  display:block;/*前後に改行*/
  padding-bottom:10px;/*文字との隙間*/
  color: rgba(255, 255, 255, 0.6);/*半透明*/
  }

.kasane img {
  width: 100%;
  }
/*画像の上に画像と文字ここまで*/
/*背景画像　板*/
.ita1 {
    background-image: url(../img/ita1.jpg)
}

/*waveの中の下向き吹き出しモノトーン*/
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.balloon2 p {
  margin: 0;
  padding: 0;
}
/*waveの中の下向き吹き出しモノトーンここまで*/

/*スマホイベントTOP用ここから*/
/************************************
** 2カラムデザイン（レスポンシブ）
************************************/

/* 親要素 */
.collist2 {
	overflow: hidden;
}

/* 左右ボックス */
.collist2 .collist-box {
   float: left;
   width: 48%;
   margin-bottom: 30px;
}

.collist2 .collist-box:first-child {
	margin-right:6px;
}



/* ボックス枠 */
.collist2 .waku {
	border: 1px solid #aaa;
	border-radius: 4px;
}


/* 左画像 */
.collist2 .collist-thumb {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 10px;	
	 margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;

}



/* テキスト部分 */
.collist2 .collist-text {
    display: block;
    font-weight: 600;	
    font-size: 14px;
    padding-right: 20px;
    padding-top: 20px;
} 

/* テキスト部分リンク */
.collist2 .collist-text a {
    color: #000000;    
} 


/* スマホ調整 */
@media screen and (max-width: 767px) {
.collist2 .collist-box {
    float: left;
    width: 98%;
    margin-bottom: 30px;
	
}
}
/*topイベントここまで*/	


.haikei1{
    background-color: #D2D2CF;
}

/*スマホのみ電話をリンクにする↓*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/*一覧の検索ボタン*/
.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #9C1517;
  border: solid 2px #9C1517;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #9C1517;
  color: white;
}

/*PCとスマホ表示を変える場合*/
.pc-dsp { display:block; }
.sp-dsp { display:none; }

@media only screen and (max-width : 1214px ){
.pc-dsp { display:none; }
.sp-dsp { display:block; }
}

.img_yohaku {
    margin-top: 40px;
}

/*スマホまたはPCだけ改行*/
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

.syujin{
    color: #47ABF7;
}

.okusama{
    color: #FA6853;
}

.cap{
    color: #6C6868;
    font-size: small;
}

.voicemidashi{
    font-size: large;
    font-style: oblique;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 800;
}

.ryosoroe{
	text-align: justify; /* 両端揃え */
   text-justify: inter-ideograph; /* 両端揃えの種類 */
}

/*スマホTOPボイス用ここから*/
/************************************
** 2カラムデザイン（レスポンシブ）
************************************/

/* 親要素 */
.collist9 {
	overflow: hidden;
}

/* 左右ボックス */
.collist9 .collist-box9 {
   float: left;
   width: 48%;
   margin-bottom: 30px;
}

.collist9 .collist-box9:first-child {
	margin-right:6px;
}



/* ボックス枠 */
.collist9 .waku9 {
	border: 1px solid #aaa;
	border-radius: 4px;
}


/* 左画像 */
.collist9 .collist-thumb9 {
    float: left;
　　width: 180px;
    height: 130px;
    margin-right: 10px;	
	 margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;

}



/* テキスト部分 */
.collist9 .collist-text9 {
    display: block;
    font-weight: 250;	
    font-size: 12px;
    padding-right: 20px;
    padding-top: 20px;
} 

/* テキスト部分リンク */
.collist9 .collist-text9 a {
    color: #000000;    
} 


/* スマホ調整 */
@media screen and (max-width: 767px) {
.collist9 .collist-box9 {
    float: left;
    width: 98%;
    margin-bottom: 30px;
	
}
}
/*topボイスここまで*/	


/*スマホ2列他5列*/
.g-nav {
  margin: 0 0 10px;
  padding: 0;
  list-style-type: none;
}
/*clearfix*/
.g-nav:after {
  content: "";
  clear: both;
  display: block;
}
.g-nav li {
  float: left;
  width: 50%;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.g-nav a {
    display: block;
    line-height: 44px;
    margin-top: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #000;
    text-decoration: none;
}
.g-nav a:hover {
  color: #000;
  background: #e6e6e6;
}



/*こだわり検索の見出し用*/
.heading07 {
	position: relative;
	padding-top: 20px;
	padding-left: 30px;
	font-size: 26px;
}

.heading07 span {
	position: relative;
	z-index: 2;
}

.heading07::before {
    content: attr(data-en);
    position: absolute;
    transform: rotate(-5deg);
    top: -5px;
    left: 0;
    color: #777779;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-family: arizonia;	
}

/*ここまで*/


/* 商品ページの両端余白の両揃え */
@media screen and (max-width: 1049px) {
.ryosoroe1{
    text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph; /* 両端揃えの種類 */
    margin-left: 35px;
    margin-right: 35px;
}
}

@media screen and (min-width: 1050px) {
	.ryosoroe1 {
     text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph; /* 両端揃えの種類 */
    margin-left: 200px;
    margin-right: 200px;
}
}

/*snsボタン*/


/* ボタン全体 */
.flowbtn17{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
background-color:#444;
color:#fff;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn17:hover{
text-decoration:none;
}
/* アイコンをど真ん中に */
.flowbtn17 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitterマウスホバー時 */
.flowbtn17.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn17.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Facebookマウスホバー時 */
.flowbtn17.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedlyマウスホバー時 */
.flowbtn17.fl_fd2:hover{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocketマウスホバー時 */
.flowbtn17.fl_pk2:hover{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
/* はてブアイコンのサイズ */
.flowbtn17.fl_hb2{
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn17.fl_hb2:hover{
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTubeマウスホバー時 */
.flowbtn17.fl_yu2:hover{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn17.fl_li2:hover{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn17.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* ulタグの内側余白を０にする */
p.snsbtniti2{
padding:0!important;
list-style-type:none!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 a{
flex:0 0 48%;
text-align:center !important;
}




/*線がでるしかくのテキストボックス*/
.box17{
	width: 80%;
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px white;
    border-bottom: solid 2px white;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: white;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}
/*ここまで*/

/*横スクロールスマホ*/
ul.horizontal-list {
	overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
	}
li.item {
	display: inline-block;
	width: 60%;
	margin: 16px;
	font-size: 48px;
	color: #fff;
	background-color: #000000;
}	


/*下からふわっと*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}


/*下からズームアウト*/
.zoom-2 img {
      width: 100%;

      height: auto;
      animation: animationZoom2 10s ease-in-out infinite;
    }
.zoom {
      width: 100%;
      overflow: hidden;
      margin-bottom: 30px
    }

    @keyframes animationZoom1 {
      100% { transform:scale(1.1)} 
    }
    @keyframes animationZoom2 {
      50% { transform:scale(1.1)} 
    }


/*ズームからのスライド*/
.slide {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;
}

.slide-image:nth-child(1) {
  background-image: url("../img/yokobino0.jpg");
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  background-image: url("../img/AH3R6912.JPG");
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url("../img/rooms24.jpg");
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

/*追従ボタン*/

a.Side_Banner {
 position: fixed;
 display: inline-block;
 transition: all .2s ease;
 z-index: 9999;
border-radius: 20%;   /* 角丸の指定 */
}
a.Side_Banner img {
    border-radius: 10px;
}

/* 右側 */
a.Side_Banner.right { right: -20px;
opacity: 0.7;
} /*マウスを乗せた時に出てくる幅*/
a.Side_Banner.right:hover{ right: 0;}

/* 左側 */
a.Side_Banner.left { left: -20px;} /*マウスを乗せた時に出てくる幅*/
a.Side_Banner.left:hover{ left: 0;}

/* 並び位置 */
a.Side_Banner.top1 { top: 400px; }
a.Side_Banner.top2 { top: 500px; }
a.Side_Banner.top3 { top: 600px; }


/*アクセス用*/

.box29 {
    background: #ffffff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #696969;
    padding: 4px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
	color: #000000;
}
 
/*予約ボタン*/
.container {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #000;
}

.btn-box {
  display: inline-block;
  width: 200px;
  text-align: center;
  font-size: 20px;
  color: #00BFFF;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  position: relative;
  border: 2px solid #00BFFF;
  transition: .4s;
}

.btn-box:hover {
  border: 2px solid transparent;
  color: #FFF;
}

.btn-box:before, .btn-box:after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: .2s;
}

.btn-box:before {
  border-bottom: 2px solid #FFF;
  border-left: 2px solid #FFF;
  transform-origin: 100% 0%;
}

.btn-box:after {
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform-origin: 0% 100%;
}

.btn-box:hover:after,
.btn-box:hover:before {
  transform: scale(1);
}

/* 左寄せの記述 */
@media screen and (max-width: 767px) {
	.hidariyose {
    text-align: left;
}
}


/* 左寄せでPCは中央寄せの記述 */
@media screen and (max-width: 767px) {
	.chuouyose {
    text-align: left;
}
}
@media screen and (min-width: 768px) {
	.chuouyose {
    text-align: center;
}
}

/*文字下マーカー線*/
.marker3 {
    background: linear-gradient(transparent 70%, #0ABAB5 70%);
	font-weight: bold;
}

.siro{background-color: #FFFFFF;
      color: #000000;}