/*
font-family: "Noto Sans JP", sans-serif;
font-family: "Tomorrow", sans-serif;
*/
/*******************************************************************************
custom property
********************************************************************************/
:root {
  --tema-color:243 177 0;
}
/*******************************************************************************
indextitle
********************************************************************************/
#indexTitle{
    position: relative;
    /*background: url("../img/report_bg.webp") center ;*/
    background-size: cover;
    z-index: 0;
    padding-top: 5%;
    padding-bottom: 5%;
}
#indexTitle .titleWrap{
    position: relative;
    width: 50%;
}
#indexTitle .titleWrap::after{
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 150%;
    height: 150%;
    background: url("../img/title_img.webp") no-repeat left center /contain;
}
#indexTitle h1{
    font-size: 2em;
    margin-bottom: 0.5em;
}
#indexTitle h2{
    font-size: 1.2em;
}
#category::before{
    display: none;
}
#detaLoad{
    display: none;
}
/*--1000px以下------------------------------------*/
@media only screen and (max-width: 1000px) {
#indexTitle .titleWrap{
    width: 60%;
}
#indexTitle .titleWrap::after {
    width: 120%;
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#indexTitle .titleWrap{
    width: 100%;
}
#indexTitle .titleWrap::after {
    position: relative;
    left: 0;
    top: 0;
    transform: rotateY(0);
    padding-top: 50%;
    width: 100%;
}
}
/*******************************************************************************
reportList
********************************************************************************/
#reportList{
    position: relative;
    padding-top: 10%;
    padding-bottom: 10%;
    background: url("../img/report_bg.webp") center top;
}
#reportList::before{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 8%;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
#reportList #indexList .titleBox{
    position: relative;

    border-image: url(../img/report_corner.webp) 40 / 20px / 12px round;
    margin-bottom: 4em;
    box-shadow: 1px 1px 5px rgba(0 0 0 / 0.1);
}
#reportList #indexList .titleBox dt{
    flex-basis: 60%;
    max-width: 60%;
}

#reportList #indexList .titleBox dd{
    flex-basis: 67%;
    max-width: 67%;
    margin-left: -27%;
    padding:2% 4% 2% 20%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
#reportList #indexList .titleBox dd h3{
    margin: 0.5em 0 0.5em;
    font-size: 1.2em;
    flex-grow: 1;
    margin-left: 1em;
    max-width: calc(100% - 3em);
}
#reportList #indexList .titleBox dd .author{
    font-size: 0.9em;
    margin-bottom: 1em;
    flex-basis: 100%;
    max-width: 100%;
}
#reportList #indexList .titleBox dd .author br{
    display: none;
}
#reportList #indexList .titleBox dd .author strong{
    display: inline-block;
    margin-left: 1em;
}
#reportList #indexList .titleBox dd .topText{
    display: inline-block;
}
#reportList #indexList .titleBox .link a{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}

/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#reportList #indexList .titleBox dt,
#reportList #indexList .titleBox dd{
    flex-basis: 100%;
    max-width: 100%;
    margin: 0;
}
#reportList #indexList .titleBox dd{
    padding: 3% 5% 5% 5%;
}
#reportList #indexList .titleBox dd h3{
    margin: 0.5em 0;
}



}


/*******************************************************************************
detailTitle
********************************************************************************/
#detailTitle{
    background: url("../img/report_bg.webp") no-repeat center;
    background-size: cover;
    padding-top: 5%;
    padding-bottom: 8%;
}

#detailTitle h1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    margin-bottom:0.8em;
}
#detailTitle h1 strong{
    order: 2;
    font-size: 1.4em;
    font-weight: 600;
    display: inline-block;
}
#detailTitle h1 strong::before{
    content: "";
    display: inline-block;
    vertical-align: sub;
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.2em;
    background: url("../../common/img/title_icon_note.webp") no-repeat center top / contain;
}
#detailTitle h1 span{
    order: 1;
    font-size: 0.8em;
    flex-basis: 100%;
    color: rgb(var(--tema-color));
    font-weight: 400;
}
.titleBox{
    display: flex;
    flex-wrap: wrap;
    border-image: url("../img/report_corner.webp") 40 / 40px / 28px round;
    z-index: 0;
}
.titleBox .topText{
    display: none;
}
.titleBox dt{
    flex-basis: 74%;
    max-width: 74%;
    z-index: 0;
}
.titleBox dt img{
    width: 100%;
}
.titleBox dd{
    flex-basis: 50%;
    max-width: 50%;
    margin-left: -24%;
    padding: 4% 4% 4% 12%;
    background: #ffffff;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 99%);
    z-index: 1;
}
.titleBox .reportNo{
    display: inline-block;
    font-size: 2em;
    line-height: 1.2;
    font-weight: 600;
    color: #666;
    border-bottom: 4px solid rgb(var(--tema-color) / 0.8);
}
.titleBox .reportNo::before{
    content: "report";
    color: #CCC;
    font-size: 0.35em;
    display: block;
    font-weight: 400;
    margin-bottom: -0.5em;
}
.titleBox h2{
    display:block;
    margin: 1em 0 1.5em;
    font-size: 1.8em;
    line-height: 1.4;
}
.titleBox .author{
    text-align: right;
    font-size: 1.1em;
    
}

/*--1000px以下------------------------------------*/
@media only screen and (max-width: 1000px) {

.titleBox dt{
    position: relative;
    padding-top: 40%;
    overflow: hidden;
}
.titleBox dt img{
    position: absolute;
    top:0;
    left: 0;
    transform: translateX(-10%);
    width: auto;
    height: 100%;
    
}
.titleBox dd{
    flex-basis: 60%;
    max-width: 60%;
    margin-left: -34%;
    padding: 4% 5% 4% 16%;
}

}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#detailTitle h1{
    font-size: 6vw;
}
.titleBox{
    border-image:url("../img/report_corner.webp") 40 / 28px / 17px round
}
.titleBox dt{
    flex-basis:100%;
    max-width: 100%;
    padding: 0;
}
.titleBox dt img{
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: auto;
}
.titleBox dd{
    position: relative;
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0 5% 5% 5%;
    background-color: #FFF;
}
.titleBox h2{
    margin: 0.5em 0;
    font-size: 5.4vw;
}
.titleBox .reportNo{
    position: absolute;
    left: 5%;
    bottom: 100%;
}
.titleBox .author br{
    display: none;
}
.titleBox .author strong{
    display: inline-block;
    margin-left: 1em;
}
}

/*******************************************************************************
mainContents
********************************************************************************/
#mainContents{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
}
#mainContents #mainText{
    flex-basis: calc(100% - 260px);
    max-width: calc(100% - 260px);
    line-height: 1.8;
    letter-spacing: 0.05em;
}
#mainText h3{
    font-size: 1.7em;
    line-height: 1.4;
    margin: 1.5em 0 1em;
    padding: 0.5em 0;
    border-bottom: 4px solid rgb(var(--tema-color) / 0.8);
}
#mainText h4{
    font-size: 1.2em;
    line-height: 1.4;
    margin: 1.5em 0 0.5em;
    padding: 0 0 0 0.5em;
    border-left: 4px solid rgb(var(--tema-color) / 0.8);
}
#mainText [class^="photo"] dd h4{
    margin-top: 0;
}


#mainText > p{
    margin-bottom: 1em;
}
#mainText .photoright{
    flex-direction:row-reverse;
}
#mainText [class^="photo"]{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2em;
}
#mainText [class^="photo"] dt{
    flex-basis: 49%;
    max-width: 49%;
}
#mainText [class^="photo"] img{
    width: 100%;
}
#mainText [class^="photo"] dd{
    flex-basis:calc(50% - 1em);
    max-width: calc(50% - 1em);
}
#mainText .photodouble dt,
#mainText .photodouble dd{
    flex-basis: 49%;
    max-width: 49%;
    
}
#mainText .photofullsize{
    position: relative;
    padding-top: 40%;
    overflow: hidden;
}
#mainText .photofullsize img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}


#mainText .releaseDate{
    margin-top: 3em;
    text-align: right;
    color: #666;
}
#mainText .releaseDate::before{
    content: "";
    display: inline-block;
    width: 5em;
    height: 1px;
    background-color: #CCC;
    margin: 0 0.5em 0.3em 0;
}

#mainText .dataBox{
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: rgb(var(--tema-color) / 0.1);
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.2;
    font-size: 0.95em;
}
#mainText .dataBox dt{
    flex-basis: 8em;
    max-width: 8em;
    background-color: rgb(var(--tema-color) / 0.1);
    padding: 0.5em 1em;
    color: #333;
    border: 1px solid #CCC;
    border-right: 0;
    margin-top: -1px;
}
#mainText .dataBox dd{
    flex-basis: calc(100% - 8em);
    max-width: calc(100% - 8em);
    background-color: rgba(255,255,255,0.8);
    padding: 0.5em 1em;
    border: 1px solid #CCC;
    margin-top: -1px;
}
#mainText .toIndex{
    text-align: center;
    margin: 6% 10%;
}
#mainText .toIndex a{
    display: inline-block;
    padding: 0.5em 2em;
    border: 1px solid #999;
    border-radius: 2em;
    color: #666;
    min-width: 50%;
}
#mainContents #sideNavi{
    flex-basis: 230px;
    max-width:230px;
    background-color: rgb(var(--tema-color));
    padding: 1em;
    min-height: 50vh;
}
#sideNavi #thisNom{
    display: block;
    text-align: center;
    background-color: #FFF;
    padding: 1em;
    font-size: 1.1em;
    line-height: 1.2;
    color: #999;
}
#sideNavi #thisNom strong{
    display: block;
    font-size: 3em;
    color: #000;
}
#archiveList li{
    line-height: 1.4;
    border-bottom: 1px dashed #FFF;
}
#archiveList li a{
    display: block;
    color: #FFF;
    padding: 0.5em 0;
    font-weight: 500;
}
#archiveList li span{
    display: block;
    font-size: 0.9em;
    font-weight: 400;
}


/*--1000px以下------------------------------------*/
@media only screen and (max-width: 1000px) {
#mainContents #mainText {
    flex-basis: 100%;
    max-width: 100%;
}
#mainContents #sideNavi{
    flex-basis: 100%;
    max-width: 100%;
    min-height: inherit;
    margin-bottom: 10%;
}
#sideNavi #thisNom{
    display: none;
}

#sideNavi #archiveList{
    position: relative;
}
#sideNavi #archiveList::before{
    content: "Archive";
    display: inline-block;
    background-color: #e1fded;
    position: absolute;
    left: -0.5em;
    top: -2em;
    padding: 0.2em 1em;
    color: rgb(var(--tema-color));
    transform: rotate(-4deg);
}


#sideNavi #archiveList li span{
    display: inline-block;
    margin-right: 1em;
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
#mainText h3{
    font-size: 5vw;
}
#mainText [class^="photo"] dt{
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 0.5em;
}
#mainText [class^="photo"] dd{
    flex-basis: 100%;
    max-width: 100%;
}
#mainText .authorBox dt,
#mainText .authorBox dd{
    flex-basis: 100%;
    max-width: 100%;
    padding: 0.5em 0;
}
#mainText .authorBox dd{
    border-top: 1px solid rgb(var(--tema-color));
    border-left: 0;
    
}
#archiveList li span{
    display: block;
    margin-right: 0;
}
}