/* LOCOTIME Default CSS sp-d*/

/* icon font */
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css');

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    font-size: 62.5%;
    /* 1rem -> 10px */
    font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/* margin: padding */
.ltm-d {
    margin: 0 auto;
}

.ltmp-d {
    margin: 0 auto;
    padding: 10px;
}

.m0 {
    margin: 0px !important;
}

.m10 {
    margin: 10px !important;
}

.m20 {
    margin: 20px !important;
}

.m40 {
    margin: 40px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.pd0 {
    padding: 0px !important;
}

.pd10 {
    padding: 10px !important;
}

.pd20 {
    padding: 20px !important;
}

.pd40 {
    padding: 40px !important;
}

.pt0 {
    padding-top: 0px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pb0 {
    padding-bottom: 0px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pl0 {
    padding-left: 0px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pr0 {
    padding-right: 0px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr40 {
    padding-right: 40px !important;
}

/* font */
.lth1 {
    font-size: 1.4rem;
    line-height: 1.7rem;
    font-weight: bold;
    text-align: left;
}

.lth2 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: bold;
    text-align: left;
}

.lth3 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: normal;
    text-align: left;
}

.lth4 {
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-weight: normal;
    text-align: left;
}

.ltp {
    font-size: 0.9rem;
    line-height: 1.4rem;
    font-weight: normal;
    text-align: left;
}

/* a */
a {
    text-decoration: none;
}

a:hover {
    color: #a0d8ef;
}

/* hr */
hr {
    height: 0;
    margin: 15px 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #778899;
}

.min {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

.fs60 {
    font-size: 6rem !important;
    line-height: 6.2rem;
}

.fs42 {
    font-size: 4.2rem !important;
    line-height: 4.4rem;
}

.fs36 {
    font-size: 3.6rem !important;
    line-height: 3.8rem;
}

.fs24 {
    font-size: 2.4rem !important;
    line-height: 2.8rem;
}

.fs20 {
    font-size: 2rem !important;
    line-height: 2.4rem;
}

.fs18 {
    font-size: 1.8rem !important;
    line-height: 2.2rem;
}

.fs16 {
    font-size: 1.6rem !important;
    line-height: 2.2rem;
}

.fs14 {
    font-size: 1.4rem !important;
    line-height: 1.8rem;
}

.fs12 {
    font-size: 1.2rem !important;
    line-height: 1.6rem;
}

.fs10 {
    font-size: 1rem !important;
    line-height: 1.4rem;
}

.fs9 {
    font-size: 0.9rem !important;
    line-height: 1.4rem;
}

.fs8 {
    font-size: 0.8rem !important;
    line-height: 1.2rem;
}

.fs7 {
    font-size: 0.7rem !important;
    line-height: 1.2rem;
}

.ltmds01 {
    padding: 1rem 2rem;
    border-left: 6px solid #000;
}

.ltmds-l2w {
    padding: 10px 0 10px 15px;
    border-left: 2px solid #fff;
    margin-left: 15px;
}

/* font-color */
.fc-white {
    color: #fff !important;
}

.fc-black {
    color: #000 !important;
}

.fc-red {
    color: rgb(255, 0, 0) !important;
}

.fc-glay {
    color: #999 !important;
}

.fc-darkglay {
    color: #666 !important;
}

/* width */
.w100p {
    width: 100% !important;
}

.w90p {
    width: 90% !important;
}

.w80p {
    width: 80% !important;
}

.w70p {
    width: 70% !important;
}

.w60p {
    width: 60% !important;
}

.w50p {
    width: 50% !important;
}

.w40p {
    width: 40% !important;
}

.w30p {
    width: 30% !important;
}

.w20p {
    width: 20% !important;
}

.w10p {
    width: 10% !important;
}

.w1000 {
    width: 1000px !important;
}

.w900 {
    width: 900px !important;
}

.w800 {
    width: 800px !important;
}

.w700 {
    width: 700px !important;
}

.w600 {
    width: 600px !important;
}

.w500 {
    width: 500px !important;
}

.w400 {
    width: 400px !important;
}

.w300 {
    width: 300px !important;
}

.w200 {
    width: 200px !important;
}

.w100 {
    width: 100px !important;
}

/* width responsive*/
.w10100t {
    width: 100% !important;
}

.w20100t {
    width: 100% !important;
}

.w30100t {
    width: 100% !important;
}

.w40100t {
    width: 100% !important;
}

.w50100t {
    width: 100% !important;
}

.w60100t {
    width: 100% !important;
}

.w70100t {
    width: 100% !important;
}

.w80100t {
    width: 100% !important;
}

.w90100t {
    width: 100% !important;
}

.w10100d {
    width: 100% !important;
}

.w20100d {
    width: 100% !important;
}

.w30100d {
    width: 100% !important;
}

.w40100d {
    width: 100% !important;
}

.w50100d {
    width: 100% !important;
}

.w60100d {
    width: 100% !important;
}

.w70100d {
    width: 100% !important;
}

.w80100d {
    width: 100% !important;
}

.w90100d {
    width: 100% !important;
}

/* float */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clear {
    clear: both;
}

/* mobile hideen ctr */
.m-harea {
    display: none;
}

.m-darea {
    display: block;
}

/* css box design */
.b-d01 {
    margin: 0.9rem 0;
    padding: 1rem;
    background-color: #cfd8dc;
}

.b-d02 {
    margin: 0.9rem 0;
    padding: 1rem;
    background-color: #cfd8dc;
    border-radius: 10px;
}

.b-d03 {
    margin: 0.9rem 0;
    padding: 1rem;
    background-color: #cfd8dc;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
}

.b-d11 {
    margin: 0.9rem 0;
    padding: 1rem;
    position: relative;
    border: 1px solid #555;
}

.b-d11 div {
    position: absolute;
    top: -0.8rem;
    left: 1rem;
    font-weight: bold;
    font-size: 1rem;
    background: #fff;
    padding: 0 0.5rem;
}

.b-d11 p {
    margin: 0;
    padding: 0;
}

.b-d12 {
    margin: 1.8rem 0 0.9rem 0;
    background-color: #cfd8dc;
    border: 2px solid #555;
}

.b-d12 div {
    font-size: 1rem;
    position: absolute;
    margin: -42px 0 0 -12px;
    padding: 4px 6px;
    background-color: #262a2b;
    border-radius: 4px 4px 0 0;
    color: #fff;
    font-weight: bold;
}

.b-d12 p {
    margin: 0;
    padding: 0.9rem;
}

.b-d13 {
    margin: 1.8rem 0 0.9rem 0;
    background-color: #cfd8dc;
    border: 2px solid #555;
}

.b-d13 div {
    font-size: 1rem;
    position: absolute;
    margin: -12px 0 0 -12px;
    padding: 4px 6px;
    background-color: #262a2b;
    border-radius: 0 0 2px 0;
    color: #fff;
    font-weight: bold;
}

.b-d13 p {
    margin: 0;
    padding: 2.4rem 0.9rem 0.9rem;
}

/* flexbox */
.ltfb-wrap {
    margin: 0 auto;
    padding: 10px;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
}

.ltfb-wrap .ltfb01-area {
    margin: 5px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    flex: 1;
    min-width: 290px;
}

.ltfb-wrap .ltfb01-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ltfb-wrap .ltfb02-area {
    border: 0px solid aqua;
    margin: 5px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    flex: 1;
    min-width: 290px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.ltfb-wrap .ltfb02-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* flexbox card design*/
.ltfb-wrap .ltfb03-area {
    border: 0px solid aqua;
    margin: 5px;
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
    flex: 1;
    min-width: 290px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.ltfb-wrap .ltfb03-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);
    z-index: 0;
}

.ltfb-wrap .ltfb03-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ltfb-wrap .ltfb03-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
}

.ltfb-wrap .ltfb03-desc-wrap {
    position: absolute;
    bottom: 0rem;
    padding: 1rem;
    color: white;
    transition: background-color 1.5s ease;
}

.ltfb-wrap .ltfb03-t {
    transition: color 1s ease;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.ltfb-wrap .ltfb03-c-wrap {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
}

.ltfb-wrap .ltfb03-c {
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

.ltfb-wrap .ltfb03-btn {
    background: #000;
    color: #bbb;
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
    border: 1px solid #444;
    font-size: 0.8rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
    width: 7rem;
    margin-left: auto;
    position: relative;
    z-index: 5;
}

.ltfb-wrap .ltfb03-btn:hover {
    background: #fd827c;
    color: #fff;
}

.ltfb-wrap .ltfb03-area:hover .ltfb03-c-wrap {
    max-height: 20rem;
    opacity: 1;
}

.ltfb-wrap .ltfb03-area:hover .ltfb03-desc-wrap {
    background-color: rgba(0, 0, 0, 0.6);
}

.ltfb-wrap .ltfb03-area:hover .ltfb03-t {
    color: #fd827c;
}

.ltfb-wrap .ltfb03-area:hover .ltfb03-img {
    transform: scale(1.2);
    z-index: -1;
}

.ltfb-wrap .ltfb04-area {
    margin: 5px;
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
    flex: 1;
    min-width: 290px;
}

.ltfb-wrap .ltfb04-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.ltfb-wrap .ltfb04-area .cf-content {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    transition: transform 1s;
    transform-style: preserve-3d;
}

.ltfb-wrap .ltfb04-area:hover .cf-content {
    transform: rotateY(180deg);
    transition: transform 0.5s;
}

.ltfb-wrap .ltfb04-area .cf-content .c-fr,
#ltfb-wrap .ltfb04-area .cf-content .c-ba {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(0deg);
    transition: transform 0.5s;
}

.ltfb-wrap .ltfb04-area .cf-content .c-ba {
    transform: rotateY(180deg);
}

.ltfb-wrap .ltfb05-area {
    margin: 5px;
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: 5px;
    flex: 1;
    min-width: 290px;
    background-color: #262a2b;
}

.ltfb-wrap .ltfb05-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

.ltfb-wrap ul {
    list-style: none;
}

.ltfb-wrap .ltfb05-t {
    position: relative;
    padding: 20px 25px 5px;
    margin-top: 10px;
}

.ltfb-wrap .ltfb05-t:before {
    content: "";
    position: absolute;
    left: 85%;
    top: 0;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    background-color: #262a2b;
    border-radius: 50%;
    -webkit-transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1), opacity 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.ltfb-wrap .ltfb05-d {
    padding: 5px 25px 20px;
}

.ltfb-wrap .ltfb05-d a {
    text-decoration: none;
    color: #fff;
}

.ltfb-wrap .ltfb05-d a:hover {
    color: #fd827c;
}

/* flexbox column design*/
.ltfbc-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.ltfbc-wrap .ltfb2c-area {
    width: 50%;
    padding: 5px;
}

.ltfbc-wrap .ltfb3c-area {
    width: 33%;
    padding: 5px;
}

.ltfbc-wrap .ltfb4c-area {
    width: 25%;
    padding: 5px;
}

/* multi column design*/
.col2-wrap {
    width: 100%;
    column-count: 2;
}

.col3-wrap {
    width: 100%;
    column-count: 3;
}

.col4-wrap {
    width: 100%;
    column-count: 4;
}

/* sticky design*/
#lt-fix-wrap {
    position: relative;
    display: block;
    background-color: #262a2b;
}

#lt-fix-fixed-area {
    position: relative !important;
    width: 100%;
    height: 60px;
    top: 0;
}

#lt-fix-container {
    width: 100%;
    background-color: #fff;
}

#lt-fix-fixed-area .logo-area {
    height: 40px;
}

#lt-fix-fixed-area .logo-area .t-logoimg {
    width: auto;
    height: 33px;
    padding: 4px 3px 3px 3px;
    margin-left: 3%;
}





/* mobile first (lmobile,portrait) */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    /* width responsive*/
    .w10100t {
        width: 10% !important;
    }

    .w20100t {
        width: 20% !important;
    }

    .w30100t {
        width: 30% !important;
    }

    .w40100t {
        width: 40% !important;
    }

    .w50100t {
        width: 50% !important;
    }

    .w60100t {
        width: 60% !important;
    }

    .w70100t {
        width: 70% !important;
    }

    .w80100t {
        width: 80% !important;
    }

    .w90100t {
        width: 90% !important;
    }



}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* width responsive*/
    .w10100d {
        width: 10% !important;
    }

    .w20100d {
        width: 20% !important;
    }

    .w30100d {
        width: 30% !important;
    }

    .w40100d {
        width: 40% !important;
    }

    .w50100d {
        width: 50% !important;
    }

    .w60100d {
        width: 60% !important;
    }

    .w70100d {
        width: 70% !important;
    }

    .w80100d {
        width: 80% !important;
    }

    .w90100d {
        width: 90% !important;
    }

    /* font */
    .lth1 {
        font-size: 1.8rem;
        line-height: 2rem;
        font-weight: bold;
        text-align: left;
    }

    .lth2 {
        font-size: 1.4rem;
        line-height: 1.7rem;
        font-weight: bold;
        text-align: left;
    }

    .lth3 {
        font-size: 1.2rem;
        line-height: 1.5rem;
        font-weight: normal;
        text-align: left;
    }

    .lth4 {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: normal;
        text-align: left;
    }

    .ltp {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: normal;
        text-align: left;
    }

    /* mobile hideen ctr */
    .m-harea {
        display: block;
    }

    .m-darea {
        display: none;
    }

    /* sticky design*/
    #lt-fix-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    #lt-fix-fixed-area {
        position: -webkit-sticky;
        position: sticky !important;
        width: 20%;
        height: 100vh;
    }

    #lt-fix-container {
        width: 80%;
    }

    #lt-fix-fixed-area .logo-area {
        height: auto;
    }

    #lt-fix-fixed-area .logo-area .t-logoimg {
        width: 85%;
        height: auto;
        margin: 30px auto 0;
        padding: 5px;
    }

}



/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /* sticky design*/
    #lt-fix-fixed-area {
        width: 15%;
    }

    #lt-fix-container {
        width: 85%;
    }

}