@charset "utf-8";

/*-----
 * Default Layout
 */
/* フェードアニメーション */
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
 * TOPICS
 */
#topics .header #title {
	background-image: url(/en_assets/topics/img/title.png);
}
#topics .body .inner {
	width: 670px;
	padding: 45px 0;
}

/*
 * トピックス 一覧
 */
#topics #topics-index .inner {
	width: 570px;
}
#topics-index .topics-list {
	min-height: 100px;
}
#topics-index .topics-list li {
	margin-bottom: 25px;
}

/*
 * TOPICS 詳細
 */
#topics-detail h1 {
	margin: 0 0 35px;
	padding: 0 18px 18px;
	background: url(../img/dot_line.png) repeat-x 0 100%;
	font-size: 200%;
	font-weight: bold;
	text-align: left;
}
#topics-detail h1 small {
	display: block;
	padding-top: 3px;
	font-size: 90%;
	font-weight: normal;
}
#topics-detail .inner > div {
	padding: 0 18px;
}
#topics-detail h2 {
	margin: 18px 0 6px;
	font-size: 180%;
}
#topics-detail h3 {
	margin: 18px 0 6px;
}
#topics-detail p {
	margin-bottom: 18px;
}
#topics-detail ul,
#topics-detail ol {
	margin: 0 0 13px 22px;
}
#topics-detail ul li,
#topics-detail ol li {
	margin-bottom: 5px;
}
#topics-detail sup {
	vertical-align: 0.15em;
}
/* 2列 */
#topics-detail div.blocks {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 35px 0 18px;
}
#topics-detail div.blocks p {
	max-width: 310px;
	margin-bottom: 14px;
}
/* 表組み */
#topics-detail table {
	margin: 0 0 18px;
	border-collapse: collapse;
	border: 1px solid #000;
}
#topics-detail th,
#topics-detail td {
	padding: 5px;
	border: 1px solid #000;
	background-color: #fff;
	text-align: left;
	vertical-align: top;
}
/* 画像 */
#topics-detail img.img-left,
#topics-detail img.img-center,
#topics-detail img.img-right {
	display: block;
	margin: 5px auto 5px;
}
#topics-detail img.img-left {
	margin-left: 0;
}
#topics-detail img.img-right {
	margin-right: 0;
}
/* リンクリスト */
#topics-detail ul.link {
	list-style: none;
	margin: 40px 0;
}
#topics-detail ul.link li {
	margin-bottom: 8px;
}
#topics-detail ul.link li a {
	display: inline-block;
	padding-left: 28px;
	background: url(../img/arrow.png) no-repeat 5px 5px;
	color: inherit;
}
#topics-detail ul.link li a:hover {
	text-decoration: none;
}
#topics-detail ul.link li a.pdf:after,
#topics-detail ul.link li a.ex:after {
	display: inline-block;
	margin-left: 12px;
	background: url(../img/icons.png) no-repeat 0 0;
	font-size: 86%;
	text-decoration: none;
	vertical-align: middle;
	content: "";
}
#topics-detail ul.link li a.pdf:after {
	padding-left: 22px;
	min-height: 19px;
	content: attr(data-size);
}
#topics-detail ul.link li a.ex:after {
	width: 15px;
	height: 13px;
	background-position: 0 -50px;
}
/* ページャー */
#topics-detail .pager {
	margin: 65px 0 45px;
	text-align: center;
}
#topics-detail .pager ul {
	list-style: none;
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0 50px;
}
#topics-detail .pager li {
	height: 35px;
	margin: 0;
}
#topics-detail .pager li.back {
	display: table;
	width: 170px;
}
#topics-detail .pager li.prev,
#topics-detail .pager li.next {
	position: absolute;
	top: 0;
}
#topics-detail .pager li.prev {
	left: 0;
}
#topics-detail .pager li.next {
	right: 0;
}
#topics-detail .pager li a {
	color: #000;
	background-color: #fff;
	text-decoration: none;
}
#topics-detail .pager li.back a {
	display: table-cell;
	border: 1px solid #000;
	vertical-align: middle;
}
#topics-detail .pager li.back a:hover {
	background-color: #f3f3f3;
}
#topics-detail .pager li.prev a,
#topics-detail .pager li.next a {
	overflow: hidden;
	display: block;
	width: 35px;
	height: 100%;
	background: #000 url(/en_assets/topics/img/nav_arrorw.png) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
}
#topics-detail .pager li.next a {
	background-position: 100% 0;
}
#topics-detail .pager li.prev a:hover,
#topics-detail .pager li.next a:hover {
	background-color: #555;
}

/*
 * グループ会社
 */
#group .header #title {
	background-image: url(/en_assets/group/img/title.png);
}
#group .header p.lead {
	background-image: url(/en_assets/group/img/lead.png);
}
/* 地図 */
#group #map {
	width: 100%;
	height: 550px;
}
#group #map h3,
#group #map p {
	margin: 0 12px 12px 0;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	line-height: 135%;
}
#group #map h3 {
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}
.gm-style-iw div {
	overflow: visible !important;
}
/* 各拠点 */
#group #branch {
	width: 660px;
	margin: 0 auto;
	padding-bottom: 85px;
}
#group #branch section {
	position: relative;
	min-height: 100px;
	padding: 16px 80px 15px 148px;
	background: url(../img/dot_line.png) repeat-x 0 100%;
}
#group #branch section:before {
	position: absolute;
	top: 16px;
	left: 0;
	width: 130px;
	height: 100px;
	background: url(/en_assets/group/img/photos.jpg) no-repeat 0 0;
	content: "";
}
#group #branch #tokyo-hq:before {
	background-position: 0 -100px;
}
#group #branch #nagoya:before {
	background-position: 0 -200px;
}
#group #branch #nakatsugawa-hq:before {
	background-position: 0 -300px;
}
#group #branch #gtc:before {
	background-position: 0 -400px;
}
#group #branch #adachi:before {
	background-position: 0 -600px;
}
#group #branch #nakatsugawa-fac:before {
	background-position: 0 -700px;
}
#group #branch #ochiai-fac:before {
	background-position: 0 -800px;
}
#group #branch #kunshan:before {
	background-position: 0 -900px;
}
#group #branch #subic:before {
	background-position: 0 -1200px;
}
#group #branch #sonax:before {
	background-position: 0 -1500px;
}
#group #branch #komaba-fac:before {
	background-position: 0 -1700px;
}
#group #branch #osaka:before {
	background-position: 0 -1400px;
}
#group #branch #toki-fac:before {
	background-image: url(/en_assets/group/img/photos2.jpg);
	background-position: 0 0;
}
#group #branch #glc:before {
	background-image: url(/en_assets/group/img/photos2.jpg);
	background-position: 0 -100px;
}
#group #branch #paris:before {
	background-image: url(/en_assets/group/img/photos2.jpg);
	background-position: 0 -200px;
}
#group #branch #tc-america:before {
	background-image: url(/en_assets/group/img/photos2.jpg);
	background-position: 0 -300px;
}
#group #branch #mizunami-fac:before {
	background-image: url(/en_assets/group/img/photo_mizunami.jpg);
	background-position: 0 0;
}
#group #branch h2 {
	margin-top: 50px;
	padding-bottom: 25px;
	background: url(../img/dot_line.png) repeat-x 0 100%;
	font-size: 220%;
	text-align: center;
	text-transform: uppercase;
}
#group #branch h3 {
	margin: 3px 0 10px;
	text-transform: uppercase;
}
#group #branch p a {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
#group #branch p a[target="_blank"]:after {
	display: inline-block;
	width: 15px;
	height: 13px;
	margin-left: 8px;
	background: url(../img/icons.png) no-repeat 0 -50px;
	vertical-align: -2px;
	content: "";
}
#group #branch p span.tel {
	margin-right: 8px;
}
#group #branch p.to-map {
	position: absolute;
	top: 18px;
	right: 0;
}
#group #branch p.to-map a {
	display: block;
	width: 70px;
	padding: 5px 0;
	background-color: #000;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#group #branch p.to-map a:hover {
	background-color: #555;
}

/*
 * 会社概要共通
 */
#company .header #title,
#greeting .header #title,
#movie .header #title {
	background-image: url(/en_assets/company/img/title.png);
}
/*
 * 会社概要
 */
#company .body {
	min-height: 430px;
	background: #fdede7 url(/en_assets/company/img/company_bg.jpg) no-repeat 50% 50%;
	background-size: cover;
}
#company .body .inner {
	width: 766px;
}
#company .body dl {
	padding-top: 65px;
}
#company .body dt,
#company .body dd {
	margin-bottom: 35px;
	font-size: 160%;
}
#company .body dt {
	clear: left;
	float: left;
	width: 9.5em;
}
#company .body dt span {
	margin: 0 -2px;
}
#company .body dt:before {
	display: inline-block;
	width: 8px;
	height: 1.2em;
	margin-right: 5px;
	background-color: #c00;
	vertical-align: middle;
	content: "";
}
#company .body dd small {
	display: block;
	font-size: 88%;
	line-height: 130%;
}

/*
 * 代表挨拶
 */
#greeting .body .inner {
	width: 740px;
	margin-bottom: 95px;
}
#greeting .body p {
	margin-bottom: 24px;
	font-size: 160%;
	line-height: 190%;
}
#greeting .body p.lead {
	margin-bottom: 40px;
	font-size: 200%;
	line-height: 160%;
	text-align: center;
}
#greeting .body p.sig {
	line-height: 140%;
	text-align: right;
}
#greeting .body p.sig img {
	margin-bottom: 5px;
}

/*
 * 会社案内 Movie
 */
#movie .body {
	background-color: #fef1eb;
}
#movie .body .inner {
	width: 910px;
}
#movie .body iframe {
	vertical-align: bottom;
}

/*
 * 製品情報
 */
body.products {
	min-width: 1200px;
}
#products .header {
	position: absolute;
	z-index: 200;
	top: 0;
	width: 100%;
	min-width: 1200px;
}
#products .header #title {
	background-image: url(/en_assets/products/img/title.png);
}
/* タイトル固定 */
#products .header.fixed {
	position: fixed;
	top: -123px;
}
/* 本文 */
#products .body {
	background-color: transparent;
}
#products .sec {
	position: relative;
	margin-bottom: -62px;
	padding-top: 62px;
	background-color: #fdf5f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#products .sec .inner {
	overflow: hidden;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 1200px;
	min-height: 450px;
	padding: 106px 64px 0;
}
#products .sec .inner:before {
	position: absolute;
	top: 46px;
	left: 61px;
	width: 1079px;
	height: 50px;
	background: url(/en_assets/products/img/names.png) no-repeat 0 0;
	content: "";
}
#products .sec h2 {
	margin-bottom: 25px;
	font-size: 240%;
	font-weight: normal;
	text-transform: uppercase;
}
#products .sec h2 span.hide {
	display: none;
}
#products .sec h2 small {
	font-size: 83%;
}
#products .sec p {
	font-size: 160%;
	line-height: 190%;
}
/* 右寄せ */
#products .sec.r {
	background-color: #fff;
}
#products .sec.r .inner:before {
	left: auto;
	right: 61px;
}
#products .sec.r h2 {
	text-align: right;
}
#products .sec.r p {
	text-align: right;
}
/* アイライナー */
#products #eye-liner {
	z-index: 199;
	margin-top: 136px;
	background-image: url(/en_assets/products/img/eye_liner.jpg);
}
#products #eye-liner .inner:before {
	background-position: 0 0;
}
/* アイブロウ */
#products #eye-brow {
	z-index: 198;
	background-image: url(/en_assets/products/img/eye_brow.jpg);
}
#products #eye-brow .inner:before {
	background-position: 100% -100px;
}
/* アイシャドウ */
#products #eye-shadow {
	z-index: 197;
	background-image: url(/en_assets/products/img/eye_shadow.jpg);
}
#products #eye-shadow .inner:before {
	background-position: 0 -200px;
}
/* マスカラ */
#products #mascara {
	z-index: 196;
	background-image: url(/en_assets/products/img/mascara.jpg);
}
#products #mascara .inner:before {
	background-position: 100% -300px;
}
/* チーク */
#products #cheek {
	z-index: 195;
	background-image: url(/en_assets/products/img/cheek.jpg);
}
#products #cheek .inner:before {
	background-position: 0 -400px;
}
/* リップ */
#products #lip {
	z-index: 194;
	background-image: url(/en_assets/products/img/lip.jpg);
}
#products #lip .inner:before {
	background-position: 100% -500px;
}
/* フェイス製品 */
#products #face {
	z-index: 193;
	background-image: url(/en_assets/products/img/face.jpg);
}
#products #face .inner:before {
	background-position: 0 -600px;
}
/* スキンケア＆ヘアケア */
#products #skin-care {
	z-index: 192;
	background-color: #eeeef0;
	background-image: none;
}
#products #skin-care:before,
#products #skin-care:after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
}
#products #skin-care:before {
	background: url(/en_assets/products/img/skin_care_bg.png) repeat-x 0 62px;
}
#products #skin-care:after {
	background: url(/en_assets/products/img/skin_care.jpg) no-repeat 50% 62px;
}
#products #skin-care .inner {
	z-index: 2;
}
#products #skin-care .inner:before {
	background-position: 100% -700px;
}
/* ダイヤルペン */
#products #dial-pen {
	z-index: 191;
	background-image: url(/en_assets/products/img/dial_pen.jpg);
}
#products #dial-pen .inner:before {
	background-position: 0 -800px;
}
/* パウダーバリエーション */
#products #powder {
	z-index: 190;
	margin-bottom: 0;
	background-color: #fbfbfc;
	background-image: url(/en_assets/products/img/powder.jpg);
}
#products #powder .inner:before {
	background-position: 100% -900px;
}
/* お問い合わせボタン */
#to-contact-pro {
	position: fixed;
	z-index: 250;
	left: 0;
	right: 0;
	bottom: 0;
	width: 170px;
	height: 64px;
	margin: 0 auto;
	background-color: #fff;
}
#to-contact-pro a {
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	background: url(/en_assets/products/img/btn_contact_pro.png) no-repeat 0 0;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
#to-contact-pro a:hover {
	opacity: 0.8;
}

/*
 * トキワの強み
 */
#strength .header #title {
	background-image: url(/en_assets/strength/img/title.png);
}
#strength .header p.lead {
	background-image: url(/en_assets/strength/img/lead.png);
}
#strength .body {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	background-color: transparent;
}
#strength .sec {
	overflow: hidden;
	display: flex;
	position: relative;
	width: 33.3%;
	max-width: 398px;
	margin: 0 1px;
	transition: width .5s ease .25s;
}
#strength .sec:before,
#strength .sec:after {
	position: absolute;
	z-index: -1;
	width: 100%;
	background: no-repeat 0 0;
	background-size: cover;
	content: "";
}
#strength .sec:before {
	height: 410px;
	transition-property: width, height, opacity;
	transition-duration: .2s;
	transition-timing-function: ease;
}
#strength #s-innovation:before {
	background-image: url(/en_assets/strength/img/innovation_bg.jpg);
}
#strength #s-quality:before {
	background-image: url(/en_assets/strength/img/quality_bg.jpg);
}
#strength #s-clean:before {
	background-image: url(/en_assets/strength/img/clean_bg.jpg);
}
#strength .sec:after {
	height: 100%;
	opacity: 0;
	transition: opacity .3s ease .1s;
}
#strength #s-innovation:after {
	background-image: url(/en_assets/strength/img/innovation_bg_l.jpg);
}
#strength #s-quality:after {
	background-image: url(/en_assets/strength/img/quality_bg_l.jpg);
}
#strength #s-clean:after {
	background-image: url(/en_assets/strength/img/clean_bg_l.jpg);
}
/* 非表示 */
#strength .sec.hide {
	width: 0;
	height: 0;
	transition-delay: 0s;
}
/* 全体表示 */
#strength .sec.open {
	width: 100%;
	max-width: none;
	transition: width .4s ease;
}
#strength .sec.open:before {
	opacity: 0;
}
#strength .sec.open:after {
	opacity: 1;
}
/* メニュー */
#strength .sec .menu {
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	margin: 31px 0 0;
	padding-bottom: 80px;
	transition-property: width, margin;
	transition-duration: .2s;
	transition-timing-function: ease;
}
#strength .sec .menu h2 {
	box-sizing: border-box;
	position: relative;
	height: 381px;
	padding-left: 7px;
	background-color: transparent;
	transition: background-color .3s ease, font-size .3s ease;
	color: #fff;
	font-family: "Alte DIN 1451 Mittelschrift";
	font-size: 440%;
	font-weight: normal;
}
#strength .sec .menu li {
	list-style: none;
	height: 106px;
	margin-bottom: 2px;
	font-size: 220%;
	line-height: 1.4;
}
#strength .sec .menu li a {
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 38px;
	color: inherit;
	text-decoration: none;
	position: relative;
}
#strength .sec .menu li a.c {
	opacity: 1 !important;
	cursor: default;
}
#strength .sec .menu li a:hover {
	opacity: 0.8;
}
#strength .sec .menu li a:after {
	position: absolute;
	top: 0;
	right: 23px;
	bottom: 0;
	width: 17px;
	height: 29px;
	margin: auto 0;
	background: no-repeat 50% 50%;
	content: "";
}
#strength .sec .menu li a.c:after {
	content: none;
}
#strength #s-innovation .menu li a {
	background-color: #fce8f1;
}
#strength #s-innovation .menu li a:after {
	background-image: url(/en_assets/strength/img/innovation_arrow.png);
}
#strength #s-quality .menu li a {
	background-color: #ece2fb;
}
#strength #s-quality .menu li a:after {
	background-image: url(/en_assets/strength/img/quality_arrow.png);
}
#strength #s-clean .menu li a {
	background-color: #daf2f4;
}
#strength #s-clean .menu li a:after {
	background-image: url(/en_assets/strength/img/clean_arrow.png);
}
#strength .sec .menu p.to-top {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: 45px;
	font-size: 220%;
	text-transform: uppercase;
	cursor: pointer;
}
#strength .sec .menu p.to-top:before {
	position: absolute;
	top: 0;
	left: 17px;
	bottom: 0;
	width: 17px;
	height: 29px;
	margin: auto 0;
	transform: rotate(180deg);
	background: no-repeat 50% 50%;
	background-size: contain;
	content: "";
}
#strength #s-innovation .menu p.to-top:before {
	background-image: url(/en_assets/strength/img/innovation_arrow.png);
}
#strength #s-quality .menu p.to-top:before {
	background-image: url(/en_assets/strength/img/quality_arrow.png);
}
#strength #s-clean .menu p.to-top:before {
	background-image: url(/en_assets/strength/img/clean_arrow.png);
}
/* 全体表示 */
#strength .sec.open .menu {
	align-self: flex-start;
	width: 308px;
	margin: 43px 67px 150px 105px;
}
#strength .sec.open .menu h2 {
	height: 258px;
	margin-bottom: 6px;
	padding: 35px 0 0 11px;
	font-size: 390%;
}
#strength .sec.open .menu h2 {
	background-color: rgba(255,255,255,0.3) !important;
}
#strength #s-innovation.open .menu h2 {
	background-color: #fce8f1;
}
#strength #s-quality.open .menu h2 {
	background-color: #ece2fb;
}
#strength #s-clean.open .menu h2 {
	background-color: #daf2f4;
}
#strength .sec.open .menu li {
	margin-bottom: 6px;
}
#strength .sec.open .menu li a {
	padding: 0 44px 0 24px;
	background-color: rgba(255,255,255,0.3) !important;
}
#strength .sec.open .menu p.to-top {
	display: block;
}
/* 詳細 */
#strength .sec .detail {
	display: none;
	padding: 70px 100px 0 0;
}
#strength .sec.open .detail {
	display: block;
}
#strength .sec .detail > div {
	overflow: hidden;
	display: none;
	animation: fadein 1.5s ease;
}
#strength .sec .detail > div.target {
	display: block;
}
#strength .sec .detail h3 {
	margin-bottom: 35px;
	font-size: 400%;
}
#strength .sec .detail p {
	font-size: 180%;
	line-height: 180%;
	text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
}
#strength .sec .detail dl {
	margin: 25px 0;
	padding: 15px 20px 10px;
	background-color: rgba(255,255,255,0.7);
}
#strength .sec .detail dt,
#strength .sec .detail dd {
	font-size: 145%;
	line-height: 150%;
}
#strength .sec .detail dt {
	font-weight: bold;
	text-transform: uppercase;
}
#strength .sec .detail dd {
	padding-bottom: 10px;
}

/*
 * サステナビリティ
 */
#sustainability {
	padding-bottom: 50px;
}
#sustainability .header #title {
	background-image: url(/en_assets/sustainability/img/title.png);
}
#sustainability .header p.lead {
	background-image: url(/en_assets/sustainability/img/lead.png);
}
#sustainability .body .inner {
	overflow: hidden;
}
#sustainability sub {
	font-size: 60%;
	vertical-align: 0;
}
#sustainability h2 {
	font-size: 400%;
	line-height: 1;
}
#sustainability h2:before {
	display: block;
	font-family: "Alte DIN 1451 Mittelschrift";
	font-weight: normal;
	font-size: 200%;
	line-height: 0.75;
	text-transform: uppercase;
}
#sustainability h2 span {
	display: block;
	height: 38px;
	margin: 11px 0 10px 6px;
	font-weight: normal;
}
#sustainability h2 + p {
	margin: 0 420px 30px 6px;
	font-size: 180%;
	line-height: 2;
}
#sustainability .detail {
	display: none;
	padding: 42px 40px 10px;
	animation: fadein .5s ease;
}
#sustainability .detail.opened {
	display: block;
}
#sustainability .detail > div {
	margin-bottom: 25px;
	padding: 20px 58px 18px 38px;
	background-color: #fff;
}
#sustainability .detail h3 {
	margin-bottom: 5px;
	font-size: 200%;
}
#sustainability .detail p {
	font-size: 140%;
	line-height: 1.95;
}
#sustainability .more {
	margin-bottom: 14px;
	text-align: center;
	line-height: 1;
}
#sustainability .more span {
	display: inline-block;
	padding: 10px 25px 0;
	text-transform: uppercase;
	cursor: pointer;
}
#sustainability .more span:after {
	display: block;
	width: 10px;
	height: 6px;
	margin: 10px auto;
	background: url(/en_assets/sustainability/img/icon_more.png) no-repeat 50% 100%;
	content: "";
}
#sustainability .more span.close:after {
	background-image: none;
}
#sustainability .more span:hover {
	opacity: 0.5;
}
/* 環境 */
#sustainability #sus-env {
	background: #e0fcb9 url(/en_assets/sustainability/img/env_bg.jpg) no-repeat 100% 0;
}
#sustainability #sus-env h2:before {
	color: #0ab927;
	content: "ENVIRONMENT";
}
/* 社会 */
#sustainability #sus-soc {
	background: #c9f6fb url(/en_assets/sustainability/img/soc_bg.jpg) no-repeat 100% 0;
}
#sustainability #sus-soc h2:before {
	color: #01a9f7;
	content: "Social";
}
/* ガバナンス */
#sustainability #sus-gov {
	background: #ebd1ff url(/en_assets/sustainability/img/gov_bg.jpg) no-repeat 100% 0;
}
#sustainability #sus-gov h2:before {
	color: #ae04ed;
	content: "Governance";
}
/* Default Layout */


/*-----
 *  Mobile Layout: 480px, 320px
 */
@media screen and (max-width:767px) {
	/*
	 * TOPICS
	 */
	#topics .body .inner {
		width: auto !important;
		padding: 20px 10px 30px;
	}
	
	/*
	 * トピックス 一覧
	 */
	#topics-index .topics-list {
		min-height: 160px;
	}
	#topics-index .topics-list li {
		margin-bottom: 12px;
	}
	
	/*
	 * TOPICS 詳細
	 */
	#topics-detail h1 {
		margin-bottom: 10px;
		padding: 0;
		border-bottom: 1px dotted #000;
		background: none;
		font-size: 180%;
		line-height: 135%;
	}
	#topics-detail h1 small {
		padding-top: 0;
		font-size: 67%;
	}
	#topics-detail .inner > div {
		padding: 0;
	}
	#topics-detail h2 {
		font-size: 170%;
	}
	#topics-detail h3 {
		font-size: 150%;
	}
	/* 2列 */
	#topics-detail div.blocks {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		justify-content: center;
	}
	#topics-detail div.blocks p {
		max-width: none;
	}
	#topics-detail div.blocks p img {
		display: block;
		margin: 0 auto;
	}
	/* 表組み */
	#topics-detail th,
	#topics-detail td {
		padding: 4px;
		font-size: 130%;
		line-height: 135%;
	}
	/* 画像 */
	#topics-detail img {
		max-width: 100%;
		height: auto;
	}
	/* リンクリスト */
	#topics-detail ul.link {
		margin: 20px 0;
	}
	#topics-detail ul.link li {
		margin-bottom: 12px;
	}
	#topics-detail ul.link li a {
		display: block;
		padding-left: 18px;
		background: url(../img/sp_arrow.png) no-repeat 0 5px;
		background-size: 13px auto;
		text-decoration: none;
	}
	/* ページャー */
	#topics-detail .pager {
		margin: 40px 0 0;
	}
	#topics-detail .pager ul {
		display: block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 300px;
		margin: 0 auto;
		padding: 0 54px;
	}
	#topics-detail .pager li {
		height: 50px;
	}
	#topics-detail .pager li.back {
		width: 100%;
	}
	#topics-detail .pager li.back a:hover {
		background-color: #fff;
	}
	#topics-detail .pager li.prev a,
	#topics-detail .pager li.next a {
		width: 50px;
		background-image: url(/en_assets/topics/img/sp_nav_arrorw.png);
		background-size: auto 50px;
	}
	#topics-detail .pager li.prev a:hover,
	#topics-detail .pager li.next a:hover {
		background-color: #000;
	}
	
	/*
	 * グループ会社
	 */
	#group .header p.lead {
		height: 15px;
		background-image: url(/en_assets/group/img/sp_lead.png);
	}
	/* 地図 */
	#group #map {
		height: 289px;
	}
	#group #map h3,
	#group #map p {
		font-size: 10px;
	}
	#group #map h3 {
		font-size: 11px;
		margin-bottom: 3px;
	}
	/* 各拠点 */
	#group #branch {
		width: auto;
		padding: 0 10px 30px;
	}
	#group #branch section {
		min-height: 50px;
		padding: 10px 0 12px 79px;
		border-bottom: 1px dotted #000;
		background: none;
	}
	#group #branch section:before {
		top: 9px;
		left: 5px;
		width: 65px;
		height: 50px;
		background-size: 65px auto;
	}
	#group #branch #tokyo-hq:before {
		background-position: 0 -50px;
	}
	#group #branch #nagoya:before {
		background-position: 0 -100px;
	}
	#group #branch #nakatsugawa-hq:before {
		background-position: 0 -150px;
	}
	#group #branch #gtc:before {
		background-position: 0 -200px;
	}
	#group #branch #tokyo-fac:before {
		background-position: 0 -250px;
	}
	#group #branch #adachi:before {
		background-position: 0 -300px;
	}
	#group #branch #nakatsugawa-fac:before {
		background-position: 0 -350px;
	}
	#group #branch #ochiai-fac:before {
		background-position: 0 -400px;
	}
	#group #branch #kunshan:before {
		background-position: 0 -450px;
	}
	#group #branch #subic:before {
		background-position: 0 -600px;
	}
	#group #branch #sonax:before {
		background-position: 0 -750px;
	}
	#group #branch #komaba-fac:before {
		background-position: 0 -850px;
	}
	#group #branch #osaka:before {
		background-position: 0 -700px;
	}
	/* 別画像使用 */
	#group #branch #toki-fac:before {
		background-position: 0 0;
	}
	#group #branch #glc:before {
		background-position: 0 -50px;
	}
	#group #branch #paris:before {
		background-position: 0 -100px;
	}
	#group #branch #tc-america:before {
		background-position: 0 -150px;
	}
	#group #branch h2 {
		margin-top: 25px;
		border-bottom: 1px dotted #000;
		background: none;
		font-size: 180%;
	}
	#group #branch h3 {
		margin: 0;
		font-size: 140%;
	}
	#group #branch p {
		margin-top: 4px;
		font-size: 120%;
		line-height: 135%;
	}
	#group #branch p span.tel {
		margin-right: 0;
	}
	#group #branch p.to-map {
		overflow: hidden;
		position: static;
		padding-top: 4px;
	}
	#group #branch p.to-map a {
		float: left;
		width: 84px;
		padding: 6px 0;
	}
	#group #branch p.to-map a:hover {
		background-color: #000;
	}
	
	/*
	 * 会社概要
	 */
	#company .body {
		min-height: inherit;
		background: none;
	}
	#company .body:before {
		display: block;
		width: 100%;
		max-width: 414px;
		height: 213px;
		margin: 0 auto;
		background: url(/en_assets/company/img/sp_company_bg.jpg) no-repeat 50% 50%;
		background-size: auto 100%;
		content: "";
	}
	#company .body .inner {
		width: auto;
		padding: 0 10px;
	}
	#company .body dl {
		padding-top: 20px;
	}
	#company .body dt,
	#company .body dd {
		font-size: 140%;
		line-height: 135%;
	}
	#company .body dt {
		float: none;
		width: auto;
		margin-bottom: 8px;
	}
	#company .body dt:before {
		width: 6px;
		height: 1em;
		vertical-align: -2px;
	}
	#company .body dd {
		margin: 0 0 20px 11px;
	}
	#company .body dd small {
		margin-top: 4px;
	}
	
	/*
	 * 代表挨拶
	 */
	#greeting .body .inner {
		width: auto;
		margin-bottom: 45px;
		padding: 0 10px;
	}
	#greeting .body p {
		font-size: 140%;
		line-height: 165%;
	}
	#greeting .body p.lead {
		margin-bottom: 24px;
		padding: 0 10px;
		font-size: 160%;
	}
	
	/*
	 * 会社案内 Movie
	 */
	#movie .body .inner {
		width: auto;
	}
	#movie .body .movie-wrap {
		position: relative;
		padding-top: 56.25%;
	}
	#movie .body iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/*
	 * 製品情報
	 */
	body.products {
		min-width: inherit;
	}
	#products .header {
		min-width: inherit;
	}
	/* タイトル固定 */
	#products .header.fixed {
		top: 0;
		padding-top: 0;
	}
	#products .header.fixed:before {
		display: block;
		position: absolute;
		top: 24px;
		left: 16px;
		width: 14px;
		height: 8px;
		background: url(../img/sp_header_open.png) no-repeat 0 0;
		background-size: 14px auto;
		content: "";
	}
	#products .header.fixed #title {
		height: 56px;
		padding-left: 135px;
		background-position: 43px 21px;
		background-size: 80px auto;
		text-align: left;
		cursor: pointer;
	}
	#products .header.fixed p.lead {
		display: none;
	}
	#products .header.fixed ul {
		position: absolute;
		width: 100%;
		top: -226px;
		background-color: #fff;
	}
	/* メニュー表示 */
	#products .header.fixed.open:before {
		background-position: 0 100%;
	}
	#products .header.fixed.open ul {
		position: static;
	}
	/* 本文 */
	#products .sec {
		margin-bottom: -56px;
		padding-top: 56px;
		background-position: 50% 46px;
		background-size: 470px auto;
	}
	#products .sec .inner {
		width: auto;
		min-height: inherit;
		padding: 58px 10px 22px;
	}
	#products .sec .inner:before {
		top: 19px;
		left: 8px !important;
		width: 291px;
		height: 33px;
		background-image: url(/en_assets/products/img/sp_names.png);
		background-size: 291px auto;
	}
	#products .sec h2 {
		font-size: 150%;
		font-weight: bold;
	}
	#products .sec h2 small {
		display: inline-block;
		padding-top: 4px;
		font-size: 87%;
		line-height: 120%;
	}
	#products .sec p {
		font-size: 140%;
		line-height: 160%;
	}
	/* 右寄せ */
	#products .sec.r .inner:before {
		right: auto;
	}
	#products .sec.r h2 {
		text-align: left;
	}
	#products .sec.r p {
		text-align: left;
	}
	/* アイライナー */
	#products #eye-liner {
		margin-top: 213px; /* 269-56 */
		background-image: url(/en_assets/products/img/sp_eye_liner.jpg);
	}
	#products #eye-liner h2 {
		margin-bottom: 258px;
	}
	/* アイブロウ */
	#products #eye-brow {
		background-image: url(/en_assets/products/img/sp_eye_brow.jpg);
	}
	#products #eye-brow h2 {
		margin-bottom: 308px;
	}
	/* アイシャドウ */
	#products #eye-shadow {
		background-image: url(/en_assets/products/img/sp_eye_shadow.jpg);
	}
	#products #eye-shadow h2 {
		margin-bottom: 300px;
	}
	/* マスカラ */
	#products #mascara {
		background-image: url(/en_assets/products/img/sp_mascara.jpg);
	}
	#products #mascara h2 {
		margin-bottom: 284px;
	}
	/* チーク */
	#products #cheek {
		background-image: url(/en_assets/products/img/sp_cheek.jpg);
	}
	#products #cheek h2 {
		margin-bottom: 264px;
	}
	/* リップ */
	#products #lip {
		background-image: url(/en_assets/products/img/sp_lip.jpg);
	}
	#products #lip .inner {
		padding-top: 99px;
	}
	#products #lip .inner:before {
		height: 73px;
	}
	#products #lip h2 {
		margin-bottom: 320px;
	}
	/* フェイス製品 */
	#products #face {
		background-image: url(/en_assets/products/img/sp_face.jpg);
	}
	#products #face .inner {
		padding-top: 99px;
	}
	#products #face .inner:before {
		height: 73px;
	}
	#products #face h2 {
		margin-bottom: 306px;
	}
	/* スキンケア＆ヘアケア */
	#products #skin-care:before {
		background-color: #eeeff0;
		background-image: url(/en_assets/products/img/sp_skin_care_bg.jpg);
		background-position: 0 56px;
		background-size: auto 350px;
	}
	#products #skin-care:after {
		background-image: url(/en_assets/products/img/sp_skin_care.jpg);
		background-position: 50% 56px;
		background-size: 470px auto;
	}
	#products #skin-care .inner {
		padding-top: 99px;
	}
	#products #skin-care .inner:before {
		height: 73px;
	}
	#products #skin-care h2 {
		margin-bottom: 214px;
	}
	/* ダイヤルペン */
	#products #dial-pen {
		background-image: url(/en_assets/products/img/sp_dial_pen.jpg);
	}
	#products #dial-pen h2 {
		margin-bottom: 318px;
	}
	/* パウダーバリエーション */
	#products #powder {
		background-image: url(/en_assets/products/img/sp_powder.jpg);
	}
	#products #powder .inner {
		padding-top: 99px;
	}
	#products #powder .inner:before {
		height: 73px;
	}
	#products #powder h2 {
		margin-bottom: 320px;
	}
	/* お問い合わせボタン */
	#to-contact-pro {
		width: 128px;
		height: 48px;
	}
	#to-contact-pro.hide {
		display: none;
	}
	#to-contact-pro a {
		background-image: url(/en_assets/products/img/sp_btn_contact_pro.png);
		background-size: contain;
	}
	#to-contact-pro a:hover {
		opacity: 1;
	}
	
	/*
	 * トキワの強み
	 */
	#strength .header p.lead {
		background-image: url(/en_assets/strength/img/sp_lead.png);
	}
	#strength .body {
		flex-direction: column;
		max-width: none;
	}
	#strength .sec {
		flex-direction: column;
		width: 100%;
		max-width: none;
		margin: 0 0 10px;
		transition: none;
	}
	#strength .sec:before,
	#strength .sec:after {
		content: none;
	}
	/* 非表示 */
	#strength .sec.hide {
		width: auto;
		height: auto;
	}
	/* 全体表示 */
	#strength .sec.open {
		transition: none;
	}
	/* メニュー */
	#strength .sec .menu {
		margin: 0;
		padding-bottom: 0;
		transition: none;
	}
	#strength .sec .menu h2 {
		height: 150px;
		padding: 7px 0 0 10px;
		font-size: 33px;
		background: no-repeat 50% 100% / cover;
		transition: none;
	}
	#strength #s-innovation .menu h2 {
		background-image: url(/en_assets/strength/img/sp_innovation_bg.jpg);
	}
	#strength #s-quality .menu h2 {
		background-image: url(/en_assets/strength/img/sp_quality_bg.jpg);
	}
	#strength #s-clean .menu h2 {
		background-image: url(/en_assets/strength/img/sp_clean_bg.jpg);
	}
	#strength .sec .menu h2:before {
		margin-bottom: 2px;
		font-size: 33px;
	}
	#strength .sec .menu ul {
		display: none;
	}
	#strength .sec .menu p.to-top {
		display: none !important;
	}
	/* 全体表示 */
	#strength .sec.open .menu {
		align-self: auto;
		width: auto;
		margin: 0;
	}
	#strength .sec.open .menu h2 {
		height: 150px;
		margin-bottom: 0;
		padding: 7px 0 0 10px;
		font-size: 25px;
	}
	/* 詳細 */
	#strength .sec .detail {
		display: block;
		padding: 0;
	}
	#strength .sec .detail > div {
		display: block !important;
		margin-top: 2px;
		animation: none;
	}
	#strength #s-innovation .detail > div {
		background-color: #ffd0da;
	}
	#strength #s-quality .detail > div {
		background-color: #e6d1ff;
	}
	#strength #s-clean .detail > div {
		background-color: #bce8c9;
	}
	#strength .sec .detail h3 {
		position: relative;
		margin-bottom: 0;
		padding: 18px 33px 18px 10px;
		font-size: 15px;
		cursor: pointer;
	}
	#strength .sec .detail h3:after {
		position: absolute;
		top: 0;
		right: 12px;
		bottom: 0;
		width: 9px;
		height: 15px;
		margin: auto 0;
		background: no-repeat 50% 50% / contain;
		transform: rotate(90deg);
		content: "";
	}
	#strength .sec .detail h3.opened:after {
		transform: rotate(-90deg);
	}
	#strength #s-innovation .detail h3:after {
		background-image: url(/en_assets/strength/img/innovation_arrow.png);
	}
	#strength #s-quality .detail h3:after {
		background-image: url(/en_assets/strength/img/quality_arrow.png);
	}
	#strength #s-clean .detail h3:after {
		background-image: url(/en_assets/strength/img/clean_arrow.png);
	}
	#strength .sec .detail h3 + div {
		display: none;
		padding: 5px 10px 15px;
		animation: fadein .5s ease;
	}
	#strength .sec .detail h3.opened + div {
		display: block;
	}
	#strength .sec .detail p {
		font-size: 12px;
		line-height: 190%;
	}
	#strength .sec .detail dl {
		margin: 15px 0 0;
		padding: 10px;
		background-color: rgba(255,255,255,0.4);
	}
	#strength .sec .detail dt,
	#strength .sec .detail dd {
		font-size: 11px;
	}
	#strength .sec .detail dt:after {
		content: none;
	}
	#strength .sec .detail dd {
		padding-bottom: 6px;
	}
	
	/*
	 * サステナビリティ
	 */
	#sustainability {
		padding-bottom: 10px;
	}
	#sustainability .header p.lead {
		height: 15px;
		background-image: url(/en_assets/sustainability/img/sp_lead.png);
	}
	#sustainability sub {
		font-size: 75%;
	}
	#sustainability h2 {
		font-size: 28px;
	}
	#sustainability h2:before {
		padding: 14px 0 0 9px;
		font-size: 40px;
	}
	#sustainability h2 span {
		height: 26px;
		margin: 9px 0 12px 12px;
		font-size: 57%;
	}
	#sustainability h2 + p {
		margin: 0 50% 10px 12px;
		font-size: 12px;
		line-height: 1.6;
	}
	#sustainability .detail {
		padding: 25px 10px 15px;
	}
	#sustainability .detail > div {
		margin-bottom: 5px;
		padding: 12px 10px;
	}
	#sustainability .detail h3 {
		font-size: 15px;
	}
	#sustainability .detail p {
		font-size: 12px;
		line-height: 1.7;
	}
	#sustainability .more {
		margin-bottom: 0;
		font-size: 12px;
	}
	#sustainability .more span {
		padding: 10px 50px 0;
	}
	#sustainability .more span:after {
		width: 7px;
		height: 4px;
		margin: 3px auto 17px;
		background-size: contain;
	}
	#sustainability .more span:hover {
		opacity: 1;
	}
	/* 環境 */
	#sustainability #sus-env {
		background-image: url(/en_assets/sustainability/img/sp_env_bg.jpg);
		background-size: 320px auto;
	}
	#sustainability #sus-env h2 + p {
		margin-right: 32%;
	}
	/* 社会 */
	#sustainability #sus-soc {
		background-image: url(/en_assets/sustainability/img/sp_soc_bg.jpg);
		background-size: 320px auto;
	}
	/* ガバナンス */
	#sustainability #sus-gov {
		background-image: url(/en_assets/sustainability/img/sp_gov_bg.jpg);
		background-size: 320px auto;
	}
} /* Mobile Layout */
#group section#komaba-fac:before {
	background-image: url(/en_assets/group/img/komaba-fac.jpg) !important;
	background-position:center center !important;
	background-size: cover !important;
}

#group section#toki-fac:before {
	background-image: url(/en_assets/group/img/toki-fac.jpg) !important;
	background-position:center center !important;
	background-size: cover !important;
}

#group section#nakatsugawa-fac:before {
	background-image: url(/en_assets/group/img/nakatsugawa-fac.jpg) !important;
	background-position:center center !important;
	background-size: cover !important;
}

#group section#nakatsugawa-hq:before {
	background-image: url(/en_assets/group/img/nakatsugawa-hq.jpg) !important;
	background-position:center center !important;
	background-size: cover !important;
}