/**************************************************************************************************
 *
 * 水陸両用バス KABAバス スタイルシート
 *
 *  ※命名規則
 *      MindBEMdingを使用(https://gist.github.com/juno/6182957)
 *      単語のくぎりには'_'を使用
 *      フォントサイズの単位は"rem"で統一
 *
 *************************************************************************************************/
/**
 *     $Project / Object (再利用できるパターンとして最低限の機能を持ったモジュール)
 ------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------
    キーヴィジュアル
        BLOCK名'keyvisual'
  ---------------------------------------------*/
.keyvisual {
    /* background: url(/img/default/keyvisual_kaba_sp.jpg) no-repeat 0 0;
    -webkit-background-size: cover; */
    background-color: #5c8fcb;
}
.keyvisual__innerblock {
    width: auto;
    padding-top: 16.813%;
    position: relative;
    z-index: 2;
    text-align: center;
}
.keyvisual__text {
    font-size: 1.8rem;
    font-weight: bold;
    position: absolute;
    top: 5.405%;
    left: 2.563%;
}
.keyvisual__text2 {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    background-color: #ffd800;
    padding: 10px 20px;
    z-index: 100;
}
.keyvisual__text2 span {
    color: #0284cd;
}
#main_video {
    width: 100%;
    height:auto;
    margin: 0 auto;
}

.btn_p_anchor {
    display: none;
}
.info_kaba {
	position: relative;
}
.info_kaba img {
	position: absolute;
    top: -10px;
    width: 80%;
}

/* 運行状況 */
.operation_status {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.25;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    background-color: rgba(0,0,0,.5);
}
.operation_status > p:nth-of-type(1) {
    font-weight: bold;
}

@media screen and (min-width:640px) {
    /* 運行状況 */
    .operation_status { font-size: 1.6rem; padding: 10px 20px; }
}
@media screen and (min-width:768px) {
    .keyvisual__text {
        font-size: 2rem;
        position: absolute;
        top: 5.405%;
        left: 133px;
    }
    .keyvisual__text2 {
	    position: absolute;
	    top: 12px;
	    left: 65.663%;
	    border-radius: 10px;
	}
	/* #main_video {
		width: auto;
	    height: 100%;
	} */
	
	
	
    /* 運行状況 */
    .operation_status { padding: 10px 24px; }
}
@media screen and (min-width:1024px) {
    .keyvisual {
        position: relative;
        height: 574px;
        border-bottom: solid 10px #ffd800;
        /* background: url(/img/default/keyvisual_kaba_PC.jpg) no-repeat center center;
        -webkit-background-size: cover;
                background-size: cover; */
    }
    .keyvisual__innerblock {
        width: 100%;
        height: 440px;
        padding-top: 0;
    }
    .keyvisual__text {
        font-size: 2.6rem;
        line-height: 1.25;
        top: 24px;
    }
    

    /* 運行状況 */
    .operation_status {
        color: #fff;
        line-height: 1.25;
        background-color: rgba(0,0,0,0.4);
        border-radius: 8px 8px;
        width: 666px;
        padding: 10px 12px;
        position: absolute;
        bottom: -123px;
        left: 20px;
        overflow: hidden;
    }
    .operation_status p {
        font-size: 1.6rem;
    }
    .operation_status > p {
        width: 86px;
        float: left;
    }
    .marquee {
        overflow: hidden;
        width: 556px;
        margin: 0 0 0 auto;
    }
    .marquee p::after { white-space: nowrap; content: ''; }
    .marquee p { white-space: nowrap; }
    .marquee a { text-decoration: underline; }
    .marquee a:hover { text-decoration: none; }

    /*ご予約はこちら*/
    .btn_p_anchor {
        font-weight: bold;
        font-size: 2.4rem;
        color: #0084ce;
        width: 300px;
        display: table;
        position: absolute;
        right: 20px;
        bottom: 0;
    }
    .btn_p_anchor a {
        text-align: center;
        vertical-align: middle;
        background-color: #ffd800;
        border-radius: 8px 8px 0 0;
        padding: 9.334%;
        display: table-cell;
    }
        .btn_p_anchor a:hover { background-color: #fff21a; }
        .btn_p_anchor i.fa-phone { font-size: 2.8rem; vertical-align: middle; }
        .btn_p_anchor i.fa-angle-down { font-size: 4rem; vertical-align: middle; }
}

@media screen and (max-width:1024px) {
    .marquee { overflow: hidden; }
    .marquee a {
        text-decoration: underline;
        display: inline-block;
    }
    .marquee > p { white-space: nowrap; overflow: -webkit-marquee; }
}


/*-----------------------------------------------
    イントロ
        BLOCK名'intro'
  ---------------------------------------------*/
.intro {
    padding: 4.375% 3.125%;
}
.intro__header {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.2;
}
.intro__header > h2 {
    font-weight: bold;
}
.intro__img {
    overflow: hidden;
}
.intro__img .video_frame {
    margin: 3.334% auto;
}
.intro__img .video_frame .positioning {
    position: relative;
    width: 100%;
}
.intro__img .video_frame .positioning:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
.intro__img .video_frame .positioning iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
	.positioning_pic {
	position:inherit;
	}
	.positioning_pic img{
		width: 100%;
		height: auto;
	}

@media screen and (min-width:768px) {
    .intro {
        padding: 3.25% 0 5.42%;
    }
    .intro__header {
        font-size: 2.6rem;
    }
}
@media screen and (min-width:1024px) {
    .intro {
        width: 100%;
        padding: 5% 0;
        overflow: hidden;
    }
    .intro__img {
        padding-right: 3%;
        float: left;
        overflow: visible;
        margin:0;
    }
    .intro__img .video_frame {
        margin: 3.334% auto;
    }
    .intro__img .video_frame .positioning {
        position:inherit;
    }
    .intro__img .video_frame .positioning:before {
        content:"";
        display: block;
        padding-top: 0; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
    }
    .intro__img .video_frame .positioning iframe {
        position:inherit;
        top:auto;
        left:auto;
        width:470px;
        height:264px;
    }
	.positioning_pic {
	position: relative;
    width: 100%;
	}
    .intro__text {
        letter-spacing: 1px;
        line-height: 2;
        width: 50%;
        margin: 12px 0 0 auto;
    }
    .intro__header {
        text-align: left
    }
}


/*-----------------------------------------------
    KABAをもっと知ろう
        BLOCK名'select_content'
  ---------------------------------------------*/
.select_content {
    padding: 4.375% 3.125%;
}
.select_content__header {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.2;
}
.select_content__header > h2 {
    font-weight: bold;
    color: #0084ce;
}
.select_content__list {
    font-size: 0;
    display: block;
}
.select_content__item {
    text-align: center;
    width: 100%;
    margin-top: 3.334%;
    display: inline-block;
}
    .select_content__item > a { display: block; }

@media screen and (min-width:768px) {
    .select_content {
        padding: 3% 0;
    }
    .select_content__header {
        font-size: 2.6rem;
        text-align: left;
        line-height: 1.25;
    }
    .select_content__item {
        width: 49%;
        margin: 2.774% 2% 0 0;
        display: inline-block;
    }
        .select_content__item:nth-child(2n) { margin: 2.774% 0 0; }
}
@media screen and (min-width:1024px) {
    .select_content__item {
        background-color: #fff;
        margin: 2% 2% 0 0;
    }
        .select_content__item:nth-child(2n) { margin: 2% 0 0; }
        .select_content__item > a:hover { opacity: 0.9; }
            .select_content__item > a > img { height:136px; }
}


/*-----------------------------------------------
    KABAをもっと知ろう
        BLOCK名'video_block'
  ---------------------------------------------*/
.video_block {
    padding: 3.125%;
}
.video_block__header {
    font-size: 2rem;
    color: #0084ce;
    text-align: center;
}
.video_block__header > h2 {
    font-weight: bold;
}

/* レスポンシブ対応 */
.video {
    position: relative;
    overflow: hidden;
    height: 0;
    margin-top: 3.334%;
    padding-top: 30px;
    padding-bottom: 56.25%;
    background-color: #ffae00;
}
.video.v3,
.video.v1 {
    display: none;
}

.video iframe {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.video p {
    font-size: 1.8rem;
    color: #ffee8d;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
            transform: translate(-50%, -50%);
}
@media screen and (min-width:764px) {
    .video_block__header {
        font-size: 2.6rem;
    }
}
@media screen and (min-width:1024px) {
    .video_block {
        padding: 3% 0;
    }
    .video_block__wrap {
        overflow: hidden;
    }
    .video.v3,
    .video.v1 {
        display: block;
    }
    
    .video {
        width: 28.0%;
        padding-bottom: 12.8%;
        margin-top: 3%;
        float: left;
    }
        .video:nth-child(2) { margin: 3% 8% 0; }
}

/*-----------------------------------------------
    新着情報など
        BLOCK名'group'
  ---------------------------------------------*/
.group {
    padding: 6.250% 3.125% 12.125%;
}
.group__header {
    font-size: 2rem;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.25;
}
.group__header > h2 {
    font-weight: bold;
    float: left;
}
.group__header > span {
    font-size: 1.6rem;
    float: right;
}
.group__header > span > a {
    display: inline-block;
}

.group__body--news {
    background-color: #fff;
    padding: 5%;
}

/* 更新情報 */
.news {
    height: 100%;
    max-height: 1035px;
    overflow: auto;
}
.news__item {
    color: #484848;
    border-bottom: dashed 1px #ccc;
    margin-bottom: 3.704%;
}
.news__item > header {
    border-left: solid 10px #0084ce;
    padding: 0 1.852%;
}
.news .date {
    font-size: 1.2rem;
}
.news .heading {
    font-size: 1.8rem;
    font-weight: bold;
}
.news__body {
    padding: 2.963% 0;
}

/* Face Book */
.btn_fb_wrap {
    padding-top: 3.334%;
}
.btn_fb {
    color: #fff;
    background-color: #3c5a99;
    border-radius: 0;
    padding: 6.667% 2%;
}

@media screen and (min-width:1024px) {
    .group {
        /* background: url(/img/default/parts_kababus.png) no-repeat bottom right; */
        -webkit-background-size: 13% auto;
        background-size: 13% auto;
        width: 100%;
        padding: 30px 0 90px;
        display: table;
    }
    .group__header {
        font-size: 2.6rem;
        line-height: 40px;
    }
    .group__header > span > a:hover {
        text-decoration: underline;
    }

    .group > div {
        vertical-align: top;
        display: table-cell;
    }
    .group > div:nth-child(2) {
        width: 406px;
        padding-left: 18px;
    }

    .group__body--news {
        padding: 30px 20px;
    }

    /* 更新情報 */
    .news {
        height: 540px;
        max-height: none;
        overflow: auto;
    }

    /* Face Book */
    .fb_plugin__header {
        font-size: 2.6rem;
        overflow: hidden;
    }
    .fb_plugin__header > h2 {
        font-weight: bold;
        color: #fff;
        float: left;
    }
    .fb_plugin__header > span {
        width: 130px;
        float: right;
    }
    .fb_plugin__body {
        background-color: #fff;
        padding: 20px;
    }
}