/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon-2020-12-11.eot?jc5jwe');
    src: url('../fonts/icomoon-2020-12-11.eot?jc5jwe#iefix') format('embedded-opentype'),
    url('../fonts/icomoon-2020-12-11.ttf?jc5jwe') format('truetype'),
    url('../fonts/icomoon-2020-12-11.woff?jc5jwe') format('woff'),
    url('../fonts/icomoon-2020-12-11.svg?jc5jwe#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.topSlider-wrapper .swiper-container-horizontal > .swiper-pagination-bullets
{
    height: 20px !important;
}


.icon-category:before {
    content: "\e92b";
  }
  .icon-uniE900:before {
    content: "\e900";
  }
  .icon-world:before {
    content: "\e901";
  }
  .icon-bell:before {
    content: "\e902";
  }
  .icon-report:before {
    content: "\e903";
  }
  .icon-notebook:before {
    content: "\e904";
  }
  .icon-house:before {
    content: "\e905";
  }
  .icon-book:before {
    content: "\e906";
  }
  .icon-pen:before {
    content: "\e907";
  }
  .icon-schema:before {
    content: "\e908";
  }
  .icon-relation:before {
    content: "\e909";
  }
  .icon-bag:before {
    content: "\e90a";
  }
  .icon-message:before {
    content: "\e90b";
  }
  .icon-heart:before {
    content: "\e90c";
  }
  .icon-reload:before {
    content: "\e90d";
  }
  .icon-time:before {
    content: "\e90e";
  }
  .icon-home:before {
    content: "\e90f";
  }
  .icon-camera:before {
    content: "\e910";
  }
  .icon-company:before {
    content: "\e911";
  }
  .icon-contact:before {
    content: "\e912";
  }
  .icon-door:before {
    content: "\e913";
  }
  .icon-map:before {
    content: "\e914";
  }
  .icon-review:before {
    content: "\e915";
  }
  .icon-tick:before {
    content: "\e916";
  }
  .icon-bus:before {
    content: "\e917";
  }
  .icon-black-message:before {
    content: "\e918";
  }
  .icon-flag-map:before {
    content: "\e919";
  }
  .icon-thick-s:before {
    content: "\e91a";
  }
  .icon-troad:before {
    content: "\e91b";
  }
  .icon-send-mail:before {
    content: "\e91c";
  }
  .icon-c-woman:before {
    content: "\e91d";
  }
  .icon-c-men:before {
    content: "\e91e";
  }
  .icon-mouse:before {
    content: "\e91f";
  }
  .icon-uniE91F:before {
    content: "\e920";
  }
  .icon-uniE920:before {
    content: "\e921";
  }
  .icon-uniE921:before {
    content: "\e922";
  }
  .icon-uniE922:before {
    content: "\e923";
  }
  .icon-uniE923:before {
    content: "\e924";
  }
  .icon-uniE924:before {
    content: "\e925";
  }
  .icon-stars:before {
    content: "\e926";
  }
  .icon-new:before {
    content: "\e927";
  }
  .icon-cat:before {
    content: "\e928";
  }
  .icon-girlsreport:before {
    content: "\e929";
  }
  .icon-recommend:before {
    content: "\e92a";
  }



html {
    color: #000;
    line-height: 1.4;
    height: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
    font-size: 14px;
    background: #fff;
    line-height: 1.7;
    font-weight: 500;
    padding: 0;
    margin: 0;
}

a {
    outline: 0;
}

.header-wrapper a,
.header-wrapper a {
    display: inline-block;
}

a:hover {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    text-decoration: none;
}

p {
    margin: 0 0 10px 0;
}

ul {
    margin: 0;
    padding: 0;
}

video {
    width: 100% !important;
    height: auto !important;
}

h1,
h2,
h3,
h4 {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Std", "ヒラギノ角ゴ Std W8", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
    font-weight: 500;
}

h2 {
    color: #000;
    font-size: 24px;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    padding: 0;
    text-transform: uppercase;
    line-height: 1.1;
}

/*h2.h2 {
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
    width: auto;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 900;
}*/
p.jpn {
    position: relative;
    width: 100%;
    display: inline-block;
    color: #000;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 10px auto 40px auto;
    text-transform: uppercase;
    line-height: 24px;
    font-weight: 900;
    text-align:center;
}

hr.jpn_hr{
    border-top:2px solid #000;
}

p.eng {
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
    width: auto;
    display: inline-block;
    color: #000;
    font-size: 24px;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    line-height: 24px;
    margin-bottom: 0;
    font-weight: 900;
}

p.eng:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    top: 0;
    width: 80px;
    background: url('../img/icons/arrow-left.png') no-repeat left center;
}

p.eng::after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    top: 0;
    width: 80px;
    background: url('../img/icons/arrow-right.png') no-repeat right center;
}

.headline {
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 4px;
    margin-bottom: 50px;
}

.category-desc {
    max-width: 464px;
    margin: 0 auto;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 45px;
}

.headline + .category-deesc {
    margin-top: 45px;
    margin-bottom: 60px;
}

.headline h1, .headline h2, .headline h3, .headline h1.top-h1 {
    margin: 0;
    line-height: 36px;
    font-size: 14px;
    font-weight: 500;
}

.headline h3{
    letter-spacing:1px;
    color: #000;
}

.headline::after {
    position: absolute;
    width: 70px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    height: 4px;
    content: "";
}

.text-pink {
    color: #cc8b86;
}

.headline.c-pink::after {
    background-color: #cc8b86;
}

.headline.c-pink p.eng span {
    color: #cc8b86;
}

.headline.c-data::after {
    background-color: #e7a516;
}

.headline.c-data p.eng span {
    color: #e7a516;
}

.headline.c-rooms::after {
    background-color: #00a0e9;
}

.headline.c-rooms p.eng span {
    color: #00a0e9;
}

.headline.c-pink {
    margin-bottom: 0px;
}

.headline.c-yellow::after {
    background-color: #dcac00;
}

.headline.c-yellow p.eng span {
    color: #dcac00;
}

.headline.c-red::after {
    background-color: #e60033;
}

.headline.c-red p.eng span, p.jpn span {
    color: #e60033;
}

.headline.c-recent::after {
    background-color: #005780;
}

.headline.c-recent p.eng span {
    color: #005780;
}

.headline.c-blue::after {
    background-color: #0b63a9;
}

.headline.c-blue p.eng span {
    color: #0b63a9;
}

.headline.c-accessblue::after {
    background-color: #0b7bad;
}

.headline.c-accessblue p.eng span {
    color: #0b7bad;
}

.headline.c-floor::after {
    background-color: #e4007f;
}

.headline.c-floor p.eng span {
    color: #e4007f;
}

.headline.c-also::after {
    background-color: #e5004f;
}

.headline.c-also p.eng span {
    color: #e5004f;
}

.headline.c-map::after {
    background-color: #ae5da1;
}

.headline.c-map p.eng span {
    color: #ae5da1;
}

.headline.c-sblue::after {
    background-color: #00a0e9;
}

.headline.c-sblue p.eng span {
    color: #00a0e9;
}

.headline.c-orange::after {
    background-color: #d84300;
}

.headline.c-orange p.eng span {
    color: #d84300;
}

.headline.c-purple::after {
    background-color: #e4007f;
}

.headline.c-purple p.eng span {
    color: #e4007f;
}

.headline.c-green::after {
    background-color: #abbb89;
}

.headline.c-green p.eng span {
    color: #9db174;
}

.headline.c-howto::after {
    background-color: #c8b570;
}

.headline.c-howto p.eng span {
    color: #c8b570;
}

.headline.c-houses::after {
    background-color: #b8b37a;
}

.headline.c-houses p.eng span {
    color: #b8b37a;
}

.headline.c-darkgreen::after {
    background-color: #0f6722;
}

.headline.c-darkgreen p.eng span {
    color: #0f6722;
}

.headline.c-cyan::after {
    background-color: #32b6bd;
}

.headline.c-cyan p.eng span {
    color: #32b6bd;
}

.headline.c-owner::after {
    background-color: #0eb1d2;
}

.headline.c-owner p.eng span {
    color: #0eb1d2;
}

.headline.c-gray::after {
    background-color: #9d9d9d;
}

.headline.c-gray p.eng span {
    color: #9d9d9d;
}

.headline.c-novel::after {
    background-color: #dcac00;
}

.headline.c-novel p.eng span {
    color: #dcac00;

}

.headline.c-exp::after {
    background-color: #0b63a9;
}

.headline.c-exp p.eng span {
    color: #0b63a9;
}

.headline.c-360::after {
    background-color: #ec680b;
}

.headline.c-360 p.eng span {
    color: #ec680b;
}

.headline.c-photos::after {
    background-color: #a29972;
}

.headline.c-photos p.eng span {
    color: #a29972;
}

.headline.c-result::after {
    background-color: #00a0e9;
}

.headline.c-result p.eng span {
    color: #00a0e9;
}

/* ==========================================================================
  HEADER
   ========================================================================== */

.header-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2001;
    will-change: transform;
    /*important fix*/
}

.fixedMenuGap {
    width: 100%;
    height: 92px;
    display: block;
}

.mainMenu-wrapper {
    height: 64px;
    width: 100%;
    z-index: 2000;
    display: block;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.mainMenu-inner {
    position: static;
}

.logoHolder {
    padding: 18px 16px 0 0;
    position: static;
    float: left;
}

.logoHolder a img {
    width: 170px;
    height: auto;
}

.logoHolder a {
    margin: 0;
    padding: 0;
}

.mainMenu {
    margin-top: 13px;
    display: inline-block;
    position: static;
    z-index: 999;
}

ul.footerNavigation{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.mainNavigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.mainNavigation > li {
    float: left;
    position: static;
    display: block;
}

ul.mainNavigation > li > a {
    padding: 10px 16px 18px 20px;
    font-size: 13px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
    position: relative;
}

ul.mainNavigation > li > a::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-top: 3px solid #222;
    width: 0%;
    content: "";
    -webkit-transition: width 0.3s;
    /* For Safari 3.1 to 6.0 */

    transition: width 0.3s;
}

ul.mainNavigation > li.active > a::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-top: 3px solid #222;
    width: 40%;
    content: "";
    -webkit-transition: width 0.6s;
    /* For Safari 3.1 to 6.0 */

    transition: width 0.6s;
}

ul.mainNavigation > li > a::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 8px solid #333333;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
}

ul.mainNavigation > li.active.has-dropdown > a::after {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.mainNavigation .dropdown {
    width: 100%;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 0;
    right: 0;
    background-color: #333333;
    bottom: -40px;
    height: 40px;
    z-index: 100;
    -webkit-transition: width 0.6s;
    /* For Safari 3.1 to 6.0 */

    transition: width 0.6s;
}

ul.mainNavigation .dropdown.show {
    visibility: visible;
    opacity: 1;
    -webkit-transition: width 0.6s;
    /* For Safari 3.1 to 6.0 */

    transition: width 0.6s;
}

ul.mainNavigation .sub-menu {
    max-width: 960px;
    width: 100%;
    list-style-type: none;
    margin: 0 auto;
    padding-top: 7px;
}

ul.mainNavigation .sub-menu > li {
    float: left;
    margin: 0 20px 0 20px;
}

ul.mainNavigation .sub-menu > li > a {
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 0px 2px 0px;
}

ul.mainNavigation .sub-menu > li > a:hover {
    border-bottom: 1px solid #fff;
}

.toolMenu {
    float: right;
}

.toolMenu-inner {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.toolMenu-inner > li {
    float: left;
}

.toolMenu-inner > li:last-child a {
    border-right: 1px solid #e8e8e8;
}

.toolMenu-inner > li > a {
    border-left: 1px solid #e8e8e8;
    background: #fff;
    padding: 0;
    line-height: 34px;
    display: block;
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    width: 90px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    color: #000;
    height: 63px;
}

.toolMenu-inner > li > a:hover {
    background-color: #efefef;
}

.toolMenu-inner > li > a .icon {
    display: block;
    color: #000;
    font-size: 22px;
}

.toolMenu-inner > li > a span.n-count {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #000;
    color: #fff;
    border-radius: 20px;
    width: 18px;
    height: 18px;
    font-size: 9px;
    text-align: center;
    line-height: 18px;
    overflow: hidden;
}

.smallMenu-wrapper {
    width: 100%;
    height: 28px;
    background-color: #000;
    z-index: 99;
    display: none;
}

.smallMenu-wrapper.view {
    display: block;
}

.smallMenu-inner {
    position: relative;
}

.smallLogo-holder {
    padding: 8px 0 0 0;
    display: inline-block;
}

.smallNavigation {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.smallNavigation ul {
    list-style-type: none;
}

.smallNavigation ul li {
    float: left;
    margin-left: 15px;
}

.smallNavigation ul li a {
    font-size: 11px;
    color: #fff;
    line-height: 20px;
    text-decoration: none;
    display: block;
    padding: 4px 10px;
}

.smallNavigation ul li a.menu-round {
    padding: 2px 30px 2px 30px;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #222;
}

.smallNavigation ul li a.menu-round:hover {
    border-color: #e60033;
}

.smallNavigation ul li a i.red-heart.fa {
    color: #e60033;
}

.smallNavigation ul li a span.number-like {
    color: #e60033;
    font-weight: bold;
    margin-left: 10px;
}

.smallNavigation ul li a.menu-black {
    background-color: #000;
    color: #fff;
    border-radius: 8px;
}

.smallNavigation ul li a.menu-regular {
    margin-left: 20px;
}

.mobileMenu-wrapper {
    display: none;
}

.overlay-sp,
.overlay-sp.is-active {
    display: none;
}

/* ====================================1======================================
   TOP
   ========================================================================== */

.sliderBox-1 {
    position: absolute;
    left: 50px;
    top: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #000;
    color: #000;
    padding: 30px;
}

.sliderBox-2 {
    position: absolute;
    left: 50px;
    top: 100px;
    width: 220px;
    background: url("../img/grunge.png") center center;
    background-size: cover;
    height: 220px;
    color: #000;
    border-radius: 150px;
    text-align: center;
    padding-top: 75px;
}

.s-box-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    width: 30px;
    height: auto;
    float: left;
}

.s-box-text {
    font-weight: 500;
    font-size: 13px;
    width: 20px;
    line-height: 1.4;
    height: auto;
    float: left;
}

.sliderBox-2 .s-box-title,
.sliderBox-2 .s-box-text {
    width: 100%;
    font-size: 13px;
    position: relative;
    line-height: 1.5;
}

.sliderBox-2 .s-box-title,
.sliderBox-2 .s-box-text span {
    display: block;
    font-size: 11px;
}

.sliderBox-2 .s-box-title {
    font-size: 15px;
    margin-bottom: 5px;
}

.sliderBox-2 .s-box-text {
    font-size: 12px;
}

.sliderBox-1 .s-box-title, .sliderBox-1 .s-box-text {
    writing-mode: vertical-lr;
}

.topSlider-wrapper {
    height: 100%;
    width: 100%;
    background-color: #eee;
    margin-top: 10px;
}

.topSlider-wrapper .swiper-container {
    width: 100%;
    height: auto;
}

.topSlider-wrapper .swiper-container .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* width: 76.6% !important; */
    height: 475px;
    max-width: 1140px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    color: #fff;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #222;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative
}

.topSlider-wrapper .swiper-pagination-fraction,
.topSlider-wrapper .swiper-pagination-custom,
.topSlider-wrapper .swiper-container-horizontal > .swiper-pagination-bullets {
    top: 10px;
    width: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.topSlider-wrapper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    opacity: 0.9
}

.topSlider-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
    border: 2px solid #fff;
    background: none;
}

.slider-info {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: #fff;
}

.slider-info {
    font-size: 15px;
}

.slider-info .info-type {
    background: #0b63a9;
    float: left;
    font-size: 9px;
    padding: 8px 10px 8px 10px;
    font-weight: bold;
    margin-right: 10px;
}

.slider-info .info-type.info-recommend {
    background: #d84300;
}

.slider-info .slider-title {
    text-align: left;
}

.slider-info a,span.info-title {
    font-size: 14px;
    color: #fff;
    line-height: 30px;
}

.slider-info a:hover {
    text-decoration: none;
}

.main {
    min-height: 2000px;
}

section.sections {
    padding: 50px 0 50px 0;
}

.sections.s-gray {
    background: url("../img/pattern.png") repeat;
}

.welcome-msg {
    text-align: center;
    padding: 20px 0 20px 0;
}

.welcome-msg img {
    max-width: 100%;
    height: auto;
}

.first-item {
    background: #444;
    padding: 0;
    position: relative;
}

.first-item .inner {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.first-item .inner a {
    width: 100%;
    height: 100%;
    display: block;
    background-position: center center;
    position: relative;
    transition: all 0.7s ease;
}

.inner a img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    transition: all 0.7s ease;
    z-index: 0;
}

.inner a:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    transform: scale(1.1);
}

.first-item .inner .first-title {
    font-size: 13px;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 11;
    right: 0;
    font-weight: bold;
    padding: 0 25px 0 25px;
    text-align: center;
}

.overlay-wrapper {
    width: 100%;
    height: 100%;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    background: rgba(220, 172, 0, 0.85);
    color: #fff;
}

.inner a:hover .overlay-wrapper {
    opacity: 1;
}

.inner .overlay-wrapper > span {
    width: 100%;
    height: 60px;
    line-height: 30px;
    position: absolute;
    font-size: 11px;
    right: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    font-weight: bold;
    padding-top: 28px;
}

.inner .overlay-wrapper:before,
.inner .overlay-wrapper:after {
    z-index: 1;
    border-top: 1px solid #FFF;
    position: absolute;
    width: 180px;
    content: "";
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: scaleX(0.0);
    transform: scaleX(0.0);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.inner .overlay-wrapper:before {
    margin-top: -28px;
}

.inner .overlay-wrapper:after {
    margin-top: 28px;
}

.inner a:hover .overlay-wrapper:before,
.inner a:hover .overlay-wrapper:after {
    display: block !important;
    -webkit-transform: scaleX(1.0);
    transform: scaleX(1.0);
}

.inner .overlay-wrapper > span:after {
}

.inner a:hover .overlay-wrapper span:after {
    margin-right: 0px;
    opacity: 1.0;
}

.inner .overlay-wrapper span.first-name {
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    font-size: 11px;
    height: 30px;
    overflow: hidden;
    padding: 0 5px 0 5px;
}

/**
 *
 *
 **/
.report-item .report-inner .report-thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.report-item .report-inner .report-thumbnail a {
    display: block;
    text-align: center;
    height: 100%;
}

.report-item .report-inner .report-thumbnail a img {
    /* height: 100%; */
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    transition: all 0.7s ease;
    z-index: 0;
}

.report-item .report-inner .report-thumbnail a:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    /* IE 9 */
    transform: scale(1.1);
}

.report-thumbnail .rp-overlay {
    width: 100%;
    height: 100%;
    font-weight: normal;
    letter-spacing: 0.08em;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    background: rgba(230, 0, 51, 0.65);
    color: #fff;
    /*min-height: 140px;*/
}

.report-item .report-inner .report-thumbnail a:hover .rp-overlay {
    opacity: 1;
}

.report-thumbnail .rp-overlay > span {
    width: 100%;
    height: 60px;
    line-height: 30px;
    position: absolute;
    font-size: 11px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    font-weight: bold;
    padding-top: 28px;
    text-transform: uppercase;
}

.report-thumbnail .rp-overlay:before,
.report-thumbnail .rp-overlay:after {
    z-index: 1;
    border-top: 1px solid #fff;
    position: absolute;
    width: 40%;
    content: "";
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: scaleX(0.0);
    transform: scaleX(0.0);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.girlsreport-wrapper .report-thumbnail .rp-overlay:before {
    margin-left: 20%;
}

.girlsreport-wrapper .report-thumbnail .rp-overlay:after {
    margin-right: 20%;
}

.report-thumbnail .rp-overlay:before {
    margin-top: -28px;
}

.report-thumbnail .rp-overlay:after {
    margin-top: 28px;
}

.report-thumbnail .rp-overlay span.first-name {
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    font-size: 11px;
    height: 30px;
    overflow: hidden;
    padding: 0 5px 0 5px;
}

.report-thumbnail a:hover .rp-overlay:before,
.report-thumbnail a:hover .rp-overlay:after {
    display: block !important;
    -webkit-transform: scaleX(1.0);
    transform: scaleX(1.0);
}

.inner .overlay-wrapper > span:after {
}

.inner a:hover .overlay-wrapper span:after {
    margin-right: 0px;
    opacity: 1.0;
}

.blog-list-wrapper .col-md-3:nth-child(4n+1) {
    clear: both;
}

.report-inner {
    margin-bottom: 30px;
}

.report-item .report-inner .report-info {
    padding: 10px;
}

.report-item .report-inner .report-info .report-title {
    font-size: 13px;
    color: #222;
    height: 44px;
    overflow: hidden;
    font-weight: 500;
    display: table;
}

.report-item .report-inner .report-info .report-title a {
    color: #222;
    vertical-align: middle;
    display: table-cell;
}

.report-item .report-inner .report-info .report-title a:hover {
    color: #e60033;
}

.report-item .report-inner .report-info .report-vol {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 9px;
    color: #fff;
    height: 17px;
    background-color: #e60033;
    display: inline-block;
    padding: 4px 8px 4px 8px;
    margin-bottom: 5px;
}

.report-item .report-inner {
    position: relative;
    border: 1px solid #e8e8e8;
}

.report-item.featured-report .report-inner .report-thumbnail {
    position: absolute;
    width: 52%;
    left: 0;
    top: 0;
    min-height: 150px;
    bottom: 0;
}

.report-item.featured-report .report-inner {
    padding-left: 52%;
    height: auto;
}

.report-item.featured-report .report-info {
    height: auto;
    overflow: hidden;
}

.report-item.featured-report .report-info .report-title {
    height: 50px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 10px;
}

.report-item.featured-report .report-info .report-title a {
    color: #e60033;
    padding-bottom: 0;
    display: table-cell;
}

.report-item.featured-report .report-info p {
    font-weight: 500;
    font-size: 12px;
    color: #555;
}

.p-inner {
    position: relative;
    /* height: 100%; */
    width: 100%;
    overflow: hidden;
}

.p-inner .p-thumbnail {
    height: auto;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.p-inner .p-thumbnail a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.p-inner .p-thumbnail a img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    transition: all 0.7s ease;
    z-index: 0;
}

.p-inner .p-thumbnail a:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.overlay-wrapper.p-overlay {
    background: rgba(11, 99, 169, 0.85);
}

.recommend-wrappers .overlay-wrapper.p-overlay {
    background: rgba(216, 67, 0, 0.85);
}

.like-wrappers .overlay-wrapper.p-overlay {
    background: rgba(128, 128, 128, 0.85);
}

.guide-wrappers .overlay-wrapper.p-overlay {
    background: rgba(200, 181, 112, 0.85);
}

.theme-wrappers .overlay-wrapper.p-overlay {
    background: rgba(214, 5, 121, 0.85);
}

.pickup-wrappers .overlay-wrapper.p-overlay {
    background: rgba(50, 182, 189, 0.85);
}

.p-inner .p-thumbnail a:hover .p-overlay {
    opacity: 1;
}

.p-inner .overlay-wrapper > span {
    width: 100%;
    height: 60px;
    line-height: 30px;
    position: absolute;
    font-size: 11px;
    right: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    font-weight: bold;
    padding-top: 28px;
}

.p-inner .overlay-wrapper:before,
.p-inner .overlay-wrapper:after {
    z-index: 1;
    border-top: 1px solid #FFF;
    position: absolute;
    width: 180px;
    content: "";
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: scaleX(0.0);
    transform: scaleX(0.0);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.p-inner .overlay-wrapper:before {
    margin-top: -28px;
}

.p-inner .overlay-wrapper:after {
    margin-top: 28px;
}

.p-inner a:hover .overlay-wrapper:before,
.p-inner a:hover .overlay-wrapper:after {
    display: block !important;
    -webkit-transform: scaleX(1.0);
    transform: scaleX(1.0);
}

.p-inner a:hover .overlay-wrapper span:after {
    margin-right: 0px;
    opacity: 1.0;
}

.p-inner .overlay-wrapper span.first-name {
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    font-size: 11px;
    height: 30px;
    overflow: hidden;
    padding: 0 5px 0 5px;
}

.p-info {
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    position: relative;
}

.p-info .p-title {
    color: #0b63a9;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #e8e8e8;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

.p-info .guide-title a{
    color: #222;
    font-size: 13px;
    font-weight: 500;
    display: table-cell;
    vertical-align: center;
    padding-bottom: 5px;
}

.recommend-wrappers .p-info .p-title a {
    color: #d84300;
    text-align: center;
}

.theme-wrappers .p-info .p-title a {
    color: #ea53a1;
}

.like-wrappers .p-info .p-title a {
    color: #9d9d9d;
}


.p-info .p-title a {
    line-height: 17px;
    color: #0b63a9;
}

.p-info .p-bottom-info {
    padding: 10px 0 0px 0;
}

.p-info .p-bottom-info span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.p-info .p-bottom-info span:first-child {
    font-size: 13px;
}

button.btn-favorite {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.newOpenings-wrappers .slider-container {
    width: 100%;
}

.fp-newopenings .p-info .p-title {
    font-size: 14px;
}

.swiper-sp .swiper-slide {
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 18px;
    float: left;
    margin-bottom: 30px;
}

.swiper-sp .swiper-button-prev,
.swiper-sp .swiper-button-next,
.swiper-sp .swiper-pagination {
    display: none;
}


.btn-favorite {
    background: none;
    border: 0 none;
    outline: 0;
    color: #999;
    font-size: 16px;
}

.btn-favorite.liked {
    color: #e60033;
}

.big-readmore {
    font-size: 13px;
    color: #fff;
    background-color: #000;
    padding: 15px 60px;
    border-radius: 40px;
    font-weight: 900;
    margin: 0 auto;
    display: inline-block;
}

.big-readmore:hover,
.big-readmore:focus {
    background-color: #555;
    color: #fff;
}

.center-btn {
    text-align: center;
    clear: both;
    margin-top: 10px;
}

.qFilter {
    border: 1px solid #e8e8e8;
    border-bottom: 0 none;
}

.qFilter ul {
    list-style-type: none;
}

.qFilter ul li {
    width: 50%;
    float: left;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.qFilter ul li a {
    display: block;
    padding: 20px;
    padding-right: 50px;
    color: #000;
    font-weight: 500;
    position: relative;
}

.qFilter ul li a:hover {
    background-color: #00a0e9;
    color: #fff;
}

.qFilter ul li a i {
    position: absolute;
    right: 20px;
    top: 35%;
    font-size: 20px;
    color: #00a0e9;
}

.qFilter ul li a:hover i {
    color: #fff;
}

.qFilter ul li:nth-child(even) {
    border-right: none;
}

.qMap {
    border: 1px solid #e8e8e8;
    margin-top: 30px;
    position: relative;
}

.qMap i {
    position: absolute;
    left: 50px;
    top: 20px;
    font-size: 45px;
    color: #fff;
}

.qMap i:before {
    color: #00a0e9;
}

.qMap a {
    display: block;
    text-align: center;
    padding: 36px 60px;
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.qMap a:hover {
    background: #00a0e9;
    color: #fff;
}

.qMap a:hover ~ i.icon-map:before {
    color: #fff;
}

.qArea {
    position: relative;
    border: 1px solid #e8e8e8;
    padding: 80px;
}

.qArea ul {
    list-style-type: none;
}

.qArea ul li {
    display: block;
}

.qArea ul li a {
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #000;
    padding: 12px 5px;
    border: 1px solid #eee;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.qArea ul li a:hover {
    background-color: #00a0e9;
    border-color: #00a0e9;
    color: #fff;
}

.qArea li.filter-l-v {
    position: absolute;
    width: 44px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 80px;
    left: 20px;
}

.qArea li.filter-l-v a,
.qArea li.filter-r-v a {
    padding: 12px 20px;
}

.qArea li.filter-r-v {
    position: absolute;
    width: 44px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    right: 20px;
}

.qArea li.filter-t-h {
    position: absolute;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 80px;
    right: 80px;
}

.qArea li.filter-b-h {
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 20px;
    right: 80px;
}

.qArea li.filter-small {
    float: left;
    width: 33.333333%;
    padding-bottom: 15px;
    padding-right: 15px;
}

.qArea li.filter-small:nth-child(3n+1) {
    padding-right: 0;
}

.qArea li.filter-medium {
    width: 50%;
    float: left;
    padding-right: 15px;
}

.qArea li.filter-medium:last-child {
    padding-right: 0;
}

.qFilter ul li a {
    padding: 21px 20px 21px 20px;
    font-size: 13px;
    color: #000;
    padding-right: 20px;
}

.magazine-wrapper {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.magazine-item {
    position: relative;
    padding-left: 220px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.m-thumb {
    width: 200px;
    height: 200px;
    display: block;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 20px;
    overflow: hidden;
}

.m-thumb a {
    display: block;
    height: 100%;
    width: 100%;
}

.m-thumb a img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.m-thumb a:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.25);
    z-index: 2;
    widows: 100%;
    height: 100%;
}

.m-info .m-title a {
    font-size: 20px;
    color: #000;
    line-height: 1.5;
    font-weight: 500;
}

.m-info .m-title a:hover {
    color: #9db174;
}

.m-sub-info .s-info {
    display: inline-block;
    width: auto;
    margin: 15px 0;
    font-size: 11px;
    padding: 8px 20px;
}

.m-sub-info .cat-link {
    background: #9db174;
    color: #fff;
}

.m-sub-info .m-author {
    position: relative;
    padding-left: 40px;
}

.m-info p {
    font-size: 14px;
}

a.author-avatar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
}

a.author-avatar img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

.pickup-wrappers .p-item {
    width: 20%;
}

.pickup-wrappers .p-item .p-thumbnail {
    /* height: 140px;*/
    height:auto;
}

.pickup-wrappers .p-item:nth-child(-n+4) {
    width: 25%;
}

.pickup-wrappers .p-item:nth-child(-n+4) .p-thumbnail {
   /*height: 200px; */
   height:auto;
}

.news-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    border: 1px solid #e8e8e8;
    padding: 25px;
    background: #fff;
}

ul.nav-news {
    list-style-type: none;
    padding: 0;
    display: inline-block;
    width: auto;
    margin: 0 auto;
    margin-bottom: -9px;
}

ul.nav-news > li {
    float: left;
    position: relative;
    display: block;
    font-size: 11px;
    font-weight: bold;
}

ul.nav-news > li:first-child a {
    border-left: 1px solid #000;
}

ul.nav-news > li:last-child a {
    border-right: 1px solid #000;
}

ul.nav-news > li > a {
    text-decoration: none;
    padding: 5px 50px;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    color: #000;
}

.nav-news > li.active > a,
.nav-news > li.active > a:hover,
.nav-news > li.active > a:focus {
    color: #fff;
    background-color: #000;
}

.newsContainer {
    text-align: center;
    padding: 0 50px;
}

.newsContainer .tab-content {
    padding: 5px 15px;
    position: relative;
    width: 100%;
    background: #fff;
    border-top: 1px solid #000;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.news-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.news-list li {
    float: left;
    width: 50%;
    padding: 10px 10px 10px 0;
}

.news-list li a {
    display: block;
    color: #000;
    font-weight: 500;
    font-size: 13px;
}

.news-list li a:hover {
    color: #000;
    text-decoration: underline;
}

.news-list li span {
    color: #555;
    font-weight: bold;
    font-size: 11px;
}

.banner-wrapper {
    margin-top: 30px;
    margin-bottom: 0px;
}

.bannerHolder {
    margin-bottom: 20px;
}

.bannerHolder a {
    display: block;
}

.bannerHolder a img {
    width: 100%;
    height: auto;
}

.tingle-modal {
    padding: 50px 15px;
}

.tingle-modal--visible .tingle-modal-box {
    width: 100%;
    max-width: 722px;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.tingle-modal-box__content {
    padding: 56% 0 0;
    position: relative;
}


.tingle-modal-box__content > iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}


.tingle-modal__close {
    right: 16px !important;
    left: auto !important;
    top: 5px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 34px !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    .tingle-modal__close {
        top: 0;
        right: 0 !important;
    }
}

.tingle-modal__closeLabel {
    display: none !important;
}

span.badge-woman {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 20px;
    background: #e60033;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    display: block;
    z-index: 2;
    border-radius: 20px;
}

.post {
    position: relative;
    top: 10px;
    -webkit-transition: all 0.4s ease-out 0.2s;
    transition: all 0.4s ease-out 0.2s;
    /* opacity: 0; */
}

.post.visible {
    opacity: 1;
    top: 0;
}

.content-page.white-page {
    background: none;
    min-height: 300px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.main-footer {
    width: 100%;
    position: relative;
    background: #fff;
    z-index: 100;
}

.footer-smallmenu {
    width: 100%;
    height: auto;
    padding: 5px 0;
    background: #000;
    text-align: center;
}

.footer-smallmenu ul {
    list-style-type: none;
    margin: 0 auto;
    display: inline-block;
    width: auto;
}

.footer-smallmenu ul li {
    float: left;
    line-height: 2em;
}

.footer-smallmenu ul li a {
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
    text-transform: uppercase;
    padding: 5px 10px 0px 10px;
}

.copyright {
    text-align: center;
    padding: 10px 0;
}

.footer-menu {
    padding: 30px 0;
}

.f-menu {
    margin-bottom: 15px;
}

.f-menu > ul > li, .f-menu li.expand > ul > li {
    float: none;
    width: 100%;
    display: block;
}

.f-menu > ul > li > a , .f-menu li.expand > ul > li > a{
    color: #000;
    padding: 4px 0 4px 0;
    line-height: 1.2;
    font-size: 12px;
    border: 1px solid #fff;
    margin-bottom: 5px;
    display: inline-block;
}

.f-menu > ul > li > a:hover , .f-menu li.expand > ul > li > a:hover{
    border-bottom: 1px solid #000;
}

.f-menu > h4 {
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 13px;
    font-weight: 900;
    color: #000;
}

.f-menu span.expand_h4{
    margin-bottom: 15px;
    margin-top: 0;
    font-size: 13px;
    font-weight: 900;
    color: #000;
    display:block;
}

.f-menu > h4 i , .f-menu li.expand i {
    display: none;
}

.f-menu > h4 a {
    color: #000;
}

.fan-box {
    text-align: right;
    overflow: hidden;
    margin: 0 auto;
}

.fanbox .fb-page,
.fanbox .fb-page span,
.fanbox .fb-page span iframe[style] {
    width: 100% !important;
    max-width: 100% !important;
}

.guide-list {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.guide-list:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    height: 1px;
    background-color: #e8e8e8;
    width: 65%;
    margin: 0 auto;
    z-index: -1;
}

.guide-list .list-circle {
    display: block;
    text-align: center;
}

.guide-list li {
    float: left;
    width: 33.3333333%;
    display: block;
    text-align: center;
}

.list-circle {
    width: 62px;
    height: 62px;
    display: block;
    border: 2px solid #e8e8e8;
    border-radius: 70px;
    background: #fff;
    margin: 0 auto;
}

.list-circle i {
    font-size: 30px;
    position: relative;
    top: 20%;
}

.icon-schema {
    position: relative;
    left: -5px;
}

.list-title {
    margin-top: 10px;
}

.list-title span {
    font-weight: 700;
    color: #cc8b86;
}

.list-jp-title {
    color: #aaa;
    font-weight: 500;
    font-size: 16px;
}

h2.guide-h2 {
    line-height:1.7;
    font-weight: 400;
    color: #aaa;
    font-size: 18px;
}

h2.guide-h2 span {
    color: #cc8b86;
}

p.guide-h2 {
    line-height:1.7;
    font-weight: 400;
    color: #aaa;
    font-size: 18px;
    letter-spacing: 1px;
}

p.guide-h2 span {
    color: #cc8b86;
}
p.guide-h2 a{
    color: #aaa;
}

h3.guide-h3 {
    font-weight: 400;
    color: #aaa;
    font-size: 18px;
}

h3.guide-h3 span {
    color: #cc8b86;
}

button.btn-up {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border: 0 none;
    border-radius: 100px;
    display: none;
    position: fixed;
    bottom: 5%;
    right: 5%;
    text-align: center;
    outline: none;
    z-index: 999;
    will-change: transform;
    /*important fix*/

    font-size: 0;
}

button.btn-up i {
    display: block;
    font-size: 30px;
}

#gotosp {
    color: #fff;
    position: fixed;
    display: none;
    bottom: 5%;
    left: 5%;
    z-index: 999;
}

.f-menu ul {
    padding-left: 10px;
}

.hidden-dp {
    display: none;
}

.hidden-sp {
    display: block;
}

/* ==========================================================================
   Shared layout
   ========================================================================== */
.sidebar {
    margin-top: 20px;
}

.widget_area {
    margin-bottom: 15px;
    position: relative;
}

.button {
    border: 0 none;
    background: none;
    outline: 0;
    margin: 10px 0 10px 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    box-sizing: border-box;
    position: relative;
}

.button.btn-love {
    background: #fff;
    color: #333;
    border: 2px solid #000;
    border-radius: 30px;
    width: 100%;
    display: block;
    padding: 3px 20px 5px;
    font-size: 13px;
    position: relative;
    height: 36px;
    font-weight: 500;
}

.button.btn-love .icon {
    position: absolute;
    left: 15px;
    font-size: 15px;
    top: 9px;
}

.button.btn-love.is-liked:hover,
.button.btn-love:hover {
    background: #000;
    color: #fff;
}

.button.btn-love:hover .icon:before, .button.btn-love:focus .icon:before {
    color: #fff;
}

.button.btn-contact {
    background: #00a0e9;
    color: #fff;
    border-radius: 30px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5px 20px 5px;
    height: 36px;
    font-size: 13px;
    position: relative;
    font-weight: 500;
}

.button.btn-contact:hover, .button.btn-contact:focus {
    background: #49c0f7;
    color: #fff;
}

.button.btn-contact:hover .icon:before, .button.btn-contact:focus .icon:before {
    color: #fff;
}

.button.btn-black {
    background: #000;
    color: #fff;
    border-radius: 30px;
    width: 100%;
    display: block;
    padding: 3px 20px 5px;
    height: 36px;
    font-size: 13px;
    position: relative;
    font-weight: 500;
}

.button.btn-contact .icon, .button.btn-black .icon {
    position: absolute;
    left: 15px;
    font-size: 15px;
    top: 11px;
    font-weight: normal;
}

.button.btn-contact .icon:before, .button.btn-black .icon:before {
    color: #fff;
}

.button.btn-bigblue {
    background: #32b6bd;
    color: #fff;
    border-radius: 30px;
    width: auto;
    display: inline-block;
    padding: 10px 25px;
    height: 45px;
    font-size: 14px;
    position: relative;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
}

.button.btn-bigblue:hover, .button.btn-bigblue:focus {
    background-color: #19898f;
}

.button.btn-bigempty {
    background: #00a0e9;
    color: #fff;
    border-radius: 30px;
    width: auto;
    display: inline-block;
    padding: 10px 25px;
    height: 45px;
    font-size: 14px;
    position: relative;
    font-weight: 500;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
}

.button.btn-bigempty:hover, .button.btn-bigempty:focus {
    background-color: #0068b7;
}

.button.btn-pwhite {
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    border: 2px solid #000;
    padding: 3px 20px 5px;
    height: 36px;
    min-width: 270px;
    margin: 0 10px 0 10px;
}

.button.btn-pwhite:hover, .button.btn-pwhite:focus {
    color: #fff;
    background: #000;
}

.button.btn-pwhite:hover i:before, .button.btn-pwhite:focus i:before {
    color: #fff;
    background: #000;
}

.button.btn-pwhite i, .button.btn-gray i {
    position: absolute;
    left: 10px;
    top: 25%;
    font-size: 16px;
}

.button.btn-gray {
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 2px solid #000;
    height: 36px;
    padding: 3px 20px 5px;
    border-radius: 5px;
    min-width: 270px;
    margin: 0 10px 0 10px;
}

.button.btn-love.is-liked,
.button.btn-gray.is-liked {
    background: #eee;
    border-color: #eee;
}

.button.btn-gray:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.button.btn-gray:hover i:before {
    color: #fff;
}

.button.btn-love.is-liked .icon:before,
.button.btn-gray.is-liked i:before {
    color: #e60033;
}

.double-button {
    width: auto;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.double-button .button {
    margin-top: 15px;
}

.button.btn-gray i:before {
    color: #000;
}

.button.big-main {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #cc8b86;
    text-align: center;
    padding: 15px 50px;
    border-radius: 30px;
    margin: 0 auto;
    margin: 20px 0 20px 0;
}

.button.big-main:hover, .button.big-main:focus {
    background: #ed948d;
}

.button.big-main-blue {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #00a0e9;
    text-align: center;
    padding: 15px 50px;
    border-radius: 30px;
    margin: 0 auto;
    margin: 20px 0 20px 0;
}

.button.big-main-blue:hover, .button.big-main-blue:focus {
    background: #49c0f7;
}

.f-menu > ul > li > a > i {
    display: none;
}

.pswp {
    z-index: 9990 !important;
}

.pswp__zoom-wrap {
    text-align: center;
}

.pswp__zoom-wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.wrapper {
    line-height: 0;
    width: 100%;
    max-width: 900px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
    width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video {
    width: 100% !important;
    height: auto !important;
}

.crumb-container {
    min-height: 30px;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    display: block;
}

.pathway {
    font-size: 11px;
    color: #000000;
    padding: 5px 0px 5px 0px;
}

.pathway li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline;
}

.pathway a {
    color: #000;
    display: inline-block;
}

.pathway li:before {
    content: " > ";
    color: #cfcfcf;
    margin: 0 .5rem;
}

.pathway li:first-child:before {
    content: none;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #00a0e9;
    border-color: #00a0e9;
}

.pagination > li > a, .pagination > li > span {
    color: #000;
    margin: 0 6px;
    border: 1px solid #555;
    margin-bottom: 12px;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-radius: 0;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-radius: 0;
}

.badge-holder {
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 100;
}

.badge-holder span.bc-badge {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    background: #00a0e9;
    border-radius: 30px;
    padding: 2px 30px;
    z-index: 2;
    position: relative;
    font-weight: bold;
}

.result-item span.bc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    background: #00a0e9;
    border-radius: 30px;
    padding: 2px 30px;
    z-index: 6;
}

.result-item span.bc-badge-full, .badge-holder span.bc-badge-full {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    background: #000;
    border-radius: 30px;
    padding: 2px 30px;
    z-index: 6;
}
.badge-holder span.bc-badge-full
{
    float: left !important;
    top: auto;
    left: auto;
    display: inline-block;
    margin-right: 5px;
    position: relative !important;
}
.result-item span.bc-badge-almostempty {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    background: #32b6bd;
    border-radius: 30px;
    padding: 2px 30px;
    z-index: 2;
}

.badge-holder span.badge-cyan {
    background: #32b6bd;
    padding: 2px 20px;
}

.badge-holder span.badge-woman {
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    float: left;
}
.badge-holder::after
{
    clear: both;
    content: " ";
    display: block;
}
.badge-holder span {
    margin-right: 5px;
}

span.white-360badge {
    position: absolute;
    top: -10px;
    left: 100px;
    width: 64px;
    height: 64px;
    text-align: center;
    padding-top: 15px;
    line-height: 1;
    background:url("../img/icon_360-white.png") center center no-repeat;
    z-index: 9;
}
span.white-corona {
    position: absolute;
    top: 10px;
    left: 100px;
    width: 64px;
    height: 30px;
    text-align: center;
    padding-top: 15px;
    line-height: 1;
    background:url("../img/corona/sp_corona2-white.png") center center no-repeat;
    z-index: 9;
    background-size:contain;
}
span.white-icon-pos1{
    left: 100px;
    
}
span.white-icon-pos2{
    left: 160px;
}

.bc-item span.white-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("../img/badge-white.png") center center no-repeat;
    width: 64px;
    height: 64px;
    text-align: center;
    padding-top: 15px;
    line-height: 1;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    color: #000;
}

.bc-item span.white-badge span.b-num {
    font-size: 18px;
    color: #00a0e9;
    font-weight: 700;
}

span.white-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("../img/badge-white.png") center center no-repeat;
    width: 64px;
    height: 64px;
    text-align: center;
    z-index: 9;
    padding-top: 15px;
    line-height: 1;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    color: #000;
}

span.white-badge span.b-num {
    font-size: 18px;
    color: #00a0e9;
    font-weight: 700;
    position: relative;
    top: 1px;
}

.p-inner .p-thumbnail a span.white-badge > img {
    width: 20px;
    height: auto;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;;

}

span.white-badge.human-badge {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    padding-top: 8px;
    width: 60px;
    height: 60px;
    background-size: 50px 50px;
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    font-size: 9px;
}

span.white-badge span.b-num {
    font-size: 14px;
    color: #0b63a9;
}

.check-counter {
    background: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 40px;
    z-index: 999;
    will-change: transform;
    text-align: center;
    padding: 4px 0;
    margin-bottom: -40px;
    opacity: 0;
    visibility: hidden;

}

.check-counter.active {
    margin: 0;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    opacity: 1;
}

.counter-item {
    background: #fff;
    height: 32px;
    border-radius: 20px;
    display: inline-block;
    width: auto;
    color: #000;
    padding: 0 15px;
}

.check-counter .check-icon {
    background: #000;
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 10px;
    color: #fff;
}

.check-counter .check-icon i:before {
    color: #fff;
}

.check-counter span.small-text {
    font-size: 11px;
}

.check-counter span#check-count {
    font-weight: 600;
    font-size: 16px;
    margin-right: 5px;
    position: relative;
}

a#check-counter-link {
    color: #ffffff;
    line-height: 32px;
    font-weight: bold;
}

.default-ratio .p-inner .p-thumbnail a img, .default-ratio .report-item .report-inner .report-thumbnail a img {
    height: auto;
    /*width: 100%;*/
}

.default-ratio .p-inner .p-thumbnail, .default-ratio .report-item .report-inner .report-thumbnail {
    height: 100%;
    width: 100%;
    /*min-height: 140px;*/
}

.default-ratio .p-inner .p-thumbnail a, .default-ratio .report-item .report-inner .report-thumbnail a {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    display: block;
}

.swiper-container .like-item{
    width:50%;
}
.swiper-container .like-item .p-thumbnail{
    height:100%;
}

.report-icon{
    top:0;
    left:10px;
    text-align:right;
    position:absolute;
    z-index:500;
    color:white;
    font-size:16px;
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: double;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 1200px) {
    .logoHolder a img {
        width: 200px;
        height: auto;
    }
    .p-inner .p-thumbnail {
        height: 174px; 
    }

    .pickup-wrappers .p-item .p-thumbnail {
        height: 140px;
    }
    .pickup-wrappers .p-item:nth-child(-n+4) .p-thumbnail {
        height: 200px;
    }

}

@media (min-width: 992px) {
    .topSlider-wrapper .swiper-container .swiper-slide {
        min-height: 475px;
    }
}

@media (max-width: 1199px) {
    .p-inner .p-thumbnail {
        height: 174px; 
    }

    .pickup-wrappers .p-item .p-thumbnail {
        height: 140px;
    }
    .pickup-wrappers .p-item:nth-child(-n+4) .p-thumbnail {
        height: 200px;
    }
}
@media (max-width: 991px) {

    .sliderBox-2
    {
        display: none;
        left: 50px;
        top: 50px !important;
        width: 100px !important;
        height: 100px !important;
        padding: 10px;
    }
    .sliderBox-2 .s-box-title {
        font-size: 12px;
        line-height: 1.5;
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
    .sliderBox-2 .s-box-text {
        display: none;
    }

    .hidden-mobile {
        display: none !important;
    }

    .footer-menu {
        padding: 0;
    }

    .button.big-main {
        font-size: 14px;
        padding: 15px 20px;
    }

    .topSlider-wrapper .swiper-pagination-fraction,
    .topSlider-wrapper .swiper-pagination-custom,
    .topSlider-wrapper .swiper-container-horizontal > .swiper-pagination-bullets {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        top: auto;
        margin: 0 auto;
    }

    .topSlider-wrapper .swiper-pagination-bullet {
        background: #000;
        opacity: 0.2;
    }

    .topSlider-wrapper .swiper-pagination-bullet-active {
        background: #000;
        opacity: 0.9;
        border: 0 none;
    }

    .headline h1, .headline h2, .headline h3, .headline h1.top-h1 {
        margin: 0;
        line-height: 28px;
        font-size: 10px;
        font-weight: 500;
    }

    .post {
        opacity: 1;
        top: 0;
    }

    .topSlider-wrapper {
        margin-top: 0;
        background: #fff;
    }

    .topSlider-wrapper .swiper-container {
        padding-bottom: 50px;
    }

    .f-menu {
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    .f-menu ul {
        padding: 0;
        max-height: 0;
        -webkit-transition: max-height 0.25s ease-in-out;
        -moz-transition: max-height 0.25s ease-in-out;
        -o-transition: max-height 0.25s ease-in-out;
        transition: max-height 0.25s ease-in-out;
        overflow-y: hidden;
    }

    .f-menu ul.open {
        max-height: 400px;
        -webkit-transition: max-height 0.5s ease-in-out;
        -moz-transition: max-height 0.5s ease-in-out;
        -o-transition: max-height 0.5s ease-in-out;
        transition: max-height 0.5s ease-in-out;
        overflow-y: hidden;
    }

    .f-menu > h4 {
        cursor: pointer;
        position: relative;
        padding: 15px 15px;
        border-bottom: 1px solid #e8e8e8;
        margin: 0;
        z-index: 200;
        display: block;
        font-weight: 400;
    }

    .f-menu.hidden-dp > h4:after {
        display: none;
    }

    .f-menu > h4:after {
        content: "＋";
        font-size: 14px;
        margin-top: -6.5px;
        position: absolute;
        right: 12px;
        top: 45%;
    }

    .f-menu > h4.is-active:after {
        content: "?";
        font-size: 14px;
        margin-top: -6.5px;
        position: absolute;
        right: 12px;
        top: 45%;
    }

    .f-menu > h4 i {
        display: block;
        position: absolute;
        right: 10px;
        top: 24px;
        font-size: 13px;
    }

    .hidden-dp {
        display: block;
    }

    .hidden-sp {
        display: none;
    }

    /*.sliderBox-2,*/
    .sliderBox-1,
    .slider-info {
        /*display: none;*/
    }

    button.btn-up {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        border: 0 none;
        border-radius: 100px;
        display: none;
        position: fixed;
        bottom: 5%;
        right: 5%;
        text-align: center;
        outline: none;
        z-index: 999;
        will-change: transform;
        /*important fix*/
        font-size: 0;
    }

    button.btn-up i {
        display: block;
        font-size: 20px;
    }

    .first-item .inner .first-title {
        bottom: 5px;
        font-size: 12px;
        font-weight: 500;
    }

    .qFilter ul li a i {
        right: 10px;
        top: 20px;
    }

    .f-menu.hidden-dp {
        border-top: 1px solid #e8e8e8;
    }

    .qFilter ul li a {
        padding: 20px 15px;
        font-size: 10px;
        padding-right: 20px;
    }

    .f-menu {
        text-align: left
    }

    .fan-box {
        text-align: center;
        margin: 15px 0;
    }

    .f-menu > ul > li:first-child a {

    }

    .f-menu > ul > li > a {
        font-size: 12px;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #e8e8e8;
        padding: 15px;
        font-weight: 400;
        position: relative;
        padding-left: 30px;
    }

    .f-menu > ul > li > a > i {
        position: absolute;
        right: 15px;
        top: 35%;
        display: block;
        font-size: 16px;
    }

    .f-menu > ul > li > a:hover {
        text-decoration: none;
        background: #e8e8e8;
        border: 1px solid #e8e8e8;
    }

    .footer-smallmenu ul li {
        float: left;
        text-align: center;
        width: 50%;
    }

    .footer-smallmenu {
        padding: 5px 0;
    }

    .footer-smallmenu ul li a {
        padding: 7px 2px;
        font-size: 12px;
    }

    .footer-smallmenu ul li a:hover,
    .footer-smallmenu ul li a:focus {
        background: #222;
    }

    .news-wrapper {
        display: none;
    }

    .m-thumb {
        width: 150px;
        height: 150px;
        display: block;
        background-color: #000;
        position: absolute;
        left: 0;
        top: 20px;
    }

    .magazine-item {
        position: relative;
        padding-left: 170px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e8e8e8;
    }

    .m-info p {
        display: none;
    }

    .swiper-sp .swiper-slide {
        width: 50%;
    }

    .rest-container .report-item {
        /*display: none;*/
    }

    .rest-container .report-item {
        height: auto;
        width: 100%;
    }

    .report-item.featured-report .report-inner .report-thumbnail {
        position: relative;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .report-item.featured-report .report-inner {
        padding-left: 0;
        height: 100%;
    }

    .report-item.featured-report .report-info p {
        font-weight: 500;
        font-size: 12px;
        display: none;
        color: #555;
    }

    .report-item.featured-report .report-info .report-title a {
        color: #222;
        border: 0 none;
        vertical-align: middle;
        display: table-cell;
    }

    .report-item.featured-report .report-info {
        height: 100% !important;
    }

    .report-item.featured-report .report-info .report-title {
        border: 0 none;
        margin: 0;
    }

    section.sections {
        padding: 30px 0 30px 0;
    }

    p.eng {
        font-size: 18px;
        padding-left: 70px;
        padding-right: 70px;
        width: 90%;
    }

    .smallMenu-wrapper,
    .mainMenu,
    .toolMenu,
    .smallMenu-wrapper.view {
        display: none;
    }

    .fixedMenuGap {
        height: 50px;
    }

    .mainMenu-wrapper {
        height: 50px;
        will-change: transform;
        /*important fix*/

        position: fixed;
    }

    .logoHolder a img {
        height: 30px;
        width: auto;
    }

    .logoHolder {
        padding: 12px 12px 0 0;
    }

    .mobileMenu-wrapper,
    .overlay-sp,
    .overlay-sp.is-active {
        display: block;
    }

    .slider-info a,span.info-title {
        width: 100%;
        display: block;
        line-height: 18px;
        font-size: 13px;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .report-item.blog-item {
        text-align: center;
    }

    .report-item.blog-item .report-inner {
        display: inline-block;
        text-align: left;
        max-width: 100%;
    }

    .p-item.post {
        text-align: center;
    }

    .p-inner {
        position: relative;
        display: inline-block;
        height: auto;
        width: auto;
        overflow: hidden;
        text-align: left;
        max-width: 100%;
    }

    .p-inner .p-thumbnail {
        height: auto;
        position: relative;
        overflow: hidden;
        width: auto;
    }

    .p-inner .p-thumbnail a {
        position: relative;
        width: auto;
        display: block;
        overflow: hidden;
        text-align: left;
    }

    .p-inner .p-thumbnail a img {
        display: block;
        max-width: 100%;
        width: auto;
        height: auto;
    }


    .swiper-container .like-item .p-thumbnail{
        height:auto;
    }

}

@media (max-width: 767px) {
    .rp-overlay, .overlay-wrapper {
        display: none;
    }

    .topSlider-wrapper .swiper-container .swiper-slide {
        width: 100% !important;
    }

    .guide-list .list-circle {
        display: block;
        text-align: center;
    }

    .guide-list li {
        float: left;
        width: 33.3333333%;
        display: block;
        text-align: center;
    }

    .list-circle {
        width: 40px;
        height: 40px;
        display: block;
        border: 2px solid #e8e8e8;
        border-radius: 70px;
        background: #fff;
        margin: 0 auto;
    }

    .list-circle i {
        font-size: 20px;
        position: relative;
        top: 20%;
    }

    .icon-schema {
        position: relative;
        left: -5px;
    }

    .list-title span {
        font-weight: 500;
        color: #cc8b86;
    }

    .list-jp-title {
        color: #aaa;
        font-weight: 500;
        font-size: 10px;
    }

    h2.guide-h2 {
        font-weight: 500;
        font-size: 12px;
        color: #aaa;
    }

    h2.guide-h2 span {
        color: #cc8b86;
    }

    p.guide-h2 {
        font-weight: 500;
        font-size: 12px;
        color: #aaa;
    }
    
    p.guide-h2 span {
        color: #cc8b86;
    }
    
    p.guide-h2 a{
        color: #aaa;
    }

    .big-readmore {
        font-size: 10px;
        color: #fff;
        background-color: #000;
        padding: 9px 50px;
        border-radius: 40px;
        margin: 0 auto;
        display: inline-block;
    }

    .headline {
        width: 100%;
        text-align: center;
        position: relative;
        padding-bottom: 4px;
        margin-bottom: 20px;
    }

    .m-info .m-title a {
        font-size: 14px;
    }

    .magazine-item {
        min-height: 120px;
        padding-left: 110px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .m-thumb {
        height: 100px;
        width: 100px;
        top: 10px;
    }

    .m-sub-info .s-info {
        margin: 5px 0 5px 0;
        font-size: 10px;
        padding: 3px 10px;
    }

    .m-sub-info .m-author {
        padding-left: 30px;
    }

    a.author-avatar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
    }

    .swiper-sp .swiper-slide {
        display: flex;
        width: 78%;
        float: none;
        position: relative;
    }

    .pickup-wrappers .p-item {
        width: 78%;
    }

    .pickup-wrappers .p-item .p-thumbnail {
        /* height: 140px; */
        height:auto;
    }

    .pickup-wrappers .p-item:nth-child(-n+4) {
        width: 78%;
    }

    .pickup-wrappers .p-item:nth-child(-n+4) .p-thumbnail {
    /*   height: 160px; */
        height:auto;
    }

    .swiper-sp .swiper-pagination {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .swiper-sp .swiper-wrapper {
        padding-bottom: 30px;
        position: relative;
    }

    .swiper-sp .swiper-button-prev,
    .swiper-sp .swiper-button-next,
    .swiper-sp .swiper-pagination {
        display: block;
    }

    .swiper-sp .swiper-button-prev,
    .swiper-sp .swiper-button-next {
        bottom: 10px;
        height: 30px;
        width: 50px;
        top: auto;
        background-image: none;
        font-size: 40px;
    }

    .swiper-sp .swiper-button-prev i,
    .swiper-sp .swiper-button-next i {
        position: relative;
        top: -18px;
    }

    .swiper-sp .swiper-button-next,
    .swiper-sp .swiper-container-rtl .swiper-button-prev {
        right: -24px;
        left: auto;
    }

    .qSearch-wrapper .qArea > ul > li {
        width: 50% !important;
        position: relative !important;
        float: left !important;
        padding-right: 10px !important;
        padding-bottom: 10px;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }

    .qSearch-wrapper .qArea > ul > li a {
        font-size: 11px;
    }

    .qArea {
        padding: 10px;
        margin-top: 30px;
    }

    .qMap {
        border-top: 0;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .qMap a {
        padding: 25px 40px 25px 40px;
    }

    .qMap i {
        font-size: 30px;
    }

    .copyright {
        padding: 10px 0 20px 0;
    }

    .copyright span {
        display: none
    }

    .copyright span:first-child {
        display: block;
        font-size: 10px;
    }

    .m-info .m-title a {
        font-size: 11px;
        font-weight: 500;
    }

    .m-sub-info .s-info {
        margin: 5px 0 5px 0;
        font-size: 10px;
        padding: 3px 10px;
    }

    .m-sub-info .m-author {
        padding-left: 30px;
    }

    a.author-avatar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
    }

    .qSearch-wrapper .qArea > ul > li a {
        font-size: 9px;
        padding: 10px 0 10px 0;
    }

    p.eng {
        font-size: 16px;
        width: 100%;
        padding-left: 48px;
        padding-right: 48px;
    }

    h2.h2::before,
    h2.h2::after {
        background-size: 30px;
    }

    .logoHolder a img {
        width: 175px;
        height: auto;
    }

    .topSlider-wrapper .swiper-container .swiper-slide,
    .topSlider-wrapper {
        height: auto;
    }

    .slider-info a,span.info-title {
        font-size: 12px;
    }

    .report-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .girlsreport-wrapper > .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .report-item .report-inner .report-info .report-title {
        font-size: 10px;
        line-height: 14px;
    }

    .report-item.featured-report .report-info .report-title a,
    .report-item .report-inner .report-info .report-title a {
        padding-bottom: 0;
        padding-top: 0;
        border: 0 none;
        font-size: 13px;
        line-height: 1.5;
    }

    .first-item {
        min-height: 100px;
    }

    .first-item .inner .first-title {
        font-size: 10px;
    }

    .qFilter ul li a {
        padding: 20px 10px;
        font-size: 10px;
        padding-right: 20px;
    }

    .girls-others img{
        max-width:32%;
    }
}

@media (max-width: 321px) {
    .logoHolder a img {
        width: 150px;
        height: auto;
    }
}

@media (min-width: 992px) {
    .report-item .report-inner .report-thumbnail {
    /*    max-height: 174px; */
    }

    .report-item.featured-report .report-info {
        min-height: 192px;
        max-height: 192px;
    }

    .report-item.featured-report .report-inner .report-thumbnail {
     /*   max-height: 192px; */
     /*    max-width:300px; */
    }

    .balloon .report-item.featured-report .report-inner .report-thumbnail{
        height:100%;
        max-height:388px;
    }

    .balloon .report-item.featured-report .report-inner{
        height:220px;
    }

    .first-item {
        max-height: calc(68.60vw / 4);
        min-height: calc(68.60vw / 4);
    }
    
    .like-result-search .swiper-holder{
        display:flex;
        flex-wrap : wrap;
      }
    
}

@media (min-width: 1199px){

    .balloon .report-item.featured-report .report-inner{
        height:260px;
    }
}

@media (max-width: 992px) {
    .first-item {
        max-height: calc(68.60vw / 2);
        min-height: calc(68.60vw / 2);
    }

    .report-item.featured-report .report-inner .report-thumbnail, .report-item .report-inner .report-thumbnail {
         max-height: calc(68.60vw - 30px); 
        /* min-height: calc(68.60vw - 30px); */
    }
}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {
        background-image: url(img/shopping_bag@2x.png);
    }

    p.eng:before {
        background: url(../img/icons/arrow-left@2x.png) no-repeat left center;
        background-size: 50%;
    }

    p.eng::after {
        background: url(../img/icons/arrow-right@2x.png) no-repeat right center;
        background-size: 50%;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.align-center {
    text-align: center;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.favorite-color {
    color: #e60033 !important;
}

/**
* convert
*/
p.convert_h1{
  line-height:36px;
  height:36px;
  margin:0;
}

h1.convert_p{
  font-size:14px;
}
/**
*
* .fp-search
*
**/
.fp-search .search-left{
    padding-right:10px;
}
.fp-search .search-right{
    padding-left:10px;
}
.fp-search ul{
    list-style:none;
    margin-bottom:5px;
    
}
.fp-search li{
    display:inline-block;
    font-size:12px;
}
.fp-search h3{
    color:#000;
    margin: 0 0 15px 0;
    font-size:13px;
    font-weight:bold;
}
.fp-search h2{
    color:#000;
    margin: 0 0 15px 0;
    font-size:13px;
    font-weight:bold;
}

.fp-search .row{
    margin:0 0 20px 0;
}
.fp-search .search-label{
    padding-left:6px;
    float:left;
    font-size:12px;
}
.fp-search .search-content{
      margin-left: 180px;
      margin-bottom:10px;
}
.fp-search a{
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}
.fp-search .fa{
    display:none;
}


.fp-search .expand_h4{
    margin-bottom: 15px;
    margin-top: 0;
    font-size: 13px;
    font-weight: 900;
    color: #000;
    display:block;
}

@media(max-width: 991px){
  section.fp-search{
      margin:0;
      padding:0;
  }
  .fp-search .search-left{
      margin:0;
      padding:0;
  }
  .fp-search .search-right{
      margin:0;
      padding:0;
  }
  .fp-search .search-label{
      float:none;
      padding-left:0;
  }
  .fp-search .search-content{
      margin-left:0;
  }
  .fp-search .search-row{
      max-height: 0;
      transition: max-height 0.25s ease-in-out;
      overflow-y: hidden;
      margin:0;
  }
  .fp-search div.open{
      max-height:800px;
      transition: max-height 0.5x easing-in-out;
      overflow-y: hidden;
      margin-bottom:20px;
  }
  .fp-search .search-area li{
      width:49.5%;
  }
  .fp-search .search-stat li{
      width:49.5%;
  }
  .fp-search .search-term li{
      display:block;
  }
  .fp-search a{
      width:100%;
      display:inline-block;
      position:relative;
      padding-right:15px;
  }
  .fp-search .fa{
      display:block;
      position:absolute;
      right:0px;
      top: 8px;
  }

}
/**
 *
 *
 **/

  .rank {  
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 20px;
    margin: 0;
    padding: 10px 0;
    z-index: 2;
    width: 40px;
    text-align: center;
    color: white;
    font-size: 17px;
    background: linear-gradient(#ff785b 0%, #e95738 100%);
    border-radius: 2px 0 0 0;
    }
  
  .rank:before {
    position: absolute;
    content: '';
    top: 0px;
    right: -5px;
    border: none;
    border-bottom: solid 6px #cf4a2d;
    border-right: solid 6px transparent;
  }
  .rank:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 20px solid #e95738;
    border-right: 20px solid #e95738;
    border-bottom: 15px solid transparent;
  }

  .rank1{
    background: linear-gradient(rgb(248, 214, 156) 0%, rgb(248, 183, 54) 100%);
  }
  .rank1:before{
    border-bottom: solid 6px rgb(250, 198, 107);
  }
  .rank1:after{
    border-left-color:rgb(248, 183, 54);
    border-right-color:rgb(248, 183, 54);   
  }

  .rank2{
    background: linear-gradient(rgb(219, 219, 219) 0%, #5D6874 100%);
  }
  .rank2:before{
    border-bottom: solid 6px #9298A0;
  }
  .rank2:after{
    border-left-color:#5D6874;
    border-right-color:#5D6874;
  }
  .rank3{
    background: linear-gradient(rgb(233, 202, 169) 0%, #994D00);
  }
  .rank3:before{
    border-bottom: solid 6px #BB8957;
  }
  .rank3:after{
    border-left-color:#994D00;
    border-right-color:#994D00;
  }
  .rank4{
    font-size:11px;
    color: #666666;
    background: linear-gradient(#E3E3E3 0%, #FFFFFF 100%);
  }
  .rank4:before{
    border-bottom: solid 6px #cccccc;
  }
  .rank4:after{
    border-left-color:#FFFFFF;
    border-right-color:#FFFFFF;
  }
  .chart_area_p{
    font-weight:normal;
    text-align:center;
    font-size:9px;
    color:#aaa;
  }

  
ul.search-steps {
    list-style-type: none;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

ul.search-steps li {
    float: left;
    width: 20%;
    text-align: center;
    padding: 0 20px 0 20px;
}

ul.search-steps li a {
    width: 95px;
    height: 95px;
    border-radius: 80px;
    border: 2px solid #00a0e9;
    background: #fff;
    line-height: 15px;
    display: inline-block;
}

ul.search-steps li a:hover {
    background: #00a0e9;
}

ul.search-steps li a:hover span, ul.search-steps li a:hover i.icon:before {
    color: #fff;
}

ul.search-steps li.active a {
    background: #00a0e9;
}

ul.search-steps li.active a i.icon:before {
    color: #fff;
}

ul.search-steps li.active a span {
    color: #fff;
}

ul.search-steps li a span {
    font-size: 11px;
    color: #000;
    line-height: 1.1;
}

ul.search-steps li a i.icon {
    display: block;
    padding-top: 14px;
    padding-bottom: 5px;
}

ul.search-steps li a i.icon:before {
    font-size: 26px;
    color: #00a0e9;

}

ul.search-steps li.icons {

}


@media (max-width: 767px) {
    

    ul.search-steps {
        width: 100%;
        max-width: 100%;
    }

    ul.search-steps li {
        padding: 0;
        text-align: center;
    }

    ul.search-steps li a {
        width: 100%;
        border-radius: 0;
        border: 0;
        border-right: 1px solid #e8e8e8;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
    }
    ul.search-steps li:first-child a {
        border-left: 1px solid #e8e8e8;
    }
}

.frame-wrapper__video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 50px;
  }
  
  .frame-wrapper__video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }