@charset "UTF-8";

/*
Theme Name:20260227_01
Description:20260227_01
Version: 1.0
Author: bellFace
Author URI: https://casestudy.bell-face.com/
*/


/*************************
 *          Layout        *
 *************************/

body {
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: 100%;
}

.mainVisual-inner,
.block-inner {
    width: 994px;
    margin: 0 auto;
}

#header header {
    min-width: 1094px;
    margin: 0 auto;
}

#footer {
    position: relative;
}

.block-wrap {
    padding: 60px 0;
}

#container {
    position: relative;
    margin-top: 62px
}

#main.sub-page {
    margin-top: 65px;
}

.sub-page * {
    box-sizing: border-box;
}

ol,
ul {
    padding: 0;
    list-style-type: none;
}


/*************************
 *          Style        *
 *************************/


/***** Global Style *****/

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

html {
    background: #fff;
}

html body {
    font-size: 14px;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    height: 100% !important;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: #333;
    line-height: 1.7em;
    -webkit-font-smoothing: antialiased;
}

h2,
h3,
h4 {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

* {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

a {
    color: #56C8D5;
}

a img {
    max-width: 100%;
}

button a,
.btn a {
    color: #fff;
    text-decoration: none
}

button a:hover,
.btn a:hover {
    text-decoration: none
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    behavior: url("/css/PIE.htc");
    position: relative;
    padding: 8px 10px;
    font-size: 1em;
    font-weight: normal;
    border: 1px solid #CCC;
    background-color: #fff;
    margin: 0;
}

li {
    list-style: none;
}

input[type="submit"],
button {
    max-width: 400px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    transition: 0.2s;
    background: #56C8D5;
    border: none;
    line-height: 1.6em;
    box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
}

body h2 {
    margin-bottom: 30px;
}

p {
    margin-bottom: 20px;
}

.mini {
    font-size: 0.8em;
    font-weight: normal;
}

.big {
    font-size: 1.3em;
}

#main-content table th {
    vertical-align: middle;
    width: 16.5%;
    text-align: center;
    background: #f7fcfb;
}

#main-content table th.last {
    border-right: none;
}

#main-content table td {
    background: #fff;
    padding: 20px;
    vertical-align: middle;
    text-align: center;
}

#main-content table td.last {
    border-right: none;
}

#main-content {
    width: 994px;
    margin: 0 auto;
    padding: 60px 0;
}

#main-content h3 {
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 25px;
}

.breadcrumb {
    width: 100%;
    background: #f7fcfb;
}

.breadcrumb-inner {
    margin-bottom: 20px;
    line-height: 30px;
    color: #666;
    padding: 24px;
    margin: 0 auto;
    font-size: 0.8em;
}

ol.breadcrumb-inner li {
    float: left;
    line-height: 1;
    color: #09d;
}

ol.breadcrumb-inner li a {
    height: 30px;
    position: relative;
    text-decoration: none;
}

ol.breadcrumb-inner li a:hover {
    text-decoration: underline;
    color: #222;
}

ol.breadcrumb-inner .link:before {
    content: ">";
    padding: 0 10px;
}

#bellfaceBanner {
    display: none;
    position: fixed;
    right: 0;
    top: 45%;
    height: inherit;
    max-height: 45%;
    width: auto;
    z-index: 100;
}

div.sidebar #bellfaceBanner {
    position: static;
    max-height: none;
}


/*** dropdowan ***/

.dropup,
.dropdown {
    position: relative;
}

.dropdown .fa-sort {
    margin-left: 5px;
}

.dropdown-toggle {
    *margin-bottom: -3px;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
    outline: 0;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.dropdown-form .dropdown-menu {
    top: 32px;
}

.dropdown .dropdown-header:hover {
    background: transparent;
    color: #777;
}

#main .dropdown a:link,
#main .dropdown a:visited {
    color: inherit;
    text-decoration: none;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 4px solid #000000;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}

.dropdown .caret {
    margin-top: 8px;
    margin-left: 2px;
}

.dropdown-menu {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 10;
    display: none;
    float: left;
    width: 100%;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 1px solid #DEE5EA;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

.dropdown-menu .divider {
    *width: 100%;
    height: 1px;
    margin: 9px 1px;
    *margin: -5px 0 5px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-bottom: 1px solid #DEE5EA;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    color: #333333;
    white-space: nowrap;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
    color: #38566F;
    text-decoration: none;
    background-color: #F9FDFD;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    outline: 0;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu>.disabled>a,
.dropdown-menu>.disabled>a:hover,
.dropdown-menu>.disabled>a:focus {
    color: #999999;
}

.dropdown-menu>.disabled>a:hover,
.dropdown-menu>.disabled>a:focus {
    text-decoration: none;
    cursor: default;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}

.open {
    *z-index: 1000;
}

.open>.dropdown-menu {
    display: block;
}

.pull-right>.dropdown-menu {
    right: 0;
    left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    border-top: 0;
    border-bottom: 4px solid #000000;
    content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
}

header .dropdown-menu {
    font-size: 0.95em;
}

header .dropdown-menu.pull-right:before {
    right: 12px;
    left: auto;
}

header .dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

header .dropdown-menu.pull-right:after {
    right: 13px;
    left: auto;
}

header .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

.dropdown-form .dropdown-toggle {
    display: inline-block;
    padding: 5px 8px;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fafafa;
    border-color: #ccc;
}

.dropdown-form .dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-form .dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

.dropdown-form .dropdown-menu {
    max-width: 100px;
    background-color: #fff;
    max-height: 150px;
    overflow: scroll;
}

.dropdown-form.category .dropdown-menu {
    max-height: 300px;
    overflow: scroll;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropup .dropdown-submenu>.dropdown-menu {
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -2px;
    -webkit-border-radius: 5px 5px 5px 0;
    -moz-border-radius: 5px 5px 5px 0;
    border-radius: 5px 5px 5px 0;
}

.dropdown-submenu>a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-right: -10px;
    border-color: transparent;
    border-left-color: #cccccc;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
}

.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.dropdown .dropdown-menu .nav-header {
    padding-right: 20px;
    padding-left: 20px;
}


/***** footer *****/

#wrap.service #footer {
    width: 100%;
    min-width: 1100px;
}

#footer {
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 20px 0;
}

.footer-inner {
    width: 100%;
    padding: 0 20px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.footer-menu {
    float: left;
    width: 80%;
    margin-bottom: 0;
}

.footer-menu li {
    float: left;
    margin-right: 26px;
    line-height: 18px;
}

.footer-menu a {
    color: #31313F;
    text-decoration: none
}

.footer-menu img {
    vertical-align: middle;
    margin-right: 10px;
}

.footer-menu .language {
    color: #B0BFC7;
    margin-right: 18px;
    padding-right: 18px;
    border-right: 1px solid #E0E5E7;
    font-size: 0.9em;
}

.footer-menu a:hover {
    text-decoration: underline;
}

.copyright {
    float: right;
    width: 20%;
    color: #31313F;
    text-align: right;
}


/***** Service Page *****/

#wrap.service .block-inner {
    width: 100%;
    min-width: 1100px;
}

#wrap.service #main {
    width: 100%;
    min-width: 1100px;
}


/*** 201708 service3 ***/

#serviceVideo {
    height: 390px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#mv #serviceVideo .inner {
    z-index: 2;
    position: absolute;
    top: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 390px;
}

#serviceVideo .inner h2 {
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
}

#serviceVideo .inner .text {
    line-height: 1.6;
    font-weight: normal;
}

#serviceVideo video {
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    display: block;
}

#mv .news-wrap {
    position: absolute;
    bottom: 40px;
    left: 30px;
    width: 250px;
    height: 250px;
    z-index: 3;
}

#mv .news {
    width: 250px;
    height: 250px;
    background: #fefefe;
    border-radius: 3px;
    padding: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4)
}

#mv .news .news-top .image {
    float: left;
    width: 50px;
    margin-right: 20px;
    border-radius: 40px;
    overflow: hidden;
    height: 48px;
    width: 48px;
}

#mv .news .news-top .text {
    text-align: left;
    font-size: 12px;
    margin-top: 5px;
}

#mv .news .news-top .text .name {
    margin-bottom: 3px !important;
    font-size: 13px;
    font-weight: bold;
}

#mv .news .news-bottom h4 {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    letter-spacing: 2px;
}

#mv .news .news-bottom .text {
    text-align: left;
}

#mv .news .news-top .text .data {
    font-size: 13px;
    color: #aaa;
}

#serviceVideo .btn {
    margin-top: 30px;
}

#serviceVideo .btn a {
    background: #7ED321;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 20px 40px;
    border-radius: 30px;
}

#serviceVideo .btn a:hover {
    opacity: .9;
}

#mv #serviceVideo .div1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-top: 0;
    max-width: 95%;
    width: 700px;
}

.room-image {
    padding: 10px;
    background: #fafafa;
}

.room-image li {
    float: left;
    width: 48px;
    height: 48px;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: 3px;
    overflow: hidden;
}

@media screen and (min-width: 1401px) {
    #mv #serviceVideo {
        background: #F8F8F9;
    }
    #mv #serviceVideo video {
        left: 0;
        right: 0;
    }
}

@media screen and (max-width: 1200px) {
    #mv #serviceVideo .inner .div1 {
        padding: 50px 0;
    }
    #mv .news-wrap {
        bottom: 10px;
    }
    #serviceVideo {
        min-height: 300px;
    }
    #mv #serviceVideo .inner {
        height: auto;
        position: relative;
    }
    #mv #serviceVideo .div1 {
        position: static;
        transform: translate(0, 0);
    }
    #mv .news-wrap {
        position: relative;
        width: 100%;
        background: #fafafa;
        top: 0;
        left: 0;
        height: auto;
    }
    #mv .news {
        height: 220px;
        max-width: calc( 960px + 40px);
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    #mv .news-wrap {
        padding: 10px;
    }
    #mv #serviceVideo {
        height: auto;
    }
    .room-image .inner {
        max-width: calc( 960px + 40px);
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    #mv #serviceVideo .inner {
        position: relative;
        height: auto;
    }
    #serviceVideo video {
        display: none;
    }
    #serviceVideo {
        background: url(https://cdn.bell-face.com/assets/www/imgs/service/service-video-image.png);
        background-position: right center;
        background-size: cover;
    }
}


/** Main Visual **/

#mainVisual {
    background-image: url(img/topsection_bg.jpg);
    background-size: cover;
    position: relative;
    background-position: 50%;
    text-align: center;
    height: 700px;
}

.main-button {
    position: relative;
    top: -20px;
}

div.btn {
    font-size: 1.7em;
}

#mainVisual .mainVisualInner {
    position: absolute;
    height: 370px;
    width: 100%;
    top: 50%;
    margin-top: -160px;
}

#mainVisual .mainVisualInner .btn img {
    width: 470px;
}

#mainVisual h2 {
    color: #fff;
    font-size: 2.28em;
    font-weight: bold;
    line-height: 2.5em;
    margin-bottom: 82px;
}

#mainVisual h2 span {
    font-size: 1.52em;
}

#mainVisual h2 span:before {
    content: "・・・・・・・";
    position: absolute;
    margin-top: -40px;
    font-size: 0.6em;
    letter-spacing: 16px;
    margin-left: 10px;
}

div#mainVisual a.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color: #0caae7;
    padding: 20px 50px;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

div#mainVisual a.hvr-grow:hover,
div#mainVisual a.hvr-grow:focus,
div#mainVisual a.hvr-grow:active {
    color: #fff !important;
    text-decoration: none;
    background: #0EA0D8;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.scroll {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 38px;
}

.scroll img {
    width: 90px;
}


/** Main Content **/


/*** about ***/

#aboutWrap {
    background-image: url(img/intro_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    padding: 102px 0;
    text-align: center;
    color: #fff;
    font-size: 1.3em;
    line-height: 1.8em;
}

#aboutWrap p {
    margin-bottom: 35px !important;
}

#aboutWrap p:last-child {
    margin-bottom: 0 !important;
}

#aboutWrap span.strong {
    display: block;
    color: #00CCF8;
}

#aboutWrap h3 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 60px;
    line-height: 1.8em;
}

#aboutWrap iframe {
    margin-top: 5px;
}


/*** step ***/

#stepWrap {
    padding: 96px 0;
    text-align: center;
    background-image: url(img/step_bg.jpg);
    background-size: cover;
}

#stepWrap h3 {
    margin-bottom: 20px;
}

#stepWrap h3 img {
    max-width: 520px;
}

#stepWrap h4 {
    margin-bottom: 20px;
}

#stepWrap .arrow {
    position: absolute;
    width: 100%;
    text-align: center;
}

#stepWrap .arrow img {
    width: 600px;
}


/*** movie ***/

.mfp-container.mfp-iframe-holder {
    padding-top: 0;
}

.mfp-container.mfp-iframe-holder .mfp-content {
    width: 718px;
}

.mfp-content .mfp-iframe-scaler {
    width: 718px;
}

.mfp-content .mfp-iframe-scaler iframe {
    width: 718px;
    height: 404px;
}

.mfp-iframe video {
    margin: 0;
}

video {
    z-index: 100;
    position: absolute;
    left: 145px;
    top: 33px;
}


/**** fucntion ***/

#functionWrap {
    padding: 146px 0 50px;
    text-align: center;
    background-image: url(img/fucntion_bg.jpg);
    background-size: cover;
    color: #fff;
}

#functionWrap h3 {
    text-align: center;
    font-size: 2.9em;
    margin-bottom: 56px;
    font-weight: bold;
}

#functionWrap .text {
    font-size: 1.25em;
    line-height: 1.8em;
    margin-bottom: 72px;
}

#tabMenu {
    font-size: 1.2em;
    width: 1100px;
    margin: 0 auto;
}

#tabMenu li {
    display: inline-block;
    margin-right: 15px;
    width: 156px;
    height: 156px;
    border: 6px solid #fff;
    border-radius: 110px;
    font-size: 1.3em;
    line-height: 145px;
    letter-spacing: 1px;
    font-weight: bold;
}

#tabMenu li:last-child {
    margin-right: 0
}

#tabMenu li:hover {
    cursor: pointer
}

#tabMenu li.active {
    color: #428895;
    background: #fff;
    border-radius: 110px;
    width: 156px;
    height: 156px;
}

#tabBoxes {
    margin-top: 10px;
}

#tabBoxes .tabBox {
    display: none;
}

.tabBox h3 {
    font-weight: bold;
    font-size: 2.3em;
    margin-bottom: 30px;
    margin-top: 50px;
    line-height: 1.1em;
}

#function-wrap .textWrap {
    width: 452px;
    float: left;
    font-size: 1.1em;
    margin-right: 30px
}

#function-wrap .imageWrap {
    width: 512px;
    float: left
}

#tabBoxes .tabBox.active {
    display: block;
}

#tabBoxes .red {
    color: #d83e4f
}


/**** company ***/

#companyWrap {
    padding: 100px 0 90px;
    text-align: center;
    background-image: url(img/mainVisual.jpg);
    background-repeat: repeat;
    color: #fff;
}

#companyWrap h3 {
    margin-bottom: 60px;
}

#companyWrap h3 img {
    max-width: 800px;
}


/**** price ****/

#conatctWrap #price {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    margin-bottom: 114px;
}

#conatctWrap #price h3 {
    margin-bottom: 60px;
    font-size: 2.6em;
    font-weight: bold;
    line-height: 1em;
}

#conatctWrap #price .priceText {
    font-size: 2.4em;
    margin-bottom: 45px;
    font-weight: bold;
    line-height: 1em;
}

#conatctWrap #price .subText {
    font-size: 1.2em;
    line-height: 1.6em;
    letter-spacing: 1px;
}


/**** contact ***/

#conatctWrap {
    padding: 90px 0 0px;
    text-align: center;
    background-image: url(img/contact_back.jpg);
    background-size: cover;
    color: #fff;
    width: 100%;
}

#conatctWrap .lead {
    margin-bottom: 100px;
}

#conatctWrap .block-inner-liquid {
    width: 100%;
    background-image: url(img/contact-center.png);
    background-position: 50%;
    background-size: cover;
}

#conatctWrap .block-inner-liquid .block-inner {
    margin: 0 auto;
    width: 992px;
    min-width: 992px;
    padding: 45px 0 30px;
    background-size: cover;
}

#conatctWrap .block-inner-liquid .conatctBlockTel {
    width: 50%;
    float: left;
    text-align: left;
}

#conatctWrap .block-inner-liquid .conatctBlockTel .tel img {
    width: 340px;
}

#conatctWrap .block-inner-liquid .conatctBlockDocument {
    width: 50%;
    float: left;
    text-align: left;
    padding-left: 100px;
}

#conatctWrap .block-inner-liquid .documentButton {
    padding-left: 30px;
}

#conatctWrap .block-inner-liquid .documentButton img {
    max-width: 230px;
}

#conatctWrap h3,
#conatctWrap .text {
    margin-bottom: 10px;
}

#conatctWrap h3 img {
    width: 300px;
}

#conatctWrap .text {
    width: 430px;
}

.demoForm {
    padding-top: 0;
    padding-bottom: 70px;
}

.demoForm .lead {
    font-size: 1.1em;
    line-height: 1.8em;
}

.demoForm #form-wrap {
    width: 680px;
}

.demoForm .sub {
    font-size: 0.95em;
}

#form-wrap {
    width: 100%;
    margin: 0 auto;
}

#form-wrap h3 {
    margin-bottom: 30px;
}

#form-wrap .lead {
    margin-bottom: 20px;
}

#form-wrap h2 {
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: solid 1px #fff;
    width: 300px;
    margin: 0 auto 40px;
}

#form-wrap #form_order,
#form_demo {
    width: 680px;
    margin: 0 auto;
    font-size: 1.1em;
}

#form_demo table {
    width: 100%;
}

#form_demo th,
#form_demo td {
    color: #fff;
}

#form_demo .small {
    margin-bottom: 10px
}

#form_demo .must,
.must_lead {
    font-size: 1.1em;
    color: #d8464e;
    margin-left: 3px
}

#subscription-wrap #form-wrap .lead {
    margin-bottom: 20px;
    font-size: 0.8em
}

#subscription-wrap #form-wrap h2 {
    margin-bottom: 10px;
}

#form-wrap .col-xs-2,
#form_order .col-xs-2 {
    width: 76px;
    display: inline-block;
}

#form-wrap textarea {
    height: 75px;
    min-height: 75px;
}

#wrap select {
    background-size: 8px;
    background-position: 0 50% right;
}

#form-wrap .col-xs-1,
#form_order .col-xs-1 {
    width: 26px;
    display: inline-block;
}

#form-wrap .submit-wrap {
    margin-top: 20px;
}

#form-wrap .submit-wrap input {
    width: 300px;
    background: #d8464e;
    font-size: 0.9em;
}

#form-wrap table th {
    text-align: right;
    width: auto;
    margin-right: 30px;
    padding-bottom: 20px;
    padding-top: 0px;
    vertical-align: top;
    line-height: 40px;
}

#form-wrap table td {
    text-align: left;
    padding-bottom: 20px;
    padding-top: 0px;
}

#form-wrap table td {
    padding-bottom: 0
}

#form-wrap table td span {
    font-size: 14px;
}

#form-wrap table td .subcomment {
    font-size: 12px;
    color: #ccc;
}

#form-wrap input {
    width: auto;
}

input::-webkit-input-placeholder {
    color: #ccc !important;
}

input:-moz-placeholder {
    color: #ccc !important;
}

#form_demo th {
    padding-right: 15px;
}

#subscription-wrap #form-wrap #form_order table td {
    padding-bottom: 0
}


/****** sub-page ******/

.sub-page {
    box-sizing: border-box;
}

.sub_header {
    background: #429FA9;
}

.sub_header h2 {
    width: 994px;
    margin: 0 auto;
    color: #fff;
    font-size: 2em;
    font-weight: normal;
    padding: 30px 10px 28px;
    line-height: 36px;
    max-width: 100%
}

.company #main-content table,
.form-page #main-content table {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.company #main-content tr,
.form-page #main-content tr {
    border-top: 1px solid #eee;
}

.company #main-content th,
.form-page #main-content th {
    width: 20%;
}

.form-page #main-content th {
    text-align: left;
    width: 30%;
    padding: 15px;
}

.form-page #main-content td {
    width: 70%;
    padding: 15px;
}

.company #main-content td,
.form-page #main-content td {
    text-align: left;
    padding-left: 30px;
}

.company .company-vision {
    margin-bottom: 60px;
    padding: 30px;
    border: 8px solid #eee;
}

.form-page #form_order,
.application form {
    width: 100%;
    margin: 0 auto;
    font-size: 0.95em;
}

.application form .input_error {
    color: #FF0000;
}

.application form .input_error:before {
    content: "※";
}

.form-page #form_order p {
    margin-bottom: 0 !important;
    line-height: 2em;
}

.form-page #form_order input {
    width: auto;
}

.form-page #form_order .zip {
    margin-bottom: 15px;
}

.form-page #form_order .zip>* {
    margin: 0 5px;
    display: inline-block;
}

.form-page h3 span {
    font-size: 0.7em;
    margin-left: 10px;
}

.form-page h3 input {
    margin-right: 5px;
}

input::-webkit-input-placeholder {
    color: #ccc !important;
}

input:-moz-placeholder {
    color: #ccc !important;
}

#main h3.qaa-q {
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    line-height: 1.3;
}

#main h3.qaa-q span {
    margin-left: 0;
}

#main h3.qaa-q span:before,
#main h3.qaa-q span:after {
    display: none;
}

.qaa-q {
    background: #f7fcfb;
    line-height: 46px;
}

.qaq-mark {
    background: #56C8D5;
    color: #fff;
    font-size: 14px;
    padding: 17px 15px 16px;
    margin-right: 20px;
    font-weight: bold;
}

.qaa-block {
    margin-bottom: 50px;
    line-height: 1.6em;
}

.mast {
    background: #F43A4A;
    border-radius: 3px;
    padding: 5px;
    font-size: 0.8em;
    color: #fff;
    margin-right: 10px;
}

.submit-wrap {
    text-align: center;
    font-size: 1.2em;
    margin-top: 40px;
}

.submit-wrap>div {
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

.submit-wrap .cancel,
.submit-wrap .back {
    margin-right: 10px;
    background: #888;
}

.submit-wrap .cancel a,
.submit-wrap .back a .confirm-wrap {
    width: 80%;
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
}

.footer-bottom>div {
    width: 50%;
    float: left;
}

.fotter-submenu {
    text-align: left;
    font-size: 0.97em;
}

#footer .fotter-submenu a {
    color: #777;
}


/*** application ***/

.application section {
    padding-top: 50px;
}

.application .confirm #main-content h3 {
    font-size: 1.2em;
    padding-top: 30px;
    margin-bottom: 10px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 0;
}

.application .confirm section {
    padding-top: 0px;
}

.application section h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.application table th {
    width: 35%;
    text-align: left;
    padding-left: 30px;
}

.application table td {
    text-align: left;
}

.application .zip {
    margin-bottom: 15px;
}

.application .date td>div {
    float: left;
    width: 80px;
}

.form-list table {
    table-layout: fixed;
}

.form-list .site-cell1 {
    width: 5%;
    padding: 0;
}

.form-list .site-cell2 {
    width: 60%;
}

.form-list .site-cell3 {
    width: 30%;
}

.form-list .staff-cell1 {
    width: 5%;
    padding: 0;
}

.form-list .staff-cell2 {
    width: 33%;
}

.form-list .staff-cell3 {
    width: 40%;
}

.form-list .staff-cell4 {
    width: 20%;
}

.form-list button {
    background: #f1f1f1;
    font-weight: normal;
    padding: 6px 15px;
    color: #666;
    font-size: 0.95em;
    box-shadow: none;
    border: 1px solid #bbb;
}

.form-list button:hover {
    cursor: pointer;
}

.form-list .add_button {
    margin-top: 5px;
}

.form-list .add_button:hover {
    cursor: pointer;
}

.form-list td,
.form-list tr,
.form-list table {
    background: #fff;
    border: none;
}

.application .form-list td,
.application .form-list th {
    padding-left: 15px;
    padding-right: 0px;
}

.application table td input {
    margin-right: 5px;
}

.option_h {
    font-weight: bold;
    font-size: 1.1em;
}

.option_h input {
    margin-right: 10px;
}

.option-section {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #aaa;
    margin-bottom: 15px;
    background: #fafafa;
}

.option-section label:hover {
    cursor: pointer;
}

.option_inner {
    margin-top: 15px;
    border: 1px solid #ccc;
    display: none;
}

.option_inner table {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

.demand .checked table {
    opacity: 0.5;
}

.rule {
    max-height: 300px;
    overflow: scroll;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    font-size: 0.9em;
}

.rule ul {
    margin-bottom: 10px;
}

.rule div {
    margin-bottom: 15px;
}

.rule h5 {
    margin-bottom: 5px;
}

#main-content .consent {
    text-align: center;
    padding-top: 30px;
}


/*** sub-page ***/

.sub-page2 #main-content {
    padding-top: 40px;
}

.sub-page2 #main-content h3 {
    margin-bottom: 35px;
}

.privacy dt {
    display: list-item;
    list-style-type: none;
    font-weight: bold;
    font-size: 1.15em;
    border-bottom: 1px solid #eee;
    list-style-position: inside;
    margin-bottom: 10px;
}

.privacy dd {
    margin-bottom: 20px;
    line-height: 1.5em;
    margin-left: 0;
}

.privacy .main-inner ol>li {
    list-style-type: none;
    list-style-position: inside;
    counter-increment: cnt;
    margin-bottom: 7px;
    text-indent: -27px;
    padding-left: 27px;
}

.privacy .main-inner ol>li:before {
    display: marker;
    padding-right: 8px;
    content: "(" counter(cnt) ")";
}

.privacy .main-inner ol>li>ul {
    padding-left: 27px;
}

.sla .border {
    border: 1px solid #ccc;
    padding: 10px 20px;
    background: #fafafa
}

.sla ul {
    margin-bottom: 20px
}

.terms .main-inner ol>li:before {
    padding-right: 8px;
    content: counter(cnt) ".";
}

.terms dt {
    display: block;
    list-style-type: none;
    font-weight: bold;
    font-size: 1.15em;
    border-bottom: 1px solid #eee;
    list-style-position: inside;
    margin-bottom: 10px;
}

.terms #main-content {
    position: relative;
}

.terms .download {
    text-align: right;
    position: absolute;
    top: 40px;
    right: 0;
}

.terms .download button {
    width: 300px;
}

.terms .download a {
    color: #fff;
    text-decoration: none;
}

.home #blog-wrap {
    padding: 40px 0;
}

.home #blog-wrap .new-list article {
    width: 233px;
    margin-bottom: 0;
    margin-right: 20px;
}

.home #blog-wrap .new-list article:last-child {
    margin-right: 0;
}

.home #blog-wrap .new-list .image a {
    height: auto;
}

#blog-wrap .lead {
    margin-bottom: 30px;
    color: #666;
}

#main #main-content .lead {
    margin-bottom: 20px !important
}

#blog-wrap h2 {
    font-weight: bold;
    font-size: 2em;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    width: 80%;
    float: left;
    margin-bottom: 0;
}

.blog-header {
    border-bottom: 1px solid #aaa;
    margin-bottom: 5px;
    padding-bottom: 6px;
}

.blog-header .more_link {
    width: 20%;
    text-align: right;
    float: right;
    line-height: 39px;
    font-size: 1.1em;
}

.blog-header .more_link i {
    margin-left: 10px;
}

#blog-wrap .title {
    font-weight: bold;
    margin-top: 5px;
}

#blog-wrap .text {
    margin-top: 10px;
    color: #666;
}

#blog-wrap .text p {
    margin-bottom: 0 !important;
}

#blog-wrap .excerpt-read-more {
    display: block;
    text-align: right;
}

#blog-wrap a.excerpt-read-more {
    color: #666;
    margin-top: 5px;
}

#blog-wrap img {
    height: 111px
}


/******** blog ********/

#main-content .primary {
    width: 692px;
    float: left;
}

#main-content .primary img {
    max-width: 100%;
    height: auto;
    display: block;
}

.blog .main-inner,
.info .main-inner {
    background: #f1f1f1
}

.sidebar {
    width: 268px;
    float: right;
    margin-top: 0;
}

.sidebar .banner-wrap>div {
    margin-bottom: 15px;
}

.sidebar .widget {
    margin: 0;
    padding: 0
}

.blog .new-list article {
    width: 48%;
    float: left;
    margin-bottom: 30px;
    position: relative;
}

.blog .new-list article:nth-child(odd) {
    margin-right: 4%;
}

.blog .category {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 7px;
    background: #666;
    padding: 0px 8px;
    color: #fff;
    font-size: 0.8em;
}

.blog .category a:link,
.blog .category a:visited {
    color: #fff;
    text-decoration: none;
}

.blog .list-middle {
    color: #888888;
    font-size: 0.9em;
    margin-top: 5px;
}

.blog .date {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    width: 60%;
    float: left;
}

.blog .sns-count {
    width: 100%;
    text-align: left;
}

.blog .sns-count>div {
    display: inline-block;
    font-weight: bold;
}

.blog .tw-count {
    margin-right: 10px;
}

.blog .sns-count i {
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 0.9em;
    text-align: center;
    line-height: 20px;
    margin-right: 5px;
}

.blog .fa-twitter {
    background: #55acee;
}

.blog .fa-facebook {
    background: #3b5998;
}

.blog .new-list .title {
    font-size: 1.1em;
    margin-top: 10px;
}

.pickup-wrap {
    margin-bottom: 30px;
    position: relative;
}

.pickup-wrap .bx-viewport {
    border: 1px solid #fff;
}

.pickup-wrap li {
    position: relative;
}

.pickup-wrap .image a {
    display: block;
    height: 333px;
}

.blog #main-content {
    padding-top: 30px;
}

.blog #main-content .image {
    overflow: hidden;
    background: #000;
}

.blog .new-list .image a {
    display: block;
}

.blog #main-content .image img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: all 0.2s linear;
}

.blog #main-content .list-block .image {
    border: 1px solid #fff;
}

.blog #main-content .list-block:hover .image img,
.blog #main-content .pickup-wrap:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.2s linear;
    opacity: 0.7;
}

.blog .cloudsales {
    background: #6fa72e;
}

.blog .casestudy {
    background: #d23437;
}

.blog .salesguide {
    background: #9550a7;
}

.blog .bellnews {
    background: #438bcc;
}

.blog .knowhow {
    background: #ea840c;
}

.blog .pickup-label {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    background-color: rgb(248, 140, 0);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
    display: inline-block;
    position: absolute;
    color: #fff;
    padding: 8px 14px 6px;
    top: 10px;
    left: -1px;
    letter-spacing: 1px;
    z-index: 11;
    font-weight: bold;
}

.blog .pickup-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 25px;
    color: #fff;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.91)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.91) 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e8000000', GradientType=0);
    /* IE6-9 */
}

.blog .pickup-bottom .date {
    color: #fff;
}

.blog .pickup-bottom a {
    color: #fff;
    text-decoration: none
}

.blog .pickup-bottom a:hover {
    color: #eee;
    text-decoration: none
}

.blog a,
.info a {
    color: #222;
    text-decoration: none
}

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

.blog .pickup-bottom .text p {
    margin-bottom: 0 !important;
}

.blog .pickup-bottom .title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3px;
    -webkit-text-shadow: 0 1px 1px #000;
    -moz-text-shadow: 0 1px 1px #000;
    -ms-text-shadow: 0 1px 1px #000;
    -o-text-shadow: 0 1px 1px #000;
    text-shadow: 0 1px 1px #000;
}

.blog .pickup-bottom .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.blog .popular-posts ul li {
    counter-reset: wpp-ranking;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.blog .sidebar li,
.single-infop .sidebar li {
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
}

.blog .popular-posts ul li img {
    border: 1px solid #fff;
}

.blog .popular-posts ul li:before {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    color: #FFF;
    text-align: center!important;
    opacity: 0.999;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    line-height: 20px;
    width: 20px;
    height: 20px;
    background-color: #3E454C;
}

.blog .popular-posts .number1:before {
    background: #cb9044;
    content: "1";
}

.blog .popular-posts .number2:before {
    background: #8e8e8e;
    content: "2";
}

.blog .popular-posts .number3:before {
    background: #745b3b;
    content: "3";
}

.blog .popular-posts .number4:before {
    content: "4";
}

.blog .popular-posts .number5:before {
    content: "5";
}

.single .single-title {
    font-weight: bold;
    font-size: 2em;
    line-height: 1.6em;
}

.single .byline {
    position: relative;
    margin-top: 15px;
    margin-bottom: 20px;
}

.single .blog .date {
    float: none;
    display: inline-block;
}

.single .blog .category {
    position: relative;
    left: 0;
}

@media screen and (max-width:900px) {
    #main-content .primary {
        width: 70%;
        margin-right: 3%;
    }
    #main-content .sidebar {
        width: 27%;
    }
}

@media screen and (max-width:768px) {
    .blog#main {
        overflow-x: hidden;
    }
    .blog * {
        box-sizing: border-box;
    }
    .blog #main-content .primary {
        width: 100%;
    }
    .blog #main-content .sidebar {
        width: 100%;
    }
    .blog .new-list article {
        width: 100%;
    }
    .blog .new-list .image a {
        height: auto;
    }
    .blog .sidebar {
        width: 100%;
        margin-top: 20px;
    }
    .blog .banner-wrap img {
        width: 100%;
    }
    .blog .yarpp-related {
        padding: 0;
    }
    .blog .yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail {
        width: 46%;
    }
    .blog .yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail:nth-child(odd) {
        margin-right: 5%;
    }
    .blog #main-content .yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 10px;
    }
    .single .blog .single-title {
        font-size: 1.6em;
    }
    .single .blog article .entry-content h1 {
        font-size: 1.2em;
    }
    #main-content .blog h3 {
        font-size: 1.3em;
    }
}

.fb_iframe_widget>span {
    vertical-align: baseline !important;
}

.sns-buttons {
    text-align: right;
    width: 100%;
    margin-top: 20px;
}

.sns-bottom {
    text-align: center;
    margin-bottom: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

.sns-buttons li,
.sns-bottom li {
    display: inline-block;
    margin-right: 5px;
}

.single article .entry-content {
    font-size: 15px;
    line-height: 1.9em;
    padding-bottom: 40px
}

.single article .entry-content p {
    margin-bottom: 30px !important;
}

.single article .entry-content h1 {
    padding: 10px;
    background: #71C4D3;
    font-weight: bold;
    font-size: 1.5em;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 25px;
}

.single article .entry-content h2 {
    padding: 15px 0;
    background-color: inherit;
    border-bottom-width: 2px;
    font-size: 1.7em;
}

.single article .entry-content h2:after {
    content: "";
    border-bottom: 2px solid #00aced!important;
    display: block!important;
    position: absolute!important;
    bottom: -2px!important;
    width: 6rem!important;
}

.single #main-content article .entry-content h3 {
    border-left: 3px solid #4A9ED7!important;
    padding: 13px 13px 13px 17px!important;
    font-size: 22px!important;
}

.single #main-content article .entry-content h4 {
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 25px;
}

.single #main-content article .entry-content h5 {
    font-size: 1.4em;
    margin-top: 50px;
    margin-bottom: 25px;
}

.single #main-content article .entry-content h1,
.single #main-content article .entry-content h2,
.single #main-content article .entry-content h3,
.single #main-content article .entry-content h4,
.single #main-content article .entry-content h5 {
    margin-top: 0;
}

.single-infop .byline {
    margin-top: 5px;
}

.blog #main-content .sidebar .side-about h3 {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    background: #2c4b50;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.4em;
}

.side-about .btn a {
    color: #fff
}

.side-about .btn a:hover {
    text-decoration: none
}

.blog .sidebar .sa-content {
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 15px;
    margin-bottom: 20px;
}

.sa-content .btn {
    width: 100%;
    display: block;
    margin-top: 5px;
}

.sa-content .btn {
    position: relative;
    padding: 20px
}

.sa-content .btn a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 40px
}

.sa-content .detail {
    background: #f8bb00;
}

.sa-content .contact {
    background: #f88c00;
}

.yarpp-related h3 {
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}

.yarpp-related {
    padding: 0 1.5em;
}

.cat-title {
    font-weight: bold;
    font-size: 1.8em;
}


/***** メルマガ *****/

.mm-image {
    margin: 0px auto 0px;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
    background: #F7FDFB;
    background-image: url(img/mm-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-position: 0 50px;
}

.mmagazine #main-content {
    width: 884px;
    margin: 0 auto;
}

.mmagazine #main-content h3 {
    font-weight: bold;
}


/***** info *****/

.info.blog .new-list article {
    width: 100%;
    margin-right: 0;
}

.info #main-content .primary img {
    position: relative;
}

.info.blog .new-list .image a {
    height: 280px;
}

.wp-pagenavi {
    text-align: center
}

#main-content .wp-pagenavi>* {
    background: #fff;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

#main-content .wp-pagenavi a:hover {
    text-decoration: none;
    background: #fff;
    border: 1px solid #71C4D3
}

#main-content .current {
    background: #71C4D3;
    color: #fff;
    border: 1px solid #71C4D3
}

#main-content .wp-pagenavi .pages {
    width: auto;
    padding: 0 20px;
    display: inline-block;
    background: #fff;
    vertical-align: top;
}


/***** 関連記事 *****/

.yarpp-related .yarpp-thumbnails-horizontal {
    overflow: hidden
}

.yarpp-related .yarpp-thumbnails-horizontal .yarpp-thumbnail {
    width: 50%;
    display: block;
    float: left;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.info .yarpp-related {
    display: none
}

.info .sns-bottom {
    margin-bottom: 0;
    border-bottom: 0
}

.yarpp-thumbnail-title {
    float: left;
    width: 192px;
}

#main-content .yarpp-thumbnail img {
    height: 100px !important;
    display: block;
    width: 100px !important;
    background: #aaa;
    border: 1px solid #eee;
    margin-right: 10px;
    float: left;
}

iframe[name="google_conversion_frame"] {
    position: absolute;
    height: 0
}


/***** subpage patternB *****/


/***** subpage patternB *****/

.aboutus#main,
#wrap.aboutus #header {
    min-width: 992px;
}

.aboutus h3 img {
    height: 70px;
}

.aboutus.subpageB .sub_header {
    background: url(img/about_bg.jpg);
    background-size: cover;
    height: 330px;
    text-align: center;
}

.aboutus.subpageB .sub_header h2 {
    line-height: 430px;
}

.aboutus.subpageB .main-outer {
    background: #F4F4F4
}

.aboutus.subpageB .main-inner {
    width: 992px;
    margin: 0 auto;
    background: #fff;
    color: #252525;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

.aboutus .pageBlock {
    padding: 45px 0 65px;
}

.aboutus .vision {
    text-align: center;
}

.aboutus .vision h3 {
    margin-bottom: 90px;
}

.aboutus .vision h4 {
    font-size: 2em;
    line-height: 1.8em;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

.aboutus .vision .text {
    width: 992px;
    margin: 124px auto 0;
    background: #F4F4F4;
    padding: 84px 0;
}

.aboutus .vision .text h5 {
    font-size: 2.36em;
    margin-bottom: 65px;
    line-height: 1em;
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

.aboutus .vision .textInner {
    width: 745px;
    margin: 0 auto;
    text-align: left;
    font-size: 1.185em;
    line-height: 1.9em;
    letter-spacing: 1px;
}

.aboutus .vision .nameWrap {
    text-align: right;
    padding-right: 30px;
    margin-top: 80px;
}

.aboutus .vision .nameWrap img {
    height: 26px;
}

.aboutus .members {
    padding: 0 40px;
}

.aboutus .members h3 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 70px;
}

.aboutus .members .menberBlock {
    width: 284px;
    float: left;
    margin-right: 30px;
    margin-bottom: 50px;
}

.aboutus .members .menberBlock img {
    width: 100%;
}

.aboutus .members .menberBlock:last-child {
    margin-right: 0;
}

.aboutus .members .profileHeader {
    text-align: center;
    margin-top: 17px;
}

.members .profileTextInner {
    min-height: 248px;
}

.aboutus .members .subName {
    font-style: italic;
    margin-bottom: 17px;
}

.aboutus .members .name {
    font-weight: bold;
    font-size: 1.4em;
    margin-bottom: 20px;
}

.aboutus .members .profileText {
    font-size: 1em;
    line-height: 2em;
}

.aboutus .members .profileText p {
    margin-bottom: 40px;
}

.aboutus .members .profileText a {
    text-decoration: none;
}

.aboutus .members .profileText .btn a,
.aboutus .members .profileText .btn a:visited {
    background: #56C8D5;
    border-radius: 40px;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 15px;
    display: block;
    transition: .3s;
    color: #fff;
}

.aboutus .members .profileText .btn a:hover,
.aboutus .members .profileText .btn a:focus,
.aboutus .members .profileText .btn a:active {
    color: #fff;
    opacity: 0.8;
    transition: .3s
}

.aboutus .coporate {
    width: 892px;
    margin: 0 auto;
}

.aboutus .coporate p {
    color: #333;
}

.aboutus .coporate h3 {
    text-align: center;
    margin-bottom: 76px;
}

.aboutus .coporate ul {
    width: 421px;
    margin-right: 50px;
    font-size: 1.1em;
    line-height: 1.6em;
    float: left;
}

.aboutus .coporate ul:last-child {
    margin-right: 0;
}

.aboutus .coporate li {
    padding: 30px 0;
    border-bottom: 1px solid #ccc;
}

.aboutus .coporate li:before,
.aboutus .coporate li:after {
    content: " ";
    display: table;
}

.aboutus .coporate li:after {
    clear: both;
}

.aboutus .coporate li {
    *zoom: 1;
}

.aboutus .coporate .label {
    width: 140px;
    margin-bottom: 5px
}

.aboutus .coporate p {
    margin-top: 5px;
    margin-bottom: 0 !important;
}

.aboutus .coporate .text {
    float: left;
    width: 445px;
}

.contactIndex {
    width: 40%;
    float: left;
}

.contactFrom {
    float: right;
    width: 50%;
    padding: 0px 30px;
}

#mainVisual h2 {
    margin-bottom: 20px
}


/*** features ***/

.features .header-cv .btn,
.price .header-cv .btn,
.case .header-cv .btn {
    margin: 0;
    padding: 0;
    border: 0;
    margin-left: 5px
}

.features .movie {
    margin: 50px 0;
}

.features .inner {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.features .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


/*** prize ***/

#prize .container {
    padding: 54px 0;
    line-height: 1.5;
    width: 1025px;
    max-width: 100%;
}

#prize .main-section {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #ddd;
}

#prize .main-section .text {
    text-align: justify;
    margin-bottom: 20px;
}

#prize .main-section .image {
    padding-left: 40px;
    text-align: center;
}

@media only screen and (max-width: 828px) {
    #prize .main-section .image {
        padding-left: 15px;
    }
}

#prize .main-section .image img {
    max-width: 100%;
}

#prize .image-section {
    margin-bottom: 0;
}

#prize .image-section div {
    margin-bottom: 20px;
    text-align: center;
}

#prize .image-section img {
    max-width: 100%;
}

#prize .image-section .row:first-child {
    margin-bottom: 30px;
}

#mv .mv_bg1 img,
#mv .mv_bg2 img,
#mv .mv_bg3 img {
    -ms-transition: 0;
    transition: 0;
}

.english #mv .inner {
    text-align: center;
}

.english #mv .btn {
    background: #000000;
    border: 2px solid #fff;
    display: inline-block;
    text-align: center;
    color: #fff;
    border-radius: 45px;
    width: 100%;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    transition: .3s;
    margin-top: 20px;
    padding: 0;
}

.english #mv .btn:hover {
    opacity: .7;
}

.english #mv .btn a {
    padding: 22px 30px;
    line-height: 60px;
}

.english #mv .btn a:hover {
    color: #fff;
}

.english #mv .div1 {
    padding-top: 150px;
}

.english #mv .div1 .p1 {
    margin-bottom: 30px !important;
}

.english #mv .div1 .p3 {
    margin: 20px 0 20px;
}

.english h2,
.english h3 {
    font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
    line-height: 1.4;
}

.english .scene_list .p2 {
    line-height: 1.4;
}


/* 新規テンプレート01 */

.customHeader {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    background-color: transparent;
}

.customHeader h2 {
    padding: 50px 0 48px;
}

.customHeader .breadcrumb {
    background-color: #f9f9f9;
}

a.event {
    position: relative;
}

a.event:after {
    content: "毎日開催中";
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: #ea6101;
    padding: 4px 6px;
    border-radius: 11.5px;
    white-space: nowrap;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

@media screen and (min-width: 1024px) {
    .scroll-down a.event:after {
        top: -3px;
        font-size: 9px;
        padding: 3px 5px;
    }
}

@media screen and (max-width: 1024px) {
    a.event:after {
        position: relative;
        top: -1px;
        left: 10px;
        right: 0;
        font-size: 10px;
        padding: 4px 6px;
    }
}

.panels .roboto {
    color: white;
    font-weight: 100;
}

.white>.fw-normal {
    color: white;
    font-weight: 100;
}

p.casestudy-desc {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 40px !important;
}

@media screen and (max-width: 767px) {
    p.casestudy-desc {
        text-align: left;
        font-size: 14px;
        margin-bottom: 20px !important;
    }
}

.casestudy_v2_block {
    width: 100%;
    margin: 0 0 30px;
}

@media screen and (min-width: 767px) {
    .casestudy_v2_block {
        width: 49%;
        margin: 4% 0 0;
    }
    .casestudy_v2_list .casestudy_v2_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media screen and (min-width: 1000px) {
    .casestudy_v2_list {
        justify-content: flex-start;
        align-items: normal;
    }
    .casestudy_v2_block {
        width: 32%;
        margin: 2% 2% 2% 0;
    }
    .casestudy_v2_block:nth-child(3n) {
        margin-right: 0;
    }
}

.casestudy_v2_img img {
    max-width: 100%;
}

.casestudy_v2_title,
.casestudy_v2_no {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    text-align: left;
    margin: 10px 0 0;
}

h1.casestudy_v2_title {
    font-size: 32px;
    margin: 0;
}

@media screen and (max-width: 767px) {
    h1.casestudy_v2_title {
        font-size: 22px;
    }
}

.casestudy_v2_tags {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0 0;
}

.casestudy_v2_tags li {
    margin: 10px 10px 0 0;
}

.casestudy_v2_tags a {
    display: inline-block;
    padding: 2px 5px;
    background-color: #98d0ff;
    border-radius: 2px;
    font-weight: bold;
}

.casestudy_v2_contact {
    border-top: 1px solid #001400;
    padding: 25px 0 0;
    margin: 40px 0;
}

.casestudy_v2_contact dl {
    margin: 0 0 0 45px;
    padding: 11px 0 11px 115px;
    background: url(./assets/images/icon/icon.png) no-repeat left center / 69px;
}

.casestudy_v2_contact dt {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px;
}

.casestudy_v2_contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 510px;
    height: 46px;
    border-radius: 4px;
    background: #767c85;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 30px auto 0;
}

.casestudy_v2_contact a.is-contact {
    background: #ee6a0d;
    position: relative;
}

.casestudy_v2_contact a.is-contact::after {
    content: "";
    position: absolute;
    color: #fff;
    padding-bottom: 8px;
    padding-right: 8px;
    border-right: solid;
    border-bottom: solid;
    border-width: 1px;
    transform: rotate(-45deg) translate(0, -70%);
    top: 50%;
    right: 32px;
}

@media screen and (max-width: 767px) {
    .casestudy_v2_contact {
        margin-top: 0;
    }
    .casestudy_v2_contact dl {
        margin: 0;
        padding: 0 0 0 70px;
        background: url(./assets/images/icon/icon.png) no-repeat left top / 50px;
    }
}

.casestudy_v2_detail .casestudy_v2_img {
    margin: 40px 0 0;
}

@media screen and (max-width: 767px) {
    .casestudy_v2_detail .casestudy_v2_img {
        margin: 20px 0;
    }
}


/* */

p.casestudy-desc {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    margin-bottom: 40px !important;
}

@media screen and (max-width: 767px) {
    p.casestudy-desc {
        text-align: left;
        font-size: 14px;
        margin-bottom: 20px !important;
    }
}

.casestudy_v2_block {
    width: 100%;
    margin: 0 0 30px;
}

@media screen and (min-width: 767px) {
    .casestudy_v2_block {
        width: 49%;
        margin: 4% 0 0;
    }
    .casestudy_v2_list .casestudy_v2_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media screen and (min-width: 1000px) {
    .casestudy_v2_list {
        justify-content: flex-start;
        align-items: normal;
        min-width: 1040px;
    }
    .casestudy_v2_block {
        width: 32%;
        margin: 2% 2% 2% 0;
    }
    .casestudy_v2_block:nth-child(3n) {
        margin-right: 0;
    }
}

.casestudy_v2_img img {
    max-width: 100%;
}

.casestudy_v2_title,
.casestudy_v2_no {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 700;
    text-align: left;
    margin: 10px 0 0;
}

h1.casestudy_v2_title {
    font-size: 32px;
    margin: 0;
}

@media screen and (max-width: 767px) {
    h1.casestudy_v2_title {
        font-size: 22px;
    }
}

.casestudy_v2_tags {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0 0;
}

.casestudy_v2_tags li {
    margin: 10px 10px 0 0;
}

.casestudy_v2_tags a {
    display: inline-block;
    padding: 2px 5px;
    background-color: #98d0ff;
    border-radius: 2px;
    font-weight: bold;
}

.casestudy_v2_contact {
    border-top: 1px solid #001400;
    padding: 25px 0 0;
    margin: 40px 0;
}

.casestudy_v2_contact dl {
    margin: 0 0 0 45px;
    padding: 11px 0 11px 115px;
    background: url(./assets/images/icon/icon.png) no-repeat left center / 69px;
}

.casestudy_v2_contact dt {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px;
}

.casestudy_v2_contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 510px;
    height: 46px;
    border-radius: 4px;
    background: #767c85;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 30px auto 0;
}

.casestudy_v2_contact a.is-contact {
    background: #ee6a0d;
    position: relative;
}

.casestudy_v2_contact a.is-contact::after {
    content: "";
    position: absolute;
    color: #fff;
    padding-bottom: 8px;
    padding-right: 8px;
    border-right: solid;
    border-bottom: solid;
    border-width: 1px;
    transform: rotate(-45deg) translate(0, -70%);
    top: 50%;
    right: 32px;
}

@media screen and (max-width: 767px) {
    .casestudy_v2_contact {
        margin-top: 0;
    }
    .casestudy_v2_contact dl {
        margin: 0;
        padding: 0 0 0 70px;
        background: url(./assets/images/icon/icon.png) no-repeat left top / 50px;
    }
}

.casestudy_v2_detail .casestudy_v2_img {
    margin: 40px 0 0;
}

@media screen and (max-width: 767px) {
    .casestudy_v2_detail .casestudy_v2_img {
        margin: 20px 0;
    }
}