﻿html {
  font-size: calc(10 * (100vw / 375));
}

body {
  background: var(--bgColor);
	font-family: var(--baseFont);
	font-weight: 400;
  color: var(--black);
  font-size: 1.4rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.05em;
}

img{
  display: block;
  max-width: 100%;
}

/**************************************
wrap
**************************************/
#wrap{
	width: 100%;
  padding: 6rem 0 0;
	margin: 0 auto;
}

#wrap.lock,
#wrap.spLock{
	position: fixed;
	overflow: hidden;
	top: 0;
}



/**************************************
#header
**************************************/
#header{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 2.4rem;
	width: 100%;
  height: 6rem;
  padding: 0 1.5rem;
  margin: 0 auto;
  background: #FFFFFF;
  border-bottom: 1px solid #E2DCD0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

#header .headLogo{
  display: block;
  width: 18rem;
}

#header .headLogo > a{
  display: block;
  width: 100%;
}

#header .headLogo img{
  display: block;
  width: 100%;
  height: auto;
}

/** headNav **************/
#headNav{
  display: block;
  width: 3rem;
  height: 100%;
  position: relative;
}

#headNav > .openBtn{
  display: block;
  width: 3rem;
  height: 2rem;
  position: absolute;
  right: 0;
  top: 1.8rem;
  z-index: 10;
}

#headNav > .openBtn > span,
#headNav > .openBtn::before,
#headNav > .openBtn::after{
  content: '';
  display: block;
  width: 90%;
  height: 2px;
  background: var(--gray);
  position: absolute;
  left: 5%;
  transition: all 0.3s ease; 
}

#headNav > .openBtn > span{ top: calc(50% - 1px);}
#headNav > .openBtn::before{top: 0;}
#headNav > .openBtn::after{bottom: 0;}

#headNav > .openBtn.open > span{opacity: 0;}
#headNav > .openBtn.open::before{
  transform: rotate(45deg);
  top: calc(50% - 1px);
}
#headNav > .openBtn.open::after{
  transform: rotate(-45deg);
  top: calc(50% - 1px);
}


/** .navBox ****************/
#headNav > .headNavInner{
  display: block;
  height: calc(100dvh - 6rem);
  width: 100%;
  padding: 0 0 8rem;
  background: #FFFFFF;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  position: fixed;
  top: 6rem;
  right: 0;
  z-index: -1;
  transition: transform 0.3s ease,opacity 0.2s ease;
  transform: translate(100%,0);
  backface-visibility: hidden;
  pointer-events: none;
}

#headNav > .openBtn.open + .headNavInner{
  z-index: 2;
  opacity: 1;
  transform: translate(0,0);
  pointer-events: auto;
}


#headNav ul.glNav{
  display: block;
}

#headNav ul.glNav > li{
  position: relative;
  border-bottom: 1px solid var(--lineColor);
}

#headNav ul.glNav > li > a,
#headNav ul.glNav > li > span{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 0.4rem;
  padding: 1.6rem 2rem;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  color: var(--black);
  cursor: pointer;
}

#headNav ul.glNav > li > a:not([target="_blank"])::after{
  content: '';
  display: block;
	width: 0.6rem;
	height: 0.6rem;
  margin-right: 0.3rem;
	border-top: 1px solid var(--gray);
	border-right: 1px solid var(--gray);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#headNav ul.glNav > li > a[target="_blank"]::after{
  content: '↗';
  display: block;
  color: var(--gray);
}


#headNav ul.glNav > li > ul{
  display: block;
  background: var(--bgColor);
  border-top: 1px solid var(--lineColorSoft);
}

#headNav ul.glNav > li > ul > li{
  display: block;
  font-size: 1.2rem;
  border-top: 1px solid var(--lineColorSoft);
}
#headNav ul.glNav > li > ul > li > a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  text-align: left;
}
#headNav ul.glNav > li > ul > li > a::after{
  content: '';
  display: block;
	width: 0.6rem;
	height: 0.6rem;
  margin-right: 0.3rem;
	border-top: 1px solid var(--gray);
	border-right: 1px solid var(--gray);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}



#headNav > .navBox > .shopBtn{
  order: 3;
  display: block;
  width: 258px;
}


/**************************************
footer
**************************************/
#footer{
  display: block;
	width: 100%;
  padding: 4rem 0 2rem;
  margin: 0 auto;
  background: rgb(43, 33, 29);
  color: #FFFFFF;
}

#footer .footNavBlock{
  display: block;
  width: 100%;
  padding: 0 1.5rem 4rem;
}


#footer .outLine{
  display: block;
  width: 100%;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(169, 158, 149,.6);
  position: relative;
}


#footer .footLogo{
  display: block;
  width: 16rem;
  margin: 0 auto 1rem;
}


#footer .footLogo > a,
#footer .footLogo img{
  display: block;
  width: 100%;
  height: auto;
}
#footer .footLogo img{
  filter: brightness(0) invert(1);
  opacity: 0.95;
}


#footer .outLine .lede{
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgb(169, 158, 149);
  text-align: center;
}


#footer .footNav{
  display: block;
  width: 100%;
  margin-top: 2rem;
}

#footer .footNav > dl{
  display: block;
  width: 100%;
  padding: 0 1.5rem 0 1.5rem;
}
#footer .footNav > dl + dl{
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(169, 158, 149,.6);
}

#footer .footNav > dl > dt{
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: rgb(169, 158, 149);
}

#footer .footNav > dl > dd{
  display: block;
}

#footer .footNav > dl > dd > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem 4rem;
}

#footer .footNav > dl > dd > ul > li{
  display: block;
  width: calc(50% - 2rem);
}
#footer .footNav > dl > dd > ul > li > a{
  font-size: 1.2rem;
  line-height: 1.4;
}

#footer .footNav > dl > dd > dl{display: block;}
#footer .footNav > dl > dd > dl + dl{margin-top: 1.8rem;}

#footer .footNav > dl > dd > dl > dt{
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
}
#footer .footNav > dl > dd > dl > dd{
  font-size: 1.2rem;
  color: rgb(169, 158, 149);
  line-height: 1.4;
}


#footer .footNav a[target="_blank"]::after{
  content: '↗';
  display: inline-block;
  margin-left: 0.2rem;
}


#footer .footCoppyRightBlock{
  display: block;
  padding: 2.2rem 1.5rem 0;
  border-top: 1px solid rgb(70, 58, 52);
}

#footer .footCoppyRightBlock .labels{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0 1.4rem;
}

#footer .footCoppyRightBlock .labels > li{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6.4rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

#footer .footCoppyRightBlock .labels > li > img{
  display: block;
  width: auto;
  height: 100%;
}

#footer .footCoppyRightBlock .labels > li.pmark{
  border-radius: 4px;
  background: #FFFFFF;
}

#footer .footCoppyRightBlock .labels > li.pmark ＞ img{
  height: calc(100% - 0.6rem);
}

#footer .footCoppyRightBlock .labels > li.link{white-space: nowrap;}

#footer .footCoppyRightBlock .labels > li > a[target="_blank"]::after{
  content: '↗';
  display: inline-block;
  margin-left: 0.2rem;
}


#footer .footCopy{
  font-size: 1.2rem;
  color: rgb(169, 158, 149);
  letter-spacing: 0.04em;
  text-align: center;
}


/**************************************
#main
**************************************/
#main{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 6rem;
  background: #FFFFFF;
}



/**************************************
Breadcrumb
**************************************/
[aria-label="Breadcrumb"]{
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0 2rem;
}

[aria-label="Breadcrumb"] > ol{
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 1.0rem;
  width: 100%;
  /*padding: 0 var(--contentsPadding);*/
  padding: 0 var(--contentsPadding);
  margin: 0 auto;
  color: var(--lightGray);
}

[aria-label="Breadcrumb"] > ol > li{
  display: inline-flex;
}
[aria-label="Breadcrumb"] > ol > li:not(:nth-last-of-type(1))::after{
  content: '/';
  padding: 0 0.8rem;
}
[aria-label="Breadcrumb"] > ol > li > a{
  border-bottom: 1px solid var(--lineColor);
}


/**************************************
headingArea
**************************************/
#main .headingArea{
  display: block;
  width: 100%;
  padding: 0 var(--contentsPadding);
}

#main .headingArea h1{
  font-family: var(--titleFont);
  font-weight: 600;
  line-height: 1.45;
  font-size: 2.4rem;
}

#main .headingArea .lede{
  display: block;
  font-size: 1.4rem;
  color: var(--gray);
  margin-top: 1.4rem;
  line-height: 1.8;
}


#main .headingArea .tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1rem;
  margin-bottom: 2rem;
}
#main .headingArea .tags > li{
  font-size: 1.0rem;
  color: var(--lightGray);
  letter-spacing: 0.04em;
}
#main .headingArea .tags > li:not(:nth-of-type(1))::before{
  content: '｜';
  padding:0 0.2em;
}
#main .headingArea .tags > li.data > a{ text-decoration: underline;}


#main .headingArea .update{
  display: block;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color:  var(--lightGray);
}
#main .headingArea .update > time{}

#main .headingArea .mainPoints{
  border-left: 2px solid var(--yellow);
  background: var(--bgColor);
  padding: 2rem 1.5rem;
  margin-top: 2rem;
}

#main .backArticleLink{
  font-size: 1.2rem;
  color: var(--lightGray);
  margin-top: 1.4rem;
}
#main .backArticleLink a{
  border-bottom: 1px solid var(--lineColor);
  text-decoration: none;
}

/**************************************
mainPoints
**************************************/
.mainPoints{}

.mainPoints > .ttl{
  font-family: var(--titleFont);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.mainPoints > ul{
  display: block;
  padding-left: 1.6em;
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--gray);
  position: relative;
  
  list-style-type: disc;
}
.mainPoints > ul > li{
  display: list-item;
}
.mainPoints > ul > li + li{margin-top: 0.5em;}

/**************************************
reportInfo
**************************************/
.reportInfo{
  display: block;
  width: 100%;
}
.reportInfo:not(:nth-child(1)){
  margin-top: 2rem;
}

.reportInfo figure{
  display: block;
}
.reportInfo figure figcaption:nth-last-child(1){
  display: block;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  color: var(--lightGray);
}

/**************************************
referencePDF
**************************************/
.referencePDF{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.2rem;
  width: 100%;
  border: 1px solid var(--lineColor);
  background: #FFFFFF;
  padding: 1.5rem 1.5rem;
}
.referencePDF:not(:nth-child(1)){
  margin-top: 3rem;
}

.referencePDF figure{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 6rem;
  border: 1px solid var(--lineColor);
  background: var(--bgColor);
  font-size: 1.2rem;
}

.referencePDF .referenceData{
  flex: 1;
  min-width: 22rem;
}
.referencePDF .referenceData > dl{display: block;}
.referencePDF .referenceData > dl > dt{
  display: block;
  font-family: var(--titleFont);
  font-size: 1.4rem;
}
.referencePDF .referenceData > dl > dd{
  display: block;
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: var(--lightGray);
}

.referencePDF .downloadBtn{
  flex: none;
  width: 100%;
}

.referencePDF .downloadBtn > a{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--black);
  padding: 1rem 2.2rem;
  text-decoration: none;
  font-size: 1.4rem;
  background: var(--yellow);
  color: var(--black);
}


/**************************************
articleBlock
**************************************/
.articleBlock{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: calc(760px + var(--contentsPadding) * 2);
  padding: 0 var(--contentsPadding);
  margin: 0 auto;
}

#main .articleBlock > *{
  order: 2;
}

#main .articleBlock > .headingArea{
  padding-left: 0;
  padding-right: 0;
}

/**************************************
articleMain
**************************************/
#main .articleMain{
  display: block;
  width: 100%;
}

#main .articleMain > section{
  padding: 3rem 0 2rem;
}


#main .articleMain.contentsPage{
  padding-top: 3rem;
}

#main .articleMain.contentsPage > section{
  padding: 3rem var(--contentsPadding) 3rem;
  border-top: 1px solid var(--lineColorSoft);
}

#main .articleMain > section a{text-decoration: underline;}

#main .articleMain > section h2{
  display: block;
  border-bottom: 1px solid var(--lineColor);
  padding-bottom: 0.8rem;
  font-family: var(--titleFont);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.45;
}

#main .articleMain > section h2.innerH2{
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.6rem;
}

#main .articleMain > section h3{
  display: block;
  font-family: var(--titleFont);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.45;
}
#main .articleMain > section h3 > span{
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--baseFont);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gray);
}


#main .articleMain > section p{
  color: var(--gray);
  line-height: 1.95;
}

#main .articleMain > section > *:not(:nth-child(1)){
  margin-top: 2rem;
}

#main .articleMain > section > section > *:not(:nth-child(1)){
  margin-top: 1.4rem;
}

/****/
#main .articleMain .borderBlock{
  border: 1px solid var(--lineColor);
  background: #FFFFFF;
  padding: 2.4rem 1.5rem;
}


/*********/
#main .articleMain .bgBlock{
  border: 1px solid var(--lineColor);
  background: var(--bgColor);
  padding: 2.4rem 1.5rem;
}

/*********/
#main .articleMain .columnBlock{
  display: block;
}

#main .articleMain .columnBlock > *{width: 100%;}
#main .articleMain .columnBlock > * + *{margin-top: 1rem;}

#main .articleMain .columnBlock h3{margin-bottom: 0.6rem;}
#main .articleMain .columnBlock p{
  font-size: 1.4rem;
}

/*********/
#main .articleMain .columnBlockThree{
  display: block;
}

#main .articleMain .columnBlockThree > *{width: 100%;}
#main .articleMain .columnBlockThree > * + *{margin-top: 1rem;}

#main .articleMain .columnBlockThree h3{margin-bottom: 1rem;}
#main .articleMain .columnBlockThree p{
  font-size: 1.4rem;
  line-height: 1.6;
}

/*********/
#main .articleMain .dataList{
  display: block;
}

#main .articleMain .dataList > *{width: 100%; }
#main .articleMain .dataList > * + *{margin-top: 1rem;}

#main .articleMain .dataList a{
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--lineColor);
  padding: 2.4rem 1.5rem;
  text-decoration: none;
  color: var(--block);
}

#main .articleMain .dataList time{
  font-size: 1.2rem;
  color: var(--lightGray);
}


#main .articleMain .dataList time{
  font-size: 1.2rem;
  color: var(--lightGray);
}

#main .articleMain .dataList dl{
  display: block;
}

#main .articleMain .dataList dl > dt{
  display: block;
  font-family: var(--titleFont);
  font-size: 1.6rem;
  margin: 0.6rem 0;
}

#main .articleMain .dataList dl > dd.lede{
  display: block;
  font-size: 1.4rem;
  color: var(--gray);
  line-height: 1.95;
}

#main .articleMain .dataList dl > dd.link{
  display: block;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: var(--gray);
  text-decoration: underline;
}

/*********/
#main .articleMain > section .underLink{
  font-size: 1.2rem;
  color: var(--lightGray);
  margin-top: 1.4rem;
}
#main .articleMain > section .underLink a{
  border-bottom: 1px solid var(--lineColor);
  text-decoration: none;
}

/* fig ***********/
#main .articleMain figure{
  display: block;
  width: 100%;
}
#main .articleMain figure + figure{
  padding-top: 2rem;
}

#main .articleMain figure > figcaption:nth-child(1){
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

#main .articleMain figure > figcaption:not(:nth-child(1)){
  display: block;
  font-size: 1.2rem;
  color: var(--lightGray);
  margin-top: 0.8rem;
}

#main .articleMain figure > figcaption > a{
  display: inline-block;
  margin: 0 0 0 2rem;
  white-space: nowrap;
}

#main .articleMain figure > figcaption.source{
  display: block;
  padding: 1.6rem;
  margin-top: 1.6rem;
  background: rgb(251, 249, 244);
  border: 1px solid var(--lineColor);
  font-size: 1.2rem;
  color: var(--gray);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
  overflow-x: auto;
}


/**************************************
table
**************************************/
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1.4rem;
}

th,td{
  border: 1px solid var(--lineColor);
  padding: 1rem 1.2rem;
  text-align: left;
  vertical-align: middle;
}
td.num,
th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

thead th{background:#F7F4EE;}

table.outlineTable th{
  width: 10rem;
}
table.outlineTable th,
table.outlineTable td{
  font-size: 1.2rem;
}

table.aboutTable th{
  width: 14rem;
  background:#F7F4EE;
}


table.taCenter th,
table.taCenter td{
  text-align: center;
}

table .fsBig{font-size: 1.6rem; font-weight: 600;}
table .cap{font-size: 1.2rem; color: var(--lightGray);}

/**************************************
editorPoint
**************************************/
.editorPoint{
  display: block;
  border: 1px solid var(--lineColor);
  padding: 2.4rem 1.5rem 2.4rem 1.5rem;
  position: relative;
}

.editorPoint figure{
  display: block;
  max-width: 4.6rem;
  min-width: 4.6rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--lineColor);
  position: absolute;
  left: 1.5rem;
  top: 2.6rem;
}

.editorPoint figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorPoint dl{
  display: block;
  width: 100%;
}

.editorPoint dl > dt{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.4rem 0;
  font-family: var(--titleFont);
  font-size: 1.6rem;
  padding-left: 5.5rem;
  margin: 0 0 0.8rem;
}

.editorPoint dl > dt > span{
  display: block;
  font-family: var(--baseFont);
  font-size: 1.2rem;
  color: var(--lightGray);
  font-weight: 400;
}

.editorPoint dl > dd.profile{
  font-size: 1.2rem;
  color: var(--lightGray);
}

.editorPoint dl > dd.comment{
  font-size: 1.4rem;
  color: var(--gray);
  line-height: 1.95;
  margin-top: 2rem;
}

.editorPoint dl > dd.supervisor{
  padding-top: 2rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--lineColorSoft);
}

.editorPoint dl > dd.supervisor > dl{ width: 100%;}
.editorPoint dl > dd.supervisor > dl > dt{margin-bottom: 0.2rem;}

.editorPoint dl > dd.supervisor > dl dd.supervisorDetail{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1rem;
  position: relative;
}

.editorPoint dl > dd.supervisor > dl dd.supervisorDetail > figure{
  top: -2.1rem;
  left: 0;
}

.editorPoint dl > dd.supervisor > dl dd.supervisorDetail > dl{
  display: block;
  position: relative;
}
.editorPoint dl > dd.supervisor > dl dd.supervisorDetail > dl > dt{
  font-size: 1.6rem;
  white-space: nowrap;
  padding-left: 5.5rem;
}
.editorPoint dl > dd.supervisor > dl dd.supervisorDetail > dl > dd{}


/**************************************
editarName
**************************************/
.editarName{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}

.editarName:not(:nth-child(1)){
  margin-top: 2rem;
}

.editarName > dl{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: left;
  color: var(--lightGray);
}

.editarName > dl > dt{font-weight: 400;}


/**************************************
quotationBlock
**************************************/
.quotationBlock{
  display: block;
  margin: 2rem auto 2rem;
  border: 1px solid var(--lineColor);
  background: var(--bgColor);
  padding: 2.8rem 1.5rem!important;
}
.quotationBlock .ttl{
  font-family: var(--titleFont);
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.quotationBlock > p{
  font-size: 1.4rem;
  color: var(--gray);
  line-height: 1.95;
  margin-bottom: 1.6rem;
}

.quotationBlock figure{}
.quotationBlock figure > figcaption{
  display: flex;
  font-size: 1.2rem;
  color: var(--lightGray);
  margin-bottom: 0.8rem;
}

.quotationBlock pre{
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--lineColor);
  padding: 1.4rem;
  font-size: 1.2rem;
  color: var(--gray);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.7;
}

.quotationBlock button{
  display: inline-flex;
  align-items: center;
  min-height: 3.8rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  white-space: nowrap;
  border: 1px solid var(--black);
  background: #FFFFFF;
  color: var(--black);
  cursor: pointer;
  transition: background .3s ease,color .3s ease;
}

@media (hover: hover) {
  .quotationBlock button:hover{
    color: #FFFFFF;
    background: var(--black);
  }
}


/**************************************
newsList
**************************************/
.newsListWrap{
  display: block;
  width: 100%;
  margin-top: 4rem;
  padding: 2rem var(--contentsPadding) 0;
  border-top: 1px solid var(--lineColorSoft);
}

.newsList{
  display: block;
}

.newsList > li{
  display: block;
  border-bottom: 1px solid var(--lineColorSoft);
}

.newsList > li > a,
.newsList > li > .outer{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  padding: 1.6rem 0;
  text-decoration: none!important;
}
.newsList > li > a[target="_blank"]::after{
  content: '↗';
  margin-left: -0.5rem;
}
.newsList > li:nth-of-type(1) > a{padding-top: 0;}

.newsList > li > .outer > time{
  display: block;
  width: 100%;
  color: var(--lightGray);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.newsListWrap .newsList > li > .outer > time{
  width: 50%;
}

.newsList > li > .outer > span{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 1.4rem;
  font-size: 1.0rem;
  color: var(--gray);
  border: 1px solid var(--lineColor);
  border-radius: 999px;
  white-space: nowrap;
  margin: 0 0 0 auto;
}

.newsList > li > .outer > p{
  display: block;
}

/**************************************
faqList
**************************************/
.faqList{display: block;}
.faqList > dl{
  display: block;
  border: 1px solid var(--lineColor);
  background: #FFFFFF;
}
.faqList > dl > dt{
  display: block;
  width: 100%;
  padding: 1.4rem 6rem 1.4rem 1.6rem;
  font-weight: 500;
  text-emphasis-position: right;
  position: relative;
  cursor: pointer;
  transition: opacity .3s ease;
}


@media (hover: hover) {
  .faqList > dl > dt:hover{
    opacity: .6;
  }
}

.faqList > dl > dt::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 0.9rem;
  background:url("../img/common/arrow_narrow_bottom_gray.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: calc(50% - 0.4rem);
  right: 1.6rem;
  transform-origin: center center;
  transition: transform .3s ease;
}
.faqList > dl.open > dt::after{
  transform: rotate(180deg);
}

.faqList > dl > dd{
  display: none;
  width: 100%;
  padding: 2rem 1.6rem 2rem 1.6rem;
  border-top: 1px solid var(--lineColorSoft);
  font-weight: 400;
}


.faqList > dl + dl{
  margin-top: 1rem;
}


/**************************************
articleAside
**************************************/
.articleAside{
  display: block;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--lineColor);
}

.articleAside .asideTTL{
  font-size: 1.4rem;
  color: var(--lightGray);
  margin-bottom: 1.6rem;
}

.articleAside ul{
  display: block;
}

.articleAside ul > li{
  display: block;
}
.articleAside ul > li + li{margin-top: 1rem;}

.articleAside ul > li > a{
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--lineColor);
  background: #FFFFFF;
  padding: 2.4rem;
  text-decoration: none;
  color: var(--black);
}

.articleAside ul > li > a > dl{display: block;}
.articleAside ul > li > a > dl > dt{
  font-family: var(--titleFont);
  font-size: 1.4rem;
}
.articleAside ul > li > a > dl > dd{
  font-size: 1.2rem;
  color: var(--lightGray);
  margin-top: 0.6rem;
}

/**************************************
reportTypeChange
**************************************/
.reportTypeChange{
  display: block;
  padding: 0 var(--contentsPadding);
  margin: 3rem 0 0;
}

.reportTypeChange > ul{
  display: inline-flex;
  border: 1px solid var(--lineColor);
  border-radius: 6px;
  overflow: hidden;
}

.reportTypeChange > ul > li{
  display: block;
}
.reportTypeChange > ul > li:nth-of-type(n + 1){
  border-left: 1px solid var(--lineColor);
}

.reportTypeChange > ul > li > a,
.reportTypeChange > ul > li > span{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.4rem;
  padding: 0 1.2rem 0 1.6rem;
  color: var(--gray);
}

.reportTypeChange > ul > li > span{
  background: var(--black);
  color: #FFFFFF;
}

/**************************************
listInfo
**************************************/
.listInfo{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.5rem var(--contentsPadding) 1.5rem;
}

.reportList .listInfo{padding-left: 0; padding-right: 0;}

.listInfo > p{
  margin: 0;
  font-size: 1.2rem;
  color: var(--lightGray);
}

.listInfo > p + p::before{
  content: '/';
  padding: 0 1rem;
}

.listInfo > p > span{
  font-weight: 700;
  color: var(--black);
}

/**************************************
reportList
**************************************/
.reportList{
  display: block;
  padding: 0 var(--contentsPadding);
}
.relatedColumn .reportList{padding-left: 0; padding-right: 0;}

.reportList > ul{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.4rem 1.4rem;
  flex-wrap: wrap;
}

.reportList > ul > li{
  display: block;
  width: calc((100% - 1.4rem * 1) / 2);
  border: 1px solid var(--lineColor);
}

.reportList > ul > li > a{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 0 0 1rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.reportList > ul > li > a > figure{
  order: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.reportList > ul > li > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.reportList > ul > li > a .ttl{
  order: 3;
  display: block;
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  width: 100%;
  padding: 0.4rem 1rem 0;
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  text-align: left;
  line-height: 1.4;
  font-weight: 600;
}
.relatedColumn .reportList > ul > li > a .ttl{
  font-size: 1.2rem!important;
}

.reportList > ul > li > a .tags{
  order: 2;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.2rem 0.2rem;
  width: 100%;
  padding: 0.8rem 1rem 0;
}
.reportList > ul > li > a .tags > li{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.0rem;
  padding: 0.1rem 0.6rem 0.2rem;
  border: 1px solid var(--lineColor);
  border-radius: 6px;
  color: var(--lightGray);
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}


.reportList > ul > li > a .itemBottom{
  order: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem 0;
  color: var(--lightGray);
  font-size: 1.2rem;
}

.reportList > ul > li > a .itemBottom time{
  text-align: left;
}
.reportList > ul > li > a .itemBottom span{
  display: none;
  text-align: right;
}


/**************************************
pageNationBlock
**************************************/
.pageNationBlock{
  display: block;
  padding: 4rem 0 0;
}

ul.page-numbers{
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
  width: 100%;
  gap: 0.8rem 0.8rem;
}

ul.page-numbers > li{
  display: block;
}

ul.page-numbers > li > a,
ul.page-numbers > li > span{
  min-width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lineColor);
  border-radius: 6px;
  font-size: 1.2rem;
  color: var(--gray);
  text-decoration: none!important;
  text-align: center;
  transition: background .3s ease, color .3s ease;
}


ul.page-numbers > li.prev,
ul.page-numbers > li.next{}

ul.page-numbers > li.prev > a,
ul.page-numbers > li.next > a{
  padding: 0 1.4rem;
}

ul.page-numbers > li.current > span{
  background: var(--black);
  color: #FFFFFF;
}

ul.page-numbers > li.dots > span{
  color: #6B6B6B;
  border: none;
}
ul.page-numbers > li.dots > span::after{content: '…';}


/**************************************
profileContents
**************************************/
.profileContents{
  display: block;
  padding: 0 var(--contentsPadding) 0 var(--contentsPadding);
  position: relative;
}

.profileContents h1{
  display: block;
  font-family: var(--titleFont);
  font-weight: 600;
  line-height: 1.45;
  font-size: 2.4rem;
  margin: 0 0 1.2rem;
}
.profileContents h1 > span{
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1.4rem;
  color: var(--lightGray);
}

.profileContents h2{
  display: block;
  font-family: var(--titleFont);
  font-size: 1.8rem;
  margin: 0 0 1rem;
  font-weight: 600;
}

.profileContents figure{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.4rem;
}

.profileContents figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profileContents .lede{
  font-size: 1.6rem;
  color: var(--gray);
  line-height: 1.8;
}

.profileContents section{
  padding-top: 2.4rem;
}
.profileContents section > p{
  font-size: 1.4rem;
  color: var(--gray);
  line-height: 1.95;
}

.articleMain.contentsPage .reportList{
  padding: 0 0;
}

#main .articleMain > section .reportList a{
  text-decoration: none;
}

/**************************************
troubleBox
**************************************/
.caution{
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
  color: var(--lightGray);
  line-height: 1.4;
}

.caution:not(:nth-child(1)){
  margin-top: 0.8rem;
}

/**************************************
numList
**************************************/
.numList{
  display: block;
  padding-bottom: 0.2rem;
}

.numList > li{
  display: block;
  padding-left: 2em;
  color: var(--gray);
  position: relative;
}

.numList > li + li{margin-top: 0.8em;}

.numList > li > span{
  position: absolute;
  left: 0;
  top: 0;
}

/**************************************
troubleBox
**************************************/
.troubleBox{
  display: block;
  padding-top: 0;
}

.troubleList{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1rem 1rem;
  padding-bottom: 6rem;
  position: relative;
}

.troubleList::after {
  content: '';
  display: block;
  width: 4rem;
  aspect-ratio: 1 / cos(60deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--lineColorSoft);
  transform: rotateX(180deg);
  transition: transform .3s ease;
  position: absolute;
  left: calc(50% - 2rem);
  bottom: 2rem;
}

.troubleList > li{
  display: flex;
  flex-shrink: 1;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;
  border: 1px solid var(--lineColor);
  border-radius: 18px;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.6;
}

.troubleList > li > span{
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}

.troubleBox > p{
  display: block;
  margin-bottom: 0;
  padding-bottom: 6rem;
  /*font-family: var(--titleFont);*/
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.6!important;
  text-align: center;
  position: relative;
}

.troubleBox > p::after {
  content: '';
  display: block;
  width: 4rem;
  aspect-ratio: 1 / cos(60deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--lineColorSoft);
  transform: rotateX(180deg);
  transition: transform .3s ease;
  position: absolute;
  left: calc(50% - 2rem);
  bottom: 2rem;
}

.troubleBox .bgBlock{
  text-align: center; 
}
.troubleBox .bgBlock strong{
  font-size: 1.6rem;
}

/**************************************
telework soci
**************************************/
.iconLinks{
  display: block;
}
.iconLinks:not(:nth-child(1)){margin-top: 1.5rem;}

.iconLinks > a{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem 1rem;
  color: var(--lightGray);
  font-size: 1.2rem;
}

.iconLinks > a > img{
  display: block;
  width: 10rem;
}

.iconLinks > a > span{
}

/**************************************
supervisorSiteList
**************************************/
ul.supervisorSiteList{display: block;}

ul.supervisorSiteList > li{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 0.8rem;
  color: var(--lightGray);
  font-size: 1.4rem;
}
ul.supervisorSiteList > li::before{
  content: '→';
  width: 1em;
}

ul.supervisorSiteList > li{
  text-align: left;
}
ul.supervisorSiteList > li + li{
  margin-top: 0.5rem;
}

ul.supervisorSiteList > li > a{
  max-width: calc(100% - 1em - 0.8rem);
  color: var(--lightGray);
  font-size: 1.4rem;
  text-decoration: underline;
}

/**************************************
contents404
**************************************/
#main .contents404{
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 4rem;
  padding-bottom: 8rem;
  position: relative;
}


#main .contents404 > h1{
  display: block;
  padding-bottom: 3rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #000000;
  position: relative;
}


#main .contents404 > .text{
  display: block;
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
}

#main .contents404 > .text a{
  color: #3889FF;
  text-decoration: underline;
}




/**************************************
orverRide
**************************************/
.pcView{display: none!important;}




