@charset "utf-8";

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}

*, *:before, *:after{   -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;    -o-box-sizing:border-box;    -ms-box-sizing:border-box;    box-sizing:border-box}

.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clear{clear:both}
a{outline:none;   color:#CF1126}
a:hover{  color:#DC6B52}
a:focus, *:focus{outline:none !important}
a,
a:focus,
a:hover{  text-decoration:none}
strong{font-weight:bold}
em{font-weight:bold}
b{font-weight:bold}
small{  font-size:80%}
p{  line-height:1.9}

.relative_on{position:relative !important}
.relative_off{position:absolute !important}
.relative_off_fixed{position:fixed !important}
.center-block{display:block; margin-left:auto; margin-right:auto}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0}
.sr-only-focusable:active,
.sr-only-focusable:focus{position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto}
.float-right{  float:right !important}
.float-left{  float:left !important}
.hide{  display:none}
.show{  display:block !important}
.invisible{  visibility:hidden}
.text-hide{  font:0/0 a;  color:transparent;  text-shadow:none;  background-color:transparent;  border:0}
.hidden{ display:none !important;  visibility:hidden !important}
.affix{ position:fixed}
pre, blockquote, code{ page-break-inside:avoid}

html{ -ms-text-size-adjust:100%;  -webkit-text-size-adjust:100%;  -webkit-tap-highlight-color:rgba(0,0,0,0);  font-size:16px;   letter-spacing:0.02rem;  line-height:1.5;  scroll-behavior:smooth;  font-family:'Roboto','Noto Sans JP','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif}

.font_reset{font-family:'Roboto','Noto Sans JP','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif !important}

body{background-color:#fff; font-weight:normal; margin:0; word-wrap:break-word;  overflow-wrap:break-word}

input,
select,
textarea{ font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif !important}

input,
select,
textarea,
button{ -webkit-appearance:none;  -moz-appearance:none;  appearance:none;  background:transparent;  border:none;  border-radius:0;  font:inherit;  outline:none}

select::-ms-expand{ display:none}

textarea{ display:block}

ul{list-style:none}

ol{list-style:decimal}

hr{border-width:1px 0 0 0; border-style:solid; border-color:#ccc;  margin:30px 20px 0}

img{ vertical-align:middle;  border:0;  max-width:100%;  height:auto;   image-rendering:-webkit-optimize-contrast}

.flex-wrapper{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch}

.flex-wrapper-sub{display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch}

@media (max-width:959px){.mobile-and-tablet-only{display:block}
.pc-only{display:none}
}

@media (min-width:960px){.mobile-and-tablet-only{display:none}
.pc-only{display:block}
}

@media (max-width:600px){.mobile-only{display:block}
.pc-and-tablet-only{display:none}
}

@media (min-width:601px){.mobile-only{display:none}
.pc-and-tablet-only{display:block}
}

#page-top{ display:block;  width:40px;  height:40px;  box-sizing:border-box;  background:#111;  text-align:center;  letter-spacing:-1px;  text-decoration:none;  color:#fff;  position:fixed;  bottom:10px;  right:20px;  border-radius:50%;  cursor:pointer;  z-index:9999}
#page-top::before{ content:"";  display:block;  border-top:2px solid #fff;  border-right:2px solid #fff;  width:25%;  height:25%;  top:18px;  left:0;  right:0;  margin:auto;  position:absolute;  transform:rotate(-45deg)}
#page-top:hover{ background:#454545}

@media (max-width:959px){#page-top{ bottom:10px;  right:10px}
}

header{ z-index:200}

.drawer-hamburge{ z-index:210}

.drawer-nav{ z-index:220}

.drawer-open .drawer-overlay{ z-index:199}

.drawer-hamburger,
.drawer-hamburger:hover{ background:#fff;  padding-bottom:26px !important}

.drawer-nav .drawer-menu{ padding:20px}

.drawer-nav .drawer-menu li{ margin-bottom:15px}

.drawer-nav .drawer-menu a{outline:none;  color:#333;  font-size:0.9375rem;  font-weight:500}

.drawer-nav .drawer-menu li.active a{ color:#CF1126;  font-weight:700}

.drawer-nav .drawer-menu a img{ border:solid 1px #ddd}

header{ position:fixed;  height:60px;  width:100vw;  background:#fff}

header .logo-sp{ width:calc(100% - 60px);  height:60px}

header .logo-sp img{ max-height:60px}

@media (min-width:960px){header{ display:none}
}

#fixed-nav{ position:fixed;  width:100%;  background:#fff;  z-index:1000;  padding:22px 0;  transition:all .3s}

@media (max-width:959px){#fixed-nav{ display:none !important}
}

#fixed-nav.fixed{position:fixed; top:0; left:0; padding:6px 0; z-index:100}

#fixed-nav .main-logo{ width:32%;  height:60px;  padding-left:1.5vw}

#fixed-nav .main-logo img{ height:60px}

#fixed-nav .main-nav{ padding:18px 2vw 0 1vw;  width:68%;  height:60px}

#fixed-nav nav ul{ display:flex;  justify-content:space-around;  align-items:center;  margin:0;  padding:0;  list-style:none}

#fixed-nav nav ul a{outline:none;  color:#333;  font-size:0.9375rem;  font-weight:500}

#fixed-nav nav ul li.active a{ color:#CF1126;  font-weight:700}

#fixed-nav nav ul li.corp{ position:relative}

#fixed-nav nav ul li.corp a{ border:solid #454545 1px;  padding:10px 22px;  font-size:0.875rem}

.stickarrow2{ width:20px;  height:20px;  background-color:#454545;  position:absolute;  top:68%;  left:90%}

.stickarrow2 span{ display:block;  width:8px;  height:4px;  margin:8px 0 0 4px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

#fixed-nav nav ul a:hover{ color:#999}

#index #fixed-nav{ padding:6px 0;  top:-72px}

footer{  background-image:url("../images/footer-bg.png");   background-repeat:repeat-x;   min-height:1000px;   background-position:top}

@media (min-width:960px){footer.grey{  background-image:url("../images/footer-bg-grey.png")}
}

footer .footercontainer{ max-width:1240px;  margin:0 auto;  padding:0 80px}

footer .company{ background-color:#fff;  text-align:center}

footer .company .triangle{ padding:0 10px}

footer .company h4{ padding:60px 20px 70px;  font-size:24px;  letter-spacing:0.4rem;  line-height:34px}

footer .company h4 span{ display:block;  font-size:0.9375rem;  font-weight:normal;  color:#CF1126;  letter-spacing:0.15rem;  font-weight:900}

footer .company .happy-triangle{ color:#bebebe;  font-size:1rem;  letter-spacing:0.1rem;  padding:15px 10px 50px}

footer .company .idea{ color:#666;  padding:0 10px 60px}

footer .corp-box{ padding:0 10px 70px}

footer .corp{ position:relative;  width:320px;  display:inline-block;  margin:0 35px 0 25px}

footer .corp a{ display:inline-block;  border:solid #CF1126 1px;  padding:24px 20px;  font-size:1.125rem;  width:300px;  color:#CF1126}

.stickarrow3{ width:40px;  height:40px;  background-color:#CF1126;  position:absolute;  top:59%;  left:87%}

.stickarrow3 span{ display:block;  width:16px;  height:8px;  margin:16px 0 0 8px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

footer .corp2{ position:relative;  width:320px;  display:inline-block;  margin:0 35px 0 25px}

footer .corp2 a{ display:inline-block;  border:solid #666 1px;  padding:24px 20px;  font-size:1.125rem;  width:300px;  color:#454545}

.stickarrow4{ width:40px;  height:40px;  background-color:#666;  position:absolute;  top:59%;  left:87%}

.stickarrow4 span{ display:block;  width:16px;  height:8px;  margin:16px 0 0 8px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

footer .corp3{ position:relative;  width:260px;  display:inline-block;  margin:20px 0 0;  text-align:center}

footer .corp3 a{ display:inline-block;  border:solid #666 1px;  padding:18px 20px;  width:260px;  color:#333;  background:#fff}

.stickarrow5{ width:30px;  height:30px;  background-color:#666;  position:absolute;  top:59%;  left:91%}

.stickarrow5 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

footer .entry-box{ width:100%;  margin:50px auto 70px}

footer .entry-box .entry1{ width:100%;  text-align:center;  background:#fff;  margin:20px 0 10px;  padding:40px 10px}

footer .entry-box .entry2{ width:calc(50% - 15px);  text-align:center;  background:#fff;  margin:20px 15px 0 0;  padding:30px 10px}

footer .entry-box .entry3{ width:calc(50% - 15px);  text-align:center;  background:#fff;  margin:20px 0 0 15px;  padding:30px 10px}

footer .entry-box .entry1 a img,
footer .entry-box .entry2 a img,
footer .entry-box .entry3 a img{ margin:0 auto}

footer #sitemap{ width:100%;  background:#F6F6F6;  font-size:0.875rem;  color:#333}

footer .sitemap-box{ max-width:1240px;  margin:0 auto;  padding:70px 20px 80px}

footer .footer-logo{ width:120px}

footer .footer-title{ font-weight:normal;  font-size:1.25rem;  padding:10px 0 20px;  color:#111}

footer .footer-address{ margin-bottom:20px;  line-height:1.5}

footer .footer-address span{ color:#CF1126;  font-weight:bold;  display:inline-block;  padding-bottom:5px}

footer .sitemap-box .sitemap-l{ width:30%}

footer .sitemap-box .sitemap-r{ width:70%;  display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:space-around; justify-content: space-around; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:space-between; align-content: space-between}

footer .sitemap-box .sitemap-r1{ width:30%}

footer .sitemap-box .sitemap-r2{ width:35%}

footer .sitemap-box .sitemap-r3{ width:35%}

footer .sitemap-box .sitemap-r4{ width:100%}

footer .sitemap-box ul li{ margin-bottom:20px}

footer .sitemap-box ul li ul li{ margin-bottom:0;  margin-top:10px}

footer .sitemap-box ul li ul li a{ color:#333}

footer .sitemap-box ul li ul li a:hover{ color:#999}

footer .sitemap-box ul li ul li::before{ content:"・";  color:#CF1126}

footer .sitemap-entry{ width:33.33%;  padding:15px 15px 0}

footer .sitemap-entry a img{ border:solid 1px #CF1126}

footer .footer-bottom{ text-align:center;  font-size:0.75rem;  color:#999;  width:100%;  padding:10px}

footer .sitemap-r1 h4{ display:none}

#talk-link{ background:#f6f6f6;  width:100%;  position:relative;  min-height:580px}

@media (min-width:1400px){#talk-link{ min-height:610px}

}

#talk-link .talk-image{ position:absolute;  top:30px;  right:0;  width:60%;  z-index:1}

#talk-link .talk-banner{ position:absolute;  top:140px;  left:0;  width:50%;  z-index:2;  text-align:center}

#talk-link .talk-banner h3{ color:#CF1126;  font-family:'Roboto',sans-serif;  font-weight:900;  letter-spacing:0.1em;  font-size:min(6vw,90px);  line-height:1em;  text-align:right}

#talk-link .talk-banner h4{ font-size:1.25rem;  letter-spacing:0.1em;  padding:60px 0 20px}
#talk-link .talk-banner p{font-size:0.9375rem}

#talk-link .talk-banner-box{ width:100%;  background:#fff}

#talk-link .link{ position:relative;  width:320px;  display:inline-block;  margin:40px auto 60px}

#talk-link .link a{ display:inline-block;  border:solid #CF1126 1px;  padding:14px 20px;  font-size:1.125rem;  width:300px;  color:#CF1126}

.stickarrow6{ width:30px;  height:30px;  background-color:#CF1126;  position:absolute;  top:59%}

.stickarrow6 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

.stickarrow7{ width:30px;  height:30px;  background-color:#CF1126;  position:absolute;  top:59%}

.stickarrow7 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

.stickarrow8{ width:30px;  height:30px;  background-color:#CF1126;  position:absolute;  top:59%;  left:91%}

.stickarrow8 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

.hr-talk{ margin-bottom:40px}

.hr-last{ margin-bottom:20px}

@media (min-width:960px){.stickarrow6{ left:91%}

.stickarrow7{ left:91%}

.stickarrow8{ left:91%}

}

@media (max-width:959px){footer .footercontainer{ max-width:100%;  padding:0 10vw}
footer .company h4{ padding:30px 20px 20px;  font-size:24px;  letter-spacing:0.4rem;  line-height:30px}

footer .company .happy-triangle{ padding:3px 5px 15px;  font-size:0.875rem}

footer .company .idea{ font-size:0.8125rem;  padding:0 15px 30px}

footer .corp-box{ padding:0 20px 10px}

footer .corp,
footer .corp2{ position:relative;  width:90%;  display:inline-block;  margin:0 0 30px}

footer .corp a,
footer .corp2 a{ display:inline-block;  padding:18px 20px;  font-size:1.125rem;  width:100%}

.stickarrow3,
.stickarrow4{ width:30px;  height:30px;  position:absolute;  top:62%;  left:calc(100% - 24px)}

.stickarrow3 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

.stickarrow4 span{ display:block;  width:12px;  height:6px;  margin:12px 0 0 6px;  border-bottom:1px solid #fff;  border-right:1px solid #fff;  transform:skew(45deg)}

footer #entry-to-npd{ margin:-60px auto 0;  padding-top:60px}

footer .entry-box{ margin:30px auto 0}

footer .entry-box .entry1,
footer .entry-box .entry2,
footer .entry-box .entry3{ width:100%;  margin:0 0 30px;  padding:0}

footer .sitemap-box{ max-width:100%;  margin:0 auto;  padding:20px 20px 20px}

footer .sitemap-box .sitemap-l,
footer .sitemap-box .sitemap-r,
footer .sitemap-box .sitemap-r1,
footer .sitemap-box .sitemap-r2,
footer .sitemap-box .sitemap-r3{ width:100%}

footer .sitemap-box .sitemap-l{ order:2;  text-align:center;  padding-top:30px}

footer .sitemap-box .sitemap-r{ order:1}

footer .corp3,
footer .sitemap-box .sitemap-r4{ display:none}

footer #sitemap{ font-size:0.9375rem}

footer .sitemap-r1 h4{ display:block;  margin-bottom:15px;  margin-left:-17px}

footer .sitemap-r1 h4 img{ height:60px}

footer .footer-title{ font-size:1.125rem;  padding:10px 0 20px}

footer .footer-address{ margin-bottom:10px;  font-size:0.8125rem;  line-height:1.5}

footer hr{ margin:40px 0 10px}

#talk-link{ min-height:auto;  position:relative;  background:#fff;  margin-bottom:20px}

#talk-link .talk-image{ position:relative;  top:0;  width:100%}

#talk-link .talk-banner{ position:relative;  top:0;  width:100%}

#talk-link .talk-banner h3{ font-size:10vw;  font-size:min(10vw,50px);  line-height:10vw;  text-align:center;  padding:10px 20px 0;  margin:10px auto 0}

#talk-link .talk-banner h4{ font-size:0.875rem; letter-spacing:0.1em; padding:0 20px 15px; margin:0 auto; text-align:center}
#talk-link .talk-banner p{ font-size:0.9375rem;  padding:0 20px 20px}
#talk-link .link{ width:100%;  padding:0 40px;  margin:20px auto 30px;  position:relative}

#talk-link .link a{ width:100%}

.stickarrow6{ right:0;  margin-right:33px}

.stickarrow7{ right:0;  margin-right:33px}

.stickarrow8{ left:auto;  right:0;  margin-right:-6px}

}

@media (max-width:600px){footer .company .happy-triangle{ font-size:3.3vw}

}

#first-view{ max-height:100vh; width:100%; position:relative; overflow:hidden; max-width:1920px; margin:0 auto}

#first-view .hero-logo{ position:absolute;  top:10px;  left:1.5vw;  z-index:4}

#first-view .hero-logo img{ height:60px}

#first-view .hero-title{ position:absolute;  bottom:0;  left:0;  z-index:3}

#first-view .hero-title img{ width:32vw}

#first-view .hero-nav{ position:absolute;  bottom:28px;  left:32%;  width:68%;  z-index:5;  padding:0 2vw 0 1vw}

#first-view nav ul{display:flex; justify-content:space-around; margin:0; padding:0; list-style:none}

#first-view nav ul a{outline:none;  color:#fff;  font-size:0.8125rem;  font-size:0.9375rem;  font-weight:500}

#first-view nav ul li.active a{ color:#CF1126;  font-weight:700}

#first-view nav ul li.corp{ position:relative}

#first-view nav ul li.corp a{ border:solid #fff 1px;  padding:10px 22px;  font-size:0.75rem;  font-size:0.875rem}

.stickarrow{ width:20px;  height:20px;  background-color:#fff;  position:absolute;  top:68%;  left:90%}

.stickarrow span{ display:block;  width:8px;  height:4px;  margin:8px 0 0 4px;  border-bottom:1px solid #000;  border-right:1px solid #000;  transform:skew(45deg)}

#first-view nav ul a:hover{ color:#ddd}

#first-view .hero-overlay{ position:absolute;  top:0;  left:0;  width:100%;  height:100%;  background:rgba(0,0,0,0.4);  z-index:2}

.hero-video{ position:relative;  width:100%;  z-index:1}

.hero-video__title{ position:absolute;  top:50%;  left:50%;  z-index:10;  text-align:center;  padding:30px;  font-size:5.2vw;  font-weight:300;  line-height:1.6;  white-space:nowrap;  color:#fff;  background:rgba(0,0,0,.3);  -webkit-backdrop-filter:blur(3px);  backdrop-filter:blur(3px);  -webkit-transform:translate(-50%,-50%);  transform:translate(-50%,-50%)}
.hero-video__embed{ display:block;  width:100%;  height:100%;  -o-object-fit:cover;  object-fit:cover}
.hero-video__frame{ overflow:hidden;  position:relative;  width:100%;  height:0;  padding-top:56.25%;  background:#000}
.hero-video__frame--vimeo{ overflow:hidden;  position:relative;  height:56.25vw;  background:#000}
.hero-video__frame--vimeo.is-loaded iframe{ opacity:1;  visibility:visible}
.hero-video__frame.is-loaded iframe{ opacity:1;  visibility:visible}
.hero-video iframe{ pointer-events:none;  opacity:0;  visibility:hidden;  position:absolute;  top:-60px;  left:0;  width:100%;  height:calc(100% + 120px);  -webkit-transition:.3s cubic-bezier(.39,.575,.565,1);  transition:.3s cubic-bezier(.39,.575,.565,1);  -webkit-transition-property:opacity,visibility;  transition-property:opacity,visibility}

.hero-title-sp,
.hero-title-sp-btn{ display:none}

@media (max-width:959px){#first-view .hero-logo,#first-view .hero-title{ display:none}

.hero-video{ margin-top:60px}

.hero-title-sp{ display:block;  position:absolute;  top:calc(60px + 40vw);  left:0;  z-index:3}

.hero-title-sp img{ width:60vw}

.hero-title-sp-btn{ display:block;  position:absolute;  top:calc(60px + 62vw);  right:7.8vw;  z-index:3}

.hero-title-sp-btn img{ width:32vw;  border:solid 1px #CF1126}

}

.maincontainer{margin:0 auto; width:100%; font-size:0.9375rem;   position:relative}

#index .area-index{  position:relative;   background-color:#CF1126;   background-image:url("../images/top-bg1.png");   background-repeat:no-repeat;   background-position:center top;   min-height:2000px}

#index .message-image{  width:60%;   position:absolute;   top:0;   left:0;   background-image:url("../images/top-img1.jpg");  background-size:cover;  z-index:1;  height:960px}

#career .message-image-sp,
#index .message-image-sp{ display:none}

#index .message{ width:56%;  position:absolute;  top:0;  right:0;  background-color:#fff;  color:#000;  padding:80px 0 80px 5%;  z-index:2}

#index .message h2{ font-family:'Roboto',sans-serif;  font-weight:900;  color:#CF1126;  font-size:0.875rem;  margin-bottom:15px}

#index .message h3{ margin-bottom:30px;  font-size:2.5vw}

#index .message p{ margin-bottom:1.65rem;  font-size:0.9375rem}

#index .message p:last-child{ margin-bottom:0}

@media (max-width:959px){#index .area-index{ position:relative;  background-color:#fff;  background-image:none}

#first-view .hero-nav{ display:none}

#index .area1{ background-color:#fff;  background-image:none;  min-height:auto}

#index .message{ width:100%;  position:relative;  background-color:#fff;  color:#000;  padding:30px 20px 30px}

#index .message h2{ font-family:'Roboto',sans-serif;  font-weight:900;  color:#CF1126;  font-size:0.875rem;  margin-bottom:5px}

#index .message h3{ margin-bottom:15px;  font-size:5.6vw}

#index .message p{ margin-bottom:1.43rem;  font-size:0.9375rem}

#index .message p:last-child{ margin-bottom:0}

#index .message-image{ display:none}

#index .message-image-sp{ width:100%;  display:block}

#career .message-image-sp{ width:100%;  display:block;  padding:0 0 20px}

#index .maincontainer{ margin-top:24vw}

}

@media (min-width:960px){}

#pages .maincontainer{ padding-top:104px;  padding-bottom:60px}

#pages .contents{ max-width:1200px;  margin:0 auto}

#pages .contents2{ max-width:1200px;  margin:0 auto;  padding:0 20px}

#pages .contents3{ max-width:1200px;  margin:0 auto 60px}

#pages h2{ font-family:'Tenor Sans',sans-serif;  width:100%;  text-align:center;  font-size:34px;  font-weight:normal;  line-height:44px;  color:#454545;  margin:40px auto}

#pages h2 span{ display:block;  font-size:0.9375rem;  line-height:1rem;  color:#999}

.talk-box{ width:50%;  padding:0 20px 20px}

.talk-box-image{ position:relative}

.talk-box-image div{ position:absolute;  top:80%;  left:50%;  transform:translate(-50%,-50%);  -webkit-transform:translate(-50%,-50%);  -ms-transform:translate(-50%,-50%);  font-size:1.125rem;  color:#fff;  background-color:rgba(0,0,0,0.5);  padding:10px 20px;  width:50%;  text-align:center;  border:solid 2px #fff}

.talk-box h3{ background:#CD1127;  color:#fff;  font-size:1.25rem;  font-weight:normal;  padding:15px 20px;  min-height:90px}

.talk-box p{ padding:15px 15px}

.talk-box a{ color:#333}

.talk-box a img{ opacity:1;  transition:all .3s}

.talk-box a:hover img{ opacity:0.8}

@media (max-width:959px){#pages .maincontainer{ padding-top:60px;  padding-bottom:40px}

#pages .contents{ max-width:100%;  margin:0 auto;  padding:0 20px}

#pages .contents2{ max-width:100%;  margin:0 auto;  padding:0 20px}

#pages .contents3{ max-width:100%;  margin:0 auto;  padding:0 20px 40px}

#pages h2{ font-size:min(28px,7vw);  line-height:30px;  margin:25px auto}

#pages h2 span{ font-size:0.75rem;  line-height:1rem}

.talk-box{ width:100%;  padding:0 0 20px}
.talk-box-image div{ font-size:1rem}
.talk-box h3{ font-size:1.125rem;  font-size:min(5vw,20px);  min-height:84px}

.talk-box p{ padding:10px 15px}

}

.interview-desc{  margin:0 auto 40px;   text-align:center}

#interview-list h2{  background-image:url("../images/interview-h2.png");  background-position:center;  height:60px;  line-height:60px;  color:#fff;  font-size:24px}

.interview-wrapper2{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:center; justify-content: center; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch;  max-width:1000px;  margin:0 auto}

.interview-wrapper3{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:center; justify-content: center; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content:        stretch;   max-width:1200px;   margin:0 auto}

.interview-box{  position:relative;   max-width:50%;   border-radius:20px;   width:350px;   height:490px;   margin:0 25px 50px;   overflow:hidden}

.interview-box-image{  position:absolute;   top:0;   left:0;   width:350px;   height:490px}

.interview-box-image img{  border-radius:20px;   transition:all .3s}

.interview-name-box{  position:absolute;   bottom:0;   left:0;   width:100%;   overflow:hidden;   height:180px}
.interview-name{  background-image:url("../images/interview-name.png");  background-position:left;  width:700px;  height:180px;  margin-left:-350px;  transition:all .3s;  cursor:pointer}

.interview-box:hover .interview-name{ margin-left:0;  opacity:1}

.interview-box:hover .interview-box-image img{  opacity:0.8}

.interview-name-l{  width:350px;   height:180px;   color:#fff;   position:relative}

.interview-name-l .text{  position:absolute;   top:50%;   left:50%;   transform:translateY(-50%) translateX(-50%);   -webkit-transform:translateY(-50%) translateX(-50%);   width:310px;   font-size:1.125rem}

.interview-name-l .text .name{  font-size:0.8125rem;   line-height:1.5em;   padding-top:15px;   text-align:right}

.interview-name-l .text .name span{  font-size:18px !important;   display:block;   font-weight:bold;   padding-top:5px}

.interview-name-r{  width:350px;   color:#fff;   font-weight:normal;   font-size:0.875rem;   padding:47px 0 0 20px}

.interview-name-r h3{  font-size:22px;   padding-top:8px}

.interview-text-tablet,
.interview-text-sp{  display:none}

.interview-box .line4{  padding-top:40px !important}

.interview-box span{  font-size:0.8125rem !important;   display:block}

.interview-attention{  font-size:0.75rem;   color:#999;   max-width:1200px;   width:100%;   text-align:right;   margin:0 auto;   padding:0 20px}

@media (max-width:700px){.interview-desc{  margin:0 auto 30px;   text-align:left;   font-size:0.9375rem}

#interview-list h2{  font-size:20px}

.interview-wrapper2,
.interview-wrapper3{  max-width:100%}

.interview-text-sp{  display:block;   width:calc(100% - 20vw);   max-width:500px;   margin:0 10vw 20px;   font-size:15px;   padding:15px 15px;   background:#eee;   border-radius:0 0 20px 20px;   color:#333 !important}

.interview-box{  position:relative;   max-width:100%;   width:calc(100% - 20vw);   max-width:500px;   height:auto;   margin:0 10vw;   overflow:hidden;   border-radius:20px 20px 0 0}

.interview-box-image img{  border-radius:20px 20px 0 0}

.interview-box-image{  position:relative;   top:0;   left:0;   width:100%;   height:auto}

.interview-name-box{  position:absolute;   top:0;   left:0;   width:100%;   overflow:hidden;   height:100%;   background-image:url("../images/interview-name-sp.png");  background-position:left;  background-size:cover}
.interview-name{ background-image:none;  width:auto;  height:auto;  margin-left:0;  position:absolute;  bottom:10%;  left:0}

.interview-box:hover .interview-name{ margin-left:0;  opacity:1}

.interview-box:hover .interview-box-image img{ opacity:1}

.interview-name-l{ display:none}

.interview-name-r{ font-size:3vw;  padding:47px 0 0 20px}

.interview-name-r h3{ font-size:5.4vw}

}

@media (min-width:701px) and ( max-width:959px){ .interview-box{ position:relative;  max-width:50%;  border-radius:20px 20px 0 0;  width:300px;  height:420px;  margin:0 25px 100px;  overflow:visible}

 .interview-box-image{ position:absolute;  top:0;  left:0;  width:300px;  height:320px}

 .interview-box-image img{ border-radius:20px 20px 0 0}

 .interview-box:hover .interview-name{ margin-left:-350px;  opacity:1}

 .interview-box:hover .interview-box-image img{ opacity:1}

 .interview-text-tablet{ display:block;  position:absolute;  width:100%;  max-width:300px;  margin:0;  font-size:15px;  padding:15px 15px;  background:#eee;  border-radius:0 0 20px 20px;  color:#000 !important;  bottom:-75px;  left:0;  right:0;  z-index:20;  min-height:75px}


}

#talk-articletitle{ margin-top:-6vw !important;  z-index:10;  position:relative}

#talk-articletitle .talk-title h2{ margin:0 20px 25px;  text-align:left;  font-size:2vw;  background:#CF1126;  padding:30px;  display:inline-block;  width:auto;  color:#fff;  font-weight:bold;  line-height:1.45em;  letter-spacing:0.1em}

#talk-articletitle .talk-title p{ padding-left:30px;  margin-bottom:30px}

.talk-member{ background:#F6F6F6;  padding:30px 0 0}

.talk-member h3{ display:block;  text-align:center;  font-size:1.75rem;  color:#CF1126;  letter-spacing:0.15em;  font-weight:900;  padding-bottom:30px}

.member-wrapper{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:center; justify-content: center; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch;  max-width:1200px;  position:relative;  margin:0 auto;  padding:0 10px}

.member-box{ width:calc(50% - 25px);  margin:0 10px 30px 15px;  display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:center; align-items: center; -webkit-align-content:stretch; align-content: stretch;  background:#fff;  position:relative}

.member-box:nth-child(odd){ width:calc(50% - 25px);  margin:0 15px 30px 10px}

.member-box .bg-red{ background:#CF1126;  width:70px;  height:70px;  position:absolute;  top:0;  left:0;  z-index:1}

.member-box .member-box1{ width:35%;  position:relative;  z-index:2;  padding:20px}

.member-box .member-box1 img{ border-radius:50%}

.member-box .member-box2{ width:65%;  position:relative;  z-index:2;  padding-left:5px}

.member-box .member-box2 .text{ font-size:0.8125rem;  margin:10px}

.member-box .member-box2 .name{ font-size:1.625rem;  margin:10px;  font-weight:bold}

.member-box .member-box3{ width:100%;  position:relative;  z-index:2;  font-size:0.875rem;  padding:0 20px 15px}


#talk-article h3{ font-size:1.5rem;  font-weight:500;  margin:40px 0 10px}

#talk-article .talk-img{ margin:30px 0 20px}

#talk-article .agenda{ margin:10px 0 40px;  font-size:0.8125rem}

#talk-article .article-block{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:flex-start; align-items: flex-start; -webkit-align-content:stretch; align-content: stretch;  position:relative;  width:100%}

#talk-article .article-block1{ width:65%}

#talk-article .article-block2{ width:35%;  padding-left:40px}

#talk-article .article-block2r{ width:35%;  padding-right:40px;  order:-1;}

#talk-article .sentence figure{ position:absolute;  top:0;  left:0;  width:100px;  margin:0 20px 20px 0}

#talk-article .sentence figure img{ border-radius:50%}

#talk-article .sentence{ padding-left:115px;  margin-bottom:30px;  position:relative;  min-height:100px}

#talk-article .sentence p{ margin-bottom:15px}

#talk-article .sentence-img-sp{ display:none}

@media (max-width:959px){#talk-articletitle{ margin-top:-50px !important;  z-index:10;  position:relative}

#talk-articletitle .talk-title h2{ margin:0 0 15px;  text-align:left;  font-size:4.4vw;  background:#CF1126;  padding:15px;  display:inline-block;  width:auto;  color:#fff;  font-weight:bold;  line-height:1.5em;  letter-spacing:0.1em}

#talk-articletitle .talk-title p{ padding-left:0;  margin-bottom:20px}

.member-box,
.member-box:nth-child(odd){ width:calc(100% - 30px);  margin:0 15px 20px}

.talk-member{ padding:20px 0 10px}

.talk-member h3{ font-size:1.5rem;  padding-bottom:20px}

.member-box .bg-red{ width:50px;  height:50px}

.member-box .member-box1{ padding:10px}

.member-box .member-box2{ padding-left:0}

.member-box .member-box2 .text{ font-size:0.75rem;  margin:4px 7px}

.member-box .member-box2 .name{ font-size:1.25rem;  margin:4px 7px}

.member-box .member-box3{ font-size:0.8125rem;  padding:0 10px 10px}

#talk-article .article-block1{ width:100%}

#talk-article .article-block2,
#talk-article .article-block2r{ display:none}

#talk-article .sentence figure{ position:relative;  top:0;  left:0;  width:100px;  margin:0 20px 10px 0;  float:left}

#talk-article .sentence figure img{ border-radius:50%}

#talk-article .sentence{ padding-left:0;  margin-bottom:20px}

#talk-article .sentence p{ margin-bottom:10px}

#talk-article .sentence-img-sp{ display:block;  margin:-5px 0 20px;  text-align:center}

#talk-article h3{ font-size:1.25rem;  margin:20px 0 10px}

#talk-article .agenda{ margin:10px 0 20px}

}

#interview-article-header{  position:relative}

#interview-article-header .header-box{  position:absolute;   left:7%;   bottom:10%;   background:#fff;   padding:20px;   max-width:35vw}

@media (min-width:1200px){#interview-article-header .header-box{  max-width:480px}
}

#interview-article-header h2{  font-size:1.6vw;   font-size:26px;   text-align:left;   line-height:1.3em;   font-weight:bold;   color:#111;   margin:0 0 20px}

#interview-article-header .desc{  font-size:0.75rem;   margin:10px 0 0}

#interview-article-header .desc span{  display:block;   margin:5px 0;   font-size:1.375rem;   font-weight:bold}

#interview-article{  position:relative;   background-color:#f6f6f6;   background-image:url("../images/interview/interview-bg.png");  background-repeat:no-repeat;  background-position:center top}

#interview-article .article-block{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:flex-start; align-items: flex-start; -webkit-align-content:stretch; align-content: stretch;  position:relative;  width:100%;  padding:40px 0 0}

#interview-article .article-text-l{ width:50%;  order:1;  padding:0 3vw}

#interview-article .article-text-r{ width:50%;  order:1;  padding:0 3vw}

#interview-article .article-text-box{ max-width:600px;  text-align:left}

#interview-article .article-text-l .article-text-box{ float:right}

#interview-article .article-image-l{ width:50%;  order:-2}

#interview-article .article-image-r{ width:50%;  order:2}

#interview-article h3{ font-size:1.5rem;  text-align:left;  line-height:1.4em;  font-weight:500;  color:#111;  margin:0 0 20px}

#talk-article .back-interview,
#interview-article .back-interview{ text-align:center}

#talk-article .back-interview a{ text-align:center;  background:#CF1126;  color:#fff;  padding:10px 20px;  font-size:1.25rem;  min-width:540px;  display:inline-block;  margin:20px auto 20px}
#interview-article .back-interview a{ text-align:center;  background:#CF1126;  color:#fff;  padding:10px 20px;  font-size:1.25rem;  min-width:400px;  display:inline-block;  margin:50px auto 170px}

@media (max-width:959px){#interview-article-header .header-box{ position:relative;  left:0;  bottom:0;  top:0;  background:#fff;  padding:20px 20px 0;  max-width:100%;  width:100%}

#interview-article{ padding:0 20px;  background-color:#fff;  background-image:none}

#interview-article .article-text-l,
#interview-article .article-text-r{ width:100%;  order:3;  padding:0}

#interview-article .article-image-l,
#interview-article .article-image-r{ width:100%;  order:2;  padding-bottom:20px}

#interview-article .article-block{ padding:20px 0 0}

#interview-article .article-text-box{ max-width:100%}

#interview-article .article-text-l .article-text-box{ float:none}

#interview-article h3{ margin-bottom:10px;  font-size:1.25rem}

#interview-article-header h2{ font-size:min(5.3vw,22px);  margin:0 0 20px}

#talk-article .back-interview a{ display:block;  text-align:center;  background:#CF1126;  color:#fff;  padding:10px 20px;  font-size:1.25rem;  min-width:auto;  width:100%;  display:inline-block;  margin:10px auto 40px}

#interview-article .back-interview a{ display:block;  text-align:center;  background:#CF1126;  color:#fff;  padding:10px 20px;  font-size:1.25rem;  min-width:auto;  width:100%;  display:inline-block;  margin:50px auto 40px}

#interview-article-header .desc span{ font-size:1.25rem}

}

#about{  padding-bottom:0 !important}

#about .contents{  max-width:1240px;   margin:0 auto}

#about .works-line{  position:relative;   background-color:#CF1126;   background-image:url("../images/works-line.png");  background-repeat:no-repeat;  background-position:center top;  width:100%;  font-size:1.6vw;  padding:40px 20px;  text-align:center;  color:#fff;  line-height:1.95em;  font-size:1.5rem;  padding:28px 20px}

#about .works-wrapper{  padding-top:40px;   position:relative;   background-image:url("../images/works-line2.png");  background-repeat:repeat;  background-position:center top;  width:100%;  padding-bottom:60px}

#about .works-box{ border:#ccc solid 1px;  background:#fff;  padding-bottom:15px;  margin:0}

#about .hash{ width:calc(50% - 40px);  margin:0 20px 40px;  margin:0px 20px 40px;  padding-top:0px;  height:auto;  display:flex}

.works-box .flex-box2{ display:-webkit-flex;  display:-moz-flex;  display:-ms-flex;  display:-o-flex;  display:flex; -webkit-flex-direction:row; flex-direction: row; -webkit-flex-wrap:wrap; flex-wrap: wrap; -webkit-justify-content:flex-start; justify-content: flex-start; -webkit-align-items:stretch; align-items: stretch; -webkit-align-content:stretch; align-content: stretch}

#about .works-box .flex-box2 h2{ width:100%;  text-align:center; font-size:24px; font-weight:normal; line-height:60px; color:#454545; margin:30px auto}

#about .works-box .flex-box2 h2 img{ height:60px}

.works-box .flex-box2 .box-l{ width:50%;  -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 20px}

.works-box .flex-box2 .box-r{ width:50%;  -webkit-box-sizing:border-box; box-sizing:border-box;  border-left:#ddd solid 1px;  padding:0 20px;  line-height:13px}

.works-box .flex-box2 .min{ min-height:174px !important}

.works-box .flex-box2 .box-l h3{ padding:0 0 10px;  font-size:16px;  line-height:1.4em;  font-weight:600}

.works-box .flex-box2 .box-l div{  font-size:13px;  line-height:1.5em}

.works-box .flex-box2 .box-r a{ color:#cf1328;  font-size:11px}

.works-box .flex-box2 .box-r img.img_link{ display:inline-block;  height:14px; width:auto; position:relative; padding-right:4px}

#about .works-box iframe{ padding:20px 20px 0;  width:100%}

#about .movie-thum{ text-align:center;  padding:20px 20px 0;  width:100%}

.solution-a{padding:8px 20px; border:solid 1px #757575; display:inline-block; margin:10px 0 0; color:#333}

#about .happy h3{ background:#CF1126;  position:relative;  padding:0 text-align:center;  display:block;  text-align:center;  font-size:1.25rem;  color:#fff;  letter-spacing:0.15em;  font-weight:900;  padding:10px 20px;  margin:0 auto;  max-width:1200px;  margin-bottom:30px}

@media (max-width:959px){#about .works-wrapper{ padding-top:20px;  padding-bottom:40px}

#about .contents{ max-width:100%;  margin:0 auto;  padding:0}

#about .works-line{ font-size:15px;  line-height:1.9;  padding:30px 15px;  font-size:1.125rem;  padding:12px 20px}

#about .works-box{ padding:0;  margin:0}

#about .hash{ width:100%;  margin:0 20px 20px;  margin:0px 20px 20px;  padding-top:0px} /* 20230215 margin-80pxを0px padding-topを0px --- */

#about .works-box .flex-box2 h2{margin:10px auto 25px}

.works-box .flex-box1{ width:100%;  margin-bottom:15px}

.works-box .flex-box2{ width:100%;  padding-left:0}

.works-box .flex-box2 .box-l{ width:100%;  padding:0 20px;  margin-bottom:17px}

.works-box .flex-box2 .box-r{ width:100%;  border-left:none;  padding:0 20px 5px;  line-height:1.2em}

.works-box .flex-box2 .box-r a{ font-size:0.875rem;  line-height:1.5em;  padding-bottom:15px;  display:block}

.works-box .flex-box2 .box-l div{ font-size:0.9375rem;  line-height:1.8em}

#about .works-box iframe{ padding:0 7px;  margin:0;  width:100%}

#about .movie-thum{ text-align:center;  padding:0 7px 6px;  margin:0;  width:100%}

.solution-a{ padding:10px 20px;  border:solid 1px #757575;  display:inline-block;  margin:15px 0 5px;  color:#333}

#about .happy h3{ font-size:1.125rem;  padding:10px 20px;  margin-bottom:20px}


}

.company-title-area{background-color:#e6e6e6; text-align:center; height:220px}

.company-title{line-height:220px}

.company-title span{font-weight:normal; color:#000; font-size:25px; line-height:35px; padding:0 8px; border-bottom:solid 2px #000}

.company-info{max-width:1100px; margin:0 auto; display:-webkit-box;  display:-ms-flexbox; display:flex;  -webkit-box-pack:justify; -ms-flex-pack:justify;  justify-content:flex-start; align-items:flex-start; padding-top:25px; padding-bottom:40px}

.company-info-left{padding-left:5px; padding-right:5px;  width:130px}
.company-info-left img{ width:100%}

.company-info-left-blank{width:127px}

.company-info-right{width:calc(100% - 130px);  box-sizing:border-box; margin-left:45px}

.company-info-dl dt{padding-top:11px; padding-bottom:4px; padding-left:5px; width:100px; float:left; font-size:0.875rem; color:#000; line-height:26px; text-align:justify; text-justify:inter-ideograph; -moz-text-align-last:justify; text-align-last:justify; border-collapse:collapse}

.company-info-dl dt p{text-align:justify; text-justify:inter-ideograph}

.company-info-dl dd{padding-top:10px; padding-left:130px; padding-right:5px; padding-bottom:4px; margin-right:0; width:83%; border-top:dotted 1px #b9b9b9; font-size:0.875rem; color:#000; line-height:26px; border-collapse:collapse}

.company-info-dl dd:after{ content:'';  display:block;  clear:both}

.company-info-dl dt:first-child,
.company-info-dl dd:nth-child(2){border-top:none}

.c0{padding-top:5px; padding-bottom:5px; padding-left:5px; width:85px}

.inner-dl{display:flex; flex-wrap:wrap; width:100%; border:none; margin:0; padding:0}

.inner-dl-dd{width:50%; list-style:none; border:0px; box-sizing:border-box; margin:0; padding:0}

.inner-dl dd{width:50%; list-style:none; border:0px; box-sizing:border-box; margin:0; padding:0}

.inner-dl dd{width:50%; list-style:none; border:0px; box-sizing:border-box; margin:0; padding:0}

.company-info-dl dd a,
.inner-dl dd a{font-size:14px; color:#CF1126; line-height:21.141px; word-break:break-all}

.company-group-title{font-size:24px; font-weight:normal; margin-bottom:10px}

.company-border{max-width:90vw; width:1100px; height:1px; background-color: #ddd; margin:0 auto 30px}

.company-border.border-last{ margin-bottom:20px}

.company-dots{display:block; width:auto; margin-top:65px; margin-bottom:85px; margin-left:auto; margin-right:auto}

.back-to-top{color:#f00; font-size:15.3px; line-height:24.09px; text-decoration:none; display:block;  margin-top:0;  margin-bottom:95px;  margin-left:auto;  margin-right:auto;  text-align:center}

.company-entry-title{text-align:center}

.company-entry-title{text-align:center; margin-bottom:40px}

.company-entry-title img{padding:0 10px 10px; border-bottom:1px solid #000}

.company-entry-title span{color:#000; font-size:61px; font-weight:400; line-height:57.138px; padding:0 8px; border-bottom:solid 2px #000}

.company-entry-link{display:-webkit-box;  display:-ms-flexbox; display:flex;  -webkit-box-pack:justify; -ms-flex-pack:justify;  justify-content:center;  -webkit-justify-content:center; align-items:flex-start; margin-top:25px; margin-bottom:60px}

.company-entry-link-red{background-color:#f00; width:420px; height:80px; text-align:center; display:block; color:#fff; font-size:24px; text-decoration:none; line-height:80px}

.company-entry-link-gray{background-color:#666; width:420px; height:80px; text-align:center; display:block; color:#fff; font-size:24px; text-decoration:none; line-height:80px}

.company-entry-link-red i,
.comapny-entry-link-gray i{ font-size:30px}

@media (max-width:959px){.company-info{width:90%; flex-direction:column; align-items:center}

.company-info-left{margin-bottom:30px}

.company-info-right{width:100%;  padding-left:0;  box-sizing:border-box;  margin-left:0}

.inner-dl{flex-direction:column}

.inner-dl dd{width:100%}

.company-info-dl dt,
.company-info-dl dd,
.company-info-dl dd a,
.inner-dl dd a{font-size:12px}

.company-info-dl dd.kogaisha dl{margin-top:10px}
.company-info-dl dd.kogaisha dl dt{float:none; border:none; margin:0; padding:0; font-weight:bold; font-size:85%}
.company-info-dl dd.kogaisha dl dd{margin-left:0; padding-left:0; border:none}

 .company-border{ margin:0 auto}

 .company-info-dl dd{ width:100%}

 .company-info-dl dt{ width:80px}

 .company-info-dl dd{ padding-left:110px}

 .inner-dl dd{ padding-left:0 !important}

 #company h2{ margin-bottom:0}

 .company-group-title{ font-size:20px}

 .company-border.border-last{ margin-bottom:0}

}

.career-padding{ margin-top:-100px;  padding-top:100px}

.career-padding2{ margin-top:-100px;  padding-top:90px}

#career .contents h3{ background:#CF1126;  position:relative;  padding:0 text-align:center;  display:block;  text-align:center;  font-size:1.25rem;  color:#fff;  letter-spacing:0.15em;  font-weight:900;  padding:10px 20px;  margin-bottom:30px}

#career .step{ font-size:1.5rem;  line-height:2.5rem;  margin:20px auto;  padding:0 20px;  text-align:center}

#career .step span{ font-size:2rem;  color:#CF1126;  vertical-align:baseline;  font-weight:bold}

#career .step2{ line-height:2.5rem;  margin:20px auto;  padding:0 20px;  text-align:center;  font-size:2rem;  color:#CF1126;  vertical-align:baseline;  font-weight:bold;  margin-bottom:30px;  font-size:2.5vw}

#career .step3{ font-size:1.5rem;  margin:20px auto;  padding:0;  text-align:center;  line-height:1.8}

#about .align,
#career .align{ text-align:center}

#career .desc{ text-align:center;  color:#CF1126;  margin:20px auto 40px;  font-size:1rem}

#about .intro,
#career .intro{ margin:10px auto 40px; width:100%; margin-left:auto; margin-right:auto}

#about .intro p,
#career .intro p{text-align:center; letter-spacing:1px; line-height:1.8; max-height:100%;   font-size:1.125rem}

#career .concept p{text-align:center; letter-spacing:1px; line-height:1.8; max-height:100%}

#talk-link-career{  background:#f6f6f6;   width:100%;   position:relative;   min-height:440px}

@media (min-width:1201px){#talk-link-career{  min-height:443px}

}

#talk-link-career .talk-image{  position:absolute;   top:30px;   right:0;   width:60%;   z-index:1}

#talk-link-career .talk-banner{  position:absolute;   top:100px;   left:0;   width:50%;   z-index:2;   text-align:center}

#talk-link-career .talk-banner h3{  color:#CF1126;   font-family:'Roboto',sans-serif;   font-weight:900;   letter-spacing:0.1em;   font-size:min(6vw,74px);   line-height:1em;   text-align:center}

#talk-link-career .talk-banner h4{  font-size:1.25rem;   letter-spacing:0.1em;   padding:40px 0 20px}
#talk-link-career .talk-banner p{font-size:0.9375rem}

#talk-link-career .talk-banner-box{  width:100%;   background:#fff}

#talk-link-career .link{  position:relative;   width:320px;   display:inline-block;   margin:20px auto 40px}

#talk-link-career .link a{  display:inline-block;   border:solid #CF1126 1px;   padding:14px 20px;   font-size:1.125rem;   width:300px;   color:#CF1126}

#career p{  margin-bottom:1rem}

#career .flex-wrapper{  margin:40px auto;   padding:0 20px}

#career .step-box{  width:33.33%;   position:relative;   overflow:hidden}

#career .step-box img{  position:absolute;   left:0;   right:0;   margin:auto;   z-index:-1}

#career .step-box .text{  position:relative;   z-index:1;   margin-top:26vw;   text-align:center;   font-size:0.9375rem}

@media (min-width:1201px){#career .step-box .text{  margin-top:320px;   font-size:1.125rem}
}

#career .step-box .text span{  color:#CF1126}

#career .career-message-image{  width:40%;   background-image:url("../images/top-img3.jpg");  background-size:cover;  background-position:center top;  margin-bottom:20px}

#career .career-message-text{ width:60%;  color:#000;  padding:5px 0 0 4%;  text-align:left !important;  margin-bottom:20px}

#career .step2,
#career .career-message-text p{ text-align:left !important;  padding-left:0 !important}

@media (max-width:959px){.career-padding{ margin-top:-70px;  padding-top:70px}

.career-padding2{ margin-top:-40px;  padding-top:80px}

#talk-link-career{ min-height:calc(25vw + 250px)}

#talk-link-career .talk-image{ position:relative;  top:0;  right:0;  width:100%;  z-index:1;  padding:20px 0 0}

#talk-link-career .talk-banner{ position:relative;  top:0;  left:0;  width:100%;  z-index:2;  text-align:center}

#talk-link-career .talk-banner h3{ font-size:min(10vw,24px);  line-height:1em;  background:#fff;  padding:20px 0 0}

#talk-link-career .talk-banner h4{ font-size:4.6vw;  font-size:min(4.6vw,24px);  letter-spacing:0.1em;  padding:10px 0 0}
#talk-link-career .talk-banner p{ font-size:0.875rem;  padding:0 10px}
#talk-link-career .link{ width:80%;  margin:20px auto 30px}

#talk-link-career .link a{ width:100%}

#career .flex-wrapper{ margin:20px auto 0;  padding:0}

#career .step-box{ width:100%;  position:relative}

#career .step-box .text{ margin-top:310px;  font-size:0.9375rem;  margin-bottom:20px}

#career .step{ padding:0}

#career .step{ font-size:1.125rem;  line-height:2rem;  margin:20px auto;  padding:0;  text-align:center}

#career .step span{ font-size:1.5rem;  color:#CF1126;  vertical-align:baseline;  font-weight:bold}

#career .step2{ line-height:2rem;  margin:20px auto;  padding:0;  text-align:center;  font-size:1.25rem;  font-size:min(1.25rem,5.3vw);  color:#CF1126;  vertical-align:baseline;  font-weight:bold}

#career .step3{ font-size:1rem;  margin:20px auto;  padding:0;  text-align:center;  line-height:1.8}

#career .desc{ margin:0 auto 40px;  font-size:0.875rem}

#about .intro,
#career .intro{ margin:20px auto 20px}

#about .intro p,
#career .intro p{text-align:left; letter-spacing:1px; line-height:1.8; max-height:100%;  font-size:1rem;  padding:0 20px}

#career .concept p{text-align:left; letter-spacing:1px; line-height:1.8; max-height:100%;  font-size:0.875rem}

#career .contents h3{ font-size:1.125rem;  padding:10px 20px;  margin-bottom:20px}

#career .career-message-image{ display:none}

#career .career-message-text{ width:100%;  padding:0 20px;  margin-bottom:20px}

#career .step2{ text-align:center !important;  padding:0 !important;  margin-bottom:15px !important}


}

@media (max-width:480px){#career .step-box .text{ margin-top:61vw;  font-size:0.9375rem;  margin-bottom:30px}

#career .step-box img{ width:90%}

}

@media (min-width:700px) and ( max-width:959px){#career .step-box{ width:33.33%;  position:relative}

#career .step-box .text{ margin-top:25vw;  font-size:0.75rem;  margin-bottom:20px}


}

@media (min-width:960px){ footer .corp a:hover, footer .corp2 a:hover, footer .corp3 a:hover, #talk-link .link a:hover, #talk-link-career .link a:hover, #interview-index .link a:hover, #career-path .link a:hover, #business .link a:hover{ background:#fafafa}

footer .entry-box .entry1 a:hover img,
footer .entry-box .entry2 a:hover img,
footer .entry-box .entry3 a:hover img,
footer .sitemap-entry a:hover img{ opacity:0.7}

}

.talk-box i{ font-size:0.875rem;  color:#1976d2}

.talk-box-hr{ margin: 40px auto 80px}

@media (max-width:959px){
  .talk-box-hr{ margin: 40px auto 60px}
}