@charset "UTF-8";

a:hover {
  opacity: 0.8;
  transition: .5s;
}

body { display: block;}

.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

img { width: 100%;}

.sp { display: none;}



/* header
----------------------------------------------------------------------------- */
header .logo {
  background: #1D2087;
  padding: 10px 0;
  position: relative;
  z-index: 2;
}
header .logo p {
  text-align: center;}
header .logo p a {
  display: block;}
header .logo p img {
  width: 262px;}

#head h1 {
  text-align: center;
  margin: auto;
}
#head h1 img { width: 100%;}

/* footer
----------------------------------------------------------------------------- */
footer {
  background: #1d2087;
  position: relative;
  z-index: 999;
}
footer .wrapper {
  max-width: 1024px;
  margin: auto;
  padding: 15px;
  overflow: hidden;
}

footer .wrapper ul {
  overflow: hidden;
  margin: 0 -20px;
}
footer .wrapper ul li {
  float: left;
  width: 30%;
  padding: 0 20px;
  box-sizing: border-box;
}
footer .wrapper ul li:nth-child(2) {
  width: 40%;
  margin-top: 35px;
}
footer .wrapper ul li:last-child {
  margin-top: 10px;}
footer .wrapper ul li dl {
  margin-top: 10px;
  color: #fff;
  overflow: hidden;
  font-size: 13px;
}
footer .wrapper ul li dl dt {
  float: left;
  width: 15%;
  border: 1px solid #fff;
  padding: 10px;
  text-align: center;
}
footer .wrapper ul li dl dd {
  float: right;
  width: 75%;
  line-height: 1.35;
}
footer .wrapper ul li img { width: 100%;}
footer .wrapper li.logo a {
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
}
footer .wrapper li.logo a span {
  display: block;
  padding: 5px 0;
  border: 1px solid #fff;
}



/* beginner
----------------------------------------------------------------------------- */
#beginner {
  background: url(../images/back-01.png) no-repeat center center/cover;
  padding: 0 0 2.5em;
}
#beginner .tennis {
  margin: 2% auto 0;
  width: 90%;
}
#beginner .golf {
  margin: 0 auto 3%;
  width: 90%;
}




/* career
----------------------------------------------------------------------------- */
#career {
  background: url(../images/back-02.png) no-repeat center center/cover;
  padding: 0 0 2.5em;
}
#career .tennis {
  margin: 2% auto 0;
  width: 90%;
}
#career .golf {
  margin: 0 auto 3%;
  width: 90%;
}




/* junior
----------------------------------------------------------------------------- */
#junior {
  background: url(../images/back-03.png) no-repeat center center/cover;
  padding: 0 0 2.5em;
}
#junior .tennis {
  margin: 2% auto 0;
  width: 90%;
}
#junior .g-kidz {
  margin: 0 auto 3%;
  width: 90%;
}




/* intro
----------------------------------------------------------------------------- */
#intro {
  padding: 3.5em 0;
}
#intro h2 {
  margin: auto auto 3%;
  width: 85%;
}
#intro .tennis,
#intro .golf,
#intro .goldenkiz {
  border-style: solid;
  border-width: 5px;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 3%;
  overflow: hidden;}
#intro .tennis {
  background: #e5f5fb;
  border-color: #0097da;
  margin-bottom: 3%;
}
#intro .golf {
  background: #e5f6f3;
  border-color: #00aa87;
  margin-bottom: 3%;
}
#intro .goldenkiz {
  background: #fbe5e7;
  border-color: #d7000f;
}

#intro .left {
  float: left;
  margin-right: 4%;
  width: 48%;
}
#intro .right {
  float: right;
  width: 48%;
}
#intro h4 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.35;
  margin: 1em 0;
  text-align: center;
}
#intro .tennis h4 { color: #0097da;}
#intro .golf h4 { color: #00aa87;}
#intro .goldenkiz h4 { color: #d7000f;}

#intro p {
  font-size: 14px;
  line-height: 1.35;
}
#intro dl {
  align-items: center;
  background: #fff;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top: 1em;
}
#intro dl dt {
  color: #ffff00;
  font-size: 13px;
  line-height: 1.15;
  padding: .5em 0;
  text-align: center;
  width: 25%;
}
#intro .tennis dl dt { background: url(../images/back-05.png) no-repeat left center/cover;}
#intro .golf dl dt { background: url(../images/back-06.png) no-repeat left center/cover;}
#intro .goldenkiz dl dt { background: url(../images/back-07.png) no-repeat left center/cover;}

#intro dl dd {
  box-sizing: border-box;
  font-size: 13px;
  padding-left: 1em;
  width: 75%;
}



/* campaign
----------------------------------------------------------------------------- */
#campaign {
  background: #d7000f;
  padding: 2.5em 0;
}
#campaign .wrapper {
  position: relative;
}

#campaign a {
  display: block;
  margin: .8em auto;
  width: 65%;
}
#campaign h3 {
  margin: auto;
  width: 55%;
}
#campaign .thumb {
  position: absolute;
  bottom: -32%;
  left: 0;
  width: 18%;
}
#campaign .human {
  position: absolute;
  bottom: -20%;
  right: -5%;
  width: 22%;
}




@media screen and ( max-width: 1080px) {
footer .wrapper ul li:nth-child(2) {
  margin-top: 10px;}
footer .wrapper ul li dl dt {
  width: 20%;}
footer .wrapper ul li dl dd {
  width: 65%;}
}

@media screen and ( max-width: 768px) {
.wrapper {
  width: 95%;
  margin: 0 auto;
}
.sp { display: block;}
.pc { display: none;}


header .logo {
  padding: 8px 0;}
header .logo p img { width: 50%;}

#head h1 {
  padding-top: 0;}
#head img { width: 100%;}


footer .wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
}
footer .wrapper ul {
  margin: 0;}
footer .wrapper ul li {
  width: 100%;
  float: none;
  padding: 0;
}
footer .wrapper ul li:nth-child(2) {
  width: 100%;
  float: none;
  padding: 0;
  margin-top: 0;
}
footer .wrapper ul li p.tel {
  margin-top: 15px;
  display: block;}
footer .wrapper ul li dl {
  margin: 10px 0 20px;
  font-size: 16px;}
footer .wrapper ul li dl dt {
  width: 25%;
  margin-right: 3%;
  padding: 15px 10px;
}
footer .wrapper ul li dl dd {
  width: 62%;
  line-height: 1.5;
}
footer .wrapper li.logo a {
  margin-bottom: 15px;}
footer .wrapper ul li p.tel a {
  display: block;}



#beginner {
  padding: 1.5em 0;
}
#beginner .tennis {
  margin: 2% auto;
  width: 95%;
}
#beginner .golf {
  margin: auto;
  width: 95%;
}



#career {
  padding: 1em 0;
}
#career .tennis {
  margin: 2% auto;
  width: 95%;
}
#career .golf {
  margin: auto;
  width: 95%;
}



#junior {
  padding: 1.5em 0;
}
#junior .tennis {
  margin: 2% auto;
  width: 95%;
}
#junior .g-kidz {
  margin: 0 auto;
  width: 95%;
}



#intro {
  padding: 2em 0;
}
#intro h2 {
  width: 95%;
}
#intro .tennis,
#intro .golf,
#intro .goldenkiz {
  border-radius: 15px;
  padding: 5%;
}
#intro .tennis,
#intro .golf { margin-bottom: 5%; }
#intro .left {
  float: none;
  margin-right: 0;
  width: 100%;
}
#intro .right {
  float: none;
  width: 100%;
}
#intro p {
  line-height: 1.5;
}
#intro dl {
  display: block;
  margin-bottom: 1em;
}
#intro dl dt {
  width: 100%;
}
#intro dl dt br { display: none;}
#intro dl dd {
  padding: .5em;
  text-align: center;
  width: 100%;
}



#campaign {
  padding: 1.5em 0;
}
#campaign h2 {
  width: 100%;
}
#campaign a {
  margin: .5em 0 .25em;
  width: 100%;
}
#campaign h3 {
  width: 80%;
}
#campaign .thumb,
#campaign .human  {
  display: none;
}
}

@media screen and ( max-width: 500px){
#head h1 {
  margin-bottom: -1%;}
}