@charset "utf-8";

/*philosophy*/
.p-philosophy .g-container {
	padding-top: 30px;
}

.triangle_guide {
	width: 230px;
	aspect-ratio: 144 / 125;
	float: left;
	margin: 100px 0 0 calc(50% - (var(--max_w) / 2) + 20px) !important;
	background: var(--gray_lightest);
	position: sticky;
	top: 50%;
	translate: 0 -50%;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	z-index: 10;
}

.triangle_guide .items {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.triangle_guide .item:not(:first-of-type) {
	height: 22.5%;
	border-top: 2px solid var(--white);
}

.triangle_guide .item a {
	color: var(--gray);
	font-size: 15rem;
	font-weight: 500;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.no-touch .triangle_guide .item a:not(.active):hover {
	color: var(--red);
	background-color: var(--white);
}

.triangle_guide .item a.active {
	color: var(--white);
	background: var(--red);
}

.triangle_guide .item:first-child {
	height: calc(100% - 22.5% - 22.5%);
}

.triangle_guide .item:first-child a {
	padding-bottom: 7.5%;
	justify-content: flex-end;
}

.p-philosophy .bg_full_image {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: 0;
	scale: 1.2;
	animation: a-bg_full_image 3s 0s ease both;
}

@keyframes a-bg_full_image {
	0% {
		opacity: 0;
		scale: 1.2;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}

.p-philosophy .bg_full_image .image {
	height: 100%;
	object-fit: cover;
}

.p-philosophy .g-main-body {
	position: relative;
	z-index: 10;
}

.p-philosophy .g-breadcrumb {
	margin-top: -25px;
	z-index: 10;
}

.p-philosophy .u-kv {
	background-color: transparent;
	overflow: inherit;
}

.p-philosophy .u-kv:after {
	opacity: .5;
}

.l-philosophy_section {
	margin-top: 0px !important;
	padding-top: 100px;
}

.l-philosophy_section .u-inner {
	padding-left: 384px;
}

.l-philosophy_title {
	color: var(--red);
	font-size: 28rem;
	font-weight: 700;
}

.l-philosophy_title:before {
	content: attr(data-en);
	font-family: var(--font_mont);
	font-size: 17rem;
	font-weight: 500;
	margin: 0 0 1em 0;
	display: block;
}

.l-philosophy_title + .u-text {
	font-size: 20rem;
	line-height: 2;
	margin-top: 2em;
}

.l-philosophy_section .lists {
	margin: 3.5% 0 0;
	display: flex;
	flex-wrap: wrap;
}

.l-philosophy_section .lists .title {
	color: var(--red);
	font-size: 20rem;
	font-weight: 400;
	width: 20%;
	padding: 1.5em 0;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--gray_light);
}

.l-philosophy_section .lists .title:first-of-type {
	border-top: 0;
}

.l-philosophy_section .lists .title:before {
	content: attr(data-num);
	font-family: var(--font_mont);
	font-size: 24rem;
	font-weight: 500;
	margin: 0 .15em -.1em 0;
	display: inline-block;
}

.l-philosophy_section .lists .title + .u-text {
	font-size: 16rem;
	width: calc(100% - 20%);
	margin-top: 0;
	padding: 1.5em 0;
	border-top: 1px solid var(--gray_light);
}

.l-philosophy_section .lists .title + .u-text:first-of-type {
	border-top: 0;
}

.p-philosophy .float_wrap {
	margin: 0;
	padding-bottom: calc(100vh / 3.5);
	position: relative;
	opacity: 0;
	transition: opacity 1s;
}

.p-philosophy.active_detail .float_wrap {
	opacity: 1;
}

.l-philosophy_section.cored {
	padding-top: 0;
}

.l-philosophy_section.cored .u-inner {
	position: relative;
}

.l-philosophy_section.cored .u-inner .l-philosophy_title {
	margin: 10px 0 0 calc(40px + 100px);
	position: absolute;
	top: 0;
	left: 0;
}














/*overview*/
.p-overview .u-map_panel {
	aspect-ratio: 4 / 2;
}

/*history*/
.l-history_table .u-flex > * {
	width: calc(100% - 40%);
	margin: 0;
	padding: 0 1em 0 0;
}

.l-history_table .history_image {
	width: 40%;
	padding-right: 0;
}

.l-history_table .history_image img {
	margin: 0 0 -.5em;
}

.l-history_table .u-table_corner th {
	padding-inline: 0;
}

.l-corp_name .logo {
	display: flex;
}

.l-corp_name .logo + * {
	margin: 30px 0 0;
}

.l-corp_name .logo .image {
	width: 180px;
	padding-left: 30px;
}

.l-corp_name .logo .title {
	font-weight: 500;
}

/*index*/
.p-business .business_prologue {
	display: flex;
	align-items: center;
}

.p-business .business_prologue .u-lead {
	width: 64%;
	padding-right: 30px;
}

.p-business .business_prologue .image {
	width: calc(100% - 64%);
}

.p-business .l-features {
	margin-top: 50px;
}

.p-business .l-features > * {
	padding: 30px 30px 50px;
	border: 1px solid var(--red);
	border-radius: var(--border_r);
}

.p-business .l-features .title {
	color: var(--red);
}

.p-business .l-features .title span {
	font-weight: 700;
	padding: 0 0 6px;
	display: inline-block;
	border-bottom: 1px solid var(--red);
}

.p-business .l-features .title span b {
	font-family: var(--font_mont);
	font-size: 30rem;
	font-weight: 500;
	vertical-align: -.05em;
	margin: 0 0 0 .1em;
	display: inline-block;
}

.p-business .l-features .title em {
	font-size: 24rem;
	font-weight: 700;
	margin: 15px 0 0;
	display: block;
}

.p-business .l-features .image {
	margin: 20px 0 0;
}

.l-bizindex_card {
	min-height: 250px;
	display: flex;
	background-color: var(--gray_lightest);
	border-radius: var(--border_r);
	overflow: hidden;
	transform: translateZ(0);
}

.l-bizindex_card > div {
	width: calc(100% - 31.425%);
	padding: 40px;
}

.l-bizindex_card > figure {
	width: 31.425%;
}

.l-bizindex_card > figure img {
	height: 100%;
	object-fit: cover;
}

.l-bizindex_card.-none_thumb {
	min-height: 0;
	display: block;
}

.l-bizindex_card.-none_thumb > div {
	width: 100%;
}

.l-bizindex_card .title {
	color: var(--black);
	font-size: 24rem;
	font-weight: 500;
	line-height: 1.6;
	padding: 0 0 .5em;
	border-bottom: 1px solid var(--red);
}

.l-bizindex_card .u-text {
	color: var(--black);
}

.l-bizindex_card .u-flex > * {
	margin: 0 16px 0 0;
}

/*multimodal-transport*/
.p-multimodal-transport .case_items .item {
	margin: 70px 0 0;
	display: flex;
	flex-direction: row-reverse;
}

.p-multimodal-transport .case_items .image {
	width: 34.285%;
	padding-right: 15px;
}

.p-multimodal-transport .case_items .data {
	color: var(--black);
	width: calc(100% - 34.285%);
	padding: 40px;
	background: var(--gray_lightest);
	border-radius: var(--border_r);
	position: relative;
}

.p-multimodal-transport .case_items .case_number {
	color: var(--red);
	font-family: var(--font_mont);
	font-size: 24rem;
	font-weight: 700;
	margin: 0 0 0 40px;
	position: absolute;
	top: 0;
	left: 0;
	translate: 0 calc(-50% - .125em);
}

.p-multimodal-transport .case_items .case_number:after {
	content: attr(data-num);
	font-size: 40rem;
	font-weight: 500;
	margin: 0 0 0 .1em;
	display: inline-block;
}

.p-multimodal-transport .case_items .u-title_mid {
	margin-top: 0;
}

.p-multimodal-transport .case_items .data > div {
	margin-inline: -12px;
	display: flex;
	position: relative;
}

.p-multimodal-transport .case_items .data > div > div {
	width: calc(100% / 2);
	padding: 0 12px;
}

.p-multimodal-transport .case_items .data > div.long > div {
	width: 100%;
}

.p-multimodal-transport .case_items .before:after {
	content: '';
	width: 180px;
	height: 40px;
	background: var(--gray_light);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% calc(100% + 10px);
}

.p-multimodal-transport .case_items .before .title {
	color: var(--blue_dark);
	font-weight: 600;
	padding: 0 0 .5em;
	border-bottom: 1px solid var(--blue_dark);
}

.p-multimodal-transport .case_items .before .title + * {
	margin-top: 10px;
}

.p-multimodal-transport .case_items .after {
	margin-top: 60px;
}

.p-multimodal-transport .case_items .after .title {
	color: var(--white);
	font-weight: 600;
	padding: 8px 0 10px 10px;
	background: var(--red);
}

.p-multimodal-transport .case_items .after .title + * {
	margin-top: 10px;
}



/* ---------------------------------------
	route
--------------------------------------- */
.route_wrap input,
.route_wrap02 input {
	appearance: auto;
}

.route_wrap,
.route_wrap02 {
	display: table;
	table-layout: fixed;
	width: calc(100% + (15px * 2));
	margin-bottom: 25px;
	margin-inline: -15px;
	background-color: #fff;
}

.route_wrap img,
.route_wrap02 img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.route_wrap02 {
	width: 100%;
	max-width: 780px;
	margin: 30px 0 0 0;
	background-color: #f3f3f3;
	border-radius: 8px;
}

.route_body01,
.route_body02,
.route_body03,
.route_body04,
.route_body05 {
	display: table-cell;
	vertical-align: top;
}

.route_body01 {
	width: 39%;
	padding-top: 35px;
	padding-inline: 15px;
}

.route_body02,
.route_body04 {
	width: 26%;
	padding-top: 35px;
	padding-inline: 15px;
}

.route_body03 {
	width: 30%;
	padding: 68px 15px 25px 15px;
}

.route_body04 {
	width: 417px;
	padding: 25px 0 25px 25px;
}

.route_body05 {
	padding: 59px 25px 25px 25px;
	text-align: center;
}

.route_title01 {
	margin-bottom: 15px;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
}

.route_small {
	font-size: 14px;
	font-weight: normal;
}

.route_grid {
	display: flex;
	flex-wrap: wrap;
}

.route_grid.var01 {
	position: relative;
	margin-bottom: 5px;
	padding-bottom: 45px;
	background: url(/_assets/images/corporate/business/marine/route/ico_arrow.png) no-repeat 50% 100%;
}

.route_grid label {
	cursor: pointer;
}

.route_grid input {
	margin-right: 0.2em;
	cursor: pointer;
}

.route_grid_item {
	display: inline-block;
	display: flex;
	align-items: center;
	width: calc(100% / 3 - 4px);
	height: 49px;
	padding-left: 7px;
	background-color: #f3f3f3;
	font-size: 16px;
	font-weight: bold;
	margin-right: 4px;
}

.route_grid_item:nth-of-type(n+4) {
	margin-top: 5px;
}

.rg_color01 .route_grid_item {
	background-color: #fff;
}

.route_grid_item2 {
	display: inline-block;
	display: flex;
	align-items: center;
	width: calc(100% / 4 - (2px * 2));
	height: 49px;
	padding-left: 7px;
	margin: 2px;
	background-color: #f3f3f3;
	font-size: 16px;
	font-weight: bold;
}

.rg_color01 .route_grid_item2 {
	background-color: #fff;
}

.route_list {
	border-top: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	word-break: break-all;
	word-wrap: break-word;
	font-weight: bold;
}

.route_list li {
	padding: 5px 0;
}

.route_list li + li {
	border-top: 1px dotted #d2d2d2;
}

.route_message {
	text-align: center;
}

/*group map*/
.l-group_map {
	margin-inline: auto;
}

.l-group_map .corpGroup_map_wrap {
	position: relative;
	z-index: 10;
}

.l-group_map .corpGroup_map_item01,
.l-group_map .corpGroup_map_item02,
.l-group_map .corpGroup_map_item03,
.l-group_map .corpGroup_map_item04,
.l-group_map .corpGroup_map_item05,
.l-group_map .corpGroup_map_item06,
.l-group_map .corpGroup_map_item07,
.l-group_map .corpGroup_map_item08 {
	position: absolute;
	top: 0;
	left: 0;
}

.l-group_map .corpGroup_map_wrap a {
	font-size: 15rem;
	font-weight: 500;
	line-height: 0;
}

.l-group_map .corpGroup_map_wrap a:after {
	rotate: 90deg;
}

.l-group_map .corpGroup_map_wrap div > a:nth-of-type(n + 2) {
	margin-top: .85em;
}

.l-group_map .corpGroup_map_item01 {
	margin: 0% 0 0 30.5%;
}

.l-group_map .corpGroup_map_item02 {
	margin: 9.5% 0 0 30.5%;
}

.l-group_map .corpGroup_map_item03 {
	text-align: right;
	margin: 5% 0 0;
	left: auto;
	right: 0;
}

.l-group_map .corpGroup_map_item04 {
	margin: 18.3% 0 0 30.5%;
}

.l-group_map .corpGroup_map_item05 {
	text-align: right;
	margin: 25.1% 0 0;
	left: auto;
	right: 0;
}

.l-group_map .corpGroup_map_item06 {
	text-align: right;
	margin: 37.7% 0 0;
	left: auto;
	right: 0;
}

.l-group_map .corpGroup_map_item07 {
	margin: 27.5% 0 0;
}

.l-group_map .corpGroup_map_item08 {
	margin: -1.5% 0 0;
	left: auto;
	right: 0;
}

