/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.5
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@charset "UTF-8";
/*English*/
/*--------------------------
 Mixin
----------------------------*/
body, html, h1, h2, h3, h4, h5, ul, li, div, p, img, section, a, header, footer, figure, dl, dt, dd, button {
  margin: 0;
  padding: 0;
  color: #111111;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  box-sizing: border-box;
}

section, header, footer {
  display: block;
}

img {
  vertical-align: bottom;
}

ul {
  list-style: none;
}

a {
  color: #666666;
  text-decoration: none;
}

a:hover {
  color: #ca3625;
  text-decoration: none;
}

.display-pc {
  display: block;
}

.display-md {
  display: none;
}

.display-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .display-pc {
    display: none;
  }
  .display-under-md {
    display: block;
  }
  .display-sp {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .display-pc {
    display: none;
  }
  .display-under-md {
    display: block;
  }
  .display-sp {
    display: block;
  }
}

/*--------------------------
 Common
----------------------------*/
.wrapp {
  width: 100%;
  overflow: hidden;
}

.header-gap {
  height: 80px;
}

.container {
  width: 100%;
  max-width: 1020px;
  padding: 0;
  margin: 0 auto 0;
}

.btn-wrapp {
  width: 100%;
  text-align: center;
}

.btn-wrapp a.btn-primary {
  display: inline-block;
  height: 60px;
  margin: 0 auto 0;
  padding: 1.125rem 3.75rem;
  font: 600 normal 1.3125rem/1.0 sans-serif;
  color: #fff;
  background-color: #ca3625;
  border-radius: 30px;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  box-sizing: border-box;
}

.btn-wrapp a.btn-primary.ex {
  height: 60px;
  margin-top: 2.625rem;
  color: #ca3625;
  font: 500 normal 1.375rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color: #fff;
  border: 2px solid #ca3625;
}

/*.btn-wrapp a.btn-primary.ex::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-blank.png");
  vertical-align: -2px;
}*/

.btn-wrapp a.btn-primary.ex:hover {
  color: #fff;
  background-color: #ca3625;
}

.btn-wrapp a.btn-primary.ex:hover::after {
  background-image: url("/img2/en/icon-blank-hover.png");
}

.btn-wrapp a.btn-primary:hover {
  padding: 1.125rem 3.75rem;
  color: #ca3625;
  background-color: #fff;
  border: 2px solid #ca3625;
  border-radius: 30px;
}

.breadcrumb {
  max-width: 1020px;
  padding-top: 3rem;
  margin: 0 auto 7.5rem;
  color: #666;
  font-size: 1rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.page .container {
  padding: 0rem;
  background-color: transparent;
}

.buddy-list-box {
 margin-bottom: 3rem;
}

.page h2.h2 {
  color: #000;
  font: 500 normal 2.0rem/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
  max-width: 1020px;
  margin: 0 auto;
}

.page h2.h2::after {
  content: '';
  display: block;
  width: 100px;
  height: 6px;
  margin: 1.25rem auto 3.125rem;
  background-color: #ca3625;
}

.page p {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  .btn-wrapp {
    width: 100%;
    text-align: center;
  }
  .btn-wrapp a.btn-primary {
    height: 42px;
    margin: 0 auto 0;
    padding: 0.75rem 2rem 0.75rem;
    font: 600 normal 1.05rem/1.0 sans-serif;
    border-radius: 21px;
  }
  .btn-wrapp a.btn-primary.ex {
    height: 60px;
    border-radius: 30px;
    padding: 1.2rem 2rem 1.25rem;
    margin-top: 0.5rem;
    font: 600 normal 1.25rem/1.0 sans-serif;
    background-color: #fff;
    border: 2px solid #ca3625;
  }
  .btn-wrapp a.btn-primary.ex::after {
    width: 16px;
    height: 16px;
    margin-left: 0.25rem;
    vertical-align: 0px;
  }
  .btn-wrapp a.btn-primary:hover {
    color: #ca3625;
    background-color: #fff;
    border: 1px solid #ca3625;
    border-radius: 30px;
  }
  .breadcrumb {
    padding: 1.25rem 0 0;
    margin: 0 auto 2rem;
    color: #666;
    font-size: 0.75rem;
  }
  .page h2.h2 {
    font: 500 normal 1.65rem/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .page h2.h2::after {
    width: 57px;
    height: 4px;
    margin: 0.75rem auto 1.75rem;
  }
  .page h2.h2.ex {
    font: 500 normal 1.4rem/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
      }
  .page p {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}

/*--------------------------
 Drawer Menu
----------------------------*/
.drawer-hamburger {
  top: 1.5em !important;
  right: 0rem !important;
}

.drawer-nav {
  padding-top: 4.5rem;
}

.drawer-nav ul.drawer-menu {
  /*display: none;*/
  width: 340px;
  margin: 0 auto 0;
  padding-bottom: 15rem;
  border-top: 1px solid #98291c;
  /*overflow-y: scroll;
    -webkit-overflow-scrolling: touch;*/
}

.drawer-nav ul.drawer-menu .drawer-dropdown.open .drawer-caret {
  width: 20px;
  height: 20px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-minus.png");
  border: none;
}

.drawer-nav ul.drawer-menu .drawer-dropdown .drawer-caret {
  position: absolute;
  right: 10px;
  top: 20px;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-plus.png");
  border: none;
}

.drawer-nav ul.drawer-menu li {
  position: relative;
}

.drawer-nav ul.drawer-menu li a {
  display: block;
  padding: 1.25rem 0;
  color: #fff;
  font: 500 1.25rem/1.0 sans-serif;
  text-align: left;
  border-bottom: 1px solid #98291c;
  -webkit-transition: background-color .2s ease;
  transition: background-color .2s ease;
}

.drawer-nav ul.drawer-menu li a:hover {
  background-color: #98291c;
  text-decoration: none;
}

.drawer-nav ul.drawer-menu li ul {
  display: none;
}

.drawer-nav ul.drawer-menu li ul li a {
  font: 400 1.375rem/1.5 sans-serif;
  padding-left: 1.25rem;
  padding-right: 2.5rem;
}

.drawer-nav ul.drawer-menu li.ex a {
  font: 500 1.5rem/1.0 sans-serif;
  text-align: center;
  border-bottom: none;
}

.drawer-nav ul.drawer-menu li.ex-blank a {
  position: relative;
}

.drawer-nav ul.drawer-menu li.ex-blank a::after {
  position: absolute;
  top: calc(50% - 9px);
  right: 10px;
  content: '';
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-left: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-blank-hover.png");
  vertical-align: -2px;
}

@media screen and (max-width: 768px) {
  .drawer-hamburger {
    top: 0.6rem !important;
    right: -1rem !important;
  }
  .drawer-nav {
    padding-top: 4.5rem;
  }
  .drawer-nav ul.drawer-menu {
    /*display: none;*/
    width: 210px;
  }
  .drawer-nav ul.drawer-menu .drawer-dropdown.open .drawer-caret {
    width: 14px;
    height: 14px;
    background-size: 14px auto;
  }
  .drawer-nav ul.drawer-menu .drawer-dropdown .drawer-caret {
    right: 10px;
    top: 14px;
    width: 14px;
    height: 14px;
  }
  .drawer-nav ul.drawer-menu li a {
    padding: 1rem 0;
    color: #fff;
    font: 500 0.9375rem/1.0 sans-serif;
  }
  .drawer-nav ul.drawer-menu li a:hover {
    background-color: #98291c;
    text-decoration: none;
  }
  .drawer-nav ul.drawer-menu li ul {
    display: none;
  }
  .drawer-nav ul.drawer-menu li ul li a {
    font: 400 0.75rem/1.5 sans-serif;
    padding-left: 1.25rem;
  }
  .drawer-nav ul.drawer-menu li.ex a {
    font: 500 1rem/1.0 sans-serif;
  }
  .drawer-nav ul.drawer-menu li.ex-blank a::after {
    top: calc(50% - 5px);
    right: 11px;
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 0.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/img2/en/icon-blank-hover.png");
    vertical-align: -2px;
  }
}

/*--------------------------
 Header
----------------------------*/
header.header {
  position: relative;
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 10;
  background-color: #ca3625;
}

header.header .container {
  width: 100% !important;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  height: 80px;
}

header.header .header-logo {
  width: 148px;
  padding: 0;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

header.header .header-logo img {
  width: 100%;
  height: auto;
}

header.header .header-logo:hover {
  opacity: 0.7;
}

header.header .icon-wrapp {
  position: absolute;
  top: 2.0rem;
  right: 5rem;
  /*width: 32px;*/
  width: 4rem;
  color: #fff;
}
header.header .icon-wrapp a {
 color: #fff;
}
header.header .icon-wrapp a:hover { 
 text-decoration: underline;
}

header.header .icon-wrapp .icon-en {
  width: 32px;
  height: auto;
  margin-right: 1.6875rem;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

header.header .icon-wrapp .icon-en img {
  width: 100%;
  height: auto;
}

header.header .icon-wrapp .icon-en:hover {
  opacity: 0.7;
}

header.header .icon-wrapp .menu-icon {
  display: block;
  z-index: 200;
  width: 30px;
  cursor: pointer;
  z-index: 999;
}

header.header .icon-wrapp .menu-icon span {
  display: block;
  width: 30px;
  height: 6px;
  background-color: #fff;
}

header.header .icon-wrapp .menu-icon span.top, header.header .icon-wrapp .menu-icon span.mid {
  margin-bottom: 6px;
}

header.header .icon-wrapp .menu-icon span.top, header.header .icon-wrapp .menu-icon span.end {
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

header.header .icon-wrapp .menu-icon span.mid {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

header.header .icon-wrapp .menu-icon.active span.top {
  -webkit-transform: translateY(12px) rotate(315deg);
          transform: translateY(12px) rotate(315deg);
}

header.header .icon-wrapp .menu-icon.active span.mid {
  opacity: 0;
}

header.header .icon-wrapp .menu-icon.active span.end {
  -webkit-transform: translateY(-12px) rotate(225deg);
          transform: translateY(-12px) rotate(225deg);
}

header.header.ex {
  background-color: transparent;
}

header.header .drawer-nav {
  margin-top: -1rem;
}

@media screen and (max-width: 768px) {
  header.header {
    height: 58px;
  }
  header.header .container {
    height: 58px;
    padding: 0 0.75rem;
  }
  header.header .header-logo {
    width: 96px;
    padding-bottom: 0.5rem;
  }
  header.header .header-logo img {
    width: 100%;
    height: auto;
  }
  header.header .icon-wrapp {
    position: absolute;
    top: 1.3rem;
    right: 4rem;
    /*width: 26px;*/
  }
  header.header .icon-wrapp .icon-en img {
    width: 100%;
    height: auto;
  }
  header.header .icon-wrapp .menu-icon {
    display: block;
    z-index: 200;
    width: 30px;
    cursor: pointer;
    z-index: 999;
  }
  header.header .icon-wrapp .menu-icon span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #fff;
  }
  header.header .icon-wrapp .menu-icon span.top, header.header .icon-wrapp .menu-icon span.mid {
    margin-bottom: 7px;
  }
  header.header .icon-wrapp .menu-icon span.top, header.header .icon-wrapp .menu-icon span.end {
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
  }
  header.header .icon-wrapp .menu-icon span.mid {
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
  }
  header.header .icon-wrapp .menu-icon.active span.top {
    -webkit-transform: translateY(11px) rotate(315deg);
            transform: translateY(11px) rotate(315deg);
  }
  header.header .icon-wrapp .menu-icon.active span.mid {
    opacity: 0;
  }
  header.header .icon-wrapp .menu-icon.active span.end {
    -webkit-transform: translateY(-11px) rotate(225deg);
            transform: translateY(-11px) rotate(225deg);
  }
}

/*--------------------------
 Contents Entry
----------------------------*/
.page.entry {
  padding-top: 9.75rem;
}

.page.entry .hero-wrapp {
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  margin-top: -9.75rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/top-hero.jpg");
  z-index: -10;
}

@media screen and (max-width: 768px) {
  .page.entry .hero-wrapp {
    margin-top: -9.75rem;
    background-image: url("/img2/en/top-hero-sp.jpg");
    z-index: -10;
  }
  .page.entry .hero-wrapp a {
    width: 170px;
    font: 400 1rem/1.0 sans-serif;
  }
  .page.entry .hero-wrapp a img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
  }
}

/*--------------------------
 Contents Top
----------------------------*/
.page.index {
  height: 100%;
  /* index enter */
  /* index concept */
  /* index hero concept */
  /* index common */
  /* index about buddy */
  /* index-about-buddy */
  /* Modal */
  /* index tours */
  /* index intro buddy */
}

.page.index .hero-wrapp {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  margin-top: 0rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/top-hero.jpg");
  z-index: -10;
}

.page.index .index-enter {
  width: 100%;
  margin-bottom: 0rem;
}

.page.index .index-enter .container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 100% !important;
}

.page.index .index-enter .container a {
  width: 252px;
  display: block;
  -webkit-transition: opacity .2s ease, color .2s ease;
  transition: opacity .2s ease, color .2s ease;
}

.page.index .index-enter .container a:hover {
  opacity: 0.7;
  color: #ca3625;
}

.page.index .index-enter .container a img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

.page.index .index-concept {
  margin-bottom: 9rem;
}

.page.index .index-concept .text-wrapp {
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.7);
}

.page.index .index-concept .text-wrapp p {
  padding: 3.75rem 0;
  font: 500 1.325rem/2.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .page.index {
    /* index enter */
    /* index concept */
  }
  .page.index .hero-wrapp {
    background-image: url("/img2/en/top-hero-sp.jpg");
    z-index: -10;
  }
  .page.index .index-enter {
    width: 100%;
  }
  .page.index .index-enter .container a {
    width: 170px;
  }
  .page.index .index-enter .container a img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
  }
  .page.index .index-concept {
    margin-bottom: 4.5rem;
  }
  .page.index .index-concept .text-wrapp {
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.7);
  }
  .page.index .index-concept .text-wrapp p {
    padding: 2rem 0;
    font: 400 0.9375rem/1.8 sans-serif;
    text-align: center;
  }
}

.page.index .index-about-buddy,
.page.index_buddy .index-about-buddy,
.page.index .index-tours,
.page.index .index-intro-buddy {
  padding: 7.8rem 0 0 0;
  background-color: white;
}

.page.index .index-about-buddy .card-wrapp {
      display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify !important;
          justify-content: space-between !important;
  -webkit-box-align: start;
          align-items: flex-start;
}

.page.index_buddy .index-about-buddy .card-wrapp {
  display: -webkit-box;
  display: flex;
  /*justify-content: center;
  flex-direction: row;*/
  flex-wrap: wrap;
  /*-webkit-box-pack: justify !important;
  justify-content: space-between !important;*/
   -webkit-box-pack: start !important;
  justify-content: flex-start !important;
  -webkit-box-align: start;
  align-items: flex-start;
}

.page.index .index-about-buddy .card {
  max-width: 312px;
  padding: 0 0.75rem 1.5rem 0.8rem;
  background-color: #f0f0f0;
  margin-bottom: 2rem;
}
.page.index_buddy .index-about-buddy .card {
  max-width: 312px;
  padding: 0 0.75rem 1.5rem 0.8rem;
 background-color: #f0f0f0;
  margin-right: 42px; 
  margin-bottom: 2.4rem;
  }
.page.index_buddy .index-about-buddy .card:nth-child(3n)  {
  margin-right: 0px; 
 }
.page.index .index-about-buddy .card .card-head,
.page.index_buddy .index-about-buddy .card .card-head {
	/*display: -webkit-box;*/
	display: flex;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: start;
	align-items: flex-start;
	margin-bottom: 1.0rem;
}

.page.index .index-about-buddy .card .card-head figure,
.page.index_buddy .index-about-buddy .card .card-head figure {
  width: 130px;
  height: 170px;
}

.page.index .index-about-buddy .card .card-head figure img,
.page.index_buddy .index-about-buddy .card .card-head figure img {
  width: 100%;
  height: auto;
}

.page.index .index-about-buddy .card .card-head p,
.page.index_buddy .index-about-buddy .card .card-head p {
  padding-top: 1.5rem;
  padding-left: 0.75rem;
  font: 400 1rem/1.7 "Helvetica Neue",Helvetica,Arial,sans-serif;
  max-width: 160px;
}

.page.index .index-about-buddy .card .card-head p span.name,
.page.index_buddy .index-about-buddy .card .card-head p span.name {
  display: block;
  font: 600 1.2rem/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.index .index-about-buddy .card .card-head p small,
.page.index_buddy .index-about-buddy .card .card-head p small {
  display: block;
  padding-top: 1.05rem;
  font-size: 0.975rem;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.index .index-about-buddy .card .card-body,
.page.index_buddy .index-about-buddy .card .card-body {
  padding-bottom: 1.25rem;
  font: 400 1.0rem/1.57 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.index .index-about-buddy .card .card-body h3,
.page.index_buddy .index-about-buddy .card .card-body h3 {
  font-size: 1.18rem;
  margin-bottom: 0.5rem;
line-height: 1.325;
}

.page.index .index-about-buddy .card .btn-primary,
.page.index_buddy .index-about-buddy .card .btn-primary {
  height: 42px;
  padding: 0.75rem 2rem 0.5rem;
  font-size: 1.05rem;
}

@media screen and (max-width: 768px) {
  .page.index {
    /* index common */
    /* index-about-buddy */
  }
  .page.index .index-about-buddy,
  .page.index_buddy .index-about-buddy,
  .page.index .index-tours,
  .page.index .index-intro-buddy {
    padding: 5rem 0 0 0;
  }
.page.index .index-about-buddy .card-wrapp,
.page.index_buddy .index-about-buddy .card-wrapp {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    padding: 0 0.75rem;
  }
  .page.index .index-about-buddy .card, 
  .page.index_buddy .index-about-buddy .card
   {
    max-width: 100%;
    padding: 0 0.875rem 1.5rem;
    margin-bottom: 1.5rem;
    margin-right: 0;
  }
  .page.index .index-about-buddy .card .card-head,
  .page.index_buddy .index-about-buddy .card .card-head {
    margin-bottom: 1.4rem;
  }
  .page.index .index-about-buddy .card .card-head figure,
  .page.index_buddy .index-about-buddy .card .card-head figure
   {
    width: 130px;
    height: auto;
  }
  .page.index .index-about-buddy .card .card-head figure img, 
  .page.index_buddy .index-about-buddy .card .card-head figure img {
    width: 100%;
    height: auto;
  }
.page.index .index-about-buddy .card .card-head p,
.page.index_buddy .index-about-buddy .card .card-head p {
    padding-top: 1.4rem;
    padding-left: 0.75rem;
    font: 400 0.9375rem/1.7 sans-serif;
  }
  .page.index .index-about-buddy .card .card-head p span.name,
  .page.index_buddy .index-about-buddy .card .card-head p span.name {
    font: 600 1.525rem/1.2 'arial', sans-serif;
  }
  .page.index .index-about-buddy .card .card-head p small,
  .page.index_buddy .index-about-buddy .card .card-head p small {
    font-size: 1.025rem;
    line-height: 1.5;
  }
  .page.index .index-about-buddy .card .card-body,
  .page.index_buddy .index-about-buddy .card .card-body
   {
    padding-bottom: 1.25rem;
  }
}

.page.index .modal,
.page.index_buddy .modal {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: start;
          align-items: flex-start;
  width: 100%;
  height: 100vh;
  margin-bottom: 2rem;
}

.page.index .modal .modal-bg,
.page.index_buddy .modal .modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}

.page.index .modal-content {
  position: relative;
  max-width: 1020px;
  /*height: calc(100% - 2rem);
  margin-top: 1rem;*/
  height: calc(90% - 8rem);
  margin-top: 8rem;
  padding: 5rem 2.5rem;
  background-color: #f0f0f0;
  z-index: 1;
  overflow-y: auto;
}

.page.index_buddy .modal-content{
  position: relative;
  max-width: 1020px;
  height: calc(90% - 8rem);
  padding: 2.5rem;
  background-color: #f0f0f0;
  z-index: 1;
  overflow-y: auto;
}

.page.index .modal-content .hero,
.page.index_buddy .modal-content .hero {
  position: relative;
  width: 100%;
  margin-bottom: 1.25rem;
}

.page.index .modal-content .hero img,
.page.index_buddy .modal-content .hero img {
  width: 100%;
  height: auto;
}

.page.index .modal-content .hero .name-wrapp, 
.page.index_buddy .modal-content .hero .name-wrapp {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  font: 500 1.5rem/1 'arial', sans-serif;
  background-color: #f0f0f0;
}

.page.index .modal-content .hero .name-wrapp .name, 
.page.index_buddy .modal-content .hero .name-wrapp .name {
  display: block;
  margin-bottom: 0.5rem;
  font: 600 2.625rem/1 'arial', sans-serif;
}

.page.index .modal-content .info-wrapp, 
.page.index_buddy .modal-content .info-wrapp {
  margin-bottom: 2.5rem;
  font: 400 1.0rem/1.5 sans-serif;
}

.page.index .modal-content .info-wrapp .sns-wrapp, 
.page.index_buddy .modal-content .info-wrapp .sns-wrapp {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 1.25rem;
}

.page.index .modal-content .info-wrapp .status-wrapp ul, 
.page.index_buddy .modal-content .info-wrapp .status-wrapp ul{
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
          align-items: flex-start;
    margin-bottom: 1.0rem;
}

/*** added by Cozy > ***/
.page.index .modal-content .info-wrapp .status-wrapp ul li,
.page.index_buddy .modal-content .info-wrapp .status-wrapp ul li{
  margin-right: 1.5rem;
  font-size: 1.125rem;
}
.page.index_buddy .modal-content .info-wrapp .status-wrapp li.status-wrapp-birth {
  white-space:nowrap;
}
.page.index_buddy .modal-content .info-wrapp .status-wrapp li.status-wrapp-recom,
.page.index_buddy .modal-content .info-wrapp .status-wrapp li.status-wrapp-genre {
    width: 50%;
}
/*** < ***/

.page.index .modal-content .info-wrapp .status-wrapp ul li,
.page.index_buddy .modal-content .info-wrapp .status-wrapp ul li {
  margin-right: 1.5rem;
  font-size: 1.125rem;
}

.page.index .modal-content .info-wrapp a.fb, .page.index .modal-content .info-wrapp a.twitter, .page.index .modal-content .info-wrapp a.insta,
.page.index_buddy .modal-content .info-wrapp a.fb, .page.index_buddy .modal-content .info-wrapp a.twitter, .page.index_buddy .modal-content .info-wrapp a.insta
 {
  display: block;
  height: auto;
  margin-right: 1.875rem;
}

.page.index .modal-content .info-wrapp a.fb img, .page.index .modal-content .info-wrapp a.twitter img, .page.index .modal-content .info-wrapp a.insta img,
.page.index_buddy .modal-content .info-wrapp a.fb img, .page.index_buddy .modal-content .info-wrapp a.twitter img, .page.index_buddy .modal-content .info-wrapp a.insta img
 {
  width: 100%;
  height: auto;
}

.page.index .modal-content .info-wrapp .fb,
.page.index_buddy .modal-content .info-wrapp .fb {
  width: 10px;
}

.page.index .modal-content .info-wrapp .twitter,
.page.index_buddy .modal-content .info-wrapp .twitter {
  width: 21px;
}

.page.index .modal-content .info-wrapp .insta,
.page.index_buddy .modal-content .info-wrapp .insta {
  width: 18px;
}

.page.index .modal-content .text-wrapp
.page.index_buddy .modal-content .text-wrapp {
  margin-bottom: 3.125rem;
}

.page.index .modal-content .text-wrapp h3,
.page.index_buddy .modal-content .text-wrapp h3 {
  margin-bottom: 1.0rem;
  color: #ca3625;
  font: 500 2.2rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: 1.3;
}

.page.index .modal-content .text-wrapp p,
.page.index_buddy .modal-content .text-wrapp p {
  color: #333333;
  font: 400 1.125rem/1.9 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.index .modal-content .column-wrapp,
.page.index_buddy .modal-content .column-wrapp {
	display: -webkit-box;
	display: flex;
	flex-wrap: nowrap;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: start;
	align-items: flex-start;
	margin-bottom: 2rem;
}

.page.index .modal-content .column-wrapp figure,
.page.index_buddy .modal-content .column-wrapp figure {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  max-width: 440px;
  background-color: #fff;
}

.page.index .modal-content .column-wrapp figure img,
.page.index_buddy .modal-content .column-wrapp figure img {
  width: 100%;
  height: auto;
}

.page.index .modal-content .column-wrapp p,
.page.index_buddy .modal-content .column-wrapp p {
  color: #333333;
  font: 400 1rem/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: 1.5;
  max-width: 440px;
}

.page.index .modal-content .modal-close {
  position: absolute;
  top: 1.25rem;
  right: 2.5rem;
  width: 40px;
  height: auto;
}


@media screen and (max-width: 768px) {
 .page.index {
    /* Modal */
  }
 .page.index .modal,
 .page.index_buddy .modal {
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    width: 100%;
    height: 100vh;
    margin-bottom: 2rem;
    padding: 0 0.9375rem;
 }
 .page.index .modal-content {
    position: relative;
    width: 100%;
    max-width: 1020px;
    height: calc(90% - 3.5rem);
    margin-top: 3.5rem;
    margin-left: -0.5rem !important;
    margin-bottom: 3.5rem;
    padding: 3.75rem 0.875rem 2rem;
    z-index: 1;
    overflow-y: auto;
 }
  .page.index_buddy .modal-content {
    /*position: relative;*/
    width: 100%;
    max-width: 1020px;
    height: calc(90% - 3.5rem);
    margin-top: 0.6rem;
    margin-left: 0;
    margin-bottom: 1rem;
    padding: 0.875rem 0.875rem 1rem;
    /*z-index: 1;*/
    overflow-y: auto;
 }
  
 .page.index .modal-content .hero,
 .page.index_buddy .modal-content .hero {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
 }
 .page.index .modal-content .hero img,
 .page.index_buddy .modal-content .hero img {
    width: 100%;
    height: auto;
    margin-bottom: 1.25rem;
 }
 .page.index .modal-content .hero .name-wrapp,
 .page.index_buddy .modal-content .hero .name-wrapp {
    display: block;
    position: static;
    padding-right: 0;
    padding-top: 0;
    margin-bottom: 0.5rem;
    font: 500 1.125rem/1 sans-serif;
    text-align: center;
    background-color: transparent;
 }
 .page.index .modal-content .hero .name-wrapp .name,
 .page.index_buddy .modal-content .hero .name-wrapp .name {
    display: block;
    margin-bottom: 0.5rem;
    font: 600 1.57rem/1 'arial', sans-serif;
 }
 .page.index .modal-content .info-wrapp,
 .page.index_buddy .modal-content .info-wrapp {
    margin-bottom: 1.5rem;
    font: 400 0.9rem/1.5 sans-serif;
    text-align: center;
 }
 .page.index .modal-content .info-wrapp .sns-wrapp,
 .page.index_buddy .modal-content .info-wrapp .sns-wrapp {
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    margin-bottom: 1rem;
 }
 .page.index .modal-content .info-wrapp .status-wrapp ul,
 .page.index_buddy .modal-content .info-wrapp .status-wrapp ul {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: start;
            align-items: flex-start;
 }
 .page.index .modal-content .info-wrapp .status-wrapp ul li,
 .page.index_buddy .modal-content .info-wrapp .status-wrapp ul li {
    width: 100%;
    text-align: center;
    margin-right: 0rem;
 }
 /*** added by Cozy > ***/
 .page.index_buddy .modal-content .info-wrapp .status-wrapp li.status-wrapp-recom,
 .page.index_buddy .modal-content .info-wrapp .status-wrapp li.status-wrapp-genre {
    width: 100%;
 }
 /*** < ***/
 .page.index .modal-content .info-wrapp a.fb, .page.index .modal-content .info-wrapp a.twitter, .page.index .modal-content .info-wrapp a.insta,
.page.index_buddy .modal-content .info-wrapp a.fb, .page.index_buddy .modal-content .info-wrapp a.twitter, .page.index_buddy .modal-content .info-wrapp a.insta {
    display: block;
    height: auto;
    margin-right: 1.5rem;
  }
.page.index .modal-content .info-wrapp a.fb img, .page.index .modal-content .info-wrapp a.twitter img, .page.index .modal-content .info-wrapp a.insta img,
.page.index_buddy .modal-content .info-wrapp a.fb img, .page.index_buddy .modal-content .info-wrapp a.twitter img, .page.index_buddy .modal-content .info-wrapp a.insta img {
    width: 100%;
    height: auto;
  }
.page.index .modal-content .info-wrapp .fb {
    width: 8px;
  }
.page.index .modal-content .info-wrapp .twitter {
    width: 17px;
  }
.page.index .modal-content .info-wrapp .insta {
    width: 14px;
    margin-right: 0 !important;
  }
.page.index .modal-content .text-wrapp,
.page.index_buddy .modal-content .text-wrapp {
    margin-bottom: 1.5rem;
  }
.page.index .modal-content .text-wrapp h3,
.page.index_buddy .modal-content .text-wrapp h3 {
    margin-bottom: 0.5rem;
    color: #ca3625;
    font: 500 1.4rem/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
.page.index .modal-content .text-wrapp p,
.page.index_buddy .modal-content .text-wrapp p {
    color: #333333;
    font: 400 0.9375rem/1.7 "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
.page.index .modal-content .column-wrapp,
.page.index_buddy .modal-content .column-wrapp {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    margin-bottom: 1rem;
  }
.page.index .modal-content .column-wrapp figure,
.page.index_buddy .modal-content .column-wrapp figure {
    margin-bottom: 0.5rem;
    padding: 0.625rem;
    max-width: 100%;
    background-color: #fff;
  }
.page.index .modal-content .column-wrapp figure img,
.page.index_buddy .modal-content .column-wrapp figure img {
    width: 100%;
    height: auto;
  }
.page.index .modal-content .column-wrapp p,
.page.index_buddy .modal-content .column-wrapp p {
    margin-bottom: 1.5rem;
    color: #333333;
    font: 400 0.9rem/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
.page.index .modal-content .modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1rem;
    width: 30px;
    height: auto;
  }
.page.index .modal-content .btn-primary,
.page.index_buddy .modal-content .btn-primary {
    margin-bottom: 1rem;
    padding: 0.75rem 1.5rem 0.5rem;
    font-size: 1.05rem;
    height: 40px;
  }
}

.page.index .index-tours {
  border: 1px solid #fff;
  padding-bottom: 6.0rem;
}

.page.index .index-tours .card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
  max-width: 1020px;
  margin-bottom: 3rem;
  padding: 0;
  background-color: #f0f0f0;
}

.page.index .index-tours .card figure {
  max-width: 630px;
  height: auto;
}

.page.index .index-tours .card figure img {
  width: 100%;
  height: auto;
}

.page.index .index-tours .card .text-wrapp {
  width: 390px;
  text-align: center;
}

.page.index .index-tours .card .text-wrapp h3 {
  margin-bottom: 2rem;
  color: #ca3625;
  font: 600 1.4rem/1.5 sans-serif;
}

.page.index .index-tours .card .text-wrapp .btn-primary {
  height: 48px;
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

@media screen and (max-width: 768px) {
  .page.index {
    /* index tours */
  }
  .page.index .index-tours {
    border: 1px solid #fff;
  }
  .page.index .index-tours .container {
    padding: 0 0.9375rem;
  }
  .page.index .index-tours .card {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    margin: 0 auto 2rem;
    padding: 0 0 1rem;
    background-color: #f0f0f0;
  }
  .page.index .index-tours .card:last-child {
    margin-bottom: 0;
  }
  .page.index .index-tours .card figure {
    margin-bottom: 1.25rem;
  }
  .page.index .index-tours .card .text-wrapp h3 {
    margin-bottom: 0.75rem;
    font: 600 1.25rem/1.3 sans-serif;
  }
  .page.index .index-tours .card .text-wrapp .btn-primary {
    height: 42px;
    padding: 0.75rem 2rem 0.5rem;
    font-size: 1.05rem;
  }
}

.page.index .index-intro-buddy {
  padding-bottom: 8rem;
}

.page.index .index-intro-buddy .card-wrapp {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
          align-items: flex-start;
}

.page.index .index-intro-buddy .card {
  max-width: 320px;
  margin-bottom: 2rem;
  padding: 0;
  background-color: fff;
}

.page.index .index-intro-buddy .card figure {
  max-width: 320px;
  height: auto;
  margin-bottom: 1rem;
}

.page.index .index-intro-buddy .card figure img {
  width: 100%;
  height: auto;
}

.page.index .index-intro-buddy .card .text-wrapp {
  font: 400 0.9375rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align: center;
}

.page.index .index-intro-buddy .card .text-wrapp span.name {
  display: block;
  margin-bottom: 0.5rem;
  font: 600 1.5rem/1.0 'arial', sans-serif;
}

@media screen and (max-width: 768px) {
  .page.index {
    /* index intro buddy */
  }
  .page.index .index-intro-buddy {
    padding-bottom: 3.75rem;
  }
  .page.index .index-intro-buddy .card-wrapp {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
            align-items: flex-start;
    padding: 0 0.9375rem;
  }
  .page.index .index-intro-buddy .card {
    max-width: 160px;
    margin-bottom: 1.25rem;
    padding: 0;
    background-color: fff;
  }
  .page.index .index-intro-buddy .card figure {
    max-width: 160px;
    height: auto;
    margin-bottom: 0.5rem;
  }
  .page.index .index-intro-buddy .card figure img {
    width: 100%;
    height: auto;
  }
  .page.index .index-intro-buddy .card .text-wrapp {
    font: 400 0.75rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align: center;
  }
  .page.index .index-intro-buddy .card .text-wrapp span.name {
    margin-bottom: 0.35rem;
    font: 600 0.9375rem/1.0 'arial', sans-serif;
  }
}

/*--------------------------
 Footer
----------------------------*/
footer.footer {
  background-color: #ececec;
}

footer.footer .container {
  display: -webkit-box;
  display: flex;
  /*-webkit-box-pack: justify;
          justify-content: space-between;*/
 -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            /*flex-direction: column-reverse;*/
    -webkit-box-pack: center;
            justify-content: center;
  -webkit-box-align: start;
          align-items: flex-start;
  padding: 2rem 0 2.5rem;
  background-color: #ececec;
}

footer.footer .container .footer-logo {
  display: -webkit-box;
  display: flex;
   -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
 /*-webkit-box-pack: start;
          justify-content: flex-start;*/
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 2.5rem;
  /*padding-right: 1rem;*/
}

footer.footer .container .footer-logo figure {
  width: 120px;
  height: auto;
  /*margin: 0 1.5rem 0 0;*/
  margin: 0 0 1.0rem 0;
}

footer.footer .container .footer-logo figure img {
  width: 100%;
  height: auto;
}

footer.footer .container .footer-logo p {
  font-size: 0.8125rem;
  text-align: center;
}

footer.footer .container .footer-logo p strong {
  display: block;
  margin-bottom: 0.75rem;
  color: #ca3625;
  font-size: 1.3125rem;
  text-align: center;
}

footer.footer .container .footer-info {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
          align-items: flex-end;
}

footer.footer .container .footer-info .credit {
  font-size: 0.6875rem;
}

footer.footer .container .footer-info .icon-sns-wrapp {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
}

footer.footer .container .footer-info a.mail, footer.footer .container .footer-info a.fb, footer.footer .container .footer-info a.twitter, footer.footer .container .footer-info a.insta {
  display: block;
  height: auto;
  margin-right: 2rem;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

footer.footer .container .footer-info a.mail img, footer.footer .container .footer-info a.fb img, footer.footer .container .footer-info a.twitter img, footer.footer .container .footer-info a.insta img {
  width: 100%;
  height: auto;
}

footer.footer .container .footer-info a.mail:hover, footer.footer .container .footer-info a.fb:hover, footer.footer .container .footer-info a.twitter:hover, footer.footer .container .footer-info a.insta:hover {
  opacity: 0.7;
}

footer.footer .container .footer-info .mail {
  width: 25px;
}

footer.footer .container .footer-info .fb {
  width: 15px;
}

footer.footer .container .footer-info .twitter {
  width: 31px;
}

footer.footer .container .footer-info .insta {
  width: 25px;
}

footer.footer .container .footer-bnn-wrapp {
  max-width: 440px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
          align-items: center;
}

footer.footer .container .footer-bnn-wrapp a {
  display: block;
  max-width: 48.5%;
  margin-bottom: 3%;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

footer.footer .container .footer-bnn-wrapp a:hover {
  opacity: 0.7;
}

footer.footer .container .footer-bnn-wrapp a img {
  width: 100%;
  height: auto;
}

footer.footer .container .footer-bnn-wrapp a:nth-child(2n-1) {
  margin-right: 3%;
}

@media screen and (max-width: 768px) {
  footer.footer .container {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: start;
            align-items: flex-start;
    padding: 2rem 0.875rem 1rem;
    background-color: #ececec;
  }
  footer.footer .container > div {
    width: 100%;
  }
  footer.footer .container .footer-logo {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    margin-bottom: 2rem;
  }
  footer.footer .container .footer-logo figure {
    width: 120px;
    height: auto;
    margin: 0 0 1.25rem 0;
  }
  footer.footer .container .footer-logo figure img {
    width: 100%;
    height: auto;
  }
  footer.footer .container .footer-logo p {
    font-size: 0.72rem;
    text-align: center;
  }
  footer.footer .container .footer-logo p strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #ca3625;
    font-size: 1.125rem;
    line-height: 1.65;
    text-align: center;
  }
  footer.footer .container .footer-info {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
  }
  footer.footer .container .footer-info .credit {
    font-size: 0.6rem;
  }
  footer.footer .container .footer-info .icon-sns-wrapp {
    margin-bottom: 1.5rem;
  }
  footer.footer .container .footer-info a.mail, footer.footer .container .footer-info a.fb, footer.footer .container .footer-info a.twitter, footer.footer .container .footer-info a.insta {
    margin-right: 2rem;
  }
  footer.footer .container .footer-info .mail {
    width: 19px;
  }
  footer.footer .container .footer-info .fb {
    width: 11px;
  }
  footer.footer .container .footer-info .twitter {
    width: 23px;
  }
  footer.footer .container .footer-info .insta {
    width: 19px;
    margin-right: 0rem !important;
  }
  footer.footer .container .footer-bnn-wrapp {
    max-width: 100%;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
            align-items: center;
    margin: 0 auto 2rem;
  }
  footer.footer .container .footer-bnn-wrapp a {
    display: block;
    max-width: 48.5%;
    margin-bottom: 3%;
  }
  footer.footer .container .footer-bnn-wrapp a img {
    width: 100%;
    height: auto;
  }
  footer.footer .container .footer-bnn-wrapp a:nth-child(2n-1) {
    margin-right: 3%;
  }
}

/*--------------------------
 Page - tour
----------------------------*/
.page.tour {
  padding-top: 5rem;
  /* tour åé¡å¼µ shop */
}

.page.tour .container {
  max-width: 1020px;
  padding: 0 0 0 0rem;
}

.page.tour article {
  padding: 0;
  margin-bottom: 5rem;
}

.page.tour article .container figure img {
  margin-bottom: 2.5rem;
  width: 100%;
  height: auto;
}

.page.tour article .container p {
  max-width: 650px;
  margin: 0 0 3rem 0;
  color: #333;
  font: 400 1.2rem/2.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.tour .hero-wrapp img {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}

.page.tour .hero-wrapp img + p {
  margin-bottom: 5rem;
  font: 400 1.2rem/1.9 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.tour div.contents-table {
  max-width: 700px;
  padding: 2rem 2.5rem 2rem;
  margin: 0 auto 5rem;
  background-color: #f0f0f0;
  border-radius: 16px;
  text-align: center;
}

.page.tour div.contents-table ul li {
  font: 500 1.5rem/1.9 sans-serif;
  text-align: left;
}

.page.tour div.contents-table ul li a {
  color: #333;
}

.page.tour div.contents-table ul li a:hover {
  color: #ca3625;
}

.page.tour div.contents-table strong {
  display: block;
  margin-bottom: 1.5rem;
  color: #ca3625;
  font: 600 1.825rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.tour div.contents-table .num01::before, .page.tour div.contents-table .num02::before, .page.tour div.contents-table .num03::before, .page.tour div.contents-table .num04::before,
.page.tour div.contents-table .num05::before, .page.tour div.contents-table .num06::before, .page.tour div.contents-table .num07::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 0.75rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: -6px;
}

.page.tour div.contents-table .num01::before {
  background-image: url("/img2/en/icon-num01.png");
}

.page.tour div.contents-table .num02::before {
  background-image: url("/img2/en/icon-num02.png");
}

.page.tour div.contents-table .num03::before {
  background-image: url("/img2/en/icon-num03.png");
}

.page.tour div.contents-table .num04::before {
  background-image: url("/img2/en/icon-num04.png");
}

.page.tour div.contents-table .num05::before {
  background-image: url("/img2/en/icon-num05.png");
}

.page.tour div.contents-table .num06::before {
  background-image: url("/img2/en/icon-num06.png");
}

.page.tour div.contents-table .num07::before {
  background-image: url("/img2/en/icon-num07.png");
}

.page.tour div.text-wrapp {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
          align-items: flex-start;
}

.page.tour div.text-wrapp div.img-wrapp {
  max-width: 300px;
}

.page.tour div.text-wrapp div.img-wrapp .fukidashi {
  position: relative;
  display: block;
  padding: 1rem;
  margin-bottom: 1.5rem;
  color: #fff;
  font: 500 normal 1.375rem/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
  background-color: #ca3625;
  border-radius: 16px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.page.tour div.text-wrapp div.img-wrapp .fukidashi:hover {
  opacity: 0.7;
}

.page.tour div.text-wrapp div.img-wrapp .fukidashi::after {
  position: absolute;
  bottom: -16px;
  right: calc(50% - 18px);
  content: '';
  display: block;
  width: 35px;
  height: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-fukidashi.png");
  vertical-align: -2px;
}

.page.tour div.text-wrapp div.img-wrapp .fukidashi span::after {
  content: '';
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-left: 0.3rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-arrow.png");
  vertical-align: -2px;
}

.page.tour div.text-wrapp div.img-wrapp img {
  width: 100%;
  height: auto;
  margin-bottom: 1.0rem;
}

.page.tour h3.icon-walk {
  position: relative;
  margin-bottom: 1.5rem;
  color: #ca3625;
  font-size: 1.625rem;
  line-height: 1.0;
  font-weight: 500;
}

.page.tour h3.icon-walk::before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 40px;
  margin-right: 0.75rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-walk.jpg");
  vertical-align: -2px;
}

.page.tour h3.icon-num {
  position: relative;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  line-height: 1.3;
  font-weight: 500;
}

.page.tour h3.icon-num::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 0.75rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: -2px;
  }

.page.tour h3.icon-num.num01::before {
 background-image: url("/img2/en/icon-num01.png");
 }

.page.tour h3.icon-num.num02::before {
  background-image: url("/img2/en/icon-num02.png");
}

.page.tour h3.icon-num.num03::before {
  background-image: url("/img2/en/icon-num03.png");
}

.page.tour h3.icon-num.num04::before {
  background-image: url("/img2/en/icon-num04.png");
}

.page.tour h3.icon-num.num05::before {
  background-image: url("/img2/en/icon-num05.png");
}

.page.tour h3.icon-num.num06::before {
  background-image: url("/img2/en/icon-num06.png");
}

.page.tour h3.icon-num.num07::before {
  background-image: url("/img2/en/icon-num07.png");
}

.page.tour .column-wrapp {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
          align-items: flex-start;
  margin-bottom: 9.375rem;
}

.page.tour .column-wrapp a {
  display: block;
  max-width: 470px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.page.tour .column-wrapp a:hover {
  opacity: 0.7;
}

.page.tour .column-wrapp a img {
  margin-bottom: 0.9rem;
  width: 100%;
  height: auto;
}

.page.tour .column-wrapp a p {
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.8;
}

.page.tour .column-wrapp div {
  max-width: 470px;
}

.page.tour.shop article figure {
  margin-bottom: 0rem;
}

.page.tour.shop article p {
  max-width: 100%;
  margin-top: 0;
}

.page.tour.shop .column-wrapp {
  margin-bottom: 0rem !important;
}

.page.tour.shop .column-wrapp img {
  margin-bottom: 1.75rem;
}

.page.tour .shop-info-wrapp {
  margin-bottom: 7.5rem;
}

.page.tour .shop-info-wrapp .container {
  border: 1px solid #ebebeb;
}

.page.tour .shop-info-wrapp h4 {
  padding: 1rem 1.5rem;
  font: 600 1.5rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color: #f0f0f0;
}

.page.tour .shop-info-wrapp dl {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
          align-items: flex-start;
  padding: 1.75rem 1.75rem 0.75rem;
}

.page.tour .shop-info-wrapp dl dt {
  display: block;
  /*width: 9%;*/
  margin-bottom: 1rem;
  color: #333;
  font: 500 1.125rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.tour .shop-info-wrapp dl dd {
  display: block;
  width: 91%;
  margin-bottom: 1rem;
  color: #333;
  font: 400 1.125rem/1.0 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.page.tour .shop-info-wrapp .icon-map {
  display: inline-block;
  width: 103px;
  height: 21px;
  margin-left: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-map.png");
  vertical-align: -4px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.page.tour .shop-info-wrapp .icon-map:hover {
  opacity: 0.7;
}

.page.tour .btn-primary.add-icon::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("/img2/en/icon-blank-hover.png");
  vertical-align: -2px;
}

.page.tour .btn-primary.add-icon:hover::after {
  background-image: url("/img2/en/icon-blank.png");
}

@media screen and (max-width: 768px) {
  .page.tour {
    padding: 4rem 0.9375rem 0;
    /* tour shop */
  }
  .page.tour h2.h2 {
    font: 500 normal 1.5rem/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
      }
  .page.tour h2.h2::after {
    width: 57px;
    height: 4px;
    margin: 0.75rem auto 1.75rem;
  }
  .page.tour .container {
    max-width: 1020px;
    padding: 0 0 0 0rem;
  }
  .page.tour article {
    padding: 0;
    margin-bottom: 3.75rem;
  }
  .page.tour article .container figure img {
    margin-bottom: 2.5rem;
    width: 100%;
    height: auto;
  }
  .page.tour article .container p {
    max-width: 630px;
    margin: 0 0 2.5rem 0;
    color: #333;
    font: 400 0.9375rem/1.75 sans-serif;
  }
  .page.tour .hero-wrapp img {
    width: 100%;
    height: auto;
    margin-bottom: 2.25rem;
  }
  .page.tour .hero-wrapp img + p {
    margin-bottom: 1.5rem;
    font: 400 0.9375rem/1.75 sans-serif;
  }
  .page.tour div.contents-table {
    padding: 1.5rem 1rem 2rem;
    margin: 0 auto 2.25rem;
    border-radius: 14px;
  }
  .page.tour div.contents-table ul li {
    font: 500 0.9375rem/1.9 sans-serif;
  }
  .page.tour div.contents-table strong {
    margin-bottom: 1.25rem;
    font: 500 1.25rem/1.0 sans-serif;
  }
  .page.tour div.contents-table .num01::before, .page.tour div.contents-table .num02::before, .page.tour div.contents-table .num03::before, .page.tour div.contents-table .num04::before,
  .page.tour div.contents-table .num05::before, .page.tour div.contents-table .num06::before, .page.tour div.contents-table .num07::before {
    width: 17px;
    height: 17px;
    margin-right: 0.5rem;
    vertical-align: -4px;
  }
  .page.tour div.text-wrapp {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
  .page.tour div.text-wrapp div.img-wrapp {
    padding-top: 1rem;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .page.tour div.text-wrapp div.img-wrapp div {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
            align-items: flex-start;
  }
  .page.tour div.text-wrapp div.img-wrapp .fukidashi {
    max-width: 285px;
    padding: 0.75rem;
    margin: 0 auto 2rem;
    font: 500 normal 1.25rem/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;
      }
  .page.tour div.text-wrapp div.img-wrapp img {
    width: 48%;
    height: auto;
  }
  .page.tour h3.icon-walk {
    position: relative;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.0;
    font-weight: 600;
  }
  .page.tour h3.icon-walk::before {
    width: 12px;
    height: 20px;
    margin-right: 0.5rem;
    vertical-align: -2px;
  }
  .page.tour h3.icon-num {
    position: relative;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
  }
  .page.tour h3.icon-num::before {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    vertical-align: -2px;
  }
  .page.tour .column-wrapp {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
            align-items: flex-start;
    margin-bottom: 3.75rem;
  }
  .page.tour .column-wrapp a {
    display: block;
    max-width: 48%;
  }
  .page.tour .column-wrapp a img {
    margin-bottom: 0.5rem;
    width: 100%;
    height: auto;
  }
  .page.tour .column-wrapp a p {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .page.tour .column-wrapp div {
    max-width: 470px;
  }
  .page.tour .column-wrapp.ex {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
            align-items: flex-start;
  }
  .page.tour .column-wrapp.ex div {
    max-width: 470px;
    margin: 0 auto 0;
  }
  .page.tour .column-wrapp.ex div img {
    margin-bottom: 1rem;
    width: 100%;
    height: auto;
  }
  .page.tour .column-wrapp.ex div p {
    font: 400 0.9375rem/1.75 sans-serif;
  }
  .page.tour.shop article p {
    max-width: 100%;
  }
  .page.tour.shop .column-wrapp {
    margin-bottom: 0rem !important;
  }
  .page.tour .shop-info-wrapp {
    margin-bottom: 3.5rem;
  }
  .page.tour .shop-info-wrapp .container {
    border: 1px solid #ebebeb;
  }
  .page.tour .shop-info-wrapp h4 {
    padding: 0.625rem 0.9375rem;
    font: 600 0.9375rem/1.0 sans-serif;
    background-color: #f0f0f0;
  }
  .page.tour .shop-info-wrapp dl {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
            align-items: flex-start;
    padding: 1.25rem 0.9375rem 0.5rem;
  }
  .page.tour .shop-info-wrapp dl dt {
    display: block;
    width: 22%;
    margin-bottom: 0.5rem;
    color: #333;
    font: 600 0.8125rem/1.25 sans-serif;
  }
  .page.tour .shop-info-wrapp dl dd {
    display: block;
    width: 78%;
    margin-bottom: 0.5rem;
    color: #333;
    font: 400 0.8125rem/1.25 sans-serif;
  }
  .page.tour .shop-info-wrapp .icon-map {
    display: inline-block;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    width: 11px;
    height: 14px;
    background-image: url("/img2/en/icon-map-sp.png");
    vertical-align: -2px;
  }
  .page.tour .btn-primary.add-icon {
    padding: 1rem 2rem 1.25rem;
    height: 60px;
    border-radius: 30px;
    font: 500 1.25rem/1.0 sans-serif;
  }
  .page.tour .btn-primary.add-icon::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 0.5rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/img2/en/icon-blank-hover.png");
    vertical-align: -2px;
  }
  .page.tour .btn-primary.add-icon:hover::after {
    background-image: url("/img2/en/icon-blank.png");
  }
}

/*--------------------------
 PageTop
----------------------------*/
.icon-scroll-wrapp {
  position: fixed;
  right: 1rem;
  bottom: 2rem;
  width: 54px;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.icon-scroll-wrapp img {
  width: 100%;
  height: auto;
}

.icon-scroll-wrapp.active {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .icon-scroll-wrapp {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    width: 38px;
    height: auto;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
  }
  .icon-scroll-wrapp.active {
    opacity: 1;
  }
}

/*--------------------------
 Youtube
----------------------------*/
.movie {
    text-align: center;
    margin-bottom: 3.5rem;        
}
.movie-buddy-single {
    text-align: center;
    margin-bottom: 2rem;        
}
.movie .movie-title, .movie-buddy-single .movie-title {
    color: #ca3625;
    font-size: 1.625rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
.movie .movie-title {
    font-size: 1.0rem;
}
.movie-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie-box iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}

/*--------------------------
 SNS Icon
 ----------------------------*/
.sns-wrapp .fab {
  display: block;
  height: auto;
  margin-right: 1.875rem;
  color: #cccccc;
}
  .sns-wrapp .fas {
  display: block;
  height: auto;
  margin-right: 0;
  color: #cccccc;    
}
.sns-wrapp a .fab, .sns-wrapp a .fas {
  color: #111111 !important;
} 
.sns-wrapp a:hover .fab, .sns-wrapp a:hover .fas {
 color: #ca3625 !important;
}

@media screen and (max-width: 768px) {
.sp-none {
 display: none;
}
}
/*--------------------------
 shop-info
 ----------------------------*/
.gmap a {
 color: #ca3625 !important;
 margin-left: 1.0rem;
 font-size: 1rem;
}
.gmap a:hover {
 color: #999999 !important;
}
.page.tour .shop-info-wrapp dl dt {
    width: 2.5rem;
    text-align: center;
    margin-right: 0.5rem;
}
@media screen and (max-width: 768px) {
.page.tour div.contents-table {
 padding: 1.5rem 0.5rem 2rem 1.0rem;
}
.page.tour .shop-info-wrapp dl {
padding: 1.25rem 0.4rem 0.5rem;
}
.gmap a {
font-size: 0.9rem;
}
}
/*--------------------------
 Buddy-sigle / Tag
 ----------------------------*/
.tag-wrapp {
     overflow: hidden;
  }

.tag-wrapp ul.tag-wrapp-list  {
       text-align: center;
      display: inline;
      margin: 0 auto;
}
.tag-wrapp ul.tag-wrapp-list li {
    margin: 0 0.3rem 0.5rem 0;
    display: inline-block;
  }
.tag-wrapp ul.tag-wrapp-list  li:last-child {
    margin-right: 0;
}
.tag-wrapp ul.tag-wrapp-list  li a {
  background-color: #f4d7d3;
  padding: 5px 10px; 
  color: #111111;
  text-decoration: underline;
  font: 400 0.925rem/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  display: block;
}
.tag-wrapp ul.tag-wrapp-list  li a:hover {
 color: #ca3625;
   text-decoration: none;
}
/*--------------------------
 Buddy List / Tag
 ----------------------------*/
.page .option {
    width: 70%;
     text-align: center;
     margin: 0 auto;
     overflow: hidden;
  }
.page .option-buddy-single {
     width: 70%;
     text-align: center;
     margin: 6rem auto;
     overflow: hidden;
}

.page .option ul.tag-wrapp-list,
.page .option-buddy-single ul.tag-wrapp-list  {
       text-align: center;
      display: inline;
      margin: 0 auto;
}
.page .option ul.tag-wrapp-list li,
.page .option-buddy-single ul.tag-wrapp-list li {
    margin: 0 0.3rem 0.5rem 0;
    display: inline-block;
  }
.page .option ul.tag-wrapp-list  li:last-child,
.page .option-buddy-single ul.tag-wrapp-list  li:last-child {
    margin-right: 0;
}
.page .option ul.tag-wrapp-list  li a,
.page .option-buddy-single ul.tag-wrapp-list  li a {
  background-color: #f4d7d3;
  padding: 5px 10px; 
  color: #111111;
  text-decoration: underline;
  font: 400 0.925rem/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  display: block;
}
.page .option ul.tag-wrapp-list  li a:hover,
.page .option-buddy-single ul.tag-wrapp-list  li a:hover {
 color: #ca3625;
   text-decoration: none;
}
.clear {clear: both; margin-bottom: 1.5rem;}
.option p, .option-buddy-single p {
font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
.page .option-buddy-single {
     width: 100%;
     text-align: center;
     margin: 3rem auto;
     overflow: hidden;
}
}

/*--------------------------
 Search
----------------------------*/
.search {
width: 90%;
text-align: center;
margin: 0 auto;
display: block;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 2px solid #666;
  display: block;
  padding: 3px 20px;
  border-radius: 44px;
  height: 3.4em;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
  font-size: 1.0rem;
    margin-top: 0.5rem;
    width: 100%;
    text-align: left;
}
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 2.0em;
  border: none;
  background: none;
  color: #666;
  position: absolute;
  width: 2.0em;
  height: 1.5em;
  right: 0;
  top: 0;
  outline : none;
}
.sp-none {
 display: block;
}
.pc-none {
 display: none;
}
@media screen and (max-width: 768px) {
.page .option {
width: 100%;
}
.search {
 width: 90%;
 }
 .search_container{
  padding: 3px 10px;
}
 .search_container input[type="submit"] {
     right: 1rem;
  }
 .search_container input[type="text"] {
    margin-top: 0.2rem;
    width: 90%;
 }
.sp-none {
 display: none;
}
.pc-none {
 display: block;
}
}

/* by Cozy */
.card-body-sub {
 margin: auto;
 width: 80%;
 /* font: 400 0.9375rem/1.7 "Helvetica Neue",Helvetica,Arial,sans-serif; */
 font: 400 90% "Helvetica Neue",Helvetica,Arial,sans-serif;
 padding-bottom: 12px;
}

.btn-wrapp a.btn-primary-sub {
  display: inline-block;
  height: 26px;
  margin: 0 auto 0;
  padding: 0.325rem 1.75rem;
  font: 800 normal 1.1125rem/1.0 sans-serif;
  color: #fff;
  background-color: #ca3625;
  border-radius: 30px;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
  box-sizing: border-box;
}
.btn-wrapp a.btn-primary-sub:hover {
  color: #ca3625;
  background-color: #fff;
  border: 1px solid #ca3625;
  border-radius: 30px;
}

@media screen and (max-width: 768px) {
 .btn-wrapp a.btn-primary-sub {
  padding: 0.325rem 1.25rem;
  font: 700 normal 0.9125rem/1.2 sans-serif;
 }
 .card-body-sub {
  font: 400 80% "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
}
/*** added by Cozy for 2 movies ***/
.mbs-wrap{
  margin-bottom: 1.5rem;
}
.mbs-youtube {
  position: relative;
  height: 0;
  margin-bottom: 20px;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.mbs-youtube iframe {
  position: absolute;
  top: 0;
	left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .mbs-float-right{
    float: right;
    width: 46.5%;
  }
  .mbs-float-left{
    float:left;
    width: 46.5%;
  }
  .mbs-wrap:after{
    display: block;
    clear: both;
    content: "";
  }
}