/*
Theme Name:dunlop-sports-club
Text Domain: dunlop-sports-club
Author: Uhuru
Description: for Dunlop Sports Club (Base Template)
Version: 1.0
*/
@charset "UTF-8";

/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
ul, li { list-style: none;}
img { max-width: 100%; height: auto;  }
img[src$=".svg"] { width: 100%; }
a:focus { outline: none; }
body, h1, h2, h3, h4 { font-weight: normal; }
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*clearfix*/
.clearfix { zoom: 1; }
.clearfix:after { content: ""; display: block; clear: both; }

/*hover*/
a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a:hover img {
  opacity: 0.3;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
}

select::-ms-expand { display: none; }

/*font*/
@font-face {
  font-family: 'Abel';
  src: url('font/Abel-Regular.woff') format('truetype'),
     url('font/Abel-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'BebasNeue';
  src: url('font/BebasNeue Bold.ttf') format('truetype'),
     url('font/BebasNeue Bold.woff') format('truetype');
}
@font-face {
  font-family: 'NotoSans-Regular';
  font-style: normal;
  src: url('font/NotoSansCJKjp-Regular.eot'); /* IE9 Compat Modes */
  src: url('font/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/NotoSansCJKjp-Regular.woff') format('woff'),
    url('font/NotoSansCJKjp-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'NotoSans-Medium';
  font-style: normal;
  src: url('font/NotoSansCJKjp-Medium.eot'); /* IE9 Compat Modes */
  src: url('font/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/NotoSansCJKjp-Medium.woff') format('woff'),
    url('font/NotoSansCJKjp-Medium.ttf') format('truetype');
}

body {
  /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-family: 'NotoSans-Regular';
  color: #222;
}

/*font-size*/
html { font-size: 62.5%; }


/* layout -------------------------------------------------- */

.contents_center { max-width: 1100px; margin: 0 auto; }
@media only screen and (max-width: 1200px) {.contents_center { padding: 0 20px; } }

/* share */
.share { text-align: left; letter-spacing: -0.4em; margin: 0 -15px; }
.share section { display: inline-block; letter-spacing: normal; padding: 0 15px; }
.share2 section { width: 50%; }
.share3 section { width: 33.33333%; }
.share4 section { width: 25%; }
.share5 section { width: 20%; }
@media only screen and (max-width: 900px) { .share section { padding: 10px; } }
@media only screen and (max-width: 600px) {
  .share, .share section { display: block; width: 100%; margin: 0; }
  .share section { padding: 0 0 30px 0; }
}

.share_table_box { margin: 0 -15px; }
.share_table { display: table; width: 100%; table-layout: fixed; /**overflow:auto;*/ }
.share_table section { display: table-cell; vertical-align: middle; padding: 0 15px; /**float:left;*/ }
@media only screen and (max-width: 600px) {
  .share_table, .share_table section { display: block; }
}

.share_line {
  display: table; width: 100%; table-layout: fixed; border: solid 1px #666; /**overflow:auto;*/
  -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
}
.share_line section { display: table-cell; padding: 20px; border-right: solid 1px #666; /**float:left;*/ }
.share_line section:last-child { border-right: none; }
@media only screen and (max-width: 600px) {
  .share_line, .share_line section { display: block; }
  .share_line section { border-right: none; border-bottom: solid 1px #666; }
  .share_line section:last-child { border-bottom: none; }
}

/* space */
.space_top { margin: 30px 0 0 0; }
.space_top50 { margin: 50px 0 0 0; }
.space_bottom { margin: 0 0 30px 0; }
.space_bottom50{ margin: 0 0 50px 0; }
.space_topbottom { margin: 30px 0; }
.space_bottom2 { margin: 0 0 2px 0; }
.space_bottom5 { margin: 0 0 5px 0; }
.space_bottom10 { margin: 0 0 10px 0; }
.space_bottom20 { margin: 0 0 20px 0; }
.space_top20 { margin: 20px 0 0 0; }
.space_topbottom2 { margin: 2px 0; }
.space_topbottom50 { margin: 50px 0; }

/* image -------------------------------------------------- */

.image_mobile { display: none; }
.imagemain_mobile { display: none; }
.image_svg { width: 100%; }
.image_radius10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
@media screen and (max-width: 800px) {
  .imagemain_mobile { display: block; }
  .imagemain_pc { display: none; }
}
@media screen and (max-width: 600px) {
  .image_mobile { display: block; }
  .image_pc { display: none; }
}
.image_radius10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.image_radius20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

/* link -------------------------------------------------- */

.link_button01 { text-align: center; }
.link_button01 a {
  display: inline-block; position: relative; width: 100%;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  color: #222; text-align: center; border: solid 2px #222;
  font-size: 1.6rem; line-height: 140%; padding: 20px; font-family: 'NotoSans-Medium';
}
.link_button01 a span { font-size: 1.3rem; }
.link_button01 a:after {
  content: "";
  position: absolute; top: 0; right: 20px; bottom: 0; margin: auto;
  display: block; width: 6px; height: 6px;
  border-right: 2px solid #222; border-bottom: 2px solid #222;
  -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.link_button01 a:hover { border: solid 2px #ccc; }
.link_button01_br br { display: none; }
@media screen and (max-width: 600px) {
  .link_button01 a span { font-size: 1.1rem; }
  .link_button01_br br { display: block; }
}

.link_button02 a {
  display: inline-block; position: relative; width: 100%;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  color: #222; text-align: left; border: solid 2px #222;
  font-size: 1.6rem; padding: 10px 20px; font-family: 'NotoSans-Medium';
}
.link_button02 a:after {
  content: "";
  position: absolute; top: 0; right: 20px; bottom: 0; margin: auto;
  display: block; width: 6px; height: 6px;
  border-right: 2px solid #222; border-bottom: 2px solid #222;
  -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.link_button02 a:hover { border: solid 2px #ccc; }

.link_page { }
.link_page a {
  display: block; position: relative; color: #222; text-align: center;  background: #f0f0f0;
  font-size: 1.6rem; padding: 20px 0; font-family: 'NotoSans-Medium';
}
.link_page a:after {
  content: "";
  position: absolute; top: 0; right: 20px; bottom: 0; margin: auto;
  display: block; width: 6px; height: 6px;
  border-left: 2px solid #222; border-bottom: 2px solid #222;
  -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.link_page a:hover { background: #f8f8f8; }

/* table -------------------------------------------------- */

.data_table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data_table th, .data_table td { font-size: 1.4rem; line-height: 160%; text-align: justify; padding: 8px 12px; }
.data_table th {
  background: #f0f0f0; width: 180px;
  border-right: solid 1px #ccc; border-left: solid 1px #ccc; border-top: solid 1px #ccc;
}
.data_table td {
  border-right: solid 1px #ccc; border-top: solid 1px #ccc;
}
.data_table td a { color: #0099cc; } .data_table td a:hover { color: #66ccff; }
.data_table tr:first-child th { -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; }
.data_table tr:first-child td { -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; }
.data_table tr:last-child th {
  -webkit-border-radius: 0 0 0 10px; -moz-border-radius: 0 0 0 10px; border-radius: 0 0 0 10px;
  border-bottom: solid 1px #ccc;
}
.data_table tr:last-child td {
  -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0;
  border-bottom: solid 1px #ccc;
}
@media screen and (max-width: 600px) {
  .data_table th, .data_table td { font-size: 1.2rem; }
  .data_table th { width: 80px; }
}

/* title -------------------------------------------------- */

.title01 {
  font-size: 2.2rem; text-align: center;
  color: #fff; background: #222; padding: 15px 0;
  font-family: 'NotoSans-Medium';
}
.title02 {
  font-size: 2.2rem; padding: 20px 0 30px 0; margin: 50px 0 0 0;
  border-top: solid 2px #222;
  font-family: 'NotoSans-Medium';
}
.title03 {
  font-size: 1.6rem; color: #fff; background: #222; padding: 10px 20px;
  border-bottom: solid 3px #fff; margin: 0 0 10px 0;
  font-family: 'NotoSans-Medium';
}
@media screen and (max-width: 600px) { .title02 { font-size: 1.8rem; } }
.border01 { display: block; height: 2px; background: #222; }

/* copy -------------------------------------------------- */

.p_title { font-size: 2rem; line-height: 160%; text-align: justify; text-justify: inter-ideograph; padding: 0 0 10px 0; font-family: 'NotoSans-Medium'; }
.p_copy { font-size: 1.4rem; line-height: 200%; text-align: justify; text-justify: inter-ideograph; }
.p_copy_mini { font-size: 1.2rem; line-height: 160%; text-align: justify; text-justify: inter-ideograph; }
.p_copy a, .p_copy_mini a { color: #0099cc; } .p_copy a:hover, .p_copy_mini a:hover { color: #66ccff; }

.intro_title { font-size: 3rem; line-height: 160%; text-align: left; padding: 0 0 10px 0; }
.intro_copy { font-size: 1.6rem; line-height: 180%; text-align: justify; }

@media screen and (max-width: 600px) {
  .p_title { font-size: 1.8rem; }
  .intro_title { font-size: 2.5rem; }
  .intro_copy { font-size: 1.4rem; }
}
@media screen and (max-width: 1200px) { .mobile_br_none br { display: none; } }

/* background -------------------------------------------------- */

.back_gray { background: #f0f0f0; }
.back_black { background: #222; }
.back_yellow { background: #fff000; }

/* line -------------------------------------------------- */

.line01 { display: block; height: 1px; background: #ccc; }
.line02 { display: block; height: 1px; background: #666; }

/* header -------------------------------------------------- */

#header {
  display: block; position: fixed; background: #fff;
  width: 100%; height: 70px; z-index: 100; top: 0;
}
article { z-index: 1; padding: 70px 0 0 0; }
.header_title {
  position: absolute; top: 0; right: 0; padding: 0 20px;
  display: block; height: 20px; line-height: 20px;
  font-size: 1rem; text-align: right;
  border-bottom: solid 1px #999;
}
.header_title a { color: #222; } .header_title a:hover { color: #ccc; }

/* header_nav_pc */
#header_nav_pc { position: absolute; top: 20px; right: 30px; }
#header_nav_pc li { float: left; }
#header_nav_pc li a {
  display: block; height: 50px; line-height: 50px; padding: 0 10px;
  font-size: 1.4rem; text-align: center; color: #222; font-family: 'NotoSans-Medium';
}
#header_nav_pc li a:hover { background: #f0f0f0; }

#header_nav_pc li > div {
  border-top: solid 1px #ccc;
  position: fixed; top: 70px; right: 0;
  width: 50%; background: #fff; text-align: center;
  visibility: hidden; opacity: 0; min-width: 718px;
}
@media screen and (max-width: 717px) {
  #header_nav_pc li > div {
    width: 100%;
    min-width: auto;
  }
}
#header_nav_pc li:hover > div {
  display: block; visibility: visible; opacity: 0.9;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.header_nav_pc_2nd {
  display: inline-block; margin: 20px auto 40px auto;
  text-align: left; letter-spacing: -0.4em;
}
.header_nav_pc_2nd_title {
  display: block; font-size: 2rem; letter-spacing: normal;
  margin: 20px 0 0 0; padding: 15px 0;
  border-top: solid 1px #ccc; text-indent: 12px;
}
.header_nav_pc_2nd_title_mini,
.header_nav_pc_2nd a {
  display: inline-block !important;
  font-size: 1.4rem !important; letter-spacing: normal;
  line-height: 26px !important; height: 26px !important;
}
.header_nav_pc_2nd_title_mini {
  color: #fff !important; background: #222 !important;
  width: 70px !important; text-align: center;
  margin: 0 12px 8px 12px !important;
  font-size: 1.4rem !important;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.header_nav_pc_2nd a { margin: 0 0 8px 0 !important; padding: 0 10px !important; }
.header_nav_pc_2nd a:hover { background: #ccc !important; }

@media screen and (max-width: 800px) {
  #header_nav_pc li a {  width: auto; padding: 0 5px; }
}

@media screen and (min-width: 801px) { #menuButton { display: none; } }
@media screen and (max-width: 800px) {
  #header_nav_pc { display: none; }
  #header { height: 75px; }
  article { padding: 75px 0 0 0; }
  .header_title {
    position: relative; top: 0; left: 0; width: 100%; text-align: left; text-indent: 20px;
    background: #f0f0f0; border-bottom: none; padding: 0;
  }
  .header_title a { color: #999; }

/* menuButton */
#menuButton {
  display: block; width: 42px; height:42px;
  position: absolute; top: 25px; right: 15px;
}
#menuButton span {
    display: block;
    background: #222;
    width: 24px; height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menuButton span:first-child { top: 12px; }
#menuButton span:nth-child(2) { margin-top: -1px; top: 50%; }
#menuButton span:last-child { bottom: 12px; }
#menuButton.active span:first-child {
    -webkit-transform: translateY(8px) rotate(45deg);
    -moz-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}
#menuButton.active span:nth-child(2) { opacity: 0; }
#menuButton.active span:last-child {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -moz-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}
}
/* header_nav_mobile */
#header_nav_mobile {
  display: none; background: #222; position: absolute; top: 75px; left: 0;
  text-align: center; padding: 20px; overflow: hidden;
}
#header_nav_mobile li { float: left; width: 50%; padding: 1px; }
#header_nav_mobile li a {
  color: #222; text-align: center; font-family: 'NotoSans-Medium';
  font-size: 1.4rem; padding: 30px 0;
  letter-spacing: 0.05em; display: block;
  background: #fff;
}
#header_nav_mobile li a:hover { background: #f0f0f0; }


/* footer -------------------------------------------------- */

#to-top { position: fixed; bottom: 0; right: 30px; z-index: 200; }
#to-top a {
  width: 40px; height: 40px; background: #222; display: block;
  -webkit-border-radius: 7px 7px 0 0;
  -moz-border-radius: 7px 7px 0 0;
  border-radius:  7px 7px 0 0;
}
#to-top a:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; }
#to-top a:after {
  content: "";
  position: absolute; top: 5px; left: 0; right: 0; bottom: 0; margin: auto;
  display: block; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media screen and (max-width: 600px) { #to-top { right: 20px; } }

#footer { background: #222; margin: 50px 0 0 0; } .footer_margin_reset { margin: 0 0 -50px 0; }
.footer_banner_back { background: #000; padding: 20px 0; }
.footer_banner { text-align: center; letter-spacing: -0.4em; padding: 20px 0; }
.footer_banner li { display: inline-block; letter-spacing: normal; width: 12.5%; }
@media screen and (max-width: 800px) { .footer_banner li { width: 25%; } }
@media screen and (max-width: 600px) { .footer_banner li { width: 50%; } }

.footer_logo { max-width: 300px; margin: 0 auto; padding: 25px 0 0 0; }
.footer_index01 { text-align: center; letter-spacing: -0.4em; padding: 0 0 20px 0; }
.footer_index01 li { display: inline-block; letter-spacing: normal; width: 20%; padding: 5px 10px; }
.footer_index01 li a {
  color: #888; border-bottom: solid 1px #666;
  font-size: 1.4rem; padding: 10px 0; display: block;
}
.footer_index01 li a:hover { color: #fff; background: #000; border-bottom: solid 1px #000; }
@media screen and (max-width: 600px) {
  .footer_index01 li { width:50%; }
  .footer_index01 li a { font-size: 1.2rem; }
}
.footer_logo a img, .footer_banner a img { opacity: 0.6; filter: alpha(opacity=60); -moz-opacity: 0.6; }
.footer_logo a:hover img, .footer_banner a:hover img { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; }

/*footer_shop*/
.footer_shoplist {
  text-align: center; letter-spacing: -0.4em; line-height: 150%; font-size: 1.2rem;
  display: block; padding: 0 0 50px 0;
}
.footer_shoplist h3 {
  color: #ccc; display: block; letter-spacing: normal;
  font-size: 1.5rem; padding: 24px 0 8px 0;
}
.footer_shoplist h4, .footer_shoplist li {
  display: inline-block; letter-spacing: normal; line-height: 200%; padding: 2px 6px;
  font-family: 'NotoSans-Medium';
}
.footer_shoplist h4 {
  border-left: solid 1px #222; border-right: solid 1px #222; color: #ccc;
}
.footer_shoplist li a {
  color: #888; border-bottom: solid 1px #666; padding: 2px 6px;
}
.footer_shoplist li a:hover { color: #fff; border-bottom: solid 1px #000; background: #000; }
.footer_copyright { padding: 10px 0; font-size: 1rem; text-align: center; color: #666; font-family: Arial, Helvetica, sans-serif; }