@font-face {
    font-family: "futura";
    src: url("../fonts/Futura.ttf") format("truetype");
}
body {
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#242424;
    line-height:20px;
    }
    
    span {
       display: inline-block;
    }
    
    
    footer{
        text-align: center;
        font-size: small;	
    }
    
    hr {
     height: 0.5px;
     background-color: #000000;
     margin-top:0px;
     border: none;
    }
    
    img {
     width: 100%;
    }
    
    video {
     width: 100%;
    }
    
.videoi{
    position:relative;
    width:100%;
    padding-top:56.25%;
  }
  .videoi iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
  pointer-events: none;
  }	
    
    h1 {
        font-family: Impact, Arial, Helvetica, 'sans-serif';
        font-size: 2em;
        color:#242424;
    }
    
    /*トップページのタイトル*/
    .toptitle{
     font-family: Arial, Arial, Helvetica, 'sans-serif';
     font-size: 1.9em;
    }
    
    /*商品ページタイトル*/
    .producttitle{
        font-family: Arial, Arial, Helvetica, 'sans-serif';
        font-size: 1.9em;
        color:#0E00C2;	
    }
    
    /*商品ページキャッチコピー*/
    .catch{
        font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
        font-size: 1.2em;
        color: dimgray;	
        margin-bottom: 20px;
    }
    
    .gallary{
        background-image: url(back.png);
        background-size:100% 100%;/*この場合は幅が自動設定*/
        padding-top: 100px;
    }
    
    
    .navbar-brand {
      background: url("../img/logo.png") no-repeat left center;
      background-size: contain;
      height: 50px;
      width: 300px;
    }
    @media (max-width:480px){
    .navbar-brand{
        width: calc((50px / 75) * 277);
    }   
}
    
    /*米印の注釈*/
    .kome{
        font-size: 11px;
        line-height:15px;
    }
    
    
    .swiper-slide div{
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: white;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        font-size: 1em;
        background: rgba(0,0,0,0.5);
        padding: 5px;
        }
    
    
    
    
     /*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ READ MORE↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
    
    p {
        text-align: center;
        font-size: 16px;
        color: #666;
        line-height: 2.5;
        margin: 0;
    }
     
    #text-wrap {
        width: 100%;
        height: 100%;
        display: block;
        margin: 0 auto;
        padding: 0px;
    }
     
    .hide-text {
        display: none;
    }
     
     
    button.readmore {
        position: relative;
        height: 80px;
        width: 90px;
        margin: 40px auto;
        display: block;
        background-color: transparent;
        color: #666;
        padding-bottom: 40px;
        border: none;
        outline: 0;
        transition: .5s;
        -erbkit-transition: .5s;
    }
     
    button.readmore::after {
        content: " ";
        position: absolute;
        width: 30px;
        height: 30px;
        border-top: solid 3px#666;
        border-right: solid 3px #666;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        right: 28px;
        top: 25px;
        transition: .5s;
        -erbkit-transition: .5s;
    }
     
    button.readmore:hover::after {
        top: 40px;
    }
     
    .on-click {
        color: transparent!important;
    }
     
    .on-click {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
    }
    
    
     /*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ TABLE ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
    div.clsjleyav4i{
        margin:0px;}
    
    div.clsjleyav4i table.tbl{
        width:100%;}
    
    div.clsjleyav4i{
        padding:0px;
        border:1px solid rgba(255,255,255,0.5);}
    
    div.clsjleyav4i{
        background-color:transparent;}
    
    div.clsjleyav4i table.tbl th,div.clsjleyav4i table.tbl td{
        border:none;
        border-bottom:1px solid #000000;
        padding:0px;}
    
    div.clsjleyav4i table tr:nth-of-type(odd){
        background-color:#f5f5f5;}
    
    div.clsjleyav4i table.tbl{
        border-collapse:collapse;
        border-spacing:0;
        table-layout:auto;
        font-size:11px;
        text-align:left;}
    
    div.clsjleyav4i table.tbl,div.clsjleyav4i table.tbl a{
        color:#333333;}
    
    div.clsjleyav4i table.tbl th,div.clsjleyav4i table.tbl th a{
        color:#000000;}
    
    div.clsjleyav4i table.tbl th{
        font-weight:normal;
        text-align:center;}
    
    .swiper-my-pagination{
        display:flex;
        flex-wrap:wrap;
    }
    .swiper-container-horizontal > .swiper-my-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
        width:calc(100% / 5);
        margin-top: 1rem;
    }





.catch_phrase{
    text-align:center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color:#f2f2f2;
}
.catch_phrase b{
    font-family: serif;
    font-size: 2.4rem;
}
.catch_phrase .col-sm-12 + .col-sm-12{
    margin-top:2rem;
    line-height:1.5;
}


@media (max-width:480px){
    .catch_phrase{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .catch_phrase b{
        font-size:1.5rem;
    }
    .catch_phrase .col-sm-12 + .col-sm-12{
        text-align:left;
        font-size:0.8rem;
    }
}


.story_phrase{
    text-align:center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color:rgba(39,37,45,1);
    color:#fff;
}
.story_phrase b{
    font-family: sans-serif;
    font-size: 1.5rem;
}
.story_phrase .col-sm-12 + .col-sm-12{
    margin-top:1rem;
    line-height:1.5;
}


@media (max-width:480px){
    .story_phrase{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .story_phrase b{
        font-size:1.5rem;
    }
    .story_phrase .col-sm-12 + .col-sm-12{
        text-align:left;
        font-size:0.8rem;
    }
}

.switch_btn-row{
    display: flex;
    justify-content: center;
    margin-top:2rem;
}

.switch_btn{
    display:flex;
    width: 20rem;
    font-family: "futura";
    font-weight:bold;
    font-size: 0.8rem;
    text-align: center;
    border: 1px solid #000;
    border-radius: 0.75rem;
    overflow:hidden;
    position:relative;
    color:#666;
    cursor: pointer;
}
.switch_btn > .item{
    width:50%;
    padding: 0.5rem;
    transition: color 0.5s ease;
}

.switch_btn > .item.active{
    color:#000;
}
.switch_btn:before{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    height:100%;
    width:50%;
    background-color:#888;
    transition: left 0.5s ease;
}
.switch_btn:has( .item_1.active):before{
    left:50%;
}
.switch_btn:has( .item_2.active):before{
    left:0%;
}
div:has( +  .switch_btn-row .item_2.active) .sc1{
    display:none;
}
div:has( +  .switch_btn-row .item_1.active) .sc2{
    display:none;
}



.switch_btn-row{
    position:relative;
}
.switch_btn-row:before{
    content:"";
    display:block;
    position:absolute;
    z-index:10;
    height:100%;
    width:50%;
    transition: left 0.5s ease;
}
.switch_btn-row:has( .item_1.active):before{
    left:0%;
}
.switch_btn-row:has( .item_2.active):before{
    left:50%;
}
/* 
@media (max-width:600px){
    .switch_btn{
        width: 20rem;
    }
} */