/* ===================================================================
 * # custom block grid STACK breakpoints
 *
 * ------------------------------------------------------------------- */
@media screen and (max-width:1000px) {
  .block-1000-full > .column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}

@media screen and (max-width:900px) {
  .block-900-full > .column {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}


/* ===================================================================
 * # base style overrides
 *
 * ------------------------------------------------------------------- */
html {
  font-size: 10px;
}

@media screen and (max-width:400px) {
  html {
    font-size: 8px!important;
  }

}

html,
body {
  height: 100%;
}
@font-face {
  font-family: 'myfont';
  src: url('../font/meiryo.ttc');
}
@font-face {
  font-family: 'special';
  src: url('../font/Times New Roman.ttf');
}
body {
  font-family: "myfont",'-apple-system', 'Open Sans', 'Helvetica Neue',sans-serif;
  font-size: 2rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1.8;
  color: #000000;
  margin: 0;
  padding: 0;
  position: relative;
}

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a {
  color: #3b0d11;
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: #037c82;
}

a:hover,
a:active {
  outline: 0;
}
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/* ===================================================================
 * # typography & general theme styles
 * 
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "myfont", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #000000;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin-top: 6rem;
  margin-bottom: 1.6rem;
}

@media screen and (max-width:600px) {
  h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    margin-top: 5.6rem;
  }

}

h5, .h5, h6, .h6 {
  margin-top: 4.8rem;
  margin-bottom: 1.2rem;
}

@media screen and (max-width:600px) {
  h5, .h5, h6, .h6 {
    margin-top: 4.4rem;
    margin-bottom: 0.8rem;
  }

}

h1, .h1 {
  font-size: 3.6rem;
  line-height: 1.522;
}

@media screen and (max-width:500px) {
  h1, .h1 {
    font-size: 3.3rem;
  }

}

h2,
.h2 {
  font-size: 3.2rem;
  line-height: 1.25;
}

h3, .h3 {
  font-size: 2.4rem;
  line-height: 1.167;
}

h4, .h4 {
  font-size: 2.1rem;
  line-height: 1.333;
}

h5, .h5 {
  font-size: 1.8rem;
  line-height: 1.333;
}

h6, .h6 {
  font-size: 1.6rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .3rem;
}

p img {
  margin: 0;
}

p.lead {
  font-family: "myfont", serif;
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1.857;
  margin-bottom: 3.6rem;
  color: #000000;
}


em,
i,
strong,
b {
  font-size: inherit;
  line-height: inherit;
}

em,
i {
  font-family: "myfont", serif;
  font-style: italic;
}

strong,
b {
  font-family: "myfont", serif;
  font-weight: 700;
}

small {
  font-size: 1.2rem;
  line-height: inherit;
}

blockquote {
  margin: 4rem 0;
  padding: 4rem 4rem;
  border-left: 4px solid black;
  position: relative;
}

@media screen and (max-width:600px) {
  blockquote {
    padding: 3.2rem 3.2rem;
  }

}

@media screen and (max-width:400px) {
  blockquote {
    padding: 2.8rem 2.8rem;
  }

}

blockquote p {
  font-family: "myfont", serif;
  font-weight: 400;
  padding: 0;
  font-size: 2.8rem;
  line-height: 1.857;
  color: #000000;
}

@media screen and (max-width:1200px) {
  blockquote p {
    font-size: 2.6rem;
  }

}

@media screen and (max-width:600px) {
  blockquote p {
    font-size: 2.2rem;
  }

}

blockquote cite {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  line-height: 1.333;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite,
blockquote cite a,
blockquote cite a:visited {
  color: #646464;
  border: none;
}

abbr {
  font-family: "myfont", serif;
  font-weight: 700;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05rem;
  color: #646464;
}

var,
kbd,
samp,
code,
pre {
  font-family: "myfont",'-apple-system', 'Open Sans', 'Helvetica Neue',sans-serif;
}

pre {
  padding: 2.4rem 3.2rem 3.2rem;
  background: #efefef;
  overflow-x: auto;
}

code {
  font-size: 1.4rem;
  margin: 0 .2rem;
  padding: .4rem .8rem;
  white-space: nowrap;
  background: #efefef;
  border: 1px solid #d3d3d3;
  color: #000000;
  border-radius: 3px;
}

pre > code {
  display: block;
  white-space: pre;
  line-height: 2;
  padding: 0;
  margin: 0;
}

pre.prettyprint > code {
  border: none;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
  text-decoration: none;
}

mark {
  background: #fff099;
  color: #000000;
}

hr {
  border: solid #e0e0e0;
  border-width: 1px 0 0;
  clear: both;
  margin: 8rem 0 9.6rem;
  height: 0;
}

/* ------------------------------------------------------------------- 
 * ## lists
 * ------------------------------------------------------------------- */
ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  list-style: none;
}

ol,
ul {
  margin-left: 1.6rem;
}

ul li {
  padding-left: .4rem;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: .8rem 0 .8rem 1.6rem;
}

ul.disc li {
  display: list-item;
  list-style: none;
  padding: 0 0 0 .8rem;
  position: relative;
}

ul.disc li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b0d11;
  position: absolute;
  left: -16px;
  top: 11px;
  vertical-align: middle;
}

dt {
  margin: 0;
  color: #3b0d11;
}

dd {
  margin: 0 0 0 2rem;
}



/* ------------------------------------------------------------------- 
 * ## tables
 * ------------------------------------------------------------------- */
table {
  border-width: 0;
  width: 100%;
  max-width: 100%;
  font-family: "myfont", serif;
  border-collapse: collapse;
}

th,
td {
  padding: 1.5rem 3.2rem;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

th {
  color: #000000;
  font-family: "myfont", sans-serif;
  font-weight: 700;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------- 
 * ## spacing
 * ------------------------------------------------------------------- */
button,
.btn {
  margin-bottom: 1.6rem;

}

fieldset {
  margin-bottom: 1.6rem;
}

input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.video-container,
.ss-custom-select {
  margin-bottom: 3.2rem;
}


/* ===================================================================
 * # preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #121212;
  z-index: 500;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.no-js #preloader,
.oldie #preloader {
  display: none;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  padding: 0;
  display: inline-block;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

#loader > div {
  content: "";
  background: #ffffff;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

#loader > div:nth-of-type(1) {
  left: 15px;
}

#loader > div:nth-of-type(3) {
  left: -15px;
}

/* dots jump */
.dots-jump > div {
  -webkit-animation: dots-jump 1.2s infinite ease;
  animation: dots-jump 1.2s infinite ease;
  animation-delay: 0.2s;
}

.dots-jump > div:nth-of-type(1) {
  animation-delay: 0.4s;
}

.dots-jump > div:nth-of-type(3) {
  animation-delay: 0s;
}

@-webkit-keyframes dots-jump {
  0% {
    top: 0;
  }

  40% {
    top: -6px;
  }

  80% {
    top: 0;
  }

}

@keyframes dots-jump {
  0% {
    top: 0;
  }

  40% {
    top: -6px;
  }

  80% {
    top: 0;
  }

}

/* dots fade */
.dots-fade > div {
  -webkit-animation: dots-fade 1.6s infinite ease;
  animation: dots-fade 1.6s infinite ease;
  animation-delay: 0.4s;
}

.dots-fade > div:nth-of-type(1) {
  animation-delay: 0.8s;
}

.dots-fade > div:nth-of-type(3) {
  animation-delay: 0s;
}

@-webkit-keyframes dots-fade {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 0.2;
  }

  80% {
    opacity: 1;
  }

}

@keyframes dots-fade {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 0.2;
  }

  80% {
    opacity: 1;
  }

}

/* dots pulse */
.dots-pulse > div {
  -webkit-animation: dots-pulse 1.2s infinite ease;
  animation: dots-pulse 1.2s infinite ease;
  animation-delay: 0.2s;
}

.dots-pulse > div:nth-of-type(1) {
  animation-delay: 0.4s;
}

.dots-pulse > div:nth-of-type(3) {
  animation-delay: 0s;
}

@-webkit-keyframes dots-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    -webkit-transform: scale(1.1);
    transform: scale(1.3);
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}

@keyframes dots-pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    -webkit-transform: scale(1.1);
    transform: scale(1.3);
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}


/* ===================================================================
 * # forms
 *
 * ------------------------------------------------------------------- */
fieldset {
  border: none;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  display: block;
  height: 6.8rem;
  padding: 1.8rem 0 1.5rem;
  border: 0;
  outline: none;
  color: #000000;
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  max-width: 100%;
  background: transparent;
  border-bottom: 1px solid #d3d3d3;
  transition: all .3s ease-in-out;
}



textarea {
  min-height: 25.6rem;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  color: #000000;
  border-bottom: 1px solid #000000;
}

label,
legend {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: .8rem;
  line-height: 1.714;
  color: #000000;
  display: block;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
}

label > .label-text {
  display: inline-block;
  margin-left: 1rem;
  font-family: "Open Sans", sans-serif;
  line-height: inherit;
}

label > input[type="checkbox"],
label > input[type="radio"] {
  margin: 0;
  position: relative;
  top: .2rem;
}

/* ------------------------------------------------------------------- 
 * ## style placeholder text
 * ------------------------------------------------------------------- */
::-webkit-input-placeholder {

  /* WebKit, Blink, Edge */
  color: #8c8c8c;
}

:-moz-placeholder {

  /* Mozilla Firefox 4 to 18 */
  color: #8c8c8c;
  opacity: 1;
}

::-moz-placeholder {

  /* Mozilla Firefox 19+ */
  color: #8c8c8c;
  opacity: 1;
}

:-ms-input-placeholder {

  /* Internet Explorer 10-11 */
  color: #8c8c8c;
}

::-ms-input-placeholder {

  /* Microsoft Edge */
  color: #8c8c8c;
}

::placeholder {

  /* Most modern browsers support this now. */
  color: #8c8c8c;
}

.placeholder {
  color: #8c8c8c !important;
}

/* ------------------------------------------------------------------- 
 * ## change autocomplete styles in Chrome
 * ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #3b0d11;
  transition: background-color 5000s ease-in-out 0s;
}


/* ===================================================================
 * # buttons
 *
 * ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  font-family: "myfont",'-apple-system', 'Open Sans', 'Helvetica Neue',sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .6rem;
  height: 6rem;
  line-height: 5.6rem;
  padding: 0 3.2rem;
  margin: 0 .4rem 1.6rem 0;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #272727;
  border: 0.2rem solid #272727;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  outline: 0;
}

/* button primary
 * ------------------------------------------------- */
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
  background: #3b0d11;
  border-color: #3b0d11;
  color: #ffffff;
}

.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
  background: #000000;
  border-color: #000000;
}

/* button modifiers
 * ------------------------------------------------- */
.btn.h-full-width,
button.h-full-width {
  width: 100%;
  margin-right: 0;
}

.btn--small,
button.btn--small {
  height: 5.6rem !important;
  line-height: 5.2rem !important;
}

.btn--medium,
button.btn--medium {
  height: 6.4rem !important;
  line-height: 6rem !important;
}

.btn--large,
button.btn--large {
  height: 6.8rem !important;
  line-height: 6.4rem !important;
}

.btn--stroke,
button.btn--stroke {
  background: transparent !important;
  border: 0.2rem solid #000000;
  color: #000000;
}

.btn--stroke:hover,
button.btn--stroke:hover {
  background: #000000 !important;
  border: 0.2rem solid #000000;
  color: #ffffff;
}

.btn--pill,
button.btn--pill {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
  border-radius: 1000px !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/* =================================================================== 
 * # additional components
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## additional typo styles
 * ------------------------------------------------------------------- */
.drop-cap:first-letter {
  float: left;
  font-family: "myfont",'-apple-system', 'Open Sans', 'Helvetica Neue',sans-serif;
  font-weight: 700;
  font-size: 3.6em;
  line-height: 1;
  padding: 0 0.125em 0 0;
  text-transform: uppercase;
  background: transparent;
  color: #000000;
}

/* line definition style 
 * ----------------------------------------------- */
.lining dt,
.lining dd {
  display: inline;
  margin: 0;
}

.lining dt + dt:before,
.lining dd + dt:before {
  content: "\A";
  white-space: pre;
}

.lining dd + dd:before {
  content: ", ";
}

.lining dd + dd:before {
  content: ", ";
}

.lining dd:before {
  content: ": ";
  margin-left: -0.2em;
}

/* dictionary definition style 
 * ----------------------------------------------- */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions;
}

.dictionary-style dt + dt:before {
  content: ", ";
  margin-left: -0.2em;
}

.dictionary-style dd {
  display: block;
  counter-increment: definitions;
}

.dictionary-style dd:before {
  content: counter(definitions, decimal) ". ";
}



/* ===================================================================
 * # site header
 *
 * ------------------------------------------------------------------- */
.s-header{
  z-index: 11100;
  height: 8.3rem;
  width: 100%;
  left: 0;
  background-color: #fff;
  position: relative;
}
.s-header-active{
  position:fixed;
  top:0;
}
.s-header .header{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
.s-header .header .showMenu,.s-header .header .header-logo,.s-header .header .header-slogan{
  width: 33%;
}
/* -------------------------------------------------------------------
 * ## header logo
 * ------------------------------------------------------------------- */
.header-logo {
  z-index: 10200;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.header-logo a {
  display: block;
  padding: 0;
  outline: 0;
  border: none;
}

.header-logo img {
  width: 183px;
  height: auto;
}
.header-nav img{
  width: 158px;
  height: 53px;
}
.header-slogan{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: flex-end;
}
.header-slogan ul{
  height: 70%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  flex-direction:row-reverse;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.header-slogan li{
  font-size: 1.6rem;
  width: 100%;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  color: #727171;
}
.header-slogan li .dropdown{
  display: inline-block;
  line-height: 1.5;
  border: 1px solid #aaa;
  font-size: 1rem;
  width: 55%;
  border-radius: 6px;
  text-align: center;
  margin-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
}.
.dropbtn{
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  border-radius: 6px;
  overflow: hidden;
  position: absolute;
  right: 0;
  background-color: #d61518;
  min-width: 55%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-align: center;
  font-family: 'myfont',serif;
  font-size: 1.2rem;
  z-index: 999;
}
.dropdown-content a {
  color:#fff;
  padding: 16px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ea474f}

.dropbtn:hover .dropdown-content {
  display: block;
}
.dropbtn:hover .dropdown {
  background-color: #f2f2f2;
}
.header-menu-toggle {
  z-index: 10200;
  display: block;
  height: 8.2rem;
  width: 4.5rem;
  line-height: 4.2rem;
  font-family: "myfont", serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.mobile_bg{display:none;position:fixed;top:0px;left:0px;width:100%;height:600px;background:rgba(255,255,255,0.9);z-index:10000;}
.mobile_nav{display:none;position:fixed;top:120px;left:0px;width:100%;z-index:10000;}
.mobile_nav ul li{
  padding:0px 25px;
  line-height:50px;
  font-size: 2rem;  
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.mobile_nav ul li a{color:#222;}
.mobile_nav ul li a:hover,.mobile_nav ul li a:focus{color:#fb8b23;}

.header-menu-toggle:hover,
.header-menu-toggle:focus {
  color: #ffffff;
}

.header-menu-toggle span {
  display: block;
  width: 3.8rem;
  height: 4px;
  background-color:black;
  transition: all .5s;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  left: .9rem;
  right: auto;
  bottom: auto;
  border-radius: 4px;
}

.header-menu-toggle span::before,
.header-menu-toggle span::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  transition: all .5s;
  position: absolute;
  left: 0;
  border-radius:4px;
}

.header-menu-toggle span::before {
  top: -1.1rem;
}

.header-menu-toggle span::after {
  bottom: -1.1rem;
}

.header-menu-toggle.is-clicked span {
  background-color: rgba(255, 255, 255, 0);
  transition: all .1s;
}

.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
  background-color: black;
}

.header-menu-toggle.is-clicked span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.header-menu-toggle.is-clicked span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.about-content{
  font-weight: bold;
}

/*----------index_new_20200915*/
.index_kawasaki{
  position: relative;
}
.index_kawasaki_con{
    position: absolute;
    width: 30%;
    left: 12%;
    top: 0%;
    height: 100%;
}
.index_mizuno_img{
  position: absolute;
  right: 0%;
  top: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.index_mizuno_img img{
  max-width:68% ;
}
.index_kawasaki_img{
  line-height: 0;
  border-bottom: 1px solid #000;
}
.popularA{
  background:rgba(105, 189, 138, 0.8);
}
.popularB{
  background:rgba(203, 101, 162, 0.8);
}
.popularC{
  background:rgba(223, 155, 86, 0.8);
}
.popularD{
  background:rgba(85, 91, 166, 0.6);
}
.popularE{
  background:rgba(181, 181, 182, 1);
}
.index_kawasaki_con_slide{
  display: flex;
  display: -webkit-flex;
  height: 100%;
  flex-wrap: wrap;
  padding: 6% 10%;
}
.index_kawasaki_con_slide div{
  width: 100%;
}
.index_kawasaki_con_slideB{
  align-self: flex-end;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
}
.kawasaki_con_slideA_position{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
}
.kawasaki_con_slideA_position span{
  font-family:'special',serif;
}
.index_kawasaki_con_slideA h3,.index_kawasaki_con_slideA p{
  font-family: 'myfont','serif';
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.6;
}
.index_kawasaki_con_slideA p{
  font-size: 1.6rem;
}
.index_ourservice{
  width: 100%;
  height:24%;
}
/*-----------index_new_20200915*/

.s-digital{
  padding-top: 8.6rem;
    padding-bottom: 12rem;
    position: relative;
    overflow: hidden;
}
.digital-bg{
    position: absolute;
    width: 70%;
    height: 100%;
    /*background: url(../images/mizuno_2.png) no-repeat right;*/
    top: 0px;
    left: -18rem;
    -webkit-transform: skewX(-16deg);
    transform: skewX(-16deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    z-index: -1;
}
.digital-content{
  z-index: 4;
  width: 100%;
  display: flex;
  display: -webkit-flex;
}
.digital-content div{
  width: 50%;
}
.digital-content-word{
  padding-left: 5.7%;
}
.digital-content-img{
  padding-right: 5.7%;
}
.digital-content-word h4{
  font-family: 'myfont','serif';
}
.digital-content-word h3{
  font-family: 'myfont','serif';
  font-size: 1.8rem;
}
.digital-content-word p{
  font-family: 'myfont','serif';
  font-size: 1.6rem;
}
.digital-content-img{
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.s-kawasaki{

  color: #ffffff;
  display: flex;
  display: -webkit-flex;
  line-height: 0;
}
.s-kawasaki div{
  width: 50%;
}
.kawasaki-content{
  padding-left: 5.7%;
  padding-right: 2.7%;
  font-family: 'myfont',serif;
  line-height: 1.8;
  /*background: url(../images/1.jpg) no-repeat top;*/
  background-size: 100%;
}
.kawasaki-content h4,.kawasaki-content h3,.kawasaki-content p,.kawasaki-content a{
  color: #4b4b4b;
}
.kawasaki-content h4{
  font-family: 'myfont',serif;
  margin-top: 0;
}
.kawasaki-content h3{
  font-family: 'myfont',serif;
  font-weight: bold;
  font-size: 1.8rem;
}
.kawasaki-content p{
  font-size: 1.6rem;
}
.house-content{
  background-color: #c2027c;
  /*background: url(../images/2.jpg) no-repeat top;*/
  background-size: 100%;
}
.tutuanna-content{
  background-color: #faf038;
  /*background: url(../images/3.jpg) no-repeat top;*/
  background-size: 100%;
}
.house-content h4,.house-content h3,.house-content p,.house-content a{
  color: #fff;
}
.aeon-content{
  /*background: url(../images/4.jpg) no-repeat top;*/
  background-size: 100%;
}
.aeon-content h4,.aeon-content h3,.aeon-content p,.aeon-content a{
  color: #fff;
}
.tutuanna-content h4,.tutuanna-content h3,.tutuanna-content p,.tutuanna-content a{
  color: #4b4b4b;
}
.s-service{
  padding-top: 4.6rem;
  padding-bottom: 9.6rem;
  position: relative;
  font-family: 'myfont','serif';
  background-size: 100%;
  z-index: 200;
}
.s-service h4,.s-service h3,.s-service p,.s-service a{
  font-family: 'myfont','serif';
}
.s-service h4{
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
.s-service h3{
  font-size: 2.4rem;
  margin-top: 5rem;
  font-family: 'special', Helvetica, sans-serif;
  font-weight: normal;
  color: #898989;
}
.s-service p{
  font-size: 1.6rem;
  color: #727171;
}
.s-service .row{
  /*width: 78%;
  padding-right: 6%;*/
  box-sizing: border-box;
}
.banner{
  position: relative;
}
.video{
  width: 100%;
  z-index:9999;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  line-height: 0;
}
.video .slogan{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.video .about_slogan{
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
@media screen and (max-width:1440px) {

  .video .slogan{
    position: absolute;
    top: 0;
    bottom: 40px;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .video .about_slogan{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
}
@media screen and (max-width:2048px) {

  .video .slogan{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .video .about_slogan{
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
  }
  .video .work_slogan{
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
  }
}
.video .slogan h1{
  font-size: 2.8rem;
  text-align: left;
  margin: 0 auto;
  color: #fff;
}
.video .work_slogan h1{
  line-height: 1.3;
  color: #ffffff;
  font-size: 3.0rem;
}
.footer-top div{
  /*width: 100%;*/
  color: #000;
  font-size: 1.4rem;
}
.ssl_img{
  justify-content: space-between;
}
.footer-top div a{
  display: inline-block;
  line-height: 3.5;
  width: 20rem;
  background-color: #fff;
  text-align: center;
  font-size: 1.8rem;
  color: #000;
}
.footer-copyr{
  margin-top: 6rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
}
.footer-copyr a{
  margin-left:1.6rem;
}
.about{
  font-size: 2.24rem;
  color: #333;
  /*background-image: linear-gradient( to right, #e1d3d5, #fdfdfd, #e2d4d6);*/
  text-align: center;
  padding-top: 6%;
  padding-bottom: 6%;
  font-family: 'myfont','serif';
  font-weight:500;
  line-height: 1.5;
  padding-left: 6%;
  padding-right: 6%;
}
.about p{
  margin-bottom: 0;
  color: #fff;
}
.client_Tit{
  color: #fff;
  font-weight: bold;
  line-height:12rem;
  margin-bottom: 4rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.8rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.client_Tit span{
  font-size:1.8rem;
}
.client_list_slide{
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-right: -9%;
}
.client_list_slide li{
  text-align: center;
  width: 25%;
  margin-bottom: 5%;
  padding-right: 7%;
  padding-left: 0;
}
.client_list_slide li img{
  max-width: 100%;
}
/*.client_list .row{
  width: 78%;
}*/
.digital-content-word h4,.digital-content-word h3,.digital-content-word p,.digital-content-word a{
  color: #000;
}
.kawasaki_text{
  width: 100%!important;
}

/* ===================================================================
 * # footer 
 *
 * ------------------------------------------------------------------- */
 .s-footer {
  padding-top: 4rem;
  padding-bottom: 5rem;
  background-color: #b3b3b3;
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  line-height: 1.882;
  color: #fff;
  position: relative;
  z-index: 2;
}

.s-footer a {
  color: #fff;
}

.s-footer .btn--footer {
  border-color: #21070a;
  background-color: #21070a;
  padding: 0 4rem;
}


/* ===================================================================
 * # hero
 *
 * ------------------------------------------------------------------- */


/* fade in */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

}

/* fade out */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

}

/* ------------------------------------------------------------------- 
 * responsive:
 * hero
 * ------------------------------------------------------------------- */
 .video .about_slogan h1{
  line-height: 1.3;
  color: #ff6600;
  font-size: 2.8rem;
}
@media screen and (max-width:2560px) {
  .video .about_slogan h1{
    font-size: 4.4rem;
  }
}
@media screen and (max-width:1920px) {
  .video .about_slogan h1{
    font-size: 4rem;
  }
}
@media screen and (max-width:1600px) {
  .video .about_slogan h1{
    font-size: 3.8rem;
  }
}
@media screen and (max-width:1400px) {
  .video .about_slogan h1{
    font-size: 3rem;
  }
}
@media screen and (max-width:1000px) {
  .video .about_slogan h1{
    font-size: 2.2rem;
  }
}
@media screen and (max-width:720px) {
  .video .about_slogan h1{
    font-size: 1.6rem;
  }
}
 @media screen and (max-width:2560px) {
  .client_list_slide li{
    text-align: center;
    width: 25%;
    margin-bottom: 5%;
    padding-right: 11%;
  }
  .index_kawasaki_con{
    left: 17%;
}
  .s-footer .row,.s-service .row{
    /*width: 78%;
    max-width: 1280px;*/
    padding: 0 3%;
  }
  /*.client_list .row{
    width: 78%;
    max-width: 1280px;
  }*/
  .digital-bg{
    width: 63%;
  }
  .kawasaki-content{
    padding-right: 5.7%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .about{
    font-size: 2.8rem;
    line-height: 1.8;
  }
  .video .slogan h1{
    font-size:4rem;
  }
 }
 @media screen and (max-width:1920px) {
  .header-slogan li .dropdown{
    width: 55%;
  }
  .dropdown-content{
    min-width: 55%;
  }
  .digital-bg{
    width: 64%;
  }
  .index_kawasaki_con{
    left: 15%;
}
  .client_list_slide li{
    text-align: center;
    width: 25%;
    margin-bottom: 5%;
    padding-right: 9%;
  }
  
  .about{
    font-size: 2.6rem;
    line-height: 1.6;
  }
  .video .slogan h1{
    font-size:3.6rem;
  } 
  .s-header .header .showMenu,.s-header .header .header-logo,.s-header .header .header-slogan{
    width: 33%;
    line-height: 0.6;
  }
}
@media screen and (max-width:1700px) {
  .digital-bg{
    width: 66%;
  }
  .index_kawasaki_con{
    left: 12%;
}
  .kawasaki-content h3{
    font-family: 'myfont',serif;
    font-weight: bold;
    font-size: 2rem;
  }
  .digital-content-word h3{
    font-size: 2rem;
  }
  .about{
    font-size: 2.4rem;
    line-height: 1.6;
  }
}

@media screen and (max-width:1600px) {
  .digital-bg{
    width: 67%;
  }
  
  .about{
    font-size: 2.24rem;
    line-height: 1.5;
  }
  .video .slogan h1{
    font-size:3.2rem;
    transition: all .5s;
  }
}

@media screen and (max-width:1400px) {
  .digital-bg{
    width: 71%;
  }
  
  .video .slogan h1{
    font-size:3rem;
    transition: all .5s;
  }
}

@media screen and (max-width:1300px) {
  .digital-bg{
    width: 72%;
  }
  .header-slogan li .dropdown{
    width: 55%;
  }
  .dropdown-content{
    min-width: 55%;
  }
}

@media screen and (max-width:1200px) {
  .digital-bg{
    width: 74%;
  }
  .s-service .row{
    /*width: 89%;
    max-width: 1280px;*/
  }
  .client_list .row{
    width: 82%;
  }
  .index_kawasaki_con_slideA h3{
    margin-top: 3rem;
  }
  .index_kawasaki_con_slideA p{
    line-height: 1.3;
  }
  .index_ourservice{
    height: 18%;
  }
}

@media screen and (max-width:1000px) {
  .digital-bg{
    width: 76%;
  }
  .header-slogan li .dropdown{
    width: 60%;
  }
  .dropdown-content{
    min-width: 60%;
  }
  .index_kawasaki_con{
    left: 10%;
}
.kawasaki_con_slideA_position{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
}
.index_kawasaki_con_slideA h3,.index_kawasaki_con_slideA p{
  font-family: 'myfont','serif';
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.6;
  margin-top: 0.5%;
}
.index_kawasaki_con_slideA p{
  font-size: 1.4rem;
}
.index_kawasaki_con_slideB{
  font-size: 1.6rem;
}
.video .slogan h1{
  font-size: 2.2rem;
  padding: 0 0%;
}
.about{
  font-size: 1.8rem;
  line-height: 1.5;
  padding-left: 3%;
  padding-right: 3%;
}
}

@media screen and (max-width:800px) {
  .digital-bg{
    width: 100%;
    left:0rem;
    -webkit-transform: skewX(0);
    transform: skewX(0);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    transition:all 1s;
  }
  .digital-content{
    flex-wrap: wrap-reverse;

  }
  .digital-content div{
    width: 90%;
    margin: 0 auto;
  }
  .s-digital{
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .about{
    font-size: 1.8rem;
    line-height: 1.5;
    padding-left: 6%;
    padding-right: 6%;
  }
  .video .slogan h1{
    font-size: 2.1rem;
  }
  .index_kawasaki_con{
    left: 8%;
}
.kawasaki_con_slideA_position{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
}
.index_kawasaki_con_slideA h3,.index_kawasaki_con_slideA p{
  font-family: 'myfont','serif';
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.6;
  margin-top: 0.5%;
}
.index_kawasaki_con_slideA p{
  font-size: 1.2rem;
}
.index_kawasaki_con_slideB{
  font-size: 1.4rem;
}
.header-slogan li .dropdown{
  width: 80%;
}
}

@media screen and (max-width:700px) {
 
  .about{
    font-size: 1.6rem;
    line-height: 1.5;
  }
  .video .slogan h1{
    font-size: 1.8rem;
    padding: 0 0%;
  }
  .kawasaki_con_slideA_position{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
  }
  .index_kawasaki_con_slideA h3,.index_kawasaki_con_slideA p{
    font-family: 'myfont','serif';
    font-size: 1rem;
    color: #fff;
    line-height: 1.3;
    margin-top: 0.5%;
    margin-bottom: 0.6rem;
  }
  .index_kawasaki_con_slideA p{
    font-size: 1rem;
    margin-bottom: 0rem;
  }
  .s-footer .row, .s-service .row{
    padding: 0%;
  }
  .index_kawasaki_con{
    width: 36.6%;
    left: 6%;
    }
  .index_kawasaki_img{
      max-width: 120%;
      margin-left: -20%;
    }
  .index_kawasaki_con_slideB{
    font-size: 1.4rem;
  }
  .index_mizuno_img img{
    max-width:64% ;
  }
  .index_ourservice{
    height: 18%;
  }
  .s-footer{
    font-size: 1.2rem;
  }
  .footer-top div a{
    font-size: 1.6rem;
  }
}

@media screen and (max-width:600px) {
  
  .header-slogan li .dropdown{
    width: 90%;
  }
  .header-slogan li{
    font-size: 1rem;
    line-height: .8;
    z-index: 999;
  }
  .about{
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .video .slogan h1{
    font-size: 1.6rem;
    padding: 0 5%;
  }
.index_kawasaki_con{
  width: 50%;
  left: 6%;
  }
  .index_mizuno_img img{
    max-width:50% ;
  }
  .index_kawasaki_img{
    max-width: 160%;
    margin-left: -50%;
  }
  .index_kawasaki_con_slideB{
    font-size: 1rem;
  }
  .index_kawasaki_con_slide{
    padding: 6% 6%;
  }
  .s-service{
    padding-bottom: 2rem;
  }
  .s-service h3{
    font-size: 1.8rem;
    margin-top: 1rem;
  }
  .s-service p{
    font-size: 1.2rem;
  }
  .s-footer .row, .s-service .row{
    padding: 0 6%;
  }
  .index_ourservice{
    height: 14%;
  }
  .header-slogan ul{
    margin-left: 0;
  }
}

@media screen and (max-width:500px) {
  

}

@media screen and (max-width:400px) {
  .index_kawasaki_con_slideA h3,.index_kawasaki_con_slideA p{
    line-height: 1.2;
    font-size: 1.1rem;
  }
  .index_kawasaki_con_slideA h3{
    margin-bottom: .8rem;
    margin-top: .8rem;
  }
  .index_kawasaki_con_slideA p{
    line-height: 1.2;
    font-size: 1.1rem;
  }
  .kawasaki_con_slideA_position{
    font-size: 1.1rem;
  }
  .index_kawasaki_con_slideB{
    font-size: 1.3rem;
  }
  .s-header{
    height: 9.5rem;
  }
}




/* ------------------------------------------------------------------- 
 * ## go to top 
 * ------------------------------------------------------------------- */
.ss-go-top {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  transition: all .8s;
  position: fixed;
  bottom: 4rem;
  right: 4.8rem;
}

.ss-go-top a {
  display: block;
  background-color: #000000;
  text-decoration: none;
  margin: 0;
  padding: 0;
  border: none;
  height: 60px;
  width: 58px;
  line-height: 60px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  transition: all .3s;
  position: relative;
}

.ss-go-top svg {
  height: 12px;
  width: 12px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
  top: 50%;
  left: 50%;
}

.ss-go-top svg path {
  fill: #ffffff;
}

.ss-go-top a:hover {
  background-color: #037c82;
  color: #ffffff;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
  .ss-go-top {
    bottom: 3.6rem;
    right: 3.2rem;
  }

}

@media screen and (max-width:800px) {
  .ss-copyright span {
    display: block;
  }

  .ss-copyright span::after {
    display: none;
  }

  .ss-go-top {
    bottom: 0;
    right: 0;
  }

}

@media screen and (max-width:400px) {
  .btn--footer {
    display: block;
    margin-right: 0;
  }

  .footer-logo img {
    width: 116px;
    height: 30px;
  }

}


/* ===================================================================
 * # page styles and page components 
 *
 * ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## page header 
 * ------------------------------------------------------------------- */
.page-header {
  min-height: 24rem;
  padding-top: 24rem;
  padding-bottom: 8rem;
  text-align: center;
  background-color: #121212;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.page-header::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .7;
}

.page-header .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 90%);
  opacity: .5;
}

.page-header h1 {
  font-size: 6.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #ffffff;
  margin-top: 0;
}

.page-header--about {
  background-image: url(../images/header-bgs/about-header-bg-2000.jpg);
}

.page-header--contact {
  background-image: url(../images/header-bgs/contact-header-bg-2000.jpg);
}

.page-header--events {
  background-image: url(../images/header-bgs/events-header-bg-2000.jpg);
}

.page-header--connect {
  background-image: url(../images/header-bgs/connect-header-bg-2000.jpg);
}

.page-header--volunteer {
  background-image: url(../images/header-bgs/volunteer-header-bg-2000.jpg);
}

.page-header__content {
  position: relative;
}

/* ------------------------------------------------------------------- 
 * ## page content 
 * ------------------------------------------------------------------- */
.page-content {
  padding-top: 12rem;
  padding-bottom: 16rem;
  background-color: #ffffff;
}

.page-content .row {
  max-width: 1080px;
}

/* ------------------------------------------------------------------- 
 * ## about page 
 * ------------------------------------------------------------------- */

/* church staff
 * ----------------------------------------------- */
.church-staff {
  margin-top: 6rem;
}

.church-staff__item {
  margin-bottom: 1.6rem;
}

.church-staff__header {
  margin-bottom: 1.6rem;
  padding-top: 1.6rem;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.church-staff__name {
  margin-top: 0;
  font-weight: 700;
}

.church-staff__position {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: .6rem;
}

.church-staff__picture {
  -webkit-flex: 0 0 8rem;
  -ms-flex: 0 0 8rem;
  flex: 0 0 8rem;
  max-width: 8rem;
  margin-right: 2rem;
}

.church-staff__picture img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

/* ------------------------------------------------------------------- 
 * ## event page 
 * ------------------------------------------------------------------- */

/* event content
 * ----------------------------------------------- */
.event-content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6rem;
}

.event-thumb {
  padding: 2.4rem;
  background-color: #efefef;
}

.event-thumb img {
  vertical-align: bottom;
}

.event-title {
  text-align: center;
}

.event-meta {
  list-style: none;
  margin-top: 4.8rem;
  margin-left: 0;
  border-top: 1px solid #e0e0e0;
  font-family: "Open Sans", sans-serif;
  font-size: 1.7rem;
  line-height: 3.2rem;
}

.event-meta li {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 0;
  border-bottom: 1px solid #e0e0e0;
}

.event-meta strong {
  font-family: "Open Sans", sans-serif;
  margin-right: 1.2rem;
  color: #3b0d11;
}

.event-meta strong::after {
  content: " :";
}

/* ------------------------------------------------------------------- 
 * responsive:
 * page styles
 * ------------------------------------------------------------------- */
@media screen and (max-width:800px) {
  .page-header {
    padding-top: 20rem;
  }

  .page-header h1 {
    font-size: 5.5rem;
  }

}

@media screen and (max-width:600px) {
  .page-header h1 {
    font-size: 4.8rem;
  }

  .event-thumb {
    padding: 2rem;
  }

}

@media screen and (max-width:500px) {
  .church-staff__name {
    font-size: 2rem;
  }

  .church-staff__picture {
    -webkit-flex: 0 0 6.4rem;
    -ms-flex: 0 0 6.4rem;
    flex: 0 0 6.4rem;
    max-width: 6.4rem;
  }

  .church-staff__picture img {
    width: 6.4rem;
    height: 6.4rem;
  }

  .event-thumb {
    padding: 1.6rem;
  }

}

@media screen and (max-width:400px) {
  .page-header h1 {
    font-size: 4.2rem;
  }

}

/*# sourceMappingURL=main.css.map */