@charset "utf-8";

/* ---------------------------------

  Column-ttl

--------------------------------- */

.Column-ttl{
  max-width: 1560px;
  margin: 0 auto;
  position: relative;
}
.Column-ttl .ttl-wrap{
  display: inline-block;
  padding: 20px 30px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.Column-ttl .ttl-wrap dl{
  display: flex;
  margin-top: 7px;
  align-items: center;
}
.Column-ttl .ttl-wrap dl .date{
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  opacity: .6;
}
.Column-ttl .ttl-wrap dl .tag{
  margin-left: 6px;
  padding: 4px 6px;
  border-radius: 3px;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
}
.Column-ttl .ttl-wrap dl dd:nth-of-type(2){
  margin-left: 8px;
}
.Column-ttl .ttl-wrap dl .tag.truck{
  background-color: #768f5c;
}
.Column-ttl .ttl-wrap dl .tag.van{
  background-color: #5b708c;
}
.Column-ttl .ttl-wrap dl .tag.outdoor{
  background-color: #8e805c;
}
.Column-ttl .ttl-wrap dl .tag.itemflash{
  background-color: #5a5c58;
}
.Column-ttl .ttl-wrap h2{
  margin-top: 7px;
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: 600;
}
.Column-ttl .photo{
  position: relative;
}
.Column-ttl .photo figcaption{
  padding: 12px 16px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}
.Column-ttl .photo img{
  width: 100%;
}

.topic-path{
  max-width: 1280px;
}


.Column-detail .inner{
  max-width: 1280px;
}
.Column-detail .lead{
  text-align: center;
  line-height: 2.0;
}

.Column-detail .sec{
  margin-top: 120px;
}
.Column-detail .sec.bg{
  padding: 120px 0;
  background-color: #f1f4f4;
}
.Column-detail .sec .sec-ttl{
  display: block;
  padding: 25px 0;
  border-top: 1px solid #3f3f3f;
  border-bottom: 1px solid #3f3f3f;
  text-align: center;
  position: relative;
}
.Column-detail .sec .sec-ttl > p{
  padding: 7px 15px 8px;
  background-color: #3f3f3f;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);
}
.Column-detail .sec .sec-ttl h3{
  font-size: 2.4rem;
  line-height: 1.5;
}
.Column-detail .txt {
  margin-top: 10px;
}
.Column-detail .sec .flexbox{
  display: flex;
  margin-top: 50px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.Column-detail .sec .flexbox:nth-of-type(odd){
  flex-flow: row-reverse;
}
.Column-detail .flexbox .txtwrap, .Column-detail .flexbox .photo{
  width: 48%;
}
.Column-detail .flexbox .txtwrap .icon-per{
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}
.Column-detail .flexbox .txtwrap .icon-per.sp{
  display: none;
}
.Column-detail .flexbox .txtwrap .icon-per .icon{
  display: inline-block;
  width: 60px;
  border-radius: 50rem;
  overflow: hidden;
  position: relative;
}
.Column-detail .flexbox .txtwrap .icon-per .icon::after{
  content:"";
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50rem;
  border: 4px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  left: 0;
}
.Column-detail .flexbox .txtwrap .icon-per span +span{
  margin-left: 10px;
  font-size: 1.6rem;
  color: #495b25;
}
.Column-detail .flexbox .txtwrap .txt{
  font-size: 1.4rem;
  line-height: 2.0;
  letter-spacing: .18rem;
}
.Column-detail .flexbox .txtwrap .txt.comment{
  padding: 20px 0;
  font-size: 1.2rem;
  line-height: 2.0;
  color: #565656;
  position: relative;
}
.Column-detail .flexbox .txtwrap .txt.comment::before{
  content: "“";
  font-size: 1.8rem;
  position: absolute;
  top: 0;
  left: 0;
}
.Column-detail .flexbox .txtwrap .txt.comment::after{
  content: "”";
  font-size: 1.8rem;
  position: absolute;
  bottom: 0;
  right: 0;
}
.Column-detail .flexbox .photo figcaption{
  margin-top: 5px;
  font-size: 1.2rem;
  text-align: right;
}

.Column-detail .photo.wide{
  text-align: center;
}

.Column-detail .box-profile{
  width: 90%;
  max-width: 800px;
  margin: 60px auto 120px;
  padding: 30px 30px 20px;
  border: 1px solid #000000;
  position: relative;
}
.Column-detail .box-profile > p{
  display: inline-block;
  padding: 0 15px;
  background-color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 20px;
  transform: translate(0,-50%);
}
.Column-detail .box-profile dl{
  display: flex;
  align-items: center;
}
.Column-detail .box-profile dl .icon-per .icon{
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50rem;
  overflow: hidden;
  position: relative;
}
.Column-detail .box-profile dl .icon-per .icon::after{
  content:"";
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50rem;
  border: 4px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  left: 0;
}
.Column-detail .box-profile dl .icon-per span +span{
  display: block;
  margin-top: 2px;
  font-size: 1.4rem;
  line-height: 1;
  color: #495b25;
  text-align: center;
}
.Column-detail .box-profile dl dd{
  margin-left: 15px;
  font-size: 1.3rem;
}

.Column-detail .btn.round{
  max-width: 320px;
  margin: 60px auto 0;
}

.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}



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

    Column-ttl

  --------------------------------- */

  .Column-ttl .ttl-wrap.pc{
    display: none;
    padding: 20px 30px;
    background: #fff;
    position: static;
  }
  .Column-ttl .photo figcaption{
    padding: 12px 16px;
    font-size: 1.4rem;
    text-align: center;
    position: static;
  }
  .Column-ttl.sp{
    display: block;
  }
  .Column-ttl.sp .ttl-wrap{
    padding: 0;
    background: none;
    position: static;
  }
  .Column-ttl .ttl-wrap dl{
    margin-top: 0;
  }
  .Column-ttl .ttl-wrap dl .date{
    font-size: 1.3rem;
  }
  .Column-ttl .ttl-wrap dl .tag{
    margin-left: 6px;
    padding: 4px 6px;
  }
  .Column-ttl .ttl-wrap dl dd:nth-of-type(2){
    margin-left: 8px;
  }
  .Column-ttl .ttl-wrap h2{
    margin-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #7c7c7c;
    font-size: 4.6vw;
  }


  .Column-detail .lead{
    margin-top: 30px;
    font-size: 1.3rem;
    line-height: 2.2;
    letter-spacing: .1rem;
  }

  .Column-detail .sec{
    margin-top: 60px;
  }
  .Column-detail .sec.bg{
    padding: 60px 0;
  }
  .Column-detail .sec .sec-ttl{
    padding: 24px 0 20px;
  }
  .Column-detail .sec .sec-ttl > p{
    padding: 6px 12px 7px;
    font-size: 1.2rem;
  }
  .Column-detail .sec .sec-ttl h3{
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .Column-detail .sec .flexbox{
    margin-top: 30px;
  }
  .Column-detail .sec .flexbox:nth-of-type(odd){
    flex-flow: wrap;
  }
  .Column-detail .flexbox .txtwrap, .Column-detail .flexbox .photo{
    width: 100%;
  }
  .Column-detail .flexbox .txtwrap .icon-per{
    margin-bottom: 12px;
  }
  .Column-detail .flexbox .txtwrap .icon-per.sp{
    display: flex;
  }
  .Column-detail .flexbox .txtwrap .icon-per .icon{
    width: 50px;
  }
  .Column-detail .flexbox .txtwrap .icon-per .icon::after{
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,0.6);
  }
  .Column-detail .flexbox .txtwrap .icon-per span +span{
    margin-left: 10px;
    font-size: 1.6rem;
  }
  .Column-detail .flexbox .txtwrap .txt{
    line-height: 1.8;
    letter-spacing: .18rem;
  }
  .Column-detail .flexbox .txtwrap .txt.comment{
    padding: 25px 0;
    font-size: 1.3rem;
    line-height: 1.8;
  }
  .Column-detail .flexbox .txtwrap .txt.comment::before{
    font-size: 1.6rem;
  }
  .Column-detail .flexbox .txtwrap .txt.comment::after{
    font-size: 1.6rem;
  }
  .Column-detail .flexbox .photo{
    margin-top: 20px;
  }
  .Column-detail .flexbox .photo figcaption{
    margin-top: 5px;
    font-size: 1.0rem;
    letter-spacing: 0;
  }

  .Column-detail .box-profile{
    margin: 40px auto 60px;
    padding: 5%;
  }
  .Column-detail .box-profile > p{
    padding: 0 15px;
    font-size: 1.8rem;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .Column-detail .box-profile dl{
    display: block;
  }
  .Column-detail .box-profile dl .icon-per{
    display: flex;
    align-items: center;
  }
  .Column-detail .box-profile dl .icon-per .icon{
    width: 60px;
    height: 60px;
  }
  .Column-detail .box-profile dl .icon-per .icon::after{
    width: 60px;
    height: 60px;
  }
  .Column-detail .box-profile dl .icon-per span +span{
    display: inline-block;
    margin-top: 2px;
    margin-left: 12px;
    font-size: 1.4rem;
    text-align: left;
  }
  .Column-detail .box-profile dl dd{
    margin-top: 10px;
    margin-left: 0;
    font-size: 1.3rem;
  }
  
  .Column01 .Column-detail .sec04 .photo.wide{
    margin-top: 3px;
  }

  .mt20{margin-top: 10px;}
  .mt30{margin-top: 15px;}
  .mt40{margin-top: 20px;}
  .mt50{margin-top: 25px;}
  .mt60{margin-top: 30px;}
}