@charset "UTF-8";

:root {
  --semi-fontsize: 1em;
  --middle-fontsize: 1.6em;
  --big-fontsize: 2.3em;
  --large-fontsize: 2.6em;
  --sub-fontweight: bold;
  --sub-ls: 0.1em;
  --thin-line-height: 1.5;
}

@media screen and (max-width: 1280px) {
  :root {
    --semi-fontsize: 1em;
    --middle-fontsize: 1.3em;
    --big-fontsize: 2.2em;
    --large-fontsize: 2.6em;
    --sub-fontweight: bold;
    --sub-ls: 0.1em;
    --thin-line-height: 1.5;
  }
}

@media screen and (max-width: 599px) {
  :root {
    --semi-fontsize: 0.9rem;
    --middle-fontsize: 1.1rem;
    --big-fontsize: 1.4rem;
    --large-fontsize: 1.8rem;
    --sub-fontweight: bold;
    --sub-ls: 0.1em;
    --thin-line-height: 1.5;
  }
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
/* *{
  outline: 2px red solid;
} */
html {
    color: #000;
    background: #FFF;
    scroll-behavior: smooth;
}

body{
    color: #000;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-feature-settings: 'palt';
    -webkit-text-size-adjust: 100%;
  }
  @media screen and (max-width: 1024px) {
    body {
      font-size: 0.9rem;
    }
  }
  @media screen and (max-width: 599px) {
    body {
      font-family: 'Noto Sans CJK';
      font-size: 0.9rem;
      line-height: 1.6;
      letter-spacing: 1.0px;
      font-feature-settings: 'palt';
      -webkit-text-size-adjust: 100%;
    }
  }
* {
    box-sizing: unset;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align:top;
}
table {
  border-collapse: collapse;
}
ol, ul {
    list-style: none;
}
a:link, a:visited, a:active, a:hover {
    overflow: hidden;
    outline: none;
}
sup{
  font-size: 0.6rem;
}
video{
  width: 100%;
}
.pc-only {
  display: block;
}
.tab-only,
.sp-only {
  display: none;
}
@media screen and (max-width: 1024px) {
  .pc-only,
  .sp-only {
    display: none;
  }
  .tab-only {
    display: block;
  }
}
@media screen and (max-width: 599px) {
  .pc-only,
  .tab-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}
@font-face {
  font-family: 'Noto Sans CJK';
  src: url('../fonts/NotoSansCJKjp-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'BodoniModa';
  src: url('../fonts/BodoniModa-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-Bold.ttf') format('truetype');
}
/*-- ここからHEADER
.logo_group{
  display: flex;
  align-items: center;
}
header {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  z-index: 99;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.01);
}
.header {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 5em;
}
.logo_group{
  display: flex;
  align-items: center;
}
.h_logo{
  width: 150px;
}
.h_logo img{
  padding: 11px 0 0;
}
.header h1 {
  margin: 0;
  padding: 0;
}
.header nav {
  margin: 0 0 0 auto;
}
.header ul {
  list-style: none;
  margin: 0;
  display: flex;
}
.pc-nav li {
  margin: 0 0 0.2em 2em;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color:#d9d9d9;
  position: relative;
}
.pc-nav a::after {
  position: absolute;
  top: 20px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #ff0;
  bottom: 20px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  }

.pc-nav a:hover::after {
  visibility: visible;
  bottom: 12px;
  opacity: 1;
  }

@media screen and (max-width: 1024px) {
.h_logo img{
  padding: 7px 0 0;
}
}
@media screen and (max-width: 768px) {
.pc-nav {
    display: none;
}
}
@media (max-width: 425px) {
.header {
  padding: 0 1em;
}
.h_logo {
width: 130px;
}
.h_logo img {
  padding: 7px 0;
}
}
/*-- ここまでHEADER --*/

/* スクロールバー */
.scroll-downs {
  position: absolute;
  /* top: 0; */
  right: 0;
  bottom: 3%;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px;
  z-index: 3;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}
@media screen and (max-width: 1024px) {
  .scroll-downs{
    display: none;
  }
}
/* スクロールバー */

/* ここからMAIN VISUAL */
.pageTitle {
  position: relative;
  display: table;
  width: 100%;
  height: 50vh;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}
.pageTitle:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(107,167,181,0.6);
}
.pageTitle h2 {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: 2;
}
.pageTitle h2 span {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 5.0rem;
  text-transform: uppercase;
  line-height: 1.2;
}
/* ここまで MAIN VISUAL */

main{
  margin: 2em auto;
  overflow: hidden;
  font-size: 16px;
}
section{
}

/* ////////////////////
ここから キャリアパス・採用
//////////////////// */

/* ここから キャリアパスsection1 */
.intro_contents{
  padding: 6em 0 2em;
  max-width: 1000px;
  margin: 0 auto;
}
.intro_title{
  text-align: center;
  padding: 0 0 2em;
}
.intro_title h1{
  font-size: var(--large-fontsize);
  letter-spacing: 0.05em;
}
.inner_text{
  padding: 1em 0 2em;
  max-width: 900px;
  margin: 0 auto;
}
.careerplan{
  text-align: center;
  padding: 3em 0 1em;
}
.careerplan_title{
  font-size: var(--large-fontsize);
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.careerplan_stitle{
  font-size: var(  --semi-fontsize);
  letter-spacing: 0.1em;
}
.careerplan_img{
  padding: 2em 0;
}
/* ここまで キャリアパスsection1 */

/* ここから キャリアパスsection2 */
.training_contents{
  padding: 4em 0 0;
  max-width: 1000px;
  margin: 0 auto;
}
.training_title{
  text-align: center;
  padding: 0 0 2em;
}
/* ここまで キャリアパスsection2 */

/* ここから キャリアパスsection3 */
.training_detail{
  width: calc(100% - 20vw);
  margin: 0 auto;
  display: block;
  padding: 3em 0 6em;
}
.training_fst_ttl {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding: 10px 0;
  max-width: 400px;
  font-weight: 500;
  display: block;
  margin: 0 auto 1em;
  text-align: center;
  font-size: var(--middle-fontsize);
	}
.training_fst_ttl:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
	}
.training_fst span{
  color: #d60000;
  font-weight: bold;
}
.training_fst a{
  text-decoration: underline;
}
.training_fst a:hover{
  color: #d60000;
}
.hiina_image{
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.hiina_image img{
  width: 25%;
}
.training_sec{
  padding: 6em 0 0;
}
a.btn_12 {
	display: flex;
  justify-content: space-evenly;
  align-items: center;
	text-align: center;
	text-decoration: none;
	width: 210px;
	margin: auto;
	padding: .5em 1.5em .5em;
	font-weight: bold;
	background: #27acd9;
	color: #fff;
	position: relative;
	transition: 0.5s;
}
a.btn_12::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
a.btn_12:hover {
	background: #44c6f2;
	color: #fff;
}
.training_sec_wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2em 0;
}
.training_sec_grp{
  max-width: calc(100% / 3 - 2em);
  padding: 2em 1em;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.sec_grp_ttl{
  font-size: 1.5rem;
  text-align: center;
  padding: 0 0 0.5em;
}
.sec_grp_ttl span{
  font-size: 1rem;
  padding-right: 0.3em;
}
.sec_image {
  position: relative;
}
.sec_image img{
  position: relative;
  z-index: 2;
}
.sec_image::before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#999 30%, rgba(0, 0, 0, 0) 31%), radial-gradient(#999 30%, rgba(0, 0, 0, 0) 31%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  z-index: 1;
}
.sec_grp_detail{
  padding: 1.5em 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  font-size: var(--wp--preset--font-size--normal);
}
.training_sec_ttl {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding: 10px 0;
  max-width: 500px;
  font-weight: 500;
  display: block;
  margin: 0 auto 1em;
  text-align: center;
  font-size: var(--middle-fontsize);
	}
.training_sec_ttl:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
	}

/* ここまで キャリアパスsection3 */

/* ここから 他ページリンクボタン */
.link_contents{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8em 5%;
  border-top: 2px solid #b5c0c4;
}
/* .link_header {
  display: inline-block;
  position: relative;
}
.link_header:before {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #c0c8ce;
}  */
.link_group{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.link_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px;
  margin: 1em;
  padding: .9em 1em;
  border: 2px solid #27acd9;
  border-radius: 5px;
  background-color: #fff;
}
.link_btn a{
  color: #27acd9;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.link_btn:hover {
  animation: anima-link_btn 1s;
}
@keyframes anima-link_btn {
  0% {
      box-shadow: 0 0 0 0 rgb(39 172 217 / 50%);
  }
  100% {
      box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
  }
}
.link_btn::after {
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 2px solid #27acd9;
  border-right: 2px solid #27acd9;
  content: '';
}
/* ここまで 他ページリンクボタン */

/* ///////////////////
 mobile
//////////////////// */

@media screen and (max-width: 1024px) {
  .training_sec_grp {
    max-width: calc(100% / 2 - 2em);
  }
}
@media screen and (max-width: 768px) {
  main{
    padding: 0 1em;
  }
  .intro_title h1 {
    font-size: var(--big-fontsize);
}
.inner_text {
  padding: 1em 1em 2em;
}
.training_detail {
  width: calc(100% - 10vw);
}
}
@media screen and (max-width: 599px) {
  .intro_title h1 {
    padding: 0 0 0.5em;
  }
  .intro_title h1 {
    font-size: var(--large-fontsize);
}
  .pageTitle h2 {
    font-size: var(--big-fontsize);
  }
  .pageTitle h2 span {
    font-size: 3.1rem;
  }
  .training_detail {
    width: calc(100% - 2vw);
}
  .training_fst_ttl,
  .training_sec_ttl {
    max-width: 300px;
  }
  .sec_grp_ttl {
    font-size: var(--middle-fontsize);
  }
  .training_sec_grp {
    max-width: fit-content;
  }
  .training_sec_wrap {
    padding: 0;
  }
  .link_btn {
    width: calc(100% / 2 - 2em);
  }
  .link_btn a {
    font-size: var(--middle-fontsize);
  }
}
@media screen and (max-width: 425px) {
  .training_contents {
    padding: 2em 0 0;
  }
  .training_detail {
    padding: 0 0 3em;
  }
  .link_contents {
    padding: 4em 10%;
  }
  .link_group {
    flex-direction: column;
  }
  .link_btn {
    width: inherit;
}
}
/* ////////////////////
ここまで キャリアパス・採用
//////////////////// */

/* ////////////////////
ここから 部署紹介
//////////////////// */

/* ここから 部署紹介 section1 */
.step_title{
  display: flex;
  justify-content: center;
  padding: 2em 0;
}
.step_wrap_1st{
  background: #0097ca;
}
.step_wrap_2nd{
  background: #0078ba;
}
.step_wrap_3rd{
  background: #003c8d;
}
.step_wrap_4th{
  background: #000060;
}
.step_wrap_1st,
.step_wrap_2nd,
.step_wrap_3rd,
.step_wrap_4th{
  width: 400px;
  color: #FFF;
  text-align: center;
  padding: 1em;
  margin: 0.5em;
}
.step_wrap_ttl{
  font-size: var(--middle-fontsize);
}
.tenpo_wrap{
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 4em;
}
.tenpo_ttl{
  text-align: center;
  padding: 1em 0;
  font-size: 1.2rem;
}
.tenpo_photo{
  max-width: 700px;
  margin: 0 auto;
  padding: 2em 0;
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
}
.swiper-button-prev,
.swiper-button-next {
  width: 24px;
  height: 40px;
  background-size: 24px 40px;
  transform: translateY(-50%);
  margin-top: 0;
}
.swiper-pagination-bullet{
  background: #333;
}
.swiper-button-next {
background-image: url('../images/arrow_black.png');
}
.swiper-button-prev {
  background-image: url('../images/arrow_black.png');
  transform: translateY(-50%) scale(-1, 1);
}
.swiper-button-prev:after,
.swiper-button-next:after {
 display: none;
}
.tenpo_ttl {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding: 10px 0;
  max-width: 260px;
  font-weight: 500;
  display: block;
  margin: 0 auto 2em;
  text-align: center;
  font-size: var(--middle-fontsize);
	}
.tenpo_ttl:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
	}
/* ここまで 部署紹介 section1 */

/* ここから 部署紹介 section2 */
.arrow{
  text-align: center;
}
.second_stage_contents {
  width: calc(100% - 10vw);
  display: block;
  margin: 0px auto;
  padding: 3em 0 0;
}
.second_stage_group{
  padding: 2em 0;
}
.text-center{
  text-align: center;
}
a.branch_btn {
	display: flex;
  justify-content: space-evenly;
  align-items: center;
	text-align: center;
	text-decoration: none;
	width: 160px;
	margin: auto;
  padding: 0.3em 1em;
	font-weight: bold;
	background: #023E8A;
	color: #fff;
	position: relative;
	transition: 0.5s;
}
a.branch_btn::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
a.branch_btn:hover {
	background: #1251a0;
	color: #fff;
}
.branch_sec_wrap{
  display: flex;
  flex-wrap: wrap;
  padding: 2em 0;
}
.branch_sec_grp{
  max-width: calc(100% / 4 - 2em);
  padding: 2em 1em;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
/* ここまで 部署紹介 section2 */

/* ここから 部署紹介 section3 */
.scroll_contents{
  padding: 0 0 8em;
}
.scroll_text{
  text-align: center;
  font-size: var(--large-fontsize);
  font-weight: bold;
}
.scroll_header{
  padding: 0 0 4em;
}
.curtainLefttoRight {
  position:relative;
}
.curtainLefttoRight.visible {
  animation-name: curtainLeftFadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
.curtainLefttoRight.visible:before {
  display: block;
  content: "";
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background: linear-gradient(45deg, #00B4D8 0%, #0077B6 100%);
  animation-name: curtainLeft;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes curtainLeftFadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
@keyframes curtainLeft{
0% {
  transform-origin:left;
  transform:scaleX(0);
}
50% {
  transform-origin:left;
  transform:scaleX(1);
}
50.001% {
  transform-origin:right;
}
100% {
  transform-origin:right;
  transform:scaleX(0);
}
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
.scroll_contents{
  padding: 0 0 8em;
}
_:-ms-lang(x)::-ms-backdrop,
.scroll {
  display: -ms-grid;
  overflow: hidden;
  margin: 2em 0;
}
.scroll__wrap {
  display: flex;
  overflow: hidden;
}
.scroll__list {
  display: flex;
  list-style: none;
}
.scroll__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}
.scroll__list--right{
animation :infinity-scroll-right 95s infinite linear 0.5s both;
}
.scroll__item {
  width: calc(100vw / 8);
}
.scroll__item > img{
   width: 100%;
}
/* .scroll__wrap:hover .scroll__list--left {
  animation-play-state: paused;
} */
.mynavi_wrap{
  display: flex;
  justify-content: center;
}
.button019 a {
  background-color: #0096c7;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 8em 1em 0;
  max-width: 360px;
  padding: 1em 4em;
  color: #FFF;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  text-align: center;
}
.button019 a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 6px;
height: 6px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}
.button019 a:hover {
background: #6bb6ff;
color: #FFF;
}
.button019 a:hover:after {
right: 1.4rem;
}

@media screen and (max-width: 1536px) {
  .second_stage_contents {
    width: calc(100% - 5vw);
  }
}

@media screen and (max-width: 1366px) {
  .sec_grp_ttl {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 1280px) {
  .branch_sec_grp {
    max-width: calc(100% / 3 - 2em);
  }
  .link_contents {
    max-width: 900px;
  }
  .tenpo_ttl {
    max-width: 200px;
  }
}

@media screen and (max-width: 768px) {
.tenpo_wrap {
  padding: 0 3em 4em;
}
.sec_grp_detail {
  line-height: 1.5;
}
.branch_sec_grp {
  max-width: calc(100% / 2 - 2em);
}
.branch_sec_grp {
  padding: 2em 1em 0;
}
.scroll_text {
  font-size: var(--big-fontsize);
}
}

@media screen and (max-width: 599px) {
.step_title {
  flex-direction: column;
}
.step_wrap_1st, .step_wrap_2nd, .step_wrap_3rd, .step_wrap_4th {
  margin : 0.5em auto;
  width: 250px;
}
.second_stage_contents {
  width: 100%;
}
.branch_sec_wrap {
  padding: 0 0 2em;
}
.mynavi_wrap {
  flex-direction: column;
}
.button019 a {
  max-width: 280px;
  margin: 3em 2em 0;
	padding: 1em;
}
}

@media screen and (max-width: 425px) {
.pageTitle {
  margin: 50px 0 -50px;
}
.scroll__item {
  width: calc(100vw / 4);
}
}

@media screen and (max-width: 399px) {
.sec_grp_ttl {
  font-size: 1.1rem;
}
.scroll_header {
  padding: 0 0 2em;
}
.scroll_text {
  font-size: 1.2rem;
}
.scroll_contents {
  padding: 0 0 5em;
}
.tenpo_wrap {
  padding: 0 1em 4em;
}
.branch_sec_grp {
  padding: 2em 0.5em 0;
  max-width: calc(100% / 2 - 1em);
}
}

/* ここまで 部署紹介 section3 */

/* ////////////////////
ここまで 部署紹介
//////////////////// */

/* ////////////////////
ここから ギャラリー
//////////////////// */

/* ここから gallery section 1 */
.gallery_container {
width: calc(100% - 10vw);
  margin: 0 auto;
  padding: 0 0 6em;
}
.tag-wrap{
  max-width: 800px;
  margin: 0 auto 5em;
  /* padding: 1em 1em 2em 2em; */
  padding: 2em 2em 2em 4em;
  background: #F3F3F2;
}
/* .tag-content {
  display: flex;
}
.sort-title{
  font-size: 16px;
  border-right: 1px solid #dadee3;
  -ms-flex: 0 0 8em;
  flex: 0 0 8em;
  line-height: 4;
  margin-right: 20px;
}
.sort-title strong{
  font-weight: 700;
} */
.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.buttons button{
  /* width: 120px; */
  max-height: 3.3vh;
  font-size: 13px;
  padding: 0.2em 0.6em;
  margin: 0.3em 0.8em 0.3em 0;
  text-align: center;
  background: #FFF;
  border: solid 1px #bfbebe;
  color: #333;
  border-radius: 2em;
  display: table-cell;
}
.buttons button:before {
	content: "#";
}
.buttons button:hover {
  cursor: pointer;
}
.gallery{
  margin: 0 auto;
}
.gallery__column {
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
  column-count: 5;
  column-gap: 0;
  transition: 0.3s;
}
.gallery__column > div{
  width: 20%;
}
.gallery > *,
.gallery__thumb img,
.gallery__thumb iframe {
  border-radius: 8px;
}
.grid{
  padding: 8px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  transition: all 0.4s ease 0s;
}
.grid.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
}
.gallery__thumb {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.gallery__image {
  display: block;
  width: 100%;
  transition: 0.3s;
}
.gallery:hover .gallery__image,
.gallery:hover .gallery__movie{
  filter: grayscale(1);
}
.grid:hover .gallery__image,
.grid:hover .gallery__movie{
  filter: grayscale(0);
}
.gallery_text{
  padding: 0.6em 0;
}
.gallery-name{
  font-size: var(--semi-fontsize);
  font-weight: var(--sub-fontweight);
}
.gallery-info{
  font-size: 0.9rem;
  line-height: 1.6;
}
.gallery-tag{
  display: flex;
  flex-wrap: wrap;
}
.tag{
  font-size: 0.7em;
  margin: 0 0.7em 0em 0;
  display: table-cell;
  vertical-align: middle;
  letter-spacing: .1em;
  color: #7b7b7b;
}
.tag:before{
  content: "#";
}

.gallery__link{
  opacity: 1;
}
.gallery__link.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
}
.gallery__thumb lite-youtube{
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
from {
  opacity: 0;
  transform: translateY(100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}
@media (max-width: 768px) {
  .gallery__column {
    width: 100%;
    column-count: 2;
  }
  .gallery__column > div{
    width: 100%;
  }
  .gallery-name{
    font-size: 18px;
  }
}
@media (max-width: 599px) {
  .gallery__column {
    width: 100%;
    column-count: 1;
  }
  .gallery__column > div{
    width: 100%;
  }
  .gallery-name{
    font-size: 18px;
  }
  .tag-wrap {
    padding: 2em 1em;
  }
	.fadeUp{
    animation-duration:1s;
	opacity: 0.8;
  }
}

/* ここまで gallery section 1 */



/* ////////////////////
ここまで ギャラリー
//////////////////// */



/* ここから フッター */
footer{
  color: #000;
}
.primary{
  padding: 5em 5em 5em 13em;
  display: flex;
  justify-content: center;
}
.footer_image{
  width: 35%;
  padding: 1em 0 0;
}
.footer_image img{
  width: 45%;
  padding: 0.5em 0;
}
.ir_code{
  padding: 0.5em 0 0;
  font-size: 0.7rem;
}
.jigyo_title{
  padding: 2em 0 0;
  font-size: 0.9rem;
}
.jigyo{
  padding: 0.5em 0.5em 0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.8;
}
.jigyo li:before {
  content: '';
  display: inline-block;
  position: relative;
  left: -5px;
  top: -4px;
  width: 5px;
  height: 5px;
  background: #000;
}
.footer_list{
  display: flex;
}
.busho{
  padding: 1em;
}
.wh-1{
  width:17%;
}
.wh-2{
  width:19%;
}
.wh-3{
  width:19%;
}
.wh-4{
  width:21%;
}

.busho_title{
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  margin-bottom: 0.2rem;
  background-image: linear-gradient(to top, rgba(4,6,34,1) 10%, rgba(0,112,192,1) 100%);
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.1;
}
.busho_title span{
  font-size: 0.9rem;
}
.busho_cjf{
  line-height: 1.2;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  font-size: 1.2rem;
}
.menu {
  width: 100%;
  padding: 10px 15px 20px;
}
.menu input {
  display: none;
}
.menu label {
  cursor :pointer;
  display: block;
  text-decoration: none;
  color: #000;
  line-height: 1;
  position: relative;
  padding: 0.5em 0.5em 0.8em;
  font-size: 1rem;
  width: 100px;
}
.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 1px;
}
.menu li {
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  -webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
  -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
  -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
  -o-transition: padding-bottom 0.5s, padding-top 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li,
#menu_bar11:checked ~ #links11 li,
#menu_bar12:checked ~ #links12 li{
  height: auto;
  opacity: 1;
  padding: 0.5em 0 0.8em 2em;
}
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child,
#menu_bar07:checked ~ #links07 li:last-child,
#menu_bar08.about_wrap ~ #links08 li:last-child,
#menu_bar09:checked ~ #links09 li:last-child,
#menu_bar10:checked ~ #links10 li:last-child,
#menu_bar11:checked ~ #links11 li:last-child,
#menu_bar12:checked ~ #links11 li:last-child{
  margin-bottom: 20px;
}
.menu label:after{
  content:"";
  display:block;
  width:5px;
  height:5px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 2%;
  top: 0;
  bottom: 15%;
  margin: auto;
}
.menu input[type=checkbox]:checked + label:after{
  content:"";
  display:block;
  width: 5px;
  height: 5px;
  border-top: #000 2px solid;
  border-right: #000 2px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position:absolute;
  right: 2%;
  top: 7%;
  bottom: 0;
  margin: auto;
}
.menu li{
  font-size: 0.9rem;
  color:#000;
}
.menu a{
  color:#000;
}
.menu_arrow{
  padding-left: 0.5em;
}
.menu_tokki{
    width: 100%;
    padding: 10px 20px 40px;
}
.menu_tokki a{
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  padding: 0.5em;
  font-size: 1rem;
  width: 120px;
}
.menu_tokki li{
  font-size: 1rem;
}
.menu_kouiki{
  width: 100%;
  padding: 0 0 0 20px;
}
.menu_kouiki a{
cursor: pointer;
display: block;
text-decoration: none;
color: #000;
padding: 0.5em;
font-size: 1rem;
width: 120px;
}
.menu_cjf{
  width: 100%;
  padding: 10px 20px 20px;
}
.menu_cjf li{
display: block;
text-decoration: none;
color: #000;
padding: 0.5em;
font-size: 1rem;
width: 120px;
}
.menu_cjf a{
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 1rem;
  width: 120px;
}
.secondary{
  background: #202020;
  padding: 25px 0;
}
.secondary_group {
  padding: 0 12em;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.copyright-text{
  text-align: left;
}
.copyright-text p {
  margin: 0;
  font-size: 0.7em;
  color: #cbcbcb;
}
.footer-menu{
  display: flex;
}
.footer-menu li a {
  font-size: 14px;
  color: #cbcbcb;
  padding: 0 1em;
}
@media screen and (max-width: 1536px) {
.primary {
  padding: 5em 3em 5em 8em;
}
.wh-3 {
  width: 20%;
}
}
@media screen and (max-width: 1280px) {
.wh-2 {
  width: 20%;
}
.busho_title{
  font-size: 1em;
}
.busho_title span {
  font-size: 0.8rem;
}
.secondary_group {
  padding: 0 5em;
}
}
@media screen and (max-width: 1024px) {
.primary {
    flex-direction: column;
    padding: 3em 5em 3em 8em;
}
.footer_image {
  width: 100%;
  padding: 1em 0;
}
.footer_image img {
  width: 25%;
}
}
@media screen and (max-width: 768px) {
.primary {
    padding: 3em 3em 3em 4em;
}
.footer_image img {
  width: 35%;
}
.wh-1 {
  width: 20%;
}
.wh-3 {
  width: 21%;
}
}
@media screen and (max-width: 599px) {
.footer_list {
  display: none;
}
.footer_image img {
    width: 40%;
}
.primary {
    padding: 3em 2em;
}
.secondary_group {
  padding: 0 1.5em;
  flex-direction: column-reverse;
}
.copyright-text {
  text-align: center;
  padding: 1em 0;
}
.footer-menu {
  flex-wrap: wrap;
  line-height: 1.8;
  justify-content: center;
}
}
@media screen and (max-width: 425px){
.footer_image img {
    width: 45%;
}
}
/* ここまで フッター */

/* go to TOP */
#pagetop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  margin: 0;
}
#pagetop a{
  position: relative;
  display: flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  background:#9499b4;
  transition: opacity .6s ease;
  color: #FFF;
  align-items: center;
  text-decoration: none;
  font-size: 40px;
  border-radius:100%;
}
#pagetop a:hover {
  opacity: .3;
}
@media screen and (max-width:1024px) {
#pagetop a {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
}
/* go to TOP */