/*
Theme Name: ！更新禁止！ Customizable
Theme URI: https://fasterthemes.com/wordpress-themes/customizable
Author: FasterThemes
Author URI: https://fasterthemes.com/
Description: Customizable is a WordPress responsive cooperate theme developed for personal and corporate websites. Customizable is a free WordPress theme with premium functionality and design. Customizable Theme is built on top of Twitter Bootstrap which means that your site can be displayed on every device (pc, laptop, mobile devices, tablets etc) without horizontal scrolling. It comes with several customization options which are available inside Customize menu under Appearance menu of WordPress admin panel. Step by step documentation for setup of website inclucing DUMMY DATA files is available here => https://fasterthemes.com/documentation/customizable/
Version: 2.3.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: right-sidebar, one-column, two-columns, full-width-template, theme-options, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready
Text Domain: customizable
This theme, like WordPress, is licensed under the FasterThemes.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');

body {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: 14px;
	float: left;
	color: #454545;
	max-width: 100%;
	background-color: #ffffff;
	font-family: 'Cabin', sans-serif;
}
#site-header{
	text-align:center;
	width:100%;}
.bypostauthor{
	}
.clear {
	clear: both;
}
.clearl {
	clear: left;
}
.clearr {
	clear: right;
}
/***** * * * * * /
/* Headings */
h1, h2, h3, h4, h5, h6 {
	clear: both;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
/* Text elements */
p {
	margin-bottom: 1em;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
li > ul, li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0 1.5em 1.5em;
}
b, strong {
	font-weight: bold;
}
dfn, cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
	border-left: 5px solid #00BEE0 !important;
}
blockquote p{
	font-size: 14px;
    font-style: normal;
    line-height: 26px;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 14px;
	line-height:26px;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code, kbd, tt, var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	white-space: normal;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

blockquote {
	color: #767676;
	font-size: 19px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.2631578947;
	margin-bottom: 24px;
}

blockquote cite,
blockquote small {
	color: #2b2b2b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}
sup, sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: 75%;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}

embed,
iframe,
object,
video {
	margin-bottom: 24px;
	max-width: 100%;
}

p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {
	margin-bottom: 0;
}
::selection {
	background: #00BEE0;;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #00BEE0;;
	color: #fff;
	text-shadow: none;
}
table,
th,
td {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin-bottom: 24px;
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
caption{
	margin-bottom: 15px;
}
#calendar_wrap caption{
	margin-bottom: 0px;
	/*padding-top: 0px;*/
	color: #c8c8c8;
	padding: 0px;
}
#calendar_wrap th{
	/*text-align: left;
	padding: 0px;*/
	color: #c8c8c8;
}
/*#calendar_wrap td{
	text-align: left;
	padding: 0px;
}*/
th {
	border-width: 0 1px 1px 0;
	font-weight: bold;
	padding: 7px;
	text-align: center;
}

td {
	border-width: 0 1px 1px 0;
	padding: 7px;
	text-align: center;
}
.section_post td,
.section_post th {
	padding: 8px;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
button, input, select, textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
 *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
select {
	max-width: 275px /*!important*/;
	padding: 5px;
	margin-top: 15px !important;
	white-space: normal;
	word-wrap: break-word;
	overflow: auto;
	background: transparent;
}
button, input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
}
select.wpcf7-select {
	margin-top: 0px !important;	
}


input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	border: 1px solid #c9c9c9;
    width: 100%;
    height: 37px;
    margin: 0;
    padding: 0 5px;
    float: left;
    font-style: italic;
    font-size: 14px;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
 -webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
 border: 0;
 padding: 0;
}
textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 3px;
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 98%;
}
.error404 .customizable-not-found .customize-container form input[type="submit"]{
	padding: 10px 30px;
    margin: 0px 0;
    color: #FFF;
    background-color: #00bee0;
    font-size: 13px;
    font-weight: normal;
    border: 2px solid transparent;
    transition: 0.3s all ease-in-out;
}
.error404 .customizable-not-found .customize-container form label{
	display: -webkit-box;
}
/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}
/*** * * * * * * */
img {
	border: none;
}
a {
	text-decoration: none;
	color: #00bee0;
}
a:hover, a:focus {
	text-decoration: none;
}
.wrapper {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
	max-width: 100%;
	background-color: #f6f6f6;
}
.top_header {
	width: 100%;
	margin: 0;
	padding: 25px 0;
	float: left;
	max-width: 100%;
	height: auto;
	background-color: #1f1f1f;
	border-top: 1px solid #00BEE0;
}
.logo {
	/*width: 15%;*/
	padding-top: 10px;
	float: left;
}
.logo h1{
	color:#00BEE0;
    font-size: 18px;
    margin: 0;
}
.logo h6{
	color:#bbb;
	font-style:italic;}
.header_right {
	/*width: 70%;
	height: auto;
	margin: 0;
	padding: 0;*/
	float: right;
}
.header_right .navbar-toggle{
	display: none;
}
.header_right .rightmenu{
	display: inline-block;
	margin: 0px 30px;
}
.customize-menu {
	/*width: 79%;
	margin: 0;
	padding: 0px 0;*/
	float: left;
}
.customize-menu > ul {
	/*float: right;*/
	padding: 0;
	margin: 0;
	/*text-align: center;*/
}
.customize-menu > ul li:hover > ul {
	display: block;
}
.customize-menu > ul > li {
	display: inline-block;
	position: relative;
}
.customize-menu ul li a {
	/*border: 1px solid rgba(0,0,0,0);*/
	color: #ffffff;
	display: inline-block;
	padding: 10px 10px;
	font-size: 14px;
	letter-spacing: 0.5px;
}
.customize-menu ul li a:hover, .customize-menu ul li a:focus, .customize-menu ul li.current-menu-item a, .customize-menu ul li.current_page_item a {
	color: #06a1bd;
	/*border: 1px solid #7e7e7e;*/
	/*border-radius: 3px;*/
}
.customize-menu > ul li > ul {
	display: none;
	margin: 0;
	padding: 0px;
	position: absolute;
	top: 41px;
	z-index: 9;
	/*border: 1px solid #7e7e7e;*/
	border-radius: 3px;
	background-color: #2d2d2d;
}
.customize-menu > ul li > ul li {
	list-style: none;
	min-width: 160px;
	text-align: left;
	position: relative;
}
.customize-menu > ul li > ul ul {
	left: 100%;
	position: absolute;
	top: 0;
}
.customize-menu > ul li > ul li a {
	/*background-image: url("images/li.png");
	background-repeat: no-repeat;
	background-position: 10px 15px;
	padding: 5px 15px 5px 25px;*/
	text-transform: capitalize;
	width: 100%;
}
.customize-menu > ul li > ul li a:hover, .customize-menu > ul li > ul li.current-menu-item a, .customize-menu > ul li > ul li.current_page_item a {
	/*border: 1px solid rgba(0,0,0,0)*/
}
.icon-color {
	background-color: #00bee0;
}
.search_box {
	/*width: 100%;*/
	height: auto;
	margin: 0;
	padding-top: 6px;
	float: right;
	position: relative;
}
.search_box input {
	width: 100%;
	height: 34px;
	color: #FFF;
	padding-left: 5px;
	border-radius: 3px;
	background-color: #2e2e2e;
	border: none;
}
.search_box input[type="button"] {
	background: url(images/search-icon.png) no-repeat 1px 8px;
	margin-left: -28px;
	width: 25px;
	cursor: pointer;
	position: absolute;
	float: right;
	top: 6px;
	right: 5px;
}
.customize-breadcrumb {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 30px 0 20px 0;
	float: left;
	max-width: 100%;
	background: url(images/header-img.png) 7px -82px repeat;
}
.customize-breadcrumb h1 {
	color: #FFF;
	font-size: 30px;
	text-transform: capitalize;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
	word-wrap: break-word;
}
.customize-breadcrumb ol {
	float: left;
	color: #FFF;
	padding: 0;
	text-align: center;
	width: 100%;
	font-size: 18px;
	font-weight: normal;
	text-transform: capitalize;
}
.customize-breadcrumb ol li {
	list-style: none;
	display: inline;
}
.customize-breadcrumb li {
	color: #00bee0;
}
.customize-breadcrumb a {
	color: #fff;
}

/*Common*/

#main {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  #main {
    width: 750px;
  }
}
@media (min-width: 992px) {
  #main {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  #main {
    width: 1170px;
  }
}
@media (min-width: 768px) {
  .incontainer {
    width: 750px;
	 margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .incontainer {
    width: 970px;
	 margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .incontainer {
    width: 1170px;
	 margin: 0 auto;
	 padding: 0 15px;
  }
}

@media (min-width: 1200px) {
  #stores.incontainer {
    width: 1170px;
	 margin: 0 auto;
	 padding: 0 15px;
  }
}


#main p {
	color: #444444;
	letter-spacing: 5px;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.en { font-family: 'Lato', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; }

.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrow_box{
  position: relative;
  border: 1px solid #172a46;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  color: #172a46;
  padding: 10px 50px;
  background-color: #ffffff;
}
.arrow_box:hover {
	background-color: #3987ad;
}
.arrow_box:before,
.arrow_box:after{
  content: '';
  display: block;
  position: absolute;

  top: 50%;
  left: 0;
  height: 1px;
  background: #172a46;
}
.arrow_box:before{
  width: 75px;
  transform: translate(-50px, 0px);
  transition: 0.3s all linear;
}
.arrow_box:after{
  width: 10px;
  transform-origin: right center;
  transform: translate(15px, 0px) rotate(45deg);
  transition: 0.3s all linear;
}

.arrow_box:hover::before{
  transform: translate(-40px, 0px);
}
.arrow_box:hover::after{
  transform: translate(25px, 0px) rotate(45deg);
}

/*Navigation*/
.primary-nav-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
	z-index: 500;
}
.primary-nav-trigger .menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 35px;
  height: 2px;
  background-color: black;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */
}
.primary-nav-trigger .menu-icon::before, .primary-nav-trigger .menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  right: 0;
  -webkit-transition: -webkit-transform 0.5s, top 0.5s, background-color 0s;
  -moz-transition: -moz-transform 0.5s, top 0.5s, background-color 0s;
  transition: transform 0.5s, top 0.5s, background-color 0s;
}
.primary-nav-trigger .menu-icon::before {
  top: -7px;
}
.primary-nav-trigger .menu-icon::after {
  top: 7px;
}
.primary-nav-trigger .menu-icon.is-clicked {
  background-color: rgba(0, 0, 0, 0);
}
.primary-nav-trigger .menu-icon.is-clicked::before, .primary-nav-trigger .menu-icon.is-clicked::after {
  background-color: black;
}
.primary-nav-trigger .menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.primary-nav-trigger .menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.primary-nav-trigger .menu-icon.is-clicked { transform: inherit; }
.primary-nav-trigger .menu-icon.is-clicked::before { right: 0; }
.primary-nav-trigger .menu-icon.is-clicked::after { left: 0; }

.primary-nav li a { line-height: 24px; }
.primary-nav li span { font-size: 13px; font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic"; color: #333333; }



@media screen and (min-width: 40em) {
  .primary-nav-trigger {
    width: 50px;
    padding-left: 1em;
    background-color: transparent;
    height: 30px;
    line-height: 30px;
    right: 3em;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .primary-nav-trigger .cd-menu-text {
    display: inline-block;
  }
  .primary-nav-trigger .menu-icon {
    left: auto;
    right: 1em;
    -webkit-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
  }
}

.site-navigation-wrapper {
  /* by default it's hidden - on bottom of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(23,42,70,0.95);
  z-index: 3;
  padding: 90px 0;
 ?opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition: all .5s ease-in-out;
}

.site-navigation-wrapper.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
@media screen and (min-width: 40em) {
  .site-navigation-wrapper {
    padding: 90px 0;
  }
}

.main-navigation {
  text-align: center;
  opacity: 0;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.main-navigation ul {
  padding: 0 0 60px;
  list-style: decimal-leading-zero;
  color: #ffffff;
  margin: 0 auto;
  display: inline-block;
  position: relative;
}
#site-navigation.main-navigation li {
  font-family: 'Didact Gothic', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
  font-size: 8pt;
  font-weight: 700;
  padding: 30px 0;
  letter-spacing: 2px;
	text-align: left;
	margin-bottom: 15px;
}
.main-navigation .children, .main-navigation .menu-item-description {
	color: #ffffff;
	letter-spacing: 3px;
}
#site-navigation.main-navigation ul.primary-nav li a:hover {
	opacity: 0.4;
}
@media screen and (min-width: 40em) {
  .main-navigation li {
    font-size: 1.6em;
  }
}
.main-navigation li:last-child {
  border: none;
}
.main-navigation a {
   color: #ffffff;
   font-family: 'Lato', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
   display: inline-block;
   font-size: 20pt;
   padding-left: 30px;
   letter-spacing: 10px;
}

.no-touch .main-navigation a:hover {
  color: rgba(0, 0, 0, 0.6);
}
.main-navigation .children, .main-navigation .sub-menu {
  /*padding: 0 0 0 0;*/
	list-style: none;
   position: absolute;
	left: 0;
	margin-top: 40px;
}

#site-navigation.main-navigation .menu-item-has-children {
	padding-bottom: 135px;
}
#site-navigation.main-navigation .menu-item-has-children a {
	pointer-events: none;
}
#site-navigation.main-navigation .menu-item-has-children ul li a {
	pointer-events: auto;
}
#site-navigation.main-navigation li .sub-menu li {
	padding: 5px 0 10px;
	margin-bottom: 0;
	margin-left: 30px;
}
#site-navigation.main-navigation li .sub-menu li a {
	font-size: 13pt;
	letter-spacing: 3px;
	padding-left: 0px;
}
.main-navigation .children li, .main-navigation .sub-menu li {
  font-size: .6em;
  border: none;
  padding-bottom: .4em;
  padding-top: .4em;
}
@media screen and (min-width: 40em) {
  .main-navigation .children li, .main-navigation .sub-menu li {
    font-size: .7em;
  }
}
.main-navigation .children li ul, .main-navigation .sub-menu li ul {
  padding: 0;
}
.main-navigation .children li ul li, .main-navigation .sub-menu li ul li {
  padding-bottom: .2em;
  padding-top: .2em;
}
.main-navigation .children li:last-child, .main-navigation .sub-menu li:last-child {
  margin-bottom: 0;
  border: none;
}

.site-navigation-wrapper.is-visible .main-navigation {
  opacity: 1;
  display: table-cell;
  vertical-align: middle;
}

.primary-nav-trigger:hover { opacity: 0.5; }
.primary-nav-trigger .menu-icon { background-color: #333333; transform: rotate(-45deg); right: 15px; }
.primary-nav-trigger .menu-icon::before { top: -15px; right: 15px; }
.primary-nav-trigger .menu-icon::after { top: 15px; right: -15px; }
.primary-nav-trigger .menu-icon::before, .primary-nav-trigger .menu-icon:after { background-color: #333333; }
.site-navigation-wrapper.is-visible { z-index: 200; display: table; }
.primary-nav-trigger .menu-icon.is-clicked::before, .primary-nav-trigger .menu-icon.is-clicked::after { background-color: #ffffff; }

.home .primary-nav-trigger .menu-icon { background-color: #ffffff; }
.home .primary-nav-trigger .menu-icon::before, .home .primary-nav-trigger .menu-icon:after { background-color: #ffffff; }
.home .primary-nav-trigger .menu-icon.is-clicked { background-color: rgba(0, 0, 0, 0); }

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav {
	display: inline-block;
    color: #ffffff;
    list-style: none;
    padding-left: 150px;
    position: relative;
    margin-top: 0px;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li {
    text-align: right;
    font-family: 'Lato', 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
    padding: 8px 0px;
    margin-bottom: 6px;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li a {
	color: #ffffff;
	letter-spacing: 3px;
	font-size: 10pt;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li img {
	width: 18px;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li a {
	margin-left: 10px;
	padding-left: 2px;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li a:hover {
	border-bottom: 1px solid #ffffff;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li.sns {
	padding-top: 50px;
}

.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li.sns img {
	width: 20px;
}

/*Naviモバイル設定*/
@media screen and (min-width: 767px) and (max-width: 1200px) {
.site-navigation-wrapper.is-visible .main-navigation {
    width: 100%;
    margin: auto;
	}
}
@media screen and (max-width: 991px) {
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav {
	padding-left: 80px;
	}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
.site-navigation-wrapper {
    padding: 120px 0;
	}
	.site-navigation-wrapper.is-visible .main-navigation {
    width: auto;
    display: block;
	}
	.primary-nav-trigger {
    width: 50px;
    padding-left: 1em;
    background-color: transparent;
    height: 30px;
    line-height: 30px;
    right: 3em;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
	}
.primary-nav-trigger .menu-icon {
    left: auto;
	}
	.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav {
    padding-right: 50px;
	}
	.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li {
    text-align: right;
	}
}
@media screen and (max-width: 480px) {
	.site-navigation-wrapper.is-visible .main-navigation {
    display: block;
    vertical-align: inherit;
	}
.site-navigation-wrapper.is-visible {
    /*display: flex;*/
	}
.main-navigation ul {
   display: block;
   width: 85%;
   padding-left: 0px;
	padding-bottom: 40px;
	margin-top: 50px;
	margin-left: 65px;
	}
#site-navigation.main-navigation li {
    font-size: 8pt;
    padding: 18px 0;
    letter-spacing: 2px;
    margin-bottom: 5px;
	}
#site-navigation.main-navigation li:first-child {
	padding-top: 0;
	}
.main-navigation a {
    font-size: 13pt;
    padding-left: 20px;
    letter-spacing: 6px;
	display: initial;
	}
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav {
   padding-left: 30px;
	display: block;
   position: absolute;
	left: 0;
	}
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li {
    text-align: left;
	}
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li.ec a {
   border-bottom: 0px;
	}
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li a {
	font-size: 7pt;
	}
.site-navigation-wrapper #site-navigation.main-navigation ul.secondary-nav li.sns {
	text-align: right;
	padding-top: 0px;
	margin-top: -30px;
   padding-right: 30px;
	}
	.main-navigation .children, .main-navigation .sub-menu {
	margin-top: 15px;
	margin-left: 0px;
	}
	#site-navigation.main-navigation li .sub-menu li {
	margin-left: 22px;
	}
	#site-navigation.main-navigation li .sub-menu li a {
	font-size: 13px;
	}
	.main-navigation .children, .main-navigation .menu-item-description {
	display: block;
	padding-left: 20px;
	}
}
/*Naviモバイル設定おわり*/

/*サイドナビゲーション*/

.side-right {
    position: fixed; /* 画面に固定して追従させます */
    top: 30vh; /* 表示画面の上から20%のところから表示を始めます */
    right:0; /* 固定位置は右側 */
    z-index:1; /* 他の要素より前に出します */
    margin: auto 10px;
}
.side-nav-list {
	opacity: 0;
	transition: 0.3s all linear;
}
.side-nav-list.active {
	opacity: 1;
}
.side li{
    font-size: 15px;
    font-weight: 400;
    margin: 15px 0;
    margin-right: 50px;
	
     width: 0px;
     height: 2vh;
     border-radius: 4px;
     background-color: #1d1d1d;
     display: flex;
     position: relative;
}
.side li.top-of-side{
	display: none;
}
.top-of-side{
    display: none;
}
.side-right li a{
    -webkit-writing-mode: inherit; /* Chrome,Safari対応*/
    -ms-writing-mode: inherit; /* IE対応*/
    writing-mode: inherit;
    position: absolute;
    transform: translate(-50%,-9px);
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #b7b7b7;
	color: rgba(0,0,0,0);
	transition: 0.2s all linear;
}
.side-right li a.link-current{
    width: 10px;
    height: 10px;
    color:#7f7045;
    background-color:#7f7045;
	 opacity: 1;
}
.side li a:hover {
    opacity: 0.7;
}
.side li a::after {
	color: inherit;
}
.side li a.link-current::after {
	opacity: inherit;
	color: inherit;
   right: 25px;
   position: absolute;
   top: -5px;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	letter-spacing: 0.5px;

}
.side li a#concept_link_js.link-current::after {
	content: 'Concept';
}
.side li a#coffee_link_js.link-current::after {
	content: 'Online Store';
}
.side li a#stores_link_js.link-current::after {
	content: 'Stores';
}
.side li a#shareroast_link_js.link-current::after {
	content: 'Share Roast';
}
.side li a#blog_link_js.link-current::after {
	content: 'Blog';
}
.link-current {
    color:#d7113d;
}

@media screen and (max-width:1200px){
	.side.side-right { display: none; }
}
/*サイドナビゲーション設定おわり*/
	
/*Top Page*/

#top_header {
	height: 100vh;
   /*max-height: 950px;*/
	overflow: hidden;
	position: relative;
}

#header_contents {
	z-index: 99;
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 40px auto 0;
}

#header_cover .main_img { z-index:99; opacity: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top: 0; -webkit-animation: anime 30.5s 0s infinite; animation: anime 30.5s 0s infinite; }
#header_cover .main_img:nth-of-type(2) { -webkit-animation-delay: 6.5s; animation-delay: 6.5s; }
#header_cover .main_img:nth-of-type(3) { -webkit-animation-delay: 12s; animation-delay: 12s; }
#header_cover .main_img:nth-of-type(4) { -webkit-animation-delay: 18s; animation-delay: 18s; }
#header_cover .main_img:nth-of-type(5) { -webkit-animation-delay: 24s; animation-delay: 24s; }

@keyframes anime {
	0% { opacity: 0; }
    12% { opacity: 1; }
    25% { opacity: 1; }
    37% { opacity: 0; transform: scale(1.05); /*z-index: 3;*/ }
    100% { opacity: 0 }
}

#header_cover .main_text {
    color: #ffffff; width: 80%; margin: 0 auto; vertical-align: middle; max-width: 1500px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 18%; z-index: 99;
}
#header_cover .main_text .jp {
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   font-size: 3.5rem;
   letter-spacing: 4px;
   line-height: 4rem;
   font-weight: lighter;
}
#header_cover .main_text .en {
   font-size: 1.7rem;
   letter-spacing: 3px;
   margin-bottom: 22px;
}
#header_cover .main_text .jp br{
	display: none;
}

#header_cover .fade_text {
    opacity: 0;
    animation: fadetext 3s ease forwards;
	 animation-delay: 2s;
}
@keyframes fadetext {
    100% { opacity: 1;}
}
 
/*以下遅延の指定*/
#header_cover .jp {animation-delay: 3.3s;}
#header_cover .en {animation-delay: 2s;}

body.overflow-hidden #header_contents {
	position: fixed;
	right: 0;
   left: 0;
}

#header_contents .logo {
	width: 56px;
	margin: 0px 0 0 50px;
	padding-top: 0;
	float: left;
}

#header_contents .logo2 {
	padding: 5px 0;
	width: 100px;
	margin: 0 auto;
	text-align: center;
}
	
#header_contents .text {
	right: 35px;
   transform: rotate( 
90deg
 );
   position: absolute;
   color: #333333;
   top: 65px;
   font-size: 8pt;
   letter-spacing: 2px;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.home #header_contents .text { 
   color: #ffffff;
}
.scrollbox {
	display: none;
}
.home .scrollbox {
	display: block;
	position: relative;
}
.home.overflow-hidden .scrollbox {
	display: none;
}
.home .line-arrow01 {
    height: 150px;
    border-left: 1px solid #ffffff;
    margin: -150px 58px 0 30px;
    position: absolute;
    right: 60px;
    z-index: 99;
	 animation: pathmove 3.5s ease-in-out infinite;
    opacity: 0;
}

@keyframes pathmove{
	0%{
		height:80px;
		top:0;
		opacity: 0.3;
	}
	30%{
		height:120px;
		opacity: 1;
	}
	100%{
		height:0;
		top:150px;
		opacity: 0;
	}
}

.home .line-arrow02 {
    width: 10px;
    height: 80px;
    border-bottom: 2px solid #7f7045;
    border-left: 1px solid #7f7045;
    transform: skewY( 
-45deg
 );
    margin: -5px 50px 0 30px;
    position: absolute;
    right: 60px;
    z-index: 99;
}

.home .text.line-arrow {
    right: 75px;
    transform: rotate( 
90deg
 );
    position: absolute;
    color: #ffffff;
    bottom: 100px;
    font-size: 8pt;
    letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    z-index: 99;
}

/* ヘッダーモバイル設定 */
@media screen and (min-width:1400px){
#header_cover .main_text .en {
    font-size: 1.8rem;
    margin-bottom: 35px;
	}
#header_cover .main_text .jp {
    font-size: 4rem;
	}
}

@media screen and (max-width:991px){
	#header_cover .main_text .jp {
    font-size: 3rem;
	}
}
@media screen and (max-width: 480px) { 
#header_contents .logo, #header_contents .logo2 {
	display: none;
}
#header_contents .sp, #header_contents .sp .logo, #header_contents .sp .logo2 {
	display: block;
}
#header_contents .sp .logo {
	width: 30px;
	margin-top: 5px;
}
#header_contents .sp .logo2 {
	width: 75px;	
}
#header_cover .main_text {
    width: 90%;
	}
#header_cover .main_text .jp {
    /*font-size: 2.5rem;*/
	font-size: 1.8rem;
	letter-spacing: 1px;
}
#header_cover .main_text .jp span {
	display: none;
	}
#header_cover .main_text .jp br {
	display: block;
	}
#header_cover .main_text .en {
   font-size: 1rem;
	margin-bottom: 5px;
	letter-spacing: 2px;
	}
.primary-nav-trigger {
   right: 40px;
	top: -3px;
}
.primary-nav-trigger .menu-icon::before { top: -10px; right: 10px; }
.primary-nav-trigger .menu-icon::after { top: 10px; right: -10px; }
#header_contents .text {
	display: none;
}
.primary-nav-trigger .menu-icon {
	width: 30px;	
	}
.home .text.line-arrow, .home .line-arrow01, .home .line-arrow02 {
	display: none;
	}
}

@media screen and (max-width: 370px) {
	#header_cover .main_text .jp {
    font-size: 1.6rem;
	}
}

@media screen and (min-width: 480px) { 
#header_contents .sp {
	display: none;
}
}
/* モバイル設定ここまで */

.home #main {
	margin-top: 100px;
}

.home #main #concept {
	padding: 100px 0;
	margin-bottom: 150px;
}

.home #concept h1 {
	font-size: 30pt;
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	margin: 50px 0 70px;
	letter-spacing: 6px;
}

.home #concept h2.en {
	font-size: 15pt;
	letter-spacing: 6px;
	font-weight: bold;
	color: #7f7045;
}

.home #concept p {
	line-height: 35px;
   margin-bottom: 35px;
}

.home #stores {
	padding-top: 200px;
	padding-bottom: 80px;
}

#stores h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 80px;
   display: block;
   float: none;
	text-align: right;
}

#stores h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

#stores h4 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 35px;
}

#stores h4 span {
	display: block;
	font-size: 16pt;
	margin-top: 15px;
	letter-spacing: 8px;
}

#stores .children {
	position: relative;
}

#stores .children.tokyo {
	overflow: hidden;
	margin-bottom: 100px;
}

#stores .children.haru {
	overflow: hidden;
	margin-top: 100px;
	margin-bottom: 100px;
}

#stores .children .left {
	overflow: hidden;
   float: left;
   width: 735px;
}

#stores .children .right {
    overflow: hidden;
    margin-top: 128px;
    height: 410px;
}

#stores .children.haru .left {
	float: right;
}

#stores .children.haru .right {

}

#stores .children.tokyo h4 {
	width: 735px;
	float: left;
}

#stores .children.haru h4 {
	width: 735px;
	float: right;
	text-align: left;
}

#stores .children p.photo {
	width: 735px;
	float: left;
	margin-bottom: 50px;
}

#stores .children.haru p.photo {
	float: right;
}

#stores .children.tokyo .illust {
	position: absolute;
	top: 340px;
   right: 100px;
}

#stores .children.tokyo .illust img {
	width: 165px;
}

#stores .children.haru .illust {
	position: absolute;
	top: 265px;
   left: 140px;
}

#stores .children.haru .illust img {
	width: 115px;
}

#stores .children p.text {
	width: 735px;
	font-size: 11pt;
	clear: left;
	letter-spacing: 2pt;
	float: left;
	line-height: 30px;
}

#stores .children.haru p.text {
	float: right;
}

#stores .link {
    width: 200px;
    float: left;
    padding: 30px 0;
    position: relative;
    margin-top: 300px;
	transition: 0.3s all linear;
}

#stores .link .line {
	transition: 0.3s all linear;
}

#stores .link:hover {
	transform: translate(10px, 0);
}

#stores .link:hover .line {
	transform: translate(20px, 0);
}

#stores .children.haru .link {
	float: right;
}

#stores .arrow {
	padding: 0;
	height: 50px;
   width: 50px;
}

#stores .link .line {
	border-bottom: 1px solid #216075;
   width: 50px;
   position: absolute;
   top: 55px;
   left: 40px;
	/*animation: slide 3.5s infinite;*/
}

@keyframes slide {
  0% {
    transform: translate(-10px, 0);
  }
  80% {
    transform: translate(20px, 0px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

#stores .link p {
	padding-left: 100px;
	margin-bottom: 0;
}

#stores .arrow-button::before {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid #073849;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	 transition: 0.3s all linear;
}
#stores .link:hover a.arrow-button::before {
	background-color: #073849cc;
}
#stores .arrow-button::after{
    left: 18px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #073849;
    border-right: 1px solid #073849;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	transition: 0.3s all linear;
}
#stores .link:hover a.arrow-button::after {
	 border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

.home #coffee-cover {
	background-color: #f5f5f5;
	width: 100vw;
	position: relative;
	left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}

#coffee {
	/*height: 800px;*/
	padding: 100px 0;
}

#coffee h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 35px;
	display: inline-block;
	float: right;
	text-align: right;
}

#coffee h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

#coffee .parent {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
}

#coffee .parent .entry:nth-child( 2n ){
	margin-top: 120px;
}

#coffee .entry {
	 width: 40%;
    padding: 5% 2%;
}

#coffee .entry .thumb img {
	width: 100%;
	height: 380px;
	object-fit: cover;
}

#coffee .entry .thumb a img {
	transition: 0.3s all linear;
}

#coffee .entry .thumb a:hover img {
  opacity: 0.7;
}

#coffee .entry h4 {
	font-size: 16pt;
	letter-spacing: 4px;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin-top: 25px;
}

#coffee .entry h4 a {
	color: #333333;
}

#coffee .entry .beans {
	color: #333333;
	font-size: 10pt;
   letter-spacing: 2px;
}

#coffee .entry .features {
	margin-top: 20px;
	font-size: 10pt;
   letter-spacing: 2px;
}

#coffee p.link {
   margin: 100px 0 80px;
   padding-left: 50px;
	text-align: center;
}
	
#coffee p.link a:hover {
	color: #ffffff;
}

#coffee .line-button {
  margin-top 20px; /*なくてもOK*/
  position: relative;
  width: 120px;
  height: 48px;
  display: flex;
  align-items: center;
  color: #073849;
  font-size: 11pt;
  letter-spacing: 4px;
	padding-left: 0;
	display: inline;
}

#coffee .line-button:before,
#coffee .line-button:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    height: 1px;
    background: #073849;
    left: 130px;
}
#coffee .line-button:before{
  width: 45px;
}
#coffee .line-button:after{
  width: 0px;
}

#coffee .arrow {
	padding: 0;
	height: 50px;
   width: 50px;
}

#coffee .arrow-button::before {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid #073849;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 90px;	
}
#coffee .arrow-button::after{
    left: 107px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #073849;
    border-right: 1px solid #073849;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

 #shareroast-cover {
	background-color: #f5f5f5;
	width: 100vw;
	position: relative;
	left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}
	
#shareroast {
	/*padding-top: 70px;
	padding-bottom: 80px;*/
	padding-top: 200px;
	padding-bottom: 200px;
}
	
#shareroast h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 50px;
	display: inline-block;
}

#shareroast h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

#shareroast .illust {
	float: right;
	text-align: left;
	width: 38%;
	margin-top: 125px;
}

#shareroast .illust img {
	width: 255px;
}
	
#shareroast p {
	line-height: 40px;
}

#shareroast .more {
   margin-top: 60px;
   padding-left: 50px;
}
	
#shareroast .more a:hover {
	color: #ffffff;
}

#shareroast .line-button {
  margin-top 20px; /*なくてもOK*/
  position: relative;
  width: 120px;
  height: 48px;
  display: flex;
  align-items: center;
  color: #073849;
  font-size: 11pt;
  letter-spacing: 4px;
	padding-left: 0;
	display: inline;
}

#shareroast .line-button:before,
#shareroast .line-button:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    height: 1px;
    background: #073849;
    left: 130px;
}
#shareroast .line-button:before{
  width: 45px;
}
#shareroast .line-button:after{
  width: 0px;
}

#shareroast .arrow {
	padding: 0;
	height: 50px;
   width: 50px;
}

#shareroast .arrow-button::before {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid #073849;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 90px;	
}
#shareroast .arrow-button::after{
    left: 107px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #073849;
    border-right: 1px solid #073849;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#interview {
	padding: 100px 0;
}

#interview .journal {
	position: relative;
   width: 75%;
   max-width: 780px;
   overflow: hidden;
   clear: both;
   margin: 0 auto;
}

#interview .store-tag {
	height: 45px;
	display: inline-block;
}

#interview .store-tag .name {
	display: inline-block;
   background-color: #e4e4e4;
   height: 25px;
   border-radius: 19px;
   align-items: center;
	margin-top: 10px;
}

#interview .store-tag .name span {
	padding: 10px 15px;
   letter-spacing: 1px;
   font-weight: bold;
   vertical-align: middle;
   align-items: center;
   line-height: 25px;
   color: #7f7045;
	font-size: .75em;
}

#interview h2.slick-title {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 11pt;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	letter-spacing: 5px;
	line-height: normal;
}

#interview h2 a {
	color: #444444;	
}

#interview .link-more {
   display: inline;
   float: right;
   margin-top: 10px;
   font-size: 10pt;
   letter-spacing: 3px;
}

#interview .link-more a {
	color: #444444;
}
	
#interview h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 35px;
	display: inline-block;
	float: left;
	text-align: left;
}

#interview h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

#interview .excerpt p {
	font-size: 10pt;
   line-height: 30px;
	letter-spacing: 2.5px;
}
	
#interview .slick-center .excerpt {
	max-width: 800px;
   margin: 0 auto;
   padding-left: 10.5em;
   padding-right: 10.5em;
}

#blog {
	padding: 100px 0;
}

#blog .store-tag {
	height: 45px;
	display: inline-block;
}

#blog .store-tag .name {
	display: inline-block;
   background-color: #e4e4e4;
   height: 25px;
   border-radius: 19px;
   align-items: center;
	margin-top: 10px;
}

#blog .store-tag .name span {
	padding: 10px 15px;
   letter-spacing: 1px;
   font-weight: bold;
   vertical-align: middle;
   align-items: center;
   line-height: 25px;
   color: #7f7045;
}

#blog h2.slick-title {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 11pt;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	letter-spacing: 5px;
	
}

#blog .link-more {
    display: inline;
    float: right;
    margin-top: 10px;
    font-size: 10pt;
    letter-spacing: 3px;
}
	
#blog h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 35px;
	display: inline-block;
	float: right;
	text-align: right;
}

#blog h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

#blog .excerpt p {
	font-size: 10pt;
   line-height: 30px;
	letter-spacing: 2.5px;
}
	
#blog .slick-center .excerpt {
	max-width: 800px;
   margin: 0 auto;
   padding-left: 10.5em;
   padding-right: 10.5em;
}

.home #contact-cover {
	background-color: #9b9070;
	/*width: 70vw;*/
	width: 100vw;
	position: relative;
	left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
	height: 300px;
}
	
.home #contact {
    padding: 62px 15px;
    position: relative;
    top: -300px;
    margin-bottom: -300px;
	}
	
.home #contact h3 {
	font-size: 24pt;
	letter-spacing: 6px;
	margin-bottom: 35px;
	display: inline-block;
	color: #ffffff;
}

.home #contact h3 span {
	display: block;
	font-size: 14pt;
	margin-top: 15px;
	padding-right: 5px;
	letter-spacing: 0;
}

.home #contact .link {
    width: 200px;
    padding: 0px 0;
    position: relative;
	transition: 0.3s all linear;
}

.home #contact .link .line {
	transition: 0.3s all linear;
}

.home #contact .link:hover {
	transform: translate(10px, 0);
}

.home #contact .link:hover .line {
	transform: translate(20px, 0);
}

.home #contact .children.haru .link {
	float: right;
}

.home #contact .arrow {
	padding: 0;
	height: 50px;
   width: 50px;
}

.home #contact .link .line {
	border-bottom: 1px solid #ffffff;
   width: 50px;
   position: absolute;
   top: 25px;
   left: 0px;
	/*animation: slide 3.5s infinite;*/
}

.home #contact .link p {
	padding-left: 65px;
	margin-bottom: 0;
}
.home #contact  .arrow-button::before {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid #ffffff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	 transition: 0.3s all linear;
}
.home #contact  .link:hover a.arrow-button::before {
	background-color: ;
}
.home #contact  .arrow-button::after{
    left: 15px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	transition: 0.3s all linear;
}
.home #contact .link:hover a.arrow-button::after {
	 border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

/* トップページモバイル設定 */
@media screen and (min-width:1600px){
#main {
    width: 1400px;
	}
.incontainer {
    width: 1400px;
	}
.home #concept h2.en {
    font-size: 18pt;
	}
.home #concept h1 {
    font-size: 36pt;
	}
.home #concept p {
   line-height: 60px;
	font-size: 13pt;
	}
}
@media screen and (min-width:1400px){
#main {
    width: 1200px;
	}
.incontainer {
    width: 1200px;
	}
.home #concept h2.en {
    font-size: 16pt;
	}
.home #concept h1 {
    font-size: 30pt;
	}
.home #concept p {
   line-height: 45px;
	font-size: 12pt;
	}
#coffee .entry .thumb img {
	height: 450px;
}
#coffee h3 {
    font-size: 30pt;
	}
#coffee h3 span {
    font-size: 18pt;
	}
#coffee .entry h4 {
   font-size: 20pt;
	margin-bottom: 20px;
	}
#coffee .entry .beans {
    font-size: 14pt;
	}
#coffee .entry .features {
    font-size: 12pt;
    line-height: 18pt;
	}
#stores h3 {
    font-size: 30pt;
	}
#stores h3 span {
    font-size: 18pt;
	 letter-spacing: 3px;
	}
#stores .children.tokyo h4 {
    width: 100%;
	}
#stores h4 {
    font-size: 26pt;
	}
#stores h4 span {
    font-size: 18pt;
	}
#stores .children .left {
	 width: 850px;
	}
#stores .children p.photo {
    width: 850px;
	}
#stores .children p.text {
    width: 850px;
    font-size: 12pt;
	}
#stores .children.haru h4 {
    width: 850px;
	}
#stores .children .right {
    height: 470px;
	}
#stores .link {
    margin-top: 360px;
	}
#shareroast h3 {
    font-size: 30pt;
	margin-bottom: 100px;
	}
#shareroast h3 span {
    font-size: 18pt;
	}
#shareroast p {
    font-size: 12pt;
	line-height: 50px;
	}
#shareroast p.more {
	margin-top: 120px;	
	}
#shareroast .line-button, #coffee .line-button {
	font-size: 14pt;
	}
#blog .store-tag .name {
    height: 32px;
	font-size: 11pt;
	margin-top: 15px;
	}
#blog .link-more {
    margin-top: 15px;
	}
#blog .store-tag .name span {
    line-height: 32px;
	}
#blog h2.slick-title {
   margin-top: 20px;
	font-size: 13pt;
	}
#blog .slick-center .excerpt {
	font-size: 11pt;
	max-width: 888px;
	}
#blog .excerpt p {
    font-size: 11pt;
	}
}
@media screen and (min-width:1200px){
#stores .children.tokyo .illust {
    position: relative;
    top: 200px;
    left: 50px;
}
#stores .link {
    margin-top: 190px;
}
#stores .children.haru .illust {
    position: relative;
    top: 120px;
    right: 80px;
    float: right;
	left: inherit;
}
#stores .children.haru .link {
    clear: both;
    float: right;
    margin-top: 120px;
	}
}	
@media screen and (min-width: 992px) {
#concept h1 br {
	display: none;
	}
}
@media screen and (max-width:1060px) {
.slick-slide .slick-thumbnail {
    max-height: 35vw;
}
}
@media screen and (max-width: 991px) {
#concept h1 {
	line-height: 70px;
	}
#coffee .parent {
    justify-content: space-between;
	}
#coffee .entry {
    width: 45%;
	}
#coffee .entry .thumb img {
    height: 250px;
	}
.slick-slide .slick-thumbnail {
    max-height: 35vw;
}
.slick-center.slick-slide a {
    padding-left: 7.7em;
    padding-right: 7.7em;
	}
.slick-slide img {
    height: 350px;
    object-fit: cover;
	}
}
@media screen and (max-width: 1200px) {
#main {
    padding-right: 15px;
    padding-left: 15px;
	}
.incontainer {
    padding-right: 15px;
    padding-left: 15px;
	}
}
@media screen and (max-width: 480px) {
#main {
    padding-right: 30px;
    padding-left: 30px;
	}
.incontainer {
    padding-right: 30px;
    padding-left: 30px;
	}
.home #main #concept {
    padding: 20px 0;
	}
.home #concept h2.en {
    font-size: 9.2pt;
    letter-spacing: 1.5px;
    line-height: 25px;
	}
.home #concept h1 {
   font-size: 18pt;
	letter-spacing: 3px;
	margin: 15px 0 40px;
	line-height: 40px;
	}

.home #concept p {
	font-size: 12px;
   letter-spacing: 2px;
   color: #333;
	line-height: 33px;
	}
.home #concept br.sp {
		display: block;
	}
}

@media screen and (min-width:480px) and (max-width:1200px){
#stores .children.haru h4 {
   width: 73%;
}	
#stores .children .left {
   width: 73%;
}
#stores .children .right {
   width: 27%;
}
#stores .children.tokyo h3 {
    width: 73%;
	}
#stores .children.haru h3 {
    width: 73%;
	}
#stores .children.tokyo .illust {
   right: 5%;
	}
#stores .children.haru .illust {
   left: 5%;
	}
#stores .children p.photo {
    width: 100%;
	}
#stores .children p.text {
    width: 100%;		
	}
}

@media (max-width:991px) {
#stores .children.tokyo .illust {
   right: 3%;
	}
#stores .children.haru .illust {
   left: 3%;
	}
#shareroast .illust {
    text-align: right;
    width: 25%;
	}
}

@media (max-width:767px) {
	#shareroast .illust {
    margin-top: 0px;
	}
	#shareroast .text br {
	display: none;	
	}
}

@media screen and (max-width:480px) {
	.home #concept br.sp {
		display: none;
	}
.incontainer {
    padding-right: 30px;
    padding-left: 30px;
	}
.home #stores {
    padding-top: 100px;
	}
	#stores .children .left {
   width: 100%;
	float: none;
}
#stores .children .right {
   width: 100%;
	float: none;
	margin-top: 0;
	position: relative;
	height: auto;
	padding-bottom: 100px;
}
#stores .children.tokyo h4 {
   width: 100%;
	letter-spacing: 3px;
	}
#stores h4 span {
    letter-spacing: 2px;
	}
#stores .children.haru h4 {
    width: 100%;
	line-height: 40px;
	}
#stores .children.haru h4 span {
	margin-top: 0px;
	}
#stores .children.tokyo .illust  {
	top: 10px;
    right: 0px;
    position: absolute;
    width: 100px;
	}
#stores .children.haru .illust  {
	top: 0px;
   right: 0px;
	left: inherit;
    position: absolute;
    width: 75px;
	}
	#stores .children.haru .link {
		float: none;
	}
#stores .link {
	margin-top: 0;
	padding: 20px 0;
	}
#stores .link p {
    padding-left: 50px;
	}
#stores .link .line {
    width: 40px;
    top: 40px;
    left: 0px;
	}
#stores .arrow {
    padding: 0;
    height: 40px;
    width: 40px;
	}
#stores .arrow-button::before {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
	}
#stores .arrow-button::after {
    left: 15px;
    width: 9px;
    height: 9px;
	}	

#stores .children p.photo {
    width: 100%;
}
#stores .children p.text {
    width: 100%;
	font-size: 10pt;
	letter-spacing: 2px;
	line-height: 26px;
}
	
#stores h3, #coffee h3,  #shareroast h3, #blog h3 {
    font-size: 14pt;
    letter-spacing: 3px;
	font-weight: bold;
	}
	
#stores h3 span, #coffee h3 span, #shareroast h3 span, #blog h3 span {
	font-size: 12pt;
	color: #7c7c7c;
	font-weight: normal;
	}
#coffee {
    padding: 60px 30px 100px 30px;
	}
#coffee h3 span {
		margin-top: 20px;
	}
#coffee .parent {
    justify-content: inherit;
	}
	#coffee .parent .entry {
	margin-top: 100px;		
	}
#coffee .parent .entry:nth-child( 2n ) {
	margin-top: 100px;		
	margin-left: auto;
	}
#coffee .entry {
    width: 75%;
	}
#coffee .entry .thumb img {
    height: 220px;
	}
#coffee .entry h4 {
    font-size: 14pt;
    letter-spacing: 1px;
	}
#coffee p.link {
	 padding-left: 30px;
    letter-spacing: 2px;
	}
#coffee .arrow_box {
    padding: 10px 30px;
	}
#coffee .arrow_box:before {
    width: 55px;
    transform: translate(-40px, 0px);
	}
#coffee .arrow_box:after {
    transform: translate(5px, 0px) rotate(45deg);
	}
#shareroast h3 {
    font-size: 22pt;
	}
#shareroast h3 span {
    font-size: 14pt;
	}
#shareroast .illust {
	width: 70px;
	margin-top: 20px;
	}
#shareroast .more, #shareroast .coffee {
	margin-top: 50px;
	padding-left: 50px;
	}
#shareroast .text {
	font-size: 9pt;
	letter-spacing: 2px;
	margin-top: 30px;
	line-height: 30px;
	}
#shareroast .text br {
	display: none;
	}
#interview .journal {
	width: auto;
	}
#interview .store-tag {
	display: none;
	}
#interview .link-more {
    display: none;
	}
#interview .excerpt p {
    font-size: 8pt;
    line-height: 22px;
    letter-spacing: 2px;
	}
#blog .store-tag {
	display: none;
	}
#blog .link-more {
    display: none;
	}
#blog #top-slider .slider a .slick-title {
   position: relative;
	color: #7c7c7c;
	letter-spacing: 3px;
   font-size: 9pt;
   margin-top: 20px;
	}
#blog #top-slider .slider .sp {
	display: block;
	position: absolute;
    top: 208px;
    right: 10px;
	}

#blog #top-slider .slider .sp .arrow {
	display: none;
	}
	
#blog #top-slider .slider a .sp .arrow-button::before {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 0;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    left: 0px;
	}
#blog #top-slider .slider a .sp .arrow-button::after {
    left: 0px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate( 
45deg
 );
    transform: rotate( 
45deg
 );
	}
.home #contact-cover {
    width: 100vw;
    height: 130px;
	}
.home #contact {
    padding: 9px 15px;
    top: -130px;
    margin-bottom: -130px;
	}
.home #contact .link {
    width: auto;
    position: absolute;
    top: 40px;
    left: 160px;
	}
.home #contact .link .line {
    width: 35px;
    top: 20px;
	}
.home #contact .link p {
    padding-left: 50px;
	}
.home #contact .arrow {
    height: 40px;
    width: 40px;
	}
.home #contact .arrow-button::before {
    width: 40px;
    height: 40px;
	}
.home #contact .arrow-button::after {
    left: 13px;
    width: 10px;
    height: 10px;
	}
.home #contact h3 {
    font-size: 18pt;
    letter-spacing: 5px;
	}
.home #contact h3 span {
    font-size: 12pt;
	}
	
#blog .slick-center .excerpt {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
	}
#blog .excerpt p {
    font-size: 8pt;
    line-height: 22px;
    letter-spacing: 2px;
	}
}
	
@media screen and (min-width: 480px) { 
#blog #top-slider .slider .sp {
		display: none;
	}
}

@media screen and (max-width: 370px) {
.home #concept h2.en {
    font-size: 10pt;
}
.home #concept h1 {
   font-size: 16pt;
	letter-spacing: 3px;
	}
.home #concept p {
    letter-spacing: 1px;
	}
#stores .children.tokyo h4 {
	font-size: 20pt;
	}
}
/* トップページモバイル設定ここまで */

/*blog slider */
@media only screen and (min-width: 1200px) {
#top-slider {
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    /* ページトップスライダー */
   #top-slider {
        width: 100%;
    }
   #top-slider .slick-track {
	   left: -25px;
	}
    #top-slider .slider {
        padding: 0;
        list-style-type: none;
    }
    #top-slider .slider li {
        max-height: 230px;
    }
    #top-slider .slider li.slick-slide {
		max-height: inherit;
		padding: 0 25px;
    }
    #top-slider .slick-dots li.slick-active {

	}
    #top-slider .slider a {
        padding: 0;
        position: relative;
    }
    #top-slider .slider a:after {
        content: '';
        display: block;
        width: 100%;
        height: 5.8em;
        /*background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 100%);*/
        position: absolute;
        bottom: 0;
        opacity: .5;
        z-index: 1;
    }
    #top-slider .slick-thumbnail {
        max-height: 180px;
    }
    #top-slider .slider a .slick-title {
        position: absolute;
        bottom: .1em;
        padding: .4em .9em .6em;
        font-size: 1.05em;
        color: #fff;
        z-index: 2;
    }
    .slick-dots li button, .slick-dots li button:before {
        width: 15px;
    }
}

#slider-wrap {
	width: 100vw;
	position: relative;
	left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
}

#top-slider {
    margin: 200px auto;
    font-size: .75em;
    zoom: 1;
}
#top-slider:before, #top-slider:after {
    content: "";
    display: table;
}
#top-slider:after {
    clear: both;
}
#top-slider .slick-slider {
   margin-top: 0;
	padding: 0;
}

.slick-thumbnail {
    position: relative;
    max-height: 375px;
    overflow: hidden;
}
.slick-slide a {
    display: block;
    text-decoration: none;
    color: #444;
    padding: .5em .5em 0;
}
.home .slick-slide a {
	transition: none;
}
.slick-center.slick-slide a  {
	max-width: 800px;
   margin: 0 auto;
	padding-left: 10.5em;
	padding-right: 10.5em;
}

.slick-center.slick-slide a:focus {
	outline: none;
}

.slick-slide img {
    width: 100%;
    border: 0;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
.slick-cat {
    background: #fcee21;
    color: #444444;
    position: absolute;
    top: 0;
    right: -1px;
    font-size: .8em;
    text-align: center;
    font-weight: bold;
    padding: 0.1em 0.5em;
    min-width: 8em;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha(opacity=90)";
}
.slick-title {
    font-size: 1em;
    margin: .3em 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.slick-slide a:hover .slick-title {
    color: #E69B9B;
}
#top-slider .slick-prev {
    /*left: -45px;*/
	left: 350px;
	z-index: 500;
}
#top-slider .slick-next {
    /*right: -45px;*/
	right: 350px;
}
.slick-prev:before, .slick-next:before {
	opacity: 1;
}
#top-slider .slick-prev, #top-slider .slick-next {
    width: 40px;
    height: 40px;
    /*margin-top: -10px;*/
	margin-top: -90px;
}
#top-slider .slick-prev:before {
    content: '\f104';
}
#top-slider .slick-next:before {
    content: '\f105';
}
#top-slider .slick-prev:before, #top-slider .slick-next:before {
    font-family: 'fontawesome';
    font-size: 40px;
    /*color: #272724;*/
    color: #555555;
    font-weight: normal;
}
#top-slider .slick-dots {
    bottom: -5em;
}
#top-slider .slick-dots li {
    margin: 0 1px;
}
#top-slider .slick-dots li button:before {
    width: 20px;
    height: 10px;
    content: "●";
    font-family: inherit;
}

.slick-dots li.slick-active button:before  {
	font-size: 10pt;
	color: #7f7045;
}

#blog .slick-dots li button:before {
	font-size: 7pt;	
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
   opacity: 1;
	color: #7f7045;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .15;
}

@media (max-width: 1400px) {
    #top-slider .slick-prev {
	left: 220px;
}
#top-slider .slick-next {
	right: 220px;
}
}

@media (max-width: 1161px) {
    #top-slider .slick-prev {
	left: 150px;
}
#top-slider .slick-next {
	right: 150px;
}
}
@media screen and (max-width: 991px) {
.slick-center.slick-slide a {
    padding-left: 7.7em;
    padding-right: 7.7em;
	}
#top-slider .slick-prev {
	left: 120px;
}
#top-slider .slick-next {
	right: 120px;
}
}
@media (max-width: 480px) {
    #top-slider .slick-prev {
	left: 50px;
}
#top-slider .slick-next {
	right: 50px;
}
}

/*pages*/
.page, .single {
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	color: #444444;
}

.single .single_thumb {
	 background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	/*height: calc(100vh - 170px);*/
    height: 440px;
    position: relative;
    width: 100%;
}

.single .main_content {
	width: 100%;
   max-width: 1000px;
	margin: 0 auto;
}

.single #special .main_content p {
	font-size: 12pt;
	line-height: inherit;
}

.single .main_content .section_post {
	padding: 25px 50px;
	overflow: hidden;
}

.single #special .main_content .section_post img {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.single .main_content .section_post h3{
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    letter-spacing: 2px;
    text-align: center;
}

.single .main_content .section_post .content h3{
	text-align: left;
	margin-top: 50px;
	margin-bottom: 20px;
}

.single .main_content .section_post h5 {
	 text-align: center;
    letter-spacing: 0.5px;
}

.single .main_content .section_post hr {
	margin-top: 20px;
	width: 5%;
}

.single .main_content .section_post h4 {
	font-size: 13px;
	margin-bottom: 25px;
	color: #212121;
	text-align: center;	
}

.single .main_content .section_post .content {
	margin-top: 100px;
}

.single #special .sub-contents {
	padding: 50px 50px;
}

 @media only screen and (max-width: 768px) {
.single .main_content .section_post { padding: 25px 30px; }
.single .main_content .section_post h3 { font-size: 25px; font-weight: bold; line-height: 34px; letter-spacing: 1px; }
.single .main_content .section_post h5 { font-size: 13px; }
.single .main_content .section_post h5 span { font-size: 13px; }
.single .main_content .section_post hr { width: 35px; }
.single .main_content .section_post .content { margin-top: 50px; }
}

#page_header {
   height: 180px;
	overflow: hidden;
   position: relative;
}

#page_header #header_contents {
}

.page .contaier {
	margin-top: 100px;
}

.page h2 {
	font-size: 24pt;
	font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	letter-spacing: 5px;
}

.page.haru .page_content, .page.berthtokyo .page_content, .page.minatomirai .page_content, .page.share-roast .page_content, .page.wholesale .page_content {
	padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 768px) {
.page.haru .page_content, .page.berthtokyo .page_content,  .page.minatomirai .page_content {
   width: 750px;
	margin: 0 auto;
  }
.page.share-roast .page_content, .page.wholesale .page_content  {
   width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	}
}
@media (min-width: 992px) {
.page.haru .page_content, .page.berthtokyo .page_content, .page.minatomirai .page_content, .page.share-roast .page_content, .page.wholesale .page_content  {
   width: 970px;
	margin: 0 auto;
  }
}
@media (min-width: 1200px) {
.page.haru .page_content, .page.berthtokyo .page_content, .page.minatomirai .page_content, .page.share-roast .page_content, .page.wholesale .page_content {
   width: 1170px;
	margin: 0 auto;
  }
}

@media (max-width: 480px) {
.page h2 {
   font-size: 16pt;
   letter-spacing: 5px;
  }
.page .container {
    padding-right: 30px;
    padding-left: 30px;
	}
#page_header {
    height: 130px;
	}
}

.page .fadein {
	visibility: hidden;
}

.minatomirai .main_section, .haru .main_section, .berthtokyo .main_section {
	background-color: #e8e8e0;	
}

#minatomirai h1, #haru h1, #tokyo h1{
	font-size: 32px;
   font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   text-align: center;
   letter-spacing: 8px;
   color: #444444;
   line-height: 45px;
	margin-bottom: 50px;
}

#minatomirai h1 .sub, #haru h1 .sub, #tokyo h1 .sub {
	display: block;
	font-size: 16px;
}

#minatomirai p, #haru p, #tokyo p, #roasting p, #wholesale p {
	letter-spacing: 2px;
	font-size: 11pt;
	color: #454545;
}

#minatomirai #about .cover, #haru #about .cover, #tokyo #about .cover {
    height: 550px;
    width: 100%;
    background-size: cover;
    position: absolute;
    right: 0;
}
#minatomirai #about .cover {
    background: url(https://backpackersjapan.mom/berthcoffee/image/cover_minatomirai.jpg) center right transparent no-repeat;
    background-size: cover;
}
#haru #about .cover {
    background: url(https://backpackersjapan.mom/berthcoffee/image/cover_haru.jpg) center right transparent no-repeat;
    background-size: cover;
}

#tokyo #about .cover {
	 background: url(https://backpackersjapan.mom/berthcoffee/image/cover_tokyo.jpg) center right transparent no-repeat;
	 background-size: cover;
}

#minatomirai #about .cover .plogo, #haru #about .cover .plogo, #tokyo #about .cover .plogo {
    width: 150px;
    position: absolute;
    bottom: 35px;
    left: 35px;
}

#tokyo #about .cover .plogo {
	width: auto;
	bottom: 0px;
	font-size: 40px;
   color: #ffffff;
   letter-spacing: 5px;
}

#minatomirai #about .cover .plogo img, #haru #about .cover .plogo img, #tokyo #about .cover .plogo img {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#minatomirai #about .info, #haru #about .info, #tokyo #about .info {
	margin: 0 auto;
	text-align: center;
	padding-top: 500px;
	overflow: hidden;
}
#minatomirai #about .info .logo, #haru #about .info .logo, #tokyo #about .info .logo {
	float: none;
}
#minatomirai #about .info .logo img, #haru #about .info .logo img, #tokyo #about .info .logo img {
	width: 150px;
}
#minatomirai #about .info .logo p, #haru #about .info .logo p, #tokyo #about .info .logo p {

}
#minatomirai #about .lead.parent, #haru #about .lead.parent, #tokyo #about .lead.parent {
	clear: both;
	display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
	padding-top: calc(550px + 50px);
}


#minatomirai #about .lead .children.left, #haru #about .lead .children.left, #tokyo #about .lead .children.left {
	width: 45%;
}

#minatomirai #about .lead .children.right, #haru #about .lead .children.right, #tokyo #about .lead .children.right {
	width: 50%;
}

#minatomirai #about .lead .children.right .text, #haru #about .lead .children.right .text, #tokyo #about .lead .children.right .text {
	margin: 20px 0 30px;
	line-height: 30px;
}

#minatomirai #about .gallery.parent, #haru #about .gallery.parent, #tokyo #about .gallery.parent {
	 clear: both;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-between;
}

#minatomirai #about .gallery .children, #haru #about .gallery .children, #tokyo #about .gallery .children {
	width: 32%;
}

#minatomirai #concept h4, #haru #concept h4, #tokyo #concept h4 {
	padding: 10px 0 40px;
   font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	margin-bottom: 40px;
	letter-spacing: 1.5px;
   line-height: 40px;
	font-size: 22px;
}

#minatomirai #concept h4 br, #haru #concept h4 br, #tokyo #concept h4 br {
	display: none;
}

#minatomirai #concept .text, #haru #concept .text, #tokyo #concept .text, {
   letter-spacing: 2px;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	line-height: 30px;
   margin-bottom: 40px;
}

#minatomirai #concept, #haru #concept, #tokyo #concept {
	padding: 80px 0;
	margin: 80px 0;
}

#minatomirai #concept .page_content, #haru #concept .page_content, #tokyo #concept .page_content {
	padding-top: 50px;
	padding-bottom: 100px;
}

#minatomirai #concept .page_content .parent, #haru #concept .page_content .parent, #tokyo #concept .page_content .parent {
	display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

#minatomirai #concept .page_content .left, #haru #concept .page_content .left, #tokyo #concept .page_content .left {
	width: 35%;
	float: left;
	margin-top: 35px;
}

#minatomirai #concept .page_content .right, #haru #concept .page_content .right, #tokyo #concept .page_content .right {
	width: 45%;
	text-align: left;
	float: right;
	padding: 0 5% 0 5%;
}

#minatomirai #ourcoffee, #haru #ourcoffee, #tokyo #ourcoffee {
  margin-top: 200px;
  margin-bottom: 200px;
}

#minatomirai #ourcoffee .page_content, #haru #ourcoffee .page_content, #tokyo #ourcoffee .page_content {
	background: url(https://backpackersjapan.mom/berthdemo/image/ourcoffee.png) right 450px center transparent no-repeat;
	background-size: 125px;
	width: 100%;
	text-align: right;
	position: relative;
	right: 0;
	margin-right: 0;
}

#tokyo #ecshop .page_content {
	width: 100%;
}

#minatomirai #ourcoffee .link, #haru #ourcoffee .link, #tokyo #ourcoffee .link {
	margin-top: 50px;
}

#minatomirai #ourcoffee .link a, #haru #ourcoffee .link a, #tokyo #ourcoffee .link a {
	color: #172a46;
	/* padding: 5px 10px; */
	margin: 5px 10px;
	border: 1px solid #172a46; 
	display: inline-block;
}

#minatomirai #ourcoffee .link a:hover, #haru #ourcoffee .link a:hover, #tokyo #ourcoffee .link a:hover {
	color: #ffffff;
}

#minatomirai #services, #minatomirai #news, #minatomirai #contact, #haru #services, #haru #news, #haru #contact, #tokyo #services, #tokyo #contact {
	text-align: center;
	padding-bottom: 300px;
}


#minatomirai #concept h2, #minatomirai #ourcoffee h2, #minatomirai #ecshop h2, #minatomirai #share h2, #minatomirai #menu h2, #minatomirai #news h2, #minatomirai #contact h2,
#haru #concept h2, #haru #ourcoffee h2, #haru #share h2, #haru #menu h2, #haru #news h2, #haru #contact h2, #tokyo h2 {
	font-size: 18pt;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	letter-spacing: 5px;
	margin-top: 10px;
}
#minatomirai #concept h3, #minatomirai #ourcoffee h3, #minatomirai #ecshop h3, #minatomirai #share h3, #minatomirai #menu h3, #minatomirai #news h3, #minatomirai #contact h3,
#haru #concept h3, #haru #ourcoffee h3, #haru #share h3, #haru #menu h3, #haru #news h3, #haru #contact h3, #tokyo h3 {
	font-size: 11pt;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin-top: 0px;
	font-weight: normal;
}

#minatomirai #ourcoffee .box, #haru #ourcoffee .box, #tokyo #ourcoffee .box {
	margin-top: 80px;
	letter-spacing: 2px;
}

#minatomirai #ourcoffee .page_content, #haru #ourcoffee .page_content, #tokyo #ourcoffee .page_content {
	position: inherit;
}

#minatomirai #ourcoffee .parent, #haru #ourcoffee .parent, #tokyo #ourcoffee .parent {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#minatomirai #ourcoffee .left, #haru #ourcoffee .left, #tokyo #ourcoffee .left {
	width: 45%;
	position: relative;
	left: 0;
	height: 320px;
	background-size: cover;
}

#minatomirai #ourcoffee .left {
	background: url(https://backpackersjapan.mom/berthdemo/image/haru_pphoto6.jpg) right center transparent;
}

#haru #ourcoffee .left {
	background: url(https://backpackersjapan.mom/berthdemo/image/haru_pphoto6.jpg) right center transparent;
}

#tokyo #ourcoffee .left {
	background: url(https://backpackersjapan.mom/berthdemo/image/tokyo_pphoto6.jpg) right center transparent;
	background-size: cover;
}

#minatomirai #ourcoffee .right, #haru #ourcoffee .right, #tokyo #ourcoffee .right  {
	width: 40%;
	margin-top: 80px;
	letter-spacing: 2px;	
}


#minatomirai #ecshop, #haru #share, #tokyo #ecshop {
  padding-bottom: 100px;
  margin-bottom: 100px;
  background: url(https://backpackersjapan.mom/berthdemo/image/share.png) left 350px top transparent no-repeat;
  background-size: 125px;
}

#minatomirai #ecshop .parent, #haru #share .parent, #tokyo #ecshop .parent  {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#minatomirai #ecshop .left, #haru #share .left, #tokyo #ecshop .left {
	width: 40%;
	margin-top: 80px;
	letter-spacing: 2px;	
}

#minatomirai #ecshop .right, #haru #share .right, #tokyo #ecshop .right {
	width: 45%;
	background: url(https://backpackersjapan.mom/berthdemo/image/haru_pphoto7.jpg) right center transparent;
	position: relative;
	right: 0;
	height: 320px;
	background-size: cover;
}

#minatomirai #ecshop .right, #tokyo #ecshop .right {
	background: url(https://backpackersjapan.mom/berthdemo/image/tokyo_pphoto7.jpg) right center transparent;
	background-size: cover;
}

#minatomirai #ecshop .link, #haru #share .link, #tokyo #ecshop .link {
	margin-top: 50px;
}

#haru #share .link a {
	color: #172a46;
	/*padding: 5px 10px;*/
	margin: 5px 10px;
	border: 1px solid #172a46;
	display: inline-block;
}

#haru #share .link a:hover {
	color: #ffffff;
}

#haru #services .parent {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 150px;
}

#minatomirai #seg2, #haru #seg2, #tokyo #seg2 {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   background-color: #ffffff;
}

#minatomirai #menu, #haru #menu, #tokyo #menu {
	margin-top: 150px;
	padding-top: 100px;
	margin-bottom: 200px;
}

#minatomirai #menu, #tokyo #menu {
	padding-bottom: 150px;
	margin-bottom: 0;
}

#minatomirai #menu .page_content, #haru #menu .page_content, #tokyo #menu .page_content {
width: 700px;
	background: url(https://backpackersjapan.mom/berthdemo/image/menu.png) left top -20px transparent no-repeat;
	background-size: 125px;
}

#minatomirai #menu .page_content ul, #haru #menu .page_content ul, #tokyo #menu .page_content ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	margin-top: 100px;
	padding-left: 0px;
	margin-bottom: 0;
}
#minatomirai #menu .page_content ul li, #haru #menu .page_content ul li, #tokyo #menu .page_content ul li {
	width: 40%;
	font-size: 16pt;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin-bottom: 50px;
	letter-spacing: 2px;
}
#minatomirai #menu .page_content ul li .name, #haru #menu .page_content ul li .name, #tokyo #menu .page_content ul li .name {
	float: left;
}
#minatomirai #menu .page_content ul li .price, #haru #menu .page_content ul li .price, #tokyo #menu .page_content ul li .price {
	text-align: right;
	padding-left: 50px;
}
#minatomirai #menu .page_content ul li span.sub, #haru #menu .page_content ul li span.sub, #tokyo #menu .page_content ul li span.sub {
	margin-top: 10px;
	display: block;
	font-size: 8pt;
	color: #7c7c7c;
	line-height: 18px;
}

#minatomirai #menu .page_content ul li span.sub {
	clear: both;
}

#minatomirai #menu h2, #minatomirai #menu h3, #haru #menu h2, #haru #menu h3, #tokyo #menu h2, #tokyo #menu h3 {
	text-align: right;
}

#minatomirai #services .children, #haru #services .children, #tokyo #services .children {
    width: 20%;
}

#minatomirai #services .children img, #haru #services .children img, #tokyo #services .children img {
	width: 100px;
}

/*#haru #news p.more {
	border: 1px solid #999;
   display: inline-block;
   padding: 6px 20px;
}

#haru #news p.more a {
	padding: 10px 15px;
   color: #333;
   font-weight: bold;
   letter-spacing: 3px;
}*/

#haru #news ul.list {
	list-style: none;
   padding: 0;
   margin: 30px auto 100px;
   width: 60%;
}

#haru #news ul.list li {
	padding: 15px 0;
	border-bottom: 1px solid #7c7c7c;
	text-align: left;
	font-size: 16px;
   letter-spacing: 2px;
}

#haru #news ul.list li a{
	display:block;
	padding: 15px;
	color:#333;
	text-decoration:none;
}
#haru #news ul.list li a:hover{
	color:#7c7c7c;
}

#haru #news ul.list li a:after{
	content:"";
	display:block;	
	width:8px;
	height:8px;
	border-top: #333 2px solid;
	border-right: #333 2px solid;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#haru #news ul.list li a:hover::after{
	border-top: #7c7c7c 2px solid;
	border-right: #7c7c7c 2px solid;
}

#haru #news ul.list li a{
	position:relative;
}
#haru #news ul.list li a:after{
	position:absolute;
	right: 15px;
	top:0;
	bottom:0;
	margin:auto;
}
#minatomirai #seg3, #tokyo #seg3 {
	width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #ffffff;
	}
#minatomirai #seg3 #sr, #tokyo #seg3 #sr {
    background: url(https://backpackersjapan.mom/berthcoffee/image/sr_cover.jpg) center center transparent no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}
#minatomirai #seg3 #sr .page_content, #tokyo #seg3 #sr .page_content {	
    max-width: 1200px;
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	}
#minatomirai #seg3 #sr h2, #minatomirai #seg3 #sr p, #tokyo #seg3 #sr h2, #tokyo #seg3 #sr p {
	color: #ffffff;
}
#minatomirai #seg3 #sr .big, #tokyo #seg3 #sr .big {
	margin-top: 30px;
   font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   font-size: 18px;
   margin-bottom: 50px;
}
#minatomirai #seg3 #sr .text, #tokyo #seg3 #sr .text {
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-size: 13px;
}
#minatomirai #seg3 #sr .link, #tokyo #seg3 #sr .link {
	margin-top: 100px;
}
#minatomirai #seg3 #sr .box, #tokyo #seg3 #sr .box {
    position: relative;
    color: #333333;
    padding: 8px 60px;
    background-color: #ffffff;
	font-size: 12px;
}
#minatomirai #seg3 #sr .box:hover, #tokyo #seg3 #sr .box:hover {
	opacity: 0.8;
}
#minatomirai #contact-bg, #haru #contact-bg, #tokyo #contact-bg {
	 width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #d5dde0;
}

#minatomirai #contact-inner, #haru #contact-inner, #tokyo #contact-inner { margin: 0 auto; }

@media (min-width: 768px) {
#minatomirai #contact-inner, #haru #contact-inner, #tokyo #contact-inner { width: 750px; }
}

@media (min-width: 992px) {
#minatomirai #contact-inner, #haru #contact-inner, #tokyo #contact-inner { width: 970px; }
}

@media (min-width: 1200px) {
#minatomirai #contact-inner, #haru #contact-inner, #tokyo #contact-inner { width: 1170px; }
}

#haru #contact .parent, #tokyo #contact .parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
   align-items: center;
	margin-bottom: 100px;
}

#minatomirai #contact .parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
   align-items: center;
	margin-bottom: 100px;
}

#minatomirai #contact .children, #haru #contact .children, #tokyo #contact .children {
}

#minatomirai #contact .left, #haru #contact .left, #tokyo #contact .left {
	width: 50%;
	height: ;
   margin-top: 100px;
}

#minatomirai #contact .left .sp, #haru #contact .left .sp, #tokyo #contact .left .sp {
	display: none;
}

#minatomirai #contact .left img, #haru #contact .left img, #tokyo #contact .left img {
	width: 100%;
	max-width: 470px;
	padding-top: 0;
}

#haru #contact .right, #tokyo #contact .right {
	width: 45%;
	text-align: left;
	padding-left: 5%;
   margin-top: 200px;
}

#minatomirai #contact .right {
	width: 45%;
	text-align: center;
}

#minatomirai #contact .right .address, #haru #contact .right .address, #tokyo #contact .right .address {
	font-size: 11pt;
   letter-spacing: 3px;
}

#minatomirai #contact .right .direction, #haru #contact .right .direction, #tokyo #contact .right .direction {
	font-size: 7pt;
   letter-spacing: 1px;
}

#minatomirai #contact .right .gmap, #haru #contact .right .gmap, #tokyo #contact .right .gmap {
    margin-top: 50px;
    font-size: 11pt;
    letter-spacing: 2px;
}

#minatomirai #contact .right .gmap a, #haru #contact .right .gmap a, #tokyo #contact .right .gmap a {
	border-bottom: 1px solid #999;
	color: #333;
	padding-bottom: 8px;
}

/*#haru #contact p.more {
    border: 1px solid #999;
    display: inline-block;
    padding: 30px 80px;
    clear: both;
}

#haru #contact p.more a {
	padding: 10px 15px;
   color: #333;
   font-weight: bold;
   letter-spacing: 3px;
}*/

/*Haruモバイル設定*/
@media screen and (min-width:480px) and (max-width:1200px){

#haru #concept hr {
    margin-right: 77%;
	}
#haru #concept .cover {
    height: 20%;
    width: 50%;
    background-size: contain;
	}
#haru #concept .page_content .left {
    width: 50%;
	}
#haru #services .parent {
    justify-content: space-around;
	}
#haru #share {
   background: url(https://backpackersjapan.mom/berthcoffee/image/share.png) left 45% top transparent no-repeat;
	background-size: 125px;	
	}
#haru #share .right {
    width: 45%;
    height: 300px;
	}
}

@media (max-width: 1200px) {
	#minatomirai #about .lead .children.right .text br, #haru #about .lead .children.right .text br, #tokyo #about .lead .children.right .text br {
		display: none;
	}
#minatomirai #ourcoffee .page_content, #haru #ourcoffee .page_content, #tokyo #ourcoffee .page_content {	
   background: url(https://backpackersjapan.mom/berthdemo/image/ourcoffee.png) right 240px top 80px transparent no-repeat;
	background-size: 125px;
	}
}
@media (max-width: 991px) {
#haru #share {
	padding-bottom: 100px;
	}
#minatomirai #about .lead .children.left img, #haru #about .lead .children.left img, #tokyo #about .lead .children.left img {
    height: 475px;
    object-fit: cover;
    object-position: left;
	}
#minatomirai #concept .page_content .left, #haru #concept .page_content .left, #tokyo #concept .page_content .left {
    width: 50%;
}
#minatomirai #concept .page_content .right, #haru #concept .page_content .right, #tokyo #concept .page_content .right {
    padding: 0;
	}
#haru #about .floor.parent {
    justify-content: space-around;
	}
#haru #about .floor.parent .left img {
    padding-top: 0px;
	}
#minatomirai #ourcoffee .right br, #minatomirai #ecshop .left br, #haru #ourcoffee .right br, #tokyo #ourcoffee .right br, #tokyo #ecshop .left br {
	display: none;
	}
#minatomirai #ecshop, #tokyo #ecshop {	
   background: url(https://backpackersjapan.mom/berthdemo/image/share.png) left 250px bottom 165px transparent no-repeat;
	background-size: 125px;
	}
}

@media (max-width: 480px) {
.page.minatomirai .page_content, .page.haru .page_content, .page.berthtokyo .page_content {
    padding-right: 0px;
    padding-left: 0px;
	}
#minatomirai p, #haru p, #tokyo p {
	font-size: 10pt;
}
#minatomirai #about .cover, #haru #about .cover, #tokyo #about .cover {
   height: 90vh;
	background-position: center center;
	background-size: cover;
}
#minatomirai #about .cover .plogo, #haru #about .cover .plogo, #tokyo #about .cover .plogo {
   width: 150px;
   position: absolute;
   bottom: 75px;
   margin: 0 auto;
	left: 0;
   right: 0;
}
#minatomirai #about .cover .plogo, #tokyo #about .cover .plogo {
	width: auto;
    bottom: 20px;
    left: 0;
    right: 0;
    font-size: 20px;
    text-align: center;
    letter-spacing: 3px;
}
	
#minatomirai #about .cover .plogo { 
	color: #ffffff;	
	}
#minatomirai #about .lead .children.left img, #haru #about .lead .children.left img, #tokyo #about .lead .children.left img {
    height: auto;
    padding-top: 10px;
    margin-bottom: 0px;
	}
#haru #about .info {
    padding-top: 300px;
}
#minatomirai #about .lead.parent, #haru #about .lead.parent, #tokyo #about .lead.parent {
   flex-wrap: wrap-reverse;
	padding-top: calc(90vh + 50px);
	}
#minatomirai #about .lead .children.left, #haru #about .lead .children.left, #tokyo #about .lead .children.left {
    width: 100%;
}
#minatomirai #about .lead .children.right, #haru #about .lead .children.right, #tokyo #about .lead .children.right {
    width: 100%;
}
#minatomirai #about .lead .children.right .text br, #haru #about .lead .children.right .text br, #tokyo #about .lead .children.right .text br {
	display: none;
}
#haru #about .floor.parent {
    margin-top: 50px;
	}
#haru #about .floor .children.left {
    width: 100%;
	}
#haru #about .floor .children.right {
    width: 100%;
	}
#haru #about .floor .children.right .text br {
	display: none;
	}

#minatomirai #concept h4, #haru #concept h4, #tokyo #concept h4 {
	margin-bottom: 0;	
	}
#minatomirai #concept h4 br, #haru #concept h4 br, #tokyo #concept h4 br {
	display: block;
}
#minatomirai #concept h3, #haru #concept h3, #tokyo #concept h3 {
    font-size: 12pt;
    letter-spacing: 2px;
	line-height: 30px;
	padding-bottom: 0px;
	}
#haru #concept h3 br {
		display: block;
	}
#minatomirai #concept .text, #haru #concept .text, #tokyo #concept .text {
	font-size: 9pt;
	line-height: 33px;
	}
#minatomirai #concept .text br, #haru #concept .text br, #tokyo #concept .text br {
	display: none;
	}
#minatomirai #concept, #haru #concept, #tokyo #concept {
    padding: 0px 0;
    margin: 60px 0;
	}
#haru #concept .cover {
    height: 175px;
    width: 80%;
	}
#haru #concept hr {
    display: none;
	}
#minatomirai #concept .page_content .parent, #haru #concept .page_content .parent, #tokyo #concept .page_content .parent {
	flex-direction: column-reverse;	
	}
	
#minatomirai #concept .page_content .left, #haru #concept .page_content .left, #tokyo #concept .page_content .left {
    width: 100%;
    margin-top: 0px;
	}
#haru #concept .right {
	/*display: none;*/
	}
#minatomirai #concept .right.sp, #haru #concept .right.sp, #tokyo #concept .right.sp {
	display: block;
	width: 85%;
	}
#minatomirai #concept .page_content .right, #haru #concept .page_content .right, #tokyo #concept .page_content .right {
    width: 100%;
    padding: 0px 0 0;
	}
#minatomirai #concept .page_content, #haru #concept .page_content, #tokyo #concept .page_content {
	padding-bottom: 80px;
	}
#minatomirai #concept .page_content .right img, #haru #concept .page_content .right img, #tokyo #concept .page_content .right img {
	margin-bottom: 0px;
	}
#minatomirai #ourcoffee, #haru #ourcoffee, #tokyo #ourcoffee {
    margin-top: 100px;
	}
#minatomirai #ourcoffee .page_content, #haru #ourcoffee .page_content, #tokyo #ourcoffee .page_content {
   width: 100%;
	background: url(https://backpackersjapan.mom/berthdemo/image/ourcoffee.png) left top transparent no-repeat;
   background-size: 62px;
}
#minatomirai #ourcoffee .left, #haru #ourcoffee .left, #tokyo #ourcoffee .left {
    width: 100%;
    background: url(https://backpackersjapan.mom/berthdemo/image/haru_pphoto6.jpg) right center transparent no-repeat;
    height: 200px;
    background-size: contain;
	 margin-top: 50px;
	}
#minatomirai #ourcoffee .right, #haru #ourcoffee .right, #tokyo #ourcoffee .right {
    width: 100%;
	 margin-top: 0px;
	}
#minatomirai #ourcoffee .right p, #haru #ourcoffee .right, #tokyo #ourcoffee .right p {
    text-align: left;
	}
	
#minatomirai #ourcoffee h3, #minatomirai #ecshop h3, #minatomirai #share h3, #minatomirai #menu h3, #minatomirai #news h3, #minatomirai #contact h3, #haru #ourcoffee h3, #haru #share h3, #haru #menu h3, #haru #news h3, #haru #contact h3, #tokyo #ourcoffee h3,#tokyo #ecshop h3, #tokyo #share h3, #tokyo #menu h3, #tokyo #news h3, #tokyo #contact h3 {
   font-size: 12pt;
	letter-spacing: 2px;
	}
#minatomirai #ourcoffee h2, #minatomirai #ecshop h2, #minatomirai #share h2, #minatomirai #menu h2, #minatomirai #news h2, #minatomirai #contact h2, #haru #ourcoffee h2, #haru #share h2, #haru #menu h2, #haru #news h2, #haru #contact h2, #tokyo #ourcoffee h2,#tokyo #ecshop h2, #tokyo #share h2, #tokyo #menu h2, #tokyo #news h2, #tokyo #contact h2 {
   font-size: 16pt;
	margin-top: 20px;
	}
#minatomirai #ecshop, #haru #share, #tokyo #ecshop {
   padding-bottom: 0px;
	background: url(https://backpackersjapan.mom/berthdemo/image/share.png) right top transparent no-repeat;
   background-size: 81px;
	}
#minatomirai #ecshop .parent, #haru #share .parent, #tokyo #ecshop .parent{
	flex-direction: column-reverse;	
	}
#minatomirai #ecshop .left, #haru #share .left, #tokyo #ecshop .left  {
   width: 100%;
	margin-top: 30px;
	}
#minatomirai #ecshop .right, #haru #share .right, #tokyo #ecshop .right {
   width: 100%;
	margin-top: 50px;
	position: relative;
	}
#tokyo #ecshop .link {
	text-align: right;
	}
#haru #menu {
	}
#minatomirai #menu .page_content, #haru #menu .page_content, #tokyo #menu .page_content {
   width: auto;
	background: url(https://backpackersjapan.mom/berthdemo/image/menu.png) top center transparent no-repeat;
	background-size: 125px;
   padding-top: 100px;padding: 100px 30px 0;
}
#minatomirai #menu h1, #haru #menu h1, #tokyo #menu h1 {
	font-size: 22px;
   letter-spacing: 5px;
	}
#minatomirai #menu h1 span, #haru #menu h1 span, #tokyo #menu h1 span {
	font-size: 14px;
   letter-spacing: 4px;	
	}
#minatomirai #menu .page_content ul li, #haru #menu .page_content ul li, #tokyo #menu .page_content ul li {
   width: 100%;
	}
#haru #news .page_content {
	padding-left: 30px;
	padding-right: 30px;
	}
#haru #news h1 {
	font-size: 22px;
   letter-spacing: 5px;
	}
#haru #news h1 span {
	font-size: 14px;
   letter-spacing: 4px;	
	}
#haru #news ul.list {
   width: 100%;
}

#haru #news ul.list li a {
	padding-left: 5px;
	padding-right: 5px;
	}
#haru #news ul.list li a:after {
    right: 5px;
	}
#tokyo #seg3 #sr .big {
	line-height: 32px;
	}
#tokyo #seg3 #sr .link {
	text-align: center;
	}
#haru #contact .page_content, #tokyo #contact .page_content {
	padding-left: 30px;
	padding-right: 30px;
	}
#haru #contact h1, #tokyo #contact h1 {
	font-size: 22px;
   letter-spacing: 5px;
	}
#haru #contact h1 span, #tokyo #contact h1 span {
	font-size: 14px;
   letter-spacing: 4px;	
	}
#haru #contact .left, #tokyo #contact .left {
    float: none;
    width: 100%;
    height: auto;
    margin-top: 30px;
	}
#haru #contact .left .pc, #tokyo #contact .left .pc {
	display: none;
}
#haru #contact .left .sp, #tokyo #contact .left .sp {
	display: block;
}
#haru #contact .left img, #tokyo #contact .left img {
    /*width: 235px;*/
	}
#haru #contact .right, #tokyo #contact .right {
    float: none;
    width: 100%;
    text-align: center;
    height: auto;
    padding-left: 0%;
    margin-top: 30px;
	}
#haru #contact p.more, #tokyo #contact p.more {
    padding: 10px 20px;
	}
}

@media (min-width: 480px) {
#haru #vision br.sp {
		display: none;
	}
#haru #concept .right.sp {
		display: none;
	}
#haru #concept h3 br {
		display: none;
	}
}

/*Haruモバイル設定おわり*/

#roasting h1 {
    font-size: 32px;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    letter-spacing: 8px;
    color: #444444;
    line-height: 45px;
}
	
#roasting h1 .sub {
    display: block;
    font-size: 16px;
}

#roasting #about .text {
    color: #555555;
    letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 30px;
    margin-bottom: 40px;
}

#roasting h3 {
    font-size: 18px;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    letter-spacing: 3px;
}

#roasting #about {
	padding-bottom: 100px;
}

#roasting #about h3 {
	margin-bottom: 50px;
}

#roasting #about .cover {
    background: url(https://backpackersjapan.mom/berthdemo/image/cover_share.jpg) center right transparent no-repeat;
	 height: 550px;
    width: 100%;
    background-size: cover;
    position: absolute;
    right: 0;
}

#roasting #about .cover .plogo {
	width: auto;
   position: absolute;
	bottom: 0px;
   left: 35px;
	font-size: 40px;
	color: #ffffff;
   letter-spacing: 5px;
}

#roasting #about .lead.parent {
    clear: both;
    display: flex;
    align-items: inherit;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: calc(550px + 130px);
}

#roasting #about .lead .children.left {
    width: 50%;
}

#roasting #about .lead .children.right {
    width: 50%;
}

#roasting #about .lead .children.right img {
    padding-top: 20px;
}

#roasting #seg2 {
	 padding-top: 100px;
	 padding-bottom: 150px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #e8e8e0;
}

#roasting #seg2 #info {
   margin-top: 100px;
   background: url(https://backpackersjapan.mom/berthdemo/image/share.png) left 350px top transparent no-repeat;
   background-size: 125px;
}

#roasting #seg2 .parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	align-items: center;
}

#roasting #seg2 h3 {
	margin-bottom: 50px;
}

#roasting #info .left {
    width: 40%;
    letter-spacing: 2px;
}

#roasting #info .right {
	 background: url(https://backpackersjapan.mom/berthdemo/image/share_pphoto2.jpg) right center transparent;
    background-size: cover;
    width: 45%;
    position: relative;
    left: 0;
    height: 320px;
}

#roasting #beans {
	 background: url(https://backpackersjapan.mom/berthdemo/image/ourcoffee.png) right 350px top transparent no-repeat;
   background-size: 125px;
}

#roasting #beans .left {
	 background: url(https://backpackersjapan.mom/berthdemo/image/share_pphoto3.jpg) right center transparent;
    background-size: cover;
    width: 45%;
    position: relative;
    left: 0;
    height: 320px;
}

#roasting #beans .right {
    width: 40%;
    letter-spacing: 2px;	
}

#roasting #beginners .left {
    width: 40%;
    letter-spacing: 2px;
}

#roasting #beginners .right {
	 background: url(https://backpackersjapan.mom/berthdemo/image/share_pphoto4.jpg) right center transparent;
    background-size: cover;
	 width: 45%;
    position: relative;
    left: 0;
    height: 320px;
}

#roasting #info, #roasting #beans, #roasting #beginners {
    margin-top: 200px;
    margin-bottom: 200px;
}

#roasting #info h2, #roasting #beans h2, #roasting #beginners h2 {
    font-size: 18pt;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    letter-spacing: 5px;
}
#roasting #beans h2, #roasting #beans h3 {
	 text-align: right;
	}
#roasting #info h3, #roasting #beans h3, #roasting #beginners h3 {
    font-size: 11pt;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    margin-top: 0px;
    font-weight: normal;
}

#roasting #seg2 .link {
	margin-top: 50px;
}
	
#roasting #price {
	padding: 80px 0;
   margin: 80px 0;
	text-align: right;
	position: relative;
}

#roasting #price ul {
	width: 700px;
	margin: 100px auto 40px;
	list-style: none;
	font-size: 20px;
   letter-spacing: 6px;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
   line-height: 30px;
	padding-bottom: 80px;
}
#roasting #price ul li {
	position: relative;
	text-align: left;
	margin-bottom: 40px;
   border-bottom: 1px solid #ccc;
   padding-bottom: 15px;
   padding-left: 60px;
   padding-top: 10px;
}
#roasting #price ul li.time1 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time1.png) left center no-repeat transparent;
	background-size: 45px;
}
#roasting #price ul li.time2 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time2.png) left center no-repeat transparent;
	background-size: 45px;
}
#roasting #price ul li.time3 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time3.png) left center no-repeat transparent;
	background-size: 45px;	
}

#roasting #price ul li .name{
	float: left;
}
#roasting #price ul li .fee{
	text-align: right;
}
#roasting #price ul li.last {
	margin-bottom: 0px;
}
#roasting #price ul li span {
    font-size: 15px;
    letter-spacing: 6px;
    margin-left: 30px;
}
#roasting #price .link {
	text-align: center;
}
#roasting #price .text {
	text-align: center;
}
#roasting #price .text span {
	font-size: 12px;
}
#roasting #book {
	text-align: center;
	padding-bottom: 80px;
	margin-bottom: 80px;
}
#roasting #book p.more {
    border: 1px solid #999;
    display: inline-block;
    padding: 30px 80px;
    clear: both;
}
#roasting #book p.more a {
    padding: 10px 15px;
    color: #333;
    font-weight: bold;
    letter-spacing: 3px;
}

/*Share Roasterモバイル設定*/

@media screen and (min-width:480px) and (max-width:1200px){

}

@media screen and (max-width:991px){
#roasting #about {
	padding-bottom: 180px;
	margin-bottom: 50px;
   background: url(https://backpackersjapan.mom/berthdemo/image/roaster.png) right 50px bottom no-repeat transparent;
	background-size: auto 190px;
	}
#roasting #about .lead .children.right img {
    height: 475px;
    object-fit: cover;
    object-position: left;
}
#roasting #about .text br {
	display: none;	
	}
#roasting {
	/* padding-left: 15px;
	padding-right: 15px; */
	}
#roasting #about .lead .children.left {
    width: 40%;
	}
#roasting #about .lead .children.left {
    width: 45%;
	}
#roasting #seg2 p br {
	display: none;			
	}
#roasting #price ul {
    width: 500px;
}
#roasting #price {
	overflow: hidden;
	}
#roasting #price .box.left {
	float: right;
	margin-top: 80px;
	}	
#roasting #price ul {
	position: relative;
	font-size: 11pt;
	}
#roasting #price ul li span {
    font-size: 11pt;
    margin-left: 25px;
	}
}

@media (max-width: 480px) {
#roasting #about .cover .plogo {
    width: auto;
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-size: 20px;
    text-align: center;
    letter-spacing: 3px;
}
#roasting #about {
	padding-bottom: 100px;
	background: none;
	background-size: auto 150px;
	}
#roasting #about .cover {
    height: 90vh;
	 background: url(https://backpackersjapan.mom/berthdemo/image/cover_share.jpg) center right transparent no-repeat;
    background-position: center center;
    background-size: cover;
}
#roasting #about .lead.parent {
    flex-wrap: wrap;
    padding-top: calc(90vh + 50px);
	}
#roasting #about .lead .children.left {
    width: 100%;
	}
#roasting #about .lead .children.right {
    width: 100%;
	}
#roasting h2 {
    font-size: 22pt;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    letter-spacing: 5px;
	}
#roasting #about h3 {
   font-size: 12pt;
   margin-bottom: 0px;
   letter-spacing: 2px;
	margin-bottom: 35px;
	}
#roasting #about .left p br {
	display: none;
	} 
#roasting #price h3 {
   font-size: 14pt;
   margin-bottom: 0px;
	letter-spacing: 2px;
	}
#roasting #seg2 {
	padding-top: 0px;
   padding-bottom: 100px;
	}
#roasting #seg2 .page_content {
    width: auto;
    padding-top: 100px;
    padding: 100px 30px 0;
	}
#roasting #info, #roasting #beans, #roasting #beginners {
    margin-top: 0px;
    margin-bottom: 100px;
	}
#roasting #info .parent, #roasting #beginners .parent {
	flex-wrap: wrap-reverse;
	}
#roasting #info h2, #roasting #beans h2, #roasting #beginners h2 {
    font-size: 16pt;
    margin-top: 20px;
	}
#roasting #info h3, #roasting #beans h3, #roasting #beginners h3 {
    font-size: 12pt;
    letter-spacing: 2px;
	}
#roasting #info .left {
	 margin-top: 50px;
    width: 100%;
	}
#roasting #info .left p br {
	display: none;
	}
#roasting #info .right {
    width: 100%;
	}
#roasting #beans .left {
    width: 100%;
	}
#roasting #beans .right {
	margin-top: 50px;
    width: 100%;
	}
#roasting #seg2 .link {
    text-align: right;
	}
#roasting #beginners .left {
	margin-top: 50px;
    width: 100%;
	}
#roasting #beginners .right {
    width: 100%;
}
#roasting #price {
    padding-top: 0px;
	}
	#roasting #price br {
	display: none;
	}
	#roasting #about .text, #roasting #price .text {
   font-size: 11pt;		
	}
#roasting #price {
	margin-bottom: 0;
	padding-bottom: 0;
	}
#roasting #price .box.left {
	float: none;
	margin-top: 0px;
	}
#tokyo #menu .page_content {
    width: auto;
	}
#roasting #price .page_content ul {
    width: auto;
	}
#roasting #price ul {
	padding-left: 0;
	margin-top: 50px;
	}
#roasting #price ul li {
   margin-bottom: 20px;
   padding-bottom: 10px;
	letter-spacing: 5px;
   height: 70px;
   line-height: 25px;
	}
#roasting #price ul li {
	position: relative;
	text-align: left;
	margin-bottom: 40px;
   border-bottom: 1px solid #ccc;
   padding-bottom: 15px;
   padding-left: 45px;
   padding-top: 10px;
}
#roasting #price ul li.time1 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time_sp1.png) left center no-repeat transparent;
	background-size: 30px;
}
#roasting #price ul li.time2 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time_sp2.png) left center no-repeat transparent;
	background-size: 30px;
}
#roasting #price ul li.time3 {
	background: url(https://backpackersjapan.mom/berthcoffee/image/time_sp3.png) left center no-repeat transparent;
	background-size: 30px;	
}
	#roasting #price ul li span {
	color: #333333;
   font-size: 11pt;
	display: block;
   margin-left: 0;
   font-size: 12px;
   letter-spacing: 1px;
	}
#roasting #price .link {
    margin-bottom: 150px;
	}
}

/*Share Roasterモバイル設定おわり*/

#wholesale h1 {
    font-size: 32px;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    letter-spacing: 8px;
    color: #444444;
    line-height: 45px;
}
	
#wholesale h1 .sub {
    display: block;
    font-size: 16px;
}

#wholesale #about .text {
    color: #555555;
    letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 30px;
    margin-bottom: auto;
}

#wholesale h3 {
    font-size: 18px;
    font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    letter-spacing: 3px;
}

#wholesale #about {
	padding-bottom: 100px;
}

#wholesale #about h3 {
	margin-bottom: 50px;
}

#wholesale #about .cover {
    background: url(https://backpackersjapan.mom/berthcoffee/image/cover_wholesale.jpg) center right transparent no-repeat;
	 height: 550px;
    width: 100%;
    background-size: cover;
    position: absolute;
    right: 0;
}

#wholesale #about .cover .plogo {
	width: auto;
   position: absolute;
	bottom: 0px;
   left: 35px;
	font-size: 40px;
	color: #ffffff;
   letter-spacing: 5px;
}

#wholesale #about .lead.parent {
    clear: both;
    display: flex;
    align-items: inherit;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: calc(550px + 130px);
	text-align: center;
}

#wholesale #about .lead.sp.parent {
	   padding-top: 0px;
}

#wholesale #about .lead .children.left {
   width: 50%;
	padding: 34px 3% 10px;
}

#wholesale #about .lead .children.right {
    width: 36%;
    margin-left: 14%;
    padding-top: 125px;
}

#wholesale #about .lead .children.right img {
    padding-top: 20px;
}

#wholesale #seg2 {
	 padding-top: 100px;
	 padding-bottom: 150px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #e8e8e0;
}

#wholesale #seg2 h2 {
    font-size: 18pt;
}

#wholesale #seg2 .parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	align-items: /*center*/ flex-start;
	margin-top: /*50px*/ 100px;
}

#wholesale #seg2 h3 {
	margin-bottom: 50px;
}

#wholesale #seg2 .whole .left {
    background: url(https://backpackersjapan.mom/berthcoffee/image/wholesale_pphoto3.jpg) center center transparent;
    background-size: cover;
    width: 45%;
    position: relative;
    left: 0;
    height: 320px;
}

#wholesale #seg2 .whole .right {
	width: 40%;
	letter-spacing: 2px;
}

#wholesale #seg2 .seminar .left {
   width: 40%;
   letter-spacing: 2px;
	/*margin-top: 50px;*/
	margin-top: 10px;
}

#wholesale #seg2 .seminar .right {
	 background: url(https://backpackersjapan.mom/berthcoffee/image/wholesale_pphoto4.jpg) right center transparent;
    background-size: cover;
    width: 45%;
    position: relative;
    left: 0;
    height: 320px;
}

#wholesale #seg2 .link {
	margin-top: 50px;
}
	
#wholesale #book {
	text-align: center;
	padding-bottom: 80px;
	margin-bottom: 80px;
}
#wholesale #book p.more {
    border: 1px solid #999;
    display: inline-block;
    padding: 30px 80px;
    clear: both;
}
#wholesale #book p.more a {
    padding: 10px 15px;
    color: #333;
    font-weight: bold;
    letter-spacing: 3px;
}

#wholesale #partners {
	padding: 80px 0;
   margin: 80px 0;
	text-align: right;
	position: relative;
}

#wholesale #partners .link {
	margin-top: 100px;
	text-align: center;
}
#wholesale #partners .text {
	text-align: center;
}
#wholesale #partners.text span {
	font-size: 12px;
}

#wholesale #partners .parent {
    clear: both;
    display: flex;
    align-items: inherit;
    justify-content: space-around;
    flex-wrap: wrap;
	 text-align: center;
}

#wholesale #partners .children {
	width: 46%;
}

#wholesale #partners .children img {
	margin-bottom: 0px;
}

#wholesale #partners .children a {
transition:0.3s all ease-in-out;
}

#wholesale #partners .children a img {
	opacity: 1;
	transition:0.3s all ease-in-out;
}

#wholesale #partners .children a:hover img {
	opacity: 0.7;
}

#wholesale #partners .children h4 {
	font-weight: bold;
}

#wholesale #partners .children h4 a {
	color: #212121;
	text-decoration: underline;
}

#wholesale #partners .children h4 a:hover {
	text-decoration: none;
}
	
#wholesale #partners .children h5 {
	font-size: 12px;
}

#wholesale #partners .children p.text {
	font-size: 12px;
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   text-align: center;
	margin: 50px 0;
}

#wholesale #partners .children .link {
	margin-top: 60px;
	text-align: right;
	font-size: 11px;
}

#wholesale #partners .children .link .arrow_box {
   border: 0px;
	color: #454545;
}

#wholesale #partners .children .link .arrow_box:before {
    width: 55px;
    transform: translate(-30px, 0px);
}

#wholesale #partners .children .link .arrow_box:hover {
	background-color: transparent;
}

#wholesale #partners .children .link .arrow_box:hover::before{
  transform: translate(-20px, 0px);
}
#wholesale #partners .children .link .arrow_box:hover::after{
  transform: translate(25px, 0px) rotate(45deg);
}
	
/* Wholesaleモバイル設定 */

@media screen and (min-width:480px) and (max-width:1200px){

}

@media screen and (max-width:991px){
#wholesale #about {
	padding-bottom: 180px;
	margin-bottom: 50px;
   background: url(https://backpackersjapan.mom/berthdemo/image/roaster.png) right 50px bottom no-repeat transparent;
	background-size: auto 190px;
	}
#wholesale #about .lead .children.right img {
    height: 475px;
    object-fit: cover;
    object-position: left;
}
#wholesale #about .text br {
	display: none;	
	}
#wholesale {
	/* padding-left: 15px;
	padding-right: 15px; */
	}
#wholesale #about .lead .children.left {
    width: 40%;
	}
#wholesale #about .lead .children.left {
    width: 45%;
	}
#wholesale #seg2 p br {
	display: none;			
	}
#wholesale #price ul {
    width: 500px;
}
#wholesale #price {
	overflow: hidden;
	}
#wholesale #price .box.left {
	float: right;
	margin-top: 80px;
	}	
#wholesale #price ul {
	position: relative;
	font-size: 11pt;
	}
#wholesale #price ul li span {
    font-size: 11pt;
    margin-left: 25px;
	}
}

@media (max-width: 480px) {
#wholesale #about .cover .plogo {
    width: auto;
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    left: 0;
    right: 0;
    font-size: 20px;
    text-align: center;
    letter-spacing: 3px;
}
#wholesale #about {
	padding-bottom: 100px;
	background: none;
	background-size: auto 150px;
	}
#wholesale #about .text {
    font-size: 10pt;
    margin-bottom: 30px;
    text-align: left;
	}
#wholesale #about .cover {
    height: 90vh;
	 background: url(https://backpackersjapan.mom/berthcoffee/image/cover_wholesale.jpg) center right transparent no-repeat;
    background-position: center center;
    background-size: cover;
}
#wholesale #about .lead.parent {
    flex-wrap: wrap;
    padding-top: calc(90vh + 50px);
	}
#wholesale #about .lead.sp.parent {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	}
#wholesale #about .lead.sp .children.left {
    width: 75%;
	margin-left: -25%;
	padding: 0px;
	}
#wholesale #about .lead.sp .children.right {
    width: 70%;
    margin-left: 30%;
	padding-top: 50px;
	}
#wholesale #about .lead.sp .children.right img {
    height: auto;
	}
#wholesale h2 {
    font-size: 22pt;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    letter-spacing: 5px;
	}
#wholesale #about h3 {
   font-size: 12pt;
   margin-bottom: 0px;
   letter-spacing: 2px;
	margin-bottom: 35px;
	}
#wholesale #about .left p br {
	display: none;
	} 
#wholesale #price h3 {
   font-size: 14pt;
   margin-bottom: 0px;
	letter-spacing: 2px;
	}
#wholesale #seg2 {
	padding-top: 0px;
   padding-bottom: 100px;
	}
#wholesale #seg2 .page_content {
    width: auto;
    padding-top: 100px;
    padding: 100px 30px 0;
	}
#wholesale #info, #roasting #beans, #roasting #beginners {
    margin-top: 0px;
    margin-bottom: 100px;
	}
#wholesale #seg2 .whole.parent {
	flex-wrap: wrap;
	}
#wholesale #seg2 .whole.parent h2 {
    font-size: 16pt;
    margin-top: 20px;
	}
#wholesale #seg2 .whole.parent h3 {
    font-size: 12pt;
    letter-spacing: 2px;
	}
#wholesale #seg2 .whole.parent .left {
	 margin-top: 0px;
    width: 100%;
	}
#wholesale #seg2 .whole.parent .left p br {
	display: none;
	}
#wholesale #seg2 .whole.parent .right {
    width: 100%;
	}
#wholesale #seg2 .whole.parent .right .link {
    text-align: center;
}
#wholesale #seg2 .seminar.parent {
	flex-wrap: wrap-reverse;
	}
#wholesale #seg2 .seminar.parent .left {
    width: 100%;
	}
#wholesale #seg2 .seminar.parent .right {
    width: 100%;
	}
	
#wholesale #partners {
   padding: 100px 0;
	margin: 0;
}

#wholesale #partners .parent {
	margin-top: 30px;
	}
	
#wholesale #partners .children {
	width: 85%;
}

#wholesale #partners .children p.text {
	margin: 30px 0px;
	}

#wholesale #partners .children .link {
    margin-top: 0px;
	}

#wholesale #partners .children .link .arrow_box {
	padding: 10px 0px 10px 40px;
	}
	
/*#wholesale  #beans .left {
    width: 100%;
	}
#wholesale  #beans .right {
	margin-top: 50px;
    width: 100%;
	}
#wholesale #seg2 .link {
    text-align: right;
	}
#wholesale #beginners .left {
	margin-top: 50px;
    width: 100%;
	}
#wholesale #beginners .right {
    width: 100%;
}*/
}
/* Wholesaleモバイル設定おわり */

#contact {
padding-top: 200px;
}
#contact h2 {
	font-size: 28pt;
}
#contact h3 {
	font-size: 11pt;
	font-weight: bold;
   letter-spacing: 5px;
}
#contact .text {
	color: #555555;
    letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 30px;
    margin-bottom: 40px;
	margin-top: 80px;
}
#contact .text a {
	text-decoration: underline;
}
#contact .text a:hover {
	text-decoration: none;
}

/*　ContactForm7のテーブル化レスポンシブ調整　*/
#contact form {
    margin-top: 125px;
    width: 850px;
    float: right;
}
#contact table {
	border: 0px;
}
#contact table th {
	border: 0px;
	vertical-align: top;
}
#contact table td {
	border: 0px;
}
#contact table .small {
	font-size: 10.5px;
	letter-spacing: 2px;
}
#contact span.wpcf7-not-valid-tip {
	color: #dc3232;
	transition:0.3s all ease-in-out;
}
/* CF7チェックボックスとラジオボタンを縦並びに */
span.wpcf7-list-item {
margin-top:5px;
display: block;
}
/*テーブルを親要素の幅いっぱいに伸ばす*/
.table-res-form {
    width: 100%;
}
/*一行ごとに上ボーダー*/
.table-res-form tr {
    border: 0px;
}
/*一番上の行だけボーダーなし*/
.table-res-form tr:first-child {
    border-top: none;
}
/*thとtd内の余白指定*/
.table-res-form th, .table-res-form td {
    padding: 1.5em;
}
/*th（項目欄）は30%幅、テキストを右寄せ*/
.table-res-form th {
    width: 30%;
    text-align: left;
	 font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    letter-spacing: 5px;
	font-weight: normal;
}
/*「必須」部分のスタイリング*/
.table-res-form .requied {
    font-size: 0.8em;
    color: #FFF;
    display: inline-block;
    padding: 0.3em 0.3em 0.2em;
    background: red;
    border-radius: 2px;
}

/*ここから768px以下の指定*/

@media only screen and (max-width: 768px) {
　　　　　/*thとtdをブロック化して幅100％にして、縦積み*/
    .table-res-form th, .table-res-form td {
        width: 100%;
        display: block;
    }
　　　　　/*th（項目名）欄の不要な余白削除・テキスト左寄せ*/
    .table-res-form th {
        padding-bottom: 0;
        text-align: left;
    }
　　　　　/*不要な最終行の左のthを非表示にする*/
    .table-res-form .empty {
        display: none;
    }
}

/*ここまで768px以下の指定---終わり*/

/*ここから入力欄のスタイル指定*/

/*各入力フォームスタイリング*/
.table-res-form input[type="text"], input[type="email"], textarea {
    letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    padding: 20px 35px;
    margin-bottom: 0.5em;
    width: 100%;
	 border: 0px;
    background-color: #f3f3f3;
	color: #7c7c7c;
}
.wpcf7-select {
	  letter-spacing: 2px;
    font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    padding: 20px 35px;
    margin-bottom: 0.5em;
    width: 100%;
	border: 0px;
    background-color: #f3f3f3;
	color: #7c7c7c;
	max-width: inherit;
}
/*入力欄にフォーカスしたら変化*/
.table-res-form input[type="text"]:focus, textarea:focus {
	outline: #073849 auto;
}
.table-res-form input:focus {
	outline: #073849 auto;
}
/*送信ボタンスタイリング*/
.table-res-form td {
	text-align: left;
	position: relative;
}
.table-res-form input[type="submit"] {
    /*border: 0px #89BDDE solid;
    padding: 0.5em 4em;
    border-radius: 5px;
    background: #9a9a9a;
    color: #fff;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
    font-weight: bold;*/
	 border: 2px #073849 solid;
    padding: 0.5em 50px;
    border-radius: 0px;
    background: #073849;
    color: #ffffff;
    box-shadow: 0;
    font-weight: bold;
	transition: 0.3s all linear;
}
/*送信ボタン・マウスオーバー時スタイリング*/
.table-res-form input[type="submit"]:hover {
    background: #ffffff;
	color: #073849;
    box-shadow: none;
}

.table-res-form .line {
	display: inline;
	border-bottom: 1px solid #216075;
   width: 50px;
   position: absolute;
   top: 40px;
   left: 100px;
}

.table-res-form .arrow {
	display: inline;
}

.table-res-form .arrow-button::before {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 1px solid #073849;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 10px;
}

.table-res-form  .arrow-button::after {
    left: 23px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #073849;
    border-right: 1px solid #073849;
    -webkit-transform: rotate(
45deg
);
    transform: rotate(
45deg
);
}

/*Contact モバイル設定追加*/
@media screen and (max-width:980px){
#contact form {
    width: 100%;
}
}
@media screen and (max-width:767px){
.table-res-form tr {
	display: block;	
	}
#contact table th {
    padding-bottom: 0px;
	}
}
@media (max-width: 480px) {
#contact {
    padding-top: 100px;
	}
#contact h2 {
    font-size: 16pt;
	}
#contact h3 {
	font-weight: normal;
	}
}

/*Contact モバイル設定おわり*/

/*footer*/

/** TOPに戻るボタン **/
.top_button{
  position: fixed;
    right: 0px;
    bottom: 65px;
    height: 35px;
    text-decoration: none;
    font-size: 90%;
    color: #9b9070;
    line-height: 3.5rem;
    padding: 0px 40px 0 40px;
    cursor: pointer;
    border-bottom: solid 2px;
    transition: .5s;
    transform: rotate(90deg);
    letter-spacing: 2px;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

.top_button::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 15px;
    border-top: solid 2px;
    transform: rotate(-45deg);
    transform-origin: left bottom;
}

footer {
	position: relative;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

/*このクラスが付与されると表示する*/
.top_button.absolute{
  position: absolute;
  top: 70px;
  bottom: auto;
}

@media screen and (max-width:480px){
.top_button{
	display: none;
	}
}

/** TOPに戻るボタンおわり **/

.footer .container {
	padding-top: 100px;
	position: relative;
}

.footer .left {
	overflow: hidden;
	padding-bottom: 50px;
}

.footer .berth, .footer .haru {
	width: 250px;
	float: left;
	margin: 0 10px;
}

.berth .logo {
	width: 120px;
}

.footer .haru .logo {
	width: 120px;
}

.footer .berth p, .footer .haru p {
	clear: left;
	font-size: 13px;
	color: #9d9d9d;
	letter-spacing: 1px;
}

.footer .berth a:hover img, .footer .haru a:hover img {
	opacity: 0.7;
}

.footer .sns a:hover img, .footer .branch a:hover img {
	opacity: 0.7;
}

.footer .sns {
	clear: left;
	margin-top: 40px;
	margin-bottom: 40px;
}

.footer .sns .fb {
	margin-right: 30px;
	padding-left: 10px;
}

.footer .sns img {
	width: 25px;
}

.footer .branch {
	float: right;
	width: 50%;
	position: absolute;
	bottom: 0;
	right: 10px;
}

.footer .branch p {
	text-align: right;
}

.toco img {
	width: 22%;
   margin: 0 7px;
}

.footer .nui img {
	width: 21%;
   margin: 0 7px 0 15px;
}

.footer .len img {
	width: 22%;
   margin: 0 7px;
}

.footer .citan img {
	width: 11%;
   margin: 0 7px;
}

/*フッターモバイル設定*/
@media screen and (min-width:767px) and (max-width:1200px){
.footer .branch {
   width: 70%;
	bottom: 25px;
}	
	.toco img {
	width: 125px;
}

.footer .nui img {
	width: 100px;
}

.footer .len img {
	width: 100px;
}

.footer .citan img {
	width: 65px;
}
}
@media (max-width: 480px) {
.footer .left {
    display: none;
	}
.footer .branch {
	display: none;
	}
.footer .sns {
    text-align: center;
	}
.footer .colophon {
	 text-align: center;
	}
}
/*フッターモバイル設定おわり*/

/*Section css part start*/
.home a {
	transition:0.3s all ease-in-out;
}
.main_section {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
	max-width: 100%;
}
.left_section {
	margin-top: 45px;
}
.section_post {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
	max-width: 100%;
	border-bottom: 1px dotted #a4a4a4;
}
.section_post > h3 {
	margin: 20px 0;
	padding: 0;
	color: #212121;
	font-size: 30px;
	width: 100%;
	font-weight:normal;
	word-wrap: break-word;
}
.section_post img {
	max-width: 100%;
	height: auto;
	padding-top: 34px;
	padding-bottom:10px;
	margin-bottom: 50px;
}
.single .content p {
	line-height: 30px;
	margin-bottom: 25px;
	letter-spacing: 1px;
}

.single .sub-contents { overflow: hidden; clear: both; margin-top: 50px; }
.single .sub-contents ul { padding: 0; }
.single .sub-contents ul li { list-style: none; float: left; }

.single .store-tag { height: 45px; display: inline-block; }
.single .store-tag .name { display: inline-block; background-color: #e4e4e4; height: 25px; border-radius: 19px; align-items: center; margin-top: 10px; }
.single .store-tag .name span { padding: 10px 15px; letter-spacing: 1px; font-weight: bold; vertical-align: middle; align-items: center; line-height: 25px; color: #7f7045; }

@media screen and (max-width:767px){
.section_post > h3 {
	margin-top: 10px;
	font-size: 25px;
	line-height: 32px;
}
}

.wp-caption img{
	padding:0px !important;
}
.section_post > h4 {
	margin-bottom: 10px;
	padding: 0;
	color: #7f7045;
	font-size: 14px;
	width: 100%;
	letter-spacing: 1px;
	
}
.section_post span {
	margin: 0px 0 0px 0;
	padding: 0;
	color: #212121;
	font-size: 14px;
	font-weight: normal;
}
.section_post .content {
	margin: 0px 0 0px 0;
	padding: 0;
	color: #212121;
	font-size: 14px;
	font-weight: normal;
	line-height: 26px;
}
.section_post p.wp-caption-text{
	margin:0px !important;}
.section_post a.read-more {
	padding: 10px 30px;
	margin: 23px 0;
	color: #FFF;
	background-color: #00bee0;
	font-size: 13px;
	font-weight: normal;
	float: left;
	border: 2px solid transparent;
	transition:0.3s all ease-in-out;
}
.section_post a.read-more:hover {
	/*color: #2a6496;*/
	color: #00bee0;
    background: #fff;
    border: 2px solid;
}
.section_post a{
	transition:0.3s all ease-in-out;
	line-height: 22px;
}
.section_post a:hover, .section_post a:focus{
	color: #212121;
}
.pagination {
	width: 100%;
	margin: 28px 0 58px 0;
	padding: 0;
	float: right;
	text-align: center;
}
.pagination ul {
	margin: 0;
	padding: 0;
}
.pagination ul li {
	margin: 0;
	padding: 0 5px;
	list-style: none;
	display: inline;
}
.pagination ul li a {
	margin: 0;
	padding: 5px 12px;
	border-radius: 3px;
	border: 1px solid #c9c9c9;
	color: #212121;
	font-size: 15px;
}
.pagination ul li a:hover, a.select, .pagination .active a {
	border: 1px solid #00bee0;
}
.pagination .active a {
	cursor: default;
}
.subscribe {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px 0;
	float: left;
	max-width: 100%;
	background-color: #00bee0;
}
.subscribe p {
	margin: 0;
	float: left;
	padding: 0;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	width: 75%;
}
.subscribe h3 {
	width: 75%;
	margin: 5px 0 0px 0;
	float: left;
	padding: 0;
	color: #fff;
	font-size: 18px;
	font-weight: normal;
}
.subscribe a:hover {
	color: #000;
}
.subscribe a {
	padding: 15px 20px;
	margin: 0px 0;
	color: #f6f6f6;
	background-color: #00d2f7;
	font-size: 16px;
	font-weight: normal;
	float: right;
}
/*Section css part end*/

/*Category*/
.category h2 {
	font-size: 24pt;
    letter-spacing: 6px;
	 margin-top: 80px;
    margin-bottom: 10px;
    display: inline-block;
    float: left;
    text-align: left;
	   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.category h3 {
	display: block;
    font-size: 11pt;
    margin-top: 15px;
    padding-right: 5px;
    letter-spacing: 0;
	   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.category .col-lg-9 {
    width: 100%;
}
.category .post_thumbnail {
	width: 500px;
   float: left;
   margin-right: 35px;
}
.category .post_thumbnail img {
	padding-top: 0;
	height: 350px;
   object-fit: cover;
}
.category .section_post {
	padding-bottom: 150px;
	border-bottom: 0px;
}
.category .section_post h3 {
	clear: inherit;
   font-size: 14pt;
   letter-spacing: 4px;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.category .section_post h4 {
	clear: inherit;
	margin-top: 80px;
	font-size: 10pt;
	margin-top: 15px;
	color: #7f7045;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.category .post_contents {
	margin-top: 100px;
}
.category .section_post .post_contents p {
	font-size: 10pt;
	color: #9d9d9d;
   letter-spacing: 2px;
   font-family: 'Lato', "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.category .section_post .post_contents .link {
    width: 200px;
    float: left;
    padding: 30px 0;
    position: relative;
    margin-top: 0px;
	transition: 0.3s all linear;
}

.category .section_post .post_contents .line {
    border-bottom: 1px solid #216075;
    width: 50px;
    position: absolute;
    top: 55px;
    left: 0px;
	transition: 0.3s all linear;
}


.category .section_post .post_contents .link:hover {
	transform: translate(10px, 0);
}

.category .section_post .post_contents .link:hover .line {
	transform: translate(20px, 0);
}

.category .section_post .post_contents .arrow {
	padding: 0;
	height: 50px;
   width: 50px;
	left: 60px;
}

.category .section_post .post_contents .arrow-button::before {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid #073849;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	 transition: 0.3s all linear;
}
.category .section_post .post_contents .link:hover a.arrow-button::before {
	background-color: #073849cc;
}
.category .section_post .post_contents .arrow-button::after {
    left: 18px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #073849;
    border-right: 1px solid #073849;
    -webkit-transform: rotate(
45deg
);
    transform: rotate(
45deg
);
   transition: 0.3s all linear;
}
.category .section_post .post_contents .link:hover a.arrow-button::after {
	 border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

/*カテゴリーページモバイル設定*/

@media screen and (min-width:767px) and (max-width:1200px){
.category .post_thumbnail {
    width: 50%;
	}
.category .section_post .post_contents .link {
	margin-left: 55%;
	}
}

@media (max-width: 480px) {
	.category .container {
		padding-left: 30px;
		padding-right: 30px;
	}	
.category h2 {
    padding-left: 15px;
	 font-size: 16pt;
    letter-spacing: 2px;
	}
.category h3 {
    padding-left: 15px;
	font-size: 10pt;
	}	
.category .section_post {
    padding-bottom: 50px;
	}
.category .post_thumbnail {
   width: 100%;
	margin-right: 15px;
	}
.category .post_thumbnail img {
   height: 220px;
	margin-bottom: 30px;
	}
.category .post_contents {
   margin-top: 10px;
	clear: both;
	}
.category .section_post h3 {
    font-size: 10pt;
    letter-spacing: 2px;
	 padding-left: 0;
	padding-right: 0;
	}
.category .section_post .post_contents p {
    font-size: 8pt;
    color: #333333;
    letter-spacing: 1px;
	line-height: 20px;
	}
.category .section_post .post_contents .link {
	display: none;		
	}
.category .section_post .post_contents a.read-more {
	display: none;
	}
}

/*カテゴリーページモバイル設定おわり*/

/*sidebar css part start*/
.side_bar {
	margin: 45px 0 0 0;
}
.side_bar h3 {
	font-size: 18px;
	margin: 0px 0px 20px 0px;
    padding-bottom:20px;
    color: #212121;
    font-size: 18px;
    width: 100%;
    font-weight: bolder;
    border-bottom: 2px solid;
}
.side_bar ul li a{
	transition:0.3s all ease-in-out;
}
.side_bar ul li a:hover{
	color: #00BEE0;
}
.side_bar .widget{
	margin-bottom: 30px;
}
.widget{
	width: 100%;
	height: auto;
	padding: 0;
	margin-bottom: 14px;
	float: left;
	max-width: 100%;
}
.widget_search input {
	border: 1px solid #c9c9c9;
	width: 100%;
	height: 37px;
	margin: 0;
	padding: 0 5px;
	float: left;
	font-style: italic;
	font-size: 14px;
}
.widget_search input[type="submit"] {
	width: 30px;
	height: 37px;
	background: url(images/search_side.png) no-repeat 0 9px;
	float: left;
	margin-left: -30px;
	border: none;
	display:none;
}
.widget .sub-menu {
    margin: 0;
    padding-left: 20px;
}
.widget ul {
	float: left;
	margin: 0;
	padding:0px;
	width: 100%;
}
.widget ul li {
	width: 100%;
	padding: 5px 0;
	line-height: 26px;
	list-style: none;
	font-size: 14px;
	font-weight: normal;
	border-bottom: 1px solid #c5c5c5;
}
.widget ul li a {
	color: #181818;
	font-size: 14px;
	font-weight: normal;
}
.top_footer .widget ul li a,
 .top_footer .widget-title{
	color: #FFFFFF;}

#brand_btn {
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 10px;
	background-color: #00bee0;
	float: left;
	margin: 20px 0 0px 0px;
}
#design_btn {
	margin: 20px 10px;
	float: left;
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
	padding: 5px 10px;
	background-color: #00bee0;
}
#brand_btn:hover, #design_btn:hover {
	color: #000;
}
.widget_recent_entries ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget_recent_entries ul li {
	width: 100%;
	height: auto;
	padding: 10px 0;
	margin: 0;
	float: left;
	max-width: 100%;
	border-bottom: 1px solid #c5c5c5;
}
.widget_recent_entries ul li img {
	float: left;
	margin-right: 10px;
	max-width: 70px;
	height: auto;
}
.widget_recent_entries ul li p {
	color: #181818;
	font-size: 15px;
	font-weight: normal;
}
.widget_recent_entries ul li span {
	color: #636363;
	font-size: 15px;
	font-weight: normal;
	font-style: italic;
}
/*sidebar css part end*/

/*footer part start*/
.main_footer {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 125px 0 60px 0;
	float: left;
	max-width: 100%;
   margin-top: 0px;
	background-color: #f5f5f5;
}
footer {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0px 0px 20px 0px;
	float: left;
	max-width: 100%;
	background-color: #ffffff;
}
.footer-widget ul {
	margin: 0;
	padding: 0;
}
.footer-widget h3 {
	margin: 26px 0;
	font-size: 16px;
	color: #f6f6f6;
    display: inline-block;
}
.footer-widget li {
	margin: 0;
	padding: 2px 15px;
	list-style: none;
	font-size: 14px;
	font-weight: normal;
	color: #c8c8c8;
}
/*.arrow {
	background: url(images/arrow.png) no-repeat 0px 6px !important;
	width: 100%;
	margin: 5px 0 !important;
	float: left;
}*/
.arrow div {
	width: 100%;
	float: left;
}
.news_update label, .footer-widget {
	color: #FFF;
	font-size: 14px;
	color: #c8c8c8;
}
.widget_newsletterwidget input {
	width: 220px;
	height: 34px;
	background-color: #171717;
	border: 1px solid #676767;
	padding: 0 5px;
	margin-top: 5px;
	color: #FFF;
}
.widget_newsletterwidget input[type="submit"]:hover {
	color: #000;
}
.widget_newsletterwidget input[type="submit"] {
	width: 85px;
	height: 34px;
	background-color: #00bee0;
	border: none;
	cursor: pointer;
	color: #FFF;
	margin-top: 10px;
}
.social_icon {
	list-style: none;
	float: left;
}
.social_icon li {
	float: left;
	padding: 0 5px;
	margin: 0;
	transition: ease 0.5s;
	-webkit-transition: ease 0.3s;
}
.social_icon li:hover {
	margin-top: -5px;
	cursor: pointer;
}
.social_icon li h3 {
	margin: 12px 0 23px 0;
	font-size: 16px;
	color: #f6f6f6;
}
.bottom_footer {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px 0;
	float: left;
	max-width: 100%;
	background-color: #2a2a2a;
}
.bottom_footer p {
	float: left;
	padding: 0;
	margin: 0px 0;
	color: #b3b3b3;
	font-size: 14px;
	font-weight: normal;
}
.bottom_footer ul {
	float: right;
	margin: 0;
	padding: 0;
}
.bottom_footer ul li {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	border-right: 1px solid #b3b3b3;
}
.bottom_footer ul li:last-child {
	border-right: none;
}
.bottom_footer ul li a {
	padding: 0 15px;
	color: #b3b3b3;
	font-size: 14px;
	font-weight: normal;
}
.bottom_footer ul li a:hover {
	color: #00bee0;
}
.address_li {
	padding-left: 0 !important;
}
/*footer css part ending*/


/**
customizable gallery
* -----------------------------------------------------------------------------
*/
.gallery img {
    margin: 0;
	padding:0;
}
.gallery {
	margin-bottom: 20px;
}
.gallery-item {
	float: left;
	margin: 0 15px 0px 0;
	overflow: hidden;
	position: relative;
}
.gallery-columns-1 .gallery-item {
	max-width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 48%;
	max-width: -webkit-calc(50% - 4px);
	max-width: calc(50% - 4px);
}
.gallery-columns-3 .gallery-item {
	max-width: 32%;
	max-width: -webkit-calc(33.3% - 4px);
	max-width: calc(33.3% - 4px);
}
.gallery-columns-4 .gallery-item {
	max-width: 23%;
	max-width: -webkit-calc(25% - 4px);
	max-width: calc(25% - 4px);
}
.gallery-columns-5 .gallery-item {
	max-width: 19%;
	max-width: -webkit-calc(20% - 4px);
	max-width: calc(20% - 4px);
}
.gallery-columns-6 .gallery-item {
	max-width: 15%;
	max-width: -webkit-calc(16.7% - 4px);
	max-width: calc(16.7% - 4px);
}
.gallery-columns-7 .gallery-item {
	max-width: 13%;
	max-width: -webkit-calc(14.28% - 4px);
	max-width: calc(14.28% - 4px);
}
.gallery-columns-8 .gallery-item {
	max-width: 11%;
	max-width: -webkit-calc(12.5% - 4px);
	max-width: calc(12.5% - 4px);
}
.gallery-columns-9 .gallery-item {
	max-width: 9%;
	max-width: -webkit-calc(11.1% - 4px);
	max-width: calc(11.1% - 4px);
}
.gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0;
}
.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1), .gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1), .gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1), .gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
	clear: left;
}
.gallery-caption {
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	font-size: 12px;
	line-height: 22px;
	margin: 0;
	/*max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;*/
	text-align: left;
	width: 100%;
}
.gallery-caption:before {
	content: "";
	height: 100%;
	/*min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;*/
	width: 100%;
}
.gallery-item:hover .gallery-caption {
	opacity: 1;
}
.gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {
	display: none;
}
.wp-caption {
	/* background: #00BEE0; */
	max-width: 100%;
	margin-bottom: 14px;
	padding: 5px;
	text-align: center;
}
.wp-caption a {
	border-bottom: none;
}
.wp-caption img {
	margin: 0;
	max-width: 100%;
	height: auto;
}
.wp-caption.alignleft {
	margin-right: 20px;
}
.wp-caption.alignright {
	margin-left: 20px;
}
.wp-caption.alignnone {
	width: 100%!important;
	overflow: hidden;
}
.wp-caption.alignnone img {
	margin: 0 auto;
	max-width: 100%!important;
}
.wp-caption-text {
	color: #212121;
	font-size: 12px;
	/*font-weight: bold;*/
	padding: 8px 0 8px 0;
	margin: 0;
}
.sticky {
}
.gallery-caption {
	color: #212121;
}

/* 
PRASHANT JAYSWAL 
*/

#comments li {
	list-style: none outside none;
	clear:both;
}
.comments-title {
    margin: 10px 0;
}
.post-comment a {
	cursor: default !important;
}
.post-comment a:hover {
	color: #00BEE0 !important;
}
a.more {
	color: #000;
	font-size: 15px;
	font-weight: bold;
	margin-right: 1%;
}
a.more:hover {
	color: #00BEE0;
}
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-title {
	font-size: 18px;
	font-weight: normal;
}
.avtar {
	float: left;
	margin-right: 10px;
}
.fn a, a.reply {
	color: #00BEE0;
}
.comment-respond {
	margin-top: 40px;
	padding-left: 15px;
}
.comment-form input, .comment-form textarea {
	padding: 5px 10px;
	color: #000;
	border: 1px solid #00BEE0;
	background: #ececec;
	width: 50%;
}
.comment-form textarea {
	width: 70%;
}
.comment-form input[type='submit'] {
	background-color: #00BEE0;
	color: #e7e5e5;
	width: auto;
	padding:5px !important;
}
.form-submit {
	width: 50%;
	margin-left:70px;
}
.comment-reply-title {
	font-size: 18px;
	padding-top:20px;
}
.comment-reply-link {
    float: right;
}
#comments li article {
    padding: 10px;
}
.customizable-nav-next,
.customizable-nav-previous {
    padding-bottom: 20px;
	padding-top: 10px
}
li.menu-divider:last-child {display:none;}
.customizable-not-found {
	 padding: 20px 0;
}
.customizable-not-found p {
	 font-size:34px;
}
#wp-calendar,
#wp-calendar th,
#wp-calendar td {
	/*border-width:0px;*/
}
.side_bar .children {
	padding-left:25px;
}
.side_bar .children li{
	border-bottom:none;
}
.side_bar .sub-menu li{
	border-bottom:none;
}
.site-description {
	text-align:center;
}
.side_bar .tagcloud a {
    border: 1px solid #000;
    color: #000;
    font-size: 100% !important;
}
.top_footer .tagcloud a {
    border: 1px solid rgb(229, 229, 229);
    color: #fff;
    font-size: 85% !important;
}
.tagcloud a {
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 6px;
    padding: 5px 8px;
    text-decoration: none;
    transition: all 0.17s ease-in-out 0s;
}
.tagcloud {
    text-align: left;
}
.tagcloud a:hover {
    border: 1px solid #00bee0;
    color: #00bee0;
}
/**** H O M E - P A G E L *****/
.no-padding
{
	padding:0px !important;
}
.no-padding-left{
	padding-left:0px !important;
}
.no-padding-right{
	padding-right:0px !important
}
.customizable-home-title h6 {
    font-size: 13px;
    margin: 0;
    text-align: center;
    width: 100%;
}
.customizable-home-title h6:after {
    border-top: 1px solid #6E6E6E;
    content: " ";
    display: inline-block;
    margin: 0 0 5px;
    width: 25%;
}
.customizable-home-title h6:before {
    border-top: 1px solid #6E6E6E;
    content: " ";
    display: inline-block;
    margin: 0 0 5px;
    width: 25%;
}
.customizable-home-title h6 img{
	vertical-align: top;
}

.customizable-home-title{
	margin-bottom:20px;
	margin-top:20px;
}
.customizable-home-title h1{
	font-size:20px;
	color:#212121;
	text-align:center;
	font-weight:bold;
}
.customizable-home-icom{
	margin-bottom:20px;
}
.customizable-home-icom .customizable-post{
	padding-bottom: 20px;
        padding-top: 10px;
	text-align:center;
}
.customizable-home-icom .customizable-post:hover{
	background-color:#fafafa;
	border-bottom:1px solid #CCC;
}

.customizable-home-icom .back-icon{
    background-color: rgb(0, 190, 224);
    height: 50px;
    margin: 21px auto;
    padding: 2px 0;
    transform: rotate(45deg);
    width: 50px;
}
.customizable-home-icom .back-icon img{
    color: rgb(118, 118, 118);
    height: 20px;
    margin: 12px auto;
    transform: rotate(-45deg);
    width: 20px;
}
.icon-center {
    color: #767676;
    margin: 11px 0 !important;
}
.customizable-home-icom h1{
	font-size:16px;
	color:#212121;
}
.customizable-home-icom p{
	font-size:14px;
	color:#6b6b6b;
        line-height: 25px;
        padding-top: 15px;
}

/****** customizable-latest-post *********/
.post-blog{
 	margin-bottom: 20px;
    margin-top: 20px;
	width:100%;
}
.post-blog:hover{
	background-color:#FAFAFA;
}
.post-blog h2 a{
	font-size:16px;
	color:#428bca;
	text-transform:inherit;
}
.post-blog h2 a:hover{
	color:#2A6496;
	text-decoration:none;
}

.post-blog span{
	font-size:13px;
	color:#212121;
	font-weight:normal;
}
.post-blog p{
	font-size:13px;
	color:#212121;
	font-weight:normal;	
	text-align:justify;	
}
.post-blog .post-comment{
	border-top:1px dotted #d7d7d7;
    padding-bottom: 10px !important;
    padding-top: 10px !important;	
	border-bottom: 1px solid #CCCCCC;	
}

/**************/

.download-theme{
	background-color:#00bee0;
	padding: 10px 0 !important;
        margin-top: 30px;
}
.download-theme p{
	color:#FFF;
	margin: 10px 0;
	font-size:18px;
}
.download-button {
    background-color: #00D2F7;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 1px;
    color: #FFFFFF;
	margin: 5px 0 !important;
}
.download-button:hover{
    background-color: #FFFFFF;
    border: 1px solid #00D2F7;
    border-radius: 1px;
    color: #00D2F7;
	
}
.post-comment a{
	color:#000;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
.rslides {
  margin: 0 auto;
  }
.events {
  list-style: none;
  }
  .callbacks_container {
  position: relative;
  float: left;
  width: 100%;
  margin-bottom:20px;
  }

.rslides_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 52%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("images/themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.rslides_nav:active {
  opacity: 1.0;
  }

.rslides_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.customizable-postcat{
	clear:both;
}
.form-allowed-tags {
    display: none;
}
.comment-form label{
	width:65px;
}

.customizable-default-pagination {
    clear: both;
    display: table;
    margin-bottom: 15px;
    padding: 15px !important;
    width: 100%;
}
.customizable-previous-link {
    color: #428bca;
    float: left;
}
.customizable-previous-link a {
    color: #428bca;
}
.customizable-previous-link a:hover {
    color: #2a6496;
}
.customizable-next-link {
    color: #428bca;
    float: right;
}
.customizable-next-link a {
    color: #428bca;
}
.customizable-next-link a:hover {
    color: #2a6496;
}
/******************************/
@media (max-width:1250px) {
	/*.customize-container{
		width:auto;
	}*/
}

@media (max-width:991px) {
	.customize-container{
		width:auto;
	}
	.left_section,
	.side_bar{
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
	}
	
}
@media screen and (max-width: 767px) {
		.tagcloud {
    text-align: center;
	padding-left:7px;
}
.customizable-home-icom .back-icon{
    width: 24%;
}

		/* nav-wrap */
		.menu-wrap {
			position: relative;
		}
		.menu-wrap * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		/* menu icon */
		#menu-trigger {
			cursor: pointer;
			display: none;
			height: auto;
			margin-top:0px;
			margin-bottom:0px;
		}
		/* main nav */
		.customize-menu  {
			margin: 0px auto;
			padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 9;
			background-color: rgba(0,0,0,1);
			display: none;
			width:100%;
			max-height:none;
			border-radius:7px;
		}
		.customize-menu:after {
			/*content: '';
			position: absolute;
			right: 30px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid rgba(0,0,0,0.7);*/
		}		
		.customize-menu > ul li > ul{
			position:relative;
			background:none;
			border:none;
			padding: 0 0 0 20px !important;
			left: 0;
			top: 0;
		}
		.customize-menu > ul li > ul ul{
			position:relative;
			left: 0;
			top: 0;
		}
		.customize-menu ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			background: none;
			border: none;
			padding: 4px 3px 2px 4px;
		}
		.customize-menu li {
			position: static;
			display: block;
			float: none;
			border: 0;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			text-align: left;
			width:100%;
		}
		.customize-menu > ul li > ul {
			display:block;
		}
		.customize-menu ul li a {
			width:100%;			
		}
		.customize-menu ul li a:hover{
			border:1px solid rgba(0,0,0,0);
		}
		
		/*home-page*/

.customizable-home-icom .back-icon{
	width:22%;
}
.post-comment-set{
	float:left ;
}
.post-blog img{
	width:100%;
}
.customizable-home-icom .back-icon img {
    margin-right: 0px !important;
}
.post-blog .post-comment{
	display: flex;
}
.post-comment-set {
    float: left;
    width: 50%;
}
.rslides_nav {
	background:none;
}
/*---End-home ---*/
	}

	@media screen and (min-width: 767px) {
		.customize-menu {
			display: block !important;
		}
	}
@media (max-width:690px) {
	
	
	.subscribe{
		text-align:center;
		padding-bottom:30px;
	}
	.subscribe p{
		width:100%;
	}
	.subscribe h3{
		width:100%;
		margin-bottom:30px;
	}
	.subscribe a{
		clear:both;
		float:none;		
	}
	.footer-widget ul{
		margin: 0px 0px 20px 0px;
	}
	.bottom_footer p{
		text-align:center;
		width:100%;
	}
	.bottom_footer ul{
		width:100%;
		text-align:center;
		margin:10px 0px;
	}
	.bottom_footer ul li{
		float:none;
		display:inline;		
	}
}
@media screen and (max-width: 600px) {

  .rslides_nav {
    top: 47%;
    }
	
	.customize-breadcrumb h1{
	font-size: 21px;
}
.customize-breadcrumb ol{
	font-size: 14px;
}

  }

@media(min-width:320px) and (max-width:340px)	{
	.customizable-home-icom .back-icon{
	width:30%;
}
.customizable-home-icom .back-icon img{
 	margin-right: 7px !important; 
}
}
@media(min-width:480px) and (max-width:600px)	{
	.customizable-home-icom .back-icon{
	width:17%;
}
}
@media(min-width:500px) and (max-width:600px)	{
	.customizable-home-icom .back-icon{
	width:13%;
}
}
@media(min-width:601px) and (max-width:767px)	{
	.customizable-home-icom .back-icon{
		width:11% ;
	}
}
@media(min-width:768px) and (max-width:1024px)	{
    .download-theme .btn-group{float: right;}
    .customize-menu > ul{margin-top: 15px; text-align: left;}
.customize-menu > ul > li{margin-bottom: 5px;}

/*.logo{
	width:30% !important;
}*/
.customizable-home-icom .back-icon{
	width:32%;
}
.post-blog {
    float: left;
    margin: 5px;
    width: 100%;
}
.post-blog img{
	width:100%;
}
.customizable-home-title {
    clear: both;
}
.customizable-home-icom .customizable-post{
	width:32%;
	float:left;
}

.buttone-left,
.post-comment-set{
	float:left;
}
.customizable-home-icom .back-icon img{
	margin-right:2px !important;
}
.post-blog .post-comment{
	display: flex;
}
.post-comment-set {
    float: left;
    width: 50%;
}
}
@media(min-width:1023px) and (max-width:1280px)	{
.customizable-home-icom .back-icon{
	width:23%;
}
}
@media(min-width:980px) and (max-width:1023px)	{
.customizable-home-icom .back-icon img{
	margin-right:23px !important; 
}	
}

/*****************************************************************************************************************/

#mainmenu {
    float: right;
}

#mainmenu ul,
#mainmenu ul li,
#mainmenu ul li a,
#mainmenu #menu-button {
    margin: 0;
    padding: 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    list-style: none;
    display: block;
    position: relative;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#mainmenu ul li a{
    margin: 0;
    padding: 15px 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    list-style: none;
    display: block;
    position: relative;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#menu-line {
    position: absolute;bottom: 0;left: 0;height: 0;background: #673AB7;
}
#mainmenu > ul > li {
    float: left;margin-right: 25px;
}
#mainmenu > ul > li > a:hover, .fixed-header.fixed #mainmenu > ul > li > a:hover, #mainmenu > ul > li > a:hover, 
.fixed-header.fixed #mainmenu > ul > li > a:hover, #mainmenu > ul > li.current-menu-item a {
    color: #00bee0; background: transparent;
}
#mainmenu > ul > li:last-child {
    margin-right: 0 !important;padding-right: 0 !important;
}
#mainmenu.align-center > ul {
    font-size: 0;text-align: center;
}
#mainmenu.align-center > ul > li {
    display: inline-block;float: none;
}
#mainmenu.align-center ul ul {
    text-align: left;
}
#mainmenu.align-right > ul > li {
    float: right;
}
#mainmenu.align-right ul ul {
    text-align: right;
}
.main-logo,#mainmenu > ul > li > a,#mainmenu #menu-button {
    height: auto;
    display: inline-block;
    align-items: center; 
    text-decoration: none;
}
.on-scroll .main-logo,.on-scroll #mainmenu > ul > li > a,.on-scroll #mainmenu #menu-button {
    height: 80px;
}

#mainmenu ul > li.has-sub > a:after {
    position: relative;top: -2px;
    right: 0px;width: 6px;height: 6px;
    margin-left:5px;margin-right: 3px;
    border-bottom: 2px solid;border-right: 2px solid;
    content: ""; -webkit-transform:rotate(45deg);
    -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg); transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;-moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease; transition: all ease 0.3s;
    display: inline-block;
}

/*-------------------------------*/
/*-------------------------------*/
#mainmenu ul > li.has-sub:hover > a:after {
    -webkit-transform: rotate(222deg);
    -moz-transform: rotate(222deg);
    -ms-transform: rotate(222deg);
    -o-transform: rotate(222deg);
    transform: rotate(222deg);
    transition: all ease 0.3s;
}
#mainmenu ul > li > a:before {
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: 14px;
    transform: scale(0, 1);
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
    background:#00bee0;
    content: '';
    transform-origin: right top;
}
#mainmenu ul > li > a:hover::before, #mainmenu > ul > li.current-menu-item a:before {
    transform: scale(1, 1);
    transform-origin: left top;
}
#mainmenu ul ul {
    position: absolute;
    padding: 0px 0 0px;
    background: #ffffff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1);
    z-index: 999;
}
#mainmenu.align-right li:hover > ul {
    right: 0;
}
ul.sub-menu .submenu-right {
    right: 100%;
}
ul.sub-menu .submenu-left {
    left: 100%;
}
#mainmenu ul ul ul {
    top: 0;
}
#mainmenu.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
}
#mainmenu ul ul li {
    height: 0;
    padding: 0 0px;
    margin: 0 0 0px;
    opacity: 0;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#mainmenu ul li:hover > ul > li {
    height: 40px;
    opacity: 1;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
#mainmenu ul ul li a {
    min-width: 115px;
    white-space: nowrap;
    padding: 10px 15px;
    background: none;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: #000000;
    text-decoration: none;
}
#mainmenu ul ul li:hover > a,
#mainmenu ul ul li a:hover {
    color: #00bee0;
}
.main-nav {
    min-height: inherit;
    border: 0;
    margin: 0;
    border-radius: 0;
}
.transparent .main-nav .logo-dark,
.transparent .main-nav.on-scroll .logo-light {
    display: none;
}
.transparent .main-nav .logo-light,
.transparent .main-nav.on-scroll .logo-dark {
    display: flex;
}
header:not(.transparent) .main-nav .logo-light {
    display: none;
}
.fixed {
    padding: 0;
    background-color: rgba(255, 255, 255, 1);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.main-logo {
    float: left;
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin-bottom: 5px;
}
.main-logo a img {
    width: auto;
    height: 100%
}
.fixed-header.fixed #mainmenu > ul > li > a {
    color: #ffffff;
}
.fixed-header.fixed #mainmenu ul ul {
    background: rgba(255, 255, 255, 1)
}
.transparent {
    position: absolute;
    background: transparent;
    top: auto;
    color: #ffffff;
    width: 100%;
}
.main-nav {
    opacity: 1;
    z-index: 999;
    width: 100%;
    background: transparent;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;
}
.transparent .main-nav {
    box-shadow: none;
}
.main-nav.fixed-header.fixed {
    position: fixed;
    top: auto;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
}
#mainmenu #menu-button,
#mainmenu .submenu-button {
    display: none;
}
/*----//// Responsive ////----*/

@media (max-width: 1024px) {
    /*---- Home start ----*/
    /*Menu*/
    .header_right .rightmenu{
    	display: block;
    	/*margin: 0px 15px;*/
    }
    .logo{
		text-align:center;
	}
	.search_box{
		display: table;
		float: none;		
		margin: 0 auto;
		width: 92%;
	}
	.logo img{
	display: inline !important;
}
.logo,
	.header_right{
		width:100%;
		position:relative;
	}
    .search_box input[type="button"]{
    	top: 55px;
    }
    .search_box{
    	padding-top: 55px;
    }
    #menu-line {
        display: none;
    }
    #mainmenu {
        width: 100%;
        top: 0;
        position: relative;
        float: none;
    }
    #mainmenu ul {
        width: 100%;
        display: none;
        clear: both;
        position: relative;
        top: 50px;
        text-align: left;
        background: rgba(255, 255, 255, 1);
        padding: 15px 0;
        border-top: 1px solid #e6e6e6;
        margin: 15px 0px;
    }
    #mainmenu ul li,
    #mainmenu ul ul li,
    #mainmenu ul li:hover > ul > li {
        width: 100%;
        height: auto;
        opacity: 1;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        transform: none !important;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    #mainmenu li:hover > ul {
        padding: 0;
    }
    #mainmenu ul li a {
        width: 100%;
        color: #000000;
    }
    #mainmenu > ul > li > a,
    .on-scroll #mainmenu > ul > li > a {
        padding: 0px;
        line-height: 30px;
        height: inherit;
        display: block;
    }
    #mainmenu > ul > li > a:hover,
    #mainmenu > ul > li > a.active {
        background: transparent;
    }
    #mainmenu > ul > li > a:before,
    #mainmenu ul ul li a:before,
    #mainmenu ul > li.has-sub > a:after {
        display: none;
    }
    #mainmenu > ul > li,
    #mainmenu.align-center > ul > li,
    #mainmenu.align-right > ul > li {
        float: none;
        display: block;
        z-index: 2;
        padding: 0px 15px;
    }
    #mainmenu li > ul {
        left: auto;
        background-color: transparent;
        border: none;
        border-radius: 0px;
        box-shadow: none;
    }
    #mainmenu li:hover > ul {
        left: auto;
        background-color: transparent;
        border: none;
        border-radius: 0px;
        box-shadow: none;
    }
    #mainmenu ul ul {
        position: absolute;
        left: -9999px;
        padding: 0px 0 5px;
    }
    #mainmenu ul ul li a {
        line-height: 30px;
        padding: 0 0 0 15px;
    }
    #mainmenu ul ul,
    #mainmenu ul ul ul {
        position: relative;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        padding: 0;
        margin: 0px 0 0px;
    }
    #mainmenu > ul > li.has-sub > a::after,
    #mainmenu ul ul li.has-sub > a::after {
        display: none;
    }
    #mainmenu #menu-button {
        font-size: 30px;
        right: 0;
        top: 12px;
        display: flex;
        align-items: center;
        position: absolute;
        cursor: pointer;
        z-index: 1111;
    }
    #mainmenu #menu-button.menu-opened:before {
        content: '\f00d';
    }
    #mainmenu .submenu-button {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.15);
        height: 30px;
        width: 30px;
        cursor: pointer;
        color: #676767;
    }
    #mainmenu .submenu-button::before {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #mainmenu .submenu-button.submenu-opened::before {
        content: '\f068';
    }
    .fixed-header.fixed #mainmenu > ul > li > a {
        color: #676767;
    }
}
/*-----------------------------------*/
@media (max-width:480px){
    .main-logo {
        max-width: 230px;
    }
}