@charset "utf-8";

#contents_ .more {color:#7998ac; font-size:1.4rem; font-weight:bold; text-decoration:none;}
#contents_ .more::after {display:inline-block; content:">"; margin:0 0 0 0.5em;}
#contents_ .more:hover {color:#9ab9c8;}

#contents_ > .category {position:relative; padding:140px 0 0;}
#contents_ > .category > h1 {font-size:3rem; font-weight:bold; line-height:1;}
#contents_ > .category > .more {position:absolute; top:140px; right:0;}

#contents_ .content {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:calc(50% - 40px); flex-basis:calc(50% - 40px);
	position:relative; margin:40px 0 0 40px; overflow:hidden; transition:opacity 0.2s ease-in-out;}
#contents_ .content > .image {display:block;}
#contents_ .content > .image > img {display:block;}
#contents_ .content > h1 {margin:0.5em 0 0; font-size:2.2rem; font-weight:bold;}
#contents_ .content > .more {position:absolute; left:0; right:0; top:0; bottom:0; z-index:10; opacity:0;}
#contents_ .content:hover {opacity:0.8;}

#contents_ > header {}
#contents_ > header > h1 {display:none;}

#contents_ > header > .image {margin:0 calc(50% - 50vw); overflow:hidden;}
#contents_ > header > .image ul {}
#contents_ > header > .image ul > li > a {display:block; text-decoration:none;}
#contents_ > header > .image ul > li img {display:block; width:100%; height:auto;}
#contents_ > header > .image ul > li::after {
	display:block; position:absolute; left:0; bottom:0; padding:1em 1.3em; 
	color:#fff; font:700 4.8rem/1.2 Roboto,sans-serif; letter-spacing:0.05em; white-space:pre; pointer-events:none;}
#contents_ > header > .image ul > li.style::after  {content:"Lifestyle\A Inspiration";}
#contents_ > header > .image ul > li.design::after {content:"Design for\A Communication";}

#contents_ > header + .category {padding-top:70px;}
#contents_ > header + .category > .more {top:70px;}

#contents_ > #information-pickup {margin:0 calc(50% - 50vw); padding:15px calc(50vw - 50%); background:#f2f2f2;}

#contents_ > #message {
	min-height:50px; margin:0 calc(50% - 50vw); padding:15px calc(50vw - 50%); box-sizing:border-box; background:#ebebeb; font-size:1.2rem;}
#contents_ > #message > h1 {display:none;}
#contents_ > #message > p {margin:1em 0 0;}
#contents_ > #message > p:first-of-type {margin:0;}
	
#contents_ > #business {}
#contents_ > #business > h1 {}
#contents_ > #business > section {margin:50px 0 0; font-size:1.4rem;}
#contents_ > #business > section > h1 {font-size:2.2rem; font-weight:bold;}
/*5等分*/
/*#contents_ > #business > section > ul {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	margin:-30px 0 0 -30px; padding:30px 0 0;}*/
/*dp add 20251020 4or6等分*/
#contents_ > #business > section > ul {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	margin:-30px 0 0 -30px; padding:30px 0 0;}
/**/
/*#contents_ > #business > section > ul > li {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:calc(20% - 30px); flex-basis:calc(20% - 30px); 
	position:relative; margin:30px 0 0 30px;}*/
/*dp add 20251020　6等分*/
/*#contents_ > #business > section > ul > li {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:calc(195px - 30px); flex-basis:calc(195px - 30px); 
	position:relative; margin:30px 0 0 30px;}
/**/
/*dp add 20251020　4等分*/
/*#contents_ > #business > section > ul > li {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:calc(25% - 30px); flex-basis:calc(25% - 30px); 
	position:relative; margin:30px 0 0 30px;}*/
/**/
/*dp add 20251028　3等分*/
#contents_ > #business > section > ul > li {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:calc(33.33% - 30px); flex-basis:calc(33.33% - 30px); 
	position:relative; margin:30px 0 0 30px;}
/**/
#contents_ > #business > section > ul > li::after {display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; border:1px solid #e5e5e5; pointer-events:none;}
#contents_ > #business > section > ul > li .image {position:relative; z-index:1; background:#fff;}
#contents_ > #business > section > ul > li .image > img {display:block;}
#contents_ > #business > section.lifestyle {}
#contents_ > #business > section.lifestyle > h1 {}
#contents_ > #business > section.lifestyle > ul {}
/*#contents_ > #business > section.lifestyle > ul > li {-webkit-flex-basis:calc(20% - 30px); flex-basis:calc(20% - 30px);}*/
/*dp add 20251020 6等分*/
/*#contents_ > #business > section.lifestyle > ul > li {-webkit-flex-basis:calc(195px - 30px); flex-basis:calc(195px - 30px);}
/**/
/*dp add 20251020 4等分*/
/*#contents_ > #business > section.lifestyle > ul > li {-webkit-flex-basis:calc(25% - 30px); flex-basis:calc(25% - 30px);}*/
/**/
/*dp add 20251028 3等分*/
#contents_ > #business > section.lifestyle > ul > li {-webkit-flex-basis:calc(33.33% - 30px); flex-basis:calc(33.33% - 30px);}
/**/
#contents_ > #business > section.lifestyle > ul > li .image {}
#contents_ > #business > section.lifestyle > ul > li .image > img {transition:opacity 0.2s ease-in-out;}
/*#contents_ > #business > section.lifestyle > ul > li h2 {height:0; padding:39.2156% 0 0; background:center center no-repeat; overflow:hidden;}*/
/*dp add 20251028 3等分*/
#contents_ > #business > section.lifestyle > ul > li h2 {height:0; padding:25% 0 0; background:center center no-repeat; overflow:hidden;}
/*end*/
#contents_ > #business > section.lifestyle > ul > li .more {position:absolute; left:0; right:0; top:0; bottom:0; z-index:3; opacity:0;}
#contents_ > #business > section.lifestyle > ul > li:hover .image > img {opacity:0.8;}
#contents_ > #business > section.lifestyle > ul > li.midori            h2 {background-image:url(../common/images/logo_midori.svg);}
#contents_ > #business > section.lifestyle > ul > li.knox              h2 {background-image:url(../common/images/logo_knox.svg);}
#contents_ > #business > section.lifestyle > ul > li.travelers-company h2 {background-image:url(../common/images/logo_travelers-company.svg);}
#contents_ > #business > section.lifestyle > ul > li.plotter           h2 {background-image:url(../common/images/logo_plotter.svg);}
#contents_ > #business > section.lifestyle > ul > li.touch-and-flow    h2 {background-image:url(../common/images/logo_touch-and-flow.svg);}
/*dp add 20251020*/
#contents_ > #business > section.lifestyle > ul > li.md-product			h2 {background-image:url(../common/images/logo_md-product.svg);}
/**/
#contents_ > #business > section.commercial {}
#contents_ > #business > section.commercial > h1 {}
#contents_ > #business > section.commercial > ul {}
#contents_ > #business > section.commercial > ul > li, 
#contents_ > #business > section.commercial > ul > li > a {
	-webkit-flex-basis:calc(100% - 30px); flex-basis:calc(100% - 30px); 
	display:-webkit-flex; display:flex; 
	-webkit-flex-direction:column; flex-direction:column; 
	-webkit-justify-content:center; justify-content:center; 
	-webkit-align-items:center; align-items:center; 
	height:220px; padding:0 0 0 560px; text-align:center; overflow:hidden;}
#contents_ > #business > section.commercial > ul > li {background:#f3f2ed;}
#contents_ > #business > section.commercial > ul > li > a {width:100%; margin:0 0 0 -560px; padding:inherit; text-decoration:none;}
#contents_ > #business > section.commercial > ul > li .image {display:block; width:560px; position:absolute; left:0; top:0; bottom:0;}
#contents_ > #business > section.commercial > ul > li .image > * {transition:0.2s ease-in-out;}
#contents_ > #business > section.commercial > ul > li small {display:block; color:#7998ac; font-size:1.8rem; font-weight:bold;}
/*20201225 dp add*/
#contents_ > #business > section.commercial > ul > li h2 {font-size:2.4rem;font-weight:bold; line-height:1.5; margin-bottom:15px;}
#contents_ > #business > section.commercial > ul > li > a:hover {opacity:0.6;}
/*#contents_ > #business > section.commercial > ul > li h2 {font-size:2.4rem; font-weight:bold; line-height:inherit;}
#contents_ > #business > section.commercial > ul > li > a:hover > .image > img {opacity:0.8;}*/
	
#contents_ > #style {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	margin:0 0 0 -40px; font-size:1.4rem;}
#contents_ > #style > h1 {
	-webkit-flex:1 1 100%; flex:1 1 100%; 
	margin:0 0 0 40px;}
#contents_ > #style > section.manufacturing {-webkit-flex-basis:calc(100% - 40px); flex-basis:calc(100% - 40px);}
#contents_ > #style > section.manufacturing > .image ul {}
#contents_ > #style > section.manufacturing > .image ul > li > a {display:block; text-decoration:none;}
#contents_ > #style > section.manufacturing > .image ul > li img {display:block;}

#contents_ > #information {}
#contents_ > #information > h1 {}
#contents_ > #information > section {position:relative; border-top:1px solid #e5e5e5;}
#contents_ > #information > section:first-of-type {margin-top:50px;}
#contents_ > #information > section::after {display:block; content:''; clear:both; height:0;}
#contents_ > #information > section > h1 {float:left; width:280px; padding:30px 0 0; font-size:1.8rem; font-weight:bold; line-height:1.2;}
#contents_ > #information > section > ul {margin:0 0 0 300px;}
#contents_ > #information > section > ul > li:first-child::before {display:none;}
#contents_ > #information > section > .more {position:absolute; left:0; top:5.5em; font-size:1.2rem;}

#contents_ > #corporate-info {float:left; margin:110px 0 0;}

#contents_ > #recruit {float:right; margin:110px 0 0;}

@media screen and (max-width:1180px) {
#contents_ > header > .image {margin-left:-20px; margin-right:-20px;}
#contents_ > #information-pickup, 
#contents_ > #message {margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px;}
}

@media screen and (max-width:599px) {

#contents_ .more {font-size:1.2rem;}
#contents_ .more::after {}
#contents_ .more:hover {}

#contents_ > .category {
	display:-webkit-flex; display:flex; 
	-webkit-flex-direction:column; flex-direction:column; 
	padding:16vw 0 0;}
#contents_ > .category > h1 {font-size:1.8rem; text-align:center;}
#contents_ > .category > .more {
	-webkit-align-self:center; align-self:center; 
	margin:1.5em auto 0; position:static;}

#contents_ .content {
	-webkit-flex:0 1; flex:0 1; -webkit-flex-basis:100%; flex-basis:100%;
	margin:6vw 0 0; font-size:1.2rem; overflow:visible;}
#contents_ .content > .image {}
#contents_ .content > .image > img {width:100%; height:auto;}
#contents_ .content > h1 {font-size:1.4rem;}
#contents_ .content > .more {}
#contents_ .content:hover {}

#contents_ > header {}
#contents_ > header > h1 {}

#contents_ > header > .image {margin:0 -8vw;}
#contents_ > header > .image ul {}
#contents_ > header > .image ul > li > a {}
#contents_ > header > .image ul > li img {}
#contents_ > header > .image ul > li::after {padding:0.6em 0.8em; font-size:2.4rem;}
#contents_ > header > .image ul > li.style::after  {}
#contents_ > header > .image ul > li.design::after {}

#contents_ > header + .category {padding-top:17vw;}
#contents_ > header + .category > .more {top:17vw;}

#contents_ > #information-pickup {margin:0 -8vw; padding:0;}

#contents_ > #message {min-height:0; margin:0 -8vw; padding:1em 8vw; font-size:1rem;}
#contents_ > #message > h1 {display:none;}
#contents_ > #message > p {}
#contents_ > #message > p:first-of-type {}
	
#contents_ > #business {}
#contents_ > #business > h1 {}
#contents_ > #business > section {margin:9vw 0 0; font-size:1.2rem;}
#contents_ > #business > section > h1 {font-size:1.4rem;}
#contents_ > #business > section > ul {margin:-4.6875vw 0 0 -3.125vw; padding:6vw 0 0;}
#contents_ > #business > section > ul > li {
	-webkit-flex-basis:calc(50% - 3.125vw); flex-basis:calc(50% - 3.125vw); 
	margin:4.6875vw 0 0 3.125vw;}
#contents_ > #business > section > ul > li::after {}
#contents_ > #business > section > ul > li .image {}
#contents_ > #business > section > ul > li .image > img {width:100%; height:auto;}
#contents_ > #business > section.lifestyle {}
#contents_ > #business > section.lifestyle > h1 {}
#contents_ > #business > section.lifestyle > ul {}
#contents_ > #business > section.lifestyle > ul > li {-webkit-flex-basis:calc(50% - 3.125vw); flex-basis:calc(50% - 3.125vw);}
#contents_ > #business > section.lifestyle > ul > li .image {}
#contents_ > #business > section.lifestyle > ul > li .image > img {}
/*#contents_ > #business > section.lifestyle > ul > li h2 {background-size:contain;}*/
/*20251028 dp add*/
#contents_ > #business > section.lifestyle > ul > li h2 {background-size:contain;height:0; padding:39.2156% 0 0; background:center center no-repeat; overflow:hidden;}
/*end*/
#contents_ > #business > section.lifestyle > ul > li .more {}
#contents_ > #business > section.lifestyle > ul > li:hover .image > img {}
#contents_ > #business > section.lifestyle > ul > li.midori            h2 {}
#contents_ > #business > section.lifestyle > ul > li.knox              h2 {}
#contents_ > #business > section.lifestyle > ul > li.travelers-company h2 {}
#contents_ > #business > section.lifestyle > ul > li.plotter           h2 {}
#contents_ > #business > section.lifestyle > ul > li.touch-and-flow    h2 {}
#contents_ > #business > section.lifestyle > ul > li.md-product		   h2 {}
#contents_ > #business > section.commercial {}
#contents_ > #business > section.commercial > h1 {}
#contents_ > #business > section.commercial > ul {display:block;}
#contents_ > #business > section.commercial > ul > li, 
#contents_ > #business > section.commercial > ul > li > a {height:auto; padding:0;}
#contents_ > #business > section.commercial > ul > li {}
#contents_ > #business > section.commercial > ul > li > a {margin:0; padding:4.6875vw; text-decoration:none;}
#contents_ > #business > section.commercial > ul > li .image {width:auto; position:static; margin:-4.6875vw -4.6875vw 4.6875vw;}
#contents_ > #business > section.commercial > ul > li .image > * {width:100%; height:auto;}
#contents_ > #business > section.commercial > ul > li small {font-size:1.2rem;}
#contents_ > #business > section.commercial > ul > li h2 {font-size:1.3rem;}
#contents_ > #business > section.commercial > ul > li > a:hover > .image > img {}
	
#contents_ > #style {display:block; margin:0; font-size:inherit;}
#contents_ > #style > h1 {margin:0;}
#contents_ > #style > section.manufacturing {}
#contents_ > #style > section.manufacturing > .image {margin:0 -8vw;}
#contents_ > #style > section.manufacturing > .image ul {}
#contents_ > #style > section.manufacturing > .image ul > li > a {}
#contents_ > #style > section.manufacturing > .image ul > li img {width:100%; height:auto;}
#contents_ > #style > section.manufacturing > h1 {margin-top:1em;}

#contents_ > #information {}
#contents_ > #information > h1 {}
#contents_ > #information > section {margin:6vw 0 0; padding:6vw 0 0;}
#contents_ > #information > section:first-of-type {margin-top:8vw;}
#contents_ > #information > section::after {}
#contents_ > #information > section > h1 {float:none; width:auto; padding:0; font-size:inherit;}
#contents_ > #information > section > ul {margin:0;}
#contents_ > #information > section > ul > li, 
#contents_ > #information > section > ul > li > a {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap;} 
#contents_ > #information > section > ul > li {padding:6vw 0 0;}
#contents_ > #information > section > ul > li::before {display:none;}
#contents_ > #information > section > ul > li time {}
#contents_ > #information > section > ul > li .c-terms {
	-webkit-flex:1 1 50%; flex:1 1 50%; 
	margin-left:0; padding:0 0 0 0.5em;}
#contents_ > #information > section > ul > li h2 {
	-webkit-flex-basis:100%; flex-basis:100%; 
	font-weight:normal;}
#contents_ > #information > section > ul > li:first-child::before {}
#contents_ > #information > section > .more {left:auto; right:0; top:6vw; font-size:1rem;}

#contents_ > #corporate-info {float:none; margin:16vw 0 0;}

#contents_ > #recruit {float:none; margin:16vw 0 0;}


}