@charset "Shift_JIS";

/* **************************************************

Name: fls_common.css

Description: common CSS

Create: 2024.01.17
Update: 2024.04.08

Copyright 2024 Hitachi Foods & Logistics Systems,Inc.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@600&family=Noto+Sans+JP&family=Zen+Kaku+Gothic+New:wght@300;500;700&display=swap');

html,body{
overflow-x: hidden;
}
#Contents{
color: #000;
/* font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; */
font-feature-settings: 'palt';
font-weight: 500;
}
h2{
background-color: transparent;
background-image: none;
color: #0082c8;
}
h2 span{
background-color: transparent;
}
h2.CT_style{
margin: 0;
padding: 0 0 4.14507%;
background: none;
/* font-family: 'Zen Kaku Gothic New', sans-serif; */
font-feature-settings: 'palt';
font-weight: 500;
font-size: 175%;
border-bottom: 1px solid var(--border-color);
}
h3.CT_style{
/* font-family: 'Zen Kaku Gothic New', sans-serif; */
font-feature-settings: 'palt';
font-weight: 500;
font-size: 150%;
color: #000;
}
.LinkListStyle1 li,
.LinkListStyle1 li a{
font-size: 16px;
}
a#mail{
position: fixed;
height: 84px;
width: 84px;
color: #fff;
background: #e50027;
right: 0;
bottom: 50vh;
z-index: 999;
transform: translateY(30px);
}
a#mail img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a#mail:hover{
opacity: 0.7;
}

/* contents */
#Contents{
position: relative;
}
.Section{
margin-bottom: 60px;
}
.Section:last-child{
margin-bottom: 0;
}
.flsTitle38{
background-color: transparent;
font-size: 38px;
font-weight: bold;
color: #0082c8;
}
.flsTitle28{
font-size: 28px;
font-weight: bold;
color: #0082c8;
margin-bottom: 1em;
}
.flsTitle26{
font-size: 26px;
font-weight: bold;
color: #0082c8;
margin-bottom: 1em;
}
.flsTitle22{
font-size: 22px;
font-weight: bold;
color: #0082c8;
}
.flsTitleSub22{
font-size: 22px;
font-weight: bold;
color: #231815;
}
.flsTitle16{
font-size: 16px;
color: #0082c8;
}
.flsTitle38+.flsTitleSub22{
padding-top: 0;
}
.mb30{
margin-bottom: 30px;
}
.mb40{
margin-bottom: 40px;
}
.mb50{
margin-bottom: 50px;
}
.mb60{
margin-bottom: 60px;
}
.mb70{
margin-bottom: 70px;
}
.mb80{
margin-bottom: 80px;
}
h3.flsTitle28:has(+ p.textStyle16){
margin-bottom: 5px;
}
.underLine{
border-bottom: 2px solid #0082c8;
padding-bottom: 0.5em;
}
.textStyle16{
font-size: 16px;
line-height: 1.7;
color: #595757;
}
.textStyle16:has(+ .flsListStyle1){
margin-bottom: 0;
}
.boxStyle1{
padding: 26px 40px;
background-color: #EEEEE6;
border-radius: 15px;
margin-bottom: 15px;
}
.boxStyle1 p.TextStyle1:last-child{
margin-bottom: 0;
}
.boxStyle1 > .ListStyle1:last-child{
margin-bottom: 0;
}

/* content branding */
.contentBranding{
width: 100%;
position: relative;
padding-bottom: 70px;
background: #fff;
}
.contentBranding img{
width: 100%;
height: auto;
}

/*hanging indent*/
.hungTextStyle1{
text-indent: -1em;
padding-left: 1em;
display: inline-block;
}

/* section - full width */
.fullWidthSection{
width: 100vw;
margin-inline: calc(50% - 50vw);
}
.fullWidthInner{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
.fullWidthInner img{
width: 100%;
max-width: 100vw;
}
.fullWidthInner .categoryTilte{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 38px;
font-weight: bold;
background-image: none;
max-width: 1275px;
width: 96vw;
}
.topCorp .fullWidthInner .categoryTilte{
margin-top: -10px;
}
.fullWidthInner .categoryTilte span{
font-size: 26px;
}

/* section - 1200px */
.secMW1200{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

/* section - 1000px */
.secMW1000{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}

/* section - 910px */
.secMW910{
max-width: 910px;
margin-left: auto;
margin-right: auto;
}

/* section - 900px */
.secMW900{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

/* img */
.ImgOnlyStyle img{
max-width: 100%;
}

/* column */
.flsColumnSet{
display: flex;
justify-content: center;
gap: 30px;
margin: 0 0 50px;
}
.columnOne{
max-width: 435px;
}
.columnOneThird{
width: calc((100% - 20px)/3);
max-width: 295px;
}
.ColumnHalf{
width: calc(50% - 10px);
}

/* list style*/
li.flsListStyle1{
list-style: none;
margin: 0 0 20px;
}
ol.flsListStyle1{
margin: 0 0 20px;
}
.flsListStyle1 li{
font-size: 16px;
line-height: 1.7em;
color: #595757;
padding-left:1em;
position:relative;
}
ul.flsListStyle1 li::before{
content: "●";
color: #0082c8;
position:absolute;
left:0;
top:0;
}
ul.LinkListStyle1.flsListStyle1 li::before{
display: none;
}
ol.flsListStyle1 li{
padding-left: 0;
}
ol.flsListStyle1 li::marker{
color: #0082c8;
}
dl.flsListStyle1{
margin: 0 0 20px;
}
dl.flsListStyle1 dt{
font-size: 16px;
line-height: 1.7em;
color: #595757;
padding-left:1em;
position:relative;
}
dl.flsListStyle1 dt::before{
content: "・";
position:absolute;
left:0;
top:0;
}
dl.flsListStyle1 dd{
font-size: 16px;
line-height: 1.7em;
color: #595757;
padding-left:1em;
margin-bottom: 5px;
}
ul.AnnotationsStyle1.textStyle16 li{
font-size: 16px;
line-height: 1.7;
color: #595757;
font-weight: normal;
}
ul.flsListStyle2{
font-size: 16px;
line-height: 1.7em;
margin-bottom: 0;
}

/* table style */
.flsTableStyle3 th,
.flsTableStyle3 td{
font-size: 16px;
color: #000;
padding: 16px 44px;
}
.flsTableStyle3 th{
background-color: #EEEEE8;
padding: 16px 20px;
width: 170px;
}
.flsTableStyle3 td{
width: calc(100% - 170px);
}

@media screen and (min-width: 995px) and (max-width: 1304px){
.OptionWideRWD .ColumnSet{
margin: 0;
}
}
@media screen and (max-width: 767px){
.PageTitleStyle1 h1{
font-size: 24px;
}
.flsTitle38{
font-size: 26px;
}
.flsH2 span{
font-size: 20px;
padding-bottom: 0;
}
.flsH2 span.flsH2Sub{
font-size: 24px;
}
h3.flsH3 a{
font-size: 14px;
}
.flsTitle28{
font-size: 26px;
}
.textStyle16{
font-size: 14px;
}
.flsLinkListStyle li a{
font-size: 14px;
}
.flsListStyle1 li,
ol.ListStyle1.flsListStyle1 li{
font-size: 14px;
}
ul.AnnotationsStyle1.textStyle16 li{
font-size: 14px;
}
ul.flsListStyle2{
font-size: 14px;
}
.Section{
margin-bottom: 10px;
}
.flsColumnSet{
display: block;
}
.ColumnHalf{
width: 100%;
}
.columnOneThird{
width: calc((100% - 20px)/3);
}
.fullWidthInner .categoryTilte{
font-size: 24px;
}
.fullWidthInner .categoryTilte span{
font-size: 20px;
}
.columnOne{
max-width: 295px;
}
a#mail{
height: 50px;
width: 50px;
}
a#mail img{
width: 30px;
}
.JS .ResponsiveTableStyle1 tr:first-child {
display: block;
}
.JS table.flsTableStyle3 th, .JS table.flsTableStyle3 td{
font-size: 14px;
}
.flsTableStyle3 th{
background-color: #EEEEE8;
padding: 16px 20px;
width: 100px;
}
.flsTableStyle3 td{
width: calc(100% - 10px);
}
.boxStyle1{
padding: 20px 15px;
}
}
@media screen and (max-width: 500px){
.fullWidthInner .categoryTilte{
font-size: 16px;
}
.fullWidthInner .categoryTilte span{
font-size: 14px;
}
}