/* 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;}

.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-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%;}  
  
  
}