*{
    font-family: 'Noto Sans JP', sans-serif;
}
html,body{
    overflow: unset;
}
#container{
    background: #fff;
}
.mainVisual{
    width: 100%;
    height: 400px;
    background: url(/admin/common/img/main_top.jpg) no-repeat center center;
    background-size: cover;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainCatch{
    font-size: 34px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
.mainCatch .catchStr{
    font-weight: 700;
    color: #cd3c3c;
}
.mainCnt{
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: space-between;
}
.mainCntLink{
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #888;
    position: relative;
}
.mainCntLink.safety{
    background: url(/admin/common/img/main_cnt_01.jpg) no-repeat center center;
    background-size: cover;
}
.mainCntLink.sustainability{
    background: url(/admin/common/img/main_cnt_02.jpg) no-repeat center center;
    background-size: cover;
}
.mainCntLink.compliance{
    background: url(/admin/common/img/main_cnt_03.jpg) no-repeat center center;
    background-size: cover;
}
.mainCntLink.grobal{
    background: url(/admin/common/img/main_cnt_04.jpg) no-repeat center center;
    background-size: cover;
}
.mainCntLink + .mainCntLink:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #fff;
}
.mainCntLink span{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 15px #000, 0 0 15px #888;
}
.cntTitleBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.cntTitle{
    font-size: 40px;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    line-height: 1.2;
}
.cntTitle span{
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-top: 10px;
    color: #cd3c3c;
}
.cntTitle.rowTitle{
    align-items: center;
    flex-direction: row;
}
.cntTitle.rowTitle span{
    margin-top: 0;
    margin-left: 20px;
}
.cntTitleBox.centerTitle{
    justify-content: center;
}
.cntTitleBox.centerTitle .cntTitle{
    text-align: center;
    align-items: center;
}
.listLink{
    display: block;
    width: 45px;
    height: 45px;
    border: 1px solid #707070;
    border-radius: 50%;
    position: relative;
    margin-left: 45px;
}
.listLink:before, .listLink:after{
    content: "";
    position: absolute;
}
.listLink:before{
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 15px;
    height: 1px;
    background: #cd3c3c;
}
.listLink:after{
    top: 50%;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    width: 9px;
    height: 9px;
    border-top: 1px solid #cd3c3c;
    border-right: 1px solid #cd3c3c;
}
.topCnt{
    max-width: 1200px;
    margin: 100px auto 0;
    display: flex;
    justify-content: space-between;
}
.news{
    width: 780px;
}
.newsCnt{
    margin-top: 30px;
}
.newsCategory{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 30px;
}
.newsCategoryName{
    font-size: 18px;
    padding-left: 1rem;
    font-weight: 500;
    color: #888;
    position: relative;
}
.newsCategoryName:before{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}
.newsCategoryName.select{
    color: #cd3c3c;
}
.newsCategoryName.select:before{
    background: #cd3c3c;
}
.newsBox{
   margin-bottom:30px;
    position: relative;
    border-top: 1px solid #ccc;
    padding: 0;
}
.newsBox dl{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
}
.newsBox dl *{
    font-size: 18px;
}
.newsBox dl dt{
    width: 100px;
}
.newsBox dl dd{
    margin-left: 40px;
}
.newsBox dl dd.catIcon{
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    width: 140px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #ccc;
    border-radius: 15px;
}
.newsBox dl dd.catIcon.sustainability{
    background: #3CCD3C;
}
.newsBox dl dd.catIcon.business{
    background: #CD3C3C;
}
.newsBox dl dd.catIcon.event{
    background: #CDA93C;
}
.newsBox dl dd.catIcon.export{
    background: #3CA9CD;
}
.newsBox dl dd.catIcon.other{
    background: #888888;
}
.newsBox dl dd:last-child{
    width: 450px;
}
.topBunnerBox{
    margin-top: 30px;
}
.topBunnerLink{
    width: 360px;
    height: 100px;
    padding-left: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: #ccc;
    margin-top: 10px;
    text-shadow: 0 0 15px #000, 0 0 15px #888;
}
.topBunnerLink.public{
    background: url(/admin/common/img/top_bunner_link_01.jpg) no-repeat center center;
    background-size: cover;
}
.topBunnerLink.event{
    background: url(/admin/common/img/top_bunner_link_02.jpg) no-repeat center center;
    background-size: cover;
}
.topBunnerLink.guideline{
    background: url(/admin/common/img/top_bunner_link_03.jpg) no-repeat center center;
    background-size: cover;
}
.topBunnerLink.export{
    background: url(/admin/common/img/top_bunner_link_04.jpg) no-repeat center center;
    background-size: cover;
}
.topBunnerLink.ingredients{
    background: url(/admin/common/img/top_bunner_link_05.jpg) no-repeat center center;
    background-size: cover;
}
.topBunnerLink:first-child{
    margin-top: 0;
}
.ingredientsBunner{
    width: 360px;
    height: 100px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: url(/admin/common/img/top_bunner_link_06.jpg) no-repeat center center;
    margin-top: 10px;
}
.ingredientsBunner p{
    text-shadow: 0 0 15px #000, 0 0 15px #888;
    margin-bottom: 5px;
}
form#ingredientsForm{
    position: relative;
}
input#ingrementsSearchBox{
    background: #fff;
    width: 300px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #707070;
    padding: 0 10px;
}
input#searchBtn{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: url(/admin/common/img/icon_search.png) no-repeat center center;
    background-size: cover;
    width: 16px;
    height: 16px;
    border: none;
    cursor: pointer;
}
.about{
    margin-top: 100px;
    padding: 70px 0;
    background: url(/admin/common/img/bg_top_about.jpg) no-repeat center center;
    background-size: cover;
}
.aboutBox{
    width: 840px;
    padding: 70px 0;
    background: #fff;
    border-radius: 20px;
    margin: 0 auto;
}
.aboutTxt{
    margin-top: 50px;
    text-align: center;
    font-size: 16px;
}
.aboutLinkBox{
    margin-top: 50px;
}
.aboutLinkTopBox, .aboutLinkBottomBox{
    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutLinkBottomBox{
    margin-top: 30px;
}
.aboutLink{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 50px;
    border-radius: 25px;
    font-size: 16px;
    background: #fff;
    border:1px solid #707070;
    position: relative;
    color: #333;
    margin-left: 30px;
}
.aboutLink:first-child{
    margin-left: 0;
}
.aboutLink:before, .aboutLink:after{
    content: "";
    position: absolute;
}
.aboutLink:before{
    top: 50%;
    right: 20px;
    width: 16px;
    height: 1px;
    background: #CD3C3C;
}
.aboutLink:after{
    width: 8px;
    height: 8px;
    border-top: 1px solid #CD3C3C;
    border-right: 1px solid #CD3C3C;
    top: 50%;
    right: 20px;
    transform: rotate(45deg) translate(-30%, -30%);
}
.cosmetic{
    margin-top: 100px;
    padding-bottom: 100px;
}
.cosmeticTitleBox{
    max-width: 1200px;
    margin: 0 auto;
}
.cosmeticBox{
    margin-top: 40px;
    border-top: 1px solid #ccc;
}
.cosmeticCntBox{
    border-bottom: 1px solid #ccc;
    padding: 30px 0;
}
.cosmeticCnt{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cosmeticCntTitle{
    width: 280px;
    font-size: 24px;
    font-weight: normal;
    transition: 0.4s all;
}
.cosmeticCntTxt{
    width: 420px;
    margin-right: 50px;
    font-size: 16px;
    transition: 0.4s all;
}
.cosmeticCntBtn{
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-right: 40px;
    position: relative;
}
.cosmeticCntBtn:before, .cosmeticCntBtn:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.4s all;
}
.cosmeticCntBtn:before{
    width: 1px;
    height: 16px;
    background: #cd3c3c;
}
.cosmeticCntBtn:after{
    width: 16px;
    height: 1px;
    background: #cd3c3c;
}
.cosmeticCntBox.open .cosmeticCntTitle{
    color: #cd3c3c;
}
.cosmeticCntBox.open .cosmeticCntTxt{
    color: #cd3c3c;
}
.cosmeticCntBox.open .cosmeticCntBtn:before{
    background: transparent;
}
.coameticLinkBox{
    background: #CD3C3C;
    padding: 80px 0;
    border-bottom: 1px solid #ccc;
    display: none;
}
.coameticLinkInner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
a.cosmeticLink{
    width: 280px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    border: 1px solid #fff;
    border-radius: 30px;
    margin-left: 26px;
    color: #fff;
}
a.cosmeticLink:nth-child(4n+1){
    margin-left: 0;
}
a.cosmeticLink:nth-child(n+5){
    margin-top: 26px;
}

.underContentBox.newsColumn{
    display: flex;
    justify-content: space-between;
}
.newsColumn .newsCategoryUl{
    width: 230px;
}
.newsColumn .newsCategoryItem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60px;
    background: #ccc;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.newsColumn .newsCategoryItem.allitem{
    background: #333333;
}
.newsColumn .newsCategoryItem.sustainability{
    background: #3CCD3C;
}
.newsColumn .newsCategoryItem.business{
    background: #CD3C3C;
}
.newsColumn .newsCategoryItem.event{
    background: #CDA93C;
}
.newsColumn .newsCategoryItem.export{
    background: #3CA9CD;
}
.newsColumn .newsCategoryItem.otheritem{
    background: #888888;
}
.newsColumn .newsCategoryItem + .newsCategoryItem{
    margin-top: 10px;
}
.newsColumn .newsContentBox{
    width: 910px;
}
.newsColumn .newsContentBox dl{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
}
.newsColumn .newsContentBox dl *{
    font-size: 18px;
}
.newsColumn .newsContentBox dl a{
    color: #006bb4;
    text-decoration: none;
    font-weight: normal;
}
.newsColumn .newsContentBox dl dt{
    width: 100px;
}
.newsColumn .newsContentBox dl dd.catIcon{
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    width: 140px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #ccc;
    border-radius: 15px;
}
.newsColumn .newsContentBox dl dd.catIcon.sustainability{
    background: #3CCD3C;
}
.newsColumn .newsContentBox dl dd.catIcon.business{
    background: #CD3C3C;
}
.newsColumn .newsContentBox dl dd.catIcon.event{
    background: #CDA93C;
}
.newsColumn .newsContentBox dl dd.catIcon.export{
    background: #3CA9CD;
}
.newsColumn .newsContentBox dl dd.catIcon.other{
    background: #888888;
}
.newsColumn .newsContentBox dl dd:last-child{
    width: 450px;
}
.newsColumn .newsContentBox dl dd{
    margin-left: 40px;
}
.newsColumn .newsContentInnerBox dl:first-child{
    border-top: 1px solid #ccc;
}


.exportTopics div dt{
    margin-right: 10px;
}
.export_div dd{
    width: 530px;
}
 dd.icon{
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #fff;
    background: #1a1a1a;
    border-radius: 10px;
    margin-right: 20px;
}
 dd.icon.common{
    background: #f39d41;
}
 dd.icon.hq{
    background: #496c94;
}
 dd.icon.central{
    background: #eb6772;
}
 dd.icon.west{
    background: #78c4a6;
}
.mailAdFlex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
}
.mailAdBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 48%;
    border-bottom: 1px dashed #ccc;
}
.mailAdCnt{
    width: 90px;
    margin-right: 10px;
    padding: 3px 0;
    font-weight: bold;
}
.contactAtt{
    text-align: right;
}
.export_div{
    margin-top: 60px;
}

.underContent{
    margin-top: 90px;
    margin-bottom: 100px;
}

.underInfoFlex {
    display: flex;
    justify-content: space-between;
}
.underInfoTtlBox {
    width: 180px;
}
.underContentBox h2.underInnerTtl {
    display: flex;
    flex-direction: column;
}
.underContentBox h2 {
    border: none;
    font-size: 28px;
    font-weight: bold;
    padding: 0;
    margin-bottom: 30px;
}
.underContentBox h2.underInnerTtl .underInnerTtlMain {
    font-size: 28px;
}
.underContentBox h2.underInnerTtl .underInnerTtlSub {
    font-size: 18px;
    font-family: 'Roboto', sans-serif !important;
    color: #CD3C3C;
}
.underInfoCntBox {
    width: 1000px;
    height: 250px;
}
.ps-container {
    overflow: hidden !important;
    -ms-overflow-style: none;
}
.perfectScroll {
    overflow: hidden;
    position: relative;
}
.underInfoCntBox dl {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}
.underInfoCntBox dt {
    width: 130px;
    font-weight: bold;
    color: #888;
}
.underInfoCntBox dl * {
    font-size: 16px;
}
.underInfoCntBox dd {
    width: 870px;
}