@charset "UTF-8";
:root {
  --brands-green: #3f865a;
  --brands-margin--large: 100px;
  --brands-margin--std: 60px;
}

@media screen and (max-width:768px) {
  :root {
    --brands-green: #3f865a;
    --brands-margin--large: 50px;
    --brands-margin--std: 60px;
  }
}
.brands {
  font-family: "A1 Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.6;
}
.brands * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  -webkit-print-color-adjust: exact;
}
.brands a {
  text-decoration: none;
}
@media screen and (min-width:769px) {
  .brands a {
    -webkit-transition: 700ms ease-in-out;
    transition: 700ms ease-in-out;
  }
}
@media screen and (min-width:769px) {
  .brands a:hover {
    opacity: 0.5;
  }
}
.brands a,
.brands abbr,
.brands acronym,
.brands address,
.brands applet,
.brands article,
.brands aside,
.brands audio,
.brands b,
.brands big,
.brands blockquote,
.brands canvas,
.brands caption,
.brands center,
.brands cite,
.brands code,
.brands dd,
.brands del,
.brands details,
.brands dfn,
.brands div,
.brands dl,
.brands dt,
.brands em,
.brands embed,
.brands fieldset,
.brands figcaption,
.brands figure,
.brands footer,
.brands form,
.brands h1,
.brands h2,
.brands h3,
.brands h4,
.brands h5,
.brands h6,
.brands header,
.brands hgroup,
.brands i,
.brands iframe,
.brands img,
.brands ins,
.brands kbd,
.brands label,
.brands legend,
.brands li,
.brands mark,
.brands menu,
.brands nav,
.brands object,
.brands ol,
.brands output,
.brands p,
.brands pre,
.brands q,
.brands ruby,
.brands s,
.brands samp,
.brands section,
.brands small,
.brands span,
.brands strike,
.brands strong,
.brands sub,
.brands summary,
.brands sup,
.brands table,
.brands tbody,
.brands td,
.brands tfoot,
.brands th,
.brands thead,
.brands time,
.brands tr,
.brands tt,
.brands u,
.brands ul,
.brands var,
.brands video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
.brands picture {
  display: block;
}
.brands img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border: none;
  -ms-interpolation-mode: bicubic;
  vertical-align: bottom;
}
.brands .brands-pc {
  display: block !important;
}
.brands .brands-sp {
  display: none !important;
}
@media screen and (max-width:768px) {
  .brands .brands-pc {
    display: none !important;
  }
  .brands .brands-sp {
    display: block !important;
  }
}
.brands .brands-inner {
  max-width: 1080px;
  margin: 0 auto;
}
@media screen and (min-width:769px) {
  .brands .brands-inner {
    padding: 0 38px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-inner {
    padding: 0 38px;
  }
}
.brands .brands-inner__wide {
  max-width: 1080px;
  margin: 0 auto;
}
.brands .brands-bg__gray {
  background-color: #f6f6f6;
}
.brands .brands-mainvisual {
  width: 100%;
  padding-bottom: var(--brands-margin--std);
}
.brands .brands-message {
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: var(--brands-margin--large);
}
.brands .brands-message_title {
  padding-bottom: var(--brands-margin--std);
}
@media screen and (min-width:769px) {
  .brands .brands-message_title {
    font-size: 28px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-message_title {
    font-size: 16px;
    letter-spacing: normal;
  }
}
.brands .brands-message_text {
  padding-bottom: var(--brands-margin--std);
  font-family: "A1 Gothic R", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", YuGothic, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  line-height: 2;
}
@media screen and (min-width:769px) {
  .brands .brands-message_text {
    font-size: 14px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-message_text {
    font-size: 12px;
    letter-spacing: -0.02em;
  }
}
.brands .brands-message_text p {
  padding-bottom: 2em;
}
.brands .brands-message_text p:last-child {
  padding-bottom: 0;
}
.brands .brands-message_text em {
  color: var(--brands-green);
}
@media screen and (min-width:769px) {
  .brands .brands-message_logo {
    max-width: 213px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-message_logo {
    max-width: 150px;
  }
}
.brands .brands-4values {
  padding: var(--brands-margin--large) 0;
}
.brands .brands-4values_title {
  margin: 0 auto;
  padding-bottom: var(--brands-margin--std);
}
@media screen and (min-width:769px) {
  .brands .brands-4values_title {
    max-width: 195px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_title {
    max-width: 130px;
  }
}
.brands .brands-4values_lead {
  padding-bottom: 40px;
  font-family: "A1 Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.15em;
}
@media screen and (min-width:769px) {
  .brands .brands-4values_lead {
    font-size: 18px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_lead {
    font-size: 12px;
  }
}
.brands .brands-4values_text {
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.15em;
}
@media screen and (min-width:769px) {
  .brands .brands-4values_text {
    padding-bottom: 40px;
    font-size: 18px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_text {
    padding-bottom: 20px;
    font-size: 14px;
  }
}
.brands .brands-4values_unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width:768px) {
  .brands .brands-4values_unit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0 -38px;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item {
    width: 50%;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item .brands-4values_item__image,
  .brands .brands-4values_item .brands-4values_item__content {
    width: 50%;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item:nth-child(4) .brands-4values_item__content div:nth-child(1) {
    letter-spacing: -0.03em;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item:nth-child(4) .brands-4values_item__content div:nth-child(1) {
    letter-spacing: -0.01em;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item__image {
    padding-bottom: 20px;
  }
}
.brands .brands-4values_item__content {
  color: var(--brands-green);
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item__content {
    text-align: center;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 20px;
    gap: 10px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item__content div:nth-child(1) {
    padding-bottom: 12px;
    font-size: 16px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item__content div:nth-child(1) {
    width: 100%;
    font-size: 11px;
  }
}
.brands .brands-4values_item__content div:nth-child(2) {
  letter-spacing: 0.05em;
}
@media screen and (min-width:769px) {
  .brands .brands-4values_item__content div:nth-child(2) {
    padding-bottom: 30px;
    font-size: 18px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-4values_item__content div:nth-child(2) {
    width: 100%;
    font-size: 9px;
  }
}
.brands .brands-button {
  text-align: center;
}
.brands .brands-button a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 10px 20px;
  background-color: var(--brands-green);
  color: #ffffff;
  font-family: "A1 Gothic R", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", YuGothic, "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", arial, helvetica, sans-serif;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width:768px) {
  .brands .brands-button a {
    width: 100%;
    font-size: 12px;
  }
}
.brands .brands-button a:hover {
  opacity: 0.5;
}
.brands .brands-button_icon {
  display: block;
  width: 20px;
  height: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20247.46%20181.9%22%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M247.46%2C138.19H43.71V0h203.75v138.19ZM60.71%2C121.19h169.75V17H60.71v104.19Z%22%2F%3E%3Cpolygon%20points%3D%22149.38%20181.9%200%20181.9%200%2079%2029.24%2079%2029.24%2096%2017%2096%2017%20164.9%20132.38%20164.9%20132.38%20151.41%20149.38%20151.41%20149.38%20181.9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.brands .brands-lifedesign {
  padding-bottom: var(--brands-margin--large);
}
.brands .brands-lifedesign_title {
  padding-bottom: var(--brands-margin--std);
  color: var(--brands-green);
}
@media screen and (min-width:769px) {
  .brands .brands-lifedesign_title {
    font-size: 40px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-lifedesign_title {
    font-size: 23px;
  }
}
.brands .brands-lifedesign_lead {
  padding-bottom: var(--brands-margin--std);
  color: var(--brands-green);
  line-height: 1.8;
}
@media screen and (min-width:769px) {
  .brands .brands-lifedesign_lead {
    font-size: 18px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-lifedesign_lead {
    font-size: 14px;
  }
}
.brands .brands-lifedesign_logo {
  padding-bottom: var(--brands-margin--std);
}
@media screen and (max-width:768px) {
  .brands .brands-lifedesign_logo {
    text-align: center;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-lifedesign_logo img {
    max-width: 358px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-lifedesign_logo img {
    max-width: 180px;
  }
}
.brands .brands-lifedesign_unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (min-width:769px) {
  .brands .brands-lifedesign_unit {
    gap: 40px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-lifedesign_unit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 50px;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-lifedesign_item {
    width: calc(50% - 20px);
    padding-bottom: calc(var(--brands-margin--std) - 40);
  }
}
.brands .brands-lifedesign_item__image {
  padding-bottom: 20px;
}
.brands .brands-lifedesign_item__content {
  color: var(--brands-green);
}
.brands .brands-lifedesign_item__content div:nth-child(1) {
  padding-bottom: 20px;
  font-size: 16px;
}
.brands .brands-lifedesign_item__content div:nth-child(2) {
  font-size: 14px;
  letter-spacing: 0.05em;
}
.brands .brands-consept_mainvisual {
  padding-bottom: var(--brands-margin--large);
}
.brands .brands-consept_logo {
  margin: auto;
  padding-bottom: var(--brands-margin--large);
}
@media screen and (min-width:769px) {
  .brands .brands-consept_logo {
    max-width: 378px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-consept_logo {
    max-width: 236px;
  }
}
.brands .brands-consept_lead {
  padding-bottom: var(--brands-margin--std);
  color: var(--brands-green);
  line-height: 1.8;
}
@media screen and (min-width:769px) {
  .brands .brands-consept_lead {
    font-size: 18px;
    letter-spacing: 0.15em;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-consept_lead {
    font-size: 14px;
  }
}
.brands .brands-consept_lead p {
  padding-bottom: 1.5em;
}
.brands .brands-consept_lead p:last-child {
  padding-bottom: 0;
}
.brands .brands-consept_image {
  padding-bottom: var(--brands-margin--std);
}
.brands .brands-consept_logos {
  padding-bottom: var(--brands-margin--std);
}
.brands .brands-result_title {
  border-bottom: 1px solid #cccccc;
  text-align: center;
  line-height: 1;
}
@media screen and (min-width:769px) {
  .brands .brands-result_title {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 28px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-result_title {
    margin-right: 38px;
    margin-bottom: 20px;
    margin-left: 38px;
    padding-bottom: 10px;
    font-size: 18px;
  }
}
.brands .brands-result_visual {
  padding-bottom: var(--brands-margin--large);
}
.brands .brands-result_title__sub {
  margin-bottom: 30px;
  text-align: center;
}
.brands .brands-result_title__sub span {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding: 0 0.25em;
  color: var(--brands-green);
}
@media screen and (min-width:769px) {
  .brands .brands-result_title__sub span {
    padding: 0 20px;
    font-size: 24px;
    letter-spacing: 0.08em;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-result_title__sub span {
    padding: 0 10px;
    font-size: 17px;
    letter-spacing: -0.05em;
  }
}
.brands .brands-result_title__sub span:after {
  display: block;
  position: absolute;
  z-index: -1;
  bottom: -0.25em;
  left: 0;
  width: 100%;
  background-color: #f6f6f6;
  content: "";
}
@media screen and (max-width:768px) {
  .brands .brands-result_title__sub span:after {
    height: 20px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-result_title__sub span:after {
    height: 15px;
  }
}
.brands .brands-result_count {
  padding-top: 40px;
  padding-bottom: var(--brands-margin--std);
  color: var(--brands-green);
  font-size: 30px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
}
.brands .brands-result_count span {
  display: inline-block;
  padding-right: 0.2em;
  font-family: "Inter", system-ui;
  font-weight: 700;
}
@media screen and (min-width:769px) {
  .brands .brands-result_count span {
    font-size: 80px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-result_count span {
    font-size: 56px;
  }
}
.brands .brands-result_figure {
  padding-top: 40px;
  padding-bottom: var(--brands-margin--large);
}
.brands .brands-other_banner {
  padding-bottom: 20px;
}
.brands .brands-about {
  padding-bottom: var(--brands-margin--std);
  text-align: center;
}
@media screen and (min-width:769px) {
  .brands .brands-about {
    padding-top: 40px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-about {
    padding-top: 0px;
  }
}
.brands .brands-about_title {
  padding-bottom: 30px;
}
@media screen and (min-width:769px) {
  .brands .brands-about_title {
    font-size: 24px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-about_title {
    font-size: 14px;
  }
}
@media screen and (min-width:769px) {
  .brands .brands-about_text {
    font-size: 16px;
  }
}
@media screen and (max-width:768px) {
  .brands .brands-about_text {
    font-size: 13px;
  }
}



#page_mainvisual {
	width: 100%;
	height: 550px;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#page_mainvisual h2 {
	position: absolute;
	bottom: 160px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 50px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 1px;
}
#page_mainvisual h2 small {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
	display: block;
	font-size: 20px;
}
#page_mainvisual:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}
#page_mainvisual .cap {
	/*background: rgba(120, 120, 120, 0.7);*/
	font-size: 11px;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 5px;
	z-index: 2;
}

@media screen and (max-width: 550px) {
#page_mainvisual {
	height: 332px;
}
#page_mainvisual h2 {
	bottom: 120px;
	font-size: 40px;
}
#page_mainvisual h2 small {
	font-size: 16px;
}
}


.nipponsteel_logo{
width: 55%;
max-width: 350px;
margin: 4% auto 2%;
}

.toray_logo{
width: 75%;
max-width: 480px;
margin: 4% auto 2%;
}





#page_mainvisual {
	width: 100%;
	height: 530px;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#page_mainvisual h2 {
	position: absolute;
	bottom: 160px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 55px;
	line-height: 1;
	font-weight: 200;
	letter-spacing: 1px;
}
@media screen and (max-width: 550px) {
#page_mainvisual h2 {
font-size: 40px;
}
}
#page_mainvisual h2 small {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
	display: block;
	font-size: 20px;
}
#page_mainvisual:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}
#page_mainvisual .cap {
	background: rgba(120, 120, 120, 0.7);
	font-size: 11px;
	color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 5px;
	z-index: 2;
}

@media screen and (max-width: 550px) {
#page_mainvisual {
	height: 280px;
}
#page_mainvisual h2 {
	bottom: 90px;
}
#page_mainvisual h2 small {
	font-size: 14px;
}
}