/*
 * swiper.css
 *   特殊スライダー「Swiper」用
 *   Add T2 20.01.05
 */


/* ----------------------------------------------
 * 共通
 * ---------------------------------------------- */ 

:root {
    --swiper-theme-color: #58FAF4;     /* 矢印・粒の色 */
    --swiper-navigation-size: 64px;     /* ナビゲーション矢印のサイズ */
}            
@media (max-width: 767px) {:root { --swiper-navigation-size: 44px; }}
@media (max-width: 479px) {:root { --swiper-navigation-size: 34px; }}

/* ナビゲーション矢印の位置(前と後) */
.swiper-button-prev,.swiper-container-rtl .swiper-button-next { 
    left: 15px; 
    right: auto;
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev { 
    right: 15px; 
    left: auto;
}

/* ページネーションの粒の大きさ */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}

/* ページネーション配置 → 動画(mp4)のコントロールパネル表示時にページネーションが邪魔して操作できない場合は位置を調整 */
.swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: 50px;   /* default is 10px */
}

.swiper-box{
    line-height: 0; /* サムネイル(縦の時に下端にスペースができてしまう対策) */
}
.swiper-container{}
.swiper-container .swiper-slide{
    background-size: cover;
    background-position: center;
    text-align: center;
    font-size: 18px;    
}

/* 画像：元画像サイズより幅が広がった時の為に全幅にする */
.swiper-container .swiper-slide a,
.swiper-container .swiper-slide img {
    width:100%; 
}    

/* 動画(videoタグ) */
.swiper-container .swiper-slide video{
     width:100%;
     height:100%;    /* [width:100%]を指定時は無い方が良いかも？(あると縦中央揃いとなるが youtube の iframe と縦位置が揃わないため) */
}
 
/* 縦中央 https://saruwakakun.com/html-css/basic/centering#section2 */
.swiper-container .movie-container{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
}

/* Youtube埋込をレスポンシブ化 */
.swiper-container .movie-wrap {
     position: relative;
     padding-top: 56.25%;   /* アスペクト比 16:9=56.25%、4:3=75% */
     height: 0;
     overflow: hidden;
}
.swiper-container .movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
/* サムネイル内のyoutubeを操作させないためのレイヤー */
.swiper-container .movie-layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}
 
/* 内容(タイトル・テキスト) */
.swiper-container .swiper-slide .swiper-slide-content {
   text-align:center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: all 2s ease 0s;
   font-weight: bold;
   color:var(--swiper-theme-color);
   font-size: 2em;
   line-height: 1.15em;
}   
@media (max-width: 479px) {
    .swiper-container .swiper-slide .swiper-slide-content {
        font-size: 1em;
    }   
}
.swiper-container .swiper-slide .swiper-slide-content .swiper-slide-content-title{
    font-size: 1em;
    font-weight: bold;
}
.swiper-container .swiper-slide .swiper-slide-content .swiper-slide-content-text{
    font-size: 0.75em;
    font-weight: normal
}

/* 縦中央(画像も中央配置となる) ← [.swiper-slide]内に書くと youtube の iframe が表示されない */
.swiper-container .swiper-slide.swiper-slide-image{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}



/* ----------------------------------------------
 * .swiper-type-slide : 前後表示(標準)
 * ---------------------------------------------- */ 
.swiper-type-slide .swiper-container{
    width: 100%;
    height: 35vw;    /* 100vh で縦フルスクリーン */
}
@media (max-width: 479px) {
    .swiper-type-slide .swiper-container{
        height:70vw;
    }
}

/* 正方形画像の場合、下記がベスト!
.swiper-type-slide .swiper-container{
    width: 100%;
    height: 60vh;
    max-height:50vw;    //縦長スクリーン対応
}
@media (max-width: 479px) {
    .swiper-type-slide .swiper-container{
        height:45vh;
        max-height:100vw;
    }
}
*/

/* ----------------------------------------------
 * .swiper-type-cube : 箱回転
 * ---------------------------------------------- */ 
.swiper-type-cube .swiper-container{
    width: 50vw;
    height: 50vw;
}



/* ----------------------------------------------
 * .swiper-type-thumb_v : サムネイル(縦)
 * ---------------------------------------------- */ 
.swiper-type-thumb_v{
    /* background-color: #000; */
    background-color: #fff;
}
.swiper-type-thumb_v .swiper-main-left,
.swiper-type-thumb_v .swiper-thumb-right{
    /*
    height: 35vw;
    */
    height: 41.5vw; /* 2:1の画像5点用 */
    display: inline-block;
}
/*
@media (max-width: 479px) {
    .swiper-type-thumb_v .swiper-main-left,
    .swiper-type-thumb_v .swiper-thumb-right{
        height: 70vw;
    }
}
*/    
.swiper-type-thumb_v .swiper-main-left {
    /* width: 80%; */
    width: 83.5%; /* 2:1の画像5点用 */
}
.swiper-type-thumb_v .swiper-thumb-right {
    /* width:calc(20% - 6px); */
    width:calc(16.5% - 6px); /* 2:1の画像5点用 */
    padding: 0;
    
    /* Add T2 20.03.12 下記は Safari/iPhone/iPad 対応 */
    position: absolute;
    top:0;
    right:3px;
}
.swiper-type-thumb_v .swiper-thumb-right .swiper-slide {
    opacity: 0.4;
}
.swiper-type-thumb_v .swiper-thumb-right .swiper-slide-thumb-active {
    opacity: 1;
}

/* サムネイルのはみ出した部分を非表示 */
.swiper-type-thumb_v .swiper-thumb-right .swiper-slide{
    overflow:hidden;
}

/* サムネイルのvideoタグ横幅いっぱいに */
.swiper-type-thumb_v .swiper-thumb-right .swiper-slide video{
    height: auto;
}

/* ----------------------------------------------
 * .swiper-type-index-pr : PRスライド表示
 * ---------------------------------------------- */ 
.swiper-type-index-pr .swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item{
    text-align: left;
    font-size:12px !important;;
}
.swiper-type-index-pr .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: 7px;   /* default is 10px */
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row.gutter-0 .index-pr-text{
    padding-right: 15px;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .title{
/*
    font-size: 1.2em !important;
    line-height: 1.2em !important;
    padding: 0 !important;
*/
    font-size: 1.2em !important;
    line-height: 1.8em !important;
    padding: 0.8em 1em !important;
    border-left: 5px solid #ccc;
    margin-bottom: 1em;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .title:before,
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .title:after{
    padding: 0 !important;
    margin: 0 !important;
    content: "" !important;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .item-text{
/*
    font-size: 1em !important;
    line-height: 1.25em !important;
    padding: 7px 0 !important;
*/
    font-size: 1em !important;
    line-height: 1.8em !important;
    padding: 7px 0 !important;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .link-btn{
    text-align: center;
    padding:1em;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .link-btn a.btn{
    width: auto;
}
.swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .link-btn a.btn:hover{
    
}
.idx-02 .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .title{
    padding-top:15px !important;
}
.idx-02 .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .title,
.idx-02 .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text .item-text{
    padding-left: 15px !important;
    padding-right: 15px !important;
}
@media (max-width: 479px) {
    .swiper-type-index-pr .swiper-container{
        height: auto;
    }
    /* テキストと画像を上下反転させる(flex と order を使用) https://qiita.com/saksak/items/6ade0be65ad83733e993 */
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row{
        display: flex;
        flex-flow: row wrap;
    }    
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row.gutter-0 .index-pr-text{
        padding-right: 0;
    }
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text,
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-image{
        width:100%;
    }      
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-text{
        margin-top: 7px;
        order:2;
    }
    .swiper-type-index-pr .swiper-container .swiper-slide .item .row .index-pr-image{
        order:1;
    }    
}