/**
 * Swiper 3.3.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * 
 * http://www.idangero.us/swiper/
 * 
 * Copyright 2016, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us/
 * 
 * Licensed under MIT
 * 
 * Released on: February 7, 2016
 */
 
/* 　　　必要　　　　　　*/
.swiper-container{

margin:0 auto;position:relative;overflow:hidden;z-index:1}
/* 
.swiper-container-no-flexbox .swiper-slide{

float:left}

.swiper-container-vertical>.swiper-wrapper{

-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
*/



/*　　横が崩れて　縦になる　　　　　*/
.swiper-wrapper{
position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}



/*
.swiper-container-android .swiper-slide,.swiper-wrapper{

-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

.swiper-container-multirow>.swiper-wrapper{

-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}

.swiper-container-free-mode>.swiper-wrapper{

-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}
*/



/*     これを消すと横一列に全部表示              */
.swiper-slide{
-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}






.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{

height:auto}

.swiper-container-autoheight .swiper-wrapper{

-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}

/*

.swiper-container .swiper-notification{

position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}

.swiper-wp8-horizontal{

-ms-touch-action:pan-y;touch-action:pan-y}

.swiper-wp8-vertical{

-ms-touch-action:pan-x;touch-action:pan-x}
*/



/*    矢印　消える      */
.swiper-button-next,.swiper-button-prev{
position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}

/*
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{
opacity:.35;cursor:auto;pointer-events:none}
*/

/*  左  矢印　消える      */
.swiper-button-prev,.swiper-container-rtl .swiper-button-next{
background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:1px;right:auto}


/*
.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{

background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}
.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{

background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}
 */


/*  右  矢印　消える      */
.swiper-button-next,.swiper-container-rtl .swiper-button-prev{
background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:1px;left:auto}

/*
.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{

background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}

.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{

background-image:url("data:image/svg+xml;charset=shift-jis,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}
*/







/*****             ボタン表示           *****/
.swiper-pagination{
position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}


/*
.swiper-pagination.swiper-pagination-hidden{

opacity:0}
*/




/*****             ボタン表示           *****/
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{

bottom:0px;left:0;width:100%}

.swiper-pagination-bullet{
width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}



/* 
button.swiper-pagination-bullet{

border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}

.swiper-pagination-clickable .swiper-pagination-bullet{

cursor:pointer}

.swiper-pagination-white .swiper-pagination-bullet{

background:#fff}
　*/



/* 　　　ボタンの色　　　*/
.swiper-pagination-bullet-active{
opacity:1;background:#0033ff}


/* 
.swiper-pagination-white .swiper-pagination-bullet-active{

background:#fff}




.swiper-pagination-black .swiper-pagination-bullet-active{

background:#000}

.swiper-container-vertical>.swiper-pagination-bullets{

right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{

margin:5px 0;display:block}
*/



/* ボタンの間隔 */
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{

margin:0 5px}


/* 
.swiper-pagination-progress{

background:rgba(0,0,0,.25);position:absolute}
*/


/******** ボタンの色　間隔　上まで*****/
/********  上のメニュー　pulu.css　*****/


/* styles for desktop横幅が何ピクセルを下回った際にプルダウンメニューに切り替えるのかを指定します。 */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 649px) {
   .tinynav { display: block }

}

@media screen and (max-width: 650px) {
   #nav-2 { display: none }
}


/* ▽メニューバーの装飾 */
ul#nav-2 {
   background-color: #cc0000; /* バーの背景色 */
   margin: 0px;               /* バー外側の余白 */
   padding: 0px;              /* バー内側の余白 */
   height: 40px;              /* バーの高さ */
   border: 1px solid #cc0000; /* バーの枠線 */
}

/* ▽メニュー項目の装飾 */
ul#nav-2 li {
    width: 120px;             /* 項目の横幅 */
    height: 40px;             /* 項目の高さ(バーの高さと同じに) */
    border-right: 1px solid white; /* 項目の区切り線 */
    float: left;
    list-style-type: none;
}

/* ▽メニュー項目の装飾 */
ul#nav-2 li a {
   background-color: #cc0000; /* 項目の背景色 */
    color: white;             /* 項目の文字色 */
    line-height: 40px;        /* 項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */
    text-align: center;       /* 文字列の配置(中央寄せ) */
    text-decoration: none;    /* 項目の装飾(下線を消す) */
    display: block;
    width: 100%;
    height: 100%;
}

/* ▽現在位置項目の装飾 */
ul#nav-2 li.selected a {
   font-weight: bold;
   background-color: #990000;
}

/* ▽メニュー項目にマウスが載ったときの装飾 */
ul#nav-2 li a:hover {
   background-color: #ffdddd;
   color: #cc0000;
}

/***************                  *************
@media screen and (max-width: 700px) {

 .tinynav { 
      display: block;
      border: #a00 solid 2px; 
      background: #ffdddd ; 

     }
#nav { display: none }


     
}

**/
@media screen and (max-width: 650px) {
   .nav-3 { display: none

 .tinynav { 
      display: block;
      border: #a00 solid 2px; 
      background: #ffdddd ; 

     }
   
    }

ul.nav-3 {

   margin: 0px;               /* バー外側の余白 */
   padding: 0px;              /* バー内側の余白 */
   height: 40px;              /* バーの高さ */
   border: 1px solid #cc0000; /* バーの枠線 */
   float: left ;
}


ul.nav-3 li {
    width: 180px;             /* 項目の横幅 */
    height: 40px;             /* 項目の高さ(バーの高さと同じに) */
    border-right: 1px solid white; /* 項目の区切り線 */
    float: left;
    list-style-type: none;
}

ul.nav-3 li a {
/*    background-color: #cc0000; 項目の背景色 */
  /*     color: white;           項目の文字色 */
    line-height: 40px;        /* 項目のリンクの高さ(「メニュー項目の高さ」と一致させる) */
 /*     text-align: center;      文字列の配置(中央寄せ) */
    text-decoration: none;    /* 項目の装飾(下線を消す) */
    display: block;
    width: 100%;
    height: 100%;
    float: left ;
}

/* ▽現在位置項目の装飾 */
ul.nav-3 li.selected a {
   font-weight: bold;
   background-color: #990000;
}

/* ▽メニュー項目にマウスが載ったときの装飾 */
ul.nav-3 li a:hover {
   background-color: #ffdddd;
   color: #cc0000;
}










/*      スライド用        */

.swiper-container {
        width: 100%;
        height: 240px;
        margin: 5px 0;
    }

body {
        margin: 0;

    }