@charset "utf-8";

/* Base
------------------------------------------ */
@import "../base/reset.css";
@import "../base/common.css";
@import "../base/header.css";
@import "../base/footer.css";

/* body
------------------------------------------ */
body { height: auto; background: none}
body.origin header { z-index: 100;}
body:before { z-index: 1}
.pcVer { display: block;}
.spVer { display: none;}
body:before { height: 120px; top: 90px; background-size: auto 120px; }

/* header
------------------------------------------ */
/* body.origin header { z-index: 20000} */
/* タイトル
------------------------------------------ */
h2 { height: 950px; background: url(../../img/uniform/pc_bg_container.png) no-repeat center center; background-size: cover; position: relative }
h2 img { position: absolute; bottom: 0; left: 50%; margin-left: -573px; z-index: 2; }
h3 { text-align: center; font-size: 180%; margin-bottom: 40px; font-weight: normal;font-family: "Sawarabi Mincho";}
/* article
------------------------------------------ */
.newmain-content *{	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.newmain-content article { width: 800px; margin: 0 auto 40px; padding: 40px 0; font-size: 16px;}
.newmain-content p { margin-bottom: 40px; line-height: 2; text-align: center;}

.newmain-content ul { overflow: hidden;}
.newmain-content ul li { float: left; width: 240px; margin: 0 40px 40px 0;}
.newmain-content ul li a.modal-syncer { position: relative;}
.newmain-content ul li a.is::before {position: absolute; top: 0; left: 0; content: '重点スポーツ'; width: 8em; height: 25px; font-size: 12px; background: #002007; z-index: 50; color: #ffffff; text-align: center; padding-top: 5px;}
.newmain-content ul li a.is::after {position: absolute; top: 0; left: 6em; content: ''; z-index: 50; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 0; border-color: #002007 transparent transparent transparent;}
.newmain-content ul li:nth-child(3n) { margin-right: 0; }
.newmain-content ul li a.modal-syncer { display: block; text-decoration: none; color: #000000;}
.newmain-content ul li a.modal-syncer:hover { cursor: pointer}
.newmain-content .modal-syncer img { vertical-align: bottom}
.newmain-content ul li .img { display: block; margin-bottom: 10px; }
.newmain-content ul li .cap { display: block; text-align: center; color: #005613 !important; font-family: "Sawarabi Mincho";}
.newmain-content ul li .cap::before { content: '/ '; }
.newmain-content ul li .cap::after { content: ' /'; }

.modal-content .ttl { display: block; text-align: center; margin-bottom: 10px !important; color: #ffffff; font-family: "Sawarabi Mincho";}
.modal-content .ttl::before { content: '/ '; }
.modal-content .ttl::after { content: ' /'; }
.modal-content .single img { width: 100%; margin-bottom: 1em }
.modal-content .close { position: absolute; right: 20px; top: 20px;}
.modal-content .more { text-align: right; margin: 10px 0 0;}
.modal-content .more a { background: url(../../img/uniform/ic_more.png) no-repeat 0 50%; padding-left: 20px; color: #ffffff; text-decoration: none}
.modal-content .more a:hover { text-decoration: underline;}

.slick-prev:before { content:' ' !important; display: block; background: url(../../img/uniform/ic_prev.png) no-repeat left top; text-indent: -9999px; width: 26px; height: 51px; }
.slick-next:before { content:' ' !important; display: block; background: url(../../img/uniform/ic_next.png) no-repeat left top; text-indent: -9999px; width: 26px; height: 51px; }
.slick-prev, .slick-next { width: 26px; height: 51px; }
.slick-next { right: -40px; }
.slick-prev { left: -40px; }


.newmain-content p.btn { width: 150px; margin: 0 auto;}
.newmain-content p.btn span { background: url(../../img/uniform/ic_arrow.png) no-repeat 0 50%; padding-left: 20px; }
.newmain-content p.btn a{ padding: 10px; color: #ffffff; position: relative; background: #266897; background: -moz-linear-gradient(-45deg, #266897 0%, #266897 60%, #327fa7 60%, #327fa7 100%); background: -webkit-linear-gradient(-45deg, #266897 0%,#266897 60%,#327fa7 60%,#327fa7 100%); background: linear-gradient(135deg, #266897 0%,#266897 60%,#327fa7 60%,#327fa7 100%); text-decoration: none; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block;}
.newmain-content p.btn a:hover{ background: #4789b8; background: -moz-linear-gradient(-45deg, #4789b8 0%, #4789b8 60%, #549ec4 60%, #549ec4 100%); background: -webkit-linear-gradient(-45deg, #4789b8 0%,#4789b8 60%,#549ec4 60%,#549ec4 100%); background: linear-gradient(135deg, #4789b8 0%,#4789b8 60%,#549ec4 60%,#549ec4 100%)}
/*******************************************

ブラウザの幅が768px以下ならここの記述が有効になる

********************************************/

@media only screen and (max-width: 768px) {
body:before { content: ""; background: none; position: static; top: 0;}
.pcVer { display: none;}
.spVer { display: block;}
.drawer-hamburger { z-index: 101;}
h2 { height: auto; background: none; position: static}
h2 img { height: auto; width: 100%; position: static; margin: 0 }
h3 { font-size: 140%; margin-top: 20px}
.newmain-content article { width: auto; padding: 20px 0; margin: 0 10px 20px}
.newmain-content .modal-syncer img { width: 100%; height: auto}

.newmain-content p.ttl { text-align: center}
.newmain-content p.ttl img { width: 50%;}
.newmain-content ul { padding: 0 5px;}
.newmain-content ul li { width: 33.33%; margin: 0; padding: 5px}
.newmain-content ul li .img { margin-bottom: 5px; }
.newmain-content ul li .cap { margin-bottom: 10px; font-size: 80%;}
}

/*******************************************

ブラウザの幅が480px以下ならここの記述が有効になる

********************************************/
@media only screen and (max-width: 480px) {
.slider {
	width: 100%;
	height: 300px;
}
.slider div {
	height: 300px;
}
.slider img {
	width: 100%;
}
.slick-prev, .slick-next { width: 15px; height: 29px; }
.slick-prev:before { background: url(../../img/uniform/sp_ic_prev.png) no-repeat left top; width: 15px; height: 29px; }
.slick-next:before { background: url(../../img/uniform/sp_ic_next.png) no-repeat left top; width: 15px; height: 29px; }
.modal-content .close { right: 10px; top: 10px;}
.modal-content .close img { width: 60%;}
.newmain-content p.ttl { margin-bottom: 20px;}
.newmain-content ul li { width: 50%;}
.newmain-content ul li a.is::before { height: 20px; font-size: 10px;}
.newmain-content ul li a.is::after { left: 5em; border-width: 25px 25px 0 0;}
.newmain-content ul li .cap { font-size: 60%;}
}