/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 1199px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }


        /* submenu */
        .page_item {
            width: 100%;
        }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* =============================================================== */
/* Media Queries
================================================================ */


/* Higher than 1200 (desktop devices) */
@media only screen and (min-width: 1200px) {
    .flexslider {height: 400px;}
    #portfolio-wrapper {min-height: 400px;}
    .project .flexslider {min-height: 1px; margin-bottom: 20px;}
}

/* Smaller than standard 1200 (devices and browsers) */
@media only screen and (max-width: 1199px) {
    .flex-direction-nav a {
        margin: -30px 0 0;
        opacity: 0.7!important;
    }
    #page-title {
        padding: 0 10px 10px;
    }
    #page-title .container,
    #page-title .columns {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}


/* Tablet Portrait size to standard 1200 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #header h1 span {display: none;}
    #header .container {
        display: table;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    #header .container .five.columns {
        width: auto;
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
    #header .container .eleven.columns {
        width: auto;
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
    #nav ul li li {
        margin-left: 15px;
    }
    .slider_description {margin-top: 90px;}
    .slider_description h2 {margin-bottom: 15px; font-size: 20px;}
    .slider_description p {display: none;}
    .slider_description h2 b {display: none;}
    .client-logo img {width: 148px; height: auto;}
    .post-title h2 a {padding-left: 145px;}
    .latest-post-blog, .latest-post {height: 65px;}
    .flickr-widget-blog a {width: 57px; height: 57px;}
    .avatar {height: 40px; width: 40px;}
    .testimonials_author {display: none;}
    #navigation ul li a{ padding-left: 6px; font-size: 95%;}
    #nav > li:nth-last-child(2) > ul {right:0; left:auto;}
    .large-notice{padding: 15px;}
    .large-notice > .container{
        width: 100%;
    }
    .large-notice > .container > .eleven{
        width: 465px;
    }
    .large-notice > .container > .five{
        width: 200px;
    }
    .large-notice p{font-size: 12px; margin-right: 0;}
    .latest-post{font-size: 85%; height: auto;}
    .social-links{padding-right:30px;}
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .slider_description {display: none;}
    #navigation{float: none;}
    .js #nav { display: none; }
    .js .selectnav { display: block;}
    #backtotop a {display: none;}
    .social-links {margin: -5px 0 20px 0; float: left;}
    .info-box a {margin: 15px 0 0 0;}
    .info-box p {margin: 10px 0 0 0;}
    .post-content {margin: 0 !important;}
    .post-title h2 a {padding:0;}
    .post-date {text-align: left; height: 35px!important}
    .post-title.post-lined-box {padding: 15px 0; margin-bottom: 15px;}
    .blog-sidebar {display: none;}
    .project .flexslider {margin-bottom: 20px;}
    .mr-rotato-prev, .mr-rotato-next, .mr-rotato-disabled {margin-right: -10px;}
    #navigation ul.selectnav {display:none;background: white; opacity: 1;width:92%; height:auto; overflow:auto;}

    .selectnav a{
        color: #555;
    }
    #navigation ul.selectnav{
        padding-bottom: 0;
        padding-top: 5px;
    }
    #navigation ul.selectnav li:first-child{
        display: none;
    }
    #navigation ul.selectnav li:first-child a{
        margin-left: 5px;
        font-size: 120%;
        font-weight: bold;
    }
    #navigation ul.selectnav li:last-child {
        border-bottom: none;
    }
    #navigation ul.selectnav li.nav-depth-0{
        padding-left: 15px;
        background: url(../images/link_list_arrow_02.png);
        background-repeat: no-repeat;
        background-position: 5px 48%;
    }
    #navigation ul.selectnav li.nav-depth-1{
        padding-left: 40px;
        background: url(../images/link_list_arrow_02.png);
        background-repeat: no-repeat;
        background-position: 30px 48%;
        display: none;
    }
    #navigation ul.selectnav li.nav-depth-2{
        display: none!important;
    }
    .menu-close{
        text-align: center;
        padding: 10px 0 0;
    }
    .menu-close p {
        margin-bottom: 10px;
    }
    .menu-close a{
        display: block;
    }
    .menu-close a img{
        margin: 4px 10px 0 -15px;
        width: 16px;
        height: 16px;
    }

    #navigation_btn{
        display: block;
        position: absolute;
        top:20px;
        right: 10px;
        font-size: 150%;
    }
    #menuToggle{
        display: block;
        overflow: hidden;
        width: 35px;
    }
    #menuToggle.open {
        opacity: 0.5;
    }
    #menuToggle img{
        max-width: 70px;
    }
    #menuToggle.open img{
        margin-left: -35px;
        max-width: 70px;
    }
    #footer-sp-box{
        font-size: 500%;
        text-align: center;
        padding: 30px 0 50px;
    }
    #modeChange {
        padding: 10px;
        text-align: center;
        color: #333;
        font-weight: bold;
    }
    #modeChange span {
        color: #999;
    }


    .post-lined-box{
        padding-bottom: 0;
    }
    .post-archives ul{
        margin-bottom: 30px;
    }
    .post-body{
        padding-top: 10px;
    }
    .column-double-main .headline {
        margin-bottom: 20px;
    }

    .latest-news .four{
        margin-bottom: 20px;
    }
    .latest-news .item-img{
    }
    .latest-news .item-img img{
    }
    .latest-news h4{
        padding-bottom: 10px;
        margin-bottom: 0px;
    }
    .latest-news h5{
        border-bottom: none;
        padding: 0;
    }
    .large-notice{
        padding: 15px;
    }
    .large-notice p{
        /*padding-right: 30px;*/
    }
    .large-notice > .container{
        width: 100%;
    }
    .large-notice > .container > .columns{
        width: 100%;
    }
    .container .large-notice > div > div:last-child{
        width: 420px;
        text-align: center;
    }
    #footer-bottom{
        text-align: center;
    }
    .social-links{
        float: none;
        display: inline-block;
    }
    #footer .tab_sp{
        display: none!important;
    }


    #nav-footer > li > ul {
        position: relative;
        display: block;
        min-width: 100%;
        top: 0;
        right: 0;
        width: auto;
        margin: 0 0 0;
        padding: 0px;
        background: transparent;
        z-index: 999;
    }
    #nav-footer > li > ul > li {
        padding-left: 15px;
    }
    #nav-footer > li > ul > li > a {
        color: #a7a7a7;
    }


    .info-eyecatch {
        position: relative;
        margin-bottom: 92px;
    }
    .info-eyecatch h1{
        position: absolute;
        left: 0px;
        bottom: -62px;
        width: 100%;
        height: auto;
        min-height: 62px;
        font-size: 18px;
        padding: 10px 10px;
        box-sizing: border-box;
        background: rgba( 255, 255, 255, 0.75 );
    }
    .info-eyecatch h1 span{
        position: static;
        background: none;
        display: inline;
        padding: 0;
    }
    .info-eyecatch br{
        display: none;
    }
    .wpcf7-form-mode-confirm .field.button-area{
        margin-left: -60px;
    }
    .wpcf7-form-mode-confirm .field input.button-rewrite{
        margin-right: 0;
    }

}
    
    
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    .info-eyecatch h1{
        font-size: 16px;
    }
    .client-logo img {width: 139px; height: auto;}
    .custom-slide {height: 270px;}
    .avatar {height: 35px; width: 35px;}
    .footer-news-title{
        width: 350px;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    .info-eyecatch h1{
        font-size: 14px;
        line-height: 1.5;
    }

    .client-logo img {width: 149px; height: auto;}
    .custom-slide {height: 193px;}
    .avatar {height: 25px; width: 25px;}
    .portfolio-item-meta p{
        padding-left: 0;
        padding-top: 10px;
    }
    .container .large-notice > div > div:last-child{
        width: 270px;
    }

    .wpcf7-form-mode-confirm .field.button-area{
        margin-left: 0!important;
    }
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    .pc {
        display: none!important;
    }
    .tab {
        display: block!important;
    }
    .sp {

        display: none!important;
    }
    .tab_sp {
        display: block!important;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    .pc {
        display: none!important;
    }
    .tab {
        display: none!important;
    }
    .sp {

        display: block!important;
    }
    .tab_sp {
        display: block!important;
    }
    #header_logo{
        width: 105px
    }

    .field .input-name input{
        width: 170px;
    }
    .field .company input{
        width: 220px;
    }

    .info-eyecatch{
        height: 78px!important;
    }
    #navigation_btn {
        top: 20px;
    }
}

/* =============================================================== */
/* Media Queries
================================================================ */

    @media only screen and (min-width: 768px) and (max-width: 1199px) {

        .pricing-container {
            margin:0 auto;
            width:748px;
        }
        .price-table-container {
            width:748px;
            padding:0;
            margin:20px auto;
        }

        .column-pricing { width:149px; }
        .blank-header { width:149px; height:111px; }
        .column-pricing h1 {
            width:149px;
            font-size:22px;
            line-height:45px;
        }

        .column-pricing h2 {
            font-size:18px;
            width: 149px;
        }
        
        .column-pricing a {
            width:149px;
            font-size:13px;
        }
        .column-pricing ul li {
            width:149px;
            font-size:11px;
        }
        .column-pricing h1 {font-size: 16px;}

        .column-pricing.regular, .column-pricing.regular h1, .column-pricing.regular ul li, .column-pricing.regular a,  .column-pricing.regular h2,  .column-pricing.regular h3 {width: 186px;}
        .column-pricing.info-list, .column-pricing.info-list  ul li {width:149px;}

        #nav-footer > li > ul {
            min-width: 240px;
        }

        .flow ul li{
            width: 28%
        }

        .info-eyecatch{
            height: 242px!important;
        }
        .twelve .large-notice.info-eyecatch{
            height: 174px!important;
        }
    }

    
    @media only screen and (max-width: 767px) {
        #header .container {
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .pricing-container {
            margin:0 auto;
            width:300px;
        }
        .price-table-container {
            width:300px;
            padding:0;
            margin:0px auto;
        }

        #feature-list { display:none; }
        .desc { display:none; }

        .column-pricing ul li { padding-top:10px;padding-bottom:35px; }
        .column-pricing ul li:before {
            content:attr(data-feature) ':';
            display:block;
            margin-bottom:10px;
            font-size:12px;
            font-weight:bold;
            color:#777;
        }

        .column-pricing.regular ul li { padding:15px 0; }
         .column-pricing.regular ul li:before {
            content:attr(data-feature) ':';
            display:none;
            margin-bottom:0px;
            font-size:12px;
            font-weight:bold;
            color:#777;
        }
        
        .column-pricing { width:149px; }
        .blank-header { width:149px; height:111px; }
        .column-pricing h1 {
            width:149px;
            height:40px;
            font-size:22px;
            line-height:45px;
        }

        .column-pricing h2 {
            font-size:18px; 
            width: 149px;
        }

        .column-pricing a {
            width:149px;
            font-size:13px;
        }
        .column-pricing ul li {
            width:149px;
            font-size:11px;
        }

        .column-pricing.featured {
            padding: 0;
            margin-top: 0; 
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            z-index: 10;
            position: relative;
            border-right: 0px;
        }
        
        .column-pricing.featured h2{color:#6f9c00}
        .column-pricing.featured a {  padding: 0;}
        .column-pricing.featured h1 {  padding: 0;}

        .column-pricing h1 {font-size: 14px;}
        
        .column-pricing.featured {  border-right: 1px solid #fff !important;}
        .column-pricing.regular, .column-pricing.regular h1, .column-pricing.regular ul li, .column-pricing.regular a,  .column-pricing.regular h2,  .column-pricing.regular h3 {width: 149px;}
        
        .tbl-01 th,
        .tbl-01 td {
            padding: 10px 10px 8px;
        }
        .profile-box {
            width: auto;
            margin-right: 0;
        }
        .profile-box > figure {
            float: none;
            width: auto;
            height: auto !important;
            margin: 0;
            padding: 10px;
            overflow: hidden;
            text-align: left;
        }
        .profile-box > figure:nth-child(odd) {
            background: #f3fbff;
        }
        .profile-box > figure > img {
            float: left;
            width: 30%;
        }
        .profile-box > figure .caption {
            float: right;
            width: 65%;
        }
        .profile-box figcaption {
            padding: 0;
        }
        .profile-box p {
            min-height: 0;
            margin: 0;
            padding: 0;
            border: none;
        }
        .image-unit, .image-unit > .text {
            display: block;
        }
        .image-unit > .image {
            display: block;
            margin: 0 0 25px;
            padding: 0 !important;
            direction: ltr !important;
        }
        .image-around > .image img {
            max-width: 130px;
        }

        .flow {
            margin-bottom: 50px;
        }
        .flow ul li{
            width: 28%
        }


        .field dl{
            display: block;
            border: 1px solid #ccc;
            margin-bottom: 30px;
        }
        .field dt, .field dd{
            display: block;
            vertical-align: middle;
            padding: 10px 10px;
            border: none;
        }
        .field dl:last-child dt, .field dl:last-child dd{
            border-bottom: none;
        }
        .field dt{
            min-width: 160px;
            text-align: left;
            font-weight: bold;
            border-right: none;
            background: #ffffff; /* Old browsers */
            background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
            background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */;
            border-bottom: 1px solid #ccc;
        }
        .field dd{
            width: inherit;
            padding: 10px 20px;
        }

        .field .company dd{
            padding: 20px 20px;
        }
        .field .company input{
            margin-top: 0;
            margin-bottom: 15px;
        }
        .field textarea{
            max-width: 94%;
            min-width: 94%;
        }

    }

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

        .info-eyecatch{
            height: 122px!important;
        }
        .field .company input{
            width: auto;
        }

        .pricing-container {
            margin: 0px auto;
            width:420px;
        }
        
        .price-table-container {
            width:420px;
            padding:0;
            margin:0 auto;
        }
        
        #feature-list { display:none; }

        .column-pricing,
        .blank-header,
        .column-pricing h1,
        .column-pricing h2,
        .column-pricing a,
        .column-pricing ul li {width:209px;}

        .column-pricing.regular, .column-pricing.regular h1, .column-pricing.regular ul li, .column-pricing.regular a,  .column-pricing.regular h2,  .column-pricing.regular h3 {width: 209px;}
    }
/* --- 追加: 埋め込みiframeをコンテナ幅に追従させる -------------------------
   YouTube埋め込みが width="560" 固定のため、スマホではレイアウト幅が
   560px超に押し広げられ、ページ全体が縮小表示されていた。
   対象ページ: marketing/2019/robot/ , marketing/2020/billgates/          */
@media only screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}