/* ------------------------------------------------------------------------------
  共通
-------------------------------------------------------------------------------*/

:root {
    /**** color ****/
    --Black: #000;
    --White: #FFFFFF;
    --Red: #E60012;
    --Gray: #CECECE;
    --LightGray: #F5F5F5;
    --Cream: #FAFAFA;
    /**** font ****/
    --fontMin: 'Noto Serif JP', serif !important;
    --fontGoth: 'Noto Sans JP', serif !important;
    --fontSize_4l: 50px;
    --fontSize_3l: 28px;
    --fontSize_2l: 22px;
    --fontSize_lg: 20px;
    --fontSize_md: 16px;
    --fontSize_sm: 14px;
    --fontSize_xs: 12px;
    --fontSize_xxs: 10px;
    --fontMain: 14px;
    color: var(--Black);
    font-family: var(--fontGoth);
}
body {
    padding-top: 0 !important;
    line-height:2rem;
    font-size: var(--fontSize_md);
}

.bodyFade {
    display: none;
}

a {
    transition: .3s;
}
th,
dt {
    font-weight: normal;
}
.fontMin {
    font-family: var(--fontMin);
}
.fontGoth: {
    font-family: var(--fontGoth);
}
.fontSize_4l {
    font-size: var(--fontSize_4l);
}
.fontSize_3l {
    font-size: var(--fontSize_3l);
    line-height: 3.5rem;
}
.fontSize_2l {
    font-size: var(--fontSize_2l);
}
.fontSize_lg {
    font-size: var(--fontSize_lg);
}
.fontSize_md {
    font-size: var(--fontSize_md);
}
.fontSize_sm {
    font-size: var(--fontSize_sm);
}
.fontSize_xs {
    font-size: var(--fontSize_xs);
}
.fontSize_xxs {
    font-size: var(--fontSize_xxs);
}
.txt-l {
  text-align: left !important;
}
.txt-r {
  text-align: right !important;
}
.txt-c {
  text-align: center !important;
}
/*
@media screen and (max-width: 414px) {
    body {
    }
    .fontSize_4l {
        font-size: var(--fontSize_lg);
    }
    .fontSize_lg {
        font-size: var(--fontSize_sm);
    }
    .fontSize_2l {
        font-size: 24px;
    }
}
*/
h2 {
    font-size: var(--fontSize_2l);
}
h2 span{
    display: block;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fontMin);
}
img {
    display: block;
    max-width: 100%;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid var(--Gray);
  clear: both;
}
.el_Black,
.el_Black a {
    color: var(--Black) !important;
    transition: .3s;
}
.el_White,
.el_White a{
    color: var(--White);
    transition: .3s;
}
.el_Red,
.el_Red a,
a.el_Red {
    color: var(--Red);
    transition: .3s;
}

.el_Black a:hover,
a.el_Black:hover,
.el_Red a:hover,
a.el_Red:hover,
.el_White a:hover,
a.el_White:hover {
    transition: .3s;
}
/*
.el_White a:hover,
a.el_White:hover {
    color: var(--Black);
    transition: .3s;
}
.el_Red a:hover,
a.el_Red:hover {
    color: var(--Black);
    transition: .3s;
}
*/
.el_titleWhite,
.el_titleBlack {
    position: relative;
    margin-bottom: 80px;
    padding-bottom: 20px;
    text-align: center;
}
.el_titleWhite{
    color: var(--White);
}
.el_titleBlack {
    color: var(--Black);
}
.el_titleWhite:before,
.el_titleBlack:before {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 45px;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--Black);
}
.el_underBarBlack,
.el_underBarWhite {
    position: relative;
}
.el_underBarBlack:after,
.el_underBarWhite:after {
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 45px;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--Black);
}
.el_titleWhite:before,
.el_underBarWhite:before {
    background-color: var(--White);
}
.el_titleBlack:before
.el_underBarBlack:before {
    background-color: var(--Black);
}

.el_titleWhite span,
.el_titleBlack span {
    font-size: var(--fontSize_sm);

}
.el_titleTri,
.widgettitle {
    font-size: var(--fontSize_lg);
    font-family: var(--fontMin);
    padding-left: 25px;
}
.el_titleTri::before,
.widgettitle::before {
    position: absolute;
    margin-top: -25px;
    width: 0;
    height: 51.95px;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(231,0,18,1);
}
.el_border {
    border: solid 1px var(--Black);
}
.el_link {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    display: inline-block;
    margin-top: 50px;
    font-family: var(--fontMin);
    width: 150px;
    transition: .3s;
}
.el_linkL {
    width: 280px;
    transition: .3s;
}

.el_link:hover {
    transition: .3s;
    width: 150px;
}
.el_linkL:hover {
    transition: .3s;
    width: 280px;
}
.el_externalLink {
    background-image: url(../img/icon-link.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 14px;
    padding-right: 18px;
    transition: .3s;
}
.el_linkArrow  {
    width: 100%;
    height: 15px;
    border-bottom: 1px solid var(--White);
    border-right: 1px solid var(--White);
    transform: skew(45deg);
    margin: -10px 0 0 -10px;
    min-width: 150px;
    transition: .3s;
}

.el_linkArrow:hover  {
    transition: .3s;
}

.el_Red .el_linkArrow  {
    border-bottom: 1px solid var(--Red);
    border-right: 1px solid var(--Red);
    transition: .3s;
}
.el_Black .el_linkArrow  {
    border-bottom: 1px solid var(--Black);
    border-right: 1px solid var(--Black);
    transition: .3s;
}
/*
.el_Black .el_linkArrow :hover {
    border-bottom: 1px solid var(--Red);
    border-right: 1px solid var(--Red);
}
*/
.el_shadowWhite {
    text-shadow: 0px 0px 4px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff;
}
.bl_displayCenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
    max-width: 200px;
    transition: .3s;
}
.bl_displayRight {
    display: block;
    margin-right: 0;
    margin-left: 50%;
    max-width: 150px;
    z-index: 100;
    transition: .3s;
}
.bl_floatLeft {
    float: left;
    width: 25%;
    padding-right: 5px;
}
.bl_floatRight {
    float: right;
    width: 75%;
    padding-left: 5px;
}
.bl_justify {
    display: flex;
    justify-content: space-between;
}
#pageTop {
    background-color: #000;
    padding: 6px 9px;
    position:fixed;
    bottom:100px;
    right:20px;
    z-index:101;
    text-align: center;
    border-radius: 50px;
    font-size: var(--fontSize_xs);
}
#pageTop a{
    color: var(--White);
    display: block;
}

.pageTopArrow {
    position: fixed;
    bottom: 100px;
    right: -10px;
    width: 11px;
    height: 60px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: skewY(135deg);
    margin: 10px 50px 0 30px;
    z-index:100;
}
.fadeInUp {
    opacity: 0;
    transition-duration: 1s;
    transform: translateY(150px);
    -webkit-transition: 2s;
    transition: .1s;
}
.effect {
    transform: translateY(0);
    opacity: 1;
    -webkit-transition: 1s;
    transition: 1s;
}
.el_vertical-rl {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 80%;
}
@media (max-width: 414px) {
    .bl_displayRight {
        margin-left: 20%;
    }
    .el_linkL {
        width: 230px;
    }
    .el_vertical-rl {
        width: 100%;
        line-height: 40px;
    }
}


.el_pc {
    display: none;
}
.el_sp {
    display: block;
}

/* ------------------------------------------------------------------------------
  レイアウト
-------------------------------------------------------------------------------*/
section {
    clear: both;
}
.ly_MainVisual {
    height: 100vh;
}

.ly_container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
@media (min-width: 768px) {
  .ly_container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .ly_container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .ly_container {
    width: 1170px;
  }
}
.ly_titleArea {
    height: 500px;
    background-size:cover;
    position:relative;
    height: 70vh;
}
.ly_titleArea h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    text-shadow: 0px 0px 7px #555;
    text-align: center;
}

.ly_colLeft {
    width: 100%;
}
.ly_colRight {
    width: 100%;

}
.ly_colLeftLg {
    width: 100%;
}
.ly_colRightSm {
    width: 100%;
    position: relative;
}
.ly_colPush {
    position: relative;
    z-index: 2;
    padding-right: 0;
}
.ly_colPull {
    position: relative;
    z-index: 1;
    padding-left: 0;
}
.ly_colLeft .outer,
.ly_colRight .outer {

}


.ly_colShort {
    width: 70%;
}
.ly_colShort dt,
.ly_colShort dd {
    padding:10px;
}
.bl_col2 {
    padding: 0;
}
.bl_col2 li {
    float: left;
    width: 50%;
    padding :5px;
    position:relative;
    transition: .3s;
}
.bl_col3 li {
    float: left;
    width: 50%;
    padding :14px;
    position:relative;
    transition: .3s;
}
.bl_col4 li {
    float: left;
    width: 25%;
    padding :7px;
    position:relative;
    transition: .3s;
}
.bl_block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.el_section {
    padding-top:60px;
    padding-bottom:60px;
 }

.el_rect {
    width : 100% ;
    padding-top : 100% ;
}
.el_WhiteBg {
    background-color:var(--White);
}
.el_RedBg {
    background-color:var(--Red);
    color:var(--White);
}
.el_RedBg q{
    color:var(--White);
}
.el_GrayBg {
    background-color:var(--Gray);
}
.el_LightGrayBg {
    background-color:var(--LightGray);
}
.el_CreamBg {
    background-color:var(--Cream);
}

.el_RedBorder {
    border: solid 1px var(--Red);
}
.el_RedBorderRight {
    border-bottom: solid 1px var(--Red);
}
/* ------------------------------------------------------------------------------
  ヘッダー
-------------------------------------------------------------------------------*/
header {
    position: fixed;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    z-index: 100;
    transition: .5s;
}
header.fixed {
    background-color: rgb(0,0,0,.7);
    transition: .5s;
}
h1 {
    display: inline-block;
    width: 75%;
}
.logo {
    width: 60%;
    display: block;
    padding-top: 15px;
    transition: .5s;
}
header.fixed .logo {
    padding-top: 13px;
    transition: .5s;
}
header nav {
    float: right;
    display: none;
}
header nav ul{
    display: flex;
    justify-content: space-between;
}
header nav li{
    margin-top: 37px;
    padding-left: 30px;
    font-family: var(--fontMin);
    transition: .5s;
}
header.fixed nav li{
    margin-top: 20px;
    transition: .5s;
}
header nav li:last-child {
    margin-top: 31px;
    padding-left: 0;
    transition: .5s;
}
header.fixed nav li:last-child {
    margin-top: 14px;
    transition: .5s;
}
header nav li:last-child a{
    border: solid 1px var(--White);
    padding-right: 0;
    padding-left: 0;
    margin-left: 30px;
    transition: .3s;
}
header nav li a {
    color: var(--White);
    position: relative;
    display: inline-block;
    text-decoration: none;
}
header nav li a::after {
    position: absolute;
    bottom: 2px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--White);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
header nav li a:hover::after ,
header nav li a.active::after {
    bottom: -4px;
    opacity: 1;
    visibility: visible;
}

header nav li:last-child a {
    padding: 5px 30px;
}
header nav li:last-child a:hover {
    color: var(--Black);
    background-color: var(--White);
    transition: .3s;
}
header nav li:last-child a:hover::after{
    bottom: 2px;
    opacity: 0;
    visibility: hidden;
}
/* ------------------------------------------------------------------------------
  トップページ
-------------------------------------------------------------------------------*/
video {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    object-fit: cover;
    width: 100%;
    background-image: url(../img/mainTop.jpg);
}
#TopPage {
    background-position: center bottom;
    background-size: cover;
    background-repeat:no-repeat;
    height: 100vh;
    color: var(--White);
    position: relative;
}
#TopPage h2{
    font-size:50px;
    font-family: var(--fontMin);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 100%;
    text-align: left;
    line-height: 3.2rem;
    z-index: 10;
    position: absolute;
    bottom: 20px;
}
#TopPage h2 span{
    font-size: var(--fontSize_lg);
    display: block;
    min-height: 280px;
}

#TopPage .bl_tri{
    /* clip-path: polygon(100% 75%, 0% 100%, 100% 100%); */
    background-color: #4cb947c2;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 110%;
    width: 100%;
    z-index: 0;
}
#TopPage .outer{
}
#TopPage .inner{
    position: relative;
    height: 100vh;
}
.topLeadImg{
    background-image: url(../img/TopLeadImg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    color: var(--White);
}
.topLeadImgSp{
    background-image: url(../img/TopLeadImg.jpg);
    background-position: left -100% top;
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 100%;
    line-height: 50px;
    height: 80vh;
    width: 100%;
    margin-bottom: 100px;
}
.topLeadImgSp h2 {
    font-size: 50px;
    height: 100%;
}
.topLeadImgSp h2 span{
    display: block;
    margin: 0px 40px ;
    text-align:right;
}
#product {
    background-image: url(../img/productBg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}
#tips {
    background-image: url(../img/tipsBg.png);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    color: var(--White);
}
#company {
    background-image: url(../img/companyBg.jpg);
    background-position: 70% top;
    background-size: cover;
    background-repeat:no-repeat;
    color: var(--White);
}
#recruitBg {
    background-image: url(../img/recruitBg.jpg);
    background-position: 40%;
    background-size: cover;
    background-repeat:no-repeat;
    min-height: 300px;
}
#works {
    background-image: url(../img/worksBgSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}

#request {
    background-image: url(../img/requestBg.jpg);
    background-position: right;
    background-size: cover;
    background-repeat:no-repeat;
}
#privacy {
    background-image: url(../img/privacyBg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}
#tips .inner,
#works .inner {
    padding: 0 15px;
    margin: 0;
}
#company .inner {
    padding: 0 15px;
    margin: 0;
}
#calendar .inner {
    padding: 0 15px;
    margin: 0 auto;
}
#calendar .inner {
    max-width: 450px;
}
.bl_cat li {
    float: left;
    width: 50%;
    padding :1px;
    position:relative;
    text-align: center;
    transition: .3s;
}
.bl_cat li a{
    display: block;
    width: 100%;
    min-height: 150px;
    padding-top: 40%;
    font-family: var(--fontMin);
}
.bl_catImg01,
.bl_catImg02,
.bl_catImg03,
.bl_catImg04,
.bl_catImg05,
.bl_catImg06,
.bl_catImg07,
.bl_catImg08,
.bl_catImg09 {
    background-position: center top 33%;
    background-size: 80%;
    background-repeat:no-repeat;
    border: solid 5px var(--White);
}
.bl_catImg01:hover,
.bl_catImg02:hover,
.bl_catImg03:hover,
.bl_catImg04:hover,
.bl_catImg05:hover,
.bl_catImg06:hover,
.bl_catImg07:hover,
.bl_catImg08:hover,
.bl_catImg09:hover {
    background-size: 70%;
    border: solid 5px var(--Red);
    transition: .3s;
}
.bl_catImg01 {
    background-image: url(../img/catImg01.png);
}
.bl_catImg02 {
    background-image: url(../img/catImg02.png);
}
.bl_catImg03 {
    background-image: url(../img/catImg03.png);
}
.bl_catImg04 {
    background-image: url(../img/catImg04.png);
}
.bl_catImg05 {
    background-image: url(../img/catImg05.png);
}
.bl_catImg06 {
    background-image: url(../img/catImg06.png);
}
.bl_catImg07 {
    background-image: url(../img/catImg07.png);
}
.bl_catImg08 {
    background-image: url(../img/catImg08.png);
}
.bl_catImg09 {
    background-image: url(../img/catImg09.png);
}
/*
.bl_catImg08 {
    background-image: url(../img/catImg08.png);
    background-position: center top 33%;
    background-size: 10%;
    background-repeat:no-repeat;
}
.bl_catImg08:hover {
    background-size: 20%;
}
*/
.bl_info {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.bl_info dt {
    padding-top: 25px;
    font-size: var(--fontSize_xs);
    font-weight: 600;
 }
.bl_info dd {
    border-bottom: solid 1px var(--LightGray);
    padding-bottom: 25px;
 }

.el_newsTag {
    color: var(--White);
    background-color: var(--Red);
    padding: 0 15px 2px 15px;
    font-family: var(--fontMin);
    border: solid 1px var(--Red);
    margin-left: 20px;
    font-weight: normal;
    font-size: var(--fontSize_xxs);
}
.el_blogTag {
    color: var(--Red);
    background-color: var(--White);
    padding: 0 15px 2px 15px;
    font-family: var(--fontMin);
    border: solid 1px var(--Red);
    margin-left: 20px;
    font-weight: normal;
    font-size: var(--fontSize_xxs);
}
.el_tipsTag {
    color: var(--White);
    background-color: var(--Red);
    padding: 0 15px 2px 15px;
    font-family: var(--fontMin);
    border: solid 1px var(--Red);
    font-weight: normal;
    font-size: var(--fontSize_xxs);
}
.el_news_blogTag {
    color: var(--Red);
    background-color: var(--White);
    padding: 0 15px 2px 15px;
    font-family: var(--fontMin);
    border: solid 1px var(--Red);
    font-weight: normal;
    font-size: var(--fontSize_xxs);
}
/* ------------------------------------------------------------------------------
  下層ページ
-------------------------------------------------------------------------------*/
.ly_pageNavi,
.ly_pageNavi2 {
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    background-color:var(--Cream);
    font-size: var(--fontSize_sm);
}
.ly_fixedNavi{
    width: 100%;
    transition: .3s;
}
.ly_fixedNavi.fixed{
    position: fixed;
    top: 45px;
    max-width: 1140px;
    transition: .3s;
    z-index: 3;
}
.ly_pageNavi li {
    text-align: center;
    margin: 5px 0 5px -10px;
    width: 50%;
    float: left;
    position: relative;
}
.ly_pageNavi li:nth-child(odd) {
    border-right: solid 1px var(--Black);
}
.ly_pageNavi li a{
    display: block;
}
.ly_pageNavi li a:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f13a";
    right: 10px;
    margin: 0 0 0 10px;
    font-weight: 900;
    position: absolute;
    right: 10%;
}

.ly_pageNavi2 li a:after {
    font-family: 'Font Awesome 5 Free';
    content: "\f13a";
    margin: 0 0 0 10px;
    font-weight: 900;
}

.ly_pageNavi2 li {
    text-align: left;
    margin: 15px 0 15px 15px;
    width: 100%;
    position: relative;
    padding: 10px 10px 0 10px;
}
.bl_btn {
    position: relative;
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
}
.bl_btn a{
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    transition: .3s;
}
/*.bl_btn a:after {
    content: "";
    display: block;
    width: 40%;
    height: 10px;
    border-bottom: 1px solid #f8b3b8;
    border-right: 1px solid #f8b3b8;
    transform: skew(45deg);
    margin: -10px 0 0 -10px;
    min-width: 100px;
    transition: .3s;
    position: absolute;
    right: -50px;
    top: 27px;
}

.bl_btn a:hover {
    transition: .3s;
    padding-left: 30px;
}
.bl_btn a:hover:after {
    right: -80px;
    transition: .6s;
}
*/
.bl_btnWc {
    position: relative;
    display: block;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    transition: .3s;
}
.bl_btnWc a{
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    transition: .3s;
    font-family: var(--fontMin);
}
.bl_btnWc a::after{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../img/catalog.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-left: 10px;
    transition: .3s;
}
.bl_btnWc a:hover::after{
    width: 40px;
    transition: .3s;
}

/* ------------------------------------------------------------------------------
  事業内容
-------------------------------------------------------------------------------*/
.bl_Bg1 {
    position: absolute;
    background-color: var(--Cream);
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
}
.bl_leftBg {
    position: absolute;
    background-color:var(--Cream);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.bl_rightBg {
    position: absolute;
    background-color:var(--Cream);
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
}
.bl_fullLeft,
.bl_fullRight  {
    border-left: solid 15px var(--Cream);
    border-right: solid 15px var(--Cream);
    border-bottom: solid 1px var(--Cream);
}
.bl_fullLeft.elsection {
    padding-top: 20px;
    padding-bottom: 20px;
}
/* Addition 04/08 */
.bl_fullLeft-sp{
	position: relative;
}
.bl_fullLeft-sp::before{
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: black;
	opacity: 0.4;
}
.bl_fullLeft-sp div,
.bl_fullLeft-sp h3{
	position: relative;
	z-index: 1;
}
.bl_fullLeft-sp .inner{
	text-shadow: 0 0 3px black;
}
/* /Addition 04/08 */
.bl_fullLeft .inner {
    padding: 15px;
    margin: 0;
}
.bl_fullRight .inner {
    padding: 15px;
    margin: 0;
}
.bl_worldMap {
    position: absolute;
    max-width: 80%;
    left: 20%;
    z-index: 2;
    top: -15%;
    right: 0;
}
#productBanner {
    /*margin-top: 150px;
    margin-bottom: 150px;*/
}
#productBanner .ly_colLeft {
    width: 30%;
    float: left;
}
#productBanner .ly_colRight {
    width: 70%;
    float: left;
}

#series #popup{
    width:30%;
    line-height:100px;
    background:#000;
    padding:0 4%;
    box-sizing:border-box;
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#series {}

.popup_wrap input {
    display: none;
}

.popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
}

.popup_trigger {
    position: absolute;
    width: 100%;
    height: 100%;
}

.popup_content {
    position: relative;
    align-self: center;
    width: 90%;
    max-width: 800px;
    padding: 30px 30px 15px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
}

.close_btn {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 30px;
    cursor: pointer;
}

.popup_wrap input:checked ~ .popup_overlay {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s;
}

.open_btn {
    position: relative;
    cursor: pointer;
    transition: .3s ease;
    background-position: center 35%;
    background-repeat: no-repeat;
    background-size: 90%;
    min-height: 160px;
    display: table;
    width: 100%;
}
.open_btn:hover{
    transition: .3s ease;
}
.open_btn h5 {
    display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    padding-top: 20px;
}
/* ------------------------------------------------------------------------------
  会社情報
-------------------------------------------------------------------------------*/

#greeting {
    position: relative;
}
#greeting .bl_block{
    width: 97%;
    font-family: var(--fontMin);
    font-size: var(--fontSize_md);
    padding: 5%;
    right: 0;
    margin-top: -50px;
    margin-right: 0;
}
#greeting dt,
#greeting dd{
}
#greeting dt {
    font-weight: normal;
    width: 25%;
    border-right: solid 1px var(--White);
    padding: 8% 0;
}
#greeting dd {
    padding-left: 40px;
    width: 75%;
}
#keieihoushin {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    border-right: solid 15px var(--White);
    position: relative;
}
#philosophy .bl_col4 li ol li {
    float: none;
    width: 100%;
}
#philosophy .bl_col4 li {
    float: none;
    width: 100%;
    padding: 50px;
    margin-bottom: 60px;
}
#philosophy .bl_col4 li:last-child {
    margin-bottom: 0px;
}
#philosophy .bl_col4 li ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
}

#philosophy .bl_col4 li ol li {
    padding-left: 30px;
    position: relative;
    line-height: 18px;
    padding-top: 6px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#philosophy .bl_col4 li ol li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    display: block;
    float: left;
    line-height: 14px;
    margin-left: -18px;
    text-align: center;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    border: solid 1px;
    font-size: 10px;
    padding-left: 1p;
}

.bl_circleBg {
    opacity: .1;
    background-color:var(--Red);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 400px;
    height: 400px;
}
@media screen and (max-width: 400px) {
    #philosophy .bl_col4 li {
        margin-bottom: 20px;
    }
    .bl_circleBg {
        width: 350px;
        height: 350px;
    }
}
@media screen and (max-width: 350px) {
    #philosophy .bl_col4 li {
        margin-bottom: 10px;
        padding: 30px;
    }
    .bl_circleBg {
        width: 300px;
        height: 300px;
    }
}
#behavioral {
    background-color:var(--Red);
    color:var(--White);
    padding: 50px 0;
}
#behavioral ol{
    padding-left: 30px;
}
#behavioral .ly_colLeft {
    padding-right: 25px;
    width: 25%;
    float: left;
}
#behavioral .ly_colRight {
    padding: 25px !important;
    width: 75%;
    float: right;
    border-left: solid 1px var(--White);
}

#behavioral ul li{
    /*list-style-type: decimal;*/
    text-align:center;
    margin-bottom: 20px;
}
#behavioral .outer{
  display: table;
  width: 100%;
}
#behavioral .inner{
  display: table-cell;
  vertical-align: middle;
}

#profile {}


table {
    width: 100%;
}
tr {
}
th {
    padding: 10px;
    background-color:var(--Cream);
    text-align:center;
}
td {
    padding: 30px;
    text-align:center;
}

.el_tableNoColor th {
    background-color: transparent;
}

@media screen and (max-width: 414px) {
    .bl_gaiyou dt {
        width: 70px;
    }
    .bl_gaiyou dd {
        padding-left: 10px;
         width: 200px;
     }
}

#history dl {
    margin-top: 40px;
    margin-bottom: 40px;
}
#history dt {
    font-weight: normal;
    padding-bottom: 0px;
 }
#history dd {
    padding-bottom: 30px;
 }

/* ------------------------------------------------------------------------------
  プライバシーポリシー
-------------------------------------------------------------------------------*/
.privacyList {

}
.privacyList dt,
.privacyList dd {
    border-bottom: solid 1px var(--Gray);
}
.privacyList dt {
    padding: 15px 0;
}
.privacyList dd {
    padding: 15px 0;
}

.privacyList table {
    border-bottom: none;
}
.privacyList tr {
    border-top: none;
}
.privacyList th {
    width: 100%;
    padding: 0;
    background-color:none;
    display: block;
    text-align:left !important;
}
.privacyList td {
    width: 100%;
    padding: 0;
    display: block;
    padding-left:20px;
    text-align:left !important;
}
.privacyList th:before {
    content: "■";
    padding-right: 4px;
    color: var(--Black);
    margin-left: 4px;
}
.privacyList tr:first-child th:before {
    content: "";
    padding-right: 0;
    margin-left: 0;
}

.privacyList dt:first-of-type {
    border-bottom: none;
}
.privacyList dd:last-of-type {
    border-bottom: none;
}
 /* ------------------------------------------------------------------------------
  採用情報
-------------------------------------------------------------------------------*/
.el_zoom {
    background-size: 120%;
    transition: .3s;
    min-height: 200px;
}
.el_zoom:hover {
    background-size: 140%;
    transition: .3s;
}
#voice li {
    border-bottom: solid 1px var(--White);
}
#voice li:nth-child(odd) {
    border-right: solid 1px var(--White);
}

#new th,
#career th,
#parttime th {
    padding: 0 10px;
    width: 100%;
    display: block;
    text-align:center;
    background-color: var(--Cream);
}
#new td,
#career td,
#parttime td {
    padding: 10px;
    text-align:left;
    width: 100%;
    display: block;
}
 /* ------------------------------------------------------------------------------
  フッター
-------------------------------------------------------------------------------*/
footer {
}
#footer {
    background-image: url(../img/footerBgSp.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    font-size: var(--fontSize_sm);
}
#footer a{
    color: var(--White);
    transition: .3s;
}
#footer a:hover{
    opacity: .8;
    transition: .3s;
}
.footerLogo img {
    width: 60%;
    margin-bottom: 30px;
}
.ly_footerLeft {
    width: 100%;
    padding: 0 5%;
}
.ly_footerRight {
    width: 100%;
    padding: 0 5%;
    text-align:center;
}

.ly_footerRight .txt-r {
    text-align:center !important;
}
.ly_footerRight p:last-child {
    margin-top: 60px !important;
}

.ly_footerLeft .outer{
    min-height: 350px;
}
.ly_footerNavi {
    display: none;
}
.ly_footerRight li {
    float: left;
    width: 20%;
}
.ly_footerRight li ul li{
    float: none;
    width: 100%;
}
.footerLink {
    font-size: 13px;

}
.footerLink:before {
    content: "-";
    padding-right: 4px;
    color: var(--White);
    margin-left: 4px;

}
.bl_BtnContact {
    border: solid 1px var(--White);
    color: var(--Red) !important;
    background-color: var(--White);
    display: block;
    text-align:center;
    font-family: var(--fontMin);
    width: 100%;
    margin-top: 25px;
    padding: 15px;
}
.bl_BtnPhone {
    border: solid 1px var(--White);
    color: var(--White);
    display: block;
    text-align:center;
    font-family: var(--fontMin);
    font-size: var(--fontSize_2l);
    width: 100%;
    margin-bottom: 10px;
    padding: 15px;
}
footer h3{
   font-family: var(--fontGoth) !important;
}
@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?2937468');
    src: url('../font/fontello.eot?2937468#iefix') format('embedded-opentype'),
    url('../font/fontello.woff?2937468') format('woff'),
    url('../font/fontello.ttf?2937468') format('truetype'),
    url('../font/fontello.svg?2937468#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
.demo-icon {
    font-family: "fontello";
    font-style: normal;
    font-size: 27px;
    /*font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;*/
}

/* ------------------------------------------------------------------------------
  カレンダー
-------------------------------------------------------------------------------*/
.xo-event-calendar table.xo-month {
    border: none !important;
}
.xo-event-calendar {
    position: relative;
    padding: 10px 30px !important;
}
.xo-event-calendar table.xo-month th,
.xo-event-calendar table.xo-month td {
    border: none !important;
}
.xo-event-calendar table {
    color: var(--Black) !important;
}
.xo-event-calendar table.xo-month > thead th.sunday,
.xo-event-calendar table.xo-month > thead th  {
    color: var(--Black) !important;
    background-color: var(--LightGray) !important;
}
.xo-event-calendar table.xo-month .month-next {
    float: none !important;
}
.xo-event-calendar table.xo-month > caption {
    text-align:left !important;
}
.xo-event-calendar table.xo-month .month-dayname td div.today {
    color: var(--Black) !important;
}
.xo-event-calendar table.xo-month .month-dayname td div {
    text-align: center;
    line-height: 1.9em;
    border-width: 0 !important;
}
.xo-event-calendar table.xo-month .month-dayname-space {
    border-top: solid 1px var(--LightGray) !important;
    margin: 2px 0 -5px 0 !important;
}
.xo-event-calendar table.xo-month .month-dayname td {
    padding: 5px !important;
}
.holiday-all {
    color: var(--Red) !important;
}
.xo-event-calendar table.xo-month button span.nav-next {
    background-position: center top 7px;
    background-size: 7px 10px !important;
}
.xo-event-calendar table.xo-month button span.nav-prev {
    background-size: 7px 10px !important;
}
.holiday-titles {
    display: none !important;
}

/* ------------------------------------------------------------------------------
  WEBカタログ
-------------------------------------------------------------------------------*/
.ctrl .fnavbar .fnav .fnav-item>a {
    font-size: 24px !important;
}

/* ------------------------------------------------------------------------------
  投稿ページ
-------------------------------------------------------------------------------*/
.ly_paginations {
    padding: 0 0 100px 0;
    position: relative;
}
.pagination {
    /*position: absolute;
    left: 50%;
    transform: translateX(-50%);*/
}
.page-numbers li {
    border-top: solid 1px var(--Gray);
    border-bottom: solid 1px var(--Gray);
    border-left: solid 1px var(--Gray);
    background-color: var(--White);
    float: left;
    font-size: var(--fontSize_xs);
    transition: .3s;
}
/*
.page-numbers li:hover {
    border-top: solid 1px var(--Red);
    border-bottom: solid 1px var(--Red);
    border-left: solid 1px var(--Red);
    background-color: var(--Red);
    transition: .3s;
}
*/
.page-numbers li a {
    display: block;
    padding: 3px 10px;
    background-color: var(--White);
    transition: .3s;
}
.page-numbers li a:hover {
    color: var(--White);
    background-color: var(--Red);
    transition: .3s;
}
li .page-numbers.current {
    color: var(--White);
    background-color: var(--Red);
    border-top: solid 1px var(--Red);
    border-bottom: solid 1px var(--Red);
    border-left: solid 1px var(--Red);
    transition: .3s;
    padding: 2px 10px;
    height: 100%;
    display: block;
}
.page-numbers li:last-child {
    border-right: solid 1px var(--Gray);
}
.bl_linkPrev a,
.bl_linkNext a,
.bl_linkListtop a{
    border: solid 1px var(--Gray);
    background-color:var(--White);
    padding: 15px 5px;
    margin: 50px 1px;
    font-family: var(--fontMin);
    font-size: var(--fontSize_sm);
    transition: .3s;
}
.bl_linkPrev a:hover,
.bl_linkNext a:hover,
.bl_linkListtop a:hover{
    border: solid 1px var(--Red);
    background-color:var(--Red);
    transition: .3s;
    color:var(--White);
}
.el_listImg {
    width: 100% !important;
    height: 120px !important;
    overflow:hidden;
}
.el_listImg img{
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    transition: .3s;
    overflow:hidden;
}
.el_listImg img:hover {
    transform:scale(1.2,1.2);
    transition:.3s all;
}
#categories-4 {
    padding-top: 50px;
    padding-bottom: 80px;
    border-bottom: solid 1px var(--Gray);
}
#jal_widget-2 {
    padding-top: 80px;
}
#categories-4 .widgettitle,
#jal_widget-2 .widgettitle {
    padding-bottom: 40px;
}

#categories-4 li,
#jal_widget-2 li {
    margin-left: 30px;
}

/* 月別アーカイブ展開表示 */
a.jaw_months{
    margin-left:1px;
}
a.jaw_years:after {
    content: '年';/* 年を西暦の後ろに追加 */
}
a.jaw_years:after {
    content: "＋"; /* +のアイコン */
    margin-right: 1px;
    display: inline-block;
    color: var(--Red);
    position: absolute;
    right: 0;
    transition: .3s;
}
.expanded a.jaw_years:after {
    content: "−"; /* －のアイコン */
    display: inline-block;
    color: var(--Gray);
    position: absolute;
    right: 0;
    transition: .3s;
}

.ly_colRightSm .menu li li {
    padding-bottom: 20px;
}



ul.accordion ul{ /* アコーディオン部 */
    margin: 5px 0 30px 15px;
}
ul.accordion ul.hide{ /* アコーディオン非表示 */
    display: none;
}
ul.accordion li{ /* リセット */
    list-style: none;
    background: none;
    padding: 0;
}
ul.accordion li p{ /* リセット */
    margin: 0;
}
ul.accordion li p span{ /* アイコン背景 */
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    background: #09c;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: -2px;
}
ul.accordion li p span:before{ /* アイコン横棒 */
    content:'';
    height: 1px;
    width: 9px;
    display: block;
    background: #fff;
    position: absolute;
    top: 7px;
    left: 3px;
}
ul.accordion li p span:after{ /* アイコン縦棒（閉じてるとき） */
    content: '';
    height: 9px;
    width: 1px;
    display: block;
    background: #fff;
    position: absolute;
    top: 3px;
    left: 7px;
}
ul.accordion li p span.acv_open:after{ /* アイコン縦棒なし（開いてるとき） */
    height: 0;
    width: 0;
}
ul.accordion ul li{ /* アーカイブリスト */
    margin-left: 15px;
    position: relative;
}
ul.accordion ul li::after{ /* アーカイブリストマーク */
    display: block;
    content: '';
    position: absolute;
    top: .2em;
    left: -1em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#tipsMain {
    background-image: url(../img/tipsMain.jpg);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    color: var(--White);
}
#news_blogMain {
    background-image: url(../img/news_blogMain.jpg);
    background-position: right 70% top;
    background-size: cover;
    background-repeat:no-repeat;
    color: var(--White);
}
.bl_slider li {
    padding: 5px;
}
/* ------------------------------------------------------------------------------
  お問い合わせ
-------------------------------------------------------------------------------*/
#contact {
    background-image: url(../img/contactBg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#telBg {
    background-image: url(../img/telBg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 130px;
}

.ly_outerTable th {
    vertical-align: middle;
}
.ly_innerTable,
.ly_innerTable tr,
.ly_innerTable th,
.ly_innerTable td {
    border: none !important;
}

.ly_innerTable th {
    padding: 5px 5px 5px 0;
}
.ly_innerTable td {
    padding: 5px 5px 5px 30px;
}

.el_inputSm {
    width: 60px !important;
    padding-left:10px;
}
.el_inputMd {
    width: 80px !important;
    text-align:center;
}

input,
textarea,
select {
    background-color:var(--White);
    border: solid 1px var(--LightGray);
    border-radius: 3px;
    padding: 5px;
}
input[type=text],
input[type=email],
textarea {
    width: 100%;
}
select {
    background-image: url(../img/arrow_down.png);
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size: 10px;
}

#zip1-1,
#zip2-1,
#zip3-1 {
    width: 15%;
}

#zip1-2,
#zip2-2,
#zip3-2 {
    width: 20%;
}


#pref1,
#pref2,
#pref3{
    width: 50%;
    margin-top:10px;
}

#address1,
#address2,
#address3{
    width: 100%;
    margin-top:10px;
}

.zip-button1,
.zip-button2,
.zip-button3{
    color: var(--Red);
    background-color: var(--White);
    border: solid 1px;
    font-size: 10px;
    padding: 0 30px;
    line-height: 22px;
}
.zip-button1:hover,
.zip-button2:hover,
.zip-button3:hover {
    color: var(--White);
    background-color: var(--Red);
    border: solid 1px var(--Red);
    transition: .3s;
}



input[type=checkbox] {
  appearance: none;
  display: none;
}

input[type=checkbox] + span:before {
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(../img/checkbox_off.png) no-repeat;
    background-size:contain;
    vertical-align: middle;
}

input[type=checkbox]:checked + span:before {
    content:"";
    background:url(../img/checkbox_on.png) no-repeat;
    background-size: contain;
}

input[type=radio] {
  appearance: none;
  display: none;
}

input[type=radio] + span:before {
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(../img/checkbox_off.png) no-repeat;
    background-size:contain;
    vertical-align: middle;
}

input[type=radio]:checked + span:before {
    content:"";
    background:url(../img/checkbox_on.png) no-repeat;
    background-size: contain;
}

.submit {
    padding: 10px 50px;
    text-align:center;
    width: 100%;
    margin-top: -10px;
}

.tab-group{
    display: flex;
    justify-content: center;
    transition: 1s;
}
.tab {
    flex-grow: 1;
    padding:5px;
    list-style:none;
    border-top:solid 1px var(--Gray);
    border-bottom:solid 1px var(--Gray);
    border-left:solid 1px var(--Gray);
    text-align:center;
    cursor:pointer;
    transition: 1s;
}
li.tab:last-child {
    border-right:solid 1px var(--Gray);
}
.panel-group{
    transition: 1s;
}
.panel{
    display:none;
    opacity: 0;
    transition: 1s;
}
.tab.is-active,
.tab.is-active:hover{
    border-top: solid 1px var(--Red);
    border-bottom: var(--Cream);
    background-image:url(../img/border_top_red.png);
    background-repeat:repeat-x;
}
.panel.is-show{
    display:block;
    opacity: 1;
    transition: 1s;
}


.form th {
    padding: 0 10px;
    text-align:left;
    width: 100%;
    display: block;
}
.form th:before {
    content: "■";
    padding-right: 4px;
    color: var(--Black);
    margin-left: 4px;
}
.form td {
    padding: 10px;
    text-align:left;
    width: 100%;
    display: block;
}
.form .txt-r {
    text-align:left !important;
}
.form table th,
.form table td {
    padding-left: 0;
}
.mwform-checkbox-field,
.mwform-radio-field {
    display: block;
}
.horizontal-item {
    margin-left: 0px !important;
}

input[type=submit] {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    transition: .3s;
}
/* ------------------------------------------------------------------------------
  ドロワー
-------------------------------------------------------------------------------*/
#nav-drawer {
    display: block;
}
#drawer-checkbox {
  display: none;
}
#drawer-icon {
  cursor: pointer;
  display: inline-block;
  position: fixed;
  width: 30px;
  height: 30px;
  z-index: 10000;
  top: 30px;
  right: 25px;
}
#drawer-text {
  font-size: 10px;
  position: absolute;
  top: 70px;
  right: 35px;
}
#drawer-icon span {
  background: var(--White);
  display: block;
  height: 1px;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 5px;
  transition: all 0.3s ease-in-out;
  width: 30px;
}
#drawer-icon span::before {
  -webkit-transform: rotate(0);
  background: var(--White);
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 0px;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 40px;
}
#drawer-icon span::after {
  -webkit-transform: rotate(0);
  background: var(--White);
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 5px;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 35px;
}
#drawer-icon span::before {
  margin-top: -10px;
}
#drawer-icon span::after {
  margin-top: 8px;
}
#drawer-checkbox:checked ~ #drawer-icon span {
  background: rgba(51, 51, 51, 0);
  height: 2px;
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 83%;
  max-width: 100%;
  height: 100%;
  background:rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(-100%);
  padding: 20px 40px;
}
#drawer-content hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
.drawerLink:before {
    content: "-";
    padding-right: 4px;
    color: var(--Black);
    margin-left: 4px;

}

#drawer-content .bl_BtnContact {
    border: solid 1px var(--Red);
    color: var(--White) !important;
    background-color: var(--Red);
    display: block;
    text-align:center;
    font-family: var(--fontMin);
    width: 100%;
    margin-top: 25px;
    padding: 15px;
}
#drawer-content .bl_BtnPhone {
    border: solid 1px var(--Red);
    color: var(--Red);
    display: block;
    text-align:center;
    font-family: var(--fontMin);
    font-size: var(--fontSize_2l);
    width: 100%;
    margin-bottom: 10px;
    padding: 15px;
}

/*
@media screen and (max-width:480px) {
  #drawer-content {
    width: 80%;
    padding: 50px 20px;
  }
  #drawer-icon {
    top:5px;
    right: 15px;
  }
  #drawer-text {
    display: none;
  }
  .slider {
    padding-top: 50px;
  }
}
*/
#drawer-checkbox:checked ~ #drawer-content {
  transform: translateX(0);
}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 39;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #FFF;*/
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
  display: block;
  opacity: 0.5;
}

#drawer-content li {
  padding: 10px 0;
}

@media screen and (max-width: 320px) {
    #drawer-content {
      padding: 20px;
    }
}
/*---------------------------------------
   文字間調整
-----------------------------------------*/
.ls10 {
    letter-spacing: 1rem
}
.ls15 {
    letter-spacing: 1.5rem
}
.ls20 {
    letter-spacing: 2rem
}
.ls25 {
    letter-spacing: 2.5rem
}
/*---------------------------------------
   padding
-----------------------------------------*/
.p0{
    padding: 0 !important;
}
.p10{
    padding: 10px !important;
}
.p20{
    padding: 20px !important;
}
.p30{
    padding: 30px !important;
}
.p40{
    padding: 40px !important;
}
.pt0{
    padding-top: 0 !important;
}
.pt5{
    padding-top: 5px !important;
}
.pt10{
    padding-top: 10px !important;
}
.pt15{
    padding-top: 15px !important;
}
.pt20{
    padding-top: 20px !important;
}
.pt25{
    padding-top: 25px !important;
}
.pt30{
    padding-top: 30px !important;
}
.pt35{
    padding-top: 35px !important;
}
.pt40{
    padding-top: 40px !important;
}
.pt45{
    padding-top: 45px !important;
}
.pt50{
    padding-top: 50px !important;
}
.pt55{
    padding-top: 55px !important;
}
.pt60{
    padding-top: 60px !important;
}
.pt65{
    padding-top: 65px !important;
}
.pt70{
    padding-top: 70px !important;
}
.pt75{
    padding-top: 75px !important;
}
.pt80{
    padding-top: 80px !important;
}
.pt85{
    padding-top: 85px !important;
}
.pt90{
    padding-top: 90px !important;
}
.pt95{
    padding-top: 95px !important;
}
.pt100{
    padding-top: 100px !important;
}


.pb0{
    padding-bottom: 0 !important;
}
.pb5{
    padding-bottom: 5px !important;
}
.pb10{
    padding-bottom: 10px !important;
}
.pb15{
    padding-bottom: 15px !important;
}
.pb20{
    padding-bottom: 20px !important;
}
.pb25{
    padding-bottom: 25px !important;
}
.pb30{
    padding-bottom: 30px !important;
}
.pb35{
    padding-bottom: 35px !important;
}
.pb40{
    padding-bottom: 40px !important;
}
.pb45{
    padding-bottom: 45px !important;
}
.pb50{
    padding-bottom: 50px !important;
}
.pb55{
    padding-bottom: 55px !important;
}
.pb60{
    padding-bottom: 60px !important;
}
.pb65{
    padding-bottom: 65px !important;
}
.pb70{
    padding-bottom: 70px !important;
}
.pb75{
    padding-bottom: 75px !important;
}
.pb80{
    padding-bottom: 80px !important;
}
.pb85{
    padding-bottom: 85px !important;
}
.pb90{
    padding-bottom: 90px !important;
}
.pb95{
    padding-bottom: 95px !important;
}
.pb100{
    padding-bottom: 100px !important;
}

.p30{
    padding: 30px !important;
}
.p50{
    padding: 50px !important;
}
.pl30{
    padding-left: 30px !important;
}
.pl40{
    padding-left: 40px !important;
}
.pl50{
    padding-left: 50px !important;
}
.pr20{
    padding-right: 20px !important;
}
.pr30{
    padding-right: 30px !important;
}
.pr50{
    padding-right: 50px !important;
}
/*---------------------------------------
   margin
-----------------------------------------*/
.m0{
    margin: 0 !important;
}
.m20{
    margin: 20px !important;
}
.m50{
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
.mt0{
    margin-top: 0 !important;
}
.mt5{
    margin-top: 5px !important;
}
.mt10{
    margin-top: 10px !important;
}
.mt15{
    margin-top: 15px !important;
}
.mt20{
    margin-top: 20px !important;
}
.mt25{
    margin-top: 25px !important;
}
.mt30{
    margin-top: 30px !important;
}
.mt35{
    margin-top: 35px !important;
}
.mt40{
    margin-top: 40px !important;
}
.mt45{
    margin-top: 45px !important;
}
.mt50{
    padding-top: 50px !important;
}
.mt55{
    margin-top: 55px !important;
}
.mt60{
    margin-top: 60px !important;
}
.mt65{
    margin-top: 65px !important;
}
.mt70{
    margin-top: 70px !important;
}
.mt75{
    margin-top: 75px !important;
}
.mt80{
    margin-top: 80px !important;
}
.mt85{
    margin-top: 85px !important;
}
.mt90{
    margin-top: 90px !important;
}
.mt95{
    margin-top: 95px !important;
}
.mt100{
    margin-top: 100px !important;
}



.mb0{
    margin-bottom: 0px !important;
}
.mb5{
    margin-bottom: 5px !important;
}
.mb10{
    margin-bottom: 10px !important;
}
.mb15{
    margin-bottom: 15px !important;
}
.mb20{
    margin-bottom: 20px !important;
}
.mb25{
    margin-bottom: 25px !important;
}
.mb30{
    margin-bottom: 30px !important;
}
.mb35{
    margin-bottom: 35px !important;
}
.mb40{
    margin-bottom: 40px !important;
}
.mb45{
    margin-bottom: 45px !important;
}
.mb50{
    margin-bottom: 50px !important;
}
.mb55{
    margin-bottom: 55px !important;
}
.mb60{
    margin-bottom: 60px !important;
}
.mb65{
    margin-bottom: 65px !important;
}
.mb70{
    margin-bottom: 70px !important;
}
.mb75{
    margin-bottom: 75px !important;
}
.mb80{
    margin-bottom: 80px !important;
}
.mb85{
    margin-bottom: 85px !important;
}
.mb90{
    margin-bottom: 90px !important;
}
.mb95{
    margin-bottom: 95px !important;
}
.mb100{
    margin-bottom: 100px !important;
}
/*---------------------------------------
   改行
-----------------------------------------*/
.br {
  display:block;
}
@media screen and (max-width:414px) {
  .br {
    display:inline-block;
  }
}

.visible-xs {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
}
/* ---02/25--- */

.l-senpai-voice{
	padding-top: 60px;
	counter-reset: questions;
}
/*---------------------------------------
   先輩の声
-----------------------------------------*/
.p-cardName{
	margin-bottom: 60px;
}

.p-cardName .ly_container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
	
.p-cardName .ly_container .p-cardName__box:first-child{
	order: 2;
	padding: 30px 10px;
	height: initial;
}
	
.p-cardName .ly_container .p-cardName__box:last-child{
	height: 50vw;
	max-height: 350px;
}
	
.p-cardName__box{
	width: 100%;
	height: 35vw;
	max-height: 300px;
	box-sizing: border-box;
	background-color: #e60012;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
.p-cardName__box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
	
.p-cardName__content{
	max-height: 100%;
	box-sizing: border-box;
	width: 80%;
}

.p-cardName__content h3{
	font-size: 4.5vw;
	line-height: 1.5;
	position: relative;
}

.p-cardName__content h3:before{
	position: absolute;
    width: 0;
    height: 51.95px;
    content: '';
    transform: rotate(45deg);
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: white;
    left: 0;
    top: 0;
    margin-left: -10px;
    margin-top: -25px;
}

.p-cardName__content p{
	margin-top: 25px;
	font-size: 3vw;
}

.p-questions.p-questions--mt,
.p-questions .ly_container .p-questions__item{
	margin-top: 40px;
}

.p-questions .ly_container .p-questions__item:first-child{
	margin-top: 0;
}

.p-questions__item h4{
	font-size: 22px;
	color: #e60012;
	margin-bottom: 20px;
}

.p-questions__item h4::before{
	counter-increment: questions;
	content: "Q" counter(questions) " ";
}

.p-questions__item p{
	font-size: 12px;
    line-height: 1.86;
    text-indent: 2vw;
}

.p-introduce,
.p-introduce--noImg{
	margin: 25px 0;
}

/* .p-introduce .ly_container{
	height: 150vw;
	max-height: 600px;
	position: relative;
} */

.p-introduce__content{
	position: relative;
	box-sizing: border-box;
	width: 85%;
	max-width: 400px;
	max-height: 400px;
/* 	bottom: 0;
	right: 15px; */
	background-color: #fafafabf;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-shadow: 0px 3px 5px #c5c5c5e3;
	padding: 20px 0;
	margin: 0 auto;
	margin-right: 0;
	margin-top: -100px;
}
	
.p-introduce--02 .p-introduce__content{
	justify-content: flex-start;
	margin: 0 auto;
	margin-left: 0;
	margin-top: -100px;
}
	
.p-introduce__content--w100{
	width: 100%;
	margin-top: 0!important;
	max-width: unset;
}

.p-introduce__text{
	width: 90%;
	max-height: calc(400px - 40px);
	box-sizing: border-box;
	margin: 0 auto;
	overflow-y: scroll;
}

.p-introduce__image{
	width: 90%;
	height: 120vw;
	max-height: 500px;
	pointer-events: none;
}
	
.p-introduce--02 .p-introduce__image{
	margin:0 auto;
	margin-right: 0;
}

.p-introduce__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-introduce__text h3{
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 10px;
	font-weight: bold;
}

.p-introduce__text p{
	font-size: 15px;
	line-height: 1.86;
}

.p-schedule{
	padding-top: 35px;
	padding-bottom: 40px;
}

.p-schedule__box{
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 20px 10px;
	background-color: #f5f5f5;
	text-align: center;
}

.c-title{
	text-align: center;
	font-size: 23px;
	line-height: 1.1;
	padding-bottom: 15px;
	margin-bottom: 30px;
	position: relative;
}

.c-title::before{
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translatex(-50%);
	width: 8%;
	height: 1px;
	background-color: black;
}

.c-title span{
	font-size: 13px;
}

.p-schedule__content{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	position: relative;
}

.p-schedule__content::before{
	display: block;
	content: '';
	position: absolute;
	top:0;
	left: 50%;
	transform: translatex(-50%);
	width: 1px;
	height: 100%;
	background-color: black;
}

.p-schedule__content .p-schedule__contentBox:first-child{
	padding-right: 15px;
}

.p-schedule__content .p-schedule__contentBox:last-child{
	padding-left: 15px;
}

.p-schedule__contentBox{
	box-sizing: border-box;
	width: 50%;
}

.p-schedule__contentBox h4{
	font-size: 14px;
	color: #e60012;
	text-transform: uppercase;
	font-weight: bold;
}

.p-schedule__contentBox ul{
	text-align: left;
}

.p-schedule__contentBox li{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	flex-direction: column;
	margin: 15px 0;
	font-size: 12px;
}

.p-schedule__contentBox li:last-child{
	margin-bottom: 0;
}
	
	.p-schedule__contentBox li p:first-child{
		font-weight: bold;
	}

.p-schedule__contentBox li p:last-child{
	padding-left: 15px;
}

.p-interview{
	padding-top: 20px;
	padding-bottom:30px;
	background-color: #f5f5f5;
}

.p-interview__list{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
}

.p-interview__item{
	width: 49.8%;
	height: 50%;
	margin-top: 0.2%;
}

.p-interview__item a{
	display: block;
	width: 100%;
	height: 100%;
}

.p-interview__item figure{
	width: 100%;
	height: 100%;
	position: relative;
}
	
.p-interview__item figure::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-color: black;
	opacity: 0.4;
	width: 100%;
	height: 100%;
}

.p-interview__item a,
.p-interview__item img{
	width: 100%;
	height: 100%;
}

.p-interview__item a{
	overflow: hidden
}

.p-interview__item img{
	object-fit: cover;
	transition: 0.5s all;
}

.p-interview__item a:hover img{
	transform: scale(1.1);
	transition: 0.3s all;
}

.p-interview__item figcaption{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: right;
	color: white;
	padding: 10px;
	box-sizing: border-box;
	pointer-events: none;
}

.p-interview__item figcaption h3,
.p-interview__item figcaption h4,
.p-interview__item figcaption p{
	margin:0 auto;
	margin-right: 0;
	max-width: 100%;
}

.p-interview__item figcaption h3{
	font-size: 21px;
	line-height: 1.5;
}

.p-interview__item figcaption p{
	margin-bottom: 3px;
	margin-top: 3px;
	font-size: 14px;
	opacity: 0.8;
}

.p-applied-job{
	padding: 30px 0;
}

.p-applied-job .ly_container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.p-applied-job a{
	background-color: #e60012;
	color: white;
	padding: 20px 50px;
}
	
.p-sub-banner{
	margin: 40px 0;
}
	
.p-sub-banner a{
	display: block;
	width: 100%;
	height: auto
}

.p-sub-banner__image{
	width: 100%;
	height: 40vw;
	max-height: 300px;
}

.p-sub-banner__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Addition CSS 04/09 */
.post-content p{
	margin-bottom: 2rem;
}
.post-content .bold{
	font-weight: bold;
}
.post-content .red{
	color: red;
}
.post-content .blue{
	color: blue;
}
.post-content .blue{
	color: blue;
}
.post-content .pink{
	color: #ff00ff;
}
.post-content ul{
	margin-bottom: 2rem
}
.post-content ul li{
	list-style: initial;
	list-style-position: inside;
}
.post-content .underline{
	text-decoration: underline;
}
.post-content h3{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 2.5rem;
}
.post-content .bigger{
	font-size: 16px;
	font-weight: 600;
}
.post-content .smaller{
	font-size: 12px
}
.post-content .red{
	color: red;
}
.post-content .flex .block-img{
	margin-right: 1rem;
}
.post-content .flex .block-img.block-img--auto-height{
	height: auto;
}
.post-content .flex{
	display: unset;
}
.post-content .flex .item{
	margin-top: 1rem
}
.post-content .flex .block-img{
	width: 100%;
	height: unset;
	margin-bottom: 3%;
}
.post-content .block-img{
	width: 300px;
	height: 206px;
	max-width: 100%;
}
.post-content .block-img.block-img--auto-height{
	height: auto;
}
.post-content .block-img img{
	width: 100%;
	height: auto;
	object-fit: unset;
}
/* ---FAQ Tips 04/12--- */

.p-faqTips li a{
	padding: 1rem 0.5rem;
	border-bottom: 1px solid var(--Gray);
}

.p-faqTips li:last-child a{
	border-bottom: none;
}

.p-faqTips__content{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	width: 100%;
	box-sizing: border-box;
	transition: 0.3s all;
	position: relative
}

.p-faqTips__content::after{
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
	top: 50%;
	right: 1rem;
	transform: translatey(-50%);
	opacity: 0.8;
	transition: 0.1s all
}
	
.p-faqTips__content h3{
	width: 100%;
	margin-top: 0.5rem;
	padding-right: 3rem;
}

.p-faqTips__content:hover::after{
	opacity: 1;
}

.p-faqTips__content:hover{
	background-color: #c6001247;
	color: white;
}

.p-faqTips__content .el_tipsTag{
	margin: 0 1rem; 
}
#TopPage .bl_tri{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    height: 40%;
    width: 40%;
}






.slideshow.slick-initialized.slick-slider.slick-dotted {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.slick-slide {
    position: relative;
    height: 100vh; /* 必要に応じて高さを調整 */
}
.slick-slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transform: translate(-50%, -50%);
}