@charset "UTF-8";

.hstyle-page-hero {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.hstyle-page-hero span.en {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 55rem;/*55*/
  letter-spacing: -0.06em;
  white-space: nowrap;
  line-height: 1;
  text-indent: -0.1em;
  margin-bottom: 20rem;
  position: relative;
  clip-path: inset(0 100% 0 0);
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hstyle-page-hero span.en span.bg {
  background: var(--color-main);
  position: absolute;
  width: 103%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: -5px;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hstyle-page-hero span.en span.bg.hide {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.hstyle-page-hero span.ja {
  display: inline-block;
  font-weight: bold;
  font-size: 26rem;
  line-height: 1.6;
  position: relative;
  clip-path: inset(0 100% 0 0);
  -webkit-transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hstyle-page-hero span.ja span.bg {
  background: var(--color-main);
  position: absolute;
  width: 103%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: -5px;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition: 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hstyle-page-hero span.ja span.bg.hide {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.hstyle-page-hero span.en.show,
.hstyle-page-hero span.ja.show {
  webkit-clip-path: inset(0);
  clip-path: inset(0);
}

section.page-hero .area-head {
  height: 35svh;/*40*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

section.page-hero .hstyle-page-hero {
  width: 86.6%;
  margin: 0 auto 30rem;
}

/*------------------------------------------------------------------------------------------------news---------------------*/

section.area-news {
  padding: 50rem 0 0;
}

section.area-news ul.list-news {
  margin-left: 6.7%;
  margin-right: 6.7%;
}

section.area-news ul.list-news li {
  width: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-left: 1px solid #ddd;
  margin-bottom: 50px;
}
section.area-news ul.list-news a {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 45rem 1fr;
  grid-template-columns: auto 1fr;
  -ms-grid-rows: auto 45rem auto;
  grid-template-rows: auto auto;
  grid-gap: 45rem;
  padding: 0 0 0 25rem;
}

section.area-news ul.list-news time {
  line-height: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-family: var(--font-en-2);
  font-size: 24rem;
  color: #666;
  letter-spacing: 0.09em;
}
section.area-news ul.list-news time span {
  display: inline-block;
}
section.area-news ul.list-news .thumbnail {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}
section.area-news ul.list-news .thumbnail img {
  border: 1px solid #ddd;
}
section.area-news ul.list-news .text {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
section.area-news ul.list-news .text p.title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
section.area-news ul.list-news .text .arrow {
  margin-right: 17rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 50rem;
  height: 50rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
section.area-news ul.list-news .text .arrow span::before {
  content: "";
  display: block;
  width: 18rem;
  height: 18rem;
  background: url("../images/arrow.png") no-repeat center;
  background-size: contain;
}


/*----------------------------------------page-navi----------*/

.wp-pagenavi{ 
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: var(--font-en-2);
font-size: 20rem;
color: #666;
letter-spacing: 0.09em;
}

.wp-pagenavi a, .wp-pagenavi a:link {
display: block;
background: #f6f6f6;
border-radius: 50%;
width: 60px;
height: 60px;
color: #333;
line-height: 60px;
text-align: center;
margin: 8px;
border:1px solid #ddd;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.wp-pagenavi a:hover {	
background:#006d91;
color: #fff;
border:1px solid #006d91;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.wp-pagenavi span.current {
display: block;
background:#006d91;
border-radius: 50%;
border:1px solid #006d91 !important;
width: 60px;
height: 60px;
color: #fff;
line-height: 60px;
text-align: center;
margin: 8px;
}




/**********************************************************************

 * Media Query For PC

 ***********************************************************************/
@media print, screen and (min-width: 768px) {
  
  .hstyle-page-hero span.en {
    /*font-size: clamp(68.2666666667px, 6.67vw, 96px);*/
	font-size: clamp(98.2666666667px, 9.60vw, 126px);
    letter-spacing: -0.06em;
    white-space: nowrap;
    margin-bottom: clamp(14.2222222222px, 1.39vw, 20px);
  }
  .hstyle-page-hero span.ja {
    font-size: clamp(19.9111111111px, 1.94vw, 28px);
    line-height: 1.6;
  }
  section.page-hero .area-head {
    /*height: max(270.2222222222px, 26.39vw);*/
	height: max(250.2222222222px, 25.0vw);
    padding-bottom: clamp(15.3333333333px, 2.08vw, 24px);
  }
  section.page-hero .hstyle-page-hero {
    width: 91.6%;
    margin: 0 auto max(21.3333333333px, 2.08vw);
  }
  
  
  
  
  
  /*------------------------------------------------------------------------------------------------news---------------------*/

  
  
  
  
  
  
  section.area-news {
    padding: clamp(14.6666666667px, 7.29vw, 45px) 0 0;
  }
  section.area-news .inner {
    width: 91.6%;
    margin: 0 auto;
  }
  
  section.area-news ul.list-news {
    margin-left: 0;
	margin-right: 0;
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	flex-wrap: wrap;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  section.area-news ul.list-news li {
    width: 33.33%;
    border-left: 1px solid #ddd;
	margin-bottom: 60px;
  }
  section.area-news ul.list-news li:last-child {
    border-right: 1px solid #ddd;
  }
  section.area-news ul.list-news a {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto clamp(99.5555555556px, 9.72vw, 140px) 1fr;
    grid-template-columns: auto 1fr;
    -ms-grid-rows: auto clamp(14.2222222222px, 1.39vw, 20px) auto;
    grid-template-rows: auto auto;
    grid-gap: clamp(14.2222222222px, 1.39vw, 20px) clamp(99.5555555556px, 9.72vw, 140px);
    padding: 0 max(14.2222222222px, 1.39vw) 0 max(21.3333333333px, 2.08vw);
  }
  
  section.area-news ul.list-news a:hover .thumbnail img {
    opacity: 0.6;
  }
  section.area-news ul.list-news a:hover .text .arrow {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  section.area-news ul.list-news time {
    line-height: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    font-size: clamp(8.5333333333px, 0.83vw, 12px);
  }
  section.area-news ul.list-news .thumbnail {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
  section.area-news ul.list-news .thumbnail img {
    border: 1px solid #ddd;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  section.area-news ul.list-news .text {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  section.area-news ul.list-news .text p.title {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    line-height: 1.6;
  }
  section.area-news ul.list-news .text .arrow {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    margin-right: clamp(49.7777777778px, 4.86vw, 70px);
    border-radius: clamp(17.7777777778px, 1.74vw, 25px);
    width: clamp(17.7777777778px, 1.74vw, 25px);
    height: clamp(17.7777777778px, 1.74vw, 25px);
  }
  section.area-news ul.list-news .text .arrow span::before {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    content: "";
    display: block;
    width: clamp(7.1111111111px, 0.69vw, 10px);
    height: clamp(7.1111111111px, 0.69vw, 10px);
    background: url("../images/arrow.png") no-repeat center;
    background-size: contain;
  }
  
  /*----------------------------------------page-navi----------*/

.wp-pagenavi{ 
font-size: 10rem;
}

  
  
}