@charset "UTF-8";

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display:; }
.sp { display: none !important; }

body{
  padding: 0;
  margin: 0;
color:#fff;
font-family:serif;
background-size:cover;
background-image: url("../img/bg_main.jpg");
background-repeat: no-repeat;
background-size:cover;
background-attachment: fixed;
background-position: right bottom;
}
img{
width:100%;
height:auto;
display: block;/*画像の下に出来る謎の隙間を消す*/
}
a{
text-decoration: none;
color:#fff;
}
iframe{
vertical-align:bottom;
}
ul{
list-style :none;
}

.title_en{
text-align: center;
font-size:1.4rem;
}
.title_jp{
text-align: center;
font-size:0.7rem;
color:#FF549A;
font-family: sans-serif;
margin-bottom:20px;
}
.title_en2{
text-align: center;
font-size:1.8rem;
margin-top:50px;
font-family: trade-gothic-next-compressed, sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: 0.2rem;
}
.title_jp2{
text-align: center;
font-size:0.7rem;
color:#FF549A;
font-family: sans-serif;
margin-bottom:50px;
}
.bt_more{
background:#797979;
display: inline-block;
width:180px;
text-align: center;
border-radius: 100px;
padding:8px;
margin:0 20px 50px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.bt_more:hover{
background:#fff;
color:#565656;
}

.pace-running .wrapa{
opacity:0;
}
.pace-done .wrapa{
opacity:1;

      transition: 0.3s;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
    -ms-transition: 0.3s;
      -o-transition: 0.3s; 
}
.kirikae{
margin-top:20px;
color:#131313;
}

.kirikae a{
color:#565656;
font-size:0.9rem;
}
/*---------------------------------

  ヘッダーメニュー

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

header {
align-items: center;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
display: flex;
height: 70px;
width:100%;
position: fixed;
z-index: 2;
font-family: trade-gothic-next-compressed, sans-serif;
letter-spacing: 0.1rem;
}
 
.headermenu {
  margin: auto;
  max-width: 100%;
  width: 1020px;

}
 
.head_flexcon {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
 
.head_ul {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.logo-img{
	width:200px;
	-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,1));
     filter: drop-shadow(0px 0px 10px rgba(0,0,0,1));
}

.logo-img img {
  vertical-align: bottom;
}
 
.nav-global ul {
  list-style :none;
}
 
.nav-global li {
  margin: 0 15px;
	-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,1));
     filter: drop-shadow(0px 0px 10px rgba(0,0,0,1));
}
 
.nav-global li:last-child {
  margin-right: 0;
}
 
.nav-global a {
  color: #fff;
  text-decoration: none;
}

.contact-btn_pc{
	background:gray;
	padding:5px 25px;
	border-radius: 50px;
}

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

  ヘッダーメニュー SP

---------------------------------*/
/* menu */
.cp_offcm02 {
position: relative;
z-index: 5;
left: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
opacity: 1;
visibility: visible;
display:block;
}

.cp_offcm02 nav, .cp_offcm02 ul {
height: 100%;
width:100%;
margin-block-start:0;
margin-block-end:0;
}

/* menu */
.cp_offcm02 {
position:fixed;
z-index: 2;
top: 0;
/* overflow-y: scroll; */
overflow: hidden;
height: 100%;
padding-top: 60px;
transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
opacity: 0;
visibility: hidden;

}
.cp_offcm02 nav {
background: rgba(0,0,0,0.6);
}
.cp_offcm02 li {
margin-right: -6px;
border: none;
display: block;
color: #FB8C00;
border-bottom: 1px solid #FB8C00;
}
.cp_offcm02 a {
display: block;
transition: background-color .3s ease-in;
padding: 1.2em;
}
.cp_offcm02 a:hover {
background-color: #FFE082;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 10;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 60px;
background-color: rgba(0,0,0,0.85);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before, .cp_menuicon > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle02:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle02:checked + .cp_mobilebar span:before,
#cp_toggle02:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle02:checked ~ .cp_offcm02 {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.logo-img_sp{
	width:220px;
	z-index:10;
	position:fixed;
	top: 20px;
	left: 50%;
	transform: translate(-50%,0);
}
.contact-btn_sp{
	z-index:10;
	position:fixed;
	top:15px;
	left: 95%;
	transform: translate(-100%,0);
	background:gray;
	border-radius: 100px;
	font-family: trade-gothic-next-compressed, sans-serif;
	padding:5px 10px;
}

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

  トップスライダー

---------------------------------*/
.sw1{
box-shadow:0px 0px 38px -5px #000000;
}


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

  ホイールコレクション

---------------------------------*/
.wheelcol{
background:rgba(49,49,49,1.00);
}
.wc_wname{
	text-align: center;
	margin-top:20px;
}

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

  三つボタン

---------------------------------*/
.mi_flexcon{
display:flex;
box-shadow:0px 0px 38px -5px #000000;
}
.mi_flexitem1{
flex-basis: 33.3333%;
position:relative;
}
.mi_flexitem2{
flex-basis: 33.3333%;
position:relative;
}
.mi_flexitem3{
flex-basis: 33.3333%;
position:relative;
}
.mi_ko{
	position:absolute;
bottom: 0;
left: 0;
  right: 0;
  margin: auto;

text-shadow:0px 0px 3px #74747b,0px 0px 5px #000000,0px 0px 10px #000,0px 0px 13px #000;
}

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

  ABOUT US

---------------------------------*/
.aboutus{
text-align: center;
padding:130px 0;
}

.aboutus_ko{
	display: inline-block;
	margin:0 50px;
	font-size:0.9rem;
	text-align:left;
	border-left: solid 5px #d6d6d6;
	padding:0 0 0 20px;
	color:#565656;
	line-height: 2rem;
}


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

  情報欄

---------------------------------*/
.info_ko{
	font-family:sans-serif;
}

.info_ko table {
	margin:0 auto 50px;
}

.info_flexcon{
display:flex;
flex-wrap:wrap;
box-shadow:0px 0px 38px -5px #000000;
}
.info_flexitem1{
flex-basis: 50%;
background:rgba(38,38,38,1.00);
color:#fff;
}
.info_flexitem2{
flex-basis: 50%;
background:rgba(0,46,99,1.00);
color:#fff;
}
.inst_flexcon{
display:flex;
flex-wrap:wrap;
box-shadow:0px 0px 38px -5px #000000;
}
.inst_flexitem1{
flex-basis: 25%;
background:rgba(173,0,68,1.00);
color:#fff;
display:flex;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.inst_flexitem2{
flex-basis: 75%;
background:#FAC8FF;
}


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

  フィニッシュ

---------------------------------*/
.fini_ko{
	display: inline-block;
	width:60%;
	font-size:0.9rem;
	text-align:left;
	border-left: solid 5px #D6D6D6;
	padding:0 0 0 20px;
	color:#565656;
	line-height: 1.2rem;
}
.fini_flexcon{
display:flex;
flex-wrap:wrap;
box-shadow:0px 0px 38px -5px #000000;
}
.fini_flexitem1{
flex-basis: 75%;
display:flex;
flex-wrap:wrap;
}
.fini_flexitem_item1{
flex-basis: 66.6666%;
}
.fini_flexitem_item2{
flex-basis: 33.3333%;
background:#fff;
display:flex;
align-items: center;
justify-content: center;
}
.fini_flexitem_item3{
flex-basis: 33.3333%;
background:#fff;
display:flex;
align-items: center;
justify-content: center;
}
.fini_flexitem_item4{
flex-basis: 66.6666%;
}
.fini_flexitem_item5{
flex-basis: 66.6666%;
}
.fini_flexitem_item6{
flex-basis: 33.3333%;
background:#fff;
display:flex;
align-items: center;
justify-content: center;
}
.fini_flexitem2{
flex-basis: 25%;
background:#F7FBFF;
display:flex;
align-items: center;
justify-content: center;
color:#565656;
}



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

  オーダーメイドホイール

---------------------------------*/
.order_flexcon{
display:flexああ;
box-shadow:0px 0px 38px -5px #000000;
}

.order_ko{
	position:absolute;
	  left: 0;
  right: 0;
  margin: auto;
text-shadow:0px 0px 3px #74747b,0px 0px 5px #000000,0px 0px 10px #000,0px 0px 13px #000;
}

.order_flexitem1{
flex-basis: 100%;
background:#F100FF;
}
.order_flexitem2{
flex-basis: 100%;
background:#363636;
}


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

  ギャラリー

---------------------------------*/
.gall_flexcon{
display:flex;
flex-wrap: wrap;
box-shadow:0px 0px 38px -5px #000000;
}
.gall_flexitem1{
flex-basis: 25%;
background:#571C33;
display:flex;
align-items: center;
justify-content: center;
}
.gall_flexitem2{
flex-basis: 75%;
background:brown;
}


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

  アクセス

---------------------------------*/
.acc_flexcon{
display:flex;
flex-wrap:wrap;
box-shadow:0px 0px 38px -5px #000000;
}
.acc_flexitem1{
flex-basis: 50%;
background:#00FF30;
display:flex;
align-items: center;
justify-content: center;
background-image: url("../img/acc_main.jpg");
background-repeat: no-repeat;
background-size:cover;

background-position: center center;
}
.acc_flexitem2{
flex-basis: 50%;
display:flex;
flex-wrap:wrap;
}
.acc_flexitem_item1{
flex-basis:100%;

}
.acc_flexitem_item2{
flex-basis:100%;
background:#fff;
color:#565656;
padding:50px;
}

.acc_shame{
font-family: sans-serif;
font-weight: bold;
color:#000;
}
.acc_shosai{
font-family: sans-serif;
}
.acc_shosai a{
color:#565656;
}


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

  フッター

---------------------------------*/
.foot_flexcon{
display:flex;
flex-wrap:wrap;
justify-content: center;
background:rgba(15,15,15,1.00);
}
.foot_flexlogo{
	flex-basis: 100%;
	display:flex;
justify-content: center;
	margin-top:100px;
	margin-bottom: 30px;
}
.foot_flexlogo img{
	width:250px;
	height:25px;
}
.foot_flexitem{
	margin:5px 0;
	padding:0 10px;
	border-right: solid 1px #fff;
	font-family: trade-gothic-next-compressed, sans-serif;
	letter-spacing: 0.1rem;
}
.foot_saikabu{
	flex-basis: 100%;
	text-align: center;
	background:rgba(87,87,87,1.00);
	padding:10px;
	font-family: sans-serif;
	font-size:0.7rem;
	letter-spacing: 0.05rem;
	color:#BDBDBD;
	margin-top:25px;
}

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

  固定ページ：ホイール

---------------------------------*/
.wth_flexcon{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.wth_flexitem{
flex-basis: 22%;
height:100%;
position:relative;
margin-right:15px;
margin-left:15px;
margin-bottom:30px;
overflow:hidden;
box-shadow:0px 0px 38px -5px #000000;
}
.wth_ko{
position:absolute;
left:1.2vw;
top:1.2vw;
letter-spacing:0.1rem;
font-size:1rem;
text-shadow:0px 0px 3px #74747b,0px 0px 5px #000000;
}
.wth_flexitem img {
  margin-left: 10px;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  display:inline;
}
.wth_flexitem:hover img {
  margin-left: 0;
}


.wth2_flexitem{
flex-basis: 22%;
height:90%;
position:relative;
margin-right:15px;
margin-left:15px;
margin-bottom:30px;
overflow:hidden;
box-shadow:0px 0px 38px -5px #000000;
}
.wth2_flexitem img {
margin-top:50px;
  margin-left: 50px;

  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  display:inline;
}
.wth2_flexitem:hover img {
  margin-left: 35px;
}



/*2023-01-19*/
.duo-row{
	text-align:center;
	margin-bottom:3rem;
	margin-top: -2rem;
}
.duo{
	display:inline-block;
	background-color:#262626;
	padding: 1rem 2rem;
	text-align:center;
}
@media (max-width:767px){
	.duo{
		padding: 1rem 1rem;
	}
}
@media (max-width:500px){
	.duo{
		padding: 1rem 0rem;
	}
}
.duo h3{
	margin:0;
	font-family:sans-serif;
	font-weight:normal;
	letter-spacing:0.05rem;
}
.duo .wth_flexcon{
	display:inline-flex;
	margin-top:1rem;
	
}
.duo .wth_flexcon a{
	flex-basis: auto;
}