/* this css is applied to all front page */

html {
    scroll-behavior: smooth;
}

img {
   image-rendering: -webkit-optimize-contrast;
}

body{
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
    overflow-x: hidden;
    width:100%;
    letter-spacing: -0.25px;
    line-height: 1.8;
}

p a{
    color: #1C87E1;
    text-decoration: underline;
}

/* body .front{
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
    letter-spacing:0.04px !important;
} */

:root {
    --primary: #1976d2;
}

/* button  */
.btn-opacity:hover {
    opacity: 0.9;
}

.home-btn {
    background: #1976d2;
    color:white;
    cursor: pointer;
}

.home-btn:hover {
    opacity: 0.9;
    color:white;
}

.home-btn-reverse {
    color: #1976d2;
    background:white;
    cursor: pointer;
    border: 1px solid #1976d2;
}

.home-btn-reverse:hover {
    opacity: 0.9;
    color: #1976d2;
}

.primary-btn {
    background:#1976d2;
    color:white;
    cursor: pointer;
}

.primary-btn:hover {
    opacity: 0.9;
    color:white;
}

.white-btn {
    background: white;
    cursor: pointer;
}

.white-btn:hover {
    background: white;
    opacity: 0.9;
}

.gray-btn {
    background: #d1d8e9;
    cursor: pointer;
}

.gray-btn:hover {
    background: #d1d8e9;
    opacity: 0.9;
}

.business-cta {
    background: linear-gradient(to bottom, #519fe7, #4ec8e3);
}

/* .primary-badge {
    background: #59b5af;
    color:white;
} */


.fit-img{
    object-fit: contain;
}

.section:nth-child(even) {
    background-color:#F6F6F6;
}

.vh-20{
    height:20vh;
}

.vh-75{
     height:75vh;
}

.vh-85 {
    height: 85vh;
}

.vh-90{
    height:90vh;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.rem1{
    font-size: 1rem;
}

.rem2{
    font-size: 2rem;
}

.rem0p9{
    font-size: 0.9rem;
}

.bf-1{
    font-size:0.85rem;
    letter-spacing:0.04rem;
}

.payment-discount {
    background-color: rgb(76,175,80);
    border-radius: 24px;
    padding: 4px 8px;
    margin-left: 2px;
    font-size: 12px;
    vertical-align : .05rem;
}

/* accordion  */
.myaccordion {
    max-width: 800px;
    margin: 50px auto;
    box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
    border: none;
}

.myaccordion .card-header {
    border-bottom-color: #EDEFF0;
    background: transparent;
}

.myaccordion .fa-stack {
    font-size: 18px;
}

.myaccordion .btn {
    width: 100%;
    font-weight: bold;
    color: #004987;
    padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
    text-decoration: none;
}

.myaccordion li + li {
    margin-top: 10px;
}

.t-style{
    color:#1976d2;
    background:white;
    border: solid 2px #1976d2;
}

.nav-btn {
    font-size: 0.75rem;
    color:#576871;
    border: 1px solid #576871;
    padding:0.6em 1.2em;
}

/* shinya updates */
.circle {
    width: 3em;
    height: 3em;
    border-radius: 50%;
}

.cta-text {
    font-size:1.9rem;
}

.sub-title {
    font-size: 1.9rem;
    line-height: 1.8;
    font-weight: 800;
}

.sub-text {
    font-size: 1.2rem;
    line-height: 2.2;
}

.main-text {
    font-size:1.1rem;
    font-weight:500;
    z-index:1;
    line-height:2;
}

.main-title {
    font-size:3rem;
    z-index:1;
    font-weight:700;
}

.job-opportunity > ul {
   font-size: 1.2rem;
}

.padding-main {
    padding-bottom:3rem!important;
}

.feature-title {
    font-size:1.25rem;
    font-weight:600;
}

.feature-text {
    font-size:1rem;
    line-height:2rem;
}

.review-sub {
    font-size:1.2rem;
    line-height: 1.9;
}

.review-text {
    font-size:0.95rem;
    line-height: 1.9;
}

.second-title {
    font-size:2.4rem;
}

.rem1p1 {
  font-size: 1.1rem;
}

.rem1p3 {
  font-size: 1.3rem;
}

.lh22 {
  line-height: 2.2;
}

.background-gray {
    background:#f6f6f6;
}

.icon-gray {
    color:#999999;
}

.icon-blue, .icon-blue:hover {
    color: #1976d2;
    font-weight: bolder;
}

.nav-link .active{
    color:#1976d2;
}

/* business comparison table */
.comparison-th {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #e3e4ea;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.comparison-td {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-title-td {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-title-td > p {
    font-size: .9rem;
    font-weight: bold;
}

.comparison-td p.font-weight-bold {
    font-size: 1.4rem;
}

.comparison-recursion {
    color: white;
    background: #1976d2;
    border-radius: 15px;
}

/* shinya updates END */

/* desktop size 4k */
@media (min-width: 1200px){
    .heightDesktop {
        height:100vh!important;
    }
}

@media (min-width: 1500px){
    .desktop-col-6 {
        flex: 0 0 50%!important;
        max-width: 50%!important;
    }
}


/* shinya updates iphone SE*/
@media (max-width: 320px) {

    .main .bf-1 {
        font-size:0.7rem!important;
    }

    .main-title {
        font-size:1.5rem!important;
    }

    .main-text {
        font-size:0.9rem;
    }

    .padding-main {
        padding-bottom:0rem!important;
    }

    .sub-title {
        font-size: 1.2rem!important;
    }

    .sub-text {
        font-size: 0.9rem!important;
    }

    .job-opportunity > ul {
        font-size: 1rem;
    }

    .second-title {
        font-size:2rem;
    }

    .cta-text {
        font-size: 1.5rem!important;
    }
}
/* shinya updates END */

/* only iphone 6-8 */
@media (max-width: 375px) and (min-width: 321px) {
    .padding-main {
        padding-bottom:0rem!important;
    }

    .main-title {
        font-size:1.9rem!important;
    }

    .header-area {
      position: sticky;
      top: 0;
      z-index:99;
    }
}

/* only ipad */
@media (max-width: 768px) and (min-width: 600px) {

}

@media (max-width: 768px) {
    .main .bf-1{
        font-size:0.9rem;
        margin-top:0.5rem;
        padding: 1rem 3rem;
    }

/* shinya updates */
    .rem2 {
        font-size:1.5rem;
        line-height:2.5rem;
    }

    .t-style {
        display:none;
    }

    .cta-text {
        font-size: 1.7rem;
        line-height: 1.5;
    }

    .sub-title {
        font-size: 1.5rem;
        line-height: 1.8;
    }

    .sub-text {
        font-size: 1rem;
        line-height: 2;
    }

    .job-opportunity > ul {
      font-size: 1rem;
   }

    .main-title {
        font-size:2.1rem;
        line-height: 1.4;
    }

    .main-text {
        line-height: 1.8;
    }

    .lp-img, .lp-business, .lp-student-recruiter, .lp-home-page, .lp-recruiter {
        background-position: 65% !important;
        background-color: rgba(255,255,255,0.2)!important;
    }

    .second-title {
        font-size:2rem;
        line-height: 1.6;
    }

    .nav-login {
        font-size:0.9rem!important;
        margin-bottom: 0.75rem;
    }

    .nav-register {
        font-size:0.9rem!important;
    }

    .table-overflow {
        overflow-x: scroll;
    }

    .header-area {
        position: sticky;
        top: 0;
        z-index:99;
    }

/* shinya updates END */
}

@media (min-width: 992px) {
    body p{
        font-size:1.1em;
    }
}

/* landing page */
.lp-img {
    background: url(../img/hero-image.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
}

.lp-img::after, .lp-business::after, .lp-student-recruiter::after, .lp-home-page::after, .lp-recruiter::after {
    content: '';
    background-color: rgba(0,0,0,.0);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.lp-home-page {
    background: url(../img/home-image-desktop.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: bottom;
}

.lp-business {
    background: url(../img/front/business/business-desktop-1.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: bottom;
}

.lp-student-recruiter {
    background: url(../img/front/student-recruiter/hr-desktop-1.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: bottom;
}

.lp-recruiter {
    background: url(../img/front/recruiter/hr-desktop.png);
    background-size: cover ;
    background-repeat: no-repeat;
    background-position: bottom;
}

.cta-bg {
    background-color: #0466AA;
}

.marker {
    padding: 2px 4px;
    font-size: 90%;
    color: black;
    background-color: #FFE3AC;
    border-radius: 4px;
  }

.rem0p95 {
  font-size:0.95rem;
}


/* about navigation for home/marketing page */

.home-navigation {
    background: #283b5a!important;
}

.home-navigation .navbar-light .navbar-nav .nav-link {
    color: #b1c2de;
}

.home-navigation .navbar-light .navbar-nav .nav-register {
    color: white;
    background: #1976d2;
    border: none;
}

.home-navigation .navbar-toggler-icon {
    filter: invert(100%);
}

.navbar-light .navbar-nav .nav-register {
    color: #576871;
    border-color: #6c757d;
}

.navbar-light .navbar-nav .nav-login {
    color: #576871;
}

.home-navigation .navbar-light .navbar-nav .nav-register:hover {
    opacity: 0.9;
    color:white;
}

.nav-login {
    font-size: 0.75rem;
    color: #576871;
    padding-top: 0.7em;
    cursor: pointer;
}

.nav-register {
    font-size: 0.75rem;
    color: #576871;
    cursor: pointer;
    padding-right: 1.3rem!important;
    padding-left: 1.3rem!important;
    border-color: #6c757d;
    border: 1px solid #dee2e6;
}

.not-available {
    background: gray;
    height: 2px;
    width: 18px;
    display: block;
    margin: 11px auto;
}

.course-not-available {
    background: rgba(0, 0, 0, 0.15);
}


/* faq accordion */
#faq .card .card-header .btn-header-link {
    color: #004987;
    display: block;
    text-align: left;
    background: white;
    padding: 15px;
    font-weight: 800;
}

#faq .card .card-header {
    background: white;
}

#faq .card .card-header .btn-header-link:after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
}

#faq .card .card-header .btn-header-link.collapsed:after {
    content: "\f106";
}

#faq .card .collapse {
    border: 0;
}

/* tutorial accordion */

#tutorial .card .card-header .btn-header-link {
    color: white;
    display: block;
    text-align: left;
    background: #202E3D;
    padding: 15px;
    font-weight: 400;
}

#tutorial .card .card-body {
    color: white;
    background: #202E3D;
}

#tutorial > .card .card-header {
    margin-bottom: 0px;
}

#tutorial .card .card-header .btn-header-link:after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
}


.client-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 4px solid #fff;
    margin: 0px auto 20px;
    border-radius: 100%;
}
.carousel-content {
    padding: 50px 0px;
}
.carousel-content h3 span {
    font-size: 17px;
    font-weight: normal;
    color: #e8e8e8;
    text-transform: uppercase;
}
.client-img img {
    width: 100%;
}
#testimonial {
    text-align: center;
    padding: 40px 0px;
    color: #fff;
}
#testimonial .carousel-control-prev,
#testimonial .carousel-control-next {
    font-size: 36px;
}
#testimonial h2 {
    font-size: 40px;
    border-bottom: 1px solid #7fbdff;
    padding-bottom: 20px;
    display: inline-block;
}

/* content explanation */
.carousel-caption {
   position: relative;
   left: 0;
   top: 0;
}

/* business page */

.business-price-list ul {
   list-style: none;
   padding: 1.5rem;
}

.business-price-list li {
   padding-bottom: .75rem;
}

.business-price-list i {
   color: #4BBB89;
}

.business-price-list {
   min-height: 23em;
}

/* student page */

.student-btn {
    background: #006adb;
    color:white;
    cursor: pointer;
    font-size: .9rem;
}

.student-btn:hover {
    opacity: 0.9;
    color:white;
}

.student-btn-reverse {
    color: #006adb;
    background:white;
    cursor: pointer;
    border: 1px solid #006adb;
    font-size: .9rem;
}

.student-btn-reverse:hover {
    opacity: 0.9;
    color: #006adb;
}

.student-title {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 500;
}

.student-sub {
    font-size: 1rem;
    line-height: 2;
}

.entry-period-badge {
    background:#2a2d3d;
    color:white;
    margin: 0 1em;
    border-radius: 5px;
    font-size: 0.75rem;
    padding: 0.25em;
}

.entry-period-text {
    font-size: 0.8em;
}

.border-round {
    border-radius: 10px;
}

.student-table {
    font-size: 0.9rem;
}

.student .fa-stack .fa-circle {
    color: #3b5998;
    font-size: 3rem;
}

.student-share a i{
    color: #2a2d3d;
}

.student-qa #faq .card .card-header .btn-header-link {
    color: #343a40;
}

/* recruite page */

/* リストスタイル */
.user-skillset {
    list-style: none; /* リストマーカーを非表示 */
    padding: 0 0 0 15px;
    margin: 0;
}

/* リストアイテムのスタイル */
.user-skillset li {
    padding: 7px 0; /* アイテム間のパディング */
    border-bottom: 1px solid #333; /* アイテムの下に薄い境界線 */
    transition: all 0.3s ease-in-out; /* ホバーエフェクトのための遷移 */
}

/* ホバーエフェクト */
.user-skillset li:hover {
    background-color: #2776D2;
    cursor: pointer; /* カーソルをポインタに */
    padding-left: 20px; /* ホバー時に少し右に動かす */
}

#skillset a:hover {
    color: #2776D2;
}

/* tech articles */

.markdown h1{
   margin-bottom: 20px;
   font-size: 2rem;
   font-weight: bold;
}

.markdown h2 {
   font-size: 1.5rem;
   line-height: 36px;
   margin-bottom: 24px;
   font-weight: 600;
}

.markdown h2:before {
   content: "";
   display: block;
   margin: 36px 0;
   border: 0;
   height: 1px;
   background: #E8E8E8;
   overflow: hidden;
}

.markdown h3 {
   padding-top: 24px;
   margin-bottom: 12px;
   font-size: 1.25rem;
   line-height: 30px;
   font-weight: 400;
   text-decoration: underline;
}

.markdown p{
   font-size: 1rem;
   line-height: 30px;
   margin-bottom: 24px;
}

.markdown ul{
   margin-bottom: 24px;
}

.markdown .main-md li{
  margin-bottom: 12px;
}

.markdown a {
   color: rgb(55,115,245);
}

.markdown blockquote {
   background: #f9f9f9;
   border-left: 10px solid #ccc;
   margin: 1.5em 10px;
   padding-left: 1em;
}

.markdown .hljs {
   white-space: pre-wrap;
}

.markdown .arrow::after {
   content: "\f054";
   float: right;
   font-family: "Font Awesome 5 Free";
   font-weight: bolder;
}

.markdown .arrow.rotated::after {
   transform: rotate(90deg);
}

.markdown .card {
   border-radius: 5px!important;
}

.markdown .card, .markdown .card-body .nav {
   background: #F4F4F4;
}

.markdown .accordion > .card .card-header {
   margin-bottom: 0;
}

.markdown .btn-link {
   color: initial;
   text-decoration: initial;
}

.markdown .card-body ul {
   margin-bottom: 0;
}

.markdown .card-body li {
   padding: .25em 0;
   border-bottom: 1px solid #D0D7DE;
}

.markdown .card-body li a {
   font-size: 0.85rem;
}

.markdown .card-header {
   padding: 16px 24px;

}

.markdown .card-header button {
   font-size: 1rem;
}

.markdown #author-section p, .markdown #author-section .author-socials {
   font-size: 0.9rem;
   line-height: 25px;
}

.markdown #author-section h4 {
   font-size: 1.2rem;
}

/* case studies */

.case-studies h1, .case-studies h2, .case-studies h3, .case-studies h4, .case-studies p {
    line-height: 1.75;
}

.case-studies h1 {
    font-size: 2rem;
    padding: 0.5em 0;
}

.case-studies h2 {
    font-size: 1.3rem;
    font-weight: bold;
    padding-left: 0.5em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;

    margin-left: 0.5rem;
    margin-top: 3em;
    border-left: 5px solid black;
}

.case-studies h3 {
    margin: 1em 0;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 1rem;
    font-weight: 600;
}

.case-studies h3::before {
    display: inline-block;
    margin-right: 8px;
    content: '—';
    font-weight: 200;
}

.case-studies h4 {
    padding-top: 1em;
    font-weight: 600;
}

.case-studies p {
    font-size: 1rem;
}

.case-studies .interview-person p {
    font-size: 0.9rem;
}

.case-studies .interview-person img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.case-studies a {
    color: #3083D7;
    font-size: 1rem;
    font-weight: 700;
}

.case-studies .cta a {
    color: white;
    font-weight: 400;
}

/* founder story */

.founder-story h1 {
    font-size: 2rem;
    padding: 0.5em 0;
}

.founder-story h2 {
    font-size: 1.2rem;
    padding-top: 1.5em;
}

.founder-story p {
    font-size: 1rem;
}

/* footer */

.footer-social {
    color: white;
}

.footer-social:hover {
    color: white;
}

#footerNav p {
    font-size: .9rem;
}

#footerNav h5 {
    font-size: 1rem;
    color: #f6f6f6;
    font-weight: 800;
}

#footerNav ul li {
    padding-bottom: 0.5em;
}

#footerNav ul li a {
    font-size: 0.9rem;
    color: white;
}

#footerNav ul li a:hover{
    color: white;
    text-decoration: underline;
}

/* card */
.card-text {
    font-size: 0.9rem;
}

h5.card-title {
    font-size: 1rem;
    font-weight: 700;
}
/* animations for sliding */

.hideFadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: none;
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

    50%{
        opacity: 0.1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.showFadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.no-z{
    z-index: 0;
}

.slider-animation-container {
    width: 100%;
    height: 5px;
    background-color: grey;
}

.slider-animation-bar {
    width: 0;
    height: 5px;
    background-color: #1976d2;
}

.slider-animation-bar {
    transition: width 5s linear;
}


/* new landing page */

#recursion h1 {
    font-size: 54px;
}

#recursion h2 {
    font-size: 40px;
    font-weight: 600;
}

#recursion h3 {
    font-weight: 600;
    font-size: 30px
}

#recursion p {
    font-size: 20px;
    margin: 0;
}

#recursion .font-12 {
    font-size: 12px;
}

#recursion .font-15 {
    font-size: 15px;
}

#recursion .font-18 {
    font-size: 18px;
}

#recursion .font-25 {
    font-size: 25px;
}

#recursion .font-40 {
    font-size: 40px;
}

#recursion .feature-number {
    font-size: 70px;
    color:#a2d0ff;
    font-weight: 800
}

#recursion .carrier-category {
    font-size: 20px;
    color: #858898;
}

#recursion .next-carrier .carrier-category {
    color: white;
}

#recursion .carrier-value {
    font-size: 25px;
    font-weight: 500;
}

#recursion .custom-hr {
    height: 2px;
    background-color:#e1e5f3;
    border: none;
}

#recursion .custom-border {
    border-radius: 30px;
}

#recursion .full-height-container {
    max-width: 1200px;
    margin: auto;
}

#recursion .slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#recursion .slider {
    display: flex;
    transition: transform 0.1s ease;
}

#recursion .slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

#recursion .testimonial {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

#recursion .slider-btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 30px;
    border: none;
    background-color: #ffffff;
    color: #0066d3;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#recursion .slide-number {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 15px;
}

#recursion .image-container {
    overflow-x: scroll;
    white-space: nowrap;
}

#recursion .enlarge-image {
    width: 50%;
}

#recursion .company-logo-container img {
    height: 35px;
}

.company-logo-container {
    padding: 1rem;
}

@media (max-width: 576px) {
    .company-logo-container {
        padding: 0.5rem;
    }

    #recursion .company-logo-container img {
        height: 25px;
    }

    #recursion h1 {
        font-size: 40px;
    }

    #recursion h2 {
        font-size: 25px;
        font-weight: 600;
        line-height: 1.5;
    }

    #recursion h3 {
        font-weight: 600;
        font-size: 22px
    }

    #recursion p {
        font-size: 18px;
        margin: 0;
    }

    #recursion .font-12 {
        font-size: 12px;
    }

    #recursion .font-15 {
        font-size: 16px;
    }

    #recursion .font-40 {
        font-size: 25px;
    }

    #recursion .font-25 {
        font-size: 18px;
    }

    #recursion .carrier-value {
        font-size: 18px;
        font-weight: 500;
    }

    #recursion li {
        font-size: 18px;
    }
}

@media (max-width: 767.98px) {
    #recursion .enlarge-image {
        width: 150%;
    }
}

@media (min-width: 1024px) {
    #recursion .full-height-container {
        height: 100vh;
        max-height: 1200px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}

@media (min-width: 1024px) and (max-height: 1200px) {
    #recursion .full-height-container {
        padding-top: 75px;
        padding-bottom: 75px;
    }
}

@media (max-width: 768px) {
    #recursion .full-height-container {
        padding-top: 35px;
        padding-bottom: 35px;
    }
}

#recursion .intern-header {
    background-color: #f7f9fc;
    border: 2px solid #4085E0;
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 1rem;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}

/* 比較表 */
#recursion .comparison {
    color: white;
    border-radius: 15px;
    max-width: 1200px;
}

/* 横スクロール wrapper*/
#recursion .tbl-wrap {
    width:100%;
    overflow-x:scroll;
}

/* テーブル */
#recursion table {
    width: 100%;
    table-layout: auto;
    min-width: 800px;
    border-collapse: collapse;
}

/* 枠線 */
#recursion thead {
    border-bottom: 2px #fff solid;
}

#recursion tr {
    border-bottom: 1px #fff solid;
}

#recursion tr:last-child {
    border-bottom: none;
}

/* レイアウト */
#recursion thead th{
    vertical-align: middle;
}

#recursion td,
#recursion th {
    vertical-align: middle;
    text-align:left;
    text-align: left;
    padding: 1rem;
}

#recursion th {
    text-wrap: nowrap;
}

/* 他スクールちょっと文字を小さく */
#recursion .text-xs {
    font-size: 0.9rem;
}

/* Recursionの背景 */
#recursion .recursion-bg-color {
    background-color: #e0f0ff;
    color: #2b3a55;
}

#recursion .recursion-top {
    border-radius: 15px 15px 0 0;
    position: relative;
}

#recursion .recursion-bottom {
    border-radius: 0 0 15px 15px;
    padding-bottom: 2rem;
}

/* バッジ */
#recursion .badge-image {
    position: absolute;
    top: -40px;
    right: 25px;
    z-index: 3;
}