@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Display:wght@500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;1,700&display=swap');
/* for debug
* {
  outline: 1px solid red;
} */
:root {
  --default: #004098;
  --bodybg: #f7f7f7;
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  font-family: 'M PLUS 1p','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f7f7f7;
  line-height: 1.8;
}
a {
  text-decoration: none;
  color: #555;
}
.text-default {
  color: var(--default);
}
.a-hover:hover img {
  transition: all .25s;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
}
.a-hover:hover img{
  opacity: 0.7;
}
/* ======
section/spacing
 ====== */
/* section:nth-child(2n+1) {
background-color: #fff;
} */
.section-y {
  padding-top:4rem;
  padding-bottom: 4rem;
}
.section-t {
  padding-top:4rem;
}
.section-b {
  padding-bottom: 4rem;
}
.container-y {
  padding-top:4rem;
  padding-bottom: 4rem;
}
.container-t {
  padding-top:4rem;
}
.container-b {
  padding-bottom: 4rem;
}
@media(min-width: 1366px){
  .section-y {
    padding-top:6rem;
    padding-bottom: 6rem;
  }
  .section-t {
    padding-top:6rem;
  }
  .section-b {
    padding-bottom: 6rem;
  }
  .container-y {
    padding-top:6rem;
    padding-bottom: 6rem;
  }
  .container-t {
    padding-top:6rem;
  }
  .container-b {
    padding-bottom: 6rem;
  }
}
.page-main {
  padding: 3rem 0 4rem;
}
@media (min-width: 768px) {
  .page-main {
    padding: 3.5rem 0 7rem;
  }
}
/* ======
  color
 ====== */
.bg-default {
  background-color: var(--default);
  color: #fff;
}
.bg-bodybg {
  background-color: var(--bodybg);
}
/* ======
  buttons
 ====== */
.btn-default {
  border-radius: 0;
  color: var(--default);
  background-color: transparent;
  border: 2px solid var(--default);
  padding: .5rem 2rem;
  font-weight: 500;
}
.btn-square {
  background-color: var(--default);
  color: #fff;
}
.btn-square svg {
  fill: #fff;
}
.btn-square:hover {
  background-color: #eee;
  color: var(--default);
}
.btn-square:hover svg {
  fill: var(--default)!important;
}
.btn-default--white {
  color: #fff;
  border: 2px solid #fff;
}
.btn-center {
  text-align: center;
}
.btn-pulse:hover {
  animation: pulse 1s;
  color: var(--default);
  -webkit-animation: pulse 1s;
}
.btn-default--white.btn-pulse:hover {
  color: #fff;
}
.btn-pulse:active {
  color: #fff!important;
}
.pulse {
  display: inline;
  animation: pulse 1s infinite;
  -webkit-animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(182, 182, 182, 0.6); }
  100% { box-shadow: 0 0 0 1.2em rgba(0, 0, 0, 0); }
}
/* ==============================
  reveal effect
 ============================== */
.js-img-reveal, .js-block-reveal {
  visibility: hidden;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 960px;
  overflow: hidden;
}
.js-img-reveal img, .js-block-reveal div{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform-origin: left;
}
.js-img-reveal .profile_img {
  height: 700px;
  object-fit: contain;
  display: block;
}
.video-bg .js-img-reveal {
  display: flex;
  align-items: flex-end;
}
/* ======
  nav
 ====== */
.navbar {
  padding: 0;
}
@media (max-width: 767px) {
  .navbar-nav .nav-link {
    font-size: 1.4rem;
  }
  .nav-item:not(:last-of-type) .nav-link {
    border-bottom: 1px solid #ddd;
  }
}
@media (min-width:1200px){
  .navbar-light .navbar-nav .nav-link {
    font-weight: 500;
  }
}
.navbar-nav .nav-link {
  color: #333;
}
.js-nav, .navbar-brand h1 {
  transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
}
.js-nav {
  background: white;
  color: #333;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.navbar-brand img {
  max-height: 40px;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff!important;
  text-decoration: none;
  background-color: var(--default);
}
/* dropdown hover */
@media (min-width: 1200px) {
	/* .navbar .dropdown-menu-end{ right:0; left: auto;  } */
	.navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
	/* .navbar .nav-item:hover .nav-link{ color: #fff;  } */
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;  }
	.navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
}	
/* ======
footer
 ====== */
/* for sp fixed menu */
@media (max-width: 767px) {
  footer {
    padding-bottom: 2rem
  }
}
/* ======
block news
 ====== */
.news {
  padding-top: 2rem;
}
.news__eye-wrap {
  max-width: 298px;
  width:100%;
  background-color:#fff;
  height: 100px;
  position: relative;
  overflow: hidden;
  }
  @media (min-width:768px) {
    .news__eye-wrap {
      height: 130px;
    }
  }
  @media (min-width:992px) and (max-width:1365px){
    .news__eye-wrap {
      height: 180px;
    }
  }
  @media (min-width:1366px) {
    .news__eye-wrap {
      height: 145px;
    }
  }
.news__eye img {
  width: 100%;
  /* height: auto; */
  background-color:#fff;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
}
.news__link:hover .news__eye img {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.17);
  transform: scale(1.17);
}
.news__label {
  padding-top: 1rem;
}
.news__label-cat {
  font-size: 90%;
  padding: 2px 10px;
  margin-right: 5px;
}
.news__label-date {
  font-size: 80%;
  padding: 2px 0;
}
@media(min-width:768px){
  .news__label-date {
    padding: 2px 10px;
  }
}
.news__label-cat {
  min-width: 80px;
  text-align: center;
}
.news__label-cat--solid {
  background-color: gray;
  color: #fff;
}
.news__label-cat--ol {
  border: 1px solid gray;
  color: gray;
  background-color: #fff;
}
.news__label-date--gray {
  color: #777;
}
.news__content-title {
  font-size: 1.1rem;
  font-weight: 500;
  color:#333;
  padding-top: 10px;
  margin: 0;
  transition: all .25s;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
}
.news__link:hover .news__content-title {
  color: var(--default);
}
.news__content-text {
  font-size: .8rem;
  font-weight: 400;
  color:#888;
  padding-top: 5px;
  margin: 0;
}
.news-list .news-item {
  border-bottom: 3px solid #f7f7f7;
  padding-bottom: .5rem;
}
.news-list .news__label {
  display: flex;
  align-items: center;
}
.news-list .news__content {
  display: block;
  position: relative;
}
.news-list .news__content-text {
  width: 95%;
}
.news-list .news__content::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  right: 2px;
  top: calc(50% + .25rem);
  background-color: var(--default);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.news-list .news__content::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  right: 10px;
  top: calc(50% + .25rem);
  transform: translate(-50%, -50%);
  background-color: var(--default);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
#js-rsp img {
  max-width: 587px;
}
/* ==============================
  中ページタイトル
 ============================== */
.page-title {
  height: 10rem;
  width: 100%;
  padding-top: 64px;
  background: #f7f7f7;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: start;
  z-index: -2;
}
@media(min-width: 768px) {
  .page-title {
    height: 15rem;
  }
}
.page-title h2 {
  display: flex;
  flex-wrap: wrap;
  color: #555;
  font-size: 2rem;
}
.page-title-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top:68px;
}
.js-vivus-logo {
  position: absolute;
  top: 50px;
  right: 0;
  opacity: .1;
  z-index: -1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}
@media (min-width:768px) {
  .page-title {
    height: 20rem;
  }
  .page-title h2 { 
    font-size: 3rem;
  }
  .js-vivus-logo {
    transform-origin: right top;
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }
}
@media (max-width:1024px) and (orientation: portrait) {
  .carousel-item img {
    /* aspect-ratio: 9 / 16; */
    object-fit: cover;
  }
}

/* ==============================
  パンクズ
 ============================== */
.breadcrumb {
  font-size: 12px;
  opacity: 0.5;
  display: block;
  margin-left: 0.2rem;
}

/* ==============================
  swiper
 ============================== */
.swiper{
  width: 100%;
  height: 100%;
}

/* センターモードで active slide 以外薄くする */
/*.ytswiper .swiper-slide:not(.swiper-slide-active),
.actswiper .swiper-slide:not(.swiper-slide-active)  {
  opacity: 0.3;
} */
@media (min-width: 768px) and (max-width: 997px) {
  .newsSlider .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.3;
  }
}
@media (min-width: 997px) {
  .newsSlider .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .newsSlider .swiper-slide {
    width: calc(25% - 20px)!important;
  }
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--default);
}
.lrcontent {
  padding: 4rem 0;
}
.lrcontent .row {
  margin-top: 3rem;
}

/* ==============================
  見出し
 ============================== */
.index-h3 {
  font-size: 2rem;
  font-weight: 400;
  display: inline-block;
  position: relative;
  color: var(--default);
}
.index-h3::before {
  content: attr(title);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Big Shoulders Inline Display', cursive;
  font-size: 3rem;
  opacity: 0.15;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.index-h4 {
  position: relative;
  padding-left: 20px;
  font-size: 1.4rem;
}
.index-h4::before {
  content: attr(title);
  position: absolute;
  width: 60px;
  top: -2rem;
  left:0;
  font-family: 'Big Shoulders Inline Display', cursive;
  font-size: 6rem;
  font-style: italic;
  opacity: 0.15;
  }
.page-h3 {
  position: relative;
  padding-left: 10px;
  font-size: 1.6rem;
  font-weight: 500;
}
.page-h3::before {
  content: '';
  position: absolute;
  top: -5px;
  left:0;
  width: 6px;
  height: 20px;
  background-color: var(--default);
  transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -o-transform: skew(-30deg);
}
.page-lead {
  font-size: 3.4rem;
  padding: 2rem 0;
  color: var(--default);
}
.page-lead span {
  display: block;
  font-size: 1rem;
  color: #777;
}
@media(min-width:768px) {
  .page-h3 {
    font-size: 2rem;
  }
  .index-h3 {
    font-size: 2.4rem;
  }
  .index-h4 {
    font-size: 2.2rem;
  }
  .page-lead {
    font-size: 4rem;
  }
}

.page-lead-p {
  border-left: 5px solid var(--default);
  padding: .25rem 0 .25rem 1rem;
  font-size: 18px;
}
.page-lead ruby > rt, .navbar-brand ruby > rt {
  font-size: 30%;
}
/* ==============================
  block top videobg
 ============================== */
.video-bg {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
.video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.video-bg .container {
  position: relative;
  z-index: 2;
}
.video-bg .overlay{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
/* todo:イメージurl確認 */
@media (pointer: coarse) and (hover: none) {
  /* .video-bg {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  } */
  /* .video-bg video {
    display: none;
  } */
}

/* ==============================
  DL look like table
 ============================== */
.profile-item:not(:last-of-type), .career-item:not(:last-of-type) {
  border-bottom: 3px solid #eee;
}
.profile-item dt {
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  white-space: nowrap;
}
.profile-item dt::after {
  content: '年';
  font-size: 0.8rem;
  color: #777;
  padding-left: 0.5rem;
}
.profile-item dd {
  padding-bottom: .5rem;
}
.profile-item ul {
  margin: 0;
  padding-top: 8px;
}
.career-item {
  padding-bottom: .5rem;
}
.career-item:first-of-type {
  margin-top: 3rem;
}
.career-item dt {
  font-size: 1.1rem;
}
.career-item dd {
  font-size: 18px;
}
.act-list li:not(:first-child) {
  padding-top: 1rem;
}

/* ==============================
  bootstrap pagination
 ============================== */
.page-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  border: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: var(--default);
  border-color: var(--default);
}
.page-item:last-child .page-link,
.page-item:first-child .page-link {
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
}

/* ==============================
  youtube w/ modal list
 ============================== */
.ytswiper .swiper-slide:not(.swiper-slide-active) .yt-play{
  display: none;
}
.yt-wrap {
  position: relative;
}
.yt-wrap .yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.yt-thumb i.bi {
  position: absolute;
  top:50%;
  left:50%;
  color: #fff;
  transform: translate(-50%, -50%);
  z-index: 99!important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: 2;
}
.yt-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* width:100%; */
}
.yt-thumb .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 0;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}
.yt-link:hover .yt-thumb .overlay {
  opacity: 0;
}

/* ==============================
  page books
 ============================== */
.book-img img{
  display: block;
  margin: 0 auto;
  width: 182px;
}
/* ==============================
  3dflip 広報紙
 ============================== */
.book-thumbnail img {
  width:100%;
  height:auto;
}
/* ==============================
  page idea > pickup
 ============================== */
.pickup-link {
  min-height: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #444;
  position: relative;
  top: 0;
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}
.pickup-link:hover {
  top: -2px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
.pickup-link .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}
.pickup-link article {
  padding: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}
/* ==============================
  page sns
 ============================== */
/* .accordion-item, .accordion-button {
  background-color: transparent;
}
.sns-wrap {
  padding: 3rem;
}
.sns-wrap:not(:first-of-type) {
  margin-top: 3rem;
}
.bg-youtube {
  background-color: #fff;
  border: 5px solid #ED3819;
}
.bg-youtube .page-h3::before {
  background-color: #ED3819;
}
.bg-line {
  background-color: #fff;
  border: 5px solid #01B902;
}
.bg-line .page-h3::before {
  background-color: #01B902;
}
.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}
.accordion-button {
  font-size: 1.3rem;
}
.accordion-button:not(.collapsed) {
  color:#444;
  background-color: rgba(0, 64, 152, 0.1);
}
.snsimg-wrap {
  height:300px;
  overflow: hidden;
} */

.page-sns dt {
  font-size: 1.2rem;
  line-height: 1.7;
  padding-bottom: 0.5rem;
  padding-top: 0.7rem;
}
.text-yt {
  color: #FF0000;
}
.text-twit {
  color: #1DA1F1;
}
.text-fb {
  color: #4167B2;
}
.text-line {
  color: #06c755;
}
.text-insta {
  color: #CF2F93;
}
.btn-line {
  background-color: #fff;
  border: 3px solid #06c755;
  color:#06c755;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}
.btn-line:hover {
  background-color: #06c755;
  color: #fff;
  cursor: pointer;
}
.btn-line:hover svg {
  fill: #fff;
}
.btn-line svg {
  fill:#06c755;
}
.btn-snss {
  background-color: #fff;
  border: 3px solid #2FA5F3;
  color:#2FA5F3;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}
.btn-snss:hover {
  background-color: #2FA5F3;
  color: #fff;
  cursor: pointer;
}
.sns-catch {
  font-size: 1.6rem;
  font-weight: 500;
  color: #1DA1F1;
}
@media (min-width: 768px){
  .sns-catch {
    font-size: 4vw;
    
  }
}

.fb-wrap {
  max-width: 500px;
  width: 100%;
  margin: 0 auto !important;
  overflow: auto;
}

/*----------make donne ----------*/
.fb3d-categories{
	margin: 0 auto;
}
/*----------make donne ----------*/


/* page online.html */
.object-fit-cover {
  object-fit: cover;
}
.object-fit-contain {
  object-fit: contain;
}
.headline {
  font-size: 2rem;
  font-weight: 700;
  color: var(--default);
}
@media (min-width: 992px) {
  .headline {
  font-size: 3rem;
}
}
.faq-h4 {
  background-color: var(--default);
  color: #fff;
  padding: 10px 20px;
  margin-top: 3rem;
} 
.faq-h4 span {
  padding-right: 15px;
}
.faq-p {
  padding: 10px 20px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}
.faq-p span {
  padding-right: 15px;
  font-size: 2rem;
  font-weight: 500;
}