* {
    font-family: 'Josefin Sans', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, 'Noto Sans JP', sans-serif;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-weight: 500;
}
body {
    background: url("../img/base/topBG.png") no-repeat;
    background-attachment: fixed;
    background-position-y: bottom;
}

#video {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
#video::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background: rgba(255, 255, 255, 0.5);
}
#video video {
    width: 100%;
    min-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.meshBG {
    width: 100%;
    background: url("../img/base/bg_mesh_re.png");
    background: url("../img/base/bg_mesh_re_15.png");
    position: absolute;
    top: 0px;
    z-index: 0;
    min-height: 1440px;
}





header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 90px;
    height: 120px;
    z-index: 998;
    padding: 0px 100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    background: #FFF;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    -webkit-transition: .3s all;
       -moz-transition: .3s all;
        -ms-transition: .3s all;
         -o-transition: .3s all;
            transition: .3s all;
}
header#top {
    /*
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    */
    position: absolute;
    position: fixed;
    top: -92px;
    left: 0;
    right: 0;
    height: 90px;
    width: 100%;
    transition: .3s top;
}
header#top:hover,
header#top.is-animation {
    height: 90px;
    top: 0px;
    background: #FFF;
}
header.is-animation {
    top: 0px;
    height: 90px;
    background: #FFF;
}
.topPageHeader {
    position: relative;
    z-index: 10;
}
.topPageHeader .logo,
header .logo {
    position: absolute;
    top: 30px;
    left: 80px;
    width: 200px;
    transition: .2s all;
}
header.is-animation .logo {
    top: 20px;
}
.topPageHeader .logo img,
header .logo img {
    width: 100%;
}
header .gMenu,
header#top.is-animation .gMenu {
    position: absolute;
    top: 30px;
    right: 50px;
    height: 60px;
    margin: 0 auto;
    float: right;
    -webkit-transition: .3s all;
       -moz-transition: .3s all;
        -ms-transition: .3s all;
         -o-transition: .3s all;
            transition: .3s all;
}
header.is-animation .gMenu,
header#top.is-animation .gMenu {
    top: 20px;
}
.topPageHeader .gMenu {
    position: absolute;
    top: 30px;
    right: 50px;
    height: 60px;
    margin: 0 auto;
    float: right;
}
header#top:hover .gMenu,
header#top.is-animation .gMenu {
    border-bottom: none;
}
.topPageHeader .gMenu li,
header .gMenu li {
    height: 50px;
    float: left;
    text-align: center;
}
.topPageHeader .gMenu li a,
header .gMenu li a {
    position: relative;
    color: #666;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    height: 50px;
    padding: 0px 15px;
    transition: .2s color;
}
.topPageHeader .gMenu li a:hover,
header .gMenu li a:hover {
    color: #333;
    text-decoration: none;
}
header#top .gMenu li a {
    /*
    color: #FFF;
    */
}
.topPageHeader .logo {
    width: 230px;
    margin-top: 22px;
}
.topPageHeader .gMenu {
    margin-top: 30px;
}


header:hover nav li.has-child ul li a,
header nav li.has-child ul li a:hover,
header nav li.has-child ul li a:active,
header#top:hover nav li.has-child ul li a,
header#top nav li.has-child ul li a:hover,
header#top nav li.has-child ul li a:active {
    color: #FFF;
    opacity: 0.85;
    line-height: 36px;
}
header nav li.has-child ul li a:hover,
header nav li.has-child ul li a:active,
header#top nav li.has-child ul li a:hover,
header#top nav li.has-child ul li a:active {
    opacity: 1.0;
}
header#top:hover .gMenu li a,
header#top.is-animation .gMenu li a {
    color: #666;
}
.topPageHeader .gMenu ul,
header .gMenu ul {
    display: block;
    background: #FFF;
}
.topPageHeader .gMenu li,
header .gMenu li {
    position: relative;
}
header .gMenu li li a {
    display: inline-block;
    padding: 5px 20px;
    width: 140px;
    line-height: 48px;
    text-align: left;
}
.topPageHeader .gMenu li a:hover,
header:hover .gMenu li a:hover,
header#top:hover .gMenu li a:hover,
header#top.is-animation .gMenu li a:hover {
    color: #991e75;
}
.topPageHeader .gMenu li.btn,
header .gMenu li.btn {
    margin-left: 30px;
}
.topPageHeader .gMenu li.btn a,
header .gMenu li.btn a {
    font-weight: 500;
    width: 130px;
    padding: 0px 10px;
}
.topPageHeader .gMenu li.btn a::before,
header .gMenu li.btn a::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #991e75;
    transition: .3s background;
}
.topPageHeader .gMenu li.btn a:hover::before,
header .gMenu li.btn a:hover::before {
    background: #1f257d;
}
header .gMenu li.btn a::after {
    display: none;
}
.topPageHeader .gMenu li.btn a,
header .gMenu li.btn a {
    color: #FFF !important;
}
header .gMenu li.has-child {
    margin-right: 10px;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
header .gMenu li.has-child::before {
    content:'';
    position: absolute;
    top: 18px;
    right: 4px;
    right: unset;
    top: 20px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: rotate(135deg);
}
header .gMenu li.has-child:hover::before {
    border-top: 2px solid #d81e05;
    border-right: 2px solid #d81e05;
    top: 20px;
    left: 6px;
}



header .gMenu li.contact {
    margin-left: 30px;
}
header .gMenu li.contact a {
    color: #d81e05;
    background: #FFF;
    color: #FFF;
    background: #d81e05;
    border-radius: 25px;
    padding: 0 40px;
    -webkit-transition: .2s color, .2s background;
       -moz-transition: .2s color, .2s background;
        -ms-transition: .2s color, .2s background;
         -o-transition: .2s color, .2s background;
            transition: .2s color, .2s background;
}
header .gMenu li.contact a:hover {
    color: #FFF;
    background: #d81e05;
}
header .gMenu li.contact a span {
    font-size: 14px;
    font-weight: 600;
}
header .gMenu li.contact a::after {
    display: none;
}
header#top .gMenu li.contact a {
    color: #d81e05;
    background: #FFF;
}
header#top .gMenu li.contact a:hover {
    color: #FFF;
    background: #fa0107;
    background: #d81e05;
}
header#top:hover .gMenu li.contact a,
header#top.is-animation .gMenu li.contact a {
    color: #FFF;
    background: #fa0107;
    background: #d81e05;
    transition: .2s opacity;
}
header#top:hover .gMenu li.contact a:hover,
header#top.is-animation .gMenu li.contact a:hover {
    opacity: 0.7;
}



@media screen and (max-width: 1280px)
{
    header {
        height: 100px;
    }
    .topPageHeader .logo,
    header .logo {
        left: 20px;
        width: 160px;
    }
    .topPageHeader .logo,
    header .logo {
        top: 23px;
    }
    header.is-animation .logo {
        top: 13px;
    }
    .topPageHeader .gMenu li a,
    header .gMenu li a {
        padding: 0px 10px;
    }
    .topPageHeader .gMenu li.btn,
    header .gMenu li.btn {
        margin-left: 10px;
    }
    header .gMenu,
    header#top.is-animation .gMenu,
    .topPageHeader .gMenu {
        right: 20px;
    }
    .topPageHeader .gMenu {
        top: 20px;
    }
    .topPageHeader .gMenu li.btn a,
    header .gMenu li.btn a {
        width: 120px;
    }
}






/* floatクリア */
.gMenu::before,
.gMenu::after {
    content: " ";
    display: table;
}
.gMenu::after {
    clear: both;
}
.gMenu {
    *zoom: 1;
}
.headerInner #ytWidget {
    position: absolute;
    top: 80px;
    right: 15px;
    -webkit-transition: .3s opacity;
       -moz-transition: .3s opacity;
        -ms-transition: .3s opacity;
         -o-transition: .3s opacity;
            transition: .3s opacity;
}
header#top .headerInner #ytWidget {
    right: 0px;
}
header.is-animation .headerInner #ytWidget {
    opacity: 0;
}
#yt-widget .yt-wrapper_align_right {
    display: none;
}

.headerContact {
    position: absolute;
    top: 40px;
    top: 5px;
    top: 10px;
    right: 0px;
    -webkit-transition: .5s all;
       -moz-transition: .5s all;
        -ms-transition: .5s all;
         -o-transition: .5s all;
            transition: .5s all;
}
header.is-animation .headerContact {
	top: 125px;
	top: 10px;
}
.headerContact a {
    color: #005eac;
    color: #0070bd;
    color: #FFF;
    background: #0070bd;
    font-size: 16px;
	font-weight: 600;
    padding: 10px 15px 10px 18px;
    text-decoration: none;
    -webkit-transition: .2s color, .2s background;
       -moz-transition: .2s color, .2s background;
        -ms-transition: .2s color, .2s background;
         -o-transition: .2s color, .2s background;
            transition: .2s color, .2s background;
}
header#top .headerContact a {
    color: #0070bd;
    background: #FFF;
}
header#top.is-animation .headerContact a,
header#top .headerContact a:hover {
    color: #FFF;
    background: #005eac;
    background: #0070bd;
}




/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.gMenu li a{
    /*線の基点とするためrelativeを指定*/
    position: relative;
}

.gMenu li.current a,
.gMenu li a:hover{
    color: #004488;
}

.gMenu li a::after {
    display: none;
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background: #991e75;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}
.gMenu li.has-child a::after,
.gMenu li.has-child li a::after {
    display: none;
}

/*現在地とhoverの設定*/
.gMenu li.current a::after,
.gMenu li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


.lang {
    display: inline-block;
    position: absolute;
    top: 100px;
    right: 100px;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 1px;
    -webkit-transition: .2s opacity;
       -moz-transition: .2s opacity;
        -ms-transition: .2s opacity;
         -o-transition: .2s opacity;
            transition: .2s opacity;
}
.lang,
.lang span,
.lang a {
    color: #FFF;
}
.lang span {
    font-weight: bold;
}




/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 0px;
    left: 50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
    position: absolute;
    left:10px;
    bottom:10px;
    /*テキストの形状*/
    color: #FFF;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2::before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: -4px;
    /*丸の形状*/
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFF;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
        circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0% { bottom: 45px; }
     100% { bottom: -5px; }
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0% { opacity: 0 }
     50% { opacity: 1; }
    80% { opacity: 0.9; }
    100% { opacity: 0; }
 }

/* 線の描写 */
.scrolldown2::after{
    content:"";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 2px;
    height: 50px;
    background: #FFF;
}

section {
    padding: 0;
    text-align: left;
    overflow: visible;
    background: #FFF;
    background: transparent;
}
section p {
    font-size: 16px;
    line-height: 2.4;
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
    animation-name:slideTextX-100;
    animation-duration: 1.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}



.swiper-container {
    position: relative;
    height: auto;
}
.swiper-container .swiper-slide {
    background-size: cover;
    background-position: center center;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 20px !important;
    left: 0;
    width: 100%;
}
.swiper-pagination-bullet {
    margin: 0 8px !important;
    /*
    width: 10px !important;
    height: 10px !important;
    */
    display: inline-block;
    border-radius: 100%;
    background: #000 !important;
    opacity: .3 !important;
}
.swiper-pagination-bullet-active {
    background: #000 !important;
    opacity: .8 !important;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url("../img/prev.png") !important;
    width: 26px !important;
    height: 40px !important;
    background-size: cover !important;
    top: 35% !important;
    left: 70px !important;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url("../img/next.png") !important;
    width: 26px !important;
    height: 40px !important;
    background-size: cover !important;
    top: 35% !important;
    right: 70px !important;
    //transform: scale(-1, 1);
}


.ci {
    position: absolute;
    top: auto;
    bottom: 18%;
    left: 10%;
    left: 80px;
    right: auto;
    margin: auto;
    width: 640px;
    height: 278px;
    z-index: 9999;
    bottom: 10%;
}
.ci p {
    color: #FF0006;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.4;
    line-height: 1.6;
}
.mv__description span {
    width: fit-content;
}
.c-mask__bar {
    position: relative;
    display: inline-block;
    transform: translate3d(0, 0, 0);
}
.c-mask__bar::before {
    display: inline-block;
    width: 0;
    height: 100%;
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FF0006;
}
.c-mask__bar--white::before {
    background-color: #fff;
}
.c-mask.--active .c-mask__bar::before {
    animation: passing-bar 1s ease-in-out;
}
@keyframes passing-bar {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  51% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
.c-mask__content {
    opacity: 0;
    transform: translate3d(0, 0, 0);
}
p .mv__description__text {
    display: block;
    padding-left: 12px;
    color: #ff0006;
    font-size: 64px;
    font-weight: 800;
    line-height: 60px;
    padding-bottom: 6px;
    background-color: #fff;
}
.mv__description span {
    width: fit-content;
}
.c-mask.--active .c-mask__content {
    animation: passing-txt 0s ease 0.5s 1 normal forwards;
}
@keyframes passing-txt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.textBox h3 {
    line-height: 1.8;
}    
.textBox.c-mask.--active .c-mask__content {
    background: #FFF;
}
.slick-prev, .slick-next {
    position: absolute;
    top: 200px !important;
    right: 0;
    width: 60px !important;
    height: 60px !important;
    background: #ff0006 !important;
}
.slick-prev {
    left: -80px !important;
}
.slick-prev::after,
.slick-next::after {
    position: absolute;
    content: "";
    top: 40% !important;
    right: 26px !important;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #FFFFFF !important;
    border-right: 2px solid #ffffff !important;
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
}
.slick-prev::after {
    left: 26px !important;
    transform: rotate(225deg);
}

.slider2 {
    margin-top: 40px;
    margin-bottom: 100px;
}
.slider2 .slick-slide {
    margin: 0px 20px;
    padding-bottom: 10px;
}
.slider2 .slick-slide img {
    padding: 0px 0px;
}
.slider2 .slick-slide span {
    font-size: 12px;
    color: #FFF;
    background: #991e75;
    padding: 4px 10px 6px 10px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    text-decoration: none;
    border-radius: 20px;
}

.scroll {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 9999;
}
.scroll a {
    color: #FFF;
    font-size: 14px;
    padding-top: 60px;
    text-decoration: none !important;
    z-index: 9999;
}
.scroll a img {
    width: 20px;
}
.scroll a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 9999;
}
.scroll a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.entryMore {
    position: absolute;
    top: 300px;
    position: fixed;
    top: 400px;
    top: 220px;
    top: 126px;
    right: -78px;
    z-index: 9999;
    z-index: 10000;
    width: 220px;
    transform: rotate(90deg);
}
.entryMore::before{
    transform: skewX(50deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #FF0006;
}
.entryMore a {
    color: #FFF;
    font-size: 24px;
    font-weight: 900;
    width: 100%;
    line-height: 64px;
    text-align: center;
}
.entryMore a:hover {
    text-decoration: none;
}



.kv {
    /*
    background: url("../img/top/minaos_kvPC.png") no-repeat;
    background-size: cover;
    background-position: center bottom;
    */
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
#kv::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background: rgba(255, 255, 255, 0.3);
}
.sliderKV li {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}
.sliderKV li.slide01 {
    background-image: url("../img/top/slide01.webp");
}
.sliderKV li.slide02 {
    background-image: url("../img/top/slide02.webp");
}
.sliderKV li.slide03 {
    background-image: url("../img/top/slide03.webp");
}
.sliderKV li.slide04 {
    background-image: url("../img/top/slide04.webp");
}


.topPage {
    position: relative;
    width: 100%;
    margin-bottom: 0px;
}
.subPage .titleText,
.topPage .titleText {
    color: #FFF;
    font-size: 130px;
    font-size: 112px;
    font-weight: 900;
    font-family: Arial;
    text-shadow: 2px 2px 0 #FF0006, -2px -2px 0 #FF0006,
                -2px 2px 0 #FF0006, 2px -2px 0 #FF0006,
                 0px 2px 0 #FF0006,  0 -2px 0 #FF0006,
                -2px 0 0 #FF0006, 2px 0 0 #FF0006;
    text-shadow: 2.5px 2.5px 0 #FF0006, -2.5px -2.5px 0 #FF0006,
                -2.5px 2.5px 0 #FF0006, 2.5px -2.5px 0 #FF0006,
                 0px 2.5px 0 #FF0006,  0 -2.5px 0 #FF0006,
                -2.5px 0 0 #FF0006, 2.5px 0 0 #FF0006;
    line-height: 1.2;
    padding-top: 100px;
}
.subPage .titleText {
    padding-top: 60px;
}
.subPage p,
.topPage p {
    color: #666;
    font-size: 22px;
}
.subPage .more,
.topPage .more {
    position: relative;
    z-index: 1;
    width: 320px;
    margin-top: 60px;
}
.subPage .more {
    margin: 150px auto;
}
.subPage .more::before,
.topPage .more::before {
    transform: skewX(320deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #FF0006;
}
.subPage .more a,
.topPage .more a {
    color: #FFF;
    font-size: 20px;
    width: 100%;
    line-height: 70px;
    text-align: center;
}
.subPage .more a:hover,
.topPage .more a:hover {
    text-decoration: none;
}
.group .more {
    margin-left: 30px;
}

section h2 {
    color: #333;
    font-size: 30px;
    font-weight: 900;
    font-weight: 700;
    line-height: 2.0;
    margin-bottom: 60px;
}
section h3 {
    color: #333;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -1px;
    margin-bottom: 40px;
}
section h3 span {
    color: #FF0006;
    font-weight: 900;
}
section h3 .text_black span {
    color: #333;
}
section h3 .text_black span span {
    color: #FF0006;
}



.subPage h3 {
    color: #666;
    font-size: 36px;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
}







.vision .sectionInner {
    padding-top: 0px;
    margin-left: 8%;
    margin-right: 0;
    padding-bottom: 0;
    width: 92%;
    overflow: hidden;
}
.vision .sectionInner .fadebox {
    padding-top: 120px;
    padding-left: 50px;
    margin-bottom: 120px;
}
.vision h3 {
    color: #666;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
}


.message {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 100px;
}
.subPage .message h3 {
    color: #981e75;
    margin-bottom: 60px;
}
.message .sectionInner {
    width: 84%;
    margin: 0 auto;
    padding: 60px 0px;
}
.message01 .photoLeft {
    width: 42%;
    margin-right: 8%;
}
.message01 .messageRight {
    width: 50%;
    padding-top: 120px;
}
.message01 .photoRight {
    width: 65%;
    margin-left: 5%;
}
.message01 .messageLeft {
    width: 30%;
    padding-top: 260px;
}
.message01 .messageLeft p {
    color: #222;
    font-size: 40px;
    font-weight: 400;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    text-align: right;
}
.message01 .messageLeft p span {
    color: #666;
    font-size: 26px;
    font-weight: 500;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
.message02 .photoRight {
    width: 42%;
    margin-left: 6%;
    margin-right: 0;
}
.message02 .messageLeft {
    width: 52%;
    padding-left: 8%;
    padding-top: 120px;
}
.message02 .photoLeft {
    width: 65%;
    margin-right: 5%;
    margin-left: 0;
}
.message02 .messageRight {
    width: 30%;
    padding-top: 260px;
}
.message02 .messageRight p {
    color: #222;
    font-size: 40px;
    font-weight: 400;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    text-align: left;
}
.message02 .messageRight p span {
    color: #666;
    font-size: 26px;
    font-weight: 500;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}



.strength {
    margin-bottom: 100px;
}
.strength .sectionInner {
    display: flex;
    flex-wrap: wrap;
    margin: 50px 8% 0px 8%;
    width: 84%;;
    padding-bottom: 0px;
}
.strength .sticky {
    position: sticky;
    top: 200px;
    width: 25%;
    height: 100vh;
    padding-top: 120px;
}
.strength .sticky img {
    width: 200px;
}
.strength .strengthBody {
    width: 75%;
}
.strength .strengthBody ul li {
    position: relative;
    padding-bottom: 100px;
    margin-bottom: 100px;
}
.strength .strengthBody ul li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 14px;
    background: linear-gradient(to left, #1f257d 0%, #971e75 100%);
}
.strength .strengthBody ul li span.num {
    position: absolute;
    top: 8px;
    left: 0px;
    content: "";
    color: #FFF;
    font-size: 40px;
    font-weight: 400;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    letter-spacing: 1px;
    line-height: 78px;
    width: 80px;
    height: 80px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    text-align: center;
}
.strength .strengthBody ul li h3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-left: 120px;
    margin-bottom: 30px;
}
.strength .strengthBody ul li h3 span {
    position: relative;
    display: block;
    color: #777;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0px;
    -webkit-text-fill-color: #666;
}
.strength .strengthBody ul li p {
    padding-left: 120px;
}

.service {
    background: #F8F8F8;
}
.service .sectionInner ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 50px;
}
.service .sectionInner ul li {
    width: 46%;
    text-align: center;
    margin-bottom: 60px;
}
.service .sectionInner ul li:nth-child(odd) {
    margin-right: 8%;
}
.problem .sectionInner ul li {
    display: flex;
    width: 100%;
    text-align: left;
    padding-bottom: 50px;
    border-bottom: 2px solid #991e75;
    margin-bottom: 60px;
}
.problem .sectionInner ul li:last-child {
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 0px;
}
.problem .sectionInner ul li a {
    width: 30%;
    margin-right: 8%;
}
.problem .sectionInner ul li div {
    width: 62%;
}
.problem .sectionInner h4 {
    position: relative;
    color: #991e75;
    font-size: 28px;
    max-width: 647px;
    margin-bottom: 40px;
}
.problem .sectionInner h4::before {
    content: "";
    position: absolute;
    left: -40px;
    top: 10px;
    width: 8px;
    height: 26px;
    transform: skewX(-25deg);
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.problem .sectionInner ul li h4 a {
    color: #991e75;
    width: 100%;
    margin-right: 0;
}
.problemDetail .sectionInner h4 {
    max-width: 100%;
    padding-left: 40px;
    margin-bottom: 80px;
}
.problemDetail .sectionInner h4::before {
    left: 0px;
}
.problem .taglist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.problem .sectionInner ul.taglist li {
    display: inline-block;
    width: auto;
    text-align: left;
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 0px;
}
.problem .sectionInner ul.taglist li a {
    width: auto;
    font-size: 16px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.problemDetail .sectionInner {
    padding-bottom: 0px;
}
.problemDetail .sectionInner img {
    margin-bottom: 40px;
}
.problemDetail .sectionInner h5 {
    color: #991e75;
    font-size: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid #991e75;
    margin-bottom: 40px;
}
.problemDetail .sectionInner p {
    color: #333;
    font-size: 18px;
    padding-left: 40px;
    margin-bottom: 80px;
}
.problemDetail .photo {
    display: flex;
    align-items: flex-start;
}
.problemDetail .photo p {
    width: 67%;
    margin-right: 3%;
}
.problemDetail .photo img {
    width: 30%;
}
.problemDetail .photo.photoSquare p {
    width: 74%;
}
.problemDetail .photo.photoSquare img {
    width: 23%;
}


.service .sectionInner ul li p {
    font-size: 28px;
}
.subService {
    background: #FFF;
    padding-top: 0px !important;
}
.subService .sectionInner {
    margin: 0px 4% 0px 8%;
    padding: 150px 0px;
}
.serviceDetail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-right: 0 !important;
}
.serviceDetail div {
    width: 45%;
    padding-right: 40px;
}
.serviceDetail img {
    width: 55%;
}
.serviceDetail div h3 {
    color: #961e75;
    padding-bottom: 40px;
    border-bottom: 2px solid #961e75;
}
.serviceMerit h4,
.serviceKodawari h4 {
    color: #961e75;
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 30px;
    border-bottom: 2px solid #961e75;
    margin-bottom: 80px;
}
.serviceMerit ul {
    display: block;
}
.service .sectionInner.serviceMerit ul li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-right: 0;
}
.serviceMerit ul li div {
    width: 75%;
}
.serviceMerit ul li h5 {
    text-align: left;
    color: #961e75;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}
.service .serviceMerit ul li p {
    text-align: left;
    font-size: 20px;
    padding-right: 40px;
}
.serviceMerit ul li img {
    width: 25%;
}
.serviceKodawari {
    text-align: center;
}
.serviceKodawari h4 {
    text-align: left;
}
.serviceKodawari ul li {
    background: #FFF;
    padding: 30px 30px 40px 40px;
    text-align: left;
}
.serviceKodawari ul li h5 {
    text-align: left;
    color: #111;
    font-size: 24px;
}
.serviceKodawari ul li h5 span {
    display: block;
    color: #961e75;
    font-size: 32px;
    margin-bottom: 20px;
}
.serviceKodawari ul li p {
    color: #666;
    font-size: 16px !important;
    text-align: left;
    margin-top: 20px;
}
.serviceKodawari.longKodawari ul {
    display: block;
}
.serviceKodawari.longKodawari ul li {
    width: 100%;
    text-align: center;
    margin-right: 0px;
    margin-bottom: 60px;
}
.serviceKodawari.longKodawari ul li h5 {
    margin-bottom: 20px;
}
.serviceKodawari.longKodawari ul li h5 span {
    display: inline;
    color: #961e75;
    font-size: 32px;
    margin-right: 26px;
}
.serviceKodawari.longKodawari ul li p {
    padding-left: 45px;
}





.works li {
    list-style-type: none;
}
.works {
    overflow: hidden;
}
.works .tags .text {
    position: relative;
    margin-bottom: 100px;
}
.works .tags .text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -28px;
    width: 108%;
    height: 15px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.works .worksList,
.works .taglist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.works .worksList li.all {
    width: 46%;
    text-align: center;
    margin-bottom: 60px;
}
.works .worksList li.all:nth-child(odd) {
    margin-right: 8%;
}
.works .worksList li.all h4 {
    margin: 20px 0;
    color: #666;
    font-size: 28px;
    /*
    text-align: left;
    */
}
.works .taglist a,
.works .taglist a {
    font-size: 16px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.worksDetail {
    background: #F8F8F8;
}
.worksDetail .sectionInner {
    padding-bottom: 0;
}
.worksDetail h3 {
    color: #991e75;
    font-size: 48px;
    text-align: center;
}
.worksDetail p {
    text-align: center;
    margin-bottom: 40px;
}
.worksDetail a.control {
    font-size: 16px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.worksDetail ul {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.worksDetail ul li {
    width: 47%;
    text-align: center;
    margin-bottom: 100px;
}
.worksDetail ul li:nth-child(odd) {
    margin-right: 6%;
}
.worksDetail ul li:last-child {
    margin-bottom: 0px;
}


.origin {
    text-align: center;
    background: #f1f1f1;
    padding-top: 100px;
    padding-bottom: 200px;
}
.origin img {
    width: 640px;
    margin-top: 60px;
    margin-bottom: 120px;
}
.origin h4 {
    color: #981e75;
    font-size: 56px;
    font-weight: 500;
    margin-bottom: 80px;
}
.origin span {
    display: inline-block;
    color: #FFF;
    font-size: 40px;
    line-height: 76px;
    width: 250px;
    height: 80px;
    background: #981e75;
    margin: 0px 15px 120px;
}
.origin p {
    line-height: 2.0;
}

.company {
    text-align: center;
    padding-top: 200px;
}
.company h3 {
    margin-bottom: 100px;
}
.company table {
    width: 1080px;
    margin: auto;
}
.company table tr {
    margin-bottom: 40px;
}
.company table tr th {
    color: #981e75;
    font-size: 24px;
    text-align: right;
    padding: 5px 5px;
    padding-right: 40px;
    width: 25%;
    vertical-align: top;
    line-height: 2.0;
}
.company table tr td {
    color: #666;
    font-size: 24px;
    text-align: left;
    padding: 5px 5px;
    padding-left: 40px;
    padding-bottom: 30px;
    border-left: 2px solid #981e75;
    line-height: 2.0;
}
.company table tr td a {
    color: #981e75;
}


.history {
    text-align: center;
    padding-top: 100px;
}
.history h3 {
    margin-bottom: 100px;
}
.history ul {
    width: 900px;
    text-align: left;
}
.history ul li {
    padding-left: 100px;
}
.history ul li span.year {
    display: block;
    color: #991e75;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}
.history ul li p {
    font-size: 24px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.csr h3 {
    font-size: 48px;
    text-align: center;
    margin-bottom: 100px;
}
.csr .sectionInner ul li {
    margin-bottom: 100px;
}
.csr .sectionInner .flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.csr .sectionInner .flex div {
    width: 60%;
    padding-right: 80px;
}
.csr .sectionInner .flex img {
    width: 40%;
}
.csr .sectionInner h4 {
    color: #991e75;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
}
.csr .sectionInner h4 span {
    font-size: 28px;
    font-weight: 600;
    line-height: 2.8;
}
.csr .sectionInner ul li ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.csr .sectionInner ul li ul li {
    width: 23.5%;
    margin-right: 2%;
    text-align: center;
    margin-bottom: 30px;
}
.csr .sectionInner ul li ul li:nth-child(4n) {
    margin-right: 0px;
}
.csr .sectionInner ul li ul li p span {
    font-size: 16px;
}



.interviewHead {
    background: url("../img/sub/interviewHead01.png") no-repeat;
    background-size: cover;
    padding: 200px 20px 100px 0px;
    margin-bottom: 60px;
}
.interviewHead.interview02 {
    background-image: url("../img/sub/interviewHead02.png");
}
.subPage    .interviewHead h3 {
    margin-left: 8%;
    color: #991e75;
    font-size: 52px;
    font-weight: 600;
}
.interviewHead h3 span {
    display: block;
    color: #999;
    font-size: 26px;
    font-weight: 500;
    line-height: 2.4;
}
.interviewHead h3 span.wh {
    color: #FFF;
}
.interviewBody {
    width: 100%;
    overflow: hidden;
}
.interviewBody img {
    width: 75%;
    margin-right: 25%;
    margin-bottom: 100px;
}
.interviewBody img.photoRight {
    width: 75%;
    margin-left: 25%;
    margin-right: 0;
}
.interviewSchedule {
    position: relative;
    margin-bottom: 200px;
}
.interviewSchedule::before {
    content: "";
    position: absolute;
    top: -80px;
    width: 90%;
    height: 15px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    margin-right: 10%;
}
.interviewSchedule h4 {
    position: absolute;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 100px;
    margin-left: 8%;
}
.interviewSchedule h4 span {
    position: relative;
    top: -6px;
    right: -70px;
    color: #666;
    font-size: 26px;
    font-weight: 500;
    -webkit-text-fill-color: #666;
}
.interviewSchedule h4 span::before {
    transform: skewX(340deg);
    content: "";
    position: absolute;
    top: 3px;
    bottom: 0;
    left: -35px;
    right: 0;
    width: 9px;
    height: 33px;
    background: linear-gradient(to bottom, #1f257d 0%, #961e75 100%);
}
.interviewSchedule img.photoLeft {
    width: 45%;
    margin-top: 150px;
    margin-right: 5%;
}
.interviewSchedule .messageRight {
    width: 50%;
    margin-top: 150px;
}
.interviewSchedule h5 {
    color: #981e75;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 60px;
}
.interviewSchedule tr th {
    color: #981e75;
    font-size: 24px;
    font-weight: 600;
    vertical-align: baseline;
    padding: 0px 0px 30px;
}
.interviewSchedule tr td {
    font-size: 24px;
    font-weight: normal;
    padding-left: 20px;
    padding: 0px 0px 30px 50px;
}
.message02.interviewEnd .messageLeft {
    width: 52%;
    padding-left: 8%;
    padding-top: 0px;
}
.interviewMore {
    text-align: center;
    padding: 100px 0px 200px;
}
.interviewMore a.btn {
    position: relative;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    width: 240px;
    padding: 12px 10px 14px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
    margin: 0px 100px;
}
.interviewMore a.btn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    background: linear-gradient(to left, #4a2279 0%, #961E74 80%);
    transition: .3s all;
}
a.interviewLink {
    position: relative;
    width: 100%;
    text-decoration: none !important;
    transition: .3s all;
}
a.interviewLink::after {
    position: absolute;
    top: 190px;
    right: 120px;
    content: "┐";
    color: #981e75;
    font-size: 72px;
    transform: rotate(45deg);
}
a.interviewLink .interviewHead {
    transition: .3s all;
}
a.interviewLink:hover .interviewHead {
    opacity: 0.8;
}



.contactTop .sectionInner {
    padding-left: 40px;
}
.contactTop .sectionInner p {
    text-align: left;
}
.contactTop .contactFlow {
    margin-top: 100px;
}
.contactTop .contactFlow ul li {
    position: relative;
    margin-bottom: 80px;
}
.contactTop .contactFlow ul li:last-child {
    margin-bottom: 0px;
}
.contactTop .contactFlow ul li span.num {
    position: absolute;
    top: 8px;
    left: 0px;
    content: "";
    color: #FFF;
    font-size: 40px;
    font-weight: 400;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    letter-spacing: 1px;
    line-height: 78px;
    width: 80px;
    height: 80px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    text-align: center;
}
.contactTop .contactFlow ul li h3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-top: 20px;
    padding-left: 120px;
    margin-bottom: 30px;
}
.contactTop .contactFlow ul li h3 span {
    position: relative;
    display: block;
    color: #777;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0px;
    -webkit-text-fill-color: #666;
}
.contactTop .contactFlow ul li p {
    padding-left: 120px;
}
.contactTop .contactFlow ul li div {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 20%;
    padding: 20px 20px;
    background: #f1f1f1;
}
.contactTop .contactFlow ul li div p {
    padding-left: 20px;
}
.contactTop .contactFlow ul li div p a {
    position: relative;
    color: #961e75;
    font-size: 38px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .3 all;
}
.contactTop .contactFlow ul li div p a:hover {
    opacity: 0.85;
}
.contactTop .contactFlow ul li div p a:hover::after {
    position: absolute;
    content: "";
    left: 0px;
    bottom: 15px;
    height: 2px;
    width: 100%;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.contactInner {
    margin: 0px 4% 200px;
}
.contactInner .sectionInner h3 {
    margin-bottom: 100px;
}
form#mailformpro dl dt,
form#mailformpro dl dd {
    background: transparent !important;
}




.group {
    padding-bottom: 100px;
}
.group img {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 640px;
}



.slidebar {
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url('../img/musashino_rec_top0819_barT.png');
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.slidebar.barBottom {
    background-image: url('../img/musashino_rec_top0819_barB.png');
}

@keyframes slide_img {
    100% {
        background-position: -10000px 0;
    }
}




.news .sectionInner {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 200px);
}
.news .sectionInner .newsLeft {
    width: 40%;
}
.news .sectionInner h3 {
    color: #014589;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 52px;
    font-weight: 600;
    margin-top: 100px;
    margin-bottom: 30px;
}
.news ul {
    width: 60%;
}
.news ul li {
    height: 100px;
    border-bottom: 2px solid #014589;
    margin-bottom: 4px;
}
.news ul li a {
    display: block;
    font-size: 18px;
    line-height: 2.0;
    padding: 10px 20px;
}
.news ul li a:hover {
    color: #014589;
}
.news ul li a span {
    display: block;
    color: #014589;
    font-size: 18px;
}
.news ul li a:hover span {
    text-decoration: none !important;
}
.arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after {
    position: absolute;
    top: 22px;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow::before {
    right: 1.5px;
    width: 30px;
    height: 2px;
    background: #014589;
}
.arrow::after {
    right: 2px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #014589;
    border-right: 2px solid #014589;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}




.footerContact {
    text-align: center;
    background: #F2F2F2;
    padding: 20px 0;
}
.footerContact h4 {
    color: #333;
    font-size: 32px;
    font-weight: 800;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 20px;
}
.footerContact p {
    color: #333;
    font-size: 20px;
    line-height: 2.0;
    margin-bottom: 60px;
}
.footerContact a.btn {
    color: #014589;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 10px 50px 15px;
    border: 4px solid #014589;
    border-radius: 40px;
    text-decoration: none;
    -webkit-transition: .2s color, .2s background;
       -moz-transition: .2s color, .2s background;
        -ms-transition: .2s color, .2s background;
         -o-transition: .2s color, .2s background;
            transition: .2s color, .2s background;
}
.footerContact a:hover.btn {
    color: #FFF;
    background: #014589;
}






.subPage {
	margin-top: 0px;
}
.subPage h3 {
    color: #666;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
}
.subPage .subHeader {
    position: relative;
    text-align: left;
    margin-top: 200px;
    margin-left: 8%;
}
.subPage .subHeader.hr {
    margin-bottom: 80px;
}
.subPage .subHeader.hr::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -80px;
    width: 100%;
    height: 15px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.subPage .subHeader h2 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 40px;
}
.subPage .subHeader h2 span {
    /*
    font-family: "Helvetica Neue", Helvetica, "メイリオ", Meiryo, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
    */
    position: relative;
    top: -6px;
    right: -70px;
    color: #666;
    font-size: 26px;
    font-weight: 500;
    -webkit-text-fill-color: #666;
}
.subPage .subHeader h2 span::before {
    transform: skewX(340deg);
    content: "";
    position: absolute;
    top: 3px;
    bottom: 0;
    left: -40px;
    right: 0;
    width: 9px;
    height: 33px;
    background: linear-gradient(to bottom, #1f257d 0%, #961e75 100%);
}

.subPage .subMenu {
    min-height: initial;
    display: flex;
    flex-wrap: wrap;
    padding-left: 12px;
}
.subPage .subMenu li {
    margin-right: 20px;
    z-index: 99;
}
.subPage .subMenu li a {
    position: relative;
    color: #333;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    width: 150px;
    height: 50px;
    text-decoration: none;
}
.subPage .subMenu li a::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #DDD;
    transition: .2s all;
}
.subPage .subMenu li a:hover {
    color: #FFF;
}
.subPage .subMenu li.selected a {
    color: #FFF;
    pointer-events: none;
}
.subPage .subMenu li.selected a::before,
.subPage .subMenu li a:hover::before {
    background: #991e75;
}



.breadcrumbs {
	width: 1300px;
	max-width: 100%;
	margin: 10px auto;
}
.breadcrumbs ul {
	display: table;
	font-size: 14px;
}
.breadcrumbs ul li {
	margin: 0 10px 0 0;
	font-size: 15px;
	float: left;
}
.breadcrumbs ul li:last-child a {
	font-size: 15px;
	line-height: 15px;
}
.breadcrumbs ul li::after {
	padding: 0 0 0 10px;
	content: ">";
	font-size: 14px;
}
.breadcrumbs ul li:last-child::after {
	padding: 0;
	content: "";
}
.breadcrumbs ul li a:hover {
    color: #0070bd;
}


.eachTextAnime span {
    opacity: 0;
}
.eachTextAnime.appeartext span {
    animation:text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.delayed-image {
    /* じわっと画像が表示される */
    animation: fadeIn 3.2s ease 1s 1 normal;
    -webkit-animation: fadeIn 3.2s ease 1s 1 normal;
}
 
/* じわっと画像が表示される ---------　一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用　---------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



.sectionInner {
    width: auto;
    margin: 0px 4% 0px 8%;
    margin: 0px 7% 0px 8%;
    padding: 80px 0px;
}
.topWorks h2,
.topPage h2 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 40px;
}
.topWorks h2 span,
.topPage h2 span {
    position: relative;
    color: #777;
    font-size: 36px;
    font-weight: 600;
    -webkit-text-fill-color: #666;
}
.serviceKodawari a.btn,
.topWorks a.btn,
.subService a.btn,
.topPage a.btn {
    position: relative;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    width: 240px;
    padding: 12px 10px 14px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
    margin: 0 30px;
}
.serviceKodawari a.btn {
    width: 400px;
}
.serviceKodawari a.btn::before,
.topWorks a.btn::before,
.subService a.btn::before,
.topPage a.btn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    background: linear-gradient(to left, #4a2279 0%, #961E74 80%);
    transition: .3s all;
}
.serviceKodawari a.btn:hover::before,
.topWorks a.btn:hover::before,
.subService a.btn:hover::before,
.topPage a.btn:hover::before {
    background: #961E74;
    background: linear-gradient(to left, #961E74 0%, #4a2279 80%);
    background: linear-gradient(to left, #961E74 0%, #961E74 80%);
}

.topAbout {
    text-align: center;
    margin-top: 30px;
    padding-top: 120px;
    margin-bottom: 180px;
}
.topAbout p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    margin-bottom: 100px;
}

.topStrength {
    position: relative;
    height: 800px;
}
.topStrength::before {
    position: absolute;
    content: "";
    top: 0px;
    right: 0px;
    width: 70%;
    height: 700px;
    margin-left: 30%;
    background: url("../img/top/strengthBG.png") no-repeat;
    background-size: cover;
}
.topStrength div {
    position: absolute;
    left: 100px;
    width: 680px;
    padding: 80px 100px;
    margin-top: 120px;
    background: #FFF;
}
.topStrength p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    margin-bottom: 100px;
}

.topService {
    text-align: center;
    margin-top: 110px;
    padding-top: 40px;
}
.topService p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    margin-bottom: 60px;
}
.topService ul {
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
}
.topService ul li {
    width: 100%;
    text-align: center;
    padding: 150px 0 80px;
    background: url("../img/top/topService01.png") no-repeat;
    background-size: cover;
}
.topService ul li:last-child {
    background-image: url("../img/top/topService02.png");
}
.topService ul li h3 {
    color: #FFF;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 80px;
}
.topWorks {
    text-align: center;
    padding-top: 150px;
}

.topInstagram {
    text-align: center;
    position: relative;
    margin-top: 100px;
    padding-top: 80px;
    background: #F8F8F8;
}
.topInstagram a img {
    width: 60px;
    margin-bottom: 60px;
}
.topInstagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to left, #1f257d 0%, #971e75 100%);
}
.topInstagram::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to left, #1f257d 0%, #971e75 100%);
}


.topCompany {
    margin-top: 200px;
}
.topCompany .sectionInner {
    background: url("../img/top/companyBG.png") no-repeat;
    background-size: cover;
    padding: 150px 100px 80px;
}
.topCompany h2 {
    position: relative;
    display: block;
    background: #FFF;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #FFF;
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 100px;
}
.topCompany h2 span {
    position: relative;
    color: #FFF;
    font-size: 36px;
    font-weight: 500;
    -webkit-text-fill-color: unset;
}
.topPage a.btn {
    margin: 0 10px;
}





.overview {
    background: #f2f2f2;
    padding: 60px 140px 80px;
}
.overview ul {
    display: flex;
    flex-wrap: wrap;
}
.overview ul li {
    width: calc(25% - 21px);
    margin-right: 28px;
    text-align: center;
}
.overview ul li:last-child {
    margin-right: 0;
}
.overview ul li a img {
    border: 1px solid #CCC;
    background: #FFF;
    margin-bottom: 10px;
}
.overview h4 {
    font-size: 16px;
}




/* ボタン共通設定 */
.btn04 {
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width: 300px;
    padding: 20px 30px;
    color: #333;
    font-size: 18px;
    border-top: 1px solid #d81e05;
    border-bottom: 1px solid #d81e05;
    border: 1px solid #d81e05;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
    z-index: 0;
}

/*hoverした際のボタンの形状*/
.btn04:hover {
    color: #FFF;
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: .6s;
    text-decoration: none;
}

/*線の設定*/
.btn04 span{
    display: block;
    z-index: 2;
}

/*== 線から塗に変化（左から右） */

/*線の設定*/
.borderleft span::before,
.borderleft span::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    width: 0;
    height: 1px;
    /*線の形状*/
    background: #d81e05;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*左上線*/
.borderleft span::before {
    left: 0;
    top: 0;
}

/*左下線*/
.borderleft span::after {
    left: 0;
    bottom: 0;
}

/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
    width: 100%;
}

/*背景の設定*/
.borderleft::before {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    left: 0;
    bottom:0;
    z-index: -1;
    /*背景の形状*/
    height: 100%;
    width: 0;
    background: #d81e05;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*hoverをすると背景が伸びる*/
.borderleft:hover::before {
    width: 100%;
    /*0.4秒遅れてアニメーション*/
    transition-delay: .4s;
}



.viewMore a:hover {
    text-decoration: none !important;
}
.viewMore img {
    position: relative;
    left: 12px;
    top: -15px;
    width: 28px;
    margin-right: 40px;
}
.viewMore a span {
    position: relative;
    top: -2px;
    z-index: 2;
    color: #d81e05;
    font-size: 18px;
    transition: .3s ease-out;
}
.viewMore a:hover span {
    color: #FFF;
}


/*丸がボタンに変形する*/

.btntransform {
    /*丸の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/  
    display: inline-block;
    padding:　0 0 0 15px;
    line-height: 50px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/* 丸が動く */
.btntransform::before {
    content: '';
    /*絶対配置で丸の位置を決める*/
    position: absolute;
    left: 0;
    z-index: 0;
    /*丸の形状*/
    width: 50px;
    height: 50px;
    background: #d81e05;
    border-radius: 25px;
    /*アニメーションの指定*/
    transition: .3s ease-out;
}

/*hoverした際の形状*/
.btntransform:hover::before {
    width: 200px;
}

/* 矢印の形状 */
.btntransform::after {
    display: none;
    position: absolute;
    content: '';
    top: 1.3em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}

/*　画像の拡大　*/
.zoomIn img {
    transform: scale(1);
    transition: .3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomIn a:hover img { /*hoverした時の変化*/
    transform: scale(1.1); /*拡大の値を変更したい場合はこの数値を変更*/
}
/*　画像のマスク　*/
.mask {
    display: block;
    line-height: 0; /*行の高さを0にする*/
    overflow: hidden; /*拡大してはみ出る要素を隠す*/
}


.fadebox {
    opacity: 0;
    transform: translate(0,100px); 
    -webkit-transform: translate(0,100px); 
    transition: 1.5s;
}
.fadebox1 {
    transform: translate(0,200px); 
    -webkit-transform: translate(0,200px); 
    transition: 1.5s;
}
.fadebox2 {
    transform: translate(0,300px); 
    -webkit-transform: translate(0,300px); 
    transition: 1.5s;
}
.fadeboxR {
    opacity: 0;
    transform: translate(100px,0); 
    -webkit-transform: translate(100px,0); 
    transition: 2s;
}
.fade-stop {
    opacity: 1.0;
    transform: translate(0,0); 
    -webkit-transform: translate(0,0);
}





.footerRecruit {
    margin-top: 120px;
    padding-top: 40px;
    margin-bottom: 200px;
}
.footerRecruit .footerRecruitInner {
    position: relative;
    padding: 100px 120px;
    background: linear-gradient(to left, #6a2178 0%, #961E74 80%);
    margin-top: 100px;
}
.footerRecruit h2 {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    color: #FFF;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 50px;
}
.footerRecruit h2 span {
    font-family: 'Josefin Sans', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, 'Noto Sans JP', sans-serif;
    color: #FFF;
    font-size: 36px;
    font-weight: 600;
    -webkit-text-fill-color: unset;
}
.footerRecruit ul {
    margin-bottom: 60px;
}
.footerRecruit ul li {
    margin-bottom: 30px;
}
.footerRecruit ul li a {
    position: relative;
    color: #FFF;
    font-size: 20px;
    text-decoration: none;
    padding-left: 45px;
}
.footerRecruit ul li a:hover {
    text-decoration: underline;
}
.footerRecruit ul li a::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 7px;
    left: 10px;
    width: 20px;
    height: 18px;
    background: #FFF;
}
.footerRecruit .entryBtn {
    position: relative;
    color: #8e1f76;
    font-size: 26px;
    font-weight: 800;
    width: 240px;
    padding: 10px 10px 15px;
    margin-left: 20px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
}
.footerRecruit .entryBtn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #FFF;
    transition: .3s background;
}
.footerRecruit .entryBtn:hover::before {
    background: #CCC;
}
.footerRecruit a.interview {
    position: absolute;
    right: 35%;
    bottom: -30px;
    width: 320px;
    text-align: center;
    background: #FFF;
}
.footerRecruit a.interview02 {
    position: absolute;
    right: 7%;
    top: -30px;
    bottom: initial;
    width: 320px;
}
.footerRecruit a.interview span {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #FFF;
    font-size: 38px;
    font-weight: 300;
    line-height: 1.6;
    text-decoration: none;
}
.footerRecruit a.interview span span {
    position: relative;
    font-family: 'Josefin Sans', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, 'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: 500;
}



footer {
    position: relative;
    padding-top: 10px;
    background: transparent;
}
footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 14px;
    background: linear-gradient(to left, #1f257d 0%, #971e75 100%);
}
.problemDetail .sectionInner a.btn,
footer a.btn {
    position: relative;
    color: #FFF;
    font-size: 22px;
    font-weight: 500;
    width: 240px;
    padding: 14px 10px 18px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
    margin: 0 15px;
}
.problemDetail .sectionInner a.btn::before,
footer a.btn::before {
    transform: skewX(340deg);
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    background: linear-gradient(to left, #4a2279 0%, #961E74 80%);
    transition: .3s opacity;
}
.problemDetail .sectionInner a.btn:hover::before,
footer a.btn:hover::before {
    opacity: 0.85;
}
footer .footerInner {
    position: relative;
    width: calc(100% - 160px);
    margin: 0 auto 40px;
    display: flex;
    flex-wrap: wrap;
}
footer .footerInner .footerLogo {
    width: 200px;
    margin-bottom: 40px;
}
footer .footerInner .footerInfo {
    width: 36%;
}
footer .footerInner .footerInfo h3 {
    color: #666;
    font-size: 24px;
    font-weight: 500;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
    margin-bottom: 10px;
}
footer .footerInner .footerInfo h3 span {
    color: #666;
    font-size: 26px;
    font-weight: 500;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
}
footer .footerInner .footerInfo p {
    color: #999;
    font-size: 16px;
    font-weight: 500;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
    margin-bottom: 50px;
}
footer .footerInner .footerInfo p span {
    font-size: 16.5px;
}
footer .footerInner .footerMenu {
    width: 64%;
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
}
footer .footerInner .footerMenu ul {
    width: 25%;
    margin-right: 5%;
}
footer .footerInner .footerMenu ul:last-child {
    width: 35%;
    margin-right: 0;
}
footer .footerInner .footerMenu ul li {
    position: relative;
    margin-right: 0px;
    margin-bottom: 30px;
}
footer .footerInner .footerMenu ul li::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 6px;
    left: -40px;
    width: 14px;
    height: 14px;
    background: #991e75;
}
footer .footerInner .footerMenu ul:last-child {
    margin-right: 0;
}
footer .footerInner .footerMenu ul li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
}
footer .footerInner .footerMenu ul li a.parent {
    font-weight: 500;
}
footer .footerInner .footerMenu ul li a:hover {
    color: #991e75;
}
footer .copyright {
    width: calc(100% - 160px);
    margin: 0 auto;
    padding-bottom: 40px;
}
footer .copyright p {
    text-align: left;
    color: #999999;
    font-size: 14px;
}
footer .pagetop {
    position: absolute;
    right: 40px;
    bottom: 0px;
}
footer .pagetop a {
    display: inline-block;
    width: 90px;
    height: 160px;
    padding-top: 110px;
    color: #FFF;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    background: #FE0006;
}
footer .pagetop a::before {
    position: absolute;
    content: "";
    top: 40px;
    right: 30px;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    height: 30px;
    width: 30px;
    transform: rotate(315deg);
}
footer .pagetop a::after {
    position: absolute;
    content: "";
    top: 35px;
    right: 45px;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #FFF;
    height: 50px;
    width: 50px;
    transform: rotate(90deg);
}



.interviewTop {
    background: url("../img/interview/interviewBG01.png") no-repeat;
    background-size: contain;
}
.interviewMiddle {
    background: url("../img/interview/interviewBG02.png") no-repeat;
    background-size: contain;
    background-position-y: bottom;
}
.interviewMiddle .subPageInner {
    margin-bottom: 0px;
    padding-bottom: 100px;
}
.interviewBottom {
    background: url("../img/interview/interviewBG03.png") no-repeat;
    background-size: cover;
}

.interviewTop h3,
.interviewBottom h3 {
    color: #FF0006;
    font-size: 80px;
    font-weight: 900;
    margin-bottom: 150px;
}
.interviewBottom h3 {
    margin-bottom: 50px;
}
.interviewBottom h3 span,
.interviewTop h3 span {
    display: block;
    color: #333;
    font-size: 36px;
}
.interview ul li {
    position: relative;
}
.interview ul li span {
    position: relative;
    top: 0px;
    color: #FF0006;
    font-size: 40px;
    font-weight: 900;
    display: inline-block;
    margin-bottom: 60px;
}
.interview ul li.two-tiered span {
    margin-bottom: 120px;
}
.interview ul li h4 {
    position: absolute;
    top: 0px;
    left: 80px;
    color: #333;
    font-size: 40px;
    font-weight: 900;
}
.interview ul li p,
.interview ul li p.box {
    margin-left: 80px;
    margin-right: 100px;
    margin-bottom: 100px;
}
.interview ul li p span {
    color: #666;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 0px !important;
}
.interview ul li .rightPhoto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 80px;
    margin-bottom: 80px;
}
.interview ul li .rightPhoto p {
    width: 50%;
    margin-right: 5%;
    margin-left: 0px;
}
.interview ul li .rightPhoto img {
    width: 45%;
    margin-top: -160px;
}
.interviewMiddle .interview ul li .rightPhoto img {
    margin-top: 40px;
}
.interviewBottom img {
    width: 40%;
}
.interviewBottom .breakPhoto {
    width: 70%;
    margin-right: auto;
    margin-bottom: 200px;
}
.interview .timeline li span {
    position: absolute;
    top: 8px;
    left: 4px;
    background: #FF0006;
    margin-bottom: 0;
}
.interview .timeline dl dt {
    display: inline-block;
    color: #FFF;
    font-size: 20px;
    background: #FF0006;
    padding: 2px 10px 4px;
    margin-bottom: 5px;
}
.interview .timeline dl dd {
    font-size: 24px;
}
.interview .schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.interview .timeline {
    width: 50%;
    margin-right: 8%;
    flex-wrap: wrap;
    align-items: flex-start;
}
.interview ul.slider3 {
    width: 42%;
    margin-top: 280px;
}
.interview .short ul.slider3 {
    margin-top: 50px;
}
.interviewBottom ul.slider3 img {
    width: 100%;
}
.slick-dots {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -40px !important;
    text-align: center;
    margin: 20px 0 0 0;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width: 12px !important;
    height: 12px !important;
    display: block;
    border-radius: 0 !important;
    background: #ccc;
    border: none;
    cursor: pointer;
}
.slick-dots .slick-active button {
    background: #FFF !important;
}

.interviewMessage {
    padding-top: 60px;
}
.messageBox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.messageBox img {
    width: 30%;
    margin-right: 5%;
    margin-top: 0px;
}
.messageBox div {
    width: 65%;
}
.messageBox div h4 {
    color: #333;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 40px;
}
.messageBox div p {
    color: #999;
    font-size: 20px;
    padding-right: 15%;
}












.dataDetail {
    background: url("../img/data/dataBG.png") no-repeat #FFF;
    background-size: contain;
}
.dataDetail .more {
    margin-left: auto;
}
.dataDetail .subPageInner {
    padding: 100px 100px 100px 0;
}
.dataDetail ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 30px;
}
.dataDetail ul li {
    position: relative;
    width: 32%;
    height: 520px;
    margin-right: 2%;
    background: #FFF;
    padding: 20px 20px 0;
    text-align: center;
    font-size: 36px;
    border: 2px solid #FF0006;
}
.dataDetail ul.twoColumns li {
    position: relative;
    width: 49%;
    height: 550px;
    font-size: 36px;
}
.dataDetail ul li.data11,
.dataDetail ul li.data12 {
    height: 350px;
}
.dataDetail ul li.wide {
    width: 66%;
}

.dataDetail ul li:last-child {
    margin-right: 0;
}
.dataDetail ul li h3 {
    font-size: 42px;
    margin-bottom: 10px;
}
.dataDetail ul li h3 span {
    font-size: 52px;
    margin: 0 5px;
}
.dataDetail ul li img {
    width: 50%;
    margin: auto;
}
.dataDetail ul li.data01 img {
    width: 52%;
    margin-top: 10px;
    margin-left: 40%;
    margin-right: 5%;
}
.dataDetail ul li.data02 img {
    width: 25%;
    margin-right: 0;
    margin-left: 10%;
}
.dataDetail ul li.data07 img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
}
.dataDetail ul li.data03 p,
.dataDetail ul li.data04 p,
.dataDetail ul li.data05 p {
    color: #333;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    padding-left: 15%;
}
.dataDetail ul li.data06 .data06Text {
    position: absolute;
    left: auto;
    right: 30px;
    bottom: 30px;
    width: 36%;
    text-align: left;
    padding: 20px 20px 20px 20px;
    border: 2px solid #4177AC;
}
.dataDetail ul li.data06 .data06Text h4 {
    color: #4177AC;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.dataDetail ul li.data06 .data06Text p {
    font-size: 16px;
    line-height: 2.0;
}
.dataDetail ul li.data09 h4,
.dataDetail ul li.data10 h4 {
    font-size: 28px;
    text-align: left;
    padding-left: 20px;
    margin-bottom: 10px;
}
.dataDetail ul li.data09 p,
.dataDetail ul li.data10 p {
    font-size: 16px;
    line-height: 2.0;
    text-align: left;
    padding-left: 20px;
}
.dataDetail ul li.data09 img,
.dataDetail ul li.data10 img {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 25%;
}
.dataDetail ul li.data11 .count,
.dataDetail ul li.data12 .count {
    font-size: 128px;
    margin-left: -100px;
}
.dataDetail ul li.data11 img,
.dataDetail ul li.data12 img {
    position: absolute;
    right: 10%;
    width: 20%;
}
.dataDetail ul li.data02 h4 {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    text-align: left;
}
.dataDetail ul li .dataLogo {
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: unset !important;
    width: 80px !important;
}
.dataDetail ul li .comment {
    color: #ff0006;
    font-size: 16px;
    margin-top: 10px;
}
.dataDetail ul li.data01 .comment,
.dataDetail ul li.data02 .comment {
    position: absolute;
    right: 20px;
    bottom: 20px;
    text-align: right;
    margin-right: 20px;
}
.dataDetail ul li.data13 h3 {
    margin-bottom: 100px;
}

.workHeader ul.workStyleMenu {
    position: relative;
    display: inline-block;
    background: #FF0006;
    margin-bottom: 40px;
}
.workHeader ul.workStyleMenu li {
    display: inline-block;
    background: #FF0006;
    margin-right: 50px;
}
.workHeader ul.workStyleMenu::before {
    position: absolute;
    content: "";
    top: 0px;
    left: -400px;
    width: 400px;
    height: 100px;
    background: #FF0006;
}
.workHeader ul.workStyleMenu::after {
    position: absolute;
    content: "";
    top: 0px;
    right: -100px;
    border-bottom: 100px solid transparent;
    border-left: 100px solid #FF0006;
}
.workHeader ul.workStyleMenu li a {
    color: #FFF;
    font-size: 24px;
    font-weight: 300;
    line-height: 100px;
}
.workHeader ul.workStyleMenu li.selected a {
    font-weight: bold;
}
.benefit {
    background: url("../img/sub/benefitBG.png") no-repeat;
    background-size: cover;
    background-position: top;
}
.career {
    background: url("../img/sub/careerBG.png") no-repeat;
    background-size: cover;
    padding-bottom: 100px;
}
.workHeader h2 {
    color: #FF0006;
    font-size: 80px;
    font-weight: 900;
}
.workHeader h2 span {
    display: block;
    color: #333;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.0;
}
.workHeader ul.benefitTab {
    display: flex;
    flex-wrap: wrap;
    width: 85%;
    margin-top: 80px;
    padding-left: 40px;
    border-bottom: 4px solid #FF0006;
    margin-bottom: 100px;
}
.workHeader ul.benefitTab li {
    color: #FF0006;
    font-size: 24px;
    padding: 8px 40px;
    cursor: pointer;
}
.workHeader ul.benefitTab li:hover,
.workHeader ul.benefitTab li.select {
    color: #FFF;
    background: #FF0006;
    text-decoration: none;
}
ul.benefitBody li.hide {
    display: none;
}
ul.benefitBody li h4 {
    color: #FF0006;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 40px;
}
ul.benefitBody li span {
    color: #FF0006;
}
ul.benefitBody li span.caption {
    color: #333;
    font-size: 16px;
}
ul.benefitBody li img {
    height: 240px;
    margin-right: 2%;
}
.career h3.leftA {
    font-size: 36px;
    line-height: 1.9;
}
.career h3.leftA span span {
    color: #333;
}
.career01,
.careerStep {
    padding: 100px 0 0;
    background: #FFF;
}
.career02 {
    padding: 100px 0 1px;
    background: #f3f3f3;
}
.career01 h3,
.career02 h3,
.careerStep h3 {
    color: #FF0006;
}
.career01 h4,
.career02 h4,
.careerStep h4 {
    color: #444;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 40px;
}
.career01 span span span,
.career02 span span span,
.careerStep span span span {
    color: #FF0006;
    font-weight: bold;
}
.careerStep ul li {
    margin-bottom: 60px;
}
.career02 img {
    width: 70%;
    margin: 80px 20% 0px 10%;
}
.careerStep img {
    width: 90%;
    margin: 40px 10% 100px 0px;
}
.careerStep p img {
    width: auto;
    height: 240px;
    margin: 20px 0px 20px 28px;
}

.flow ul {
    padding-top: 40px;
    padding-bottom: 100px;
}
.flow ul li {
    padding-top: 60px;
}
.flow ul li h3 {
    font-size: 36px;
}
.flow ul li h3 span {
    margin-right: 10px;
}
.flow ul li p {
    margin-left: 10%;
}
.flow ul li p a {
    color: #FF0006;
}
.flowBottom {
    padding: 100px 0px;
    background: #f3f3f3;
    text-align: center;
}
.flowBottom h3 {
    color: #FF0006;
    font-size: 32px;
}
.flowBottom ul li {
    position: relative;;
    width: 55%;
    margin: 60px auto;
    background: #FFF;
    padding: 15px 30px 10px;
    text-align: left;
}
.flowBottom ul li a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0px;
}
.flowBottom ul li a::before {
    transform: skewX(320deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50px;
    width: 160px;
    background-color: #FF0006;
}
.flowBottom ul li a::after {
    position: absolute;
    top: 40px;
    right: 15px;
    content: "》";
    color: #FFF;
    font-size: 24px;
}
.flowBottom ul li h4 {
    color: #333;
    font-size: 28px;
    font-weight: 900;
}
.flowBottom ul li h4 span {
    font-size: 24px;
    font-weight: 900;
}

.faq {
    padding-top: 100px;
    padding-right: 10%;
}
.faq .accordion-area {
    max-width: initial;
}
.faq .accordion-area section {
    border-top: none;
    background: transparent;
}
.faq .accordion-area section h3 {
    color: #333;
    font-size: 32px;
    font-weight: 900;
}
.faq .accordion-area section h3 span {
    color: #FF0006;
    font-size: 32px;
    font-weight: 900;
    margin-right: 20px;
}
.faq .accordion-area section p {
    color: #666;
    font-size: 22px;
    padding-left: 8%;
}

.jobinfo {
    padding-top: 50px;
}
.jobinfo table {
    padding-right: 10%;
}
.jobinfo table tr th {
    width: 20%;
    color: #FF0006;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    vertical-align: baseline;
    padding: 50px 0;
    border-bottom: 2px solid #CCC;
}
.jobinfo table tr td {
    color: #666;
    font-size: 20px;
    line-height: 2.0;
    padding: 50px 0;
    border-bottom: 2px solid #CCC;
}
.jobinfo table tr td p.head {
    color: #333;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    margin-bottom: 20px;
}
.jobinfo table tr:last-child th,
.jobinfo table tr:last-child td {
    border-bottom: none;
}

.jobinfo .table {
    padding-right: 10%;
}
.jobinfo .table dl {
    border-bottom: 2px solid #CCC;
}
.jobinfo .table dl dt {
    float: left;
    width: 20%;
    color: #FF0006;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    vertical-align: baseline;
    padding: 50px 0 0;
}
.jobinfo .table dl dd {
    width: 80%;
    margin-left: 20%;
    color: #666;
    font-size: 20px;
    line-height: 2.0;
    padding: 50px 0;
}
.jobinfo .table dl dd p.head {
    color: #333;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    margin-bottom: 20px;
}
.jobinfo .table dl.last-child dt,
.jobinfo .table dl.last-child dd {
    border-bottom: none;
}

.jobinfoBottom {
    position: relative;
    padding: 120px 100px 20px;
    padding: 120px 0px 20px;
    background: #f3f3f3;
}
.jobinfoBottom h3 {
    color: #FF0006;
    font-size: 32px;
    padding-right: 10%;
    margin-bottom: 120px;
    margin-bottom: 80px;
}
.jobinfoBottom h4 {
    color: #333;
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 40px;
}
.jobinfoBottom img {
    position: absolute;
    bottom: 150px;
    bottom: 0px;
    right: 0px;
    width: 540px;
}












.parallax-section {
    position: relative;
    height: 400px;
    background-attachment: fixed;
    background-size: cover;
    background-position: top center;
}
.parallax-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.parallax-content p {
    color: #FFF;
    font-size: 48px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}




.groupMenu {
    display: flex;
    flex-wrap: wrap;
}
.groupMenu li {
    margin-right: 17px;
}
.groupMenu li:last-child {
    margin-right: 0px;
}
.groupMenu li a {
    text-align: center;
    color: #333;
    font-size: 18px;
    background: #F8F8F8;
    width: 150px;
    height: 50px;
    line-height: 47px;
    transition: .2s all;
}
.groupMenu li.selected a,
.groupMenu li a:hover {
    color: #FFF;
    background: #d81e05;
    text-decoration: none;
}
.groupMenu li:nth-child(5) a {
    width: auto;
    padding: 0px 20px;
}


.visionInner {
    text-align: center;
    padding: 100px 0 150px;
}
.vision01 {
    padding-top: 40px;
}
.vision01 img {
    width: 40%;
}
.visionInner h3 {
    font-size: 36px;
    margin-bottom: 30px;
    border-bottom: none;
}
.section-vision01 {
    background-image: url("../img/group/visionBG01.webp");
}
.section-vision02 {
    background-image: url("../img/group/visionBG02.webp");
}
.section-vision03 {
    background-image: url("../img/group/visionBG03.webp");
}
.section-vision04 {
    background-image: url("../img/group/visionBG04.webp");
}


.greetingInner h3 {
    border-bottom: none;
}
.greeting01 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.greeting01 h3 {
    width: 30%;
    padding-top: 80px;
}
.greeting01 img {
    width: 70%;
}
.greeting02,
.greeting03,
.greeting04 {
    overflow: hidden;
    background: #F2F2F2;
}
.greeting02 h3,
.greeting03 h3 {
    position: relative;
    margin-bottom: 20px;
}
.greeting02 h3::after,
.greeting03 h3::after {
    position: absolute;
    left: 400px;
    top: 31px;
    content: "";
    width: 100%;
    height: 2px;
    background: #d81e05;
}
.greeting02 h3 span,
.greeting03 h3 span {
    display: inline-block;
    margin-bottom: 40px;
}
.greeting04 {
    text-align: center;
    padding-bottom: 100px;
    margin-bottom: 100px;
}
.greeting04 img {
    width: 80%;
    margin: auto;
}


.sideMenu {
    position: sticky;
    top: 100px;
    width: 25%;
    height: 100vh;
    z-index: 0;
    margin-right: 10%;
}
.sideMenu h3 {
    font-size: 24px;
    border-bottom: none;
    margin-bottom: 0px;
}
.sideMenu h3 span {
    font-size: 20px;
}
.sideMenu ul li {
    border-top: 1px solid #CCC;
    padding: 15px 0px;
}
.sideMenu ul li:last-child {
    border-bottom: 1px solid #CCC;
}
.sideMenu ul li a {
    position: relative;
    display: inline-block;
    line-height: 2.0;
    width: 240px;
}
.sideMenu ul li a.anchor {
    display: inline-block;
    font-size: 16px;
    /*
    font-weight: 600;
    */
    width: 100%;
    margin-bottom: 5px;
}
.sideMenu ul li a:hover {
    color: #d81e05;
}
.sideMenu ul li a img {
    position: absolute;
    top: 6px;
    right: 130px;
    width: 15px;
}



.businessBody {
    margin-top: -90px;
    padding-top: 90px;
    margin-bottom: 100px;
}
.businessBody img {
    margin-bottom: 100px;
}
.businessWrapper {
    display: flex;
    flex-wrap: wrap;
}
.businessWrapper .sideMenu {
    width: 25%;
    height: auto;
    margin-right: 5%;
}
.businessWrapper .sideMenu h3 {
    font-size: 26px;
    margin-bottom: 80px;
}
.businessWrapper .sideMenu h3 span {
    font-size: 22px;
}
.businessWrapper .sideMenu ul li {
    position: relative;
    border-top: none;
    border-bottom: none;
    padding: 0px 0px;
    margin-bottom: 10px;
}
.businessWrapper .sideMenu ul li a {
    width: 100%;
    line-height: 60px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    transition: all .3s;
}
.businessWrapper .sideMenu ul li a:hover {
    color: #FFF;
    background: #d81e05;
    border-top: 1px solid #d81e05;
    border-bottom: 1px solid #d81e05;
    padding-left: 20px;
    text-decoration: none;
}
.businessWrapper .sideMenu ul li img {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 20px;
}
.businessWrapper .businessText {
    width: 70%;
}
.businessWrapper .businessText h4 {
    color: #444;
    font-size: 32px;
    margin-bottom: 50px;
}
.businessMovie ul {
    display: flex;
    flex-wrap: wrap;
}
.businessMovie ul li {
    width: 44%;
    margin: 0px 3%;
    text-align: center;
}
.businessMovie ul li video {
    width: 100%;
}




.historyTop {
    padding: 60px 0px;
}
.historySub {
}
.historySub ul li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.historySub ul li p {
    width: 55%;
}
.historySub ul.leftImg li p {
    padding-left: 5%;
}
.historySub ul li img {
    width: 45%;
}
.section-1 {
    background-image: url("../img/history/historyBnr01.png");
}
.section-2 {
    background-image: url("../img/history/historyBnr02.png");
}
.historyData {
    position: relative;
    margin-bottom: 100px;
}
.historyData .historyDataBG {
    position: sticky;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 0;
}
.historyData .subPapeInner {
    position: relative;
    margin-top: -100vh;
    z-index: 1;
}
.historyData .history_chronology {
    
}
.historyData .history_chronology::after {
    content: '';
    width: 2px;
    height: calc(100% - 251px);
    top: 250px;
    position: absolute;
    left: 279px;
    background-color: #d81e05;
}
.historyData h3 {
    padding-bottom: 0px;
    border-bottom: none;
}
.historyData dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.historyData dl dt {
    position: relative;
    width: 200px;
    color: #d81e05;
    font-size: 48px;
    font-family: 'Josefin Sans',sans-serif;
}
.historyData dl dt::after {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #d81e05;
    position: absolute;
    top: -10px;
    left: 130px;
    border-radius: 50%;
    transform: translate(0%,100%);
}
.historyData dl dd {
    width: calc(100% - 200px);
    font-size: 18px;
    line-height: 2.2;
}
.historyData dl dd span {
    display: block;
    color: #d81e05;
    font-weigt: bold;
}
.historyData .historySnaps {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 80px;
}
.historyData .historySnaps img {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 240px;
}
.historyData .historySnaps img.historySnapVertical {
    width: 160px;
    margin-right: 40px;
}
.historyData .historySnaps img.historySnap02 {
    top: 300px;
}

.sustainabilityHeader {
    margin-top: 90px;
    padding: 160px 0px 60px 140px;
    background: url("../img/top/susBG.png") no-repeat;
    background-size: cover;
    background-position: center top;
    background-position: center bottom;
    background-position: center center;
    height: 480px;
}
.sustainabilityHeader.Environment {
    margin-top: 90px;
    padding: 60px 0px 60px 140px;
    background: url("../img/sustainability/susHeaderEnv.webp") no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: auto;
}
.sustainabilityHeader.Social {
    margin-top: 90px;
    padding: 60px 0px 60px 140px;
    background: url("../img/sustainability/susHeaderSoc.webp") no-repeat;
    background-size: cover;
    background-position: center center;
    height: auto;
}
.sustainabilityHeader h2,
.sustainabilityHeader h2 span {
    color: #FFF;
}
.sustainabilityInner h3 {
    font-size: 30px;
    border-bottom: none;
    margin-bottom: 0px;
}
.sustainabilityMenu {
    background: #f2f2f2;
    padding: 100px 5%;
}
.sustainabilityMenu ul {
    display: flex;
    flex-wrap: wrap;
}
.sustainabilityMenu ul li {
    width: 40%;
    margin: 0px 5%;
    text-align: center;
    background: #FFF;
    padding: 0px 0px 40px;
    border-radius: 20px;
}
.sustainabilityMenu ul li img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.sustainabilityMenu ul li h4 {
    color: #444;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 2.0;
    text-align: center;
    margin: 30px 0;
}
.sustainabilityMenu ul li h4 span {
    color: #d81e05;
    font-family: "Cabin";
    font-size: 24px;
    font-weight: 700;
}
.sustainabilityInner h4 {
    color: #444;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 40px;
}
.sustainabilityInner .groupMenu li a {
    font-size: 18px;
    width: auto;
    padding: 0px 15px;
}
.susDetail {
    padding-top: 0px;
}
.susDetail h3 {
    font-size: 26px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d81e05;
    margin-bottom: 40px;
}
.susDetail h4 {
    font-size: 20px;
    margin-bottom: 10px;
}
.susDetail p.body {
    padding-left: 20px;
    margin-bottom: 30px;
}
.susWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.susWrapper p {
    width: 70%;
}
.susWrapper img {
    width: 20%;
    margin: 0 auto;
}
.sustainabilityBottom {
    margin-top: 100px;
}
.eco p {
    width: 52%;
    margin-right: 3%;
}
.eco img {
    border: 1px solid #CCC;
    margin-right: 0;
}



.recruitHeader {
    margin-top: 90px;
}
.recruitInner {
    text-align: center;
    background: #f2f2f2;
    padding: 100px 100px 120px;
    margin-bottom: 100px;
}
.recruitInner h3 {
    margin-bottom: 10px;
    border-bottom: none;
}
.recruitInner ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 120px;
}
.recruitInner ul li {
    position: relative;
    width: 46%;
    margin: 0px 2%;
    text-align: center;
}
.recruitInner ul li::after {
    position: absolute;
    content: "";
    bottom: 4px;
    right: 0px;
    border-bottom: 80px solid #d81e05;
    border-left: 80px solid transparent;
}
.recruitInner ul li h4 {
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 2.0;
    text-align: center;
    margin: 20px 0;
}
.recruitInner ul li h4 span {
    color: #d81e05;
    font-family: "Cabin";
    font-size: 24px;
    font-weight: 700;
}

.contactInner h4 {
    color: #444;
    font-size: 20px;
    margin-bottom: 20px;
}
.overviewContact ul li {
    width: 30%;
    margin-right: 5%;
}
.overviewContact ul li:last-child {
    margin-right: 0;
}

.privacy {
    width: 1160px;
    max-width: 90%;
    margin: auto;
}
.privacy h3 {
    font-size: 24px;
    text-align: center;
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 60px;
}
.privacy h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}
.privacy p {
    padding-left: 0px;
    font-size: 14px;
    margin-bottom: 30px;
}




@media screen and (max-width: 1024px)
{

body {
    width: 100%;
    font-size: 12px;
    overflow: hidden;
    background: none;
}
body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-image: url("../img/base/topBG.png");
    background-size: cover;
}

header, footer {
    width: 100%;
}

.main {
    width: 100%;
}

header {
    position: fixed;
    height: 60px;
    margin: 0 auto;
    z-index: 99;
    z-index: 3;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    padding: 0px 20px;
    width: 100%;
    height: 60px !important;
    z-index: 100;
}
header#top {
    top: 0;
    /*
    background: transparent;
    */
    z-index: 10;
}
header .logo {
    position: absolute;
    top: 6px;
    width: 130px;
    left: 20px;
}
header.is-animation .logo {
    top: 6px;
}
header#top:hover .logo,
header#top.is-animation .logo {
    top: 6px;
    width: 130px;
    left: 20px;
}
header .gMenu,
header.is-animation .gMenu {
    display: none !important;
}

header .contact {
    text-align: right;
    margin-top: 12px;
    margin-right: 60px;
}
header .contact a {
    color: #FFF;
    background: #004488;
    border-radius: 20px;
    padding: 10px 10px;
    background: #d81e05;
    border-radius: 20px;
    padding: 8px 20px 10px;
}
header .contact a:hover {
    color: #FFF !important;
    background: #d81e05 !important;
}
header .contact a span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -1px;
}


.lang {
    top: 80px;
    right: 28px;
}


.mainImage,
.topPage .swiper-container {
    width: 100%;
    height: calc(100vh - 100px);
}

#video video {
    height: 100vh;
    width: auto;
}

.ci {
    position: absolute;
    top: unset;
    bottom: 120px;
    bottom: 230px;
    left: 40px;
    right: auto;
    margin: auto;
    width: 300px;
    height: 130px;
    z-index: 9999;
}
.btnSP {
    position: absolute;
    bottom: 30px;
    right: -60px;
    margin: auto;
    width: 180px;
    height: 90px;
    z-index: 9999;
}
.topPage .btnSP a.btn {
    padding: 8px 50px 9px 0px;
    font-size: 12px;
}

.slider2 {
    margin-top: 10px;
    margin-bottom: 20px;
}
.slider2 .slick-slide {
    margin: 0px 20px;
    padding-bottom: 10px;
}
.slider2 .slick-slide img {
    padding: 0px 0px;
}
.slider2 .slick-slide span {
    font-size: 9px;
    color: #FFF;
    background: #991e75;
    padding: 2px 6px 4px 6px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    border-radius: 20px;
}


.headerContact {
	display: none;
}
.scroll {
    position: absolute;
    width: 20px;
    text-align: center;
    right: unset;
    left: 20px;
    bottom: 5%;
    margin: auto;
}
.scrolldown2 {
    position: absolute;
    bottom: 72px;
    left: 30px;
}

.logoW {
    width: 200px;
    margin-bottom: 20px;
}

.flex {
    display: block;
    flex-wrap: unset;
}
section {
    padding: 0;
    text-align: left;
    min-height: initial;
}
section p {
    text-align: left;
    font-size: 13px;
    line-height: 2.4;
}
.sectionInner {
    width: 100%;
    padding: 30px 20px;
}


section h2 {
    color: #444;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.8;
    margin-bottom: 20px;
}
section h2 span {
    color: #d81e05;
    /*
    font-family: "Cabin";
    */
    font-size: 16px;
}
section h3 {
    color: #444;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
    margin-bottom: 20px;
}
section h3 span {
    color: #d81e05;
    font-family: "Cabin", 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-right: 0px;
}

#splash_logo svg {
    width: 120px !important;
}



.ci {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 55%;
    margin: auto;
    z-index: 9999;
}
.ci p {
    color: #FF0006;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.6;
}
.mv__description span {
    width: fit-content;
}
.c-mask__bar {
    position: relative;
    display: inline-block;
    transform: translate3d(0, 0, 0);
}
.c-mask__bar::before {
    display: inline-block;
    width: 0;
    height: 100%;
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FF0006;
}
.c-mask__bar--white::before {
    background-color: #fff;
}
.c-mask.--active .c-mask__bar::before {
    animation: passing-bar 1s ease-in-out;
}
@keyframes passing-bar {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  51% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
.c-mask__content {
    opacity: 0;
    transform: translate3d(0, 0, 0);
}
p .mv__description__text {
    display: block;
    padding-left: 12px;
    color: #ff0006;
    font-size: 32px;
    font-weight: 800;
    line-height: 36px;
    padding-bottom: 6px;
    background-color: #fff;
}
.mv__description span {
    width: fit-content;
}
.c-mask.--active .c-mask__content {
    animation: passing-txt 0s ease 0.5s 1 normal forwards;
}
@keyframes passing-txt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mv__description .text_bottom {
    position: relative;
    top: -3px;
}

.textBox h3 {
    line-height: 1.8;
    margin-bottom: 20px;
}    
.textBox.c-mask.--active .c-mask__content {
    background: #FFF;
}
.slick-prev, .slick-next {
    position: absolute;
    top: 200px !important;
    right: 0;
    width: 60px !important;
    height: 60px !important;
    background: #ff0006 !important;
}
.slick-prev {
    left: -80px !important;
}
.slick-prev::after,
.slick-next::after {
    position: absolute;
    content: "";
    top: 40% !important;
    right: 26px !important;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #FFFFFF !important;
    border-right: 2px solid #ffffff !important;
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
}
.slick-prev::after {
    left: 26px !important;
    transform: rotate(225deg);
}

.slider2 .slick-slide img {
    padding: 0px 0px;
}

.scroll {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 9999;
}
.scroll a {
    color: #FFF;
    font-size: 14px;
    padding-top: 60px;
    text-decoration: none !important;
    z-index: 9999;
}
.scroll a img {
    width: 20px;
}
.scroll a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 9999;
}
.scroll a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.sectionInner {
    width: 84%;
    margin: 0 auto;
    padding: 30px 0px 10px;
}
.topWorks h2,
.topPage h2 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 20px;
}
.topWorks h2 span,
.topPage h2 span {
    position: relative;
    color: #777;
    font-size: 22px;
    font-weight: 600;
    -webkit-text-fill-color: #666;
}
.serviceKodawari a.btn,
.topWorks a.btn,
.subService a.btn,
.topPage a.btn {
    position: relative;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    width: 160px;
    padding: 12px 10px 14px;
    text-align: center;
    z-index: 9;
    text-decoration: none !important;
    margin: 0 30px;
}
.serviceKodawari a.btn {
    width: 220px;
    margin-bottom: 20px;
    margin-top: 10px;
}
.serviceKodawari a.btn::before,
.topWorks a.btn::before,
.subService a.btn::before,
.topPage a.btn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    background: linear-gradient(to left, #4a2279 0%, #961E74 80%);
    transition: .3s all;
}
.serviceKodawari a.btn:hover::before,
.topWorks a.btn:hover::before,
.subService a.btn:hover::before,
.topPage a.btn:hover::before {
    background: #961E74;
    background: linear-gradient(to left, #961E74 0%, #4a2279 80%);
    background: linear-gradient(to left, #961E74 0%, #961E74 80%);
}

.topAbout {
    text-align: center;
    padding-top: 90px;
    margin-top: -40px;
    margin-bottom: 60px;
}
.topAbout p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    padding: 0px 20px;
    text-align: center;
    margin-bottom: 40px;
}

.topStrength {
    position: relative;
    height: 320px;
}
.topStrength::before {
    position: absolute;
    content: "";
    top: 0px;
    right: 0px;
    width: 100%;
    height: 700px;
    margin-left: 0;
    background: url("../img/top/strengthBG.png") no-repeat;
    background-size: contain;
}
.topStrength div {
    position: absolute;
    left: 30px;
    right: 30px;
    width: calc(100% - 60px);
    padding: 30px 0px;
    margin-top: 200px;
    background: #F1F1F1;
    text-align: center;
}
.topStrength p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    text-align: center;
    margin-bottom: 30px;
}

.topService {
    text-align: center;
    padding-top: 60px;
    margin-top: 120px;
    margin-top: 80px;
}
.topService p {
    color: #666;
    font-size: 24px;
    line-height: 2.0;
    text-align: center;
    margin-bottom: 30px;
}
.topService ul {
    display: block;
    flex-wrap: nowrap;
    text-align: center;
}
.topService ul li {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    background: url("../img/top/topService01.png") no-repeat;
    background-size: cover;
}
.topService ul li:last-child {
    background-image: url("../img/top/topService02.png");
}
.topService ul li h3 {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}
.topWorks {
    text-align: center;
    padding-top: 40px;
}



.topCompany {
    margin-top: 80px;
}
.topCompany .sectionInner {
    background: url("../img/top/companyBG.png") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 60px 30px 30px;
    width: 100%;
}
.topCompany h2 {
    position: relative;
    display: block;
    background: #FFF;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: center;
}
.topCompany h2 span {
    position: relative;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    -webkit-text-fill-color: unset;
}
.topPage a.btn {
    margin: 0 10px;
}
.topCompany a.btn {
    display: block;
    margin: 30px auto 20px;
}



.entryMore {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 10000;
    width: 120px;
    transform: unset;
}
.entryMore::before {
    transform: skewX(-13deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 10px;
    z-index: -1;
    background-color: #FF0006;
}
.entryMore::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 61px;
    top: 0;
    right: 0px;
    z-index: 1;
    background-color: #FF0006;
}
.entryMore a {
    color: #FFF;
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
    width: 100%;
    line-height: 57px;
    text-align: center;
}
.entryMore a:hover {
    text-decoration: none;
}


.kv {
    /*
    background: url("../img/top/minaos_kvSP.png") no-repeat;
    background-size: cover;
    background-position: center bottom;
    */
    position: relative;
    z-index: 1;
    width: 95%;
    margin-left: 5%;
    margin-top: 90px;
    height: 100vh;
    height: calc(100vh - 90px);
}
.kv .more {
    position: absolute;
    top: 300px;
    right: -78px;
    z-index: 1;
    width: 220px;
    transform: rotate(90deg);
}
.kv .more::before{
    transform: skewX(50deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #FF0006;
}
.kv .more a {
    color: #FFF;
    font-size: 24px;
    font-weight: 900;
    width: 100%;
    line-height: 64px;
    text-align: center;
}


.kv {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0;
    margin-top: 60px;
    height: 100vh;
    height: calc(100vh - 60px);
    overflow: hidden;
}
.sliderKV li {
    width: 100%;
    height: calc(100vh - 90px);
    height: 100vh;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}
/*
.sliderKV li.slide01 {
    background-image: url("../img/top/slide01SP.webp");
}
*/
.sliderKV li.slide02 {
    background-image: url("../img/top/slide02SP.webp");
}
.sliderKV li.slide03 {
    background-image: url("../img/top/slide03SP.webp");
}
.sliderKV li.slide04 {
    background-image: url("../img/top/slide04SP.webp");
}




.topPage {
    position: relative;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
}
.subPage .titleText,
.topPage .titleText {
    color: #FFF;
    font-size: 42px;
    font-weight: 900;
    font-family: Arial;
    text-shadow: 1px 1px 0 #FF0006, -1px -1px 0 #FF0006,
                -1px 1px 0 #FF0006, 1px -1px 0 #FF0006,
                 0px 1px 0 #FF0006,  0-1px 0 #FF0006,
                -1px 0 0 #FF0006, 1px 0 0 #FF0006;
    line-height: 1.1;
    padding-top: 0px;
    margin-bottom: 10px;
}
.subPage p,
.topPage p {
    color: #666;
    font-size: 14px;
}
.subPage .more,
.topPage .more {
    position: relative;
    z-index: 1;
    width: 150px;
    margin: 60px auto;
}
.subPage .more::before,
.topPage .more::before {
    transform: skewX(349deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #FF0006;
}
.subPage .more a,
.topPage .more a {
    color: #FFF;
    font-size: 12px;
    width: 100%;
    line-height: 40px;
    text-align: center;
}
.group .more {
    margin-top: 100px;
    margin-left: 0px;
}

section h2 {
    color: #333;
    font-size: 16px;
    font-weight: 900;
    line-height: 2.0;
    margin-bottom: 20px;
}
section h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -1px;
    margin-bottom: 40px;
}
section h3 span {
    color: #FF0006;
    font-weight: 600;
}
section h3 .text_black span {
    color: #333;
}

.group {
    padding-bottom: 100px;
}
.group img {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 75%;
}
.group h2 {
    font-size: 16px;
    margin: 10px 0 30px;
}

.people {
    background: url("../img/top/peopleBGSP.png") no-repeat;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 1px;
}
.people .topPage .titleText {
    color: #f6f6f6;
}

.people .more {
    position: relative;
    top: unset;
    right: 15px;
    margin: 30px auto;
}
.people ul {
    margin-top: 60px;
}
.people ul.interviews.slider {
    height: 280px;
}
.slick-slide img {
    padding: 0px 0px;
}


.slidebar {
    position: relative;
    width: 100%;
    height: 60px;
    background-image: url('../img/musashino_rec_top0819_barT.png');
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.slidebar.barBottom {
    background-image: url('../img/musashino_rec_top0819_barB.png');
}

@keyframes slide_img {
    100% {
        background-position: -10000px 0;
    }
}

.subPage {
    margin-top: 0px;
}
.subPage h3 {
    color: #666;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
}
.subPage .subHeader {
    position: relative;
    text-align: left;
    margin-top: 100px;
    margin-left: 8%;
}
.subPage .subHeader.hr {
    margin-bottom: 28px;
}
.subPage .subHeader.hr::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -28px;
    width: 100%;
    height: 8px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.subPage .subHeader h2 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}
.subPage .subHeader h2 span {
    position: relative;
    top: 0px;
    right: -30px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    -webkit-text-fill-color: #666;
}
.subPage .subHeader h2 span::before {
    transform: skewX(340deg);
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    left: -17px;
    right: 0;
    width: 5px;
    height: 20px;
    background: linear-gradient(to bottom, #1f257d 0%, #961e75 100%);
}
.subPage .subHeader h3 {
    margin-bottom: 10px;
}


.subPage .subMenu {
    min-height: initial;
    display: flex;
    flex-wrap: wrap;
    padding-left: 12px;
}
.subPage .subMenu li {
    margin-right: 10px;
    z-index: 99;
}
.subPage .subMenu li a {
    position: relative;
    color: #333;
    font-size: 13px;
    line-height: 40px;
    text-align: center;
    width: 70px;
    height: 40px;
    text-decoration: none;
}
.subPage .subMenu.messageSubMenu li a {
    width: 120px;
}
.subPage .subMenu.service02SubMenu {
    margin-right: -20px;
    margin-left: -3px;
}
.subPage .subMenu.service02SubMenu li {
    margin-right: 5px;
}
.subPage .subMenu.service02SubMenu li a {
    width: auto;
    padding: 0px 7px;
}
.subPage .subMenu li:last-child {
    margin-right: 0;
}
.subPage .subMenu li a::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #DDD;
    transition: .2s all;
}
.subPage .subMenu li a:hover {
    color: #FFF;
}
.subPage .subMenu li.selected a {
    color: #FFF;
    pointer-events: none;
}
.subPage .subMenu li.selected a::before,
.subPage .subMenu li a:hover::before {
    background: #991e75;
}


.vision .sectionInner {
    padding-top: 20px;
    margin-left: 8%;
    margin-right: 0;
    padding-bottom: 0;
    width: 92%;
    overflow: hidden;
}
.vision .sectionInner .fadebox {
    padding-top: 40px;
    padding-left: 0px;
    margin-bottom: 00px;
    padding-bottom: 60px;
}
.vision h3 {
    color: #666;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}
.vision p {
    padding-right: 5%;
}    

.message {
    display: block;
    margin-bottom: 0px;
}
.subPage .message h3 {
    color: #981e75;
    font-size: 20px;
    margin-bottom: 20px;
}
.message .sectionInner {
    width: 92%;
    margin: 0 0 0 auto;
    padding: 30px 28px 30px 0;
}
.message01 .photoLeft {
    width: 100%;
    margin-right: 0;
    height: 100vw;
    object-fit: cover;
}
.message01 .messageRight {
    width: 100%;
    padding: 30px 15px 20px 8%;
}
.message01 .photoRight {
    width: 100%;
    margin-left: 0;
}
.message01 .messageLeft {
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
}
.message01 .messageLeft p {
    color: #222;
    font-size: 22px;
    font-weight: 400;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, serif;
    text-align: right;
}
.message01 .messageLeft p span {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, serif;
}
.message02 .photoRight {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 100vw;
    object-fit: cover;
    margin-bottom: 100px;
}
.message02 .messageLeft {
    width: 100%;
    padding-left: 8%;
    padding-top: 20px;
    padding-right: 28px;
    margin-bottom: 30px;
}
.message02 .photoLeft {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}
.message02 .messageRight {
    width: 100%;
    padding-left: 8%;
    padding-top: 20px;
}
.message02 .messageRight p {
    color: #222;
    font-size: 22px;
    font-weight: 400;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, serif;
    text-align: right;
    padding-right: 20px;
}
.message02 .messageRight p span {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Noto Serif JP', 游明朝, YuMincho, serif;
}



.strength {
    margin-bottom: 100px;
}
.strength .sectionInner {
    display: block;
    margin: 20px 8% 0px 8%;
    width: 84%;;
    padding-bottom: 0px;
}
.strength .sticky {
    display: none;
}
.strength .strengthBody {
    width: 100%;
}
.strength .strengthBody ul li {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.strength .strengthBody ul li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to left, #1f257d 0%, #971e75 100%);
}
.strength .strengthBody ul li span.num {
    position: absolute;
    top: 4px;
    left: 0px;
    content: "";
    color: #FFF;
    font-size: 22px;
    font-weight: 400;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    letter-spacing: 1px;
    line-height: 38px;
    width: 40px;
    height: 40px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    text-align: center;
}
.strength .strengthBody ul li h3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-left: 60px;
    margin-bottom: 15px;
}
.strength .strengthBody ul li h3 span {
    position: relative;
    display: block;
    color: #222;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    -webkit-text-fill-color: #222;
}
.strength .strengthBody ul li p {
    padding-left: 60px;
}

.service {
    background: #F8F8F8;
}
.service .sectionInner ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0px;
}
.service .sectionInner ul li {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.service .sectionInner ul li:nth-child(odd) {
    margin-right: 4%;
}
.service .sectionInner ul li p {
    font-size: 16px;
    text-align: center;
}

.problem .sectionInner ul li {
    display: block;
    width: 100%;
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 2px solid #991e75;
    margin-bottom: 30px;
}
.problem .sectionInner ul li:last-child {
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 0px;
}
.problem .sectionInner ul li a {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
}
.problem .sectionInner ul li div {
    width: 100%;
}
.problem .sectionInner h4 {
    position: relative;
    color: #991e75;
    font-size: 18px;
    padding-left: 20px;
    max-width: 100%;
    margin-bottom: 20px;
}
.problem .sectionInner h4::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 6px;
    width: 8px;
    height: 20px;
    transform: skewX(-25deg);
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.problemDetail .sectionInner h4 {
    max-width: 100%;
    padding-left: 30px;
    margin-bottom: 40px;
}
.problemDetail .sectionInner h4::before {
    left: 0px;
}
.problem .taglist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.problemDetail .taglist {
    margin-bottom: 20px;
}
.problem .sectionInner ul.taglist li {
    display: inline-block;
    width: auto;
    text-align: left;
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 0px;
}
.problem .sectionInner ul.taglist li a {
    width: auto;
    font-size: 13px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 8px;
    margin-bottom: 10px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.problemDetail .sectionInner {
    padding-bottom: 0px;
}
.problemDetail .sectionInner img {
    margin-bottom: 40px;
}
.problemDetail .sectionInner h5 {
    color: #991e75;
    font-size: 18px;
    padding-bottom: 20px;
    border-bottom: 2px solid #991e75;
    margin-bottom: 20px;
}
.problemDetail .sectionInner p {
    color: #333;
    font-size: 14px;
    line-height: 2.2;
    padding-left: 15px;
    margin-bottom: 40px;
}
.problemDetail .photo {
    display: block;
}
.problemDetail .photo p {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
}
.problemDetail .photo img,
.problemDetail .photo.photoSquare p,
.problemDetail .photo.photoSquare img {
    width: 100%;
}
.problemDetail .sectionInner a.btn {
    position: relative;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    width: 200px;
    padding: 14px 10px 18px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
    margin: 0 15px;
}



.subService {
    background: #FFF;
    padding-top: 0px !important;
}
.subService .sectionInner {
    margin: 0px 8% 0px 8%;
    padding: 30px 0px;
    width: 84%;
}
.serviceDetail {
    display: block;
    margin-right: 0 !important;
    width: 92%;
}
.serviceDetail div {
    width: 100%;
    padding-right: 20px;
}
.serviceDetail img {
    width: 100%;
    margin-top: 30px;
}
.serviceDetail div h3 {
    color: #961e75;
    padding-bottom: 20px;
    border-bottom: 2px solid #961e75;
    margin-bottom: 30px;
}
.serviceMerit h4,
.serviceKodawari h4 {
    color: #961e75;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 20px;
    border-bottom: 2px solid #961e75;
    margin-bottom: 30px;
}
.serviceMerit ul {
    display: block;
}
.service .sectionInner.serviceMerit ul li {
    width: 100%;
    display: block;
    margin-right: 0;
}
.serviceMerit ul li div {
    width: 100%;
}
.serviceMerit ul li h5 {
    text-align: left;
    color: #961e75;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.service .serviceMerit ul li p {
    text-align: left;
    font-size: 14px;
    padding-right: 0px;
    margin-bottom: 20px;
}
.serviceMerit ul li img {
    width: 100%;
    margin-bottom: 30px;
}
.serviceKodawari {
    text-align: center;
}
.serviceKodawari h4 {
    text-align: left;
}
.serviceKodawari ul li {
    background: #FFF;
    padding: 20px 20px 30px 30px;
    padding: 15px 20px 20px 20px;
    text-align: left;
    margin-bottom: 20px !important;
}
.serviceKodawari ul li h5 {
    text-align: left;
    color: #222;
    font-size: 18px;
}
.serviceKodawari ul li h5 span {
    display: block;
    color: #961e75;
    font-size: 24px;
    margin-bottom: 20px;
    font-size: 18px;
    margin-bottom: 5px;
}
.serviceKodawari ul li p {
    color: #666;
    font-size: 14px !important;
    text-align: left !important;
    margin-top: 20px;
}
.serviceKodawari.longKodawari ul {
    display: block;
}
.serviceKodawari.longKodawari ul li {
    width: 100%;
    text-align: center;
    margin-right: 0px;
    margin-bottom: 60px;
}
.serviceKodawari.longKodawari ul li h5 {
    margin-bottom: 20px;
}
.serviceKodawari.longKodawari ul li h5 span {
    display: block;
    color: #961e75;
    font-size: 18px;
    margin-right: 0px;
    margin-bottom: 5px;
}
.serviceKodawari.longKodawari ul li p {
    padding-left: 0px;
}








.works li {
    list-style-type: none;
}
.works {
    overflow: hidden;
}
.works h3.mix {
    font-size: 16px;
    margin-bottom: 20px;
}
.works .tags .text {
    position: relative;
    margin-bottom: 60px;
}
.works .tags .text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -28px;
    width: 110%;
    height: 8px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.works .worksList,
.works .taglist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.works .worksList li.all {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    margin-right: 0;
}
.works .worksList li.all:nth-child(odd) {
    margin-right: 0;
}
.works .worksList li.all h4 {
    margin: 10px 0;
    color: #666;
    font-size: 18px;
}
.works .taglist a,
.works .taglist a {
    font-size: 13px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 8px;
    margin-bottom: 10px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.worksDetail {
    background: #F8F8F8;
}
.worksDetail .sectionInner {
    padding-bottom: 0;
}
.worksDetail h3 {
    color: #991e75;
    font-size: 28px;
    text-align: center;
}
.worksDetail p {
    text-align: center;
    margin-bottom: 40px;
}
.worksDetail a.control {
    font-size: 16px;
    color: #FFF;
    background: #991e75;
    padding: 8px 15px 10px 12px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: .3s;
    text-decoration: none;
    border-radius: 20px;
}
.worksDetail ul {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 40px;
}
.worksDetail ul li {
    width: 46%;
    text-align: center;
    margin-bottom: 20px;
}
.worksDetail ul li:nth-child(odd) {
    margin-right: 6%;
}
.worksDetail ul li:last-child {
    margin-bottom: 0px;
}


.origin {
    text-align: center;
    background: #f1f1f1;
    padding-top: 30px;
    padding-bottom: 60px;
}
.origin h3 {
    margin-bottom: 20px;
}
.origin img {
    width: 50%;
    margin-top: 0px;
    margin-bottom: 30px;
}
.origin h4 {
    color: #981e75;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
}
.origin span {
    display: inline-block;
    color: #FFF;
    font-size: 20px;
    line-height: 39px;
    width: 90px;
    height: 42px;
    background: #981e75;
    margin: 0px 10px 30px;
}
.origin p {
    line-height: 2.0;
    text-align: center;
}

.company {
    text-align: center;
    padding-top: 40px;
}
.company h3 {
    margin-bottom: 20px;
}
.company table {
    width: 84%;
    margin: auto;
    padding-bottom: 60px;
}
.company table tr {
    margin-bottom: 40px;
}
.company table tr th {
    color: #981e75;
    font-size: 14px;
    text-align: right;
    padding: 5px 5px 5px 0;
    padding-right: 10px;
    width: 25%;
    vertical-align: top;
    line-height: 2.0;
}
.company table tr td {
    color: #666;
    font-size: 14px;
    text-align: left;
    padding: 5px 0px 5px;
    padding-left: 15px;
    padding-bottom: 0px;
    border-left: 2px solid #981e75;
    line-height: 2.0;
    vertical-align: top;
}
.company table tr td a {
    color: #981e75;
}


.history {
    text-align: center;
    padding-top: 30px;
}
.history h3 {
    margin-bottom: 20px;
}
.history ul {
    width: 100%;
    text-align: left;
}
.history ul li {
    padding-left: 30px;
}
.history ul li span.year {
    display: block;
    color: #991e75;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
}
.history ul li p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0px;
}
.timeline li::after {
    content: '';
    position: absolute;
    top: 8px !important;
    left: -5px;
    width: 13px !important;
    height: 13px !important;
    background: #991e75;
    border-radius: 50%;
}
.border-line {
    position: absolute;
    left: 0px !important;
    top: 16px !important;
}

.csr h3 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 40px;
}
.csr .sectionInner ul li {
    margin-bottom: 40px;
}
.csr .sectionInner ul li:last-child {
    margin-bottom: 0px;
}
.csr .sectionInner .flex {
    display: block;
}
.csr .sectionInner .flex div {
    width: 100%;
    padding-right: 0px;
    margin-bottom: 20px;
}
.csr .sectionInner .flex img {
    width: 100%;
}
.csr .sectionInner h4 {
    color: #991e75;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.csr .sectionInner h4 span {
    font-size: 16px;
    font-weight: 600;
    line-height: 2.8;
}
.csr .sectionInner ul li ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.csr .sectionInner ul li ul li {
    width: 48%;
    margin-right: 4%;
    text-align: center;
    margin-bottom: 10px;
}
.csr .sectionInner ul li ul li:nth-child(even) {
    margin-right: 0;
}
.csr .sectionInner ul li ul li p {
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}
.csr .sectionInner ul li ul li p span {
    display: block;
    font-size: 11px;
}



.interviewHead {
    background: url("../img/sub/interviewHead01.png") no-repeat;
    background-size: cover;
    padding: 60px 20px 10px 0px;
    margin-bottom: 0px;
}
.interviewHead.interview02 {
    background-image: url("../img/sub/interviewHead02.png");
}
.subPage .interviewHead h3 {
    margin-left: 8%;
    color: #991e75;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0px;
}
.interviewHead h3 span {
    display: block;
    color: #999;
    font-size: 14px;
    font-weight: 500;
    line-height: 2.4;
}
.interviewHead h3 span.wh {
    color: #FFF;
}
.interviewBody {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}
.interviewBody img {
    width: 92%;
    margin-right: 8%;
    margin-bottom: 10px;
}
.interviewBody img.photoRight {
    width: 92%;
    margin-top: 0px;
    margin-right: 0;
    margin-left: 8%;
}
.interviewSchedule {
    display: flex;
    position: relative;
    margin-bottom: 40px;
}
.interviewSchedule::before {
    content: "";
    position: absolute;
    top: -20px;
    width: 92%;
    height: 8px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    margin-right: 10%;
}
.interviewSchedule h4 {
    position: absolute;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-left: 8%;
}
.interviewSchedule h4 span {
    position: relative;
    top: 0px;
    right: -50px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    -webkit-text-fill-color: #666;
}
.interviewSchedule h4 span::before {
    transform: skewX(340deg);
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    left: -17px;
    right: 0;
    width: 5px;
    height: 20px;
    background: linear-gradient(to bottom, #1f257d 0%, #961e75 100%);
}
.interviewSchedule img.photoLeft {
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 84%;
    height: 84vw;
    object-fit: cover;
}
.interviewSchedule .messageRight {
    width: 100%;
    margin-top: 60px;
    padding-left: 8%;
    padding-right: 20px;
}
.interviewSchedule h5 {
    color: #981e75;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.interviewSchedule tr th {
    color: #981e75;
    font-size: 12px;
    font-weight: 600;
    vertical-align: baseline;
    padding: 0px;
}
.interviewSchedule tr td {
    font-size: 14px;
    font-weight: normal;
    padding-left: 20px;
    padding: 0px 0px 10px 5px;
}
.message02.interviewEnd .messageLeft {
    width: 100%;
    padding-left: 8%;
    padding-top: 0px;
}
.interviewMore {
    text-align: center;
    padding: 100px 0px 200px;
}
.interviewMore a.btn {
    position: relative;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    width: 240px;
    padding: 12px 10px 14px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
    margin: 0px 100px;
}
.interviewMore a.btn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    background: linear-gradient(to left, #4a2279 0%, #961E74 80%);
    transition: .3s all;
}
a.interviewLink {
    position: relative;
    width: 100%;
    text-decoration: none !important;
    transition: .3s all;
}
a.interviewLink::after {
    position: absolute;
    top: 36px;
    right: 0px;
    content: "┐";
    color: #981e75;
    font-size: 48px;
    transform: rotate(45deg);
}
a.interviewLink .interviewHead {
    transition: .3s all;
}
a.interviewLink:hover .interviewHead {
    opacity: 0.8;
}



.contactTop .sectionInner {
    padding-left: 0px;
}
.contactTop .sectionInner p {
    text-align: left;
}
.contactTop .contactFlow {
    margin-top: 20px;
}
.contactTop .contactFlow ul li {
    position: relative;
    margin-bottom: 40px;
}
.contactTop .contactFlow ul li:last-child {
    margin-bottom: 0px;
}
.contactTop .contactFlow ul li span.num {
    position: absolute;
    top: 4px;
    left: 0px;
    content: "";
    color: #FFF;
    font-size: 22px;
    font-weight: 400;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    letter-spacing: 1px;
    line-height: 38px;
    width: 40px;
    height: 40px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    text-align: center;
}
.contactTop .contactFlow ul li h3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #961e75;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-top: 8px;
    padding-left: 60px;
    margin-bottom: 15px;
}
.contactTop .contactFlow ul li h3 span {
    position: relative;
    display: block;
    color: #222;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0px;
    -webkit-text-fill-color: #222;
}
.contactTop .contactFlow ul li p {
    padding-left: 60px;
}
.contactTop .contactFlow ul li div {
    margin-top: 10px;
    margin-left: 60px;
    margin-right: 0%;
    padding: 10px 5px 10px 0px;
    background: #f1f1f1;
}
.contactTop .contactFlow ul li div p {
    padding-left: 20px;
}
.contactTop .contactFlow ul li div p a {
    display: block;
    line-height: 1.4;
    position: relative;
    color: #961e75;
    font-size: 32px;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .3 all;
}
.contactTop .contactFlow ul li div p a:hover {
    opacity: 0.85;
}
.contactTop .contactFlow ul li div p a:hover::after {
    position: absolute;
    content: "";
    left: 0px;
    bottom: 15px;
    height: 2px;
    width: 100%;
    background: linear-gradient(to left, #1f257d 30%, #961e75 70%);
}
.contactInner {
    margin: 0px 4% 40px;
}
.contactInner .sectionInner h3 {
    margin-bottom: 20px;
}
form#mailformpro dl dt,
form#mailformpro dl dd {
    background: transparent !important;
}



.recruit {
    background: url("../img/top/recruitBGSP.png") no-repeat;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 1px;
}
.recruit .titleText {
    color: #f6f6f6;
}
.recruit ul {
    margin-top: 40px;
    margin-right: 30px;
}
.recruit ul li {
    position: relative;
    margin-bottom: 20px;
}
.recruit ul li img {
    width: 100%;
    margin-right: 10px;
}
.recruit ul li .textLink {
    position: relative;
    top: unset;
    left: unset;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.0;
}
.recruit ul li .textLink span {
    display: inline-block;
    color: #FF0006;
    font-weight: 900;
    margin-right: 30px;
}






/* ボタン共通設定 */
.btn04 {
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width: 240px;
    padding: 15px 30px;
    color: #333;
    font-size: 16px;
    border: none;
    border-top: 1px solid #d81e05;
    border-bottom: 1px solid #d81e05;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
    z-index: 0;
    margin: 5px auto;
}
.btn04:hover {
    color: #FFF;
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: .6s;
    text-decoration: none;
}
.btn04::after {
    position: absolute;
    top: 20px;
    right: 16px;
    content: "";
    width: 16px;
    height: 16px;
    background: url("../img/base/btnMore.png") no-repeat;
    background-size: cover;
}

/*線の設定*/
.btn04 span {
    display: block;
    z-index: 2;
}

/*== 線から塗に変化（左から右） */

/*線の設定*/
.borderleft span::before,
.borderleft span::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    width: 0;
    height: 1px;
    /*線の形状*/
    background: #d81e05;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*左上線*/
.borderleft span::before {
    left: 0;
    top: 0;
}

/*左下線*/
.borderleft span::after {
    left: 0;
    bottom: 0;
}

/*hoverをすると線が伸びる*/
.borderleft:hover span::before,
.borderleft:hover span::after {
    width: 100%;
}

/*背景の設定*/
.borderleft::before {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    left: 0;
    bottom:0;
    z-index: -1;
    /*背景の形状*/
    height: 100%;
    width: 0;
    background: #d81e05;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*hoverをすると背景が伸びる*/
.borderleft:hover::before {
    width: 100%;
    /*0.4秒遅れてアニメーション*/
    transition-delay: .4s;
}



.viewMore a:hover {
    text-decoration: none !important;
}
.viewMore img {
    position: relative;
    left: 6px;
    top: -8px;
    width: 18px;
    margin-right: 20px;
}
.viewMore a span {
    position: relative;
    top: 0px;
    z-index: 2;
    color: #d81e05;
    font-size: 12px;
    transition: .3s ease-out;
}
.viewMore a:hover span {
    color: #FFF;
}


/*丸がボタンに変形する*/

.btntransform {
    /*丸の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/  
    display: inline-block;
    padding:　0 0 0 15px;
    line-height: 30px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/* 丸が動く */
.btntransform::before {
    content: '';
    /*絶対配置で丸の位置を決める*/
    position: absolute;
    left: 0;
    z-index: 0;
    /*丸の形状*/
    width: 30px;
    height: 30px;
    background: #d81e05;
    border-radius: 15px;
    /*アニメーションの指定*/
    transition: .3s ease-out;
}

/*hoverした際の形状*/
.btntransform:hover::before {
    width: 140px;
}

/* 矢印の形状 */
.btntransform::after {
    display: none;
    position: absolute;
    content: '';
    top: 1.3em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}

.topSustainability .viewMore a span {
    color: #FFF;
}
.topSustainability .viewMore a:hover span {
    color: #d81e05;
}
.topSustainability .btntransform::before {
    background: #FFF;
}


/*　画像の拡大　*/
.zoomIn img {
    transform: scale(1);
    transition: .3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
.zoomIn a:hover img { /*hoverした時の変化*/
    transform: scale(1.1); /*拡大の値を変更したい場合はこの数値を変更*/
}
/*　画像のマスク　*/
.mask {
    display: block;
    line-height: 0; /*行の高さを0にする*/
    overflow: hidden; /*拡大してはみ出る要素を隠す*/
}


.fadebox {
    opacity: 0;
    transform: translate(0,100px); 
    -webkit-transform: translate(0,100px); 
    transition: 1.5s;
}
.fadebox1 {
    transform: translate(0,200px); 
    -webkit-transform: translate(0,200px); 
    transition: 1.5s;
}
.fadebox2 {
    transform: translate(0,300px); 
    -webkit-transform: translate(0,300px); 
    transition: 1.5s;
}
.fadeboxR {
    opacity: 0;
    transform: translate(100px,0); 
    -webkit-transform: translate(100px,0); 
    transition: 2s;
}
.fade-stop {
    opacity: 1.0;
    transform: translate(0,0); 
    -webkit-transform: translate(0,0);
}





.footerRecruit {
    text-align: center;
    padding-top: 60px;
    margin-top: -60px;
    margin-bottom: 0px;
}
.subPage .footerRecruit {
    margin-top: 40px;
}
.footerRecruit .footerRecruitInner {
    position: relative;
    padding: 40px 0px 90px;
    background: linear-gradient(to left, #6a2178 0%, #961E74 80%);
    margin-top: 0px;
}
.footerRecruit h2 {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background: transparent;
    color: #FFF;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 20px;
}
.footerRecruit h2 span {
    font-family: 'Josefin Sans', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, 'Noto Sans JP', sans-serif;
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    -webkit-text-fill-color: unset;
}
.footerRecruit ul {
    margin-bottom: 30px;
}
.footerRecruit ul li {
    margin-bottom: 30px;
}
.footerRecruit ul li a {
    position: relative;
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    padding-left: 45px;
}
.footerRecruit ul li a:hover {
    text-decoration: underline;
}
.footerRecruit ul li a::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 3px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: #FFF;
}
.footerRecruit .entryBtn {
    position: relative;
    color: #8e1f76;
    font-size: 26px;
    font-weight: 800;
    width: 240px;
    padding: 10px 10px 15px;
    margin-left: 20px;
    text-align: center;
    z-index: 10;
    text-decoration: none !important;
}
.footerRecruit .entryBtn::before {
    transform: skewX(335deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #FFF;
    transition: .3s background;
}
.footerRecruit .entryBtn:hover::before {
    background: #CCC;
}
.footerRecruit a.interview {
    position: relative;
    left: -10px;
    right: 0;
    bottom: 0;
    width: 40%;
    text-align: center;
    background: #FFF;
}
.footerRecruit a.interview02 {
    position: relative;
    left: 10px;
    right: 0px;
    top: 0;
    bottom: initial;
    width: 40%;
}
.footerRecruit a.interview span {
    position: absolute;
    bottom: -28px;
    left: 0;
    right: 0;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    line-height: .1;
    text-decoration: none;
}
.footerRecruit a.interview span span {
    position: relative;
    font-family: 'Josefin Sans', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
}


footer {
    position: relative;
    height: auto;
    padding: 50px 0 0;
}
footer .footerInner {
    width: calc(100% - 60px);
    margin: 0 auto 20px;
}
footer .footerLogo {
    position: relative;
    top: unset;
    left: unset;
    width: 100px;
    margin: 0 auto 40px;
}
footer .footerInner .footerInfo {
    width: 50%;
}
footer .footerInner .footerInfo h3 {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
    margin-bottom: 10px;
}
footer .footerInner .footerInfo h3 span {
    color: #666;
    font-size: 17px;
    font-weight: 500;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
}
footer .footerInner .footerInfo p {
    color: #999;
    font-size: 12px;
    font-weight: 500;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-family: 'Noto Sans JP', 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.0;
    margin-bottom: 50px;
}
footer .footerInner .footerInfo p span {
    font-size: 12px;
}
footer .footerInner .footerMenu {
    width: 50%;
    margin-top: 0px;
    display: block;
}
footer .footerInner .footerMenu ul:last-child {
    width: 100%;
    margin-top: 25px;
    margin-top: 12px;
    margin-right: 0;
}
footer .footerInner .footerMenu ul li {
    position: relative;
    margin-right: 0px;
    margin-bottom: 0px;
    border-top: 1px solid #EEE;
    padding: 8px 0;
}
footer .footerInner .footerMenu ul li:last-child {
    border-bottom: 1px solid #EEE;
}
footer .footerInner .footerMenu ul li::before {
    display: none;
}
footer .footerInner .footerMenu ul li a {
    position: relative;
    display: block;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0px;
}
footer .footerInner .footerMenu ul li a::before,
footer .footerInner .footerMenu ul li a::after {
    position: absolute;
    right: 0px;
    content: '';
    width: 10px;
    height: 2px;
    background-color: #9b1e75;
}
footer .footerInner .footerMenu ul li a::before {
    top: 31%;
    transform: rotate(60deg) !important;
}
footer .footerInner .footerMenu ul li a::after {
    top: 69%;
    transform: rotate(300deg) !important;
}

.subPageHeader {
    padding: 70px 15px 20px 20px;
    border-bottom: 3px solid #d81e05;
    padding: 20px 30px 20px 30px;
    border-bottom: 3px solid #d81e05;
    width: calc(100% - 60px);
    width: 100%;
    margin: 60px 0 0;
    border-bottom: 0px;
}
.subPageHeader h2 {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.subPageHeader.interviewHeader {
    padding: 0;
}
.subPageHeader.interviewHeader h2 {
    margin-bottom: 0px;
}
.subPageHeader .interviewHeaderSP {
    position: relative;
    color: #FFF;
    background: #FF0006;
    width: calc(100% - 30px);
    height: 70px;
    padding: 3px 20px 10px 30px;
}
.subPageHeader .interviewHeaderSP::after {
    position: absolute;
    content: "";
    top: 0px;
    right: -16px;
    border-bottom: 70px solid transparent;
    border-left: 16px solid #FF0006;
}
.subPageHeader.interviewHeader h3 {
    position: absolute;
    top: 0px;
    left: 80px;
    color: #FFF;
    font-weight: 600;
    font-size: 13px;
    line-height: 2.0;
    letter-spacing: 0px;
    padding: 10px 0px 20px 30px;
}
.subPageHeader.interviewHeader .interviewHeaderSP span {
    color: #FFF;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.6;
}
.subPageHeader.interviewHeader p {
    color: #666;
    font-size: 30px;
    font-family: 'Zen Kurenaido', sans-serif;
    padding-left: 17%;
    text-align: center;
    line-height: 60px;
}
.subPageHeader p {
    color: #666;
    font-size: 12px;
    line-height: 2.0;
}
.subPapeInner {
    padding: 20px 20px;
}
.subPapeInner h3 {
    font-size: 18px;
    padding-bottom: 0px;
    border-bottom: none;
    margin-bottom: 20px;
}



ul.interviews li {
    width: calc(25% - 35px);
    margin-right: 35px;
}
ul.interviews li a {
    text-decoration: none;
}
ul.interviews li a p {
    position: relative;
    text-align: center;
    color: #666;
    font-size: 14px;
    font-family: 'Zen Kurenaido', sans-serif;
    letter-spacing: -1px;
    line-height: 60px;
    height: 110px;
    padding: 35px 0px 30px;
    background: #FFF;
}
ul.interviews li a p.line4 {
    font-size: 11px;
    line-height: 18px;
    padding: 32px 0px;
}
ul.interviews li a p.line2 {
    line-height: 24px;
    padding: 40px 0px;
    letter-spacing: -1px;
}
ul.interviews li a p span {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    color: #FFF;
    font-size: 12px;
    font-family: "Noto Sans JP", 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 26px;
    padding-bottom: 2px;
    background: #FF0006;
}
ul.interviews li a p span.long {
    font-size: 10.5px;
    letter-spacing: -0.5px;
}


.subPageHeader h3 {
    position: relative;
    top: unset;
    left: unset;
    color: #333;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0px;
    margin-bottom: 20px;
}
.subPageHeader h3 span {
    color: #FF0006;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.7;
}
.subPageHeader.interviewHeader p {
    color: #666;
    font-size: 16px;
    font-family: 'Zen Kurenaido', sans-serif;
    padding-left: 30px;
    text-align: left;
}
.subPageHeader .more {
    position: absolute;
    top: 120px;
    bottom: unset;
    /*
    right: 30px;
    */
    left: 30px;
    width: 70px;
    margin: 0;
}
.subPageHeader .more a {
    line-height: 28px;
    width: 75%;
    margin-left: 13%;
}
.subPageBG {
    background: url("../img/base/subPageBGSP.png") no-repeat;
    background-size: cover;
    padding-bottom: 1px;
}
.subPage .subPageInner {
    position: relative;
    width: 90%;
    margin-left: 10%;
    margin-bottom: 100px;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
}
.subPage .subPageHeader .subColor {
    color: #00b65f;
}
.aboutHeader {
    background: url("../img/about/aboutBG01.png") no-repeat;
    background-size: cover;
    padding-bottom: 1px;
}
.aboutHeader .titleText {
    color: #f5f5f5;
}
.subPage .subPageHeader ul {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;
    padding-right: 0;
}
.subPage .subPageHeader ul.tabs {
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.subPage .subPageHeader ul.tabs li {
    width: auto;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.subPage .subPageHeader ul.tabs li:last-child {
    margin-right: 0px;
}
.subPage .subPageHeader ul.tabs li a {
    color: #FFF;
    font-size: 14px;
    line-height: 28px;
    background: #FF0006;
    width: 100%;
    padding: 0px 20px;
    height: 30px;
    text-align: center;
}
.subPage .subPageHeader ul.tabs li a:hover,
.subPage .subPageHeader ul.tabs li.selected a {
    background: #00b65f;
    text-decoration: none;
}
.subPage .subPageHeader ul.interviews {
    /*
    flex-wrap: nowrap;
    */
    padding-right: 0;
}
ul.interviews li {
    width: calc(50% - 10px);
    margin-right: 20px;
}
ul.interviews li:nth-child(even) {
    margin-right: 0px;
}
ul.interviews.slider .slick-slide {
    margin: 0px 20px 0px 0px;
}
ul.interviews.slider li:nth-child(4n) {
    margin-right: 32px;
}
ul.interviews li a {
    text-decoration: none;
}
ul.interviews li a p {
    position: relative;
    text-align: center;
    color: #666;
    font-size: 13px;
    font-family: 'Zen Kurenaido', sans-serif;
    line-height: 2.0;
    height: 60px;
    padding: 40px 0px 40px;
    background: #FFF;
}
ul.interviews li a p.line3 {
    line-height: 18px;
    padding: 40px 0px 70px;
    letter-spacing: -1px;
}
ul.interviews li a p.line2 {
    line-height: 20px;
    padding: 35px 0px 50px;
}
ul.interviews li a p span {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    font-family: "Noto Sans JP", 游ゴシック, YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    line-height: 2.4;
    padding-bottom: 2px;
    background: #FF0006;
}

.aboutBody {
    background: url("../img/about/aboutBG02.png") repeat-y;
    background-size: contain;
    background: #FFF;
    padding: 40px 0 0;
}
.aboutBottom {
    background: url("../img/about/aboutBG03.png") no-repeat;
    background-size: cover;
    background: #FFF;
}
.aboutBody .subPageInner {
    margin-bottom: 0;
}
.aboutBody h3 {
    position: relative;
    display: inline-block;
    color: #FFF;
    font-family: Arial;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    height: 40px;
    padding-right: 80px;
    background: #FF0006;
    margin-bottom: 10px;
}
.aboutBody h3::before {
    position: absolute;
    content: "";
    top: 0px;
    left: -400px;
    width: 400px;
    height: 40px;
    background: #FF0006;
}
.aboutBody h3::after {
    position: absolute;
    content: "";
    top: 0px;
    right: -40px;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #FF0006;
}
.aboutBody ul li {
    padding-left: 30px;
}
.aboutBody ul li h4 {
    color: #333;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: 1px;
    margin: 20px 0;
}
.aboutBody ul li h4 span {
    color: #FF0006;
    font-weight: 900;
}
.aboutBody ul li h4 .subColor {
    color: #00b65f;
}
.aboutBody ul li p {
    margin-bottom: 40px;
}
.aboutBody ul li:last-child p {
    margin-bottom: 0px;
}
.aboutBody ul li.about01 img {
    width: 82%;
    margin: 20px 0 50px;
    margin-right: 8%;
}
.aboutBottom ul li:last-child {
    padding-bottom: 80px;
}








.interviewTop {
    background: url("../img/sub/careerBGSP.png") no-repeat;
    background-size: contain;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 20px;
}
.interviewMiddle {
    background: url("../img/interview/interviewBG02.png") no-repeat;
    background-size: contain;
    background-position-y: bottom;
    padding-left: 30px;
    padding-right: 20px;
    }
.interviewMiddle .subPageInner {
    margin-bottom: 0px;
    padding-bottom: 20px;
}
.interviewBottom {
    background: url("../img/interview/interviewBG03.png") no-repeat;
    background-size: cover;
}

.interviewTop h3,
.interviewBottom h3 {
    color: #FF0006;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}
.interviewBottom h3 {
    margin-bottom: 10px;
    margin-left: 30px;
}
.interviewBottom h3 span,
.interviewTop h3 span {
    display: block;
    color: #333;
    font-size: 16px;
}
.interview ul li {
    position: relative;
    padding: 0 0 20px;
}
.interview ul li span {
    position: relative;
    top: 0px;
    color: #FF0006;
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 10px;
}
.interview ul li.two-tiered span {
    margin-bottom: 10px;
}
.interview ul li h4 {
    position: relative;
    top: unset;
    left: unset;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 40px;
}
.interview ul li p {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}
.interview ul li p span {
    color: #666;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 0px !important;
}
.interview ul li .rightPhoto {
    display: none;
    margin-left: 0px;
    margin-bottom: 20px;
}
.interview ul li .rightPhoto p {
    width: 100%;
    margin-right: 0;
    margin-left: 0px;
}
.interview ul li .rightPhoto img {
    display: none;
    width: 45%;
    margin-top: -160px;
}
.interviewMiddle .interview ul li .rightPhoto img {
    display: none;
    margin-top: 40px;
}
.interviewBottom img {
    width: 40%;
}
.interviewBottom .breakPhoto {
    width: 100%;
    margin-right: auto;
    margin-bottom: 40px;
}
.interview .timeline li span {
    position: absolute;
    top: 8px;
    left: 4px;
    background: #FF0006;
    margin-bottom: 0;
}
.interview .timeline dl dt {
    display: inline-block;
    color: #FFF;
    font-size: 16px;
    background: #FF0006;
    padding: 2px 10px 4px;
    margin-bottom: 5px;
}
.interview .timeline dl dd {
    font-size: 14px;
}
.interview .schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.interview .timeline {
    width: 100%;
    margin-right: 0px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 20px;
    padding-bottom: 0px;
}
.interview .timeline dl {
    margin: 0 0 5px 3em;
}
.interview ul.slider3 {
    display: none;
    width: 42%;
    margin-top: 280px;
}
.interview .short ul.slider3 {
    margin-top: 50px;
}
.interviewBottom ul.slider3 img {
    width: 100%;
}
.slick-dots {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -40px !important;
    text-align: center;
    margin: 20px 0 0 0;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width: 12px !important;
    height: 12px !important;
    display: block;
    border-radius: 0 !important;
    background: #ccc;
    border: none;
    cursor: pointer;
}
.slick-dots .slick-active button {
    background: #FFF !important;
}

.interviewMessage {
    padding-top: 30px;
}
.messageBox {
    display: block;
}
.messageBox img {
    width: calc(100% - 60px);
    margin: 0 30px 30px;
    height: 90vw;
    object-fit: cover;
    object-position: 0px -30px;
}
.messageBox div {
    width: calc(100% - 40px);
    margin: 0 10px 0 30px;
}
.messageBox div h4 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.messageBox div p {
    color: #999;
    font-size: 12px;
    padding-right: 20px;
}
.messageBox img {
    width: calc(100% - 60px);
    margin: 0 30px 30px;
    height: 90vw;
    object-fit: cover;
    object-position: 0px -30px;
}
.interview img.sp {
    width: 100%;
    height: 40vw;
    margin: 0px 0px 20px 20%;
    object-fit: cover;
    object-position: -30px -30px;
}


.dataDetail {
    background: url("../img/data/dataBG.png") no-repeat #FFF;
    background-size: contain;
}
.dataDetail .more {
    margin-left: auto;
}
.dataDetail .subPageInner {
    padding: 40px 30px 20px 30px;
}
.dataDetail ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 0px;
}
.dataDetail ul li {
    position: relative;
    background: #FFF;
    padding: 20px 20px 0;
    text-align: center;
    font-size: 20px;
    border: 2px solid #FF0006;
    width: 100%;
    height: auto;
    height: 310px;
    padding-bottom: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
}
.dataDetail ul.twoColumns li {
    position: relative;
    width: calc(50% - 8px);
    height: auto;
    height: 220px;
    font-size: 14px;
    padding: 10px 10px;
}
.dataDetail ul.twoColumns li:first-child {
    margin-right: 16px;
}


.dataDetail ul li.data11,
.dataDetail ul li.data12 {
    height: 220px;
}
.dataDetail ul li.wide {
    width: 66%;
}

.dataDetail ul li:last-child {
    margin-right: 0;
}
.dataDetail ul li h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
.dataDetail ul li h3 span {
    font-size: 26px;
    margin: 0 5px;
}
.dataDetail ul.twoColumns li h3 {
    font-size: 16px;
    margin-bottom: 10px;
}
.dataDetail ul.twoColumns li h3 span {
    font-size: 20px;
    margin: 0 2px;
}
.dataDetail ul li img {
    width: 50%;
    margin: auto;
}
.dataDetail ul li.data01 img {
    width: 52%;
    margin-top: 10px;
    margin-left: 40%;
    margin-right: 5%;
}
.dataDetail ul li.data02 img {
    width: 25%;
    margin-right: 0;
    margin-left: 10%;
}
.dataDetail ul li.data07 img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
}
.dataDetail ul li.data03 p,
.dataDetail ul li.data04 p,
.dataDetail ul li.data05 p {
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    padding-left: 0;
}
.dataDetail ul li.data06 .data06Text {
    position: relative;
    left: unset;
    right: unset;
    bottom: unset;
    width: 100%;
}
.dataDetail ul li.data06 .data06Text h4 {
    color: #4177AC;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.dataDetail ul li.data06 .data06Text p {
    font-size: 14px;
    line-height: 2.0;
}

.dataDetail ul li.data09,
.dataDetail ul li.data10 {
    height: 270px;
    padding-left: 25px;
}
.dataDetail ul li.data09 h3,
.dataDetail ul li.data10 h3 {
    margin-bottom: 4px;
    margin-bottom: -5px;
}
.dataDetail ul li.data09 h4,
.dataDetail ul li.data10 h4 {
    font-size: 14px;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 10px;
}
.dataDetail ul li.data09 p,
.dataDetail ul li.data10 p {
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    padding-left: 10px;
}
.dataDetail ul li.data09 img,
.dataDetail ul li.data10 img {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 25%;
}
.dataDetail ul li.data11 .count,
.dataDetail ul li.data12 .count {
    font-size: 64px;
    margin-left: -60px;
}
.dataDetail ul li.data11 img,
.dataDetail ul li.data12 img {
    position: absolute;
    right: 10%;
    width: 20%;
}
.dataDetail ul li.data02 h4 {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}
.dataDetail ul li .dataLogo {
    position: absolute;
    left: 10px;
    bottom: 10px;
    margin: unset !important;
    width: 40px !important;
}
.dataDetail ul.twoColumns li .dataLogo {
    position: absolute;
    left: 5px;
    bottom: 5px;
    margin: unset !important;
    width: 30px !important;
}
.dataDetail ul li .comment {
    color: #ff0006;
    font-size: 16px;
    margin-top: 10px;
}
.dataDetail ul li.data01 .comment,
.dataDetail ul li.data02 .comment {
    position: absolute;
    right: 20px;
    bottom: 10px;
    text-align: right;
    margin-right: 0px;
    font-size: 12px;
}
.dataDetail ul li.data13 h3 {
    margin-bottom: 50px;
}
.dataDetail ul.twoColumns li.data08 h3 {
    margin-bottom: 12px;
}
.dataDetail ul.twoColumns li.data07 .chart-area,
.dataDetail ul.twoColumns li.data08 .chart-area {
    padding: 0px 20px;
    width: 100%;
    height: auto;
}
.dataDetail ul li.data06,
.dataDetail ul li.data14 {
    height: auto;
    padding-bottom: 20px;
}


.workHeader ul.workStyleMenu {
    position: relative;
    display: inline-block;
    background: #FF0006;
    padding: 10px 40px 10px 0px;
    margin-bottom: 40px;
}
.workHeader ul.workStyleMenu li {
    display: block;
    background: #FF0006;
    margin-right: 0px;
}
.workHeader ul.workStyleMenu::before {
    position: absolute;
    content: "";
    top: 0px;
    left: -400px;
    width: 400px;
    height: 100px;
    background: #FF0006;
}
.workHeader ul.workStyleMenu::after {
    position: absolute;
    content: "";
    top: 0px;
    right: -20px;
    border-bottom: 100px solid transparent;
    border-left: 20px solid #FF0006;
}
.workHeader ul.workStyleMenu li a {
    position: relative;
    color: #FFF;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
}
.workHeader ul.workStyleMenu li.selected a {
    font-weight: bold;
}
.workHeader ul.workStyleMenu li a::after {
    position: absolute;
    content: "";
    top: 16.5px;
    right: -20px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: rotate(45deg);
}
.benefit {
    background: url("../img/sub/benefitBGSP.png") no-repeat;
    background-size: cover;
    background-position: top;
    padding-left: 30px;
    padding-right: 20px;
    padding-bottom: 1px;
}
.career {
    background: url("../img/sub/careerBGSP.png") no-repeat;
    background-size: cover;
    padding-bottom: 1px;
    padding-left: 30px;
    padding-right: 20px;
}
.workHeader h2 {
    color: #FF0006;
    font-size: 28px;
    font-weight: 600;
}
.workHeader h2 span {
    display: block;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.0;
}
.workHeader ul.benefitTab {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
    padding-left: 0px;
    border-bottom: none;
    margin-bottom: 40px;
}
.workHeader ul.benefitTab li {
    color: #FF0006;
    font-size: 16px;
    padding: 6px 14px;
    margin: 0px 20px 10px 0px;
    cursor: pointer;
    border-bottom: 2px solid #FF0006;
}
.workHeader ul.benefitTab li:hover,
.workHeader ul.benefitTab li.select {
    color: #FFF;
    background: #FF0006;
    text-decoration: none;
}
ul.benefitBody li.hide {
    display: none;
}
ul.benefitBody li h4 {
    color: #FF0006;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
ul.benefitBody li span {
    color: #FF0006;
}
ul.benefitBody li span.caption {
    color: #333;
    font-size: 12px;
    padding-left: 20px;
}
ul.benefitBody li img {
    width: 84%;
    height: auto;
    margin: 10px 6% 20px;
    margin: 10px 6% 5px;
}
.career h3.leftA {
    font-size: 36px;
    line-height: 1.9;
}
.career h3.leftA span span {
    color: #333;
    font-size: 16px;
    line-height: 2.2;
}
.career01,
.careerStep {
    padding: 40px 20px 20px 30px;
    background: #FFF;
}
.career02 {
    padding: 40px 20px 20px 30px;
    background: #f3f3f3;
}
.career01 h3,
.career02 h3,
.careerStep h3 {
    color: #FF0006;
    margin-bottom: 20px;
}
.career01 h4,
.career02 h4,
.careerStep h4 {
    color: #444;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.career01 span span span,
.career02 span span span,
.careerStep span span span {
    color: #FF0006;
    font-weight: bold;
}
.careerStep ul li {
    margin-bottom: 20px;
}
.career02 img {
    width: 100%;
    margin: 20px 0px 10px;
}
.careerStep img,
.careerStep p img {
    width: 96%;
    margin: 30px 4% 15px 0px;
}


.flow ul {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 30px;
}
.flow ul li {
    padding-top: 20px;
}
.flow ul li h3 {
    font-size: 17px;
    margin-bottom: 20px;
}
.flow ul li h3 span {
    display: block;
    margin-right: 0px;
}
.flow ul li p {
    margin-left: 0;
    line-height: 2.0;
}
.flow ul li p a {
    color: #FF0006;
}
.flowBottom {
    padding: 40px 0px;
    background: #f3f3f3;
    text-align: center;
}
.flowBottom h3 {
    color: #FF0006;
    font-size: 20px;
    margin-bottom: 20px;
}
.flowBottom p {
    text-align: center;
}
.flowBottom ul li {
    position: relative;;
    width: auto;
    background: #FFF;
    padding: 10px 0px 10px 10px;
    text-align: left;
    margin: 20px 50px 0px 30px;
}
.flowBottom ul li p {
    text-align: left;
    line-height: 1.8;
}
.flowBottom ul li a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0px;
}
/*
.flowBottom ul li a::before {
    transform: skewX(320deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -50px;
    width: 160px;
    background-color: #FF0006;
}
*/
.flowBottom ul li a::before {
    /*
    transform: skewX(-13deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 280px;
    right: -15px;
    z-index: 0;
    */
    transform: skewX(-13deg);
    top: 30px;
    bottom: unset;
    right: -30px;
    width: 40px;
    height: 50px;
    background-color: #FF0006;
}
.flowBottom ul li a::after {
    position: absolute;
    top: 44px;
    right: -23px;
    content: "》";
    color: #FFF;
    font-size: 16px;
}
/*
.flowBottom ul li::after {
    transform: skewX(349deg);
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: -30px;
    width: 40px;
    background-color: #FF0006;
}
*/
.flowBottom ul li h4 {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}
.flowBottom ul li h4 span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.faq {
    padding-top: 20px;
    padding-right: 10px;
}
.faq .accordion-area {
    max-width: initial;
    padding-left: calc(30px - 3%);
}
.faq .accordion-area li {
    margin: 0px 0 20px;
}
.faq .accordion-area section {
    border-top: none;
    background: transparent;
}
.faq .accordion-area section h3 {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    padding-right: 40px;
}
.faq .accordion-area section h3 span {
    display: block;
    color: #FF0006;
    font-size: 16px;
    font-weight: 600;
    margin-right: 0px;
}
.faq .accordion-area section p {
    color: #666;
    font-size: 14px;
    padding-left: 6px;
    padding-right: 20px;
    line-height: 2.0;
}
.faq .accordion-area section .box {
    margin: 0 0px 3% 0px;
    padding: 0 14px 10px 4px;
}

.jobinfo {
    background-size: contain;
    padding: 10px 0px 40px;
}
.jobinfo table {
    padding-right: 0;
}
.jobinfo table tr th {
    width: 20%;
    color: #FF0006;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    vertical-align: baseline;
    padding: 50px 0;
    border-bottom: 2px solid #CCC;
}
.jobinfo table tr td {
    color: #666;
    font-size: 20px;
    line-height: 2.0;
    padding: 50px 0;
    border-bottom: 2px solid #CCC;
}
.jobinfo table tr td p.head {
    color: #333;
    font-size: 28px;
    font-weight: 700;
    line-height: 2.0;
    margin-bottom: 20px;
}
.jobinfo table tr:last-child th,
.jobinfo table tr:last-child td {
    border-bottom: none;
}

.jobinfo .table {
    padding-right: 0;
}
.jobinfo .table dl {
    margin-left: 30px;
    margin-right: 20px;
    border-bottom: 1px solid #CCC;
}
.jobinfo .table dl dt {
    float: none;
    width: 100%;
    color: #FF0006;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.0;
    vertical-align: baseline;
    padding: 20px 0px 0 0px;
}
.jobinfo .table dl dd {
    width: 100%;
    margin-left: 0;
    color: #666;
    font-size: 12px;
    line-height: 2.0;
    padding: 10px 0px 20px 0px;
}
.jobinfo .table dl dd p.head {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    line-height: 2.0;
    margin-bottom: 10px;
}
.jobinfo .table dl.last-child dt,
.jobinfo .table dl.last-child dd {
    border-bottom: none;
}


.jobinfoBottom {
    position: relative;
    padding: 120px 100px 20px;
    padding: 40px 0px;
    background: #f3f3f3;
    text-align: center;
}
.jobinfoBottom h3 {
    color: #FF0006;
    font-size: 18px;
    padding-right: 0px;
    margin-bottom: 40px;
}
.jobinfoBottom h4 {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.jobinfoBottom p {
    text-align: center;
    }
.jobinfoBottom img {
    position: relative;
    bottom: unset;
    right: unset;
    width: 100%;
    margin-bottom: 40px;
}













.parallax-section {
    position: relative;
    height: 200px;
    background-attachment: unset;
    background-size: cover;
    background-position: top center;
}
.parallax-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.parallax-content p {
    text-align: center;
    color: #FFF;
    font-size: 20px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}

/*
.parallax {
    height: 180px;
}
.parallax::before {
    background-image: url("../img/history/historyBnr01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
.parallax p {
    color: #FFF;
    font-size: 20px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    text-align: center;
    width: 100%;
    line-height: 180px;
}
.parallax02::before {
    background-image: url("../img/history/historyBnr02.png");
    z-index: -2;
}
.parallax03 {
    background: #FFF;
    height: 100px;
}
*/


.groupMenu {
    display: flex;
    flex-wrap: wrap;
}
.groupMenu li {
    margin-right: 9px;
    margin-bottom: 10px;
}
.groupMenu li a {
    text-align: center;
    color: #333;
    font-size: 12px;
    background: #F8F8F8;
    width: auto;
    height: 30px;
    line-height: 29px;
    transition: .2s all;
    padding: 0px 10px;
}
.groupMenu li.selected a,
.groupMenu li a:hover {
    color: #FFF;
    background: #d81e05;
    text-decoration: none;
}
.groupMenu li:nth-child(4) {
    margin-right: 0;
}
.groupMenu li:nth-child(5) {
    display: none;
}
.sustainabilityInner .groupMenu li:nth-child(5) {
    display: block;
}

.visionInner {
    text-align: center;
    padding: 40px 20px;
}
.vision01 {
    padding-top: 40px;
}
.vision01 img {
    width: 80%;
}
.visionInner h3 {
    font-size: 16px;
    margin-bottom: 30px;
    border-bottom: none;
}
.visionInner p {
    text-align: center;
}
.section-vision01 {
    background-image: url("../img/group/visionBG01.webp");
}
.section-vision02 {
    background-image: url("../img/group/visionBG02.webp");
}
.section-vision03 {
    background-image: url("../img/group/visionBG03.webp");
}
.section-vision04 {
    background-image: url("../img/group/visionBG04.webp");
}


.greetingInner h3 {
    border-bottom: none;
}
.greeting01 {
    display: block;
    flex-wrap: wrap;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
}
.greeting01 h3 {
    width: 100%;
    padding-top: 0px;
}
.greeting01 img {
    width: 100%;
}
.greeting02,
.greeting03,
.greeting04 {
    overflow: hidden;
    background: #F2F2F2;
    padding: 20px 15px 20px 20px;
}
.greeting02 h3,
.greeting03 h3 {
    position: relative;
    margin-bottom: 20px;
}
.greeting02 h3::after,
.greeting03 h3::after {
    position: absolute;
    left: 400px;
    top: 31px;
    content: "";
    width: 100%;
    height: 2px;
    background: #d81e05;
}
.greeting02 h3 span,
.greeting03 h3 span {
    display: inline-block;
    margin-bottom: 10px;
}
.greeting04 {
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 60px;
}
.greeting04 img {
    width: 100%;
    margin: auto;
}

.sideMenu {
    position: relative;
    top: unset;
    width: 100%;
    height: auto;
    z-index: 0;
    margin-right: 0;
}
.sideMenu h3 {
    font-size: 16px;
    border-bottom: none;
    margin-bottom: 20px;
}
.sideMenu h3 span {
    font-size: 16px;
}
.sideMenu ul li {
    border-top: 1px solid #CCC;
    padding: 15px 0px;
}
.sideMenu ul li:last-child {
    border-bottom: 1px solid #CCC;
}
.sideMenu ul li a {
    position: relative;
    display: inline-block;
    line-height: 2.0;
    width: 240px;
}
.sideMenu ul li a.anchor {
    display: inline-block;
    font-size: 13px;
    width: 100%;
    margin-bottom: 0px;
}
.sideMenu ul li a:hover {
    color: #d81e05;
}
.sideMenu ul li a img {
    position: absolute;
    top: 6px;
    right: 130px;
    width: 15px;
}


.businessBody {
    margin-top: -70px;
    padding-top: 70px;
    margin-bottom: 20px;
}
.businessBody img {
    margin-bottom: 20px;
}
.businessWrapper {
    display: block;
}
.businessWrapper .sideMenu {
    display: none;
    width: 25%;
    height: auto;
    margin-right: 5%;
}
.businessWrapper .sideMenu h3 {
    font-size: 26px;
    margin-bottom: 80px;
}
.businessWrapper .sideMenu h3 span {
    font-size: 22px;
}
.businessWrapper .sp ul li {
    position: relative;
    border-top: none;
    border-bottom: none;
    padding: 0px 0px;
    margin-bottom: 10px;
}
.businessWrapper .sp ul li a {
    width: 100%;
    line-height: 60px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    transition: all .3s;
}
.businessWrapper .sp ul li a:hover {
    color: #FFF;
    background: #d81e05;
    border-top: 1px solid #d81e05;
    border-bottom: 1px solid #d81e05;
    padding-left: 20px;
    text-decoration: none;
}
.businessWrapper .sp ul li img {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 20px;
}
.businessWrapper .businessText {
    width: 100%;
    margin-bottom: 20px;
}
.businessWrapper .businessText h4 {
    color: #444;
    font-size: 18px;
    margin-bottom: 20px;
}
.businessMovie ul {
    display: flex;
    flex-wrap: wrap;
}
.businessMovie ul li {
    width: 44%;
    margin: 0px 3%;
    text-align: center;
}
.businessMovie ul li video {
    width: 100%;
}




.historyTop {
    padding: 20px 20px;
}
.historySub ul li {
    display: block;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.historySub ul li p {
    width: 100%;
    margin-bottom: 20px;
}
.historySub ul.leftImg li p {
    padding-left: 0;
}
.historySub ul li img {
    width: 100%;
}
.historySub ul.leftImg li img {
    margin-bottom: 20px;
}
.historyData {
    position: relative;
    margin-bottom: 0px;
}
.historyData .historyDataBG {
    position: sticky;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 0;
}
.historyData .subPapeInner {
    position: relative;
    margin-top: -100vh;
    z-index: 1;
    padding-right: 15px;
}
.historyData .history_chronology {
    
}
.historyData .history_chronology::after {
    content: '';
    width: 2px;
    height: calc(100% - 113px);
    top: 113px;
    position: absolute;
    left: 64px;
    background-color: #d81e05;
}
.historyData h3 {
    padding-bottom: 0px;
    border-bottom: none;
}
.historyData dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.historyData dl dt {
    position: relative;
    top: 3px;
    width: 60px;
    color: #d81e05;
    font-size: 18px;
    font-family: 'Josefin Sans',sans-serif;
}
.historyData dl dt::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #d81e05;
    position: absolute;
    top: -7px;
    left: 40px;
    border-radius: 50%;
    transform: translate(0%,100%);
}
.historyData dl dd {
    font-size: 12px;
    line-height: 1.8;
    width: calc(100% - 60px);
}
.historyData .historySnaps {
    display: none;
    position: absolute;
    top: 200px;
    left: 0px;
    right: 80px;
}
.historyData .historySnaps img {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 240px;
}
.historyData .historySnaps img.historySnapVertical {
    width: 160px;
    margin-right: 40px;
}
.historyData .historySnaps img.historySnap02 {
    top: 300px;
}

.sustainabilityHeader {
    margin-top: 60px;
    padding: 45px 20px;
    background: url("../img/top/susBG.png") no-repeat;
    background-size: cover;
    background-position: center top;
    background-position: center bottom;
    background-position: center center;
    height: 160px;
}
.sustainabilityHeader.Environment {
    margin-top: 60px;
    padding: 20px 20px;
    background: url("../img/sustainability/susHeaderEnv.webp") no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: auto;
}
.sustainabilityHeader.Social {
    margin-top: 90px;
    padding: 30px 20px;
    background: url("../img/sustainability/susHeaderSoc.webp") no-repeat;
    background-size: cover;
    background-position: center center;
    height: auto;
}
.sustainabilityHeader h2,
.sustainabilityHeader h2 span {
    color: #FFF;
}
.sustainabilityInner {
    padding: 40px 20px;
}
.sustainabilityInner h3 {
    font-size: 15px;
    border-bottom: none;
    margin-bottom: 0px;
}
.sustainabilityMenu {
    background: #f2f2f2;
    padding: 30px 20px 1px;
}
.sustainabilityMenu ul {
    display: block;
    flex-wrap: wrap;
}
.sustainabilityMenu ul li {
    width: 100%;
    margin: 0px;
    text-align: center;
    background: #FFF;
    padding: 0px 0px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.sustainabilityMenu ul li img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.sustainabilityMenu ul li h4 {
    color: #444;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
    text-align: center;
    margin: 10px 0 20px;
}
.sustainabilityMenu ul li h4 span {
    color: #d81e05;
    font-family: "Cabin";
    font-size: 18px;
    font-weight: 700;
}
.sustainabilityInner h4 {
    color: #444;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.sustainabilityInner .groupMenu li a {
    font-size: 12px;
    width: auto;
    padding: 0px 10px;
}
.susDetail {
    padding-top: 0px;
}
.susDetail h3 {
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #d81e05;
    margin-bottom: 20px;
}
.susDetail h4 {
    font-size: 16px;
    margin-bottom: 10px;
}
.susDetail p.body {
    padding-left: 0px;
    margin-bottom: 20px;
}

.susWrapper {
    display: block;
    flex-wrap: wrap;
    align-items: flex-start;
}
.susWrapper p {
    width: 100%;
}
.susWrapper img {
    width: 100%;
    margin: 20px auto;
}
.sustainabilityBottom {
    margin-top: 30px;
}



.recruitHeader {
    margin-top: 60px;
}
.recruitInner {
    text-align: center;
    background: #f2f2f2;
    padding: 20px 20px 30px;
    margin-bottom: 100px;
}
.recruitInner h3 {
    margin-bottom: 10px;
    border-bottom: none;
}
.recruitInner ul {
    display: block;
    flex-wrap: wrap;
    margin-top: 30px;
}
.recruitInner ul li {
    position: relative;
    width: 100%;
    margin: 0px 0px 20px;
    text-align: center;
}
.recruitInner ul li::after {
    position: absolute;
    content: "";
    bottom: 3px;
    right: 0px;
    border-bottom: 30px solid #d81e05;
    border-left: 30px solid transparent;
}
.recruitInner ul li h4 {
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
    text-align: center;
    margin: 20px 0;
}
.recruitInner ul li h4 span {
    color: #d81e05;
    font-family: "Cabin";
    font-size: 20px;
    font-weight: 700;
}

.contactInner h4 {
    color: #444;
    font-size: 16px;
    margin-bottom: 20px;
}
.overviewContact ul li {
    width: 30%;
    margin-right: 5%;
}
.overviewContact ul li:nth-child(even) {
    margin-right: 5%;
}
.overviewContact ul li:last-child {
    margin-right: 0;
}

.privacy {
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.privacy h3 {
    font-size: 14px;
    text-align: center;
    padding-bottom: 0px;
    border-bottom: none;
}
.privacy h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.privacy h5 {
    padding-left: 0px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.privacy p {
    padding-left: 0px;
    font-size: 12px;
    margin-bottom: 20px
}


/*
.accordionbox {
    width: 100%;
    background: #F2F2F2;
    border-bottom: 1px solid #CCC;
    margin: 0px auto 10px;
    padding: 0px;
}
.accordionlist dt {
    display: block;
    padding: 11px 0;
    border-top: 1px solid #CCC;
    background-image: url(arrow_on.png);
    background-size: 9px;
    background-position: 12px 0px;
    background-repeat: no-repeat;
    background-color: #FFF;
}
.accordionlist dt .title {
    padding-left: 30px;
    float: left;
    font-size: 18px;
}
.accordionbox .parentLink {
    padding-left: 35px;
    font-size: 18px;
    display:block;
    background: #FFF;
    border-top: 1px solid #CCC;
    background-image: url(arrow_on.png);
    background-size: 9px;
    background-position: 12px 0px;
    background-repeat: no-repeat;
    background-color: #FFF;
}
.accordionlist dd {
    display:none;
    background: #fff;
}
.accordion_icon,
*/
.accordion_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.accordion_icon {
    position: relative;
    width: 30px;
    height: 30px;
    float: right;
    margin-right: 10px;
}
.accordion_icon span {
    position: absolute;
    left: 6px;
    width: 50%;
    height: 2px;
    background-color: #CCC;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 15px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 15px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
    display:none;
}
.accordion_icon.active span:nth-of-type(2) {
    top: 15px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.clearfix {
    zoom: 1;
}
/*
.accordionbox ul li {
    height: 49px;
    padding: 0px 0px 0px 46px;
    background-image: url(arrow_on.png);
    background-size: 9px;
    background-position: 24px -2px;
    background-repeat: no-repeat;
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
}
.accordionbox ul li:first-child {
    border-top: 1px solid #CCC;
}
.accordionbox .parentLink a,
.accordionbox ul li a {
    height: 49px;
    display: block;
    color: #333;
    text-align: left;
    font-size: 18px;
    text-decoration: none;
}
.accordionbox .parentLink a {
    height: 60px;
}
.accordionbox .parentLink a span,
.accordionbox ul li a span {
    height: 24px;
    padding: 14px 0 15px;
    display: block;
}
*/
.accordionlist dt {
    padding: 0;
    position: absolute;
    top: 20px;
    right: 0;
}
.accordionlist dt .title {
    font-size: 14px;
    padding-left: 0px;
    width: 100%;
    text-align: left;
    margin: 10px 0px;
    letter-spacing: 0;
}
.accordionlist dd {
    padding: 0;
}




}

/* iPad mini 対応*/

@media screen and (min-width: 768px) {

.rd .sectionBG03 {
    background-position: initial;
}
.episode .sectionBG01 img,
.episode .sectionBG03 img {
    object-fit: unset;
    height: auto;
}

}


/*ドロワーメニューのClose時のスタイルシート */
.drawer {
    position:fixed;
    top: 0px;
    right:0;
    width: 100%;
    width: 200px;
    height: 100vh;
    margin: auto;
    text-align: center;
    background: rgba(0, 51, 23, 0.8);
    background: rgba(0, 114, 192, 0.9);
    background: rgba(206, 50, 46, 0.9);
    padding: 40px 0px 80px;
    padding: 10px 10px;
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw);
    -webkit-transition:ease .5s;
    transition:ease .5s;
    z-index: 10000;
    opacity: 0;
    //transition: z-index 0s, opacity ease 0.5s;
}

/* ドロワーメニューの開閉ボタン */
.drbtn {
    position: fixed;
    top: 10px;
    bottom: 50px;
    bottom: unset;
    right: 20px;
    width: 50px;
    height: 50px;
    cursor:pointer;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    font-size: 10px;
    padding-bottom: 2px;
    z-index: 10000;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    background: transparent;
    /*
    -webkit-box-shadow: 0px 2px 4px 0px rgba(37,37,37,0.1);
            box-shadow: 0px 2px 4px 0px rgba(37,37,37,0.1);
    */
}
/* ハンバーガーボタンを作るスタイルシート */
.hambarg {
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 2px;
    width: 20px;
    background: #004488;
    -webkit-transition: ease .5s;
    transition: ease .5s;
}
.hambarg:nth-child(1) {
    top:  35%;
    left: 50%;
}
.hambarg:nth-child(2) {
    top:  50%;
    left: 50%;
}
.hambarg:nth-child(3) {
    top:  65%;
    left: 50%;
}
/* ドロワーメニューをOPENにするスタイルシート */
.drawer.action {
    opacity: 1.0;
    -webkit-transform:translateX(0);
    transform:translateX(0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
 
/* ボタンをドロワーメニュー内に表示 */
.drbtn.action {
    right: 20px;
    bottom: 50px;
}
.drawer.action span {
    color: #FFF;
}
.action .hambarg {
    background: #FFF;
}

 
/* ハンバーガーボタンを「✖」に変える */
.drbtn.action .hambarg:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}
.drbtn.action .hambarg:nth-child(2) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0;
}
.drbtn.action .hambarg:nth-child(3) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}
.drawer .spLogo {
    width: 50px;
    margin-bottom: 20px;
}
.drawer ul {
    padding-left: 20px;
    padding-top: 50px;
}
.drawer ul li {
    margin: 0px;
    float: none;
    height: auto;
    padding: 5px 0;
    text-align: left;
}
.drawer ul li.noLink {
	color: #CCC;
	font-size: 14px;
}
.drawer ul li ul {
	padding-left: 10px;
}
.drawer ul li ul li {
	padding-bottom: 0;
	margin-bottom: 0;
}
.drawer ul li a {
    color: #FFF;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    height: auto;
    padding: 0px;
    position: relative;
}
.drawer li.acd > a::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    right: 20%;
    top: 14px;
    right: -25px;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin-top: -8px;
    -webkit-transition: .3s all;
       -moz-transition: .3s all;
        -ms-transition: .3s all;
         -o-transition: .3s all;
            transition: .3s all;
}
.drawer li.acd > a.action::before {
    margin-top: -3px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.drawer ul.sub {
    line-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 0px;
    padding: 0px 0;
    transition: ease .3s;
}
.drawer ul.sub.action {
    margin-top: 5px;
    padding: 5px 0;
    line-height: 1.5;
    opacity: 1;
    visibility: visible;
}
.drawer ul.sub li {
    margin: 0;
    padding: 0;
    height: 0px;
    padding-left: 5px;
}
.drawer ul.sub a {
    font-size: 15px;
}
.drawer ul.sub.action li {
    height: auto;
    margin-bottom: 5px;
}









@media screen and (max-width: 359px) {





}