/*///////////////// style ////////////////*/
.alt{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

article h1 {
font-size:1.5rem;
text-align:center;
font-weight:700;
margin:30px 0 20px 0;
}
article h2 {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    margin-bottom:15px;
}
article h3 {
  font-size:1.2rem;
  text-align:center;
  font-weight:700;
  margin-bottom:15px;
}

article p {
font-size: .9rem;
line-height: 1.6;
}

@media (min-width: 768px) {
main{
margin: auto;
}
article h1 {
font-size: 32px;
padding: 60px 0 20px;
margin:0;
}
article h2 {
  font-size: 1.4rem;
  margin-bottom: 30px;
}
article p{
font-size:1rem;
}
}

@media (min-width: 768px) {
br.smp{
    display: none;
}
}

/*///////////////// lazy ////////////////*/

.lazy {
  position:relative;
  display:block;
  background:center top no-repeat;
  background-size:cover;
  margin:0 auto;
}
.lazy img{
  position:absolute;
  top:0;
  left:0;
}

/*///////////////// 種目紹介 ////////////////*/

#athletics-event div#con-body {
color:#000;
background-color:#ECECEC;
}

.cat_box {
padding:10px;
box-sizing:border-box;
}

.cat_box#running,
.cat_box#jumping { background-color:#E3F7D2; }
.cat_box#hurdles,
.cat_box#throwing { background-color:#C2E9ED; }
.cat_box#walking-marathon,
.cat_box#mixed { background-color:#FBD1BB; }

.cat_box_inner {
width:100%;
}

#athletics-event .in_box {
background-color:#fff;
margin:0px 0 10px 0;
border-radius:15px;
padding:15px;
box-sizing:border-box;
border: 1px solid #fff;
}

@media (min-width: 768px) {

.cat_box {
  padding:20px;
}

.cat_box_inner {
width:900px;
display:flex;
flex-wrap:wrap;
margin:auto;
align-items: flex-start;
justify-content:center;
}

#athletics-event .in_box {
width:48%;
margin:0 1% 2% 1%;
padding:30px;
align-items: flex-start;
}

}


/*///////////////// event-categories ////////////////*/

.event-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin:0 10px 10px 10px;
}

.category-button {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #A48B78;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s 0s ease;
}

.category-button:hover {
    background-color: #745399;
    border-color: #745399;
    box-shadow: 0 5px 15px rgba(116, 83, 153, 0.3);
}

.category-button.active {
    background-color: #745399;
    border-color: #745399;
}

.category-button span {
    font-size: .75rem;
    color:#A48B78;
    font-weight: bold;
    padding: 10px 0;
    transition: color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.category-button:hover span,
.category-button.active span {
    color: #fff;
    position: relative;
    z-index: 1;
}

.category-button img {
    width: 100%;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.category-icon {
    width: 60px;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.category-button.active .category-icon,
.category-button:hover .category-icon {
    filter: brightness(1.1);
}

.category-icon {
    width: 60px;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {

.event-categories {
  margin: 0 auto 20px;
  max-width: 880px;
}

.category-button span {
  font-size: 1rem;
}

}

/*///////////////// box_inner ////////////////*/

.explanation {
  text-align:center;
  margin-bottom:1.0em;
}

.explanation .lead {
  display:block;
  margin-bottom:0.5em;
  font-size:130%;
  font-weight:bold;
  color:#745399;
}

.highlight {
  padding:1.0em;
  background-color:#efefef;
  border-radius:10px;
}

.highlight a {
  text-decoration:underline;
  color:#745399;
}
@media (hover: hover) {
  .highlight a:hover {
  text-decoration:none;
}
}

.txts {
  font-size:80%;
}

.highlight h4 {
  margin-bottom:0.5em;
  color:#b17d1d;
}

.in_box .picture {
  position:relative;
  width:100%;
  margin:15px 0 0 0;
  background-color:#fff;
  border-radius:10px;
}

.in_box .picture .lazy {
  aspect-ratio:345/134;
  border-radius:10px;
}

.in_box .picture img {
  width:100%;
  height:100%;
  border-radius:10px;
}

/*///////////////// ユニウェブ ////////////////*/
.accessibility--FIH .category-icon .uniweb--itt-text,.accessibility--FITT .category-button span.uniweb--itt-text{
  font-size: .7rem;
}

.accessibility--FIH .event-categories .category-icon .uniweb--itt-text,.accessibility--FITT .event-categories .category-icon .uniweb--itt-text{
  color: #A48B78; 
  font-size: .7em;
}
.accessibility--FIH .category-button:hover span.uniweb--itt-text,.accessibility--FIH .category-button.active span.uniweb--itt-text,.accessibility--FITT .category-button:hover span.uniweb--itt-text,.accessibility--FITT .category-button.active span.uniweb--itt-text{
  position: absolute;
}