/*  index
-------------------------------------------------
    - Import
    - text
    - df-width
    - layout
-------------------------------------------------*/

/*-----------------------------------------------
     Import
-----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,800;1,100;1,300;1,400;1,500;1,800&display=swap');  

/*-----------------------------------------------
    page  content  
-----------------------------------------------*/

h1 {color: #1e212b;font-size: 2.4rem;  font-weight: 500;line-height: 1.3;margin: 2% 0 10% 0;letter-spacing: -0.05rem;}
h2 {color: rgb(163, 0, 0);font-size: 2rem;font-weight: 500;line-height: 2;margin: 3% 0 2% 0;letter-spacing: -0.05rem;border-bottom:1px solid  rgb(163, 0, 0);;}
h3 {color: rgb(249, 90, 4);font-size: 1.2rem;font-weight: 500;line-height: 2;margin: 0% 0 0% 0;letter-spacing: -0.05rem;}

p {font-weight: 400;}
hr {border-top: 1px solid #000000;}

.content ,.content div,
.content p {color: #202020;margin-top: 0;margin-bottom: 0;line-height: 2;letter-spacing: 0;word-wrap: break-word;word-break: break-all;font-size: 1.05rem;text-align:left;}
.content img{margin:2% auto 5%; border: 1px solid #000000;}

@media screen and (max-width:768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; line-height: 1.3;margin: 3% 0 2% 0;}
h3 { font-size: 1.1rem; }
}

/*-----------------------------------------------
    page  a
-----------------------------------------------*/
.content a,
.content div a { padding: 0 0px 0 22px;background: url(https://media.game-tree.com/tenchigou/home/news/img/icon-next.png) 0 7px / 17px no-repeat;color: rgb(163, 0, 0);margin: 3% 3% 1% 0;
                display: inline-block;height: 30px;line-height: 30px;transition: all .3s ease;letter-spacing: 0.05rem;position: relative;width: auto;}
.content a:after,
.content div a:after { content: '';width: 95%;height: 1px;position: absolute;bottom: 0;left: 20px;background:  rgb(163, 0, 0);}

.content .back-news a {display: block;width: 100%;height: 100%;border-radius: 25px;background:rgb(163, 0, 0);color: #fff;margin:3% 0 10% 0;
    text-align: center;line-height: 30px;font-size: 1rem;letter-spacing: 0.05rem;padding: 0 10px;max-width: 120px}
.content .back-news a:after,.content div.back-news a:after {content: '';background: transparent;}



/*-----------------------------------------------
    df-width
-----------------------------------------------*/
.df-width {height: 100%;max-width: 1700px;overflow: hidden;}

/*  layout
-------------------------------------------------
    - html,body
    - main
    - header
    - section
    - footer
-------------------------------------------------*/

html,body {}

/*prelodd*/
body::before {position: fixed;top: 0;left: 0;z-index: 0;opacity: 0;width: 1;height: 1px;content: '';}

.bg {position: fixed;width: 100%;height: 100vh;z-index: 0;top: 0;left: 0;margin: auto; 
    background: url(https://media.game-tree.com/tenchigou/home/news/img/news.jpg) center 0 /cover no-repeat;background-attachment: fixed;pointer-events: none;}

@media screen and (max-width:768px) {
    .bg {background: #ffffff url(https://media.game-tree.com/tenchigou/home/news/img/news-m.jpg) center 50px / 100% no-repeat;position: absolute;}
}


/*-----------------------------------------------
    main
-----------------------------------------------*/
main {overflow-x: hidden;margin: auto;width: 100%; height: auto;animation: into2 .8s ease-out 0s 1 both;}

@-webkit-keyframes into2 {
    0% { opacity: 0;}
    100% {opacity: 1;}
}

.wrap-box {top: 0%;right: 0;left: 0;margin: 0 auto 0;padding: 0;z-index: 6;width: 100%;height: auto;max-width: 1700px;}
.cp {width: 100%; margin: 5% 0 6% 0;max-width: 660px;}
.news-m {display: none;}

@media screen and (max-width:1800px){
.wrap-box {width: 90%;}
}

@media screen and (max-width:768px) {
main {overflow: hidden;margin: auto;animation: blur .8s ease-out 0s 1 both;
      background: #ffffff;width: 100%;height: auto;min-height: 100vh;}
}


/*-----------------------------------------------
   go-more
-----------------------------------------------*/
.go-more {color: #000000;max-width: 270px;height: 50px;position: relative;width: 25%;margin: 10px 0 0 84%;display: none;}
.go-more.show{display: block;}
.go-more a {color: #000000;display: block;width: 100%;height: 100%;height: 42px;line-height: 42px;padding: 0 0 0 70px;
            letter-spacing: 0.1rem;font-size: 0.8rem;}

@media screen and (max-width:768px) {
.go-more {max-width: 360px;height: 42px;position: relative;width: 42%;margin: 15px 0 0 60%;}
}


/*-----------------------------------------------
    point
-----------------------------------------------*/
.go-more .point {position: absolute;width: 5px;height: 5px;background: #000000;top: 40%;left: -8%;z-index: 10;}
.go-more .point:before {content: '';position: absolute;top: -2px;left: -2px;width: 9px;height: 9px;border: #000000 solid 1px;z-index: 10;}
.go-more .point:after {content: '';position: absolute;top: 2px;left: 12px;width: 0px;height: 1px;background: #000000;z-index: 10;animation: point_ 5s ease-out .5s infinite both;}

@keyframes point_ {
    0% {width: 0;}
    15%,
    100% {width: 60px;}
}


/*-----------------------------------------------
    news
-----------------------------------------------*/
.news-group {width: 50%;max-width: 850px;position: relative;margin: 5% 0 0 1%;z-index: 10; padding: 0 0 2% 0;}
.sl-news{margin:-10% 0 -9% -4%;width: 100%;max-width: 700px;}


@media screen and (max-width:1800px){
.news-group {width: 60%; max-width:780px;margin-top: 1%;}
}
@media screen and (max-width:1480px){
.sl-news{width: 60%;margin-bottom:-12%;margin-top: -5%;}
.news-group {width: 50%;max-width:750px;}
}

@media screen and (max-width:1280px){
.news-group {margin-left: 0.2%;margin-top: 3%;}
}

@media screen and (max-width:768px){
.news-group {width: 95%;top: initial;left: initial; transform: scale(1);margin: 130% auto 5%;padding: 0;}
.sl-news{margin: 50% 0 -15% 5%;width: 90%;max-width: 700px;}
}
/*-----------------------------------------------
    news tag
-----------------------------------------------*/
.news-group .news-tag {width: 100%;height: 70px;margin: 10% 0 2% 0;}

.news-group .news-tag ul {display: flex;height: 100%;width: 100%;margin: 0px 0 0 -0.03rem;}
.news-group .news-tag ul li {color: #fff;margin: 10px 30px 0 0;width: 17%;height: 100%;text-indent: -100%;overflow: hidden;cursor: pointer;}

.news-group .news-tag ul li.tag01 {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag01.png) 0 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag02 {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag02.png) 33.2% 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag03 {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag03.png) 67% 100% / 400% no-repeat;}


.news-group .news-tag ul li.tag01:hover{background: url(https://media.game-tree.com/tenchigou/home/news/img/tag01-h.png) 0 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag02:hover {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag02-h.png) 33.2% 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag03:hover { background: url(https://media.game-tree.com/tenchigou/home/news/img/tag03-h.png) 67% 100% / 400% no-repeat;}


.news-group .news-tag ul li.tag01.active {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag01-h.png) 0 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag02.active {background: url(https://media.game-tree.com/tenchigou/home/news/img/tag02-h.png) 33.2% 100% / 400% no-repeat;}
.news-group .news-tag ul li.tag03.active { background: url(https://media.game-tree.com/tenchigou/home/news/img/tag03-h.png) 67% 100% / 400% no-repeat;}



@media screen and (max-width:768px) {
.news-group .news-tag ul {display: flex;height: 100%;width: 150%;margin: 0px 0 0 0;}

}



/*-----------------------------------------------
    news list page
-----------------------------------------------*/
.news-page { margin-top: 12%;}

@media screen and (max-width:768px) {
.news-page { margin-top: 18%;}
}

/*-----------------------------------------------
    news list
-----------------------------------------------*/
.news-list {}
.news-list ul li a {color: #080808; font-size: 1.05rem;height: 50px;line-height: 50px;overflow: hidden;white-space: nowrap;
                    text-overflow: ellipsis;padding: 0 2% 0 0;letter-spacing: 0.05rem;position: relative;z-index: 1;border-bottom: 1px solid #33333349;}

.news-list ul li a span {letter-spacing: 0.1rem;margin: 0;}
.news-list ul li a span.news-class {color: #8b0000;font-size: 1.2rem;font-weight: bolder; margin: 0 0% 0 0;letter-spacing: -0.1rem;width: 12%;display: inline-block;}
.news-list ul li a span.news-class:before {content: '▎';color: #8b0000;font-size: 1.2rem;margin: 0 -5px 0 10px;}
.news-list ul li span.news-year {font-family: "Gabarito", sans-serif;font-weight: 600;transform: rotate(90deg) translate3d(4%, 0, 0);position: absolute;font-size: 0.6rem;width: 3%;}
.news-list ul li span.news-day {font-family: "Gabarito", sans-serif;font-weight: 800;letter-spacing: -0.01rem;font-size: 1.5rem;left: 15%;display: inline-block;width: 8%;margin: 0 0 0 3%;}


.red-bar {position: absolute;z-index: 0;left: 0;height: 100%;background: rgb(50, 89, 140);top: 0;}

@-webkit-keyframes scale-up-hor-left {
    0% {width: 0; transform: scale(2);}
    100% {width: 100%;transform: scale(1);}
}


/*active*/
.news-list ul li.active a {background: rgb(50, 89, 140);color: #fff;}
.news-list ul li.active a span.news-class {color: #fff;}
.news-list ul li.active a span.news-class:before {content: '▎';color: #fff;font-size: 1.2rem;margin: 0 -5px 0 10px;}
.news-list ul li.active a span.news-day {color: #000;}
.news-list ul li.active a span.news-year {color: #000;}

.news-list ul li:hover .red-bar {position: absolute;z-index: 0;left: 0;top: 0;-webkit-animation: scale-up-hor-left .5s cubic-bezier(.250, .460, .450, .940) 0s both;}
.news-list ul li:hover a {color: #fff;}
.news-list ul li:hover a span.news-class {color: #fff;}
.news-list ul li:hover a span.news-class:before {content: '▎';color: #fff;font-size: 1.2rem;margin: 0 -5px 0 10px;}
.news-list ul li:hover a span.news-day {color: #000;}
.news-list ul li:hover a span.news-year {color: #000;}



@media screen and (max-width:1440px){
.news-list ul li a span.news-class {font-size: 1rem;margin: 0 0% 0 0;width: 12%;display: inline-block;}
.news-list ul li a span.news-class:before {content: '▎'; color: #b40000;font-size: 0.9rem;margin: 0 -5px 0 0px;}
.news-list ul li a {font-size: 1rem;height: 43px;line-height: 43px;}
.news-list ul li span.news-day {font-size: 1.3rem; width: 15%;}
.news-list ul li span.news-year {font-size: 0.55rem;}

.news-list ul li.active a span.news-class:before,
.news-list ul li:hover a span.news-class:before
 {content: '▎';font-size: 0.9rem;margin: 0 -5px 0 5px;}

}


@media screen and (max-width:768px) {
.news-list ul li a span.news-class {width: 20%;}
.news-list ul li span.news-year {width: 2%;transform: rotate(90deg) translate3d(-56%, 0, 0);}
.news-list ul li span.news-day {font-size: 1.2rem; width: 18%;}
.news-list ul li.active a span.news-class:before { content: '▎';color: #fff;font-size: 0.9rem;margin: 0 -5px 0 3px;}
.news-list ul li a {font-size: 1rem;height: 42px;line-height: 42px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    padding: 0 2% 0 0;letter-spacing: 0rem;position: relative;z-index: 1;}

}