@charset "UTF-8";

/*--------共通------------*/
body {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:white;
  font-weight: bold;
}

@media screen and (max-width:834px){
  body{
    font-size: 50%;
  }
}

.title{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-align: center;
  margin: 0 0;
  padding: 8% 5% 5% 5%;
  font-size: 30px;
}

@media screen and (max-width:834px){
  .title{
    font-size: 20px;
  }
}

a:hover{
  color:#432;
}
/*--------------------*/

.header-separated{
  height: 52px;
}

.fixed-nav{
  background-color:#183654;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
  display: flex;
}

.top-name{
  width: 100%;
  color: white;
  font-weight: bold;
}

.top-name p{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 25px;
margin: 15px 0;
}


/*------------------------------

  ここから下がハンバーガーメニュー
  に関するCSS

------------------------------*/
  
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background:white;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 35%;
  height: auto;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background:rgba(95, 94, 94, 0.5);
  padding-top:5%;
  padding-bottom: 5%;
  color: white;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}


/*-------------------------------------*/

a{
  text-decoration: none;
  color: white;
  line-height: 3;
}

img{
  max-width: 100%;
}


.main-nav {
  display: inline-block;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 8%;
  list-style: none;
  color:white;
}

@media screen and (max-width:834px){
  .main-nav{
    display: none;
  }
}

.main-nav li{
  margin-right:20px ;
  float: left;
}

.main-nav a{
  color:white;
}

.main-nav a:hover{
  color:#432;
}

.page-header{
  text-align: center;
}


.home-content{
  text-align: center;
  padding-bottom:5% ;
}

.home-content p{
  margin: 0;
  font-size: 30px;
}

@media screen and (max-width:834px){
  .home-content p{
    font-size: 20px;
  }
}

.page-title{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-transform:uppercase;
  color: white;
  padding-top: 15%;
}

.toplogo-img{
  width: 20%;
  height: 20%;
  padding: 5%;
}


.top-page{
  background-image: url(images/tag_201209_2.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}



/*--------NEWS------------*/
.news{
  background-image: url(images/tag_201209_13.jpg);
  background-size: cover;
  background-color:gray;
  background-blend-mode: darken;
  width: auto;
  height: auto;
  z-index: 2;
}

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-around;
  padding-bottom: 10%;
 }

 @media screen and (max-width:834px){
  .container{
    display: block;
  }
 }

.news-content{
  background:#00000000;
  color: white;
  position: relative;
    border: 1px solid white;
    margin:0 5% 3% 5%;
    padding: 20px 20px 5px 20px;
}

.news-content::before {
  content: "";
  position: absolute;
  background-color: #f4f4f4;
  color: #033;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 10px;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom :10;
  margin: 0 auto;
}

#news1::before {
  content: "Event";
}
#news2::before {
  content: "Crowdfunding";
}
#news3::before {
  content: "Hot news";
}

.news-content img{
  padding-top: 10%;
}



.date{
  color: white;
  margin: 0 0 ;
  font-weight: bold;
  padding-bottom: 5%;
  text-decoration: underline;
  text-align: left;
}

#crowd{
  padding-top: 12px;
}

@media screen and (max-width:834px){
  .date{
    font-size: 50%;
    text-decoration: underline;
  }
}


/*--------ABOUT US------------*/

.about{
  background-image: url(images/tag_201209_11.jpg);
  background-blend-mode: darken;
  background-color:whitesmoke;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.about-text {
  width: 100%;
  color: white;
  text-align: center;
}

.about-text p{
  line-height: 5;
  text-align: justify;
  margin: 0;
  padding-bottom: 13%;
  padding-left: 15%;
  padding-right: 15%;
}

/*------------SERVICE-----------------*/

.service{
  background-image: url(images/tag_201209_14.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color:gray;
  background-blend-mode: darken;
}

.about-service {
  text-align: center;
  color: white;
  margin: 0;
  padding-bottom: 8%;
  font-weight: bold;
}

.service-detail{
  text-align: justify;
  color: white;
  margin: 0;
  padding-bottom: 15%;
  padding-left: 15%;
  padding-right: 15%;
  line-height: 5;
}

.s-title{
  font-weight: bold;
}

#long-text{
  font-size: 75%;
}

/*------------SOLUTION-----------------*/

.project{
  background-color:darkgray;
  background-blend-mode: darken;
  background-image: url(images/tag_201209_6.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-around;
  padding-bottom: 10%;
}

@media screen and (max-width:834px){
  .container{
    display:block;
  }
}

.solution-content{
  background:#00000000;
  color: white;
  position: relative;
  border: 1px solid white;
  margin:0 5% 3% 5%;
  padding: 20px 20px 5px 20px;
}

.solution-content::before {
  content: "";
  position: absolute;
  background-color: #f4f4f4;
  color: #033;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 10px;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom :10;
  margin: 0 auto;
}

#analysis::before {
  content: "Analysis for player";
}
#action::before {
  content: "Action for player";
}
#management::before {
  content: "Management & Casting for player";
}
#education::before {
  content: "Education for player";
}
#madia::before {
  content: "Media Creation";
}
#consulting::before {
  content: "For Corporation & Team & Coach";
}

.solution-content img{
  padding: 10% 0 0 0;
}

.solution-content p{
  margin: 0;
  line-height: 3vw;
  padding-bottom: 0;
}


/*------------PLAN-----------------*/

.plan{
  background-image: url(images/tag_201209_13.jpg);
  background-color:gray;
  background-blend-mode: darken;
  background-size: cover;
  background-position: center;
  color: white;
}


.p-text{
  font-size: 15px;
  line-height: 3vw;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricecards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-around;
  padding-bottom: 10%;
 }

 .pricecard{
  background:#00000000;
  color: white;
  position: relative;
  border: 1px solid white;
  margin:0 5% 5% 5%;
  padding: 20px 20px 5px 20px;
} 

.pricecard::before {
  content: "";
  position: absolute;
  background-color: #f4f4f4;
  color: #033;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 10px;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom :10;
  margin: 0 auto;
}

#one::before {
  content: "アマチュア・アカデミー契約";
}
#two::before {
  content: "若手選手サポート契約";
}
#three::before {
  content: "1試合ごとの単発契約";
}

#four::before {
  content: "年間契約";
}

.plan-contract {
  margin: 0 0;
  padding: 7% 0;
  font-weight: bold;
}

.p-content{
  margin: 0 0;
}

#fee{
  padding-top: 40px;
}

@media screen and (max-width:834px){
  .pricecards{
    display: block;
  }
}

@media screen and (max-width:834px){
  .pricecard{
    padding-bottom: 5%;
    justify-content: center;
  }
}

@media screen and (max-width:834px){
  .pricecard{
    border-top: 1px dotted white;
  }
}

@media screen and (max-width:834px){
  .plan-contract {
    margin: 0 0;
    padding: 8% 0;
    font-weight: bold;
  }
}

/*------------PARTNER-----------------*/

.partner{
  background-color:#4f4e4d;
  color: white;
}

.partner-content{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10%;
}

.partner-text{
  text-align: center;
}

.partner-text p{
  margin: 0;
  line-height: 5vw;
}

/*------------CONTACT-----------------*/

.contact{
  background-image: url(images/tag_201209_16.jpg);
  background-color:darkgray;
  background-blend-mode: darken;
  background-size: cover;
  background-position: center ;
  background-repeat: no-repeat;
}

.contact-content{
  text-align: center;
  color: white;
}

.contact-img{
  align-items: center;
  padding-bottom: 5%;
}

.contact-img img{
  width:20%;
  height: 20%;
  padding: 5%;
}

.contact-text p{
  margin:0 0;
  line-height: 5vw;
}