body {  overflow:hidden; position:relative; }

#sub .toi { width:100% !important; }
#sub .submenu li a { width:auto !important; }
.ta-q2 th { box-sizing:content-box; }
#container::after { content:''; clear:both; display:block; }
#main #upperbox .box .min, #picup .box { box-sizing:content-box; }

#main .about .box, #main .box2, #main .box3 { max-width:620px; width:95%; margin-left:auto; margin-right:auto; }
#main p.img img, #main p.img2 img { width:100%; height:auto; }
/*
.modal { display:none; align-items:center; justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, 0.6); z-index:200; }

#dialModal { background-color:rgba(255, 255, 255, 0.75); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-around; height:30vh; padding:0 3rem; }
#dialModal > div:nth-child(2) { display:flex; justify-content:space-around; align-items:center; }
#dialModal > div:nth-child(2) > img { width:3rem; }
#dialModal > div:nth-child(2) > span { font-size:1.5rem; font-weight:bold; padding-left:1rem; }
#dialModal > div:nth-child(2) > span a { color:#000; }
#dialModalClose { background-color:#777; color:#fff; border-radius:50%; padding:0 0.5rem;position:absolute; top:-1rem; right:-1rem; display:flex; justify-content:center; align-items:center; width:3rem; height:3rem; cursor:pointer; }
#dialModalClose::before { content:'\f00d'; font-size:2rem; font-family:fontawesome; }
*/

header { font:14px/2 YuGothic, "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; width:100%; background-color: #FFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ededed)); background-image: -webkit-linear-gradient(#FFF 80%, #ededed); background-image: linear-gradient(#FFF 80%, #ededed); position:relative; }
header#newHeader { position:fixed; top:0; left:0; z-index:100; background:none; }
header#newHeader .headerBody { position:relative; width:100%; background-color:#0e5ca7; display:flex; }
header#newHeader .headerBody a { color:#fff; font-weight:bold; font-size:1.25rem; text-decoration:none; }
header#newHeader .headerBody a:hover { color:#fff; font-weight:bold; font-size:1.25rem; text-decoration:none; transition:0.1s;}
header#newHeader .headerBody a.headerSearch > span::before { content:'\f002'; font-family:fontawesome; color:#0e5ca7;  padding:0 0.75rem 0.25rem; background-color:#fff; border-radius:50%; display:inline-block; }
header#newHeader .headerBody > ul { display:flex; margin:0 auto; max-width:1280px; width:90%; }
header#newHeader .headerBody > ul > li { width:10vw; text-align:center; padding:1.5rem 0; }
header#newHeader .headerBody > ul > li.pcHL { width:18vw; }
#spMenu { display:none; }

header#newHeader .headerBody div.submenu { position:absolute; left:100%; width:100%; background-color:rgba(255, 255, 255, 0.8); display:flex; justify-content:flex-end; transition:1s cubic-bezier(0.075, 0.82, 0.165, 1); border-bottom:3px solid #0e5ca7; }
header#newHeader .headerBody div.submenu.active { left:0; justify-content:center; }
header#newHeader .headerBody div.submenu ul { display:flex; justify-content:space-between; align-items:center; width:90%; max-width:1280px; padding:1.25rem; }
header#newHeader .headerBody div.submenu li { position:relative; }
header#newHeader .headerBody div.submenu li::before  { content:''; position:absolute; left:0; top:0; width:0; height:1px; background-color:#0e5ca7; transition:0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
header#newHeader .headerBody div.submenu li::after  { content:''; position:absolute; right:0; bottom:0rem; width:0; height:1px; background-color:#0e5ca7; transition:0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
header#newHeader .headerBody div.submenu li:hover::before  { width:100%; }
header#newHeader .headerBody div.submenu li:hover::after  { width:100%; }
header#newHeader .headerBody div.submenu a { color:#0e5ca7; padding:0 1rem;}

header#newHeader .headerBody .headerLogo { position:absolute; top:50%; transform:translateY(-50%); display:flex; max-width:13vw; }
header#newHeader .headerBody .headerLogo.spHL { display:none; }
header#newHeader .headerBody .headerLogo img { width:100%; height:auto; }
header#newHeader .headerBody .headerEmph { position:absolute; right:0; display:flex; width:32vw; height:100%; }
header#newHeader .headerBody .headerEmph.rec { width:10vw; }
header#newHeader .headerBody .headerEmph > a { text-align:center; flex:1; display:flex; align-items:center; justify-content:center; }
header#newHeader .headerBody .headerStore { background-color:#c70039; }
header#newHeader .headerBody .recForm { background-color:#c70039; line-height:1.5; }
header#newHeader .headerBody .headerInq { background-color:#fd5f00; }
header#newHeader .headerBody .headerEng { display:flex; }
header#newHeader .headerBody .freeDial { position:absolute; top:-4rem; right:11rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
header#newHeader .headerBody .freeDial > img { width:2rem; }
header#newHeader .headerBody .freeDial > span { font-size:1.25rem; font-weight:bold; color:#333; padding-left:0.5rem; }
header#newHeader .headerBody .freeDial > span::after { content:'\f067'; font-family:fontawesome; font-size:1.25rem;  color:#fd5f00; padding-left:0.5rem; }
.spEng { display:none; }

.saleIcon { position:absolute; top:-3rem; right:21vw; font-size:0.75rem; font-weight:bold; color:#fff; padding:1px 0.75rem; border-radius:10px; background-color:#c70039; }
.saleIcon::after { content:''; position:absolute; width:0; height:0; top:100%; right:1rem; border-style:solid; border-width:0 0.5rem 0.5rem 0; border-color:transparent #c70039 transparent transparent; }

header#newHeader > section.fixed { margin-top:0 !important; }


.headerStore, .recForm { position: relative; overflow: hidden; border:1px solid #c70039; z-index:0; }
.headerInq { position: relative; overflow: hidden; border:1px solid #fd5f00; z-index:0; }
.headerStore:hover, .recForm:hover { transition:0.8s; color:#c70039 !important; }
.headerInq:hover { transition:0.8s; color:#fd5f00 !important; }

.headerStore::before, .headerStore::after, .headerInq::before, .headerInq::after, .recForm::before, .recForm::after { content:''; position:absolute; top:50%; width:20px; height:20px; background-color:#fff; border-radius:50%; z-index:-1; }
.headerStore::before, .headerInq::before, .recForm::before { left:-20px; transform: translate(-50%, -50%); }
.headerStore::after, .headerInq::after, .recForm::after { right:-20px; transform: translate(50%, -50%); }

.headerStore:hover::before, .headerInq:hover::before, .recForm:hover::before { animation:criss-cross-left 0.8s both; animation-direction:alternate; }
.headerStore:hover::after, .headerInq:hover::after, .recForm:hover::after  { animation:criss-cross-right 0.8s both; animation-direction:alternate; }

#contents { margin-top:10rem; }

/*フッターメニュー設定
---------------------------------------------------------------------------*/
ul#footermenu { margin-left: 16px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; }
ul#footermenu li { font-size: 0.8rem; }
ul#footermenu li:not(:first-child)::before {content:'/';padding:0 0.8rem; }

/*フッター設定
---------------------------------------------------------------------------*/
footer {color: #FFF;background-color:#0e5ca7;border-top: 10px solid #122f8d;border-bottom: 10px solid #122f8d; padding:0; }
footer a { color: #FFF; text-decoration:none; }
footer a:hover { color: #FFF; text-decoration:underline; }
section#footer{ display: -ms-flex; display: flex; justify-content: space-around; -ms-align-items: center; align-items: center; width: 997px; max-width:90vw; margin: 0 auto; padding: 2rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,0.5); background:none; height:auto; }
section#footer a img{ height: 1.8rem; }
#copy { padding: 1.5rem 0; text-align: center; }
/* 20210408 add start */
#footerSNS { display:flex; justify-content:center; align-items:center; background-color:#122f8d; padding-top:0.5rem; padding-bottom:1rem; }
#footerSNS > div { display:flex; align-items:center; justify-content:center; margin:0 2rem; }
#footerSNS > div > span { font-weight:bold; font-size:1.125rem; color:#122f8d; padding:0 1rem; background-color:#fff; line-height:2; }
#footerSNS > div:not(:nth-child(2))::after { content:''; height:0; width:0; border-top:1.125rem solid transparent; border-left:1rem solid #fff; border-bottom:1.125rem solid transparent; display:block; }
#footerSNS > div:last-child { visibility:hidden; }
#footerSNS > #snsIcons > a { height:30px; margin:0 1rem; display:block; }
#footerSNS > #snsIcons > a > img { height:100%; }

/* 20210602 recruit header add start */
/*採用情報
---------------------------------------------------------------------------*/
#mainimg { margin-top:5.5rem; }
#mainimg + #contents { margin-top:0; }
/* 20210602 recruit header add end */

button, input, select, textarea { color:#000; background-color:#fff; }

@keyframes criss-cross-left {
    0% {left: -20px; }
    50% { left: 50%; width: 20px; height: 20px; }
    100% { left: 50%; width: 375px; height: 375px; }
}
@keyframes criss-cross-right {
    0% { right: -20px; }
    50% { right: 50%; width: 20px; height: 20px; }
    100% { right: 50%; width: 375px; height: 375px; }
}

@media screen and (max-width:1600px){
    html, body { font-size:12px; }
    
    header#newHeader .headerBody .headerLogo { width:auto; height:auto; max-width:12vw; max-height:95%; padding:0.5rem 0; }
}

@media screen and (max-width:1420px){
    .content { width:100%; max-width: 997px; margin: 0 auto; -ms-flex-direction: column; flex-direction: column; }
    .wrapper .content .contentC{ margin-top: 1rem; }
    .wrapper .content .contentR{ display: none; }
}

@media screen and (max-width:1024px){
    html, body { font-size:10px; }
    .saleIcon { display:none; }
    
    #mainContents > .indexContent { width:32%; }
}

@media screen and (max-width:800px){
    .headerStore > span:nth-child(1), .headerInq > span:nth-child(1) { display:none; }
    .headerStore > span:nth-child(2)::before, .headerInq > span:nth-child(2)::before { font-family:fontawesome; font-size:3rem; }
    .headerStore > span:nth-child(2)::before { content:'\f07a'; }
    .headerInq > span:nth-child(2)::before { content:'\f0e0'; }
    
    .mainText03 { left:12.5vw; }
    .mainText03 svg.mainText { width:50vw; }
    .mainText03 > .mainTextLead03 { font-size:1.5rem; }
    
    #subContentsL { width:68%; }
    #subContentsL #purpose > a { width:49%; }
    
    #subContentsR { width:30%; }
    .relationAnchor > div { justify-content:flex-start; margin-left:2%; }
}

@media screen and (max-width:480px){
    header#newHeader .headerBody > ul { display:flex; flex-direction:column; align-items:flex-start; position:fixed; top:0; left:-50vw; width:50vw; height:100vh; background-color:rgba(0, 0, 0, 0.75); transition:0.3s; }
    header#newHeader .headerBody > ul > li { width:100%; text-align:left; padding:1.5rem 0 1.5rem 2rem !important; }
    header#newHeader .headerBody > ul > li:nth-child(2) { margin-top:15vh; }
    header#newHeader .headerBody .headerLogo { width:35vw; max-width:35vw; transform:translate(-65%, -50%); }
    header#newHeader .headerBody .headerEmph { width:30vw; }
    
    header#newHeader .headerBody.open > ul { left:0; z-index:100; }
    header#newHeader .headerBody > ul::after { content:''; width:50vw; height:100vh; position:fixed; top:0; right:-50vw; background-color:rgba(0, 0, 0, 0.25); transition:0.3s; }
    header#newHeader .headerBody.open > ul::after { right:0; }
    header#newHeader .headerBody div.submenu { left:150vw; height:100%; top:0 !important; z-index:1; }
    header#newHeader .headerBody.open div.submenu { transition-timing-function:ease-in-out; }
    header#newHeader .headerBody div.submenu > ul { flex-direction:column; justify-content:flex-start; align-items:flex-start; margin-top:15vh; }
    header#newHeader .headerBody div.submenu > ul > li { margin-top:2vh; }
    header#newHeader .headerBody.open div.submenu.active { left:50vw; }
    
    header#newHeader .headerBody .headerEng { right:1rem; width:8rem; }
    header#newHeader .headerBody .headerEng > img { width:auto; }
    header#newHeader .headerBody a.headerSearch > span::after { content:'　製品検索'; color:#fff;  padding-left:1rem; }
    
    header#newHeader .headerBody .freeDial > span { color:#333; }
    .headerEng path { fill:#333; }
    
    .pcHL { display:none !important; }
    .spHL { display:block !important; transform:translate(-65%, -40%) !important; left:50%; }
    .headerEng { display:none !important; }
    .spEng { display:list-item; }
    
    #spMenu { width:15vw; height:15vw; position:relative; left:5%;  border:1px solid #fff; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:space-around; margin:0.5rem 0; padding-top:0.3rem; z-index:102; }
    #spMenu > span:not(:nth-child(4)) { width:10vw; background-color:#fff; height:1vw; border-radius:5px; transition:0.5s; }
    #spMenu.open > span:nth-child(1) { transform:rotate(-45deg) translate(-20%, 200%); }
    #spMenu.open > span:nth-child(2) { opacity:0; }
    #spMenu.open > span:nth-child(3) { transform:rotate(45deg) translate(-20%, -200%); }
    #spMenu > span:nth-child(4) { color:#fff; font-weight:bold; line-height:1; }

    #footerSNS { padding-bottom:1.5rem; }
    #footerSNS > div:last-child { display:none; }
    #footerSNS > div > span { font-size:1rem; }
    #footerSNS > #snsIcons { justify-content:space-between; }
    
    
    section#footer { width:100%; flex-direction:column; }
    ul#footermenu { width:80%; padding-top:1rem; margin:0; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
    ul#footermenu li { font-size:3.5vw; margin-top: 0.5rem; width: 45%; text-align: left; padding:0; }
    header #menu ul li:first-child { border-left:none; }
    ul#footermenu li:not(:first-child)::before , ul#footermenu li::before { content:'\f192'; font-family:fontawesome; padding:0 0.3rem 0 0; }
    ul#footermenu li a { text-decoration:underline; }
}