@charset "UTF-8";
/* CSS Document */

.ttl01 {
	padding: 10px;
	background-color: #6485c1;
	color: #FFFFFF;
}
#companyContent {
	font-family: 'Noto Sans JP', 'LocalNotoSansJP', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: justify;
	-webkit-overflow-scrolling: touch;
}

#our-way {
	max-width :1000px;
	margin: 0 auto;
}
#our-way p {
	font-size: 1.6rem;
}
#our-way img {
	vertical-align: middle;
}
#our-way .min {
	font-family: "Shippori Mincho", serif;
}
#our-way #sec1 p {
	font-size: 1.8rem;
}
#our-way #sec1 p.mb25{
  margin-bottom: 70px !important;
}

#our-way #sec1 figure {
	/*background-color: rgba(235, 236, 240, 0.4);
	padding: min(calc(40vw / 12.80), 40px) min(calc(25vw / 12.80), 25px) min(calc(35vw / 12.80), 35px) 0;*/
}
#our-way #sec2 h3 {
	font-family: "Shippori Mincho", serif;
	font-size: 3.0rem;
	margin-bottom: 20px;
}
#our-way #sec2 h3 span {
	display: block;
	color: #0072BC;
	font-weight: 500;
	font-size: 3.6rem;
	position: relative;
	line-height: 1.2;
}
#our-way #sec2 h3 span::after {
	content: "";
	display: block;
	position: relative;
	margin: 25px auto 35px;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: #0072BC;
}
#our-way #sec2 p {
	line-height: 1.7;
	font-size: 1.8rem;
}
#our-way #sec2 p.sbttl {
	font-size: 1.8rem;
	font-weight: bold;
}
#our-way #sec2 .bg {
	background-color: rgba(235, 236, 240, 0.3);
	padding: 20px;
}
#our-way #sec2-2 h3{
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
	text-align: center;
}
#our-way #sec2-3 .row {
	display: flex;
	gap: 10px;
}
#our-way #sec2-3 .row figure.col2 {
	max-width: min(calc(400vw / 12.80), 400px);
	width: 100%;
}
#our-way #sec2-3 .row figure.col2 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#our-way #sec2-3 .row div.col2 {
	display: flex;
}
#our-way #sec2-3 .col2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
}
#our-way #sec2-3 .col2 li {
	background-color: rgba(235, 236, 240, 0.3);

	padding: calc(15vw / 12.80) 10px calc(12vw / 12.80) 20px;
}
#our-way #sec2-3 .col2 li:not(:last-child) {
	margin-bottom: 5px;
}
#our-way #sec2-3 .col2 li em {
	display: block;
	font-style: normal;
	border-left: 5px solid #0072BC;
	padding-left: 10px;
	font-size: 1.6rem;
	line-height: 1.4;
	letter-spacing: -0.025em;
}
#our-way #sec2-3 .visionList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
#our-way #sec2-3 .visionItem{
  background: transparent;
  padding: 0;
  margin: 0;
}
#our-way #sec2-3 .visionLead{
  margin: 10px 0 7px;
  background: transparent;
  color: #0072BC;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.1;
  padding: 0;
  border-radius: 0;
  display: block;
  letter-spacing: -0.01em;
  text-align: left;
  text-align-last: left;
  text-justify: auto;
}
#our-way #sec2-3 .visionBody{
  margin: 0;
  background: #fff;
  border: 2px solid rgba(0, 114, 188, 0.45);
  padding: 12px 16px;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  border-radius: 0;
  text-align: left;
  text-align-last: left;
  text-justify: auto;
}
#our-way #sec2-3 .col2 li{
  background-color: transparent;
  padding: 0;
}
#our-way .valuesWrap {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
#our-way .valuesBox {
	background-color: rgba(235, 236, 240, 0.3);
	width: calc((100% / 3) - 10px);
	padding: min(calc(45vw / 12.80), 45px) min(calc(23vw / 12.80), 23px) min(calc(20vw / 12.80), 20px);

}
#our-way .valuesBox dt {
	font-size: 2.4rem;
	font-weight: bold;
	color: #0072BC;
	margin-bottom: 15px;
}
#our-way .valuesBox dd {
	text-align: justify;
	letter-spacing: -0.025em;
	line-height: 1.7;
}
#our-way #sec2-5 .valuesBox div.icon {
	margin-bottom: 23px;
}
#our-way #sec2-5 .valuesBox:nth-of-type(1) img {
	height: 61px;
}
#our-way #sec2-5 .valuesBox:nth-of-type(2) img {
	height: 65px;
}
#our-way #sec2-5 .valuesBox:nth-of-type(3) img {
	height: 64px;
}
#our-way .u-overflow-x-scroll img {
	max-width: inherit;
	overflow: scroll;
}
#our-way #sec2-6 .withWrap {
	background:  #DCE7F8 url(/img/company/business/ourway-with-bg@2x.png) no-repeat center bottom / cover;
	padding: min(calc(20vw / 12.80), 20px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#our-way #sec2-6 .withBox {
	background-color: rgba(0, 114, 188, 0.7);
	padding: 10px 10px 15px;
	width: calc((100% / 2) - 5px);
}
#our-way #sec2-6 .withBox::before {
	content: "WITH";
	display: inline-block;
	background-color: #FFFFFF;
	border-radius: 3px;
	padding: 5px 10px;
	line-height: 1;
	font-family: "Shippori Mincho", serif;
	color: #0072BC;
	font-size: 3.0rem;
	font-weight: 600;
	margin-bottom: 15px;
}
#our-way #sec2-6 .withBox dl {
	color: #FFFFFF;
	text-align: center;
}
#our-way #sec2-6 .withBox dt {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.2;
}
#our-way #sec2-6 .withBox dd {
	font-size: 1.8rem;
	font-weight: 500;
}
#our-way .animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.2s ease-out, transform 0.7s ease-out;
}
#our-way .animate.visible {
	opacity: 1;
	transform: translateY(0);
}


@media screen and (max-width: 1000px) {
#our-way {padding: 10px;}
#our-way .valuesBox {width: 100%;}
#our-way #sec2-3 .row {flex-wrap: wrap;}
#our-way #sec2-3 .row figure.col2 {max-width: 100%;}
#our-way #sec2-3 .col2 li {padding: 20px;}
#our-way #sec2-6 .withWrap {padding: calc(20vw / 10.00);}
#our-way #sec2-6 .withBox {width: 100%;}
}

@media screen and (max-width: 767px) {
#our-way .valuesBox {	width: calc((100% / 3) - 10px);}
#our-way #sec2-6 .withWrap {padding: calc(20vw / 7.67);}
#our-way #sec2-6 .withBox {width: calc((100% / 2) - 5px);}
}

@media screen and (max-width: 640px) {
#our-way #sec2 .bg {padding: min(calc(20vw / 6.40), 20px);}
#our-way .valuesBox {width: 100%;	padding: 15px;}
#our-way #sec2-6 .withBox {width: 100%;}
#our-way #sec2-2 h3{font-size: 1.6rem;}
}


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

}


@media (min-width: 1281px) {
#our-way img {width: 100%;}
}