@charset 'UTF-8';
/* 共通部分 */
/* スクロールバーの幅を調整 */
@font-face{
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2");
}
@font-face{
    font-family: "Reggae One";
    src: url("../fonts/ReggaeOne-Regular.woff2") format("woff2");
}
@font-face{
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-VariableFont_wght.woff2") format("woff2");
}
@font-face{
    font-family: "Dela Gothic One";
    src: url("../fonts/DelaGothicOne-Regular.woff2") format("woff2");
}
html {
    scrollbar-width: thin;
    scrollbar-color: yellow #104300;
}
html, body {
    margin: 0;
    padding: 0;
  }
.PR{
    margin-right: 30px;
    color: white;
    font-size: 20px;
}
body {
    color: #222;
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
p{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.block{
    display: block;
}
.flex {
    display: flex;
}
.inline{
    display: inline-block;
}
.float-right{
    float: right;
}
.flex-space-around {
    justify-content: space-around;
}
.align-center{
    align-items: center;
}
.text-center{
    text-align: center;
}
.content-center{
    justify-content: center;
}
.space-between{
    justify-content: space-between;
}
.text-hover{
    transition-duration: .4s;
}
.text-hover:hover{
    transform: scale(1.05);
    color: yellow;
}
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
.w100{
    width: 100%;
}
.w50{
    width: 50%;
}
h2{
    font-family: "Reggae One", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    justify-content: center;
    align-items: center;
}
h3{
    font-size: 35px;
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    font-style: normal;
}
.list-none{
    list-style: none;
}
/* コンテンツ */
.h2-span{
    border-radius: 20px;
    background-color: green;
    padding: 10px 20px;
    color: white;
}
.h2-img{
    width: 35px;
    height: 35px;
    object-fit: cover;
    filter: brightness(0) invert(1);
    margin: auto 1rem auto auto;
}
.h3-img{
    width: 35px;
    height: 35px;
    object-fit: cover;
    filter: brightness(0) invert(1);
    margin: auto 1rem auto 0;
}
.h2-span-span{
    color: yellow;
}
/* コンテンツチーム */
.tact-theme{
    background-color: black;
    border-radius: 10px;
}
.sort-tact{
    justify-content: center;
    font-family: "Reggae One", system-ui;
    font-weight: 600;
    font-style: normal;
}
.sort-tact span{
    padding: .3rem .8em;
    border-radius: 30px;
}
.sort-tact-img{
    width: 38px;
    object-fit: cover;
    margin-right: .3rem;
    filter: brightness(0);
}
.sort-tact{
    color: white;
    font-weight: 900;
    font-size: 23px;
    text-shadow: 2px 2px black;
    position: relative;
}
.attack-tact{
    background-color: rgb(255, 0, 0);
    box-shadow: 3px 3px 1px black;
}
.defence-tact{
    background-color: rgb(53, 221, 255);
    box-shadow: 3px 3px 1px black;
}
.tact-list{
    background-color: #f0ddddf9;
    padding: 10px 0;
    margin: 0 1rem 1rem 1rem;
    border-radius: 10px;
    box-shadow: 2px 2px 3px black;
    border: 2px solid black;
}
.tact-list ul{
    text-align: center;
    padding-left: 0;
}
.tact-list a{
    color: black;
    font-size: 20px;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-style: normal;
}
.tact-list h3{
    font-size: 25px;
}
.attack{
    color: rgb(255, 0, 0);
    text-shadow: 1px 1px white;
}
.defence{
    color: #00d5ff;
    text-shadow: 1px 1px white;
}
.extra{
    color: rgb(0, 194, 0);
    text-shadow: 1px 1px white;
}
.uniform{
    width: 38px;
    margin-right: .3rem;
}
.under-line{
    background-color: yellow;
}
.under-line2{
    background-color: rgba(255, 0, 255, 0.385);
}
.under-line3{
    background-color: rgba(255, 0, 0, 0.762);
}
.under-line4{
    background-color: rgb(0, 255, 0) ;
}
.under-line5{
    background-color: white;
}
.border-bottom{
    border-bottom: 3px solid black;
}
.heighlight{
    font-weight: 900;
}
.heighlight2{
    font-weight: 600;
}
/* ヘッダー */
header{
    margin-bottom: 60px;
}
.page-header {
    width: 100%;
    background-color: white;
}
.logo {
    object-fit: cover;
    width: 150px;
    height: 75px;
    filter: drop-shadow(3px 3px 3px #616161);
    position: absolute; /* 絶対位置で中央に配置 */
    left: 50%; /* 左端から 50% */
    transform: translateX(-50%); /* 中心に寄せる */
    top: 7.5px;
}
.header-top{
    background-color: black;
    justify-content: space-between;
    align-items: center; /* 垂直方向を中央揃え */
    position: relative;
    height: 90px;
}
.header-bottom {
    background-color: green;
}

/* ナビゲーション */
.main-nav {
    display: flex;
}
.main-nav li {
    font-size: 19px;
}
.main-nav-item {
    display: flex;
    gap: 1rem;
    padding: 7px 20px;
}
.main-nav-item img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}
@media (max-width: 767px){
     .header-bottom{
        display: none;
    }
    .input-hidden{
        display: none;
    }
        /* label */
    .hamburger-demo-switch{
        cursor: pointer;
        position: absolute;
        left: 3%;
        color: white;
        top: 10px;
        z-index: 9999;
        width: 4em; /* アイコン（クリック可能領域）の幅 */
        height: 4em; /* アイコン（クリック可能領域）の高さ */
    }
    /* メニュー展開時にハンバーガーアイコンを固定 */
    #hamburger-demo2:checked ~ .hamburger-demo-switch{
        position: fixed;
    }
    /* iOS風ハンバーガーアイコン */
    .hamburger-switch-ios:before{
        content: "";
        position: absolute;
        width: 4em;
        height: 2em;
        background: #c0c0c0;
        border-radius: 3em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
    }
    .hamburger-switch-ios:after{
        content: "";
        position: absolute;
        width: 2em;
        height: 2em;
        background: #fff;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -70%);
        transition: .3s;
    }
    .hamburger-demo-switch2:before{
        content: "MENU";
        position: absolute;
        bottom: 0;
        font-size: 12px;
        left: 50%;
        transform: translate(-50%, 10%);
        font-weight: 600;
    }
    #hamburger-demo2:checked ~ .hamburger-demo-switch2 .hamburger-switch-ios:before{
        background: #66c666;
    }
    #hamburger-demo2:checked ~ .hamburger-demo-switch2 .hamburger-switch-ios:after{
        transform: translate(0, -70%);
    }
    #hamburger-demo2:checked ~ .hamburger-demo-switch2:before{
        content: "CLOSE";
    }
    /* メニューエリア */
    .hamburger-demo-menuwrap{
        position: fixed;
        height: 100%;
        background: #fafafa;
        padding: 5em 3% 2em;
        z-index: 9998;
        transition: .3s;
        overflow-y: scroll; /*リスト内容が多い場合に縦スクロール */
        top: 0;
        left: 100%;
        width: 70%;
    }
    /* メニューリスト */
    .hamburger-demo-menulist{
        margin-right: 3%;
        padding-left: 5% !important; /* !important不要な場合もあり */
        list-style: none;
    }
    .hamburger-demo-menulist li a{
        text-decoration: none;
        color: #333;
        display: block;
        padding: .5em 0;
    }
    /* iOS風ボーダーメニューリスト化 */
    .hamburger-menulist-border li{
        border-bottom: 1px solid #ddd;
        position: relative;
    }
    .hamburger-menulist-border li a:before{
        content: "";
        width: .7em;
        height: .7em;
        border: 2px solid;
        border-color: #ccc #ccc transparent transparent;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate( -100%, -50%) rotate(45deg);
    }
    /* メニューエリア･アニメーション */
        /* 右から */
    #hamburger-demo2:checked ~ .hamburger-demo-menuwrap{
        left: 30%;
    }
        /* コンテンツカバー */
    #hamburger-demo2:checked ~ .hamburger-demo-cover{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9997;
        background: rgba(3,3,3,.5);
        display: block;
    }   
}
@media (min-width: 1024px){
    .hamburger-demo-menubox{
        display: none;
    }

}
/* フッター */
.page-footer{
    height: auto;
    margin-top: 300px;
}
.footer-container{
    background-color: green;
    display: flex;
    position: relative;
    height: 100px;
    justify-content: center;
}
.footer-logo{
    position: absolute;
    left: 10px;
    width: 150px;
    filter: drop-shadow(3px 3px 3px #616161);
    top: 8px;
}
.footer-items{
    justify-content: center;
    display: flex;
}
.footer-items a{
    color: white;
}
.footer-item{
    margin: 0 10px;
    font-size: small;
}
.copy-right{
    height: 50px;
    background-color: black;
}
.copy-right p{
    color: white;
}
.footer-logo{
    padding: 15px;
}
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background-color: #104300;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: palevioletred;
    border-radius: 10px;
}
.hover-center-wide{
    padding-bottom: 5px;
    position: relative;
}
.hover-center-wide::before{
    background: #000000;
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.hover-center-wide:hover::before{
    transform-origin: left top;
    transform: scale(1, 1);
}
.read-more{
    display:block; 
    position:relative;
    text-decoration:none;
}
.read-more::before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    background:#000;/*好みの色に変えてください。*/
    opacity:0;
    transition:0.3s;
}
.read-more::after{
    content:"記事を読む";/*好みの文章に変更してください。*/
    display:block;
    color:#fff;
    line-height:48px;
    width:180px;
    border:solid 1px #fff;
    border-radius:5px;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-1em;
    margin-left:-90px;
    opacity:0;
    z-index:3;
    transition:0.3s;
    font-weight:bold;
    letter-spacing:0.2em;
}
.read-more:hover::before{
    opacity:0.7;
}
.read-more:hover::after{
    opacity:1;
    margin-top:-0.5em;
}
.hover-big-black{
    transition: .3s;
}
.hover-big-black:hover{
    transform: scale(1.1);
}
.hover-big-black .h2-span:hover{
    background-color: black;
}
.hover-big-yellow{
    transition: .3s;
}
.hover-big-yellow:hover{
    transform: scale(1.1);
}
.hover-big-yellow span:hover{
    background-color: yellow;
    color: black;
    text-shadow: 2px 2px white;
}
.black{
    color: black;
}
.red{
    color: rgb(218, 16, 16);
}
.blue{
    color: rgb(50, 125, 255);
}
.green{
    color: green;
}
.PR-sc{
    display: flex;
}
.PR-width{
    margin-top: 50px;
}
.PR-side{
    margin: 1000px auto;
}
.PR-wide{
    margin: 30px;
}
.PR-high{
    margin: 50px auto;
}
.win-lose{
    padding: 5px;
    background-color: yellow;
    border: solid 2px black;
}
#pagetop {
    position: fixed;
    right: 20px;
    bottom: 50%;
    margin: 0;
    z-index: 999;
    
}
#pagetop a{
    position: relative;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    background:#0040ff;
    transition: opacity .6s ease;
    color: #EEEEEE;
    align-items: center;
    text-decoration: none;
    font-size: 50px;
    border-radius:15px
}
#pagetop a:hover {
    opacity: .3;
}
@media screen and (max-width:767px) {
    #pagetop a {
        width: 50px;
        height: 50px;
    }
}
body{
    background: repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.3) 26px,  rgba(0, 0, 0, 0.3) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.3) 52px,  rgba(0, 0, 0, 0.3) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.3) 78px,  rgba(0, 0, 0, 0.3) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.3) 104px,  rgba(0, 0, 0, 0.3) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.3) 130px,  rgba(0, 0, 0, 0.3) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.3) 26px,  rgba(0, 0, 0, 0.3) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.3) 52px,  rgba(0, 0, 0, 0.3) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.3) 78px,  rgba(0, 0, 0, 0.3) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.3) 104px,  rgba(0, 0, 0, 0.3) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.3) 130px,  rgba(0, 0, 0, 0.3) 130px);;
}