@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 400;
  src:url(../font/NotoSansCJKjp-Regular.otf) format('opentype'),
    url(../font/NotoSansCJKjp-Regular.ttf) format('truetype'),
    url(../font/NotoSansCJKjp-Regular.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: bold;
  font-weight: 700;
  src:url(../font/NotoSansCJKjp-Bold.otf) format('opentype'),
    url(../font/NotoSansCJKjp-Bold.ttf) format('truetype'),
    url(../font/NotoSansCJKjp-Bold.woff) format('woff');
}
body{
  font-family: YakuHanJP, 'Noto Sans Japanese',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  line-height: 1.5;/*android用*/
  -webkit-text-size-adjust: 100%;
}
body.open{
  height: 100%;
  overflow: hidden;
}
a{
  text-decoration: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.cms_wrap{
  max-width: 1440px;
  margin: auto;
  padding: 0 80px;
}
input{-webkit-tap-highlight-color:rgba(0,0,0,0);}
input[type="number"] {-moz-appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
  border-radius: 0;
}
select{appearance: none;}
select::-ms-expand{display: none;}
button,
select,
textarea{
  font-family: YakuHanJP, "Noto Sans Japanese", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  font-size: 1rem;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus,
input:focus,
button:focus,
textarea:focus,
select:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  outline: 0;
}
img{max-width: 100%;}


.zoomanim{animation: fadezoom 20s linear forwards;}
@keyframes fadezoom{
  0%{transform: scale(1);}
  100%{transform: scale(1.2);}
}


@keyframes borderwrite{
  0%{width: 0;}
  100%{width: 100%;}
}
@keyframes positionmove{
  0%{transform: translateX(-100px);}
  100%{transform: translate(0);}
}
@keyframes positionmoveback{
  0%{transform: translateX(100px) rotate(180deg);}
  100%{transform: translate(0) rotate(180deg);}
}
@keyframes bgpositionmove{
  0%{background-position: -100px center;}
  100%{background-position: center center;}
}




.cms_header{padding: 48px 0;}
.cms_header .cms_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cms_logo img{
  width: 146px;
  height: 47px;
}
.cms_nav ul{
  display: flex;
  align-items: center;
}
.cms_nav ul li{padding: 0 32px;}
.cms_nav ul li:nth-last-of-type(n+2) a{
  position: relative;
  padding: 8px 0;
  font-weight: 500;
  color: #000000;
}
.cms_nav ul li:nth-last-of-type(n+2) a::after{
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000000;
  transition: all 0.15s linear;
}
.cms_nav ul li:last-of-type a{
  display: inline-block;
  width: 162px;
  height: 48px;
  padding-top: 9px;
  color: #000000;
  text-align: center;
  border-radius: 24px;
  border: 1px solid #707070;
}





.cms_pagettl{
  max-width: 1280px;
  margin: auto;
  padding: 0 16px 96px;
}
.cms_pagettl h1{
  font-family: Roboto, YakuHanJP, 'Noto Sans Japanese',"Hiragino Sans";
  font-size: 5rem;
  font-weight: bold;
  color: #1F2022;
}
.cms_pagettl p{
  font-size: 1.125rem;
  font-weight: 500;
  color: #1F2022;
}



.cms_information{
  padding: 36px 0 128px;
  background-color: #F5F6F8;
}
.cms_infobody{
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}
.cms_leftnav{
  position: relative;
  width: 240px;
  padding-top: 56px;
}
.cms_leftnav div{
  position: sticky;
  top: 100px;
}
.cms_leftnav div h3{
  margin-bottom: 32px;
  font-family: Roboto, YakuHanJP, 'Noto Sans Japanese',"Hiragino Sans";
  font-size: 2rem;
  color: #1F2022;
}
.cms_leftnav div h3::after{
  content: "";
  display: block;
  width: 45px;
  margin-top: 12px;
  border-top: 1px solid #1F2022;
}
.cms_leftnav div ul li{
  position: relative;
  line-height: 1;
  font-weight: 500;
  font-size: 1.125rem;
  color: #8C8C8D;
  cursor: pointer;
  transition: all 0.2s linear;
}
.cms_leftnav div ul li:nth-last-of-type(n+2){margin-bottom: 24px;}
.cms_leftnav div ul li.active{
  padding-left: 20px;
  color: #1F2022;
}
.cms_leftnav div ul li.active a{color: #1F2022;}

.cms_leftnav div ul li::before{
  content: "";
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  left: 0;
  top: calc(50% - 6px);
  border-radius: 100%;
  background-color: #0086BE;
  opacity: 0;
}
.cms_leftnav div ul li.active::before{
  opacity: 1;
  transition: all 0.2s linear 0.2s;
}

.cms_leftnav div ul li a{
  color: #8C8C8D;
  transition: color 0.15s linear;
}

.cms_infolist{
  max-width: 1050px;
  width: calc(100% - 240px);
}
.cms_infolist ul li{
  padding: 56px 0;
  opacity: 0;
  transition: all 0.2s linear;
}
.cms_infolist ul li:nth-of-type(2){transition-delay: 0.15s;}
.cms_infolist ul li:nth-of-type(3){transition-delay: 0.3s;}
.cms_infolist ul li:nth-of-type(4){transition-delay: 0.45s;}
.cms_infolist ul li:nth-of-type(5){transition-delay: 0.6s;}
.cms_infolist ul li:nth-of-type(6){transition-delay: 0.75s;}
.cms_infolist ul li:nth-of-type(7){transition-delay: 0.9s;}
.cms_infolist ul li:nth-of-type(8){transition-delay: 1.05s;}
.cms_infolist ul.active li{opacity: 1;}
.cms_infolist ul li:nth-last-of-type(n+2){border-bottom: 1px solid #B1B1B1;}
.cms_infolist ul li a{
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.cms_infolist ul li a::after{
  content: "";
  position: absolute;
  display: block;
  width: 76px;
  height: 76px;
  right: 0;
  top: calc(50% - 38px);
  border-radius: 100%;
  background: url("../img/icon_arw_bk.svg") center center no-repeat;
  background-color: #FFFFFF;
}
.cms_photo{
  width: 276px;
  aspect-ratio: 16/9;
  background-color: #D8D8D8;
  overflow: hidden;
}
.cms_photo img{
  width: 100%;
  object-fit: contain;
  transition: all 0.2s linear;
}
.cms_infoentry{
  width: 572px;
  margin-left: 32px;
}
.cms_infoentry div:first-of-type{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 32px;
  overflow: hidden;
}
.cms_infoentry div:first-of-type p{
  font-size: 1.125rem;
  font-weight: 500;
  color: #1F2022;
}
.cms_infoentry div:first-of-type p span{position: relative;}
.cms_infoentry div:first-of-type p span::after{
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000000;
  transition: all 0.15s linear;
}
.cms_entryheader{
  display: flex;
  align-items: center;
}
.cms_date{
  margin-right: 16px;
  font-weight: 500;
  color: #1F2022;
}
.cms_category{
  display: inline-block;
  height: 28px;
  padding: 3px 16px 0;
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  color: #1F2022;
  border-radius: 2px;
  border: 1px solid #1F2022;
}

.cms_infolist ul li h2{font-size: 1.125rem;}/*記事無しの記述*/












._gotop{
  position: fixed;
  display: none;
  right: 35px;
  bottom: 35px;
  z-index: 10;
}
._gotop a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: #0086BE;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);
  transition: all 0.2s linear;
}
._gotop a span{
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  top: 20px;
  left: 18px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(-45deg);
}







.cms_footer{
  padding: 48px 0 56px;
  background-color: #1F2022;
}
.cms_ftnav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.cms_ftnav ul{display: flex;}
.cms_ftnav ul li{padding: 0 32px;}
.cms_ftnav ul li a{
  position: relative;
  padding: 8px 0;
  font-weight: bold;
  color: #FFFFFF;
}
.cms_ftnav ul li a::after{
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #FFFFFF;
  transition: all 0.15s linear;
}

.cms_ftprofile{
  display: flex;
  margin-bottom: 80px;
}
.cms_ftprofile div{
  position: relative;
  width: 416px;
  padding-top: 28px;
  border-top: 1px solid #353638;
}
.cms_ftprofile div::before{
  content: "";
  position: absolute;
  display: block;
  width: 32px;
  left: 0;
  top: 0;
  border-top: 1px solid #FFFFFF;
}
.cms_ftprofile div:first-of-type{margin-right: 96px;}
.cms_ftprofile div p:first-of-type{
  margin-bottom: 12px;
  color: #FFFFFF;
}
.cms_ftprofile div p:last-of-type{color: #BDBEBF;}

.cms_othermenu{
  margin-bottom: 56px;
  padding: 26px 0 30px;
  border-top: 1px solid #353638;
  border-bottom: 1px solid #353638;
}
.cms_othermenu ul{
  display: flex;
  padding: 0 24px;
}
.cms_othermenu ul li{padding: 0 32px;}
.cms_othermenu ul li a{
  position: relative;
  padding: 8px 0;
  color: #BDBEBF;
}
.cms_othermenu ul li a::after{
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #FFFFFF;
  transition: all 0.15s linear;
}
.cms_cprt{
  text-align: right;
  font-size: 0.875rem;
  color: #BDBEBF;
}










@media screen and (min-width:821px){
  .cms_logo a:hover{opacity: 0.5;}
  .cms_nav ul li a:hover::after{width: 100%;}


  .cms_leftnav div ul li:hover{color: #1F2022;}
  .cms_leftnav div ul li a:hover{color: #1F2022;}
  .cms_infolist ul li a:hover::after{animation: bgpositionmove 0.2s linear forwards;}
  .cms_infolist ul li a:hover .cms_photo img{transform: scale(1.05);}
  .cms_infolist ul li a:hover .cms_infoentry div:first-of-type p span::after{width: 100%;}

  ._gotop a:hover{
    box-shadow: 4px 4px 8px 0 rgba(0,0,0,.5);
    transform: scale(1.05);
  }


  .cms_ftnav ul li a:hover::after{width: 100%;}

  .cms_othermenu ul li a:hover::after{width: 100%;}
}







/*-----------------------------------------*/
/*--------------レスポンシブ-------------*/
/*-----------------------------------------*/
@media screen and (max-width:820px){}
@media screen and (max-width:420px){}
@media screen and (max-width:375px){}
@media screen and (max-width:360px){}
@media screen and (max-width:320px){}