/*common*/
*, :before, :after {
    box-sizing: inherit;
}
body *,body :before,body :after {
    box-sizing: content-box;;
}
html body main{position:relative;overflow-x: hidden;display:block;}
	/*reset*/
	body,h1,h2,h3,h4,h5,h6,span,p,dl,dt,dd,hr,header,aside,section,article,form,input,strong,textarea{
			margin:0px;
			padding:0px;
			list-style:none;
			border:0px;
	}
	img{
			border:0px;
			vertical-align: bottom;
	}
	input{
			vertical-align:middle;
	}
	table {
			border-collapse: collapse;
			border-spacing: 0;
	}
	body{
			text-align:center;
			overflow-x:hidden;
	}
	input[type=text]:focus {
			outline:none;
	}
	select:focus{
			outline:none;
	}
	textarea{outline:none;}
	input,select,textarea,button {vertical-align:middle;}
		
		
	body{font-feature-settings: "palt" 1;;backface-visibility: hidden;line-height: 1.7;font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;font-weight: 500;}



	@media screen and (max-width: 880px){
	}
	@media screen and (max-width: 700px){
	}
	@media screen and (max-width: 450px){
	}
	
	
	
	
	
	
	.show_text{position:relative;transition: clip-path 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	.show_text.active{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
	
	
	.bg_black_amin{position: relative;}
	.bg_black_amin:before{
		background: #000;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transform: translateX(-100%);
		transition:all .8s 0s ease; 
		width: 100%;
		z-index: 1;
	}
	.bg_black_amin img{opacity:0;transition:all .8s 0s ease;}
	.bg_black_amin.active img{opacity:1;transition:all .5s .3s ease;}
	.bg_black_amin.active:before{
		transform: translateX(100%);opacity:0;
		;
	}

	.showup.active {
		opacity: 1;
		/*transform: matrix(1,0,0,1,0,0);*/
		transform:translate3d(0,0px,0);
	}
	.showup{
		opacity: 0;
		transition: all .9s .1s cubic-bezier(0, 0.65, 0.02, 0.98);
		/*transform: matrix(1.2,0,0,1,0,100);*/
		transform:translate3d(0,100px,0);
	}


	html body main{font-size:18px;font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;line-height: 1.7;}
	body{line-height:1.7;font-feature-settings: "palt" 1;}
	main{}
	
	.wrap{position:relative;max-width:1300px;margin:auto;text-align:center;padding-left:5vw;padding-right:5vw;box-sizing: border-box;}


	
	
	
	
	
	
	
	

	body{background-color:#000;padding:0px;margin:0px; background-position:center -43vw;background-size:100%;background-repeat:no-repeat;}
	body{color:#fff;}
	.dunlop_logo{width:160px;top:2vw;left:2vw;display:block;padding:2vw;}
	.dunlop_logo img{width:100%;}
	
	
	.rwd_show{display:none;}
	
	
.xxio_21_header{}
	
.wrap{max-width:1400px;margin:0px auto;}
.xxio_21_nav ul{display:flex;list-style:none;padding:0px;margin:0px;margin-right:-20px;justify-content:center;flex-wrap:wrap;}
.xxio_21_nav li{padding-right:20px;box-sizing:border-box;min-width:150px;margin-bottom:20px;}
.xxio_21_nav li a{background-color:#000;font-weight:bold;display:block;padding:15px 20px;text-align:center;border:2px solid #8b7b52;color:#fff;text-decoration:none;display:block;}
.xxio_21_top_banner{text-align:center;;padding:30px}
.xxio_21_top_banner img{max-width:100%;margin:0px auto;}



.footer_banner{background-color:#FFF;overflow:hidden;}
.footer_banner .wrap{padding:5vw 3vw;}
.footer_banner ul{list-style:none;padding:0px;margin:0px;display:flex;margin-right:-5vw;align-items:flex-end;flex-wrap:wrap;justify-content:center;}
.footer_banner ul li{padding-right:5vw;box-sizing:border-box;flex:0 1 50%;max-width:50%;min-width:50%;margin-bottom:80px;}
.footer_banner ul li a{display:block;text-decoration:none;color:#000;font-weight:bold;}
.footer_banner ul li a img{width:100%;margin-bottom:10px;}
.footer_bannerOther.footer_banner ul .kinenbi_link{width:100%;flex:0 1 100%;max-width:100%;min-width:100%;box-sizing:border-box;}
.kinenbi_link:nth-child(3) p:nth-child(1):after{content:"\f35d";font-family: "Font Awesome 5 Free";margin-left:20px;color:#262173;}
.kinenbi_link:nth-child(3) .small{color:#262173;font-size:60%;}
.footer_banner ul li:last-child{margin-bottom:0px;}

.footer_bannerOther{}
.footer_bannerOther.footer_banner ul li{flex:0 1 33.3%;max-width:33.3%;min-width:33.3%;}
.footer_bannerOther .kinenbi_link:nth-child(3) p:nth-child(1):after{display:none;}
.footer_bannerOther .kinenbi_link:nth-child(3) .small{color:#000;font-size:100%;}
.footer_bannerOther .kinenbi_link:nth-child(4) p:nth-child(1):after{content:"\f35d";font-family: "Font Awesome 5 Free";margin-left:20px;color:#262173;}
.footer_bannerOther .kinenbi_link:nth-child(4) .small{color:#262173;font-size:60%;}


.follow_us_section_header h2{font-family: 'Anton', sans-serif;font-weight:normal;letter-spacing:10px;}
.follow_us_section_header h2:after{border-bottom:1px solid #000;content:' ';display:block;max-width:500px;margin:0px auto;}
.follow_us_section{background-color:#FFF;color:#000;box-shadow:0px 0px 10px 10px #dad1aa;padding:5vw 0px;}
.follow_us_section_contents{}
.follow_us_section_contents ul{list-style:none;padding:0px;margin:0px;display:flex;justify-content:center;align-items:center;margin-bottom:50px;}
.follow_us_section_contents ul li{background-color:#aaa;margin:0px 20px;}
.follow_us_section_contents p{text-align:center;font-size:100%;line-height:2;}
.follow_us_section_header {
    color: #000;
    font-size: 250%;
    position: relative;
    margin-bottom: 50px;
}



.xxio_21_logo{width:400px;margin-left:auto;margin-right:auto;margin-bottom:30px;}
.xxio_21_logo img{width:100%;}

.xxio_21_contents{padding:0vw 0px 6vw;}
.xxio_21_contents h2{color:#ad892b;font-size:300%; font-family: 'Anton', sans-serif;
    font-weight: normal;letter-spacing:0.5px;margin-top:100px;}
.xxio_21_contents_header{color:#fff;}
.xxio_21_contents_header p{font-weight:bold;line-height:2.0;}


.xxio_21_history{padding-top:50px;}
.xxio_21_history_item{display:flex;padding-bottom:50px;text-align:left;position:relative;}
.xxio_21_history_item_num{font-family: 'Noto Sans JP', sans-serif;flex:0 1 140px;max-width:140px;min-width:140px;}
.xxio_21_history_item_num span{font-size:150%;font-weight:bold;display:block;width:130px;height:130px;border:5px solid #ad892b;padding:10px;display:flex;align-items:center;justify-content:center;background-color:#FFF;box-sizing:border-box;color:#000;border-radius:100%;}
.xxio_21_history_item_num span:after{content:' ';height:100%;width:10px;background-color:#ad892b;position:absolute;bottom:0px;z-index:-1;;}
.xxio_21_history_item_main{flex:1;padding:20px;box-sizing:border-box;}
	.xxio_21_history_item_main h3{margin-bottom:10px;font-family: 'Noto Sans JP', sans-serif;font-size:200%;color:#ad892b;font-weight:bold;display:flex;align-items:center;}
	.xxio_21_history_item_main h3 span{font-size:50%;}
	.xxio_21_history_item_main p{margin-bottom:30px;}
	.xxio_21_history_item_main p:last-child{margin-bottom:0px;}
.xxio_21_history_item_product{flex:0 1 30%;max-width:30%;min-width:30%;}
.xxio_21_history_item_product img{width:100%;}



.xxio_21_history_itemLast{}
.xxio_21_history_itemLast .xxio_21_history_item_num span{background-color:transparent;border:0px;}


.xxio_21_history_item:last-child .xxio_21_history_item_num span:after{background: linear-gradient(to bottom, #ad892b, #000);}



	@media screen and (max-width:1200px){
		.xxio_21_history_item_num span{width:100px;height:100px;font-size:110%;}
		.xxio_21_history_item_num{flex: 0 1 120px;
			max-width: 120px;
			min-width: 120px;}
		.xxio_21_history_item_product{flex:0 1 25%;max-width:25%;min-width:25%;}
		.xxio_21_history_item_main h3{font-size:180%;}
		.xxio_21_history_item_main h3 span{display:block;padding-left:0px;}
		.xxio_21_history_item_main h3{display:block;}
	}
	@media screen and (max-width:900px){
		.xxio_21_nav ul{}
		html body main{font-size:16px;}
		.rwd_show{display:block;}
		.xxio_21_logo{margin:0px auto;margin-bottom:10px;}
	}
	@media screen and (max-width:800px){
		
		.xxio_21_history_item{flex-wrap:wrap;}
		.xxio_21_history_item > div{flex:0 1 100%;max-width:none;min-width:auto;}
		
		.xxio_21_history_item_num{order:1;text-align:center;padding-bottom:10px;}
		.xxio_21_history_item_product{order:2;text-align:center;}
		.xxio_21_history_item_product img{width:300px;}
		.xxio_21_history_item_main{order:3;}
		.xxio_21_history_item_main h3{text-align:center;font-size:200%;}
		.xxio_21_history_item_num span:after{opacity:0.3;}
		.xxio_21_history_item_main h3{}
		.xxio_21_history_item_num span{margin:0px auto;}
		.xxio_21_history_item_main h3{margin-bottom:50px;}
		.xxio_21_contents_header{margin-bottom:30px;}
		.xxio_21_history_item{}
		.xxio_21_history_item:last-child .xxio_21_history_item_num{    height: 0;}
		.xxio_21_history_item:last-child .xxio_21_history_item_num span:before{height:150%;top:0px;background: linear-gradient(to bottom, #ad892b, #ad892b);}
		.xxio_21_history_item:last-child .xxio_21_history_item_num span:after{height:150%;top:0px;background: linear-gradient(to bottom, #ad892b, #000);}
		
	}
	@media screen and (max-width:600px){
		.xxio_21_logo{width:50%;margin-top:30px;}
		.dunlop_logo{position:absolute;width:25%;top:0px;left:10px;}
		.xxio_21_nav li a{padding:10px;}
		.footer_banner ul li{max-width:none;min-width:auto;}
		.follow_us_section_header h2{font-size:100%;}
		html body main{font-size:14px;background-position:center 0vw;}
		.xxio_21_nav li{margin-bottom:10px;}
		.xxio_21_nav li{flex:0 1 50%;max-width:50%;min-width:50%;padding-right:10px;}
		.xxio_21_nav ul{margin-right:-10px;font-size:90%;}
		
		.xxio_21_history_item{flex-wrap:wrap;}
		.xxio_21_history_item > div{flex:0 1 100%;}
		.xxio_21_history_item_main h3{margin-left:0px;}
		.xxio_21_history_item_num{}
		.xxio_21_contents_header{margin-bottom:60px;}
		.xxio_21_history_item_product{}
		.xxio_21_history_item_product img{width:250px;}
		.xxio_21_history_item_main h3{text-align:center;}
		.xxio_21_contents_header{margin-bottom:30px;}
		.xxio_21_history_item{}
		.xxio_21_history_item_main h3{margin-bottom:30px;}
		.footer_bannerOther.footer_banner ul{display:block;}
		.footer_bannerOther.footer_banner ul li{flex:0 1 100%;max-width:100%;min-width:100%;box-sizing:border-box;text-align:center;margin-bottom:20px;}
		.footer_bannerOther.footer_banner ul li > *{width:250px;margin:0px auto;display:block;}
		.footer_banner .wrap{5vw}
	}
	@media screen and (max-width:400px){
		.xxio_21_nav ul{margin-right:-10px;font-size:80%;}
		.xxio_21_nav li a{padding:5px;}
	}


/*後から追加したCSS*/
.topics {
  margin-bottom: 5vw; }
  .topics .topics_flex {
    margin-right: -3vw;
    display: flex;
    justify-content: center;}
    .topics .topics_flex > * {
      padding-right: 3vw;
      box-sizing: border-box; }
      .topics .topics_flex > * a > p {
        margin-bottom: 0.5em; }
      .topics .topics_flex > * a > div p {
        padding-left: 1em; }
    .topics img {
    width: 100%;
    height: auto;
    display: block;
}
    .topics h2{color:#ad892b;font-size:300%; font-family: 'Anton', sans-serif;
    font-weight: normal;letter-spacing:0.5px;margin:80px 0 20px;}
    .topics a {
    color: #fff;
    text-decoration: none; }
    .topics a p {
      overflow: hidden; }
    .topics a p img {
        transition: all ease 0.3s; }
    .topics a:hover p img {
      transform: scale(1.02);
      transition: all ease 0.3s; }

@media screen and (max-width: 600px) {
.topics {
  margin-bottom: 5vw; }
  .topics .wrap {
    width: 90vw; }
    .topics h2{font-size:250%;}
  .topics .topics_flex {
    display: block;; }
    .topics .topics_flex > * {
      flex: 0 1 50%;
      box-sizing: border-box; }
      .topics .topics_flex > * a > p {
        margin-bottom: 0.5em; }
      .topics .topics_flex > * a > div p {
        padding-left: 1em; }
  .topics a {
    color: #fff;
    text-decoration: none; }
    .topics a p {
      overflow: hidden; }
      .topics a p img {
        transition: all ease 0.3s; }
    .topics a:hover p img {
      transform: scale(1.02);
      transition: all ease 0.3s; }}

.rwd_show1000 {
  display: none;
}

.rwd_show {
  display: none;
}

@media screen and (max-width: 1000px) {
  .rwd_show1000 {
    display: inline;
  }
}
.rwd_show800 {
  display: none;
}

@media screen and (max-width: 800px) {
  .rwd_show800 {
    display: inline;
  }
}
@media screen and (max-width: 700px) {
  .rwd_show {
    display: inline;
  }
  .rwd_hide {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .xxio14 img {
    margin-top: 120px;
  }
}
@media screen and (max-width: 700px) {
  .eks img {
    margin-top: -100px;
  }
}




	
	/*common*/
	.inc_common_footer_wrap a:hover{
		text-decoration:none;
	}
	.inc_common_footer_wrap{     margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    font-size: 18px;
    /* font-size: 1.8rem; */
    color: #111;
    line-height: 2;
    font-family: Meiryo,sans-serif;text-align:left;}
	@media screen and (max-width: 64em){
	.footer-other .footer-body-link {
		display: inline-block;
		width: 50%;
		text-align: center;
		border-right: 1px solid #ccc;
		box-sizing: border-box;
	}
	}