@charset "utf-8";
/**
 *
 * ipcd.css
 *
 */

/* ---------------------
	- common
	- ico
	- connect-station
    - select-language
    - link-page
    - carousel-slider
    - country-section
--------------------- */

/* =====================
  common
===================== */

.text--m{font-size: 14px;}
.sp-only{display: none;}
@media (max-width: 767px){
	.sp-only{display: block;}
}

/* =====================
  ico
===================== */

.ico-i{
	background-repeat: no-repeat;
	display: inline-block;
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
}

/*  ico > ico-slide-arrow-l-gr
------------------------*/
.ico-slide-arrow-l-gr{
	background-image: url("/00cmn/img/common/slide-arrow-l-gr.png");
	width: 23px;
	height: 41px;
}

/*  ico > ico-slide-arrow-r-gr
------------------------*/
.ico-slide-arrow-r-gr{
	background-image: url("/00cmn/img/common/slide-arrow-r-gr.png");
	width: 23px;
	height: 41px;
}

/* =====================
  header
===================== */
body > header{
	height: 77px;
	display: block;
}
#header.header__logo-only{
	height: 77px;
}

@media (max-width: 767px){
	body > header{
		height: auto;
	}
	#header.header__logo-only{
		height: auto;
	}
}

/* =====================
  feature-block
===================== */

.feature-block{
	padding-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	border-bottom: solid 1px #CCC;
}
.feature-block--img{
	margin-bottom: 10px;
}
.feature-block--text{
	font-size: 20px;
}

@media (max-width: 767px){
	.feature-block--text{
		font-size: 15px;
	}
}

/* =====================
  select-language
===================== */

.select-language-wrap.cg-wrap{
	overflow: visible;
}
.select-language{
	position: relative;
	margin-bottom: 20px;
	padding-top: 20px;
}
.select-language--wrap{
	position: relative;
}

.pulld { display:inline-block; list-style:none; text-align:right; float:right; position:relative; margin-bottom:20px; }
.pulld {
	/* width: 220px; */
	position: absolute;
	top: -10px;
	right: 0;
}
.pulld span { display:block; list-style:none; border:solid 1px #ccc; padding:5px 32px 5px 20px; position:relative; font-size:16px; }
.pulld span::after { content:""; display:block; width:16px; height:16px; position:absolute; top:50%; right:10px; margin-top:-8px; background:url(/00cmn/img/common/nav-arrow-dwn.png) no-repeat center center; background-size:24px; }
.pulld ul { position:absolute; display:block; z-index:99; width:100%; padding:0; overflow: visible; display: none;}
.pulld ul li { list-style:none; border:solid 1px #ccc; border-top:0; background-color:#FFF; font-size:16px; }
.pulld ul li a,
.pulld ul li span { display:block; padding:5px 30px 5px 10px; position:relative; border: none;  }
.pulld ul li a:hover,
.pulld ul li span:hover { background-color:#e8e8e8; }
.pulld ul li a::after,
.pulld ul li span:after { content:""; display:block; width:16px; height:16px; position:absolute; top:50%; right:10px; margin-top:-8px; background:url(/00cmn/img/common/nav-arrow-g.png) no-repeat center center; }
#lang-select  {display: block; list-style: none; border: solid 1px #ccc; padding: 5px 15px 5px 20px; position: relative; font-size: 16px; }

@media (max-width: 767px){
	.select-language{
		padding-top: 40px;
	}
	.select-language--wrap.padt30{
		padding-top: 40px;
	}
	.select-language--nav{
		top: -30px;
	}
}

/* =====================
  link-page
===================== */

.link-page{
	padding: 0 0 8px;
	background: #fff;
}
.link-page.fixed{
	position: fixed;
	/* left: 50%;
	margin-left: -490px; */
	left: 0;
	z-index: 699;
	padding-bottom: 0;
	width: 100%;
}
.link-page.fixed > ul{
	padding-bottom: 0;
	margin-bottom: -7px;
}
.link-page ul{
	letter-spacing: -.40em;
	text-align: center;
}
.link-page ul > li{
	display: inline-block;
	letter-spacing: normal;
	list-style: none;
}
.link-page ul > li > a{
	display: block;
	text-indent: 120%;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	width: 327px;
	height: 100px;
	background-position: center center;
	background-repeat: no-repeat;
}
.link-page ul > li.a01 > a{background-image: url("../img/btn_A01_pc.png");}
.link-page ul > li.a02 > a{background-image: url("../img/btn_A02_pc.png");width: 326px;}
.link-page ul > li.a03 > a{background-image: url("../img/btn_A03_pc.png");}

@media (max-width: 1120px){
	.link-page ul > li{
		width: 33.33%;
	}
	.link-page ul > li > a,
	.link-page ul > li.a02 > a{
		width: 100%;
		height: 0;
		background-size: cover;
		padding-top: 30.581039755%;
	}
}
@media (min-width: 768px){
	.link-page.fixed > ul{
		margin: 0 15px;
		padding-right: 15px;
		padding-left: 15px;
		margin-bottom: -5px;
	}
}
@media (min-width: 1024px) and (max-width: 1120px){
	.link-page.fixed > ul{
		margin: 0 50px;
		padding-right: 15px;
		padding-left: 15px;
		margin-bottom: -5px;
	}
}
@media (max-width: 767px){
	.link-page{
		margin-left: -15px;
		margin-right: -15px;
	}
	.link-page.fixed{
		margin-left: 0px;
		margin-right: 0px;
		position: fixed;
		left: 0;
		z-index: 699;
		padding-bottom: 0;
	}
	.link-page.fixed > ul{
		margin: 0;
		padding-right: 0px;
		padding-left: 0px;
		margin-bottom: -5px;
	}
	.link-page.fixed > ul:after{display: none;}
	.link-page ul > li > a,
	.link-page ul > li.a02 > a{
		display: block;
		text-indent: 120%;
		overflow: hidden;
		white-space: nowrap;
		display: block;
		height: 0;
		background-size: cover;
		padding-top: 75.117370892%;
	}
	.link-page ul > li.a01 > a{background-image: url("../img/btn_A01_sp.png");}
	.link-page ul > li.a02 > a{background-image: url("../img/btn_A02_sp.png");}
	.link-page ul > li.a03 > a{background-image: url("../img/btn_A03_sp.png");}
}

/* =====================
  carousel-slider
===================== */

.carousel-slider{
	padding: 0 30px;
	position: relative;
	margin-bottom: 50px;
}
.carousel-slider--item{
	padding: 0 10px;
	position: relative;
	overflow: hidden;
}
.carousel-slider--item > a{
	display: block;
}
.carousel-slider--item > a > img{
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.carousel-slider .slick-arrow{
	background-color: transparent;
	border: none;
	position: absolute;
	top: 50%;
	margin-top: -20px;
	outline: none;
}
.carousel-slider .slick-arrow.slick-prev{
	left: -40px;
}
.carousel-slider .slick-arrow.slick-next{
	right: -40px;
}
.inline-box{
	width: 840px;
	height: 560px;
}
.inline-box iframe{
	width: 840px !important;
	height: 560px !important;
}
@media (min-width: 768px) and (max-width: 840px){
	.inline-box{
		width: 640px;
		height: 360px;
	}
	.inline-box iframe{
		width: 640px !important;
		height: 360px !important;
	}
}
@media (max-width: 767px){
	.inline-box{
		width: 300px;
		height: 200px;
	}
	.inline-box iframe{
		width: 300px !important;
		height: 200px !important;
	}
}

/* =====================
  country-section
===================== */

.country-section{
	margin-bottom: 50px;
}

/*  scountry-section > country-header
------------------------*/

.country-header{
    overflow: hidden;
}
.country-header--title{
	display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    padding-left: 80px;
    margin-right: 20px;
}
.country-header--title.country-header--title__recycling{
	background: url(../img/ico01_pc.png) no-repeat;
}
.country-header--title.country-header--title__links{
	background: url(../img/ico02_pc.png) no-repeat;
}
.country-header--title.country-header--title__counterfeit{
	background: url(../img/ico03_pc.png) no-repeat;
}

/*  country-section > country-list
------------------------*/
.expand-child.country-list--data{
	display: none;
}
.expand-child.country-list--data > .cg-wrap > ul{
	margin: 0 30px;
	/* background-color: #EFEFEF; */
	padding: 15px 10px 0 10px;
	letter-spacing: -.40em;
}
.expand-child.country-list--data > .cg-wrap > ul > li{
	display: inline-block;
	letter-spacing: normal;
	width: 30%;
	margin-right: 3.33%;
	margin-bottom: 10px;
	list-style: none;
}

/*  scountry-section > .region-list
------------------------*/

.region-list{
	margin:0 auto 0px;
	overflow: hidden;
}

.region-list > ul{
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
}

.region-list > ul > li{
	margin-bottom: 1px;
	background: #F4F4F4;
}

.region-list > ul > li a{
	padding:19px 0px 17px 50px;
	display: block;
	line-height: 1.0;
	position: relative;
}

.region-list > ul > li a:before{
	content:'';
	width:14px;
	height:14px;
	border-radius:7px;
	position: absolute;
	left:30px;
	top:19px;
	background: #000;
}

.region-list > ul > li.icon_area01 a:before{background: #4C8CB4;}
.region-list > ul > li.icon_area02 a:before{background: #D07100;}
.region-list > ul > li.icon_area03 a:before{background: #5FA224;}
.region-list > ul > li.icon_area04 a:before{background: #BC5E3E;}
.region-list > ul > li.icon_area05 a:before{background: #845B8C;}
.region-list > ul > li.icon_area06 a:before{background: #008B93;}
.region-list > ul > li.icon_area07 a:before{background: #D8A500;}
.region-list > ul > li.icon_area08 a:before{background: #C7000B;}

.region-sp-detail{
	position: relative;
	left:0px;
	top:0px;
	padding:10px;
	width:100%;
	box-sizing:border-box;
	display: none;
}
.region-sp-detail .back{
	position: absolute;
	left:10px;
	top:0;
}
.region-sp-detail .back img{
	width:21px;
}
.region-sp-detail h3{
	font-size: 17px;
	text-align: center;
	padding:0;
	margin:0 0 20px 0;
}
.region-sp-detail ul{
	list-style:none;
	margin:0 auto;
	width:90%;
}
.region-sp-detail ul li a{
	border-bottom:1px solid #666;
	display: block;
	padding:10px;
}
.region-sp-detail ul li a{
	height: 35px;
}
.region-sp-detail ul li a img{
	width:20px;
	margin-right: 10px;
	border: 1px solid #c3c2c2;
}
.region-sp-detail ul li ul.country-pages{
	width: auto;
	display: none;
}
.region-sp-detail ul li ul.country-pages li a[target="_blank"]{
	/*padding: 0;*/
	background: none;
	padding-left: 20px;
}

@media (max-width: 1120px){
	.country-section:nth-last-of-type(1){
		margin-bottom: 100px;
	}
	.country-header--title{
		display: inline-block;
		height: auto;
		line-height: 1.2;
		padding-top: 10px;
		padding-bottom: 10px;
		min-height: 50px;
	}
	.country-header--title.country-header--title__recycling,
	.country-header--title.country-header--title__links,
	.country-header--title.country-header--title__counterfeit{
		background-position: left center;
	}

	/*  scountry-section > country-list
	------------------------*/
	h2.expand-ttl.country-list--head .cg-wrap .expand-opener{
		display: none;
	}
}