#topttl{ position:relative; display:block;  width:100%; height:500px;}
#topttl.tri-index{ background-image:url(../img/trilogy-banner.jpg); }
#topttl.tri-history{ background:url(../img/history/trilogyhistoire-banner.jpg) no-repeat #fff; }
#topttl.tri-guide{ background:url(../img/guide/trilogyguides-banner.jpg) no-repeat #fff; }
#topttl.tri-tech{ background:url(../img/trilogy-goretex_03.jpg) no-repeat #fff; }
@media (max-width: 767px) {
#topttl.tri-index{ background-image:url(../img/trilogy-bannermob.jpg); }
#topttl.tri-history{ background:url(../img/history/trilogyhistoire-bannermob.jpg) no-repeat #fff; }
#topttl.tri-guide{ background:url(../img/guide/trilogyguides-bannermob.jpg); }

}


.std {
font-family: メイリオ,Meiryo,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,sans-serif;
}
.navPageTitle a {
  padding: 15px 0;
  line-height: 20px;
  display: inline-block;
}
.navbar-nav li {
  margin-right: 20px;
  height: 100%;
  float: left;
}
@media (max-width: 767px) {

.navbar-nav li {
  float: none;
  font-size: 13px;
  margin: 8px 0;
  position: relative;
  display: block;
}
}

#rollStopRespNav {
  width: 90% !important;
  left: 50%;
    transform: translate(-50%, 0);
  margin: 0 auto;
}
@media (max-width:767px) {
  #rollStopRespNav {
    width: 100% !important;
    margin: 0 auto;;
  }
}
img{
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
/*millet fr*/
.navbar-inverse .navbar-nav > li.nav_active > a {
  background-color: transparent;
  color: #ff0718;
}
.std p {
    margin: 0 0 1.5em;
}
.bloc-produit {
  padding: 1.5em 5px 0;
}
.bloc-produit a {
  display: block;
}
.bloc-produit a:hover {
  cursor: pointer;
}
.bloc-produit:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  transition-duration: 1s;
  transition-property: transform;
}
.sousblocimg{margin:0}

.logotex{
  margin-bottom:20px;
}
.text-content .logotex{
  margin-bottom: 10px;
}
.boutonsuite{text-transform:uppercase;color:#616161;font-size:22px;margin-bottom:20px;letter-spacing: 1.2px;}
.textbloc{margin:30px 30px 0 0}
.sousbloc{width:33%}
.sousbloc1{/*background-color:#f5f5f5;*/padding: 10px 0;}
.texte{margin:40px 100px 50px 100px}
.text-bold{font-size:15px;font-weight:700;color:#616161;}
p.nom-guide{font-size:15px;font-weight:700;color:#262e3b;margin-bottom:10px;}
p.cie{color:#262e3b;font-size:15px;}
.text-regular{font-size:15px;font-weight:400;margin:40px 50px 50px;color:#616161;}
.text-bold-big{font-size:30px;line-height:35px!important;font-weight:700;color:#616161;}
.bloc-Trilogy{margin-top:50px}
.button2{
  color: #ff0718;
  font-weight: bold;
  border: 2px solid #ff0718;
  display: inline-block;
  text-align: center;
  padding: 15px 20px;
  background-image: linear-gradient(to top, #F44336 50%, rgba(0,0,0,0) 50% );
  background-position: 0 0;
  background-size: auto 200%;
  transition: all .3s ease 0s;
  text-decoration: none;
}
.button2:hover{
  color: #fff;
  cursor: pointer;
  background-position: 0 -100%;
}
.button2.btnw100 {
  width: 100%;
	background: #FF0000;
}
.introduction{margin:20px;text-align:center}
.bouton{text-align:left}
.bloc-gauche{width:70%;height:auto;margin-right:5%}
.vid-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}
.vid-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bloc-droit{display:block;width:30%;color:#616161}.bloc{display:flex}
.blocresponsive{display:none}
.blocdesktop{margin:50px 0 0;position:relative;width:100%;height:auto;}
.image-content{position:relative}
.text-content{position:absolute;top:10%;left:5%}
p.titreblanc{
  color:#fff;
  font-size:30px;
  text-transform:uppercase;
  text-align:left;
  margin-bottom:10px;
  font-weight:700;
  line-height:40px!important;
}
p.textblanc{color:#fff;font-size:18px;font-weight:700;text-align:left;}
p.textesimplebas{
  text-decoration:underline;
  text-align:center;
  color:#343230;
  font-size:14px;
}
.bloc4produits{display:flex}
.bloc-produit{
  width: 25%;
  margin: 10px;
 /* background-color: #f5f5f5;*/
}
.sousbloc{width:100%;}

@media screen and (max-width: 767px) {
  .sousblocimg:last-of-type {
    margin-bottom: 30px;
  }
  .button2.btnw100 {
    width: auto;
    margin-bottom: 40px;
			background: #FF0000;
  }
  .introduction a {
    margin-top: 20px
  }
  p.textblanc {
    margin: 0;
    margin-bottom: 10px;
    font-size: 2.4vw;
  }
  .text-content {
    top: 10%
  }
  p.titreblanc {
    font-size: 4vw;
    margin-bottom: 10px;
    line-height: 1.2 !important
  }
  .texte {
    margin: 0;
  }
  .bloc-gauche {
    width: 100%;
    margin-right:0;
  }
  .bloc-droit {
    display: block;
    width: 100%
  }
  .bloc {
    flex-direction: column
  }
  .sousbloc {
    width: 100%
  }
  .bloc-Trilogy {
    margin-top: 10px
  }
  .bloc4produits {
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: auto
  }
  .bloc-produit {
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
    height: auto
  }
  .bloc4produits {
    margin: 20px 0;
  }
  .bloc-produit img {
    width: 100%;
    text-align: center;
    height: auto;
    margin: 0 auto
  }
  .sousbloc {
    width: 100%;
    padding: 10px;
    margin-right: 0
  }
  .blocresponsive {
    display: block;
    margin: 50px 0;
    position: relative;
    width: 100%;
    height: auto
  }
  .blocdesktop {
    display: none
  }
}

/*history*/
.bloc-droit2 {
  display: block;
  width: 70%;
  margin-right: 0;
  margin-left: auto;
  margin-top: 5%;
}

.texte2 {
  margin: 60px 250px 50px 0px;
}
.col {
  column-count: 3;
}
.btn-rouge {
  margin-right: 0;
  margin-left: auto;
  font-size: 18px;
  line-height: 1em;
  letter-spacing: 3px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-style: normal;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #ff0718;
  padding: 10px 20px;
  margin-top: 50px;
  cursor: pointer;
  border: 2px solid #ff0718;
}
.btn-rouge:hover {
  border: 2px solid #ff0718;
  background-color: transparent;
  color: #ff0718;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
.btn-rouge {
  margin-right: auto;
  margin-left: auto;
}
}


/*ガイド*/
.bloc-gauche2 {
  width: 33%;
  padding-top: 110px;
  margin-right: 5%;
}
p.citation.text-bold {
  font-size: 24px;
  line-height: 1.4;
}
.bloc-gauche3 {
  margin-right: 5%;
  width: 100%;
  margin-top: 3%;
}
.bloc-droit3 {
  display: block;
  width: 100%;
  margin-top: 5%;
}
.title {
  text-align: center;
  color: #616161;
  font-weight: bold;
  margin: 5% 0;
  font-size: 18px;
}
.bloc3produits {
    display: flex;
    margin-right: 10%;
    margin-left: 10%;
}
.bloc-produit {
    margin: 10px 0;
    margin-bottom: 5%;
}
.trilogy-guide .bloc-produit {
    width: 33.3%;
}

/*tech*/
.tech .col {
    column-count: 2;
}
.tech .btn-rouge {
    margin: 0 auto;
    font-size: 24px;
    line-height: 1em;
    letter-spacing: 3px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    vertical-align: middle;
    white-space: nowrap;
    background-color: #ff0718;
    padding: 10px 20px;
    margin-top: 50px;
    cursor: pointer;
    border: 2px solid #ff0718;
}
.tech .bloc3produits .bloc-produit {
  width: auto !important;
}
@media screen and (max-width: 767px) {
  .bloc3produits {
    display: flex;
    margin-right: 0;
    margin-left: 10%;
  }
  .bloc3produits {
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: auto;
}
  .trilogy-guide .bloc-produit {
    width: auto;
  }
  .bloc.ratti {
    flex-direction: column-reverse;
    margin-bottom: 10%;
  }
  .bloc-gauche2 {
    width: auto;
    padding-top: 50px;
    margin-right: 0;
  }
  .bloc-gauche,
  .logox3 {
    margin-bottom: 20px;
  }
  .bloc-droit2 {
    display: block;
    width: 100%;
    margin-top: 5%;
  }
  .bloc {
    flex-direction: column;
  }
  .texte2 {
    margin: 60px 0px 50px 0px;
  }
  .col {
    column-count: 1;
}
  .tech .col {
    column-count: 1;
  }
}