@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:999px){

/*STYLE*/
.pc {
display:none;
}

.cts {
width:90%;
}

.top_titles {
}

.top_titles h2 {
font-size:350%;
font-weight:bold;
line-height:100%;
color:rgba(22,131,197,0.9);
margin-bottom:5px;
}

.top_titles .kana {
}

.top_titles .kana p {
font-size:100%;
font-weight:bold;
line-height:100%;
padding:5px 7px;
border:#1683c5 1px solid;
color:#1683c5;
display:inline-block;
}

.more_btn {
}

.more_btn .btn {
    display:inline-block;
}

.more_btn .btn a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:#1683c5 1px solid;
    padding:12px 20px;
}

.more_btn .btn a .en {
    font-size:90%;
    line-height:100%;
    color:#1683c5;
}

.more_btn .btn a .arrow {
    width:8px;
    height:8px;
    border-top:#1683c5 1px solid;
    border-right:#1683c5 1px solid;
    transform:rotate(45deg);
    margin-left:10px;
}

.back_btn {
    text-align:center;
    margin-top:30px;
}

.back_btn .btn {
    display:inline-block;
}

.back_btn .btn a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:#1683c5 1px solid;
    padding:12px 20px;
}

.back_btn .btn a .en {
    font-size:90%;
    line-height:100%;
    color:#1683c5;
}

.back_btn .btn a .arrow {
    width:8px;
    height:8px;
    border-bottom:#1683c5 1px solid;
    border-left:#1683c5 1px solid;
    transform:rotate(45deg);
    margin-right:10px;
}



/*HEADER*/
header {
    width:100%;
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    background:rgba(0,0,0,0.95);
}

header h1 {
    width:150px;
    margin-left:20px;
}



/*-----MV-----*/
#mv {
    width:100%;
    overflow:hidden;
    margin-top:70px;
    position:relative;
    background:#222;
}

#mv .movie {
}

#mv video{
    width:100%;
    height:auto;
    vertical-align:bottom;
}

#mv .sound {
    width:45px;
    position:absolute;
    right:0;
    bottom:0;
    z-index:900;
    cursor:pointer;
}



/*-----TOPICS-----*/
#top_topics {
    background:url(../img/bg.jpg) center;
}

#top_topics .cts {
    width:90%;
    padding:50px 0;
    position:relative;
}

#top_topics .title_area {
    width:100%;
    padding-bottom:30px;
}

#top_topics .title_area .topics_titles {
    text-align:center;
}

#top_topics .title_area .topics_titles .symbol {
    width:25px;
    margin:0 auto 5px;
}

#top_topics .title_area .topics_titles h2 {
    font-size:350%;
    font-weight:600;
    line-height:100%;
    color:#1683c5;
    margin-bottom:5px;
}

#top_topics .title_area .topics_titles .kana {
    font-weight:700;
    line-height:100%;
    color:#1683c5;
}

#top_topics .topics {
    width:100%;
    margin-bottom:25px;
}

#top_topics .topics .topic {
    width:100%;
    display:block;
    margin-bottom:15px;
    background:#000;
}

#top_topics .topics .topic:last-child {
    margin-bottom:0;
}

#top_topics .topics .topic a {
    width:100%;
    background:#001e32;
    padding:15px 20px;
    display:block;
}

#top_topics .topics .topic a .date_cate {
    display:flex;
    align-items:center;
    margin-bottom:3px;
}

#top_topics .topics .topic a .date_cate .date {
    margin-right:10px;
}

#top_topics .topics .topic a .date_cate .cate {
    font-size:80%;
    line-height:100%;
    padding:3px 5px;
    border:#fff 1px solid;
    display:inline-block;
}

#top_topics .more_btn {
    width:100%;
    left:0;
    bottom:70px;
    text-align:center;
}



/*-----TOP COMPAMY-----*/
#top_company {
    padding:150px 0 50px;
}

#top_company .main {
    width:100%;
    height:60vw;
    background:url(../img/company_main.jpg) center;
    background-size:cover;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}

#top_company .top_titles {
    position:absolute;
    top:-110px;
    left:0;
    right:0;
    text-align:center;
}

#top_company .main .copy {
    display:flex;
    justify-content:center;
    align-items:center;
}

#top_company .main .copy p {
    font-size:100%;
    font-weight:600;
    line-height:100%;
    color:#000;
    background:#fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding:8px 8px 8px 5px;
}

#top_company .main .copy p:first-letter {
    color:#008cd6;
}

#top_company .cts {
}

#top_company .details {
    position:relative;
}

#top_company .details .photo {
    width:40%;
    margin:0 auto 20px;
    position:absolute;
    top:0;
    left:0;
}

#top_company .details .detail {
    width:100%;
}

#top_company .details .detail h3 {
    font-size:150%;
    font-weight:bold;
    line-height:150%;
    padding:20px 0 30px 45%;
}

#top_company .details .detail .tx {
    line-height:170%;
    letter-spacing:0.5px;
    color:#fff;
    margin-bottom:20px;
}

#top_company .details .detail .more_btn {
    text-align:center;
}




/*-----TOP WORKS-----*/
#top_works {
    padding:0 0 70px;
}

#top_works .main {
    position:relative;
    margin-bottom:50px;
}

#top_works .main .works_slider {
    width:100%;
    overflow:hidden;
}

#top_works .swiper-slide:nth-child(odd) {
    width:320px;
}

#top_works .swiper-slide:nth-child(even) {
    width:180px;
}

#top_works .main .top_titles {
    position:absolute;
    left:15px;
    bottom:-30px;
    z-index:1000;
    display:flex;
    align-items:flex-end;
}

#top_works .main .top_titles h2 {
    margin-right:20px;
}

#top_works .main .top_titles .kana {
    margin-bottom:15px;
}

#top_works .details {
    width:100%;
}

#top_works .details .detail h3 {
    font-size:150%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:20px;
}

#top_works .details .detail .tx {
    line-height:170%;
    letter-spacing:0.5px;
    color:#fff;
    margin-bottom:20px;
}

#top_works .details .detail .more_btn {
    text-align:center;
}




/*-----TOP RECRUIT-----*/
#top_recruit {
    padding-bottom:100px;
}

#top_recruit .main {
    position:relative;
    margin-bottom:50px;
}

#top_recruit .main .backgrounds {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:15px;
}

#top_recruit .main .backgrounds .background {
    width:25%;
}

#top_recruit .main .backgrounds .background:nth-child(n+9) {
    display:none;
}

#top_recruit .main .photo {
    width:55%;
    position:absolute;
    left:3%;
    bottom:-10px;
}

#top_recruit .main .top_titles {
    text-align:right;
    position:relative;
    z-index:1;
}

#top_recruit .main .top_titles h2 {
    margin-right:20px;
}

#top_recruit .main .top_titles .kana {
    margin-right:20px;
}

#top_recruit .details {
    width:90%;
    margin:auto;
}

#top_recruit .details h3 {
    width:100%;
    font-size:150%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:20px;
    padding-bottom:10px;
}

#top_recruit .details .detail {
    width:100%;
}

#top_recruit .details .detail .tx {
    line-height:170%;
    letter-spacing:0.5px;
    color:#fff;
    margin-bottom:20px;
}

#top_recruit .details .detail .more_btn {
    text-align:center;
}




/*-----TOP PLAYER-----*/
#top_player {
    padding:120px 0 150px;
}

#top_player .main {
    width:100%;
    padding:25px;
    background:url(../img/player_bg.jpg) center;
    background-size:cover;
    position:relative;
    margin-bottom:50px;
    display:flex;
    align-items:center;
}

#top_player .main .photo {
    width:40%;
    position:absolute;
    right:2%;
}

#top_player .main .typo {
    font-size:250%;
    font-weight:bold;
    line-height:100%;
    text-align:right;
    position:absolute;
    right:20px;
    bottom:-20px;
}

#top_player .main .top_titles {
    position:absolute;
    left:15px;
    top:-110px;
    z-index:1000;
}

#top_player .main .top_titles h2 {
}

#top_player .main .top_titles .kana {
    margin-left:10px;
}

#top_player .main .profile {
    width:70%;
    background:rgba(0,0,0,0.8);
    padding:20px 20px;
    margin:0 auto 0 0;
}

#top_player .main .profile .names {
    margin-bottom:10px;
}

#top_player .main .profile .names .position {
    font-size:70%;
}

#top_player .main .profile .names .name {
    font-size:200%;
    font-weight:500;
}

#top_player .main .profile .tx {
    color:#fff;
    margin-bottom:15px;
}

#top_player .main .profile .more_btn {
    text-align:left;
}




/*-----TOP CONTACT-----*/
#top_contact {
    padding:0;
}

#top_contact .main {
    width:100%;
    background:url(../img/contact_bg.jpg) center;
    background-size:cover;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 30px;
}

#top_contact .top_titles {
    position:absolute;
    top:-75px;
    left:0;
    right:0;
    text-align:center;
}

#top_contact .main .detail {
    text-align:center;
}

#top_contact .main .detail h3 {
    font-size:150%;
    font-weight:bold;
    line-height:135%;
    padding-bottom:20px;
}

#top_contact .main .detail .tx {
    font-size:90%;
    text-align:left;
    margin-bottom:20px;
}

#top_contact .main .detail .tel {
    font-size:250%;
    font-weight:600;
    line-height:135%;
    color:#008cd6;
}

#top_contact .main .detail .time {
    font-size:80%;
    color:#fff;
}

#top_contact .main .detail .more_btn {
    margin-top:30px;
}




/*-----PAGES-----*/
.under {
    margin-top:70px;
    background:url(../img/bg.jpg) center;
    background-size:70%;
    padding-bottom:70px;
}

.pagetitles {
    width:100%;
    height:55vw;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    position:relative;
    padding-bottom:20px;
    margin-bottom:50px;
}

.pagetitles h2 {
    font-size:350%;
    font-weight:600;
    line-height:100%;
    margin-bottom:7px;
    color:#008cd6;
    position:relative;
}

.pagetitles .pagetitle {
    font-size:100%;
    font-weight:500;
    line-height:100%;
    padding:7px 8px;
    border:#008cd6 1px solid;
    color:#008cd6;
    position:relative;
}

.pagetitles .mask {
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    position:absolute;
    top:0;
    left:0;
}

.bread {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    background:linear-gradient(to left,rgba(0,0,0,0.5),rgba(0,0,0,0));
}

.bread p {
    width:90%;
    margin:auto;
    padding:10px 0;
    text-align:right;
    font-size:60%;
}

.bread p, .bread a {
    color:#969696;
}

.corner_title {
    position:relative;
}

.corner_title h3 {
    font-size:400%;
    font-weight:600;
    line-height:100%;
    color:rgba(0,140,214,0.2);
    position:relative;
}

.corner_title .kana {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    color:#008cd6;
    position:absolute;
    bottom:-10px;
}

.under h4 {
    border-left:#008cd6 4px solid;
    color:#008cd6;
    font-weight:600;
    padding:3px 0 3px 10px;
    margin-bottom:10px;
}



/*-----TOPICS-----*/
#topics {
}

#topics .pagetitles {
    background:url(../topics/img/title.jpg) center;
    background-size:cover;
}

#topics .category {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:30px;
}

#topics .category nav {
    border-left:#002a41 1px solid;
    padding:5px 30px;
    margin-bottom:10px;
}

#topics .category nav:last-child {
    border-right:#002a41 1px solid;
}

#topics .category nav p {
    font-size:70%;
    font-weight:600;
    color:#008cd6;
}

#topics .category nav.now {
}

#topics .category nav.now a {
    opacity:0.5;
    pointer-events:none;
}

#topics .category nav.none {
    opacity:0.5;
}

#topics .topics_cts {
}

#topics .topics_cts .topics {
    margin-bottom:40px;
}

#topics .topics_cts .topics .topic {
    border-bottom:#323232 1px solid;
}

#topics .topics_cts .topics .topic:first-child {
    border-top:#323232 1px solid;
}

#topics .topics_cts .topics .topic:last-child {
}

#topics .topics_cts .topics .topic a {
    padding:20px 0;
    display:block;
}

#topics .topics_cts .topics .topic a .date_cate {
    display:flex;
    align-items:center;
    margin-bottom:5px;
    width:100%;
}

#topics .topics_cts .topics .topic a .date_cate .date {
    margin-right:10px;
}

#topics .topics_cts .topics .topic a .date_cate .cate {
    font-size:80%;
    line-height:100%;
    padding:3px 5px;
    border:#fff 1px solid;
    display:inline-block;
}

#topics .topics_cts .topics .topic a .topic_title {
    width:100%;
}

#topics .pagenation {
    display:flex;
    justify-content:center;
    align-items:center;
}

#topics .pagenation nav {
    border-right:#002a41 1px solid;
}

#topics .pagenation nav:last-child {
    border-right:none;
}

#topics .pagenation nav a {
    display:block;
    padding:5px 15px;
}

#topics .pagenation nav a p {
    color:#008cd6;
}

#topics .pagenation nav.none a {
    pointer-events:none;
    opacity:0.5;
}

#topics .pagenation nav.now a {
    pointer-events:none;
    background:#008cd6;
}

#topics .pagenation nav.now a p {
    color:#000;
}

/*-----TOPICS DETAIL-----*/
#topics_detail {
}

#topics_detail .pagetitles {
    background:url(../topics/img/title.jpg) center;
    background-size:cover;
}

#topics_detail article {
    background:#000;
    border:#1e1e1e 1px solid;
    padding:25px 25px;
}

#topics_detail article h3 {
    font-size:150%;
    font-weight:600;
    line-height:135%;
    color:#008cd6;
    margin-bottom:10px;
}

#topics_detail article .date_cate {
    display:flex;
    align-items:center;
}

#topics_detail article .date_cate .date {
    margin-right:10px;
}

#topics_detail article .date_cate .cate {
    font-size:80%;
    line-height:100%;
    padding:3px 5px;
    border:#fff 1px solid;
    display:inline-block;
}

#topics_detail article .photo {
    margin-top:30px;
}

#topics_detail article .ex {
    margin-top:30px;
}

#topics_detail article .youtube {
    margin:30px auto 0;
    padding-top: 56.25%;
    position:relative;
}

#topics_detail article .youtube iframe {
    position: absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

#topics_detail article .btns {
    margin-top:30px;
}

#topics_detail article .btns .btn {
    margin-bottom:20px;
}

#topics_detail article .btns .btn:last-child {
    margin-bottom:0;
}

#topics_detail article .btns .btn .arrow {
    width:12px;
    height:12px;
    border-top:#008cd6 1px solid;
    border-right:#008cd6 1px solid;
    transform:rotate(45deg);
    position:absolute;
    right:25px;
}

#topics_detail article .btns .btn a {
    position:relative;
    display:flex;
    align-items:center;
    padding:15px 20px;
    border:#008cd6 1px solid;
}

#topics_detail article .btns .btn a p {
    color:#008cd6;
}

#topics_detail article .btns .btn.file {
}

#topics_detail article .btns .btn .file {
    margin-top:15px;
}







/*-----COMPANY-----*/
#company {
}

#company .cts {
    width:100%;
}

#company .pagetitles {
    background:url(../company/img/title.jpg) center;
    background-size:cover;
}

#company #vision {
    width:100%;
    margin:0 auto 100px;
}

#company #vision .corner_title {
    text-align:center;
    margin-bottom:30px;
}

#company #vision .corner_title .kana {
    left:0;
    right:0;
    text-align:center;
}

#company #vision .photos {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    position:relative;
}

#company #vision .photos .photo {
    width:25%;
}

#company #vision .photos .photo:nth-child(n+17) {
    display:none;
}

#company #vision .photos .mask {
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:0;
    left:0;
}

#company #vision .photos .concept {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:absolute;
    text-align:center;
}

#company #vision .photos .concept .item {
    font-size:150%;
    font-weight:600;
    margin-bottom:15px;
}

#company #vision .photos .concept .tx {
    font-size:100%;
    font-weight:600;
    line-height:200%;
    letter-spacing:2px;
}

#company #overview {
    margin-bottom:100px;
}

#company #overview .corner_title {
    width:90%;
    margin:0 auto 30px;
}

#company #overview .corner_title .kana {
}

#company #overview .details {
    width:90%;
    margin:auto;
}

#company #overview .details .photo {
    width:70%;
    height:80vw;
    background:url(../company/img/profile.jpg) center;
    background-size:cover;
    margin:0 auto 30px;
}

#company #overview .details .detail {
    width:100%;
}

#company #overview .details .detail .overview {
    border-bottom:#323232 1px solid;
    padding-bottom:18px;
    margin-bottom:18px;
}

#company #overview .details .detail .overview:first-child {
    border-top:#323232 1px solid;
    padding-top:18px;
}

#company #overview .details .detail .overview .item {
    width:100%;
    font-weight:bold;
}

#company #overview .details .detail .overview .tx {
    width:100%;
}

#company #overview .details .detail .overview .tx .etc {
    display:block;
    text-align:right;
}

#company #overview .details .detail .banner {
    width:100%;
}



#company #greeting {
    margin-bottom:100px;
}

#company #greeting .corner_title {
    text-align:center;
    margin-bottom:30px;
}

#company #greeting .kana {
    left:0;
    right:0;
    text-align:center;
}

#company #greeting .photo {
    width:100%;
    height:60vw;
    background:url(../company/img/greeting.jpg) center;
    background-size:cover;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 50px;
}

#company #greeting .photo .copy {
    display:flex;
    justify-content:center;
    align-items:center;
}

#company #greeting .photo .copy p {
    font-size:110%;
    font-weight:600;
    line-height:100%;
    color:#000;
    background:#fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding:8px 8px 8px 5px;
    margin-top:auto;
}

#company #greeting .photo .copy p:first-letter {
    color:#008cd6;
}

#company #greeting .greeting {
    text-align:center;
}

#company #greeting .greeting .tx {
    font-size:100%;
    font-weight:500;
    line-height:200%;
    letter-spacing:2px;
    margin-bottom:30px;
}

#company #greeting .greeting .names {
    display:flex;
    justify-content:center;
    align-items:center;
}

#company #greeting .greeting .names .position {
    letter-spacing:2px;
    margin-right:15px;
}

#company #greeting .greeting .names .name {
    font-size:135%;
    font-weight:600;
    letter-spacing:2px;
}


#company #access {
}

#company #access .corner_title {
    width:100%;
    margin:0 auto 30px;
    text-align:right;
}

#company #access .corner_title .kana {
    right:0;
}

#company #access .map {
    width:100%;
    height:60vw;
    margin:0 auto 30px;
}

#company #access .map iframe {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

#company #access .access {
    width:90%;
    margin:auto;
}

#company #access .access .company {
    font-size:110%;
    font-weight:600;
}

#company #access .access .name {
}




/*-----CASE-----*/
#case {
}

#case .pagetitles {
    background:url(../case/img/title.jpg) center;
    background-size:cover;
}

#case .intro {
    text-align:center;
    margin-bottom:30px;
}

#case .intro h3 {
    font-size:135%;
    font-weight:600;
    line-height:150%;
    margin-bottom:10px;
    color:#008cd6;
}

#case .intro .copy {
    text-align:left;
}

#case #gallery {
}

#case #gallery .cases {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:70px;
}

#case #gallery .cases .case {
    width:30%;
    margin:0 5% 10px 0;
}

#case #gallery .cases .case:nth-child(3n) {
    margin-right:0;
}

#case #gallery .cases .case .photo {
    margin-bottom:10px;
}

#case #gallery .cases .case .sitename {
    font-size:80%;
    display:none;
}

#case #result {
}

#case #result .results {
}

#case #result .results .result {
    margin-bottom:15px;
}

#case #result .results .result .result_title {
    display:flex;
    align-items:center;
    cursor:pointer;
    position:relative;
    border:#323232 1px solid;
    background:#000;
    padding:18px 20px;
}

#case #result .results .result .result_title p {
    font-size:110%;
    font-weight:600;
    color:#008cd6;
}

#case #result .results .result .result_title .arrow {
    width:10px;
    height:10px;
    border-top:#008cd6 1px solid;
    border-right:#008cd6 1px solid;
    transform:rotate(45deg);
    position:absolute;
    right:20px;
}

#case #result .results .result .result_title .arrow.open {
    transform:rotate(135deg);
    margin-bottom:5px;
}

#case #result .results .result .result_list {
    display:none;
    margin-top:15px;
    margin-bottom:35px;
}

#case #result .results .result ul {
}

#case #result .results .result ul li {
    width:100%;
    display:flex;
    align-items:center;
}

#case #result .results .result ul li:before {
    content:"";
    width:6px;
    height:6px;
    background:#008cd6;
    transform:rotate(45deg);
    display:block;
    margin-right:8px;
}







/*-----RECRUIT-----*/
#recruit {
}

#recruit .cts {
}

#recruit .pagetitles {
    background:url(../recruit/img/title.jpg) center;
    background-size:cover;
}

#recruit .intro {
    margin-bottom:50px;
}

#recruit .intro .photo {
    width:70%;
    margin:0 auto 30px;
}

#recruit .intro .copy {
    width:100%;
}

#recruit .intro .copy h3 {
    font-size:150%;
    font-weight:600;
    margin-bottom:10px;
    color:#008cd6;
    text-align:center;
}

#recruit .intro .copy .tx {
}

#recruit .recruit {
}

#recruit .recruit .detail {
    border-bottom:#323232 1px solid;
    padding-bottom:18px;
    margin-bottom:18px;
}

#recruit .recruit .detail:first-child {
    border-top:#323232 1px solid;
    padding-top:18px;
}

#recruit .recruit .detail:last-child {
    margin-bottom:0;
}

#recruit .recruit .detail .item {
    width:100%;
    font-weight:bold;
}

#recruit .recruit .detail .tx {
    width:100%;
}

#recruit .engage {
    margin-top:20px;
}

#recruit .engage a {
    width:100%;
    padding:25px;
    margin:0 auto 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
}

#recruit .engage a img {
    width:60%;
}





/*-----PLAYER-----*/
#player {
}

#player .cts {
    width:100%;
}

#player .pagetitles {
    background:url(../player/img/title.jpg) center;
    background-size:cover;
    margin-bottom:70px;
}

#player .intro {
    width:100%;
    height:60vw;
    margin:0 auto 50px;
    background:url(../player/img/player_bg.jpg) center;
    background-size:cover;
    position:relative;
    padding:25px;
    display:flex;
    align-items:center;
}

#player .intro .photo {
    position:absolute;
    right:15px;
    width:50%;
}

#player .intro .typo {
    position:relative;
    font-size:300%;
    font-weight:600;
    line-height:100%;
    left:0;
}

#player .explain {
    width:90%;
    margin:0 auto 100px;
}

#player .explain .names {
    margin-bottom:15px;
}

#player .explain .names .position {
    font-size:90%;
    margin-right:30px;
}

#player .explain .names .name {
    font-size:150%;
    font-weight:600;
}

#player .explain .tx {
}

#player .data {
    width:90%;
    margin:auto;
}

#player .data .data_cts {
    background:#1e1e1e;
    padding:30px 25px 35px;
}

#player .data .data_cts .profile {
    margin-bottom:50px;
}

#player .data .data_cts .profile .photo {
    width:50%;
    margin:0 auto 20px;
}

#player .data .data_cts .profile .details {
    width:100%;
}

#player .data .data_cts .profile .details .detail {
    border-bottom:#323232 1px solid;
    display:flex;
    justify-content:space-between;
    padding-bottom:15px;
    margin-bottom:15px;
}

#player .data .data_cts .profile .details .detail:first-child {
    border-top:#323232 1px solid;
    padding-top:15px;
}

#player .data .data_cts .profile .details .detail:last-child {
    margin-bottom:0;
}

#player .data .data_cts .profile .details .detail .item {
    width:20%;
}

#player .data .data_cts .profile .details .detail .tx {
    width:80%;
}

#player .data .results {
}

#player .data .results .result {
    width:100%;
}

#player .data .results .result .result_title {
    border-top:#008cd6 1px solid;
    border-bottom:#008cd6 1px solid;
    font-weight:bold;
    color:#008cd6;
    padding:8px;
    margin-bottom:15px;
}

#player .data .results .result ul {
}

#player .data .results .result ul li {
    border-bottom:#323232 1px solid;
    padding-bottom:15px;
    margin-bottom:15px;
}

#player .data .results .result ul li:last-child {
    margin-bottom:0;
}

#player .data .results .result.tournament {
    margin-bottom:50px;
}

#player .data .results .result.tournament ul li {
    display:flex;
    justify-content:space-between;
}

#player .data .results .result.tournament ul li p:first-child {
    width:100px;
}

#player .data .results .result.tournament ul li p:last-child {
    width:calc(100% - 120px);
}



/*-----CONTACT-----*/
#contact {
}

#contact .pagetitles {
    background:url(../contact/img/title.jpg) center;
    background-size:cover;
}

#contact .intro {
    text-align:center;
    margin-bottom:50px;
}

#contact .intro h3 {
    font-size:150%;
    font-weight:600;
}

#contact #contact_tel {
}

#contact #contact_tel .tel_cts {
    background:#000;
    border:#1e1e1e 1px solid;
    padding:25px 25px;
    margin-bottom:70px;
    text-align:center;
}

#contact #contact_tel .tel_cts .item {
    font-size:135%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:20px;
    color:#008cd6;
}

#contact #contact_tel .tel_cts .copy {
    margin-bottom:20px;
    text-align:left;
}

#contact #contact_tel .tel_cts .tel {
    font-size:250%;
    font-weight:600;
    line-height:100%;
    color:#008cd6;
    margin-bottom:5px;
}

#contact #contact_tel .tel_cts .time {
    font-size:80%;
    color:#fff;
}

#contact #contact_form {
}

#contact #contact_form .form_cts {
    background:#000;
    border:#1e1e1e 1px solid;
    padding:25px 25px;
}

#contact #contact_form .form_cts .copy {
    margin-bottom:30px;
}

#contact #contact_form .form_cts .copy .tx {
}

#contact #contact_form .form_cts .copy .attention {
    font-size:80%;
    display:flex;
    color:#787878;
    padding-top:3px;
}

#contact #contact_form .forms {
    margin-bottom:25px;
}

#contact #contact_form .forms .form {
    border-bottom:#323232 1px dashed;
    padding:18px 0;
}

#contact #contact_form .forms .form:nth-child(n+5) {
    align-items:flex-start;
}

#contact #contact_form .forms .form:first-child {
    border-top:#323232 1px dashed;
}

#contact #contact_form .forms .form .items {
    width:100%;
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

#contact #contact_form .forms .form .items .item {
    font-weight:400;
    margin-left:8px;
}

#contact #contact_form .forms .form .items .required {
    font-size:70%;
    line-height:100%;
    background:#008cd6;
    color:#000;
    padding:4px 5px 4px;
}

#contact #contact_form .forms .form .items .any {
    font-size:70%;
    line-height:100%;
    background:#323232;
    color:#000;
    padding:4px 5px 4px;
}

#contact #contact_form .forms .form .detail {
    width:100%;
}

.forms .form .privacy_cts {
width:100%;
height:240px;
border:#323232 1px solid;
padding:20px 20px 20px 25px;
margin:12px 0 15px;
}

.forms .form .privacy_cts .privacy_policy {
overflow-y:scroll;
height:200px;
}

.forms .form .privacy_cts .privacy_policy .privacies {
}

.forms .form .privacy_cts .privacy_policy .privacies .privacy {
    border-bottom:#323232 1px dashed;
    padding-bottom:10px;
    margin-bottom:10px;
}

.forms .form .privacy_cts .privacy_policy .privacies .privacy:last-child {
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}

.forms .form .privacy_cts .privacy_policy .privacies .privacy .privacy_item {
    font-size:80%;
    font-weight:600;
    color:#008cd6;
}

.forms .form .privacy_cts .privacy_policy .privacies .privacy .tx {
    font-size:80%;
}

.forms .form .consent_cap {
    font-weight:600;
}

.forms .form .consent {
    display:flex;
    align-items:center;
}

.forms .form .consent label {
    font-weight:500;
    line-height:100%;
    cursor:pointer;
    padding-left:5px;
    color:#e64696;
    position:relative;
}

.forms .form .consent label:before {
content:"";
width:16px;
height:16px;
border:#e64696 1px solid;
display:inline-block;
position:absolute;
left:-20px;
}

.forms .form .consent label:after {
content:"";
width:10px;
height:15px;
border-right:#e64696 2px solid;
border-bottom:#e64696 2px solid;
display:block;
transform:rotate(45deg);
position:absolute;
top:-4px;
left:-13px;
opacity:0;
}

.forms .form input[type="checkbox"] {
width:20px;
visibility:hidden;
}

.forms .form input[type="checkbox"]:checked + label:after {
opacity:1;
}

.forms .form .detail .warning.block,
.forms .form .privacy_cts .warning.block {
font-size:80%;
color:#e64696;
position:relative;
top:7px;
margin-top:20px;
}

form .btns {
display:flex;
justify-content:center;
align-items:center;
}

form .btns .btn {
margin:0 7px;
}

form .btns .btn:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

input,textarea {
padding:15px 20px;
background:transparent;
border:#00466b 1px solid;
}

.forms .form .style_name {
width:100%;
}

.forms .form .style_kana {
width:100%;
}

.forms .form .style_mail {
width:100%;
}

.forms .form .style_tel {
width:100%;
}

.forms .form .style_detail {
width:100%;
height:200px;
}

.forms .form .style_privacy {
}

.style_submit {
background:transparent;
padding:15px 50px;
font-weight:500;
color:#fff;
background:#008cd6;
cursor:pointer;
border:none;
}

#contact .btns .btn .accepted:disabled {
background:#323232;
color:#fff;
pointer-events:none;
}

.style_submit:focus {
    border:none;
}

.style_fix {
background:transparent;
padding:15px 30px;
font-weight:500;
color:#fff;
background:#555;
cursor:pointer;
border:none;
}

.style_fix:focus {
    border:none;
}






/*-----PRIVACY-----*/
#privacy {
}

#privacy .cts {
}

#privacy .pagetitles {
    background:url(../privacy/img/title.jpg) center;
    background-size:cover;
}

#privacy .pagetitles h2 {
    font-size:300%;
    margin-bottom:10px;
}

#privacy .privacies {

}

#privacy .privacies .privacy {
    border-bottom:#323232 1px solid;
    padding-bottom:20px;
    margin-bottom:20px;
}

#privacy .privacies .privacy:last-child {
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}

#privacy .privacies .privacy .privacy_item {
    font-weight:600;
    color:#008cd6;
    padding-bottom:2px;
}

#privacy .privacies .privacy .tx {

}












/*-----PAGE CONTACT-----*/
#page_contact {
}

#page_contact .main {
    width:100%;
    background:url(../img/contact_bg.jpg) center;
    background-size:cover;
    position:relative;
    padding:45px 0;
}

#page_contact .page_contact_titles {
    text-align:center;
    margin-bottom:20px;
}

#page_contact .page_contact_titles .item {
}

#page_contact .page_contact_titles .item p {
    font-size:100%;
    color:#008cd6;
    display:inline-block;
    border-bottom:#008cd6 3px solid;
}

#page_contact .main .detail {
    text-align:center;
}

#page_contact .main .detail h3 {
    font-size:150%;
    font-weight:bold;
    line-height:135%;
    padding-bottom:15px;
}

#page_contact .main .detail .tx {
    margin-bottom:20px;
}

#page_contact .main .detail .tel {
    font-size:250%;
    font-weight:600;
    line-height:100%;
    color:#008cd6;
    margin-bottom:5px;
}

#page_contact .main .detail .time {
    font-size:80%;
    color:#fff;
}

#page_contact .main .detail .more_btn {
    margin-top:20px;
}






/*GROBAL*/
#grobal {
}

#grobal .nav_btn {
width:40px;
height:26px;
position:fixed;
top:20px;
right:20px;
display:flex;
justify-content:center;
align-items:center;
z-index:998;
cursor:pointer;
}

#grobal .nav_btn span {
width:100%;
height:2px;
background:#008cd6;
position:absolute;
}

#grobal .nav_btn span:first-child {
top:0;
transition:0.5s;
}

#grobal .nav_btn span.show:first-child {
top:12px;
transform:rotate(45deg);
}

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

#grobal .nav_btn span.show:nth-child(2) {
opacity:0;
}

#grobal .nav_btn span:last-child {
bottom:0;
transition:0.5s;
}

#grobal .nav_btn span.show:last-child {
bottom:12px;
transform:rotate(-45deg);
}

#grobal .nav_close {
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
display:none;
cursor:pointer;
z-index:999;
}

#grobal .grobal_nav {
width:70vw;
height:100%;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.8);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
transform:translate(-100%,0);
transition:0.5s;
z-index:1000;
padding:25px 35px;
}

#grobal .grobal_nav.show {
transform:translate(0,0);
}

#grobal .grobal_nav nav {
    width:100%;
margin:15px 0;
}

#grobal .grobal_nav nav a {
color:#fff;
text-align:center;
padding:10px 0;
}

#grobal .grobal_nav nav a .jp {
    font-size:100%;
    font-weight:600;
    line-height:100%;
    color:#008cd6;
    padding-bottom:7px;
}

#grobal .grobal_nav nav a .en {
    font-size:60%;
    font-weight:600;
    line-height:100%;
    color:#00466b;
}

#grobal .grobal_nav nav:nth-child(6) a {
    width:100%;
    background:#008cd6;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:10px 25px;
}

#grobal .grobal_nav nav:nth-child(6) a img {
    width:26px;
    margin-bottom:8px;
}

#grobal .grobal_nav nav:nth-child(6) a .jp {
    color:#000;
}

#grobal .grobal_nav nav:nth-child(6) a .en {
    color:#000;
}

#grobal .grobal_nav nav:last-child a {
    width:100%;
    background:#008cd6;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:10px 25px;
}

#grobal .grobal_nav nav:last-child a img {
    width:26px;
    margin-bottom:8px;
}

#grobal .grobal_nav nav:last-child a .jp {
    color:#fff;
}

#grobal .grobal_nav nav:last-child a .en {
    color:#fff;
}



/*BACK TO TOP*/
.BackToTop {
    position:fixed;
    width:35px;
    height:35px;
    right:15px;
    bottom:15px;
    z-index:100;
    display:none;
}



/*FOOTER*/
footer {
padding:0 0 30px;
}

footer .footer_link {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:50px;
    border-top:#002a41 1px solid;
}

footer .footer_link nav {
    width:50%;
    border-right:#002a41 1px solid;
    border-bottom:#002a41 1px solid;
}

footer .footer_link nav:nth-child(even) {
    border-right:none;
}

footer .footer_link nav a {
    display:block;
    padding:12px 15px;
}

footer .footer_link nav a p {
    font-size:70%;
    font-weight:500;
    color:#008cd6;
}

footer .data {
    text-align:center;
    margin-bottom:30px;
}

footer .data .footer_logo {
    width:180px;
    margin:0 auto 20px;
}

footer .data .address {
    font-size:80%;
    color:#646464;
}

footer .engage {
}

footer .engage a {
    width:200px;
    height:50px;
    margin:0 auto 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
}

footer .engage a img {
    width:160px;
}

footer .copyright {
font-size:60%;
text-align:center;
color:#323232;
}




}