@charset "UTF-8";

@media only screen and (max-width: 480px) {
	
	.sp-hide {
		display: none;
	}

	.responsibilities-contents .image-box {
		position: relative;
		height: 135px;
		margin-bottom: 30px;
		padding-bottom: 50px;
	}
	.responsibilities-contents .image-box img {
		width: 100%;
	}

	.image-box .label {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 20px 10px;
		background: #333333;
		box-sizing: border-box;
		word-break :break-all;
		font-size: 108%;
		font-weight: bold;
		text-align: left;
		color: white;
	}
	/* key */
	.key-title {
		text-align: center;
		font-weight: normal;
		font-size: 173.33%; /* 26px */
	}
	.key-list {
		list-style: none;
		text-align: center;
	}
	.key-item {
		position: relative;
		display: block;
		margin: 0 auto 20px;
		border-radius: 50%;
		padding-top: 100%;
		color: #fff;
		max-width: 230px;
		font-size: 120%;
		font-weight: bold;
		line-height: 1;
	}
	.key-item.safety {
		background: rgb(154,202,237);
		background: -moz-linear-gradient(-45deg, rgba(154,202,237,1) 0%, rgba(129,189,233,1) 100%);
		background: -webkit-linear-gradient(-45deg, rgba(154,202,237,1) 0%,rgba(129,189,233,1) 100%);
		background: linear-gradient(135deg, rgba(154,202,237,1) 0%,rgba(129,189,233,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9acaed', endColorstr='#81bde9',GradientType=1 );
	}
	.key-item.environment {
		background: rgb(121,221,172);
		background: -moz-linear-gradient(-45deg, rgba(121,221,172,1) 0%, rgba(88,213,151,1) 100%);
		background: -webkit-linear-gradient(-45deg, rgba(121,221,172,1) 0%,rgba(88,213,151,1) 100%);
		background: linear-gradient(135deg, rgba(121,221,172,1) 0%,rgba(88,213,151,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79ddac', endColorstr='#58d597',GradientType=1 );
	}
	.key-item.communities {
		background: rgb(231,205,133);
		background: -moz-linear-gradient(-45deg, rgba(231,205,133,1) 0%, rgba(225,193,102,1) 100%);
		background: -webkit-linear-gradient(-45deg, rgba(231,205,133,1) 0%,rgba(225,193,102,1) 100%);
		background: linear-gradient(135deg, rgba(231,205,133,1) 0%,rgba(225,193,102,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7cd85', endColorstr='#e1c166',GradientType=1 );
	}
	.key-item:before {
		content: "";
		display: block;
		position: absolute;
		top: 46%;
		right: 0;
		left: 0;
		margin: auto;
		width: 64px;
		height: 65px;
		background-image: url(../images/icon_key.svg);
		background-repeat: no-repeat;
	}
	.key-item.environment:before {
		background-position: center;
	}
	.key-item.communities:before {
		top: 53%;
		background-position: right;
	}
	.key-item-inner {
		position: absolute;
		top: 28%;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 0 40px;
	}
	.communities .key-item-inner {
		top: 10%;
	}
	/* approach-list */
	.approach-list {
		margin-bottom: -30px;
		list-style: none;
		counter-reset: approach-num 0;
	}
	.approach-item {
		display: block;
		position: relative;
		box-sizing: border-box;
		margin-bottom: 30px;
		padding: 0 20px;
		border: 2px solid #e5e5e5;
		border-top: 5px solid #ff0000;
		line-height: 1.42;
	}
	.approach-item:before {
		display: inline-block;
		content: "";
		height: 100%;
		min-height: 140px;
		vertical-align: middle;
	}
	.approach-item:after {
		content: "0"counter(approach-num) ;
		counter-increment: approach-num 1;
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		margin-top: -.5em;
		opacity: .1;
		font-size: 800%;
		font-weight: bold;
		line-height: 1;
		color: #ff0000;
		text-align: center;
	}
	.approach-item-inner {
		display: inline-block;
		position: relative;
		z-index: 1;
		width: 100%;
		vertical-align: middle;
	}

	/* bnr-list */
	.bnr-list li {
		margin-left: 10px !important;
	}
	.bnr-list li:first-child {
		margin-left: 0;
	}
	.bnr-list li > a > img {
		width: 100%;
	}
    .products-top-anchor {
        margin: 0 0 20px;
        text-align: center;
    }

    /* soc_priority-area */
    .soc_priority-area {
        margin: 0px auto 60px;
        width: auto;
    }

    .soc_priority-area .responsibilities-top {
        margin-top: 35px;
    }

    .soc_priority-area .responsibilities-top:first-child {
        margin-top: 0;
    }

    .soc_priority-area .headline-text {
        color: #fff;
        border-color: #fff;
    }

    .container .read_text {
        display: block;
        font-size: 136.5%;
        width: 440px;
        margin: 10px auto 20px;
    }



    /* responsibilities_soc-list */
    .responsibilities_soc-list ul {
        width: 374px;
        height: 100%;
    }
    .responsibilities_soc-list li {
        width: 374px;
        height: 100%;
        margin-left: 19px;
        box-sizing: border-box;
        list-style: none;
        position: relative;
    }

    .responsibilities_soc-list li .text {
        margin: 0;
        height: 195px;
        position: relative;
        background-size: 96px auto;
        background-position: center 25px;
        background-repeat: no-repeat;
        box-sizing: border-box;
        color: #fff;
    }

    /* responsibilities_soc-list list-category */
    .responsibilities_soc-list .list-category {
        width: auto;
        height: 100%;
        margin:20px 20px 0;
        padding:15px 15px 1px 15px ;
        color: #333;
        background-color: #fff;
    }
    .responsibilities_soc-list .list-category dt {
        font:24px bolder;
        color: #333;
        margin:0 0 15px 0;
    }
    .responsibilities_soc-list .list-category dd {
        font-size:22px;
        color: #333;
        margin:0 0 23px 0;
        word-wrap: break-word;
        padding-left: 1.4em;
        background: url("/etc/images/icons/icon_arrow_gray_pc.png") no-repeat 0 0.3em;
    }
    .responsibilities_soc-list .list-category dd a {
        text-decoration: none;
    }
    .responsibilities_soc-list .list-category dd a:hover {
        text-decoration:underline;
    }


    /* responsibilities_soc-list li.mobility */
    .responsibilities_soc-list li.mobility{
        width: 440px;
        height: 100%;
        margin: 20px 0 20px 0;
        padding-bottom: 20px;
        background-color: rgba(91, 186, 234, 0.2);
    }
    .responsibilities_soc-list li.mobility .logo_block {
        width:auto;
        height: 89px;
        padding: 0px;
        background: url("/responsibilities/images/soc_icon_mobility_l.png") center/auto 62px no-repeat #5bbaea;
    }
    .responsibilities_soc-list li.mobility .text_block {
        height: auto;
        padding: 20px 20px 0px ;
        font-size: 19px;
    }


    /* responsibilities_soc-list li.people */
    .responsibilities_soc-list li.people{
        width: 440px;
        height: 100%;
        margin: 0 0 20px 0;
        padding-bottom: 20px;
        background-color: rgba(238, 134, 168, 0.2);
    }
    .responsibilities_soc-list li.people .logo_block {
        width:auto;
        height: 89px;
        padding: 0px;
        background: url("/responsibilities/images/soc_icon_people_l.png") center/auto 62px no-repeat #ee86a8;
    }
    .responsibilities_soc-list li.people .text_block {
        height: auto;
        padding: 20px 20px 0px ;
        font-size: 19px;
    }


    /* responsibilities_soc-list li.environment */
    .responsibilities_soc-list li.environment{
        width: 440px;
        height: 100%;
        margin: 0 0 20px 0;
        padding-bottom: 20px;
        background-color: rgba(171, 205, 3, 0.2);
    }
    .responsibilities_soc-list li.environment .logo_block {
        width:auto;
        height: 89px;
        padding: 0px;
        background: url("/responsibilities/images/soc_icon_environment_l.png") center/auto 62px no-repeat #abcd03;
    }
    .responsibilities_soc-list li.environment .text_block {
        height: auto;
        padding: 20px 20px 0px ;
        font-size: 19px;
    }
    
    /* responsibilities_soc-map */
    .responsibilities_soc-map {
        margin-bottom: 40px;
    }
    .responsibilities_soc-map_inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 48.62%;
        background: url(/responsibilities/corporate_citizenship/images/img_corporate_citizenship_map_01.png); no-repeat 0 0;
        background-size: cover;
    }
    .responsibilities_soc-map_region {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .responsibilities_soc-map_region > li {
        position: absolute;
        width: 5%;
        height: 10%;
        list-style-type: none;
    }
    .responsibilities_soc-map_region > li.responsibilities_soc-map_region_japan {
        top: 36.5%;
        left: 40.2%;
    }
    .responsibilities_soc-map_region > li.responsibilities_soc-map_region_america {
        top: 43.5%;
        left: 76.2%;
    }
    .responsibilities_soc-map_region > li.responsibilities_soc-map_region_europe {
        top: 35.5%;
        left: 14.2%;
    }
    .responsibilities_soc-map_region > li.responsibilities_soc-map_region_asia {
        top: 55.5%;
        left: 32.2%;
    }
    .responsibilities_soc-map_region > li  a {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: #000;
        text-decoration: underline;
        white-space: nowrap;
        font-size: 15px;
        font-weight: bold;
    }


    /* !#responsibilities_soc-region
    ---------------------------------------------------------- */
    .responsibilities_soc-region {
        margin-bottom: 40px;
        border: 2px solid #e5e5e5;
    }
    .responsibilities_soc-region > :last-child {
        margin-bottom: 0;
    }
    .responsibilities_soc-region_region {
        padding: 20px;
        margin: 0;
        border-top: 2px solid #e5e5e5;
    }
    .responsibilities_soc-region_region:first-child {
        border-top: none;
    }
    .responsibilities_soc-region_region > dt {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .responsibilities_soc-region_region > dd {
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .responsibilities_soc-region_list {
        display: block;
        margin-top: 8px;
    }
    .responsibilities_soc-region_list > li {
        box-sizing: border-box;
        list-style-type: none;
    }
    .responsibilities_soc-region_list > li:nth-child(n+2) {
        margin-top: 8px;
    }
    .responsibilities_soc-region_list > li a {
        align-items: center;
        display: flex;
        color: #000;
        text-decoration: none;
        font-size: 14px;
        padding-left: 20px;
        background: url(/etc/images/icons/icon_arrow_gray_pc.png) no-repeat 0 0.3em;
    }
    .responsibilities_soc-region_list > li a > .responsibilities_soc-region_list_text {
        text-decoration: underline;
    }
    .responsibilities_soc-region_list_icon {
        display: flex;
        margin-left: 5px;
        background-color: #fff;
    }
    .responsibilities_soc-region_list_icon img + img {
        margin-left: 5px;
    }
    
    /* menu-list */
    .products-top-anchor {
        margin: 0 0 20px;
        text-align: center;
    }
    .bg-gray > .container {
        width: 100%;
        overflow: visible;
    }
    .bg-gray > .container > div {
        width: 93.6%;
        margin-right: auto!important;
        margin-left: auto!important;
    }
    .bg-gray {
        background-color: #fbfbfb;
        padding-top: 30px;
    }
    .icon-blank {
        background-image: url(/etc/images/icons/icon_external_link_white.png);
        background-repeat: no-repeat;
        background-position: center right 40%;
    }
    .products-top-anchor li {
        list-style: none;
        border-bottom: 1px solid #ffffff;
        font-size: 150%;
        background: #333333;
    }
    .products-top-anchor li a {
        display: block;
        padding: 15px 10px;
        color: #ffffff;
        font-size: 91.1%;
        position: relative;
        /*background: url(/products/images/icon_down_white.png) no-repeat 400px 50%;*/
    }
    .products-top-anchor li a::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 1em;
        height: 1em;
        background: url(/products/images/icon_down_white.png) no-repeat 0 50%;
        right: 25px;
    }
    .menu_ver{display: block;}
    .pc_ver{display: none;}
}
    
}