@charset "EUC-JP";

/*////////// ▼Reset [html5]▼ //////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; font:inherit; vertical-align:baseline;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content: '';	content: none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse; border-spacing:0;}
button{ border:none; background:none; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var{font-weight:normal; font-style:normal;}
caption,th{text-align:left;}
abbr,acronym{border:0;}
.clear{clear:both;}
/*////////// ▲Reset [html5]▲ //////////*/

/* WEB FONT 読み込み */
@import url(https://fonts.googleapis.com/css?family=Marcellus&subset=latin,latin-ext);
/* WEB FONT 読み込み */

body{
	color: #fff;
	background:#000;
	font: "Okayama", "delivery health", "Lucida Grande", "Hiragino Kaku Gothic Pro", "游ゴシック", "YuGothic",  "メイリオ", sans-serif;
	margin: 0px auto;
	min-width: 600px;
	height: auto;
	width: 100%;
	overflow-x: hidden;
}

::selection {background: rgba(80,80,80,0.5); color: rgb(255,0,100);}
::-moz-selection {background: rgba(80,80,80,0.5); color: rgb(255,0,100);}

/*/////////////// ▼リンク▼ ///////////////*/	
a img{
	border:none;
	text-decoration:none;
}
a:link{
	color: #ab9355;
	text-decoration: none;
}
a:visited{
	color: #ab9355;
	text-decoration: none;
}
a:focus{
	outline:none;
	color: #ab9355;
	text-decoration:none;
}
.main-nav a:link , .RoundedBtn a:link , .accordion a:link , #mainNewfaceSection a:link{
	text-decoration:none;
}
/*/////////////// ▲リンク▲ ///////////////*/

/*////////// ▼汎用▼ //////////*/
.font-serif {font-family: "Playfair Display SC","游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.font-script {font-family: "Pinyon Script", cursive; letter-spacing: -0.5px;}
.font-figure {font-family: "Cinzel", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.font-gothic {font-family: "游ゴシック", "YuGothic",  "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;}
.font-mincho {font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/*////////// ▲汎用▲ //////////*/

header#header{
	height: 100%;
	min-height: 100%;
	width: 100%;
	position: relative;
}
header#header ul.nav{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: right;
}
header#header ul.nav li{
	display: inline-block;
	padding-right: 25px;
	text-align: center;
}
header#header ul.nav li a{
	text-decoration: none;
}
header#header .btn-circle-border-double_blue {
  display: inline-block;
  text-decoration: none;
  color: #668ad8;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  border: double 4px #668ad8;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .6s;
}
header#header .btn-circle-border-double_green {
  display: inline-block;
  text-decoration: none;
  color: #1ef141;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  border: double 4px #26e71f;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .6s;
}
header#header .btn-circle-border-double_blue:hover {
	background-color: #668ad8;
	color: #FFF;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
header#header .btn-circle-border-double_green:hover {
	background-color: #1ef141;
	color: #FFF;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
header#header .taisyutu{
	text-align: right;
	margin-right: 1%;
	margin-bottom: 20vh;
}
header#header .taisyutu .btn-border {
	display: inline-block;
  max-width: 180px;
  text-align: left;
  border: 2px solid #000000;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
	transition: .4s;
}
header#header .taisyutu .btn-border:hover {
  background-color: #000000;
  border-color: #000000;
  color: #FFF;
}

.main-content {
	height: 55vh;
  position: relative;
  text-align:center;
	width:100%;
}
.main-content h1 {
    animation: 2s explode_title infinite;
    font-family: "Raleway";
    font-size:60px;
    font-weight:400;
    position:absolute;
    text-transform: uppercase;
    top:150px;
    transform:translate3d(0,0,0);
    width:100%;
}
.main-content .bounced-word {
    color:#56baff;
    display:block;
    font-family:"Titillium Web";
    font-size:25px;
    font-weight:600;
    position:absolute;
    text-align:center;
    text-transform: uppercase;
    top:230px;
    transform:translate3d(0,-200px,0);
    width:100%;
 }
.main-content .anim_1 {
  animation: 2s bounced-word infinite, 8s hide infinite;
}
.main-content .anim_2 {
  animation: 2s bounced-word infinite, 8s hidetwo infinite;
}
.main-content .anim_3 {
  animation: 2s bounced-word infinite, 8s hidethree infinite;
}
.main-content .anim_4 {
  animation: 2s bounced-word infinite, 8s hidefour infinite;
}

@keyframes explode_title {
  10% {
    transform:scaleY(0.2);
    transform-origin:0 bottom 0;
  }
  20% {
    transform:scaleY(1.3);
    transform-origin:0 bottom 0;
  }
  30% {
    transform:scaleY(0.7);
    transform-origin:0 bottom 0;
  }
  40% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
  100% {
    transform:scaleY(1);
    transform-origin:0 bottom 0;
  }
}
@keyframes bounced-word {
  8% {
    transform:translate3d(0,-45px,0) scaleY(0.4);
    transform-origin:left bottom 0;
  }
  25% {
    transform:translate3d(0,-110px,0) scaleY(1.4);
  }
  40% {
    transform:translate3d(0,0,0) scaleY(0.6);
    transform-origin:left bottom 0;
  }
  50% {
    transform:translate3d(0,0,0) scaleY(1.2);
    transform-origin:left bottom 0;
  }
  60% {
    transform:translate3d(0,0,0) scaleY(1);
    transform-origin:left bottom 0;
  }
  80% {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  100% {
    opacity:0;
    transform:translate3d(0,50px,0);
  }
}

@keyframes hide {
  0%, 24% {
    visibility:visible;
  }
  25%, 50% {
    visibility:hidden;
  }
  50%, 75% {
    visibility:hidden;
  }
  75%, 100% {
    visibility:hidden;
  }
}
@keyframes hidetwo {
  0%, 25% {
    visibility:hidden;
  }
  26%, 49% {
    visibility:visible;
  }
  50%, 75% {
    visibility:hidden;
  }
  75%, 100% {
    visibility:hidden;
  }
}
@keyframes hidethree {
  0%, 25% {
    visibility:hidden;
  }
  25%, 50% {
    visibility:hidden;
  }
  51%, 74% {
    visibility:visible;
  }
  75%, 100% {
    visibility:hidden;
  }
}

@keyframes hidefour {
  0%, 25% {
    visibility:hidden;
  }
  25%, 50% {
    visibility:hidden;
  }
  50%, 75% {
    visibility:hidden;
  }
  76%, 100% {
    visibility:visible;
  }
}
/* テキスト用CSS終了 */


video {
	position: fixed;
	top: 0; 
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
  height: auto;
  opacity: 0.6;
	z-index: -1;
} 

.scroll {
  margin     : auto;
  width      : 96%;
  font-size  : 140%;
  line-height: 1.5em;
  text-align : left;
  border     : 1px solid #666;
  color      : #000000;
  background : #fff;
  overflow   : hidden;
}
.scroll span{
  display     : inline-block;
  white-space : nowrap;
  line-height : 1em;
  animation   : scrollAnime 6s linear infinite alternate;
}
@keyframes scrollAnime{
    0% {
        margin-left: 100%;
        transform  : translateX(-100%)
       }
  100% {
        margin-left: 0;
        transform  : translateX(0)
       }
}

/* 各店舗宣伝用 ボタン設定 */
#setting{
  display: inline-block;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255, 0.5);
}

#setting .scroll{
  background-color: rgb(255, 255, 255,0);
  width: 100%;
  broder-bottom: 0;
  border-style:none;
}

#setting .setting_banner{
	float: left;
	height: auto;
	width: 25%;
  margin: 10px;
}

#setting .setting_banner h1{
  font-size: 30px;
  text-align: center;
}
#setting .setting_banner h2{
  font-size: 15px;
  text-align: center;
  margin-bottom: 5PX;
}

#setting .setting_banner a{
	position: relative;
	color: rgb(0, 0, 0);
}

#setting .setting_banner .Linkbutton{
  border-radius: 10px;
  color:#fff;
  position: relative;
  padding: 30px 15px;
  width: 90%;
  height: 170px;
  margin: 5px;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
#setting .setting_banner .Linkbutton::before,
#setting .setting_banner .Linkbutton::after{
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transform: scale(0,0);
}
#setting .setting_banner .Linkbutton:active{
  opacity: .7;
}
#setting .setting_banner .Linkbutton:hover::before{
  animation: hamon 2s infinite;
}
#setting .setting_banner .Linkbutton:hover::after{
  animation: hamon 2s .3s infinite;
}
@keyframes hamon {
  0%   {  transform: scale(0,0);}
  100% {  transform: scale(50,50);opacity: 0;}
}

/* タレント */
#setting .setting_banner .delivery-health {background: rgb(0, 0, 0, 0.7);}
#setting .setting_banner .premium {background: rgb(253, 143, 216, 0.7); color:rgb(0,0,0);}
#setting .setting_banner .adult{background: rgb(167, 25, 250, 0.7); color:rgb(0,0,0);}
#setting .setting_banner .around {background: rgb(255, 197, 39, 0.7); color:rgb(0,0,0);}
#setting .setting_banner .kurashiki {background: rgb(237, 248, 79, 0.7); color:rgb(0,0,0);}
#setting .setting_banner .Shangri-la{background: rgb(128, 250, 209, 0.7); color:rgb(255, 255, 255);}

#setting .setting_banner .Linkbutton img{
  height: 120px;
}

/*タブ切り替え全体のスタイル*/
#setting .setting_channer{
	float: left;
	height: auto;
	width: 35%;
  margin: 10px
}

#setting .setting_channer h2{
  padding: 10px;
  padding-left: 0.5em;
  color:#FFF;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 2px;
  }

#setting .setting_channer .pink{
  background: linear-gradient(to right, #eb84f5, rgba(243, 175, 226, 0) 100%);
}
#setting .setting_channer .purple{
  background: linear-gradient(to right, #670ef7, rgba(243, 175, 226, 0) 100%);
}

#setting .tabs {
	margin-top: 50px;
	padding-bottom: 20px;
	background-color: rgb(255, 255, 255,0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
	float: left;
}
  
/*タブのスタイル*/
#setting .tab_item_syame {
	width: calc(100%/7);
	height: 50px;
	border-bottom: 3px solid #eb84f5;
	background-color: #d9d9d9;
	line-height: 50px;
	font-size: 14px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#setting .tab_item_syame:hover {
	opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item_syame"] {
	display: none;
}
/*タブ切り替えの中身のスタイル*/
#setting .tab_content {
	display: none;
	padding: 10px 20px 0;
	clear: both;
	overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#all_syame:checked ~ #all_syame_content,
#delivery-health_syame:checked ~ #delivery-health_syame_content,
#premium_syame:checked ~ #premium_syame_content,
#adult_syame:checked ~ #adult_syame_content,
#around_syame:checked ~ #around_syame_content,
#kurashiki_syame:checked ~ #kurashiki_syame_content,
#shangri-la_syame:checked ~ #shangri-la_syame_content {
display: block;
	}
/*選択されているタブのスタイルを変える*/
#setting .tabs input:checked + .tab_item_syame {
	background-color: #eb84f5;
	color: #fff;
}


/*タブのスタイル*/
#setting .tab_item_soku { 
  width: calc(100%/7);
	height: 50px;
	border-bottom: 3px solid #670ef7;
	background-color: #d9d9d9;
	line-height: 50px;
	font-size: 14px;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#setting .tab_item_soku:hover {
	opacity: 0.75;
}	
/*ラジオボタンを全て消す*/
input[name="tab_item_soku"] {
	display: none;
}
/*タブ切り替えの中身のスタイル*/
#setting .tab_content {
	display: none;
	padding: 10px 20px 0;
	clear: both;
	overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#all_soku:checked ~ #all_soku_content,
#delivery-health_soku:checked ~ #delivery-health_soku_content,
#premium_soku:checked ~ #premium_soku_content,
#adult_soku:checked ~ #adult_soku_content,
#around_soku:checked ~ #around_soku_content,
#kurashiki_soku:checked ~ #kurashiki_soku_content,
#shangri-la_soku:checked ~ #shangri-la_soku_content {
  display: block;
}
/*選択されているタブのスタイルを変える*/
#setting .tabs input:checked + .tab_item_soku {
  background-color: #b147ee;
	color: #fff;
}

#setting .tabs p{
  color: #000
}

#setting .banner img{
	float: left;
	height: 200px;
	margin-top: 2px;
	margin-bottom: 10px;
}

#setting .logbox
{
	float: left;
	overflow: hidden;
	border: solid 1px #000000;
	height: 700px;
	width: 700px;
	padding: 0.5em;
	margin-left: 30px;
	overflow: auto;
}
#setting .tab_content_description p{
	color : black;
}

/* #eigyo .sokuhime{

}

#eigyo .syame{

} */

footer{
	clear: both;
	width: 100%;
}
footer #footer{
	position: relative;
	margin: 0px auto 0;
	z-index: 900;
}

footer #footer h1 {
    text-align: center;
}

footer address{
	font-family: "Playfair Display SC","游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #fff;
	font-size: 1em;
	letter-spacing: 1.5px;
	text-align: center;
	padding-top: 80px;
}