@charset "utf-8";
/**************************************************************************************************
 *
 * 水陸両用バス KABAバス スタイルシート
 *  ページ全体の基礎となるCSS
 *
 *  CSS設計案としてFLOCSSを使用(https://github.com/hiloki/flocss)
 *  ※命名規則
 *      MindBEMdingを使用(https://gist.github.com/juno/6182957)
 *      単語のくぎりには'_'を使用
 *      フォントサイズの単位は"rem"で統一
 *
 *************************************************************************************************/

/**
 *     $Foundation (プロジェクトの基本となるスタイル)
 ------------------------------------------------------------------------------------------------*/
/*** カバアニメの動き **/
	.demo_item{
		width: 87px;
	    height: 40px;
	    border-radius: 10px;
	    background-image: url(/img/default/kaba_walk_S.gif);
	    background-size: 100% 100%;
	    background-position: 0 0;
	    background-repeat: no-repeat;
	    display: block;
	    position: relative;
	    

	}
	.demo_item.anime{
	    animation-name: upDown;
	    animation-iteration-count: infinite;
	    animation-duration: 0.1s;
	    animation-direction: alternate;
	    animation-timing-function: steps(2);
	    transition-duration: .3s;
	    transition-property: transform;
	}


	.demo_stage{
	    position: relative;
	    width: 100%;
	    height: 65px;
	    top: 0px;
	    display: block;
	}

	.demo_wrap{
		display: block;
	    position: absolute;
	    top: 20px;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	    animation-duration: 15s;
	    animation-iteration-count: 1;
		margin-right: -25px;
	}
	
	/*** 左右動き設定 **/
	.demo_wrap[data-order="right"] {
	    animation-name: GoLeft;
	}
	.demo_wrap[data-order="left"] {
	    animation-name: GoRight;
	}

	[data-order="left"] > .demo_item {
	    transform: rotateY(180deg);
	}
	
	@keyframes GoRight {
	    0% {
	        right: 10%;
	    }
	    100% {
	        right: 68%;
	    }
	}
	@keyframes GoLeft {
	    0% {
	        right: 68%;
	    }
	    100% {
	        right: 10%;
	    }
	}
	

	
	
	
	/*** 高速バスアニメの動き **/
	.demo_item_hb{
		width: 121px;
	    height: 59px;
	    border-radius: 10px;
	    background-image: url(/img/default/fujiQ_kousokubus.png);
	    background-size: 70% 70%;
	    background-position: 0 0;
	    background-repeat: no-repeat;
	    display: block;
	    position: relative;
	    

	}
	
	.demo_stage_hb{
	    position: relative;
	    width: 100%;
	    height: 65px;
	    top: 0px;
	    display: block;
	}

	.demo_wrap_hb{
		display: block;
	    position: absolute;
	    top: 20px;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	    animation-duration: 15s;
	    animation-iteration-count: 1;
		margin-right: -25px;
	}
	
	/*** 左右動き設定 **/
	.demo_wrap_hb[data-order="left"] {
	    animation-name: GoLeftHb;
	}
	.demo_wrap_hb[data-order="right"] {
	    animation-name: GoRightHb;
	}

	[data-order="left"] > .demo_item_hb {
	    transform: rotateY(180deg);
	}
	
	@keyframes GoRightHb {
	    0% {
	        right: 0%;
	    }
	    100% {
	        right: 45%;
	    }
	}
	@keyframes GoLeftHb {
	    0% {
	        right: 45%;
	    }
	    100% {
	        right: 0%;
	    }
	}
	
	
	
	
	/*** 車アニメの動き **/
	.demo_item_car{
		width: 91px;
	    height: 50px;
	    border-radius: 10px;
	    background-image: url(/img/default/car.png);
	    background-size: 75% 75%;
	    background-position: 0 0;
	    background-repeat: no-repeat;
	    display: block;
	    position: relative;
	    

	}
	
	.demo_stage_car{
	    position: relative;
	    width: 100%;
	    height: 65px;
	    top: 0px;
	    display: block;
	}

	.demo_wrap_car{
		display: block;
	    position: absolute;
	    top: 20px;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	    animation-duration: 15s;
	    animation-iteration-count: 1;
		margin-right: -25px;
	}
	
	/*** 左右動き設定 **/
	.demo_wrap_car[data-order="left"] {
	    animation-name: GoLeftCar;
	}
	.demo_wrap_car[data-order="right"] {
	    animation-name: GoRightCar;
	}

	[data-order="left"] > .demo_item_car {
	    transform: rotateY(180deg);
	}
	
	@keyframes GoRightCar {
	    0% {
	        right: 0%;
	    }
	    100% {
	        right: 60%;
	    }
	}
	@keyframes GoLeftCar {
	    0% {
	        right: 60%;
	    }
	    100% {
	        right: 0%;
	    }
	}
	
	
	
	
	/*** 電車アニメの動き **/
	.demo_item_train{
		width: 226px;
	    height: 59px;
	    border-radius: 10px;
	    background-image: url(/img/default/train.png);
	    background-size: 75% 75%;
	    background-position: 0 0;
	    background-repeat: no-repeat;
	    display: block;
	    position: relative;
	}
	
	.demo_stage_train{
	    position: relative;
	    width: 100%;
	    height: 65px;
	    top: 0px;
	    display: block;
	}

	.demo_wrap_train{
		display: block;
	    position: absolute;
	    top: 20px;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	    animation-duration: 15s;
	    animation-iteration-count: 1;
		margin-right: -25px;
	}
	
	/*** 左右動き設定 **/
	.demo_wrap_train[data-order="left"] {
	    animation-name: GoLeftTrain;
	}
	.demo_wrap_train[data-order="right"] {
	    animation-name: GoRightTrain;
	}

	[data-order="left"] > .demo_item_train {
	    transform: rotateY(180deg);
	}
	
	@keyframes GoRightTrain {
	    0% {
	        right: 0%;
	    }
	    100% {
	        right: 47%;
	    }
	}
	@keyframes GoLeftTrain {
	    0% {
	        right: 47%;
	    }
	    100% {
	        right: 0%;
	    }
	}
	
	
	
	
	/*** FBのカババス動き **/
	.demo_item_kababus{
		width: 131px;
	    height: 41px;
	    border-radius: 10px;
	    background-image: url(/img/default/footer_bus.png);
	    background-size: 60% 60%;
    	background-position: 0 15px;
	    background-repeat: no-repeat;
	    display: block;
	    position: relative;
	}
	
	.demo_stage_kababus{
	    position: relative;
	    width: 100%;
	    height: 65px;
	    top: 0px;
	    display: block;
	}

	.demo_wrap_kababus{
		display: block;
	    position: absolute;
	    top: 0px;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	    animation-duration: 10s;
	    animation-iteration-count: 1;
		margin-right: -10px;
	}
	
	/*** 左右動き設定 **/
	.demo_wrap_kababus[data-order="left"] {
	    animation-name: GoLeftKababus;
	}
	.demo_wrap_kababus[data-order="right"] {
	    animation-name: GoRightKababus;
	}

	[data-order="left"] > .demo_item_kababus {
	    transform: rotateY(180deg);
	}
	
	@keyframes GoRightKababus {
	    0% {
	        right: 0%;
	    }
	    100% {
	        right: 40%;
	    }
	}
	@keyframes GoLeftKababus {
	    0% {
	        right: 40%;
	    }
	    100% {
	        right: 0%;
	    }
	}
	
	
	.round-kaba { 
            position:absolute;
            left:45%;
            top:30%;
            animation: fadeInAnimation ease 7s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
    } 
    @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
     }


html {
    font-size: 62.5%;     /* ルートを10pxに設定 */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
}
body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    -webkit-text-size-adjust: 100%;
    overflow-x:hidden;
}
.wrapper {
    width: 100%;
    overflow: hidden;
}
.main {
    position: relative;
}
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
a { color: inherit; text-decoration: none;outline:none; }
@media screen and (max-width:1024px) {
    a { display: block; }
}

@media screen and (max-width:1024px) {
    /* スマホ・タブレットのみ */
    article, aside, footer, header, menu, nav, section,
    html, body, div, span, h1, h2, h3, h4, h5, h6,
    p, img, dl, dt, dd, ol, ul, li, table, tr, th, td { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
}


/**
 *     $Layout (ページを構成するプロジェクト共通のコンテナーブロックのスタイル)
 ------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------
    ヘッダー エリア
        BLOCK名'header'
  ---------------------------------------------*/
article {
	width: 100%;
    overflow: hidden;
}
#header .smallsize {
    display: block;
}
#header .largesize {
    display: none;
}
.header__innerblock {
    width: 100%;
    display: table;
}
.header__innerblock  > * {
    vertical-align: middle;
    display: table-cell;
}

/* タイトル */
.header__title {
    /* padding-left: 1.563%;
    width: 40%; */
    width: 48%;
    vertical-align: bottom;
}
.header__title > h1 {
    width: 100%;
}
.header__chibikaba {
	width: 80px;
    padding: 0 10px;
    vertical-align: bottom;
}
.header__notice {
	width: 20%;
    padding: 2px 5px;
}

/* メニューバー */
.header__menu_bar {
    font-size: 1.0rem;
    color: #fff;
    text-align: center;
    background-color: #0084ce;
    width: 12.188%;
}
.header__menu_bar > i {
    font-size: 2em;
}

/* グローバルメニュー */
#global_menu--sp {
    color: #fff;
    background-color: #0084ce;
}
#global_menu--sp > li {
    border-bottom: solid 1px #96dbed;
}
#global_menu--sp a {
    vertical-align: middle;
    padding: 3.750% 3.125%;
    position: relative;
}
#global_menu--sp a i {
    color: #96dbed;
    font-size: 1.8rem;
    width: 12px;
    height: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3.125%;
    margin: auto;
}

/* シェアボタン、言語選択 ブロック */
.header__bottom {
    padding: 1.563% 3.125%;
}
.sns_button {
    font-size: 0;
    width: 24.667%;
    float: left;
}
.sns_button li {
    width: 43.244%;
    margin-right: 6.757%;
    display: inline-block;
}

.header__bottom .language {
    float: right;
    position: relative;
    left: -15px;
}

.safety__notice {
    position: relative;
    top: 3px;
    float: left;
    width: 133px;
}
.safety__notice a {
    display: block;
    width: 133px;
    height: 36px;
    background: url(/img/default/safety_precautions_btn_sp_on.png) no-repeat;
    background-size: 133px 36px;
}

/*スマホ時言語セレクト*/
.header__bottom .language select { 
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background:#fff;
    vertical-align: middle;
    border:1px solid #fff;
    padding:2% 20% 2% 7%;
    background:#fff url(/img/default/icon_arrow_bown.png) no-repeat;
    background-size:18%;
    background-position: right center;
    color:#505050;
}
@-moz-document url-prefix() { /* for firefox */
    .header__bottom .language select {
        background:none;
        background-color: #fff;
    }
}

@media screen and (min-width:480px) {
    .header__menu_bar     { font-size: 1.2rem; }
    .header__menu_bar > i { font-size: 3em; }
}
@media screen and (min-width:768px) {
    /* メニューバー */
    .header__menu_bar {
        width: 132px;
    }

    /* グローバルメニュー */
    #global_menu--sp a {
        font-size: 1.8rem;
    }
    #global_menu--sp a i {
        font-size: 2.4rem;
        width: 18px;
        height: 24px;
    }

    .sns_button {
        width: 168px;
    }
    .sns_button li {
        width: 64px;
        margin-right: 20px;
    }
    .header__notice {
		width: 250px;
		width: 345px;
    	padding: 0 5px 0 0;
    	position: relative;
    	left: -5px;
    	vertical-align: bottom;
	}
	.header__notice img {
		width:100%;
	}
	.safety__notice {
		position: relative;
	    top: -5px;
	    right: -10px;
	    width: 160px;
	}
	.safety__notice a {
	    display:block;
	    width: 160px;
	    height:36px;
	    background: url(/img/default/safety_precautions_btn_pc_on.png) no-repeat;
	}
	.safety__notice a:hover {
	    background: url(/img/default/safety_precautions_btn_pc_off.png) no-repeat;
	}
}
@media screen and (min-width:1025px) {
    #header .smallsize {
        display: none;
    }
    #header .largesize {
        display: block;
    }

    /* タイトル */
    .header__title {
        width: 33.8%;
        padding-left: 0;
    }
    .header__title img {
        width: 100%;
    }
    .header__title > a {
        display: block;
    }

    /* ナビゲーションエリア */
    /* snsを下にする為 */
    .header__innerblock .header__navi {
        vertical-align: bottom;
        position:relative;
        /* width: 320px; */
    }

    .header__navi__rbox {
        width: 90px;
    }
    .header__navi__rbox > a {
        font-weight: bold;
        border-radius: 50%;
        width: 90px;
        height: 90px;
    }
        .header__navi__rbox > a:hover {
            background-color: #1a9ee8;
        }

    .header__navi__rbox > a > p {
        text-align: center;
        vertical-align: middle;
    }

    /* シェアボタン、言語選択 ブロック */
    .language {
        color: #0084ce;
        width: 100%;
        position:absolute;
        top:5px;
        right:0;
    }
    .language ul {
        font-size: 0;
    }
    .language li {
        font-size: 1.4rem;
        font-weight: bold;
        padding-right: 1em;
        float:right;
    }
        .language li a:hover {
            text-decoration: underline;
        }

    .sns_button {
        font-size: 0;
        /* width: 37%; */
        width: 93px;
        float: right;
        display: block;
        padding-bottom: 5px;
    }
    .sns_button li {
        color: #0084ce;
        /* font-size: 2.6rem; */
        font-size: 3.2rem;
        line-height: 32px; /* 追加 */
        width: auto;
        margin-right: 0;
        margin-left: 10px;
        display: inline-block;
    }
    /*
        .sns_button li:last-child {
            font-weight: bold;
            font-size: 1.4rem;
            margin-left: 20px;
        }
    */
    .sns_button a:hover {
        color: #1a9ee8;
    }

    /* グローバルメニュー */
    .header__bottom {
        padding: 0;
        position:relative;
    }
    /*.header__bottom::before {
	    position: absolute;
	    border-top: #1f99dc 5px solid;
	    top: -5px;
	    right: 0;
	    width: 50%;
	    display:block!important;
	}*/
    #global_menu {
        line-height: 1.125;
        width: 100%;
        padding: 10px 0;
        display: table;
    }
    #global_menu > div {
        vertical-align: middle;
        display: table-cell;
        width: 144px;
        padding-right: 8px;
    }
    #global_menu > div:last-child {
        width: 136px;
        padding-right: 0;
    }

    .global_menu__btn {
        position: relative;
        display: block;
        width: 136px;
        height: 0;
        padding-top: 50px;
        background: url(/img/default/menu_bg.png) no-repeat 0 -50px;
        -webkit-background-size: cover;
                background-size: cover;
    }
    .global_menu__btn.current {
        cursor: default;
    }
        .global_menu__btn:hover,
        .global_menu__btn.current {
            background: url(/img/default/menu_bg.png) no-repeat 0 0;
            -webkit-background-size: cover;
                    background-size: cover;
        }
        .global_menu__btn:hover > p,
        .global_menu__btn.current > p { color: #fff; }
        .global_menu__btn:hover::after,
        .global_menu__btn.current::after {
            position: absolute;
            z-index: 4;
            top: -10px;
            right: -4px;
            content: url(/img/default/menu_bg_parts.png);
        }

    .global_menu__btn > p {
        font-size: 1.6rem;
        font-weight: bold;
        color: #0084ce;
        white-space: nowrap;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }
}


/*-----------------------------------------------
    フッター エリア
        BLOCK名'footer'
  ---------------------------------------------*/
#footer {
    width: 100%;
    background-color: #fff;
}
.info_block__section { padding: 6.25% 3.125%; }
.info_block__header { font-size: 2.6rem; }
.info_block__header > h2 { font-weight: bold; }

.info_block__item {
    padding-top: 3.335%;
}
.info_block__item > h3 {
    font-size: 2rem;
    font-weight: bold;
}
.info_block__item__text {
    margin-bottom: 2%;
}
.info_block__item > div {
    margin-top: 1.667%;
}
    .info_block__item a > p:nth-child(2) { width: 18px; }
    .info_block__item a i.fa-phone { font-size: 1.8rem; }
    .info_block__item a i.fa-chevron-right { font-size: 2.4rem; vertical-align: bottom; }

.telnumber--pc {
    display: none;
}

.info_block__item__note {
    margin-top: 2%;
}
.info_block__item__note li {
    text-indent: -1em;
    line-height: 1.25;
    padding-left: 1em;
}

/* 旅行代理店様　事前予約 */
.info_block--bottom {
    width: 93.75%;
    padding: 4.6875%;
    margin: 0 auto 5%;
}
.info_block--bottom > h2 {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.077;
}
    .info_block--bottom > h2 > span {display:block;}

.info_block--bottom > p {
    padding: 3.704% 0 1.852%;
}
.info_point {
	text-indent: -1em;
    padding-left: 1em;
}

.info_block--bottom__telbtn {
    font-size: 2rem;
}
.info_block--bottom__telbtn > a {
    font-weight: bold;
    padding: 5.185% 3.335%;
}
    .info_block--bottom__telbtn > a > p:nth-child(2) { width: 17px; }
    .info_block--bottom__telbtn i.fa-phone { font-size: 2.4rem; vertical-align: baseline; }
    .info_block--bottom__telbtn i.fa-chevron-right { font-size: 2.4rem; vertical-align: middle; }

.info_block--bottom__telnumber { display: none; }

/* PDF Button */
.info_block--bottom__pdfbtn_wrap {}
.info_block--bottom__pdfbtn_wrap > li {
    width: 100%;
    margin-top: 3.704%;
}

.info_pdfbtn {
    font-weight: bold;
    width: 100%;
    padding: 3.335%;
}
.info_pdfbtn > p:nth-child(1) {
    width: 9.127%;
}
.info_pdfbtn > p:nth-child(3) { width: 14px; }
.info_pdfbtn > p:nth-child(3) i.fa-chevron-right { font-size: 2rem; vertical-align: middle; }

/* カババス予約ボタン */
.info_block__linkbtn form[id='reserve_web'] > button {
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.25;
    position: relative;
}
.info_block__linkbtn form[id='reserve_web'] > button i {
    font-size: 2.4rem;
    position: absolute;
    top: 0;
    right: 3.334%;
    bottom: 0;
    width: 18px;
    height: 24px;
    margin: auto;
}

/* 注意文 */
.caution {
    color: #fff;
    background-color: #ff6c00;
    width: 93.75%;
    padding: 4.6875%;
    margin: 0 auto 5%;
}
.caution li > i { font-size: 1.6rem; }

/* パンフレット */
.pamphlet {
    padding: 3.125%;
}
    .pamphlet a { padding: 3.335%; }
        .pamphlet a p:nth-child(1) { width: 8.214%; }

/* コピーライト */
.copyright {
    font-size: 1.2rem;
    text-align: center;
    padding: 4.375% 0;
}

/* 雪祭りバナー */
.snow-fes {
	display: inline-block;
    padding: 20px;
    vertical-align: middle;
}

/* ナビダイヤル補足 */
.info_block__item > .guide_navi {
    display: flex;
    align-items: center;
    margin-top: -10px;
    margin-bottom: 20px;
}
.guide_navi--text span {
    font-size: 1.4rem;
}
.guide_navi--text {
    font-weight: bold;
    line-height: 1.2;
}
.guide_navi--text span {
    font-size: 1.4rem;
}
.guide_navi--no {
    font-size: 1.4rem;
    font-weight: bold;
}
.guide_navi--no span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    text-align: center;
    border: 2px solid;
    border-radius: 4px;
}

@media screen and (min-width:768px) {
    .info_block {
        width: 100%;
        padding: 5% 0;
        display: table;
    }
    .info_block__section {
        vertical-align: top;
        width: 50%;
        display: table-cell;
    }
        .info_block__section:nth-child(1) { border-right: solid 1px #d7d7d7; padding: 0 5% 0 0; }
        .info_block__section:nth-child(2) { padding: 0 0 0 5%; }

    .info_block__header { font-size: 3.6rem; line-height: 1; }
    .info_block__item { padding-top: 20px; }
    .info_block__item > h3 { font-size: 2.2rem; }
    .info_block__item > div:not(.info_block__linkbtn):not(.info_block__item__text):not(.guide_navi) { display: none; }
    .info_block__item a > p:nth-child(1) { font-size: 2.4rem; line-height: 1.25; }
    .info_block--bottom > p.info_point {padding-left: 1em;}
    .info_block--bottom > p.info_point span{ display:block; padding-left: 1em;}

    /* カババス予約ボタン */
    .info_block__linkbtn form[id='reserve_web'] > button {
        font-size: 2.4rem;
        line-height: 1.25;
    }

    .telnumber--pc {
        font-size: 3.2rem !important;
        font-weight: bold;
        display: block;
    }

    .info_block__item__text {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0;
    }
    .info_block__item__text > p {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%); /* Safari用 */
        transform: translateY(-50%);
    }

    /* ナビダイヤル補足 */
    /* .info_block__item > .guide_navi {
        margin-top: 0;
        margin-bottom: 0;
    } */
    .info_block__item > .guide_navi {
        margin-top: 0;
        margin-bottom: 10px;
    }
    /* .guide_navi--text {
        width: 136px;
        margin-left: 10px;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.2;
        text-align: center;
    } */
    /* .guide_navi--text span {
        font-size: 1.2rem;
    } */
    .guide_navi--text .dispSp {
        display: none;
    }
    /* .guide_navi--no {
        font-size: 1.4rem;
        font-weight: normal;
    } */

    /* 旅行代理店様　事前予約 */
    .info_block--bottom {
        width: 100%;
        padding: 4.8% 5% 2.5%;
        margin: 0 0 5%;
    }
    .info_block--bottom > h2 {
        font-size: 4rem;
        line-height: 1;
    }
    .info_block--bottom > h2 > span { display: inline; }
    .info_block--bottom > p {
        font-size: 1.8rem;
        padding: 30px 0 20px;
    }

    .info_block--bottom__telbtn { display: none; }
    .info_block--bottom .telnumber--pc { padding: 0; }

    /* PDF Button */
    .info_block--bottom__pdfbtn_wrap {
        font-size: 0;
        display: block;
    }
    .info_block--bottom__pdfbtn_wrap > li {
        font-size: 1.6rem;
        /* width: 31.77777777777778%; */
        width: 30.77777777777778%;
        max-width: 286px;
        margin: 2.223% 2.223% 0 0;
        display: inline-block;
        vertical-align: middle;
    }
    .info_block--bottom__pdfbtn_wrap > li.fit-size { max-width: 300px; width: 100%; }
    .info_block--bottom__pdfbtn_wrap > li:last-child { margin: 2.223% 0 0; }

    .info_pdfbtn {
        padding: 3.497%;
    }
    .info_pdfbtn > p:nth-child(1) {
        /* width: 13.534%; */
        width: 30px;
    }

    /* 注意文 */
    .caution {
        font-size: 2rem;
        line-height: 1.5;
        width: 100%;
        padding: 3.5004%;
        margin: 0 auto 5%;
    }
    .caution li > i { font-size: 2rem; }

    /* パンフレット */
    .pamphlet {
        font-size: 2.8rem;
        width: 100%;
        max-width: 700px;
        padding: 2% 0;
        margin: 0 auto;
        overflow: hidden;
        display: inline-block;
	    vertical-align: middle;
    }
    .pamphlet a {
        padding: 2.857142857142857%;
    }
        .pamphlet a p:nth-child(1) {
            width: 51px;
            padding-right: 5px;
        }

    /* コピーライト */
    .copyright { font-size: 1.4rem; }
}
@media screen and (min-width:1024px) {
    /* カババス予約ボタン */
    .info_block__linkbtn form[id='reserve_web'] > button {
        cursor: pointer;
    }

    /* パンフレット */
    .pamphlet a:hover { color: #1a9ee8; }
    /* コピーライト */
    .copyright { font-size: 1.6rem; font-weight: bold; padding: 20px 0; }
    .pamphlet { width: 60%; }
}


/*-----------------------------------------------
    サブページの最上部ナビ エリア
  ---------------------------------------------*/
/* パンくず */
.breadcrumb {
    padding-top: 1.563%;
}

/* 見出しエリア */
.article__heading_wrap {
    padding: 1.5625%;
}

/* ローカル メニュー */
.local_menu {
    font-size: 0;
    width: 100%;
    overflow: hidden;
}
.local_menu__item {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    vertical-align: top;
    width: 49.67742%;
    margin: 4px 0.6452% 0 0;
    display: inline-block;
}
    .local_menu__item:nth-child(even) {
        margin: 4px 0 0;
    }

.local_menu__item > a {
    text-align: left;
    width: 100%;
    padding: 6.494% 3.247%;
}
.local_menu__item span:nth-child(2) {
    text-align: center;
    width: 16px;
}
.local_menu__item span:nth-child(2) i {
    font-size: 1.4rem;
}

@media screen and (min-width:480px) {
    .local_menu__item {
        font-size: 1.4rem;
    }
    .local_menu__item span:nth-child(2) {
        width: 20px;
    }
    .local_menu__item span:nth-child(2) i {
        font-size: 1.8rem;
    }
}
@media screen and (min-width:768px) {
    /* 見出しエリア */
    .article__heading_wrap {
        padding: 0;
    }
    /* ローカル メニュー */
    .local_menu__item {
        width: 24.4%;
        max-width: 244px;
        margin: 0 0.8% 5px 0;
        display: inline-block;
    }
        .local_menu__item:nth-child(even) { margin: 0 0.8% 5px 0; }
        .local_menu__item:last-child      { margin: 0 0 5px; }

    .local_menu__item > a {
        padding: 8.197% 4.099%;
    }
    .local_menu__item i.fa-chevron-down { width: 16px; }
}
@media screen and (min-width:1024px) {
    /* パンくず */
    .breadcrumb {
        padding: 0;
    }
    .breadcrumb ul {
        font-size: 0;
        padding: 10px 0;
    }
    .breadcrumb li {
        font-size: 1.2rem;
        margin-right: 12px;
        display: inline-block;
    }
    .breadcrumb .root {
        color: #0084ce;
    }
    .breadcrumb .root > a       { text-decoration: underline; }
    .breadcrumb .root > a:hover { text-decoration: none; }

    .breadcrumb .current i      { margin-right: 12px; }
    .breadcrumb .current strong { font-weight: bold; }

    /* ローカル メニュー */
    .local_menu__item { font-size: 1.6rem; }
}

/*-----------------------------------------------
    サブページの見出しの吹き出し画像
  ---------------------------------------------*/
.parts_balloon     { line-height: 1; width: 12.500%; max-width: 80px; margin: 0 auto; }
.parts_balloon img { display: block; }
@media screen and (min-width:768px) {
    .parts_balloon { width: 10.841%; }
}
@media screen and (min-width:1024px) {
    .parts_balloon { width: 80px; }
}

/*-----------------------------------------------
    お知らせのレイアウト設定
  -----------------------------------------------*/
.news_layout a       { color: #0084ce; text-decoration: underline; display: inline; }
.news_layout a:hover { text-decoration: none; }
.news_layout em      { font-style: italic; }
.news_layout ol      { margin: 1em 0; list-style: decimal inside; }
.news_layout p       { margin: 1em 0; }
.news_layout strong  { font-weight: bold; }
.news_layout ul      { margin: 1em 0; list-style: disc inside; }





/**
 *     $Component / Object (再利用できるパターンとして最低限の機能を持ったモジュール)
 *         プレフィックス"c-"を付ける
 ------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------
    Font Color
  ---------------------------------------------*/
.c-font_color          { color: #fff;    }
.c-font_color--black   { color: #404040; }
.c-font_color--blue    { color: #0084ce; }
.c-font_color--d_gray  { color: #555;    }
.c-font_color--red     { color: #f00; }
.c-font_color--skyblue { color: #44aae3; }
.c-font_color--yellow  { color: #ffd800; }


/*-----------------------------------------------
    Background Color
  ---------------------------------------------*/
.c-bg              { background-color: #fff; position: relative; }
.c-bg--blue        { background-color: #0084ce; }
.c-bg--dm_pink     { background-color: #b23e80; }
.c-bg--m_white     { background-color: #f6f6f6; }
.c-bg--pale_orange { background-color: #fff6ee; }
.c-bg--pale_pink   { background-color: #ffeef8; }
.c-bg--pale_pink2  { background-color: #fff5fb; }
.c-bg--pale_red    { background-color: #fff2f2; }
.c-bg--skyblue     { background-color: #44aae3; }
.c-bg--soft_blue   { background-color: #54abdb; }
.c-bg--v_soft_blue { background-color: #b1dff8; }
.c-bg--white2      { background-color: #f1f1f1; }
.c-bg--yellow      { background-color: #ffd800; }
.c-bg--yellow2     { background-color: #fff000; }

/*-----------------------------------------------
    Background Image
  ---------------------------------------------*/
/* .c-bg_parts--kaba {
    background-image: url(/img/default/parts_kaba.png);
} */


/*-----------------------------------------------
    ブロック
  ---------------------------------------------*/
/*上下左右 20px*/
.c-block { padding: 3.125%; }
@media screen and (min-width:1024px) {
    .c-block { padding: 20px; }
}

/*
    大きい画面の時にコンテンツを中心にもってくるボックス
 */
@media screen and (min-width:768px) {
    .c-max_wrap { max-width: 780px; padding: 0 15px; margin: 0 auto; }
}
@media screen and (min-width:1024px) {
    .c-max_wrap { max-width: 1040px; padding: 0 20px; }
}

/*-----------------------------------------------
    ボタン
  ---------------------------------------------*/
.c-btn {
    text-align: center;
    border-radius: 8px 8px;
    display: table;
}
.c-btn > * {
    vertical-align: middle;
    display: table-cell;
}

/* ボタンの背景色 */
.c-btn--blue    { background-color: #0084ce; }
.c-btn--white   { background-color: #fff; }
.c-btn--orange  { background-color: #ff9c00; }
.c-btn--skyblue { background-color: #44aae3; }
.c-btn--yellow { background-color: #ffd800; }
@media screen and (min-width:1024px) {
    .c-btn--white:hover  { background-color: #eaffff; }
    .c-btn--blue:hover   { background-color: #1a9ee8; }
    .c-btn--orange:hover { background-color: #ffb61a; }
}
/* ボタンの横幅 */
.c-btn--full {
    width: 100%;
}
/*共通*/
.c-btn_common {
    font-weight: bold;
    padding: 5% 3.333%;
}
.c-btn_associate {
    padding: 3%;
}
@media screen and (min-width:768px) {
    .c-btn_associate {
	    width: 400px;
	    padding: 3%;
	}
}

/*-----------------------------------------------
    Flex Box
        スマホの時は縦並び、タブレット・PCの時は
        横並びにする
  ---------------------------------------------*/
.c-flex {
    -js-display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;     /* IE10 */
    -webkit-flex-direction: column; /* Safari */
    flex-direction: column;
}
@media screen and (min-width:768px) {
    .c-flex {
        -ms-flex-direction: row;        /* IE10 */
        -webkit-flex-direction: row;    /* Safari */
        flex-direction: row;
        -ms-flex-wrap: wrap;            /* IE10 */
        -webkit-flex-wrap: wrap;        /* Safari */
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between; /* Safari */
        justify-content: space-between;
    }
    .c-flex__item {
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
}

/*-----------------------------------------------
        横並びにする
  ---------------------------------------------*/
.c-parallel {
    font-size: 0;
    display: block;
}
.c-parallel__item {
    display: inline-block;
}

/*-----------------------------------------------
    ページャー
  -----------------------------------------------*/
.c-pager {
    position: relative;
    left: 50%;
    float: left;
}
.c-pager__item {
    position: relative;
    left: -50%;
    float: left;
}


/*-----------------------------------------------
    ホバーアクションのベースとなる設定
  ---------------------------------------------*/
@media screen and (min-width:1024px) {
    .c-hover::before,
    .c-hover::after { position: absolute; z-index: -1; display: block; content: ''; }
    .c-hover,
    .c-hover::before,
    .c-hover::after { -webkit-transition: all .3s; transition: all .3s; }
}


/*-----------------------------------------------
    ページの見出し 設定
  ---------------------------------------------*/
.c-article_header {
    font-size: 2.6rem;
    font-weight: bold;
    color: #0084ce;
    line-height: 1.25;
}
.c-article_header > h2 {
    font-weight: bold;
}
.c-article_header > h2 span{
	color: #f00;
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
}
.c-article_header--kaba {
    padding: 1.936% 0 1.936% 18.710%;
    background-repeat: no-repeat;
    background-position: 1.613% center;
    -webkit-background-size: 14.194% auto;
            background-size: 14.194% auto;
}
@media screen and (min-width:768px) {
    .c-article_header {
        font-size: 4rem;
    }
    .c-article_header--kaba {
        /*padding: 2% 0 2% 10.4%;*/
        padding: 2% 0 2%;
        background-repeat: no-repeat;
        /*background-position: left center;*/
        background-position: left 250px center;
        -webkit-background-size: 8.8% auto;
                background-size: 8.8% auto;
    }
    .c-article_header > h2 span{
	    font-size: 18px;
	    margin-left: 30px;
	}
	
	
	
	
	

	
		
}

/*-----------------------------------------------
    セクションの見出し 設定
  ---------------------------------------------*/
.c-section_header {
    padding: 3.125%;
}
.c-section_header h3 {
    font-weight: bold;
    font-size: 2.6rem;
    line-height: 1.1539;
}
.c-section_header h3 span {
	color: #ff6c00;
    font-size: 14px;
    vertical-align: middle;
    display:inline-block;
    text-indent: -14px;
    padding-left: 15px;
}
.c-section_header > p {
    line-height: 1.5;
    margin-top: 2%;
}
@media screen and (min-width:768px) {
    .c-section_header {
        padding: 2% 0;
    }
    .c-section_header h3 {
        font-size: 4rem;
        line-height: 1.2;
    }
    .c-section_header h3 span {
	    font-size: 18px;
	    padding-left: 30px;
	}
    .c-section_header > p {
        font-size: 1.8rem;
        margin-top: 1.2%;
    }
}
@media screen and (min-width:1024px) {
}



.res_btn {
  position: fixed;
  top: 210px;
  right: 10px;
  z-index: 100;
}

.res_btn .pc {
  position: relative;
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;

  -webkit-transform-origin: 100% 0;

          transform-origin: 100% 0;
}

.res_btn .pc .bk_center {
  position: absolute;
  top: 35px;
  left: 37px;
  width: 100%;
}


.res_btn.scroll .pc {
  -webkit-transform: scale(.6);
          transform: scale(.6);
}

.res_btn .pc:hover .bk_bg {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
  }
  
.wave {
  position: absolute;
  top: -13px;
  right: 0;
  z-index: 10;
  width: 200%;
  height: 15px;
}

.wave.white {
  background: url(/img/default/bg_wave_white.png) repeat-x center bottom;
  -webkit-animation: wave_move 14s ease-in-out infinite;
          animation: wave_move 14s ease-in-out infinite;
}

@-webkit-keyframes wave_move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(366px);
            transform: translateX(366px);
  }
}

@keyframes wave_move {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(366px);
            transform: translateX(366px);
  }
}
.main:before {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -7px;
    width: 185px;
    height: 40px;
    background: url(/img/default/footer_bus.png) no-repeat center center;
    background-size: 100% auto;
    -webkit-animation: car_move 3s linear infinite, car_move_left 100s linear infinite;
    animation: car_move 3s linear infinite, car_move_left 100s linear infinite;
}

.main:after {
    content: "";
    position: absolute;
    right: -230px;
    bottom: -65px;
    width: 100px;
    height: 67px;
    background: url(/img/default/footer_kaba.png) no-repeat center center;
    background-size: 100% auto;
    -webkit-animation: fkaba_move 20s linear infinite, fkaba_move_left 100s linear infinite;
    animation: fkaba_move 20s linear infinite, fkaba_move_left 100s linear infinite;
}

@-webkit-keyframes car_move {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
}

@keyframes car_move {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
}

@-webkit-keyframes car_move_left {
  0% {
    right: -200px;
  }
  100% {
    right: 120%;
  }
}

@keyframes car_move_left {
  0% {
    right: -200px;
  }
  100% {
    right: 120%;
  }
}





@-webkit-keyframes fkaba_move {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
            bottom: -65px;
  }
  50% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            bottom: -55px;
  }
}

@keyframes fkaba_move {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
            bottom: -65px;
  }
  50% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            bottom: -55px;
  }
}

@-webkit-keyframes fkaba_move_left {
  0% {
    right: -500px;
  }
  100% {
    right: 120%;
  }
}

@keyframes fkaba_move_left {
  0% {
    right: -500px;
  }
  100% {
    right: 120%;
  }
}






.sp{
	display:none;
}

@media screen and (max-width:768px) {
.sp{
	display:block;
}
.pc {
	display:none;
}
.res_btn {
	text-align: right;
	top: 150px;
	right: 1%;
}
.res_btn img {
	width:80%;
}
	.wave.white {
	    background-size: 91px auto;
	    -webkit-animation: wave_move 34s linear infinite;
	            animation: wave_move 34s linear infinite;
	  }
  	.main:before {
	    right: -80px;
	    bottom: -9px;
	    width: 110px;
	    height: 36px;
	    -webkit-animation: car_move 2s linear infinite, car_move_left 40s linear infinite;
	            animation: car_move 2s linear infinite, car_move_left 40s linear infinite;
	  }
  	.main:after {
	    content: "";
	    position: absolute;
	    right: -100px;
	    -webkit-animation: fkaba_move 15s linear infinite, fkaba_move_left 50s linear infinite;
	    animation: fkaba_move 15s linear infinite, fkaba_move_left 50s linear infinite;
	}
  	.c-bg--soft_blue {
	  	padding-bottom:30px;
	}
  .demo_stage {
	    top: -5px;
	}
	.c-article_header--kaba {
    	padding: 0 0 5px 0;
	}
	.demo_wrap {
		top: 40px;
	}
	.demo_item {
    	background-size: 80%;
	}
	.article__heading_wrap {
	    padding: 2.5625%;
	}
	@keyframes GoRight {
	    0% {
	        right: 10%;
	    }
	    100% {
	        right: 80%;
	    }
	}
	@keyframes GoLeft {
	    0% {
	        right: 80%;
	    }
	    100% {
	        right: 10%;
	    }
	}
	
	.round-kaba {
	    top: 21%;
	}
	.round-kaba img {
	    max-width: 50%;
	}
}