/*
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;
}
.swiper-slide a:hover img {
	opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
}
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%; }
.share100 section { width: 100%; }
@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_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.4rem; padding: 12px 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(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg);
	-o-transform: rotate(-135deg); transform: rotate(-135deg);
}
.link_page a:hover { background: #f8f8f8; }
@media screen and (max-width: 600px) {
	.link_page a {
		font-size: 1.2rem;
	}
	.link_page a:after {
		display: none;
	}
}

/* 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;
}
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 ul {
	border-top: solid 1px #ccc;
	position: fixed; top: 70; right: 0;
	width: 100%; background: #fff; text-align: center;
	visibility: hidden; opacity: 0;
}
#header_nav_pc li:hover ul {
	display: block; visibility: visible; opacity: 1;
	-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: 601px) { #menuButton { display: none; } }
@media screen and (max-width: 600px) {
	#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: 16.6666%; }
@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; }