@charset "UTF-8";

/* access
----------------------------------------------- */
.toptracer{margin-bottom:10%;}
.toptracer .second-content{padding:0;}
.intro{position:relative;margin-bottom: 10%;}
.intro img{width: 46%;top: 0;right: -3%;position:absolute;}
.intro .textbox{width:90%;margin: 0 auto;position:relative;padding: 12vw 0 0 0;}
.intro .title{margin-bottom: 10%;position: relative;}
.intro .title:before{content:"";width: 28%;height:3px;position:absolute;background:url(../images/toptracer/deco.jpg);background-size: contain;z-index:1;bottom: -15%;}
.intro .title b{color:#136c3c;display: block;margin-bottom: 1%;}
.intro .title span{font-size: 6vw;display: block;font-weight: bold;line-height: 1.4;letter-spacing: 2px;}

.structure{background:#f1f8e9;padding: 8% 0;margin-bottom: 10%;}
.structure img{width: 86%;margin: 0 auto 6%;}
.structure .title{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;flex-direction: column;-webkit-flex-direction: column;font-size: 6vw;margin: 0 0 2vw;}
.structure .title .en{color: #136c3c;font-size: 70%;line-height: 1;position: relative;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;align-items: center;-webkit-align-items: center;}
.structure .title .en:after{content: '';width: 14vw;height: 1px;background: #136c3c;display: inline-block;margin-left: 3vw;}

.experience{border: 4px solid #dfdfdf;margin-bottom: 10%;}
.experience img{margin-bottom:5%;}
.experience .textbox{padding: 0 5%;}
.experience .title{font-weight: bold;font-size: 5.2vw;}
.experience .title b{color: #136c3c}

.boxitem{background: #136c3c;padding: 10% 0;}

.boxitem .title{text-align: center;line-height: 1.4;margin-bottom: 3%;}
.boxitem .title b{font-size: 3.5vw;background: #fff;color: #000;padding: 2%;display: block;line-height: 1.4;border-radius: 40px;margin-bottom: 2%;}
.boxitem .title span{font-size: 8.6vw;font-weight: bold;}
.boxitem .center{text-align: center;}
.boxitem li{background:#fff;margin-bottom: 5%;}
.boxitem li .tit{font-size: 5vw;font-weight: bold;line-height: 1.3;margin-bottom: 2%;color: #136c3c;border-left: 3px solid #136c3c;padding: 0 0 0 3%;}
.boxitem li .textbox{padding:5%;}
.boxitem li .txt:nth-last-child(1){margin-bottom:0;}

.boxitem#practice .title{color:#fff;}
.boxitem#practice .center{color:#fff;}
.boxitem#game{background:#f1f8e9;}
.boxitem#game .title{color:#000;}
.boxitem#game .title b{background:#75bb29;color:#fff}

/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 736px) {
.toptracer{margin-bottom: 60px;}
.intro{width:900px;margin: 50px auto 70px;}
.intro img{right: -40px;width: 455px;}
.intro .textbox{width: 470px;padding: 50px 0 0 0;margin: 0;}
.intro .title{margin-bottom: 60px;}
.intro .title:before{width:440px;height:3px;background: url(../images/toptracer/deco.jpg)no-repeat;background-size: contain;bottom: -35px;}
.intro .title b{font-size: 24px;position: relative;}
.intro .title b:before{content:"";width: 1590px;height:1px;position:absolute;background: #146c3d;right: 105%;top: 50%;}
.intro .title span{font-size: 38px;}

.structure{padding: 80px 0 60px 0;margin-bottom: 70px;}
.structure img{display:inline-block;width:410px;margin-bottom: 0;}
.structure .textbox{width:450px;display: inline-block;margin-left: 30px;vertical-align: top;}
.structure .title{font-size:26px;width:max-content;margin:0 auto 6px 0;}
.structure .title .en{margin-bottom:2px;}
.structure .title .en:after{width:62px;margin-left:12px;}

.experience{margin-bottom: 70px;background: url(../images/toptracer/experience-pc.jpg)no-repeat top right;background-size: contain;}
.experience .textbox{padding: 30px 35px 12px 30px;width: 570px;}
.experience .title{font-size: 38px;line-height: 1.4;margin-bottom: 20px;}

.boxitem{padding: 80px 0;}
.boxitem .title{margin-bottom: 20px;}
.boxitem .title b{font-size:20px;width: 530px;margin: 0 auto 4px;padding: 10px;}
.boxitem .title span{font-size: 50px;}
.boxitem ul{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;justify-content: center;}
.boxitem li{width: 31%;margin: 0 0.6% 16px 0.6%;}
.boxitem li .textbox{padding:25px;}
.boxitem li .tit{font-size: 20px;}
.boxitem li .txt{font-size:90%;}	
}

@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.experience{background: url(../images/toptracer/experience-pc@2x.jpg)no-repeat top right;background-size: contain;}
}