@charset "UTF-8";

/*===============================================================

	root

===============================================================*/

:root {
  --main-color: #1F65D9;
  --main-color-rgb: 31, 101, 217;
  --primary-color: #E9422C;
  --primary-color-rgb: 233, 66, 44;
  --black-color: #222;
  --text-gray: #858787;
  --line-gray: #E5E7E7;
  --bg-gray: #F5F7F7;
  --white-color: #fff;
  --bind-color: #0bc8c0;
}

/*@font-face {
  font-display: swap;
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 400;
  src: local('NotoSansJP'), local('NotoSansJP-Light'),
       url('fonts/NotoSansJP-Light.woff2') format('woff2');
}*/

/*@font-face {
  font-display: swap;
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 400;
  src: local('NotoSansJP'), local('NotoSansJP-Regular'),
       url('fonts/NotoSansJP-Regular.woff2') format('woff2');
}*/

/*@font-face {
  font-display: swap;
  font-family: 'NotoSansJP';
  font-style: normal;
  font-weight: 700;
  src: local('NotoSansJP'), local('NotoSansJP-Bold'),
       url('fonts/NotoSansJP-Bold.woff2') format('woff2');
}*/


/*@font-face {
  font-display: swap;
  font-family: 'BebasNeue';
  font-style: normal;
  font-weight: 400;
  src: local('BebasNeue'), local('BebasNeue-Regular'),
       url('fonts/BebasNeue-Regular.woff2') format('woff2');
}*/


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?b7bjcw');
  src:  url('fonts/icomoon.eot?b7bjcw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?b7bjcw') format('truetype'),
    url('fonts/icomoon.woff?b7bjcw') format('woff'),
    url('fonts/icomoon.svg?b7bjcw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-top:before {
  content: "\e900";
}
.icon-arrow-bottom:before {
  content: "\e901";
}
.icon-arrow-right:before {
  content: "\e902";
}
.icon-arrow-left:before {
  content: "\e903";
}
.icon-plus:before {
  content: "\e904";
}
.icon-minus:before {
  content: "\e905";
}
.icon-check:before {
  content: "\e906";
}
.icon-search:before {
  content: "\e907";
}
.icon-pin:before {
  content: "\e908";
}
.icon-facebook:before {
  content: "\e909";
}
.icon-twitter:before {
  content: "\e90a";
}
.icon-hatena:before {
  content: "\e90b";
}
.icon-instagram:before {
  content: "\e90c";
}
.icon-line:before {
  content: "\e90d";
}
.icon-site:before {
  content: "\e90e";
}
.icon-document:before {
  content: "\e90f";
}
.icon-youtube:before {
  content: "\e910";
}
.icon-mail:before {
  content: "\e911";
}
.icon-seminar:before {
  content: "\e912";
}




/*===============================================================

	common

===============================================================*/

body,
html {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	font-family: 'Noto Sans JP','Helvetica Neue','Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ',sans-serif;
  font-weight: 300;
  font-feature-settings: "palt";
	letter-spacing: .1em;
}

a {
  color: var(--black-color);
  text-decoration: none;
}

a.textlink {
  color: var(--main-color);
}

a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  body,
  html {
    font-size: 14px;
  }
}


.bebas_neue {
  font-family: 'din-1451-lt-pro-engschrift';
  font-weight: normal !important;
}

.description {
  font-size: .875rem;
}


/*---------------------------------------------------------------
	thumbnail
---------------------------------------------------------------*/

.thumbnail.type-billboard:after {
  padding-top: 35%;
}

.thumbnail.type-topic:after {
  padding-top: 55.555%
}


.thumbnail:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--black-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: 0.3s ease;
}

a:hover .thumbnail:before {
  opacity: .2;
}

/*---------------------------------------------------------------
	tag
---------------------------------------------------------------*/

.tag {
  width: 100%;
  max-width: 110px;
  text-align: center;
  font-size: .875rem;
  line-height: 32px;
  background-color: var(--white-color);
  display: inline-block;
}

.tag.bebas_neue {
  font-size: 1.125rem;
}

.thumbnail .tag {
  position: absolute;
  bottom: 0;
}

.tag.type-category,
.tag.type-new,
.tag.type-renewal {
  padding: .5em 0 .25em;
  font-size: 1.125rem;
  font-family: 'din-1451-lt-pro-engschrift';
  line-height: 1;
  font-style: normal;
}

.tag.type-primary {
  color: var(--white-color);
  background-color: var(--primary-color);
}

.tag.type-renewal {
  color: var(--white-color);
  background-color: var(--black-color);
}

.tag.type-new {
  color: var(--white-color);
  background-color: var(--main-color);
}

.tag.type-seminar-web {
  color: var(--white-color);
  background-color: #e7b43f;
}

.tag.type-seminar-marketing {
  color: var(--white-color);
  background-color: #1e9894;
}

.tag.type-seminar-business {
  color: var(--white-color);
  background-color: #4d73ba;
}

.tag.type-seminar-meeting {
  color: var(--white-color);
  background-color: #ef5376;
}


@media (max-width: 768px) {
  .tag {
    max-width: 80px;
    font-size: .875rem;
    line-height: 22px;
  }
}

/*---------------------------------------------------------------
	section navigation
---------------------------------------------------------------*/

.nav-archive {
  width: 100%;
  text-align: right;
  font-weight: normal;
  display: block;
}

@media (min-width: 769px) {
  /*.area-category .nav-archive,*/
  /*.area-new_article .nav-archive,*/
  .writer-info .nav-archive {
    margin: 0 !important;
    position: absolute;
    top: var(--padding-section);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .writer-info .nav-archive {
    top: 0;
  }
}

.nav-archive:after {
  content: '\e902';
  font-family: 'icomoon';
}

@media (max-width: 768px) {
  .nav-archive {
    margin-top: var(--margin);
  }
  .area-writer .nav-archive {
    margin-top: var(--margin-s);
  }
}


/*===============================================================

	container contents 

===============================================================*/

.contents-wrapper.top {
  overflow-x: hidden;
}
.contents-wrapper.top:after {
  content: url( 'data:image/svg+xml;utf-8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 94"><path d="M0,0v94h400V0H0z M399,89.5c-1.1,2.6-3.6,4.1-6.2,4.1c-0.9,0-1.7-0.2-2.6-0.5L200,14.3L9.7,93.1c-3.4,1.4-7.3-0.2-8.7-3.6c-1.4-3.4,0.2-7.3,3.6-8.7L197.4,0.9c1.6-0.7,3.5-0.7,5.1,0l192.8,79.9C398.8,82.2,400.4,86.1,399,89.5z"/></svg>' );
  width: 375vw;
  height: calc(375vw * 0.235);
  background-image: url(../_images/bg.jpg);
  background-position: top center/*top 60% right 40%*/;
  background-repeat: no-repeat;
  background-size: contain/*40%*/;
  position: absolute;
  top: var(--margin);
  left: 50%;
  transform: translateX(-55%);
  fill: var(--white-color);
  z-index: -1;
  outline: 1px solid var(--white-color);
  outline-offset: -1px;
}

@media (max-width: 768px) {
  .contents-wrapper.top:after {
    width: 600vw;
    top: 60px;
    transform: translateX(-54%);
  }
}

.contents-wrapper.modal_mode {
  min-height: auto;
}

.contents-wrapper.modal_mode .contents-header,
.contents-wrapper.modal_mode .contents-footer,
.contents-wrapper.modal_mode .modal_registration {
  display: none;
}


/*---------------------------------------------------------------
	header
---------------------------------------------------------------*/

.contents-header .section {
  padding-top: var(--margin);
  padding-bottom: var(--margin);
}


/*  section-header
---------------------------------------------------------------*/

.contents-header .section-header {
  max-width: none;
  padding-left: var(--margin-l);
  padding-right: var(--margin-l);
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}


/*  header_logo
---------------------------------------------------------------*/

.contents-header .header_logo {
  width: 100%;
  max-width: 240px;
  margin: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--black-color);
  display: block;
}

.header_logo-text {
  font-size: 11px;
  letter-spacing: normal;
  font-weight: 400;
  text-align: center;
  letter-spacing: .1em;
}

#header_logo-img .logo_group-bind {
  fill: var(--main-color);
}

#header_logo-img .logo_group-camp {
  fill: var(--primary-color);
}

@media (max-width: 1280px) {
  .contents-header .section-header {
    padding-left: var(--margin);
    padding-right: var(--margin);
  }
}

@media (max-width: 768px) {
  .contents-header .header_logo {
    max-width: 160px;
  }
  .header_logo-text {
    display: none;
  }
}

/*---------------------------------------------------------------
	main
---------------------------------------------------------------*/

.contents-main {
  padding-top: var(--padding-section);
  padding-bottom: var(--padding-section);
}

.archive .contents-main {
  padding-bottom: 0;
}

.top .contents-main {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .contents-main.split {
    padding-bottom: 0;
  }
  .aside {
    width: 100vw !important;
    margin-left: calc(-1 * var(--margin)) !important;
    margin-right: calc(-1 * var(--margin));
    padding: var(--padding-section) var(--margin);
    background-color: var(--bg-gray);
  }
}


/*---------------------------------------------------------------
	footer
---------------------------------------------------------------*/

.contents-footer {
  background-color: var(--bg-gray);
}

.contents-footer .footer_logo {
  width: 100%;
  max-width: 160px;
  line-height: 1;
  display: block;
}

#footer_logo-img .logo_group-bind {
  fill: var(--main-color);
}

#footer_logo-img .logo_group-camp {
  fill: var(--primary-color);
}

.contents-footer .footer_logo_bind {
  display: inline-block;
}

.footer_logo_bind {
  max-width: 120px;
}

#footer_logo-bind {
  width: 100%;
  fill: var(--bind-color);
}


/*  footer nav
---------------------------------------------------------------*/

.footer-nav {
  margin-top: var(--margin);
}

.footer-nav .list {
  font-size: .875rem;
  padding-bottom: var(--margin-s);
  border-bottom: 1px solid var(--line-gray);
}

.footer-nav .list + .list {
  margin-top: var(--margin-s);
}

.footer-nav .list .title {
  min-width: 4em;
}

@media (max-width: 768px) {
  .contents-footer .footer_logo {
    margin: 0 auto;
  }
  .footer-nav .list li {
    width: calc((100% - var(--margin-s)) / 2);
  }
  .footer-nav .list > :first-child {
    width: 100%;
  }
  .footer-nav .list > :nth-child(even) {
    margin-left: 0 !important;
  }
  .footer-nav .list li + li {
    margin-top: var(--margin-s);
  }
}

/*  media
---------------------------------------------------------------*/

.footer-media .gcol.split-diff-left > :nth-child(2n-1),
.footer-media .gcol.split-diff-right > :nth-child(2n) {
  width: 8em !important;
}

.footer-media .gcol.split-diff-left > :nth-child(2),
.footer-media .gcol.split-diff-right > :nth-child(2n-1) {
  flex: 1;
}

@media (max-width: 768px) {
  .footer-media {
    margin-bottom: var(--margin-l) !important;
    padding-bottom: var(--margin-l);
    border-bottom: 1px solid var(--line-gray);
  }
  .footer-media .gcol.split-diff-left:not(.hold) > :nth-child(2n-1),
  .footer-media .gcol.split-diff-right:not(.hold) > :nth-child(2n) {
    width: 100% !important;
  }
}



/*  footer sns
---------------------------------------------------------------*/

.gcol .col .footer-sns {
  margin-top: calc( var(--margin-xs) * -1 ) !important;
}

.footer-sns > :first-child {
  margin-left: calc( var(--margin-xs) * -1 ) !important;
}

.footer-sns li {
  /*margin-top: var(--margin-s);*/
}

.footer-sns a {
  display: inline-block;
}

.footer-sns [class^="icon-"] {
  font-size: 2.5rem;
}

.footer-sns .logo-dsinside {
  margin-top: var(--margin-s);
  margin-left: 0 !important;
}

.footer-sns .logo-dsinside a {
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: top;
}

.footer-sns .logo-dsinside img {
  width: 100px;
}

.footer-sns .logo-dsinside .description {
  margin-top: 0;
  margin-left: 20px;
  color: var(--text-gray);
  font-size: 12px;
  /*font-weight: lighter;*/
  flex: 1;
}

@media (max-width: 1200px) {
  .list.footer-sns li + li {
    margin-left: var(--margin-s) !important;
  }
  .footer-sns .logo-dsinside {
    margin-top: 0;
  }
  .footer-sns .logo-dsinside .description {
    display: none;
  }
}


@media (max-width: 768px) {
  .footer-sns {
    /*padding-bottom: calc( var(--padding-section) - var(--margin));*/
    /*justify-content: space-evenly;*/
    align-items: center;
  }
  .footer-sns .icon + .icon {
   /* margin-left: 0 !important;*/
  }
  .list.footer-sns li + .logo-dsinside {
    margin-top: var(--margin-s);
    margin-left: 0 !important;
  }
  .footer-sns .logo-dsinside {
    max-width: 6em;
  }
}



/*---------------------------------------------------------------
	section
---------------------------------------------------------------*/

.section-header + [class^="section-"],
[class^="section-"] + .section-footer {
	margin-top: calc(var(--margin) * 1.5);
}


/*===============================================================

	gnav

===============================================================*/

.gnav {
  transition: 0.3s ease;
}

.gnav .list {
  justify-content: flex-end;
}

.gnav .label {
  position: relative;
}

.gnav .list > li > .label:not(.btn) {
  padding: .5em .25em;
}

@media (min-width: 769px) {
  .gnav {
    flex: 1;
  }
  .gnav .list > li > .label:not(.btn):before {
    content: '';
    width: 0;
    height: 2px;
    background-color: var(--black-color);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
  }

  .gnav .list > li:hover > .label:before {
    width: 100%;
  }
}

.gnav .label {
  display: inline-block;
}

/*  parent children
---------------------------------------------------------------*/

.gnav .parent {
  position: relative;
}

.gnav .parent > .label:after {
  content: '\e901';
  font-family: 'icomoon';
  line-height: 1;
}

.gnav .parent .children {
  width: 12em;
  height: 0;
  background-color: var(--bg-gray);
  position: absolute;
  top: 100%;
  left: 0;
  transition: 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 769px) {
  .gnav .parent:hover .children {
    height: auto;
    padding-top: .5em;
    padding-bottom: .5em;
    overflow: auto;
  }
}

.gnav .parent .children li {
  width: 100%;
  margin-left: 0 !important;
}

.gnav .parent .children .label {
  padding: .5em 1em;
  font-size: .875rem;
  display: block;
}

.gnav .parent .children .label:hover {
  background-color: var(--line-gray);
}

/*---------------------------------------------------------------
	service
---------------------------------------------------------------*/

.nav-service .label {
  font-weight: normal;
}

.nav-service > li > .label {
  font-size: 12px;
}

/*.nav-service .mylist {
  padding-left: var(--margin-s);
  border-left: 1px solid var(--line-gray);
}

.nav-service .mylist + .mylist {
  padding-left: 0;
  border-left: none;
}*/

.nav-service .mylist,
.nav-service .mylist + li {
  padding-left: var(--margin-s);
  border-left: 1px solid var(--line-gray);
}

.nav-service .mylist + .mylist {
  padding-left: 0;
  border-left: none;
}

.nav-service .mylist > .label.type-primary:not(.btn) {
  color: var(--primary-color);
}

.nav-service .mylist .label.type-primary:before {
  background-color: var(--primary-color) !important;
}

.nav-service .label.btn.type-primary {
  font-weight: bold;
  background-color: var(--primary-color);
  border: none;
}

/*---------------------------------------------------------------
	category
---------------------------------------------------------------*/

.nav-category {
  margin-top: var(--margin-s);
}

.nav-category .label {
  padding: 0 .25em !important;
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: 1.375rem;
}

/*  search
---------------------------------------------------------------*/

#search_article {
  padding: 0;
  position: relative;
}

#search_article input,
#search_article button {
  background-color: transparent;
  border: none;
}

#search_article input {
  width: 100%;
  max-width: 160px;
  margin-right: 2rem;
}

#search_article .icon-search {
  min-width: auto;
  padding: .1em;
  color: var(--black-color);
  font-size: 2rem;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


/* ------------------------------------------------------------------
 gnav-trigger
------------------------------------------------------------------ */

.gnav-trigger {
	width: 44px;
	height: 44px;
	margin: 0 !important;
	background-color: var(--white-color);
	cursor: pointer;
	position: fixed;
	top: 10px;
	right: var(--margin-s);
	z-index: 101;
  display: none;
}

.gnav-trigger > .label {
	width: 24px;
	height: 3px;
	background-color: var(--black-color);
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.gnav-trigger > .label:before,
.gnav-trigger > .label:after {
	content: '';
	width: 100%;
	height: 3px;
	font-size: 0 !important;
	line-height: 0;
	background-color: var(--black-color);
	display: block;
	position: absolute;
	left: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.gnav-trigger > .label:before {
	top: -8px;
}

.gnav-trigger > .label:after {
	bottom: -8px;
}

.gnav-trigger.active > .label {
	background-color: transparent;
}

.gnav-trigger.active > .label:before,
.gnav-trigger.active > .label:after {
	top: 50%;
	left: 50%;
	transform-origin: left top 0;
}

.gnav-trigger.active > .label:before {
	transform: rotate(45deg) translate(-50%, -50%);
}

.gnav-trigger.active > .label:after {
	transform: rotate(-45deg) translate(-50%, -50%);
}


/*---------------------------------------------------------------
	responsive
---------------------------------------------------------------*/

@media (max-width: 768px) {
  .gnav-trigger {
    display: block;
  }
  .gnav {
    width: 100vw;
    min-height: 100vh;
    padding: var(--padding-section) var(--margin) var(--margin);
    background-color: var(--white-color);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 100;
  }
  .gnav.active {
    left: 0;
  }
  .gnav .list li {
    width: 100%;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .gnav .list li .label {
    width: 100%;
    font-size: 1rem;
  }
  .gnav .parent {
    cursor: pointer;
  }
  .gnav .parent > .label {
    pointer-events: none;
  }
  .gnav .parent > .label:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .gnav .parent .children {
    width: 100%;
    position: static;
  }
  .gnav .parent.active .children {
    height: auto;
    padding: .5em 0;
  }
  .gnav .nav-category {
    margin-bottom: var(--margin);
  }
  .gnav .nav-category li {
    order: 1;
  }
  .gnav .nav-category > :last-child {
    margin-bottom: var(--margin);
    order: 0;
  }
  .gnav .nav-category li .label {
    padding: var(--margin-s) 0 !important;
    text-align: center;
    font-size: 2rem;
    display: block;
  }
  .gnav .nav-service .btn {
    margin-top: var(--margin);
  }
  .gnav .nav-service > li {
    border-top: 1px solid var(--line-gray);
    border-left: none !important;
  }
}

/*===============================================================

	billboard

===============================================================*/

.contents-billboard .section {
  padding: 0;
}

/*---------------------------------------------------------------
	slider
---------------------------------------------------------------*/

.contents-billboard .slider {
  max-width: none;
  padding-bottom: var(--margin);
  position: relative;
  overflow: hidden;
}

.contents-billboard .slider .slider-item {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--margin-l) calc( var(--margin-l) * 2 );
  text-align: center;
  position: relative;
  box-sizing: content-box;
  overflow: hidden;
}

/*.contents-billboard .slider .slider-item:after {
  content: '';
  width: 100%;
  max-width: 1000px;
  padding-top: 35%;
  margin: 0 auto;
  display: block;
}*/

.contents-billboard .slider .slider-item li {
  /*width: 40%;*/
  max-width: 1000px;
  position: absolute;
  z-index: 1;
  top: -40%;
  right: 0;
  left: auto;
  bottom: auto;
  transform: scale(.4);
  /*transform: translate(-100%,-300%);*/
	transition: 1s ease-in-out;
  
  display: inline-block;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  transform-origin: right top;
  cursor: pointer;
}

.contents-billboard .slider .slider-item li.current,
.contents-billboard .slider .slider-item li.next,
.contents-billboard .slider .slider-item li.prev:not(.after) {
  opacity: .5;
}

.contents-billboard .slider a {
  cursor: pointer;
  pointer-events: none;
  color: var(--black-color);
  display: block;
}

.contents-billboard .slider .slider-item li:hover {
  filter: none;
}

/*.contents-billboard .slider .slider-item li:hover .thumbnail:before {
  opacity: .2;
}*/

.contents-billboard .slider .slider-item .thumbnail {
  background-image: none !important;
}

.contents-billboard .slider .slider-item .thumbnail:after {
  display: none;
}

.contents-billboard .slider .slider-item .thumbnail > img {
  filter: grayscale(100%);
  position: static;
  top: auto;
  left: auto;
  transition: 0.3s ease;
}

.contents-billboard .slider .slider-item .title {
  margin: -2em 0 0 40%;
  font-size: 1rem;
  text-align: right;
  position: absolute;
  top: 100%;
  right: calc(-1 * var(--margin));
  visibility: hidden;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: 1s cubic-bezier(1, 0, 1, 0.5);
  opacity: 0;
}

.contents-billboard .slider .slider-item .title:before {
  content: ''attr(title)'';
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: 4vw;
  font-weight: normal;
  display: block;
}


/*  current
---------------------------------------------------------------*/

.contents-billboard .slider .slider-item li.current {
  z-index: 2;
  opacity: 1;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  transform-origin: center;
  transform: scale(1);
  
}

.contents-billboard .slider .slider-item li.current a {
  pointer-events: auto;
}

.contents-billboard .slider .slider-item li.current .thumbnail {
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.contents-billboard .slider .slider-item li.current .thumbnail img,
.contents-billboard .slider .slider-item li:hover .thumbnail img{
  filter: none;
}

.contents-billboard .slider .slider-item li.current .title {
  opacity: 1;
  visibility: visible;
}

.contents-billboard .slider .slider-item li.current .title .label {
  display: inline;
}


/*  next prev
---------------------------------------------------------------*/

.contents-billboard .slider .slider-item li.next {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  transform: scale(.4);
  transform-origin: right top;
}

.contents-billboard .slider .slider-item li.prev {
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
  transform: scale(.4);
  transform-origin: left bottom;
}

.contents-billboard .slider .slider-item li.prev.out {
  bottom: -40%;
}

/*---------------------------------------------------------------
	slider pagination
---------------------------------------------------------------*/

.contents-billboard .slider-pagination {
  width: 100%;
  max-width: 1160px;
  margin-top: -20px;
  padding: 0 var(--margin);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  z-index: 10;
  pointer-events: none;
}

.contents-billboard .slider-pagination li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--black-color);
	transition: .3s ease;
  opacity: .4;
  cursor: pointer;
  pointer-events: auto;
}

.contents-billboard .slider-pagination li + li {
  margin-top: 10px;
}

.contents-billboard .slider-pagination li:hover,
.contents-billboard .slider-pagination li.current {
  background-color: var(--main-color);
  opacity: 1;
}


/*---------------------------------------------------------------
	responsive
---------------------------------------------------------------*/


@media (max-width: 1200px) {
  .contents-billboard .slider .slider-item {
    padding: var(--margin-l) calc( var(--margin-l) );
  }
}

@media (max-width: 768px) {
  .contents-billboard .slider {
    padding: var(--margin) 0;
  }
  .contents-billboard .slider .slider-item {
    padding: var(--margin-l) var(--margin-s);
  }
  .contents-billboard .slider .slider-item .title {
    display: none;
    right: 0;
  }
  .contents-billboard .slider .slider-item li.current .title {
    display: block;
  }
  .contents-billboard .slider-pagination {
    margin-top: var(--margin-l);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
    top: auto;
    left: auto;
    z-index: 2;
  }
  .contents-billboard .slider-pagination li + li {
    margin-top: 0;
    margin-left: 10px;
  }
  .contents-billboard .slider .slider-item .title {
    margin: -1rem 0 0;
    font-size: .85rem;
  }
  .contents-billboard .slider .slider-item .title .label {
    background-color: rgba(255,255,255,.75);
  }
  .contents-billboard .slider .slider-item .title:before {
    font-size: 3.25rem;
  }
}


/*===============================================================

	category section

===============================================================*/

.area-category {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.area-category:before,
.area-category:after {
  transition: .5s ease-out;
}

.area-category:before {
  content: ''attr(data-category)'';
  width: 100vw;
  margin-top: .1em;
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: 27.5vw;
  line-height: 1;
  color: var(--bg-gray);
  font-weight: normal !important;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: .5;
}

.area-category:after {
  content: '';
  width: 100vw;
  height: 100%;
  background-color: var(--bg-gray);
  position: absolute;
  top: 0;
  left: 100%;
  z-index: -1;
}

.area-category .section-footer {
  margin-top: var(--margin-s);
}

/*  active
---------------------------------------------------------------*/

.area-category.active:after {
  left: 0;
}

.area-category.active:before {
  color: var(--white-color);
  opacity: .65;
}

@media (max-width: 768px) {
  .area-category:before {
    width: auto;
    font-size: 30vh;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    top: 0;
    left: auto;
    right: -10px;
    transform: none;
  }
}


/*---------------------------------------------------------------
	toggle
---------------------------------------------------------------*/

.area-category .lead {
  margin-top: 0;
  font-size: .875rem;
  font-weight: normal;
}

/*---------------------------------------------------------------
	article-list
---------------------------------------------------------------*/

.area-category .article-list {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  transition: .3s ease;
}

.area-category .article-list.active {
  /*margin-left: var(--margin-l);*/
  position: static;
  display: flex;
	flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  opacity: 1;
}

.area-category .article-list .article-main {
  width: 50%;
  padding-right: calc(var(--margin) * 1.5);
  box-sizing: content-box;
}

.area-category .article-list .article-sub {
  width: calc(50% - calc(var(--margin) * 1.5));
  padding-left: calc(var(--margin) * 1.5);
  border-left: 1px solid var(--line-gray);
}


.area-category .article-list .article-main .article .date {
  width: 70px;
  margin: 0;
}

.area-category .article-list .article-main .article .title {
  padding-left: 20px;
  font-size: var(--font-m);
  flex: 1;
}

.article-list + .article-list {
  margin-top: var(--margin-l);
}

.article-list .article {
  position: relative;
}

.article .round.type-bookmark {
  width: 60px;
  height: 60px;
  position: absolute;
  top: -.5em;
  left: calc(100% + .5em - 60px);
  z-index: 5;
  opacity: 0;
  transition: 0.3s ease;
}

.article-sub .article .round.type-bookmark {
  width: 40px;
  height: 40px;
  left: calc(40% + .5em - 40px);
}

.article-sub .article .round.type-bookmark:before {
  font-size: 1.71rem;
}

.article .round.type-bookmark.active,
.article:hover .round.type-bookmark {
  opacity: 1;
}


@media (min-width: 769px) {
  .article-list .article-main.space-l .col + .col {
    margin-top: calc(var(--margin) * 1.5);
  }
}

@media (max-width: 768px) {
  .area-category .article-list > * {
    width: 100% !important;
  }
  .area-category .article-list .article-main {
    width: 100% !important;
    margin: 0;
    padding-right: 0;
  }
  .area-category .article-list .article-main .article .article-info {
    margin-top: 10px !important;
  }
  .area-category .article-list .article-main .article .title {
    margin-top: 5px;
    font-size: 1rem;
  }
  .area-category .article-list .article-sub {
    margin-top: var(--margin);
    /*margin-left: calc(-1* var(--margin-l));*/
    padding-top: var(--margin);
    padding-left: 0;
    border-top: 1px solid var(--line-gray);
    border-left: 0;
  }
  .area-category .article-list .article-main .article .thumbnail,
  .area-category .article-list .article-main .article .article-info,
  .area-category .article-list .article-main .article .date,
  .area-category .article-list .article-main .article .title {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  
  .article .round.type-bookmark {
    width: 36px !important;
    height: 36px !important;
    left: calc(40% + .5em - 36px) !important;
    opacity: 1;
  }
  .area-category .article-list .article-main .article .round.type-bookmark {
    left: calc(100% + .5em - 36px) !important;
  }
  .article .round.type-bookmark:before {
    font-size: 1.71rem;
  }
}


/*---------------------------------------------------------------
	toggle
---------------------------------------------------------------*/

.form.type-toggle {
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.form.type-toggle input {
  display: none;
}

.form.type-toggle .label {
  width: 4.5em;
  height: 2em;
  margin: 0 10px !important;
  line-height: 1;
  border-radius: 10em;
  background-color: var(--black-color);
  display: inline-block;
  position: relative;
	transition: 0.3s ease;
  overflow: hidden;
}

.form.type-toggle .label:before {
  content: '';
  width: 2em;
  height: 2em;
  border: 4px solid var(--black-color);
  border-radius: 10em;
  background-color: var(--white-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
	transition: 0.3s ease;
}

.form.type-toggle :checked + .label {
  background-color: var(--main-color);
}

.form.type-toggle :checked + .label:before {
  border-color: var(--main-color);
  left: calc(100% - 2em);
}

.area-category .form.type-toggle {
  position: absolute;
  top: 50%;
  right: var(--margin);
  transform: translateY(-50%);
  z-index: 1;
}

@media (max-width: 768px) {
  .form.type-toggle {
    font-size: .85rem;
  }
  .area-category .form.type-toggle {
    top: 0;
    transform: none;
  }
}

/*===============================================================

	article-list

===============================================================*/

.main [class^="section-"] + .article-list {
  margin-top: var(--padding-section);
}

.article-list .article a {
  display: block;
}

.article-list .article .date {
  width: 100%;
  margin-bottom: 5px;
  font-size: .75rem;
  /*font-weight: lighter;*/
  letter-spacing: 1px;
  color: var(--text-gray);
}

.article-list .article .title {
  margin-top: 0;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .article-list .article a:not(.btn) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .article-list .article .thumbnail {
    width: 40%;
  }
  .article-list .article .thumbnail .tag {
    max-width: 80px;
    font-size: .875rem;
    line-height: 1;
  }
  .article-list .article .article-info {
    width: 100%;
    max-width: 60%;
    margin-top: 0 !important;
    padding-left: 20px;
  }
  .article-list .article .title {
    margin-top: 0;
    font-size: 1rem;
  }
}


/*  main
---------------------------------------------------------------*/

.article-list .article-main .article .article-info {
  margin-top: var(--margin-s);
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}


/*  sub
---------------------------------------------------------------*/

.article-list .article-sub .article + .article {
  margin-top: var(--margin);
}

.article-list .article-sub .article a {
  display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.article-list .article-sub .article .thumbnail {
  width: 40%;
}

.article-list .article-sub .article .article-info {
  width: 60%;
  padding-left: 20px;
}

.article-list .article-sub .article .title {
  margin-top: 0;
  font-size: 1rem;
}

.article-list .article-sub .article .thumbnail .tag {
  max-width: 80px;
  font-size: 12px;
}

@media (min-width: 769px) {
  .aside .article-list .article-sub .title {
    font-size: 12px;
  }
  .article-list .article-sub .article + .article {
    margin-top: var(--margin-s);
  }
}


/*  ranking
---------------------------------------------------------------*/

.article-list.ranking [class^="article-"] {
  counter-reset: count;
}

.article-list.ranking [class^="article-"] > .article {
  counter-increment: count;
  position: relative;
  z-index: 0;
}


.article-list.ranking [class^="article-"] > .article:after {
  content: '0' counter(count);
  padding-top: .1em;
  font-size: 5em;
  font-family: 'din-1451-lt-pro-engschrift';
  line-height: 1;
  color: var(--line-gray);
  position: absolute;
  bottom: 50%; 
  right: 0;
  transform: translateY(50%);
  z-index: -1;
}


@media (min-width: 769px) {
  .article-list.ranking [class^="article-"] > :first-child:after {
    bottom: -.2em;
    transform: none;
  }
  .article-list.ranking [class^="article-"] > :first-child .thumbnail {
    width: 100%;
  }
  .article-list.ranking [class^="article-"] > :first-child .article-info {
    width: 100%;
    margin-top: 10px;
    padding-left: 0;
  }
  .article-list.ranking [class^="article-"] > :first-child .round.type-bookmark {
    left: calc(100% + .5em - 40px);
  }
}

@media (max-width: 768px) {
  .article-list.ranking [class^="article-"] > .article:after {
    font-size: 35vw;
  }
}


/*===============================================================

	topic section / topic list

===============================================================*/

.area-topic:after {
  content: '';
  width: 100vw;
  padding-top: calc(var(--padding-section) * 2.5 + var(--font-xl) );
  background-image: url(../_images/bg_topics.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.area-topic a {
  display: block;
}

.area-topic .col .title {
  margin-top: var(--margin-s);
}

@media (max-width: 768px) {
  .area-topic:after {
    background-attachment: scroll;
  }
  .area-topic .col .title,
  .area-topic .description {
    display: none;
  }
  .area-topic .gcol .col {
    width: calc((100% - var(--margin) )/2) !important;
  }
  .area-topic .gcol .col + .col {
    margin-top: var(--margin);
  }
  .area-topic .gcol > :first-child {
    width: 100% !important;
  }
  .area-topic .gcol > :last-child {
    margin-left: var(--margin) !important;
  }
}


/*  list-topic
---------------------------------------------------------------*/

.list-topic {
  display: flex;
	flex-wrap: wrap;
  align-items: center;
}

.list-topic li {
  width: 100%;
  display: block;
}

.list-topic li + li {
  margin-top: 10px;
}

.list-topic a {
  display: block;
}

@media (max-width: 768px) {
  .list-topic {
    justify-content: space-between;
  }
  .list-topic li {
    width: calc((100% - 10px)/2);
  }
  .list-topic > :first-child {
    width: 100%;
  }
}
  

/*===============================================================

	new section

===============================================================*/

.area-new_article {
  border-top: 1px solid var(--line-gray);
}

.area-new_article .section-footer {
  margin-top: var(--margin-s);
}


/*===============================================================

	seminar section

===============================================================*/

.area-seminar {
  background-color: var(--black-color);
  z-index: 0;
  overflow: hidden;
}

.area-seminar:before {
  content: '';
  width: 100vw;
  height: 100%;
  background-color: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  opacity: .5;
  z-index: 0;
}

.area-seminar:after {
  content: '';
  width: 110%;
  height: 110%;
  background-image: url(../_images/bg-seminar.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: -1;
  opacity: .5;
  filter: blur(5px);
}

.area-seminar * {
  color: var(--white-color);
}

@media (max-width: 768px) {
  .area-seminar:after {
    background-attachment: scroll;
  }
}


/*---------------------------------------------------------------
	list split btn
---------------------------------------------------------------*/

.area-seminar .list.type-split {
  justify-content: center;
}

.area-seminar .btn.type-ghost {
  color: var(--white-color);
  border-color: var(--line-gray);
}

@media (max-width: 768px) {
  .area-seminar .list.type-split {
    justify-content: flex-start;
  }
  .area-seminar .list.type-split li {
    width: calc((100% - var(--margin-s)) / 2);
  }
  .area-seminar .list.type-split > :first-child {
    width: 100%;
  }
  .area-seminar .list.type-split > :nth-child(even) {
    margin-left: 0 !important;
  }
  .area-seminar .list.type-split li + li {
    margin-top: var(--margin-s);
  }
}


/*===============================================================

	breadcrumbs

===============================================================*/

.area-breadcrumbs {
  margin-top: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-top: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  font-weight: normal;
}

.area-breadcrumbs .inner {
  overflow-x: hidden;
  white-space: nowrap;
}

.nav-breadcrumbs {
  font-size: 12px;
  flex-wrap: nowrap !important;
}

.nav-breadcrumbs li + li {
  margin-left: 10px !important;
}

.nav-breadcrumbs li:after {
  content: '\e902';
  font-family: 'icomoon';
  margin-left: 10px;
  vertical-align: top;
  display: inline-block;
}

.nav-breadcrumbs > :last-child:after {
  display: none;
}

@media (max-width: 768px) {
  .nav-breadcrumbs {
    font-size: 10px;
  }
  .area-breadcrumbs .inner:after {
    content: '';
    width: 20vw;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
}


/*===============================================================

	article section

===============================================================*/

.article-content .section-header .title {
  margin-top: 30px;
}

.article-content .post_content + [class^="section-"],
.article-content .post_document + [class^="section-"] {
  margin-top: var(--margin-l);
}

/*---------------------------------------------------------------
	article-info
---------------------------------------------------------------*/

.article-content .article-info {
  margin-top: 20px;
  display: flex;
	flex-wrap: wrap;
  align-items: center;
}

.article-content .article-info > * + *{
  margin-left: var(--margin-s);
}

.article-content .article-info .tag {
  color: var(--white-color);
  background-color: var(--black-color);
}

.article-content .article-info .date {
  width: 100%;
  margin-left: 0;
  /*padding-right: var(--margin-s);*/
  font-size: .875rem;
  text-align: right;
  /*font-weight: lighter;*/
  letter-spacing: 1px;
  color: var(--text-gray);
  /*border-right: 1px solid var(--line-gray);*/
}

.article-content .article-info .date.type-renewal:before {
  content: 'RENEWAL';
  margin-right: 10px;
  padding: .5em 1em .25em;
  color: var(--black-color);
  font-family: 'din-1451-lt-pro-engschrift';
  line-height: 1;
  background-color: var(--bg-gray);
  display: inline-block;
}

.article-content .article-info .date .old-date {
  margin-left: 10px;
  text-decoration: line-through;
  display: inline-block;
}

.article-content .article-info .date .old-date:before {
  content: '（';
}

.article-content .article-info .date .old-date:after {
  content: '）';
}

.article-content .article-info .list {
  margin-top: 0;
  font-size: 12px;
  /*font-weight: lighter;*/
  flex: 1;
}

/*---------------------------------------------------------------
	article-point
---------------------------------------------------------------*/

.article-point {
  padding: 20px;
  font-weight: normal;
  background-color: var(--bg-gray);
}

/*.article-point a {
  color: var(--main-color);
}*/

.article-point li + li {
  margin-top: 5px;
  padding-bottom: 5px;
  /*border-bottom: 1px solid var(--line-gray);*/
}

.article-point > :first-child {
  padding-left: 0 !important;
}

.article-point .title {
  margin-top: calc(-.5em - 20px);
}

.article-point > :first-child:before {
  display: none;
}

.article-point > :last-child {
  border-bottom: none;
}


/*---------------------------------------------------------------
	article-social
---------------------------------------------------------------*/

.article-social {
  padding: var(--margin-s) 0;
  border-top: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.article-social > * {
  margin-top: 0;
}

.article-social > * + * {
  margin-left: var(--margin);
  padding-left: var(--margin);
  border-left: 1px solid var(--line-gray);
}

.article-social .list.type-split li + li {
  margin-left: 10px;
}

.article-social .title {
  padding-right: 10px;
}

.article-social .title:after {
  content: ''attr(title)'';
  font-size: 12px;
  letter-spacing: 0;
  display: block;
}

/*---------------------------------------------------------------
	article-document
---------------------------------------------------------------*/

.article-document {
  background-color: var(--black-color);
  z-index: 0;
  overflow: hidden;
  position: relative;
}

/*.article-document:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
  opacity: .25;
  z-index: 0;
}

.article-document:after {
  content: '';
  width: 110%;
  height: 110%;
  background-image: url(../_images/bg-document.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: -1;
  opacity: .8;
  filter: blur(5px);
}*/

.article-document a {
  padding: var(--margin);
  text-align: center;
  /*color: var(--white-color);*/
  border-top: 2px solid var(--main-color);
  border-left: 2px solid var(--main-color);
  border-right: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  background-image: url(../_images/bg-document.png);
  background-position: center;
  display: block;
}

.article-document .document-info {

}



/*---------------------------------------------------------------
	article-writer
---------------------------------------------------------------*/

a.article-writer {
  cursor: pointer;
  display: block;
}

.article-writer > * {
  position: relative;
  z-index: 1;
}

.article-writer .title {
  margin: 0;
  padding: 0;
  text-align: center;
}

/*---------------------------------------------------------------
	responsive
---------------------------------------------------------------*/

@media (max-width: 768px) {
  .article-content {
    margin-top: calc(-1 * var(--padding-section)) !important;
  }
  .article-content .section-header .thumbnail {
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
  }
  .article-content .section-header .title {
    margin-top: var(--margin);
    padding-bottom: var(--margin);
    border-bottom: 1px solid var(--line-gray);
  }
  .article-content .article-info {
    position: relative;
  }
  .article-content .article-info .list {
    width: 100%;
    margin-top: var(--margin-s);
    margin-left: 0;
    flex: auto;
  }
  .article-point {
    padding: 10px 20px;
  }
  .article-point .title {
    margin-top: calc(-.5em - 10px);
  }
  .article-social .list {
    justify-content: center;
  }
  .article-social .round {
    width: 48px;
    height: 48px;
  }
  .article-social .round:before {
    font-size: 2rem;
  }

  .article-social .list.sns {
    width: 100%;
    margin-top: var(--margin-s);
    margin-left: 0;
    padding-top: var(--margin-s);
    padding-left: 0;
    border-top: 1px solid var(--line-gray);
    border-left: none;
  }
  .article-social .list .title:after {
    font-size: 10px;
  }
  .article-social .list.bookmark .title:after,
  .article-social .list.sns .title:after {
    display: none;
  }
  .article-content .article-info .date {
    margin: 0;
    position: absolute;
    top: 0;
    z-index: -1;
  }
}


/*===============================================================

	document

===============================================================*/

.document-item .article-info {
  display: block !important;
}

.document-item.type-new .article-info {
  max-width: none;
  margin-top: var(--margin-s);
  padding-left: 0;
}

.document-item.type-new .thumbnail {
  width: 100%;
}

.document-list a:not(.btn) {
  color: var(--black-color) !important;
}

* + .document-list {
  margin-top: var(--margin);
}

.document-list .thumbnail {
  padding-top: 70%;
}

.document-list .thumbnail:after {
  /*padding-top: 70%;*/
  display: none;
}

.document-list .document-item a .thumbnail:after {
  content: '資料をダウンロード';
  width: max-content;
  padding: .5em 1em;
  text-align: center;
  line-height: 1;
  color: var(--white-color);
  border-radius: 4px;
  border: 1px solid var(--line-gray);
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  display: inline-block;
  transition: 0.3s ease;
  cursor: pointer;
  z-index: 1;
}

.document-list .document-item a:hover .thumbnail:after {
  opacity: 1;
}

/*.document-list .document-item a:not(.btn):after {
  content: '資料をダウンロード';
  width: max-content;
  padding: .5em 1em;
  text-align: center;
  line-height: 1;
  color: var(--white-color);
  border-radius: 4px;
  border: 1px solid var(--line-gray);
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  display: inline-block;
  transition: 0.3s ease;
  cursor: pointer;
  z-index: 1;
}

.document-list .document-item:hover a:not(.btn):after {
  opacity: 1;
}*/

.document-list .title + .gcol {
  margin-top: var(--margin-s);
}

.document-item .index {
  margin-top: var(--margin-s);
  padding: var(--margin-s) var(--margin-s) var(--margin-xs);
  background-color: var(--bg-gray);
}

.document-item .index li {
  font-size: 14px;
}

.document-item .index .children {
  margin-top: .5em;
  opacity: .6;
}

.document-item .index .children li {
  padding-left: 1em;
  font-size: 12px;
}

.document-item .index .children li:before {
  content: '-';
  position: absolute;
  left: 0;
}

.document-item .index .title {
  font-size: var(--font-m);
  margin-top: calc(-.5em - 20px);
}

@media (max-width: 768px) {
  * + .document-list {
    margin-top: var(--margin-l);
  }
  .document-list .thumbnail {
    padding-top: 28%;
  }
  .document-item.type-new .thumbnail {
    padding-top: 70% !important;
  }
  .document-list .description {
    display: none;
  }
  .document-item .index {
    margin-top: var(--margin);
  }
  /*.document-item.type-new .article-info {
    margin-top: var(--margin) !important;
  }*/
  .document-item .index .title {
    margin-top: calc(-.5em - 10px);
  }
  .document-item .index li {
    font-size: 12px;;
  }
  .document-item .index .children li {
    font-size: 11px;
  }
  .document_btn li {
    width: calc( (100% - var(--margin-s))/2 );
    margin-top: var(--margin-s);
  }
  .document_btn > :nth-child(2n-1) {
    margin-left: 0 !important;
  }
  .document_btn > :first-child,
  .document_btn > :nth-child(2) {
    margin-top: 0;
  }
}

/*---------------------------------------------------------------
	sample
---------------------------------------------------------------*/

.sample-preview {
  
}

.sample-list {
  margin-top: var(--margin-xs);
}

.sample-list li {
  filter: grayscale(100%);
  transition: 0.3s ease;
  cursor: pointer;
  opacity: 0.5;
}

.sample-list li:hover,
.sample-list li.current {
  filter: none;
  opacity: 1;
}

/*===============================================================

	round

===============================================================*/

.round {
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--line-gray);
  border-radius: 50%;
  background-color: var(--bg-gray);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
  position: relative;
}

.round:before {
  font-family: 'icomoon';
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .3s ease;
}

a.round:hover {
  transform: scale(1.1);
}

.round.type-bookmark {
  cursor: pointer;
}

.round.type-bookmark:before {
  content: '\e908';
  color: var(--text-gray);
}

.round.type-bookmark.active:before,
.round.type-bookmark:hover:before {
  color: var(--primary-color);
}

.merit .round.type-bookmark:hover:before {
  color: var(--text-gray);
}

.merit .round {
  cursor: auto !important;
}

.round.type-facebook:before {
  content: '\e909';
  color: #3B5998;
}

.round.type-twitter:before {
  content: '\e90a';
  color: #1DA1F2;
}

.round.type-hatena:before {
  content: '\e90b';
  color: #00A4DE;
}

.round.type-line:before {
  content: '\e90d';
  color: #00C300;
}

.round.type-site:before {
  content: "\e90e";
}
.round.type-document:before {
  content: "\e90f";
}

.round.type-mail:before {
  content: "\e911";
}

.round.type-seminar:before {
  content: "\e912";
}


/*===============================================================

	merit

===============================================================*/

.merit {
  margin: var(--margin) 0;
  justify-content: center;
}

.merit .round {
  width: 120px;
  height: 120px;
  margin: auto;
}

.merit .round:before {
  font-size: 4rem;
  color: var(--text-gray);
}

.merit li + li {
  margin-left: var(--margin) !important;
}

.merit .title {
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .merit .round {
    width: 80px;
    height: 80px;
  }
  .merit .round:before {
    font-size: 2.5rem;
  }
  .merit .round + .title {
    font-size: 11px;
  }
}


/*===============================================================

	pagination

===============================================================*/

.nav-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.nav-pagination > * + * {
  margin-top: 0 !important;
  margin-right: 0;
  margin-left: var(--margin-s) !important;
}

.nav-pagination .btn {
  width: auto !important;
  min-width: auto;
}

.nav-pagination .form .label {
  padding: 1.25em 2em;
  text-align: center;
  font-weight: normal;
}

.nav-pagination .btn:before {
  font-family: 'icomoon';
  line-height: 1;
}

.nav-pagination .btn.prev:before {
  content: '\e903';
}

.nav-pagination .btn.next:before {
  content: '\e902';
}

@media (max-width: 768px) {
  .nav-pagination .form {
    flex: 1;
  }
}


/*===============================================================

	page_anchor

===============================================================*/

* + .nav-page_anchor {
  margin-top: var(--margin);
}


/*===============================================================

	writer info

===============================================================*/


.writer-info {
  max-width: none;
  margin-top: calc(var(--margin) * 1.5);
  padding-top: calc(var(--margin) * 1.5);
  padding-bottom: calc(var(--margin) * 1.5);
  overflow: hidden;
}

.writer-info + [class^="section-"] {
  margin-top: var(--padding-section);
}

.writer-info:before {
  content: ''attr(data-group)'';
  width: 105vw;
  margin-top: .05em;
  font-family: 'din-1451-lt-pro-engschrift';
  font-size: 16.5vw;
  color: var(--bg-gray);
  word-break: normal;
  text-align: center;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: .75;
  z-index: -1;
}

.writer-info .gcol {
  max-width: var(--size-s);
  align-items: center;
}

.writer-info .gcol .col {
  width: auto !important;
  flex: 1;
}

.writer-info .gcol > :first-child {
  flex: initial;
}

.writer-info .round {
  width: 120px;
  height: 120px;
  border: 4px solid var(--white-color);
}

.writer-info .title:before {
  content: ''attr(data-group)'';
  margin-right: 1em;
  padding: .2em .5em;
  font-family: 'din-1451-lt-pro-engschrift';
  line-height: 1.4;
  color: var(--white-color);
  background-color: var(--black-color);
  display: inline-block;
}

.writer-info .title .label {
  width: auto;
}


@media (max-width: 768px) {
  .writer-info {
    padding-top: 0;
    padding-bottom: 0;
  }
  .writer-info:before {
    font-size: 27vw;
    opacity: 1;
    text-align: right;
  }
  .writer-info .gcol > :first-child {
    position: absolute;
    left: -20vw;
  }
  .writer-info .gcol .col + .col {
    margin-left: 0;
  }
  .writer-info .gcol .description {
    padding-left: calc(20vw + var(--margin-s));
  }
  .writer-info .round {
    width: 40vw;
    height: 40vw;
  }
  .writer-info .title {
    text-align: center;
  }
}



/*===============================================================

	list

===============================================================*/

/*---------------------------------------------------------------
	split
---------------------------------------------------------------*/

.list.type-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.list.type-split.align-center {
  justify-content: center;
}

.list.type-split li {
  display: inline-block;
}

.list.type-split li + li {
  margin-left: var(--margin-s);
}

/*---------------------------------------------------------------
	slash
---------------------------------------------------------------*/

.list.type-slash {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.list.type-slash li {
  margin-right: .5em;
  display: inline-block;
}

.list.type-slash > :last-child {
  margin-right: 0;
}

.list.type-slash li:after {
  content: '/';
  margin-left: .5em;
}

/*---------------------------------------------------------------
	dash
---------------------------------------------------------------*/

.list.type-dash li {
  padding-left: 1.25em;
}

.list.type-dash li:before {
  content: '';
  width: .625rem;
  height: 2px;
  background-color: var(--text-gray);
  position: absolute;
  top: .6em;
  left: 0;
}

/*---------------------------------------------------------------
	tab
---------------------------------------------------------------*/

.list.type-tab {
  border-bottom: 1px solid var(--line-gray);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.list.type-tab li {
  text-align: center;
  font-weight: normal;
  border: 1px solid var(--line-gray);
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: var(--bg-gray);
  display: inline-block;
  overflow: hidden;
  transition: .3s ease;
  position: relative;
}

.list.type-tab li + li {
  margin-left: 5px;
}

.list.type-tab .label {
  padding: .5em;
  word-break: keep-all;
  display: block;
}

.list.type-tab .current,
.list.type-tab li:hover {
  background-color: var(--main-color);
}

.list.type-tab .current .label,
.list.type-tab li:hover .label {
  color: var(--white-color);
}

@media (max-width: 768px) {
  .list.type-tab li {
    flex: 1;
  }
  .list.type-tab li:after {
    content: '';
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(left, rgba(245,247,247,0) 0%, rgba(245,247,247,0) 1%, rgba(245,247,247,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(245,247,247,0) 0%,rgba(245,247,247,0) 1%,rgba(245,247,247,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(245,247,247,0) 0%,rgba(245,247,247,0) 1%,rgba(245,247,247,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f7f7', endColorstr='#f5f7f7',GradientType=1 ); /* IE6-9 */
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
  }
  .list.type-tab .current {
    flex: initial;
  }
  .list.type-tab li.current:after {
    display: none;
  }
}


/*===============================================================

	title

===============================================================*/

.title {
  font-weight: 500;
  letter-spacing: .1em;
}

.title.bebas_neue .label {
  font-size: 110%;
  line-height: 1;
}

.page h1 + * {
  margin-top: calc(var(--margin) * 1.5 );
}

.page h1 + .lead {
  margin-top: var(--margin);
  font-size: 1em;
}


/*===============================================================

	btn

===============================================================*/

.btn, button {
  line-height: 1.4;
  background-color: var(--black-color);
  border-color: var(--black-color);
}

.btn.type-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn .lead, button .lead {
  margin-bottom: .5em;
  font-size: .75em;
  font-weight: normal;
  display: block;
}


/*===============================================================

	form

===============================================================*/

.form.type-label {
  font-weight: 500;
}

.form.type-checkbox > .label:before,
.form.type-input,
.form.type-radio > .label:before,
.form.type-select > .label,
.form.type-textarea,
.form.type-checkbtn > .label {
  border-color: var(--line-gray);
  background-color: var(--bg-gray);
}

.form.type-checkbox > .label:before,
.form.type-radio > .label:before {
  border: 4px solid var(--bg-gray);
  box-shadow: 0 0 0 1px var(--line-gray);
}


.form.type-checkbox > :checked + .label:before,
.form.type-radio > :checked + .label:before {
  border-color: var(--white-color);
  background-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--line-gray);
}

.form.type-select > .label {
  padding-right: 2em;
}

.form.type-select > .label:after {
  content: '\e901';
  font-family: 'icomoon';
  position: absolute;
  right: .5em;
}


/*  checkbtn
---------------------------------------------------------------*/

.form.type-checkbtn {
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.form.type-checkbtn input {
  display: none;
}

.form.type-checkbtn > .label {
  padding: .5em;
  border-radius: 4px;
  border: 1px solid var(--line-gray);
  box-shadow: none;
  display: inline-block;
  transition: .3s ease;
}

.form.type-checkbtn:hover > .label,
.form.type-checkbtn > :checked + .label {
  font-weight: normal;
  color: var(--white-color);
  background-color: var(--main-color);
}

/*  attention
---------------------------------------------------------------*/

.form-attention {
  margin-top: var(--margin-l) !important;
  padding-top: var(--margin-s);
  padding-bottom: var(--margin-s);
  text-align: center;
  border-top: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
}

.form-attention [name="privacy"] + .label {
  font-weight: normal;
}


/*  disabled
---------------------------------------------------------------*/

.btn.disabled,
.btn.disabled:focus,
.btn.disabled:hover,
.form.disabled,
.form.type-select.disabled {
  color: var(--text-gray) !important;
  border-color: var(--line-gray) !important;
  background-color: var(--line-gray) !important;
}


/*  form-group
---------------------------------------------------------------*/
.form-group.align-center {
  justify-content: center;
}


/*  required
---------------------------------------------------------------*/

.form.type-label.required:after {
  content: '*';
  color: var(--primary-color);
}


/*  message
---------------------------------------------------------------*/

#message.error {
  padding: var(--margin);
  border-radius: 4px;
  background-color: rgba(var(--primary-color-rgb), .1);
}

#message.error ul {
  color: var(--primary-color);
}

.modal_mode #message.error {
  margin-bottom: var(--margin);
}


/*  alert
---------------------------------------------------------------*/

.alert {
	padding: .5em 1em;
	font-size: 11px;
  line-height: 1;
	background-color: var(--primary-color);
	display: inline-block;
}

.alert:before {
	border-bottom-color: var(--primary-color);
}

.align-center .alert {
  left: 50%;
  transform: translateX(-50%);
}

/*===============================================================

	layout table

===============================================================*/

.layout-table .row {
  display: flex;
  flex-wrap: wrap;
}

.layout-table .row > * {
  flex: 1;
}

.layout-table .row > :first-child {
  width: 8em;
  flex: initial;
}

.layout-table .row + .row {
  margin-top: 30px;
}

.layout-table .form.type-select {
  margin-left: 0;
  flex: inherit !important;
}


/*  type-line_right
---------------------------------------------------------------*/

.layout-table .row > :first-child {
  margin-right: var(--margin-s);
  padding-right: var(--margin-s);
  text-align: right;
  box-sizing: content-box;
  border-right: 5px solid var(--line-gray);
}


@media (max-width: 768px) {
  .layout-table:not(.hold) .row + .row {
    margin-top: var(--margin-s);
  }
  .layout-table:not(.hold) .row > * {
    width: 100%;
    flex: auto !important;
  }
  .layout-table:not(.hold) .row > :first-child {
    margin-right: 0;
    padding-right: 0;
    text-align: left;
    border-right: none;
    box-sizing: border-box;
  }
}


/*  type-line_bottom
---------------------------------------------------------------*/
.table.type-line_bottom {
	border-spacing: 0;
}

.table.type-line_bottom > tbody > tr > th,
.table.type-line_bottom > tbody > tr > td {
	padding: .5em;
	border-bottom: 1px solid #ddd;
}


.table:not(.hold) > tbody > tr + tr {
  margin-top: 0 !important;
}




/* ==================================================================

	movie_list
	
================================================================== */

.movie_list {
  padding: var(--margin-s);
  background-color: var(--bg-gray);
	position: relative;
}

.movie_list + .movie_list {
	margin-top: var(--margin-s);
}

.movie_list .thumbnail:after {
  padding-top: 60%;
	/*padding-top: 56.25%;*/
}

.movie_list a:hover {
  color: var(--main-color);
}

.movie_list .accordion {
  display: block;
}

.movie_list .accordion.active {
  display: none;
}

.movie_list .title {
  margin-top: var(--margin-s);
  font-size: 1rem;
}

.movie_list .list.type-chapter .title {
  margin: 0;
}

.movie_list .list.type-chapter .title .label {
  padding-right: 2em;
}

.movie_list .list.type-chapter .title .label:after {
  content: '';
  border-top: .4em solid transparent;
  border-bottom: .4em solid transparent;
  border-left: .75em solid var(--black-color);
  border-right: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  transition: 0.3s ease;
}

.movie_list .list.type-chapter .title:hover .label:after {
  border-left-color: var(--main-color);
}

.movie_list .list.type-chapter li {
  padding: var(--margin-xs); 
  border-bottom: 1px solid var(--line-gray);
  transition: 0.3s ease;
}

.movie_list .list.type-chapter li:hover {
  background-color: var(--white-color);
}


/* ==================================================================

	seminar
	
================================================================== */


.seminar-item .thumbnail:after {
  padding-top: 60%;
}


/* ==================================================================

	accordion
	
================================================================== */


.accordion + .content {
  height: 0;
  padding: 0;
  transition: 0.3s ease;
  overflow: hidden;
}

.accordion.active + .content {
  height: auto;
  padding-top: 1em;
}


/* ==================================================================

	registration
	
================================================================== */

.modal_registration .title .label:first-line {
  font-size: var(--font-xs);
}

.modal_registration iframe {
  width: 100%;
  border: none;
}


/*---------------------------------------------------------------
	chatbox
---------------------------------------------------------------*/

.modal_registration.chatbox {
  width: 100%;
  max-width: 320px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.modal_registration.chatbox .accordion {
  padding: .15em .75em .4em;
  color: var(--white-color);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: var(--primary-color);
  cursor: pointer;
}

.modal_registration.chatbox .accordion .label {
  line-height: 1.2;
}

.modal_registration.chatbox .accordion:after {
  content: '\e900';
  font-family: 'icomoon';
  position: absolute;
  top: 50%;
  right: .75em;
  transform: translateY(-50%);
}

.modal_registration.chatbox .accordion.active:after {
  content: '\e901';
}

.modal_registration.chatbox .content {
  padding: 0 1em;
  background-color: var(--bg-gray);
}

.modal_registration.chatbox iframe {
  min-height: 30vh;
}

.modal_registration.chatbox .accordion.active + .content {
  max-height: 40vh;
  padding: 1em;
  position: relative;
  overflow-y: scroll;
}

.chat-box {
  width: 90%;
  margin-left: 0;
  margin-right: auto;
  padding: 1em;
  color: var(--white-color);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
  border-radius: 1em;
  border-top-left-radius: 0;
  background-color: #6eb6e0;
  display: none;
  opacity: 0;
  transition: 0.3s ease;
}

.chat-box.active,
.chat-box.active + .chat-box.type-answer,
#message + .form-check.type-chatbox .chat-box {
  display: block;
  opacity: 1;
  animation-duration: 1s;
  animation-name: fade-in;
}


@keyframes fade-in {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

.chat-box + .chat-box {
  margin-top: var(--margin-xs);
}

.chat-box.type-answer + .chat-box {
  margin-top: var(--margin);
}

.chat-box.type-answer {
  margin-left: auto;
  margin-right: 5px;
  margin-bottom: 5px;
  color: var(--black-color);
  border-top-left-radius: 1em;
  border-top-right-radius: 0;
  background-color: var(--white-color);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
}

.modal_mode .btn {
  width: auto;
  padding: .5em 1em;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.modal_mode .btn.active,
#message + .form-check.type-chatbox .chat-box .btn.active {
  opacity: .5;
  pointer-events: none;
}




@media (max-width: 768px) {
  .modal_registration.chatbox {
    max-width: none;
  }
}


/*---------------------------------------------------------------
	bottom
---------------------------------------------------------------*/

.contents-wrapper.modal_mode.type-bottom {
  padding: var(--margin-s);
}

#swpm-registration-form.type-bottom {
  color: var(--white-color);
}

.modal_registration.bottom {
  width: 100vw;
  padding-left: var(--margin-s);
  color: var(--white-color);
  background-image: url(../_images/bg_topics.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  z-index: 50;
}

.modal_registration.bottom .title {
  width: 13em;
  margin-top: 0;
}

.modal_registration.bottom .content {
  width: 100%;
  height: 107px;
  flex: 1;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom {
  font-size: var(--font-xs);
  color: var(--white-color);
  display: flex;
  flex-wrap: wrap;
}

.modal_mode.type-bottom .updated #swpm-registration-form.type-bottom {
  height: 67px;
  align-items: center;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom > .form-box {
  flex: 1;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom > .form-box + .form-box,
.modal_mode.type-bottom #swpm-registration-form.type-bottom > .form-box + .btn {
  margin-left: 10px;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom .btn {
  width: 10vw;
  margin-top: 0;
  font-size: 1rem;
  left: auto;
  transform: none;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom .form-group > *,
.modal_mode.type-bottom #swpm-registration-form.type-bottom .form-group .form-group {
  margin-bottom: 0;
}

.modal_mode.type-bottom #swpm-registration-form.type-bottom .form.type-input {
  background-color: var(--white-color);
}

.modal_mode.type-bottom .alert {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 0;
}

.modal_mode.type-bottom .alert:before {
  border-top: 4px solid #c00;
  border-bottom: none;
  top: auto;
  bottom: -4px;
}

.modal_mode.type-bottom #message.error {
  padding: 5px var(--margin-s);
  font-size: 11px;
  font-weight: bold;
  background-color: transparent;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
}

.modal_mode.type-bottom #message.error ul {
  margin-left: 1em;
}

.modal_mode.type-bottom #message.error ul li {
  display: inline-block;
}

.modal_mode.type-bottom #message.error ul li + li:before {
  content: '／';
  margin-left: .5em;
  padding-right: .5em;
}

@media (max-width: 768px) {
  .modal_registration.bottom {
    display: none;
  }
}


/*---------------------------------------------------------------
	close
---------------------------------------------------------------*/

.modal_registration_close {
  width: 1em;
  margin: 0 !important;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
  top: 1em;
  left: .5em;
  cursor: pointer;
  -webkit-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
  display: inline-block;
}

.modal_registration_close:before,
.modal_registration_close:after {
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #fff;
	display: block;
}

.modal_registration_close:before {
	transform: translate(-50%,-50%) rotate(45deg);
}

.modal_registration_close:after {
	transform: translate(-50%,-50%) rotate(-45deg);
}

.modal_registration_close:hover {
  color:#fff;
  opacity: 0.5;
}



/* ==================================================================

	modal movie
	
================================================================== */

.modal_area.movie:after {
  display: none;
}

.modal_area.movie .modal_content:after {
  content: '';
  width: 100%;
  padding-top: 56.25%;
  display: block;
}

.modal_area.movie .modal_content .playmovie {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}