@charset "shift_jis";
/* CSS Document */

		a:link{
			text-decoration:underline;
			color:#4f4f4f;
		}
		a:visited{color:#4f4f4f;}
		a:hover{color:#4f4f4f;
		text-decoration:none;}
		a:active{text-decoration:none;}

body {
		margin: 0 auto;
		text-align: center;
		background-color: #f5f5f5 !important;
		color:#4f4f4f;
		font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Yu Gothic' , "メイリオ", "Meiryo", "Avenir Next","Avenir", Helvetica, Arial, sans-serif;
}
ul, li, p{
		list-style:none;
		margin: 0;
		padding: 0;
}
img {
		border: none;
		margin: 0;
		padding: 0;
		vertical-align: top;
}
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.3s;
}
#contents-selfitem{
width: 1200px;
margin: 0 auto;

}
#contents-selfitem ul{
margin: 0 auto;
}
#contents-selfitem ul li{
margin: 0 auto;
padding: 16px;
float: left;
width: 25%;
}
#contents-selfitem ul li p {
text-align: left;
font-size: 12px;
padding: 4px;
clear: both;
}
#contents-selfitem ul li p a{
display: block;
text-decoration: none;
position: relative;
}
#contents-selfitem ul li p a:after{
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 75px;
width: 0;
background-color: rgba(255,255,255,0.7);
z-index: -1;
}
#contents-selfitem ul li p a:hover:after{
width: 100%;
}
#contents-selfitem ul li p a i{

position: absolute;
bottom: 20px;
right: 8px;
opacity: 0.4;
}
#contents-selfitem ul li p a:hover i{
opacity: 1;
transition: all 1.3s;
}
#contents-selfitem ul li.contents-selfitem-title0{
width: 100%;
height: 360px;
background-color: #fff;
padding: 0;
}
#contents-selfitem ul li.contents-selfitem-title0 p{
text-align: center;
font-size: 20px;
padding-top: 32px;
}
#contents-selfitem ul li.contents-selfitem-title0 p.text1{
margin-top: 150px;
font-size: 50px;
font-weight: 800;
}
#contents-selfitem ul li.contents-selfitem-title{
width: 100%;
}
#contents-selfitem ul li.contents-selfitem-title p{
font-size: 25px;
font-weight: 800;
padding: 120px 0 32px 0;
text-align: center;
border-bottom: 1px solid #fff;
position: relative;
}
#contents-selfitem ul li.contents-selfitem-title p:after{
content: "";
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
height: 1px;
background-color: #ddd;
}
#contents-selfitem ul li img{
width: 100%;

}
#contents-selfitem-list{
margin: 0;
padding: 0;
}
#contents-selfitem-list ul{
margin: 0;
padding: 0px;
}
#contents-selfitem-list ul li{
margin: 0;
padding: 4px; 
background-color: #f5f5f5;
}
#contents-selfitem-list ul li{
cursor: pointer;
position: relative;

}
#contents-selfitem-list ul li:hover{
cursor: pointer;
}
#contents-selfitem-list ul li:after{
content: "";
position: absolute;
left: -12px;
top: 8px;
width: auto;
height: auto;
font-size: 10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: all 0.6s ease;
opacity: 0;
}
#contents-selfitem-list ul li img{
border: 4px solid #fff;
}
#contents-selfitem-list ul li img:hover{
border: 1px solid #4f4f4f;
}
#contents-selfitem-list ul li:hover:after{
content: "coordinate";
transition: all 1.0s ease;
opacity: 1;
}
#mainImage img{
padding: 4px;
cursor: pointer;
border: 1px solid #f5f5f5;
}
#mainImage img:hover{
border: 1px solid #000;
}
@media only screen and (max-width: 768px) {
#contents_selfitem{
width: 100%;
padding: 4px;
}
}




#header {
position: absolute;
top: 80px;
width: 100%;
z-index: 1;
background-color: rgba(255,255,255,0.7);
height: 70px;
}

.canterbury-header{
background-color: rgba(0,0,0,.9) !important;
top: 94px !important;
}

#header ul{
width: 1024px;
margin: 0 auto;
}
#header ul li{
float: left;
width: 15%;
padding: 8px;
}
#header ul.canterbury-block li{
width: 13.6%;
}
#header ul.canterbury-block li a{
font-size: 10px;
}
#header ul li a{
margin: 8px 0 0 0;
background-color: #f4a3d4;
text-decoration: none;
display: block;
text-align: left;
padding: 8px 16px;
border-radius: 3px;
position: relative;
color: #fff;
}
#header ul li a:after{
content: "";
position: absolute;
    top: 13px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#header ul.canterbury-block li a:after{
top: 9px;
}

#header ul li a:hover:after{
    top: 13px;
}
#header ul.mens li a{
background-color: #5ba5d6;
}
#header ul li.logo {
width: 15%;
height: 10px;
position: relative;
}
#header ul li.canterbury-logo{
width: 10%;
}

#header ul li.canterbury-help{
width: 8% !important;
color: #fff;
}

#header ul li.canterbury-men a{
background-color: #5ba5d6;
}

#header ul li.logo a{
background: rgba(255,255,255,0);
padding: 0;
}
#header ul li.logo a:after{
border: 0px;
}
#header ul li.help{
width: 10%;
padding: 0;
}
#header ul li.logo a{
margin: 0;
}
div.nav ul li.logo img{
height: 75px;
width: 60px !important;
position: absolute;
top: -61px;
left: 0;
trasition: 0.4s all;
}
div.nav ul li.canterbury-logo img{
width: 60px !important ;
height: 53px;
top: -10px;
}

div.menu-fixed ul li.logo img{
height: 75px;
width: 65px !important;
padding: 16px;
top: -8px;
left: 0;
}

div.menu-fixed ul li.canterbury-logo img{
height: 71px;
width: 79px !important;
}

#header ul li.help p{
padding-top: 23px;
cursor: pointer;
position: relative;
}
#header ul li.help p:after{
content: "";
position: absolute;
bottom: -4px;
left: 12px;
width: 0;
height: 1px;
background-color: #000;
}
#header ul li.canterbury-help p:after{
background-color: #fff;
}

#header ul li.help p:hover:after{
width: 60px;
}
/*-------------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------------*/
.footer{
clear: both;
background-color: #666;
}
.footer a:hover {
  text-decoration: underline;
}

.footer > .centering-contents {
  max-width: 1000px;
}

.footer-inner {
  padding: 32px 10px 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-inner a {
  color: #fff;
}

@media (max-width: 768px) {
  .footer-inner {
    padding: 23px 0 30px;
    margin: 0 auto;
  }
}

.footer-corp-nav {
  line-height: 2.3;
  text-align: center;
  margin-bottom: 60px;
}

.footer-brand-info {
  margin: 32px auto;
  display: none;
}

.footer-brand-info > div {
  padding: 0 80px 40px;
  border-bottom: solid 1px #fff;
}
.footer-brand-info ul {  
  margin: 0 -1.904761904% 22px -2.023809523%;  
  padding: 40px 0 0;  
}  
.footer-brand-info li {  
  position: relative;  
  width: 8.820160366%;  
  height: 42px;  
  float: left;  
  margin: 0 1.832760595% 25px 1.947308132%;  
}  
.footer-brand-info li.speedo {  
  width: 9.621993127%;  
}  
.footer-brand-info li.aps {  
  margin: 0 0.572737686% 25px 2.290950744%;  
}  
.footer-brand-info li.ccc{  
  margin: 0 1.718213058% 25px 0.458190148%;   
}  
.footer-brand-info li.nw {  
  margin: 0 1.603665521% 25px 2.290950744%;  
}  
.footer-brand-info li.alite{  
  margin-bottom: 0;  
}  
  
.footer-brand-info li img {  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto;;  
}  
  
.footer-brand-info .tnf img {  
  width: 40px;  
  height: 40px;  
}  
.footer-brand-info .hh img {  
  width: 45px;  
  height: 30px;  
}  
.footer-brand-info .macpac img {  
  width: 73px;  
  height: 17px;  
}  
.footer-brand-info .alite img {  
  width: 42px;  
  height: 36px;  
}  
.footer-brand-info .ice img {  
  width: 73px;  
  height: 52px;  
}  
.footer-brand-info .ellesse img {  
  width: 65px;  
  height: 20px;  
}  
.footer-brand-info .danskin img {  
  width: 85px;  
  height: 13px;  
}  
.footer-brand-info .speedo img {  
  width: 84px;  
  height: 16px;  
}  
.footer-brand-info .lifestyle img {  
  width: 76px;  
  height: 13px;  
}  
.footer-brand-info .motorcycle img {  
  width: 77px;  
  height: 22px;  
}  
.footer-brand-info .ccc img {  
  width: 48px;  
  height: 34px;  
}  
.footer-brand-info .c3fit img {  
  width: 64px;  
  height: 32px;  
}  
.footer-brand-info .mxp img {  
  width: 60px;  
  height: 26px;  
}  
.footer-brand-info .tf1 img {  
  width: 74px;  
  height: 17px;  
}  
.footer-brand-info .estivo img {  
  width: 70px;  
  height: 13px;  
}  
.footer-brand-info .aps img {  
  width: 33px;  
  height: 42px;  
}  
.footer-brand-info .nw img {  
  width: 48px;  
  height: 41px;  
}  
  
.footer-brand-info .more-txt a::after {
  background: #fff;
}
.footer-brand-info .more-txt a:hover {
  text-decoration: none;
}
.footer-brand-info .more-txt a:hover::after {
  opacity: 0;
}

.footer-brand-info-btn {
  width: 230px;
  margin: 0 auto;
}

.footer-brand-info-btn a {
  display: block;
  height: 30px;
  line-height: 30px;
  border: solid 1px #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
}

.footer-brand-info-btn a:hover {
  text-decoration: none;
}

.footer-brand-info-btn a.arrow::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  right: 10px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.footer-brand-info-btn a.active.arrow::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .footer-brand-info {
    margin: 20px auto 27px;
  }
  .footer-brand-info > div {
    margin: 0 20px;
    padding: 0 0 20px;
    border-bottom: solid 1px #fff;
  }
  .footer-brand-info ul {
    margin: 0 -1.492537313% 22px;
    padding: 40px 0 0;
  }
  .footer-brand-info li {
    position: relative;
    width: 30.434782608%;
    height: 42px;
    float: left;
    margin: 0 1.449275362% 15px;
  }
  .footer-brand-info li.speedo {
    width: 30.434782608%;
    margin: 0 1.449275362% 15px;
  }
  .footer-brand-info li.aps {
    margin: 0 1.449275362%;
  }
  .footer-brand-info li.nw {
    margin: 0 1.449275362%;
  }
}

.footer-nav-list {
  text-align: center;
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}

.footer-nav-list > li {
  display: inline-block;
  font-size: 12px;
  letter-spacing: normal;
  word-spacing: normal;
}

.footer-nav-list > li + li {
  position: relative;
}

.footer-nav-list > li + li::before {
  content: "|";
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  color: #fff;
}

.footer-nav-list > li > a {
  display: block;
  padding: 0 10px;
  font-size: 12px;
  line-height: 2.3;
}

@media (max-width: 800px) {
  .footer-nav-list > li > a {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .footer-nav-list > li {
    display: block;
    margin: 0 0 16px;
  }
  .footer-nav-list > li + li::before {
    display: none;
  }
  .footer-nav-list > li > a {
    font-size: 13px;
    line-height: 1.5;
  }
}

.footer-info {
  color: #fff;
  margin: 15px 0 0;
}

.footer-info-inner {
  height: 40px;
  padding: 11px;
  text-align: center;
}

@media (max-width: 768px) {
  .footer-info {
    margin: 30px 0 0;
  }
}

/*-------------------------------------------------------------------------------
 PARTS
 -------------------------------------------------------------------------------*/
.arrow {
  position: relative;
}

.arrow::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .arrow::after {
    width: 8px;
    height: 8px;
  }
}


.h-style-1 {
  margin: 0 0 38px;
  color: #000;
  font-size: 11px;
  text-align: center;
}

.h-style-1 strong {
  display: block;
  font-size: 24px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .h-style-1 {
    margin: 0 0 27px;
  }
  .h-style-1 strong {
    font-size: 25px;
    line-height: 1.3;
  }
}


.more-txt {
  text-align: center;
}

.more-txt a {
  display: inline-block;
}

.more-txt a::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #666;
}

.more-txt a:hover::after {
  opacity: 0;
}

@media (max-width: 768px) {
  .more-txt a::after {
    position: relative;
    top: -3px;
  }
}

.clear{
clear: both;
}

.header-wrap{
position: static !important;
}
div.header-nav-wrap{
margin-top: 32px;
}

div.canterbury-warp{
padding-top:32px;
margin-top: 0;
}

li.header-btn-list-item div.open{
display: none;
opacity:0;
transition: 0.4s all; 
}
li.header-btn-list-item:hover div.open{
display: inline;
opacity:1;
}
header a{
text-align: left;
text-decoration: none !important;
}
.nav-contents{
top: 90px !important;
}
.nav{
transition: 0s all;
}
.menu-fixed{
position: fixed !important;
top: 0  !important;
transition: 0s all;
}
.header-wrap{
height: auto !important;
}

.pc{
display: block;
}

.sp{
display: none;
}

@media screen and (max-width:768px){
#contents-selfitem{
width:100%;
}
#contents-selfitem ul li.contents-selfitem-title0 p.text1{
margin-top: 65px;
font-size: 17px;
}
#contents-selfitem ul li.contents-selfitem-title0 p{
font-size: 14px;
}
#contents-selfitem ul li.contents-selfitem-title0{
height: auto;
}
#contents-selfitem ul li.contents-selfitem-title p{
font-size: 20px;
padding: 0px 0 8px 0;
}
#contents-selfitem ul li{
padding: 2px;
width: 50%;
}
#contents-selfitem ul li p{
font-size:10px;
margin-bottom: 16px;
}
#contents-selfitem ul li p a i{
bottom: 0;
}
.pc{
display: none;
}
.sp{
display: block;
}
.canterbury-btn-block{
margin: 0 !important;
}
.canterbury-inner-block{
padding: 0 !important;
}
#header ul{
width: 100%;
padding: 2px;
}
.canterbury-header{
top: 75px !important;
}

#header ul.canterbury-block li{
width: 33.3333%;
padding: 2px;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#header{
height: 71px;
}
div.nav ul li.canterbury-logo img{
top: 0;
width: 100% !important;
height: auto;
}
.canterbury-logo2{
left:  0 !important;
}
.canterbury-logo3{
width: 50% !important;
}
#header ul li.canterbury-logo {
height: auto !important;
position: absolute;
right: 0px;
bottom: 34px;
width: 19%;
}
.sp100{
width: 100% !important;
}
#header ul.canterbury-block li a{
font-size: 8px;
margin: 0 auto;
}
.menu-fixed{
top: 50px !important;
}
#header ul li.canterbury-help{
width: 15% !important;
}
div.menu-fixed ul li.logo img{
padding: 8px;
}
#header ul li.help p{
padding-top: 8px;
}
#mainImage img{
padding: 2px;
border: none;
}
#contents-selfitem ul li p a:after,#contents-selfitem-list ul li:after,#contents-selfitem-list ul li:hover:after{
display: none;
}
.nav-contents{
top: 0px !important;
}
}