body{
	-ms-overflow-x:hidden;
	background: #000;
}
body>div{
/*
    overflow:scroll;
	height:100%;
*/
    -webkit-overflow-scrolling: touch;
}

dl {
    margin: 0 2em 1em;
}
dt {
	background:url(../css-img/list0.png) no-repeat left center;
    padding-left: 14px;
}
dd {
    margin: 0 3em;
}

a{
	text-decoration:none;
	color:#fff;
}
#telArea{
	position:fixed;
	z-index:120;
	top:1rem;
	left:1rem;
	display:block;
	width:194px;
	height:30px;
	border-radius:1rem;
	background:rgba(0,0,0,0.8);
	color:#fff;
	text-align:center;
	padding-top:0.5rem;
	font-size:14px;
}
#s_bodymsg{
	position:fixed;
	top: 0;right:0px;
	z-index:2;
	width:33%;
	max-width:360px;
	height:100%;
	margin:0px;
	padding:0px;
	background:rgba(255,255,255,0.3);
	background-image: url(../css-img/obi_bg2.png);

	background-repeat: no-repeat;
	background-position:top center;
	background-size: cover;
	overflow-x:hidden;
}
#s_bodymsg div.logo{
	position:relative;
	z-index:10;
	width:calc(100%);
	height:100%;
	overflow: hidden;
	margin:-2rem auto 0rem auto;
	background-image: url(../css-img/yuba-logo.png);
	background-repeat: no-repeat;
	background-position:center right;
	background-size: 98% auto;
	overflow-x:hidden;

}
#s_bodymsg:hover{
}

#s_topMessage{
	width:100%;
	position:absolute;
	left:0px; bottom:40%;
	text-align:left;
	overflow-x:hidden;
}
#s_topMessage div{
	padding:1rem;
	width:calc(100% - 40%);
	min-width:calc(100% - 420px);
	margin:1rem 0px 1rem 1rem;
	line-height:2rem;
	letter-spacing:0.3rem;
	font-size:0.9rem;
	color:#fff;
	font-weight:700;
	background:rgba(255,255,255,0);
	border-radius: 1rem;
/*
	color:#fff;
	text-shadow:0px -1px 0px #000;
*/
}
#s_topMessage div:hover{
	color:#000;
	text-shadow:0px 1px 0px #fff;
	animation: fadeIn 2s ease 0s 1 normal;
	background:rgba(255,255,255,0.7);
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* title ------------- */
h1.modal-h1{
	width:auto;
	height:100px;
	margin-left:1rem;
	margin-bottom:0.7rem;
}
h1.h1_title{
	display:block;
	background: transparent;
	height:3rem;
	padding:0.5rem;
	margin:0.3rem;
	text-align:left;
	font-size:1.8rem;
	color:#ff8;
}


h1#h1_product{
	background: url(../css-img/h1_product.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_company{
	background: url(../css-img/h1_company.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_kodawari{
	background: url(../css-img/h1_kodawari.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_travel{
	background: url(../css-img/h1_travel.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_process{
	background: url(../css-img/h1_process.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_contact{
	background: url(../css-img/h1_contact.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_taste{
	background: url(../css-img/h1_taste.png) no-repeat;
	background-size: auto 100%;
}
h1#h1_feature{
	background: url(../css-img/h1_feature.png) no-repeat;
	background-size: auto 100%;
}

h2{
	font-size:1.3rem;
	font-weight:700;
	padding:0.5rem;
	margin-left:1rem;
	width:calc(100% - 3rem);
	background-color: #ccac00;
	border-radius:4px;
	text-shadow: 0px 1px 0px #fff;
}

h3{
	color: #ccac00;
	font-size:1.1rem;
	font-weight:500;
	padding:0.5rem;
	margin-left:1rem;
	width:calc(100% - 3rem);
	text-shadow: 0px -1px 0px #000;
}

.dock {
	position: fixed; bottom: 0;left:0; z-index: 9998;
	width:100%;
	margin-left:-100/2%;
}
#dock_container{
	position: relative;z-index: 9999;
	width:100%;
	margin-left:auto;margin-right:auto;
}
.dock span { display: none; font-size:1rem; padding-left: 20px; background: rgba(245, 33, 105, 0.8); color: #fff; padding: 3px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

/*-- new css --*/

.s_modalInner{
    margin:1rem 1rem 1rem 0px;
    padding:0.1rem 0rem 1rem 0rem;
	width:calc(100% - 6px);
	max-width:1024px;
    min-height:90%;
	background: rgba(10,0,0, 0.8);
	background-color: rgba(244, 236, 189, 0.73);
	border-radius:0rem 1rem 1rem 0rem ;
	box-shadow:1px 1px 16px #666;
}

.s_modalInner>div{
	margin:0.6rem 1.2rem;
	width:auto;
}

.modal-content{
	margin:1rem;
	padding:1.2rem 0rem 1.2rem 0rem;
    position: relative;
	background:rgba(255,255,255, 0.95);
	background:rgba(12,10,10, 0.85);
    text-align:left;
    font-size:1em;
    line-height:1.5em;
    border:0px;
    box-shadow:1px 1px 16px #666;
    -webkit-border-radius: 8px;
            border-radius: 8px;
			-webkit-overflow-scrolling: touch;
}

.modal-content p{
	display:block;
    margin:1.2em auto 1.2em auto;
    font-size:1.05em;
    line-height:2.5em;
	width:calc(100% - 4rem);
	color:#fff;
	text-shadow: 0px -1px 0px #000;
	letter-spacing:1px;
}

p.catchMessage{
	font-size:1.3rem;
	width:calc(100% - 3rem);
}
.modal-content table{
	margin:1rem auto 1rem auto;
	width:calc(96% - 1.2rem);
}

.modal-content table tr th,.modal-content table tr td{
	color:#fff;
	padding:0.8rem 0.1rem 0.8rem 0.1rem;
	border-bottom:#777 1px solid;
}

.modal-content table tr th{
	width:120px;
}

.modal-01,.modal-02,.modal-03,.modal-04,.modal-05,.modal-06,.modal-07,.modal-08,.modal-09,.modal-10,
.modal-11,.modal-12,.modal-13,.modal-14,.modal-15,.modal-16,.modal-17,.modal-18,.modal-19,.modal-20,.modal-99{
	-webkit-overflow-scrolling: touch;

}


.close-modal-01,.close-modal-02,.close-modal-03,.close-modal-04,.close-modal-05,
.close-modal-06,.close-modal-07,.close-modal-08,.close-modal-09,.close-modal-10,
.close-modal-11,.close-modal-12,.close-modal-13,.close-modal-14,.close-modal-15,
.close-modal-16,.close-modal-17,.close-modal-18,.close-modal-19,.close-modal-20,.close-modal-99{

	z-index:199;
    font-weight:100;
	font-size:5rem;
    height:100px;
    width:100px;
    display:block;
    text-align:center;
    color:#fff;
    text-shadow: 0px -1px 0px #000;
    background-color: rgba(39,195,40, 0.8);
    background-color: rgba(0,0,0, 0.7);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position:relative;
    margin:0px 2px -50px auto;
	line-height:1.2em;
	border-radius:50px;

	position:fixed;
	top:0rem;
	left:946px;

/*    background-image: url(../img/c_modalLogo.png);
    background-position: center left;
    background-repeat: no-repeat; */
/*
    background-image: url(../img/c_logo_s.png);
    background-size:180px auto;
    background-position: bottom left;
    background-repeat: no-repeat;
*/
}



/* dock */
/* dock - top */
.dock {
	position: relative;
	height: 80px;
	text-align: center;
	width:100%;
}
.dock-container {
	position: absolute;
	height: 80px;
	background: url(../dock/dock-bg2.gif);
	padding-left: 20px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #000;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none;
	margin: 5px 10px 0px;
	width: 100%;
}
.dock-item span {
	display: none;
	padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: absolute;
	height: 30px;
	padding-left: 20px;
/*	background-color:rgba(10,10,10,.65); */
	border-bottom: 50px solid rgba(10,10,10,.75);
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}

a.dock-item2 {
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px;
	color: #000;
	bottom: 0px;
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 20px;
}
.dock-item2 img {
	border: none;
	margin: 5px 10px -40px;
	width: 100%;
}
.dock-container2 p{
	display:inline-block;
}

.selectArea select{
	padding:3px;
	margin:0.5rem;
	font-size:1.2rem !important;
	min-width:8rem;
}

.unchinArea div{
	margin:0.6rem;
}

.unchinArea span{
	color:#ff0;
	font-size:1.15rem;
	font-weight:500;
}

.selectArea,.selectArea div,.unchinArea div{
	color:#fff;
	font-size:1rem;
}

#sp-menu{
	overflow:hidden;
	overflow-x:hidden;
	position:relative;
	z-index:10;
	width:100%;
	position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
}

#sp-menu a{
	text-align:center;
	display:block;
	margin:0rem 0rem 0.5rem 1rem;
	background:rgba(10,10,10,0.3);
	border-radius:12px;
	color:#fff;
	width:160px;
	padding:0.4rem 1rem 0.4rem 1rem;
	font-size:1.2rem;
	font-weight:500;
	letter-spacing:2px;
	text-shadow:0px -1px 0px #000;
}

.modalPhotoImage{
	width:calc(100% - 2rem);
	margin:0px auto 0px auto;
	overflow:hidden;
	text-align:center;
}
.modalPhotoImage img{
	text-align:center;
	margin:1rem auto 1rem auto;
	width:calc(100% - 2rem);
	height:auto;
	border-radius:1rem;
	box-shadow:1px 1px 16px #333;
}

img.photoHerf,img.photoFull{
	display:inline-block;
	margin:1rem auto 1rem auto;
	height:auto;
}
img.photoHerf{
	width:calc(49% - 2rem);
}
img.photoFull{
	width:calc(98% - 2rem);
}
img.photoFull.photo2{
	width:calc(80% - 2rem);
}

img.photoHerf.photoRadius,img.photoFull.photoRadius{
	border-radius:1rem;
}

.imageArea{
	overflow:hidden;
	text-align:center;
}

.floatLeft{
	float:left;
	width:50%;
	overflow:hidden;
	text-align:center;
}

.floatLeft p{
	display:block;
	line-height:1.5rem;
	min-height:3.5rem;
}
.sm-slider{
	overflow-x:hidden;
}
/* dock - top


/* dock2 - bottom

#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px;
	color: #000;
	bottom: 0px;
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 img {
	border: none;
	margin: 5px 10px 0px;
	width: 100%;
}
#dock { position: fixed;bottom: -8px;left: 50%;right: 50%; z-index: 9999;}
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 4px; }
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
.dock-item img { border: 0; margin: 5px 10px -14px; width: 100%; }

*/