@charset "utf-8";

/* Global Styles */

a:hover {

	color: rgba(255,255,255,1.00);
	
	-webkit-text-size-adjust: 100%; 

}

/* リンクカラー */
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #B1B1B1;
}
a:active {
	text-decoration: none;
}

@media screen and (min-width:769px) {
	/*header*/

header {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    font-size: 25px;
    font-style: bold;
    font-weight: 400;
    background: #ffffff;

}


/* Logo placeholder*/

#logo {
	
    display: block;
	
    text-align: center;	
	
	padding-left: auto;
	
	padding-right: auto;

	padding-top: 30px;

	padding-bottom: 30px;
	
}

/* 真ん中にする枠 */
.box0
	{
	width:300px;
	height: 100%;
    margin-right: auto;
	margin-left: auto;
	}

.box1
	{
	width:200px;
	height: 100%;
    margin-right: auto;
	margin-left: auto;
	}

.box2
	{
	width: 300px;
	height: auto;
    margin-right: auto;
	margin-left: auto;
	}
	
/* div for Links in header */

/* メニューボタン */
ul {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    width: max-content;
}


ul li{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

li {
    background: #ffffff;
    width: 50px;
    height: 50px;
    padding: 30px;
    margin: 10px;
	display:table-cell;
    vertical-align:middle;
}
.inline {
    text-align: center;
}
.inline li {
    display: inline;
}
.inline-block {
    text-align: center;
}
.inline-block li {
    display: inline-block;
}
.table-cell {
    display: table;
    margin: auto;
}
.table-cell li {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
.flex {
    display: flex;
    justify-content: center;
}
/* メニューボタンここまで */
.nav {
    padding: 0 -10px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    /* [disabled]margin-bottom: 60px; */
    height: 80px;
    background: #ffffff;
    width: auto;
}


.nav li {
    list-style: none;
    margin-bottom: 10px;
    display: block;
    padding-right: 1em;
    padding-left: 1em;
}

.nav li a {
    text-decoration: none;
    color: #fff;
    text-align: center;
    width: auto;
}
.nav li a:hover {
    background: #ffffff;
}


.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}


.list {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.list ul {
    list-style: none outside none;
    float: Center;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 1%;
}
.list ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: auto;
	margin-left: auto;
    padding: 5px;
    position: relative;
    left: 1%;
	img-width: 100%;
	img-height: auto;
}

.list2 {
    padding: left;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.list2 ul {
    /*list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 39%;
	*/
	display: flex;
    justify-content: flex-center;
}
.list2 ul li {
	display: inline-block;
	/*display: inline;*/
    float: left;
    width: auto;
    /*margin-right: 30px;
	margin-left: 30px;*/
    padding: 2px 0.3em;
    position: relative;
 /*   left: -30%;*/
/*	zoom: 1.1;*/
}

/* Links in header */

#headerLinks {
    width: 100%;
    height: auto;
    text-align: justify;
    background: #ffffff;
    margin: auto;
    max-width: 950px;
    position: relative;
	}

#headerLinks a {
	
	font-family: Meiryo;

	color: #000000;

	font-size: 25px;
}

#headerLinks2 a {
	
	text-align: right;
	
	font-family: Meiryo;

	color: #000000;

	font-size: 28px;
}

/* Offer text banner*/

#offer {

	font-family:  Meiryo, 'sans-serif';

	clear: both;

	background-color: rgba(246,246,246,1.00);

	color: rgba(146,146,146,1.00);

	padding-left: 115px;

	padding-top: 57px;

	padding-bottom: 57px;

}

#slider {

	font-family:  Meiryo, 'sans-serif';

	clear: both;

	background-color: #FFFFFF;

	color: #000;

	margin-left: auto;
	
    margin-right: auto;

	padding-top: 5px;

	padding-bottom: 57px;

}

/* Main content of the site */

#content {

	clear: both;

	overflow: auto;

	padding-top: 29px;

}

/* Sidebar */

#content .sidebar {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	float: left;

	width: 20%;

	padding-left: 3%;

	padding-right: 3%;

	text-align: center;

	background-color: rgba(246,246,246,1.00);

	padding-top: 36px;

	height: 784px;

}

/* main content of the site */

#content .mainContent {

	float: left;

	width: 70%;

	text-align: center;

	padding-left: 4%;

}

/*menubar's properties for menus in sidebar */

#content .sidebar #menubar {

	text-align: left;

	color: rgba(146,146,146,1.00);

	position: relative;

	left: 0%;

}

/* Search field in sidebar */

#content .sidebar #search {

	width: 100%;

	border-radius: 0px;

	height: 50px;

	text-align: center;

	color: rgba(208,207,207,1.00);

	font-size: 14px;

	margin-bottom: 21px;

}

/* Whole page content */

#mainWrapper0{

	min-width: 100%;

}

#mainWrapper1{
    width: 100%;
    /* [disabled]padding-top: 100px; */

}

#mainWrapper2{

	width: 80%;
	
	padding-top: 100px;

}

#mainWrapper3{

	width: 100%;
	
}

#main{

	width: 100%;
	
	padding-top: 5px;
	
	padding-bottom: 20px;

}

#paddhing{

	width: 100%;
	padding-top: 1px;
	padding-left: 1px;
	padding-right: 1px;
	padding-bottom: 1px;

}

#mainWrapper {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    max-width: 950px;

}

#mainWrapper2 {

	width: 75%;

	padding-left: 12%;

}

/*区間用*/
.kukan {
    /* [disabled]margin-top: 180px; */
    margin-bottom: 10px;
}

/*ライン*/
hr {
  height: 1px;
  border: none;
  border-top: 5px #D5D5D5 solid;
}

/*menu elements */

.menu ul li {

	list-style-type: none;

	font-size: x-large;

	position: relative;

	left: -35px;

	padding-top: 12px;

}

/* Product rows for catalog */

#content .mainContent .productRow {

	overflow: auto;

	color: rgba(146,146,146,1.00);
/*********20181206追記*********/
  display: flex;
}

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;

	width: 22%;
	
	/************************/
}

.productInfo2 {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;
	
	padding-bottom: 5%;
	
	width: 90%;

}

.productInfo3 {

	float: left;
	
	padding-top: 5%;

	padding-left: 10%;

	padding-right: 10%;
	
	padding-bottom: 5%;
	
	width: 100%;

}

.productInfomunu {

	float: left;
	
	padding-top: 1.8%;

	padding-left: 2%;

	padding-right: 2%;
	
	padding-bottom: 7.2%;

	width: 20%;
	   	
}

.productInfomunu3 {

	float: left;
	
	padding-top: 1.8%;

	padding-left: 2%;

	padding-right: 2%;
	
	padding-bottom: 6.7%;

	width: 20%;
	   	
}

.productInfomunu2 {

	float: left;
	
	padding-top: 2%;

	padding-left: 2%;

	padding-right: 2%;
	
	padding-bottom: 6.8%;
	
	width: 20%;

}

.productInfomunu-img {
 width: 90%;
 height: auto;
 border:1px solid #D5D5D5;
 padding:8px;
}	

/* Prices of products in catalog view */

.productRow .productInfo .price {

	font-size: 19px;

}

/* Prices of a products in catalog */

.productRow .productInfo .price {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	font-size: 22px;

	position: relative;

	top: -20px;

}

.pri {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	font-size: 16px;

	position: relative;

	top: -20px;

}

.pri2 {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	font-size: 15px;

	position: relative;

	top: -20px;

}

/* Content holder for products in catalog*/

.productRow .productInfo .productContent {

	position: relative;

	top: -37px;

	font-size: 16px;

	font-family:  Meiryo, 'sans-serif';

	font-style: normal;

	font-weight: 200;

	color: rgba(146,146,146,1.00);

	white-space: pre-wrap;

}

.productContent2 {
    position: relative;
    top: 1px;
    font-size: 2rem;
    font-family: Meiryo, 'sans-serif';
    font-style: bold;
    font-weight: 700;
    color: #414141;
    white-space: pre-wrap;
    text-align: center;
    clear: both;

}

.productContent3 {
    position: relative;
    top: 1px;
    font-size: 1.5rem;
    font-family: Meiryo, 'sans-serif';
    font-style: normal;
    font-weight: 700;
    color: #414141;
    white-space: pre-wrap;
    text-align: center;

}

/* Buy button for products in catalog */

.productRow .productInfo .buyButton {

	position: relative;

	top: -48px;

	width: 84%;

	background-color: rgba(208,207,207,1.00);

	height: 35px;

	color: rgba(255,255,255,1.00);

	border-style: none;

	font-size: 14px;

	text-transform: uppercase;

	margin-top: 8px;

}

/* map */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* footer */

#mainWrapper footer {

	clear: both;

	overflow: auto;

	background-color: #FFFFFF;

	font-family:  Meiryo, 'sans-serif';

	font-style: normal;

	font-weight: 200;

	line-height: 1.8;

	padding-top: 22px;

	padding-left: 22px;

	text-align: center;

	padding-bottom: 22px;

	padding-right: 22px;

}

/*Each footer content */

#mainWrapper footer div {

	width: 90%;

	float: left;
	
	text-align: center;

	padding-left: 5%;

	padding-right: 5%;

	color: #000000;

}

/* Links in footer */

footer div a {

	color: rgba(146,146,146,1.00);

	display: block;

	text-decoration: none;

	text-align: center;

}

.pr {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;
	
	padding-bottom: 0%;
	
	width: 90%;

}

/* Product's images in catalog */

.productInfo div img {

	width: 80%;

margin: 0 10%;

padding: 0;

}

/*Links in sidebar */

.sidebar #menubar .menu ul li a {

	color: rgba(146,146,146,1.00);

	text-decoration: none;

}

.sidebar #menubar .menu ul li a:hover {

	color: rgba(107,97,97,1.00);

	text-decoration: none;

}

/* Menu headings in sidebar */

#menubar .menu h2 {

	font-size: 14px;

}

/*Links under menus in sidebar */

#menubar .menu ul li a {

	font-size: 14px;

}

/* Menus in sidebar */

.sidebar #menubar .menu {

	margin-bottom: 29px;

}

/* Container for links in footer */

footer .footerlinks {

	margin-top: 70px;
	font-family:  Meiryo, 'sans-serif';
}

/* TOP戻るボタン*/
p.gotop{
    position: fixed;
    right: 1%;
        bottom: 0;
}
p.gotop a{
    width: 50px;
    height: 50px;
    display: block;
}

/* マウスを置くと変わる */

kira:hover {
	opacity: 1;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-duration: 1s;
	animation-name: flash;
}

/* 画像に枠をつける */
.gazouwaku{ 
 border:1px solid #D5D5D5;/* 外枠の色 */ 
 padding:8px;/* 余白 */ 
 background-color:#ffffff;/* 余白部分の色 */ 
}

/* 飾りボタン */
.btn {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 50px;
	margin-top: 70px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 50px;
	font-family:  Meiryo, 'sans-serif';
    font-size: 12px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #D5D5D5;
    cursor: pointer;
    overflow: hidden;
}

.btn p {
    width: 100%;
    height: 100%;
    color: #D5D5D5;
}

.btn p {
    width: 100%;
    height: 100%;
    color: #D5D5D5;
}

.slide {
    position: absolute;
    top: -100%; left: 0;
    width: 100%;
    height: 100%;
    background: #D5D5D5;
    color: #000000;
}
.reset {
    visibility: hidden;
    -webkit-transition: none 0s ease 0s;
            transition: none 0s ease 0s;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

/* マウスホバーした時 */
.slide.enter {
    -webkit-transition: -webkit-transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
            transition:         transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}
/* マウスホバーが離れた時 */
.slide.leave {
    -webkit-transition: -webkit-transform .15s ease-in-out 0s;
            transition:         transform .15s ease-in-out 0s;
    -webkit-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0);
}

/* メールテーブル文字 */
.prpost {
	font-family:  Meiryo, 'sans-serif';
	text-align: center;
}
 
.prpost2 {
	font-family:  Meiryo, 'sans-serif';
	text-align: center;
    font-size: 12px;
}

/* モーダルウィンドウ */
#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
}
 
p {
    padding: 10px 0;
}
 
#open01,
#open02, 
#open03 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
/*
.modal_window {
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -200px;
    width: 400px;
    height: 300px;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
}
*/
.modal_window {

    top: 15%;
    left: 10%;
    margin: 0;
    width: 80%;
    height: auto;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;

} 
.modal_window h2 {
    margin-bottom: 20px;
    width: 100%;
    height: 8px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #C5C5C5;
}
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
	font-family:  Meiryo, 'sans-serif';
    line-height: 160%;
    text-align: center;
}
.navli-p {
    padding: 0 0;
    background-color: #ffffff;
    text-align: center;
    width: auto;
}

.navli-p2 {
	width: 180px;
    height: auto;
	margin-left: 6%;
	margin-right: auto;
    padding-left:5%;
    padding-right: 5%;
	background-color: #ffffff;
	float: left;
}
.float {
	width: 97%;
	margin: auto;
	position:0 0 0 0;
	background: #ffffff;
	overflow: hidden;
	position: 10px;
	left: 32%;
}



}

/*TOPへ戻る*/
#page-top {
    position: fixed;
    bottom:15px;
    right: 15px;
    font-size: 77%;
}
#page-top a {
    background: #A8A8A8;
    text-decoration: none;
    color: #fff;
    width: 30px;
    padding: 1px ;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#page-top a:hover {
    text-decoration: none;
    background: #BCBCBC;
}

/**くるん回るボタン**/
.button {
display: inline-block;
	width: 98px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	margin-top: 5px;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 5px;
	line-height: 54px;
	outline: none;	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.button span {
	display: block;
	position: absolute;
	width: 90px;
	height: 60px;
	border: 2px solid #B1B1B1;
	text-align: center;
	line-height: 56px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
.button span:nth-child(1) {
	background-color: #B1B1B1;
	color: #fff;
	font-family:  Meiryo, 'sans-serif';
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button span:nth-child(2) {
	background-color: #fff;
	color: #B1B1B1;
	font-family:  Meiryo, 'sans-serif';
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.button:hover span:nth-child(2) {
	background-color: #333;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}
 
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/* Media780px以下 */

@media screen and (max-width:769px) {
	
/*header*/

header {

	font-family: Meiryo, 'sans-serif';

	color: #000000;

	font-size: 25px;

	font-style: normal;

	font-weight: 400;
	
    background: #ffffff;
	
	width: 100%;

}


/* Logo placeholder*/

#logo {
	
    display: block;
	
    text-align: center;	
	
	padding-left: auto;
	
	padding-right: auto;

	padding-top: 30px;

	padding-bottom: 30px;
	
}
#mainWrapper1{

	
	padding-top: 100px;
	
	img: 50%;

}

/* ロゴ */
.example1 {
	
		width: 70%;
		
		height: auto;
	
}

/* 真ん中にする枠 */
.box0
	{
	width:300px;
	height: 100%;
    margin-right: auto;
	margin-left: auto;
	}

.box1
	{
	width:200px;
	height: 100%;
    margin-right: auto;
	margin-left: auto;
	}

.box2
	{
	width: 300px;
	height: auto;
    margin-right: auto;
	margin-left: auto;
	}
	
/* div for Links in header */

#headerLinks {
	float: center;
	width: 100%;
	height: auto;
	text-align: right;
	position: absolute;
    background: #ffffff;
	padding-bottom: 50px;
	left: -5%;
}

ul {
    list-style: none;
}

li {
    background: #ffffff;
    height: 50px;
    padding: 15px;
    margin: 20px;
	font-size: 21px;
	display: inline-block;
	width: 10%;
}
.float {
    width: 80%;
    margin: auto;
    overflow: hidden;
}
.float li {
    float: left;
}
.inline {
    text-align: center;
}
.inline li {
    display: inline;
}
.inline-block {
    text-align: center;
}
.inline-block li {
    display: inline-block;
}

.inline {
    text-align: center;
}
.inline li {
    display: inline;
}
.inline-block {
    text-align: center;
}
.inline-block li {
    display: inline-block;
}
.table-cell {
    display: table;
    margin: auto;
}
.table-cell li {
    display: table-cell;
}
.flex {
    display: flex;
    justify-content: center;
}

.nav {
    width: 100%;
	margin: 0 auto;  
	font-family: Meiryo, 'sans-serif';
    background: #ffffff;
}

.nav2 {
    margin-top: 5px;
	margin-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
    width: 95%;
	margin: 0 0;  
	font-family: Meiryo, 'sans-serif';
    background: #ffffff;
	
}
.nav2 li {
    list-style: none;
	display: inline-block;
	text-align: center;
	width: 100px;
	height: 30px;
	padding: 10px;
    margin: 5px;
    float: left;
}
.nav2 li a {
    text-decoration: none;
}

.fixed {
    position: fixed;
    top: 5px;
    left: 0;
    width: 100%;
}

.list {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}

#headerLinks2 a {
	
	text-align: right;
	
	font-family: Meiryo;

	color: #000000;

	font-size: 28px;
}

.navli-p2 {
	width: 140px;
    height: 35px;
    padding: 1px auto 2px auto;
	background-color: #ffffff;
	text-align: center;
}
.float {
	width: 50%;
	margin:auto;
	position:6px 2px 6px 2px;
	background: #ffffff;
	padding-left: 22%;
}

#offer {

	font-family:  Meiryo, 'sans-serif';

	clear: both;

	background-color: rgba(246,246,246,1.00);

	color: rgba(146,146,146,1.00);

	padding-left: 115px;

	padding-top: 57px;

	padding-bottom: 57px;

}

#slider {

	font-family:  Meiryo, 'sans-serif';

	clear: both;

	background-color: #FFFFFF;

	color: #000;

	margin-left: auto;
	
    margin-right: auto;

	padding-top: 5px;

	padding-bottom: 57px;

}

#content .sidebar {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	float: left;

	width: 20%;

	padding-left: 3%;

	padding-right: 3%;

	text-align: center;

	background-color: rgba(246,246,246,1.00);

	padding-top: 36px;

	height: 784px;

}

/*menubar's properties for menus in sidebar */

#content .sidebar #menubar {

	text-align: left;

	color: rgba(146,146,146,1.00);

	position: relative;

	left: 0%;

}

/* Search field in sidebar */

#content .sidebar #search {

	width: 100%;

	border-radius: 0px;

	height: 50px;

	text-align: center;

	color: rgba(208,207,207,1.00);

	font-size: 14px;

	margin-bottom: 21px;

}

/* Whole page content */

#mainWrapper0{

	width: 100%;

}

#mainWrapper1{

	width: 100%;
	
	padding-top: 100px;

}

#mainWrapper2{

	width: 100%;
	
	padding-top: 100px;

}

#main{

	width: 100%;
	
	padding-top: 5px;
	
	padding-bottom: 20px;

}

#paddhing{

	width: 100%;
	padding-top: 1px;
	padding-left: 1px;
	padding-right: 1px;
	padding-bottom: 1px;

}

#mainWrapper {

	width: 80%;

	padding-left: 10%;

}

#mainWrapper2 {

	width: 75%;

	padding-left: 12%;

}

/* Main content of the site */

#content {

	clear: both;

	overflow: auto;
}

/* search field in sidebar */

#content .sidebar #search {

	display: none;

}

/* sidebar */

#content .sidebar {

	float: none;

	width: 100%;

	height: auto;

	overflow: auto;

	padding-left: 12%;

	padding-top: 0px;

}

/* horizontal separators in sidebar */

#content .sidebar hr {

	display: none;

}

/*The sidebar and maincontent of page */

#content {

	position: relative;

	top: -22px;

	width: 100%;

	overflow: hidden;

}

/*menu headings in sidebar */

#menubar .menu h2 {

	display: inline;

	font-size: medium;

	padding-right: 6%;

}

/* Unordered List of links */

#menubar .menu ul {

	display: inline;

}

/*list elements */

#menubar .menu ul li {

	display: inline;

	font-size: medium;

	padding-left: 0%;

	padding-right: 3%;

}

/*The link to be hidden in tablet view */

.sidebar #menubar .menu ul .notimp {

	display: none;

}

/* menus in sidebar */

.sidebar #menubar .menu {

	width: 100%;

	text-align: center;

	position: relative;

	top: 16px;

}

/*menubar in sidebar */

#content .sidebar #menubar {

	position: relative;

	left: -7%;

	overflow: hidden;

	width: 95%;

	padding-top: 0px;

}

/* offer banners content */

#mainWrapper #offer p {

	font-size: small;

}

/* main content region of page */

#mainWrapper #content .mainContent {

	overflow: hidden;

	width: 95%;

	margin-top: 40px;

}

/*menu elements */

.menu ul li {

	list-style-type: none;

	font-size: x-large;

	position: relative;

	left: -35px;

	padding-top: 12px;

}

/* Product rows for catalog */

#content .mainContent .productRow {

	overflow: auto;

	color: rgba(146,146,146,1.00);

}

.productInfomunu-img {
 width: 90%;
 height: auto;
 border:1px solid #D5D5D5;
 padding:8px;
}	

/*区間用*/
.kukan {
	margin-top: 150px;
	margin-bottom: 50px;
}

/*ライン*/
hr {
  height: 1px;
  border: none;
  border-top: 5px #D5D5D5 solid;
}

/* プロジェクト画像 */
.productInfomunu {
		
	padding-top: 5%;

	padding-left: 2%;

	padding-right: 2%;
	
	width: 20%;
		
}

/* Each product Information in the catalog */

.mainContent .productRow .productInfo {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;

	width: 22%;
	
}


.productInfo2 {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;
	
	padding-bottom: 5%;
	
	width: 90%;

}

.productInfo3 {

	float: left;
	
	padding-top: 5%;

	padding-left: 10%;

	padding-right: 10%;
	
	padding-bottom: 5%;
	
	width: 100%;

}

.productInfomunu {

	float: left;
	
	padding-top: 2%;

	padding-left: 2%;

	padding-right: 2%;
	
	padding-bottom: 7%;

	width: 20%;
   	
}

.productInfomunu2 {

	float: left;
	
	padding-top: 5%;

	padding-left: 2%;

	padding-right: 2%;
	
	padding-bottom: 4.9%;

	width: 20%;
   	
}

/* Prices of products in catalog view */

.productRow .productInfo .price {

	font-size: 19px;

}

.price2 {
	
	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	position: relative;

	top: -20px;

	font-size: 15px;

}

/* Prices of a products in catalog */

.productRow .productInfo .price {

	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	font-size: 22px;

	position: relative;

	top: -20px;

}

/* Prices of products in catalog view */

.productRow .productInfo .price {
	
	font-size: 19px;

}

.pri{
		font-family:  Meiryo, 'sans-serif';
}

.pri2 {
		font-family:  Meiryo, 'sans-serif';


	font-size: 9px;

}

.productRow .productInfo .productContent {

	position: relative;

	top: -37px;

	font-size: 16px;

	font-family:  Meiryo, 'sans-serif';

	font-style: normal;

	font-weight: 200;

	color: rgba(146,146,146,1.00);

	white-space: pre-wrap;

}

.productContent2 {

	position: relative;

	top: -10px;

	font-size: 20px;

	font-family:  Meiryo, 'sans-serif';

	font-style: bold;

	font-weight: 200;

	color: #414141;

	white-space: pre-wrap;
	
	text-align: center;

}

.productContent3 {

	position: relative;

	top: -10px;

	font-size: 16px;

	font-family:  Meiryo, 'sans-serif';

	font-style: normal;

	font-weight: 200;

	color: #414141;

	white-space: pre-wrap;
	
	text-align: center;

}

/* Buy button for products in catalog */

.productRow .productInfo .buyButton {

	position: relative;

	top: -48px;

	width: 84%;

	background-color: rgba(208,207,207,1.00);

	height: 35px;

	color: rgba(255,255,255,1.00);

	border-style: none;

	font-size: 14px;

	text-transform: uppercase;

	margin-top: 8px;

}

/* map */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Content holders in catalog view */

.productRow .productInfo .productContent {

	font-size: 16px;

}

/* Buy buttons in catalog view */

.productRow .productInfo .buyButton  .nava{

	font-size: 15px;

}

/* Container for links in footer */

#mainWrapper footer .footerlinks {

	float: none;

	width: 100%;

	position: relative;

	top: 17px;

	clear: both;

	text-align: center;

	left: 0%;

	padding-bottom: 19px;

}

/* footer */

#mainWrapper footer {

	clear: both;

	overflow: auto;

	background-color: #FFFFFF;

	font-family:  Meiryo, 'sans-serif';

	font-style: normal;

	font-weight: 200;

	line-height: 1.8;

	padding-top: 22px;

	padding-left: 22px;

	text-align: center;

	padding-bottom: 22px;

	padding-right: 22px;

}

/*Each footer content */

#mainWrapper footer div {

	width: 90%;

	float: left;
	
	text-align: center;

	padding-left: 5%;

	padding-right: 5%;

	color: #000000;

}

/*Links in sidebar */

.sidebar #menubar .menu ul li a {

	color: rgba(146,146,146,1.00);

	text-decoration: none;

}

.sidebar #menubar .menu ul li a:hover {

	color: rgba(107,97,97,1.00);

	text-decoration: none;

}

/* Menu headings in sidebar */

#menubar .menu h2 {

	font-size: 14px;

}

/*Links under menus in sidebar */

#menubar .menu ul li a {

	font-size: 14px;

}

/* Menus in sidebar */

.sidebar #menubar .menu {

	margin-bottom: 29px;

}

/* Container for links in footer */

footer .footerlinks {

	margin-top: 70px;
	font-family:  Meiryo, 'sans-serif';
}

/* TOP戻るボタン*/
p.gotop{
    position: fixed;
    right: 1%;
        bottom: 0;
}
p.gotop a{
    width: 50px;
    height: 50px;
    display: block;
}

/* マウスを置くと変わる */

kira:hover {
	opacity: 1;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: flash;
	animation-duration: 1s;
	animation-name: flash;
}

/* 画像に枠をつける */
.gazouwaku{ 
 border:1px solid #D5D5D5;/* 外枠の色 */ 
 padding:8px;/* 余白 */ 
 background-color:#ffffff;/* 余白部分の色 */ 
}

/* 飾りボタン */
.btn {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 50px;
	margin-top: 70px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 50px;
	font-family:  Meiryo, 'sans-serif';
    font-size: 12px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #D5D5D5;
    cursor: pointer;
    overflow: hidden;
}

.btn p {
    width: 100%;
    height: 100%;
    color: #D5D5D5;
}

.btn p {
    width: 100%;
    height: 100%;
    color: #D5D5D5;
}

/* Links in footer */

footer div a {

	color: rgba(146,146,146,1.00);

	display: block;

	text-decoration: none;

	text-align: center;

}

.pr {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;
	
	padding-bottom: 0%;
	
	width: 90%;

}

/* Product's images in catalog */

.productInfo div img {

	width: 100%;

}

/* Container for each footer divisions */

#mainWrapper footer div {

	width: 44%;

	text-align: justify;

	font-size: 15px;

}

/* Links1 */

.list ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 50%;
}
.list ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: 80px;
	margin-left: 80px;
    padding: 5px;
    position: relative;
    left: 0%;
}

/* Links2 */
#headerLinks2 a {
	
	font-family: Meiryo;

	color: #000000;

	font-size: 28px;
}

.list2 {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.list2 ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 18%;
}
.list2 ul li {
	display: inline-block;
	*display: inline;
    float: left;
    width: 100px;
    margin-right: 2px;
	margin-left: 2px;
    padding: 2px;
    position: relative;
    left: -10%;
	zoom: 1;
}

/* Links in footer */

.footerlinks p a {

	padding-top: 0px;

	padding-bottom: 0px;

	display: inline;

	padding-right: 35px;

}

/* Footer region */

#mainWrapper footer {

	padding-left: 16px;

	overflow: hidden;

}

/* Links in header */

header #headerLinks a {

	padding-left: 0px;

	padding-right: 30px;

}

/* Offer- Text banner */

#mainWrapper #offer {

	padding-left: 22%;

}

/* Paragraphs in footer */

footer .footerlinks p {

	display: inline;

}

.list ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: 20px;
	margin-left: 20px;
    padding: 5px;
    position: relative;
    left: -50%;
}

.slide {
    position: absolute;
    top: -100%; left: 0;
    width: 100%;
    height: 100%;
    background: #D5D5D5;
    color: #000000;
}
.reset {
    visibility: hidden;
    -webkit-transition: none 0s ease 0s;
            transition: none 0s ease 0s;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

/* マウスホバーした時 */
.slide.enter {
    -webkit-transition: -webkit-transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
            transition:         transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}
/* マウスホバーが離れた時 */
.slide.leave {
    -webkit-transition: -webkit-transform .15s ease-in-out 0s;
            transition:         transform .15s ease-in-out 0s;
    -webkit-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0);
}

/* メールテーブル文字 */
.prpost {
	font-family:  Meiryo, 'sans-serif';
	text-align: center;
}
 
.prpost2 {
	font-family:  Meiryo, 'sans-serif';
	text-align: center;
    font-size: 12px;
}

/* モーダルウィンドウ */
#contents {
    margin: 0 auto;
    padding: 10px 0 50px 0;
    width: 100%;
}
 
p {
    padding: 10px 0;
}
 
#open01,
#open02, 
#open03 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -200px;
    width: 400px;
    height: 300px;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    width: 400px;
    height: 8px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #C5C5C5;
}
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
	font-family:  Meiryo, 'sans-serif';
    line-height: 160%;
    text-align: center;
}
 
/*TOPへ戻る*/
#page-top {
    position: fixed;
    bottom:15px;
    right: 15px;
    font-size: 77%;
}
#page-top a {
    background: #A8A8A8;
    text-decoration: none;
    color: #fff;
    width: 30px;
    padding: 1px ;
    text-align: center;
    display: block;
    border-radius: 5px;
}

#page-top a:hover {
    text-decoration: none;
    background: #BCBCBC;
}

/**くるん回るボタン**/
.button {
display: inline-block;
	width: 98px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	margin-top: 5px;
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 5px;
	line-height: 54px;
	outline: none;	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.button span {
	display: block;
	position: absolute;
	width: 90px;
	height: 60px;
	border: 2px solid #B1B1B1;
	text-align: center;
	line-height: 56px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
.button span:nth-child(1) {
	background-color: #B1B1B1;
	color: #fff;
	font-family:  Meiryo, 'sans-serif';
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button span:nth-child(2) {
	background-color: #fff;
	color: #B1B1B1;
	font-family:  Meiryo, 'sans-serif';
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.button:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.button:hover span:nth-child(2) {
	background-color: #333;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}


}


/* 640px以下 */
@media screen and (max-width:640px) {
	
#mainWrapper1{

	width: 85%;
	
	padding-top: 150px;
	
	img: 50%;

}

/* ロゴ */
.example1 {
	
		width: 65%;
		
		height: auto;
	
}

/* search field in sidebar */

#content .sidebar #search {

	display: none;

}

/* sidebar */

#content .sidebar {

	float: none;

	width: 100%;

	height: auto;

	overflow: auto;

	padding-left: 12%;

	padding-top: 0px;

}

/* horizontal separators in sidebar */

#content .sidebar hr {

	display: none;

}

/*The sidebar and maincontent of page */

#content {

	position: relative;

	top: -22px;

	width: 100%;

	overflow: hidden;

}

/*menu headings in sidebar */

#menubar .menu h2 {

	display: inline;

	font-size: medium;

	padding-right: 6%;

}

/* Unordered List of links */

#menubar .menu ul {

	display: inline;

}

/*list elements */

#menubar .menu ul li {

	display: inline;

	font-size: medium;

	padding-left: 0%;

	padding-right: 3%;

}

/*The link to be hidden in tablet view */

.sidebar #menubar .menu ul .notimp {

	display: none;

}

/* menus in sidebar */

.sidebar #menubar .menu {

	width: 100%;

	text-align: center;

	position: relative;

	top: 16px;

}

/*menubar in sidebar */

#content .sidebar #menubar {

	position: relative;

	left: -7%;

	overflow: hidden;

	width: 95%;

	padding-top: 0px;

}

/* offer banners content */

#mainWrapper #offer p {

	font-size: small;

}

/* main content region of page */

#mainWrapper #content .mainContent {

	overflow: hidden;

	width: 95%;

	margin-top: 40px;

}

/* Prices of products in catalog view */

.productRow .productInfo .price {

	font-size: 19px;

}

.pri {
	
	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	position: relative;

	top: -20px;

	font-size: 16px;

}

.pri2 {
	
	font-family:  Meiryo, 'sans-serif';

	color: rgba(146,146,146,1.00);

	position: relative;

	top: -20px;

	font-size: 16px;

}

/* Content holders in catalog view */

.productRow .productInfo .productContent {

	font-size: 16px;

}

/* プロジェクト画像 */
.productInfomunu {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;

	width: 100%;
		
}

.productInfomunu2 {

	float: left;
	
	padding-top: 5%;

	padding-left: 5%;

	padding-right: 5%;

	width: 100%;
		
}

.productInfomunu-img {
 width: 80%;
 height: auto;
 border:1px solid #D5D5D5;
 padding:15px;
}	

/* Buy buttons in catalog view */

.productRow .productInfo .buyButton  .nava{

	font-size: 15px;

}

/* Container for links in footer */

#mainWrapper footer .footerlinks {

	float: none;

	width: 100%;

	position: relative;

	top: 17px;

	clear: both;

	text-align: center;

	left: 0%;

	padding-bottom: 19px;

}

/* Container for each footer divisions */

#mainWrapper footer div {

	width: 44%;

	text-align: justify;

	font-size: 15px;

}

/* Links2 */
#headerLinks2 a {
	
	font-family: Meiryo;

	color: #000000;

	font-size: 28px;
}

.list2 {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.list2 ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 19%;
}
.list2 ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: 0px;
	margin-left: 0px;
    padding: 0px;
    position: relative;
    left: -14%;
}

/* Links in footer */

.footerlinks p a {

	padding-top: 0px;

	padding-bottom: 0px;

	display: inline;

	padding-right: 35px;

}

/* Footer region */

#mainWrapper footer {

	padding-left: 16px;

	overflow: hidden;

}

/* Links in header */

header #headerLinks a {

	padding-left: 0px;

	padding-right: 30px;

}

/* Offer- Text banner */

#mainWrapper #offer {

	padding-left: 22%;

}

/* Paragraphs in footer */

footer .footerlinks p {

	display: inline;

}

.me {
}

.list ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: 20px;
	margin-left: 20px;
    padding: 5px;
    position: relative;
    left: -50%;
}

}



/*media query for small screen devices */

@media screen and (max-width:480px) {
	
#mainWrapper1{

	width: 0%;
	
	padding-top: 150px;
	
	img: 10%;

}

/*Container for links in header */

#headerLinks {
	float: center;
	width: 100%;
	height: auto;
	text-align: right;
	position: absolute;
    background: #ffffff;
	padding-bottom: 50px;
	left: -12%;
}

#mainWrapper header {

	width: 100%;

	text-align: center;

	background-color: rgba(190,190,190,1.00);

	padding-bottom: 21px;

}

/* Logo placeholder*/

#mainWrapper header #logo {

	width: 100%;

	text-align: center;

}

.pri {

	font-size: 15px;

}

/* Links2 */
#headerLinks2 a {
	
	font-family: Meiryo;

	color: #000000;

	font-size: 28px;
	
}

.list2 {
    padding: 0;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.list2 ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 10%;
    background: #ffffff;
}
.list2 ul li {
	display: inline-block;
	*display: inline;
    float: left;
	width: 400px;
	height: 29px;
    margin-top: 0px;
    margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
    padding: 0px;
    position: relative;
    left: 0%;
	zoom: 1;
    background: #ffffff;
}

/* Links in header */

header #headerLinks a {

	text-align: center;

	padding-right: 15px;

	padding-left: 0px;

}

header #headerLinks2 a {

	text-align: left;

	padding-right: 15px;

	padding-left: 0px;

}

/*Offer - Text Banner */

#mainWrapper #offer {

	padding-left: 0px;

	text-align: center;

}

/* Menubar in sidebar */

#content .sidebar #menubar {

	position: relative;

	left: -8%;

	text-align: center;

}

/*Menu headings in sidebar */

#menubar .menu h2 {

	width: 100%;

	display: block;

}

/* Each product in catalog view */

.mainContent .productRow .productInfo {

	width: 100%;

	display: block;

	padding-left: 0px;

	padding-right: 0px;

	position: relative;

	left: -2%;

}

#mainWrapper footer div {

	width: 100%;

	margin-left: -16px;

	text-align: justify;

	padding-bottom: 16px;

	overflow: auto;

}

/* Unordered list for menu elements */

.menu ul {

	position: relative;

	padding-left: 24%;

}

/* Container for links in footer */

#mainWrapper footer .footerlinks {

	padding-left: 8%;

}

/* Main content which excludes the sidebar */

#mainwrapper #content .mainContent {

	margin-top: -81px;

	text-align: center;

	width: 100%;

	padding-left: 0px;

}
.example1 {
	
		width: 80%;
		
		height: auto;
	
}

.list ul li {
	display: inline-block;
	*display: inline;
    float: left;
    margin-right: -4px;
	margin-left: -4px;
    padding: 5px;
    position: relative;
    left: -50%;
	zoom: 1;
}

}
#mail {
}
#naiyou {
}

/***************201811*****************/

#headerLinks .nav ul,#headerLinks2 .nav ul {
    display: flex;
    justify-content: flex-center;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
/***************201812*****************/
.top .productInfo{
	overflow: hidden;
}
.top .productInfo .price {
    top: 0;
    padding: 10px 0 10px 0;
    margin: 0;
    height: 65px;
}
.top .productInfo .productContent {
    padding: 0;
    margin: 0;
    top: 0;
	height: 50px;
}
.productInfomunu {
    padding-bottom: 2%;
}
.pri {
    top: 0px;
}

/*************** 201812 Contact Form *****************/
.tb-cell {
  display: table;
  width: 300px;
  margin: 20px auto 40px auto;
  text-align: left;
}
.tb-cell .row {
  display: table-row;
}
.tb-cell .row .cell {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 10px;
  vertical-align: middle;
  color: #fff;
}
.tb-cell .row .cell:nth-child(odd) {
  width: 100px;
}
.tb-cell .row .cell:nth-child(even) {
  width: 200px;
}
.mail-form .row .cell {
  padding: 5px;
}
.mail-form .row .cell:nth-child(1) {
  background: #fbfbfb;
}
.mail-form .row .cell:nth-child(2) {
  background: #fbfbfb;
}
input[type="text"],
input[type="email"] {
  height: 30px;
  font-size: 16px;
}
textarea {
  height: 100px;
  font-size: 16px;
}
button {
  color: #000;
  border: none;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
}
button[type="button"] {
  margin-left: 10px;
}
button[type="button"],
button[type="submit"] {
  background: #ccc;
}
button[type="reset"] {
  background: #ccc;
}
button[type="button"]:hover,
button[type="submit"]:hover {
  background: #ddd;
}
button[type="reset"]:hover {
  text-decoration: underline;
}
@media (min-width: 768px) {
	.tb-cell {
	  width: 880px;
	}
	.tb-cell .row {
	  display: table-row;
	}
	.tb-cell .row .cell {
	  display: table-cell;
	  border: 1px solid #ddd;
	  padding: 10px;
	  vertical-align: middle;
	  color: #000;
	}
	.tb-cell .row .cell:nth-child(odd) {
	  width: 200px;
	}
	.tb-cell .row .cell:nth-child(even) {
	  width: 600px;
	}
	input[type="text"],
	input[type="email"] {
	  width: 300px;
	}
	textarea {
	  width: 680px;
	}
}