@charset "utf-8";

/****共通*****************************************************************/
#brand-top--content .is-pc {
  display: block;
}
#brand-top--content .is-sp {
  display: none;
}
#brand-top--content .f-large {
  font-size: 17px;
  line-height: 1.8em;
}
#brand-top--content .f-xlarge {
  font-size: 20px;
}
#brand-top--content .f-xxlarge {
  font-size: 30px;
}
#brand-top--content .color-lightgray {
  color: #999;
}
#brand-top--content .bg-black {
  background-color: #000;
}

#brand-top--content .od-category-hero-image-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1920px;
  margin: 0 auto;
}
#brand-top--content .od-product-list-container {
  position: relative;
}
#brand-top--content .od-category-hero-image {
  width: 100%;
  height: auto;
  /* object-fit: cover; */
  aspect-ratio: auto;
  max-width: 1920px;
}
/* グローバル変数の定義 */
:root {
 --delay: 5s; /* スライドショーの速度 */
}

#brand-top--content .od-category-hero-image-container .brand-logo {
    position: absolute;
    width: 80%;
    height: 100%;
    max-width: 1920px;
    top:0;
    left:50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#brand-top--content #bg-animation {
    position: relative;
    margin: 50px auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: 32/13;
}
#brand-top--content #bg-animation .img-item {
  position: absolute;
  top : 0;
  left : 0;
  max-width : 100%;
  max-height : 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 32/13;
  /*
  opacity : 0;
  animation : itemFade-anim 15s infinite;*/
}
#brand-top--content #bg-animation .img-item picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

#brand-top--content #bg-animation #photo1 {
  animation-delay : 0s;
}
#brand-top--content #bg-animation #photo2 {
  animation-delay : 5s;
}
#brand-top--content #bg-animation #photo3 {
  animation-delay : 10s;
}
@keyframes itemFade-anim {
  0% {
    opacity : 0;
  }
  10%{
    opacity : 1;
    z-index : 3;
  }
  33%{
    opacity : 1;
  }
  40%{
    opacity : 1;
  }
  50%{
    opacity : 0;
    z-index : 1;
  }
  100% {
    opacity : 0;
  }
}

#brand-top--content #bg-video {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 32/13;
    text-align: center;  
    display: flex;
    justify-content: center;
    align-items: center;
}
#brand-top--content #bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

/*hero 以下*/

#brand-top--header {
  position: absolute;
  top:50px;
  left:60px;
}
#brand-top--header h2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1em !important;
}
#brand-top--header h2.brand-top--header_logo {
  width: 200px;
  display: flex;
  align-items: center;
}
#brand-top--header h2.brand-top--header_logo img {
  width: 100%;
  height: auto;
}

#brand-top--cont-Seciton {
  width: 100%;
  padding: 50px 0 0;
}
#brand-top--cont-Seciton h3 {
  color: #222;
}
#brand-top--cont-Seciton h3 span {
  display: inline-block;
  margin-left: 15px;
  font-size: 70%;
}
#brand-top--cont-Seciton h3+p {
  margin-top: 20px;
}
#brand-top--cont-Seciton p {
  line-height: 1.8em;
}
#brand-top--cont-Seciton p+p {
  margin-top: 15px;
}
#brand-top--cont-Seciton iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
#brand-top--cont-Seciton ul li,
#brand-top--cont-Seciton ol li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs__content--wrap .tabs__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  /*background-color: #eeeeee;*/
  color: #333333;
  font-size: clamp( 11px, 3.5vw, 16px );
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  min-width: 140px;
  max-width: 210px;
  border:solid 1px #CCC
}
 .tabs__item+ .tabs__item {
  border-left: none;
 }
.tabs__content--wrap .tabs__menulist {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tabs__content--wrap .tabs__item:hover,
.tabs__content--wrap .tabs__item:has(input:focus) {
  background-color: #dddddd;
}
.tabs__content--wrap input {
  border: 0 !important;
  clip: rect( 0, 0, 0, 0 ) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}
.tabs__content--wrap .tabs__content {
  overflow: hidden;
  position: absolute;
  height: 0;
}
.tabs__content--wrap .tabs__menulist:has(#tabs__cont01 > input:checked) ~ #tabs__cont01__content,
.tabs__content--wrap .tabs__menulist:has(#tabs__cont02 > input:checked) ~ #tabs__cont02__content,
.tabs__content--wrap .tabs__menulist:has(#tabs__cont03 > input:checked) ~ #tabs__cont03__content,
.tabs__content--wrap .tabs__menulist:has(#tabs__cont04 > input:checked) ~ #tabs__cont04__content {
  overflow: visible;
  position: static;
  height: auto;
  padding: 2rem 0;
}
.tabs__content--wrap .tabs__item:has(input:checked),
.tabs__content--wrap .tabs__item:has(input:focus:checked) {
  background-color: #eee;
}
.tabs__content--wrap .tabs__item:has(input:checked)::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 4px;
    background: #222;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.flexbox.spacebetween {
  justify-content: space-between;
}
.w50 {
  width: 48%;
}
.wl60 {
  width: 60%;
  padding-right: 2%;
  box-sizing: border-box;
}
.wr40 {
  width: 40%;
  padding-left: 2%;
  box-sizing: border-box;
}

.flexbox img {
  width: 100%;
}

.hidden-content {
  position: relative;
  height: 580px;
  overflow: hidden;
  transition: .4s;
}
.hidden-content:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  transition: .4s;
  z-index: 100;
}
.hidden-content.active:before{
  opacity: 0;
  visibility: hidden;
}
.show {
  display: block;
}

.more-button-cont {
  width: 100%;
  margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  position: absolute;
  z-index: 101;
  bottom: 20px;
  cursor: pointer;
}
.more-button {
  background-color: #222;
  color: #FFF;
  border: none;
  padding: 12px 0;
  width: 140px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
  margin: 0 auto;
  border-radius: 32px;
  line-height: 1em;
}
.more-button span.arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  transition: transform 0.3s;
  transform: rotate(45deg);
}
.more-button span.arrow:before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0;
  border-bottom: solid 2px #FFF;
  border-right: solid 2px #FFF;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 3px;
  margin: auto;
}
.more-button:hover {
  background-color: #999;
}
/* 展開時はボタンをコンテンツの下に配置 */
.hidden-content.active .more-button-cont {
  position: relative;
  bottom: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}


/****nikwax *****************************************************************/

div#footer {
  width: 100%;
  height: 59px;
  background: url(../img/common/foot_bg.jpg) repeat-x;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}
.snsIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.snsIcon li:not(:last-of-type) {
  margin-right: 20px;
}
.snsIcon li img {
  width: 22px;
  height: auto;
}
.snsIcon a:hover, .snsIcon a:active {
  display: block;
  opacity: 0.6;
}
div#footer .blank {
  visibility: hidden;
}
p#copyright {
  text-align: center;
  font-size: 12px;
  color: #444;
}
div#foot2 {
  padding: 20px 0;
  background: #EDEDE9;
  border-top: 3px solid #000000;
  text-align: center;
}
div#foot2 div {
  margin: 0 5%;
}
div#foot2 dl {
  margin: 0 20px 0 0;
  padding: 0 20px 0 0;
}
div#foot2 dl.nb {
  width: 310px;
}
div#foot2 dt {
  font-weight: bold;
  font-size: 12px;
  margin: 5px 0;
}
div#foot2 dd a:link, div#foot2 dd a:visited {
  font-size: 12px;
  color: #464646;
}
div#foot2 dl.nb dd {
  display: inline-block;
  width: 100px;
}
div.topfooter#footer p {
  text-align: right;
}
ul.topfootnavi li {
  display: inline;
  line-height: 59px;
  margin: 0 10px 0 0;
}
ul.topfootnavi {
  position: absolute;
  top: 0;
  left: 0;
}
ul.topfootnavi li a:link, ul.topfootnavi li a:visited {
  color: #000000;
  font-size: 12px;
  font-weight: bold;
}
div.tfwrap {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
div#topFoot {
  bottom: 0;
  left: 0;
}
div#topFoot div#footer {
  position: relative;
  top: 0;
  left: 0;
}
#header {
  background: #000000;
}
#header ul#navigation {
  text-align: right;
  padding-right: 5%;
  position: relative;
  z-index: 600;
  width: 76%;
  float: right;
}
ul#navigation li {
  display: inline-block;
}
ul#navigation li a:link, ul#navigation li a:visited, ul#navigation li a:hover {
  padding: 20px 0 20px 15px;
  display: block;
  color: #FFFFFF;
  text-decolation: none;
  font-size: 0.9em;
}
ul#navigation li.current a:link, ul#navigation li.current a:visited, ul#navigation li.current a:hover {
  color: #E50000;
}
p#logo2 {
  text-align: right;
  padding: 10px 5%;
  background: url(../img/common/evernew_hbg.png) repeat-x;
  clear: both;
}
div.content_wrap {
  max-width: 1000px;
  margin: 0 auto;
}
div.content_wrap img {
  max-width: 90%;
  height: auto;
}
ul#products_navi {
  margin: 50px 0;
}
ul#products_navi li {
  width: 33%;
  float: left;
  text-align: center;
}
ul#products_navi li img {
  width: 80%;
}
div#contents.sub {}
div.cont1 h2 {
  text-align: center;
  margin: 50px 0;
  padding: 0 100px;
}
div.introduction p {
  text-align: center;
}
p.fig {
  margin: 30px 0 0 0;
}
h3 {
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  margin: 100px 0 30px 0;
}
div.movie {
  width: 560px;
  margin: 0 auto;
  padding: 30px 0;
}
div.howto dl {
  width: 50%;
  float: left;
  /*background:url(../img/common/arrow.png) top right no-repeat;*/
}
div.howto dl:nth-child(2n+1) {
  clear: both;
}
div.howto dl dt {
  font-size: 1.2em;
  margin-bottom: 20px;
}
div.howto .clearFix.ht {
  margin: 0 0 0 40px;
}
div.howto dl:last-child {
  background: none;
}
div.howto dl.lc {
  background: none;
}
div.howto dt {
  text-align: left;
  margin-bottom: 10px;
  font-weight: bold;
  padding: 0 40px 10px 1em;
  font-size: 0.9em;
  height: 2em;
  display: table-cell;
  vertical-align: bottom;
  line-height: 120%;
  text-indent: 10px;
  text-indent: -1em;
}
div.howto dd {
  padding: 0 40px 0 0;
  font-size: 0.9em;
  margin-bottom: 10px;
}
div.howto dd img {
  max-width: 100%;
  height: auto;
}
p.link_bt {
  width: 100%;
  margin: 60px 0;
}
p.link_bt.lbt2 {
  width: 100%;
  margin: 0;
}
p.link_bt a:link, p.link_bt a:visited {
  text-align: center;
  font-size: 40px;
  color: #FFFFFF;
  background: #000000;
  width: 100%;
  display: block;
  padding: 30px 0;
}
/*top*/
div.top1 {
  background: #EDEDE9;
  background-size: cover;
  position: relative;
}
div.top1.bg1 {
  background: url(../img/sample2.jpg) top center no-repeat;
  background-size: cover;
  position: relative;
}
div.top1.bg2 {
  background: url(../img/sample3.jpg) top center no-repeat;
  background-size: cover;
  position: relative;
}
div.top1.bg3 {
  background: url(../img/sample4.jpg) top center no-repeat;
  background-size: cover;
  position: relative;
}
div.top1.bg4 {
  background: url(../img/sample5.jpg) top center no-repeat;
  background-size: cover;
  position: relative;
}
div.top1.top2 {
  background: none;
}
div.top1.top3 {
  background: url(../img/common/boots_bg.jpg) top center no-repeat;
  background-size: cover;
}
div.history p, p.history {
  color: #FFFFFF;
  font-weight: bold;
  text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
  line-height: 250%
}
div.top1 div.content_wrap {
  padding: 80px 20px;
}
div.top1 h2 {
  margin: 30px 0;
}
div.top1 .cont1 h2 {
  margin: 50px 0;
  padding: 0 100px;
  text-align: center;
}
div.top3 p {
  text-shadow: -1px -1px 1px #FFF, 1px 1px 1px #FFF;
}
div.top3 p.fig {
  margin-bottom: 30px;
}
div.top3 p.link_bt {
  text-shadow: none;
}
ul.snav li {
  width: 48%;
  margin: 0 1%;
  float: left;
  text-align: center;
}
ul.snav li span {
  font-weight: bold;
  padding: 20px 0;
  background: #E34131;
  color: #FFFFFF;
  width: 100%;
  display: block;
  font-size: 1.5em;
}
ul.snav {
  margin: 20px 0;
}
ul.snav li a {
  border-left: 1px solid #CCCCCC;
  padding: 20px 0;
  background: #e2e2e2;
  width: 100%;
  display: block;
  font-size: 1.5em;
  color: #000000;
}
h4 {
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.5em;
}
dl.faqbox {
  background: #eee none repeat scroll 0 0;
  margin: 0 0 20px;
  padding: 20px;
}
dl.faqbox dt.question {
  background: #0fa546 none repeat scroll 0 0;
  color: #fff;
}
dl.faqbox dt {
  margin: 5px 0;
  text-align: center;
  width: 100px;
}
dl.faqbox dt.answer {
  background: #0d68e6 none repeat scroll 0 0;
  color: #fff;
}
h2.faq {
  font-size: 3em;
  padding: 60px 0 30px 0;
  text-align: center;
}
/*	2019.1.25 はずい*/
.flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin: 3% 5% 0;
}
.flex:first-of-type {
  margin-top: 0;
}
div[class^="list"] p {
  color: #fff;
  text-shadow: none;
}
.list01 p {
  background: #233883;
}
.list02 p {
  background: #117044;
}
.list03 p {
  background: #446dd0;
}
.shoes .list02 {
  width: 68%;
}
.shoes .list03 {
  width: 28%;
}
.shoes > .flex {
  justify-content: space-between;
  margin: 0;
}
table tr:first-of-type th {
  vertical-align: text-top;
  position: relative;
  padding-bottom: 240px;
}
table tr:first-of-type th img {
  display: block;
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and (max-width: 700px) {
  div.howto dl {
    width: 100% !important;
    float: none !important;
    /*background:url(../img/common/arrow.png) top right no-repeat;*/
  }
  ul#products_navi li {
    width: 100%;
    margin-bottom: 100px;
  }
  ul#navigation li {
    display: block;
  }
  ul#navigation li a:link, ul#navigation li a:visited, ul#navigation li a:hover {
    font-size: 1.9em;
  }
  #header ul#navigation {
    padding-top: 100px;
  }
  .gblnv_box {
    background-color: #000;
    width: 100%;
    height: 124px;
  }
  .gblnv_box a {
    margin: 38px;
  }
  .gblnv_block {
    background-color: #000;
    color: #ffffff;
    height: 500px;
    display: none;
  }
  .gblnv_block ul {
    padding: 10px;
  }
  .gblnv_block ul li {
    line-height: 180%;
  }
  .gblnv_block ul li a {
    color: #ffffff;
    font-size: 26px;
    line-height: 0;
  }
  .onanimation {
    display: block;
  }
  .menu-trigger, .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    position: absolute;
    width: 60px;
    height: 44px;
    right: 0;
    z-index: 1000;
  }
  .menu-trigger span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 20px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
  .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    left: 50%;
    opacity: 0;
    -webkit-animation: active-menu-bar02 .8s forwards;
    animation: active-menu-bar02 .8s forwards;
  }
  @-webkit-keyframes active-menu-bar02 {
    100% {
      height: 0;
    }
  }
  @keyframes active-menu-bar02 {
    100% {
      height: 0;
    }
  }
  .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
  }
  .pc {
    display: none !important;
  }
  div.howto dl {
    width: 50%;
    float: left;
    margin-top: 30px;
  }
  ul.snav li span {
    font-size: 1.1em;
  }
  ul.snav li a {
    font-size: 1.1em;
  }
  div.howto dl:nth-child(even) {
    background: none;
  }
  div.howto dl:nth-child(odd) {
    clear: both;
  }
  ul.snav li {
    width: 48%;
    float: left;
    text-align: center;
  }
  h4 {
    /*padding: 0 20px;*/
  }
  .snsIcon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .snsIcon li:not(:last-of-type) {
    margin-right: 40px;
  }
  .snsIcon li img {
    width: 40px;
    height: auto;
  }
  .snsIcon a:hover, .snsIcon a:active {
    display: block;
    opacity: 0.6;
  }
  div#footer {
    display: block;
    background-size: contain;
    height: 100px;
  }
}
.introduction p {
  margin-bottom: 1em;
}
.introduction h3 {
  margin: 0 0 30px 0;
}
div.top3 h3 {
  text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
}
table {
  width: 80%;
  margin: 20px auto;
}
th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}
th {
  width: 67%;
}
td {
  width: 33%;
}
th.pt01 {
  background: #233883;
  color: #FFFFFF;
  width: 100%;
}
th.pt02 {
  background: #117044;
  color: #FFFFFF;
  width: 100%;
}
th.pt03 {
  background: #446DD0;
  color: #FFFFFF;
  width: 100%;
}
div.content_wrap th img {
  /*width:120px;*/
  padding: 20px 0 0 0;
}
th {
  font-weight: bold;
}
.cb {
  clear: both;
}
div.history {}
div.history p, p.history {
  color: #000000;
  font-weight: normal;
  line-height: 300%;
  text-shadow: none;
}
div.story_wrap h2 {
  margin: 40px 20px;
}
div.story p {
  margin: 0 0 20px 0;
  line-height: 200%;
}
div.story {
  background: rgba(255, 255, 255, 1);
  padding: 40px;
  margin: 0 20px;
}
div.story_wrap {
  background: url(../img/sample3.jpg) top left no-repeat;
  background-size: cover;
  padding: 60px 0;
}
div.story img {
  height: 22px;
  margin: 0 5px;
}
div.story p.fr_img img {
  height: 300px;
  border: 8px solid #FFFFFF;
}
div.story p.fr_img {
  float: right;
  padding: 0 0 10px 10px;
}
p.link_bt a span {
  font-size: 0.8em;
}
div.logo_ex {
  padding-left: 180px;
  background: url(../img/common/logo_02.png) top left no-repeat;
  margin-top: 50px;
  min-height: 82px;
  padding-top: 10px;
}
div.story div.logo_ex p {
  margin: 0;
}
div.movie {
  background: #000000;
  padding: 15px 15px 10px 15px;
  margin-bottom: 60px;
}
div.movie p {
  color: #FFFFFF;
  padding: 10px 0 0 0;
  text-align: center;
}
div.movie iframe {}
div.top1.bg div.content_wrap {
  padding: 40px 20px 0px 40px;
}
p.link_bt.lbt3 a:link, p.link_bt.lbt3 a:visited {
  background: #EDEDE9;
  color: #000000;
  display: block;
  font-size: 40px;
  text-align: center;
  width: 100%;
}
p.link_bt a:after {
  content: '▶';
  color: #E23626;
  padding: 0 0 0 10px;
  font-size: 80%;
  position: relative;
  top: -2px;
}
p.link_bt a:hover {
  text-decoration: none;
}
table.th {
  table-layout: fixed;
}
table.th th {
  text-align: center;
  width: auto;
  vertical-align: bottom;
}
table.th td {
  color: #007C42;
}
table.th td.hs {
  color: #503B79;
}
table.th td.cd {
  color: #1845A0;
}
table.th td {
  text-align: center;
}
table.th th {}
table.th th.w20 {
  width: 40%;
}
table.th.hs td {
  color: #503B79;
}
.bgn {
  position: relative;
}
.bgn h2 img {
  width: 100%;
  height: auto;
}
.bgn .content_wrap {}
.bgn .content_wrap .lt {
  position: absolute;
  top: 100px;
  left: 50px;
  display: block;
}
.bgn .content_wrap .rb {
  position: absolute;
  bottom: 50px;
  right: 50px;
  display: block;
  text-align: right;
}
.bgn .content_wrap p img {
  height: 90px;
}
div.nc01 {
  padding: 80px 0 0;
}
div.nc01 .content_wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
div.nc01 .col33 {
  width: 32%;
  padding: 2%;
  margin: 60px 1%;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
div.nc01 .col33 h2 {
  margin-bottom: 20px;
}
div.nc01 .col33 p {
  text-align: center;
}
div.nc01 .col33 p a {
  color: #000000;
  text-align: center;
  font-size: 1.1em;
  line-height: 2em;
  font-weight: bold;
}
div.nc01 .col33 p a:hover {
  text-decoration: none;
}
div.nc01 .col33 h2 img {
  width: 100%;
  max-width: 100%;
}
div.nc02 {
  background: #000000;
}
ul.sm {
  width: 1000px;
  margin: 0 auto;
}
ul.sm li {
  width: 31%;
  margin: 2% 1%;
  float: left;
}
ul.sm li img {
  width: 100%;
  height: auto;
}
ul.sm2 {
  padding: 30px 0 0 0;
}
ul.sm2 li {
  width: 31%;
  margin: 2% 1%;
  float: left;
}
ul.sm2 li img {
  width: 100%;
  height: auto;
}
.nc03 div.cc {
  margin-bottom: 30px;
}
.nc03 p.cap {
  margin-bottom: 50px;
}
.nc03 div.cc p {
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  background: #FFFFFF;
  padding-left: 80px;
  position: relative;
  text-align: left;
  font-weight: bold;
  line-height: 3em;
}
.nc03 div.cc p span {
  display: block;
  color: #2EB057;
  font-size: 3em;
  /*	font-weight:bold;
*/ font-style: italic;
  position: absolute;
  top: 20px;
  left: 20px;
}
.nc03 div.cc.c1 {
  padding-left: 20%;
  background: url(../img/new/p01.jpg) center left no-repeat;
  background-size: auto 100%;
  padding: 50px 0 50px 15%;
}
.nc03 div.cc.c2 {
  padding-left: 20%;
  background: url(../img/new/p02.jpg) center right no-repeat;
  background-size: auto 100%;
  padding: 50px 25% 50px 0;
}
div.topn02 {
  background: url(../img/new/bg01.png) repeat;
}
.nc03 div.cc.c6 p {
  padding-right: 280px;
}
.nc03 .flexbox {
  flex-direction: row-reverse;
}
.nc04 div {
  position: relative;
}
.nc04 .safebg {
  position: absolute;
  bottom: -100px;
  right: 30px;
}
.nc04 {
  padding-bottom: 80px;
}
.nc05.top1 {
  background: url(../img/new/bg02.jpg) center center no-repeat;
  background-size: cover;
}
div.top1.nc05 .cont1 h2 {
  margin-bottom: 130px;
}
div.top1.nc06 .cont1 h2 {
  margin-bottom: 80px;
}
.nc03 div.cc.cc2 p span {
  font-size: 8em;
  left: 20px;
  bottom: 50px;
  top: auto;
}
.nc03 div.cc.cc2 p {
  padding-left: 150px;
  margin-top: 60px;
}
div.top1.nc07 .cont1 h2 {
  margin-bottom: 100px;
}
div.top1.nc07 .cont1 h2 img {
  width: 75%;
}
div.col50prL {
  width: 48%;
  float: left;
  text-align: left;
  margin-top: 30px;
}
div.col50prL p {
  text-align: left;
}
div.col50prR {
  width: 48%;
  float: right;
  margin-top: 30px;
}
div.col50prR h3 {
  text-align: left;
}
div.col50prR li {
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 1), -1px -1px 3px rgba(255, 255, 255, 1);
}
div.col50prR ol {
  margin-left: 1.5em;
}
div.col50prR ol li {
  font-weight: bold;
  line-height: 250%;
}
@media screen and (max-width: 700px) {
  .bgn .content_wrap .lt {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
  }
  .bgn .content_wrap .rb {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: auto;
    display: block;
    text-align: left;
  }
  .bgn {
    overflow: hidden;
  }
  .bgn h2 {
    position: relative;
    width: 150%;
    left: -25%;
  }
  div.nc01 {
    padding: 0;
  }
  div.nc01 .content_wrap {
    flex-direction: column;
    padding: 0 30px;
  }
  div.nc01 .col33 {
    width: 100%;
    padding: 2% 2% 5%;
    margin: 0 1%;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  }
  div.nc01 .col33+.col33 {
    margin-top: 20px;
  }
  div.nc01 .col33 h2 {
    padding: 0 100px;
  }
  ul.sm {
    width: 80%;
    margin: 0 auto;
  }
  ul.sm {
    padding-bottom: 30px;
  }
  ul.sm li {
    float: none;
    width: 100%;
    padding: 30px 0 0 0;
  }
  div.top1.nc06 .cont1 h2, div.top1.nc07 .cont1 h2 {
    padding: 0;
  }
  div.top1.nc05 .cont1 h2 {
    margin-bottom: 70px;
  }
  .nc03 div.cc p {
    padding: 20px;
    padding-left: 20px;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    background: #FFFFFF;
    padding-left: 80px;
    position: relative;
    text-align: left;
    font-weight: bold;
    line-height: 2em;
  }
  div.col50prL {
    width: 100%;
    float: none;
    text-align: center;
    margin-top: 60px;
  }
  div.col50prR h3 {
    text-align: center;
  }
  div.col50prL p {}
  div.col50prR {
    margin-top: 60px;
    width: 100%;
    float: none;
    text-align: center;
  }
  div.col50prL p {
    text-align: center;
  }
  .nc03 div.cc.c1 {
    padding-left: 0;
    background: url(../img/new/p01.jpg) center top no-repeat;
    background-size: 100% auto;
    padding: 150px 0 0 0;
  }
  .nc03 div.cc.c2 {
    padding-left: 0%;
    background: url(../img/new/p02.jpg) center top no-repeat;
    background-size: 100% auto;
    padding: 150px 0 0 0;
  }
  .nc03 div.cc.c6 p {
    padding-right: 0;
  }
  .nc04 .safebg {
    position: static;
    bottom: -100px;
    right: 30px;
  }
  div.top1 div.content_wrap {
    padding: 20px 20px;
  }
}
/*2020.4 菅野追記*/
.content_wrap a{
	color:#232323;

}
a:hover{
	opacity:0.6;
	text-decoration: none;
}



/****Tablet SP*****************************************************************/

@media(max-width: 768px) {

  /****共通*****/
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
  #brand-top--content .f-large {
    font-size: 15px;
    line-height: 1.8em;
  }
  #brand-top--content .f-xlarge {
    font-size: 18px;
  }
  #brand-top--content .f-xxlarge {
    font-size: 24px;
  }
  #brand-top--content #bg-animation {
    aspect-ratio: 5/6;
  }
  #brand-top--content #bg-animation .img-item {
    aspect-ratio: 5/6;
  }
  #brand-top--content .od-category-hero-image-container .brand-logo {
      width: 90%;
      height: 100%;
      max-width: 1920px;
      top:0;
      left:50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  }
  #brand-top--content .od-category-hero-image-container .brand-logo img {
      width: 50%;
  }
  .flexbox {
    display: block;
  }
  .flex--leftbox.w50,
  .flex--rightbox.w50 {
    width: 100%;
  }
  .flex--rightbox {
    margin-top: 20px;
  }
  .flex--leftbox img,
  .flex--rightbox img {
    width: 100%;
  }
  #brand-top--content .od-product-list-container {
    position: relative;
    padding: 30px 0;
  }
  #brand-top--header {
    position: static;
    padding: 0 20px;
  }
  #brand-top--header h2.brand-top--header_logo {
    width: 100%;
  }
  #brand-top--header h2.brand-top--header_logo img {
    width: 140px;
  }
  .tabs__content--wrap .tabs__menulist {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .tabs__content--wrap .tabs__item {
    width: calc(100%/4);
    min-width: auto;
    max-width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    color: #333333;
    font-size: clamp( 11px, 3.5vw, 16px );
    font-weight: bold;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    border:solid 1px #CCC
  }
  .tabs__item+ .tabs__item {
    border-left: none;
  }
  .cont-NAVIGATION {
    width: 100%;
    background: url(../img/navigation/index_bg01.png) no-repeat center center;
    background-size: cover;
    box-sizing: border-box;
    padding: 30px;
  }
  .flex--leftbox.wl60 {
    width: 100%;
    padding-right: 0;
  }
  .flex--rightbox.wr40 {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }
  .cont-NAVIGATION .flex--rightbox.wr40 img {
    width: 60%;
    margin: 0 auto !important;
  }
  #tabs__cont01__content iframe {
    margin: 10px 0 0;
  }
  #video {
    padding: 0;
    width: 100%;
    display: block;
  }
  #video > div {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  #video .movie.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #video .movie dl {
    width: 48%;
    border-bottom: none !important;
    position: relative;
  }
  .splide__arrow {
      height: 2em !important;
      width: 2em !important;
  }
  .prev--arrow,
  .next--arrow {
    width: 20px;
    height: 20px;
  }
  .next--arrow::before,
  .next--arrow::after {
    right: 5px;
    width: 12px;
    height: 3px;
    transform-origin: calc(100% - 1.5px) 50%;
  }
  .prev--arrow::before,
  .prev--arrow::after {
    right: 13px;
    width: 12px;
    height: 3px;
    transform-origin: calc(100% - 1.5px) 50%;
  }

}

@media(max-width: 768px) {
  #brand-top--content #bg-animation {
    margin: 12px auto 0;
  }
}