.company h1 {
  background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .company::before {
    background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
    background-size: cover;
  }
  .company h1 {
	background: none;
  }
}

.list01 {
  display: flex;
  margin-right: auto;
  margin-top: 75px;
  margin-bottom: 75px;
  margin-left: auto;
  width: 756px;
}

@media only screen and (max-width: 767px) {
  .list01 {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 92%;
    border-bottom: 1px solid #aa926c;
  }
  .list01:after {
    content: " ";
    display: block;
    clear: both;
  }
}

.list01 li {
  width: 252px;
  background: #dedede;
  border-right: 2px solid #fff;
  font-size: 1.3rem;
  letter-spacing: 0.23em;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .list01 li {
    width: 25%;
    font-size: 0.95rem;
    letter-spacing: 0;
  }
}

.list01 li:hover {
  opacity: 0.7;
}

.list01 li a {
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #5a5a5a;
}

.list01 .act {
  background: #aa926c;
}

.list01 .act a {
  color: #fff;
}

.main h2 {
  margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
  .main h2 {
    margin-bottom: 10px;
  }
}

.main h2 span {
  display: block;
  text-align: center;
}

.main h2 .txt01 {
  margin-bottom: 10px;
  font-size: 2.8rem;
  font-style: italic;
  letter-spacing: 0.15em;
}

@media only screen and (max-width: 767px) {
  .main h2 .txt01 {
    font-size: 1.5rem;
    letter-spacing: 0.15em;
  }
}

.main h2 .txt02 {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

@media only screen and (max-width: 767px) {
  .main h2 .txt02 {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
  }
}

.company .defListMainBox {
  margin-right: auto;
  margin-bottom: 75px;
  margin-left: auto;
  width: 830px;
}

@media only screen and (max-width: 767px) {
  .company .defListMainBox {
    margin-bottom: 30px;
    padding-right: 4%;
    padding-left: 4%;
    width: 100%;
  }
}

.company .defListMainBox dl {
  display: table;
  width: 100%;
  border-bottom: 1px solid #4a4a4a;
}

.company .defListMainBox dl.last {
  border-bottom: 0;
}

.company .defListMainBox dt {
  display: table-cell;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 35px;
  width: 260px;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
}

@media only screen and (max-width: 767px) {
  .company .defListMainBox dt {
    padding-left: 5px;
    width: 23.80952%;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.company .defListMainBox dd {
  display: table-cell;
  padding-top: 18px;
  padding-bottom: 18px;
  width: 570px;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  line-height: 150%;
}

@media only screen and (max-width: 767px) {
  .company .defListMainBox dd {
    padding-left: 5px;
    padding-right: 5px;
    width: 76.19048%;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

.company .defListMainBox dd a:hover {
  opacity: 0.7;
}

.company .defListMainBox dd .blank::after {
  content: '';
  display: inline-block;
  margin-left: 15px;
  padding-top: 16px;
  width: 20px;
  height: 0;
  background:url("/corporate/common/images/ico_window_01.png") right center no-repeat;
}

@media only screen and (max-width: 767px) {
  .company .defListMainBox dd .blank::after {
    margin-left: 5px;
    padding-top: 8px;
    width: 10px;
    background:url("/corporate/common/images/ico_window_01.png") left center no-repeat;
    background-size: contain;
  }
}

.company .defListMainBox li {
  margin-top: 15px;
}

.company .defListMainBox li.first {
  margin-top: 0;
}

.company .sec {
  margin-right: auto;
  margin-left: auto;
  width: 92%;
}

.company .sec h3 {
  margin-bottom: 40px;
  text-align: center;
}

.company .sec h3 span {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid #2e1813;
  font-size: 1.9rem;
  letter-spacing: 0.2em;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .company .sec h3 span {
    font-size: 1.25rem;
  }
}

.company .sec01 {
  margin-bottom: 55px;
}

.company .sec01 p {
  margin-right: auto;
  margin-left: auto;
  width: 944px;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .company .sec01 p {
    width: 100%;
    font-size: 1rem;
  }
}

.company .sec01 .imgBox {
  margin-bottom: 20px;
  text-align: center;
}

.company .sec02 .secIn {
  margin-right: auto;
  margin-bottom: 75px;
  margin-left: auto;
  width: 910px;
}

@media only screen and (max-width: 767px) {
  .company .sec02 .secIn {
    margin-bottom: 30px;
    width: 100%;
  }
}

.company .sec02 dl {
  width: 100%;
}

.company .sec02 dl:after {
  content: " ";
  display: block;
  clear: both;
}

.company .sec02 dt {
  margin-bottom: 15px;
  font-size: 2.1rem;
  letter-spacing: 0.1em;
}

@media only screen and (max-width: 767px) {
  .company .sec02 dt {
    margin-bottom: 10px;
    font-size: 1.5rem;
  }
}

.company .sec02 dd {
  float: left;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  line-height: 1.75;
}

@media only screen and (max-width: 767px) {
  .company .sec02 dd {
    float: none;
    margin-bottom: 30px;
    font-size: 1.2rem;
  }
}

.company .sec02 dd.first {
  max-width: 320px;
  margin-right: 30px;
}

.company .sec02 dd.first img{
  max-width: 320px;
}
@media only screen and (max-width: 767px) {
  .company .sec02 dd.first {
    margin-right: 0;
  }
}

.company .sec02 .imgBox {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .company .sec02 .imgBox {
    margin-bottom: 10px;
  }
  .company .sec02 .imgBox img {
    width: 100%;
  }
}

.company .sec02 .mapBox {
  position: relative;
  margin-bottom: 20px;
  padding-top: 310px;
  width: 550px;
  height: 0;
}

@media only screen and (max-width: 767px) {
  .company .sec02 .mapBox {
    margin-bottom: 10px;
    padding-top: 285px;
    width: 100%;
  }
}

.company .sec02 .mapBox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.company .sec02 li {
  letter-spacing: 0.16em;
}

/*
history
*/
.history {
  background:url("/corporate/company/images/history_ill_01.png") center top no-repeat fixed;
  background-size: contain;
}

.history h1 {
  background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .history::before {
    background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
    background-size: cover;
  }
.history h1 {
	background: none;
}
}

.history .mainIn {
  background-color: transparent;
}

@media only screen and (max-width: 767px) {
  .history .mainIn {
    background: #fff;
  }
}



@media only screen and (max-width: 767px) {
  .history .historyBox {
    margin-right: auto;
    margin-left: auto;
    width: 87.34177%;
  }
}

.history .historyBox ol {
  margin-right: auto;
  margin-left: auto;
  width: 1100px;
}

@media only screen and (max-width: 767px) {
  .history .historyBox ol {
    width: 100%;
  }
}

.history .historyBox li {
  position: relative;
  margin-bottom: 30px;
  min-height: 210px;
  font-size: 2.2rem;
  letter-spacing: 0.07em;
  text-align: center;
}

.history .historyBox .long {
  min-height: 350px;
}

.history .historyBox .short {
  min-height: 50px;
}

/* line */
.history .historyBox li.line::before,
.history .historyBox li.line::after {
	content: "";
	position: absolute;
	display: block;
    top: 44px;
    height: calc(100% - 40px);
    width: 1px;
	background-color: #2e1813;
    left: 50%;
    transition: 1s linear all;
}

.history .historyBox li.line::after {
    background-color: #d2cdcc;
	clip: rect(0px,1100px,210px,0);
}
.history .historyBox li.long::after {
	clip: rect(0px,1100px,350px,0);
}

.history .historyBox li.line02::before,
.history .historyBox li.line02::after { height: calc(200% - 10px); transition: 1s linear all;}
.history .historyBox li.line03::before,
.history .historyBox li.line03::after { height: calc(300% + 20px); transition: 1.5s linear all;}
.history .historyBox li.line04::before,
.history .historyBox li.line04::after { height: calc(400% + 50px); transition: 2s linear all;}
.history .historyBox li.line05::before,
.history .historyBox li.line05::after { height: calc(500% + 80px); transition: 2.5s linear all;}
.history .historyBox li.line06::before,
.history .historyBox li.line06::after { height: calc(600% + 110px); transition: 3s linear all;}
.history .historyBox li.line07::before,
.history .historyBox li.line07::after { height: calc(700% + 140px); transition: 3.5s linear all;}
.history .historyBox li.line07-2022::before,
.history .historyBox li.line07-2022::after { height: calc(700% - 10px); transition: 3.5s linear all;}

.history .historyBox li.line02::after { clip: rect(0px,1100px,430px,0); }
.history .historyBox li.line03::after { clip: rect(0px,1100px,670px,0); }
.history .historyBox li.line04::after { clip: rect(0px,1100px,910px,0); }
.history .historyBox li.line05::after { clip: rect(0px,1100px,1150px,0); }
.history .historyBox li.line06::after { clip: rect(0px,1100px,1390px,0); }
.history .historyBox li.line07::after { clip: rect(0px,1100px,1630px,0); }
.history .historyBox li.line07-2022::after { clip: rect(0px,1100px,1630px,0); }

.history .historyBox li.active::after { clip: rect(210px,1100px,210px,0); }
.history .historyBox li.long.active::after { clip: rect(350px,1100px,350px,0); }
.history .historyBox li.line02.active::after { clip: rect(430px,1100px,430px,0); }
.history .historyBox li.line03.active::after { clip: rect(670px,1100px,670px,0); }
.history .historyBox li.line04.active::after { clip: rect(910px,1100px,910px,0); }
.history .historyBox li.line05.active::after { clip: rect(1150px,1100px,1150px,0); }
.history .historyBox li.line06.active::after { clip: rect(1390px,1100px,1390px,0); }
.history .historyBox li.line07.active::after { clip: rect(1630px,1100px,1630px,0); }
.history .historyBox li.line07-2022.active::after { clip: rect(1630px,1100px,1630px,0); }

/* point */
.history .historyBox li > span{
	position: relative;
}
.history .historyBox li > span::before ,
.history .historyBox li > span::after {
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #d2cdcc;
	border-radius: 50%;
	left: 50%;
	margin-left: -2px;
}
.history .historyBox li > span::before { top: 47px; transition-delay: 0s; }
.history .historyBox li > span::after { bottom: -190px; transition-delay: 0.8s; z-index: 10; }
.history .historyBox li.long > span::after { bottom: -330px; transition-delay: 1s;}
.history .historyBox li.line02 > span::after { bottom: -430px; transition-delay: 1s;}
.history .historyBox li.line03 > span::after { bottom: -670px; transition-delay: 1.5s;}
.history .historyBox li.line04 > span::after { bottom: -910px; transition-delay: 2s;}
.history .historyBox li.line05 > span::after { bottom: -1150px; transition-delay: 2.5s;}
.history .historyBox li.line06 > span::after { bottom: -1390px; transition-delay: 3s;}
.history .historyBox li.line07 > span::after { bottom: -1630px; transition-delay: 3.5s;}
.history .historyBox li.line07-2022 > span::after { bottom: -1480px; transition-delay: 3.5s;}

.history .historyBox li.active > span::before{
	background-color: #2e1813;
}
.history .historyBox li.active > span::after{
	background-color: #2e1813;
}


@media only screen and (max-width: 767px) {
  .history .historyBox li {
    margin-bottom: 50px;
    font-size: 1.5rem;
    text-align: left;
  }
  .history .historyBox li.line::before,
  .history .historyBox li.line::after {
	left: 21px;
	top: 46px;
	height: calc(100% - 50px);
  }
.history .historyBox li.line02::before,
.history .historyBox li.line02::after { height: calc(200% - 20px); }
.history .historyBox li.line03::before,
.history .historyBox li.line03::after { height: calc(300% + 10px); }
.history .historyBox li.line04::before,
.history .historyBox li.line04::after { height: calc(400% + 40px); }
.history .historyBox li.line05::before,
.history .historyBox li.line05::after { height: calc(500% + 70px); }
.history .historyBox li.line06::before,
.history .historyBox li.line06::after { height: calc(600% + 100px); }


}



.history .historyBox dl {
  position: absolute;
  margin-top: -25px;
  width: 450px;
}

.history .historyBox .right dl {
  right: 0;
}

.history .historyBox .left dl {
  left: 0;
}

.history .historyBox dt {
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  background: #2e1813;
  width: 60px;
  font-size: 1.4rem;
  letter-spacing: 0.14rem;
  text-align: center;
  color: #fff;
  opacity: 0;
}

.history .historyBox .left dt {
  margin-right: 0;
  margin-left: auto;
}

.history .historyBox dd {
  opacity: 0;
}

.history .historyBox .left dd {
  text-align: right;
}

.history .historyBox p {
  margin-bottom: 10px;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  line-height: 1.57143;
}

.history .historyBox .left p {
  text-align: right;
}

.history .historyBox p span {
  display: block;
  font-size: 1.2rem;
}

.history .historyBox .left p span {
  text-align: right;
}




.fubox.active dt {
  opacity: 1;
  -webkit-animation: fadeInRight .5s ease-out;
  animation: fadeInRight .5s ease-out;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1s !important;
  animation-delay: 1s !important;
}
.fubox.active dd {
  opacity: 1;
  -webkit-animation: fadeInRight .5s ease-out;
  animation: fadeInRight .5s ease-out;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.5s !important;
  animation-delay: 1.5s !important;
}
.fubox.active.left dt,
.fubox.active.left dd {
  -webkit-animation: fadeInLeft .5s ease-out;
  animation: fadeInLeft .5s ease-out;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@keyframes fadeInRight {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeInLeft {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

.delay01 {
  -webkit-animation-delay: 0.1s !important;
  animation-delay: 0.1s !important;
}

.delay02 {
  -webkit-animation-delay: 0.2s !important;
  animation-delay: 0.2s !important;
}

.delay03 {
  -webkit-animation-delay: 0.3s !important;
  animation-delay: 0.3s !important;
}

.delay04 {
  -webkit-animation-delay: 0.4s !important;
  animation-delay: 0.4s !important;
}

.delay05 {
  -webkit-animation-delay: 0.5s !important;
  animation-delay: 0.5s !important;
}



@media only screen and (max-width: 767px) {
  .history .historyBox li.line01 {
    background:url("/corporate/company/images/history_line_01.png") 15px 40px no-repeat;
  }
.history .historyBox li.line01::before,
.history .historyBox li.line01::after {
	content: none;
}

  .history .historyBox dl {
    margin-top: -15px;
    width: 80%;
  }

  .history .historyBox .left dl {
    right: 0;
    left: auto;
  }

  .history .historyBox dt {
    font-size: 1.2rem;
  }

  .history .historyBox .left dt {
    margin-right: auto;
    margin-left: 0;
  }

  .history .historyBox .left dd {
    text-align: left;
  }

  .history .historyBox p {
    font-size: 1.2rem;
  }

  .history .historyBox .left p {
    text-align: left;
  }

  .history .historyBox .left p span {
    text-align: left;
  }


.fubox.active.right dt,
.fubox.active.right dd,
.fubox.active.left dt,
.fubox.active.left dd {
  -webkit-animation: fadeInUp .5s ease-out;
  animation: fadeInUp .5s ease-out;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0 !important;
  animation-delay: 0 !important;
}

}


/*
電子公告
*/
.settlement h1 {
  background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .settlement::before {
    background:url("/corporate/company/images/index_mv_01.jpg") center top no-repeat;
    background-size: cover;
  }
  .settlement h1 {
	background: none;
  }
}

.settlement .defListMainBox {
  margin-right: auto;
  margin-bottom: 75px;
  margin-left: auto;
  width: 830px;
}

@media only screen and (max-width: 767px) {
  .settlement .defListMainBox {
    margin-bottom: 30px;
    padding-right: 4%;
    padding-left: 4%;
    width: 100%;
  }
}

.settlement .listWrap{
	margin-bottom: 50px;
}
.settlement .defListMainBox h3{
	font-size: 28px;
	font-weight: normal;
	margin-bottom: 30px;
}

.settlement .defListMainBox dl{
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	font-weight: normal;
}

.settlement .defListMainBox dt{
	font-size: 15px;
	padding-right: 60px;
	font-weight: normal;
}

.settlement .defListMainBox dd{
	font-weight: normal;
}

.settlement .defListMainBox dd span.label{
	display: inline-block;
	background-color: #D91C1C;
	color: #fff;
	line-height: 100%;
	padding: 4px 8px;
	margin-right: 15px;
	font-size: 12px;
	font-weight: normal;
}

.settlement .defListMainBox dd span.size{
	padding-left: 20px;
	font-weight: normal;
}

.settlement .defListMainBox dd a:hover{
	text-decoration: underline;
}

@media only screen and (max-width: 767px) {

.settlement .listWrap{
	margin-bottom: 0;
	padding: 35px 0;
}

.settlement .listWrap.denshi{
	border-bottom: 1px solid #3C1E00;
}

.settlement .defListMainBox h3{
	font-size: 20px;
	text-align: center;
}

.settlement .defListMainBox dl{
	display: block;
	margin-bottom: 25px;
}

.settlement .defListMainBox dt{
	font-size: 12px;
	margin-bottom: 5px;
}

.settlement .defListMainBox dd{
	display: flex;
	align-items: flex-start;
}

.settlement .defListMainBox dd span.label{
	display: inline-block;
	font-size: 10px;
	width: 38px;
}

.settlement .defListMainBox dd a{
	font-size: 13px;
	display: inline-block;
}

.settlement .defListMainBox dd span.size{
	font-size: 10px;
	padding-left: 0;
}


}